manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(growth): collapsible WHO+Chart card, form after latest

Browse source 
- Merge WHO Standards and Chart into single collapsible card
- Add +Add button shows form below Latest Reading
- Collapsible sections with expand/collapse toggle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-17 14:54:00 +05:30
parent a76738689b
commit 38e18c12f3
1 changed files with 107 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/app/growth/page.tsx
View file

@ -66,6 +66,9 @@ export default function GrowthPage() {
const [chartMetric, setChartMetric] = useState<"weight" | "height" | "head">("weight"); const [chartMetric, setChartMetric] = useState<"weight" | "height" | "head">("weight");
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [saveError, setSaveError] = useState<string | null>(null); const [saveError, setSaveError] = useState<string | null>(null);
const [showWhoStandards, setShowWhoStandards] = useState(true);
const [showChart, setShowChart] = useState(true);
const [showHistory, setShowHistory] = useState(true);
// Goals state // Goals state
const [goal, setGoal] = useState<Goal>({}); const [goal, setGoal] = useState<Goal>({});
@ -468,22 +471,29 @@ export default function GrowthPage() {
</div> </div>
)} )}
{/* WHO Standards Card - Enhanced with age-wise targets */} {/* WHO Standards + Chart Card - Collapsible */}
{child && standard && ( {child && standard && (
<div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl hover:shadow-lg transition-shadow"> <div className="mx-4 mb-4 bg-white dark:bg-gray-800 rounded-xl overflow-hidden">
<div className="flex justify-between items-center mb-3"> {/* WHO Standards Header - Clickable */}
<div> <button
<div className="font-semibold text-lg">{child.name}</div> onClick={() => setShowWhoStandards(!showWhoStandards)}
className="w-full p-4 flex justify-between items-center hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
>
<div className="text-left">
<div className="font-semibold text-lg">{child.name} - WHO Standards</div>
<div className="text-sm text-gray-500">{ageMonths} months old</div> <div className="text-sm text-gray-500">{ageMonths} months old</div>
</div> </div>
<div className="flex items-center gap-2">
{savedGoals.weightKg && ( {savedGoals.weightKg && (
<div className="text-right text-sm"> <div className="text-sm text-rose-500 mr-2">Goal: {savedGoals.weightKg}kg</div>
<div className="text-gray-500">Goal</div>
<div className="font-medium text-rose-500">{savedGoals.weightKg}kg</div>
</div>
)} )}
<span className={`transform transition-transform ${showWhoStandards ? "rotate-180" : ""}`}>▼</span>
</div> </div>
</button>
{/* WHO Standards Content - Collapsible */}
{showWhoStandards && (
<div className="px-4 pb-4">
{/* Color-coded percentile zones legend */} {/* Color-coded percentile zones legend */}
<div className="flex gap-3 mb-3 text-xs"> <div className="flex gap-3 mb-3 text-xs">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
@ -500,7 +510,8 @@ export default function GrowthPage() {
</span> </span>
</div> </div>
<div className="grid grid-cols-3 gap-3"> {/* WHO Standards Cards */}
<div className="grid grid-cols-3 gap-3 mb-3">
<div className={`p-3 rounded-lg hover:shadow-md transition-shadow ${latest?.weight_kg && latest.weight_kg < standard.weight.p3 ? "bg-red-100 dark:bg-red-900" : latest?.weight_kg && latest.weight_kg > standard.weight.p85 ? "bg-amber-100 dark:bg-amber-900" : "bg-green-50 dark:bg-green-900"}`}> <div className={`p-3 rounded-lg hover:shadow-md transition-shadow ${latest?.weight_kg && latest.weight_kg < standard.weight.p3 ? "bg-red-100 dark:bg-red-900" : latest?.weight_kg && latest.weight_kg > standard.weight.p85 ? "bg-amber-100 dark:bg-amber-900" : "bg-green-50 dark:bg-green-900"}`}>
<div className="text-gray-500 mb-1 text-xs">Weight</div> <div className="text-gray-500 mb-1 text-xs">Weight</div>
<div className="font-medium text-lg">{standard.weight.p50} kg</div> <div className="font-medium text-lg">{standard.weight.p50} kg</div>
@ -535,39 +546,35 @@ export default function GrowthPage() {
{/* Growth velocity indicator */} {/* Growth velocity indicator */}
{velocity && ( {velocity && (
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700"> <div className="flex items-center gap-2 text-sm mb-3">
<div className="flex items-center gap-2 text-sm">
<span className="text-gray-500">Velocity:</span> <span className="text-gray-500">Velocity:</span>
<span className={`font-medium ${velocity.direction === "up" ? "text-green-600" : "text-amber-600"}`}> <span className={`font-medium ${velocity.direction === "up" ? "text-green-600" : "text-amber-600"}`}>
{velocity.weight} kg/month {velocity.direction === "up" ? "↑" : "↓"} {velocity.weight} kg/month {velocity.direction === "up" ? "↑" : "↓"}
</span> </span>
</div> </div>
</div>
)}
</div>
)} )}
{/* Growth Chart */} {/* Growth Chart - Inside collapsible card */}
{chartData && growthData.length > 0 && ( {chartData && growthData.length > 0 && (
<div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl"> <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-2">
<h2 className="font-semibold">Growth Chart</h2> <h3 className="font-semibold text-sm">Growth Chart</h3>
<div className="flex gap-1"> <div className="flex gap-1">
<button <button
onClick={() => setChartMetric("weight")} onClick={() => setChartMetric("weight")}
className={`px-3 py-1 text-xs rounded ${chartMetric === "weight" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`} className={`px-2 py-1 text-xs rounded ${chartMetric === "weight" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
> >
Weight Weight
</button> </button>
<button <button
onClick={() => setChartMetric("height")} onClick={() => setChartMetric("height")}
className={`px-3 py-1 text-xs rounded ${chartMetric === "height" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`} className={`px-2 py-1 text-xs rounded ${chartMetric === "height" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
> >
Height Height
</button> </button>
<button <button
onClick={() => setChartMetric("head")} onClick={() => setChartMetric("head")}
className={`px-3 py-1 text-xs rounded ${chartMetric === "head" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`} className={`px-2 py-1 text-xs rounded ${chartMetric === "head" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
> >
Head Head
</button> </button>
@ -576,6 +583,10 @@ export default function GrowthPage() {
<Line data={chartData} options={chartOptions} /> <Line data={chartData} options={chartOptions} />
</div> </div>
)} )}
</div>
)}
</div>
)}
{/* Add/Edit Form */} {/* Add/Edit Form */}
{showAdd && ( {showAdd && (