BillTracker/.learnings/scarlett/BILL_TRACKER_ACTIVE.md

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