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

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