feat: Projekt Scanner integrieren, Whisper in die Einstellungen

Der eigenstaendige Projekt Scanner zieht komplett ins CRM ein und laeuft
parallel zur bestehenden App weiter - jede geteilte Ressource ist verdoppelt
statt geteilt, damit die alte Installation unberuehrt bleibt:

- eigene Datenbank perinco_scanner, legt sich beim Start selbst an
- eigener SCANNER_ENCRYPTION_KEY, eigenes Upload-Verzeichnis
- eigener Scheduler mit Zeitversatz, damit nicht beide Instanzen gleichzeitig
  mit denselben Portal-Cookies scrapen (Rate-Limits, CAPTCHA, doppelter RAM)
- Sperre gegen ueberlappende Laeufe: Scheduler und "Jetzt scannen" teilen sie,
  ein zweiter Aufruf bekommt 409 statt doppelter OpenAI-Kosten

Backend unter /api/scanner hinter der CRM-Anmeldung; die HTTP-Basic-Auth des
Originals entfaellt. CV-PDFs kommen als Stream mit Token statt aus einem
statischen Verzeichnis. Bestandsdaten holt "npm run scanner:import" aus der
alten Datenbank, ohne sie zu veraendern.

Oberflaeche in Tailwind und CI-Farben neu gebaut: Menuepunkt Scanner mit
aufklappbaren Unterpunkten, Einstellungen als eigener Reiter.

Whisper hat keinen eigenen Menuepunkt mehr, sondern ist ein Reiter in den
Einstellungen. Damit diese Geraeteeinstellung jeder Rolle offensteht, sind die
Einstellungen jetzt fuer alle sichtbar - welche Reiter erscheinen, entscheidet
die Rolle.

Ausserdem: kein festes Admin-Passwort mehr im Quelltext, playwright exakt auf
1.60.0 gepinnt (nutzt den vorhandenen Chromium-Build des Servers), technische
Dokumentation mit Funktionszeichnungen unter docs/.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/settings/UserManagement.tsx

@@ -0,0 +1,363 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Modal, ConfirmDialog } from '../ui/Modal';
+import { AvatarPicker } from '../ui/AvatarPicker';
+import { UserAvatar } from '../ui/UserAvatar';
+import { ColorPicker } from './ColorPicker';
+import { inputClass, labelClass } from '../leads/leadUi';
+import { useToast } from '../Toast';
+import { useAuth } from '../../lib/auth';
+import { usersApi, type UserInput } from '../../lib/api';
+import { userColor, type AppUser, type Role } from '../../types';
+
+interface UserFormState {
+  username: string;
+  name: string;
+  email: string;
+  role: Role;
+  is_active: boolean;
+  password: string;
+  /** null = Farbe automatisch aus der Palette */
+  color: string | null;
+  /** '' = kein Foto, dann wird die Initiale angezeigt */
+  avatar: string;
+}
+
+const emptyForm: UserFormState = {
+  username: '',
+  name: '',
+  email: '',
+  role: 'user',
+  is_active: true,
+  password: '',
+  color: null,
+  avatar: '',
+};
+
+const RoleBadge: React.FC<{ role: Role }> = ({ role }) =>
+  role === 'admin' ? (
+    <span className="rounded-md border border-brand-200 bg-brand-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-brand-700">
+      Admin
+    </span>
+  ) : (
+    <span className="rounded-md border border-ink-200 bg-ink-100 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-ink-500">
+      User
+    </span>
+  );
+
+export const UserManagement: React.FC = () => {
+  const { addToast } = useToast();
+  const { user: currentUser, updateUser } = useAuth();
+
+  const [users, setUsers] = useState<AppUser[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [editingUser, setEditingUser] = useState<AppUser | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [form, setForm] = useState<UserFormState>(emptyForm);
+  const [isSaving, setIsSaving] = useState(false);
+  const [userToDelete, setUserToDelete] = useState<AppUser | null>(null);
+
+  const load = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      setUsers(await usersApi.list());
+    } catch (err) {
+      addToast(err instanceof Error ? err.message : 'Benutzer konnten nicht geladen werden.', 'error');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [addToast]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const openCreate = () => {
+    setEditingUser(null);
+    setForm(emptyForm);
+    setIsModalOpen(true);
+  };
+
+  const openEdit = (user: AppUser) => {
+    setEditingUser(user);
+    setForm({
+      username: user.username,
+      name: user.name,
+      email: user.email ?? '',
+      role: user.role,
+      is_active: user.is_active,
+      password: '',
+      color: user.color ?? null,
+      avatar: user.avatar ?? '',
+    });
+    setIsModalOpen(true);
+  };
+
+  const set = <K extends keyof UserFormState>(key: K, value: UserFormState[K]) =>
+    setForm((prev) => ({ ...prev, [key]: value }));
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!form.username.trim() || !form.name.trim()) {
+      addToast('Benutzername und Name sind erforderlich.', 'error');
+      return;
+    }
+    if (!editingUser && form.password.length < 8) {
+      addToast('Das Passwort muss mindestens 8 Zeichen haben.', 'error');
+      return;
+    }
+    if (editingUser && form.password && form.password.length < 8) {
+      addToast('Das neue Passwort muss mindestens 8 Zeichen haben.', 'error');
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const payload: UserInput = {
+        username: form.username.trim(),
+        name: form.name.trim(),
+        email: form.email.trim() || null,
+        role: form.role,
+        is_active: form.is_active,
+        color: form.color,
+        avatar: form.avatar || null,
+      };
+      if (form.password) payload.password = form.password;
+
+      if (editingUser) {
+        const updated = await usersApi.update(editingUser.id, payload);
+        addToast(`Benutzer "${updated.name}" wurde aktualisiert.`, 'success');
+        // Eigene Daten sofort in der laufenden Sitzung uebernehmen.
+        if (currentUser && updated.id === currentUser.id) updateUser(updated);
+      } else {
+        const created = await usersApi.create(payload);
+        addToast(`Benutzer "${created.name}" wurde angelegt.`, 'success');
+      }
+      setIsModalOpen(false);
+      await load();
+    } catch (err) {
+      addToast(err instanceof Error ? err.message : 'Speichern fehlgeschlagen.', 'error');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const confirmDelete = async () => {
+    if (!userToDelete) return;
+    try {
+      await usersApi.remove(userToDelete.id);
+      addToast(`Benutzer "${userToDelete.name}" wurde geloescht.`, 'success');
+      await load();
+    } catch (err) {
+      addToast(err instanceof Error ? err.message : 'Loeschen fehlgeschlagen.', 'error');
+    } finally {
+      setUserToDelete(null);
+    }
+  };
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <div>
+          <h3 className="text-base text-ink-900">Benutzer ({users.length})</h3>
+          <p className="text-xs text-ink-400">
+            Rolle Admin sieht die Einstellungen, Rolle User nicht.
+          </p>
+        </div>
+        <button
+          onClick={openCreate}
+          className="flex shrink-0 items-center gap-2 rounded-xl bg-brand-500 px-4 py-2.5 text-sm font-bold text-white shadow-card transition hover:bg-brand-600"
+        >
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          Benutzer anlegen
+        </button>
+      </div>
+
+      {isLoading ? (
+        <div className="flex justify-center py-14">
+          <span className="h-6 w-6 animate-spin rounded-full border-2 border-brand-200 border-t-brand-500" />
+        </div>
+      ) : (
+        <ul className="space-y-2">
+          {users.map((user) => (
+            <li
+              key={user.id}
+              className="flex items-center gap-3 rounded-xl border border-ink-200 bg-surface px-4 py-3"
+            >
+              <UserAvatar
+                user={user}
+                size={40}
+                color={user.is_active ? undefined : '#c2c2c2'}
+                className={user.is_active ? undefined : 'grayscale'}
+              />
+
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="truncate text-sm font-bold text-ink-900">{user.name}</span>
+                  <span className="text-xs text-ink-400">@{user.username}</span>
+                  <RoleBadge role={user.role} />
+                  {user.id === currentUser?.id && (
+                    <span className="rounded-md border border-sky-200 bg-sky-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-sky-700">
+                      Ich
+                    </span>
+                  )}
+                  {!user.is_active && (
+                    <span className="rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-amber-700">
+                      Deaktiviert
+                    </span>
+                  )}
+                </div>
+                {user.email && <p className="truncate text-xs text-ink-400">{user.email}</p>}
+              </div>
+
+              <div className="flex shrink-0 items-center gap-2">
+                <button
+                  onClick={() => openEdit(user)}
+                  className="rounded-lg border border-ink-200 px-3 py-1.5 text-xs font-bold text-ink-600 transition hover:border-brand-300 hover:text-brand-700"
+                >
+                  Bearbeiten
+                </button>
+                {user.id !== currentUser?.id && (
+                  <button
+                    onClick={() => setUserToDelete(user)}
+                    className="rounded-lg p-2 text-ink-400 transition hover:bg-red-50 hover:text-red-600"
+                    aria-label={`${user.name} loeschen`}
+                  >
+                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                      />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {isModalOpen && (
+        <Modal
+          title={editingUser ? `${editingUser.name} bearbeiten` : 'Neuer Benutzer'}
+          subtitle={editingUser ? `@${editingUser.username}` : 'Zugang fuer das perinco CRM anlegen'}
+          onClose={() => setIsModalOpen(false)}
+          size="md"
+          footer={
+            <div className="flex gap-3">
+              <button
+                type="button"
+                onClick={() => setIsModalOpen(false)}
+                className="flex-1 rounded-xl border border-ink-200 py-3 text-sm font-bold text-ink-600 transition hover:bg-ink-100"
+              >
+                Abbrechen
+              </button>
+              <button
+                type="submit"
+                form="user-form"
+                disabled={isSaving}
+                className="flex-[2] rounded-xl bg-brand-500 py-3 text-sm font-bold text-white transition hover:bg-brand-600 disabled:opacity-60"
+              >
+                {isSaving ? 'Speichere...' : 'Speichern'}
+              </button>
+            </div>
+          }
+        >
+          <form id="user-form" onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className={labelClass}>Foto</label>
+              <AvatarPicker
+                value={form.avatar}
+                onChange={(value) => set('avatar', value)}
+                initials={form.name.charAt(0).toUpperCase() || '?'}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Benutzername *</label>
+              <input
+                required
+                value={form.username}
+                onChange={(event) => set('username', event.target.value)}
+                className={inputClass}
+                autoComplete="off"
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Anzeigename *</label>
+              <input
+                required
+                value={form.name}
+                onChange={(event) => set('name', event.target.value)}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>E-Mail</label>
+              <input
+                type="email"
+                value={form.email}
+                onChange={(event) => set('email', event.target.value)}
+                className={inputClass}
+                autoComplete="off"
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Rolle</label>
+              <select
+                value={form.role}
+                onChange={(event) => set('role', event.target.value as Role)}
+                className={inputClass}
+              >
+                <option value="user">User &ndash; ohne Einstellungen</option>
+                <option value="admin">Admin &ndash; mit Einstellungen</option>
+              </select>
+            </div>
+            <div>
+              <label className={labelClass}>
+                {editingUser ? 'Neues Passwort (optional)' : 'Passwort *'}
+              </label>
+              <input
+                type="password"
+                required={!editingUser}
+                value={form.password}
+                onChange={(event) => set('password', event.target.value)}
+                placeholder={editingUser ? 'Leer lassen, um es nicht zu aendern' : 'Mindestens 8 Zeichen'}
+                className={inputClass}
+                autoComplete="new-password"
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Kalenderfarbe</label>
+              <ColorPicker
+                value={form.color}
+                fallback={userColor(editingUser ? { id: editingUser.id, color: null } : { id: 0 })}
+                onChange={(color) => set('color', color)}
+              />
+            </div>
+            <label className="flex cursor-pointer items-center gap-3 rounded-xl border border-ink-200 px-4 py-3">
+              <input
+                type="checkbox"
+                checked={form.is_active}
+                onChange={(event) => set('is_active', event.target.checked)}
+                className="h-4 w-4 accent-brand-500"
+              />
+              <span className="text-sm font-semibold text-ink-700">Konto aktiv</span>
+            </label>
+          </form>
+        </Modal>
+      )}
+
+      {userToDelete && (
+        <ConfirmDialog
+          title="Benutzer loeschen?"
+          message={`"${userToDelete.name}" verliert den Zugang. Angelegte Kontakte bleiben erhalten, verlieren aber die Zuordnung.`}
+          onConfirm={confirmDelete}
+          onCancel={() => setUserToDelete(null)}
+        />
+      )}
+    </div>
+  );
+};