update design and request pages dashboards & doctors & doctor item & clinics & clinic item and layout

app/blog/[slug]/page.js

@@ -1,19 +1,19 @@
-import axios from "axios";
 import BlogPage from "@/components/blog";
 import Layout from "@/components/layout/StLayout";
+import { fetchReq } from "@/lib/ability";
 
 async function Blog({ params: { slug } }) {
-  const blog = await axios.get(
+  const blog = await fetchReq(
     `https://back-dev.clinic-pro.ir/api/v1/blog/${slug}`
   );
-  const blogs = await axios.get("https://back-dev.clinic-pro.ir/api/v1/blogs");
+  const blogs = await fetchReq("https://back-dev.clinic-pro.ir/api/v1/blogs");
 
-  const resBlog = blog.data;
+  const resBlog = blog;
-  const resBlogs = blogs.data;
+  const resBlogs = blogs;
 
   return (
     <Layout>
-      <BlogPage blog={resBlog} blogs={resBlogs} />
+      <BlogPage blog={resBlog} blogs={resBlogs.blogs} />
     </Layout>
   );
 }

app/blogs/page.js

@@ -1,12 +1,12 @@
 import BlogsPage from "@/components/blogs";
 import Layout from "@/components/layout/StLayout";
-import axios from "axios";
+import { fetchReq } from "@/lib/ability";
 
 export default async function Blogs() {
-  const response = await axios.get(
+  const response = await fetchReq(
     "https://back-dev.clinic-pro.ir/api/v1/blogs"
   );
-  const blogs = response.data.blogs;
+  const blogs = response.blogs;
 
   return (
     <Layout name="/blogs">

app/clinic/[slug]/page.js

@@ -1,18 +1,18 @@
 import ClinicPage from "@/components/clinic";
 import Layout from "@/components/layout/StLayout";
-import axios from "axios";
+import { fetchReq } from "@/lib/ability";
 
 async function Clinic({ params: { slug } }) {
-  const reqClinics = await axios.get(
+  const reqClinics = await fetchReq(
     `https://back-dev.clinic-pro.ir/api/v1/clinic/${slug}`
   );
 
-  const reqDoctors = await axios.get(
+  const reqDoctors = await fetchReq(
     "https://back-dev.clinic-pro.ir/api/v1/doctors"
   );
 
-  const clinic = reqClinics.data;
+  const clinic = reqClinics;
-  const doctors = reqDoctors.data.$data;
+  const doctors = reqDoctors?.data || [];
 
   return (
     <Layout>

app/clinics/page.js

@@ -1,22 +1,20 @@
 // app/clinics/page.js
 import ClinicsPage from "@/components/clinics";
 import Layout from "@/components/layout/StLayout";
+import { fetchReq } from "@/lib/ability";
 import { getStateInfo } from "@/lib/getStateInfo";
-import axios from "axios";
 
 export default async function Clinics() {
   const { matchedCity, matchedState } = getStateInfo();
 
-  const response = await axios.get(
+  const clinics = await fetchReq(
-    "https://back-dev.clinic-pro.ir/api/v1/clinics?page=1&limit=10"
+    "https://back-dev.clinic-pro.ir/api/v1/clinics"
   );
 
-  const clinics = response.data.$data;
-
   return (
     <Layout name="/clinics">
       <ClinicsPage
-        clinics={clinics}
+        clinics={clinics && clinics.data}
         matchedCity={matchedCity}
         matchedState={matchedState}
       />

app/component/DetailProfile.js

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import ProfilePA from "@/components/icons/ProfilePA";
 import LogoutP from "@/components/icons/LogoutP";
-import SettingPA from "@/components/icons/SettingPA";
 import CardDA from "@/components/icons/CardDA";
 import { Button, Popover } from "@mui/material";
 import Link from "next/link";
@@ -15,6 +14,7 @@ function DetailProfile({ anchorEl, setAnchorEl }) {
 
   const open = Boolean(anchorEl);
   const id = open ? "simple-popover" : undefined;
+  
   return (
     <>
       <ModalLogout open={modal} handleClose={closeModal} />
@@ -39,22 +39,24 @@ function DetailProfile({ anchorEl, setAnchorEl }) {
               پروفایل من
             </Button>
           </Link>
-          <Button
+          <Link
-            fullWidth
+            href={{
-            variant="text"
+              pathname: "/dashboard",
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
+              query: {
+                sidebar: 2,
+              },
+            }}
+            className="w-full"
           >
-            <CardDA />
+            <Button
-            پرداخت ها
+              fullWidth
-          </Button>
+              variant="text"
-          <Button
+              className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
-            fullWidth
+            >
-            variant="text"
+              <CardDA />
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
+              تراکنش های من
-          >
+            </Button>
-            <SettingPA />
+          </Link>
-            تنظیمات
-          </Button>
           <Button
             fullWidth
             color="error"

app/component/EditField.js

@@ -20,9 +20,9 @@ function EditField({
       <TextField
         {...props}
         rows={multiline}
-        value={data?.value || ""}
         multiline={multiline}
         type={type || "text"}
+        value={data?.value || ""}
         placeholder={placeholder || ""}
         disabled={noDisable ? false : !data?.isEdit}
         className={`!w-full res-field-account dark:!bg-transparent ${

app/component/ModalLogout.js

@@ -3,13 +3,15 @@ import { Box, Button, Modal } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
 import { removeToken } from "@/utils";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 function ModalLogout({ open, handleClose }) {
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
   const logout = () => {
+    setLoading(true);
     removeToken();
     router.replace("/login");
-    handleClose();
   };
 
   return (
@@ -39,9 +41,10 @@ function ModalLogout({ open, handleClose }) {
             انصراف
           </Button>
           <Button
-            variant="contained"
             onClick={logout}
-            className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
+            loading={loading}
+            variant="contained"
+            className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
           >
             خروج
           </Button>

app/component/Tabs.js

@@ -7,7 +7,7 @@ function a11yProps(index) {
   };
 }
 
-function Tabs({ value, handleChange, listTab, isSm, style }) {
+function Tabs({ value, handleChange, listTab, inactives, isSm, style }) {
   return (
     <Box className="!border-none !w-full">
       <TabsMUI
@@ -24,6 +24,7 @@ function Tabs({ value, handleChange, listTab, isSm, style }) {
           <Tab
             key={idx}
             label={item}
+            disabled={inactives && inactives.includes(idx)}
             {...a11yProps(idx)}
             sx={{
               "&.MuiButtonBase-root": {

app/dashboard/page.js

@@ -1,27 +1,35 @@
 import Content from "@/components/dashboard/Content";
-import { defineAbilitiesFor } from "@/lib/ability";
+import { defineAbilitiesFor, fetchReq } from "@/lib/ability";
 import { getUser } from "@/lib/auth";
 import { getStateInfo } from "@/lib/getStateInfo";
 import axios from "axios";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 
-export default async function Dashboard() {
+export default async function Dashboard({ searchParams }) {
   const { matchedCity } = getStateInfo();
   const user = await getUser();
   const ability = defineAbilitiesFor(user);
   const cookieStore = cookies();
   const token = cookieStore.get("access_token");
-  const uuid = "9ef7c050-6e81-4aa2-8248-283a16635624";
+  const uuid = cookieStore.get("uuid");
-  const response = await axios.get(
+
-    `https://back-dev.clinic-pro.ir/api/v1/user-profile/9ef7c050-6e81-4aa2-8248-283a16635624`,
+  let dashboard = null;
-    {
+  try {
-      headers: {
+    const response = await fetchReq(
-        Authorization: `Bearer ${token.value}`,
+      `https://back-dev.clinic-pro.ir/api/v1/user-profile/${uuid}`,
-      },
+      {
-    }
+        headers: {
-  );
+          Authorization: `Bearer ${token}`,
-  const dashboard = response.data;
+        },
+      }
+    );
+
+    dashboard = response.data;
+  } catch (error) {
+    // console.error("problem with req:", error.message);
+    // return redirect("/unauthorized");
+  }
 
   if (!ability.can("access", "Dashboard")) {
     return redirect("/");
@@ -32,8 +40,9 @@ export default async function Dashboard() {
 
   return (
     <Content
-      logged={token}
+      logged={token.value}
       dataUser={dashboard}
+      params={searchParams}
       matchedCity={matchedCity}
       initialTurnsDetails={isMobile}
     />

app/doctors/page.js

@@ -6,11 +6,18 @@ import axios from "axios";
 async function Doctors({ searchParams }) {
   const { matchedCity, matchedState } = getStateInfo();
 
-  const response = await axios.get(
+  let doctors = null;
-    "https://back-dev.clinic-pro.ir/api/v1/doctors"
+  try {
-  );
+    const response = await axios.get(
+      "https://back-dev.clinic-pro.ir/api/v1/doctors"
+    );
+    console.log(response);
 
-  const doctors = response.data.$data;
+    doctors = response.data.$data;
+  } catch (error) {
+    // console.error("problem with req:", error.message);
+    // return redirect("/unauthorized");
+  }
 
   return (
     <Layout>

app/not-found.js

@@ -1,4 +1,4 @@
-import Layout from "@/components/layout";
+import Layout from "@/components/layout/StLayout";
 import NotFoundPage from "@/components/notFound";
 
 function NotFound() {

components/blog/detail/Caption.js

@@ -1,45 +1,33 @@
-import CustomLoading from "@/app/component/loading/Custom";
-import MultilineLoading from "@/app/component/loading/Multiline";
 import Image from "next/image";
 import React from "react";
 
-function Caption({ data, loading }) {
+function Caption({ data }) {
   return (
     <>
-      <CustomLoading loading={loading} width="full" height={500}>
+      <Image
-        <Image
+        className="rounded-[8px] overflow-hidden w-full"
-          className="rounded-[8px] overflow-hidden w-full"
+        src={data?.cover_first}
-          src={data?.cover_first}
+        alt="cover-blog"
-          alt="cover-blog"
+        height={570}
-          height={570}
+        width={808}
-          width={808}
+      />
+      <div>
+        <div
+          className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+          dangerouslySetInnerHTML={{ __html: "data?.caption" }}
         />
-      </CustomLoading>
-      <div className={loading ? "my-4" : ""}>
-        <MultilineLoading loading={loading} width="full" height={18} line={20}>
-          <div
-            className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-            dangerouslySetInnerHTML={{ __html: data?.caption }}
-          />
-        </MultilineLoading>
-      </div>
-      <CustomLoading loading={loading} width="full" height={500}>
-        <Image
-          className="rounded-[8px] overflow-hidden w-full"
-          src={data?.cover_second}
-          alt="cover-blog"
-          height={570}
-          width={808}
-        />
-      </CustomLoading>
-      <div className={loading ? "my-4" : ""}>
-        <MultilineLoading loading={loading} width="full" height={18} line={20}>
-          <div
-            className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-            dangerouslySetInnerHTML={{ __html: data?.caption }}
-          />
-        </MultilineLoading>
       </div>
+      <Image
+        className="rounded-[8px] overflow-hidden w-full"
+        src={data?.cover_second}
+        alt="cover-blog"
+        height={570}
+        width={808}
+      />
+      <div
+        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+        dangerouslySetInnerHTML={{ __html: "data?.caption" }}
+      />
     </>
   );
 }

components/blog/detail/SocialMedia.js

@@ -5,15 +5,16 @@ import WhatsappB from "@/components/icons/WhatsappB";
 
 const socials = [<WhatsappB />, <TelegramB />, <LinkedinB />];
 
-function SocialMedia({ loading }) {
+function SocialMedia() {
   return (
     <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
       {socials.map((item, idx) => (
-        <CircularLoading width={36} key={idx} height={36} loading={loading}>
+        <li
-          <li className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]">
+          key={idx}
-            {item}
+          className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
-          </li>
+        >
-        </CircularLoading>
+          {item}
+        </li>
       ))}
       <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
     </ul>

components/blog/detail/index.js

@@ -2,12 +2,12 @@ import Caption from "./Caption";
 import SocialMedia from "./SocialMedia";
 import CommentUser from "./commentUser";
 
-function Detail({ data, loading }) {
+function Detail({ data }) {
   return (
     <div className="w-full lg:w-[68%]">
-      <Caption data={data} loading={loading} />
+      <Caption data={data} />
-      <SocialMedia loading={loading} />
+      <SocialMedia />
-      <CommentUser data={data} loading={loading} />
+      <CommentUser data={data} loading={false} />
     </div>
   );
 }

components/blog/head/index.js

@@ -1,52 +1,38 @@
-import TextLoading from "@/app/component/loading/Text";
+function Head({ data }) {
-
-function Head({ data, loading }) {
   return (
     <div>
-      <TextLoading width={200} height={18} loading={loading}>
+      <div className="flex items-center justify-start gap-1">
-        <div className="flex items-center justify-start gap-1">
+        <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+          بلاگ {">"}
-            بلاگ {">"}
+        </p>
-          </p>
+        <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+          پوست و مو {">"}
-            پوست و مو {">"}
+        </p>
-          </p>
+        <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-          <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+          روش های خانگی محافظت از پوست در تابستان
-            روش های خانگی محافظت از پوست در تابستان
+        </p>
-          </p>
+      </div>
-        </div>
+      <div>
-      </TextLoading>
+        <h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
-      <div
+          روش های خانگی محافظت از پوست در تابستان
-        className={
+        </h1>
-          loading ? "mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" : ""
-        }
-      >
-        <TextLoading width={250} height={22} loading={loading}>
-          <h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
-            روش های خانگی محافظت از پوست در تابستان
-          </h1>
-        </TextLoading>
       </div>
       <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
         <div className="flex items-center justify-start gap-1">
           <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
             تاریخ انتشار:
           </p>
-          <TextLoading width={55} height={22} loading={loading}>
+          <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
-            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+            {data?.date_of_release}
-              {data?.date_of_release}
+          </p>
-            </p>
-          </TextLoading>
         </div>
         <div className="flex items-center justify-start gap-1">
           <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
             زمان مطالعه:
           </p>
-          <TextLoading width={55} height={22} loading={loading}>
+          <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
-            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+            {data?.time}
-              {data?.time}
+          </p>
-            </p>
-          </TextLoading>
         </div>
       </div>
     </div>

components/blog/index.js

@@ -1,25 +1,14 @@
-"use client";
-
-import { useEffect, useState } from "react";
 import Detail from "./detail";
 import Head from "./head";
 import RelatedContent from "./relatedContent";
 
-function BlogPage({ article, articles }) {
+function BlogPage({ blog, blogs }) {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
   return (
     <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
-      <Head data={article} loading={loading} />
+      <Head data={blog} />
       <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
-        <Detail data={article} loading={loading} />
+        <Detail data={blog} />
-        <RelatedContent data={articles} loading={loading} />
+        <RelatedContent data={blogs} />
       </div>
     </div>
   );

components/blog/relatedContent/index.js

@@ -10,9 +10,11 @@ function RelatedContent({ data, loading }) {
         <UnderlineLG />
       </AnimationTextHead>
       <ul className="flex w-full lg:w-fit flex-col justify-start items-start">
-        {data?.map((item, idx) => (
+        {data &&
-          <Item idx={idx} data={item} key={item.id} loading={loading} />
+          data.length &&
-        ))}
+          data?.map((item, idx) => (
+            <Item idx={idx} data={item} key={item.id} loading={loading} />
+          ))}
       </ul>
     </div>
   );

components/clinic/components/about/Services.js

@@ -21,7 +21,7 @@ function Services({ data }) {
             ${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
           `}
             >
-              {item}
+              {item.name}
             </h3>
           </TextLoading>
         </li>

components/clinic/components/about/Specialties.js

@@ -9,8 +9,8 @@ function Specialties({ data }) {
         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 && data.specialties && data?.specialties?.map((item, idx) => (
-        <li key={idx} className="flex items-start justify-start gap-2">
+        <li key={item.id} className="flex items-start justify-start gap-2">
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />
           </div>
@@ -21,7 +21,7 @@ function Specialties({ data }) {
                         ${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
                     `}
             >
-              {item}
+              {item.name}
             </h3>
           </TextLoading>
         </li>

components/clinic/components/about/index.js

@@ -14,7 +14,7 @@ function About({ data }) {
   return (
     <div className="opacity-page transition-all duration-500">
       <Images data={data} />
-      <ContentDetail head="کلینیک تخصصی و فوق تخصصی نیکان">
+      <ContentDetail head={data.title}>
         <div className="flex flex-col items-center justify-center">
           <MultilineLoading line={10} width="full" height={18}>
             <p
@@ -32,7 +32,7 @@ function About({ data }) {
             ></p>
           </MultilineLoading>
           <Button
-            className='!text-[#F17732] !text-[14px] !font-light !p-2'
+            className="!text-[#F17732] !text-[14px] !font-light !p-2"
             onClick={() => setIsMore(!isMore)}
             variant="text"
           >

components/clinics/list/ItemClinic.js

@@ -15,14 +15,14 @@ function ItemClinic({ data }) {
           <Image
             width={60}
             height={60}
-            src={data.clinic_logo.url || ""}
+            src={data.clinic_logo[0].url || ""}
             alt="img clinic"
           />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
           <TextLoading width={100} height={18}>
             <h3 className="text-[#3B3B3B] text-[14px] font-bold">
-              {data.label}
+              {data.title}
             </h3>
           </TextLoading>
           <TextLoading width={60} height={18}>

components/clinics/list/index.js

@@ -8,11 +8,7 @@ function List({ selected, clinics }) {
   return (
     <div className="padding-responsive pt-[20px]">
       <Pageguide list={listPage} />
-      {clinics.length === 0 ? (
+      {clinics && clinics.length ? (
-        <div className="text-center py-10 text-gray-500">
-          کلینیکی با این عنوان یافت نشد!
-        </div>
-      ) : (
         <ul
           className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] 
             gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
@@ -21,6 +17,10 @@ function List({ selected, clinics }) {
             <ItemClinic data={item} key={item.id} />
           ))}
         </ul>
+      ) : (
+        <div className="text-center py-10 text-gray-500">
+          کلینیکی با این عنوان یافت نشد!
+        </div>
       )}
       <div className="mt-[48px] flex justify-center">
         <Pagination list={clinics} itemsPerPage={12} />

components/dashboard/Content.js

@@ -6,11 +6,10 @@ import userData from "@/data/userData.json";
 import DashboardPage from "@/components/dashboard";
 import UserAccountPage from "./userAccount";
 
-function Content({ matchedCity, logged, initialIsOpenSide, dataUser }) {
+function Content({ matchedCity, params, logged, initialIsOpenSide, dataUser }) {
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(Number(params?.sidebar) || 0);
   const [isOpenSide, setIsOpenSide] = useState(initialIsOpenSide);
   const [isTurnsDetails, setIsTurnsDetails] = useState(false);
-  console.log(dataUser);
 
   return (
     <DashboardPage
@@ -27,9 +26,7 @@ function Content({ matchedCity, logged, initialIsOpenSide, dataUser }) {
       <UserAccountPage
         value={value}
         dataUser={dataUser}
-        setValue={setValue}
         user={userData.data}
-        isOpenSide={isOpenSide}
         setIsOpenSide={setIsOpenSide}
         isTurnsDetails={isTurnsDetails}
         setIsTurnsDetails={setIsTurnsDetails}

components/dashboard/userAccount/content/HeadTab.js

@@ -5,8 +5,8 @@ function HeadTab({
   tab,
   user,
   listTab,
+  inactives,
   components,
-  includeData,
   handleChange,
   isTurnsDetails,
   setIsTurnsDetails,
@@ -43,6 +43,7 @@ function HeadTab({
               color="#5559CE"
               listTab={listTab}
               handleChange={handleChange}
+              inactives={inactives}
             />
           </div>
           <div className="my-[22px] px-0 md:px-[24px]">{components[tab]}</div>

components/dashboard/userAccount/detailUser/disease/index.js

@@ -3,10 +3,19 @@ import TextLoading from "@/app/component/loading/Text";
 import { Switch, TableCell, TableRow } from "@mui/material";
 import Head from "@/components/dashboard/userAccount/components/Head";
 import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
+import { useState } from "react";
+import { dieses } from "../information/dieses";
 
-function Disease({ data, changeData }) {
+function Disease() {
   const tableHead = ["ردیف", "اسم", "وضعیت", ""];
+  const [data, setData] = useState(dieses);
   const centerTable = [0];
+  const changeData = (id, payload) => {
+    const updatedData = data.map((item, index) =>
+      index === id ? { ...item, status: payload } : item
+    );
+    setData(updatedData);
+  };
 
   return (
     <div className="opacity-page">
@@ -18,7 +27,7 @@ function Disease({ data, changeData }) {
         tableHead={tableHead}
         centerTable={centerTable}
       >
-        {data.disease.map((row, idx) => (
+        {data.map((row, idx) => (
           <TableRow
             key={idx}
             className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
@@ -41,9 +50,7 @@ function Disease({ data, changeData }) {
                 <Switch
                   defaultChecked={row.status === "true"}
                   onChange={(e) => {
-                    const newData = row;
+                    changeData(idx, JSON.stringify(e.target.checked));
-                    newData.status = JSON.stringify(e.target.checked);
-                    changeData("update", "disease", idx, newData);
                   }}
                 />
               </TextLoading>

components/dashboard/userAccount/detailUser/index.js

@@ -11,20 +11,19 @@ import Surgeries from "./surgeries";
 import FamilyHistory from "./familyHistory";
 import Relatives from "./relatives";
 
-const listTab = [
-  "اطلاعات عمومی",
-  "بیماری‌ها",
-  "آلرژی‌ها",
-  "داروهای مصرفی",
-  "جراحی‌ها",
-  "سابقه خانوادگی بیماری",
-  "بستگان",
-];
-
 function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
   const [tab, setTab] = useState(0);
   const [data, setData] = useState(profileData[0]);
-  const [includeData, setIncludeData] = useState(false);
+
+  const listTab = [
+    "اطلاعات عمومی",
+    "بیماری‌ها",
+    "آلرژی‌ها",
+    "داروهای مصرفی",
+    "جراحی‌ها",
+    "سابقه خانوادگی بیماری",
+    "بستگان",
+  ];
 
   const handleChange = (_, newValue) => setTab(newValue);
   const changeData = (action, name, id, payload) => {
@@ -60,7 +59,7 @@ function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
       isTurnsDetails={isTurnsDetails}
       setIsTurnsDetails={setIsTurnsDetails}
     />,
-    <Disease data={data} changeData={changeData} />,
+    <Disease data={data} />,
     <Allergies data={data} changeData={changeData} />,
     <Medications data={data} changeData={changeData} />,
     <Surgeries data={data} changeData={changeData} />,
@@ -74,10 +73,10 @@ function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
       user={user}
       listTab={listTab}
       components={components}
-      includeData={includeData}
       handleChange={handleChange}
       isTurnsDetails={isTurnsDetails}
       setIsTurnsDetails={setIsTurnsDetails}
+      inactives={dataUser ? [] : [1, 2, 3, 4, 5, 6]}
     />
   );
 }

components/dashboard/userAccount/detailUser/information/DateBirthday.js

@@ -25,7 +25,7 @@ function DateBirthday({ data, changeData }) {
         onClick={handleClick}
       >
         <p className="text-[#7E7E7E] text-[14px] font-normal cursor-pointer">
-          {data.value}
+          {data}
         </p>
         <Button className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1">
           <CalendarEdit />

components/dashboard/userAccount/detailUser/information/Field.js

@@ -0,0 +1,67 @@
+import EditGrayA from "@/components/icons/EditGrayA";
+import EditOrangeA from "@/components/icons/EditOrangeA";
+import { Button, TextField } from "@mui/material";
+
+function Field({
+  changeData,
+  multiline,
+  icon,
+  placeholder,
+  data,
+  name,
+  iconGray,
+  isTransparent,
+  type,
+  props,
+  disable,
+}) {
+  return (
+    <div className="relative w-full">
+      <TextField
+        {...props}
+        // value={data}
+        defaultValue={data}
+        disabled={disable}
+        type={type || "text"}
+        placeholder={placeholder || ""}
+        className={`!w-full res-field-account dark:!bg-transparent ${
+          isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
+        }`}
+        onChange={(e) => {
+          changeData(e.target.value, "value", name);
+        }}
+        sx={{
+          "& .MuiFormLabel-root": {
+            top: "-4px !important",
+          },
+          "& .MuiInputBase-input": { padding: "12.5px 14px" },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid #D7D7D7 !important",
+          },
+          "& .MuiInputBase-root": {
+            padding: "0 !important",
+            borderRadius: "8px !important",
+          },
+          ".Mui-focused": {
+            "& .MuiOutlinedInput-notchedOutline": {
+              border: "1px solid #5559CE !important",
+              transition: "0.5s all",
+            },
+          },
+          "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+            {
+              display: "none",
+            },
+        }}
+      />
+      <Button
+        className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
+                    ${multiline ? "!top-[24px]" : "!top-1/2"}`}
+      >
+        {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
+      </Button>
+    </div>
+  );
+}
+
+export default Field;

components/dashboard/userAccount/detailUser/information/Form.js

@@ -1,6 +1,6 @@
 import Content from "./Content";
-import EditField from "@/app/component/EditField";
 import DateBirthday from "./DateBirthday";
+import Field from "./Field";
 import {
   insurance,
   gender,
@@ -11,23 +11,24 @@ import {
 } from "./listSelector";
 import AutoSelector from "@/app/component/element/AutoSelector";
 
-function Form({ data, changeData, selected, updateSelect }) {
+function Form({ data, changeData, prevData }) {
-  const findVal = (list, name) => list.find((g) => g.id === selected[name]);
+  const findVal = (list, name) => data && list.find((g) => g.id === data[name]);
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
       <Content title="شماره موبایل" isConfirmed={true}>
-        <EditField
+        <Field
           isTransparent={true}
           iconGray={true}
           type="number"
           changeData={changeData}
-          data={data?.phone}
+          data={data?.work_phone}
-          name="phone"
+          disable={prevData}
+          name="work_phone"
         />
       </Content>
       <Content title="کد ملی" isConfirmed={false}>
-        <EditField
+        <Field
           isTransparent={true}
           iconGray={true}
           type="number"
@@ -37,7 +38,7 @@ function Form({ data, changeData, selected, updateSelect }) {
         />
       </Content>
       <Content title="نام و نام خانوادگی" isConfirmed={false}>
-        <EditField
+        <Field
           isTransparent={true}
           iconGray={true}
           changeData={changeData}
@@ -48,7 +49,7 @@ function Form({ data, changeData, selected, updateSelect }) {
       <Content title="جنسیت">
         <AutoSelector
           updateData={(name, data) =>
-            updateSelect(name, data === "زن" ? "female" : "male")
+            changeData(data === "زن" ? "female" : "male", "value", name)
           }
           value={findVal(gender, "gender")}
           label="جنسیت"
@@ -58,31 +59,31 @@ function Form({ data, changeData, selected, updateSelect }) {
       </Content>
       <Content title="تاریخ تولد">
         <DateBirthday
-          data={data?.date_of_birth}
+          data={data?.birthday}
           isConfirmed={false}
           changeData={changeData}
         />
       </Content>
       <Content title="نام پدر" isConfirmed={false}>
-        <EditField
+        <Field
           isTransparent={true}
           iconGray={true}
           changeData={changeData}
-          data={data?.father_name}
+          data={data?.fathers_name}
-          name="father_name"
+          name="fathers_name"
         />
       </Content>
       <Content title="نوع بیمه">
         <AutoSelector
-          updateData={updateSelect}
+          updateData={changeData}
-          value={findVal(insurance, "insurance")}
+          value={findVal(insurance, "basic_insurance")}
           label="نوع بیمه"
-          name="insurance"
+          name="basic_insurance"
           list={insurance}
         />
       </Content>
       <Content title="شماره بیمه" isConfirmed={false}>
-        <EditField
+        <Field
           isTransparent={true}
           iconGray={true}
           type="number"
@@ -94,18 +95,22 @@ function Form({ data, changeData, selected, updateSelect }) {
       <Content title="گروه خونی">
         <AutoSelector
           updateData={(name, value) =>
-            updateSelect(name, blood_group.find((g) => g.label === value).id)
+            changeData(
+              blood_group.find((g) => g.label === value).id,
+              "value",
+              name
+            )
           }
-          value={findVal(blood_group, "blood_group")}
+          value={findVal(blood_group, "blood_type")}
           label="گروه خونی"
-          name="blood_group"
+          name="blood_type"
           list={blood_group}
         />
       </Content>
       <Content title="وضعیت تاهل">
         <AutoSelector
           updateData={(name, value) =>
-            updateSelect(name, marital_status.find((g) => g.label === value).id)
+            changeData(value === "متاهل" ? "married" : "single", "value", name)
           }
           value={findVal(marital_status, "marital_status")}
           label="وضعیت تاهل"
@@ -114,7 +119,7 @@ function Form({ data, changeData, selected, updateSelect }) {
         />
       </Content>
       <Content title="تلفن منزل" isConfirmed={false}>
-        <EditField
+        <Field
           isTransparent={true}
           iconGray={true}
           type="number"
@@ -126,7 +131,11 @@ function Form({ data, changeData, selected, updateSelect }) {
       <Content title="تحصیلات">
         <AutoSelector
           updateData={(name, value) =>
-            updateSelect(name, education.find((g) => g.label === value).id)
+            changeData(
+              education.find((g) => g.label === value).id,
+              "value",
+              name
+            )
           }
           value={findVal(education, "education")}
           label="تحصیلات"
@@ -137,7 +146,7 @@ function Form({ data, changeData, selected, updateSelect }) {
       <Content title="شغل">
         <AutoSelector
           updateData={(name, value) =>
-            updateSelect(name, job.find((g) => g.label === value).id)
+            changeData(value === "آزاد" ? "azad" : "dolati", "value", name)
           }
           value={findVal(job, "job")}
           label="شغل"
@@ -146,7 +155,7 @@ function Form({ data, changeData, selected, updateSelect }) {
         />
       </Content>
       <Content title="تلفن محل کار" isConfirmed={false}>
-        <EditField
+        <Field
           isTransparent={true}
           type="number"
           iconGray={true}

components/dashboard/userAccount/detailUser/information/dieses.js

@@ -0,0 +1,152 @@
+export const dieses = [
+  {
+    id: 1,
+    name: "فشار خون",
+    status: "false",
+  },
+  {
+    id: 2,
+    name: "دیابت",
+    status: "true",
+  },
+  {
+    id: 3,
+    name: "آسم",
+    status: "false",
+  },
+  {
+    id: 4,
+    name: "بیماری قلبی عروقی",
+    status: "true",
+  },
+  {
+    id: 5,
+    name: "سرطان",
+    status: "true",
+  },
+  {
+    id: 6,
+    name: "آلزایمر",
+    status: "true",
+  },
+  {
+    id: 7,
+    name: "پارکینسون",
+    status: "false",
+  },
+  {
+    id: 8,
+    name: "بیماری کلیوی",
+    status: "true",
+  },
+  {
+    id: 9,
+    name: "بیماری کبدی",
+    status: "false",
+  },
+  {
+    id: 10,
+    name: "سکته مغزی",
+    status: "false",
+  },
+  {
+    id: 11,
+    name: "افسردگی",
+    status: "false",
+  },
+  {
+    id: 12,
+    name: "اضطراب مزمن",
+    status: "true",
+  },
+  {
+    id: 13,
+    name: "میگرن",
+    status: "false",
+  },
+  {
+    id: 14,
+    name: "کم‌کاری تیروئید",
+    status: "false",
+  },
+  {
+    id: 15,
+    name: "پرکاری تیروئید",
+    status: "true",
+  },
+  {
+    id: 16,
+    name: "سل",
+    status: "false",
+  },
+  {
+    id: 17,
+    name: "هپاتیت B",
+    status: "false",
+  },
+  {
+    id: 18,
+    name: "هپاتیت C",
+    status: "true",
+  },
+  {
+    id: 19,
+    name: "HIV / ایدز",
+    status: "false",
+  },
+  {
+    id: 20,
+    name: "COVID-19",
+    status: "true",
+  },
+  {
+    id: 21,
+    name: "لوپوس",
+    status: "true",
+  },
+  {
+    id: 22,
+    name: "ام‌اس (MS)",
+    status: "true",
+  },
+  {
+    id: 23,
+    name: "آرتریت روماتوئید",
+    status: "false",
+  },
+  {
+    id: 24,
+    name: "پسوریازیس",
+    status: "false",
+  },
+  {
+    id: 25,
+    name: "صرع",
+    status: "false",
+  },
+  {
+    id: 26,
+    name: "بیماری سلیاک",
+    status: "false",
+  },
+  {
+    id: 27,
+    name: "عدم تحمل لاکتوز",
+    status: "false",
+  },
+  {
+    id: 28,
+    name: "چربی خون بالا",
+    status: "false",
+  },
+  {
+    id: 29,
+    name: "کم‌خونی",
+    status: "false",
+  },
+  {
+    id: 30,
+    name: "هموفیلی",
+    status: "false",
+  },
+];

components/dashboard/userAccount/detailUser/information/index.js

@@ -2,59 +2,44 @@ import { useState } from "react";
 import Form from "./Form";
 import { Button } from "@mui/material";
 import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
+import { request } from "@/services/response";
 
 function Information({ user, dataUser }) {
   const [disable, setDisable] = useState(true);
-  const [data, setData] = useState({
+  const [loading, setLoading] = useState(false);
-    phone: { value: dataUser.work_phone, isEdit: true },
+  const [data, setData] = useState(dataUser || {});
-    national_code: { value: dataUser.national_code, isEdit: true },
-    name: { value: dataUser.name, isEdit: true },
-    date_of_birth: { value: dataUser.birthday, isEdit: true },
-    father_name: { value: dataUser.fathers_name, isEdit: true },
-    insurance_number: { value: dataUser.supplementary_insurance, isEdit: true },
-    home_phone: { value: dataUser.home_phone, isEdit: true },
-    work_phone: { value: user.work_phone, isEdit: true },
-  });
-  const [selected, setSelected] = useState({
-    gender: dataUser.gender,
-    blood_group: dataUser.blood_type,
-    insurance: dataUser.supplementary_insurance,
-    marital_status: dataUser.marital_status,
-    education: dataUser.education,
-    job: dataUser.job,
-  });
 
   const changeData = (value, type, name) => {
     disable && setDisable(false);
     setData({
       ...data,
-      [name]: {
+      [name]: value,
-        ...data[name],
-        [type]: value,
-      },
     });
   };
 
-  const updateSelect = (name, event) => {
+  const sendReq = () => {
-    disable && setDisable(false);
+    setLoading(true);
-    setSelected({ ...selected, [name]: event });
+    request[dataUser ? "patchUserProfile" : "postUserProfile"](data)
+      .then((res) => {
+        setLoading(false);
+      })
+      .catch((err) => {
+        setLoading(false);
+      });
   };
 
   return (
     <div className="opacity-page">
-      <Form
+      <Form data={data} changeData={changeData} prevData={dataUser} />
-        data={data}
-        changeData={changeData}
-        selected={selected}
-        updateSelect={updateSelect}
-      />
       <Button
         disabled={disable}
         variant="contained"
+        onClick={sendReq}
+        loading={loading}
         className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
-                 !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
+                 !rounded-[4px] !text-[14px] md:!text-[16px] !font-medium
                 !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]
-              ${disable ? "" : "!bg-[#5559CE]"}`}
+              `}
       >
         ثبت اطلاعات
         <ArrowLeftWhiteD />

components/dashboard/userAccount/index.js

@@ -26,8 +26,6 @@ function UserAccountPage({
   isTurnsDetails,
   setIsTurnsDetails,
   value,
-  setValue,
-  isOpenSide,
   setIsOpenSide,
   dataUser,
 }) {

components/doctors/listDoctors/index.js

@@ -5,11 +5,19 @@ import ItemDoctor from "@/app/component/ItemDoctor";
 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]">
+      <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
-        {list.map((doctor) => (
+        {list && list.length ? (
-          <ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
+          <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
-        ))}
+            {list?.map((doctor) => (
-      </ul>
+              <ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
+            ))}
+          </ul>
+        ) : (
+          <p className="text-center py-10 text-gray-500">
+            هیچ دکتری وجود ندارد!
+          </p>
+        )}
+      </div>
       <div className="mt-[56px] flex justify-center">
         <Pagination list={doctors} itemsPerPage={12} />
       </div>

helper/index.js

@@ -185,3 +185,12 @@ export function getCleanNumberValue(value, defaultValue = 0) {
 }
 
 export const changeNumToDefault = (num) => `09${num.replace(/\D/g, "")}`;
+
+export function hasDataChanged(previousData, newData) {
+  const oldDataString = JSON.stringify(
+    previousData,
+    Object.keys(previousData).sort()
+  );
+  const newDataString = JSON.stringify(newData, Object.keys(newData).sort());
+  return oldDataString !== newDataString;
+}

lib/ability.js

@@ -1,14 +1,28 @@
 import { AbilityBuilder, createMongoAbility } from "@casl/ability";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+const token = Cookies.get("access_token");
 
 export function defineAbilitiesFor(user) {
   const { can, cannot, build } = new AbilityBuilder(createMongoAbility);
 
   if (user) {
     can("access", "Dashboard");
-  }  else {
+  } else {
     // can("access", "Dashboard");
     cannot("access", "Dashboard");
   }
 
   return build();
 }
+
+export const fetchReq = async (url, headers) => {
+  try {
+    const response = await axios.get(url, headers);
+    return response.data;
+  } catch (error) {
+    console.error("fetchReq error:", error.message);
+    return null;
+  }
+};

next.config.js

@@ -7,6 +7,9 @@ const nextConfig = {
   experimental: {
     missingSuspenseWithCSRBailout: false,
   },
+  images: {
+    domains: ["back-dev.clinic-pro.ir"],
+  },
 };
 
 module.exports = nextConfig;

services/api.js

@@ -4,10 +4,11 @@ import "react-toastify/dist/ReactToastify.css";
 
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
 
-const token = Cookies.get("access");
+const token = Cookies.get("access_token");
 
 const api = axios.create({
   baseURL: BASE_URL,
+  "X-CSRF-Token": "",
   headers: {
     "Content-Type": "application/json",
     Authorization: token ? `Bearer ${token}` : "",

services/response.js

@@ -30,5 +30,7 @@ export const request = {
     });
   },
   getUserProfile: (uuid) => api.get(`/api/v1/user-profile/${uuid}`),
-  
+  postUserProfile: (data) => api.post("api/v1/user-profile", data),
+  patchUserProfile: (data, uuid) =>
+    api.patch(`api/v1/user-profile/${uuid}`, data),
 };