jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
pull from: dev-jaanvi
merge into: jaanvi:main
Conversation 1 Commits 155 Files changed 39 +247 -146
15 changed files with 247 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c90f422423 - Show all commits

5
src/components/AddEditAdminModal/addEditAdminModal.tsx
View file

@ -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<AddEditCategoryModalProps> = ({
display: "flex",
flexDirection: "column",
width: "50%",
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -226,6 +228,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
id="email"
type="email"
placeholder="Email"
autoComplete="new-email"
required
fullWidth
color={
@ -247,6 +250,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
display: "flex",
flexDirection: "column",
width: "50%",
...autofillFix,
}}
>
<Typography
@ -276,6 +280,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
{...field}
required
placeholder="Enter Password"
autoComplete="new-password"
type={
showPassword
? "text"

7
src/components/AddManagerModal/addManagerModal.tsx
View file

@ -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 */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
{/* Email */}
<Box sx={{ flex: 1 }}>
<Box sx={{ flex: 1, ...autofillFix }}>
<Typography variant="body2" fontWeight={500}>
Email
</Typography>
@ -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({
</Box>
{/* Password */}
<Box sx={{ flex: 1 }}>
<Box sx={{ flex: 1, ...autofillFix }}>
<Typography variant="body2" fontWeight={500}>
Password
</Typography>
@ -244,6 +246,7 @@ export default function AddManagerModal({
<CustomTextField
{...field}
required
autoComplete="new-password"
placeholder="Enter Password"
type={
showPassword ? "text" : "password"

156
src/components/AddStationModal/addStationModal.tsx
View file

@ -11,6 +11,7 @@ import {
Checkbox,
ListItemText,
InputLabel,
Chip,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { useSelector, useDispatch } from "react-redux";
@ -20,7 +21,7 @@ import {
fetchVehicleBrands,
vehicleList,
} from "../../redux/slices/VehicleSlice.ts"; // Adjust this import path accordingly
import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";// Assuming custom styled components
import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components
export default function AddStationModal({
open,
@ -258,62 +259,79 @@ export default function AddStationModal({
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
<Typography
variant="body2"
fontWeight={500}
sx={{ mb: 1 }}
>
Vehicle Brand
</Typography>
<FormControl fullWidth>
<InputLabel>Choose Brands</InputLabel>
<FormControl fullWidth size="small">
<Select
multiple
displayEmpty
value={selectedBrands}
onChange={handleBrandChange}
renderValue={(selected) => {
const selectedArray =
selected as string[];
const displayNames =
selectedArray.slice(0, 1); // First 2 brands
if (selected.length === 0) {
return (
<Typography color="text.secondary">
Choose Brands
</Typography>
);
}
const displayNames = (
selected as string[]
).slice(0, 1);
const moreCount =
selectedArray.length - 1;
(selected as string[]).length -
1;
return (
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 1,
flexWrap: "wrap",
gap: 0.5,
}}
>
{displayNames.map(
(id, index) => {
{displayNames.map((id) => {
const brand =
vehicleBrands.find(
(b) =>
b.id ===
id
);
return (
<Typography
key={index}
variant="body2"
>
{brand
? brand.name
: ""}
</Typography>
b.id === id
);
return brand ? (
<Chip
key={id}
label={
brand.name
}
)}
size="small"
sx={{
height: 24,
}}
/>
) : null;
})}
{moreCount > 0 && (
<Typography
variant="body2"
color="textSecondary"
>
+{moreCount} more
</Typography>
<Chip
label={`+${moreCount} more`}
size="small"
sx={{ height: 24 }}
/>
)}
</Box>
);
}}
MenuProps={{
PaperProps: {
style: {
maxHeight: 224,
},
},
}}
>
{vehicleBrands.length > 0 ? (
vehicleBrands.map((brand) => (
@ -345,6 +363,7 @@ export default function AddStationModal({
</FormControl>
</Box>
{/* Replace the Vehicle Name Dropdown code with this */}
<Box
sx={{
display: "flex",
@ -352,52 +371,79 @@ export default function AddStationModal({
width: "100%",
}}
>
<Typography variant="body2" fontWeight={500}>
<Typography
variant="body2"
fontWeight={500}
sx={{ mb: 1 }}
>
Vehicle Name
</Typography>
<FormControl fullWidth>
<InputLabel>Choose Vehicles</InputLabel>
<FormControl
fullWidth
size="small"
disabled={selectedBrands.length === 0}
>
<Select
multiple
displayEmpty
value={selectedVehicles}
onChange={handleVehicleChange}
renderValue={(selected) => {
const selectedArray =
selected as string[];
const displayNames =
selectedArray.slice(0, 1); // First 2 vehicles
if (selected.length === 0) {
return (
<Typography color="text.secondary">
{selectedBrands.length ===
0
? "Select brand first"
: "Choose Vehicles"}
</Typography>
);
}
const displayNames = (
selected as string[]
).slice(0, 1);
const moreCount =
selectedArray.length - 1;
(selected as string[]).length -
1;
return (
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 1,
flexWrap: "wrap",
gap: 0.5,
}}
>
{displayNames.map(
(name, index) => (
<Typography
key={index}
variant="body2"
>
{name}
</Typography>
(name) => (
<Chip
key={name}
label={name}
size="small"
sx={{
height: 24,
}}
/>
)
)}
{moreCount > 0 && (
<Typography
variant="body2"
color="textSecondary"
>
+{moreCount} more
</Typography>
<Chip
label={`+${moreCount} more`}
size="small"
sx={{ height: 24 }}
/>
)}
</Box>
);
}}
MenuProps={{
PaperProps: {
style: {
maxHeight: 224,
},
},
}}
>
{filteredVehicles.length > 0 ? (
filteredVehicles.map((vehicle) => (

7
src/components/AddUserModal/addUserModal.tsx
View file

@ -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<AddUserModalProps> = ({
display: "flex",
flexDirection: "column",
flex: 1,
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -134,6 +136,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
<CustomTextField
{...field}
required
autoComplete="username"
placeholder="Enter User Name"
fullWidth
size="small"
@ -149,6 +152,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
display: "flex",
flexDirection: "column",
flex: 1,
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -172,6 +176,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
helperText={errors.email?.message}
type="email"
placeholder="Email"
autoComplete="new-email"
required
fullWidth
color={
@ -190,6 +195,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
display: "flex",
flexDirection: "column",
flex: 1,
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -211,6 +217,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
{...field}
required
placeholder="Enter Password"
autoComplete="new-password"
type={
showPassword ? "text" : "password"
}

17
src/components/EditStationModal/editSationModal.tsx
View file

@ -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<EditStationModalProps> = ({
);
const brandId = firstVehicle ? firstVehicle.company : "";
setSelectedBrand(brandId);
setSelectedBrands(brandId);
// Populate selected vehicles
const vehicleNames = vehicles
@ -124,8 +121,6 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
.map((vehicle) => vehicle.company)
: [];
setSelectedBrands(brands);
} else {
reset();
@ -134,13 +129,11 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
}
}, [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<EditStationModalProps> = ({
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,7 +157,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
setValue("allowedCarIds", value);
};
const onSubmit = (data: FormData) => {
const onSubmit = (data: FormData) => {
const vehicleIds = vehicles
.filter((vehicle) => selectedVehicles.includes(vehicle.name))
.map((vehicle) => Number(vehicle.id));
@ -181,11 +173,10 @@ const onSubmit = (data: FormData) => {
reset();
setSelectedBrands([]); // Reset brands after submit
setSelectedVehicles([]); // Reset selected vehicles
};
};
console.log("editRow:", editRow);
return (
<Modal
open={open}

6
src/components/Header/index.tsx
View file

@ -78,10 +78,14 @@ export default function Header() {
spacing={2}
alignItems="center"
sx={{
pointer: "cursor",
display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
}}
>
<NotificationsNoneIcon onClick={toggleNotifications} />
<NotificationsNoneIcon
sx={{ pointer: "cursor" }}
onClick={toggleNotifications}
/>
<Avatar
alt="User Avatar"
src="/avatar.png"

8
src/components/MainGrid/mainGrid.tsx
View file

@ -22,8 +22,6 @@ export default function MainGrid() {
error,
} = useSelector((state: RootState) => state.dashboardReducer);
const staticData = {
totalAdmins: 86,
totalManagers: 12,
@ -32,14 +30,10 @@ export default function MainGrid() {
};
useEffect(() => {
dispatch(fetchDashboardData());
}, [dispatch]);
const data =
{ totalAdmins, totalManagers, totalUsers, totalStations }
const data = { totalAdmins, totalManagers, totalUsers, totalStations };
const statCards = [
{ title: "Total Admins", value: data.totalAdmins },

2
src/components/MenuButton/index.tsx
View file

@ -17,7 +17,7 @@ export default function MenuButton({
invisible={!showBadge}
sx={{ [`& .${badgeClasses.badge}`]: { right: 2, top: 2 } }}
>
<IconButton size="small" {...props} />
<IconButton sx={{ marginRight: "60px" }} size="small" {...props} />
</Badge>
);
}

4
src/components/MenuContent/index.tsx
View file

@ -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}

50
src/pages/Auth/Login/index.tsx
View file

@ -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;
@ -73,7 +74,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<AppTheme {...props}>
<SignInContainer direction="column" justifyContent="space-between">
<Grid container sx={{ minHeight: "100vh" }}>
<Grid
item
xs={0}
@ -86,7 +86,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
position: "relative",
}}
>
<Box
sx={{
position: "absolute",
@ -122,7 +121,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
position: "relative",
}}
>
<Box
sx={{
display: { xs: "flex", md: "none" },
@ -164,7 +162,12 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<Card
variant="outlined"
sx={{
width: { xs: "100%", sm: "90%", md: "90%", lg: "408px" },
width: {
xs: "100%",
sm: "90%",
md: "90%",
lg: "408px",
},
maxWidth: "408px",
minHeight: { xs: "auto", md: "428px" },
padding: { xs: "16px", sm: "20px", md: "24px" },
@ -201,7 +204,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
variant="subtitle2"
sx={{
textAlign: "center",
color: "white",
color: "#D9D8D8",
fontSize: { xs: "14px", md: "16px" },
mb: 1,
}}
@ -214,12 +217,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<FormLabel
htmlFor="email"
sx={{
borderRadius: "8px",
fontSize: {
xs: "0.875rem",
sm: "1rem",
},
color: "white",
mb: 0.5,
...autofillFix,
}}
>
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 }) {
<FormLabel
htmlFor="password"
sx={{
borderRadius: "8px",
fontSize: {
xs: "0.875rem",
sm: "1rem",
@ -350,13 +360,13 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
}
name="password"
placeholder="Password"
autoComplete="current-password"
type={
showPassword
? "text"
: "password"
}
id="password"
autoComplete="current-password"
required
fullWidth
variant="outlined"
@ -367,8 +377,13 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
}
InputProps={{
sx: {
height: { xs: "45px", md: "50px" },
height: {
xs: "45px",
md: "50px",
},
...autofillFix,
},
endAdornment: (
<InputAdornment position="end">
<CustomIconButton
@ -392,7 +407,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
{
backgroundColor:
"#1E1F1F",
borderRadius: "4px",
borderRadius: "8px",
"& fieldset": {
borderColor:
"#4b5255",
@ -471,8 +486,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem"
}
md: "1rem",
},
}}
>
Remember me
@ -492,17 +507,17 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem"
md: "1rem",
},
}}
>
Forgot password?
</Link>
</Box>
<ForgotPassword
{/* <ForgotPassword
open={open}
handleClose={handleClose}
/>
/> */}
{/* Login Button */}
<Button
@ -518,7 +533,10 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
},
padding: { xs: "8px 0", md: "10px 0" },
mt: { xs: 2, md: 3 },
fontSize: { xs: "0.875rem", md: "1rem" },
fontSize: {
xs: "0.875rem",
md: "1rem",
},
}}
>
Login

2
src/redux/slices/stationSlice.ts
View file

@ -1,5 +1,5 @@
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios";
// import axios from "axios";
import http from "../../lib/https";
import { toast } from "sonner";

2
src/redux/slices/userSlice.ts
View file

@ -1,5 +1,5 @@
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios";
// import axios from "axios";
import http from "../../lib/https";
import { toast } from "sonner";

27
src/shared-theme/customizations/autoFill.tsx Normal file
View file

@ -0,0 +1,27 @@
export const autofillFix = {
"& input:-webkit-autofill": {
WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
WebkitTextFillColor: "white !important",
transition: "background-color 5000s ease-in-out 0s",
},
"& input:-webkit-autofill:hover": {
WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
},
"& input:-webkit-autofill:focus": {
WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
},
"& input:-webkit-autofill:active": {
WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
},
"& input:-moz-autofill": {
boxShadow: "0 0 0 1000px transparent inset !important",
MozTextFillColor: "white !important",
transition: "background-color 5000s ease-in-out 0s",
},
"& input:autofill": {
boxShadow: "0 0 0 1000px transparent inset !important",
textFillColor: "white !important",
transition: "background-color 5000s ease-in-out 0s",
},
};

2
src/shared-theme/customizations/inputs.js
View file

@ -8,6 +8,7 @@ import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutline
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
import { gray, brand } from '../themePrimitives';
import {autofillFix} from './autoFill';
/* eslint-disable import/prefer-default-export */
export const inputsCustomizations = {
@ -379,6 +380,7 @@ export const inputsCustomizations = {
styleOverrides: {
input: {
padding: 0,
...autofillFix,
},
root: ({ theme }) => ({
padding: '8px 12px',

2
src/shared-theme/customizations/inputs.tsx
View file

@ -8,6 +8,7 @@ import CheckBoxOutlineBlankRoundedIcon from "@mui/icons-material/CheckBoxOutline
import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
import RemoveRoundedIcon from "@mui/icons-material/RemoveRounded";
import { gray, brand } from "../themePrimitives";
import { autofillFix } from "./autoFill";
/* eslint-disable import/prefer-default-export */
export const inputsCustomizations: Components<Theme> = {
@ -393,6 +394,7 @@ export const inputsCustomizations: Components<Theme> = {
styleOverrides: {
input: {
padding: 0,
...autofillFix,
},
root: ({ theme }) => ({
padding: "8px 12px",