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