From f82fca224d91f0f1104ad8f1c7f159c152b2c9f1 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 17 May 2026 15:05:01 +0530
Subject: [PATCH] style(growth): collapsible WHO+Chart, collapsed view with
 icons, collapsible history
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/app/growth/page.tsx | 149 +++++++++++++++++++++-------------------
 1 file changed, 80 insertions(+), 69 deletions(-)

diff --git a/src/app/growth/page.tsx b/src/app/growth/page.tsx
index 3680bf6..3e7d581 100644
--- a/src/app/growth/page.tsx
+++ b/src/app/growth/page.tsx
@@ -510,7 +510,30 @@ export default function GrowthPage() {
             </div>
           </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 && (
             <div className="px-4 pb-4">
               {/* Color-coded percentile zones legend */}
@@ -573,33 +596,17 @@ export default function GrowthPage() {
                 </div>
               )}
 
-              {/* Growth Chart - Inside collapsible card */}
+              {/* Growth Chart - Collapsible inside expanded view */}
               {chartData && growthData.length > 0 && (
                 <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
-                        onClick={() => setChartMetric("weight")}
-                        className={`px-2 py-1 text-xs rounded ${chartMetric === "weight" ? "bg-rose-400 text-white" : "bg-gray-100 dark:bg-gray-700"}`}
-                      >
-                        Weight
-                      </button>
-                      <button
-                        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} />
+                  <button
+                    onClick={() => setShowChart(!showChart)}
+                    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"
+                  >
+                    <h3 className="font-semibold text-sm">📈 Growth Chart</h3>
+                    <span className={`transform transition-transform ${showChart ? "rotate-180" : ""}`}>▼</span>
+                  </button>
+                  {showChart && <Line data={chartData} options={chartOptions} />}
                 </div>
               )}
             </div>
@@ -685,51 +692,55 @@ export default function GrowthPage() {
           </button>
         </div>
       ) : (
-        /* History List */
-        <div className="px-4 space-y-2">
-          <h3 className="font-semibold mb-2">History</h3>
-          {growthData.map((record: any, i: number) => (
-            <div key={i} className="p-4 bg-white dark:bg-gray-800 rounded-xl hover:shadow-lg transition-shadow flex justify-between items-center">
-              <div>
-                <div className="text-sm text-gray-500">
-                  {new Date(record.measured_at).toLocaleDateString()}
+        /* History List - Collapsible */
+        <div className="mx-4 mb-4 bg-white dark:bg-gray-800 rounded-xl overflow-hidden">
+          <button
+            onClick={() => setShowHistory(!showHistory)}
+            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 className="text-sm text-gray-500">
+                      {new Date(record.measured_at).toLocaleDateString()} ({child ? formatAge(child.birthDate, record.measured_at) : ""})
+                    </div>
+                    <div className="flex gap-2 mt-1">
+                      {record.weight_kg && (
+                        <span className="px-2 py-0.5 bg-white dark:bg-gray-600 rounded text-xs">⚖️ {record.weight_kg}kg</span>
+                      )}
+                      {record.height_cm && (
+                        <span className="px-2 py-0.5 bg-white dark:bg-gray-600 rounded text-xs">📏 {record.height_cm}cm</span>
+                      )}
+                      {record.head_circumference_cm && (
+                        <span className="px-2 py-0.5 bg-white dark:bg-gray-600 rounded text-xs">⭕ {record.head_circumference_cm}cm</span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex gap-1">
+                    <button
+                      onClick={() => startEdit(record)}
+                      className="p-2 text-sm text-gray-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900 rounded-lg transition-colors"
+                      title="Edit"
+                    >
+                      ✏️
+                    </button>
+                    <button
+                      onClick={() => handleDelete(record.id)}
+                      className="p-2 text-sm text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900 rounded-lg transition-colors"
+                      title="Delete"
+                    >
+                      🗑️
+                    </button>
+                  </div>
                 </div>
-                <div className="flex gap-4 mt-2">
-                  {record.weight_kg && (
-                    <div className="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm">
-                      ⚖️ {record.weight_kg} kg
-                    </div>
-                  )}
-                  {record.height_cm && (
-                    <div className="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm">
-                      📏 {record.height_cm} cm
-                    </div>
-                  )}
-                  {record.head_circumference_cm && (
-                    <div className="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm">
-                      ⭕ {record.head_circumference_cm} cm
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div className="flex gap-1">
-                <button
-                  onClick={() => startEdit(record)}
-                  className="p-2 text-sm text-gray-400 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900 rounded-lg transition-colors"
-                  title="Edit"
-                >
-                  ✏️
-                </button>
-                <button
-                  onClick={() => handleDelete(record.id)}
-                  className="p-2 text-sm text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900 rounded-lg transition-colors"
-                  title="Delete"
-                >
-                  🗑️
-                </button>
-              </div>
+              ))}
             </div>
-          ))}
+          )}
         </div>
       )}
     </div>