Support for rescheduling appointment

public/locale/en.json

@@ -397,6 +397,7 @@
   "appointment_created_success": "Appointment created successfully",
   "appointment_details": "Appointment Details",
   "appointment_not_found": "Appointment not found",
+  "appointment_rescheduled_successfully": "Appointment rescheduled successfully",
   "appointment_type": "Appointment Type",
   "appointments": "Appointments",
   "approve": "Approve",
@@ -1719,6 +1720,9 @@
   "required": "Required",
   "required_quantity": "Required Quantity",
   "reschedule": "Reschedule",
+  "reschedule_appointment": "Reschedule Appointment",
+  "rescheduled": "Rescheduled",
+  "rescheduling": "Rescheduling...",
   "resend_otp": "Resend OTP",
   "reset": "Reset",
   "reset_password": "Reset Password",

src/pages/Appointments/AppointmentDetail.tsx

@@ -14,6 +14,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { differenceInYears, format, isSameDay } from "date-fns";
 import { BanIcon, PrinterIcon } from "lucide-react";
 import { navigate } from "raviger";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
@@ -43,6 +44,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
@@ -63,11 +71,14 @@ import {
 } from "@/pages/Appointments/utils";
 import {
   Appointment,
+  AppointmentCancelledStatuses,
   AppointmentStatuses,
   AppointmentUpdateRequest,
 } from "@/types/scheduling/schedule";
 import scheduleApis from "@/types/scheduling/scheduleApis";
 
+import { AppointmentSlotPicker } from "./components/AppointmentSlotPicker";
+
 interface Props {
   facilityId: string;
   appointmentId: string;
@@ -230,6 +241,7 @@ const AppointmentDetails = ({
                     fulfilled: "primary",
                     entered_in_error: "destructive",
                     cancelled: "destructive",
+                    rescheduled: "secondary",
                     noshow: "destructive",
                   } as Partial<
                     Record<Appointment["status"], BadgeProps["variant"]>
@@ -388,6 +400,8 @@ const AppointmentActions = ({
 }: AppointmentActionsProps) => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
+  const [isRescheduleOpen, setIsRescheduleOpen] = useState(false);
+  const [selectedSlotId, setSelectedSlotId] = useState<string>();
 
   const currentStatus = appointment.status;
   const isToday = isSameDay(appointment.token_slot.start_datetime, new Date());
@@ -406,7 +420,28 @@ const AppointmentActions = ({
     },
   });
 
-  if (["fulfilled", "cancelled", "entered_in_error"].includes(currentStatus)) {
+  const { mutate: rescheduleAppointment, isPending: isRescheduling } =
+    useMutation({
+      mutationFn: mutate(scheduleApis.appointments.reschedule, {
+        pathParams: {
+          facility_id: facilityId,
+          id: appointment.id,
+        },
+      }),
+      onSuccess: (newAppointment: Appointment) => {
+        queryClient.invalidateQueries({
+          queryKey: ["appointment", appointment.id],
+        });
+        toast.success(t("appointment_rescheduled_successfully"));
+        setIsRescheduleOpen(false);
+        setSelectedSlotId(undefined);
+        navigate(
+          `/facility/${facilityId}/patient/${appointment.patient.id}/appointments/${newAppointment.id}`,
+        );
+      },
+    });
+
+  if (["fulfilled", ...AppointmentCancelledStatuses].includes(currentStatus)) {
     return null;
   }
 
@@ -437,6 +472,53 @@ const AppointmentActions = ({
         <PersonIcon className="size-4 mr-2" />
         {t("view_patient")}
       </Button>
+
+      <Sheet open={isRescheduleOpen} onOpenChange={setIsRescheduleOpen}>
+        <SheetTrigger asChild>
+          <Button variant="outline" size="lg">
+            <CalendarIcon className="size-4 mr-2" />
+            {t("reschedule")}
+          </Button>
+        </SheetTrigger>
+        <SheetContent className="w-full sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>{t("reschedule_appointment")}</SheetTitle>
+          </SheetHeader>
+
+          <div className="mt-6">
+            <AppointmentSlotPicker
+              facilityId={facilityId}
+              resourceId={appointment.user?.id}
+              selectedSlotId={selectedSlotId}
+              onSlotSelect={setSelectedSlotId}
+            />
+
+            <div className="flex justify-end gap-2 mt-6">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setIsRescheduleOpen(false);
+                  setSelectedSlotId(undefined);
+                }}
+              >
+                {t("cancel")}
+              </Button>
+              <Button
+                variant="default"
+                disabled={!selectedSlotId || isRescheduling}
+                onClick={() => {
+                  if (selectedSlotId) {
+                    rescheduleAppointment({ new_slot: selectedSlotId });
+                  }
+                }}
+              >
+                {isRescheduling ? t("rescheduling") : t("reschedule")}
+              </Button>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
       {currentStatus === "booked" && (
         <>
           <Button