dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
2 changed files with 72 additions and 77 deletions
Showing only changes of commit f48b5341a9 - Show all commits

View file

@ -83,31 +83,42 @@ export default function VehicleViewModal({ open, setViewModal, id }: Props) {
<Grid container spacing={2} sx={{ width: "80%" }}> <Grid container spacing={2} sx={{ width: "80%" }}>
<Grid item xs={6}> <Grid item xs={6}>
<Typography variant="body1"> <Typography variant="body1">
<strong>Name:</strong> {selectedVehicle.name} <strong>Name:</strong>{" "}
<Typography variant="body2">
{selectedVehicle.name}
</Typography>
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography variant="body1"> <Typography variant="body1">
<strong>Company:</strong>{" "} <strong>Company:</strong>{" "}
<Typography variant="body2">
{selectedVehicle.company} {selectedVehicle.company}
</Typography> </Typography>
</Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography variant="body1"> <Typography variant="body1">
<strong>Model Name:</strong>{" "} <strong>Model Name:</strong>
<Typography variant="body2">
{selectedVehicle.modelName} {selectedVehicle.modelName}
</Typography> </Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="body1">
<strong>Charge Type:</strong>{" "}
{selectedVehicle.chargeType}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography variant="body1"> <Typography variant="body1">
<strong>Image URL:</strong>{" "} <strong>Charge Type:</strong>
{selectedVehicle.imageUrl} <Typography variant="body2">
{selectedVehicle.chargeType}
</Typography>
</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="body1">
<strong>Image URL:</strong>
<Typography variant="body2">
{selectedVehicle.imageUrl ?? "N/A"}
</Typography>
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>

View file

@ -10,14 +10,12 @@ type Props = {
id?: string; id?: string;
}; };
const mainContainerStyle = { const style = {
position: "absolute", position: "absolute",
top: "50%", top: "50%",
left: "50%", left: "50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
// width: "544px", width: 400,
// height: "190px",
gap: "8px",
bgcolor: "background.paper", bgcolor: "background.paper",
borderRadius: 2, borderRadius: 2,
boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)", boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
@ -25,16 +23,7 @@ const mainContainerStyle = {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
}; gap: 2,
const headerLayoutStyle = {
// width: 544,
// height: 48,
gap: "24px",
paddingBottom: "12px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}; };
export default function ViewModal({ open, setViewModal, id }: Props) { export default function ViewModal({ open, setViewModal, id }: Props) {
@ -54,74 +43,69 @@ export default function ViewModal({ open, setViewModal, id }: Props) {
aria-labelledby="modal-title" aria-labelledby="modal-title"
aria-describedby="modal-description" aria-describedby="modal-description"
> >
<Box sx={mainContainerStyle}> <Box sx={style}>
<Box sx={headerLayoutStyle}>
<Typography <Typography
id="modal-title" id="modal-title"
variant="h5" variant="h5"
fontWeight="bold" fontWeight="bold"
sx={{ flex: 1, textAlign: "center" }} sx={{ width: "100%" }}
> >
{selectedAdmin?.name}'s Details <Box
</Typography> sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
}}
>
<Box sx={{ flex: 1, textAlign: "center" }}>
{selectedAdmin?.name || "Admin"}'s Details
</Box>
<Box <Box
onClick={() => setViewModal(false)} onClick={() => setViewModal(false)}
sx={{ sx={{
cursor: "pointer", cursor: "pointer",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
marginLeft: "auto", // Ensures the button is at the right end
justifyContent:"flex-end"
}} }}
> >
<CloseIcon /> <CloseIcon />
</Box> </Box>
</Box> </Box>
</Typography>
<Divider sx={{ width: "100%" }} /> <Divider sx={{ width: "100%" }} />
{selectedAdmin ? ( {selectedAdmin ? (
<Box <Grid container spacing={2} sx={{ width: "80%" }}>
sx={{
width: "100%",
textAlign: "left",
display: "flex",
flexDirection: "column",
gap: 1.5,
whiteSpace: "pre-wrap",
wordBreak: "break-word",
overflowWrap: "break-word",
}}
>
<Grid container spacing={2}>
<Grid item xs={6}> <Grid item xs={6}>
<Typography> <Typography variant="body1">
<b>Name:</b> <strong>Name:</strong>
<Typography variant="body2">
{selectedAdmin.name}
</Typography>
</Typography> </Typography>
<Typography>{selectedAdmin.name}</Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography> <Typography variant="body1">
<b>Phone:</b> <strong>Phone:</strong>
<Typography variant="body2">{selectedAdmin.phone}</Typography>
</Typography> </Typography>
<Typography>{selectedAdmin.phone}</Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography> <Typography variant="body1">
<b>Email:</b> <strong>Email:</strong>
<Typography variant="body2">{selectedAdmin.email}</Typography>
</Typography> </Typography>
<Typography>{selectedAdmin.email}</Typography>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
<Typography> <Typography variant="body1">
<b>Address:</b> <strong>Address:</strong>
</Typography>
<Typography> <Typography variant="body2">{selectedAdmin.registeredAddress ?? "N/A"}</Typography>
{selectedAdmin.registeredAddress ?? "N/A"}
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
</Box>
) : ( ) : (
<Typography align="center"> <Typography align="center">
No admin found with this ID No admin found with this ID