fieles neues

src/components/Dashboard.jsx

@@ -1,7 +1,4 @@
-import { useState } from 'react';
 import { isOverdue } from '../hooks/useAssets';
-import { useAuth } from '../context/AuthContext';
-import LagerstandortManager from './LagerstandortManager';
 import { Card, CardContent } from '@/components/ui/card';
 
 const STAT_CARDS = [
@@ -11,9 +8,7 @@ const STAT_CARDS = [
   { key: 'overdue', color: '#2563EB', label: 'Überfällig (>7 Tage)' },
 ];
 
-export default function Dashboard({ assets, lagerstandorte, onAddLagerstandort, onToggleLagerstandort, onDeleteLagerstandort }) {
-  const { isAdmin, isFilialleiter } = useAuth();
-  const [showManager, setShowManager] = useState(false);
+export default function Dashboard({ assets, statusFilter, onStatusFilterChange }) {
 
   const counts = {
     offen: assets.filter((a) => a.status === 'offen').length,
@@ -22,41 +17,33 @@ export default function Dashboard({ assets, lagerstandorte, onAddLagerstandort,
     overdue: assets.filter(isOverdue).length,
   };
 
-  return (
-    <>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-5">
-        {STAT_CARDS.map(({ key, color, label }) => (
-          <Card key={key} className="py-0" style={{ borderTop: `3px solid ${color}` }}>
-            <CardContent className="py-5">
-              <div className="text-3xl font-bold tracking-tight">{counts[key]}</div>
-              <p className="text-sm text-muted-foreground mt-1">{label}</p>
-            </CardContent>
-          </Card>
-        ))}
+  const handleCardClick = (key) => {
+    onStatusFilterChange?.(statusFilter === key ? null : key);
+  };
 
-        {(isAdmin || isFilialleiter) && (
+  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
-            className="py-0 cursor-pointer transition-colors hover:bg-muted/50"
-            style={{ borderTop: '3px solid #F57C00' }}
-            onClick={() => setShowManager(true)}
+            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">{lagerstandorte.length}</div>
-              <p className="text-sm text-muted-foreground mt-1">Lagerstandorte verwalten</p>
+              <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>
-
-      {showManager && (
-        <LagerstandortManager
-          lagerstandorte={lagerstandorte}
-          onAdd={onAddLagerstandort}
-          onToggle={onToggleLagerstandort}
-          onDelete={onDeleteLagerstandort}
-          onClose={() => setShowManager(false)}
-        />
-      )}
-    </>
+        );
+      })}
+    </div>
   );
 }