jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Create admin with CRUD's

Browse source
This commit is contained in:
Eknoor Singh 2025-02-19 11:44:09 +05:30
parent a751cb1f4f
commit 6b36c6c25d
21 changed files with 13183 additions and 578 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
package.json
View file

@ -15,17 +15,23 @@
"@reduxjs/toolkit": "^2.5.0",
"@types/babel__core": "^7.20.5",
"AdapterDayjs": "file:@mui/x-date-pickers/AdapterDayjs",
"add": "^2.0.6",
"AppBar": "file:@mui/material/AppBar",
"axios": "^1.7.9",
"Box": "file:@mui/material/Box",
"PieChart": "file:@mui/x-charts/PieChart",
"RichTreeView": "file:@mui/x-tree-view/RichTreeView",
"Stack": "file:@mui/material/Stack",
"Tabs": "file:@mui/material/Tabs",
"Toolbar": "file:@mui/material/Toolbar",
"Typography": "file:@mui/material/Typography",
"add": "^2.0.6",
"axios": "^1.7.9",
"clsx": "^2.1.1",
"cra-template-typescript": "1.2.0",
"dayjs": "^1.11.13",
"highcharts": "^12.1.2",
"hooks": "file:@mui/x-charts/hooks",
"mui-phone-number": "^3.0.3",
"mui-tel-input": "^7.0.0",
"PieChart": "file:@mui/x-charts/PieChart",
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-cookie": "^7.2.2",
@ -35,13 +41,8 @@
"react-redux": "^9.2.0",
"react-router-dom": "^7.1.1",
"react-scripts": "5.0.1",
"RichTreeView": "file:@mui/x-tree-view/RichTreeView",
"sonner": "^1.7.4",
"Stack": "file:@mui/material/Stack",
"styles": "file:@mui/material/styles",
"Tabs": "file:@mui/material/Tabs",
"Toolbar": "file:@mui/material/Toolbar",
"Typography": "file:@mui/material/Typography",
"web-vitals": "^4.2.4"
},
"scripts": {

11827
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

139
src/components/AddAdmin/index.tsx Normal file
View file

@ -0,0 +1,139 @@
// import React from "react";
// import {
// Button,
// Dialog,
// DialogActions,
// DialogContent,
// DialogTitle,
// TextField,
// } from "@mui/material";
// import { useForm, Controller } from "react-hook-form";
// interface AddAdminModalProps {
// open: boolean;
// handleClose: () => void;
// handleAdd: (name: string, email: string, phone: string, registeredAddress: string) => void;
// }
// interface FormData {
// name: string;
// email: string;
// phone: string;
// registeredAddress: string;
// }
// const AddAdminModal: React.FC<AddAdminModalProps> = ({ open, handleClose, handleAdd }) => {
// const { control, handleSubmit, reset, formState: { errors } } = useForm<FormData>({
// defaultValues: {
// name: "",
// email: "",
// phone: "",
// registeredAddress: "",
// },
// });
// const onSubmit = (data: FormData) => {
// handleAdd(data.name, data.email, data.phone, data.registeredAddress);
// handleClose();
// reset();
// };
// return (
// <Dialog
// open={open}
// onClose={handleClose}
// maxWidth="md"
// fullWidth
// PaperProps={{
// component: "form",
// onSubmit: handleSubmit(onSubmit),
// }}
// >
// <DialogTitle>Add Admin</DialogTitle>
// <DialogContent>
// <Controller
// name="name"
// control={control}
// rules={{ required: "Admin Name is required" }}
// render={({ field }) => (
// <TextField
// {...field}
// autoFocus
// required
// margin="dense"
// label="Admin Name"
// type="text"
// fullWidth
// variant="standard"
// error={!!errors.name}
// helperText={errors.name?.message}
// />
// )}
// />
// <Controller
// name="email"
// control={control}
// rules={{ required: "Email is required" }}
// render={({ field }) => (
// <TextField
// {...field}
// required
// margin="dense"
// label="Email"
// type="text"
// fullWidth
// variant="standard"
// error={!!errors.email}
// helperText={errors.email?.message}
// />
// )}
// />
// <Controller
// name="phone"
// control={control}
// rules={{ required: "Phone number is required" }}
// render={({ field }) => (
// <TextField
// {...field}
// required
// margin="dense"
// label="Phone Number"
// type="text"
// fullWidth
// variant="standard"
// error={!!errors.phone}
// helperText={errors.phone?.message}
// />
// )}
// />
// <Controller
// name="registeredAddress"
// control={control}
// rules={{ required: "Address is required" }}
// render={({ field }) => (
// <TextField
// {...field}
// required
// margin="dense"
// label="Address"
// type="text"
// fullWidth
// variant="standard"
// error={!!errors.registeredAddress}
// helperText={errors.registeredAddress?.message}
// />
// )}
// />
// </DialogContent>
// <DialogActions>
// <Button onClick={handleClose}>Cancel</Button>
// <Button type="submit">Save</Button>
// </DialogActions>
// </Dialog>
// );
// };
// export default AddAdminModal;

236
src/components/AddEditCategoryModal/index.tsx
View file

@ -1,5 +1,6 @@
import React, { useEffect } from "react";
import {
Box,
Button,
Dialog,
DialogActions,
@ -7,26 +8,36 @@ import {
DialogTitle,
TextField,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useForm, Controller } from "react-hook-form";
interface AddEditCategoryModalProps {
open: boolean;
handleClose: () => void;
handleUpdate: (id: string, name: string, role: string) => void;
handleCreate: (data: FormData) => void;
handleUpdate: (
id: string,
name: string,
email: string,
phone: string,
registeredAddress: string
) => void;
editRow: any;
}
interface FormData {
category: string;
role: string;
name: string;
email: string;
phone: string;
registeredAddress: string;
}
const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
open,
handleClose,
editRow,
handleCreate,
handleUpdate,
editRow,
}) => {
const {
control,
@ -36,15 +47,24 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
reset,
} = useForm<FormData>({
defaultValues: {
category: "",
name: "",
role: "",
email: "",
phone: "",
registeredAddress: "",
},
});
const onSubmit = (data: FormData) => {
if (editRow) {
handleUpdate(editRow.id, data.name, data.role);
handleUpdate(
editRow.id,
data.name,
data.email,
data.phone,
data.registeredAddress
);
} else {
handleCreate(data);
}
handleClose();
reset();
@ -52,74 +72,162 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
useEffect(() => {
if (editRow) {
setValue("category", editRow.name);
setValue("name", editRow.name);
setValue("role", editRow.role);
setValue("email", editRow.email);
setValue("phone", editRow.phone);
setValue("registeredAddress", editRow.registeredAddress);
} else {
reset();
}
}, [editRow, setValue, reset]);
return (
<>
<Dialog
open={open}
onClose={handleClose}
maxWidth="md"
fullWidth
PaperProps={{
component: "form",
onSubmit: handleSubmit(onSubmit),
<Dialog
open={open}
onClose={handleClose}
maxWidth="md"
fullWidth
PaperProps={{
component: "form",
onSubmit: handleSubmit(onSubmit),
}}
>
<DialogTitle
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<DialogTitle>{editRow ? "Edit" : "Add"} Category</DialogTitle>
<DialogContent>
<Controller
name="name"
control={control}
rules={{
required: "Admin Name is required",
}}
render={({ field }) => (
<TextField
{...field}
autoFocus
required
margin="dense"
label="Admin Name"
type="text"
fullWidth
variant="standard"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
{editRow ? "Edit Admin" : "Add Admin"}
<Box
onClick={handleClose}
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
}}
>
<CloseIcon />
</Box>
</DialogTitle>
<Controller
name="role"
control={control}
render={({ field }) => (
<TextField
{...field}
margin="dense"
label="Role"
<DialogContent>
<Controller
name="name"
control={control}
rules={{
required: "Admin Name is required",
minLength: {
value: 3,
message: "Minimum 3 characters required",
},
maxLength: {
value: 30,
message: "Maximum 30 characters allowed",
},
}}
render={({ field }) => (
<TextField
{...field}
autoFocus
required
margin="dense"
label="Admin Name"
type="text"
fullWidth
variant="standard"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
fullWidth
variant="standard"
error={!!errors.role}
helperText={errors.role?.message}
disabled
/>
)}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type="submit">Save</Button>
</DialogActions>
</Dialog>
</>
<Controller
name="email"
control={control}
rules={{
required: "Email is required",
pattern: {
value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
message: "Invalid email address",
},
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Email"
type="email"
fullWidth
variant="standard"
error={!!errors.email}
helperText={errors.email?.message}
/>
)}
/>
<Controller
name="phone"
control={control}
rules={{
required: "Phone number is required",
pattern: {
value: /^[0-9]*$/,
message: "Only numbers are allowed",
},
minLength: {
value: 6,
message: "Phone number must be exactly 6 digits",
},
maxLength: {
value: 14,
message: "Phone number must be exactly 14 digits",
},
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Phone Number"
type="tel"
fullWidth
variant="standard"
error={!!errors.phone}
helperText={errors.phone?.message}
/>
)}
/>
<Controller
name="registeredAddress"
control={control}
rules={{
required: "Address is required",
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Address"
type="text"
fullWidth
variant="standard"
error={!!errors.registeredAddress}
helperText={errors.registeredAddress?.message}
/>
)}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type="submit">{editRow ? "Update" : "Create"}</Button>
</DialogActions>
</Dialog>
);
};

30
src/components/CustomDatePicker/index.tsx
View file

@ -34,21 +34,21 @@ function ButtonField(props: ButtonFieldProps) {
inputProps: { 'aria-label': ariaLabel } = {},
} = props;
return (
<Button
variant="outlined"
id={id}
disabled={disabled}
ref={ref}
aria-label={ariaLabel}
size="small"
onClick={() => setOpen?.((prev) => !prev)}
startIcon={<CalendarTodayRoundedIcon fontSize="small" />}
sx={{ minWidth: 'fit-content' }}
>
{label ? `${label}` : 'Pick a date'}
</Button>
);
// return (
// // <Button
// // variant="outlined"
// // id={id}
// // disabled={disabled}
// // ref={ref}
// // aria-label={ariaLabel}
// // size="small"
// // onClick={() => setOpen?.((prev) => !prev)}
// // startIcon={<CalendarTodayRoundedIcon fontSize="small" />}
// // sx={{ minWidth: 'fit-content' }}
// // >
// // {label ? `${label}` : 'Pick a date'}
// // </Button>
// );
}
export default function CustomDatePicker() {

436
src/components/CustomTable/index.tsx
View file

@ -1,225 +1,263 @@
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 { deleteAdmin } from "../../redux/slices/adminSlice"
import { useDispatch } from "react-redux"
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/DeleteModal"
import { AppDispatch } from "../../redux/store/store"
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,
},
}))
[`&.${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,
},
}))
"&: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"
id: string;
label: string;
align?: "left" | "center" | "right";
}
interface Row {
[key: string]: any
[key: string]: any;
}
interface CustomTableProps {
columns: Column[]
rows: Row[]
setDeleteModal: Function
setRowData: Function
setModalOpen: Function
deleteModal: boolean
columns: Column[];
rows: Row[];
setDeleteModal: Function;
setRowData: Function;
setModalOpen: Function;
viewModal: boolean;
setViewModal: Function;
deleteModal: boolean;
}
const CustomTable: React.FC<CustomTableProps> = ({
columns,
rows,
setDeleteModal,
deleteModal,
setRowData,
setModalOpen,
columns,
rows,
setDeleteModal,
deleteModal,
viewModal,
setRowData,
setViewModal,
setModalOpen,
}) => {
// console.log("columnsss", columns, rows)
const dispatch = useDispatch<AppDispatch>()
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
const [selectedRow, setSelectedRow] = React.useState<Row | null>(null)
const open = Boolean(anchorEl)
// console.log("columnsss", columns, rows)
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
}
const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
setAnchorEl(event.currentTarget);
setSelectedRow(row); // Ensure the row data is set
};
const handleClose = () => {
setAnchorEl(null)
}
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 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)
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()
}
dispatch(deleteAdmin(id || ""));
setDeleteModal(false); // Close the modal only after deletion
handleClose();
};
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
>
{column.label}
</StyledTableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
>
{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>
{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={() => setModalOpen(true)}
color="primary"
sx={{
justifyContent: "flex-start",
py: 0,
textTransform: "capitalize",
}}
>
Edit
</Button>
const handleViewButton = (id: string | undefined) => {
if (!id) console.error("ID not found", id);
<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>
)}
</TableContainer>
)
}
dispatch(adminList());
setViewModal(false);
};
export default CustomTable
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
>
{column.label}
</StyledTableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
>
{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>
{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>
<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>
)}
</TableContainer>
);
};
export default CustomTable;

153
src/components/EditAdmin/index.tsx Normal file
View file

@ -0,0 +1,153 @@
// import React, { useEffect } from "react";
// import {
// Button,
// Dialog,
// DialogActions,
// DialogContent,
// DialogTitle,
// TextField,
// } from "@mui/material";
// import { useForm, Controller } from "react-hook-form";
// interface EditAdminModalProps {
// open: boolean;
// handleClose: () => void;
// handleUpdate: (id: string, name: string, email: string, phone: string, registeredAddress: string) => void;
// editRow: any;
// }
// interface FormData {
// name: string;
// email: string;
// phone: string;
// registeredAddress: string;
// }
// const EditAdminModal: React.FC<EditAdminModalProps> = ({ open, handleClose, editRow, handleUpdate }) => {
// const { control, handleSubmit, setValue, reset, formState: { errors } } = useForm<FormData>({
// defaultValues: {
// name: "",
// email: "",
// phone: "",
// registeredAddress: "",
// },
// });
// useEffect(() => {
// if (editRow) {
// setValue("name", editRow.name);
// setValue("email", editRow.email);
// setValue("phone", editRow.phone);
// setValue("registeredAddress", editRow.registeredAddress);
// } else {
// reset();
// }
// }, [editRow, setValue, reset]);
// const onSubmit = (data: FormData) => {
// if (editRow) {
// handleUpdate(editRow.id, data.name, data.email, data.phone, data.registeredAddress);
// handleClose();
// reset();
// }
// };
// return (
// <Dialog
// open={open}
// onClose={handleClose}
// maxWidth="md"
// fullWidth
// PaperProps={{
// component: "form",
// onSubmit: handleSubmit(onSubmit),
// }}
// >
// <DialogTitle>Edit Admin</DialogTitle>
// <DialogContent>
// <Controller
// name="name"
// control={control}
// rules={{ required: "Admin Name is required" }}
// render={({ field }) => (
// <TextField
// {...field}
// autoFocus
// required
// margin="dense"
// label="Admin Name"
// type="text"
// fullWidth
// variant="standard"
// error={!!errors.name}
// helperText={errors.name?.message}
// />
// )}
// />
// <Controller
// name="email"
// control={control}
// rules={{ required: "Email is required" }}
// render={({ field }) => (
// <TextField
// {...field}
// required
// margin="dense"
// label="Email"
// type="text"
// fullWidth
// variant="standard"
// error={!!errors.email}
// helperText={errors.email?.message}
// />
// )}
// />
// <Controller
// name="phone"
// control={control}
// rules={{ required: "Phone number is required" }}
// render={({ field }) => (
// <TextField
// {...field}
// required
// margin="dense"
// label="Phone Number"
// type="text"
// fullWidth
// variant="standard"
// error={!!errors.phone}
// helperText={errors.phone?.message}
// />
// )}
// />
// <Controller
// name="registeredAddress"
// control={control}
// rules={{ required: "Address is required" }}
// render={({ field }) => (
// <TextField
// {...field}
// required
// margin="dense"
// label="Address"
// type="text"
// fullWidth
// variant="standard"
// error={!!errors.registeredAddress}
// helperText={errors.registeredAddress?.message}
// />
// )}
// />
// </DialogContent>
// <DialogActions>
// <Button onClick={handleClose}>Cancel</Button>
// <Button type="submit">Save</Button>
// </DialogActions>
// </Dialog>
// );
// };
// export default EditAdminModal;

35
src/components/LogOutFunction/LogOutFunction.tsx Normal file
View file

@ -0,0 +1,35 @@
// Logout.tsx
import React from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import LogoutModal from "../Modals/LogOutModal";
interface LogoutProps {
setLogoutModal: React.Dispatch<React.SetStateAction<boolean>>;
logoutModal: boolean;
}
const Logout: React.FC<LogoutProps> = ({ setLogoutModal, logoutModal }) => {
const navigate = useNavigate();
const handlelogout = () => {
localStorage.clear();
navigate("/auth/login");
toast.success("Logged out successfully");
setLogoutModal(false);
};
return (
<>
{logoutModal && (
<LogoutModal
handlelogout={handlelogout}
open={logoutModal}
setLogoutModal={setLogoutModal}
/>
)}
</>
);
};
export default Logout;

15
src/components/MainGrid/index.tsx
View file

@ -74,21 +74,6 @@ export default function MainGrid() {
<PageViewsBarChart />
</Grid>
</Grid>
<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
Details
</Typography>
<Grid container spacing={2} columns={12}>
<Grid size={{ xs: 12, lg: 9 }}>
<CustomizedDataGrid />
</Grid>
<Grid size={{ xs: 12, lg: 3 }}>
<Stack gap={2} direction={{ xs: 'column', sm: 'row', lg: 'column' }}>
<CustomizedTreeView />
<ChartUserByCountry />
</Stack>
</Grid>
</Grid>
<Copyright sx={{ my: 4 }} />
</Box>
);
}

12
src/components/MenuContent/index.tsx
View file

@ -5,7 +5,7 @@ import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Stack from "@mui/material/Stack";
import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
import AnalyticsRoundedIcon from "@mui/icons-material/AnalyticsRounded";
// import AnalyticsRoundedIcon from "@mui/icons-material/AnalyticsRounded";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import { Link, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
@ -17,11 +17,11 @@ const baseMenuItems = [
icon: <HomeRoundedIcon />,
url: "/panel/dashboard",
},
{
text: "Vehicles",
icon: <AnalyticsRoundedIcon />,
url: "/panel/vehicles",
},
// {
// text: "Vehicles",
// icon: <AnalyticsRoundedIcon />,
// url: "/panel/vehicles",
// },
//created by Eknnor and Jaanvi
];

98
src/components/Modals/DeleteModal/index.tsx Normal file
View file

@ -0,0 +1,98 @@
import { Box, Button, Modal, Typography } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
type Props = {
open: boolean;
setDeleteModal: Function;
handleDelete: (id: string | undefined) => void;
id?: string | undefined;
};
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 330,
bgcolor: "background.paper",
borderRadius: 1.5,
boxShadow: 24,
p: 3,
};
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
export default function DeleteModal({
open,
setDeleteModal,
handleDelete,
id,
}: Props) {
// console.log("DeleteModal opened with ID:", id)
return (
<Modal
open={open}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Typography
id="modal-modal-title"
variant="h6"
component="h2"
align="center"
sx={{ flexGrow: 1 }} // This ensures the title takes up available space
>
Delete Record
</Typography>
<Box
onClick={() => setDeleteModal(false)}
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "flex-end", // Aligns the close icon to the right
marginTop: -3.5
}}
>
<CloseIcon />
</Box>
<Typography
id="modal-modal-description"
sx={{ mt: 2 }}
align="center"
>
Are you sure you want to delete this record?
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
mt: 4,
gap: 2,
}}
>
<Button
variant="contained"
color="error"
type="button"
sx={btnStyle}
onClick={() => setDeleteModal(false)}
>
Cancel
</Button>
<Button
variant="contained"
type="button"
color="primary"
sx={btnStyle}
onClick={() => handleDelete(id || "")}
>
Delete
</Button>
</Box>
</Box>
</Modal>
);
}

61
src/components/Modals/DeleteModal/DeleteModal.tsx → src/components/Modals/LogOutModal/index.tsx
View file

@ -1,12 +1,12 @@
import { Box, Button, Modal, Typography } from "@mui/material"
import { Box, Button, Modal, Typography } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
type Props = {
open: boolean
setDeleteModal: Function
handleDelete: (id: string | undefined) => void
id?: string | undefined
}
open: boolean;
setLogoutModal: Function;
handlelogout: any;
};
const style = {
position: "absolute",
top: "50%",
@ -17,18 +17,15 @@ const style = {
borderRadius: 1.5,
boxShadow: 24,
p: 3,
}
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" }
export default function DeleteModal({
};
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
export default function LogoutModal({
open,
setDeleteModal,
handleDelete,
id,
setLogoutModal,
handlelogout,
}: Props) {
// console.log("DeleteModal opened with ID:", id)
return (
<Modal
open={open}
@ -36,20 +33,20 @@ export default function DeleteModal({
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Typography
id="modal-modal-title"
variant="h6"
component="h2"
align="center"
>
Delete Record
</Typography>
<Typography id="modal-title" variant="h5" fontWeight="bold" sx={{ width: "100%" }}>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
<Box sx={{ flex: 1, textAlign: "center" }}>Logout</Box>
<Box onClick={() => setLogoutModal(false)} sx={{ cursor: "pointer", display: "flex", alignItems: "center" }}>
<CloseIcon />
</Box>
</Box>
</Typography>
<Typography
id="modal-modal-description"
sx={{ mt: 2 }}
align="center"
>
Are you sure you want to delete this record?
Are you sure you want to Logout?
</Typography>
<Box
sx={{
@ -64,7 +61,7 @@ export default function DeleteModal({
color="error"
type="button"
sx={btnStyle}
onClick={() => setDeleteModal(false)}
onClick={() => setLogoutModal(false)}
>
Cancel
</Button>
@ -73,12 +70,12 @@ export default function DeleteModal({
type="button"
color="primary"
sx={btnStyle}
onClick={() => handleDelete(id || "")}
onClick={() => handlelogout()}
>
Delete
Logout
</Button>
</Box>
</Box>
</Modal>
)
}
);
}

123
src/components/Modals/ViewModal/index.tsx Normal file
View file

@ -0,0 +1,123 @@
import { Box, Button, Modal, Typography, Divider } from "@mui/material";
import { RootState } from "../../../redux/store/store";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import CloseIcon from "@mui/icons-material/Close";
type Props = {
open: boolean;
setViewModal: Function;
id?: string;
};
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
borderRadius: 2,
boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
p: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 2,
};
const btnStyle = {
mt: 2,
px: 5,
py: 1.2,
width: "100%",
textTransform: "capitalize",
};
export default function ViewModal({ open, setViewModal, id }: Props) {
const { admins } = useSelector((state: RootState) => state.adminReducer);
const [selectedAdmin, setSelectedAdmin] = useState<any>(null);
useEffect(() => {
if (id) {
const admin = admins.find((admin) => admin.id === id);
setSelectedAdmin(admin);
}
}, [id, admins]);
return (
<Modal
open={open}
aria-labelledby="modal-title"
aria-describedby="modal-description"
>
<Box sx={style}>
<Typography
id="modal-title"
variant="h5"
fontWeight="bold"
sx={{ width: "100%" }}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
}}
>
<Box sx={{ flex: 1, textAlign: "center" }}>
{selectedAdmin?.name}'s Details
</Box>
<Box
onClick={() => setViewModal(false)}
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
}}
>
<CloseIcon />
</Box>
</Box>
</Typography>
<Divider sx={{ width: "100%" }} />
{selectedAdmin ? (
<Box
sx={{
width: "100%",
textAlign: "center",
display: "flex",
flexDirection: "column",
gap: 1.5,
}}
>
<Typography variant="body1">
<b>Name:</b> {selectedAdmin.name}
</Typography>
<Typography variant="body1">
<strong>Email:</strong> {selectedAdmin.email}
</Typography>
<Typography variant="body1">
<strong>Phone:</strong> {selectedAdmin.phone}
</Typography>
<Typography variant="body1">
<strong>Address:</strong>{" "}
{selectedAdmin.registeredAddress ?? "N/A"}
</Typography>
</Box>
) : (
<Typography align="center">
No admin found with this ID
</Typography>
)}
{/* <Button variant="contained" color="error" sx={btnStyle} onClick={() => setViewModal(false)}>
Close
</Button> */}
</Box>
</Modal>
);
}

199
src/components/OptionsMenu/index.tsx
View file

@ -12,104 +12,109 @@ import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
import MenuButton from "../MenuButton";
import { Avatar } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import Logout from "../LogOutFunction/LogOutFunction";
const MenuItem = styled(MuiMenuItem)({
margin: "2px 0",
margin: "2px 0",
});
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event?.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
//Eknoor singh and jaanvi
//date:- 12-Feb-2025
//Made a navigation page for the profile page
const navigate = useNavigate();
const handleProfile = () => {
navigate("/auth/profile");
};
//Eknoor singh and jaanvi
//date:- 13-Feb-2025
//Implemented logout functionality which was static previously
const handlelogout = () => {
localStorage.clear();
navigate("/auth/login");
toast.success("Logged out successfully");
};
return (
<React.Fragment>
<MenuButton
aria-label="Open menu"
onClick={handleClick}
sx={{ borderColor: "transparent" }}
>
{avatar ? (
<MoreVertRoundedIcon />
) : (
<Avatar
sizes="small"
alt="Riley Carter"
src="/static/images/avatar/7.jpg"
sx={{ width: 36, height: 36 }}
/>
)}
</MenuButton>
<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",
},
}}
>
<MenuItem onClick={handleProfile}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<Divider />
<MenuItem onClick={handleClose}>Add another account</MenuItem>
<MenuItem onClick={handleClose}>Settings</MenuItem>
<Divider />
<MenuItem
onClick={handleClose}
sx={{
[`& .${listItemIconClasses.root}`]: {
ml: "auto",
minWidth: 0,
},
}}
>
{/* //Eknoor singh and jaanvi
//date:- 13-Feb-2025
//Implemented logout functionality which was static previously */}
<ListItemText
className="toast-button"
onClick={handlelogout}
>
Logout
</ListItemText>
<ListItemIcon>
<LogoutRoundedIcon fontSize="small" />
</ListItemIcon>
</MenuItem>
</Menu>
</React.Fragment>
);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event?.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
//Eknoor singh and jaanvi
//date:- 12-Feb-2025
//Made a navigation page for the profile page
const navigate = useNavigate();
const handleProfile = () => {
navigate("/panel/profile");
};
//jaanvi
//date:- 13-Feb-2025
return (
<React.Fragment>
<MenuButton
aria-label="Open menu"
onClick={handleClick}
sx={{ borderColor: "transparent" }}
>
{avatar ? (
<MoreVertRoundedIcon />
) : (
<Avatar
sizes="small"
alt="Riley Carter"
src="/static/images/avatar/7.jpg"
sx={{ width: 36, height: 36 }}
/>
)}
</MenuButton>
<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",
},
}}
>
<MenuItem onClick={handleProfile}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<Divider />
<MenuItem onClick={handleClose}>Add another account</MenuItem>
<MenuItem onClick={handleClose}>Settings</MenuItem>
<Divider />
<MenuItem
onClick={handleClose}
sx={{
[`& .${listItemIconClasses.root}`]: {
ml: "auto",
minWidth: 0,
},
}}
>
{/* //Eknoor singh and jaanvi
//date:- 13-Feb-2025
//Implemented logout functionality which was static previously */}
<ListItemText
onClick={(e) => {
e.stopPropagation();
setLogoutModal(true);
}}
>
Logout
</ListItemText>
<Logout
setLogoutModal={setLogoutModal}
logoutModal={logoutModal}
/>
<ListItemIcon>
<LogoutRoundedIcon fontSize="small" />
</ListItemIcon>
</MenuItem>
</Menu>
</React.Fragment>
);
}

6
src/layouts/DashboardLayout/index.tsx
View file

@ -21,6 +21,8 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
<Box
component="main"
sx={(theme) => ({
display: "flex",
height: '100vh',
flexGrow: 1,
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
@ -32,6 +34,10 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
<Stack
spacing={2}
sx={{
display: "flex",
flex: 1,
justifyItems: "center",
alignItems: 'center',
mx: 3,
pb: 5,

227
src/pages/AdminList/index.tsx
View file

@ -4,111 +4,148 @@ import AddEditCategoryModal from "../../components/AddEditCategoryModal";
import { useForm } from "react-hook-form";
import CustomTable, { Column } from "../../components/CustomTable";
import { useDispatch, useSelector } from "react-redux";
import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
import { AppDispatch, RootState } from "../../redux/store/store"; // Import RootState for selector
import { adminList, updateAdmin, createAdmin } from "../../redux/slices/adminSlice";
import { AppDispatch, RootState } from "../../redux/store/store";
export default function AdminList() {
const [modalOpen, setModalOpen] = useState(false);
const { reset } = useForm();
const [modalOpen, setModalOpen] = useState(false);
const { reset, handleSubmit } = useForm();
const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
const [rowData, setRowData] = React.useState<any | null>(null);
const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
const [viewModal, setViewModal] = React.useState<boolean>(false);
const [rowData, setRowData] = React.useState<any | null>(null);
const dispatch = useDispatch<AppDispatch>();
const dispatch = useDispatch<AppDispatch>();
// Fetching admin data from the Redux store
const admins = useSelector((state: RootState) => state.adminReducer.admins);
const admins = useSelector((state: RootState) => state.adminReducer.admins);
// Dispatching the API call when the component mounts
useEffect(() => {
dispatch(adminList());
}, [dispatch]);
useEffect(() => {
dispatch(adminList());
}, [dispatch]);
const handleClickOpen = () => {
setModalOpen(true);
};
const handleClickOpen = () => {
setRowData(null); // Reset row data when opening for new admin
setModalOpen(true);
};
const handleCloseModal = () => {
setModalOpen(false);
reset();
};
const handleCloseModal = () => {
setModalOpen(false);
setRowData(null);
reset();
};
const handleUpdate = async (id: string, name: string, role: string) => {
try {
await dispatch(updateAdmin({ id, name, role }));
await dispatch(adminList()); // Fetch updated admins list after update
} catch (error) {
console.error("Update failed", error);
}
};
const handleCreate = async (data: {
name: string;
email: string;
phone: string;
registeredAddress: string;
}) => {
try {
await dispatch(createAdmin(data));
await dispatch(adminList()); // Refresh the list after creation
handleCloseModal();
} catch (error) {
console.error("Creation failed", error);
}
};
const categoryColumns: Column[] = [
{ id: "srno", label: "Sr No" },
{ id: "name", label: "Name" },
{ id: "role", label: "Role" },
{ id: "action", label: "Action", align: "center" },
];
const handleUpdate = async (
id: string,
name: string,
email: string,
phone: string,
registeredAddress: string
) => {
try {
await dispatch(
updateAdmin({
id, name, email, phone, registeredAddress,
})
);
await dispatch(adminList());
} catch (error) {
console.error("Update failed", error);
}
};
// If no admins are available, display the sample data
const categoryRows = admins?.length
? admins?.map(
(
admin: { id: string; name: string; role: string },
index: number
) => ({
id: admin?.id,
srno: index + 1,
name: admin?.name,
role: admin?.role,
})
)
: [];
const categoryColumns: Column[] = [
{ id: "srno", label: "Sr No" },
{ id: "name", label: "Name" },
{ id: "email", label: "Email" },
{ id: "phone", label: "Phone" },
{ id: "registeredAddress", label: "Address" },
{ id: "action", label: "Action", align: "center" },
];
return (
<>
<Box
sx={{
width: "100%",
maxWidth: {
sm: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
},
}}
>
{/* Title and Add Category button */}
<Typography
component="h2"
variant="h6"
sx={{ mt: 2, fontWeight: 600 }}
>
Admins
</Typography>
<Button
variant="contained"
size="medium"
sx={{ textAlign: "right" }}
onClick={handleClickOpen}
>
Add Category
</Button>
</Box>
const categoryRows = admins?.length
? admins?.map(
(
admin: {
id: string;
name: string;
email: string;
phone: string;
registeredAddress: string;
},
index: number
) => ({
id: admin?.id,
srno: index + 1,
name: admin?.name,
email: admin?.email,
phone: admin?.phone,
registeredAddress: admin?.registeredAddress,
})
)
: [];
<CustomTable
columns={categoryColumns}
rows={categoryRows}
setDeleteModal={setDeleteModal}
deleteModal={deleteModal}
setRowData={setRowData}
setModalOpen={setModalOpen}
/>
<AddEditCategoryModal
open={modalOpen}
handleClose={handleCloseModal}
editRow={rowData}
handleUpdate={handleUpdate}
/>
</>
);
}
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 }}
>
Admins
</Typography>
<Button
variant="contained"
size="medium"
sx={{ textAlign: "right" }}
onClick={handleClickOpen}
>
Add Admin
</Button>
</Box>
<CustomTable
columns={categoryColumns}
rows={categoryRows}
setDeleteModal={setDeleteModal}
deleteModal={deleteModal}
setViewModal={setViewModal}
viewModal={viewModal}
setRowData={setRowData}
setModalOpen={setModalOpen}
/>
<AddEditCategoryModal
open={modalOpen}
handleClose={handleCloseModal}
handleCreate={handleCreate}
handleUpdate={handleUpdate}
editRow={rowData}
/>
</>
);
}

8
src/pages/Auth/Login/index.tsx
View file

@ -211,7 +211,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<Button type="submit" fullWidth variant="contained">
Sign in
</Button>
<Link
{/* <Link
component="button"
type="button"
onClick={handleClickOpen}
@ -219,9 +219,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sx={{ alignSelf: "center" }}
>
Forgot your password?
</Link>
</Link> */}
</Box>
<Divider>or</Divider>
{/* <Divider>or</Divider>
<Box
sx={{
display: "flex",
@ -239,7 +239,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
Sign up
</Link>
</Typography>
</Box>
</Box> */}
</Card>
</SignInContainer>
</AppTheme>

47
src/pages/Dashboard/index.tsx
View file

@ -1,17 +1,17 @@
// src/pages/Dashboard
import * as React from 'react';
import { CssBaseline } from '@mui/material';
import { Box, CssBaseline, Typography } from '@mui/material';
import {
chartsCustomizations,
dataGridCustomizations,
datePickersCustomizations,
treeViewCustomizations,
} from './theme/customizations/index.ts';
} from './theme/customizations';
import DashboardLayout from '../../layouts/DashboardLayout';
import AppTheme from '../../shared-theme/AppTheme';
import MainGrid from '../../components/MainGrid/index.tsx';
import MainGrid from '../../components/MainGrid';
const xThemeComponents = {
...chartsCustomizations,
@ -20,18 +20,39 @@ const xThemeComponents = {
...treeViewCustomizations,
};
export default function Dashboard(props: { disableCustomTheme?: boolean }) {
const disable = true;
interface DashboardProps {
disableCustomTheme?: boolean;
}
const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => {
return (
<AppTheme {...props} themeComponents={xThemeComponents}>
{!disable ? (
<>
<CssBaseline enableColorScheme />
<MainGrid />
</>
<AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
<CssBaseline enableColorScheme />
{!disableCustomTheme ? (
<MainGrid />
) : (
'Dashboard'
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
textAlign: 'center',
padding: 2,
}}
>
<Box>
<Typography variant="h6" component="h1" gutterBottom>
Dashboard
</Typography>
<Typography variant="body1" sx={{ marginTop: 2 }}>
No content available on the Dashboard yet.
</Typography>
</Box>
</Box>
)}
</AppTheme>
);
}
};
export default Dashboard;

4
src/pages/Vehicles/index.tsx
View file

@ -3,7 +3,7 @@ import { Box, Button, Typography } from '@mui/material';
import AddEditCategoryModal from '../../components/AddEditCategoryModal';
import { useForm } from 'react-hook-form';
import CustomTable from '../../components/CustomTable';
import DeleteModal from '../../components/Modals/DeleteModal/DeleteModal';
import DeleteModal from '../../components/Modals/DeleteModal';
// Sample data for categories
const categoryRows = [
@ -75,7 +75,7 @@ export default function Vehicles() {
sx={{ textAlign: 'right' }}
onClick={handleClickOpen}
>
Add Category
Add Categorywewfw
</Button>
</Box>

69
src/redux/slices/adminSlice.ts
View file

@ -4,12 +4,12 @@ import { toast } from "sonner";
// Interfaces
interface User {
token: string | null;
id: string;
name: string;
email: string;
role: string;
phone: string;
registeredAddress: string;
}
interface Admin {
@ -18,6 +18,7 @@ interface Admin {
role: string;
email: string;
phone: string;
registeredAddress: string;
}
interface AuthState {
@ -66,23 +67,39 @@ export const deleteAdmin = createAsyncThunk<
}
});
export const createAdmin = createAsyncThunk<
User,
{
name: string;
email: string;
phone: string;
registeredAddress: string;
},
{ rejectValue: string }
>("auth/signup", async (data, { rejectWithValue }) => {
try {
const response = await http.post("auth/create-admin", data);
return response.data;
} catch (error: any) {
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
}
});
// Update Admin
export const updateAdmin = createAsyncThunk(
"updateAdmin",
async (
{ id, name, role }: { id: any; name: string; role: string },
{ rejectWithValue }
) => {
async ({ id, ...userData }: User, { rejectWithValue }) => {
try {
const response = await http.put(`auth/${id}/update-admin`, {
name,
role,
});
const response = await http.put(
`auth/${id}/update-admin`,
userData
);
toast.success("Admin updated successfully");
return response?.data;
} catch (error: any) {
toast.error("Error updating the user" + error);
toast.error("Error updating the user: " + error);
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
@ -116,13 +133,10 @@ const adminSlice = createSlice({
state.admins = action.payload;
}
)
.addCase(
adminList.rejected,
(state) => {
state.isLoading = false;
// state.error = action.payload || "An error occurred";
}
)
.addCase(adminList.rejected, (state) => {
state.isLoading = false;
// state.error = action.payload || "An error occurred";
})
.addCase(deleteAdmin.pending, (state) => {
state.isLoading = true;
})
@ -147,7 +161,24 @@ const adminSlice = createSlice({
})
.addCase(updateAdmin.rejected, (state) => {
state.isLoading = false;
});
})
.addCase(createAdmin.pending, (state) => {
state.isLoading = true;
// state.error = null;
})
.addCase(
createAdmin.fulfilled,
(state, action: PayloadAction<User>) => {
state.isLoading = false;
state.admins.push(action.payload);
}
)
.addCase(
createAdmin.rejected,
(state, action: PayloadAction<string | undefined>) => {
state.isLoading = false;
}
);
},
});

19
src/router.tsx
View file

@ -64,15 +64,6 @@ export default function AppRouter() {
/>
<Route path="login" element={<Login />} />
<Route path="signup" element={<SignUp />} />
<Route
path="profile"
element={
<ProtectedRoute
caps={[]}
component={<ProfilePage />}
/>
}
/>
</Route>
{/* Dashboard Routes */}
@ -108,6 +99,16 @@ export default function AppRouter() {
/>
}
/>
<Route
path="profile"
element={
<ProtectedRoute
caps={[]}
component={<ProfilePage />}
/>
}
/>
<Route path="*" element={<>404</>} />
</Route>