Implement recurring rides

Author: anika-4444

frontend/package.json

@@ -5,8 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "@carriage-web/shared": "workspace:*",
-    "react-scripts": "^5.0.1",
-    "@tailwindcss/vite": "^4.2.2"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "dev": "vite",
@@ -36,6 +35,7 @@
     "@mui/utils": "^7.3.6",
     "@mui/x-date-pickers": "^7.23.1",
     "@react-aria/utils": "^3.25.2",
+    "@tailwindcss/vite": "^4.2.2",
     "@types/crypto-js": "^4.2.2",
     "@types/google.maps": "^3.58.1",
     "@types/node": "^22.5.5",

frontend/src/components/RideDetails/RideActions.tsx

@@ -65,6 +65,7 @@ const RideActions: React.FC<RideActionsProps> = ({
   const [contactAdminOpen, setContactAdminOpen] = useState(false);
   const [updating, setUpdating] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [scopeDialogMode, setScopeDialogMode] = useState<'save' | 'cancel' | null>(null);
 
   const ride = editedRide!; // We know this exists from the context
   const rideCompleted = ride.status === Status.COMPLETED;
@@ -91,32 +92,26 @@ const RideActions: React.FC<RideActionsProps> = ({
   };
 
   const handleCancel = () => {
-    setCancelConfirmOpen(true);
-  };
-
-  const handleCancelConfirm = async () => {
-    // Check for recurring rides (not supported yet)
-    if (ride.isRecurring) {
-      showToast('Recurring ride deletion not supported yet', ToastStatus.ERROR);
-      return;
+    // Recurring rides need scope selection before cancelling
+    if (ride.recurrenceId) {
+      setScopeDialogMode('cancel');
+    } else {
+      setCancelConfirmOpen(true);
     }
+  };
 
+  const handleCancelConfirm = async (scope?: 'single' | 'future') => {
     try {
-      // Call the DELETE endpoint like DeleteOrEditTypeModal does
-      await axios.delete(`/api/rides/${ride.id}`);
+      const url = scope
+        ? `/api/rides/${ride.id}?scope=${scope}`
+        : `/api/rides/${ride.id}`;
+      await axios.delete(url);
 
-      // Close the cancel confirmation modal
       setCancelConfirmOpen(false);
+      setScopeDialogMode(null);
 
-      // Close the main ride details dialog since the ride no longer exists
-      if (onClose) {
-        onClose();
-      }
-
-      // Refresh the rides data
+      if (onClose) onClose();
       refreshRides();
-
-      // Show success message
       showToast('Ride Cancelled', ToastStatus.SUCCESS);
     } catch (error) {
       console.error('Failed to cancel ride:', error);
@@ -126,34 +121,35 @@ const RideActions: React.FC<RideActionsProps> = ({
 
   const handleEdit = () => {
     if (isEditing) {
-      // Save changes
       handleSave();
     } else {
-      // Start editing
       startEditing();
     }
   };
 
-  const handleSave = async () => {
+  const handleSave = async (scope?: 'single' | 'future') => {
+    // If ride is recurring and no scope decided yet, show scope dialog
+    if (ride.recurrenceId && scope === undefined) {
+      setScopeDialogMode('save');
+      return;
+    }
+
     setSaving(true);
     try {
-      const success = await saveChanges();
+      const success = await saveChanges(scope);
       if (success) {
         const message = isNewRide(ride)
           ? 'Ride created successfully'
           : 'Ride saved successfully';
         showToast(message, ToastStatus.SUCCESS);
 
-        // Only refresh rides if the ride is on the current date being displayed in the context
         const rideDate = new Date(ride.startTime).toDateString();
         const contextDate = curDate.toDateString();
         if (rideDate === contextDate) {
           refreshRides();
         }
 
-        if (onClose) {
-          onClose(); // Close modal after creating new ride
-        }
+        if (onClose) onClose();
       } else {
         const message = isNewRide(ride)
           ? 'Failed to create ride'
@@ -168,6 +164,7 @@ const RideActions: React.FC<RideActionsProps> = ({
       showToast(message, ToastStatus.ERROR);
     } finally {
       setSaving(false);
+      setScopeDialogMode(null);
     }
   };
 
@@ -422,7 +419,7 @@ const RideActions: React.FC<RideActionsProps> = ({
         <DialogActions>
           <Button onClick={() => setCancelConfirmOpen(false)}>Keep Ride</Button>
           <Button
-            onClick={handleCancelConfirm}
+            onClick={() => handleCancelConfirm()}
             variant="contained"
             color="error"
           >
@@ -431,6 +428,49 @@ const RideActions: React.FC<RideActionsProps> = ({
         </DialogActions>
       </Dialog>
 
+      {/* Recurring Scope Dialog — shown when editing or cancelling a recurring ride */}
+      <Dialog
+        open={scopeDialogMode !== null}
+        onClose={() => setScopeDialogMode(null)}
+        maxWidth="xs"
+        fullWidth
+      >
+        <DialogTitle>
+          {scopeDialogMode === 'save' ? 'Edit Recurring Ride' : 'Cancel Recurring Ride'}
+        </DialogTitle>
+        <DialogContent>
+          <Typography>
+            {scopeDialogMode === 'save'
+              ? 'Do you want to edit just this ride, or this and all future rides in the series?'
+              : 'Do you want to cancel just this ride, or this and all future rides in the series?'}
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setScopeDialogMode(null)}>Back</Button>
+          <Button
+            variant="outlined"
+            onClick={() =>
+              scopeDialogMode === 'save'
+                ? handleSave('single')
+                : handleCancelConfirm('single')
+            }
+          >
+            Just this ride
+          </Button>
+          <Button
+            variant="contained"
+            color={scopeDialogMode === 'cancel' ? 'error' : 'primary'}
+            onClick={() =>
+              scopeDialogMode === 'save'
+                ? handleSave('future')
+                : handleCancelConfirm('future')
+            }
+          >
+            This and all future rides
+          </Button>
+        </DialogActions>
+      </Dialog>
+
       {/* Contact Admin Modal */}
       <Dialog
         open={contactAdminOpen}

frontend/src/components/RideDetails/RideEditContext.tsx

@@ -25,7 +25,7 @@ interface RideEditContextType {
   startEditing: () => void;
   stopEditing: () => void;
   updateRideField: (field: keyof RideType, value: any) => void;
-  saveChanges: () => Promise<boolean>;
+  saveChanges: (scope?: 'single' | 'future') => Promise<boolean>;
   hasChanges: boolean;
   canEdit: boolean;
   userRole: UserRole;
@@ -143,7 +143,7 @@ export const RideEditProvider: React.FC<RideEditProviderProps> = ({
     return hasChangesResult;
   }, [editedRide, originalRide]);
 
-  const saveChanges = useCallback(async (): Promise<boolean> => {
+  const saveChanges = useCallback(async (scope?: 'single' | 'future'): Promise<boolean> => {
     if (!editedRide) {
       return false;
     }
@@ -228,6 +228,9 @@ export const RideEditProvider: React.FC<RideEditProviderProps> = ({
           'type',
           'driver',
           'riders',
+          'isRecurring',
+          'recurrenceDays',
+          'recurrenceEndDate',
         ];
 
         for (const field of fieldsToCheck) {
@@ -245,7 +248,7 @@ export const RideEditProvider: React.FC<RideEditProviderProps> = ({
         }
 
         // Use optimistic update from RidesContext
-        await updateRideInfo(ride.id, updatePayload);
+        await updateRideInfo(ride.id, updatePayload, scope);
 
         // Update the context with the optimistically updated ride
         if (onRideUpdated) {

frontend/src/components/RideDetails/RideOverview.tsx

@@ -51,16 +51,6 @@ const getTemporalType = (ride: RideType): 'Past' | 'Active' | 'Upcoming' => {
   return 'Upcoming';
 };
 
-// Helper function to format recurrence summary
-const getRecurrenceSummary = (ride: RideType): string => {
-  if (!ride.isRecurring || !ride.rrule) return '';
-
-  // Basic RRULE parsing - in practice you might use a library like rrule
-  if (ride.rrule.includes('FREQ=DAILY')) return 'Daily';
-  if (ride.rrule.includes('FREQ=WEEKLY')) return 'Weekly';
-  if (ride.rrule.includes('FREQ=MONTHLY')) return 'Monthly';
-  return 'Custom recurrence';
-};
 
 const getStatusColor = (
   status: Status
@@ -658,40 +648,51 @@ const RideOverview: React.FC<RideOverviewProps> = ({ userRole }) => {
                     <FormControl size="small" sx={{ minWidth: 120 }}>
                       <InputLabel>Repeat</InputLabel>
                       <Select
-                        value={ride.isRecurring ? 'weekly' : 'none'}
-                        onChange={(e) =>
-                          updateRideField(
-                            'isRecurring',
-                            e.target.value !== 'none'
-                          )
-                        }
+                        value={(() => {
+                          if (!ride.isRecurring || !ride.recurrenceDays?.length) return 'none';
+                          const days = ride.recurrenceDays;
+                          if (days.length === 5 && [1,2,3,4,5].every(d => days.includes(d))) return 'daily';
+                          if (days.length === 1) return 'weekly';
+                          return 'custom';
+                        })()}
+                        onChange={(e) => {
+                          const val = e.target.value;
+                          if (val === 'none') {
+                            updateRideField('isRecurring', false);
+                            updateRideField('recurrenceDays', []);
+                            updateRideField('recurrenceEndDate', undefined);
+                          } else if (val === 'daily') {
+                            updateRideField('isRecurring', true);
+                            updateRideField('recurrenceDays', [1, 2, 3, 4, 5]);
+                          } else if (val === 'weekly') {
+                            updateRideField('isRecurring', true);
+                            updateRideField('recurrenceDays', [new Date(ride.startTime).getDay()]);
+                          } else if (val === 'custom') {
+                            updateRideField('isRecurring', true);
+                          }
+                        }}
                         label="Repeat"
                       >
                         <MenuItem value="none">Does not repeat</MenuItem>
-                        <MenuItem value="daily">Daily</MenuItem>
+                        <MenuItem value="daily">Daily (Mon–Fri)</MenuItem>
                         <MenuItem value="weekly">Weekly</MenuItem>
-                        <MenuItem value="monthly">Monthly</MenuItem>
                         <MenuItem value="custom">Custom</MenuItem>
                       </Select>
                     </FormControl>
 
                     {ride.isRecurring && (
-                      <>
-                        <TextField
-                          label="End date (optional)"
-                          type="date"
-                          size="small"
-                          InputLabelProps={{ shrink: true }}
-                          placeholder="No end date"
-                        />
-                        <Typography
-                          variant="caption"
-                          color="textSecondary"
-                          sx={{ fontStyle: 'italic' }}
-                        >
-                          Note: Full recurrence functionality coming soon
-                        </Typography>
-                      </>
+                      <TextField
+                        label="End date (optional)"
+                        type="date"
+                        size="small"
+                        InputLabelProps={{ shrink: true }}
+                        value={ride.recurrenceEndDate ? ride.recurrenceEndDate.split('T')[0] : ''}
+                        onChange={(e) => {
+                          const val = e.target.value;
+                          updateRideField('recurrenceEndDate', val ? new Date(val).toISOString() : undefined);
+                        }}
+                        placeholder="No end date"
+                      />
                     )}
                   </div>
                 ) : (

frontend/src/context/RidesContext.tsx

@@ -24,7 +24,7 @@ type ridesState = {
     driverId?: string
   ) => Promise<void>;
   assignDriver: (rideId: string, driverId: string) => Promise<void>;
-  updateRideInfo: (rideId: string, updates: Partial<RideType>) => Promise<void>;
+  updateRideInfo: (rideId: string, updates: Partial<RideType>, scope?: 'single' | 'future') => Promise<void>;
   createRide: (ride: Omit<RideType, 'id'>) => Promise<void>;
   cancelRide: (rideId: string) => Promise<void>;
   deleteRide: (rideId: string) => Promise<void>;
@@ -328,7 +328,7 @@ export const RidesProvider = ({ children }: RidesProviderProps) => {
   );
 
   const updateRideInfo = useCallback(
-    async (rideId: string, updates: Partial<RideType>) => {
+    async (rideId: string, updates: Partial<RideType>, scope?: 'single' | 'future') => {
       let originalRide: RideType | undefined = getRideById(rideId);
 
       // If ride not found in current context, fetch it from the server first
@@ -376,7 +376,7 @@ export const RidesProvider = ({ children }: RidesProviderProps) => {
         }
 
         // Make API call
-        const response = await axios.put(`/api/rides/${rideId}`, updates);
+        const response = await axios.put(`/api/rides/${rideId}${scope ? `?scope=${scope}` : ''}`, updates);
         const serverRide = response.data.data;
         console.log(serverRide, 'serverride');