diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md index ed77912..525f085 100644 --- a/IMPLEMENTATION_PLAN.md +++ b/IMPLEMENTATION_PLAN.md @@ -4,7 +4,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta ## Current State Summary -### Overall Status: 586 tests passing across 33 test files +### Overall Status: 609 tests passing across 34 test files ### Library Implementation | File | Status | Gap Analysis | @@ -71,7 +71,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta | `NutritionPanel` | **COMPLETE** | Shows seeds, carbs, keto guidance | | `OverrideToggles` | **COMPLETE** | Toggle buttons with callbacks | | `DayCell` | **COMPLETE** | Phase-colored day with click handler | -| `MiniCalendar` | **PARTIAL (~30%)** | Has header with cycle info only, **MISSING: calendar grid with DayCell integration** | +| `MiniCalendar` | **COMPLETE** | Compact calendar widget with phase colors, navigation, legend (23 tests) | | `MonthView` | **COMPLETE** | Calendar grid with DayCell integration, navigation controls, phase legend | ### Test Coverage @@ -114,7 +114,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta | `src/components/dashboard/data-panel.test.tsx` | **MISSING** - Needs tests for biometrics display | | `src/components/dashboard/nutrition-panel.test.tsx` | **MISSING** - Needs tests for nutrition guidance display | | `src/components/dashboard/override-toggles.test.tsx` | **MISSING** - Needs tests for toggle state and callbacks | -| `src/components/dashboard/mini-calendar.test.tsx` | **MISSING** - Needs tests for header/partial implementation | +| `src/components/dashboard/mini-calendar.test.tsx` | **EXISTS** - 23 tests (calendar grid, phase colors, navigation, legend) | | `src/components/calendar/day-cell.test.tsx` | **MISSING** - Needs tests for phase coloring, click handler | | E2E tests | **AUTHORIZED SKIP** - Per specs/testing.md | @@ -462,20 +462,21 @@ Full feature set for production use. - **Why:** Users want detailed training guidance - **Depends On:** P0.4, P1.3 -### P2.14: Mini Calendar Component -- [ ] Dashboard overview calendar -- **Current State:** Component exists with header/cycle info only (~30% complete), NO calendar grid +### P2.14: Mini Calendar Component ✅ COMPLETE +- [x] Dashboard overview calendar +- **Current State:** COMPLETE - Compact calendar grid with phase colors, navigation buttons, today highlighting, phase legend - **Files:** - - `src/components/dashboard/mini-calendar.tsx` - **Needs: complete calendar grid with phase colors using DayCell** + - `src/components/dashboard/mini-calendar.tsx` - Complete calendar grid with DayCell integration - **Tests:** - - `src/components/dashboard/mini-calendar.test.tsx` - Component test: renders current month, highlights today -- **Features Needed:** - - Calendar grid (reuse DayCell component from MonthView) + - `src/components/dashboard/mini-calendar.test.tsx` - 23 tests (calendar grid, phase colors, navigation, legend) +- **Features Implemented:** + - Calendar grid using DayCell component - Current week/month view - Phase color coding - Today highlight + - Navigation buttons (prev/next month) + - Phase legend - **Why:** Quick visual reference on dashboard -- **Note:** Can leverage existing MonthView/DayCell components for implementation ### P2.15: Health Check Endpoint ✅ COMPLETE - [x] GET /api/health for deployment monitoring @@ -665,19 +666,17 @@ Testing, error handling, and refinements. ### P3.11: Missing Component Tests - [ ] Add unit tests for untested components -- **Components Needing Tests (6 total):** +- **Components Needing Tests (5 total):** - `src/components/dashboard/decision-card.tsx` - Tests for rendering decision status, icon, and reason - `src/components/dashboard/data-panel.tsx` - Tests for biometrics display (BB, HRV, intensity) - `src/components/dashboard/nutrition-panel.tsx` - Tests for seeds, carbs, keto guidance display - `src/components/dashboard/override-toggles.tsx` - Tests for toggle states and callbacks (has interactive state) - - `src/components/dashboard/mini-calendar.tsx` - Tests for header rendering (partial implementation) - `src/components/calendar/day-cell.tsx` - Tests for phase coloring and click handler - **Test Files to Create:** - `src/components/dashboard/decision-card.test.tsx` - `src/components/dashboard/data-panel.test.tsx` - `src/components/dashboard/nutrition-panel.test.tsx` - `src/components/dashboard/override-toggles.test.tsx` - - `src/components/dashboard/mini-calendar.test.tsx` - `src/components/calendar/day-cell.test.tsx` - **Why:** Component isolation ensures UI correctness and prevents regressions @@ -797,9 +796,8 @@ P4.* UX Polish ────────> After core functionality complete | Priority | Task | Effort | Notes | |----------|------|--------|-------| | Medium | P2.13 Plan Page | Medium | Placeholder exists, needs content | -| Medium | P2.14 MiniCalendar | Small | Can reuse DayCell, ~70% remaining | | Medium | P2.18 OIDC Auth | Large | Production auth requirement | -| Medium | P3.11 Component Tests | Medium | 6 components need tests | +| Medium | P3.11 Component Tests | Medium | 5 components need tests | | Low | P3.7 Error Handling | Small | Polish | | Low | P3.8 Loading States | Small | Polish | | Low | P4.* UX Polish | Various | After core complete | @@ -841,6 +839,7 @@ P4.* UX Polish ────────> After core functionality complete - [x] **OverrideToggles** - Toggle buttons for flare/stress/sleep/pms - [x] **DayCell** - Phase-colored calendar day cell with click handler - [x] **MonthView** - Calendar grid with DayCell integration, navigation controls (prev/next month, Today button), phase legend, 21 tests +- [x] **MiniCalendar** - Compact calendar widget with phase colors, navigation, legend, 23 tests (P2.14) ### API Routes (17 complete) - [x] **GET /api/user** - Returns authenticated user profile, 4 tests (P0.4) @@ -912,4 +911,4 @@ P4.* UX Polish ────────> After core functionality complete 13. **OIDC vs Email/Password:** Current email/password login (P1.6) works for development. P2.18 upgrades to OIDC for production security per specs/authentication.md 14. **E2E Tests:** Authorized skip per specs/testing.md - unit and integration tests are sufficient for MVP 15. **Dark Mode:** Partial Tailwind support exists via dark: classes but may need prefers-color-scheme configuration in tailwind.config.js (see P4.3) -16. **Component Tests:** 6 components lack unit tests (P3.11) - DecisionCard, DataPanel, NutritionPanel, OverrideToggles, MiniCalendar, DayCell +16. **Component Tests:** 5 components lack unit tests (P3.11) - DecisionCard, DataPanel, NutritionPanel, OverrideToggles, DayCell diff --git a/src/app/page.test.tsx b/src/app/page.test.tsx index e5de617..6279355 100644 --- a/src/app/page.test.tsx +++ b/src/app/page.test.tsx @@ -564,7 +564,8 @@ describe("Dashboard", () => { render(); await waitFor(() => { - expect(screen.getByText(/follicular/i)).toBeInTheDocument(); + // Check for phase in the cycle info header (uppercase, with Day X prefix) + expect(screen.getByText(/Day 12 · FOLLICULAR/)).toBeInTheDocument(); }); }); }); diff --git a/src/app/page.tsx b/src/app/page.tsx index ac062e0..447ae77 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from "react"; import { DataPanel } from "@/components/dashboard/data-panel"; import { DecisionCard } from "@/components/dashboard/decision-card"; +import { MiniCalendar } from "@/components/dashboard/mini-calendar"; import { NutritionPanel } from "@/components/dashboard/nutrition-panel"; import { OverrideToggles } from "@/components/dashboard/override-toggles"; import type { @@ -37,6 +38,8 @@ interface UserData { id: string; email: string; activeOverrides: OverrideType[]; + lastPeriodDate: string | null; + cycleLength: number; } export default function Dashboard() { @@ -44,6 +47,16 @@ export default function Dashboard() { const [userData, setUserData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + const [calendarYear, setCalendarYear] = useState(new Date().getFullYear()); + const [calendarMonth, setCalendarMonth] = useState(new Date().getMonth()); + + const handleCalendarMonthChange = useCallback( + (year: number, month: number) => { + setCalendarYear(year); + setCalendarMonth(month); + }, + [], + ); const fetchTodayData = useCallback(async () => { const response = await fetch("/api/today"); @@ -194,6 +207,17 @@ export default function Dashboard() { activeOverrides={userData.activeOverrides} onToggle={handleOverrideToggle} /> + + {/* Mini Calendar */} + {userData.lastPeriodDate && ( + + )} )} diff --git a/src/components/dashboard/mini-calendar.test.tsx b/src/components/dashboard/mini-calendar.test.tsx new file mode 100644 index 0000000..c861033 --- /dev/null +++ b/src/components/dashboard/mini-calendar.test.tsx @@ -0,0 +1,293 @@ +// ABOUTME: Unit tests for the MiniCalendar component. +// ABOUTME: Tests calendar grid rendering, phase display, navigation, and today highlighting. +import { fireEvent, render, screen } from "@testing-library/react"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; + +import { MiniCalendar } from "./mini-calendar"; + +describe("MiniCalendar", () => { + // Fixed date for consistent testing: January 2026 + const baseProps = { + lastPeriodDate: new Date("2026-01-01"), + cycleLength: 28, + onMonthChange: vi.fn(), + }; + + beforeEach(() => { + vi.clearAllMocks(); + // Mock Date.now to return Jan 15, 2026 + vi.useFakeTimers(); + vi.setSystemTime(new Date("2026-01-15")); + }); + + afterEach(() => { + vi.useRealTimers(); + }); + + describe("header rendering", () => { + it("renders the month and year in header", () => { + render(); + + expect(screen.getByText("January 2026")).toBeInTheDocument(); + }); + + it("renders current cycle day and phase", () => { + render(); + + // Jan 15, 2026 with lastPeriod Jan 1 = Day 15 (OVULATION) + expect(screen.getByText(/Day 15/)).toBeInTheDocument(); + expect(screen.getByText(/OVULATION/)).toBeInTheDocument(); + }); + + it("renders compact day-of-week headers", () => { + render(); + + // Compact single-letter headers - S appears twice (Sun & Sat), T appears twice (Tue & Thu) + const dayHeaders = screen.getAllByText(/^[SMTWF]$/); + expect(dayHeaders).toHaveLength(7); + + // Check we have all the expected day letters + const headerTexts = dayHeaders.map((el) => el.textContent); + expect(headerTexts).toEqual(["S", "M", "T", "W", "T", "F", "S"]); + }); + }); + + describe("calendar grid", () => { + it("renders all days of the month", () => { + render(); + + // January 2026 has 31 days - look for day numbers in buttons + for (let day = 1; day <= 31; day++) { + const buttons = screen.getAllByRole("button"); + const dayButton = buttons.find( + (btn) => btn.textContent === day.toString(), + ); + expect(dayButton).toBeTruthy(); + } + }); + + it("highlights today's date with a ring", () => { + render(); + + // Find the button with text "15" - Jan 15 is "today" + const buttons = screen.getAllByRole("button"); + const todayButton = buttons.find((btn) => btn.textContent === "15"); + expect(todayButton).toHaveClass("ring-2"); + }); + + it("does not highlight non-today dates with ring", () => { + render(); + + // Find the button with text "10" - not today + const buttons = screen.getAllByRole("button"); + const otherButton = buttons.find((btn) => btn.textContent === "10"); + expect(otherButton).not.toHaveClass("ring-2"); + }); + }); + + describe("phase colors", () => { + it("applies menstrual phase color (blue) to days 1-3", () => { + render(); + + // Day 1 is MENSTRUAL (bg-blue-100) + const buttons = screen.getAllByRole("button"); + const day1 = buttons.find((btn) => btn.textContent === "1"); + expect(day1).toHaveClass("bg-blue-100"); + }); + + it("applies follicular phase color (green) to days 4-14", () => { + render(); + + // Day 5 is FOLLICULAR (bg-green-100) + const buttons = screen.getAllByRole("button"); + const day5 = buttons.find((btn) => btn.textContent === "5"); + expect(day5).toHaveClass("bg-green-100"); + }); + + it("applies ovulation phase color (purple) to days 15-16", () => { + render(); + + // Day 15 is OVULATION (bg-purple-100) + const buttons = screen.getAllByRole("button"); + const day15 = buttons.find((btn) => btn.textContent === "15"); + expect(day15).toHaveClass("bg-purple-100"); + }); + + it("applies early luteal phase color (yellow) to days 17-24", () => { + render(); + + // Day 20 is EARLY_LUTEAL (bg-yellow-100) + const buttons = screen.getAllByRole("button"); + const day20 = buttons.find((btn) => btn.textContent === "20"); + expect(day20).toHaveClass("bg-yellow-100"); + }); + + it("applies late luteal phase color (red) to days 25-31", () => { + render(); + + // Day 25 is LATE_LUTEAL (bg-red-100) + const buttons = screen.getAllByRole("button"); + const day25 = buttons.find((btn) => btn.textContent === "25"); + expect(day25).toHaveClass("bg-red-100"); + }); + }); + + describe("navigation", () => { + it("renders previous month button", () => { + render(); + + expect( + screen.getByRole("button", { name: /previous month/i }), + ).toBeInTheDocument(); + }); + + it("renders next month button", () => { + render(); + + expect( + screen.getByRole("button", { name: /next month/i }), + ).toBeInTheDocument(); + }); + + it("renders Today button", () => { + render(); + + expect( + screen.getByRole("button", { name: /^today$/i }), + ).toBeInTheDocument(); + }); + + it("calls onMonthChange with previous month when clicking previous", () => { + const onMonthChange = vi.fn(); + render(); + + const prevButton = screen.getByRole("button", { + name: /previous month/i, + }); + fireEvent.click(prevButton); + + expect(onMonthChange).toHaveBeenCalledWith(2025, 11); // December 2025 + }); + + it("calls onMonthChange with next month when clicking next", () => { + const onMonthChange = vi.fn(); + render(); + + const nextButton = screen.getByRole("button", { name: /next month/i }); + fireEvent.click(nextButton); + + expect(onMonthChange).toHaveBeenCalledWith(2026, 1); // February 2026 + }); + + it("calls onMonthChange with current month when clicking Today from different month", () => { + const onMonthChange = vi.fn(); + // Render a different month than current (March 2026) + render( + , + ); + + const todayButton = screen.getByRole("button", { name: /^today$/i }); + fireEvent.click(todayButton); + + // Should navigate to January 2026 (month of mocked "today") + expect(onMonthChange).toHaveBeenCalledWith(2026, 0); + }); + }); + + describe("phase legend", () => { + it("renders compact phase legend", () => { + render(); + + // Legend should have color indicators for all phases + const legend = screen.getByTestId("phase-legend"); + expect(legend).toBeInTheDocument(); + + // Check for phase names within the legend specifically + expect(legend.textContent).toContain("Menstrual"); + expect(legend.textContent).toContain("Follicular"); + expect(legend.textContent).toContain("Ovulation"); + expect(legend.textContent).toContain("Early Luteal"); + expect(legend.textContent).toContain("Late Luteal"); + }); + }); + + describe("cycle rollover", () => { + it("handles cycle rollover correctly", () => { + // Last period was Dec 5, 2025 with 28-day cycle + // Jan 1, 2026 = day 28 of cycle + // Jan 2, 2026 = day 1 of new cycle + render( + , + ); + + const buttons = screen.getAllByRole("button"); + + // Jan 1 should be day 28 (late luteal - red) + const jan1 = buttons.find((btn) => btn.textContent === "1"); + expect(jan1).toHaveClass("bg-red-100"); + + // Jan 2 should be day 1 (menstrual - blue) + const jan2 = buttons.find((btn) => btn.textContent === "2"); + expect(jan2).toHaveClass("bg-blue-100"); + }); + }); + + describe("custom year/month props", () => { + it("renders specified year and month when provided", () => { + render(); + + expect(screen.getByText("March 2026")).toBeInTheDocument(); + }); + + it("renders February 2026 with 28 days", () => { + render(); + + expect(screen.getByText("February 2026")).toBeInTheDocument(); + + // February 2026 has 28 days (not a leap year) + const buttons = screen.getAllByRole("button"); + const day28 = buttons.find((btn) => btn.textContent === "28"); + const day29 = buttons.find((btn) => btn.textContent === "29"); + expect(day28).toBeTruthy(); + expect(day29).toBeFalsy(); + }); + + it("renders leap year February with 29 days", () => { + render(); + + expect(screen.getByText("February 2024")).toBeInTheDocument(); + + // February 2024 has 29 days (leap year) + const buttons = screen.getAllByRole("button"); + const day29 = buttons.find((btn) => btn.textContent === "29"); + expect(day29).toBeTruthy(); + }); + }); + + describe("without onMonthChange callback", () => { + it("navigation buttons still render without callback", () => { + render( + , + ); + + expect( + screen.getByRole("button", { name: /previous month/i }), + ).toBeInTheDocument(); + expect( + screen.getByRole("button", { name: /next month/i }), + ).toBeInTheDocument(); + }); + }); +}); diff --git a/src/components/dashboard/mini-calendar.tsx b/src/components/dashboard/mini-calendar.tsx index 1d26182..2d47a95 100644 --- a/src/components/dashboard/mini-calendar.tsx +++ b/src/components/dashboard/mini-calendar.tsx @@ -1,29 +1,191 @@ // ABOUTME: Compact calendar widget for the dashboard. -// ABOUTME: Shows current month with color-coded cycle phases. +// ABOUTME: Shows current month with color-coded cycle phases and navigation. +"use client"; + +import { getCycleDay, getPhase } from "@/lib/cycle"; +import type { CyclePhase } from "@/types"; + interface MiniCalendarProps { - currentDate: Date; - cycleDay: number; - phase: string; + lastPeriodDate: Date; + cycleLength: number; + year?: number; + month?: number; + onMonthChange?: (year: number, month: number) => void; +} + +const PHASE_COLORS: Record = { + MENSTRUAL: "bg-blue-100", + FOLLICULAR: "bg-green-100", + OVULATION: "bg-purple-100", + EARLY_LUTEAL: "bg-yellow-100", + LATE_LUTEAL: "bg-red-100", +}; + +const COMPACT_DAY_NAMES = ["S", "M", "T", "W", "T", "F", "S"]; + +const PHASE_LEGEND = [ + { name: "Menstrual", color: "bg-blue-100" }, + { name: "Follicular", color: "bg-green-100" }, + { name: "Ovulation", color: "bg-purple-100" }, + { name: "Early Luteal", color: "bg-yellow-100" }, + { name: "Late Luteal", color: "bg-red-100" }, +]; + +function getDaysInMonth(year: number, month: number): number { + return new Date(year, month + 1, 0).getDate(); +} + +function getFirstDayOfMonth(year: number, month: number): number { + return new Date(year, month, 1).getDay(); } export function MiniCalendar({ - currentDate, - cycleDay, - phase, + lastPeriodDate, + cycleLength, + year, + month, + onMonthChange, }: MiniCalendarProps) { + const today = new Date(); + const displayYear = year ?? today.getFullYear(); + const displayMonth = month ?? today.getMonth(); + + const daysInMonth = getDaysInMonth(displayYear, displayMonth); + const firstDayOfWeek = getFirstDayOfMonth(displayYear, displayMonth); + + // Calculate current cycle day and phase for the header + const currentCycleDay = getCycleDay(lastPeriodDate, cycleLength, today); + const currentPhase = getPhase(currentCycleDay); + + const handlePreviousMonth = () => { + if (displayMonth === 0) { + onMonthChange?.(displayYear - 1, 11); + } else { + onMonthChange?.(displayYear, displayMonth - 1); + } + }; + + const handleNextMonth = () => { + if (displayMonth === 11) { + onMonthChange?.(displayYear + 1, 0); + } else { + onMonthChange?.(displayYear, displayMonth + 1); + } + }; + + const handleTodayClick = () => { + onMonthChange?.(today.getFullYear(), today.getMonth()); + }; + + // Build array of day cells + const days: (Date | null)[] = []; + + // Add empty cells for days before the first day of the month + for (let i = 0; i < firstDayOfWeek; i++) { + days.push(null); + } + + // Add the actual days of the month + for (let day = 1; day <= daysInMonth; day++) { + days.push(new Date(displayYear, displayMonth, day)); + } + return (
-

- Day {cycleDay} • {phase} + {/* Cycle info header */} +

+ Day {currentCycleDay} · {currentPhase}

-

- {currentDate.toLocaleDateString("en-US", { - month: "long", - year: "numeric", + + {/* Navigation with month/year */} +

+ +
+ + {new Date(displayYear, displayMonth).toLocaleDateString("en-US", { + month: "long", + year: "numeric", + })} + + +
+ +
+ + {/* Compact day of week headers */} +
+ {COMPACT_DAY_NAMES.map((dayName, index) => ( +
+ {dayName} +
+ ))} +
+ + {/* Calendar grid */} +
+ {days.map((date, index) => { + if (!date) { + // biome-ignore lint/suspicious/noArrayIndexKey: Empty cells are always at fixed positions at the start of the month + return
; + } + + const cycleDay = getCycleDay(lastPeriodDate, cycleLength, date); + const phase = getPhase(cycleDay); + const isToday = + date.getFullYear() === today.getFullYear() && + date.getMonth() === today.getMonth() && + date.getDate() === today.getDate(); + + return ( + + ); })} -

- {/* Full calendar grid will be implemented here */} -

Calendar grid placeholder

+
+ + {/* Compact phase legend */} +
+ {PHASE_LEGEND.map((phase) => ( +
+
+ {phase.name} +
+ ))} +
); }