126 lines
2.9 KiB
TypeScript
126 lines
2.9 KiB
TypeScript
import { Box, Button, Modal, Typography, Divider, Grid } from "@mui/material";
|
|
import { RootState } from "../../../redux/store/store";
|
|
import { useSelector } from "react-redux";
|
|
import { useEffect, useState } from "react";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
setViewModal: Function;
|
|
handleView: (id: string | undefined) => void;
|
|
id?: string;
|
|
};
|
|
|
|
const style = {
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: 400,
|
|
bgcolor: "background.paper",
|
|
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 ViewModal({ open, setViewModal, id }: Props) {
|
|
const { admins } = useSelector((state: RootState) => state.adminReducer);
|
|
const [selectedAdmin, setSelectedAdmin] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
if (id) {
|
|
const admin = admins.find((admin) => admin.id === id);
|
|
setSelectedAdmin(admin);
|
|
}
|
|
}, [id, admins]);
|
|
|
|
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" }}>
|
|
{selectedAdmin?.name || "Admin"}'s Details
|
|
</Box>
|
|
<Box
|
|
onClick={() => setViewModal(false)}
|
|
sx={{
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</Box>
|
|
</Box>
|
|
</Typography>
|
|
|
|
<Divider sx={{ width: "100%" }} />
|
|
|
|
{selectedAdmin ? (
|
|
<Grid container spacing={2} sx={{ width: "90%" }}>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1">
|
|
<strong>Name:</strong>
|
|
<Typography variant="body2">
|
|
{selectedAdmin.name}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1">
|
|
<strong>Phone:</strong>
|
|
<Typography variant="body2">
|
|
{selectedAdmin.phone}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1">
|
|
<strong>Email:</strong>
|
|
<Typography variant="body2">
|
|
{selectedAdmin.email}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body1">
|
|
<strong>Address:</strong>
|
|
|
|
<Typography variant="body2">
|
|
{selectedAdmin?.Admins?.[0]
|
|
?.registeredAddress ?? "N/A"}
|
|
</Typography>
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
) : (
|
|
<Typography align="center">
|
|
No admin found with this ID
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|