835 lines
20 KiB
TypeScript
835 lines
20 KiB
TypeScript
// import { useEffect, useState } from "react";
|
|
// import {
|
|
// Box,
|
|
// Button,
|
|
// Typography,
|
|
// TextField,
|
|
// InputAdornment,
|
|
// Paper,
|
|
// Table,
|
|
// TableBody,
|
|
// TableCell,
|
|
// TableContainer,
|
|
// TableHead,
|
|
// TableRow,
|
|
// Pagination,
|
|
// IconButton,
|
|
// } from "@mui/material";
|
|
// import SearchIcon from "@mui/icons-material/Search";
|
|
// import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
|
// import TuneIcon from "@mui/icons-material/Tune";
|
|
// import { useDispatch, useSelector } from "react-redux";
|
|
// import { userList } from "../../redux/slices/userSlice"; // Make sure userSlice exists
|
|
// import { AppDispatch, RootState } from "../../redux/store/store";
|
|
|
|
// export default function UserList() {
|
|
// const [searchQuery, setSearchQuery] = useState("");
|
|
// const [currentPage, setCurrentPage] = useState(1);
|
|
// const usersPerPage = 10;
|
|
|
|
// const dispatch = useDispatch<AppDispatch>();
|
|
// const users = useSelector((state: RootState) => state.userReducer.users);
|
|
|
|
// useEffect(() => {
|
|
// dispatch(userList());
|
|
// }, [dispatch]);
|
|
|
|
// const staticUsers = [
|
|
// {
|
|
// name: "Alice Johnson",
|
|
// email: "alice@example.com",
|
|
// role: "User",
|
|
// phone: "+1 234 567 8901",
|
|
// },
|
|
// {
|
|
// name: "Bob Brown",
|
|
// email: "bob@example.com",
|
|
// role: "Admin",
|
|
// phone: "+1 987 654 3210",
|
|
// },
|
|
// {
|
|
// name: "Charlie Davis",
|
|
// email: "charlie@example.com",
|
|
// role: "User",
|
|
// phone: "+1 312 555 7890",
|
|
// },
|
|
// {
|
|
// name: "Alice Johnson",
|
|
// email: "alice@example.com",
|
|
// role: "User",
|
|
// phone: "+1 234 567 8901",
|
|
// },
|
|
// {
|
|
// name: "Bob Brown",
|
|
// email: "bob@example.com",
|
|
// role: "Admin",
|
|
// phone: "+1 987 654 3210",
|
|
// },
|
|
// {
|
|
// name: "Charlie Davis",
|
|
// email: "charlie@example.com",
|
|
// role: "User",
|
|
// phone: "+1 312 555 7890",
|
|
// },
|
|
// {
|
|
// name: "Bob Brown",
|
|
// email: "bob@example.com",
|
|
// role: "Admin",
|
|
// phone: "+1 987 654 3210",
|
|
// },
|
|
// {
|
|
// name: "Charlie Davis",
|
|
// email: "charlie@example.com",
|
|
// role: "User",
|
|
// phone: "+1 312 555 7890",
|
|
// },
|
|
// ];
|
|
|
|
// const userData = users.length ? users : staticUsers;
|
|
|
|
// const filteredUsers = userData.filter((user) =>
|
|
// user.name.toLowerCase().includes(searchQuery.toLowerCase())
|
|
// );
|
|
|
|
// const indexOfLastUser = currentPage * usersPerPage;
|
|
// const indexOfFirstUser = indexOfLastUser - usersPerPage;
|
|
// const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
|
|
|
|
// const handlePageChange = (event, value) => {
|
|
// setCurrentPage(value);
|
|
// };
|
|
|
|
// return (
|
|
// <Box
|
|
// sx={{
|
|
// width: "calc(100% - 48px)",
|
|
// margin: "0 auto",
|
|
// padding: "24px",
|
|
// backgroundColor: "#1C1C1C",
|
|
// borderRadius: "12px",
|
|
// }}
|
|
// >
|
|
// <Typography
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// fontWeight: 500,
|
|
// fontSize: "18px",
|
|
// fontFamily: "Gilroy",
|
|
// }}
|
|
// >
|
|
// User List
|
|
// </Typography>
|
|
|
|
// {/* Search & Buttons Section */}
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// gap: "16px",
|
|
// marginTop: "16px",
|
|
// alignItems: "center",
|
|
// fontFamily: "Gilroy",
|
|
// }}
|
|
// >
|
|
// <TextField
|
|
// variant="outlined"
|
|
// placeholder="Search Users"
|
|
// sx={{
|
|
// width: "422px",
|
|
// backgroundColor: "#272727",
|
|
// borderRadius: "12px",
|
|
// input: { color: "#FFFFFF" },
|
|
// "& .MuiOutlinedInput-root": {
|
|
// borderRadius: "12px",
|
|
// "& fieldset": { borderColor: "#FFFFFF" },
|
|
// "&:hover fieldset": { borderColor: "#FFFFFF" },
|
|
// "&.Mui-focused fieldset": {
|
|
// borderColor: "#52ACDF",
|
|
// },
|
|
// },
|
|
// }}
|
|
// InputProps={{
|
|
// startAdornment: (
|
|
// <InputAdornment position="start">
|
|
// <SearchIcon sx={{ color: "#FFFFFF" }} />
|
|
// </InputAdornment>
|
|
// ),
|
|
// }}
|
|
// value={searchQuery}
|
|
// onChange={(e) => setSearchQuery(e.target.value)}
|
|
// />
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// justifyContent: "flex-end",
|
|
// width: "100%",
|
|
// }}
|
|
// >
|
|
// <Button
|
|
// sx={{
|
|
// backgroundColor: "#52ACDF",
|
|
// color: "white",
|
|
// borderRadius: "8px",
|
|
// width: "184px",
|
|
// "&:hover": { backgroundColor: "#439BC1" },
|
|
// }}
|
|
// >
|
|
// Add User
|
|
// </Button>
|
|
// </Box>
|
|
|
|
// <IconButton
|
|
// sx={{
|
|
// width: "44px",
|
|
// height: "44px",
|
|
// borderRadius: "8px",
|
|
// backgroundColor: "#272727",
|
|
// color: "#52ACDF",
|
|
// "&:hover": { backgroundColor: "#333333" },
|
|
// }}
|
|
// >
|
|
// <TuneIcon />
|
|
// </IconButton>
|
|
// </Box>
|
|
|
|
// {/* Table Section */}
|
|
// <TableContainer
|
|
// component={Paper}
|
|
// sx={{
|
|
// marginTop: "24px",
|
|
// backgroundColor: "#1C1C1C",
|
|
// borderRadius: "12px",
|
|
// overflow: "hidden",
|
|
// }}
|
|
// >
|
|
// <Table>
|
|
// <TableHead sx={{ backgroundColor: "#272727" }}>
|
|
// <TableRow>
|
|
// {["Name", "Email", "Role", "Phone", "Action"].map(
|
|
// (header) => (
|
|
// <TableCell
|
|
// key={header}
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// fontWeight: "bold",
|
|
// }}
|
|
// >
|
|
// {header}
|
|
// </TableCell>
|
|
// )
|
|
// )}
|
|
// </TableRow>
|
|
// </TableHead>
|
|
// <TableBody>
|
|
// {currentUsers.map((user, index) => (
|
|
// <TableRow
|
|
// key={index}
|
|
// sx={{ backgroundColor: "#1C1C1C" }}
|
|
// >
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// {user.name}
|
|
// </TableCell>
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// {user.email}
|
|
// </TableCell>
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// {user.role}
|
|
// </TableCell>
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// {user.phone}
|
|
// </TableCell>
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// <IconButton size="small">
|
|
// <MoreHorizIcon
|
|
// sx={{ color: "#FFFFFF" }}
|
|
// />
|
|
// </IconButton>
|
|
// </TableCell>
|
|
// </TableRow>
|
|
// ))}
|
|
// </TableBody>
|
|
// </Table>
|
|
// </TableContainer>
|
|
|
|
// {/* Pagination */}
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// justifyContent: "flex-end",
|
|
// alignItems: "center",
|
|
// marginTop: "16px",
|
|
// }}
|
|
// >
|
|
// <Typography
|
|
// sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
|
|
// >
|
|
// Page Number :
|
|
// </Typography>
|
|
// <Pagination
|
|
// count={Math.ceil(filteredUsers.length / usersPerPage)}
|
|
// page={currentPage}
|
|
// onChange={handlePageChange}
|
|
// siblingCount={0}
|
|
// boundaryCount={0}
|
|
// sx={{
|
|
// "& .MuiPaginationItem-root": {
|
|
// color: "white",
|
|
// borderRadius: "0px",
|
|
// },
|
|
// "& .MuiPaginationItem-page.Mui-selected": {
|
|
// backgroundColor: "transparent",
|
|
// fontWeight: "bold",
|
|
// color: "#FFFFFF",
|
|
// },
|
|
// }}
|
|
// />
|
|
// </Box>
|
|
// </Box>
|
|
// );
|
|
// }
|
|
// import { useEffect, useState } from "react";
|
|
// import {
|
|
// Box,
|
|
// Button,
|
|
// Typography,
|
|
// TextField,
|
|
// InputAdornment,
|
|
// Paper,
|
|
// Table,
|
|
// TableBody,
|
|
// TableCell,
|
|
// TableContainer,
|
|
// TableHead,
|
|
// TableRow,
|
|
// Pagination,
|
|
// IconButton,
|
|
// } from "@mui/material";
|
|
// import SearchIcon from "@mui/icons-material/Search";
|
|
// import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
|
// import TuneIcon from "@mui/icons-material/Tune";
|
|
// import { useDispatch, useSelector } from "react-redux";
|
|
// import { adminList } from "../../redux/slices/adminSlice";
|
|
// import { AppDispatch, RootState } from "../../redux/store/store";
|
|
|
|
// export default function AdminList() {
|
|
// const [searchQuery, setSearchQuery] = useState("");
|
|
// const [currentPage, setCurrentPage] = useState(1);
|
|
// const adminsPerPage = 10;
|
|
|
|
// const dispatch = useDispatch<AppDispatch>();
|
|
// const admins = useSelector((state: RootState) => state.adminReducer.admins);
|
|
|
|
// useEffect(() => {
|
|
// dispatch(adminList());
|
|
// }, [dispatch]);
|
|
|
|
// const staticAdmins = [
|
|
// {
|
|
// name: "John Doe",
|
|
// location: "New York",
|
|
// managerAssigned: "Alice Johnson",
|
|
// vehicle: "Tesla Model S",
|
|
// phone: "+1 234 567 8901",
|
|
// },
|
|
// {
|
|
// name: "Jane Smith",
|
|
// location: "Los Angeles",
|
|
// managerAssigned: "Bob Brown",
|
|
// vehicle: "Ford F-150",
|
|
// phone: "+1 987 654 3210",
|
|
// },
|
|
// {
|
|
// name: "Michael Brown",
|
|
// location: "Chicago",
|
|
// managerAssigned: "Sarah Lee",
|
|
// vehicle: "Chevrolet Bolt",
|
|
// phone: "+1 312 555 7890",
|
|
// },
|
|
// {
|
|
// name: "Emily Davis",
|
|
// location: "Houston",
|
|
// managerAssigned: "Tom Wilson",
|
|
// vehicle: "Nissan Leaf",
|
|
// phone: "+1 713 444 5678",
|
|
// },
|
|
// {
|
|
// name: "Daniel Martinez",
|
|
// location: "Phoenix",
|
|
// managerAssigned: "Jessica White",
|
|
// vehicle: "BMW i3",
|
|
// phone: "+1 602 999 4321",
|
|
// },
|
|
// {
|
|
// name: "Sophia Miller",
|
|
// location: "Philadelphia",
|
|
// managerAssigned: "Mark Adams",
|
|
// vehicle: "Audi e-tron",
|
|
// phone: "+1 215 777 6543",
|
|
// },
|
|
// {
|
|
// name: "James Anderson",
|
|
// location: "San Antonio",
|
|
// managerAssigned: "Emma Thomas",
|
|
// vehicle: "Hyundai Kona EV",
|
|
// phone: "+1 210 321 8765",
|
|
// },
|
|
// {
|
|
// name: "James Anderson",
|
|
// location: "San Antonio",
|
|
// managerAssigned: "Emma Thomas",
|
|
// vehicle: "Hyundai Kona EV",
|
|
// phone: "+1 210 321 8765",
|
|
// },
|
|
// ];
|
|
|
|
// const adminData = admins.length ? admins : staticAdmins;
|
|
|
|
// const filteredAdmins = adminData.filter((admin) =>
|
|
// admin.name.toLowerCase().includes(searchQuery.toLowerCase())
|
|
// );
|
|
|
|
// const indexOfLastAdmin = currentPage * adminsPerPage;
|
|
// const indexOfFirstAdmin = indexOfLastAdmin - adminsPerPage;
|
|
// const currentAdmins = filteredAdmins.slice(
|
|
// indexOfFirstAdmin,
|
|
// indexOfLastAdmin
|
|
// );
|
|
|
|
// const handlePageChange = (event, value) => {
|
|
// setCurrentPage(value);
|
|
// };
|
|
|
|
// return (
|
|
// <Box
|
|
// sx={{
|
|
// width: "calc(100% - 48px)",
|
|
// margin: "0 auto",
|
|
// padding: "24px",
|
|
// backgroundColor: "#1C1C1C",
|
|
// borderRadius: "12px",
|
|
// }}
|
|
// >
|
|
// <Typography
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// fontWeight: 500,
|
|
// fontSize: "18px",
|
|
// fontFamily: "Gilroy",
|
|
// }}
|
|
// >
|
|
// Charge stations
|
|
// </Typography>
|
|
|
|
// {/* Search & Buttons Section */}
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// gap: "16px",
|
|
// marginTop: "16px",
|
|
// alignItems: "center",
|
|
// fontFamily: "Gilroy",
|
|
// }}
|
|
// >
|
|
// <TextField
|
|
// variant="outlined"
|
|
// placeholder="Search Charge stations"
|
|
// sx={{
|
|
// width: "422px",
|
|
// backgroundColor: "#272727",
|
|
|
|
// borderRadius: "12px",
|
|
// input: { color: "#FFFFFF" },
|
|
// "& .MuiOutlinedInput-root": {
|
|
// borderRadius: "12px",
|
|
// "& fieldset": { borderColor: "#FFFFFF" },
|
|
// "&:hover fieldset": { borderColor: "#FFFFFF" },
|
|
// "&.Mui-focused fieldset": {
|
|
// borderColor: "#52ACDF",
|
|
// },
|
|
// },
|
|
// }}
|
|
// InputProps={{
|
|
// startAdornment: (
|
|
// <InputAdornment position="start">
|
|
// <SearchIcon sx={{ color: "#FFFFFF" }} />
|
|
// </InputAdornment>
|
|
// ),
|
|
// }}
|
|
// value={searchQuery}
|
|
// onChange={(e) => setSearchQuery(e.target.value)}
|
|
// />
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// justifyContent: "flex-end",
|
|
// width: "100%",
|
|
// }}
|
|
// >
|
|
// <Button
|
|
// sx={{
|
|
// backgroundColor: "#52ACDF",
|
|
// color: "white",
|
|
// borderRadius: "8px",
|
|
// width: "184px",
|
|
// "&:hover": {
|
|
// backgroundColor: "#439BC1",
|
|
// },
|
|
// }}
|
|
// >
|
|
// Add Charge Stations
|
|
// </Button>
|
|
// </Box>
|
|
|
|
// <IconButton
|
|
// sx={{
|
|
// width: "44px",
|
|
// height: "44px",
|
|
// borderRadius: "8px",
|
|
// backgroundColor: "#272727",
|
|
// color: "#52ACDF",
|
|
// "&:hover": { backgroundColor: "#333333" },
|
|
// }}
|
|
// >
|
|
// <TuneIcon />
|
|
// </IconButton>
|
|
// </Box>
|
|
|
|
// {/* Table Section */}
|
|
// <TableContainer
|
|
// component={Paper}
|
|
// sx={{
|
|
// marginTop: "24px",
|
|
// backgroundColor: "#1C1C1C",
|
|
// borderRadius: "12px",
|
|
// overflow: "hidden",
|
|
// }}
|
|
// >
|
|
// <Table>
|
|
// <TableHead sx={{ backgroundColor: "#272727" }}>
|
|
// <TableRow>
|
|
// {[
|
|
// "Name",
|
|
// "Location",
|
|
// "Manager Assigned",
|
|
// "Vehicle",
|
|
// "Phone Number",
|
|
// "Action",
|
|
// ].map((header) => (
|
|
// <TableCell
|
|
// key={header}
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// fontWeight: "bold",
|
|
// }}
|
|
// >
|
|
// {header}
|
|
// </TableCell>
|
|
// ))}
|
|
// </TableRow>
|
|
// </TableHead>
|
|
// <TableBody>
|
|
// {currentAdmins.map((admin, index) => (
|
|
// <TableRow
|
|
// key={index}
|
|
// sx={{ backgroundColor: "#1C1C1C" }}
|
|
// >
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// {admin.name}
|
|
// </TableCell>
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// {admin.location || "N/A"}
|
|
// </TableCell>
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// {admin.managerAssigned || "N/A"}
|
|
// </TableCell>
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// {admin.vehicle || "N/A"}{" "}
|
|
// <Typography
|
|
// component="span"
|
|
// sx={{
|
|
// color: "#52ACDF",
|
|
// cursor: "pointer",
|
|
// textDecoration: "none",
|
|
// "&:hover": {
|
|
// textDecoration: "underline",
|
|
// },
|
|
// }}
|
|
// >
|
|
// +6 more
|
|
// </Typography>
|
|
// </TableCell>
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// {admin.phone}
|
|
// </TableCell>
|
|
// <TableCell
|
|
// sx={{
|
|
// color: "#FFFFFF",
|
|
// borderBottom: "1px solid #2A2A2A",
|
|
// }}
|
|
// >
|
|
// <IconButton size="small">
|
|
// <MoreHorizIcon
|
|
// sx={{ color: "#FFFFFF" }}
|
|
// />
|
|
// </IconButton>
|
|
// </TableCell>
|
|
// </TableRow>
|
|
// ))}
|
|
// </TableBody>
|
|
// </Table>
|
|
// </TableContainer>
|
|
|
|
// {/* Pagination */}
|
|
// <Box
|
|
// sx={{
|
|
// display: "flex",
|
|
// justifyContent: "flex-end",
|
|
// alignItems: "center",
|
|
// marginTop: "16px",
|
|
// width: "100%",
|
|
// gap: "8px",
|
|
// }}
|
|
// >
|
|
// <Typography
|
|
// sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
|
|
// >
|
|
// Page Number :
|
|
// </Typography>
|
|
// <Pagination
|
|
// count={Math.ceil(filteredAdmins.length / adminsPerPage)}
|
|
// page={currentPage}
|
|
// onChange={handlePageChange}
|
|
// siblingCount={0}
|
|
// boundaryCount={0}
|
|
// sx={{
|
|
// "& .MuiPaginationItem-root": {
|
|
// color: "white",
|
|
// borderRadius: "0px",
|
|
// },
|
|
// "& .MuiPaginationItem-page.Mui-selected": {
|
|
// backgroundColor: "transparent",
|
|
// fontWeight: "bold",
|
|
// color: "#FFFFFF",
|
|
// },
|
|
// }}
|
|
// />
|
|
// </Box>
|
|
// </Box>
|
|
// );
|
|
// }
|
|
import React, { useEffect, useState } from "react";
|
|
import { Box, Button, Typography } from "@mui/material";
|
|
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
|
|
import { useForm } from "react-hook-form";
|
|
import CustomTable, { Column } from "../../components/CustomTable";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { createUser, userList } from "../../redux/slices/userSlice";
|
|
import { AppDispatch, RootState } from "../../redux/store/store";
|
|
import { string } from "prop-types";
|
|
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
|
|
import AddUserModal from "../../components/AddUserModel";
|
|
|
|
export default function UserList() {
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const { reset } = useForm();
|
|
|
|
const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
|
|
const [viewModal, setViewModal] = React.useState<boolean>(false);
|
|
const [rowData, setRowData] = React.useState<any | null>(null);
|
|
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
|
|
const users = useSelector((state: RootState) => state.userReducer.users);
|
|
|
|
useEffect(() => {
|
|
dispatch(userList());
|
|
}, [dispatch]);
|
|
|
|
const handleClickOpen = () => {
|
|
setRowData(null); // Reset row data when opening for new admin
|
|
setModalOpen(true);
|
|
};
|
|
|
|
const handleCloseModal = () => {
|
|
setModalOpen(false);
|
|
setRowData(null);
|
|
reset();
|
|
};
|
|
|
|
const handleCreate = async (data: {
|
|
name: string;
|
|
email: string;
|
|
phone: string;
|
|
registeredAddress: string;
|
|
}) => {
|
|
try {
|
|
await dispatch(createUser(data));
|
|
await dispatch(userList()); // Refresh the list after creation
|
|
handleCloseModal();
|
|
} catch (error) {
|
|
console.error("Creation failed", error);
|
|
}
|
|
};
|
|
|
|
const handleUpdate = async (
|
|
id: string,
|
|
name: string,
|
|
email: string,
|
|
phone: string,
|
|
registeredAddress: string
|
|
) => {
|
|
try {
|
|
await dispatch(
|
|
updateAdmin({
|
|
id,
|
|
name,
|
|
email,
|
|
phone,
|
|
registeredAddress,
|
|
})
|
|
);
|
|
await dispatch(adminList());
|
|
} catch (error) {
|
|
console.error("Update failed", error);
|
|
}
|
|
};
|
|
|
|
const categoryColumns: Column[] = [
|
|
{ id: "srno", label: "Sr No" },
|
|
{ id: "name", label: "Name" },
|
|
{ id: "email", label: "Email" },
|
|
{ id: "phone", label: "Phone" },
|
|
// { id: "location", label: "Location" },
|
|
// { id: "managerAssigned", label: "ManagerAssigned" },
|
|
// { id: "vehicle", label: "Vehicle" },
|
|
|
|
{ id: "action", label: "Action", align: "center" },
|
|
];
|
|
|
|
const categoryRows = users?.length
|
|
? users?.map(function (
|
|
user: {
|
|
id: string;
|
|
name: string;
|
|
email: string;
|
|
|
|
phone: string;
|
|
// location?: string;
|
|
// managerAssigned?: string;
|
|
// vehicle?: string;
|
|
},
|
|
index: number
|
|
) {
|
|
return {
|
|
id: user?.id,
|
|
srno: index + 1,
|
|
name: user?.name,
|
|
email: user?.email,
|
|
phone: user?.phone,
|
|
// location: user?.location,
|
|
// managerAssigned: user?.managerAssigned,
|
|
// vehicle: user?.vehicle,
|
|
};
|
|
})
|
|
: [];
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
maxWidth: {
|
|
sm: "100%",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
},
|
|
}}
|
|
>
|
|
<Typography
|
|
component="h2"
|
|
variant="h6"
|
|
sx={{ mt: 2, fontWeight: 600 }}
|
|
>
|
|
Users
|
|
</Typography>
|
|
<Button
|
|
variant="contained"
|
|
size="medium"
|
|
sx={{ textAlign: "right" }}
|
|
onClick={handleClickOpen}
|
|
>
|
|
Add User
|
|
</Button>
|
|
</Box>
|
|
|
|
<CustomTable
|
|
columns={categoryColumns}
|
|
rows={categoryRows}
|
|
setDeleteModal={setDeleteModal}
|
|
deleteModal={deleteModal}
|
|
setViewModal={setViewModal}
|
|
viewModal={viewModal}
|
|
setRowData={setRowData}
|
|
setModalOpen={setModalOpen}
|
|
/>
|
|
<AddUserModal
|
|
open={modalOpen}
|
|
handleClose={handleCloseModal}
|
|
handleCreate={handleCreate}
|
|
handleUpdate={handleUpdate}
|
|
editRow={rowData}
|
|
/>
|
|
</>
|
|
);
|
|
}
|