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

app/component/DetailProfile.js

@@ -1,17 +1,34 @@
-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;
 
@@ -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(
+  background: linear-gradient(180deg,
-    180deg,
+      rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.07) 31.47%,
-    rgba(0, 0, 0, 0.07) 31.47%,
+      rgba(0, 0, 0, 0.31) 59.72%,
-    rgba(0, 0, 0, 0.31) 59.72%,
+      rgba(0, 0, 0, 0.7) 89.39%);
-    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
+.dark .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track {
-  .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track {
   background: #1f1d2b;
   height: 50px;
   border-radius: 10px;
 }
 
-.dark
+.dark .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb {
-  .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
+.datePickerApt .first .panel-header-wrapper .center:first-child .iconItem:first-child,
-  .first
+.datePickerApt .first .panel-header-wrapper .center:last-child .iconItem:last-child,
-  .panel-header-wrapper
+.datePickerApt .second .panel-header-wrapper .center:first-child .iconItem:first-child,
-  .center:first-child
+.datePickerApt .second .panel-header-wrapper .center:last-child .iconItem:last-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;

components/icons/ArrowDownP.js

@@ -2,9 +2,8 @@ function ArrowDownP({ data }) {
   return (
     <div className="pl-[6px] cursor-pointer">
       <svg
-        className={`transition-all duration-500 ${
+        className={`transition-all duration-500 ${data.className.includes("iconOpen") ? "rotate-180" : "rotate-0"
-          data.className.includes("iconOpen") ? "rotate-180" : "rotate-0"
+          } dark:[&>path]:stroke-[#A1A1A1]`}
-        }`}
         xmlns="http://www.w3.org/2000/svg"
         width="20"
         height="20"

components/layoutPanel/userDetail/Activities.js

@@ -12,7 +12,7 @@ function Activities({ data, loading }) {
           <li key={idx} className="flex flex-col">
             <div className="flex items-center justify-between">
               <div className="flex items-center justify-start gap-[12px]">
-                <div className="bg-[rgba(255,192,81,0.20)] p-[8px] rounded-full">
+                <div className="bg-[rgba(255,192,81,0.20)] dark:bg-[rgba(255,192,81,0.10)] p-[8px] rounded-full">
                   <WarnP />
                 </div>
                 <TextLoading width={110} height={18} loading={loading}>

components/panel/dashboard/amountOfIncome/Chart.js

@@ -45,14 +45,23 @@ function Chart({ data, loading }) {
           fontSize: "14px !important",
           fontWeight: "400 !important",
           fill: "#858D9D",
+          "@media (prefers-color-scheme: dark)": {
+            fill: "#A1A1A1",
+          },
         },
         "& .MuiChartsAxis-directionX .MuiChartsAxis-tickLabel": {
           fontSize: "10px !important",
           fontWeight: "400 !important",
           fill: "#7E7E7E",
+          "@media (prefers-color-scheme: dark)": {
+            fill: "#A1A1A1",
+          },
         },
         "& .MuiChartsGrid-line": {
           strokeDasharray: 2,
+          "@media (prefers-color-scheme: dark)": {
+            stroke: "#343645",
+          },
         },
         "& .MuiChartsAxis-directionY": {
           // transform: 'translateX(-50px) !important'

components/panel/dashboard/amountOfIncome/Head.js

@@ -20,8 +20,13 @@ function Head() {
       </p>
       <Select
         defaultValue={1}
-        className="!text-[#7E7E7E] !text-[12px] !font-normal !rounded-[4px]"
+        className="!text-[#7E7E7E] dark:!text-[#A1A1A1] !text-[12px] !font-normal !rounded-[4px] dark:!bg-[#222433]"
         IconComponent={(e) => <ArrowDownP data={e} />}
+        MenuProps={{
+          PaperProps: {
+            className: "dark:!bg-[#222433]",
+          },
+        }}
         sx={{
           "& .MuiSelect-select": {
             padding: "8px 6px 8px 8px !important",
@@ -29,16 +34,26 @@ function Head() {
           "&:hover": {
             "& .MuiOutlinedInput-notchedOutline": {
               border: "1px solid #D7D7D7",
+              "@media (prefers-color-scheme: dark)": {
+                borderColor: "#343645 !important",
+              },
             },
           },
           "& .MuiOutlinedInput-notchedOutline": {
             borderColor: "#D7D7D7 !important",
             border: "1px solid #D7D7D7",
+            "@media (prefers-color-scheme: dark)": {
+              borderColor: "#343645 !important",
+            },
           },
         }}
       >
         {list.map((item, idx) => (
-          <MenuItem value={item.id} key={idx}>
+          <MenuItem
+            value={item.id}
+            key={idx}
+            className="dark:!bg-[#222433] dark:!text-[#D7D8ED]"
+          >
             {item.text}
           </MenuItem>
         ))}