Feature/faaliyat rozane cartable

2024-12-23 08:20:46 +00:00
parent f2ef4cd1db
commit 4b25071e41
75 changed files with 3722 additions and 236 deletions
--- a/src/components/dashboard/azmayesh/ShowLocation/ShowLocationMarker.jsx
+++ b/src/components/dashboard/azmayesh/ShowLocation/ShowLocationMarker.jsx
@@ -1,104 +0,0 @@
-"use client";
-
-import { Marker, useMap } from "react-leaflet";
-import { useEffect } from "react";
-import L from "leaflet";
-import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
-import { Box, FormControl, InputAdornment, InputLabel, OutlinedInput, Stack, useMediaQuery } from "@mui/material";
-import VerifiedIcon from "@mui/icons-material/Verified";
-import { useTheme } from "@emotion/react";
-
-const ShowLocationMarker = ({ lat, lng }) => {
-    const map = useMap();
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-
-    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]],
-        });
-    };
-
-    useEffect(() => {
-        map.flyTo({ lat: lat, lng: lng }, 14);
-    }, []);
-
-    return (
-        <>
-            <Marker
-                position={{ lat: lat, lng: lng }}
-                icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
-            />
-            <Box
-                sx={{
-                    zIndex: "400",
-                    position: "absolute",
-                    background: "#ffffff94",
-                    p: 2,
-                    borderRadius: "10px",
-                    boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
-                    bottom: "5px",
-                    left: "10px",
-                    right: isMobile ? "10px" : "",
-                }}
-            >
-                <Stack sx={{ gap: 2 }}>
-                    <FormControl size="small" variant="outlined">
-                        <InputLabel sx={{ color: "success.main" }} htmlFor="lat">
-                            طول جغرافیایی
-                        </InputLabel>
-                        <OutlinedInput
-                            id="lat"
-                            type="text"
-                            size="small"
-                            readOnly
-                            sx={{
-                                "& .MuiOutlinedInput-notchedOutline": {
-                                    borderColor: "success.main",
-                                },
-                                color: "success.main",
-                            }}
-                            value={lat}
-                            endAdornment={
-                                <InputAdornment position="end">
-                                    <VerifiedIcon color="success" />
-                                </InputAdornment>
-                            }
-                            label="طول جغرافیایی"
-                        />
-                    </FormControl>
-                    <FormControl size="small" variant="outlined">
-                        <InputLabel sx={{ color: "success.main" }} htmlFor="lng">
-                            عرض جغرافیایی
-                        </InputLabel>
-                        <OutlinedInput
-                            id="lng"
-                            type="text"
-                            size="small"
-                            readOnly
-                            sx={{
-                                "& .MuiOutlinedInput-notchedOutline": {
-                                    borderColor: "success.main",
-                                },
-                                color: "success.main",
-                            }}
-                            value={lng}
-                            endAdornment={
-                                <InputAdornment position="end">
-                                    <VerifiedIcon color="success" />
-                                </InputAdornment>
-                            }
-                            label="عرض جغرافیایی"
-                        />
-                    </FormControl>
-                </Stack>
-            </Box>
-        </>
-    );
-};
-
-export default ShowLocationMarker;
--- a/src/components/dashboard/azmayesh/ShowLocation/index.jsx
+++ b/src/components/dashboard/azmayesh/ShowLocation/index.jsx
@@ -5,7 +5,7 @@ import { Box, Button, Dialog, DialogActions, DialogContent, IconButton } from "@
 import { useState } from "react";
 import dynamic from "next/dynamic";
 import MapLoading from "@/core/components/MapLayer/Loading";
-import ShowLocationMarker from "./ShowLocationMarker";
+import ShowLocationMarker from "@/core/components/ShowLocationMarker";

 const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
    loading: () => <MapLoading />,
@@ -36,7 +36,7 @@ const ShowLocation = ({ lat, lng }) => {
                <DialogContent>
                    <Box sx={{ width: "400px", height: "400px" }}>
                        <MapLayer>
-                            <ShowLocationMarker lat={lat} lng={lng} />
+                            <ShowLocationMarker start_lat={lat} start_lng={lng} />
                        </MapLayer>
                    </Box>
                </DialogContent>
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/CreateFormContent.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/CreateFormContent.jsx
@@ -0,0 +1,225 @@
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { array, mixed, object, string } from "yup";
+import { useTheme } from "@emotion/react";
+import useRequest from "@/lib/hooks/useRequest";
+import { Box, Button, DialogActions, DialogContent, Tab, Tabs, useMediaQuery } from "@mui/material";
+import StyledForm from "@/core/components/StyledForm";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
+import InfoIcon from "@mui/icons-material/Info";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+import BeenhereIcon from "@mui/icons-material/Beenhere";
+import GetItemsForm from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemsForm";
+import GetSubItemsForm from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/GetSubItemsForm";
+import GetItemInfo from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemInfo";
+import { CREATE_ROAD_ITEMS } from "@/core/utils/routes";
+
+function TabPanel(props) {
+    const { children, value, index } = props;
+    return (
+        <div role="tabpanel" hidden={value !== index}>
+            {value === index && <Box>{children}</Box>}
+        </div>
+    );
+}
+
+const defaultValues = {
+    itemId: null,
+    itemSubId: null,
+    amount: "",
+    action_date: "",
+    start_date: "",
+    before_image: null,
+    after_image: null,
+    cmms_machine_id: null,
+    rahdaran_id: null,
+    start_point: "",
+    end_point: "",
+};
+const validationSchema = object({
+    itemId: string().required("نوع آیتم را مشخص کنید!"),
+    itemSubId: string().required("موضوع مشاهده شده را مشخص کنید!"),
+    amount: string().required("وارد کردن مقدار الزامیست!"),
+    cmms_machine_id: object().required("وارد کردن کد خودرو الزامیست!"),
+    rahdaran_id: array().required("وارد کردن کد راهداران الزامیست!").min(1, "حداقل یک کد راهدار باید وارد شود!"), // بررسی حداقل یک آیتم,
+    action_date: string().required("لطفا زمان فعالیت را انتخاب کنید!"),
+    start_date: string().required("لطفاً تاریخ شروع فعالیت را انتخاب کنید!"),
+    before_image: mixed()
+        .nullable()
+        .test("before-image-required", "لطفا عکس قبل از اقدام را بارگذاری کنید!", function (value) {
+            const { subItemsList } = this.options.context;
+            const needsImage = subItemsList?.needs_image === 1;
+            if (needsImage) {
+                return !!value;
+            }
+            return true;
+        }),
+    after_image: mixed()
+        .nullable()
+        .test("after-image-required", "لطفا عکس بعد از اقدام را بارگذاری کنید!", function (value) {
+            const { subItemsList } = this.options.context;
+            const needsImage = subItemsList?.needs_image === 1;
+            if (needsImage) {
+                return !!value;
+            }
+            return true;
+        }),
+    start_point: mixed()
+        .test("start-point-required", "لطفاً نقطه شروع را مشخص کنید!", function (value) {
+            return !!value; // چک می‌کند که مقدار موجود است
+        })
+        .required("لطفاً نقطه شروع را مشخص کنید!"),
+    end_point: mixed().test("end-point-required", "لطفاً نقطه پایان را مشخص کنید!", function (value) {
+        const { subItemsList } = this.options.context;
+        const needsEndPoint = subItemsList?.needs_end_point === 1;
+        if (needsEndPoint) {
+            return !!value; // چک می‌کند که مقدار موجود است
+        }
+        return true;
+    }),
+});
+
+const CreateFormContent = ({ setOpen, mutate, rowId }) => {
+    const [tabState, setTabState] = useState(0);
+    const [itemsList, setItemsList] = useState();
+    const [subItemsList, setSubItemsList] = useState([]);
+    const theme = useTheme();
+    const requestServer = useRequest({ notification: { success: true } });
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleChangeTab = (event, newValue) => {
+        setTabState(newValue);
+    };
+
+    const handlePrev = () => {
+        if (tabState === 0) {
+            handleClose();
+        } else {
+            setTabState(tabState - 1);
+        }
+    };
+    const {
+        control,
+        watch,
+        getValues,
+        register,
+        handleSubmit,
+        setValue,
+        formState: { errors, isSubmitting },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+        context: { subItemsList },
+    });
+
+    const onSubmit = async (data) => {
+        console.log(data);
+        let endPoint;
+        let startPoint = `${data.start_point.lat},${data.start_point.lng}`;
+        data.end_point !== "" && (endPoint = `${data.end_point.lat},${data.end_point.lng}`);
+        const formData = new FormData();
+        data.rahdaran_id.map((rahdar, index) => formData.append(`rahdaran_id[${index}]`, rahdar.id));
+        formData.append("item_id", data.itemId);
+        formData.append("sub_item_id", data.itemSubId);
+        formData.append("amount", data.amount);
+        formData.append("activity_time", data.action_date);
+        formData.append("activity_date", data.start_date);
+        formData.append("cmms_machine_id", data.cmms_machine_id.id);
+        data.before_image !== null && formData.append("before_image", data.before_image);
+        data.after_image !== null && formData.append("after_image", data.after_image);
+        data.start_point !== "" && formData.append("start_point", startPoint);
+        data.end_point !== "" && formData.append("end_point", endPoint);
+        requestServer(CREATE_ROAD_ITEMS, "post", {
+            data: formData,
+        })
+            .then((response) => {
+                mutate();
+                setOpen(false);
+            })
+            .catch((error) => {});
+    };
+    return (
+        <StyledForm onSubmit={handleSubmit(onSubmit)}>
+            <Tabs
+                allowScrollButtonsMobile
+                value={tabState}
+                onChange={handleChangeTab}
+                variant={`${isMobile ? "scrollable" : "fullWidth"}`}
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-around",
+                    width: "100%",
+                    backgroundColor: "#efefef",
+                }}
+            >
+                <Tab icon={<InsertDriveFileIcon />} label="انتخاب آیتم" />
+                <Tab disabled={tabState === 0} icon={<FileCopyIcon />} label="انتخاب موضوع مشاهده شده" />
+                <Tab disabled={tabState === 0 || tabState === 1} icon={<InfoIcon />} label="اطلاعات فعالیت" />
+            </Tabs>
+            <DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
+                <Box sx={{ flex: 1 }}>
+                    <TabPanel value={tabState} index={0}>
+                        <GetItemsForm
+                            setItemsList={setItemsList}
+                            setValue={setValue}
+                            watch={watch}
+                            tabState={tabState}
+                            setTabState={setTabState}
+                        />
+                    </TabPanel>
+                    <TabPanel value={tabState} index={1}>
+                        <GetSubItemsForm
+                            setSubItemsList={setSubItemsList}
+                            setValue={setValue}
+                            watch={watch}
+                            tabState={tabState}
+                            setTabState={setTabState}
+                        />
+                    </TabPanel>
+                    <TabPanel value={tabState} index={2}>
+                        <GetItemInfo
+                            control={control}
+                            setValue={setValue}
+                            errors={errors}
+                            itemsList={itemsList}
+                            subItemsList={subItemsList}
+                            register={register}
+                            watch={watch}
+                            getValues={getValues}
+                        />
+                    </TabPanel>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button
+                    onClick={handlePrev}
+                    variant="outlined"
+                    color="error"
+                    size="large"
+                    startIcon={tabState === 0 ? <ExitToAppIcon /> : <KeyboardDoubleArrowRightIcon />}
+                >
+                    {tabState === 0 ? "بستن" : "مرحله قبل"}
+                </Button>
+                {tabState === 2 && (
+                    <Button
+                        variant="contained"
+                        size="large"
+                        disabled={isSubmitting}
+                        type={"submit"}
+                        endIcon={<BeenhereIcon />}
+                    >
+                        {isSubmitting ? "در حال ثبت فعالیت" : "ثبت فعالیت"}
+                    </Button>
+                )}
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default CreateFormContent;
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemInfo.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemInfo.jsx
@@ -0,0 +1,111 @@
+import { Stack, TextField, Grid } from "@mui/material";
+import ImageUpload from "./ImageUpload";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import MuiTimePicker from "@/core/components/MuiTimePicker";
+import MapInfoTwoMarker from "@/core/components/MapInfoTwoMarker";
+import MapInfoOneMarker from "@/core/components/MapInfoOneMarker";
+import { Controller } from "react-hook-form";
+import CarCode from "@/core/components/CarCode";
+import RahdarCode from "@/core/components/RahdarCode";
+import PreviousStatesInfo from "./PreviousStatesInfo";
+
+const GetItemInfo = ({ register, itemsList, subItemsList, control, setValue, errors, watch, getValues }) => {
+    return (
+        <Stack spacing={2}>
+            <Stack>
+                <PreviousStatesInfo itemsList={itemsList} subItemsList={subItemsList} />
+            </Stack>
+            <Stack>
+                <TextField
+                    {...register("amount")}
+                    label={`مقدار (${subItemsList.unit})`}
+                    error={!!errors.amount}
+                    type="text"
+                    size={"small"}
+                    inputProps={{
+                        inputMode: "number",
+                        min: 0,
+                        pattern: "[0-9]*",
+                    }}
+                    onChange={(event) => {
+                        if (!isNaN(event.target.value)) {
+                            setValue("amount", event.target.value);
+                        } else {
+                            setValue("amount", watch("amount"));
+                        }
+                    }}
+                    helperText={errors.amount ? errors.amount.message : null}
+                    variant="outlined"
+                    fullWidth
+                />
+            </Stack>
+            <Stack>
+                <Controller
+                    control={control}
+                    render={({ field, fieldState: { error } }) => {
+                        return (
+                            <CarCode
+                                carCode={field.value || null}
+                                setCarCode={(value) => field.onChange(value || null)}
+                                error={error}
+                            />
+                        );
+                    }}
+                    name={"cmms_machine_id"}
+                />
+            </Stack>
+            <Stack>
+                <Controller
+                    control={control}
+                    render={({ field, fieldState: { error } }) => {
+                        return (
+                            <RahdarCode
+                                rahdarsCode={field.value || []}
+                                setRahdarsCode={(value) => field.onChange(value || [])}
+                                error={error}
+                            />
+                        );
+                    }}
+                    name={"rahdaran_id"}
+                />
+            </Stack>
+            <Stack>
+                {subItemsList.needs_image ? (
+                    <ImageUpload setValue={setValue} control={control} errors={errors} getValues={getValues} />
+                ) : null}
+            </Stack>
+            <Stack>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} md={6}>
+                        <MuiDatePicker
+                            name="start_date"
+                            error={errors.start_date ? errors.start_date.message : null}
+                            value={watch("start_date")}
+                            placeholder={"تاریخ شروع فعالیت"}
+                            setFieldValue={setValue}
+                            helperText={errors.start_date ? errors.start_date.message : null}
+                        />
+                    </Grid>
+                    <Grid item xs={12} md={6}>
+                        <MuiTimePicker
+                            value={watch("action_date")}
+                            name="action_date"
+                            error={errors.action_date ? errors.action_date.message : null}
+                            placeholder={"زمان فعالیت"}
+                            setFieldValue={setValue}
+                            helperText={errors.action_date ? errors.action_date.message : null}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+            <Stack>
+                {subItemsList?.needs_end_point === 1 ? (
+                    <MapInfoTwoMarker setValue={setValue} errors={errors} />
+                ) : (
+                    <MapInfoOneMarker setValue={setValue} errors={errors} />
+                )}
+            </Stack>
+        </Stack>
+    );
+};
+export default GetItemInfo;
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemsForm.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemsForm.jsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Card, CardActionArea, Grid, LinearProgress, Typography } from "@mui/material";
+import Image from "next/image";
+import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
+
+const GetItemsForm = ({ setValue, setItemsList, tabState, setTabState }) => {
+    const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
+
+    return (
+        <>
+            {errorItemsList ? (
+                <Typography textAlign={"center"} color={"error"}>
+                    خطا در دریافت لیست آیتم ها
+                </Typography>
+            ) : loadingItemsList ? (
+                <LinearProgress />
+            ) : (
+                <Grid container sx={{ justifyContent: "center" }} spacing={2}>
+                    {itemsList.map((item) => (
+                        <Grid item xs={6} sm={3} key={item.id}>
+                            <Card
+                                elevation={0}
+                                sx={{
+                                    border: "1px solid #e7e7e7",
+                                    "&:hover": {
+                                        boxShadow: 2,
+                                        cursor: "pointer",
+                                    },
+                                }}
+                                onClick={() => {
+                                    setValue("itemId", item.id);
+                                    setItemsList(item.name);
+                                    setTabState(tabState + 1);
+                                }}
+                            >
+                                <CardActionArea
+                                    sx={{
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: 1,
+                                        alignItems: "center",
+                                        p: 2,
+                                    }}
+                                >
+                                    <Image
+                                        width={40}
+                                        height={40}
+                                        src={`${process.env.NEXT_PUBLIC_API_URL}/${item.icon}`}
+                                        alt={"icon"}
+                                        style={{
+                                            filter: "invert(36%) sepia(80%) saturate(558%) hue-rotate(170deg) brightness(97%) contrast(93%)",
+                                        }}
+                                    />
+                                    <Typography>{item.name}</Typography>
+                                </CardActionArea>
+                            </Card>
+                        </Grid>
+                    ))}
+                </Grid>
+            )}
+        </>
+    );
+};
+export default GetItemsForm;
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetSubItemsForm.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetSubItemsForm.jsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { Card, CardActionArea, Grid, LinearProgress, Typography } from "@mui/material";
+import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
+
+const GetSubItemsForm = ({ setValue, watch, setSubItemsList, tabState, setTabState }) => {
+    const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(watch("itemId"));
+
+    return (
+        <>
+            {errorSubItemsList ? (
+                <Typography textAlign={"center"} color={"error"}>
+                    خطا در دریافت موضوع مشاهده شده
+                </Typography>
+            ) : loadingSubItemsList ? (
+                <LinearProgress />
+            ) : (
+                <Grid container sx={{ justifyContent: "center" }} spacing={2}>
+                    {subItemsList.map((item) => (
+                        <Grid item sm={6} xs={12} key={item.id}>
+                            <Card
+                                elevation={0}
+                                sx={{
+                                    border: "1px solid #e7e7e7",
+                                    "&:hover": {
+                                        boxShadow: 2,
+                                        cursor: "pointer",
+                                    },
+                                }}
+                                onClick={() => {
+                                    setValue("itemSubId", item.sub_item);
+                                    setSubItemsList(item);
+                                    setTabState(tabState + 1);
+                                }}
+                            >
+                                <CardActionArea
+                                    sx={{
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        alignItems: "center",
+                                        p: 2,
+                                    }}
+                                >
+                                    <Typography>{item.name}</Typography>
+                                </CardActionArea>
+                            </Card>
+                        </Grid>
+                    ))}
+                </Grid>
+            )}
+        </>
+    );
+};
+export default GetSubItemsForm;
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/ImageUpload.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/ImageUpload.jsx
@@ -0,0 +1,131 @@
+import { FormControl, FormHelperText, Grid } from "@mui/material";
+import UploadSystem from "@/core/components/UploadSystem";
+import { Controller } from "react-hook-form";
+import React, { useEffect, useState } from "react";
+
+const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null, afterImage = null }) => {
+    const [beforeImg, setBeforeImg] = useState(beforeImage ? beforeImage : null);
+    const [beforeFileType, setBeforeFileType] = useState(beforeImage ? "image/" : null);
+    const [beforeFileName, setBeforeFileName] = useState(null);
+    const [showBeforeImage, setShowBeforeImage] = useState(!beforeImage);
+
+    const [afterImg, setAfterImg] = useState(afterImage ? afterImage : null);
+    const [afterFileType, setAfterFileType] = useState(afterImage ? "image/" : null);
+    const [afterFileName, setAfterFileName] = useState(null);
+    const [showAfterImage, setShowAfterImage] = useState(!afterImage);
+
+    useEffect(() => {
+        if (getValues("before_image")) {
+            setShowBeforeImage(false);
+            setBeforeImg(getValues("before_image"));
+            setBeforeFileType("image/");
+        }
+        if (getValues("after_image")) {
+            setShowAfterImage(false);
+            setAfterImg(getValues("after_image"));
+            setAfterFileType("image/");
+        }
+    }, [getValues]);
+
+    const handleBeforeFileChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setBeforeImg(URL.createObjectURL(uploadedFile));
+            setBeforeFileType(fileType);
+            setBeforeFileName(fileName);
+            setValue("before_image", uploadedFile);
+            setShowBeforeImage(false);
+        }
+    };
+    const handleAfterFileChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setAfterImg(URL.createObjectURL(uploadedFile));
+            setAfterFileType(fileType);
+            setAfterFileName(fileName);
+            setValue("after_image", uploadedFile);
+            setShowAfterImage(false);
+        }
+    };
+    return (
+        <Grid container spacing={2}>
+            <Grid item xs={12} md={6}>
+                <Controller
+                    name="before_image"
+                    control={control}
+                    render={({ field: { value, onChange } }) => {
+                        return (
+                            <FormControl
+                                error={errors.before_image}
+                                sx={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }}
+                            >
+                                <FormHelperText sx={{ fontSize: "large" }} id="before_image">
+                                    عکس قبل از اقدام
+                                </FormHelperText>
+                                <UploadSystem
+                                    selectedImage={beforeImg}
+                                    handleUploadChange={handleBeforeFileChange}
+                                    fileType={beforeFileType}
+                                    fileName={beforeFileName}
+                                    setSelectedImage={setBeforeImg}
+                                    imageSize={[250, 150]}
+                                    setShowAddIcon={setShowBeforeImage}
+                                    showAddIcon={showBeforeImage}
+                                />
+                                <FormHelperText id="before_image">
+                                    {errors.before_image ? errors.before_image.message : null}
+                                </FormHelperText>
+                            </FormControl>
+                        );
+                    }}
+                />
+            </Grid>
+            <Grid item xs={12} md={6}>
+                <Controller
+                    name="after_image"
+                    control={control}
+                    render={({ field: { value, onChange } }) => {
+                        return (
+                            <FormControl
+                                error={errors.before_image}
+                                sx={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                }}
+                            >
+                                <FormHelperText sx={{ fontSize: "large" }} id="before_image">
+                                    عکس بعد از اقدام
+                                </FormHelperText>
+                                <UploadSystem
+                                    selectedImage={afterImg}
+                                    handleUploadChange={handleAfterFileChange}
+                                    fileType={afterFileType}
+                                    fileName={afterFileName}
+                                    setSelectedImage={setAfterImg}
+                                    imageSize={[250, 150]}
+                                    setShowAddIcon={setShowAfterImage}
+                                    showAddIcon={showAfterImage}
+                                />
+                                <FormHelperText id="after_image">
+                                    {errors.after_image ? errors.after_image.message : null}
+                                </FormHelperText>
+                            </FormControl>
+                        );
+                    }}
+                />
+            </Grid>
+        </Grid>
+    );
+};
+export default ImageUpload;
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/PreviousStatesInfo.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/PreviousStatesInfo.jsx
@@ -0,0 +1,43 @@
+import { Box, Chip, Divider, Grid, Typography } from "@mui/material";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
+
+const PreviousStatesInfo = ({ itemsList, subItemsList }) => {
+    return (
+        <Grid container spacing={2} sx={{ alignItems: "center", justifyContent: "space-around" }}>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<InsertDriveFileIcon />}
+                        label={
+                            <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
+                                آیتم انتخاب ‌شده
+                            </Typography>
+                        }
+                    />
+                </Box>
+                <Divider sx={{ flex: 1, mx: 2 }} />
+                <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
+                    {itemsList || "هیچ آیتمی انتخاب نشده است"}
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<FileCopyIcon />}
+                        label={
+                            <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
+                                موضوع مشاهده‌شده
+                            </Typography>
+                        }
+                    />
+                </Box>
+                <Divider sx={{ flex: 1, mx: 2 }} />
+                <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
+                    {subItemsList?.name || "هیچ موضوعی انتخاب نشده است"}
+                </Typography>
+            </Grid>
+        </Grid>
+    );
+};
+export default PreviousStatesInfo;
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/index.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/index.jsx
@@ -0,0 +1,12 @@
+"use client";
+import { Dialog } from "@mui/material";
+import CreateFormContent from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/CreateFormContent";
+
+const OperatorCreateForm = ({ open, setOpen, mutate, rowId }) => {
+    return (
+        <Dialog open={open} fullWidth maxWidth="sm">
+            <CreateFormContent setOpen={setOpen} mutate={mutate} rowId={rowId} />
+        </Dialog>
+    );
+};
+export default OperatorCreateForm;
--- a/src/components/dashboard/roadItems/operator/Actions/Create/index.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/index.jsx
@@ -0,0 +1,38 @@
+"use client";
+import { Button, IconButton, useMediaQuery } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useState } from "react";
+import { AddCircle } from "@mui/icons-material";
+import OperatorCreateForm from "./Forms";
+
+const OperatorCreate = ({ mutate }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="ثبت فعالیت" color="primary" onClick={handleOpen}>
+                    <AddCircle sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    size={"small"}
+                    variant="contained"
+                    color="primary"
+                    startIcon={<AddCircle />}
+                    onClick={handleOpen}
+                >
+                    ثبت فعالیت
+                </Button>
+            )}
+            {open && <OperatorCreateForm open={open} setOpen={setOpen} mutate={mutate} />}
+        </>
+    );
+};
+export default OperatorCreate;
--- a/src/components/dashboard/roadItems/operator/ExcelPrint/index.jsx
+++ b/src/components/dashboard/roadItems/operator/ExcelPrint/index.jsx
@@ -0,0 +1,71 @@
+"use client";
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import { useMemo, useState } from "react";
+import moment from "jalali-moment";
+import FileSaver from "file-saver";
+import DescriptionIcon from "@mui/icons-material/Description";
+import useRequest from "@/lib/hooks/useRequest";
+import { EXPORT_ROAD_ITEMS_OPERATOR_LIST } from "@/core/utils/routes";
+import { useTheme } from "@emotion/react";
+
+const PrintExcel = ({ table, filterData }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const [loading, setLoading] = useState(false);
+    const requestServer = useRequest({ notification: { success: true } });
+    const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
+        if (filter.value) {
+            // Check if there's an active filter
+            acc.push({ id: key, value: filter.value });
+        }
+        return acc;
+    }, []);
+
+    const filterParams = useMemo(() => {
+        const params = new URLSearchParams();
+        activeFilters.length > 0 &&
+            activeFilters.map((filter, index) => {
+                params.set(`${filter.id}`, filter.value);
+            });
+        return params;
+    }, [activeFilters]);
+
+    const clickHandler = () => {
+        setLoading(true);
+        requestServer(`${EXPORT_ROAD_ITEMS_OPERATOR_LIST}?${filterParams}`, "get", {
+            requestOptions: { responseType: "blob" },
+        })
+            .then((response) => {
+                const filename = `خروجی کارتابل فعالیت روزانه تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
+                FileSaver.saveAs(response.data, filename);
+            })
+            .catch(() => {})
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="خروجی اکسل" color="primary" onClick={clickHandler}>
+                    <DescriptionIcon sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    disabled={loading}
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
+                    onClick={clickHandler}
+                >
+                    خروجی اکسل
+                </Button>
+            )}
+        </>
+    );
+};
+
+export default PrintExcel;
--- a/src/components/dashboard/roadItems/operator/OperatorList.jsx
+++ b/src/components/dashboard/roadItems/operator/OperatorList.jsx
@@ -0,0 +1,220 @@
+"use client";
+import { useMemo } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import Toolbar from "./Toolbar";
+import { GET_ROAD_ITEMS_OPERATOR_LIST } from "@/core/utils/routes";
+import moment from "jalali-moment";
+import RowActions from "./RowActions";
+import LocationForm from "./RowActions/LocationForm";
+import ImageDialog from "./RowActions/ImageForm";
+import RahdaranDialog from "./RowActions/RahdaranForm";
+
+const OperatorList = () => {
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "item_fa",
+                header: "آیتم فعالیت",
+                id: "item_fa",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "sub_item_fa",
+                header: "موضوع مشاهده شده", // Observed Subject
+                id: "sub_item_fa",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "value",
+                header: "مقدار", // Value
+                id: "value",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                Cell: ({ renderedCellValue, row }) => {
+                    return (
+                        <Stack direction="row" spacing={1}>
+                            <Typography variant="body2">{row.original.sub_item_data}</Typography>
+                            <Typography variant="body2">{`(${row.original.unit_fa})`}</Typography>
+                        </Stack>
+                    );
+                },
+            },
+            {
+                accessorKey: "files",
+                header: "تصاویر", // Images
+                id: "files",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "array",
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue }) => {
+                    if (renderedCellValue.length > 0) {
+                        return (
+                            <Stack alignItems={"center"} justifyContent={"center"}>
+                                <ImageDialog images={renderedCellValue} />
+                            </Stack>
+                        );
+                    }
+                    return (
+                        <Typography textAlign={"center"} variant="body2">
+                            بدون تصویر
+                        </Typography>
+                    );
+                },
+            },
+            {
+                accessorKey: "location",
+                header: "موقعیت", // Location
+                id: "location",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "array",
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue, row }) => {
+                    return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <LocationForm
+                                start_lat={row.original.start_lat}
+                                start_lng={row.original.start_lng}
+                                end_lat={row.original.end_lat}
+                                end_lng={row.original.end_lng}
+                            />
+                        </Stack>
+                    );
+                },
+            },
+            {
+                accessorKey: "cmms_machine_code",
+                header: "کد خودرو", // Car ID
+                id: "cmms_machine_code",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                enableSorting: false,
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "rahdaran",
+                header: "راهداران",
+                id: "rahdaran",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "array",
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue }) => {
+                    if (renderedCellValue) {
+                        return (
+                            <Stack alignItems={"center"} justifyContent={"center"}>
+                                <RahdaranDialog rahdarLists={renderedCellValue} />
+                            </Stack>
+                        );
+                    }
+                    return <Typography variant="body2">بدون شخص</Typography>;
+                },
+            },
+            {
+                accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                header: "تاریخ ثبت", // Register Date
+                id: "created_at",
+                enableColumnFilter: true,
+                datatype: "date",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorFn: (row) => moment(row.activity_date_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                header: "تاریخ فعالیت", // Start Date
+                id: "activity_date_time",
+                enableColumnFilter: true,
+                datatype: "date",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "status_fa",
+                header: "وضعیت", // Status
+                id: "status_fa",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: true,
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "supervisor_description",
+                header: "توضیحات", // Description
+                id: "supervisor_description",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+        ],
+        []
+    );
+
+    return (
+        <>
+            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    columns={columns}
+                    sorting={[
+                        { id: "status_fa", desc: true },
+                        { id: "id", desc: true },
+                    ]}
+                    table_url={GET_ROAD_ITEMS_OPERATOR_LIST}
+                    page_name={"operator"}
+                    table_name={"operatorList"}
+                    TableToolbar={Toolbar}
+                    enableRowActions
+                    positionActionsColumn={"last"}
+                    RowActions={RowActions}
+                />
+            </Box>
+        </>
+    );
+};
+export default OperatorList;
--- a/src/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormContent.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormContent.jsx
@@ -0,0 +1,211 @@
+import { Button, DialogActions, DialogContent, Stack, TextField } from "@mui/material";
+import useRequest from "@/lib/hooks/useRequest";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { array, mixed, object, string } from "yup";
+import StyledForm from "@/core/components/StyledForm";
+import React from "react";
+import ImageUpload from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/ImageUpload";
+import MapInfoTwoMarker from "@/core/components/MapInfoTwoMarker";
+import MapInfoOneMarker from "@/core/components/MapInfoOneMarker";
+import { UPDATE_ROAD_ITEMS } from "@/core/utils/routes";
+import CarCode from "@/core/components/CarCode";
+import RahdarCode from "@/core/components/RahdarCode";
+import useRoadItemGetISubtems from "@/lib/hooks/useRoadItemGetISubtems";
+
+const validationSchema = object({
+    amount: string().required("وارد کردن مقدار الزامیست!"),
+    cmms_machine_id: object().required("وارد کردن کد خودرو الزامیست!"),
+    rahdaran_id: array().required("وارد کردن کد راهداران الزامیست!").min(1, "حداقل یک کد راهدار باید وارد شود!"),
+    before_image: mixed()
+        .nullable()
+        .test("before-image-required", "لطفا عکس قبل از اقدام را بارگذاری کنید!", function (value) {
+            const { subItem } = this.options.context;
+            const needsImage = subItem?.needs_image === 1;
+            if (needsImage) {
+                return !!value;
+            }
+            return true;
+        }),
+    after_image: mixed()
+        .nullable()
+        .test("after-image-required", "لطفا عکس بعد از اقدام را بارگذاری کنید!", function (value) {
+            const { subItem } = this.options.context;
+            const needsImage = subItem?.needs_image === 1;
+            if (needsImage) {
+                return !!value;
+            }
+            return true;
+        }),
+    start_point: mixed()
+        .test("start-point-required", "لطفاً نقطه شروع را مشخص کنید!", function (value) {
+            return !!value; // چک می‌کند که مقدار موجود است
+        })
+        .required("لطفاً نقطه شروع را مشخص کنید!"),
+    end_point: mixed().test("end-point-required", "لطفاً نقطه پایان را مشخص کنید!", function (value) {
+        const { subItem } = this.options.context;
+        const needsEndPoint = subItem?.needs_end_point === 1;
+        if (needsEndPoint) {
+            return !!value; // چک می‌کند که مقدار موجود است
+        }
+        return true;
+    }),
+});
+
+const EditFormContent = ({ row, mutate, setOpenEditDialog, rowId, subItem }) => {
+    const defaultValues = {
+        before_image: row.original?.files[0]?.full_path_for_fast_react || null,
+        after_image: row.original?.files[1]?.full_path_for_fast_react || null,
+        amount: row.original.sub_item_data || null,
+        start_point: { lat: row.original.start_lat || "", lng: row.original.start_lng || "" },
+        end_point: { lat: row.original.end_lat || "", lng: row.original.end_lng || "" },
+        cmms_machine_id: row.original.cmms_machine,
+        rahdaran_id: row.original.rahdaran || null,
+    };
+    const requestServer = useRequest();
+
+    const {
+        control,
+        getValues,
+        watch,
+        register,
+        handleSubmit,
+        setValue,
+        formState: { errors, isSubmitting },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+        context: { subItem },
+    });
+
+    const onSubmit = async (data) => {
+        let endPoint;
+        let startPoint = `${data.start_point.lat},${data.start_point.lng}`;
+        subItem.needs_end_point === 1 && (endPoint = `${data.end_point.lat},${data.end_point.lng}`);
+        const formData = new FormData();
+        subItem.needs_image === 1 &&
+            data.before_image !== defaultValues.before_image &&
+            formData.append("before_image", data.before_image);
+        subItem.needs_image === 1 &&
+            data.after_image !== defaultValues.after_image &&
+            formData.append("after_image", data.after_image);
+        formData.append("amount", data.amount);
+        formData.append("cmms_machine_id", data.cmms_machine_id.id);
+        data.rahdaran_id.map((rahdar, index) => formData.append(`rahdaran_id[${index}]`, rahdar.id));
+        formData.append("start_point", startPoint);
+        subItem.needs_end_point === 1 && formData.append("end_point", endPoint);
+
+        requestServer(`${UPDATE_ROAD_ITEMS}/${rowId}`, "post", {
+            notification: { success: true },
+            data: formData,
+        })
+            .then((res) => {
+                mutate();
+                setOpenEditDialog(false);
+            })
+            .catch((err) => {});
+    };
+    return (
+        <>
+            <StyledForm onSubmit={handleSubmit(onSubmit)}>
+                <DialogContent sx={{ overflowY: "auto", maxHeight: "70vh" }}>
+                    <Stack spacing={2}>
+                        <Stack>
+                            {subItem.needs_image === 1 ? (
+                                <ImageUpload
+                                    afterImage={row.original?.files[0]?.full_path_for_fast_react}
+                                    beforeImage={row.original?.files[1]?.full_path_for_fast_react}
+                                    getValues={getValues}
+                                    setValue={setValue}
+                                    control={control}
+                                    errors={errors}
+                                />
+                            ) : null}
+                        </Stack>
+                        <Stack>
+                            <TextField
+                                {...register("amount")}
+                                label={`مقدار (${row.original.unit_fa})`}
+                                type="text"
+                                size={"small"}
+                                inputProps={{
+                                    inputMode: "number",
+                                    min: 0,
+                                    pattern: "[0-9]*",
+                                }}
+                                onChange={(event) => {
+                                    if (!isNaN(event.target.value)) {
+                                        setValue("amount", event.target.value);
+                                    } else {
+                                        setValue("amount", watch("amount"));
+                                    }
+                                }}
+                                error={!!errors.amount}
+                                helperText={errors.amount ? errors.amount.message : null}
+                                variant="outlined"
+                                fullWidth
+                            />
+                        </Stack>
+                        <Stack>
+                            <Controller
+                                control={control}
+                                render={({ field, fieldState: { error } }) => {
+                                    return (
+                                        <CarCode
+                                            carCode={field.value || null}
+                                            setCarCode={(value) => field.onChange(value || "")}
+                                            inputValueDefault={row.original.cmms_machine_code}
+                                            error={error} // اگر خطا وجود داشته باشد
+                                        />
+                                    );
+                                }}
+                                name={"cmms_machine_id"}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Controller
+                                control={control}
+                                render={({ field, fieldState: { error } }) => {
+                                    return (
+                                        <RahdarCode
+                                            rahdarsCode={field.value || []}
+                                            setRahdarsCode={(value) => field.onChange(value || [])}
+                                            error={error}
+                                        />
+                                    );
+                                }}
+                                name={"rahdaran_id"}
+                            />
+                        </Stack>
+                        <Stack>
+                            {subItem.needs_end_point === 1 ? (
+                                <MapInfoTwoMarker
+                                    StartPoint={getValues("start_point")}
+                                    EndPoint={getValues("end_point")}
+                                    setValue={setValue}
+                                    errors={errors}
+                                />
+                            ) : (
+                                <MapInfoOneMarker
+                                    StartPoint={getValues("start_point")}
+                                    setValue={setValue}
+                                    errors={errors}
+                                />
+                            )}
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenEditDialog(false)} variant="outlined" color="primary" autoFocus>
+                        بستن
+                    </Button>
+                    <Button disabled={isSubmitting} type={"submit"} variant="contained" color="primary">
+                        {isSubmitting ? "در حال ویرایش" : "ویرایش"}
+                    </Button>
+                </DialogActions>
+            </StyledForm>
+        </>
+    );
+};
+export default EditFormContent;
--- a/src/components/dashboard/roadItems/operator/RowActions/EditForm/index.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/EditForm/index.jsx
@@ -0,0 +1,54 @@
+import { Dialog, DialogTitle, IconButton, LinearProgress, Tooltip, Typography } from "@mui/material";
+import { useState } from "react";
+import BorderColorIcon from "@mui/icons-material/BorderColor";
+import EditFormContent from "@/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormContent";
+import useRoadItemGetISubtems from "@/lib/hooks/useRoadItemGetISubtems";
+
+const EditForm = ({ row, mutate, rowId }) => {
+    const [openEditDialog, setOpenEditDialog] = useState(false);
+    const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetISubtems(row.original?.item);
+    const subItem = subItemsList.find((subItem) => subItem.sub_item === row.original?.sub_item);
+    return (
+        <>
+            <Tooltip title="ویرایش اطلاعات" arrow placement="right">
+                <IconButton
+                    color="primary"
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    onClick={() => {
+                        setOpenEditDialog(true);
+                    }}
+                >
+                    <BorderColorIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                maxWidth="sm"
+                fullWidth
+                open={openEditDialog}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+            >
+                <DialogTitle>ویرایش اطلاعات</DialogTitle>
+                {errorSubItemsList ? (
+                    <Typography color={"error"} textAlign={"center"}>
+                        خطا در دریافت اطلاعات!!!
+                    </Typography>
+                ) : loadingSubItemsList ? (
+                    <LinearProgress />
+                ) : (
+                    <EditFormContent
+                        subItem={subItem}
+                        rowId={rowId}
+                        row={row}
+                        mutate={mutate}
+                        setOpenEditDialog={setOpenEditDialog}
+                    />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default EditForm;
--- a/src/components/dashboard/roadItems/operator/RowActions/ImageForm/ImageFormContent.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/ImageForm/ImageFormContent.jsx
@@ -0,0 +1,41 @@
+import { DialogContent, Paper, Stack, Typography, useTheme } from "@mui/material";
+
+const ImageFormContent = ({ image, title }) => {
+    const theme = useTheme();
+    return (
+        <DialogContent>
+            <Paper
+                elevation={3}
+                sx={{
+                    padding: 2,
+                    borderRadius: "12px",
+                    border: `1px solid ${theme.palette.primary.main}`,
+                }}
+            >
+                <Stack spacing={2} alignItems="center" justifyContent="center">
+                    <Typography
+                        variant="h6"
+                        sx={{
+                            color: theme.palette.primary.dark,
+                            fontWeight: "bold",
+                        }}
+                    >
+                        {title}
+                    </Typography>
+                    <img
+                        src={image}
+                        alt="Image"
+                        style={{
+                            maxWidth: "100%",
+                            maxHeight: "200px",
+                            marginBottom: "16px",
+                            borderRadius: "12px",
+                            border: `1px solid ${theme.palette.divider}`,
+                        }}
+                    />
+                </Stack>
+            </Paper>
+        </DialogContent>
+    );
+};
+export default ImageFormContent;
--- a/src/components/dashboard/roadItems/operator/RowActions/ImageForm/index.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/ImageForm/index.jsx
@@ -0,0 +1,41 @@
+import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
+import ImageFormContent from "./ImageFormContent";
+
+const ImageDialog = ({ images }) => {
+    const [openImageDialog, setOpenImageDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="تصاویر">
+                <IconButton color="primary" onClick={() => setOpenImageDialog(true)}>
+                    <PhotoLibraryIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openImageDialog}
+                onClose={() => setOpenImageDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>تصاویر</DialogTitle>
+                <ImageFormContent image={images[1]?.full_path_for_fast_react} title={"قبل از اقدام"} />
+                <ImageFormContent image={images[0]?.full_path_for_fast_react} title={"بعد از اقدام"} />
+                <DialogActions>
+                    <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary" autoFocus>
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+
+export default ImageDialog;
--- a/src/components/dashboard/roadItems/operator/RowActions/LocationForm/LocationFormContent.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/LocationForm/LocationFormContent.jsx
@@ -0,0 +1,36 @@
+"use client";
+import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
+import React from "react";
+import dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import ShowLocationMarker from "@/core/components/ShowLocationMarker";
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+
+const LocationFormContent = ({ setOpenLocationDialog, start_lat, start_lng, end_lat, end_lng }) => {
+    return (
+        <>
+            <DialogContent>
+                <Box sx={{ width: "400px", height: "400px" }}>
+                    <MapLayer>
+                        <ShowLocationMarker
+                            start_lat={start_lat}
+                            start_lng={start_lng}
+                            end_lat={end_lat}
+                            end_lng={end_lng}
+                        />
+                    </MapLayer>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
+                <Button onClick={() => setOpenLocationDialog(false)} variant="contained" color="error">
+                    بستن
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+
+export default LocationFormContent;
--- a/src/components/dashboard/roadItems/operator/RowActions/LocationForm/index.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/LocationForm/index.jsx
@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
+import ExploreIcon from "@mui/icons-material/Explore";
+import LocationFormContent from "./LocationFormContent";
+const LocationForm = ({ start_lat, start_lng, end_lat, end_lng }) => {
+    const [openLocationDialog, setOpenLocationDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="موقعیت">
+                <IconButton color="primary" onClick={() => setOpenLocationDialog(true)}>
+                    <ExploreIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openLocationDialog}
+                onClose={() => setOpenLocationDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle>موقعیت</DialogTitle>
+                <LocationFormContent
+                    start_lat={start_lat}
+                    start_lng={start_lng}
+                    end_lat={end_lat}
+                    end_lng={end_lng}
+                    setOpenLocationDialog={setOpenLocationDialog}
+                />
+            </Dialog>
+        </>
+    );
+};
+export default LocationForm;
--- a/src/components/dashboard/roadItems/operator/RowActions/RahdaranForm/RahdaranContent.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/RahdaranForm/RahdaranContent.jsx
@@ -0,0 +1,48 @@
+import { DialogContent, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+
+const RahdaranContent = ({ rahdarLists }) => {
+    return (
+        <>
+            <DialogContent>
+                <Paper
+                    elevation={0}
+                    sx={{
+                        width: "100%",
+                        overflow: "hidden",
+                        "*::-webkit-scrollbar": {
+                            width: "0.5em",
+                        },
+                        "*::-webkit-scrollbar-thumb": {
+                            backgroundColor: "primary.main",
+                        },
+                    }}
+                >
+                    <TableContainer sx={{ maxHeight: 600 }}>
+                        <Table stickyHeader sx={{ minWidth: 800 }}>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell>کد راهدار</TableCell>
+                                    <TableCell>نام</TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {rahdarLists.map((rahdar) => {
+                                    return (
+                                        <TableRow
+                                            key={rahdar.id}
+                                            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                                        >
+                                            <TableCell>{rahdar.code}</TableCell>
+                                            <TableCell>{rahdar.name}</TableCell>
+                                        </TableRow>
+                                    );
+                                })}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                </Paper>
+            </DialogContent>
+        </>
+    );
+};
+export default RahdaranContent;
--- a/src/components/dashboard/roadItems/operator/RowActions/RahdaranForm/index.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/RahdaranForm/index.jsx
@@ -0,0 +1,38 @@
+import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import GroupsIcon from "@mui/icons-material/Groups";
+import { useState } from "react";
+import RahdaranContent from "./RahdaranContent";
+
+const RahdaranDialog = ({ rahdarLists }) => {
+    const [openRahdaranDialog, setOpenRahdaranDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="راهداران">
+                <IconButton color="primary" onClick={() => setOpenRahdaranDialog(true)}>
+                    <GroupsIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openRahdaranDialog}
+                onClose={() => setOpenRahdaranDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>لیست راهداران</DialogTitle>
+                <RahdaranContent rahdarLists={rahdarLists} />
+                <DialogActions>
+                    <Button onClick={() => setOpenRahdaranDialog(false)} variant="outlined" color="secondary" autoFocus>
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default RahdaranDialog;
--- a/src/components/dashboard/roadItems/operator/RowActions/index.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/index.jsx
@@ -0,0 +1,11 @@
+import { Box } from "@mui/material";
+import EditForm from "./EditForm";
+
+const RowActions = ({ row, mutate }) => {
+    return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+            {row.original.status === 2 && <EditForm rowId={row.getValue("id")} row={row} mutate={mutate} />}
+        </Box>
+    );
+};
+export default RowActions;
--- a/src/components/dashboard/roadItems/operator/Toolbar.jsx
+++ b/src/components/dashboard/roadItems/operator/Toolbar.jsx
@@ -0,0 +1,13 @@
+import PrintExcel from "./ExcelPrint";
+import OperatorCreate from "./Actions/Create";
+import { Stack } from "@mui/material";
+
+const Toolbar = ({ table, filterData, mutate }) => {
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <PrintExcel table={table} filterData={filterData} />
+            <OperatorCreate mutate={mutate} />
+        </Stack>
+    );
+};
+export default Toolbar;
--- a/src/components/dashboard/roadItems/operator/index.jsx
+++ b/src/components/dashboard/roadItems/operator/index.jsx
@@ -0,0 +1,14 @@
+"use client";
+import PageTitle from "@/core/components/PageTitle";
+import { Stack } from "@mui/material";
+import OperatorList from "./OperatorList";
+
+const OperatorPage = () => {
+    return (
+        <Stack spacing={1}>
+            <PageTitle title={"عملیات"} />
+            <OperatorList />
+        </Stack>
+    );
+};
+export default OperatorPage;
--- a/src/components/dashboard/roadItems/supervisor/ExcelPrint/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/ExcelPrint/index.jsx
@@ -0,0 +1,70 @@
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import { useMemo, useState } from "react";
+import moment from "jalali-moment";
+import FileSaver from "file-saver";
+import DescriptionIcon from "@mui/icons-material/Description";
+import useRequest from "@/lib/hooks/useRequest";
+import { EXPORT_ROAD_ITEMS_SUPERVISOR_LIST } from "@/core/utils/routes";
+import { useTheme } from "@emotion/react";
+
+const PrintExcel = ({ table, filterData }) => {
+    const [loading, setLoading] = useState(false);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const requestServer = useRequest();
+    const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
+        if (filter.value) {
+            // Check if there's an active filter
+            acc.push({ id: key, value: filter.value });
+        }
+        return acc;
+    }, []);
+
+    const filterParams = useMemo(() => {
+        const params = new URLSearchParams();
+        activeFilters.length > 0 &&
+            activeFilters.map((filter, index) => {
+                params.set(`${filter.id}`, filter.value);
+            });
+        return params;
+    }, [activeFilters]);
+
+    const clickHandler = () => {
+        setLoading(true);
+        requestServer(`${EXPORT_ROAD_ITEMS_SUPERVISOR_LIST}?${filterParams}`, "get", {
+            requestOptions: { responseType: "blob" },
+        })
+            .then((response) => {
+                const filename = `خروجی کارتابل فعالیت روزانه تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
+                FileSaver.saveAs(response.data, filename);
+            })
+            .catch(() => {})
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="خروجی اکسل" color="primary" onClick={clickHandler}>
+                    <DescriptionIcon sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    disabled={loading}
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
+                    onClick={clickHandler}
+                >
+                    خروجی اکسل
+                </Button>
+            )}
+        </>
+    );
+};
+
+export default PrintExcel;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/ConfirmForm/ConfirmContent.jsx
@@ -0,0 +1,69 @@
+import { Button, DialogActions, DialogContent, Stack, TextField } from "@mui/material";
+import { useForm } from "react-hook-form";
+import useRequest from "@/lib/hooks/useRequest";
+import { VERIFY_BY_SUPERVISOR } from "@/core/utils/routes";
+
+const ConfirmContent = ({ rowId, mutate, setOpenConfirmDialog }) => {
+    const requestServer = useRequest({ notification: { success: true } });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { isSubmitting },
+        reset,
+    } = useForm({
+        defaultValues: {
+            description: "",
+        },
+    });
+
+    const onSubmit = async (data) => {
+        const formData = new FormData();
+        data.description !== "" && formData.append("description", data.description);
+        formData.append("verify", 1);
+        requestServer(`${VERIFY_BY_SUPERVISOR}/${rowId}`, "post", {
+            data: formData,
+        })
+            .then(() => {
+                mutate();
+                setOpenConfirmDialog(false);
+            })
+            .catch(() => {});
+    };
+
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            {...register("description")}
+                            multiline
+                            rows={8}
+                            label="توضیحات کارشناس"
+                            fullWidth
+                            variant="outlined"
+                            sx={{ mt: 1 }}
+                        />
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    onClick={() => setOpenConfirmDialog(false)}
+                    variant="outlined"
+                    color="secondary"
+                    disabled={isSubmitting}
+                    autoFocus
+                >
+                    بستن
+                </Button>
+                <Button onClick={handleSubmit(onSubmit)} variant="contained" color="primary" disabled={isSubmitting}>
+                    {isSubmitting ? "درحال ارسال اطلاعات..." : "ثبت"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+
+export default ConfirmContent;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/ConfirmForm/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/ConfirmForm/index.jsx
@@ -0,0 +1,29 @@
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import ConfirmContent from "./ConfirmContent";
+import DoneIcon from "@mui/icons-material/Done";
+const ConfirmForm = ({ rowId, mutate }) => {
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="تایید">
+                <IconButton color="primary" onClick={() => setOpenConfirmDialog(true)}>
+                    <DoneIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openConfirmDialog}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+            >
+                <DialogTitle>تایید</DialogTitle>
+                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} />
+            </Dialog>
+        </>
+    );
+};
+export default ConfirmForm;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/DeleteForm/DeleteContent.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/DeleteForm/DeleteContent.jsx
@@ -0,0 +1,42 @@
+import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
+import React, { useState } from "react";
+import useRequest from "@/lib/hooks/useRequest";
+import { DELETE_BY_SUPERVISOR } from "@/core/utils/routes";
+
+const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
+    const [submitting, setSubmitting] = useState(false);
+    const requestServer = useRequest({ notification: { success: true } });
+    const handleClick = () => {
+        setSubmitting(true);
+        requestServer(`${DELETE_BY_SUPERVISOR}/${rowId}`, "post")
+            .then(() => {
+                mutate();
+                setOpenDeleteDialog(false);
+                setSubmitting(false);
+            })
+            .catch(() => {
+                setSubmitting(false);
+            });
+    };
+    return (
+        <>
+            <DialogContent>
+                <Stack alignItems="center" spacing={2}>
+                    <Typography textAlign="center" fontWeight="bold" fontSize="16px" mt={2}>
+                        آیا از حذف فعالیت اطمینان دارید؟
+                    </Typography>
+                </Stack>
+            </DialogContent>
+            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
+                <Button onClick={() => setOpenDeleteDialog(false)} variant="contained" color="error">
+                    خیر !
+                </Button>
+                <Button onClick={handleClick} variant="contained" color="primary" disabled={submitting}>
+                    {submitting ? "درحال ارسال اطلاعات..." : "بله اطمینان دارم"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+
+export default DeleteContent;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/DeleteForm/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/DeleteForm/index.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DeleteContent from "./DeleteContent";
+import useRequest from "@/lib/hooks/useRequest";
+const DeleteForm = ({ rowId, mutate }) => {
+    const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="حذف">
+                <IconButton color="error" onClick={() => setOpenDeleteDialog(true)}>
+                    <DeleteIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openDeleteDialog}
+                onClose={() => setOpenDeleteDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle>حذف فعالیت</DialogTitle>
+                <DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
+            </Dialog>
+        </>
+    );
+};
+export default DeleteForm;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/ImageForm/ImageFormContent.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/ImageForm/ImageFormContent.jsx
@@ -0,0 +1,41 @@
+import { DialogContent, Paper, Stack, Typography, useTheme } from "@mui/material";
+
+const ImageFormContent = ({ image, title }) => {
+    const theme = useTheme();
+    return (
+        <DialogContent>
+            <Paper
+                elevation={3}
+                sx={{
+                    padding: 2,
+                    borderRadius: "12px",
+                    border: `1px solid ${theme.palette.primary.main}`,
+                }}
+            >
+                <Stack spacing={2} alignItems="center" justifyContent="center">
+                    <Typography
+                        variant="h6"
+                        sx={{
+                            color: theme.palette.primary.dark,
+                            fontWeight: "bold",
+                        }}
+                    >
+                        {title}
+                    </Typography>
+                    <img
+                        src={image}
+                        alt="Image"
+                        style={{
+                            maxWidth: "100%",
+                            maxHeight: "200px",
+                            marginBottom: "16px",
+                            borderRadius: "12px",
+                            border: `1px solid ${theme.palette.divider}`,
+                        }}
+                    />
+                </Stack>
+            </Paper>
+        </DialogContent>
+    );
+};
+export default ImageFormContent;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/ImageForm/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/ImageForm/index.jsx
@@ -0,0 +1,41 @@
+import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
+import ImageFormContent from "./ImageFormContent";
+
+const ImageDialog = ({ images }) => {
+    const [openImageDialog, setOpenImageDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="تصاویر">
+                <IconButton color="primary" onClick={() => setOpenImageDialog(true)}>
+                    <PhotoLibraryIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openImageDialog}
+                onClose={() => setOpenImageDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle>تصاویر</DialogTitle>
+                <ImageFormContent image={images[1].full_path_for_fast_react} title={"قبل از اقدام"} />
+                <ImageFormContent image={images[0].full_path_for_fast_react} title={"بعد از اقدام"} />
+                <DialogActions>
+                    <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary" autoFocus>
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+
+export default ImageDialog;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/LocationForm/LocationFormContent.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/LocationForm/LocationFormContent.jsx
@@ -0,0 +1,36 @@
+"use client";
+import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
+import React from "react";
+import dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import ShowLocationMarker from "@/core/components/ShowLocationMarker";
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+
+const LocationFormContent = ({ setOpenLocationDialog, start_lat, start_lng, end_lat, end_lng }) => {
+    return (
+        <>
+            <DialogContent>
+                <Box sx={{ width: "400px", height: "400px" }}>
+                    <MapLayer>
+                        <ShowLocationMarker
+                            start_lat={start_lat}
+                            start_lng={start_lng}
+                            end_lat={end_lat}
+                            end_lng={end_lng}
+                        />
+                    </MapLayer>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
+                <Button onClick={() => setOpenLocationDialog(false)} variant="contained" color="error">
+                    بستن
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+
+export default LocationFormContent;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/LocationForm/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/LocationForm/index.jsx
@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
+import ExploreIcon from "@mui/icons-material/Explore";
+import LocationFormContent from "./LocationFormContent";
+const LocationForm = ({ start_lat, start_lng, end_lat, end_lng }) => {
+    const [openLocationDialog, setOpenLocationDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="موقعیت">
+                <IconButton color="primary" onClick={() => setOpenLocationDialog(true)}>
+                    <ExploreIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openLocationDialog}
+                onClose={() => setOpenLocationDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle>موقعیت</DialogTitle>
+                <LocationFormContent
+                    start_lat={start_lat}
+                    start_lng={start_lng}
+                    end_lat={end_lat}
+                    end_lng={end_lng}
+                    setOpenLocationDialog={setOpenLocationDialog}
+                />
+            </Dialog>
+        </>
+    );
+};
+export default LocationForm;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/RahdaranForm/RahdaranContent.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/RahdaranForm/RahdaranContent.jsx
@@ -0,0 +1,48 @@
+import { DialogContent, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+
+const RahdaranContent = ({ rahdarLists }) => {
+    return (
+        <>
+            <DialogContent>
+                <Paper
+                    elevation={0}
+                    sx={{
+                        width: "100%",
+                        overflow: "hidden",
+                        "*::-webkit-scrollbar": {
+                            width: "0.5em",
+                        },
+                        "*::-webkit-scrollbar-thumb": {
+                            backgroundColor: "primary.main",
+                        },
+                    }}
+                >
+                    <TableContainer sx={{ maxHeight: 600 }}>
+                        <Table stickyHeader sx={{ minWidth: 800 }}>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell>کد راهدار</TableCell>
+                                    <TableCell>نام</TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {rahdarLists.map((rahdar) => {
+                                    return (
+                                        <TableRow
+                                            key={rahdar.id}
+                                            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                                        >
+                                            <TableCell>{rahdar.code}</TableCell>
+                                            <TableCell>{rahdar.name}</TableCell>
+                                        </TableRow>
+                                    );
+                                })}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                </Paper>
+            </DialogContent>
+        </>
+    );
+};
+export default RahdaranContent;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/RahdaranForm/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/RahdaranForm/index.jsx
@@ -0,0 +1,38 @@
+import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import GroupsIcon from "@mui/icons-material/Groups";
+import { useState } from "react";
+import RahdaranContent from "./RahdaranContent";
+
+const RahdaranDialog = ({ rahdarLists }) => {
+    const [openRahdaranDialog, setOpenRahdaranDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="راهداران">
+                <IconButton color="primary" onClick={() => setOpenRahdaranDialog(true)}>
+                    <GroupsIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openRahdaranDialog}
+                onClose={() => setOpenRahdaranDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>لیست راهداران</DialogTitle>
+                <RahdaranContent rahdarLists={rahdarLists} />
+                <DialogActions>
+                    <Button onClick={() => setOpenRahdaranDialog(false)} variant="outlined" color="secondary" autoFocus>
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default RahdaranDialog;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/RejectForm/RejectContent.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/RejectForm/RejectContent.jsx
@@ -0,0 +1,81 @@
+import { Button, DialogActions, DialogContent, Stack, TextField } from "@mui/material";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as Yup from "yup";
+import useRequest from "@/lib/hooks/useRequest";
+import { REJECT_BY_SUPERVISOR } from "@/core/utils/routes";
+
+const RejectContent = ({ rowId, mutate, setOpenRejectDialog }) => {
+    const requestServer = useRequest({ notification: { success: true } });
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required("توضیحات الزامیست!!!"),
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors, isSubmitting },
+        reset,
+    } = useForm({
+        defaultValues: {
+            description: "",
+        },
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+    });
+
+    const onSubmit = async (data) => {
+        const formData = new FormData();
+        formData.append("description", data.description);
+        formData.append("verify", 2);
+        requestServer(`${REJECT_BY_SUPERVISOR}/${rowId}`, "post", {
+            data: formData,
+        })
+            .then(() => {
+                mutate();
+                setOpenRejectDialog(false);
+            })
+            .catch(() => {})
+            .finally(() => {
+                reset();
+            });
+    };
+
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            {...register("description")}
+                            multiline
+                            rows={8}
+                            label="توضیحات کارشناس"
+                            error={!!errors.description}
+                            helperText={errors.description?.message}
+                            fullWidth
+                            variant="outlined"
+                            sx={{ mt: 1 }}
+                        />
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    onClick={() => setOpenRejectDialog(false)}
+                    variant="outlined"
+                    color="secondary"
+                    disabled={isSubmitting}
+                    autoFocus
+                >
+                    بستن
+                </Button>
+                <Button onClick={handleSubmit(onSubmit)} variant="contained" color="primary" disabled={isSubmitting}>
+                    {isSubmitting ? "درحال ارسال اطلاعات..." : "عدم تایید"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default RejectContent;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/RejectForm/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/RejectForm/index.jsx
@@ -0,0 +1,29 @@
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import RejectContent from "./RejectContent";
+import ClearIcon from "@mui/icons-material/Clear";
+const RejectForm = ({ rowId, mutate }) => {
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="عدم تایید">
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ClearIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openRejectDialog}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+            >
+                <DialogTitle>عدم تایید</DialogTitle>
+                <RejectContent mutate={mutate} rowId={rowId} setOpenRejectDialog={setOpenRejectDialog} />
+            </Dialog>
+        </>
+    );
+};
+export default RejectForm;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/RestoreForm/RestoreContent.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/RestoreForm/RestoreContent.jsx
@@ -0,0 +1,42 @@
+import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
+import React, { useState } from "react";
+import useRequest from "@/lib/hooks/useRequest";
+import { RESTORE_BY_SUPERVISOR } from "@/core/utils/routes";
+
+const RestoreContent = ({ rowId, mutate, setOpenRestoreDialog }) => {
+    const [submitting, setSubmitting] = useState(false);
+    const requestServer = useRequest({ notification: { success: true } });
+    const handleClick = () => {
+        setSubmitting(true);
+        requestServer(`${RESTORE_BY_SUPERVISOR}/${rowId}`, "post")
+            .then(() => {
+                mutate();
+                setOpenRestoreDialog(false);
+                setSubmitting(false);
+            })
+            .catch(() => {
+                setSubmitting(false);
+            });
+    };
+    return (
+        <>
+            <DialogContent>
+                <Stack alignItems="center" spacing={2}>
+                    <Typography textAlign="center" fontWeight="bold" fontSize="16px" mt={2}>
+                        آیا از بازگردانی فعالیت اطمینان دارید؟
+                    </Typography>
+                </Stack>
+            </DialogContent>
+            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
+                <Button onClick={() => setOpenRestoreDialog(false)} variant="contained" color="error">
+                    خیر !
+                </Button>
+                <Button onClick={handleClick} variant="contained" color="primary" disabled={submitting}>
+                    {submitting ? "درحال ارسال اطلاعات..." : "بله اطمینان دارم"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+
+export default RestoreContent;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/RestoreForm/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/RestoreForm/index.jsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
+import ReplyIcon from "@mui/icons-material/Reply";
+import RestoreContent from "./RestoreContent";
+const RestoreForm = ({ rowId, mutate }) => {
+    const [openRestoreDialog, setOpenRestoreDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="بازگردانی">
+                <IconButton color="primary" onClick={() => setOpenRestoreDialog(true)}>
+                    <ReplyIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openRestoreDialog}
+                onClose={() => setOpenRestoreDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle>بازگردانی فعالیت</DialogTitle>
+                <RestoreContent rowId={rowId} mutate={mutate} setOpenRestoreDialog={setOpenRestoreDialog} />
+            </Dialog>
+        </>
+    );
+};
+export default RestoreForm;
--- a/src/components/dashboard/roadItems/supervisor/RowActions/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/RowActions/index.jsx
@@ -0,0 +1,27 @@
+import { Box } from "@mui/material";
+import DeleteForm from "./DeleteForm";
+import RejectForm from "./RejectForm";
+import ConfirmForm from "./ConfirmForm";
+import RestoreForm from "./RestoreForm";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+
+const RowActions = ({ row, mutate }) => {
+    const { data: userPermissions } = usePermissions();
+    const hasDeletePermission = userPermissions.includes("delete-road-item");
+    const hasRestorePermission = userPermissions.includes("restore-road-item");
+    return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+            {row.original.status === 0 && row.original.can_supervise === 1 && (
+                <ConfirmForm mutate={mutate} rowId={row.getValue("id")} />
+            )}
+            {row.original.status === 0 && row.original.can_supervise === 1 && (
+                <RejectForm mutate={mutate} rowId={row.getValue("id")} />
+            )}
+            {hasRestorePermission && row.original.status !== 0 && (
+                <RestoreForm mutate={mutate} rowId={row.getValue("id")} />
+            )}
+            {hasDeletePermission && <DeleteForm mutate={mutate} rowId={row.getValue("id")} />}
+        </Box>
+    );
+};
+export default RowActions;
--- a/src/components/dashboard/roadItems/supervisor/SupervisorList.jsx
+++ b/src/components/dashboard/roadItems/supervisor/SupervisorList.jsx
@@ -0,0 +1,239 @@
+import { useMemo } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import Toolbar from "./Toolbar";
+import { GET_ROAD_ITEMS_SUPERVISOR_LIST } from "@/core/utils/routes";
+import moment from "jalali-moment";
+import RowActions from "./RowActions";
+import LocationForm from "./RowActions/LocationForm";
+import ImageDialog from "./RowActions/ImageForm";
+import RahdaranDialog from "./RowActions/RahdaranForm";
+
+const SupervisorList = () => {
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: "id",
+                header: "کد یکتا", // Unique Code
+                id: "id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "province_fa",
+                header: "استان", // Province
+                id: "province_fa",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "edarat_name",
+                header: "اداره", // Office
+                id: "edarat_name",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "item_fa",
+                header: "آیتم فعالیت",
+                id: "item_fa",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "sub_item_fa",
+                header: "موضوع مشاهده شده", // Observed Subject
+                id: "sub_item_fa",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "value",
+                header: "مقدار", // Value
+                id: "value",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                Cell: ({ renderedCellValue, row }) => {
+                    return (
+                        <Stack direction="row" spacing={1}>
+                            <Typography variant="body2">{row.original.sub_item_data}</Typography>
+                            <Typography variant="body2">{`(${row.original.unit_fa})`}</Typography>
+                        </Stack>
+                    );
+                },
+            },
+            {
+                accessorKey: "files",
+                header: "تصاویر", // Images
+                id: "files",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "array",
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue }) => {
+                    if (renderedCellValue.length > 0) {
+                        return (
+                            <Stack alignItems={"center"} justifyContent={"center"}>
+                                <ImageDialog images={renderedCellValue} />
+                            </Stack>
+                        );
+                    }
+                    return (
+                        <Typography textAlign={"center"} variant="body2">
+                            بدون تصویر
+                        </Typography>
+                    );
+                },
+            },
+            {
+                accessorKey: "location",
+                header: "موقعیت", // Location
+                id: "location",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "array",
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue, row }) => {
+                    return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <LocationForm
+                                start_lat={row.original.start_lat}
+                                start_lng={row.original.start_lng}
+                                end_lat={row.original.end_lat}
+                                end_lng={row.original.end_lng}
+                            />
+                        </Stack>
+                    );
+                },
+            },
+            {
+                accessorKey: "cmms_machine_code",
+                header: "کد خودرو", // Car ID
+                id: "cmms_machine_code",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                enableSorting: false,
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "rahdaran",
+                header: "راهداران",
+                id: "rahdaran",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "array",
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue }) => {
+                    if (renderedCellValue) {
+                        return (
+                            <Stack alignItems={"center"} justifyContent={"center"}>
+                                <RahdaranDialog rahdarLists={renderedCellValue} />
+                            </Stack>
+                        );
+                    }
+                    return <Typography variant="body2">بدون شخص</Typography>;
+                },
+            },
+            {
+                accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                header: "تاریخ ثبت", // Register Date
+                id: "created_at",
+                enableColumnFilter: true,
+                datatype: "date",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorFn: (row) => moment(row.activity_date_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                header: "تاریخ فعالیت", // Start Date
+                id: "activity_date_time",
+                enableColumnFilter: true,
+                datatype: "date",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "status_fa",
+                header: "وضعیت", // Status
+                id: "status_fa",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: true,
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+            {
+                accessorKey: "supervisor_description",
+                header: "توضیحات", // Description
+                id: "supervisor_description",
+                enableColumnFilter: false,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+            },
+        ],
+        []
+    );
+
+    return (
+        <>
+            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    columns={columns}
+                    sorting={[
+                        { id: "status_fa", desc: false },
+                        { id: "id", desc: true },
+                    ]}
+                    table_url={GET_ROAD_ITEMS_SUPERVISOR_LIST}
+                    page_name={"supervisor"}
+                    table_name={"supervisorList"}
+                    TableToolbar={Toolbar}
+                    enableRowActions
+                    positionActionsColumn={"last"}
+                    RowActions={RowActions}
+                />
+            </Box>
+        </>
+    );
+};
+
+export default SupervisorList;
--- a/src/components/dashboard/roadItems/supervisor/Toolbar.jsx
+++ b/src/components/dashboard/roadItems/supervisor/Toolbar.jsx
@@ -0,0 +1,10 @@
+import PrintExcel from "./ExcelPrint";
+
+const Toolbar = ({ table, filterData }) => {
+    return (
+        <>
+            <PrintExcel table={table} filterData={filterData} />
+        </>
+    );
+};
+export default Toolbar;
--- a/src/components/dashboard/roadItems/supervisor/index.jsx
+++ b/src/components/dashboard/roadItems/supervisor/index.jsx
@@ -0,0 +1,14 @@
+"use client";
+import PageTitle from "@/core/components/PageTitle";
+import { Stack } from "@mui/material";
+import SupervisorList from "./SupervisorList";
+
+const SupervisorPage = () => {
+    return (
+        <Stack spacing={1}>
+            <PageTitle title={"ارزیابی"} />
+            <SupervisorList />
+        </Stack>
+    );
+};
+export default SupervisorPage;
--- a/src/components/dashboard/roadPatrols/operator/ExcelPrint/index.jsx
+++ b/src/components/dashboard/roadPatrols/operator/ExcelPrint/index.jsx
@@ -4,7 +4,7 @@ import moment from "jalali-moment";
 import FileSaver from "file-saver";
 import DescriptionIcon from "@mui/icons-material/Description";
 import useRequest from "@/lib/hooks/useRequest";
-import { EXPORT_OPERATOR_LIST } from "@/core/utils/routes";
+import { EXPORT_ROAD_PATROL_OPERATOR_LIST } from "@/core/utils/routes";

 const PrintExcel = ({ table, filterData }) => {
    const [loading, setLoading] = useState(false);
@@ -28,7 +28,7 @@ const PrintExcel = ({ table, filterData }) => {

    const clickHandler = () => {
        setLoading(true);
-        requestServer(`${EXPORT_OPERATOR_LIST}?${filterParams}`, "get", {
+        requestServer(`${EXPORT_ROAD_PATROL_OPERATOR_LIST}?${filterParams}`, "get", {
            requestOptions: { responseType: "blob" },
        })
            .then((response) => {
--- a/src/components/dashboard/roadPatrols/operator/OperatorList.jsx
+++ b/src/components/dashboard/roadPatrols/operator/OperatorList.jsx
@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { Box, Typography } from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import Toolbar from "./Toolbar";
-import { GET_OPERATOR_LIST } from "@/core/utils/routes";
+import { GET_ROAD_PATROL_OPERATOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";

@@ -99,7 +99,7 @@ const OperatorList = () => {
                    table_title={"عملیات"}
                    need_filter={true}
                    columns={columns}
-                    table_url={GET_OPERATOR_LIST}
+                    table_url={GET_ROAD_PATROL_OPERATOR_LIST}
                    page_name={"operator"}
                    table_name={"operatorList"}
                    TableToolbar={Toolbar}
--- a/src/components/dashboard/roadPatrols/supervisor/ExcelPrint/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/ExcelPrint/index.jsx
@@ -4,7 +4,7 @@ import moment from "jalali-moment";
 import FileSaver from "file-saver";
 import DescriptionIcon from "@mui/icons-material/Description";
 import useRequest from "@/lib/hooks/useRequest";
-import { EXPORT_SUPERVISOR_LIST } from "@/core/utils/routes";
+import { EXPORT_ROAD_PATROL_SUPERVISOR_LIST } from "@/core/utils/routes";

 const PrintExcel = ({ table, filterData }) => {
    const [loading, setLoading] = useState(false);
@@ -28,7 +28,7 @@ const PrintExcel = ({ table, filterData }) => {

    const clickHandler = () => {
        setLoading(true);
-        requestServer(`${EXPORT_SUPERVISOR_LIST}?${filterParams}`, "get", {
+        requestServer(`${EXPORT_ROAD_PATROL_SUPERVISOR_LIST}?${filterParams}`, "get", {
            requestOptions: { responseType: "blob" },
        })
            .then((response) => {
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/index.jsx
@@ -1,19 +1,7 @@
 import React, { useState } from "react";
-import {
-    Tooltip,
-    IconButton,
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Button,
-    Box,
-    Typography,
-} from "@mui/material";
+import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
-import CloseIcon from "@mui/icons-material/Close";
-import DeleteContent from "@/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/DeleteContent";
-
+import DeleteContent from "./DeleteContent";
 const DeleteForm = ({ rowId, mutate }) => {
    const [openDeleteDialog, setOpenDeleteDialog] = useState(false);

@@ -41,5 +29,4 @@ const DeleteForm = ({ rowId, mutate }) => {
        </>
    );
 };
-
 export default DeleteForm;
--- a/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { Box, Typography } from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import Toolbar from "./Toolbar";
-import { GET_SUPERVISOR_LIST } from "@/core/utils/routes";
+import { GET_ROAD_PATROL_SUPERVISOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
 import useProvinces from "@/lib/hooks/useProvince";
@@ -140,7 +140,7 @@ const OperatorList = () => {
                    table_title={"ارزیابی"}
                    need_filter={true}
                    columns={columns}
-                    table_url={GET_SUPERVISOR_LIST}
+                    table_url={GET_ROAD_PATROL_SUPERVISOR_LIST}
                    page_name={"supervisor"}
                    table_name={"supervisorList"}
                    TableToolbar={Toolbar}