diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..9749af7 Binary files /dev/null and b/public/logo.png differ 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 cd962a1..8e8e964 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, }} > @@ -290,6 +294,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 9b6752e..c7b5d7a 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} /> @@ -229,6 +233,8 @@ const EditManagerModal: React.FC = ({ fullWidth placeholder="Enter Phone Number" size="small" + sx={{ marginTop: 1 }} + error={!!errors.phone} helperText={errors.phone?.message} /> @@ -249,6 +255,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 f549677..949a0aa 100644 --- a/src/components/EditUserModal/editUserModal.tsx +++ b/src/components/EditUserModal/editUserModal.tsx @@ -133,6 +133,7 @@ const EditUserModal: React.FC = ({ fullWidth placeholder="Enter Full Name" size="small" + sx={{ marginTop: 1 }} error={!!errors.name} helperText={errors.name?.message} /> @@ -163,6 +164,7 @@ const EditUserModal: React.FC = ({ fullWidth placeholder="Enter Email" size="small" + sx={{ marginTop: 1 }} error={!!errors.email} helperText={errors.email?.message} /> @@ -199,6 +201,7 @@ const EditUserModal: React.FC = ({ fullWidth placeholder="Enter Phone Number" size="small" + sx={{ marginTop: 1 }} error={!!errors.phone} helperText={errors.phone?.message} /> 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() { } /> + } + /> } />