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"

app/globals.css

@@ -213,13 +213,11 @@ html {
 }
 
 .cover-head-blogs {
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.07) 31.47%,
-    rgba(0, 0, 0, 0.31) 59.72%,
-    rgba(0, 0, 0, 0.7) 89.39%
-  );
+  background: linear-gradient(180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.07) 31.47%,
+      rgba(0, 0, 0, 0.31) 59.72%,
+      rgba(0, 0, 0, 0.7) 89.39%);
   border-radius: 16px;
   position: relative;
   overflow: hidden;
@@ -595,6 +593,7 @@ html {
 }
 
 @media (max-width: 1024px) {
+
   .day-label-bar-inner-rtl,
   .panel-jalaali,
   .panel-header-rtl,
@@ -628,15 +627,13 @@ html {
   border-color: #343645 !important;
 }
 
-.dark
-  .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track {
+.dark .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track {
   background: #1f1d2b;
   height: 50px;
   border-radius: 10px;
 }
 
-.dark
-  .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb {
+.dark .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb {
   background: #222433;
   height: 50px;
   border-radius: 20px;
@@ -800,6 +797,33 @@ html {
   transition: 0.5s ease-in !important;
 }
 
+.dark .jalali-dashboard .panel-elevation,
+.dark .jalali-dashboard .panel-header-rtl,
+.dark .jalali-dashboard .day-label-bar-inner-rtl,
+.dark .jalali-dashboard .days-body {
+  background: transparent !important;
+}
+
+.dark .jalali-dashboard .day-label-item {
+  color: #A1A1A1 !important;
+}
+
+.dark .jalali-dashboard .days-body .day:not(.weekend-day) span {
+  color: #A1A1A1 !important;
+}
+
+.dark .jalali-dashboard .days-body .day.today:not(.weekend-day) {
+  background: #5559CE !important;
+}
+
+.dark .jalali-dashboard .days-body .day.today:not(.weekend-day) span {
+  color: #fafafa !important;
+}
+
+.dark .jalali-dashboard .days-body .day.weekend-day span {
+  color: #FF5450 !important;
+}
+
 /* Toastify */
 
 .Toastify__toast {
@@ -892,26 +916,10 @@ html {
 
 /* date picker appointment */
 
-.datePickerApt
-  .first
-  .panel-header-wrapper
-  .center:first-child
-  .iconItem:first-child,
-.datePickerApt
-  .first
-  .panel-header-wrapper
-  .center:last-child
-  .iconItem:last-child,
-.datePickerApt
-  .second
-  .panel-header-wrapper
-  .center:first-child
-  .iconItem:first-child,
-.datePickerApt
-  .second
-  .panel-header-wrapper
-  .center:last-child
-  .iconItem:last-child {
+.datePickerApt .first .panel-header-wrapper .center:first-child .iconItem:first-child,
+.datePickerApt .first .panel-header-wrapper .center:last-child .iconItem:last-child,
+.datePickerApt .second .panel-header-wrapper .center:first-child .iconItem:first-child,
+.datePickerApt .second .panel-header-wrapper .center:last-child .iconItem:last-child {
   display: none;
 }
 
@@ -921,6 +929,7 @@ html {
 }
 
 @media (min-width: 768px) {
+
   .datePickerApt #nextIconF,
   .datePickerApt #prevIconS {
     display: none;
@@ -928,6 +937,7 @@ html {
 }
 
 @media (min-width: 1024px) {
+
   .datePickerApt #nextIconF,
   .datePickerApt #prevIconS {
     display: flex;
@@ -935,6 +945,7 @@ html {
 }
 
 @media (min-width: 1280px) {
+
   .datePickerApt #nextIconF,
   .datePickerApt #prevIconS {
     display: none;
@@ -945,4 +956,4 @@ html {
 
 .hover-item-clinic:hover h3 {
   color: #f17732;
-}
+}