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

2025-06-03 00:50:10 +03:30
parent 0217e5e67e
commit dafeebc54f
18 changed files with 142 additions and 95 deletions
@@ -0,0 +1,80 @@
+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";
+import ModalLogout from "./ModalLogout";
+
+function DetailProfile({ anchorEl, setAnchorEl }) {
+  const [modal, setModal] = useState(false);
+  const handleClose = () => setAnchorEl(null);
+  const closeModal = () => setModal(false);
+  const openModal = () => setModal(true);
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+  return (
+    <>
+      <ModalLogout open={modal} handleClose={closeModal} />
+      <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]">
+          <Link href="/dashboard" className="w-full">
+            <Button
+              fullWidth
+              variant="text"
+              className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
+            >
+              <ProfilePA />
+              پروفایل من
+            </Button>
+          </Link>
+          <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={openModal}
+            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>
+    </>
+  );
+}
+
+export default DetailProfile;
@@ -0,0 +1,54 @@
+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;