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
+200
@@ -0,0 +1,200 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Sidebar } from './components/Sidebar';
|
||||
import { Header } from './components/Header';
|
||||
import { LoginScreen } from './components/LoginScreen';
|
||||
import { Leads } from './components/leads/Leads';
|
||||
import { Opportunities } from './components/opportunities/Opportunities';
|
||||
import { Calendar } from './components/calendar/Calendar';
|
||||
import { parseSqlDateTime } from './components/calendar/calendarUtils';
|
||||
import { Settings } from './components/settings/Settings';
|
||||
import { ScannerDashboard } from './components/scanner/ScannerDashboard';
|
||||
import { ScannerRejected } from './components/scanner/ScannerRejected';
|
||||
import { ScannerAgents } from './components/scanner/ScannerAgents';
|
||||
import { ScannerPortals } from './components/scanner/ScannerPortals';
|
||||
import { useToast } from './components/Toast';
|
||||
import { NavigationProvider } from './lib/navigation';
|
||||
import { useAuth } from './lib/auth';
|
||||
import { connectionsApi, eventsApi, leadsApi, opportunitiesApi, usersApi } from './lib/api';
|
||||
import {
|
||||
OPEN_STAGES,
|
||||
formatEuro,
|
||||
opportunityVolume,
|
||||
type AppUser,
|
||||
type CalendarEvent,
|
||||
type Lead,
|
||||
type LeadConnection,
|
||||
type Opportunity,
|
||||
type SettingsTab,
|
||||
type ViewState,
|
||||
} from './types';
|
||||
|
||||
const Splash: React.FC = () => (
|
||||
<div className="flex h-screen w-screen flex-col items-center justify-center gap-6 bg-surface">
|
||||
<img src="/logo.png" alt="perinco" className="logo-adaptive h-10 w-auto" />
|
||||
<span className="h-7 w-7 animate-spin rounded-full border-2 border-brand-200 border-t-brand-500" />
|
||||
<p className="text-xs font-bold uppercase tracking-[0.2em] text-ink-400">Lade perinco CRM...</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
/** Erster Reiter im Menue - hier startet die App. */
|
||||
const DEFAULT_VIEW: ViewState = 'Opportunities';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const { user, isLoading } = useAuth();
|
||||
const { addToast } = useToast();
|
||||
|
||||
const [currentView, setCurrentView] = useState<ViewState>(DEFAULT_VIEW);
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
|
||||
/**
|
||||
* Gewuenschter Reiter der Einstellungen. Der Diktat-Hinweis springt so direkt
|
||||
* nach Whisper, das keinen eigenen Menuepunkt mehr hat.
|
||||
*/
|
||||
const [settingsTab, setSettingsTab] = useState<SettingsTab | undefined>(undefined);
|
||||
|
||||
const [leads, setLeads] = useState<Lead[]>([]);
|
||||
const [connections, setConnections] = useState<LeadConnection[]>([]);
|
||||
const [users, setUsers] = useState<AppUser[]>([]);
|
||||
const [events, setEvents] = useState<CalendarEvent[]>([]);
|
||||
const [opportunities, setOpportunities] = useState<Opportunity[]>([]);
|
||||
const [isDataLoading, setIsDataLoading] = useState(false);
|
||||
|
||||
/**
|
||||
* Ansichtswechsel fuer Menue und tief liegende Komponenten. `tab` waehlt
|
||||
* gleich den passenden Reiter der Einstellungen; ohne Angabe entscheidet die
|
||||
* Einstellungsseite selbst (Rolle admin: Nutzerverwaltung, sonst Mein Konto).
|
||||
*/
|
||||
const goTo = useCallback((view: ViewState, options?: { tab?: SettingsTab }) => {
|
||||
setCurrentView(view);
|
||||
setSettingsTab(options?.tab);
|
||||
}, []);
|
||||
|
||||
const loadData = useCallback(
|
||||
async (silent = false) => {
|
||||
if (!user) return;
|
||||
if (!silent) setIsDataLoading(true);
|
||||
try {
|
||||
// Die Benutzerliste braucht jeder: Netzwerkdiagramm, Zustaendigkeit,
|
||||
// @-Mentions, Teilnehmer und Farben im Kalender. /users/directory ist
|
||||
// deshalb - anders als /users - fuer alle Rollen freigegeben.
|
||||
const [leadRows, connectionRows, eventRows, userRows, opportunityRows] = await Promise.all([
|
||||
leadsApi.list(),
|
||||
connectionsApi.list(),
|
||||
eventsApi.list(),
|
||||
usersApi.directory(),
|
||||
opportunitiesApi.list(),
|
||||
]);
|
||||
setLeads(leadRows);
|
||||
setConnections(connectionRows);
|
||||
setEvents(eventRows);
|
||||
setUsers(userRows);
|
||||
setOpportunities(opportunityRows);
|
||||
} catch (err) {
|
||||
addToast(err instanceof Error ? err.message : 'Daten konnten nicht geladen werden.', 'error');
|
||||
} finally {
|
||||
setIsDataLoading(false);
|
||||
}
|
||||
},
|
||||
[user, addToast]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) loadData();
|
||||
}, [user, loadData]);
|
||||
|
||||
if (isLoading) return <Splash />;
|
||||
if (!user) return <LoginScreen />;
|
||||
|
||||
const upcomingCount = events.filter(
|
||||
(event) => parseSqlDateTime(event.ends_at).getTime() >= Date.now()
|
||||
).length;
|
||||
|
||||
const openOpportunities = opportunities.filter((item) => OPEN_STAGES.includes(item.stage));
|
||||
const openVolume = openOpportunities.reduce(
|
||||
(sum, item) => sum + (opportunityVolume(item) ?? 0),
|
||||
0
|
||||
);
|
||||
|
||||
// Untertitel der Kopfzeile. Die Scanner-Reiter bringen ihre Kennzahlen selbst
|
||||
// mit, deshalb steht hier nur, worum es auf der Seite geht.
|
||||
const STATIC_SUBTITLES: Partial<Record<ViewState, string>> = {
|
||||
Scanner: 'Projekt Scanner - Suchagenten, Portale und Projektübereinstimmungen',
|
||||
Unpassend: 'Projekt Scanner - als „passt nicht" markierte Treffer',
|
||||
Suchagenten: 'Projekt Scanner - Beraterprofile mit CV und Suchbegriffen',
|
||||
'Börsen-Konten': 'Projekt Scanner - Verbindungen zu den Jobbörsen',
|
||||
Einstellungen: 'Konto, Diktat, Benutzer und Scanner',
|
||||
};
|
||||
|
||||
const subtitle =
|
||||
currentView === 'Opportunities'
|
||||
? `${opportunities.length} ${
|
||||
opportunities.length === 1 ? 'Opportunity' : 'Opportunities'
|
||||
} · ${openOpportunities.length} offen · ${formatEuro(openVolume)} Pipeline`
|
||||
: currentView === 'Kontakte'
|
||||
? `${leads.length} ${leads.length === 1 ? 'Kontakt' : 'Kontakte'} · ${connections.length} ${
|
||||
connections.length === 1 ? 'Verbindung' : 'Verbindungen'
|
||||
}`
|
||||
: currentView === 'Kalender'
|
||||
? `Gemeinsamer Teamkalender · ${events.length} ${
|
||||
events.length === 1 ? 'Termin' : 'Termine'
|
||||
} · ${upcomingCount} anstehend`
|
||||
: STATIC_SUBTITLES[currentView];
|
||||
|
||||
return (
|
||||
<NavigationProvider value={{ currentView, goTo }}>
|
||||
<div className="flex h-screen overflow-hidden bg-canvas text-ink-900">
|
||||
<Sidebar
|
||||
currentView={currentView}
|
||||
onViewChange={goTo}
|
||||
isOpen={isSidebarOpen}
|
||||
onToggle={() => setIsSidebarOpen((open) => !open)}
|
||||
/>
|
||||
|
||||
<main className="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||
<Header
|
||||
title={currentView}
|
||||
subtitle={subtitle}
|
||||
onToggleSidebar={() => setIsSidebarOpen((open) => !open)}
|
||||
/>
|
||||
|
||||
<div className="scrollbar-slim flex-1 overflow-y-auto p-4 md:p-6">
|
||||
{currentView === 'Opportunities' && (
|
||||
<Opportunities
|
||||
opportunities={opportunities}
|
||||
leads={leads}
|
||||
users={users}
|
||||
isLoading={isDataLoading}
|
||||
reload={() => loadData(true)}
|
||||
/>
|
||||
)}
|
||||
{currentView === 'Kalender' && (
|
||||
<Calendar
|
||||
events={events}
|
||||
leads={leads}
|
||||
users={users}
|
||||
connections={connections}
|
||||
isLoading={isDataLoading}
|
||||
reload={() => loadData(true)}
|
||||
/>
|
||||
)}
|
||||
{currentView === 'Kontakte' && (
|
||||
<Leads
|
||||
leads={leads}
|
||||
connections={connections}
|
||||
users={users}
|
||||
isLoading={isDataLoading}
|
||||
reload={() => loadData(true)}
|
||||
/>
|
||||
)}
|
||||
{currentView === 'Scanner' && <ScannerDashboard />}
|
||||
{currentView === 'Unpassend' && <ScannerRejected />}
|
||||
{currentView === 'Suchagenten' && <ScannerAgents />}
|
||||
{currentView === 'Börsen-Konten' && <ScannerPortals />}
|
||||
{currentView === 'Einstellungen' && <Settings initialTab={settingsTab} />}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</NavigationProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
Reference in New Issue
Block a user