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>
This commit is contained in:
Sascha Wolf
@@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
import { USER_COLORS } from '../../types';
|
||||
|
||||
interface ColorPickerProps {
|
||||
/** null = automatisch aus der Palette ableiten */
|
||||
value: string | null;
|
||||
onChange: (color: string | null) => void;
|
||||
/** Farbe, die bei value === null tatsaechlich verwendet wird. */
|
||||
fallback: string;
|
||||
}
|
||||
|
||||
/** Auswahl der persoenlichen Kalenderfarbe. */
|
||||
export const ColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, fallback }) => (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{USER_COLORS.map((color) => {
|
||||
const isSelected = value?.toLowerCase() === color;
|
||||
return (
|
||||
<button
|
||||
key={color}
|
||||
type="button"
|
||||
onClick={() => onChange(color)}
|
||||
aria-label={`Farbe ${color}`}
|
||||
aria-pressed={isSelected}
|
||||
className={`h-8 w-8 rounded-lg transition ${
|
||||
isSelected ? 'ring-2 ring-ink-900 ring-offset-2' : 'hover:scale-105'
|
||||
}`}
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
<label
|
||||
title="Eigene Farbe waehlen"
|
||||
className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border border-dashed border-ink-300 text-ink-400 transition hover:border-brand-400 hover:text-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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
type="color"
|
||||
value={value ?? fallback}
|
||||
onChange={(event) => onChange(event.target.value.toLowerCase())}
|
||||
className="sr-only"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className="flex h-9 flex-1 items-center rounded-xl px-3 text-xs font-extrabold uppercase tracking-wider text-white"
|
||||
style={{ backgroundColor: value ?? fallback }}
|
||||
>
|
||||
{value ?? `${fallback} (automatisch)`}
|
||||
</span>
|
||||
{value !== null && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(null)}
|
||||
className="shrink-0 rounded-xl border border-ink-200 px-3 py-2 text-xs font-bold text-ink-500 transition hover:border-brand-300 hover:text-brand-700"
|
||||
>
|
||||
Automatisch
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,328 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { inputClass, labelClass } from '../leads/leadUi';
|
||||
import { useToast } from '../Toast';
|
||||
import {
|
||||
SCANNER_SETTINGS_DEFAULTS,
|
||||
SECRET_MASK,
|
||||
scannerApi,
|
||||
type ScannerSettings as ScannerSettingsValues,
|
||||
} from '../../lib/scannerApi';
|
||||
|
||||
/*
|
||||
* Alle Einstellungen des Projekt Scanners an einer Stelle. Anzeige- und
|
||||
* Benachrichtigungs-Schwellenwert lassen sich zusaetzlich direkt im
|
||||
* Scanner-Dashboard verstellen - es ist derselbe Wert.
|
||||
*/
|
||||
|
||||
const Section: React.FC<{
|
||||
title: string;
|
||||
description?: string;
|
||||
children: React.ReactNode;
|
||||
accent?: string;
|
||||
}> = ({ title, description, children, accent }) => (
|
||||
<section
|
||||
className={`rounded-2xl border border-ink-200 bg-surface p-5 ${
|
||||
accent ? `border-l-4 ${accent}` : ''
|
||||
}`}
|
||||
>
|
||||
<h3 className="text-base text-ink-900">{title}</h3>
|
||||
{description && <p className="mt-1 text-xs text-ink-400">{description}</p>}
|
||||
<div className="mt-4">{children}</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
const Checkbox: React.FC<{
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
label: string;
|
||||
}> = ({ checked, onChange, label }) => (
|
||||
<label className="flex cursor-pointer items-center gap-3 rounded-xl border border-ink-200 px-4 py-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={(event) => onChange(event.target.checked)}
|
||||
className="h-4 w-4 accent-brand-500"
|
||||
/>
|
||||
<span className="text-sm font-semibold text-ink-700">{label}</span>
|
||||
</label>
|
||||
);
|
||||
|
||||
export const ScannerSettings: React.FC = () => {
|
||||
const { addToast } = useToast();
|
||||
const [values, setValues] = useState<ScannerSettingsValues>(SCANNER_SETTINGS_DEFAULTS);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const load = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await scannerApi.settings();
|
||||
setValues({ ...SCANNER_SETTINGS_DEFAULTS, ...data });
|
||||
} catch (err) {
|
||||
addToast(
|
||||
err instanceof Error ? err.message : 'Scanner-Einstellungen nicht erreichbar.',
|
||||
'error'
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
// Einmal beim Oeffnen laden - addToast ist stabil, load braucht keine Deps.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const set = <K extends keyof ScannerSettingsValues>(key: K, value: string) =>
|
||||
setValues((prev) => ({ ...prev, [key]: value }));
|
||||
|
||||
const setFlag = (key: keyof ScannerSettingsValues, checked: boolean) =>
|
||||
set(key, checked ? 'true' : 'false');
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await scannerApi.saveSettings(values);
|
||||
addToast('Scanner-Einstellungen gespeichert.', 'success');
|
||||
// Neu laden, damit Geheimnisse wieder maskiert erscheinen.
|
||||
await load();
|
||||
} catch (err) {
|
||||
addToast(err instanceof Error ? err.message : 'Speichern fehlgeschlagen.', 'error');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
const isScanningActive = values.scanning_active === 'true';
|
||||
const emailActive = values.email_notifications_active === 'true';
|
||||
const keyStored = values.openai_api_key === SECRET_MASK;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<Section
|
||||
title="Scanner-Status"
|
||||
description="Hauptschalter für den Hintergrund-Scanner. Pausiert durchsucht die App keine Jobbörsen mehr, auch der manuelle Scan ist dann blockiert."
|
||||
accent={isScanningActive ? 'border-l-brand-500' : 'border-l-ink-300'}
|
||||
>
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider ${
|
||||
isScanningActive
|
||||
? 'border-brand-200 bg-brand-50 text-brand-700'
|
||||
: 'border-ink-200 bg-ink-100 text-ink-500'
|
||||
}`}
|
||||
>
|
||||
{isScanningActive ? '● Aktiv' : '○ Pausiert'}
|
||||
</span>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={isScanningActive}
|
||||
onChange={(checked) => setFlag('scanning_active', checked)}
|
||||
label="Scanner aktiviert"
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section title="Suche">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div>
|
||||
<label className={labelClass}>Suchintervall (Minuten)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={5}
|
||||
max={1440}
|
||||
required
|
||||
value={values.search_interval}
|
||||
onChange={(event) => set('search_interval', event.target.value)}
|
||||
className={inputClass}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-ink-400">
|
||||
Wie oft der Hintergrund-Scanner die Jobbörsen durchsucht.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Anzeige ab %</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={100}
|
||||
value={values.display_threshold}
|
||||
onChange={(event) => set('display_threshold', event.target.value)}
|
||||
className={inputClass}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-ink-400">
|
||||
Treffer darunter bleiben im Dashboard ausgeblendet.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Benachrichtigung ab %</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={100}
|
||||
value={values.match_threshold}
|
||||
onChange={(event) => set('match_threshold', event.target.value)}
|
||||
className={inputClass}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-ink-400">
|
||||
Ab diesem Wert gibt es Signalton und E-Mail.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title="OpenAI"
|
||||
description="Wird für die semantische Bewertung des Lebenslaufs gegen die Projektbeschreibung gebraucht (gpt-4o-mini)."
|
||||
>
|
||||
<label className={labelClass}>
|
||||
API-Key
|
||||
{keyStored && (
|
||||
<span className="ml-2 rounded-md border border-brand-200 bg-brand-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-brand-700">
|
||||
gespeichert
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={keyStored ? '' : values.openai_api_key}
|
||||
onChange={(event) => set('openai_api_key', event.target.value)}
|
||||
placeholder={
|
||||
keyStored
|
||||
? 'Leer lassen, um den gespeicherten Key zu behalten'
|
||||
: 'sk-proj-...'
|
||||
}
|
||||
className={inputClass}
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
title="Browser-Benachrichtigungen"
|
||||
description={`Bei einem neuen Treffer über ${values.match_threshold}% spielt das Scanner-Dashboard einen Signalton. Voraussetzung: Der Reiter ist im Browser geöffnet. Browser lassen Töne erst nach dem ersten Klick auf der Seite zu.`}
|
||||
>
|
||||
<Checkbox
|
||||
checked={values.sound_notifications_active === 'true'}
|
||||
onChange={(checked) => setFlag('sound_notifications_active', checked)}
|
||||
label="Signalton bei neuen Matches"
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section title="E-Mail-Benachrichtigungen">
|
||||
<Checkbox
|
||||
checked={emailActive}
|
||||
onChange={(checked) => setFlag('email_notifications_active', checked)}
|
||||
label="E-Mail bei neuen Matches versenden"
|
||||
/>
|
||||
|
||||
{emailActive && (
|
||||
<div className="mt-4 space-y-4 border-l-2 border-brand-200 pl-5">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label className={labelClass}>Empfänger (Standard)</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={values.notification_email_recipient}
|
||||
onChange={(event) => set('notification_email_recipient', event.target.value)}
|
||||
placeholder="info@perinco.de"
|
||||
className={inputClass}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-ink-400">
|
||||
Wird verwendet, wenn beim Agenten keine eigene E-Mail hinterlegt ist.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Absender (From)</label>
|
||||
<input
|
||||
value={values.smtp_from}
|
||||
onChange={(event) => set('smtp_from', event.target.value)}
|
||||
placeholder="scanner@perinco.de"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-[2fr_1fr]">
|
||||
<div>
|
||||
<label className={labelClass}>SMTP-Host</label>
|
||||
<input
|
||||
required
|
||||
value={values.smtp_host}
|
||||
onChange={(event) => set('smtp_host', event.target.value)}
|
||||
placeholder="smtp.deine-domain.de"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>SMTP-Port</label>
|
||||
<input
|
||||
type="number"
|
||||
required
|
||||
value={values.smtp_port}
|
||||
onChange={(event) => set('smtp_port', event.target.value)}
|
||||
placeholder="587"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label className={labelClass}>SMTP-Benutzer</label>
|
||||
<input
|
||||
required
|
||||
value={values.smtp_user}
|
||||
onChange={(event) => set('smtp_user', event.target.value)}
|
||||
className={inputClass}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>
|
||||
SMTP-Passwort
|
||||
{values.smtp_pass === SECRET_MASK && (
|
||||
<span className="ml-2 rounded-md border border-brand-200 bg-brand-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-brand-700">
|
||||
gespeichert
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={values.smtp_pass === SECRET_MASK ? '' : values.smtp_pass}
|
||||
onChange={(event) => set('smtp_pass', event.target.value)}
|
||||
placeholder={
|
||||
values.smtp_pass === SECRET_MASK
|
||||
? 'Leer lassen, um das gespeicherte Passwort zu behalten'
|
||||
: 'Passwort'
|
||||
}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
className="rounded-xl bg-brand-500 px-6 py-2.5 text-sm font-bold text-white shadow-card transition hover:bg-brand-600 disabled:opacity-60"
|
||||
>
|
||||
{isSaving ? 'Speichere...' : 'Einstellungen speichern'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,222 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { UserManagement } from './UserManagement';
|
||||
import { ScannerSettings } from './ScannerSettings';
|
||||
import { ColorPicker } from './ColorPicker';
|
||||
import { AvatarPicker } from '../ui/AvatarPicker';
|
||||
import { WhisperSettings } from '../whisper/WhisperSettings';
|
||||
import { inputClass, labelClass } from '../leads/leadUi';
|
||||
import { useToast } from '../Toast';
|
||||
import { useAuth } from '../../lib/auth';
|
||||
import { authApi } from '../../lib/api';
|
||||
import { ADMIN_SETTINGS_TABS, userColor, type SettingsTab } from '../../types';
|
||||
|
||||
const TABS: { id: SettingsTab; label: string }[] = [
|
||||
{ id: 'users', label: 'Nutzerverwaltung' },
|
||||
{ id: 'account', label: 'Mein Konto' },
|
||||
{ id: 'scanner', label: 'Scanner' },
|
||||
{ id: 'whisper', label: 'Whisper' },
|
||||
];
|
||||
|
||||
const AccountTab: React.FC = () => {
|
||||
const { addToast } = useToast();
|
||||
const { user, updateUser } = useAuth();
|
||||
const [currentPassword, setCurrentPassword] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isSavingProfile, setIsSavingProfile] = useState(false);
|
||||
|
||||
// Farbe und Foto werden sofort gespeichert - ein eigener Speichern-Button
|
||||
// waere fuer zwei Felder unnoetiger Klick.
|
||||
const saveProfile = async (
|
||||
input: { color?: string | null; avatar?: string | null },
|
||||
successMessage: string
|
||||
) => {
|
||||
setIsSavingProfile(true);
|
||||
try {
|
||||
const { user: updated } = await authApi.updateMe(input);
|
||||
updateUser(updated);
|
||||
addToast(successMessage, 'success');
|
||||
} catch (err) {
|
||||
addToast(err instanceof Error ? err.message : 'Speichern fehlgeschlagen.', 'error');
|
||||
} finally {
|
||||
setIsSavingProfile(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (newPassword !== confirmPassword) {
|
||||
addToast('Die neuen Passwoerter stimmen nicht ueberein.', 'error');
|
||||
return;
|
||||
}
|
||||
if (newPassword.length < 8) {
|
||||
addToast('Das neue Passwort muss mindestens 8 Zeichen haben.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await authApi.changePassword(currentPassword, newPassword);
|
||||
addToast('Passwort geaendert.', 'success');
|
||||
setCurrentPassword('');
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
} catch (err) {
|
||||
addToast(err instanceof Error ? err.message : 'Aenderung fehlgeschlagen.', 'error');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<section className="rounded-2xl border border-ink-200 bg-surface p-5">
|
||||
<h3 className="text-base text-ink-900">Angemeldet als</h3>
|
||||
|
||||
<div className={`mt-4 ${isSavingProfile ? 'pointer-events-none opacity-60' : ''}`}>
|
||||
<AvatarPicker
|
||||
value={user?.avatar ?? ''}
|
||||
onChange={(value) =>
|
||||
saveProfile(
|
||||
{ avatar: value || null },
|
||||
value ? 'Foto gespeichert.' : 'Foto entfernt.'
|
||||
)
|
||||
}
|
||||
initials={user?.name?.charAt(0).toUpperCase() ?? '?'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<dl className="mt-5 space-y-2 text-sm">
|
||||
<div className="flex justify-between gap-3">
|
||||
<dt className="text-ink-400">Name</dt>
|
||||
<dd className="font-semibold text-ink-800">{user?.name}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-3">
|
||||
<dt className="text-ink-400">Benutzername</dt>
|
||||
<dd className="font-semibold text-ink-800">@{user?.username}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-3">
|
||||
<dt className="text-ink-400">E-Mail</dt>
|
||||
<dd className="truncate font-semibold text-ink-800">{user?.email || '—'}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-3">
|
||||
<dt className="text-ink-400">Rolle</dt>
|
||||
<dd className="font-semibold text-ink-800">
|
||||
{user?.role === 'admin' ? 'Administrator' : 'Benutzer'}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="mt-6 border-t border-ink-100 pt-5">
|
||||
<h4 className="text-sm font-extrabold text-ink-900">Meine Kalenderfarbe</h4>
|
||||
<p className="mb-3 text-xs text-ink-400">
|
||||
Mit dieser Farbe erscheinen die von dir angelegten Termine im Teamkalender.
|
||||
</p>
|
||||
<div className={isSavingProfile ? 'pointer-events-none opacity-60' : undefined}>
|
||||
<ColorPicker
|
||||
value={user?.color ?? null}
|
||||
fallback={userColor(user ? { id: user.id, color: null } : null)}
|
||||
onChange={(color) => saveProfile({ color }, 'Kalenderfarbe gespeichert.')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-2xl border border-ink-200 bg-surface p-5">
|
||||
<h3 className="text-base text-ink-900">Passwort aendern</h3>
|
||||
<form onSubmit={handleSubmit} className="mt-4 space-y-4">
|
||||
<div>
|
||||
<label className={labelClass}>Aktuelles Passwort</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
value={currentPassword}
|
||||
onChange={(event) => setCurrentPassword(event.target.value)}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Neues Passwort</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
value={newPassword}
|
||||
onChange={(event) => setNewPassword(event.target.value)}
|
||||
placeholder="Mindestens 8 Zeichen"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Neues Passwort bestaetigen</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
value={confirmPassword}
|
||||
onChange={(event) => setConfirmPassword(event.target.value)}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
className="w-full rounded-xl bg-brand-500 py-2.5 text-sm font-bold text-white transition hover:bg-brand-600 disabled:opacity-60"
|
||||
>
|
||||
{isSaving ? 'Speichere...' : 'Passwort aendern'}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Settings: React.FC<{ initialTab?: SettingsTab }> = ({ initialTab }) => {
|
||||
const { isAdmin } = useAuth();
|
||||
|
||||
// Nutzerverwaltung und Scanner nur fuer Admins; Konto und Whisper fuer alle.
|
||||
const tabs = TABS.filter((item) => isAdmin || !ADMIN_SETTINGS_TABS.includes(item.id));
|
||||
const defaultTab: SettingsTab = isAdmin ? 'users' : 'account';
|
||||
|
||||
const [tab, setTab] = useState<SettingsTab>(() =>
|
||||
initialTab && tabs.some((item) => item.id === initialTab) ? initialTab : defaultTab
|
||||
);
|
||||
|
||||
// Sprung aus dem Diktat-Hinweis: der Reiter kommt von aussen.
|
||||
useEffect(() => {
|
||||
if (initialTab && tabs.some((item) => item.id === initialTab)) setTab(initialTab);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [initialTab]);
|
||||
|
||||
// Wird die Rolle waehrend der Sitzung herabgesetzt, darf kein Adminreiter
|
||||
// offen bleiben.
|
||||
useEffect(() => {
|
||||
if (!tabs.some((item) => item.id === tab)) setTab(defaultTab);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isAdmin]);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-wrap gap-1 rounded-xl border border-ink-200 bg-surface p-1">
|
||||
{tabs.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setTab(item.id)}
|
||||
className={`rounded-lg px-4 py-2 text-sm font-bold transition ${
|
||||
tab === item.id ? 'bg-brand-500 text-white' : 'text-ink-500 hover:bg-brand-50 hover:text-brand-700'
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === 'users' && isAdmin && <UserManagement />}
|
||||
{tab === 'account' && <AccountTab />}
|
||||
{tab === 'scanner' && isAdmin && <ScannerSettings />}
|
||||
{tab === 'whisper' && <WhisperSettings />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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 – ohne Einstellungen</option>
|
||||
<option value="admin">Admin – 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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user