fix: notifications page — wire to real API, make Mark all read functional

- Replaced hardcoded mock data with real call to /api/notifications?childId=
- Read/unread state stored in localStorage (tia_read_notifications) since
  notifications are computed on-the-fly from vaccination schedule, no DB row
- Tapping a notification marks it read individually
- Mark all read button appears in header only when there are unread items
- Unread count badge shown in header
- Empty state now says "All caught up!" instead of generic "No notifications"
- Shows 🚨 for overdue vaccines, 💉 for due-today
- Added due date display in IST-formatted date

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/(app)/notifications/page.tsx

@@ -1,58 +1,147 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { useFamily } from "@/app/FamilyProvider";
+import { fmtDate } from "@/lib/date-ist";
 
 interface Notification {
   id: string;
+  type: string;
   title: string;
   message: string;
-  time: string;
+  dueDate?: string;
-  read: boolean;
+  status?: string;
+  childName?: string;
+}
+
+const READ_KEY = "tia_read_notifications";
+
+function getReadSet(): Set<string> {
+  try {
+    const raw = localStorage.getItem(READ_KEY);
+    return new Set(raw ? JSON.parse(raw) : []);
+  } catch { return new Set(); }
+}
+
+function saveReadSet(ids: Set<string>) {
+  localStorage.setItem(READ_KEY, JSON.stringify([...ids]));
 }
 
 export default function NotificationsPage() {
   const router = useRouter();
-  const [notifications] = useState<Notification[]>([
+  const { childId } = useFamily();
-    { id: "1", title: "Reminder", message: "Time to log today's feed", time: "2 hours ago", read: false },
+  const [notifications, setNotifications] = useState<Notification[]>([]);
-    { id: "2", title: "Growth Update", message: "New growth data saved", time: "Yesterday", read: true },
+  const [readIds, setReadIds] = useState<Set<string>>(new Set());
-  ]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setReadIds(getReadSet());
+  }, []);
+
+  useEffect(() => {
+    if (!childId) return;
+    fetch(`/api/notifications?childId=${childId}`)
+      .then(r => r.ok ? r.json() : { notifications: [] })
+      .then(d => setNotifications(d.notifications || []))
+      .catch(() => setNotifications([]))
+      .finally(() => setLoading(false));
+  }, [childId]);
+
+  const markRead = (id: string) => {
+    setReadIds(prev => {
+      const next = new Set(prev);
+      next.add(id);
+      saveReadSet(next);
+      return next;
+    });
+  };
+
+  const markAllRead = () => {
+    const allIds = new Set(notifications.map(n => n.id));
+    setReadIds(allIds);
+    saveReadSet(allIds);
+  };
+
+  const unreadCount = notifications.filter(n => !readIds.has(n.id)).length;
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
-      <div className="p-4 flex items-center gap-4">
+      {/* Header */}
-        <button onClick={() => router.back()} className="p-2">←</button>
+      <div className="p-4 flex items-center gap-3">
+        <button onClick={() => router.back()} className="p-2 rounded-xl bg-white dark:bg-gray-800 shadow-sm text-xl">←</button>
         <h1 className="text-xl font-bold">Notifications</h1>
+        {unreadCount > 0 && (
+          <span className="ml-1 px-2 py-0.5 bg-rose-400 text-white text-xs font-bold rounded-full">
+            {unreadCount}
+          </span>
+        )}
+        {unreadCount > 0 && (
+          <button
+            onClick={markAllRead}
+            className="ml-auto text-sm text-rose-500 font-medium"
+          >
+            Mark all read
+          </button>
+        )}
       </div>
 
       <div className="px-4 space-y-2">
-        {notifications.length === 0 ? (
+        {loading ? (
+          <div className="text-center py-20 text-gray-400">
+            <div className="text-4xl mb-3 animate-pulse">🔔</div>
+            <p className="text-sm">Loading…</p>
+          </div>
+        ) : notifications.length === 0 ? (
           <div className="text-center py-20 text-gray-400">
             <div className="text-6xl mb-4">🔔</div>
-            <p>No notifications</p>
+            <p className="font-medium">All caught up!</p>
+            <p className="text-sm mt-1">No overdue or due-today vaccinations</p>
           </div>
         ) : (
-          notifications.map((notif) => (
+          notifications.map(notif => {
-            <div
+            const isRead = readIds.has(notif.id);
+            const isOverdue = notif.status === "overdue";
+            return (
+              <button
                 key={notif.id}
-              className={`p-4 rounded-xl ${notif.read ? "bg-gray-50 dark:bg-gray-800" : "bg-white dark:bg-gray-700"}`}
+                onClick={() => markRead(notif.id)}
+                className={`w-full text-left p-4 rounded-xl transition-colors ${
+                  isRead
+                    ? "bg-gray-50 dark:bg-gray-800/60"
+                    : "bg-white dark:bg-gray-800 shadow-sm"
+                }`}
               >
-              <div className="flex items-start justify-between">
+                <div className="flex items-start gap-3">
-                <div className="flex-1">
+                  <span className="text-xl mt-0.5">{isOverdue ? "🚨" : "💉"}</span>
-                  <div className="font-medium">{notif.title}</div>
+                  <div className="flex-1 min-w-0">
-                  <div className="text-sm text-gray-500">{notif.message}</div>
+                    <div className={`font-medium text-sm ${isRead ? "text-gray-500 dark:text-gray-400" : "text-gray-900 dark:text-white"}`}>
-                  <div className="text-xs text-gray-400 mt-1">{notif.time}</div>
+                      {notif.title}
                     </div>
-                {!notif.read && <div className="w-2 h-2 bg-rose-400 rounded-full mt-2" />}
+                    <div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
+                      {notif.message}
                     </div>
+                    {notif.dueDate && (
+                      <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                        Due: {fmtDate(notif.dueDate + "T00:00:00Z", { day: "numeric", month: "short", year: "numeric" })}
                       </div>
-          ))
+                    )}
+                  </div>
+                  {!isRead && (
+                    <div className="w-2 h-2 bg-rose-400 rounded-full mt-2 flex-shrink-0" />
+                  )}
+                </div>
+              </button>
+            );
+          })
         )}
       </div>
 
       {notifications.length > 0 && (
-        <div className="px-4 mt-6">
+        <div className="px-4 mt-6 pb-8">
-          <button className="text-sm text-gray-500">Mark all as read</button>
+          <p className="text-center text-xs text-gray-400">
+            Showing overdue &amp; due-today IAP vaccinations for {notifications[0]?.childName || "your child"}
+          </p>
         </div>
       )}
     </div>