Files
headroom/openspec/changes/p05-page-migrations/tasks.md
Santhosh Janardhanan b9cb5170da docs(ui): Add UI layout refactor plan and OpenSpec changes
- Update decision-log with UI layout decisions (Feb 18, 2026)
- Update architecture with frontend layout patterns
- Update config.yaml with TDD, documentation, UI standards rules
- Create p00-api-documentation change (Scribe annotations)
- Create p01-ui-foundation change (types, stores, Lucide)
- Create p02-app-layout change (AppLayout, Sidebar, TopBar)
- Create p03-dashboard-enhancement change (PageHeader, StatCard)
- Create p04-content-patterns change (DataTable, FilterBar)
- Create p05-page-migrations change (page migrations)
- Fix E2E auth tests (11/11 passing)
- Add JWT expiry validation to dashboard guard
2026-02-18 13:03:08 -05:00

106 lines
3.4 KiB
Markdown

# Tasks: Page Migrations
## Phase 1: Team Members Page
### Create Route
- [ ] 5.1 Create `src/routes/team-members/` directory
- [ ] 5.2 Create `+page.svelte`
- [ ] 5.3 Create `+page.ts` for data loading (optional)
### Implement Page
- [ ] 5.4 Add PageHeader with title and Add button
- [ ] 5.5 Add FilterBar with search and status filter
- [ ] 5.6 Add DataTable with columns (Name, Role, Rate, Status)
- [ ] 5.7 Add status badge styling
- [ ] 5.8 Add loading state
- [ ] 5.9 Add empty state
- [ ] 5.10 Add row click handler (edit or navigate)
- [ ] 5.11 Add svelte:head with title
### Testing
- [ ] 5.12 Write E2E test: page renders
- [ ] 5.13 Write E2E test: search works
- [ ] 5.14 Write E2E test: filter works
## Phase 2: Projects Page
### Create Route
- [ ] 5.15 Create `src/routes/projects/` directory
- [ ] 5.16 Create `+page.svelte`
- [ ] 5.17 Create `+page.ts` for data loading (optional)
### Implement Page
- [ ] 5.18 Add PageHeader with title and New Project button
- [ ] 5.19 Add FilterBar with search, status, type filters
- [ ] 5.20 Add DataTable with columns (Code, Title, Status, Type)
- [ ] 5.21 Add status badge colors mapping
- [ ] 5.22 Add loading state
- [ ] 5.23 Add empty state
- [ ] 5.24 Add svelte:head with title
### Testing
- [ ] 5.25 Write E2E test: page renders
- [ ] 5.26 Write E2E test: search works
- [ ] 5.27 Write E2E test: status filter works
## Phase 3: Placeholder Pages
### Allocations
- [ ] 5.28 Create `src/routes/allocations/+page.svelte`
- [ ] 5.29 Add PageHeader
- [ ] 5.30 Add EmptyState with Coming Soon
### Actuals
- [ ] 5.31 Create `src/routes/actuals/+page.svelte`
- [ ] 5.32 Add PageHeader
- [ ] 5.33 Add EmptyState with Coming Soon
### Reports
- [ ] 5.34 Create `src/routes/reports/+layout.svelte` (optional wrapper)
- [ ] 5.35 Create `src/routes/reports/forecast/+page.svelte`
- [ ] 5.36 Create `src/routes/reports/utilization/+page.svelte`
- [ ] 5.37 Create `src/routes/reports/costs/+page.svelte`
- [ ] 5.38 Create `src/routes/reports/variance/+page.svelte`
- [ ] 5.39 Create `src/routes/reports/allocation/+page.svelte`
- [ ] 5.40 Add PageHeader and EmptyState to each
### Admin
- [ ] 5.41 Create `src/routes/settings/+page.svelte`
- [ ] 5.42 Create `src/routes/master-data/+page.svelte`
- [ ] 5.43 Add PageHeader and EmptyState to each
## Phase 4: Cleanup
- [ ] 5.44 Remove `src/lib/components/Navigation.svelte`
- [ ] 5.45 Update any imports referencing old Navigation
- [ ] 5.46 Verify no broken imports
- [ ] 5.47 Remove any unused CSS from app.css
## Phase 5: E2E Test Updates
- [ ] 5.48 Update auth E2E tests for new layout
- [ ] 5.49 Verify login redirects to dashboard
- [ ] 5.50 Verify dashboard has sidebar
- [ ] 5.51 Verify sidebar navigation works
- [ ] 5.52 Verify all new pages are accessible
## Phase 6: Verification
- [ ] 5.53 Run `npm run check` - no type errors
- [ ] 5.54 Run `npm run test:unit` - all tests pass
- [ ] 5.55 Run `npm run test:e2e` - all E2E tests pass
- [ ] 5.56 Manual test: All pages render correctly
- [ ] 5.57 Manual test: Navigation works
- [ ] 5.58 Manual test: No console errors
## Commits
1. `feat(pages): Create Team Members page with DataTable`
2. `feat(pages): Create Projects page with status badges`
3. `feat(pages): Create Allocations placeholder page`
4. `feat(pages): Create Actuals placeholder page`
5. `feat(pages): Create Reports placeholder pages`
6. `feat(pages): Create Admin placeholder pages`
7. `refactor: Remove old Navigation component`
8. `test(e2e): Update E2E tests for new layout`