refactor: enhance user role handling in List and ability definitions

components/layout/sidebar/List.js

@@ -8,8 +8,10 @@ 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 } from "react";
+import { useState, useEffect } from "react";
 import ModalLogout from "../../../app/component/ModalLogout";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
 
 function List({
   value,
@@ -18,19 +20,63 @@ function List({
   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 = [
-    { name: "حساب کاربری", icon: <ProfileD active={value === 0} /> },
+    ...baseListMenu,
-    { name: "نوبت های من", icon: <CalndarD active={value === 1} /> },
+    { name: "نظرات من", icon: <MessageD active={value === hasRepresentationRole ? 4 : 3} />, action: "tab" },
-    { name: "تراکنش های من", icon: <CardD active={value === 2} /> },
+    { name: "پیام ها", icon: <NotificationD active={value === hasRepresentationRole ? 5 : 4} />, action: "tab" },
-    { name: "نظرات من", icon: <MessageD active={value === 3} /> },
+    { name: "خروج", icon: <LogoutD active={value === hasRepresentationRole ? 6 : 5} />, action: "logout" },
-    { name: "پیام ها", icon: <NotificationD active={value === 4} /> },
-    { name: "خروج", icon: <LogoutD active={value === 5} /> },
   ];
 
   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} />
@@ -41,28 +87,21 @@ function List({
                             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
-                              value === idx
+                ? "before:md:!bg-[#5559CE]"
-                                ? "before:md:!bg-[#5559CE]"
+                : "before:!bg-transparent"
-                                : "before:!bg-transparent"
+              }`}
-                            }`}
+            onClick={() => handleMenuClick(item, idx)}
-            onClick={() => {
-              setIsOpenSide(false);
-              !isTurnsDetails && setIsTurnsDetails(false);
-              if (idx === 5) handleOpen();
-              else setValue(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
-                                  value === idx
+                    ? "text-[#5559CE] font-bold"
-                                    ? "text-[#5559CE] font-bold"
+                    : "text-[#7E7E7E] font-normal"
-                                    : "text-[#7E7E7E] font-normal"
+                  }
-                                }
                             `}
               >
                 {item.name}

lib/ability.js

@@ -8,7 +8,7 @@ export function defineAbilitiesFor(user) {
     cannot("access", "Login");
     const parsedData = JSON.parse(user.value);
 
-    if (parsedData.roles.find((item) => item === "representation")) {
+    if (parsedData.roles && Object.values(parsedData.roles).includes("representation")) {
       can("access", "Panel");
     }
   } else {