Santhosh Janardhanan
b9cb5170da
- 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
87 lines
3.3 KiB
Markdown
87 lines
3.3 KiB
Markdown
# Tasks: UI Foundation
|
|
|
|
## Phase 1: Install Dependencies
|
|
|
|
- [ ] 1.1 Install Lucide icons: `npm install lucide-svelte`
|
|
- [ ] 1.2 Verify installation in package.json
|
|
- [ ] 1.3 Test import in a test file: `import { Menu } from 'lucide-svelte'`
|
|
|
|
## Phase 2: Create Types
|
|
|
|
- [ ] 1.4 Create `src/lib/types/` directory if not exists
|
|
- [ ] 1.5 Create `src/lib/types/layout.ts`
|
|
- [ ] 1.6 Define `SidebarState` type
|
|
- [ ] 1.7 Define `NavItem` interface
|
|
- [ ] 1.8 Define `NavSection` interface
|
|
- [ ] 1.9 Define `Theme` type
|
|
- [ ] 1.10 Export all types
|
|
|
|
## Phase 3: Create Stores
|
|
|
|
### Layout Store
|
|
- [ ] 1.11 Create `src/lib/stores/layout.ts`
|
|
- [ ] 1.12 Implement `sidebarState` writable with localStorage persistence
|
|
- [ ] 1.13 Implement `theme` writable with localStorage persistence
|
|
- [ ] 1.14 Implement `toggleSidebar()` function
|
|
- [ ] 1.15 Implement `setSidebarState()` function
|
|
- [ ] 1.16 Implement `toggleTheme()` function
|
|
- [ ] 1.17 Implement `setTheme()` function
|
|
- [ ] 1.18 Add system preference detection for initial theme
|
|
|
|
### Period Store
|
|
- [ ] 1.19 Create `src/lib/stores/period.ts`
|
|
- [ ] 1.20 Implement `selectedPeriod` writable with localStorage persistence
|
|
- [ ] 1.21 Create `selectedMonth` derived store
|
|
- [ ] 1.22 Create `selectedDate` derived store
|
|
- [ ] 1.23 Implement `setPeriod()` function
|
|
- [ ] 1.24 Implement `previousMonth()` function
|
|
- [ ] 1.25 Implement `nextMonth()` function
|
|
- [ ] 1.26 Implement `currentMonth()` function
|
|
|
|
## Phase 4: Create Navigation Config
|
|
|
|
- [ ] 1.27 Create `src/lib/config/` directory if not exists
|
|
- [ ] 1.28 Create `src/lib/config/navigation.ts`
|
|
- [ ] 1.29 Define PLANNING section (Dashboard, Team, Projects, Allocations, Actuals)
|
|
- [ ] 1.30 Define REPORTS section (Forecast, Utilization, Costs, Variance, Allocation Matrix)
|
|
- [ ] 1.31 Define ADMIN section with `roles: ['superuser']`
|
|
- [ ] 1.32 Export `navigationSections` array
|
|
|
|
## Phase 5: Theme System
|
|
|
|
- [ ] 1.33 Update `src/app.css` with theme CSS variables
|
|
- [ ] 1.34 Add sidebar width CSS variables
|
|
- [ ] 1.35 Add theme color-scheme definitions
|
|
- [ ] 1.36 Test theme switching in browser console
|
|
|
|
## Phase 6: Testing
|
|
|
|
### Unit Tests
|
|
- [ ] 1.37 Write test: layoutStore initializes with default values
|
|
- [ ] 1.38 Write test: layoutStore.toggleSidebar cycles through states
|
|
- [ ] 1.39 Write test: layoutStore theme toggle works
|
|
- [ ] 1.40 Write test: periodStore initializes with current month
|
|
- [ ] 1.41 Write test: periodStore.previousMonth decrements correctly
|
|
- [ ] 1.42 Write test: periodStore.nextMonth increments correctly
|
|
- [ ] 1.43 Write test: navigationSections has correct structure
|
|
|
|
### Component Tests
|
|
- [ ] 1.44 Create test: Lucide icon renders correctly
|
|
|
|
## Phase 7: Verification
|
|
|
|
- [ ] 1.45 Run `npm run check` - no type errors
|
|
- [ ] 1.46 Run `npm run test:unit` - all tests pass
|
|
- [ ] 1.47 Verify stores persist to localStorage
|
|
- [ ] 1.48 Verify theme applies to document
|
|
|
|
## Commits
|
|
|
|
1. `feat(ui): Install lucide-svelte for icon library`
|
|
2. `feat(ui): Add layout types (SidebarState, NavItem, NavSection, Theme)`
|
|
3. `feat(ui): Create layoutStore for sidebar state and theme management`
|
|
4. `feat(ui): Create periodStore for global month/period selection`
|
|
5. `feat(ui): Add navigation configuration for sidebar menu`
|
|
6. `feat(ui): Add CSS variables for theme and layout`
|
|
7. `test(ui): Add unit tests for layout and period stores`
|