From 84489894980b4015920b32eb4e54d8c089b2287f Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Tue, 19 Nov 2024 14:51:44 +0530
Subject: [PATCH 01/14] Added Clear Image functionality

---
 src/components/Patient/UpdateStatusDialog.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index 9414ba9bb95..460001debf9 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -69,7 +69,6 @@ const UpdateStatusDialog = (props: Props) => {
   const [contentType, setcontentType] = useState<string>("");
   const [uploadPercent, setUploadPercent] = useState(0);
   const [uploadStarted, setUploadStarted] = useState<boolean>(false);
-  const [uploadDone, setUploadDone] = useState<boolean>(false);
 
   const currentStatus = SAMPLE_TEST_STATUS.find(
     (i) => i.text === sample.status,
@@ -123,7 +122,6 @@ const UpdateStatusDialog = (props: Props) => {
       (xhr: XMLHttpRequest) => {
         if (xhr.status >= 200 && xhr.status < 300) {
           setUploadStarted(false);
-          setUploadDone(true);
           request(routes.editUpload, {
             pathParams: {
               id: data.id,
@@ -156,13 +154,15 @@ const UpdateStatusDialog = (props: Props) => {
     );
     return e.target.files[0];
   };
+  const removeFile = () => {
+    setfile(undefined);
+  };
   const handleUpload = async () => {
     const f = file;
     if (f === undefined) return;
     const category = "UNSPECIFIED";
     const name = f.name;
     setUploadStarted(true);
-    setUploadDone(false);
 
     const { data } = await request(routes.createUpload, {
       body: {
@@ -226,6 +226,7 @@ const UpdateStatusDialog = (props: Props) => {
               <div className="mb-4 mt-3 flex flex-wrap justify-between gap-2">
                 <label className="button-size-default button-shape-square button-primary-default inline-flex h-min max-w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500">
                   <CareIcon icon="l-file-upload-alt" className="text-lg" />
+
                   <span className="max-w-full truncate">
                     {file ? file.name : t("choose_file")}
                   </span>
@@ -236,10 +237,17 @@ const UpdateStatusDialog = (props: Props) => {
                     hidden
                   />
                 </label>
+                {file && (
+                  <CareIcon
+                    icon="l-times"
+                    className="text-lg cursor-pointer mt-2 mr-4"
+                    onClick={removeFile}
+                  />
+                )}
                 <Submit
                   type="submit"
                   onClick={handleUpload}
-                  disabled={uploadDone}
+                  disabled={file ? false : true}
                 >
                   <CareIcon icon="l-cloud-upload" className="text-lg" />
                   <span>Upload</span>

From 662f437f09b385f5672fcc4a10a2ba673c4ee5f9 Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Tue, 19 Nov 2024 14:59:03 +0530
Subject: [PATCH 02/14] removed unneccessary line

---
 src/components/Patient/UpdateStatusDialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index 460001debf9..22d7a45d081 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -226,7 +226,6 @@ const UpdateStatusDialog = (props: Props) => {
               <div className="mb-4 mt-3 flex flex-wrap justify-between gap-2">
                 <label className="button-size-default button-shape-square button-primary-default inline-flex h-min max-w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500">
                   <CareIcon icon="l-file-upload-alt" className="text-lg" />
-
                   <span className="max-w-full truncate">
                     {file ? file.name : t("choose_file")}
                   </span>

From cef543839706ba39b4fb14d7e19bee42c868615d Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Tue, 19 Nov 2024 15:20:42 +0530
Subject: [PATCH 03/14] Added bot suggestions

---
 src/components/Patient/UpdateStatusDialog.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index 22d7a45d081..2872d2d44f8 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -243,11 +243,7 @@ const UpdateStatusDialog = (props: Props) => {
                     onClick={removeFile}
                   />
                 )}
-                <Submit
-                  type="submit"
-                  onClick={handleUpload}
-                  disabled={file ? false : true}
-                >
+                <Submit type="submit" onClick={handleUpload} disabled={!file}>
                   <CareIcon icon="l-cloud-upload" className="text-lg" />
                   <span>Upload</span>
                 </Submit>

From a341da1bfe837a17cf26cbead1743ae86904d2cf Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Thu, 21 Nov 2024 16:28:50 +0530
Subject: [PATCH 04/14] Fixed search icon overlay

---
 src/components/Common/SortDropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Common/SortDropdown.tsx b/src/components/Common/SortDropdown.tsx
index cf4193deaea..2e5ccd95015 100644
--- a/src/components/Common/SortDropdown.tsx
+++ b/src/components/Common/SortDropdown.tsx
@@ -27,7 +27,7 @@ export default function SortDropdownMenu(props: Props) {
       variant="secondary"
       className="w-full border border-primary-500 bg-white md:w-auto"
       icon={<CareIcon icon="l-sort" />}
-      containerClassName="w-full md:w-auto"
+      containerClassName="w-full md:w-auto z-20"
     >
       {props.options.map(({ isAscending, value }, i) => (
         <DropdownItem

From 5403593dac98f4d3f35cd75a8af646bc2e201a31 Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Thu, 21 Nov 2024 16:32:13 +0530
Subject: [PATCH 05/14] removing unrelated change

---
 src/components/Common/SortDropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Common/SortDropdown.tsx b/src/components/Common/SortDropdown.tsx
index 2e5ccd95015..cf4193deaea 100644
--- a/src/components/Common/SortDropdown.tsx
+++ b/src/components/Common/SortDropdown.tsx
@@ -27,7 +27,7 @@ export default function SortDropdownMenu(props: Props) {
       variant="secondary"
       className="w-full border border-primary-500 bg-white md:w-auto"
       icon={<CareIcon icon="l-sort" />}
-      containerClassName="w-full md:w-auto z-20"
+      containerClassName="w-full md:w-auto"
     >
       {props.options.map(({ isAscending, value }, i) => (
         <DropdownItem

From 9d3de7108dc4a94ada9632184d9ec8e803550581 Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Fri, 22 Nov 2024 12:51:39 +0530
Subject: [PATCH 06/14] Updated file upload with useFileUpload hook

---
 src/components/Patient/UpdateStatusDialog.tsx | 137 +++++-------------
 1 file changed, 34 insertions(+), 103 deletions(-)

diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index 2872d2d44f8..b7ebfffb6d7 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useReducer, useState } from "react";
+import { useEffect, useReducer } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -10,31 +10,24 @@ import CheckBoxFormField from "@/components/Form/FormFields/CheckBoxFormField";
 import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
 import TextFormField from "@/components/Form/FormFields/TextFormField";
 import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
-import {
-  CreateFileResponse,
-  SampleTestModel,
-} from "@/components/Patient/models";
+
+import useFileUpload from "@/hooks/useFileUpload";
 
 import {
-  HEADER_CONTENT_TYPES,
   SAMPLE_FLOW_RULES,
   SAMPLE_TEST_RESULT,
   SAMPLE_TEST_STATUS,
 } from "@/common/constants";
 
 import * as Notification from "@/Utils/Notifications";
-import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
-import uploadFile from "@/Utils/request/uploadFile";
 
 interface Props {
-  sample: SampleTestModel;
-  handleOk: (sample: SampleTestModel, status: number, result: number) => void;
+  sample: any;
+  handleOk: (sample: any, status: number, result: number) => void;
   handleCancel: () => void;
 }
 
 const statusChoices = [...SAMPLE_TEST_STATUS];
-
 const statusFlow = { ...SAMPLE_FLOW_RULES };
 
 const initForm: any = {
@@ -65,10 +58,12 @@ const UpdateStatusDialog = (props: Props) => {
   const { t } = useTranslation();
   const { sample, handleOk, handleCancel } = props;
   const [state, dispatch] = useReducer(updateStatusReducer, initialState);
-  const [file, setfile] = useState<File>();
-  const [contentType, setcontentType] = useState<string>("");
-  const [uploadPercent, setUploadPercent] = useState(0);
-  const [uploadStarted, setUploadStarted] = useState<boolean>(false);
+
+  const fileUpload = useFileUpload({
+    type: "SAMPLE_MANAGEMENT",
+    allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
+    allowNameFallback: true,
+  });
 
   const currentStatus = SAMPLE_TEST_STATUS.find(
     (i) => i.text === sample.status,
@@ -103,80 +98,16 @@ const UpdateStatusDialog = (props: Props) => {
     dispatch({ type: "set_form", form });
   };
 
-  const uploadfile = (data: CreateFileResponse) => {
-    const url = data.signed_url;
-    const internal_name = data.internal_name;
-
-    const f = file;
-    if (f === undefined) return;
-    const newFile = new File([f], `${internal_name}`);
-
-    uploadFile(
-      url,
-      newFile,
-      "PUT",
-      {
-        "Content-Type": contentType,
-        "Content-disposition": "inline",
-      },
-      (xhr: XMLHttpRequest) => {
-        if (xhr.status >= 200 && xhr.status < 300) {
-          setUploadStarted(false);
-          request(routes.editUpload, {
-            pathParams: {
-              id: data.id,
-              fileType: "SAMPLE_MANAGEMENT",
-              associatingId: sample.id?.toString() ?? "",
-            },
-            body: { upload_completed: true },
-          });
-          Notification.Success({ msg: "File Uploaded Successfully" });
-        } else {
-          setUploadStarted(false);
-        }
-      },
-      setUploadPercent,
-      () => {
-        setUploadStarted(false);
-      },
-    );
-  };
-
-  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files == null) {
-      throw new Error("Error finding e.target.files");
-    }
-    setfile(e.target.files[0]);
-    const fileName = e.target.files[0].name;
-    const ext: string = fileName.split(".")[1];
-    setcontentType(
-      HEADER_CONTENT_TYPES[ext as keyof typeof HEADER_CONTENT_TYPES],
-    );
-    return e.target.files[0];
-  };
-  const removeFile = () => {
-    setfile(undefined);
-  };
   const handleUpload = async () => {
-    const f = file;
-    if (f === undefined) return;
-    const category = "UNSPECIFIED";
-    const name = f.name;
-    setUploadStarted(true);
-
-    const { data } = await request(routes.createUpload, {
-      body: {
-        original_name: name,
-        file_type: "SAMPLE_MANAGEMENT",
-        name: `${sample.patient_name} Sample Report`,
-        associating_id: sample.id ?? "",
-        file_category: category,
-        mime_type: contentType,
-      },
-    });
-
-    if (data) {
-      uploadfile(data);
+    if (fileUpload.files.length > 0) {
+      await fileUpload.handleFileUpload(sample.id);
+      if (!fileUpload.error) {
+        Notification.Success({ msg: "File Uploaded Successfully" });
+      } else {
+        Notification.Error({ msg: `Upload failed: ${fileUpload.error}` });
+      }
+    } else {
+      Notification.Error({ msg: "No file selected for upload" });
     }
   };
 
@@ -218,34 +149,34 @@ const UpdateStatusDialog = (props: Props) => {
               onChange={handleChange}
             />
             <span className="font-semibold leading-relaxed">
-              Upload Report :
+              Upload Report:
             </span>
-            {uploadStarted ? (
-              <LinearProgressWithLabel value={uploadPercent} />
+            {fileUpload.progress !== null &&
+            fileUpload.progress !== undefined ? (
+              <LinearProgressWithLabel value={fileUpload.progress} />
             ) : (
               <div className="mb-4 mt-3 flex flex-wrap justify-between gap-2">
                 <label className="button-size-default button-shape-square button-primary-default inline-flex h-min max-w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500">
                   <CareIcon icon="l-file-upload-alt" className="text-lg" />
                   <span className="max-w-full truncate">
-                    {file ? file.name : t("choose_file")}
+                    {fileUpload.files?.[0]?.name || t("choose_file")}
                   </span>
-                  <input
-                    title="changeFile"
-                    onChange={onFileChange}
-                    type="file"
-                    hidden
-                  />
+                  <fileUpload.Input />
                 </label>
-                {file && (
+                {fileUpload.fileNames.length > 0 && (
                   <CareIcon
                     icon="l-times"
                     className="text-lg cursor-pointer mt-2 mr-4"
-                    onClick={removeFile}
+                    onClick={fileUpload.clearFiles}
                   />
                 )}
-                <Submit type="submit" onClick={handleUpload} disabled={!file}>
+                <Submit
+                  type="button"
+                  onClick={handleUpload}
+                  disabled={!fileUpload.files.length}
+                >
                   <CareIcon icon="l-cloud-upload" className="text-lg" />
-                  <span>Upload</span>
+                  <span>{t("upload")}</span>
                 </Submit>
               </div>
             )}

From 18ad9b51f5d6a5cc3685b2b0549c393e4b378fa4 Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Tue, 26 Nov 2024 09:22:21 +0530
Subject: [PATCH 07/14] Added types for sample

---
 public/locale/en.json                         |  1 +
 src/components/Patient/UpdateStatusDialog.tsx | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 5faa645b133..55025800031 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1297,6 +1297,7 @@
   "upload_headings__patient": "Upload New Patient File",
   "upload_headings__sample_report": "Upload Sample Report",
   "upload_headings__supporting_info": "Upload Supporting Info",
+  "upload_report": "Upload Report",
   "uploading": "Uploading",
   "use_existing_abha_address": "Use Existing ABHA Address",
   "user_deleted_successfuly": "User Deleted Successfuly",
diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index b7ebfffb6d7..ac8a178feff 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -21,9 +21,11 @@ import {
 
 import * as Notification from "@/Utils/Notifications";
 
+import { SampleTestModel } from "./models";
+
 interface Props {
-  sample: any;
-  handleOk: (sample: any, status: number, result: number) => void;
+  sample: SampleTestModel;
+  handleOk: (sample: SampleTestModel, status: number, result: number) => void;
   handleCancel: () => void;
 }
 
@@ -100,7 +102,11 @@ const UpdateStatusDialog = (props: Props) => {
 
   const handleUpload = async () => {
     if (fileUpload.files.length > 0) {
-      await fileUpload.handleFileUpload(sample.id);
+      if (sample.id) {
+        await fileUpload.handleFileUpload(sample.id);
+      } else {
+        Notification.Error({ msg: "Sample ID is missing" });
+      }
       if (!fileUpload.error) {
         Notification.Success({ msg: "File Uploaded Successfully" });
       } else {
@@ -149,7 +155,7 @@ const UpdateStatusDialog = (props: Props) => {
               onChange={handleChange}
             />
             <span className="font-semibold leading-relaxed">
-              Upload Report:
+              {t("upload_report")}:
             </span>
             {fileUpload.progress !== null &&
             fileUpload.progress !== undefined ? (

From 3c6eb0eabac48decb3378c42ce420ec8aaf2f4be Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Thu, 28 Nov 2024 09:42:51 +0530
Subject: [PATCH 08/14] Updated the file upload UI

---
 src/components/Patient/UpdateStatusDialog.tsx | 124 +++++++++++++-----
 1 file changed, 92 insertions(+), 32 deletions(-)

diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index ac8a178feff..629cacd0a85 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useReducer } from "react";
+import { ReactNode, useEffect, useReducer } from "react";
 import { useTranslation } from "react-i18next";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
+import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
-import { Submit } from "@/components/Common/ButtonV2";
+import ButtonV2 from "@/components/Common/ButtonV2";
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
 import { LinearProgressWithLabel } from "@/components/Files/FileUpload";
 import CheckBoxFormField from "@/components/Form/FormFields/CheckBoxFormField";
@@ -66,6 +66,21 @@ const UpdateStatusDialog = (props: Props) => {
     allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
     allowNameFallback: true,
   });
+  const uploadButtons: {
+    name: string;
+    icon: IconName;
+    onClick?: () => void;
+    children?: ReactNode;
+    show?: boolean;
+    id: string;
+  }[] = [
+    {
+      name: t("choose_file"),
+      icon: "l-file-upload-alt",
+      children: <fileUpload.Input />,
+      id: "upload-file",
+    },
+  ];
 
   const currentStatus = SAMPLE_TEST_STATUS.find(
     (i) => i.text === sample.status,
@@ -102,16 +117,22 @@ const UpdateStatusDialog = (props: Props) => {
 
   const handleUpload = async () => {
     if (fileUpload.files.length > 0) {
+      if (!fileUpload.fileNames[0]) {
+        Notification.Error({
+          msg: "Please enter a file name before uploading",
+        });
+        return;
+      }
       if (sample.id) {
         await fileUpload.handleFileUpload(sample.id);
+        if (!fileUpload.error) {
+          return;
+        } else {
+          Notification.Error({ msg: `Upload failed: ${fileUpload.error}` });
+        }
       } else {
         Notification.Error({ msg: "Sample ID is missing" });
       }
-      if (!fileUpload.error) {
-        Notification.Success({ msg: "File Uploaded Successfully" });
-      } else {
-        Notification.Error({ msg: `Upload failed: ${fileUpload.error}` });
-      }
     } else {
       Notification.Error({ msg: "No file selected for upload" });
     }
@@ -157,37 +178,76 @@ const UpdateStatusDialog = (props: Props) => {
             <span className="font-semibold leading-relaxed">
               {t("upload_report")}:
             </span>
-            {fileUpload.progress !== null &&
-            fileUpload.progress !== undefined ? (
-              <LinearProgressWithLabel value={fileUpload.progress} />
-            ) : (
-              <div className="mb-4 mt-3 flex flex-wrap justify-between gap-2">
-                <label className="button-size-default button-shape-square button-primary-default inline-flex h-min max-w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out disabled:cursor-not-allowed disabled:bg-secondary-200 disabled:text-secondary-500">
-                  <CareIcon icon="l-file-upload-alt" className="text-lg" />
-                  <span className="max-w-full truncate">
-                    {fileUpload.files?.[0]?.name || t("choose_file")}
+            {fileUpload.files[0] ? (
+              <div className="mb-8 rounded-lg border border-secondary-300 bg-white p-4">
+                <div className="mb-4 flex items-center justify-between gap-2 rounded-md bg-secondary-300 px-4 py-2">
+                  <span>
+                    <CareIcon icon="l-paperclip" className="mr-2" />
+                    {fileUpload.files[0].name}
                   </span>
-                  <fileUpload.Input />
-                </label>
-                {fileUpload.fileNames.length > 0 && (
-                  <CareIcon
-                    icon="l-times"
-                    className="text-lg cursor-pointer mt-2 mr-4"
+                  <button
                     onClick={fileUpload.clearFiles}
-                  />
+                    disabled={fileUpload.uploading}
+                    className="text-lg"
+                  >
+                    <CareIcon icon="l-times" />
+                  </button>
+                </div>
+                <TextFormField
+                  name="sample_file_name"
+                  type="text"
+                  label={t("enter_file_name")}
+                  id="upload-file-name"
+                  value={fileUpload.fileNames[0] || ""}
+                  disabled={fileUpload.uploading}
+                  onChange={(e) => fileUpload.setFileName(e.value)}
+                  error={fileUpload.error || undefined}
+                  required
+                />
+                <div className="flex items-center gap-2">
+                  <ButtonV2
+                    onClick={handleUpload}
+                    loading={fileUpload.uploading}
+                    className="w-full"
+                    id="upload_file_button"
+                  >
+                    <CareIcon icon="l-check" className="" />
+                    {t("upload")}
+                  </ButtonV2>
+                  <ButtonV2
+                    variant="danger"
+                    onClick={fileUpload.clearFiles}
+                    disabled={fileUpload.uploading}
+                  >
+                    <CareIcon icon="l-trash-alt" className="" />
+                    {t("discard")}
+                  </ButtonV2>
+                </div>
+                {!!fileUpload.progress && (
+                  <LinearProgressWithLabel value={fileUpload.progress} />
                 )}
-                <Submit
-                  type="button"
-                  onClick={handleUpload}
-                  disabled={!fileUpload.files.length}
-                >
-                  <CareIcon icon="l-cloud-upload" className="text-lg" />
-                  <span>{t("upload")}</span>
-                </Submit>
+              </div>
+            ) : (
+              <div className="mt-5 mb-8 flex w-full flex-col items-center gap-4 md:flex-row">
+                {uploadButtons
+                  .filter((b) => b.show !== false)
+                  .map((button, i) => (
+                    <label
+                      key={i}
+                      className="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-dashed border-primary-500/20 bg-primary-500/10 p-3 text-primary-700 transition-all hover:bg-primary-500/20 md:p-6"
+                      onClick={button.onClick}
+                      id={button.id}
+                    >
+                      <CareIcon icon={button.icon} className="text-2xl" />
+                      <div className="text-lg">{button.name}</div>
+                      {button.children}
+                    </label>
+                  ))}
               </div>
             )}
           </>
         )}
+
         <CheckBoxFormField
           label="I agree to update the sample test status."
           name="confirm"

From 3801776969211f90db9d99f0a2eeb594128a932c Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Fri, 29 Nov 2024 17:03:46 +0530
Subject: [PATCH 09/14] Updated Button to shadcn button

---
 src/components/Patient/UpdateStatusDialog.tsx | 23 +++++++++++--------
 src/components/ui/button.tsx                  |  2 ++
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index 629cacd0a85..6071cdb340c 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from "react-i18next";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
 import { LinearProgressWithLabel } from "@/components/Files/FileUpload";
 import CheckBoxFormField from "@/components/Form/FormFields/CheckBoxFormField";
@@ -185,13 +186,14 @@ const UpdateStatusDialog = (props: Props) => {
                     <CareIcon icon="l-paperclip" className="mr-2" />
                     {fileUpload.files[0].name}
                   </span>
-                  <button
+                  <Button
                     onClick={fileUpload.clearFiles}
                     disabled={fileUpload.uploading}
                     className="text-lg"
+                    variant={"destructive"}
                   >
                     <CareIcon icon="l-times" />
-                  </button>
+                  </Button>
                 </div>
                 <TextFormField
                   name="sample_file_name"
@@ -205,23 +207,24 @@ const UpdateStatusDialog = (props: Props) => {
                   required
                 />
                 <div className="flex items-center gap-2">
-                  <ButtonV2
+                  <Button
                     onClick={handleUpload}
-                    loading={fileUpload.uploading}
+                    disabled={fileUpload.uploading}
                     className="w-full"
                     id="upload_file_button"
+                    variant={"primary"}
                   >
-                    <CareIcon icon="l-check" className="" />
+                    <CareIcon icon="l-check" className="mr-2" />
                     {t("upload")}
-                  </ButtonV2>
-                  <ButtonV2
-                    variant="danger"
+                  </Button>
+                  <Button
+                    variant={"destructive"}
                     onClick={fileUpload.clearFiles}
                     disabled={fileUpload.uploading}
                   >
                     <CareIcon icon="l-trash-alt" className="" />
                     {t("discard")}
-                  </ButtonV2>
+                  </Button>
                 </div>
                 {!!fileUpload.progress && (
                   <LinearProgressWithLabel value={fileUpload.progress} />
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index f49a7052a78..61ac64a305d 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -15,6 +15,8 @@ const buttonVariants = cva(
           "bg-red-500 text-gray-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90",
         outline:
           "border border-gray-200 bg-white shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50",
+        primary:
+          "bg-primary-500 text-white shadow hover:bg-primary-700/90 dark:bg-primary-100 dark:text-primary-900 dark:hover:bg-primary-100/90",
         secondary:
           "bg-gray-100 text-gray-900 shadow-sm hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
         ghost:

From 6e180b387de52853ceabfd2d54a63214650ef09e Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Fri, 29 Nov 2024 17:05:16 +0530
Subject: [PATCH 10/14] removed unnecessary line

---
 src/components/Patient/UpdateStatusDialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index 6071cdb340c..3fd3dfdb8f0 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -250,7 +250,6 @@ const UpdateStatusDialog = (props: Props) => {
             )}
           </>
         )}
-
         <CheckBoxFormField
           label="I agree to update the sample test status."
           name="confirm"

From fd0bf27f3c425cad5575f74f811d482bd9b70795 Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Sat, 30 Nov 2024 07:47:50 +0530
Subject: [PATCH 11/14] removed remove icon in favour of discard button

---
 src/components/Patient/UpdateStatusDialog.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index 3fd3dfdb8f0..b40922ca764 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -186,14 +186,6 @@ const UpdateStatusDialog = (props: Props) => {
                     <CareIcon icon="l-paperclip" className="mr-2" />
                     {fileUpload.files[0].name}
                   </span>
-                  <Button
-                    onClick={fileUpload.clearFiles}
-                    disabled={fileUpload.uploading}
-                    className="text-lg"
-                    variant={"destructive"}
-                  >
-                    <CareIcon icon="l-times" />
-                  </Button>
                 </div>
                 <TextFormField
                   name="sample_file_name"
@@ -222,7 +214,7 @@ const UpdateStatusDialog = (props: Props) => {
                     onClick={fileUpload.clearFiles}
                     disabled={fileUpload.uploading}
                   >
-                    <CareIcon icon="l-trash-alt" className="" />
+                    <CareIcon icon="l-trash-alt" className="mr-2" />
                     {t("discard")}
                   </Button>
                 </div>

From 66cf623324cb5043410897a9c919129efc31d853 Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Sat, 30 Nov 2024 18:07:22 +0530
Subject: [PATCH 12/14] updated primary button color

---
 src/components/ui/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 61ac64a305d..4555a7a97af 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -16,7 +16,7 @@ const buttonVariants = cva(
         outline:
           "border border-gray-200 bg-white shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50",
         primary:
-          "bg-primary-500 text-white shadow hover:bg-primary-700/90 dark:bg-primary-100 dark:text-primary-900 dark:hover:bg-primary-100/90",
+          "bg-primary-700 text-white shadow hover:bg-primary-700/90 dark:bg-primary-100 dark:text-primary-900 dark:hover:bg-primary-100/90",
         secondary:
           "bg-gray-100 text-gray-900 shadow-sm hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
         ghost:

From 37cfc0eefeb9b1c8810ddac5e80732186542e09c Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Sat, 30 Nov 2024 18:12:07 +0530
Subject: [PATCH 13/14] fixed eslint issues

---
 src/components/Shifting/ShiftDetails.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Shifting/ShiftDetails.tsx b/src/components/Shifting/ShiftDetails.tsx
index bc97b0b0f24..cb5140d6ed0 100644
--- a/src/components/Shifting/ShiftDetails.tsx
+++ b/src/components/Shifting/ShiftDetails.tsx
@@ -492,13 +492,20 @@ export default function ShiftDetails(props: { id: string }) {
                     : ""
                 }
                 tooltipClassName="tooltip-top -translate-x-28 -translate-y-1 text-xs"
-                disabled={data?.status === "COMPLETED" || data?.status === "CANCELLED"}
-                onClick={() => navigate(`/shifting/${data?.external_id}/update`)}
+                disabled={
+                  data?.status === "COMPLETED" || data?.status === "CANCELLED"
+                }
+                onClick={() =>
+                  navigate(`/shifting/${data?.external_id}/update`)
+                }
               >
                 {t("update_status_details")}
               </ButtonV2>
 
-              <ButtonV2 className="w-full sm:w-auto" onClick={() => setIsPrintMode(true)}>
+              <ButtonV2
+                className="w-full sm:w-auto"
+                onClick={() => setIsPrintMode(true)}
+              >
                 <CareIcon icon="l-file-alt" className="mr-2 text-base" />{" "}
                 {t("referral_letter")}
               </ButtonV2>

From cd09c746f19c29ba1065f84ed693191d54447e6a Mon Sep 17 00:00:00 2001
From: nithish <nithishsiliveru18@gmail.com>
Date: Tue, 3 Dec 2024 19:25:37 +0530
Subject: [PATCH 14/14] removed button array

---
 src/components/Patient/UpdateStatusDialog.tsx | 40 ++++---------------
 1 file changed, 7 insertions(+), 33 deletions(-)

diff --git a/src/components/Patient/UpdateStatusDialog.tsx b/src/components/Patient/UpdateStatusDialog.tsx
index b40922ca764..e9a767847aa 100644
--- a/src/components/Patient/UpdateStatusDialog.tsx
+++ b/src/components/Patient/UpdateStatusDialog.tsx
@@ -1,7 +1,7 @@
-import { ReactNode, useEffect, useReducer } from "react";
+import { useEffect, useReducer } from "react";
 import { useTranslation } from "react-i18next";
 
-import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
+import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 
@@ -56,7 +56,6 @@ const updateStatusReducer = (state = initialState, action: any) => {
       return state;
   }
 };
-
 const UpdateStatusDialog = (props: Props) => {
   const { t } = useTranslation();
   const { sample, handleOk, handleCancel } = props;
@@ -67,22 +66,6 @@ const UpdateStatusDialog = (props: Props) => {
     allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
     allowNameFallback: true,
   });
-  const uploadButtons: {
-    name: string;
-    icon: IconName;
-    onClick?: () => void;
-    children?: ReactNode;
-    show?: boolean;
-    id: string;
-  }[] = [
-    {
-      name: t("choose_file"),
-      icon: "l-file-upload-alt",
-      children: <fileUpload.Input />,
-      id: "upload-file",
-    },
-  ];
-
   const currentStatus = SAMPLE_TEST_STATUS.find(
     (i) => i.text === sample.status,
   );
@@ -224,20 +207,11 @@ const UpdateStatusDialog = (props: Props) => {
               </div>
             ) : (
               <div className="mt-5 mb-8 flex w-full flex-col items-center gap-4 md:flex-row">
-                {uploadButtons
-                  .filter((b) => b.show !== false)
-                  .map((button, i) => (
-                    <label
-                      key={i}
-                      className="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-dashed border-primary-500/20 bg-primary-500/10 p-3 text-primary-700 transition-all hover:bg-primary-500/20 md:p-6"
-                      onClick={button.onClick}
-                      id={button.id}
-                    >
-                      <CareIcon icon={button.icon} className="text-2xl" />
-                      <div className="text-lg">{button.name}</div>
-                      {button.children}
-                    </label>
-                  ))}
+                <label className="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-dashed border-primary-500/20 bg-primary-500/10 p-3 text-primary-700 transition-all hover:bg-primary-500/20 md:p-6">
+                  <CareIcon icon={"l-file-upload-alt"} className="text-2xl" />
+                  <div className="text-lg">{t("choose_file")}</div>
+                  <fileUpload.Input />
+                </label>
               </div>
             )}
           </>