diff --git a/public/model-s-exterior-front-view.webp b/public/model-s-exterior-front-view.webp new file mode 100644 index 0000000..3af1533 Binary files /dev/null and b/public/model-s-exterior-front-view.webp differ diff --git a/src/components/AddUserModel/index.tsx b/src/components/AddUserModel/index.tsx index 376adad..d92f9bf 100644 --- a/src/components/AddUserModel/index.tsx +++ b/src/components/AddUserModel/index.tsx @@ -55,7 +55,19 @@ const AddUserModal: React.FC = ({ }); const onSubmit = (data: FormData) => { - handleCreate(data); + if (editRow) { + + handleUpdate( + editRow.id, + data.name, + data.email, + data.phone, + data.password + ); + } else { + + handleCreate(data); + } handleClose(); reset(); @@ -79,7 +91,7 @@ const AddUserModal: React.FC = ({ justifyContent: "space-between", }} > - {editRow ? "Edit Admin" : "Add Admin"} + {editRow ? "Edit User" : "Add User"} = ({ }; export default AddUserModal; +function handleUpdate(id: any, name: string, email: string, phone: string, password: string) { + throw new Error("Function not implemented."); +} + diff --git a/src/components/AppNavbar/index.tsx b/src/components/AppNavbar/index.tsx index 5652b4f..28fe816 100644 --- a/src/components/AppNavbar/index.tsx +++ b/src/components/AppNavbar/index.tsx @@ -42,7 +42,7 @@ export default function AppNavbar() { sx={{ display: { xs: "auto", md: "none" }, boxShadow: 0, - bgcolor: "background.paper", + backgroundColor:"#1C1C1C", backgroundImage: "none", borderBottom: "1px solid", borderColor: "divider", diff --git a/src/components/CustomTable/index.tsx b/src/components/CustomTable/index.tsx index 4927964..0f24bd7 100644 --- a/src/components/CustomTable/index.tsx +++ b/src/components/CustomTable/index.tsx @@ -1,3 +1,4 @@ + import * as React from "react"; import { styled } from "@mui/material/styles"; import Table from "@mui/material/Table"; @@ -12,24 +13,30 @@ import { useDispatch } from "react-redux"; import { Box, Button, - dividerClasses, IconButton, - listClasses, + InputAdornment, Menu, + Pagination, + TextField, + Typography, } from "@mui/material"; -import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"; +import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded"; import DeleteModal from "../Modals/DeleteModal"; import { AppDispatch } from "../../redux/store/store"; import ViewModal from "../Modals/ViewModal"; +import SearchIcon from "@mui/icons-material/Search"; +import TuneIcon from "@mui/icons-material/Tune"; // Styled components for customization const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { - backgroundColor: " #1565c0", + backgroundColor: "#454545", // Changed to #272727 for the header color: theme.palette.common.white, + borderBottom: "none", // Remove any border at the bottom of the header }, [`&.${tableCellClasses.body}`]: { fontSize: 14, + borderBottom: "1px solid #454545", // Adding border to body cells }, })); @@ -37,8 +44,9 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ "&:nth-of-type(odd)": { backgroundColor: theme.palette.action.hover, }, - "&:last-child td, &:last-child th": { - border: 0, + "& td, th": { + borderColor: "#454545", // Applying border color to both td and th + borderWidth: "1px", // Set border width to ensure it appears }, })); @@ -62,7 +70,8 @@ interface CustomTableProps { setViewModal: Function; deleteModal: boolean; handleStatusToggle: (id: string, currentStatus: number) => void; - tableType?: string; + tableType: string; // Adding tableType prop to change header text dynamically + handleClickOpen: () => void; } const CustomTable: React.FC = ({ @@ -76,10 +85,15 @@ const CustomTable: React.FC = ({ setModalOpen, handleStatusToggle, tableType, + handleClickOpen, + }) => { const dispatch = useDispatch(); const [anchorEl, setAnchorEl] = React.useState(null); const [selectedRow, setSelectedRow] = React.useState(null); + const [searchQuery, setSearchQuery] = React.useState(""); + const [currentPage, setCurrentPage] = React.useState(1); + const usersPerPage = 10; const open = Boolean(anchorEl); @@ -124,32 +138,164 @@ const CustomTable: React.FC = ({ handleClose(); }; +const filteredRows = rows.filter( + (row) => + (row.name && + row.name.toLowerCase().includes(searchQuery.toLowerCase())) || + false +); + + + const indexOfLastRow = currentPage * usersPerPage; + const indexOfFirstRow = indexOfLastRow - usersPerPage; + const currentRows = filteredRows.slice(indexOfFirstRow, indexOfLastRow); + + const handlePageChange = ( + event: React.ChangeEvent, + value: number + ) => { + setCurrentPage(value); + }; + return ( - - - + + {/* Dynamic title based on the page type */} + {tableType === "admin" + ? "Admin" + : tableType === "role" + ? "Roles" + : tableType === "user" + ? "Users" + : tableType === "manager" + ? "Managers" + : tableType === "vehicle" + ? "Vehicles" + : "List"} + + + {/* Search & Buttons Section */} + + + + + ), + }} + value={searchQuery} + onChange={(e) => setSearchQuery(e.target.value)} + /> + - + + + + + + + + + {/* Table Section */} + +
+ + {" "} {columns.map((column) => ( {column.label} @@ -158,20 +304,14 @@ const CustomTable: React.FC = ({ - {rows.map((row, rowIndex) => ( + {currentRows.map((row, rowIndex) => ( {columns.map((column) => ( {isImage(row[column.id]) ? ( @@ -192,8 +332,24 @@ const CustomTable: React.FC = ({ handleClick(e, row); setRowData(row); // Store the selected row }} + sx={{ + padding: 0, + minWidth: 0, + width: "auto", + height: "auto", + backgroundColor: + "transparent", + color: "#FFFFFF", + border: "none", + "&:hover": { + backgroundColor: + "transparent", + }, + }} > - + )} @@ -204,6 +360,40 @@ const CustomTable: React.FC = ({
+ {/* Pagination */} + + + Page Number : + + + + {/* Menu Actions */} {open && ( = ({ transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ - [`& .${listClasses.root}`]: { - padding: "4px", - }, [`& .${paperClasses.root}`]: { padding: 0, }, - [`& .${dividerClasses.root}`]: { - margin: "4px -4px", - }, }} > = ({ sx={{ justifyContent: "flex-start", py: 0, - textTransform: "capitalize", + fontWeight: "bold", + color: "#52ACDF", }} > View @@ -258,6 +443,7 @@ const CustomTable: React.FC = ({ id={selectedRow?.id} /> )} + - - {tableType === "roleList" && ( - @@ -289,24 +486,25 @@ const CustomTable: React.FC = ({ sx={{ justifyContent: "flex-start", py: 0, - textTransform: "capitalize", + fontWeight: "bold", + color: "red", }} > Delete - {deleteModal && ( - - handleDeleteButton(selectedRow?.id) - } - open={deleteModal} - setDeleteModal={setDeleteModal} - id={selectedRow?.id} - /> - )} )} + + {/* Modals */} + {deleteModal && ( + handleDeleteButton(selectedRow?.id)} + open={deleteModal} + setDeleteModal={setDeleteModal} + id={selectedRow?.id} + /> + )} ); }; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 4c3f027..83dca3c 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -8,29 +8,43 @@ import SearchIcon from "@mui/icons-material/Search"; import Divider from "@mui/material/Divider"; import MenuButton from "../MenuButton"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; -import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown"; import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded"; +import SideMenu from "../SideMenu"; +import { useDispatch, useSelector } from "react-redux"; +import { AppDispatch, RootState } from "../../redux/store/store"; +import { fetchAdminProfile } from "../../redux/slices/profileSlice"; +import OptionsMenu from "../OptionsMenu"; +import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone"; export default function Header() { const [showNotifications, setShowNotifications] = React.useState(false); const toggleNotifications = () => { setShowNotifications((prev) => !prev); }; + const [open, setOpen] = React.useState(true); + const dispatch = useDispatch(); + const { user } = useSelector( + (state: RootState) => state?.profileReducer + ); + + React.useEffect(() => { + dispatch(fetchAdminProfile()); + }, [dispatch]); return ( - - + @@ -75,32 +89,20 @@ export default function Header() { display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens }} > - {/* Custom Bell Icon */} - - - + + + + + {user?.name || "No Admin"} + - - - - - Momah - - {/* Dropdown Icon */} - - - {/* */} + + {showNotifications && (
Weekly - +
diff --git a/src/components/MainGrid/index.tsx b/src/components/MainGrid/index.tsx index b522cc8..491dc4e 100644 --- a/src/components/MainGrid/index.tsx +++ b/src/components/MainGrid/index.tsx @@ -48,7 +48,7 @@ export default function MainGrid() { spacing={2} columns={12} - sx={{ mb: (theme) => theme.spacing(2) }} + // sx={{ mb: (theme) => theme.spacing(2) }} > {data.map((card, index) => ( diff --git a/src/components/OptionsMenu/index.tsx b/src/components/OptionsMenu/index.tsx index 1778e11..42a89f9 100644 --- a/src/components/OptionsMenu/index.tsx +++ b/src/components/OptionsMenu/index.tsx @@ -1,21 +1,15 @@ import * as React from "react"; import { styled } from "@mui/material/styles"; -import Divider, { dividerClasses } from "@mui/material/Divider"; import Menu from "@mui/material/Menu"; import MuiMenuItem from "@mui/material/MenuItem"; -import { paperClasses } from "@mui/material/Paper"; -import { listClasses } from "@mui/material/List"; -import ListItemText from "@mui/material/ListItemText"; -import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon"; -import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded"; -import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"; -import MenuButton from "../MenuButton"; -import { Avatar } from "@mui/material"; -import { useNavigate } from "react-router-dom"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import Link from "@mui/material/Link"; import Logout from "../LogOutFunction/LogOutFunction"; - +import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon"; +import { ListItemText } from "@mui/material"; const MenuItem = styled(MuiMenuItem)({ margin: "2px 0", + borderBottom: "none", }); export default function OptionsMenu({ avatar }: { avatar?: boolean }) { @@ -28,90 +22,58 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) { const handleClose = () => { setAnchorEl(null); }; - //Eknoor singh and jaanvi - //date:- 12-Feb-2025 - //Made a navigation page for the profile page - const navigate = useNavigate(); - const handleProfile = () => { - navigate("/panel/profile"); - }; - - //jaanvi - //date:- 13-Feb-2025 return ( - - {avatar ? ( - - ) : ( - - )} - + - Profile - My account - - Add another account - Settings - - - {/* //Eknoor singh and jaanvi - //date:- 13-Feb-2025 - //Implemented logout functionality which was static previously */} - + Profile + + { e.stopPropagation(); setLogoutModal(true); }} + sx={{ color: "red" }} > Logout + - - - - diff --git a/src/components/ResourcePieChart/index.tsx b/src/components/ResourcePieChart/index.tsx index fa14a6d..f257558 100644 --- a/src/components/ResourcePieChart/index.tsx +++ b/src/components/ResourcePieChart/index.tsx @@ -32,14 +32,14 @@ export default function ResourcePieChart() { flexGrow: 1, width: "100%", height: "100%", - backgroundColor: "#F2F2F2", + backgroundColor: "#202020", }} > - + {entry.title} diff --git a/src/components/SessionsChart/index.tsx b/src/components/SessionsChart/index.tsx index 22c7ddb..381df18 100644 --- a/src/components/SessionsChart/index.tsx +++ b/src/components/SessionsChart/index.tsx @@ -12,7 +12,7 @@ export default function SessionsChart() { sx={{ width: "100%", height: "100%", - backgroundColor: "#F2F2F2", + backgroundColor: "#202020", p: 2, }} > @@ -20,7 +20,7 @@ export default function SessionsChart() { Delhi NCR EV Station - + {/* Grid container for the four boxes */} @@ -86,8 +86,8 @@ export default function SessionsChart() { height: "84px", borderRadius: "8px", p: "12px 16px", - backgroundColor: "#FFFFFF", - color: "#202020", + backgroundColor: "#272727", + color: "#F2F2F2", }} > (); const { user } = useSelector((state: RootState) => state?.profileReducer); @@ -73,39 +69,7 @@ export default function SideMenu() {