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>
This commit is contained in:
Manohar Gupta 2026-05-16 16:31:12 +05:30
parent b93f1f5dcf
commit 260e287f0b

View file

@ -136,6 +136,7 @@ export default function HomePage() {
const [aiLoading, setAiLoading] = useState(false); const [aiLoading, setAiLoading] = useState(false);
const [pendingCount, setPendingCount] = useState(0); const [pendingCount, setPendingCount] = useState(0);
const [lastLogs, setLastLogs] = useState<any[]>([]); const [lastLogs, setLastLogs] = useState<any[]>([]);
const [vaccineReminders, setVaccineReminders] = useState<any[]>([]);
const { theme, toggle: toggleTheme } = useTheme(); const { theme, toggle: toggleTheme } = useTheme();
const { childId, child, familyId, loading } = useFamily(); const { childId, child, familyId, loading } = useFamily();
@ -167,10 +168,17 @@ export default function HomePage() {
setPendingCount(queue.length); setPendingCount(queue.length);
const handleOnline = () => processOfflineQueue(); const handleOnline = () => processOfflineQueue();
window.addEventListener("online", handleOnline); 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 // Service worker disabled - causes errors in production
// if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js").catch(console.error); // if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js").catch(console.error);
return () => window.removeEventListener("online", handleOnline); return () => window.removeEventListener("online", handleOnline);
}, []); }, [childId]);
useEffect(() => { useEffect(() => {
Promise.all([ 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>} {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"> <div className="px-4 mb-4">
<h2 className="font-semibold mb-3 ml-1">Quick Log</h2> <h2 className="font-semibold mb-3 ml-1">Quick Log</h2>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">