Add vaccine reminders to home page

- Show vaccine reminder banner on home page
- Link to medical page for details
- Show due/overdue status

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/app/page.tsx

@@ -136,6 +136,7 @@ export default function HomePage() {
   const [aiLoading, setAiLoading] = useState(false);
   const [pendingCount, setPendingCount] = useState(0);
   const [lastLogs, setLastLogs] = useState<any[]>([]);
+  const [vaccineReminders, setVaccineReminders] = useState<any[]>([]);
   const { theme, toggle: toggleTheme } = useTheme();
   const { childId, child, familyId, loading } = useFamily();
 
@@ -167,10 +168,17 @@ export default function HomePage() {
     setPendingCount(queue.length);
     const handleOnline = () => processOfflineQueue();
     window.addEventListener("online", handleOnline);
+    // Fetch vaccine notifications
+    if (childId) {
+      fetch(`/api/notifications?childId=${childId}`)
+        .then(res => res.json())
+        .then(data => setVaccineReminders(data.notifications || []))
+        .catch(console.error);
+    }
     // Service worker disabled - causes errors in production
     // if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js").catch(console.error);
     return () => window.removeEventListener("online", handleOnline);
-  }, []);
+  }, [childId]);
 
   useEffect(() => {
     Promise.all([
@@ -261,6 +269,22 @@ export default function HomePage() {
 
       {pendingCount > 0 && <div className="mx-4 mb-4 bg-amber-100 text-amber-800 px-4 py-2 rounded-xl text-center">{pendingCount} pending log{pendingCount > 1 ? "s" : ""}</div>}
 
+      {vaccineReminders.length > 0 && (
+        <div className="mx-4 mb-4 bg-red-50 border border-red-200 px-4 py-3 rounded-xl">
+          <Link href="/medical" className="flex items-center justify-between">
+            <div>
+              <div className="font-semibold text-red-700">💊 Vaccine Reminder</div>
+              <div className="text-sm text-red-600">
+                {vaccineReminders[0].status === "overdue"
+                  ? `${vaccineReminders[0].message}`
+                  : `${vaccineReminders[0].vaccineName} due today`}
+              </div>
+            </div>
+            <span className="text-red-400">→</span>
+          </Link>
+        </div>
+      )}
+
       <div className="px-4 mb-4">
         <h2 className="font-semibold mb-3 ml-1">Quick Log</h2>
         <div className="grid grid-cols-4 gap-2">