From b6d569a19e5b1be402ab5b86db446a93ac2fe3e6 Mon Sep 17 00:00:00 2001
From: nathantew14 <nathantew14@gmail.com>
Date: Thu, 11 Dec 2025 19:29:08 +0700
Subject: [PATCH 01/14] Allow navigating to specific visit without
 automatically switching to the latest one

---
 src/components/NavigationButtons.tsx | 6 ++----
 src/components/VisitDropdown.tsx     | 4 +++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/NavigationButtons.tsx b/src/components/NavigationButtons.tsx
index 81fb9c2..db0eb5d 100644
--- a/src/components/NavigationButtons.tsx
+++ b/src/components/NavigationButtons.tsx
@@ -14,10 +14,9 @@ export function VitalsButton({
   labelOverwrite?: string;
   visitId?: string;
 }) {
-  console.log(visitId)
   return (
     <Link
-      href={`/records/patient-vitals?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}`}
+      href={`/records/patient-vitals?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}&${visitId && 'specificVisit=true'}`}
       onClick={e => e.stopPropagation()}
       onMouseEnter={e => {
         e.stopPropagation();
@@ -41,10 +40,9 @@ export function ConsultationButton({
   labelOverwrite?: string;
   visitId?: string;
 }) {
-  console.log(visitId)
   return (
     <Link
-      href={`/records/patient-consultation?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}`}
+      href={`/records/patient-consultation?id=${patient.pk}&visit=${visitId ?? patient.last_visit_id}&${visitId && 'specificVisit=true'}`}
       onClick={e => e.stopPropagation()}
       onMouseEnter={e => {
         e.stopPropagation();
diff --git a/src/components/VisitDropdown.tsx b/src/components/VisitDropdown.tsx
index 3a1cf1f..96cecce 100644
--- a/src/components/VisitDropdown.tsx
+++ b/src/components/VisitDropdown.tsx
@@ -46,8 +46,10 @@ export function VisitDropdown({
     searchParams.get('visit') ?? ''
   );
 
+  // automatically select the latest visit unless viewing a specific visit
   useEffect(() => {
-    setVisitId(items[0].value)
+    const viewingSpecificVisit = searchParams.get("specificVisit") === "true"
+    if (!viewingSpecificVisit) setVisitId(items[0].value)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

From 2da509fe61ce50b4eab54fc5e992bbddeb224f01 Mon Sep 17 00:00:00 2001
From: nathantew14 <nathantew14@gmail.com>
Date: Thu, 11 Dec 2025 19:53:44 +0700
Subject: [PATCH 02/14] Improve visual consistency for PatientInfoHeaderSection
 buttons

---
 src/components/NavigationButtons.tsx             | 16 ++++++++++++++--
 .../records/document/UploadDocument.tsx          |  6 +++---
 src/components/records/document/ViewDocument.tsx |  6 +++---
 src/components/records/patient/EditPatient.tsx   |  6 +++---
 .../records/patient/PatientInfoHeaderSection.tsx |  4 +++-
 5 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/NavigationButtons.tsx b/src/components/NavigationButtons.tsx
index db0eb5d..e1eaff1 100644
--- a/src/components/NavigationButtons.tsx
+++ b/src/components/NavigationButtons.tsx
@@ -8,11 +8,13 @@ export function VitalsButton({
   setIsHovered = () => {},
   labelOverwrite,
   visitId,
+  className,
 }: {
   patient: Patient;
   setIsHovered?: Dispatch<SetStateAction<boolean>>;
   labelOverwrite?: string;
   visitId?: string;
+  className?: string;
 }) {
   return (
     <Link
@@ -24,7 +26,11 @@ export function VitalsButton({
       }}
       onMouseLeave={() => setIsHovered(true)}
     >
-      <Button text={labelOverwrite ?? 'Vitals'} colour="red" />
+      <Button
+        text={labelOverwrite ?? 'Vitals'}
+        colour="red"
+        className={className}
+      />
     </Link>
   );
 }
@@ -34,11 +40,13 @@ export function ConsultationButton({
   setIsHovered = () => {},
   labelOverwrite,
   visitId,
+  className,
 }: {
   patient: Patient;
   setIsHovered?: Dispatch<SetStateAction<boolean>>;
   labelOverwrite?: string;
   visitId?: string;
+  className?: string;
 }) {
   return (
     <Link
@@ -50,7 +58,11 @@ export function ConsultationButton({
       }}
       onMouseLeave={() => setIsHovered(true)}
     >
-      <Button text={labelOverwrite ?? 'Consultation'} colour="indigo" />
+      <Button
+        text={labelOverwrite ?? 'Consultation'}
+        colour="indigo"
+        className={className}
+      />
     </Link>
   );
 }
diff --git a/src/components/records/document/UploadDocument.tsx b/src/components/records/document/UploadDocument.tsx
index acd4b0f..711316b 100644
--- a/src/components/records/document/UploadDocument.tsx
+++ b/src/components/records/document/UploadDocument.tsx
@@ -28,12 +28,12 @@ export function UploadDocument({
   const { isLoading, withLoading } = useLoadingState(false);
 
   return (
-    <>
+    <div>
       <Button
         text="Upload Document"
         colour="green"
         onClick={() => setIsOpen(true)}
-        className='w-24 h-16'
+        className="w-44 sm:w-28"
       />
       <Modal
         isOpen={isOpen}
@@ -127,6 +127,6 @@ export function UploadDocument({
           </form>
         </FormProvider>
       </Modal>
-    </>
+    </div>
   );
 }
diff --git a/src/components/records/document/ViewDocument.tsx b/src/components/records/document/ViewDocument.tsx
index bc50ea7..c577c50 100644
--- a/src/components/records/document/ViewDocument.tsx
+++ b/src/components/records/document/ViewDocument.tsx
@@ -109,12 +109,12 @@ export function ViewDocument({
   };
 
   return (
-    <>
+    <div>
       <Button
         text="View Documents"
         onClick={() => setIsOpen(true)}
         colour="blue"
-        className='w-24 h-16'
+        className='w-44 sm:w-28'
       />
       <Modal
         isOpen={isOpen}
@@ -155,6 +155,6 @@ export function ViewDocument({
           </table>
         )}
       </Modal>
-    </>
+    </div>
   );
 }
diff --git a/src/components/records/patient/EditPatient.tsx b/src/components/records/patient/EditPatient.tsx
index 0e018e3..cff1678 100644
--- a/src/components/records/patient/EditPatient.tsx
+++ b/src/components/records/patient/EditPatient.tsx
@@ -24,12 +24,12 @@ export function EditPatient({ patient }: { patient: Patient }) {
   });
   const router = useRouter();
   return (
-    <>
+    <div>
       <Button
         text="Edit Patient Details"
         colour="orange"
         onClick={() => setIsOpen(true)}
-        className='w-28 h-16'
+        className='w-44 sm:w-28'
       />
       <Modal
         isOpen={isOpen}
@@ -84,6 +84,6 @@ export function EditPatient({ patient }: { patient: Patient }) {
           />
         </FormProvider>
       </Modal>
-    </>
+    </div>
   );
 }
diff --git a/src/components/records/patient/PatientInfoHeaderSection.tsx b/src/components/records/patient/PatientInfoHeaderSection.tsx
index c34984e..5962192 100644
--- a/src/components/records/patient/PatientInfoHeaderSection.tsx
+++ b/src/components/records/patient/PatientInfoHeaderSection.tsx
@@ -63,7 +63,7 @@ export function PatientInfoHeaderSection({
           </span>
           <span>, {patient.name}</span>
         </h1>
-        <div className="flex flex-wrap gap-2">
+        <div className="flex flex-wrap gap-2 justify-center">
         {/* <div className="flex flex-col gap-2 sm:grid sm:grid-cols-3"> */}
           <UploadDocument patient={patient} onUploadSuccess={fetchDocuments} />
           <ViewDocument
@@ -78,6 +78,7 @@ export function PatientInfoHeaderSection({
               patient={patient}
               labelOverwrite="Go to vitals"
               visitId={visitId}
+              className='w-44 sm:w-28 sm:h-14'
             />
           )}
           {showConsultationButton && (
@@ -85,6 +86,7 @@ export function PatientInfoHeaderSection({
               patient={patient}
               labelOverwrite="Go to consultation"
               visitId={visitId}
+              className='w-44 sm:w-28'
             />
           )}
         </div>

From 4543dc0274cb890bf949c5b6e188f5a57ab053f8 Mon Sep 17 00:00:00 2001
From: nathantew14 <nathantew14@gmail.com>
Date: Thu, 11 Dec 2025 21:39:31 +0700
Subject: [PATCH 03/14] Increase threshhold to 2 hrs for showing relative date
 for latest visit

---
 src/components/records/PatientRecordTable.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/records/PatientRecordTable.tsx b/src/components/records/PatientRecordTable.tsx
index ba14650..07dcbfc 100644
--- a/src/components/records/PatientRecordTable.tsx
+++ b/src/components/records/PatientRecordTable.tsx
@@ -139,7 +139,7 @@ function PatientRecordRow({ patient }: { patient: Patient }) {
             />
             <div className="flex flex-col items-center gap-2 rounded-md border p-2 sm:flex-row">
               <div className="w-[115px]">
-                <p>Last visit:</p>
+                <p>Latest visit:</p>
                 <p>{lastVisitLabel}</p>
               </div>
               <VitalsButton patient={patient} setIsHovered={setIsHovered} />
@@ -171,6 +171,7 @@ function getLastVisitLabel(lastVisitDate: string): string {
   if (!lastVisitDate) {
     return 'Missing last visit date';
   }
+  // lastVisitDate = "2025-12-11T15:30:56.296898Z"
   const lastVisitDateLuxon = DateTime.fromISO(lastVisitDate);
   // Positive duration since last visit
   const timeSinceLastVisit = Duration.fromMillis(
@@ -178,7 +179,7 @@ function getLastVisitLabel(lastVisitDate: string): string {
   );
   return timeSinceLastVisit < Duration.fromObject({ seconds: 5 })
     ? 'Just now'
-    : timeSinceLastVisit < Duration.fromObject({ minutes: 10 })
+    : timeSinceLastVisit < Duration.fromObject({ hours: 2 })
       ? lastVisitDateLuxon.toRelative() || 'Missing relative time?'
       : formatDate(lastVisitDate, 'datetime');
 }

From 50c5b580a7c3f267173306dba81a36c66ff41aee Mon Sep 17 00:00:00 2001
From: Noah Seethor <noahseethor@gmail.com>
Date: Thu, 11 Dec 2025 21:57:11 +0700
Subject: [PATCH 04/14] Make approving/rejecting orders only update the order
 itself

---
 src/app/pharmacy/orders/page.tsx | 34 +++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/app/pharmacy/orders/page.tsx b/src/app/pharmacy/orders/page.tsx
index 7dbdb95..009c209 100644
--- a/src/app/pharmacy/orders/page.tsx
+++ b/src/app/pharmacy/orders/page.tsx
@@ -104,6 +104,38 @@ export default function OrdersPage() {
     return () => clearInterval(intervalId);
   }, [isAutoRefreshEnabled]);
 
+  const handleRemoveNonPendingOrder = (orderId: number) => {
+    setOrderRowData(prev =>
+      prev
+        .map(row => ({
+          ...row,
+          data: row.data
+            .map(visit => ({
+              ...visit,
+              orders: visit.orders.filter(order => order.order_id !== orderId),
+            }))
+            // Drop visits that no longer have any orders
+            .filter(visit => visit.orders.length > 0),
+        }))
+        // Drop patients that no longer have any visits
+        .filter(row => row.data.length > 0)
+    );
+
+    setFilteredOrderRowData(prev =>
+      prev
+        .map(row => ({
+          ...row,
+          data: row.data
+            .map(visit => ({
+              ...visit,
+              orders: visit.orders.filter(order => order.order_id !== orderId),
+            }))
+            .filter(visit => visit.orders.length > 0),
+        }))
+        .filter(row => row.data.length > 0)
+    );
+  };
+
   return (
     <LoadingPage isLoading={isLoading} message="Loading Pending Orders...">
       <div className="p-2">
@@ -180,7 +212,7 @@ export default function OrdersPage() {
                   <OrderRow
                     key={x.patient?.patient_id || index}
                     orderRowData={x}
-                    removeNonPendingOrder={fetchPendingOrders}
+                    removeNonPendingOrder={handleRemoveNonPendingOrder}
                   />
                 ))
               )}

From 8923231e43f44ead70681c14ec46bd1bb77dd3f8 Mon Sep 17 00:00:00 2001
From: PohAnson <50758680+pohanson@users.noreply.github.com>
Date: Thu, 11 Dec 2025 23:49:59 +0800
Subject: [PATCH 05/14] Fix bug in editing consult

Editing consult might still create referral when changing from referred to not referred to referred.
---
 .../records/consultation/ConsultationForm.tsx | 26 ++++++++++++-------
 src/data/referrals/patchReferral.ts           | 10 +++++++
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/records/consultation/ConsultationForm.tsx b/src/components/records/consultation/ConsultationForm.tsx
index a74c53a..cc05051 100644
--- a/src/components/records/consultation/ConsultationForm.tsx
+++ b/src/components/records/consultation/ConsultationForm.tsx
@@ -12,6 +12,7 @@ import { deleteDiagnosis } from '@/data/diagnosis/deleteDiagnosis';
 import { getDiagnosisByConsult } from '@/data/diagnosis/getDiagnosis';
 import { patchDiagnosis } from '@/data/diagnosis/patchDiagnosis';
 import { createReferral } from '@/data/referrals/createReferral';
+import { patchReferralByConsultId } from '@/data/referrals/patchReferral';
 import { useSaveOnWrite } from '@/hooks/useSaveOnWrite';
 import { ConsultMedicationOrder } from '@/types/ConsultMedicationOrder';
 import { Patient } from '@/types/Patient';
@@ -313,15 +314,22 @@ export function ConsultationForm({
             referralPayload['referral_outcome'] = '';
 
             try {
-              const result = createReferral(referralPayload);
-              result
-                .then(
-                  () => {
-                    toast.success('Referral submitted!');
-                  },
-                  () => console.log('error')
-                )
-                .catch(() => toast.error('Error submitting consultation form'));
+              if (isEditing) {
+                patchReferralByConsultId(
+                  referralPayload,
+                  Number(consultID)
+                ).catch(() => toast.error('Error updating referral'));
+              } else {
+                const result = createReferral(referralPayload);
+                result
+                  .then(
+                    () => {
+                      toast.success('Referral submitted!');
+                    },
+                    () => console.log('error')
+                  )
+                  .catch(() => toast.error('Error creating referral'));
+              }
             } catch (error) {
               console.error('Error submitting referral form:', error);
               toast.error('Unknown Error');
diff --git a/src/data/referrals/patchReferral.ts b/src/data/referrals/patchReferral.ts
index ce94109..1734307 100644
--- a/src/data/referrals/patchReferral.ts
+++ b/src/data/referrals/patchReferral.ts
@@ -9,3 +9,13 @@ export async function patchReferral(
   const data = (await axiosInstance.patch(`/referrals/${id}/`, payload)).data;
   return data;
 }
+
+export async function patchReferralByConsultId(
+  payload: Partial<Referral>,
+  consultId: number
+): Promise<void> {
+  const data = (
+    await axiosInstance.patch(`/referrals/?consult_id=${consultId}`, payload)
+  ).data;
+  return data;
+}

From c98c0448243e2eb073bb83a9e1f9e286efcbd2a8 Mon Sep 17 00:00:00 2001
From: nathantew14 <nathantew14@gmail.com>
Date: Thu, 11 Dec 2025 23:05:54 +0700
Subject: [PATCH 06/14] Add documentation for PatientForm

---
 src/components/records/patient/PatientForm.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/records/patient/PatientForm.tsx b/src/components/records/patient/PatientForm.tsx
index 4568b6c..0bfeb14 100644
--- a/src/components/records/patient/PatientForm.tsx
+++ b/src/components/records/patient/PatientForm.tsx
@@ -154,6 +154,8 @@ export function PatientForm({
               />
             </div>
             <ChildPubertySection
+              // curVital passed in here doesn't really matter in the current state of the codebase as they are just used to set the default values;
+              // the only place where this is used is the registration modal, but curVitals are passed straight into the useForm values
               curVital={EMPTY_VITAL}
               pubertyFields={allPubertyFields.filter(
                 field =>

From 830f511bd62bdd2cd407d3757211ec3e05f10ed0 Mon Sep 17 00:00:00 2001
From: nathantew14 <nathantew14@gmail.com>
Date: Thu, 11 Dec 2025 23:23:14 +0700
Subject: [PATCH 07/14] Rename some fields for clarity

---
 src/app/pharmacy/orders/page.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/pharmacy/orders/page.tsx b/src/app/pharmacy/orders/page.tsx
index 009c209..7fcd78e 100644
--- a/src/app/pharmacy/orders/page.tsx
+++ b/src/app/pharmacy/orders/page.tsx
@@ -104,7 +104,7 @@ export default function OrdersPage() {
     return () => clearInterval(intervalId);
   }, [isAutoRefreshEnabled]);
 
-  const handleRemoveNonPendingOrder = (orderId: number) => {
+  const handleApproveOrRejectOrder = (orderId: number) => {
     setOrderRowData(prev =>
       prev
         .map(row => ({
@@ -212,7 +212,7 @@ export default function OrdersPage() {
                   <OrderRow
                     key={x.patient?.patient_id || index}
                     orderRowData={x}
-                    removeNonPendingOrder={handleRemoveNonPendingOrder}
+                    onApproveOrRejectOrder={handleApproveOrRejectOrder}
                   />
                 ))
               )}
@@ -226,10 +226,10 @@ export default function OrdersPage() {
 
 function OrderRow({
   orderRowData: { patient, data },
-  removeNonPendingOrder,
+  onApproveOrRejectOrder,
 }: {
   orderRowData: OrderRowData;
-  removeNonPendingOrder: (id: number) => void;
+  onApproveOrRejectOrder: (id: number) => void;
 }) {
   const onPatchError = (err: Error, medicine_name: string) => {
     toast.error(() => (
@@ -254,7 +254,7 @@ function OrderRow({
           {/* Hacky regex workaround cuz backend send patient_id with village prefix and padded zeroes*/}
           <Link 
             href={`/records/patient-record?id=${patient.patient_id.replace(/^..0*/, "")}`}
-            className="block rounded-lg border border-gray-200 p-4 
+            className="rounded-lg border border-gray-200 p-4 
               transition-all hover:shadow-md hover:-translate-y-0.5 hover:bg-gray-50 cursor-pointer
               flex flex-col items-center bg-slate-50"
             >
@@ -328,7 +328,7 @@ function OrderRow({
                             onPatchError(new Error(r.error), o.medication_name);
                             return;
                           }
-                          removeNonPendingOrder(o.order_id)
+                          onApproveOrRejectOrder(o.order_id)
                         })
                     }}
                     handleCancelOrder={async () => {
@@ -339,7 +339,7 @@ function OrderRow({
                             onPatchError(new Error(r.error), o.medication_name);
                             return;
                           }
-                          removeNonPendingOrder(o.order_id)
+                          onApproveOrRejectOrder(o.order_id)
                         })
                     }}
                   />

From ffbce58b000e87a3c829f2a46b257808a0f642a2 Mon Sep 17 00:00:00 2001
From: Noah Seethor <noahseethor@gmail.com>
Date: Thu, 11 Dec 2025 23:44:26 +0700
Subject: [PATCH 08/14] Add toasts

---
 src/app/pharmacy/orders/page.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/pharmacy/orders/page.tsx b/src/app/pharmacy/orders/page.tsx
index 7fcd78e..cddad0f 100644
--- a/src/app/pharmacy/orders/page.tsx
+++ b/src/app/pharmacy/orders/page.tsx
@@ -329,6 +329,7 @@ function OrderRow({
                             return;
                           }
                           onApproveOrRejectOrder(o.order_id)
+                          toast.success(`Order Approved`);
                         })
                     }}
                     handleCancelOrder={async () => {
@@ -340,6 +341,7 @@ function OrderRow({
                             return;
                           }
                           onApproveOrRejectOrder(o.order_id)
+                          toast.success(`Order Rejected`);
                         })
                     }}
                   />

From 1ed8598379b47b661e986dd86e9bb50baf67274e Mon Sep 17 00:00:00 2001
From: nathantew14 <nathantew14@gmail.com>
Date: Thu, 11 Dec 2025 23:55:15 +0700
Subject: [PATCH 09/14] Add loading indicators to pharm orders' button to
 patient record

---
 src/app/pharmacy/orders/page.tsx           |  5 +--
 src/app/records/patient-record/loading.tsx |  7 ++++
 src/components/LoadingLink.tsx             | 42 ++++++++++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 src/app/records/patient-record/loading.tsx
 create mode 100644 src/components/LoadingLink.tsx

diff --git a/src/app/pharmacy/orders/page.tsx b/src/app/pharmacy/orders/page.tsx
index 7fcd78e..65785ec 100644
--- a/src/app/pharmacy/orders/page.tsx
+++ b/src/app/pharmacy/orders/page.tsx
@@ -25,6 +25,7 @@ import toast from 'react-hot-toast';
 import { fetchAllPatientMedicationOrders } from './api';
 import { Switch } from '@/components/ui/switch';
 import Link from 'next/link';
+import { LoadingLink } from '@/components/LoadingLink';
 
 type OrderRowData = {
   patient: {
@@ -252,7 +253,7 @@ function OrderRow({
         {/* rowSpan is data.length + 1 because the current row has no data. */}
         <td className="px-0" rowSpan={data.length + 1}>
           {/* Hacky regex workaround cuz backend send patient_id with village prefix and padded zeroes*/}
-          <Link 
+          <LoadingLink 
             href={`/records/patient-record?id=${patient.patient_id.replace(/^..0*/, "")}`}
             className="rounded-lg border border-gray-200 p-4 
               transition-all hover:shadow-md hover:-translate-y-0.5 hover:bg-gray-50 cursor-pointer
@@ -272,7 +273,7 @@ function OrderRow({
               height={80}
               width={80}
             />
-          </Link>
+          </LoadingLink>
         </td>
       </tr>
       {data.map(({ visit_id, visit_date, orders, diagnoses }) => (
diff --git a/src/app/records/patient-record/loading.tsx b/src/app/records/patient-record/loading.tsx
new file mode 100644
index 0000000..8d70a23
--- /dev/null
+++ b/src/app/records/patient-record/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex justify-center items-center h-full p-10">
+      <p className="text-gray-600 animate-pulse">Loading patient record...</p>
+    </div>
+  );
+}
diff --git a/src/components/LoadingLink.tsx b/src/components/LoadingLink.tsx
new file mode 100644
index 0000000..ee65dbf
--- /dev/null
+++ b/src/components/LoadingLink.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useTransition } from 'react';
+
+export function LoadingLink({
+  href,
+  children,
+  className,
+  ...props
+}: {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  return (
+    <div
+      {...props}
+      onClick={e => {
+        e.preventDefault();
+        startTransition(() => {
+          router.push(href);
+        });
+      }}
+      className={`relative ${className}`}
+    >
+      {isPending && (
+        <div className="absolute inset-0 z-10 flex flex-col gap-2 items-center justify-center bg-white/30 backdrop-blur-sm">
+          <div
+            className={`h-6 w-6 animate-spin rounded-full border-y-2 border-blue-500`}
+          />
+          <p className="font-semibold text-gray-700">Loading...</p>
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}

From a730477602b142a50a75fbf2634c1cc69d951339 Mon Sep 17 00:00:00 2001
From: Keiran <keinn2210@gmail.com>
Date: Fri, 12 Dec 2025 00:27:33 +0700
Subject: [PATCH 10/14] Modify onClick param to trigger loading state in Button
 component

---
 src/components/records/vital/VitalsForm.tsx | 39 +++++++++++----------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/records/vital/VitalsForm.tsx b/src/components/records/vital/VitalsForm.tsx
index 4c00020..925cd7b 100644
--- a/src/components/records/vital/VitalsForm.tsx
+++ b/src/components/records/vital/VitalsForm.tsx
@@ -50,26 +50,9 @@ export function VitalsForm({
       ? String(formWeight)
       : curVital.weight;
 
-  const submitVitalsFormHandler = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    handleSubmit(
-      async (data: FieldValues) => {
-        data.visit_id = visitId;
-        patchVital(data as Vital).then(() => {
-          toast.success('Updated Vital');
-        });
-      },
-      () => {
-        toast.error('Invalid/Missing Input');
-      }
-    )();
-  };
-
   return (
     <FormProvider {...useFormReturn}>
       <form
-        onSubmit={submitVitalsFormHandler}
         className="rounded-lg bg-blue-50 p-4"
       >
         <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">
@@ -225,7 +208,27 @@ export function VitalsForm({
           type="textarea"
         />
         <div className="h-4" />
-        <Button text="Update" colour="green" type="submit" />
+        <Button
+          text="Update"
+          colour="green"
+          type="button"
+          onClick={() => new Promise<void>((resolve, reject) => {
+            handleSubmit(
+              async (data: FieldValues) => {
+                data.visit_id = visitId;
+                patchVital(data as Vital).then(() => {
+                  toast.success('Updated Vital');
+                  resolve();
+                });
+              },
+              () => {
+                toast.error('Invalid/Missing Input');
+                reject();
+              }
+            )()
+          }
+          )}
+        />
       </form>
     </FormProvider>
   );

From 4da634941685668fb3c1f09b87c7f6d699158846 Mon Sep 17 00:00:00 2001
From: Keiran <keinn2210@gmail.com>
Date: Fri, 12 Dec 2025 00:51:58 +0700
Subject: [PATCH 11/14] Add loading indicator on edit patient submission

---
 src/components/records/patient/EditPatient.tsx | 6 ++++++
 src/components/records/patient/PatientForm.tsx | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/records/patient/EditPatient.tsx b/src/components/records/patient/EditPatient.tsx
index 0e018e3..e28203e 100644
--- a/src/components/records/patient/EditPatient.tsx
+++ b/src/components/records/patient/EditPatient.tsx
@@ -23,6 +23,7 @@ export function EditPatient({ patient }: { patient: Patient }) {
     },
   });
   const router = useRouter();
+  const [submitting, setSubmitting] = useState(false)
   return (
     <>
       <Button
@@ -42,8 +43,11 @@ export function EditPatient({ patient }: { patient: Patient }) {
           <PatientForm
             closeForm={closeModal}
             isEditing
+            isSubmitting={submitting}
             onSubmit={e => {
               e.preventDefault();
+              console.log("submitting set to true")
+              setSubmitting(true);
 
               useFormReturn.handleSubmit(
                 async fieldValues => {
@@ -72,6 +76,8 @@ export function EditPatient({ patient }: { patient: Patient }) {
                   }
                   patchPatient(fieldValues.pk, formData).then(() => {
                     toast.success('Patient Updated!');
+                    console.log("submitting set to false")
+                    setSubmitting(false)
                     router.refresh();
                     closeModal();
                   });
diff --git a/src/components/records/patient/PatientForm.tsx b/src/components/records/patient/PatientForm.tsx
index 4568b6c..00badc0 100644
--- a/src/components/records/patient/PatientForm.tsx
+++ b/src/components/records/patient/PatientForm.tsx
@@ -23,7 +23,7 @@ import { NAOption } from '@/constants';
 
 export function PatientForm({
   onSubmit,
-  isSubmitting = false,
+  isSubmitting,
   closeForm = undefined,
   isEditing = false,
 }: {

From f1bac782052ead5ee7285341364674e1c43338bb Mon Sep 17 00:00:00 2001
From: Keiran <keinn2210@gmail.com>
Date: Fri, 12 Dec 2025 00:52:51 +0700
Subject: [PATCH 12/14] Remove unused import

---
 src/components/records/vital/VitalsForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/records/vital/VitalsForm.tsx b/src/components/records/vital/VitalsForm.tsx
index 925cd7b..ced2b4e 100644
--- a/src/components/records/vital/VitalsForm.tsx
+++ b/src/components/records/vital/VitalsForm.tsx
@@ -11,7 +11,7 @@ import { NAOption } from '@/constants';
 import { patchVital } from '@/data/vital/patchVital';
 import { Patient } from '@/types/Patient';
 import { displayBMI, validateVisualAcuity, Vital } from '@/types/Vital';
-import { FormEvent, useEffect } from 'react';
+import { useEffect } from 'react';
 import { FieldValues, FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 

From f3e264b47c52186c656f817ed5d25f2faf011f1b Mon Sep 17 00:00:00 2001
From: Keiran <keinn2210@gmail.com>
Date: Fri, 12 Dec 2025 07:51:25 +0700
Subject: [PATCH 13/14] Remove console logs and add back default prop value for
 PatientForm

---
 src/components/records/patient/EditPatient.tsx | 2 --
 src/components/records/patient/PatientForm.tsx | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/records/patient/EditPatient.tsx b/src/components/records/patient/EditPatient.tsx
index e28203e..ba76122 100644
--- a/src/components/records/patient/EditPatient.tsx
+++ b/src/components/records/patient/EditPatient.tsx
@@ -46,7 +46,6 @@ export function EditPatient({ patient }: { patient: Patient }) {
             isSubmitting={submitting}
             onSubmit={e => {
               e.preventDefault();
-              console.log("submitting set to true")
               setSubmitting(true);
 
               useFormReturn.handleSubmit(
@@ -76,7 +75,6 @@ export function EditPatient({ patient }: { patient: Patient }) {
                   }
                   patchPatient(fieldValues.pk, formData).then(() => {
                     toast.success('Patient Updated!');
-                    console.log("submitting set to false")
                     setSubmitting(false)
                     router.refresh();
                     closeModal();
diff --git a/src/components/records/patient/PatientForm.tsx b/src/components/records/patient/PatientForm.tsx
index 00badc0..4568b6c 100644
--- a/src/components/records/patient/PatientForm.tsx
+++ b/src/components/records/patient/PatientForm.tsx
@@ -23,7 +23,7 @@ import { NAOption } from '@/constants';
 
 export function PatientForm({
   onSubmit,
-  isSubmitting,
+  isSubmitting = false,
   closeForm = undefined,
   isEditing = false,
 }: {

From ae074b61bff1108cde17f6a2ff7bed1bc6d3630c Mon Sep 17 00:00:00 2001
From: nathantew14 <nathantew14@gmail.com>
Date: Fri, 12 Dec 2025 08:01:37 +0700
Subject: [PATCH 14/14] Remove unused library

---
 src/app/pharmacy/orders/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/pharmacy/orders/page.tsx b/src/app/pharmacy/orders/page.tsx
index 65785ec..60948a2 100644
--- a/src/app/pharmacy/orders/page.tsx
+++ b/src/app/pharmacy/orders/page.tsx
@@ -24,7 +24,6 @@ import {
 import toast from 'react-hot-toast';
 import { fetchAllPatientMedicationOrders } from './api';
 import { Switch } from '@/components/ui/switch';
-import Link from 'next/link';
 import { LoadingLink } from '@/components/LoadingLink';
 
 type OrderRowData = {