Merge pull request 'ui-station-manager' (#18) from feature/ticketsWork into develop
Reviewed-on: DigiMantra/digiev_frontend#18
This commit is contained in:
commit
08af4a9b11
|
|
@ -9,6 +9,7 @@ import TableHead from "@mui/material/TableHead";
|
|||
import TableRow from "@mui/material/TableRow";
|
||||
import Paper, { paperClasses } from "@mui/material/Paper";
|
||||
import { adminList, deleteAdmin } from "../../redux/slices/adminSlice";
|
||||
import { deleteManager } from "../../redux/slices/managerSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
import {
|
||||
Box,
|
||||
|
|
@ -72,6 +73,7 @@ interface CustomTableProps {
|
|||
handleStatusToggle: (id: string, currentStatus: number) => void;
|
||||
tableType: string; // Adding tableType prop to change header text dynamically
|
||||
handleClickOpen: () => void;
|
||||
handleDeleteButton: (id: string | number | undefined) => void;
|
||||
}
|
||||
|
||||
const CustomTable: React.FC<CustomTableProps> = ({
|
||||
|
|
@ -98,10 +100,26 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
const open = Boolean(anchorEl);
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
|
||||
|
||||
setAnchorEl(event.currentTarget);
|
||||
setSelectedRow(row); // Ensure the row data is set
|
||||
setSelectedRow(row);
|
||||
setRowData(row);
|
||||
|
||||
|
||||
};
|
||||
const handleViewButton = (id: string | undefined) => {
|
||||
if (!id) {
|
||||
console.error("ID not found for viewing.");
|
||||
return;
|
||||
}
|
||||
setViewModal(true);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
|
|
@ -114,38 +132,23 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
return false;
|
||||
};
|
||||
|
||||
const handleDeleteButton = (id: string | undefined) => {
|
||||
if (!id) console.error("ID not found", id);
|
||||
|
||||
dispatch(deleteAdmin(id || ""));
|
||||
setDeleteModal(false); // Close the modal only after deletion
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleViewButton = (id: string | undefined) => {
|
||||
if (!id) console.error("ID not found", id);
|
||||
|
||||
dispatch(adminList());
|
||||
setViewModal(false);
|
||||
};
|
||||
|
||||
const handleToggleStatus = () => {
|
||||
if (selectedRow) {
|
||||
// Toggle the opposite of current status
|
||||
const newStatus = selectedRow.statusValue === 1 ? 0 : 1;
|
||||
handleStatusToggle(selectedRow.id, newStatus);
|
||||
const handleDeleteButton = (id: string | undefined) => {
|
||||
if (!id) {
|
||||
console.error("ID not found for viewing.");
|
||||
return;
|
||||
}
|
||||
handleClose();
|
||||
setViewModal(true);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const filteredRows = rows.filter(
|
||||
(row) =>
|
||||
(row.name &&
|
||||
row.name.toLowerCase().includes(searchQuery.toLowerCase())) ||
|
||||
false
|
||||
(row) =>
|
||||
(row.name &&
|
||||
row.name.toLowerCase().includes(searchQuery.toLowerCase())) ||
|
||||
false
|
||||
);
|
||||
|
||||
|
||||
const indexOfLastRow = currentPage * usersPerPage;
|
||||
const indexOfFirstRow = indexOfLastRow - usersPerPage;
|
||||
const currentRows = filteredRows.slice(indexOfFirstRow, indexOfLastRow);
|
||||
|
|
@ -249,8 +252,8 @@ const filteredRows = rows.filter(
|
|||
? "Role"
|
||||
: tableType === "user"
|
||||
? "User"
|
||||
: tableType === "manager"
|
||||
? "Manager"
|
||||
: tableType === "managers"
|
||||
? "Managers"
|
||||
: tableType === "vehicle"
|
||||
? "Vehicle"
|
||||
: "Item"}
|
||||
|
|
@ -421,6 +424,7 @@ const filteredRows = rows.filter(
|
|||
variant="text"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// setSelectedRow(row);
|
||||
setViewModal(true);
|
||||
}}
|
||||
color="primary"
|
||||
|
|
@ -434,15 +438,15 @@ const filteredRows = rows.filter(
|
|||
View
|
||||
</Button>
|
||||
{viewModal && (
|
||||
<ViewModal
|
||||
handleView={() =>
|
||||
handleViewButton(selectedRow?.id)
|
||||
}
|
||||
open={viewModal}
|
||||
setViewModal={setViewModal}
|
||||
id={selectedRow?.id}
|
||||
/>
|
||||
)}
|
||||
<ViewModal
|
||||
handleView={() => handleViewButton(selectedRow?.id)}
|
||||
open={viewModal}
|
||||
setViewModal={setViewModal}
|
||||
id={selectedRow?.id}
|
||||
tableType={tableType}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
<Button
|
||||
variant="text"
|
||||
|
|
@ -481,6 +485,7 @@ const filteredRows = rows.filter(
|
|||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteModal(true);
|
||||
|
||||
}}
|
||||
color="error"
|
||||
sx={{
|
||||
|
|
@ -498,13 +503,16 @@ const filteredRows = rows.filter(
|
|||
|
||||
{/* Modals */}
|
||||
{deleteModal && (
|
||||
<DeleteModal
|
||||
handleDelete={() => handleDeleteButton(selectedRow?.id)}
|
||||
open={deleteModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
id={selectedRow?.id}
|
||||
/>
|
||||
)}
|
||||
<DeleteModal
|
||||
handleDelete={() => handleDeleteButton(selectedRow?.id)}
|
||||
open={deleteModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
id={selectedRow?.id}
|
||||
tableType={tableType}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,10 +13,6 @@ import { RootState } from "../../redux/store/store";
|
|||
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
|
||||
import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
|
||||
|
||||
//Eknoor singh and Jaanvi
|
||||
//date:- 12-Feb-2025
|
||||
//Made a different variable for super admin to access all the details.
|
||||
|
||||
type PropType = {
|
||||
hidden: boolean;
|
||||
};
|
||||
|
|
@ -26,6 +22,7 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
const userRole = useSelector(
|
||||
(state: RootState) => state.profileReducer.user?.userType
|
||||
);
|
||||
|
||||
const baseMenuItems = [
|
||||
{
|
||||
text: "Dashboard",
|
||||
|
|
@ -37,24 +34,25 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/admin-list",
|
||||
},
|
||||
userRole === "admin" && {
|
||||
text: "Users",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/user-list",
|
||||
},
|
||||
userRole === "superadmin" && {
|
||||
text: "Roles",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/role-list",
|
||||
},
|
||||
userRole === "admin" && {
|
||||
text: "Vehicles",
|
||||
text: "Users",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/vehicle-list",
|
||||
url: "/panel/user-list",
|
||||
},
|
||||
userRole === "admin" && {
|
||||
text: "Managers",
|
||||
icon: <ManageAccountsOutlinedIcon />,
|
||||
url: "/panel/manager-list", // Placeholder for now
|
||||
},
|
||||
];
|
||||
|
||||
const filteredMenuItems = baseMenuItems.filter(Boolean);
|
||||
|
||||
return (
|
||||
<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
|
||||
<List dense>
|
||||
|
|
@ -64,7 +62,6 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
disablePadding
|
||||
sx={{ display: "block", py: 1 }}
|
||||
>
|
||||
{/* Wrap ListItemButton with Link to enable routing */}
|
||||
<ListItemButton
|
||||
component={Link}
|
||||
to={item.url}
|
||||
|
|
@ -97,4 +94,4 @@ export default function MenuContent({ hidden }: PropType) {
|
|||
</List>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,98 +1,108 @@
|
|||
import { Box, Button, Modal, Typography } from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { Box, Modal, Typography, Divider, Button } from "@mui/material";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { RootState, AppDispatch } from "../../../redux/store/store";
|
||||
import { deleteManager, fetchManagerList } from "../../../redux/slices/managerSlice";
|
||||
|
||||
type User = {
|
||||
id: number;
|
||||
name: string;
|
||||
email?: string;
|
||||
phone: string;
|
||||
registeredAddress?: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
setDeleteModal: Function;
|
||||
handleDelete: (id: string | undefined) => void;
|
||||
id?: string | undefined;
|
||||
open: boolean;
|
||||
setDeleteModal: (value: boolean) => void;
|
||||
id?: number;
|
||||
tableType?: "admin" | "manager";
|
||||
};
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 330,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: 1.5,
|
||||
boxShadow: 24,
|
||||
p: 3,
|
||||
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,
|
||||
};
|
||||
|
||||
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
|
||||
export default function DeleteModal({ open, setDeleteModal, id, tableType }: Props) {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const adminList = useSelector((state: RootState) => state.adminReducer.admins) || [];
|
||||
const managerList = useSelector((state: RootState) => state.managerReducer.managers) || [];
|
||||
|
||||
export default function DeleteModal({
|
||||
open,
|
||||
setDeleteModal,
|
||||
handleDelete,
|
||||
id,
|
||||
}: Props) {
|
||||
// console.log("DeleteModal opened with ID:", id)
|
||||
const [selectedItem, setSelectedItem] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
align="center"
|
||||
sx={{ flexGrow: 1 }} // This ensures the title takes up available space
|
||||
>
|
||||
Delete Record
|
||||
</Typography>
|
||||
<Box
|
||||
onClick={() => setDeleteModal(false)}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end", // Aligns the close icon to the right
|
||||
marginTop: -3.5
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Box>
|
||||
<Typography
|
||||
id="modal-modal-description"
|
||||
sx={{ mt: 2 }}
|
||||
align="center"
|
||||
>
|
||||
Are you sure you want to delete this record?
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mt: 4,
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
type="button"
|
||||
sx={btnStyle}
|
||||
onClick={() => setDeleteModal(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
type="button"
|
||||
color="primary"
|
||||
sx={btnStyle}
|
||||
onClick={() => handleDelete(id || "")}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
useEffect(() => {
|
||||
if (!id || !tableType) return;
|
||||
|
||||
const dataList: User[] = tableType === "admin" ? adminList : managerList;
|
||||
const item = dataList.find((user) => user.id === id);
|
||||
setSelectedItem(item || null);
|
||||
}, [id, tableType, adminList, managerList]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!id || !tableType) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
let deleteResult;
|
||||
if (tableType === "managers") {
|
||||
deleteResult = await dispatch(deleteManager(id)).unwrap();
|
||||
}
|
||||
|
||||
if (deleteResult) {
|
||||
await dispatch(fetchManagerList()); // Refresh list only if deletion is successful
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error while deleting:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setDeleteModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={() => setDeleteModal(false)} aria-labelledby="modal-title">
|
||||
<Box sx={style}>
|
||||
<Typography variant="h5" fontWeight="bold" sx={{ width: "100%", textAlign: "center" }}>
|
||||
Delete {tableType ? tableType.charAt(0).toUpperCase() + tableType.slice(1) : "User"}
|
||||
</Typography>
|
||||
|
||||
<Divider sx={{ width: "100%" }} />
|
||||
|
||||
{selectedItem ? (
|
||||
<Typography align="center">
|
||||
Are you sure you want to delete <b>{selectedItem.name}</b>?
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography align="center">No {tableType} found with this ID</Typography>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: "flex", gap: 2 }}>
|
||||
<Button variant="contained" color="error" onClick={handleDelete} disabled={loading}>
|
||||
{loading ? "Deleting..." : "Delete"}
|
||||
</Button>
|
||||
<Button variant="outlined" onClick={() => setDeleteModal(false)}>Cancel</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,82 +0,0 @@
|
|||
import { Box, Button, Modal, Typography } from "@mui/material";
|
||||
import { AppDispatch, RootState } from "../../../redux/store/store";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
setViewModal: Function;
|
||||
handleView: (id: string | undefined) => void;
|
||||
id?: string | undefined;
|
||||
};
|
||||
;
|
||||
|
||||
const style = {
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 330,
|
||||
bgcolor: "background.paper",
|
||||
borderRadius: 1.5,
|
||||
boxShadow: 24,
|
||||
p: 3,
|
||||
};
|
||||
|
||||
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize", alignItems: "center" };
|
||||
|
||||
export default function ViewModal({
|
||||
open,
|
||||
setViewModal,
|
||||
id, // Selected user's 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 || null);
|
||||
}
|
||||
}, [id, admins]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
aria-labelledby="modal-modal-title"
|
||||
aria-describedby="modal-modal-description"
|
||||
>
|
||||
<Box sx={style}>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
align="center"
|
||||
>
|
||||
Details of {selectedAdmin?.name}
|
||||
</Typography>
|
||||
{selectedAdmin ? (
|
||||
<>
|
||||
<Typography align="center">Name: {selectedAdmin?.name}</Typography>
|
||||
<Typography align="center">Email: {selectedAdmin?.email}</Typography>
|
||||
<Typography align="center">Phone: {selectedAdmin?.phone}</Typography>
|
||||
<Typography align="center">Address: {selectedAdmin?.registeredAddress}</Typography>
|
||||
</>
|
||||
) : (
|
||||
<Typography align="center">No admin found with this ID</Typography>
|
||||
)}
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 4, gap: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
type="button"
|
||||
sx={btnStyle}
|
||||
onClick={() => setViewModal(false)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,126 +1,95 @@
|
|||
import { Box, Button, Modal, Typography, Divider } from "@mui/material";
|
||||
import { RootState } from "../../../redux/store/store";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Box, Modal, Typography, Divider } from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../redux/store/store";
|
||||
|
||||
type User = {
|
||||
id: number;
|
||||
name: string;
|
||||
email?: string;
|
||||
phone: string;
|
||||
registeredAddress?: string;
|
||||
action?: any;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
setViewModal: Function;
|
||||
id?: string;
|
||||
open: boolean;
|
||||
setViewModal: (value: boolean) => void;
|
||||
id?: number;
|
||||
tableType?: "admin" | "manager";
|
||||
};
|
||||
|
||||
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,
|
||||
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,
|
||||
};
|
||||
|
||||
const btnStyle = {
|
||||
mt: 2,
|
||||
px: 5,
|
||||
py: 1.2,
|
||||
width: "100%",
|
||||
textTransform: "capitalize",
|
||||
};
|
||||
export default function ViewModal({ open, setViewModal, id, tableType }: Props) {
|
||||
const adminList = useSelector((state: RootState) => state.adminReducer.admins) || [];
|
||||
const managerList = useSelector((state: RootState) => state.managerReducer.managers) || [];
|
||||
|
||||
export default function ViewModal({ open, setViewModal, id }: Props) {
|
||||
const { admins } = useSelector((state: RootState) => state.adminReducer);
|
||||
const [selectedAdmin, setSelectedAdmin] = useState<any>(null);
|
||||
const [selectedItem, setSelectedItem] = useState<User | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
const admin = admins.find((admin) => admin.id === id);
|
||||
setSelectedAdmin(admin);
|
||||
}
|
||||
}, [id, admins]);
|
||||
useEffect(() => {
|
||||
if (!id || !tableType) return;
|
||||
|
||||
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}'s Details
|
||||
</Box>
|
||||
<Box
|
||||
onClick={() => setViewModal(false)}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
</Typography>
|
||||
const dataList: User[] = tableType === "admin" ? adminList : managerList;
|
||||
const item = dataList.find((user) => user.id === id);
|
||||
|
||||
<Divider sx={{ width: "100%" }} />
|
||||
if (item) {
|
||||
setSelectedItem(item); // ✅ Updating selected item properly
|
||||
}
|
||||
}, [id, tableType, adminList, managerList]);
|
||||
|
||||
{selectedAdmin ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: "80%",
|
||||
textAlign: "left",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 1.5,
|
||||
whiteSpace: "pre-wrap", // the text wraps properly
|
||||
wordBreak: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
<Typography variant="body1">
|
||||
<b>Name:</b> {selectedAdmin.name}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<strong>Email:</strong> {selectedAdmin.email}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<strong>Phone:</strong> {selectedAdmin.phone}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<strong>Address:</strong>{" "}
|
||||
{selectedAdmin.registeredAddress ?? "N/A"}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Typography align="center">
|
||||
No admin found with this ID
|
||||
</Typography>
|
||||
)}
|
||||
const formattedType = tableType ? tableType.charAt(0).toUpperCase() + tableType.slice(1) : "User";
|
||||
|
||||
{/* <Button variant="contained" color="error" sx={btnStyle} onClick={() => setViewModal(false)}>
|
||||
Close
|
||||
</Button> */}
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
return (
|
||||
<Modal open={open} onClose={() => setViewModal(false)} aria-labelledby="modal-title">
|
||||
<Box sx={style}>
|
||||
<Typography variant="h5" fontWeight="bold" sx={{ width: "100%" }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<Box sx={{ flex: 1, textAlign: "center" }}>
|
||||
{selectedItem?.name ? `${selectedItem.name}'s Details` : `${formattedType} Details`}
|
||||
</Box>
|
||||
<Box onClick={() => setViewModal(false)} sx={{ cursor: "pointer", display: "flex" }}>
|
||||
<CloseIcon />
|
||||
</Box>
|
||||
</Box>
|
||||
</Typography>
|
||||
|
||||
<Divider sx={{ width: "100%" }} />
|
||||
|
||||
{selectedItem ? (
|
||||
<Box sx={{ width: "80%", textAlign: "left", display: "flex", flexDirection: "column", gap: 1.5 }}>
|
||||
<Typography variant="body1">
|
||||
<b>Name:</b> {selectedItem.name || "N/A"}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<b>Email:</b> {selectedItem.email || "N/A"}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<b>Phone:</b> {selectedItem.phone || "N/A"}
|
||||
</Typography>
|
||||
<Typography variant="body1">
|
||||
<b>Address:</b> {selectedItem.registeredAddress || "N/A"}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Typography align="center">No {formattedType} found with this ID</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
150
src/pages/AddManagerModal/index.tsx
Normal file
150
src/pages/AddManagerModal/index.tsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import React, { useState } from "react";
|
||||
import { Box, Button, Typography, Modal, IconButton, TextField } from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { toast } from "sonner";
|
||||
import { addManager } from "../../redux/slices/managerSlice";
|
||||
|
||||
interface AddManagerModalProps {
|
||||
open: boolean;
|
||||
handleClose: () => void;
|
||||
}
|
||||
|
||||
const AddManagerModal: React.FC<AddManagerModalProps> = ({ open, handleClose }) => {
|
||||
// State for input fields
|
||||
const [name, setName] = useState("");
|
||||
const [stationLocation, setStationLocation] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
const roleId = 5; // Fixed role ID
|
||||
const roleName = "Peon"; // Required role name
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// Function to validate form inputs
|
||||
const validateInputs = () => {
|
||||
if (!name || !stationLocation || !phone || !email || !password) {
|
||||
toast.error("All fields are required.");
|
||||
return false;
|
||||
}
|
||||
|
||||
const phoneRegex = /^[0-9]{6,14}$/;
|
||||
if (!phoneRegex.test(phone)) {
|
||||
toast.error("Phone number must be between 6 to 14 digits.");
|
||||
return false;
|
||||
}
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
toast.error("Enter a valid email address.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (password.length < 6) {
|
||||
toast.error("Password must be at least 6 characters long.");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = async () => {
|
||||
if (!validateInputs()) return;
|
||||
|
||||
const managerData = {
|
||||
name,
|
||||
registeredAddress: stationLocation,
|
||||
phone,
|
||||
email,
|
||||
password,
|
||||
roleId,
|
||||
roleName, // ✅ Ensure roleName is correctly included
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await dispatch(addManager(managerData)).unwrap();
|
||||
|
||||
|
||||
|
||||
// ✅ Ensure response contains expected data
|
||||
if (!response || !response.id) {
|
||||
throw new Error("Invalid response from server. ID is missing.");
|
||||
}
|
||||
|
||||
// ✅ Show success message from API if available, fallback if not
|
||||
toast.success(response.message || "Manager added successfully!");
|
||||
|
||||
resetForm();
|
||||
handleClose();
|
||||
} catch (error: any) {
|
||||
console.error("API Error:", error); // ✅ Log error for debugging
|
||||
|
||||
// ✅ Handle both API errors and unexpected errors
|
||||
toast.error(
|
||||
error?.response?.data?.message || error.message || "Failed to add manager"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// Function to reset form fields
|
||||
const resetForm = () => {
|
||||
setName("");
|
||||
setStationLocation("");
|
||||
setPhone("");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={handleClose} aria-labelledby="add-manager-modal">
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 400,
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 24,
|
||||
p: 3,
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
{/* Modal Header */}
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<Typography variant="h6" fontWeight={600}>
|
||||
Add Manager
|
||||
</Typography>
|
||||
<IconButton onClick={handleClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
|
||||
|
||||
{/* Input Fields */}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<TextField label="Manager Name" fullWidth size="small" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<TextField label="Station Location" fullWidth size="small" value={stationLocation} onChange={(e) => setStationLocation(e.target.value)} />
|
||||
<TextField label="Phone Number" fullWidth size="small" value={phone} onChange={(e) => setPhone(e.target.value)} />
|
||||
<TextField label="Email" fullWidth size="small" value={email} onChange={(e) => setEmail(e.target.value)} />
|
||||
<TextField label="Password" type="password" fullWidth size="small" value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||
</Box>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}>
|
||||
<Button variant="contained" onClick={handleSubmit}>
|
||||
Add Manager
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddManagerModal;
|
||||
191
src/pages/EditUserModal/index.tsx
Normal file
191
src/pages/EditUserModal/index.tsx
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
import React, { useEffect } from "react";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Typography,
|
||||
TextField,
|
||||
Modal,
|
||||
IconButton,
|
||||
} from "@mui/material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
|
||||
interface EditModalProps {
|
||||
open: boolean;
|
||||
handleClose: () => void;
|
||||
handleCreate: (data: FormData) => void;
|
||||
handleUpdate: (id: string, data: FormData) => void;
|
||||
editRow: any | null;
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
managerName: string;
|
||||
stationName: string;
|
||||
stationLocation: string;
|
||||
phoneNumber: string;
|
||||
}
|
||||
|
||||
const EditModal: React.FC<EditModalProps> = ({
|
||||
open,
|
||||
handleClose,
|
||||
handleCreate,
|
||||
handleUpdate,
|
||||
editRow,
|
||||
}) => {
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
reset,
|
||||
} = useForm<FormData>({
|
||||
defaultValues: {
|
||||
managerName: "",
|
||||
stationName: "",
|
||||
stationLocation: "",
|
||||
phoneNumber: "",
|
||||
},
|
||||
});
|
||||
|
||||
// Populate form fields when `editRow` changes
|
||||
useEffect(() => {
|
||||
if (editRow) {
|
||||
setValue("managerName", editRow.name || "");
|
||||
setValue("stationName", editRow.stationName || "");
|
||||
setValue("stationLocation", editRow.registeredAddress || "");
|
||||
setValue("phoneNumber", editRow.phone || "");
|
||||
} else {
|
||||
reset({ // ✅ Ensure default values are reset when adding a new manager
|
||||
managerName: "",
|
||||
stationName: "",
|
||||
stationLocation: "",
|
||||
phoneNumber: "",
|
||||
});
|
||||
}
|
||||
}, [editRow, setValue, reset]);
|
||||
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
if (editRow) {
|
||||
handleUpdate({
|
||||
id: editRow.id,
|
||||
managerName: data.managerName,
|
||||
stationLocation: data.stationLocation,
|
||||
phoneNumber: data.phoneNumber
|
||||
});
|
||||
} else {
|
||||
handleCreate(data);
|
||||
}
|
||||
handleClose();
|
||||
reset();
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={handleClose} aria-labelledby="edit-manager-modal">
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 400,
|
||||
bgcolor: "background.paper",
|
||||
boxShadow: 24,
|
||||
p: 3,
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<Typography variant="h6" fontWeight={600}>
|
||||
{editRow ? "Edit Manager" : "Add Manager"}
|
||||
</Typography>
|
||||
<IconButton onClick={handleClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{/* Horizontal Line */}
|
||||
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
|
||||
|
||||
{/* Input Fields */}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<Box sx={{ display: "flex", gap: 2 }}>
|
||||
{/* Manager Name */}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
|
||||
<Typography variant="body2" fontWeight={500} mb={0.5}>Manager Name</Typography>
|
||||
<Controller
|
||||
name="managerName"
|
||||
control={control}
|
||||
rules={{ required: "Manager Name is required" }}
|
||||
render={({ field }) => (
|
||||
<TextField {...field} fullWidth placeholder="Enter Manager Name" size="small" error={!!errors.managerName} helperText={errors.managerName?.message} />
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Station Name */}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
|
||||
<Typography variant="body2" fontWeight={500} mb={0.5}>Station Name</Typography>
|
||||
<Controller
|
||||
name="stationName"
|
||||
control={control}
|
||||
rules={{ required: "Station Name is required" }}
|
||||
render={({ field }) => (
|
||||
<TextField {...field} fullWidth placeholder="Enter Station Name" size="small" error={!!errors.stationName} helperText={errors.stationName?.message} />
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 2 }}>
|
||||
{/* Station Location */}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
|
||||
<Typography variant="body2" fontWeight={500} mb={0.5}>Station Location</Typography>
|
||||
<Controller
|
||||
name="stationLocation"
|
||||
control={control}
|
||||
rules={{ required: "Station Location is required" }}
|
||||
render={({ field }) => (
|
||||
<TextField {...field} fullWidth placeholder="Enter Station Location" size="small" error={!!errors.stationLocation} helperText={errors.stationLocation?.message} />
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Phone Number */}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
|
||||
<Typography variant="body2" fontWeight={500} mb={0.5}>Phone Number</Typography>
|
||||
<Controller
|
||||
name="phoneNumber"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Phone number is required",
|
||||
pattern: {
|
||||
value: /^[0-9]+$/,
|
||||
message: "Only numbers are allowed",
|
||||
},
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField {...field} fullWidth placeholder="Enter Phone Number" size="small" error={!!errors.phoneNumber} helperText={errors.phoneNumber?.message} />
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}>
|
||||
<Button variant="contained" type="submit">
|
||||
{editRow ? "Update" : "Create"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditModal;
|
||||
240
src/pages/ManagerList/index.tsx
Normal file
240
src/pages/ManagerList/index.tsx
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { Box, Button, Typography, TextField, InputAdornment, IconButton } from "@mui/material";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import EqualizerIcon from "@mui/icons-material/Tune";
|
||||
import CustomTable, { Column } from "../../components/CustomTable";
|
||||
import AddManagerModal from "../../pages/AddManagerModal";
|
||||
import EditUserModal from "../EditUserModal";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { fetchManagerList, addManager,updateManager,deleteManager } from "../../redux/slices/managerSlice";
|
||||
import { RootState, AppDispatch } from "../../redux/store/store";
|
||||
|
||||
|
||||
export default function ManagerList() {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const { managers, isLoading } = useSelector((state: RootState) => state.managerReducer);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [addButtonModal, setAddButtonModal] = useState(false);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [rowData, setRowData] = useState(null);
|
||||
const [viewModal, setViewModal] = useState(false);
|
||||
const [deleteModal, setDeleteModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchManagerList()); // Fetch data when component mounts
|
||||
}, [dispatch]);
|
||||
|
||||
|
||||
|
||||
// Function to handle adding a manager
|
||||
const handleAddManager = async (newManager: {
|
||||
name: string;
|
||||
registeredAddress: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
password: string;
|
||||
}) => {
|
||||
await dispatch(addManager(newManager));
|
||||
dispatch(fetchManagerList()); // Refresh list after adding
|
||||
handleCloseModal(); // Close modal after adding
|
||||
};
|
||||
|
||||
|
||||
|
||||
// Function to handle updating a
|
||||
const handleUpdateManager = async (updatedManager) => {
|
||||
if (!updatedManager || typeof updatedManager !== "object") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!rowData) {
|
||||
return;
|
||||
}
|
||||
|
||||
const managerId = rowData.id;
|
||||
|
||||
if (!updatedManager.managerName || !updatedManager.stationLocation || !updatedManager.phoneNumber) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await dispatch(updateManager({
|
||||
id: managerId,
|
||||
name: updatedManager.managerName,
|
||||
registeredAddress: updatedManager.stationLocation,
|
||||
phone: updatedManager.phoneNumber,
|
||||
}));
|
||||
|
||||
if (response?.payload?.statusCode === 200) {
|
||||
await dispatch(fetchManagerList()); // ✅ Refresh list after update
|
||||
}
|
||||
|
||||
handleCloseModal();
|
||||
} catch (error) {
|
||||
console.error("❌ Update failed:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Function to handle deleting a manager
|
||||
|
||||
|
||||
const handleDeleteManager = async () => {
|
||||
if (!rowData?.id) {
|
||||
console.error("❌ No manager ID found for deletion!");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
const response = await dispatch(deleteManager(rowData.id));
|
||||
|
||||
if (response?.payload) {
|
||||
|
||||
dispatch(fetchManagerList()); // Refresh list after deletion
|
||||
} else {
|
||||
console.error("❌ Deletion failed!", response);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error deleting manager:", error);
|
||||
}
|
||||
|
||||
setDeleteModal(false); // Close delete modal
|
||||
|
||||
handleCloseModal();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Function to handle search input change
|
||||
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(event.target.value);
|
||||
};
|
||||
|
||||
// Open the Add Manager Modal
|
||||
const handleClickOpen = () => {
|
||||
setRowData(null);
|
||||
setAddButtonModal(true);
|
||||
};
|
||||
|
||||
// Close all modals
|
||||
const handleCloseModal = () => {
|
||||
setAddButtonModal(false);
|
||||
setModalOpen(false);
|
||||
setRowData(null);
|
||||
};
|
||||
|
||||
// Table columns definition
|
||||
const managerColumns: Column[] = [
|
||||
{ id: "name", label: "Manager Name" },
|
||||
{ id: "registeredAddress", label: "Station Location" },
|
||||
{ id: "phone", label: "Phone Number" },
|
||||
{ id: "action", label: "Action", align: "center" },
|
||||
];
|
||||
|
||||
// Filtered manager list based on search input
|
||||
const filteredManagers = managers.filter((manager) =>
|
||||
Object.values(manager).some((value) =>
|
||||
typeof value === "string" && value.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Header Section */}
|
||||
<Box sx={{ width: "100%", display: "flex", flexDirection: "column", gap: 2, mt: 2 }}>
|
||||
<Typography component="h2" variant="h6" sx={{ fontWeight: 600 }}>
|
||||
Managers
|
||||
</Typography>
|
||||
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
placeholder="Search"
|
||||
value={search}
|
||||
onChange={handleSearchChange}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||||
<Button variant="contained" size="medium" onClick={handleClickOpen}>
|
||||
Add Manager
|
||||
</Button>
|
||||
<IconButton>
|
||||
<EqualizerIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Table Section */}
|
||||
{isLoading ? (
|
||||
<Typography>Loading managers...</Typography>
|
||||
) : (
|
||||
<CustomTable
|
||||
columns={managerColumns}
|
||||
rows={filteredManagers.map((manager) => ({
|
||||
id: manager.id,
|
||||
name: manager.name,
|
||||
registeredAddress: manager.registeredAddress,
|
||||
phone: manager.phone,
|
||||
action: (
|
||||
<Box sx={{ display: "flex", gap: 1 }}>
|
||||
<Button onClick={() => { setRowData(manager); setModalOpen(true); }}>Edit</Button>
|
||||
<Button onClick={() => { setRowData(manager); setViewModal(true); }}>View</Button>
|
||||
<Button color="error" onClick={() => { setRowData(manager); setDeleteModal(true); }}>
|
||||
Delete
|
||||
</Button>
|
||||
|
||||
</Box>
|
||||
),
|
||||
|
||||
}))}
|
||||
tableType="managers"
|
||||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
setViewModal={setViewModal}
|
||||
viewModal={viewModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
deleteModal={deleteModal}
|
||||
handleDeleteButton={handleDeleteManager}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
<EditUserModal
|
||||
open={modalOpen}
|
||||
handleClose={handleCloseModal}
|
||||
editRow={rowData}
|
||||
handleUpdate={handleUpdateManager} // Pass function
|
||||
/>
|
||||
|
||||
|
||||
|
||||
|
||||
<AddManagerModal
|
||||
open={addButtonModal}
|
||||
handleClose={handleCloseModal}
|
||||
handleAddManager={(data) =>
|
||||
handleAddManager({
|
||||
name: data.managerName,
|
||||
registeredAddress: data.stationLocation,
|
||||
phone: data.phoneNumber,
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import profileReducer from "./slices/profileSlice";
|
|||
import userReducer from "./slices/userSlice.ts";
|
||||
import roleReducer from "./slices/roleSlice.ts";
|
||||
import vehicleReducer from "./slices/VehicleSlice.ts";
|
||||
import managerReducer from "../redux/slices/managerSlice.ts";
|
||||
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
|
|
@ -14,7 +15,9 @@ const rootReducer = combineReducers({
|
|||
profileReducer,
|
||||
userReducer,
|
||||
roleReducer,
|
||||
vehicleReducer
|
||||
vehicleReducer,
|
||||
managerReducer,
|
||||
// Add other reducers here...
|
||||
});
|
||||
|
||||
export type RootState = ReturnType<typeof rootReducer>;
|
||||
|
|
|
|||
189
src/redux/slices/managerSlice.ts
Normal file
189
src/redux/slices/managerSlice.ts
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||
import http from "../../lib/https";
|
||||
import { toast } from "sonner";
|
||||
|
||||
// Define TypeScript types
|
||||
interface Manager {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone?: string;
|
||||
role: string;
|
||||
}
|
||||
|
||||
interface ManagerState {
|
||||
managers: Manager[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
// Initial state
|
||||
const initialState: ManagerState = {
|
||||
managers: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
// Fetch Manager List
|
||||
export const fetchManagerList = createAsyncThunk<Manager[], void, { rejectValue: string }>(
|
||||
"fetchManagers",
|
||||
async (_, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.get("manager-list");
|
||||
|
||||
if (!response.data?.data) throw new Error("Invalid API response");
|
||||
|
||||
return response.data.data;
|
||||
} catch (error: any) {
|
||||
toast.error("Error Fetching Managers: " + error);
|
||||
return rejectWithValue(
|
||||
error?.response?.data?.message || "An error occurred"
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Create Manager
|
||||
export const addManager = createAsyncThunk(
|
||||
"addManager",
|
||||
async (data, { rejectWithValue }) => {
|
||||
try {
|
||||
|
||||
const response = await http.post("create-manager", data);
|
||||
toast.success("Manager created successfully");
|
||||
|
||||
// ✅ Ensure the response contains the expected data
|
||||
if (!response.data || !response.data.data || !response.data.data.id) {
|
||||
console.error("❌ ERROR: Missing manager ID in response", response.data);
|
||||
throw new Error("Invalid API response: Missing manager ID");
|
||||
}
|
||||
|
||||
return response.data.data;
|
||||
} catch (error: any) {
|
||||
console.error("❌ API Error:", error?.response?.data || error);
|
||||
return rejectWithValue(error?.response?.data?.message || "An error occurred");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const updateManager = createAsyncThunk<
|
||||
Manager,
|
||||
{ id: string; name?: string; email?: string; phone?: string; role?: string; registeredAddress?: string },
|
||||
{ rejectValue: string }
|
||||
>(
|
||||
"updateManager",
|
||||
async ({ id, ...managerData }, { rejectWithValue }) => {
|
||||
try {
|
||||
|
||||
|
||||
const response = await http.put(`${id}/update-manager`, managerData);
|
||||
|
||||
|
||||
toast.success("Manager updated successfully!");
|
||||
return response.data.data; // ✅ Extracting correct response data
|
||||
} catch (error: any) {
|
||||
|
||||
toast.error("Error updating manager: " + error);
|
||||
return rejectWithValue(
|
||||
error.response?.data?.message || "An error occurred"
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Delete Manager
|
||||
export const deleteManager = createAsyncThunk<
|
||||
string,
|
||||
string,
|
||||
{ rejectValue: string }
|
||||
>(
|
||||
"deleteManager",
|
||||
async (id, { rejectWithValue }) => {
|
||||
try {
|
||||
await http.delete(`/${id}/delete-manager`);
|
||||
toast.success("Manager deleted successfully!");
|
||||
return id; // Return the ID of the deleted manager
|
||||
} catch (error: any) {
|
||||
toast.error("Error deleting manager: " + error);
|
||||
return rejectWithValue(
|
||||
error.response?.data?.message || "An error occurred"
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Create Slice
|
||||
const managerSlice = createSlice({
|
||||
name: "fetchManagers",
|
||||
initialState,
|
||||
reducers: {},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
// Fetch Managers
|
||||
.addCase(fetchManagerList.pending, (state) => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(
|
||||
fetchManagerList.fulfilled,
|
||||
(state, action: PayloadAction<Manager[]>) => {
|
||||
state.loading = false;
|
||||
state.managers = action.payload;
|
||||
}
|
||||
)
|
||||
.addCase(fetchManagerList.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.payload || "Failed to fetch managers";
|
||||
})
|
||||
|
||||
// Add Manager
|
||||
.addCase(addManager.pending, (state) => {
|
||||
state.loading = true;
|
||||
})
|
||||
.addCase(addManager.fulfilled, (state, action: PayloadAction<Manager>) => {
|
||||
state.loading = false;
|
||||
state.managers.push(action.payload);
|
||||
})
|
||||
.addCase(addManager.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
})
|
||||
|
||||
// Update Manager
|
||||
.addCase(updateManager.pending, (state) => {
|
||||
state.loading = true;
|
||||
})
|
||||
.addCase(updateManager.fulfilled, (state, action) => {
|
||||
state.loading = false;
|
||||
const updatedManager = action.payload;
|
||||
const index = state.managers.findIndex(m => m.id === updatedManager.id);
|
||||
if (index !== -1) {
|
||||
state.managers[index] = { ...state.managers[index], ...updatedManager }; // 🔥 Merge updated fields
|
||||
}
|
||||
})
|
||||
|
||||
.addCase(updateManager.rejected, (state) => {
|
||||
state.loading = false;
|
||||
})
|
||||
|
||||
// Delete Manager
|
||||
// Delete Manager
|
||||
.addCase(deleteManager.pending, (state) => {
|
||||
state.loading = true;
|
||||
})
|
||||
.addCase(deleteManager.fulfilled, (state, action) => {
|
||||
state.loading = false;
|
||||
state.managers = state.managers.filter(manager => manager.id !== action.payload);
|
||||
})
|
||||
.addCase(deleteManager.rejected, (state) => {
|
||||
state.loading = false;
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
export default managerSlice.reducer;
|
||||
|
|
@ -16,6 +16,8 @@ const ProfilePage = lazy(() => import("./pages/ProfilePage"));
|
|||
const NotFoundPage = lazy(() => import("./pages/NotFound"));
|
||||
const UserList = lazy(() => import("./pages/UserList"));
|
||||
const PermissionsTable = lazy(() => import("./pages/PermissionTable"));
|
||||
const ManagerList = lazy(() => import("./pages/ManagerList"));
|
||||
|
||||
|
||||
interface ProtectedRouteProps {
|
||||
caps: string[];
|
||||
|
|
@ -87,6 +89,18 @@ export default function AppRouter() {
|
|||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="manager-list"
|
||||
element={
|
||||
<ProtectedRoute
|
||||
caps={[]}
|
||||
component={<ManagerList />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
<Route
|
||||
path="role-list"
|
||||
element={
|
||||
|
|
|
|||
Loading…
Reference in a new issue