hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hamed
2025-11-19 12:22:14 +03:30
parent 18b03ca781
commit 95e55776c3
6 changed files with 103 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/DetailProfile.js
+31 -2
View File
@@ -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
+43 -32
View File
@@ -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;
}
}
components/icons/ArrowDownP.js
+2 -3
View File
@@ -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
+1 -1
View File
@@ -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
Vendored
+9
View File
@@ -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
+17 -2
View File
@@ -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>
))}