Manager station Details API integration

This commit is contained in:
jaanvi 2025-04-16 18:41:21 +05:30
parent f9cda402aa
commit 15fc16ffa9
9 changed files with 288 additions and 185 deletions

View file

@ -23,16 +23,16 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
formState: { errors }, formState: { errors },
} = useForm(); } = useForm();
const [isAvailable, setIsAvailable] = useState<boolean>(true); const [available, setavailable] = useState<boolean>(true);
const onSubmit = (data: any) => { const onSubmit = (data: any) => {
const { connectorType, power, price } = data; const { connectorType, power, price } = data;
const payload = { const payload = {
connectorType, connectorType,
power, power,
price, price,
isAvailable, available,
}; };
dispatch(addStationDetails(payload)); dispatch(addStationDetails(payload));
@ -128,11 +128,11 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
<FormControlLabel <FormControlLabel
control={ control={
<Switch <Switch
checked={isAvailable} checked={available}
onChange={() => setIsAvailable((prev) => !prev)} onChange={() => setavailable((prev) => !prev)}
/> />
} }
label={isAvailable ? "Available" : "Not Available"} label={available ? "Available" : "Not Available"}
sx={{ mt: 2 }} sx={{ mt: 2 }}
/> />

View file

@ -106,6 +106,7 @@ interface CustomTableProps {
handleStatusToggle?: (id: string, currentStatus: number) => void; handleStatusToggle?: (id: string, currentStatus: number) => void;
tableType: string; // Adding tableType prop to change header text dynamically tableType: string; // Adding tableType prop to change header text dynamically
handleClickOpen?: () => void; handleClickOpen?: () => void;
} }
const CustomTable: React.FC<CustomTableProps> = ({ const CustomTable: React.FC<CustomTableProps> = ({

View file

@ -5,31 +5,34 @@ import {
Typography, Typography,
Modal, Modal,
CircularProgress, CircularProgress,
FormControlLabel,
Switch,
} from "@mui/material"; } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close"; import CloseIcon from "@mui/icons-material/Close";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { import {
updateSlot, updateStationDetails,
fetchManagersSlots, stationDetailList,
} from "../../redux/slices/slotSlice.ts"; // Update with correct action } from "../../redux/slices/managerStationSlice"; // <-- Update path if needed
import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css"; // Custom styled components import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";
import { AppDispatch } from "../../redux/store/store.ts"; import { AppDispatch } from "../../redux/store/store";
import { toast } from "sonner";
// Defining props for the modal interface EditStationModalProps {
interface EditManagerStationModalProp {
open: boolean; open: boolean;
handleClose: () => void; handleClose: () => void;
editRow: any; // Slot data including id editRow: any; // Slot data including id
} }
interface FormData { interface FormData {
startTime: string; connectorType: string;
endTime: string; power: number; // Changed to number
isAvailable: boolean; price: number; // Changed to number
available: boolean;
} }
const EditSlotModal: React.FC<EditManagerStationModalProp> = ({ const EditManagerStationModal: React.FC<EditStationModalProps> = ({
open, open,
handleClose, handleClose,
editRow, editRow,
@ -43,57 +46,56 @@ const EditSlotModal: React.FC<EditManagerStationModalProp> = ({
reset, reset,
} = useForm<FormData>({ } = useForm<FormData>({
defaultValues: { defaultValues: {
startTime: "", connectorType: "",
endTime: "", power: 0, // Default to 0
isAvailable: false, price: 0, // Default to 0
available: false,
}, },
}); });
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [isAvailable, setIsAvailable] = useState<boolean>( const [available, setAvailable] = useState<boolean>(
editRow?.isAvailable || false editRow?.available || false
); );
// Effect to prepopulate the form when the modal is opened
useEffect(() => { useEffect(() => {
if (editRow) { if (editRow) {
setValue("startTime", editRow.startTime); setValue("connectorType", editRow.connectorType);
setValue("endTime", editRow.endTime); setValue("power", Number(editRow.power));
setIsAvailable(editRow.isAvailable); setValue("price", Number(editRow.price));
setAvailable(editRow.available);
} else { } else {
reset(); reset();
} }
}, [editRow, setValue, reset]); }, [editRow, setValue, reset]);
// Handle form submission
const onSubmit = async (data: FormData) => { const onSubmit = async (data: FormData) => {
if (editRow) { if (editRow) {
setLoading(true); setLoading(true);
try { try {
const availabilityStatus = isAvailable ? true : false; console.log("Updating station with data:", data);
const availabilityStatus = available ? true : false;
// Dispatching the update action to the Redux slice const response = await dispatch(
await dispatch( updateStationDetails({
updateSlot({ id: editRow.id,
id: editRow.id, // Slot ID from the editRow object connectorType: data.connectorType,
startTime: data.startTime, power: Number(data.power),
endTime: data.endTime, price: Number(data.price),
isAvailable: availabilityStatus, available: availabilityStatus,
}) })
).unwrap(); ).unwrap();
// Fetch the updated slots after updating the slot console.log("Update response:", response);
dispatch(fetchManagersSlots());
// Close the modal after successful submission dispatch(stationDetailList());
handleClose(); handleClose();
reset(); // Reset the form reset();
toast.success("Station details updated successfully");
} catch (error) { } catch (error) {
console.error("Error updating slot:", error); console.error("Update failed", error);
// Handle error if needed (e.g., show toast notification) toast.error("Failed to update station details");
} finally { } finally {
setLoading(false); // Stop loading state after completion setLoading(false);
} }
} }
}; };
@ -102,12 +104,10 @@ const EditSlotModal: React.FC<EditManagerStationModalProp> = ({
<Modal <Modal
open={open} open={open}
onClose={(e, reason) => { onClose={(e, reason) => {
if (reason === "backdropClick") { if (reason === "backdropClick") return;
return; handleClose();
}
handleClose(); // Close modal when clicking cross or cancel
}} }}
aria-labelledby="edit-slot-modal" aria-labelledby="edit-station-modal"
> >
<Box <Box
component="form" component="form"
@ -132,82 +132,104 @@ const EditSlotModal: React.FC<EditManagerStationModalProp> = ({
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography variant="h6" fontWeight={600} fontSize={"16px"}> <Typography variant="h6" fontWeight={600}>
Edit Slot Edit Station Details
</Typography> </Typography>
<CustomIconButton onClick={handleClose}> <CustomIconButton onClick={handleClose}>
<CloseIcon /> <CloseIcon />
</CustomIconButton> </CustomIconButton>
</Box> </Box>
{/* Horizontal Line */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
{/* Input Fields */} {/* Input Fields */}
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}> <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{/* Start Time */} {/* Connector Type */}
<Box sx={{ flex: "1 1 48%" }}> <Box sx={{ flex: "1 1 100%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography variant="body2" fontWeight={500} mb={0.5}>
Start Time Connector Type
</Typography> </Typography>
<Controller <Controller
name="startTime" name="connectorType"
control={control} control={control}
rules={{ required: "Start Time is required" }} rules={{ required: "Connector type is required" }}
render={({ field }) => ( render={({ field }) => (
<CustomTextField <CustomTextField
{...field} {...field}
type="time"
fullWidth fullWidth
size="small" size="small"
error={!!errors.startTime} error={!!errors.connectorType}
helperText={errors.startTime?.message} helperText={errors.connectorType?.message}
/> />
)} )}
/> />
</Box> </Box>
{/* End Time */} {/* Power */}
<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}>
End Time Power
</Typography> </Typography>
<Controller <Controller
name="endTime" name="power"
control={control} control={control}
rules={{ required: "End Time is required" }} rules={{ required: "Power is required" }}
render={({ field }) => ( render={({ field }) => (
<CustomTextField <CustomTextField
{...field} {...field}
type="time" type="number"
fullWidth fullWidth
size="small" size="small"
error={!!errors.endTime} error={!!errors.power}
helperText={errors.endTime?.message} helperText={errors.power?.message}
/> />
)} )}
/> />
</Box> </Box>
{/* Availability Toggle */} {/* Price */}
<Box sx={{ flex: "1 1 48%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}>
Price
</Typography>
<Controller
name="price"
control={control}
rules={{ required: "Price is required" }}
render={({ field }) => (
<CustomTextField
{...field}
type="number"
fullWidth
size="small"
error={!!errors.price}
helperText={errors.price?.message}
/>
)}
/>
</Box>
{/* Available Toggle */}
<Box <Box
display="flex" display="flex"
alignItems="center" alignItems="center"
justifyContent="space-between" justifyContent="space-between"
gap={2}
sx={{ flex: "1 1 100%" }} sx={{ flex: "1 1 100%" }}
> >
<Button <FormControlLabel
onClick={() => { control={
const newAvailability = !isAvailable; <Switch
setIsAvailable(newAvailability); // Update local state checked={available}
setValue("isAvailable", newAvailability); // Update form value for isAvailable onChange={() => {
}} const toggle = !available;
variant={isAvailable ? "contained" : "outlined"} setAvailable(toggle);
color="primary" setValue("available", toggle);
> }}
{isAvailable ? "Available" : "Not Available"} />
</Button> }
label={available ? "Available" : "Not Available"}
sx={{ mt: 1 }}
/>
</Box> </Box>
</Box> </Box>
@ -225,12 +247,12 @@ const EditSlotModal: React.FC<EditManagerStationModalProp> = ({
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
}} }}
disabled={loading} // Disable the button during loading state disabled={loading}
> >
{loading ? ( {loading ? (
<CircularProgress size={24} color="inherit" /> <CircularProgress size={24} color="inherit" />
) : ( ) : (
"Update Slot" "Update"
)} )}
</Button> </Button>
</Box> </Box>
@ -239,4 +261,4 @@ const EditSlotModal: React.FC<EditManagerStationModalProp> = ({
); );
}; };
export default EditSlotModal; export default EditManagerStationModal;

View file

@ -46,13 +46,19 @@ export default function MainGrid() {
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
maxWidth: "1600px", maxWidth: "1800px",
mx: "auto", mx: "auto",
px: { xs: 2, sm: 1, md: 0 }, px: { xs: 2, sm: 1, md: 0 },
// background: "#DFECF1",
}} }}
> >
{/* Dashboard Header */} {/* Dashboard Header */}
<Typography component="h2" variant="h6" sx={{ mb: 2 ,fontSize:"30px", fontWeight:"600"}}> <Typography
component="h2"
variant="h6"
sx={{ mb: 2, fontSize: "30px", fontWeight: "600" }}
>
Dashboard Dashboard
</Typography> </Typography>

View file

@ -0,0 +1,72 @@
import React from "react";
import {
Box,
Button,
Dialog,
DialogTitle,
DialogContent,
Tabs,
Tab,
Typography,
} from "@mui/material";
import { useSelector } from "react-redux";
import { RootState } from "../../redux/reducers";
type Slot = {
id: string;
startTime: string;
endTime: string;
isAvailable?: boolean;
};
interface SlotPickerModalProps {
open: boolean;
handleClose: () => void;
selectedSlotId: string | null;
onSelect: (slot: Slot) => any;
}
export default function SlotPickerModal({
open,
handleClose,
selectedSlotId,
onSelect,
}: SlotPickerModalProps) {
const availableSlots = useSelector(
(state: RootState) => state.slotReducer.availableSlots || []
);
// eslint-disable-next-line @typescript-eslint/no-redeclare
return (
<Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
<DialogTitle>Select a Time Slot</DialogTitle>
<DialogContent>
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{availableSlots.map((slot) => {
const isDisabled = !slot?.isAvailable;
const label = `${slot?.startTime} - ${slot?.endTime}`;
return (
<Button
key={slot?.id}
variant={
selectedSlotId === slot?.id
? "contained"
: "outlined"
}
color="primary"
disabled={isDisabled}
onClick={() => onSelect(slot)}
>
{label}
</Button>
);
})}
</Box>
</DialogContent>
</Dialog>
);
}

View file

@ -1,14 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import CustomTable, { Column } from "../../components/CustomTable/customTable"; import CustomTable, { Column } from "../../components/CustomTable/customTable";
import AddManagerModal from "../../components/AddManagerModal/addManagerModal";
import EditManagerModal from "../../components/EditManagerModal/editManagerModal";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "../../redux/store/store"; import { RootState, AppDispatch } from "../../redux/store/store";
import {
managerList,
addManager,
updateManager,
} from "../../redux/slices/managerSlice";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { import {
addStationDetails, addStationDetails,
@ -22,12 +15,11 @@ export default function ManagerStationDetails() {
const [addModalOpen, setAddModalOpen] = useState<boolean>(false); const [addModalOpen, setAddModalOpen] = useState<boolean>(false);
const [editModalOpen, setEditModalOpen] = useState<boolean>(false); const [editModalOpen, setEditModalOpen] = useState<boolean>(false);
const { reset } = useForm(); const { reset } = useForm();
const [deleteModal, setDeleteModal] = useState<boolean>(false); const [deleteModal, setDeleteModal] = useState<boolean>(false);
const [viewModal, setViewModal] = useState<boolean>(false); const [viewModal, setViewModal] = useState<boolean>(false);
const [rowData, setRowData] = useState<any | null>(null); const [rowData, setRowData] = useState<any | null>(null);
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
const managerStationDetails = useSelector( const stationDetails = useSelector(
(state: RootState) => state.managerStationReducer.stationDetails (state: RootState) => state.managerStationReducer.stationDetails
); );
@ -47,75 +39,79 @@ export default function ManagerStationDetails() {
reset(); reset();
}; };
const handleAddManager = async (data: { const handleAddStationDetails = async (data: {
stationId: string; stationId: string;
connectorType: string; connectorType: string;
power: string; power: number;
price: string; price: number;
available: boolean;
}) => { }) => {
try { try {
// Add manager with stationId await dispatch(addStationDetails(data));
await dispatch(addStationDetails(data)); // Dispatch action to add manager await dispatch(stationDetailList()); // Fetch updated station list
await dispatch(stationDetailList()); // Fetch the updated list handleCloseModal(); // Close modal
handleCloseModal(); // Close the modal
} catch (error) { } catch (error) {
console.error("Error adding manager", error); console.error("Error adding manager", error);
} }
}; };
// Handle updating an existing manager
const handleUpdate = async ( const handleUpdate = async (
id: number, id: number,
connectorType: string, connectorType: string,
power: string, power: number,
price: string price: number,
available: boolean
) => { ) => {
try { try {
console.log("Updating station with data:", { id, connectorType, power, price, available })
if (!id) {
console.error("Error: id is missing!");
return;
}
await dispatch( await dispatch(
updateStationDetails({ updateStationDetails({
id, id,
connectorType, connectorType,
power, power,
price, price,
isAvailable: false, available,
}) })
); ).unwrap();
await dispatch(stationDetailList()); await dispatch(stationDetailList()); // Fetch updated station list
handleCloseModal(); handleCloseModal(); // Close modal
} catch (error) { } catch (error) {
console.error("Update failed", error); console.error("Update failed", error);
} }
}; };
// Columns for the table
const categoryColumns: Column[] = [ const categoryColumns: Column[] = [
{ id: "srno", label: "Sr No" }, { id: "srno", label: "Sr No" },
{ id: "stationName", label: "Station Name" }, { id: "stationName", label: "Station Name" },
{ id: "registeredAddress", label: "Station Location" }, { id: "stationAddress", label: "Station Location" },
{ id: "connectorType", label: "Connector Type" }, { id: "connectorType", label: "Connector Type" },
{ id: "power", label: "Max Power(KW)" }, { id: "power", label: "Max Power(KW)" },
{ id: "price", label: "Price" }, { id: "price", label: "Price" },
{ id: "isAvailable", label: "Is Available", align: "center" }, { id: "available", label: "Is Available", align: "center" },
{ id: "action", label: "Action", align: "center" }, { id: "action", label: "Action", align: "center" }, // Action column for Edit and Delete
]; ];
const categoryRows = managerStationDetails?.length // Rows for the table
? managerStationDetails.map((managerStation, index) => { const categoryRows = stationDetails.map((station, index) => ({
return { ...station, // Include all station properties
id: managerStation.id, srno: index + 1,
srno: index + 1, stationName: station.stationName ?? "NA",
stationName: managerStation?.stationName ?? "NA", stationAddress: station.stationAddress ?? "NA",
registeredAddress: managerStation.registeredAddress, connectorType: station.connectorType ?? "NA",
connectorType: managerStation.connectorType, power: station.power ?? "NA",
power: managerStation.power, price: station.price ?? "NA",
price: managerStation.price ?? "NA", available: station.available ? "Yes" : "No",
isAvailable: managerStation?.isAvailable ? "Yes" : "No", }));
};
})
: [];
return ( return (
<> <>
{/* Custom Table to show manager list */} {/* Custom Table to show station details */}
<CustomTable <CustomTable
columns={categoryColumns} columns={categoryColumns}
rows={categoryRows} rows={categoryRows}
@ -124,22 +120,24 @@ export default function ManagerStationDetails() {
setViewModal={setViewModal} setViewModal={setViewModal}
viewModal={viewModal} viewModal={viewModal}
setRowData={setRowData} setRowData={setRowData}
setModalOpen={() => setEditModalOpen(true)} setModalOpen={() => setEditModalOpen(true)} // Open edit modal when row is clicked
tableType="manager-station" tableType="manager-station"
handleClickOpen={handleClickOpen} handleClickOpen={handleClickOpen} // Open add modal
/> />
{/* Add Manager Modal */}
{/* Add Manager Station Modal */}
<AddManagerStationModal <AddManagerStationModal
open={addModalOpen} open={addModalOpen}
handleClose={handleCloseModal} handleClose={handleCloseModal}
handleAddManager={handleAddManager} handleAddStationDetails={handleAddStationDetails}
/> />
{/* Edit Manager Modal */}
{/* Edit Manager Station Modal */}
<EditManagerStationModal <EditManagerStationModal
open={editModalOpen} open={editModalOpen}
handleClose={handleCloseModal} handleClose={handleCloseModal}
handleUpdate={handleUpdate} handleUpdate={handleUpdate} // Pass the update handler
editRow={rowData} editRow={rowData} // Pass the selected row data for editing
/> />
</> </>
); );

View file

@ -1,17 +1,16 @@
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit"; import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import http from "../../lib/https"; import http from "../../lib/https";
import { toast } from "sonner"; import { toast } from "sonner";
interface StationDetails { interface StationDetails {
id: number; stationAddress: string;
stationName: string; stationName: string;
registeredAddress: string; id: number;
managerId?: number;
stationId?: number;
connectorType: string; connectorType: string;
power: string; power: number;
price: string; price: number;
isAvailable: boolean; available: boolean;
} }
interface StationDetailState { interface StationDetailState {
@ -20,7 +19,6 @@ interface StationDetailState {
error: string | null; error: string | null;
} }
// Initial state
const initialState: StationDetailState = { const initialState: StationDetailState = {
stationDetails: [], stationDetails: [],
loading: false, loading: false,
@ -37,11 +35,11 @@ export const stationDetailList = createAsyncThunk<
const token = localStorage?.getItem("authToken"); const token = localStorage?.getItem("authToken");
if (!token) throw new Error("No token found"); if (!token) throw new Error("No token found");
const response = await http.get("/manager-station-details"); const response = await http.get("/get-station-details");
if (!response.data?.data) throw new Error("Invalid API response"); if (!response.data?.data) throw new Error("Invalid API response");
return response.data.data; return response.data.data;
} catch (error: any) { } catch (error: any) {
toast.error("Error Fetching Managers: " + error.message); toast.error("Error Fetching Station Details: " + error.message);
return rejectWithValue( return rejectWithValue(
error?.response?.data?.message || "An error occurred" error?.response?.data?.message || "An error occurred"
); );
@ -53,21 +51,20 @@ export const addStationDetails = createAsyncThunk<
StationDetails, StationDetails,
{ {
connectorType: string; connectorType: string;
power: string; power: number; // Changed to number
price: string; price: number; // Changed to number
isAvailable: boolean; available: boolean;
}, },
{ rejectValue: string } { rejectValue: string }
>("addManager", async (data, { rejectWithValue }) => { >("addManager", async (data, { rejectWithValue }) => {
try { try {
const response = await http.post( const response = await http.post("add-station-details", data);
"create-manager-station-details",
data
);
toast.success("Station details created successfully"); toast.success("Station details created successfully");
return response.data?.data; return response.data?.data;
} catch (error: any) { } catch (error: any) {
toast.error("Error creating manager: " + error.response?.data?.message); toast.error(
"Error creating Station details: " + error.response?.data?.message
);
return rejectWithValue( return rejectWithValue(
error.response?.data?.message || "An error occurred" error.response?.data?.message || "An error occurred"
); );
@ -80,26 +77,23 @@ export const updateStationDetails = createAsyncThunk<
{ {
id: number; id: number;
connectorType: string; connectorType: string;
power: string; power: number;
price: string; price: number;
isAvailable: boolean; available: boolean;
}, },
{ rejectValue: string } { rejectValue: string }
>( >(
"updateManagerStationDetails", "updateManagerStationDetails",
async ({ id, ...managerStationData }, { rejectWithValue }) => { async ({ id, ...managerStationData }, { rejectWithValue }) => {
if (!id) {
return rejectWithValue("Manager ID is required.");
}
try { try {
const response = await http.put( const response = await http.patch(
`/update-manager-station-details/${id}`, `update-station-details/${id}`,
{ ...managerStationData } managerStationData
); );
toast.success("Station Details updated successfully"); toast.success("Station Details updated successfully");
return response?.data; return response.data; // Return the updated data
} catch (error: any) { } catch (error: any) {
toast.error("Error updating manager: " + error.message); toast.error("Error updating station details: " + error.message);
return rejectWithValue( return rejectWithValue(
error.response?.data?.message || "An error occurred" error.response?.data?.message || "An error occurred"
); );
@ -114,7 +108,7 @@ export const deleteStationDetails = createAsyncThunk<
{ rejectValue: string } { rejectValue: string }
>("deleteManager", async (id, { rejectWithValue }) => { >("deleteManager", async (id, { rejectWithValue }) => {
try { try {
await http.delete(`/delete-manager/${id}`); await http.delete(`remove-station-details/${id}`);
toast.success("Station details deleted successfully!"); toast.success("Station details deleted successfully!");
return id; return id;
} catch (error: any) { } catch (error: any) {
@ -132,7 +126,7 @@ const managerStationSlice = createSlice({
reducers: {}, reducers: {},
extraReducers: (builder) => { extraReducers: (builder) => {
builder builder
// Fetch Managers // Fetch Station Details
.addCase(stationDetailList.pending, (state) => { .addCase(stationDetailList.pending, (state) => {
state.loading = true; state.loading = true;
state.error = null; state.error = null;
@ -146,10 +140,11 @@ const managerStationSlice = createSlice({
) )
.addCase(stationDetailList.rejected, (state, action) => { .addCase(stationDetailList.rejected, (state, action) => {
state.loading = false; state.loading = false;
state.error = action.payload || "Failed to fetch managers"; state.error =
action.payload || "Failed to fetch station details";
}) })
// Add Station details // Add Station Details
.addCase(addStationDetails.pending, (state) => { .addCase(addStationDetails.pending, (state) => {
state.loading = true; state.loading = true;
}) })
@ -162,30 +157,39 @@ const managerStationSlice = createSlice({
) )
.addCase(addStationDetails.rejected, (state, action) => { .addCase(addStationDetails.rejected, (state, action) => {
state.loading = false; state.loading = false;
state.error = action.payload || "Failed to add manager"; state.error = action.payload || "Failed to add station details";
}) })
// Update Manager // Update Station Details
.addCase(updateStationDetails.pending, (state) => { .addCase(updateStationDetails.pending, (state) => {
state.loading = true; state.loading = true;
}) })
.addCase(updateStationDetails.fulfilled, (state, action) => { .addCase(
state.loading = false; updateStationDetails.fulfilled,
const updateStationDetail = action.payload; (state, action: PayloadAction<StationDetails>) => {
const index = state.stationDetails.findIndex( state.loading = false;
(stationDetail) =>
stationDetail.id === updateStationDetail.id // Update the station details in the array
); const index = state.stationDetails.findIndex(
if (index !== -1) { (station) => station.id === action.payload.id
state.stationDetails[index] = updateStationDetail; // Update the manager station in the state );
if (index !== -1) {
// Only update the fields that have changed
state.stationDetails[index] = {
...state.stationDetails[index],
...action.payload, // Merge the updated fields
};
}
} }
}) )
.addCase(updateStationDetails.rejected, (state, action) => { .addCase(updateStationDetails.rejected, (state, action) => {
state.loading = false; state.loading = false;
state.error = action.payload || "Failed to update manager"; state.error =
action.payload || "Failed to update station details";
}) })
// Delete Manager // Delete Station Details
.addCase(deleteStationDetails.pending, (state) => { .addCase(deleteStationDetails.pending, (state) => {
state.loading = true; state.loading = true;
}) })
@ -198,7 +202,8 @@ const managerStationSlice = createSlice({
}) })
.addCase(deleteStationDetails.rejected, (state, action) => { .addCase(deleteStationDetails.rejected, (state, action) => {
state.loading = false; state.loading = false;
state.error = action.payload || "Failed to delete manager"; state.error =
action.payload || "Failed to delete station details";
}); });
}, },
}); });

View file

@ -246,7 +246,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";

View file

@ -23,6 +23,7 @@ export default function AppTheme(props: AppThemeProps) {
palette: { palette: {
mode: "dark", mode: "dark",
background: { background: {
// default: "#ECF4FA",
default: "#111111", default: "#111111",
paper: "#1e1e1e", paper: "#1e1e1e",
}, },
@ -33,7 +34,6 @@ export default function AppTheme(props: AppThemeProps) {
}, },
typography: { typography: {
fontFamily: "Gilroy", fontFamily: "Gilroy",
}, },
cssVariables: { cssVariables: {
colorSchemeSelector: "data-mui-color-scheme", colorSchemeSelector: "data-mui-color-scheme",
@ -49,7 +49,6 @@ export default function AppTheme(props: AppThemeProps) {
...surfacesCustomizations, ...surfacesCustomizations,
...themeComponents, ...themeComponents,
}, },
}); });
}, [disableCustomTheme, themeComponents]); }, [disableCustomTheme, themeComponents]);