143 lines
3.5 KiB
TypeScript
143 lines
3.5 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Box, Modal, Typography, Divider, Grid } from "@mui/material";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../../redux/reducers";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
setViewModal: Function;
|
|
handleView: (id: number | undefined) => void;
|
|
id?: number | undefined;
|
|
};
|
|
|
|
const style = {
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 400,
|
|
bgcolor: "#000000",
|
|
borderRadius: 2,
|
|
boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
|
|
p: 4,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: 2,
|
|
};
|
|
|
|
export default function ManagerViewModal({ open, setViewModal, id }: Props) {
|
|
const { managers } = useSelector(
|
|
(state: RootState) => state.managerReducer
|
|
);
|
|
const [selectedManager, setSelectedManager] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
if (id) {
|
|
const manager = managers.find((manager) => manager.id === id);
|
|
setSelectedManager(manager || null);
|
|
}
|
|
}, [id, managers]);
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
aria-labelledby="modal-title"
|
|
aria-describedby="modal-description"
|
|
>
|
|
<Box sx={style}>
|
|
<Typography
|
|
id="modal-title"
|
|
variant="h5"
|
|
fontWeight="bold"
|
|
sx={{ width: "100%" }}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
flex: 1,
|
|
textAlign: "center",
|
|
color: "#D0E1E9",
|
|
}}
|
|
>
|
|
{selectedManager?.name || "Manager"}'s Details
|
|
</Box>
|
|
<Box
|
|
onClick={() => setViewModal(false)}
|
|
sx={{
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
color: "#D0E1E9",
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</Box>
|
|
</Box>
|
|
</Typography>
|
|
|
|
<Divider sx={{ width: "100%" }} />
|
|
|
|
{selectedManager ? (
|
|
<Grid container spacing={2} sx={{ width: "80%" }}>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1" color="#D0E1E9">
|
|
<strong>Name:</strong>
|
|
<Typography variant="body2" color="#D0E1E9">
|
|
{selectedManager.name}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1" color="#D0E1E9">
|
|
<strong>Email:</strong>
|
|
<Typography variant="body2" color="#D0E1E9">
|
|
{selectedManager.email}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1" color="#D0E1E9">
|
|
<strong>Phone:</strong>
|
|
<Typography variant="body2" color="#D0E1E9">
|
|
{selectedManager.phone}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1" color="#D0E1E9">
|
|
<strong>Station Location:</strong>
|
|
<Typography variant="body2" color="#D0E1E9">
|
|
{selectedManager.chargingStation
|
|
?.registeredAddress || "Not Available"}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1" color="#D0E1E9">
|
|
<strong>Station Name:</strong>
|
|
<Typography variant="body2" color="#D0E1E9">
|
|
{selectedManager.chargingStation?.name ||
|
|
"Not Available"}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
) : (
|
|
<Typography align="center">
|
|
No manager found with this ID
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|