refactor: enhance dark mode support across components and improve user role handling in DetailProfile

app/component/DetailProfile.js

@@ -1,20 +1,37 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import ProfilePA from "@/components/icons/ProfilePA";
 import LogoutP from "@/components/icons/LogoutP";
 import CardDA from "@/components/icons/CardDA";
 import { Button, Popover } from "@mui/material";
 import Link from "next/link";
 import ModalLogout from "./ModalLogout";
+import Cookies from "js-cookie";
 
 function DetailProfile({ anchorEl, setAnchorEl }) {
   const [modal, setModal] = useState(false);
+  const [hasRepresentationRole, setHasRepresentationRole] = useState(false);
+
   const handleClose = () => setAnchorEl(null);
   const closeModal = () => setModal(false);
   const openModal = () => setModal(true);
 
+  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 open = Boolean(anchorEl);
   const id = open ? "simple-popover" : undefined;
-  
+
   return (
     <>
       <ModalLogout open={modal} handleClose={closeModal} />
@@ -57,6 +74,18 @@ function DetailProfile({ anchorEl, setAnchorEl }) {
               تراکنش های من
             </Button>
           </Link>
+          {hasRepresentationRole && (
+            <Link href="/panel/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
             color="error"