feat: Added ICU occupancy badge

src/Components/Facility/FacilityCard.tsx

@@ -10,19 +10,38 @@ import { formatPhoneNumber, parsePhoneNumber } from "../../Utils/utils";
 import DialogModal from "../Common/Dialog";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 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";
+import { Occupany_badge } from "./Facilitybedoccupancybadge";
 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);
  const [notifyMessage, setNotifyMessage] = useState("");
  const [notifyError, setNotifyError] = useState("");
-
+ const occupancy = {
+ total_occupancy: {
+ occupied: facility.patient_count,
+ total: facility.total_count,
+ tooltip:
+ "Total patients marked as admitted in consultation/ Total no. of registered bed",
+ badge_title: "Occupancy",
+ },
+ icu: {
+ occupied: 0,
+ total: 0,
+ tooltip: "ICU bed type/ Number of ICU beds registered",
+ badge_title: "ICU Occupancy",
+ },
+ };
  const handleNotifySubmit = async (id: any) => {
  if (notifyMessage.trim().length >= 1) {
  setNotifyError("");
@@ -45,6 +64,34 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
  }
  };
 
+ getBedTypes(config).forEach((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)
+ ) {
+ occupancy.icu.total = occupancy.icu.total + res.total_capacity;
+ occupancy.icu.occupied = occupancy.icu.occupied + res.current_capacity;
+ }
+ });
+ const Badge: JSX.Element[] = [];
+ for (const key in occupancy) {
+ const element = occupancy[key as keyof typeof occupancy];
+ Badge.push(
+ <Occupany_badge
+ key={key}
+ title={element.badge_title}
+ tooltip={element.tooltip}
+ occupied={element.occupied}
+ total={element.total}
+ />,
+ );
+ }
+
  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">
@@ -172,37 +219,9 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
  {/* <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
- id="occupany-badge"
- className={`tooltip button-size-default ml-auto flex w-fit items-center justify-center rounded-md px-2 ${
- 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
- icon="l-bed"
- className={classNames(
- "mr-2",
- facility.patient_count / facility.bed_count > 0.85
- ? "text-white"
- : "text-primary-600",
- )}
- />{" "}
- <dt
- className={`text-sm font-semibold ${
- facility.patient_count / facility.bed_count > 0.85
- ? "text-white"
- : "text-secondary-700"
- }`}
- >
- Occupancy: {facility.patient_count} /{" "}
- {facility.bed_count}{" "}
- </dt>{" "}
- </div>
+
+ {Badge}
+
  <DialogModal
  show={notifyModalFor === facility.id}
  title={

src/Components/Facility/Facilitybedoccupancybadge.tsx

@@ -0,0 +1,44 @@
+import { classNames } from "../../Utils/utils";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+
+export const Occupany_badge = (props: {
+ occupied: number;
+ total: number;
+ tooltip: string;
+ title: string;
+}) => {
+ let total_capacity = props.total;
+ const occupied_capacity = props.occupied,
+ tooltip = props.tooltip,
+ badge_title = props.title;
+ if (total_capacity == undefined) {
+ total_capacity = 0;
+ }
+ return (
+ <div
+ id="occupany-badge"
+ className={`tooltip button-size-default ml-auto flex w-fit items-center justify-center rounded-md px-2 ${occupied_capacity / total_capacity > 0.85 ? "button-danger-border bg-red-500" : "button-primary-border bg-primary-100"}`}
+ >
+ <span
+ className="tooltip-text tooltip-top"
+ style={{ whiteSpace: "pre-line" }}
+ >
+ {tooltip}
+ </span>{" "}
+ <CareIcon
+ icon="l-bed"
+ className={classNames(
+ "mr-2",
+ occupied_capacity / total_capacity > 0.85
+ ? "text-white"
+ : "text-primary-600",
+ )}
+ />{" "}
+ <dt
+ className={`text-sm font-semibold ${occupied_capacity / total_capacity > 0.85 ? "text-white" : "text-gray-700"}`}
+ >
+ {badge_title}: {occupied_capacity} / {total_capacity}{" "}
+ </dt>{" "}
+ </div>
+ );
+};