68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { LayoutGrid, TrendingUp, DollarSign, Clock } from 'lucide-react';
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
|
|
import { Project } from '@/types/project'; // o la ruta donde pongas types.ts
|
||
|
|
|
||
|
|
interface StatsOverviewProps {
|
||
|
|
projects: Project[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function StatsOverview({ projects }: StatsOverviewProps) {
|
||
|
|
const stats = {
|
||
|
|
total: projects.length,
|
||
|
|
activos: projects.filter(p => p.status === 'en_progreso').length,
|
||
|
|
totalBudget: projects.reduce((acc, p) => acc + p.budget, 0),
|
||
|
|
avgProgress: Math.round(projects.reduce((acc, p) => acc + p.progress, 0) / projects.length)
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||
|
|
<Card className="border-gray-200 hover:shadow-md transition-shadow">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||
|
|
<CardTitle className="text-sm font-medium text-gray-600">Total Proyectos</CardTitle>
|
||
|
|
<LayoutGrid className="w-4 h-4 text-gray-400" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-3xl font-bold text-gray-900">{stats.total}</div>
|
||
|
|
<p className="text-xs text-gray-500 mt-1">Todos los proyectos</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="border-gray-200 hover:shadow-md transition-shadow">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||
|
|
<CardTitle className="text-sm font-medium text-gray-600">Activos</CardTitle>
|
||
|
|
<TrendingUp className="w-4 h-4 text-blue-500" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-3xl font-bold text-gray-900">{stats.activos}</div>
|
||
|
|
<p className="text-xs text-gray-500 mt-1">En progreso ahora</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="border-gray-200 hover:shadow-md transition-shadow">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||
|
|
<CardTitle className="text-sm font-medium text-gray-600">Presupuesto Total</CardTitle>
|
||
|
|
<DollarSign className="w-4 h-4 text-green-500" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-3xl font-bold text-gray-900">
|
||
|
|
€{(stats.totalBudget / 1000).toFixed(0)}k
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-gray-500 mt-1">Suma de presupuestos</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="border-gray-200 hover:shadow-md transition-shadow">
|
||
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||
|
|
<CardTitle className="text-sm font-medium text-gray-600">Progreso Medio</CardTitle>
|
||
|
|
<Clock className="w-4 h-4 text-purple-500" />
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="text-3xl font-bold text-gray-900">{stats.avgProgress}%</div>
|
||
|
|
<p className="text-xs text-gray-500 mt-1">De todos los proyectos</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|