52 lines
2.7 KiB
Markdown
52 lines
2.7 KiB
Markdown
|
# 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
|