Merge branch 'develop' into issue/9349/button_layout_in_asset_page

AdityaJ2305 · Dec 23, 2024 · 35d1b3e · 35d1b3e
2 parents 7851d0e + e002861
commit 35d1b3e
Show file tree

Hide file tree

Showing 11 changed files with 538 additions and 141 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@sentry/browser": "^8.45.1",
-    "@tanstack/react-query": "^5.62.3",
+    "@tanstack/react-query": "^5.62.8",
     "@tanstack/react-query-devtools": "^5.62.7",
     "@yudiel/react-qr-scanner": "^2.0.8",
     "bowser": "^2.11.0",
@@ -97,7 +97,7 @@
     "react-google-recaptcha": "^3.1.0",
     "react-i18next": "^15.1.3",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-pdf": "^9.1.1",
+    "react-pdf": "^9.2.1",
     "react-webcam": "^7.2.0",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",

diff --git a/public/locale/en.json b/public/locale/en.json
@@ -1046,6 +1046,7 @@
   "notification_cancelled": "Notification cancelled",
   "notification_permission_denied": "Notification permission denied",
   "notification_permission_granted": "Notification permission granted",
+  "notify": "Notify",
   "number_of_aged_dependents": "Number of Aged Dependents (Above 60)",
   "number_of_beds": "Number of beds",
   "number_of_beds_out_of_range_error": "Number of beds cannot be greater than 100",
@@ -1539,9 +1540,10 @@
   "view_all_details": "View All Details",
   "view_asset": "View Assets",
   "view_cns": "View CNS",
+  "view_consultation": "View Latest Encounter",
   "view_consultation_and_log_updates": "View Consultation / Log Updates",
   "view_details": "View Details",
-  "view_faciliy": "View Facility",
+  "view_facility": "View Facility",
   "view_files": "View Files",
   "view_patients": "View Patients",
   "view_update_patient_files": "View/Update patient files",

diff --git a/public/locale/hi.json b/public/locale/hi.json
@@ -795,7 +795,7 @@
   "view_abdm_records": "ABDM रिकॉर्ड देखें",
   "view_asset": "संपत्तियां देखें",
   "view_details": "विवरण देखें",
-  "view_faciliy": "सुविधा देखें",
+  "view_facility": "सुविधा देखें",
   "view_patients": "मरीज़ देखें",
   "view_users": "उपयोगकर्ता देखें",
   "virtual_nursing_assistant": "वर्चुअल नर्सिंग सहायक",

diff --git a/public/locale/kn.json b/public/locale/kn.json
@@ -796,7 +796,7 @@
   "view_abdm_records": "ABDM ದಾಖಲೆಗಳನ್ನು ವೀಕ್ಷಿಸಿ",
   "view_asset": "ಸ್ವತ್ತುಗಳನ್ನು ವೀಕ್ಷಿಸಿ",
   "view_details": "ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ",
-  "view_faciliy": "ವೀಕ್ಷಣೆ ಸೌಲಭ್ಯ",
+  "view_facility": "ವೀಕ್ಷಣೆ ಸೌಲಭ್ಯ",
   "view_patients": "ರೋಗಿಗಳನ್ನು ವೀಕ್ಷಿಸಿ",
   "view_users": "ಬಳಕೆದಾರರನ್ನು ವೀಕ್ಷಿಸಿ",
   "virtual_nursing_assistant": "ವರ್ಚುವಲ್ ನರ್ಸಿಂಗ್ ಸಹಾಯಕ",

diff --git a/public/locale/ml.json b/public/locale/ml.json
@@ -796,7 +796,7 @@
   "view_abdm_records": "ABDM റെക്കോർഡുകൾ കാണുക",
   "view_asset": "അസറ്റുകൾ കാണുക",
   "view_details": "വിശദാംശങ്ങൾ കാണുക",
-  "view_faciliy": "സൗകര്യം കാണുക",
+  "view_facility": "സൗകര്യം കാണുക",
   "view_patients": "രോഗികളെ കാണുക",
   "view_users": "ഉപയോക്താക്കളെ കാണുക",
   "virtual_nursing_assistant": "വെർച്വൽ നഴ്സിംഗ് അസിസ്റ്റൻ്റ്",

diff --git a/public/locale/ta.json b/public/locale/ta.json
@@ -795,7 +795,7 @@
   "view_abdm_records": "ABDM பதிவுகளைப் பார்க்கவும்",
   "view_asset": "சொத்துக்களைப் பார்க்கவும்",
   "view_details": "விவரங்களைக் காண்க",
-  "view_faciliy": "பார்வை வசதி",
+  "view_facility": "பார்வை வசதி",
   "view_patients": "நோயாளிகளைப் பார்க்கவும்",
   "view_users": "பயனர்களைக் காண்க",
   "virtual_nursing_assistant": "மெய்நிகர் நர்சிங் உதவியாளர்",

diff --git a/src/components/Common/AuthorizedButton.tsx b/src/components/Common/AuthorizedButton.tsx
@@ -0,0 +1,19 @@
+import { Button, ButtonProps } from "@headlessui/react";
+
+import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
+
+import { AuthorizedElementProps } from "@/Utils/AuthorizeFor";
+
+export const AuthorizedButton: React.FC<
+  AuthorizedElementProps & ButtonProps
+> = ({ authorizeFor = () => true, ...props }) => {
+  return (
+    <AuthorizedChild authorizeFor={authorizeFor}>
+      {({ isAuthorized }) => (
+        <Button {...props} disabled={props.disabled || !isAuthorized}>
+          {props.children}
+        </Button>
+      )}
+    </AuthorizedChild>
+  );
+};
diff --git a/src/components/Common/DateInputV2.tsx b/src/components/Common/DateInputV2.tsx
@@ -348,7 +348,7 @@ const DateInputV2: React.FC<Props> = ({
     const right = popOverX > viewportWidth - (allowTime ? 420 : 300);
     const top = popOverY > viewportHeight - 400;
 
-    return `${right ? "md:-translate-x-1/2" : ""} ${top ? "md:-translate-y-[calc(100%+50px)]" : ""}`;
+    return `${right ? "sm:-translate-x-1/2" : ""} ${top ? "md:-translate-y-[calc(100%+50px)]" : ""} ${right ? "max-sm:-translate-x-1/2" : ""} ${top ? "max-sm:-translate-y-[calc(100%+50px)]" : ""}`.trim();
   };
 
   const domValue = useValueInjectionObserver<string>({

diff --git a/src/components/Facility/FacilityCard.tsx b/src/components/Facility/FacilityCard.tsx
@@ -6,10 +6,11 @@ import { useTranslation } from "react-i18next";
 import Chip from "@/CAREUI/display/Chip";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import { Button } from "@/components/ui/button";
 import { TooltipComponent, TooltipProvider } from "@/components/ui/tooltip";
 
 import { Avatar } from "@/components/Common/Avatar";
-import ButtonV2, { Cancel, Submit } from "@/components/Common/ButtonV2";
+import { Cancel, Submit } from "@/components/Common/ButtonV2";
 import DialogModal from "@/components/Common/Dialog";
 import { FacilityModel } from "@/components/Facility/models";
 import TextAreaFormField from "@/components/Form/FormFields/TextAreaFormField";
@@ -103,6 +104,7 @@ export const FacilityCard = (props: {
                         <TooltipProvider>
                           <TooltipComponent
                             content={t("live_patients_total_beds")}
+                            className="text-sm px-3 py-3 max-w-[300px]"
                           >
                             <div
                               data-test-id="occupancy-badge"
@@ -123,19 +125,20 @@ export const FacilityCard = (props: {
                           </TooltipComponent>
                         </TooltipProvider>
                       </div>
-                      <ButtonV2
+                      <Button
                         id="view-cns-button"
-                        href={`/facility/${facility.id}/cns`}
-                        border
-                        ghost
+                        asChild
                         className="mt-2 sm:mt-0"
+                        variant={"outline_primary"}
                       >
-                        <CareIcon
-                          icon="l-monitor-heart-rate"
-                          className="text-lg"
-                        />
-                        <span>{t("view_cns")}</span>
-                      </ButtonV2>
+                        <Link href={`/facility/${facility.id}/cns`}>
+                          <CareIcon
+                            icon="l-monitor-heart-rate"
+                            className="text-lg mr-1"
+                          />
+                          <span>{t("view_cns")}</span>
+                        </Link>
+                      </Button>
                     </div>
 
                     <div className="mt-2 flex flex-wrap gap-1">
@@ -233,38 +236,81 @@ export const FacilityCard = (props: {
                   </div>
                   <div className="flex flex-wrap gap-2">
                     {["DistrictAdmin", "StateAdmin"].includes(userType) && (
-                      <ButtonV2
-                        id="facility-notify"
-                        ghost
-                        border
-                        className="h-[38px]"
-                        onClick={(_) => setNotifyModalFor(facility.id)}
-                      >
-                        <CareIcon icon="l-megaphone" className="text-lg" />
-                        <span className="hidden md:block">Notify</span>
-                      </ButtonV2>
+                      <TooltipProvider>
+                        <TooltipComponent
+                          content={t("notify")}
+                          side="top"
+                          className="sm:hidden text-sm px-3 py-3 max-w-[300px]"
+                        >
+                          <Button
+                            id="facility-notify"
+                            variant={"outline_primary"}
+                            className="h-[38px]"
+                            onClick={(_) => setNotifyModalFor(facility.id)}
+                            aria-label={t("notify")}
+                            role="button"
+                          >
+                            <CareIcon
+                              icon="l-megaphone"
+                              className="text-lg mr-1"
+                            />
+                            <span className="hidden sm:inline">
+                              {t("notify")}
+                            </span>
+                          </Button>
+                        </TooltipComponent>
+                      </TooltipProvider>
                     )}
-                    <ButtonV2
-                      href={`/facility/${facility.id}`}
-                      id="facility-details"
-                      border
-                      ghost
-                      className="h-[38px]"
-                    >
-                      <CareIcon icon="l-hospital" className="text-lg" />
-                      <span className="hidden md:inline">
-                        {t("view_faciliy")}
-                      </span>
-                    </ButtonV2>
-                    <ButtonV2
-                      href={`/patients?facility=${facility.id}`}
-                      id="facility-patients"
-                      border
-                      ghost
-                    >
-                      <CareIcon icon="l-user-injured" className="text-lg" />
-                      {t("view_patients")}
-                    </ButtonV2>
+                    <TooltipProvider>
+                      <TooltipComponent
+                        content={t("view_facility")}
+                        side="top"
+                        className="sm:hidden text-sm px-3 py-3 max-w-[300px]"
+                      >
+                        <Button
+                          id="facility-details"
+                          variant={"outline_primary"}
+                          className="tooltip h-[38px]"
+                          aria-label={t("view_facility")}
+                          asChild
+                        >
+                          <Link href={`/facility/${facility.id}`}>
+                            <CareIcon
+                              icon="l-hospital"
+                              className="text-lg mr-1"
+                            />
+                            <span className="hidden sm:inline">
+                              {t("view_facility")}
+                            </span>
+                          </Link>
+                        </Button>
+                      </TooltipComponent>
+                    </TooltipProvider>
+                    <TooltipProvider>
+                      <TooltipComponent
+                        content={t("view_patients")}
+                        side="top"
+                        className="sm:hidden text-sm px-3 py-3 max-w-[300px]"
+                      >
+                        <Button
+                          id="facility-patients"
+                          variant={"outline_primary"}
+                          aria-label={t("view_patients")}
+                          asChild
+                          className="tooltip h-[38px]"
+                        >
+                          <Link href={`/patients?facility=${facility.id}`}>
+                            <CareIcon
+                              icon="l-user-injured"
+                              className="text-lg mr-1"
+                            />
+                            <span className="hidden sm:inline">
+                              {t("view_patients")}
+                            </span>
+                          </Link>
+                        </Button>
+                      </TooltipComponent>
+                    </TooltipProvider>
                     {/* </div> */}
                   </div>
                 </div>