Worked on the Charge stations section according to the figma design

This commit is contained in:
bansh_dml 2025-02-24 18:00:07 +05:30
parent 8c67cc5b85
commit 7366503711
4 changed files with 395 additions and 174 deletions

BIN
public/Bell.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1,008 B

View file

@ -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 <Box
direction="row"
sx={{ sx={{
display: { xs: "none", md: "flex" },
width: "100%", width: "100%",
alignItems: { xs: "flex-start", md: "center" }, height: "84px",
backgroundColor: "#202020",
padding: "20px 24px",
display: "flex",
alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
maxWidth: { sm: "100%", md: "1700px" },
pt: 1.5,
}} }}
spacing={2}
> >
<NavbarBreadcrumbs /> <Box sx={{ flexGrow: 1 }} />
<Stack direction="row" sx={{ gap: 1 }}> <Stack
<Search /> direction="row"
<CustomDatePicker /> spacing={3}
<MenuButton alignItems="center"
showBadge justifyContent="flex-end"
aria-label="Open notifications" >
onClick={toggleNotifications} {/* Search Bar */}
>
<NotificationsRoundedIcon />
</MenuButton>
<ColorModeIconDropdown />
</Stack>
{showNotifications && (
<Box <Box
sx={{ sx={{
p: 2, width: "360px",
position: "absolute", height: "44px",
top: "55px", // Adjust this value according to your AppBar height backgroundColor: "#303030",
right: "66px", borderRadius: "8px",
bgcolor: "lightblue", border: "1px solid #424242",
boxShadow: 1, display: "flex",
borderRadius: 1, alignItems: "center",
zIndex: 1300, padding: "0 12px",
}} }}
> >
<Typography variant="body2" color="text.secondary"> <SearchIcon sx={{ color: "#FFFFFF" }} />
No notifications yet <InputBase
</Typography> sx={{ marginLeft: 1, flex: 1, color: "#FFFFFF" }}
/>
</Box> </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>
); );
} }

View file

@ -18,11 +18,10 @@ const baseMenuItems = [
url: "/panel/dashboard", url: "/panel/dashboard",
}, },
{ {
text: "Admins", text: "Charge Stations",
icon: <AnalyticsRoundedIcon />, icon: <AnalyticsRoundedIcon />,
url: "/panel/admin-list", url: "/panel/admin-list",
}, },
]; ];
//Eknoor singh and Jaanvi //Eknoor singh and Jaanvi

View file

@ -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
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 <Box
sx={{ sx={{
width: "100%", display: "flex",
maxWidth: { gap: "16px",
sm: "100%", 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", display: "flex",
justifyContent: "space-between", justifyContent: "flex-end",
alignItems: "center", 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 <Typography
component="h2" sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
variant="h6"
sx={{ mt: 2, fontWeight: 600 }}
> >
Admins Page Number :
</Typography> </Typography>
<Button <Pagination
variant="contained" count={Math.ceil(filteredAdmins.length / adminsPerPage)}
size="medium" page={currentPage}
sx={{ textAlign: "right" }} onChange={handlePageChange}
onClick={handleClickOpen} siblingCount={0}
> boundaryCount={0}
Add Admin sx={{
</Button> "& .MuiPaginationItem-root": {
color: "white",
borderRadius: "0px",
},
"& .MuiPaginationItem-page.Mui-selected": {
backgroundColor: "transparent",
fontWeight: "bold",
color: "#FFFFFF",
},
}}
/>
</Box> </Box>
</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}
/>
</>
); );
} }