From 16af629c188f7da7fc914101d018b6ee34e4d30a Mon Sep 17 00:00:00 2001
From: Nikhila C <115739037+NikhilA8606@users.noreply.github.com>
Date: Thu, 13 Feb 2025 16:58:49 +0530
Subject: [PATCH] Migrated Dialog and ConfirmDialog with shadCN component
 (#10510)

---
 public/locale/en.json                         |  11 +
 src/components/Common/AvatarEditModal.tsx     | 460 +++++++++---------
 src/components/Common/ConfirmDialog.tsx       |  51 --
 src/components/Common/Dialog.tsx              |  87 ----
 src/components/Common/FilePreviewDialog.tsx   | 447 ++++++++---------
 .../Facility/DuplicatePatientDialog.tsx       | 206 ++++----
 src/components/Facility/FacilityHome.tsx      |  91 ++--
 src/components/Files/CameraCaptureDialog.tsx  | 283 +++++------
 src/components/Patient/PatientHome.tsx        |  24 -
 .../Patient/PatientRegistration.tsx           |   7 +-
 src/components/Users/UserAvatar.tsx           |   2 +-
 src/components/Users/UserDeleteDialog.tsx     |  53 +-
 src/components/Users/UserSummary.tsx          |   2 +
 src/hooks/useFileManager.tsx                  | 393 +++++++--------
 src/hooks/useFileUpload.tsx                   |   4 +-
 15 files changed, 1033 insertions(+), 1088 deletions(-)
 delete mode 100644 src/components/Common/ConfirmDialog.tsx
 delete mode 100644 src/components/Common/Dialog.tsx

diff --git a/public/locale/en.json b/public/locale/en.json
index 131cb515b31..6b6d794ed53 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -383,6 +383,7 @@
   "approved_by_district_covid_control_room": "Approved by District COVID Control Room",
   "approving_facility": "Name of Approving Facility",
   "archive": "Archive",
+  "archive_file": "Archive File",
   "archived": "Archived",
   "archived_at": "Archived at",
   "archived_by": "Archived by",
@@ -394,6 +395,7 @@
   "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 <strong>{{name}}</strong> from the patient? This action cannot be undone",
+  "are_you_sure_you_want_to_delete_user": "Are you sure you want to delete this user?",
   "ari": "ARI - Acute Respiratory illness",
   "arrived": "Arrived",
   "as_needed_prn": "As Needed / PRN",
@@ -696,8 +698,10 @@
   "delete_account_btn": "Yes, delete this account",
   "delete_account_note": "Deleting this account will remove all associated data and cannot be undone.",
   "delete_facility": "Delete Facility",
+  "delete_facility_confirmation": "Are you sure you want to delete {{name}}? This action cannot be undone.",
   "delete_item": "Delete {{name}}",
   "delete_record": "Delete Record",
+  "delete_user": "Delete User",
   "deleting": "Deleting...",
   "demography": "Demography",
   "denied_on": "Denied On",
@@ -994,6 +998,7 @@
   "facility_consent_requests_page_title": "Patient Consent List",
   "facility_count_one": "{{count}} Facility",
   "facility_count_other": "{{count}} Facilities ",
+  "facility_deleted_successfully": "{{name}} has been deleted successfully.",
   "facility_district_name": "Facility/District Name",
   "facility_district_pincode": "Facility/District/Pincode",
   "facility_for_care_support": "Facility for Care Support",
@@ -1373,6 +1378,8 @@
   "new_password_same_as_old": "Your new password <strong>must not match the old password </strong> ",
   "new_password_validation": "New password is not valid.",
   "new_session": "New Session",
+  "next": "Next",
+  "next_file": "Next file",
   "next_month": "Next month",
   "next_sessions": "Next Sessions",
   "next_week_short": "Next wk",
@@ -1695,6 +1702,7 @@
   "preset_name_placeholder": "Specify an identifiable name for the new preset",
   "preset_updated": "Preset updated",
   "prev_sessions": "Prev Sessions",
+  "previous": "Previous",
   "primary_ph_no": "Primary Ph No.",
   "primary_phone_no": "Primary ph. no.",
   "principal": "Principal",
@@ -1857,6 +1865,8 @@
   "right": "Right",
   "role": "Role",
   "room_apt": "Room/Apt & Time",
+  "rotate_left": "Rotate Left",
+  "rotate_right": "Rotate Right",
   "route": "Route",
   "routine": "Routine",
   "sample_collection_date": "Sample Collection Date",
@@ -2053,6 +2063,7 @@
   "something_wrong": "Something went wrong! Try again later!",
   "sort_by": "Sort By",
   "source": "Source",
+  "source_file": "Source Files",
   "spdx_sbom_version": "SPDX SBOM Version",
   "spokes": "Spoke Facilities",
   "srf_id": "SRF ID",
diff --git a/src/components/Common/AvatarEditModal.tsx b/src/components/Common/AvatarEditModal.tsx
index 31d0f772a60..3c278ea80b0 100644
--- a/src/components/Common/AvatarEditModal.tsx
+++ b/src/components/Common/AvatarEditModal.tsx
@@ -12,18 +12,22 @@ import { toast } from "sonner";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
-
-import DialogModal from "@/components/Common/Dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 import useDragAndDrop from "@/hooks/useDragAndDrop";
 
 interface Props {
   title: string;
   open: boolean;
+  onOpenChange: (open: boolean) => void;
   imageUrl?: string;
   handleUpload: (file: File, onError: () => void) => Promise<void>;
   handleDelete: (onError: () => void) => Promise<void>;
-  onClose?: () => void;
   hint?: React.ReactNode;
 }
 
@@ -48,10 +52,10 @@ type IVideoConstraint =
 const AvatarEditModal = ({
   title,
   open,
+  onOpenChange,
   imageUrl,
   handleUpload,
   handleDelete,
-  onClose,
   hint,
 }: Props) => {
   const [isProcessing, setIsProcessing] = useState(false);
@@ -91,7 +95,7 @@ const AvatarEditModal = ({
     setPreview(undefined);
     setIsProcessing(false);
     setSelectedFile(undefined);
-    onClose?.();
+    onOpenChange(false);
   };
 
   useEffect(() => {
@@ -179,246 +183,246 @@ const AvatarEditModal = ({
   const hintMessage = hint || defaultHint;
 
   return (
-    <DialogModal
-      show={open}
-      onClose={closeModal}
-      title={title}
-      className="md:max-w-4xl"
-    >
-      <div className="flex h-full w-full items-center justify-center overflow-y-auto">
-        <div className="flex max-h-screen min-h-96 w-full flex-col overflow-auto">
-          {!isCameraOpen ? (
-            <>
-              {preview || imageUrl ? (
-                <>
-                  <div className="flex flex-1 items-center justify-center rounded-lg">
-                    <img
-                      src={preview || imageUrl}
-                      alt="cover-photo"
-                      className="h-full w-full object-cover"
-                    />
-                  </div>
-                  <p className="text-center font-medium text-secondary-700">
-                    {hintMessage}
-                  </p>
-                </>
-              ) : (
-                <div
-                  onDragOver={onDragOver}
-                  onDragLeave={onDragLeave}
-                  onDrop={onDrop}
-                  className={`mt-8 flex flex-1 flex-col items-center justify-center rounded-lg border-[3px] border-dashed px-3 py-6 ${
-                    isDragging
-                      ? "border-primary-800 bg-primary-100"
-                      : dragProps.dragOver
-                        ? "border-primary-500"
-                        : "border-secondary-500"
-                  } ${dragProps.fileDropError !== "" ? "border-red-500" : ""}`}
-                >
-                  <svg
-                    stroke="currentColor"
-                    fill="none"
-                    viewBox="0 0 48 48"
-                    aria-hidden="true"
-                    className={`h-12 w-12 stroke-[2px] ${
+    <Dialog open={open} onOpenChange={closeModal}>
+      <DialogContent className="md:max-w-4xl">
+        <DialogHeader>
+          <DialogTitle className="text-xl">{title}</DialogTitle>
+        </DialogHeader>
+        <div className="flex h-full w-full items-center justify-center overflow-y-auto">
+          <div className="flex max-h-screen min-h-96 w-full flex-col overflow-auto">
+            {!isCameraOpen ? (
+              <>
+                {preview || imageUrl ? (
+                  <>
+                    <div className="flex flex-1 items-center justify-center rounded-lg">
+                      <img
+                        src={preview || imageUrl}
+                        alt="cover-photo"
+                        className="h-full w-full object-cover"
+                      />
+                    </div>
+                    <p className="text-center font-medium text-secondary-700">
+                      {hintMessage}
+                    </p>
+                  </>
+                ) : (
+                  <div
+                    onDragOver={onDragOver}
+                    onDragLeave={onDragLeave}
+                    onDrop={onDrop}
+                    className={`mt-8 flex flex-1 flex-col items-center justify-center rounded-lg border-[3px] border-dashed px-3 py-6 ${
                       isDragging
-                        ? "text-green-500"
+                        ? "border-primary-800 bg-primary-100"
                         : dragProps.dragOver
-                          ? "text-primary-500"
-                          : "text-secondary-600"
-                    } ${
-                      dragProps.fileDropError !== ""
-                        ? "text-red-500"
-                        : "text-secondary-600"
-                    }`}
-                  >
-                    <path d="M28 8H12a4 4 0 0 0-4 4v20m32-12v8m0 0v8a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4v-4m32-4-3.172-3.172a4 4 0 0 0-5.656 0L28 28M8 32l9.172-9.172a4 4 0 0 1 5.656 0L28 28m0 0 4 4m4-24h8m-4-4v8m-12 4h.02" />
-                  </svg>
-                  <p
-                    className={`text-sm ${
-                      dragProps.dragOver
-                        ? "text-primary-500"
-                        : "text-secondary-700"
-                    } ${
-                      dragProps.fileDropError !== ""
-                        ? "text-red-500"
-                        : "text-secondary-700"
-                    } text-center`}
+                          ? "border-primary-500"
+                          : "border-secondary-500"
+                    } ${dragProps.fileDropError !== "" ? "border-red-500" : ""}`}
                   >
-                    {dragProps.fileDropError !== ""
-                      ? dragProps.fileDropError
-                      : `${t("drag_drop_image_to_upload")}`}
-                  </p>
-                  <p className="mt-4 text-center font-medium text-secondary-700">
-                    {t("no_image_found")}. {hintMessage}
-                  </p>
-                </div>
-              )}
+                    <svg
+                      stroke="currentColor"
+                      fill="none"
+                      viewBox="0 0 48 48"
+                      aria-hidden="true"
+                      className={`h-12 w-12 stroke-[2px] ${
+                        isDragging
+                          ? "text-green-500"
+                          : dragProps.dragOver
+                            ? "text-primary-500"
+                            : "text-secondary-600"
+                      } ${
+                        dragProps.fileDropError !== ""
+                          ? "text-red-500"
+                          : "text-secondary-600"
+                      }`}
+                    >
+                      <path d="M28 8H12a4 4 0 0 0-4 4v20m32-12v8m0 0v8a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4v-4m32-4-3.172-3.172a4 4 0 0 0-5.656 0L28 28M8 32l9.172-9.172a4 4 0 0 1 5.656 0L28 28m0 0 4 4m4-24h8m-4-4v8m-12 4h.02" />
+                    </svg>
+                    <p
+                      className={`text-sm ${
+                        dragProps.dragOver
+                          ? "text-primary-500"
+                          : "text-secondary-700"
+                      } ${
+                        dragProps.fileDropError !== ""
+                          ? "text-red-500"
+                          : "text-secondary-700"
+                      } text-center`}
+                    >
+                      {dragProps.fileDropError !== ""
+                        ? dragProps.fileDropError
+                        : `${t("drag_drop_image_to_upload")}`}
+                    </p>
+                    <p className="mt-4 text-center font-medium text-secondary-700">
+                      {t("no_image_found")}. {hintMessage}
+                    </p>
+                  </div>
+                )}
 
-              <div className="flex flex-col gap-2 pt-4 sm:flex-row">
-                <div>
+                <div className="flex flex-col gap-2 pt-4 sm:flex-row">
+                  <div>
+                    <Button
+                      id="upload-cover-image"
+                      variant="primary"
+                      className="w-full"
+                      asChild
+                    >
+                      <label className="cursor-pointer">
+                        <CareIcon
+                          icon="l-cloud-upload"
+                          className="text-lg mr-1"
+                        />
+                        {t("upload_an_image")}
+                        <input
+                          title="changeFile"
+                          type="file"
+                          accept="image/*"
+                          className="hidden"
+                          onChange={onSelectFile}
+                        />
+                      </label>
+                    </Button>
+                  </div>
                   <Button
-                    id="upload-cover-image"
                     variant="primary"
-                    className="w-full"
-                    asChild
+                    onClick={() => {
+                      setConstraint(() => VideoConstraints.user);
+                      setIsCameraOpen(true);
+                    }}
                   >
-                    <label className="cursor-pointer">
-                      <CareIcon
-                        icon="l-cloud-upload"
-                        className="text-lg mr-1"
-                      />
-                      {t("upload_an_image")}
-                      <input
-                        title="changeFile"
-                        type="file"
-                        accept="image/*"
-                        className="hidden"
-                        onChange={onSelectFile}
-                      />
-                    </label>
+                    {`${t("open_camera")}`}
                   </Button>
-                </div>
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    setConstraint(() => VideoConstraints.user);
-                    setIsCameraOpen(true);
-                  }}
-                >
-                  {`${t("open")} ${t("camera")}`}
-                </Button>
-                <div className="sm:flex-1" />
-                <Button
-                  variant="outline"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    closeModal();
-                    dragProps.setFileDropError("");
-                  }}
-                  disabled={isProcessing}
-                >
-                  {t("cancel")}
-                </Button>
-                {imageUrl && (
+                  <div className="sm:flex-1" />
                   <Button
-                    variant="destructive"
-                    onClick={deleteAvatar}
+                    variant="outline"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      closeModal();
+                      dragProps.setFileDropError("");
+                    }}
                     disabled={isProcessing}
                   >
-                    {t("delete")}
+                    {t("cancel")}
                   </Button>
-                )}
-                <Button
-                  id="save-cover-image"
-                  variant="outline"
-                  onClick={uploadAvatar}
-                  disabled={isProcessing || !selectedFile}
-                >
-                  {isProcessing ? (
-                    <CareIcon
-                      icon="l-spinner"
-                      className="animate-spin text-lg"
-                    />
-                  ) : (
-                    <CareIcon icon="l-save" className="text-lg" />
-                  )}
-                  <span>
-                    {isProcessing ? `${t("uploading")}...` : `${t("save")}`}
-                  </span>
-                </Button>
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="flex flex-1 items-center justify-center">
-                {!previewImage ? (
-                  <>
-                    <Webcam
-                      audio={false}
-                      height={720}
-                      screenshotFormat="image/jpeg"
-                      width={1280}
-                      ref={webRef}
-                      videoConstraints={constraint}
-                      onUserMediaError={(_e) => {
-                        setIsCameraOpen(false);
-                        toast.warning(t("camera_permission_denied"));
-                      }}
-                    />
-                  </>
-                ) : (
-                  <>
-                    <img src={previewImage} />
-                  </>
-                )}
-              </div>
-              {/* buttons for mobile screens */}
-              <div className="flex flex-col gap-2 pt-4 sm:flex-row">
-                {!previewImage ? (
-                  <>
-                    <Button variant="primary" onClick={handleSwitchCamera}>
-                      <CareIcon icon="l-camera-change" className="text-lg" />
-                      {`${t("switch")} ${t("camera")}`}
-                    </Button>
-                    <Button
-                      variant="primary"
-                      onClick={() => {
-                        captureImage();
-                      }}
-                    >
-                      <CareIcon icon="l-capture" className="text-lg" />
-                      {t("capture")}
-                    </Button>
-                  </>
-                ) : (
-                  <>
+                  {imageUrl && (
                     <Button
-                      variant="primary"
-                      onClick={() => {
-                        setPreviewImage(null);
-                      }}
-                    >
-                      {t("retake")}
-                    </Button>
-                    <Button
-                      variant="primary"
+                      variant="destructive"
+                      onClick={deleteAvatar}
                       disabled={isProcessing}
-                      onClick={uploadAvatar}
                     >
-                      {isCaptureImgBeingUploaded ? (
-                        <>
-                          <CareIcon
-                            icon="l-spinner"
-                            className="animate-spin text-lg"
-                          />
-                          {`${t("submitting")}...`}
-                        </>
-                      ) : (
-                        <> {t("submit")}</>
-                      )}
+                      {t("delete")}
                     </Button>
-                  </>
-                )}
-                <div className="sm:flex-1"></div>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => {
-                    setPreviewImage(null);
-                    setIsCameraOpen(false);
-                    webRef.current.stopCamera();
-                  }}
-                  disabled={isProcessing}
-                >
-                  {t("close")}
-                </Button>
-              </div>
-            </>
-          )}
+                  )}
+                  <Button
+                    id="save-cover-image"
+                    variant="outline"
+                    onClick={uploadAvatar}
+                    disabled={isProcessing || !selectedFile}
+                  >
+                    {isProcessing ? (
+                      <CareIcon
+                        icon="l-spinner"
+                        className="animate-spin text-lg"
+                      />
+                    ) : (
+                      <CareIcon icon="l-save" className="text-lg" />
+                    )}
+                    <span>
+                      {isProcessing ? `${t("uploading")}...` : `${t("save")}`}
+                    </span>
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="flex flex-1 items-center justify-center">
+                  {!previewImage ? (
+                    <>
+                      <Webcam
+                        audio={false}
+                        height={720}
+                        screenshotFormat="image/jpeg"
+                        width={1280}
+                        ref={webRef}
+                        videoConstraints={constraint}
+                        onUserMediaError={(_e) => {
+                          setIsCameraOpen(false);
+                          toast.warning(t("camera_permission_denied"));
+                        }}
+                      />
+                    </>
+                  ) : (
+                    <>
+                      <img src={previewImage} />
+                    </>
+                  )}
+                </div>
+                {/* buttons for mobile screens */}
+                <div className="flex flex-col gap-2 pt-4 sm:flex-row">
+                  {!previewImage ? (
+                    <>
+                      <Button variant="primary" onClick={handleSwitchCamera}>
+                        <CareIcon icon="l-camera-change" className="text-lg" />
+                        {`${t("switch")} ${t("camera")}`}
+                      </Button>
+                      <Button
+                        variant="primary"
+                        onClick={() => {
+                          captureImage();
+                        }}
+                      >
+                        <CareIcon icon="l-capture" className="text-lg" />
+                        {t("capture")}
+                      </Button>
+                    </>
+                  ) : (
+                    <>
+                      <Button
+                        variant="primary"
+                        onClick={() => {
+                          setPreviewImage(null);
+                        }}
+                      >
+                        {t("retake")}
+                      </Button>
+                      <Button
+                        variant="primary"
+                        disabled={isProcessing}
+                        onClick={uploadAvatar}
+                      >
+                        {isCaptureImgBeingUploaded ? (
+                          <>
+                            <CareIcon
+                              icon="l-spinner"
+                              className="animate-spin text-lg"
+                            />
+                            {`${t("submitting")}...`}
+                          </>
+                        ) : (
+                          <> {t("submit")}</>
+                        )}
+                      </Button>
+                    </>
+                  )}
+                  <div className="sm:flex-1"></div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      setPreviewImage(null);
+                      setIsCameraOpen(false);
+                      webRef.current.stopCamera();
+                    }}
+                    disabled={isProcessing}
+                  >
+                    {t("close")}
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
         </div>
-      </div>
-    </DialogModal>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/src/components/Common/ConfirmDialog.tsx b/src/components/Common/ConfirmDialog.tsx
deleted file mode 100644
index 78cebe23f8e..00000000000
--- a/src/components/Common/ConfirmDialog.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button, ButtonVariant } from "@/components/ui/button";
-
-import DialogModal from "@/components/Common/Dialog";
-
-type ConfirmDialogProps = {
-  className?: string;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  disabled?: boolean;
-  show: boolean;
-  action: React.ReactNode;
-  variant?: ButtonVariant;
-  onClose: () => void;
-  onConfirm: () => void;
-  children?: React.ReactNode;
-  cancelLabel?: string;
-  name?: string;
-};
-
-const ConfirmDialog = ({
-  disabled,
-  variant,
-  action,
-  onConfirm,
-  cancelLabel,
-  children,
-  name,
-  ...props
-}: ConfirmDialogProps) => {
-  return (
-    <DialogModal {...props}>
-      {children}
-      <div className="mt-6 flex w-full flex-col justify-end gap-2 md:flex-row">
-        <Button variant="outline" type="button" onClick={props.onClose}>
-          {cancelLabel}
-        </Button>
-        <Button
-          type="submit"
-          variant={variant}
-          name={name ?? "submit"}
-          onClick={onConfirm}
-          disabled={disabled}
-        >
-          {action}
-        </Button>
-      </div>
-    </DialogModal>
-  );
-};
-
-export default ConfirmDialog;
diff --git a/src/components/Common/Dialog.tsx b/src/components/Common/Dialog.tsx
deleted file mode 100644
index a67981dd3f8..00000000000
--- a/src/components/Common/Dialog.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  Transition,
-  TransitionChild,
-} from "@headlessui/react";
-
-import { classNames } from "@/Utils/utils";
-
-type DialogProps = {
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  show: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-  className?: string;
-  titleAction?: React.ReactNode;
-  fixedWidth?: boolean;
-};
-
-const DialogModal = (props: DialogProps) => {
-  const {
-    title,
-    description,
-    show,
-    onClose,
-    children,
-    className,
-    fixedWidth = true,
-  } = props;
-  return (
-    <div>
-      <Transition appear show={show}>
-        <Dialog as="div" className="relative z-30" onClose={onClose}>
-          <TransitionChild
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-all" />
-          </TransitionChild>
-
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <TransitionChild
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <DialogPanel
-                  className={classNames(
-                    className,
-                    fixedWidth && "w-full max-w-md",
-                    "transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all",
-                  )}
-                >
-                  <DialogTitle
-                    as="h4"
-                    className="flex w-full flex-col text-lg font-medium leading-6 text-secondary-900"
-                  >
-                    <div className="w-full">
-                      <h4>{title}</h4>
-                      <p className="mt-2 text-sm text-secondary-600">
-                        {description}
-                      </p>
-                    </div>
-                    {props.titleAction}
-                  </DialogTitle>
-                  {children}
-                </DialogPanel>
-              </TransitionChild>
-            </div>
-          </div>
-        </Dialog>
-      </Transition>
-    </div>
-  );
-};
-
-export default DialogModal;
diff --git a/src/components/Common/FilePreviewDialog.tsx b/src/components/Common/FilePreviewDialog.tsx
index fbcaf9ae69a..cb556b84aae 100644
--- a/src/components/Common/FilePreviewDialog.tsx
+++ b/src/components/Common/FilePreviewDialog.tsx
@@ -16,9 +16,14 @@ import useKeyboardShortcut from "use-keyboard-shortcut";
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 import CircularProgress from "@/components/Common/CircularProgress";
-import DialogModal from "@/components/Common/Dialog";
 import { StateInterface } from "@/components/Files/FileUpload";
 import { FileUploadModel } from "@/components/Patient/models";
 
@@ -148,11 +153,11 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
   };
 
   function getRotationClass(rotation: number) {
-    let normalizedRotation = ((rotation % 360) + 360) % 360; // Normalize rotation to be within [0, 360)
+    let normalizedRotation = ((rotation % 360) + 360) % 360;
     if (normalizedRotation > 180) {
-      normalizedRotation -= 360; // Adjust to be within [-180, 180)
+      normalizedRotation -= 360;
     }
-    return normalizedRotation === -90 // Special case for -90 rotation since tailwind doesn't support 270deg
+    return normalizedRotation === -90
       ? "-rotate-90"
       : `rotate-${normalizedRotation}`;
   }
@@ -164,232 +169,236 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
   );
 
   return (
-    <DialogModal
-      fixedWidth={false}
-      className="z-10 h-full w-full max-w-5xl flex-col gap-4 rounded-lg bg-white p-4 shadow-xl md:p-6"
-      onClose={() => {
-        handleClose();
-      }}
-      title={<span className="text-sm text-gray-600">{t("file_preview")}</span>}
-      show={show}
-    >
-      {fileUrl ? (
-        <>
-          <div className="mb-2 flex flex-col items-start justify-between md:flex-row">
-            <div>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <p className="text-2xl font-bold text-gray-800 truncate">
-                      {fileNameTooltip}
-                    </p>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p className="text-sm text-white truncate bg-black rounded-md p-2">
-                      {fileName}
+    <Dialog open={show} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent className="h-full w-full max-w-5xl flex-col gap-4 bg-white rounded-lg p-4 shadow-xl md:p-6">
+        <DialogHeader>
+          <DialogTitle className="text-sm text-gray-600">
+            {t("file_preview")}
+          </DialogTitle>
+        </DialogHeader>
+
+        {fileUrl ? (
+          <>
+            <div className="mb-2 flex flex-col items-start justify-between md:flex-row">
+              <div>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <p className="text-2xl font-bold text-gray-800 truncate">
+                        {fileNameTooltip}
+                      </p>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p className="text-sm text-white truncate bg-red rounded-md p-2">
+                        {fileName}
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+                {uploadedFiles &&
+                  uploadedFiles[index] &&
+                  uploadedFiles[index].created_date && (
+                    <p className="mt-1 text-sm text-gray-600">
+                      {t("created_on")}{" "}
+                      {new Date(
+                        uploadedFiles[index].created_date!,
+                      ).toLocaleString("en-US", {
+                        dateStyle: "long",
+                        timeStyle: "short",
+                      })}
                     </p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-              {uploadedFiles &&
-                uploadedFiles[index] &&
-                uploadedFiles[index].created_date && (
-                  <p className="mt-1 text-sm text-gray-600">
-                    {t("created_on")}{" "}
-                    {new Date(
-                      uploadedFiles[index].created_date!,
-                    ).toLocaleString("en-US", {
-                      dateStyle: "long",
-                      timeStyle: "short",
-                    })}
-                  </p>
+                  )}
+              </div>
+              <div className="flex gap-4 mt-2 md:mt-0">
+                {downloadURL && downloadURL.length > 0 && (
+                  <Button variant="primary">
+                    <a
+                      href={downloadURL}
+                      className="text-white"
+                      download={`${file_state.name}.${file_state.extension}`}
+                    >
+                      <CareIcon icon="l-file-download" className="h-4 w-4" />
+                      <span>{t("download")}</span>
+                    </a>
+                  </Button>
                 )}
+                <Button variant="outline" type="button" onClick={handleClose}>
+                  {t("close")}
+                </Button>
+              </div>
             </div>
-            <div className="flex gap-4 mt-2 md:mt-0">
-              {downloadURL && downloadURL.length > 0 && (
-                <Button variant="primary">
-                  <a
-                    href={downloadURL}
-                    className="text-white"
-                    download={`${file_state.name}.${file_state.extension}`}
-                  >
-                    <CareIcon icon="l-file-download" className="h-4 w-4" />
-                    <span>{t("download")}</span>
-                  </a>
+            <div className="flex flex-1 items-center justify-center">
+              {uploadedFiles && uploadedFiles.length > 1 && (
+                <Button
+                  variant="primary"
+                  className="mr-4"
+                  onClick={() => handleNext(index - 1)}
+                  disabled={index <= 0}
+                  aria-label="Previous file"
+                >
+                  <CareIcon icon="l-arrow-left" className="h-4 w-4" />
                 </Button>
               )}
-              <Button variant="outline" type="button" onClick={handleClose}>
-                {t("close")}
-              </Button>
-            </div>
-          </div>
-          <div className="flex flex-1 items-center justify-center">
-            {uploadedFiles && uploadedFiles.length > 1 && (
-              <Button
-                variant="primary"
-                className="mr-4"
-                onClick={() => handleNext(index - 1)}
-                disabled={index <= 0}
-                aria-label="Previous file"
-              >
-                <CareIcon icon="l-arrow-left" className="h-4 w-4" />
-              </Button>
-            )}
-            <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
-              {file_state.isImage ? (
-                <img
-                  src={fileUrl}
-                  alt="file"
-                  className={`h-full w-full object-contain ${
-                    zoom_values[file_state.zoom - 1]
-                  } ${getRotationClass(file_state.rotation)}`}
-                />
-              ) : file_state.extension === "pdf" ? (
-                <Suspense fallback={<CircularProgress />}>
-                  <PDFViewer
-                    url={fileUrl}
-                    onDocumentLoadSuccess={(numPages: number) => {
-                      setPage(1);
-                      setNumPages(numPages);
-                    }}
-                    pageNumber={page}
-                    scale={scale}
+              <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
+                {file_state.isImage ? (
+                  <img
+                    src={fileUrl}
+                    alt="file"
+                    className={`h-full w-full object-contain ${
+                      zoom_values[file_state.zoom - 1]
+                    } ${getRotationClass(file_state.rotation)}`}
                   />
-                </Suspense>
-              ) : previewExtensions.includes(file_state.extension) ? (
-                <iframe
-                  sandbox=""
-                  // eslint-disable-next-line i18next/no-literal-string
-                  title="Source Files"
-                  src={fileUrl}
-                  className="h-[75vh] w-full"
-                />
-              ) : (
-                <div className="flex h-full w-full flex-col items-center justify-center">
-                  <CareIcon
-                    icon="l-file"
-                    className="mb-4 text-5xl text-secondary-600"
+                ) : file_state.extension === "pdf" ? (
+                  <Suspense fallback={<CircularProgress />}>
+                    <PDFViewer
+                      url={fileUrl}
+                      onDocumentLoadSuccess={(numPages: number) => {
+                        setPage(1);
+                        setNumPages(numPages);
+                      }}
+                      pageNumber={page}
+                      scale={scale}
+                    />
+                  </Suspense>
+                ) : previewExtensions.includes(file_state.extension) ? (
+                  <iframe
+                    sandbox=""
+                    title={t("source_file")}
+                    src={fileUrl}
+                    className="h-[75vh] w-full"
                   />
-                  {t("file_preview_not_supported")}
-                </div>
-              )}
-            </div>
+                ) : (
+                  <div className="flex h-full w-full flex-col items-center justify-center">
+                    <CareIcon
+                      icon="l-file"
+                      className="mb-4 text-5xl text-secondary-600"
+                    />
+                    {t("file_preview_not_supported")}
+                  </div>
+                )}
+              </div>
 
-            {uploadedFiles && uploadedFiles.length > 1 && (
-              <Button
-                variant="primary"
-                className="ml-4"
-                onClick={() => handleNext(index + 1)}
-                disabled={index >= uploadedFiles.length - 1}
-                aria-label="Next file"
-              >
-                <CareIcon icon="l-arrow-right" className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-          <div className="flex items-center justify-between">
-            <div className="mt-2 flex w-full flex-col justify-center gap-3 md:flex-row">
-              {file_state.isImage && (
-                <>
-                  {[
-                    [
-                      t("Zoom In"),
-                      "l-search-plus",
-                      handleZoomIn,
-                      file_state.zoom === zoom_values.length,
-                    ],
-                    [
-                      `${25 * file_state.zoom}%`,
-                      false,
-                      () => {
-                        setFileState({ ...file_state, zoom: 4 });
-                      },
-                      false,
-                    ],
-                    [
-                      t("Zoom Out"),
-                      "l-search-minus",
-                      handleZoomOut,
-                      file_state.zoom === 1,
-                    ],
-                    [
-                      t("Rotate Left"),
-                      "l-corner-up-left",
-                      () => handleRotate(-90),
-                      false,
-                    ],
-                    [
-                      t("Rotate Right"),
-                      "l-corner-up-right",
-                      () => handleRotate(90),
-                      false,
-                    ],
-                  ].map((button, index) => (
-                    <Button
-                      variant="ghost"
-                      key={index}
-                      onClick={button[2] as () => void}
-                      className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
-                      disabled={button[3] as boolean}
-                    >
-                      {button[1] && (
-                        <CareIcon
-                          icon={button[1] as IconName}
-                          className="mr-2 text-lg"
-                        />
-                      )}
-                      {button[0] as string}
-                    </Button>
-                  ))}
-                </>
-              )}
-              {file_state.extension === "pdf" && (
-                <>
-                  {[
-                    ["Zoom In", "l-search-plus", handleZoomIn, scale >= 2],
-                    [`${Math.round(scale * 100)}%`, false, () => {}, false],
-                    ["Zoom Out", "l-search-minus", handleZoomOut, scale <= 0.5],
-                    [
-                      "Previous",
-                      "l-arrow-left",
-                      () => setPage((prev) => prev - 1),
-                      page === 1,
-                    ],
-                    [`${page}/${numPages}`, false, () => ({}), false],
-                    [
-                      "Next",
-                      "l-arrow-right",
-                      () => setPage((prev) => prev + 1),
-                      page === numPages,
-                    ],
-                  ].map((button, index) => (
-                    <Button
-                      variant="ghost"
-                      key={index}
-                      onClick={button[2] as () => void}
-                      className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
-                      disabled={button[3] as boolean}
-                    >
-                      {button[1] && (
-                        <CareIcon
-                          icon={button[1] as IconName}
-                          className="mr-2 text-lg"
-                        />
-                      )}
-                      {button[0] as string}
-                    </Button>
-                  ))}
-                </>
+              {uploadedFiles && uploadedFiles.length > 1 && (
+                <Button
+                  variant="primary"
+                  className="ml-4"
+                  onClick={() => handleNext(index + 1)}
+                  disabled={index >= uploadedFiles.length - 1}
+                  aria-label={t("next_file")}
+                >
+                  <CareIcon icon="l-arrow-right" className="h-4 w-4" />
+                </Button>
               )}
             </div>
+            <div className="flex items-center justify-between">
+              <div className="mt-2 flex w-full flex-col justify-center gap-3 md:flex-row">
+                {file_state.isImage && (
+                  <>
+                    {[
+                      [
+                        t("zoom_in"),
+                        "l-search-plus",
+                        handleZoomIn,
+                        file_state.zoom === zoom_values.length,
+                      ],
+                      [
+                        `${25 * file_state.zoom}%`,
+                        false,
+                        () => {
+                          setFileState({ ...file_state, zoom: 4 });
+                        },
+                        false,
+                      ],
+                      [
+                        t("zoom_out"),
+                        "l-search-minus",
+                        handleZoomOut,
+                        file_state.zoom === 1,
+                      ],
+                      [
+                        t("rotate_left"),
+                        "l-corner-up-left",
+                        () => handleRotate(-90),
+                        false,
+                      ],
+                      [
+                        t("rotate_right"),
+                        "l-corner-up-right",
+                        () => handleRotate(90),
+                        false,
+                      ],
+                    ].map((button, index) => (
+                      <Button
+                        variant="ghost"
+                        key={index}
+                        onClick={button[2] as () => void}
+                        className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
+                        disabled={button[3] as boolean}
+                      >
+                        {button[1] && (
+                          <CareIcon
+                            icon={button[1] as IconName}
+                            className="mr-2 text-lg"
+                          />
+                        )}
+                        {button[0] as string}
+                      </Button>
+                    ))}
+                  </>
+                )}
+                {file_state.extension === "pdf" && (
+                  <>
+                    {[
+                      [t("zoom_in"), "l-search-plus", handleZoomIn, scale >= 2],
+                      [`${Math.round(scale * 100)}%`, false, () => {}, false],
+                      [
+                        t("zoom_out"),
+                        "l-search-minus",
+                        handleZoomOut,
+                        scale <= 0.5,
+                      ],
+                      [
+                        t("previous"),
+                        "l-arrow-left",
+                        () => setPage((prev) => prev - 1),
+                        page === 1,
+                      ],
+                      [`${page}/${numPages}`, false, () => ({}), false],
+                      [
+                        t("next"),
+                        "l-arrow-right",
+                        () => setPage((prev) => prev + 1),
+                        page === numPages,
+                      ],
+                    ].map((button, index) => (
+                      <Button
+                        variant="ghost"
+                        key={index}
+                        onClick={button[2] as () => void}
+                        className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
+                        disabled={button[3] as boolean}
+                      >
+                        {button[1] && (
+                          <CareIcon
+                            icon={button[1] as IconName}
+                            className="mr-2 text-lg"
+                          />
+                        )}
+                        {button[0] as string}
+                      </Button>
+                    ))}
+                  </>
+                )}
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="flex h-[75vh] items-center justify-center">
+            <CircularProgress />
           </div>
-        </>
-      ) : (
-        <div className="flex h-[75vh] items-center justify-center">
-          <CircularProgress />
-        </div>
-      )}
-    </DialogModal>
+        )}
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/src/components/Facility/DuplicatePatientDialog.tsx b/src/components/Facility/DuplicatePatientDialog.tsx
index 2e795092042..beac625f852 100644
--- a/src/components/Facility/DuplicatePatientDialog.tsx
+++ b/src/components/Facility/DuplicatePatientDialog.tsx
@@ -4,6 +4,13 @@ import { useTranslation } from "react-i18next";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -13,120 +20,125 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-import DialogModal from "@/components/Common/Dialog";
-
 import { PartialPatientModel } from "@/types/emr/newPatient";
 
 interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   patientList: Array<PartialPatientModel>;
   handleOk: (action: string) => void;
-  handleCancel: () => void;
 }
 
 const DuplicatePatientDialog = (props: Props) => {
   const { t } = useTranslation();
-  const { patientList, handleOk, handleCancel } = props;
+  const { open, onOpenChange, patientList, handleOk } = props;
   const [action, setAction] = useState("");
 
   return (
-    <DialogModal
-      title={t("patient_records_found")}
-      show={true}
-      onClose={handleCancel}
-      className="w-3/4 md:w-1/2"
-    >
-      <div className="grid grid-cols-1 gap-4">
-        <div>
-          <p className="text-sm leading-relaxed">
-            {t("patient_records_found_description")}(
-            <span className="font-bold">{patientList[0].phone_number}</span>)
-          </p>
-        </div>
-        <div>
-          <div className="max-h-[200px] overflow-auto ">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  {[`${t("patient_name")} / ID`, t("gender")].map(
-                    (heading, i) => (
-                      <TableHead key={i}>{heading}</TableHead>
-                    ),
-                  )}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {patientList.map((patient, i) => {
-                  return (
-                    <TableRow key={i}>
-                      <TableCell>
-                        <div className="font-semibold capitalize">
-                          {patient.name}
-                        </div>
-                        <div className="break-words text-xs">
-                          ID : {patient.id}
-                        </div>
-                      </TableCell>
-                      <TableCell>{patient.gender}</TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-3/4 md:w-1/2">
+        <DialogHeader>
+          <DialogTitle>{t("patient_records_found")}</DialogTitle>
+        </DialogHeader>
+        <div className="grid grid-cols-1 gap-4">
+          <div>
+            <p className="text-sm leading-relaxed">
+              {t("patient_records_found_description")}(
+              <span className="font-bold">{patientList[0].phone_number}</span>)
+            </p>
           </div>
-        </div>
-        <div className="flex flex-col">
-          <div className="mb-2 flex items-center">
-            <label
-              className="mb-2 ml-0 flex w-full rounded-md bg-primary-500 py-2 pr-2 text-white"
-              htmlFor="transfer"
-            >
-              <input
-                type="radio"
-                className="m-3 text-green-600 focus:ring-2 focus:ring-green-500"
-                id="transfer"
-                name="confirm_action"
-                value="transfer"
-                onChange={(e) => setAction(e.target.value)}
-              />
-              <p>{t("duplicate_patient_record_confirmation")}</p>
-            </label>
+          <div>
+            <div className="max-h-[200px] overflow-auto ">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    {[`${t("patient_name")} / ID`, t("gender")].map(
+                      (heading, i) => (
+                        <TableHead key={i}>{heading}</TableHead>
+                      ),
+                    )}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {patientList.map((patient, i) => {
+                    return (
+                      <TableRow key={i}>
+                        <TableCell>
+                          <div className="font-semibold capitalize">
+                            {patient.name}
+                          </div>
+                          <div className="break-words text-xs">
+                            ID : {patient.id}
+                          </div>
+                        </TableCell>
+                        <TableCell>{patient.gender}</TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
           </div>
+          <div className="flex flex-col">
+            <div className="mb-2 flex items-center">
+              <label
+                className="mb-2 ml-0 flex w-full rounded-md bg-primary-500 py-2 pr-2 text-white"
+                htmlFor="transfer"
+              >
+                <input
+                  type="radio"
+                  className="m-3 text-green-600 focus:ring-2 focus:ring-green-500"
+                  id="transfer"
+                  name="confirm_action"
+                  value="transfer"
+                  onChange={(e) => setAction(e.target.value)}
+                />
+                <p>{t("duplicate_patient_record_confirmation")}</p>
+              </label>
+            </div>
 
-          <div className="mb-2 flex items-center">
-            <label
-              className="mb-2 ml-0 flex w-full rounded-md bg-red-500 py-2 pr-2 text-white"
-              htmlFor="close"
-            >
-              <input
-                type="radio"
-                id="close"
-                className="m-3 text-red-600 focus:ring-2 focus:ring-red-500"
-                name="confirm_action"
-                value="close"
-                onChange={(e) => setAction(e.target.value)}
-              />
-              <p>{t("duplicate_patient_record_rejection")}</p>
-            </label>
-          </div>
+            <div className="mb-2 flex items-center">
+              <label
+                className="mb-2 ml-0 flex w-full rounded-md bg-red-500 py-2 pr-2 text-white"
+                htmlFor="close"
+              >
+                <input
+                  type="radio"
+                  id="close"
+                  className="m-3 text-red-600 focus:ring-2 focus:ring-red-500"
+                  name="confirm_action"
+                  value="close"
+                  onChange={(e) => setAction(e.target.value)}
+                />
+                <p>{t("duplicate_patient_record_rejection")}</p>
+              </label>
+            </div>
 
-          <p>{t("duplicate_patient_record_birth_unknown")}</p>
+            <p>{t("duplicate_patient_record_birth_unknown")}</p>
+          </div>
         </div>
-      </div>
-      <div className="mt-4 flex flex-col justify-between sm:flex-row">
-        <Button onClick={handleCancel} className="gap-1" variant={"secondary"}>
-          <CareIcon icon="l-times" className="text-lg" />
-          {t("close")}
-        </Button>
-        <Button
-          onClick={() => handleOk(action)}
-          disabled={!action}
-          variant={"primary"}
-        >
-          <CareIcon icon="l-check" className="text-lg mr-1" />
-          {t("continue")}
-        </Button>
-      </div>
-    </DialogModal>
+        <DialogFooter>
+          <div className="mt-4 flex flex-col justify-between sm:flex-row gap-2">
+            <Button
+              onClick={() => onOpenChange(false)}
+              className="gap-1"
+              variant={"secondary"}
+            >
+              <CareIcon icon="l-times" className="text-lg" />
+              {t("close")}
+            </Button>
+            <Button
+              onClick={() => handleOk(action)}
+              disabled={!action}
+              variant={"primary"}
+            >
+              <CareIcon icon="l-check" className="text-lg mr-1" />
+              {t("continue")}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/src/components/Facility/FacilityHome.tsx b/src/components/Facility/FacilityHome.tsx
index 547d1b209d6..195e4d700bf 100644
--- a/src/components/Facility/FacilityHome.tsx
+++ b/src/components/Facility/FacilityHome.tsx
@@ -7,14 +7,26 @@ import {
 } from "@radix-ui/react-tooltip";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useMutation } from "@tanstack/react-query";
-import { Hospital, MapPin, MoreVertical, Settings } from "lucide-react";
+import { Edit2, Hospital, MapPin, MoreVertical, Settings } from "lucide-react";
 import { navigate } from "raviger";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
+import { cn } from "@/lib/utils";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
@@ -26,7 +38,6 @@ import { Markdown } from "@/components/ui/markdown";
 
 import { Avatar } from "@/components/Common/Avatar";
 import AvatarEditModal from "@/components/Common/AvatarEditModal";
-import ConfirmDialog from "@/components/Common/ConfirmDialog";
 import ContactLink from "@/components/Common/ContactLink";
 import Loading from "@/components/Common/Loading";
 
@@ -96,7 +107,6 @@ const renderGeoOrganizations = (geoOrg: Organization) => {
 
 export const FacilityHome = ({ facilityId }: Props) => {
   const { t } = useTranslation();
-  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const [editCoverImage, setEditCoverImage] = useState(false);
   const queryClient = useQueryClient();
 
@@ -106,13 +116,14 @@ export const FacilityHome = ({ facilityId }: Props) => {
       pathParams: { id: facilityId },
     }),
   });
-  const { mutate: deleteFacility } = useMutation({
+
+  const { mutate: deleteFacility, isPending: isDeleting } = useMutation({
     mutationFn: mutate(routes.deleteFacility, {
       pathParams: { id: facilityId },
     }),
     onSuccess: () => {
       toast.success(
-        t("entity_deleted_successfully", { name: facilityData?.name }),
+        t("facility_deleted_successfully", { name: facilityData?.name }),
       );
       navigate("/facility");
     },
@@ -184,26 +195,13 @@ export const FacilityHome = ({ facilityId }: Props) => {
 
   return (
     <div>
-      <ConfirmDialog
-        title={t("delete_item", { name: facilityData?.name })}
-        description={
-          <span>
-            {t("are_you_sure_want_to_delete", { name: facilityData?.name })}
-          </span>
-        }
-        action="Delete"
-        variant="destructive"
-        show={openDeleteDialog}
-        onClose={() => setOpenDeleteDialog(false)}
-        onConfirm={() => deleteFacility()}
-      />
       <AvatarEditModal
         title={t("edit_cover_photo")}
         open={editCoverImage}
         imageUrl={facilityData?.read_cover_image_url}
         handleUpload={handleCoverImageUpload}
         handleDelete={handleCoverImageDelete}
-        onClose={() => setEditCoverImage(false)}
+        onOpenChange={(open) => setEditCoverImage(open)}
         hint={coverImageHint}
       />
       <div className="container mx-auto p-6">
@@ -267,7 +265,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
                             className="cursor-pointer"
                             onClick={() => setEditCoverImage(true)}
                           >
-                            <Settings className="mr-2 h-4 w-4" />
+                            <Edit2 className="mr-2 h-4 w-4" />
                             {t("edit_cover_photo")}
                           </DropdownMenuItem>
                         )}
@@ -276,7 +274,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
                           facilityId={facilityId}
                           trigger={
                             <DropdownMenuItem
-                              className=" cursor-pointer"
+                              className="cursor-pointer"
                               onSelect={(e) => {
                                 e.preventDefault();
                               }}
@@ -286,16 +284,45 @@ export const FacilityHome = ({ facilityId }: Props) => {
                             </DropdownMenuItem>
                           }
                         />
-                        {/* TODO: get permissions from backend */}
-                        {/* {hasPermissionToDeleteFacility && (
-                          <DropdownMenuItem
-                            className="text-destructive"
-                            onClick={() => setOpenDeleteDialog(true)}
-                          >
-                            <Trash2 className="mr-2 h-4 w-4" />
-                            {t("delete_facility")}
-                          </DropdownMenuItem>
-                        )} */}
+                        <AlertDialog>
+                          {/* TODO: add delete facility */}
+                          {/* <AlertDialogTrigger asChild>
+                            <DropdownMenuItem
+                              className="cursor-pointer text-danger-500"
+                              onSelect={(e) => e.preventDefault()}
+                            >
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              {t("delete_facility")}
+                            </DropdownMenuItem>
+                          </AlertDialogTrigger> */}
+                          <AlertDialogContent>
+                            <AlertDialogHeader>
+                              <AlertDialogTitle>
+                                {t("delete_facility")}
+                              </AlertDialogTitle>
+                              <AlertDialogDescription>
+                                {t("delete_facility_confirmation", {
+                                  name: facilityData?.name,
+                                })}
+                              </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                              <AlertDialogCancel>
+                                {t("cancel")}
+                              </AlertDialogCancel>
+                              <AlertDialogAction
+                                onClick={() => deleteFacility()}
+                                className={cn(
+                                  buttonVariants({ variant: "destructive" }),
+                                )}
+                                disabled={isDeleting}
+                              >
+                                {isDeleting ? t("deleting") : t("delete")}
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
+
                         <PLUGIN_Component
                           __name="FacilityHomeActions"
                           facility={facilityData}
diff --git a/src/components/Files/CameraCaptureDialog.tsx b/src/components/Files/CameraCaptureDialog.tsx
index 54b9debc21e..8ee66a313d6 100644
--- a/src/components/Files/CameraCaptureDialog.tsx
+++ b/src/components/Files/CameraCaptureDialog.tsx
@@ -6,21 +6,25 @@ import { toast } from "sonner";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
-
-import DialogModal from "@/components/Common/Dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 import useBreakpoints from "@/hooks/useBreakpoints";
 
 export interface CameraCaptureDialogProps {
-  show: boolean;
-  onHide: () => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
   onCapture: (file: File, fileName: string) => void;
   onResetCapture: () => void;
   setPreview?: (isPreview: boolean) => void;
 }
 
 export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
-  const { show, onHide, onCapture, onResetCapture, setPreview } = props;
+  const { open, onOpenChange, onCapture, onResetCapture, setPreview } = props;
   const isLaptopScreen = useBreakpoints({ lg: true, default: false });
 
   const [cameraFacingMode, setCameraFacingMode] = useState(
@@ -34,8 +38,9 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
     height: { ideal: 2160 },
     facingMode: cameraFacingMode,
   };
+
   useEffect(() => {
-    if (!show) return;
+    if (!open) return;
     let stream: MediaStream | null = null;
 
     navigator.mediaDevices
@@ -45,7 +50,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
       })
       .catch(() => {
         toast.warning(t("camera_permission_denied"));
-        onHide();
+        onOpenChange(false);
       });
 
     return () => {
@@ -55,7 +60,7 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
         });
       }
     };
-  }, [show, cameraFacingMode, onHide]);
+  }, [open, cameraFacingMode, onOpenChange]);
 
   const handleSwitchCamera = useCallback(async () => {
     const devices = await navigator.mediaDevices.enumerateDevices();
@@ -87,130 +92,62 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
   };
 
   return (
-    <DialogModal
-      show={show}
-      title={
-        <div className="flex flex-row">
-          <div className="rounded-full bg-primary-100 px-5 py-4">
-            <CareIcon
-              icon="l-camera-change"
-              className="text-lg text-primary-500"
-            />
-          </div>
-          <div className="m-4">
-            <h1 className="text-xl text-black">{t("camera")}</h1>
-          </div>
-        </div>
-      }
-      className="max-w-2xl"
-      onClose={onHide}
-    >
-      <div>
-        {!previewImage ? (
-          <div className="m-3">
-            <Webcam
-              forceScreenshotSourceSize
-              screenshotQuality={1}
-              audio={false}
-              screenshotFormat="image/jpeg"
-              ref={webRef}
-              videoConstraints={{
-                ...videoConstraints,
-                facingMode: cameraFacingMode,
-              }}
-            />
-          </div>
-        ) : (
-          <div className="m-3">
-            <img src={previewImage} />
-          </div>
-        )}
-      </div>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            <div className="flex flex-row">
+              <div className="rounded-full bg-primary-100 px-5 py-4">
+                <CareIcon
+                  icon="l-camera-change"
+                  className="text-lg text-primary-500"
+                />
+              </div>
+
+              <div className="m-4">
+                <h1 className="text-xl text-black">{t("camera")}</h1>
+              </div>
+            </div>
+          </DialogTitle>
+        </DialogHeader>
 
-      {/* buttons for mobile screens */}
-      <div className="m-4 flex justify-evenly sm:hidden">
-        <div>
-          {!previewImage ? (
-            <Button
-              variant="primary"
-              onClick={handleSwitchCamera}
-              className="m-2"
-            >
-              {t("switch")}
-            </Button>
-          ) : (
-            <></>
-          )}
-        </div>
         <div>
           {!previewImage ? (
-            <>
-              <div>
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    captureImage();
-                    setPreview?.(true);
-                  }}
-                  className="m-2"
-                >
-                  {t("capture")}
-                </Button>
-              </div>
-            </>
+            <div className="m-3">
+              <Webcam
+                forceScreenshotSourceSize
+                screenshotQuality={1}
+                audio={false}
+                screenshotFormat="image/jpeg"
+                ref={webRef}
+                videoConstraints={{
+                  ...videoConstraints,
+                  facingMode: cameraFacingMode,
+                }}
+              />
+            </div>
           ) : (
-            <>
-              <div className="flex space-x-2">
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    setPreviewImage(null);
-                    onResetCapture();
-                    setPreview?.(false);
-                  }}
-                  className="m-2"
-                >
-                  {t("retake")}
-                </Button>
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    setPreviewImage(null);
-                    onHide();
-                    setPreview?.(false);
-                  }}
-                  className="m-2"
-                >
-                  {t("submit")}
-                </Button>
-              </div>
-            </>
+            <div className="m-3">
+              <img src={previewImage} />
+            </div>
           )}
         </div>
-        <div className="sm:flex-1">
-          <Button
-            variant="outline"
-            onClick={() => {
-              setPreviewImage(null);
-              onResetCapture();
-              onHide();
-            }}
-            className="m-2"
-          >
-            {t("close")}
-          </Button>
-        </div>
-      </div>
-      {/* buttons for laptop screens */}
-      <div className={`${isLaptopScreen ? " " : "hidden"}`}>
-        <div className="m-4 flex lg:hidden">
-          <Button variant="primary" onClick={handleSwitchCamera}>
-            <CareIcon icon="l-camera-change" className="text-lg" />
-            {`${t("switch")} ${t("camera")}`}
-          </Button>
-        </div>
 
-        <div className="flex justify-end gap-2 p-4">
+        {/* buttons for mobile and tablet screens */}
+        <div className="m-4 flex justify-evenly lg:hidden">
+          <div>
+            {!previewImage ? (
+              <Button
+                variant="primary"
+                onClick={handleSwitchCamera}
+                className="m-2"
+              >
+                {t("switch")}
+              </Button>
+            ) : (
+              <></>
+            )}
+          </div>
           <div>
             {!previewImage ? (
               <>
@@ -221,8 +158,8 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                       captureImage();
                       setPreview?.(true);
                     }}
+                    className="m-2"
                   >
-                    <CareIcon icon="l-capture" className="text-lg" />
                     {t("capture")}
                   </Button>
                 </div>
@@ -237,16 +174,18 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
                       onResetCapture();
                       setPreview?.(false);
                     }}
+                    className="m-2"
                   >
                     {t("retake")}
                   </Button>
                   <Button
                     variant="primary"
                     onClick={() => {
-                      onHide();
                       setPreviewImage(null);
+                      onOpenChange(false);
                       setPreview?.(false);
                     }}
+                    className="m-2"
                   >
                     {t("submit")}
                   </Button>
@@ -254,20 +193,82 @@ export default function CameraCaptureDialog(props: CameraCaptureDialogProps) {
               </>
             )}
           </div>
-          <div className="sm:flex-1" />
-          <Button
-            variant="outline"
-            onClick={() => {
-              setPreviewImage(null);
-              onResetCapture();
-              onHide();
-              setPreview?.(false);
-            }}
-          >
-            {`${t("close")} ${t("camera")}`}
-          </Button>
+          <div>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setPreviewImage(null);
+                onResetCapture();
+                onOpenChange(false);
+              }}
+              className="m-2"
+            >
+              {t("close")}
+            </Button>
+          </div>
+        </div>
+
+        {/* buttons for laptop screens */}
+        <div className="hidden lg:block">
+          <div className="flex justify-end gap-2 p-4">
+            <div>
+              {!previewImage ? (
+                <>
+                  <div>
+                    <Button
+                      variant="primary"
+                      onClick={() => {
+                        captureImage();
+                        setPreview?.(true);
+                      }}
+                    >
+                      <CareIcon icon="l-capture" className="text-lg" />
+                      {t("capture")}
+                    </Button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="flex space-x-2">
+                    <Button
+                      variant="primary"
+                      onClick={() => {
+                        setPreviewImage(null);
+                        onResetCapture();
+                        setPreview?.(false);
+                      }}
+                    >
+                      {t("retake")}
+                    </Button>
+                    <Button
+                      variant="primary"
+                      onClick={() => {
+                        onOpenChange(false);
+                        setPreviewImage(null);
+                        setPreview?.(false);
+                      }}
+                    >
+                      {t("submit")}
+                    </Button>
+                  </div>
+                </>
+              )}
+            </div>
+            <div className="flex-1" />
+            <Button
+              variant="outline"
+              onClick={() => {
+                setPreviewImage(null);
+                onResetCapture();
+                onOpenChange(false);
+                setPreview?.(false);
+              }}
+            >
+              {`${t("close")} ${t("camera")}`}
+            </Button>
+          </div>
         </div>
-      </div>
-    </DialogModal>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/components/Patient/PatientHome.tsx b/src/components/Patient/PatientHome.tsx
index 0807023978a..69df69c4143 100644
--- a/src/components/Patient/PatientHome.tsx
+++ b/src/components/Patient/PatientHome.tsx
@@ -247,30 +247,6 @@ export const PatientHome = (props: {
           </div>
         </div>
       </div>
-
-      {/* <ConfirmDialog
-        className="w-full justify-between"
-        title={t("assign_a_volunteer_to", { name: patientData.name })}
-        show={openAssignVolunteerDialog}
-        onClose={() => setOpenAssignVolunteerDialog(false)}
-        description={
-          <div className="mt-6">
-            <UserAutocomplete
-              value={assignedVolunteer as UserBareMinimum}
-              onChange={(user) => setAssignedVolunteer(user.value)}
-              userType={"Volunteer"}
-              name={"assign_volunteer"}
-              error={errors.assignedVolunteer}
-            />
-          </div>
-        }
-        action={
-          assignedVolunteer || !patientData.assigned_to
-            ? t("assign")
-            : t("unassign")
-        }
-        onConfirm={handleAssignedVolunteer}
-      /> */}
     </Page>
   );
 };
diff --git a/src/components/Patient/PatientRegistration.tsx b/src/components/Patient/PatientRegistration.tsx
index 8557b4fab89..64ded99c691 100644
--- a/src/components/Patient/PatientRegistration.tsx
+++ b/src/components/Patient/PatientRegistration.tsx
@@ -747,10 +747,13 @@ export default function PatientRegistration(
       </div>
       {showDuplicate && (
         <DuplicatePatientDialog
+          open={showDuplicate}
           patientList={duplicatePatients}
           handleOk={handleDialogClose}
-          handleCancel={() => {
-            handleDialogClose("close");
+          onOpenChange={(open) => {
+            if (!open) {
+              handleDialogClose("close");
+            }
           }}
         />
       )}
diff --git a/src/components/Users/UserAvatar.tsx b/src/components/Users/UserAvatar.tsx
index 1d16f4ba8bd..fd288000919 100644
--- a/src/components/Users/UserAvatar.tsx
+++ b/src/components/Users/UserAvatar.tsx
@@ -97,7 +97,7 @@ export default function UserAvatar({ username }: { username: string }) {
         imageUrl={userData?.profile_picture_url}
         handleUpload={handleAvatarUpload}
         handleDelete={handleAvatarDelete}
-        onClose={() => setEditAvatar(false)}
+        onOpenChange={(open) => setEditAvatar(open)}
       />
       <div>
         <div className="my-4 overflow-visible rounded-lg bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6 flex justify-between">
diff --git a/src/components/Users/UserDeleteDialog.tsx b/src/components/Users/UserDeleteDialog.tsx
index 5a2becefe3d..a088c9f2512 100644
--- a/src/components/Users/UserDeleteDialog.tsx
+++ b/src/components/Users/UserDeleteDialog.tsx
@@ -1,26 +1,51 @@
-import ConfirmDialog from "@/components/Common/ConfirmDialog";
+import { useTranslation } from "react-i18next";
+
+import { cn } from "@/lib/utils";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { buttonVariants } from "@/components/ui/button";
 
 interface ConfirmDialogProps {
   name: string;
   handleCancel: () => void;
   handleOk: () => void;
+  show: boolean;
 }
 
 const UserDeleteDialog = (props: ConfirmDialogProps) => {
+  const { t } = useTranslation();
   return (
-    <ConfirmDialog
-      title="Delete User"
-      description={
-        <span>
-          Are you sure you want to delete user <strong>{props.name}</strong> ?
-        </span>
-      }
-      action="Delete"
-      variant="destructive"
-      show
-      onConfirm={props.handleOk}
-      onClose={props.handleCancel}
-    />
+    <AlertDialog open={props.show} onOpenChange={props.handleCancel}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t("delete_user")}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("are_you_sure_you_want_to_delete_user")}
+            <strong>{props.name}</strong>?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={props.handleCancel}>
+            {t("cancel")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={props.handleOk}
+            className={cn(buttonVariants({ variant: "destructive" }))}
+          >
+            {t("delete")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 
diff --git a/src/components/Users/UserSummary.tsx b/src/components/Users/UserSummary.tsx
index 10c6dca9d42..a28425e6eef 100644
--- a/src/components/Users/UserSummary.tsx
+++ b/src/components/Users/UserSummary.tsx
@@ -89,6 +89,7 @@ export default function UserSummaryTab({ userData }: { userData?: UserBase }) {
     <>
       {showDeleteDialog && (
         <UserDeleteDialog
+          show={showDeleteDialog}
           name={userData.username}
           handleOk={handleSubmit}
           handleCancel={() => {
@@ -96,6 +97,7 @@ export default function UserSummaryTab({ userData }: { userData?: UserBase }) {
           }}
         />
       )}
+
       <EditUserSheet
         existingUsername={userData.username}
         open={showEditUserSheet}
diff --git a/src/hooks/useFileManager.tsx b/src/hooks/useFileManager.tsx
index 6a704b02c77..894c53597d9 100644
--- a/src/hooks/useFileManager.tsx
+++ b/src/hooks/useFileManager.tsx
@@ -9,11 +9,16 @@ import { cn } from "@/lib/utils";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 
-import DialogModal from "@/components/Common/Dialog";
 import FilePreviewDialog from "@/components/Common/FilePreviewDialog";
 import { StateInterface } from "@/components/Files/FileUpload";
 import { FileUploadModel } from "@/components/Patient/models";
@@ -257,67 +262,156 @@ export default function useFileManager(
         downloadURL={downloadURL}
         uploadedFiles={uploadedFiles}
         onClose={handleFilePreviewClose}
-        fixedWidth={false}
         className="h-[80vh] w-full md:h-screen"
         loadFile={viewFile}
         currentIndex={currentIndex}
       />
-      <DialogModal
-        show={
+      <Dialog
+        open={
           archiveDialogueOpen !== null &&
           archiveDialogueOpen.archived_datetime === null
         }
-        title={
-          <div className="flex flex-row">
-            <div className="my-1 mr-3 rounded-full bg-red-100 px-5 py-4 text-center">
-              <CareIcon
-                icon="l-exclamation-triangle"
-                className="text-lg text-danger-500"
+        onOpenChange={() => setArchiveDialogueOpen(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              <div className="flex flex-row">
+                <div className="my-1 mr-3 rounded-full bg-red-100 px-5 py-4 text-center">
+                  <CareIcon
+                    icon="l-exclamation-triangle"
+                    className="text-lg text-danger-500"
+                  />
+                </div>
+                <div className="text-sm">
+                  <h1 className="text-xl text-black">{t("archive_file")}</h1>
+                  <span className="text-sm text-secondary-600">
+                    {t("this_action_is_irreversible")}
+                  </span>
+                </div>
+              </div>
+            </DialogTitle>
+          </DialogHeader>
+
+          <form
+            onSubmit={(event: any) => {
+              event.preventDefault();
+              handleFileArchive(archiveDialogueOpen);
+            }}
+            className="mx-2 my-4 flex w-full flex-col"
+          >
+            <div>
+              <Label className="text-gray-800 mb-2">
+                <Trans
+                  i18nKey="state_reason_for_archiving"
+                  values={{ name: archiveDialogueOpen?.name }}
+                  components={{ strong: <strong /> }}
+                />
+              </Label>
+              <Textarea
+                name="editFileName"
+                id="archive-file-reason"
+                rows={6}
+                required
+                placeholder="Type the reason..."
+                value={archiveReason}
+                onChange={(e) => setArchiveReason(e.target.value)}
+                className={cn(
+                  archiveReasonError &&
+                    "border-red-500 focus-visible:ring-red-500",
+                )}
               />
+              {archiveReasonError && (
+                <p className="text-sm text-red-500">{archiveReasonError}</p>
+              )}
             </div>
-            <div className="text-sm">
-              <h1 className="text-xl text-black">Archive File</h1>
-              <span className="text-sm text-secondary-600">
-                {t("this_action_is_irreversible")}
-              </span>
+            <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setArchiveDialogueOpen(null)}
+              >
+                {t("cancel")}
+              </Button>
+              <Button type="submit" variant="primary" disabled={archiving}>
+                {t("proceed")}
+              </Button>
             </div>
-          </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+      <Dialog
+        open={
+          archiveDialogueOpen !== null &&
+          archiveDialogueOpen.archived_datetime !== null
         }
-        onClose={() => setArchiveDialogueOpen(null)}
+        onOpenChange={() => setArchiveDialogueOpen(null)}
       >
-        <form
-          onSubmit={(event: any) => {
-            event.preventDefault();
-            handleFileArchive(archiveDialogueOpen);
-          }}
-          className="mx-2 my-4 flex w-full flex-col"
-        >
-          <div>
-            <Label className="text-gray-800 mb-2">
-              <Trans
-                i18nKey="state_reason_for_archiving"
-                values={{ name: archiveDialogueOpen?.name }}
-                components={{ strong: <strong /> }}
-              />
-            </Label>
-            <Textarea
-              name="editFileName"
-              id="archive-file-reason"
-              rows={6}
-              required
-              placeholder="Type the reason..."
-              value={archiveReason}
-              onChange={(e) => setArchiveReason(e.target.value)}
-              className={cn(
-                archiveReasonError &&
-                  "border-red-500 focus-visible:ring-red-500",
-              )}
-            />
-            {archiveReasonError && (
-              <p className="text-sm text-red-500">{archiveReasonError}</p>
-            )}
+        <DialogContent className="md:w-[700px]">
+          <DialogHeader>
+            <DialogTitle className="text-xl text-black">
+              {archiveDialogueOpen?.name} {t("archived")}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="mb-8 text-xs text-secondary-700">
+            <CareIcon icon="l-archive" className="mr-2" />
+            {t("this_file_has_been_archived")}
+          </div>
+          <div className="flex flex-col gap-4 md:grid md:grid-cols-2">
+            {[
+              {
+                label: "File Name",
+                content: archiveDialogueOpen?.name,
+                icon: "l-file",
+              },
+              {
+                label: "Uploaded By",
+                content: archiveDialogueOpen?.uploaded_by?.username,
+                icon: "l-user",
+              },
+              {
+                label: "Uploaded On",
+                content: formatDateTime(archiveDialogueOpen?.created_date),
+                icon: "l-clock",
+              },
+              {
+                label: "Archive Reason",
+                content: archiveDialogueOpen?.archive_reason,
+                icon: "l-archive",
+              },
+              {
+                label: "Archived By",
+                content: archiveDialogueOpen?.archived_by?.username,
+                icon: "l-user",
+              },
+              {
+                label: "Archived On",
+                content: formatDateTime(archiveDialogueOpen?.archived_datetime),
+                icon: "l-clock",
+              },
+            ].map((item, index) => (
+              <div key={index} className="flex gap-2">
+                <div className="flex aspect-square h-10 items-center justify-center rounded-full bg-primary-100">
+                  <CareIcon
+                    icon={item.icon as any}
+                    className="text-lg text-primary-500"
+                  />
+                </div>
+                <div>
+                  <div className="text-xs uppercase text-secondary-700">
+                    {item.label}
+                  </div>
+                  <div
+                    className="break-words text-base"
+                    data-archive-info={item.label}
+                  >
+                    {item.content}
+                  </div>
+                </div>
+              </div>
+            ))}
           </div>
-          <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
+          <div className="mt-10 flex justify-end">
             <Button
               type="button"
               variant="outline"
@@ -325,156 +419,75 @@ export default function useFileManager(
             >
               {t("cancel")}
             </Button>
-            <Button type="submit" variant="primary" disabled={archiving}>
-              {t("proceed")}
-            </Button>
           </div>
-        </form>
-      </DialogModal>
-      <DialogModal
-        show={
-          archiveDialogueOpen !== null &&
-          archiveDialogueOpen.archived_datetime !== null
-        }
-        title={
-          <h1 className="text-xl text-black">
-            {archiveDialogueOpen?.name} (Archived)
-          </h1>
-        }
-        fixedWidth={false}
-        className="md:w-[700px]"
-        onClose={() => setArchiveDialogueOpen(null)}
+        </DialogContent>
+      </Dialog>
+      <Dialog
+        open={editDialogueOpen !== null}
+        onOpenChange={() => setEditDialogueOpen(null)}
       >
-        <div className="mb-8 text-xs text-secondary-700">
-          <CareIcon icon="l-archive" className="mr-2" />
-          {t("this_file_has_been_archived")}
-        </div>
-        <div className="flex flex-col gap-4 md:grid md:grid-cols-2">
-          {[
-            {
-              label: "File Name",
-              content: archiveDialogueOpen?.name,
-              icon: "l-file",
-            },
-            {
-              label: "Uploaded By",
-              content: archiveDialogueOpen?.uploaded_by?.username,
-              icon: "l-user",
-            },
-            {
-              label: "Uploaded On",
-              content: formatDateTime(archiveDialogueOpen?.created_date),
-              icon: "l-clock",
-            },
-            {
-              label: "Archive Reason",
-              content: archiveDialogueOpen?.archive_reason,
-              icon: "l-archive",
-            },
-            {
-              label: "Archived By",
-              content: archiveDialogueOpen?.archived_by?.username,
-              icon: "l-user",
-            },
-            {
-              label: "Archived On",
-              content: formatDateTime(archiveDialogueOpen?.archived_datetime),
-              icon: "l-clock",
-            },
-          ].map((item, index) => (
-            <div key={index} className="flex gap-2">
-              <div className="flex aspect-square h-10 items-center justify-center rounded-full bg-primary-100">
-                <CareIcon
-                  icon={item.icon as any}
-                  className="text-lg text-primary-500"
-                />
-              </div>
-              <div>
-                <div className="text-xs uppercase text-secondary-700">
-                  {item.label}
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              <div className="flex flex-row">
+                <div className="rounded-full bg-primary-100 px-5 py-4">
+                  <CareIcon
+                    icon="l-edit-alt"
+                    className="text-lg text-primary-500"
+                  />
                 </div>
-                <div
-                  className="break-words text-base"
-                  data-archive-info={item.label}
-                >
-                  {item.content}
+                <div className="m-4">
+                  <h1 className="text-xl text-black">{t("rename_file")}</h1>
                 </div>
               </div>
-            </div>
-          ))}
-        </div>
-        <div className="mt-10 flex justify-end">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => setArchiveDialogueOpen(null)}
+            </DialogTitle>
+          </DialogHeader>
+          <form
+            onSubmit={(event: any) => {
+              event.preventDefault();
+              setEditing(true);
+              if (editDialogueOpen) partialupdateFileName(editDialogueOpen);
+            }}
+            className="flex w-full flex-col"
           >
-            {t("cancel")}
-          </Button>
-        </div>
-      </DialogModal>
-      <DialogModal
-        show={editDialogueOpen !== null}
-        title={
-          <div className="flex flex-row">
-            <div className="rounded-full bg-primary-100 px-5 py-4">
-              <CareIcon
-                icon="l-edit-alt"
-                className="text-lg text-primary-500"
+            <div>
+              <Label>{t("enter_the_file_name")}</Label>
+              <Input
+                name="editFileName"
+                id="edit-file-name"
+                value={editDialogueOpen?.name}
+                onChange={(e) => {
+                  setEditDialogueOpen({
+                    ...editDialogueOpen,
+                    name: e.target.value,
+                  });
+                }}
               />
+              {editError && <p className="text-sm text-red-500">{editError}</p>}
             </div>
-            <div className="m-4">
-              <h1 className="text-xl text-black">{t("rename_file")}</h1>
+            <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setEditDialogueOpen(null)}
+              >
+                {t("cancel")}
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={
+                  editing === true ||
+                  editDialogueOpen?.name === "" ||
+                  editDialogueOpen?.name?.length === 0
+                }
+              >
+                {t("proceed")}
+              </Button>
             </div>
-          </div>
-        }
-        onClose={() => setEditDialogueOpen(null)}
-      >
-        <form
-          onSubmit={(event: any) => {
-            event.preventDefault();
-            setEditing(true);
-            if (editDialogueOpen) partialupdateFileName(editDialogueOpen);
-          }}
-          className="flex w-full flex-col"
-        >
-          <div>
-            <Label>{t("enter_the_file_name")}</Label>
-            <Input
-              name="editFileName"
-              id="edit-file-name"
-              value={editDialogueOpen?.name}
-              onChange={(e) => {
-                setEditDialogueOpen({
-                  ...editDialogueOpen,
-                  name: e.target.value,
-                });
-              }}
-            />
-            {editError && <p className="text-sm text-red-500">{editError}</p>}
-          </div>
-          <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setEditDialogueOpen(null)}
-            >
-              {t("cancel")}
-            </Button>
-            <Button
-              type="submit"
-              variant="primary"
-              disabled={
-                editing === true ||
-                editDialogueOpen?.name === "" ||
-                editDialogueOpen?.name?.length === 0
-              }
-            >
-              {t("proceed")}
-            </Button>
-          </div>
-        </form>
-      </DialogModal>
+          </form>
+        </DialogContent>
+      </Dialog>
     </>
   );
 
diff --git a/src/hooks/useFileUpload.tsx b/src/hooks/useFileUpload.tsx
index d53b9497e08..d1b556fbb22 100644
--- a/src/hooks/useFileUpload.tsx
+++ b/src/hooks/useFileUpload.tsx
@@ -363,8 +363,8 @@ export default function useFileUpload(
   const Dialogues = (
     <>
       <CameraCaptureDialog
-        show={cameraModalOpen}
-        onHide={() => setCameraModalOpen(false)}
+        open={cameraModalOpen}
+        onOpenChange={(open) => setCameraModalOpen(open)}
         onCapture={(file) => {
           setFiles((prev) => [...prev, file]);
         }}