50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
import { isOverdue } from '../hooks/useAssets';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
|
|
const STAT_CARDS = [
|
|
{ key: 'offen', color: '#DC2626', label: 'Offen' },
|
|
{ key: 'bearbeitung', color: '#F59E0B', label: 'In Bearbeitung' },
|
|
{ key: 'entsorgt', color: '#6B7280', label: 'Entsorgt' },
|
|
{ key: 'overdue', color: '#2563EB', label: 'Überfällig (>7 Tage)' },
|
|
];
|
|
|
|
export default function Dashboard({ assets, statusFilter, onStatusFilterChange }) {
|
|
|
|
const counts = {
|
|
offen: assets.filter((a) => a.status === 'offen').length,
|
|
bearbeitung: assets.filter((a) => a.status === 'in_bearbeitung').length,
|
|
entsorgt: assets.filter((a) => a.status === 'entsorgt').length,
|
|
overdue: assets.filter(isOverdue).length,
|
|
};
|
|
|
|
const handleCardClick = (key) => {
|
|
onStatusFilterChange?.(statusFilter === key ? null : key);
|
|
};
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4">
|
|
{STAT_CARDS.map(({ key, color, label }) => {
|
|
const isSelected = statusFilter === key;
|
|
return (
|
|
<Card
|
|
key={key}
|
|
className="py-0 cursor-pointer transition-all duration-200 hover:opacity-90"
|
|
style={{
|
|
borderTop: `3px solid ${color}`,
|
|
...(isSelected && {
|
|
backgroundColor: `${color}30`,
|
|
}),
|
|
}}
|
|
onClick={() => handleCardClick(key)}
|
|
>
|
|
<CardContent className="py-5">
|
|
<div className="text-3xl font-bold tracking-tight">{counts[key]}</div>
|
|
<p className={`text-sm mt-1 ${isSelected ? 'text-foreground/90' : 'text-muted-foreground'}`}>{label}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|