replace useDispatch with useQuery and request in FacilityCard, FacililyHome and FacilityUsers

src/Components/Facility/FacilityBedCapacity.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { getBedTypes } from "../../Common/constants";
+import routes from "../../Redux/api";
+import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
+import useQuery from "../../Utils/request/useQuery";
+import DialogModal from "../Common/Dialog";
+import ButtonV2 from "../Common/components/ButtonV2";
+import { BedCapacity } from "./BedCapacity";
+import BedTypeCard from "./BedTypeCard";
+import useConfig from "../../Common/hooks/useConfig";
+
+export const FacilityBedCapacity = (props: any) => {
+  const [bedCapacityModalOpen, setBedCapacityModalOpen] = useState(false);
+  const config = useConfig();
+
+  const capacityQuery = useQuery(routes.getCapacity, {
+    pathParams: { facilityId: props.facilityId },
+  });
+
+  let capacityList: any = null;
+  if (!capacityQuery.data || !capacityQuery.data.results.length) {
+    capacityList = (
+      <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+        No Bed Types Found
+      </h5>
+    );
+  } else {
+    const totalBedCount = capacityQuery.data.results.reduce(
+      (acc, x) => acc + (x.total_capacity ? x.total_capacity : 0),
+      0
+    );
+    const totalOccupiedBedCount = capacityQuery.data.results.reduce(
+      (acc, x) => acc + (x.current_capacity ? x.current_capacity : 0),
+      0
+    );
+
+    capacityList = (
+      <div className="mt-4 grid w-full gap-7 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+        <BedTypeCard
+          label="Total Beds"
+          used={totalOccupiedBedCount}
+          total={totalBedCount}
+          handleUpdate={() => {
+            return;
+          }}
+        />
+        {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
+          ) {
+            const removeCurrentBedType = (bedTypeId: number | undefined) => {
+              if (capacityQuery.data !== undefined) {
+                capacityQuery.data.results.filter((i) => i.id !== bedTypeId);
+                capacityQuery.refetch();
+              }
+            };
+            return (
+              <BedTypeCard
+                facilityId={props.facilityId}
+                bedCapacityId={res.id}
+                key={`bed_${res.id}`}
+                room_type={res.room_type}
+                label={x.text}
+                used={res.current_capacity}
+                total={res.total_capacity}
+                lastUpdated={res.modified_date}
+                removeBedType={removeCurrentBedType}
+                handleUpdate={() => {
+                  capacityQuery.refetch();
+                }}
+              />
+            );
+          }
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6">
+        <div className="justify-between md:flex  md:border-b md:pb-2">
+          <div className="mb-2 text-xl font-semibold">Bed Capacity</div>
+          <ButtonV2
+            className="w-full md:w-auto"
+            onClick={() => setBedCapacityModalOpen(true)}
+            authorizeFor={NonReadOnlyUsers}
+          >
+            <i className="fas fa-bed mr-2 text-white" />
+            Add More Bed Types
+          </ButtonV2>
+        </div>
+        <div>{capacityList}</div>
+      </div>
+
+      {bedCapacityModalOpen && (
+        <DialogModal
+          show={bedCapacityModalOpen}
+          onClose={() => setBedCapacityModalOpen(false)}
+          title="Add Bed Capacity"
+          className="max-w-md md:min-w-[600px]"
+        >
+          <BedCapacity
+            facilityId={props.facilityId}
+            handleClose={() => setBedCapacityModalOpen(false)}
+            handleUpdate={async () => {
+              capacityQuery.refetch();
+            }}
+          />
+        </DialogModal>
+      )}
+    </div>
+  );
+};

src/Components/Facility/FacilityCard.tsx

@@ -1,9 +1,6 @@
 import { useState } from "react";
-import { useDispatch } from "react-redux";
 import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
-
-import { sendNotificationMessages } from "../../Redux/actions";
 import { FACILITY_FEATURE_TYPES } from "../../Common/constants";
 import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
 import * as Notification from "../../Utils/Notifications.js";
@@ -14,26 +11,28 @@ 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";
 
 export const FacilityCard = (props: { facility: any; userType: any }) => {
   const { facility, userType } = props;
   const { kasp_string } = useConfig();
 
   const { t } = useTranslation();
-  const dispatchAction: any = useDispatch();
   const [notifyModalFor, setNotifyModalFor] = useState(undefined);
   const [notifyMessage, setNotifyMessage] = useState("");
   const [notifyError, setNotifyError] = useState("");
 
   const handleNotifySubmit = async (id: any) => {
-    const data = {
-      facility: id,
-      message: notifyMessage,
-    };
-    if (data.message.trim().length >= 1) {
+    if (notifyMessage.trim().length >= 1) {
       setNotifyError("");
-      const res = await dispatchAction(sendNotificationMessages(data));
-      if (res && res.status == 204) {
+      const { res } = await request(routes.sendNotificationMessages, {
+        body: {
+          facility: id,
+          message: notifyMessage,
+        },
+      });
+      if (res?.ok) {
         Notification.Success({
           msg: "Facility Notified",
         });

src/Components/Facility/FacilityDoctorList.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { DOCTOR_SPECIALIZATION } from "../../Common/constants";
+import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
+import ButtonV2 from "../Common/components/ButtonV2";
+import DialogModal from "../Common/Dialog";
+import { DoctorCapacity } from "./DoctorCapacity";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { DoctorModal } from "./models";
+import DoctorsCountCard from "./DoctorsCountCard";
+import { DoctorIcon } from "../TeleIcu/Icons/DoctorIcon";
+
+export const FacilityDoctorList = (props: any) => {
+  const [doctorCapacityModalOpen, setDoctorCapacityModalOpen] = useState(false);
+  const [totalDoctors, setTotalDoctors] = useState(0);
+
+  const doctorQuery = useQuery(routes.listDoctor, {
+    pathParams: { facilityId: props.facilityId },
+    onResponse: ({ res, data }) => {
+      if (res?.ok && data) {
+        let totalCount = 0;
+        data.results.map((doctor: DoctorModal) => {
+          if (doctor.count) {
+            totalCount += doctor.count;
+          }
+        });
+        setTotalDoctors(totalCount);
+      }
+    },
+  });
+
+  let doctorList: any = null;
+  if (!doctorQuery.data || !doctorQuery.data.results.length) {
+    doctorList = (
+      <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow">
+        No Doctors Found
+      </h5>
+    );
+  } else {
+    doctorList = (
+      <div className="mt-4 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {/* Total Doctors Count Card */}
+        <div className="w-full">
+          <div className="flex h-full flex-col rounded-sm border border-primary-500 bg-primary-100 shadow-sm">
+            <div className="flex flex-1 items-center justify-start gap-3 px-4 py-6">
+              <div className="rounded-full bg-primary-500 p-4">
+                <DoctorIcon className="h-5 w-5 fill-current text-white" />
+              </div>
+              <div>
+                <div className="text-sm font-medium text-[#808080]">
+                  Total Doctors
+                </div>
+                <h2 className="mt-2 text-xl font-bold">{totalDoctors}</h2>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {doctorQuery.data.results.map((data: DoctorModal) => {
+          const removeCurrentDoctorData = (doctorId: number | undefined) => {
+            if (doctorQuery.data !== undefined) {
+              doctorQuery.data?.results.filter(
+                (i: DoctorModal) => i.id !== doctorId
+              );
+              doctorQuery.refetch();
+            }
+          };
+
+          return (
+            <DoctorsCountCard
+              facilityId={props.facilityId}
+              key={`bed_${data.id}`}
+              handleUpdate={async () => {
+                doctorQuery.refetch();
+              }}
+              {...data}
+              removeDoctor={removeCurrentDoctorData}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6">
+        <div className="justify-between md:flex md:pb-2">
+          <div className="mb-2 text-xl font-bold">Doctors List</div>
+          <ButtonV2
+            className="w-full md:w-auto"
+            onClick={() => setDoctorCapacityModalOpen(true)}
+            disabled={doctorList.length === DOCTOR_SPECIALIZATION.length}
+            authorizeFor={NonReadOnlyUsers}
+          >
+            <i className="fas fa-user-md mr-2 text-white" />
+            Add Doctor Types
+          </ButtonV2>
+        </div>
+        <div className="mt-4">{doctorList}</div>
+      </div>
+
+      {doctorCapacityModalOpen && (
+        <DialogModal
+          show={doctorCapacityModalOpen}
+          onClose={() => setDoctorCapacityModalOpen(false)}
+          title="Add Doctor Capacity"
+          className="max-w-md md:min-w-[600px]"
+        >
+          <DoctorCapacity
+            facilityId={props.facilityId}
+            handleClose={() => setDoctorCapacityModalOpen(false)}
+            handleUpdate={async () => {
+              doctorQuery.refetch();
+            }}
+          />
+        </DialogModal>
+      )}
+    </div>
+  );
+};