appointment cancelling & rescheduling

Author: linasliyakath

frontend/src/features/appointments/api/appointments.api.ts

@@ -11,17 +11,14 @@ export async function getAvailableSlots(
 
   return data;
 }
-
 export async function bookAppointment(payload: {
   doctorId: string;
   appointmentTime: string;
-  appointmentDate: string;
   durationMinutes?: number;
 }) {
   const { data } = await api.post('/appointments', payload);
   return data;
 }
-
 export async function getDoctorsByDepartment(
   departmentId: string
 ): Promise<Doctor[]> {

frontend/src/features/appointments/api/rescheduleAppointment.ts

@@ -0,0 +1,12 @@
+import { api } from '@/src/lib/api';
+
+export async function rescheduleAppointment(
+  appointmentId: string,
+  newTime: string
+) {
+  const { data } = await api.post(`/appointments/reschedule/${appointmentId}`, {
+    newTime,
+  });
+
+  return data;
+}

frontend/src/features/appointments/components/AppointmentCard.tsx

@@ -1,16 +1,28 @@
 'use client';
 
+import { useState } from 'react';
 import { useCancelAppointment } from '../hooks/useCancelAppointment';
+import RescheduleModal from './RescheduleModal';
 
 interface Props {
   appointment: any;
 }
 
 export default function AppointmentCard({ appointment }: Props) {
   const cancelMutation = useCancelAppointment();
+  const [showReschedule, setShowReschedule] = useState(false);
 
-  const isPast =
-    new Date(appointment.appointment_time) < new Date();
+  const appointmentDate = new Date(appointment.appointment_time);
+  const now = new Date();
+
+  const isPast = appointmentDate < now;
+
+  const diffMinutes =
+    (appointmentDate.getTime() - now.getTime()) / 60000;
+
+  const canReschedule =
+    appointment.status === 'SCHEDULED' &&
+    diffMinutes >= 60;
 
   return (
     <div className="bg-white p-4 rounded-lg shadow space-y-2">
@@ -20,36 +32,53 @@ export default function AppointmentCard({ appointment }: Props) {
 
       <p>
         <strong>Date:</strong>{' '}
-        {new Date(
-          appointment.appointment_time
-        ).toLocaleString()}
+        {appointmentDate.toLocaleString()}
       </p>
 
       <p>
         <strong>Status:</strong> {appointment.status}
       </p>
 
-      {/* ✅ Cancel button */}
-      {appointment.status !== 'CANCELLED' && !isPast && (
+      {/* Cancel */}
+      {appointment.status === 'SCHEDULED' && !isPast && (
         <button
           onClick={() =>
             cancelMutation.mutate(appointment.id)
           }
           disabled={cancelMutation.isPending}
-          className="mt-2 bg-red-500 hover:bg-red-600 text-white px-3 py-1 cursor-pointer rounded text-sm transition disabled:opacity-50"
+          className="mt-2 bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded text-sm transition disabled:opacity-50"
         >
           {cancelMutation.isPending
             ? 'Cancelling...'
             : 'Cancel'}
         </button>
       )}
 
-      {/* Show cancelled label */}
+      {/* Reschedule */}
+      {canReschedule && (
+        <button
+          onClick={() => setShowReschedule(true)}
+          className="mt-2 bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm transition"
+        >
+          Reschedule
+        </button>
+      )}
+
+      {/* Cancelled label */}
       {appointment.status === 'CANCELLED' && (
         <span className="text-red-500 font-medium">
           Cancelled
         </span>
       )}
+
+      {/* Modal */}
+      {showReschedule && (
+        <RescheduleModal
+          appointmentId={appointment.id}
+          doctorId={appointment.doctor_id}
+          onClose={() => setShowReschedule(false)}
+        />
+      )}
     </div>
   );
 }

frontend/src/features/appointments/components/BookingForm.tsx

@@ -20,16 +20,18 @@ export default function BookingForm() {
 
   const mutation = useBookAppointment();
 
-  function handleBook() {
-    if (!selectedSlot || !doctorId || !date) return;
-
-    mutation.mutate({
-      doctorId,
-      appointmentDate: date,
-      appointmentTime: selectedSlot,
-      durationMinutes: 15,
-    });
-  }
+function handleBook() {
+  if (!selectedSlot || !doctorId || !date) return;
+
+  // Combine date + time into ISO timestamp
+  const fullDateTime = `${date}T${selectedSlot}:00`;
+
+  mutation.mutate({
+    doctorId,
+    appointmentTime: fullDateTime,
+    durationMinutes: 15,
+  });
+}
 
   return (
     <div className="space-y-6 max-w-xl bg-white p-6 rounded-xl shadow-md">

frontend/src/features/appointments/components/RescheduleModal.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { useState } from 'react';
+import { useAvailableSlots } from '../hooks/useAvailableSlots';
+import { useRescheduleAppointment } from '../hooks/useRescheduleAppointment';
+import SlotSelector from './SlotSelector';
+
+type Props = {
+  appointmentId: string;
+  doctorId: string;
+  onClose: () => void;
+};
+
+export default function RescheduleModal({
+  appointmentId,
+  doctorId,
+  onClose,
+}: Props) {
+  const [date, setDate] = useState('');
+  const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
+
+  const { data: slots = [] } = useAvailableSlots(doctorId, date);
+  const mutation = useRescheduleAppointment();
+
+  function handleReschedule() {
+    if (!selectedSlot || !date) return;
+
+    const fullDateTime = `${date}T${selectedSlot}:00`;
+
+    mutation.mutate(
+      {
+        appointmentId,
+        newTime: fullDateTime,
+      },
+      {
+        onSuccess: () => {
+          onClose();
+        },
+      }
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
+      <div className="bg-white p-6 rounded-xl w-96 space-y-4">
+        <h2 className="text-lg font-semibold">Reschedule Appointment</h2>
+
+        <input
+          type="date"
+          className="border p-2 w-full rounded-lg"
+          value={date}
+          onChange={(e) => {
+            setDate(e.target.value);
+            setSelectedSlot(null);
+          }}
+          min={new Date().toISOString().split('T')[0]}
+        />
+
+        {slots.length > 0 && (
+          <SlotSelector
+            slots={slots}
+            selected={selectedSlot}
+            onSelect={setSelectedSlot}
+          />
+        )}
+
+        <button
+          onClick={handleReschedule}
+          disabled={!selectedSlot || mutation.isPending}
+          className="bg-blue-600 text-white w-full p-2 rounded-lg"
+        >
+          {mutation.isPending ? 'Rescheduling...' : 'Confirm Reschedule'}
+        </button>
+
+        {mutation.isError && (
+          <p className="text-red-500 text-sm">
+            {(mutation.error as any)?.response?.data?.error}
+          </p>
+        )}
+
+        <button
+          onClick={onClose}
+          className="text-gray-500 text-sm w-full"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/features/appointments/hooks/useAvailableSlots.ts

@@ -8,10 +8,8 @@ export function useAvailableSlots(doctorId: string, date: string) {
   return useQuery({
     queryKey: ['available-slots', doctorId, date],
     queryFn: () => getAvailableSlots(doctorId, date),
-    enabled:
-      !!doctorId &&
-      !!date &&
-      !!auth.accessToken && // ✅ force boolean
-      !auth.isRestoring,
+    enabled: !!doctorId && !!date && !!auth.accessToken && !auth.isRestoring,
+    refetchOnWindowFocus: true,
+    refetchInterval: 15000, // every 15 seconds (optional)
   });
 }

frontend/src/features/appointments/hooks/useCancelAppointment.ts

@@ -6,7 +6,15 @@ export function useCancelAppointment() {
 
   return useMutation({
     mutationFn: cancelAppointment,
-    onSuccess: () => {
+    onSuccess: (data) => {
+      // Assuming backend returns doctor_id + appointment_time
+      const doctorId = data.doctor_id;
+      const date = data.appointment_time.split('T')[0];
+
+      queryClient.invalidateQueries({
+        queryKey: ['available-slots', doctorId, date],
+      });
+
       queryClient.invalidateQueries({
         queryKey: ['history'],
       });

frontend/src/features/appointments/hooks/useRescheduleAppointment.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { rescheduleAppointment } from '../api/rescheduleAppointment';
+
+export function useRescheduleAppointment() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      appointmentId,
+      newTime,
+    }: {
+      appointmentId: string;
+      newTime: string;
+    }) => rescheduleAppointment(appointmentId, newTime),
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+      queryClient.invalidateQueries({ queryKey: ['available-slots'] });
+      queryClient.invalidateQueries({ queryKey: ['my-status'] });
+    },
+  });
+}

services/patient-service/src/app.ts

@@ -5,8 +5,7 @@ import patientRoutes from './modules/patients/patient.routes';
 import healthRoutes from './routes/health';
 import authRoutes from './modules/auth/auth.routes';
 import { errorMiddleware } from './middlewares/error.middleware';
-import appointmentRoutes from '../src/modules/appointments/appointment.routes';
-
+import appointmentRoutes from './modules/appointments/appointment.routes';
 const app = express();
 
 // Middleware
@@ -22,6 +21,10 @@ app.use((req, res, next) => {
   next();
 });
 
+app.use((req, res, next) => {
+  console.log('ROUTE HIT:', req.method, req.originalUrl);
+  next();
+});
 // 🔓 Public routes (auth)
 app.use('/auth', authRoutes);
 

services/patient-service/src/modules/appointments/appointment.repository.ts

@@ -9,8 +9,9 @@ export class AppointmentRepository {
     durationMinutes: number;
     priority: 'NORMAL' | 'HIGH';
   }) {
-    const result = await pool.query(
-      `
+    try {
+      const result = await pool.query(
+        `
       INSERT INTO appointments (
         id,
         doctor_id,
@@ -21,21 +22,27 @@ export class AppointmentRepository {
         status
       )
       VALUES ($1,$2,$3,$4,$5,$6,'SCHEDULED')
-      ON CONFLICT (doctor_id, appointment_time)
-      DO NOTHING
       RETURNING *;
       `,
-      [
-        randomUUID(),
-        data.doctorId,
-        data.patientId,
-        data.appointmentTime,
-        data.durationMinutes,
-        data.priority,
-      ]
-    );
+        [
+          randomUUID(),
+          data.doctorId,
+          data.patientId,
+          data.appointmentTime,
+          data.durationMinutes,
+          data.priority,
+        ]
+      );
 
-    return result.rows[0] || null;
+      return result.rows[0];
+    } catch (err: any) {
+      if (err.code === '23505') {
+        // unique violation
+        return null;
+      }
+
+      throw err;
+    }
   }
 
   async getDoctorAppointmentsForDay(doctorId: string, date: string) {
@@ -132,7 +139,12 @@ export class AppointmentRepository {
       [doctorId, date]
     );
 
-    return result.rows.map((r) => new Date(r.appointment_time).toISOString());
+    return result.rows.map((r) => {
+      const d = new Date(r.appointment_time);
+      const hours = d.getHours().toString().padStart(2, '0');
+      const minutes = d.getMinutes().toString().padStart(2, '0');
+      return `${hours}:${minutes}`;
+    });
   }
 }