feat(dashboard): Startansicht mit Bewerbungen, Wandlung und Gewinnen
Erster Menuepunkt und Startansicht; das Logo oben links fuehrt dorthin zurueck. Vier Kennzahlen (Bewerbungen, daraus Opportunities samt Quote, gewonnene Projekte, aktuell beim Kunden), ein Saeulendiagramm mit denselben drei Reihen ueber der Zeit, die Bewerbungen je Berater, die naechsten Termine und alle Opportunities in Kundenvorstellung bzw. Interview Kunde. Zeitraum ueber vier Vorgaben oder frei, Einteilung nach Tag, Monat, Quartal oder Jahr. Bewerbung heisst dabei: ein Eintrag in der Akquise - jeder Eintrag bedeutet, dass ein Profil raus ist (so vom Nutzer festgelegt). Zwei Dinge dafuer am Datenmodell: - crm_opportunities.won_at haelt den Zeitpunkt des Wechsels nach "Beauftragt". Die Phase allein sagt nur, wie es jetzt steht, nicht wann es passiert ist. Beim Wechsel heraus wird das Datum geleert, sonst zaehlt das Dashboard einen Gewinn, den es nicht gibt. - Die Akquise loescht nach 90 Tagen - damit waere jede Jahresauswertung falsch. Der Aufraeumlauf sichert deshalb vorher Tag, Berater und Anzahl in crm_acquisition_history, in derselben Transaktion wie das Loeschen. Gesichert wird nur, was verschwindet; die Auswertung addiert beide Quellen und kann sich damit nicht ueberschneiden. Projektdaten sind nach dem Loeschen weiterhin weg. Termine und die Phasenlisten kommen nicht aus einem eigenen Endpunkt: Termine und Opportunities laedt die App ohnehin komplett, das Dashboard filtert sie selbst. Diagramme von Hand (SVG-freie Balken plus Tailwind-Uebergaenge) statt einer Bibliothek - drei Darstellungen rechtfertigen keine weitere Abhaengigkeit, und so kommen die Farben aus denselben Tokens wie der Rest. Die Zahlen laufen hoch, die Saeulen wachsen; wer Bewegung im System abgeschaltet hat, bekommt sofort den Endwert. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sascha Wolf
co-authored by
Claude Opus 5
Claude Opus 5
parent
42639c65fa
commit
6f57483f33
@@ -90,8 +90,8 @@ sofort draußen, ohne auf den Ablauf des Tokens zu warten.
|
||||
```mermaid
|
||||
flowchart TD
|
||||
L["Anmeldung"] --> R{"Rolle"}
|
||||
R -->|admin| A["Akquise, Opportunities, Interviews, Kontakte, Mails, Scanner<br/>Einstellungen: Nutzerverwaltung, Mein Konto, Postfach, Scanner, Whisper"]
|
||||
R -->|user| U["Akquise, Opportunities, Interviews, Kontakte, Mails, Scanner<br/>Einstellungen: Mein Konto, Whisper"]
|
||||
R -->|admin| A["Dashboard, Akquise, Opportunities, Interviews, Kontakte, Mails, Scanner<br/>Einstellungen: Nutzerverwaltung, Mein Konto, Akquise, Postfach, Scanner, Whisper"]
|
||||
R -->|user| U["Dashboard, Akquise, Opportunities, Interviews, Kontakte, Mails, Scanner<br/>Einstellungen: Mein Konto, Akquise, Whisper"]
|
||||
```
|
||||
|
||||
Bei den Mails darf jede Rolle lesen und zuordnen - `crm@perinco.de` ist ein
|
||||
|
||||
+16
-1
@@ -71,6 +71,7 @@ erDiagram
|
||||
date last_interaction_at
|
||||
varchar next_step
|
||||
int owner_id FK
|
||||
datetime won_at "Wechsel nach Beauftragt"
|
||||
datetime deleted_at "Papierkorb; nach 90 Tagen weg"
|
||||
}
|
||||
crm_opportunity_contacts {
|
||||
@@ -95,6 +96,11 @@ erDiagram
|
||||
enum field "sender | channel | consultant"
|
||||
varchar value "Inhalt des Dropdowns"
|
||||
}
|
||||
crm_acquisition_history {
|
||||
date found_on PK
|
||||
varchar consultant PK
|
||||
int applications "verdichtet vor dem Loeschen"
|
||||
}
|
||||
crm_events {
|
||||
int id PK
|
||||
varchar title
|
||||
@@ -110,7 +116,7 @@ erDiagram
|
||||
}
|
||||
```
|
||||
|
||||
Sieben Eigenheiten, die man kennen muss:
|
||||
Acht Eigenheiten, die man kennen muss:
|
||||
|
||||
- **`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
|
||||
@@ -127,6 +133,15 @@ Sieben Eigenheiten, die man kennen muss:
|
||||
- **`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
|
||||
wenige Kilobyte.
|
||||
- **Das Dashboard rechnet aus zwei Quellen.** Jeder Eintrag in
|
||||
`crm_acquisitions` ist eine versendete Bewerbung. Weil die Akquise nach 90
|
||||
Tagen löscht, sichert der Aufräumlauf vorher Tag, Berater und Anzahl in
|
||||
`crm_acquisition_history` - in derselben Transaktion, sonst würde ein Abbruch
|
||||
zwischen Sichern und Löschen denselben Tag doppelt zählen. Die Auswertung liest
|
||||
beide Quellen und addiert sie; überschneiden können sie sich nicht, weil genau
|
||||
das gesichert wird, was verschwindet. `crm_opportunities.won_at` hält den
|
||||
Zeitpunkt des Wechsels nach *Beauftragt* - die Phase allein sagt nur, wie es
|
||||
jetzt steht, nicht wann es passiert ist.
|
||||
- **Gelöschte Opportunities bleiben stehen.** `crm_opportunities.deleted_at`
|
||||
setzt sie in den Papierkorb; alle Abfragen blenden sie aus. An einer
|
||||
Opportunity hängen Ansprechpartner, Verlauf und Mailzuordnungen - ein Fehlklick
|
||||
|
||||
+2
-1
@@ -9,10 +9,11 @@ sitzt und keine tiefen Links braucht.
|
||||
```mermaid
|
||||
flowchart TD
|
||||
SB["Seitenleiste"] --> K["Kategorien"]
|
||||
K --> D["Dashboard<br/>(Startansicht, auch über das Logo)"]
|
||||
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"]
|
||||
K --> C["Interviews"]
|
||||
K --> L["Kontakte"]
|
||||
L --> L1["Alle Kontakte"]
|
||||
|
||||
@@ -9,6 +9,7 @@ Ein CRM für die Projektvermittlung. Es beantwortet vier Fragen:
|
||||
|
||||
| Frage | Bereich |
|
||||
| --- | --- |
|
||||
| Wie läuft es gerade? | **Dashboard** |
|
||||
| Welche Projekte haben wir gefunden? | **Akquise** |
|
||||
| Welche Geschäfte sind in Arbeit und was sind sie wert? | **Opportunities** |
|
||||
| Wer ist wann wo, und wer ist beteiligt? | **Interviews** |
|
||||
@@ -32,6 +33,7 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
|
||||
```
|
||||
┌──────────────┬───────────────────────────────────────────┐
|
||||
│ Kategorien │ Titel der Ansicht [Hell/Dunkel] │
|
||||
│ Dashboard │ │
|
||||
│ Akquise ▾ │ │
|
||||
│ Eingang │ │
|
||||
│ Archiv 3│ │
|
||||
@@ -57,6 +59,8 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
|
||||
└──────────────┴───────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
* Der Klick auf das **perinco-Logo** oben links führt zurück zum **Dashboard** -
|
||||
das ist auch die Ansicht, mit der die Anwendung startet.
|
||||
* Der Knopf mit den drei Strichen oben links klappt das Menü auf Symbolbreite
|
||||
zusammen - hilfreich auf kleinen Bildschirmen.
|
||||
* Rechts oben schaltet zwischen hellem und dunklem Design. Ein **Doppelklick**
|
||||
@@ -78,6 +82,48 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
|
||||
> Alle Abbildungen in dieser Anleitung zeigen die Anwendung mit **erfundenen
|
||||
> Beispieldaten**. Firmen, Personen und Zahlen darin gibt es nicht.
|
||||
|
||||
## Dashboard
|
||||
|
||||
Die Startansicht: wie der Vertrieb läuft, ohne dass man irgendwo hineinklicken
|
||||
muss. Alle sehen dieselben Zahlen.
|
||||
|
||||
Oben steht der **Zeitraum**. Vier Vorgaben (30 Tage, 12 Monate, 8 Quartale,
|
||||
5 Jahre) setzen Anfang, Ende und die passende Einteilung; *von* und *bis* lassen
|
||||
sich frei setzen, und rechts wählt **Einteilung** aus, wie die Zeitachse
|
||||
geschnitten wird - Tag, Monat, Quartal oder Jahr.
|
||||
|
||||
### Die vier Kennzahlen
|
||||
|
||||
| Kachel | Was gezählt wird |
|
||||
| --- | --- |
|
||||
| **Bewerbungen** | Einträge in der Akquise im Zeitraum. Jeder Eintrag ist eine versendete Bewerbung |
|
||||
| **Zu Opportunity** | Bewerbungen, aus denen eine Opportunity geworden ist - dazu die Quote |
|
||||
| **Gewonnen** | Opportunities, die in die Phase *Beauftragt* gekommen sind |
|
||||
| **Beim Kunden** | Opportunities, die **jetzt** in *Kundenvorstellung* oder *Interview Kunde* stehen - unabhängig vom Zeitraum |
|
||||
|
||||
### Verlauf
|
||||
|
||||
Das Säulendiagramm zeigt dieselben drei Reihen über der Zeit: Bewerbungen, daraus
|
||||
entstandene Opportunities und gewonnene Projekte. Leere Abschnitte bleiben
|
||||
sichtbar - eine Woche ohne Bewerbung ist eine Aussage. Der Mauszeiger auf einer
|
||||
Säule nennt Abschnitt, Reihe und Wert.
|
||||
|
||||
Rechts daneben steht **Bewerbungen je Berater** für denselben Zeitraum. Einträge
|
||||
ohne hinterlegten Berater erscheinen als *Ohne Berater*.
|
||||
|
||||
### Anstehende Interviews und „Beim Kunden"
|
||||
|
||||
Unten links die nächsten acht Termine aus dem gemeinsamen Kalender mit Datum,
|
||||
Uhrzeit, Ort, Teilnehmern und dem Abstand („morgen", „in 3 Tagen"). Unten rechts
|
||||
alle Opportunities in *Kundenvorstellung* und *Interview Kunde* mit Firma,
|
||||
Volumen und Zuständigem - also alles, wo gerade der Kunde am Zug ist.
|
||||
|
||||
> **Zur Genauigkeit der Zahlen:** Die Akquise löscht Einträge nach 90 Tagen.
|
||||
> Damit die Auswertung über Monate und Jahre trotzdem stimmt, sichert das Backend
|
||||
> vor dem Löschen Tag, Berater und Anzahl - die Projektdaten sind dann weg, die
|
||||
> Zahl bleibt. „Gewonnen" wird ab dem 18.08.2026 mitgeschrieben (Zeitpunkt des
|
||||
> Wechsels nach *Beauftragt*); für die Zeit davor gibt es diesen Zeitpunkt nicht.
|
||||
|
||||
## Akquise
|
||||
|
||||
Der Eingang für gefundene Projekte - alles, was per Mail, Telefon oder über ein
|
||||
|
||||
@@ -94,6 +94,7 @@ Alle unter `router.use(requireAuth)`.
|
||||
| `opportunities.js` | `GET /?trash=true`, `POST /`, `PATCH /:id`, `DELETE /:id` (Papierkorb), `POST /:id/restore`, `POST /trash/empty` | ändern, löschen und wiederherstellen nur Ersteller, Zuständiger oder Admin; Leeren jeder Angemeldete |
|
||||
| `acquisitions.js` | `GET /?view=eingang\|archiv\|alle`, `POST /`, `PATCH /:id`, `DELETE /:id`, `POST /:id/opportunity`; Auswahllisten: `GET/POST /options`, `PATCH/DELETE /options/:id` | Einträge ändern/löschen nur Ersteller oder Admin; Auswahllisten jeder Angemeldete |
|
||||
| `badges.js` | `GET /` | Zahlen für die Seitenleiste: Akquise-Archiv, beide Papierkörbe, verworfene Scanner-Treffer. Der Scanner-Zähler ist `null`, wenn dessen Datenbank fehlt |
|
||||
| `dashboard.js` | `GET /?from=&to=&bucket=tag\|monat\|quartal\|jahr` | drei Reihen über der Zeit plus Bewerbungen je Berater. Liest Akquise **und** `crm_acquisition_history`; Termine und Phasenlisten stehen bewusst nicht drin - die lädt die App ohnehin |
|
||||
| `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:
|
||||
@@ -268,6 +269,8 @@ Warum genau diese Konstanten festgelegt sind, steht in
|
||||
| --- | --- |
|
||||
| `components/opportunities/OpportunityTrash.tsx` | Papierkorb der Opportunities: wiederherstellen, leeren, Restlaufzeit je Eintrag |
|
||||
| `components/opportunities/opportunityUi.tsx` | `STAGE_LABELS` (Anzeige, mit Umlaut), `STAGE_HINTS` (Erläuterung als Titelhinweis), `STAGE_STYLES`, `STAGE_COLORS`, `StageBadge` |
|
||||
| `components/dashboard/Dashboard.tsx` | Startansicht: Zeitraumwahl, vier Kennzahlen, Verlauf, Berater, Termine, „Beim Kunden". `buildAxis()` erzeugt auch leere Abschnitte |
|
||||
| `components/dashboard/dashboardUi.tsx` | `useCountUp()` (Zahl läuft hoch, respektiert `prefers-reduced-motion`), `StatCard`, `SeriesChart`, `BarList`, `Panel` - von Hand statt Diagrammbibliothek |
|
||||
| `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 |
|
||||
|
||||
@@ -22,6 +22,7 @@ Quelltext.
|
||||
| **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`. |
|
||||
| **Akquise** | Eingang für gefundene Projekte, bevor daraus eine Opportunity wird. Tabelle `crm_acquisitions`. Nach 14 Tagen im **Archiv**, nach 90 Tagen gelöscht. |
|
||||
| **Bewerbung** | Ein Eintrag in der Akquise. Jeder Eintrag bedeutet, dass ein Beraterprofil raus ist - so zählt es das Dashboard. |
|
||||
| **Auswahllisten** (Akquise) | Inhalte der Dropdowns *Von*, *Kanal*, *Berater*. Tabelle `crm_acquisition_options`, gepflegt unter *Einstellungen → Akquise*. *Anbieter* ist Freitext mit Vorschlägen. |
|
||||
| **Art** (eines Kontakts) | Recruiter, Partner oder Endkunde. Spalte `crm_leads.kind`; hieß bis 18.08.2026 „Status" mit den Werten Neu .. Verloren. |
|
||||
| **Papierkorb** (Mails) | 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. |
|
||||
|
||||
@@ -175,17 +175,51 @@ async function purgeOldEntries() {
|
||||
if (Date.now() - lastPurgeAt < 3_600_000) return;
|
||||
lastPurgeAt = Date.now();
|
||||
|
||||
const [result] = await pool.query(
|
||||
/*
|
||||
* Vor dem Loeschen die Zahlen sichern: jeder Eintrag ist eine versendete
|
||||
* Bewerbung, und das Dashboard rechnet ueber Jahre. Gesichert wird nur Tag,
|
||||
* Berater und Anzahl - die Projektdaten sind danach wirklich weg.
|
||||
*
|
||||
* Sichern und Loeschen gehoeren in eine Transaktion: die Anzahl wird
|
||||
* aufaddiert (ein Tag kann aus einem frueheren Lauf schon in der Historie
|
||||
* stehen), und ein Abbruch zwischen beiden Schritten wuerde denselben Tag beim
|
||||
* naechsten Lauf ein zweites Mal dazurechnen.
|
||||
*/
|
||||
const conn = await pool.getConnection();
|
||||
try {
|
||||
await conn.beginTransaction();
|
||||
await conn.query(
|
||||
`INSERT INTO crm_acquisition_history (found_on, consultant, applications)
|
||||
SELECT found_at, COALESCE(consultant, ''), COUNT(*)
|
||||
FROM crm_acquisitions
|
||||
WHERE converted_at IS NULL
|
||||
AND found_at < DATE_SUB(CURDATE(), INTERVAL ? DAY)
|
||||
GROUP BY found_at, COALESCE(consultant, '')
|
||||
ON DUPLICATE KEY UPDATE
|
||||
applications = crm_acquisition_history.applications + VALUES(applications)`,
|
||||
[DELETE_AFTER_DAYS]
|
||||
);
|
||||
|
||||
const [result] = await conn.query(
|
||||
`DELETE FROM crm_acquisitions
|
||||
WHERE converted_at IS NULL
|
||||
AND found_at < DATE_SUB(CURDATE(), INTERVAL ? DAY)`,
|
||||
[DELETE_AFTER_DAYS]
|
||||
);
|
||||
await conn.commit();
|
||||
|
||||
if (result.affectedRows > 0) {
|
||||
console.log(
|
||||
`[Akquise] ${result.affectedRows} Eintrag/Eintraege aelter als ${DELETE_AFTER_DAYS} Tage geloescht.`
|
||||
`[Akquise] ${result.affectedRows} Eintrag/Eintraege aelter als ${DELETE_AFTER_DAYS} Tage geloescht (Anzahl im Verlauf gesichert).`
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
await conn.rollback().catch(() => {});
|
||||
// Nicht weiterwerfen: das Aufraeumen darf die Liste nicht blockieren.
|
||||
console.warn(`[Akquise] Aufraeumen fehlgeschlagen: ${err.message}`);
|
||||
} finally {
|
||||
conn.release();
|
||||
}
|
||||
}
|
||||
|
||||
/** Alle Auswahllisten als { sender: [...], channel: [...], consultant: [...] }. */
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
import express from 'express';
|
||||
import { pool } from '../db.js';
|
||||
import { requireAuth } from '../middleware/auth.js';
|
||||
|
||||
const router = express.Router();
|
||||
router.use(requireAuth);
|
||||
|
||||
/*
|
||||
* Zahlen fuer das Dashboard. Drei Reihen ueber der Zeit:
|
||||
*
|
||||
* Bewerbungen - Eintraege in der Akquise. Jeder Eintrag ist eine versendete
|
||||
* Bewerbung (so vom Nutzer festgelegt), gezaehlt nach `found_at`.
|
||||
* Gewandelt - daraus wurde eine Opportunity, gezaehlt nach `converted_at`.
|
||||
* Gewonnen - Opportunity in der Phase "Beauftragt", gezaehlt nach `won_at`.
|
||||
*
|
||||
* Die Akquise loescht Eintraege nach 90 Tagen, sichert vorher aber Tag, Berater
|
||||
* und Anzahl in crm_acquisition_history. Die Bewerbungsreihe liest deshalb aus
|
||||
* beiden Quellen - lebende Eintraege und Verlauf - und zaehlt sie zusammen.
|
||||
* Ueberschneiden koennen sie sich nicht: gesichert wird genau, was verschwindet.
|
||||
*
|
||||
* Termine und die Listen zu den Phasen stehen absichtlich nicht hier: Termine und
|
||||
* Opportunities laedt die App ohnehin komplett, das Dashboard filtert sie selbst.
|
||||
* Ein zweiter Weg zu denselben Daten waere doppelte Pflege.
|
||||
*/
|
||||
|
||||
/** Wie die Zeitachse geschnitten wird. Der Ausdruck geht in GROUP BY. */
|
||||
const BUCKETS = {
|
||||
tag: (column) => `DATE_FORMAT(${column}, '%Y-%m-%d')`,
|
||||
monat: (column) => `DATE_FORMAT(${column}, '%Y-%m')`,
|
||||
quartal: (column) => `CONCAT(YEAR(${column}), '-Q', QUARTER(${column}))`,
|
||||
jahr: (column) => `YEAR(${column})`,
|
||||
};
|
||||
|
||||
/** `YYYY-MM-DD` oder null. */
|
||||
function normalizeDate(value) {
|
||||
const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(value ?? '').trim());
|
||||
if (!match) return null;
|
||||
const probe = new Date(`${match[0]}T00:00:00Z`);
|
||||
return Number.isNaN(probe.getTime()) ? null : match[0];
|
||||
}
|
||||
|
||||
/** Zeilen [{ bucket, count }] als Objekt - das Frontend legt die Achse selbst. */
|
||||
const toMap = (rows) =>
|
||||
Object.fromEntries(rows.map((row) => [String(row.bucket), Number(row.count)]));
|
||||
|
||||
// GET /api/dashboard?from=2026-01-01&to=2026-12-31&bucket=monat
|
||||
router.get('/', async (req, res, next) => {
|
||||
const bucket = String(req.query.bucket ?? 'monat');
|
||||
if (!BUCKETS[bucket]) return res.status(400).json({ error: 'Unbekannte Zeiteinteilung.' });
|
||||
|
||||
const from = normalizeDate(req.query.from);
|
||||
const to = normalizeDate(req.query.to);
|
||||
if (!from || !to) return res.status(400).json({ error: 'Zeitraum fehlt (erwartet JJJJ-MM-TT).' });
|
||||
if (to < from) return res.status(400).json({ error: 'Das Ende darf nicht vor dem Anfang liegen.' });
|
||||
|
||||
// `to` ist inklusive: bis 31.12. heisst bis zum Ende des 31.12.
|
||||
const toExclusive = `${to} 23:59:59`;
|
||||
|
||||
try {
|
||||
const [applicationRows] = await pool.query(
|
||||
`SELECT ${BUCKETS[bucket]('found_at')} AS bucket, COUNT(*) AS count
|
||||
FROM crm_acquisitions
|
||||
WHERE found_at BETWEEN ? AND ?
|
||||
GROUP BY bucket`,
|
||||
[from, to]
|
||||
);
|
||||
|
||||
const [historyRows] = await pool.query(
|
||||
`SELECT ${BUCKETS[bucket]('found_on')} AS bucket, SUM(applications) AS count
|
||||
FROM crm_acquisition_history
|
||||
WHERE found_on BETWEEN ? AND ?
|
||||
GROUP BY bucket`,
|
||||
[from, to]
|
||||
);
|
||||
|
||||
const [convertedRows] = await pool.query(
|
||||
`SELECT ${BUCKETS[bucket]('converted_at')} AS bucket, COUNT(*) AS count
|
||||
FROM crm_acquisitions
|
||||
WHERE converted_at IS NOT NULL AND converted_at BETWEEN ? AND ?
|
||||
GROUP BY bucket`,
|
||||
[from, toExclusive]
|
||||
);
|
||||
|
||||
const [wonRows] = await pool.query(
|
||||
`SELECT ${BUCKETS[bucket]('won_at')} AS bucket, COUNT(*) AS count
|
||||
FROM crm_opportunities
|
||||
WHERE won_at IS NOT NULL AND deleted_at IS NULL AND won_at BETWEEN ? AND ?
|
||||
GROUP BY bucket`,
|
||||
[from, toExclusive]
|
||||
);
|
||||
|
||||
// Bewerbungen je Berater - lebende Eintraege und Verlauf zusammen.
|
||||
const [consultantRows] = await pool.query(
|
||||
`SELECT consultant, SUM(count) AS count FROM (
|
||||
SELECT COALESCE(NULLIF(TRIM(consultant), ''), '') AS consultant, COUNT(*) AS count
|
||||
FROM crm_acquisitions
|
||||
WHERE found_at BETWEEN ? AND ?
|
||||
GROUP BY 1
|
||||
UNION ALL
|
||||
SELECT consultant, SUM(applications)
|
||||
FROM crm_acquisition_history
|
||||
WHERE found_on BETWEEN ? AND ?
|
||||
GROUP BY 1
|
||||
) AS beide
|
||||
GROUP BY consultant
|
||||
ORDER BY count DESC, consultant ASC`,
|
||||
[from, to, from, to]
|
||||
);
|
||||
|
||||
const live = toMap(applicationRows);
|
||||
const history = toMap(historyRows);
|
||||
const applications = { ...live };
|
||||
for (const [key, value] of Object.entries(history)) {
|
||||
applications[key] = (applications[key] ?? 0) + value;
|
||||
}
|
||||
|
||||
const sum = (map) => Object.values(map).reduce((total, value) => total + value, 0);
|
||||
const converted = toMap(convertedRows);
|
||||
const won = toMap(wonRows);
|
||||
|
||||
res.json({
|
||||
from,
|
||||
to,
|
||||
bucket,
|
||||
series: { applications, converted, won },
|
||||
totals: {
|
||||
applications: sum(applications),
|
||||
converted: sum(converted),
|
||||
won: sum(won),
|
||||
},
|
||||
by_consultant: consultantRows.map((row) => ({
|
||||
// Leerer Text heisst "kein Berater hinterlegt" - das Frontend
|
||||
// beschriftet es, damit hier kein Anzeigetext entsteht.
|
||||
consultant: row.consultant === '' ? null : row.consultant,
|
||||
applications: Number(row.count),
|
||||
})),
|
||||
});
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -310,11 +310,13 @@ router.post('/', async (req, res, next) => {
|
||||
try {
|
||||
await conn.beginTransaction();
|
||||
const [result] = await conn.query(
|
||||
// Wer direkt in 'Beauftragt' anlegt, hat gerade gewonnen - dann steht das
|
||||
// Datum sofort.
|
||||
`INSERT INTO crm_opportunities
|
||||
(title, company, description, stage, probability, daily_rate, duration_days,
|
||||
(title, company, description, stage, won_at, probability, daily_rate, duration_days,
|
||||
fixed_price, start_date, end_date, last_interaction_at, last_interaction_note,
|
||||
next_step, tags, notes, owner_id, created_by)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||
VALUES (?, ?, ?, ?, ${stage === 'Beauftragt' ? 'UTC_TIMESTAMP()' : 'NULL'}, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||
[
|
||||
title,
|
||||
emptyToNull(req.body?.company),
|
||||
@@ -387,6 +389,18 @@ router.patch('/:id', async (req, res, next) => {
|
||||
if (!STAGES.has(req.body.stage)) return res.status(400).json({ error: 'Ungültige Phase.' });
|
||||
fields.push('stage = ?');
|
||||
values.push(req.body.stage);
|
||||
|
||||
/*
|
||||
* Zeitpunkt des Gewinns mitschreiben. Der erste Wechsel nach 'Beauftragt'
|
||||
* zaehlt; ein zweites Speichern derselben Phase darf das Datum nicht nach
|
||||
* vorn schieben. Geht die Opportunity wieder heraus, wird es geleert -
|
||||
* sonst zaehlt das Dashboard einen Gewinn, den es nicht gibt.
|
||||
*/
|
||||
if (req.body.stage === 'Beauftragt' && existing.stage !== 'Beauftragt') {
|
||||
fields.push('won_at = UTC_TIMESTAMP()');
|
||||
} else if (req.body.stage !== 'Beauftragt' && existing.stage === 'Beauftragt') {
|
||||
fields.push('won_at = NULL');
|
||||
}
|
||||
}
|
||||
|
||||
if (req.body?.probability !== undefined) {
|
||||
|
||||
@@ -158,6 +158,22 @@ ALTER TABLE crm_opportunities ADD COLUMN IF NOT EXISTS fixed_price DECIMAL(12,2)
|
||||
* `deleted_by` traegt bewusst keinen Fremdschluessel: Spalten lassen sich per
|
||||
* ADD COLUMN IF NOT EXISTS idempotent nachziehen, ein Fremdschluessel nicht.
|
||||
*/
|
||||
/*
|
||||
* Zeitpunkt des Gewinns. Ohne ihn liesse sich "wie viele Projekte haben wir im
|
||||
* Mai gewonnen" nicht beantworten - die Phase allein sagt nur, wie es jetzt
|
||||
* steht. Gesetzt beim Wechsel nach 'Beauftragt', geleert beim Wechsel heraus.
|
||||
*/
|
||||
ALTER TABLE crm_opportunities ADD COLUMN IF NOT EXISTS won_at DATETIME NULL AFTER stage;
|
||||
ALTER TABLE crm_opportunities ADD INDEX IF NOT EXISTS idx_crm_opp_won (won_at);
|
||||
|
||||
/*
|
||||
* Zeitpunkt des Gewinns. Ohne ihn liesse sich "wie viele Projekte haben wir im
|
||||
* Mai gewonnen" nicht beantworten - die Phase allein sagt nur, wie es jetzt
|
||||
* steht. Gesetzt beim Wechsel nach 'Beauftragt', geleert beim Wechsel heraus.
|
||||
*/
|
||||
ALTER TABLE crm_opportunities ADD COLUMN IF NOT EXISTS won_at DATETIME NULL AFTER stage;
|
||||
ALTER TABLE crm_opportunities ADD INDEX IF NOT EXISTS idx_crm_opp_won (won_at);
|
||||
|
||||
ALTER TABLE crm_opportunities ADD COLUMN IF NOT EXISTS deleted_at DATETIME NULL AFTER created_by;
|
||||
ALTER TABLE crm_opportunities ADD COLUMN IF NOT EXISTS deleted_by INT UNSIGNED NULL AFTER deleted_at;
|
||||
ALTER TABLE crm_opportunities ADD INDEX IF NOT EXISTS idx_crm_opp_deleted (deleted_at);
|
||||
@@ -432,6 +448,40 @@ CREATE TABLE IF NOT EXISTS crm_acquisitions (
|
||||
* Der Unique-Schluessel greift ueber die Kollation utf8mb4_unicode_ci auch bei
|
||||
* abweichender Gross-/Kleinschreibung: "mail" ist neben "Mail" kein neuer Wert.
|
||||
*/
|
||||
/*
|
||||
* Verdichteter Verlauf der Akquise. Jeder Eintrag in crm_acquisitions ist eine
|
||||
* versendete Bewerbung; nach 90 Tagen wird er geloescht (siehe dort). Damit das
|
||||
* Dashboard trotzdem ueber Jahre rechnen kann, wird vor dem Loeschen genau das
|
||||
* gesichert, was die Auswertung braucht: Tag, Berater, Anzahl.
|
||||
*
|
||||
* Bewusst nur Zahlen, keine Projektdaten - "geloescht" bleibt damit auch
|
||||
* geloescht. Der Primaerschluessel erlaubt kein NULL, deshalb steht fuer "ohne
|
||||
* Berater" der leere Text.
|
||||
*/
|
||||
CREATE TABLE IF NOT EXISTS crm_acquisition_history (
|
||||
found_on DATE NOT NULL,
|
||||
consultant VARCHAR(190) NOT NULL DEFAULT '',
|
||||
applications INT UNSIGNED NOT NULL DEFAULT 0,
|
||||
PRIMARY KEY (found_on, consultant)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
/*
|
||||
* Verdichteter Verlauf der Akquise. Jeder Eintrag in crm_acquisitions ist eine
|
||||
* versendete Bewerbung; nach 90 Tagen wird er geloescht (siehe dort). Damit das
|
||||
* Dashboard trotzdem ueber Jahre rechnen kann, wird vor dem Loeschen genau das
|
||||
* gesichert, was die Auswertung braucht: Tag, Berater, Anzahl.
|
||||
*
|
||||
* Bewusst nur Zahlen, keine Projektdaten - "geloescht" bleibt damit auch
|
||||
* geloescht. Der Primaerschluessel erlaubt kein NULL, deshalb steht fuer "ohne
|
||||
* Berater" der leere Text.
|
||||
*/
|
||||
CREATE TABLE IF NOT EXISTS crm_acquisition_history (
|
||||
found_on DATE NOT NULL,
|
||||
consultant VARCHAR(190) NOT NULL DEFAULT '',
|
||||
applications INT UNSIGNED NOT NULL DEFAULT 0,
|
||||
PRIMARY KEY (found_on, consultant)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS crm_acquisition_options (
|
||||
id INT UNSIGNED NOT NULL AUTO_INCREMENT,
|
||||
field ENUM('sender','channel','consultant') NOT NULL,
|
||||
|
||||
@@ -10,6 +10,7 @@ import eventRoutes from './routes/events.js';
|
||||
import opportunityRoutes from './routes/opportunities.js';
|
||||
import acquisitionRoutes from './routes/acquisitions.js';
|
||||
import badgeRoutes from './routes/badges.js';
|
||||
import dashboardRoutes from './routes/dashboard.js';
|
||||
import scannerRoutes from './routes/scanner.js';
|
||||
import mailRoutes from './routes/mail.js';
|
||||
import { requireAuth } from './middleware/auth.js';
|
||||
@@ -54,6 +55,9 @@ app.use('/api/acquisitions', acquisitionRoutes);
|
||||
// Zahlen fuer die Seitenleiste - eine Anfrage fuer alle Zaehler.
|
||||
app.use('/api/badges', badgeRoutes);
|
||||
|
||||
// Auswertungen des Dashboards.
|
||||
app.use('/api/dashboard', dashboardRoutes);
|
||||
|
||||
// Projekt Scanner. Komplett hinter der CRM-Anmeldung - der urspruengliche
|
||||
// HTTP-Basic-Auth-Zugang des Scanners entfaellt damit.
|
||||
app.use('/api/scanner', requireAuth, scannerRoutes);
|
||||
|
||||
+6
-1
@@ -4,6 +4,7 @@ import { Header } from './components/Header';
|
||||
import { LoginScreen } from './components/LoginScreen';
|
||||
import { Leads } from './components/leads/Leads';
|
||||
import { MailPoolLeads } from './components/leads/MailPoolLeads';
|
||||
import { Dashboard } from './components/dashboard/Dashboard';
|
||||
import { Acquisitions } from './components/acquisition/Acquisitions';
|
||||
import { Opportunities } from './components/opportunities/Opportunities';
|
||||
import { OpportunityTrash } from './components/opportunities/OpportunityTrash';
|
||||
@@ -50,7 +51,7 @@ const Splash: React.FC = () => (
|
||||
);
|
||||
|
||||
/** Erster Reiter im Menue - hier startet die App. */
|
||||
const DEFAULT_VIEW: ViewState = 'Opportunities';
|
||||
const DEFAULT_VIEW: ViewState = 'Dashboard';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const { user, isLoading } = useAuth();
|
||||
@@ -160,6 +161,7 @@ const App: React.FC = () => {
|
||||
// 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>> = {
|
||||
Dashboard: 'Wie der Vertrieb läuft - Bewerbungen, Opportunities, gewonnene Projekte',
|
||||
Akquise: 'Gefundene Projekte - eintragen, prüfen, zur Opportunity machen',
|
||||
'Opportunity-Papierkorb': 'Gelöschte Opportunities - nach 90 Tagen endgültig entfernt',
|
||||
Archiv: 'Akquise-Einträge älter als 14 Tage - nach 90 Tagen werden sie gelöscht',
|
||||
@@ -216,6 +218,9 @@ const App: React.FC = () => {
|
||||
/>
|
||||
|
||||
<div className="scrollbar-slim flex-1 overflow-y-auto p-4 md:p-6">
|
||||
{currentView === 'Dashboard' && (
|
||||
<Dashboard opportunities={opportunities} events={events} isLoading={isDataLoading} />
|
||||
)}
|
||||
{currentView === 'Akquise' && <Acquisitions reload={() => loadData(true)} />}
|
||||
{currentView === 'Archiv' && (
|
||||
<Acquisitions view="archiv" reload={() => loadData(true)} />
|
||||
|
||||
@@ -62,6 +62,9 @@ const CONTACTS_GROUP: MenuGroup = {
|
||||
],
|
||||
};
|
||||
|
||||
const DASHBOARD_ICON =
|
||||
'M4 5a1 1 0 011-1h4a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm10 0a1 1 0 011-1h4a1 1 0 011 1v3a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 16a1 1 0 011-1h4a1 1 0 011 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-3zm10-4a1 1 0 011-1h4a1 1 0 011 1v7a1 1 0 01-1 1h-4a1 1 0 01-1-1v-7z';
|
||||
|
||||
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 =
|
||||
@@ -146,6 +149,7 @@ const SCANNER_GROUP: MenuGroup = {
|
||||
// Kategorien in Anzeigereihenfolge, einzelne Punkte und Gruppen gemischt.
|
||||
// Einstellungen bleibt separat am unteren Rand.
|
||||
const CATEGORY_ENTRIES: (MenuItem | MenuGroup)[] = [
|
||||
{ name: 'Dashboard', icon: DASHBOARD_ICON },
|
||||
ACQUISITION_GROUP,
|
||||
OPPORTUNITIES_GROUP,
|
||||
{
|
||||
@@ -351,8 +355,14 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
||||
}`}
|
||||
>
|
||||
{/* Logo */}
|
||||
<div
|
||||
className={`flex shrink-0 items-center border-b border-ink-100 ${
|
||||
<button
|
||||
onClick={() => {
|
||||
onViewChange('Dashboard');
|
||||
if (isMobile) onToggle();
|
||||
}}
|
||||
title="Zum Dashboard"
|
||||
aria-label="Zum Dashboard"
|
||||
className={`flex shrink-0 items-center border-b border-ink-100 transition hover:bg-ink-50 ${
|
||||
showLabels ? 'px-5 py-5' : 'justify-center px-0 py-5'
|
||||
}`}
|
||||
>
|
||||
@@ -363,7 +373,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
|
||||
p
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Kategorien */}
|
||||
<nav className="scrollbar-slim flex-1 space-y-1 overflow-y-auto overflow-x-hidden px-3 py-4">
|
||||
|
||||
@@ -0,0 +1,458 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { BarList, Panel, SeriesChart, StatCard, type SeriesPoint } from './dashboardUi';
|
||||
import { StageBadge } from '../opportunities/opportunityUi';
|
||||
import { UserAvatar } from '../ui/UserAvatar';
|
||||
import { useToast } from '../Toast';
|
||||
import { useNavigation } from '../../lib/navigation';
|
||||
import { dashboardApi, type DashboardBucket, type DashboardStats } from '../../lib/api';
|
||||
import {
|
||||
formatEuro,
|
||||
opportunityVolume,
|
||||
type CalendarEvent,
|
||||
type Opportunity,
|
||||
} from '../../types';
|
||||
|
||||
/*
|
||||
* Dashboard: was der Vertrieb wissen muss, ohne irgendwo hineinzuklicken.
|
||||
*
|
||||
* Die drei Reihen (Bewerbungen, daraus Opportunities, gewonnene Projekte) kommen
|
||||
* gerechnet aus dem Backend. Termine und die Listen zu den Phasen filtert die
|
||||
* Ansicht aus dem, was die App ohnehin geladen hat - ein zweiter Weg zu denselben
|
||||
* Daten waere doppelte Pflege.
|
||||
*/
|
||||
|
||||
interface DashboardProps {
|
||||
opportunities: Opportunity[];
|
||||
events: CalendarEvent[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
/** Zeitraum-Vorgaben. Jede bringt die Einteilung mit, die zu ihr passt. */
|
||||
const RANGES = [
|
||||
{ id: 'tage30', label: '30 Tage', bucket: 'tag' as DashboardBucket, days: 29 },
|
||||
{ id: 'monate12', label: '12 Monate', bucket: 'monat' as DashboardBucket, months: 11 },
|
||||
{ id: 'quartale8', label: '8 Quartale', bucket: 'quartal' as DashboardBucket, months: 23 },
|
||||
{ id: 'jahre5', label: '5 Jahre', bucket: 'jahr' as DashboardBucket, years: 4 },
|
||||
];
|
||||
|
||||
const BUCKETS: { id: DashboardBucket; label: string }[] = [
|
||||
{ id: 'tag', label: 'Tag' },
|
||||
{ id: 'monat', label: 'Monat' },
|
||||
{ id: 'quartal', label: 'Quartal' },
|
||||
{ id: 'jahr', label: 'Jahr' },
|
||||
];
|
||||
|
||||
const iso = (date: Date) => date.toISOString().slice(0, 10);
|
||||
|
||||
/** Anfang und Ende einer Vorgabe - `to` ist immer heute. */
|
||||
function rangeDates(range: (typeof RANGES)[number]): { from: string; to: string } {
|
||||
const to = new Date();
|
||||
const from = new Date(to);
|
||||
if (range.days !== undefined) from.setDate(from.getDate() - range.days);
|
||||
if (range.months !== undefined) from.setMonth(from.getMonth() - range.months, 1);
|
||||
if (range.years !== undefined) from.setFullYear(from.getFullYear() - range.years, 0, 1);
|
||||
return { from: iso(from), to: iso(to) };
|
||||
}
|
||||
|
||||
const MONTHS = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
|
||||
|
||||
/**
|
||||
* Alle Abschnitte zwischen zwei Daten - auch die leeren. Ohne sie waere eine
|
||||
* Woche ohne Bewerbung im Diagramm nicht zu sehen, und die Achse wuerde luegen.
|
||||
*/
|
||||
function buildAxis(from: string, to: string, bucket: DashboardBucket): { key: string; label: string }[] {
|
||||
const start = new Date(`${from}T00:00:00`);
|
||||
const end = new Date(`${to}T00:00:00`);
|
||||
const out: { key: string; label: string }[] = [];
|
||||
const guard = 400;
|
||||
|
||||
if (bucket === 'tag') {
|
||||
for (const cursor = new Date(start); cursor <= end && out.length < guard; cursor.setDate(cursor.getDate() + 1)) {
|
||||
out.push({
|
||||
key: iso(cursor),
|
||||
label: `${String(cursor.getDate()).padStart(2, '0')}.${String(cursor.getMonth() + 1).padStart(2, '0')}.`,
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
if (bucket === 'monat') {
|
||||
const cursor = new Date(start.getFullYear(), start.getMonth(), 1);
|
||||
while (cursor <= end && out.length < guard) {
|
||||
out.push({
|
||||
key: `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}`,
|
||||
label: `${MONTHS[cursor.getMonth()]} ${String(cursor.getFullYear()).slice(2)}`,
|
||||
});
|
||||
cursor.setMonth(cursor.getMonth() + 1);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
if (bucket === 'quartal') {
|
||||
const cursor = new Date(start.getFullYear(), Math.floor(start.getMonth() / 3) * 3, 1);
|
||||
while (cursor <= end && out.length < guard) {
|
||||
const quarter = Math.floor(cursor.getMonth() / 3) + 1;
|
||||
out.push({
|
||||
key: `${cursor.getFullYear()}-Q${quarter}`,
|
||||
label: `Q${quarter} ${String(cursor.getFullYear()).slice(2)}`,
|
||||
});
|
||||
cursor.setMonth(cursor.getMonth() + 3);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
for (let year = start.getFullYear(); year <= end.getFullYear() && out.length < guard; year += 1) {
|
||||
out.push({ key: String(year), label: String(year) });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/** MariaDB-DATETIME (Wandzeit) nach Date - wie in der Terminansicht. */
|
||||
function parseLocal(value: string): Date | null {
|
||||
const date = new Date(value.replace(' ', 'T'));
|
||||
return Number.isNaN(date.getTime()) ? null : date;
|
||||
}
|
||||
|
||||
function formatEventDate(event: CalendarEvent): string {
|
||||
const date = parseLocal(event.starts_at);
|
||||
if (!date) return '—';
|
||||
const day = date.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit' });
|
||||
if (event.all_day) return `${day} · ganztägig`;
|
||||
return `${day} · ${date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`;
|
||||
}
|
||||
|
||||
/** "heute", "morgen", sonst der Abstand in Tagen. */
|
||||
function relativeDay(value: string): string {
|
||||
const date = parseLocal(value);
|
||||
if (!date) return '';
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const target = new Date(date);
|
||||
target.setHours(0, 0, 0, 0);
|
||||
const days = Math.round((target.getTime() - today.getTime()) / 86_400_000);
|
||||
if (days === 0) return 'heute';
|
||||
if (days === 1) return 'morgen';
|
||||
return `in ${days} Tagen`;
|
||||
}
|
||||
|
||||
export const Dashboard: React.FC<DashboardProps> = ({ opportunities, events, isLoading }) => {
|
||||
const { addToast } = useToast();
|
||||
const { goTo } = useNavigation();
|
||||
|
||||
const [rangeId, setRangeId] = useState('monate12');
|
||||
const [bucket, setBucket] = useState<DashboardBucket>('monat');
|
||||
const [custom, setCustom] = useState<{ from: string; to: string } | null>(null);
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||
const [isStatsLoading, setIsStatsLoading] = useState(true);
|
||||
|
||||
const range = RANGES.find((entry) => entry.id === rangeId) ?? RANGES[1];
|
||||
const dates = useMemo(() => custom ?? rangeDates(range), [custom, range]);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setIsStatsLoading(true);
|
||||
try {
|
||||
setStats(await dashboardApi.stats({ ...dates, bucket }));
|
||||
} catch (err) {
|
||||
addToast(err instanceof Error ? err.message : 'Auswertung nicht abrufbar.', 'error');
|
||||
} finally {
|
||||
setIsStatsLoading(false);
|
||||
}
|
||||
}, [dates, bucket, addToast]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
const points = useMemo<SeriesPoint[]>(() => {
|
||||
if (!stats) return [];
|
||||
return buildAxis(stats.from, stats.to, stats.bucket).map((step) => ({
|
||||
key: step.key,
|
||||
label: step.label,
|
||||
applications: stats.series.applications[step.key] ?? 0,
|
||||
converted: stats.series.converted[step.key] ?? 0,
|
||||
won: stats.series.won[step.key] ?? 0,
|
||||
}));
|
||||
}, [stats]);
|
||||
|
||||
const consultantRows = useMemo(
|
||||
() =>
|
||||
(stats?.by_consultant ?? []).map((row) => ({
|
||||
label: row.consultant ?? 'Ohne Berater',
|
||||
value: row.applications,
|
||||
hint: row.consultant
|
||||
? `${row.applications} Bewerbung(en) für ${row.consultant}`
|
||||
: 'Einträge ohne hinterlegten Berater',
|
||||
})),
|
||||
[stats]
|
||||
);
|
||||
|
||||
// Anstehende Termine: alles ab jetzt, das Naechste zuerst.
|
||||
const upcoming = useMemo(() => {
|
||||
const now = Date.now();
|
||||
return events
|
||||
.filter((event) => {
|
||||
const end = parseLocal(event.ends_at) ?? parseLocal(event.starts_at);
|
||||
return end !== null && end.getTime() >= now;
|
||||
})
|
||||
.sort((a, b) => a.starts_at.localeCompare(b.starts_at))
|
||||
.slice(0, 8);
|
||||
}, [events]);
|
||||
|
||||
/** Die beiden Phasen, in denen der Kunde am Zug ist. */
|
||||
const atCustomer = useMemo(
|
||||
() =>
|
||||
opportunities
|
||||
.filter(
|
||||
(item) => item.stage === 'Kundenvorstellung' || item.stage === 'Interview Kunde'
|
||||
)
|
||||
.sort((a, b) => (b.updated_at ?? '').localeCompare(a.updated_at ?? '')),
|
||||
[opportunities]
|
||||
);
|
||||
|
||||
const totals = stats?.totals ?? { applications: 0, converted: 0, won: 0 };
|
||||
const quote = (part: number, whole: number) =>
|
||||
whole === 0 ? 'noch keine Grundlage' : `${Math.round((part / whole) * 100)} % der Bewerbungen`;
|
||||
|
||||
const periodLabel = custom
|
||||
? `${dates.from.split('-').reverse().join('.')} – ${dates.to.split('-').reverse().join('.')}`
|
||||
: range.label;
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* Steuerleiste */}
|
||||
<div className="flex flex-col gap-3 rounded-2xl border border-ink-200 bg-surface p-4 shadow-card lg:flex-row lg:items-center">
|
||||
<div className="flex flex-wrap items-center gap-1 rounded-xl border border-ink-200 p-1">
|
||||
{RANGES.map((entry) => (
|
||||
<button
|
||||
key={entry.id}
|
||||
onClick={() => {
|
||||
setRangeId(entry.id);
|
||||
setBucket(entry.bucket);
|
||||
setCustom(null);
|
||||
}}
|
||||
className={`rounded-lg px-3 py-1.5 text-sm font-bold transition ${
|
||||
!custom && rangeId === entry.id
|
||||
? 'bg-brand-500 text-white'
|
||||
: 'text-ink-500 hover:bg-brand-50 hover:text-brand-700'
|
||||
}`}
|
||||
>
|
||||
{entry.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<label className="text-[11px] font-extrabold uppercase tracking-wider text-ink-400" htmlFor="dash-from">
|
||||
von
|
||||
</label>
|
||||
<input
|
||||
id="dash-from"
|
||||
type="date"
|
||||
value={dates.from}
|
||||
max={dates.to}
|
||||
onChange={(event) => setCustom({ from: event.target.value, to: dates.to })}
|
||||
className="rounded-xl border border-ink-300 bg-ink-50 px-3 py-2 text-sm text-ink-900 outline-none transition focus:border-brand-500 focus:bg-surface"
|
||||
/>
|
||||
<label className="text-[11px] font-extrabold uppercase tracking-wider text-ink-400" htmlFor="dash-to">
|
||||
bis
|
||||
</label>
|
||||
<input
|
||||
id="dash-to"
|
||||
type="date"
|
||||
value={dates.to}
|
||||
min={dates.from}
|
||||
onChange={(event) => setCustom({ from: dates.from, to: event.target.value })}
|
||||
className="rounded-xl border border-ink-300 bg-ink-50 px-3 py-2 text-sm text-ink-900 outline-none transition focus:border-brand-500 focus:bg-surface"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 lg:ml-auto">
|
||||
<span className="text-[11px] font-extrabold uppercase tracking-wider text-ink-400">
|
||||
Einteilung
|
||||
</span>
|
||||
<select
|
||||
value={bucket}
|
||||
onChange={(event) => setBucket(event.target.value as DashboardBucket)}
|
||||
aria-label="Zeiteinteilung der Auswertung"
|
||||
className="rounded-xl border border-ink-300 bg-ink-50 px-3 py-2 text-sm font-semibold text-ink-700 outline-none transition focus:border-brand-500 focus:bg-surface"
|
||||
>
|
||||
{BUCKETS.map((entry) => (
|
||||
<option key={entry.id} value={entry.id}>
|
||||
{entry.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{isStatsLoading && (
|
||||
<span className="h-4 w-4 animate-spin rounded-full border-2 border-brand-200 border-t-brand-500" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kennzahlen */}
|
||||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<StatCard
|
||||
label="Bewerbungen"
|
||||
value={totals.applications}
|
||||
accent="border-l-sky-500"
|
||||
icon="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
|
||||
hint="Einträge in der Akquise im gewählten Zeitraum"
|
||||
footnote={`versendet · ${periodLabel}`}
|
||||
/>
|
||||
<StatCard
|
||||
label="Zu Opportunity"
|
||||
value={totals.converted}
|
||||
accent="border-l-violet-500"
|
||||
icon="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
|
||||
hint="Bewerbungen, aus denen eine Opportunity geworden ist"
|
||||
footnote={quote(totals.converted, totals.applications)}
|
||||
/>
|
||||
<StatCard
|
||||
label="Gewonnen"
|
||||
value={totals.won}
|
||||
accent="border-l-brand-500"
|
||||
icon="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
|
||||
hint="Opportunities, die in der Phase „Beauftragt“ gelandet sind"
|
||||
footnote={`Projekte · ${quote(totals.won, totals.applications)}`}
|
||||
/>
|
||||
<StatCard
|
||||
label="Beim Kunden"
|
||||
value={atCustomer.length}
|
||||
accent="border-l-amber-500"
|
||||
icon="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
hint="Opportunities in Kundenvorstellung oder Interview Kunde - jetzt, unabhängig vom Zeitraum"
|
||||
footnote="Kundenvorstellung + Interview"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Verlauf und Berater */}
|
||||
<div className="grid gap-5 xl:grid-cols-[2fr_1fr]">
|
||||
<Panel
|
||||
title="Verlauf"
|
||||
hint={`Bewerbungen, daraus entstandene Opportunities und gewonnene Projekte · ${periodLabel}`}
|
||||
>
|
||||
{points.length === 0 ? (
|
||||
<p className="rounded-xl border border-dashed border-ink-200 px-4 py-12 text-center text-xs font-semibold text-ink-400">
|
||||
Für diesen Zeitraum gibt es noch keine Zahlen.
|
||||
</p>
|
||||
) : (
|
||||
<SeriesChart points={points} />
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
<Panel
|
||||
title="Bewerbungen je Berater"
|
||||
hint={`Wer im Zeitraum ${periodLabel} vorgeschlagen wurde`}
|
||||
>
|
||||
<BarList
|
||||
rows={consultantRows}
|
||||
color="#0284c7"
|
||||
emptyText="Im gewählten Zeitraum wurde noch keine Bewerbung eingetragen."
|
||||
/>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
{/* Termine und Opportunities beim Kunden */}
|
||||
<div className="grid gap-5 xl:grid-cols-2">
|
||||
<Panel
|
||||
title="Anstehende Interviews"
|
||||
hint="Die nächsten Termine aus dem gemeinsamen Kalender"
|
||||
action={
|
||||
<button
|
||||
onClick={() => goTo('Interviews')}
|
||||
className="shrink-0 rounded-xl border border-ink-200 px-3 py-1.5 text-xs font-bold text-ink-600 transition hover:border-brand-300 hover:text-brand-700"
|
||||
>
|
||||
Alle Termine
|
||||
</button>
|
||||
}
|
||||
>
|
||||
{isLoading && upcoming.length === 0 ? (
|
||||
<p className="py-8 text-center text-xs font-semibold text-ink-400">Lade...</p>
|
||||
) : upcoming.length === 0 ? (
|
||||
<p className="rounded-xl border border-dashed border-ink-200 px-4 py-8 text-center text-xs font-semibold text-ink-400">
|
||||
Nichts geplant.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{upcoming.map((event) => (
|
||||
<li
|
||||
key={event.id}
|
||||
className="flex items-center gap-3 rounded-xl border border-ink-200 bg-ink-50/50 px-3 py-2.5"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-bold text-ink-900">{event.title}</p>
|
||||
<p className="truncate text-xs text-ink-400">
|
||||
{formatEventDate(event)}
|
||||
{event.location ? ` · ${event.location}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<span className="shrink-0 rounded-md border border-brand-200 bg-brand-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-brand-700">
|
||||
{relativeDay(event.starts_at)}
|
||||
</span>
|
||||
{event.participants.length > 0 && (
|
||||
<div className="flex shrink-0 -space-x-2">
|
||||
{event.participants.slice(0, 3).map((person) => (
|
||||
<UserAvatar key={person.id} user={person} size={24} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Panel>
|
||||
|
||||
<Panel
|
||||
title="Beim Kunden"
|
||||
hint="Opportunities in Kundenvorstellung und Interview Kunde"
|
||||
action={
|
||||
<button
|
||||
onClick={() => goTo('Opportunities')}
|
||||
className="shrink-0 rounded-xl border border-ink-200 px-3 py-1.5 text-xs font-bold text-ink-600 transition hover:border-brand-300 hover:text-brand-700"
|
||||
>
|
||||
Zur Pipeline
|
||||
</button>
|
||||
}
|
||||
>
|
||||
{atCustomer.length === 0 ? (
|
||||
<p className="rounded-xl border border-dashed border-ink-200 px-4 py-8 text-center text-xs font-semibold text-ink-400">
|
||||
Gerade liegt nichts beim Kunden.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{atCustomer.map((opportunity) => (
|
||||
<li
|
||||
key={opportunity.id}
|
||||
className="flex flex-wrap items-center gap-3 rounded-xl border border-ink-200 bg-ink-50/50 px-3 py-2.5"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-bold text-ink-900">{opportunity.title}</p>
|
||||
<p className="truncate text-xs text-ink-400">
|
||||
{opportunity.company || 'Ohne Firma'}
|
||||
{opportunity.contacts.length > 0 &&
|
||||
` · ${opportunity.contacts.length} Ansprechpartner`}
|
||||
</p>
|
||||
</div>
|
||||
<StageBadge stage={opportunity.stage} />
|
||||
<span className="shrink-0 text-sm font-extrabold tabular-nums text-ink-800">
|
||||
{formatEuro(opportunityVolume(opportunity))}
|
||||
</span>
|
||||
{opportunity.owner_id !== null && (
|
||||
<UserAvatar
|
||||
user={{
|
||||
id: opportunity.owner_id,
|
||||
name: opportunity.owner_name ?? '?',
|
||||
color: opportunity.owner_color ?? null,
|
||||
avatar: opportunity.owner_avatar ?? null,
|
||||
}}
|
||||
size={24}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,298 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
/*
|
||||
* Bausteine des Dashboards: Kachel mit hochlaufender Zahl, Saeulendiagramm und
|
||||
* Balkenliste. Alles von Hand als SVG bzw. mit Tailwind-Uebergaengen - eine
|
||||
* Diagrammbibliothek waere fuer drei Darstellungen mehr Abhaengigkeit als Nutzen,
|
||||
* und die Farben kommen so aus denselben Design-Tokens wie der Rest.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Zaehlt eine Zahl in ~700 ms hoch. Bewusst ueber requestAnimationFrame und nicht
|
||||
* per Intervall: das laeuft im Bildtakt und haelt an, wenn der Reiter im
|
||||
* Hintergrund liegt.
|
||||
*
|
||||
* Wer Bewegung im System abgeschaltet hat, bekommt sofort den Endwert.
|
||||
*/
|
||||
export function useCountUp(target: number, duration = 700): number {
|
||||
const [value, setValue] = useState(0);
|
||||
const fromRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
const reduce =
|
||||
typeof window !== 'undefined' &&
|
||||
window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
|
||||
if (reduce || duration <= 0) {
|
||||
fromRef.current = target;
|
||||
setValue(target);
|
||||
return;
|
||||
}
|
||||
|
||||
const from = fromRef.current;
|
||||
const start = performance.now();
|
||||
let frame = 0;
|
||||
|
||||
const step = (now: number) => {
|
||||
const progress = Math.min(1, (now - start) / duration);
|
||||
// Sanft auslaufen; linear wirkt bei Zahlen mechanisch.
|
||||
const eased = 1 - (1 - progress) ** 3;
|
||||
setValue(Math.round(from + (target - from) * eased));
|
||||
if (progress < 1) frame = requestAnimationFrame(step);
|
||||
else fromRef.current = target;
|
||||
};
|
||||
|
||||
frame = requestAnimationFrame(step);
|
||||
return () => cancelAnimationFrame(frame);
|
||||
}, [target, duration]);
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
interface StatCardProps {
|
||||
label: string;
|
||||
value: number;
|
||||
hint: string;
|
||||
/** Tailwind-Klassen fuer den Akzent - Rand links und Zahl. */
|
||||
accent: string;
|
||||
icon: string;
|
||||
/** Zweite Zahl unter dem Wert, z. B. eine Quote. */
|
||||
footnote?: string;
|
||||
}
|
||||
|
||||
export const StatCard: React.FC<StatCardProps> = ({
|
||||
label,
|
||||
value,
|
||||
hint,
|
||||
accent,
|
||||
icon,
|
||||
footnote,
|
||||
}) => {
|
||||
const shown = useCountUp(value);
|
||||
|
||||
return (
|
||||
<section
|
||||
title={hint}
|
||||
className={`rounded-2xl border border-ink-200 border-l-4 bg-surface p-5 shadow-card transition hover:shadow-lift ${accent}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<p className="text-[11px] font-extrabold uppercase tracking-[0.14em] text-ink-400">
|
||||
{label}
|
||||
</p>
|
||||
<svg className="h-5 w-5 shrink-0 text-ink-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d={icon} />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="mt-2 text-3xl font-extrabold tabular-nums text-ink-900">
|
||||
{shown.toLocaleString('de-DE')}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-ink-400">{footnote ?? hint}</p>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export interface SeriesPoint {
|
||||
key: string;
|
||||
label: string;
|
||||
applications: number;
|
||||
converted: number;
|
||||
won: number;
|
||||
}
|
||||
|
||||
/** Beschriftung, Farbe und Erklaerung der drei Reihen - einmal definiert. */
|
||||
export const SERIES = [
|
||||
{
|
||||
id: 'applications' as const,
|
||||
label: 'Bewerbungen',
|
||||
color: '#0284c7',
|
||||
hint: 'Einträge in der Akquise - jeder Eintrag ist eine versendete Bewerbung',
|
||||
},
|
||||
{
|
||||
id: 'converted' as const,
|
||||
label: 'Zu Opportunity',
|
||||
color: '#7c3aed',
|
||||
hint: 'Bewerbungen, aus denen eine Opportunity geworden ist',
|
||||
},
|
||||
{
|
||||
id: 'won' as const,
|
||||
label: 'Gewonnen',
|
||||
color: '#6ba04a',
|
||||
hint: 'Opportunities in der Phase „Beauftragt“',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Saeulendiagramm mit drei Reihen je Zeitabschnitt.
|
||||
*
|
||||
* Die Saeulen wachsen beim Aufbau und bei jedem Wechsel des Zeitraums von unten
|
||||
* heraus - das macht sichtbar, dass sich die Zahlen geaendert haben. Umgesetzt
|
||||
* ueber die Hoehe plus `transition`, nicht ueber ein Keyframe: so bewegt sich auch
|
||||
* der Wechsel von einem Wert zum naechsten.
|
||||
*/
|
||||
export const SeriesChart: React.FC<{ points: SeriesPoint[] }> = ({ points }) => {
|
||||
const [grown, setGrown] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setGrown(false);
|
||||
const timer = setTimeout(() => setGrown(true), 30);
|
||||
return () => clearTimeout(timer);
|
||||
}, [points]);
|
||||
|
||||
const max = Math.max(1, ...points.flatMap((p) => [p.applications, p.converted, p.won]));
|
||||
// Runde Obergrenze, damit die Hilfslinien lesbare Werte tragen.
|
||||
const step = Math.max(1, Math.ceil(max / 4));
|
||||
const top = step * 4;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-4 flex flex-wrap items-center gap-4">
|
||||
{SERIES.map((series) => (
|
||||
<span key={series.id} className="flex items-center gap-2 text-xs font-bold text-ink-600" title={series.hint}>
|
||||
<span className="h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: series.color }} />
|
||||
{series.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="scrollbar-slim overflow-x-auto">
|
||||
<div className="flex" style={{ minWidth: `${Math.max(560, points.length * 74)}px` }}>
|
||||
{/* Werteachse */}
|
||||
<div className="relative w-10 shrink-0" style={{ height: '260px' }}>
|
||||
{[4, 3, 2, 1, 0].map((line) => (
|
||||
<span
|
||||
key={line}
|
||||
className="absolute right-1 -translate-y-1/2 text-[10px] font-bold tabular-nums text-ink-400"
|
||||
style={{ top: `${((4 - line) / 4) * 100}%` }}
|
||||
>
|
||||
{step * line}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative flex-1">
|
||||
{/* Hilfslinien */}
|
||||
<div className="absolute inset-x-0 top-0" style={{ height: '260px' }}>
|
||||
{[0, 1, 2, 3, 4].map((line) => (
|
||||
<div
|
||||
key={line}
|
||||
className={`absolute inset-x-0 border-t ${
|
||||
line === 4 ? 'border-ink-300' : 'border-ink-100'
|
||||
}`}
|
||||
style={{ top: `${(line / 4) * 100}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-end gap-2" style={{ height: '260px' }}>
|
||||
{points.map((point) => (
|
||||
<div key={point.key} className="flex h-full min-w-0 flex-1 items-end justify-center gap-1">
|
||||
{SERIES.map((series) => {
|
||||
const value = point[series.id];
|
||||
const height = grown ? (value / top) * 100 : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={series.id}
|
||||
title={`${point.label} · ${series.label}: ${value}`}
|
||||
className="relative flex w-full max-w-[16px] flex-1 justify-center rounded-t-sm transition-all duration-700 ease-out"
|
||||
style={{
|
||||
height: `${height}%`,
|
||||
minHeight: value > 0 ? '3px' : '0',
|
||||
backgroundColor: series.color,
|
||||
opacity: value > 0 ? 1 : 0.15,
|
||||
}}
|
||||
>
|
||||
{value > 0 && (
|
||||
<span className="absolute -top-5 text-[10px] font-extrabold tabular-nums text-ink-500">
|
||||
{value}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex gap-2">
|
||||
{points.map((point) => (
|
||||
<p
|
||||
key={point.key}
|
||||
className="min-w-0 flex-1 truncate text-center text-[10px] font-bold text-ink-400"
|
||||
title={point.label}
|
||||
>
|
||||
{point.label}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/** Waagerechte Balken - fuer die Bewerbungen je Berater. */
|
||||
export const BarList: React.FC<{
|
||||
rows: { label: string; value: number; hint?: string }[];
|
||||
color: string;
|
||||
emptyText: string;
|
||||
}> = ({ rows, color, emptyText }) => {
|
||||
const [grown, setGrown] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setGrown(false);
|
||||
const timer = setTimeout(() => setGrown(true), 30);
|
||||
return () => clearTimeout(timer);
|
||||
}, [rows]);
|
||||
|
||||
if (rows.length === 0) {
|
||||
return (
|
||||
<p className="rounded-xl border border-dashed border-ink-200 px-4 py-8 text-center text-xs font-semibold text-ink-400">
|
||||
{emptyText}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
const max = Math.max(1, ...rows.map((row) => row.value));
|
||||
|
||||
return (
|
||||
<ul className="space-y-2.5">
|
||||
{rows.map((row) => (
|
||||
<li key={row.label} title={row.hint}>
|
||||
<div className="mb-1 flex items-baseline justify-between gap-3">
|
||||
<span className="min-w-0 truncate text-sm font-bold text-ink-800">{row.label}</span>
|
||||
<span className="shrink-0 text-sm font-extrabold tabular-nums text-ink-900">
|
||||
{row.value.toLocaleString('de-DE')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-ink-100">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-700 ease-out"
|
||||
style={{ width: grown ? `${(row.value / max) * 100}%` : '0%', backgroundColor: color }}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
/** Rahmen fuer die Abschnitte des Dashboards. */
|
||||
export const Panel: React.FC<{
|
||||
title: string;
|
||||
hint?: string;
|
||||
action?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}> = ({ title, hint, action, children, className = '' }) => (
|
||||
<section className={`rounded-2xl border border-ink-200 bg-surface p-5 shadow-card ${className}`}>
|
||||
<div className="mb-4 flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-base text-ink-900">{title}</h3>
|
||||
{hint && <p className="mt-0.5 text-xs text-ink-400">{hint}</p>}
|
||||
</div>
|
||||
{action}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
@@ -209,6 +209,35 @@ export const opportunitiesApi = {
|
||||
request<{ ok: true; purged: number }>('/opportunities/trash/empty', { method: 'POST' }),
|
||||
};
|
||||
|
||||
// ---------- Dashboard ----------
|
||||
|
||||
/** Zeiteinteilung der Auswertung. */
|
||||
export type DashboardBucket = 'tag' | 'monat' | 'quartal' | 'jahr';
|
||||
|
||||
/**
|
||||
* Zahlen des Dashboards. Die Reihen kommen als Zuordnung Zeitabschnitt -> Anzahl;
|
||||
* die Achse baut die Ansicht selbst, damit auch leere Abschnitte erscheinen.
|
||||
*/
|
||||
export interface DashboardStats {
|
||||
from: string;
|
||||
to: string;
|
||||
bucket: DashboardBucket;
|
||||
series: {
|
||||
applications: Record<string, number>;
|
||||
converted: Record<string, number>;
|
||||
won: Record<string, number>;
|
||||
};
|
||||
totals: { applications: number; converted: number; won: number };
|
||||
by_consultant: { consultant: string | null; applications: number }[];
|
||||
}
|
||||
|
||||
export const dashboardApi = {
|
||||
stats: (params: { from: string; to: string; bucket: DashboardBucket }) =>
|
||||
request<DashboardStats>(
|
||||
`/dashboard?from=${params.from}&to=${params.to}&bucket=${params.bucket}`
|
||||
),
|
||||
};
|
||||
|
||||
// ---------- Zaehler der Seitenleiste ----------
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
export type ViewState =
|
||||
| 'Dashboard'
|
||||
| 'Akquise'
|
||||
| 'Archiv'
|
||||
| 'Opportunities'
|
||||
@@ -274,6 +275,8 @@ export interface Opportunity {
|
||||
notes: string | null;
|
||||
owner_id: number | null;
|
||||
created_by: number | null;
|
||||
/** Zeitpunkt des Wechsels nach "Beauftragt" - Grundlage der Gewinn-Auswertung. */
|
||||
won_at: string | null;
|
||||
/** Gesetzt = liegt im Papierkorb; nach 90 Tagen wird sie dort geloescht. */
|
||||
deleted_at: string | null;
|
||||
deleted_by: number | null;
|
||||
|
||||
Reference in New Issue
Block a user