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

dashboard login page and table ui changes

Browse source
This commit is contained in:
jaanvi 2025-04-18 18:36:20 +05:30
parent 13d1b584c2
commit f353befab5
15 changed files with 582 additions and 816 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -5,7 +5,7 @@ export const CustomIconButton = styled(IconButton)({
"&:hover": {
backgroundColor: "transparent",
},
"*:where([data-mui-color-scheme='dark']) &": {
"*:where([data-mui-color-scheme='light']) &": {
backgroundColor: "transparent",
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 [isAvailable, setIsAvailable] = useState<boolean>(
editRow?.isAvailable || false
);
useEffect(() => {
if (editRow) {
setValue("startTime", editRow.startTime);
setValue("endTime", editRow.endTime);
setIsAvailable(editRow.isAvailable);
} else {
reset();
}
@ -77,24 +73,21 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
setLoading(true);
try {
const availabilityStatus = isAvailable ? true : false;
await dispatch(
updateSlot({
id: editRow.id, // Slot ID// date: data.date,
id: editRow.id,
startTime: data.startTime,
endTime: data.endTime,
isAvailable: availabilityStatus,
})
).unwrap();
dispatch(fetchManagersSlots());
handleClose(); // Close modal on success
reset(); // Reset form fields after submit
handleClose();
reset();
} catch (error) {
console.error("Error updating slot:", error);
// Handle the error or show a toast message
} finally {
setLoading(false); // Stop loading state
setLoading(false);
}
}
};
@ -106,7 +99,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
if (reason === "backdropClick") {
return;
}
handleClose(); // Close modal when clicking cross or cancel
handleClose();
}}
aria-labelledby="edit-slot-modal"
>
@ -119,7 +112,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
bgcolor: "#000000",
boxShadow: 24,
p: 3,
borderRadius: 2,
@ -133,10 +126,18 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
alignItems: "center",
}}
>
<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
<Typography
variant="h6"
fontWeight={600}
fontSize={"16px"}
color="#D0E1E9"
>
Edit Slot
</Typography>
<CustomIconButton onClick={handleClose}>
<CustomIconButton
onClick={handleClose}
sx={{ "& .MuiSvgIcon-root": { color: "#FFFFFF" } }}
>
<CloseIcon />
</CustomIconButton>
</Box>
@ -148,7 +149,12 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{/* Start Time */}
<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
</Typography>
<Controller
@ -170,7 +176,12 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
{/* End Time */}
<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
</Typography>
<Controller
@ -189,30 +200,6 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
)}
/>
</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>
{/* Submit Button */}
@ -222,12 +209,12 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
<Button
type="submit"
sx={{
backgroundColor: "#52ACDF",
color: "white",
backgroundColor: "#D0E1E9",
color: "#000000",
borderRadius: "8px",
fontSize:'16px',
fontSize: "16px",
width: "117px",
"&:hover": { backgroundColor: "#439BC1" },
"&:hover": { backgroundColor: "#D0E1E9" },
}}
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 { Box } from "@mui/material";
function AreaGradient({ color, id }: { color: string; id: string }) {
return (
<defs>
@ -23,7 +22,7 @@ function AreaGradient({ color, id }: { color: string; id: string }) {
</defs>
);
}
const chartColor = " #111111";
const chartColor = " #111111";
export default function LineChartCard() {
const theme = useTheme();
const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
@ -33,7 +32,7 @@ export default function LineChartCard() {
const { totalBookings, loading } = useSelector(
(state: RootState) => state.dashboardReducer
);
// States for date range inputs
const [startDateBookings, setStartDateBookings] = React.useState("");
const [endDateBookings, setEndDateBookings] = React.useState("");
@ -66,7 +65,7 @@ export default function LineChartCard() {
width: "100%",
height: "auto",
minHeight: { xs: "360px", sm: "400px", md: "444px" },
borderRadius: "16px",
borderRadius: "30px",
border: "none",
background: "#D0E1E9",
}}
@ -156,7 +155,7 @@ export default function LineChartCard() {
{/* Line Chart */}
<Box sx={{ mt: 7.5 }}>
<LineChart
colors={[theme.palette.primary.main]}
colors={[chartColor]}
xAxis={[
{
scaleType: "point",
@ -170,7 +169,7 @@ export default function LineChartCard() {
curve: "linear",
area: true,
data: chartData.map((data) => data.value),
color: theme.palette.primary.main,
color: "#000000",
},
]}
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 { 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%)",
];
// 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 = [
// "hsla(202, 69%, 60%, 1)",
// "hsl(204, 48.60%, 72.50%)",
// "hsl(214, 56.40%, 30.60%)",
// "hsl(222, 6.80%, 50.80%)",
// ];
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() {
const theme = useTheme();
@ -31,20 +30,10 @@ export default function ResourcePieChart() {
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);
// 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(() => {
dispatch(fetchDashboardData());
}, [dispatch]);
@ -53,11 +42,6 @@ export default function ResourcePieChart() {
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 {
@ -100,11 +84,9 @@ export default function ResourcePieChart() {
height: "auto",
minHeight: { xs: "320px", sm: "340px", md: "360px" },
padding: { xs: "12px", sm: "14px", md: "16px" },
borderRadius: "16px",
borderRadius: "30px",
border: "none",
// "*:where([data-mui-color-scheme='dark']) &": {
// backgroundColor: "#202020",
// },
background: "#D0E1E9",
}}
>
@ -114,12 +96,10 @@ export default function ResourcePieChart() {
<Typography
component="h2"
variant="subtitle2"
// color="#F2F2F2"
sx={{
fontWeight: 600,
fontSize: { xs: "12px", sm: "14px", md: "16px" },
lineHeight: "24px",
// color: "#FFFFFF",
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",
minHeight: { xs: "260px", sm: "270px", md: "290px" },
gap: "16px",
borderRadius: "16px",
borderRadius: "30px",
padding: { xs: "12px", sm: "16px", md: "20px" },
border: "none",
// "*:where([data-mui-color-scheme='dark']) &": {
// backgroundColor: "#202020",
// },
background: "#D0E1E9",
}}
>

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

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

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

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

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

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

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

@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
import {
createSlot,
fetchManagersSlots,
toggleStatus,
updateSlot,
} from "../../redux/slices/slotSlice";
import AddSlotModal from "../../components/AddSlotModal/addSlotModal";
@ -25,7 +26,6 @@ export default function EVSlotList() {
(state: RootState) => state?.slotReducer.availableSlots
);
const { user } = useSelector((state: RootState) => state?.profileReducer);
console.log("bjbjhjh", availableSlots);
useEffect(() => {
dispatch(fetchManagersSlots());
}, [dispatch]);
@ -101,7 +101,6 @@ console.log("bjbjhjh", availableSlots);
duration: duration,
};
// Dispatch action to create slot and refresh available slots
await dispatch(createSlot(payload));
await dispatch(fetchManagersSlots());
@ -116,8 +115,7 @@ console.log("bjbjhjh", availableSlots);
const handleUpdate = async (
id: string,
startTime: string,
endTime: string,
isAvailable: boolean
endTime: string
) => {
try {
// Convert times using dayjs
@ -136,7 +134,6 @@ console.log("bjbjhjh", availableSlots);
id,
startTime: formattedStartTime,
endTime: formattedEndTime,
isAvailable,
})
).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[] = [
{ id: "srno", label: "Sr No" },
{ id: "stationName", label: "Station Name" },
{ id: "date", label: "Date" },
{ id: "startTime", label: "Start Time" },
{ id: "endTime", label: "End Time" },
{ id: "isAvailable", label: "Is Available", align: "center" },
{ id: "isAvailable", label: "Status", align: "center" },
...(user?.userType === "manager"
? [{ id: "action", label: "Action", align: "center" as const }]
: []),
@ -164,7 +165,6 @@ console.log("bjbjhjh", availableSlots);
const slotRows = availableSlots?.length
? availableSlots.map((slot, index) => {
const startTime = dayjs(
slot?.startTime,
"YYYY-MM-DD hh:mm A"
@ -173,7 +173,6 @@ console.log("bjbjhjh", availableSlots);
"hh:mm A"
)
: "Invalid";
const endTime = dayjs(
slot?.endTime,
"YYYY-MM-DD hh:mm A"
@ -190,7 +189,11 @@ console.log("bjbjhjh", availableSlots);
date: slot?.date ?? "NA",
startTime: startTime ?? "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)}
tableType="slots"
handleClickOpen={handleClickOpen}
handleStatusToggle={handleStatusToggle} // Pass handleStatusToggle as a prop
/>
<AddSlotModal
open={addModalOpen}
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) => {
await dispatch(toggleStatus({ id, status: newStatus }));
const handleStatusToggle = async (id: string, newStatus: boolean) => {
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
? stations?.map((station: any, index: number) => {
// Format the selected vehicles from the allowedCars array
@ -122,9 +113,8 @@ export default function StationList() {
registeredAddress: station.registeredAddress || "N/A",
totalSlots: station.totalSlots,
vehicles: vehicleDisplay, // Add the formatted vehicle display here
status:
station.status === 1 ? "Available" : "Not Available", // Format status text
statusValue: station.status, // Status value for toggling
statusValue: station?.status === 1, // Normalize to boolean (true for 1, false for 0)
statusField: "status", // Status value for toggling
};
})
: [];

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

@ -85,8 +85,7 @@ export const createSlot = createAsyncThunk<
endHour: string;
isAvailable: boolean;
duration: number;
stationId:number;
stationId: number;
},
{ rejectValue: string }
>("slots/createSlot", async (payload, { rejectWithValue }) => {
@ -114,7 +113,6 @@ export const updateSlot = createAsyncThunk<
id: string;
startTime: string;
endTime: string;
isAvailable: boolean;
},
{ rejectValue: string }
>("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<
string, // Return type (id of deleted slot)
string,
@ -193,16 +223,6 @@ const slotSlice = createSlice({
.addCase(createSlot.pending, (state) => {
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(
createSlot.fulfilled,
(state, action: PayloadAction<Slot[]>) => {
@ -246,7 +266,7 @@ const slotSlice = createSlice({
}
}
)
.addCase(updateSlot.rejected, (state, action) => {
state.loading = false;
state.error = action.payload || "Failed to update slot";
@ -254,6 +274,35 @@ const slotSlice = createSlice({
.addCase(deleteSlot.pending, (state) => {
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(
deleteSlot.fulfilled,
(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 { ThemeProvider, Theme, createTheme } 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 = {
"& 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",
},
};
"& 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: "transparent !important",
transition: "background-color 5000s ease-in-out 0s",
},
};