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

Merge pull request 'Latest changes as per UI requirement' (#31) from bugfixes into develop

Browse source 
Reviewed-on: DigiMantra/digiev_frontend#31
This commit is contained in:
Mohit kalshan 2025-04-08 12:24:08 +00:00
parent 276d1c4616 4835cfcebe
commit 9a09d588a6
22 changed files with 605 additions and 338 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

0
public/mobileLogo.png Normal file
View file

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

@ -158,6 +158,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
display: "flex",
flexDirection: "column",
width: "50%",
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -189,8 +190,11 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
{...field}
required
placeholder="Enter Admin Name"
// autoComplete="new-username"
type="text"
fullWidth
size="small"
sx={{ marginTop: 1 }}
error={!!errors.name}
helperText={errors.name?.message}
/>
@ -229,6 +233,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
type="email"
placeholder="Email"
autoComplete="new-email"
sx={{ marginTop: 1 }}
required
fullWidth
color={
@ -294,6 +299,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
: "primary"
}
size="small"
sx={{ marginTop: 1 }}
slotProps={{
input: {
endAdornment: (
@ -329,6 +335,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
display: "flex",
flexDirection: "column",
width: "50%",
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -358,6 +365,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
required
placeholder="Enter Phone Number"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.phone}
helperText={errors.phone?.message}
/>
@ -372,6 +380,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
display: "flex",
flexDirection: "column",
width: "50%",
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -392,6 +401,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
<CustomTextField
{...field}
required
sx={{ marginTop: 1 }}
placeholder="Enter Address"
fullWidth
size="small"

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

@ -121,7 +121,7 @@ export default function AddManagerModal({
<form onSubmit={handleSubmit(onSubmit)}>
{/* Manager Name */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
<Box sx={{ flex: 1 }}>
<Box sx={{ flex: 1, ...autofillFix }}>
<Typography variant="body2" fontWeight={500}>
Manager Name
</Typography>
@ -129,6 +129,8 @@ export default function AddManagerModal({
fullWidth
placeholder="Enter Manager Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.name}
helperText={
errors.name ? errors.name.message : ""
@ -158,17 +160,43 @@ export default function AddManagerModal({
{/* Station Dropdown */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
<Box sx={{ flex: 1 }}>
<Typography variant="body2" fontWeight={500}>
<Typography
variant="body2"
fontWeight={500}
>
Select Station
</Typography>
<FormControl fullWidth error={!!errors.stationName}>
<InputLabel>Select Station</InputLabel>
<FormControl
fullWidth
size="small"
error={!!errors.stationName}
>
<Select
{...register("stationName", {
required: "Station Name is required",
})}
sx={{ marginTop: 1 }}
displayEmpty
defaultValue=""
size="small"
renderValue={(selected) => {
if (!selected) {
return (
<Typography color="text.secondary">
Choose Station
</Typography>
);
}
return selected;
}}
MenuProps={{
PaperProps: {
style: {
maxHeight: 224,
},
},
}}
>
{Array.isArray(stations) &&
stations.length > 0 ? (
@ -187,7 +215,11 @@ export default function AddManagerModal({
)}
</Select>
{errors.stationName && (
<Typography color="error" variant="body2">
<Typography
color="error"
variant="body2"
sx={{ mt: 0.5 }}
>
{errors.stationName.message}
</Typography>
)}
@ -206,6 +238,8 @@ export default function AddManagerModal({
fullWidth
placeholder="Enter Manager Email"
size="small"
sx={{ marginTop: 1 }}
autoComplete="new-email"
error={!!errors.email}
helperText={
@ -246,6 +280,8 @@ export default function AddManagerModal({
<CustomTextField
{...field}
required
sx={{ marginTop: 1 }}
autoComplete="new-password"
placeholder="Enter Password"
type={
@ -289,7 +325,7 @@ export default function AddManagerModal({
{/* Phone Number */}
<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
<Box sx={{ flex: 1 }}>
<Box sx={{ flex: 1, ...autofillFix }}>
<Typography variant="body2" fontWeight={500}>
Phone Number
</Typography>
@ -297,6 +333,8 @@ export default function AddManagerModal({
fullWidth
placeholder="Enter Phone Number"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.phone}
helperText={
errors.phone ? errors.phone.message : ""

21
src/components/AddSlotModal/addSlotModal.tsx
View file

@ -38,13 +38,17 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
<DialogTitle>Add EV Slot</DialogTitle>
<DialogContent>
<form onSubmit={handleSubmit(onSubmit)}>
<Typography variant="body2" fontWeight={500}>
Date
</Typography>
<TextField
{...register("date", {
required: "Date is required",
validate: (value) =>
value >= today || "Date cannot be in the past",
})}
label="Date"
// label="Date"
// sx={{ marginTop: 1 }}
type="date"
fullWidth
margin="normal"
@ -58,12 +62,16 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
// Set the min value to today's date
inputProps={{ min: today }}
/>
<Typography variant="body2" fontWeight={500}>
Start Hour
</Typography>
<TextField
{...register("startHour", {
required: "Start hour is required",
})}
label="Start Hour"
// label="Start Hour"
type="time"
// sx={{ marginTop: 1 }}
fullWidth
margin="normal"
slotProps={{
@ -74,12 +82,16 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
error={!!errors.startHour}
helperText={errors.startHour?.message}
/>
<Typography variant="body2" fontWeight={500}>
End Hour
</Typography>
<TextField
{...register("endHour", {
required: "End hour is required",
})}
label="End Hour"
// label="End Hour"
type="time"
// sx={{ marginTop: 1 }}
fullWidth
margin="normal"
InputLabelProps={{
@ -95,10 +107,13 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
justifyContent="space-between"
gap={2}
>
<Button
onClick={() => setIsAvailable((prev) => !prev)}
variant={isAvailable ? "contained" : "outlined"}
color="primary"
sx={{ marginTop: 1 }}
>
Check Availability
</Button>

3
src/components/AddStationLocation/addStationLocation.tsx
View file

@ -44,7 +44,8 @@ const AddStationLocationModal = ({
"City name must be at least 2 characters",
},
})}
label="City Name"
// label="City Name"
placeholder="Enter City Name"
fullWidth
margin="normal"
error={!!errors.city}

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

@ -22,6 +22,8 @@ import {
vehicleList,
} from "../../redux/slices/VehicleSlice.ts"; // Adjust this import path accordingly
import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Assuming custom styled components
import React from "react";
import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx";
export default function AddStationModal({
open,
@ -158,6 +160,7 @@ export default function AddStationModal({
display: "flex",
flexDirection: "column",
width: "100%",
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -167,6 +170,7 @@ export default function AddStationModal({
fullWidth
placeholder="Enter Station Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.name}
helperText={
errors.name ? errors.name.message : ""
@ -192,6 +196,7 @@ export default function AddStationModal({
display: "flex",
flexDirection: "column",
width: "100%",
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -201,6 +206,8 @@ export default function AddStationModal({
fullWidth
placeholder="Enter Charging Station Address"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.registeredAddress}
helperText={
errors.registeredAddress
@ -231,6 +238,8 @@ export default function AddStationModal({
fullWidth
placeholder="Enter Total Slots"
size="small"
sx={{ marginTop: 1 }}
type="number"
error={!!errors.totalSlots}
helperText={
@ -252,116 +261,118 @@ export default function AddStationModal({
{/* Vehicle Brand Dropdown with Checkboxes */}
<Box sx={{ display: "flex", gap: 2 }}>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
<Typography
variant="body2"
fontWeight={500}
sx={{ mb: 1 }}
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
}}
>
Vehicle Brand
</Typography>
<FormControl fullWidth size="small">
<Select
multiple
displayEmpty
value={selectedBrands}
onChange={handleBrandChange}
renderValue={(selected) => {
if (selected.length === 0) {
return (
<Typography color="text.secondary">
Choose Brands
</Typography>
);
}
const displayNames = (
selected as string[]
).slice(0, 1);
const moreCount =
(selected as string[]).length -
1;
return (
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: 0.5,
}}
>
{displayNames.map((id) => {
const brand =
vehicleBrands.find(
(b) =>
b.id === id
);
return brand ? (
<Chip
key={id}
label={
brand.name
}
size="small"
sx={{
height: 24,
}}
/>
) : null;
})}
{moreCount > 0 && (
<Chip
label={`+${moreCount} more`}
size="small"
sx={{ height: 24 }}
/>
)}
</Box>
);
}}
MenuProps={{
PaperProps: {
style: {
maxHeight: 224,
},
},
}}
<Typography
variant="body2"
fontWeight={500}
sx={{ mb: 1 }}
>
{vehicleBrands.length > 0 ? (
vehicleBrands.map((brand) => (
<MenuItem
key={brand.id}
value={brand.id}
>
<Checkbox
checked={selectedBrands.includes(
brand.id
Vehicle Brand
</Typography>
<FormControl fullWidth size="small">
<Select
multiple
displayEmpty
sx={{ marginTop: 1 }}
value={selectedBrands}
onChange={handleBrandChange}
renderValue={(selected) => {
if (selected.length === 0) {
return (
<Typography color="text.secondary">
Choose Brands
</Typography>
);
}
const displayNames = (
selected as string[]
).slice(0, 1);
const moreCount =
(selected as string[]).length -
1;
return (
<Box
sx={{
display: "flex",
flexWrap: "wrap",
gap: 0.5,
}}
>
{displayNames.map((id) => {
const brand =
vehicleBrands.find(
(b) =>
b.id === id
);
return brand ? (
<Chip
key={id}
label={
brand.name
}
size="small"
sx={{
height: 24,
}}
/>
) : null;
})}
{moreCount > 0 && (
<Chip
label={`+${moreCount} more`}
size="small"
sx={{ height: 24 }}
/>
)}
/>
<ListItemText
primary={brand.name}
/>
</Box>
);
}}
MenuProps={{
PaperProps: {
style: {
maxHeight: 224,
},
},
}}
>
{vehicleBrands.length > 0 ? (
vehicleBrands.map((brand) => (
<MenuItem
key={brand.id}
value={brand.id}
>
<Checkbox
checked={selectedBrands.includes(
brand.id
)}
/>
<ListItemText
primary={brand.name}
/>
</MenuItem>
))
) : (
<MenuItem disabled>
No vehicle brands available
</MenuItem>
))
) : (
<MenuItem disabled>
No vehicle brands available
</MenuItem>
)}
</Select>
<FormHelperText>
{errors.vehicleBrand
? errors.vehicleBrand.message
: ""}
</FormHelperText>
</FormControl>
</Box>
)}
</Select>
<FormHelperText>
{errors.vehicleBrand
? errors.vehicleBrand.message
: ""}
</FormHelperText>
</FormControl>
</Box>
{/* Replace the Vehicle Name Dropdown code with this */}
<Box
@ -386,6 +397,8 @@ export default function AddStationModal({
<Select
multiple
displayEmpty
sx={{ marginTop: 1 }}
value={selectedVehicles}
onChange={handleVehicleChange}
renderValue={(selected) => {

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

@ -140,6 +140,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
placeholder="Enter User Name"
fullWidth
size="small"
sx={{ marginTop: 1 }}
error={!!errors.name}
helperText={errors.name?.message}
/>
@ -177,6 +178,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
type="email"
placeholder="Email"
autoComplete="new-email"
sx={{ marginTop: 1 }}
required
fullWidth
color={
@ -228,6 +230,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
: "primary"
}
size="small"
sx={{ marginTop: 1 }}
slotProps={{
input: {
endAdornment: (
@ -261,6 +264,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
display: "flex",
flexDirection: "column",
flex: 1,
...autofillFix,
}}
>
<Typography variant="body2" fontWeight={500}>
@ -290,6 +294,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
required
placeholder="Enter Phone Number"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.phone}
helperText={errors.phone?.message}
/>

10
src/components/AddVehicleModal/addVehicleModal.tsx
View file

@ -94,6 +94,8 @@ export default function AddVehicleModal({
fullWidth
placeholder="Enter Company Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.company}
helperText={
errors.company
@ -124,6 +126,8 @@ export default function AddVehicleModal({
fullWidth
placeholder="Enter Vehicle Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.name}
helperText={
errors.name ? errors.name.message : ""
@ -166,6 +170,8 @@ export default function AddVehicleModal({
fullWidth
placeholder="Enter Model Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.modelName}
helperText={
errors.modelName
@ -192,6 +198,8 @@ export default function AddVehicleModal({
fullWidth
placeholder="Enter Charge Type"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.chargeType}
helperText={
errors.chargeType
@ -220,6 +228,8 @@ export default function AddVehicleModal({
fullWidth
placeholder="Enter Image URL"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.imageUrl}
helperText={
errors.imageUrl

100
src/components/AppNavbar/index.tsx
View file

@ -9,8 +9,16 @@ import Typography from "@mui/material/Typography";
import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded";
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
import InputBase from "@mui/material/InputBase";
import SearchIcon from "@mui/icons-material/Search";
import MenuButton from "../MenuButton";
import SideMenuMobile from "../SideMenuMobile";
import { Avatar } from "@mui/material";
import OptionsMenu from "../OptionsMenu";
const Toolbar = styled(MuiToolbar)({
width: "100%",
@ -30,18 +38,28 @@ const Toolbar = styled(MuiToolbar)({
export default function AppNavbar() {
const [open, setOpen] = React.useState(false);
const [showNotifications, setShowNotifications] = React.useState(false);
const toggleNotifications = () => {
setShowNotifications((prev) => !prev);
};
const dispatch = useDispatch<AppDispatch>();
const { user } = useSelector((state: RootState) => state?.profileReducer);
const toggleDrawer = (newOpen: boolean) => () => {
setOpen(newOpen);
};
React.useEffect(() => {
dispatch(fetchAdminProfile());
}, [dispatch]);
return (
<AppBar
position="fixed"
sx={{
display: { xs: "auto", md: "none" },
boxShadow: 0,
backgroundColor:"#1C1C1C",
backgroundColor: "#1C1C1C",
backgroundImage: "none",
borderBottom: "1px solid",
borderColor: "divider",
@ -64,13 +82,64 @@ export default function AppNavbar() {
sx={{ justifyContent: "center", mr: "auto" }}
>
<CustomIcon />
<Typography
{/* <Typography
variant="h4"
component="h1"
sx={{ color: "#202020" }}
>
Dashboard
</Typography> */}
</Stack>
<Box
sx={{
// width: { xs: "100%", sm: "360px" },
height: "40px",
borderRadius: "8px",
border: "1px solid #424242",
display: {
md: "none",
xs: "flex",
sm: "flex",
lg: "none",
},
alignItems: "center",
padding: "0 12px",
}}
>
<SearchIcon sx={{ color: "#FFFFFF" }} />
<InputBase
sx={{
marginLeft: 1,
flex: 1,
color: "#FFFFFF",
fontSize: { xs: "12px", sm: "14px" },
}}
/>
</Box>
<Stack
direction="row"
spacing={2}
alignItems="center"
sx={{
pointer: "cursor",
display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
}}
>
<NotificationsNoneIcon
sx={{ cursor: "pointer" }}
onClick={toggleNotifications}
/>
<Avatar
alt="User Avatar"
src="/avatar.png"
sx={{ width: 36, height: 36 }}
/>
<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
{user?.name || "No Adminsss"}
</Typography>
<OptionsMenu />
</Stack>
{/* <ColorModeIconDropdown /> */}
<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
@ -85,26 +154,29 @@ export default function AppNavbar() {
}
export function CustomIcon() {
const [open, setOpen] = React.useState(true);
return (
<Box
sx={{
width: "1.5rem",
height: "1.5rem",
bgcolor: "black",
borderRadius: "999px",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
backgroundImage:
"linear-gradient(135deg, hsl(210, 98%, 60%) 0%, hsl(210, 100%, 35%) 100%)",
color: "hsla(210, 100%, 95%, 0.9)",
border: "1px solid",
borderColor: "hsl(210, 100%, 55%)",
boxShadow: "inset 0 2px 5px rgba(255, 255, 255, 0.3)",
pt: 2,
}}
>
<DashboardRoundedIcon color="inherit" sx={{ fontSize: "1rem" }} />
<img
src="/evLogo.png"
alt="Logo"
style={{
justifyContent: "center",
width: open ? "120px" : "60px",
height: "auto",
transition: "width 0.5s ease",
marginBottom: "10px",
}}
/>
</Box>
);
}

192
src/components/CustomTable/customTable.tsx
View file

@ -58,9 +58,13 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover,
},
"&:nth-of-type(even)": {
backgroundColor: theme.palette.action.hover,
},
"& td, th": {
borderColor: "#454545", // Applying border color to both td and th
borderWidth: "1px", // Set border width to ensure it appears
borderBottom: "1px solid #454545",
},
}));
@ -227,11 +231,16 @@ const CustomTable: React.FC<CustomTableProps> = ({
return (
<Box
sx={{
width: "calc(100% - 48px)",
width: { xs: "100%", sm: "100%" },
margin: "0 auto",
padding: "24px",
backgroundColor: "#1C1C1C",
borderRadius: "12px",
overflowX: "auto",
boxSizing: "border-box",
// Ensure CustomTable doesn't affect layout above it
position: "relative",
zIndex: 1,
}}
>
<Typography
@ -276,22 +285,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
<Box
sx={{
display: "flex",
flexDirection: { xs: "column", sm: "column", md: "row" },
gap: { xs: "16px", sm: "16px", md: "0" },
marginTop: "16px",
alignItems: "center",
alignItems: { xs: "stretch", sm: "stretch", md: "center" },
width: "100%",
}}
>
<TextField
variant="outlined"
placeholder="Search"
sx={{
width: "422px",
width: { xs: "100%", sm: "100%", md: "380px" },
borderRadius: "12px",
input: { color: "#FFFFFF" },
backgroundColor: "#272727",
"& .MuiOutlinedInput-root": {
borderRadius: "12px",
width: "422px",
width: { xs: "100%", sm: "100%", md: "380px" },
height: "44px",
borderWidth: "1px",
padding: "14px 12px 14px 12px",
@ -319,6 +330,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Box
sx={{
display: "flex",
@ -374,7 +386,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
)}
</Box>
<IconButton
{/* <IconButton
sx={{
width: "44px",
height: "44px",
@ -388,7 +400,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
}}
>
<TuneIcon />
</IconButton>
</IconButton> */}
</Box>
{/* Table Section */}
<TableContainer
@ -397,10 +409,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
marginTop: "24px",
backgroundColor: "#1C1C1C",
borderRadius: "12px",
overflow: "hidden",
overflow: "auto",
maxWidth: "100%",
"&::-webkit-scrollbar": {
height: "3px",
},
"&::-webkit-scrollbar-track": {
background: "#1C1C1C",
},
"&::-webkit-scrollbar-thumb": {
background: "#52ACDF",
borderRadius: "4px",
},
}}
>
<Table>
<Table sx={{ minWidth: "750px", tableLayout: "auto" }}>
<TableHead
sx={{
backgroundColor: "#272727",
@ -408,6 +431,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
".css-1ex4ubw-MuiTableCell-root.MuiTableCell-head ":
{
backgroundColor: "#272727",
borderBottom: "1px solid #454545",
},
}}
>
@ -419,6 +443,16 @@ const CustomTable: React.FC<CustomTableProps> = ({
sx={{
color: "#FFFFFF",
fontWeight: "600",
...(column.id === "action" && {
position: "sticky",
right: 0,
zIndex: 2,
backgroundColor: "#272727",
boxShadow:
"-5px 0 5px -2px rgba(0,0,0,0.15)",
borderBottom:
"1px solid #454545",
}),
}}
>
{column.label}
@ -433,51 +467,103 @@ const CustomTable: React.FC<CustomTableProps> = ({
},
}}
>
{currentRows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
<StyledTableCell
key={column.id}
sx={{
color: "#D9D8D8",
backgroundColor: "#272727",
}}
>
{isImage(row[column.id]) ? (
<img
src={row[column.id]}
alt="Row "
style={{
width: "50px",
height: "50px",
objectFit: "cover",
}}
/>
) : column.id !== "action" ? (
row[column.id]
) : (
<CustomIconButton
onClick={(e) => {
handleClick(e, row);
setRowData(row); // Store the selected row
}}
sx={{
padding: 0,
minWidth: 0,
width: "auto",
height: "auto",
color: "#FFFFFF",
}}
>
<MoreHorizRoundedIcon
sx={{ fontSize: "24px" }}
/>
</CustomIconButton>
)}
</StyledTableCell>
))}
{/* This is where the modification starts */}
{currentRows.length === 0 ? (
<StyledTableRow>
<StyledTableCell
colSpan={columns.length}
sx={{
color: "#D9D8D8",
backgroundColor: "#272727",
textAlign: "center",
padding: "32px 0",
}}
>
{(() => {
switch (tableType) {
case "admin":
return "No admins found";
case "role":
return "No roles found";
case "user":
return "No users found";
case "manager":
return "No managers found";
case "vehicle":
return "No vehicles found";
case "station":
return "No charging stations found";
case "external-station":
return "No charging stations found";
case "booking":
return "No bookings found";
case "slots":
return "No slots found";
case "all-available-slots":
return "No available slots found";
default:
return "No data available";
}
})()}
</StyledTableCell>
</StyledTableRow>
))}
) : (
currentRows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
<StyledTableCell
key={column.id}
sx={{
color: "#D9D8D8",
backgroundColor: "#272727",
...(column.id === "action" && {
position: "sticky",
right: 0,
zIndex: 2,
backgroundColor: "#272727",
boxShadow:
"-5px 0 5px -2px rgba(0,0,0,0.15)",
}),
}}
>
{isImage(row[column.id]) ? (
<img
src={row[column.id]}
alt="Row "
style={{
width: "50px",
height: "50px",
objectFit: "cover",
}}
/>
) : column.id !== "action" ? (
row[column.id]
) : (
<CustomIconButton
onClick={(e) => {
handleClick(e, row);
setRowData(row);
}}
sx={{
padding: 0,
minWidth: 0,
width: "auto",
height: "auto",
color: "#FFFFFF",
}}
>
<MoreHorizRoundedIcon
sx={{
fontSize: "24px",
}}
/>
</CustomIconButton>
)}
</StyledTableCell>
))}
</StyledTableRow>
))
)}
</TableBody>
</Table>
</TableContainer>

7
src/components/EditManagerModal/editManagerModal.tsx
View file

@ -171,6 +171,8 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
fullWidth
placeholder="Enter Manager Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.name}
helperText={errors.name?.message}
/>
@ -193,6 +195,8 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
fullWidth
placeholder="Enter Email"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.email}
helperText={errors.email?.message}
/>
@ -229,6 +233,8 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
fullWidth
placeholder="Enter Phone Number"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.phone}
helperText={errors.phone?.message}
/>
@ -249,6 +255,7 @@ const EditManagerModal: React.FC<EditManagerModalProps> = ({
borderRadius: "8px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
whiteSpace: "pre",
}}
disabled={loading}
>

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

@ -249,6 +249,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
fullWidth
placeholder="Enter Station Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.name}
helperText={
errors.name
@ -282,6 +283,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
fullWidth
placeholder="Enter Registered Address"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.registeredAddress}
helperText={
errors.registeredAddress
@ -320,6 +322,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
fullWidth
placeholder="Enter Total Slots"
size="small"
sx={{ marginTop: 1 }}
type="number"
error={!!errors.totalSlots}
helperText={
@ -349,6 +352,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
<InputLabel>Choose Brand</InputLabel>
<Select
multiple
sx={{ marginTop: 1 }}
value={selectedBrands}
onChange={handleBrandChange}
label="Choose Brands"
@ -439,6 +443,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
<InputLabel>Choose Vehicles</InputLabel>
<Select
multiple
sx={{ marginTop: 1 }}
value={selectedVehicles}
onChange={handleCheckboxChange}
renderValue={(selected) => {

3
src/components/EditUserModal/editUserModal.tsx
View file

@ -133,6 +133,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
fullWidth
placeholder="Enter Full Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.name}
helperText={errors.name?.message}
/>
@ -163,6 +164,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
fullWidth
placeholder="Enter Email"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.email}
helperText={errors.email?.message}
/>
@ -199,6 +201,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
fullWidth
placeholder="Enter Phone Number"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.phone}
helperText={errors.phone?.message}
/>

5
src/components/EditVehicleModal/editVehicleModal.tsx
View file

@ -174,6 +174,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
fullWidth
placeholder="Enter Vehicle Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.name}
helperText={errors.name?.message}
@ -206,6 +207,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
fullWidth
placeholder="Enter Company Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.company}
helperText={errors.company?.message}
/>
@ -240,6 +242,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
fullWidth
placeholder="Enter Model Name"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.modelName}
helperText={errors.modelName?.message}
/>
@ -271,6 +274,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
fullWidth
placeholder="Enter Charge Type"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.chargeType}
helperText={errors.chargeType?.message}
/>
@ -300,6 +304,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
fullWidth
placeholder="Enter Image URL"
size="small"
sx={{ marginTop: 1 }}
error={!!errors.imageUrl}
helperText={errors.imageUrl?.message}
/>

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

@ -26,16 +26,25 @@ export default function Header() {
}, [dispatch]);
return (
<Box
sx={{
width: "100%",
height: "84px",
backgroundColor: "#1C1C1C",
padding: { xs: "20px 12px", sm: "20px 24px" },
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexDirection: { xs: "column", sm: "row" },
}}
sx={{
width: "100%",
height: "84px",
minHeight: "84px",
maxHeight: "84px",
backgroundColor: "#1C1C1C",
padding: { xs: "20px 12px", sm: "20px 24px" },
display: {
xs: "none",
md: "flex",
},
marginTop: { xs: "0px", sm: "0px" },
alignItems: "center",
justifyContent: "space-between",
flexDirection: { xs: "column", sm: "row" },
boxSizing: "border-box",
overflowX: "hidden",
flex: "0 0 84px",
}}
>
<Stack
direction="row"
@ -45,14 +54,17 @@ export default function Header() {
sx={{
width: "100%",
justifyContent: { xs: "center", sm: "flex-end" },
marginTop: { xs: 2, sm: 0 },
marginTop: { xs: 0, sm: 0 }, // Remove top margin on mobile
flexWrap: { xs: "wrap", sm: "nowrap" },
maxHeight: "100%", // Ensure content doesn't push height
overflow: "hidden", // Prevent overflow
}}
>
{/* Search Bar */}
<Box
sx={{
// width: { xs: "100%", sm: "360px" },
height: "44px",
height: "40px",
borderRadius: "8px",
border: "1px solid #424242",
@ -83,7 +95,7 @@ export default function Header() {
}}
>
<NotificationsNoneIcon
sx={{ pointer: "cursor" }}
sx={{ cursor: "pointer" }}
onClick={toggleNotifications}
/>
<Avatar

7
src/components/LineChartCard/lineChartCard.tsx
View file

@ -10,6 +10,7 @@ import useMediaQuery from "@mui/material/useMediaQuery";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
import { Box } from "@mui/material";
function AreaGradient({ color, id }: { color: string; id: string }) {
return (
@ -159,12 +160,13 @@ export default function LineChartCard() {
</div>
{/* Line Chart */}
<Box sx={{ mt: 7.5 }}>
<LineChart
colors={[theme.palette.primary.main]}
xAxis={[
{
scaleType: "point",
data: chartData.map((data) => data.label), // Use intervals as x-axis labels
data: chartData.map((data) => data.label),
},
]}
series={[
@ -173,7 +175,7 @@ export default function LineChartCard() {
showMark: false,
curve: "linear",
area: true,
data: chartData.map((data) => data.value), // Use interval data for y-axis
data: chartData.map((data) => data.value),
color: theme.palette.primary.main,
},
]}
@ -191,6 +193,7 @@ export default function LineChartCard() {
id="totalBookings"
/>
</LineChart>
</Box>
</CardContent>
</Card>
);

103
src/components/ResourcePieChart/resourcePieChart.tsx
View file

@ -12,10 +12,10 @@ import { useEffect } from "react";
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
const colorPalette = [
"hsla(202, 69%, 60%, 1)",
"hsl(204, 48.60%, 72.50%)",
"hsl(214, 56.40%, 30.60%)",
"hsl(222, 6.80%, 50.80%)",
"hsla(202, 69%, 60%, 1)",
"hsl(204, 48.60%, 72.50%)",
"hsl(214, 56.40%, 30.60%)",
"hsl(222, 6.80%, 50.80%)",
];
// const data = [
@ -26,17 +26,17 @@ const colorPalette = [
// ];
export default function ResourcePieChart() {
const theme = useTheme();
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
const dispatch = useDispatch<AppDispatch>();
const theme = useTheme();
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
const dispatch = useDispatch<AppDispatch>();
// // Fetch role and carPortCounts from Redux state
// const {user} = useSelector((state: RootState) => state.profileReducer); // Assuming user role is stored in Redux
const { carPortCounts } = useSelector(
(state: RootState) => state.dashboardReducer
);
console.log("first",carPortCounts)
console.log("first", carPortCounts);
// Static data for non-superadmin roles
// const staticCarPorts = [
// { carPort: "240V", count: 5 },
@ -45,52 +45,50 @@ export default function ResourcePieChart() {
// { carPort: "Other", count: 7 },
// ];
useEffect(() => {
useEffect(() => {
dispatch(fetchDashboardData());
}, [dispatch]);
}, [dispatch]);
// console.log("Raw CarPortCounts from API:", carPortCounts);
// console.log("Raw CarPortCounts from API:", carPortCounts);
const dataToDisplay =carPortCounts
const dataToDisplay = carPortCounts;
// const dataToDisplay =
// user?.userType === "superadmin"
// ? carPortCounts.filter((entry) => entry.count > 0) // Exclude zero counts
// : staticCarPorts.filter((entry) => entry.count > 0);
// console.log("Filtered Data to Display:", dataToDisplay);
const getChartDimensions = () => {
if (isXsScreen) {
return {
height: 240,
width: 240,
innerRadius: 40,
outerRadius: 80,
margin: { left: 20, right: 20, top: 40, bottom: 40 }
};
} else if (isSmScreen) {
return {
height: 260,
width: 260,
innerRadius: 50,
outerRadius: 90,
margin: { left: 40, right: 40, top: 60, bottom: 60 }
};
} else {
return {
height: 350,
width: 350,
innerRadius: 55,
outerRadius: 110,
margin: { left: 60, right: 80, top: 80, bottom: 80 }
};
}
};
// const dataToDisplay =
// user?.userType === "superadmin"
// ? carPortCounts.filter((entry) => entry.count > 0) // Exclude zero counts
// : staticCarPorts.filter((entry) => entry.count > 0);
// console.log("Filtered Data to Display:", dataToDisplay);
const getChartDimensions = () => {
if (isXsScreen) {
return {
height: 240,
width: 240,
innerRadius: 40,
outerRadius: 80,
margin: { left: 20, right: 20, top: 40, bottom: 40 },
};
} else if (isSmScreen) {
return {
height: 260,
width: 260,
innerRadius: 50,
outerRadius: 90,
margin: { left: 40, right: 40, top: 60, bottom: 60 },
};
} else {
return {
height: 350,
width: 350,
innerRadius: 55,
outerRadius: 110,
margin: { left: 60, right: 80, top: 80, bottom: 80 },
};
}
};
const dimensions = getChartDimensions();
const dimensions = getChartDimensions();
return (
return (
<Card
variant="outlined"
sx={{
@ -162,7 +160,6 @@ const dataToDisplay =carPortCounts
legend: { hidden: true },
}}
/>
<Stack
spacing={1}
sx={{
@ -170,6 +167,8 @@ const dataToDisplay =carPortCounts
ml: { xs: 0, sm: 2 },
}}
>
<Typography sx={{whiteSpace: "pre"}}>Car Port Types:</Typography>
{dataToDisplay.map((entry, index) => (
<Stack
key={index}
@ -207,5 +206,5 @@ const dataToDisplay =carPortCounts
</Box>
</CardContent>
</Card>
);
}
);
}

11
src/components/SideMenuMobile/index.tsx
View file

@ -14,6 +14,7 @@ import CardAlert from "../CardAlert/CardAlert";
import { AppDispatch, RootState } from "../../redux/store/store";
import { useDispatch, useSelector } from "react-redux";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
import Logout from "../LogOutFunction/LogOutFunction";
interface SideMenuMobileProps {
open: boolean | undefined;
@ -25,6 +26,7 @@ export default function SideMenuMobile({
toggleDrawer,
}: SideMenuMobileProps) {
const dispatch = useDispatch<AppDispatch>();
const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
const { user } = useSelector((state: RootState) => state?.profileReducer);
// React.useEffect(() => {
// dispatch(fetchAdminProfile());
@ -79,9 +81,18 @@ export default function SideMenuMobile({
variant="outlined"
fullWidth
startIcon={<LogoutRoundedIcon />}
onClick={(e) => {
e.stopPropagation();
setLogoutModal(true);
}}
sx={{ color: "red" }}
>
Logout
</Button>
<Logout
setLogoutModal={setLogoutModal}
logoutModal={logoutModal}
/>
</Stack>
</Stack>
</Drawer>

19
src/layouts/DashboardLayout/index.tsx
View file

@ -16,9 +16,11 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
<Box
sx={{
display: "flex",
height: "auto",
// height: "auto",
flexDirection: { xs: "column", md: "row" },
width: "100%",
height: "100vh", // Full height from root, not auto
overflow: "hidden",
margin: 0,
padding: 0,
}}
@ -43,29 +45,32 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
flexDirection: "column",
height: "100vh",
flexGrow: 1,
// backgroundColor: theme.vars
// ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
// : theme.palette.background.default,
backgroundColor: theme.palette.background.default,
overflow: "auto",
overflowX: "hidden",
...customStyles,
mt: { xs: 8, md: 0 },
padding: 0,
})}
>
<Box sx={{ height: "84px", flex: "0 0 84px" }}>
<Header />
</Box>
<Stack
spacing={2}
sx={{
padding: "30px",
display: "flex",
flex: 1,
justifyItems: "center",
alignItems: "center",
mx: 3,
pb: 5,
// mx: { xs: 1, sm: 3 },
// pb: 5,
mt: { xs: 3, md: 0 },
width: "100%",
boxSizing: "border-box",
}}
>
<Header />
<Outlet />
</Stack>
</Box>

117
src/pages/ProfilePage/index.tsx
View file

@ -52,48 +52,40 @@ const ProfilePage = () => {
</Typography>
<Card
sx={{
width: "1132px",
height: "331px",
gap: "24px",
borderRadius: "12px",
padding: "16px",
maxWidth: "100%",
margin: "0 auto",
borderRadius: 2,
p: { xs: 2, sm: 3 },
mx: "auto",
backgroundColor: "#1C1C1C",
}}
// sx={{
// width: "1132px",
// height: "331px",
// gap: "24px",
// borderRadius: "12px",
// padding: "16px",
// maxWidth: "100%",
// margin: "0 auto",
// backgroundColor: "#1C1C1C",
// }}
>
<CardContent>
<Stack direction="column" spacing={2}>
<Stack
direction="row"
spacing={1.5}
alignItems="center"
>
<Stack direction="row" spacing={2} alignItems="center">
<Avatar
alt="User Avatar"
src="/avatar.png"
sx={{ width: "60px", height: "60px" }}
sx={{ width: 60, height: 60 }}
/>
<Box>
<Typography
variant="body1"
width="1028px"
height="24px"
fontWeight={500}
fontSize={"20px"}
lineHeight={"100%"}
sx={{ color: "#FFFFFF" }}
sx={{ color: "#FFFFFF", fontWeight: 500 }}
>
{user?.name || "No Admin"}
</Typography>
<Typography
variant="body2"
color="#D9D8D8"
fontWeight={400}
fontSize={"16px"}
lineHeight={"100%"}
width="46px"
height="19px"
sx={{ color: "#D9D8D8" }}
>
{user?.userType || "N/A"}
</Typography>
@ -105,18 +97,13 @@ const ProfilePage = () => {
/>
<Stack
direction="row"
direction={{ xs: "column", sm: "row" }}
justifyContent="space-between"
alignItems="center"
alignItems={{ xs: "flex-start", sm: "center" }}
>
<Typography
variant="body1"
width="1048px"
height="19px"
fontWeight={500}
fontSize={"16px"}
lineHeight={"100%"}
sx={{ color: "#FFFFFF" }}
sx={{ color: "#FFFFFF", fontWeight: 500 }}
>
Personal Information
</Typography>
@ -129,40 +116,22 @@ const ProfilePage = () => {
</Link> */}
</Stack>
<Grid
container
width="1100px"
height="38px"
// gap={"100px"}
>
<Grid
item
xs={12}
sm={4}
width="64px"
height="16px"
fontSize={"14px"}
lineHeight={"100%"}
>
<Grid container spacing={3} sx={{ overflowX: "auto" }}>
<Grid item xs={12} sm={4}>
<Typography
variant="body1"
fontWeight={500}
sx={{ color: "#FFFFFF" }}
variant="body2"
sx={{ color: "#FFFFFF", fontWeight: 500 }}
>
Full Name:
</Typography>
<Typography
variant="body2"
fontWeight={400}
color="#D9D8D8"
>
<Typography variant="body2" color="#D9D8D8">
{user?.name || "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={4}>
<Typography
variant="body1"
sx={{ color: "#FFFFFF" }}
variant="body2"
sx={{ color: "#FFFFFF", fontWeight: 500 }}
>
Phone:
</Typography>
@ -172,8 +141,8 @@ const ProfilePage = () => {
</Grid>
<Grid item xs={12} sm={4}>
<Typography
variant="body1"
sx={{ color: "#FFFFFF" }}
variant="body2"
sx={{ color: "#FFFFFF", fontWeight: 500 }}
>
Email:
</Typography>
@ -181,24 +150,18 @@ const ProfilePage = () => {
{user?.email || "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={4}>
<Typography
variant="body2"
sx={{ color: "#FFFFFF", fontWeight: 500 }}
>
Bio:
</Typography>
<Typography variant="body2" color="#D9D8D8">
{user?.bio || "No bio available."}
</Typography>
</Grid>
</Grid>
<Typography
variant="body1"
width="21px"
height="16px"
sx={{ color: "#FFFFFF" }}
>
Bio:
</Typography>
<Typography
variant="body2"
width="1100px"
height="32px"
color="#D9D8D8"
>
{user?.bio || "No bio available."}
</Typography>
</Stack>
</CardContent>
</Card>

10
src/router.tsx
View file

@ -23,7 +23,9 @@ const StationList = lazy(() => import("./pages/StationList"));
const EVSlotManagement = lazy(() => import("./pages/EVSlotManagement"));
const BookingList = lazy(() => import("./pages/BookingList"));
const EvSlotList = lazy(() => import("./pages/EvSlotList"));
const ExternalStationList = lazy(() => import("./pages/ExternalStationList/externalStationList.tsx"));
const ExternalStationList = lazy(
() => import("./pages/ExternalStationList/externalStationList.tsx")
);
const AllManagersList = lazy(() => import("./pages/AllMangersList"));
const AvailableSlotsList = lazy(() => import("./pages/AvailableSlotsList"));
interface ProtectedRouteProps {
@ -32,7 +34,7 @@ interface ProtectedRouteProps {
}
// Protected Route Component
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ component }) => {
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ component }) => {
if (!localStorage.getItem("authToken")) {
return <Navigate to="/login" replace />;
}
@ -127,7 +129,9 @@ export default function AppRouter() {
<Route
path="all-available-slots"
element={
<ProtectedRoute component={<AvailableSlotsList />} />
<ProtectedRoute
component={<AvailableSlotsList />}
/>
}
/>
</Route>