Merge pull request 'bugfix/bugfix_cartables' (#4) from bugfix/bugfix_cartables into develop

Reviewed-on: #4

src/components/dashboard/roadMissions/operator/Actions/Violations/Dialog.jsx

@@ -0,0 +1,26 @@
+import { Close } from "@mui/icons-material";
+import { Dialog, DialogTitle, IconButton } from "@mui/material";
+import ViolationsList from "./ViolationsList";
+
+const ViolationsDialog = ({ open, setOpen, mutate, row }) => {
+    return (
+        <Dialog open={open} fullWidth maxWidth="xs">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <Close />
+            </IconButton>
+            <DialogTitle>تخلفات</DialogTitle>
+            {open && <ViolationsList setOpen={setOpen} />}
+        </Dialog>
+    );
+};
+export default ViolationsDialog;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/Area/Routing/AlarmText.jsx

@@ -0,0 +1,28 @@
+import { Box, Typography } from "@mui/material";
+
+const AlarmText = ({ isSource }) => {
+    if (isSource) return null;
+    return (
+        <Box
+            sx={{
+                position: "absolute",
+                top: 5,
+                left: 5,
+                zIndex: 1000,
+                border: "1px solid #ed0f02",
+                backgroundColor: "#f19898",
+                py: 0.5,
+                px: 1,
+                borderRadius: 2,
+                opacity: 0.8,
+                boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
+            }}
+        >
+            <Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
+                با کلیک بر روی مارکر موقعیت را انتخاب کنید
+            </Typography>
+        </Box>
+    );
+};
+
+export default AlarmText;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/Area/Routing/DataBox.jsx

@@ -0,0 +1,53 @@
+import { Box, Button, TextField } from "@mui/material";
+
+const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
+    if (!isSource) return null;
+
+    return (
+        <Box
+            sx={{
+                position: "absolute",
+                bottom: 5,
+                left: 5,
+                zIndex: 1000,
+                backgroundColor: "white",
+                border: "1px solid #e1e1e1",
+                padding: 1,
+                borderRadius: 2,
+                opacity: 0.8,
+                gap: 1,
+                display: "flex",
+                flexDirection: "column",
+            }}
+        >
+            <div style={{ display: "flex", alignItems: "end", gap: 4 }}>
+                <TextField
+                    variant="outlined"
+                    size="small"
+                    readOnly
+                    value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
+                />
+                {isSource && isDest && (
+                    <Button variant="contained" color="success" size="small" onClick={onEditSource}>
+                        ویرایش مبدا
+                    </Button>
+                )}
+            </div>
+            {isDest && (
+                <div style={{ display: "flex", alignItems: "end", gap: 4 }}>
+                    <TextField
+                        size="small"
+                        variant="outlined"
+                        readOnly
+                        value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
+                    />
+                    <Button variant="contained" color="error" size="small" onClick={onEditDest}>
+                        ویرایش مقصد
+                    </Button>
+                </div>
+            )}
+        </Box>
+    );
+};
+
+export default DataBox;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/Area/Routing/ShowRoute.jsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "react";
+import { Marker, Polyline, useMap } from "react-leaflet";
+import L from "leaflet";
+import polyline from "@mapbox/polyline";
+import SourceIcon from "@/assets/images/source-icon.svg";
+import DestIcon from "@/assets/images/destination-icon.svg";
+
+const ShowRoute = ({ area }) => {
+    const map = useMap();
+    const defaultIconSize = [35, 35];
+
+    const createCustomIcon = (size, iconUrl) => {
+        return L.icon({
+            iconUrl: iconUrl,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    };
+
+    const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
+    const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
+    useEffect(() => {
+        if (coords.length > 0) {
+            map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
+        }
+    }, [area]);
+
+    if (!area) return null;
+    const coords = polyline.decode(area, 6);
+
+    if (coords.length === 0) return null;
+
+    const sourcePosition = coords[0];
+    const destPosition = coords[coords.length - 1];
+
+    return (
+        <>
+            <Polyline positions={coords} color="#015688" weight={7} opacity={1} />
+            <Marker position={sourcePosition} icon={sourceIcon} />
+            <Marker position={destPosition} icon={destIcon} />
+        </>
+    );
+};
+
+export default ShowRoute;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/Area/Routing/index.jsx

@@ -0,0 +1,219 @@
+import { Marker, Polyline, useMapEvents } from "react-leaflet";
+import L from "leaflet";
+import polyline from "@mapbox/polyline";
+import SourceIcon from "@/assets/images/source-icon.svg";
+import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
+import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
+import DestIcon from "@/assets/images/destination-icon.svg";
+import { useEffect, useRef, useState } from "react";
+import DataBox from "./DataBox";
+import AlarmText from "./AlarmText";
+
+const Routing = ({ setArea, setLocations, locations, area }) => {
+    const mapPrevSourceMarker = useRef();
+    const mapPrevDestMarker = useRef();
+    const mapRef = useRef(null);
+    const defaultIconSize = [35, 35];
+    const [isSource, setIsSource] = useState(false);
+    const [sourcePosition, setSourcePosition] = useState(null);
+    const [isDest, setIsDest] = useState(false);
+    const [destPosition, setDestPosition] = useState(null);
+    const [routeCoords, setRouteCoords] = useState([]);
+    const [alternateCoords, setAlternateCoords] = useState([]);
+    const [editingTarget, setEditingTarget] = useState(null);
+    const [selectedRoute, setSelectedRoute] = useState(null);
+
+    const createCustomIcon = (size, iconUrl) => {
+        return L.icon({
+            iconUrl: iconUrl,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    };
+
+    const defaultIcon = createCustomIcon(
+        defaultIconSize,
+        isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
+    );
+
+    const prevDestIcon = createCustomIcon(
+        defaultIconSize,
+        isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
+    );
+
+    const isMovingSource = !isSource || editingTarget === "source";
+    const isMovingDest = isSource && (!isDest || editingTarget === "dest");
+
+    const map = useMapEvents({
+        move(e) {
+            if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
+            if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
+        },
+        movestart() {
+            if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
+            if (isMovingDest && mapPrevDestMarker.current)
+                mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
+        },
+        moveend() {
+            if (isMovingSource)
+                mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
+            if (isMovingDest && mapPrevDestMarker.current)
+                mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
+        },
+    });
+
+    useEffect(() => {
+        mapRef.current = map;
+    }, [map]);
+
+    useEffect(() => {
+        if (locations.length < 2) return;
+        const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
+        const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
+        setSourcePosition(restoredSource);
+        setDestPosition(restoredDest);
+        setIsSource(true);
+        setIsDest(true);
+        if (area) {
+            const decoded = polyline.decode(area, 6);
+            setRouteCoords(decoded);
+            setSelectedRoute({ index: "main", coords: decoded });
+            setTimeout(() => {
+                mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
+            }, 100);
+        } else {
+            fetchRoute(restoredSource, restoredDest);
+        }
+    }, []);
+
+    const fetchRoute = async (source, dest) => {
+        const locs = [
+            { lat: source.lat, lon: source.lng },
+            { lat: dest.lat, lon: dest.lng },
+        ];
+        try {
+            const response = await fetch("https://jouya.141.ir/api/router/drive", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ locations: locs }),
+            });
+            const data = await response.json();
+            const shape = data.trip.legs[0].shape;
+            setLocations(locs);
+            setArea(shape);
+            const decoded = polyline.decode(shape, 6);
+            setRouteCoords(decoded);
+            setSelectedRoute({ index: "main", coords: decoded });
+
+            if (data.alternates?.length > 0) {
+                const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
+                setAlternateCoords(decodedAlternates);
+            } else {
+                setAlternateCoords([]);
+            }
+            map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
+        } catch (error) {
+            console.error("Routing error:", error);
+        }
+    };
+
+    const handleMarkerClick = async () => {
+        if (!isSource || editingTarget === "source") {
+            const clickedPosition = mapPrevSourceMarker.current.getLatLng();
+            setSourcePosition(clickedPosition);
+            setIsSource(true);
+            setEditingTarget(null);
+            setRouteCoords([]);
+            setAlternateCoords([]);
+            setSelectedRoute(null);
+
+            if (editingTarget === "source" && destPosition) {
+                await fetchRoute(clickedPosition, destPosition);
+            }
+        }
+    };
+
+    const handleDestMarkerClick = async () => {
+        if (!isDest || editingTarget === "dest") {
+            const clickedPosition = mapPrevDestMarker.current.getLatLng();
+            setDestPosition(clickedPosition);
+            setIsDest(true);
+            setEditingTarget(null);
+
+            await fetchRoute(sourcePosition, clickedPosition);
+        }
+    };
+
+    const handleEditSource = () => {
+        setEditingTarget("source");
+        setRouteCoords([]);
+        setAlternateCoords([]);
+        setSelectedRoute(null);
+    };
+
+    const handleEditDest = () => {
+        setEditingTarget("dest");
+        setRouteCoords([]);
+        setAlternateCoords([]);
+        setSelectedRoute(null);
+    };
+
+    const handleSelectRoute = (index, coords) => {
+        setSelectedRoute({ index, coords });
+        const encoded = polyline.encode(coords, 6);
+        setArea(encoded);
+        map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
+    };
+
+    return (
+        <>
+            <DataBox
+                isSource={isSource}
+                isDest={isDest}
+                sourcePosition={sourcePosition}
+                destPosition={destPosition}
+                editingTarget={editingTarget}
+                onEditSource={handleEditSource}
+                onEditDest={handleEditDest}
+            />
+            <AlarmText isSource={isSource} />
+            <Marker
+                position={sourcePosition || map.getCenter()}
+                ref={mapPrevSourceMarker}
+                eventHandlers={{ click: handleMarkerClick }}
+                icon={defaultIcon}
+            />
+            {isSource && (
+                <Marker
+                    position={destPosition || map.getCenter()}
+                    ref={mapPrevDestMarker}
+                    eventHandlers={{ click: handleDestMarkerClick }}
+                    icon={prevDestIcon}
+                />
+            )}
+            {alternateCoords.map((coords, index) => (
+                <Polyline
+                    key={`alternate-${index}-${selectedRoute?.index === index}`}
+                    positions={coords}
+                    color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
+                    weight={selectedRoute?.index === index ? 7 : 6}
+                    opacity={selectedRoute?.index === index ? 1 : 0.7}
+                    eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
+                />
+            ))}
+            {routeCoords.length > 0 && (
+                <Polyline
+                    key={`main-${selectedRoute?.index === "main"}`}
+                    positions={routeCoords}
+                    color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
+                    weight={selectedRoute?.index === "main" ? 7 : 6}
+                    opacity={selectedRoute?.index === "main" ? 1 : 0.7}
+                    eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
+                />
+            )}
+        </>
+    );
+};
+
+export default Routing;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/Area/index.jsx

@@ -0,0 +1,43 @@
+import MapLoading from "@/core/components/MapLayer/Loading";
+import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
+import dynamic from "next/dynamic";
+import { useCallback, useState } from "react";
+import Routing from "./Routing";
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+
+const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
+    const [area, setArea] = useState(allData.area);
+    const [locations, setLocations] = useState(allData.locations);
+
+    const handleNext = useCallback(() => {
+        setAllData({ area: area });
+        setAllData({ locations: locations });
+        setTabState((s) => s + 1);
+    }, [area]);
+
+    return (
+        <>
+            <DialogContent dividers>
+                <Stack spacing={2}>
+                    <Box sx={{ width: "100%", height: "400px" }}>
+                        <MapLayer style={{ borderRadius: "4px" }}>
+                            <Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
+                        </MapLayer>
+                    </Box>
+                </Stack>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
+                    {"مرحله قبلی"}
+                </Button>
+                <Button variant="contained" size="large" disabled={!area} onClick={handleNext}>
+                    {!area ? "در انتظار ترسیم" : "مرحله بعد"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default Area;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/GetDateTime/MissionDates/index.jsx

@@ -0,0 +1,119 @@
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import MuiTimePicker from "@/core/components/MuiTimePicker";
+import { makeDateTime } from "@/core/utils/makeDateTime";
+import { Grid } from "@mui/material";
+import { Controller, useWatch } from "react-hook-form";
+
+const MissionDates = ({ control }) => {
+    const start_date = useWatch({ control, name: "start_date" });
+    const end_date = useWatch({ control, name: "end_date" });
+    const start_time = useWatch({ control, name: "start_time" });
+    const end_time = useWatch({ control, name: "end_time" });
+
+    const startDateTime = makeDateTime(start_date, start_time);
+    const endDateTime = makeDateTime(end_date, end_time);
+    const now = new Date();
+
+    return (
+        <>
+            <Grid item xs={12} sm={6}>
+                <Controller
+                    control={control}
+                    name={"start_date"}
+                    render={({ field, fieldState: { error } }) => (
+                        <MuiDatePicker
+                            name="start_date"
+                            error={error}
+                            value={field.value}
+                            maxDate={end_date ?? null}
+                            placeholder={"تاریخ شروع ماموریت را وارد کنید"}
+                            label={"تاریخ شروع ماموریت"}
+                            setFieldValue={(name, value) => field.onChange(value || null)}
+                            helperText={error ? error.message : null}
+                        />
+                    )}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+                <Controller
+                    control={control}
+                    name={"start_time"}
+                    render={({ field, fieldState: { error } }) => {
+                        return (
+                            <MuiTimePicker
+                                name="start_time"
+                                error={error}
+                                value={field.value}
+                                views={["hours", "minutes"]}
+                                maxTime={
+                                    endDateTime &&
+                                    start_date &&
+                                    end_date &&
+                                    new Date(start_date).toDateString() === new Date(end_date).toDateString()
+                                        ? endDateTime
+                                        : null
+                                }
+                                placeholder={"زمان شروع ماموریت را وارد کنید"}
+                                label={"زمان شروع ماموریت"}
+                                setFieldValue={(name, value) => field.onChange(value || null)}
+                                helperText={error ? error.message : null}
+                            />
+                        );
+                    }}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+                <Controller
+                    control={control}
+                    name={"end_date"}
+                    render={({ field, fieldState: { error } }) => (
+                        <MuiDatePicker
+                            name="end_date"
+                            error={error}
+                            value={field.value}
+                            minDate={start_date ?? null}
+                            maxDate={now}
+                            placeholder={"تاریخ پایان ماموریت را وارد کنید"}
+                            label={"تاریخ پایان ماموریت"}
+                            setFieldValue={(name, value) => field.onChange(value || null)}
+                            helperText={error ? error.message : null}
+                        />
+                    )}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+                <Controller
+                    control={control}
+                    name={"end_time"}
+                    render={({ field, fieldState: { error } }) => {
+                        return (
+                            <MuiTimePicker
+                                name="end_time"
+                                error={error}
+                                value={field.value}
+                                views={["hours", "minutes"]}
+                                minTime={
+                                    startDateTime &&
+                                    end_date &&
+                                    start_date &&
+                                    new Date(start_date).toDateString() === new Date(end_date).toDateString()
+                                        ? startDateTime
+                                        : null
+                                }
+                                maxTime={
+                                    end_date && new Date(end_date).toDateString() === now.toDateString() ? now : null
+                                }
+                                placeholder={"زمان پایان ماموریت را وارد کنید"}
+                                label={"زمان پایان ماموریت"}
+                                setFieldValue={(name, value) => field.onChange(value || null)}
+                                helperText={error ? error.message : null}
+                            />
+                        );
+                    }}
+                />
+            </Grid>
+        </>
+    );
+};
+
+export default MissionDates;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/GetDateTime/index.jsx

@@ -0,0 +1,59 @@
+import SelectBox from "@/core/components/SelectBox";
+import StyledForm from "@/core/components/StyledForm";
+import { missionTypes } from "@/core/utils/missionTypes";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Box, Button, DialogActions, DialogContent, Grid, Stack } from "@mui/material";
+import moment from "jalali-moment";
+import { Controller, useForm } from "react-hook-form";
+import { object, string } from "yup";
+import MissionDates from "./MissionDates";
+
+const validationSchema = object({
+    start_date: string().required("تاریخ شروع ماموریت را مشخص کنید!"),
+    start_time: string().required("زمان شروع ماموریت را مشخص کنید!"),
+    end_date: string().required("تاریخ پایان ماموریت را مشخص کنید!"),
+    end_time: string().required("زمان شروع ماموریت را مشخص کنید!"),
+});
+
+const GetDateTime = ({ allData, setAllData, handlePrev, setTabState }) => {
+    const defaultValues = {
+        start_date: allData.start_date,
+        start_time: allData.start_time ? moment(allData.start_time).toDate() : null,
+        end_date: allData.end_date,
+        end_time: allData.end_time ? moment(allData.end_time).toDate() : null,
+    };
+
+    const { control, handleSubmit } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "all",
+    });
+
+    const handleNext = (data) => {
+        setAllData(data);
+        setTabState((s) => s + 1);
+    };
+
+    return (
+        <StyledForm onSubmit={handleSubmit(handleNext)}>
+            <DialogContent dividers>
+                <Box sx={{ flex: 1 }}>
+                    <Stack>
+                        <Grid container spacing={2}>
+                            <MissionDates control={control} />
+                        </Grid>
+                    </Stack>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
+                    {"مرحله قبلی"}
+                </Button>
+                <Button variant="contained" size="large" type="submit">
+                    مرحله بعد
+                </Button>
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default GetDateTime;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/GetItemInfo/FastReactCode/Dialog/List/RowActions/SelectId/index.jsx

@@ -0,0 +1,20 @@
+import { Done } from "@mui/icons-material";
+import { IconButton, Tooltip } from "@mui/material";
+
+const SelectId = ({ row, onChange, setOpenFastReactDialog }) => {
+    const handleClick = () => {
+        onChange(row.original.id);
+        setOpenFastReactDialog(false);
+    };
+
+    return (
+        <>
+            <Tooltip title="انتخاب" arrow placement="right">
+                <IconButton color="primary" sx={{ textTransform: "unset", alignSelf: "center" }} onClick={handleClick}>
+                    <Done />
+                </IconButton>
+            </Tooltip>
+        </>
+    );
+};
+export default SelectId;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/GetItemInfo/FastReactCode/Dialog/List/RowActions/index.jsx

@@ -0,0 +1,10 @@
+import SelectId from "./SelectId";
+
+const RowActions = ({ row, onChange, setOpenFastReactDialog }) => {
+    return (
+        <>
+            <SelectId row={row} onChange={onChange} setOpenFastReactDialog={setOpenFastReactDialog} />
+        </>
+    );
+};
+export default RowActions;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/GetItemInfo/FastReactCode/Dialog/List/index.jsx

@@ -0,0 +1,274 @@
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { GET_FAST_REACT_COMPLAINTS } from "@/core/utils/routes";
+import { Box, Stack, Typography } from "@mui/material";
+import { useMemo } from "react";
+import RowActions from "./RowActions";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { useAuth } from "@/lib/contexts/auth";
+import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
+import DescriptionForm from "@/components/dashboard/fastReact/complaintList/RowActions/DescriptionDialog";
+import LocationForm from "@/components/dashboard/fastReact/complaintList/RowActions/LocationDialog";
+import moment from "jalali-moment";
+import useProvinces from "@/lib/hooks/useProvince";
+import useEdaratLists from "@/lib/hooks/useEdaratLists";
+
+const FastReactList = ({ onChange, setOpenFastReactDialog }) => {
+    const { data: userPermissions } = usePermissions();
+    const hasCountryPermission = userPermissions?.includes("show-fast-react");
+    const { user } = useAuth();
+    const columns = useMemo(() => {
+        const dynamicColumns = {
+            header: "استان",
+            id: "road_observeds__province_id",
+            enableColumnFilter: true,
+            datatype: "numeric",
+            filterMode: "equals",
+            grow: false,
+            size: 130,
+            ColumnSelectComponent: (props) => {
+                const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+                const getColumnSelectOptions = useMemo(() => {
+                    if (loadingProvinces) {
+                        return [{ value: "loading", label: "در حال بارگذاری..." }];
+                    }
+                    if (errorProvinces) {
+                        return [{ value: "error", label: "خطا در بارگذاری" }];
+                    }
+                    return [
+                        { value: "", label: "کل کشور" },
+                        ...provinces.map((province) => ({
+                            value: province.id,
+                            label: province.name_fa,
+                        })),
+                    ];
+                }, [provinces, errorProvinces, loadingProvinces]);
+                return (
+                    <CustomSelectByDependency
+                        {...props}
+                        value={loadingProvinces ? "loading" : props.filterParameters.value}
+                        columnSelectOption={getColumnSelectOptions}
+                    />
+                );
+            },
+            Cell: ({ row }) => <>{row.original.province_fa}</>,
+        };
+        return [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "road_observeds__id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            ...(hasCountryPermission ? [dynamicColumns] : []),
+            {
+                header: "اداره",
+                id: "road_observeds__edarate_shahri_id",
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterMode: "equals",
+                dependencyId: hasCountryPermission ? "road_observeds__province_id" : null,
+                grow: false,
+                size: 120,
+                ColumnSelectComponent: (props) => {
+                    const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
+                        hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
+                    );
+                    const [prevDependency, setPrevDependency] = useState(
+                        hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
+                    );
+
+                    const getColumnSelectOptions = useMemo(() => {
+                        if (hasCountryPermission && props.dependencyFieldValue.value === "") {
+                            return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
+                        }
+                        if (loadingEdaratList) {
+                            return [{ value: "loading", label: "در حال بارگذاری..." }];
+                        }
+                        if (errorEdaratList) {
+                            return [{ value: "error", label: "خطا در بارگذاری" }];
+                        }
+                        return [
+                            { value: "", label: "کل ادارات" },
+                            ...edaratList.map((edare) => ({
+                                value: edare.id,
+                                label: edare.name_fa,
+                            })),
+                        ];
+                    }, [edaratList, loadingEdaratList, errorEdaratList]);
+                    useEffect(() => {
+                        if (hasCountryPermission) return;
+                        if (prevDependency === props.dependencyFieldValue?.value) return;
+                        props.handleChange({ ...props.filterParameters, value: "" });
+                        setPrevDependency(props.dependencyFieldValue?.value);
+                    }, [props.dependencyFieldValue?.value, hasCountryPermission]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue?.value === ""
+                                    ? "empty"
+                                    : loadingEdaratList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ row }) => <>{row.original.edarate_shahri_name_fa}</>,
+            },
+            {
+                header: "اطلاعات ثبت‌ شده در سامانه سوانح",
+                id: "fkInfo",
+                enableColumnFilter: false,
+                enableSorting: false,
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        accessorKey: "fk_RegisteredEventMessage",
+                        header: "کد سوانح",
+                        id: "fk_RegisteredEventMessage",
+                        enableColumnFilter: true,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        accessorKey: "Title",
+                        header: "موضوع گزارش",
+                        id: "Title",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        accessorKey: "FeatureTypeTitle",
+                        header: "نوع گزارش",
+                        id: "FeatureTypeTitle",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        accessorKey: "Description",
+                        header: "توضیح گزارش",
+                        id: "Description",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            if (renderedCellValue) {
+                                return (
+                                    <Stack alignItems={"center"} justifyContent={"center"}>
+                                        <DescriptionForm description={renderedCellValue} title={"توضیح گزارش"} />
+                                    </Stack>
+                                );
+                            }
+                            return <Typography variant="body2">-</Typography>;
+                        },
+                    },
+                    {
+                        header: "موقعیت",
+                        id: "location",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "array",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <LocationForm start_lat={row.original.lat} start_lng={row.original.lng} />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        accessorKey: "MobileForSendEventSms",
+                        header: "شماره تماس گیرنده",
+                        id: "MobileForSendEventSms",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        accessorFn: (row) => moment(row.StartTime_DateTime).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                        header: "تاریخ ثبت",
+                        id: "StartTime_DateTime",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                ],
+            },
+        ];
+    }, []);
+
+    return (
+        <>
+            <Box sx={{ mt: 3, p: 1 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    table_title="لیست شکایات"
+                    columns={columns}
+                    sorting={[{ id: "StartTime_DateTime", desc: true }]}
+                    table_url={GET_FAST_REACT_COMPLAINTS}
+                    page_name={"roadMissionsOperator"}
+                    table_name={"roadMissionsOperatorFastReactList"}
+                    enableRowActions
+                    positionActionsColumn={"first"}
+                    RowActions={(props) => (
+                        <RowActions {...props} onChange={onChange} setOpenFastReactDialog={setOpenFastReactDialog} />
+                    )}
+                />
+            </Box>
+        </>
+    );
+};
+export default FastReactList;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/GetItemInfo/FastReactCode/Dialog/index.jsx

@@ -0,0 +1,49 @@
+import { Close, Edit } from "@mui/icons-material";
+import { Button, Chip, Dialog, Divider, IconButton } from "@mui/material";
+import FastReactList from "./List";
+import { useState, forwardRef } from "react";
+
+const FastReactDialog = forwardRef(({ onChange, value }, ref) => {
+    const [openFastReactDialog, setOpenFastReactDialog] = useState(false);
+
+    return (
+        <>
+            <Divider ref={ref}>
+                {value === "" ? (
+                    <Button onClick={() => setOpenFastReactDialog(true)} variant="outlined">
+                        انتخاب شکایت
+                    </Button>
+                ) : (
+                    <Chip
+                        label={`کد شکایت: ${value}`}
+                        variant="outlined"
+                        deleteIcon={<Edit />}
+                        onDelete={() => setOpenFastReactDialog(true)}
+                    />
+                )}
+            </Divider>
+            <Dialog open={openFastReactDialog} fullWidth maxWidth="md">
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenFastReactDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <Close />
+                </IconButton>
+                {openFastReactDialog && (
+                    <FastReactList onChange={onChange} setOpenFastReactDialog={setOpenFastReactDialog} />
+                )}
+            </Dialog>
+        </>
+    );
+});
+
+FastReactDialog.displayName = "FastReactDialog";
+
+export default FastReactDialog;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/GetItemInfo/FastReactCode/index.jsx

@@ -0,0 +1,22 @@
+import { Divider, Stack } from "@mui/material";
+import { Controller, useWatch } from "react-hook-form";
+import FastReactDialog from "./Dialog";
+
+const FastReactCode = ({ control }) => {
+    const category_id = useWatch({ control, name: "category_id" });
+
+    if (category_id != 3) return null;
+
+    return (
+        <Controller
+            control={control}
+            name={"road_observed_id"}
+            render={({ field }) => (
+                <Stack justifyContent={"center"} sx={{ height: "100%" }}>
+                    <FastReactDialog {...field} />
+                </Stack>
+            )}
+        />
+    );
+};
+export default FastReactCode;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/GetItemInfo/index.jsx

@@ -0,0 +1,150 @@
+import PersianTextField from "@/core/components/PersianTextField";
+import SelectBox from "@/core/components/SelectBox";
+import StyledForm from "@/core/components/StyledForm";
+import { missionCategoryTypes } from "@/core/utils/missionCategoryTypes";
+import { missionRegions } from "@/core/utils/missionRegions";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { ExitToApp } from "@mui/icons-material";
+import { Box, Button, DialogActions, DialogContent, Grid, Stack } from "@mui/material";
+import { Controller, useForm } from "react-hook-form";
+import { object, string } from "yup";
+import FastReactCode from "./FastReactCode";
+
+const validationSchema = object({
+    explanation: string().required("موضوع را مشخص کنید!"),
+    end_point: string().required("مقصد را مشخص کنید!"),
+    region: string().required("محور ماموریت را مشخص کنید!"),
+    category_id: string().required("نوع ماموریت را مشخص کنید!"),
+    road_observed_id: string().when("category_id", {
+        is: "3",
+        then: (schema) => schema.required("کد یکتا شکایت را مشخص کنید!"),
+        otherwise: (schema) => schema.notRequired(),
+    }),
+});
+
+const GetItemInfo = ({ allData, setAllData, handlePrev, setTabState }) => {
+    const defaultValues = {
+        explanation: allData.explanation,
+        end_point: allData.end_point,
+        region: allData.region,
+        category_id: allData.category_id,
+        road_observed_id: allData.road_observed_id,
+    };
+
+    const { control, handleSubmit } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "all",
+    });
+
+    const handleNext = (data) => {
+        setAllData(data);
+        setTabState((s) => s + 1);
+    };
+
+    return (
+        <StyledForm onSubmit={handleSubmit(handleNext)}>
+            <DialogContent dividers>
+                <Box sx={{ flex: 1 }}>
+                    <Stack>
+                        <Grid container spacing={2}>
+                            <Grid item xs={12} sm={6}>
+                                <Controller
+                                    control={control}
+                                    name={"explanation"}
+                                    render={({ field, fieldState: { error } }) => (
+                                        <PersianTextField
+                                            value={field.value}
+                                            variant="outlined"
+                                            name="explanation"
+                                            onChange={field.onChange}
+                                            label="موضوع"
+                                            placeholder={"موضوع را وارد کنید"}
+                                            fullWidth
+                                            size="small"
+                                            error={error}
+                                            helperText={error?.message}
+                                            InputLabelProps={{ shrink: true }}
+                                        />
+                                    )}
+                                />
+                            </Grid>
+                            <Grid item xs={12} sm={6}>
+                                <Controller
+                                    control={control}
+                                    name={"region"}
+                                    render={({ field, fieldState: { error } }) => (
+                                        <SelectBox
+                                            value={field.value}
+                                            label="محدوده"
+                                            selectors={missionRegions}
+                                            schema={{ name: "name_fa", value: "id" }}
+                                            error={error}
+                                            onChange={field.onChange}
+                                            helperText={error?.message}
+                                        />
+                                    )}
+                                />
+                            </Grid>
+                            <Grid item xs={12} sm={6}>
+                                <Controller
+                                    control={control}
+                                    name={"category_id"}
+                                    render={({ field, fieldState: { error } }) => (
+                                        <SelectBox
+                                            value={field.value}
+                                            label="نوع ماموریت"
+                                            selectors={missionCategoryTypes}
+                                            schema={{ name: "name_fa", value: "id" }}
+                                            error={error}
+                                            onChange={field.onChange}
+                                            helperText={error?.message}
+                                        />
+                                    )}
+                                />
+                            </Grid>
+                            <Grid item xs={12} sm={6}>
+                                <Controller
+                                    control={control}
+                                    name={"end_point"}
+                                    render={({ field, fieldState: { error } }) => {
+                                        return (
+                                            <PersianTextField
+                                                value={field.value}
+                                                variant="outlined"
+                                                name="end_point"
+                                                onChange={field.onChange}
+                                                label="مقصد"
+                                                placeholder={"مقصد را وارد کنید"}
+                                                fullWidth
+                                                size="small"
+                                                error={error}
+                                                helperText={error?.message}
+                                                InputLabelProps={{ shrink: true }}
+                                            />
+                                        );
+                                    }}
+                                />
+                            </Grid>
+                        </Grid>
+                    </Stack>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button
+                    onClick={handlePrev}
+                    variant="outlined"
+                    color="secondary"
+                    size="large"
+                    startIcon={<ExitToApp />}
+                >
+                    {"بستن"}
+                </Button>
+                <Button variant="contained" size="large" type="submit">
+                    مرحله بعد
+                </Button>
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default GetItemInfo;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/MachineAndDriver/DriversDialog/DriversSearch/Form/index.jsx

@@ -0,0 +1,61 @@
+import RahdarNameOrCode from "@/core/components/RahdarNameOrCode";
+import StyledForm from "@/core/components/StyledForm";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Done } from "@mui/icons-material";
+import { Button, Stack } from "@mui/material";
+import { Controller, useForm } from "react-hook-form";
+import { object } from "yup";
+
+const schema = object().shape({
+    rahdar: object().required("همراه الزامی است."),
+});
+const DriverForm = ({ setDriver, setOpenDriversDialog }) => {
+    const defaultValues = {
+        rahdar: null,
+    };
+
+    const {
+        control,
+        handleSubmit,
+        formState: { isSubmitting, isValid },
+    } = useForm({ defaultValues, resolver: yupResolver(schema), mode: "all" });
+
+    const submit = (data) => {
+        setDriver(data.rahdar);
+        setOpenDriversDialog(false);
+    };
+
+    return (
+        <StyledForm onSubmit={handleSubmit(submit)}>
+            <Stack direction={{ xs: "column", sm: "row" }} justifyContent={"center"} spacing={2}>
+                <Stack sx={{ minWidth: "250px" }}>
+                    <Controller
+                        control={control}
+                        render={({ field, fieldState: { error } }) => {
+                            return (
+                                <RahdarNameOrCode
+                                    title="راننده"
+                                    rahdarsName={field.value}
+                                    setRahdarsName={(value) => field.onChange(value)}
+                                    error={error}
+                                    multiple={false}
+                                />
+                            );
+                        }}
+                        name={"rahdar"}
+                    />
+                </Stack>
+                <Button
+                    variant="contained"
+                    type="submit"
+                    sx={{ textWrap: "nowrap", px: 3 }}
+                    disabled={isSubmitting || !isValid}
+                    startIcon={<Done />}
+                >
+                    انتخاب
+                </Button>
+            </Stack>
+        </StyledForm>
+    );
+};
+export default DriverForm;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/MachineAndDriver/DriversDialog/DriversSearch/index.jsx

@@ -0,0 +1,11 @@
+import { DialogContent } from "@mui/material";
+import DriverForm from "./Form";
+
+const DriversSearch = ({ setDriver, setOpenDriversDialog }) => {
+    return (
+        <DialogContent dividers>
+            <DriverForm setDriver={setDriver} setOpenDriversDialog={setOpenDriversDialog} />
+        </DialogContent>
+    );
+};
+export default DriversSearch;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/MachineAndDriver/DriversDialog/index.jsx

@@ -0,0 +1,41 @@
+import { Close, Edit } from "@mui/icons-material";
+import { Button, Dialog, DialogTitle, IconButton } from "@mui/material";
+import { useState } from "react";
+import DriversSearch from "./DriversSearch";
+
+const DriversDialog = ({ setDriver, mode = "" }) => {
+    const [openDriversDialog, setOpenDriversDialog] = useState(false);
+    return (
+        <>
+            {mode == "edit" ? (
+                <IconButton onClick={() => setOpenDriversDialog(true)} size="small">
+                    <Edit />
+                </IconButton>
+            ) : (
+                <Button onClick={() => setOpenDriversDialog(true)} variant="contained" fullWidth size="large">
+                    انتخاب راننده
+                </Button>
+            )}
+            <Dialog open={openDriversDialog} fullWidth maxWidth="xs">
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenDriversDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <Close />
+                </IconButton>
+                <DialogTitle>انتخاب راننده</DialogTitle>
+                {openDriversDialog && (
+                    <DriversSearch setDriver={setDriver} setOpenDriversDialog={setOpenDriversDialog} />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default DriversDialog;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/MachineAndDriver/MachinesDialog/MachineList/RowActions/Allocate/index.jsx

@@ -0,0 +1,20 @@
+import { Done } from "@mui/icons-material";
+import { IconButton, Tooltip } from "@mui/material";
+
+const Allocate = ({ row, setMachine, setOpenMachinesDialog }) => {
+    const handleClick = () => {
+        setMachine(row.original);
+        setOpenMachinesDialog(false);
+    };
+
+    return (
+        <>
+            <Tooltip title="تخصیص" arrow placement="right">
+                <IconButton color="primary" sx={{ textTransform: "unset", alignSelf: "center" }} onClick={handleClick}>
+                    <Done />
+                </IconButton>
+            </Tooltip>
+        </>
+    );
+};
+export default Allocate;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/MachineAndDriver/MachinesDialog/MachineList/RowActions/index.jsx

@@ -0,0 +1,6 @@
+import Allocate from "./Allocate";
+
+const RowActions = ({ row, setMachine, setOpenMachinesDialog }) => {
+    return <Allocate row={row} setMachine={setMachine} setOpenMachinesDialog={setOpenMachinesDialog} />;
+};
+export default RowActions;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/MachineAndDriver/MachinesDialog/MachineList/index.jsx

@@ -0,0 +1,68 @@
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+import RowActions from "./RowActions";
+import { GET_MACHINES_TABLE_LIST } from "@/core/utils/routes";
+
+const MachinesList = ({ machineType, setMachine, setOpenMachinesDialog }) => {
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: "machine_code",
+                header: "کد خودرو",
+                id: "machine_code",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "car_name",
+                header: "نام خودرو",
+                id: "car_name",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "car_type",
+                header: "نوع خودرو",
+                id: "car_type",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+        ],
+        []
+    );
+
+    return (
+        <>
+            <Box sx={{ mt: 3, p: 1 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    table_title="لیست خودرو ها"
+                    columns={columns}
+                    sorting={[{ id: "id", desc: true }]}
+                    table_url={GET_MACHINES_TABLE_LIST}
+                    page_name={"roadMissionsOperator"}
+                    table_name={"roadMissionsOperatorMachinesList"}
+                    enableRowActions
+                    positionActionsColumn={"first"}
+                    RowActions={(props) => (
+                        <RowActions {...props} setMachine={setMachine} setOpenMachinesDialog={setOpenMachinesDialog} />
+                    )}
+                />
+            </Box>
+        </>
+    );
+};
+export default MachinesList;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/MachineAndDriver/MachinesDialog/index.jsx

@@ -0,0 +1,40 @@
+import { Close, Edit } from "@mui/icons-material";
+import { Button, Dialog, IconButton } from "@mui/material";
+import { useState } from "react";
+import MachinesList from "./MachineList";
+
+const MachinesDialog = ({ setMachine, mode }) => {
+    const [openMachinesDialog, setOpenMachinesDialog] = useState(false);
+    return (
+        <>
+            {mode == "edit" ? (
+                <IconButton onClick={() => setOpenMachinesDialog(true)} size="small">
+                    <Edit />
+                </IconButton>
+            ) : (
+                <Button onClick={() => setOpenMachinesDialog(true)} variant="contained" fullWidth size="large">
+                    انتخاب خودرو
+                </Button>
+            )}
+            <Dialog open={openMachinesDialog} fullWidth maxWidth="sm">
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenMachinesDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <Close />
+                </IconButton>
+                {openMachinesDialog && (
+                    <MachinesList setMachine={setMachine} setOpenMachinesDialog={setOpenMachinesDialog} />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default MachinesDialog;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/MachineAndDriver/index.jsx

@@ -0,0 +1,48 @@
+import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typography } from "@mui/material";
+import { useState } from "react";
+import DriversDialog from "./DriversDialog";
+
+const MachineAndDriver = ({ setTabState, allData, setAllData, handlePrev }) => {
+    const [driver, setDriver] = useState(allData.driver);
+
+    const handleNext = (data) => {
+        setAllData(data);
+        setTabState((s) => s + 1);
+    };
+
+    return (
+        <>
+            <DialogContent dividers>
+                <Box sx={{ flex: 1 }}>
+                    <Stack sx={{ my: 1 }} spacing={2}>
+                        <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                            {driver ? (
+                                <>
+                                    <Typography variant="body2">راننده</Typography>
+                                    <Divider sx={{ flex: 1 }} />
+                                    <Chip
+                                        label={driver ? `${driver.code} | ${driver.name}` : "راننده ای انتخاب نشده"}
+                                        size="small"
+                                    />
+                                    <Divider sx={{ flex: 1 }} />
+                                    <DriversDialog setDriver={setDriver} mode={"edit"} />
+                                </>
+                            ) : (
+                                <DriversDialog setDriver={setDriver} />
+                            )}
+                        </Stack>
+                    </Stack>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
+                    {"مرحله قبلی"}
+                </Button>
+                <Button variant="contained" disabled={!driver} size="large" onClick={() => handleNext({ driver })}>
+                    مرحله بعد
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default MachineAndDriver;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/Rahdaran/Form/index.jsx

@@ -0,0 +1,66 @@
+import RahdarNameOrCode from "@/core/components/RahdarNameOrCode";
+import StyledForm from "@/core/components/StyledForm";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Add } from "@mui/icons-material";
+import { Button, Stack } from "@mui/material";
+import { Controller, useForm } from "react-hook-form";
+import { object } from "yup";
+
+const schema = object().shape({
+    rahdar: object().required("همراه الزامی است."),
+});
+const RahdaranForm = ({ setRahdaran }) => {
+    const defaultValues = {
+        rahdar: null,
+    };
+
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting, isValid },
+    } = useForm({ defaultValues, resolver: yupResolver(schema), mode: "all" });
+
+    const submit = (data) => {
+        setRahdaran((prev) => {
+            const alreadyExists = prev.some((r) => r.id === data.rahdar.id);
+            if (alreadyExists) return prev;
+            return [...prev, data.rahdar];
+        });
+        reset();
+    };
+
+    return (
+        <StyledForm onSubmit={handleSubmit(submit)}>
+            <Stack direction={{ xs: "column", sm: "row" }} justifyContent={"center"} spacing={2}>
+                <Stack sx={{ minWidth: "250px" }}>
+                    <Controller
+                        control={control}
+                        render={({ field, fieldState: { error } }) => {
+                            return (
+                                <RahdarNameOrCode
+                                    title="همراه"
+                                    rahdarsName={field.value}
+                                    setRahdarsName={(value) => field.onChange(value)}
+                                    error={error}
+                                    multiple={false}
+                                />
+                            );
+                        }}
+                        name={"rahdar"}
+                    />
+                </Stack>
+                <Button
+                    variant="contained"
+                    type="submit"
+                    sx={{ textWrap: "nowrap", px: 3 }}
+                    disabled={isSubmitting || !isValid}
+                    startIcon={<Add />}
+                >
+                    افزودن همراه
+                </Button>
+            </Stack>
+        </StyledForm>
+    );
+};
+export default RahdaranForm;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/Rahdaran/List/index.jsx

@@ -0,0 +1,56 @@
+import { AccountCircle, Delete } from "@mui/icons-material";
+import { Card, Collapse, IconButton, Stack, Typography } from "@mui/material";
+import { TransitionGroup } from "react-transition-group";
+
+const RahdaranList = ({ rahdaran, setRahdaran }) => {
+    const handleRemove = (index) => {
+        setRahdaran((prev) => prev.filter((_, i) => i !== index));
+    };
+
+    return (
+        <Stack>
+            <TransitionGroup>
+                {rahdaran.map((rahdar, index) => (
+                    <Collapse key={rahdar.code}>
+                        <Card
+                            elevation={0}
+                            sx={{
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                border: 1,
+                                borderColor: "divider",
+                                px: 1,
+                                py: 1,
+                                my: 1,
+                            }}
+                        >
+                            <Stack direction={"row"} spacing={1}>
+                                <AccountCircle color="primary" sx={{ width: "32px", height: "32px" }} />
+                                <Stack>
+                                    <Stack direction={"row"} spacing={0.5}>
+                                        <Typography variant="caption">نام و نام خانوادگی:</Typography>
+                                        <Typography variant="body2">{rahdar.name}</Typography>
+                                    </Stack>
+                                    <Stack direction={"row"} spacing={0.5}>
+                                        <Typography variant="caption">کدملی:</Typography>
+                                        <Typography variant="body2">{rahdar.code}</Typography>
+                                    </Stack>
+                                </Stack>
+                            </Stack>
+                            <IconButton color="error" onClick={() => handleRemove(index)}>
+                                <Delete />
+                            </IconButton>
+                        </Card>
+                    </Collapse>
+                ))}
+                {rahdaran.length == 0 && (
+                    <Collapse>
+                        <Typography align="center">همراهی ثبت نشده است</Typography>
+                    </Collapse>
+                )}
+            </TransitionGroup>
+        </Stack>
+    );
+};
+export default RahdaranList;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/Rahdaran/index.jsx

@@ -0,0 +1,36 @@
+import { Box, Button, Chip, DialogActions, DialogContent, Divider } from "@mui/material";
+import { useCallback, useState } from "react";
+import RahdaranForm from "./Form";
+import RahdaranList from "./List";
+
+const Rahdaran = ({ allData, setAllData, setTabState, handlePrev }) => {
+    const [rahdaran, setRahdaran] = useState(allData.rahdaran);
+
+    const handleNext = useCallback(() => {
+        setAllData({ rahdaran: rahdaran });
+        setTabState((s) => s + 1);
+    }, [rahdaran]);
+
+    return (
+        <>
+            <DialogContent dividers>
+                <Box sx={{ flex: 1 }}>
+                    <RahdaranForm setRahdaran={setRahdaran} />
+                    <Divider sx={{ my: 2 }}>
+                        <Chip label="لیست همراهان" />
+                    </Divider>
+                    <RahdaranList rahdaran={rahdaran} setRahdaran={setRahdaran} />
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
+                    {"مرحله قبلی"}
+                </Button>
+                <Button variant="contained" size="large" onClick={handleNext}>
+                    {"مرحله بعد"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default Rahdaran;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/Verify/index.jsx

@@ -0,0 +1,128 @@
+import MapLoading from "@/core/components/MapLayer/Loading";
+import { missionCategoryTypes } from "@/core/utils/missionCategoryTypes";
+import { missionRegions } from "@/core/utils/missionRegions";
+import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typography } from "@mui/material";
+import moment from "jalali-moment";
+import dynamic from "next/dynamic";
+import { useCallback } from "react";
+import ShowRoute from "../Area/Routing/ShowRoute";
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+
+const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
+    const handleNext = useCallback(() => {
+        submitForm(allData);
+    }, [allData]);
+
+    return (
+        <>
+            <DialogContent dividers>
+                <Box sx={{ flex: 1 }}>
+                    <Stack spacing={2}>
+                        <Stack spacing={1}>
+                            <Stack spacing={1}>
+                                <Divider>
+                                    <Chip color="primary" variant="outlined" label="مسیر ماموریت" />
+                                </Divider>
+                                <Box sx={{ width: "100%", height: "400px" }}>
+                                    <MapLayer style={{ borderRadius: "4px" }}>
+                                        <ShowRoute area={allData.area} />
+                                    </MapLayer>
+                                </Box>
+                            </Stack>
+                            <Divider>
+                                <Chip color="primary" variant="outlined" label="مشخصات ماموریت" />
+                            </Divider>
+                            <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                                <Typography variant="body2">موضوع ماموریت</Typography>
+                                <Divider sx={{ flex: 1 }} />
+                                <Chip size="small" label={allData.explanation} />
+                            </Stack>
+                            <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                                <Typography variant="body2">محدوده</Typography>
+                                <Divider sx={{ flex: 1 }} />
+                                <Chip size="small" label={missionRegions.find((r) => r.id == allData.region).name_fa} />
+                            </Stack>
+                            <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                                <Typography variant="body2">نوع ماموریت</Typography>
+                                <Divider sx={{ flex: 1 }} />
+                                <Chip
+                                    size="small"
+                                    label={missionCategoryTypes.find((t) => t.id == allData.category_id).name_fa}
+                                />
+                            </Stack>
+                            {allData.category_id == 3 && (
+                                <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                                    <Typography variant="body2">کد شکایت</Typography>
+                                    <Divider sx={{ flex: 1 }} />
+                                    <Chip size="small" label={allData.road_observed_id} />
+                                </Stack>
+                            )}
+                            <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                                <Typography variant="body2">مقصد</Typography>
+                                <Divider sx={{ flex: 1 }} />
+                                <Chip size="small" label={allData.end_point} />
+                            </Stack>
+                            <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                                <Typography variant="body2">تاریخ شروع ماموریت</Typography>
+                                <Divider sx={{ flex: 1 }} />
+                                <Chip
+                                    size="small"
+                                    label={`${moment(allData.start_time).format("HH:mm")} | ${moment(allData.start_date).locale("fa").format("YYYY/MM/DD")}`}
+                                />
+                            </Stack>
+                            <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                                <Typography variant="body2">تاریخ پایان ماموریت</Typography>
+                                <Divider sx={{ flex: 1 }} />
+                                <Chip
+                                    size="small"
+                                    label={`${moment(allData.end_time).format("HH:mm")} | ${moment(allData.end_date).locale("fa").format("YYYY/MM/DD")}`}
+                                />
+                            </Stack>
+                        </Stack>
+                        <Stack spacing={1}>
+                            <Divider>
+                                <Chip color="primary" variant="outlined" label=" راننده" />
+                            </Divider>
+
+                            <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                                <Typography variant="body2">راننده</Typography>
+                                <Divider sx={{ flex: 1 }} />
+                                <Chip size="small" label={`${allData.driver.code} | ${allData.driver.name}`} />
+                            </Stack>
+                        </Stack>
+                        <Stack spacing={1}>
+                            <Divider>
+                                <Chip color="primary" variant="outlined" label="همراهان" />
+                            </Divider>
+                            {allData.rahdaran.length != 0 ? (
+                                allData.rahdaran.map((rahdar) => (
+                                    <Stack key={rahdar.id} direction={"row"} alignItems={"center"} spacing={1}>
+                                        <Typography variant="body2">{rahdar.name}</Typography>
+                                        <Divider sx={{ flex: 1 }} />
+                                        <Chip size="small" label={rahdar.code} />
+                                    </Stack>
+                                ))
+                            ) : (
+                                <Stack direction={"row"} alignItems={"center"} justifyContent={"center"}>
+                                    <Typography variant="body2">همراهی ثبت نشده است</Typography>
+                                </Stack>
+                            )}
+                        </Stack>
+                    </Stack>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button onClick={handlePrev} variant="outlined" color="secondary" disabled={submitting} size="large">
+                    {"مرحله قبلی"}
+                </Button>
+                <Button variant="contained" size="large" disabled={submitting} onClick={handleNext}>
+                    تایید و ثبت ماموریت
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default Verify;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/Form/index.jsx

@@ -0,0 +1,114 @@
+import { AccessTime, Engineering, InsertDriveFile, Person, Verified, Map } from "@mui/icons-material";
+import { Box, Tab, Tabs } from "@mui/material";
+import { useReducer, useState } from "react";
+import GetDateTime from "./GetDateTime";
+import GetItemInfo from "./GetItemInfo";
+import MachineAndDriver from "./MachineAndDriver";
+import Rahdaran from "./Rahdaran";
+import Verify from "./Verify";
+import Area from "./Area";
+
+function TabPanel(props) {
+    const { children, value, index } = props;
+    return (
+        <div role="tabpanel" hidden={value !== index}>
+            {value === index && <Box>{children}</Box>}
+        </div>
+    );
+}
+
+const reducer = (state, action) => {
+    switch (action.type) {
+        case "changeData":
+            return { ...state, ...action.data };
+        default:
+            return state;
+    }
+};
+
+const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
+    const [allData, dispatch] = useReducer(reducer, defaultValues);
+    const [tabState, setTabState] = useState(0);
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const handleChangeTab = (event, newValue) => {
+        setTabState(newValue);
+    };
+
+    const handlePrev = () => {
+        if (tabState === 0) {
+            handleClose();
+        } else {
+            setTabState((t) => t - 1);
+        }
+    };
+
+    return (
+        <>
+            <Tabs
+                allowScrollButtonsMobile
+                value={tabState}
+                onChange={handleChangeTab}
+                variant={"fullWidth"}
+                sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "100%",
+                    backgroundColor: "#efefef",
+                }}
+            >
+                <Tab icon={<InsertDriveFile />} label="مشخصات" />
+                <Tab disabled={tabState < 2} icon={<Person />} label="راننده" />
+                <Tab disabled={tabState < 3} icon={<Map />} label="مختصات" />
+                <Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
+                <Tab disabled={tabState < 5} icon={<Verified />} label="بررسی نهایی" />
+            </Tabs>
+            <TabPanel value={tabState} index={0}>
+                <GetItemInfo
+                    allData={allData}
+                    setAllData={(data) => {
+                        dispatch({ type: "changeData", data });
+                    }}
+                    handlePrev={handlePrev}
+                    setTabState={setTabState}
+                />
+            </TabPanel>
+            <TabPanel value={tabState} index={1}>
+                <MachineAndDriver
+                    allData={allData}
+                    setAllData={(data) => {
+                        dispatch({ type: "changeData", data });
+                    }}
+                    handlePrev={handlePrev}
+                    setTabState={setTabState}
+                />
+            </TabPanel>
+            <TabPanel value={tabState} index={2}>
+                <Area
+                    allData={allData}
+                    setAllData={(data) => {
+                        dispatch({ type: "changeData", data });
+                    }}
+                    handlePrev={handlePrev}
+                    setTabState={setTabState}
+                />
+            </TabPanel>
+            <TabPanel value={tabState} index={3}>
+                <Rahdaran
+                    allData={allData}
+                    setAllData={(data) => {
+                        dispatch({ type: "changeData", data });
+                    }}
+                    handlePrev={handlePrev}
+                    setTabState={setTabState}
+                />
+            </TabPanel>
+            <TabPanel value={tabState} index={4}>
+                <Verify allData={allData} handlePrev={handlePrev} submitForm={submitForm} submitting={submitting} />
+            </TabPanel>
+        </>
+    );
+};
+export default CreateForm;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/MissionCorrection/index.jsx

@@ -0,0 +1,86 @@
+import { MISSOINS_CORRECTION_VIOLATION } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { AddCircleOutline, Close } from "@mui/icons-material";
+import { Dialog, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import CreateForm from "./Form";
+
+const MissionCorrection = ({ row, mutate }) => {
+    const [submitting, setSubmitting] = useState(false);
+    const requestServer = useRequest({ notificationSuccess: true });
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const submitForm = async (result) => {
+        setSubmitting(true);
+
+        await requestServer(`${MISSOINS_CORRECTION_VIOLATION}/${row.original.id}`, "post", {
+            data: {
+                explanation: result.explanation,
+                category_id: result.category_id,
+                ...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
+                zone: result.region,
+                end_point: result.end_point,
+                driver: result.driver.id,
+                encoded_route: result.area,
+            },
+            hasSidebarUpdate: true,
+        })
+            .then((response) => {
+                mutate();
+                setOpen(false);
+            })
+            .catch((error) => {})
+            .finally(() => {
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <>
+            <Tooltip title="تصحیح ماموریت" arrow placement="left">
+                <IconButton aria-label="تصحیح ماموریت" color="primary" onClick={handleOpen}>
+                    <AddCircleOutline sx={{ fontSize: "25px" }} />
+                </IconButton>
+            </Tooltip>
+
+            <Dialog open={open} fullWidth maxWidth="md">
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpen(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <Close />
+                </IconButton>
+                {open && (
+                    <CreateForm
+                        defaultValues={{
+                            explanation: "",
+                            category_id: "",
+                            road_observed_id: "",
+                            rahdaran: [],
+                            end_point: "",
+                            region: "",
+                            driver: null,
+                            area: null,
+                            locations: [],
+                        }}
+                        submitForm={submitForm}
+                        submitting={submitting}
+                        setOpen={setOpen}
+                    />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default MissionCorrection;

src/components/dashboard/roadMissions/operator/Actions/Violations/RowActions/index.jsx

@@ -0,0 +1,9 @@
+import MissionCorrection from "./MissionCorrection";
+
+export default function RowActions({ row, mutate }) {
+    return (
+        <>
+            <MissionCorrection row={row} mutate={mutate} />
+        </>
+    );
+}

src/components/dashboard/roadMissions/operator/Actions/Violations/ViolationsList.jsx

@@ -0,0 +1,141 @@
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+import RowActions from "./RowActions";
+import { GET_OPERATOR_VIOLATIONS_LIST } from "@/core/utils/routes";
+import useCities from "@/lib/hooks/useCities";
+import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
+import useProvinces from "@/lib/hooks/useProvince";
+
+const ViolationsList = ({ setOpen }) => {
+    const columns = useMemo(() => {
+        const dynamicColumns = {
+            header: "استان",
+            id: "province_id",
+            enableColumnFilter: true,
+            datatype: "numeric",
+            filterMode: "equals",
+            grow: false,
+            size: 130,
+            ColumnSelectComponent: (props) => {
+                const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+                const getColumnSelectOptions = useMemo(() => {
+                    if (loadingProvinces) {
+                        return [{ value: "loading", label: "در حال بارگذاری..." }];
+                    }
+                    if (errorProvinces) {
+                        return [{ value: "error", label: "خطا در بارگذاری" }];
+                    }
+                    return [
+                        { value: "", label: "کل کشور" },
+                        ...provinces.map((province) => ({
+                            value: province.id,
+                            label: province.name_fa,
+                        })),
+                    ];
+                }, [provinces, errorProvinces, loadingProvinces]);
+                return (
+                    <CustomSelectByDependency
+                        {...props}
+                        value={loadingProvinces ? "loading" : props.filterParameters.value}
+                        columnSelectOption={getColumnSelectOptions}
+                    />
+                );
+            },
+            Cell: ({ renderedCellValue, row }) => {
+                return <>{row.original.province_name}</>;
+            },
+        };
+        return [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "machine_code",
+                header: "کد خودرو",
+                id: "machine_code",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            ...[dynamicColumns],
+            {
+                header: "شهر",
+                id: "city_id",
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterMode: "equals",
+                dependencyId: "province_id",
+                grow: false,
+                size: 120,
+                ColumnSelectComponent: (props) => {
+                    const { cityList, loadingCityList, errorCityList } = useCities(props.dependencyFieldValue.value);
+
+                    const getColumnSelectOptions = useMemo(() => {
+                        if (props.dependencyFieldValue.value === "") {
+                            return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
+                        }
+                        if (loadingCityList) {
+                            return [{ value: "loading", label: "در حال بارگذاری..." }];
+                        }
+                        if (errorCityList) {
+                            return [{ value: "error", label: "خطا در بارگذاری" }];
+                        }
+                        return [
+                            { value: "", label: "کل ادارات" },
+                            ...cityList.map((edare) => ({
+                                value: edare.id,
+                                label: edare.name_fa,
+                            })),
+                        ];
+                    }, [cityList, loadingCityList, errorCityList]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue?.value === ""
+                                    ? "empty"
+                                    : loadingCityList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ row }) => <>{row.original.city_name}</>,
+            },
+        ];
+    }, []);
+
+    return (
+        <>
+            <Box sx={{ mt: 3, p: 1 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    // table_title="لیست تخلفات"
+                    columns={columns}
+                    sorting={[{ id: "id", desc: true }]}
+                    table_url={GET_OPERATOR_VIOLATIONS_LIST}
+                    page_name={"operatorViolations"}
+                    table_name={"operatorViolationsList"}
+                    enableRowActions
+                    positionActionsColumn={"first"}
+                    RowActions={(props) => <RowActions {...props} setOpen={setOpen} />}
+                />
+            </Box>
+        </>
+    );
+};
+export default ViolationsList;

src/components/dashboard/roadMissions/operator/Actions/Violations/index.jsx

@@ -0,0 +1,33 @@
+import { Button, IconButton, Tooltip, useMediaQuery } from "@mui/material";
+import { useState } from "react";
+import ViolationsDialog from "./Dialog";
+import theme from "@/core/utils/theme";
+import RemoveRoadIcon from "@mui/icons-material/RemoveRoad";
+
+const OperatorViolations = ({ row, mutate }) => {
+    const [open, setOpen] = useState(false);
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    return (
+        <>
+            <Tooltip title="تخلفات">
+                {isMobile ? (
+                    <IconButton aria-label="تخلفات" color="primary" onClick={() => setOpen(true)}>
+                        <RemoveRoadIcon sx={{ fontSize: "25px" }} />
+                    </IconButton>
+                ) : (
+                    <Button
+                        size={"small"}
+                        variant="contained"
+                        color="primary"
+                        startIcon={<RemoveRoadIcon />}
+                        onClick={() => setOpen(true)}
+                    >
+                        تخلفات
+                    </Button>
+                )}
+            </Tooltip>
+            <ViolationsDialog open={open} setOpen={setOpen} mutate={mutate} row={row} />
+        </>
+    );
+};
+export default OperatorViolations;

src/components/dashboard/roadMissions/operator/RowActions/ChangeStatus/Dialog.jsx

@@ -0,0 +1,26 @@
+import { Close } from "@mui/icons-material";
+import { Dialog, DialogTitle, IconButton } from "@mui/material";
+import ChangeStatusForm from "./Form";
+
+const ChangeStatusDialog = ({ open, setOpen, mutate, row }) => {
+    return (
+        <Dialog open={open} fullWidth maxWidth="xs">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <Close />
+            </IconButton>
+            <DialogTitle>تغییر وضعیت</DialogTitle>
+            {open && <ChangeStatusForm setOpen={setOpen} mutate={mutate} row={row} />}
+        </Dialog>
+    );
+};
+export default ChangeStatusDialog;

src/components/dashboard/roadMissions/operator/RowActions/ChangeStatus/Form.jsx

@@ -0,0 +1,111 @@
+import SelectBox from "@/core/components/SelectBox";
+import StyledForm from "@/core/components/StyledForm";
+import { CHANGE_STATUS_OPERATOR, CHANGE_STATUS_RECEIPT } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Beenhere, ExitToApp } from "@mui/icons-material";
+import { Button, DialogActions, DialogContent, Grid, Stack } from "@mui/material";
+import { Controller, useForm } from "react-hook-form";
+import { object, string } from "yup";
+
+const validationSchema = object({
+    status: string().required("وضعیت را مشخص کنید!"),
+});
+
+const ChangeStatusForm = ({ setOpen, mutate, row }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+    const defaultValues = {
+        status: row.original?.status || "",
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const {
+        control,
+        handleSubmit,
+        formState: { isSubmitting },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "all",
+    });
+    const onSubmitBase = async (data) => {
+        const formData = new FormData();
+        formData.append("state_id", data.status);
+        await requestServer(`${CHANGE_STATUS_OPERATOR}/${row.original.id}`, "post", {
+            data: formData,
+        })
+            .then((response) => {
+                mutate();
+                setOpen(false);
+            })
+            .catch((error) => {});
+    };
+
+    return (
+        <StyledForm onSubmit={handleSubmit(onSubmitBase)}>
+            <DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
+                <Stack>
+                    <Grid container spacing={2}>
+                        <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                            <Controller
+                                control={control}
+                                name={"status"}
+                                render={({ field, fieldState: { error } }) => (
+                                    <SelectBox
+                                        value={field.value}
+                                        label="وضعیت"
+                                        selectors={[
+                                            {
+                                                id: 1,
+                                                name_fa: "درخواست ایجاد شد و در حال بررسی توسط واحد تایید کننده است",
+                                            },
+                                            {
+                                                id: 2,
+                                                name_fa:
+                                                    "خودرو اختصاص داده شد و درخواست توسط واحد کنترل در حال بررسی است",
+                                            },
+                                            {
+                                                id: 3,
+                                                name_fa: "درخواست توسط واحد کنترل تایید شد و ماموریت آغاز می شود",
+                                            },
+                                            { id: 4, name_fa: "اتمام ماموریت" },
+                                            {
+                                                id: 5,
+                                                name_fa:
+                                                    "عدم تخصیص خودرو توسط واحد تایید کننده و بازگشت درخواست به کارتابل کاربر",
+                                            },
+                                            { id: 6, name_fa: "ماموریت لغو شد" },
+                                            { id: 7, name_fa: "ماموریت بدون فرایند ثبت شد" },
+                                        ]}
+                                        schema={{ name: "name_fa", value: "id" }}
+                                        error={error}
+                                        onChange={field.onChange}
+                                        helperText={error?.message}
+                                    />
+                                )}
+                            />
+                        </Grid>
+                    </Grid>
+                </Stack>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button
+                    onClick={handleClose}
+                    variant="outlined"
+                    color="secondary"
+                    size="large"
+                    startIcon={<ExitToApp />}
+                >
+                    بستن
+                </Button>
+                <Button variant="contained" size="large" disabled={isSubmitting} type={"submit"} endIcon={<Beenhere />}>
+                    {isSubmitting ? "در حال ثبت" : "ثبت"}
+                </Button>
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default ChangeStatusForm;

src/components/dashboard/roadMissions/operator/RowActions/ChangeStatus/index.jsx

@@ -0,0 +1,19 @@
+import { Reply } from "@mui/icons-material";
+import { IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import ChangeStatusDialog from "./Dialog";
+
+const ChangeStatus = ({ row, mutate }) => {
+    const [open, setOpen] = useState(false);
+    return (
+        <>
+            <Tooltip title="تغییر وضعیت">
+                <IconButton color="primary" onClick={() => setOpen(true)}>
+                    <Reply />
+                </IconButton>
+            </Tooltip>
+            <ChangeStatusDialog open={open} setOpen={setOpen} mutate={mutate} row={row} />
+        </>
+    );
+};
+export default ChangeStatus;

src/components/dashboard/roadMissions/operator/RowActions/index.jsx

@@ -3,9 +3,13 @@ import Edit from "./Edit";
 import Delete from "./Delete";
 import { useAuth } from "@/lib/contexts/auth";
 import Add from "./Add";
+import ChangeStatus from "@/components/dashboard/roadMissions/operator/RowActions/ChangeStatus";
+import { usePermissions } from "@/lib/hooks/usePermissions";
 
 const RowActions = ({ row, mutate }) => {
     const { user } = useAuth();
+    const { data: userPermissions } = usePermissions();
+    const hasChangeStatusPermission = userPermissions.some((item) => ["mission-change-state"].includes(item));
 
     return (
         <Box sx={{ display: "flex", gap: 1 }}>
@@ -20,6 +24,7 @@ const RowActions = ({ row, mutate }) => {
                     <Add mutate={mutate} row={row} />
                 </>
             )}
+            {hasChangeStatusPermission && <ChangeStatus mutate={mutate} row={row} />}
         </Box>
     );
 };

src/components/dashboard/roadMissions/operator/Toolbar.jsx

@@ -1,12 +1,14 @@
 import { Stack } from "@mui/material";
 import Create from "./Actions/Create";
-import CreateWithoutProcess from "./Actions/CreateWithoutProcess";
+import OperatorViolations from "./Actions/Violations";
+// import CreateWithoutProcess from "./Actions/CreateWithoutProcess";
 
 const Toolbar = ({ table, filterData, mutate }) => {
     return (
         <Stack direction={"row"} spacing={1}>
             <Create mutate={mutate} />
-            <CreateWithoutProcess mutate={mutate} />
+            <OperatorViolations />
+            {/*<CreateWithoutProcess mutate={mutate} />*/}
         </Stack>
     );
 };

src/components/dashboard/roadMissions/transportation/RowActions/Allocation/Form/MachinesDialog/MachineList/index.jsx

@@ -5,6 +5,16 @@ import RowActions from "./RowActions";
 import { GET_MACHINES_TABLE_LIST } from "@/core/utils/routes";
 import { useAuth } from "@/lib/contexts/auth";
 
+const statusTypes = [
+    { id: 1, name_fa: "آماده" },
+    { id: 2, name_fa: "رزرو" },
+    { id: 3, name_fa: "در ماموریت" },
+    { id: 4, name_fa: "خارج از رده" },
+    { id: 5, name_fa: "در تعمیر" },
+    { id: 6, name_fa: "فروخته شده" },
+    { id: 7, name_fa: "نیاز به تعمیر" },
+];
+
 const MachinesList = ({ machineType, setMachine, setOpenMachinesDialog }) => {
     const {
         user: { city_id, province_id },
@@ -33,6 +43,28 @@ const MachinesList = ({ machineType, setMachine, setOpenMachinesDialog }) => {
                 grow: false,
                 size: 100,
             },
+            {
+                accessorKey: "status",
+                header: "وضعیت",
+                id: "status",
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterMode: "equals",
+                sortDescFirst: true,
+                grow: false,
+                size: 100,
+                columnSelectOption: () => {
+                    return statusTypes.map((category) => ({
+                        value: category.id,
+                        label: category.name_fa,
+                    }));
+                },
+                Cell: ({ row }) => {
+                    const statusValue = row.original.status;
+                    const statusItem = statusTypes.find((item) => item.id === statusValue);
+                    return statusItem ? statusItem.name_fa : statusValue;
+                },
+            },
         ],
         []
     );

src/components/dashboard/roadMissions/violations/Actions/CreateViolation/Form/CreateForm.jsx

@@ -5,6 +5,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Button, DialogActions, DialogContent, Stack } from "@mui/material";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
+import MissionDates from "@/components/dashboard/roadMissions/violations/Actions/CreateViolation/Form/MissionDates";
 const schema = yup.object().shape({
     machinesId: yup.object().required("کد خودرو الزامی است."),
     km: yup.string(),
@@ -61,6 +62,9 @@ const CreateViolationForm = ({ setOpenMachinesDialog, defaultValues, onSubmitBas
                                 )}
                             />
                         </Stack>
+                        <Stack spacing={2} sx={{ minWidth: "200px" }}>
+                            <MissionDates control={control} />
+                        </Stack>
                     </Stack>
                 </DialogContent>
                 <DialogActions sx={{ alignItems: "center", justifyContent: "end" }}>

src/components/dashboard/roadMissions/violations/Actions/CreateViolation/Form/MissionDates/index.jsx

@@ -0,0 +1,55 @@
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import MuiTimePicker from "@/core/components/MuiTimePicker";
+import { Grid } from "@mui/material";
+import { Controller, useWatch } from "react-hook-form";
+
+const MissionDates = ({ control }) => {
+    const start_date = useWatch({ control, name: "start_date" });
+    const now = new Date();
+
+    return (
+        <>
+            <Grid item xs={12} sm={6}>
+                <Controller
+                    control={control}
+                    name={"start_date"}
+                    render={({ field, fieldState: { error } }) => {
+                        return (
+                            <MuiDatePicker
+                                name="start_date"
+                                error={error}
+                                value={field.value}
+                                disableFuture={false}
+                                minDate={start_date ? start_date : now}
+                                placeholder={"تاریخ شروع ماموریت را وارد کنید"}
+                                label={"تاریخ شروع ماموریت"}
+                                setFieldValue={(name, value) => field.onChange(value || [])}
+                                helperText={error ? error.message : null}
+                            />
+                        );
+                    }}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+                <Controller
+                    control={control}
+                    name={"start_time"}
+                    render={({ field, fieldState: { error } }) => {
+                        return (
+                            <MuiTimePicker
+                                name="start_time"
+                                error={error}
+                                value={field.value}
+                                placeholder={"زمان شروع ماموریت را وارد کنید"}
+                                label={"زمان شروع ماموریت"}
+                                setFieldValue={(name, value) => field.onChange(value || null)}
+                                helperText={error ? error.message : null}
+                            />
+                        );
+                    }}
+                />
+            </Grid>
+        </>
+    );
+};
+export default MissionDates;

src/components/dashboard/roadMissions/violations/Actions/CreateViolation/Form/index.jsx

@@ -3,6 +3,7 @@ import { DialogHeader } from "next/dist/client/components/react-dev-overlay/inte
 import useRequest from "@/lib/hooks/useRequest";
 import { CREATE_VIOLATION } from "@/core/utils/routes";
 import CreateViolationForm from "@/components/dashboard/roadMissions/violations/Actions/CreateViolation/Form/CreateForm";
+import moment from "jalali-moment";
 
 const ViolationForm = ({ setOpenMachinesDialog, mutate, openMachinesDialog }) => {
     const requestServer = useRequest({ notificationSuccess: true });
@@ -10,6 +11,8 @@ const ViolationForm = ({ setOpenMachinesDialog, mutate, openMachinesDialog }) =>
     const defaultValues = {
         machinesId: null,
         km: "",
+        start_date: null,
+        start_time: null,
     };
 
     const submitForm = async (result) => {
@@ -17,6 +20,7 @@ const ViolationForm = ({ setOpenMachinesDialog, mutate, openMachinesDialog }) =>
             data: {
                 machine_code: result.machinesId.machine_code,
                 km: result.km,
+                exit_station: `${result.start_date} ${moment(result.start_time).format("HH:mm")}`,
             },
         })
             .then((response) => {

src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/index.jsx

@@ -60,7 +60,6 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
                 }}
             >
                 <Tab icon={<InsertDriveFile />} label="مشخصات" />
-                <Tab disabled={tabState < 1} icon={<AccessTime />} label="زمانبندی" />
                 <Tab disabled={tabState < 2} icon={<Person />} label="راننده" />
                 <Tab disabled={tabState < 3} icon={<Map />} label="مختصات" />
                 <Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
@@ -77,16 +76,6 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
                 />
             </TabPanel>
             <TabPanel value={tabState} index={1}>
-                <GetDateTime
-                    allData={allData}
-                    setAllData={(data) => {
-                        dispatch({ type: "changeData", data });
-                    }}
-                    handlePrev={handlePrev}
-                    setTabState={setTabState}
-                />
-            </TabPanel>
-            <TabPanel value={tabState} index={2}>
                 <MachineAndDriver
                     allData={allData}
                     setAllData={(data) => {
@@ -96,7 +85,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
                     setTabState={setTabState}
                 />
             </TabPanel>
-            <TabPanel value={tabState} index={3}>
+            <TabPanel value={tabState} index={2}>
                 <Area
                     allData={allData}
                     setAllData={(data) => {
@@ -106,7 +95,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
                     setTabState={setTabState}
                 />
             </TabPanel>
-            <TabPanel value={tabState} index={4}>
+            <TabPanel value={tabState} index={3}>
                 <Rahdaran
                     allData={allData}
                     setAllData={(data) => {
@@ -116,7 +105,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
                     setTabState={setTabState}
                 />
             </TabPanel>
-            <TabPanel value={tabState} index={5}>
+            <TabPanel value={tabState} index={4}>
                 <Verify allData={allData} handlePrev={handlePrev} submitForm={submitForm} submitting={submitting} />
             </TabPanel>
         </>

src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/index.jsx

@@ -25,8 +25,6 @@ const CreateWithoutProcess = ({ row, mutate }) => {
                 ...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
                 zone: result.region,
                 end_point: result.end_point,
-                start_date: `${result.start_date} ${moment(result.start_time).format("HH:mm")}`,
-                end_date: `${result.end_date} ${moment(result.end_time).format("HH:mm")}`,
                 driver: result.driver.id,
                 encoded_route: result.area,
             },
@@ -71,10 +69,6 @@ const CreateWithoutProcess = ({ row, mutate }) => {
                             category_id: "",
                             road_observed_id: "",
                             rahdaran: [],
-                            start_date: "",
-                            start_time: null,
-                            end_date: "",
-                            end_time: null,
                             end_point: "",
                             region: "",
                             driver: null,

src/components/dashboard/roadMissions/violations/Actions/EditViolation/EditController.jsx

@@ -5,24 +5,19 @@ import { DialogHeader } from "next/dist/client/components/react-dev-overlay/inte
 import EditViolationForm from "./EditViolationForm";
 import moment from "jalali-moment";
 
-const EditController = ({ rowId, mutate, setOpen }) => {
+const EditController = ({ rowId, mutate, setOpen, row }) => {
     const requestServer = useRequest({ notificationSuccess: true });
+    const [endDate] = row?.original?.enter_station?.split(" ") || [null];
 
     const defaultData = {
-        start_date: null,
-        start_time: null,
-        end_date: null,
-        end_time: null,
+        end_date: endDate,
+        end_time: row?.original?.enter_station ? new Date(row.original.enter_station) : null,
     };
     const handleSubmit = async (result) => {
         const payload = {};
 
-        if (result.start_date && result.start_time) {
-            payload.enter_time = `${result.start_date} ${moment(result.start_time).format("HH:mm")}`;
-        }
-
         if (result.end_date && result.end_time) {
-            payload.exit_time = `${result.end_date} ${moment(result.end_time).format("HH:mm")}`;
+            payload.enter_station = `${result.end_date} ${moment(result.end_time).format("HH:mm")}`;
         }
 
         await requestServer(`${EDIT_VIOLATION}/${rowId}`, "post", {

src/components/dashboard/roadMissions/violations/Actions/EditViolation/MissionDates/index.jsx

@@ -5,53 +5,11 @@ import { Grid } from "@mui/material";
 import { Controller, useWatch } from "react-hook-form";
 
 const MissionDates = ({ control }) => {
-    const start_date = useWatch({ control, name: "start_date" });
     const end_date = useWatch({ control, name: "end_date" });
     const now = new Date();
 
     return (
         <>
-            <Grid item xs={12} sm={6}>
-                <Controller
-                    control={control}
-                    name={"start_date"}
-                    render={({ field, fieldState: { error } }) => {
-                        return (
-                            <MuiDatePicker
-                                name="start_date"
-                                error={error}
-                                value={field.value}
-                                disableFuture={false}
-                                maxDate={end_date ?? null}
-                                placeholder={"تاریخ شروع ماموریت را وارد کنید"}
-                                label={"تاریخ شروع ماموریت"}
-                                setFieldValue={(name, value) => field.onChange(value || [])}
-                                helperText={error ? error.message : null}
-                            />
-                        );
-                    }}
-                />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-                <Controller
-                    control={control}
-                    name={"start_time"}
-                    render={({ field, fieldState: { error } }) => {
-                        return (
-                            <MuiTimePicker
-                                name="start_time"
-                                error={error}
-                                value={field.value}
-                                views={["hours"]}
-                                placeholder={"زمان شروع ماموریت را وارد کنید"}
-                                label={"زمان شروع ماموریت"}
-                                setFieldValue={(name, value) => field.onChange(value || null)}
-                                helperText={error ? error.message : null}
-                            />
-                        );
-                    }}
-                />
-            </Grid>
             <Grid item xs={12} sm={6}>
                 <Controller
                     control={control}
@@ -63,7 +21,7 @@ const MissionDates = ({ control }) => {
                                 error={error}
                                 value={field.value}
                                 disableFuture={false}
-                                minDate={start_date ? start_date : now}
+                                minDate={end_date ? end_date : now}
                                 placeholder={"تاریخ پایان ماموریت را وارد کنید"}
                                 label={"تاریخ پایان ماموریت"}
                                 setFieldValue={(name, value) => field.onChange(value || [])}
@@ -83,7 +41,6 @@ const MissionDates = ({ control }) => {
                                 name="end_time"
                                 error={error}
                                 value={field.value}
-                                views={["hours"]}
                                 placeholder={"زمان پایان ماموریت را وارد کنید"}
                                 label={"زمان پایان ماموریت"}
                                 setFieldValue={(name, value) => field.onChange(value || null)}

src/components/dashboard/roadMissions/violations/RowActions/index.jsx

@@ -1,12 +1,12 @@
-import CreateWithoutProcess from "../Actions/CreateWithoutProcess";
+// import CreateWithoutProcess from "../Actions/CreateWithoutProcess";
 import EditViolation from "../Actions/EditViolation";
 
 const RowActions = ({ row, mutate }) => {
-    const canEdit = row.original.status === 0 && row.original.type === 1;
+    // const canEdit = row.original.status === 0 && row.original.type === 1;
     return (
         <>
             {!row.original.mileage && <EditViolation row={row} mutate={mutate} rowId={row.getValue("id")} />}
-            {canEdit && <CreateWithoutProcess row={row} mutate={mutate} />}
+            {/*{canEdit && <CreateWithoutProcess row={row} mutate={mutate} />}*/}
         </>
     );
 };

src/components/dashboard/roadMissions/violations/ViolationsList.jsx

@@ -6,10 +6,51 @@ import moment from "jalali-moment";
 import { useMemo } from "react";
 import RowActions from "./RowActions";
 import Toolbar from "./Toolbar";
+import { violationsCategoryStatus } from "@/core/utils/violationsCategoryStatus";
+import useProvinces from "@/lib/hooks/useProvince";
+import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
+import useCities from "@/lib/hooks/useCities";
 
 const ViolationsList = () => {
-    const columns = useMemo(
-        () => [
+    const columns = useMemo(() => {
+        const dynamicColumns = {
+            header: "استان",
+            id: "province_id",
+            enableColumnFilter: true,
+            datatype: "numeric",
+            filterMode: "equals",
+            grow: false,
+            size: 130,
+            ColumnSelectComponent: (props) => {
+                const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+                const getColumnSelectOptions = useMemo(() => {
+                    if (loadingProvinces) {
+                        return [{ value: "loading", label: "در حال بارگذاری..." }];
+                    }
+                    if (errorProvinces) {
+                        return [{ value: "error", label: "خطا در بارگذاری" }];
+                    }
+                    return [
+                        { value: "", label: "کل کشور" },
+                        ...provinces.map((province) => ({
+                            value: province.id,
+                            label: province.name_fa,
+                        })),
+                    ];
+                }, [provinces, errorProvinces, loadingProvinces]);
+                return (
+                    <CustomSelectByDependency
+                        {...props}
+                        value={loadingProvinces ? "loading" : props.filterParameters.value}
+                        columnSelectOption={getColumnSelectOptions}
+                    />
+                );
+            },
+            Cell: ({ renderedCellValue, row }) => {
+                return <>{row.original.province_name}</>;
+            },
+        };
+        return [
             {
                 accessorKey: "id",
                 header: "کد یکتا",
@@ -21,14 +62,20 @@ const ViolationsList = () => {
                 grow: false,
             },
             {
-                accessorKey: "type",
-                header: "نوع تخلف",
-                id: "type",
+                accessorKey: "status",
+                header: "وضعیت",
+                id: "status",
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterMode: "equals",
                 sortDescFirst: true,
                 grow: false,
+                columnSelectOption: () => {
+                    return violationsCategoryStatus.map((category) => ({
+                        value: category.id,
+                        label: category.name_fa,
+                    }));
+                },
                 Cell: ({ row }) => (row.original.type === 1 ? "خروج بدون مجوز" : "عدم تحرک"),
             },
             {
@@ -39,6 +86,53 @@ const ViolationsList = () => {
                 columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
             },
+            ...[dynamicColumns],
+            {
+                header: "شهر",
+                id: "city_id",
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterMode: "equals",
+                dependencyId: "province_id",
+                grow: false,
+                size: 120,
+                ColumnSelectComponent: (props) => {
+                    const { cityList, loadingCityList, errorCityList } = useCities(props.dependencyFieldValue.value);
+
+                    const getColumnSelectOptions = useMemo(() => {
+                        if (props.dependencyFieldValue.value === "") {
+                            return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
+                        }
+                        if (loadingCityList) {
+                            return [{ value: "loading", label: "در حال بارگذاری..." }];
+                        }
+                        if (errorCityList) {
+                            return [{ value: "error", label: "خطا در بارگذاری" }];
+                        }
+                        return [
+                            { value: "", label: "کل ادارات" },
+                            ...cityList.map((edare) => ({
+                                value: edare.id,
+                                label: edare.name_fa,
+                            })),
+                        ];
+                    }, [cityList, loadingCityList, errorCityList]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue?.value === ""
+                                    ? "empty"
+                                    : loadingCityList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ row }) => <>{row.original.city_name}</>,
+            },
             {
                 accessorKey: "machine",
                 header: "نام خودرو",
@@ -68,9 +162,8 @@ const ViolationsList = () => {
                 grow: false,
                 Cell: ({ row }) => moment(row.original.request_date).locale("fa").format("YYYY/MM/DD"),
             },
-        ],
-        []
-    );
+        ];
+    }, []);
 
     return (
         <>

src/core/components/RahdarNameOrCode.jsx

@@ -53,7 +53,7 @@ const RahdarNameOrCode = ({ title = "راهدار", rahdarsName, setRahdarsName,
                 setInputValue(newInputValue || ""); // به‌روزرسانی مقدار تایپ‌شده
             }}
             options={options} // گزینه‌های موجود
-            getOptionLabel={(option) => (typeof option === "string" ? option : `${option.code} - ${option.name}`)}
+            getOptionLabel={(option) => (typeof option === "string" ? option : `${option.name}`)}
             isOptionEqualToValue={(option, value) => {
                 if (!value) return false;
                 if (value === "") return option.code === "";

src/core/utils/routes.js

@@ -130,6 +130,7 @@ export const GET_INSURANCE_PAGE = api + "/v2/receipt/send-to-insurance";
 export const GET_POLICERAH = api + "/api/v3/receipts/generate_police_document";
 export const GET_POLICERAH_PAGE = api + "/v2/receipt/document-release";
 export const CHANGE_STATUS_RECEIPT = api + "/api/v3/receipts/change_status";
+export const CHANGE_STATUS_OPERATOR = api + "/api/v3/missions/request_portal/change_state";
 
 // recept report
 export const GET_COUNTRY_RECEIPT_REPORT = api + "/api/v3/receipt_reports/country_report";
@@ -235,6 +236,7 @@ export const GET_ROAD_MISSIONS_CONTROL_LIST = api + "/api/v3/missions/control_un
 export const REQUEST_MISSION = api + "/api/v3/missions/request_portal";
 export const REQUEST_MISSION_WITHOUT_PROCESS = api + "/api/v3/missions/request_portal/no_process";
 export const REQUEST_MISSION_VIOLATIONS_PROCESS = api + "/api/v3/missions/violation_management/no_process";
+export const MISSOINS_CORRECTION_VIOLATION = api + "/api/v3/missions/request_portal/clarify_unauthorized_exit";
 export const REQUEST_MISSION_CONTINUE_MISSION = api + "/api/v3/missions/request_portal/continue";
 export const UPDATE_REQUEST_MISSION = api + "/api/v3/missions/request_portal";
 export const DELETE_REQUEST_MISSION = api + "/api/v3/missions/request_portal";
@@ -252,6 +254,7 @@ export const EDIT_VIOLATION = api + "/api/v3/missions/violation_management";
 export const EXPORT_COUNTRY_ROAD_MISSIONS_REPORTS = api + "/api/v3/missions/report/country_excel_activity";
 export const EXPORT_PROVINCE_ROAD_MISSIONS_REPORTS = api + "/api/v3/missions/report/province_excel_activity";
 
+export const GET_OPERATOR_VIOLATIONS_LIST = api + "/api/v3/missions/request_portal/violations";
 export const GET_MACHINES_TABLE_LIST = api + "/api/v3/cmms_machines";
 
 // rahdaran

src/core/utils/violationsCategoryStatus.js

@@ -0,0 +1,4 @@
+export const violationsCategoryStatus = [
+    { id: 0, name_fa: "بدون اقدام" },
+    { id: 1, name_fa: "اقدام شده" },
+];