From 5fe24b8c5986d8613d6d3e14c30d8ce7bee975c0 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Mon, 18 May 2026 23:24:28 +0530
Subject: [PATCH] feat(settings): move growth CSV export from growth header to
 settings page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove 📥 export button from growth page header (less clutter)
- Add "Export Growth Data" row in settings with child name and CSV download
- Fetches growth records on demand, shows loading state while exporting

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/growth/page.tsx   |  7 ------
 src/app/settings/page.tsx | 47 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/app/growth/page.tsx b/src/app/growth/page.tsx
index 43f18e6..252c357 100644
--- a/src/app/growth/page.tsx
+++ b/src/app/growth/page.tsx
@@ -345,13 +345,6 @@ export default function GrowthPage() {
           <h1 className="text-sm font-semibold dark:text-white">Growth 📈</h1>
         </div>
         <div className="flex items-center gap-2">
-          <button
-            onClick={exportCSV}
-            title="Export CSV"
-            className="p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm"
-          >
-            📥
-          </button>
           <button
             title="Set goals"
             onClick={() => { setShowGoals(g => !g); setShowAdd(false); setEditingId(null); }}
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index bacd771..b7c62a6 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -27,7 +27,8 @@ interface Invite {
 export default function SettingsPage() {
   const router = useRouter();
   const { theme, mode, setMode } = useTheme();
-  const { tier, memberCount, familyId, children, familyName: providerFamilyName } = useFamily();
+  const { tier, memberCount, familyId, children, familyName: providerFamilyName, childId, child } = useFamily();
+  const [exporting, setExporting] = useState(false);
   const [themeOpen, setThemeOpen] = useState(false);
   const [inviteOpen, setInviteOpen] = useState(false);
   const [familyOpen, setFamilyOpen] = useState(true);
@@ -62,6 +63,34 @@ export default function SettingsPage() {
     }
   }, [familyId]);
 
+  const exportGrowthCSV = async () => {
+    if (!childId) return;
+    setExporting(true);
+    try {
+      const res = await fetch(`/api/growth?childId=${childId}`);
+      const data = await res.json();
+      const records = data.growth || [];
+      if (records.length === 0) { alert("No growth records to export."); return; }
+      const headers = ["Date", "Weight (kg)", "Height (cm)", "Head (cm)", "Notes"];
+      const rows = records.map((r: { measured_at: string; weight_kg: number | null; height_cm: number | null; head_circumference_cm: number | null; notes: string | null }) => [
+        new Date(r.measured_at).toLocaleDateString(),
+        r.weight_kg ?? "",
+        r.height_cm ?? "",
+        r.head_circumference_cm ?? "",
+        r.notes ?? "",
+      ]);
+      const csv = [headers, ...rows].map(row => row.join(",")).join("\n");
+      const blob = new Blob([csv], { type: "text/csv" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${child?.name || "child"}_growth_${new Date().toISOString().split("T")[0]}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch { alert("Export failed. Please try again."); }
+    setExporting(false);
+  };
+
   const savePedPhone = async () => {
     setPedSaving(true);
     await fetch("/api/family", {
@@ -315,6 +344,22 @@ export default function SettingsPage() {
           </Link>
         </div>
 
+        {/* Export Data */}
+        <button
+          onClick={exportGrowthCSV}
+          disabled={exporting || !childId}
+          className="w-full flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors disabled:opacity-50"
+        >
+          <div className="flex items-center gap-3">
+            <span className="text-xl">📥</span>
+            <div>
+              <div className="font-medium text-left">Export Growth Data</div>
+              <div className="text-xs text-gray-400 text-left">Download {child?.name ? `${child.name}'s` : "growth"} records as CSV</div>
+            </div>
+          </div>
+          <span className="text-gray-400 text-sm">{exporting ? "…" : "→"}</span>
+        </button>
+
         {/* App Version */}
         <div className="p-4 bg-white dark:bg-gray-800 rounded-xl mt-4">
           <div className="font-medium">App Version</div>