Feature/faaliyat rozane cartable

next.config.mjs

@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     basePath: '/v3',
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'rms.witel.ir',
+            },
+        ],
+    },
 };
 
 export default nextConfig;

package.json

@@ -45,6 +45,7 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
+    "@types/node": "22.10.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",

src/app/(withAuth)/dashboard/road-items/operator/page.js

@@ -0,0 +1,11 @@
+import WithPermission from "@/core/middlewares/withPermission";
+import OperatorPage from "@/components/dashboard/roadItems/operator";
+const Page = () => {
+    return (
+        <WithPermission permission_name={["create-road-item"]}>
+            <OperatorPage />
+        </WithPermission>
+    );
+};
+
+export default Page;

src/app/(withAuth)/dashboard/road-items/supervisor/page.js

@@ -0,0 +1,13 @@
+import WithPermission from "@/core/middlewares/withPermission";
+import SupervisorPage from "@/components/dashboard/roadItems/supervisor";
+const Page = () => {
+    return (
+        <WithPermission
+            permission_name={["show-road-item-supervise-cartable", "show-road-item-supervise-cartable-province"]}
+        >
+            <SupervisorPage />
+        </WithPermission>
+    );
+};
+
+export default Page;

src/app/(withAuth)/layout.js

@@ -1,8 +1,8 @@
 "use client";
-import WithAuthMiddleware from "@/core/middlewares/withAuth";
-import LoadingHardPage from "@/core/components/LoadingHardPage";
 import { useAuth } from "@/lib/contexts/auth";
 import { Typography, Stack } from "@mui/material";
+import WithAuthMiddleware from "@/core/middlewares/withAuth";
+import LoadingHardPage from "@/core/components/LoadingHardPage";
 
 const Layout = ({ children }) => {
     const { isAuth, initAuthState, errorState } = useAuth();

src/app/api/fake-road-items/operator/route.js

@@ -0,0 +1,84 @@
+const data = [
+    {
+        id: 1,
+        province: "تهران",
+        office: "اداره کل",
+        action_item: "بررسی خودرو", // Replace with the correct label
+        observed_subject: "تنظیم سطح بستر حریم", // Replace with the correct label
+        value: "1 کیلومتر", // Replace with actual value
+        images: {
+            before: "https://cdn-icons-png.flaticon.com/512/783/783154.png",
+            after: "https://cdn-icons-png.flaticon.com/512/1651/1651833.png",
+        },
+        location: [{ lat: 35.6892, lng: 51.389 }], // Add URLs to images if needed
+        register_date: "2024-11-03T11:01:14.000000Z",
+        start_date: "2024-11-02T11:48:22.000000Z",
+        status: 0, // Replace with actual status
+        car_id: 1,
+        person_id: [0, 1, 2],
+        description: "بررسی شد", // Replace with actual description
+    },
+    {
+        id: 2,
+        province: "تهران",
+        office: "اداره کل",
+        action_item: "بررسی خودرو", // Replace with the correct label
+        observed_subject: "تنظیم سطح بستر حریم", // Replace with the correct label
+        value: "1 کیلومتر", // Replace with actual value
+        images: {
+            before: "https://cdn-icons-png.flaticon.com/512/783/783154.png",
+            after: "https://cdn-icons-png.flaticon.com/512/1651/1651833.png",
+        },
+        location: [{ lat: 35.6892, lng: 51.389 }], // Add URLs to images if needed
+        register_date: "2024-11-03T11:01:14.000000Z",
+        start_date: "2024-11-02T11:48:22.000000Z",
+        status: 2, // Replace with actual status
+        car_id: 10,
+        person_id: [10, 11, 12],
+        description: "بررسی شد", // Replace with actual description
+    },
+    {
+        id: 3,
+        province: "تهران",
+        office: "اداره کل",
+        action_item: "بررسی خودرو", // Replace with the correct label
+        observed_subject: "تنظیم سطح بستر حریم", // Replace with the correct label
+        value: "1 کیلومتر", // Replace with actual value
+        images: {
+            before: "https://cdn-icons-png.flaticon.com/512/783/783154.png",
+            after: "https://cdn-icons-png.flaticon.com/512/1651/1651833.png",
+        }, // Add URLs to images if needed
+        location: [{ lat: 35.6892, lng: 51.389 }], // Add URLs to images if needed
+        register_date: "2024-11-03T11:01:14.000000Z",
+        start_date: "2024-11-02T11:48:22.000000Z",
+        status: 0, // Replace with actual status
+        car_id: 11,
+        person_id: [20, 15, 29],
+        description: "بررسی شد", // Replace with actual description
+    },
+    {
+        id: 4,
+        province: "تهران",
+        office: "اداره کل",
+        action_item: "بررسی خودرو", // Replace with the correct label
+        observed_subject: "تنظیم سطح بستر حریم", // Replace with the correct label
+        value: "1 کیلومتر", // Replace with actual value
+        images: {
+            before: "https://cdn-icons-png.flaticon.com/512/783/783154.png",
+            after: "https://cdn-icons-png.flaticon.com/512/1651/1651833.png",
+        }, // Add URLs to images if needed
+        location: [{ lat: 35.6892, lng: 51.389 }], // Add URLs to images if needed
+        register_date: "2024-11-03T11:01:14.000000Z",
+        start_date: "2024-11-02T11:48:22.000000Z",
+        status: 1, // Replace with actual status
+        car_id: 26,
+        person_id: [78, 18, 56],
+        description: "بررسی شد", // Replace with actual description
+    },
+];
+
+export async function GET() {
+    return new Response(JSON.stringify({ data }), {
+        headers: { "Content-Type": "application/json" },
+    });
+}

src/app/api/fake-road-items/supervisor/route.js

@@ -0,0 +1,84 @@
+const data = [
+    {
+        id: 1,
+        province: "تهران",
+        office: "اداره کل",
+        action_item: "بررسی خودرو", // Replace with the correct label
+        observed_subject: "تنظیم سطح بستر حریم", // Replace with the correct label
+        value: "1 کیلومتر", // Replace with actual value
+        images: {
+            before: "https://cdn-icons-png.flaticon.com/512/783/783154.png",
+            after: "https://cdn-icons-png.flaticon.com/512/1651/1651833.png",
+        }, // Add URLs to images if needed
+        location: [{ lat: 35.6892, lng: 51.389 }], // Add URLs to images if needed
+        register_date: "2024-11-03T11:01:14.000000Z",
+        start_date: "2024-11-02T11:48:22.000000Z",
+        status: 0, // Replace with actual status
+        car_id: 1,
+        person_id: [0, 1, 2],
+        description: "بررسی شد", // Replace with actual description
+    },
+    {
+        id: 2,
+        province: "تهران",
+        office: "اداره کل",
+        action_item: "بررسی خودرو", // Replace with the correct label
+        observed_subject: "تنظیم سطح بستر حریم", // Replace with the correct label
+        value: "1 کیلومتر", // Replace with actual value
+        images: {
+            before: "https://cdn-icons-png.flaticon.com/512/783/783154.png",
+            after: "https://cdn-icons-png.flaticon.com/512/1651/1651833.png",
+        }, // Add URLs to images if needed
+        location: [{ lat: 35.6892, lng: 51.389 }], // Add URLs to images if needed
+        register_date: "2024-11-03T11:01:14.000000Z",
+        start_date: "2024-11-02T11:48:22.000000Z",
+        status: 2, // Replace with actual status
+        car_id: 10,
+        person_id: [10, 11, 12],
+        description: "بررسی شد", // Replace with actual description
+    },
+    {
+        id: 3,
+        province: "تهران",
+        office: "اداره کل",
+        action_item: "بررسی خودرو", // Replace with the correct label
+        observed_subject: "تنظیم سطح بستر حریم", // Replace with the correct label
+        value: "1 کیلومتر", // Replace with actual value
+        images: {
+            before: "https://cdn-icons-png.flaticon.com/512/783/783154.png",
+            after: "https://cdn-icons-png.flaticon.com/512/1651/1651833.png",
+        }, // Add URLs to images if needed
+        location: [{ lat: 35.6892, lng: 51.389 }], // Add URLs to images if needed
+        register_date: "2024-11-03T11:01:14.000000Z",
+        start_date: "2024-11-02T11:48:22.000000Z",
+        status: 0, // Replace with actual status
+        car_id: 11,
+        person_id: [20, 15, 29],
+        description: "بررسی شد", // Replace with actual description
+    },
+    {
+        id: 4,
+        province: "تهران",
+        office: "اداره کل",
+        action_item: "بررسی خودرو", // Replace with the correct label
+        observed_subject: "تنظیم سطح بستر حریم", // Replace with the correct label
+        value: "1 کیلومتر", // Replace with actual value
+        images: {
+            before: "https://cdn-icons-png.flaticon.com/512/783/783154.png",
+            after: "https://cdn-icons-png.flaticon.com/512/1651/1651833.png",
+        }, // Add URLs to images if needed
+        location: [{ lat: 35.6892, lng: 51.389 }], // Add URLs to images if needed
+        register_date: "2024-11-03T11:01:14.000000Z",
+        start_date: "2024-11-02T11:48:22.000000Z",
+        status: 1, // Replace with actual status
+        car_id: 26,
+        person_id: [78, 18, 56],
+        description: "بررسی شد", // Replace with actual description
+    },
+];
+
+export async function GET() {
+    return new Response(JSON.stringify({ data }), {
+        headers: { "Content-Type": "application/json" },
+    });
+}

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;

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>

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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) => {

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}

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) => {

src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/index.jsx

@@ -1,19 +1,7 @@
 import React, { useState } from "react";
-import {
+import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
-    Tooltip,
-    IconButton,
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    Button,
-    Box,
-    Typography,
-} from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
-import CloseIcon from "@mui/icons-material/Close";
+import DeleteContent from "./DeleteContent";
-import DeleteContent from "@/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/DeleteContent";
-
 const DeleteForm = ({ rowId, mutate }) => {
     const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
 
@@ -41,5 +29,4 @@ const DeleteForm = ({ rowId, mutate }) => {
         </>
     );
 };
-
 export default DeleteForm;

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}

src/core/components/CarCode.jsx

@@ -1,28 +1,26 @@
-"use client";
+import { Autocomplete, CircularProgress, TextField } from "@mui/material";
-
+import { useEffect, useState } from "react";
-import {Autocomplete, CircularProgress, TextField} from "@mui/material";
-import {useEffect, useState} from "react";
 import useRequest from "@/lib/hooks/useRequest";
-import {debounce} from "@mui/material/utils";
+import { debounce } from "@mui/material/utils";
+import { GET_CAR_LIST_SEARCH } from "@/core/utils/routes";
 
-const CarCode = ({carCode, setCarCode}) => {
+const CarCode = ({ carCode, setCarCode, inputValueDefault = "", error }) => {
-    const [inputValue, setInputValue] = useState('');
+    const [inputValue, setInputValue] = useState(inputValueDefault);
     const [options, setOptions] = useState([]);
     const [loading, setLoading] = useState(false);
     const requestServer = useRequest();
-
     const fetchCarCodes = (inputValue, controller) => {
         const debouncer = debounce((query) => {
-            if (query.length < 2) {
+            if (!query || query?.length < 3) {
                 setOptions([]);
                 return;
             }
             setLoading(true);
-            requestServer(`car-code/api?${query}`, "get", {
+            requestServer(`${GET_CAR_LIST_SEARCH}?machine_code=${query}`, "get", {
-                requestOptions: {signal: controller.signal}
+                requestOptions: { signal: controller.signal },
             })
                 .then((response) => {
-                    setOptions(response || []);
+                    setOptions(response.data.data || []);
                 })
                 .catch(() => {
                     setOptions([]);
@@ -30,9 +28,9 @@ const CarCode = ({carCode, setCarCode}) => {
                 .finally(() => {
                     setLoading(false);
                 });
-        }, 500)
+        }, 500);
-        debouncer(inputValue)
+        debouncer(inputValue);
-    }
+    };
 
     useEffect(() => {
         const controller = new AbortController();
@@ -45,34 +43,35 @@ const CarCode = ({carCode, setCarCode}) => {
             value={carCode}
             size="small"
             onChange={(event, newValue) => {
-                setCarCode(newValue);
+                setCarCode(newValue || null); // Set an empty string if no value is selected
             }}
             inputValue={inputValue}
             onInputChange={(event, newInputValue) => {
-                setInputValue(newInputValue);
+                setInputValue(newInputValue || ""); // Prevent inputValue from being null or undefined
             }}
             options={options}
-            getOptionLabel={(option) =>
+            getOptionLabel={(option) => (typeof option === "string" ? option : option.machine_code)}
-                typeof option === 'string' ? option : option.name || option.code
+            isOptionEqualToValue={(option, value) => {
-            }
+                if (!value) return false; // Handle null/undefined values
+                if (value === "") return option.machine_code === ""; // Handle empty string case
+                return option.machine_code === (value?.machine_code || value);
+            }}
             loading={loading}
             loadingText="درحال جستجوی کد خودرو"
-            noOptionsText={
+            noOptionsText={inputValue?.length < 3 ? "حداقل سه رقم از کد خودرو را وارد کنید" : "کد خودرویی یافت نشد"}
-                inputValue.length < 2
+            fullWidth
-                    ? "حداقل دو رقم از کد خودرو را وارد کنید"
-                    : "کد خودرویی یافت نشد"
-            }
-            sx={{width: 300}}
             renderInput={(params) => (
                 <TextField
                     {...params}
                     label="کد خودرو"
                     fullWidth
+                    error={!!error} // نمایش خطا
+                    helperText={error?.message} // پیام خطا
                     InputProps={{
                         ...params.InputProps,
                         endAdornment: (
                             <>
-                                {loading ? <CircularProgress size="25px" color="inherit"/> : null}
+                                {loading ? <CircularProgress size="25px" color="inherit" /> : null}
                                 {params.InputProps.endAdornment}
                             </>
                         ),
@@ -82,5 +81,4 @@ const CarCode = ({carCode, setCarCode}) => {
         />
     );
 };
-
+export default CarCode;
-export default CarCode;

src/core/components/DataTable/filter/FilterBody.jsx

@@ -8,6 +8,7 @@ import { Box, Button, Drawer, styled } from "@mui/material";
 import { useEffect, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import * as Yup from "yup";
+import FilterBodyController from "./FilterBodyController";
 
 const ScrollBox = styled(Box)({
     flexGrow: 1,
@@ -95,27 +96,12 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
                             {columns.map(
                                 (column) =>
                                     column.enableColumnFilter && (
-                                        <Controller
+                                        <FilterBodyController
                                             key={column.id}
-                                            name={`${column.id}`}
+                                            column={column}
                                             control={control}
-                                            render={({ field: { value, onBlur, onChange } }) => {
+                                            errors={errors}
-                                                let dependencyField;
+                                            reset={reset}
-                                                if (column.dependencyId) {
-                                                    dependencyField = useWatch({ control, name: column.dependencyId });
-                                                }
-                                                return (
-                                                    <FilterBodyField
-                                                        column={column}
-                                                        filterParameters={value}
-                                                        handleChange={onChange}
-                                                        handleBlur={onBlur}
-                                                        dependencyFieldValue={dependencyField}
-                                                        resetForm={() => reset()}
-                                                        errors={errors}
-                                                    />
-                                                );
-                                            }}
                                         />
                                     )
                             )}

src/core/components/DataTable/filter/FilterBodyController.jsx

@@ -0,0 +1,25 @@
+import { Controller, useWatch } from "react-hook-form";
+import FilterBodyField from "./FilterBodyField";
+
+const FilterBodyController = ({ column, control, reset, errors }) => {
+    const dependencyField = useWatch({ control, name: column?.dependencyId });
+
+    return (
+        <Controller
+            name={`${column.id}`}
+            control={control}
+            render={({ field: { value, onBlur, onChange } }) => (
+                <FilterBodyField
+                    column={column}
+                    filterParameters={value}
+                    handleChange={onChange}
+                    handleBlur={onBlur}
+                    dependencyFieldValue={dependencyField || null}
+                    resetForm={() => reset()}
+                    errors={errors}
+                />
+            )}
+        />
+    );
+};
+export default FilterBodyController;

src/core/components/DataTable/reset/ResetStorage.jsx

@@ -1,11 +1,12 @@
 "use client";
-
+import { IconButton, Tooltip, Badge } from "@mui/material";
-import { IconButton, Tooltip } from "@mui/material";
 import AutorenewIcon from "@mui/icons-material/Autorenew";
 import useTableSetting from "@/lib/hooks/useTableSetting";
+import useDataTable from "@/lib/hooks/useDataTable";
 
 function ResetStorage({ user_id, page_name, table_name }) {
     const { resetAction } = useTableSetting();
+    const { isDirty } = useDataTable();
     const reset = () => {
         resetAction(user_id, page_name, table_name);
     };
@@ -13,7 +14,20 @@ function ResetStorage({ user_id, page_name, table_name }) {
     return (
         <Tooltip title="بازنشانی اطلاعات">
             <IconButton onClick={reset} aria-label="reset table data">
-                <AutorenewIcon />
+                {isDirty ? (
+                    <Badge
+                        anchorOrigin={{
+                            vertical: "top",
+                            horizontal: "left",
+                        }}
+                        color="primary"
+                        variant="dot"
+                    >
+                        <AutorenewIcon />
+                    </Badge>
+                ) : (
+                    <AutorenewIcon />
+                )}
             </IconButton>
         </Tooltip>
     );

src/core/components/MapInfoOneMarker.jsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Marker, useMapEvents } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
+import { Box, Button, Typography } from "@mui/material";
+import dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import HereIcon from "@/assets/images/examine_marker_active.png";
+
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+
+const createCustomIcon = (size, iconUrl, labelText) => {
+    if (labelText) {
+        return L.divIcon({
+            html: `
+                <div style="position: relative; display: inline-block; text-align: center;">
+                    <img 
+                        src="${iconUrl}" 
+                        style="width: ${size[0]}px; height: ${size[1]}px;" 
+                        alt="icon"
+                    />
+                    <div style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); color: black; font-size: 12px;">
+                        ${labelText}
+                    </div>
+                </div>
+            `,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    }
+
+    return L.icon({
+        iconUrl: iconUrl,
+        iconSize: size,
+        iconAnchor: [size[0] / 2, size[1]],
+        popupAnchor: [0, -size[1]],
+    });
+};
+
+const MapInteraction = ({ setValue, startLat, startLng }) => {
+    const [isMarkerLocked, setIsMarkerLocked] = useState(!!(startLat && startLng)); // وضعیت قفل مارکر
+    const [markerPosition, setMarkerPosition] = useState(
+        startLat && startLng ? { lat: startLat, lng: startLng } : null
+    );
+    const markerRef = useRef();
+
+    const map = useMapEvents({
+        move(e) {
+            if (!isMarkerLocked && markerRef.current) {
+                markerRef.current.setLatLng(e.target.getCenter());
+            }
+        },
+        zoom(e) {
+            if (!isMarkerLocked && markerRef.current) {
+                markerRef.current.setLatLng(e.target.getCenter());
+            }
+        },
+    });
+
+    useEffect(() => {
+        if (startLat && startLng) {
+            const position = { lat: startLat, lng: startLng };
+            map.setView(position, 15);
+        }
+    }, [startLat, startLng, map]);
+
+    const handleMarkerClick = () => {
+        if (!isMarkerLocked) {
+            const center = map.getCenter();
+            setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
+            setMarkerPosition({ lat: center.lat, lng: center.lng }); // به‌روزرسانی موقعیت مارکر
+            setIsMarkerLocked(true);
+        }
+    };
+
+    const handleUnlockMarker = () => {
+        setValue("start_point", null); // حذف مقدار قبلی
+        setIsMarkerLocked(false); // باز کردن قفل مارکر
+        setMarkerPosition(null); // تنظیم مارکر به مرکز نقشه
+    };
+
+    return (
+        <>
+            <Marker
+                position={markerPosition || map.getCenter()} // استفاده از موقعیت
+                ref={markerRef}
+                icon={createCustomIcon([35, 35], HereIcon.src, "اینجا")}
+                eventHandlers={{
+                    click: handleMarkerClick,
+                }}
+            />
+            {isMarkerLocked && (
+                <Box
+                    sx={{
+                        position: "absolute",
+                        bottom: 10,
+                        left: 10,
+                        zIndex: 1000,
+                    }}
+                >
+                    <Button variant="contained" onClick={handleUnlockMarker}>
+                        ویرایش
+                    </Button>
+                </Box>
+            )}
+        </>
+    );
+};
+
+const MapInfoOneMarker = ({ setValue, errors, StartPoint = null }) => {
+    return (
+        <Box>
+            <Box sx={{ width: "100%", height: "400px", marginBottom: "16px" }}>
+                <MapLayer style={{ border: "1px solid #0009", borderRadius: "4px" }}>
+                    <MapInteraction
+                        setValue={setValue}
+                        startLat={StartPoint ? StartPoint.lat : null}
+                        startLng={StartPoint ? StartPoint.lng : null}
+                    />
+                </MapLayer>
+            </Box>
+            <Box display="flex" gap={2}>
+                {errors.start_point && (
+                    <Typography color="error" variant="body2">
+                        {errors.start_point.message}
+                    </Typography>
+                )}
+            </Box>
+        </Box>
+    );
+};
+
+export default MapInfoOneMarker;

src/core/components/MapInfoTwoMarker.jsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Marker, useMapEvents } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
+import { Box, Button, Typography } from "@mui/material";
+import dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import EndIcon from "@/assets/images/examine_marker_active.png";
+import StartIcon from "@/assets/images/examine_marker.png";
+
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+const createCustomIcon = (size, iconUrl, labelText) => {
+    if (labelText) {
+        return L.divIcon({
+            html: `
+                <div style="position: relative; display: inline-block; text-align: center;">
+                    <img 
+                        src="${iconUrl}" 
+                        style="width: ${size[0]}px; height: ${size[1]}px;" 
+                        alt="icon"
+                    />
+                    <div style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); color: black; font-size: 12px;">
+                        ${labelText}
+                    </div>
+                </div>
+            `,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    }
+
+    return L.icon({
+        iconUrl: iconUrl,
+        iconSize: size,
+        iconAnchor: [size[0] / 2, size[1]],
+        popupAnchor: [0, -size[1]],
+    });
+};
+
+const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
+    const [isStartLocked, setIsStartLocked] = useState(!!(startLat && startLng)); // وضعیت قفل نقطه آغاز
+    const [isEndLocked, setIsEndLocked] = useState(!!(endLat && endLng)); // وضعیت قفل نقطه پایان
+    const [startPosition, setStartPosition] = useState(startLat && startLng ? { lat: startLat, lng: startLng } : null);
+    const [endPosition, setEndPosition] = useState(endLat && endLng ? { lat: endLat, lng: endLng } : null);
+    const startRef = useRef();
+    const endRef = useRef();
+
+    const map = useMapEvents({
+        move(e) {
+            if (!isStartLocked && startRef.current) {
+                startRef.current.setLatLng(e.target.getCenter());
+            } else if (isStartLocked && !isEndLocked && endRef.current) {
+                endRef.current.setLatLng(e.target.getCenter());
+            }
+        },
+        zoom(e) {
+            if (!isStartLocked && startRef.current) {
+                startRef.current.setLatLng(e.target.getCenter());
+            } else if (isStartLocked && !isEndLocked && endRef.current) {
+                endRef.current.setLatLng(e.target.getCenter());
+            }
+        },
+    });
+
+    useEffect(() => {
+        if (startLat && endLng) {
+            map.fitBounds(
+                [
+                    { lat: startLat, lng: startLng },
+                    { lat: endLat, lng: endLng },
+                ],
+                { paddingTopLeft: [16, 16], paddingBottomRight: [16, 130] }
+            );
+        }
+    }, [startLat, map, endLng]);
+
+    const handleUnlockStart = () => {
+        setIsStartLocked(false);
+        setStartPosition(null);
+        setValue("start_point", null);
+    };
+
+    const handleUnlockEnd = () => {
+        setIsEndLocked(false);
+        setIsStartLocked(false);
+        setEndPosition(null);
+        setStartPosition(null);
+        setValue("end_point", "");
+        setValue("start_point", null);
+    };
+
+    return (
+        <>
+            <Marker
+                position={startPosition || map.getCenter()}
+                ref={startRef}
+                icon={createCustomIcon([35, 35], StartIcon.src, "نقطه شروع")}
+                eventHandlers={{
+                    click: () => {
+                        if (!isStartLocked) {
+                            const center = map.getCenter();
+                            setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
+                            setStartPosition({ lat: center.lat, lng: center.lng });
+                            setIsStartLocked(true);
+                        }
+                    },
+                }}
+            />
+            {isStartLocked && !isEndLocked && (
+                <Box
+                    sx={{
+                        position: "absolute",
+                        bottom: 10,
+                        left: 10,
+                        zIndex: 1000,
+                    }}
+                >
+                    <Button variant={"contained"} onClick={handleUnlockStart}>
+                        ویرایش نقطه شروع
+                    </Button>
+                </Box>
+            )}
+            {isStartLocked && (
+                <Marker
+                    position={endPosition || map.getCenter()}
+                    ref={endRef}
+                    icon={createCustomIcon([35, 35], EndIcon.src, "نقطه پایان")}
+                    eventHandlers={{
+                        click: () => {
+                            if (!isEndLocked) {
+                                const center = map.getCenter();
+                                setValue("end_point", { lat: center.lat.toString(), lng: center.lng.toString() });
+                                setEndPosition({ lat: center.lat, lng: center.lng });
+                                setIsEndLocked(true);
+                            }
+                        },
+                    }}
+                />
+            )}
+            {isEndLocked && (
+                <Box
+                    sx={{
+                        position: "absolute",
+                        bottom: 10,
+                        left: 10,
+                        zIndex: 1000,
+                    }}
+                >
+                    <Button variant={"contained"} onClick={handleUnlockEnd}>
+                        ویرایش نقاط
+                    </Button>
+                </Box>
+            )}
+        </>
+    );
+};
+
+const MapInfoTwoMarker = ({ setValue, errors, StartPoint = null, EndPoint = null }) => {
+    return (
+        <Box>
+            <Box sx={{ width: "100%", height: "400px", marginBottom: "16px" }}>
+                <MapLayer style={{ border: "1px solid #0009", borderRadius: "4px" }}>
+                    <MapInteraction
+                        setValue={setValue}
+                        startLat={StartPoint ? StartPoint.lat : null}
+                        startLng={StartPoint ? StartPoint.lng : null}
+                        endLat={EndPoint ? EndPoint.lat : null}
+                        endLng={EndPoint ? EndPoint.lng : null}
+                    />
+                </MapLayer>
+            </Box>
+            <Box display="flex" gap={2}>
+                {errors.start_point && (
+                    <Typography color="error" variant="body2">
+                        {errors.start_point.message}
+                    </Typography>
+                )}
+                {errors.end_point && (
+                    <Typography color="error" variant="body2">
+                        {errors.end_point.message}
+                    </Typography>
+                )}
+            </Box>
+        </Box>
+    );
+};
+export default MapInfoTwoMarker;

src/core/components/MuiDatePicker.jsx

@@ -1,53 +1,70 @@
-import { LocalizationProvider, MobileDateTimePicker } from "@mui/x-date-pickers";
+import React from "react";
+import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
 import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
-import moment from "jalali-moment";
 import { faIR } from "@mui/x-date-pickers/locales";
-import { Box, IconButton, FormControl, FormHelperText, InputAdornment, Stack } from "@mui/material";
+import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
+import moment from "jalali-moment";
 
-export default function PickerWithButtonField({ formik, name, value, error, touched, disabled }) {
+function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
     return (
-        <FormControl variant="outlined" fullWidth size="small" error={!!error}>
+        <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
-            <Stack sx={{ width: "100%" }} direction={"row"}>
+            <LocalizationProvider
-                <LocalizationProvider
+                dateAdapter={AdapterDateFnsJalali}
-                    dateAdapter={AdapterDateFnsJalali}
+                localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
-                    localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
+            >
-                >
+                <MobileDatePicker
-                    <MobileDateTimePicker
+                    value={value ? new Date(value) : null}
-                        ampm={false}
+                    sx={{ width: "100%" }}
-                        disableFuture
+                    id={name}
-                        value={value ? new Date(value) : null}
+                    name={name}
-                        onChange={(newValue) => {
+                    closeOnSelect
-                            const formattedDate = moment(newValue).locale("en").format("YYYY-MM-DD HH:mm");
+                    disableFuture
-                            formik.setFieldValue(name, formattedDate);
+                    label={helperText}
-                        }}
+                    aria-describedby="component-helper-text"
-                        slotProps={{
+                    onChange={(value) => {
-                            textField: {
+                        const date = new Date(value);
-                                placeholder:
+                        const formattedDate = moment(date).locale("en").format("YYYY-MM-DD");
-                                    name === "start_date" ? "تاریخ شروع را وارد کنید" : "تاریخ اتمام را وارد کنید",
+                        setFieldValue(name, formattedDate);
-                                variant: "outlined",
+                    }}
-                                disabled,
+                    minDate={minDate ? new Date(minDate) : null}
-                                fullWidth: true,
+                    maxDate={maxDate ? new Date(maxDate) : null}
-                                error: !!error,
+                    slotProps={{
-                                helperText: touched && error,
+                        textField: {
-                                size: "small", // Ensure that the TextField is small
+                            error: error,
-                                InputProps: {
+                            size: "small",
-                                    endAdornment: (
+                            placeholder: placeholder,
-                                        <InputAdornment position="end">
+                            InputProps: {
-                                            <IconButton
+                                endAdornment: (
-                                                size="small" // Set size="small" for IconButton
+                                    <InputAdornment position="end">
-                                                onClick={() => formik.setFieldValue(name, null)}
+                                        <IconButton
-                                            >
+                                            size="small"
-                                                <ClearIcon />
+                                            onClick={(event) => {
-                                            </IconButton>
+                                                event.stopPropagation();
-                                        </InputAdornment>
+                                                setFieldValue(name, "");
-                                    ),
+                                            }}
-                                },
+                                            sx={{
+                                                color: "#bfbfbf",
+                                                "&:hover": {
+                                                    backgroundColor: "rgba(189, 189, 189, 0.1)",
+                                                    color: "#363434",
+                                                },
+                                            }}
+                                        >
+                                            <ClearIcon />
+                                        </IconButton>
+                                    </InputAdornment>
+                                ),
                             },
-                        }}
+                        },
-                    />
+                    }}
-                </LocalizationProvider>
+                />
-            </Stack>
+                <FormHelperText id="component-helper-text" sx={{ color: error ? "#d32f2f" : "unset" }}>
-        </FormControl>
+                    {helperText ? helperText : ""}
+                </FormHelperText>
+            </LocalizationProvider>
+        </Box>
     );
 }
+
+export default MuiDatePicker;

src/core/components/MuiTimePicker.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { LocalizationProvider, MobileTimePicker } from "@mui/x-date-pickers";
+import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import { faIR } from "@mui/x-date-pickers/locales";
+import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import { parseISO, format } from "date-fns";
+
+function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperText, placeholder, error }) {
+    // Ensure value, minTime, maxTime are Date objects
+    const parsedValue = value ? (typeof value === "string" ? parseISO(value) : value) : null;
+    const parsedMinTime = minTime ? (typeof minTime === "string" ? parseISO(minTime) : minTime) : null;
+    const parsedMaxTime = maxTime && (typeof maxTime === "string" ? parseISO(maxTime) : null);
+
+    return (
+        <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
+            <LocalizationProvider
+                dateAdapter={AdapterDateFnsJalali}
+                localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
+            >
+                <MobileTimePicker
+                    value={parsedValue}
+                    sx={{ width: "100%" }}
+                    id={name}
+                    closeOnSelect
+                    label={helperText ? helperText : placeholder}
+                    ampm={false}
+                    timeSteps={{ hours: 1, minutes: 5 }}
+                    views={["hours", "minutes"]}
+                    name={name}
+                    onChange={(newValue) => {
+                        const formattedTime = newValue ? format(new Date(newValue), "HH:mm") : "";
+                        setFieldValue(name, formattedTime);
+                    }}
+                    minTime={parsedMinTime}
+                    maxTime={parsedMaxTime}
+                    slotProps={{
+                        textField: {
+                            placeholder: placeholder,
+                            size: "small",
+                            error: error,
+                            InputProps: {
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            size="small"
+                                            onClick={(event) => {
+                                                event.stopPropagation();
+                                                setFieldValue(name, "");
+                                            }}
+                                            sx={{
+                                                color: "#bfbfbf",
+                                                "&:hover": {
+                                                    backgroundColor: "rgba(189, 189, 189, 0.1)",
+                                                    color: "#363434",
+                                                },
+                                            }}
+                                        >
+                                            <ClearIcon />
+                                        </IconButton>
+                                    </InputAdornment>
+                                ),
+                            },
+                        },
+                    }}
+                />
+                <FormHelperText id="component-helper-text" sx={{ color: error ? "#d32f2f" : "unset" }}>
+                    {helperText ? helperText : ""}
+                </FormHelperText>
+            </LocalizationProvider>
+        </Box>
+    );
+}
+
+export default MuiTimePicker;

src/core/components/RahdarCode.jsx

@@ -0,0 +1,90 @@
+"use client";
+import { Autocomplete, CircularProgress, TextField } from "@mui/material";
+import { useEffect, useState } from "react";
+import useRequest from "@/lib/hooks/useRequest";
+import { debounce } from "@mui/material/utils";
+import { GET_RAHDARANS_LIST_SEARCH } from "@/core/utils/routes";
+
+const RahdarCode = ({ rahdarsCode, setRahdarsCode, error }) => {
+    const [inputValue, setInputValue] = useState(""); // مدیریت مقدار تایپ‌شده
+    const [options, setOptions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const requestServer = useRequest();
+
+    const fetchRahdarCodes = (inputValue, controller) => {
+        const debouncer = debounce((query) => {
+            if ((query || "").length < 3) {
+                setOptions([]);
+                return;
+            }
+            setLoading(true);
+            requestServer(`${GET_RAHDARANS_LIST_SEARCH}?code=${query}`, "get", {
+                requestOptions: { signal: controller.signal },
+            })
+                .then((response) => {
+                    setOptions(response.data.data || []);
+                })
+                .catch(() => {
+                    setOptions([]);
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        }, 500);
+        debouncer(inputValue);
+    };
+
+    useEffect(() => {
+        const controller = new AbortController();
+        fetchRahdarCodes(inputValue, controller);
+        return () => controller.abort();
+    }, [inputValue]);
+
+    return (
+        <Autocomplete
+            multiple // قابلیت انتخاب چندگانه
+            value={rahdarsCode} // آرایه موارد انتخاب‌شده
+            size="small"
+            onChange={(event, newValue) => {
+                setRahdarsCode(newValue || []); // به‌روزرسانی موارد انتخاب‌شده
+            }}
+            inputValue={inputValue} // مقدار تایپ‌شده
+            onInputChange={(event, newInputValue) => {
+                setInputValue(newInputValue || ""); // به‌روزرسانی مقدار تایپ‌شده
+            }}
+            options={options} // گزینه‌های موجود
+            getOptionLabel={(option) => (typeof option === "string" ? option : `${option.code} - ${option.name}`)}
+            isOptionEqualToValue={(option, value) => {
+                if (!value) return false;
+                if (value === "") return option.code === "";
+                return option.code === (value?.code || value);
+            }}
+            loading={loading}
+            loadingText="درحال جستجوی کد راهدار"
+            noOptionsText={
+                (inputValue || "").length < 3 ? "حداقل سه رقم از کد راهدار را وارد کنید" : "کد راهداری یافت نشد"
+            }
+            fullWidth
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    label="کد راهداران"
+                    fullWidth
+                    error={!!error}
+                    helperText={error?.message}
+                    InputProps={{
+                        ...params.InputProps,
+                        endAdornment: (
+                            <>
+                                {loading ? <CircularProgress size="25px" color="inherit" /> : null}
+                                {params.InputProps.endAdornment}
+                            </>
+                        ),
+                    }}
+                />
+            )}
+        />
+    );
+};
+
+export default RahdarCode;

src/core/components/ShowLocationMarker.jsx

@@ -0,0 +1,181 @@
+"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 = ({ start_lat, start_lng, end_lat, end_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(() => {
+        if (start_lat && end_lng) {
+            map.fitBounds(
+                [
+                    { lat: start_lat, lng: start_lng },
+                    { lat: end_lat, lng: end_lng },
+                ],
+                { paddingTopLeft: [16, 16], paddingBottomRight: [16, 130] }
+            );
+        } else if (start_lat) {
+            map.setView({ lat: start_lat, lng: start_lng }, 15);
+        }
+    }, [start_lat, start_lng, map, end_lng, end_lat]);
+
+    return (
+        <>
+            {start_lat && start_lng && (
+                <Marker
+                    position={{ lat: start_lat, lng: start_lng }}
+                    icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
+                />
+            )}
+            {end_lat && end_lng && (
+                <Marker
+                    position={{ lat: end_lat, lng: end_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: "5px",
+                    right: "5px",
+                }}
+            >
+                <Stack direction={end_lat && end_lng ? "row" : "column"} spacing={end_lat && end_lng ? 0.5 : 0}>
+                    {start_lat && start_lng && (
+                        <Stack spacing={1}>
+                            <FormControl size="small" variant="outlined">
+                                <InputLabel sx={{ color: "success.main" }} htmlFor="start_lat">
+                                    {end_lat && end_lng ? "طول جغرافیایی شروع" : "طول جغرافیایی"}
+                                </InputLabel>
+                                <OutlinedInput
+                                    id="start_lat"
+                                    type="text"
+                                    size="small"
+                                    readOnly
+                                    fullWidth
+                                    sx={{
+                                        "& .MuiOutlinedInput-notchedOutline": {
+                                            borderColor: "success.main",
+                                        },
+                                        color: "success.main",
+                                    }}
+                                    value={start_lat}
+                                    endAdornment={
+                                        <InputAdornment position="end">
+                                            <VerifiedIcon color="success" />
+                                        </InputAdornment>
+                                    }
+                                    label={end_lat && end_lng ? "طول جغرافیایی شروع" : "طول جغرافیایی"}
+                                />
+                            </FormControl>
+                            <FormControl size="small" variant="outlined">
+                                <InputLabel sx={{ color: "success.main" }} htmlFor="start_lng">
+                                    {end_lat && end_lng ? "عرض جغرافیایی شروع" : "عرض جغرافیایی"}
+                                </InputLabel>
+                                <OutlinedInput
+                                    id="start_lng"
+                                    type="text"
+                                    size="small"
+                                    readOnly
+                                    fullWidth
+                                    sx={{
+                                        "& .MuiOutlinedInput-notchedOutline": {
+                                            borderColor: "success.main",
+                                        },
+                                        color: "success.main",
+                                    }}
+                                    value={start_lng}
+                                    endAdornment={
+                                        <InputAdornment position="end">
+                                            <VerifiedIcon color="success" />
+                                        </InputAdornment>
+                                    }
+                                    label={end_lat && end_lng ? "عرض جغرافیایی شروع" : "عرض جغرافیایی"}
+                                />
+                            </FormControl>
+                        </Stack>
+                    )}
+                    {end_lat && end_lng && (
+                        <Stack spacing={1}>
+                            <FormControl size="small" variant="outlined">
+                                <InputLabel sx={{ color: "success.main" }} htmlFor="end_lat">
+                                    طول جغرافیایی پایان
+                                </InputLabel>
+                                <OutlinedInput
+                                    id="end_lat"
+                                    type="text"
+                                    size="small"
+                                    readOnly
+                                    sx={{
+                                        "& .MuiOutlinedInput-notchedOutline": {
+                                            borderColor: "success.main",
+                                        },
+                                        color: "success.main",
+                                    }}
+                                    value={end_lat}
+                                    endAdornment={
+                                        <InputAdornment position="end">
+                                            <VerifiedIcon color="success" />
+                                        </InputAdornment>
+                                    }
+                                    label="طول جغرافیایی پایان"
+                                />
+                            </FormControl>
+                            <FormControl size="small" variant="outlined">
+                                <InputLabel sx={{ color: "success.main" }} htmlFor="end_lng">
+                                    عرض جغرافیایی پایان
+                                </InputLabel>
+                                <OutlinedInput
+                                    id="end_lng"
+                                    type="text"
+                                    size="small"
+                                    readOnly
+                                    sx={{
+                                        "& .MuiOutlinedInput-notchedOutline": {
+                                            borderColor: "success.main",
+                                        },
+                                        color: "success.main",
+                                    }}
+                                    value={end_lng}
+                                    endAdornment={
+                                        <InputAdornment position="end">
+                                            <VerifiedIcon color="success" />
+                                        </InputAdornment>
+                                    }
+                                    label="عرض جغرافیایی پایان"
+                                />
+                            </FormControl>
+                        </Stack>
+                    )}
+                </Stack>
+            </Box>
+        </>
+    );
+};
+
+export default ShowLocationMarker;

src/core/components/Toasts/error.jsx

@@ -61,6 +61,35 @@ export const errorUnauthorizedToast = (toastContainer) =>
             draggable: true,
         }
     );
+export const errorAccessDeniedToast = (message, toastContainer) =>
+    toast.error(
+        () => (
+            <Box
+                sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "start",
+                    justifyContent: "start",
+                }}
+            >
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Dangerous color="error" sx={{ mr: 1.6 }} />
+                    <Box sx={{ display: "flex", flexDirection: "column" }}>
+                        <Typography variant="caption">{message || "Access Denied"}</Typography>
+                    </Box>
+                </Box>
+            </Box>
+        ),
+        {
+            icon: false,
+            containerId: toastContainer,
+            autoClose: 3000,
+            hideProgressBar: true,
+            pauseOnHover: true,
+            closeOnClick: false,
+            draggable: true,
+        }
+    );
 
 export const errorLogicToast = (message, toastContainer) =>
     toast.error(

src/core/components/UploadSystem.jsx

@@ -0,0 +1,94 @@
+import { Box, Button, Paper, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import { useRef } from "react";
+
+const UploadSystem = ({ selectedImage, handleUploadChange, imageSize, fileType, showAddIcon }) => {
+    const fileInputRef = useRef(null);
+
+    const handleClick = () => {
+        fileInputRef.current.click();
+    };
+
+    return (
+        <Box sx={{ width: "100%", my: 1 }}>
+            {showAddIcon ? (
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        border: "1px solid #b3b3b3",
+                        borderRadius: "10px",
+                        cursor: "pointer",
+                        padding: "5px",
+                        height: imageSize[1],
+                    }}
+                    onClick={handleClick}
+                >
+                    <AddIcon sx={{ fontSize: "2rem", color: "#a19d9d" }} />
+                    <Typography
+                        variant="subtitle2"
+                        sx={{
+                            fontWeight: 600,
+                            fontSize: "0.8rem",
+                            color: "#a19d9d",
+                            mt: 1,
+                        }}
+                        textAlign="center"
+                    >
+                        فرمت قابل قبول : png, jpg
+                        <br />
+                        حداکثر 3Mb
+                    </Typography>
+                </Box>
+            ) : (
+                <>
+                    {fileType && fileType.startsWith("image/") && (
+                        <Box
+                            width="100%"
+                            height={imageSize[1]}
+                            sx={{
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                cursor: "pointer",
+                                objectFit: "contain",
+                                border: "1px solid #b3b3b3",
+                                borderRadius: "10px",
+                                padding: "5px",
+                                overflow: "hidden",
+                            }}
+                            onClick={handleClick}
+                        >
+                            <Paper
+                                elevation={0}
+                                sx={{
+                                    width: "100%",
+                                    height: "100%",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    backgroundSize: "contain",
+                                    backgroundRepeat: "no-repeat",
+                                    backgroundPosition: "center",
+                                    backgroundImage: `url(${selectedImage})`,
+                                }}
+                            />
+                        </Box>
+                    )}
+                </>
+            )}
+            <input
+                type="file"
+                accept="image/*"
+                style={{ display: "none" }}
+                onChange={handleUploadChange}
+                ref={fileInputRef}
+            />
+        </Box>
+    );
+};
+export default UploadSystem;

src/core/utils/errorResponse.js

@@ -1,6 +1,7 @@
 "use client";
 import { toast } from "react-toastify";
 import {
+    errorAccessDeniedToast,
     errorClientToast,
     errorLogicToast,
     errorServerToast,
@@ -22,6 +23,9 @@ const errorClient = (response, notification, toastContainer, logout) => {
             logout();
             if (notification) errorUnauthorizedToast(toastContainer);
             break;
+        case 403:
+            if (notification) errorAccessDeniedToast(response.data.message, toastContainer);
+            break;
         case 422:
             if ("type" in response.data) {
                 if (Array.isArray(response.data.message)) {

src/core/utils/pageMenu.js

@@ -108,7 +108,7 @@ export const pageMenu = [
                         id: "roadItemManagmentSupervisorCartable",
                         label: "کارتابل",
                         type: "page",
-                        route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/supervisor/cartable",
+                        route: "/dashboard/road-items/supervisor",
                         permissions: [
                             "show-road-item-supervise-cartable",
                             "show-road-item-supervise-cartable-province",
@@ -135,7 +135,7 @@ export const pageMenu = [
                         id: "roadItemManagmentOparationCartable",
                         label: "کارتابل",
                         type: "page",
-                        route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/operator/cartable",
+                        route: "/dashboard/road-items/operator",
                         permissions: ["create-road-item"],
                     },
                 ],

src/core/utils/routes.js

@@ -27,7 +27,25 @@ export const DELETE_SAMPLE_LIST = api + "/api/v3/azmayesh_samples/delete";
 export const DELETE_AZMAYESH_TYPE_LIST = api + "/api/v3/azmayesh_types/delete";
 export const ADD_AZMAYESH_TYPE = api + "/api/v3/azmayesh_types/store";
 export const UPDATE_AZMAYESH_TYPE = api + "/api/v3/azmayesh_types/update";
-export const GET_OPERATOR_LIST = "/v3/api/fake-operator-list";
+
-export const EXPORT_OPERATOR_LIST = "https://rms.rmto.ir/v2/road_patrols/operator/cartable/report";
+//road patrol
-export const GET_SUPERVISOR_LIST = "/v3/api/fake-supervisor-list";
+export const GET_ROAD_PATROL_OPERATOR_LIST = "/v3/api/fake-road-patrol/operator";
-export const EXPORT_SUPERVISOR_LIST = "https://rms.rmto.ir/v2/road_patrols/supervisor/cartable/report";
+export const EXPORT_ROAD_PATROL_OPERATOR_LIST = "https://rms.rmto.ir/v2/road_patrols/operator/cartable/report";
+export const GET_ROAD_PATROL_SUPERVISOR_LIST = "/v3/api/fake-road-patrol/supervisor";
+export const EXPORT_ROAD_PATROL_SUPERVISOR_LIST = "https://rms.rmto.ir/v2/road_patrols/supervisor/cartable/report";
+
+// road items
+export const GET_ROAD_ITEMS_SUPERVISOR_LIST = api + "/api/v3/road_items/supervisor_index";
+export const EXPORT_ROAD_ITEMS_SUPERVISOR_LIST = api + "/api/v3/road_items/supervisor_report";
+export const GET_ROAD_ITEMS_OPERATOR_LIST = api + "/api/v3/road_items/operator_index";
+export const EXPORT_ROAD_ITEMS_OPERATOR_LIST = api + "/api/v3/road_items/operator_report";
+export const GET_ROAD_ITEMS_ITEM = "https://rms.witel.ir/v2/items";
+export const GET_ROAD_ITEMS_SUB_ITEM = "https://rms.witel.ir/v2/sub_items";
+export const CREATE_ROAD_ITEMS = api + "/api/v3/road_items/store";
+export const UPDATE_ROAD_ITEMS = api + "/api/v3/road_items/update";
+export const VERIFY_BY_SUPERVISOR = api + "/api/v3/road_items/verify_by_supervisor";
+export const REJECT_BY_SUPERVISOR = api + "/api/v3/road_items/verify_by_supervisor";
+export const DELETE_BY_SUPERVISOR = api + "/api/v3/road_items/delete";
+export const RESTORE_BY_SUPERVISOR = api + "/api/v3/road_items/restore";
+export const GET_CAR_LIST_SEARCH = api + "/api/v3/cmms_machines/search";
+export const GET_RAHDARANS_LIST_SEARCH = api + "/api/v3/rahdaran/search";

src/lib/contexts/DataTable.js

@@ -17,6 +17,16 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
     const [sortData, setSortData] = useState(initialSort || []);
     const [initHide, setInitHide] = useState({});
     const [hideData, setHideData] = useState({});
+    const [isDirty, setIsDirty] = useState(false);
+
+    useEffect(() => {
+        const hasConflict =
+            JSON.stringify(hideData) !== JSON.stringify(initHide) ||
+            JSON.stringify(sortData) !== JSON.stringify(initSort) ||
+            JSON.stringify(filterData) !== JSON.stringify(initFilter);
+
+        setIsDirty(hasConflict);
+    }, [hideData, sortData, filterData, initHide, initSort, initFilter]);
 
     useEffect(() => {
         if (!settingStore) return;
@@ -125,7 +135,9 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
     if (!isInitStates) return <LinearProgress sx={{ borderRadius: 2 }} />;
 
     return (
-        <DataTableContext.Provider value={{ filterData, setFilterData, sortData, setSortData, hideData, setHideData }}>
+        <DataTableContext.Provider
+            value={{ filterData, setFilterData, sortData, setSortData, hideData, setHideData, isDirty }}
+        >
             {children}
         </DataTableContext.Provider>
     );

src/lib/hooks/useDataTable.js

@@ -2,8 +2,9 @@ import { useContext } from "react";
 import { DataTableContext } from "@/lib/contexts/DataTable";
 
 const useTableSetting = () => {
-    const { filterData, setFilterData, sortData, setSortData, hideData, setHideData } = useContext(DataTableContext);
+    const { filterData, setFilterData, sortData, setSortData, hideData, setHideData, isDirty } =
-    return { filterData, setFilterData, sortData, setSortData, hideData, setHideData };
+        useContext(DataTableContext);
+    return { filterData, setFilterData, sortData, setSortData, hideData, setHideData, isDirty };
 };
 
 export default useTableSetting;

src/lib/hooks/useRoadItemGetISubtems.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { GET_ROAD_ITEMS_SUB_ITEM } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+
+const useRoadItemGetItems = (id) => {
+    const requestServer = useRequest();
+    const [subItemsList, setSubItemsList] = useState([]);
+    const [loadingSubItemsList, setLoadingSubItemsList] = useState(true);
+    const [errorSubItemsList, setErrorSubItemsList] = useState(null);
+
+    useEffect(() => {
+        const fetchSubItems = async () => {
+            try {
+                const response = await requestServer(`${GET_ROAD_ITEMS_SUB_ITEM}/${id}`);
+                setSubItemsList(response.data.data);
+                setLoadingSubItemsList(false);
+            } catch (e) {
+                setErrorSubItemsList(e);
+                setLoadingSubItemsList(false);
+            }
+        };
+
+        fetchSubItems();
+    }, []);
+
+    return { subItemsList, loadingSubItemsList, errorSubItemsList };
+};
+
+export default useRoadItemGetItems;

src/lib/hooks/useRoadItemGetItems.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { GET_ROAD_ITEMS_ITEM } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+
+const useRoadItemGetItems = () => {
+    const requestServer = useRequest();
+    const [itemsList, setItemsList] = useState([]);
+    const [loadingItemsList, setLoadingItemsList] = useState(true);
+    const [errorItemsList, setErrorItemsList] = useState(null);
+
+    useEffect(() => {
+        const fetchItems = async () => {
+            try {
+                const response = await requestServer(`${GET_ROAD_ITEMS_ITEM}`);
+                setItemsList(response.data.data);
+                setLoadingItemsList(false);
+            } catch (e) {
+                setErrorItemsList(e);
+                setLoadingItemsList(false);
+            }
+        };
+
+        fetchItems();
+    }, []);
+
+    return { itemsList, loadingItemsList, errorItemsList };
+};
+
+export default useRoadItemGetItems;