Add Confirmation Pop-up to Prevent Accidental Exception Deletions

public/locale/en.json

@@ -382,6 +382,7 @@
   "archived_files": "Archived Files",
   "are_non_editable_fields": "are non-editable fields",
   "are_you_still_watching": "Are you still watching?",
+  "are_you_sure": "Are you sure?",
   "are_you_sure_want_to_delete": "Are you sure you want to delete {{name}}?",
   "are_you_sure_want_to_delete_this_record": "Are you sure want to delete this record?",
   "are_you_sure_want_to_remove": "Are you sure you want to remove {{name}} from the patient? This action cannot be undone",
@@ -1982,6 +1983,8 @@
   "thank_you_for_choosing": "Thank you for choosing our care service",
   "the_request_for_resources_placed_by_yourself_is": "The request for resource (details below) placed by yourself is",
   "third_party_software_licenses": "Third Party Software Licenses",
+  "this_will_permanently_remove_the_exception": "This action will permanently remove the exception",
+  "this_will_permanently_remove_the_template": "This action will permanently remove the template",
   "time": "Time",
   "time_slot": "Time Slot",
   "title_of_request": "Title of Request",

src/pages/Scheduling/ScheduleExceptions.tsx

@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { format, parseISO } from "date-fns";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
@@ -9,6 +10,14 @@ import ColoredIndicator from "@/CAREUI/display/ColoredIndicator";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 
 import Loading from "@/components/Common/Loading";
 
@@ -63,6 +72,7 @@ const ScheduleExceptionItem = (
 ) => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
 
   const { mutate: deleteException, isPending } = useMutation({
     mutationFn: mutate(scheduleApis.exceptions.delete, {
@@ -112,15 +122,36 @@ const ScheduleExceptionItem = (
             </span>
           </div>
         </div>
-        <Button
-          variant="secondary"
-          size="sm"
-          disabled={isPending}
-          onClick={() => deleteException(undefined)}
-        >
-          <CareIcon icon="l-minus-circle" className="text-base" />
-          <span className="ml-2">{t("remove")}</span>
-        </Button>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button variant="secondary" size="sm" disabled={isPending}>
+              <CareIcon icon="l-minus-circle" className="text-base" />
+              <span className="ml-2">{t("remove")}</span>
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{t("are_you_sure")}</DialogTitle>
+              <DialogDescription>
+                {t("this_will_permanently_remove_the_exception")}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex justify-end space-x-2">
+              <Button variant="outline" onClick={() => setOpen(false)}>
+                {t("cancel")}
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={() => {
+                  deleteException(undefined);
+                  setOpen(false);
+                }}
+              >
+                {t("remove")}
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
       </div>
       {/* TODO: Add this information */}
       {/* <div className="px-4 py-2">

src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx

@@ -3,6 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { isAfter, isBefore, parse } from "date-fns";
 import { ArrowRightIcon } from "lucide-react";
 import { useQueryParams } from "raviger";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Trans } from "react-i18next";
@@ -17,6 +18,14 @@ import WeekdayCheckbox, {
 
 import { Button } from "@/components/ui/button";
 import { DatePicker } from "@/components/ui/date-picker";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -235,6 +244,9 @@ export default function CreateScheduleTemplateSheet({
     );
   };
 
+  const [openDialog, setOpenDialog] = useState(false);
+  const [removeIndex, setRemoveIndex] = useState<number | null>(null);
+
   return (
     <Sheet
       open={qParams.sheet === "create_template"}
@@ -351,21 +363,56 @@ export default function CreateScheduleTemplateSheet({
                           {form.watch(`availabilities.${index}.name`)}
                         </span>
                       </div>
-                      <Button
-                        type="button"
-                        variant="secondary"
-                        size="sm"
-                        className="text-gray-600 hover:text-gray-900"
-                        onClick={() => {
-                          const availabilities =
-                            form.getValues("availabilities");
-                          availabilities.splice(index, 1);
-                          form.setValue("availabilities", availabilities);
-                        }}
-                      >
-                        <CareIcon icon="l-trash" className="text-base" />
-                        <span className="ml-2">{t("remove")}</span>
-                      </Button>
+                      <Dialog open={openDialog} onOpenChange={setOpenDialog}>
+                        <DialogTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="secondary"
+                            size="sm"
+                            className="text-gray-600 hover:text-gray-900"
+                            onClick={() => {
+                              setRemoveIndex(index);
+                              setOpenDialog(true);
+                            }}
+                          >
+                            <CareIcon icon="l-trash" className="text-base" />
+                            <span className="ml-2">{t("remove")}</span>
+                          </Button>
+                        </DialogTrigger>
+                        <DialogContent>
+                          <DialogHeader>
+                            <DialogTitle>{t("are_you_sure")}</DialogTitle>
+                            <DialogDescription>
+                              {t("this_will_permanently_remove_the_template")}
+                            </DialogDescription>
+                          </DialogHeader>
+                          <div className="flex justify-end space-x-2">
+                            <Button
+                              variant="outline"
+                              onClick={() => setOpenDialog(false)}
+                            >
+                              {t("cancel")}
+                            </Button>
+                            <Button
+                              variant="destructive"
+                              onClick={() => {
+                                const availabilities =
+                                  form.getValues("availabilities");
+                                if (removeIndex !== null) {
+                                  availabilities.splice(removeIndex, 1);
+                                  form.setValue(
+                                    "availabilities",
+                                    availabilities,
+                                  );
+                                }
+                                setOpenDialog(false);
+                              }}
+                            >
+                              {t("remove")}
+                            </Button>
+                          </div>
+                        </DialogContent>
+                      </Dialog>
                     </div>
 
                     <div className="grid grid-cols-2 gap-x-6 gap-y-4">

src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx

@@ -17,6 +17,14 @@ import WeekdayCheckbox, {
 
 import { Button } from "@/components/ui/button";
 import { DatePicker } from "@/components/ui/date-picker";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -126,6 +134,7 @@ const ScheduleTemplateEditor = ({
 }) => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
+  const [isDialogOpen, setDialogOpen] = useState(false);
 
   const templateFormSchema = z
     .object({
@@ -250,16 +259,44 @@ const ScheduleTemplateEditor = ({
           </div>
 
           <div className="flex justify-end gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => deleteTemplate()}
-              disabled={isProcessing}
-              size="sm"
-            >
-              <Trash2Icon />
-              {isDeleting ? t("deleting") : t("delete")}
-            </Button>
+            <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
+              <DialogTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={isProcessing}
+                  size="sm"
+                >
+                  <Trash2Icon />
+                  {isDeleting ? t("deleting") : t("delete")}
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>{t("are_you_sure")}</DialogTitle>
+                  <DialogDescription>
+                    {t("this_will_permanently_remove_the_template")}
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="flex justify-end space-x-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => setDialogOpen(false)}
+                  >
+                    {t("cancel")}
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={() => {
+                      deleteTemplate();
+                      setDialogOpen(false);
+                    }}
+                  >
+                    {t("delete")}
+                  </Button>
+                </div>
+              </DialogContent>
+            </Dialog>
             <Button
               variant="primary"
               type="submit"