handle limit page dashboard & change header profile user & get data from api in page clinics & clinic item and doctor item

app/clinic/[slug]/page.js

@@ -1,10 +1,18 @@
 import ClinicPage from "@/components/clinic";
 import Layout from "@/components/layout/StLayout";
-import clinics from "@/data/clinics.json";
+import axios from "axios";
-import doctors from "@/data/doctors.json";
 
-function Blog({ params: { slug } }) {
+async function Clinic({ params: { slug } }) {
-  const clinic = clinics.find((item) => item.id === +slug);
+  const reqClinics = await axios.get(
+    `https://back-dev.clinic-pro.ir/api/v1/clinic/${slug}`
+  );
+
+  const reqDoctors = await axios.get(
+    "https://back-dev.clinic-pro.ir/api/v1/doctors"
+  );
+
+  const clinic = reqClinics.data;
+  const doctors = reqDoctors.data.$data;
 
   return (
     <Layout>
@@ -13,4 +21,4 @@ function Blog({ params: { slug } }) {
   );
 }
 
-export default Blog;
+export default Clinic;

app/component/ItemDoctor.js

@@ -68,24 +68,24 @@ function ItemDoctor({ doctor, loading }) {
         <p
           className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
                     ${
-                      doctor.free_turn
+                      Number(doctor.active)
                         ? "bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]"
                         : "bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]"
                     }`}
         >
-          {doctor.free_turn
+          {Number(doctor.active)
-            ? `اولین نوبت آزاد: ${doctor.free_turn}`
+            ? `اولین نوبت آزاد: ${Number(doctor.active)}`
             : "نوبت ندارد"}
         </p>
       </CustomLoading>
       {/* Arrow */}
-      <Link href={`/doctor/${doctor.id}`}>
+      <Link href={`/doctor/${doctor.uuid}`}>
         <Button
           variant="contained"
           className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
-                     ${!doctor.free_turn || (loading && "!bg-[#D7D7D7]")}
+                     ${!Number(doctor.active) || (loading && "!bg-[#D7D7D7]")}
                     `}
-          disabled={!doctor.free_turn || loading}
+          disabled={!Number(doctor.active) || loading}
         >
           <ArrowLeftD />
         </Button>

app/component/comment/index.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import ItemUser from "./ItemUser";
 
 function Comment({ data, loading }) {
-  const [list, setList] = useState(data.comments);
+  const [list, setList] = useState(data?.comments);
   const [update, setUpdate] = useState(false);
 
   return (
@@ -13,8 +13,8 @@ function Comment({ data, loading }) {
       }`}
     >
       {data &&
-        !!data.comments.length &&
+        !!data?.comments?.length &&
-        data.comments.map((item, idx) => (
+        data?.comments.map((item, idx) => (
           <ItemUser
             key={idx}
             list={list}

app/dashboard/page.js

@@ -2,23 +2,25 @@ import Content from "@/components/dashboard/Content";
 import { defineAbilitiesFor } from "@/lib/ability";
 import { getUser } from "@/lib/auth";
 import { getStateInfo } from "@/lib/getStateInfo";
-import axios from "axios";
+import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 export default async function Dashboard() {
   const { matchedCity } = getStateInfo();
   const user = await getUser();
   const ability = defineAbilitiesFor(user);
+  const cookieStore = cookies();
+  const token = cookieStore.get("access_token");
 
-  const response = await axios.get(
+  // const response = await axios.get(
-    "https://back-dev.clinic-pro.ir/api/v1/user-profile/e4fd81b4-31bc-4f9a-b300-da23026f9d79"
+  //   "https://back-dev.clinic-pro.ir/api/v1/user-profile/e4fd81b4-31bc-4f9a-b300-da23026f9d79"
-  );
+  // );
 
-  console.log(response);
+  // console.log(response);
 
   if (!ability.can("access", "Dashboard")) {
     return redirect("/");
   }
 
-  return <Content matchedCity={matchedCity} />;
+  return <Content matchedCity={matchedCity} logged={token} />;
 }

app/doctor/[slug]/page.js

@@ -1,9 +1,12 @@
 import DoctorPage from "@/components/doctor";
 import Layout from "@/components/layout/StLayout";
-import doctors from "@/data/doctors.json";
+import axios from "axios";
 
-function Doctor({ params: { slug } }) {
+async function Doctor({ params: { slug } }) {
-  const doctor = doctors.find((item) => item.id === +slug);
+  const response = await axios.get(
+    `https://back-dev.clinic-pro.ir/api/v1/doctor/${slug}`
+  );
+  const doctor = response.data;
 
   return (
     <Layout>

app/doctors/page.js

@@ -1,13 +1,21 @@
 import DoctorsPage from "@/components/doctors";
 import Layout from "@/components/layout/StLayout";
 import { getStateInfo } from "@/lib/getStateInfo";
+import axios from "axios";
 
-function Doctors({ searchParams }) {
+async function Doctors({ searchParams }) {
   const { matchedCity, matchedState } = getStateInfo();
 
+  const response = await axios.get(
+    "https://back-dev.clinic-pro.ir/api/v1/doctors"
+  );
+
+  const doctors = response.data.$data;
+
   return (
     <Layout>
       <DoctorsPage
+        list={doctors}
         params={searchParams}
         matchedCity={matchedCity}
         matchedState={matchedState}

components/clinic/components/about/ListBime.js

@@ -27,7 +27,7 @@ function ListBime({ data, loading }) {
         ref={list}
         className="flex overflow-auto hidden-scroll mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]"
       >
-        {data.list_bime.map((item, idx) => (
+        {data?.list_bime?.map((item, idx) => (
           <CustomLoading width={156} height={110} loading={loading}>
             <li
               key={idx}

components/clinic/components/about/Services.js

@@ -9,7 +9,7 @@ function Services({ data, loading }) {
     gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
     gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
     >
-      {data.specialties.map((item, idx) => (
+      {data?.specialties?.map((item, idx) => (
         <li key={idx} className="flex items-start justify-start gap-2">
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />

components/clinic/components/about/Specialties.js

@@ -9,7 +9,7 @@ function Specialties({ data, loading }) {
         gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
         gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
     >
-      {data.specialties.map((item, idx) => (
+      {data?.specialties?.map((item, idx) => (
         <li key={idx} className="flex items-start justify-start gap-2">
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />

components/clinic/components/about/images/Images.js

@@ -15,7 +15,7 @@ function Images({ data, loading }) {
         <CustomLoading loading={loading} width={600} height={400}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[0]}
+            src={data?.images_clinic && !!data?.images_clinic.length && data?.images_clinic[0] || ""}
             alt="img clinic"
             height={432}
             width={600}

components/clinic/components/about/images/List.js

@@ -8,7 +8,12 @@ function List({ data, loading }) {
         <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[1]}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[1]) ||
+              ""
+            }
             alt="img clinic"
             height={204}
             width={288}
@@ -19,7 +24,12 @@ function List({ data, loading }) {
         <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[2]}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[2]) ||
+              ""
+            }
             alt="img clinic"
             height={204}
             width={288}
@@ -30,7 +40,12 @@ function List({ data, loading }) {
         <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[3]}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[3]) ||
+              ""
+            }
             alt="img clinic"
             height={204}
             width={288}
@@ -41,7 +56,12 @@ function List({ data, loading }) {
         <CustomLoading loading={loading} width="full" height={190}>
           <Image
             className="rounded-[8px] overflow-hidden"
-            src={data.images_clinic[4]}
+            src={
+              (data?.images_clinic &&
+                !!data?.images_clinic.length &&
+                data?.images_clinic[4]) ||
+              ""
+            }
             alt="img clinic"
             height={204}
             width={288}

components/clinic/components/about/images/Slider.js

@@ -4,20 +4,22 @@ import Image from "next/image";
 function Slider({ data, loading }) {
   return (
     <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
-      {[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
+      {data &&
-        idx !== 0 ? (
+        data.images_clinic &&
-          <CustomLoading width={90} height={90} loading={loading}>
+        [...data?.images_clinic, ...data?.images_clinic]?.map((item, idx) =>
-            <Image
+          idx !== 0 ? (
-              key={idx}
+            <CustomLoading width={90} height={90} loading={loading}>
-              src={item}
+              <Image
-              width={90}
+                key={idx}
-              height={90}
+                src={item}
-              alt="image clinic"
+                width={90}
-              className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
+                height={90}
-            />
+                alt="image clinic"
-          </CustomLoading>
+                className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
-        ) : undefined,
+              />
-      )}
+            </CustomLoading>
+          ) : undefined
+        )}
     </ul>
   );
 }

components/clinic/components/about/index.js

@@ -33,7 +33,7 @@ function About({ data, loading }) {
                             : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
                         }
                     `}
-              dangerouslySetInnerHTML={{ __html: data.caption }}
+              dangerouslySetInnerHTML={{ __html: data?.caption }}
             ></p>
           </MultilineLoading>
           <Button

components/clinics/list/ItemClinic.js

@@ -52,7 +52,7 @@ function ItemClinic({ data }) {
       </div>
 
       {/* Arrow */}
-      <Link href={`/clinic/${data.id}`}>
+      <Link href={`/clinic/${data.uuid}`}>
         <Button className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit">
           <ArrowLeftD />
         </Button>

components/dashboard/Content.js

@@ -6,7 +6,7 @@ import userData from "@/data/userData.json";
 import DashboardPage from "@/components/dashboard";
 import UserAccountPage from "./userAccount";
 
-function Content({ matchedCity }) {
+function Content({ matchedCity, logged }) {
   const [value, setValue] = useState(0);
   const [isOpenSide, setIsOpenSide] = useState(false);
   const [isTurnsDetails, setIsTurnsDetails] = useState(false);
@@ -14,8 +14,9 @@ function Content({ matchedCity }) {
   return (
     <DashboardPage
       value={value}
+      logged={logged}
       setValue={setValue}
-      user={userData.data}  
+      user={userData.data}
       isOpenSide={isOpenSide}
       matchedCity={matchedCity}
       setIsOpenSide={setIsOpenSide}

components/dashboard/index.js

@@ -10,11 +10,13 @@ function DashboardPage({
   isOpenSide,
   setIsOpenSide,
   matchedCity,
+  logged,
 }) {
   return (
     <Layout
       user={user}
       value={value}
+      logged={logged}
       title="داشبورد"
       name="dashboard"
       isSidebar={true}

components/dashboard/userAccount/components/Head.js

@@ -1,7 +1,7 @@
 function Head({ text, children }) {
   return (
-    <div className="w-full flex mb-[40px] items-center justify-between">
+    <div className="w-full flex mb-[40px] flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
-      <p className="text-[#525252] dark:text-[#A1A1A1] text-[20px] font-bold">
+      <p className="text-[#525252] dark:text-[#A1A1A1] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
         {text}
       </p>
       <div className="flex items-center justify-end gap-4">{children}</div>

components/dashboard/userAccount/components/UpdateBtn.js

@@ -5,7 +5,8 @@ function UpdateBtn() {
   return (
     <Button
       variant="outlined"
-      className="!border-[#5559CE] !border-[2px] !flex !items-center !justify-center !gap-2 !text-[14px] md:!text-[14px] !font-medium"
+      className="!border-[#5559CE] !border-[2px] !flex !items-center !justify-center !gap-2 !text-[14px] !font-medium
+      !py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px] lg:!px-[36px] !mr-0 md:!mr-4"
     >
       <UpdateList />
       آپدیت کردن

components/dashboard/userAccount/content/HeadTab.js

@@ -47,7 +47,7 @@ function HeadTab({
               handleChange={handleChange}
             />
           </div>
-          <div className="mt-[22px] px-0 md:px-[24px]">{components[tab]}</div>
+          <div className="my-[22px] px-0 md:px-[24px]">{components[tab]}</div>
         </>
       )}
     </div>

components/dashboard/userAccount/content/index.js

@@ -1,134 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import profileData from "@/data/profile_other.json";
-
-import ArrowRightD from "@/components/icons/ArrowRightD";
-import { Button } from "@mui/material";
-import DownloadD from "@/components/icons/DownloadD";
-import Disease from "../detailUser/disease";
-import Allergies from "../detailUser/allergies";
-import Medications from "../detailUser/medications";
-import Surgeries from "../detailUser/surgeries";
-import FamilyHistory from "../detailUser/familyHistory";
-import Relatives from "../detailUser/relatives";
-import HeadTab from "./HeadTab";
-
-import DetailUser from "../detailUser/information";
-import Turns from "../sidebars/turns";
-import Transactions from "../sidebars/transactions";
-import Comments from "../sidebars/comments";
-import Messages from "../sidebars/messages";
-import NotfoundDashboard from "../NotfoundDashboard";
-
-const listTab = [
-  "بیماری‌ها",
-  "آلرژی‌ها",
-  "داروهای مصرفی",
-  "جراحی‌ها",
-  "سابقه خانوادگی بیماری",
-  "بستگان",
-];
-
-function ContentTabs({
-  user,
-  value,
-  isTurnsDetails,
-  setIsTurnsDetails,
-  setValue,
-  setIsOpenSide,
-}) {
-  const [tab, setTab] = useState(0);
-  const [data, setData] = useState(profileData[0]);
-
-  const handleChange = (_, newValue) => setTab(newValue);
-  const changeData = (action, name, id, payload) => {
-    const newData = {
-      ...data,
-      [name]: [...data[name]],
-    };
-
-    switch (action) {
-      case "update":
-        newData[name][id] = payload;
-        break;
-
-      case "add":
-        newData[name].push(payload);
-        break;
-
-      case "delete":
-        newData[name].splice(id, 1);
-        break;
-
-      default:
-        console.warn(`Unknown action: ${action}`);
-        return;
-    }
-    setData(newData);
-  };
-
-  const components = [
-    // <Disease data={data} changeData={changeData} />,
-    // <Allergies data={data} changeData={changeData} />,
-    // <Medications data={data} changeData={changeData} />,
-    // <Surgeries data={data} changeData={changeData} />,
-    // <FamilyHistory data={data} changeData={changeData} />,
-    // <Relatives data={data} changeData={changeData} />,
-
-    <DetailUser
-      user={user}
-      isTurnsDetails={isTurnsDetails}
-      setIsTurnsDetails={setIsTurnsDetails}
-    />,
-    <Turns user={user} loading={false} setIsTurnsDetails={setIsTurnsDetails} />,
-    <Transactions user={user} loading={false} />,
-    <Comments user={user} loading={false} />,
-    <Messages user={user} loading={false} />,
-    <NotfoundDashboard />,
-  ];
-
-  return (
-    <div
-      className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px] 
-      shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-      bg-transparent md:bg-[#FFF]"
-    >
-      <div className="w-full flex items-center justify-between">
-        <Button
-          className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
-          onClick={() =>
-            isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)
-          }
-          variant="text"
-        >
-          <ArrowRightD />
-          <p className="text-[#525252] text-[14px] font-bold">
-            {isTurnsDetails ? "جزئیات نوبت " : listTab[value]}
-          </p>
-        </Button>
-        {value === 1 && isTurnsDetails ? (
-          <Button
-            className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
-            variant="text"
-          >
-            <DownloadD />
-            دانلود اطلاعات نوبت
-          </Button>
-        ) : undefined}
-      </div>
-      <div className="mt-[22px] px-0 md:px-[24px]">{components[value]}</div>
-      {/* <HeadTab
-        tab={tab}
-        user={user}
-        listTab={listTab}
-        components={components}
-        handleChange={handleChange}
-        isTurnsDetails={isTurnsDetails}
-        setIsTurnsDetails={setIsTurnsDetails}
-      /> */}
-    </div>
-  );
-}
-
-export default ContentTabs;

components/dashboard/userAccount/detailUser/allergies/modal/index.js

@@ -4,6 +4,7 @@ import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
 import Content from "./Content";
 import { useState } from "react";
+import CloseModalD from "@/components/icons/CloseModalD";
 
 function ModalAddAlergie({ open, setOpen, changeData }) {
   const contentItem = {
@@ -45,6 +46,9 @@ function ModalAddAlergie({ open, setOpen, changeData }) {
               <p className="text-[#3B3B3B] text-[20px] font-bold">
                 اضافه کردن آلرژی
               </p>
+            <Button onClick={handleClose} className="!p-1" variant="text">
+              <CloseModalD />
+            </Button>
             </div>
             <Content setData={setNewItem} />
           </div>

components/dashboard/userAccount/detailUser/familyHistory/modal/index.js

@@ -4,6 +4,7 @@ import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
 import Content from "./Content";
 import { useState } from "react";
+import CloseModalD from "@/components/icons/CloseModalD";
 
 function ModalAddHistory({ open, setOpen, changeData }) {
   const contentItem = {
@@ -39,6 +40,9 @@ function ModalAddHistory({ open, setOpen, changeData }) {
               <p className="text-[#3B3B3B] text-[20px] font-bold">
                 اضافه کردن سابقه خانوادگی بیماری
               </p>
+              <Button onClick={handleClose} className="!p-1" variant="text">
+                <CloseModalD />
+              </Button>
             </div>
             <Content setData={setNewItem} />
           </div>

components/dashboard/userAccount/detailUser/medications/modal/index.js

@@ -4,6 +4,7 @@ import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
 import { useState } from "react";
 import Content from "./Content";
+import CloseModalD from "@/components/icons/CloseModalD";
 
 function ModalAddMedications({ open, setOpen, changeData }) {
   const contentItem = {
@@ -41,6 +42,9 @@ function ModalAddMedications({ open, setOpen, changeData }) {
               <p className="text-[#3B3B3B] text-[20px] font-bold">
                 اضافه کردن دارو های مصرفی
               </p>
+              <Button onClick={handleClose} className="!p-1" variant="text">
+                <CloseModalD />
+              </Button>
             </div>
             <Content setData={setNewItem} />
           </div>

components/dashboard/userAccount/detailUser/relatives/modal/index.js

@@ -4,6 +4,7 @@ import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
 import Content from "./Content";
 import { useState } from "react";
+import CloseModalD from "@/components/icons/CloseModalD";
 
 function ModalAddRelatives({ open, setOpen, changeData }) {
   const contentItem = {
@@ -51,6 +52,9 @@ function ModalAddRelatives({ open, setOpen, changeData }) {
               <p className="text-[#3B3B3B] text-[20px] font-bold">
                 اضافه کردن بستگان
               </p>
+              <Button onClick={handleClose} className="!p-1" variant="text">
+                <CloseModalD />
+              </Button>
             </div>
             <Content setData={setNewItem} />
           </div>

components/dashboard/userAccount/detailUser/surgeries/modal/index.js

@@ -4,6 +4,7 @@ import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
 import Content from "./Content";
 import { useState } from "react";
+import CloseModalD from "@/components/icons/CloseModalD";
 
 function ModalAddSurgeries({ open, setOpen, changeData }) {
   const contentItem = {
@@ -41,6 +42,9 @@ function ModalAddSurgeries({ open, setOpen, changeData }) {
               <p className="text-[#3B3B3B] text-[20px] font-bold">
                 اضافه کردن جراحی
               </p>
+              <Button onClick={handleClose} className="!p-1" variant="text">
+                <CloseModalD />
+              </Button>
             </div>
             <Content setData={setNewItem} />
           </div>

components/dashboard/userAccount/index.js

@@ -1,3 +1,4 @@
+import { Button } from "@mui/material";
 import DetailUser from "./detailUser";
 import Head from "./Head";
 import NotfoundDashboard from "./NotfoundDashboard";
@@ -7,6 +8,17 @@ import Comments from "./sidebars/comments";
 import Messages from "./sidebars/messages";
 import Transactions from "./sidebars/transactions";
 import Turns from "./sidebars/turns";
+import DownloadD from "@/components/icons/DownloadD";
+import ArrowRightD from "@/components/icons/ArrowRightD";
+
+const listTab = [
+  "حساب کاربری",
+  "نوبت های من",
+  "تراکنش های من",
+  "نظرات من",
+  "پیام ها",
+  "خروج",
+];
 
 function UserAccountPage({
   user,
@@ -37,6 +49,29 @@ function UserAccountPage({
       ) : (
         <>
           <Head user={user} />
+          <div className="w-full flex items-center justify-between">
+            <Button
+              className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
+              onClick={() =>
+                isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)
+              }
+              variant="text"
+            >
+              <ArrowRightD />
+              <p className="text-[#525252] text-[14px] font-bold">
+                {isTurnsDetails ? "جزئیات نوبت " : listTab[value]}
+              </p>
+            </Button>
+            {value === 1 && isTurnsDetails ? (
+              <Button
+                className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
+                variant="text"
+              >
+                <DownloadD />
+                دانلود اطلاعات نوبت
+              </Button>
+            ) : undefined}
+          </div>
           <div className=" mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
             {sidebars[value]}
           </div>

components/doctor/appointmentList/ItemAppointment.js

@@ -17,17 +17,17 @@ function ItemAppointment({ turn, doctor, loading }) {
       <span className="block w-full h-px bg-[#EFEFEF] my-4"></span>
       <div className="flex items-center justify-start gap-3">
         <CircularLoading width={56} height={56} loading={loading}>
-          <Image src={doctor.img} width={56} height={56} alt="doctor" />
+          <Image src={doctor?.img} width={56} height={56} alt="doctor" />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
           <TextLoading width={60} height={15} loading={loading}>
             <p className="text-[#3B3B3B] text-[14px] font-bold">
-              {doctor.name}
+              {doctor?.name}
             </p>
           </TextLoading>
           <TextLoading width={65} height={15} loading={loading}>
             <p className="text-[#525252] text-[14px] font-medium">
-              تخصص: {doctor.expertise}
+              تخصص: {doctor?.expertise}
             </p>
           </TextLoading>
         </div>

components/doctor/detailDoctor/Title.js

@@ -15,7 +15,7 @@ function Title({ doctor, loading }) {
                     w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
                     h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
                 "
-          src={doctor.img}
+          src={doctor?.img}
           alt="img-doctor"
           height={164}
           width={164}
@@ -24,18 +24,18 @@ function Title({ doctor, loading }) {
       <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
         <TextLoading loading={loading} width={90} height={20}>
           <h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
-            {doctor.name}
+            {doctor?.title}
           </h1>
         </TextLoading>
         <TextLoading loading={loading} width={100} height={20}>
           <h3 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
-            تخصص: {doctor.expertise}
+            تخصص: {doctor?.expertise}
           </h3>
         </TextLoading>
         <div className="flex items-center justify-start gap-11">
           <TextLoading loading={loading} width={60} height={20}>
             <p className="text-[#525252] text-[16px] font-medium">
-              {doctor.experience} سال تجربه
+              {doctor?.experience} سال تجربه
             </p>
           </TextLoading>
           <div className="flex items-center gap-1">
@@ -44,7 +44,7 @@ function Title({ doctor, loading }) {
             </div>
             <TextLoading loading={loading} width={120} height={20}>
               <p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">
-                کد نظام پزشکی: {doctor.medical_system_code}
+                کد نظام پزشکی: {doctor?.medical_system_code}
               </p>
             </TextLoading>
           </div>
@@ -54,13 +54,13 @@ function Title({ doctor, loading }) {
             <div className="flex p-1 gap-0.5 items-start justify-center">
               <StarDI />
               <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
-                امتیاز: {doctor.point}
+                امتیاز: {doctor?.point}
               </p>
             </div>
             <div className="flex p-1 items-start gap-0.5">
               <LikeDI />
               <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
-                {doctor.satisfaction}% رضایت کاربران
+                {doctor?.satisfaction}% رضایت کاربران
               </p>
             </div>
           </div>

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -28,7 +28,7 @@ function AboutDcotor({ doctor, loading }) {
                         }
                     `}
           >
-            {doctor.detail}
+            {doctor?.detail}
           </p>
           <Button
             className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
@@ -44,7 +44,7 @@ function AboutDcotor({ doctor, loading }) {
           تخصص ها
         </p>
         <ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4">
-          {doctor.specialties.map((item, idx) => (
+          {doctor?.specialties?.map((item, idx) => (
             <li key={idx} className="flex items-center justify-start gap-1">
               <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
               <TextLoading loading={loading} width={70} height={18}>

components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js

@@ -8,7 +8,7 @@ function ProgressAll({ doctor, loading }) {
       <CircularLoading loading={loading} width={120} height={120}>
         <CircularProgress
           variant="determinate"
-          value={doctor.total_user_satisfaction}
+          value={doctor?.total_user_satisfaction}
           sx={{
             "& .MuiCircularProgress-circle": {
               stroke: "#05BA58",
@@ -28,7 +28,7 @@ function ProgressAll({ doctor, loading }) {
             رضایت کاربران
           </p>
           <p className="text-[#3B3B3B]">
-            {numberToArStyle(doctor.total_user_satisfaction)}%
+            {numberToArStyle(doctor?.total_user_satisfaction)}%
           </p>
         </div>
       </CircularLoading>

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -5,7 +5,6 @@ import LikeDI from "@/components/icons/LikeDI";
 import ProgressDetail from "@/app/component/ProfressDetail";
 import TextLoading from "@/app/component/loading/Text";
 import CustomLoading from "@/app/component/loading/Custom";
-import CircularLoading from "@/app/component/loading/Circular";
 
 function Chart({ doctor, loading }) {
   return (
@@ -18,10 +17,10 @@ function Chart({ doctor, loading }) {
       <TextLoading loading={loading} width={130} height={20}>
         <div className="flex items-center justify-start gap-2.5">
           <p className="text-[#616161] text-[14px] font-medium">
-            امتیاز کلی کاربران: {doctor.overall_score} از 5
+            امتیاز کلی کاربران: {doctor?.overall_score} از 5
           </p>
           <p className="text-[#7E7E7E] text-[14px] font-normal">
-            (از مجموع {doctor.comments.length} نظر)
+            (از مجموع {doctor?.comments?.length} نظر)
           </p>
         </div>
       </TextLoading>
@@ -41,13 +40,13 @@ function Chart({ doctor, loading }) {
           <div className="flex p-1 gap-0.5 items-start justify-center">
             <StarDI />
             <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
-              امتیاز: {doctor.point}
+              امتیاز: {doctor?.point}
             </p>
           </div>
           <div className="flex p-1 items-start gap-0.5">
             <LikeDI />
             <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
-              {doctor.satisfaction}% رضایت کاربران
+              {doctor?.satisfaction}% رضایت کاربران
             </p>
           </div>
         </CustomLoading>
@@ -58,7 +57,7 @@ function Chart({ doctor, loading }) {
             loading ? "lg:w-full" : "lg:w-fit"
           }`}
         >
-          {doctor.progress_detail.map((item, idx) => (
+          {doctor?.progress_detail?.map((item, idx) => (
             <TextLoading width="full" key={idx} height={20} loading={loading}>
               <ProgressDetail data={item} />
             </TextLoading>

components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js

@@ -48,7 +48,7 @@ function ModalAnswer({ doctor }) {
             }}
           />
           <ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
-            {doctor.progress_detail.map((item, idx) => (
+            {doctor?.progress_detail?.map((item, idx) => (
               <ProgressChange data={item} key={idx} />
             ))}
           </ul>
@@ -59,7 +59,7 @@ function ModalAnswer({ doctor }) {
               multiline={true}
               title="نظر خود را بنویسید..."
             />
-            <Link href={`/booking/${doctor.id}`} className="!mr-auto">
+            <Link href={`/booking/${doctor?.id}`} className="!mr-auto">
               <Button
                 variant="contained"
                 className="!py-2.5 !px-4 gap-1 !text-[14px] !font-medium !mt-[32px] !shadownon"

components/doctor/detailDoctor/cards/locations/index.js

@@ -8,11 +8,11 @@ function Locations({ doctor, loading }) {
         موقعیت مکانی{" "}
       </p>
       <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
-        {doctor.locations.map((item, idx) => (
+        {doctor?.locations?.map((item, idx) => (
           <CustomLoading key={idx} loading={loading} width="full" height={40}>
             <li className="w-full">
               <Item data={item} />
-              {doctor.locations.length > idx + 1 && (
+              {doctor?.locations.length > idx + 1 && (
                 <span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
               )}
             </li>

components/doctor/index.js

@@ -1,29 +1,18 @@
-"use client";
-
-import { useEffect, useState } from "react";
 import AppointmentList from "./appointmentList";
 import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
 
 function DoctorPage({ doctor }) {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
   return (
     <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
       <div className="flex items-center justify-between">
-        <CustomLoading loading={loading} width={180} height={25}>
+        <CustomLoading loading={false} width={180} height={25}>
           <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
             <h2 className="text-[#9B9B9B] text-nowrap">
-              متخصص {doctor.expertise} {" >"}
+              متخصص {doctor?.expertise} {" >"}
             </h2>
-            <p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
+            <p className="text-[#525252] text-nowrap mr-1">{doctor?.title}</p>
           </div>
         </CustomLoading>
         <div className="flex lg:hidden">
@@ -31,8 +20,8 @@ function DoctorPage({ doctor }) {
         </div>
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">
-        <DetailDoctor doctor={doctor} loading={loading} />
+        <DetailDoctor doctor={doctor} loading={false} />
-        <AppointmentList doctor={doctor} loading={loading} />
+        <AppointmentList doctor={doctor} loading={false} />
       </div>
     </div>
   );

components/doctor/poster/Services.js

@@ -9,7 +9,7 @@ function Services({ data }) {
         <p className="text-[#E7EEF6] text-[20px] font-semibold">خدمات:</p>
       </div>
       <ul className="flex flex-col justify-start items-start gap-[16px] mt-[16px] font-normal ">
-        {data.specialties.map((item, idx) => (
+        {data?.specialties?.map((item, idx) => (
           <li key={idx} className="flex items-center justify-start gap-[4px]">
             <CircleOrangeSm />
             <p className="text-[16px] font-normal text-[#E7EEF6]">{item}</p>

components/doctors/index.js

@@ -11,7 +11,7 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 // Data
 import specialties from "@/data/specialties.json";
 
-function DoctorsPage({ params, matchedCity, matchedState }) {
+function DoctorsPage({ params, matchedCity, matchedState, list }) {
   const [loading, setLoading] = useState(true);
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState({
@@ -65,7 +65,7 @@ function DoctorsPage({ params, matchedCity, matchedState }) {
           <SortList data={data} setData={setData} />
         </div>
       </div>
-      <ListDoctors loading={loading} />
+      <ListDoctors loading={loading} list={list} />
     </div>
   );
 }

components/doctors/listDoctors/index.js

@@ -2,11 +2,11 @@ import doctors from "@/data/doctors.json";
 import Pagination from "@/app/component/Pagination";
 import ItemDoctor from "@/app/component/ItemDoctor";
 
-function ListDoctors({ loading }) {
+function ListDoctors({ loading, list }) {
   return (
     <>
       <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px] gap-[24px]">
-        {doctors.map((doctor) => (
+        {list.map((doctor) => (
           <ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
         ))}
       </ul>

components/layout/StLayout.js

@@ -1,16 +1,19 @@
 import { getStateInfo } from "@/lib/getStateInfo";
 import Footer from "./footer";
 import Header from "./header";
+import { cookies } from "next/headers";
 
 function StLayout({ children, name }) {
   const { matchedCity } = getStateInfo();
+  const cookieStore = cookies();
+  const token = cookieStore.get("access_token");
 
   return (
     <div>
       <main className="w-full min-h-screen">
         <header className="w-full sticky bg-[#FFF] !z-[70] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] mt-[12px] sm:mt-[21px] md:mt-[30px] lg:mt-[40px] top-0 right-1/2">
           <div className="w-full padding-responsive">
-            <Header matchedCity={matchedCity} name={name} />
+            <Header matchedCity={matchedCity} name={name} logged={token} />
           </div>
         </header>
         <section className="opacity-page -mt-[calc(48px_+_12px)] sm:-mt-[calc(56px_+_21px)] md:-mt-[calc(64px_+_30px)] lg:-mt-[calc(80px_+_40px)]">

components/layout/header/Content.js

@@ -10,7 +10,7 @@ import BgGray from "./list/col/BgGray";
 import UserLogin from "@/components/icons/UserLogin";
 import { useState } from "react";
 
-function Content({ matchedCity, name }) {
+function Content({ matchedCity, name, logged }) {
   const [isActive, setIsActive] = useState(false);
 
   return (
@@ -33,20 +33,23 @@ function Content({ matchedCity, name }) {
         </div>
       </div>
       <Row name={name} />
-      <Link href="/login">
+      {logged ? (
-        <Button className="!hidden lg:!flex" variant="outlined" color="primary">
+        <Link href="/dashboard">
-          ورود | ثبت نام
+          <Button
-        </Button>
+            className={`!flex !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
-        <Button
+            variant="text"
-          className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
+            color="primary"
-          variant="text"
+          >
-          color="primary"
-        >
-          <div className="flex lg:hidden">
             <UserLogin />
-          </div>
+          </Button>
-        </Button>
+        </Link>
-      </Link>
+      ) : (
+        <Link href="/login">
+          <Button variant="outlined" color="primary">
+            ورود | ثبت نام
+          </Button>
+        </Link>
+      )}
     </div>
   );
 }

components/layout/header/index.js

@@ -1,9 +1,9 @@
 import Content from "./Content";
 
-function Header({ matchedCity, name }) {
+function Header({ matchedCity, name, logged }) {
   return (
     <div className="bg-[#FFF] rounded-lg w-full mx-auto">
-      <Content matchedCity={matchedCity} name={name} />
+      <Content matchedCity={matchedCity} name={name} logged={logged} />
     </div>
   );
 }

components/layout/index.js

@@ -14,6 +14,7 @@ function Layout({
   user,
   value,
   setValue,
+  logged,
   matchedCity,
 }) {
   return (
@@ -24,7 +25,7 @@ function Layout({
       >
         <header className="w-full sticky bg-[#FFF] !z-[70] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] mt-[12px] sm:mt-[21px] md:mt-[30px] lg:mt-[40px] top-0 right-1/2">
           <div className="w-full padding-responsive">
-            <Header name={name} matchedCity={matchedCity} />
+            <Header name={name} matchedCity={matchedCity} logged={logged} />
           </div>
         </header>
         <section

components/layout/sidebar/ModalLogout.js

@@ -2,11 +2,13 @@ import { styleDefault } from "@/mui";
 import { Box, Button, Modal } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
 import { removeToken } from "@/utils";
+import { useRouter } from "next/navigation";
 
 function ModalLogout({ open, handleClose }) {
+  const router = useRouter();
   const logout = () => {
     removeToken();
-    window.location.pathname = "/login";
+    router.replace("/login");
     handleClose();
   };
 

components/register/verificationPage/SendReq.js

@@ -1,5 +1,4 @@
 import { Button } from "@mui/material";
-import { useRouter } from "next/navigation";
 import { request } from "@/services/response";
 import Cookies from "js-cookie";
 
@@ -12,8 +11,6 @@ function SendReq({
   setIsError,
   uuid,
 }) {
-  const router = useRouter();
-
   const handleSetCookie = (response) => {
     const accessTokenExpires = new Date();
     accessTokenExpires.setSeconds(
@@ -50,7 +47,7 @@ function SendReq({
       .then((response) => {
         setLoading(false);
         if (response.access_token) {
-          router.replace("/");
+          window.location.pathname = "/";
           handleSetCookie(response);
         }
       })

helper/index.js

@@ -2,7 +2,7 @@ import moment from "jalali-moment";
 import { toast } from "react-toastify";
 import specialties from "@/data/specialties.json";
 
-export const numberToArStyle = (num) => num.toLocaleString("ar-AE");
+export const numberToArStyle = (num) => num?.toLocaleString("ar-AE") || "";
 
 export const isActiveURL = (link, name) => link === name;
 

utils/index.js

@@ -1,5 +1,8 @@
 import Cookies from "js-cookie";
 
-const removeToken = () => Cookies.remove("token", { path: "/" });
+const removeToken = () => {
+  Cookies.remove("access_token", { path: "/" });
+  Cookies.remove("refresh_token", { path: "/" });
+};
 
 export { removeToken };