- Add isToday test cases to CalendarDay.test.tsx
* test --today class when isToday=true
* test --today class not applied when isToday=false
- Create Calendar.test.tsx with full page coverage
* Test 7 weekday headers in Monday-first Swedish order
* Verify correct number of day cells (multiple of 7)
* Test Sunday-starting month renders correctly (March 2026)
* Test modal opens on current-month day click
* Test modal doesn't open on disabled day click
* Test current month title display
* Test prev/next month navigation
* Test loading state display
- Mocks useWorkspace, usePlannedDays, Layout, LoadingSpinner, PlannedDayModal
- All 19 tests pass; no coverage regression
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Convert week calculation to Monday-first (startOffset = (firstDay.getDay() + 6) % 7)
- Update weekday headers to Swedish labels: [Mån, Tis, Ons, Tor, Fre, Lör, Sön]
- Change default currentMonth from June 2026 to current date (new Date())
- Add isToday prop to CalendarDay component
- Add --today modifier to highlight current date with blue circle background
- Pass computed isToday boolean to CalendarDay when date equals today's date string
- Renders correctly for Sunday-starting months (e.g., March 2026)
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Create calendar.css with 7-column grid using display: grid
- Style calendar header with navigation buttons (min 36x36px tap targets)
- Style day cells with borders, hover states, and focus-visible outlines
- Style weekday headers (centered, muted, uppercase)
- Create --disabled modifier for leading/trailing days from adjacent months
- Create --has-events modifier for visual emphasis
- Create event markers as small dots (8x8px circles)
- Style legend with compact horizontal swatch layout
- Import CSS into Calendar.tsx following co-located pattern from Header
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Implemented 4 page stubs with hooks and components:
- Dashboard: displays overview metrics, planned days breakdown, progress chart, break periods
- Calendar: month-based calendar grid with event badges and navigation
- Tips: list of optimization tips with dismiss functionality
- Settings: workspace configuration with child info, parent profile, vacation days, break periods
Added utility exports:
- src/context/index.ts: re-exports useAuth, useWorkspace hooks
- src/hooks/index.ts: re-exports all domain hooks
All pages:
- Use Layout wrapper with header configuration
- Load data via hooks with loading/error states
- Render presentational components (no business logic)
- Pass callbacks for user actions
- Type-safe with full @types coverage
Frontend test coverage: 167 tests, all passing
TypeScript: zero errors, lint: zero errors
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
New components (all with .tsx + .test.tsx, 90%+ coverage):
- CalendarDay: day cell with event badges
- CalendarEvent: colored event chip with dismiss option
- DaysBreakdown: table of days by type
- ProgressChart: progress bar toward age-4 deadline
- TipCard: optimization tip card with severity badges
- VacationDaysInput: number input with min/max validation
- ParentProfileInput: dual selects for salary type & employment status
- PlanningGoalSelector: radio buttons for planning goal
- BreakPeriodsInput: list manager with inline add/edit form
All components follow existing patterns from Header/Footer:
- Typed props interfaces (exported)
- Semantic HTML with data-testid & ARIA attributes
- No business logic, purely presentational
- Comprehensive test coverage including edge cases
npm test: 22 files, 167 tests passing
npx tsc --noEmit: clean
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Allow @typescript-eslint/no-explicit-any in test files for vitest mocks
- Use 'unknown' type instead of 'any' in dates.ts isValidDate function
- npm run lint now passes with zero errors
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
jacobh2