# Dokumentation perinco CRM

Technische Dokumentation mit Funktionszeichnungen. Die Diagramme sind Mermaid und
werden von Gitea direkt gerendert.

| Kapitel | Inhalt |
| --- | --- |
| [01 Architektur](01-architektur.md) | Topologie, Prozesse, Ports, Anfrageweg, Rollen |
| [02 Datenmodell](02-datenmodell.md) | Tabellen beider Datenbanken als ER-Diagramme |
| [03 Projekt Scanner](03-scanner.md) | Suchlauf von der Boerse bis zum Treffer, Parallelbetrieb |
| [04 Diktat](04-diktat.md) | Spracherkennung im Browser, Modell-Lebenszyklus |
| [05 Frontend](05-frontend.md) | Ansichten, Menue, Komponentenkarte, Zustand |
| [06 Betrieb](06-betrieb.md) | Deployment, Umgebungsvariablen, Dienste, Stoerungssuche |

Die Anwendungsdokumentation - Bedienung, Designentscheidungen, Messwerte zur
Spracherkennung - steht im [README des Projekts](../README.md).

## Das Ganze in einem Bild

```mermaid
flowchart TB
    subgraph Browser
        SPA["React-SPA<br/>Vite-Build"]
        WSP["Whisper im Web Worker<br/>WebGPU / WASM"]
    end

    subgraph Server["Server 212.227.135.41"]
        AP["Apache<br/>:443"]
        API["Express-Backend<br/>127.0.0.1:5006"]
        SCH["Scanner-Scheduler<br/>node-cron"]
        PW["Playwright<br/>Chromium"]
        DB1[("MariaDB<br/>perinco_CRM")]
        DB2[("MariaDB<br/>perinco_scanner")]
        ALT["alte Scanner-App<br/>:5005"]
        DB3[("MariaDB<br/>project_scanner")]
    end

    OAI["OpenAI<br/>gpt-4o-mini"]
    BOERSE["Projektboersen<br/>freelancermap, hays, ..."]

    SPA -->|"HTTPS /api"| AP
    AP --> API
    API --> DB1
    API --> DB2
    SCH --> PW
    PW --> BOERSE
    SCH --> OAI
    SCH --> DB2
    API -.-> SCH
    ALT --> DB3
    ALT --> BOERSE
    SPA -.->|"Audio bleibt im Browser"| WSP

    classDef alt fill:#f7f7f7,stroke:#9a9a9a,stroke-dasharray: 4 3
    class ALT,DB3 alt
```

Gestrichelt: die urspruengliche Scanner-App, die bis zur Ablosung parallel
weiterlaeuft. Sie hat ihre eigene Datenbank und wird vom CRM nicht angefasst.