headroom/openspec/changes/p05-page-migrations/tasks.md

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