dev-jaanvi #1
|
|
@ -55,7 +55,19 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = (data: FormData) => {
|
const onSubmit = (data: FormData) => {
|
||||||
handleCreate(data);
|
if (editRow) {
|
||||||
|
|
||||||
|
handleUpdate(
|
||||||
|
editRow.id,
|
||||||
|
data.name,
|
||||||
|
data.email,
|
||||||
|
data.phone,
|
||||||
|
data.password
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
|
||||||
|
handleCreate(data);
|
||||||
|
}
|
||||||
|
|
||||||
handleClose();
|
handleClose();
|
||||||
reset();
|
reset();
|
||||||
|
|
@ -79,7 +91,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{editRow ? "Edit Admin" : "Add Admin"}
|
{editRow ? "Edit User" : "Add User"}
|
||||||
<Box
|
<Box
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
sx={{
|
sx={{
|
||||||
|
|
@ -210,3 +222,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AddUserModal;
|
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={{
|
sx={{
|
||||||
display: { xs: "auto", md: "none" },
|
display: { xs: "auto", md: "none" },
|
||||||
boxShadow: 0,
|
boxShadow: 0,
|
||||||
bgcolor: "background.paper",
|
backgroundColor:"#1C1C1C",
|
||||||
backgroundImage: "none",
|
backgroundImage: "none",
|
||||||
borderBottom: "1px solid",
|
borderBottom: "1px solid",
|
||||||
borderColor: "divider",
|
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 * as React from "react";
|
||||||
import { styled } from "@mui/material/styles";
|
import { styled } from "@mui/material/styles";
|
||||||
import Table from "@mui/material/Table";
|
import Table from "@mui/material/Table";
|
||||||
|
|
@ -12,24 +326,30 @@ import { useDispatch } from "react-redux";
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
dividerClasses,
|
|
||||||
IconButton,
|
IconButton,
|
||||||
listClasses,
|
InputAdornment,
|
||||||
Menu,
|
Menu,
|
||||||
|
Pagination,
|
||||||
|
TextField,
|
||||||
|
Typography,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
|
||||||
import DeleteModal from "../Modals/DeleteModal";
|
import DeleteModal from "../Modals/DeleteModal";
|
||||||
import { AppDispatch } from "../../redux/store/store";
|
import { AppDispatch } from "../../redux/store/store";
|
||||||
import ViewModal from "../Modals/ViewModal";
|
import ViewModal from "../Modals/ViewModal";
|
||||||
|
import SearchIcon from "@mui/icons-material/Search";
|
||||||
|
import TuneIcon from "@mui/icons-material/Tune";
|
||||||
|
|
||||||
// Styled components for customization
|
// Styled components for customization
|
||||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||||
[`&.${tableCellClasses.head}`]: {
|
[`&.${tableCellClasses.head}`]: {
|
||||||
backgroundColor: " #1565c0",
|
backgroundColor: "#454545", // Changed to #272727 for the header
|
||||||
color: theme.palette.common.white,
|
color: theme.palette.common.white,
|
||||||
|
borderBottom: "none", // Remove any border at the bottom of the header
|
||||||
},
|
},
|
||||||
[`&.${tableCellClasses.body}`]: {
|
[`&.${tableCellClasses.body}`]: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
|
borderBottom: "1px solid #454545", // Adding border to body cells
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
@ -37,8 +357,9 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
|
||||||
"&:nth-of-type(odd)": {
|
"&:nth-of-type(odd)": {
|
||||||
backgroundColor: theme.palette.action.hover,
|
backgroundColor: theme.palette.action.hover,
|
||||||
},
|
},
|
||||||
"&:last-child td, &:last-child th": {
|
"& td, th": {
|
||||||
border: 0,
|
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;
|
setViewModal: Function;
|
||||||
deleteModal: boolean;
|
deleteModal: boolean;
|
||||||
handleStatusToggle: (id: string, currentStatus: number) => void;
|
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> = ({
|
const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
|
|
@ -76,10 +398,15 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
setModalOpen,
|
setModalOpen,
|
||||||
handleStatusToggle,
|
handleStatusToggle,
|
||||||
tableType,
|
tableType,
|
||||||
|
handleClickOpen,
|
||||||
|
|
||||||
}) => {
|
}) => {
|
||||||
const dispatch = useDispatch<AppDispatch>();
|
const dispatch = useDispatch<AppDispatch>();
|
||||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||||
const [selectedRow, setSelectedRow] = React.useState<Row | null>(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);
|
const open = Boolean(anchorEl);
|
||||||
|
|
||||||
|
|
@ -124,32 +451,164 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
handleClose();
|
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 (
|
return (
|
||||||
<Box sx={{ overflowX: "auto", width: "100%" }}>
|
<Box
|
||||||
<TableContainer component={Paper}>
|
sx={{
|
||||||
<Table
|
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={{
|
sx={{
|
||||||
minWidth: 700,
|
width: "422px",
|
||||||
width: "100%",
|
borderRadius: "12px",
|
||||||
tableLayout: "auto",
|
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>
|
<TableRow>
|
||||||
{columns.map((column) => (
|
{columns.map((column) => (
|
||||||
<StyledTableCell
|
<StyledTableCell
|
||||||
key={column.id}
|
key={column.id}
|
||||||
align={column.align || "left"}
|
|
||||||
sx={{
|
sx={{
|
||||||
whiteSpace: "nowrap", // Prevent wrapping
|
color: "#FFFFFF",
|
||||||
// fontSize: { xs: "12px", sm: "14px" },
|
fontWeight: "bold",
|
||||||
fontSize: {
|
|
||||||
xs: "10px",
|
|
||||||
sm: "12px",
|
|
||||||
md: "14px",
|
|
||||||
}, // Adjust font size responsively
|
|
||||||
padding: { xs: "8px", sm: "12px" },
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{column.label}
|
{column.label}
|
||||||
|
|
@ -158,20 +617,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{rows.map((row, rowIndex) => (
|
{currentRows.map((row, rowIndex) => (
|
||||||
<StyledTableRow key={rowIndex}>
|
<StyledTableRow key={rowIndex}>
|
||||||
{columns.map((column) => (
|
{columns.map((column) => (
|
||||||
<StyledTableCell
|
<StyledTableCell
|
||||||
key={column.id}
|
key={column.id}
|
||||||
align={column.align || "left"}
|
|
||||||
sx={{
|
sx={{
|
||||||
whiteSpace: "nowrap", // Prevent wrapping
|
color: "#FFFFFF",
|
||||||
fontSize: {
|
backgroundColor: "#272727",
|
||||||
xs: "10px",
|
|
||||||
sm: "12px",
|
|
||||||
md: "14px",
|
|
||||||
}, // Adjust font size responsively
|
|
||||||
padding: { xs: "8px", sm: "12px" },
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{isImage(row[column.id]) ? (
|
{isImage(row[column.id]) ? (
|
||||||
|
|
@ -192,8 +645,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
handleClick(e, row);
|
handleClick(e, row);
|
||||||
setRowData(row); // Store the selected 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>
|
</IconButton>
|
||||||
)}
|
)}
|
||||||
</StyledTableCell>
|
</StyledTableCell>
|
||||||
|
|
@ -204,6 +673,40 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
</Table>
|
</Table>
|
||||||
</TableContainer>
|
</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 */}
|
{/* Menu Actions */}
|
||||||
{open && (
|
{open && (
|
||||||
<Menu
|
<Menu
|
||||||
|
|
@ -215,15 +718,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||||
sx={{
|
sx={{
|
||||||
[`& .${listClasses.root}`]: {
|
|
||||||
padding: "4px",
|
|
||||||
},
|
|
||||||
[`& .${paperClasses.root}`]: {
|
[`& .${paperClasses.root}`]: {
|
||||||
padding: 0,
|
padding: 0,
|
||||||
},
|
},
|
||||||
[`& .${dividerClasses.root}`]: {
|
|
||||||
margin: "4px -4px",
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
|
|
@ -243,7 +740,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
sx={{
|
sx={{
|
||||||
justifyContent: "flex-start",
|
justifyContent: "flex-start",
|
||||||
py: 0,
|
py: 0,
|
||||||
textTransform: "capitalize",
|
fontWeight: "bold",
|
||||||
|
color: "#52ACDF",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
View
|
View
|
||||||
|
|
@ -258,6 +756,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
id={selectedRow?.id}
|
id={selectedRow?.id}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
variant="text"
|
variant="text"
|
||||||
onClick={() => setModalOpen(true)}
|
onClick={() => setModalOpen(true)}
|
||||||
|
|
@ -270,10 +769,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</Button>
|
</Button>
|
||||||
|
{tableType === "role" && (
|
||||||
{tableType === "roleList" && (
|
<Button
|
||||||
<Button variant="text" onClick={handleToggleStatus}>
|
variant="text"
|
||||||
{selectedRow.statusValue === 1
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleToggleStatus();
|
||||||
|
}}
|
||||||
|
color="secondary"
|
||||||
|
sx={{
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
py: 0,
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{selectedRow?.statusValue === 1
|
||||||
? "Deactivate"
|
? "Deactivate"
|
||||||
: "Activate"}
|
: "Activate"}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -289,24 +799,25 @@ const CustomTable: React.FC<CustomTableProps> = ({
|
||||||
sx={{
|
sx={{
|
||||||
justifyContent: "flex-start",
|
justifyContent: "flex-start",
|
||||||
py: 0,
|
py: 0,
|
||||||
textTransform: "capitalize",
|
fontWeight: "bold",
|
||||||
|
color: "red",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
</Button>
|
</Button>
|
||||||
{deleteModal && (
|
|
||||||
<DeleteModal
|
|
||||||
handleDelete={() =>
|
|
||||||
handleDeleteButton(selectedRow?.id)
|
|
||||||
}
|
|
||||||
open={deleteModal}
|
|
||||||
setDeleteModal={setDeleteModal}
|
|
||||||
id={selectedRow?.id}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Box>
|
</Box>
|
||||||
</Menu>
|
</Menu>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Modals */}
|
||||||
|
{deleteModal && (
|
||||||
|
<DeleteModal
|
||||||
|
handleDelete={() => handleDeleteButton(selectedRow?.id)}
|
||||||
|
open={deleteModal}
|
||||||
|
setDeleteModal={setDeleteModal}
|
||||||
|
id={selectedRow?.id}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -35,8 +35,8 @@ export default function Header() {
|
||||||
sx={{
|
sx={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "84px",
|
height: "84px",
|
||||||
// backgroundColor: "#202020",
|
backgroundColor: "#1C1C1C",
|
||||||
padding: "20px 24px",
|
//padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
|
|
@ -60,7 +60,7 @@ export default function Header() {
|
||||||
sx={{
|
sx={{
|
||||||
width: { xs: "100%", sm: "360px" },
|
width: { xs: "100%", sm: "360px" },
|
||||||
height: "44px",
|
height: "44px",
|
||||||
backgroundColor: "#FFFFFF",
|
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
border: "1px solid #424242",
|
border: "1px solid #424242",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -68,12 +68,12 @@ export default function Header() {
|
||||||
padding: "0 12px",
|
padding: "0 12px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SearchIcon sx={{ color: "#202020" }} />
|
<SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||||
<InputBase
|
<InputBase
|
||||||
sx={{
|
sx={{
|
||||||
marginLeft: 1,
|
marginLeft: 1,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
color: "#202020",
|
color: "#FFFFFF",
|
||||||
fontSize: { xs: "12px", sm: "14px" },
|
fontSize: { xs: "12px", sm: "14px" },
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
@ -104,13 +104,11 @@ export default function Header() {
|
||||||
src="/avatar.png"
|
src="/avatar.png"
|
||||||
sx={{ width: 36, height: 36 }}
|
sx={{ width: 36, height: 36 }}
|
||||||
/>
|
/>
|
||||||
<Typography variant="body1" sx={{ color: "#202020" }}>
|
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
|
||||||
{user?.name || "No Admin"}
|
{user?.name || "No Admin"}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<OptionsMenu
|
<OptionsMenu />
|
||||||
|
|
||||||
/>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
{/* <ColorModeIconDropdown /> */}
|
{/* <ColorModeIconDropdown /> */}
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
||||||
|
|
@ -69,39 +69,7 @@ export default function SideMenu() {
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
<MenuContent hidden={open} />
|
<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>
|
</Drawer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,13 +18,16 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
height: "100vh",
|
height: "100vh",
|
||||||
flexDirection: { xs: "column", md: "row" },
|
flexDirection: { xs: "column", md: "row" },
|
||||||
|
width: "100%",
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* SideMenu - Responsive, shown only on large screens */}
|
{/* SideMenu - Responsive, shown only on large screens */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: { xs: "none", md: "block" },
|
display: { xs: "none", md: "block" },
|
||||||
width: 250,
|
// width: 250,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SideMenu />
|
<SideMenu />
|
||||||
|
|
@ -46,8 +49,24 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
||||||
overflow: "auto",
|
overflow: "auto",
|
||||||
...customStyles,
|
...customStyles,
|
||||||
mt: { xs: 8, md: 0 },
|
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
|
<Stack
|
||||||
spacing={2}
|
spacing={2}
|
||||||
sx={{
|
sx={{
|
||||||
|
|
@ -60,7 +79,7 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
|
||||||
mt: { xs: 3, md: 0 },
|
mt: { xs: 3, md: 0 },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Header />
|
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</Stack>
|
</Stack>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
||||||
|
|
@ -69,6 +69,7 @@ export default function AdminList() {
|
||||||
email,
|
email,
|
||||||
phone,
|
phone,
|
||||||
registeredAddress,
|
registeredAddress,
|
||||||
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
await dispatch(adminList());
|
await dispatch(adminList());
|
||||||
|
|
@ -85,18 +86,17 @@ export default function AdminList() {
|
||||||
{ id: "registeredAddress", label: "Address" },
|
{ id: "registeredAddress", label: "Address" },
|
||||||
{ id: "action", label: "Action", align: "center" },
|
{ id: "action", label: "Action", align: "center" },
|
||||||
];
|
];
|
||||||
const filteredAdmins = admins?.filter(
|
// const filteredAdmins = admins?.filter(
|
||||||
(admin) =>
|
// (admin) =>
|
||||||
admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
// admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
// admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
// admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
admin.registeredAddress
|
// admin.registeredAddress
|
||||||
.toLowerCase()
|
// .toLowerCase()
|
||||||
.includes(searchTerm.toLowerCase())
|
// .includes(searchTerm.toLowerCase())
|
||||||
);
|
// );
|
||||||
|
|
||||||
const categoryRows = filteredAdmins?.length
|
const categoryRows = admins?.map(
|
||||||
? filteredAdmins?.map(
|
|
||||||
(
|
(
|
||||||
admin: {
|
admin: {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -112,68 +112,14 @@ export default function AdminList() {
|
||||||
name: admin?.name,
|
name: admin?.name,
|
||||||
email: admin?.email,
|
email: admin?.email,
|
||||||
phone: admin?.phone,
|
phone: admin?.phone,
|
||||||
registeredAddress: admin?.registeredAddress,
|
registeredAddress: admin?.registeredAddress || "NA",
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
: [];
|
;
|
||||||
|
|
||||||
return (
|
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
|
<CustomTable
|
||||||
columns={categoryColumns}
|
columns={categoryColumns}
|
||||||
rows={categoryRows}
|
rows={categoryRows}
|
||||||
|
|
@ -183,6 +129,8 @@ export default function AdminList() {
|
||||||
viewModal={viewModal}
|
viewModal={viewModal}
|
||||||
setRowData={setRowData}
|
setRowData={setRowData}
|
||||||
setModalOpen={setModalOpen}
|
setModalOpen={setModalOpen}
|
||||||
|
tableType="admin"
|
||||||
|
handleClickOpen={handleClickOpen}
|
||||||
/>
|
/>
|
||||||
<AddEditCategoryModal
|
<AddEditCategoryModal
|
||||||
open={modalOpen}
|
open={modalOpen}
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,58 @@
|
||||||
// src/pages/Dashboard
|
// src/pages/Dashboard
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from "react";
|
||||||
import { Box, CssBaseline, Typography } from '@mui/material';
|
import { Box, CssBaseline, Typography } from "@mui/material";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
chartsCustomizations,
|
chartsCustomizations,
|
||||||
dataGridCustomizations,
|
dataGridCustomizations,
|
||||||
datePickersCustomizations,
|
datePickersCustomizations,
|
||||||
treeViewCustomizations,
|
treeViewCustomizations,
|
||||||
} from './theme/customizations';
|
} from "./theme/customizations";
|
||||||
import DashboardLayout from '../../layouts/DashboardLayout';
|
import DashboardLayout from "../../layouts/DashboardLayout";
|
||||||
import AppTheme from '../../shared-theme/AppTheme';
|
import AppTheme from "../../shared-theme/AppTheme";
|
||||||
import MainGrid from '../../components/MainGrid';
|
import MainGrid from "../../components/MainGrid";
|
||||||
import AdminList from '../AdminList';
|
import AdminList from "../AdminList";
|
||||||
|
|
||||||
const xThemeComponents = {
|
const xThemeComponents = {
|
||||||
...chartsCustomizations,
|
...chartsCustomizations,
|
||||||
...dataGridCustomizations,
|
...dataGridCustomizations,
|
||||||
...datePickersCustomizations,
|
...datePickersCustomizations,
|
||||||
...treeViewCustomizations,
|
...treeViewCustomizations,
|
||||||
};
|
};
|
||||||
|
|
||||||
interface DashboardProps {
|
interface DashboardProps {
|
||||||
disableCustomTheme?: boolean;
|
disableCustomTheme?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => {
|
const Dashboard: React.FC<DashboardProps> = ({
|
||||||
return (
|
disableCustomTheme = false,
|
||||||
<AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
|
}) => {
|
||||||
<CssBaseline enableColorScheme />
|
return (
|
||||||
{!disableCustomTheme ? (
|
<AppTheme
|
||||||
<><MainGrid /></>
|
{...{ disableCustomTheme }}
|
||||||
) : (
|
themeComponents={xThemeComponents}
|
||||||
<Box
|
>
|
||||||
sx={{
|
<CssBaseline enableColorScheme />
|
||||||
display: 'flex',
|
{!disableCustomTheme ? (
|
||||||
justifyContent: 'center',
|
<>
|
||||||
alignItems: 'center',
|
<MainGrid />
|
||||||
backgroundColor:'#202020',
|
</>
|
||||||
height: '100vh',
|
) : (
|
||||||
textAlign: 'center',
|
<Box
|
||||||
padding: 2,
|
sx={{
|
||||||
}}
|
display: "flex",
|
||||||
>
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
</Box>
|
backgroundColor: "#202020",
|
||||||
)}
|
height: "100vh",
|
||||||
</AppTheme>
|
textAlign: "center",
|
||||||
);
|
padding: 2,
|
||||||
|
}}
|
||||||
|
></Box>
|
||||||
|
)}
|
||||||
|
</AppTheme>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Dashboard;
|
export default Dashboard;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -100,47 +100,7 @@ export default function RoleList() {
|
||||||
|
|
||||||
return (
|
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 ? (
|
{showPermissions ? (
|
||||||
<AddEditRolePage />
|
<AddEditRolePage />
|
||||||
) : (
|
) : (
|
||||||
|
|
@ -154,7 +114,8 @@ export default function RoleList() {
|
||||||
setRowData={setRowData}
|
setRowData={setRowData}
|
||||||
setModalOpen={setModalOpen}
|
setModalOpen={setModalOpen}
|
||||||
handleStatusToggle={handleStatusToggle}
|
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 React, { useEffect, useState } from "react";
|
||||||
import { Box, Button, Typography } from "@mui/material";
|
import { Box, Button, Typography } from "@mui/material";
|
||||||
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
|
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
import CustomTable, { Column } from "../../components/CustomTable";
|
import CustomTable, { Column } from "../../components/CustomTable";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
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 { AppDispatch, RootState } from "../../redux/store/store";
|
||||||
import { string } from "prop-types";
|
import { string } from "prop-types";
|
||||||
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
|
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
|
||||||
|
|
@ -709,7 +41,7 @@ export default function UserList() {
|
||||||
name: string;
|
name: string;
|
||||||
email: string;
|
email: string;
|
||||||
phone: string;
|
phone: string;
|
||||||
registeredAddress: string;
|
|
||||||
}) => {
|
}) => {
|
||||||
try {
|
try {
|
||||||
await dispatch(createUser(data));
|
await dispatch(createUser(data));
|
||||||
|
|
@ -724,20 +56,19 @@ export default function UserList() {
|
||||||
id: string,
|
id: string,
|
||||||
name: string,
|
name: string,
|
||||||
email: string,
|
email: string,
|
||||||
phone: string,
|
phone: string
|
||||||
registeredAddress: string
|
|
||||||
) => {
|
) => {
|
||||||
try {
|
try {
|
||||||
await dispatch(
|
await dispatch(
|
||||||
updateAdmin({
|
updateUser({
|
||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
email,
|
email,
|
||||||
phone,
|
phone,
|
||||||
registeredAddress,
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
await dispatch(adminList());
|
await dispatch(userList());
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Update failed", error);
|
console.error("Update failed", error);
|
||||||
}
|
}
|
||||||
|
|
@ -784,34 +115,6 @@ export default function UserList() {
|
||||||
|
|
||||||
return (
|
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
|
<CustomTable
|
||||||
columns={categoryColumns}
|
columns={categoryColumns}
|
||||||
rows={categoryRows}
|
rows={categoryRows}
|
||||||
|
|
@ -821,6 +124,8 @@ export default function UserList() {
|
||||||
viewModal={viewModal}
|
viewModal={viewModal}
|
||||||
setRowData={setRowData}
|
setRowData={setRowData}
|
||||||
setModalOpen={setModalOpen}
|
setModalOpen={setModalOpen}
|
||||||
|
tableType="user"
|
||||||
|
handleClickOpen={handleClickOpen}
|
||||||
/>
|
/>
|
||||||
<AddUserModal
|
<AddUserModal
|
||||||
open={modalOpen}
|
open={modalOpen}
|
||||||
|
|
|
||||||
|
|
@ -152,55 +152,6 @@ export default function VehicleList() {
|
||||||
return (
|
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
|
<CustomTable
|
||||||
columns={categoryColumns}
|
columns={categoryColumns}
|
||||||
|
|
@ -211,6 +162,8 @@ export default function VehicleList() {
|
||||||
viewModal={viewModal}
|
viewModal={viewModal}
|
||||||
setRowData={setRowData}
|
setRowData={setRowData}
|
||||||
setModalOpen={setModalOpen}
|
setModalOpen={setModalOpen}
|
||||||
|
tableType="vehicle"
|
||||||
|
handleClickOpen={handleClickOpen}
|
||||||
/>
|
/>
|
||||||
{/* <AddEditCategoryModal
|
{/* <AddEditCategoryModal
|
||||||
open={modalOpen}
|
open={modalOpen}
|
||||||
|
|
|
||||||
|
|
@ -120,11 +120,8 @@ const vehicleSlice = createSlice({
|
||||||
state.loading = true;
|
state.loading = true;
|
||||||
})
|
})
|
||||||
.addCase(updateVehicle.fulfilled, (state, action) => {
|
.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.loading = false;
|
||||||
|
state.error = action.payload;
|
||||||
})
|
})
|
||||||
.addCase(updateVehicle.rejected, (state) => {
|
.addCase(updateVehicle.rejected, (state) => {
|
||||||
state.loading = false;
|
state.loading = false;
|
||||||
|
|
|
||||||
|
|
@ -150,10 +150,7 @@ const adminSlice = createSlice({
|
||||||
state.isLoading = true;
|
state.isLoading = true;
|
||||||
})
|
})
|
||||||
.addCase(updateAdmin.fulfilled, (state, action) => {
|
.addCase(updateAdmin.fulfilled, (state, action) => {
|
||||||
const updatedAdmin = action.payload;
|
|
||||||
state.admins = state?.admins?.map((admin) =>
|
|
||||||
admin?.id === updatedAdmin?.id ? updatedAdmin : admin
|
|
||||||
);
|
|
||||||
state.isLoading = false;
|
state.isLoading = false;
|
||||||
})
|
})
|
||||||
.addCase(updateAdmin.rejected, (state) => {
|
.addCase(updateAdmin.rejected, (state) => {
|
||||||
|
|
|
||||||
|
|
@ -5,14 +5,14 @@ import { toast } from "sonner";
|
||||||
|
|
||||||
// Define TypeScript types
|
// Define TypeScript types
|
||||||
interface User {
|
interface User {
|
||||||
id: number;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
email: string;
|
email: string;
|
||||||
phone?: string;
|
phone?: string;
|
||||||
// location?: string;
|
// location?: string;
|
||||||
// managerAssigned?: string;
|
// managerAssigned?: string;
|
||||||
// vehicle?: string;
|
// vehicle?: string;
|
||||||
password:string;
|
password: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface UserState {
|
interface UserState {
|
||||||
|
|
@ -55,12 +55,8 @@ export const createUser = createAsyncThunk<
|
||||||
{
|
{
|
||||||
name: string;
|
name: string;
|
||||||
email: string;
|
email: string;
|
||||||
password: string;
|
|
||||||
phone: string;
|
phone: string;
|
||||||
|
|
||||||
// location?: string;
|
|
||||||
// managerAssigned?: string;
|
|
||||||
// vehicle?: string;
|
|
||||||
},
|
},
|
||||||
{ rejectValue: string }
|
{ rejectValue: string }
|
||||||
>("/CreateUser", async (data, { rejectWithValue }) => {
|
>("/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({
|
const userSlice = createSlice({
|
||||||
name: "fetchUsers",
|
name: "fetchUsers",
|
||||||
initialState,
|
initialState,
|
||||||
|
|
@ -111,7 +124,16 @@ const userSlice = createSlice({
|
||||||
(state, action: PayloadAction<string | undefined>) => {
|
(state, action: PayloadAction<string | undefined>) => {
|
||||||
state.loading = false;
|
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 * as React from "react";
|
||||||
import { ThemeProvider, Theme, createTheme } from '@mui/material/styles';
|
import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
|
||||||
import type { ThemeOptions } from '@mui/material/styles';
|
import type { ThemeOptions } from "@mui/material/styles";
|
||||||
import { inputsCustomizations } from './customizations/inputs';
|
import { inputsCustomizations } from "./customizations/inputs";
|
||||||
import { dataDisplayCustomizations } from './customizations/dataDisplay';
|
import { dataDisplayCustomizations } from "./customizations/dataDisplay";
|
||||||
import { feedbackCustomizations } from './customizations/feedback';
|
import { feedbackCustomizations } from "./customizations/feedback";
|
||||||
import { navigationCustomizations } from './customizations/navigation';
|
import { navigationCustomizations } from "./customizations/navigation";
|
||||||
import { surfacesCustomizations } from './customizations/surfaces';
|
import { surfacesCustomizations } from "./customizations/surfaces";
|
||||||
import { colorSchemes, typography, shadows, shape } from './themePrimitives';
|
import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
|
||||||
|
|
||||||
declare module '@mui/styles/defaultTheme' {
|
declare module "@mui/styles/defaultTheme" {
|
||||||
interface DefaultTheme extends Theme {
|
interface DefaultTheme extends Theme {
|
||||||
vars: object
|
vars: object;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
interface AppThemeProps {
|
interface AppThemeProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
/**
|
/**
|
||||||
* This is for the docs site. You can ignore it or remove it.
|
* This is for the docs site. You can ignore it or remove it.
|
||||||
*/
|
*/
|
||||||
disableCustomTheme?: boolean;
|
disableCustomTheme?: boolean;
|
||||||
themeComponents?: ThemeOptions['components'];
|
themeComponents?: ThemeOptions["components"];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function AppTheme(props: AppThemeProps) {
|
export default function AppTheme(props: AppThemeProps) {
|
||||||
const { children, disableCustomTheme, themeComponents } = props;
|
const { children, disableCustomTheme, themeComponents } = props;
|
||||||
const theme = React.useMemo(() => {
|
const theme = React.useMemo(() => {
|
||||||
return disableCustomTheme
|
return disableCustomTheme
|
||||||
? {}
|
? {}
|
||||||
: createTheme({
|
: createTheme({
|
||||||
// For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
|
palette: {
|
||||||
cssVariables: {
|
mode: "dark", // Enforcing dark mode across the app
|
||||||
colorSchemeSelector: 'data-mui-color-scheme',
|
background: {
|
||||||
cssVarPrefix: 'template',
|
default: "#121212", // Dark background color
|
||||||
},
|
paper: "#1e1e1e", // Darker background for cards, containers, etc.
|
||||||
colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
|
},
|
||||||
typography,
|
text: {
|
||||||
shadows,
|
primary: "#ffffff", // White text for readability
|
||||||
shape,
|
secondary: "#b0b0b0", // Lighter secondary text
|
||||||
components: {
|
},
|
||||||
...inputsCustomizations,
|
},
|
||||||
...dataDisplayCustomizations,
|
cssVariables: {
|
||||||
...feedbackCustomizations,
|
colorSchemeSelector: "data-mui-color-scheme",
|
||||||
...navigationCustomizations,
|
cssVarPrefix: "template",
|
||||||
...surfacesCustomizations,
|
},
|
||||||
...themeComponents,
|
typography,
|
||||||
},
|
shadows,
|
||||||
});
|
shape,
|
||||||
}, [disableCustomTheme, themeComponents]);
|
components: {
|
||||||
if (disableCustomTheme) {
|
...inputsCustomizations,
|
||||||
return <React.Fragment>{children}</React.Fragment>;
|
...dataDisplayCustomizations,
|
||||||
}
|
...feedbackCustomizations,
|
||||||
return (
|
...navigationCustomizations,
|
||||||
<ThemeProvider theme={theme} disableTransitionOnChange>
|
...surfacesCustomizations,
|
||||||
{children}
|
...themeComponents,
|
||||||
</ThemeProvider>
|
},
|
||||||
);
|
});
|
||||||
|
}, [disableCustomTheme, themeComponents]);
|
||||||
|
|
||||||
|
if (disableCustomTheme) {
|
||||||
|
return <React.Fragment>{children}</React.Fragment>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider theme={theme} disableTransitionOnChange>
|
||||||
|
{children}
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue