# Plan: Fix Timezone Handling in Wakeup Times Module ## Problem Description The "Wakeup Times" chart (in `frontend/src/components/stats/WakeupPlot.tsx`) displays wakeup times incorrectly due to a timezone mismatch. - **Observation**: If a baby wakes up at `05:55` local time (e.g., in UTC+2), the chart shows `03:55`. - **Cause**: The backend stores times in UTC. The frontend currently receives minutes relative to UTC midnight and renders them directly using `formatMinutesAfter` without applying the client's local timezone offset. ## Investigation Steps 1. **Backend Verification**: - Examine `backend/app/routers/stats.py` (or equivalent) and the CRUD logic to confirm that `wakeup_minutes` is calculated based on UTC midnight. - Verify how the backend handles the `wakeup_ref` and `bedtime_ref` parameters. 2. **Frontend Logic Audit**: - Trace the data flow from `fetchWakeSleepTimes` -> `useStats` -> `WakeupPlot.tsx`. - Confirm that `wakeup_minutes` is indeed a raw offset from UTC midnight. ## Implementation Plan 1. **Calculate Local Offset**: Use `new Date().getTimezoneOffset()` in the frontend to determine the difference between UTC and local time. 2. **Adjust Minutes**: - In `WakeupPlot.tsx`, modify the mapping logic to adjust `day.wakeup_minutes` by the local timezone offset before it is passed to `formatMinutesAfter`. - Formula: `local_minutes = utc_minutes - (timezone_offset_in_minutes)`. *(Note: `getTimezoneOffset()` returns minutes positive for west of UTC, negative for east, so subtraction is correct to add offset to UTC).* 3. **Refactor Utilities (if needed)**: If the logic is used elsewhere, consider moving timezone-aware formatting to `frontend/src/utils/time.ts`. ## Verification Plan 1. **Manual Verification**: - Mock a response from the backend with a known UTC time. - Check if the rendered string matches the expected local time. 2. **Automated Testing**: - Add/update a test case in `frontend/tests/e2e/stats.spec.ts` (or a unit test in `frontend/tests/`) that simulates different timezone offsets to ensure the display is correct. 3. **Regression Check**: - Ensure `BedtimePlot.tsx` and other time-related components are not negatively impacted by changes to shared utilities.