feat(akquise): gefundene Projekte als Eingang vor den Opportunities

Neuer Menuepunkt ueber den Opportunities, mit dem Unterpunkt "Archiv". Die
Liste traegt genau die Spalten, die beim Durchgehen zaehlen: Datum, Von,
Anbieter, Kanal, Projekttitel, Berater, ein Knopf fuer die Uebernahme und die
Symbole fuer Bearbeiten und Loeschen.

Eingabe steht ueber der Liste und ist bewusst kein Dialog - Projekte kommen in
Serie herein. Nach dem Eintragen bleiben Datum, Anbieter, Kanal und Berater
stehen, damit drei Projekte aus einer Mail nicht dreimal dieselben Angaben
kosten. Von, Anbieter und Berater schlagen frueher benutzte Werte vor. Was in
der Liste keine Spalte hat, aber in der Opportunity vorkommt (Endkunde,
Beschreibung, Tagessatz, Laufzeit, Projektpreis, Zeitraum, naechster Schritt,
Notizen), klappt darunter auf.

Eingang, Archiv und Loeschung ergeben sich aus dem Funddatum - 14 bzw. 90 Tage -
und aus converted_at. Es gibt keine Zustandsspalte, die ein Job pflegen muesste
und die von der Wirklichkeit abweichen kann. Der Loeschlauf raeumt beim Abruf
der Liste, hoechstens einmal pro Stunde; die Abfragen filtern Faelliges ohnehin
heraus.

Die Uebernahme legt Opportunity und Merker in einer Transaktion an. Anbieter,
Von, Kanal, Berater und Link haben in der Opportunity kein Feld und wandern als
Herkunftsvermerk in die Notizen.

Der Titel wird nur dann zum Link, wenn eine http(s)-Adresse hinterlegt ist:
"hays.de/projekt/1" ergaenzt das Backend zu https://, und die Anzeige laesst
nichts anderes durch als http und https.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sascha Wolf
2026-08-18 11:56:58 +02:00
co-authored by Claude Opus 5
parent 8741a9ae0c
commit b8a78f609c
16 changed files with 1833 additions and 7 deletions
+2 -2
View File
@@ -90,8 +90,8 @@ sofort draußen, ohne auf den Ablauf des Tokens zu warten.
```mermaid ```mermaid
flowchart TD flowchart TD
L["Anmeldung"] --> R{"Rolle"} L["Anmeldung"] --> R{"Rolle"}
R -->|admin| A["Opportunities, Interviews, Kontakte, Mails, Scanner<br/>Einstellungen: Nutzerverwaltung, Mein Konto, Postfach, Scanner, Whisper"] R -->|admin| A["Akquise, Opportunities, Interviews, Kontakte, Mails, Scanner<br/>Einstellungen: Nutzerverwaltung, Mein Konto, Postfach, Scanner, Whisper"]
R -->|user| U["Opportunities, Interviews, Kontakte, Mails, Scanner<br/>Einstellungen: Mein Konto, Whisper"] R -->|user| U["Akquise, Opportunities, Interviews, Kontakte, Mails, Scanner<br/>Einstellungen: Mein Konto, Whisper"]
``` ```
Bei den Mails darf jede Rolle lesen und zuordnen - `crm@perinco.de` ist ein Bei den Mails darf jede Rolle lesen und zuordnen - `crm@perinco.de` ist ein
+21 -1
View File
@@ -23,6 +23,8 @@ erDiagram
crm_leads ||--o{ crm_lead_connections : from_lead_id crm_leads ||--o{ crm_lead_connections : from_lead_id
crm_leads ||--o{ crm_opportunity_contacts : ist crm_leads ||--o{ crm_opportunity_contacts : ist
crm_opportunities ||--o{ crm_opportunity_contacts : hat crm_opportunities ||--o{ crm_opportunity_contacts : hat
crm_users ||--o{ crm_acquisitions : created_by
crm_acquisitions |o--o| crm_opportunities : "wird zu"
crm_users { crm_users {
int id PK int id PK
@@ -74,6 +76,18 @@ erDiagram
int lead_id PK,FK int lead_id PK,FK
varchar role "z.B. Entscheider" varchar role "z.B. Entscheider"
} }
crm_acquisitions {
int id PK
date found_at "entscheidet Eingang, Archiv, Loeschung"
varchar sender "Von"
varchar provider "Anbieter"
varchar channel "Mail | Telefon | Portal | ..."
varchar title "Projekttitel"
varchar consultant "Berater"
varchar link "macht den Titel klickbar"
datetime converted_at "uebernommen -> raus aus der Liste"
int opportunity_id FK
}
crm_events { crm_events {
int id PK int id PK
varchar title varchar title
@@ -89,7 +103,7 @@ erDiagram
} }
``` ```
Vier Eigenheiten, die man kennen muss: Fünf Eigenheiten, die man kennen muss:
- **`crm_leads` führt zwei Bestände.** `mail_pool = 0` ist der gepflegte - **`crm_leads` führt zwei Bestände.** `mail_pool = 0` ist der gepflegte
Kontaktbestand, `mail_pool = 1` der Vorbereich „Aus Mails" mit den Funden des Kontaktbestand, `mail_pool = 1` der Vorbereich „Aus Mails" mit den Funden des
@@ -106,6 +120,12 @@ Vier Eigenheiten, die man kennen muss:
- **`avatar` ist eine Data-URL in der Datenbank.** Der Browser verkleinert jedes - **`avatar` ist eine Data-URL in der Datenbank.** Der Browser verkleinert jedes
Bild vor dem Upload auf 256 px (`src/lib/imageCompress.ts`), aus 2,9 MB werden Bild vor dem Upload auf 256 px (`src/lib/imageCompress.ts`), aus 2,9 MB werden
wenige Kilobyte. wenige Kilobyte.
- **`crm_acquisitions` hat keine Zustandsspalte.** Eingang, Archiv und Löschung
ergeben sich aus `found_at` (14 bzw. 90 Tage) und `converted_at`. Eine Spalte,
die ein Job umsetzen müsste, kann von der Wirklichkeit abweichen - eine
gerechnete Grenze nicht. `converted_at` ist dabei die Wahrheit, nicht
`opportunity_id`: wird die Opportunity gelöscht, fällt der Verweis auf NULL,
der Eintrag soll aber nicht wieder im Eingang auftauchen.
### Postfach crm@perinco.de ### Postfach crm@perinco.de
+4
View File
@@ -9,6 +9,9 @@ sitzt und keine tiefen Links braucht.
```mermaid ```mermaid
flowchart TD flowchart TD
SB["Seitenleiste"] --> K["Kategorien"] SB["Seitenleiste"] --> K["Kategorien"]
K --> AQ["Akquise"]
AQ --> AQ1["Eingang<br/>Funde der letzten 14 Tage"]
AQ --> AQ2["Archiv<br/>älter; nach 90 Tagen gelöscht"]
K --> O["Opportunities<br/>(Startansicht)"] K --> O["Opportunities<br/>(Startansicht)"]
K --> C["Interviews"] K --> C["Interviews"]
K --> L["Kontakte"] K --> L["Kontakte"]
@@ -61,6 +64,7 @@ flowchart TB
APP --> NAV APP --> NAV
APP --> DATA APP --> DATA
DATA --> V1["Opportunities"] DATA --> V1["Opportunities"]
NOTE["Akquise lädt selbst<br/>acquisitionsApi, nicht über loadData()"]
DATA --> V2["Interviews"] DATA --> V2["Interviews"]
DATA --> V3["Kontakte<br/>mail_pool = false"] DATA --> V3["Kontakte<br/>mail_pool = false"]
DATA --> V5["Aus Mails<br/>mail_pool = true + Kontakte zum Abgleich"] DATA --> V5["Aus Mails<br/>mail_pool = true + Kontakte zum Abgleich"]
+78 -1
View File
@@ -9,6 +9,7 @@ Ein CRM für die Projektvermittlung. Es beantwortet vier Fragen:
| Frage | Bereich | | Frage | Bereich |
| --- | --- | | --- | --- |
| Welche Projekte haben wir gefunden? | **Akquise** |
| Welche Geschäfte sind in Arbeit und was sind sie wert? | **Opportunities** | | Welche Geschäfte sind in Arbeit und was sind sie wert? | **Opportunities** |
| Wer ist wann wo, und wer ist beteiligt? | **Interviews** | | Wer ist wann wo, und wer ist beteiligt? | **Interviews** |
| Wen kennen wir, und wer kennt wen? | **Kontakte** | | Wen kennen wir, und wer kennt wen? | **Kontakte** |
@@ -31,6 +32,9 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
``` ```
┌──────────────┬───────────────────────────────────────────┐ ┌──────────────┬───────────────────────────────────────────┐
│ Kategorien │ Titel der Ansicht [Hell/Dunkel] │ │ Kategorien │ Titel der Ansicht [Hell/Dunkel] │
│ Akquise ▾ │ │
│ Eingang │ │
│ Archiv │ │
│ Opportunities├──────────────────────────────────────────┤ │ Opportunities├──────────────────────────────────────────┤
│ Interviews │ │ │ Interviews │ │
│ Kontakte ▾ │ Inhalt │ │ Kontakte ▾ │ Inhalt │
@@ -69,9 +73,82 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
> Alle Abbildungen in dieser Anleitung zeigen die Anwendung mit **erfundenen > Alle Abbildungen in dieser Anleitung zeigen die Anwendung mit **erfundenen
> Beispieldaten**. Firmen, Personen und Zahlen darin gibt es nicht. > Beispieldaten**. Firmen, Personen und Zahlen darin gibt es nicht.
## Akquise
Der Eingang für gefundene Projekte - alles, was per Mail, Telefon oder über ein
Portal hereinkommt, bevor daraus ein Geschäft wird. Zwei Unterpunkte: **Eingang**
mit den Funden der letzten 14 Tage und **Archiv** mit allem Älteren.
### Eintragen
Über der Liste steht das Formular. Absichtlich kein Fenster, das nach jedem
Eintrag zugeht: kommen drei Projekte in einer Mail, tippt man sie hintereinander
weg.
| Feld | wofür |
| --- | --- |
| **Datum** | wann gefunden. Vorbelegt mit heute; entscheidet später über Archiv und Löschung |
| **Von** | wer es geschickt hat |
| **Anbieter** | Vermittler oder Portal, z. B. Hays |
| **Kanal** | Mail, Telefon, Portal, LinkedIn, XING, Empfehlung, Sonstiges |
| **Projekttitel** | das einzige Pflichtfeld |
| **Berater** | für wen das Projekt passt |
| **Link** | Adresse der Ausschreibung. Ist einer hinterlegt, wird der Titel in der Liste anklickbar und öffnet ihn in einem neuen Tab |
*Von*, *Anbieter* und *Berater* schlagen vor, was schon einmal eingetragen wurde -
antippen statt tippen. Beim Link genügt `hays.de/projekt/1`, das `https://` wird
ergänzt.
Unter **Projektdaten für die Opportunity** klappt auf, was in der Liste keine
Spalte hat, später aber in der Opportunity stehen soll: Endkunde, Projektstart
und -ende, Tagessatz, Laufzeit, Projektpreis, Projektbeschreibung, nächster
Schritt und interne Notizen. Alles freiwillig und jederzeit nachtragbar; das
Volumen wird schon hier mitgerechnet.
Nach *Eintragen* bleiben **Datum, Anbieter, Kanal und Berater stehen**, der Rest
wird geleert - für das nächste Projekt aus derselben Quelle.
### Die Liste
| Spalte | Bedeutung |
| --- | --- |
| **Datum** | Funddatum; der Mauszeiger verrät das Alter in Tagen |
| **Von**, **Anbieter**, **Kanal** | woher es kam |
| **Projekttitel** | mit Link anklickbar (neuer Tab); darunter klein Endkunde, Tagessatz bzw. Festpreis und Personentage |
| **Berater** | für wen |
| **Opportunity** | ein Klick macht daraus eine Opportunity in der Phase *Neu* |
| Stift / Papierkorb | bearbeiten (füllt das Formular oben) und löschen |
Die Spaltenköpfe sortieren, die Suche geht über Titel, Anbieter, Berater,
Endkunde, Beschreibung und Notizen.
### Was von selbst passiert
* Nach **14 Tagen** rutscht ein Eintrag ins **Archiv**. Dort lässt er sich weiter
bearbeiten und jederzeit übernehmen.
* Nach **90 Tagen** wird er **gelöscht**. Wer ein Projekt behalten will,
übernimmt es als Opportunity.
* Wird ein Eintrag **übernommen**, verschwindet er aus Eingang und Archiv - er
lebt als Opportunity weiter.
Verschoben wird dabei nichts: Eingang und Archiv sind dieselbe Liste, nur nach
dem Funddatum geteilt. Es gibt also keinen Zustand, der klemmen kann.
### Aus dem Eintrag wird eine Opportunity
Der Knopf **Opportunity** legt sie sofort an: Phase *Neu*, 10 % Wahrscheinlichkeit,
zuständig ist der angemeldete Benutzer. Mit übernommen werden Titel, Endkunde,
Beschreibung, Tagessatz, Laufzeit, Projektpreis, Zeitraum und nächster Schritt.
Anbieter, Von, Kanal, Berater und Link haben in der Opportunity kein Feld - sie
landen als Herkunftsvermerk in den internen Notizen, damit nachvollziehbar
bleibt, woher das Projekt kam.
Ansprechpartner hängt man danach in der Opportunity dran; dort geht das auch für
Kontakte, die es noch nicht gibt.
## Opportunities ## Opportunities
Der Startbereich: eine Opportunity ist ein Geschäft in Arbeit. Oben rechts Eine Opportunity ist ein Geschäft in Arbeit. Oben rechts
wechselt man die Darstellung: wechselt man die Darstellung:
| Ansicht | wofür | | Ansicht | wofür |
+6 -2
View File
@@ -83,6 +83,7 @@ Alle unter `router.use(requireAuth)`.
| `connections.js` | `GET /`, `POST /`, `PATCH /:id`, `DELETE /:id` | jeder Angemeldete | | `connections.js` | `GET /`, `POST /`, `PATCH /:id`, `DELETE /:id` | jeder Angemeldete |
| `events.js` | `GET /`, `POST /`, `PATCH /:id`, `DELETE /:id` | anlegen jeder; ändern/löschen nur Ersteller oder Admin | | `events.js` | `GET /`, `POST /`, `PATCH /:id`, `DELETE /:id` | anlegen jeder; ändern/löschen nur Ersteller oder Admin |
| `opportunities.js` | `GET /`, `POST /`, `PATCH /:id`, `DELETE /:id` | ändern/löschen nur Ersteller, Zuständiger oder Admin | | `opportunities.js` | `GET /`, `POST /`, `PATCH /:id`, `DELETE /:id` | ändern/löschen nur Ersteller, Zuständiger oder Admin |
| `acquisitions.js` | `GET /?view=eingang\|archiv\|alle`, `POST /`, `PATCH /:id`, `DELETE /:id`, `POST /:id/opportunity` | ändern/löschen nur Ersteller oder Admin |
| `mail.js` | `GET /status`, `/messages`, `/messages/:id`, `/candidates`; `POST /messages/:id/links`, `/messages/:id/restore`, `/candidates/:id/adopt`, `/candidates/:id/reject`, `/trash/empty`; `DELETE /links/:id`, `/messages/:id`; `requireAdmin`: `GET/POST /settings`, `POST /test`, `POST /sync` | lesen, zuordnen und löschen jeder; einrichten Admin | | `mail.js` | `GET /status`, `/messages`, `/messages/:id`, `/candidates`; `POST /messages/:id/links`, `/messages/:id/restore`, `/candidates/:id/adopt`, `/candidates/:id/reject`, `/trash/empty`; `DELETE /links/:id`, `/messages/:id`; `requireAdmin`: `GET/POST /settings`, `POST /test`, `POST /sync` | lesen, zuordnen und löschen jeder; einrichten Admin |
Wiederkehrende Muster in diesen Routern: Wiederkehrende Muster in diesen Routern:
@@ -255,6 +256,9 @@ Warum genau diese Konstanten festgelegt sind, steht in
| Datei | Inhalt | | Datei | Inhalt |
| --- | --- | | --- | --- |
| `components/acquisition/Acquisitions.tsx` | Akquise und Archiv (`view`); Suche, Sortierung, Übernahme, Löschen |
| `components/acquisition/AcquisitionForm.tsx` | Eingabe über der Liste; behält Datum, Anbieter, Kanal und Berater für den nächsten Eintrag |
| `components/acquisition/AcquisitionTable.tsx` | die Liste; `safeLink()` lässt nur http(s) zum Link werden |
| `components/leads/leadUi.tsx` | `inputClass`, `labelClass`, `KindBadge`, `Avatar`, Farben der Kontaktart | | `components/leads/leadUi.tsx` | `inputClass`, `labelClass`, `KindBadge`, `Avatar`, Farben der Kontaktart |
| `components/leads/mailPool.ts` | `findMailPoolMatch()`, `diffFields()`, `isConflict()`, `MAIL_POOL_FIELDS` - Dublettenabgleich des Vorbereichs | | `components/leads/mailPool.ts` | `findMailPoolMatch()`, `diffFields()`, `isConflict()`, `MAIL_POOL_FIELDS` - Dublettenabgleich des Vorbereichs |
| `components/leads/MailPoolLeads.tsx` | Ansicht „Aus Mails": Goldmarkierung, Abweichungen, Übernehmen, Sammelübernahme | | `components/leads/MailPoolLeads.tsx` | Ansicht „Aus Mails": Goldmarkierung, Abweichungen, Übernehmen, Sammelübernahme |
@@ -275,11 +279,11 @@ nicht auseinanderlaufen:
| Export | Zweck | | Export | Zweck |
| --- | --- | | --- | --- |
| `ViewState`, `SettingsTab`, `ADMIN_SETTINGS_TABS`, `SCANNER_VIEWS` | Ansichten und Reiter | | `ViewState`, `SettingsTab`, `ADMIN_SETTINGS_TABS`, `SCANNER_VIEWS`, `MAIL_VIEWS`, `ACQUISITION_VIEWS`, `CONTACT_VIEWS` | Ansichten, Reiter und aufklappbare Gruppen |
| `MAIL_LEAD_SOURCE`, `LeadOriginFilter` | Herkunft „Mail" in `Lead.source` und ihr Filter | | `MAIL_LEAD_SOURCE`, `LeadOriginFilter` | Herkunft „Mail" in `Lead.source` und ihr Filter |
| `USER_COLORS`, `userColor()` | Farbe gesetzt, sonst stabil aus der Benutzer-Id | | `USER_COLORS`, `userColor()` | Farbe gesetzt, sonst stabil aus der Benutzer-Id |
| `opportunityVolume()`, `weightedVolume()`, `formatEuro()` | Festpreis, sonst Tagessatz x Personentage; gewichtet; formatiert | | `opportunityVolume()`, `weightedVolume()`, `formatEuro()` | Festpreis, sonst Tagessatz x Personentage; gewichtet; formatiert |
| `OPPORTUNITY_STAGES`, `OPEN_STAGES`, `LEAD_KINDS`, `CONNECTION_TYPES` | die Aufzählungen der Datenbank | | `OPPORTUNITY_STAGES`, `OPEN_STAGES`, `LEAD_KINDS`, `ACQUISITION_CHANNELS`, `CONNECTION_TYPES` | die Aufzählungen der Datenbank |
| `eventColor()`, `leadFullName()`, `leadInitials()`, `contactFullName()` | Anzeigelogik | | `eventColor()`, `leadFullName()`, `leadInitials()`, `contactFullName()` | Anzeigelogik |
## Datenfluss im Frontend ## Datenfluss im Frontend
+1
View File
@@ -21,6 +21,7 @@ Quelltext.
| **Kontakt-Vorschlag** | Aus einer Mail gelesene Person, die noch kein Kontakt ist. Tabelle `crm_mail_contact_candidates`. Wird übernommen, ergänzt oder verworfen. | | **Kontakt-Vorschlag** | Aus einer Mail gelesene Person, die noch kein Kontakt ist. Tabelle `crm_mail_contact_candidates`. Wird übernommen, ergänzt oder verworfen. |
| **Match** / Treffer | Die Bewertung **eines** Projekts für **einen** Agenten: Prozentwert, Pro-Liste, Contra-Liste, Status. Tabelle `matches`. Ein Projekt erzeugt so viele Treffer, wie es aktive Agenten gibt. | | **Match** / Treffer | Die Bewertung **eines** Projekts für **einen** Agenten: Prozentwert, Pro-Liste, Contra-Liste, Status. Tabelle `matches`. Ein Projekt erzeugt so viele Treffer, wie es aktive Agenten gibt. |
| **Opportunity** | Geschäft in Arbeit: Phase, Tagessatz und Laufzeit oder Projektpreis, Wahrscheinlichkeit, Ansprechpartner. Tabelle `crm_opportunities`. | | **Opportunity** | Geschäft in Arbeit: Phase, Tagessatz und Laufzeit oder Projektpreis, Wahrscheinlichkeit, Ansprechpartner. Tabelle `crm_opportunities`. |
| **Akquise** | Eingang für gefundene Projekte, bevor daraus eine Opportunity wird. Tabelle `crm_acquisitions`. Nach 14 Tagen im **Archiv**, nach 90 Tagen gelöscht. |
| **Art** (eines Kontakts) | Recruiter, Partner oder Endkunde. Spalte `crm_leads.kind`; hieß bis 18.08.2026 „Status" mit den Werten Neu .. Verloren. | | **Art** (eines Kontakts) | Recruiter, Partner oder Endkunde. Spalte `crm_leads.kind`; hieß bis 18.08.2026 „Status" mit den Werten Neu .. Verloren. |
| **Papierkorb** | Im CRM gelöschte Mails. Umkehrbar, bis er geleert wird. Im Postfach crm@perinco.de bleiben die Mails in jedem Fall; der Abgleich holt gelöschte nicht wieder herein. | | **Papierkorb** | Im CRM gelöschte Mails. Umkehrbar, bis er geleert wird. Im Postfach crm@perinco.de bleiben die Mails in jedem Fall; der Abgleich holt gelöschte nicht wieder herein. |
| **Phase** / Stage | Fortschritt einer Opportunity: Neu, Qualifizierung, Angebot, Verhandlung, Gewonnen, Verloren. | | **Phase** / Stage | Fortschritt einer Opportunity: Neu, Qualifizierung, Angebot, Verhandlung, Gewonnen, Verloren. |
+508
View File
@@ -0,0 +1,508 @@
import express from 'express';
import { pool } from '../db.js';
import { requireAuth } from '../middleware/auth.js';
const router = express.Router();
router.use(requireAuth);
/*
* Akquise: gefundene Projekte, aus denen eine Opportunity werden kann.
*
* Drei Zustaende, alle aus `found_at` und `converted_at` abgeleitet - es gibt
* keine Spalte, die ein Job pflegen muesste:
*
* Eingang ("Akquise") found_at >= heute - 14 Tage, nicht uebernommen
* Archiv aelter als 14 Tage, nicht uebernommen
* weg aelter als 90 Tage (wird geloescht) oder uebernommen
*
* Uebernommene Eintraege bleiben in der Tabelle stehen: sie sind der Nachweis,
* woher eine Opportunity kommt. Nur der Eingang und das Archiv zeigen sie nicht.
*/
/** Grenze zwischen Eingang und Archiv, in Tagen. */
const ARCHIVE_AFTER_DAYS = 14;
/** Ab hier loescht das Archiv selbst. */
const DELETE_AFTER_DAYS = 90;
const CHANNELS = new Set([
'Mail',
'Telefon',
'Portal',
'LinkedIn',
'XING',
'Empfehlung',
'Sonstiges',
]);
// `link` fehlt hier absichtlich: der Wert wird eigens geprueft (normalizeLink).
const TEXT_FIELDS = [
'sender',
'provider',
'title',
'consultant',
'company',
'description',
'next_step',
'notes',
];
const DATE_FIELDS = ['found_at', 'start_date', 'end_date'];
const NUMBER_FIELDS = [
['daily_rate', 'Der Tagessatz', 1_000_000],
['duration_days', 'Die Laufzeit', 100_000],
['fixed_price', 'Der Projektpreis', 1_000_000_000],
];
/** Laengengrenzen der Spalten - abgewiesen statt stillschweigend abgeschnitten. */
const MAX_LENGTH = {
sender: 190,
provider: 190,
title: 190,
consultant: 190,
link: 1024,
company: 190,
next_step: 500,
};
function emptyToNull(value) {
if (value === null || value === undefined) return null;
const text = String(value).trim();
return text === '' ? null : text;
}
/** Akzeptiert `YYYY-MM-DD` (auch mit angehaengter Uhrzeit) oder null. */
function normalizeDate(value) {
if (value === null || value === undefined || String(value).trim() === '') return { value: null };
const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(value).trim());
if (!match) return { error: 'Ungültiges Datum (erwartet JJJJ-MM-TT).' };
const [, year, month, day] = match;
const probe = new Date(Number(year), Number(month) - 1, Number(day));
if (
probe.getFullYear() !== Number(year) ||
probe.getMonth() !== Number(month) - 1 ||
probe.getDate() !== Number(day)
) {
return { error: 'Dieses Datum gibt es nicht.' };
}
return { value: `${year}-${month}-${day}` };
}
function normalizeNumber(value, label, max) {
if (value === null || value === undefined || String(value).trim() === '') return { value: null };
const number = Number(String(value).replace(',', '.'));
if (!Number.isFinite(number) || number < 0) return { error: `${label} muss eine Zahl ab 0 sein.` };
if (number > max) return { error: `${label} ist unrealistisch hoch.` };
return { value: number };
}
/**
* Nur http und https. Ohne diese Pruefung liesse sich ein `javascript:`-Verweis
* hinterlegen, den der Titel in der Liste anklickbar macht.
*/
function normalizeLink(value) {
const text = emptyToNull(value);
if (text === null) return { value: null };
// Ohne Schema ist "hays.de/projekt/123" gemeint - das ergaenzen wir.
const candidate = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(text) ? text : `https://${text}`;
let url;
try {
url = new URL(candidate);
} catch {
return { error: 'Der Link ist keine gültige Adresse.' };
}
if (url.protocol !== 'http:' && url.protocol !== 'https:') {
return { error: 'Der Link muss mit http:// oder https:// beginnen.' };
}
if (candidate.length > MAX_LENGTH.link) return { error: 'Der Link ist zu lang (max. 1024 Zeichen).' };
return { value: candidate };
}
function parseTags(raw) {
if (!raw) return [];
try {
const parsed = JSON.parse(raw);
return Array.isArray(parsed) ? parsed.filter((tag) => typeof tag === 'string') : [];
} catch {
return [];
}
}
function serializeTags(value) {
if (!Array.isArray(value)) return null;
return JSON.stringify([...new Set(value.map((tag) => String(tag).trim()).filter(Boolean))]);
}
/** DECIMAL kommt als String aus mysql2 - im Frontend sollen es Zahlen sein. */
function mapAcquisition(row) {
return {
...row,
daily_rate: row.daily_rate === null ? null : Number(row.daily_rate),
duration_days: row.duration_days === null ? null : Number(row.duration_days),
fixed_price: row.fixed_price === null ? null : Number(row.fixed_price),
tags: parseTags(row.tags),
};
}
const SELECT_ACQUISITIONS = `
SELECT a.*,
creator.name AS created_by_name,
opp.title AS opportunity_title,
opp.stage AS opportunity_stage
FROM crm_acquisitions a
LEFT JOIN crm_users creator ON creator.id = a.created_by
LEFT JOIN crm_opportunities opp ON opp.id = a.opportunity_id
`;
async function fetchAcquisition(id) {
const [rows] = await pool.query(`${SELECT_ACQUISITIONS} WHERE a.id = ? LIMIT 1`, [id]);
return rows[0] ? mapAcquisition(rows[0]) : null;
}
/**
* Alles aelter als 90 Tage entfernen. Uebernommene Eintraege bleiben - sie
* gehoeren zur Opportunity, nicht zum Archiv.
*
* Das laeuft beim Abruf der Liste, hoechstens aber einmal pro Stunde je Prozess.
* Ein eigener Zeitplan waere eine weitere Stelle, die ausfallen kann; und die
* Abfragen filtern die Altlasten ohnehin heraus, der Loeschlauf raeumt nur
* hinterher.
*/
let lastPurgeAt = 0;
async function purgeOldEntries() {
if (Date.now() - lastPurgeAt < 3_600_000) return;
lastPurgeAt = Date.now();
const [result] = await pool.query(
`DELETE FROM crm_acquisitions
WHERE converted_at IS NULL
AND found_at < DATE_SUB(CURDATE(), INTERVAL ? DAY)`,
[DELETE_AFTER_DAYS]
);
if (result.affectedRows > 0) {
console.log(
`[Akquise] ${result.affectedRows} Eintrag/Eintraege aelter als ${DELETE_AFTER_DAYS} Tage geloescht.`
);
}
}
/** Aendern und loeschen darf der Ersteller und jeder Admin. */
function mayModify(user, row) {
return user.role === 'admin' || row.created_by === user.id;
}
/**
* Felder aus dem Anfragekoerper pruefen. `partial` laesst fehlende Felder weg
* (PATCH), sonst werden alle gesetzt (POST).
*/
function readFields(body, { partial }) {
const columns = {};
for (const field of TEXT_FIELDS) {
if (partial && body?.[field] === undefined) continue;
const value = emptyToNull(body?.[field]);
if (MAX_LENGTH[field] && value !== null && value.length > MAX_LENGTH[field]) {
return { error: `Der Wert für "${field}" ist zu lang (max. ${MAX_LENGTH[field]} Zeichen).` };
}
columns[field] = value;
}
if (!partial || body?.link !== undefined) {
const link = normalizeLink(body?.link);
if (link.error) return { error: link.error };
columns.link = link.value;
}
if (!partial || body?.channel !== undefined) {
const channel = emptyToNull(body?.channel);
if (channel !== null && !CHANNELS.has(channel)) {
return { error: 'Unbekannter Kanal.' };
}
columns.channel = channel;
}
for (const field of DATE_FIELDS) {
if (partial && body?.[field] === undefined) continue;
const result = normalizeDate(body?.[field]);
if (result.error) return { error: result.error };
columns[field] = result.value;
}
for (const [field, label, max] of NUMBER_FIELDS) {
if (partial && body?.[field] === undefined) continue;
const result = normalizeNumber(body?.[field], label, max);
if (result.error) return { error: result.error };
columns[field] = result.value;
}
if (!partial || body?.tags !== undefined) {
columns.tags = serializeTags(body?.tags) ?? '[]';
}
if (columns.title !== undefined && !columns.title) {
return { error: 'Ein Projekttitel ist erforderlich.' };
}
if (columns.start_date && columns.end_date && columns.end_date < columns.start_date) {
return { error: 'Das Projektende darf nicht vor dem Start liegen.' };
}
return { columns };
}
// GET /api/acquisitions?view=eingang|archiv|alle
router.get('/', async (req, res, next) => {
try {
await purgeOldEntries();
const view = String(req.query.view ?? 'eingang');
const where = ['a.converted_at IS NULL'];
const params = [];
if (view === 'eingang') {
where.push('a.found_at >= DATE_SUB(CURDATE(), INTERVAL ? DAY)');
params.push(ARCHIVE_AFTER_DAYS);
} else if (view === 'archiv') {
// Die untere Grenze steht bewusst auch hier: der Loeschlauf raeumt nur
// stuendlich, angezeigt werden soll nichts, was schon faellig ist.
where.push('a.found_at < DATE_SUB(CURDATE(), INTERVAL ? DAY)');
where.push('a.found_at >= DATE_SUB(CURDATE(), INTERVAL ? DAY)');
params.push(ARCHIVE_AFTER_DAYS, DELETE_AFTER_DAYS);
} else if (view !== 'alle') {
return res.status(400).json({ error: 'Unbekannte Ansicht.' });
}
const [rows] = await pool.query(
`${SELECT_ACQUISITIONS} WHERE ${where.join(' AND ')}
ORDER BY a.found_at DESC, a.id DESC`,
params
);
// Beide Zaehler in einem Rutsch: die Oberflaeche zeigt sie am Menue und
// muesste sonst zwei Listen laden, um eine Zahl zu kennen.
const [[counts]] = await pool.query(
`SELECT
SUM(found_at >= DATE_SUB(CURDATE(), INTERVAL ? DAY)) AS eingang,
SUM(found_at < DATE_SUB(CURDATE(), INTERVAL ? DAY)
AND found_at >= DATE_SUB(CURDATE(), INTERVAL ? DAY)) AS archiv
FROM crm_acquisitions WHERE converted_at IS NULL`,
[ARCHIVE_AFTER_DAYS, ARCHIVE_AFTER_DAYS, DELETE_AFTER_DAYS]
);
/*
* Vorschlaege fuer die Eingabe, aus dem gesamten Bestand - nicht nur aus der
* gerade gezeigten Liste. Wer denselben Anbieter zum zwanzigsten Mal
* eintraegt, soll ihn nicht zum zwanzigsten Mal ausschreiben muessen.
*/
const [suggestionRows] = await pool.query(
// Klammern sind Pflicht: ORDER BY und LIMIT in einem UNION-Zweig gehoeren
// sonst zur Gesamtabfrage.
`(SELECT 'provider' AS field, provider AS value FROM crm_acquisitions
WHERE provider IS NOT NULL GROUP BY provider ORDER BY MAX(found_at) DESC LIMIT 60)
UNION ALL
(SELECT 'consultant', consultant FROM crm_acquisitions
WHERE consultant IS NOT NULL GROUP BY consultant ORDER BY MAX(found_at) DESC LIMIT 60)
UNION ALL
(SELECT 'sender', sender FROM crm_acquisitions
WHERE sender IS NOT NULL GROUP BY sender ORDER BY MAX(found_at) DESC LIMIT 60)`
);
const suggestions = { providers: [], consultants: [], senders: [] };
const bucket = { provider: 'providers', consultant: 'consultants', sender: 'senders' };
for (const row of suggestionRows) suggestions[bucket[row.field]].push(row.value);
res.json({
archive_after_days: ARCHIVE_AFTER_DAYS,
delete_after_days: DELETE_AFTER_DAYS,
suggestions,
counts: {
eingang: Number(counts.eingang ?? 0),
archiv: Number(counts.archiv ?? 0),
},
entries: rows.map(mapAcquisition),
});
} catch (err) {
next(err);
}
});
// POST /api/acquisitions
router.post('/', async (req, res, next) => {
const parsed = readFields(req.body, { partial: false });
if (parsed.error) return res.status(400).json({ error: parsed.error });
const columns = parsed.columns;
// Ohne Angabe gilt heute: gefunden wurde es dann, wenn es eingetragen wird.
if (columns.found_at === null) columns.found_at = new Date().toISOString().slice(0, 10);
columns.created_by = req.user.id;
try {
const keys = Object.keys(columns);
const [result] = await pool.query(
`INSERT INTO crm_acquisitions (${keys.join(', ')})
VALUES (${keys.map(() => '?').join(', ')})`,
keys.map((key) => columns[key])
);
res.status(201).json(await fetchAcquisition(result.insertId));
} catch (err) {
next(err);
}
});
// PATCH /api/acquisitions/:id
router.patch('/:id', async (req, res, next) => {
const id = Number(req.params.id);
if (!Number.isInteger(id)) return res.status(400).json({ error: 'Ungültige Akquise-ID.' });
try {
const [rows] = await pool.query('SELECT * FROM crm_acquisitions WHERE id = ? LIMIT 1', [id]);
const existing = rows[0];
if (!existing) return res.status(404).json({ error: 'Eintrag nicht gefunden.' });
if (!mayModify(req.user, existing)) {
return res.status(403).json({
error: 'Diesen Eintrag darf nur ändern, wer ihn angelegt hat, oder ein Administrator.',
});
}
if (existing.converted_at !== null) {
return res
.status(409)
.json({ error: 'Der Eintrag wurde schon in eine Opportunity übernommen.' });
}
const parsed = readFields(req.body, { partial: true });
if (parsed.error) return res.status(400).json({ error: parsed.error });
const columns = parsed.columns;
if ('title' in columns && !columns.title) {
return res.status(400).json({ error: 'Der Projekttitel darf nicht leer sein.' });
}
// Datumsgrenzen gegen den gespeicherten Stand pruefen, nicht nur gegen das,
// was gerade mitgeschickt wurde.
const start = 'start_date' in columns ? columns.start_date : existing.start_date;
const end = 'end_date' in columns ? columns.end_date : existing.end_date;
if (start && end && end < start) {
return res.status(400).json({ error: 'Das Projektende darf nicht vor dem Start liegen.' });
}
const keys = Object.keys(columns);
if (keys.length === 0) return res.status(400).json({ error: 'Keine Änderungen übergeben.' });
await pool.query(
`UPDATE crm_acquisitions SET ${keys.map((key) => `${key} = ?`).join(', ')} WHERE id = ?`,
[...keys.map((key) => columns[key]), id]
);
res.json(await fetchAcquisition(id));
} catch (err) {
next(err);
}
});
// DELETE /api/acquisitions/:id
router.delete('/:id', async (req, res, next) => {
const id = Number(req.params.id);
if (!Number.isInteger(id)) return res.status(400).json({ error: 'Ungültige Akquise-ID.' });
try {
const [rows] = await pool.query(
'SELECT created_by FROM crm_acquisitions WHERE id = ? LIMIT 1',
[id]
);
const existing = rows[0];
if (!existing) return res.status(404).json({ error: 'Eintrag nicht gefunden.' });
if (!mayModify(req.user, existing)) {
return res.status(403).json({
error: 'Diesen Eintrag darf nur löschen, wer ihn angelegt hat, oder ein Administrator.',
});
}
await pool.query('DELETE FROM crm_acquisitions WHERE id = ?', [id]);
res.json({ ok: true });
} catch (err) {
next(err);
}
});
/*
* POST /api/acquisitions/:id/opportunity
*
* Aus dem Eintrag wird eine Opportunity in der Phase "Neu". Beides in einer
* Transaktion: entweder die Opportunity steht und der Eintrag ist als
* uebernommen vermerkt, oder es bleibt alles wie es war. Sonst koennte eine
* Opportunity entstehen, die der Eingang weiterhin anbietet.
*/
router.post('/:id/opportunity', async (req, res, next) => {
const id = Number(req.params.id);
if (!Number.isInteger(id)) return res.status(400).json({ error: 'Ungültige Akquise-ID.' });
const conn = await pool.getConnection();
try {
const [rows] = await conn.query('SELECT * FROM crm_acquisitions WHERE id = ? LIMIT 1', [id]);
const entry = rows[0];
if (!entry) return res.status(404).json({ error: 'Eintrag nicht gefunden.' });
if (entry.converted_at !== null) {
return res.status(409).json({
error: 'Aus diesem Eintrag wurde schon eine Opportunity.',
opportunity_id: entry.opportunity_id,
});
}
/*
* Was in der Liste steht, aber in der Opportunity kein Feld hat (Anbieter,
* Kanal, Absender, Link, Berater), wandert in die Notizen. Sonst wuesste
* hinterher niemand mehr, woher das Projekt kam.
*/
const origin = [
['Anbieter', entry.provider],
['Von', entry.sender],
['Kanal', entry.channel],
['Berater', entry.consultant],
['Link', entry.link],
]
.filter(([, value]) => value)
.map(([label, value]) => `${label}: ${value}`);
const notes = [
entry.notes,
origin.length > 0 ? `Aus der Akquise vom ${entry.found_at}\n${origin.join('\n')}` : null,
]
.filter(Boolean)
.join('\n\n');
await conn.beginTransaction();
const [created] = await conn.query(
`INSERT INTO crm_opportunities
(title, company, description, stage, probability, daily_rate, duration_days,
fixed_price, start_date, end_date, next_step, tags, notes, owner_id, created_by)
VALUES (?, ?, ?, 'Neu', 10, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
[
entry.title,
entry.company,
entry.description,
entry.daily_rate,
entry.duration_days,
entry.fixed_price,
entry.start_date,
entry.end_date,
entry.next_step,
entry.tags ?? '[]',
notes || null,
req.user.id,
req.user.id,
]
);
await conn.query(
'UPDATE crm_acquisitions SET opportunity_id = ?, converted_at = UTC_TIMESTAMP() WHERE id = ?',
[created.insertId, id]
);
await conn.commit();
res.status(201).json({ ok: true, opportunity_id: created.insertId });
} catch (err) {
await conn.rollback().catch(() => {});
next(err);
} finally {
conn.release();
}
});
export default router;
+46
View File
@@ -351,3 +351,49 @@ CREATE TABLE IF NOT EXISTS crm_mail_sync_state (
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci; ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
INSERT IGNORE INTO crm_mail_sync_state (id) VALUES (1); INSERT IGNORE INTO crm_mail_sync_state (id) VALUES (1);
-- ===========================================================================
-- Akquise: gefundene Projekte, bevor daraus eine Opportunity wird
--
-- Der Eingang ist eine Arbeitsliste, kein Archiv: was aelter als 14 Tage ist,
-- erscheint in der Unteransicht "Archiv", was aelter als 90 Tage ist, wird
-- geloescht. Beides ergibt sich aus `found_at` - es gibt bewusst keine
-- Zustandsspalte, die von einem Job gepflegt werden muesste und auseinander
-- laufen kann.
--
-- `converted_at` ist der Merker fuer "in eine Opportunity uebernommen". Er ist
-- die Wahrheit, nicht `opportunity_id`: wird die Opportunity spaeter geloescht,
-- faellt der Verweis auf NULL, der Eintrag soll aber nicht wieder im Eingang
-- auftauchen.
-- ===========================================================================
CREATE TABLE IF NOT EXISTS crm_acquisitions (
id INT UNSIGNED NOT NULL AUTO_INCREMENT,
found_at DATE NOT NULL, -- Spalte "Datum": wann gefunden
sender VARCHAR(190) NULL, -- "Von": wer es geschickt hat
provider VARCHAR(190) NULL, -- "Anbieter": Vermittler, Portal
channel VARCHAR(60) NULL, -- "Kanal": Mail, Telefon, Portal, ...
title VARCHAR(190) NOT NULL, -- Projekttitel
consultant VARCHAR(190) NULL, -- "Berater", fuer den es passt
link VARCHAR(1024) NULL, -- Ausschreibung; macht den Titel klickbar
-- Ab hier: steht nicht in der Liste, wandert aber in die Opportunity.
company VARCHAR(190) NULL, -- Endkunde
description TEXT NULL,
daily_rate DECIMAL(10,2) NULL,
duration_days DECIMAL(6,1) NULL,
fixed_price DECIMAL(12,2) NULL,
start_date DATE NULL,
end_date DATE NULL,
next_step VARCHAR(500) NULL,
notes TEXT NULL,
tags LONGTEXT NULL, -- JSON-Array als Text, wie bei crm_leads
opportunity_id INT UNSIGNED NULL,
converted_at DATETIME NULL,
created_by INT UNSIGNED NULL,
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (id),
KEY idx_crm_acq_found (found_at),
KEY idx_crm_acq_converted (converted_at),
CONSTRAINT fk_crm_acq_opp FOREIGN KEY (opportunity_id) REFERENCES crm_opportunities (id) ON DELETE SET NULL,
CONSTRAINT fk_crm_acq_user FOREIGN KEY (created_by) REFERENCES crm_users (id) ON DELETE SET NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+2
View File
@@ -8,6 +8,7 @@ import leadRoutes from './routes/leads.js';
import connectionRoutes from './routes/connections.js'; import connectionRoutes from './routes/connections.js';
import eventRoutes from './routes/events.js'; import eventRoutes from './routes/events.js';
import opportunityRoutes from './routes/opportunities.js'; import opportunityRoutes from './routes/opportunities.js';
import acquisitionRoutes from './routes/acquisitions.js';
import scannerRoutes from './routes/scanner.js'; import scannerRoutes from './routes/scanner.js';
import mailRoutes from './routes/mail.js'; import mailRoutes from './routes/mail.js';
import { requireAuth } from './middleware/auth.js'; import { requireAuth } from './middleware/auth.js';
@@ -47,6 +48,7 @@ app.use('/api/leads', leadRoutes);
app.use('/api/connections', connectionRoutes); app.use('/api/connections', connectionRoutes);
app.use('/api/events', eventRoutes); app.use('/api/events', eventRoutes);
app.use('/api/opportunities', opportunityRoutes); app.use('/api/opportunities', opportunityRoutes);
app.use('/api/acquisitions', acquisitionRoutes);
// Projekt Scanner. Komplett hinter der CRM-Anmeldung - der urspruengliche // Projekt Scanner. Komplett hinter der CRM-Anmeldung - der urspruengliche
// HTTP-Basic-Auth-Zugang des Scanners entfaellt damit. // HTTP-Basic-Auth-Zugang des Scanners entfaellt damit.
+7
View File
@@ -4,6 +4,7 @@ import { Header } from './components/Header';
import { LoginScreen } from './components/LoginScreen'; import { LoginScreen } from './components/LoginScreen';
import { Leads } from './components/leads/Leads'; import { Leads } from './components/leads/Leads';
import { MailPoolLeads } from './components/leads/MailPoolLeads'; import { MailPoolLeads } from './components/leads/MailPoolLeads';
import { Acquisitions } from './components/acquisition/Acquisitions';
import { Opportunities } from './components/opportunities/Opportunities'; import { Opportunities } from './components/opportunities/Opportunities';
import { Calendar } from './components/calendar/Calendar'; import { Calendar } from './components/calendar/Calendar';
import { parseSqlDateTime } from './components/calendar/calendarUtils'; import { parseSqlDateTime } from './components/calendar/calendarUtils';
@@ -138,6 +139,8 @@ const App: React.FC = () => {
// Untertitel der Kopfzeile. Die Scanner-Reiter bringen ihre Kennzahlen selbst // Untertitel der Kopfzeile. Die Scanner-Reiter bringen ihre Kennzahlen selbst
// mit, deshalb steht hier nur, worum es auf der Seite geht. // mit, deshalb steht hier nur, worum es auf der Seite geht.
const STATIC_SUBTITLES: Partial<Record<ViewState, string>> = { const STATIC_SUBTITLES: Partial<Record<ViewState, string>> = {
Akquise: 'Gefundene Projekte - eintragen, prüfen, zur Opportunity machen',
Archiv: 'Akquise-Einträge älter als 14 Tage - nach 90 Tagen werden sie gelöscht',
Mails: 'Postfach crm@perinco.de - Mails zuordnen und Kontakte übernehmen', Mails: 'Postfach crm@perinco.de - Mails zuordnen und Kontakte übernehmen',
Papierkorb: 'Im CRM gelöschte Mails - im Postfach crm@perinco.de bleiben sie erhalten', Papierkorb: 'Im CRM gelöschte Mails - im Postfach crm@perinco.de bleiben sie erhalten',
Scanner: 'Projekt Scanner - Suchagenten, Portale und Projektübereinstimmungen', Scanner: 'Projekt Scanner - Suchagenten, Portale und Projektübereinstimmungen',
@@ -185,6 +188,10 @@ const App: React.FC = () => {
/> />
<div className="scrollbar-slim flex-1 overflow-y-auto p-4 md:p-6"> <div className="scrollbar-slim flex-1 overflow-y-auto p-4 md:p-6">
{currentView === 'Akquise' && <Acquisitions reload={() => loadData(true)} />}
{currentView === 'Archiv' && (
<Acquisitions view="archiv" reload={() => loadData(true)} />
)}
{currentView === 'Opportunities' && ( {currentView === 'Opportunities' && (
<Opportunities <Opportunities
opportunities={opportunities} opportunities={opportunities}
+21 -1
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { CONTACT_VIEWS, MAIL_VIEWS, SCANNER_VIEWS, type ViewState } from '../types'; import { ACQUISITION_VIEWS, CONTACT_VIEWS, MAIL_VIEWS, SCANNER_VIEWS, type ViewState } from '../types';
import { UserAvatar } from './ui/UserAvatar'; import { UserAvatar } from './ui/UserAvatar';
import { useAuth } from '../lib/auth'; import { useAuth } from '../lib/auth';
@@ -51,6 +51,25 @@ const CONTACTS_GROUP: MenuGroup = {
], ],
}; };
const ACQUISITION_ICON =
'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01';
const ARCHIVE_ICON =
'M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4';
/**
* Akquise. Der Eingang zeigt die Funde der letzten 14 Tage, darunter klappt das
* Archiv mit allem Aelteren auf. Beides ist dieselbe Liste - geteilt wird nach
* dem Funddatum, nicht durch Verschieben.
*/
const ACQUISITION_GROUP: MenuGroup = {
item: { name: 'Akquise', icon: ACQUISITION_ICON },
views: ACQUISITION_VIEWS,
children: [
{ name: 'Akquise', label: 'Eingang', icon: ACQUISITION_ICON },
{ name: 'Archiv', icon: ARCHIVE_ICON },
],
};
const TRASH_ICON = const TRASH_ICON =
'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'; 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16';
@@ -99,6 +118,7 @@ const SCANNER_GROUP: MenuGroup = {
// Kategorien in Anzeigereihenfolge, einzelne Punkte und Gruppen gemischt. // Kategorien in Anzeigereihenfolge, einzelne Punkte und Gruppen gemischt.
// Einstellungen bleibt separat am unteren Rand. // Einstellungen bleibt separat am unteren Rand.
const CATEGORY_ENTRIES: (MenuItem | MenuGroup)[] = [ const CATEGORY_ENTRIES: (MenuItem | MenuGroup)[] = [
ACQUISITION_GROUP,
{ {
name: 'Opportunities', name: 'Opportunities',
icon: 'M9 17V7m4 10V11m4 6v-3m4 7H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z', icon: 'M9 17V7m4 10V11m4 6v-3m4 7H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z',
@@ -0,0 +1,508 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { DictateTextarea } from '../ui/DictationField';
import { inputClass, labelClass } from '../leads/leadUi';
import { useToast } from '../Toast';
import { acquisitionsApi, type AcquisitionInput } from '../../lib/api';
import {
ACQUISITION_CHANNELS,
formatEuro,
type Acquisition,
type AcquisitionChannel,
} from '../../types';
/*
* Eingabe der Akquise, direkt ueber der Liste. Bewusst kein Dialog: Projekte
* kommen in Serie herein, und ein Fenster, das nach jedem Eintrag zugeht und
* wieder aufgemacht werden muss, kostet bei zehn Projekten zwanzig Klicks.
*
* Die Pflichtangaben stehen in einer Zeile, alles Weitere klappt darunter auf.
* Das Aufklappbare sind genau die Felder, die spaeter in der Opportunity stehen
* und in der Liste keine Spalte haben.
*/
interface AcquisitionFormProps {
/** Gesetzt = Bearbeiten, sonst Neuanlage. */
editing: Acquisition | null;
suggestions: { providers: string[]; consultants: string[]; senders: string[] };
onSaved: () => void;
onCancelEdit: () => void;
}
interface FormState {
found_at: string;
sender: string;
provider: string;
channel: string;
title: string;
consultant: string;
link: string;
company: string;
description: string;
daily_rate: string;
duration_days: string;
fixed_price: string;
start_date: string;
end_date: string;
next_step: string;
notes: string;
}
const today = () => new Date().toISOString().slice(0, 10);
/** Zahlen kommen als String ins Formular, damit leere Felder leer bleiben. */
const numberToInput = (value: number | null) =>
value === null ? '' : String(value).replace('.', ',');
function toFormState(entry: Acquisition | null): FormState {
return {
found_at: entry?.found_at?.slice(0, 10) ?? today(),
sender: entry?.sender ?? '',
provider: entry?.provider ?? '',
channel: entry?.channel ?? '',
title: entry?.title ?? '',
consultant: entry?.consultant ?? '',
link: entry?.link ?? '',
company: entry?.company ?? '',
description: entry?.description ?? '',
daily_rate: numberToInput(entry?.daily_rate ?? null),
duration_days: numberToInput(entry?.duration_days ?? null),
fixed_price: numberToInput(entry?.fixed_price ?? null),
start_date: entry?.start_date?.slice(0, 10) ?? '',
end_date: entry?.end_date?.slice(0, 10) ?? '',
next_step: entry?.next_step ?? '',
notes: entry?.notes ?? '',
};
}
/** Freitextfeld mit Vorschlagsliste aus den bisherigen Eintraegen. */
const SuggestInput: React.FC<{
id: string;
label: string;
value: string;
options: string[];
placeholder?: string;
onChange: (value: string) => void;
}> = ({ id, label, value, options, placeholder, onChange }) => (
<div>
<label className={labelClass} htmlFor={id}>
{label}
</label>
<input
id={id}
list={`${id}-vorschlaege`}
value={value}
onChange={(event) => onChange(event.target.value)}
placeholder={placeholder}
className={inputClass}
/>
<datalist id={`${id}-vorschlaege`}>
{options.map((option) => (
<option key={option} value={option} />
))}
</datalist>
</div>
);
export const AcquisitionForm: React.FC<AcquisitionFormProps> = ({
editing,
suggestions,
onSaved,
onCancelEdit,
}) => {
const { addToast } = useToast();
const [form, setForm] = useState<FormState>(() => toFormState(editing));
const [showMore, setShowMore] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const titleRef = useRef<HTMLInputElement>(null);
const rootRef = useRef<HTMLDivElement>(null);
const set = <K extends keyof FormState>(key: K, value: FormState[K]) =>
setForm((prev) => ({ ...prev, [key]: value }));
/*
* Beim Wechsel in den Bearbeitungsmodus das Formular fuellen, aufklappen, wenn
* dort Angaben stehen, und hinscrollen - der Stift steht weit unten in der
* Liste, das Formular oben.
*/
useEffect(() => {
setForm(toFormState(editing));
if (editing) {
const hasExtras = Boolean(
editing.company ||
editing.description ||
editing.daily_rate !== null ||
editing.duration_days !== null ||
editing.fixed_price !== null ||
editing.start_date ||
editing.end_date ||
editing.next_step ||
editing.notes
);
setShowMore(hasExtras);
rootRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
titleRef.current?.focus();
}
}, [editing]);
// Volumen mitrechnen wie in der Opportunity: Festpreis schlaegt Tagessatz.
const volume = useMemo(() => {
const toNumber = (value: string) => Number(value.replace(',', '.'));
if (form.fixed_price.trim() !== '') {
const fixed = toNumber(form.fixed_price);
return Number.isFinite(fixed) ? fixed : null;
}
if (form.daily_rate.trim() === '' || form.duration_days.trim() === '') return null;
const rate = toNumber(form.daily_rate);
const days = toNumber(form.duration_days);
return Number.isFinite(rate) && Number.isFinite(days) ? rate * days : null;
}, [form.daily_rate, form.duration_days, form.fixed_price]);
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
if (!form.title.trim()) {
addToast('Ein Projekttitel ist erforderlich.', 'error');
return;
}
if (form.start_date && form.end_date && form.end_date < form.start_date) {
addToast('Das Projektende darf nicht vor dem Start liegen.', 'error');
return;
}
const payload: AcquisitionInput = {
found_at: form.found_at || today(),
sender: form.sender.trim() || null,
provider: form.provider.trim() || null,
channel: (form.channel as AcquisitionChannel) || null,
title: form.title.trim(),
consultant: form.consultant.trim() || null,
link: form.link.trim() || null,
company: form.company.trim() || null,
description: form.description.trim() || null,
daily_rate: form.daily_rate.trim() === '' ? null : form.daily_rate.replace(',', '.'),
duration_days: form.duration_days.trim() === '' ? null : form.duration_days.replace(',', '.'),
fixed_price: form.fixed_price.trim() === '' ? null : form.fixed_price.replace(',', '.'),
start_date: form.start_date || null,
end_date: form.end_date || null,
next_step: form.next_step.trim() || null,
notes: form.notes.trim() || null,
};
setIsSaving(true);
try {
if (editing) {
await acquisitionsApi.update(editing.id, payload);
addToast('Eintrag aktualisiert.', 'success');
onCancelEdit();
} else {
await acquisitionsApi.create(payload);
addToast('Projekt eingetragen.', 'success');
/*
* Datum, Anbieter und Kanal bleiben stehen: wer eine Mail mit drei
* Projekten abarbeitet, aendert nur Titel und Berater. Zurueckgesetzt
* wird, was je Projekt anders ist.
*/
setForm((prev) => ({
...prev,
title: '',
link: '',
company: '',
description: '',
daily_rate: '',
duration_days: '',
fixed_price: '',
start_date: '',
end_date: '',
next_step: '',
notes: '',
}));
titleRef.current?.focus();
}
onSaved();
} catch (err) {
addToast(err instanceof Error ? err.message : 'Speichern fehlgeschlagen.', 'error');
} finally {
setIsSaving(false);
}
};
return (
<section
ref={rootRef}
className={`rounded-2xl border bg-surface p-5 shadow-card ${
editing ? 'border-brand-300 ring-2 ring-brand-500/20' : 'border-ink-200'
}`}
>
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
<div>
<h3 className="text-base text-ink-900">
{editing ? 'Eintrag bearbeiten' : 'Projekt eintragen'}
</h3>
<p className="mt-0.5 text-xs text-ink-400">
{editing
? `Angelegt von ${editing.created_by_name ?? 'unbekannt'}`
: 'Datum, Anbieter und Kanal bleiben nach dem Eintragen stehen - für mehrere Projekte aus derselben Quelle.'}
</p>
</div>
{editing && (
<button
type="button"
onClick={onCancelEdit}
className="rounded-xl border border-ink-200 px-4 py-2 text-sm font-bold text-ink-600 transition hover:bg-ink-100"
>
Abbrechen
</button>
)}
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div>
<label className={labelClass} htmlFor="acq-found">
Datum
</label>
<input
id="acq-found"
type="date"
value={form.found_at}
onChange={(event) => set('found_at', event.target.value)}
className={inputClass}
/>
</div>
<SuggestInput
id="acq-sender"
label="Von"
value={form.sender}
options={suggestions.senders}
placeholder="Wer hat es geschickt?"
onChange={(value) => set('sender', value)}
/>
<SuggestInput
id="acq-provider"
label="Anbieter"
value={form.provider}
options={suggestions.providers}
placeholder="z. B. Hays"
onChange={(value) => set('provider', value)}
/>
<div>
<label className={labelClass} htmlFor="acq-channel">
Kanal
</label>
<select
id="acq-channel"
value={form.channel}
onChange={(event) => set('channel', event.target.value)}
className={inputClass}
>
<option value="">—</option>
{ACQUISITION_CHANNELS.map((channel) => (
<option key={channel} value={channel}>
{channel}
</option>
))}
</select>
</div>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-[2fr_1fr_2fr]">
<div>
<label className={labelClass} htmlFor="acq-title">
Projekttitel *
</label>
<input
id="acq-title"
ref={titleRef}
required
value={form.title}
onChange={(event) => set('title', event.target.value)}
placeholder="z. B. SAP FI Rollout Süddeutschland"
className={inputClass}
/>
</div>
<SuggestInput
id="acq-consultant"
label="Berater"
value={form.consultant}
options={suggestions.consultants}
placeholder="für wen?"
onChange={(value) => set('consultant', value)}
/>
<div>
<label className={labelClass} htmlFor="acq-link">
Link
</label>
{/* Absichtlich kein type="url": das Backend ergaenzt ein fehlendes
https:// selbst, die Browserpruefung wuerde "hays.de/projekt/1"
aber ohne Meldung abweisen und das Formular blockieren. */}
<input
id="acq-link"
inputMode="url"
value={form.link}
onChange={(event) => set('link', event.target.value)}
placeholder="hays.de/projekt/1 - macht den Titel in der Liste klickbar"
className={inputClass}
/>
</div>
</div>
{/* Alles, was in der Liste keine Spalte hat, aber in die Opportunity wandert. */}
<div>
<button
type="button"
onClick={() => setShowMore((open) => !open)}
aria-expanded={showMore}
className="flex items-center gap-2 text-xs font-extrabold uppercase tracking-wider text-ink-500 transition hover:text-brand-700"
>
<svg
className={`h-4 w-4 transition-transform ${showMore ? 'rotate-180' : ''}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
Projektdaten für die Opportunity
</button>
{showMore && (
<div className="mt-4 space-y-4 rounded-xl border border-ink-200 bg-ink-50/50 p-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div>
<label className={labelClass} htmlFor="acq-company">
Endkunde
</label>
<input
id="acq-company"
value={form.company}
onChange={(event) => set('company', event.target.value)}
placeholder="Firma hinter dem Projekt"
className={inputClass}
/>
</div>
<div>
<label className={labelClass} htmlFor="acq-start">
Projektstart
</label>
<input
id="acq-start"
type="date"
value={form.start_date}
onChange={(event) => set('start_date', event.target.value)}
className={inputClass}
/>
</div>
<div>
<label className={labelClass} htmlFor="acq-end">
Projektende
</label>
<input
id="acq-end"
type="date"
value={form.end_date}
onChange={(event) => set('end_date', event.target.value)}
className={inputClass}
/>
</div>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div>
<label className={labelClass} htmlFor="acq-rate">
Tagessatz (EUR)
</label>
<input
id="acq-rate"
inputMode="decimal"
value={form.daily_rate}
onChange={(event) => set('daily_rate', event.target.value)}
placeholder="1150"
className={inputClass}
/>
</div>
<div>
<label className={labelClass} htmlFor="acq-duration">
Laufzeit (Personentage)
</label>
<input
id="acq-duration"
inputMode="decimal"
value={form.duration_days}
onChange={(event) => set('duration_days', event.target.value)}
placeholder="40"
className={inputClass}
/>
</div>
<div>
<label className={labelClass} htmlFor="acq-fixed">
Projektpreis (EUR)
</label>
<input
id="acq-fixed"
inputMode="decimal"
value={form.fixed_price}
onChange={(event) => set('fixed_price', event.target.value)}
placeholder="Festpreis statt Tagessatz × Laufzeit"
className={inputClass}
/>
</div>
</div>
{volume !== null && (
<p className="text-xs font-bold text-ink-500">
Volumen: <span className="text-ink-900">{formatEuro(volume)}</span>
{form.fixed_price.trim() !== '' ? ' (Festpreis)' : ' (Tagessatz × Laufzeit)'}
</p>
)}
<DictateTextarea
id="acq-description"
label="Projektbeschreibung"
value={form.description}
onChange={(value) => set('description', value)}
rows={4}
placeholder="Aufgabe, Umfang, Rahmenbedingungen - wandert in die Opportunity."
/>
<div>
<label className={labelClass} htmlFor="acq-next">
Nächster Schritt
</label>
<input
id="acq-next"
value={form.next_step}
onChange={(event) => set('next_step', event.target.value)}
placeholder="z. B. Profil bis Donnerstag schicken"
className={inputClass}
/>
</div>
<DictateTextarea
id="acq-notes"
label="Interne Notizen"
value={form.notes}
onChange={(value) => set('notes', value)}
rows={3}
placeholder="Was sonst noch wichtig ist."
/>
</div>
)}
</div>
<div className="flex flex-wrap items-center gap-3">
<button
type="submit"
disabled={isSaving}
className="rounded-xl bg-brand-500 px-6 py-2.5 text-sm font-bold text-white shadow-card transition hover:bg-brand-600 disabled:opacity-60"
>
{isSaving ? 'Speichere...' : editing ? 'Speichern' : 'Eintragen'}
</button>
{!editing && (
<span className="text-xs text-ink-400">
Nur der Projekttitel ist Pflicht - alles andere lässt sich später ergänzen.
</span>
)}
</div>
</form>
</section>
);
};
@@ -0,0 +1,245 @@
import React from 'react';
import { formatEuro, type Acquisition } from '../../types';
/*
* Die Liste der gefundenen Projekte. Genau die Spalten, die beim Durchgehen
* zaehlen - alles Weitere steht im Formular und in der Opportunity.
*
* Der Titel ist ein Link, sobald einer hinterlegt ist. Ohne Link bleibt er
* einfacher Text: ein Link, der nirgends hinfuehrt, ist schlimmer als keiner.
*/
export type AcquisitionSortKey = 'found_at' | 'sender' | 'provider' | 'channel' | 'title' | 'consultant';
export interface AcquisitionSortConfig {
key: AcquisitionSortKey;
direction: 'asc' | 'desc';
}
interface AcquisitionTableProps {
entries: Acquisition[];
sortConfig: AcquisitionSortConfig;
onSort: (key: AcquisitionSortKey) => void;
editingId: number | null;
busyId: number | null;
onEdit: (entry: Acquisition) => void;
onDelete: (entry: Acquisition) => void;
onConvert: (entry: Acquisition) => void;
}
const COLUMNS: { key: AcquisitionSortKey | null; label: string; className?: string }[] = [
{ key: 'found_at', label: 'Datum' },
{ key: 'sender', label: 'Von' },
{ key: 'provider', label: 'Anbieter' },
{ key: 'channel', label: 'Kanal' },
{ key: 'title', label: 'Projekttitel' },
{ key: 'consultant', label: 'Berater' },
{ key: null, label: 'Opportunity' },
{ key: null, label: '', className: 'text-right' },
];
/** Farbe je Kanal, damit sich die Liste beim Durchsehen sortiert anfuehlt. */
const CHANNEL_STYLES: Record<string, string> = {
Mail: 'bg-sky-50 text-sky-700 border-sky-200',
Telefon: 'bg-amber-50 text-amber-700 border-amber-200',
Portal: 'bg-violet-50 text-violet-700 border-violet-200',
LinkedIn: 'bg-blue-50 text-blue-700 border-blue-200',
XING: 'bg-teal-50 text-teal-700 border-teal-200',
Empfehlung: 'bg-brand-50 text-brand-700 border-brand-200',
Sonstiges: 'bg-ink-100 text-ink-600 border-ink-200',
};
/** Kurzform des Funddatums plus Alter in Tagen als Titelhinweis. */
function formatFound(value: string): { label: string; title: string } {
const date = new Date(`${value.slice(0, 10)}T00:00:00`);
if (Number.isNaN(date.getTime())) return { label: '—', title: '' };
const days = Math.round((Date.now() - date.getTime()) / 86_400_000);
const age = days <= 0 ? 'heute' : days === 1 ? 'vor 1 Tag' : `vor ${days} Tagen`;
return {
label: date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit' }),
title: `Gefunden ${age}`,
};
}
/**
* Nur absolute http- und https-Adressen werden zum Link. Das Backend legt
* ohnehin nur solche ab; die Pruefung hier faengt Altbestand und Eintraege ab,
* die auf anderem Weg in die Tabelle gekommen sind. "hays.de/projekt/1" wuerde
* der Browser sonst als Pfad innerhalb des CRM auflegen und ins Leere fuehren.
*/
function safeLink(value: string | null): string | null {
if (!value) return null;
return /^https?:\/\//i.test(value) ? value : null;
}
/** Kurze Zusammenfassung der Angaben, die keine eigene Spalte haben. */
function extras(entry: Acquisition): string[] {
const parts: string[] = [];
if (entry.company) parts.push(entry.company);
if (entry.fixed_price !== null) parts.push(`${formatEuro(entry.fixed_price)} Festpreis`);
else if (entry.daily_rate !== null) parts.push(`${formatEuro(entry.daily_rate)}/Tag`);
if (entry.duration_days !== null) parts.push(`${entry.duration_days} PT`);
return parts;
}
const SortIcon: React.FC<{ active: boolean; direction: 'asc' | 'desc' }> = ({ active, direction }) => (
<svg
className={`h-3 w-3 shrink-0 transition ${active ? 'text-brand-600' : 'text-ink-300'} ${
active && direction === 'asc' ? 'rotate-180' : ''
}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 9l-7 7-7-7" />
</svg>
);
export const AcquisitionTable: React.FC<AcquisitionTableProps> = ({
entries,
sortConfig,
onSort,
editingId,
busyId,
onEdit,
onDelete,
onConvert,
}) => (
<div className="overflow-hidden rounded-2xl border border-ink-200 bg-surface shadow-card">
<div className="scrollbar-slim overflow-x-auto">
<table className="w-full min-w-[1000px] text-left">
<thead className="border-b border-ink-200 bg-ink-50">
<tr>
{COLUMNS.map((column) => (
<th
key={column.label || 'aktionen'}
className={`px-4 py-3 text-[10px] font-extrabold uppercase tracking-wider text-ink-500 ${
column.className ?? ''
}`}
>
{column.key ? (
<button
onClick={() => onSort(column.key!)}
className="flex items-center gap-1.5 transition hover:text-brand-700"
>
{column.label}
<SortIcon active={sortConfig.key === column.key} direction={sortConfig.direction} />
</button>
) : (
column.label
)}
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-ink-100">
{entries.map((entry) => {
const found = formatFound(entry.found_at);
const link = safeLink(entry.link);
const extraParts = extras(entry);
const isBusy = busyId === entry.id;
return (
<tr
key={entry.id}
className={`transition ${editingId === entry.id ? 'bg-brand-50' : 'hover:bg-ink-50'}`}
>
<td className="whitespace-nowrap px-4 py-3 text-sm tabular-nums text-ink-700" title={found.title}>
{found.label}
</td>
<td className="px-4 py-3 text-sm text-ink-700">{entry.sender || '—'}</td>
<td className="px-4 py-3 text-sm font-bold text-ink-800">{entry.provider || '—'}</td>
<td className="px-4 py-3">
{entry.channel ? (
<span
className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider ${
CHANNEL_STYLES[entry.channel] ?? CHANNEL_STYLES.Sonstiges
}`}
>
{entry.channel}
</span>
) : (
<span className="text-sm text-ink-400">—</span>
)}
</td>
<td className="max-w-sm px-4 py-3">
{link ? (
<a
href={link}
target="_blank"
rel="noopener noreferrer"
title={`${entry.title} - öffnet ${link}`}
className="inline-flex items-baseline gap-1 text-sm font-bold text-brand-700 underline decoration-brand-300 underline-offset-2 transition hover:text-brand-800 hover:decoration-brand-600"
>
<span className="truncate">{entry.title}</span>
<span aria-hidden>↗</span>
</a>
) : (
<span className="text-sm font-bold text-ink-900">{entry.title}</span>
)}
{extraParts.length > 0 && (
<p className="mt-0.5 truncate text-[11px] text-ink-400">{extraParts.join(' · ')}</p>
)}
</td>
<td className="px-4 py-3 text-sm text-ink-700">{entry.consultant || '—'}</td>
<td className="px-4 py-3">
<button
onClick={() => onConvert(entry)}
disabled={isBusy}
title="Als neue Opportunity in der Phase „Neu“ anlegen. Der Eintrag verschwindet danach aus dieser Liste."
className="flex items-center gap-1.5 whitespace-nowrap rounded-xl bg-brand-500 px-3 py-1.5 text-xs font-bold text-white shadow-card transition hover:bg-brand-600 disabled:opacity-50"
>
<svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M12 4v16m8-8H4" />
</svg>
{isBusy ? 'Lege an...' : 'Opportunity'}
</button>
</td>
<td className="whitespace-nowrap px-4 py-3 text-right">
<div className="inline-flex gap-1">
<button
onClick={() => onEdit(entry)}
title="Bearbeiten"
aria-label={`${entry.title} bearbeiten`}
className="rounded-lg p-2 text-ink-400 transition hover:bg-brand-50 hover:text-brand-700"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
</button>
<button
onClick={() => onDelete(entry)}
title="Löschen"
aria-label={`${entry.title} löschen`}
className="rounded-lg p-2 text-ink-400 transition hover:bg-red-50 hover:text-red-600"
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
+259
View File
@@ -0,0 +1,259 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { AcquisitionForm } from './AcquisitionForm';
import {
AcquisitionTable,
type AcquisitionSortConfig,
type AcquisitionSortKey,
} from './AcquisitionTable';
import { ConfirmDialog } from '../ui/Modal';
import { useToast } from '../Toast';
import { useNavigation } from '../../lib/navigation';
import { acquisitionsApi } from '../../lib/api';
import type { Acquisition, AcquisitionList } from '../../types';
/*
* Akquise: gefundene Projekte in einer Liste, mit der Eingabe darueber.
*
* Derselbe Aufbau traegt das Archiv (`view = 'archiv'`): dieselbe Liste, nur
* ohne Eingabe - im Archiv wird nichts Neues eingetragen, es wird abgearbeitet
* oder es verfaellt.
*
* Eingang und Archiv trennt allein das Funddatum; das entscheidet das Backend.
* Nichts hier verschiebt Eintraege, es gibt keinen Zustand, der driften kann.
*/
interface AcquisitionsProps {
/** 'archiv' zeigt die Eintraege, die aelter als die Frist sind. */
view?: 'eingang' | 'archiv';
/** Opportunities der App neu laden - nach einer Uebernahme. */
reload: () => void;
}
/** Vergleichswert je Sortierschluessel; leere Felder sortieren ans Ende. */
function sortValue(entry: Acquisition, key: AcquisitionSortKey): string | null {
switch (key) {
case 'found_at':
return entry.found_at;
case 'title':
return entry.title.toLowerCase();
default:
return entry[key]?.toLowerCase() ?? null;
}
}
export const Acquisitions: React.FC<AcquisitionsProps> = ({ view = 'eingang', reload }) => {
const { addToast } = useToast();
const { goTo } = useNavigation();
const isArchive = view === 'archiv';
const [data, setData] = useState<AcquisitionList | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [search, setSearch] = useState('');
const [editing, setEditing] = useState<Acquisition | null>(null);
const [toDelete, setToDelete] = useState<Acquisition | null>(null);
const [busyId, setBusyId] = useState<number | null>(null);
const [sortConfig, setSortConfig] = useState<AcquisitionSortConfig>({
key: 'found_at',
direction: 'desc',
});
const load = useCallback(
async (silent = false) => {
if (!silent) setIsLoading(true);
try {
setData(await acquisitionsApi.list(view));
} catch (err) {
addToast(err instanceof Error ? err.message : 'Akquise nicht abrufbar.', 'error');
} finally {
setIsLoading(false);
}
},
[view, addToast]
);
useEffect(() => {
load();
}, [load]);
// Beim Wechsel zwischen Eingang und Archiv nichts Angefangenes mitnehmen.
useEffect(() => {
setEditing(null);
setSearch('');
}, [view]);
const entries = useMemo(() => {
const all = data?.entries ?? [];
const terms = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
const matches = all.filter((entry) => {
if (terms.length === 0) return true;
const haystack = [
entry.title,
entry.sender,
entry.provider,
entry.channel,
entry.consultant,
entry.company,
entry.description,
entry.notes,
entry.tags.join(' '),
]
.filter(Boolean)
.join(' ')
.toLowerCase();
return terms.every((term) => haystack.includes(term));
});
const direction = sortConfig.direction === 'asc' ? 1 : -1;
return [...matches].sort((a, b) => {
const left = sortValue(a, sortConfig.key);
const right = sortValue(b, sortConfig.key);
if (left === right) return (a.id - b.id) * direction;
if (left === null) return 1;
if (right === null) return -1;
return left.localeCompare(right, 'de') * direction;
});
}, [data, search, sortConfig]);
const handleSort = (key: AcquisitionSortKey) => {
setSortConfig((prev) =>
prev.key === key
? { key, direction: prev.direction === 'asc' ? 'desc' : 'asc' }
: // Datum beginnt absteigend - das Neueste zuerst ist der Normalfall.
{ key, direction: key === 'found_at' ? 'desc' : 'asc' }
);
};
const convert = async (entry: Acquisition) => {
setBusyId(entry.id);
try {
await acquisitionsApi.toOpportunity(entry.id);
addToast(`Opportunity „${entry.title}" angelegt - Phase „Neu".`, 'success');
if (editing?.id === entry.id) setEditing(null);
await load(true);
// Die Opportunity-Liste der App kennt den neuen Eintrag noch nicht.
reload();
} catch (err) {
addToast(err instanceof Error ? err.message : 'Übernahme fehlgeschlagen.', 'error');
await load(true);
} finally {
setBusyId(null);
}
};
const confirmDelete = async () => {
if (!toDelete) return;
try {
await acquisitionsApi.remove(toDelete.id);
addToast('Eintrag gelöscht.', 'success');
if (editing?.id === toDelete.id) setEditing(null);
await load(true);
} catch (err) {
addToast(err instanceof Error ? err.message : 'Löschen fehlgeschlagen.', 'error');
} finally {
setToDelete(null);
}
};
const archiveAfter = data?.archive_after_days ?? 14;
const deleteAfter = data?.delete_after_days ?? 90;
return (
<div className="space-y-4">
{isArchive ? (
<div className="rounded-2xl border-l-4 border-l-ink-300 border border-ink-200 bg-ink-50 p-4">
<p className="text-sm font-bold text-ink-700">
Älter als {archiveAfter} Tage - hierher rutscht alles von selbst.
</p>
<p className="mt-1 text-xs text-ink-500">
Nach {deleteAfter} Tagen wird ein Eintrag automatisch gelöscht. Bis dahin lässt er sich
weiter bearbeiten und jederzeit in eine Opportunity übernehmen. Neue Projekte werden
unter <em>Akquise</em> eingetragen.
</p>
</div>
) : (
<AcquisitionForm
editing={editing}
suggestions={data?.suggestions ?? { providers: [], consultants: [], senders: [] }}
onSaved={() => load(true)}
onCancelEdit={() => setEditing(null)}
/>
)}
{/* Steuerleiste */}
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<div className="relative w-full sm:max-w-sm">
<input
type="search"
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="Titel, Anbieter, Berater, Notizen suchen"
className="w-full rounded-xl border border-ink-200 bg-surface py-2.5 pl-10 pr-4 text-sm text-ink-900 outline-none transition focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25"
/>
<svg
className="absolute left-3.5 top-3 h-4 w-4 text-ink-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
<div className="flex items-center gap-3 text-xs font-bold text-ink-400 sm:ml-auto">
<span>
{entries.length} von {data?.entries.length ?? 0}
{isArchive ? ' im Archiv' : ' im Eingang'}
</span>
{!isArchive && (data?.counts.archiv ?? 0) > 0 && (
<button
onClick={() => goTo('Archiv')}
className="rounded-lg border border-ink-200 px-3 py-1.5 transition hover:border-brand-300 hover:text-brand-700"
>
{data?.counts.archiv} im Archiv
</button>
)}
</div>
</div>
{isLoading && !data ? (
<div className="flex items-center justify-center rounded-2xl border border-ink-200 bg-surface py-24">
<span className="h-6 w-6 animate-spin rounded-full border-2 border-brand-200 border-t-brand-500" />
</div>
) : entries.length === 0 ? (
<div className="rounded-2xl border border-dashed border-ink-200 bg-surface px-6 py-16 text-center text-sm font-bold text-ink-400">
{search
? 'Kein Eintrag passt zur Suche.'
: isArchive
? `Das Archiv ist leer - es gibt keine Projekte, die älter als ${archiveAfter} Tage sind.`
: 'Noch keine Projekte eingetragen. Oben ausfüllen und auf „Eintragen" klicken.'}
</div>
) : (
<AcquisitionTable
entries={entries}
sortConfig={sortConfig}
onSort={handleSort}
editingId={editing?.id ?? null}
busyId={busyId}
onEdit={setEditing}
onDelete={setToDelete}
onConvert={convert}
/>
)}
{toDelete && (
<ConfirmDialog
title="Eintrag löschen?"
message={`„${toDelete.title}" wird aus der Akquise entfernt. Wer das Projekt behalten will, übernimmt es stattdessen als Opportunity.`}
onConfirm={confirmDelete}
onCancel={() => setToDelete(null)}
/>
)}
</div>
);
};
+48
View File
@@ -1,4 +1,6 @@
import type { import type {
Acquisition,
AcquisitionList,
AppUser, AppUser,
CalendarEvent, CalendarEvent,
Lead, Lead,
@@ -197,6 +199,52 @@ export const opportunitiesApi = {
remove: (id: number) => request<{ ok: true }>(`/opportunities/${id}`, { method: 'DELETE' }), remove: (id: number) => request<{ ok: true }>(`/opportunities/${id}`, { method: 'DELETE' }),
}; };
// ---------- Akquise ----------
/**
* Zahlen gehen als Text raus, damit ein leeres Feld auch leer bleibt und nicht
* als 0 in der Datenbank landet - dasselbe Muster wie bei den Opportunities.
*/
export type AcquisitionInput = Partial<
Omit<
Acquisition,
| 'id'
| 'created_at'
| 'updated_at'
| 'converted_at'
| 'opportunity_id'
| 'opportunity_title'
| 'opportunity_stage'
| 'created_by'
| 'created_by_name'
| 'daily_rate'
| 'duration_days'
| 'fixed_price'
>
> & {
daily_rate?: string | number | null;
duration_days?: string | number | null;
fixed_price?: string | number | null;
};
export type AcquisitionView = 'eingang' | 'archiv' | 'alle';
export const acquisitionsApi = {
list: (view: AcquisitionView = 'eingang') =>
request<AcquisitionList>(`/acquisitions?view=${view}`),
create: (input: AcquisitionInput) =>
request<Acquisition>('/acquisitions', { method: 'POST', body: JSON.stringify(input) }),
update: (id: number, input: AcquisitionInput) =>
request<Acquisition>(`/acquisitions/${id}`, { method: 'PATCH', body: JSON.stringify(input) }),
remove: (id: number) => request<{ ok: true }>(`/acquisitions/${id}`, { method: 'DELETE' }),
/** Legt die Opportunity an und vermerkt den Eintrag als uebernommen. */
toOpportunity: (id: number) =>
request<{ ok: true; opportunity_id: number }>(`/acquisitions/${id}/opportunity`, {
method: 'POST',
}),
};
// ---------- Interviews (Termine) ---------- // ---------- Interviews (Termine) ----------
export interface EventInput { export interface EventInput {
+77
View File
@@ -1,4 +1,6 @@
export type ViewState = export type ViewState =
| 'Akquise'
| 'Archiv'
| 'Opportunities' | 'Opportunities'
| 'Interviews' | 'Interviews'
| 'Kontakte' | 'Kontakte'
@@ -45,6 +47,12 @@ export const CONTACT_VIEWS: ViewState[] = ['Kontakte', 'Aus Mails'];
*/ */
export const MAIL_VIEWS: ViewState[] = ['Mails', 'Papierkorb']; export const MAIL_VIEWS: ViewState[] = ['Mails', 'Papierkorb'];
/**
* Akquise. "Akquise" ist der Eingang der letzten 14 Tage, "Archiv" alles
* Aeltere. Beides ist dieselbe Liste, nur nach dem Funddatum geteilt.
*/
export const ACQUISITION_VIEWS: ViewState[] = ['Akquise', 'Archiv'];
export type Role = 'admin' | 'user'; export type Role = 'admin' | 'user';
export interface AppUser { export interface AppUser {
@@ -240,6 +248,75 @@ export interface Opportunity {
export type OpportunityViewMode = 'grid' | 'list' | 'pipeline'; export type OpportunityViewMode = 'grid' | 'list' | 'pipeline';
// ---------- Akquise ----------
/**
* Wie das Projekt zu uns kam. Feste Auswahl, damit sich die Liste nach dem Kanal
* gruppieren laesst - als Freitext waeren "Mail", "E-Mail" und "mail" drei Kanaele.
*/
export const ACQUISITION_CHANNELS = [
'Mail',
'Telefon',
'Portal',
'LinkedIn',
'XING',
'Empfehlung',
'Sonstiges',
] as const;
export type AcquisitionChannel = (typeof ACQUISITION_CHANNELS)[number];
/**
* Ein gefundenes Projekt, bevor daraus eine Opportunity wird.
*
* Die ersten Felder stehen in der Liste, die uebrigen nur im Formular - sie
* wandern bei der Uebernahme in die Opportunity.
*/
export interface Acquisition {
id: number;
/** Wann gefunden - entscheidet ueber Eingang, Archiv und Loeschung. */
found_at: string;
/** "Von": wer es geschickt hat. */
sender: string | null;
/** "Anbieter": Vermittler oder Portal. */
provider: string | null;
channel: AcquisitionChannel | null;
title: string;
/** "Berater", fuer den es passt. */
consultant: string | null;
/** Ausschreibung; ist er gesetzt, wird der Titel in der Liste klickbar. */
link: string | null;
company: string | null;
description: string | null;
daily_rate: number | null;
duration_days: number | null;
fixed_price: number | null;
start_date: string | null;
end_date: string | null;
next_step: string | null;
notes: string | null;
tags: string[];
/** Gesetzt = uebernommen; der Eintrag verschwindet dann aus beiden Listen. */
converted_at: string | null;
opportunity_id: number | null;
opportunity_title?: string | null;
opportunity_stage?: OpportunityStage | null;
created_by: number | null;
created_by_name?: string | null;
created_at?: string;
updated_at?: string;
}
/** Zaehler und Fristen liefert das Backend mit - sie stehen dort, nicht hier. */
export interface AcquisitionList {
archive_after_days: number;
delete_after_days: number;
counts: { eingang: number; archiv: number };
/** Bisher benutzte Werte aus dem gesamten Bestand, fuer die Eingabehilfen. */
suggestions: { providers: string[]; consultants: string[]; senders: string[] };
entries: Acquisition[];
}
/** /**
* Projektvolumen. Ein gesetzter Projektpreis gilt als Festpreis und schlaegt die * Projektvolumen. Ein gesetzter Projektpreis gilt als Festpreis und schlaegt die
* Rechnung aus Tagessatz x Personentagen; sonst braucht es beide Werte. * Rechnung aus Tagessatz x Personentagen; sonst braucht es beide Werte.