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/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/index.tsx b/src/components/AddBookingModal/addBookingModal.tsx similarity index 71% rename from src/components/AddBookingModal/index.tsx rename to src/components/AddBookingModal/addBookingModal.tsx index 06bfb82..3c2f412 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,12 @@ 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 { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; +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 +47,6 @@ export default function AddBookingModal({ const availableSlots = useSelector( (state: RootState) => state.slotReducer.availableSlots ); - console.log("first", availableSlots); useEffect(() => { dispatch(fetchAvailableSlots()); dispatch(getAllStations()); @@ -74,7 +67,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 +157,7 @@ console.log("Car Ports: ", carPorts); ))} - {errors.stationName && ( + {errors.stationId && ( {errors.stationName.message} @@ -190,11 +183,14 @@ console.log("Car Ports: ", carPorts); 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 }} /> @@ -350,114 +346,6 @@ console.log("Car Ports: ", carPorts); })} /> - - {/* - - {" Time Slot "} - - ( - - - Select Time Slot - - - {errors.timeSlot && ( - - {errors.timeSlot.message} - - )} - - )} - rules={{ required: "Time Slot is required" }} - /> - */} {/* Submit Button */} diff --git a/src/components/AddEditCategoryModal/index.tsx b/src/components/AddEditAdminModal/addEditAdminModal.tsx similarity index 85% rename from src/components/AddEditCategoryModal/index.tsx rename to src/components/AddEditAdminModal/addEditAdminModal.tsx index d802b5d..6c0bbbb 100644 --- a/src/components/AddEditCategoryModal/index.tsx +++ b/src/components/AddEditAdminModal/addEditAdminModal.tsx @@ -1,20 +1,10 @@ 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"; 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 { @@ -54,6 +44,7 @@ const AddEditCategoryModal: React.FC = ({ formState: { errors }, setValue, reset, + clearErrors, } = useForm({ defaultValues: { name: "", @@ -63,7 +54,7 @@ const AddEditCategoryModal: React.FC = ({ password: "", }, }); - + const onSubmit = (data: FormData) => { if (editRow) { handleUpdate( @@ -81,9 +72,9 @@ const AddEditCategoryModal: React.FC = ({ reset(); }; - const togglePasswordVisibility = () => { - setShowPassword((prev) => !prev); - }; + const togglePasswordVisibility = () => { + setShowPassword((prev) => !prev); + }; useEffect(() => { if (editRow) { @@ -91,22 +82,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 +132,7 @@ const AddEditCategoryModal: React.FC = ({ {editRow ? "Edit Admin" : "Add Admin"} - + @@ -291,24 +289,26 @@ const AddEditCategoryModal: React.FC = ({ : "primary" } size="small" - InputProps={{ - endAdornment: ( - - - {showPassword ? ( - - ) : ( - - )} - - - ), + slotProps={{ + input: { + endAdornment: ( + + + {showPassword ? ( + + ) : ( + + )} + + + ), + }, }} error={!!errors.password} helperText={ @@ -334,19 +334,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/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/index.tsx b/src/components/AddManagerModal/addManagerModal.tsx similarity index 87% rename from src/components/AddManagerModal/index.tsx rename to src/components/AddManagerModal/addManagerModal.tsx index 41f745c..78d5c3c 100644 --- a/src/components/AddManagerModal/index.tsx +++ b/src/components/AddManagerModal/addManagerModal.tsx @@ -14,11 +14,8 @@ 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 { - CustomIconButton, - CustomTextField, -} from "../AddEditUserModel/styled.css.tsx"; +import { addManager, managerList } from "../../redux/slices/managerSlice.ts"; +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"; @@ -38,13 +35,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) => { @@ -258,24 +255,26 @@ useEffect(() => { : "primary" } size="small" - InputProps={{ - endAdornment: ( - - - {showPassword ? ( - - ) : ( - - )} - - - ), + slotProps={{ + input: { + endAdornment: ( + + + {showPassword ? ( + + ) : ( + + )} + + + ), + }, }} error={!!errors.password} helperText={errors.password?.message} diff --git a/src/components/AddSlotModal/index.tsx b/src/components/AddSlotModal/addSlotModal.tsx similarity index 86% rename from src/components/AddSlotModal/index.tsx rename to src/components/AddSlotModal/addSlotModal.tsx index 7eef16f..96493bc 100644 --- a/src/components/AddSlotModal/index.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/index.tsx b/src/components/AddStationModal/addStationModal.tsx similarity index 79% rename from src/components/AddStationModal/index.tsx rename to src/components/AddStationModal/addStationModal.tsx index 2919838..fab5bcb 100644 --- a/src/components/AddStationModal/index.tsx +++ b/src/components/AddStationModal/addStationModal.tsx @@ -19,11 +19,8 @@ import { RootState } from "../../redux/reducers.ts"; import { fetchVehicleBrands, vehicleList, -} from "../../redux/slices/VehicleSlice"; // Adjust this import path accordingly -import { - CustomIconButton, - CustomTextField, -} from "../AddEditUserModel/styled.css.tsx"; // Assuming custom styled components +} from "../../redux/slices/VehicleSlice.ts"; // Adjust this import path accordingly +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) => ( @@ -304,9 +344,7 @@ 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/index.tsx b/src/components/EditVehicleModal/editVehicleModal.tsx similarity index 99% rename from src/components/EditVehicleModal/index.tsx rename to src/components/EditVehicleModal/editVehicleModal.tsx index 33ee197..26e155d 100644 --- a/src/components/EditVehicleModal/index.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 80247c2..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"; 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/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 + + 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/ResourcePieChart/index.tsx b/src/components/ResourcePieChart/resourcePieChart.tsx similarity index 94% rename from src/components/ResourcePieChart/index.tsx rename to src/components/ResourcePieChart/resourcePieChart.tsx index 2c0f779..74ed88e 100644 --- a/src/components/ResourcePieChart/index.tsx +++ b/src/components/ResourcePieChart/resourcePieChart.tsx @@ -1,7 +1,4 @@ -import * as React from "react"; import { PieChart } from "@mui/x-charts/PieChart"; -import { useDrawingArea } from "@mui/x-charts/hooks"; -import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; diff --git a/src/components/SessionsChart/index.tsx b/src/components/SessionsChart/sessionChart.tsx similarity index 67% rename from src/components/SessionsChart/index.tsx rename to src/components/SessionsChart/sessionChart.tsx index 2ff16df..55d275a 100644 --- a/src/components/SessionsChart/index.tsx +++ b/src/components/SessionsChart/sessionChart.tsx @@ -3,10 +3,20 @@ import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; -import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; - - +import Select from "@mui/material/Select"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import InputLabel from "@mui/material/InputLabel"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; export default function SessionsChart() { + const [selectedStation, setSelectedStation] = React.useState( + "Delhi NCR EV Station" + ); + + const handleChange = (event: { target: { value: React.SetStateAction; }; }) => { + 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 ( Logo(); 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/AddEditRolePage/index.tsx b/src/pages/AddEditRolePage/index.tsx index 0a8249a..1c9e0ed 100644 --- a/src/pages/AddEditRolePage/index.tsx +++ b/src/pages/AddEditRolePage/index.tsx @@ -20,7 +20,7 @@ import { useDispatch, useSelector } from "react-redux"; import { createRole } from "../../redux/slices/roleSlice"; // Import the createRole action import { AppDispatch, RootState } from "../../redux/store/store"; // Assuming this is the path to your store file import { toast } from "sonner"; -import { CustomTextField } from "../../components/AddEditUserModel/styled.css.tsx"; +import { CustomTextField } from "../../components/AddUserModal/styled.css"; // Define the data structure for permission interface Permission { module: string; diff --git a/src/pages/AdminList/index.tsx b/src/pages/AdminList/index.tsx index b064f9c..7951036 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, @@ -28,7 +28,8 @@ export default function AdminList() { dispatch(adminList()); }, [dispatch]); - const handleClickOpen = () => { + const handleClickOpen = (row: any) => { + setRowData(row); setRowData(null); // Reset row data when opening for new admin setModalOpen(true); }; @@ -96,7 +97,7 @@ export default function AdminList() { email: string; phone: string; Admins: { registeredAddress: string }[]; - userType:string; + userType: string; }, index: number ) => ({ @@ -106,11 +107,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/EVSlotManagement/index.tsx b/src/pages/EVSlotManagement/index.tsx index 678998c..69ba391 100644 --- a/src/pages/EVSlotManagement/index.tsx +++ b/src/pages/EVSlotManagement/index.tsx @@ -8,7 +8,7 @@ import { IconButton, Button, } from "@mui/material"; -import { CustomTextField } from "../../components/AddEditUserModel/styled.css.tsx"; +import { CustomTextField } from "../../components/AddUserModal/styled.css.tsx"; import AddCircleIcon from "@mui/icons-material/AddCircle"; import DeleteIcon from "@mui/icons-material/Delete"; import CalendarTodayRoundedIcon from "@mui/icons-material/CalendarTodayRounded"; 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..7dd3e08 100644 --- a/src/pages/ManagerList/index.tsx +++ b/src/pages/ManagerList/index.tsx @@ -1,8 +1,7 @@ -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 { useEffect, useState } from "react"; +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 { @@ -15,13 +14,11 @@ import { useForm } from "react-hook-form"; export default function ManagerList() { 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 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/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 - + */} (false); @@ -100,7 +99,6 @@ export default function RoleList() { return ( <> - {showPermissions ? ( ) : ( @@ -121,3 +119,4 @@ export default function RoleList() { ); } + diff --git a/src/pages/StationList/index.tsx b/src/pages/StationList/index.tsx index 67dae63..6f2f176 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, @@ -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 52f1579..e14c2bf 100644 --- a/src/pages/UserList/index.tsx +++ b/src/pages/UserList/index.tsx @@ -1,22 +1,22 @@ 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"; -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(); }; @@ -41,7 +42,6 @@ export default function UserList() { name: string; email: string; phone: string; - }) => { try { await dispatch(createUser(data)); @@ -53,7 +53,7 @@ export default function UserList() { }; const handleUpdate = async ( - id: string, + id: number, name: string, email: string, phone: string @@ -79,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 ( <> @@ -123,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 5edaa6d..b215928 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); @@ -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 { 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 */}