validation & change deisng sidebar dashboard & add menu to profile & handle menu item in profile & add api

components/dashboard/Content.js

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

components/dashboard/userAccount/content/HeadTab.js

@@ -5,18 +5,16 @@ function HeadTab({
   tab,
   user,
   listTab,
+  components,
+  includeData,
   handleChange,
   isTurnsDetails,
   setIsTurnsDetails,
-  components,
 }) {
   return (
     <div className="opacity-page">
       {isTurnsDetails ? (
-        <IsTurnsDetails
-          user={user}
-          setIsTurnsDetails={setIsTurnsDetails}
-        />
+        <IsTurnsDetails user={user} setIsTurnsDetails={setIsTurnsDetails} />
       ) : (
         <>
           <div className="!w-full">

components/dashboard/userAccount/detailUser/index.js

@@ -24,6 +24,7 @@ const listTab = [
 function DetailUser({ user, isTurnsDetails, setIsTurnsDetails }) {
   const [tab, setTab] = useState(0);
   const [data, setData] = useState(profileData[0]);
+  const [includeData, setIncludeData] = useState(false);
 
   const handleChange = (_, newValue) => setTab(newValue);
   const changeData = (action, name, id, payload) => {
@@ -72,6 +73,7 @@ function DetailUser({ user, isTurnsDetails, setIsTurnsDetails }) {
       user={user}
       listTab={listTab}
       components={components}
+      includeData={includeData}
       handleChange={handleChange}
       isTurnsDetails={isTurnsDetails}
       setIsTurnsDetails={setIsTurnsDetails}

components/dashboard/userAccount/index.js

@@ -10,6 +10,7 @@ import Transactions from "./sidebars/transactions";
 import Turns from "./sidebars/turns";
 import DownloadD from "@/components/icons/DownloadD";
 import ArrowRightD from "@/components/icons/ArrowRightD";
+import { useState } from "react";
 
 const listTab = [
   "حساب کاربری",

components/doctor/detailDoctor/Share.js

@@ -18,6 +18,7 @@ const listIcons = [
   { name: "تلگرام", icon: <TelegramBlueD /> },
   { name: "لینکدین", icon: <LinkedingBlueD /> },
   { name: "کپی لینک", icon: <CopyBlueD /> },
+  { name: "دانلود", icon: <CopyBlueD /> },
 ];
 
 function Share() {

components/doctor/index.js

@@ -2,6 +2,7 @@ import AppointmentList from "./appointmentList";
 import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
+import Poster from "./poster";
 
 function DoctorPage({ doctor }) {
   return (

components/doctor/poster/Address.js

@@ -8,7 +8,7 @@ function Address({ data }) {
         <p className="text-[#E7EEF6] text-[20px] font-semibold">آدرس:</p>
       </div>
       <p className="text-[#E7EEF6] text-[16px] !font-normal mt-[16px]">
-        {data.location}
+        {data?.location}
       </p>
     </div>
   );

components/doctor/poster/ImageProfile.js

@@ -3,7 +3,7 @@ import Image from "next/image";
 function ImageProfile({ data }) {
   return (
     <div className="bg-stroke-circle ml-[10px] mt-[57px] p-[9px] rounded-full overflow-hidden">
-      <Image src={data.img} width={173} height={173} alt="profile-user" />
+      <Image src={data?.img} width={173} height={173} alt="profile-user" />
     </div>
   );
 }

components/doctor/poster/Telefon.js

@@ -8,10 +8,10 @@ function Telefon({ data }) {
         <p className="text-[#E7EEF6] text-[20px] font-semibold">تلفن:</p>
       </div>
       <p className="text-[#E7EEF6] text-[16px] font-normal mt-[16px]">
-        {data.phone}
+        {data?.phone}
       </p>
       <p className="text-[#E7EEF6] text-[16px] font-normal mt-[12px]">
-        {data.phone} - {data.phone}
+        {data?.phone} - {data?.phone}
       </p>
     </div>
   );

components/doctor/poster/index.js

@@ -15,10 +15,10 @@ function Poster({ data }) {
           <p className="text-[#E7EEF6] text-[16px] font-bold">nobat724.com</p>
         </div>
         <p className="mt-[40px] text-[#E7EEF6] text-[20px] font-bold">
-          {data.name}
+          {data?.name}
         </p>
         <p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold">
-          تخصص: {data.expertise}
+          تخصص: {data?.expertise}
         </p>
         <Services data={data} />
         <Address data={data} />

components/layout/header/Content.js

@@ -7,8 +7,8 @@ import Row from "./list/Row";
 import Col from "./list/col";
 import ButtonMenu from "./list/col/ButtonMenu";
 import BgGray from "./list/col/BgGray";
-import UserLogin from "@/components/icons/UserLogin";
 import { useState } from "react";
+import ProfileUser from "./profile";
 
 function Content({ matchedCity, name, logged }) {
   const [isActive, setIsActive] = useState(false);
@@ -34,15 +34,7 @@ function Content({ matchedCity, name, logged }) {
       </div>
       <Row name={name} />
       {logged ? (
-        <Link href="/dashboard">
-          <Button
-            className={`!flex !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
-            variant="text"
-            color="primary"
-          >
-            <UserLogin />
-          </Button>
-        </Link>
+        <ProfileUser />
       ) : (
         <Link href="/login">
           <Button variant="outlined" color="primary">

components/layout/header/profile/index.js

@@ -0,0 +1,28 @@
+import DetailProfile from "@/app/component/DetailProfile";
+import UserLogin from "@/components/icons/UserLogin";
+import { removeToken } from "@/utils";
+import { Button } from "@mui/material";
+import { useState } from "react";
+
+function ProfileUser() {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  return (
+    <>
+      <Button
+        variant="text"
+        color="primary"
+        onClick={handleClick}
+        className={`!flex !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
+      >
+        <UserLogin />
+      </Button>
+      <DetailProfile anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
+    </>
+  );
+}
+
+export default ProfileUser;

components/layout/sidebar/List.js

@@ -9,7 +9,7 @@ import NotificationD from "@/components/icons/NotificationD";
 import { Button } from "@mui/material";
 import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
 import { useState } from "react";
-import ModalLogout from "./ModalLogout";
+import ModalLogout from "../../../app/component/ModalLogout";
 
 function List({
   value,

components/layout/sidebar/ModalLogout.js

@@ -1,54 +0,0 @@
-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();
-    router.replace("/login");
-    handleClose();
-  };
-
-  return (
-    <Modal open={open} onClose={handleClose}>
-      <Box
-        sx={styleDefault}
-        className="!w-fit dark:!bg-[#222433] sm-modal dark:!shadow-[0px_4px_25px_10px_#1F1D2B] !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
-      >
-        <div className="flex items-center justify-between w-full">
-          <p className="text-[#3B3B3B] text-[14px] dark:text-[#D7D8ED] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
-            خروج
-          </p>
-          <Button onClick={handleClose} className="!p-1" variant="text">
-            <CloseModalD />
-          </Button>
-        </div>
-        <span className="block h-px w-full dark:bg-[#343645] bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
-        <p className="text-[#525252] text-[12px] dark:text-[#A1A1A1] md:text-[14px] lg:text-[16px] font-normal">
-          آیا مطمئن هستید که می‌خواهید از حساب کاربری خود خارج شوید؟
-        </p>
-        <div className="flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
-          <Button
-            variant="outlined"
-            onClick={handleClose}
-            className="!py-[4px] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
-          >
-            انصراف
-          </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"
-          >
-            خروج
-          </Button>
-        </div>
-      </Box>
-    </Modal>
-  );
-}
-
-export default ModalLogout;

components/layoutPanel/header/MenuProfile.js

@@ -1,20 +1,13 @@
 import { useState } from "react";
-import { Button, Popover } from "@mui/material";
+import { Button } from "@mui/material";
 import ArrowBottomHD from "@/components/icons/ArrowBottomHD";
-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 Image from "next/image";
+import DetailProfile from "@/app/component/DetailProfile";
 
 function MenuProfile({ data }) {
   const [anchorEl, setAnchorEl] = useState(null);
 
   const handleClick = (event) => setAnchorEl(event.currentTarget);
-  const handleClose = () => setAnchorEl(null);
-
-  const open = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
 
   return (
     <>
@@ -49,59 +42,7 @@ function MenuProfile({ data }) {
           <ArrowBottomHD />
         </div>
       </Button>
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-      >
-        <div className="flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]">
-          <Button
-            fullWidth
-            variant="text"
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
-          >
-            <ProfilePA />
-            پروفایل من
-          </Button>
-          <Button
-            fullWidth
-            variant="text"
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
-          >
-            <CardDA />
-            پرداخت ها
-          </Button>
-          <Button
-            fullWidth
-            variant="text"
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
-          >
-            <SettingPA />
-            تنظیمات
-          </Button>
-          <Button
-            fullWidth
-            color="error"
-            variant="contained"
-            onClick={handleClose}
-            sx={{
-              "&.MuiButtonBase-root": {
-                paddingTop: "8px !important",
-                paddingBottom: "8px !important",
-              },
-            }}
-            className="!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]"
-          >
-            <LogoutP />
-            خروج
-          </Button>
-        </div>
-      </Popover>
+      <DetailProfile anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
     </>
   );
 }

components/layoutPanel/sidebar/index.js

@@ -3,7 +3,7 @@ import HeadMd from "./HeadMd";
 import HeadSm from "./HeadSm";
 import { Button } from "@mui/material";
 import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
-import ModalLogout from "@/components/layout/sidebar/ModalLogout";
+import ModalLogout from "@/app/component/ModalLogout";
 import { useState } from "react";
 
 function Sidebar({ active, setActive, open, setOpen }) {