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 |