From 3db6fb271098f4f2add7750ed7d8556f8f353f8f Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sat, 23 May 2026 23:47:20 +0530
Subject: [PATCH] Activity: guidelines above strip, interactive day chips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Moved guidelines row ABOVE the 4-day strip (correct order)
- 4-day strip: each chip is now tappable
  → opens a day-detail bottom sheet showing all logs for that day
  → each log row has ‹ › arrow; tap opens edit/delete action sheet
  → empty state tells mama to use Generate sample history to pre-fill
  → quick-add row at bottom (+ Feed / + Sleep / + Diaper) for fast logging

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

diff --git a/src/app/activity/page.tsx b/src/app/activity/page.tsx
index 842e160..6523919 100644
--- a/src/app/activity/page.tsx
+++ b/src/app/activity/page.tsx
@@ -49,6 +49,7 @@ export default function ActivityPage() {
   const [deleteConfirm, setDeleteConfirm]   = useState(false);
   const [smartDefault, setSmartDefault] = useState<SmartDefault | null>(null);
   const [pendingDeleteId, setPendingDeleteId] = useState<{ id: string; type: string } | null>(null);
+  const [daySheetDate, setDaySheetDate]   = useState<string | null>(null);
   const childId = providerChildId ?? "";
 
   useEffect(() => {
@@ -113,6 +114,7 @@ export default function ActivityPage() {
     const dateStr = d.toDateString();
     const dayLogs = logs.filter(l => new Date(l.loggedAt).toDateString() === dateStr);
     return {
+      date:   dateStr,
       label:  i === 0 ? "Today" : i === 1 ? "Yest." : d.toLocaleDateString("en-IN", { weekday: "short" }),
       feed:   dayLogs.filter(l => l.type === "feed").length,
       sleep:  dayLogs.filter(l => l.type === "sleep").length,
@@ -213,31 +215,7 @@ export default function ActivityPage() {
 
       {!loading && (
         <>
-          {/* 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>
-
-          {/* Collapsible guidelines card */}
+          {/* Collapsible guidelines card — above strip */}
           {child && guide && showSuggested && (
             <div className="mx-4 mb-3">
               <button
@@ -279,6 +257,29 @@ export default function ActivityPage() {
               )}
             </div>
           )}
+
+          {/* 4-day overview strip — oldest → newest, each chip tappable */}
+          <div className="grid grid-cols-4 gap-2 px-4 mb-3">
+            {[...last4Days].reverse().map(d => {
+              const isToday = d.label === "Today";
+              return (
+                <button
+                  key={d.label}
+                  onClick={() => setDaySheetDate(d.date)}
+                  className={`rounded-xl px-2 py-2 shadow-sm text-center active:scale-95 transition-transform ${
+                    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>
+                </button>
+              );
+            })}
+          </div>
         </>
       )}
 
@@ -441,6 +442,88 @@ export default function ActivityPage() {
         </>
       )}
 
+      {/* Day detail sheet — tap a day chip to view & edit that day's logs */}
+      {daySheetDate && (() => {
+        const sheetLogs = logs
+          .filter(l => new Date(l.loggedAt).toDateString() === daySheetDate)
+          .sort((a, b) => new Date(b.loggedAt).getTime() - new Date(a.loggedAt).getTime());
+        const sheetLabel = formatDayLabel(daySheetDate);
+        return (
+          <>
+            <div
+              className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50"
+              onClick={() => setDaySheetDate(null)}
+            />
+            <div className="fixed bottom-0 inset-x-0 z-50 bg-white dark:bg-gray-900 rounded-t-2xl shadow-xl flex flex-col max-h-[75vh]">
+              {/* Sheet header */}
+              <div className="flex items-center justify-between px-4 pt-4 pb-3 border-b border-gray-100 dark:border-gray-800">
+                <div>
+                  <h3 className="font-semibold text-gray-900 dark:text-white">{sheetLabel}</h3>
+                  <p className="text-xs text-gray-400 mt-0.5">
+                    {sheetLogs.length} log{sheetLogs.length !== 1 ? "s" : ""} · tap any entry to edit or delete
+                  </p>
+                </div>
+                <button
+                  onClick={() => setDaySheetDate(null)}
+                  className="p-2 text-gray-400 text-lg"
+                >✕</button>
+              </div>
+
+              {/* Log list */}
+              <div className="overflow-y-auto flex-1 p-4 space-y-2">
+                {sheetLogs.length === 0 ? (
+                  <div className="text-center py-10 text-gray-400">
+                    <p className="text-3xl mb-2">📋</p>
+                    <p className="text-sm font-medium">No logs for {sheetLabel}</p>
+                    <p className="text-xs mt-1 text-gray-300">Use ⋯ → Generate sample history to pre-fill your schedule</p>
+                  </div>
+                ) : (
+                  sheetLogs.map(log => (
+                    <button
+                      key={log.id}
+                      onClick={() => { setSelectedLog(log); setDeleteConfirm(false); setDaySheetDate(null); }}
+                      className="w-full flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl text-left active:scale-[0.98] transition-transform"
+                    >
+                      <span className="text-2xl">{getIcon(log.type)}</span>
+                      <div className="flex-1 min-w-0">
+                        <div className="font-medium capitalize">{log.type}</div>
+                        <div className="text-sm text-gray-500 dark:text-gray-400 truncate">
+                          {[
+                            log.subType?.replace(/_/g, " "),
+                            log.amount ? `${log.amount}ml` : null,
+                            log.notes,
+                          ].filter(Boolean).join(" · ")}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <span className="text-sm text-gray-400">
+                          {new Date(log.loggedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                        </span>
+                        <span className="text-gray-300 text-lg">›</span>
+                      </div>
+                    </button>
+                  ))
+                )}
+              </div>
+
+              {/* Quick-add row */}
+              <div className="px-4 py-3 border-t border-gray-100 dark:border-gray-800 flex gap-2">
+                {(["feed", "sleep", "diaper"] as ModalLogType[]).map(t => (
+                  <button
+                    key={t}
+                    onClick={() => { setDaySheetDate(null); setModalType(t); }}
+                    className="flex-1 flex flex-col items-center gap-0.5 py-2 bg-gray-50 dark:bg-gray-800 rounded-xl text-sm"
+                  >
+                    <span className="text-lg">{t === "feed" ? "🍼" : t === "sleep" ? "😴" : "🚼"}</span>
+                    <span className="text-xs text-gray-500 capitalize">+ {t}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </>
+        );
+      })()}
+
       <LogModal
         type={modalType}
         childId={childId}