Fix Auto-Scroll Issue and Total Count Card in facility details page

public/locale/en.json

@@ -354,7 +354,6 @@
   "asset_type": "Asset Type",
   "assets": "Assets",
   "assign": "Assign",
-  "unassign":"Unassign",
   "assign_a_volunteer_to": "Assign a volunteer to {{name}}",
   "assign_bed": "Assign Bed",
   "assign_to_volunteer": "Assign to a Volunteer",
@@ -1444,6 +1443,7 @@
   "type_your_comment": "Type your comment",
   "type_your_reason_here": "Type your reason here",
   "unable_to_get_current_position": "Unable to get current position.",
+  "unassign": "Unassign",
   "unconfirmed": "Unconfirmed",
   "unique_id": "Unique Id",
   "unknown": "Unknown",
@@ -1558,8 +1558,8 @@
   "voice_autofill": "Voice Autofill",
   "volunteer_assigned": "Volunteer assigned successfully",
   "volunteer_contact": "Volunteer Contact",
-  "volunteer_update" : "Volunteer updated successfully",
   "volunteer_unassigned": "Volunteer unassigned successfully",
+  "volunteer_update": "Volunteer updated successfully",
   "ward": "Ward",
   "warranty_amc_expiry": "Warranty / AMC Expiry",
   "weekly_working_hours_error": "Average weekly working hours must be a number between 0 and 168",

src/components/Common/Pagination.tsx

@@ -12,13 +12,15 @@ interface PaginationProps {
   defaultPerPage: number;
   cPage: number;
   className?: string;
+  scrollToTop?: boolean;
 }
 const Pagination = ({
   className = "mx-auto my-4",
   data,
   onChange,
   defaultPerPage,
   cPage,
+  scrollToTop = true,
 }: PaginationProps) => {
   const [rowsPerPage, setRowsPerPage] = useState(3);
   const [currentPage, setCurrentPage] = useState(1);
@@ -81,11 +83,13 @@ const Pagination = ({
     setCurrentPage(page);
     onChange(page, rowsPerPage);
     const pageContainer = window.document.getElementById("pages");
-    pageContainer?.scroll({
-      top: 0,
-      left: 0,
-      behavior: "smooth",
-    });
+    if (scrollToTop) {
+      pageContainer?.scroll({
+        top: 0,
+        left: 0,
+        behavior: "smooth",
+      });
+    }
   };
 
   return (

src/components/Facility/FacilityStaffList.tsx

@@ -34,19 +34,19 @@ export const FacilityStaffList = (props: any) => {
         offset: (qParams.page - 1) * resultsPerPage,
       },
       onResponse: ({ res, data }) => {
-        if (res?.ok && data) {
-          let totalCount = 0;
-          data.results.map((doctor: DoctorModal) => {
-            if (doctor.count) {
-              totalCount += doctor.count;
-            }
-          });
-          setTotalDoctors(totalCount);
+        if (res?.ok && data?.results.length) {
+          setTotalDoctors(data.results[0]?.total_doctors ?? 0);
         }
       },
     },
   );
 
+  const handlePageChange = (page: number) => {
+    updatePage(page);
+    const staffCapacityElement = document.getElementById("staff_capacity");
+    staffCapacityElement?.scrollIntoView({ behavior: "smooth" });
+  };
+
   let doctorList: any = null;
   if (!doctorsList || !doctorsList.results.length) {
     doctorList = (
@@ -92,7 +92,10 @@ export const FacilityStaffList = (props: any) => {
 
   return (
     <section id="facility-doctor-capacity-details">
-      <div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6">
+      <div
+        className="mt-5 rounded bg-white p-3 shadow-sm md:p-6"
+        id="staff_capacity"
+      >
         <div className="justify-between md:flex md:pb-2">
           <div className="mb-2 text-xl font-bold">Staff Capacity</div>
           <ButtonV2
@@ -131,7 +134,8 @@ export const FacilityStaffList = (props: any) => {
         cPage={qParams.page}
         defaultPerPage={resultsPerPage}
         data={{ totalCount: doctorsList?.count ?? 0 }}
-        onChange={(page) => updatePage(page)}
+        scrollToTop={false}
+        onChange={(page: number) => handlePageChange(page)}
       />
     </section>
   );

src/components/Facility/models.tsx

@@ -127,6 +127,7 @@ export interface DoctorModal {
   id?: number;
   area?: number;
   count?: number;
+  total_doctors?: number;
 }
 
 export interface OptionsType {