+
+ Consumido
+ {spentPercentage}%
+
+
+
90 ? "bg-red-500" : spentPercentage > 70 ? "bg-yellow-500" : "bg-blue-500"
+ }`}
+ style={{ width: `${Math.min(spentPercentage, 100)}%` }}
+ />
+
+
+
+
+ );
+}
+
+// Funciones helper para calcular estadísticas
+function calculateStats(projects: Project[]) {
+ const total = projects.length;
+
+ if (total === 0) {
+ return {
+ total: 0,
+ avgProgress: 0,
+ totalBudget: 0,
+ totalSpent: 0,
+ avgBudget: 0,
+ budgetConsumed: 0,
+ minBudget: 0,
+ maxBudget: 0,
+ uniqueClients: 0,
+ oldestProject: null as string | null,
+ newestProject: null as string | null,
+ avgDuration: 0,
+ };
+ }
+
+ const totalBudget = projects.reduce((acc, p) => acc + p.budget, 0);
+ const totalSpent = projects.reduce((acc, p) => acc + p.spent, 0);
+ const avgProgress = Math.round(projects.reduce((acc, p) => acc + p.progress, 0) / total);
+ const avgBudget = Math.round(totalBudget / total);
+ const budgetConsumed = totalBudget > 0 ? Math.round((totalSpent / totalBudget) * 100) : 0;
+
+ const budgets = projects.map((p) => p.budget);
+ const minBudget = Math.min(...budgets);
+ const maxBudget = Math.max(...budgets);
+
+ const uniqueClients = new Set(projects.map((p) => p.client)).size;
+
+ const dates = projects.map((p) => new Date(p.startDate).getTime()).filter((d) => !isNaN(d));
+ const oldestProject = dates.length > 0 ? new Date(Math.min(...dates)).toLocaleDateString("es-ES") : null;
+ const newestProject = dates.length > 0 ? new Date(Math.max(...dates)).toLocaleDateString("es-ES") : null;
+
+ // Calcular duracion promedio en dias
+ const durations = projects
+ .map((p) => {
+ const start = new Date(p.startDate).getTime();
+ const end = new Date(p.endDate).getTime();
+ if (isNaN(start) || isNaN(end)) return null;
+ return Math.ceil((end - start) / (1000 * 60 * 60 * 24));
+ })
+ .filter((d): d is number => d !== null && d > 0);
+
+ const avgDuration = durations.length > 0 ? Math.round(durations.reduce((a, b) => a + b, 0) / durations.length) : 0;
+
+ return {
+ total,
+ avgProgress,
+ totalBudget,
+ totalSpent,
+ avgBudget,
+ budgetConsumed,
+ minBudget,
+ maxBudget,
+ uniqueClients,
+ oldestProject,
+ newestProject,
+ avgDuration,
+ };
+}
+
+// Panel de estadísticas para "Todos los proyectos"
+interface AllProjectsStatsProps {
+ projects: Project[];
+}
+
+function AllProjectsStats({ projects }: AllProjectsStatsProps) {
+ const stats = calculateStats(projects);
+ const activeProjects = projects.filter((p) => p.status !== "2" && p.progress < 100);
+ const completedProjects = projects.filter((p) => p.status === "2" || p.progress >= 100);
+
+ return (
+
+ {/* Cards principales */}
+
+ }
+ highlight
+ />
+ 0 ? Math.round((activeProjects.length / stats.total) * 100) : 0}% del total`}
+ icon={}
+ />
+ 0 ? Math.round((completedProjects.length / stats.total) * 100) : 0}% del total`}
+ icon={}
+ />
+ }
+ />
+
+
+ {/* Segunda fila: Presupuesto */}
+
+ }
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+
+
+ {/* Tercera fila: Fechas y distribucion */}
+
+ }
+ />
+ }
+ />
+ }
+ />
+
+
+ {/* Cuarta fila: Graficos/Distribuciones */}
+
+
+
+
+
+ {/* Info adicional: Rango de presupuestos */}
+
+
+
+
+
+ Rango de Presupuestos
+
+
+
+
+
+
Minimo
+
{stats.minBudget.toLocaleString("es-ES")}
+
+
+
+
Maximo
+
{stats.maxBudget.toLocaleString("es-ES")}
+
+
+
+
+
+
+
+ Proyectos por Progreso
+
+
+
+
+
+
+ {projects.filter((p) => p.progress < 25).length}
+
+
0-25%
+
+
+
+ {projects.filter((p) => p.progress >= 25 && p.progress < 50).length}
+
+
25-50%
+
+
+
+ {projects.filter((p) => p.progress >= 50 && p.progress < 75).length}
+
+
50-75%
+
+
+
+ {projects.filter((p) => p.progress >= 75).length}
+
+
75-100%
+
+
+
+
+ );
+}
+
+// Panel de estadísticas para "Proyectos Activos"
+interface ActiveProjectsStatsProps {
+ projects: Project[];
+}
+
+function ActiveProjectsStats({ projects }: ActiveProjectsStatsProps) {
+ // Filtrar solo proyectos activos (no cerrados y no completados al 100%)
+ const activeProjects = projects.filter((p) => p.status !== "2" && p.progress < 100);
+ const stats = calculateStats(activeProjects);
+
+ if (activeProjects.length === 0) {
+ return (
+
+
+
No hay proyectos activos
+
Todos los proyectos estan completados o cerrados
+
+ );
+ }
+
+ // Proyectos que necesitan atencion (bajo progreso o alto consumo de presupuesto)
+ const needsAttention = activeProjects.filter((p) => {
+ const spentPercentage = p.budget > 0 ? (p.spent / p.budget) * 100 : 0;
+ return p.progress < 25 || spentPercentage > 80;
+ });
+
+ // Proyectos proximos a terminar
+ const nearCompletion = activeProjects.filter((p) => p.progress >= 75);
+
+ return (
+
+ {/* Cards principales */}
+
+ }
+ highlight
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+
+
+ {/* Alertas */}
+
+
+
+
+
+ Requieren Atencion
+
+
+
+ {needsAttention.length}
+
+ Proyectos con bajo progreso o alto consumo de presupuesto
+
+
+
+
+
+
+
+
+ Proximos a Completar
+
+
+
+ {nearCompletion.length}
+
+ Proyectos con 75% o mas de progreso
+
+
+
+
+
+ {/* Estadísticas adicionales */}
+
+ }
+ />
+ }
+ />
+ }
+ />
+
+
+ {/* Distribucion y Budget */}
+
+
+
+
+
+ {/* Proyectos por progreso */}
+
+
+
+
+ Distribucion por Progreso
+
+
+
+
+
+
+ {activeProjects.filter((p) => p.progress < 25).length}
+
+
Inicio (0-25%)
+
+
+
+ {activeProjects.filter((p) => p.progress >= 25 && p.progress < 50).length}
+
+
En curso (25-50%)
+
+
+
+ {activeProjects.filter((p) => p.progress >= 50 && p.progress < 75).length}
+
+
Avanzado (50-75%)
+
+
+
+ {activeProjects.filter((p) => p.progress >= 75).length}
+
+
Casi listo (75-99%)
+
+
+
+ );
+}
+
+// Panel de estadísticas para "Proyectos Completados"
+interface CompletedProjectsStatsProps {
+ projects: Project[];
+}
+
+function CompletedProjectsStats({ projects }: CompletedProjectsStatsProps) {
+ // Filtrar proyectos completados (cerrados o 100% progreso)
+ const completedProjects = projects.filter((p) => p.status === "2" || p.progress >= 100);
+ const stats = calculateStats(completedProjects);
+
+ if (completedProjects.length === 0) {
+ return (
+
+
+
No hay proyectos completados
+
Aun no se ha completado ningun proyecto
+
+ );
+ }
+
+ // Proyectos que terminaron dentro del presupuesto
+ const withinBudget = completedProjects.filter((p) => p.spent <= p.budget);
+ const overBudget = completedProjects.filter((p) => p.spent > p.budget);
+
+ // Eficiencia promedio (presupuesto restante / presupuesto total)
+ const avgEfficiency =
+ completedProjects.length > 0
+ ? Math.round(
+ completedProjects.reduce((acc, p) => {
+ if (p.budget === 0) return acc;
+ return acc + ((p.budget - p.spent) / p.budget) * 100;
+ }, 0) / completedProjects.length
+ )
+ : 0;
+
+ return (
+
+ {/* Cards principales */}
+
+ }
+ highlight
+ />
+ }
+ />
+ }
+ />
+ }
+ />
+
+
+ {/* Cumplimiento de presupuesto */}
+
+
+
+
+
+ Dentro del Presupuesto
+
+
+
+ {withinBudget.length}
+
+ {stats.total > 0 ? Math.round((withinBudget.length / stats.total) * 100) : 0}% de los proyectos completados
+
+
+
+
+
+
+
+
+ Excedieron Presupuesto
+
+
+
+ {overBudget.length}
+
+ {stats.total > 0 ? Math.round((overBudget.length / stats.total) * 100) : 0}% de los proyectos completados
+
+
+
+
+
+ {/* Estadísticas adicionales */}
+
+ }
+ />
+ }
+ />
+ }
+ />
+
+
+ {/* Distribucion y Budget */}
+
+
+
+
+
+
+
+ Rango de Presupuestos Completados
+
+
+
+
+
+
Minimo
+
{stats.minBudget.toLocaleString("es-ES")}
+
+
+
+
Maximo
+
{stats.maxBudget.toLocaleString("es-ES")}
+
+
+
+
+ {/* Timeline */}
+
+
+
+
+ Rango de Fechas
+
+
+
+
+
+
Primer Proyecto
+
{stats.oldestProject || "N/A"}
+
+
+
+
Ultimo Proyecto
+
{stats.newestProject || "N/A"}
+
+
+
+ );
+}
+
+// Componente de skeleton para carga
+function StatisticsSkeleton() {
+ return (
+
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+// Componente principal de la página
+export default function StatisticsPage() {
+ const [projects, setProjects] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ async function loadProjects() {
+ try {
+ setLoading(true);
+ const data = await getProjects();
+ setProjects(data);
+ setError(null);
+ } catch (err) {
+ console.error("Error loading projects:", err);
+ setError("Error al cargar los proyectos");
+ } finally {
+ setLoading(false);
+ }
+ }
+ loadProjects();
+ }, []);
+
+ if (error) {
+ return (
+
+
+
+
{error}
+
+
+
+ {/* Header */}
+
+
+
+
+
+
+
+
+
Estadisticas
+
+ Analisis detallado de {projects.length} proyectos
+
+
+
+
+
+
+ {/* Main content */}
+
+ {loading ? (
+
+ ) : (
+
+
+
+
+ Todos
+
+ {projects.length}
+
+
+
+
+ Activos
+
+ {activeCount}
+
+
+
+
+ Completados
+
+ {completedCount}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+