From c90f422423687fc47c183b45da27e4943d4103d1 Mon Sep 17 00:00:00 2001 From: Eknoor Singh Date: Mon, 7 Apr 2025 18:02:15 +0530 Subject: [PATCH] Latest Bug Fixes as per QA --- .../AddEditAdminModal/addEditAdminModal.tsx | 5 + .../AddManagerModal/addManagerModal.tsx | 7 +- .../AddStationModal/addStationModal.tsx | 164 +++++++++++------- src/components/AddUserModal/addUserModal.tsx | 7 + .../EditStationModal/editSationModal.tsx | 59 +++---- src/components/Header/index.tsx | 8 +- src/components/MainGrid/mainGrid.tsx | 30 ++-- src/components/MenuButton/index.tsx | 2 +- src/components/MenuContent/index.tsx | 4 +- src/pages/Auth/Login/index.tsx | 72 +++++--- src/redux/slices/stationSlice.ts | 2 +- src/redux/slices/userSlice.ts | 2 +- src/shared-theme/customizations/autoFill.tsx | 27 +++ src/shared-theme/customizations/inputs.js | 2 + src/shared-theme/customizations/inputs.tsx | 2 + 15 files changed, 247 insertions(+), 146 deletions(-) create mode 100644 src/shared-theme/customizations/autoFill.tsx diff --git a/src/components/AddEditAdminModal/addEditAdminModal.tsx b/src/components/AddEditAdminModal/addEditAdminModal.tsx index 6c0bbbb..57c2267 100644 --- a/src/components/AddEditAdminModal/addEditAdminModal.tsx +++ b/src/components/AddEditAdminModal/addEditAdminModal.tsx @@ -5,6 +5,7 @@ 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"; +import { autofillFix } from "../../shared-theme/customizations/autoFill"; //By Jaanvi : Edit Model :: 11-feb-25 interface AddEditCategoryModalProps { @@ -202,6 +203,7 @@ const AddEditCategoryModal: React.FC = ({ display: "flex", flexDirection: "column", width: "50%", + ...autofillFix, }} > @@ -226,6 +228,7 @@ const AddEditCategoryModal: React.FC = ({ id="email" type="email" placeholder="Email" + autoComplete="new-email" required fullWidth color={ @@ -247,6 +250,7 @@ const AddEditCategoryModal: React.FC = ({ display: "flex", flexDirection: "column", width: "50%", + ...autofillFix, }} > = ({ {...field} required placeholder="Enter Password" + autoComplete="new-password" type={ showPassword ? "text" diff --git a/src/components/AddManagerModal/addManagerModal.tsx b/src/components/AddManagerModal/addManagerModal.tsx index 78d5c3c..22b0172 100644 --- a/src/components/AddManagerModal/addManagerModal.tsx +++ b/src/components/AddManagerModal/addManagerModal.tsx @@ -19,6 +19,7 @@ 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"; +import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx"; export default function AddManagerModal({ open, @@ -197,7 +198,7 @@ export default function AddManagerModal({ {/* Email and Password */} {/* Email */} - + Email @@ -205,6 +206,7 @@ export default function AddManagerModal({ fullWidth placeholder="Enter Manager Email" size="small" + autoComplete="new-email" error={!!errors.email} helperText={ errors.email ? errors.email.message : "" @@ -220,7 +222,7 @@ export default function AddManagerModal({ {/* Password */} - + Password @@ -244,6 +246,7 @@ export default function AddManagerModal({ - + Vehicle Brand - - Choose Brands + { - const selectedArray = - selected as string[]; - const displayNames = - selectedArray.slice(0, 1); // First 2 vehicles + if (selected.length === 0) { + return ( + + {selectedBrands.length === + 0 + ? "Select brand first" + : "Choose Vehicles"} + + ); + } + + const displayNames = ( + selected as string[] + ).slice(0, 1); const moreCount = - selectedArray.length - 1; + (selected as string[]).length - + 1; return ( {displayNames.map( - (name, index) => ( - - {name} - + (name) => ( + ) )} {moreCount > 0 && ( - - +{moreCount} more - + )} ); }} + MenuProps={{ + PaperProps: { + style: { + maxHeight: 224, + }, + }, + }} > {filteredVehicles.length > 0 ? ( filteredVehicles.map((vehicle) => ( diff --git a/src/components/AddUserModal/addUserModal.tsx b/src/components/AddUserModal/addUserModal.tsx index d751d97..b0a38fd 100644 --- a/src/components/AddUserModal/addUserModal.tsx +++ b/src/components/AddUserModal/addUserModal.tsx @@ -12,6 +12,7 @@ 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"; +import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx"; interface FormData { name: string; @@ -109,6 +110,7 @@ const AddUserModal: React.FC = ({ display: "flex", flexDirection: "column", flex: 1, + ...autofillFix, }} > @@ -134,6 +136,7 @@ const AddUserModal: React.FC = ({ = ({ display: "flex", flexDirection: "column", flex: 1, + ...autofillFix, }} > @@ -172,6 +176,7 @@ const AddUserModal: React.FC = ({ helperText={errors.email?.message} type="email" placeholder="Email" + autoComplete="new-email" required fullWidth color={ @@ -190,6 +195,7 @@ const AddUserModal: React.FC = ({ display: "flex", flexDirection: "column", flex: 1, + ...autofillFix, }} > @@ -211,6 +217,7 @@ const AddUserModal: React.FC = ({ {...field} required placeholder="Enter Password" + autoComplete="new-password" type={ showPassword ? "text" : "password" } diff --git a/src/components/EditStationModal/editSationModal.tsx b/src/components/EditStationModal/editSationModal.tsx index 40bb596..ae22c1f 100644 --- a/src/components/EditStationModal/editSationModal.tsx +++ b/src/components/EditStationModal/editSationModal.tsx @@ -20,10 +20,7 @@ import { fetchVehicleBrands, vehicleList, } from "../../redux/slices/VehicleSlice"; -import { - CustomIconButton, - CustomTextField, -} from "../AddUserModal/styled.css"; // Assuming custom styled components +import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components interface FormData { name: string; @@ -94,7 +91,7 @@ const EditStationModal: React.FC = ({ ); const brandId = firstVehicle ? firstVehicle.company : ""; - setSelectedBrand(brandId); + setSelectedBrands(brandId); // Populate selected vehicles const vehicleNames = vehicles @@ -116,15 +113,13 @@ const EditStationModal: React.FC = ({ setSelectedVehicles(editRow.allowedCarIds || []); // Set selectedBrands based on the vehicles associated with the station - const brands = editRow?.allowedCarIds - ? vehicles - .filter((vehicle) => - editRow.allowedCarIds.includes(vehicle.id) - ) - .map((vehicle) => vehicle.company) - : []; - - + const brands = editRow?.allowedCarIds + ? vehicles + .filter((vehicle) => + editRow.allowedCarIds.includes(vehicle.id) + ) + .map((vehicle) => vehicle.company) + : []; setSelectedBrands(brands); } else { @@ -134,13 +129,11 @@ const EditStationModal: React.FC = ({ } }, [editRow, setValue, reset, vehicles]); - // Filter vehicles based on selected brands const filteredVehicles = vehicles.filter((vehicle) => selectedBrands.includes(vehicle.company) ); - // Handle changes in vehicle brand selection const handleBrandChange = ( event: React.ChangeEvent<{ value: unknown }> @@ -155,7 +148,6 @@ const EditStationModal: React.FC = ({ setSelectedVehicles(filtered.map((v) => v.name)); // Automatically select vehicles for the selected brands }; - // Handle changes in vehicle selection const handleCheckboxChange = ( event: React.ChangeEvent<{ value: unknown }> @@ -165,27 +157,26 @@ const EditStationModal: React.FC = ({ setValue("allowedCarIds", value); }; -const onSubmit = (data: FormData) => { - const vehicleIds = vehicles - .filter((vehicle) => selectedVehicles.includes(vehicle.name)) - .map((vehicle) => Number(vehicle.id)); + const onSubmit = (data: FormData) => { + const vehicleIds = vehicles + .filter((vehicle) => selectedVehicles.includes(vehicle.name)) + .map((vehicle) => Number(vehicle.id)); - handleUpdate( - editRow.id, - data.name, - data.registeredAddress, - data.totalSlots, - vehicleIds - ); - handleClose(); - reset(); - setSelectedBrands([]); // Reset brands after submit - setSelectedVehicles([]); // Reset selected vehicles -}; + handleUpdate( + editRow.id, + data.name, + data.registeredAddress, + data.totalSlots, + vehicleIds + ); + handleClose(); + reset(); + setSelectedBrands([]); // Reset brands after submit + setSelectedVehicles([]); // Reset selected vehicles + }; console.log("editRow:", editRow); - return ( - + (); - const { + const dispatch = useDispatch(); + const { totalAdmins, totalManagers, totalUsers, totalStations, loading, error, - } = useSelector((state: RootState) => state.dashboardReducer); + } = useSelector((state: RootState) => state.dashboardReducer); - - - const staticData = { + const staticData = { totalAdmins: 86, totalManagers: 12, totalUsers: 24, totalStations: 8, - }; + }; - useEffect(() => { - - dispatch(fetchDashboardData()); - + useEffect(() => { + dispatch(fetchDashboardData()); }, [dispatch]); - const data = - { totalAdmins, totalManagers, totalUsers, totalStations } - + const data = { totalAdmins, totalManagers, totalUsers, totalStations }; - const statCards = [ + const statCards = [ { title: "Total Admins", value: data.totalAdmins }, { title: "Total Managers", value: data.totalManagers }, { title: "Total Users", value: data.totalUsers }, { title: "Total Stations", value: data.totalStations }, - ]; + ]; - return ( + return ( - ); + ); } diff --git a/src/components/MenuButton/index.tsx b/src/components/MenuButton/index.tsx index 114a80a..ce85178 100644 --- a/src/components/MenuButton/index.tsx +++ b/src/components/MenuButton/index.tsx @@ -17,7 +17,7 @@ export default function MenuButton({ invisible={!showBadge} sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }} > - + ); } diff --git a/src/components/MenuContent/index.tsx b/src/components/MenuContent/index.tsx index 5938723..1d295f5 100644 --- a/src/components/MenuContent/index.tsx +++ b/src/components/MenuContent/index.tsx @@ -144,7 +144,9 @@ export default function MenuContent({ hidden }: PropType) { fontSize: "16px", letterSpacing: "0%", lineHeight: "100%", - color: "#D9D8D8", + whiteSpace: "pre", + color: "#FAFAFA", + marginTop: "5px", }, }} primary={item.text} diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx index c725949..7ee1af0 100644 --- a/src/pages/Auth/Login/index.tsx +++ b/src/pages/Auth/Login/index.tsx @@ -22,6 +22,7 @@ import { Visibility, VisibilityOff } from "@mui/icons-material"; import { Card, SignInContainer } from "./styled.css.tsx"; import { CustomIconButton } from "../../../components/AddUserModal/styled.css.tsx"; import { AppDispatch } from "../../../redux/store/store.ts"; +import { autofillFix } from "../../../shared-theme/customizations/autoFill.tsx"; interface ILoginForm { email: string; @@ -50,14 +51,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) { }; const togglePasswordVisibility = (e: React.MouseEvent) => { - e.preventDefault(); + e.preventDefault(); setShowPassword((prev) => !prev); }; const onSubmit: SubmitHandler = async (data: ILoginForm) => { - const isValid = await trigger(); + const isValid = await trigger(); if (!isValid) { - return; + return; } try { const response = await dispatch(loginUser(data)).unwrap(); @@ -73,7 +74,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) { - - - Email @@ -258,7 +263,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) { } InputProps={{ sx: { - height: { xs: "45px", md: "50px" }, + height: { + xs: "45px", + md: "50px", + }, alignItems: "center", backgroundColor: "#1E1F1F", @@ -269,7 +277,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) { { backgroundColor: "#1E1F1F", - borderRadius: "4px", + borderRadius: "8px", "& fieldset": { borderColor: "#4b5255", @@ -302,6 +310,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) { fontFamily: "Gilroy, sans-serif", }, + ...autofillFix, }} /> )} @@ -313,6 +322,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) { Remember me @@ -489,21 +504,21 @@ export default function Login(props: { disableCustomTheme?: boolean }) { alignSelf: "center", color: "#01579b", textDecoration: "none", - fontSize: { - xs: "0.75rem", + fontSize: { + xs: "0.75rem", sm: "0.875rem", - md: "1rem" + md: "1rem", }, }} > Forgot password? - - + /> */} + {/* Login Button */}