Dashboard

DevFlow bietet zwei Dashboard-Ansichten: ein Persoenliches Dashboard fuer individuelle Produktivitaet und ein Projekt-Dashboard fuer teamweite Einblicke. Beide bieten interaktive Charts, KPI-Sparklines und Echtzeit-Updates.

Persoenliches Dashboard

Das Persoenliche Dashboard ist das Erste, was du siehst, wenn du DevFlow oeffnest. Es beantwortet: “Wie effektiv bin ich? Wie entwickle ich mich? Wohin geht die Reise?”

Begruessung & Perioden-Umschalter

Der Header begruesst dich mit Namen und einer tageszeitabhaengigen Nachricht (Good morning / Good afternoon / Good evening) und zeigt deine aktiven Flows. Nutze den Perioden-Umschalter (Week / Month / Quarter) oben rechts, um den Zeitraum fuer alle Sektionen zu aendern. Die gewaehlte Periode bleibt in der URL erhalten.

KPI-Karten

Drei Kennzahlen mit Sparklines der letzten 7 Perioden:

KPI	Was es zeigt
Flows Completed	Anzahl der im Zeitraum abgeschlossenen Flows
Completion Rate	Abgeschlossene vs. aktive Flows (%)
Avg Cycle Time	Durchschnittliche Tage von Flow-Erstellung bis Abschluss

Jede Karte enthaelt einen Aenderungsindikator im Vergleich zur Vorperiode (gruener Pfeil nach oben = Verbesserung, roter Pfeil nach unten = Rueckgang).

Flow Velocity

Eine Trendlinie mit dem gleitenden Durchschnitt abgeschlossener Flows pro Woche ueber die letzten 8 Perioden.

Aktive Projekte Seitenleiste

Listet deine aktiven Projekte sortiert nach offenen Flows, jeweils mit:

• Projektname mit Farb-Avatar
• Anzahl offener Flows und aktuelle Status-Verteilung

Klicke auf ein Projekt, um direkt zum Projekt-Dashboard zu navigieren.

Flow-Karten

Der Inhalt aendert sich je nach Periode:

• Week: Deine aktuell aktiven Flows
• Month / Quarter: Kuerzlich abgeschlossene Flows

Jede Karte zeigt Flow-ID, Status-Badge, Titel und Projektname.

---

Projekt-Dashboard

Das Projekt-Dashboard bietet eine teamweite Ansicht fuer jedes Projekt. Oeffne es durch Klick auf ein Projekt in der Seitennavigation. Es beantwortet: “Wie performt mein Team? Wo stehen wir bei den Releases? Wer macht was?”

Projekt-Header

Zeigt das Projekt-Logo (oder Initialen), Projektname, Anzahl der Teammitglieder und aktiven Release-Namen. Der Perioden-Umschalter (Week / Month / Quarter) funktioniert wie beim Persoenlichen Dashboard.

KPI-Karten

Drei teamweite Kennzahlen mit Sparklines:

KPI	Was es zeigt
Flows Completed	Teamweit abgeschlossene Flows
Completion Rate	Team-Abschlussrate fuer den Zeitraum
Avg Cycle Time	Durchschnittliche Tage bis zum Flow-Abschluss

Flow Pipeline

Ein gestapeltes Balkendiagramm, das zeigt, wie viele Flows sich in jedem Status befinden (Idea, Planning, Approval, Ready, In Progress, Review, Done).

Release Pipeline Seitenleiste

Zeigt bis zu 4 aktive Releases mit:

• Release-Name und Status-Badge (Preparing / In Progress / Released)
• Fortschrittsbalken mit abgeschlossenen vs. gesamt Flows
• Klick navigiert zur Release-Detailseite

Releases im Status “brainstorm” werden ausgeschlossen.

Team-Mitglieder-Grid

Ein 4-Spalten-Raster, das jedes Teammitglied zeigt mit:

• Avatar und Name
• Rolle im Projekt
• Abgeschlossene Flows im Zeitraum
• Aktueller aktiver Flow (klickbar)

Mitglieder sind nach abgeschlossenen Flows sortiert.

Untere Reihe

Zwei Panels in der unteren Reihe:

• Agent Activity — Vier Kennzahlen: Agent-Sessions, Agent-Gesamtstunden, Durchschnitt pro Flow und Erfolgsrate
• Action Items — Ausstehende Genehmigungen und Reviews, die Aufmerksamkeit erfordern, sortiert nach Wartezeit (aelteste zuerst)

---

Echtzeit-Updates

Beide Dashboards aktualisieren sich automatisch ueber Socket.IO-Events. Wenn ein Flow seinen Status aendert oder ein Release aktualisiert wird, aktualisiert sich das Dashboard innerhalb von 500ms — kein Seitenneuladen noetig.

Leere Zustaende

• Keine Flows: Flow-bezogene Sektionen werden ausgeblendet oder zeigen Platzhaltertext, KPIs zeigen 0
• Keine Releases: Release-Seitenleiste zeigt “No releases yet”
• Keine Agent-Sessions: Agent Usage zeigt 0%, Agent Stats zeigen Striche
• Neuer User / keine Vorperiode: Aenderungsindikatoren zeigen ”---” statt Pfeilen