Facility staff management bug fixes

src/Locale/en.json

@@ -1172,6 +1172,7 @@
   "to_be_conducted": "To be conducted",
   "total_amount": "Total Amount",
   "total_beds": "Total Beds",
+  "total_staff": "Total Staff",
   "total_users": "Total Users",
   "transfer_in_progress": "TRANSFER IN PROGRESS",
   "transfer_to_receiving_facility": "Transfer to receiving facility",

src/common/constants.tsx

@@ -236,7 +236,7 @@ export const DOCTOR_SPECIALIZATION: Array<OptionsType> = [
   { id: 16, text: "General Surgeon" },
   { id: 17, text: "Geriatrician" },
   { id: 18, text: "Hematologist" },
-  { id: 29, text: "Immunologist" },
+  { id: 19, text: "Immunologist" },
   { id: 20, text: "Infectious Disease Specialist" },
   { id: 21, text: "MBBS doctor" },
   { id: 22, text: "Medical Officer" },

src/components/Facility/FacilityStaffList.tsx

@@ -11,14 +11,21 @@ import DoctorsCountCard from "./StaffCountCard";
 import { DoctorIcon } from "../TeleIcu/Icons/DoctorIcon";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { useTranslation } from "react-i18next";
+import useFilters from "@/common/hooks/useFilters";
+import Pagination from "../Common/Pagination";
 
 export const FacilityStaffList = (props: any) => {
   const { t } = useTranslation();
   const [doctorCapacityModalOpen, setDoctorCapacityModalOpen] = useState(false);
+  const { qParams, resultsPerPage, updatePage } = useFilters({ limit: 15 });
   const [totalDoctors, setTotalDoctors] = useState(0);
 
-  const doctorQuery = useQuery(routes.listDoctor, {
+  const { data: doctorsList, refetch } = useQuery(routes.listDoctor, {
     pathParams: { facilityId: props.facilityId },
+    query: {
+      limit: resultsPerPage,
+      offset: (qParams.page - 1) * resultsPerPage,
+    },
     onResponse: ({ res, data }) => {
       if (res?.ok && data) {
         let totalCount = 0;
@@ -33,7 +40,7 @@ export const FacilityStaffList = (props: any) => {
   });
 
   let doctorList: any = null;
-  if (!doctorQuery.data || !doctorQuery.data.results.length) {
+  if (!doctorsList || !doctorsList.results.length) {
     doctorList = (
       <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-secondary-500 shadow">
         {t("no_staff")}
@@ -50,33 +57,24 @@ export const FacilityStaffList = (props: any) => {
               </div>
               <div id="facility-doctor-totalcapacity">
                 <div className="text-sm font-medium text-[#808080]">
-                  Total Staff
+                  {t("total_staff")}
                 </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();
-            }
-          };
-
+        {doctorsList.results.map((data: DoctorModal) => {
           return (
             <DoctorsCountCard
               facilityId={props.facilityId}
               key={`bed_${data.id}`}
               handleUpdate={async () => {
-                doctorQuery.refetch();
+                refetch();
               }}
               {...data}
-              removeDoctor={removeCurrentDoctorData}
+              removeDoctor={() => refetch()}
             />
           );
         })}
@@ -116,11 +114,17 @@ export const FacilityStaffList = (props: any) => {
             facilityId={props.facilityId}
             handleClose={() => setDoctorCapacityModalOpen(false)}
             handleUpdate={async () => {
-              doctorQuery.refetch();
+              refetch();
             }}
           />
         </DialogModal>
       )}
+      <Pagination
+        cPage={qParams.page}
+        defaultPerPage={resultsPerPage}
+        data={{ totalCount: doctorsList?.count ?? 0 }}
+        onChange={(page) => updatePage(page)}
+      />
     </section>
   );
 };

src/components/Facility/StaffCapacity.tsx

@@ -66,6 +66,9 @@ export const StaffCapacity = (props: DoctorCapacityProps) => {
 
   const specializationsQuery = useQuery(routes.listDoctor, {
     pathParams: { facilityId },
+    query: {
+      limit: DOCTOR_SPECIALIZATION.length - 1,
+    },
   });
 
   const { loading } = useQuery(routes.getDoctor, {