# Bill Tracker — Scarlett's Active Notes

**Last updated:** 2026-05-11

## Task 2: RoadmapPage UI — Kanban Priority Lanes

### What Changed

| File | Action | Description |
|------|--------|-------------|
| `client/pages/RoadmapPage.jsx` | **NEW** | Standalone kanban-style roadmap page with 2 tabs (Roadmap + Activity Log) |
| `client/App.jsx` | **MODIFIED** | Added lazy import for RoadmapPage; `/admin/roadmap` route now renders `<RoadmapPage />`; `/admin/about` route uses `<AboutPage />` without admin prop |
| `client/pages/AboutPage.jsx` | **MODIFIED** | Removed `admin` prop, removed `AdminDashboard` import, removed conditional render block — AboutPage is now public-only |
| `client/components/AdminDashboard.jsx` | **DELETED** | Replaced entirely by RoadmapPage |
| `client/components/ui/collapsible.jsx` | **NEW** | shadcn Collapsible component (Radix-based) |
| `tailwind.config.js` | **MODIFIED** | Added `collapsible-down`/`collapsible-up` keyframes and animations |
| `package.json` | **MODIFIED** | Added `@radix-ui/react-collapsible` dependency |

### Architecture

- **RoadmapPage** is a standalone page rendered at `/admin/roadmap` (behind `<RequireAuth role="admin">` + `<AdminShell>`)
- Uses **shadcn Tabs** for Roadmap / Activity Log tab switching
- **Roadmap tab**: 5-column kanban grid on desktop (`lg+`), 2-column on tablet (`sm–lg`), single column on mobile (`<sm`)
- **Activity Log tab**: Lazy-loaded — only fetches `/api/about-admin/dev-log` when the tab is selected
- **Collapsible cards**: shadcn `Collapsible` with `CollapsibleTrigger` + `CollapsibleContent` — no more `SimpleCollapsible`
- **Expand All / Collapse All** toggle button above the lane grid
- **Page-level scroll only** — no nested `max-h-[500px]` overflow containers

### API Endpoints Used

- `GET /api/about-admin/roadmap` → `{ version, items: [...], counts: { critical, high, medium, low, niceToHave } }`
- `GET /api/about-admin/dev-log` → `{ version, entries: [...] }`

### Accessibility

- All collapsible triggers are `<button>` elements (via shadcn Collapsible)
- `aria-expanded` on all collapsible triggers (Radix handles this)
- `aria-label` on priority badges (e.g., "Critical priority")
- `role="region"` + `aria-label` on each priority lane section
- Keyboard-focusable throughout

### Responsive

- Desktop (`lg+`): 5-column grid
- Tablet (`sm–lg`): 2-column grid (CRITICAL+HIGH | MEDIUM+LOW+NICE TO HAVE)
- Mobile (`<sm`): single column, lanes stack vertically

### Notes

- `api.roadmap()` and `api.devLog()` were already present in `client/api.js`
- AboutPage's `/admin/about` route now shows the same public content (no admin dashboard appended)
- The `aboutAdmin()` API endpoint is still available but no longer called by the frontend for the roadmap view