actions bereich und admin panel ueberarbeitet

und bug fix
2026-03-15 21:19:49 +01:00
parent 9b9b8d39a8
commit 9a39120919
10 changed files with 659 additions and 116 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,15 @@
+# Appwrite – für Frontend (Vite) und Setup-Skript
+# Erstelle eine Kopie: .env (wird von Git ignoriert)
+
+# Öffentliche Werte (werden im Frontend verwendet – nur VITE_* wird eingebunden)
+VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+VITE_APPWRITE_PROJECT_ID=dein-projekt-id
+VITE_APPWRITE_DATABASE_ID=defekttrack_db
+
+# Nur für das Setup-Skript (npm run setup) und API-Server – nicht im Frontend
+APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+APPWRITE_API_KEY=dein-api-key-hier
+
+# Admin-API: Nur für POST /api/admin/create-user (Frontend sendet diesen Wert im Header)
+ADMIN_SECRET=dein-geheimes-admin-token
+VITE_ADMIN_SECRET=dein-geheimes-admin-token
--- a/LOCAL_SETUP.md
+++ b/LOCAL_SETUP.md
@@ -0,0 +1,134 @@
+# DefektTrack / AssetsTracker – lokal starten (Schritt für Schritt)
+
+## Voraussetzungen
+
+- **Node.js** (z. B. v18 oder v20) – [nodejs.org](https://nodejs.org)
+- **Appwrite** – entweder:
+  - **Appwrite Cloud**: [cloud.appwrite.io](https://cloud.appwrite.io) (kostenloser Account), oder
+  - **Appwrite lokal** mit Docker (siehe unten)
+
+---
+
+## Schritt 1: Abhängigkeiten installieren
+
+Im Projektordner im Terminal ausführen:
+
+```bash
+npm install
+```
+
+---
+
+## Schritt 2: Umgebungsvariablen einrichten
+
+1. **Datei `.env` anlegen** (im Projektroot, neben `package.json`):
+
+   ```bash
+   copy .env.example .env
+   ```
+   (Unter Linux/macOS: `cp .env.example .env`)
+
+2. **`.env` bearbeiten** und die Platzhalter ersetzen:
+
+   - **VITE_APPWRITE_ENDPOINT**  
+     - Appwrite Cloud: `https://cloud.appwrite.io/v1`  
+     - Lokal mit Docker: `http://localhost/v1` (oder deine Appwrite-URL)
+   - **VITE_APPWRITE_PROJECT_ID**  
+     Projekt-ID aus der Appwrite Console (Projekt → Settings).
+   - **VITE_APPWRITE_DATABASE_ID**  
+     Optional; Standard: `defekttrack_db`.
+   - **APPWRITE_ENDPOINT**  
+     Gleich wie `VITE_APPWRITE_ENDPOINT` (wird nur für `npm run setup` genutzt).
+   - **APPWRITE_API_KEY**  
+     API-Key aus Appwrite: Projekt → Settings → API Keys → „Create API Key“ (mit Scopes z. B. für Databases, Users, Teams).  
+     **Wichtig:** Den Key nur für Setup verwenden und nicht im Frontend oder in Git committen.
+   - **ADMIN_SECRET** / **VITE_ADMIN_SECRET** (gleicher Wert)  
+     Nur nötig, wenn du im Admin-Panel **Benutzer hinzufügen** nutzen willst. Beliebiges geheimes Token; das Backend prüft es beim Aufruf von `POST /api/admin/create-user`.
+
+---
+
+## Schritt 3: Appwrite-Projekt und Datenbank einrichten (einmalig)
+
+Damit die App funktioniert, müssen Datenbank, Collections und ein Admin-User angelegt werden:
+
+```bash
+npm run setup
+```
+
+Das Skript legt u. a. an:
+
+- Datenbank und Collections (locations, users_meta, lagerstandorte, assets, audit_logs)
+- Teams (admin, firmenleiter, filialleiter, service, lager)
+- Standard-Filiale „Hauptfiliale“
+- Admin-User: **admin@defekttrack.local** / **Admin1234!**
+
+Nach dem Setup den API-Key aus der `.env` entfernen oder durch einen eingeschränkten Key ersetzen, wenn du ihn nicht mehr brauchst.
+
+---
+
+## Schritt 4: Entwicklungsserver starten
+
+```bash
+npm run dev
+```
+
+Die App läuft dann z. B. unter **http://localhost:5173** (oder der in der Konsole angezeigten URL).
+
+**Benutzer aus dem Admin-Panel anlegen:** Dafür muss zusätzlich der API-Server laufen (in einem zweiten Terminal):
+
+```bash
+npm run dev:api
+```
+
+Vite leitet Anfragen an `/api` an diesen Server weiter. In der `.env` müssen `ADMIN_SECRET` und `VITE_ADMIN_SECRET` (gleicher Wert) gesetzt sein.
+
+---
+
+## Kurzüberblick
+
+| Befehl            | Beschreibung                          |
+|-------------------|--------------------------------------|
+| `npm install`     | Abhängigkeiten installieren          |
+| `npm run setup`   | Appwrite-Datenbank & Admin einrichten (einmalig) |
+| `npm run dev`     | App lokal starten (Vite Dev-Server)  |
+| `npm run dev:api` | API-Server für „Benutzer hinzufügen“ (zweites Terminal) |
+| `npm run build`   | Produktions-Build erstellen          |
+| `npm run preview` | Build lokal ansehen                  |
+
+---
+
+## Optional: Appwrite komplett lokal mit Docker
+
+Wenn du **keinen** Appwrite-Cloud-Account nutzen willst:
+
+1. [Docker](https://www.docker.com/products/docker-desktop/) installieren.
+2. Appwrite starten (offizielle Anleitung: [appwrite.io/docs/installation](https://appwrite.io/docs/installation)).
+
+   Beispiel mit Docker Compose im Projektordner:
+
+   ```bash
+   curl -o docker-compose.yml https://appwrite.io/docker-compose.yml
+   docker compose up -d
+   ```
+
+3. Im Browser **http://localhost** (oder die angegebene URL) öffnen und ein neues Projekt anlegen.
+4. In der `.env` eintragen:
+   - `VITE_APPWRITE_ENDPOINT` = `http://localhost/v1` (oder deine Appwrite-URL)
+   - `APPWRITE_ENDPOINT` = gleicher Wert
+   - `VITE_APPWRITE_PROJECT_ID` = ID des neu angelegten Projekts
+   - `APPWRITE_API_KEY` = API-Key aus dem Projekt (Settings → API Keys)
+
+Dann wie oben **Schritt 3** (`npm run setup`) und **Schritt 4** (`npm run dev`) ausführen.
+
+---
+
+## Häufige Probleme
+
+- **„Bitte APPWRITE_ENDPOINT, VITE_APPWRITE_PROJECT_ID und APPWRITE_API_KEY in .env setzen“**  
+  → `.env` anlegen (aus `.env.example`) und alle drei Werte eintragen.
+
+- **CORS / Verbindungsfehler**  
+  → Endpoint-URL in `.env` prüfen (z. B. `https://cloud.appwrite.io/v1` ohne abschließenden Schrägstrich außer `/v1`). Bei lokalem Appwrite: korrekte Docker-URL und ggf. Host in Appwrite konfigurieren.
+
+- **Login funktioniert nicht**  
+  → Nach `npm run setup` mit **admin@defekttrack.local** / **Admin1234!** einloggen. Bei Cloud: ggf. E-Mail-Verifizierung in den Appwrite-Projekteinstellungen anpassen.
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,9 @@
        "appwrite": "^21.2.1",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "cors": "^2.8.6",
+        "dotenv": "^17.3.1",
+        "express": "^5.2.1",
        "lucide-react": "^0.577.0",
        "next-themes": "^0.4.6",
        "react": "^19.0.0",
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
+    "dev:api": "node server/index.js",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
@@ -18,6 +19,9 @@
    "appwrite": "^21.2.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "cors": "^2.8.6",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
    "lucide-react": "^0.577.0",
    "next-themes": "^0.4.6",
    "react": "^19.0.0",
@@ -27,6 +31,7 @@
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.0.14",
+    "node-appwrite": "^22.1.3",
    "tw-animate-css": "^1.4.0"
  },
  "devDependencies": {
@@ -39,7 +44,6 @@
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.18",
    "globals": "^15.14.0",
-    "node-appwrite": "^22.1.3",
    "prettier": "3.5.3",
    "vite": "^6.1.0"
  }
--- a/server/index.js
+++ b/server/index.js
@@ -0,0 +1,131 @@
+import dotenv from 'dotenv';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+dotenv.config({ path: resolve(__dirname, '..', '.env') });
+
+import express from 'express';
+import cors from 'cors';
+import { Client, Users, Teams, Databases, ID, Query } from 'node-appwrite';
+
+const ENDPOINT = process.env.APPWRITE_ENDPOINT;
+const PROJECT_ID = process.env.VITE_APPWRITE_PROJECT_ID;
+const API_KEY = process.env.APPWRITE_API_KEY;
+const DATABASE_ID = process.env.VITE_APPWRITE_DATABASE_ID || 'defekttrack_db';
+const ADMIN_SECRET = process.env.ADMIN_SECRET;
+
+const TEAM_ROLES = ['admin', 'firmenleiter', 'filialleiter', 'service', 'lager'];
+
+// #region agent log
+function debugLog(location, message, data, hypothesisId) {
+  const payload = { sessionId: '405dbc', location, message, data: data || {}, timestamp: Date.now(), hypothesisId };
+  fetch('http://127.0.0.1:7886/ingest/990166f5-529c-4789-bcc2-9ebbe976f059', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Debug-Session-Id': '405dbc' }, body: JSON.stringify(payload) }).catch(() => {});
+}
+// #endregion
+
+const app = express();
+app.use(cors({ origin: true, credentials: true }));
+app.use(express.json());
+
+function requireAdminSecret(req, res, next) {
+  const secret = req.headers['x-admin-secret'];
+  if (!ADMIN_SECRET || secret !== ADMIN_SECRET) {
+    // #region agent log
+    debugLog('server/index.js:middleware', '403 admin secret mismatch', { hasServerSecret: !!ADMIN_SECRET, hasHeader: !!secret, headerLength: typeof secret === 'string' ? secret.length : 0 }, 'C');
+    // #endregion
+    return res.status(403).json({ error: 'Forbidden – ADMIN_SECRET und VITE_ADMIN_SECRET in .env müssen identisch sein. Beide Dev-Server (Vite + npm run dev:api) nach .env-Änderung neu starten.' });
+  }
+  next();
+}
+
+app.post('/api/admin/create-user', requireAdminSecret, async (req, res) => {
+  // #region agent log
+  debugLog('server/index.js:route', 'create-user route hit', { bodyKeys: Object.keys(req.body || {}) }, 'A');
+  // #endregion
+  try {
+    const { email, password, name, locationId, role, mustChangePassword } = req.body || {};
+    if (!email || !password || !name || !locationId || !role) {
+      return res.status(400).json({
+        error: 'Fehlende Felder',
+        required: ['email', 'password', 'name', 'locationId', 'role'],
+      });
+    }
+    if (!TEAM_ROLES.includes(role)) {
+      return res.status(400).json({
+        error: 'Ungültige Rolle',
+        allowed: TEAM_ROLES,
+      });
+    }
+    if (!ENDPOINT || !PROJECT_ID || !API_KEY) {
+      // #region agent log
+      debugLog('server/index.js:env', 'env missing', { hasEndpoint: !!ENDPOINT, hasProjectId: !!PROJECT_ID, hasApiKey: !!API_KEY }, 'B');
+      // #endregion
+      return res.status(500).json({ error: 'Server-Konfiguration unvollständig (APPWRITE_ENDPOINT, VITE_APPWRITE_PROJECT_ID, APPWRITE_API_KEY in .env prüfen)' });
+    }
+    // #region agent log
+    debugLog('server/index.js:env', 'env check passed', { hasEndpoint: true, hasProjectId: true, hasApiKey: true }, 'B');
+    // #endregion
+
+    const client = new Client().setEndpoint(ENDPOINT).setProject(PROJECT_ID).setKey(API_KEY);
+    const users = new Users(client);
+    const teams = new Teams(client);
+    const databases = new Databases(client);
+
+    let userId;
+    // #region agent log
+    debugLog('server/index.js:users', 'before users.create', { email: !!email, role }, 'D');
+    // #endregion
+    try {
+      const user = await users.create(ID.unique(), email, undefined, password, name);
+      userId = user.$id;
+    } catch (err) {
+      // #region agent log
+      debugLog('server/index.js:users', 'users.create failed', { code: err.code, message: err.message }, 'D');
+      // #endregion
+      if (err.code === 409) {
+        const list = await users.list([Query.equal('email', [email])]);
+        if (list.users.length > 0) userId = list.users[0].$id;
+      }
+      if (!userId) {
+        return res.status(400).json({ error: err.message || 'User anlegen fehlgeschlagen' });
+      }
+    }
+
+    try {
+      await teams.createMembership(role, [], email, userId, undefined, `${ENDPOINT}/auth/confirm`);
+    } catch (err) {
+      if (err.code !== 409) {
+        console.warn('Team-Membership:', err.message);
+      }
+    }
+
+    try {
+      await databases.createDocument(DATABASE_ID, 'users_meta', ID.unique(), {
+        userId,
+        locationId: locationId || '',
+        userName: name,
+        role,
+        mustChangePassword: mustChangePassword !== false,
+      });
+    } catch (err) {
+      if (err.code !== 409) {
+        console.warn('users_meta:', err.message);
+      }
+    }
+
+    return res.status(201).json({ userId, email, name, role, locationId });
+  } catch (err) {
+    // #region agent log
+    debugLog('server/index.js:outer', 'outer catch 500', { message: err.message, code: err?.code, name: err?.name }, 'E');
+    // #endregion
+    console.error('create-user error:', err);
+    const message = err.message || err.toString?.() || 'Interner Serverfehler';
+    return res.status(500).json({ error: message });
+  }
+});
+
+const PORT = process.env.API_PORT || 3001;
+app.listen(PORT, () => {
+  console.log(`API server http://localhost:${PORT}`);
+});
--- a/src/components/AdminPanel.jsx
+++ b/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,9 +143,7 @@ export default function AdminPanel() {
          ))}
        </div>

-        <div className="grid gap-6 lg:grid-cols-2">
-          {/* Filialen */}
-          <Card className="lg:col-span-2">
+        <Card>
          <CardHeader>
            <CardTitle>Filialen verwalten</CardTitle>
          </CardHeader>
@@ -176,8 +171,8 @@ export default function AdminPanel() {
                <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>
-      </div>
-
-      {showLsManager && (
-        <LagerstandortManager
-          lagerstandorte={lagerstandorte}
-          onAdd={addLagerstandort}
-          onToggle={toggleLagerstandort}
-          onDelete={deleteLagerstandort}
-          onClose={() => setShowLsManager(false)}
+                  {editingId === loc.$id && (
+                    <FilialDetail
+                      location={loc}
+                      onClose={() => setEditingId(null)}
+                      showToast={showToast}
+                      onUserAdded={loadData}
                    />
                  )}
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
    </>
  );
 }
--- a/src/components/DefektTable.jsx
+++ b/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>
--- a/src/components/FilialDetail.jsx
+++ b/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>
+  );
+}
--- a/src/components/UserCreateForm.jsx
+++ b/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>
+  );
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,6 +12,10 @@ export default defineConfig({
  },
  server: {
    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
      '/v1': {
        target: 'https://appwrite.webklar.com',
        changeOrigin: true,