From a14d8e7043f67f7ed8030c6e382745c2de69c11b Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sat, 23 May 2026 23:35:32 +0530
Subject: [PATCH] Fix activity page repetition + 4-day strip layout + guideline
 accuracy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove redundant daily summary bar (Today chip in 4-day strip covers it)
- 4-day strip: reversed to oldest→newest order (Wed→Thu→Yest.→Today)
- 4-day strip: switched from flex to grid grid-cols-4 so all 4 chips
  fill the full row width evenly instead of floating left
- Today chip highlighted in rose-400 to stand out from past days
- Guidelines: corrected 9-12 mo (feeds 3→4, sleep 12→14h, diapers 3→4)
  per AAP; 12-18 mo sleep 11→13h, diapers 3→4; 18-24 mo sleep 11→12h,
  diapers 2→3; all now match mid-range AAP recommendations

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/activity/page.tsx | 47 +++++++++++++++++----------------------
 src/lib/guidelines.ts     | 20 ++++++++---------
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/src/app/activity/page.tsx b/src/app/activity/page.tsx
index cc50b00..842e160 100644
--- a/src/app/activity/page.tsx
+++ b/src/app/activity/page.tsx
@@ -213,33 +213,28 @@ export default function ActivityPage() {
 
       {!loading && (
         <>
-          {/* Daily summary bar */}
-          <div className="mx-4 mb-3 bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden">
-            <div className="grid grid-cols-3 divide-x divide-gray-100 dark:divide-gray-700">
-              {[
-                { icon: "🍼", label: "Feeds",   count: todayCounts.feed },
-                { icon: "🚼", label: "Diapers", count: todayCounts.diaper },
-                { icon: "😴", label: "Sleep",   count: todayCounts.sleep },
-              ].map(item => (
-                <div key={item.label} className="flex flex-col items-center py-2 px-1">
-                  <span className="text-lg">{item.icon}</span>
-                  <span className="text-lg font-bold">{item.count}</span>
-                  <span className="text-xs text-gray-400">today</span>
+          {/* 4-day overview strip — oldest → newest (left → right) */}
+          <div className="grid grid-cols-4 gap-2 px-4 mb-3">
+            {[...last4Days].reverse().map(d => {
+              const isToday = d.label === "Today";
+              return (
+                <div
+                  key={d.label}
+                  className={`rounded-xl px-2 py-2 shadow-sm text-center ${
+                    isToday
+                      ? "bg-rose-400 text-white"
+                      : "bg-white dark:bg-gray-800"
+                  }`}
+                >
+                  <p className={`text-xs font-semibold mb-1 ${isToday ? "text-rose-100" : "text-gray-500 dark:text-gray-400"}`}>
+                    {d.label}
+                  </p>
+                  <p className={`text-xs ${isToday ? "text-white" : "text-gray-600 dark:text-gray-300"}`}>🍼×{d.feed}</p>
+                  <p className={`text-xs ${isToday ? "text-white" : "text-gray-600 dark:text-gray-300"}`}>😴×{d.sleep}</p>
+                  <p className={`text-xs ${isToday ? "text-white" : "text-gray-600 dark:text-gray-300"}`}>🚼×{d.diaper}</p>
                 </div>
-              ))}
-            </div>
-          </div>
-
-          {/* 4-day overview strip */}
-          <div className="flex gap-2 px-4 mb-3 overflow-x-auto scrollbar-hide">
-            {last4Days.map(d => (
-              <div key={d.label} className="flex-shrink-0 bg-white dark:bg-gray-800 rounded-xl px-3 py-2 shadow-sm min-w-[68px] text-center">
-                <p className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{d.label}</p>
-                <p className="text-xs text-gray-600 dark:text-gray-300">🍼×{d.feed}</p>
-                <p className="text-xs text-gray-600 dark:text-gray-300">😴×{d.sleep}</p>
-                <p className="text-xs text-gray-600 dark:text-gray-300">🚼×{d.diaper}</p>
-              </div>
-            ))}
+              );
+            })}
           </div>
 
           {/* Collapsible guidelines card */}
diff --git a/src/lib/guidelines.ts b/src/lib/guidelines.ts
index 5a24490..9db8067 100644
--- a/src/lib/guidelines.ts
+++ b/src/lib/guidelines.ts
@@ -46,26 +46,26 @@ export const guidelines: Guideline[] = [
   {
     minAgeMonths: 9,
     maxAgeMonths: 12,
-    label: "Toddler (9-12 mo)",
-    feeds: { times: 3, notes: "3 meals + 2 snacks" },
-    sleep: { totalHours: 12, notes: "1-2 naps/day" },
-    diapers: { count: 3, notes: "May start potty training" },
+    label: "Baby (9-12 mo)",
+    feeds: { times: 4, notes: "3 meals + 2 snacks + formula/breast milk" },
+    sleep: { totalHours: 14, notes: "2 naps/day, 10-12h night" },
+    diapers: { count: 4, notes: "4-6 wet diapers expected" },
   },
   {
     minAgeMonths: 12,
     maxAgeMonths: 18,
     label: "Toddler (12-18 mo)",
-    feeds: { times: 3, notes: "Family meals" },
-    sleep: { totalHours: 11, notes: "1 nap/day" },
-    diapers: { count: 3, notes: "Potty training begins" },
+    feeds: { times: 3, notes: "3 meals + 2 snacks" },
+    sleep: { totalHours: 13, notes: "1 nap + 11h night (11-14h total)" },
+    diapers: { count: 4, notes: "4-6 wet diapers" },
   },
   {
     minAgeMonths: 18,
     maxAgeMonths: 24,
     label: "Toddler (18-24 mo)",
-    feeds: { times: 3, notes: "Family meals" },
-    sleep: { totalHours: 11, notes: "1 nap/day" },
-    diapers: { count: 2, notes: "Potty training" },
+    feeds: { times: 3, notes: "3 meals + 2 snacks" },
+    sleep: { totalHours: 12, notes: "1 nap + 10-11h night (11-14h total)" },
+    diapers: { count: 3, notes: "3-5 wet, potty training begins" },
   },
 ];