Dashboard
DevFlow provides two dashboard views: a Personal Dashboard for individual productivity, and a Project Dashboard for team-level insights. Both feature interactive charts, KPI sparklines, and real-time updates.
Personal Dashboard
Section titled “Personal Dashboard”The Personal Dashboard is the first thing you see when you open DevFlow. It answers: “How effective am I? How am I developing? Where am I heading?”
Greeting & Period Toggle
Section titled “Greeting & Period Toggle”The header greets you by name with a time-of-day message (Good morning / Good afternoon / Good evening) and shows your active flow count. Use the Period Toggle (Week / Month / Quarter) in the top right to change the time range for all sections. The selected period persists in the URL.
KPI Cards
Section titled “KPI Cards”Four key metrics with sparklines showing your last 7 periods:
| KPI | What It Shows |
|---|---|
| Hours Tracked | Total hours from time entries, timer sessions, and time blocks |
| Flows Completed | Number of flows marked as done in the period |
| Completion Rate | Completed flows vs. active flows (%) |
| Avg Cycle Time | Average days from flow creation to completion |
Each card includes a change indicator comparing to the previous period (green arrow up = improvement, red arrow down = decline).
Activity Chart
Section titled “Activity Chart”An area chart showing your hours over the period, split into Manual (copper) and Agent-assisted (blue) hours. The X-axis adapts to the selected period:
- Week: Daily (Mon—Sun)
- Month: Weekly (Week 1—4)
- Quarter: Weekly (W1—W12)
Active Projects Sidebar
Section titled “Active Projects Sidebar”Lists your active projects sorted by hours, each showing:
- Project name with color avatar
- Open flows count and current state distribution
- Hours tracked in the current period
Click any project to navigate directly to its Project Dashboard.
Flow Cards
Section titled “Flow Cards”Content changes per period:
- Week: Your currently active flows
- Month: Recently completed flows
- Quarter: Top flows by hours invested
Each card shows the flow ID, status badge, title, project name, and total hours.
Bottom Charts
Section titled “Bottom Charts”Three additional visualizations:
- Hours by Project (donut chart) — Where your time goes
- Hours by Period (bar chart) — Daily or weekly hour distribution
- Flow Velocity (trend line) — Rolling average of flows completed per week
Project Dashboard
Section titled “Project Dashboard”The Project Dashboard provides a team-level view for each project. Access it by clicking any project in the sidebar navigation. It answers: “How is my team performing? Where are we on releases? Who is doing what?”
Project Header
Section titled “Project Header”Shows the project logo (or initials), project name, team member count, and active release name. The Period Toggle (Week / Month / Quarter) works the same as on the Personal Dashboard.
KPI Cards
Section titled “KPI Cards”Five team-level metrics with sparklines:
| KPI | What It Shows |
|---|---|
| Team Hours | Combined hours of all project members |
| Flows Completed | Flows completed across the team |
| Completion Rate | Team completion rate for the period |
| Avg Cycle Time | Average days to complete a flow |
| Agent Usage | Percentage of hours that were agent-assisted |
Team Activity Chart
Section titled “Team Activity Chart”An area chart showing the team’s combined hours, split into Manual and Agent-assisted hours. Same period-adaptive X-axis as the Personal Dashboard.
Release Pipeline Sidebar
Section titled “Release Pipeline Sidebar”Shows up to 4 active releases with:
- Release name and status badge (Preparing / In Progress / Released)
- Progress bar showing completed vs. total flows
- Click to navigate to the release detail page
Releases in “brainstorm” status are excluded.
Team Member Grid
Section titled “Team Member Grid”A 4-column grid showing each team member with:
- Avatar and name
- Role in the project
- Hours tracked and flows completed in the period
- Current active flow (clickable)
- Working indicator — A green pulsing dot when the member has a running timer
Members who are currently working appear first, sorted by hours.
Bottom Row
Section titled “Bottom Row”Three panels across the bottom:
- Flow Pipeline — A stacked bar chart showing how many flows are in each state (Idea, Planning, Approval, Ready, In Progress, Review, Done)
- Agent Activity — Four metrics: agent sessions count, total agent hours, average hours per flow, and success rate
- Action Items — Pending approvals and reviews that need attention, sorted by waiting time (oldest first)
Real-Time Updates
Section titled “Real-Time Updates”Both dashboards refresh automatically via Socket.IO events. When a flow changes state, someone logs time, or a release is updated, the dashboard updates within 500ms — no page reload needed.
Empty States
Section titled “Empty States”- No time tracked: Charts show empty state, KPIs show 0
- No flows: Flow-related sections are hidden or show placeholder text
- No releases: Release sidebar shows “No releases yet”
- No agent sessions: Agent Usage shows 0%, Agent Stats show dashes
- New user / no previous period: Change indicators show ”---” instead of arrows