From dc327f97fc142c268f43fb31bd7bbce52c273453 Mon Sep 17 00:00:00 2001 From: jaanvi Date: Mon, 31 Mar 2025 18:28:38 +0530 Subject: [PATCH 1/2] fix the bugs and add NoteFoundPage --- src/components/AddAdmin/index.tsx | 139 ---------------- .../{index.tsx => addBookingModal.tsx} | 14 +- .../addEditAdminModal.tsx} | 57 ++++--- .../{index.tsx => addManagerModal.tsx} | 14 +- .../{index.tsx => addSlotModal.tsx} | 0 .../{index.tsx => addStationModal.tsx} | 6 +- .../{index.tsx => addVehicleModal.tsx} | 0 .../{index.tsx => availableSlotsModal.tsx} | 0 .../{index.tsx => customTable.tsx} | 16 +- src/components/EditAdmin/index.tsx | 153 ------------------ .../{index.tsx => editManagerModal.tsx} | 5 +- .../{index.tsx => editSlotModal.tsx} | 14 +- .../{index.tsx => editSationModal.tsx} | 0 .../{index.tsx => editVehicleModal.tsx} | 0 src/components/Header/index.tsx | 2 +- .../{index.tsx => lineChartCard.tsx} | 51 +++--- .../MainGrid/{index.tsx => mainGrid.tsx} | 10 +- .../{index.tsx => resourcePieChart.tsx} | 3 - .../{index.tsx => sessionChart.tsx} | 68 ++++---- .../SideMenu/{index.tsx => sideMenu.tsx} | 6 +- src/components/SideMenuMobile/index.tsx | 6 +- .../StatCard/{index.tsx => statCard.tsx} | 0 src/components/barChartCard/barChartCard.tsx | 130 +++++++++++++++ src/components/barChartCard/index.tsx | 113 ------------- src/index.css | 5 +- src/layouts/DashboardLayout/index.tsx | 2 +- src/pages/AdminList/index.tsx | 9 +- src/pages/Auth/Login/index.tsx | 30 ++-- src/pages/BookingList/index.tsx | 4 +- src/pages/Dashboard/index.tsx | 2 +- src/pages/EvSlotList/index.tsx | 6 +- src/pages/ManagerList/index.tsx | 6 +- src/pages/NotFound/index.tsx | 120 +++++++++++++- src/pages/ProfilePage/index.tsx | 4 +- src/pages/RoleList/index.tsx | 3 +- src/pages/StationList/index.tsx | 6 +- src/pages/UserList/index.tsx | 6 +- src/pages/VehicleList/index.tsx | 6 +- src/router.tsx | 1 + 39 files changed, 429 insertions(+), 588 deletions(-) delete mode 100644 src/components/AddAdmin/index.tsx rename src/components/AddBookingModal/{index.tsx => addBookingModal.tsx} (97%) rename src/components/{AddEditCategoryModal/index.tsx => AddEditAdminModal/addEditAdminModal.tsx} (92%) rename src/components/AddManagerModal/{index.tsx => addManagerModal.tsx} (94%) rename src/components/AddSlotModal/{index.tsx => addSlotModal.tsx} (100%) rename src/components/AddStationModal/{index.tsx => addStationModal.tsx} (98%) rename src/components/AddVehicleModal/{index.tsx => addVehicleModal.tsx} (100%) rename src/components/AvailableSlotModal/{index.tsx => availableSlotsModal.tsx} (100%) rename src/components/CustomTable/{index.tsx => customTable.tsx} (97%) delete mode 100644 src/components/EditAdmin/index.tsx rename src/components/EditManagerModal/{index.tsx => editManagerModal.tsx} (94%) rename src/components/EditSlotModal/{index.tsx => editSlotModal.tsx} (96%) rename src/components/EditStationModal/{index.tsx => editSationModal.tsx} (100%) rename src/components/EditVehicleModal/{index.tsx => editVehicleModal.tsx} (100%) rename src/components/LineChartCard/{index.tsx => lineChartCard.tsx} (79%) rename src/components/MainGrid/{index.tsx => mainGrid.tsx} (84%) rename src/components/ResourcePieChart/{index.tsx => resourcePieChart.tsx} (94%) rename src/components/SessionsChart/{index.tsx => sessionChart.tsx} (67%) rename src/components/SideMenu/{index.tsx => sideMenu.tsx} (97%) rename src/components/StatCard/{index.tsx => statCard.tsx} (100%) create mode 100644 src/components/barChartCard/barChartCard.tsx delete mode 100644 src/components/barChartCard/index.tsx diff --git a/src/components/AddAdmin/index.tsx b/src/components/AddAdmin/index.tsx deleted file mode 100644 index f184486..0000000 --- a/src/components/AddAdmin/index.tsx +++ /dev/null @@ -1,139 +0,0 @@ -// import React from "react"; -// import { -// Button, -// Dialog, -// DialogActions, -// DialogContent, -// DialogTitle, -// TextField, -// } from "@mui/material"; -// import { useForm, Controller } from "react-hook-form"; - -// interface AddAdminModalProps { -// open: boolean; -// handleClose: () => void; -// handleAdd: (name: string, email: string, phone: string, registeredAddress: string) => void; -// } - -// interface FormData { -// name: string; -// email: string; -// phone: string; -// registeredAddress: string; -// } - -// const AddAdminModal: React.FC = ({ open, handleClose, handleAdd }) => { -// const { control, handleSubmit, reset, formState: { errors } } = useForm({ -// defaultValues: { -// name: "", -// email: "", -// phone: "", -// registeredAddress: "", -// }, -// }); - -// const onSubmit = (data: FormData) => { -// handleAdd(data.name, data.email, data.phone, data.registeredAddress); -// handleClose(); -// reset(); -// }; - -// return ( -// -// Add Admin -// -// ( -// -// )} -// /> - -// ( -// -// )} -// /> - -// ( -// -// )} -// /> - -// ( -// -// )} -// /> -// -// -// -// -// -// -// ); -// }; - -// export default AddAdminModal; diff --git a/src/components/AddBookingModal/index.tsx b/src/components/AddBookingModal/addBookingModal.tsx similarity index 97% rename from src/components/AddBookingModal/index.tsx rename to src/components/AddBookingModal/addBookingModal.tsx index 06bfb82..71befb5 100644 --- a/src/components/AddBookingModal/index.tsx +++ b/src/components/AddBookingModal/addBookingModal.tsx @@ -5,12 +5,10 @@ import { Button, Typography, Modal, - IconButton, MenuItem, Select, InputLabel, FormControl, - TextField, } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import { useDispatch, useSelector } from "react-redux"; @@ -19,16 +17,15 @@ import { bookingList, getCarNames, getCarPorts, -} from "../../redux/slices/bookSlice"; -import { AppDispatch, RootState } from "../../redux/store/store"; +} from "../../redux/slices/bookSlice.ts"; +import { AppDispatch, RootState } from "../../redux/store/store.ts"; import { toast } from "sonner"; import { CustomIconButton, CustomTextField, } from "../AddEditUserModel/styled.css.tsx"; -import { getAllStations, stationList } from "../../redux/slices/stationSlice.ts"; +import { getAllStations } from "../../redux/slices/stationSlice.ts"; import { fetchAvailableSlots } from "../../redux/slices/slotSlice.ts"; -import dayjs from "dayjs"; export default function AddBookingModal({ open, @@ -53,7 +50,6 @@ export default function AddBookingModal({ const availableSlots = useSelector( (state: RootState) => state.slotReducer.availableSlots ); - console.log("first", availableSlots); useEffect(() => { dispatch(fetchAvailableSlots()); dispatch(getAllStations()); @@ -74,7 +70,7 @@ export default function AddBookingModal({ // Fetch the bookings after this dispatch(bookingList()); }, [dispatch]); -console.log("Car Ports: ", carPorts); + console.log("Car Ports: ", carPorts); // Get today's date in yyyy-mm-dd format const today = new Date().toISOString().split("T")[0]; @@ -164,7 +160,7 @@ console.log("Car Ports: ", carPorts); ))} - {errors.stationName && ( + {errors.stationId && ( {errors.stationName.message} diff --git a/src/components/AddEditCategoryModal/index.tsx b/src/components/AddEditAdminModal/addEditAdminModal.tsx similarity index 92% rename from src/components/AddEditCategoryModal/index.tsx rename to src/components/AddEditAdminModal/addEditAdminModal.tsx index d802b5d..aa2d913 100644 --- a/src/components/AddEditCategoryModal/index.tsx +++ b/src/components/AddEditAdminModal/addEditAdminModal.tsx @@ -1,12 +1,5 @@ import React, { useEffect, useState } from "react"; -import { - Box, - Button, - Typography, - Modal, - InputAdornment, - -} from "@mui/material"; +import { Box, Button, Typography, Modal, InputAdornment } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import Visibility from "@mui/icons-material/Visibility"; import VisibilityOff from "@mui/icons-material/VisibilityOff"; @@ -54,6 +47,7 @@ const AddEditCategoryModal: React.FC = ({ formState: { errors }, setValue, reset, + clearErrors, } = useForm({ defaultValues: { name: "", @@ -63,7 +57,7 @@ const AddEditCategoryModal: React.FC = ({ password: "", }, }); - + const onSubmit = (data: FormData) => { if (editRow) { handleUpdate( @@ -81,9 +75,9 @@ const AddEditCategoryModal: React.FC = ({ reset(); }; - const togglePasswordVisibility = () => { - setShowPassword((prev) => !prev); - }; + const togglePasswordVisibility = () => { + setShowPassword((prev) => !prev); + }; useEffect(() => { if (editRow) { @@ -91,22 +85,29 @@ const AddEditCategoryModal: React.FC = ({ setValue("email", editRow.email); setValue("phone", editRow.phone); setValue("registeredAddress", editRow.registeredAddress); + clearErrors(); } else { reset(); + clearErrors(); } }, [editRow, setValue, reset]); + const handleCloseModal = () => { + reset(); + clearErrors(); + handleClose(); + }; - - return ( { if (reason === "backdropClick") { return; } - handleClose(); // Close modal when clicking cross or cancel + + handleCloseModal(); }} aria-labelledby="add-edit-category-modal" > @@ -134,7 +135,7 @@ const AddEditCategoryModal: React.FC = ({ {editRow ? "Edit Admin" : "Add Admin"} - + @@ -334,19 +335,17 @@ const AddEditCategoryModal: React.FC = ({ control={control} rules={{ required: "Phone number is required", - pattern: { - value: /^[0-9]*$/, - message: "Only numbers are allowed", - }, - minLength: { - value: 6, - message: - "Phone number must be at least 6 digits", - }, - maxLength: { - value: 14, - message: - "Phone number must be at most 14 digits", + validate: (value) => { + if (!/^[0-9]*$/.test(value)) { + return "Only numbers are allowed"; + } + if (value.length < 6) { + return "Phone number must be at least 6 digits"; + } + if (value.length > 14) { + return "Phone number must be at most 14 digits"; + } + return true; // No errors }, }} render={({ field }) => ( diff --git a/src/components/AddManagerModal/index.tsx b/src/components/AddManagerModal/addManagerModal.tsx similarity index 94% rename from src/components/AddManagerModal/index.tsx rename to src/components/AddManagerModal/addManagerModal.tsx index 41f745c..300aa97 100644 --- a/src/components/AddManagerModal/index.tsx +++ b/src/components/AddManagerModal/addManagerModal.tsx @@ -14,7 +14,7 @@ import { import CloseIcon from "@mui/icons-material/Close"; import { Visibility, VisibilityOff } from "@mui/icons-material"; import { useDispatch, useSelector } from "react-redux"; -import { addManager, managerList } from "../../redux/slices/managerSlice"; +import { addManager, managerList } from "../../redux/slices/managerSlice.ts"; import { CustomIconButton, CustomTextField, @@ -38,13 +38,13 @@ export default function AddManagerModal({ reset, } = useForm(); const [showPassword, setShowPassword] = useState(false); - const stations = useSelector( + const stations = useSelector( (state: RootState) => state?.stationReducer.stations - ); - -useEffect(() => { - dispatch(stationList()); -}, [dispatch]); + ); + + useEffect(() => { + dispatch(stationList()); + }, [dispatch]); // Handle form submission const onSubmit = async (data: any) => { diff --git a/src/components/AddSlotModal/index.tsx b/src/components/AddSlotModal/addSlotModal.tsx similarity index 100% rename from src/components/AddSlotModal/index.tsx rename to src/components/AddSlotModal/addSlotModal.tsx diff --git a/src/components/AddStationModal/index.tsx b/src/components/AddStationModal/addStationModal.tsx similarity index 98% rename from src/components/AddStationModal/index.tsx rename to src/components/AddStationModal/addStationModal.tsx index 2919838..64e86db 100644 --- a/src/components/AddStationModal/index.tsx +++ b/src/components/AddStationModal/addStationModal.tsx @@ -19,7 +19,7 @@ import { RootState } from "../../redux/reducers.ts"; import { fetchVehicleBrands, vehicleList, -} from "../../redux/slices/VehicleSlice"; // Adjust this import path accordingly +} from "../../redux/slices/VehicleSlice.ts"; // Adjust this import path accordingly import { CustomIconButton, CustomTextField, @@ -304,9 +304,7 @@ export default function AddStationModal({ - - + /> )) ) : ( diff --git a/src/components/AddVehicleModal/index.tsx b/src/components/AddVehicleModal/addVehicleModal.tsx similarity index 100% rename from src/components/AddVehicleModal/index.tsx rename to src/components/AddVehicleModal/addVehicleModal.tsx diff --git a/src/components/AvailableSlotModal/index.tsx b/src/components/AvailableSlotModal/availableSlotsModal.tsx similarity index 100% rename from src/components/AvailableSlotModal/index.tsx rename to src/components/AvailableSlotModal/availableSlotsModal.tsx diff --git a/src/components/CustomTable/index.tsx b/src/components/CustomTable/customTable.tsx similarity index 97% rename from src/components/CustomTable/index.tsx rename to src/components/CustomTable/customTable.tsx index 9d9703d..de134c4 100644 --- a/src/components/CustomTable/index.tsx +++ b/src/components/CustomTable/customTable.tsx @@ -7,10 +7,10 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import Paper, { paperClasses } from "@mui/material/Paper"; -import { adminList, deleteAdmin } from "../../redux/slices/adminSlice"; -import { vehicleList, deleteVehicle } from "../../redux/slices/VehicleSlice"; +import { adminList, deleteAdmin } from "../../redux/slices/adminSlice.ts"; +import { vehicleList, deleteVehicle } from "../../redux/slices/VehicleSlice.ts"; -import { deleteManager, managerList } from "../../redux/slices/managerSlice"; +import { deleteManager, managerList } from "../../redux/slices/managerSlice.ts"; import { useDispatch, useSelector } from "react-redux"; import { Box, @@ -23,15 +23,15 @@ import { Typography, } from "@mui/material"; import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded"; -import DeleteModal from "../Modals/DeleteModal"; -import { AppDispatch, RootState } from "../../redux/store/store"; -import ViewModal from "../Modals/ViewModal"; -import VehicleViewModal from "../Modals/VehicleViewModal"; +import DeleteModal from "../Modals/DeleteModal/index.tsx"; +import { AppDispatch, RootState } from "../../redux/store/store.ts"; +import ViewModal from "../Modals/ViewModal/index.tsx"; +import VehicleViewModal from "../Modals/VehicleViewModal/index.tsx"; import SearchIcon from "@mui/icons-material/Search"; import TuneIcon from "@mui/icons-material/Tune"; import { CustomIconButton } from "../AddEditUserModel/styled.css.tsx"; -import ManagerViewModal from "../Modals/ViewManagerModal"; +import ManagerViewModal from "../Modals/ViewManagerModal/index.tsx"; import UserViewModal from "../Modals/UserViewModal/index.tsx"; import { deleteUser, userList } from "../../redux/slices/userSlice.ts"; import { deleteStation, stationList } from "../../redux/slices/stationSlice.ts"; diff --git a/src/components/EditAdmin/index.tsx b/src/components/EditAdmin/index.tsx deleted file mode 100644 index f2e1a97..0000000 --- a/src/components/EditAdmin/index.tsx +++ /dev/null @@ -1,153 +0,0 @@ -// import React, { useEffect } from "react"; -// import { -// Button, -// Dialog, -// DialogActions, -// DialogContent, -// DialogTitle, -// TextField, -// } from "@mui/material"; -// import { useForm, Controller } from "react-hook-form"; - -// interface EditAdminModalProps { -// open: boolean; -// handleClose: () => void; -// handleUpdate: (id: string, name: string, email: string, phone: string, registeredAddress: string) => void; -// editRow: any; -// } - -// interface FormData { -// name: string; -// email: string; -// phone: string; -// registeredAddress: string; -// } - -// const EditAdminModal: React.FC = ({ open, handleClose, editRow, handleUpdate }) => { -// const { control, handleSubmit, setValue, reset, formState: { errors } } = useForm({ -// defaultValues: { -// name: "", -// email: "", -// phone: "", -// registeredAddress: "", -// }, -// }); - -// useEffect(() => { -// if (editRow) { -// setValue("name", editRow.name); -// setValue("email", editRow.email); -// setValue("phone", editRow.phone); -// setValue("registeredAddress", editRow.registeredAddress); -// } else { -// reset(); -// } -// }, [editRow, setValue, reset]); - -// const onSubmit = (data: FormData) => { -// if (editRow) { -// handleUpdate(editRow.id, data.name, data.email, data.phone, data.registeredAddress); -// handleClose(); -// reset(); -// } -// }; - -// return ( -// -// Edit Admin -// -// ( -// -// )} -// /> - -// ( -// -// )} -// /> - -// ( -// -// )} -// /> - -// ( -// -// )} -// /> -// -// -// -// -// -// -// ); -// }; - -// export default EditAdminModal; diff --git a/src/components/EditManagerModal/index.tsx b/src/components/EditManagerModal/editManagerModal.tsx similarity index 94% rename from src/components/EditManagerModal/index.tsx rename to src/components/EditManagerModal/editManagerModal.tsx index ac0d1f6..7cc5561 100644 --- a/src/components/EditManagerModal/index.tsx +++ b/src/components/EditManagerModal/editManagerModal.tsx @@ -9,7 +9,7 @@ import { import CloseIcon from "@mui/icons-material/Close"; import { useForm, Controller } from "react-hook-form"; import { useDispatch } from "react-redux"; -import { managerList, updateManager } from "../../redux/slices/managerSlice"; // Import the updateManager action +import { managerList, updateManager } from "../../redux/slices/managerSlice.ts"; // Import the updateManager action import { CustomIconButton, CustomTextField, @@ -82,7 +82,6 @@ const EditManagerModal: React.FC = ({ email: data.email, phone: data.phone, stationId: data.stationId, - }, }) ).unwrap(); // Ensure that it throws an error if the update fails @@ -273,4 +272,4 @@ const EditManagerModal: React.FC = ({ ); }; -export default EditManagerModal; \ No newline at end of file +export default EditManagerModal; diff --git a/src/components/EditSlotModal/index.tsx b/src/components/EditSlotModal/editSlotModal.tsx similarity index 96% rename from src/components/EditSlotModal/index.tsx rename to src/components/EditSlotModal/editSlotModal.tsx index f227886..4b9b095 100644 --- a/src/components/EditSlotModal/index.tsx +++ b/src/components/EditSlotModal/editSlotModal.tsx @@ -9,7 +9,10 @@ import { import CloseIcon from "@mui/icons-material/Close"; import { useForm, Controller } from "react-hook-form"; import { useDispatch } from "react-redux"; -import { updateSlot, fetchAvailableSlots } from "../../redux/slices/slotSlice"; // Update with correct action +import { + updateSlot, + fetchAvailableSlots, +} from "../../redux/slices/slotSlice.ts"; // Update with correct action import { CustomIconButton, CustomTextField, @@ -40,7 +43,7 @@ const EditSlotModal: React.FC = ({ handleClose, editRow, }) => { - const dispatch = useDispatch(); + const dispatch = useDispatch(); const { control, handleSubmit, @@ -65,7 +68,7 @@ const EditSlotModal: React.FC = ({ if (editRow) { setValue("startTime", editRow.startTime); setValue("endTime", editRow.endTime); - setIsAvailable(editRow.isAvailable); + setIsAvailable(editRow.isAvailable); } else { reset(); } @@ -73,10 +76,9 @@ const EditSlotModal: React.FC = ({ const onSubmit = async (data: FormData) => { if (editRow) { - setLoading(true); + setLoading(true); try { - const availabilityStatus = isAvailable ? true : false; await dispatch( @@ -86,7 +88,7 @@ const EditSlotModal: React.FC = ({ endTime: data.endTime, isAvailable: availabilityStatus, }) - ).unwrap(); + ).unwrap(); dispatch(fetchAvailableSlots()); handleClose(); // Close modal on success reset(); // Reset form fields after submit diff --git a/src/components/EditStationModal/index.tsx b/src/components/EditStationModal/editSationModal.tsx similarity index 100% rename from src/components/EditStationModal/index.tsx rename to src/components/EditStationModal/editSationModal.tsx diff --git a/src/components/EditVehicleModal/index.tsx b/src/components/EditVehicleModal/editVehicleModal.tsx similarity index 100% rename from src/components/EditVehicleModal/index.tsx rename to src/components/EditVehicleModal/editVehicleModal.tsx diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 80247c2..8e8501d 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -9,7 +9,7 @@ import Divider from "@mui/material/Divider"; import MenuButton from "../MenuButton"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded"; -import SideMenu from "../SideMenu"; +import SideMenu from "../SideMenu/sideMenu"; import { useDispatch, useSelector } from "react-redux"; import { AppDispatch, RootState } from "../../redux/store/store"; import { fetchAdminProfile } from "../../redux/slices/profileSlice"; diff --git a/src/components/LineChartCard/index.tsx b/src/components/LineChartCard/lineChartCard.tsx similarity index 79% rename from src/components/LineChartCard/index.tsx rename to src/components/LineChartCard/lineChartCard.tsx index 61d367a..f7e465a 100644 --- a/src/components/LineChartCard/index.tsx +++ b/src/components/LineChartCard/lineChartCard.tsx @@ -2,13 +2,12 @@ import * as React from "react"; import { useTheme } from "@mui/material/styles"; import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; -import Chip from "@mui/material/Chip"; import Typography from "@mui/material/Typography"; -import Stack from "@mui/material/Stack"; import { LineChart } from "@mui/x-charts/LineChart"; -import { Box } from "@mui/material"; +import { FormControl, MenuItem, Select } from "@mui/material"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; function AreaGradient({ color, id }: { color: string; id: string }) { + return ( @@ -39,6 +38,12 @@ export default function LineChartCard() { const data = getDaysInMonth(4, 2024); const colorPalette = [theme.palette.primary.light]; + const [selectedOption, setSelectedOption] = React.useState("Weekly"); + + const handleChange = (event: { target: { value: React.SetStateAction; }; }) => { + setSelectedOption(event.target.value); + }; + return ( Sales Stats - - - Weekly - - - + Monthly + Weekly + Daily + Yearly + + ; }; }) => { + setSelectedStation(event.target.value); + }; + return ( @@ -42,40 +51,43 @@ export default function SessionsChart() { Charging prices - {/* Responsive dropdown box */} - - - Delhi NCR EV Station - - - + + Delhi NCR EV Station + + + Mumbai EV Station + + + Bangalore EV Station + + + Pune EV Station + + + {/* Grid container for the four boxes */} (); const { user } = useSelector((state: RootState) => state?.profileReducer); - useEffect(() => { - dispatch(fetchAdminProfile()); - }, [dispatch]); + // useEffect(() => { + // dispatch(fetchAdminProfile()); + // }, [dispatch]); return ( (); const { user } = useSelector((state: RootState) => state?.profileReducer); - React.useEffect(() => { - dispatch(fetchAdminProfile()); - }, [dispatch]); + // React.useEffect(() => { + // dispatch(fetchAdminProfile()); + // }, [dispatch]); return ( `${value}`, // Formatting Y-axis ticks + }, + ], + xAxis: [ + { + dataKey: "name", + scaleType: "band" as const, + }, + ], + width: 500, + height: 300, + sx: { + [`.${axisClasses.left} .${axisClasses.label}`]: { + transform: "translate(-20px, 0)", + }, + }, +}; + +export default function RoundedBarChart() { + const theme = useTheme(); + const [selectedOption, setSelectedOption] = React.useState("Monthly"); + + const handleChange = (event: SelectChangeEvent) => { + setSelectedOption(event.target.value); + }; + + return ( + + + + + Charge Stats + + + + + + + + + + + ); +} diff --git a/src/components/barChartCard/index.tsx b/src/components/barChartCard/index.tsx deleted file mode 100644 index 5bf70ec..0000000 --- a/src/components/barChartCard/index.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from "react"; -import { useTheme } from "@mui/material/styles"; -import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from "recharts"; -import { Card, CardContent, Typography, Box } from "@mui/material"; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -const data = [ - { name: "Jan", v1: 40 }, - { name: "Feb", v1: 50 }, - { name: "Mar", v1: 80 }, - { name: "Apr", v1: 20 }, - { name: "May", v1: 60 }, - { name: "Jun", v1: 30 }, -]; - -export default function RoundedBarChart() { - const theme = useTheme(); - - return ( - - -
- - Charge Stats - - - - Monthly - - - -
- - - - `${value}`} /> - - - - - - - ); -} diff --git a/src/index.css b/src/index.css index ec2585e..f6a5045 100644 --- a/src/index.css +++ b/src/index.css @@ -1,8 +1,9 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + sans-serif; */ + font-family: "Gliroy"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/src/layouts/DashboardLayout/index.tsx b/src/layouts/DashboardLayout/index.tsx index eb1ca8e..a11f3b5 100644 --- a/src/layouts/DashboardLayout/index.tsx +++ b/src/layouts/DashboardLayout/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { Box, Stack } from "@mui/material"; import { Outlet } from "react-router-dom"; -import SideMenu from "../../components/SideMenu"; +import SideMenu from "../../components/SideMenu/sideMenu"; import AppNavbar from "../../components/AppNavbar"; import Header from "../../components/Header"; import AppTheme from "../../shared-theme/AppTheme"; diff --git a/src/pages/AdminList/index.tsx b/src/pages/AdminList/index.tsx index b064f9c..a5c475c 100644 --- a/src/pages/AdminList/index.tsx +++ b/src/pages/AdminList/index.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; import { Box, Button, TextField, Typography } from "@mui/material"; -import AddEditCategoryModal from "../../components/AddEditCategoryModal"; +import AddEditCategoryModal from "../../components/AddEditAdminModal/addEditAdminModal"; import { useForm } from "react-hook-form"; -import CustomTable, { Column } from "../../components/CustomTable"; +import CustomTable, { Column } from "../../components/CustomTable/customTable"; import { useDispatch, useSelector } from "react-redux"; import { adminList, @@ -96,7 +96,7 @@ export default function AdminList() { email: string; phone: string; Admins: { registeredAddress: string }[]; - userType:string; + userType: string; }, index: number ) => ({ @@ -106,11 +106,10 @@ export default function AdminList() { email: admin?.email, phone: admin?.phone, registeredAddress: admin?.Admins?.[0]?.registeredAddress || "NA", - userType:admin?.userType||"NA", + userType: admin?.userType || "NA", }) ); - return ( <> ({ mode: "onChange" }); const dispatch = useDispatch(); const router = useNavigate(); @@ -55,6 +54,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) { }; const onSubmit: SubmitHandler = async (data: ILoginForm) => { + const isValid = await trigger(); // This triggers validation for all fields + if (!isValid) { + return; // Stop submission if there are errors + } try { const response = await dispatch(loginUser(data)).unwrap(); if (response?.data?.token) { @@ -88,6 +91,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) { item xs={12} md={5} + width="408px" + height="498px" sx={{ backgroundColor: "black", display: "flex", @@ -101,21 +106,23 @@ export default function Login(props: { disableCustomTheme?: boolean }) { Logo @@ -443,7 +453,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) { alignSelf: "center", fontFamily: "Gilroy, sans-serif", color: "#01579b", - textDecoration: "none", // ✅ Removes underline + textDecoration: "none", }} > Forgot password? diff --git a/src/pages/BookingList/index.tsx b/src/pages/BookingList/index.tsx index a2832fb..f77df1b 100644 --- a/src/pages/BookingList/index.tsx +++ b/src/pages/BookingList/index.tsx @@ -1,11 +1,11 @@ import React, { useEffect, useState } from "react"; import { Box, Button, TextField, Typography } from "@mui/material"; -import CustomTable, { Column } from "../../components/CustomTable"; +import CustomTable, { Column } from "../../components/CustomTable/customTable"; import { useDispatch, useSelector } from "react-redux"; import { RootState, AppDispatch } from "../../redux/store/store"; import { useForm } from "react-hook-form"; import { addBooking, bookingList } from "../../redux/slices/bookSlice"; -import AddBookingModal from "../../components/AddBookingModal"; +import AddBookingModal from "../../components/AddBookingModal/addBookingModal"; export default function BookingList() { const [addModalOpen, setAddModalOpen] = useState(false); diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index b8593ab..c31ceed 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -10,7 +10,7 @@ import { treeViewCustomizations, } from "./theme/customizations"; import AppTheme from "../../shared-theme/AppTheme"; -import MainGrid from "../../components/MainGrid"; +import MainGrid from "../../components/MainGrid/mainGrid"; const xThemeComponents = { diff --git a/src/pages/EvSlotList/index.tsx b/src/pages/EvSlotList/index.tsx index ef4f174..9ae02aa 100644 --- a/src/pages/EvSlotList/index.tsx +++ b/src/pages/EvSlotList/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import CustomTable, { Column } from "../../components/CustomTable"; +import CustomTable, { Column } from "../../components/CustomTable/customTable"; import { useDispatch, useSelector } from "react-redux"; import { RootState, AppDispatch } from "../../redux/store/store"; import { useForm } from "react-hook-form"; @@ -8,9 +8,9 @@ import { fetchAvailableSlots, updateSlot, } from "../../redux/slices/slotSlice"; -import AddSlotModal from "../../components/AddSlotModal"; +import AddSlotModal from "../../components/AddSlotModal/addSlotModal"; import dayjs from "dayjs"; -import EditSlotModal from "../../components/EditSlotModal"; +import EditSlotModal from "../../components/EditSlotModal/editSlotModal"; export default function EVSlotList() { const [addModalOpen, setAddModalOpen] = useState(false); const [editModalOpen, setEditModalOpen] = useState(false); diff --git a/src/pages/ManagerList/index.tsx b/src/pages/ManagerList/index.tsx index a2db5ca..146715e 100644 --- a/src/pages/ManagerList/index.tsx +++ b/src/pages/ManagerList/index.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; import { Box, Button, TextField, Typography } from "@mui/material"; -import CustomTable, { Column } from "../../components/CustomTable"; -import AddManagerModal from "../../components/AddManagerModal"; -import EditManagerModal from "../../components/EditManagerModal"; +import CustomTable, { Column } from "../../components/CustomTable/customTable"; +import AddManagerModal from "../../components/AddManagerModal/addManagerModal"; +import EditManagerModal from "../../components/EditManagerModal/editManagerModal"; import { useDispatch, useSelector } from "react-redux"; import { RootState, AppDispatch } from "../../redux/store/store"; import { diff --git a/src/pages/NotFound/index.tsx b/src/pages/NotFound/index.tsx index 578bc48..6a2cc09 100644 --- a/src/pages/NotFound/index.tsx +++ b/src/pages/NotFound/index.tsx @@ -1,9 +1,115 @@ -import React from 'react' +import React from "react"; +import { Box, Typography, Button, Card, Grid } from "@mui/material"; +import ElectricCarIcon from "@mui/icons-material/ElectricCar"; +import { keyframes } from "@emotion/react"; -function NotFoundPage() { - return ( -
NotFoundPage
- ) -} +// Animation for the car icon +const pulse = keyframes` + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +`; -export default NotFoundPage; \ No newline at end of file +const NotFoundPage = () => { + return ( + + + + + 404 + + + Oops! Page Not Found + + + The path you’re looking for seems to be off the grid. Maybe + the charging station is offline? ⚡ + + + + + + + + + + + + + ); +}; + +export default NotFoundPage; diff --git a/src/pages/ProfilePage/index.tsx b/src/pages/ProfilePage/index.tsx index 0de4db3..6cf6e7c 100644 --- a/src/pages/ProfilePage/index.tsx +++ b/src/pages/ProfilePage/index.tsx @@ -120,13 +120,13 @@ const ProfilePage = () => { > Personal Information - Edit - + */} - {showPermissions ? ( ) : ( diff --git a/src/pages/StationList/index.tsx b/src/pages/StationList/index.tsx index 67dae63..efef763 100644 --- a/src/pages/StationList/index.tsx +++ b/src/pages/StationList/index.tsx @@ -1,7 +1,7 @@ import { Chip } from "@mui/material"; -import AddStationModal from "../../components/AddStationModal"; -import CustomTable, { Column } from "../../components/CustomTable"; -import EditStationModal from "../../components/EditStationModal"; +import AddStationModal from "../../components/AddStationModal/addStationModal"; +import CustomTable, { Column } from "../../components/CustomTable/customTable"; +import EditStationModal from "../../components/EditStationModal/editSationModal"; import { createStation, stationList, diff --git a/src/pages/UserList/index.tsx b/src/pages/UserList/index.tsx index 52f1579..620235e 100644 --- a/src/pages/UserList/index.tsx +++ b/src/pages/UserList/index.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; import { Box, Button, Typography } from "@mui/material"; -import AddEditCategoryModal from "../../components/AddEditCategoryModal"; +import AddEditCategoryModal from "../../components/AddEditCategoryModal/addEdit"; import { useForm } from "react-hook-form"; -import CustomTable, { Column } from "../../components/CustomTable"; +import CustomTable, { Column } from "../../components/CustomTable/customTable"; import { useDispatch, useSelector } from "react-redux"; import { createUser, updateUser, userList } from "../../redux/slices/userSlice"; import { AppDispatch, RootState } from "../../redux/store/store"; @@ -41,7 +41,6 @@ export default function UserList() { name: string; email: string; phone: string; - }) => { try { await dispatch(createUser(data)); @@ -65,7 +64,6 @@ export default function UserList() { name, email, phone, - }) ); await dispatch(userList()); diff --git a/src/pages/VehicleList/index.tsx b/src/pages/VehicleList/index.tsx index 5edaa6d..388af12 100644 --- a/src/pages/VehicleList/index.tsx +++ b/src/pages/VehicleList/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; -import CustomTable, { Column } from "../../components/CustomTable"; +import CustomTable, { Column } from "../../components/CustomTable/customTable"; import { RootState } from "../../redux/reducers"; import { useDispatch, useSelector } from "react-redux"; import { AppDispatch } from "../../redux/store/store"; @@ -9,8 +9,8 @@ import { updateVehicle, vehicleList, } from "../../redux/slices/VehicleSlice"; -import AddVehicleModal from "../../components/AddVehicleModal"; -import EditVehicleModal from "../../components/EditVehicleModal"; +import AddVehicleModal from "../../components/AddVehicleModal/addVehicleModal"; +import EditVehicleModal from "../../components/EditVehicleModal/editVehicleModal"; export default function VehicleList() { const [addModalOpen, setAddModalOpen] = useState(false); diff --git a/src/router.tsx b/src/router.tsx index a0de92b..d9dc871 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -108,6 +108,7 @@ export default function AppRouter() { path="slot-list" element={} />} /> + {/* Catch-all Route */} From 57160520fbdcbba34139f29054a16be1fb07dc0f Mon Sep 17 00:00:00 2001 From: jaanvi Date: Tue, 1 Apr 2025 18:39:17 +0530 Subject: [PATCH 2/2] code optimization --- .../AddAdminModal/addAdminModal.tsx | 340 ++++++++++++++++ .../AddBookingModal/addBookingModal.tsx | 124 +----- .../AddEditAdminModal/addEditAdminModal.tsx | 43 +- src/components/AddEditExerciseModal/index.tsx | 222 ---------- src/components/AddEditTagsModal/index.tsx | 82 ---- src/components/AddEditUserModel/index.tsx | 382 ------------------ src/components/AddEditWorkoutModal/index.tsx | 11 - .../AddManagerModal/addManagerModal.tsx | 43 +- src/components/AddSlotModal/addSlotModal.tsx | 39 +- .../AddStationModal/addStationModal.tsx | 99 ++++- src/components/AddUserModal/addUserModal.tsx | 324 +++++++++++++++ .../styled.css.tsx | 0 .../AddVehicleModal/addVehicleModal.tsx | 5 +- src/components/AppNavbar/index.tsx | 1 - .../availableSlotsModal.tsx | 7 +- src/components/CardAlert/CardAlert.tsx | 47 ++- src/components/CustomTable/customTable.tsx | 79 ++-- .../EditAdminModal/editAdminModal.tsx | 237 +++++++++++ .../EditManagerModal/editManagerModal.tsx | 27 +- .../EditSlotModal/editSlotModal.tsx | 26 +- .../EditStationModal/editSationModal.tsx | 97 ++++- .../EditUserModal/editUserModal.tsx | 211 ++++++++++ .../EditVehicleModal/editVehicleModal.tsx | 2 +- src/components/Header/index.tsx | 8 +- src/components/MainGrid/mainGrid.tsx | 11 +- src/components/MenuContent/index.tsx | 4 - src/components/Modals/DeleteModal/index.tsx | 16 +- src/components/Modals/LogOutModal/index.tsx | 22 +- .../Modals/StationViewModal/index.tsx | 59 ++- .../Modals/ViewManagerModal/index.tsx | 2 +- src/components/SideMenu/sideMenu.tsx | 5 +- src/components/StatCard/statCard.tsx | 9 +- src/pages/AddEditRolePage/index.tsx | 2 +- src/pages/AdminList/index.tsx | 4 +- src/pages/Auth/Login/index.tsx | 2 +- src/pages/EVSlotManagement/index.tsx | 2 +- src/pages/ManagerList/index.tsx | 15 +- src/pages/RoleList/index.tsx | 4 +- src/pages/StationList/index.tsx | 6 +- src/pages/UserList/index.tsx | 71 ++-- src/pages/VehicleList/index.tsx | 17 +- src/redux/slices/VehicleSlice.ts | 2 +- src/redux/slices/managerSlice.ts | 5 +- src/redux/slices/stationSlice.ts | 2 +- src/redux/slices/userSlice.ts | 8 +- 45 files changed, 1566 insertions(+), 1158 deletions(-) create mode 100644 src/components/AddAdminModal/addAdminModal.tsx delete mode 100644 src/components/AddEditExerciseModal/index.tsx delete mode 100644 src/components/AddEditTagsModal/index.tsx delete mode 100644 src/components/AddEditUserModel/index.tsx delete mode 100644 src/components/AddEditWorkoutModal/index.tsx create mode 100644 src/components/AddUserModal/addUserModal.tsx rename src/components/{AddEditUserModel => AddUserModal}/styled.css.tsx (100%) create mode 100644 src/components/EditAdminModal/editAdminModal.tsx create mode 100644 src/components/EditUserModal/editUserModal.tsx diff --git a/src/components/AddAdminModal/addAdminModal.tsx b/src/components/AddAdminModal/addAdminModal.tsx new file mode 100644 index 0000000..e459518 --- /dev/null +++ b/src/components/AddAdminModal/addAdminModal.tsx @@ -0,0 +1,340 @@ +import React, { useState } from "react"; +import { + Box, + Button, + Typography, + Modal, + InputAdornment, + styled, +} from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; +import Visibility from "@mui/icons-material/Visibility"; +import VisibilityOff from "@mui/icons-material/VisibilityOff"; +import { useForm, Controller } from "react-hook-form"; +import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; + +interface FormData { + name: string; + email: string; + password: string; + registeredAddress: string; + phone: string; // Added phone field +} + +interface AddAdminModalProps { + open: boolean; + handleClose: () => void; + handleCreate: (data: FormData) => void; +} + +const AddAdminModal: React.FC = ({ + open, + handleClose, + handleCreate, +}) => { + const [showPassword, setShowPassword] = useState(false); + + const { + control, + handleSubmit, + formState: { errors }, + reset, + } = useForm({ + defaultValues: { + name: "", + email: "", + password: "", + registeredAddress: "", + phone: "", // Initialize phone field + }, + }); + + const onSubmit = (data: FormData) => { + handleCreate(data); + handleClose(); + reset(); + }; + + const togglePasswordVisibility = () => { + setShowPassword((prev) => !prev); + }; + + return ( + { + if (reason === "backdropClick") { + return; + } + handleClose(); + }} + aria-labelledby="add-admin-modal" + > + + {/* Header */} + + + Add Admin + + + + + + + {/* Horizontal Line */} + + + {/* Form */} +
+ {/* First Row - Admin Name & Email */} + + + + Admin Name + + ( + + )} + /> + + + + + Email + + ( + + )} + /> + + + + {/* Second Row - Password, Phone, Address */} + + + + Password + + ( + + + {showPassword ? ( + + ) : ( + + )} + + + ), + }, + }} + /> + )} + /> + + + + + Phone + + ( + + )} + /> + + + + + Address + + ( + + )} + /> + + + + {/* Submit Button */} + + + +
+ + + ); +}; + +export default AddAdminModal; diff --git a/src/components/AddBookingModal/addBookingModal.tsx b/src/components/AddBookingModal/addBookingModal.tsx index 71befb5..3c2f412 100644 --- a/src/components/AddBookingModal/addBookingModal.tsx +++ b/src/components/AddBookingModal/addBookingModal.tsx @@ -20,10 +20,7 @@ import { } from "../../redux/slices/bookSlice.ts"; import { AppDispatch, RootState } from "../../redux/store/store.ts"; import { toast } from "sonner"; -import { - CustomIconButton, - CustomTextField, -} from "../AddEditUserModel/styled.css.tsx"; +import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; import { getAllStations } from "../../redux/slices/stationSlice.ts"; import { fetchAvailableSlots } from "../../redux/slices/slotSlice.ts"; @@ -186,11 +183,14 @@ export default function AddBookingModal({ value >= today || "Date cannot be in the past", })} - InputLabelProps={{ - shrink: true, + slotProps={{ + inputLabel: { + shrink: true, + }, + htmlInput: { + min: today, + }, }} - // Setting minimum date to today - inputProps={{ min: today }} /> @@ -346,114 +346,6 @@ export default function AddBookingModal({ })} /> - - {/* - - {" Time Slot "} - - ( - - - Select Time Slot - - - {errors.timeSlot && ( - - {errors.timeSlot.message} - - )} - - )} - rules={{ required: "Time Slot is required" }} - /> - */} {/* Submit Button */} diff --git a/src/components/AddEditAdminModal/addEditAdminModal.tsx b/src/components/AddEditAdminModal/addEditAdminModal.tsx index aa2d913..6c0bbbb 100644 --- a/src/components/AddEditAdminModal/addEditAdminModal.tsx +++ b/src/components/AddEditAdminModal/addEditAdminModal.tsx @@ -4,10 +4,7 @@ import CloseIcon from "@mui/icons-material/Close"; import Visibility from "@mui/icons-material/Visibility"; import VisibilityOff from "@mui/icons-material/VisibilityOff"; import { useForm, Controller } from "react-hook-form"; -import { - CustomIconButton, - CustomTextField, -} from "../AddEditUserModel/styled.css.tsx"; +import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; //By Jaanvi : Edit Model :: 11-feb-25 interface AddEditCategoryModalProps { @@ -292,24 +289,26 @@ const AddEditCategoryModal: React.FC = ({ : "primary" } size="small" - InputProps={{ - endAdornment: ( - - - {showPassword ? ( - - ) : ( - - )} - - - ), + slotProps={{ + input: { + endAdornment: ( + + + {showPassword ? ( + + ) : ( + + )} + + + ), + }, }} error={!!errors.password} helperText={ diff --git a/src/components/AddEditExerciseModal/index.tsx b/src/components/AddEditExerciseModal/index.tsx deleted file mode 100644 index c62bf1c..0000000 --- a/src/components/AddEditExerciseModal/index.tsx +++ /dev/null @@ -1,222 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { useForm, SubmitHandler } from "react-hook-form"; -import { Dialog, DialogActions, DialogContent, DialogTitle, Button, TextField, MenuItem, Select, InputLabel, FormControl, FormHelperText, Box } from "@mui/material"; -import { useDropzone } from 'react-dropzone'; - -// Define the types for form data -interface FormData { - exerciseName: string; - description: string; - primMuscleTargeted: string; - secMuscleTargeted?: string; - repsOrduration: string; - sets: string; - restBetweenSets?: string; - difficultyLevel: "beginner" | "intermediate" | "advanced"; - formTips?: string; - modificationOptions?: string; - equipmentNeeded?: string; - videoLink?: string; - audioInstructions?: string; - restTimeAfterExercise?: string; - totalTimeForExercise?: string; - progressTracking?: string; - motivationalTips?: string; - exerciseImage?: File | null; -} - -interface AddEditExerciseModalProps { - open: boolean; - handleClose: () => void; - editRow: any; - preview: string; - setPreview: string; -} - -const AddEditExerciseModal: React.FC = ({ open, handleClose, editRow ,preview,setPreview}) => { - const { handleSubmit, register, formState: { errors }, setValue, reset, getValues} = useForm(); - const { getRootProps, getInputProps } = useDropzone({ - accept: 'image/*, .gif', - onDrop: (acceptedFiles) => { - if (acceptedFiles && acceptedFiles.length > 0) { - setValue('exerciseImage', acceptedFiles[0]); - handlePreview(acceptedFiles[0]) - } - }, - }); -console.log("Imageeeee" , getValues('exerciseImage')) - // State to store the preview URL of the uploaded file - - const [selectedFile, setSelectedFile] = useState(null); - - useEffect(() => { - if (editRow) { - setValue('exerciseName', editRow.exerciseName); - setValue('description', editRow.description); - setValue('primMuscleTargeted', editRow.primMuscleTargeted); - setValue('secMuscleTargeted', editRow.secMuscleTargeted); - setValue('repsOrduration', editRow.repsOrduration); - setValue('sets', editRow.sets); - setValue('restBetweenSets', editRow.restBetweenSets); - setValue('difficultyLevel', editRow.difficultyLevel); - if (editRow.exerciseImage) { - setValue('exerciseImage', editRow.exerciseImage); - setPreview(editRow.exerciseImage); - setSelectedFile(editRow.exerciseImage); - } - } else { - reset(); - setPreview(null); - setSelectedFile(null); - } - }, [editRow, setValue, reset,setPreview]); - - const onSubmit: SubmitHandler = (data: FormData) => { - console.log(data); - reset(); - setPreview(null); - handleClose(); - }; - - - const handlePreview = (file: File | null) => { - if (file) { - setValue('exerciseImage', file); - setPreview(URL.createObjectURL(file)); - setSelectedFile(file); - } else { - setPreview(null); - setSelectedFile(null); - } - }; - - - const handleClearFile = () => { - setPreview(null); - setSelectedFile(null); - setValue('exerciseImage', null); - }; - - return ( - - Create Exercise - -
- - {/* Exercise Name */} - - - {/* Description */} - - - {/* Primary Muscles Targeted */} - - - {/* Secondary Muscles Targeted */} - - - {/* Reps/Duration */} - - - {/* Sets */} - - - {/* Rest Between Sets */} - - - {/* Difficulty Level */} - - Difficulty Level - - {errors.difficultyLevel && {errors.difficultyLevel.message}} - - - {/* Image/GIF Upload */} - - handlePreview(e.target.files?.[0] || null)} /> -

Drag & drop an image or GIF here, or click to select

- - - {/* Preview the uploaded image or GIF */} - {preview && ( - -

Preview:

- Exercise Preview -

{selectedFile?.name || selectedFile.split("/").pop()}

- - - - )} - -
- - - - - - - ); -}; - -export default AddEditExerciseModal; diff --git a/src/components/AddEditTagsModal/index.tsx b/src/components/AddEditTagsModal/index.tsx deleted file mode 100644 index 5ff15f8..0000000 --- a/src/components/AddEditTagsModal/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React,{useEffect} from "react"; -import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@mui/material"; -import { useForm, Controller } from "react-hook-form"; - -interface AddEditTagsModalProps { - open: boolean; - handleClose: () => void; - editRow:any; -} - -interface FormData { - tag: string; -} - -const AddEditTagsModal: React.FC = ({ open, handleClose,editRow }) => { - const { control, handleSubmit, formState: { errors },setValue,reset } = useForm({ - defaultValues: { - tag: "", - }, - }); - - const onSubmit = (data: FormData) => { - console.log(data.tag); - handleClose(); - reset(); - }; - - useEffect(() => { - if (editRow) { - setValue('tag', editRow.name); - } else { - reset(); - } - }, [editRow, setValue, reset]); - - return ( - <> - - {editRow ? "Edit" : 'Add'} Tag - - ( - - )} - /> - - - - - - - - ); -}; - -export default AddEditTagsModal; diff --git a/src/components/AddEditUserModel/index.tsx b/src/components/AddEditUserModel/index.tsx deleted file mode 100644 index 712b1f4..0000000 --- a/src/components/AddEditUserModel/index.tsx +++ /dev/null @@ -1,382 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { - Box, - Button, - Typography, - TextField, - Modal, - IconButton, - InputAdornment, - styled, -} from "@mui/material"; -import CloseIcon from "@mui/icons-material/Close"; -import Visibility from "@mui/icons-material/Visibility"; -import VisibilityOff from "@mui/icons-material/VisibilityOff"; -import { useForm, Controller } from "react-hook-form"; -import { CustomIconButton, CustomTextField } from "./styled.css.tsx"; - - -interface FormData { - name: string; - email: string; - password: string; - phone: string; -} -interface AddUserModalProps { - open: boolean; - handleClose: () => void; - handleCreate: (data: FormData) => void; - handleUpdate: ( - id: string, - name: string, - email: string, - phone: string, - - ) => void; - editRow: any; -} -const AddUserModal: React.FC = ({ - open, - handleClose, - handleCreate, - handleUpdate, - editRow, -}) => { - const [showPassword, setShowPassword] = useState(false); - - const { - control, - handleSubmit, - formState: { errors }, - reset, - setValue, - } = useForm({ - defaultValues: { - name: "", - email: "", - phone: "", - }, - }); - - useEffect(() => { - if (editRow) { - setValue("name", editRow.name); - setValue("email", editRow.email); - setValue("phone", editRow.phone); - } else { - reset(); - } - }, [editRow, setValue,reset]); - - const onSubmit = (data: FormData) => { - if (editRow) { - handleUpdate( - editRow.id, - data.name, - data.email, - data.phone - ); - } else { - handleCreate(data); - } - - handleClose(); - reset(); - }; - - const togglePasswordVisibility = () => { - setShowPassword((prev) => !prev); - }; - - return ( - { - if (reason === "backdropClick") { - return; - } - handleClose(); // Close modal when clicking cross or cancel - }} - aria-labelledby="add-user-modal" - > - - {/* Header */} - - - {editRow ? "Edit User" : "Add User"} - - - - - - - {/* Horizontal Line */} - - - {/* Form */} -
- {/* Input Fields */} - - {/* First Row - Two Inputs */} - - - - User Name - - ( - - )} - /> - - - - - Email - - ( - - )} - /> - - - - {/* Second Row - Two Inputs */} - - {!editRow && ( - - Password - - ( - - - {showPassword ? ( - - ) : ( - - )} - - - ), - }} - error={!!errors.password} - helperText={ - errors.password?.message - } - /> - )} - /> - )} - - - Phone Number - - ( - - )} - /> - - - - - {/* Submit Button */} - - - -
- - - ); -}; - -export default AddUserModal; - - - diff --git a/src/components/AddEditWorkoutModal/index.tsx b/src/components/AddEditWorkoutModal/index.tsx deleted file mode 100644 index 88a2650..0000000 --- a/src/components/AddEditWorkoutModal/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' - -const AddEditWorkoutModal = () => { - return ( -
- -
- ) -} - -export default AddEditWorkoutModal diff --git a/src/components/AddManagerModal/addManagerModal.tsx b/src/components/AddManagerModal/addManagerModal.tsx index 300aa97..78d5c3c 100644 --- a/src/components/AddManagerModal/addManagerModal.tsx +++ b/src/components/AddManagerModal/addManagerModal.tsx @@ -15,10 +15,7 @@ import CloseIcon from "@mui/icons-material/Close"; import { Visibility, VisibilityOff } from "@mui/icons-material"; import { useDispatch, useSelector } from "react-redux"; import { addManager, managerList } from "../../redux/slices/managerSlice.ts"; -import { - CustomIconButton, - CustomTextField, -} from "../AddEditUserModel/styled.css.tsx"; +import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; import React, { useEffect, useState } from "react"; import { RootState } from "../../redux/reducers.ts"; import { stationList } from "../../redux/slices/stationSlice.ts"; @@ -258,24 +255,26 @@ export default function AddManagerModal({ : "primary" } size="small" - InputProps={{ - endAdornment: ( - - - {showPassword ? ( - - ) : ( - - )} - - - ), + slotProps={{ + input: { + endAdornment: ( + + + {showPassword ? ( + + ) : ( + + )} + + + ), + }, }} error={!!errors.password} helperText={errors.password?.message} diff --git a/src/components/AddSlotModal/addSlotModal.tsx b/src/components/AddSlotModal/addSlotModal.tsx index 7eef16f..96493bc 100644 --- a/src/components/AddSlotModal/addSlotModal.tsx +++ b/src/components/AddSlotModal/addSlotModal.tsx @@ -48,8 +48,10 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => { type="date" fullWidth margin="normal" - InputLabelProps={{ - shrink: true, + slotProps={{ + inputLabel: { + shrink: true, + }, }} error={!!errors.date} helperText={errors.date?.message} @@ -64,8 +66,10 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => { type="time" fullWidth margin="normal" - InputLabelProps={{ - shrink: true, + slotProps={{ + inputLabel: { + shrink: true, + }, }} error={!!errors.startHour} helperText={errors.startHour?.message} @@ -106,20 +110,19 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => { - - - + + diff --git a/src/components/AddStationModal/addStationModal.tsx b/src/components/AddStationModal/addStationModal.tsx index 64e86db..fab5bcb 100644 --- a/src/components/AddStationModal/addStationModal.tsx +++ b/src/components/AddStationModal/addStationModal.tsx @@ -20,10 +20,7 @@ import { fetchVehicleBrands, vehicleList, } from "../../redux/slices/VehicleSlice.ts"; // Adjust this import path accordingly -import { - CustomIconButton, - CustomTextField, -} from "../AddEditUserModel/styled.css.tsx"; // Assuming custom styled components +import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";// Assuming custom styled components export default function AddStationModal({ open, @@ -262,7 +259,7 @@ export default function AddStationModal({ }} > - Select Vehicle Brands + Vehicle Brand Choose Brands @@ -270,10 +267,53 @@ export default function AddStationModal({ multiple value={selectedBrands} onChange={handleBrandChange} - renderValue={(selected) => - (selected as string[]).join(", ") - } - label="Choose Brands" + renderValue={(selected) => { + const selectedArray = + selected as string[]; + const displayNames = + selectedArray.slice(0, 1); // First 2 brands + const moreCount = + selectedArray.length - 1; + + return ( + + {displayNames.map( + (id, index) => { + const brand = + vehicleBrands.find( + (b) => + b.id === + id + ); + return ( + + {brand + ? brand.name + : ""} + + ); + } + )} + {moreCount > 0 && ( + + +{moreCount} more + + )} + + ); + }} > {vehicleBrands.length > 0 ? ( vehicleBrands.map((brand) => ( @@ -315,16 +355,49 @@ export default function AddStationModal({ Vehicle Name - Choose Vehicles + {/* + */} = ({ multiple value={selectedVehicles} onChange={handleCheckboxChange} - renderValue={(selected) => - (selected as string[]).join(", ") - } + renderValue={(selected) => { + const selectedArray = + selected as string[]; + const displayNames = + selectedArray.slice(0, 1); // First 2 names + const moreCount = + selectedArray.length - 1; // Count of remaining items + + return ( + + {displayNames.map( + (name, index) => ( + + {name} + + ) + )} + {moreCount > 0 && ( + + +{moreCount} more + + )} + + ); + }} > {filteredVehicles.length > 0 ? ( filteredVehicles.map((vehicle) => ( @@ -378,6 +462,7 @@ const EditStationModal: React.FC = ({ )} + {errors.allowedCarIds ? errors.allowedCarIds.message @@ -388,8 +473,6 @@ const EditStationModal: React.FC = ({ - - {/* Submit Button */} void; + handleUpdate: ( + id: number, + name: string, + email: string, + phone: string, + ) => void; + editRow: any; +} + +interface FormData { + name: string; + email: string; + phone: string; + +} + +const EditUserModal: React.FC = ({ + open, + handleClose, + handleUpdate, + editRow, +}) => { + const { + control, + handleSubmit, + formState: { errors }, + setValue, + reset, + } = useForm({ + defaultValues: { + name: "", + email: "", + phone: "", + }, + }); + + // Set values if editRow is provided + useEffect(() => { + if (editRow) { + setValue("name", editRow.name); + setValue("email", editRow.email); + setValue("phone", editRow.phone); + } else { + reset(); + } + }, [editRow, setValue, reset]); + + const onSubmit = (data: FormData) => { + if (editRow) { + handleUpdate( + editRow.id, + data.name, + data.email, + data.phone, + ); + } + handleClose(); // Close the modal + reset(); // Reset the form fields + }; + + return ( + { + if (reason === "backdropClick") { + return; + } + handleClose(); + }} + aria-labelledby="edit-user-modal" + > + + {/* Header */} + + + Edit User + + + + + + + {/* Horizontal Line */} + + + {/* Input Fields */} + + {/* Name */} + + + Full Name + + ( + + )} + /> + + + {/* Email */} + + + Email + + ( + + )} + /> + + + {/* Phone */} + + + Phone Number + + ( + + )} + /> + + + + + {/* Submit Button */} + + + + + + ); +}; + +export default EditUserModal; diff --git a/src/components/EditVehicleModal/editVehicleModal.tsx b/src/components/EditVehicleModal/editVehicleModal.tsx index 33ee197..26e155d 100644 --- a/src/components/EditVehicleModal/editVehicleModal.tsx +++ b/src/components/EditVehicleModal/editVehicleModal.tsx @@ -11,7 +11,7 @@ import { updateVehicle } from "../../redux/slices/VehicleSlice"; import { CustomIconButton, CustomTextField, -} from "../AddEditUserModel/styled.css.tsx"; +} from "../AddUserModal/styled.css"; interface EditVehicleModalProps { open: boolean; handleClose: () => void; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 8e8501d..62dda98 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -5,17 +5,11 @@ import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; 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"; -import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded"; -import SideMenu from "../SideMenu/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"; -import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown"; export default function Header() { const [showNotifications, setShowNotifications] = React.useState(false); @@ -36,7 +30,7 @@ export default function Header() { width: "100%", // height: "84px", // backgroundColor: "#1C1C1C", - padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size // error on this + padding: { xs: "20px 12px", sm: "20px 24px" }, display: "flex", alignItems: "center", justifyContent: "space-between", diff --git a/src/components/MainGrid/mainGrid.tsx b/src/components/MainGrid/mainGrid.tsx index 0964f90..38643b1 100644 --- a/src/components/MainGrid/mainGrid.tsx +++ b/src/components/MainGrid/mainGrid.tsx @@ -1,20 +1,11 @@ -import * as React from "react"; + import Grid from "@mui/material/Grid2"; import Box from "@mui/material/Box"; -import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; -import Copyright from "../../pages/Dashboard/internals/components/Copyright"; -import ChartUserByCountry from "../ChartUserByCountry"; -import CustomizedTreeView from "../CustomizedTreeView"; -import CustomizedDataGrid from "../CustomizedDataGrid"; -import HighlightedCard from "../HighlightedCard"; -import PageViewsBarChart from "../PageViewsBarChart"; import SessionsChart from "../SessionsChart/sessionChart"; import StatCard, { StatCardProps } from "../StatCard/statCard"; import ResourcesPieChart from "../ResourcePieChart/resourcePieChart"; -import { BarChart } from "@mui/icons-material"; import RoundedBarChart from "../barChartCard/barChartCard"; -import { LineHighlightPlot } from "@mui/x-charts"; import LineChartCard from "../LineChartCard/lineChartCard"; const data: StatCardProps[] = [ diff --git a/src/components/MenuContent/index.tsx b/src/components/MenuContent/index.tsx index 8d5df61..4706451 100644 --- a/src/components/MenuContent/index.tsx +++ b/src/components/MenuContent/index.tsx @@ -4,15 +4,11 @@ import ListItemButton from "@mui/material/ListItemButton"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; import Stack from "@mui/material/Stack"; -import HomeRoundedIcon from "@mui/icons-material/HomeRounded"; -import AnalyticsRoundedIcon from "@mui/icons-material/AnalyticsRounded"; -import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import { Link, useLocation } from "react-router-dom"; import { useSelector } from "react-redux"; import { RootState } from "../../redux/store/store"; import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined"; import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined"; -import EvStationOutlinedIcon from "@mui/icons-material/EvStationOutlined"; import EvStationIcon from "@mui/icons-material/EvStation"; import BookOnlineOutlinedIcon from "@mui/icons-material/BookOnlineOutlined"; import ChecklistSharpIcon from "@mui/icons-material/ChecklistSharp"; diff --git a/src/components/Modals/DeleteModal/index.tsx b/src/components/Modals/DeleteModal/index.tsx index 572f59a..d4671a4 100644 --- a/src/components/Modals/DeleteModal/index.tsx +++ b/src/components/Modals/DeleteModal/index.tsx @@ -1,5 +1,6 @@ -import { Box, Button, Modal, Typography } from "@mui/material"; +import { Box, Button, IconButton, Modal, Typography } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; +import { CustomIconButton } from "../../AddUserModal/styled.css"; type Props = { open: boolean; @@ -14,7 +15,7 @@ const style = { left: "50%", transform: "translate(-50%, -50%)", width: 330, - bgcolor: "background.paper", + bgcolor: "#272727", borderRadius: 1.5, boxShadow: 24, p: 3, @@ -47,17 +48,22 @@ export default function DeleteModal({ Delete Record setDeleteModal(false)} sx={{ cursor: "pointer", display: "flex", alignItems: "center", - justifyContent: "flex-end", // Aligns the close icon to the right + justifyContent: "flex-end", marginTop: -3.5, }} > - + setDeleteModal(false)} + aria-label="Close" + > + + + - reason !== "backdropClick" && setLogoutModal(false) - } // Prevent closing on backdrop click + onClose={(event, reason) => { + if (reason !== "backdropClick") { + setLogoutModal(false); + } + }} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" + disableEscapeKeyDown // Prevent closing with the ESC key BackdropProps={{ - onClick: (e) => e.stopPropagation(), // Stop propagation on backdrop click to prevent closing the modal + invisible: true, // Use to control backdrop visibility }} > @@ -61,14 +65,18 @@ export default function LogoutModal({ > Logout setLogoutModal(false)} sx={{ cursor: "pointer", display: "flex", alignItems: "center", }} > - + setLogoutModal(false)} + aria-label="Close" + > + + diff --git a/src/components/Modals/StationViewModal/index.tsx b/src/components/Modals/StationViewModal/index.tsx index 9efc2a0..d0b029d 100644 --- a/src/components/Modals/StationViewModal/index.tsx +++ b/src/components/Modals/StationViewModal/index.tsx @@ -1,14 +1,15 @@ import React, { useEffect, useState } from "react"; -import { Box, Modal, Typography, Divider, Grid } from "@mui/material"; +import { Box, Modal, Typography, Divider, Grid, Chip } from "@mui/material"; import CloseIcon from "@mui/icons-material/Close"; import { useSelector } from "react-redux"; import { RootState } from "../../../redux/reducers"; +import { CustomIconButton } from "../../AddUserModal/styled.css"; type Props = { open: boolean; setViewModal: Function; - handleView: (id: string | undefined) => void; - id?: string | undefined; + handleView: (id: number | undefined) => void; + id?: number | undefined; }; const style = { @@ -64,16 +65,12 @@ export default function StationViewModal({ open, setViewModal, id }: Props) { {selectedStation?.name || "Station"}'s Details - setViewModal(false)} - sx={{ - cursor: "pointer", - display: "flex", - alignItems: "center", - }} + aria-label="Close" > - + @@ -109,12 +106,52 @@ export default function StationViewModal({ open, setViewModal, id }: Props) { Status: - {selectedStation.status === "available" + {selectedStation.status === 1 ? "Available" : "Not Available"} + + {/* Display Vehicles */} + + + Vehicles: + + + {selectedStation.allowedCars && + selectedStation.allowedCars.length > 0 ? ( + selectedStation.allowedCars.map( + (car: any, index: number) => ( + + {car.name}{","} + + ) + ) + ) : ( + + No vehicles available + + )} + + ) : ( diff --git a/src/components/Modals/ViewManagerModal/index.tsx b/src/components/Modals/ViewManagerModal/index.tsx index 37d40aa..d702f7e 100644 --- a/src/components/Modals/ViewManagerModal/index.tsx +++ b/src/components/Modals/ViewManagerModal/index.tsx @@ -7,7 +7,7 @@ import { RootState } from "../../../redux/reducers"; type Props = { open: boolean; setViewModal: Function; - handleView: (id: string | undefined) => void; + handleView: (id: number | undefined) => void; id?: number | undefined; }; diff --git a/src/components/SideMenu/sideMenu.tsx b/src/components/SideMenu/sideMenu.tsx index f360d87..a0924be 100644 --- a/src/components/SideMenu/sideMenu.tsx +++ b/src/components/SideMenu/sideMenu.tsx @@ -59,9 +59,10 @@ export default function SideMenu() { sx={{ display: "flex", flexDirection: "row", + justifyContent:"center", alignItems: "center", pt: 2, - pl: 2, + }} > Logo { + const handleClickOpen = (row: any) => { + setRowData(row); setRowData(null); // Reset row data when opening for new admin setModalOpen(true); }; @@ -123,6 +124,7 @@ export default function AdminList() { setModalOpen={setModalOpen} tableType="admin" handleClickOpen={handleClickOpen} + editRow={rowData} /> (false); const [editModalOpen, setEditModalOpen] = useState(false); - const [editRow, setEditRow] = useState(null); const { reset } = useForm(); const [deleteModal, setDeleteModal] = useState(false); const [viewModal, setViewModal] = useState(false); const [rowData, setRowData] = useState(null); - const [searchTerm, setSearchTerm] = useState(""); const dispatch = useDispatch(); const managers = useSelector( (state: RootState) => state.managerReducer.managers @@ -65,7 +62,7 @@ export default function ManagerList() { // Handle updating an existing manager const handleUpdate = async ( - id: string, + id: number, name: string, email: string, phone: string, @@ -100,14 +97,6 @@ export default function ManagerList() { { id: "action", label: "Action", align: "center" }, ]; - // Filter managers based on search term - // const filteredManagers = managers?.filter( - // (manager) => - // manager.name?.toLowerCase().includes(searchTerm.toLowerCase()) || - // manager.email?.toLowerCase().includes(searchTerm.toLowerCase()) || - // manager.phone?.toLowerCase().includes(searchTerm.toLowerCase()) - // ); - const categoryRows = managers?.length ? managers.map((manager, index) => { const station = manager?.chargingStation; // Correct access to the ChargingStation data diff --git a/src/pages/RoleList/index.tsx b/src/pages/RoleList/index.tsx index 594ce51..a243955 100644 --- a/src/pages/RoleList/index.tsx +++ b/src/pages/RoleList/index.tsx @@ -13,10 +13,9 @@ import { import { AppDispatch, RootState } from "../../redux/store/store"; import { useNavigate } from "react-router-dom"; import AddEditRolePage from "../AddEditRolePage"; -import SearchIcon from "@mui/icons-material/Search"; + export default function RoleList() { - const [modalOpen, setModalOpen] = useState(false); const { reset } = useForm(); const [deleteModal, setDeleteModal] = React.useState(false); @@ -120,3 +119,4 @@ export default function RoleList() { ); } + diff --git a/src/pages/StationList/index.tsx b/src/pages/StationList/index.tsx index efef763..6f2f176 100644 --- a/src/pages/StationList/index.tsx +++ b/src/pages/StationList/index.tsx @@ -1,4 +1,4 @@ -import { Chip } from "@mui/material"; + import AddStationModal from "../../components/AddStationModal/addStationModal"; import CustomTable, { Column } from "../../components/CustomTable/customTable"; import EditStationModal from "../../components/EditStationModal/editSationModal"; @@ -17,13 +17,11 @@ import { useForm } from "react-hook-form"; export default function StationList() { const [addModalOpen, setAddModalOpen] = useState(false); const [editModalOpen, setEditModalOpen] = useState(false); - const [editRow, setEditRow] = useState(null); const { reset } = useForm(); const [deleteModal, setDeleteModal] = useState(false); const [viewModal, setViewModal] = useState(false); const [rowData, setRowData] = useState(null); - const [searchTerm, setSearchTerm] = useState(""); const dispatch = useDispatch(); const vehicles = useSelector( @@ -64,7 +62,7 @@ export default function StationList() { }; const handleUpdate = async ( - id: string, + id: number, name: string, registeredAddress: string, totalSlots: number, diff --git a/src/pages/UserList/index.tsx b/src/pages/UserList/index.tsx index 620235e..e14c2bf 100644 --- a/src/pages/UserList/index.tsx +++ b/src/pages/UserList/index.tsx @@ -6,17 +6,17 @@ import CustomTable, { Column } from "../../components/CustomTable/customTable"; import { useDispatch, useSelector } from "react-redux"; import { createUser, updateUser, userList } from "../../redux/slices/userSlice"; import { AppDispatch, RootState } from "../../redux/store/store"; -import { string } from "prop-types"; -import { adminList, updateAdmin } from "../../redux/slices/adminSlice"; -import AddUserModal from "../../components/AddEditUserModel"; +import AddUserModal from "../../components/AddUserModal/addUserModal"; +import EditUserModal from "../../components/EditUserModal/editUserModal"; export default function UserList() { - const [modalOpen, setModalOpen] = useState(false); + const [addModalOpen, setAddModalOpen] = useState(false); + const [editModalOpen, setEditModalOpen] = useState(false); + const [rowData, setRowData] = useState(null); + const [deleteModal, setDeleteModal] = useState(false); + const [viewModal, setViewModal] = useState(false); const { reset } = useForm(); - const [deleteModal, setDeleteModal] = React.useState(false); - const [viewModal, setViewModal] = React.useState(false); - const [rowData, setRowData] = React.useState(null); const dispatch = useDispatch(); @@ -28,11 +28,12 @@ export default function UserList() { const handleClickOpen = () => { setRowData(null); // Reset row data when opening for new admin - setModalOpen(true); + setAddModalOpen(true); }; const handleCloseModal = () => { - setModalOpen(false); + setAddModalOpen(false); + setEditModalOpen(false); setRowData(null); reset(); }; @@ -52,7 +53,7 @@ export default function UserList() { }; const handleUpdate = async ( - id: string, + id: number, name: string, email: string, phone: string @@ -64,6 +65,7 @@ export default function UserList() { name, email, phone, + }) ); await dispatch(userList()); @@ -77,39 +79,21 @@ export default function UserList() { { id: "name", label: "Name" }, { id: "email", label: "Email" }, { id: "phone", label: "Phone" }, - // { id: "location", label: "Location" }, - // { id: "managerAssigned", label: "ManagerAssigned" }, - // { id: "vehicle", label: "Vehicle" }, { id: "action", label: "Action", align: "center" }, ]; +const categoryRows = users?.length + ? users.map((user, index) => ({ + id: user.id, + srno: index + 1, + name: user.name, + email: user.email, + phone: user.phone || "NA", // Ensures it's a string + })) + : []; - const categoryRows = users?.length - ? users?.map(function ( - user: { - id: string; - name: string; - email: string; - - phone: string; - // location?: string; - // managerAssigned?: string; - // vehicle?: string; - }, - index: number - ) { - return { - id: user?.id, - srno: index + 1, - name: user?.name, - email: user?.email, - phone: user?.phone, - // location: user?.location, - // managerAssigned: user?.managerAssigned, - // vehicle: user?.vehicle, - }; - }) - : []; + + return ( <> @@ -121,14 +105,19 @@ export default function UserList() { setViewModal={setViewModal} viewModal={viewModal} setRowData={setRowData} - setModalOpen={setModalOpen} tableType="user" handleClickOpen={handleClickOpen} + setModalOpen={() => setEditModalOpen(true)} /> + + diff --git a/src/pages/VehicleList/index.tsx b/src/pages/VehicleList/index.tsx index 388af12..b215928 100644 --- a/src/pages/VehicleList/index.tsx +++ b/src/pages/VehicleList/index.tsx @@ -58,7 +58,7 @@ export default function VehicleList() { }; const handleUpdate = async ( - id: string, + id: number, name: string, company: string, modelName: string, @@ -93,24 +93,13 @@ export default function VehicleList() { { id: "action", label: "Action", align: "center" }, ]; - // const filteredVehicles = vehicles?.filter( - // (vehicle) => - // vehicle.name?.toLowerCase().includes(searchTerm.toLowerCase()) || - // vehicle.company?.toLowerCase().includes(searchTerm.toLowerCase()) || - // vehicle.modelName - // ?.toLowerCase() - // .includes(searchTerm.toLowerCase()) || - // vehicle.chargeType - // ?.toLowerCase() - // .includes(searchTerm.toLowerCase()) || - // vehicle.imageUrl?.toLowerCase().includes(searchTerm.toLowerCase()) - // ); + const categoryRows = vehicles?.length ? vehicles?.map( ( vehicle: { - id: string; + id: number; name: string; company: string; modelName: string; diff --git a/src/redux/slices/VehicleSlice.ts b/src/redux/slices/VehicleSlice.ts index 77c3310..1d64b8b 100644 --- a/src/redux/slices/VehicleSlice.ts +++ b/src/redux/slices/VehicleSlice.ts @@ -9,7 +9,7 @@ interface VehicleBrand { interface Vehicle { brandId?: string; - id: string; + id: number; name: string; company: string; modelName: string; diff --git a/src/redux/slices/managerSlice.ts b/src/redux/slices/managerSlice.ts index a32cf0f..9fb47c3 100644 --- a/src/redux/slices/managerSlice.ts +++ b/src/redux/slices/managerSlice.ts @@ -5,8 +5,7 @@ import { toast } from "sonner"; // Define the Manager interface based on the payload interface Manager { - Manager: any; - id: string; + id: number; name: string; email: string; phone: string; @@ -74,7 +73,7 @@ export const addManager = createAsyncThunk< // Update Manager (Async Thunk) export const updateManager = createAsyncThunk< Manager, - { id: string; managerData: Manager }, + { id: number; managerData: Manager }, { rejectValue: string } >("updateManager", async ({ id, managerData }, { rejectWithValue }) => { if (!id) { diff --git a/src/redux/slices/stationSlice.ts b/src/redux/slices/stationSlice.ts index a9ead8a..1d0b905 100644 --- a/src/redux/slices/stationSlice.ts +++ b/src/redux/slices/stationSlice.ts @@ -5,7 +5,7 @@ import { toast } from "sonner"; // Define TypeScript types interface Station { - id: string; + id: number; name: string; registeredAddress: string; totalSlots: number; diff --git a/src/redux/slices/userSlice.ts b/src/redux/slices/userSlice.ts index 92950ac..a45e924 100644 --- a/src/redux/slices/userSlice.ts +++ b/src/redux/slices/userSlice.ts @@ -5,14 +5,12 @@ import { toast } from "sonner"; // Define TypeScript types interface User { - id: string; + id: number; name: string; email: string; phone?: string; - // location?: string; - // managerAssigned?: string; - // vehicle?: string; - password: string; + + } interface UserState {