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/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 />