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

Merge branch 'develop' of https://git.digimantra.com/DigiMantra/digiev_frontend into develop

Browse source
This commit is contained in:
Mohit kalshan 2025-03-03 17:33:26 +05:30
parent 01dcb50d01 1d9c5bccf9
commit 13ac338091
37 changed files with 19494 additions and 1428 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16095
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -7,7 +7,7 @@
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.4.5", "@mui/icons-material": "^6.4.5",
"@mui/material": "^6.4.5", "@mui/material": "^6.4.5",
"@mui/x-charts": "^7.27.0", "@mui/x-charts": "^7.27.1",
"@mui/x-data-grid": "^7.27.0", "@mui/x-data-grid": "^7.27.0",
"@mui/x-date-pickers": "^7.27.0", "@mui/x-date-pickers": "^7.27.0",
"@react-spring/web": "^9.7.5", "@react-spring/web": "^9.7.5",
@ -27,9 +27,11 @@
"react-dom": "^18.0.0", "react-dom": "^18.0.0",
"react-dropzone": "^14.3.5", "react-dropzone": "^14.3.5",
"react-hook-form": "^7.54.2", "react-hook-form": "^7.54.2",
"react-minimal-pie-chart": "^9.1.0",
"react-redux": "^9.2.0", "react-redux": "^9.2.0",
"react-router-dom": "^7.1.1", "react-router-dom": "^7.1.1",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"recharts": "^2.15.1",
"sonner": "^1.7.4", "sonner": "^1.7.4",
"web-vitals": "^4.2.4" "web-vitals": "^4.2.4"
}, },

BIN
public/mainPageLogo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 566 KiB

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

@ -6,10 +6,12 @@ import {
DialogActions, DialogActions,
DialogContent, DialogContent,
DialogTitle, DialogTitle,
IconButton,
TextField, TextField,
} from "@mui/material"; } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { Visibility, VisibilityOff } from "@mui/icons-material";
//By Jaanvi : Edit Model :: 11-feb-25 //By Jaanvi : Edit Model :: 11-feb-25
interface AddEditCategoryModalProps { interface AddEditCategoryModalProps {
@ -21,7 +23,8 @@ interface AddEditCategoryModalProps {
name: string, name: string,
email: string, email: string,
phone: string, phone: string,
registeredAddress: string registeredAddress: string,
password: string
) => void; ) => void;
editRow: any; editRow: any;
} }
@ -31,6 +34,7 @@ interface FormData {
email: string; email: string;
phone: string; phone: string;
registeredAddress: string; registeredAddress: string;
password: string;
} }
const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
@ -52,6 +56,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
email: "", email: "",
phone: "", phone: "",
registeredAddress: "", registeredAddress: "",
password: "",
}, },
}); });
@ -62,7 +67,8 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
data.name, data.name,
data.email, data.email,
data.phone, data.phone,
data.registeredAddress data.registeredAddress,
data.password
); );
} else { } else {
handleCreate(data); handleCreate(data);
@ -82,6 +88,8 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
} }
}, [editRow, setValue, reset]); }, [editRow, setValue, reset]);
const [showPassword, setShowPassword] = React.useState(false);
return ( return (
<Dialog <Dialog
open={open} open={open}
@ -168,7 +176,58 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
/> />
)} )}
/> />
{!editRow && (
<Controller
name="password"
control={control}
rules={{
required: "password is required",
}}
render={({ field }) => (
<>
<Box sx={{position:"relative" }}>
<TextField
{...field}
required
margin="dense"
label="Password"
type={showPassword ? "text" : "password"}
id="password"
autoComplete="current-password"
autoFocus
fullWidth
variant="standard"
error={!!errors.password}
helperText={errors.password?.message}
/>
<IconButton
sx={{
position: "absolute",
top: "60%",
right: "10px",
background: "none",
borderColor: "transparent",
transform: "translateY(-50%)",
"&:hover": {
backgroundColor: "transparent",
borderColor: "transparent",
},
}}
onClick={() =>
setShowPassword((prev) => !prev)
}
>
{showPassword ? (
<VisibilityOff />
) : (
<Visibility />
)}
</IconButton>
</Box>
</>
)}
/>
)}
<Controller <Controller
name="phone" name="phone"
control={control} control={control}

212
src/components/AddUserModel/index.tsx Normal file
View file

@ -0,0 +1,212 @@
import React, { useEffect } from "react";
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
TextField,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useForm, Controller } from "react-hook-form";
//By Jaanvi : Edit Model :: 11-feb-25
interface AddUserModalProps {
open: boolean;
handleClose: () => void;
handleCreate: (data: FormData) => void;
handleUpdate: (
id: string,
name: string,
email: string,
phone: string,
password: string
) => void;
editRow: any;
}
interface FormData {
name: string;
email: string;
phone: string;
password: string;
}
const AddUserModal: React.FC<AddUserModalProps> = ({
open,
handleClose,
handleCreate,
editRow,
}) => {
const {
control,
handleSubmit,
formState: { errors },
setValue,
reset,
} = useForm<FormData>({
defaultValues: {
name: "",
email: "",
phone: "",
password: "",
},
});
const onSubmit = (data: FormData) => {
handleCreate(data);
handleClose();
reset();
};
return (
<Dialog
open={open}
onClose={handleClose}
maxWidth="md"
fullWidth
PaperProps={{
component: "form",
onSubmit: handleSubmit(onSubmit),
}}
>
<DialogTitle
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
{editRow ? "Edit Admin" : "Add Admin"}
<Box
onClick={handleClose}
sx={{
cursor: "pointer",
display: "flex",
alignItems: "center",
}}
>
<CloseIcon />
</Box>
</DialogTitle>
<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="User Name"
type="text"
fullWidth
variant="standard"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
<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="password"
control={control}
rules={{
required: "password is required",
}}
render={({ field }) => (
<TextField
{...field}
required
margin="dense"
label="Password"
type="password"
fullWidth
variant="standard"
error={!!errors.password}
helperText={errors.password?.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}
/>
)}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type="submit">Create</Button>
</DialogActions>
</Dialog>
);
};
export default AddUserModal;

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

@ -68,12 +68,12 @@ export default function AppNavbar() {
<Typography <Typography
variant="h4" variant="h4"
component="h1" component="h1"
sx={{ color: "text.primary" }} sx={{ color: "#202020" }}
> >
Dashboard Dashboard
</Typography> </Typography>
</Stack> </Stack>
<ColorModeIconDropdown /> {/* <ColorModeIconDropdown /> */}
<MenuButton aria-label="menu" onClick={toggleDrawer(true)}> <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
<MenuRoundedIcon /> <MenuRoundedIcon />
</MenuButton> </MenuButton>
@ -81,7 +81,6 @@ export default function AppNavbar() {
<SideMenuMobile open={open} toggleDrawer={toggleDrawer} /> <SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
</Stack> </Stack>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
); );
} }

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

@ -61,6 +61,8 @@ interface CustomTableProps {
viewModal: boolean; viewModal: boolean;
setViewModal: Function; setViewModal: Function;
deleteModal: boolean; deleteModal: boolean;
handleStatusToggle: (id: string, currentStatus: number) => void;
tableType?: string;
} }
const CustomTable: React.FC<CustomTableProps> = ({ const CustomTable: React.FC<CustomTableProps> = ({
@ -72,8 +74,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
setRowData, setRowData,
setViewModal, setViewModal,
setModalOpen, setModalOpen,
handleStatusToggle,
tableType,
}) => { }) => {
// 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);
@ -83,6 +86,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => { const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
setSelectedRow(row); // Ensure the row data is set setSelectedRow(row); // Ensure the row data is set
setRowData(row);
}; };
const handleClose = () => { const handleClose = () => {
@ -111,57 +115,96 @@ const CustomTable: React.FC<CustomTableProps> = ({
setViewModal(false); setViewModal(false);
}; };
const handleToggleStatus = () => {
if (selectedRow) {
// Toggle the opposite of current status
const newStatus = selectedRow.statusValue === 1 ? 0 : 1;
handleStatusToggle(selectedRow.id, newStatus);
}
handleClose();
};
return ( return (
<TableContainer component={Paper}> <Box sx={{ overflowX: "auto", width: "100%" }}>
<Table sx={{ minWidth: 700 }} aria-label="customized table"> <TableContainer component={Paper}>
<TableHead> <Table
<TableRow> sx={{
{columns.map((column) => ( minWidth: 700,
<StyledTableCell width: "100%",
key={column.id} tableLayout: "auto",
align={column.align || "left"} }}
> aria-label="customized table"
{column.label} >
</StyledTableCell> <TableHead>
))} <TableRow>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => ( {columns.map((column) => (
<StyledTableCell <StyledTableCell
key={column.id} key={column.id}
align={column.align || "left"} align={column.align || "left"}
sx={{
whiteSpace: "nowrap", // Prevent wrapping
// fontSize: { xs: "12px", sm: "14px" },
fontSize: {
xs: "10px",
sm: "12px",
md: "14px",
}, // Adjust font size responsively
padding: { xs: "8px", sm: "12px" },
}}
> >
{isImage(row[column.id]) ? ( {column.label}
<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> </StyledTableCell>
))} ))}
</StyledTableRow> </TableRow>
))} </TableHead>
</TableBody> <TableBody>
</Table> {rows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
sx={{
whiteSpace: "nowrap", // Prevent wrapping
fontSize: {
xs: "10px",
sm: "12px",
md: "14px",
}, // Adjust font size responsively
padding: { xs: "8px", sm: "12px" },
}}
>
{isImage(row[column.id]) ? (
<img
src={row[column.id]}
alt="Row "
style={{
width: "50px",
height: "50px",
objectFit: "cover",
}}
/>
) : column.id !== "action" ? (
row[column.id]
) : (
<IconButton
onClick={(e) => {
handleClick(e, row);
setRowData(row); // Store the selected row
}}
>
<MoreVertRoundedIcon />
</IconButton>
)}
</StyledTableCell>
))}
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{/* Menu Actions */}
{open && ( {open && (
<Menu <Menu
anchorEl={anchorEl} anchorEl={anchorEl}
@ -228,6 +271,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
Edit Edit
</Button> </Button>
{tableType === "roleList" && (
<Button variant="text" onClick={handleToggleStatus}>
{selectedRow.statusValue === 1
? "Deactivate"
: "Activate"}
</Button>
)}
<Button <Button
variant="text" variant="text"
onClick={(e) => { onClick={(e) => {
@ -256,7 +307,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
</Box> </Box>
</Menu> </Menu>
)} )}
</TableContainer> </Box>
); );
}; };

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

@ -8,6 +8,8 @@ import SearchIcon from "@mui/icons-material/Search";
import Divider from "@mui/material/Divider"; import Divider from "@mui/material/Divider";
import MenuButton from "../MenuButton"; import MenuButton from "../MenuButton";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
export default function Header() { export default function Header() {
const [showNotifications, setShowNotifications] = React.useState(false); const [showNotifications, setShowNotifications] = React.useState(false);
@ -20,11 +22,12 @@ export default function Header() {
sx={{ sx={{
width: "100%", width: "100%",
height: "84px", height: "84px",
backgroundColor: "#202020", // backgroundColor: "#202020",
padding: "20px 24px", padding: "20px 24px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
flexDirection: { xs: "column", sm: "row" },
}} }}
> >
<Box sx={{ flexGrow: 1 }} /> <Box sx={{ flexGrow: 1 }} />
@ -33,13 +36,18 @@ export default function Header() {
spacing={3} spacing={3}
alignItems="center" alignItems="center"
justifyContent="flex-end" justifyContent="flex-end"
sx={{
width: "100%",
justifyContent: { xs: "center", sm: "flex-end" },
marginTop: { xs: 2, sm: 0 },
}}
> >
{/* Search Bar */} {/* Search Bar */}
<Box <Box
sx={{ sx={{
width: "360px", width: { xs: "100%", sm: "360px" },
height: "44px", height: "44px",
backgroundColor: "#303030", backgroundColor: "#FFFFFF",
borderRadius: "8px", borderRadius: "8px",
border: "1px solid #424242", border: "1px solid #424242",
display: "flex", display: "flex",
@ -47,42 +55,75 @@ export default function Header() {
padding: "0 12px", padding: "0 12px",
}} }}
> >
<SearchIcon sx={{ color: "#FFFFFF" }} /> <SearchIcon sx={{ color: "#202020" }} />
<InputBase <InputBase
sx={{ marginLeft: 1, flex: 1, color: "#FFFFFF" }} sx={{
marginLeft: 1,
flex: 1,
color: "#202020",
fontSize: { xs: "12px", sm: "14px" },
}}
/> />
</Box> </Box>
{/* Notification and Profile Section */} {/* Notification and Profile Section */}
<Stack direction="row" spacing={2} alignItems="center"> <Stack
direction="row"
spacing={2}
alignItems="center"
sx={{
display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
}}
>
{/* Custom Bell Icon */}
<MenuButton <MenuButton
onClick={toggleNotifications} showBadge
aria-label="Open notifications" aria-label="Open notifications"
onClick={toggleNotifications}
> >
{/* Custom Bell Icon */} <NotificationsRoundedIcon />
<Box
component="img"
src="/Bell.jpg"
alt="Notification Icon"
sx={{ width: 24, height: 24 }}
/>
</MenuButton> </MenuButton>
<Divider flexItem sx={{ backgroundColor: "#424242" }} />
<Divider flexItem sx={{ backgroundColor: "#202020" }} />
<Stack direction="row" spacing={1.5} alignItems="center"> <Stack direction="row" spacing={1.5} alignItems="center">
<Avatar <Avatar
alt="User Avatar" alt="User Avatar"
src="/avatar.png" src="/avatar.png"
sx={{ width: 36, height: 36 }} sx={{ width: 36, height: 36 }}
/> />
<Typography variant="body1" sx={{ color: "#FFFFFF" }}> <Typography variant="body1" sx={{ color: "#202020" }}>
Momah Momah
</Typography> </Typography>
{/* Dropdown Icon */} {/* Dropdown Icon */}
<ArrowDropDownIcon <ArrowDropDownIcon
sx={{ color: "#FFFFFF", width: 16, height: 16 }} sx={{ color: "#202020", width: 16, height: 16 }}
/> />
</Stack> </Stack>
{/* <ColorModeIconDropdown /> */}
</Stack> </Stack>
{showNotifications && (
<Box
sx={{
p: 2,
position: "absolute",
top: "55px",
right: { xs: "10px", sm: "280px" },
bgcolor: "#FFFFFF",
boxShadow: 1,
borderRadius: 1,
zIndex: 1300,
cursor: "pointer",
width: "250px",
}}
>
{/* <Typography variant="h6" color="text.primary">
Notifications
</Typography> */}
<Typography variant="body2" color="text.secondary">
No notifications yet
</Typography>
</Box>
)}
</Stack> </Stack>
</Box> </Box>
); );

152
src/components/LineChartCard/index.tsx Normal file
View file

@ -0,0 +1,152 @@
import * as React from "react";
import { useTheme } from "@mui/material/styles";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Chip from "@mui/material/Chip";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import { LineChart } from "@mui/x-charts/LineChart";
import { Box } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
function AreaGradient({ color, id }: { color: string; id: string }) {
return (
<defs>
<linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stopColor={color} stopOpacity={0.5} />
<stop offset="100%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
);
}
function getDaysInMonth(month: number, year: number) {
const date = new Date(year, month, 0);
const monthName = date.toLocaleDateString("en-US", {
month: "short",
});
const daysInMonth = date.getDate();
const days = [];
let i = 1;
while (days.length < daysInMonth) {
days.push(`${monthName} ${i}`);
i += 1;
}
return days;
}
export default function LineChartCard() {
const theme = useTheme();
const data = getDaysInMonth(4, 2024);
const colorPalette = [theme.palette.primary.light];
return (
<Card
variant="outlined"
sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
>
<CardContent>
<div
style={{
display: "flex",
alignItems: "center",
color: "#202020",
}}
>
<Typography
variant="h6"
align="left"
color="#202020"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "18px",
lineHeight: "24px",
}}
>
Sales Stats
</Typography>
<Box
sx={{
mt: 2,
mb: 2,
backgroundColor: "#FFFFFF",
marginLeft: "auto",
marginRight: "16px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
p: 1.5,
borderRadius: "8px",
border: "1px solid #454545",
padding: "4px 8px",
color: "#FFFFFF",
}}
>
<Typography
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "14px",
lineHeight: "24px",
color: "#202020",
p: "4px",
}}
>
Weekly
</Typography>
<ArrowDropDownIcon sx={{ color: "#202020" }} />
</Box>
</div>
<LineChart
colors={colorPalette}
xAxis={[
{
scaleType: "point",
data,
tickInterval: (index, i) => (i + 1) % 5 === 0,
},
]}
series={[
{
id: "direct",
label: "Direct",
showMark: false,
curve: "linear",
stack: "total",
area: true,
stackOrder: "ascending",
data: [
300, 900, 500, 1200, 1500, 1800, 2400, 2100,
2700, 3000, 1800, 3300, 3600, 3900, 4200, 4500,
3900, 4800, 5100, 5400, 4500, 5700, 6000, 6300,
6600, 6900, 7200, 7500, 7800, 8100,
],
color: "#FFFFFF",
},
]}
height={250}
margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
grid={{ horizontal: true }}
sx={{
"& .MuiAreaElement-series-direct": {
fill: "url('#direct')",
},
}}
slotProps={{
legend: {
hidden: true,
},
}}
>
<AreaGradient
color={theme.palette.primary.light}
id="direct"
/>
</LineChart>
</CardContent>
</Card>
);
}

2
src/components/LogOut/logOutfunc.tsx
View file

@ -14,7 +14,7 @@ const Logout: React.FC<LogoutProps> = ({ setLogoutModal, logoutModal }) => {
const handlelogout = () => { const handlelogout = () => {
localStorage.clear(); localStorage.clear();
navigate("/auth/login"); navigate("/login");
toast.success("Logged out successfully"); toast.success("Logged out successfully");
setLogoutModal(false); setLogoutModal(false);
}; };

2
src/components/LogOutFunction/LogOutFunction.tsx
View file

@ -14,7 +14,7 @@ const Logout: React.FC<LogoutProps> = ({ setLogoutModal, logoutModal }) => {
const handlelogout = () => { const handlelogout = () => {
localStorage.clear(); localStorage.clear();
navigate("/auth/login"); navigate("/login");
toast.success("Logged out successfully"); toast.success("Logged out successfully");
setLogoutModal(false); setLogoutModal(false);
}; };

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

@ -1,79 +1,74 @@
import * as React from 'react'; import * as React from "react";
import Grid from '@mui/material/Grid2'; import Grid from "@mui/material/Grid2";
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 Typography from '@mui/material/Typography'; import Typography from "@mui/material/Typography";
import Copyright from '../../pages/Dashboard/internals/components/Copyright'; import Copyright from "../../pages/Dashboard/internals/components/Copyright";
import ChartUserByCountry from '../ChartUserByCountry'; import ChartUserByCountry from "../ChartUserByCountry";
import CustomizedTreeView from '../CustomizedTreeView'; import CustomizedTreeView from "../CustomizedTreeView";
import CustomizedDataGrid from '../CustomizedDataGrid'; import CustomizedDataGrid from "../CustomizedDataGrid";
import HighlightedCard from '../HighlightedCard'; import HighlightedCard from "../HighlightedCard";
import PageViewsBarChart from '../PageViewsBarChart'; import PageViewsBarChart from "../PageViewsBarChart";
import SessionsChart from '../SessionsChart'; import SessionsChart from "../SessionsChart";
import StatCard, { StatCardProps } from '../StatCard'; import StatCard, { StatCardProps } from "../StatCard";
import ResourcesPieChart from "../ResourcePieChart";
import { BarChart } from "@mui/icons-material";
import RoundedBarChart from "../barChartCard";
import { LineHighlightPlot } from "@mui/x-charts";
import LineChartCard from "../LineChartCard";
const data: StatCardProps[] = [ const data: StatCardProps[] = [
{ {
title: 'Users', title: "Total Charge Stations",
value: '14k', value: "86",
interval: 'Last 30 days', },
trend: 'up', {
data: [ title: "Charging Completed",
200, 24, 220, 260, 240, 380, 100, 240, 280, 240, 300, 340, 320, 360, 340, value: "12",
380, 360, 400, 380, 420, 400, 640, 340, 460, 440, 480, 460, 600, 880, 920, },
], {
}, title: "Active Users",
{ value: "24",
title: 'Conversions', },
value: '325', {
interval: 'Last 30 days', title: "Total Energy Consumed",
trend: 'down', value: "08",
data: [ },
1640, 1250, 970, 1130, 1050, 900, 720, 1080, 900, 450, 920, 820, 840, 600,
820, 780, 800, 760, 380, 740, 660, 620, 840, 500, 520, 480, 400, 360, 300,
220,
],
},
{
title: 'Event count',
value: '200k',
interval: 'Last 30 days',
trend: 'neutral',
data: [
500, 400, 510, 530, 520, 600, 530, 520, 510, 730, 520, 510, 530, 620, 510,
530, 520, 410, 530, 520, 610, 530, 520, 610, 530, 420, 510, 430, 520, 510,
],
},
]; ];
export default function MainGrid() { export default function MainGrid() {
return ( return (
<Box sx={{ width: '100%', maxWidth: { sm: '100%', md: '1700px' } }}> <Box sx={{ width: "100%", maxWidth: { sm: "100%", md: "1700px" } }}>
{/* cards */} {/* cards */}
<Typography component="h2" variant="h6" sx={{ mb: 2 }}> <Typography component="h2" variant="h6" sx={{ mb: 2 }}>
Overview Dashboard
</Typography> </Typography>
<Grid <Grid
container container
spacing={2} spacing={2}
columns={12} columns={12}
sx={{ mb: (theme) => theme.spacing(2) }}
> sx={{ mb: (theme) => theme.spacing(2) }}
{data.map((card, index) => ( >
<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}> {data.map((card, index) => (
<StatCard {...card} /> <Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>
</Grid> <StatCard {...card} />
))} </Grid>
<Grid size={{ xs: 12, sm: 6, lg: 3 }}> ))}
<HighlightedCard />
</Grid> <Grid size={{ xs: 12, md: 6 }}>
<Grid size={{ xs: 12, md: 6 }}> <SessionsChart />
<SessionsChart /> </Grid>
</Grid> <Grid size={{ xs: 12, md: 6 }}>
<Grid size={{ xs: 12, md: 6 }}> <ResourcesPieChart />
<PageViewsBarChart /> </Grid>
</Grid> <Grid size={{ xs: 12, md: 6 }}>
</Grid> <RoundedBarChart />
</Box> </Grid>
); <Grid size={{ xs: 12, md: 6 }}>
<LineChartCard />
</Grid>
</Grid>
</Box>
);
} }

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

@ -10,37 +10,13 @@ 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";
import { RootState } from "../../redux/store/store"; import { RootState } from "../../redux/store/store";
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
const baseMenuItems = [ import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";
{
text: "Home",
icon: <HomeRoundedIcon />,
url: "/panel/dashboard",
},
{
text: "Admins",
icon: <AnalyticsRoundedIcon />,
url: "/panel/admin-list",
},
{
text: "Users",
icon: <AnalyticsRoundedIcon />,
url: "/panel/user-list",
},
];
//Eknoor singh and Jaanvi //Eknoor singh and Jaanvi
//date:- 12-Feb-2025 //date:- 12-Feb-2025
//Made a different variable for super admin to access all the details. //Made a different variable for super admin to access all the details.
const superAdminOnlyItems = [
{
text: "Admin List",
icon: <FormatListBulletedIcon />,
url: "/panel/adminlist",
},
];
type PropType = { type PropType = {
hidden: boolean; hidden: boolean;
}; };
@ -48,18 +24,36 @@ type PropType = {
export default function MenuContent({ hidden }: PropType) { export default function MenuContent({ hidden }: PropType) {
const location = useLocation(); const location = useLocation();
const userRole = useSelector( const userRole = useSelector(
(state: RootState) => state.profileReducer.user?.role (state: RootState) => state.profileReducer.user?.userType
); );
const baseMenuItems = [
const mainListItems = [ {
...baseMenuItems, text: "Dashboard",
...(userRole === "superadmin" ? superAdminOnlyItems : []), icon: <DashboardOutlinedIcon />,
url: "/panel/dashboard",
},
userRole === "superadmin" && {
text: "Admins",
icon: <AnalyticsRoundedIcon />,
url: "/panel/admin-list",
},
userRole === "admin" && {
text: "Users",
icon: <AnalyticsRoundedIcon />,
url: "/panel/user-list",
},
userRole === "superadmin" && {
text: "Roles",
icon: <AnalyticsRoundedIcon />,
url: "/panel/role-list",
},
]; ];
const filteredMenuItems = baseMenuItems.filter(Boolean);
return ( return (
<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}> <Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
<List dense> <List dense>
{mainListItems.map((item, index) => ( {filteredMenuItems.map((item, index) => (
<ListItem <ListItem
key={index} key={index}
disablePadding disablePadding

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

@ -13,108 +13,107 @@ 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 Logout from "../LogOutFunction/LogOutFunction"; 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 [logoutModal, setLogoutModal] = React.useState<boolean>(false); const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => { const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event?.currentTarget); setAnchorEl(event?.currentTarget);
}; };
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
//Eknoor singh and jaanvi //Eknoor singh and jaanvi
//date:- 12-Feb-2025 //date:- 12-Feb-2025
//Made a navigation page for the profile page //Made a navigation page for the profile page
const navigate = useNavigate(); const navigate = useNavigate();
const handleProfile = () => { const handleProfile = () => {
navigate("/panel/profile"); navigate("/panel/profile");
}; };
//jaanvi //jaanvi
//date:- 13-Feb-2025 //date:- 13-Feb-2025
return ( return (
<React.Fragment> <React.Fragment>
<MenuButton <MenuButton
aria-label="Open menu" aria-label="Open menu"
onClick={handleClick} onClick={handleClick}
sx={{ borderColor: "transparent" }} sx={{ borderColor: "transparent" }}
> >
{avatar ? ( {avatar ? (
<MoreVertRoundedIcon /> <MoreVertRoundedIcon />
) : ( ) : (
<Avatar <Avatar
sizes="small" sizes="small"
alt="Riley Carter" alt="Super Admin"
src="/static/images/avatar/7.jpg" src="/static/images/avatar/7.jpg"
sx={{ width: 36, height: 36 }} sx={{ width: 36, height: 36 }}
/> />
)} )}
</MenuButton> </MenuButton>
<Menu <Menu
anchorEl={anchorEl} anchorEl={anchorEl}
id="menu" id="menu"
open={open} open={open}
onClose={handleClose} onClose={handleClose}
onClick={handleClose} onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }} transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{ sx={{
[`& .${listClasses.root}`]: { [`& .${listClasses.root}`]: {
padding: "4px", padding: "4px",
}, },
[`& .${paperClasses.root}`]: { [`& .${paperClasses.root}`]: {
padding: 0, padding: 0,
}, },
[`& .${dividerClasses.root}`]: { [`& .${dividerClasses.root}`]: {
margin: "4px -4px", margin: "4px -4px",
}, },
}} }}
> >
<MenuItem onClick={handleProfile}>Profile</MenuItem> <MenuItem onClick={handleProfile}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem> <MenuItem onClick={handleClose}>My account</MenuItem>
<Divider /> <Divider />
<MenuItem onClick={handleClose}>Add another account</MenuItem> <MenuItem onClick={handleClose}>Add another account</MenuItem>
<MenuItem onClick={handleClose}>Settings</MenuItem> <MenuItem onClick={handleClose}>Settings</MenuItem>
<Divider /> <Divider />
<MenuItem <MenuItem
onClick={handleClose} onClick={handleClose}
sx={{ sx={{
[`& .${listItemIconClasses.root}`]: { [`& .${listItemIconClasses.root}`]: {
ml: "auto", ml: "auto",
minWidth: 0, minWidth: 0,
}, },
}} }}
> >
{/* //Eknoor singh and jaanvi {/* //Eknoor singh and jaanvi
//date:- 13-Feb-2025 //date:- 13-Feb-2025
//Implemented logout functionality which was static previously */} //Implemented logout functionality which was static previously */}
<ListItemText <ListItemText
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLogoutModal(true); setLogoutModal(true);
}} }}
> >
Logout Logout
</ListItemText> </ListItemText>
<Logout <Logout
setLogoutModal={setLogoutModal} setLogoutModal={setLogoutModal}
logoutModal={logoutModal} logoutModal={logoutModal}
/> />
<ListItemIcon> <ListItemIcon>
<LogoutRoundedIcon fontSize="small" /> <LogoutRoundedIcon fontSize="small" />
</ListItemIcon> </ListItemIcon>
</MenuItem> </MenuItem>
</Menu> </Menu>
</React.Fragment> </React.Fragment>
); );
} }

106
src/components/ResourcePieChart/index.tsx Normal file
View file

@ -0,0 +1,106 @@
import * as React from "react";
import { PieChart } from "@mui/x-charts/PieChart";
import { useDrawingArea } from "@mui/x-charts/hooks";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
const colorPalette = [
"hsla(202, 69%, 60%, 1)",
"hsl(204, 48.60%, 72.50%)",
"hsl(214, 56.40%, 30.60%)",
"hsl(222, 6.80%, 50.80%)",
];
const data = [
{ title: "Total Resources", value: 50, color: colorPalette[0] },
{ title: "Total Stations", value: 20, color: colorPalette[1] },
{ title: "Station Manager", value: 15, color: colorPalette[2] },
{ title: "Total Booth", value: 15, color: colorPalette[3] },
];
export default function ResourcePieChart() {
return (
<Card
variant="outlined"
sx={{
display: "flex",
flexDirection: "column",
gap: "8px",
flexGrow: 1,
width: "100%",
height: "100%",
backgroundColor: "#F2F2F2",
}}
>
<CardContent>
<Typography
component="h2"
variant="subtitle2"
color="#202020"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "18px",
lineHeight: "24px",
}}
>
Resources
</Typography>
<Box sx={{ display: "flex", alignItems: "center" }}>
<PieChart
colors={colorPalette}
margin={{
left: 60,
right: 80,
top: 80,
bottom: 80,
}}
series={[
{
data,
innerRadius: 50,
outerRadius: 100,
paddingAngle: 0,
highlightScope: {
faded: "global",
highlighted: "item",
},
},
]}
height={300}
width={300}
slotProps={{
legend: { hidden: true },
}}
></PieChart>
<Stack spacing={1}>
{data.map((entry, index) => (
<Stack
key={index}
direction="row"
spacing={1}
alignItems="center"
>
<Box
sx={{
width: 16,
height: 16,
backgroundColor: entry.color,
borderRadius: "50%",
}}
/>
<Typography variant="body2" color="#202020">
{entry.title}
</Typography>
</Stack>
))}
</Stack>
</Box>
</CardContent>
</Card>
);
}

253
src/components/SessionsChart/index.tsx
View file

@ -1,150 +1,113 @@
import * as React from 'react'; import * as React from "react";
import { useTheme } from '@mui/material/styles'; import Card from "@mui/material/Card";
import Card from '@mui/material/Card'; import CardContent from "@mui/material/CardContent";
import CardContent from '@mui/material/CardContent'; import Typography from "@mui/material/Typography";
import Chip from '@mui/material/Chip'; import Box from "@mui/material/Box";
import Typography from '@mui/material/Typography'; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import Stack from '@mui/material/Stack';
import { LineChart } from '@mui/x-charts/LineChart';
function AreaGradient({ color, id }: { color: string; id: string }) {
return (
<defs>
<linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stopColor={color} stopOpacity={0.5} />
<stop offset="100%" stopColor={color} stopOpacity={0} />
</linearGradient>
</defs>
);
}
function getDaysInMonth(month: number, year: number) {
const date = new Date(year, month, 0);
const monthName = date.toLocaleDateString('en-US', {
month: 'short',
});
const daysInMonth = date.getDate();
const days = [];
let i = 1;
while (days.length < daysInMonth) {
days.push(`${monthName} ${i}`);
i += 1;
}
return days;
}
export default function SessionsChart() { export default function SessionsChart() {
const theme = useTheme(); return (
const data = getDaysInMonth(4, 2024); <Card
variant="outlined"
sx={{
width: "100%",
height: "100%",
backgroundColor: "#F2F2F2",
p: 2,
}}
>
<CardContent>
<Typography
variant="h6"
align="left"
color="#202020"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "18px",
lineHeight: "24px",
}}
>
Charging prices
</Typography>
const colorPalette = [ {/* Responsive dropdown box */}
theme.palette.primary.light, <Box
theme.palette.primary.main, sx={{
theme.palette.primary.dark, mt: 2,
]; mb: 2,
backgroundColor: "#FFFFFF",
fontSize: "14px",
lineHeight: "20px",
width: { xs: "100%" },
height: "48px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
p: 1.5,
borderRadius: "8px",
border: "1px solid #454545",
}}
>
<Typography
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "14px",
lineHeight: "24px",
color: "#202020",
p: "4px",
}}
>
Delhi NCR EV Station
</Typography>
<ArrowDropDownIcon sx={{ color: "#202020" }} />
</Box>
return ( {/* Grid container for the four boxes */}
<Card variant="outlined" sx={{ width: '100%' }}> <Box
<CardContent> sx={{
<Typography component="h2" variant="subtitle2" gutterBottom> display: "grid",
Sessions gridTemplateColumns: {
</Typography> xs: "1fr",
<Stack sx={{ justifyContent: 'space-between' }}> sm: "repeat(2, 1fr)",
<Stack },
direction="row" gap: { xs: 1, sm: 2 },
sx={{ maxWidth: "750px",
alignContent: { xs: 'center', sm: 'flex-start' }, width: "100%",
alignItems: 'center', mx: "auto",
gap: 1, }}
}} >
> {/* You can map over your data here; for simplicity, we’re using static boxes */}
<Typography variant="h4" component="p"> {[1, 2, 3, 4].map((item) => (
13,277 <Box
</Typography> key={item}
<Chip size="small" color="success" label="+35%" /> sx={{
</Stack> height: "84px",
<Typography variant="caption" sx={{ color: 'text.secondary' }}> borderRadius: "8px",
Sessions per day for the last 30 days p: "12px 16px",
</Typography> backgroundColor: "#FFFFFF",
</Stack> color: "#202020",
<LineChart }}
colors={colorPalette} >
xAxis={[ <Typography
{ component="h1"
scaleType: 'point', variant="body2"
data, gutterBottom
tickInterval: (index, i) => (i + 1) % 5 === 0, >
}, Basic Charging
]} </Typography>
series={[ <Typography
{ component="h1"
id: 'direct', variant="subtitle2"
label: 'Direct', gutterBottom
showMark: false, >
curve: 'linear', 16.83 cents/kWh
stack: 'total', </Typography>
area: true, </Box>
stackOrder: 'ascending', ))}
data: [ </Box>
300, 900, 600, 1200, 1500, 1800, 2400, 2100, 2700, 3000, 1800, 3300, </CardContent>
3600, 3900, 4200, 4500, 3900, 4800, 5100, 5400, 4800, 5700, 6000, </Card>
6300, 6600, 6900, 7200, 7500, 7800, 8100, );
],
},
{
id: 'referral',
label: 'Referral',
showMark: false,
curve: 'linear',
stack: 'total',
area: true,
stackOrder: 'ascending',
data: [
500, 900, 700, 1400, 1100, 1700, 2300, 2000, 2600, 2900, 2300, 3200,
3500, 3800, 4100, 4400, 2900, 4700, 5000, 5300, 5600, 5900, 6200,
6500, 5600, 6800, 7100, 7400, 7700, 8000,
],
},
{
id: 'organic',
label: 'Organic',
showMark: false,
curve: 'linear',
stack: 'total',
stackOrder: 'ascending',
data: [
1000, 1500, 1200, 1700, 1300, 2000, 2400, 2200, 2600, 2800, 2500,
3000, 3400, 3700, 3200, 3900, 4100, 3500, 4300, 4500, 4000, 4700,
5000, 5200, 4800, 5400, 5600, 5900, 6100, 6300,
],
area: true,
},
]}
height={250}
margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
grid={{ horizontal: true }}
sx={{
'& .MuiAreaElement-series-organic': {
fill: "url('#organic')",
},
'& .MuiAreaElement-series-referral': {
fill: "url('#referral')",
},
'& .MuiAreaElement-series-direct': {
fill: "url('#direct')",
},
}}
slotProps={{
legend: {
hidden: true,
},
}}
>
<AreaGradient color={theme.palette.primary.dark} id="organic" />
<AreaGradient color={theme.palette.primary.main} id="referral" />
<AreaGradient color={theme.palette.primary.light} id="direct" />
</LineChart>
</CardContent>
</Card>
);
} }

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

@ -11,6 +11,9 @@ 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";
import { AppDispatch, RootState } from "../../redux/store/store";
import { useDispatch, useSelector } from "react-redux";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
interface SideMenuMobileProps { interface SideMenuMobileProps {
open: boolean | undefined; open: boolean | undefined;
@ -21,6 +24,12 @@ export default function SideMenuMobile({
open, open,
toggleDrawer, toggleDrawer,
}: SideMenuMobileProps) { }: SideMenuMobileProps) {
const dispatch = useDispatch<AppDispatch>();
const { user } = useSelector((state: RootState) => state?.profileReducer);
React.useEffect(() => {
dispatch(fetchAdminProfile());
}, [dispatch]);
return ( return (
<Drawer <Drawer
anchor="right" anchor="right"
@ -47,12 +56,12 @@ export default function SideMenuMobile({
> >
<Avatar <Avatar
sizes="small" sizes="small"
alt="Riley Carter" alt={user?.name || "User Avatar"}
src="/static/images/avatar/7.jpg" src="/static/images/avatar/7.jpg"
sx={{ width: 24, height: 24 }} sx={{ width: 24, height: 24 }}
/> />
<Typography component="p" variant="h6"> <Typography component="p" variant="h6">
Riley Carter Super Admin
</Typography> </Typography>
</Stack> </Stack>
<MenuButton showBadge> <MenuButton showBadge>
@ -61,7 +70,7 @@ export default function SideMenuMobile({
</Stack> </Stack>
<Divider /> <Divider />
<Stack sx={{ flexGrow: 1 }}> <Stack sx={{ flexGrow: 1 }}>
<MenuContent /> <MenuContent hidden={false} />
<Divider /> <Divider />
</Stack> </Stack>
<CardAlert /> <CardAlert />

164
src/components/StatCard/index.tsx
View file

@ -1,129 +1,45 @@
import * as React from 'react'; import * as React from "react";
import { useTheme } from '@mui/material/styles'; import { useTheme } from "@mui/material/styles";
import Box from '@mui/material/Box'; import Box from "@mui/material/Box";
import Card from '@mui/material/Card'; import Card from "@mui/material/Card";
import CardContent from '@mui/material/CardContent'; import CardContent from "@mui/material/CardContent";
import Chip from '@mui/material/Chip'; import Chip from "@mui/material/Chip";
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 { SparkLineChart } from '@mui/x-charts/SparkLineChart'; import { SparkLineChart } from "@mui/x-charts/SparkLineChart";
import { areaElementClasses } from '@mui/x-charts/LineChart'; import { areaElementClasses } from "@mui/x-charts/LineChart";
export type StatCardProps = { export type StatCardProps = {
title: string; title: string;
value: string; value: string;
interval: string;
trend: 'up' | 'down' | 'neutral';
data: number[];
}; };
function getDaysInMonth(month: number, year: number) { export default function StatCard({ title, value }: StatCardProps) {
const date = new Date(year, month, 0); return (
const monthName = date.toLocaleDateString('en-US', { <Card
month: 'short', variant="outlined"
}); sx={{ height: "100%", backgroundColor: "#F2F2F2" }}
const daysInMonth = date.getDate(); >
const days = []; <CardContent>
let i = 1; <Typography
while (days.length < daysInMonth) { component="h2"
days.push(`${monthName} ${i}`); variant="subtitle2"
i += 1; color="#202020"
} gutterBottom
return days; >
} {title}
</Typography>
function AreaGradient({ color, id }: { color: string; id: string }) { <Typography
return ( component="h1"
<defs> variant="body1"
<linearGradient id={id} x1="50%" y1="0%" x2="50%" y2="100%"> color="#202020"
<stop offset="0%" stopColor={color} stopOpacity={0.3} /> fontSize={30}
<stop offset="100%" stopColor={color} stopOpacity={0} /> fontWeight={700}
</linearGradient> gutterBottom
</defs> >
); {value}
} </Typography>
</CardContent>
export default function StatCard({ </Card>
title, );
value,
interval,
trend,
data,
}: StatCardProps) {
const theme = useTheme();
const daysInWeek = getDaysInMonth(4, 2024);
const trendColors = {
up:
theme.palette.mode === 'light'
? theme.palette.success.main
: theme.palette.success.dark,
down:
theme.palette.mode === 'light'
? theme.palette.error.main
: theme.palette.error.dark,
neutral:
theme.palette.mode === 'light'
? theme.palette.grey[400]
: theme.palette.grey[700],
};
const labelColors = {
up: 'success' as const,
down: 'error' as const,
neutral: 'default' as const,
};
const color = labelColors[trend];
const chartColor = trendColors[trend];
const trendValues = { up: '+25%', down: '-25%', neutral: '+5%' };
return (
<Card variant="outlined" sx={{ height: '100%', flexGrow: 1 }}>
<CardContent>
<Typography component="h2" variant="subtitle2" gutterBottom>
{title}
</Typography>
<Stack
direction="column"
sx={{ justifyContent: 'space-between', flexGrow: '1', gap: 1 }}
>
<Stack sx={{ justifyContent: 'space-between' }}>
<Stack
direction="row"
sx={{ justifyContent: 'space-between', alignItems: 'center' }}
>
<Typography variant="h4" component="p">
{value}
</Typography>
<Chip size="small" color={color} label={trendValues[trend]} />
</Stack>
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
{interval}
</Typography>
</Stack>
<Box sx={{ width: '100%', height: 50 }}>
<SparkLineChart
colors={[chartColor]}
data={data}
area
showHighlight
showTooltip
xAxis={{
scaleType: 'band',
data: daysInWeek, // Use the correct property 'data' for xAxis
}}
sx={{
[`& .${areaElementClasses.root}`]: {
fill: `url(#area-gradient-${value})`,
},
}}
>
<AreaGradient color={chartColor} id={`area-gradient-${value}`} />
</SparkLineChart>
</Box>
</Stack>
</CardContent>
</Card>
);
} }

106
src/components/barChartCard/index.tsx Normal file
View file

@ -0,0 +1,106 @@
import * as React from "react";
import { useTheme } from "@mui/material/styles";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
} from "recharts";
import {
Card,
CardContent,
Typography,
Box,
} from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
const data = [
{ name: "Jan", v1: 40 },
{ name: "Feb", v1: 50 },
{ name: "Mar", v1: 80 },
{ name: "Apr", v1: 20 },
{ name: "May", v1: 60 },
{ name: "Jun", v1: 30 },
];
export default function RoundedBarChart() {
const theme = useTheme();
return (
<Card
variant="outlined"
sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
>
<CardContent>
<div
style={{
display: "flex",
alignItems: "center",
color: "#202020",
}}
>
<Typography
variant="h6"
align="left"
color="#202020"
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "18px",
lineHeight: "24px",
}}
>
Charge Stats
</Typography>
<Box
sx={{
mt: 2,
mb: 2,
backgroundColor: "#FFFFFF",
marginLeft: "auto",
marginRight: "16px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
p: 1.5,
borderRadius: "8px",
border: "1px solid #454545",
padding: "4px 8px",
color: "#202020",
}}
>
<Typography
sx={{
fontFamily: "Gilroy",
fontWeight: 500,
fontSize: "14px",
lineHeight: "24px",
color: "#202020",
p: "4px",
}}
>
Monthly
</Typography>
<ArrowDropDownIcon sx={{ color: "#202020" }} />
</Box>
</div>
<BarChart
width={600}
height={300}
data={data}
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
style={{ width: "100%", height: "auto" }}
>
<CartesianGrid vertical={false} />
<XAxis />
<YAxis tickFormatter={(value) => `${value}`} />
<Bar dataKey="v1" fill="skyblue" radius={[10, 10, 0, 0]} />
<Bar dataKey="v2" fill="skyblue" radius={[10, 10, 0, 0]} />
</BarChart>
</CardContent>
</Card>
);
}

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

@ -1,56 +1,72 @@
// src/common/components/Layout import * as React from "react";
import { Box, Stack } from "@mui/material";
import * as React from 'react'; import { Outlet } from "react-router-dom";
import { Box, Stack } from '@mui/material'; import SideMenu from "../../components/SideMenu";
import { Outlet } from 'react-router-dom'; import AppNavbar from "../../components/AppNavbar";
import SideMenu from '../../components/SideMenu'; import Header from "../../components/Header";
import AppNavbar from '../../components/AppNavbar'; import AppTheme from "../../shared-theme/AppTheme";
import Header from '../../components/Header';
import AppTheme from '../../shared-theme/AppTheme';
interface LayoutProps { interface LayoutProps {
customStyles?: React.CSSProperties; customStyles?: React.CSSProperties;
} }
const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => { const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
return ( return (
<AppTheme> <AppTheme>
<Box sx={{ display: 'flex' }}> <Box
<SideMenu /> sx={{
<AppNavbar /> display: "flex",
<Box height: "100vh",
component="main" flexDirection: { xs: "column", md: "row" },
sx={(theme) => ({ }}
display: "flex", >
height: '100vh', {/* SideMenu - Responsive, shown only on large screens */}
flexGrow: 1, <Box
backgroundColor: theme.vars sx={{
? `rgba(${theme.vars.palette.background.defaultChannel} / 1)` display: { xs: "none", md: "block" },
: theme.palette.background.default, width: 250,
overflow: 'auto', }}
...customStyles, >
})} <SideMenu />
> </Box>
<Stack
spacing={2}
sx={{
display: "flex",
flex: 1,
justifyItems: "center",
alignItems: 'center', {/* Navbar - Always visible */}
mx: 3, <AppNavbar />
pb: 5,
mt: { xs: 8, md: 0 }, <Box
}} component="main"
> sx={(theme) => ({
<Header /> display: "flex",
<Outlet /> flexDirection: "column",
</Stack> height: "100vh",
</Box> flexGrow: 1,
</Box> backgroundColor: theme.vars
</AppTheme> ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
); : theme.palette.background.default,
overflow: "auto",
...customStyles,
mt: { xs: 8, md: 0 },
})}
>
<Stack
spacing={2}
sx={{
display: "flex",
flex: 1,
justifyItems: "center",
alignItems: "center",
mx: 3,
pb: 5,
mt: { xs: 3, md: 0 },
}}
>
<Header />
<Outlet />
</Stack>
</Box>
</Box>
</AppTheme>
);
}; };
export default DashboardLayout; export default DashboardLayout;

281
src/pages/AddEditRolePage/index.tsx Normal file
View file

@ -0,0 +1,281 @@
import React, { useState } from "react";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Checkbox,
Typography,
Box,
Grid,
FormControlLabel,
Button,
TextField,
Snackbar,
} from "@mui/material";
import { useNavigate } from "react-router-dom"; // Import useNavigate
import { useDispatch, useSelector } from "react-redux";
import { createRole } from "../../redux/slices/roleSlice"; // Import the createRole action
import { AppDispatch, RootState } from "../../redux/store/store"; // Assuming this is the path to your store file
import { toast } from "sonner";
// Define the data structure for permission
interface Permission {
module: string;
list: boolean;
add: boolean;
edit: boolean;
view: boolean;
delete: boolean;
}
// Initial sample data
const initialPermissions: Permission[] = [
{
module: "User Management",
list: false,
add: false,
edit: false,
view: false,
delete: false,
},
{
module: "Role Management",
list: false,
add: false,
edit: false,
view: false,
delete: false,
},
// Add other modules as needed
];
// Table component
const AddEditRolePage: React.FC = () => {
const [permissions, setPermissions] =
useState<Permission[]>(initialPermissions);
const [roleName, setRoleName] = useState<string>("");
const [openSnackbar, setOpenSnackbar] = useState(false); // For snackbar (success message)
const navigate = useNavigate(); // Initialize useNavigate
const dispatch = useDispatch<AppDispatch>(); // Type the dispatch function with AppDispatch
const { loading } = useSelector(
(state: RootState) => state.roleReducer.roles
);
// Handle checkbox change
const handleCheckboxChange = (module: string, action: keyof Permission) => {
setPermissions((prevPermissions) =>
prevPermissions.map((perm) =>
perm.module === module
? { ...perm, [action]: !perm[action] }
: perm
)
);
};
// Handle role name input change
const handleRoleNameChange = (
event: React.ChangeEvent<HTMLInputElement>
) => {
setRoleName(event.target.value);
};
// Handle Back Navigation
const handleBack = () => {
navigate("/panel/role-list"); // Navigate back to Role List
};
// Handle form submission (adding role)
const handleSubmit = async () => {
if (!roleName.trim()) {
alert("Role name is required");
return;
}
const newRole = {
name: roleName,
resource: permissions.map((perm) => ({
moduleName: perm.module,
permissions: [
perm.list ? "list" : "",
perm.add ? "add" : "",
perm.edit ? "edit" : "",
perm.view ? "view" : "",
perm.delete ? "delete" : "",
].filter(Boolean),
moduleId: perm.module, // Assuming the module name can serve as the moduleId or use a unique id
})),
};
try {
// Dispatch the createRole action to create the new role
await dispatch(createRole(newRole));
// Show success message
toast.success("Role created successfully!");
setOpenSnackbar(true);
// Reset the form
setRoleName("");
setPermissions(initialPermissions);
navigate("/panel/role-list");
} catch (error) {
console.error("Error creating role:", error);
toast.error("Error creating role. Please try again.");
}
};
return (
<Box
sx={{ width: "100%", maxWidth: 1200, margin: "auto", mt: 4, px: 2 }}
>
{/* Title & Back Button Section */}
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#1976D2",
color: "#fff",
p: 2,
borderRadius: "8px",
mb: 2,
}}
>
<Typography variant="h6" fontWeight={600}>
Role Permissions
</Typography>
<Button
variant="contained"
color="secondary"
onClick={handleBack}
>
Back
</Button>
</Box>
{/* Role Name Input */}
<Box sx={{ mb: 2}}>
<label >Role Name</label>
<TextField
placeholder="Enter role name"
value={roleName}
onChange={handleRoleNameChange}
fullWidth
required
variant="outlined"
sx={{ mb: 2 ,mt:2}}
/>
</Box>
{/* Table Container */}
<TableContainer
component={Paper}
sx={{ borderRadius: "8px", overflow: "hidden" }}
>
<Table>
{/* Table Head */}
<TableHead>
<TableRow sx={{ backgroundColor: "#f5f5f5" }}>
<TableCell
sx={{ fontWeight: "bold", width: "30%" }}
>
Module Name
</TableCell>
<TableCell
sx={{ fontWeight: "bold", width: "70%" }}
>
<Typography>Actions</Typography>
</TableCell>
</TableRow>
</TableHead>
{/* Table Body */}
<TableBody>
{permissions.map((row, index) => (
<TableRow
key={index}
sx={{
"&:nth-of-type(odd)": {
backgroundColor: "#FAFAFA",
},
}}
>
<TableCell sx={{ fontWeight: 500 }}>
{row.module}
</TableCell>
<TableCell>
<Grid
container
spacing={1}
justifyContent="space-between"
>
{[
"list",
"add",
"edit",
"view",
"delete",
].map((action) => (
<Grid item key={action}>
<FormControlLabel
control={
<Checkbox
checked={
row[action]
}
onChange={() =>
handleCheckboxChange(
row.module,
action as keyof Permission
)
}
sx={{
color: "#1976D2",
}}
/>
}
label={
action
.charAt(0)
.toUpperCase() +
action.slice(1)
}
/>
</Grid>
))}
</Grid>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
{/* Submit Button */}
<Box sx={{ mt: 2, display: "flex", justifyContent: "flex-end" }}>
<Button
variant="contained"
color="primary"
onClick={handleSubmit}
disabled={loading}
>
{loading ? "Saving..." : "Save Role"}
</Button>
</Box>
{/* Snackbar for success message */}
<Snackbar
open={openSnackbar}
autoHideDuration={3000}
onClose={() => setOpenSnackbar(false)}
message="Role added successfully!"
/>
</Box>
);
};
export default AddEditRolePage;

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

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

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

@ -1,82 +1,43 @@
import * as React from "react"; import * as React from "react";
import Box from "@mui/material/Box"; import {
import Button from "@mui/material/Button"; Box,
import Checkbox from "@mui/material/Checkbox"; Button,
import CssBaseline from "@mui/material/CssBaseline"; Checkbox,
import FormControlLabel from "@mui/material/FormControlLabel"; FormControlLabel,
import Divider from "@mui/material/Divider"; FormLabel,
import FormLabel from "@mui/material/FormLabel"; FormControl,
import FormControl from "@mui/material/FormControl"; TextField,
import Link from "@mui/material/Link"; Typography,
import TextField from "@mui/material/TextField"; Grid,
import Typography from "@mui/material/Typography"; IconButton,
import Stack from "@mui/material/Stack"; Link,
import MuiCard from "@mui/material/Card"; } from "@mui/material";
import { styled } from "@mui/material/styles";
import { useForm, Controller, SubmitHandler } from "react-hook-form"; import { useForm, Controller, SubmitHandler } from "react-hook-form";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { loginUser } from "../../../redux/slices/authSlice.ts"; import { loginUser } from "../../../redux/slices/authSlice.ts";
import ColorModeSelect from "../../../shared-theme/ColorModeSelect.tsx";
import AppTheme from "../../../shared-theme/AppTheme.tsx"; import AppTheme from "../../../shared-theme/AppTheme.tsx";
import ForgotPassword from "./ForgotPassword.tsx"; import ForgotPassword from "./ForgotPassword.tsx";
import { toast } from "sonner"; import { toast } from "sonner";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Visibility, VisibilityOff } from "@mui/icons-material";
import { Card, SignInContainer } from "./styled.css.tsx";
const Card = styled(MuiCard)(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignSelf: "center",
width: "100%",
padding: theme.spacing(4),
gap: theme.spacing(2),
margin: "auto",
[theme.breakpoints.up("sm")]: {
maxWidth: "450px",
},
boxShadow:
"hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px",
...theme.applyStyles("dark", {
boxShadow:
"hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px",
}),
}));
const SignInContainer = styled(Stack)(({ theme }) => ({
height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
minHeight: "100%",
padding: theme.spacing(2),
[theme.breakpoints.up("sm")]: {
padding: theme.spacing(4),
},
"&::before": {
content: '""',
display: "block",
position: "absolute",
zIndex: -1,
inset: 0,
backgroundImage:
"radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))",
backgroundRepeat: "no-repeat",
...theme.applyStyles("dark", {
backgroundImage:
"radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))",
}),
},
}));
interface ILoginForm { interface ILoginForm {
email: string; email: string;
password: string; password: string;
} }
export default function Login(props: { disableCustomTheme?: boolean }) { export default function Login(props: { disableCustomTheme?: boolean }) {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const [showPassword, setShowPassword] = React.useState(false);
const { const {
control, control,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
setError,
} = useForm<ILoginForm>(); } = useForm<ILoginForm>();
const dispatch = useDispatch(); const dispatch = useDispatch();
const router = useNavigate(); const router = useNavigate();
const handleClickOpen = () => { const handleClickOpen = () => {
setOpen(true); setOpen(true);
}; };
@ -99,148 +60,287 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
return ( return (
<AppTheme {...props}> <AppTheme {...props}>
<CssBaseline enableColorScheme />
<SignInContainer direction="column" justifyContent="space-between"> <SignInContainer direction="column" justifyContent="space-between">
<ColorModeSelect <Grid container sx={{ height: "100vh" }}>
sx={{ position: "fixed", top: "1rem", right: "1rem" }} {/* Image Section */}
/> <Grid
<Card variant="outlined"> item
{/* <SitemarkIcon /> */} xs={0}
Digi-EV sm={0}
<Typography md={7}
component="h1"
variant="h4"
sx={{ sx={{
width: "100%", background: `url('/mainPageLogo.png') center/cover no-repeat`,
fontSize: "clamp(2rem, 10vw, 2.15rem)", height: { xs: "0%", sm: "0%", md: "100%" },
backgroundSize: "cover",
display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens
}} }}
> />
Sign in
</Typography> {/* Form Section */}
<Box <Grid
component="form" item
onSubmit={handleSubmit(onSubmit)} xs={12}
noValidate md={5}
sx={{ sx={{
backgroundColor: "black",
display: "flex", display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column", flexDirection: "column",
width: "100%", padding: { xs: "2rem", md: "3rem", lg: "3rem" },
gap: 2, height: "100%",
}} }}
> >
<FormControl> <Typography
<FormLabel htmlFor="email">Email</FormLabel> variant="h3"
<Controller sx={{
name="email" color: "white",
control={control} textAlign: "center",
defaultValue="" fontSize: {
rules={{ xs: "2rem",
required: "Email is required", sm: "2.2rem",
pattern: { md: "36px",
value: /\S+@\S+\.\S+/, },
message: }}
"Please enter a valid email address.",
},
}}
render={({ field }) => (
<TextField
{...field}
error={!!errors.email}
helperText={errors.email?.message}
id="email"
type="email"
placeholder="your@email.com"
autoComplete="email"
autoFocus
required
fullWidth
variant="outlined"
color={
errors.email ? "error" : "primary"
}
/>
)}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor="password">Password</FormLabel>
<Controller
name="password"
control={control}
defaultValue=""
rules={{
required: "Password is required",
minLength: {
value: 6,
message:
"Password must be at least 6 characters long.",
},
}}
render={({ field }) => (
<TextField
{...field}
error={!!errors.password}
helperText={errors.password?.message}
name="password"
placeholder="••••••"
type="password"
id="password"
autoComplete="current-password"
autoFocus
required
fullWidth
variant="outlined"
color={
errors.password
? "error"
: "primary"
}
/>
)}
/>
</FormControl>
<FormControlLabel
control={
<Checkbox value="remember" color="primary" />
}
label="Remember me"
/>
<ForgotPassword open={open} handleClose={handleClose} />
<Button type="submit" fullWidth variant="contained">
Sign in
</Button>
{/* <Link
component="button"
type="button"
onClick={handleClickOpen}
variant="body2"
sx={{ alignSelf: "center" }}
> >
Forgot your password? Welcome Back!
</Link> */}
</Box>
{/* <Divider>or</Divider>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 2,
}}
>
<Typography sx={{ textAlign: "center" }}>
Don&apos;t have an account?{" "}
<Link
href="/auth/signup"
variant="body2"
sx={{ alignSelf: "center" }}
>
Sign up
</Link>
</Typography> </Typography>
</Box> */}
</Card> <Card
variant="outlined"
sx={{
maxWidth: "400px",
width: { xs: "80%", sm: "80%", md: "100%" },
}}
>
<Box
component="form"
onSubmit={handleSubmit(onSubmit)}
noValidate
sx={{
display: "flex",
flexDirection: "column",
gap: 2,
}}
>
<Typography
component="h1"
variant="h4"
sx={{
textAlign: "center",
color: "white",
fontSize: { xs: "1.5rem", sm: "2rem" },
}}
>
Login
</Typography>
<Typography
component="h6"
variant="subtitle2"
sx={{
textAlign: "center",
color: "white",
fontSize: { xs: "0.9rem", sm: "1rem" },
}}
>
Log in with your email and password
</Typography>
<FormControl sx={{ width: "100%" }}>
<FormLabel
htmlFor="email"
sx={{
fontSize: {
xs: "0.9rem",
sm: "1rem",
},
color: "white",
}}
>
Email
</FormLabel>
<Controller
name="email"
control={control}
defaultValue=""
rules={{
required: "Email is required",
pattern: {
value: /\S+@\S+\.\S+/,
message:
"Please enter a valid email address.",
},
}}
render={({ field }) => (
<TextField
{...field}
error={!!errors.email}
helperText={
errors.email?.message
}
id="email"
type="email"
placeholder="Email"
autoComplete="email"
autoFocus
required
fullWidth
variant="outlined"
color={
errors.email
? "error"
: "primary"
}
sx={{
input: {
fontSize: {
xs: "0.9rem",
sm: "1rem",
},
},
}}
/>
)}
/>
</FormControl>
<FormControl sx={{ width: "100%" }}>
<FormLabel
htmlFor="password"
sx={{
fontSize: {
xs: "0.9rem",
sm: "1rem",
},
color: "white",
}}
>
Password
</FormLabel>
<Controller
name="password"
control={control}
defaultValue=""
rules={{
required: "Password is required",
minLength: {
value: 6,
message:
"Password must be at least 6 characters long.",
},
}}
render={({ field }) => (
<Box sx={{ position: "relative" }}>
<TextField
{...field}
error={!!errors.password}
helperText={
errors.password?.message
}
name="password"
placeholder="Password"
type={
showPassword
? "text"
: "password"
}
id="password"
autoComplete="current-password"
autoFocus
required
fullWidth
variant="outlined"
color={
errors.password
? "error"
: "primary"
}
/>
<IconButton
sx={{
position: "absolute",
top: "50%",
right: "10px",
background: "none",
borderColor:
"transparent",
transform:
"translateY(-50%)",
"&:hover": {
backgroundColor:
"transparent",
borderColor:
"transparent",
},
}}
onClick={() =>
setShowPassword(
(prev) => !prev
)
}
>
{showPassword ? (
<VisibilityOff />
) : (
<Visibility />
)}
</IconButton>
</Box>
)}
/>
</FormControl>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
color: "white",
}}
>
<FormControlLabel
control={
<Checkbox
value="remember"
color="primary"
/>
}
label="Remember me"
/>
<Link
component="button"
type="button"
onClick={handleClickOpen}
variant="body2"
sx={{
alignSelf: "center",
color: "#01579b",
}}
>
Forgot password?
</Link>
</Box>
<ForgotPassword
open={open}
handleClose={handleClose}
/>
<Button
type="submit"
fullWidth
sx={{
color: "white",
backgroundColor: "#52ACDF",
"&:hover": {
backgroundColor: "#52ACDF",
opacity: 0.9,
},
}}
>
Login
</Button>
</Box>
</Card>
</Grid>
</Grid>
</SignInContainer> </SignInContainer>
</AppTheme> </AppTheme>
); );

31
src/pages/Auth/Login/styled.css.tsx Normal file
View file

@ -0,0 +1,31 @@
import { styled} from "@mui/material/styles";
import {
Stack,
Card as MuiCard
} from "@mui/material";
// eslint-disable-next-line @typescript-eslint/no-redeclare, @typescript-eslint/no-unused-vars
export const Card = styled(MuiCard)(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignSelf: "center",
width: "100%",
padding: theme.spacing(4),
gap: theme.spacing(2),
margin: "16px",
backgroundColor: "#1E1F1F",
[theme.breakpoints.up("sm")]: {
maxWidth: "450px",
},
}));
export const SignInContainer = styled(Stack)(() => ({
height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)",
minHeight: "100%",
"&::before": {
content: '""',
display: "block",
position: "absolute",
zIndex: -1,
inset: 0,
},
}));

4
src/pages/Auth/SignUp/index.tsx
View file

@ -133,7 +133,7 @@ export default function SignUp(props: { disableCustomTheme?: boolean }) {
}; };
await dispatch(registerUser(payload)).unwrap(); await dispatch(registerUser(payload)).unwrap();
navigate("/auth/login"); navigate("/login");
toast.success("Registration successful!"); toast.success("Registration successful!");
} catch (error: any) { } catch (error: any) {
toast.error(error?.message || "Registration failed"); toast.error(error?.message || "Registration failed");
@ -347,7 +347,7 @@ export default function SignUp(props: { disableCustomTheme?: boolean }) {
<Typography sx={{ textAlign: "center" }}> <Typography sx={{ textAlign: "center" }}>
Already have an account? &nbsp; Already have an account? &nbsp;
<Link <Link
href="/auth/login" href="/login"
variant="body2" variant="body2"
sx={{ alignSelf: "center" }} sx={{ alignSelf: "center" }}
> >

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

@ -12,6 +12,7 @@ import {
import DashboardLayout from '../../layouts/DashboardLayout'; import DashboardLayout from '../../layouts/DashboardLayout';
import AppTheme from '../../shared-theme/AppTheme'; import AppTheme from '../../shared-theme/AppTheme';
import MainGrid from '../../components/MainGrid'; import MainGrid from '../../components/MainGrid';
import AdminList from '../AdminList';
const xThemeComponents = { const xThemeComponents = {
...chartsCustomizations, ...chartsCustomizations,
@ -29,26 +30,20 @@ const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) =>
<AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}> <AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
<CssBaseline enableColorScheme /> <CssBaseline enableColorScheme />
{!disableCustomTheme ? ( {!disableCustomTheme ? (
<MainGrid /> <><MainGrid /></>
) : ( ) : (
<Box <Box
sx={{ sx={{
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor:'#202020',
height: '100vh', height: '100vh',
textAlign: 'center', textAlign: 'center',
padding: 2, 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> </Box>
)} )}
</AppTheme> </AppTheme>
@ -56,3 +51,10 @@ const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) =>
}; };
export default Dashboard; export default Dashboard;

135
src/pages/PermissionTable/index.tsx Normal file
View file

@ -0,0 +1,135 @@
import React, { useState } from "react";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Checkbox,
Typography,
Box,
Grid,
FormControlLabel,
Button,
} from "@mui/material";
import { useNavigate } from "react-router-dom"; // Import useNavigate
// Define the data structure
interface Permission {
module: string;
list: boolean;
add: boolean;
edit: boolean;
view: boolean;
delete: boolean;
}
// Sample data
const initialPermissions: Permission[] = [
{ module: "Role & Permission", list: false, add: false, edit: false, view: false, delete: false },
{ module: "Staff", list: false, add: false, edit: false, view: false, delete: false },
{ module: "Manage Users", list: false, add: false, edit: false, view: false, delete: false },
{ module: "Business Type", list: false, add: false, edit: false, view: false, delete: false },
{ module: "Category", list: false, add: false, edit: false, view: false, delete: false },
{ module: "Orders", list: false, add: false, edit: false, view: false, delete: false },
{ module: "Discounts", list: false, add: false, edit: false, view: false, delete: false },
{ module: "Transaction History", list: false, add: false, edit: false, view: false, delete: false },
{ module: "Commission", list: false, add: false, edit: false, view: false, delete: false },
{ module: "Email Templates", list: false, add: false, edit: false, view: false, delete: false },
];
// Table component
const PermissionsTable: React.FC = () => {
const [permissions, setPermissions] = useState<Permission[]>(initialPermissions);
const navigate = useNavigate(); // Initialize useNavigate
// Handle checkbox change
const handleCheckboxChange = (module: string, action: keyof Permission) => {
setPermissions((prevPermissions) =>
prevPermissions.map((perm) =>
perm.module === module ? { ...perm, [action]: !perm[action] } : perm
)
);
};
// Handle Back Navigation
const handleBack = () => {
navigate("/panel/role-list"); // Navigate back to Role List
};
return (
<Box sx={{ width: "100%", maxWidth: 1200, margin: "auto", mt: 4, px: 2 }}>
{/* Title & Back Button Section */}
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#1976D2",
color: "#fff",
p: 2,
borderRadius: "8px",
mb: 2,
}}
>
<Typography variant="h6" fontWeight={600}>
Role Permissions
</Typography>
<Button variant="contained" color="secondary" onClick={handleBack}>
Back
</Button>
</Box>
{/* Table Container */}
<TableContainer component={Paper} sx={{ borderRadius: "8px", overflow: "hidden" }}>
<Table>
{/* Table Head */}
<TableHead>
<TableRow sx={{ backgroundColor: "#f5f5f5" }}>
<TableCell sx={{ fontWeight: "bold", width: "30%" }}>Module Name</TableCell>
<TableCell sx={{ fontWeight: "bold", width: "70%" }}>
<Typography>Actions</Typography>
</TableCell>
</TableRow>
</TableHead>
{/* Table Body */}
<TableBody>
{permissions.map((row, index) => (
<TableRow key={index} sx={{ "&:nth-of-type(odd)": { backgroundColor: "#FAFAFA" } }}>
{/* Module Name */}
<TableCell sx={{ fontWeight: 500 }}>{row.module}</TableCell>
{/* Action Checkboxes */}
<TableCell>
<Grid container spacing={1} justifyContent="space-between">
{(["list", "add", "edit", "view", "delete"] as (keyof Permission)[]).map(
(action) => (
<Grid item key={action}>
<FormControlLabel
control={
<Checkbox
checked={row[action]}
onChange={() => handleCheckboxChange(row.module, action)}
sx={{ color: "#1976D2" }}
/>
}
label={action.charAt(0).toUpperCase() + action.slice(1)}
/>
</Grid>
)
)}
</Grid>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
);
};
export default PermissionsTable;

6
src/pages/ProfilePage/index.tsx
View file

@ -56,9 +56,7 @@ const ProfilePage = () => {
<Grid container spacing={2} alignItems="center"> <Grid container spacing={2} alignItems="center">
<Grid item> <Grid item>
<Avatar <Avatar
//Eknoor singh
//date:- 12-Feb-2025
//user is called for name and email
alt={user?.name || "User Avatar"} alt={user?.name || "User Avatar"}
src={"/static/images/avatar/7.jpg"} src={"/static/images/avatar/7.jpg"}
sx={{ width: 80, height: 80 }} sx={{ width: 80, height: 80 }}
@ -75,7 +73,7 @@ const ProfilePage = () => {
Phone: {user?.phone || "N/A"} Phone: {user?.phone || "N/A"}
</Typography> </Typography>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
Role: <b>{user?.role || "N/A"}</b> Role: <b>{user?.userType || "N/A"}</b>
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>

162
src/pages/RoleList/index.tsx Normal file
View file

@ -0,0 +1,162 @@
import React, { useEffect, useState } from "react";
import { Box, Button, Typography, TextField, Chip } from "@mui/material";
import AddEditRoleModal from "../../components/AddEditRoleModal";
import PermissionsTable from "../../pages/PermissionTable";
import { useForm } from "react-hook-form";
import CustomTable, { Column } from "../../components/CustomTable";
import { useDispatch, useSelector } from "react-redux";
import {
createRole,
roleList,
toggleStatus,
} from "../../redux/slices/roleSlice";
import { AppDispatch, RootState } from "../../redux/store/store";
import { useNavigate } from "react-router-dom";
import AddEditRolePage from "../AddEditRolePage";
import SearchIcon from "@mui/icons-material/Search";
export default function RoleList() {
const [modalOpen, setModalOpen] = useState(false);
const { reset } = useForm();
const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
const [viewModal, setViewModal] = React.useState<boolean>(false);
const [rowData, setRowData] = React.useState<any | null>(null);
const [searchTerm, setSearchTerm] = useState("");
const [showPermissions, setShowPermissions] = useState(false);
const dispatch = useDispatch<AppDispatch>();
const navigate = useNavigate();
const roles = useSelector((state: RootState) => state.roleReducer.roles);
useEffect(() => {
dispatch(roleList());
}, [dispatch]);
const handleClickOpen = () => {
navigate("/panel/permissions"); // Navigate to the correct route
};
const handleCloseModal = () => {
setModalOpen(false);
setRowData(null);
reset();
};
const handleStatusToggle = (id: string, newStatus: number) => {
dispatch(toggleStatus({ id, status: newStatus }));
};
const handleCreate = async (data: {
name: string;
resource: {
moduleName: string;
moduleId: string;
permissions: string[];
}[];
}) => {
try {
await dispatch(createRole(data));
await dispatch(roleList()); // 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: "status", label: "Status" },
{ id: "action", label: "Action", align: "center" },
];
const filterRoles = roles?.filter((role) =>
role.name.toLocaleLowerCase().includes(searchTerm.toLowerCase())
);
const categoryRows = filterRoles?.length
? filterRoles?.map((role: Role, index: number) => ({
id: role.id,
srno: index + 1,
name: role.name,
status: (
<Chip
label={role.status === 1 ? "Active" : "Inactive"}
color={role.status === 1 ? "primary" : "default"}
variant="outlined"
sx={{
fontWeight: 600,
width: "80px",
textAlign: "center",
borderRadius: "4px",
}}
/>
),
statusValue: role.status,
}))
: [];
return (
<>
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: { xs: "column", sm: "row" },
justifyContent: "space-between",
alignItems: "center",
mb: 2,
}}
>
<TextField
variant="outlined"
size="small"
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
sx={{
width: { xs: "100%", sm: "30%" },
marginBottom: { xs: 2, sm: 0 },
}}
InputProps={{
startAdornment: (
<SearchIcon
sx={{ color: "#202020", marginRight: 1 }}
/>
),
}}
/>
<Button
variant="contained"
size="small"
onClick={handleClickOpen}
sx={{
textAlign: "center",
width: { xs: "100%", sm: "auto" },
}}
>
Add Role
</Button>
</Box>
{showPermissions ? (
<AddEditRolePage />
) : (
<CustomTable
columns={categoryColumns}
rows={categoryRows || []}
setDeleteModal={setDeleteModal}
deleteModal={deleteModal}
setViewModal={setViewModal}
viewModal={viewModal}
setRowData={setRowData}
setModalOpen={setModalOpen}
handleStatusToggle={handleStatusToggle}
tableType="roleList"
/>
)}
</>
);
}

1095
src/pages/UserList/index.tsx
View file

File diff suppressed because it is too large Load diff

10
src/redux/reducers.ts
View file

@ -4,12 +4,14 @@ import authReducer from "./slices/authSlice";
import adminReducer from "./slices/adminSlice"; import adminReducer from "./slices/adminSlice";
import profileReducer from "./slices/profileSlice"; import profileReducer from "./slices/profileSlice";
import userReducer from "./slices/userSlice.ts"; import userReducer from "./slices/userSlice.ts";
import roleReducer from "./slices/roleSlice.ts";
const rootReducer = combineReducers({ const rootReducer = combineReducers({
authReducer, authReducer,
adminReducer, adminReducer,
profileReducer, profileReducer,
userReducer, userReducer,
roleReducer,
}); });
export type RootState = ReturnType<typeof rootReducer>; export type RootState = ReturnType<typeof rootReducer>;

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

@ -37,7 +37,7 @@ export const adminList = createAsyncThunk<
{ rejectValue: string } { rejectValue: string }
>("FetchAdminList", async (_, { rejectWithValue }) => { >("FetchAdminList", async (_, { rejectWithValue }) => {
try { try {
const response = await http.get("auth/admin-list"); const response = await http.get("/admin-list");
return response?.data?.data; return response?.data?.data;
} catch (error: any) { } catch (error: any) {
toast.error("Error fetching users list" + error); toast.error("Error fetching users list" + error);
@ -55,7 +55,7 @@ export const deleteAdmin = createAsyncThunk<
{ rejectValue: string } { rejectValue: string }
>("deleteAdmin", async (id, { rejectWithValue }) => { >("deleteAdmin", async (id, { rejectWithValue }) => {
try { try {
const response = await http.delete(`auth/${id}/delete-admin`); const response = await http.delete(`/${id}/delete-admin`);
toast.success(response.data?.message); toast.success(response.data?.message);
return id; return id;
} catch (error: any) { } catch (error: any) {
@ -76,9 +76,9 @@ export const createAdmin = createAsyncThunk<
registeredAddress: string; registeredAddress: string;
}, },
{ rejectValue: string } { rejectValue: string }
>("auth/signup", async (data, { rejectWithValue }) => { >("/create-admin", async (data, { rejectWithValue }) => {
try { try {
const response = await http.post("auth/create-admin", data); const response = await http.post("/create-admin", data);
return response.data; return response.data;
} catch (error: any) { } catch (error: any) {
return rejectWithValue( return rejectWithValue(
@ -92,10 +92,7 @@ export const updateAdmin = createAsyncThunk(
"updateAdmin", "updateAdmin",
async ({ id, ...userData }: User, { rejectWithValue }) => { async ({ id, ...userData }: User, { rejectWithValue }) => {
try { try {
const response = await http.put( const response = await http.put(`/${id}/update-admin`, userData);
`auth/${id}/update-admin`,
userData
);
toast.success("Admin updated successfully"); toast.success("Admin updated successfully");
return response?.data; return response?.data;
} catch (error: any) { } catch (error: any) {

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

@ -75,7 +75,7 @@ export const registerUser = createAsyncThunk<
{ rejectValue: string } { rejectValue: string }
>("SignUpUser", async (data, { rejectWithValue }) => { >("SignUpUser", async (data, { rejectWithValue }) => {
try { try {
const response = await http.post("auth/signup", data); const response = await http.post("/signup", data);
return response.data; return response.data;
} catch (error: any) { } catch (error: any) {
return rejectWithValue( return rejectWithValue(

2
src/redux/slices/profileSlice.ts
View file

@ -7,7 +7,7 @@ interface User {
id: string; id: string;
name: string; name: string;
email: string; email: string;
role: string; userType: string;
phone: string; phone: string;
} }

193
src/redux/slices/roleSlice.ts Normal file
View file

@ -0,0 +1,193 @@
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios";
import http from "../../lib/https";
import { toast } from "sonner";
// Define TypeScript types
interface Role {
id: string;
name: string;
resource: {
moduleName: string;
moduleId: string;
permissions: string[];
}[];
status: number;
}
interface RoleState {
roles: Role[];
loading: boolean;
error: string | null;
}
// Initial state
const initialState: RoleState = {
roles: [],
loading: false,
error: null,
};
export const roleList = createAsyncThunk<any, void, { rejectValue: string }>(
"fetchRoles",
async (_, { rejectWithValue }) => {
try {
const token = localStorage?.getItem("authToken");
if (!token) throw new Error("No token found");
const response = await http.get("get");
if (!response.data) throw new Error("Invalid API response");
// Return the full response to handle in the reducer
return response.data;
} catch (error: any) {
toast.error("Error Fetching Roles: " + error.message);
return rejectWithValue(
error?.response?.data?.message || "An error occurred"
);
}
}
);
// Create Role
export const createRole = createAsyncThunk<
any,
{
name: string;
resource: {
moduleName: string;
moduleId: string;
permissions: string[];
}[];
},
{ rejectValue: string }
>("role/createRole", async (data, { rejectWithValue }) => {
try {
const response = await http.post("create", data);
toast.success("Role created successfully");
return response.data;
} catch (error: any) {
toast.error(
"Failed to create role: " +
(error.response?.data?.message || "Unknown error")
);
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
}
});
export const toggleStatus = createAsyncThunk<
any,
{ id: string; status: number },
{ rejectValue: string }
>("role/toggleStatus", async ({ id, status }, { rejectWithValue }) => {
try {
const response = await http.patch(`${id}`, { status });
if (response.data.statusCode === 200) {
toast.success(
response.data.message || "Status updated successfully"
);
// Return both the response data and the requested status for reliable state updates
return {
responseData: response.data,
id,
status,
};
} else {
throw new Error(response.data.message || "Failed to update status");
}
} catch (error: any) {
toast.error(
"Error updating status: " + (error.message || "Unknown error")
);
return rejectWithValue(
error.response?.data?.message ||
error.message ||
"An error occurred"
);
}
});
const roleSlice = createSlice({
name: "roles",
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(roleList.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(
roleList.fulfilled,
(state, action: PayloadAction<any>) => {
state.loading = false;
// Properly extract roles from the response data structure
state.roles =
action.payload.data?.results ||
action.payload.data ||
[];
}
)
.addCase(roleList.rejected, (state, action) => {
state.loading = false;
state.error = action.payload || "Failed to fetch roles";
})
.addCase(createRole.pending, (state) => {
state.loading = true;
})
.addCase(
createRole.fulfilled,
(state, action: PayloadAction<any>) => {
state.loading = false;
// Add the newly created role to the state if it exists in the response
if (action.payload.data) {
state.roles.push(action.payload.data);
}
}
)
.addCase(
createRole.rejected,
(state, action: PayloadAction<string | undefined>) => {
state.loading = false;
state.error = action.payload || "Failed to create role";
}
)
.addCase(toggleStatus.pending, (state) => {
state.loading = true;
})
.addCase(
toggleStatus.fulfilled,
(state, action: PayloadAction<any>) => {
state.loading = false;
// Get the id and updated status from the action payload
const { id, status } = action.payload;
// Find and update the role with the new status
const roleIndex = state.roles.findIndex(
(role) => role.id === id
);
if (roleIndex !== -1) {
state.roles[roleIndex] = {
...state.roles[roleIndex],
status: status,
};
}
}
)
.addCase(
toggleStatus.rejected,
(state, action: PayloadAction<string | undefined>) => {
state.loading = false;
state.error =
action.payload || "Failed to toggle role status";
}
);
},
});
export default roleSlice.reducer;

92
src/redux/slices/userSlice.ts
View file

@ -1,5 +1,7 @@
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit"; import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios"; import axios from "axios";
import http from "../../lib/https";
import { toast } from "sonner";
// Define TypeScript types // Define TypeScript types
interface User { interface User {
@ -7,9 +9,10 @@ interface User {
name: string; name: string;
email: string; email: string;
phone?: string; phone?: string;
location?: string; // location?: string;
managerAssigned?: string; // managerAssigned?: string;
vehicle?: string; // vehicle?: string;
password:string;
} }
interface UserState { interface UserState {
@ -26,17 +29,62 @@ const initialState: UserState = {
}; };
// Async thunk to fetch user list // Async thunk to fetch user list
export const userList = createAsyncThunk<User[]>("users/fetchUsers", async () => { // export const userList = createAsyncThunk<User[]>("users/fetchUsers", async () => {
// try {
// const response = await axios.get<User[]>("/api/users"); // Adjust the API endpoint as needed
// return response.data;
// } catch (error: any) {
// throw new Error(error.response?.data?.message || "Failed to fetch users");
// }
// });
export const userList = createAsyncThunk<User, void, { rejectValue: string }>(
"fetchUsers",
async (_, { rejectWithValue }) => {
try {
const token = localStorage?.getItem("authToken");
if (!token) throw new Error("No token found");
const response = await http.get("users-list");
if (!response.data?.data) throw new Error("Invalid API response");
return response.data.data;
} catch (error: any) {
toast.error("Error Fetching Profile" + error);
return rejectWithValue(
error?.response?.data?.message || "An error occurred"
);
}
}
);
//Create User
export const createUser = createAsyncThunk<
User,
{
name: string;
email: string;
password: string;
phone: string;
// location?: string;
// managerAssigned?: string;
// vehicle?: string;
},
{ rejectValue: string }
>("/CreateUser", async (data, { rejectWithValue }) => {
try { try {
const response = await axios.get<User[]>("/api/users"); // Adjust the API endpoint as needed const response = await http.post("create-user", data);
return response.data; return response.data;
} catch (error: any) { } catch (error: any) {
throw new Error(error.response?.data?.message || "Failed to fetch users"); return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
} }
}); });
const userSlice = createSlice({ const userSlice = createSlice({
name: "users", name: "fetchUsers",
initialState, initialState,
reducers: {}, reducers: {},
extraReducers: (builder) => { extraReducers: (builder) => {
@ -45,14 +93,34 @@ const userSlice = createSlice({
state.loading = true; state.loading = true;
state.error = null; state.error = null;
}) })
.addCase(userList.fulfilled, (state, action: PayloadAction<User[]>) => { .addCase(
state.loading = false; userList.fulfilled,
state.users = action.payload; (state, action: PayloadAction<User[]>) => {
}) state.loading = false;
state.users = action.payload;
}
)
.addCase(userList.rejected, (state, action) => { .addCase(userList.rejected, (state, action) => {
state.loading = false; state.loading = false;
state.error = action.error.message || "Failed to fetch users"; state.error = action.error.message || "Failed to fetch users";
}); })
.addCase(createUser.pending, (state) => {
state.loading = true;
// state.error = null;
})
.addCase(
createUser.fulfilled,
(state, action: PayloadAction<User>) => {
state.loading = false;
state.users.push(action.payload);
}
)
.addCase(
createUser.rejected,
(state, action: PayloadAction<string | undefined>) => {
state.loading = false;
}
);
}, },
}); });

30
src/router.tsx
View file

@ -2,6 +2,8 @@ import { Routes as BaseRoutes, Navigate, Route } from "react-router-dom";
import React, { lazy, Suspense } from "react"; import React, { lazy, Suspense } from "react";
import LoadingComponent from "./components/Loading"; import LoadingComponent from "./components/Loading";
import DashboardLayout from "./layouts/DashboardLayout"; import DashboardLayout from "./layouts/DashboardLayout";
import RoleList from "./pages/RoleList";
import AddEditRolePage from "./pages/AddEditRolePage";
// Page imports // Page imports
const Login = lazy(() => import("./pages/Auth/Login")); const Login = lazy(() => import("./pages/Auth/Login"));
@ -12,6 +14,7 @@ const AdminList = lazy(() => import("./pages/AdminList"));
const ProfilePage = lazy(() => import("./pages/ProfilePage")); const ProfilePage = lazy(() => import("./pages/ProfilePage"));
const NotFoundPage = lazy(() => import("./pages/NotFound")); const NotFoundPage = lazy(() => import("./pages/NotFound"));
const UserList = lazy(() => import("./pages/UserList")); const UserList = lazy(() => import("./pages/UserList"));
const PermissionsTable = lazy(() => import("./pages/PermissionTable"));
interface ProtectedRouteProps { interface ProtectedRouteProps {
caps: string[]; caps: string[];
@ -21,7 +24,7 @@ interface ProtectedRouteProps {
// Protected Route Component // Protected Route Component
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ caps, component }) => { const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ caps, component }) => {
if (!localStorage.getItem("authToken")) { if (!localStorage.getItem("authToken")) {
return <Navigate to="/auth/login" replace />; return <Navigate to="/login" replace />;
} }
return component; return component;
}; };
@ -32,13 +35,13 @@ export default function AppRouter() {
<Suspense fallback={<LoadingComponent />}> <Suspense fallback={<LoadingComponent />}>
<BaseRoutes> <BaseRoutes>
{/* Default Route */} {/* Default Route */}
<Route element={<Navigate to="/auth/login" replace />} index /> <Route element={<Navigate to="/login" replace />} index />
{/* Auth Routes */} {/* Auth Routes */}
<Route path="/auth"> <Route path="">
<Route <Route
path="" path=""
element={<Navigate to="/auth/login" replace />} element={<Navigate to="/login" replace />}
index index
/> />
<Route path="login" element={<Login />} /> <Route path="login" element={<Login />} />
@ -83,7 +86,24 @@ export default function AppRouter() {
/> />
} }
/> />
<Route
path="role-list"
element={
<ProtectedRoute
caps={[]}
component={<RoleList />}
/>
}
/>
<Route
path="permissions"
element={
<ProtectedRoute
caps={[]}
component={<AddEditRolePage />}
/>
}
/>
<Route <Route
path="profile" path="profile"
element={ element={