style(growth): collapsible WHO+Chart, collapsed view with icons, collapsible history
- WHO card shows icons + values when collapsed (⚖️ 📏 ⭕) - Chart is collapsible inside expanded WHO view - History is collapsible with scroll for many records - Add formatAge to history items Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
a3d0b06501
commit
f82fca224d
1 changed files with 80 additions and 69 deletions
|
|
@ -510,7 +510,30 @@ export default function GrowthPage() {
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* WHO Standards Content - Collapsible */}
|
{/* When collapsed - Show recommended values with icons */}
|
||||||
|
{!showWhoStandards && (
|
||||||
|
<div className="px-4 pb-4">
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<div className={`p-3 rounded-lg text-center ${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-2xl mb-1">⚖️</div>
|
||||||
|
<div className="font-medium">{standard.weight.p50} kg</div>
|
||||||
|
<div className="text-xs text-gray-500">{standard.weight.p3}-{standard.weight.p97}</div>
|
||||||
|
</div>
|
||||||
|
<div className={`p-3 rounded-lg text-center ${latest?.height_cm && latest.height_cm < standard.height.p3 ? "bg-red-100 dark:bg-red-900" : latest?.height_cm && latest.height_cm > standard.height.p85 ? "bg-amber-100 dark:bg-amber-900" : "bg-green-50 dark:bg-green-900"}`}>
|
||||||
|
<div className="text-2xl mb-1">📏</div>
|
||||||
|
<div className="font-medium">{standard.height.p50} cm</div>
|
||||||
|
<div className="text-xs text-gray-500">{standard.height.p3}-{standard.height.p97}</div>
|
||||||
|
</div>
|
||||||
|
<div className={`p-3 rounded-lg text-center ${latest?.head_circumference_cm && latest.head_circumference_cm < standard.headCircumference.p3 ? "bg-red-100 dark:bg-red-900" : latest?.head_circumference_cm && latest.head_circumference_cm > standard.headCircumference.p85 ? "bg-amber-100 dark:bg-amber-900" : "bg-green-50 dark:bg-green-900"}`}>
|
||||||
|
<div className="text-2xl mb-1">⭕</div>
|
||||||
|
<div className="font-medium">{standard.headCircumference.p50} cm</div>
|
||||||
|
<div className="text-xs text-gray-500">{standard.headCircumference.p3}-{standard.headCircumference.p97}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* When expanded - Show full details + chart */}
|
||||||
{showWhoStandards && (
|
{showWhoStandards && (
|
||||||
<div className="px-4 pb-4">
|
<div className="px-4 pb-4">
|
||||||
{/* Color-coded percentile zones legend */}
|
{/* Color-coded percentile zones legend */}
|
||||||
|
|
@ -573,33 +596,17 @@ export default function GrowthPage() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Growth Chart - Inside collapsible card */}
|
{/* Growth Chart - Collapsible inside expanded view */}
|
||||||
{chartData && growthData.length > 0 && (
|
{chartData && growthData.length > 0 && (
|
||||||
<div className="border-t border-gray-200 dark:border-gray-700 pt-3">
|
<div className="border-t border-gray-200 dark:border-gray-700 pt-3">
|
||||||
<div className="flex justify-between items-center mb-2">
|
|
||||||
<h3 className="font-semibold text-sm">Growth Chart</h3>
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setChartMetric("weight")}
|
onClick={() => setShowChart(!showChart)}
|
||||||
className={`px-2 py-1 text-xs rounded ${chartMetric === "weight" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
|
className="w-full flex justify-between items-center mb-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 -mx-2 transition-colors"
|
||||||
>
|
>
|
||||||
Weight
|
<h3 className="font-semibold text-sm">📈 Growth Chart</h3>
|
||||||
|
<span className={`transform transition-transform ${showChart ? "rotate-180" : ""}`}>▼</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
{showChart && <Line data={chartData} options={chartOptions} />}
|
||||||
onClick={() => setChartMetric("height")}
|
|
||||||
className={`px-2 py-1 text-xs rounded ${chartMetric === "height" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
|
|
||||||
>
|
|
||||||
Height
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setChartMetric("head")}
|
|
||||||
className={`px-2 py-1 text-xs rounded ${chartMetric === "head" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
|
|
||||||
>
|
|
||||||
Head
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Line data={chartData} options={chartOptions} />
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -685,30 +692,32 @@ export default function GrowthPage() {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
/* History List */
|
/* History List - Collapsible */
|
||||||
<div className="px-4 space-y-2">
|
<div className="mx-4 mb-4 bg-white dark:bg-gray-800 rounded-xl overflow-hidden">
|
||||||
<h3 className="font-semibold mb-2">History</h3>
|
<button
|
||||||
{growthData.map((record: any, i: number) => (
|
onClick={() => setShowHistory(!showHistory)}
|
||||||
<div key={i} className="p-4 bg-white dark:bg-gray-800 rounded-xl hover:shadow-lg transition-shadow flex justify-between items-center">
|
className="w-full p-4 flex justify-between items-center hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="font-semibold">History ({growthData.length} records)</div>
|
||||||
|
<span className={`transform transition-transform ${showHistory ? "rotate-180" : ""}`}>▼</span>
|
||||||
|
</button>
|
||||||
|
{showHistory && (
|
||||||
|
<div className="px-4 pb-4 space-y-2 max-h-96 overflow-y-auto">
|
||||||
|
{growthData.map((record, i) => (
|
||||||
|
<div key={i} className="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg hover:shadow-md transition-shadow flex justify-between items-center">
|
||||||
<div>
|
<div>
|
||||||
<div className="text-sm text-gray-500">
|
<div className="text-sm text-gray-500">
|
||||||
{new Date(record.measured_at).toLocaleDateString()}
|
{new Date(record.measured_at).toLocaleDateString()} ({child ? formatAge(child.birthDate, record.measured_at) : ""})
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-4 mt-2">
|
<div className="flex gap-2 mt-1">
|
||||||
{record.weight_kg && (
|
{record.weight_kg && (
|
||||||
<div className="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm">
|
<span className="px-2 py-0.5 bg-white dark:bg-gray-600 rounded text-xs">⚖️ {record.weight_kg}kg</span>
|
||||||
⚖️ {record.weight_kg} kg
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
{record.height_cm && (
|
{record.height_cm && (
|
||||||
<div className="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm">
|
<span className="px-2 py-0.5 bg-white dark:bg-gray-600 rounded text-xs">📏 {record.height_cm}cm</span>
|
||||||
📏 {record.height_cm} cm
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
{record.head_circumference_cm && (
|
{record.head_circumference_cm && (
|
||||||
<div className="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm">
|
<span className="px-2 py-0.5 bg-white dark:bg-gray-600 rounded text-xs">⭕ {record.head_circumference_cm}cm</span>
|
||||||
⭕ {record.head_circumference_cm} cm
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -733,5 +742,7 @@ export default function GrowthPage() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Add table
Reference in a new issue