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
This commit is contained in:
105
openspec/changes/p05-page-migrations/tasks.md
Normal file
105
openspec/changes/p05-page-migrations/tasks.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# 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`
|
||||
Reference in New Issue
Block a user