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

Implementation-of-Profile-Api-And-SuperAdmin-Specification

Browse source
This commit is contained in:
jaanvi 2025-02-13 10:11:14 +05:30
parent 7de0799b02
commit ba2945a3e5
11 changed files with 806 additions and 463 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,193 +1,225 @@
import * as React from "react"; import * as React from "react"
import { styled } from "@mui/material/styles"; import { styled } from "@mui/material/styles"
import Table from "@mui/material/Table"; import Table from "@mui/material/Table"
import TableBody from "@mui/material/TableBody"; import TableBody from "@mui/material/TableBody"
import TableCell, { tableCellClasses } from "@mui/material/TableCell"; import TableCell, { tableCellClasses } from "@mui/material/TableCell"
import TableContainer from "@mui/material/TableContainer"; import TableContainer from "@mui/material/TableContainer"
import TableHead from "@mui/material/TableHead"; import TableHead from "@mui/material/TableHead"
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow"
import Paper, { paperClasses } from "@mui/material/Paper"; import Paper, { paperClasses } from "@mui/material/Paper"
import { deleteAdmin } from "../../redux/slices/authSlice"
import { useDispatch } from "react-redux"
import { import {
Box, Box,
Button, Button,
dividerClasses, dividerClasses,
IconButton, IconButton,
listClasses, listClasses,
Menu, Menu,
} from "@mui/material"; } from "@mui/material"
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"; import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"
import DeleteModal from "../Modals/DeleteModal/DeleteModal"
import { AppDispatch } from "../../redux/store/store"
// Styled components for customization // Styled components for customization
const StyledTableCell = styled(TableCell)(({ theme }) => ({ const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: { [`&.${tableCellClasses.head}`]: {
backgroundColor: " #1565c0", backgroundColor: " #1565c0",
color: theme.palette.common.white, color: theme.palette.common.white,
}, },
[`&.${tableCellClasses.body}`]: { [`&.${tableCellClasses.body}`]: {
fontSize: 14, fontSize: 14,
}, },
})); }))
const StyledTableRow = styled(TableRow)(({ theme }) => ({ const StyledTableRow = styled(TableRow)(({ theme }) => ({
"&:nth-of-type(odd)": { "&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover, backgroundColor: theme.palette.action.hover,
}, },
"&:last-child td, &:last-child th": { "&:last-child td, &:last-child th": {
border: 0, border: 0,
}, },
})); }))
interface Column { export interface Column {
id: string; id: string
label: string; label: string
align?: "left" | "center" | "right"; align?: "left" | "center" | "right"
} }
interface Row { interface Row {
[key: string]: any; [key: string]: any
} }
interface CustomTableProps { interface CustomTableProps {
columns: Column[]; columns: Column[]
rows: Row[]; rows: Row[]
setDeleteModal: Function; setDeleteModal: Function
setRowData: Function; setRowData: Function
setModalOpen: Function; setModalOpen: Function
deleteModal: boolean
} }
const CustomTable: React.FC<CustomTableProps> = ({ const CustomTable: React.FC<CustomTableProps> = ({
columns, columns,
rows, rows,
setDeleteModal, setDeleteModal,
setRowData, deleteModal,
setModalOpen, setRowData,
setModalOpen,
}) => { }) => {
console.log("columnsss", columns, rows); // console.log("columnsss", columns, rows)
const dispatch = useDispatch<AppDispatch>()
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
const [selectedRow, setSelectedRow] = React.useState<Row | null>(null)
const open = Boolean(anchorEl)
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
const open = Boolean(anchorEl); setAnchorEl(event.currentTarget)
const handleClick = (event: React.MouseEvent<HTMLElement>) => { setSelectedRow(row) // Ensure the row data is set
setAnchorEl(event.currentTarget); }
};
const handleClose = () => {
setAnchorEl(null);
};
const isImage = (value: any) => { const handleClose = () => {
if (typeof value === "string") { setAnchorEl(null)
return value.startsWith("http") || value.startsWith("data:image"); // Check for URL or base64 image }
}
return false;
};
return ( const isImage = (value: any) => {
<TableContainer component={Paper}> if (typeof value === "string") {
<Table sx={{ minWidth: 700 }} aria-label="customized table"> return value.startsWith("http") || value.startsWith("data:image") // Check for URL or base64 image
<TableHead> }
<TableRow> return false
{columns.map((column) => ( }
<StyledTableCell
key={column.id}
align={column.align || "left"}
>
{column.label}
</StyledTableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
>
{isImage(row[column.id]) ? (
<img
src={row[column.id]}
alt="Row "
style={{
width: "50px",
height: "50px",
objectFit: "cover",
}}
/>
) : column.id !== "action" ? (
row[column.id]
) : (
<IconButton
onClick={(e) => {
handleClick(e);
setRowData(row);
}}
>
<MoreVertRoundedIcon />
</IconButton>
)}
</StyledTableCell>
))}
</StyledTableRow>
))}
</TableBody>
</Table>
{open && (
<Menu
anchorEl={anchorEl}
id="menu"
open={open}
onClose={handleClose}
onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{
[`& .${listClasses.root}`]: {
padding: "4px",
},
[`& .${paperClasses.root}`]: {
padding: 0,
},
[`& .${dividerClasses.root}`]: {
margin: "4px -4px",
},
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
}}
>
<Button
variant="text"
onClick={() => setModalOpen(true)}
color="primary"
sx={{
justifyContent: "flex-start",
py: 0,
textTransform: "capitalize",
}}
>
Edit
</Button>
<Button
variant="text"
onClick={() => setDeleteModal(true)}
color="error"
sx={{
justifyContent: "flex-start",
py: 0,
textTransform: "capitalize",
}}
>
Delete
</Button>
</Box>
</Menu>
)}
</TableContainer>
);
};
export default CustomTable; const handleDeleteButton = (id: string | undefined) => {
if (!id) console.error("ID not found", id)
dispatch(deleteAdmin(id || ""))
setDeleteModal(false) // Close the modal only after deletion
handleClose()
}
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 700 }} aria-label="customized table">
<TableHead>
<TableRow>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
>
{column.label}
</StyledTableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
>
{isImage(row[column.id]) ? (
<img
src={row[column.id]}
alt="Row "
style={{
width: "50px",
height: "50px",
objectFit: "cover",
}}
/>
) : column.id !== "action" ? (
row[column.id]
) : (
<IconButton
onClick={(e) => {
handleClick(e, row)
setRowData(row) // Store the selected row
}}
>
<MoreVertRoundedIcon />
</IconButton>
)}
</StyledTableCell>
))}
</StyledTableRow>
))}
</TableBody>
</Table>
{open && (
<Menu
anchorEl={anchorEl}
id="menu"
open={open}
onClose={handleClose}
onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{
[`& .${listClasses.root}`]: {
padding: "4px",
},
[`& .${paperClasses.root}`]: {
padding: 0,
},
[`& .${dividerClasses.root}`]: {
margin: "4px -4px",
},
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
}}
>
<Button
variant="text"
onClick={() => setModalOpen(true)}
color="primary"
sx={{
justifyContent: "flex-start",
py: 0,
textTransform: "capitalize",
}}
>
Edit
</Button>
<Button
variant="text"
onClick={(e) => {
e.stopPropagation()
setDeleteModal(true)
}}
color="error"
sx={{
justifyContent: "flex-start",
py: 0,
textTransform: "capitalize",
}}
>
Delete
</Button>
{deleteModal && (
<DeleteModal
handleDelete={() =>
handleDeleteButton(selectedRow?.id)
}
open={deleteModal}
setDeleteModal={setDeleteModal}
id={selectedRow?.id}
/>
)}
</Box>
</Menu>
)}
</TableContainer>
)
}
export default CustomTable

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

@ -1,76 +1,95 @@
import List from '@mui/material/List'; import List from "@mui/material/List";
import ListItem from '@mui/material/ListItem'; import ListItem from "@mui/material/ListItem";
import ListItemButton from '@mui/material/ListItemButton'; import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from '@mui/material/ListItemText'; import ListItemText from "@mui/material/ListItemText";
import Stack from '@mui/material/Stack'; import Stack from "@mui/material/Stack";
import HomeRoundedIcon from '@mui/icons-material/HomeRounded'; import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
import AnalyticsRoundedIcon from '@mui/icons-material/AnalyticsRounded'; import AnalyticsRoundedIcon from "@mui/icons-material/AnalyticsRounded";
import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import { RootState } from "../../redux/store/store";
const mainListItems = [ const baseMenuItems = [
{ {
text: 'Home', text: "Home",
icon: <HomeRoundedIcon />, icon: <HomeRoundedIcon />,
url: '/panel/dashboard', url: "/panel/dashboard",
}, },
{ {
text: 'Vehicles', text: "Vehicles",
icon: <AnalyticsRoundedIcon />, icon: <AnalyticsRoundedIcon />,
url: '/panel/vehicles', url: "/panel/vehicles",
}, },
//created by Eknnor and Jaanvi //created by Eknnor and Jaanvi
{ ];
text: 'Admin List',
icon: <FormatListBulletedIcon />, //Eknoor singh and Jaanvi
url: '/panel/adminlist', //date:- 12-Feb-2025
}, //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;
}; };
export default function MenuContent({ hidden }: PropType) { export default function MenuContent({ hidden }: PropType) {
const location = useLocation(); const location = useLocation();
const userRole = useSelector((state: RootState) => state.auth.user?.role);
return ( const mainListItems = [
<Stack sx={{ flexGrow: 1, p: 1, justifyContent: 'space-between' }}> ...baseMenuItems,
<List dense> ...(userRole === "superadmin" ? superAdminOnlyItems : []),
{mainListItems.map((item, index) => ( ];
<ListItem key={index} disablePadding sx={{ display: 'block', py: 1 }}>
{/* Wrap ListItemButton with Link to enable routing */} return (
<ListItemButton <Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
component={Link} <List dense>
to={item.url} {mainListItems.map((item, index) => (
selected={item.url === location.pathname} <ListItem
sx={{ alignItems: 'center', columnGap: 1 }} key={index}
> disablePadding
<ListItemIcon sx={{ display: "block", py: 1 }}
sx={{ >
minWidth: 'fit-content', {/* Wrap ListItemButton with Link to enable routing */}
'.MuiSvgIcon-root': { <ListItemButton
fontSize: 24, component={Link}
}, to={item.url}
}} selected={item.url === location.pathname}
> sx={{ alignItems: "center", columnGap: 1 }}
{item.icon} >
</ListItemIcon> <ListItemIcon
<ListItemText sx={{
sx={{ minWidth: "fit-content",
display: !hidden ? 'none' : '', ".MuiSvgIcon-root": {
transition: 'all 0.5s ease', fontSize: 24,
'.MuiListItemText-primary': { },
fontSize: '16px', }}
}, >
}} {item.icon}
primary={item.text} </ListItemIcon>
/> <ListItemText
</ListItemButton> sx={{
</ListItem> display: !hidden ? "none" : "",
))} transition: "all 0.5s ease",
</List> ".MuiListItemText-primary": {
</Stack> fontSize: "16px",
); },
}}
primary={item.text}
/>
</ListItemButton>
</ListItem>
))}
</List>
</Stack>
);
} }

139
src/components/Modals/DeleteModal/DeleteModal.tsx
View file

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

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

@ -11,11 +11,13 @@ import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"; import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
import MenuButton from "../MenuButton"; import MenuButton from "../MenuButton";
import { Avatar } from "@mui/material"; import { Avatar } from "@mui/material";
import { useNavigate } from "react-router-dom";
const MenuItem = styled(MuiMenuItem)({ const MenuItem = styled(MuiMenuItem)({
margin: "2px 0", margin: "2px 0",
}); });
export default function OptionsMenu({ avatar }: { avatar?: boolean }) { export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
@ -25,6 +27,10 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
const handleClose = () => { const handleClose = () => {
setAnchorEl(null); setAnchorEl(null);
}; };
const navigate = useNavigate();
const handleProfile = () =>{
navigate("/auth/profile");
}
return ( return (
<React.Fragment> <React.Fragment>
<MenuButton <MenuButton
@ -63,7 +69,9 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
}, },
}} }}
> >
<MenuItem onClick={handleClose}>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>

190
src/components/SideMenu/index.tsx
View file

@ -1,93 +1,113 @@
import { styled } from '@mui/material/styles'; import { styled } from "@mui/material/styles";
import Avatar from '@mui/material/Avatar'; import Avatar from "@mui/material/Avatar";
import MuiDrawer, { drawerClasses } from '@mui/material/Drawer'; import MuiDrawer, { drawerClasses } from "@mui/material/Drawer";
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 MenuContent from '../MenuContent'; import MenuContent from "../MenuContent";
import OptionsMenu from '../OptionsMenu'; import OptionsMenu from "../OptionsMenu";
import React from 'react'; import React, { useEffect } from "react";
import { ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers'; import { ArrowLeftIcon, ArrowRightIcon } from "@mui/x-date-pickers";
import { Button } from '@mui/material'; import { Button } from "@mui/material";
import { fetchProfile } from "../../redux/slices/authSlice";
import { AppDispatch } from "../../redux/store/store";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../redux/reducers";
const drawerWidth = 240; const drawerWidth = 240;
const Drawer = styled(MuiDrawer)({ const Drawer = styled(MuiDrawer)({
width: drawerWidth, width: drawerWidth,
flexShrink: 0, flexShrink: 0,
boxSizing: 'border-box', boxSizing: "border-box",
mt: 10, mt: 10,
[`& .${drawerClasses.paper}`]: { [`& .${drawerClasses.paper}`]: {
width: drawerWidth, width: drawerWidth,
boxSizing: 'border-box', boxSizing: "border-box",
}, },
}); });
export default function SideMenu() { export default function SideMenu() {
const [open, setOpen] = React.useState(true); const [open, setOpen] = React.useState(true);
return (
<Drawer const dispatch = useDispatch<AppDispatch>();
open={open}
variant="permanent" //Created by : jaanvi and Eknoor
anchor="left" //date: 12-feb-25
sx={{ //Extract user profile data from Auth
display: { const { user } = useSelector((state: RootState) => state.auth);
xs: 'none',
md: 'block', useEffect(() => {
width: open ? 220 : 80, // Dispatch the fetchProfile thunk to fetch user profile data
transition: 'all 0.5s ease', dispatch(fetchProfile());
}, }, [dispatch]);
[`& .${drawerClasses.paper}`]: {
backgroundColor: 'background.paper', return (
width: open ? 220 : 80, <Drawer
transition: 'all 0.5s ease', open={open}
}, variant="permanent"
}} anchor="left"
> sx={{
<Box display: {
sx={{ xs: "none",
display: 'flex', md: "block",
justifyContent: open ? 'flex-end' : 'center', width: open ? 250 : 80,
alignItems: 'center', transition: "all 0.5s ease",
pt: 1.5, },
textAlign: 'center', [`& .${drawerClasses.paper}`]: {
}} backgroundColor: "background.paper",
> width: open ? 250 : 80,
<Button variant="text" onClick={() => setOpen(!open)}> transition: "all 0.5s ease",
{open ? <ArrowLeftIcon /> : <ArrowRightIcon />} },
</Button> }}
</Box> >
<MenuContent hidden={open} /> <Box
{/* <CardAlert /> */} sx={{
<Stack display: "flex",
direction="row" justifyContent: open ? "flex-end" : "center",
sx={{ alignItems: "center",
p: 2, pt: 1.5,
gap: 1, textAlign: "center",
alignItems: 'center', }}
borderTop: '1px solid', >
borderColor: 'divider', <Button variant="text" onClick={() => setOpen(!open)}>
}} {open ? <ArrowLeftIcon /> : <ArrowRightIcon />}
> </Button>
<Avatar </Box>
sizes="small" <MenuContent hidden={open} />
alt="Riley Carter" {/* <CardAlert /> */}
src="/static/images/avatar/7.jpg" <Stack
sx={{ width: open ? 36 : 0, height: open ? 36 : 0 }} direction="row"
/> sx={{
<Box sx={{ mr: 'auto', display: !open ? 'none' : 'block' }}> p: 2,
<Typography gap: 1,
variant="body2" alignItems: "center",
sx={{ fontWeight: 500, lineHeight: '16px' }} borderTop: "1px solid",
> borderColor: "divider",
Riley Carter }}
</Typography> >
<Typography variant="caption" sx={{ color: 'text.secondary' }}> <Avatar
riley@email.com sizes="small"
</Typography> alt="Riley Carter"
</Box> src="/static/images/avatar/7.jpg"
<OptionsMenu avatar={open} /> sx={{ width: open ? 36 : 0, height: open ? 36 : 0 }}
</Stack> />
</Drawer> <Box sx={{ mr: "auto", display: !open ? "none" : "block" }}>
); <Typography
variant="body2"
sx={{ fontWeight: 500, lineHeight: "16px" }}
>
{user?.name}
</Typography>
<Typography
variant="caption"
sx={{ color: "text.secondary" }}
>
{user?.email}
</Typography>
</Box>
<OptionsMenu avatar={open} />
</Stack>
</Drawer>
);
} }

24
src/lib/https.ts
View file

@ -15,28 +15,30 @@
// export default http; // export default http;
import axios, { AxiosInstance } from 'axios'; import axios, { AxiosInstance } from "axios";
// Axios instance for the production backend // Axios instance for the production backend
const backendHttp = axios.create({ const backendHttp = axios.create({
baseURL: process.env.REACT_APP_BACKEND_URL, baseURL: process.env.REACT_APP_BACKEND_URL,
}); });
// Axios instance for the local API // Axios instance for the local API
const apiHttp = axios.create({ const apiHttp = axios.create({
baseURL: "http://localhost:5000/api", baseURL: "http://localhost:5000/api",
}); });
// Add interceptors to both instances // Add interceptors to both instances
const addAuthInterceptor = (instance: AxiosInstance) => { const addAuthInterceptor = (instance: AxiosInstance) => {
instance.interceptors.request.use((config) => { instance.interceptors.request.use((config) => {
const authToken = localStorage.getItem('authToken'); const authToken = localStorage.getItem("authToken");
if (authToken) { if (authToken) {
config.headers.Authorization = authToken; //Created by : jaanvi and Eknoor
} //date: 12-feb-25
return config; //changes in token fetching
}); config.headers.Authorization = `Bearer ${authToken}`;
}
return config;
});
}; };
addAuthInterceptor(backendHttp); addAuthInterceptor(backendHttp);

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

@ -1,19 +1,14 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Box, Button, Typography } from "@mui/material"; import { Box, Button, Typography } from "@mui/material";
import AddEditCategoryModal from "../../components/AddEditCategoryModal"; import AddEditCategoryModal from "../../components/AddEditCategoryModal";
// import { useForm } from "react-hook-form";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import CustomTable from "../../components/CustomTable"; import CustomTable, { Column } from "../../components/CustomTable";
import DeleteModal from "../../components/Modals/DeleteModal/DeleteModal";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { adminList, updateAdmin } from "../../redux/slices/authSlice"; import { adminList, updateAdmin } from "../../redux/slices/authSlice";
import { AppDispatch, RootState } from "../../redux/store/store"; // Import RootState for selector import { AppDispatch, RootState } from "../../redux/store/store"; // Import RootState for selector
// Sample data for categories
export default function AdminList() { export default function AdminList() {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [editRow, setEditRow] = useState<any>(null);
const { reset } = useForm(); const { reset } = useForm();
const [deleteModal, setDeleteModal] = React.useState<boolean>(false); const [deleteModal, setDeleteModal] = React.useState<boolean>(false);
@ -31,7 +26,6 @@ export default function AdminList() {
const handleClickOpen = () => { const handleClickOpen = () => {
setModalOpen(true); setModalOpen(true);
setEditRow(null);
}; };
const handleCloseModal = () => { const handleCloseModal = () => {
@ -39,20 +33,16 @@ export default function AdminList() {
reset(); reset();
}; };
const handleDelete = () => {
setDeleteModal(false);
};
//By Jaanvi : Edit feature :: 11-feb-25
const handleUpdate = async (id: string, name: string, role: string) => { const handleUpdate = async (id: string, name: string, role: string) => {
try { try {
await dispatch(updateAdmin({ id, name, role })); await dispatch(updateAdmin({ id, name, role }));
dispatch(adminList()); // Fetch updated admins list after update await dispatch(adminList()); // Fetch updated admins list after update
} catch (error) { } catch (error) {
console.error("Update failed", error); console.error("Update failed", error);
} }
}; };
const categoryColumns = [ const categoryColumns: Column[] = [
{ id: "srno", label: "Sr No" }, { id: "srno", label: "Sr No" },
{ id: "name", label: "Name" }, { id: "name", label: "Name" },
{ id: "role", label: "Role" }, { id: "role", label: "Role" },
@ -66,10 +56,10 @@ export default function AdminList() {
admin: { id: string; name: string; role: string }, admin: { id: string; name: string; role: string },
index: number index: number
) => ({ ) => ({
srno: index + 1,
id: admin?.id, id: admin?.id,
srno: index + 1,
name: admin?.name, name: admin?.name,
role: admin?.role || "N/A", role: admin?.role,
}) })
) )
: []; : [];
@ -108,8 +98,8 @@ export default function AdminList() {
<CustomTable <CustomTable
columns={categoryColumns} columns={categoryColumns}
rows={categoryRows} rows={categoryRows}
editRow={editRow}
setDeleteModal={setDeleteModal} setDeleteModal={setDeleteModal}
deleteModal={deleteModal}
setRowData={setRowData} setRowData={setRowData}
setModalOpen={setModalOpen} setModalOpen={setModalOpen}
/> />
@ -119,11 +109,6 @@ export default function AdminList() {
editRow={rowData} editRow={rowData}
handleUpdate={handleUpdate} handleUpdate={handleUpdate}
/> />
<DeleteModal
open={deleteModal}
setDeleteModal={setDeleteModal}
handleDelete={handleDelete}
/>
</> </>
); );
} }

103
src/pages/ProfilePage/index.tsx Normal file
View file

@ -0,0 +1,103 @@
import React, { useEffect } from "react";
import {
Container,
Typography,
CircularProgress,
Card,
CardContent,
Grid,
Avatar,
Box,
} from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchProfile } from "../../redux/slices/authSlice";
const ProfilePage = () => {
// const dispatch = useDispatch();
const dispatch = useDispatch<AppDispatch>();
//Created by : jaanvi and Eknoor
//date: 12-feb-25
//Extract user profile data from Auth
// Extract profile, loading, and error state from Redux
const { user, isLoading, error } = useSelector(
(state: RootState) => state.auth
);
useEffect(() => {
// Dispatch the getProfile thunk to fetch user profile data
dispatch(fetchProfile());
}, [dispatch]);
if (isLoading) {
return (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<CircularProgress />
</Box>
);
}
if (error) {
return (
<Container>
<Typography variant="h5" color="error" gutterBottom>
Error: {error}
</Typography>
</Container>
);
}
if (!user) {
return (
<Container>
<Typography variant="h5">No profile data available</Typography>
</Container>
);
}
return (
<Container sx={{ py: 4 }}>
<Typography variant="h4" gutterBottom>
Profile
</Typography>
<Card sx={{ maxWidth: 600, margin: "0 auto" }}>
<CardContent>
<Grid container spacing={2} alignItems="center">
<Grid item>
<Avatar
alt={user?.name || "User Avatar"}
src={"/static/images/avatar/7.jpg"}
sx={{ width: 80, height: 80 }}
/>
</Grid>
<Grid item xs>
<Typography variant="h6">
{user?.name || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Email: {user?.email || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Phone: {user?.phone || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Role: {user?.role || "N/A"}
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
</Container>
);
};
export default ProfilePage;

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

@ -4,25 +4,49 @@ import { backendHttp, apiHttp } from "../../lib/https";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
// Define types for state // Define types for state
//By jaanvi:: 12-feb-25
interface User { interface User {
token: string | null;
map(
arg0: (
admin: { name: any; role: any; email: any; phone: any },
index: number
) => { srno: number; name: any; role: any; email: any; phone: any }
): unknown;
id: string; id: string;
name: string;
email: string; email: string;
role: string;
phone: string;
} }
interface Admin { interface Admin {
id: string; id: string;
name: string; name: string;
role: string; role: string;
} }
interface AuthState { interface AuthState {
user: User | null; user: User | null;
admins: Admin[]; admins: Admin[];
isAuthenticated: boolean; isAuthenticated: boolean;
isLoading: boolean; isLoading: boolean;
error: string | null; error: object | string | null;
token: string | null; // Store token in Redux state
} }
const initialState: AuthState = {
user: null,
admins: [],
isAuthenticated: false,
isLoading: false,
error: null,
token: null, //Intialize token
};
// Async thunk for login // Async thunk for login
export const loginUser = createAsyncThunk< export const loginUser = createAsyncThunk<
User, User,
@ -30,11 +54,14 @@ export const loginUser = createAsyncThunk<
{ rejectValue: string } { rejectValue: string }
>("auth/login", async ({ email, password }, { rejectWithValue }) => { >("auth/login", async ({ email, password }, { rejectWithValue }) => {
try { try {
const response = await backendHttp.post("admin/login", { const response = await apiHttp.post("auth/login", {
email, email,
password, password,
}); });
localStorage.setItem("authToken", response.data?.data?.token); // Save token //changes By Jaanvi
//Store token
localStorage.setItem("authToken", response.data?.data?.token);
toast.success(response.data?.message); toast.success(response.data?.message);
return response.data; return response.data;
} catch (error: any) { } catch (error: any) {
@ -44,6 +71,41 @@ export const loginUser = createAsyncThunk<
} }
}); });
//created by jaanvi
//date: 12-feb-25
//function for fetching Profile data function
export const fetchProfile = createAsyncThunk<
User,
void,
{ rejectValue: string }
>("auth/fetchProfile", async (_, { rejectWithValue }) => {
try {
//Get the token from localStorage
const token = localStorage.getItem("authToken");
if (!token) throw new Error("No token found");
const response = await apiHttp.get("/auth/profile", {
headers: { Authorization: `Bearer ${token}` }, // Ensuring 'Bearer' prefix
});
console.log("API Response:", response.data); // Debugging
if (!response.data?.data) {
throw new Error("Invalid API response");
}
return response.data.data;
} catch (error: any) {
console.error(
"Profile Fetch Error:",
error.response?.data || error.message
);
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
}
});
// Async thunk for register // Async thunk for register
export const registerUser = createAsyncThunk< export const registerUser = createAsyncThunk<
User, User,
@ -63,6 +125,10 @@ export const registerUser = createAsyncThunk<
} }
}); });
//created by Eknoor and jaanvi
//date: 10-Feb-2025
//Fetching list of admins
export const adminList = createAsyncThunk< export const adminList = createAsyncThunk<
Admin[], Admin[],
void, void,
@ -70,11 +136,12 @@ export const adminList = createAsyncThunk<
>("/auth", async (_, { rejectWithValue }) => { >("/auth", async (_, { rejectWithValue }) => {
try { try {
const response = await apiHttp.get("/auth"); const response = await apiHttp.get("/auth");
console.log(response?.data?.data);
return response?.data?.data?.map( return response?.data?.data?.map(
(admin: { id: string; name: string; role: string }) => ({ (admin: { id: string; name: string; role: string }) => ({
id: admin.id, id: admin.id,
name: admin.name, name: admin?.name,
role: admin.role || "N/A", role: admin?.role || "N/A",
}) })
); );
} catch (error: any) { } catch (error: any) {
@ -84,8 +151,26 @@ export const adminList = createAsyncThunk<
} }
}); });
//By Jaanvi : Edit feature :: 11-feb-25 //created by Eknoor
// updateAdmin Action //date: 11-Feb-2025
//function for deleting admin
export const deleteAdmin = createAsyncThunk<
string,
string,
{ rejectValue: string }
>("deleteAdmin", async (id, { rejectWithValue }) => {
try {
const response = await apiHttp.delete(`/auth/${id}`);
toast.success(response.data?.message);
return id;
} catch (error: any) {
return rejectWithValue(
error.response?.data?.message || "An error occurred"
);
}
});
export const updateAdmin = createAsyncThunk( export const updateAdmin = createAsyncThunk(
"/auth/id", "/auth/id",
async ( async (
@ -105,14 +190,6 @@ export const updateAdmin = createAsyncThunk(
} }
); );
const initialState: AuthState = {
user: null,
admins: [],
isAuthenticated: false,
isLoading: false,
error: null,
};
const authSlice = createSlice({ const authSlice = createSlice({
name: "auth", name: "auth",
initialState, initialState,
@ -120,6 +197,8 @@ const authSlice = createSlice({
logout: (state) => { logout: (state) => {
state.user = null; state.user = null;
state.isAuthenticated = false; state.isAuthenticated = false;
state.token = null;
localStorage.removeItem("authToken");
}, },
}, },
extraReducers: (builder) => { extraReducers: (builder) => {
@ -129,14 +208,12 @@ const authSlice = createSlice({
state.isLoading = true; state.isLoading = true;
state.error = null; state.error = null;
}) })
.addCase( .addCase(loginUser.fulfilled, (state, action) => {
loginUser.fulfilled, state.isLoading = false;
(state, action: PayloadAction<User>) => { state.isAuthenticated = true;
state.isLoading = false; state.user = action.payload;
state.isAuthenticated = true; state.token = action.payload.token; // Store token in Redux
state.user = action.payload; })
}
)
.addCase( .addCase(
loginUser.rejected, loginUser.rejected,
(state, action: PayloadAction<string | undefined>) => { (state, action: PayloadAction<string | undefined>) => {
@ -164,7 +241,9 @@ const authSlice = createSlice({
state.error = action.payload || "An error occurred"; state.error = action.payload || "An error occurred";
} }
) )
// Fetch admin list
// created by Jaanvi and Eknoor
//AdminList
.addCase(adminList.pending, (state) => { .addCase(adminList.pending, (state) => {
state.isLoading = true; state.isLoading = true;
state.error = null; state.error = null;
@ -176,6 +255,7 @@ const authSlice = createSlice({
state.admins = action.payload; state.admins = action.payload;
} }
) )
.addCase( .addCase(
adminList.rejected, adminList.rejected,
(state, action: PayloadAction<string | undefined>) => { (state, action: PayloadAction<string | undefined>) => {
@ -183,16 +263,57 @@ const authSlice = createSlice({
state.error = action.payload || "An error occurred"; state.error = action.payload || "An error occurred";
} }
) )
// update admin cases
//created by Eknoor
//date: 11-Feb-2025
//cases for deleting admin
.addCase(deleteAdmin.pending, (state) => {
state.isLoading = true;
})
.addCase(deleteAdmin.fulfilled, (state, action) => {
state.isLoading = false;
state.admins = state.admins.filter(
(admin) => String(admin.id) !== String(action.payload)
);
})
.addCase(deleteAdmin.rejected, (state, action) => {
state.isLoading = false;
state.error = action.payload || "Failed to delete admin";
})
.addCase(updateAdmin.pending, (state) => {
state.isLoading = true;
state.error = null;
})
.addCase(updateAdmin.fulfilled, (state, action) => { .addCase(updateAdmin.fulfilled, (state, action) => {
const updatedAdmin = action.payload; const updatedAdmin = action.payload;
state.admins = state.admins.map((admin) => state.admins = state.admins.map((admin) =>
admin.id === updatedAdmin.id ? updatedAdmin : admin admin.id === updatedAdmin.id ? updatedAdmin : admin
); );
})
.addCase(updateAdmin.rejected, (state) => {
state.isLoading = false; state.isLoading = false;
})
.addCase(updateAdmin.rejected, (state, action) => {
state.isLoading = false;
state.error =
action.payload ||
"Something went wrong while updating Admin!!";
})
//Adding Cases for Profile Slice
//Pending state
.addCase(fetchProfile.pending, (state) => {
state.isLoading = true;
state.error = null; state.error = null;
})
//Fullfilled state
.addCase(fetchProfile.fulfilled, (state, action) => {
state.isLoading = false;
state.user = action.payload;
state.isAuthenticated = true;
})
//Failed to load state
.addCase(fetchProfile.rejected, (state, action) => {
state.isLoading = false;
state.error = action.payload || "Failed to fetch admin profile";
}); });
}, },
}); });

24
src/router.tsx
View file

@ -1,5 +1,4 @@
import { Routes as BaseRoutes, Navigate, Route } from "react-router-dom"; import { Routes as BaseRoutes, Navigate, Route } from "react-router-dom";
// import useAuth from "./hooks/useAuth";
import React, { Suspense } from "react"; import React, { Suspense } from "react";
import LoadingComponent from "./components/Loading"; import LoadingComponent from "./components/Loading";
import DashboardLayout from "./layouts/DashboardLayout"; import DashboardLayout from "./layouts/DashboardLayout";
@ -8,6 +7,11 @@ import SignUp from "./pages/Auth/SignUp";
import Dashboard from "./pages/Dashboard"; import Dashboard from "./pages/Dashboard";
import Vehicles from "./pages/Vehicles"; import Vehicles from "./pages/Vehicles";
import AdminList from "./pages/AdminList"; import AdminList from "./pages/AdminList";
import ProfilePage from "./pages/ProfilePage";
// import SuperAdminRouter from "./components/SuperAdminRoute";
// SuperAdminRouter // Fix: single import with correct path
import SuperAdminRouter from "./superAdminRouter";
function ProtectedRoute({ function ProtectedRoute({
caps, caps,
@ -37,6 +41,7 @@ export default function AppRouter() {
<Route path="login" element={<Login />} /> <Route path="login" element={<Login />} />
<Route path="signup" element={<SignUp />} /> <Route path="signup" element={<SignUp />} />
</Route> </Route>
<Route path="/panel" element={<DashboardLayout />}> <Route path="/panel" element={<DashboardLayout />}>
<Route <Route
path="dashboard" path="dashboard"
@ -61,12 +66,27 @@ export default function AppRouter() {
element={ element={
<ProtectedRoute <ProtectedRoute
caps={[]} caps={[]}
component={<AdminList />} component={
//Eknoor singh and jaanvi
//date:- 12-Feb-2025
//Admin list put under protected route for specific use
<SuperAdminRouter>
<AdminList />
</SuperAdminRouter>
}
/> />
} }
/> />
<Route path="*" element={<>404</>} /> <Route path="*" element={<>404</>} />
</Route> </Route>
<Route
path="/auth/profile"
element={
<ProtectedRoute caps={[]} component={<ProfilePage />} />
}
/>
<Route path="*" element={<>404</>} /> <Route path="*" element={<>404</>} />
</BaseRoutes> </BaseRoutes>
</Suspense> </Suspense>

26
src/superAdminRouter.tsx Normal file
View file

@ -0,0 +1,26 @@
//Eknoor singh and jaanvi
//date:- 12-Feb-2025
//seperate route for super admin implemented
import React from "react";
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
import { RootState } from "./redux/store/store";
interface SuperAdminRouteProps {
children: React.ReactNode;
}
const SuperAdminRouter: React.FC<SuperAdminRouteProps> = ({ children }) => {
const userRole = useSelector((state: RootState) => state.auth.user?.role);
if (userRole !== 'superadmin') {
// Redirect to dashboard if user is not a superadmin
return <Navigate to="/panel/dashboard" replace />;
}
return <>{children}</>;
};
export default SuperAdminRouter;