update reservations

src/pages/UserDashboard.tsx

@@ -8,6 +8,7 @@ const UserDashboard: React.FC = () => {
   const [reservations, setReservations] = useState<Reservation[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('upcoming');
 
   useEffect(() => {
     const api = new SimpleLibreBookingClient();
@@ -26,28 +27,48 @@ const UserDashboard: React.FC = () => {
     loadReservations();
   }, []);
 
-  // Group reservations by status
+  // Filter reservations based on selected filter
+  const filteredReservations = filter === 'all' 
+    ? reservations 
+    : filter === 'upcoming'
+    ? reservations.filter(r => {
+        if (r.status === 'cancelled') return false;
+        // Use endDate field from API response
+        const endTime = new Date(r.endDate);
+        const now = new Date();
+        return endTime > now;
+      })
+    : reservations.filter(r => {
+        if (r.status === 'cancelled') return false;
+        // Use endDate field from API response
+        const endTime = new Date(r.endDate);
+        const now = new Date();
+        return endTime <= now;
+      });
+
+  // Stats should always use all reservations (not filtered)
   const pendingReservations = reservations.filter(r => r.status === 'pending');
   const confirmedReservations = reservations.filter(r => r.status === 'confirmed');
-
-  // Group upcoming reservations
   const upcomingReservations = reservations.filter(r => {
     if (r.status === 'cancelled') return false;
-    const endTime = r.endTime instanceof Date ? r.endTime : new Date(r.endTime);
+    const endTime = new Date(r.endDate);
     return endTime > new Date();
   });
 
-  const todayReservations = reservations.filter(r => {
+  // Filtered versions for display
+  const filteredPendingReservations = filteredReservations.filter(r => r.status === 'pending');
+  const filteredConfirmedReservations = filteredReservations.filter(r => r.status === 'confirmed');
+  const filteredTodayReservations = filteredReservations.filter(r => {
     if (r.status === 'cancelled') return false;
-    const startTime = r.startTime instanceof Date ? r.startTime : new Date(r.startTime);
-    const endTime = r.endTime instanceof Date ? r.endTime : new Date(r.endTime);
+    const startTime = new Date(r.startDate);
+    const endTime = new Date(r.endDate);
     return isToday(startTime) || isToday(endTime);
   });
 
   const getReservationLabel = (reservation: Reservation): string => {
-    // Handle both string and Date formats for startTime/endTime
-    const startDate = reservation.startTime instanceof Date ? reservation.startTime : new Date(reservation.startTime);
-    const endDate = reservation.endTime instanceof Date ? reservation.endTime : new Date(reservation.endTime);
+    // Use startDate and endDate from API response
+    const startDate = new Date(reservation.startDate);
+    const endDate = new Date(reservation.endDate);
     
     // Validate dates before formatting
     if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
@@ -138,14 +159,41 @@ const UserDashboard: React.FC = () => {
         </div>
       </div>
 
+      {/* Filter Buttons */}
+      <div style={{ marginBottom: '2rem' }}>
+        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+          {(['all', 'upcoming', 'past'] as const).map(filterOption => (
+            <button
+              key={filterOption}
+              onClick={() => setFilter(filterOption)}
+              style={{
+                padding: '0.5rem 1rem',
+                backgroundColor: filter === filterOption ? '#3498db' : '#ecf0f1',
+                color: filter === filterOption ? 'white' : '#2c3e50',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontWeight: filter === filterOption ? '500' : 'normal',
+                textTransform: 'capitalize'
+              }}
+            >
+              {filterOption}
+            </button>
+          ))}
+        </div>
+        <div style={{ fontSize: '0.875rem', color: '#666' }}>
+          Showing {filteredReservations.length} {filter === 'all' ? 'reservations' : filter}
+        </div>
+      </div>
+
       {/* Today's Reservations */}
-      {todayReservations.length > 0 && (
+      {filteredTodayReservations.length > 0 && (
         <div style={{ marginBottom: '2rem' }}>
           <h3 style={{ color: '#2c3e50', marginBottom: '1rem' }}>Today's Reservations</h3>
           <div style={{ display: 'grid', gap: '1rem' }}>
-            {todayReservations.map(reservation => (
+            {filteredTodayReservations.map(reservation => (
               <div 
-                key={reservation.id}
+                key={reservation.referenceNumber}
                 style={{
                   backgroundColor: 'white',
                   padding: '1.5rem',
@@ -212,7 +260,7 @@ const UserDashboard: React.FC = () => {
       <div>
         <h3 style={{ color: '#2c3e50', marginBottom: '1rem' }}>All Reservations</h3>
         
-        {reservations.length === 0 ? (
+        {filteredReservations.length === 0 ? (
           <div style={{ 
             textAlign: 'center', 
             padding: '2rem', 
@@ -239,8 +287,8 @@ const UserDashboard: React.FC = () => {
           </div>
         ) : (
           <div style={{ display: 'grid', gap: '1rem' }}>
-            {reservations
-              .sort((a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime())
+            {filteredReservations
+              .sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())
 .map(reservation => (
               <div 
                 key={reservation.referenceNumber}