paginations ,limit=50

app/clinic/[slug]/page.js

@@ -8,17 +8,19 @@ async function Clinic({ params: { slug } }) {
   const reqClinics = await fetchReq(
     `${API_URL}/api/v1/clinic/${slug}`
   );
-
+const limit=50 
   const reqDoctors = await fetchReq(
-    `${API_URL}/api/v1/clinic/doctor-list/${slug}`
+    `${API_URL}/api/v1/clinic/doctor-list/${slug}?page=1&limit=${limit}`
   );
 
+
   const clinic = reqClinics;
   const doctors = reqDoctors?.data || [];
+  const pagedoctors=reqDoctors?.page
 
   return (
     <Layout>
-      <ClinicPage data={clinic} doctors={doctors} slug={slug}  />
+      <ClinicPage data={clinic} doctors={doctors} slug={slug} pages={pagedoctors} />
     </Layout>
   );
 }

app/component/Pagination.js

@@ -1,27 +1,30 @@
-import { Pagination as PaginationMUI } from "@mui/material";
+import { Pagination as PaginationMUI, useMediaQuery, useTheme } from "@mui/material";
+
+function Pagination({ page, totalPages, onPageChange}) {
+  const theme=useTheme()
+  const isSmall=useMediaQuery(theme.breakpoints.down("sm"))
+  const handleChange = (event, value) => {
+    onPageChange(event, value); 
+  };
+    const count = totalPages||1
 
-function Pagination({ page, setPage, list, itemsPerPage }) {
-  const handleChange = (_, value) => setPage(value);
-  const count =
-    list && itemsPerPage ? Math.ceil(list.length / itemsPerPage) : 20;
 
   return (
     <PaginationMUI
       count={count}
       page={page || 1}
-      onChange={setPage && handleChange}
+      onChange={handleChange}
       color="primary"
-      className={count < 2 && "!hidden"}
+      size={isSmall ? "small" : "medium"}
       sx={{
-        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
+        "& .MuiPaginationItem-root": {
           color: "#616161",
           fontSize: "16px",
           fontWeight: "500",
         },
-        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
+        "& .MuiPaginationItem-root.Mui-selected": {
-          {
+          color: "#F8F8FF",
-            color: "#F8F8FF",
+        },
-          },
         "& .MuiSvgIcon-root": {
           rotate: "180deg !important",
         },

components/clinic/components/doctors/List.js

@@ -1,16 +1,52 @@
 import ItemDoctor from "@/app/component/ItemDoctor";
 import Pagination from "@/app/component/Pagination";
+import { QueryForDoctorsClinicReq } from "@/helper";
+import { request } from "@/services/response";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
-function List({ doctors }) {
+function List({
+  doctors,
+  setPage,
+  limit,
+  page,
+  filter,
+  setDoctors,
+  totalPages,
+  slug,
+}) {
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const changePage = async (_, num) => {
+    setLoading(true);
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set("page", num);
+    router.push(`/clinic/${slug}?${searchParams.toString()}`);
+
+    setPage(num);
+
+    let params = {
+      ...QueryForDoctorsClinicReq(filter),
+      current: num,
+      limit,
+    };
+    const doctors = await getClinicDoctors(slug, params);
+    setDoctors(doctors);
+  };
+  const doctorList = Array.isArray(doctors?.data) ? doctors.data : doctors;
   return (
     <>
       <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
-        {doctors?.map((doctor) => (
+        {doctorList?.map((doctor) => (
           <ItemDoctor key={doctor.id} doctor={doctor} />
         ))}
       </ul>
       <div className="mt-[56px] flex justify-center">
-        <Pagination list={doctors} itemsPerPage={12} />
+        <Pagination
+          totalPages={totalPages}
+          page={page}
+          onPageChange={changePage}
+        />
       </div>
     </>
   );

components/clinic/components/doctors/head/index.js

@@ -1,5 +1,5 @@
 "use client ";
-import { useState } from "react";
+
 import SearchBar from "./search";
 import SortList from "./sortlist";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -8,9 +8,9 @@ import { QueryForClinicDoctorFilter, QueryForDoctorsClinicReq } from "@/helper";
 import { getClinicDoctors } from "@/services/clinicApi";
 
 
-function Head({ setDoctors, slug, filter, setFilter }) {
+function Head({ setDoctors, slug, filter, setFilter,setPage,setTotalPage }) {
   const searchParams = useSearchParams();
-  const [page, setPage] = useState(1);
+
   const router = useRouter();
 
   const fieldName = searchParams.get("specialty");
@@ -63,8 +63,10 @@ function Head({ setDoctors, slug, filter, setFilter }) {
     }
 
     params.page = 1;
-    params.limit = 12;
+    params.limit =50;
-    setPage(1);
+    setTotalPage(data?.pages?.total_pages)
+    
+    setPage(data?.pages?.current);
      const doctors = await getClinicDoctors(slug, params);
      setDoctors(doctors);
  
@@ -73,6 +75,7 @@ function Head({ setDoctors, slug, filter, setFilter }) {
   return (
     <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
       <SearchBar
+        slug={slug}
         filter={filter}
         sendReq={sendReq}
         setFilter={setFilter}

components/clinic/components/doctors/head/modal/DeleteAllButton.js

@@ -1,16 +1,16 @@
 import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
 import { Button, CircularProgress } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { clearFilterParams } from "@/helper";
+import { clearDoctorClinicParams, clearFilterParams } from "@/helper";
 import { useState } from "react";
 
-function DeleteAllButton({ filter, sendReq, setFilter, handleClose }) {
+function DeleteAllButton({slug, filter, sendReq, setFilter, handleClose }) {
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
   const resetFilter = () => {
     setLoading(true);
-    clearFilterParams(router, [
+    clearDoctorClinicParams(router,slug, [
       "category",
       "specialty",
       "active",

components/clinic/components/doctors/head/modal/FilterModal.js

@@ -8,6 +8,7 @@ import ButtonApply from "./ButtonApply";
 import DeleteAllButton from "./DeleteAllButton";
 
 function FilterModal({
+  slug,
   filter,
   sendReq,
   children,
@@ -36,6 +37,7 @@ function FilterModal({
         >
           <div>
             <DeleteAllButton
+              slug={slug}
               filter={filter}
               sendReq={sendReq}
               setFilter={setFilter}

components/clinic/components/doctors/head/search/index.js

@@ -5,7 +5,7 @@ import SendReq from "./SendReq";
 import SearchField from "./SearchField";
 import FilterModal from "../modal/FilterModal";
 
-function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
+function SearchBar({ slug,filter, sendReq, setFilter, updateData, setDataInURL }) {
   return (
     <ButtonGroup
       variant="contained"
@@ -14,6 +14,7 @@ function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
         !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
       <FilterModal
+        slug={slug}
         filter={filter}
         sendReq={sendReq}
         setFilter={setFilter}

components/clinic/components/doctors/index.js

@@ -1,23 +1,38 @@
 "use client";
 
-import { searchOnList } from "@/helper";
 import { useState } from "react";
 import List from "./List";
 import Head from "./head";
-import { useSearchParams } from "next/navigation";
+import page from "@/app/panel/(layout)/turns/page";
+
+function Doctors({ slug, doctors, data, pages }) {
+  const [page, setPage] = useState(pages?.current || 1);
+
+  const [totalPage, setTotalPage] = useState(pages?.total_pages);
 
-function Doctors({slug , doctors }) {
-  const searchParams =useSearchParams()
-  const fieldName = searchParams.get("specialty");
   const [filter, setFilter] = useState({});
-    const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
+  const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
-    
 
   return (
     <div className="opacity-page">
-      <Head  setDoctors={setFilteredSpecialties} slug={slug } filter={filter}
+      <Head
-        setFilter={setFilter}/>
+        setDoctors={setFilteredSpecialties}
-      <List doctors={filteredSpecialties} setDoctors={setFilteredSpecialties} />
+        slug={slug}
+        filter={filter}
+        setFilter={setFilter}
+        setPage={setPage}
+        setTotalPage={setTotalPage}
+      />
+      <List
+        slug={slug}
+        totalPages={totalPage}
+        filter={filter}
+        doctors={filteredSpecialties}
+        setDoctors={setFilteredSpecialties}
+        page={page}
+        limit={50}
+        setPage={setPage}
+      />
     </div>
   );
 }

components/clinic/index.js

@@ -9,14 +9,15 @@ import Tabs from "@/app/component/Tabs";
 
 const listTab = ["درباره کلینیک", "اطلاعات تماس", "پزشک ها"];
 
-function ClinicPage({ data, doctors,slug }) {
+function ClinicPage({ data, doctors,slug ,pages}) {
   const [value, setValue] = useState(0);
   const handleChange = (_, newValue) => setValue(newValue);
+  
 
   const Components = [
     <About data={data} />,
     <Contact data={data} />,
-    <Doctors doctors={doctors} slug={slug} />,
+    <Doctors data={data} doctors={doctors} slug={slug} pages={pages} />,
   ];
 
   return (

helper/index.js

@@ -153,7 +153,15 @@ export function clearFilterParams(router, listRemove) {
 
   router.push(newUrl);
 }
-
+export function clearDoctorClinicParams(router,slug,listRemove){
+  const currentParams=new URLSearchParams(window.location.search);
+  const clinicslug=slug;
+  const keysToRemove=listRemove;
+  keysToRemove.forEach((key)=>currentParams.delete(key));
+  const queryString=currentParams.toString();
+  const newUrl=queryString? `/clinic/${clinicslug}?${queryString}`:`/clinic/${clinicslug}`;
+  router.push(newUrl)
+}
 export const filterList = (data) => {
   const parentList = specialties.filter((item) => !item.parent);
   const childrenList = specialties.filter((item) => item.parent);

services/clinicApi.js

@@ -8,8 +8,6 @@ export async function getClinicDoctors(slug, params = {}) {
     const query = new URLSearchParams(params).toString();
     const finalUrl = `${baseUrl}/api/v1/clinic/doctor-list/${slug}?${query}`;
 
-    console.log("Final API URL:", finalUrl);
-
     const response = await fetch(finalUrl, { method: "GET" });
 
     if (!response.ok) {
@@ -18,7 +16,6 @@ export async function getClinicDoctors(slug, params = {}) {
     }
 
     const json = await response.json();
-    console.log("✅ raw API result:", json);
 
     const doctorsList = json?.data || json || [];
     return Array.isArray(doctorsList) ? doctorsList : [];