# 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`