dev-jaanvi #1
|
@ -257,12 +257,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
? "Slot"
|
? "Slot"
|
||||||
: "List"}
|
: "List"}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
{/* Search & Buttons Section */}
|
{/* Search & Buttons Section */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
gap: "16px",
|
|
||||||
marginTop: "16px",
|
marginTop: "16px",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
|
@ -277,6 +276,11 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
backgroundColor: "#272727",
|
backgroundColor: "#272727",
|
||||||
"& .MuiOutlinedInput-root": {
|
"& .MuiOutlinedInput-root": {
|
||||||
borderRadius: "12px",
|
borderRadius: "12px",
|
||||||
|
width: "422px",
|
||||||
|
height: "44px",
|
||||||
|
borderWidth: "1px",
|
||||||
|
padding: "14px 12px 14px 12px",
|
||||||
|
gap: "16px",
|
||||||
"& fieldset": { borderColor: "#FFFFFF" },
|
"& fieldset": { borderColor: "#FFFFFF" },
|
||||||
"&:hover fieldset": { borderColor: "#FFFFFF" },
|
"&:hover fieldset": { borderColor: "#FFFFFF" },
|
||||||
"&.Mui-focused fieldset": {
|
"&.Mui-focused fieldset": {
|
||||||
|
@ -312,6 +316,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
color: "white",
|
color: "white",
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
width: "184px",
|
width: "184px",
|
||||||
|
marginRight: "16px",
|
||||||
"&:hover": { backgroundColor: "#439BC1" },
|
"&:hover": { backgroundColor: "#439BC1" },
|
||||||
}}
|
}}
|
||||||
onClick={() => handleClickOpen()}
|
onClick={() => handleClickOpen()}
|
||||||
|
@ -343,15 +348,17 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
width: "44px",
|
width: "44px",
|
||||||
height: "44px",
|
height: "44px",
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
backgroundColor: "#272727",
|
backgroundColor: "#1C1C1C",
|
||||||
color: "#52ACDF",
|
color: "#52ACDF",
|
||||||
"&:hover": { backgroundColor: "#333333" },
|
"&:hover": { backgroundColor: "#333333" },
|
||||||
|
"*:where([data-mui-color-scheme='dark']) &": {
|
||||||
|
backgroundColor: "#1C1C1C",
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TuneIcon />
|
<TuneIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Table Section */}
|
{/* Table Section */}
|
||||||
<TableContainer
|
<TableContainer
|
||||||
component={Paper}
|
component={Paper}
|
||||||
|
@ -367,6 +374,10 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
sx={{
|
sx={{
|
||||||
backgroundColor: "#272727",
|
backgroundColor: "#272727",
|
||||||
borderBottom: "none",
|
borderBottom: "none",
|
||||||
|
".css-1ex4ubw-MuiTableCell-root.MuiTableCell-head ":
|
||||||
|
{
|
||||||
|
backgroundColor: "#272727",
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{" "}
|
{" "}
|
||||||
|
@ -384,7 +395,13 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
))}
|
))}
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody
|
||||||
|
sx={{
|
||||||
|
".MuiTableCell-root": {
|
||||||
|
backgroundColor: "#1C1C1C",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
{currentRows.map((row, rowIndex) => (
|
{currentRows.map((row, rowIndex) => (
|
||||||
<StyledTableRow key={rowIndex}>
|
<StyledTableRow key={rowIndex}>
|
||||||
{columns.map((column) => (
|
{columns.map((column) => (
|
||||||
|
@ -433,7 +450,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</TableContainer>
|
</TableContainer>
|
||||||
|
|
||||||
{/* Pagination */}
|
{/* Pagination */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
@ -467,7 +483,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Menu Actions */}
|
{/* Menu Actions */}
|
||||||
{open && (
|
{open && (
|
||||||
<Menu
|
<Menu
|
||||||
|
@ -631,7 +646,6 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
</Box>
|
</Box>
|
||||||
</Menu>
|
</Menu>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Modals */}
|
{/* Modals */}
|
||||||
{deleteModal && (
|
{deleteModal && (
|
||||||
<DeleteModal
|
<DeleteModal
|
||||||
|
|
|
@ -7,7 +7,7 @@ import Typography from "@mui/material/Typography";
|
||||||
import Stack from "@mui/material/Stack";
|
import Stack from "@mui/material/Stack";
|
||||||
import { LineChart } from "@mui/x-charts/LineChart";
|
import { LineChart } from "@mui/x-charts/LineChart";
|
||||||
import { Box } from "@mui/material";
|
import { Box } from "@mui/material";
|
||||||
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||||
function AreaGradient({ color, id }: { color: string; id: string }) {
|
function AreaGradient({ color, id }: { color: string; id: string }) {
|
||||||
return (
|
return (
|
||||||
<defs>
|
<defs>
|
||||||
|
@ -43,7 +43,14 @@ export default function LineChartCard() {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
|
sx={{
|
||||||
|
width: "553px",
|
||||||
|
height: "444px",
|
||||||
|
borderRadius: "16px",
|
||||||
|
"*:where([data-mui-color-scheme='dark']) &": {
|
||||||
|
backgroundColor: "#202020",
|
||||||
|
},
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div
|
<div
|
||||||
|
@ -74,29 +81,39 @@ export default function LineChartCard() {
|
||||||
marginLeft: "auto",
|
marginLeft: "auto",
|
||||||
marginRight: "16px",
|
marginRight: "16px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "space-between",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
p: 1.5,
|
p: 1.5,
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
border: "1px solid #454545",
|
border: "1px solid #454545",
|
||||||
|
|
||||||
padding: "4px 8px",
|
|
||||||
color: "#F2F2F2",
|
color: "#F2F2F2",
|
||||||
|
|
||||||
|
width: "129px",
|
||||||
|
height: "44px",
|
||||||
|
padding: "12px 16px",
|
||||||
|
gap: "8px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
|
width={"69px"}
|
||||||
|
height={"16px"}
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Gilroy",
|
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
color: "#F2F2F2",
|
color: "#D9D8D8",
|
||||||
p: "4px",
|
|
||||||
|
textAlign: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Weekly
|
Weekly
|
||||||
</Typography>
|
</Typography>
|
||||||
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
|
<ExpandMoreIcon
|
||||||
|
width="20px"
|
||||||
|
height="20px"
|
||||||
|
|
||||||
|
sx={{ color: "#F2F2F2" }}
|
||||||
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -45,7 +45,7 @@ export default function MainGrid() {
|
||||||
</Typography>
|
</Typography>
|
||||||
<Grid
|
<Grid
|
||||||
container
|
container
|
||||||
spacing={2}
|
spacing={3}
|
||||||
columns={12}
|
columns={12}
|
||||||
|
|
||||||
// sx={{ mb: (theme) => theme.spacing(2) }}
|
// sx={{ mb: (theme) => theme.spacing(2) }}
|
||||||
|
|
|
@ -12,7 +12,12 @@ import { useSelector } from "react-redux";
|
||||||
import { RootState } from "../../redux/store/store";
|
import { RootState } from "../../redux/store/store";
|
||||||
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
|
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
|
||||||
import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
|
import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
|
||||||
|
import EvStationOutlinedIcon from "@mui/icons-material/EvStationOutlined";
|
||||||
|
import EvStationIcon from "@mui/icons-material/EvStation";
|
||||||
|
import BookOnlineOutlinedIcon from "@mui/icons-material/BookOnlineOutlined";
|
||||||
|
import ChecklistSharpIcon from "@mui/icons-material/ChecklistSharp";
|
||||||
|
import AnalyticsOutlinedIcon from "@mui/icons-material/AnalyticsOutlined";
|
||||||
|
import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined";
|
||||||
type PropType = {
|
type PropType = {
|
||||||
hidden: boolean;
|
hidden: boolean;
|
||||||
};
|
};
|
||||||
|
@ -31,33 +36,33 @@ export default function MenuContent({ hidden }: PropType) {
|
||||||
},
|
},
|
||||||
userRole === "superadmin" && {
|
userRole === "superadmin" && {
|
||||||
text: "Admins",
|
text: "Admins",
|
||||||
icon: <AnalyticsRoundedIcon />,
|
icon: <ManageAccountsOutlinedIcon />,
|
||||||
url: "/panel/admin-list",
|
url: "/panel/admin-list",
|
||||||
},
|
},
|
||||||
userRole === "superadmin" && {
|
userRole === "superadmin" && {
|
||||||
text: "Roles",
|
text: "Roles",
|
||||||
icon: <AnalyticsRoundedIcon />,
|
icon: <AnalyticsOutlinedIcon />,
|
||||||
url: "/panel/role-list",
|
url: "/panel/role-list",
|
||||||
},
|
},
|
||||||
userRole === "admin" && {
|
userRole === "admin" && {
|
||||||
text: "Users",
|
text: "Users",
|
||||||
icon: <AnalyticsRoundedIcon />,
|
icon: <PeopleOutlinedIcon />,
|
||||||
url: "/panel/user-list",
|
url: "/panel/user-list",
|
||||||
},
|
},
|
||||||
userRole === "admin" && {
|
userRole === "admin" && {
|
||||||
text: "Charging Stations",
|
text: "Charging Stations",
|
||||||
icon: <ManageAccountsOutlinedIcon />,
|
icon: <EvStationIcon />,
|
||||||
url: "/panel/station-list", // Placeholder for now
|
url: "/panel/station-list", // Placeholder for now
|
||||||
},
|
},
|
||||||
userRole === "admin" && {
|
userRole === "admin" && {
|
||||||
text: "Managers",
|
text: "Managers",
|
||||||
icon: <ManageAccountsOutlinedIcon />,
|
icon: <PeopleOutlinedIcon />,
|
||||||
url: "/panel/manager-list", // Placeholder for now
|
url: "/panel/manager-list", // Placeholder for now
|
||||||
},
|
},
|
||||||
|
|
||||||
userRole === "admin" && {
|
userRole === "admin" && {
|
||||||
text: "Vehicles",
|
text: "Vehicles",
|
||||||
icon: <ManageAccountsOutlinedIcon />,
|
icon: <AnalyticsOutlinedIcon />,
|
||||||
url: "/panel/vehicle-list", // Placeholder for now
|
url: "/panel/vehicle-list", // Placeholder for now
|
||||||
},
|
},
|
||||||
// userRole === "manager" && {
|
// userRole === "manager" && {
|
||||||
|
@ -67,17 +72,17 @@ export default function MenuContent({ hidden }: PropType) {
|
||||||
// },
|
// },
|
||||||
userRole === "user" && {
|
userRole === "user" && {
|
||||||
text: "Bookings",
|
text: "Bookings",
|
||||||
icon: <ManageAccountsOutlinedIcon />,
|
icon: <BookOnlineOutlinedIcon />,
|
||||||
url: "/panel/booking-list", // Placeholder for now
|
url: "/panel/booking-list", // Placeholder for now
|
||||||
},
|
},
|
||||||
userRole === "manager" && {
|
userRole === "manager" && {
|
||||||
text: "Available Slots",
|
text: "Available Slots",
|
||||||
icon: <ManageAccountsOutlinedIcon />,
|
icon: <ChecklistSharpIcon />,
|
||||||
url: "/panel/slot-list", // Placeholder for now
|
url: "/panel/slot-list", // Placeholder for now
|
||||||
},
|
},
|
||||||
userRole === "user" && {
|
userRole === "user" && {
|
||||||
text: "Available Slots",
|
text: "Available Slots",
|
||||||
icon: <ManageAccountsOutlinedIcon />,
|
icon: <ChecklistSharpIcon />,
|
||||||
url: "/panel/slot-list", // Placeholder for now
|
url: "/panel/slot-list", // Placeholder for now
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -85,7 +90,14 @@ export default function MenuContent({ hidden }: PropType) {
|
||||||
const filteredMenuItems = baseMenuItems.filter(Boolean);
|
const filteredMenuItems = baseMenuItems.filter(Boolean);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
|
<Stack
|
||||||
|
sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
p: 1,
|
||||||
|
justifyContent: "space-between",
|
||||||
|
backgroundColor: "#202020",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<List dense>
|
<List dense>
|
||||||
{filteredMenuItems.map((item, index) => (
|
{filteredMenuItems.map((item, index) => (
|
||||||
<ListItem
|
<ListItem
|
||||||
|
@ -104,6 +116,7 @@ export default function MenuContent({ hidden }: PropType) {
|
||||||
minWidth: "fit-content",
|
minWidth: "fit-content",
|
||||||
".MuiSvgIcon-root": {
|
".MuiSvgIcon-root": {
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
|
color: "#FFFFFF",
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -113,8 +126,14 @@ export default function MenuContent({ hidden }: PropType) {
|
||||||
sx={{
|
sx={{
|
||||||
display: !hidden ? "none" : "",
|
display: !hidden ? "none" : "",
|
||||||
transition: "all 0.5s ease",
|
transition: "all 0.5s ease",
|
||||||
|
|
||||||
".MuiListItemText-primary": {
|
".MuiListItemText-primary": {
|
||||||
|
width: "118px",
|
||||||
|
height: "19px",
|
||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
lineHeight: "100%",
|
||||||
|
color: "#D9D8D8",
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
primary={item.text}
|
primary={item.text}
|
||||||
|
|
|
@ -28,11 +28,15 @@ export default function ResourcePieChart() {
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: "8px",
|
gap: "12px",
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
width: "100%",
|
width: "553px",
|
||||||
height: "100%",
|
height: "324px",
|
||||||
|
padding: "16px",
|
||||||
|
borderRadius: "16px",
|
||||||
|
"*:where([data-mui-color-scheme='dark']) &": {
|
||||||
backgroundColor: "#202020",
|
backgroundColor: "#202020",
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
|
@ -40,11 +44,13 @@ export default function ResourcePieChart() {
|
||||||
component="h2"
|
component="h2"
|
||||||
variant="subtitle2"
|
variant="subtitle2"
|
||||||
color="#F2F2F2"
|
color="#F2F2F2"
|
||||||
|
width="84px"
|
||||||
|
height="24px"
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Gilroy",
|
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
|
color: "#FFFFFF",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Resources
|
Resources
|
||||||
|
@ -93,7 +99,12 @@ export default function ResourcePieChart() {
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Typography variant="body2" color="#F2F2F2">
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
width="100px"
|
||||||
|
height="16px"
|
||||||
|
color="#FFFFFF"
|
||||||
|
>
|
||||||
{entry.title}
|
{entry.title}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
@ -5,15 +5,21 @@ import Typography from "@mui/material/Typography";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
||||||
|
|
||||||
|
|
||||||
export default function SessionsChart() {
|
export default function SessionsChart() {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
sx={{
|
sx={{
|
||||||
width: "100%",
|
width: "553px",
|
||||||
height: "100%",
|
height: "324px",
|
||||||
|
gap: "16px",
|
||||||
|
borderRadius: "16px",
|
||||||
|
padding: "20px",
|
||||||
|
"*:where([data-mui-color-scheme='dark']) &": {
|
||||||
backgroundColor: "#202020",
|
backgroundColor: "#202020",
|
||||||
p: 2,
|
},
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
|
@ -21,11 +27,16 @@ export default function SessionsChart() {
|
||||||
variant="h6"
|
variant="h6"
|
||||||
align="left"
|
align="left"
|
||||||
color="#F2F2F2"
|
color="#F2F2F2"
|
||||||
|
width="132px"
|
||||||
|
height="24px"
|
||||||
|
gap={"12px"}
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Gilroy",
|
fontFamily: "Gilroy",
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
color: "#FAFAFA",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Charging prices
|
Charging prices
|
||||||
|
@ -50,13 +61,15 @@ export default function SessionsChart() {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
|
width="134px"
|
||||||
|
height="24px"
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Gilroy",
|
fontFamily: "Gilroy",
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
color: "#F2F2F2",
|
color: "#D9D8D8",
|
||||||
p: "4px",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Delhi NCR EV Station
|
Delhi NCR EV Station
|
||||||
|
@ -78,7 +91,6 @@ export default function SessionsChart() {
|
||||||
mx: "auto",
|
mx: "auto",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* You can map over your data here; for simplicity, we’re using static boxes */}
|
|
||||||
{[1, 2, 3, 4].map((item) => (
|
{[1, 2, 3, 4].map((item) => (
|
||||||
<Box
|
<Box
|
||||||
key={item}
|
key={item}
|
||||||
|
@ -87,23 +99,47 @@ export default function SessionsChart() {
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
p: "12px 16px",
|
p: "12px 16px",
|
||||||
backgroundColor: "#272727",
|
backgroundColor: "#272727",
|
||||||
color: "#F2F2F2",
|
color: "#D9D8D8",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
component="h1"
|
component="h1"
|
||||||
variant="body2"
|
variant="body2"
|
||||||
|
width="98px"
|
||||||
|
height="24px"
|
||||||
|
fontWeight={400}
|
||||||
|
fontSize={"14px"}
|
||||||
|
lineHeight={"24px"}
|
||||||
gutterBottom
|
gutterBottom
|
||||||
>
|
>
|
||||||
Basic Charging
|
Basic Charging
|
||||||
</Typography>
|
</Typography>
|
||||||
|
<Box display={"flex"} gap={1}>
|
||||||
<Typography
|
<Typography
|
||||||
component="h1"
|
component="h1"
|
||||||
variant="subtitle2"
|
variant="subtitle2"
|
||||||
|
color="#FFFFFF"
|
||||||
|
width="40px"
|
||||||
|
height={"24px"}
|
||||||
|
fontWeight={500}
|
||||||
|
fontSize="18px"
|
||||||
|
lineHeight="24px"
|
||||||
gutterBottom
|
gutterBottom
|
||||||
>
|
>
|
||||||
16.83 cents/kWh
|
16.83
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
|
<Typography
|
||||||
|
width="71px"
|
||||||
|
height="24px"
|
||||||
|
gap="2px"
|
||||||
|
fontWeight={400}
|
||||||
|
fontSize={"14px"}
|
||||||
|
lineHeight={"24px"}
|
||||||
|
>
|
||||||
|
cents/kWh
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
@ -64,19 +64,17 @@ export default function SideMenu() {
|
||||||
pl: 2,
|
pl: 2,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
||||||
<Avatar
|
<Avatar
|
||||||
alt="Logo"
|
alt="Logo"
|
||||||
src="/Digilogo.png"
|
src="/Digilogo.png"
|
||||||
sx={{
|
sx={{
|
||||||
width: "50px",
|
width: "50px",
|
||||||
height: "50px",
|
height: "50px",
|
||||||
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: open ? "flex" : "none",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
pt: 2,
|
pt: 2,
|
||||||
|
@ -94,11 +92,10 @@ export default function SideMenu() {
|
||||||
>
|
>
|
||||||
Digi EV
|
Digi EV
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="subtitle2" color="#D9D8D8" >
|
<Typography variant="subtitle2" color="#D9D8D8">
|
||||||
{user?.userType || "N/A"}
|
{user?.userType || "N/A"}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
|
|
|
@ -18,13 +18,28 @@ export default function StatCard({ title, value }: StatCardProps) {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
sx={{ height: "100%", backgroundColor: "#202020" }}
|
sx={{
|
||||||
|
width: "264.5px",
|
||||||
|
height: "90px",
|
||||||
|
padding: "16px",
|
||||||
|
borderRadius: "12px",
|
||||||
|
gap: "24px",
|
||||||
|
"*:where([data-mui-color-scheme='dark']) &": {
|
||||||
|
backgroundColor: "#202020",
|
||||||
|
},
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Typography
|
<Typography
|
||||||
component="h2"
|
component="h2"
|
||||||
variant="subtitle2"
|
variant="subtitle2"
|
||||||
color="#F2F2F2"
|
color="#F2F2F2"
|
||||||
|
width={"118px"}
|
||||||
|
height={"14px"}
|
||||||
|
fontWeight={400}
|
||||||
|
fontSize={"12px"}
|
||||||
|
lineHeight={"14px"}
|
||||||
|
letterSpacing={"0%"}
|
||||||
gutterBottom
|
gutterBottom
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
|
@ -33,8 +48,12 @@ export default function StatCard({ title, value }: StatCardProps) {
|
||||||
component="h1"
|
component="h1"
|
||||||
variant="body1"
|
variant="body1"
|
||||||
color="#F2F2F2"
|
color="#F2F2F2"
|
||||||
fontSize={30}
|
width={"36px"}
|
||||||
fontWeight={700}
|
height={"36px"}
|
||||||
|
fontSize={"32px"}
|
||||||
|
fontWeight={600}
|
||||||
|
lineHeight={"36px"}
|
||||||
|
letterSpacing={"0%"}
|
||||||
gutterBottom
|
gutterBottom
|
||||||
>
|
>
|
||||||
{value}
|
{value}
|
||||||
|
|
|
@ -1,20 +1,8 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { useTheme } from "@mui/material/styles";
|
import { useTheme } from "@mui/material/styles";
|
||||||
import {
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from "recharts";
|
||||||
BarChart,
|
import { Card, CardContent, Typography, Box } from "@mui/material";
|
||||||
Bar,
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
CartesianGrid,
|
|
||||||
} from "recharts";
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
Typography,
|
|
||||||
Box,
|
|
||||||
|
|
||||||
} from "@mui/material";
|
|
||||||
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
|
||||||
const data = [
|
const data = [
|
||||||
{ name: "Jan", v1: 40 },
|
{ name: "Jan", v1: 40 },
|
||||||
{ name: "Feb", v1: 50 },
|
{ name: "Feb", v1: 50 },
|
||||||
|
@ -30,7 +18,14 @@ export default function RoundedBarChart() {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
|
sx={{
|
||||||
|
width: "553px",
|
||||||
|
height: "444px",
|
||||||
|
borderRadius: "16px",
|
||||||
|
"*:where([data-mui-color-scheme='dark']) &": {
|
||||||
|
backgroundColor: "#202020",
|
||||||
|
},
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div
|
<div
|
||||||
|
@ -61,29 +56,41 @@ export default function RoundedBarChart() {
|
||||||
marginLeft: "auto",
|
marginLeft: "auto",
|
||||||
marginRight: "16px",
|
marginRight: "16px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "space-between",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
p: 1.5,
|
p: 1.5,
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
border: "1px solid #454545",
|
border: "1px solid #454545",
|
||||||
|
|
||||||
padding: "4px 8px",
|
// padding: "4px 8px",
|
||||||
color: "#F2F2F2",
|
color: "#F2F2F2",
|
||||||
|
width: "129px",
|
||||||
|
height: "44px",
|
||||||
|
padding: "12px 16px",
|
||||||
|
gap: "8px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
|
width={"69px"}
|
||||||
|
height={"16px"}
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Gilroy",
|
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
lineHeight: "24px",
|
lineHeight: "24px",
|
||||||
color: "#F2F2F2",
|
color: "#D9D8D8",
|
||||||
p: "4px",
|
|
||||||
|
textAlign: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Monthly
|
Monthly
|
||||||
</Typography>
|
</Typography>
|
||||||
<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
|
<ExpandMoreIcon
|
||||||
|
width="20px"
|
||||||
|
height="20px"
|
||||||
|
|
||||||
|
sx={{ color: "#F2F2F2" ,textAlign: "center", }}
|
||||||
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</div>
|
</div>
|
||||||
<BarChart
|
<BarChart
|
||||||
|
|
|
@ -14,9 +14,12 @@ http.interceptors.request.use((config) => {
|
||||||
http.interceptors.response.use(
|
http.interceptors.response.use(
|
||||||
(response) => response,
|
(response) => response,
|
||||||
(error) => {
|
(error) => {
|
||||||
|
|
||||||
if (error.response && error.response.status === 401) {
|
if (error.response && error.response.status === 401) {
|
||||||
|
|
||||||
window.location.href = "/login";
|
|
||||||
|
|
||||||
|
// window.location.href = "/login";
|
||||||
|
|
||||||
// const history = useHistory();
|
// const history = useHistory();
|
||||||
// history.push("/login");
|
// history.push("/login");
|
||||||
|
|
|
@ -83,6 +83,8 @@ export default function AdminList() {
|
||||||
{ id: "email", label: "Email" },
|
{ id: "email", label: "Email" },
|
||||||
{ id: "phone", label: "Phone" },
|
{ id: "phone", label: "Phone" },
|
||||||
{ id: "registeredAddress", label: "Address" },
|
{ id: "registeredAddress", label: "Address" },
|
||||||
|
{ id: "userType", label: "Role" },
|
||||||
|
|
||||||
{ id: "action", label: "Action", align: "center" },
|
{ id: "action", label: "Action", align: "center" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -93,7 +95,8 @@ export default function AdminList() {
|
||||||
name: string;
|
name: string;
|
||||||
email: string;
|
email: string;
|
||||||
phone: string;
|
phone: string;
|
||||||
Admins: { registeredAddress: string }[]; // Adjusted to support array of Admins
|
Admins: { registeredAddress: string }[];
|
||||||
|
userType:string;
|
||||||
},
|
},
|
||||||
index: number
|
index: number
|
||||||
) => ({
|
) => ({
|
||||||
|
@ -103,6 +106,7 @@ export default function AdminList() {
|
||||||
email: admin?.email,
|
email: admin?.email,
|
||||||
phone: admin?.phone,
|
phone: admin?.phone,
|
||||||
registeredAddress: admin?.Admins?.[0]?.registeredAddress || "NA",
|
registeredAddress: admin?.Admins?.[0]?.registeredAddress || "NA",
|
||||||
|
userType:admin?.userType||"NA",
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -146,7 +146,7 @@ export default function ManagerList() {
|
||||||
|
|
||||||
const categoryRows = filteredManagers?.length
|
const categoryRows = filteredManagers?.length
|
||||||
? filteredManagers.map((manager, index) => {
|
? filteredManagers.map((manager, index) => {
|
||||||
const station = manager?.ChargingStation; // Correct access to the ChargingStation data
|
const station = manager?.chargingStation; // Correct access to the ChargingStation data
|
||||||
return {
|
return {
|
||||||
id: manager.id,
|
id: manager.id,
|
||||||
srno: index + 1,
|
srno: index + 1,
|
||||||
|
|
|
@ -42,14 +42,24 @@ const ProfilePage = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container sx={{ py: 4 }}>
|
<Container
|
||||||
|
sx={{
|
||||||
|
py: 4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Typography variant="h4" gutterBottom>
|
<Typography variant="h4" gutterBottom>
|
||||||
Account Info
|
Account Info
|
||||||
</Typography>
|
</Typography>
|
||||||
<Card
|
<Card
|
||||||
sx={{
|
sx={{
|
||||||
|
width: "1132px",
|
||||||
|
height: "331px",
|
||||||
|
gap: "24px",
|
||||||
|
borderRadius: "12px",
|
||||||
|
padding: "16px",
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
margin: "0 auto",
|
margin: "0 auto",
|
||||||
|
backgroundColor: "#1C1C1C",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
|
@ -62,16 +72,29 @@ const ProfilePage = () => {
|
||||||
<Avatar
|
<Avatar
|
||||||
alt="User Avatar"
|
alt="User Avatar"
|
||||||
src="/avatar.png"
|
src="/avatar.png"
|
||||||
sx={{ width: 36, height: 36 }}
|
sx={{ width: "60px", height: "60px" }}
|
||||||
/>
|
/>
|
||||||
<Box>
|
<Box>
|
||||||
<Typography
|
<Typography
|
||||||
variant="body1"
|
variant="body1"
|
||||||
|
width="1028px"
|
||||||
|
height="24px"
|
||||||
|
fontWeight={500}
|
||||||
|
fontSize={"20px"}
|
||||||
|
lineHeight={"100%"}
|
||||||
sx={{ color: "#FFFFFF" }}
|
sx={{ color: "#FFFFFF" }}
|
||||||
>
|
>
|
||||||
{user?.name || "No Admin"}
|
{user?.name || "No Admin"}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2" color="#D9D8D8">
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
color="#D9D8D8"
|
||||||
|
fontWeight={400}
|
||||||
|
fontSize={"16px"}
|
||||||
|
lineHeight={"100%"}
|
||||||
|
width="46px"
|
||||||
|
height="19px"
|
||||||
|
>
|
||||||
{user?.userType || "N/A"}
|
{user?.userType || "N/A"}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -88,6 +111,11 @@ const ProfilePage = () => {
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
variant="body1"
|
variant="body1"
|
||||||
|
width="1048px"
|
||||||
|
height="19px"
|
||||||
|
fontWeight={500}
|
||||||
|
fontSize={"16px"}
|
||||||
|
lineHeight={"100%"}
|
||||||
sx={{ color: "#FFFFFF" }}
|
sx={{ color: "#FFFFFF" }}
|
||||||
>
|
>
|
||||||
Personal Information
|
Personal Information
|
||||||
|
@ -95,23 +123,39 @@ const ProfilePage = () => {
|
||||||
<Link
|
<Link
|
||||||
variant="body1"
|
variant="body1"
|
||||||
href="/edit-profile"
|
href="/edit-profile"
|
||||||
|
|
||||||
color="#52ACDF"
|
color="#52ACDF"
|
||||||
|
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</Link>
|
</Link>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
<Grid container>
|
<Grid
|
||||||
<Grid item xs={12} sm={4}>
|
container
|
||||||
|
width="1100px"
|
||||||
|
height="38px"
|
||||||
|
// gap={"100px"}
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
sm={4}
|
||||||
|
width="64px"
|
||||||
|
height="16px"
|
||||||
|
fontSize={"14px"}
|
||||||
|
lineHeight={"100%"}
|
||||||
|
>
|
||||||
<Typography
|
<Typography
|
||||||
variant="body1"
|
variant="body1"
|
||||||
|
fontWeight={500}
|
||||||
sx={{ color: "#FFFFFF" }}
|
sx={{ color: "#FFFFFF" }}
|
||||||
>
|
>
|
||||||
Full Name:
|
Full Name:
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2" color="#D9D8D8">
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
fontWeight={400}
|
||||||
|
color="#D9D8D8"
|
||||||
|
>
|
||||||
{user?.name || "N/A"}
|
{user?.name || "N/A"}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
@ -139,10 +183,20 @@ const ProfilePage = () => {
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
width="21px"
|
||||||
|
height="16px"
|
||||||
|
sx={{ color: "#FFFFFF" }}
|
||||||
|
>
|
||||||
Bio:
|
Bio:
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2" color="#D9D8D8">
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
width="1100px"
|
||||||
|
height="32px"
|
||||||
|
color="#D9D8D8"
|
||||||
|
>
|
||||||
{user?.bio || "No bio available."}
|
{user?.bio || "No bio available."}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
@ -11,6 +11,7 @@ interface Manager {
|
||||||
email: string;
|
email: string;
|
||||||
phone: string;
|
phone: string;
|
||||||
stationId: string;
|
stationId: string;
|
||||||
|
chargingStation:string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ManagerState {
|
interface ManagerState {
|
||||||
|
|
Loading…
Reference in a new issue