From 2812e9cec16aa7f770fddfa09d04658c1529f09f Mon Sep 17 00:00:00 2001
From: Shaurya Gupta <shauryag1000@gmail.com>
Date: Mon, 2 Dec 2024 22:28:25 +0530
Subject: [PATCH] Fix Auto-Scroll Issue and Total Count Card in facility
 details page

---
 src/Utils/request/types.ts                    |  1 +
 src/components/Common/Pagination.tsx          | 14 +++++++----
 src/components/Facility/FacilityStaffList.tsx | 24 ++++++++++++-------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/Utils/request/types.ts b/src/Utils/request/types.ts
index aed066ac81c..be15c4dbe45 100644
--- a/src/Utils/request/types.ts
+++ b/src/Utils/request/types.ts
@@ -41,4 +41,5 @@ export interface PaginatedResponse<TItem> {
   next: string | null;
   previous: string | null;
   results: TItem[];
+  total_doctors: number;
 }
diff --git a/src/components/Common/Pagination.tsx b/src/components/Common/Pagination.tsx
index fb12ff66efa..e11da1e8aae 100644
--- a/src/components/Common/Pagination.tsx
+++ b/src/components/Common/Pagination.tsx
@@ -12,6 +12,7 @@ interface PaginationProps {
   defaultPerPage: number;
   cPage: number;
   className?: string;
+  ScrollToTop?: boolean;
 }
 const Pagination = ({
   className = "mx-auto my-4",
@@ -19,6 +20,7 @@ const Pagination = ({
   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 (
diff --git a/src/components/Facility/FacilityStaffList.tsx b/src/components/Facility/FacilityStaffList.tsx
index e7a2ea08f10..b9eabbb7eac 100644
--- a/src/components/Facility/FacilityStaffList.tsx
+++ b/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>
   );