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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „KPI-Karten“Vier Kennzahlen mit Sparklines der letzten 7 Perioden:
| KPI | Was es zeigt |
|---|---|
| Hours Tracked | Gesamtstunden aus Zeiteintraegen, Timer-Sessions und Zeitbloecken |
| 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).
Aktivitaets-Chart
Abschnitt betitelt „Aktivitaets-Chart“Ein Flaechendiagramm, das deine Stunden ueber den Zeitraum zeigt, aufgeteilt in Manuelle (Kupfer) und Agent-unterstuetzte (Blau) Stunden. Die X-Achse passt sich der gewaehlten Periode an:
- Week: Taeglich (Mo—So)
- Month: Woechentlich (Woche 1—4)
- Quarter: Woechentlich (W1—W12)
Aktive Projekte Seitenleiste
Abschnitt betitelt „Aktive Projekte Seitenleiste“Listet deine aktiven Projekte sortiert nach Stunden, jeweils mit:
- Projektname mit Farb-Avatar
- Anzahl offener Flows und aktuelle Status-Verteilung
- Erfasste Stunden im aktuellen Zeitraum
Klicke auf ein Projekt, um direkt zum Projekt-Dashboard zu navigieren.
Flow-Karten
Abschnitt betitelt „Flow-Karten“Der Inhalt aendert sich je nach Periode:
- Week: Deine aktuell aktiven Flows
- Month: Kuerzlich abgeschlossene Flows
- Quarter: Top-Flows nach investierten Stunden
Jede Karte zeigt Flow-ID, Status-Badge, Titel, Projektname und Gesamtstunden.
Untere Charts
Abschnitt betitelt „Untere Charts“Drei zusaetzliche Visualisierungen:
- Hours by Project (Donut-Chart) — Wohin deine Zeit fliesst
- Hours by Period (Balken-Chart) — Taegliche oder woechentliche Stundenverteilung
- Flow Velocity (Trendlinie) — Gleitender Durchschnitt abgeschlossener Flows pro Woche
Projekt-Dashboard
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „KPI-Karten“Fuenf teamweite Kennzahlen mit Sparklines:
| KPI | Was es zeigt |
|---|---|
| Team Hours | Kombinierte Stunden aller Projektmitglieder |
| Flows Completed | Teamweit abgeschlossene Flows |
| Completion Rate | Team-Abschlussrate fuer den Zeitraum |
| Avg Cycle Time | Durchschnittliche Tage bis zum Flow-Abschluss |
| Agent Usage | Prozentsatz der agent-unterstuetzten Stunden |
Team-Aktivitaets-Chart
Abschnitt betitelt „Team-Aktivitaets-Chart“Ein Flaechendiagramm, das die kombinierten Team-Stunden zeigt, aufgeteilt in Manuelle und Agent-unterstuetzte Stunden. Gleiche periodenabhangige X-Achse wie beim Persoenlichen Dashboard.
Release Pipeline Seitenleiste
Abschnitt betitelt „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
Abschnitt betitelt „Team-Mitglieder-Grid“Ein 4-Spalten-Raster, das jedes Teammitglied zeigt mit:
- Avatar und Name
- Rolle im Projekt
- Erfasste Stunden und abgeschlossene Flows im Zeitraum
- Aktueller aktiver Flow (klickbar)
- Arbeitsindikator — Ein gruener pulsierender Punkt, wenn das Mitglied einen laufenden Timer hat
Mitglieder, die gerade arbeiten, erscheinen zuerst, sortiert nach Stunden.
Untere Reihe
Abschnitt betitelt „Untere Reihe“Drei Panels in der unteren Reihe:
- Flow Pipeline — Ein gestapeltes Balkendiagramm, das zeigt, wie viele Flows sich in jedem Status befinden (Idea, Planning, Approval, Ready, In Progress, Review, Done)
- 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
Abschnitt betitelt „Echtzeit-Updates“Beide Dashboards aktualisieren sich automatisch ueber Socket.IO-Events. Wenn ein Flow seinen Status aendert, jemand Zeit erfasst oder ein Release aktualisiert wird, aktualisiert sich das Dashboard innerhalb von 500ms — kein Seitenneuladen noetig.
Leere Zustaende
Abschnitt betitelt „Leere Zustaende“- Keine Zeit erfasst: Charts zeigen leeren Zustand, KPIs zeigen 0
- Keine Flows: Flow-bezogene Sektionen werden ausgeblendet oder zeigen Platzhaltertext
- 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