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>
2026-08-06 15:08:59 +02:00
commit 82d1b7eab4
106 changed files with 24133 additions and 0 deletions
@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Avatar } from '../leads/leadUi';
+import { useToast } from '../Toast';
+import { compressImage, formatBytes } from '../../lib/imageCompress';
+
+interface AvatarPickerProps {
+  /** Data-URL oder externe URL; '' = kein Bild. */
+  value: string;
+  onChange: (value: string) => void;
+  /** Fallback, solange kein Bild gesetzt ist. */
+  initials: string;
+  size?: 'sm' | 'md' | 'lg';
+  removeLabel?: string;
+}
+
+/**
+ * Foto-Upload mit Vorschau - genutzt fuer Kontakte und Benutzer. Das Bild wird
+ * im Browser auf ein Quadrat verkleinert, bevor es hochgeladen wird; damit
+ * bleiben die Data-URLs in der Datenbank klein.
+ */
+export const AvatarPicker: React.FC<AvatarPickerProps> = ({
+  value,
+  onChange,
+  initials,
+  size = 'lg',
+  removeLabel = 'Foto entfernen',
+}) => {
+  const { addToast } = useToast();
+  const [isBusy, setIsBusy] = useState(false);
+
+  const handleUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    // Zuruecksetzen, damit dieselbe Datei nach einem Entfernen erneut gewaehlt
+    // werden kann.
+    event.target.value = '';
+    if (!file) return;
+
+    setIsBusy(true);
+    try {
+      const result = await compressImage(file);
+      onChange(result.dataUrl);
+      addToast(
+        `Foto uebernommen (${formatBytes(result.sourceBytes)} → ${formatBytes(result.resultBytes)}).`,
+        'success'
+      );
+    } catch (err) {
+      addToast(err instanceof Error ? err.message : 'Das Bild konnte nicht verarbeitet werden.', 'error');
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <div className="group relative">
+        <Avatar src={value || null} initials={initials} size={size} />
+        <label
+          className={`absolute inset-0 flex cursor-pointer items-center justify-center rounded-xl bg-ink-950/45 text-[10px] font-extrabold uppercase tracking-wider text-white transition ${
+            isBusy ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+          }`}
+        >
+          {isBusy ? (
+            <span className="h-5 w-5 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+          ) : (
+            'Aendern'
+          )}
+          <input
+            type="file"
+            accept="image/*"
+            disabled={isBusy}
+            className="hidden"
+            onChange={handleUpload}
+          />
+        </label>
+      </div>
+      {value && !isBusy && (
+        <button
+          type="button"
+          onClick={() => onChange('')}
+          className="text-[10px] font-bold uppercase tracking-wider text-ink-400 transition hover:text-red-600"
+        >
+          {removeLabel}
+        </button>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,243 @@
+import React from 'react';
+import { useRecorder } from '../../lib/dictation';
+import { useWhisper } from '../../lib/whisper';
+import { useNavigation } from '../../lib/navigation';
+import { useToast } from '../Toast';
+import { inputClass } from '../leads/leadUi';
+
+const MIC_ICON =
+  'M19 11a7 7 0 01-14 0m7 7v3m0-3a7 7 0 007-7m-7 7a7 7 0 01-7-7m7-9a3 3 0 013 3v6a3 3 0 01-6 0V5a3 3 0 013-3z';
+const STOP_ICON = 'M9 9h6v6H9z';
+
+function formatSeconds(total: number): string {
+  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, '0')}`;
+}
+
+interface DictateButtonProps {
+  /** Erhaelt den erkannten Text; der Aufrufer entscheidet, ob er anhaengt. */
+  onText: (text: string) => void;
+  /** Kurzer Hinweis, was diktiert wird - landet im Titel des Buttons. */
+  label: string;
+  compact?: boolean;
+  /**
+   * Wird vor dem Wechsel in die Whisper-Einstellungen aufgerufen - ein offener
+   * Dialog muss sich sonst nicht schliessen und liegt ueber der Ansicht.
+   */
+  onBeforeNavigate?: () => void;
+}
+
+export const DictateButton: React.FC<DictateButtonProps> = ({
+  onText,
+  label,
+  compact,
+  onBeforeNavigate,
+}) => {
+  const { status, isSupported } = useWhisper();
+  const { goTo } = useNavigation();
+  const { addToast } = useToast();
+  const { state, seconds, start, stop, cancel } = useRecorder(onText, (message) =>
+    addToast(message, 'error')
+  );
+
+  // Ohne Mikrofon oder ohne HTTPS hat ein Diktat-Button keinen Sinn.
+  if (!isSupported) return null;
+
+  // Modell noch nicht geladen: statt eines toten Buttons der Weg dorthin.
+  if (status !== 'ready') {
+    return (
+      <button
+        type="button"
+        onClick={() => {
+          onBeforeNavigate?.();
+          goTo('Einstellungen', { tab: 'whisper' });
+        }}
+        title="Das Spracherkennungsmodell ist noch nicht geladen - hier einrichten"
+        className="flex items-center gap-1.5 rounded-lg border border-dashed border-ink-300 px-2 py-1 text-[11px] font-bold text-ink-400 transition hover:border-brand-400 hover:text-brand-700"
+      >
+        <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={MIC_ICON} />
+        </svg>
+        Diktat einrichten
+      </button>
+    );
+  }
+
+  const isRecording = state === 'recording';
+  const isBusy = state === 'transcribing';
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <button
+        type="button"
+        onClick={isRecording ? stop : start}
+        disabled={isBusy}
+        title={
+          isRecording
+            ? 'Aufnahme beenden und erkennen'
+            : isBusy
+              ? 'Erkennung laeuft...'
+              : `${label} diktieren`
+        }
+        aria-label={isRecording ? 'Aufnahme beenden' : `${label} diktieren`}
+        className={`flex items-center gap-1.5 rounded-lg border px-2 py-1 text-[11px] font-bold transition disabled:opacity-60 ${
+          isRecording
+            ? 'border-red-300 bg-red-50 text-red-700'
+            : 'border-ink-200 text-ink-500 hover:border-brand-300 hover:text-brand-700'
+        }`}
+      >
+        {isBusy ? (
+          <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-brand-200 border-t-brand-500" />
+        ) : (
+          <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d={isRecording ? STOP_ICON : MIC_ICON}
+            />
+          </svg>
+        )}
+        {isRecording ? (
+          <span className="tabular-nums">{formatSeconds(seconds)}</span>
+        ) : isBusy ? (
+          'Erkenne...'
+        ) : compact ? (
+          'Diktat'
+        ) : (
+          'Diktieren'
+        )}
+      </button>
+
+      {isRecording && (
+        <button
+          type="button"
+          onClick={cancel}
+          title="Aufnahme verwerfen"
+          aria-label="Aufnahme verwerfen"
+          className="rounded-lg p-1 text-ink-400 transition hover:bg-ink-100 hover:text-ink-700"
+        >
+          <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};
+
+interface DictationHintProps {
+  /** Wird vor dem Wechsel aufgerufen, z. B. um den Dialog zu schliessen. */
+  onBeforeNavigate?: () => void;
+}
+
+/**
+ * Hinweisbox fuer Formulare: erklaert, warum kein Mikrofon zu sehen ist, und
+ * fuehrt direkt zu den Whisper-Einstellungen. Zeigt sich nur, solange das
+ * Modell nicht bereit ist.
+ */
+export const DictationHint: React.FC<DictationHintProps> = ({ onBeforeNavigate }) => {
+  const { status, isSupported, isCached, progress, progressLabel, phase } = useWhisper();
+  const { goTo } = useNavigation();
+
+  if (!isSupported || status === 'ready') return null;
+
+  const isLoading = status === 'loading';
+
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-ink-200 bg-ink-50/60 px-4 py-3 sm:flex-row sm:items-center">
+      <svg
+        className="h-5 w-5 shrink-0 text-ink-400"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d={MIC_ICON} />
+      </svg>
+
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-bold text-ink-800">
+          {isLoading
+            ? 'Spracherkennung wird geladen...'
+            : status === 'error'
+              ? 'Die Spracherkennung konnte nicht geladen werden.'
+              : 'Diktieren ist moeglich, das Modell fehlt aber noch.'}
+        </p>
+        <p className="text-xs text-ink-500">
+          {isLoading
+            ? phase === 'init'
+              ? 'Download fertig, Modell wird initialisiert...'
+              : progressLabel || 'Bitte kurz warten.'
+            : isCached
+              ? 'Das Modell liegt bereits im Browser - es muss nur noch aktiviert werden.'
+              : 'Das Modell wird einmalig in diesen Browser geladen und laeuft danach lokal auf diesem Geraet.'}
+        </p>
+        {isLoading && (
+          <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-ink-200">
+            <div
+              className="h-full rounded-full bg-brand-500 transition-all"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        )}
+      </div>
+
+      {!isLoading && (
+        <button
+          type="button"
+          onClick={() => {
+            onBeforeNavigate?.();
+            goTo('Einstellungen', { tab: 'whisper' });
+          }}
+          className="shrink-0 rounded-xl bg-brand-500 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-600"
+        >
+          Zu Whisper
+        </button>
+      )}
+    </div>
+  );
+};
+
+interface DictateTextareaProps {
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+  label: string;
+  placeholder?: string;
+  rows?: number;
+  onBeforeNavigate?: () => void;
+}
+
+/** Textfeld mit Diktat-Button darueber; erkannter Text wird angehaengt. */
+export const DictateTextarea: React.FC<DictateTextareaProps> = ({
+  id,
+  value,
+  onChange,
+  label,
+  placeholder,
+  rows = 4,
+  onBeforeNavigate,
+}) => (
+  <div>
+    <div className="mb-1.5 flex items-center justify-between gap-3">
+      <label
+        htmlFor={id}
+        className="block text-[11px] font-extrabold uppercase tracking-wider text-ink-500"
+      >
+        {label}
+      </label>
+      <DictateButton
+        label={label}
+        onBeforeNavigate={onBeforeNavigate}
+        onText={(text) => onChange(value ? `${value.trimEnd()} ${text}` : text)}
+      />
+    </div>
+    <textarea
+      id={id}
+      rows={rows}
+      value={value}
+      placeholder={placeholder}
+      onChange={(event) => onChange(event.target.value)}
+      className={`${inputClass} resize-y`}
+    />
+  </div>
+);
@@ -0,0 +1,115 @@
+import React, { useEffect } from 'react';
+
+interface ModalProps {
+  title: string;
+  subtitle?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  size?: 'md' | 'lg' | 'xl';
+}
+
+const SIZES: Record<NonNullable<ModalProps['size']>, string> = {
+  md: 'max-w-md',
+  lg: 'max-w-2xl',
+  xl: 'max-w-4xl',
+};
+
+export const Modal: React.FC<ModalProps> = ({
+  title,
+  subtitle,
+  onClose,
+  children,
+  footer,
+  size = 'lg',
+}) => {
+  // Escape schliesst den Dialog - erwartetes Verhalten und schneller als
+  // zum Schliessen-Button zu greifen.
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose]);
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-ink-950/50 p-4 backdrop-blur-sm">
+      <div
+        className={`flex max-h-[92vh] w-full flex-col overflow-hidden rounded-2xl border border-ink-200 bg-surface shadow-lift ${SIZES[size]}`}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+      >
+        <div className="flex shrink-0 items-start justify-between gap-4 border-b border-ink-100 px-6 py-5">
+          <div className="min-w-0">
+            <h2 className="truncate text-xl text-ink-900">{title}</h2>
+            {subtitle && <p className="mt-0.5 truncate text-xs font-semibold text-ink-400">{subtitle}</p>}
+          </div>
+          <button
+            onClick={onClose}
+            className="shrink-0 rounded-lg p-2 text-ink-400 transition hover:bg-ink-100 hover:text-ink-800"
+            aria-label="Dialog schliessen"
+          >
+            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="scrollbar-slim flex-1 overflow-y-auto px-6 py-6">{children}</div>
+
+        {footer && (
+          <div className="shrink-0 border-t border-ink-100 bg-ink-50/60 px-6 py-4">{footer}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface ConfirmDialogProps {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  title,
+  message,
+  confirmLabel = 'Loeschen',
+  onConfirm,
+  onCancel,
+}) => (
+  <div className="fixed inset-0 z-[130] flex items-center justify-center bg-ink-950/50 p-4 backdrop-blur-sm">
+    <div className="w-full max-w-sm rounded-2xl border border-ink-200 bg-surface p-7 text-center shadow-lift">
+      <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-red-50 text-red-600">
+        <svg className="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      </div>
+      <h3 className="text-lg text-ink-900">{title}</h3>
+      <p className="mt-2 text-sm text-ink-500">{message}</p>
+      <div className="mt-7 grid grid-cols-2 gap-3">
+        <button
+          onClick={onCancel}
+          className="rounded-xl border border-ink-200 py-3 text-sm font-bold text-ink-600 transition hover:bg-ink-100"
+        >
+          Abbrechen
+        </button>
+        <button
+          onClick={onConfirm}
+          className="rounded-xl bg-red-600 py-3 text-sm font-bold text-white transition hover:bg-red-700"
+        >
+          {confirmLabel}
+        </button>
+      </div>
+    </div>
+  </div>
+);
@@ -0,0 +1,59 @@
+import React from 'react';
+import { userColor } from '../../types';
+
+/** Alles, was ein Benutzerbild braucht - passt auf AppUser und EventParticipant. */
+export interface AvatarUser {
+  id: number;
+  name: string;
+  color?: string | null;
+  avatar?: string | null;
+}
+
+interface UserAvatarProps {
+  user: AvatarUser;
+  /** Kantenlaenge in Pixel. */
+  size?: number;
+  shape?: 'circle' | 'rounded';
+  /** Ueberschreibt die Hintergrundfarbe, z. B. grau fuer deaktivierte Konten. */
+  color?: string;
+  title?: string;
+  className?: string;
+}
+
+/**
+ * Foto des Benutzers, sonst die Initiale auf seiner Kalenderfarbe. Damit sehen
+ * Benutzer ueberall gleich aus - Sidebar, Kalender, Nutzerverwaltung.
+ */
+export const UserAvatar: React.FC<UserAvatarProps> = ({
+  user,
+  size = 32,
+  shape = 'circle',
+  color,
+  title,
+  className = '',
+}) => {
+  const radius = shape === 'circle' ? 'rounded-full' : 'rounded-xl';
+  const dimensions = { width: size, height: size };
+
+  if (user.avatar) {
+    return (
+      <img
+        src={user.avatar}
+        alt=""
+        title={title ?? user.name}
+        style={dimensions}
+        className={`shrink-0 object-cover ${radius} ${className}`}
+      />
+    );
+  }
+
+  return (
+    <span
+      title={title ?? user.name}
+      style={{ ...dimensions, backgroundColor: color ?? userColor(user), fontSize: size * 0.4 }}
+      className={`flex shrink-0 items-center justify-center font-extrabold leading-none text-white ${radius} ${className}`}
+    >
+      {user.name.charAt(0).toUpperCase()}
+    </span>
+  );
+};