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 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-17 15:47:52 +05:30
parent 7fc33a791c
commit b10bfb0e2f

View file

@ -65,10 +65,36 @@ docs/ # Design docs
- **Sessions:** Login sessions with httpOnly cookies - **Sessions:** Login sessions with httpOnly cookies
- **Logs:** Feed, sleep, diaper entries with timestamps - **Logs:** Feed, sleep, diaper entries with timestamps
- **Vaccinations:** IAP schedule tracking - **Vaccinations:** IAP schedule tracking
- **Growth:** Weight/height over time - **Growth:** Weight/height/head measurements over time
- **Memories:** Photos with R2 storage - **Memories:** Photos with R2 storage
- **Chat Sessions:** User conversations with AI (chat_sessions, chat_messages) - **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 ### Key Patterns
**ThemeProvider:** Wrap app in ThemeProvider from layout.tsx. Use `useTheme()` hook in components. **ThemeProvider:** Wrap app in ThemeProvider from layout.tsx. Use `useTheme()` hook in components.