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

components/icons/ArrowDownP.js

@@ -2,9 +2,8 @@ function ArrowDownP({ data }) {
   return (
     <div className="pl-[6px] cursor-pointer">
       <svg
-        className={`transition-all duration-500 ${
-          data.className.includes("iconOpen") ? "rotate-180" : "rotate-0"
-        }`}
+        className={`transition-all duration-500 ${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>
         ))}