From a3d0b06501783cc15c0d3d0305febacd8e131103 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 17 May 2026 14:57:51 +0530
Subject: [PATCH] fix(growth): show age in years+months format

- Show age as "1y 4mo" instead of just months
- Add formatAge helper function
- Apply to Latest Reading and WHO card

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

diff --git a/src/app/growth/page.tsx b/src/app/growth/page.tsx
index 87e5f78..3680bf6 100644
--- a/src/app/growth/page.tsx
+++ b/src/app/growth/page.tsx
@@ -44,6 +44,23 @@ interface Goal {
   targetDate?: string;
 }
 
+function formatAge(birthDate: string, measurementDate?: string): string {
+  const birth = new Date(birthDate);
+  const now = measurementDate ? new Date(measurementDate) : new Date();
+  const years = Math.floor((now.getTime() - birth.getTime()) / (1000 * 60 * 60 * 24 * 365));
+  const months = Math.floor(((now.getTime() - birth.getTime()) % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30));
+
+  if (years > 0 && months > 0) {
+    return `${years}y ${months}mo`;
+  } else if (years > 0) {
+    return `${years}y`;
+  } else if (months > 0) {
+    return `${months}mo`;
+  } else {
+    return "Newborn";
+  }
+}
+
 export default function GrowthPage() {
   const { childId, child, familyId } = useFamily();
   const { theme } = useTheme();
@@ -415,7 +432,9 @@ export default function GrowthPage() {
           <div className="flex justify-between items-center mb-3">
             <div>
               <div className="font-semibold text-rose-600 dark:text-rose-300">Latest Reading</div>
-              <div className="text-sm text-gray-500">{new Date(latest.measured_at).toLocaleDateString()}</div>
+              <div className="text-sm text-gray-500">
+                {new Date(latest.measured_at).toLocaleDateString()} ({child ? formatAge(child.birthDate, latest.measured_at) : ""})
+              </div>
             </div>
             {velocity && (
               <div className={`text-sm font-medium ${velocity.direction === "up" ? "text-green-500" : "text-amber-500"}`}>
@@ -480,8 +499,8 @@ export default function GrowthPage() {
             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="font-semibold text-lg">{child.name}</div>
+              <div className="text-sm text-gray-500">{formatAge(child.birthDate)}</div>
             </div>
             <div className="flex items-center gap-2">
               {savedGoals.weightKg && (