Added ICU occupancy and changed the tool tip text

src/Components/Facility/FacilityCard.tsx

@@ -13,10 +13,16 @@ import useConfig from "../../Common/hooks/useConfig";
 import { classNames } from "../../Utils/utils";
 import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
+import { getBedTypes } from "../../Common/constants";
+import useQuery from "../../Utils/request/useQuery";
 
 export const FacilityCard = (props: { facility: any; userType: any }) => {
   const { facility, userType } = props;
   const { kasp_string } = useConfig();
+  const config = useConfig();
+  const capacityQuery = useQuery(routes.getCapacity, {
+    pathParams: { facilityId: `${facility.id}` },
+  });
 
   const { t } = useTranslation();
   const [notifyModalFor, setNotifyModalFor] = useState(undefined);
@@ -44,7 +50,22 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
       setNotifyError("Message cannot be empty");
     }
   };
-
+  const fac = { usedICU: 0, VacantICU: 0 };
+  getBedTypes(config).map((x) => {
+    const res = capacityQuery.data?.results.find((data) => {
+      return data.room_type === x.id;
+    });
+    if (
+      res &&
+      res.current_capacity !== undefined &&
+      res.total_capacity !== undefined &&
+      (res.room_type === 20 || res.room_type === 10)
+    ) {
+      fac.VacantICU = fac.VacantICU + res.current_capacity;
+      fac.usedICU = fac.usedICU + res.total_capacity;
+      return <p />;
+    }
+  });
   return (
     <div key={`usr_${facility.id}`} className="w-full">
       <div className="block h-full overflow-hidden rounded-lg bg-white shadow hover:border-primary-500">
@@ -180,8 +201,12 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                           : "button-primary-border bg-primary-100"
                       }`}
                     >
-                      <span className="tooltip-text tooltip-top">
-                        Live Patients / Total beds
+                      <span
+                        className="tooltip-text tooltip-top"
+                        style={{ whiteSpace: "pre-line" }}
+                      >
+                        Total patients marked as admitted in consultation/ Total
+                        no. of registered beds
                       </span>{" "}
                       <CareIcon
                         icon="l-bed"
@@ -203,6 +228,39 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                         {facility.bed_count}{" "}
                       </dt>{" "}
                     </div>
+                    <div
+                      id="occupany-badge"
+                      className={`tooltip button-size-default ml-auto flex w-fit items-center justify-center rounded-md px-2 ${
+                        fac.usedICU / fac.VacantICU > 0.85
+                          ? "button-danger-border bg-red-500"
+                          : "button-primary-border bg-primary-100"
+                      }`}
+                    >
+                      <span
+                        className="tooltip-text tooltip-top"
+                        style={{ whiteSpace: "pre-line" }}
+                      >
+                        ICU bed type/ Number of ICU beds registered
+                      </span>{" "}
+                      <CareIcon
+                        icon="l-bed"
+                        className={classNames(
+                          "mr-2",
+                          fac.usedICU / fac.VacantICU > 0.85
+                            ? "text-white"
+                            : "text-primary-600",
+                        )}
+                      />{" "}
+                      <dt
+                        className={`text-sm font-semibold ${
+                          fac.usedICU / fac.VacantICU > 0.85
+                            ? "text-white"
+                            : "text-gray-700"
+                        }`}
+                      >
+                        ICU Occupancy: {fac.usedICU} / {fac.VacantICU}{" "}
+                      </dt>{" "}
+                    </div>
                     <DialogModal
                       show={notifyModalFor === facility.id}
                       title={