From 4827e5007d4c0a1a79f422390c2d1ecb43693e46 Mon Sep 17 00:00:00 2001
From: Shyam Prakash <106866225+shyamprakash123@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:02:05 +0530
Subject: [PATCH 01/11] Fixed Non-uniform height of Asset List Tiles. (#6578)

---
 src/Components/Assets/AssetsList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index 8c19928fbee..df6326c6e79 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -189,12 +189,12 @@ const AssetsList = () => {
           <Link
             key={asset.id}
             href={`/facility/${asset?.location_object.facility.id}/assets/${asset.id}`}
-            className="text-inherit"
+            className="h-full text-inherit"
             data-testid="created-asset-list"
           >
             <div
               key={asset.id}
-              className="border-1 w-full cursor-pointer items-center justify-center rounded-lg border border-transparent bg-white p-5 shadow hover:border-primary-500"
+              className="border-1 h-full w-full cursor-pointer items-center justify-center rounded-lg border border-transparent bg-white p-5 shadow hover:border-primary-500"
             >
               <div className="md:flex">
                 <p className="flex break-words text-xl font-medium capitalize">

From 826223779d14a94ae86b149a4c749cd056cf1da7 Mon Sep 17 00:00:00 2001
From: Ashraf Mohammed <98876115+AshrafMd-1@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:02:30 +0530
Subject: [PATCH 02/11] fix styling issues (#6639)

---
 .../Common/RelativeDateUserMention.tsx        |  2 +-
 src/Components/Facility/ConsultationCard.tsx  | 26 +++++++++++--------
 src/Components/Patient/PatientHome.tsx        |  6 ++---
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/Components/Common/RelativeDateUserMention.tsx b/src/Components/Common/RelativeDateUserMention.tsx
index 55c7a81518b..18fb431574f 100644
--- a/src/Components/Common/RelativeDateUserMention.tsx
+++ b/src/Components/Common/RelativeDateUserMention.tsx
@@ -8,7 +8,7 @@ function RelativeDateUserMention(props: {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
 }) {
   return (
-    <div className="flex flex-row items-center">
+    <div className="flex flex-row flex-wrap items-center justify-center ">
       <div className="tooltip">
         <span
           className={`tooltip-text tooltip-${props.tooltipPosition || "top"}`}
diff --git a/src/Components/Facility/ConsultationCard.tsx b/src/Components/Facility/ConsultationCard.tsx
index 4859b981e8f..2c0fa54db21 100644
--- a/src/Components/Facility/ConsultationCard.tsx
+++ b/src/Components/Facility/ConsultationCard.tsx
@@ -112,21 +112,25 @@ export const ConsultationCard = (props: ConsultationProps) => {
       <div className="mt-8 flex flex-col">
         {
           <div className="flex flex-col items-center text-sm text-gray-700 md:flex-row">
-            Created:{" "}
+            Created :{" "}
+            <div className=" ml-1 text-black">
+              <RelativeDateUserMention
+                tooltipPosition="right"
+                actionDate={itemData.created_date}
+                user={itemData.created_by}
+              />
+            </div>
+          </div>
+        }
+        <div className="flex flex-col items-center text-sm text-gray-700 md:flex-row">
+          Last Modified :{" "}
+          <div className=" ml-1 text-black">
             <RelativeDateUserMention
               tooltipPosition="right"
-              actionDate={itemData.created_date}
-              user={itemData.created_by}
+              actionDate={itemData.modified_date}
+              user={itemData.last_edited_by}
             />
           </div>
-        }
-        <div className="flex flex-col items-center text-sm text-gray-700 md:flex-row">
-          Last Modified:{" "}
-          <RelativeDateUserMention
-            tooltipPosition="right"
-            actionDate={itemData.modified_date}
-            user={itemData.last_edited_by}
-          />
         </div>
       </div>
       <div className="mt-4 flex w-full flex-col justify-between gap-1 md:flex-row">
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
index b6ceaf2e4dc..a8f2335d484 100644
--- a/src/Components/Patient/PatientHome.tsx
+++ b/src/Components/Patient/PatientHome.tsx
@@ -457,7 +457,7 @@ export const PatientHome = (props: any) => {
             </div>
             <div className="mt-4 flex items-center">
               <ButtonV2
-                className="w-full"
+                className="mb-2 w-full"
                 disabled={!patientData.is_active}
                 onClick={() =>
                   navigate(
@@ -717,7 +717,7 @@ export const PatientHome = (props: any) => {
                   </div>
                 </div>
                 <div className="mt-2 flex justify-between rounded-sm bg-white p-2 px-4 text-center shadow">
-                  <div className="w-1/2 border-r-2 pb-1">
+                  <div className="w-1/2 border-r-2 pb-1 pr-2">
                     <div className="text-sm font-normal leading-5 text-gray-500">
                       Created
                     </div>
@@ -730,7 +730,7 @@ export const PatientHome = (props: any) => {
                       </div>
                     </div>
                   </div>
-                  <div className="w-1/2 pb-1">
+                  <div className="w-1/2 pb-1 pl-2">
                     <div className="text-sm font-normal leading-5 text-gray-500">
                       Last Edited
                     </div>

From 4602398f40391f4a708a30b72c493cdbd5e320f6 Mon Sep 17 00:00:00 2001
From: Gampa Sri Harsh <114745442+sriharsh05@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:07:17 +0530
Subject: [PATCH 03/11] Add Frontend validation in the add multiple bed
 function (#6643)

* add front end validation for number of beds

* disabled submit button when number of beds are greater than 100
---
 src/Components/Facility/AddBedForm.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/Components/Facility/AddBedForm.tsx b/src/Components/Facility/AddBedForm.tsx
index 3bb49733141..785c90869ba 100644
--- a/src/Components/Facility/AddBedForm.tsx
+++ b/src/Components/Facility/AddBedForm.tsx
@@ -229,12 +229,21 @@ export const AddBedForm = (props: BedFormProps) => {
                   min={1}
                   max={100}
                   onChange={(e) => setNumberOfBeds(Number(e.value))}
+                  error={
+                    numberOfBeds > 100
+                      ? "Number of beds cannot be greater than 100"
+                      : undefined
+                  }
                 />
               </>
             )}
             <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:justify-end">
               <Cancel onClick={handleCancel} />
-              <Submit onClick={handleSubmit} label={buttonText} />
+              <Submit
+                onClick={handleSubmit}
+                label={buttonText}
+                disabled={numberOfBeds > 100}
+              />
             </div>
           </form>
         </Card>

From 92208a18a60303f4d79b45bfeec78dc36cb2203a Mon Sep 17 00:00:00 2001
From: Ashraf Mohammed <98876115+AshrafMd-1@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:07:42 +0530
Subject: [PATCH 04/11] Move the cancel button to the right in facility
 inventory add page! (#6623)

* move cancel button to the left side

* change className
---
 src/Components/Facility/AddInventoryForm.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Components/Facility/AddInventoryForm.tsx b/src/Components/Facility/AddInventoryForm.tsx
index 22be0b9fd0c..df217cad3ec 100644
--- a/src/Components/Facility/AddInventoryForm.tsx
+++ b/src/Components/Facility/AddInventoryForm.tsx
@@ -16,6 +16,7 @@ import TextFormField from "../Form/FormFields/TextFormField";
 import { InventoryItemsModel } from "./models";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import useAppHistory from "../../Common/hooks/useAppHistory";
+
 const Loading = lazy(() => import("../Common/Loading"));
 
 const initForm = {
@@ -122,6 +123,7 @@ export const AddInventoryForm = (props: any) => {
         setFacilityName("");
       }
     }
+
     fetchFacilityName();
   }, [dispatchAction, facilityId]);
 
@@ -327,7 +329,7 @@ export const AddInventoryForm = (props: any) => {
                 />
               </div>
             </div>
-            <div className="mt-4 flex flex-col justify-between gap-2 md:flex-row">
+            <div className="cui-form-button-group">
               <Cancel onClick={() => goBack()} />
               <Submit onClick={handleSubmit} label="Add/Update Inventory" />
             </div>

From 835cab35188cdd7e1772e34b87f42bf58ba36a24 Mon Sep 17 00:00:00 2001
From: konavivekramakrishna
 <101407963+konavivekramakrishna@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:08:58 +0530
Subject: [PATCH 05/11] Fixed Facility Cover Image upload pop-up (#6616)

* remove unnecessary onClick

* removed cursor pointer
---
 src/Components/Facility/FacilityHome.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Components/Facility/FacilityHome.tsx b/src/Components/Facility/FacilityHome.tsx
index 405ba236f05..f14057d4a91 100644
--- a/src/Components/Facility/FacilityHome.tsx
+++ b/src/Components/Facility/FacilityHome.tsx
@@ -370,11 +370,8 @@ export const FacilityHome = (props: any) => {
       />
       {hasCoverImage ? (
         <div
-          className={`group relative h-48 w-full text-clip rounded-t bg-gray-200 opacity-100 transition-all duration-200 ease-in-out md:h-0 md:opacity-0 ${
-            hasPermissionToEditCoverImage && "cursor-pointer"
-          }`}
-          onClick={() =>
-            hasPermissionToEditCoverImage && setEditCoverImage(true)
+          className={
+            "group relative h-48 w-full text-clip rounded-t bg-gray-200 opacity-100 transition-all duration-200 ease-in-out md:h-0 md:opacity-0"
           }
         >
           <CoverImage />

From 3a777988742de2f86dceaf65d5054e67c0334d5d Mon Sep 17 00:00:00 2001
From: Ashraf Mohammed <98876115+AshrafMd-1@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:09:16 +0530
Subject: [PATCH 06/11] No close button once you open the discontinued
 prescriptions (#6614)

* fix scroll overlay

* add style

* add hide button

* add loading logic
---
 .../MedicineAdministrationSheet/index.tsx     | 79 +++++++++++--------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
index 187d5447314..9b37c53f599 100644
--- a/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
+++ b/src/Components/Medicine/MedicineAdministrationSheet/index.tsx
@@ -39,7 +39,11 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
 
   const discontinuedPrescriptions = useQuery(MedicineRoutes.listPrescriptions, {
     pathParams: { consultation },
-    query: { ...filters, discontinued: true },
+    query: {
+      ...filters,
+      limit: showDiscontinued ? 100 : 1,
+      discontinued: true,
+    },
     prefetch: !showDiscontinued,
   });
 
@@ -97,47 +101,60 @@ const MedicineAdministrationSheet = ({ readonly, is_prn }: Props) => {
           )
         }
       />
-
-      <ScrollOverlay
-        className="rounded-lg border shadow"
-        overlay={
-          <div className="flex items-center gap-2 pb-2">
-            <span className="text-sm">Scroll to view more prescriptions</span>
-            <CareIcon icon="l-arrow-down" className="animate-bounce text-2xl" />
-          </div>
-        }
-        disableOverlay={loading || !prescriptions?.length}
-      >
-        {loading && <Loading />}
-        {prescriptions?.length === 0 && <NoPrescriptions prn={is_prn} />}
-
-        {!!prescriptions?.length && (
-          <MedicineAdministrationTable
-            prescriptions={prescriptions}
-            pagination={pagination}
-            onRefetch={() => {
-              refetch();
-              discontinuedPrescriptions.refetch();
-            }}
-          />
-        )}
-
-        {!showDiscontinued && !!discontinuedCount && (
+      <div className="rounded-lg border shadow">
+        <ScrollOverlay
+          overlay={
+            <div className="flex items-center gap-2 pb-2">
+              <span className="text-sm">Scroll to view more prescriptions</span>
+              <CareIcon
+                icon="l-arrow-down"
+                className="animate-bounce text-2xl"
+              />
+            </div>
+          }
+          disableOverlay={
+            loading || !prescriptions?.length || !(prescriptions?.length > 1)
+          }
+        >
+          {loading ? (
+            <Loading />
+          ) : (
+            <>
+              {prescriptions?.length === 0 && <NoPrescriptions prn={is_prn} />}
+              {!!prescriptions?.length && (
+                <MedicineAdministrationTable
+                  prescriptions={prescriptions}
+                  pagination={pagination}
+                  onRefetch={() => {
+                    refetch();
+                    discontinuedPrescriptions.refetch();
+                  }}
+                />
+              )}
+            </>
+          )}
+        </ScrollOverlay>
+        {!!discontinuedCount && (
           <ButtonV2
             variant="secondary"
             className="group sticky left-0 w-full rounded-b-lg rounded-t-none bg-gray-100"
-            onClick={() => setShowDiscontinued(true)}
+            disabled={loading || discontinuedPrescriptions.loading}
+            onClick={() => setShowDiscontinued(!showDiscontinued)}
           >
             <span className="flex w-full items-center justify-start gap-1 text-xs transition-all duration-200 ease-in-out group-hover:gap-3 md:text-sm">
-              <CareIcon icon="l-eye" className="text-lg" />
+              <CareIcon
+                icon={showDiscontinued ? "l-eye-slash" : "l-eye"}
+                className="text-lg"
+              />
               <span>
-                Show <strong>{discontinuedCount}</strong> discontinued
+                {showDiscontinued ? "Hide" : "Show"}{" "}
+                <strong>{discontinuedCount}</strong> discontinued
                 prescription(s)
               </span>
             </span>
           </ButtonV2>
         )}
-      </ScrollOverlay>
+      </div>
     </div>
   );
 };

From 45b74d04be49164c55a269935ac9ee9284d7a3c3 Mon Sep 17 00:00:00 2001
From: Shyam Prakash <106866225+shyamprakash123@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:09:41 +0530
Subject: [PATCH 07/11] Fixed reloading issue while Opening Investigations or
 Treatment Summary in Consultation Dashboard. (#6576)

Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
---
 src/Components/Patient/PatientInfoCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/Patient/PatientInfoCard.tsx b/src/Components/Patient/PatientInfoCard.tsx
index fd6213d8e08..bc86b7f4c97 100644
--- a/src/Components/Patient/PatientInfoCard.tsx
+++ b/src/Components/Patient/PatientInfoCard.tsx
@@ -441,14 +441,14 @@ export default function PatientInfoCard(props: {
                   (action: any, i) =>
                     action[3] && (
                       <div key={i}>
-                        <a
+                        <Link
                           key={i}
                           className="dropdown-item-primary pointer-events-auto m-2 flex cursor-pointer items-center justify-start gap-2 rounded border-0 p-2 text-sm font-normal transition-all duration-200 ease-in-out"
                           href={
                             consultation?.admitted &&
                             !consultation?.current_bed &&
                             i === 1
-                              ? undefined
+                              ? ""
                               : `${action[0]}`
                           }
                           onClick={() => {
@@ -473,7 +473,7 @@ export default function PatientInfoCard(props: {
                             className={`care-l-${action[2]} text-lg text-primary-500`}
                           />
                           <span>{action[1]}</span>
-                        </a>
+                        </Link>
                         {action?.[4]?.[0] && (
                           <>
                             <p className="mt-1 text-xs text-red-500">

From 21f53752d2ce85b300a2584b122140d2f0c0e46a Mon Sep 17 00:00:00 2001
From: Shyam Prakash <106866225+shyamprakash123@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:09:53 +0530
Subject: [PATCH 08/11] Improved look of vitals monitor in mobile view. (#6574)

---
 src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
index 071da764676..6533d133089 100644
--- a/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
+++ b/src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx
@@ -43,7 +43,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
     <div className="flex flex-col gap-1 rounded bg-[#020617] p-2">
       {props.patientAssetBed && (
         <div className="flex items-center justify-between px-2 tracking-wide">
-          <div className="flex items-center gap-2">
+          <div className="flex flex-col gap-2 md:flex-row">
             {patient ? (
               <Link
                 href={`/facility/${patient.last_consultation?.facility}/patient/${patient.id}/consultation/${patient.last_consultation?.id}`}
@@ -64,7 +64,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
               </span>
             )}
           </div>
-          <div className="flex items-center gap-3 text-xs md:text-sm">
+          <div className="flex flex-col items-center gap-2 text-xs md:flex-row md:text-sm">
             {asset && (
               <Link
                 className="flex items-center gap-1 text-gray-500"
@@ -76,7 +76,7 @@ export default function HL7PatientVitalsMonitor(props: IVitalsComponentProps) {
             )}
             {bed && (
               <Link
-                className="flex items-center gap-2 text-gray-500"
+                className="flex flex-col items-center gap-2 text-gray-500 md:flex-row"
                 href={`/facility/${patient?.facility_object?.id}/location/${bed?.location_object?.id}/beds`}
               >
                 <span className="flex items-center gap-1">

From 735fb5f1bf61cd690aa15a048f0a01b83a8533d0 Mon Sep 17 00:00:00 2001
From: Onkar Jadhav <56870381+Omkar76@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:10:19 +0530
Subject: [PATCH 09/11] Improve rounding of the preset buttons. Fixes #6555
 (#6567)

Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Co-authored-by: Rithvik Nishad <mail@rithviknishad.dev>
---
 src/Components/Facility/Consultations/Feed.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
index 25b656a0a79..c0b708619ef 100644
--- a/src/Components/Facility/Consultations/Feed.tsx
+++ b/src/Components/Facility/Consultations/Feed.tsx
@@ -466,9 +466,9 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
                   getCameraStatus({});
                 }}
                 className={classNames(
-                  "block border border-gray-500 px-4 py-2",
+                  "block border border-gray-500 px-4 py-2 first:rounded-l last:rounded-r",
                   currentPreset === preset
-                    ? "rounded border-primary-500 bg-primary-500 text-white"
+                    ? "border-primary-500 bg-primary-500 text-white"
                     : "bg-transparent"
                 )}
               >

From 11da46137e66b9e6a491fc3f3de909711aba6709 Mon Sep 17 00:00:00 2001
From: konavivekramakrishna
 <101407963+konavivekramakrishna@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:10:45 +0530
Subject: [PATCH 10/11] Aligned buttons to right (#6573)

* aligned buttons to right

* fixed merge conflict

* added pading
---
 src/Components/Facility/FacilityCard.tsx | 186 +++++++++++------------
 1 file changed, 93 insertions(+), 93 deletions(-)

diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index ab37ac20c96..e8e0dbef70f 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -157,109 +157,109 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                 </div>
               </div>
               <div className="flex flex-wrap border-t bg-gray-50 px-2 py-1 md:px-3">
-                <div className="flex justify-between py-2">
-                  <div className="flex w-full flex-wrap justify-between gap-2">
-                    <div className="flex flex-wrap gap-2">
-                      <div
-                        className={`tooltip ml-auto flex h-[38px] w-fit items-center justify-center rounded-md px-2 text-xl ${
+                {/* <div className="flex justify-between py-2"> */}
+                <div className="flex w-full flex-wrap justify-between gap-2 py-2">
+                  <div className="flex flex-wrap gap-2">
+                    <div
+                      className={`tooltip ml-auto flex h-[38px] w-fit items-center justify-center rounded-md px-2 text-xl ${
+                        facility.patient_count / facility.bed_count > 0.85
+                          ? "button-danger-border bg-red-500"
+                          : "button-primary-border bg-primary-100"
+                      }`}
+                    >
+                      <span className="tooltip-text tooltip-top">
+                        Live Patients / Total beds
+                      </span>{" "}
+                      <CareIcon
+                        className={classNames(
+                          "care-l-bed mr-2",
+                          facility.patient_count / facility.bed_count > 0.85
+                            ? "text-white"
+                            : "text-primary-600"
+                        )}
+                      />{" "}
+                      <dt
+                        className={`my-1 text-sm font-semibold ${
                           facility.patient_count / facility.bed_count > 0.85
-                            ? "button-danger-border bg-red-500"
-                            : "button-primary-border bg-primary-100"
+                            ? "text-white"
+                            : "text-gray-700"
                         }`}
                       >
-                        <span className="tooltip-text tooltip-top">
-                          Live Patients / Total beds
-                        </span>{" "}
-                        <CareIcon
-                          className={classNames(
-                            "care-l-bed mr-2",
-                            facility.patient_count / facility.bed_count > 0.85
-                              ? "text-white"
-                              : "text-primary-600"
-                          )}
-                        />{" "}
-                        <dt
-                          className={`my-1 text-sm font-semibold ${
-                            facility.patient_count / facility.bed_count > 0.85
-                              ? "text-white"
-                              : "text-gray-700"
-                          }`}
-                        >
-                          Occupancy: {facility.patient_count} /{" "}
-                          {facility.bed_count}{" "}
-                        </dt>{" "}
-                      </div>
-                      <DialogModal
-                        show={notifyModalFor === facility.id}
-                        title={
-                          <span className="flex justify-center text-2xl">
-                            Notify: {facility.name}
-                          </span>
-                        }
-                        onClose={() => setNotifyModalFor(undefined)}
+                        Occupancy: {facility.patient_count} /{" "}
+                        {facility.bed_count}{" "}
+                      </dt>{" "}
+                    </div>
+                    <DialogModal
+                      show={notifyModalFor === facility.id}
+                      title={
+                        <span className="flex justify-center text-2xl">
+                          Notify: {facility.name}
+                        </span>
+                      }
+                      onClose={() => setNotifyModalFor(undefined)}
+                    >
+                      <form
+                        onSubmit={(event) => {
+                          event.preventDefault();
+                          handleNotifySubmit(notifyModalFor);
+                        }}
+                        className="flex w-full flex-col bg-white text-center"
                       >
-                        <form
-                          onSubmit={(event) => {
-                            event.preventDefault();
-                            handleNotifySubmit(notifyModalFor);
-                          }}
-                          className="flex w-full flex-col bg-white text-center"
-                        >
-                          <TextAreaFormField
-                            id="NotifyModalMessageInput"
-                            name="message"
-                            rows={5}
-                            className="pb-2 pt-4"
-                            onChange={(e) => setNotifyMessage(e.value)}
-                            placeholder="Type your message..."
-                            error={notifyError}
+                        <TextAreaFormField
+                          id="NotifyModalMessageInput"
+                          name="message"
+                          rows={5}
+                          className="pb-2 pt-4"
+                          onChange={(e) => setNotifyMessage(e.value)}
+                          placeholder="Type your message..."
+                          error={notifyError}
+                        />
+                        <div className="flex flex-col-reverse justify-between gap-2 md:flex-row">
+                          <Cancel
+                            onClick={() => setNotifyModalFor(undefined)}
                           />
-                          <div className="flex flex-col-reverse justify-between gap-2 md:flex-row">
-                            <Cancel
-                              onClick={() => setNotifyModalFor(undefined)}
-                            />
-                            <Submit label="Notify" />
-                          </div>
-                        </form>
-                      </DialogModal>
-                    </div>
-                    <div className="flex flex-wrap gap-2">
-                      {userType !== "Staff" ? (
-                        <ButtonV2
-                          id="facility-notify"
-                          ghost
-                          border
-                          className="h-[38px]"
-                          onClick={(_) => setNotifyModalFor(facility.id)}
-                        >
-                          <CareIcon className="care-l-megaphone text-lg" />
-                          <span className="hidden md:block">Notify</span>
-                        </ButtonV2>
-                      ) : (
-                        <></>
-                      )}
+                          <Submit label="Notify" />
+                        </div>
+                      </form>
+                    </DialogModal>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {userType !== "Staff" ? (
                       <ButtonV2
-                        href={`/facility/${facility.id}`}
-                        id="facility-details"
-                        border
+                        id="facility-notify"
                         ghost
-                        className="h-[38px]"
-                      >
-                        <CareIcon className="care-l-hospital text-lg" />
-                        <span className="hidden md:inline">
-                          {t("view_faciliy")}
-                        </span>
-                      </ButtonV2>
-                      <ButtonV2
-                        href={`/patients?facility=${facility.id}`}
-                        id="facility-patients"
                         border
-                        ghost
+                        className="h-[38px]"
+                        onClick={(_) => setNotifyModalFor(facility.id)}
                       >
-                        <CareIcon className="care-l-user-injured text-lg" />
-                        {t("view_patients")}
+                        <CareIcon className="care-l-megaphone text-lg" />
+                        <span className="hidden md:block">Notify</span>
                       </ButtonV2>
-                    </div>
+                    ) : (
+                      <></>
+                    )}
+                    <ButtonV2
+                      href={`/facility/${facility.id}`}
+                      id="facility-details"
+                      border
+                      ghost
+                      className="h-[38px]"
+                    >
+                      <CareIcon className="care-l-hospital text-lg" />
+                      <span className="hidden md:inline">
+                        {t("view_faciliy")}
+                      </span>
+                    </ButtonV2>
+                    <ButtonV2
+                      href={`/patients?facility=${facility.id}`}
+                      id="facility-patients"
+                      border
+                      ghost
+                    >
+                      <CareIcon className="care-l-user-injured text-lg" />
+                      {t("view_patients")}
+                    </ButtonV2>
+                    {/* </div> */}
                   </div>
                 </div>
               </div>

From 3eade8768c7b8ff7577bd75add10d575ceb44382 Mon Sep 17 00:00:00 2001
From: Suprabath <34211797+suprabathk@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:11:15 +0530
Subject: [PATCH 11/11] Disable out of constraint dates in DateInputV2 (#6379)

* Fixed date buttons out of range

* Added translations

* Fixed cursor

* Update DateInputV2.tsx

* Add max value

* disable future for last service date

---------

Co-authored-by: Ashesh <3626859+Ashesh3@users.noreply.github.com>
---
 .../Assets/AssetServiceEditModal.tsx          |  1 +
 src/Components/Common/DateInputV2.tsx         | 82 ++++++++++++-------
 src/Components/Facility/AssetCreate.tsx       |  1 +
 src/Locale/en/Common.json                     |  6 +-
 4 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 3964dfe0770..13a91e36477 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -192,6 +192,7 @@ export const AssetServiceEditModal = (props: {
                 className="mt-2"
                 position="LEFT"
                 value={new Date(form.serviced_on)}
+                max={new Date(props.service_record.created_date)}
                 onChange={(date) => {
                   if (
                     dayjs(date.value).format("YYYY-MM-DD") >
diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index 95652e68638..da974fbe0e9 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/src/Components/Common/DateInputV2.tsx
@@ -4,6 +4,8 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import { Popover } from "@headlessui/react";
 import { classNames } from "../../Utils/utils";
 import dayjs from "../../Utils/dayjs";
+import * as Notification from "../../Utils/Notifications.js";
+import { t } from "i18next";
 
 type DatePickerType = "date" | "month" | "year";
 export type DatePickerPosition = "LEFT" | "RIGHT" | "CENTER";
@@ -16,6 +18,7 @@ interface Props {
   value: Date | undefined;
   min?: Date;
   max?: Date;
+  outOfLimitsErrorMessage?: string;
   onChange: (date: Date) => void;
   position?: DatePickerPosition;
   disabled?: boolean;
@@ -34,6 +37,7 @@ const DateInputV2: React.FC<Props> = ({
   value,
   min,
   max,
+  outOfLimitsErrorMessage,
   onChange,
   position,
   disabled,
@@ -100,16 +104,21 @@ const DateInputV2: React.FC<Props> = ({
   ) => void;
 
   const setDateValue = (date: number, close: CloseFunction) => () => {
-    isDateWithinConstraints(date) &&
-      onChange(
-        new Date(
-          datePickerHeaderDate.getFullYear(),
-          datePickerHeaderDate.getMonth(),
-          date
-        )
-      );
-    close();
-    setIsOpen?.(false);
+    isDateWithinConstraints(date)
+      ? (() => {
+          onChange(
+            new Date(
+              datePickerHeaderDate.getFullYear(),
+              datePickerHeaderDate.getMonth(),
+              date
+            )
+          );
+          close();
+          setIsOpen?.(false);
+        })()
+      : Notification.Error({
+          msg: outOfLimitsErrorMessage ?? "Cannot select date out of range",
+        });
   };
 
   const getDayCount = (date: Date) => {
@@ -220,7 +229,7 @@ const DateInputV2: React.FC<Props> = ({
                   readOnly
                   disabled={disabled}
                   className={`cui-input-base cursor-pointer disabled:cursor-not-allowed ${className}`}
-                  placeholder={placeholder ?? "Select date"}
+                  placeholder={placeholder ?? t("select_date")}
                   value={value && dayjs(value).format("DD/MM/YYYY")}
                 />
                 <div className="absolute right-0 top-1/2 -translate-y-1/2 p-2">
@@ -248,7 +257,7 @@ const DateInputV2: React.FC<Props> = ({
                             [dd, mm, yyyy].filter(Boolean).join("/")
                         ) || ""
                       } // Display the value in DD/MM/YYYY format
-                      placeholder="DD/MM/YYYY"
+                      placeholder={t("DD/MM/YYYY")}
                       onChange={(e) => {
                         setDisplayValue(e.target.value.replaceAll("/", ""));
                         const value = dayjs(e.target.value, "DD/MM/YYYY", true);
@@ -330,26 +339,41 @@ const DateInputV2: React.FC<Props> = ({
                             className="aspect-square w-[14.26%] border border-transparent p-1 text-center text-sm"
                           />
                         ))}
-                        {dayCount.map((d, i) => (
-                          <div
-                            key={i}
-                            id={`date-${d}`}
-                            className="aspect-square w-[14.26%]"
-                          >
+                        {dayCount.map((d, i) => {
+                          const withinConstraints = isDateWithinConstraints(d);
+                          const selected = value && isSelectedDate(d);
+
+                          const baseClasses =
+                            "flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out";
+                          let conditionalClasses = "";
+
+                          if (withinConstraints) {
+                            if (selected) {
+                              conditionalClasses =
+                                "bg-primary-500 font-bold text-white";
+                            } else {
+                              conditionalClasses =
+                                "hover:bg-gray-300 cursor-pointer";
+                            }
+                          } else {
+                            conditionalClasses =
+                              "!cursor-not-allowed !text-gray-400";
+                          }
+                          return (
                             <div
-                              onClick={setDateValue(d, close)}
-                              className={classNames(
-                                "flex h-full cursor-pointer items-center justify-center rounded text-center text-sm leading-loose text-black transition duration-100 ease-in-out",
-                                value && isSelectedDate(d)
-                                  ? "bg-primary-500 font-bold text-white"
-                                  : "hover:bg-gray-300",
-                                !isDateWithinConstraints(d) && "!text-gray-300"
-                              )}
+                              key={i}
+                              id={`date-${d}`}
+                              className="aspect-square w-[14.26%]"
                             >
-                              {d}
+                              <div
+                                onClick={setDateValue(d, close)}
+                                className={`${baseClasses} ${conditionalClasses}`}
+                              >
+                                {d}
+                              </div>
                             </div>
-                          </div>
-                        ))}
+                          );
+                        })}
                       </div>
                     </>
                   )}
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index 84fc09188d0..a1e06a8c7ab 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -883,6 +883,7 @@ const AssetCreate = (props: AssetProps) => {
                         name="last_serviced_on"
                         className="mt-2"
                         position="RIGHT"
+                        disableFuture
                         value={last_serviced_on && new Date(last_serviced_on)}
                         onChange={(date) => {
                           if (
diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
index 0fe1ba1a8bf..7e357bc04b5 100644
--- a/src/Locale/en/Common.json
+++ b/src/Locale/en/Common.json
@@ -155,5 +155,7 @@
   "all_changes_have_been_saved": "All changes have been saved",
   "no_data_found": "No data found",
   "edit": "Edit",
-  "clear_selection": "Clear selection"
-}
\ No newline at end of file
+  "clear_selection": "Clear selection",
+  "select_date": "Select date",
+  "DD/MM/YYYY": "DD/MM/YYYY"
+}