actions bereich und admin panel ueberarbeitet

und bug fix

src/components/AdminPanel.jsx

@@ -3,9 +3,7 @@ import { databases, DATABASE_ID } from '@/lib/appwrite';
 import { ID, Query } from 'appwrite';
 import Header from './Header';
 import { useToast } from '@/hooks/useToast';
-import { useAuth } from '@/context/AuthContext';
-import LagerstandortManager from './LagerstandortManager';
-import { useLagerstandorte } from '@/hooks/useLagerstandorte';
+import FilialDetail from './FilialDetail';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -13,16 +11,10 @@ import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 
 export default function AdminPanel() {
-  const { user, userMeta } = useAuth();
   const { showToast } = useToast();
-  const locationId = userMeta?.locationId || '';
-  const { lagerstandorte, addLagerstandort, toggleLagerstandort, deleteLagerstandort } = useLagerstandorte(locationId);
 
-  const [stats, setStats] = useState({ users: 0, locations: 0, assets: 0, lagerstandorte: 0 });
+  const [stats, setStats] = useState({ users: 0, locations: 0, assets: 0, lagerstandorte: 0, locationsWithoutFilialleiter: 0 });
   const [locations, setLocations] = useState([]);
-  const [usersList, setUsersList] = useState([]);
-  const [showLsManager, setShowLsManager] = useState(false);
-
   const [newFiliale, setNewFiliale] = useState({ name: '', address: '' });
   const [addingFiliale, setAddingFiliale] = useState(false);
   const [editingId, setEditingId] = useState(null);
@@ -37,12 +29,15 @@ export default function AdminPanel() {
         databases.listDocuments(DATABASE_ID, 'lagerstandorte', [Query.limit(1)]),
       ]);
       setLocations(locsRes.documents);
-      setUsersList(usersRes.documents);
+      const locationsWithoutFilialleiter = locsRes.documents.filter(
+        (loc) => !usersRes.documents.some((u) => u.locationId === loc.$id && u.role === 'filialleiter')
+      ).length;
       setStats({
         users: usersRes.total,
         locations: locsRes.total,
         assets: assetsRes.total,
         lagerstandorte: lsRes.total,
+        locationsWithoutFilialleiter,
       });
     } catch (err) {
       console.error('Admin-Daten laden fehlgeschlagen:', err);
@@ -93,6 +88,7 @@ export default function AdminPanel() {
       await databases.deleteDocument(DATABASE_ID, 'locations', id);
       setLocations((prev) => prev.filter((l) => l.$id !== id));
       setStats((s) => ({ ...s, locations: s.locations - 1 }));
+      setEditingId((current) => (current === id ? null : current));
       showToast(`Filiale "${loc.name}" gelöscht`, '#607D8B');
     } catch (err) {
       showToast('Fehler beim Löschen: ' + (err.message || err), '#C62828');
@@ -112,7 +108,7 @@ export default function AdminPanel() {
         address: editForm.address.trim(),
       });
       setLocations((prev) => prev.map((l) => l.$id === editingId ? updated : l));
-      setEditingId(null);
+      setEditForm((f) => ({ ...f, name: updated.name, address: updated.address || '' }));
       showToast(`Filiale "${updated.name}" gespeichert`);
     } catch (err) {
       showToast('Fehler beim Speichern: ' + (err.message || err), '#C62828');
@@ -124,6 +120,7 @@ export default function AdminPanel() {
     { label: 'Filialen', value: stats.locations },
     { label: 'Assets gesamt', value: stats.assets },
     { label: 'Lagerstandorte', value: stats.lagerstandorte },
+    { label: 'Filialen ohne Filialleiter', value: stats.locationsWithoutFilialleiter ?? 0 },
   ];
 
   return (
@@ -135,7 +132,7 @@ export default function AdminPanel() {
           <p className="mt-1 text-muted-foreground">System-Übersicht und Verwaltung</p>
         </div>
 
-        <div className="mb-8 grid grid-cols-2 gap-4 lg:grid-cols-4">
+        <div className="mb-8 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
           {statItems.map((item) => (
             <Card key={item.label}>
               <CardContent className="pt-2">
@@ -146,38 +143,36 @@ export default function AdminPanel() {
           ))}
         </div>
 
-        <div className="grid gap-6 lg:grid-cols-2">
-          {/* Filialen */}
-          <Card className="lg:col-span-2">
-            <CardHeader>
-              <CardTitle>Filialen verwalten</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <form className="flex flex-col gap-3 sm:flex-row" onSubmit={handleAddFiliale}>
-                <Input
-                  value={newFiliale.name}
-                  onChange={(e) => setNewFiliale((f) => ({ ...f, name: e.target.value }))}
-                  placeholder="Filialname (z.B. Kaiserslautern)"
-                />
-                <Input
-                  value={newFiliale.address}
-                  onChange={(e) => setNewFiliale((f) => ({ ...f, address: e.target.value }))}
-                  placeholder="Adresse (optional)"
-                />
-                <Button type="submit" disabled={addingFiliale || !newFiliale.name.trim()}>
-                  {addingFiliale ? '...' : 'Hinzufügen'}
-                </Button>
-              </form>
+        <Card>
+          <CardHeader>
+            <CardTitle>Filialen verwalten</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <form className="flex flex-col gap-3 sm:flex-row" onSubmit={handleAddFiliale}>
+              <Input
+                value={newFiliale.name}
+                onChange={(e) => setNewFiliale((f) => ({ ...f, name: e.target.value }))}
+                placeholder="Filialname (z.B. Kaiserslautern)"
+              />
+              <Input
+                value={newFiliale.address}
+                onChange={(e) => setNewFiliale((f) => ({ ...f, address: e.target.value }))}
+                placeholder="Adresse (optional)"
+              />
+              <Button type="submit" disabled={addingFiliale || !newFiliale.name.trim()}>
+                {addingFiliale ? '...' : 'Hinzufügen'}
+              </Button>
+            </form>
 
-              <Separator className="my-4" />
+            <Separator className="my-4" />
 
-              <div className="space-y-3">
-                {locations.length === 0 && (
-                  <p className="py-4 text-center text-sm text-muted-foreground">Keine Filialen vorhanden</p>
-                )}
-                {locations.map((loc) => (
+            <div className="space-y-3">
+              {locations.length === 0 && (
+                <p className="py-4 text-center text-sm text-muted-foreground">Keine Filialen vorhanden</p>
+              )}
+              {locations.map((loc) => (
+                <div key={loc.$id} className="space-y-0">
                   <div
-                    key={loc.$id}
                     className={`flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between ${!loc.isActive ? 'opacity-60' : ''}`}
                   >
                     {editingId === loc.$id ? (
@@ -218,70 +213,20 @@ export default function AdminPanel() {
                       </>
                     )}
                   </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Benutzer */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Benutzer</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-3">
-                {usersList.length === 0 && (
-                  <p className="py-4 text-center text-sm text-muted-foreground">Keine Benutzer vorhanden</p>
-                )}
-                {usersList.map((u) => {
-                  const loc = locations.find((l) => l.$id === u.locationId);
-                  return (
-                    <div key={u.$id} className="flex items-center justify-between rounded-lg border p-3">
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium">{u.userName || u.userId}</span>
-                        <Badge variant="secondary">{u.role}</Badge>
-                      </div>
-                      <span className="text-sm text-muted-foreground">{loc?.name || '–'}</span>
-                    </div>
-                  );
-                })}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Lagerstandorte */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Lagerstandorte</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Button className="mb-4 w-full" onClick={() => setShowLsManager(true)}>
-                Lagerstandorte verwalten
-              </Button>
-              <div className="space-y-2">
-                {lagerstandorte.map((l) => (
-                  <div key={l.$id} className="flex items-center justify-between rounded-lg border p-3">
-                    <span className="text-sm">{l.name}</span>
-                    <Badge variant={l.isActive ? 'default' : 'outline'}>
-                      {l.isActive ? 'Aktiv' : 'Inaktiv'}
-                    </Badge>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        </div>
+                  {editingId === loc.$id && (
+                    <FilialDetail
+                      location={loc}
+                      onClose={() => setEditingId(null)}
+                      showToast={showToast}
+                      onUserAdded={loadData}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
       </div>
-
-      {showLsManager && (
-        <LagerstandortManager
-          lagerstandorte={lagerstandorte}
-          onAdd={addLagerstandort}
-          onToggle={toggleLagerstandort}
-          onDelete={deleteLagerstandort}
-          onClose={() => setShowLsManager(false)}
-        />
-      )}
     </>
   );
 }