From 0ea81b329a882b38923eb031e17ecc629c02eca9 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 17 May 2026 14:46:11 +0530
Subject: [PATCH] fix(growth): move latest card to top, remove duplicate

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/growth/page.tsx | 118 ++++++++++++++++++++--------------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/app/growth/page.tsx b/src/app/growth/page.tsx
index befe2b3..9b61b59 100644
--- a/src/app/growth/page.tsx
+++ b/src/app/growth/page.tsx
@@ -406,6 +406,65 @@ export default function GrowthPage() {
         </div>
       )}
 
+      {/* Latest Reading Card */}
+      {latest && (
+        <div className="mx-4 mb-4 p-4 bg-rose-100 dark:bg-rose-900 rounded-xl">
+          <div className="text-sm text-gray-600 dark:text-gray-300 mb-2">
+            Latest: {new Date(latest.measured_at).toLocaleDateString()}
+            {velocity && (
+              <span className="ml-2 text-green-600">
+                ({velocity.weight}kg/mo {velocity.direction === "up" ? "↑" : "↓"})
+              </span>
+            )}
+          </div>
+          <div className="flex gap-4">
+            {latest.weight_kg && (
+              <div>
+                <div className="text-gray-500 text-xs">Weight</div>
+                <div className="text-xl font-bold">{latest.weight_kg} kg</div>
+                {weightPercentile && (
+                  <div className={`text-xs font-medium ${getPercentileColor(weightPercentile)}`}>
+                    {weightPercentile} percentile
+                    {savedGoals.weightKg && (
+                      <span className="ml-1">
+                        → {((latest.weight_kg / savedGoals.weightKg) * 100).toFixed(0)}% of goal
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+            {latest.height_cm && (
+              <div>
+                <div className="text-gray-500 text-xs">Height</div>
+                <div className="text-xl font-bold">{latest.height_cm} cm</div>
+                {heightPercentile && (
+                  <div className={`text-xs font-medium ${getPercentileColor(heightPercentile)}`}>
+                    {heightPercentile} percentile
+                    {savedGoals.heightCm && (
+                      <span className="ml-1">
+                        → {((latest.height_cm / savedGoals.heightCm) * 100).toFixed(0)}% of goal
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+            {latest.head_circumference_cm && (
+              <div>
+                <div className="text-gray-500 text-xs">Head</div>
+                <div className="text-xl font-bold">{latest.head_circumference_cm} cm</div>
+                {headPercentile && (
+                  <div className={`text-xs font-medium ${getPercentileColor(headPercentile)}`}>
+                    {headPercentile} percentile
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* WHO Standards Card - Enhanced with age-wise targets */}
       {child && standard && (
         <div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl">
@@ -515,65 +574,6 @@ export default function GrowthPage() {
         </div>
       )}
 
-      {/* Latest Reading Card */}
-      {latest && (
-        <div className="mx-4 mb-4 p-4 bg-rose-100 dark:bg-rose-900 rounded-xl">
-          <div className="text-sm text-gray-600 dark:text-gray-300 mb-2">
-            Latest: {new Date(latest.measured_at).toLocaleDateString()}
-            {velocity && (
-              <span className="ml-2 text-green-600">
-                ({velocity.weight}kg/mo {velocity.direction === "up" ? "↑" : "↓"})
-              </span>
-            )}
-          </div>
-          <div className="flex gap-4">
-            {latest.weight_kg && (
-              <div>
-                <div className="text-gray-500 text-xs">Weight</div>
-                <div className="text-xl font-bold">{latest.weight_kg} kg</div>
-                {weightPercentile && (
-                  <div className={`text-xs font-medium ${getPercentileColor(weightPercentile)}`}>
-                    {weightPercentile} percentile
-                    {savedGoals.weightKg && (
-                      <span className="ml-1">
-                        → {((latest.weight_kg / savedGoals.weightKg) * 100).toFixed(0)}% of goal
-                      </span>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-            {latest.height_cm && (
-              <div>
-                <div className="text-gray-500 text-xs">Height</div>
-                <div className="text-xl font-bold">{latest.height_cm} cm</div>
-                {heightPercentile && (
-                  <div className={`text-xs font-medium ${getPercentileColor(heightPercentile)}`}>
-                    {heightPercentile} percentile
-                    {savedGoals.heightCm && (
-                      <span className="ml-1">
-                        → {((latest.height_cm / savedGoals.heightCm) * 100).toFixed(0)}% of goal
-                      </span>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-            {latest.head_circumference_cm && (
-              <div>
-                <div className="text-gray-500 text-xs">Head</div>
-                <div className="text-xl font-bold">{latest.head_circumference_cm} cm</div>
-                {headPercentile && (
-                  <div className={`text-xs font-medium ${getPercentileColor(headPercentile)}`}>
-                    {headPercentile} percentile
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
       {/* Add/Edit Form */}
       {showAdd && (
         <div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">