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

dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
pull from: dev-jaanvi
merge into: jaanvi:main
Conversation 1 Commits 155 Files changed 39 +32580 -19712
32 changed files with 32580 additions and 19712 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6033948759 - Show all commits

37836
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

153
package.json
View file

@ -1,77 +1,78 @@
{ {
"name": "digi-ev-admin-dashboard", "name": "digi-ev-admin-dashboard",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.3.0", "@mui/icons-material": "^6.3.0",
"@mui/material": "^6.4.4", "@mui/material": "^6.4.4",
"@mui/x-charts": "^7.23.2", "@mui/x-charts": "^7.23.2",
"@mui/x-data-grid": "^7.23.5", "@mui/x-data-grid": "^7.23.5",
"@mui/x-date-pickers": "^7.23.3", "@mui/x-date-pickers": "^7.27.0",
"@mui/x-tree-view": "^7.23.2", "@mui/x-tree-view": "^7.23.2",
"@react-spring/web": "^9.7.5", "@react-spring/web": "^9.7.5",
"@reduxjs/toolkit": "^2.5.0", "@reduxjs/toolkit": "^2.5.0",
"@types/babel__core": "^7.20.5", "@types/babel__core": "^7.20.5",
"AdapterDayjs": "file:@mui/x-date-pickers/AdapterDayjs", "AdapterDayjs": "file:@mui/x-date-pickers/AdapterDayjs",
"add": "^2.0.6", "AppBar": "file:@mui/material/AppBar",
"AppBar": "file:@mui/material/AppBar", "Box": "file:@mui/material/Box",
"axios": "^1.7.9", "PieChart": "file:@mui/x-charts/PieChart",
"Box": "file:@mui/material/Box", "RichTreeView": "file:@mui/x-tree-view/RichTreeView",
"clsx": "^2.1.1", "Stack": "file:@mui/material/Stack",
"cra-template-typescript": "1.2.0", "Tabs": "file:@mui/material/Tabs",
"dayjs": "^1.11.13", "Toolbar": "file:@mui/material/Toolbar",
"hooks": "file:@mui/x-charts/hooks", "Typography": "file:@mui/material/Typography",
"mui-phone-number": "^3.0.3", "add": "^2.0.6",
"mui-tel-input": "^7.0.0", "axios": "^1.7.9",
"PieChart": "file:@mui/x-charts/PieChart", "clsx": "^2.1.1",
"prop-types": "^15.8.1", "cra-template-typescript": "1.2.0",
"react": "^18.0.0", "dayjs": "^1.11.13",
"react-cookie": "^7.2.2", "highcharts": "^12.1.2",
"react-dom": "^18.0.0", "hooks": "file:@mui/x-charts/hooks",
"react-dropzone": "^14.3.5", "mui-phone-number": "^3.0.3",
"react-hook-form": "^7.54.2", "mui-tel-input": "^7.0.0",
"react-redux": "^9.2.0", "prop-types": "^15.8.1",
"react-router-dom": "^7.1.1", "react": "^18.0.0",
"react-scripts": "5.0.1", "react-cookie": "^7.2.2",
"RichTreeView": "file:@mui/x-tree-view/RichTreeView", "react-dom": "^18.0.0",
"sonner": "^1.7.4", "react-dropzone": "^14.3.5",
"Stack": "file:@mui/material/Stack", "react-hook-form": "^7.54.2",
"styles": "file:@mui/material/styles", "react-redux": "^9.2.0",
"Tabs": "file:@mui/material/Tabs", "react-router-dom": "^7.1.1",
"Toolbar": "file:@mui/material/Toolbar", "react-scripts": "5.0.1",
"Typography": "file:@mui/material/Typography", "sonner": "^1.7.4",
"web-vitals": "^4.2.4" "styles": "file:@mui/material/styles",
}, "web-vitals": "^4.2.4"
"scripts": { },
"start": "react-scripts start", "scripts": {
"build": "react-scripts build", "start": "react-scripts start",
"test": "react-scripts test", "build": "react-scripts build",
"eject": "react-scripts eject" "test": "react-scripts test",
}, "eject": "react-scripts eject"
"eslintConfig": { },
"extends": [ "eslintConfig": {
"react-app", "extends": [
"react-app/jest" "react-app",
] "react-app/jest"
}, ]
"browserslist": { },
"production": [ "browserslist": {
">0.2%", "production": [
"not dead", ">0.2%",
"not op_mini all" "not dead",
], "not op_mini all"
"development": [ ],
"last 1 chrome version", "development": [
"last 1 firefox version", "last 1 chrome version",
"last 1 safari version" "last 1 firefox version",
] "last 1 safari version"
}, ]
"devDependencies": { },
"@types/node": "^22.10.5", "devDependencies": {
"@types/react": "^19.0.4", "@types/node": "^22.10.5",
"@types/react-dom": "^19.0.2", "@types/react": "^19.0.4",
"typescript": "^5.7.3" "@types/react-dom": "^19.0.2",
} "typescript": "^5.7.3"
} }
}

11827
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

16
src/App.tsx
View file

@ -1,12 +1,12 @@
import { BrowserRouter as Router} from 'react-router-dom'; import { BrowserRouter as Router } from "react-router-dom";
import AppRouter from './router'; import AppRouter from "./router";
function App() { function App() {
return ( return (
<Router> <Router>
<AppRouter /> <AppRouter />
</Router> </Router>
); );
} }
export default App; export default App;

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;

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

@ -1,5 +1,6 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { import {
Box,
Button, Button,
Dialog, Dialog,
DialogActions, DialogActions,
@ -7,26 +8,37 @@ import {
DialogTitle, DialogTitle,
TextField, TextField,
} from "@mui/material"; } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
//By Jaanvi : Edit Model :: 11-feb-25
interface AddEditCategoryModalProps { interface AddEditCategoryModalProps {
open: boolean; open: boolean;
handleClose: () => void; 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; editRow: any;
} }
interface FormData { interface FormData {
category: string;
role: string;
name: string; name: string;
email: string;
phone: string;
registeredAddress: string;
} }
const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
open, open,
handleClose, handleClose,
editRow, handleCreate,
handleUpdate, handleUpdate,
editRow,
}) => { }) => {
const { const {
control, control,
@ -36,15 +48,24 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
reset, reset,
} = useForm<FormData>({ } = useForm<FormData>({
defaultValues: { defaultValues: {
category: "",
name: "", name: "",
role: "", email: "",
phone: "",
registeredAddress: "",
}, },
}); });
const onSubmit = (data: FormData) => { const onSubmit = (data: FormData) => {
if (editRow) { if (editRow) {
handleUpdate(editRow.id, data.name, data.role); handleUpdate(
editRow.id,
data.name,
data.email,
data.phone,
data.registeredAddress
);
} else {
handleCreate(data);
} }
handleClose(); handleClose();
reset(); reset();
@ -52,74 +73,166 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
useEffect(() => { useEffect(() => {
if (editRow) { if (editRow) {
setValue("category", editRow.name);
setValue("name", editRow.name); setValue("name", editRow.name);
setValue("role", editRow.role); setValue("email", editRow.email);
setValue("phone", editRow.phone);
setValue("registeredAddress", editRow.registeredAddress);
} else { } else {
reset(); reset();
} }
}, [editRow, setValue, reset]); }, [editRow, setValue, reset]);
return ( return (
<> <Dialog
<Dialog open={open}
open={open} onClose={handleClose}
onClose={handleClose} maxWidth="md"
maxWidth="md" fullWidth
fullWidth PaperProps={{
PaperProps={{ component: "form",
component: "form", onSubmit: handleSubmit(onSubmit),
onSubmit: handleSubmit(onSubmit), }}
>
<DialogTitle
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}} }}
> >
<DialogTitle>{editRow ? "Edit" : "Add"} Category</DialogTitle> {editRow ? "Edit Admin" : "Add Admin"}
<DialogContent> <Box
<Controller onClick={handleClose}
name="name" sx={{
control={control} cursor: "pointer",
rules={{ display: "flex",
required: "Admin Name is required", alignItems: "center",
}} }}
render={({ field }) => ( >
<TextField <CloseIcon />
{...field} </Box>
autoFocus </DialogTitle>
required
margin="dense"
label="Admin Name"
type="text"
fullWidth
variant="standard"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
<Controller <DialogContent>
name="role" <Controller
control={control} name="name"
render={({ field }) => ( control={control}
<TextField rules={{
{...field} required: "Admin Name is required",
margin="dense" minLength: {
label="Role" 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 <Controller
variant="standard" name="email"
error={!!errors.role} control={control}
helperText={errors.role?.message} rules={{
disabled required: "Email is required",
/> pattern: {
)} value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
/> message: "Invalid email address",
</DialogContent> },
<DialogActions> }}
<Button onClick={handleClose}>Cancel</Button> render={({ field }) => (
<Button type="submit">Save</Button> <TextField
</DialogActions> {...field}
</Dialog> 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",
maxLength: {
value: 100,
message: "Address cannot exceed 100 characters",
},
}}
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>
); );
}; };

195
src/components/AppNavbar/index.tsx
View file

@ -1,105 +1,112 @@
import * as React from 'react'; import * as React from "react";
import { styled } from '@mui/material/styles'; import { styled } from "@mui/material/styles";
import AppBar from '@mui/material/AppBar'; import AppBar from "@mui/material/AppBar";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import Stack from '@mui/material/Stack'; import Stack from "@mui/material/Stack";
import MuiToolbar from '@mui/material/Toolbar'; import MuiToolbar from "@mui/material/Toolbar";
import { tabsClasses } from '@mui/material/Tabs'; import { tabsClasses } from "@mui/material/Tabs";
import Typography from '@mui/material/Typography'; import Typography from "@mui/material/Typography";
import MenuRoundedIcon from '@mui/icons-material/MenuRounded'; import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded'; import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded";
import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown'; import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
import MenuButton from '../MenuButton'; import MenuButton from "../MenuButton";
import SideMenuMobile from '../SideMenuMobile'; import SideMenuMobile from "../SideMenuMobile";
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
const Toolbar = styled(MuiToolbar)({ const Toolbar = styled(MuiToolbar)({
width: '100%', width: "100%",
padding: '12px', padding: "12px",
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
alignItems: 'start', alignItems: "start",
justifyContent: 'center', justifyContent: "center",
gap: '12px', gap: "12px",
flexShrink: 0, flexShrink: 0,
[`& ${tabsClasses.flexContainer}`]: { [`& ${tabsClasses.flexContainer}`]: {
gap: '8px', gap: "8px",
p: '8px', p: "8px",
pb: 0, pb: 0,
}, },
}); });
export default function AppNavbar() { export default function AppNavbar() {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const toggleDrawer = (newOpen: boolean) => () => { const toggleDrawer = (newOpen: boolean) => () => {
setOpen(newOpen); setOpen(newOpen);
}; };
return ( return (
<AppBar <AppBar
position="fixed" position="fixed"
sx={{ sx={{
display: { xs: 'auto', md: 'none' }, display: { xs: "auto", md: "none" },
boxShadow: 0, boxShadow: 0,
bgcolor: 'background.paper', bgcolor: "background.paper",
backgroundImage: 'none', backgroundImage: "none",
borderBottom: '1px solid', borderBottom: "1px solid",
borderColor: 'divider', borderColor: "divider",
top: 'var(--template-frame-height, 0px)', top: "var(--template-frame-height, 0px)",
}} }}
> >
<Toolbar variant="regular"> <Toolbar variant="regular">
<Stack <Stack
direction="row" direction="row"
sx={{ sx={{
alignItems: 'center', alignItems: "center",
flexGrow: 1, flexGrow: 1,
width: '100%', width: "100%",
gap: 1, gap: 1,
}} }}
> >
<Stack <Stack
direction="row" direction="row"
spacing={1} spacing={1}
sx={{ justifyContent: 'center', mr: 'auto' }} sx={{ justifyContent: "center", mr: "auto" }}
> >
<CustomIcon /> <CustomIcon />
<Typography variant="h4" component="h1" sx={{ color: 'text.primary' }}> <Typography
Dashboard variant="h4"
</Typography> component="h1"
</Stack> sx={{ color: "text.primary" }}
<ColorModeIconDropdown /> >
<MenuButton aria-label="menu" onClick={toggleDrawer(true)}> Dashboard
<MenuRoundedIcon /> </Typography>
</MenuButton> </Stack>
<SideMenuMobile open={open} toggleDrawer={toggleDrawer} /> <ColorModeIconDropdown />
</Stack> <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
</Toolbar> <MenuRoundedIcon />
</AppBar> </MenuButton>
);
<SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
</Stack>
</Toolbar>
</AppBar>
);
} }
export function CustomIcon() { export function CustomIcon() {
return ( return (
<Box <Box
sx={{ sx={{
width: '1.5rem', width: "1.5rem",
height: '1.5rem', height: "1.5rem",
bgcolor: 'black', bgcolor: "black",
borderRadius: '999px', borderRadius: "999px",
display: 'flex', display: "flex",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
alignSelf: 'center', alignSelf: "center",
backgroundImage: backgroundImage:
'linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)', "linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)",
color: 'hsla(210, 100%, 95%, 0.9)', color: "hsla(210, 100%, 95%, 0.9)",
border: '1px solid', border: "1px solid",
borderColor: 'hsl(210, 100%, 55%)', borderColor: "hsl(210, 100%, 55%)",
boxShadow: 'inset 0 2px 5px rgba(255, 255, 255, 0.3)', boxShadow: "inset 0 2px 5px rgba(255, 255, 255, 0.3)",
}} }}
> >
<DashboardRoundedIcon color="inherit" sx={{ fontSize: '1rem' }} /> <DashboardRoundedIcon color="inherit" sx={{ fontSize: "1rem" }} />
</Box> </Box>
); );
} }

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

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

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

@ -1,225 +1,263 @@
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";
import TableBody from "@mui/material/TableBody" import TableBody from "@mui/material/TableBody";
import TableCell, { tableCellClasses } from "@mui/material/TableCell" import TableCell, { tableCellClasses } from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer" import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead" import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow" import TableRow from "@mui/material/TableRow";
import Paper, { paperClasses } from "@mui/material/Paper" import Paper, { paperClasses } from "@mui/material/Paper";
import { deleteAdmin } from "../../redux/slices/adminSlice" import { adminList, deleteAdmin } from "../../redux/slices/adminSlice";
import { useDispatch } from "react-redux" import { useDispatch } from "react-redux";
import { import {
Box, Box,
Button, Button,
dividerClasses, dividerClasses,
IconButton, IconButton,
listClasses, listClasses,
Menu, Menu,
} from "@mui/material" } from "@mui/material";
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded" import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
import DeleteModal from "../Modals/DeleteModal/DeleteModal" import DeleteModal from "../Modals/DeleteModal";
import { AppDispatch } from "../../redux/store/store" import { AppDispatch } from "../../redux/store/store";
import ViewModal from "../Modals/ViewModal";
// 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: " #1565c0",
color: theme.palette.common.white, color: theme.palette.common.white,
}, },
[`&.${tableCellClasses.body}`]: { [`&.${tableCellClasses.body}`]: {
fontSize: 14, fontSize: 14,
}, },
})) }));
const StyledTableRow = styled(TableRow)(({ theme }) => ({ 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": { "&:last-child td, &:last-child th": {
border: 0, border: 0,
}, },
})) }));
export interface Column { export interface Column {
id: string id: string;
label: string label: string;
align?: "left" | "center" | "right" align?: "left" | "center" | "right";
} }
interface Row { interface Row {
[key: string]: any [key: string]: any;
} }
interface CustomTableProps { interface CustomTableProps {
columns: Column[] columns: Column[];
rows: Row[] rows: Row[];
setDeleteModal: Function setDeleteModal: Function;
setRowData: Function setRowData: Function;
setModalOpen: Function setModalOpen: Function;
deleteModal: boolean viewModal: boolean;
setViewModal: Function;
deleteModal: boolean;
} }
const CustomTable: React.FC<CustomTableProps> = ({ const CustomTable: React.FC<CustomTableProps> = ({
columns, columns,
rows, rows,
setDeleteModal, setDeleteModal,
deleteModal, deleteModal,
setRowData, viewModal,
setModalOpen, setRowData,
setViewModal,
setModalOpen,
}) => { }) => {
// console.log("columnsss", columns, rows) // console.log("columnsss", columns, rows)
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 open = Boolean(anchorEl)
const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => { const open = Boolean(anchorEl);
setAnchorEl(event.currentTarget)
setSelectedRow(row) // Ensure the row data is set
}
const handleClose = () => { const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
setAnchorEl(null) setAnchorEl(event.currentTarget);
} setSelectedRow(row); // Ensure the row data is set
};
const isImage = (value: any) => { const handleClose = () => {
if (typeof value === "string") { setAnchorEl(null);
return value.startsWith("http") || value.startsWith("data:image") // Check for URL or base64 image };
}
return false
}
const handleDeleteButton = (id: string | undefined) => { const isImage = (value: any) => {
if (!id) console.error("ID not found", id) if (typeof value === "string") {
return value.startsWith("http") || value.startsWith("data:image"); // Check for URL or base64 image
}
return false;
};
dispatch(deleteAdmin(id || "")) const handleDeleteButton = (id: string | undefined) => {
setDeleteModal(false) // Close the modal only after deletion if (!id) console.error("ID not found", id);
handleClose()
}
return ( dispatch(deleteAdmin(id || ""));
<TableContainer component={Paper}> setDeleteModal(false); // Close the modal only after deletion
<Table sx={{ minWidth: 700 }} aria-label="customized table"> handleClose();
<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>
<Button const handleViewButton = (id: string | undefined) => {
variant="text" if (!id) console.error("ID not found", id);
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 dispatch(adminList());
setViewModal(false);
};
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;

93
src/components/Header/index.tsx
View file

@ -1,36 +1,63 @@
import * as React from 'react'; import * as React from "react";
import Stack from '@mui/material/Stack'; import Stack from "@mui/material/Stack";
import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded'; import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
import CustomDatePicker from '../CustomDatePicker'; import CustomDatePicker from "../CustomDatePicker";
import NavbarBreadcrumbs from '../NavbarBreadcrumbs'; import NavbarBreadcrumbs from "../NavbarBreadcrumbs";
import MenuButton from '../MenuButton'; import MenuButton from "../MenuButton";
import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown'; import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
import Box from "@mui/material/Box";
import Search from '../Search'; import Typography from "@mui/material/Typography";
import Search from "../Search";
export default function Header() { export default function Header() {
return ( const [showNotifications, setShowNotifications] = React.useState(false);
<Stack const toggleNotifications = () => {
direction="row" setShowNotifications((prev) => !prev);
sx={{ };
display: { xs: 'none', md: 'flex' }, return (
width: '100%', <Stack
alignItems: { xs: 'flex-start', md: 'center' }, direction="row"
justifyContent: 'space-between', sx={{
maxWidth: { sm: '100%', md: '1700px' }, display: { xs: "none", md: "flex" },
pt: 1.5, width: "100%",
}} alignItems: { xs: "flex-start", md: "center" },
spacing={2} justifyContent: "space-between",
> maxWidth: { sm: "100%", md: "1700px" },
<NavbarBreadcrumbs /> pt: 1.5,
<Stack direction="row" sx={{ gap: 1 }}> }}
<Search /> spacing={2}
<CustomDatePicker /> >
<MenuButton showBadge aria-label="Open notifications"> <NavbarBreadcrumbs />
<NotificationsRoundedIcon /> <Stack direction="row" sx={{ gap: 1 }}>
</MenuButton> <Search />
<ColorModeIconDropdown /> <CustomDatePicker />
</Stack> <MenuButton
</Stack> showBadge
); aria-label="Open notifications"
onClick={toggleNotifications}
>
<NotificationsRoundedIcon />
</MenuButton>
<ColorModeIconDropdown />
</Stack>
{showNotifications && (
<Box
sx={{
p: 2,
position: "absolute",
top: "55px", // Adjust this value according to your AppBar height
right: "66px",
bgcolor: "lightblue",
boxShadow: 1,
borderRadius: 1,
zIndex: 1300,
}}
>
<Typography variant="body2" color="text.secondary">
No notifications yet
</Typography>
</Box>
)}
</Stack>
);
} }

35
src/components/LogOut/logOutfunc.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/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;

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 /> <PageViewsBarChart />
</Grid> </Grid>
</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> </Box>
); );
} }

32
src/components/MenuButton/index.tsx
View file

@ -1,23 +1,23 @@
import * as React from 'react'; import * as React from "react";
import Badge, { badgeClasses } from '@mui/material/Badge'; import Badge, { badgeClasses } from "@mui/material/Badge";
import IconButton, { IconButtonProps } from '@mui/material/IconButton'; import IconButton, { IconButtonProps } from "@mui/material/IconButton";
export interface MenuButtonProps extends IconButtonProps { export interface MenuButtonProps extends IconButtonProps {
showBadge?: boolean; showBadge?: boolean;
} }
export default function MenuButton({ export default function MenuButton({
showBadge = false, showBadge = false,
...props ...props
}: MenuButtonProps) { }: MenuButtonProps) {
return ( return (
<Badge <Badge
color="error" color="error"
variant="dot" variant="dot"
invisible={!showBadge} invisible={!showBadge}
sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }} sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }}
> >
<IconButton size="small" {...props} /> <IconButton size="small" {...props} />
</Badge> </Badge>
); );
} }

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 ListItemText from "@mui/material/ListItemText";
import Stack from "@mui/material/Stack"; import Stack from "@mui/material/Stack";
import HomeRoundedIcon from "@mui/icons-material/HomeRounded"; 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 FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import { Link, useLocation } from "react-router-dom"; import { Link, useLocation } from "react-router-dom";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
@ -17,11 +17,11 @@ const baseMenuItems = [
icon: <HomeRoundedIcon />, icon: <HomeRoundedIcon />,
url: "/panel/dashboard", url: "/panel/dashboard",
}, },
{ // {
text: "Vehicles", // text: "Vehicles",
icon: <AnalyticsRoundedIcon />, // icon: <AnalyticsRoundedIcon />,
url: "/panel/vehicles", // url: "/panel/vehicles",
}, // },
//created by Eknnor and Jaanvi //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 = { type Props = {
open: boolean open: boolean;
setDeleteModal: Function setLogoutModal: Function;
handleDelete: (id: string | undefined) => void handlelogout: any;
id?: string | undefined };
}
const style = { const style = {
position: "absolute", position: "absolute",
top: "50%", top: "50%",
@ -17,18 +17,15 @@ const style = {
borderRadius: 1.5, borderRadius: 1.5,
boxShadow: 24, boxShadow: 24,
p: 3, p: 3,
} };
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" } const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" };
export default function DeleteModal({ export default function LogoutModal({
open, open,
setDeleteModal, setLogoutModal,
handleDelete, handlelogout,
id,
}: Props) { }: Props) {
// console.log("DeleteModal opened with ID:", id)
return ( return (
<Modal <Modal
open={open} open={open}
@ -36,20 +33,20 @@ export default function DeleteModal({
aria-describedby="modal-modal-description" aria-describedby="modal-modal-description"
> >
<Box sx={style}> <Box sx={style}>
<Typography <Typography id="modal-title" variant="h5" fontWeight="bold" sx={{ width: "100%" }}>
id="modal-modal-title" <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
variant="h6" <Box sx={{ flex: 1, textAlign: "center" }}>Logout</Box>
component="h2" <Box onClick={() => setLogoutModal(false)} sx={{ cursor: "pointer", display: "flex", alignItems: "center" }}>
align="center" <CloseIcon />
> </Box>
Delete Record </Box>
</Typography> </Typography>
<Typography <Typography
id="modal-modal-description" id="modal-modal-description"
sx={{ mt: 2 }} sx={{ mt: 2 }}
align="center" align="center"
> >
Are you sure you want to delete this record? Are you sure you want to Logout?
</Typography> </Typography>
<Box <Box
sx={{ sx={{
@ -64,7 +61,7 @@ export default function DeleteModal({
color="error" color="error"
type="button" type="button"
sx={btnStyle} sx={btnStyle}
onClick={() => setDeleteModal(false)} onClick={() => setLogoutModal(false)}
> >
Cancel Cancel
</Button> </Button>
@ -73,12 +70,12 @@ export default function DeleteModal({
type="button" type="button"
color="primary" color="primary"
sx={btnStyle} sx={btnStyle}
onClick={() => handleDelete(id || "")} onClick={() => handlelogout()}
> >
Delete Logout
</Button> </Button>
</Box> </Box>
</Box> </Box>
</Modal> </Modal>
) );
} }

80
src/components/Modals/LogoutModal/LogoutModal.tsx Normal file
View file

@ -0,0 +1,80 @@
import { Box, Button, Modal, Typography } from "@mui/material";
type Props = {
open: boolean;
setLogoutModal: Function;
handlelogout: any;
};
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 LogoutModal({
open,
setLogoutModal,
handlelogout,
}: Props) {
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"
>
Logout
</Typography>
<Typography
id="modal-modal-description"
sx={{ mt: 2 }}
align="center"
>
Are you sure you want to Logout?
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
mt: 4,
gap: 2,
}}
>
<Button
variant="contained"
color="error"
type="button"
sx={btnStyle}
onClick={() => setLogoutModal(false)}
>
Cancel
</Button>
<Button
variant="contained"
type="button"
color="primary"
sx={btnStyle}
onClick={() => handlelogout()}
>
Logout
</Button>
</Box>
</Box>
</Modal>
);
}

82
src/components/Modals/ViewModal/ViewModal.tsx Normal file
View file

@ -0,0 +1,82 @@
import { Box, Button, Modal, Typography } from "@mui/material";
import { AppDispatch, RootState } from "../../../redux/store/store";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
type Props = {
open: boolean;
setViewModal: Function;
handleView: (id: string | undefined) => void;
id?: string | undefined;
};
;
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 330,
bgcolor: "background.paper",
borderRadius: 1.5,
boxShadow: 24,
p: 3,
};
const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize", alignItems: "center" };
export default function ViewModal({
open,
setViewModal,
id, // Selected user's ID
}: Props) {
const { admins } = useSelector((state: RootState) => state.adminReducer);
const [selectedAdmin, setSelectedAdmin] = useState<any>(null);
useEffect(() => {
if (id) {
const admin = admins.find((admin) => admin.id === id);
setSelectedAdmin(admin || null);
}
}, [id, admins]);
return (
<Modal
open={open}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Typography
id="modal-modal-title"
variant="h6"
component="h2"
align="center"
>
Details of {selectedAdmin?.name}
</Typography>
{selectedAdmin ? (
<>
<Typography align="center">Name: {selectedAdmin?.name}</Typography>
<Typography align="center">Email: {selectedAdmin?.email}</Typography>
<Typography align="center">Phone: {selectedAdmin?.phone}</Typography>
<Typography align="center">Address: {selectedAdmin?.registeredAddress}</Typography>
</>
) : (
<Typography align="center">No admin found with this ID</Typography>
)}
<Box sx={{ display: "flex", justifyContent: "space-between", mt: 4, gap: 2 }}>
<Button
variant="contained"
color="error"
type="button"
sx={btnStyle}
onClick={() => setViewModal(false)}
>
Close
</Button>
</Box>
</Box>
</Modal>
);
}

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

@ -0,0 +1,126 @@
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: "80%",
textAlign: "left",
display: "flex",
flexDirection: "column",
gap: 1.5,
whiteSpace: "pre-wrap", // the text wraps properly
wordBreak: "break-word",
overflowWrap: "break-word",
}}
>
<Typography variant="body1">
<b>Name:</b> {selectedAdmin.name}
</Typography>
<Typography variant="body1">
<strong>Email:</strong> {selectedAdmin.email}
</Typography>
<Typography variant="body1">
<strong>Phone:</strong> {selectedAdmin.phone}
</Typography>
<Typography variant="body1">
<strong>Address:</strong>{" "}
{selectedAdmin.registeredAddress ?? "N/A"}
</Typography>
</Box>
) : (
<Typography align="center">
No admin found with this ID
</Typography>
)}
{/* <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 MenuButton from "../MenuButton";
import { Avatar } from "@mui/material"; import { Avatar } from "@mui/material";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { toast } from "sonner"; import Logout from "../LogOutFunction/LogOutFunction";
const MenuItem = styled(MuiMenuItem)({ const MenuItem = styled(MuiMenuItem)({
margin: "2px 0", margin: "2px 0",
}); });
export default function OptionsMenu({ avatar }: { avatar?: boolean }) { export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl); const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
const handleClick = (event: React.MouseEvent<HTMLElement>) => { const open = Boolean(anchorEl);
setAnchorEl(event?.currentTarget); const handleClick = (event: React.MouseEvent<HTMLElement>) => {
}; setAnchorEl(event?.currentTarget);
const handleClose = () => { };
setAnchorEl(null); const handleClose = () => {
}; setAnchorEl(null);
//Eknoor singh and jaanvi };
//date:- 12-Feb-2025 //Eknoor singh and jaanvi
//Made a navigation page for the profile page //date:- 12-Feb-2025
const navigate = useNavigate(); //Made a navigation page for the profile page
const handleProfile = () => { const navigate = useNavigate();
navigate("/auth/profile"); const handleProfile = () => {
}; navigate("/panel/profile");
};
//Eknoor singh and jaanvi
//date:- 13-Feb-2025 //jaanvi
//Implemented logout functionality which was static previously //date:- 13-Feb-2025
const handlelogout = () => {
localStorage.clear(); return (
navigate("/auth/login"); <React.Fragment>
toast.success("Logged out successfully"); <MenuButton
}; aria-label="Open menu"
return ( onClick={handleClick}
<React.Fragment> sx={{ borderColor: "transparent" }}
<MenuButton >
aria-label="Open menu" {avatar ? (
onClick={handleClick} <MoreVertRoundedIcon />
sx={{ borderColor: "transparent" }} ) : (
> <Avatar
{avatar ? ( sizes="small"
<MoreVertRoundedIcon /> alt="Riley Carter"
) : ( src="/static/images/avatar/7.jpg"
<Avatar sx={{ width: 36, height: 36 }}
sizes="small" />
alt="Riley Carter" )}
src="/static/images/avatar/7.jpg" </MenuButton>
sx={{ width: 36, height: 36 }} <Menu
/> anchorEl={anchorEl}
)} id="menu"
</MenuButton> open={open}
<Menu onClose={handleClose}
anchorEl={anchorEl} onClick={handleClose}
id="menu" transformOrigin={{ horizontal: "right", vertical: "top" }}
open={open} anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
onClose={handleClose} sx={{
onClick={handleClose} [`& .${listClasses.root}`]: {
transformOrigin={{ horizontal: "right", vertical: "top" }} padding: "4px",
anchorOrigin={{ horizontal: "right", vertical: "bottom" }} },
sx={{ [`& .${paperClasses.root}`]: {
[`& .${listClasses.root}`]: { padding: 0,
padding: "4px", },
}, [`& .${dividerClasses.root}`]: {
[`& .${paperClasses.root}`]: { margin: "4px -4px",
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={handleProfile}>Profile</MenuItem> <MenuItem onClick={handleClose}>Settings</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem> <Divider />
<Divider /> <MenuItem
<MenuItem onClick={handleClose}>Add another account</MenuItem> onClick={handleClose}
<MenuItem onClick={handleClose}>Settings</MenuItem> sx={{
<Divider /> [`& .${listItemIconClasses.root}`]: {
<MenuItem ml: "auto",
onClick={handleClose} minWidth: 0,
sx={{ },
[`& .${listItemIconClasses.root}`]: { }}
ml: "auto", >
minWidth: 0, {/* //Eknoor singh and jaanvi
}, //date:- 13-Feb-2025
}} //Implemented logout functionality which was static previously */}
>
{/* //Eknoor singh and jaanvi <ListItemText
//date:- 13-Feb-2025 onClick={(e) => {
//Implemented logout functionality which was static previously */} e.stopPropagation();
<ListItemText setLogoutModal(true);
className="toast-button" }}
onClick={handlelogout} >
> Logout
Logout </ListItemText>
</ListItemText> <Logout
<ListItemIcon> setLogoutModal={setLogoutModal}
<LogoutRoundedIcon fontSize="small" /> logoutModal={logoutModal}
</ListItemIcon> />
</MenuItem>
</Menu> <ListItemIcon>
</React.Fragment> <LogoutRoundedIcon fontSize="small" />
); </ListItemIcon>
</MenuItem>
</Menu>
</React.Fragment>
);
} }

141
src/components/SideMenuMobile/index.tsx
View file

@ -1,73 +1,80 @@
import * as React from 'react'; import * as React from "react";
import Avatar from '@mui/material/Avatar'; import Avatar from "@mui/material/Avatar";
import Button from '@mui/material/Button'; import Button from "@mui/material/Button";
import Divider from '@mui/material/Divider'; import Divider from "@mui/material/Divider";
import Drawer, { drawerClasses } from '@mui/material/Drawer'; import Drawer, { drawerClasses } from "@mui/material/Drawer";
import Stack from '@mui/material/Stack'; import Stack from "@mui/material/Stack";
import Typography from '@mui/material/Typography'; import Typography from "@mui/material/Typography";
import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded'; import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded'; import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
import MenuButton from '../MenuButton'; import MenuButton from "../MenuButton";
import MenuContent from '../MenuContent'; import MenuContent from "../MenuContent";
import CardAlert from '../CardAlert/CardAlert'; import CardAlert from "../CardAlert/CardAlert";
interface SideMenuMobileProps { interface SideMenuMobileProps {
open: boolean | undefined; open: boolean | undefined;
toggleDrawer: (newOpen: boolean) => () => void; toggleDrawer: (newOpen: boolean) => () => void;
} }
export default function SideMenuMobile({ open, toggleDrawer }: SideMenuMobileProps) { export default function SideMenuMobile({
return ( open,
<Drawer toggleDrawer,
anchor="right" }: SideMenuMobileProps) {
open={open} return (
onClose={toggleDrawer(false)} <Drawer
sx={{ anchor="right"
zIndex: (theme) => theme.zIndex.drawer + 1, open={open}
[`& .${drawerClasses.paper}`]: { onClose={toggleDrawer(false)}
backgroundImage: 'none', sx={{
backgroundColor: 'background.paper', zIndex: (theme) => theme.zIndex.drawer + 1,
}, [`& .${drawerClasses.paper}`]: {
}} backgroundImage: "none",
> backgroundColor: "background.paper",
<Stack },
sx={{ }}
maxWidth: '70dvw', >
height: '100%', <Stack
}} sx={{
> maxWidth: "70dvw",
<Stack direction="row" sx={{ p: 2, pb: 0, gap: 1 }}> height: "100%",
<Stack }}
direction="row" >
sx={{ gap: 1, alignItems: 'center', flexGrow: 1, p: 1 }} <Stack direction="row" sx={{ p: 2, pb: 0, gap: 1 }}>
> <Stack
<Avatar direction="row"
sizes="small" sx={{ gap: 1, alignItems: "center", flexGrow: 1, p: 1 }}
alt="Riley Carter" >
src="/static/images/avatar/7.jpg" <Avatar
sx={{ width: 24, height: 24 }} sizes="small"
/> alt="Riley Carter"
<Typography component="p" variant="h6"> src="/static/images/avatar/7.jpg"
Riley Carter sx={{ width: 24, height: 24 }}
</Typography> />
</Stack> <Typography component="p" variant="h6">
<MenuButton showBadge> Riley Carter
<NotificationsRoundedIcon /> </Typography>
</MenuButton> </Stack>
</Stack> <MenuButton showBadge>
<Divider /> <NotificationsRoundedIcon />
<Stack sx={{ flexGrow: 1 }}> </MenuButton>
<MenuContent /> </Stack>
<Divider /> <Divider />
</Stack> <Stack sx={{ flexGrow: 1 }}>
<CardAlert /> <MenuContent />
<Stack sx={{ p: 2 }}> <Divider />
<Button variant="outlined" fullWidth startIcon={<LogoutRoundedIcon />}> </Stack>
Logout <CardAlert />
</Button> <Stack sx={{ p: 2 }}>
</Stack> <Button
</Stack> variant="outlined"
</Drawer> fullWidth
); startIcon={<LogoutRoundedIcon />}
>
Logout
</Button>
</Stack>
</Stack>
</Drawer>
);
} }

2
src/index.tsx
View file

@ -7,7 +7,7 @@ import { Provider } from "react-redux";
import store from "./redux/store/store.ts"; import store from "./redux/store/store.ts";
import { Toaster } from "sonner"; import { Toaster } from "sonner";
const root = ReactDOM.createRoot(document.getElementById("root")!); const root = ReactDOM.createRoot(document.getElementById("root"));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<Provider store={store}> <Provider store={store}>

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

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

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

@ -4,39 +4,73 @@ 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 { adminList, updateAdmin } from "../../redux/slices/adminSlice"; import {
import { AppDispatch, RootState } from "../../redux/store/store"; // Import RootState for selector adminList,
updateAdmin,
createAdmin,
} from "../../redux/slices/adminSlice";
import { AppDispatch, RootState } from "../../redux/store/store";
export default function AdminList() { export default function AdminList() {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const { reset } = useForm(); const { reset } = useForm();
const [deleteModal, setDeleteModal] = React.useState<boolean>(false); const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
const [viewModal, setViewModal] = React.useState<boolean>(false);
const [rowData, setRowData] = React.useState<any | null>(null); 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(() => { useEffect(() => {
dispatch(adminList()); dispatch(adminList());
}, [dispatch]); }, [dispatch]);
const handleClickOpen = () => { const handleClickOpen = () => {
setRowData(null); // Reset row data when opening for new admin
setModalOpen(true); setModalOpen(true);
}; };
const handleCloseModal = () => { const handleCloseModal = () => {
setModalOpen(false); setModalOpen(false);
setRowData(null);
reset(); reset();
}; };
const handleUpdate = async (id: string, name: string, role: string) => { const handleCreate = async (data: {
name: string;
email: string;
phone: string;
registeredAddress: string;
}) => {
try { try {
await dispatch(updateAdmin({ id, name, role })); await dispatch(createAdmin(data));
await dispatch(adminList()); // Fetch updated admins list after update await dispatch(adminList()); // Refresh the list after creation
handleCloseModal();
} catch (error) {
console.error("Creation failed", error);
}
};
const handleUpdate = async (
id: string,
name: string,
email: string,
phone: string,
registeredAddress: string
) => {
try {
await dispatch(
updateAdmin({
id,
name,
email,
phone,
registeredAddress,
})
);
await dispatch(adminList());
} catch (error) { } catch (error) {
console.error("Update failed", error); console.error("Update failed", error);
} }
@ -45,21 +79,30 @@ export default function AdminList() {
const categoryColumns: Column[] = [ const categoryColumns: Column[] = [
{ id: "srno", label: "Sr No" }, { id: "srno", label: "Sr No" },
{ id: "name", label: "Name" }, { id: "name", label: "Name" },
{ id: "role", label: "Role" }, { id: "email", label: "Email" },
{ id: "phone", label: "Phone" },
{ id: "registeredAddress", label: "Address" },
{ id: "action", label: "Action", align: "center" }, { id: "action", label: "Action", align: "center" },
]; ];
// If no admins are available, display the sample data
const categoryRows = admins?.length const categoryRows = admins?.length
? admins?.map( ? admins?.map(
( (
admin: { id: string; name: string; role: string }, admin: {
id: string;
name: string;
email: string;
phone: string;
registeredAddress: string;
},
index: number index: number
) => ({ ) => ({
id: admin?.id, id: admin?.id,
srno: index + 1, srno: index + 1,
name: admin?.name, name: admin?.name,
role: admin?.role, email: admin?.email,
phone: admin?.phone,
registeredAddress: admin?.registeredAddress,
}) })
) )
: []; : [];
@ -77,7 +120,6 @@ export default function AdminList() {
}, },
}} }}
> >
{/* Title and Add Category button */}
<Typography <Typography
component="h2" component="h2"
variant="h6" variant="h6"
@ -91,7 +133,7 @@ export default function AdminList() {
sx={{ textAlign: "right" }} sx={{ textAlign: "right" }}
onClick={handleClickOpen} onClick={handleClickOpen}
> >
Add Category Add Admin
</Button> </Button>
</Box> </Box>
@ -100,14 +142,17 @@ export default function AdminList() {
rows={categoryRows} rows={categoryRows}
setDeleteModal={setDeleteModal} setDeleteModal={setDeleteModal}
deleteModal={deleteModal} deleteModal={deleteModal}
setViewModal={setViewModal}
viewModal={viewModal}
setRowData={setRowData} setRowData={setRowData}
setModalOpen={setModalOpen} setModalOpen={setModalOpen}
/> />
<AddEditCategoryModal <AddEditCategoryModal
open={modalOpen} open={modalOpen}
handleClose={handleCloseModal} handleClose={handleCloseModal}
editRow={rowData} handleCreate={handleCreate}
handleUpdate={handleUpdate} 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"> <Button type="submit" fullWidth variant="contained">
Sign in Sign in
</Button> </Button>
<Link {/* <Link
component="button" component="button"
type="button" type="button"
onClick={handleClickOpen} onClick={handleClickOpen}
@ -219,9 +219,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sx={{ alignSelf: "center" }} sx={{ alignSelf: "center" }}
> >
Forgot your password? Forgot your password?
</Link> </Link> */}
</Box> </Box>
<Divider>or</Divider> {/* <Divider>or</Divider>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -239,7 +239,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
Sign up Sign up
</Link> </Link>
</Typography> </Typography>
</Box> </Box> */}
</Card> </Card>
</SignInContainer> </SignInContainer>
</AppTheme> </AppTheme>

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

@ -1,17 +1,17 @@
// src/pages/Dashboard // src/pages/Dashboard
import * as React from 'react'; import * as React from 'react';
import { CssBaseline } from '@mui/material'; import { Box, CssBaseline, Typography } from '@mui/material';
import { import {
chartsCustomizations, chartsCustomizations,
dataGridCustomizations, dataGridCustomizations,
datePickersCustomizations, datePickersCustomizations,
treeViewCustomizations, treeViewCustomizations,
} from './theme/customizations/index.ts'; } 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/index.tsx'; import MainGrid from '../../components/MainGrid';
const xThemeComponents = { const xThemeComponents = {
...chartsCustomizations, ...chartsCustomizations,
@ -20,18 +20,39 @@ const xThemeComponents = {
...treeViewCustomizations, ...treeViewCustomizations,
}; };
export default function Dashboard(props: { disableCustomTheme?: boolean }) { interface DashboardProps {
const disable = true; disableCustomTheme?: boolean;
}
const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => {
return ( return (
<AppTheme {...props} themeComponents={xThemeComponents}> <AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
{!disable ? ( <CssBaseline enableColorScheme />
<> {!disableCustomTheme ? (
<CssBaseline enableColorScheme /> <MainGrid />
<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> </AppTheme>
); );
} };
export default Dashboard;

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

@ -3,20 +3,20 @@ 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 from '../../components/CustomTable'; import CustomTable from '../../components/CustomTable';
import DeleteModal from '../../components/Modals/DeleteModal/DeleteModal'; import DeleteModal from '../../components/Modals/DeleteModal';
// Sample data for categories // Sample data for categories
const categoryRows = [ // const categoryRows = [
{ srno: 1, name: 'Strength', date: '01/03/2025' }, // { srno: 1, name: 'Strength', date: '01/03/2025' },
{ // {
srno: 2, // srno: 2,
name: 'HIIT (High-Intensity Interval Training)', // name: 'HIIT (High-Intensity Interval Training)',
date: '01/03/2025', // date: '01/03/2025',
}, // },
{ srno: 3, name: 'Cardio', date: '01/03/2025' }, // { srno: 3, name: 'Cardio', date: '01/03/2025' },
{ srno: 4, name: 'Combat', date: '01/03/2025' }, // { srno: 4, name: 'Combat', date: '01/03/2025' },
{ srno: 5, name: 'Yoga', date: '01/03/2025' }, // { srno: 5, name: 'Yoga', date: '01/03/2025' },
]; // ];
export default function Vehicles() { export default function Vehicles() {
const [modalOpen, setModalOpen] = useState<boolean>(false); const [modalOpen, setModalOpen] = useState<boolean>(false);
@ -66,16 +66,16 @@ export default function Vehicles() {
}} }}
> >
{/* Title and Add Category button */} {/* Title and Add Category button */}
<Typography component="h2" variant="h6" sx={{ mt: 2, fontWeight: 600 }}> {/* <Typography component="h2" variant="h6" sx={{ mt: 2, fontWeight: 600 }}>
Vehicles Vehicles
</Typography> </Typography> */}
<Button <Button
variant="contained" variant="contained"
size="medium" size="medium"
sx={{ textAlign: 'right' }} sx={{ textAlign: 'right' }}
onClick={handleClickOpen} onClick={handleClickOpen}
> >
Add Category Add Categorywewfw
</Button> </Button>
</Box> </Box>

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

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

3
src/redux/slices/authSlice.ts
View file

@ -69,10 +69,11 @@ export const registerUser = createAsyncThunk<
email: string; email: string;
password: string; password: string;
phone: string; phone: string;
// registeredAddress:string;
role: string; role: string;
}, },
{ rejectValue: string } { rejectValue: string }
>("auth/signup", async (data, { rejectWithValue }) => { >("SignUpUser", async (data, { rejectWithValue }) => {
try { try {
const response = await http.post("auth/signup", data); const response = await http.post("auth/signup", data);
return response.data; return response.data;

19
src/router.tsx
View file

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