Worked on the Charge stations section according to the figma design
This commit is contained in:
parent
8c67cc5b85
commit
7366503711
BIN
public/Bell.jpg
Normal file
BIN
public/Bell.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,008 B |
|
|
@ -1,63 +1,89 @@
|
|||
import * as React from "react";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
|
||||
import CustomDatePicker from "../CustomDatePicker";
|
||||
import NavbarBreadcrumbs from "../NavbarBreadcrumbs";
|
||||
import MenuButton from "../MenuButton";
|
||||
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Box from "@mui/material/Box";
|
||||
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() {
|
||||
const [showNotifications, setShowNotifications] = React.useState(false);
|
||||
const toggleNotifications = () => {
|
||||
setShowNotifications((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: "none", md: "flex" },
|
||||
width: "100%",
|
||||
alignItems: { xs: "flex-start", md: "center" },
|
||||
height: "84px",
|
||||
backgroundColor: "#202020",
|
||||
padding: "20px 24px",
|
||||
display: "flex",
|
||||
alignItems: "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 sx={{ flexGrow: 1 }} />
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={3}
|
||||
alignItems="center"
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
{/* Search Bar */}
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
position: "absolute",
|
||||
top: "55px", // Adjust this value according to your AppBar height
|
||||
right: "66px",
|
||||
bgcolor: "lightblue",
|
||||
boxShadow: 1,
|
||||
borderRadius: 1,
|
||||
zIndex: 1300,
|
||||
width: "360px",
|
||||
height: "44px",
|
||||
backgroundColor: "#303030",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #424242",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "0 12px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
No notifications yet
|
||||
</Typography>
|
||||
<SearchIcon sx={{ color: "#FFFFFF" }} />
|
||||
<InputBase
|
||||
sx={{ marginLeft: 1, flex: 1, color: "#FFFFFF" }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
{/* 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="https://s3-alpha-sig.figma.com/img/dacf/0ff0/1f9d2fd2c30c4d605c4df5e0cf713ec5?Expires=1740960000&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=rcIQTiiBm0HAkIDyXDXxRybg0V-7JweZfG1yWxaHiJLDWGBk1qTnBKTOUEY6DC~hEI5wElvp0gaqjIrbxky6GExQeKo7uqw6gKJ88-daa8D7xWxzOs2ArVFzMEKqO3kDLDVssolGJC0TVyW5iKaryqKz7~D3ucY0h~GY6V-VAP7F5UmxA~H3CF-L72CC1HtMyiGC6nmtDfNo7lNP36o44Os4LSRcIof9xC5nXLo8MQjx9JRKvv6C-B95x2s7ms1~KqKHZWaCjgEcgiCfHwbQK9PgdpSyjSm2ljS4kRCdj6PYleV-D~S82cUGxAXNiay9EmX--QJuQ0MowpFNOJjVgg__"
|
||||
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>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,11 +18,10 @@ const baseMenuItems = [
|
|||
url: "/panel/dashboard",
|
||||
},
|
||||
{
|
||||
text: "Admins",
|
||||
text: "Charge Stations",
|
||||
icon: <AnalyticsRoundedIcon />,
|
||||
url: "/panel/admin-list",
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
//Eknoor singh and Jaanvi
|
||||
|
|
|
|||
|
|
@ -1,159 +1,355 @@
|
|||
import React, { 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 { useEffect, useState } from "react";
|
||||
import {
|
||||
adminList,
|
||||
updateAdmin,
|
||||
createAdmin,
|
||||
} from "../../redux/slices/adminSlice";
|
||||
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 { adminList } from "../../redux/slices/adminSlice";
|
||||
import { AppDispatch, RootState } from "../../redux/store/store";
|
||||
|
||||
export default function AdminList() {
|
||||
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 [searchQuery, setSearchQuery] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const adminsPerPage = 10;
|
||||
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
|
||||
const admins = useSelector((state: RootState) => state.adminReducer.admins);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(adminList());
|
||||
}, [dispatch]);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setRowData(null); // Reset row data when opening for new admin
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
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 staticAdmins = [
|
||||
{
|
||||
name: "John Doe",
|
||||
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 categoryRows = admins?.length
|
||||
? admins?.map(
|
||||
(
|
||||
admin: {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
registeredAddress: string;
|
||||
},
|
||||
index: number
|
||||
) => ({
|
||||
id: admin?.id,
|
||||
srno: index + 1,
|
||||
name: admin?.name,
|
||||
email: admin?.email,
|
||||
phone: admin?.phone,
|
||||
registeredAddress: admin?.registeredAddress,
|
||||
})
|
||||
)
|
||||
: [];
|
||||
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);
|
||||
};
|
||||
|
||||
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",
|
||||
}}
|
||||
>
|
||||
Charge stations
|
||||
</Typography>
|
||||
|
||||
{/* Search & Buttons Section */}
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: {
|
||||
sm: "100%",
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
marginTop: "16px",
|
||||
alignItems: "center",
|
||||
fontFamily: "Gilroy",
|
||||
}}
|
||||
>
|
||||
<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: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
justifyContent: "flex-end",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: "#52ACDF",
|
||||
color: "white",
|
||||
borderRadius: "8px",
|
||||
width: "184px",
|
||||
"&:hover": {
|
||||
backgroundColor: "#439BC1",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Add Charge Stations
|
||||
</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",
|
||||
"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" }}
|
||||
/>
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
{/* Pagination */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
alignItems: "center",
|
||||
marginTop: "16px",
|
||||
width: "100%",
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h6"
|
||||
sx={{ mt: 2, fontWeight: 600 }}
|
||||
sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
|
||||
>
|
||||
Admins
|
||||
Page Number :
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
sx={{ textAlign: "right" }}
|
||||
onClick={handleClickOpen}
|
||||
>
|
||||
Add Admin
|
||||
</Button>
|
||||
<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>
|
||||
|
||||
<CustomTable
|
||||
columns={categoryColumns}
|
||||
rows={categoryRows}
|
||||
setDeleteModal={setDeleteModal}
|
||||
deleteModal={deleteModal}
|
||||
setViewModal={setViewModal}
|
||||
viewModal={viewModal}
|
||||
setRowData={setRowData}
|
||||
setModalOpen={setModalOpen}
|
||||
/>
|
||||
<AddEditCategoryModal
|
||||
open={modalOpen}
|
||||
handleClose={handleCloseModal}
|
||||
handleCreate={handleCreate}
|
||||
handleUpdate={handleUpdate}
|
||||
editRow={rowData}
|
||||
/>
|
||||
</>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue