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

src/Utils/request/types.ts

@@ -41,4 +41,5 @@ export interface PaginatedResponse<TItem> {
   next: string | null;
   previous: string | null;
   results: TItem[];
+  total_doctors: number;
 }

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

@@ -33,17 +33,19 @@ export const FacilityStaffList = (props: any) => {
     },
     onResponse: ({ res, data }) => {
       if (res?.ok && data) {
-        let totalCount = 0;
-        data.results.map((doctor: DoctorModal) => {
-          if (doctor.count) {
-            totalCount += doctor.count;
-          }
-        });
-        setTotalDoctors(totalCount);
+        setTotalDoctors(data?.total_doctors ?? 0);
       }
     },
   });
 
+  const handlePageChange = (page: number) => {
+    updatePage(page);
+    const staffCapacityElement = document.getElementById("staff_capacity");
+    if (staffCapacityElement) {
+      staffCapacityElement.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   let doctorList: any = null;
   if (!doctorsList || !doctorsList.results.length) {
     doctorList = (
@@ -89,7 +91,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
@@ -128,7 +133,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>
   );