Merge branch 'feature/road_safety_cartable' into 'develop'

Feature/road safety cartable

See merge request witel-front-end/rms!97

src/app/(withAuth)/(dashboardLayout)/dashboard/azmayesh/loading.jsx

@@ -1,7 +0,0 @@
-"use client";
-import PageLoading from "@/core/components/PageLoading";
-
-const Loading = () => {
-    return <PageLoading />;
-};
-export default Loading;

src/app/(withAuth)/(dashboardLayout)/dashboard/azmayesh_type/loading.jsx

@@ -1,7 +0,0 @@
-"use client";
-import PageLoading from "@/core/components/PageLoading";
-
-const Loading = () => {
-    return <PageLoading />;
-};
-export default Loading;

src/app/(withAuth)/(dashboardLayout)/dashboard/road-patrols/operator/loading.jsx

@@ -1,7 +0,0 @@
-"use client";
-import PageLoading from "@/core/components/PageLoading";
-
-const Loading = () => {
-    return <PageLoading />;
-};
-export default Loading;

src/app/(withAuth)/(dashboardLayout)/dashboard/road-patrols/supervisor/loading.jsx

@@ -1,7 +0,0 @@
-"use client";
-import PageLoading from "@/core/components/PageLoading";
-
-const Loading = () => {
-    return <PageLoading />;
-};
-export default Loading;

src/app/(withAuth)/(dashboardLayout)/dashboard/road-safety/operator/loading.jsx

@@ -1,7 +0,0 @@
-"use client";
-import PageLoading from "@/core/components/PageLoading";
-
-const Loading = () => {
-    return <PageLoading />;
-};
-export default Loading;

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

@@ -6,13 +6,7 @@ export const metadata = {
 };
 const Page = () => {
     return (
-        <WithPermission
+        <WithPermission permission_name={["show-safety-and-privacy-operator-cartable-edarate-shahri"]}>
-            permission_name={[
-                "show-safety-and-privacy-operator-cartable",
-                "show-safety-and-privacy-operator-cartable-province",
-                "show-safety-and-privacy-operator-cartable-edarate-shahri",
-            ]}
-        >
             <OperatorPage />
             {/*<ActivityCodeLog activity_code={1145} />*/}
         </WithPermission>

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

@@ -0,0 +1,21 @@
+import SupervisorPage from "@/components/dashboard/roadSafety/supervisor";
+import WithPermission from "@/core/middlewares/withPermission";
+// import ActivityCodeLog from "@/core/components/ActivityCodeLog";
+export const metadata = {
+    title: "کارتابل ارزیابی نگهداری حریم",
+};
+const Page = () => {
+    return (
+        <WithPermission
+            permission_name={[
+                "show-safety-and-privacy-operator-cartable",
+                "show-safety-and-privacy-operator-cartable-province",
+            ]}
+        >
+            <SupervisorPage />
+            {/*<ActivityCodeLog activity_code={1145} />*/}
+        </WithPermission>
+    );
+};
+
+export default Page;

src/components/dashboard/roadSafety/operator/Form/StepTwo/StepTwoContent.jsx

@@ -1,8 +1,23 @@
-import { Box, Button, Chip, DialogActions, DialogContent, Divider, Fade, Grid, Stack, Typography } from "@mui/material";
+import {
+    Box,
+    Button,
+    Chip,
+    DialogActions,
+    DialogContent,
+    Divider,
+    Fade,
+    FormControlLabel,
+    Grid,
+    Radio,
+    RadioGroup,
+    Stack,
+    TextField,
+    Typography,
+} from "@mui/material";
 import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, useForm, useWatch } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { mixed, object } from "yup";
+import { mixed, object, string } from "yup";
 import ShowDocuments from "./ShowDocuments";
 import StyledForm from "@/core/components/StyledForm";
 import { SECOND_STEP_STORE } from "@/core/utils/routes";
@@ -12,24 +27,35 @@ const StepTwoContent = ({ setOpenStepTwoDialog, mutate, rowId }) => {
     const requestServer = useRequest({ notificationSuccess: true });
     const [selectedDamageItemList, setSelectedDamageItemList] = useState([]);
     const defaultValues = {
+        need_judiciary: "0",
+        operator_description: "",
         judiciary_document: null,
     };
     const validationSchema = object({
-        judiciary_document: mixed().test("is-array", "لطفا حداقل یک فایل بارگذاری کنید!", (value) => {
+        judiciary_document: mixed().when("need_judiciary", {
-            return Array.isArray(value) && value.length > 0;
+            is: "1",
+            then: (schema) =>
+                schema.test("is-array", "لطفا حداقل یک فایل بارگذاری کنید!", (value) => {
+                    return Array.isArray(value) && value.length > 0;
+                }),
+            otherwise: (schema) => schema.notRequired(),
+        }),
+        operator_description: string().when("need_judiciary", {
+            is: "0",
+            then: (schema) => schema.required("لطفا توضیحات را وارد کنید!"),
+            otherwise: (schema) => schema.notRequired(),
         }),
     });
     const {
         control,
         handleSubmit,
         setValue,
-        formState: { isSubmitting, errors },
+        formState: { isSubmitting },
     } = useForm({
         defaultValues,
         resolver: yupResolver(validationSchema),
         mode: "all",
     });
-
     const handleCreateDamage = (files) => {
         setSelectedDamageItemList((prev) => {
             const newFiles = files.filter((file) => !prev.some((item) => item.name === file.name));
@@ -40,12 +66,19 @@ const StepTwoContent = ({ setOpenStepTwoDialog, mutate, rowId }) => {
         setValue("judiciary_document", selectedDamageItemList);
     }, [selectedDamageItemList]);
 
+    const need_judiciary = useWatch({ control, name: "need_judiciary" });
+
     const deleteDamageItem = (name) => {
         setSelectedDamageItemList((prev) => prev.filter((documentItem) => documentItem.name !== name));
     };
     const onSubmit = async (data) => {
         const formData = new FormData();
-        data.judiciary_document.map((item, index) => formData.append(`judiciary_document[${index}]`, item));
+        formData.append(`need_judiciary`, data.need_judiciary);
+        if (data.need_judiciary == 1) {
+            data.judiciary_document.map((item, index) => formData.append(`judiciary_document[${index}]`, item));
+        } else {
+            formData.append(`operator_description`, data.operator_description);
+        }
         await requestServer(`${SECOND_STEP_STORE}/${rowId}`, "post", {
             data: formData,
             hasSidebarUpdate: true,
@@ -58,69 +91,108 @@ const StepTwoContent = ({ setOpenStepTwoDialog, mutate, rowId }) => {
     };
     return (
         <StyledForm onSubmit={handleSubmit(onSubmit)}>
-            <DialogContent dividers>
+            <DialogContent dividers sx={{ minHeight: need_judiciary == 1 ? 255 : "" }}>
-                <Stack spacing={2}>
+                <Controller
-                    <Controller
+                    name="need_judiciary"
-                        control={control}
+                    control={control}
-                        name={"judiciary_document"}
+                    rules={{ required: "لطفا حالت را انتخاب کنید" }}
-                        render={({ field, fieldState: { error } }) => (
+                    render={({ field }) => (
-                            <>
+                        <>
-                                <Button variant="contained" component="label">
+                            <RadioGroup {...field} sx={{ mb: 1, justifyContent: "center" }} row>
-                                    انتخاب فایل
+                                <FormControlLabel value="0" control={<Radio />} label="بدون مستندات قضایی" />
-                                    <input
+                                <FormControlLabel value="1" control={<Radio />} label="دارای مستندات قضایی" />
-                                        type="file"
+                            </RadioGroup>
-                                        hidden
+                        </>
-                                        onChange={(e) => {
+                    )}
-                                            const files = Array.from(e.target.files);
+                />
-                                            if (files.length > 0) {
+                {need_judiciary == 1 ? (
-                                                handleCreateDamage(files);
+                    <>
-                                            }
+                        <Stack spacing={2}>
-                                        }}
+                            <Controller
-                                    />
+                                control={control}
-                                </Button>
+                                name={"judiciary_document"}
-                                {error && <Typography color={"error"}>{error.message}</Typography>}
+                                render={({ field, fieldState: { error } }) => (
-                            </>
+                                    <>
+                                        <Button variant="contained" component="label">
+                                            انتخاب فایل
+                                            <input
+                                                type="file"
+                                                hidden
+                                                onChange={(e) => {
+                                                    const files = Array.from(e.target.files);
+                                                    if (files.length > 0) {
+                                                        handleCreateDamage(files);
+                                                    }
+                                                }}
+                                            />
+                                        </Button>
+                                        {error && <Typography color={"error"}>{error.message}</Typography>}
+                                    </>
+                                )}
+                            />
+                        </Stack>
+                        <Divider sx={{ my: 2, width: "100%" }}>
+                            <Chip variant="outlined" label="لیست مستندات قضایی" />
+                        </Divider>
+                        {selectedDamageItemList.length === 0 && (
+                            <Box
+                                sx={{
+                                    my: 4,
+                                    width: "100%",
+                                    textAlign: "center",
+                                }}
+                            >
+                                <Typography variant="h6" sx={{ letterSpacing: "2px", color: "#606060" }}>
+                                    فایل موردنظر را بارگذاری کنید.
+                                </Typography>
+                            </Box>
                         )}
-                    />
+                        <Fade in={selectedDamageItemList.length !== 0} sx={{ width: "100%" }}>
-                </Stack>
+                            <Grid
-                <Divider sx={{ my: 2, width: "100%" }}>
+                                container
-                    <Chip variant="outlined" label="لیست مستندات قضایی" />
+                                rowSpacing={2}
-                </Divider>
+                                sx={{
-                {selectedDamageItemList.length === 0 && (
+                                    p: 1,
-                    <Box
+                                    mt: 2,
-                        sx={{
+                                    minHeight: 150,
-                            my: 4,
+                                    overflowY: "auto",
-                            width: "100%",
+                                }}
-                            textAlign: "center",
+                            >
-                        }}
+                                {selectedDamageItemList.length !== 0 &&
-                    >
+                                    selectedDamageItemList.map((selectedDamageItem, index) => (
-                        <Typography variant="h6" sx={{ letterSpacing: "2px", color: "#606060" }}>
+                                        <Grid key={index} item xs={12}>
-                            فایل موردنظر را بارگذاری کنید.
+                                            <ShowDocuments
-                        </Typography>
+                                                deleteDamageItem={deleteDamageItem}
-                    </Box>
+                                                selectedDamageItem={selectedDamageItem}
+                                            />
+                                        </Grid>
+                                    ))}
+                            </Grid>
+                        </Fade>
+                    </>
+                ) : (
+                    <Stack>
+                        <Controller
+                            control={control}
+                            name={"operator_description"}
+                            render={({ field, fieldState: { error } }) => (
+                                <TextField
+                                    {...field}
+                                    multiline
+                                    rows={5}
+                                    label="توضیحات و دلایل"
+                                    placeholder="لطفاً علت ثبت گام بدون مستندات قضایی را توضیح دهید"
+                                    error={!!error}
+                                    helperText={error?.message}
+                                    fullWidth
+                                    variant="outlined"
+                                    sx={{ mt: 1 }}
+                                    InputLabelProps={{ shrink: true }}
+                                />
+                            )}
+                        />
+                    </Stack>
                 )}
-                <Fade in={selectedDamageItemList.length !== 0} sx={{ width: "100%" }}>
-                    <Grid
-                        container
-                        spacing={2}
-                        sx={{
-                            p: 1,
-                            mt: 2,
-                            minHeight: 150,
-                            overflowY: "auto",
-                        }}
-                    >
-                        {selectedDamageItemList.length !== 0 &&
-                            selectedDamageItemList.map((selectedDamageItem, index) => (
-                                <Grid key={index} item xs={12}>
-                                    <ShowDocuments
-                                        deleteDamageItem={deleteDamageItem}
-                                        selectedDamageItem={selectedDamageItem}
-                                    />
-                                </Grid>
-                            ))}
-                    </Grid>
-                </Fade>
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => setOpenStepTwoDialog(false)} variant={"outlined"} color={"secondary"}>

src/components/dashboard/roadSafety/operator/OperatorList.jsx

@@ -1,33 +1,39 @@
 "use client";
 import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { GET_SAFETY_AND_PRIVACY_OPERATOR } from "@/core/utils/routes";
+import useSafetyAndPrivacyGetItems from "@/lib/hooks/useSafetyAndPrivacyGetItems";
 import { Box, Stack } from "@mui/material";
 import moment from "jalali-moment";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import RowActions from "./RowActions";
-import Toolbar from "./Toolbar";
-import { usePermissions } from "@/lib/hooks/usePermissions";
-import { useAuth } from "@/lib/contexts/auth";
-import useProvinces from "@/lib/hooks/useProvince";
-import useEdaratLists from "@/lib/hooks/useEdaratLists";
-import { GET_SAFETY_AND_PRIVACY } from "@/core/utils/routes";
-import RecognizePictureDialog from "./RowActions/RecognizePictureDialog";
 import ActionPictureDialog from "./RowActions/ActionPictureDialog";
+import DescriptionForm from "./RowActions/DescriptionForm";
+import FinishDescriptionForm from "./RowActions/FinishDescriptionForm";
 import JudiciaryDocumentDialog from "./RowActions/JudiciaryDocumentDialog";
 import LocationForm from "./RowActions/LocationForm";
-import useSafetyAndPrivacyGetItems from "@/lib/hooks/useSafetyAndPrivacyGetItems";
+import RecognizePictureDialog from "./RowActions/RecognizePictureDialog";
+import Toolbar from "./Toolbar";
+import OperatorDescriptionForm from "./RowActions/OperatorDescriptionForm";
 
 const OperatorList = () => {
-    const { data: userPermissions } = usePermissions();
+    const stepOptions = [
-    const hasCountryPermission = userPermissions?.includes("show-safety-and-privacy-operator-cartable");
+        { value: "", label: "همه گام ها" },
-    const hasProvincePermission = userPermissions?.includes("show-safety-and-privacy-operator-cartable-province");
-    const { user } = useAuth();
-    const statusOptions = [
-        { value: "", label: "همه وضعیت ها" },
         { value: 1, label: "گام اول (شناسایی)" },
         { value: 2, label: "گام دوم (مستندات قضایی)" },
         { value: 3, label: "گام سوم (برخورد)" },
     ];
+    const statusOptions = [
+        { value: "", label: "همه وضعیت ها" },
+        { value: 0, label: "درحال بررسی" },
+        { value: 1, label: "تایید" },
+        { value: 2, label: "عدم تایید" },
+    ];
+    const finishOptions = [
+        { value: "", label: "همه موارد" },
+        { value: 0, label: "در جریان" },
+        { value: 1, label: "خاتمه یافته" },
+    ];
     const axisOptions = [
         { value: "", label: "همه محور ها" },
         { value: 1, label: "آزادراه" },
@@ -37,100 +43,8 @@ const OperatorList = () => {
         { value: 5, label: "روستایی" },
     ];
 
-    const columns = useMemo(() => {
+    const columns = useMemo(
-        const ProvinceColumn = {
+        () => [
-            header: "استان",
-            id: "province_id",
-            enableColumnFilter: true,
-            datatype: "numeric",
-            filterMode: "equals",
-            grow: false,
-            size: 130,
-            ColumnSelectComponent: (props) => {
-                const { provinces, errorProvinces, loadingProvinces } = useProvinces();
-                const getColumnSelectOptions = useMemo(() => {
-                    if (loadingProvinces) {
-                        return [{ value: "loading", label: "در حال بارگذاری..." }];
-                    }
-                    if (errorProvinces) {
-                        return [{ value: "error", label: "خطا در بارگذاری" }];
-                    }
-                    return [
-                        { value: "", label: "کل کشور" },
-                        ...provinces.map((province) => ({
-                            value: province.id,
-                            label: province.name_fa,
-                        })),
-                    ];
-                }, [provinces, errorProvinces, loadingProvinces]);
-                return (
-                    <CustomSelectByDependency
-                        {...props}
-                        value={loadingProvinces ? "loading" : props.filterParameters.value}
-                        columnSelectOption={getColumnSelectOptions}
-                    />
-                );
-            },
-            Cell: ({ row }) => <>{row.original.province_fa}</>,
-        };
-        const EdareShahriColumn = {
-            header: "اداره",
-            id: "edare_shahri_id",
-            enableColumnFilter: true,
-            datatype: "numeric",
-            filterMode: "equals",
-            dependencyId: hasCountryPermission ? "province_id" : null,
-            grow: false,
-            size: 120,
-            ColumnSelectComponent: (props) => {
-                const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
-                    hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
-                );
-                const [prevDependency, setPrevDependency] = useState(
-                    hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
-                );
-
-                const getColumnSelectOptions = useMemo(() => {
-                    if (hasCountryPermission && props.dependencyFieldValue.value === "") {
-                        return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
-                    }
-                    if (loadingEdaratList) {
-                        return [{ value: "loading", label: "در حال بارگذاری..." }];
-                    }
-                    if (errorEdaratList) {
-                        return [{ value: "error", label: "خطا در بارگذاری" }];
-                    }
-                    return [
-                        { value: "", label: "کل ادارات" },
-                        ...edaratList.map((edare) => ({
-                            value: edare.id,
-                            label: edare.name_fa,
-                        })),
-                    ];
-                }, [edaratList, loadingEdaratList, errorEdaratList]);
-                useEffect(() => {
-                    if (hasCountryPermission) return;
-                    if (prevDependency === props.dependencyFieldValue?.value) return;
-                    props.handleChange({ ...props.filterParameters, value: "" });
-                    setPrevDependency(props.dependencyFieldValue?.value);
-                }, [props.dependencyFieldValue?.value, hasCountryPermission]);
-                return (
-                    <CustomSelectByDependency
-                        {...props}
-                        value={
-                            props.dependencyFieldValue?.value === ""
-                                ? "empty"
-                                : loadingEdaratList
-                                  ? "loading"
-                                  : props.filterParameters.value
-                        }
-                        columnSelectOption={getColumnSelectOptions}
-                    />
-                );
-            },
-            Cell: ({ row }) => <>{row.original.edare_shahri_name}</>,
-        };
-        return [
             {
                 accessorKey: "id",
                 header: "کد یکتا",
@@ -143,9 +57,6 @@ const OperatorList = () => {
                 grow: false,
                 size: 100,
             },
-            ...(hasCountryPermission ? [ProvinceColumn] : []),
-            ...(hasProvincePermission ? [EdareShahriColumn] : []),
-
             {
                 header: "اطلاعات فعالیت",
                 id: "info",
@@ -250,21 +161,126 @@ const OperatorList = () => {
                 ],
             },
             {
-                header: "وضعیت",
+                header: "وضعیت فعالیت",
-                id: "step",
+                id: "allstatus",
-                enableColumnFilter: true,
+                enableColumnFilter: false,
-                datatype: "numeric",
+                enableSorting: false,
-                filterMode: "equals",
+                datatype: "text",
-                sortDescFirst: true,
                 grow: false,
-                size: 100,
+                size: 50,
-                columnSelectOption: () => {
+                columns: [
-                    return statusOptions.map((status) => ({
+                    {
-                        value: status.value,
+                        header: "وضعیت گام ها",
-                        label: status.label,
+                        id: "step",
-                    }));
+                        enableColumnFilter: true,
-                },
+                        datatype: "numeric",
-                Cell: ({ row }) => <>{row.original.step_fa}</>,
+                        filterMode: "equals",
+                        sortDescFirst: true,
+                        grow: false,
+                        size: 100,
+                        columnSelectOption: () => {
+                            return stepOptions.map((status) => ({
+                                value: status.value,
+                                label: status.label,
+                            }));
+                        },
+                        Cell: ({ row }) => <>{row.original.step_fa}</>,
+                    },
+                    {
+                        header: "وضعیت فرایند",
+                        id: "is_finished",
+                        enableColumnFilter: true,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        sortDescFirst: true,
+                        grow: false,
+                        size: 100,
+                        columnSelectOption: () => {
+                            return finishOptions.map((status) => ({
+                                value: status.value,
+                                label: status.label,
+                            }));
+                        },
+                        Cell: ({ row }) => (
+                            <>
+                                {row.original.is_finished == 1
+                                    ? "خاتمه یافته"
+                                    : row.original.is_finished == 0
+                                      ? "در جریان"
+                                      : "-"}
+                            </>
+                        ),
+                    },
+                    {
+                        header: "علت خاتمه فرایند",
+                        id: "finished_description",
+                        enableColumnFilter: false,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) =>
+                            row.original.final_description ? (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <FinishDescriptionForm description={row.original.final_description} />
+                                </Stack>
+                            ) : (
+                                "-"
+                            ),
+                    },
+                    {
+                        header: "وضعیت نظارت",
+                        id: "status",
+                        enableColumnFilter: true,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        sortDescFirst: true,
+                        grow: false,
+                        size: 100,
+                        columnSelectOption: () => {
+                            return statusOptions.map((status) => ({
+                                value: status.value,
+                                label: status.label,
+                            }));
+                        },
+                        Cell: ({ row }) => <>{row.original.status_fa || "-"}</>,
+                    },
+                    {
+                        header: "توضیحات ناظر",
+                        id: "supervisor_description",
+                        enableColumnFilter: false,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) =>
+                            row.original.supervisor_description ? (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <DescriptionForm description={row.original.supervisor_description} />
+                                </Stack>
+                            ) : (
+                                "-"
+                            ),
+                    },
+                ],
             },
             {
                 header: "گام اول (شناسایی)",
@@ -349,7 +365,8 @@ const OperatorList = () => {
                         Cell: ({ row }) => {
                             return (
                                 <Stack alignItems={"center"} justifyContent={"center"}>
-                                    {row.original.judiciary_document_upload_date !== "0000-00-00 00:00:00" ? (
+                                    {row.original.judiciary_document_upload_date !== "0000-00-00 00:00:00" &&
+                                    row.original.judiciary_document_upload_date ? (
                                         <JudiciaryDocumentDialog rowId={row.getValue("id")} />
                                     ) : (
                                         <>-</>
@@ -375,6 +392,32 @@ const OperatorList = () => {
                         grow: false,
                         size: 100,
                     },
+                    {
+                        header: "توضیحات کارشناس",
+                        id: "operator_description",
+                        enableColumnFilter: false,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) =>
+                            row.original.operator_description ? (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <OperatorDescriptionForm description={row.original.operator_description} />
+                                </Stack>
+                            ) : (
+                                "-"
+                            ),
+                    },
                 ],
             },
             {
@@ -431,8 +474,9 @@ const OperatorList = () => {
                     },
                 ],
             },
-        ];
+        ],
-    }, []);
+        []
+    );
 
     return (
         <>
@@ -441,7 +485,7 @@ const OperatorList = () => {
                     need_filter={true}
                     columns={columns}
                     sorting={[{ id: "id", desc: true }]}
-                    table_url={GET_SAFETY_AND_PRIVACY}
+                    table_url={GET_SAFETY_AND_PRIVACY_OPERATOR}
                     page_name={"roadSafetyOperator"}
                     table_name={"roadSafetyOperatorList"}
                     TableToolbar={Toolbar}

src/components/dashboard/roadSafety/operator/RowActions/DescriptionForm/index.jsx

@@ -0,0 +1,51 @@
+import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
+import { useState } from "react";
+import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
+import CloseIcon from "@mui/icons-material/Close";
+
+const DescriptionForm = ({ description }) => {
+    const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="توضیحات ناظر">
+                <IconButton color="primary" onClick={() => setOpenOfficerDescriptionDialog(true)}>
+                    <RemoveRedEyeIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openOfficerDescriptionDialog}
+                onClose={() => setOpenOfficerDescriptionDialog(false)}
+                PaperProps={{
+                    sx: {
+                        transition: "all .3s",
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                        borderRadius: 2,
+                        padding: 1,
+                    },
+                }}
+                maxWidth="sm"
+                fullWidth
+                dir="rtl"
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
+                    <Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
+                        توضیحات ناظر
+                    </Typography>
+                    <IconButton onClick={() => setOpenOfficerDescriptionDialog(false)} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent>
+                    <Card elevation={0}>
+                        <CardContent>
+                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
+                        </CardContent>
+                    </Card>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+export default DescriptionForm;

src/components/dashboard/roadSafety/operator/RowActions/FinishDescriptionForm/index.jsx

@@ -0,0 +1,51 @@
+import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
+import { useState } from "react";
+import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
+import CloseIcon from "@mui/icons-material/Close";
+
+const FinishDescriptionForm = ({ description }) => {
+    const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="علت خاتمه فرایند">
+                <IconButton color="primary" onClick={() => setOpenOfficerDescriptionDialog(true)}>
+                    <RemoveRedEyeIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openOfficerDescriptionDialog}
+                onClose={() => setOpenOfficerDescriptionDialog(false)}
+                PaperProps={{
+                    sx: {
+                        transition: "all .3s",
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                        borderRadius: 2,
+                        padding: 1,
+                    },
+                }}
+                maxWidth="sm"
+                fullWidth
+                dir="rtl"
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
+                    <Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
+                        علت خاتمه فرایند
+                    </Typography>
+                    <IconButton onClick={() => setOpenOfficerDescriptionDialog(false)} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent>
+                    <Card elevation={0}>
+                        <CardContent>
+                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
+                        </CardContent>
+                    </Card>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+export default FinishDescriptionForm;

src/components/dashboard/roadSafety/operator/RowActions/FinishForm/FinishContent.jsx

@@ -0,0 +1,80 @@
+import { FINISH_ROAD_SAFETY_BY_SUPERVISOR } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Button, DialogActions, DialogContent, Stack, TextField } from "@mui/material";
+import { useForm } from "react-hook-form";
+import * as Yup from "yup";
+
+const FinishContent = ({ rowId, mutate, setOpenFinishDialog }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required("لطفاً توضیحات را وارد کنید."),
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors, isSubmitting },
+    } = useForm({
+        defaultValues: {
+            description: "",
+        },
+        resolver: yupResolver(validationSchema),
+        mode: "all",
+    });
+
+    const onSubmit = async (data) => {
+        const formData = new FormData();
+        formData.append("final_description", data.description);
+        requestServer(`${FINISH_ROAD_SAFETY_BY_SUPERVISOR}/${rowId}`, "post", {
+            data: formData,
+            hasSidebarUpdate: true,
+        })
+            .then(() => {
+                mutate();
+                setOpenFinishDialog(false);
+            })
+            .catch(() => {});
+    };
+
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            {...register("description")}
+                            multiline
+                            rows={8}
+                            label="توضیحات و دلایل خاتمه"
+                            placeholder="لطفاً علت خاتمه خود را توضیح دهید"
+                            error={!!errors.description}
+                            helperText={errors.description?.message}
+                            fullWidth
+                            variant="outlined"
+                            sx={{ mt: 1 }}
+                            InputLabelProps={{ shrink: true }}
+                        />
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    onClick={() => setOpenFinishDialog(false)}
+                    variant="outlined"
+                    color="secondary"
+                    disabled={isSubmitting}
+                    autoFocus
+                >
+                    بستن
+                </Button>
+                <Button onClick={handleSubmit(onSubmit)} variant="contained" color="primary" disabled={isSubmitting}>
+                    {isSubmitting ? "درحال ثبت خاتمه..." : "ثبت خاتمه"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+
+export default FinishContent;

src/components/dashboard/roadSafety/operator/RowActions/FinishForm/index.jsx

@@ -0,0 +1,29 @@
+import DoneAllIcon from "@mui/icons-material/DoneAll";
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import FinishContent from "./FinishContent";
+const FinishForm = ({ rowId, mutate }) => {
+    const [openFinishDialog, setOpenFinishDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="خاتمه فرایند">
+                <IconButton color="primary" onClick={() => setOpenFinishDialog(true)}>
+                    <DoneAllIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openFinishDialog}
+                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>
+                <FinishContent mutate={mutate} rowId={rowId} setOpenFinishDialog={setOpenFinishDialog} />
+            </Dialog>
+        </>
+    );
+};
+export default FinishForm;

src/components/dashboard/roadSafety/operator/RowActions/OperatorDescriptionForm/index.jsx

@@ -0,0 +1,51 @@
+import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
+import { useState } from "react";
+import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
+import CloseIcon from "@mui/icons-material/Close";
+
+const OperatorDescriptionForm = ({ description }) => {
+    const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="توضیحات کارشناس">
+                <IconButton color="primary" onClick={() => setOpenOfficerDescriptionDialog(true)}>
+                    <RemoveRedEyeIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openOfficerDescriptionDialog}
+                onClose={() => setOpenOfficerDescriptionDialog(false)}
+                PaperProps={{
+                    sx: {
+                        transition: "all .3s",
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                        borderRadius: 2,
+                        padding: 1,
+                    },
+                }}
+                maxWidth="sm"
+                fullWidth
+                dir="rtl"
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
+                    <Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
+                        توضیحات کارشناس
+                    </Typography>
+                    <IconButton onClick={() => setOpenOfficerDescriptionDialog(false)} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent>
+                    <Card elevation={0}>
+                        <CardContent>
+                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
+                        </CardContent>
+                    </Card>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+export default OperatorDescriptionForm;

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

@@ -4,21 +4,20 @@ import EditAxisType from "../Form/EditAxisType";
 import StepThree from "../Form/StepThree";
 import StepTwo from "../Form/StepTwo";
 import DeleteForm from "./DeleteDialog";
+import FinishForm from "./FinishForm";
 
 const RowActions = ({ row, mutate }) => {
     const { data: userPermissions } = usePermissions();
     const hasDeletePermission = userPermissions?.includes("delete-safety-and-privacy");
     const hasUpdatePermission = userPermissions?.includes("update-safety-and-privacy");
-    const hasEdarateShahriPermission = userPermissions?.includes(
-        "show-safety-and-privacy-operator-cartable-edarate-shahri"
-    );
     return (
         <Box sx={{ display: "flex", gap: 1 }}>
             {hasUpdatePermission && row.original?.axis_type_id == null && <EditAxisType mutate={mutate} row={row} />}
-            {hasEdarateShahriPermission && (
+            {!row.original.is_finished && (
                 <>
                     {row.original?.step === 1 && <StepTwo mutate={mutate} rowId={row.getValue("id")} />}
                     {row.original?.step === 2 && <StepThree mutate={mutate} rowId={row.getValue("id")} />}
+                    <FinishForm mutate={mutate} rowId={row.getValue("id")} />
                 </>
             )}
             {hasDeletePermission && <DeleteForm rowId={row.getValue("id")} mutate={mutate} />}

src/components/dashboard/roadSafety/supervisor/ExcelPrint/index.jsx

@@ -0,0 +1,74 @@
+import DataTableFilterDataStructure from "@/core/utils/DataTableFilterDataStructure";
+import isArrayEmpty from "@/core/utils/isArrayEmpty";
+import { EXPORT_SUPERVISOR_ROAD_SAFETY } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { useTheme } from "@emotion/react";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import FileSaver from "file-saver";
+import moment from "jalali-moment";
+import { useMemo, useState } from "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 && (!Array.isArray(filter.value) || filter.value.some((item) => item.trim() !== ""))) {
+            acc.push({ id: key, value: filter.value });
+        }
+        return acc;
+    }, []);
+
+    const filterParams = useMemo(() => {
+        const params = new URLSearchParams();
+        if (activeFilters.length > 0) {
+            activeFilters.map((filter, index) => {
+                const filteredFilterData = DataTableFilterDataStructure(filterData, isArrayEmpty);
+                params.set("filters", JSON.stringify(filteredFilterData.length === 0 ? [] : filteredFilterData));
+            });
+        } else {
+            params.set("filters", JSON.stringify([]));
+        }
+        return params;
+    }, [activeFilters]);
+
+    const clickHandler = () => {
+        setLoading(true);
+        requestServer(`${EXPORT_SUPERVISOR_ROAD_SAFETY}?${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/roadSafety/supervisor/RowActions/ActionPictureDialog/ActionPictureContent.jsx

@@ -0,0 +1,44 @@
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import Image from "next/image";
+
+const ActionPictureContent = ({ image, title }) => {
+    const theme = useTheme();
+    return (
+        <Stack
+            spacing={2}
+            alignItems="center"
+            justifyContent="center"
+            sx={{
+                my: 2,
+                padding: 2,
+                borderRadius: "12px",
+                border: `1px solid ${theme.palette.primary.main}`,
+            }}
+        >
+            <Typography
+                variant="h6"
+                sx={{
+                    color: theme.palette.primary.dark,
+                    fontWeight: "bold",
+                }}
+            >
+                {title}
+            </Typography>
+            <Box sx={{ width: "100%", position: "relative", aspectRatio: "16/9" }}>
+                <Image
+                    src={image}
+                    alt="Image"
+                    fill={true}
+                    loading="lazy"
+                    style={{
+                        objectFit: "contain",
+                        marginBottom: "16px",
+                        borderRadius: "12px",
+                        border: `1px solid ${theme.palette.divider}`,
+                    }}
+                />
+            </Box>
+        </Stack>
+    );
+};
+export default ActionPictureContent;

src/components/dashboard/roadSafety/supervisor/RowActions/ActionPictureDialog/index.jsx

@@ -0,0 +1,40 @@
+import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
+import { Button, Dialog, DialogActions, DialogContent, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import ActionPictureContent from "./ActionPictureContent";
+
+const ActionPictureDialog = ({ image }) => {
+    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",
+                    },
+                }}
+                maxWidth={"sm"}
+                scroll="paper"
+            >
+                <DialogContent>
+                    <ActionPictureContent image={image} title={"تصویر اقدام"} />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default ActionPictureDialog;

src/components/dashboard/roadSafety/supervisor/RowActions/ConfirmForm/ConfirmContent.jsx

@@ -0,0 +1,70 @@
+import { CONFIRM_ROAD_SAFETY_BY_SUPERVISOR } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { Button, DialogActions, DialogContent, Stack, TextField } from "@mui/material";
+import { useForm } from "react-hook-form";
+
+const ConfirmContent = ({ rowId, mutate, setOpenConfirmDialog }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { isSubmitting },
+    } = useForm({
+        defaultValues: {
+            supervisor_description: "",
+        },
+    });
+
+    const onSubmit = async (data) => {
+        const formData = new FormData();
+        data.supervisor_description !== "" && formData.append("supervisor_description", data.supervisor_description);
+        requestServer(`${CONFIRM_ROAD_SAFETY_BY_SUPERVISOR}/${rowId}`, "post", {
+            data: formData,
+            hasSidebarUpdate: true,
+        })
+            .then(() => {
+                mutate();
+                setOpenConfirmDialog(false);
+            })
+            .catch(() => {});
+    };
+
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            {...register("supervisor_description")}
+                            multiline
+                            rows={8}
+                            label="توضیحات و دلایل تأیید (اختیاری)"
+                            placeholder="لطفاً علت تأیید خود را توضیح دهید"
+                            fullWidth
+                            variant="outlined"
+                            sx={{ mt: 1 }}
+                            InputLabelProps={{ shrink: true }}
+                        />
+                    </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/roadSafety/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/roadSafety/supervisor/RowActions/DeleteDialog/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_SAFETY_AND_PRIVACY } from "@/core/utils/routes";
+
+const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
+    const [submitting, setSubmitting] = useState(false);
+    const requestServer = useRequest({ notificationSuccess: true });
+    const handleClick = () => {
+        setSubmitting(true);
+        requestServer(`${DELETE_SAFETY_AND_PRIVACY}/${rowId}`, "delete", {
+            hasSidebarUpdate: true,
+        })
+            .then(() => {
+                mutate();
+                setOpenDeleteDialog(false);
+                setSubmitting(false);
+            })
+            .catch(() => {
+                setSubmitting(false);
+            });
+    };
+    return (
+        <>
+            <DialogContent>
+                <Stack alignItems="center" spacing={2}>
+                    <Typography mt={2}>آیا از حذف فعالیت اطمینان دارید؟</Typography>
+                </Stack>
+            </DialogContent>
+            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
+                <Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
+                    خیر !
+                </Button>
+                <Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
+                    {submitting ? "درحال حذف..." : "بله اطمینان دارم"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+
+export default DeleteContent;

src/components/dashboard/roadSafety/supervisor/RowActions/DeleteDialog/index.jsx

@@ -0,0 +1,32 @@
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import DeleteContent from "./DeleteContent";
+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/roadSafety/supervisor/RowActions/DescriptionForm/index.jsx

@@ -0,0 +1,51 @@
+import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
+import { useState } from "react";
+import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
+import CloseIcon from "@mui/icons-material/Close";
+
+const DescriptionForm = ({ description }) => {
+    const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="توضیحات ناظر">
+                <IconButton color="primary" onClick={() => setOpenOfficerDescriptionDialog(true)}>
+                    <RemoveRedEyeIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openOfficerDescriptionDialog}
+                onClose={() => setOpenOfficerDescriptionDialog(false)}
+                PaperProps={{
+                    sx: {
+                        transition: "all .3s",
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                        borderRadius: 2,
+                        padding: 1,
+                    },
+                }}
+                maxWidth="sm"
+                fullWidth
+                dir="rtl"
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
+                    <Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
+                        توضیحات ناظر
+                    </Typography>
+                    <IconButton onClick={() => setOpenOfficerDescriptionDialog(false)} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent>
+                    <Card elevation={0}>
+                        <CardContent>
+                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
+                        </CardContent>
+                    </Card>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+export default DescriptionForm;

src/components/dashboard/roadSafety/supervisor/RowActions/FinishDescriptionForm/index.jsx

@@ -0,0 +1,51 @@
+import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
+import { useState } from "react";
+import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
+import CloseIcon from "@mui/icons-material/Close";
+
+const FinishDescriptionForm = ({ description }) => {
+    const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="علت خاتمه فرایند">
+                <IconButton color="primary" onClick={() => setOpenOfficerDescriptionDialog(true)}>
+                    <RemoveRedEyeIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openOfficerDescriptionDialog}
+                onClose={() => setOpenOfficerDescriptionDialog(false)}
+                PaperProps={{
+                    sx: {
+                        transition: "all .3s",
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                        borderRadius: 2,
+                        padding: 1,
+                    },
+                }}
+                maxWidth="sm"
+                fullWidth
+                dir="rtl"
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
+                    <Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
+                        علت خاتمه فرایند
+                    </Typography>
+                    <IconButton onClick={() => setOpenOfficerDescriptionDialog(false)} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent>
+                    <Card elevation={0}>
+                        <CardContent>
+                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
+                        </CardContent>
+                    </Card>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+export default FinishDescriptionForm;

src/components/dashboard/roadSafety/supervisor/RowActions/JudiciaryDocumentDialog/JudiciaryDocumentContent.jsx

@@ -0,0 +1,43 @@
+import { Box, Button, Chip, Divider, Grid, Typography } from "@mui/material";
+import DownloadIcon from "@mui/icons-material/Download";
+import ArticleIcon from "@mui/icons-material/Article";
+
+const JudiciaryDocumentContent = ({ judiciaryDocumentDetails }) => {
+    return (
+        <Grid container spacing={3} sx={{ alignItems: "center", justifyContent: "space-around" }}>
+            {judiciaryDocumentDetails.map((judiciaryDocument, index) => {
+                return (
+                    <Grid key={index} item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                            <Chip
+                                icon={<ArticleIcon />}
+                                label={
+                                    <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
+                                        مستندات قضایی {index + 1}
+                                    </Typography>
+                                }
+                            />
+                        </Box>
+                        <Divider sx={{ flex: 1, mx: 2 }} />
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            size="small"
+                            startIcon={<DownloadIcon />}
+                            onClick={() => {
+                                if (judiciaryDocument) {
+                                    window.open(judiciaryDocument, "_blank");
+                                } else {
+                                    alert("فایلی برای دانلود موجود نیست.");
+                                }
+                            }}
+                        >
+                            دانلود فایل
+                        </Button>
+                    </Grid>
+                );
+            })}
+        </Grid>
+    );
+};
+export default JudiciaryDocumentContent;

src/components/dashboard/roadSafety/supervisor/RowActions/JudiciaryDocumentDialog/JudiciaryDocumentController.jsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import useRequest from "@/lib/hooks/useRequest";
+import DialogLoading from "@/core/components/DialogLoading";
+import JudiciaryDocumentContent from "./JudiciaryDocumentContent";
+import { DESERIALIZE_JUDICIARY_DOCUMENT } from "@/core/utils/routes";
+import { Typography } from "@mui/material";
+
+const JudiciaryDocumentController = ({ rowId }) => {
+    const requestServer = useRequest();
+    const [judiciaryDocumentDetails, setJudiciaryDocumentDetails] = useState([]);
+    const [judiciaryDocumentDetailsLoading, setJudiciaryDocumentDetailsLoading] = useState(false);
+    useEffect(() => {
+        setJudiciaryDocumentDetailsLoading(true);
+        requestServer(`${DESERIALIZE_JUDICIARY_DOCUMENT}/${rowId}`, "get")
+            .then((response) => {
+                setJudiciaryDocumentDetails(response.data.data);
+                setJudiciaryDocumentDetailsLoading(false);
+            })
+            .catch((e) => {
+                setJudiciaryDocumentDetailsLoading(false);
+            });
+    }, [rowId]);
+    return (
+        <>
+            {judiciaryDocumentDetailsLoading ? (
+                <DialogLoading />
+            ) : judiciaryDocumentDetails.length > 0 ? (
+                <JudiciaryDocumentContent judiciaryDocumentDetails={judiciaryDocumentDetails} />
+            ) : (
+                <Typography textAlign={"center"}>بدون مستندات</Typography>
+            )}
+        </>
+    );
+};
+export default JudiciaryDocumentController;

src/components/dashboard/roadSafety/supervisor/RowActions/JudiciaryDocumentDialog/index.jsx

@@ -0,0 +1,40 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import ArticleIcon from "@mui/icons-material/Article";
+import React, { useState } from "react";
+import JudiciaryDocumentController from "./JudiciaryDocumentController";
+
+const JudiciaryDocumentDialog = ({ rowId }) => {
+    const [openJudiciaryDocumentDialog, setOpenJudiciaryDocumentDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="مستندات قضایی">
+                <IconButton color="primary" onClick={() => setOpenJudiciaryDocumentDialog(true)}>
+                    <ArticleIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openJudiciaryDocumentDialog}
+                onClose={() => setOpenJudiciaryDocumentDialog(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={"sm"}
+                fullWidth
+            >
+                <DialogTitle>مشاهده مستندات قضایی</DialogTitle>
+                <DialogContent dividers>
+                    <JudiciaryDocumentController rowId={rowId} />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenJudiciaryDocumentDialog(false)} variant="outlined" color="secondary">
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default JudiciaryDocumentDialog;

src/components/dashboard/roadSafety/supervisor/RowActions/LocationForm/LocationFormContent.jsx

@@ -0,0 +1,35 @@
+"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="outlined" color="secondary">
+                    بستن
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default LocationFormContent;

src/components/dashboard/roadSafety/supervisor/RowActions/LocationForm/index.jsx

@@ -0,0 +1,40 @@
+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>
+                {openLocationDialog && (
+                    <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/roadSafety/supervisor/RowActions/OperatorDescriptionForm/index.jsx

@@ -0,0 +1,51 @@
+import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
+import { useState } from "react";
+import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
+import CloseIcon from "@mui/icons-material/Close";
+
+const OperatorDescriptionForm = ({ description }) => {
+    const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="توضیحات کارشناس">
+                <IconButton color="primary" onClick={() => setOpenOfficerDescriptionDialog(true)}>
+                    <RemoveRedEyeIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openOfficerDescriptionDialog}
+                onClose={() => setOpenOfficerDescriptionDialog(false)}
+                PaperProps={{
+                    sx: {
+                        transition: "all .3s",
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                        borderRadius: 2,
+                        padding: 1,
+                    },
+                }}
+                maxWidth="sm"
+                fullWidth
+                dir="rtl"
+            >
+                <DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
+                    <Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
+                        توضیحات کارشناس
+                    </Typography>
+                    <IconButton onClick={() => setOpenOfficerDescriptionDialog(false)} size="small">
+                        <CloseIcon />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent>
+                    <Card elevation={0}>
+                        <CardContent>
+                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
+                        </CardContent>
+                    </Card>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+export default OperatorDescriptionForm;

src/components/dashboard/roadSafety/supervisor/RowActions/RecognizePictureDialog/RecognizePictureContent.jsx

@@ -0,0 +1,44 @@
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import Image from "next/image";
+
+const RecognizePictureContent = ({ image, title }) => {
+    const theme = useTheme();
+    return (
+        <Stack
+            spacing={2}
+            alignItems="center"
+            justifyContent="center"
+            sx={{
+                my: 2,
+                padding: 2,
+                borderRadius: "12px",
+                border: `1px solid ${theme.palette.primary.main}`,
+            }}
+        >
+            <Typography
+                variant="h6"
+                sx={{
+                    color: theme.palette.primary.dark,
+                    fontWeight: "bold",
+                }}
+            >
+                {title}
+            </Typography>
+            <Box sx={{ width: "100%", position: "relative", aspectRatio: "16/9" }}>
+                <Image
+                    src={image}
+                    alt="Image"
+                    fill={true}
+                    loading="lazy"
+                    style={{
+                        objectFit: "contain",
+                        marginBottom: "16px",
+                        borderRadius: "12px",
+                        border: `1px solid ${theme.palette.divider}`,
+                    }}
+                />
+            </Box>
+        </Stack>
+    );
+};
+export default RecognizePictureContent;

src/components/dashboard/roadSafety/supervisor/RowActions/RecognizePictureDialog/index.jsx

@@ -0,0 +1,40 @@
+import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
+import { Button, Dialog, DialogActions, DialogContent, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import RecognizePictureContent from "./RecognizePictureContent";
+
+const RecognizePictureDialog = ({ image }) => {
+    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",
+                    },
+                }}
+                maxWidth={"sm"}
+                scroll="paper"
+            >
+                <DialogContent>
+                    <RecognizePictureContent image={image} title={"تصویر بازدید"} />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default RecognizePictureDialog;

src/components/dashboard/roadSafety/supervisor/RowActions/RejectForm/RejectContent.jsx

@@ -0,0 +1,83 @@
+import { REJECT_ROAD_SAFETY_BY_SUPERVISOR } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Button, DialogActions, DialogContent, Stack, TextField } from "@mui/material";
+import { useForm } from "react-hook-form";
+import * as Yup from "yup";
+
+const RejectContent = ({ rowId, mutate, setOpenRejectDialog }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+
+    const validationSchema = Yup.object().shape({
+        supervisor_description: Yup.string().required("لطفاً توضیحات را وارد کنید."),
+    });
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors, isSubmitting },
+        reset,
+    } = useForm({
+        defaultValues: {
+            supervisor_description: "",
+        },
+        resolver: yupResolver(validationSchema),
+        mode: "all",
+    });
+
+    const onSubmit = async (data) => {
+        const formData = new FormData();
+        formData.append("supervisor_description", data.supervisor_description);
+        await requestServer(`${REJECT_ROAD_SAFETY_BY_SUPERVISOR}/${rowId}`, "post", {
+            data: formData,
+            hasSidebarUpdate: true,
+        })
+            .then(() => {
+                mutate();
+                setOpenRejectDialog(false);
+            })
+            .catch(() => {})
+            .finally(() => {
+                reset();
+            });
+    };
+
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            {...register("supervisor_description")}
+                            multiline
+                            rows={8}
+                            label="توضیحات و دلایل عدم تأیید"
+                            placeholder="لطفاً علت عدم تأیید خود را توضیح دهید"
+                            error={!!errors.supervisor_description}
+                            helperText={errors.supervisor_description?.message}
+                            fullWidth
+                            variant="outlined"
+                            sx={{ mt: 1 }}
+                            InputLabelProps={{ shrink: true }}
+                        />
+                    </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/roadSafety/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/roadSafety/supervisor/RowActions/index.jsx

@@ -0,0 +1,22 @@
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { Box } from "@mui/material";
+import ConfirmForm from "./ConfirmForm";
+import DeleteForm from "./DeleteDialog";
+import RejectForm from "./RejectForm";
+
+const RowActions = ({ row, mutate }) => {
+    const { data: userPermissions } = usePermissions();
+    const hasDeletePermission = userPermissions?.includes("delete-safety-and-privacy");
+    return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+            {row.original.is_finished == 1 && row.original.status === 0 && (
+                <>
+                    <ConfirmForm mutate={mutate} rowId={row.getValue("id")} />
+                    <RejectForm mutate={mutate} rowId={row.getValue("id")} />
+                </>
+            )}
+            {hasDeletePermission && <DeleteForm rowId={row.getValue("id")} mutate={mutate} />}
+        </Box>
+    );
+};
+export default RowActions;

src/components/dashboard/roadSafety/supervisor/SupervisorList.jsx

@@ -0,0 +1,606 @@
+"use client";
+import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { GET_SAFETY_AND_PRIVACY_SUPERVISOR } from "@/core/utils/routes";
+import useSafetyAndPrivacyGetItems from "@/lib/hooks/useSafetyAndPrivacyGetItems";
+import { Box, Stack } from "@mui/material";
+import moment from "jalali-moment";
+import { useEffect, useMemo, useState } from "react";
+import RowActions from "./RowActions";
+import ActionPictureDialog from "./RowActions/ActionPictureDialog";
+import DescriptionForm from "./RowActions/DescriptionForm";
+import FinishDescriptionForm from "./RowActions/FinishDescriptionForm";
+import JudiciaryDocumentDialog from "./RowActions/JudiciaryDocumentDialog";
+import LocationForm from "./RowActions/LocationForm";
+import OperatorDescriptionForm from "./RowActions/OperatorDescriptionForm";
+import RecognizePictureDialog from "./RowActions/RecognizePictureDialog";
+import Toolbar from "./Toolbar";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { useAuth } from "@/lib/contexts/auth";
+import useProvinces from "@/lib/hooks/useProvince";
+import useEdaratLists from "@/lib/hooks/useEdaratLists";
+import BlinkingCell from "@/core/components/BlinkingCell";
+
+const stepOptions = [
+    { value: "", label: "همه گام ها" },
+    { value: 1, label: "گام اول (شناسایی)" },
+    { value: 2, label: "گام دوم (مستندات قضایی)" },
+    { value: 3, label: "گام سوم (برخورد)" },
+];
+const statusOptions = [
+    { value: "", label: "همه وضعیت ها" },
+    { value: 0, label: "درحال بررسی" },
+    { value: 1, label: "تایید" },
+    { value: 2, label: "عدم تایید" },
+];
+const finishOptions = [
+    { value: "", label: "همه موارد" },
+    { value: 0, label: "در جریان" },
+    { value: 1, label: "خاتمه یافته" },
+];
+const axisOptions = [
+    { value: "", label: "همه محور ها" },
+    { value: 1, label: "آزادراه" },
+    { value: 2, label: "بزرگراه" },
+    { value: 3, label: "اصلی" },
+    { value: 4, label: "فرعی" },
+    { value: 5, label: "روستایی" },
+];
+const SupervisorList = () => {
+    const { data: userPermissions } = usePermissions();
+    const hasCountryPermission = userPermissions?.includes("show-safety-and-privacy-operator-cartable");
+    const { user } = useAuth();
+
+    const columns = useMemo(() => {
+        const provinceColumn = {
+            header: "استان",
+            id: "province_id",
+            enableColumnFilter: true,
+            datatype: "numeric",
+            filterMode: "equals",
+            grow: false,
+            size: 130,
+            ColumnSelectComponent: (props) => {
+                const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+                const getColumnSelectOptions = useMemo(() => {
+                    if (loadingProvinces) {
+                        return [{ value: "loading", label: "در حال بارگذاری..." }];
+                    }
+                    if (errorProvinces) {
+                        return [{ value: "error", label: "خطا در بارگذاری" }];
+                    }
+                    return [
+                        { value: "", label: "کل کشور" },
+                        ...provinces.map((province) => ({
+                            value: province.id,
+                            label: province.name_fa,
+                        })),
+                    ];
+                }, [provinces, errorProvinces, loadingProvinces]);
+                return (
+                    <CustomSelectByDependency
+                        {...props}
+                        value={loadingProvinces ? "loading" : props.filterParameters.value}
+                        columnSelectOption={getColumnSelectOptions}
+                    />
+                );
+            },
+            Cell: ({ renderedCellValue, row }) => <>{row.original.province_fa}</>,
+        };
+        return [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+                Cell: ({ row }) => (
+                    <BlinkingCell
+                        value={row.original.id}
+                        visible={row.original.status == 0 && row.original.is_finished == 1}
+                    />
+                ),
+            },
+            ...(hasCountryPermission ? [provinceColumn] : []),
+            {
+                header: "اداره",
+                id: "edare_shahri_id",
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterMode: "equals",
+                dependencyId: hasCountryPermission ? "province_id" : null,
+                grow: false,
+                size: 120,
+                ColumnSelectComponent: (props) => {
+                    const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
+                        hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
+                    );
+                    const [prevDependency, setPrevDependency] = useState(
+                        hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
+                    );
+
+                    const getColumnSelectOptions = useMemo(() => {
+                        if (hasCountryPermission && props.dependencyFieldValue.value === "") {
+                            return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
+                        }
+                        if (loadingEdaratList) {
+                            return [{ value: "loading", label: "در حال بارگذاری..." }];
+                        }
+                        if (errorEdaratList) {
+                            return [{ value: "error", label: "خطا در بارگذاری" }];
+                        }
+                        return [
+                            { value: "", label: "کل ادارات" },
+                            ...edaratList.map((edare) => ({
+                                value: edare.id,
+                                label: edare.name_fa,
+                            })),
+                        ];
+                    }, [edaratList, loadingEdaratList, errorEdaratList]);
+                    useEffect(() => {
+                        if (hasCountryPermission) return;
+                        if (prevDependency === props.dependencyFieldValue?.value) return;
+                        props.handleChange({ ...props.filterParameters, value: "" });
+                        setPrevDependency(props.dependencyFieldValue?.value);
+                    }, [props.dependencyFieldValue?.value, hasCountryPermission]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue?.value === ""
+                                    ? "empty"
+                                    : loadingEdaratList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ renderedCellValue, row }) => <>{row.original.edare_shahri_name}</>,
+            },
+            {
+                header: "اطلاعات فعالیت",
+                id: "info",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        accessorKey: "info_id",
+                        header: "مورد مشاهده شده",
+                        id: "info_id",
+                        enableColumnFilter: true,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        grow: false,
+                        size: 100,
+                        ColumnSelectComponent: (props) => {
+                            const { itemsList, loadingItemsList, errorItemsList } = useSafetyAndPrivacyGetItems();
+
+                            const getColumnSelectOptions = useMemo(() => {
+                                if (loadingItemsList) {
+                                    return [{ value: "loading", label: "در حال بارگذاری..." }];
+                                }
+                                if (errorItemsList) {
+                                    return [{ value: "error", label: "خطا در بارگذاری" }];
+                                }
+                                return [
+                                    { value: "", label: "همه موارد" },
+                                    ...itemsList.map((item) => ({
+                                        value: item.id,
+                                        label: item.name,
+                                    })),
+                                ];
+                            }, [itemsList, loadingItemsList, errorItemsList]);
+
+                            return (
+                                <CustomSelectByDependency
+                                    {...props}
+                                    value={loadingItemsList ? "loading" : props.filterParameters.value}
+                                    columnSelectOption={getColumnSelectOptions}
+                                />
+                            );
+                        },
+                        Cell: ({ row }) => <>{row.original.info_fa}</>,
+                    },
+                    {
+                        accessorKey: "axis_type_id",
+                        header: "نوع محور",
+                        id: "axis_type_id",
+                        enableColumnFilter: true,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        sortDescFirst: true,
+                        grow: false,
+                        size: 100,
+                        columnSelectOption: () => {
+                            return axisOptions.map((status) => ({
+                                value: status.value,
+                                label: status.label,
+                            }));
+                        },
+                        Cell: ({ row }) => (row.original?.axis_type_name ? <>{row.original.axis_type_name}</> : <>-</>),
+                    },
+                    {
+                        accessorKey: "location",
+                        header: "موقعیت",
+                        id: "location",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "array",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <LocationForm start_lat={row.original?.lat} start_lng={row.original?.lon} />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                        header: "تاریخ ثبت",
+                        id: "created_at",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                ],
+            },
+            {
+                header: "وضعیت فعالیت",
+                id: "allstatus",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        header: "وضعیت گام ها",
+                        id: "step",
+                        enableColumnFilter: true,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        sortDescFirst: true,
+                        grow: false,
+                        size: 100,
+                        columnSelectOption: () => {
+                            return stepOptions.map((status) => ({
+                                value: status.value,
+                                label: status.label,
+                            }));
+                        },
+                        Cell: ({ row }) => <>{row.original.step_fa}</>,
+                    },
+                    {
+                        header: "وضعیت فرایند",
+                        id: "is_finished",
+                        enableColumnFilter: true,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        sortDescFirst: true,
+                        grow: false,
+                        size: 100,
+                        columnSelectOption: () => {
+                            return finishOptions.map((status) => ({
+                                value: status.value,
+                                label: status.label,
+                            }));
+                        },
+                        Cell: ({ row }) => (
+                            <>
+                                {row.original.is_finished == 1
+                                    ? "خاتمه یافته"
+                                    : row.original.is_finished == 0
+                                      ? "در جریان"
+                                      : "-"}
+                            </>
+                        ),
+                    },
+                    {
+                        header: "علت خاتمه فرایند",
+                        id: "finished_description",
+                        enableColumnFilter: false,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) =>
+                            row.original.final_description ? (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <FinishDescriptionForm description={row.original.final_description} />
+                                </Stack>
+                            ) : (
+                                "-"
+                            ),
+                    },
+                    {
+                        header: "وضعیت نظارت",
+                        id: "status",
+                        enableColumnFilter: true,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        sortDescFirst: true,
+                        grow: false,
+                        size: 100,
+                        columnSelectOption: () => {
+                            return statusOptions.map((status) => ({
+                                value: status.value,
+                                label: status.label,
+                            }));
+                        },
+                        Cell: ({ row }) => <>{row.original.status_fa || "-"}</>,
+                    },
+                    {
+                        header: "توضیحات ناظر",
+                        id: "supervisor_description",
+                        enableColumnFilter: false,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) =>
+                            row.original.supervisor_description ? (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <DescriptionForm description={row.original.supervisor_description} />
+                                </Stack>
+                            ) : (
+                                "-"
+                            ),
+                    },
+                ],
+            },
+            {
+                header: "گام اول (شناسایی)",
+                id: "stepOne",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        accessorKey: "recognize_picture",
+                        header: "تصویر بازدید",
+                        id: "recognize_picture",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "text",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            return renderedCellValue ? (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <RecognizePictureDialog image={renderedCellValue} />
+                                </Stack>
+                            ) : (
+                                <>-</>
+                            );
+                        },
+                    },
+                    {
+                        accessorFn: (row) =>
+                            row.activity_date_time ? (
+                                moment(row.activity_date_time).locale("fa").format("HH:mm | yyyy/MM/DD")
+                            ) : (
+                                <>-</>
+                            ),
+                        header: "تاریخ بازدید",
+                        id: "activity_date_time",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                ],
+            },
+            {
+                header: "گام دوم (مستندات قضایی)",
+                id: "stepTwo",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        header: "مستندات قضایی",
+                        id: "judiciary_document",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "text",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    {row.original.judiciary_document_upload_date !== "0000-00-00 00:00:00" &&
+                                    row.original.judiciary_document_upload_date ? (
+                                        <JudiciaryDocumentDialog rowId={row.getValue("id")} />
+                                    ) : (
+                                        <>-</>
+                                    )}
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        accessorFn: (row) => {
+                            const date = row.judiciary_document_upload_date;
+                            if (!date || date === "0000-00-00 00:00:00") {
+                                return <>-</>;
+                            }
+                            return moment(date, "YYYY-MM-DD HH:mm:ss").locale("fa").format("HH:mm | yyyy/MM/DD");
+                        },
+
+                        header: "تاریخ بارگذاری مستندات",
+                        id: "judiciary_document_upload_date",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        header: "توضیحات کارشناس",
+                        id: "operator_description",
+                        enableColumnFilter: false,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) =>
+                            row.original.operator_description ? (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <OperatorDescriptionForm description={row.original.operator_description} />
+                                </Stack>
+                            ) : (
+                                "-"
+                            ),
+                    },
+                ],
+            },
+            {
+                header: "گام سوم (برخورد)",
+                id: "stepThree",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        accessorKey: "action_picture",
+                        header: "تصویر اقدام",
+                        id: "action_picture",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "text",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            return renderedCellValue ? (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <ActionPictureDialog image={renderedCellValue} />
+                                </Stack>
+                            ) : (
+                                <>-</>
+                            );
+                        },
+                    },
+                    {
+                        accessorFn: (row) =>
+                            row.action_date ? (
+                                moment(row.action_date).locale("fa").format("HH:mm | yyyy/MM/DD")
+                            ) : (
+                                <>-</>
+                            ),
+                        header: "تاریخ اقدام",
+                        id: "action_date",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                ],
+            },
+        ];
+    }, []);
+
+    return (
+        <>
+            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    columns={columns}
+                    sorting={[{ id: "id", desc: true }]}
+                    table_url={GET_SAFETY_AND_PRIVACY_SUPERVISOR}
+                    page_name={"roadSafetyOperator"}
+                    table_name={"roadSafetyOperatorList"}
+                    TableToolbar={Toolbar}
+                    enableRowActions
+                    positionActionsColumn={"last"}
+                    RowActions={RowActions}
+                />
+            </Box>
+        </>
+    );
+};
+export default SupervisorList;

src/components/dashboard/roadSafety/supervisor/Toolbar.jsx

@@ -0,0 +1,11 @@
+import { Stack } from "@mui/material";
+import PrintExcel from "./ExcelPrint";
+
+const Toolbar = ({ table, filterData, mutate }) => {
+    return (
+        <Stack direction={"row"} spacing={1}>
+            <PrintExcel filterData={filterData} table={table} />
+        </Stack>
+    );
+};
+export default Toolbar;

src/components/dashboard/roadSafety/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/core/utils/pageMenu.js

@@ -291,10 +291,31 @@ export const pageMenu = [
         icon: <RouteIcon sx={{ width: "inherit", height: "inherit" }} />,
         hasSubitems: true,
         badges: [
+            { key: "safetyAndPrivacy.supervise_cnt" },
             { key: "safetyAndPrivacy.step_one", color: "warning" },
             { key: "safetyAndPrivacy.step_two", color: "error" },
         ],
         Subitems: [
+            {
+                id: "safetyAndPrivacyManagmentSupervisor",
+                label: "ارزیابی",
+                type: "menu",
+                icon: <SpeedIcon sx={{ width: "inherit", height: "inherit" }} />,
+                hasSubitems: true,
+                badges: [{ key: "safetyAndPrivacy.supervise_cnt" }],
+                Subitems: [
+                    {
+                        id: "safetyAndPrivacyManagmentSupervisorCartable",
+                        label: "کارتابل",
+                        type: "page",
+                        route: "/dashboard/road-safety/supervisor",
+                        permissions: [
+                            "show-safety-and-privacy-operator-cartable",
+                            "show-safety-and-privacy-operator-cartable-province",
+                        ],
+                    },
+                ],
+            },
             {
                 id: "safetyAndPrivacyManagmentOparation",
                 label: "عملیات",
@@ -311,11 +332,7 @@ export const pageMenu = [
                         label: "کارتابل",
                         type: "page",
                         route: "/dashboard/road-safety/operator",
-                        permissions: [
+                        permissions: ["show-safety-and-privacy-operator-cartable-edarate-shahri"],
-                            "show-safety-and-privacy-operator-cartable",
-                            "show-safety-and-privacy-operator-cartable-province",
-                            "show-safety-and-privacy-operator-cartable-edarate-shahri",
-                        ],
                     },
                 ],
             },

src/core/utils/routes.js

@@ -130,15 +130,22 @@ export const EXPORT_FAST_REACT_OPERATOR_LIST = api + "/api/v3/road_observations/
 export const EXPORT_FAST_REACT_COMPLAINT_LIST = api + "/api/v3/road_observations/complaints_report";
 
 // road safety
-export const GET_SAFETY_AND_PRIVACY = api + "/api/v3/safety_and_privacy";
+export const GET_SAFETY_AND_PRIVACY_OPERATOR = api + "/api/v3/safety_and_privacy/operator";
-export const DELETE_SAFETY_AND_PRIVACY = api + "/api/v3/safety_and_privacy";
+export const DELETE_SAFETY_AND_PRIVACY = api + "/api/v3/safety_and_privacy/operator";
+export const FIRST_STEP_STORE = api + "/api/v3/safety_and_privacy/operator/first_step_store";
+export const SECOND_STEP_STORE = api + "/api/v3/safety_and_privacy/operator/second_step_store";
+export const THIRD_STEP_STORE = api + "/api/v3/safety_and_privacy/operator/third_step_store";
+export const UPDATE_SAFETY_AND_PRIVACY = api + "/api/v3/safety_and_privacy/operator";
+export const FINISH_ROAD_SAFETY_BY_SUPERVISOR = api + "/api/v3/safety_and_privacy/operator/finish";
+export const EXPORT_OPERATOR_ROAD_SAFETY = api + "/api/v3/safety_and_privacy/operator/excel_report";
+
+export const GET_SAFETY_AND_PRIVACY_SUPERVISOR = api + "/api/v3/safety_and_privacy/supervisor";
+export const EXPORT_SUPERVISOR_ROAD_SAFETY = api + "/api/v3/safety_and_privacy/supervisor/excel_report";
+export const CONFIRM_ROAD_SAFETY_BY_SUPERVISOR = api + "/api/v3/safety_and_privacy/supervisor/confirm";
+export const REJECT_ROAD_SAFETY_BY_SUPERVISOR = api + "/api/v3/safety_and_privacy/supervisor/reject";
+
 export const DESERIALIZE_JUDICIARY_DOCUMENT = api + "/api/v3/safety_and_privacy/deserialize";
 export const GET_SAFETY_AND_PRIVACY_ITEM = api + "/api/v3/safety_and_privacy/sub_items";
-export const FIRST_STEP_STORE = api + "/api/v3/safety_and_privacy/first_step_store";
-export const SECOND_STEP_STORE = api + "/api/v3/safety_and_privacy/second_step_store";
-export const THIRD_STEP_STORE = api + "/api/v3/safety_and_privacy/third_step_store";
-export const UPDATE_SAFETY_AND_PRIVACY = api + "/api/v3/safety_and_privacy";
-export const EXPORT_OPERATOR_ROAD_SAFETY = api + "/api/v3/safety_and_privacy/excel_report";
 export const GET_ROAD_SAFETY_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/safety_and_privacy_report/country_activity";
 export const GET_ROAD_SAFETY_CITY_ACTIVITY_REPORT = api + "/api/v3/safety_and_privacy_report/province_activity";
 export const GET_ROAD_SAFETY_REPORT_MAP = api + "/api/v3/safety_and_privacy/map";