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 +582 -816
15 changed files with 582 additions and 816 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit f353befab5 - Show all commits

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

@ -43,8 +43,15 @@ const AddSlotModal = ({ open, handleClose }: any) => {
}, [startHour]); }, [startHour]);
const onSubmit = (data: any) => { const onSubmit = (data: any) => {
const { date, startingDate, endingDate, startHour, endHour, duration } = const {
data; date,
startingDate,
endingDate,
startHour,
endHour,
duration,
stationId,
} = data;
const payload = isDateRange const payload = isDateRange
? { ? {
@ -55,6 +62,7 @@ const AddSlotModal = ({ open, handleClose }: any) => {
duration: parseInt(duration, 10), duration: parseInt(duration, 10),
durationUnit, // Include the duration unit (minutes or hours) durationUnit, // Include the duration unit (minutes or hours)
isAvailable, isAvailable,
stationId,
} }
: { : {
date, date,
@ -63,6 +71,7 @@ const AddSlotModal = ({ open, handleClose }: any) => {
duration: parseInt(duration, 10), duration: parseInt(duration, 10),
durationUnit, // Include the duration unit (minutes or hours) durationUnit, // Include the duration unit (minutes or hours)
isAvailable, isAvailable,
stationId,
}; };
dispatch(createSlot(payload)); dispatch(createSlot(payload));

2
src/components/AddUserModal/styled.css.tsx
View file

@ -5,7 +5,7 @@ export const CustomIconButton = styled(IconButton)({
"&:hover": { "&:hover": {
backgroundColor: "transparent", backgroundColor: "transparent",
}, },
"*:where([data-mui-color-scheme='dark']) &": { "*:where([data-mui-color-scheme='light']) &": {
backgroundColor: "transparent", backgroundColor: "transparent",
border: "none", border: "none",
}, },

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

File diff suppressed because it is too large Load diff

77
src/components/EditSlotModal/editSlotModal.tsx
View file

@ -58,15 +58,11 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
}); });
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [isAvailable, setIsAvailable] = useState<boolean>(
editRow?.isAvailable || false
);
useEffect(() => { useEffect(() => {
if (editRow) { if (editRow) {
setValue("startTime", editRow.startTime); setValue("startTime", editRow.startTime);
setValue("endTime", editRow.endTime); setValue("endTime", editRow.endTime);
setIsAvailable(editRow.isAvailable);
} else { } else {
reset(); reset();
} }
@ -77,24 +73,21 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
setLoading(true); setLoading(true);
try { try {
const availabilityStatus = isAvailable ? true : false;
await dispatch( await dispatch(
updateSlot({ updateSlot({
id: editRow.id, // Slot ID// date: data.date, id: editRow.id,
startTime: data.startTime, startTime: data.startTime,
endTime: data.endTime, endTime: data.endTime,
isAvailable: availabilityStatus,
}) })
).unwrap(); ).unwrap();
dispatch(fetchManagersSlots()); dispatch(fetchManagersSlots());
handleClose(); // Close modal on success handleClose();
reset(); // Reset form fields after submit reset();
} catch (error) { } catch (error) {
console.error("Error updating slot:", error); console.error("Error updating slot:", error);
// Handle the error or show a toast message
} finally { } finally {
setLoading(false); // Stop loading state setLoading(false);
} }
} }
}; };
@ -106,7 +99,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
if (reason === "backdropClick") { if (reason === "backdropClick") {
return; return;
} }
handleClose(); // Close modal when clicking cross or cancel handleClose();
}} }}
aria-labelledby="edit-slot-modal" aria-labelledby="edit-slot-modal"
> >
@ -119,7 +112,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
left: "50%", left: "50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: 400, width: 400,
bgcolor: "background.paper", bgcolor: "#000000",
boxShadow: 24, boxShadow: 24,
p: 3, p: 3,
borderRadius: 2, borderRadius: 2,
@ -133,10 +126,18 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600} fontSize={"16px"}> <Typography
variant="h6"
fontWeight={600}
fontSize={"16px"}
color="#D0E1E9"
>
Edit Slot Edit Slot
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton
onClick={handleClose}
sx={{ "& .MuiSvgIcon-root": { color: "#FFFFFF" } }}
>
<CloseIcon /> <CloseIcon />
</CustomIconButton> </CustomIconButton>
</Box> </Box>
@ -148,7 +149,12 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}> <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{/* Start Time */} {/* Start Time */}
<Box sx={{ flex: "1 1 48%" }}> <Box sx={{ flex: "1 1 48%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#D0E1E9"
>
Start Time Start Time
</Typography> </Typography>
<Controller <Controller
@ -170,7 +176,12 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
{/* End Time */} {/* End Time */}
<Box sx={{ flex: "1 1 48%" }}> <Box sx={{ flex: "1 1 48%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#D0E1E9"
>
End Time End Time
</Typography> </Typography>
<Controller <Controller
@ -189,30 +200,6 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
)} )}
/> />
</Box> </Box>
{/* Availability Toggle */}
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
gap={2}
sx={{ flex: "1 1 100%" }}
>
<Button
onClick={() => {
const newAvailability = !isAvailable;
setIsAvailable(newAvailability); // Update local state
setValue("isAvailable", newAvailability); // Update form value for isAvailable
}}
variant={isAvailable ? "contained" : "outlined"}
color="primary"
>
{isAvailable ? "Available" : "Not Available"}
</Button>
{/* <Typography>
{isAvailable ? "Available" : "Not Available"}
</Typography> */}
</Box>
</Box> </Box>
{/* Submit Button */} {/* Submit Button */}
@ -222,12 +209,12 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
<Button <Button
type="submit" type="submit"
sx={{ sx={{
backgroundColor: "#52ACDF", backgroundColor: "#D0E1E9",
color: "white", color: "#000000",
borderRadius: "8px", borderRadius: "8px",
fontSize:'16px', fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#D0E1E9" },
}} }}
disabled={loading} // Disable the button during loading state disabled={loading} // Disable the button during loading state
> >

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

@ -12,7 +12,6 @@ import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchDashboardData } from "../../redux/slices/dashboardSlice"; import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
function AreaGradient({ color, id }: { color: string; id: string }) { function AreaGradient({ color, id }: { color: string; id: string }) {
return ( return (
<defs> <defs>
@ -23,7 +22,7 @@ function AreaGradient({ color, id }: { color: string; id: string }) {
</defs> </defs>
); );
} }
const chartColor = " #111111"; const chartColor = " #111111";
export default function LineChartCard() { export default function LineChartCard() {
const theme = useTheme(); const theme = useTheme();
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm")); const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
@ -33,7 +32,7 @@ export default function LineChartCard() {
const { totalBookings, loading } = useSelector( const { totalBookings, loading } = useSelector(
(state: RootState) => state.dashboardReducer (state: RootState) => state.dashboardReducer
); );
// States for date range inputs // States for date range inputs
const [startDateBookings, setStartDateBookings] = React.useState(""); const [startDateBookings, setStartDateBookings] = React.useState("");
const [endDateBookings, setEndDateBookings] = React.useState(""); const [endDateBookings, setEndDateBookings] = React.useState("");
@ -66,7 +65,7 @@ export default function LineChartCard() {
width: "100%", width: "100%",
height: "auto", height: "auto",
minHeight: { xs: "360px", sm: "400px", md: "444px" }, minHeight: { xs: "360px", sm: "400px", md: "444px" },
borderRadius: "16px", borderRadius: "30px",
border: "none", border: "none",
background: "#D0E1E9", background: "#D0E1E9",
}} }}
@ -156,7 +155,7 @@ export default function LineChartCard() {
{/* Line Chart */} {/* Line Chart */}
<Box sx={{ mt: 7.5 }}> <Box sx={{ mt: 7.5 }}>
<LineChart <LineChart
colors={[theme.palette.primary.main]} colors={[chartColor]}
xAxis={[ xAxis={[
{ {
scaleType: "point", scaleType: "point",
@ -170,7 +169,7 @@ export default function LineChartCard() {
curve: "linear", curve: "linear",
area: true, area: true,
data: chartData.map((data) => data.value), data: chartData.map((data) => data.value),
color: theme.palette.primary.main, color: "#000000",
}, },
]} ]}
height={getChartHeight()} height={getChartHeight()}

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

@ -11,19 +11,18 @@ import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react"; import { useEffect } from "react";
import { fetchDashboardData } from "../../redux/slices/dashboardSlice"; import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
const colorPalette = [ // const colorPalette = [
"hsla(202, 69%, 60%, 1)", // "hsla(202, 69%, 60%, 1)",
"hsl(204, 48.60%, 72.50%)", // "hsl(204, 48.60%, 72.50%)",
"hsl(214, 56.40%, 30.60%)", // "hsl(214, 56.40%, 30.60%)",
"hsl(222, 6.80%, 50.80%)", // "hsl(222, 6.80%, 50.80%)",
];
// const data = [
// { title: "Total Resources", value: 50, color: colorPalette[0] },
// { title: "Total Stations", value: 20, color: colorPalette[1] },
// { title: "Station Manager", value: 15, color: colorPalette[2] },
// { title: "Total Booth", value: 15, color: colorPalette[3] },
// ]; // ];
const colorPalette = [
"rgb(11, 13, 14)",
"hsl(204, 59.60%, 78.60%)",
"hsl(214, 77.50%, 13.90%)",
"hsl(222, 4.10%, 52.20%)",
];
export default function ResourcePieChart() { export default function ResourcePieChart() {
const theme = useTheme(); const theme = useTheme();
@ -31,20 +30,10 @@ export default function ResourcePieChart() {
const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md")); const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
const dispatch = useDispatch<AppDispatch>(); 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( const { carPortCounts } = useSelector(
(state: RootState) => state.dashboardReducer (state: RootState) => state.dashboardReducer
); );
console.log("first", carPortCounts); console.log("first", carPortCounts);
// Static data for non-superadmin roles
// const staticCarPorts = [
// { carPort: "240V", count: 5 },
// { carPort: "120V", count: 3 },
// { carPort: "DCFC", count: 2 },
// { carPort: "Other", count: 7 },
// ];
useEffect(() => { useEffect(() => {
dispatch(fetchDashboardData()); dispatch(fetchDashboardData());
}, [dispatch]); }, [dispatch]);
@ -53,11 +42,6 @@ export default function ResourcePieChart() {
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 = () => { const getChartDimensions = () => {
if (isXsScreen) { if (isXsScreen) {
return { return {
@ -100,11 +84,9 @@ export default function ResourcePieChart() {
height: "auto", height: "auto",
minHeight: { xs: "320px", sm: "340px", md: "360px" }, minHeight: { xs: "320px", sm: "340px", md: "360px" },
padding: { xs: "12px", sm: "14px", md: "16px" }, padding: { xs: "12px", sm: "14px", md: "16px" },
borderRadius: "16px", borderRadius: "30px",
border: "none", border: "none",
// "*:where([data-mui-color-scheme='dark']) &": {
// backgroundColor: "#202020",
// },
background: "#D0E1E9", background: "#D0E1E9",
}} }}
> >
@ -114,12 +96,10 @@ export default function ResourcePieChart() {
<Typography <Typography
component="h2" component="h2"
variant="subtitle2" variant="subtitle2"
// color="#F2F2F2"
sx={{ sx={{
fontWeight: 600, fontWeight: 600,
fontSize: { xs: "12px", sm: "14px", md: "16px" }, fontSize: { xs: "12px", sm: "14px", md: "16px" },
lineHeight: "24px", lineHeight: "24px",
// color: "#FFFFFF",
marginBottom: { xs: 1, sm: 1.5, md: 2 }, marginBottom: { xs: 1, sm: 1.5, md: 2 },
}} }}
> >

5
src/components/SessionsChart/sessionChart.tsx
View file

@ -27,12 +27,9 @@ export default function SessionsChart() {
height: "auto", height: "auto",
minHeight: { xs: "260px", sm: "270px", md: "290px" }, minHeight: { xs: "260px", sm: "270px", md: "290px" },
gap: "16px", gap: "16px",
borderRadius: "16px", borderRadius: "30px",
padding: { xs: "12px", sm: "16px", md: "20px" }, padding: { xs: "12px", sm: "16px", md: "20px" },
border: "none", border: "none",
// "*:where([data-mui-color-scheme='dark']) &": {
// backgroundColor: "#202020",
// },
background: "#D0E1E9", background: "#D0E1E9",
}} }}
> >

8
src/components/StatCard/statCard.tsx
View file

@ -26,7 +26,7 @@ export default function StatCard({ title, value }: StatCardProps) {
sm: "14px", sm: "14px",
md: "10px", md: "10px",
}, },
borderRadius: "12px", borderRadius: "30px",
border: "none", border: "none",
gap: "24px", gap: "24px",
background: "#D0E1E9", background: "#D0E1E9",
@ -80,9 +80,9 @@ export default function StatCard({ title, value }: StatCardProps) {
sx={{ sx={{
fontWeight: 600, fontWeight: 600,
fontSize: { fontSize: {
xs: "24px", xs: "25px",
sm: "28px", sm: "30px",
md: "30px", md: "35px",
}, },
lineHeight: { lineHeight: {
xs: "28px", xs: "28px",

10
src/components/barChartCard/barChartCard.tsx
View file

@ -49,6 +49,7 @@ export default function RoundedBarChart() {
{ {
dataKey: "name", dataKey: "name",
scaleType: "band" as const, scaleType: "band" as const,
bandWidth: isXsScreen ? 8 : 15,
}, },
], ],
sx: { sx: {
@ -74,7 +75,7 @@ export default function RoundedBarChart() {
} else { } else {
return { return {
...baseSettings, ...baseSettings,
width: 500, width: 400,
height: 280, height: 280,
}; };
} }
@ -95,11 +96,8 @@ export default function RoundedBarChart() {
width: "100%", width: "100%",
height: "auto", height: "auto",
minHeight: { xs: "360px", sm: "400px", md: "444px" }, minHeight: { xs: "360px", sm: "400px", md: "444px" },
borderRadius: "16px", borderRadius: "30px",
border: "none", border: "none",
// "*:where([data-mui-color-scheme='dark']) &": {
// backgroundColor: "#202020",
// },
background: "#D0E1E9", background: "#D0E1E9",
}} }}
> >
@ -211,7 +209,7 @@ export default function RoundedBarChart() {
series={[ series={[
{ {
dataKey: "count", dataKey: "count",
color: "#52ACDF", color: "#000000",
}, },
]} ]}
layout="vertical" layout="vertical"

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

@ -40,7 +40,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
trigger, trigger,
} = useForm<ILoginForm>({ mode: "onChange" }); } = useForm<ILoginForm>({ mode: "onChange" });
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
const router = useNavigate(); const navigate = useNavigate();
const handleClickOpen = () => { const handleClickOpen = () => {
setOpen(true); setOpen(true);
@ -63,7 +63,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
try { try {
const response = await dispatch(loginUser(data)).unwrap(); const response = await dispatch(loginUser(data)).unwrap();
if (response?.data?.token) { if (response?.data?.token) {
router("/panel/dashboard"); navigate("/panel/dashboard");
} }
} catch (error: any) { } catch (error: any) {
console.log("Login failed:", error); console.log("Login failed:", error);
@ -112,7 +112,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
xs={12} xs={12}
md={5} md={5}
sx={{ sx={{
backgroundColor: "black", backgroundColor: "background.default", // Use theme's default background (#DFECF1)
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
@ -144,7 +144,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<Typography <Typography
variant="h3" variant="h3"
sx={{ sx={{
color: "white", color: "text.primary", // Use theme's primary text color (#000000)
textAlign: "center", textAlign: "center",
fontSize: { fontSize: {
xs: "1.8rem", xs: "1.8rem",
@ -154,6 +154,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
width: "100%", width: "100%",
mb: { xs: 2, md: 3 }, mb: { xs: 2, md: 3 },
mt: { xs: 0, md: 0 }, mt: { xs: 0, md: 0 },
fontFamily:
'"Publica Sans Round Medium", sans-serif',
}} }}
> >
Welcome Back! Welcome Back!
@ -171,11 +173,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
maxWidth: "408px", maxWidth: "408px",
minHeight: { xs: "auto", md: "428px" }, minHeight: { xs: "auto", md: "428px" },
padding: { xs: "16px", sm: "20px", md: "24px" }, padding: { xs: "16px", sm: "20px", md: "24px" },
borderRadius: "9px", borderRadius: "8px", // Match theme's borderRadius
border: "none", backgroundColor: "#000000", // Use theme's paper color (#D0E1E9)
"*:where([data-mui-color-scheme='dark']) &": { borderColor: "divider", // Use theme's divider color (#E0E0E0)
backgroundColor: "#1E1E1E",
},
}} }}
> >
<Box <Box
@ -193,10 +193,13 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
variant="h4" variant="h4"
sx={{ sx={{
textAlign: "center", textAlign: "center",
color: "white", color: "#D0E1E9",
fontSize: { xs: "20px", md: "24px" }, fontSize: { xs: "20px", md: "24px" },
fontFamily:
'"Publica Sans Round Medium", sans-serif',
}} }}
> >
{" "}
Login Login
</Typography> </Typography>
<Typography <Typography
@ -204,9 +207,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
variant="subtitle2" variant="subtitle2"
sx={{ sx={{
textAlign: "center", textAlign: "center",
color: "#D9D8D8", color: "#D0E1E9", // Use theme's secondary text color (#272727)
fontSize: { xs: "14px", md: "16px" }, fontSize: { xs: "14px", md: "16px" },
mb: 1, mb: 1,
fontFamily:
'"Publica Sans Round Medium", sans-serif',
}} }}
> >
Log in with your email and password Log in with your email and password
@ -217,13 +222,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<FormLabel <FormLabel
htmlFor="email" htmlFor="email"
sx={{ sx={{
borderRadius: "8px",
fontSize: { fontSize: {
xs: "0.875rem", xs: "0.875rem",
sm: "1rem", sm: "1rem",
}, },
color: "white", color: "#D0E1E9",
mb: 0.5, mb: 0.5,
fontFamily:
'"Publica Sans Round Medium", sans-serif',
...autofillFix, ...autofillFix,
}} }}
> >
@ -269,46 +275,43 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
}, },
alignItems: "center", alignItems: "center",
backgroundColor: backgroundColor:
"#1E1F1F", "background.paper", // Match card background
borderRadius: "8px",
}, },
}} }}
sx={{ sx={{
"& .MuiOutlinedInput-root": "& .MuiOutlinedInput-root":
{ {
backgroundColor:
"#1E1F1F",
borderRadius: "8px",
"& fieldset": { "& fieldset": {
borderColor: borderColor:
"#4b5255", "divider",
}, },
"&:hover fieldset": "&:hover fieldset":
{ {
borderColor: borderColor:
"#4b5255", "text.secondary",
}, },
"&.Mui-focused fieldset": "&.Mui-focused fieldset":
{ {
borderColor: borderColor:
"#4b5255", "primary.main",
}, },
}, },
"& input": { "& input": {
color: "white", color: "text.primary",
fontSize: { fontSize: {
xs: "0.875rem", xs: "0.875rem",
sm: "1rem", sm: "1rem",
}, },
fontFamily: fontFamily:
"Gilroy, sans-serif", '"Publica Sans Round Medium", sans-serif',
}, },
"& .MuiInputBase-input::placeholder": "& .MuiInputBase-input::placeholder":
{ {
color: "white", color: "text.secondary",
opacity: 1, opacity: 1,
fontFamily: fontFamily:
"Gilroy, sans-serif", '"Publica Sans Round Medium", sans-serif',
}, },
...autofillFix, ...autofillFix,
}} }}
@ -322,14 +325,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
<FormLabel <FormLabel
htmlFor="password" htmlFor="password"
sx={{ sx={{
borderRadius: "8px",
fontSize: { fontSize: {
xs: "0.875rem", xs: "0.875rem",
sm: "1rem", sm: "1rem",
}, },
color: "white", color: "#D0E1E9",
fontFamily: "Gilroy, sans-serif",
mb: 0.5, mb: 0.5,
fontFamily:
'"Publica Sans Round Medium", sans-serif',
}} }}
> >
Password Password
@ -381,16 +384,18 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
xs: "45px", xs: "45px",
md: "50px", md: "50px",
}, },
backgroundColor:
"background.paper",
borderRadius: "8px",
...autofillFix, ...autofillFix,
}, },
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<CustomIconButton <CustomIconButton
aria-label="toggle password visibility" aria-label="toggle password visibility"
onClick={ onClick={
togglePasswordVisibility togglePasswordVisibility
} // Only the button triggers visibility toggle }
edge="end" edge="end"
> >
{showPassword ? ( {showPassword ? (
@ -405,35 +410,36 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sx={{ sx={{
"& .MuiOutlinedInput-root": "& .MuiOutlinedInput-root":
{ {
backgroundColor:
"#1E1F1F",
borderRadius: "8px",
"& fieldset": { "& fieldset": {
borderColor: borderColor:
"#4b5255", "divider",
}, },
"&:hover fieldset": "&:hover fieldset":
{ {
borderColor: borderColor:
"#4b5255", "text.secondary",
}, },
"&.Mui-focused fieldset": "&.Mui-focused fieldset":
{ {
borderColor: borderColor:
"#4b5255", "primary.main",
}, },
}, },
"& input": { "& input": {
color: "white", color: "text.primary",
fontSize: { fontSize: {
xs: "0.875rem", xs: "0.875rem",
sm: "1rem", sm: "1rem",
}, },
fontFamily:
'"Publica Sans Round Medium", sans-serif',
}, },
"& .MuiInputBase-input::placeholder": "& .MuiInputBase-input::placeholder":
{ {
color: "white", color: "text.secondary",
opacity: 1, opacity: 1,
fontFamily:
'"Publica Sans Round Medium", sans-serif',
}, },
}} }}
/> />
@ -446,7 +452,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
color: "white",
alignItems: "center", alignItems: "center",
flexWrap: { xs: "wrap", sm: "nowrap" }, flexWrap: { xs: "wrap", sm: "nowrap" },
gap: 1, gap: 1,
@ -460,7 +465,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sx={{ sx={{
width: { xs: 16, md: 20 }, width: { xs: 16, md: 20 },
height: { xs: 16, md: 20 }, height: { xs: 16, md: 20 },
border: "2px solid #4b5255", border: "2px solid",
borderColor: "divider",
borderRadius: "4px", borderRadius: "4px",
backgroundColor: backgroundColor:
"transparent", "transparent",
@ -471,7 +477,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
"&.Mui-checked": { "&.Mui-checked": {
backgroundColor: backgroundColor:
"transparent", "transparent",
borderColor: "#4b5255", borderColor:
"primary.main",
"&:hover": { "&:hover": {
backgroundColor: backgroundColor:
"transparent", "transparent",
@ -488,6 +495,9 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
sm: "0.875rem", sm: "0.875rem",
md: "1rem", md: "1rem",
}, },
color: "#D0E1E9",
fontFamily:
'"Publica Sans Round Medium", sans-serif',
}} }}
> >
Remember me Remember me
@ -502,22 +512,20 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
variant="body2" variant="body2"
sx={{ sx={{
alignSelf: "center", alignSelf: "center",
color: "#01579b", color: "#D0E1E9",
textDecoration: "none", textDecoration: "none",
fontSize: { fontSize: {
xs: "0.75rem", xs: "0.75rem",
sm: "0.875rem", sm: "0.875rem",
md: "1rem", md: "1rem",
}, },
fontFamily:
'"Publica Sans Round Medium", sans-serif',
}} }}
> >
Forgot password? Forgot password?
</Link> </Link>
</Box> </Box>
{/* <ForgotPassword
open={open}
handleClose={handleClose}
/> */}
{/* Login Button */} {/* Login Button */}
<Button <Button
@ -525,11 +533,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
fullWidth fullWidth
disabled={!isValid} disabled={!isValid}
sx={{ sx={{
color: "#ffffff !important", color: "#000000",
fontWeight: 500, fontWeight: 500,
backgroundColor: "#52ACDF", backgroundColor: "#D0E1E9",
"&:hover": { "&:hover": {
backgroundColor: "#52ACDF", backgroundColor: "#D0E1E9",
}, },
padding: { xs: "8px 0", md: "10px 0" }, padding: { xs: "8px 0", md: "10px 0" },
mt: { xs: 2, md: 3 }, mt: { xs: 2, md: 3 },
@ -537,6 +545,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
xs: "0.875rem", xs: "0.875rem",
md: "1rem", md: "1rem",
}, },
fontFamily:
'"Publica Sans Round Medium", sans-serif',
}} }}
> >
Login Login

23
src/pages/EvSlotList/index.tsx
View file

@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
import { import {
createSlot, createSlot,
fetchManagersSlots, fetchManagersSlots,
toggleStatus,
updateSlot, updateSlot,
} from "../../redux/slices/slotSlice"; } from "../../redux/slices/slotSlice";
import AddSlotModal from "../../components/AddSlotModal/addSlotModal"; import AddSlotModal from "../../components/AddSlotModal/addSlotModal";
@ -25,7 +26,6 @@ export default function EVSlotList() {
(state: RootState) => state?.slotReducer.availableSlots (state: RootState) => state?.slotReducer.availableSlots
); );
const { user } = useSelector((state: RootState) => state?.profileReducer); const { user } = useSelector((state: RootState) => state?.profileReducer);
console.log("bjbjhjh", availableSlots);
useEffect(() => { useEffect(() => {
dispatch(fetchManagersSlots()); dispatch(fetchManagersSlots());
}, [dispatch]); }, [dispatch]);
@ -101,7 +101,6 @@ console.log("bjbjhjh", availableSlots);
duration: duration, duration: duration,
}; };
// Dispatch action to create slot and refresh available slots
await dispatch(createSlot(payload)); await dispatch(createSlot(payload));
await dispatch(fetchManagersSlots()); await dispatch(fetchManagersSlots());
@ -116,8 +115,7 @@ console.log("bjbjhjh", availableSlots);
const handleUpdate = async ( const handleUpdate = async (
id: string, id: string,
startTime: string, startTime: string,
endTime: string, endTime: string
isAvailable: boolean
) => { ) => {
try { try {
// Convert times using dayjs // Convert times using dayjs
@ -136,7 +134,6 @@ console.log("bjbjhjh", availableSlots);
id, id,
startTime: formattedStartTime, startTime: formattedStartTime,
endTime: formattedEndTime, endTime: formattedEndTime,
isAvailable,
}) })
).unwrap(); ).unwrap();
@ -150,13 +147,17 @@ console.log("bjbjhjh", availableSlots);
} }
}; };
const handleStatusToggle = async (id: string, newStatus: boolean) => {
await dispatch(toggleStatus({ id, isAvailable: newStatus })); // Dispatch the action with the correct status
};
const slotColumns: Column[] = [ const slotColumns: Column[] = [
{ id: "srno", label: "Sr No" }, { id: "srno", label: "Sr No" },
{ id: "stationName", label: "Station Name" }, { id: "stationName", label: "Station Name" },
{ id: "date", label: "Date" }, { id: "date", label: "Date" },
{ id: "startTime", label: "Start Time" }, { id: "startTime", label: "Start Time" },
{ id: "endTime", label: "End Time" }, { id: "endTime", label: "End Time" },
{ id: "isAvailable", label: "Is Available", align: "center" }, { id: "isAvailable", label: "Status", align: "center" },
...(user?.userType === "manager" ...(user?.userType === "manager"
? [{ id: "action", label: "Action", align: "center" as const }] ? [{ id: "action", label: "Action", align: "center" as const }]
: []), : []),
@ -164,7 +165,6 @@ console.log("bjbjhjh", availableSlots);
const slotRows = availableSlots?.length const slotRows = availableSlots?.length
? availableSlots.map((slot, index) => { ? availableSlots.map((slot, index) => {
const startTime = dayjs( const startTime = dayjs(
slot?.startTime, slot?.startTime,
"YYYY-MM-DD hh:mm A" "YYYY-MM-DD hh:mm A"
@ -173,7 +173,6 @@ console.log("bjbjhjh", availableSlots);
"hh:mm A" "hh:mm A"
) )
: "Invalid"; : "Invalid";
const endTime = dayjs( const endTime = dayjs(
slot?.endTime, slot?.endTime,
"YYYY-MM-DD hh:mm A" "YYYY-MM-DD hh:mm A"
@ -190,7 +189,11 @@ console.log("bjbjhjh", availableSlots);
date: slot?.date ?? "NA", date: slot?.date ?? "NA",
startTime: startTime ?? "NA", startTime: startTime ?? "NA",
endTime: endTime ?? "NA", endTime: endTime ?? "NA",
isAvailable: slot?.isAvailable ? "Yes" : "No", isAvailable: slot?.isAvailable
? "Available"
: "Not Available",
statusValue: !!slot?.isAvailable, // Normalize to boolean (true/false)
statusField: "isAvailable", // I
}; };
}) })
: []; : [];
@ -208,7 +211,9 @@ console.log("bjbjhjh", availableSlots);
setModalOpen={() => setEditModalOpen(true)} setModalOpen={() => setEditModalOpen(true)}
tableType="slots" tableType="slots"
handleClickOpen={handleClickOpen} handleClickOpen={handleClickOpen}
handleStatusToggle={handleStatusToggle} // Pass handleStatusToggle as a prop
/> />
<AddSlotModal <AddSlotModal
open={addModalOpen} open={addModalOpen}
handleClose={handleCloseModal} handleClose={handleCloseModal}

18
src/pages/StationList/index.tsx
View file

@ -86,19 +86,10 @@ export default function StationList() {
} }
}; };
const handleStatusToggle = async (id: string, newStatus: number) => { const handleStatusToggle = async (id: string, newStatus: boolean) => {
await dispatch(toggleStatus({ id, status: newStatus })); await dispatch(toggleStatus({ id, status: newStatus ? 1 : 0 })); // For stations, convert boolean to 1/0
}; };
// const filterStations = Array.isArray(stations)
// ? stations.filter((station) =>
// station.name
// .toLocaleLowerCase()
// .includes(searchTerm.toLowerCase())
// )
// : [];
// Mapping and formatting vehicles
const categoryRows = stations?.length const categoryRows = stations?.length
? stations?.map((station: any, index: number) => { ? stations?.map((station: any, index: number) => {
// Format the selected vehicles from the allowedCars array // Format the selected vehicles from the allowedCars array
@ -122,9 +113,8 @@ export default function StationList() {
registeredAddress: station.registeredAddress || "N/A", registeredAddress: station.registeredAddress || "N/A",
totalSlots: station.totalSlots, totalSlots: station.totalSlots,
vehicles: vehicleDisplay, // Add the formatted vehicle display here vehicles: vehicleDisplay, // Add the formatted vehicle display here
status: statusValue: station?.status === 1, // Normalize to boolean (true for 1, false for 0)
station.status === 1 ? "Available" : "Not Available", // Format status text statusField: "status", // Status value for toggling
statusValue: station.status, // Status value for toggling
}; };
}) })
: []; : [];

77
src/redux/slices/slotSlice.ts
View file

@ -85,8 +85,7 @@ export const createSlot = createAsyncThunk<
endHour: string; endHour: string;
isAvailable: boolean; isAvailable: boolean;
duration: number; duration: number;
stationId:number; stationId: number;
}, },
{ rejectValue: string } { rejectValue: string }
>("slots/createSlot", async (payload, { rejectWithValue }) => { >("slots/createSlot", async (payload, { rejectWithValue }) => {
@ -114,7 +113,6 @@ export const updateSlot = createAsyncThunk<
id: string; id: string;
startTime: string; startTime: string;
endTime: string; endTime: string;
isAvailable: boolean;
}, },
{ rejectValue: string } { rejectValue: string }
>("slots/updateSlot", async ({ id, ...slotData }, { rejectWithValue }) => { >("slots/updateSlot", async ({ id, ...slotData }, { rejectWithValue }) => {
@ -134,7 +132,39 @@ export const updateSlot = createAsyncThunk<
); );
} }
}); });
export const toggleStatus = createAsyncThunk<
any,
{ id: string; isAvailable: boolean },
{ rejectValue: string }
>("slot/toggleStatus", async ({ id, isAvailable }, { rejectWithValue }) => {
try {
const response = await http.patch(`/update-availability/${id}`, {
isAvailable,
});
if (response.data.statusCode === 200) {
toast.success(
response.data.message || "Status updated successfully"
);
return {
responseData: response.data,
id,
isAvailable,
};
} else {
throw new Error(response.data.message || "Failed to update status");
}
} catch (error: any) {
toast.error(
"Error updating status: " + (error.message || "Unknown error")
);
return rejectWithValue(
error.response?.data?.message ||
error.message ||
"An error occurred"
);
}
});
export const deleteSlot = createAsyncThunk< export const deleteSlot = createAsyncThunk<
string, // Return type (id of deleted slot) string, // Return type (id of deleted slot)
string, string,
@ -193,16 +223,6 @@ const slotSlice = createSlice({
.addCase(createSlot.pending, (state) => { .addCase(createSlot.pending, (state) => {
state.loading = true; state.loading = true;
}) })
// .addCase(
// createSlot.fulfilled,
// (state, action: PayloadAction<Slot[]>) => {
// state.loading = false;
// // Add the new slots to both arrays
// state.slots.push(...action.payload);
// state.availableSlots.push(...action.payload);
// }
// )
.addCase( .addCase(
createSlot.fulfilled, createSlot.fulfilled,
(state, action: PayloadAction<Slot[]>) => { (state, action: PayloadAction<Slot[]>) => {
@ -246,7 +266,7 @@ const slotSlice = createSlice({
} }
} }
) )
.addCase(updateSlot.rejected, (state, action) => { .addCase(updateSlot.rejected, (state, action) => {
state.loading = false; state.loading = false;
state.error = action.payload || "Failed to update slot"; state.error = action.payload || "Failed to update slot";
@ -254,6 +274,35 @@ const slotSlice = createSlice({
.addCase(deleteSlot.pending, (state) => { .addCase(deleteSlot.pending, (state) => {
state.loading = true; state.loading = true;
}) })
.addCase(toggleStatus.pending, (state) => {
state.loading = true;
})
.addCase(
toggleStatus.fulfilled,
(state, action: PayloadAction<any>) => {
state.loading = false;
const { id, isAvailable } = action.payload;
const stationIndex = state.availableSlots.findIndex(
(slot) => slot.id === id
);
if (stationIndex !== -1) {
state.availableSlots[stationIndex] = {
...state.availableSlots[stationIndex],
isAvailable: isAvailable,
};
}
}
)
.addCase(
toggleStatus.rejected,
(state, action: PayloadAction<string | undefined>) => {
state.loading = false;
state.error =
action.payload || "Failed to toggle station status";
}
)
.addCase( .addCase(
deleteSlot.fulfilled, deleteSlot.fulfilled,
(state, action: PayloadAction<string>) => { (state, action: PayloadAction<string>) => {

63
src/shared-theme/AppTheme.tsx
View file

@ -1,67 +1,4 @@
// import * as React from "react";
// import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
// import type { ThemeOptions } from "@mui/material/styles";
// import { inputsCustomizations } from "./customizations/inputs";
// import { dataDisplayCustomizations } from "./customizations/dataDisplay";
// import { feedbackCustomizations } from "./customizations/feedback";
// import { navigationCustomizations } from "./customizations/navigation";
// import { surfacesCustomizations } from "./customizations/surfaces";
// import { colorSchemes, shadows, shape } from "./themePrimitives";
// interface AppThemeProps {
// children: React.ReactNode;
// disableCustomTheme?: boolean;
// themeComponents?: ThemeOptions["components"];
// }
// export default function AppTheme(props: AppThemeProps) {
// const { children, disableCustomTheme, themeComponents } = props;
// const theme = React.useMemo(() => {
// return disableCustomTheme
// ? {}
// : createTheme({
// palette: {
// mode: "dark",
// background: {
// // default: "#ECF4FA",
// default: "#DFECF1",
// paper: "#1e1e1e",
// },
// text: {
// primary: "#111111",
// secondary: "#b0b0b0",
// },
// },
// typography: {
// fontFamily: "Gilroy",
// },
// cssVariables: {
// colorSchemeSelector: "data-mui-color-scheme",
// cssVarPrefix: "template",
// },
// shadows,
// shape,
// components: {
// ...inputsCustomizations,
// ...dataDisplayCustomizations,
// ...feedbackCustomizations,
// ...navigationCustomizations,
// ...surfacesCustomizations,
// ...themeComponents,
// },
// });
// }, [disableCustomTheme, themeComponents]);
// if (disableCustomTheme) {
// return <React.Fragment>{children}</React.Fragment>;
// }
// return (
// <ThemeProvider theme={theme} disableTransitionOnChange>
// {children}
// </ThemeProvider>
// );
// }
import * as React from "react"; import * as React from "react";
import { ThemeProvider, Theme, createTheme } from "@mui/material/styles"; import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
import type { ThemeOptions } from "@mui/material/styles"; import type { ThemeOptions } from "@mui/material/styles";

50
src/shared-theme/customizations/autoFill.tsx
View file

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