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 {