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

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">
-      <p className="text-[#525252] dark:text-[#A1A1A1] text-[20px] font-bold">
+    <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-[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>