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)}
-        />
-      )}
     </>
   );
 }

src/components/DefektTable.jsx

@@ -39,6 +39,12 @@ const STATUS_BADGE_CONFIG = {
   entsorgt: { variant: 'secondary' },
 };
 
+const STATUS_BUTTON_CONFIG = {
+  offen: { variant: 'destructive', className: '' },
+  in_bearbeitung: { variant: 'default', className: 'bg-amber-100 text-amber-800 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-800/40' },
+  entsorgt: { variant: 'secondary', className: '' },
+};
+
 function resolveStandortName(asset, lagerstandorte) {
   if (!asset.lagerstandortId) return '–';
   const ls = lagerstandorte.find((l) => l.$id === asset.lagerstandortId);
@@ -221,7 +227,7 @@ export default function DefektTable({ assets, onChangeStatus, showToast, lagerst
               <SelectFilter value={filters.sortBy} onChange={(v) => { setFilter('sortBy', v || 'prio'); closeFilter(); }} options={SORT_OPTIONS} />
             </ColumnFilter>
 
-            <TableHead>Aktionen</TableHead>
+            <TableHead className="w-[200px] min-w-[200px]">Aktionen</TableHead>
           </TableRow>
         </TableHeader>
 
@@ -231,6 +237,7 @@ export default function DefektTable({ assets, onChangeStatus, showToast, lagerst
             const overdue = isOverdue(a);
             const ageText = days === 0 ? 'Heute' : days === 1 ? '1 Tag' : `${days} Tage`;
             const badgeCfg = STATUS_BADGE_CONFIG[a.status] || STATUS_BADGE_CONFIG.offen;
+            const statusBtnCfg = STATUS_BUTTON_CONFIG[a.status] || STATUS_BUTTON_CONFIG.offen;
 
             return (
               <TableRow
@@ -268,19 +275,36 @@ export default function DefektTable({ assets, onChangeStatus, showToast, lagerst
                   )}
                 </TableCell>
 
-                <TableCell>
-                  <div className="flex items-center gap-1.5">
-                    <Button variant="secondary" size="sm" onClick={() => handleStatusChange(a.$id)}>
+                <TableCell className="w-[200px] min-w-[200px] p-0 align-top">
+                  <div className="grid grid-cols-2 grid-rows-2 gap-0 h-full min-h-[80px] w-full">
+                    <Button
+                      variant={statusBtnCfg.variant}
+                      size="sm"
+                      className={`h-full w-full rounded-none flex items-center justify-center text-xs font-medium ${statusBtnCfg.className || ''}`}
+                      onClick={() => handleStatusChange(a.$id)}
+                    >
                       {NEXT_LABEL[a.status]}
                     </Button>
-                    {a.kommentar && (
-                      <Button variant="outline" size="sm" onClick={() => setCommentAsset(a)}>
-                        Info
-                      </Button>
-                    )}
-                    <Button variant="default" size="sm" onClick={() => navigate(`/asset/${a.$id}`)}>
+                    <Button
+                      variant="default"
+                      size="sm"
+                      className="h-full w-full rounded-none flex items-center justify-center text-xs font-medium"
+                      onClick={() => navigate(`/asset/${a.$id}`)}
+                    >
                       Bearbeiten
                     </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      disabled={!a.kommentar}
+                      className="h-full w-full rounded-none flex items-center justify-center text-xs font-medium"
+                      onClick={() => a.kommentar && setCommentAsset(a)}
+                    >
+                      Info
+                    </Button>
+                    <div className="h-full w-full flex items-center justify-center text-xs font-medium text-muted-foreground bg-muted/30 px-1 truncate" title={a.zustaendig || ''}>
+                      {a.zustaendig || '–'}
+                    </div>
                   </div>
                 </TableCell>
               </TableRow>

src/components/FilialDetail.jsx

@@ -0,0 +1,138 @@
+import { useState, useEffect, useCallback } from 'react';
+import { databases, DATABASE_ID } from '@/lib/appwrite';
+import { Query } from 'appwrite';
+import { useLagerstandorte } from '@/hooks/useLagerstandorte';
+import LagerstandortManager from './LagerstandortManager';
+import UserCreateForm from './UserCreateForm';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { AlertCircle } from 'lucide-react';
+
+const ROLE_LABELS = {
+  admin: 'Admin',
+  firmenleiter: 'Firmenleiter',
+  filialleiter: 'Filialleiter',
+  service: 'Service',
+  lager: 'Lager',
+};
+
+export default function FilialDetail({ location: loc, onClose, showToast, onUserAdded }) {
+  const [users, setUsers] = useState([]);
+  const [showUserForm, setShowUserForm] = useState(false);
+  const [showLsManager, setShowLsManager] = useState(false);
+
+  const { lagerstandorte, addLagerstandort, toggleLagerstandort, deleteLagerstandort } = useLagerstandorte(loc?.$id || '');
+
+  const loadUsers = useCallback(async () => {
+    if (!loc?.$id) return;
+    try {
+      const res = await databases.listDocuments(DATABASE_ID, 'users_meta', [
+        Query.equal('locationId', [loc.$id]),
+        Query.limit(200),
+      ]);
+      setUsers(res.documents);
+    } catch (err) {
+      console.error('Benutzer laden fehlgeschlagen:', err);
+    }
+  }, [loc?.$id]);
+
+  useEffect(() => {
+    loadUsers();
+  }, [loadUsers]);
+
+  const hasFilialleiter = users.some((u) => u.role === 'filialleiter');
+
+  return (
+    <div className="rounded-lg border border-t-0 bg-muted/30 p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="font-semibold">Details: {loc?.name}</h3>
+        <Button variant="ghost" size="sm" onClick={onClose}>
+          Schließen
+        </Button>
+      </div>
+
+      {!hasFilialleiter && (
+        <div className="mb-4 flex items-center gap-2 rounded-md border border-amber-500/50 bg-amber-500/10 px-3 py-2 text-sm">
+          <AlertCircle className="h-4 w-4 shrink-0 text-amber-600" />
+          <Badge variant="outline" className="border-amber-600 text-amber-700">
+            Filialleiter fehlt
+          </Badge>
+        </div>
+      )}
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Lagerstandorte</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Button size="sm" variant="outline" className="w-full" onClick={() => setShowLsManager(true)}>
+              Lagerstandorte verwalten
+            </Button>
+            <div className="max-h-48 space-y-2 overflow-y-auto">
+              {lagerstandorte.length === 0 ? (
+                <p className="text-center text-sm text-muted-foreground">Keine Lagerstandorte</p>
+              ) : (
+                lagerstandorte.map((ls) => (
+                  <div key={ls.$id} className="flex items-center justify-between rounded border px-2 py-1.5 text-sm">
+                    <span className={ls.isActive ? '' : 'text-muted-foreground line-through'}>{ls.name}</span>
+                    <Badge variant={ls.isActive ? 'default' : 'secondary'}>{ls.isActive ? 'Aktiv' : 'Inaktiv'}</Badge>
+                  </div>
+                ))
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Benutzer dieser Filiale</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Button size="sm" variant="outline" className="w-full" onClick={() => setShowUserForm(true)}>
+              Benutzer hinzufügen
+            </Button>
+            <div className="max-h-48 space-y-2 overflow-y-auto">
+              {users.length === 0 ? (
+                <p className="text-center text-sm text-muted-foreground">Keine Benutzer</p>
+              ) : (
+                users.map((u) => (
+                  <div key={u.$id} className="flex items-center justify-between rounded border px-2 py-1.5 text-sm">
+                    <span className="font-medium">{u.userName || u.userId}</span>
+                    <Badge variant="secondary">{ROLE_LABELS[u.role] || u.role}</Badge>
+                  </div>
+                ))
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {showLsManager && (
+        <LagerstandortManager
+          lagerstandorte={lagerstandorte}
+          onAdd={addLagerstandort}
+          onToggle={toggleLagerstandort}
+          onDelete={deleteLagerstandort}
+          onClose={() => setShowLsManager(false)}
+        />
+      )}
+
+      {showUserForm && (
+        <UserCreateForm
+          locationId={loc?.$id}
+          locationName={loc?.name}
+          onSuccess={() => {
+            loadUsers();
+            setShowUserForm(false);
+            onUserAdded?.();
+          }}
+          onCancel={() => setShowUserForm(false)}
+          showToast={showToast}
+        />
+      )}
+    </div>
+  );
+}

src/components/UserCreateForm.jsx

@@ -0,0 +1,145 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+const ROLE_OPTIONS = [
+  { value: 'filialleiter', label: 'Filialleiter' },
+  { value: 'service', label: 'Service' },
+  { value: 'lager', label: 'Lager' },
+  { value: 'firmenleiter', label: 'Firmenleiter' },
+];
+
+const API_BASE = import.meta.env.VITE_API_URL || '';
+
+export default function UserCreateForm({ locationId, locationName, onSuccess, onCancel, showToast }) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [role, setRole] = useState('service');
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!email.trim() || !password || !name.trim() || !locationId) return;
+    setSubmitting(true);
+    try {
+      const res = await fetch(`${API_BASE}/api/admin/create-user`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-Admin-Secret': import.meta.env.VITE_ADMIN_SECRET || '' },
+        body: JSON.stringify({
+          email: email.trim(),
+          password,
+          name: name.trim(),
+          locationId,
+          role,
+          mustChangePassword: false,
+        }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        const msg = data?.error || (res.status === 500 ? 'API-Server prüfen (npm run dev:api) und .env (ADMIN_SECRET, APPWRITE_*)' : 'Fehler beim Anlegen');
+        showToast(msg, '#C62828');
+        return;
+      }
+      showToast(`Benutzer ${name.trim()} angelegt`);
+      onSuccess();
+    } catch (err) {
+      showToast(err.message || 'Fehler beim Anlegen', '#C62828');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={true} onOpenChange={(open) => !open && onCancel()}>
+      <DialogContent className="sm:max-w-[420px]">
+        <DialogHeader>
+          <DialogTitle>Benutzer hinzufügen</DialogTitle>
+          <DialogDescription>
+            Neuer Benutzer für Filiale {locationName || locationId}
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4" autoComplete="off">
+          <div>
+            <Label htmlFor="user-email">E-Mail</Label>
+            <Input
+              id="user-email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="name@beispiel.de"
+              required
+              autoComplete="off"
+              className="mt-1"
+            />
+          </div>
+          <div>
+            <Label htmlFor="user-password">Passwort</Label>
+            <Input
+              id="user-password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+              minLength={8}
+              autoComplete="new-password"
+              className="mt-1"
+            />
+          </div>
+          <div>
+            <Label htmlFor="user-name">Name</Label>
+            <Input
+              id="user-name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Max Mustermann"
+              required
+              autoComplete="off"
+              className="mt-1"
+            />
+          </div>
+          <div>
+            <Label>Rolle</Label>
+            <Select value={role} onValueChange={setRole}>
+              <SelectTrigger className="mt-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {ROLE_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex gap-2 pt-2">
+            <Button type="submit" disabled={submitting}>
+              {submitting ? '...' : 'Anlegen'}
+            </Button>
+            <Button type="button" variant="outline" onClick={onCancel}>
+              Abbrechen
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}