From 4835cfcebe3d709e9c2389de4a007f0ca69045de Mon Sep 17 00:00:00 2001 From: Eknoor Singh Date: Tue, 8 Apr 2025 16:59:06 +0530 Subject: [PATCH] Latest changes as per UI requirement --- public/logo.png | Bin 0 -> 4353 bytes public/mobileLogo.png | 0 .../AddEditAdminModal/addEditAdminModal.tsx | 10 + .../AddManagerModal/addManagerModal.tsx | 52 +++- src/components/AddSlotModal/addSlotModal.tsx | 21 +- .../AddStationLocation/addStationLocation.tsx | 3 +- .../AddStationModal/addStationModal.tsx | 225 +++++++++--------- src/components/AddUserModal/addUserModal.tsx | 5 + .../AddVehicleModal/addVehicleModal.tsx | 10 + src/components/AppNavbar/index.tsx | 100 ++++++-- src/components/CustomTable/customTable.tsx | 192 ++++++++++----- .../EditManagerModal/editManagerModal.tsx | 7 + .../EditStationModal/editSationModal.tsx | 5 + .../EditUserModal/editUserModal.tsx | 19 +- .../EditVehicleModal/editVehicleModal.tsx | 5 + src/components/Header/index.tsx | 38 ++- .../LineChartCard/lineChartCard.tsx | 7 +- .../ResourcePieChart/resourcePieChart.tsx | 103 ++++---- src/components/SideMenuMobile/index.tsx | 11 + src/layouts/DashboardLayout/index.tsx | 19 +- src/pages/ProfilePage/index.tsx | 117 ++++----- src/router.tsx | 10 +- 22 files changed, 608 insertions(+), 351 deletions(-) create mode 100644 public/logo.png create mode 100644 public/mobileLogo.png diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..9749af7e83a7825b3f516f46998b6608f154ad1e GIT binary patch literal 4353 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 literal 0 HcmV?d00001 diff --git a/public/mobileLogo.png b/public/mobileLogo.png new file mode 100644 index 0000000..e69de29 diff --git a/src/components/AddEditAdminModal/addEditAdminModal.tsx b/src/components/AddEditAdminModal/addEditAdminModal.tsx index 57c2267..0f85b81 100644 --- a/src/components/AddEditAdminModal/addEditAdminModal.tsx +++ b/src/components/AddEditAdminModal/addEditAdminModal.tsx @@ -158,6 +158,7 @@ const AddEditCategoryModal: React.FC = ({ display: "flex", flexDirection: "column", width: "50%", + ...autofillFix, }} > @@ -189,8 +190,11 @@ const AddEditCategoryModal: React.FC = ({ {...field} required placeholder="Enter Admin Name" + // autoComplete="new-username" + type="text" fullWidth size="small" + sx={{ marginTop: 1 }} error={!!errors.name} helperText={errors.name?.message} /> @@ -229,6 +233,7 @@ const AddEditCategoryModal: React.FC = ({ type="email" placeholder="Email" autoComplete="new-email" + sx={{ marginTop: 1 }} required fullWidth color={ @@ -294,6 +299,7 @@ const AddEditCategoryModal: React.FC = ({ : "primary" } size="small" + sx={{ marginTop: 1 }} slotProps={{ input: { endAdornment: ( @@ -329,6 +335,7 @@ const AddEditCategoryModal: React.FC = ({ display: "flex", flexDirection: "column", width: "50%", + ...autofillFix, }} > @@ -358,6 +365,7 @@ const AddEditCategoryModal: React.FC = ({ required placeholder="Enter Phone Number" size="small" + sx={{ marginTop: 1 }} error={!!errors.phone} helperText={errors.phone?.message} /> @@ -372,6 +380,7 @@ const AddEditCategoryModal: React.FC = ({ display: "flex", flexDirection: "column", width: "50%", + ...autofillFix, }} > @@ -392,6 +401,7 @@ const AddEditCategoryModal: React.FC = ({ {/* Manager Name */} - + Manager Name @@ -129,6 +129,8 @@ export default function AddManagerModal({ fullWidth placeholder="Enter Manager Name" size="small" + sx={{ marginTop: 1 }} + error={!!errors.name} helperText={ errors.name ? errors.name.message : "" @@ -158,17 +160,43 @@ export default function AddManagerModal({ {/* Station Dropdown */} - + Select Station - - Select Station + {errors.stationName && ( - + {errors.stationName.message} )} @@ -206,6 +238,8 @@ export default function AddManagerModal({ fullWidth placeholder="Enter Manager Email" size="small" + sx={{ marginTop: 1 }} + autoComplete="new-email" error={!!errors.email} helperText={ @@ -246,6 +280,8 @@ export default function AddManagerModal({ - + Phone Number @@ -297,6 +333,8 @@ export default function AddManagerModal({ fullWidth placeholder="Enter Phone Number" size="small" + sx={{ marginTop: 1 }} + error={!!errors.phone} helperText={ errors.phone ? errors.phone.message : "" diff --git a/src/components/AddSlotModal/addSlotModal.tsx b/src/components/AddSlotModal/addSlotModal.tsx index 96493bc..d6602de 100644 --- a/src/components/AddSlotModal/addSlotModal.tsx +++ b/src/components/AddSlotModal/addSlotModal.tsx @@ -38,13 +38,17 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => { Add EV Slot
+ + Date + value >= today || "Date cannot be in the past", })} - label="Date" + // label="Date" + // sx={{ marginTop: 1 }} type="date" fullWidth margin="normal" @@ -58,12 +62,16 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => { // Set the min value to today's date inputProps={{ min: today }} /> + + Start Hour + { error={!!errors.startHour} helperText={errors.startHour?.message} /> + + End Hour + { justifyContent="space-between" gap={2} > + diff --git a/src/components/AddStationLocation/addStationLocation.tsx b/src/components/AddStationLocation/addStationLocation.tsx index a735b63..98d2bed 100644 --- a/src/components/AddStationLocation/addStationLocation.tsx +++ b/src/components/AddStationLocation/addStationLocation.tsx @@ -44,7 +44,8 @@ const AddStationLocationModal = ({ "City name must be at least 2 characters", }, })} - label="City Name" + // label="City Name" + placeholder="Enter City Name" fullWidth margin="normal" error={!!errors.city} diff --git a/src/components/AddStationModal/addStationModal.tsx b/src/components/AddStationModal/addStationModal.tsx index ccaf20e..a27b518 100644 --- a/src/components/AddStationModal/addStationModal.tsx +++ b/src/components/AddStationModal/addStationModal.tsx @@ -22,6 +22,8 @@ import { vehicleList, } from "../../redux/slices/VehicleSlice.ts"; // Adjust this import path accordingly import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components +import React from "react"; +import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx"; export default function AddStationModal({ open, @@ -158,6 +160,7 @@ export default function AddStationModal({ display: "flex", flexDirection: "column", width: "100%", + ...autofillFix, }} > @@ -167,6 +170,7 @@ export default function AddStationModal({ fullWidth placeholder="Enter Station Name" size="small" + sx={{ marginTop: 1 }} error={!!errors.name} helperText={ errors.name ? errors.name.message : "" @@ -192,6 +196,7 @@ export default function AddStationModal({ display: "flex", flexDirection: "column", width: "100%", + ...autofillFix, }} > @@ -201,6 +206,8 @@ export default function AddStationModal({ fullWidth placeholder="Enter Charging Station Address" size="small" + sx={{ marginTop: 1 }} + error={!!errors.registeredAddress} helperText={ errors.registeredAddress @@ -231,6 +238,8 @@ export default function AddStationModal({ fullWidth placeholder="Enter Total Slots" size="small" + sx={{ marginTop: 1 }} + type="number" error={!!errors.totalSlots} helperText={ @@ -252,116 +261,118 @@ export default function AddStationModal({ {/* Vehicle Brand Dropdown with Checkboxes */} - - - Vehicle Brand - - - { + if (selected.length === 0) { + return ( + + Choose Brands + + ); + } + + const displayNames = ( + selected as string[] + ).slice(0, 1); + const moreCount = + (selected as string[]).length - + 1; + + return ( + + {displayNames.map((id) => { + const brand = + vehicleBrands.find( + (b) => + b.id === id + ); + return brand ? ( + + ) : null; + })} + {moreCount > 0 && ( + )} - /> - + + ); + }} + MenuProps={{ + PaperProps: { + style: { + maxHeight: 224, + }, + }, + }} + > + {vehicleBrands.length > 0 ? ( + vehicleBrands.map((brand) => ( + + + + + )) + ) : ( + + No vehicle brands available - )) - ) : ( - - No vehicle brands available - - )} - - - {errors.vehicleBrand - ? errors.vehicleBrand.message - : ""} - - - + )} + + + {errors.vehicleBrand + ? errors.vehicleBrand.message + : ""} + + + {/* Replace the Vehicle Name Dropdown code with this */} { diff --git a/src/components/AddUserModal/addUserModal.tsx b/src/components/AddUserModal/addUserModal.tsx index b0a38fd..c494588 100644 --- a/src/components/AddUserModal/addUserModal.tsx +++ b/src/components/AddUserModal/addUserModal.tsx @@ -140,6 +140,7 @@ const AddUserModal: React.FC = ({ placeholder="Enter User Name" fullWidth size="small" + sx={{ marginTop: 1 }} error={!!errors.name} helperText={errors.name?.message} /> @@ -177,6 +178,7 @@ const AddUserModal: React.FC = ({ type="email" placeholder="Email" autoComplete="new-email" + sx={{ marginTop: 1 }} required fullWidth color={ @@ -228,6 +230,7 @@ const AddUserModal: React.FC = ({ : "primary" } size="small" + sx={{ marginTop: 1 }} slotProps={{ input: { endAdornment: ( @@ -261,6 +264,7 @@ const AddUserModal: React.FC = ({ display: "flex", flexDirection: "column", flex: 1, + ...autofillFix, }} > @@ -292,6 +296,7 @@ const AddUserModal: React.FC = ({ required placeholder="Enter Phone Number" size="small" + sx={{ marginTop: 1 }} error={!!errors.phone} helperText={errors.phone?.message} /> diff --git a/src/components/AddVehicleModal/addVehicleModal.tsx b/src/components/AddVehicleModal/addVehicleModal.tsx index ae21e46..450975d 100644 --- a/src/components/AddVehicleModal/addVehicleModal.tsx +++ b/src/components/AddVehicleModal/addVehicleModal.tsx @@ -94,6 +94,8 @@ export default function AddVehicleModal({ fullWidth placeholder="Enter Company Name" size="small" + sx={{ marginTop: 1 }} + error={!!errors.company} helperText={ errors.company @@ -124,6 +126,8 @@ export default function AddVehicleModal({ fullWidth placeholder="Enter Vehicle Name" size="small" + sx={{ marginTop: 1 }} + error={!!errors.name} helperText={ errors.name ? errors.name.message : "" @@ -166,6 +170,8 @@ export default function AddVehicleModal({ fullWidth placeholder="Enter Model Name" size="small" + sx={{ marginTop: 1 }} + error={!!errors.modelName} helperText={ errors.modelName @@ -192,6 +198,8 @@ export default function AddVehicleModal({ fullWidth placeholder="Enter Charge Type" size="small" + sx={{ marginTop: 1 }} + error={!!errors.chargeType} helperText={ errors.chargeType @@ -220,6 +228,8 @@ export default function AddVehicleModal({ fullWidth placeholder="Enter Image URL" size="small" + sx={{ marginTop: 1 }} + error={!!errors.imageUrl} helperText={ errors.imageUrl diff --git a/src/components/AppNavbar/index.tsx b/src/components/AppNavbar/index.tsx index 929dfa6..897212a 100644 --- a/src/components/AppNavbar/index.tsx +++ b/src/components/AppNavbar/index.tsx @@ -9,8 +9,16 @@ import Typography from "@mui/material/Typography"; import MenuRoundedIcon from "@mui/icons-material/MenuRounded"; import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded"; import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown"; +import { useDispatch, useSelector } from "react-redux"; +import { AppDispatch, RootState } from "../../redux/store/store"; +import { fetchAdminProfile } from "../../redux/slices/profileSlice"; +import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone"; +import InputBase from "@mui/material/InputBase"; +import SearchIcon from "@mui/icons-material/Search"; import MenuButton from "../MenuButton"; import SideMenuMobile from "../SideMenuMobile"; +import { Avatar } from "@mui/material"; +import OptionsMenu from "../OptionsMenu"; const Toolbar = styled(MuiToolbar)({ width: "100%", @@ -30,18 +38,28 @@ const Toolbar = styled(MuiToolbar)({ export default function AppNavbar() { const [open, setOpen] = React.useState(false); + const [showNotifications, setShowNotifications] = React.useState(false); + const toggleNotifications = () => { + setShowNotifications((prev) => !prev); + }; + const dispatch = useDispatch(); + const { user } = useSelector((state: RootState) => state?.profileReducer); const toggleDrawer = (newOpen: boolean) => () => { setOpen(newOpen); }; + React.useEffect(() => { + dispatch(fetchAdminProfile()); + }, [dispatch]); + return ( - Dashboard + */} + + + + + + + + + + {user?.name || "No Adminsss"} + + {/* */} @@ -85,26 +154,29 @@ export default function AppNavbar() { } export function CustomIcon() { + const [open, setOpen] = React.useState(true); + return ( - + Logo ); } diff --git a/src/components/CustomTable/customTable.tsx b/src/components/CustomTable/customTable.tsx index c62eda9..0d02790 100644 --- a/src/components/CustomTable/customTable.tsx +++ b/src/components/CustomTable/customTable.tsx @@ -58,9 +58,13 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ "&:nth-of-type(odd)": { backgroundColor: theme.palette.action.hover, }, + "&:nth-of-type(even)": { + backgroundColor: theme.palette.action.hover, + }, "& td, th": { borderColor: "#454545", // Applying border color to both td and th borderWidth: "1px", // Set border width to ensure it appears + borderBottom: "1px solid #454545", }, })); @@ -227,11 +231,16 @@ const CustomTable: React.FC = ({ return ( = ({ = ({ value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} /> + = ({ )} - = ({ }} > - + */} {/* Table Section */} = ({ marginTop: "24px", backgroundColor: "#1C1C1C", borderRadius: "12px", - overflow: "hidden", + overflow: "auto", + maxWidth: "100%", + "&::-webkit-scrollbar": { + height: "3px", + }, + "&::-webkit-scrollbar-track": { + background: "#1C1C1C", + }, + "&::-webkit-scrollbar-thumb": { + background: "#52ACDF", + borderRadius: "4px", + }, }} > - +
= ({ ".css-1ex4ubw-MuiTableCell-root.MuiTableCell-head ": { backgroundColor: "#272727", + borderBottom: "1px solid #454545", }, }} > @@ -419,6 +443,16 @@ const CustomTable: React.FC = ({ sx={{ color: "#FFFFFF", fontWeight: "600", + ...(column.id === "action" && { + position: "sticky", + right: 0, + zIndex: 2, + backgroundColor: "#272727", + boxShadow: + "-5px 0 5px -2px rgba(0,0,0,0.15)", + borderBottom: + "1px solid #454545", + }), }} > {column.label} @@ -433,51 +467,103 @@ const CustomTable: React.FC = ({ }, }} > - {currentRows.map((row, rowIndex) => ( - - {columns.map((column) => ( - - {isImage(row[column.id]) ? ( - Row - ) : column.id !== "action" ? ( - row[column.id] - ) : ( - { - handleClick(e, row); - setRowData(row); // Store the selected row - }} - sx={{ - padding: 0, - minWidth: 0, - width: "auto", - height: "auto", - color: "#FFFFFF", - }} - > - - - )} - - ))} + {/* This is where the modification starts */} + {currentRows.length === 0 ? ( + + + {(() => { + switch (tableType) { + case "admin": + return "No admins found"; + case "role": + return "No roles found"; + case "user": + return "No users found"; + case "manager": + return "No managers found"; + case "vehicle": + return "No vehicles found"; + case "station": + return "No charging stations found"; + case "external-station": + return "No charging stations found"; + case "booking": + return "No bookings found"; + case "slots": + return "No slots found"; + case "all-available-slots": + return "No available slots found"; + default: + return "No data available"; + } + })()} + - ))} + ) : ( + currentRows.map((row, rowIndex) => ( + + {columns.map((column) => ( + + {isImage(row[column.id]) ? ( + Row + ) : column.id !== "action" ? ( + row[column.id] + ) : ( + { + handleClick(e, row); + setRowData(row); + }} + sx={{ + padding: 0, + minWidth: 0, + width: "auto", + height: "auto", + color: "#FFFFFF", + }} + > + + + )} + + ))} + + )) + )}
diff --git a/src/components/EditManagerModal/editManagerModal.tsx b/src/components/EditManagerModal/editManagerModal.tsx index 8782105..d4ce7d7 100644 --- a/src/components/EditManagerModal/editManagerModal.tsx +++ b/src/components/EditManagerModal/editManagerModal.tsx @@ -171,6 +171,8 @@ const EditManagerModal: React.FC = ({ fullWidth placeholder="Enter Manager Name" size="small" + sx={{ marginTop: 1 }} + error={!!errors.name} helperText={errors.name?.message} /> @@ -193,6 +195,8 @@ const EditManagerModal: React.FC = ({ fullWidth placeholder="Enter Email" size="small" + sx={{ marginTop: 1 }} + error={!!errors.email} helperText={errors.email?.message} /> @@ -215,6 +219,8 @@ const EditManagerModal: React.FC = ({ fullWidth placeholder="Enter Phone Number" size="small" + sx={{ marginTop: 1 }} + error={!!errors.phone} helperText={errors.phone?.message} /> @@ -235,6 +241,7 @@ const EditManagerModal: React.FC = ({ borderRadius: "8px", width: "117px", "&:hover": { backgroundColor: "#439BC1" }, + whiteSpace: "pre", }} disabled={loading} > diff --git a/src/components/EditStationModal/editSationModal.tsx b/src/components/EditStationModal/editSationModal.tsx index ae22c1f..320960c 100644 --- a/src/components/EditStationModal/editSationModal.tsx +++ b/src/components/EditStationModal/editSationModal.tsx @@ -249,6 +249,7 @@ const EditStationModal: React.FC = ({ fullWidth placeholder="Enter Station Name" size="small" + sx={{ marginTop: 1 }} error={!!errors.name} helperText={ errors.name @@ -282,6 +283,7 @@ const EditStationModal: React.FC = ({ fullWidth placeholder="Enter Registered Address" size="small" + sx={{ marginTop: 1 }} error={!!errors.registeredAddress} helperText={ errors.registeredAddress @@ -320,6 +322,7 @@ const EditStationModal: React.FC = ({ fullWidth placeholder="Enter Total Slots" size="small" + sx={{ marginTop: 1 }} type="number" error={!!errors.totalSlots} helperText={ @@ -349,6 +352,7 @@ const EditStationModal: React.FC = ({ Choose Brand { diff --git a/src/components/EditUserModal/editUserModal.tsx b/src/components/EditUserModal/editUserModal.tsx index 23bf1c3..09b945e 100644 --- a/src/components/EditUserModal/editUserModal.tsx +++ b/src/components/EditUserModal/editUserModal.tsx @@ -2,10 +2,7 @@ import React, { useEffect } from "react"; import { Box, Button, Typography, Modal } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import { useForm, Controller } from "react-hook-form"; -import { - CustomIconButton, - CustomTextField, -} from "../AddUserModal/styled.css"; +import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; interface EditUserModalProps { open: boolean; @@ -14,7 +11,7 @@ interface EditUserModalProps { id: number, name: string, email: string, - phone: string, + phone: string ) => void; editRow: any; } @@ -23,7 +20,6 @@ interface FormData { name: string; email: string; phone: string; - } const EditUserModal: React.FC = ({ @@ -59,12 +55,7 @@ const EditUserModal: React.FC = ({ const onSubmit = (data: FormData) => { if (editRow) { - handleUpdate( - editRow.id, - data.name, - data.email, - data.phone, - ); + handleUpdate(editRow.id, data.name, data.email, data.phone); } handleClose(); // Close the modal reset(); // Reset the form fields @@ -132,6 +123,7 @@ const EditUserModal: React.FC = ({ fullWidth placeholder="Enter Full Name" size="small" + sx={{ marginTop: 1 }} error={!!errors.name} helperText={errors.name?.message} /> @@ -155,6 +147,7 @@ const EditUserModal: React.FC = ({ fullWidth placeholder="Enter Email" size="small" + sx={{ marginTop: 1 }} error={!!errors.email} helperText={errors.email?.message} /> @@ -177,13 +170,13 @@ const EditUserModal: React.FC = ({ fullWidth placeholder="Enter Phone Number" size="small" + sx={{ marginTop: 1 }} error={!!errors.phone} helperText={errors.phone?.message} /> )} /> - {/* Submit Button */} diff --git a/src/components/EditVehicleModal/editVehicleModal.tsx b/src/components/EditVehicleModal/editVehicleModal.tsx index 26e155d..e7a6863 100644 --- a/src/components/EditVehicleModal/editVehicleModal.tsx +++ b/src/components/EditVehicleModal/editVehicleModal.tsx @@ -174,6 +174,7 @@ const EditVehicleModal: React.FC = ({ fullWidth placeholder="Enter Vehicle Name" size="small" + sx={{ marginTop: 1 }} error={!!errors.name} helperText={errors.name?.message} @@ -206,6 +207,7 @@ const EditVehicleModal: React.FC = ({ fullWidth placeholder="Enter Company Name" size="small" + sx={{ marginTop: 1 }} error={!!errors.company} helperText={errors.company?.message} /> @@ -240,6 +242,7 @@ const EditVehicleModal: React.FC = ({ fullWidth placeholder="Enter Model Name" size="small" + sx={{ marginTop: 1 }} error={!!errors.modelName} helperText={errors.modelName?.message} /> @@ -271,6 +274,7 @@ const EditVehicleModal: React.FC = ({ fullWidth placeholder="Enter Charge Type" size="small" + sx={{ marginTop: 1 }} error={!!errors.chargeType} helperText={errors.chargeType?.message} /> @@ -300,6 +304,7 @@ const EditVehicleModal: React.FC = ({ fullWidth placeholder="Enter Image URL" size="small" + sx={{ marginTop: 1 }} error={!!errors.imageUrl} helperText={errors.imageUrl?.message} /> diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index fc97372..9abb2d9 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -26,16 +26,25 @@ export default function Header() { }, [dispatch]); return ( {/* Search Bar */} {/* Line Chart */} + data.label), // Use intervals as x-axis labels + data: chartData.map((data) => data.label), }, ]} series={[ @@ -173,7 +175,7 @@ export default function LineChartCard() { showMark: false, curve: "linear", area: true, - data: chartData.map((data) => data.value), // Use interval data for y-axis + data: chartData.map((data) => data.value), color: theme.palette.primary.main, }, ]} @@ -191,6 +193,7 @@ export default function LineChartCard() { id="totalBookings" /> + ); diff --git a/src/components/ResourcePieChart/resourcePieChart.tsx b/src/components/ResourcePieChart/resourcePieChart.tsx index 8e95f91..a9f62c6 100644 --- a/src/components/ResourcePieChart/resourcePieChart.tsx +++ b/src/components/ResourcePieChart/resourcePieChart.tsx @@ -12,10 +12,10 @@ import { useEffect } from "react"; import { fetchDashboardData } from "../../redux/slices/dashboardSlice"; const colorPalette = [ - "hsla(202, 69%, 60%, 1)", - "hsl(204, 48.60%, 72.50%)", - "hsl(214, 56.40%, 30.60%)", - "hsl(222, 6.80%, 50.80%)", + "hsla(202, 69%, 60%, 1)", + "hsl(204, 48.60%, 72.50%)", + "hsl(214, 56.40%, 30.60%)", + "hsl(222, 6.80%, 50.80%)", ]; // const data = [ @@ -26,17 +26,17 @@ const colorPalette = [ // ]; export default function ResourcePieChart() { - const theme = useTheme(); - const isXsScreen = useMediaQuery(theme.breakpoints.down("sm")); - const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md")); - const dispatch = useDispatch(); + const theme = useTheme(); + const isXsScreen = useMediaQuery(theme.breakpoints.down("sm")); + const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md")); + const dispatch = useDispatch(); // // Fetch role and carPortCounts from Redux state // const {user} = useSelector((state: RootState) => state.profileReducer); // Assuming user role is stored in Redux const { carPortCounts } = useSelector( (state: RootState) => state.dashboardReducer ); - console.log("first",carPortCounts) + console.log("first", carPortCounts); // Static data for non-superadmin roles // const staticCarPorts = [ // { carPort: "240V", count: 5 }, @@ -45,52 +45,50 @@ export default function ResourcePieChart() { // { carPort: "Other", count: 7 }, // ]; -useEffect(() => { - + useEffect(() => { dispatch(fetchDashboardData()); - -}, [dispatch]); + }, [dispatch]); -// console.log("Raw CarPortCounts from API:", carPortCounts); + // console.log("Raw CarPortCounts from API:", carPortCounts); -const dataToDisplay =carPortCounts + const dataToDisplay = carPortCounts; -// const dataToDisplay = -// user?.userType === "superadmin" -// ? carPortCounts.filter((entry) => entry.count > 0) // Exclude zero counts -// : staticCarPorts.filter((entry) => entry.count > 0); -// console.log("Filtered Data to Display:", dataToDisplay); - const getChartDimensions = () => { - if (isXsScreen) { - return { - height: 240, - width: 240, - innerRadius: 40, - outerRadius: 80, - margin: { left: 20, right: 20, top: 40, bottom: 40 } - }; - } else if (isSmScreen) { - return { - height: 260, - width: 260, - innerRadius: 50, - outerRadius: 90, - margin: { left: 40, right: 40, top: 60, bottom: 60 } - }; - } else { - return { - height: 350, - width: 350, - innerRadius: 55, - outerRadius: 110, - margin: { left: 60, right: 80, top: 80, bottom: 80 } - }; - } - }; + // const dataToDisplay = + // user?.userType === "superadmin" + // ? carPortCounts.filter((entry) => entry.count > 0) // Exclude zero counts + // : staticCarPorts.filter((entry) => entry.count > 0); + // console.log("Filtered Data to Display:", dataToDisplay); + const getChartDimensions = () => { + if (isXsScreen) { + return { + height: 240, + width: 240, + innerRadius: 40, + outerRadius: 80, + margin: { left: 20, right: 20, top: 40, bottom: 40 }, + }; + } else if (isSmScreen) { + return { + height: 260, + width: 260, + innerRadius: 50, + outerRadius: 90, + margin: { left: 40, right: 40, top: 60, bottom: 60 }, + }; + } else { + return { + height: 350, + width: 350, + innerRadius: 55, + outerRadius: 110, + margin: { left: 60, right: 80, top: 80, bottom: 80 }, + }; + } + }; - const dimensions = getChartDimensions(); + const dimensions = getChartDimensions(); - return ( + return ( - + Car Port Types: + {dataToDisplay.map((entry, index) => ( - ); -} \ No newline at end of file + ); +} diff --git a/src/components/SideMenuMobile/index.tsx b/src/components/SideMenuMobile/index.tsx index c123130..b761442 100644 --- a/src/components/SideMenuMobile/index.tsx +++ b/src/components/SideMenuMobile/index.tsx @@ -14,6 +14,7 @@ import CardAlert from "../CardAlert/CardAlert"; import { AppDispatch, RootState } from "../../redux/store/store"; import { useDispatch, useSelector } from "react-redux"; import { fetchAdminProfile } from "../../redux/slices/profileSlice"; +import Logout from "../LogOutFunction/LogOutFunction"; interface SideMenuMobileProps { open: boolean | undefined; @@ -25,6 +26,7 @@ export default function SideMenuMobile({ toggleDrawer, }: SideMenuMobileProps) { const dispatch = useDispatch(); + const [logoutModal, setLogoutModal] = React.useState(false); const { user } = useSelector((state: RootState) => state?.profileReducer); // React.useEffect(() => { // dispatch(fetchAdminProfile()); @@ -79,9 +81,18 @@ export default function SideMenuMobile({ variant="outlined" fullWidth startIcon={} + onClick={(e) => { + e.stopPropagation(); + setLogoutModal(true); + }} + sx={{ color: "red" }} > Logout + diff --git a/src/layouts/DashboardLayout/index.tsx b/src/layouts/DashboardLayout/index.tsx index 1e36d48..21509cf 100644 --- a/src/layouts/DashboardLayout/index.tsx +++ b/src/layouts/DashboardLayout/index.tsx @@ -16,9 +16,11 @@ const DashboardLayout: React.FC = ({ customStyles }) => { = ({ customStyles }) => { flexDirection: "column", height: "100vh", flexGrow: 1, - // backgroundColor: theme.vars - // ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)` - // : theme.palette.background.default, backgroundColor: theme.palette.background.default, overflow: "auto", + overflowX: "hidden", ...customStyles, mt: { xs: 8, md: 0 }, padding: 0, })} > + +
+ -
diff --git a/src/pages/ProfilePage/index.tsx b/src/pages/ProfilePage/index.tsx index 6cf6e7c..8caadf6 100644 --- a/src/pages/ProfilePage/index.tsx +++ b/src/pages/ProfilePage/index.tsx @@ -52,48 +52,40 @@ const ProfilePage = () => { - + {user?.name || "No Admin"} {user?.userType || "N/A"} @@ -105,18 +97,13 @@ const ProfilePage = () => { /> Personal Information @@ -129,40 +116,22 @@ const ProfilePage = () => { */} - - + + Full Name: - + {user?.name || "N/A"} Phone: @@ -172,8 +141,8 @@ const ProfilePage = () => { Email: @@ -181,24 +150,18 @@ const ProfilePage = () => { {user?.email || "N/A"} + + + Bio: + + + {user?.bio || "No bio available."} + + - - - Bio: - - - {user?.bio || "No bio available."} - diff --git a/src/router.tsx b/src/router.tsx index be0466e..30d7a1d 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -23,7 +23,9 @@ const StationList = lazy(() => import("./pages/StationList")); const EVSlotManagement = lazy(() => import("./pages/EVSlotManagement")); const BookingList = lazy(() => import("./pages/BookingList")); const EvSlotList = lazy(() => import("./pages/EvSlotList")); -const ExternalStationList = lazy(() => import("./pages/ExternalStationList/externalStationList.tsx")); +const ExternalStationList = lazy( + () => import("./pages/ExternalStationList/externalStationList.tsx") +); const AllManagersList = lazy(() => import("./pages/AllMangersList")); const AvailableSlotsList = lazy(() => import("./pages/AvailableSlotsList")); interface ProtectedRouteProps { @@ -32,7 +34,7 @@ interface ProtectedRouteProps { } // Protected Route Component -const ProtectedRoute: React.FC = ({ component }) => { +const ProtectedRoute: React.FC = ({ component }) => { if (!localStorage.getItem("authToken")) { return ; } @@ -127,7 +129,9 @@ export default function AppRouter() { } /> + } + /> } />