web/src/pages/Dashboard.tsx

@@ -1,24 +1,25 @@
 import React, { useEffect, useState } from 'react';
-import { api, CheckIn, Notification, Schedule } from '../api';
+import { api, CheckIn, Notification, ShiftInstance } from '../api';
 import { useAuth } from '../auth';
 
 export default function Dashboard() {
   const { volunteerID } = useAuth();
-  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const now = new Date();
+  const [schedules, setSchedules] = useState<ShiftInstance[]>([]);
   const [notifications, setNotifications] = useState<Notification[]>([]);
   const [activeCheckIn, setActiveCheckIn] = useState<CheckIn | null>(null);
   const [history, setHistory] = useState<CheckIn[]>([]);
   const [error, setError] = useState('');
 
   useEffect(() => {
-    api.listSchedules().then(setSchedules).catch(() => {});
+    api.listShifts(now.getFullYear(), now.getMonth() + 1).then(setSchedules).catch(() => {});
     api.listNotifications().then(setNotifications).catch(() => {});
     api.getHistory().then(data => {
       setHistory(data);
       const active = data.find(c => !c.checked_out_at && c.volunteer_id === volunteerID);
       setActiveCheckIn(active ?? null);
     }).catch(() => {});
-  }, [volunteerID]);
+  }, [volunteerID]); // eslint-disable-line react-hooks/exhaustive-deps
 
   async function handleCheckIn() {
     try {
@@ -48,7 +49,7 @@ export default function Dashboard() {
   }
 
   const upcomingSchedules = schedules
-    .filter(s => new Date(s.starts_at) >= new Date())
+    .filter(s => new Date(s.date) >= now)
     .slice(0, 5);
 
   const unreadNotifications = notifications.filter(n => !n.read);
@@ -78,7 +79,7 @@ export default function Dashboard() {
           <ul>
             {upcomingSchedules.map(s => (
               <li key={s.id}>
-                <strong>{s.title}</strong> — {new Date(s.starts_at).toLocaleString()} to {new Date(s.ends_at).toLocaleString()}
+                <strong>{s.name}</strong> — {s.date} {s.start_time.slice(0, 5)}–{s.end_time.slice(0, 5)}
               </li>
             ))}
           </ul>