dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
14 changed files with 281 additions and 99 deletions
Showing only changes of commit fdff9c1dd9 - Show all commits

View file

@ -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

View file

@ -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>

View file

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

View file

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

View file

@ -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>

View file

@ -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, were 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>

View file

@ -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,
@ -98,7 +96,6 @@ export default function SideMenu() {
{user?.userType || "N/A"} {user?.userType || "N/A"}
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
<Box <Box

View file

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

View file

@ -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

View file

@ -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");

View file

@ -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",
}) })
); );

View file

@ -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,

View file

@ -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>

View file

@ -11,6 +11,7 @@ interface Manager {
email: string; email: string;
phone: string; phone: string;
stationId: string; stationId: string;
chargingStation:string;
} }
interface ManagerState { interface ManagerState {