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

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>
         ))}