124 lines
4.4 KiB
JavaScript
124 lines
4.4 KiB
JavaScript
"use client";
|
|
|
|
import CardD from "@/components/icons/CardD";
|
|
import LogoutD from "@/components/icons/LogoutD";
|
|
import CalndarD from "@/components/icons/CalndarD";
|
|
import MessageD from "@/components/icons/MessageD";
|
|
import ProfileD from "@/components/icons/ProfileD";
|
|
import NotificationD from "@/components/icons/NotificationD";
|
|
import { Button } from "@mui/material";
|
|
import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
|
|
import { useState, useEffect } from "react";
|
|
import ModalLogout from "../../../app/component/ModalLogout";
|
|
import Cookies from "js-cookie";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
function List({
|
|
value,
|
|
setValue,
|
|
isTurnsDetails,
|
|
setIsTurnsDetails,
|
|
setIsOpenSide,
|
|
}) {
|
|
const router = useRouter();
|
|
const [hasRepresentationRole, setHasRepresentationRole] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const userInfo = Cookies.get("userInfo");
|
|
if (userInfo) {
|
|
try {
|
|
const parsedUserInfo = JSON.parse(userInfo);
|
|
const roles = parsedUserInfo?.roles || {};
|
|
const hasRole = Object.values(roles).includes("representation");
|
|
setHasRepresentationRole(hasRole);
|
|
} catch (error) {
|
|
console.error("Error parsing userInfo:", error);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
const baseListMenu = [
|
|
{ name: "حساب کاربری", icon: <ProfileD active={value === 0} />, action: "tab" },
|
|
{ name: "نوبت های من", icon: <CalndarD active={value === 1} />, action: "tab" },
|
|
{ name: "تراکنش های من", icon: <CardD active={value === 2} />, action: "tab" },
|
|
];
|
|
|
|
// اگر نقش representation دارد، داشبورد نماینده را اضافه کن
|
|
if (hasRepresentationRole) {
|
|
baseListMenu.push({
|
|
name: "داشبورد نماینده",
|
|
icon: <ProfileD active={value === 3} />,
|
|
action: "navigate",
|
|
path: "/panel/dashboard"
|
|
});
|
|
}
|
|
|
|
const listMenu = [
|
|
...baseListMenu,
|
|
{ name: "نظرات من", icon: <MessageD active={value === hasRepresentationRole ? 4 : 3} />, action: "tab" },
|
|
{ name: "پیام ها", icon: <NotificationD active={value === hasRepresentationRole ? 5 : 4} />, action: "tab" },
|
|
{ name: "خروج", icon: <LogoutD active={value === hasRepresentationRole ? 6 : 5} />, action: "logout" },
|
|
];
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const handleOpen = () => setOpen(true);
|
|
const handleClose = () => setOpen(false);
|
|
|
|
const handleMenuClick = (item, idx) => {
|
|
setIsOpenSide(false);
|
|
!isTurnsDetails && setIsTurnsDetails(false);
|
|
|
|
if (item.action === "logout") {
|
|
handleOpen();
|
|
} else if (item.action === "navigate") {
|
|
router.push(item.path);
|
|
} else {
|
|
setValue(idx);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ul className="flex flex-col items-start justify-start w-full">
|
|
<ModalLogout open={open} handleClose={handleClose} />
|
|
{listMenu.map((item, idx) => (
|
|
<li className="w-full" key={idx}>
|
|
<Button
|
|
className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
|
transition-all duration-300 before:transition-all before:duration-300
|
|
!relative before:!absolute before:!right-0 !flex !justify-between !items-center
|
|
before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
|
|
${value === idx
|
|
? "before:md:!bg-[#5559CE]"
|
|
: "before:!bg-transparent"
|
|
}`}
|
|
onClick={() => handleMenuClick(item, idx)}
|
|
>
|
|
<div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">
|
|
<div className="w-[24px] h-[24px]">{item.icon}</div>
|
|
<h2
|
|
className={`
|
|
text-[16px] transition-all duration-500
|
|
${value === idx
|
|
? "text-[#5559CE] font-bold"
|
|
: "text-[#7E7E7E] font-normal"
|
|
}
|
|
`}
|
|
>
|
|
{item.name}
|
|
</h2>
|
|
</div>
|
|
<div className="flex md:hidden">
|
|
<ArrowLeftSideBar active={value === idx} />
|
|
</div>
|
|
</Button>
|
|
{listMenu.length > idx + 1 && (
|
|
<span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default List;
|