mirror of
http://172.20.10.11:3000/gitadmin/INSIGHT-MVP.git
synced 2026-06-25 06:26:40 +02:00
f62d032480
Initiale Dokumentation des CRM-Frontend-Status fuer die Abstimmung zwischen Frontend- und Backend-Entwickler. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
104 lines
4.7 KiB
Markdown
104 lines
4.7 KiB
Markdown
# INSIGHT CRM - Kommunikation Frontend <-> Backend
|
|
|
|
Dieses Dokument dient als Kommunikationskanal zwischen dem Frontend- und dem CRM-Backend-Entwickler.
|
|
|
|
---
|
|
|
|
## 2026-03-10 | Frontend: Erster Stand der CRM-Integration
|
|
|
|
### Was wurde umgesetzt
|
|
|
|
Das komplette CRM-Frontend-Modul ist implementiert und auf dem Server deployed (`feature/crm-service` Branch, Commit `c739dce`).
|
|
|
|
#### Neue Dateien (16 Dateien, ~4.800 Zeilen)
|
|
|
|
```
|
|
packages/frontend/src/crm/
|
|
types.ts -- Zentrale Interfaces (alle Entitaeten + API-Wrapper)
|
|
api.ts -- API-Funktionen (Axios, baseURL /api/v1/crm/*)
|
|
hooks.ts -- React Query Hooks + Query Key Factory
|
|
contacts/
|
|
ContactsPage.tsx + .module.css -- Liste mit Suche, Typ-Filter, Paginierung
|
|
ContactFormModal.tsx -- Create/Edit Modal (Person/Organisation)
|
|
ContactDetailPage.tsx + .module.css -- 2-Spalten: Info+Deals links, Aktivitaeten rechts
|
|
deals/
|
|
DealsPage.tsx + .module.css -- Liste mit Pipeline/Stage/Status-Filter
|
|
DealFormModal.tsx -- Create/Edit mit Kontakt-Suche + Pipeline/Stage-Selektor
|
|
DealDetailPage.tsx + .module.css -- Detail mit Stage-Fortschrittsbalken
|
|
pipelines/
|
|
PipelinesPage.tsx + .module.css -- Verwaltung mit klappbaren Cards + Stage-Management
|
|
activities/
|
|
ActivityFormModal.tsx -- Formular fuer Notiz/Anruf/E-Mail/Meeting/Aufgabe
|
|
```
|
|
|
|
#### Geaenderte Dateien (3)
|
|
|
|
| Datei | Aenderung |
|
|
|-------|-----------|
|
|
| `src/shell/App.tsx` | 5 CRM-Routen (`/crm/contacts`, `/crm/contacts/:id`, `/crm/deals`, `/crm/deals/:id`, `/crm/pipelines`) |
|
|
| `src/shell/AppLayout.tsx` | CRM-Sektion in Sidebar (aufklappbar, 3 NavLinks mit SVG-Icons) |
|
|
| `vite.config.ts` | Proxy `/api/v1/crm` -> `localhost:3100` fuer lokale Entwicklung |
|
|
|
|
### Welche API-Endpoints werden genutzt
|
|
|
|
| Modul | Endpoints | Methoden |
|
|
|-------|-----------|----------|
|
|
| Contacts | `/crm/contacts`, `/crm/contacts/:id` | GET (list+detail), POST, PATCH, DELETE |
|
|
| Deals | `/crm/deals`, `/crm/deals/:id` | GET (list+detail), POST, PATCH, DELETE |
|
|
| Pipelines | `/crm/pipelines`, `/crm/pipelines/:id`, `/crm/pipelines/:id/stages`, `/crm/pipelines/:id/stages/:stageId` | GET (list+detail), POST, PATCH, DELETE |
|
|
| Activities | `/crm/activities`, `/crm/activities/:id` | GET (list), POST, PATCH, DELETE |
|
|
|
|
### Erwartete Response-Formate
|
|
|
|
**Liste (paginiert):**
|
|
```json
|
|
{
|
|
"success": true,
|
|
"data": [...],
|
|
"pagination": { "page": 1, "pageSize": 25, "total": 42, "totalPages": 2 },
|
|
"meta": { "timestamp": "..." }
|
|
}
|
|
```
|
|
|
|
**Einzelobjekt:**
|
|
```json
|
|
{
|
|
"success": true,
|
|
"data": { ... },
|
|
"meta": { "timestamp": "..." }
|
|
}
|
|
```
|
|
|
|
**Fehler:**
|
|
```json
|
|
{
|
|
"success": false,
|
|
"error": { "code": "NOT_FOUND", "message": "...", "details": [] },
|
|
"meta": { "timestamp": "..." }
|
|
}
|
|
```
|
|
|
|
### Annahmen / Abhaengigkeiten ans Backend
|
|
|
|
1. **Contact-Detail liefert Activities mit** -- `GET /crm/contacts/:id` gibt die letzten 10 Aktivitaeten im Feld `activities` zurueck. Das Frontend zeigt diese in der Timeline an.
|
|
|
|
2. **Deal-Detail liefert Relations mit** -- `GET /crm/deals/:id` gibt `pipeline`, `stage` und `contact` als verschachtelte Objekte zurueck.
|
|
|
|
3. **Pipeline-List liefert Stages mit** -- `GET /crm/pipelines` gibt jede Pipeline inkl. `stages[]` Array zurueck. Das Frontend nutzt diese fuer die Stage-Selektoren im Deal-Formular.
|
|
|
|
4. **Deal.value ist ein String** -- Decimal kommt als String vom Backend (z.B. `"24000.00"`). Das Frontend parst mit `parseFloat()`.
|
|
|
|
5. **Sortierung** -- Contacts: `createdAt`, `firstName`, `lastName`, `companyName`, `email`. Deals: `createdAt`, `title`, `value`, `expectedCloseDate`.
|
|
|
|
6. **Suche** -- Contacts: Substring-Match in `firstName`, `lastName`, `companyName`, `email`. Deals: Substring-Match in `title`.
|
|
|
|
### Bekannte Offene Punkte
|
|
|
|
- [ ] **Traefik HTTPS-Router fuer CRM**: Aktuell hat der CRM-Service nur einen HTTP-Router (`web` Entrypoint). Fuer HTTPS (`websecure`) muesste ein zweiter Router mit `tls=true` angelegt werden (wie bei `core-api-secure`).
|
|
- [ ] **Activity-Liste komplett laden**: Die Contact-Detail-Seite zeigt nur die letzten 10 Aktivitaeten (aus dem Contact-Objekt). Fuer eine "Alle anzeigen"-Funktion wuerde ein separater `GET /crm/activities?contactId=...` Aufruf benoetigt (Hook existiert bereits).
|
|
- [ ] **Kanban-Board fuer Deals**: Aktuell nur Tabellenansicht. Ein Drag-and-Drop Kanban-Board waere ein sinnvolles Feature fuer spaeter.
|
|
- [ ] **Pipeline-Stages bearbeiten**: Derzeit kann man Stages nur hinzufuegen und loeschen, nicht den Namen/Farbe/Reihenfolge aendern (kein PATCH-Endpoint fuer Stages vorhanden).
|
|
|
|
---
|
|
|
|
*Bitte neue Eintraege unten anfuegen. Format: `## YYYY-MM-DD | Absender: Betreff`*
|