#19 - feat: DORA dashboard — cross-project board rollup - forgejo_admin/pal-e-docs-app

### Lineage `plan-pal-e-docs` → Phase F4 (`phase-pal-e-docs-dora-dashboard`) ### Repo `forgejo_admin/pal-e-app` ### User Story As a platform operator I want a dashboard showing cross-project status, items needing attention, and deployment frequency So that I can see the health of all projects at a glance without checking each board individually ### Context With 7+ boards across 10 projects, checking status means visiting each board individually. The DORA thesis is: the board IS the DORA dashboard — every column transition is a measurement point. This phase makes those metrics visible. Board data is available via: - `GET /boards` — all boards with `item_counts` - `GET /boards/{slug}/items` — all items with `column`, `item_type`, `created_at`, `updated_at` - `GET /boards/backlog/items` — global backlog across all boards The Phase F2 board filtering (PR #17) already has patterns for summary cards, column distribution bars, and type breakdowns that can be reused. ### File Targets Files to create: - `src/routes/dashboard/+page.svelte` — dashboard page - `src/routes/dashboard/+page.server.ts` — fetch all boards + items Files to modify: - `src/routes/+layout.svelte` — add "Dashboard" link to nav bar - `src/lib/api.ts` — add any needed API functions (may need `getAllBoardItems()` or similar) Files NOT to touch: - `src/routes/boards/` — board pages themselves - `src/routes/search/` — search pages - `src/lib/components/blocks/` — block renderers ### Acceptance Criteria - [ ] New route `/dashboard` accessible from nav bar - [ ] Cross-project board rollup: total items across all boards, broken down by column - [ ] Visual column distribution bar (reuse pattern from PR #17 project mini-board) - [ ] "Needs attention" section: items in `needs_approval` column, items in `in_progress` for 3+ days - [ ] Per-project cards: project name, board name, column distribution mini-bar, item count, link to full board - [ ] Deployment frequency: count of items moved to `done` (based on board item counts in done column, grouped by project) - [ ] Each project card is clickable → navigates to full board page - [ ] Responsive: cards stack on mobile, grid on desktop ### Test Expectations - [ ] Manual test: navigate to `/dashboard`, see all active boards with rollup stats - [ ] Manual test: verify "needs attention" shows items in needs_approval column - [ ] Manual test: verify per-project cards show correct column distribution - [ ] Manual test: click a project card, navigate to its board ### Constraints - Dark theme: `#0a0a14` background, `#0e0e18` card bg, `#1a1a2e` borders, `#e94560` accent - Reuse `typeColor()` and column color patterns from PR #17 - Column distribution bars should use consistent colors across dashboard and board pages - "Needs attention" items should be visually prominent (accent color highlight) - All data fetched server-side in `+page.server.ts` — multiple parallel API calls - Keep the dashboard lightweight — don't fetch all board items if board-level `item_counts` suffice for the rollup - The `item_counts` field on `Board` response has counts by `item_type` — use this for type breakdown without fetching all items - Only fetch full items for boards that have `needs_approval` items (optimization) ### Checklist - [ ] PR opened with `Closes #17` - [ ] No unrelated changes - [ ] Dark theme consistent - [ ] Responsive layout works on mobile - [ ] Nav bar includes Dashboard link ### Related - `phase-pal-e-docs-dora-dashboard` — plan phase in pal-e-docs - `plan-pal-e-docs` — parent plan - `project-dora-thesis` — DORA = Observability + Kanban

forgejo_admin commented

2026-03-14 23:14:37 +00:00

Owner

Lineage

plan-pal-e-docs → Phase F4 (phase-pal-e-docs-dora-dashboard)

Repo

forgejo_admin/pal-e-app

User Story

As a platform operator
I want a dashboard showing cross-project status, items needing attention, and deployment frequency
So that I can see the health of all projects at a glance without checking each board individually

Context

With 7+ boards across 10 projects, checking status means visiting each board individually. The DORA thesis is: the board IS the DORA dashboard — every column transition is a measurement point. This phase makes those metrics visible.

Board data is available via:

GET /boards — all boards with item_counts
GET /boards/{slug}/items — all items with column, item_type, created_at, updated_at
GET /boards/backlog/items — global backlog across all boards

The Phase F2 board filtering (PR #17) already has patterns for summary cards, column distribution bars, and type breakdowns that can be reused.

File Targets

Files to create:

src/routes/dashboard/+page.svelte — dashboard page
src/routes/dashboard/+page.server.ts — fetch all boards + items

Files to modify:

src/routes/+layout.svelte — add "Dashboard" link to nav bar
src/lib/api.ts — add any needed API functions (may need getAllBoardItems() or similar)

Files NOT to touch:

src/routes/boards/ — board pages themselves
src/routes/search/ — search pages
src/lib/components/blocks/ — block renderers

Acceptance Criteria

New route /dashboard accessible from nav bar
Cross-project board rollup: total items across all boards, broken down by column
Visual column distribution bar (reuse pattern from PR #17 project mini-board)
"Needs attention" section: items in needs_approval column, items in in_progress for 3+ days
Per-project cards: project name, board name, column distribution mini-bar, item count, link to full board
Deployment frequency: count of items moved to done (based on board item counts in done column, grouped by project)
Each project card is clickable → navigates to full board page
Responsive: cards stack on mobile, grid on desktop

Test Expectations

Manual test: navigate to /dashboard, see all active boards with rollup stats
Manual test: verify "needs attention" shows items in needs_approval column
Manual test: verify per-project cards show correct column distribution
Manual test: click a project card, navigate to its board

Constraints

Dark theme: #0a0a14 background, #0e0e18 card bg, #1a1a2e borders, #e94560 accent
Reuse typeColor() and column color patterns from PR #17
Column distribution bars should use consistent colors across dashboard and board pages
"Needs attention" items should be visually prominent (accent color highlight)
All data fetched server-side in +page.server.ts — multiple parallel API calls
Keep the dashboard lightweight — don't fetch all board items if board-level item_counts suffice for the rollup
The item_counts field on Board response has counts by item_type — use this for type breakdown without fetching all items
Only fetch full items for boards that have needs_approval items (optimization)