From 736650371117543c26d535be3770aae0021d552a Mon Sep 17 00:00:00 2001 From: bansh_dml Date: Mon, 24 Feb 2025 18:00:07 +0530 Subject: [PATCH] Worked on the Charge stations section according to the figma design --- public/Bell.jpg | Bin 0 -> 1008 bytes src/components/Header/index.tsx | 106 +++--- src/components/MenuContent/index.tsx | 3 +- src/pages/AdminList/index.tsx | 460 +++++++++++++++++++-------- 4 files changed, 395 insertions(+), 174 deletions(-) create mode 100644 public/Bell.jpg diff --git a/public/Bell.jpg b/public/Bell.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a5c21acb04ad7bb6aa1c784d1bf80194907919a3 GIT binary patch literal 1008 zcmex=Jq?U}9uuW@2GxWo2Ojs;&jfGq4D< z3Mm>ovIz$!vMUve7&T5@$f4}C@t|nX#SbdRNkvVZTw>x9l2WQ_>Kd9_CZ=ZQ7M51d zF0O9w9-dyoA)#U65s^{JDXD4c8JStdC8cHM6_r)ZEv;?s9i3g1CQq3GGAU*RJ2VdF$b$$4{OP zfBE|D`;VW$K>lK6V1@@7#A9gw0tNyj6AKG73p>bPj7;S~%q+;ls%Xe2&p2(+QIDJjtyo1?xhT848yl z-e>na{@aa@z58!F@Yz_E9G8>56~dg9B0fJW!SdL`r`>aJM%&pT0cP@T}_7D{B}97j4;aQ0^1YW}g)^Z#`vPx34|hp-=nJI^C`M zVlRWASzrCgdTztS{c>eZ-t{dWG% z_0=}-ApOgvvdFa zI<|VX=jvCRZ@DL^ifxF9in_VvY~i=+Y!B`^CTI69-8t`3@>Zu^D-#Yd{J#kRQ}=@9 literal 0 HcmV?d00001 diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 4724de2..6bc2b01 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -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 ( - - - - - - - - - - - {showNotifications && ( + + + {/* Search Bar */} - - No notifications yet - + + - )} - + + {/* Notification and Profile Section */} + + + {/* Custom Bell Icon */} + + + + + + + Momah + + {/* Dropdown Icon */} + + + + + ); } diff --git a/src/components/MenuContent/index.tsx b/src/components/MenuContent/index.tsx index 7b91f6a..f1869b5 100644 --- a/src/components/MenuContent/index.tsx +++ b/src/components/MenuContent/index.tsx @@ -18,11 +18,10 @@ const baseMenuItems = [ url: "/panel/dashboard", }, { - text: "Admins", + text: "Charge Stations", icon: , url: "/panel/admin-list", }, - ]; //Eknoor singh and Jaanvi diff --git a/src/pages/AdminList/index.tsx b/src/pages/AdminList/index.tsx index 0cb75cf..e095411 100644 --- a/src/pages/AdminList/index.tsx +++ b/src/pages/AdminList/index.tsx @@ -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(false); - const [viewModal, setViewModal] = React.useState(false); - const [rowData, setRowData] = React.useState(null); + const [searchQuery, setSearchQuery] = useState(""); + const [currentPage, setCurrentPage] = useState(1); + const adminsPerPage = 10; const dispatch = useDispatch(); - 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 ( - <> + + + Charge stations + + + {/* Search & Buttons Section */} + + + + ), + }} + value={searchQuery} + onChange={(e) => setSearchQuery(e.target.value)} + /> + + + + + + + + + + {/* Table Section */} + + + + + {[ + "Name", + "Location", + "Manager Assigned", + "Vehicle", + "Phone Number", + "Action", + ].map((header) => ( + + {header} + + ))} + + + + {currentAdmins.map((admin, index) => ( + + + {admin.name} + + + {admin.location || "N/A"} + + + {admin.managerAssigned || "N/A"} + + + {admin.vehicle || "N/A"}{" "} + + +6 more + + + + {admin.phone} + + + + + + + + ))} + +
+ + + {/* Pagination */} + - Admins + Page Number : - + - - - - + ); }