Users without a lastPeriodDate can now set it via a modal opened from
the onboarding banner. The dashboard now fetches user data independently
so the banner shows even when /api/today fails due to missing period date.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implement OnboardingBanner component that prompts new users to complete
setup with contextual banners for:
- Garmin connection (links to /settings/garmin)
- Period date (button with callback for date picker)
- Notification time (links to /settings)
Banners display at the top of the dashboard when setup is incomplete,
with icons and styled action buttons. Each banner uses role="alert"
for accessibility.
- Add OnboardingBanner component (16 tests)
- Integrate into dashboard page (5 new tests, 28 total)
- Update UserData interface to include garminConnected, notificationTime
- Test count: 770 tests across 43 files
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add skeleton loading components per specs/dashboard.md requirements:
- DecisionCardSkeleton: Shimmer placeholder for status and reason
- DataPanelSkeleton: Skeleton rows for 5 metrics
- NutritionPanelSkeleton: Skeleton for nutrition guidance
- MiniCalendarSkeleton: Placeholder grid with navigation and legend
- OverrideTogglesSkeleton: 4 toggle placeholders
- CycleInfoSkeleton: Cycle day and phase placeholders
- DashboardSkeleton: Combined skeleton for route-level loading
Add Next.js loading.tsx files for instant loading states:
- src/app/loading.tsx (Dashboard)
- src/app/calendar/loading.tsx
- src/app/history/loading.tsx
- src/app/plan/loading.tsx
- src/app/settings/loading.tsx
Update dashboard page to use DashboardSkeleton instead of "Loading..." text.
Fix flaky garmin test with wider date tolerance for timezone variations.
29 new tests in skeletons.test.tsx (749 total tests passing).
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Complete the MiniCalendar component with:
- Full calendar grid showing all days of the month
- Phase colors applied to each day
- Today highlighting with ring indicator
- Navigation buttons (prev/next month, Today)
- Compact phase legend
- Integration into dashboard page (shows when lastPeriodDate exists)
Adds 23 new tests for the MiniCalendar component covering:
- Calendar grid rendering
- Phase color application
- Navigation functionality
- Cycle rollover handling
- Custom year/month props
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Wire up the Dashboard page with /api/today data:
- Fetch today's decision, biometrics, and nutrition on mount
- Display DecisionCard with status, icon, and reason
- Show DataPanel with HRV, Body Battery, intensity minutes
- Show NutritionPanel with seed cycling and carb guidance
- Integrate OverrideToggles with POST/DELETE /api/overrides
- Handle loading states, error states, and setup prompts
- Display cycle day and phase information
Add 23 unit tests for the Dashboard component covering:
- Data fetching from /api/today and /api/user
- Component rendering (DecisionCard, DataPanel, NutritionPanel)
- Override toggle functionality (POST/DELETE API calls)
- Error handling and loading states
- Cycle information display
Also fixed TypeScript error in login page tests (resolveAuth
initialization).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
