From b10bfb0e2f7d3f5a85928ae95b2351db54214199 Mon Sep 17 00:00:00 2001 From: Mannu Date: Sun, 17 May 2026 15:47:52 +0530 Subject: [PATCH] docs: add growth page features to CLAUDE.md Document the growth page components, state management, color codes, and layout order. Co-Authored-By: Claude Sonnet 4.6 --- CLAUDE.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/CLAUDE.md b/CLAUDE.md index ca70fda..e5d8829 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -65,10 +65,36 @@ docs/ # Design docs - **Sessions:** Login sessions with httpOnly cookies - **Logs:** Feed, sleep, diaper entries with timestamps - **Vaccinations:** IAP schedule tracking -- **Growth:** Weight/height over time +- **Growth:** Weight/height/head measurements over time - **Memories:** Photos with R2 storage - **Chat Sessions:** User conversations with AI (chat_sessions, chat_messages) +### Growth Page Features + +The growth page tracks child's physical development with WHO standards. + +**Components:** +- `formatAge(birthDate, measurementDate?)` - Shows age as "1y 4mo" or "8mo" +- Latest Reading card with velocity and percentile +- WHO Standards collapsible card (shows icons ⚖️📏⭕ when collapsed) +- Growth chart (collapsible inside WHO card) +- History (collapsible with scroll for many entries) +- Goals stored in localStorage (`tia_growth_goal_${childId}`) + +**State:** +- `showAdd` - Toggle add form (only shows if latest exists) +- `showGoals` - Toggle goals card +- `showWhoStandards` - Toggle WHO card expand/collapse +- `showChart` - Toggle chart inside WHO card +- `showHistory` - Toggle history expand/collapse + +**Color-coded percentiles:** +- 🟢 Normal (15th-85th percentile) +- 🟡 Watch (<15th or >85th) +- 🔴 Alert (<3rd or >97th) + +**Column order:** Goals → Latest → Add Form → WHO+Chart → History + ### Key Patterns **ThemeProvider:** Wrap app in ThemeProvider from layout.tsx. Use `useTheme()` hook in components.