Recreate the CustomTable UI and Appthem changes also made changes in header section
This commit is contained in:
jaanvi
parent
88daf1b1cf
commit
43709e51a7
|
|
@ -55,7 +55,19 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
|
|||
});
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
handleCreate(data);
|
||||
if (editRow) {
|
||||
|
||||
handleUpdate(
|
||||
editRow.id,
|
||||
data.name,
|
||||
data.email,
|
||||
data.phone,
|
||||
data.password
|
||||
);
|
||||
} else {
|
||||
|
||||
handleCreate(data);
|
||||
}
|
||||
|
||||
handleClose();
|
||||
reset();
|
||||
|
|
@ -79,7 +91,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
|
|||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
{editRow ? "Edit Admin" : "Add Admin"}
|
||||
{editRow ? "Edit User" : "Add User"}
|
||||
<Box
|
||||
onClick={handleClose}
|
||||
sx={{
|
||||
|
|
@ -210,3 +222,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
|
|||
};
|
||||
|
||||
export default AddUserModal;
|
||||
function handleUpdate(id: any, name: string, email: string, phone: string, password: string) {
|
||||
throw new Error("Function not implemented.");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default function AppNavbar() {
|
|||
sx={{
|
||||
display: { xs: "auto", md: "none" },
|
||||
boxShadow: 0,
|
||||
bgcolor: "background.paper",
|
||||
backgroundColor:"#1C1C1C",
|
||||
backgroundImage: "none",
|
||||
borderBottom: "1px solid",
|
||||
borderColor: "divider",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,317 @@
|
|||
// import * as React from "react";
|
||||
// import { styled } from "@mui/material/styles";
|
||||
// import Table from "@mui/material/Table";
|
||||
// import TableBody from "@mui/material/TableBody";
|
||||
// import TableCell, { tableCellClasses } from "@mui/material/TableCell";
|
||||
// import TableContainer from "@mui/material/TableContainer";
|
||||
// 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 { useDispatch } from "react-redux";
|
||||
// import {
|
||||
// Box,
|
||||
// Button,
|
||||
// dividerClasses,
|
||||
// IconButton,
|
||||
// listClasses,
|
||||
// Menu,
|
||||
// } from "@mui/material";
|
||||
// import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
||||
// import DeleteModal from "../Modals/DeleteModal";
|
||||
// import { AppDispatch } from "../../redux/store/store";
|
||||
// import ViewModal from "../Modals/ViewModal";
|
||||
|
||||
// // Styled components for customization
|
||||
// const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
// [`&.${tableCellClasses.head}`]: {
|
||||
// backgroundColor: " #1565c0",
|
||||
// color: theme.palette.common.white,
|
||||
// },
|
||||
// [`&.${tableCellClasses.body}`]: {
|
||||
// fontSize: 14,
|
||||
// },
|
||||
// }));
|
||||
|
||||
// const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
||||
// "&:nth-of-type(odd)": {
|
||||
// backgroundColor: theme.palette.action.hover,
|
||||
// },
|
||||
// "&:last-child td, &:last-child th": {
|
||||
// border: 0,
|
||||
// },
|
||||
// }));
|
||||
|
||||
// export interface Column {
|
||||
// id: string;
|
||||
// label: string;
|
||||
// align?: "left" | "center" | "right";
|
||||
// }
|
||||
|
||||
// interface Row {
|
||||
// [key: string]: any;
|
||||
// }
|
||||
|
||||
// interface CustomTableProps {
|
||||
// columns: Column[];
|
||||
// rows: Row[];
|
||||
// setDeleteModal: Function;
|
||||
// setRowData: Function;
|
||||
// setModalOpen: Function;
|
||||
// viewModal: boolean;
|
||||
// setViewModal: Function;
|
||||
// deleteModal: boolean;
|
||||
// handleStatusToggle: (id: string, currentStatus: number) => void;
|
||||
// tableType?: string;
|
||||
// }
|
||||
|
||||
// const CustomTable: React.FC<CustomTableProps> = ({
|
||||
// columns,
|
||||
// rows,
|
||||
// setDeleteModal,
|
||||
// deleteModal,
|
||||
// viewModal,
|
||||
// setRowData,
|
||||
// setViewModal,
|
||||
// setModalOpen,
|
||||
// handleStatusToggle,
|
||||
// tableType,
|
||||
// }) => {
|
||||
// const dispatch = useDispatch<AppDispatch>();
|
||||
// const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
// const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
|
||||
|
||||
// const open = Boolean(anchorEl);
|
||||
|
||||
// const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
|
||||
// setAnchorEl(event.currentTarget);
|
||||
// setSelectedRow(row); // Ensure the row data is set
|
||||
// setRowData(row);
|
||||
// };
|
||||
|
||||
// const handleClose = () => {
|
||||
// setAnchorEl(null);
|
||||
// };
|
||||
|
||||
// const isImage = (value: any) => {
|
||||
// if (typeof value === "string") {
|
||||
// return value.startsWith("http") || value.startsWith("data:image"); // Check for URL or base64 image
|
||||
// }
|
||||
// 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);
|
||||
// }
|
||||
// handleClose();
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <Box sx={{ overflowX: "auto", width: "100%" }}>
|
||||
// <TableContainer component={Paper}>
|
||||
// <Table
|
||||
// sx={{
|
||||
// minWidth: 700,
|
||||
// width: "100%",
|
||||
// tableLayout: "auto",
|
||||
// }}
|
||||
// aria-label="customized table"
|
||||
// >
|
||||
// <TableHead>
|
||||
// <TableRow>
|
||||
// {columns.map((column) => (
|
||||
// <StyledTableCell
|
||||
// key={column.id}
|
||||
// align={column.align || "left"}
|
||||
// sx={{
|
||||
// whiteSpace: "nowrap", // Prevent wrapping
|
||||
// // fontSize: { xs: "12px", sm: "14px" },
|
||||
// fontSize: {
|
||||
// xs: "10px",
|
||||
// sm: "12px",
|
||||
// md: "14px",
|
||||
// }, // Adjust font size responsively
|
||||
// padding: { xs: "8px", sm: "12px" },
|
||||
// }}
|
||||
// >
|
||||
// {column.label}
|
||||
// </StyledTableCell>
|
||||
// ))}
|
||||
// </TableRow>
|
||||
// </TableHead>
|
||||
// <TableBody>
|
||||
// {rows.map((row, rowIndex) => (
|
||||
// <StyledTableRow key={rowIndex}>
|
||||
// {columns.map((column) => (
|
||||
// <StyledTableCell
|
||||
// key={column.id}
|
||||
// align={column.align || "left"}
|
||||
// sx={{
|
||||
// whiteSpace: "nowrap", // Prevent wrapping
|
||||
// fontSize: {
|
||||
// xs: "10px",
|
||||
// sm: "12px",
|
||||
// md: "14px",
|
||||
// }, // Adjust font size responsively
|
||||
// padding: { xs: "8px", sm: "12px" },
|
||||
// }}
|
||||
// >
|
||||
// {isImage(row[column.id]) ? (
|
||||
// <img
|
||||
// src={row[column.id]}
|
||||
// alt="Row "
|
||||
// style={{
|
||||
// width: "50px",
|
||||
// height: "50px",
|
||||
// objectFit: "cover",
|
||||
// }}
|
||||
// />
|
||||
// ) : column.id !== "action" ? (
|
||||
// row[column.id]
|
||||
// ) : (
|
||||
// <IconButton
|
||||
// onClick={(e) => {
|
||||
// handleClick(e, row);
|
||||
// setRowData(row); // Store the selected row
|
||||
// }}
|
||||
// >
|
||||
// <MoreVertRoundedIcon />
|
||||
// </IconButton>
|
||||
// )}
|
||||
// </StyledTableCell>
|
||||
// ))}
|
||||
// </StyledTableRow>
|
||||
// ))}
|
||||
// </TableBody>
|
||||
// </Table>
|
||||
// </TableContainer>
|
||||
|
||||
// {/* Menu Actions */}
|
||||
// {open && (
|
||||
// <Menu
|
||||
// anchorEl={anchorEl}
|
||||
// id="menu"
|
||||
// open={open}
|
||||
// onClose={handleClose}
|
||||
// onClick={handleClose}
|
||||
// transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
// anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
// sx={{
|
||||
// [`& .${listClasses.root}`]: {
|
||||
// padding: "4px",
|
||||
// },
|
||||
// [`& .${paperClasses.root}`]: {
|
||||
// padding: 0,
|
||||
// },
|
||||
// [`& .${dividerClasses.root}`]: {
|
||||
// margin: "4px -4px",
|
||||
// },
|
||||
// }}
|
||||
// >
|
||||
// <Box
|
||||
// sx={{
|
||||
// display: "flex",
|
||||
// flexDirection: "column",
|
||||
// justifyContent: "flex-start",
|
||||
// }}
|
||||
// >
|
||||
// <Button
|
||||
// variant="text"
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// setViewModal(true);
|
||||
// }}
|
||||
// color="primary"
|
||||
// sx={{
|
||||
// justifyContent: "flex-start",
|
||||
// py: 0,
|
||||
// textTransform: "capitalize",
|
||||
// }}
|
||||
// >
|
||||
// View
|
||||
// </Button>
|
||||
// {viewModal && (
|
||||
// <ViewModal
|
||||
// handleView={() =>
|
||||
// handleViewButton(selectedRow?.id)
|
||||
// }
|
||||
// open={viewModal}
|
||||
// setViewModal={setViewModal}
|
||||
// id={selectedRow?.id}
|
||||
// />
|
||||
// )}
|
||||
// <Button
|
||||
// variant="text"
|
||||
// onClick={() => setModalOpen(true)}
|
||||
// color="primary"
|
||||
// sx={{
|
||||
// justifyContent: "flex-start",
|
||||
// py: 0,
|
||||
// textTransform: "capitalize",
|
||||
// }}
|
||||
// >
|
||||
// Edit
|
||||
// </Button>
|
||||
|
||||
// {tableType === "roleList" && (
|
||||
// <Button variant="text" onClick={handleToggleStatus}>
|
||||
// {selectedRow.statusValue === 1
|
||||
// ? "Deactivate"
|
||||
// : "Activate"}
|
||||
// </Button>
|
||||
// )}
|
||||
|
||||
// <Button
|
||||
// variant="text"
|
||||
// onClick={(e) => {
|
||||
// e.stopPropagation();
|
||||
// setDeleteModal(true);
|
||||
// }}
|
||||
// color="error"
|
||||
// sx={{
|
||||
// justifyContent: "flex-start",
|
||||
// py: 0,
|
||||
// textTransform: "capitalize",
|
||||
// }}
|
||||
// >
|
||||
// Delete
|
||||
// </Button>
|
||||
// {deleteModal && (
|
||||
// <DeleteModal
|
||||
// handleDelete={() =>
|
||||
// handleDeleteButton(selectedRow?.id)
|
||||
// }
|
||||
// open={deleteModal}
|
||||
// setDeleteModal={setDeleteModal}
|
||||
// id={selectedRow?.id}
|
||||
// />
|
||||
// )}
|
||||
// </Box>
|
||||
// </Menu>
|
||||
// )}
|
||||
// </Box>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default CustomTable;
|
||||
import * as React from "react";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import Table from "@mui/material/Table";
|
||||
|
|
@ -12,24 +326,30 @@ import { useDispatch } from "react-redux";
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
dividerClasses,
|
||||
IconButton,
|
||||
listClasses,
|
||||
InputAdornment,
|
||||
Menu,
|
||||
Pagination,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
||||
import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
|
||||
import DeleteModal from "../Modals/DeleteModal";
|
||||
import { AppDispatch } from "../../redux/store/store";
|
||||
import ViewModal from "../Modals/ViewModal";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import TuneIcon from "@mui/icons-material/Tune";
|
||||
|
||||
// Styled components for customization
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
backgroundColor: " #1565c0",
|
||||
backgroundColor: "#454545", // Changed to #272727 for the header
|
||||
color: theme.palette.common.white,
|
||||
borderBottom: "none", // Remove any border at the bottom of the header
|
||||
},
|
||||
[`&.${tableCellClasses.body}`]: {
|
||||
fontSize: 14,
|
||||
borderBottom: "1px solid #454545", // Adding border to body cells
|
||||
},
|
||||
}));
|
||||
|
||||
|
|
@ -37,8 +357,9 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
|||
"&:nth-of-type(odd)": {
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
},
|
||||
"&:last-child td, &:last-child th": {
|
||||
border: 0,
|
||||
"& td, th": {
|
||||
borderColor: "#454545", // Applying border color to both td and th
|
||||
borderWidth: "1px", // Set border width to ensure it appears
|
||||
},
|
||||
}));
|
||||
|
||||
|
|
@ -62,7 +383,8 @@ interface CustomTableProps {
|
|||
setViewModal: Function;
|
||||
deleteModal: boolean;
|
||||
handleStatusToggle: (id: string, currentStatus: number) => void;
|
||||
tableType?: string;
|
||||
tableType: string; // Adding tableType prop to change header text dynamically
|
||||
handleClickOpen: () => void;
|
||||
}
|
||||
|
||||
const CustomTable: React.FC<CustomTableProps> = ({
|
||||
|
|
@ -76,10 +398,15 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
setModalOpen,
|
||||
handleStatusToggle,
|
||||
tableType,
|
||||
handleClickOpen,
|
||||
|
||||
}) => {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
|
||||
const [searchQuery, setSearchQuery] = React.useState("");
|
||||
const [currentPage, setCurrentPage] = React.useState(1);
|
||||
const usersPerPage = 10;
|
||||
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
|
|
@ -124,32 +451,164 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
handleClose();
|
||||
};
|
||||
|
||||
const filteredRows = rows.filter(
|
||||
(row) =>
|
||||
(row.name &&
|
||||
row.name.toLowerCase().includes(searchQuery.toLowerCase())) ||
|
||||
false
|
||||
);
|
||||
|
||||
|
||||
const indexOfLastRow = currentPage * usersPerPage;
|
||||
const indexOfFirstRow = indexOfLastRow - usersPerPage;
|
||||
const currentRows = filteredRows.slice(indexOfFirstRow, indexOfLastRow);
|
||||
|
||||
const handlePageChange = (
|
||||
event: React.ChangeEvent<unknown>,
|
||||
value: number
|
||||
) => {
|
||||
setCurrentPage(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ overflowX: "auto", width: "100%" }}>
|
||||
<TableContainer component={Paper}>
|
||||
<Table
|
||||
<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",
|
||||
}}
|
||||
>
|
||||
{/* Dynamic title based on the page type */}
|
||||
{tableType === "admin"
|
||||
? "Admin"
|
||||
: tableType === "role"
|
||||
? "Roles"
|
||||
: tableType === "user"
|
||||
? "Users"
|
||||
: tableType === "manager"
|
||||
? "Managers"
|
||||
: tableType === "vehicle"
|
||||
? "Vehicles"
|
||||
: "List"}
|
||||
</Typography>
|
||||
|
||||
{/* Search & Buttons Section */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
marginTop: "16px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
placeholder="Search"
|
||||
sx={{
|
||||
minWidth: 700,
|
||||
width: "100%",
|
||||
tableLayout: "auto",
|
||||
width: "422px",
|
||||
borderRadius: "12px",
|
||||
input: { color: "#FFFFFF" },
|
||||
backgroundColor: "#272727",
|
||||
"& .MuiOutlinedInput-root": {
|
||||
borderRadius: "12px",
|
||||
"& fieldset": { borderColor: "#FFFFFF" },
|
||||
"&:hover fieldset": { borderColor: "#FFFFFF" },
|
||||
"&.Mui-focused fieldset": {
|
||||
borderColor: "#52ACDF",
|
||||
},
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon sx={{ color: "#272727" }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
width: "100%",
|
||||
}}
|
||||
aria-label="customized table"
|
||||
>
|
||||
<TableHead>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: "#52ACDF",
|
||||
color: "white",
|
||||
borderRadius: "8px",
|
||||
width: "184px",
|
||||
"&:hover": { backgroundColor: "#439BC1" },
|
||||
}}
|
||||
onClick={() => handleClickOpen()}
|
||||
>
|
||||
Add{" "}
|
||||
{tableType === "admin"
|
||||
? "Admin"
|
||||
: tableType === "role"
|
||||
? "Role"
|
||||
: tableType === "user"
|
||||
? "User"
|
||||
: tableType === "manager"
|
||||
? "Manager"
|
||||
: tableType === "vehicle"
|
||||
? "Vehicle"
|
||||
: "Item"}
|
||||
</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",
|
||||
borderBottom: "none",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
<TableRow>
|
||||
{columns.map((column) => (
|
||||
<StyledTableCell
|
||||
key={column.id}
|
||||
align={column.align || "left"}
|
||||
sx={{
|
||||
whiteSpace: "nowrap", // Prevent wrapping
|
||||
// fontSize: { xs: "12px", sm: "14px" },
|
||||
fontSize: {
|
||||
xs: "10px",
|
||||
sm: "12px",
|
||||
md: "14px",
|
||||
}, // Adjust font size responsively
|
||||
padding: { xs: "8px", sm: "12px" },
|
||||
color: "#FFFFFF",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{column.label}
|
||||
|
|
@ -158,20 +617,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row, rowIndex) => (
|
||||
{currentRows.map((row, rowIndex) => (
|
||||
<StyledTableRow key={rowIndex}>
|
||||
{columns.map((column) => (
|
||||
<StyledTableCell
|
||||
key={column.id}
|
||||
align={column.align || "left"}
|
||||
sx={{
|
||||
whiteSpace: "nowrap", // Prevent wrapping
|
||||
fontSize: {
|
||||
xs: "10px",
|
||||
sm: "12px",
|
||||
md: "14px",
|
||||
}, // Adjust font size responsively
|
||||
padding: { xs: "8px", sm: "12px" },
|
||||
color: "#FFFFFF",
|
||||
backgroundColor: "#272727",
|
||||
}}
|
||||
>
|
||||
{isImage(row[column.id]) ? (
|
||||
|
|
@ -192,8 +645,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
handleClick(e, row);
|
||||
setRowData(row); // Store the selected row
|
||||
}}
|
||||
sx={{
|
||||
padding: 0,
|
||||
minWidth: 0,
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
backgroundColor:
|
||||
"transparent",
|
||||
color: "#FFFFFF",
|
||||
border: "none",
|
||||
"&:hover": {
|
||||
backgroundColor:
|
||||
"transparent",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MoreVertRoundedIcon />
|
||||
<MoreHorizRoundedIcon
|
||||
sx={{ fontSize: "24px" }}
|
||||
/>
|
||||
</IconButton>
|
||||
)}
|
||||
</StyledTableCell>
|
||||
|
|
@ -204,6 +673,40 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
</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(filteredRows.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>
|
||||
|
||||
{/* Menu Actions */}
|
||||
{open && (
|
||||
<Menu
|
||||
|
|
@ -215,15 +718,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
sx={{
|
||||
[`& .${listClasses.root}`]: {
|
||||
padding: "4px",
|
||||
},
|
||||
[`& .${paperClasses.root}`]: {
|
||||
padding: 0,
|
||||
},
|
||||
[`& .${dividerClasses.root}`]: {
|
||||
margin: "4px -4px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
|
|
@ -243,7 +740,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
py: 0,
|
||||
textTransform: "capitalize",
|
||||
fontWeight: "bold",
|
||||
color: "#52ACDF",
|
||||
}}
|
||||
>
|
||||
View
|
||||
|
|
@ -258,6 +756,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
id={selectedRow?.id}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => setModalOpen(true)}
|
||||
|
|
@ -270,10 +769,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
>
|
||||
Edit
|
||||
</Button>
|
||||
|
||||
{tableType === "roleList" && (
|
||||
<Button variant="text" onClick={handleToggleStatus}>
|
||||
{selectedRow.statusValue === 1
|
||||
{tableType === "role" && (
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleToggleStatus();
|
||||
}}
|
||||
color="secondary"
|
||||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
py: 0,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{selectedRow?.statusValue === 1
|
||||
? "Deactivate"
|
||||
: "Activate"}
|
||||
</Button>
|
||||
|
|
@ -289,24 +799,25 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
|||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
py: 0,
|
||||
textTransform: "capitalize",
|
||||
fontWeight: "bold",
|
||||
color: "red",
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
{deleteModal && (
|
||||
<DeleteModal
|
||||
handleDelete={() =>
|
||||
handleDeleteButton(selectedRow?.id)
|
||||
}
|
||||
open={deleteModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
id={selectedRow?.id}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Menu>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
{deleteModal && (
|
||||
<DeleteModal
|
||||
handleDelete={() => handleDeleteButton(selectedRow?.id)}
|
||||
open={deleteModal}
|
||||
setDeleteModal={setDeleteModal}
|
||||
id={selectedRow?.id}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ export default function Header() {
|
|||
sx={{
|
||||
width: "100%",
|
||||
height: "84px",
|
||||
// backgroundColor: "#202020",
|
||||
padding: "20px 24px",
|
||||
backgroundColor: "#1C1C1C",
|
||||
//padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
|
|
@ -60,7 +60,7 @@ export default function Header() {
|
|||
sx={{
|
||||
width: { xs: "100%", sm: "360px" },
|
||||
height: "44px",
|
||||
backgroundColor: "#FFFFFF",
|
||||
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #424242",
|
||||
display: "flex",
|
||||
|
|
@ -68,12 +68,12 @@ export default function Header() {
|
|||
padding: "0 12px",
|
||||
}}
|
||||
>
|
||||
<SearchIcon sx={{ color: "#202020" }} />
|
||||
<SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||
<InputBase
|
||||
sx={{
|
||||
marginLeft: 1,
|
||||
flex: 1,
|
||||
color: "#202020",
|
||||
color: "#FFFFFF",
|
||||
fontSize: { xs: "12px", sm: "14px" },
|
||||
}}
|
||||
/>
|
||||
|
|
@ -104,13 +104,11 @@ export default function Header() {
|
|||
src="/avatar.png"
|
||||
sx={{ width: 36, height: 36 }}
|
||||
/>
|
||||
<Typography variant="body1" sx={{ color: "#202020" }}>
|
||||
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
|
||||
{user?.name || "No Admin"}
|
||||
</Typography>
|
||||
|
||||
<OptionsMenu
|
||||
|
||||
/>
|
||||
<OptionsMenu />
|
||||
</Stack>
|
||||
{/* <ColorModeIconDropdown /> */}
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -69,39 +69,7 @@ export default function SideMenu() {
|
|||
</Button>
|
||||
</Box>
|
||||
<MenuContent hidden={open} />
|
||||
{/* <CardAlert /> */}
|
||||
{/* <Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
p: 2,
|
||||
gap: 1,
|
||||
alignItems: "center",
|
||||
borderTop: "1px solid",
|
||||
borderColor: "divider",
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
sizes="small"
|
||||
alt={user?.name || "User Avatar"}
|
||||
src={"/static/images/avatar/7.jpg"}
|
||||
sx={{ width: open ? 36 : 0, height: open ? 36 : 0 }}
|
||||
/>
|
||||
<Box sx={{ mr: "auto", display: !open ? "none" : "block" }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ fontWeight: 500, lineHeight: "16px" }}
|
||||
>
|
||||
{user?.name || "No Admin"}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{ color: "text.secondary" }}
|
||||
>
|
||||
{user?.email || "No Email"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<OptionsMenu avatar={open} />
|
||||
</Stack> */}
|
||||
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,13 +18,16 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
|||
display: "flex",
|
||||
height: "100vh",
|
||||
flexDirection: { xs: "column", md: "row" },
|
||||
width: "100%",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
>
|
||||
{/* SideMenu - Responsive, shown only on large screens */}
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: "none", md: "block" },
|
||||
width: 250,
|
||||
// width: 250,
|
||||
}}
|
||||
>
|
||||
<SideMenu />
|
||||
|
|
@ -46,8 +49,24 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
|||
overflow: "auto",
|
||||
...customStyles,
|
||||
mt: { xs: 8, md: 0 },
|
||||
padding: 0,
|
||||
})}
|
||||
>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
justifyItems: "center",
|
||||
alignItems: "center",
|
||||
mx: 0,
|
||||
pb: 5,
|
||||
mt: { xs: 3, md: 0 },
|
||||
}}
|
||||
>
|
||||
<Header />
|
||||
|
||||
</Stack>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
|
|
@ -60,7 +79,7 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
|||
mt: { xs: 3, md: 0 },
|
||||
}}
|
||||
>
|
||||
<Header />
|
||||
|
||||
<Outlet />
|
||||
</Stack>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ export default function AdminList() {
|
|||
email,
|
||||
phone,
|
||||
registeredAddress,
|
||||
|
||||
})
|
||||
);
|
||||
await dispatch(adminList());
|
||||
|
|
@ -85,18 +86,17 @@ export default function AdminList() {
|
|||
{ id: "registeredAddress", label: "Address" },
|
||||
{ id: "action", label: "Action", align: "center" },
|
||||
];
|
||||
const filteredAdmins = admins?.filter(
|
||||
(admin) =>
|
||||
admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
admin.registeredAddress
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase())
|
||||
);
|
||||
// const filteredAdmins = admins?.filter(
|
||||
// (admin) =>
|
||||
// admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
// admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
// admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
// admin.registeredAddress
|
||||
// .toLowerCase()
|
||||
// .includes(searchTerm.toLowerCase())
|
||||
// );
|
||||
|
||||
const categoryRows = filteredAdmins?.length
|
||||
? filteredAdmins?.map(
|
||||
const categoryRows = admins?.map(
|
||||
(
|
||||
admin: {
|
||||
id: string;
|
||||
|
|
@ -112,68 +112,14 @@ export default function AdminList() {
|
|||
name: admin?.name,
|
||||
email: admin?.email,
|
||||
phone: admin?.phone,
|
||||
registeredAddress: admin?.registeredAddress,
|
||||
registeredAddress: admin?.registeredAddress || "NA",
|
||||
})
|
||||
)
|
||||
: [];
|
||||
;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
mb: { xs: 2, sm: 0 },
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
Admins
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 2, // Add margin bottom for spacing
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
sx={{
|
||||
width: { xs: "100%", sm: "30%" },
|
||||
marginBottom: { xs: 2, sm: 0 },
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<SearchIcon
|
||||
sx={{ color: "#202020", marginRight: 1 }}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
width: { xs: "100%", sm: "auto" },
|
||||
}}
|
||||
onClick={handleClickOpen}
|
||||
>
|
||||
Add Admin
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
|
||||
<CustomTable
|
||||
columns={categoryColumns}
|
||||
rows={categoryRows}
|
||||
|
|
@ -183,6 +129,8 @@ export default function AdminList() {
|
|||
viewModal={viewModal}
|
||||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
tableType="admin"
|
||||
handleClickOpen={handleClickOpen}
|
||||
/>
|
||||
<AddEditCategoryModal
|
||||
open={modalOpen}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,58 @@
|
|||
// src/pages/Dashboard
|
||||
|
||||
import * as React from 'react';
|
||||
import { Box, CssBaseline, Typography } from '@mui/material';
|
||||
import * as React from "react";
|
||||
import { Box, CssBaseline, Typography } from "@mui/material";
|
||||
|
||||
import {
|
||||
chartsCustomizations,
|
||||
dataGridCustomizations,
|
||||
datePickersCustomizations,
|
||||
treeViewCustomizations,
|
||||
} from './theme/customizations';
|
||||
import DashboardLayout from '../../layouts/DashboardLayout';
|
||||
import AppTheme from '../../shared-theme/AppTheme';
|
||||
import MainGrid from '../../components/MainGrid';
|
||||
import AdminList from '../AdminList';
|
||||
chartsCustomizations,
|
||||
dataGridCustomizations,
|
||||
datePickersCustomizations,
|
||||
treeViewCustomizations,
|
||||
} from "./theme/customizations";
|
||||
import DashboardLayout from "../../layouts/DashboardLayout";
|
||||
import AppTheme from "../../shared-theme/AppTheme";
|
||||
import MainGrid from "../../components/MainGrid";
|
||||
import AdminList from "../AdminList";
|
||||
|
||||
const xThemeComponents = {
|
||||
...chartsCustomizations,
|
||||
...dataGridCustomizations,
|
||||
...datePickersCustomizations,
|
||||
...treeViewCustomizations,
|
||||
...chartsCustomizations,
|
||||
...dataGridCustomizations,
|
||||
...datePickersCustomizations,
|
||||
...treeViewCustomizations,
|
||||
};
|
||||
|
||||
interface DashboardProps {
|
||||
disableCustomTheme?: boolean;
|
||||
disableCustomTheme?: boolean;
|
||||
}
|
||||
|
||||
const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => {
|
||||
return (
|
||||
<AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
|
||||
<CssBaseline enableColorScheme />
|
||||
{!disableCustomTheme ? (
|
||||
<><MainGrid /></>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor:'#202020',
|
||||
height: '100vh',
|
||||
textAlign: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
|
||||
</Box>
|
||||
)}
|
||||
</AppTheme>
|
||||
);
|
||||
const Dashboard: React.FC<DashboardProps> = ({
|
||||
disableCustomTheme = false,
|
||||
}) => {
|
||||
return (
|
||||
<AppTheme
|
||||
{...{ disableCustomTheme }}
|
||||
themeComponents={xThemeComponents}
|
||||
>
|
||||
<CssBaseline enableColorScheme />
|
||||
{!disableCustomTheme ? (
|
||||
<>
|
||||
<MainGrid />
|
||||
</>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#202020",
|
||||
height: "100vh",
|
||||
textAlign: "center",
|
||||
padding: 2,
|
||||
}}
|
||||
></Box>
|
||||
)}
|
||||
</AppTheme>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -100,47 +100,7 @@ export default function RoleList() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
sx={{
|
||||
width: { xs: "100%", sm: "30%" },
|
||||
marginBottom: { xs: 2, sm: 0 },
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<SearchIcon
|
||||
sx={{ color: "#202020", marginRight: 1 }}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
onClick={handleClickOpen}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
width: { xs: "100%", sm: "auto" },
|
||||
}}
|
||||
>
|
||||
Add Role
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
|
||||
{showPermissions ? (
|
||||
<AddEditRolePage />
|
||||
) : (
|
||||
|
|
@ -154,7 +114,8 @@ export default function RoleList() {
|
|||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
handleStatusToggle={handleStatusToggle}
|
||||
tableType="roleList"
|
||||
tableType="role"
|
||||
handleClickOpen={handleClickOpen}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,678 +1,10 @@
|
|||
// 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 { createUser, updateUser, userList } from "../../redux/slices/userSlice";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
import { string } from "prop-types";
|
||||
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
|
||||
|
|
@ -709,7 +41,7 @@ export default function UserList() {
|
|||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
registeredAddress: string;
|
||||
|
||||
}) => {
|
||||
try {
|
||||
await dispatch(createUser(data));
|
||||
|
|
@ -724,20 +56,19 @@ export default function UserList() {
|
|||
id: string,
|
||||
name: string,
|
||||
email: string,
|
||||
phone: string,
|
||||
registeredAddress: string
|
||||
phone: string
|
||||
) => {
|
||||
try {
|
||||
await dispatch(
|
||||
updateAdmin({
|
||||
updateUser({
|
||||
id,
|
||||
name,
|
||||
email,
|
||||
phone,
|
||||
registeredAddress,
|
||||
|
||||
})
|
||||
);
|
||||
await dispatch(adminList());
|
||||
await dispatch(userList());
|
||||
} catch (error) {
|
||||
console.error("Update failed", error);
|
||||
}
|
||||
|
|
@ -784,34 +115,6 @@ export default function UserList() {
|
|||
|
||||
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}
|
||||
|
|
@ -821,6 +124,8 @@ export default function UserList() {
|
|||
viewModal={viewModal}
|
||||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
tableType="user"
|
||||
handleClickOpen={handleClickOpen}
|
||||
/>
|
||||
<AddUserModal
|
||||
open={modalOpen}
|
||||
|
|
|
|||
|
|
@ -152,55 +152,6 @@ export default function VehicleList() {
|
|||
return (
|
||||
<>
|
||||
|
||||
{/* Title and Add Category button */}
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h6"
|
||||
sx={{ mt: 2, fontWeight: 600 }}
|
||||
>
|
||||
Vehicles
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: 2, // Add margin bottom for spacing
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
sx={{
|
||||
width: { xs: "100%", sm: "30%" },
|
||||
marginBottom: { xs: 2, sm: 0 },
|
||||
}}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<SearchIcon
|
||||
sx={{ color: "#202020", marginRight: 1 }}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
width: { xs: "100%", sm: "auto" },
|
||||
}}
|
||||
onClick={handleClickOpen}
|
||||
>
|
||||
Add Vehicle
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
|
||||
<CustomTable
|
||||
columns={categoryColumns}
|
||||
|
|
@ -211,6 +162,8 @@ export default function VehicleList() {
|
|||
viewModal={viewModal}
|
||||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
tableType="vehicle"
|
||||
handleClickOpen={handleClickOpen}
|
||||
/>
|
||||
{/* <AddEditCategoryModal
|
||||
open={modalOpen}
|
||||
|
|
|
|||
|
|
@ -120,11 +120,8 @@ const vehicleSlice = createSlice({
|
|||
state.loading = true;
|
||||
})
|
||||
.addCase(updateVehicle.fulfilled, (state, action) => {
|
||||
const updateVehicle = action.payload;
|
||||
state.vehicles = state?.vehicles?.map((vehicle) =>
|
||||
vehicle?.id === updateVehicle?.id ? updateVehicle : vehicle
|
||||
);
|
||||
state.loading = false;
|
||||
state.error = action.payload;
|
||||
})
|
||||
.addCase(updateVehicle.rejected, (state) => {
|
||||
state.loading = false;
|
||||
|
|
|
|||
|
|
@ -150,10 +150,7 @@ const adminSlice = createSlice({
|
|||
state.isLoading = true;
|
||||
})
|
||||
.addCase(updateAdmin.fulfilled, (state, action) => {
|
||||
const updatedAdmin = action.payload;
|
||||
state.admins = state?.admins?.map((admin) =>
|
||||
admin?.id === updatedAdmin?.id ? updatedAdmin : admin
|
||||
);
|
||||
|
||||
state.isLoading = false;
|
||||
})
|
||||
.addCase(updateAdmin.rejected, (state) => {
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@ import { toast } from "sonner";
|
|||
|
||||
// Define TypeScript types
|
||||
interface User {
|
||||
id: number;
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone?: string;
|
||||
// location?: string;
|
||||
// managerAssigned?: string;
|
||||
// vehicle?: string;
|
||||
password:string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
interface UserState {
|
||||
|
|
@ -55,12 +55,8 @@ export const createUser = createAsyncThunk<
|
|||
{
|
||||
name: string;
|
||||
email: string;
|
||||
password: string;
|
||||
phone: string;
|
||||
|
||||
// location?: string;
|
||||
// managerAssigned?: string;
|
||||
// vehicle?: string;
|
||||
|
||||
},
|
||||
{ rejectValue: string }
|
||||
>("/CreateUser", async (data, { rejectWithValue }) => {
|
||||
|
|
@ -74,6 +70,23 @@ export const createUser = createAsyncThunk<
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
export const updateUser = createAsyncThunk(
|
||||
"updateUser",
|
||||
async ({ id, ...userData }: User, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await http.put(`/${id}/update-user`, userData);
|
||||
toast.success("User updated successfully");
|
||||
return response?.data;
|
||||
} catch (error: any) {
|
||||
toast.error("Error updating the user: " + error);
|
||||
return rejectWithValue(
|
||||
error.response?.data?.message || "An error occurred"
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
const userSlice = createSlice({
|
||||
name: "fetchUsers",
|
||||
initialState,
|
||||
|
|
@ -111,7 +124,16 @@ const userSlice = createSlice({
|
|||
(state, action: PayloadAction<string | undefined>) => {
|
||||
state.loading = false;
|
||||
}
|
||||
);
|
||||
)
|
||||
.addCase(updateUser.pending, (state) => {
|
||||
state.loading = true;
|
||||
})
|
||||
.addCase(updateUser.fulfilled, (state, action) => {
|
||||
state.loading = false;
|
||||
})
|
||||
.addCase(updateUser.rejected, (state) => {
|
||||
state.loading = false;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,59 +1,70 @@
|
|||
import * as React from 'react';
|
||||
import { ThemeProvider, Theme, createTheme } from '@mui/material/styles';
|
||||
import type { ThemeOptions } from '@mui/material/styles';
|
||||
import { inputsCustomizations } from './customizations/inputs';
|
||||
import { dataDisplayCustomizations } from './customizations/dataDisplay';
|
||||
import { feedbackCustomizations } from './customizations/feedback';
|
||||
import { navigationCustomizations } from './customizations/navigation';
|
||||
import { surfacesCustomizations } from './customizations/surfaces';
|
||||
import { colorSchemes, typography, shadows, shape } from './themePrimitives';
|
||||
import * as React from "react";
|
||||
import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
|
||||
import type { ThemeOptions } from "@mui/material/styles";
|
||||
import { inputsCustomizations } from "./customizations/inputs";
|
||||
import { dataDisplayCustomizations } from "./customizations/dataDisplay";
|
||||
import { feedbackCustomizations } from "./customizations/feedback";
|
||||
import { navigationCustomizations } from "./customizations/navigation";
|
||||
import { surfacesCustomizations } from "./customizations/surfaces";
|
||||
import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
|
||||
|
||||
declare module '@mui/styles/defaultTheme' {
|
||||
interface DefaultTheme extends Theme {
|
||||
vars: object
|
||||
}
|
||||
declare module "@mui/styles/defaultTheme" {
|
||||
interface DefaultTheme extends Theme {
|
||||
vars: object;
|
||||
}
|
||||
}
|
||||
|
||||
interface AppThemeProps {
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* This is for the docs site. You can ignore it or remove it.
|
||||
*/
|
||||
disableCustomTheme?: boolean;
|
||||
themeComponents?: ThemeOptions['components'];
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* This is for the docs site. You can ignore it or remove it.
|
||||
*/
|
||||
disableCustomTheme?: boolean;
|
||||
themeComponents?: ThemeOptions["components"];
|
||||
}
|
||||
|
||||
export default function AppTheme(props: AppThemeProps) {
|
||||
const { children, disableCustomTheme, themeComponents } = props;
|
||||
const theme = React.useMemo(() => {
|
||||
return disableCustomTheme
|
||||
? {}
|
||||
: createTheme({
|
||||
// For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
|
||||
cssVariables: {
|
||||
colorSchemeSelector: 'data-mui-color-scheme',
|
||||
cssVarPrefix: 'template',
|
||||
},
|
||||
colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
|
||||
typography,
|
||||
shadows,
|
||||
shape,
|
||||
components: {
|
||||
...inputsCustomizations,
|
||||
...dataDisplayCustomizations,
|
||||
...feedbackCustomizations,
|
||||
...navigationCustomizations,
|
||||
...surfacesCustomizations,
|
||||
...themeComponents,
|
||||
},
|
||||
});
|
||||
}, [disableCustomTheme, themeComponents]);
|
||||
if (disableCustomTheme) {
|
||||
return <React.Fragment>{children}</React.Fragment>;
|
||||
}
|
||||
return (
|
||||
<ThemeProvider theme={theme} disableTransitionOnChange>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
const { children, disableCustomTheme, themeComponents } = props;
|
||||
const theme = React.useMemo(() => {
|
||||
return disableCustomTheme
|
||||
? {}
|
||||
: createTheme({
|
||||
palette: {
|
||||
mode: "dark", // Enforcing dark mode across the app
|
||||
background: {
|
||||
default: "#121212", // Dark background color
|
||||
paper: "#1e1e1e", // Darker background for cards, containers, etc.
|
||||
},
|
||||
text: {
|
||||
primary: "#ffffff", // White text for readability
|
||||
secondary: "#b0b0b0", // Lighter secondary text
|
||||
},
|
||||
},
|
||||
cssVariables: {
|
||||
colorSchemeSelector: "data-mui-color-scheme",
|
||||
cssVarPrefix: "template",
|
||||
},
|
||||
typography,
|
||||
shadows,
|
||||
shape,
|
||||
components: {
|
||||
...inputsCustomizations,
|
||||
...dataDisplayCustomizations,
|
||||
...feedbackCustomizations,
|
||||
...navigationCustomizations,
|
||||
...surfacesCustomizations,
|
||||
...themeComponents,
|
||||
},
|
||||
});
|
||||
}, [disableCustomTheme, themeComponents]);
|
||||
|
||||
if (disableCustomTheme) {
|
||||
return <React.Fragment>{children}</React.Fragment>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme} disableTransitionOnChange>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue