round img of doctors && fix remove 'nobat724' value in city data for all pages && handle send req for filter clinics && filter list clinic for first time on load page && add component loading and handle it in page clinics

app/clinics/page.js

@@ -1,19 +1,52 @@
-// app/clinics/page.js
+import { fetchReq } from "@/lib/req";
 import ClinicsPage from "@/components/clinics";
 import Layout from "@/components/layout/StLayout";
-import { fetchReq } from "@/lib/req";
 import { getStateInfo } from "@/lib/getStateInfo";
+import { buildClinicParams } from "@/helper";
 
-export default async function Clinics() {
+export default async function Clinics({ searchParams }) {
   const { matchedCity, matchedState } = getStateInfo();
   const API_URL = process.env.NEXT_PUBLIC_API_URL;
+  const stateParams = searchParams.state;
+  const cityParams = searchParams.city;
 
-  const clinics = await fetchReq(`${API_URL}/api/v1/clinics`);
+  let clinics;
+  try {
+    // Params
+    let newSearchParams = searchParams;
+
+    // Conditional State
+    if (stateParams) newSearchParams.state = stateParams;
+    else if (matchedState) newSearchParams.state = matchedState.name;
+
+    // Conditional City
+    if (cityParams) newSearchParams.city = cityParams;
+    else if (matchedCity && matchedCity.id !== "600")
+      newSearchParams.city = matchedCity.name;
+
+    console.log("newSearchParams");
+    console.log(newSearchParams);
+
+    const params = {
+      ...buildClinicParams(newSearchParams),
+      page: 1,
+      limit: 12,
+    };
+    console.log("params");
+    console.log(params);
+
+    // Req
+    clinics = await fetchReq(`${API_URL}/api/v1/clinics`, {
+      params,
+    });
+  } catch (err) {
+    console.log(`Error fetching doctors: ${err}`);
+  }
 
   return (
     <Layout name="/clinics">
       <ClinicsPage
-        clinics={clinics && clinics.data}
+        clinics={clinics}
         matchedCity={matchedCity}
         matchedState={matchedState}
       />

app/component/ItemDoctor.js

@@ -37,7 +37,7 @@ function ItemDoctor({ doctor, doctors, setDoctors }) {
             height={72}
             alt="image-doctor"
             src={doctor?.img[0]?.url}
-            className="object-contain w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
+            className="object-contain rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
           />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">

app/component/PaginationContent.js

@@ -0,0 +1,31 @@
+import { Pagination } from "@mui/material";
+
+function PaginationContent({ page, pageDetail, changePage, limit = 12 }) {
+  const count = Math.ceil(pageDetail.totalRecords / limit);
+
+  return (
+    <Pagination
+      count={count}
+      page={page || 1}
+      onChange={changePage}
+      color="primary"
+      className={count < 2 && "!hidden"}
+      sx={{
+        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root": {
+          color: "#616161",
+          fontSize: "16px",
+          fontWeight: "500",
+        },
+        "& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected":
+          {
+            color: "#F8F8FF",
+          },
+        "& .MuiSvgIcon-root": {
+          rotate: "180deg !important",
+        },
+      }}
+    />
+  );
+}
+
+export default PaginationContent;

app/component/modalSearchCity/ButtonFilter.js

@@ -21,7 +21,8 @@ function ButtonFilter({ selected, setOpen }) {
           className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
                     md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
         >
-          {(selected.city !== "نوبت 724" ? selected.city : false) || "شهر"}
+          {(selected.city?.name !== "نوبت 724" ? selected.city?.name : false) ||
+            "شهر"}
         </p>
         <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
           <ArrowBottomH />

app/doctors/page.js

@@ -21,7 +21,7 @@ async function Doctors({ searchParams }) {
 
     // Conditional City
     if (cityParams) newSearchParams.city = cityParams;
-    else if (matchedCity && matchedCity.id !== "63")
+    else if (matchedCity && matchedCity.id !== "600")
       newSearchParams.city = matchedCity.name;
 
     const params = buildDoctorParams(newSearchParams);