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,508 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Modal } from '../ui/Modal';
|
||||
import { AvatarPicker } from '../ui/AvatarPicker';
|
||||
import { Avatar, inputClass, labelClass } from './leadUi';
|
||||
import { connectionsApi, leadsApi } from '../../lib/api';
|
||||
import { useToast } from '../Toast';
|
||||
import {
|
||||
CONNECTION_TYPES,
|
||||
LEAD_STATUSES,
|
||||
leadFullName,
|
||||
leadInitials,
|
||||
type AppUser,
|
||||
type ConnectionType,
|
||||
type Lead,
|
||||
type LeadConnection,
|
||||
type LeadStatus,
|
||||
} from '../../types';
|
||||
|
||||
interface LeadModalProps {
|
||||
lead: Lead | null;
|
||||
leads: Lead[];
|
||||
users: AppUser[];
|
||||
connections: LeadConnection[];
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
interface FormState {
|
||||
salutation: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
company: string;
|
||||
position: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
mobile: string;
|
||||
linkedin: string;
|
||||
website: string;
|
||||
street: string;
|
||||
zip: string;
|
||||
city: string;
|
||||
country: string;
|
||||
status: LeadStatus;
|
||||
source: string;
|
||||
notes: string;
|
||||
avatar: string;
|
||||
owner_id: string;
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
function toFormState(lead: Lead | null, fallbackOwnerId: number | null): FormState {
|
||||
return {
|
||||
salutation: lead?.salutation ?? '',
|
||||
first_name: lead?.first_name ?? '',
|
||||
last_name: lead?.last_name ?? '',
|
||||
company: lead?.company ?? '',
|
||||
position: lead?.position ?? '',
|
||||
email: lead?.email ?? '',
|
||||
phone: lead?.phone ?? '',
|
||||
mobile: lead?.mobile ?? '',
|
||||
linkedin: lead?.linkedin ?? '',
|
||||
website: lead?.website ?? '',
|
||||
street: lead?.street ?? '',
|
||||
zip: lead?.zip ?? '',
|
||||
city: lead?.city ?? '',
|
||||
country: lead?.country ?? '',
|
||||
status: lead?.status ?? 'Neu',
|
||||
source: lead?.source ?? '',
|
||||
notes: lead?.notes ?? '',
|
||||
avatar: lead?.avatar ?? '',
|
||||
owner_id: String(lead?.owner_id ?? fallbackOwnerId ?? ''),
|
||||
tags: lead?.tags ?? [],
|
||||
};
|
||||
}
|
||||
|
||||
export const LeadModal: React.FC<LeadModalProps> = ({
|
||||
lead,
|
||||
leads,
|
||||
users,
|
||||
connections,
|
||||
onClose,
|
||||
onSaved,
|
||||
}) => {
|
||||
const { addToast } = useToast();
|
||||
const [form, setForm] = useState<FormState>(() => toFormState(lead, users[0]?.id ?? null));
|
||||
const [tagInput, setTagInput] = useState('');
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Verbindungen dieses Kontakts
|
||||
const [newConnectionId, setNewConnectionId] = useState('');
|
||||
const [newConnectionType, setNewConnectionType] = useState<ConnectionType>('Netzwerk');
|
||||
const [isLinking, setIsLinking] = useState(false);
|
||||
|
||||
const leadById = useMemo(() => new Map(leads.map((l) => [l.id, l])), [leads]);
|
||||
|
||||
const ownConnections = useMemo(() => {
|
||||
if (!lead) return [];
|
||||
return connections
|
||||
.filter((c) => c.from_lead_id === lead.id || c.to_lead_id === lead.id)
|
||||
.map((c) => {
|
||||
const otherId = c.from_lead_id === lead.id ? c.to_lead_id : c.from_lead_id;
|
||||
return { connection: c, other: leadById.get(otherId) ?? null };
|
||||
})
|
||||
.filter((entry) => entry.other !== null);
|
||||
}, [lead, connections, leadById]);
|
||||
|
||||
const linkableLeads = useMemo(() => {
|
||||
if (!lead) return [];
|
||||
const linked = new Set(ownConnections.map((entry) => entry.other!.id));
|
||||
return leads
|
||||
.filter((candidate) => candidate.id !== lead.id && !linked.has(candidate.id))
|
||||
.sort((a, b) => leadFullName(a).localeCompare(leadFullName(b), 'de'));
|
||||
}, [lead, leads, ownConnections]);
|
||||
|
||||
const set = <K extends keyof FormState>(key: K, value: FormState[K]) =>
|
||||
setForm((prev) => ({ ...prev, [key]: value }));
|
||||
|
||||
const addTags = () => {
|
||||
const parsed = tagInput
|
||||
.split(',')
|
||||
.map((t) => t.trim())
|
||||
.filter((t) => t && !form.tags.includes(t));
|
||||
if (parsed.length > 0) set('tags', [...form.tags, ...parsed]);
|
||||
setTagInput('');
|
||||
};
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (!form.first_name.trim() || !form.last_name.trim()) {
|
||||
addToast('Vorname und Nachname sind erforderlich.', 'error');
|
||||
return;
|
||||
}
|
||||
if (form.linkedin && !form.linkedin.includes('linkedin.com/')) {
|
||||
addToast('Bitte eine gueltige LinkedIn-URL angeben.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const payload = {
|
||||
...form,
|
||||
owner_id: form.owner_id === '' ? null : Number(form.owner_id),
|
||||
avatar: form.avatar || null,
|
||||
};
|
||||
if (lead) {
|
||||
await leadsApi.update(lead.id, payload);
|
||||
addToast('Kontakt aktualisiert.', 'success');
|
||||
} else {
|
||||
await leadsApi.create(payload);
|
||||
addToast('Kontakt angelegt.', 'success');
|
||||
}
|
||||
onSaved();
|
||||
onClose();
|
||||
} catch (err) {
|
||||
addToast(err instanceof Error ? err.message : 'Speichern fehlgeschlagen.', 'error');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddConnection = async () => {
|
||||
if (!lead || !newConnectionId) return;
|
||||
setIsLinking(true);
|
||||
try {
|
||||
await connectionsApi.create({
|
||||
from_lead_id: lead.id,
|
||||
to_lead_id: Number(newConnectionId),
|
||||
type: newConnectionType,
|
||||
});
|
||||
addToast('Verbindung angelegt.', 'success');
|
||||
setNewConnectionId('');
|
||||
onSaved();
|
||||
} catch (err) {
|
||||
addToast(err instanceof Error ? err.message : 'Verbindung fehlgeschlagen.', 'error');
|
||||
} finally {
|
||||
setIsLinking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveConnection = async (id: number) => {
|
||||
try {
|
||||
await connectionsApi.remove(id);
|
||||
addToast('Verbindung entfernt.', 'success');
|
||||
onSaved();
|
||||
} catch (err) {
|
||||
addToast(err instanceof Error ? err.message : 'Entfernen fehlgeschlagen.', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={lead ? leadFullName(lead) : 'Neuer Kontakt'}
|
||||
subtitle={
|
||||
lead
|
||||
? `Angelegt von ${lead.created_by_name ?? 'unbekannt'}${
|
||||
lead.created_at ? ` am ${new Date(lead.created_at).toLocaleDateString('de-DE')}` : ''
|
||||
}`
|
||||
: 'Pflege einen neuen Lead-Kontakt ein'
|
||||
}
|
||||
onClose={onClose}
|
||||
size="xl"
|
||||
footer={
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
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="lead-form"
|
||||
disabled={isSaving}
|
||||
className="flex-[2] rounded-xl bg-brand-500 py-3 text-sm font-bold text-white shadow-card transition hover:bg-brand-600 disabled:opacity-60"
|
||||
>
|
||||
{isSaving ? 'Speichere...' : 'Speichern'}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<form id="lead-form" onSubmit={handleSubmit} className="space-y-8">
|
||||
{/* Foto + Kerndaten */}
|
||||
<div className="flex flex-col gap-6 sm:flex-row sm:items-start">
|
||||
<AvatarPicker
|
||||
value={form.avatar}
|
||||
onChange={(value) => set('avatar', value)}
|
||||
initials={leadInitials({ first_name: form.first_name, last_name: form.last_name })}
|
||||
/>
|
||||
|
||||
<div className="grid flex-1 grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className={labelClass}>Anrede</label>
|
||||
<select value={form.salutation} onChange={(e) => set('salutation', e.target.value)} className={inputClass}>
|
||||
<option value="">—</option>
|
||||
<option value="Frau">Frau</option>
|
||||
<option value="Herr">Herr</option>
|
||||
<option value="Divers">Divers</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Status</label>
|
||||
<select
|
||||
value={form.status}
|
||||
onChange={(e) => set('status', e.target.value as LeadStatus)}
|
||||
className={inputClass}
|
||||
>
|
||||
{LEAD_STATUSES.map((status) => (
|
||||
<option key={status} value={status}>
|
||||
{status}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Vorname *</label>
|
||||
<input required value={form.first_name} onChange={(e) => set('first_name', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Nachname *</label>
|
||||
<input required value={form.last_name} onChange={(e) => set('last_name', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Unternehmen</label>
|
||||
<input value={form.company} onChange={(e) => set('company', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Position</label>
|
||||
<input value={form.position} onChange={(e) => set('position', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kontaktdaten */}
|
||||
<section>
|
||||
<h3 className="mb-4 text-[11px] font-extrabold uppercase tracking-[0.18em] text-ink-400">
|
||||
Kontaktdaten
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className={labelClass}>E-Mail</label>
|
||||
<input type="email" value={form.email} onChange={(e) => set('email', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Telefon</label>
|
||||
<input value={form.phone} onChange={(e) => set('phone', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Mobil</label>
|
||||
<input value={form.mobile} onChange={(e) => set('mobile', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>LinkedIn</label>
|
||||
<input
|
||||
type="url"
|
||||
placeholder="https://linkedin.com/in/..."
|
||||
value={form.linkedin}
|
||||
onChange={(e) => set('linkedin', e.target.value)}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className={labelClass}>Website</label>
|
||||
<input type="url" value={form.website} onChange={(e) => set('website', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Adresse */}
|
||||
<section>
|
||||
<h3 className="mb-4 text-[11px] font-extrabold uppercase tracking-[0.18em] text-ink-400">Adresse</h3>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
|
||||
<div className="sm:col-span-6">
|
||||
<label className={labelClass}>Strasse und Hausnummer</label>
|
||||
<input value={form.street} onChange={(e) => set('street', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
<div className="sm:col-span-1">
|
||||
<label className={labelClass}>PLZ</label>
|
||||
<input value={form.zip} onChange={(e) => set('zip', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
<div className="sm:col-span-3">
|
||||
<label className={labelClass}>Ort</label>
|
||||
<input value={form.city} onChange={(e) => set('city', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className={labelClass}>Land</label>
|
||||
<input value={form.country} onChange={(e) => set('country', e.target.value)} className={inputClass} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Einordnung */}
|
||||
<section>
|
||||
<h3 className="mb-4 text-[11px] font-extrabold uppercase tracking-[0.18em] text-ink-400">
|
||||
Einordnung
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className={labelClass}>Quelle</label>
|
||||
<input
|
||||
placeholder="z. B. Messe, Empfehlung, LinkedIn"
|
||||
value={form.source}
|
||||
onChange={(e) => set('source', e.target.value)}
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>Zustaendig</label>
|
||||
<select value={form.owner_id} onChange={(e) => set('owner_id', e.target.value)} className={inputClass}>
|
||||
<option value="">Niemand</option>
|
||||
{users.map((user) => (
|
||||
<option key={user.id} value={user.id}>
|
||||
{user.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label className={labelClass}>Tags</label>
|
||||
{form.tags.length > 0 && (
|
||||
<div className="mb-3 flex flex-wrap gap-2">
|
||||
{form.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="flex items-center gap-2 rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-bold text-white"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => set('tags', form.tags.filter((t) => t !== tag))}
|
||||
className="transition hover:text-white/70"
|
||||
aria-label={`Tag ${tag} entfernen`}
|
||||
>
|
||||
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
addTags();
|
||||
}
|
||||
}}
|
||||
placeholder="Mit Komma trennen, z. B. S/4HANA, M365"
|
||||
className={inputClass}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addTags}
|
||||
className="shrink-0 rounded-xl border border-ink-200 px-4 text-sm font-bold text-ink-600 transition hover:border-brand-300 hover:text-brand-700"
|
||||
>
|
||||
Hinzufuegen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label className={labelClass}>Notizen</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={form.notes}
|
||||
onChange={(e) => set('notes', e.target.value)}
|
||||
placeholder="Gespraechsnotizen, naechste Schritte, Hintergrund..."
|
||||
className={`${inputClass} resize-none`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Verbindungen */}
|
||||
<section>
|
||||
<h3 className="mb-1 text-[11px] font-extrabold uppercase tracking-[0.18em] text-ink-400">
|
||||
Verbindungen
|
||||
</h3>
|
||||
<p className="mb-4 text-xs text-ink-400">
|
||||
Wer steht mit diesem Kontakt in Verbindung? Diese Kanten erscheinen in der Netzwerkansicht.
|
||||
</p>
|
||||
|
||||
{!lead ? (
|
||||
<div className="rounded-xl border border-dashed border-ink-200 px-4 py-6 text-center text-xs font-semibold text-ink-400">
|
||||
Verbindungen koennen gepflegt werden, sobald der Kontakt gespeichert ist.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{ownConnections.length === 0 ? (
|
||||
<div className="rounded-xl border border-dashed border-ink-200 px-4 py-6 text-center text-xs font-semibold text-ink-400">
|
||||
Noch keine Verbindungen hinterlegt.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{ownConnections.map(({ connection, other }) => (
|
||||
<li
|
||||
key={connection.id}
|
||||
className="flex items-center gap-3 rounded-xl border border-ink-200 bg-ink-50/50 px-3 py-2.5"
|
||||
>
|
||||
<Avatar src={other!.avatar} initials={leadInitials(other!)} size="sm" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-bold text-ink-900">{leadFullName(other!)}</p>
|
||||
<p className="truncate text-xs text-ink-400">
|
||||
{connection.type}
|
||||
{other!.company ? ` · ${other!.company}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveConnection(connection.id)}
|
||||
className="shrink-0 rounded-lg p-2 text-ink-400 transition hover:bg-red-50 hover:text-red-600"
|
||||
aria-label="Verbindung entfernen"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2 rounded-xl border border-ink-200 p-3 sm:flex-row">
|
||||
<select
|
||||
value={newConnectionId}
|
||||
onChange={(e) => setNewConnectionId(e.target.value)}
|
||||
className={`${inputClass} sm:flex-[2]`}
|
||||
>
|
||||
<option value="">Kontakt auswaehlen...</option>
|
||||
{linkableLeads.map((candidate) => (
|
||||
<option key={candidate.id} value={candidate.id}>
|
||||
{leadFullName(candidate)}
|
||||
{candidate.company ? ` (${candidate.company})` : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={newConnectionType}
|
||||
onChange={(e) => setNewConnectionType(e.target.value as ConnectionType)}
|
||||
className={`${inputClass} sm:flex-1`}
|
||||
>
|
||||
{CONNECTION_TYPES.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAddConnection}
|
||||
disabled={!newConnectionId || isLinking}
|
||||
className="shrink-0 rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-bold text-white transition hover:bg-brand-600 disabled:opacity-50"
|
||||
>
|
||||
Verbinden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user