dev-jaanvi #1
BIN
public/Bell.jpg
Normal file
BIN
public/Bell.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,008 B |
BIN
public/avatar.png
Normal file
BIN
public/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
|
|
@ -1,63 +1,89 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import Stack from "@mui/material/Stack";
|
import Stack from "@mui/material/Stack";
|
||||||
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
|
import Avatar from "@mui/material/Avatar";
|
||||||
import CustomDatePicker from "../CustomDatePicker";
|
|
||||||
import NavbarBreadcrumbs from "../NavbarBreadcrumbs";
|
|
||||||
import MenuButton from "../MenuButton";
|
|
||||||
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
|
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Search from "../Search";
|
import InputBase from "@mui/material/InputBase";
|
||||||
|
import SearchIcon from "@mui/icons-material/Search";
|
||||||
|
import Divider from "@mui/material/Divider";
|
||||||
|
import MenuButton from "../MenuButton";
|
||||||
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
const [showNotifications, setShowNotifications] = React.useState(false);
|
const [showNotifications, setShowNotifications] = React.useState(false);
|
||||||
const toggleNotifications = () => {
|
const toggleNotifications = () => {
|
||||||
setShowNotifications((prev) => !prev);
|
setShowNotifications((prev) => !prev);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack
|
|
||||||
direction="row"
|
|
||||||
sx={{
|
|
||||||
display: { xs: "none", md: "flex" },
|
|
||||||
width: "100%",
|
|
||||||
alignItems: { xs: "flex-start", md: "center" },
|
|
||||||
justifyContent: "space-between",
|
|
||||||
maxWidth: { sm: "100%", md: "1700px" },
|
|
||||||
pt: 1.5,
|
|
||||||
}}
|
|
||||||
spacing={2}
|
|
||||||
>
|
|
||||||
<NavbarBreadcrumbs />
|
|
||||||
<Stack direction="row" sx={{ gap: 1 }}>
|
|
||||||
<Search />
|
|
||||||
<CustomDatePicker />
|
|
||||||
<MenuButton
|
|
||||||
showBadge
|
|
||||||
aria-label="Open notifications"
|
|
||||||
onClick={toggleNotifications}
|
|
||||||
>
|
|
||||||
<NotificationsRoundedIcon />
|
|
||||||
</MenuButton>
|
|
||||||
<ColorModeIconDropdown />
|
|
||||||
</Stack>
|
|
||||||
{showNotifications && (
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
p: 2,
|
width: "100%",
|
||||||
position: "absolute",
|
height: "84px",
|
||||||
top: "55px", // Adjust this value according to your AppBar height
|
backgroundColor: "#202020",
|
||||||
right: "66px",
|
padding: "20px 24px",
|
||||||
bgcolor: "lightblue",
|
display: "flex",
|
||||||
boxShadow: 1,
|
alignItems: "center",
|
||||||
borderRadius: 1,
|
justifyContent: "space-between",
|
||||||
zIndex: 1300,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography variant="body2" color="text.secondary">
|
<Box sx={{ flexGrow: 1 }} />
|
||||||
No notifications yet
|
<Stack
|
||||||
</Typography>
|
direction="row"
|
||||||
|
spacing={3}
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="flex-end"
|
||||||
|
>
|
||||||
|
{/* Search Bar */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "360px",
|
||||||
|
height: "44px",
|
||||||
|
backgroundColor: "#303030",
|
||||||
|
borderRadius: "8px",
|
||||||
|
border: "1px solid #424242",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
padding: "0 12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||||
|
<InputBase
|
||||||
|
sx={{ marginLeft: 1, flex: 1, color: "#FFFFFF" }}
|
||||||
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
|
||||||
|
{/* Notification and Profile Section */}
|
||||||
|
<Stack direction="row" spacing={2} alignItems="center">
|
||||||
|
<MenuButton
|
||||||
|
onClick={toggleNotifications}
|
||||||
|
aria-label="Open notifications"
|
||||||
|
>
|
||||||
|
{/* Custom Bell Icon */}
|
||||||
|
<Box
|
||||||
|
component="img"
|
||||||
|
src="/Bell.jpg"
|
||||||
|
alt="Notification Icon"
|
||||||
|
sx={{ width: 24, height: 24 }}
|
||||||
|
/>
|
||||||
|
</MenuButton>
|
||||||
|
<Divider flexItem sx={{ backgroundColor: "#424242" }} />
|
||||||
|
<Stack direction="row" spacing={1.5} alignItems="center">
|
||||||
|
<Avatar
|
||||||
|
alt="User Avatar"
|
||||||
|
src="/avatar.png"
|
||||||
|
sx={{ width: 36, height: 36 }}
|
||||||
|
/>
|
||||||
|
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
|
||||||
|
Momah
|
||||||
|
</Typography>
|
||||||
|
{/* Dropdown Icon */}
|
||||||
|
<ArrowDropDownIcon
|
||||||
|
sx={{ color: "#FFFFFF", width: 16, height: 16 }}
|
||||||
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,11 @@ const baseMenuItems = [
|
||||||
icon: <AnalyticsRoundedIcon />,
|
icon: <AnalyticsRoundedIcon />,
|
||||||
url: "/panel/admin-list",
|
url: "/panel/admin-list",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
text: "Users",
|
||||||
|
icon: <AnalyticsRoundedIcon />,
|
||||||
|
url: "/panel/user-list",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
//Eknoor singh and Jaanvi
|
//Eknoor singh and Jaanvi
|
||||||
|
|
|
||||||
|
|
@ -1,159 +1,355 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Box, Button, Typography } from "@mui/material";
|
|
||||||
import AddEditCategoryModal from "../../components/AddEditCategoryModal";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import CustomTable, { Column } from "../../components/CustomTable";
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
|
||||||
import {
|
import {
|
||||||
adminList,
|
Box,
|
||||||
updateAdmin,
|
Button,
|
||||||
createAdmin,
|
Typography,
|
||||||
} from "../../redux/slices/adminSlice";
|
TextField,
|
||||||
|
InputAdornment,
|
||||||
|
Paper,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Pagination,
|
||||||
|
IconButton,
|
||||||
|
} from "@mui/material";
|
||||||
|
import SearchIcon from "@mui/icons-material/Search";
|
||||||
|
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||||
|
import TuneIcon from "@mui/icons-material/Tune";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { adminList } from "../../redux/slices/adminSlice";
|
||||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||||
|
|
||||||
export default function AdminList() {
|
export default function AdminList() {
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
const { reset } = useForm();
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
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);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch(adminList());
|
dispatch(adminList());
|
||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
|
|
||||||
const handleClickOpen = () => {
|
const staticAdmins = [
|
||||||
setRowData(null); // Reset row data when opening for new admin
|
{
|
||||||
setModalOpen(true);
|
name: "John Doe",
|
||||||
};
|
location: "New York",
|
||||||
|
managerAssigned: "Alice Johnson",
|
||||||
const handleCloseModal = () => {
|
vehicle: "Tesla Model S",
|
||||||
setModalOpen(false);
|
phone: "+1 234 567 8901",
|
||||||
setRowData(null);
|
},
|
||||||
reset();
|
{
|
||||||
};
|
name: "Jane Smith",
|
||||||
|
location: "Los Angeles",
|
||||||
const handleCreate = async (data: {
|
managerAssigned: "Bob Brown",
|
||||||
name: string;
|
vehicle: "Ford F-150",
|
||||||
email: string;
|
phone: "+1 987 654 3210",
|
||||||
phone: string;
|
},
|
||||||
registeredAddress: string;
|
{
|
||||||
}) => {
|
name: "Michael Brown",
|
||||||
try {
|
location: "Chicago",
|
||||||
await dispatch(createAdmin(data));
|
managerAssigned: "Sarah Lee",
|
||||||
await dispatch(adminList()); // Refresh the list after creation
|
vehicle: "Chevrolet Bolt",
|
||||||
handleCloseModal();
|
phone: "+1 312 555 7890",
|
||||||
} catch (error) {
|
},
|
||||||
console.error("Creation failed", error);
|
{
|
||||||
}
|
name: "Emily Davis",
|
||||||
};
|
location: "Houston",
|
||||||
|
managerAssigned: "Tom Wilson",
|
||||||
const handleUpdate = async (
|
vehicle: "Nissan Leaf",
|
||||||
id: string,
|
phone: "+1 713 444 5678",
|
||||||
name: string,
|
},
|
||||||
email: string,
|
{
|
||||||
phone: string,
|
name: "Daniel Martinez",
|
||||||
registeredAddress: string
|
location: "Phoenix",
|
||||||
) => {
|
managerAssigned: "Jessica White",
|
||||||
try {
|
vehicle: "BMW i3",
|
||||||
await dispatch(
|
phone: "+1 602 999 4321",
|
||||||
updateAdmin({
|
},
|
||||||
id,
|
{
|
||||||
name,
|
name: "Sophia Miller",
|
||||||
email,
|
location: "Philadelphia",
|
||||||
phone,
|
managerAssigned: "Mark Adams",
|
||||||
registeredAddress,
|
vehicle: "Audi e-tron",
|
||||||
})
|
phone: "+1 215 777 6543",
|
||||||
);
|
},
|
||||||
await dispatch(adminList());
|
{
|
||||||
} catch (error) {
|
name: "James Anderson",
|
||||||
console.error("Update failed", error);
|
location: "San Antonio",
|
||||||
}
|
managerAssigned: "Emma Thomas",
|
||||||
};
|
vehicle: "Hyundai Kona EV",
|
||||||
|
phone: "+1 210 321 8765",
|
||||||
const categoryColumns: Column[] = [
|
},
|
||||||
{ id: "srno", label: "Sr No" },
|
{
|
||||||
{ id: "name", label: "Name" },
|
name: "James Anderson",
|
||||||
{ id: "email", label: "Email" },
|
location: "San Antonio",
|
||||||
{ id: "phone", label: "Phone" },
|
managerAssigned: "Emma Thomas",
|
||||||
{ id: "registeredAddress", label: "Address" },
|
vehicle: "Hyundai Kona EV",
|
||||||
{ id: "action", label: "Action", align: "center" },
|
phone: "+1 210 321 8765",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const categoryRows = admins?.length
|
const adminData = admins.length ? admins : staticAdmins;
|
||||||
? admins?.map(
|
|
||||||
(
|
const filteredAdmins = adminData.filter((admin) =>
|
||||||
admin: {
|
admin.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
id: string;
|
);
|
||||||
name: string;
|
|
||||||
email: string;
|
const indexOfLastAdmin = currentPage * adminsPerPage;
|
||||||
phone: string;
|
const indexOfFirstAdmin = indexOfLastAdmin - adminsPerPage;
|
||||||
registeredAddress: string;
|
const currentAdmins = filteredAdmins.slice(
|
||||||
},
|
indexOfFirstAdmin,
|
||||||
index: number
|
indexOfLastAdmin
|
||||||
) => ({
|
);
|
||||||
id: admin?.id,
|
|
||||||
srno: index + 1,
|
const handlePageChange = (event, value) => {
|
||||||
name: admin?.name,
|
setCurrentPage(value);
|
||||||
email: admin?.email,
|
};
|
||||||
phone: admin?.phone,
|
|
||||||
registeredAddress: admin?.registeredAddress,
|
|
||||||
})
|
|
||||||
)
|
|
||||||
: [];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
width: "100%",
|
width: "calc(100% - 48px)",
|
||||||
maxWidth: {
|
margin: "0 auto",
|
||||||
sm: "100%",
|
padding: "24px",
|
||||||
display: "flex",
|
backgroundColor: "#1C1C1C",
|
||||||
justifyContent: "space-between",
|
borderRadius: "12px",
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
component="h2"
|
sx={{
|
||||||
variant="h6"
|
color: "#FFFFFF",
|
||||||
sx={{ mt: 2, fontWeight: 600 }}
|
fontWeight: 500,
|
||||||
|
fontSize: "18px",
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Admins
|
Charge stations
|
||||||
</Typography>
|
</Typography>
|
||||||
<Button
|
|
||||||
variant="contained"
|
{/* Search & Buttons Section */}
|
||||||
size="medium"
|
<Box
|
||||||
sx={{ textAlign: "right" }}
|
sx={{
|
||||||
onClick={handleClickOpen}
|
display: "flex",
|
||||||
|
gap: "16px",
|
||||||
|
marginTop: "16px",
|
||||||
|
alignItems: "center",
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Add Admin
|
<TextField
|
||||||
|
variant="outlined"
|
||||||
|
placeholder="Search Charge stations"
|
||||||
|
sx={{
|
||||||
|
width: "422px",
|
||||||
|
backgroundColor: "#272727",
|
||||||
|
|
||||||
|
borderRadius: "12px",
|
||||||
|
input: { color: "#FFFFFF" },
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
borderRadius: "12px",
|
||||||
|
"& fieldset": { borderColor: "#FFFFFF" },
|
||||||
|
"&:hover fieldset": { borderColor: "#FFFFFF" },
|
||||||
|
"&.Mui-focused fieldset": {
|
||||||
|
borderColor: "#52ACDF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#52ACDF",
|
||||||
|
color: "white",
|
||||||
|
borderRadius: "8px",
|
||||||
|
width: "184px",
|
||||||
|
"&:hover": {
|
||||||
|
backgroundColor: "#439BC1",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add Charge Stations
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<CustomTable
|
<IconButton
|
||||||
columns={categoryColumns}
|
sx={{
|
||||||
rows={categoryRows}
|
width: "44px",
|
||||||
setDeleteModal={setDeleteModal}
|
height: "44px",
|
||||||
deleteModal={deleteModal}
|
borderRadius: "8px",
|
||||||
setViewModal={setViewModal}
|
backgroundColor: "#272727",
|
||||||
viewModal={viewModal}
|
color: "#52ACDF",
|
||||||
setRowData={setRowData}
|
"&:hover": { backgroundColor: "#333333" },
|
||||||
setModalOpen={setModalOpen}
|
}}
|
||||||
|
>
|
||||||
|
<TuneIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Table Section */}
|
||||||
|
<TableContainer
|
||||||
|
component={Paper}
|
||||||
|
sx={{
|
||||||
|
marginTop: "24px",
|
||||||
|
backgroundColor: "#1C1C1C",
|
||||||
|
borderRadius: "12px",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Table>
|
||||||
|
<TableHead sx={{ backgroundColor: "#272727" }}>
|
||||||
|
<TableRow>
|
||||||
|
{[
|
||||||
|
"Name",
|
||||||
|
"Location",
|
||||||
|
"Manager Assigned",
|
||||||
|
"Vehicle",
|
||||||
|
"Phone Number",
|
||||||
|
"Action",
|
||||||
|
].map((header) => (
|
||||||
|
<TableCell
|
||||||
|
key={header}
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{header}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{currentAdmins.map((admin, index) => (
|
||||||
|
<TableRow
|
||||||
|
key={index}
|
||||||
|
sx={{ backgroundColor: "#1C1C1C" }}
|
||||||
|
>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{admin.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{admin.location || "N/A"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{admin.managerAssigned || "N/A"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{admin.vehicle || "N/A"}{" "}
|
||||||
|
<Typography
|
||||||
|
component="span"
|
||||||
|
sx={{
|
||||||
|
color: "#52ACDF",
|
||||||
|
cursor: "pointer",
|
||||||
|
textDecoration: "none",
|
||||||
|
"&:hover": {
|
||||||
|
textDecoration: "underline",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
+6 more
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{admin.phone}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton size="small">
|
||||||
|
<MoreHorizIcon
|
||||||
|
sx={{ color: "#FFFFFF" }}
|
||||||
/>
|
/>
|
||||||
<AddEditCategoryModal
|
</IconButton>
|
||||||
open={modalOpen}
|
</TableCell>
|
||||||
handleClose={handleCloseModal}
|
</TableRow>
|
||||||
handleCreate={handleCreate}
|
))}
|
||||||
handleUpdate={handleUpdate}
|
</TableBody>
|
||||||
editRow={rowData}
|
</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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
313
src/pages/UserList/index.tsx
Normal file
313
src/pages/UserList/index.tsx
Normal file
|
|
@ -0,0 +1,313 @@
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Typography,
|
||||||
|
TextField,
|
||||||
|
InputAdornment,
|
||||||
|
Paper,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Pagination,
|
||||||
|
IconButton,
|
||||||
|
} from "@mui/material";
|
||||||
|
import SearchIcon from "@mui/icons-material/Search";
|
||||||
|
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||||
|
import TuneIcon from "@mui/icons-material/Tune";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { userList } from "../../redux/slices/userSlice"; // Make sure userSlice exists
|
||||||
|
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||||
|
|
||||||
|
export default function UserList() {
|
||||||
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const usersPerPage = 10;
|
||||||
|
|
||||||
|
const dispatch = useDispatch<AppDispatch>();
|
||||||
|
const users = useSelector((state: RootState) => state.userReducer.users);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(userList());
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
|
const staticUsers = [
|
||||||
|
{
|
||||||
|
name: "Alice Johnson",
|
||||||
|
email: "alice@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 234 567 8901",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bob Brown",
|
||||||
|
email: "bob@example.com",
|
||||||
|
role: "Admin",
|
||||||
|
phone: "+1 987 654 3210",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Charlie Davis",
|
||||||
|
email: "charlie@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 312 555 7890",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Alice Johnson",
|
||||||
|
email: "alice@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 234 567 8901",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bob Brown",
|
||||||
|
email: "bob@example.com",
|
||||||
|
role: "Admin",
|
||||||
|
phone: "+1 987 654 3210",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Charlie Davis",
|
||||||
|
email: "charlie@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 312 555 7890",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Bob Brown",
|
||||||
|
email: "bob@example.com",
|
||||||
|
role: "Admin",
|
||||||
|
phone: "+1 987 654 3210",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Charlie Davis",
|
||||||
|
email: "charlie@example.com",
|
||||||
|
role: "User",
|
||||||
|
phone: "+1 312 555 7890",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const userData = users.length ? users : staticUsers;
|
||||||
|
|
||||||
|
const filteredUsers = userData.filter((user) =>
|
||||||
|
user.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
const indexOfLastUser = currentPage * usersPerPage;
|
||||||
|
const indexOfFirstUser = indexOfLastUser - usersPerPage;
|
||||||
|
const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
|
||||||
|
|
||||||
|
const handlePageChange = (event, value) => {
|
||||||
|
setCurrentPage(value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "calc(100% - 48px)",
|
||||||
|
margin: "0 auto",
|
||||||
|
padding: "24px",
|
||||||
|
backgroundColor: "#1C1C1C",
|
||||||
|
borderRadius: "12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: "18px",
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
User List
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{/* Search & Buttons Section */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
gap: "16px",
|
||||||
|
marginTop: "16px",
|
||||||
|
alignItems: "center",
|
||||||
|
fontFamily: "Gilroy",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
variant="outlined"
|
||||||
|
placeholder="Search Users"
|
||||||
|
sx={{
|
||||||
|
width: "422px",
|
||||||
|
backgroundColor: "#272727",
|
||||||
|
borderRadius: "12px",
|
||||||
|
input: { color: "#FFFFFF" },
|
||||||
|
"& .MuiOutlinedInput-root": {
|
||||||
|
borderRadius: "12px",
|
||||||
|
"& fieldset": { borderColor: "#FFFFFF" },
|
||||||
|
"&:hover fieldset": { borderColor: "#FFFFFF" },
|
||||||
|
"&.Mui-focused fieldset": {
|
||||||
|
borderColor: "#52ACDF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
InputProps={{
|
||||||
|
startAdornment: (
|
||||||
|
<InputAdornment position="start">
|
||||||
|
<SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||||
|
</InputAdornment>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#52ACDF",
|
||||||
|
color: "white",
|
||||||
|
borderRadius: "8px",
|
||||||
|
width: "184px",
|
||||||
|
"&:hover": { backgroundColor: "#439BC1" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add User
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<IconButton
|
||||||
|
sx={{
|
||||||
|
width: "44px",
|
||||||
|
height: "44px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
backgroundColor: "#272727",
|
||||||
|
color: "#52ACDF",
|
||||||
|
"&:hover": { backgroundColor: "#333333" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TuneIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Table Section */}
|
||||||
|
<TableContainer
|
||||||
|
component={Paper}
|
||||||
|
sx={{
|
||||||
|
marginTop: "24px",
|
||||||
|
backgroundColor: "#1C1C1C",
|
||||||
|
borderRadius: "12px",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Table>
|
||||||
|
<TableHead sx={{ backgroundColor: "#272727" }}>
|
||||||
|
<TableRow>
|
||||||
|
{["Name", "Email", "Role", "Phone", "Action"].map(
|
||||||
|
(header) => (
|
||||||
|
<TableCell
|
||||||
|
key={header}
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{header}
|
||||||
|
</TableCell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{currentUsers.map((user, index) => (
|
||||||
|
<TableRow
|
||||||
|
key={index}
|
||||||
|
sx={{ backgroundColor: "#1C1C1C" }}
|
||||||
|
>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.email}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.role}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.phone}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
sx={{
|
||||||
|
color: "#FFFFFF",
|
||||||
|
borderBottom: "1px solid #2A2A2A",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton size="small">
|
||||||
|
<MoreHorizIcon
|
||||||
|
sx={{ color: "#FFFFFF" }}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
alignItems: "center",
|
||||||
|
marginTop: "16px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
|
||||||
|
>
|
||||||
|
Page Number :
|
||||||
|
</Typography>
|
||||||
|
<Pagination
|
||||||
|
count={Math.ceil(filteredUsers.length / usersPerPage)}
|
||||||
|
page={currentPage}
|
||||||
|
onChange={handlePageChange}
|
||||||
|
siblingCount={0}
|
||||||
|
boundaryCount={0}
|
||||||
|
sx={{
|
||||||
|
"& .MuiPaginationItem-root": {
|
||||||
|
color: "white",
|
||||||
|
borderRadius: "0px",
|
||||||
|
},
|
||||||
|
"& .MuiPaginationItem-page.Mui-selected": {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -3,11 +3,13 @@ import { combineReducers } from "@reduxjs/toolkit";
|
||||||
import authReducer from "./slices/authSlice";
|
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";
|
||||||
|
|
||||||
const rootReducer = combineReducers({
|
const rootReducer = combineReducers({
|
||||||
authReducer,
|
authReducer,
|
||||||
adminReducer,
|
adminReducer,
|
||||||
profileReducer
|
profileReducer,
|
||||||
|
userReducer,
|
||||||
});
|
});
|
||||||
|
|
||||||
export type RootState = ReturnType<typeof rootReducer>;
|
export type RootState = ReturnType<typeof rootReducer>;
|
||||||
|
|
|
||||||
59
src/redux/slices/userSlice.ts
Normal file
59
src/redux/slices/userSlice.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
// Define TypeScript types
|
||||||
|
interface User {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
phone?: string;
|
||||||
|
location?: string;
|
||||||
|
managerAssigned?: string;
|
||||||
|
vehicle?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UserState {
|
||||||
|
users: User[];
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initial state
|
||||||
|
const initialState: UserState = {
|
||||||
|
users: [],
|
||||||
|
loading: false,
|
||||||
|
error: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Async thunk to fetch user list
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const userSlice = createSlice({
|
||||||
|
name: "users",
|
||||||
|
initialState,
|
||||||
|
reducers: {},
|
||||||
|
extraReducers: (builder) => {
|
||||||
|
builder
|
||||||
|
.addCase(userList.pending, (state) => {
|
||||||
|
state.loading = true;
|
||||||
|
state.error = null;
|
||||||
|
})
|
||||||
|
.addCase(userList.fulfilled, (state, action: PayloadAction<User[]>) => {
|
||||||
|
state.loading = false;
|
||||||
|
state.users = action.payload;
|
||||||
|
})
|
||||||
|
.addCase(userList.rejected, (state, action) => {
|
||||||
|
state.loading = false;
|
||||||
|
state.error = action.error.message || "Failed to fetch users";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default userSlice.reducer;
|
||||||
|
|
@ -1,8 +1,4 @@
|
||||||
import {
|
import { Routes as BaseRoutes, Navigate, Route } from "react-router-dom";
|
||||||
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";
|
||||||
|
|
@ -15,6 +11,7 @@ const Vehicles = lazy(() => import("./pages/Vehicles"));
|
||||||
const AdminList = lazy(() => import("./pages/AdminList"));
|
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"));
|
||||||
|
|
||||||
interface ProtectedRouteProps {
|
interface ProtectedRouteProps {
|
||||||
caps: string[];
|
caps: string[];
|
||||||
|
|
@ -77,6 +74,15 @@ export default function AppRouter() {
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="user-list"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute
|
||||||
|
caps={[]}
|
||||||
|
component={<UserList />}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
<Route
|
<Route
|
||||||
path="profile"
|
path="profile"
|
||||||
|
|
@ -90,7 +96,7 @@ export default function AppRouter() {
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
{/* Catch-all Route */}
|
{/* Catch-all Route */}
|
||||||
<Route path="*" element={<NotFoundPage/>} />
|
<Route path="*" element={<NotFoundPage />} />
|
||||||
</BaseRoutes>
|
</BaseRoutes>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue