Merge branch 'release/v0.18.0'

.env.local.example

@@ -1,4 +1,4 @@
 HOST="rms.witel.ir"
-NEXT_PUBLIC_VERSION="0.17.0"
+NEXT_PUBLIC_VERSION="0.18.0"
 NEXT_PUBLIC_API_URL="https://rms.witel.ir"
 NEXT_PUBLIC_MAPTILE_ENDPOINT="https://rmsmap.rmto.ir/141map"

src/app/(withAuth)/dashboard/azmayesh/page.js

@@ -2,6 +2,10 @@ import AzmayeshPage from "@/components/dashboard/azmayesh";
 import WithPermission from "@/core/middlewares/withPermission";
 import ActivityCodeLog from "@/core/components/ActivityCodeLog";
 
+export const metadata = {
+    title: "کارتابل آزمایشات",
+};
+
 const Page = () => {
     return (
         <WithPermission permission_name={["azmayesh-management"]}>

src/app/(withAuth)/dashboard/azmayesh_type/page.js

@@ -1,7 +1,9 @@
 import AzmayeshTypePage from "@/components/dashboard/azmayeshType";
 import WithPermission from "@/core/middlewares/withPermission";
 import ActivityCodeLog from "@/core/components/ActivityCodeLog";
-
+export const metadata = {
+    title: "کارتابل نوع آزمایشات",
+};
 const Page = () => {
     return (
         <WithPermission permission_name={["azmayesh-type-management"]}>

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

@@ -1,6 +1,8 @@
 import DamagesPage from "@/components/dashboard/damageItems";
 import WithPermission from "@/core/middlewares/withPermission";
-
+export const metadata = {
+    title: "آیتم خسارات",
+};
 const Page = () => {
     return (
         <WithPermission permission_name={["manage-damage"]}>

src/app/(withAuth)/dashboard/damages/operator/page.js

@@ -1,6 +1,9 @@
 import WithPermission from "@/core/middlewares/withPermission";
 import ActivityCodeLog from "@/core/components/ActivityCodeLog";
 import OperatorPage from "@/components/dashboard/damages/operator";
+export const metadata = {
+    title: "کارتابل عملیات خسارات وارد بر ابنیه فنی",
+};
 const Page = () => {
     return (
         <WithPermission permission_name={["all"]}>

src/app/(withAuth)/dashboard/damages/report/page.js

@@ -1,6 +1,8 @@
 import DamagesReportPage from "@/components/dashboard/damages/report";
 import WithPermission from "@/core/middlewares/withPermission";
-
+export const metadata = {
+    title: "کارتابل گزارش خسارات وارد بر ابنیه فنی",
+};
 const Page = () => {
     return (
         <WithPermission permission_name={["show-receipt", "show-receipt-province"]}>

src/app/(withAuth)/dashboard/fast-react/operator/page.js

@@ -1,5 +1,8 @@
 import OperatorPage from "@/components/dashboard/fastReact/operator";
 import WithPermission from "@/core/middlewares/withPermission";
+export const metadata = {
+    title: "کارتابل عملیات واکنش سریع",
+};
 const Page = () => {
     return (
         <WithPermission permission_name={["show-fast-react-edarate-shahri"]}>

src/app/(withAuth)/dashboard/fast-react/supervisor/page.js

@@ -1,6 +1,9 @@
 import WithPermission from "@/core/middlewares/withPermission";
 import SupervisorPage from "@/components/dashboard/fastReact/supervisor";
 import ActivityCodeLog from "@/core/components/ActivityCodeLog";
+export const metadata = {
+    title: "کارتابل ارزیابی واکنش سریع",
+};
 const Page = () => {
     return (
         <WithPermission permission_name={["show-fast-react", "show-fast-react-province"]}>

src/app/(withAuth)/dashboard/permissions/page.js

@@ -0,0 +1,13 @@
+import WithPermission from "@/core/middlewares/withPermission";
+import PermissionTablePage from "@/components/dashboard/permissionTable";
+export const metadata = {
+    title: "سطح دسترسی ها",
+};
+const Page = () => {
+    return (
+        <WithPermission permission_name={["manage-permissions"]}>
+            <PermissionTablePage />
+        </WithPermission>
+    );
+};
+export default Page;

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

@@ -1,6 +1,9 @@
 import WithPermission from "@/core/middlewares/withPermission";
 import OperatorPage from "@/components/dashboard/roadItems/operator";
 import ActivityCodeLog from "@/core/components/ActivityCodeLog";
+export const metadata = {
+    title: "کارتابل عملیات فعالیت روزانه",
+};
 const Page = () => {
     return (
         <WithPermission permission_name={["create-road-item"]}>

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

@@ -1,6 +1,8 @@
 import WithPermission from "@/core/middlewares/withPermission";
 import ReportPage from "@/components/dashboard/roadItems/reports/ItemsReports";
-
+export const metadata = {
+    title: "کارتابل گزارش تعداد فعالیت ها به تفکیک آیتم",
+};
 const Page = () => {
     return (
         <WithPermission

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

@@ -1,4 +1,7 @@
 import RoadItemsReportMap from "@/components/dashboard/roadItems/reports/Map";
+export const metadata = {
+    title: "پراکندگی بر روی نقشه فعالیت روزانه",
+};
 
 const Page = () => {
     return <RoadItemsReportMap />;

src/app/(withAuth)/dashboard/road-items/reports/sub-items-report/page.js

@@ -1,5 +1,8 @@
 import WithPermission from "@/core/middlewares/withPermission";
 import SubItemsReports from "@/components/dashboard/roadItems/reports/SubItemsReports";
+export const metadata = {
+    title: "کارتابل گزارش تعداد فعالیت ها به تفکیک موارد مشاهده شده",
+};
 const Page = () => {
     return (
         <WithPermission

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

@@ -1,6 +1,9 @@
 import WithPermission from "@/core/middlewares/withPermission";
 import SupervisorPage from "@/components/dashboard/roadItems/supervisor";
 import ActivityCodeLog from "@/core/components/ActivityCodeLog";
+export const metadata = {
+    title: "کارتابل ارزیابی فعالیت روزانه",
+};
 const Page = () => {
     return (
         <WithPermission

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

@@ -1,6 +1,9 @@
 import WithPermission from "@/core/middlewares/withPermission";
 import OperatorPage from "@/components/dashboard/roadPatrols/operator";
 import ActivityCodeLog from "@/core/components/ActivityCodeLog";
+export const metadata = {
+    title: "کارتابل عملیات گشت راهداری",
+};
 
 const Page = () => {
     return (

src/app/(withAuth)/dashboard/road-patrols/reports/page.js

@@ -1,6 +1,8 @@
 import WithPermission from "@/core/middlewares/withPermission";
 import ReportPage from "@/components/dashboard/roadPatrols/reports";
-
+export const metadata = {
+    title: "کارتابل گزارش گشت راهداری",
+};
 const Page = () => {
     return (
         <WithPermission

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

@@ -1,6 +1,9 @@
 import WithPermission from "@/core/middlewares/withPermission";
 import SupervisorPage from "@/components/dashboard/roadPatrols/supervisor";
 import ActivityCodeLog from "@/core/components/ActivityCodeLog";
+export const metadata = {
+    title: "کارتابل ارزیابی گشت راهداری",
+};
 const Page = () => {
     return (
         <WithPermission

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

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

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

@@ -0,0 +1,22 @@
+import WithPermission from "@/core/middlewares/withPermission";
+import OperatorPage from "@/components/dashboard/roadSafety/operator";
+// 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",
+                "show-safety-and-privacy-operator-cartable-edarate-shahri",
+            ]}
+        >
+            <OperatorPage />
+            {/*<ActivityCodeLog activity_code={1145} />*/}
+        </WithPermission>
+    );
+};
+
+export default Page;

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

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

src/app/(withAuth)/dashboard/user-activities/page.js

@@ -0,0 +1,13 @@
+import UserActivitiesPage from "@/components/dashboard/userActivities";
+import WithPermission from "@/core/middlewares/withPermission";
+export const metadata = {
+    title: "انواع فعالیت کاربران",
+};
+const Page = () => {
+    return (
+        <WithPermission permission_name={["manage-log-list"]}>
+            <UserActivitiesPage />
+        </WithPermission>
+    );
+};
+export default Page;

src/app/layout.js

@@ -3,7 +3,10 @@ import { AuthProvider } from "@/lib/contexts/auth";
 import { TableSettingProvider } from "@/lib/contexts/tableSetting";
 
 export const metadata = {
-    title: "سامانه جامع راهداری",
+    title: {
+        template: "%s | سامانه جامع راهداری",
+        default: "سامانه جامع راهداری",
+    },
 };
 
 export default function RootLayout({ children }) {

src/components/dashboard/azmayesh/index.jsx

@@ -7,7 +7,7 @@ import AzmayeshList from "./AzmayeshList";
 const AzmayeshPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"آزمایشات (OPTS)"} />
+            <PageTitle title={"کارتابل آزمایشات (OPTS)"} />
             <AzmayeshList />
         </Stack>
     );

src/components/dashboard/azmayeshType/AzmayeshTypeList.jsx

@@ -52,7 +52,7 @@ const AzmayeshTypeList = () => {
                 columns={columns}
                 sorting={[{ id: "id", desc: true }]}
                 table_url={GET_AZMAYESH_TYPE_LIST_TABLE}
-                page_name={"azmayesh_type"}
+                page_name={"azmayeshType"}
                 table_name={"azmayeshTypeList"}
                 TableToolbar={Toolbar}
                 enableRowActions

src/components/dashboard/azmayeshType/index.jsx

@@ -7,7 +7,7 @@ import AzmayeshTypeList from "./AzmayeshTypeList";
 const AzmayeshTypePage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"نوع آزمایشات"} />
+            <PageTitle title={"کارتابل نوع آزمایشات"} />
             <AzmayeshTypeList />
         </Stack>
     );

src/components/dashboard/damageItems/DamagesList.jsx

@@ -70,8 +70,8 @@ const DamagesList = () => {
                     columns={columns}
                     sorting={[{ id: "id", desc: true }]}
                     table_url={GET_RECEIPT_DAMAGE_ITEMS_LIST}
-                    page_name={"receiptDamanagePage"}
+                    page_name={"receiptDamagePage"}
-                    table_name={"damanageList"}
+                    table_name={"receiptDamageList"}
                     TableToolbar={Toolbar}
                     enableRowActions
                     positionActionsColumn={"last"}

src/components/dashboard/damages/operator/Actions/create/Forms/CreateFormContent.jsx

@@ -80,6 +80,7 @@ const CreateFormContent = ({ setOpen, SubmitDamage, defaultData }) => {
         accident_type: defaultData.accident_type,
         province_id: defaultData.province_id,
         city_id: defaultData.city_id,
+        is_province: defaultData.is_province,
         axis_name: defaultData.axis_name,
         driver_name: defaultData.driver_name,
         phone_number: defaultData.phone_number,

src/components/dashboard/damages/operator/Actions/create/Forms/DamageInfo.jsx

@@ -3,66 +3,18 @@ import { Grid, Stack, TextField } from "@mui/material";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
 import MuiTimePicker from "@/core/components/MuiTimePicker";
 import SelectBox from "@/core/components/SelectBox";
-import useProvinces from "@/lib/hooks/useProvince";
 import PlateNumber from "@/core/components/PlateNumber";
 import ImageUpload from "./ImageUpload";
 import MapInfoOneMarker from "@/core/components/MapInfoOneMarker";
-import CityController from "@/components/dashboard/damages/operator/Actions/create/Forms/CityController";
 import PersianTextField from "@/core/components/PersianTextField";
+import LogesticController from "./LogesticController";
 
 const DamageInfo = ({ control, setValue, errors }) => {
     const StartPoint = useWatch({ control, name: "start_point" });
-    const { provinces, errorProvinces, loadingProvinces } = useProvinces();
 
     return (
         <Stack>
-            <Grid sx={{ mt: 2 }} container spacing={2}>
+            <LogesticController control={control} />
-                <Grid item xs={12} md={4}>
-                    <Controller
-                        name="province_id"
-                        control={control}
-                        render={({ field, fieldState: { error } }) => {
-                            return (
-                                <SelectBox
-                                    value={errorProvinces ? "error" : loadingProvinces ? "loading" : field.value || ""}
-                                    label="استان"
-                                    selectors={provinces}
-                                    schema={{ name: "name_fa", value: "id" }}
-                                    error={error}
-                                    onChange={field.onChange}
-                                    helperText={error?.message}
-                                    isLoading={loadingProvinces}
-                                    errorEcured={errorProvinces}
-                                />
-                            );
-                        }}
-                    />
-                </Grid>
-                <Grid item xs={12} md={4}>
-                    <CityController control={control} />
-                </Grid>
-                <Grid item xs={12} md={4}>
-                    <Controller
-                        name="axis_name"
-                        control={control}
-                        render={({ field, fieldState: { error } }) => (
-                            <PersianTextField
-                                value={field.value}
-                                variant="outlined"
-                                name="axis_name"
-                                fieldOnChange={field.onChange}
-                                label="نام محور"
-                                placeholder={"نام محور فارسی را وارد کنید"}
-                                fullWidth
-                                size="small"
-                                error={error}
-                                helperText={error?.message}
-                                InputLabelProps={{ shrink: true }}
-                            />
-                        )}
-                    />
-                </Grid>
-            </Grid>
             <Grid sx={{ mt: 2 }} container spacing={2}>
                 <Grid item xs={12} md={6}>
                     <Controller
@@ -73,7 +25,7 @@ const DamageInfo = ({ control, setValue, errors }) => {
                                 value={field.value}
                                 variant="outlined"
                                 name="driver_name"
-                                fieldOnChange={field.onChange}
+                                onChange={field.onChange}
                                 label="نام و نام خانوادگی راننده"
                                 placeholder={"نام و نام خانوادگی فارسی را وارد کنید"}
                                 fullWidth

src/components/dashboard/damages/operator/Actions/create/Forms/LogesticController.jsx

@@ -0,0 +1,64 @@
+import { Controller, useWatch } from "react-hook-form";
+import SelectBox from "@/core/components/SelectBox";
+import useProvinces from "@/lib/hooks/useProvince";
+import { Grid } from "@mui/material";
+import CityController from "./CityController";
+import PersianTextField from "@/core/components/PersianTextField";
+
+const LogesticController = ({ control }) => {
+    const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+    const isProvince = useWatch({ control, name: "is_province" });
+    return (
+        <Grid sx={{ mt: 1 }} container spacing={2}>
+            {!isProvince ? (
+                <Grid item xs={12} md={4}>
+                    <Controller
+                        name="province_id"
+                        control={control}
+                        render={({ field, fieldState: { error } }) => {
+                            return (
+                                <SelectBox
+                                    value={errorProvinces ? "error" : loadingProvinces ? "loading" : field.value || ""}
+                                    label="استان"
+                                    selectors={provinces}
+                                    schema={{ name: "name_fa", value: "id" }}
+                                    error={error}
+                                    disabled={isProvince}
+                                    onChange={field.onChange}
+                                    helperText={error?.message}
+                                    isLoading={loadingProvinces}
+                                    errorEcured={errorProvinces}
+                                />
+                            );
+                        }}
+                    />
+                </Grid>
+            ) : null}
+            <Grid item xs={12} md={isProvince ? 6 : 4}>
+                <CityController control={control} />
+            </Grid>
+            <Grid item xs={12} md={isProvince ? 6 : 4}>
+                <Controller
+                    name="axis_name"
+                    control={control}
+                    render={({ field, fieldState: { error } }) => (
+                        <PersianTextField
+                            value={field.value}
+                            variant="outlined"
+                            name="axis_name"
+                            onChange={field.onChange}
+                            label="نام محور"
+                            placeholder={"نام محور فارسی را وارد کنید"}
+                            fullWidth
+                            size="small"
+                            error={error}
+                            helperText={error?.message}
+                            InputLabelProps={{ shrink: true }}
+                        />
+                    )}
+                />
+            </Grid>
+        </Grid>
+    );
+};
+export default LogesticController;

src/components/dashboard/damages/operator/Actions/create/Forms/index.jsx

@@ -5,9 +5,14 @@ import { format } from "date-fns";
 import { CREATE_DAMAGE } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";
 import CloseIcon from "@mui/icons-material/Close";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { useAuth } from "@/lib/contexts/auth";
 
 const OperatorCreateForm = ({ open, setOpen, mutate }) => {
     const requestServer = useRequest({ notificationSuccess: true });
+    const { user } = useAuth();
+    const { data: userPermissions } = usePermissions();
+    const hasCreateProvincePermission = userPermissions.some((item) => ["add-receipt"].includes(item));
     const SubmitCreateDamage = async (result) => {
         const PlateNumber = `${result.plate_part1}-${result.plate_part2}-${result.plate_part3}-${result.plate_part4}`;
         const formData = new FormData();
@@ -52,7 +57,8 @@ const OperatorCreateForm = ({ open, setOpen, mutate }) => {
         accident_date: "",
         accident_time: "",
         accident_type: "",
-        province_id: null,
+        province_id: !hasCreateProvincePermission ? user.province_id : null,
+        is_province: !hasCreateProvincePermission,
         city_id: null,
         axis_name: "",
         driver_name: "",

src/components/dashboard/damages/operator/Form/EditForm/EditController.jsx

@@ -5,11 +5,16 @@ import { GET_DAMAGE_ITEM_DETAILS, UPDATE_DAMAGE_ITEM } from "@/core/utils/routes
 import DialogLoading from "@/core/components/DialogLoading";
 import { format } from "date-fns";
 import moment from "jalali-moment";
+import { useAuth } from "@/lib/contexts/auth";
+import { usePermissions } from "@/lib/hooks/usePermissions";
 
 const EditController = ({ rowId, mutate, setOpenEditDialog }) => {
     const requestServer = useRequest();
     const [damageItemDetails, setDamageItemDetails] = useState(null);
     const [damageItemDetailsLoading, setDamageItemDetailsLoading] = useState(false);
+    const { user } = useAuth();
+    const { data: userPermissions } = usePermissions();
+    const hasCreateProvincePermission = userPermissions.some((item) => ["add-receipt"].includes(item));
 
     useEffect(() => {
         setDamageItemDetailsLoading(true);
@@ -46,6 +51,7 @@ const EditController = ({ rowId, mutate, setOpenEditDialog }) => {
         radio_button: damageItemDetails?.report_base === 1 ? "report_base" : "police_file_checkbox",
         report_base: damageItemDetails?.report_base,
         province_id: damageItemDetails?.province_id || null,
+        is_province: !hasCreateProvincePermission,
         city_id: damageItemDetails?.city_id || null,
         start_point: { lat: damageItemDetails?.lat || "", lng: damageItemDetails?.lng || "" },
     };

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

@@ -256,7 +256,7 @@ const OperatorList = () => {
                             }
                             return (
                                 <Typography textAlign={"center"} variant="body2">
-                                    بدون تصویر
+                                    -
                                 </Typography>
                             );
                         },
@@ -451,8 +451,8 @@ const OperatorList = () => {
                     need_filter={true}
                     columns={columns}
                     table_url={GET_TECHNICAL_DAMAGE_OPERATOR_LIST}
-                    page_name={"operatorDamages"}
+                    page_name={"damagesOperator"}
-                    table_name={"operatorList"}
+                    table_name={"damagesOperatorList"}
                     sorting={[{ id: "id", desc: true }]}
                     TableToolbar={Toolbar}
                     enableRowActions

src/components/dashboard/damages/operator/index.jsx

@@ -6,7 +6,7 @@ import OperatorList from "./OperatorList";
 const OperatorPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"خسارات وارده بر ابنیه فنی و تاسیسات راه"} />
+            <PageTitle title={"کارتابل عملیات خسارات وارده بر ابنیه فنی و تاسیسات راه"} />
             <OperatorList />
         </Stack>
     );

src/components/dashboard/damages/report/ReportLists.jsx

@@ -230,8 +230,9 @@ const ReportLists = ({ data, specialFilter }) => {
                 TableToolbar={Toolbar}
                 columns={columns}
                 data={data.data}
-                page_name={"receiptReport"}
+                page_name={"damagesReport"}
-                table_name={"receiptReportList"}
+                table_name={"damagesReportList"}
+                enablePagination={false}
                 specialFilter={specialFilter}
             />
         </Box>

src/components/dashboard/damages/report/index.jsx

@@ -123,7 +123,7 @@ const DamagesReportPage = () => {
 
     return (
         <Stack spacing={1}>
-            <PageTitle title={"گزارش خسارات وارده بر ابنیه فنی"} />
+            <PageTitle title={"کارتابل گزارش خسارات وارده بر ابنیه فنی"} />
             <SearchReportList
                 control={control}
                 hasProvincesPermission={hasProvincesPermission}

src/components/dashboard/fastReact/complaintList/ComplaintListTable.jsx

@@ -115,8 +115,8 @@ const ComplaintListTable = ({ open, setOpen, mutate }) => {
                                 props.dependencyFieldValue?.value === ""
                                     ? "empty"
                                     : loadingEdaratList
-                                        ? "loading"
+                                      ? "loading"
-                                        : props.filterParameters.value
+                                      : props.filterParameters.value
                             }
                             columnSelectOption={getColumnSelectOptions}
                         />
@@ -196,7 +196,7 @@ const ComplaintListTable = ({ open, setOpen, mutate }) => {
                                     </Stack>
                                 );
                             }
-                            return <Typography variant="body2">بدون توضیحات</Typography>;
+                            return <Typography variant="body2">-</Typography>;
                         },
                     },
                     {
@@ -237,7 +237,10 @@ const ComplaintListTable = ({ open, setOpen, mutate }) => {
                         size: 100,
                     },
                     {
-                        accessorFn: (row) => moment(row.StartTime_DateTime, "M/D/YYYY h:mm:ss A").locale("fa").format("HH:mm | yyyy/MM/DD"),
+                        accessorFn: (row) =>
+                            moment(row.StartTime_DateTime, "M/D/YYYY h:mm:ss A")
+                                .locale("fa")
+                                .format("HH:mm | yyyy/MM/DD"),
                         header: "تاریخ ثبت",
                         id: "StartTime_DateTime",
                         enableColumnFilter: false,
@@ -246,8 +249,8 @@ const ComplaintListTable = ({ open, setOpen, mutate }) => {
                         grow: false,
                         size: 100,
                     },
-                ]
+                ],
-            }
+            },
         ];
     }, []);
 
@@ -261,12 +264,12 @@ const ComplaintListTable = ({ open, setOpen, mutate }) => {
                         columns={columns}
                         sorting={[{ id: "fk_RegisteredEventMessage", desc: true }]}
                         table_url={GET_FAST_REACT_COMPLAINTS}
-                        page_name={"complaintFastReact"}
+                        page_name={"fastReactComplaint"}
-                        table_name={"complaintList"}
+                        table_name={"fastReactComplaintList"}
                         TableToolbar={Toolbar}
                         enableRowActions
                         positionActionsColumn={"last"}
-                        RowActions={RowActions}
+                        RowActions={(props) => <RowActions {...props} mutateParentTable={mutate} />}
                     />
                 </Box>
             )}

src/components/dashboard/fastReact/complaintList/Form/registerAction/index.jsx

@@ -4,7 +4,7 @@ import RegisterActionContent from "./RegisterActionContent";
 import AppRegistrationIcon from "@mui/icons-material/AppRegistration";
 import useRequest from "@/lib/hooks/useRequest";
 import { REGISTER_COMPLAINTS_LIST } from "@/core/utils/routes";
-const RegisterAction = ({ rowId, mutate }) => {
+const RegisterAction = ({ rowId, mutate, mutateParentTable }) => {
     const requestServer = useRequest({ notificationSuccess: true });
     const [openRegisterActionDialog, setOpenRegisterActionDialog] = useState(false);
     const defaultValues = {
@@ -15,7 +15,6 @@ const RegisterAction = ({ rowId, mutate }) => {
         image_after_1: null,
     };
     const onBaseSubmit = async (result) => {
-        console.log(result);
         const formData = new FormData();
         const rmsLatLng = `${result.start_point.lat},${result.start_point.lng}`;
         if (result.rms_status === "1") {
@@ -33,6 +32,7 @@ const RegisterAction = ({ rowId, mutate }) => {
         })
             .then((res) => {
                 mutate();
+                mutateParentTable();
                 setOpenRegisterActionDialog(false);
             })
             .catch(() => {});

src/components/dashboard/fastReact/complaintList/RowActions/ReferList/ReferListContent.jsx

@@ -46,21 +46,22 @@ const ReferListContent = ({ rowId }) => {
                                 <TableRow>
                                     <TableCell>کاربر</TableCell>
                                     <TableCell>از اداره</TableCell>
-                                    <TableCell>از اداره</TableCell>
+                                    <TableCell>به اداره</TableCell>
                                     <TableCell>تاریخ</TableCell>
                                     <TableCell>توضیحات</TableCell>
                                 </TableRow>
                             </TableHead>
                             <TableBody>
                                 {data.map((refer, index) => {
+                                    const formatLocation = (province, edareh) =>
+                                        province ? `${province} | ${edareh}` : edareh;
                                     return (
-                                        <TableRow
+                                        <TableRow key={refer.id || index}>
-                                            key={index}
-                                            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                                        >
                                             <TableCell>{refer.user}</TableCell>
-                                            <TableCell>{`${refer.from_province} | ${refer.from_edareh}`}</TableCell>
+                                            <TableCell>
-                                            <TableCell>{`${refer.to_province} | ${refer.to_edareh}`}</TableCell>
+                                                {formatLocation(refer.from_province, refer.from_edareh)}
+                                            </TableCell>
+                                            <TableCell>{formatLocation(refer.to_province, refer.to_edareh)}</TableCell>
                                             <TableCell>
                                                 {moment(refer.created_at).locale("fa").format("HH:mm | yyyy/MM/DD")}
                                             </TableCell>

src/components/dashboard/fastReact/complaintList/RowActions/index.jsx

@@ -4,13 +4,17 @@ import ReferList from "./ReferList";
 import Refer from "./Refer";
 import { usePermissions } from "@/lib/hooks/usePermissions";
 
-const RowActions = ({ row, mutate }) => {
+const RowActions = ({ row, mutate, mutateParentTable }) => {
     const { data: userPermissions } = usePermissions();
-    const hasActionPermission = userPermissions.includes("show-fast-react-edarate-shahri")
+    const hasActionPermission = userPermissions.includes("show-fast-react-edarate-shahri");
     return (
         <Box sx={{ display: "flex", gap: 1 }}>
             {hasActionPermission && (
-                <RegisterAction mutate={mutate} rowId={row.getValue("road_observeds__id")} />
+                <RegisterAction
+                    mutate={mutate}
+                    mutateParentTable={mutateParentTable}
+                    rowId={row.getValue("road_observeds__id")}
+                />
             )}
             <Refer rowId={row.getValue("road_observeds__id")} mutate={mutate} />
             <ReferList rowId={row.getValue("road_observeds__id")} />

src/components/dashboard/fastReact/complaintList/index.jsx

@@ -1,10 +1,13 @@
-import { Button, IconButton, useMediaQuery } from "@mui/material";
+import { Badge, Button, IconButton, useMediaQuery } from "@mui/material";
 import ChecklistIcon from "@mui/icons-material/Checklist";
 import { useTheme } from "@emotion/react";
 import { useState } from "react";
 import ComplaintListTable from "./ComplaintListTable";
+import { useSidebarBadge } from "@/lib/hooks/useSidebarBadge";
+import { getValueByPath } from "@/core/utils/getValueByPath";
 
 const ComplaintList = ({ mutate }) => {
+    const { data } = useSidebarBadge();
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
     const [open, setOpen] = useState(false);
@@ -19,15 +22,21 @@ const ComplaintList = ({ mutate }) => {
                     <ChecklistIcon sx={{ fontSize: "25px" }} />
                 </IconButton>
             ) : (
-                <Button
+                <Badge
-                    size={"small"}
+                    badgeContent={data ? getValueByPath(data, "roadObserved.complaint_cnt").toLocaleString() : 0}
-                    variant="contained"
+                    max={999999}
-                    color="primary"
+                    color="warning"
-                    startIcon={<ChecklistIcon />}
-                    onClick={handleOpen}
                 >
-                    لیست شکایات
+                    <Button
-                </Button>
+                        size={"small"}
+                        variant="contained"
+                        color="primary"
+                        startIcon={<ChecklistIcon />}
+                        onClick={handleOpen}
+                    >
+                        لیست شکایات
+                    </Button>
+                </Badge>
             )}
             <ComplaintListTable open={open} setOpen={setOpen} mutate={mutate} />
         </>

src/components/dashboard/fastReact/operator/Form/EditForm/EditController.jsx

@@ -31,7 +31,6 @@ const EditController = ({ rowId, mutate, setOpenEditDialog }) => {
         image_after_1: fastReactItemDetails?.image_after || null,
     };
     const HandleSubmit = async (result) => {
-        console.log("result", result);
         const formData = new FormData();
         const rmsLatLng = `${result.start_point.lat},${result.start_point.lng}`;
         if (result.rms_status === "1") {

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

@@ -10,6 +10,7 @@ import DescriptionForm from "./RowActions/DescriptionDialog";
 import ImageDialog from "./RowActions/ImageDialog";
 import LocationForm from "./RowActions/LocationDialog";
 import Toolbar from "./Toolbar";
+import BlinkingCell from "@/core/components/BlinkingCell";
 
 const OperatorList = () => {
     const statusOptions = [
@@ -32,6 +33,7 @@ const OperatorList = () => {
                 columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
+                Cell: ({ row }) => <BlinkingCell value={row.original.id} visible={row.original.status == 2} />,
             },
             {
                 header: "اطلاعات ثبت‌ شده در سامانه سوانح",
@@ -105,7 +107,7 @@ const OperatorList = () => {
                                     </Stack>
                                 );
                             }
-                            return <Typography variant="body2">بدون توضیحات</Typography>;
+                            return <Typography variant="body2">-</Typography>;
                         },
                     },
                     {
@@ -126,44 +128,10 @@ const OperatorList = () => {
                             },
                         },
                         Cell: ({ row }) => {
-                            if (!row.original.rms_start_latlng) return <>بدون موقعیت</>;
+                            if (!row.original.lat) return <>-</>;
                             return (
                                 <Stack alignItems={"center"} justifyContent={"center"}>
-                                    <LocationForm
+                                    <LocationForm start_lat={row.original.lat} start_lng={row.original.lng} />
-                                        start_lat={row.original.rms_start_latlng[0]}
-                                        start_lng={row.original.rms_start_latlng[1]}
-                                    />
-                                </Stack>
-                            );
-                        },
-                    },
-                    {
-                        header: "تصاویر",
-                        id: "images",
-                        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 }) => {
-                            if (!row.original?.image_before && !row.original?.image_after) return <>بدون تصویر</>;
-                            return (
-                                <Stack alignItems={"center"} justifyContent={"center"}>
-                                    {row.original?.image_before && row.original?.image_after && (
-                                        <ImageDialog
-                                            image_before={row.original?.image_before}
-                                            image_after={row.original?.image_after}
-                                        />
-                                    )}
                                 </Stack>
                             );
                         },
@@ -181,7 +149,10 @@ const OperatorList = () => {
                         size: 100,
                     },
                     {
-                        accessorFn: (row) => moment(row.StartTime_DateTime, "M/D/YYYY h:mm:ss A").locale("fa").format("HH:mm | yyyy/MM/DD"),
+                        accessorFn: (row) =>
+                            moment(row.StartTime_DateTime, "M/D/YYYY h:mm:ss A")
+                                .locale("fa")
+                                .format("HH:mm | yyyy/MM/DD"),
                         header: "تاریخ ثبت",
                         id: "StartTime_DateTime",
                         enableColumnFilter: false,
@@ -190,60 +161,157 @@ const OperatorList = () => {
                         grow: false,
                         size: 100,
                     },
-                ]
+                ],
             },
             {
-                accessorFn: (row) => {
+                header: "اطلاعات اقدام",
-                    return row.rms_last_activity
+                id: "rms_register",
-                        ? moment(row?.rms_last_activity).locale("fa").format("HH:mm | yyyy/MM/DD")
-                        : "بدون تاریخ";
-                },
-                header: "تاریخ اقدام",
-                id: "rms_last_activity",
-                enableColumnFilter: true,
-                datatype: "date",
-                filterMode: "between",
-                grow: false,
-                size: 100,
-            },
-            {
-                accessorKey: "rms_description",
-                header: "توضیح مامور",
-                id: "rms_description",
                 enableColumnFilter: false,
-                datatype: "text",
+                enableSorting: false,
-                filterMode: "equals",
-                sortDescFirst: false,
-                columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
-                size: 100,
+                size: 50,
-                muiTableBodyCellProps: {
+                columns: [
-                    sx: {
+                    {
-                        borderLeft: "1px solid #e1e1e1",
+                        accessorFn: (row) => (row.rms_status == 1 ? "اقدام انجام شد" : "اقدام انجام نشد"),
-                        py: 0,
+                        header: "وضعیت اقدام",
-                        "&:first-of-type": {
+                        id: "rms_register_status",
-                            borderLeft: "unset",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        grow: false,
+                        size: 50,
+                    },
+                    {
+                        accessorKey: "rms_description",
+                        header: "توضیح مامور",
+                        id: "rms_description",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            if (renderedCellValue) {
+                                return (
+                                    <Stack alignItems={"center"} justifyContent={"center"}>
+                                        <DescriptionForm
+                                            description={renderedCellValue}
+                                            title={"توضیحات مامور"}
+                                            icon={EngineeringIcon}
+                                        />
+                                    </Stack>
+                                );
+                            }
+                            return <Typography variant="body2">-</Typography>;
                         },
                     },
+                    {
+                        header: "تصاویر",
+                        id: "rms_images",
+                        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 }) => {
+                            if (!row.original?.image_before && !row.original?.image_after) return <>-</>;
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    {row.original?.image_before && row.original?.image_after && (
+                                        <ImageDialog
+                                            image_before={row.original?.image_before}
+                                            image_after={row.original?.image_after}
+                                        />
+                                    )}
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        header: "موقعیت",
+                        id: "rms_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 }) => {
+                            if (!row.original.rms_start_latlng) return <>-</>;
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <LocationForm
+                                        start_lat={row.original.rms_start_latlng[0]}
+                                        start_lng={row.original.rms_start_latlng[1]}
+                                    />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        accessorFn: (row) => {
+                            return row.rms_last_activity
+                                ? moment(row?.rms_last_activity).locale("fa").format("HH:mm | yyyy/MM/DD")
+                                : "-";
+                        },
+                        header: "تاریخ اقدام",
+                        id: "rms_last_activity",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                ],
+            },
+            {
+                accessorKey: "status",
+                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: ({ renderedCellValue }) => {
+                Cell: ({ row }) => <>{row.original.status_fa}</>,
-                    if (renderedCellValue) {
-                        return (
-                            <Stack alignItems={"center"} justifyContent={"center"}>
-                                <DescriptionForm
-                                    description={renderedCellValue}
-                                    title={"توضیحات مامور"}
-                                    icon={EngineeringIcon}
-                                />
-                            </Stack>
-                        );
-                    }
-                    return <Typography variant="body2">بدون توضیحات</Typography>;
-                },
             },
             {
                 accessorKey: "supervisor_description",
-                header: "توضیح کارشناس",
+                header: "توضیح ناظر",
                 id: "supervisor_description",
                 enableColumnFilter: false,
                 datatype: "text",
@@ -267,33 +335,15 @@ const OperatorList = () => {
                             <Stack alignItems={"center"} justifyContent={"center"}>
                                 <DescriptionForm
                                     description={renderedCellValue}
-                                    title={"توضیحات کارشناس"}
+                                    title={"توضیحات ناظر"}
                                     icon={ThreePIcon}
                                 />
                             </Stack>
                         );
                     }
-                    return <Typography variant="body2">بدون توضیحات</Typography>;
+                    return <Typography variant="body2">-</Typography>;
                 },
             },
-            {
-                accessorKey: "status",
-                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}</>,
-            },
         ],
         []
     );
@@ -306,11 +356,11 @@ const OperatorList = () => {
                     columns={columns}
                     sorting={[
                         { id: "status", desc: true },
-                        { id: "id", desc: true },
+                        { id: "road_observeds__id", desc: true },
                     ]}
                     table_url={GET_FAST_REACT_OPERATOR}
-                    page_name={"operatorFastReact"}
+                    page_name={"fastReactOperator"}
-                    table_name={"OperatorList"}
+                    table_name={"fastReactOperatorList"}
                     TableToolbar={Toolbar}
                     enableRowActions
                     positionActionsColumn={"last"}

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

@@ -4,7 +4,7 @@ import { Stack } from "@mui/material";
 
 const Toolbar = ({ table, filterData, mutate }) => {
     return (
-        <Stack direction={"row"} spacing={2}>
+        <Stack direction={"row"} spacing={1}>
             <PrintExcel table={table} filterData={filterData} />
             <ComplaintList mutate={mutate} />
         </Stack>

src/components/dashboard/fastReact/operator/index.jsx

@@ -6,7 +6,7 @@ import OperatorList from "./OperatorList";
 const OperatorPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"عملیات"} />
+            <PageTitle title={"کارتابل عملیات واکنش سریع"} />
             <OperatorList />
         </Stack>
     );

src/components/dashboard/fastReact/supervisor/RowActions/index.jsx

@@ -18,7 +18,9 @@ const RowActions = ({ row, mutate }) => {
             {hasSupervisePermission && row.original?.status === 0 && (
                 <RejectForm rowId={row.getValue("road_observeds__id")} mutate={mutate} />
             )}
-            {hasRestorePermission && row.original?.status !== 0 && <RestoreForm rowId={row.getValue("road_observeds__id")} mutate={mutate} />}
+            {hasRestorePermission && row.original?.status !== 0 && (
+                <RestoreForm rowId={row.getValue("road_observeds__id")} mutate={mutate} />
+            )}
         </Box>
     );
 };

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

@@ -15,6 +15,7 @@ import LocationForm from "./RowActions/LocationDialog";
 import EngineeringIcon from "@mui/icons-material/Engineering";
 import ThreePIcon from "@mui/icons-material/ThreeP";
 import ImageDialog from "./RowActions/ImageDialog";
+import BlinkingCell from "@/core/components/BlinkingCell";
 
 const SupervisorList = () => {
     const { data: userPermissions } = usePermissions();
@@ -75,6 +76,7 @@ const SupervisorList = () => {
                 columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
+                Cell: ({ row }) => <BlinkingCell value={row.original.id} visible={row.original.status == 0} />,
             },
             ...(hasCountryPermission ? [dynamicColumns] : []),
             {
@@ -125,8 +127,8 @@ const SupervisorList = () => {
                                 props.dependencyFieldValue?.value === ""
                                     ? "empty"
                                     : loadingEdaratList
-                                        ? "loading"
+                                      ? "loading"
-                                        : props.filterParameters.value
+                                      : props.filterParameters.value
                             }
                             columnSelectOption={getColumnSelectOptions}
                         />
@@ -206,7 +208,7 @@ const SupervisorList = () => {
                                     </Stack>
                                 );
                             }
-                            return <Typography variant="body2">بدون توضیحات</Typography>;
+                            return <Typography variant="body2">-</Typography>;
                         },
                     },
                     {
@@ -227,44 +229,10 @@ const SupervisorList = () => {
                             },
                         },
                         Cell: ({ row }) => {
-                            if (!row.original.rms_start_latlng) return <>بدون موقعیت</>;
+                            if (!row.original.lat) return <>-</>;
                             return (
                                 <Stack alignItems={"center"} justifyContent={"center"}>
-                                    <LocationForm
+                                    <LocationForm start_lat={row.original.lat} start_lng={row.original.lng} />
-                                        start_lat={row.original.rms_start_latlng[0]}
-                                        start_lng={row.original.rms_start_latlng[1]}
-                                    />
-                                </Stack>
-                            );
-                        },
-                    },
-                    {
-                        header: "تصاویر",
-                        id: "images",
-                        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 }) => {
-                            if (!row.original?.image_before && !row.original?.image_after) return <>بدون تصویر</>;
-                            return (
-                                <Stack alignItems={"center"} justifyContent={"center"}>
-                                    {row.original?.image_before && row.original?.image_after && (
-                                        <ImageDialog
-                                            image_before={row.original?.image_before}
-                                            image_after={row.original?.image_after}
-                                        />
-                                    )}
                                 </Stack>
                             );
                         },
@@ -282,7 +250,10 @@ const SupervisorList = () => {
                         size: 100,
                     },
                     {
-                        accessorFn: (row) => moment(row.StartTime_DateTime, "M/D/YYYY h:mm:ss A").locale("fa").format("HH:mm | yyyy/MM/DD"),
+                        accessorFn: (row) =>
+                            moment(row.StartTime_DateTime, "M/D/YYYY h:mm:ss A")
+                                .locale("fa")
+                                .format("HH:mm | yyyy/MM/DD"),
                         header: "تاریخ ثبت",
                         id: "StartTime_DateTime",
                         enableColumnFilter: false,
@@ -291,60 +262,157 @@ const SupervisorList = () => {
                         grow: false,
                         size: 100,
                     },
-                ]
+                ],
             },
             {
-                accessorFn: (row) => {
+                header: "اطلاعات اقدام",
-                    return row.rms_last_activity
+                id: "rms_register",
-                        ? moment(row?.rms_last_activity).locale("fa").format("HH:mm | yyyy/MM/DD")
-                        : "بدون تاریخ";
-                },
-                header: "تاریخ اقدام",
-                id: "rms_last_activity",
-                enableColumnFilter: true,
-                datatype: "date",
-                filterMode: "between",
-                grow: false,
-                size: 100,
-            },
-            {
-                accessorKey: "rms_description",
-                header: "توضیح مامور",
-                id: "rms_description",
                 enableColumnFilter: false,
-                datatype: "text",
+                enableSorting: false,
-                filterMode: "equals",
-                sortDescFirst: false,
-                columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
-                size: 100,
+                size: 50,
-                muiTableBodyCellProps: {
+                columns: [
-                    sx: {
+                    {
-                        borderLeft: "1px solid #e1e1e1",
+                        accessorFn: (row) => (row.rms_status == 1 ? "اقدام انجام شد" : "اقدام انجام نشد"),
-                        py: 0,
+                        header: "وضعیت اقدام",
-                        "&:first-of-type": {
+                        id: "rms_register_status",
-                            borderLeft: "unset",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        grow: false,
+                        size: 50,
+                    },
+                    {
+                        accessorKey: "rms_description",
+                        header: "توضیح مامور",
+                        id: "rms_description",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            if (renderedCellValue) {
+                                return (
+                                    <Stack alignItems={"center"} justifyContent={"center"}>
+                                        <DescriptionForm
+                                            description={renderedCellValue}
+                                            title={"توضیحات مامور"}
+                                            icon={EngineeringIcon}
+                                        />
+                                    </Stack>
+                                );
+                            }
+                            return <Typography variant="body2">-</Typography>;
                         },
                     },
+                    {
+                        header: "تصاویر",
+                        id: "rms_images",
+                        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 }) => {
+                            if (!row.original?.image_before && !row.original?.image_after) return <>-</>;
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    {row.original?.image_before && row.original?.image_after && (
+                                        <ImageDialog
+                                            image_before={row.original?.image_before}
+                                            image_after={row.original?.image_after}
+                                        />
+                                    )}
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        header: "موقعیت",
+                        id: "rms_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 }) => {
+                            if (!row.original.rms_start_latlng) return <>-</>;
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <LocationForm
+                                        start_lat={row.original.rms_start_latlng[0]}
+                                        start_lng={row.original.rms_start_latlng[1]}
+                                    />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        accessorFn: (row) => {
+                            return row.rms_last_activity
+                                ? moment(row?.rms_last_activity).locale("fa").format("HH:mm | yyyy/MM/DD")
+                                : "-";
+                        },
+                        header: "تاریخ اقدام",
+                        id: "rms_last_activity",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                ],
+            },
+            {
+                accessorKey: "status",
+                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: ({ renderedCellValue }) => {
+                Cell: ({ row }) => <>{row.original.status_fa}</>,
-                    if (renderedCellValue) {
-                        return (
-                            <Stack alignItems={"center"} justifyContent={"center"}>
-                                <DescriptionForm
-                                    description={renderedCellValue}
-                                    title={"توضیحات مامور"}
-                                    icon={EngineeringIcon}
-                                />
-                            </Stack>
-                        );
-                    }
-                    return <Typography variant="body2">بدون توضیحات</Typography>;
-                },
             },
             {
                 accessorKey: "supervisor_description",
-                header: "توضیح کارشناس",
+                header: "توضیح ناظر",
                 id: "supervisor_description",
                 enableColumnFilter: false,
                 datatype: "text",
@@ -374,27 +442,9 @@ const SupervisorList = () => {
                             </Stack>
                         );
                     }
-                    return <Typography variant="body2">بدون توضیحات</Typography>;
+                    return <Typography variant="body2">-</Typography>;
                 },
             },
-            {
-                accessorKey: "status",
-                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}</>,
-            },
         ];
     }, []);
 
@@ -406,11 +456,11 @@ const SupervisorList = () => {
                     columns={columns}
                     sorting={[
                         { id: "status", desc: false },
-                        { id: "id", desc: true },
+                        { id: "road_observeds__id", desc: true },
                     ]}
                     table_url={GET_FAST_REACT_SUPERVISOR}
-                    page_name={"supervisorFastReact"}
+                    page_name={"fastReactSupervisor"}
-                    table_name={"supervisorList"}
+                    table_name={"fastReactSupervisorList"}
                     TableToolbar={Toolbar}
                     enableRowActions
                     positionActionsColumn={"last"}

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

@@ -4,7 +4,7 @@ import { Stack } from "@mui/material";
 
 const Toolbar = ({ table, filterData, mutate }) => {
     return (
-        <Stack direction={"row"} spacing={2}>
+        <Stack direction={"row"} spacing={1}>
             <PrintExcel table={table} filterData={filterData} />
             <ComplaintList mutate={mutate} />
         </Stack>

src/components/dashboard/fastReact/supervisor/index.jsx

@@ -6,7 +6,7 @@ import SupervisorList from "./SupervisorList";
 const SupervisorPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"ارزیابی"} />
+            <PageTitle title={"کارتابل ارزیابی واکنش سریع"} />
             <SupervisorList />
         </Stack>
     );

src/components/dashboard/permissionTable/Actions/Create/Form/CreateFormContent.jsx

@@ -0,0 +1,218 @@
+import StyledForm from "@/core/components/StyledForm";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Beenhere, ExitToApp } from "@mui/icons-material";
+import {
+    Button,
+    DialogActions,
+    DialogContent,
+    Grid,
+    Stack,
+    TextField,
+    FormControlLabel,
+    Checkbox,
+} from "@mui/material";
+import { Controller, useForm } from "react-hook-form";
+import { object, string } from "yup";
+import PersianTextField from "@/core/components/PersianTextField";
+
+const validationSchema = object({
+    name: string().required("وارد کردن نام انگلیسی الزامیست!"),
+    name_fa: string().required("وارد کردن نام فارسی الزامیست!"),
+    type: string().required("وارد کردن گروه (انگلیسی) الزامیست!"),
+    type_fa: string().required("وارد کردن گروه (فارسی) الزامیست!"),
+});
+
+const CreateFormContent = ({ setOpen, defaultValues, onSubmitBase }) => {
+    const {
+        control,
+        handleSubmit,
+        formState: { isSubmitting, errors },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+    });
+    const handleOnSubmit = async (data) => {
+        await onSubmitBase(data);
+    };
+
+    return (
+        <>
+            <StyledForm onSubmit={handleSubmit(handleOnSubmit)}>
+                <DialogContent dividers>
+                    <Stack spacing={3}>
+                        <Stack>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12} sm={6}>
+                                    <Controller
+                                        name="name"
+                                        control={control}
+                                        render={({ field: { onChange, value }, fieldState: { error } }) => (
+                                            <TextField
+                                                fullWidth
+                                                size="small"
+                                                label="نام انگلیسی"
+                                                value={value}
+                                                onChange={onChange}
+                                                placeholder="نام انگلیسی را وارد کنید"
+                                                error={!!error}
+                                                helperText={error ? error.message : null}
+                                                variant="outlined"
+                                                InputLabelProps={{ shrink: true }}
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                                <Grid item xs={12} sm={6}>
+                                    <Controller
+                                        name="name_fa"
+                                        control={control}
+                                        render={({ field: { onChange, value }, fieldState: { error } }) => (
+                                            <PersianTextField
+                                                fullWidth
+                                                size="small"
+                                                label="نام فارسی"
+                                                value={value}
+                                                onChange={onChange}
+                                                placeholder="نام فارسی را وارد کنید"
+                                                error={!!error}
+                                                helperText={error ? error.message : null}
+                                                variant="outlined"
+                                                InputLabelProps={{ shrink: true }}
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Stack>
+                        <Stack>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12} sm={6}>
+                                    <Controller
+                                        name="type"
+                                        control={control}
+                                        render={({ field: { onChange, value }, fieldState: { error } }) => (
+                                            <TextField
+                                                fullWidth
+                                                size="small"
+                                                label="گروه (انگلیسی)"
+                                                value={value}
+                                                onChange={onChange}
+                                                placeholder="گروه (انگلیسی) را وارد کنید"
+                                                error={!!error}
+                                                helperText={error ? error.message : null}
+                                                variant="outlined"
+                                                InputLabelProps={{ shrink: true }}
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                                <Grid item xs={12} sm={6}>
+                                    <Controller
+                                        name="type_fa"
+                                        control={control}
+                                        render={({ field: { onChange, value }, fieldState: { error } }) => (
+                                            <PersianTextField
+                                                fullWidth
+                                                size="small"
+                                                label="گروه (فارسی)"
+                                                value={value}
+                                                onChange={onChange}
+                                                placeholder="گروه (فارسی) را وارد کنید"
+                                                error={!!error}
+                                                helperText={error ? error.message : null}
+                                                variant="outlined"
+                                                InputLabelProps={{ shrink: true }}
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Stack>
+                        <Stack>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12} sm={12}>
+                                    <Controller
+                                        name="description"
+                                        control={control}
+                                        render={({ field: { onChange, value }, fieldState: { error } }) => (
+                                            <TextField
+                                                fullWidth
+                                                size="small"
+                                                label="توضیحات"
+                                                multiline
+                                                rows={4}
+                                                value={value}
+                                                onChange={onChange}
+                                                placeholder="توضیحات را وارد کنید"
+                                                error={!!error}
+                                                helperText={error ? error.message : null}
+                                                variant="outlined"
+                                                InputLabelProps={{ shrink: true }}
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Stack>
+                        <Stack>
+                            <Grid container spacing={2}>
+                                <Grid item xs={12} sm={6}>
+                                    <Controller
+                                        name="need_province"
+                                        control={control}
+                                        render={({ field }) => (
+                                            <FormControlLabel
+                                                control={
+                                                    <Checkbox
+                                                        {...field}
+                                                        checked={field.value}
+                                                        onChange={field.onChange}
+                                                    />
+                                                }
+                                                label="دسترسی استانی"
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                                <Grid item xs={12} sm={6}>
+                                    <Controller
+                                        name="need_edare_shahri"
+                                        control={control}
+                                        render={({ field }) => (
+                                            <FormControlLabel
+                                                control={
+                                                    <Checkbox
+                                                        {...field}
+                                                        checked={field.value}
+                                                        onChange={field.onChange}
+                                                    />
+                                                }
+                                                label="دسترسی اداره شهری"
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        onClick={() => setOpen(false)}
+                        variant="outlined"
+                        color="secondary"
+                        startIcon={<ExitToApp />}
+                    >
+                        بستن
+                    </Button>
+                    <Button variant="contained" disabled={isSubmitting} type="submit" endIcon={<Beenhere />}>
+                        {" "}
+                        {isSubmitting ? "در حال ثبت سطح دسترسی" : "ثبت سطح دسترسی"}{" "}
+                    </Button>
+                </DialogActions>
+            </StyledForm>
+        </>
+    );
+};
+export default CreateFormContent;

src/components/dashboard/permissionTable/Actions/Create/Form/index.jsx

@@ -0,0 +1,66 @@
+import { Dialog, DialogTitle, IconButton } from "@mui/material";
+import CreateFormContent from "./CreateFormContent";
+import CloseIcon from "@mui/icons-material/Close";
+import useRequest from "@/lib/hooks/useRequest";
+import { CREATE_PERMISSION } from "@/core/utils/routes";
+import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
+
+const CreateForm = ({ open, setOpen, mutate }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+    const defaultValues = {
+        name: "",
+        name_fa: "",
+        description: "",
+        type: "",
+        type_fa: "",
+        need_province: false,
+        need_edare_shahri: false,
+    };
+    const onSubmit = async (result) => {
+        const formData = new FormData();
+        formData.append("name", result.name);
+        formData.append("name_fa", result.name_fa);
+        formData.append("description", result.description);
+        formData.append("type", result.type);
+        formData.append("type_fa", result.type_fa);
+        formData.append("need_province", result.need_province ? 1 : 0);
+        formData.append("need_edare_shahri", result.need_edare_shahri ? 1 : 0);
+        await requestServer(CREATE_PERMISSION, "post", {
+            data: formData,
+        })
+            .then(() => {
+                mutate();
+                setOpen(false);
+            })
+            .catch(() => {});
+    };
+    return (
+        <Dialog open={open} fullWidth maxWidth="sm">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
+            <DialogHeader>
+                <DialogTitle>ثبت سطح دسترسی جدید</DialogTitle>
+            </DialogHeader>
+            {open && (
+                <CreateFormContent
+                    defaultValues={defaultValues}
+                    onSubmitBase={onSubmit}
+                    setOpen={setOpen}
+                    mutate={mutate}
+                />
+            )}
+        </Dialog>
+    );
+};
+export default CreateForm;

src/components/dashboard/permissionTable/Actions/Create/index.jsx

@@ -0,0 +1,36 @@
+import { AddCircle } from "@mui/icons-material";
+import { Button, IconButton, useMediaQuery, useTheme } from "@mui/material";
+import CreateForm from "./Form";
+import { useState } from "react";
+
+const CreatePermission = ({ mutate }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="ثبت سطح دسترسی" color="primary" onClick={handleOpen}>
+                    <AddCircle sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    size={"small"}
+                    variant="contained"
+                    color="primary"
+                    startIcon={<AddCircle />}
+                    onClick={handleOpen}
+                >
+                    ثبت سطح دسترسی
+                </Button>
+            )}
+            <CreateForm open={open} setOpen={setOpen} mutate={mutate} />
+        </>
+    );
+};
+export default CreatePermission;

src/components/dashboard/permissionTable/Actions/Edit/EditController.jsx

@@ -0,0 +1,46 @@
+import useRequest from "@/lib/hooks/useRequest";
+import CreateFormContent from "../Create/Form/CreateFormContent";
+import { UPDATE_PERMISSION } from "@/core/utils/routes";
+import { DialogTitle } from "@mui/material";
+import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
+
+const EditController = ({ rowId, mutate, setOpen, row }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+
+    const defaultData = {
+        name: row.original?.name || "",
+        name_fa: row.original?.name_fa || "",
+        description: row.original?.description || "",
+        type: row.original?.type || "",
+        type_fa: row.original?.type_fa || "",
+        need_province: row.original?.need_province || false,
+        need_edare_shahri: row.original?.need_edare_shahri || false,
+    };
+    const handleSubmit = async (result) => {
+        const formData = new FormData();
+        formData.append("name", result.name);
+        formData.append("name_fa", result.name_fa);
+        formData.append("description", result.description);
+        formData.append("type", result.type);
+        formData.append("type_fa", result.type_fa);
+        formData.append("need_province", result.need_province ? 1 : 0);
+        formData.append("need_edare_shahri", result.need_edare_shahri ? 1 : 0);
+        await requestServer(`${UPDATE_PERMISSION}/${rowId}`, "post", {
+            data: formData,
+        })
+            .then(() => {
+                mutate();
+                setOpen(false);
+            })
+            .catch(() => {});
+    };
+    return (
+        <>
+            <DialogHeader>
+                <DialogTitle>ویرایش سطح دسترسی</DialogTitle>
+            </DialogHeader>
+            <CreateFormContent setOpen={setOpen} defaultValues={defaultData} onSubmitBase={handleSubmit} />
+        </>
+    );
+};
+export default EditController;

src/components/dashboard/permissionTable/Actions/Edit/index.jsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Dialog, IconButton, Tooltip } from "@mui/material";
+import BorderColorIcon from "@mui/icons-material/BorderColor";
+import CloseIcon from "@mui/icons-material/Close";
+import EditController from "./EditController";
+
+const EditPermission = ({ mutate, row, rowId }) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="ویرایش سطح دسترسی" arrow placement="right">
+                <IconButton
+                    color="primary"
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    onClick={() => {
+                        setOpen(true);
+                    }}
+                >
+                    <BorderColorIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={open}
+                maxWidth={"sm"}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+            >
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpen(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <CloseIcon />
+                </IconButton>
+                {open && <EditController setOpen={setOpen} rowId={rowId} row={row} mutate={mutate} />}
+            </Dialog>
+        </>
+    );
+};
+export default EditPermission;

src/components/dashboard/permissionTable/PermissionList.jsx

@@ -0,0 +1,157 @@
+"use client";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { GET_PERMISSION_TABLE_LIST } from "@/core/utils/routes";
+import { Box, Stack, Typography } from "@mui/material";
+import { useMemo } from "react";
+import Toolbar from "./Toolbar";
+import RowActions from "./RowActions";
+import moment from "jalali-moment";
+import DoneIcon from "@mui/icons-material/Done";
+import ClearIcon from "@mui/icons-material/Clear";
+
+const PermissionList = () => {
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "type",
+                header: "گروه (انگلیسی)",
+                id: "type",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "type_fa",
+                header: "گروه (فارسی)",
+                id: "type_fa",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "name",
+                header: "نام انگلیسی",
+                id: "name",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "name_fa",
+                header: "نام فارسی",
+                id: "name_fa",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "need_province",
+                header: "دسترسی استانی",
+                id: "need_province",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+                Cell: ({ renderedCellValue }) => (
+                    <>
+                        {renderedCellValue === 1 ? (
+                            <Stack alignItems={"center"} justifyContent={"center"}>
+                                <DoneIcon color="primary" />
+                            </Stack>
+                        ) : (
+                            <Stack alignItems={"center"} justifyContent={"center"}>
+                                <ClearIcon color="error" />
+                            </Stack>
+                        )}
+                    </>
+                ),
+            },
+            {
+                accessorKey: "need_edare_shahri",
+                header: "دسترسی اداره شهری",
+                id: "need_edare_shahri",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+                Cell: ({ renderedCellValue }) => (
+                    <>
+                        {renderedCellValue === 1 ? (
+                            <Stack alignItems={"center"} justifyContent={"center"}>
+                                <DoneIcon color="primary" />
+                            </Stack>
+                        ) : (
+                            <Stack alignItems={"center"} justifyContent={"center"}>
+                                <ClearIcon color="error" />
+                            </Stack>
+                        )}
+                    </>
+                ),
+            },
+            {
+                accessorFn: (row) => {
+                    const date = row.created_at ? new Date(row.created_at) : null;
+                    return date ? moment(date).locale("fa").format("HH:mm | jYYYY/jMM/jDD") : "-";
+                },
+                header: "تاریخ ثبت",
+                id: "created_at",
+                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_PERMISSION_TABLE_LIST}
+                    page_name={"permissionTablePage"}
+                    table_name={"permissionTableList"}
+                    TableToolbar={Toolbar}
+                    enableRowActions
+                    positionActionsColumn={"last"}
+                    RowActions={RowActions}
+                />
+            </Box>
+        </>
+    );
+};
+export default PermissionList;

src/components/dashboard/permissionTable/RowActions/DeleteDialog/DeleteContent.jsx

@@ -0,0 +1,39 @@
+import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
+import React, { useState } from "react";
+import useRequest from "@/lib/hooks/useRequest";
+import { DELETE_PERMISSION } 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_PERMISSION}/${rowId}`, "delete")
+            .then(() => {
+                mutate();
+                setSubmitting(false);
+                setOpenDeleteDialog(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/permissionTable/RowActions/DeleteDialog/index.jsx

@@ -0,0 +1,34 @@
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import DeleteContent from "./DeleteContent";
+const DeleteDialog = ({ 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>
+                {openDeleteDialog && (
+                    <DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default DeleteDialog;

src/components/dashboard/permissionTable/RowActions/index.jsx

@@ -0,0 +1,12 @@
+import { Box } from "@mui/material";
+import EditPermission from "../Actions/Edit";
+import DeleteDialog from "./DeleteDialog";
+const RowActions = ({ row, mutate }) => {
+    return (
+        <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
+            <EditPermission row={row} mutate={mutate} rowId={row.getValue("id")} />
+            <DeleteDialog mutate={mutate} rowId={row.getValue("id")} />
+        </Box>
+    );
+};
+export default RowActions;

src/components/dashboard/permissionTable/Toolbar.jsx

@@ -0,0 +1,9 @@
+import CreatePermission from "./Actions/Create";
+const Toolbar = ({ mutate }) => {
+    return (
+        <>
+            <CreatePermission mutate={mutate} />
+        </>
+    );
+};
+export default Toolbar;

src/components/dashboard/permissionTable/index.jsx

@@ -0,0 +1,13 @@
+import PageTitle from "@/core/components/PageTitle";
+import { Stack } from "@mui/material";
+import PermissionList from "./PermissionList";
+
+const PermissionTablePage = () => {
+    return (
+        <Stack spacing={1}>
+            <PageTitle title={"سطح دسترسی ها"} />
+            <PermissionList />
+        </Stack>
+    );
+};
+export default PermissionTablePage;

src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemsForm.jsx

@@ -1,7 +1,7 @@
-import React from "react";
+import DialogLoading from "@/core/components/DialogLoading";
-import { Card, CardActionArea, Grid, LinearProgress, Typography } from "@mui/material";
-import Image from "next/image";
 import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
+import { Card, CardActionArea, Grid, Typography } from "@mui/material";
+import Image from "next/image";
 
 const GetItemsForm = ({ setValue, setItemsList, tabState, setTabState }) => {
     const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
@@ -13,7 +13,7 @@ const GetItemsForm = ({ setValue, setItemsList, tabState, setTabState }) => {
                     خطا در دریافت لیست آیتم ها
                 </Typography>
             ) : loadingItemsList ? (
-                <LinearProgress />
+                <DialogLoading />
             ) : (
                 <Grid container sx={{ justifyContent: "center" }} spacing={2}>
                     {itemsList.map((item) => (

src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetSubItemsForm.jsx

@@ -1,6 +1,6 @@
-import React from "react";
+import DialogLoading from "@/core/components/DialogLoading";
-import { Card, CardActionArea, Grid, LinearProgress, Typography } from "@mui/material";
 import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
+import { Card, CardActionArea, Grid, Typography } from "@mui/material";
 
 const GetSubItemsForm = ({ setValue, watch, setSubItemsList, tabState, setTabState }) => {
     const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(watch("item_id"));
@@ -12,7 +12,7 @@ const GetSubItemsForm = ({ setValue, watch, setSubItemsList, tabState, setTabSta
                     خطا در دریافت اقدام انجام شده
                 </Typography>
             ) : loadingSubItemsList ? (
-                <LinearProgress />
+                <DialogLoading />
             ) : (
                 <Grid container sx={{ justifyContent: "center" }} spacing={2}>
                     {subItemsList.map((item) => (

src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/SearchItemInfo.jsx

@@ -1,6 +1,6 @@
-import { LinearProgress, Typography } from "@mui/material";
+import DialogLoading from "@/core/components/DialogLoading";
 import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
-import React from "react";
+import { Typography } from "@mui/material";
 import SearchItems from "./SearchItems";
 import TableInfo from "./TableInfo";
 
@@ -18,7 +18,7 @@ const SearchItemInfo = ({
     return (
         <>
             {loadingItemsList ? (
-                <LinearProgress />
+                <DialogLoading />
             ) : errorItemsList ? (
                 <Typography textAlign={"center"} color={"error.main"}>
                     خطا در دریافت اطلاعات!!!

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

@@ -1,4 +1,5 @@
 "use client";
+import BlinkingCell from "@/core/components/BlinkingCell";
 import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import { GET_ROAD_ITEMS_OPERATOR_LIST } from "@/core/utils/routes";
@@ -8,12 +9,12 @@ import { Box, Stack, Typography } from "@mui/material";
 import moment from "jalali-moment";
 import { useEffect, useMemo, useState } from "react";
 import RowActions from "./RowActions";
+import DescriptionForm from "./RowActions/DescriptionForm";
 import ImageDialog from "./RowActions/ImageForm";
 import LocationForm from "./RowActions/LocationForm";
+import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
 import RahdaranDialog from "./RowActions/RahdaranForm";
 import Toolbar from "./Toolbar";
-import DescriptionForm from "./RowActions/DescriptionForm";
-import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
 
 const OperatorList = () => {
     const statusOptions = [
@@ -25,7 +26,6 @@ const OperatorList = () => {
     const columns = useMemo(
         () => [
             {
-                accessorKey: "id",
                 header: "کد یکتا",
                 id: "id",
                 enableColumnFilter: true,
@@ -34,245 +34,256 @@ const OperatorList = () => {
                 columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
+                Cell: ({ row }) => <BlinkingCell value={row.original.id} visible={row.original.status == 2} />,
             },
             {
-                accessorKey: "item",
+                header: "اطلاعات فعالیت",
-                header: "آیتم فعالیت",
+                id: "info",
-                id: "item",
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterMode: "equals",
-                grow: false,
-                size: 100,
-                ColumnSelectComponent: (props) => {
-                    const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
-
-                    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 }) => {
-                    return row.original.item_fa;
-                },
-            },
-            {
-                accessorKey: "sub_item",
-                header: "اقدام انجام شده",
-                id: "sub_item",
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterMode: "equals",
-                dependencyId: "item",
-                ColumnSelectComponent: (props) => {
-                    const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(
-                        props.dependencyFieldValue.value
-                    );
-                    const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
-
-                    const getColumnSelectOptions = useMemo(() => {
-                        if (props.dependencyFieldValue.value === "") {
-                            return [{ value: "empty", label: "ابتدا آیتم فعالیت را انتخاب کنید" }];
-                        }
-                        if (loadingSubItemsList) {
-                            return [{ value: "loading", label: "در حال بارگذاری..." }];
-                        }
-                        if (errorSubItemsList) {
-                            return [{ value: "error", label: "خطا در بارگذاری" }];
-                        }
-                        return [
-                            { value: "", label: "همه اقدام ها" },
-                            ...subItemsList.map((item) => ({
-                                value: item.sub_item,
-                                label: item.name,
-                            })),
-                        ];
-                    }, [subItemsList, loadingSubItemsList, errorSubItemsList]);
-
-                    useEffect(() => {
-                        if (prevDependency === props.dependencyFieldValue.value) return;
-                        props.handleChange({ ...props.filterParameters, value: "" });
-                        setPrevDependency(props.dependencyFieldValue.value);
-                    }, [props.dependencyFieldValue.value]);
-                    return (
-                        <CustomSelectByDependency
-                            {...props}
-                            value={
-                                props.dependencyFieldValue.value === ""
-                                    ? "empty"
-                                    : loadingSubItemsList
-                                      ? "loading"
-                                      : props.filterParameters.value
-                            }
-                            columnSelectOption={getColumnSelectOptions}
-                        />
-                    );
-                },
-                Cell: ({ row }) => {
-                    return row.original.sub_item_fa;
-                },
-            },
-            {
-                accessorKey: "value",
-                header: "مقدار", // Value
-                id: "value",
                 enableColumnFilter: false,
                 enableSorting: false,
-                datatype: "text",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
-                size: 120,
+                size: 50,
-                Cell: ({ renderedCellValue, row }) => {
+                columns: [
-                    return (
+                    {
-                        <Stack direction="row" alignItems="center" spacing={0.5}>
+                        accessorKey: "item",
-                            <Typography sx={{ margin: 1 }} component="span">
+                        header: "آیتم فعالیت",
-                                {(row.original.sub_item_data / 1).toLocaleString()}
+                        id: "item",
-                            </Typography>
+                        enableColumnFilter: true,
-                            <Typography component="span" variant="caption">
+                        datatype: "numeric",
-                                {`(${row.original.unit_fa})`}
+                        filterMode: "equals",
-                            </Typography>
+                        grow: false,
-                        </Stack>
+                        size: 100,
-                    );
+                        ColumnSelectComponent: (props) => {
-                },
+                            const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
-            },
+
-            {
+                            const getColumnSelectOptions = useMemo(() => {
-                header: "تصاویر",
+                                if (loadingItemsList) {
-                id: "images",
+                                    return [{ value: "loading", label: "در حال بارگذاری..." }];
-                enableColumnFilter: false,
+                                }
-                enableSorting: false,
+                                if (errorItemsList) {
-                datatype: "array",
+                                    return [{ value: "error", label: "خطا در بارگذاری" }];
-                grow: false,
+                                }
-                size: 100,
+                                return [
-                muiTableBodyCellProps: {
+                                    { value: "", label: "همه آیتم ها" },
-                    sx: {
+                                    ...itemsList.map((item) => ({
-                        borderLeft: "1px solid #e1e1e1",
+                                        value: item.id,
-                        py: 0,
+                                        label: item.name,
-                        "&:first-of-type": {
+                                    })),
-                            borderLeft: "unset",
+                                ];
+                            }, [itemsList, loadingItemsList, errorItemsList]);
+
+                            return (
+                                <CustomSelectByDependency
+                                    {...props}
+                                    value={loadingItemsList ? "loading" : props.filterParameters.value}
+                                    columnSelectOption={getColumnSelectOptions}
+                                />
+                            );
+                        },
+                        Cell: ({ row }) => {
+                            return row.original.item_fa;
                         },
                     },
-                },
+                    {
-                Cell: ({ renderedCellValue, row }) => {
+                        accessorKey: "sub_item",
-                    return (
+                        header: "اقدام انجام شده",
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        id: "sub_item",
-                            <ImageDialog rowId={row.getValue("id")} />
+                        enableColumnFilter: true,
-                        </Stack>
+                        datatype: "numeric",
-                    );
+                        filterMode: "equals",
-                },
+                        dependencyId: "item",
-            },
+                        ColumnSelectComponent: (props) => {
-            {
+                            const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(
-                header: "موقعیت", // Location
+                                props.dependencyFieldValue.value
-                id: "location",
+                            );
-                enableColumnFilter: false,
+                            const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
-                enableSorting: false,
+
-                datatype: "array",
+                            const getColumnSelectOptions = useMemo(() => {
-                grow: false,
+                                if (props.dependencyFieldValue.value === "") {
-                size: 100,
+                                    return [{ value: "empty", label: "ابتدا آیتم فعالیت را انتخاب کنید" }];
-                muiTableBodyCellProps: {
+                                }
-                    sx: {
+                                if (loadingSubItemsList) {
-                        borderLeft: "1px solid #e1e1e1",
+                                    return [{ value: "loading", label: "در حال بارگذاری..." }];
-                        py: 0,
+                                }
-                        "&:first-of-type": {
+                                if (errorSubItemsList) {
-                            borderLeft: "unset",
+                                    return [{ value: "error", label: "خطا در بارگذاری" }];
+                                }
+                                return [
+                                    { value: "", label: "همه اقدام ها" },
+                                    ...subItemsList.map((item) => ({
+                                        value: item.sub_item,
+                                        label: item.name,
+                                    })),
+                                ];
+                            }, [subItemsList, loadingSubItemsList, errorSubItemsList]);
+
+                            useEffect(() => {
+                                if (prevDependency === props.dependencyFieldValue.value) return;
+                                props.handleChange({ ...props.filterParameters, value: "" });
+                                setPrevDependency(props.dependencyFieldValue.value);
+                            }, [props.dependencyFieldValue.value]);
+                            return (
+                                <CustomSelectByDependency
+                                    {...props}
+                                    value={
+                                        props.dependencyFieldValue.value === ""
+                                            ? "empty"
+                                            : loadingSubItemsList
+                                              ? "loading"
+                                              : props.filterParameters.value
+                                    }
+                                    columnSelectOption={getColumnSelectOptions}
+                                />
+                            );
+                        },
+                        Cell: ({ row }) => {
+                            return row.original.sub_item_fa;
                         },
                     },
-                },
+                    {
-                Cell: ({ renderedCellValue, row }) => {
+                        accessorKey: "value",
-                    return (
+                        header: "مقدار", // Value
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        id: "value",
-                            <LocationForm
+                        enableColumnFilter: false,
-                                start_lat={row.original.start_lat}
+                        enableSorting: false,
-                                start_lng={row.original.start_lng}
+                        datatype: "text",
-                                end_lat={row.original.end_lat}
+                        filterMode: "equals",
-                                end_lng={row.original.end_lng}
+                        columnFilterModeOptions: ["equals", "contains"],
-                            />
+                        grow: false,
-                        </Stack>
+                        size: 120,
-                    );
+                        Cell: ({ renderedCellValue, row }) => {
-                },
+                            return (
-            },
+                                <Stack direction="row" alignItems="center" spacing={0.5}>
-            {
+                                    <Typography sx={{ margin: 1 }} component="span">
-                header: "خودرو ها",
+                                        {(row.original.sub_item_data / 1).toLocaleString()}
-                id: "cmmsMachines__machine_code",
+                                    </Typography>
-                enableColumnFilter: true,
+                                    <Typography component="span" variant="caption">
-                datatype: "text",
+                                        {`(${row.original.unit_fa})`}
-                filterMode: "contains",
+                                    </Typography>
-                enableSorting: false,
+                                </Stack>
-                columnFilterModeOptions: ["equals", "contains"],
+                            );
-                grow: false,
-                size: 100,
-                muiTableBodyCellProps: {
-                    sx: {
-                        borderLeft: "1px solid #e1e1e1",
-                        py: 0,
-                        "&:first-of-type": {
-                            borderLeft: "unset",
                         },
                     },
-                },
+                    {
-                Cell: ({ renderedCellValue, row }) => {
+                        header: "تصاویر",
-                    return (
+                        id: "images",
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        enableColumnFilter: false,
-                            <MachinesCodeDialog rowId={row.getValue("id")} />
+                        enableSorting: false,
-                        </Stack>
+                        datatype: "array",
-                    );
+                        grow: false,
-                },
+                        size: 100,
-            },
+                        muiTableBodyCellProps: {
-            {
+                            sx: {
-                header: "راهداران",
+                                borderLeft: "1px solid #e1e1e1",
-                id: "rahdaran__code",
+                                py: 0,
-                enableColumnFilter: true,
+                                "&:first-of-type": {
-                enableSorting: false,
+                                    borderLeft: "unset",
-                datatype: "text",
+                                },
-                filterMode: "contains",
+                            },
-                columnFilterModeOptions: ["equals", "contains"],
+                        },
-                grow: false,
+                        Cell: ({ renderedCellValue, row }) => {
-                size: 100,
+                            return (
-                muiTableBodyCellProps: {
+                                <Stack alignItems={"center"} justifyContent={"center"}>
-                    sx: {
+                                    <ImageDialog rowId={row.getValue("id")} />
-                        borderLeft: "1px solid #e1e1e1",
+                                </Stack>
-                        py: 0,
+                            );
-                        "&:first-of-type": {
-                            borderLeft: "unset",
                         },
                     },
-                },
+                    {
-                Cell: ({ renderedCellValue, row }) => {
+                        header: "موقعیت", // Location
-                    return (
+                        id: "location",
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        enableColumnFilter: false,
-                            <RahdaranDialog rowId={row.getValue("id")} />
+                        enableSorting: false,
-                        </Stack>
+                        datatype: "array",
-                    );
+                        grow: false,
-                },
+                        size: 100,
-            },
+                        muiTableBodyCellProps: {
-            {
+                            sx: {
-                accessorFn: (row) => moment(row.activity_date_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                                borderLeft: "1px solid #e1e1e1",
-                header: "تاریخ فعالیت", // Start Date
+                                py: 0,
-                id: "activity_date_time",
+                                "&:first-of-type": {
-                enableColumnFilter: true,
+                                    borderLeft: "unset",
-                datatype: "date",
+                                },
-                filterMode: "between",
+                            },
-                grow: false,
+                        },
-                size: 100,
+                        Cell: ({ renderedCellValue, row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <LocationForm
+                                        start_lat={row.original.start_lat}
+                                        start_lng={row.original.start_lng}
+                                        end_lat={row.original.end_lat}
+                                        end_lng={row.original.end_lng}
+                                    />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        header: "خودرو ها",
+                        id: "cmmsMachines__machine_code",
+                        enableColumnFilter: true,
+                        datatype: "text",
+                        filterMode: "contains",
+                        enableSorting: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue, row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <MachinesCodeDialog rowId={row.getValue("id")} />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        header: "راهداران",
+                        id: "rahdaran__code",
+                        enableColumnFilter: true,
+                        enableSorting: false,
+                        datatype: "text",
+                        filterMode: "contains",
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue, row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <RahdaranDialog rowId={row.getValue("id")} />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        accessorFn: (row) => moment(row.activity_date_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                        header: "تاریخ فعالیت", // Start Date
+                        id: "activity_date_time",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                ],
             },
             {
                 accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
@@ -330,7 +341,7 @@ const OperatorList = () => {
                             </Stack>
                         );
                     }
-                    return <Typography variant="body2">بدون توضیحات</Typography>;
+                    return <Typography variant="body2">-</Typography>;
                 },
             },
         ],
@@ -348,8 +359,8 @@ const OperatorList = () => {
                         { id: "id", desc: true },
                     ]}
                     table_url={GET_ROAD_ITEMS_OPERATOR_LIST}
-                    page_name={"operator"}
+                    page_name={"roadItemsOperator"}
-                    table_name={"operatorList"}
+                    table_name={"roadItemsOperatorList"}
                     TableToolbar={Toolbar}
                     enableRowActions
                     positionActionsColumn={"last"}

src/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormContent.jsx

@@ -1,4 +1,5 @@
 import EditFormCreate from "@/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormCreate";
+import DialogLoading from "@/core/components/DialogLoading";
 import useRoadItemGetISubtems from "@/lib/hooks/useRoadItemGetISubtems";
 import { LinearProgress, Typography } from "@mui/material";
 
@@ -79,7 +80,7 @@ const EditFormContent = ({ setOpenEditDialog, onSubmit, defaultData, is_gasht })
                     خطا در دریافت اطلاعات!!!
                 </Typography>
             ) : loadingSubItemsList ? (
-                <LinearProgress />
+                <DialogLoading />
             ) : (
                 <EditFormCreate
                     onSubmitBase={onSubmitBase}

src/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormCreate.jsx

@@ -84,7 +84,7 @@ const EditFormCreate = ({ defaultData, subItem, onSubmitBase, defaultValues, set
 
     return (
         <StyledForm onSubmit={handleSubmit(onSubmitBase)} id="edit_road_items">
-            <DialogContent sx={{ overflowY: "auto", maxHeight: "70vh" }}>
+            <DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
                 <Stack spacing={2}>
                     <Stack>
                         {subItem.needs_image === 1 ? (

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

@@ -5,7 +5,7 @@ import ObservedGashtCreate from "./Actions/ObservedGashtCreate";
 
 const Toolbar = ({ table, filterData, mutate }) => {
     return (
-        <Stack direction={"row"} spacing={2}>
+        <Stack direction={"row"} spacing={1}>
             <PrintExcel table={table} filterData={filterData} />
             <OperatorCreate mutate={mutate} />
             <ObservedGashtCreate mutate={mutate} />

src/components/dashboard/roadItems/operator/index.jsx

@@ -6,7 +6,7 @@ import OperatorList from "./OperatorList";
 const OperatorPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"عملیات"} />
+            <PageTitle title={"کارتابل عملیات فعالیت روزانه"} />
             <OperatorList />
         </Stack>
     );

src/components/dashboard/roadItems/reports/ItemsReports/index.jsx

@@ -157,7 +157,7 @@ const ReportPage = () => {
     });
     return (
         <Stack spacing={1}>
-            <PageTitle title={"گزارش تعداد فعالیت ها به تفکیک آیتم"} />
+            <PageTitle title={"کارتابل گزارش تعداد فعالیت ها به تفکیک آیتم"} />
             <SearchReportList
                 control={control}
                 hasProvincesPermission={hasProvincesPermission}

src/components/dashboard/roadItems/reports/SubItemsReports/index.jsx

@@ -242,7 +242,7 @@ const SubItemsReports = () => {
     });
     return (
         <Stack spacing={1}>
-            <PageTitle title={"گزارش تعداد فعالیت ها به تفکیک موارد اقدام شده"} />
+            <PageTitle title={"کارتابل گزارش تعداد فعالیت ها به تفکیک موارد اقدام شده"} />
             <SearchReportList
                 control={control}
                 hasProvincesPermission={hasProvincesPermission}

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

@@ -1,21 +1,22 @@
-import { useEffect, useMemo, useState } from "react";
+import BlinkingCell from "@/core/components/BlinkingCell";
-import { Box, Stack, Typography } from "@mui/material";
+import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
-import Toolbar from "./Toolbar";
 import { GET_ROAD_ITEMS_SUPERVISOR_LIST } from "@/core/utils/routes";
+import { useAuth } from "@/lib/contexts/auth";
+import useEdaratLists from "@/lib/hooks/useEdaratLists";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import useProvinces from "@/lib/hooks/useProvince";
+import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
+import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
+import { Box, Stack, Typography } from "@mui/material";
 import moment from "jalali-moment";
+import { useEffect, useMemo, useState } from "react";
+import ImageDialog from "../operator/RowActions/ImageForm";
+import MachinesCodeDialog from "../operator/RowActions/MachinesCodeForm";
+import RahdaranDialog from "../operator/RowActions/RahdaranForm";
 import RowActions from "./RowActions";
 import LocationForm from "./RowActions/LocationForm";
-import ImageDialog from "../operator/RowActions/ImageForm";
+import Toolbar from "./Toolbar";
-import RahdaranDialog from "../operator/RowActions/RahdaranForm";
-import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
-import useProvinces from "@/lib/hooks/useProvince";
-import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
-import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
-import useEdaratLists from "@/lib/hooks/useEdaratLists";
-import MachinesCodeDialog from "../operator/RowActions/MachinesCodeForm";
-import { usePermissions } from "@/lib/hooks/usePermissions";
-import { useAuth } from "@/lib/contexts/auth";
 
 const SupervisorList = () => {
     const statusOptions = [
@@ -65,8 +66,8 @@ const SupervisorList = () => {
         };
         return [
             {
-                accessorKey: "id",
+                // accessorKey: "id",
-                header: "کد یکتا", // Unique Code
+                header: "کد یکتا",
                 id: "id",
                 enableColumnFilter: true,
                 datatype: "text",
@@ -75,6 +76,7 @@ const SupervisorList = () => {
                 columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
+                Cell: ({ row }) => <BlinkingCell value={row.original.id} visible={row.original.status == 0} />,
             },
             ...(hasCountryPermission ? [dynamicColumns] : []),
             {
@@ -135,240 +137,250 @@ const SupervisorList = () => {
                 Cell: ({ renderedCellValue, row }) => <>{row.original.edarat_name}</>,
             },
             {
-                header: "آیتم فعالیت",
+                header: "اطلاعات فعالیت",
-                id: "item",
+                id: "info",
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterMode: "equals",
-                grow: false,
-                size: 100,
-                ColumnSelectComponent: (props) => {
-                    const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
-
-                    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 }) => {
-                    return row.original.item_fa;
-                },
-            },
-            {
-                header: "اقدام انجام شده",
-                id: "sub_item",
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterMode: "equals",
-                dependencyId: "item",
-                ColumnSelectComponent: (props) => {
-                    const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(
-                        props.dependencyFieldValue.value
-                    );
-                    const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
-
-                    const getColumnSelectOptions = useMemo(() => {
-                        if (props.dependencyFieldValue.value === "") {
-                            return [{ value: "empty", label: "ابتدا آیتم فعالیت را انتخاب کنید" }];
-                        }
-                        if (loadingSubItemsList) {
-                            return [{ value: "loading", label: "در حال بارگذاری..." }];
-                        }
-                        if (errorSubItemsList) {
-                            return [{ value: "error", label: "خطا در بارگذاری" }];
-                        }
-                        return [
-                            { value: "", label: "همه اقدام ها" },
-                            ...subItemsList.map((item) => ({
-                                value: item.sub_item,
-                                label: item.name,
-                            })),
-                        ];
-                    }, [subItemsList, loadingSubItemsList, errorSubItemsList]);
-
-                    useEffect(() => {
-                        if (prevDependency === props.dependencyFieldValue.value) return;
-                        props.handleChange({ ...props.filterParameters, value: "" });
-                        setPrevDependency(props.dependencyFieldValue.value);
-                    }, [props.dependencyFieldValue.value]);
-                    return (
-                        <CustomSelectByDependency
-                            {...props}
-                            value={
-                                props.dependencyFieldValue.value === ""
-                                    ? "empty"
-                                    : loadingSubItemsList
-                                      ? "loading"
-                                      : props.filterParameters.value
-                            }
-                            columnSelectOption={getColumnSelectOptions}
-                        />
-                    );
-                },
-                Cell: ({ row }) => {
-                    return row.original.sub_item_fa;
-                },
-            },
-            {
-                header: "مقدار", // Value
-                id: "value",
                 enableColumnFilter: false,
                 enableSorting: false,
-                datatype: "text",
-                filterMode: "equals",
                 grow: false,
-                size: 120,
+                size: 50,
-                columnFilterModeOptions: ["equals", "contains"],
+                columns: [
-                Cell: ({ renderedCellValue, row }) => {
+                    {
-                    return (
+                        header: "آیتم فعالیت",
-                        <Stack direction="row" alignItems="center" spacing={0.5}>
+                        id: "item",
-                            <Typography sx={{ margin: 1 }} component="span">
+                        enableColumnFilter: true,
-                                {(row.original.sub_item_data / 1).toLocaleString()}
+                        datatype: "numeric",
-                            </Typography>
+                        filterMode: "equals",
-                            <Typography component="span" variant="caption">
+                        grow: false,
-                                {`(${row.original.unit_fa})`}
+                        size: 100,
-                            </Typography>
+                        ColumnSelectComponent: (props) => {
-                        </Stack>
+                            const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
-                    );
+
-                },
+                            const getColumnSelectOptions = useMemo(() => {
-            },
+                                if (loadingItemsList) {
-            {
+                                    return [{ value: "loading", label: "در حال بارگذاری..." }];
-                header: "تصاویر",
+                                }
-                id: "images",
+                                if (errorItemsList) {
-                enableColumnFilter: false,
+                                    return [{ value: "error", label: "خطا در بارگذاری" }];
-                enableSorting: false,
+                                }
-                datatype: "array",
+                                return [
-                grow: false,
+                                    { value: "", label: "همه آیتم ها" },
-                size: 100,
+                                    ...itemsList.map((item) => ({
-                muiTableBodyCellProps: {
+                                        value: item.id,
-                    sx: {
+                                        label: item.name,
-                        borderLeft: "1px solid #e1e1e1",
+                                    })),
-                        py: 0,
+                                ];
-                        "&:first-of-type": {
+                            }, [itemsList, loadingItemsList, errorItemsList]);
-                            borderLeft: "unset",
+
+                            return (
+                                <CustomSelectByDependency
+                                    {...props}
+                                    value={loadingItemsList ? "loading" : props.filterParameters.value}
+                                    columnSelectOption={getColumnSelectOptions}
+                                />
+                            );
+                        },
+                        Cell: ({ row }) => {
+                            return row.original.item_fa;
                         },
                     },
-                },
+                    {
-                Cell: ({ renderedCellValue, row }) => {
+                        header: "اقدام انجام شده",
-                    return (
+                        id: "sub_item",
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        enableColumnFilter: true,
-                            <ImageDialog rowId={row.getValue("id")} />
+                        datatype: "numeric",
-                        </Stack>
+                        filterMode: "equals",
-                    );
+                        dependencyId: "item",
-                },
+                        ColumnSelectComponent: (props) => {
-            },
+                            const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(
-            {
+                                props.dependencyFieldValue.value
-                header: "موقعیت", // Location
+                            );
-                id: "location",
+                            const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
-                enableColumnFilter: false,
+
-                enableSorting: false,
+                            const getColumnSelectOptions = useMemo(() => {
-                datatype: "array",
+                                if (props.dependencyFieldValue.value === "") {
-                grow: false,
+                                    return [{ value: "empty", label: "ابتدا آیتم فعالیت را انتخاب کنید" }];
-                size: 100,
+                                }
-                muiTableBodyCellProps: {
+                                if (loadingSubItemsList) {
-                    sx: {
+                                    return [{ value: "loading", label: "در حال بارگذاری..." }];
-                        borderLeft: "1px solid #e1e1e1",
+                                }
-                        py: 0,
+                                if (errorSubItemsList) {
-                        "&:first-of-type": {
+                                    return [{ value: "error", label: "خطا در بارگذاری" }];
-                            borderLeft: "unset",
+                                }
+                                return [
+                                    { value: "", label: "همه اقدام ها" },
+                                    ...subItemsList.map((item) => ({
+                                        value: item.sub_item,
+                                        label: item.name,
+                                    })),
+                                ];
+                            }, [subItemsList, loadingSubItemsList, errorSubItemsList]);
+
+                            useEffect(() => {
+                                if (prevDependency === props.dependencyFieldValue.value) return;
+                                props.handleChange({ ...props.filterParameters, value: "" });
+                                setPrevDependency(props.dependencyFieldValue.value);
+                            }, [props.dependencyFieldValue.value]);
+                            return (
+                                <CustomSelectByDependency
+                                    {...props}
+                                    value={
+                                        props.dependencyFieldValue.value === ""
+                                            ? "empty"
+                                            : loadingSubItemsList
+                                              ? "loading"
+                                              : props.filterParameters.value
+                                    }
+                                    columnSelectOption={getColumnSelectOptions}
+                                />
+                            );
+                        },
+                        Cell: ({ row }) => {
+                            return row.original.sub_item_fa;
                         },
                     },
-                },
+                    {
-                Cell: ({ renderedCellValue, row }) => {
+                        header: "مقدار", // Value
-                    return (
+                        id: "value",
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        enableColumnFilter: false,
-                            <LocationForm
+                        enableSorting: false,
-                                start_lat={row.original.start_lat}
+                        datatype: "text",
-                                start_lng={row.original.start_lng}
+                        filterMode: "equals",
-                                end_lat={row.original.end_lat}
+                        grow: false,
-                                end_lng={row.original.end_lng}
+                        size: 120,
-                            />
+                        columnFilterModeOptions: ["equals", "contains"],
-                        </Stack>
+                        Cell: ({ renderedCellValue, row }) => {
-                    );
+                            return (
-                },
+                                <Stack direction="row" alignItems="center" spacing={0.5}>
-            },
+                                    <Typography sx={{ margin: 1 }} component="span">
-            {
+                                        {(row.original.sub_item_data / 1).toLocaleString()}
-                header: "خودرو ها",
+                                    </Typography>
-                id: "cmmsMachines__machine_code",
+                                    <Typography component="span" variant="caption">
-                enableColumnFilter: true,
+                                        {`(${row.original.unit_fa})`}
-                datatype: "text",
+                                    </Typography>
-                filterMode: "contains",
+                                </Stack>
-                enableSorting: false,
+                            );
-                columnFilterModeOptions: ["equals", "contains"],
-                grow: false,
-                size: 100,
-                muiTableBodyCellProps: {
-                    sx: {
-                        borderLeft: "1px solid #e1e1e1",
-                        py: 0,
-                        "&:first-of-type": {
-                            borderLeft: "unset",
                         },
                     },
-                },
+                    {
-                Cell: ({ renderedCellValue, row }) => {
+                        header: "تصاویر",
-                    return (
+                        id: "images",
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        enableColumnFilter: false,
-                            <MachinesCodeDialog rowId={row.getValue("id")} />
+                        enableSorting: false,
-                        </Stack>
+                        datatype: "array",
-                    );
+                        grow: false,
-                },
+                        size: 100,
-            },
+                        muiTableBodyCellProps: {
-            {
+                            sx: {
-                header: "راهداران",
+                                borderLeft: "1px solid #e1e1e1",
-                id: "rahdaran__code",
+                                py: 0,
-                enableColumnFilter: true,
+                                "&:first-of-type": {
-                enableSorting: false,
+                                    borderLeft: "unset",
-                datatype: "text",
+                                },
-                filterMode: "contains",
+                            },
-                columnFilterModeOptions: ["equals", "contains"],
+                        },
-                grow: false,
+                        Cell: ({ renderedCellValue, row }) => {
-                size: 100,
+                            return (
-                muiTableBodyCellProps: {
+                                <Stack alignItems={"center"} justifyContent={"center"}>
-                    sx: {
+                                    <ImageDialog rowId={row.getValue("id")} />
-                        borderLeft: "1px solid #e1e1e1",
+                                </Stack>
-                        py: 0,
+                            );
-                        "&:first-of-type": {
-                            borderLeft: "unset",
                         },
                     },
-                },
+                    {
-                Cell: ({ renderedCellValue, row }) => {
+                        header: "موقعیت", // Location
-                    return (
+                        id: "location",
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        enableColumnFilter: false,
-                            <RahdaranDialog rowId={row.getValue("id")} />
+                        enableSorting: false,
-                        </Stack>
+                        datatype: "array",
-                    );
+                        grow: false,
-                },
+                        size: 100,
-            },
+                        muiTableBodyCellProps: {
-            {
+                            sx: {
-                accessorFn: (row) => moment(row.activity_date_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                                borderLeft: "1px solid #e1e1e1",
-                header: "تاریخ فعالیت", // Start Date
+                                py: 0,
-                id: "activity_date_time",
+                                "&:first-of-type": {
-                enableColumnFilter: true,
+                                    borderLeft: "unset",
-                datatype: "date",
+                                },
-                filterMode: "between",
+                            },
-                grow: false,
+                        },
-                size: 100,
+                        Cell: ({ renderedCellValue, row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <LocationForm
+                                        start_lat={row.original.start_lat}
+                                        start_lng={row.original.start_lng}
+                                        end_lat={row.original.end_lat}
+                                        end_lng={row.original.end_lng}
+                                    />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        header: "خودرو ها",
+                        id: "cmmsMachines__machine_code",
+                        enableColumnFilter: true,
+                        datatype: "text",
+                        filterMode: "contains",
+                        enableSorting: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue, row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <MachinesCodeDialog rowId={row.getValue("id")} />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        header: "راهداران",
+                        id: "rahdaran__code",
+                        enableColumnFilter: true,
+                        enableSorting: false,
+                        datatype: "text",
+                        filterMode: "contains",
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue, row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <RahdaranDialog rowId={row.getValue("id")} />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        accessorFn: (row) => moment(row.activity_date_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                        header: "تاریخ فعالیت", // Start Date
+                        id: "activity_date_time",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                ],
             },
             {
                 accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
@@ -411,8 +423,8 @@ const SupervisorList = () => {
                         { id: "id", desc: true },
                     ]}
                     table_url={GET_ROAD_ITEMS_SUPERVISOR_LIST}
-                    page_name={"supervisor"}
+                    page_name={"roadItemsSupervisor"}
-                    table_name={"supervisorList"}
+                    table_name={"roadItemsSupervisorList"}
                     TableToolbar={Toolbar}
                     enableRowActions
                     positionActionsColumn={"last"}

src/components/dashboard/roadItems/supervisor/index.jsx

@@ -6,7 +6,7 @@ import SupervisorList from "./SupervisorList";
 const SupervisorPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"ارزیابی"} />
+            <PageTitle title={"کارتابل ارزیابی فعالیت روزانه"} />
             <SupervisorList />
         </Stack>
     );

src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/CompeleteRequest.jsx

@@ -88,7 +88,11 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
 
     const sendOtp = async (data) => {
         try {
-            const response = await requestServer(`${GET_OTP_TOKEN}?phone_number=${data.phoneNumber}`, "get");
+            await requestServer(GET_OTP_TOKEN, "post", {
+                data: {
+                    phone_number: data.phoneNumber,
+                },
+            });
             setOtpSended(true);
             setDelayPerRequest(true);
             setValueSend("phoneNumber", data.phoneNumber);

src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PhoneValidation.jsx

@@ -1,118 +0,0 @@
-"use client";
-
-import { Box, Button, FormControl, InputLabel, OutlinedInput } from "@mui/material";
-import React, { useEffect, useState } from "react";
-import ForwardToInboxIcon from "@mui/icons-material/ForwardToInbox";
-import useRequest from "@/lib/hooks/useRequest";
-import { GET_OTP_TOKEN, VERIFY_OTP } from "@/core/utils/routes";
-import { formatCounter } from "@/core/utils/formatCounter";
-
-const PhoneValidation = ({ tabState, setTabState }) => {
-    const requestServer = useRequest({ auth: true });
-    const [phoneNumber, setPhoneNumber] = useState("");
-    const [verificationCode, setVerificationCode] = useState("");
-    const [validPhone, setValidPhone] = useState(false);
-    const [delayPerRequest, setDelayPerRequest] = useState(false);
-    const [counter, setCounter] = useState(120);
-    const [otpSended, setOtpSended] = useState(false);
-    const [readyToVerify, setReadyToVerify] = useState(false);
-
-    const handleNumericInput = (e) => {
-        e.target.value = e.target.value.replace(/[^0-9]/g, "");
-    };
-
-    useEffect(() => {
-        if (phoneNumber.length === 11) {
-            setValidPhone(true);
-        } else {
-            setValidPhone(false);
-        }
-        if (verificationCode.length === 6 && phoneNumber.length === 11) {
-            setReadyToVerify(true);
-        } else {
-            setReadyToVerify(false);
-        }
-    }, [phoneNumber, verificationCode]);
-
-    useEffect(() => {
-        if (counter === 0) {
-            setDelayPerRequest(false);
-            return;
-        }
-        if (delayPerRequest && counter > 0) {
-            const timer = setInterval(() => {
-                setCounter((prevCounter) => prevCounter - 1);
-            }, 1000);
-
-            return () => clearInterval(timer);
-        }
-    }, [counter, delayPerRequest]);
-
-    const sendOtp = () => {
-        if (!validPhone) return false;
-        requestServer(`${GET_OTP_TOKEN}?phone_number=${phoneNumber}`, "get")
-            .then((response) => {})
-            .catch(() => {});
-        //////////**** (mohammad) this part should keep in success but for now we go next level ****////////////
-        setOtpSended(true);
-        setDelayPerRequest(true);
-    };
-
-    const phoneRegister = () => {
-        const formData = new FormData();
-        formData.append("phone_number", phoneNumber);
-        formData.append("verification_code", verificationCode);
-
-        setTabState(tabState + 1);
-        requestServer(VERIFY_OTP, "post", {
-            data: formData,
-        })
-            .then(() => {})
-            .catch(() => {});
-    };
-
-    return (
-        <Box
-            sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                my: 3,
-            }}
-        >
-            <Box sx={{ display: "flex", alignItems: "center", gap: 2, width: { xs: "100%", sm: "70%" } }}>
-                <FormControl size="small" fullWidth variant="outlined">
-                    <InputLabel htmlFor="phone_number">شماره تلفن مامور گشت</InputLabel>
-                    <OutlinedInput
-                        id="phone_number"
-                        label={"شماره تلفن مامور گشت"}
-                        disabled={delayPerRequest}
-                        autoComplete="off"
-                        size="small"
-                        fullWidth
-                        value={phoneNumber}
-                        onChange={(e) => setPhoneNumber(e.target.value)}
-                        onInput={handleNumericInput}
-                        type="text"
-                        inputProps={{
-                            maxLength: 11,
-                        }}
-                    />
-                </FormControl>
-                <Button
-                    onClick={sendOtp}
-                    disabled={!validPhone || delayPerRequest}
-                    variant="contained"
-                    color="success"
-                    sx={{ width: "200px", height: "37px" }}
-                    endIcon={<ForwardToInboxIcon />}
-                >
-                    {delayPerRequest ? formatCounter(counter) : "دریافت کد"}
-                </Button>
-            </Box>
-        </Box>
-    );
-};
-
-export default PhoneValidation;

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

@@ -7,10 +7,9 @@ import { GET_ROAD_PATROL_OPERATOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
 import ReportForm from "./RowActions/ReportForm";
-import RahdaranDialog from "./RowActions/RahdaranForm"
+import RahdaranDialog from "./RowActions/RahdaranForm";
 import MachinePerformanceForm from "./RowActions/MachinePerformanceForm";
 
-
 const OperatorList = () => {
     const columns = useMemo(
         () => [
@@ -80,7 +79,7 @@ const OperatorList = () => {
                             </Stack>
                         );
                     }
-                    return <Typography variant="body2">بدون شخص</Typography>;
+                    return <Typography variant="body2">-</Typography>;
                 },
             },
             {
@@ -148,8 +147,8 @@ const OperatorList = () => {
                     columns={columns}
                     sorting={[{ id: "id", desc: true }]}
                     table_url={GET_ROAD_PATROL_OPERATOR_LIST}
-                    page_name={"operator"}
+                    page_name={"roadPatrolOperator"}
-                    table_name={"operatorList"}
+                    table_name={"roadPatrolOperatorList"}
                     TableToolbar={Toolbar}
                     enableRowActions
                     positionActionsColumn={"last"}

src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/MachinesCodeFetch.jsx

@@ -14,7 +14,7 @@ const MachinePerformanceFetch = ({ row }) => {
         const fetchData = async () => {
             try {
                 setLoading(true);
-                const response = await request(`${GET_CMMS_MACHINE_ROAD_PATROL}/${row.getValue('id')}`);
+                const response = await request(`${GET_CMMS_MACHINE_ROAD_PATROL}/${row.getValue("id")}`);
                 setData(response.data.data);
             } catch (error) {
             } finally {
@@ -31,19 +31,20 @@ const MachinePerformanceFetch = ({ row }) => {
                 {loading ? (
                     <DialogLoading />
                 ) : data && row.original?.stop_points?.length > 0 ? (
-                    <MachinePerformanceContent machinesLists={{
+                    <MachinePerformanceContent
-                        stopPoints: row.original?.stop_points,
+                        machinesLists={{
-                        fuelConsumption: row.original?.fuel_consumption,
+                            stopPoints: row.original?.stop_points,
-                        mileage: row.original?.distance,
+                            fuelConsumption: row.original?.fuel_consumption,
-                        accOnDuration: row.original?.vehicle_runtime,
+                            mileage: row.original?.distance,
-                        cmms_machine_code: data[0]
+                            accOnDuration: row.original?.vehicle_runtime,
-
+                            cmms_machine_code: data[0],
-                    }} />
+                        }}
+                    />
                 ) : (
                     <Typography textAlign={"center"}>عملکرد خودرویی در سامانه یافت نشد</Typography>
                 )}
             </DialogContent>
         </>
-    )
+    );
-}
+};
-export default MachinePerformanceFetch
+export default MachinePerformanceFetch;

src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/index.jsx

@@ -25,9 +25,7 @@ const MachinePerformanceForm = ({ row }) => {
                 maxWidth={"md"}
             >
                 <DialogTitle sx={{ fontSize: "large" }}>عملکرد خودرو</DialogTitle>
-                {openMachinesCodeDialog && (
+                {openMachinesCodeDialog && <MachinePerformanceFetch row={row} />}
-                    <MachinePerformanceFetch row={row} />
-                )}
                 <DialogActions>
                     <Button
                         onClick={() => setOpenMachinesCodeDialog(false)}

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

@@ -1,13 +1,13 @@
-import PrintExcel from "./ExcelPrint";
+import { Stack } from "@mui/material";
 import OperatorCreate from "./Actions/Create";
-import { Box } from "@mui/material";
+import PrintExcel from "./ExcelPrint";
 
 const Toolbar = ({ table, filterData, mutate }) => {
     return (
-        <Box sx={{ display: "flex", gap: 1 }}>
+        <Stack direction={"row"} spacing={1}>
-            <OperatorCreate table={table} mutate={mutate} />
             <PrintExcel table={table} filterData={filterData} />
-        </Box>
+            <OperatorCreate table={table} mutate={mutate} />
+        </Stack>
     );
 };
 export default Toolbar;

src/components/dashboard/roadPatrols/operator/index.jsx

@@ -6,7 +6,7 @@ import OperatorList from "./OperatorList";
 const OperatorPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"عملیات"} />
+            <PageTitle title={"کارتابل عملیات گشت راهداری و ترابری"} />
             <OperatorList />
         </Stack>
     );

src/components/dashboard/roadPatrols/reports/ReportLists.jsx

@@ -200,6 +200,7 @@ const ReportLists = ({ data, specialFilter }) => {
                 data={data.data}
                 page_name={"roadPatrolReport"}
                 table_name={"roadPatrolReportList"}
+                enablePagination={false}
                 specialFilter={specialFilter}
             />
         </Box>

src/components/dashboard/roadPatrols/reports/index.jsx

@@ -120,7 +120,7 @@ const ReportPage = () => {
     });
     return (
         <Stack spacing={1}>
-            <PageTitle title={"گزارش گشت راهداری"} />
+            <PageTitle title={"کارتابل گزارش گشت راهداری و ترابری"} />
             <SearchReportList
                 control={control}
                 hasProvincesPermission={hasProvincesPermission}

src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/MachinesCodeFetch.jsx

@@ -14,7 +14,7 @@ const MachinePerformanceFetch = ({ row }) => {
         const fetchData = async () => {
             try {
                 setLoading(true);
-                const response = await request(`${GET_CMMS_MACHINE_ROAD_PATROL}/${row.getValue('id')}`);
+                const response = await request(`${GET_CMMS_MACHINE_ROAD_PATROL}/${row.getValue("id")}`);
                 setData(response.data.data);
             } catch (error) {
             } finally {
@@ -31,19 +31,20 @@ const MachinePerformanceFetch = ({ row }) => {
                 {loading ? (
                     <DialogLoading />
                 ) : data && row.original?.stop_points?.length > 0 ? (
-                    <MachinePerformanceContent machinesLists={{
+                    <MachinePerformanceContent
-                        stopPoints: row.original?.stop_points,
+                        machinesLists={{
-                        fuelConsumption: row.original?.fuel_consumption,
+                            stopPoints: row.original?.stop_points,
-                        mileage: row.original?.distance,
+                            fuelConsumption: row.original?.fuel_consumption,
-                        accOnDuration: row.original?.vehicle_runtime,
+                            mileage: row.original?.distance,
-                        cmms_machine_code: data[0]
+                            accOnDuration: row.original?.vehicle_runtime,
-
+                            cmms_machine_code: data[0],
-                    }} />
+                        }}
+                    />
                 ) : (
                     <Typography textAlign={"center"}>عملکرد خودرویی در سامانه یافت نشد</Typography>
                 )}
             </DialogContent>
         </>
-    )
+    );
-}
+};
-export default MachinePerformanceFetch
+export default MachinePerformanceFetch;

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

@@ -25,9 +25,7 @@ const MachinePerformanceForm = ({ row }) => {
                 maxWidth={"md"}
             >
                 <DialogTitle sx={{ fontSize: "large" }}>عملکرد خودرو</DialogTitle>
-                {openMachinesCodeDialog && (
+                {openMachinesCodeDialog && <MachinePerformanceFetch row={row} />}
-                    <MachinePerformanceFetch row={row} />
-                )}
                 <DialogActions>
                     <Button
                         onClick={() => setOpenMachinesCodeDialog(false)}

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

@@ -119,8 +119,8 @@ const SupervisorList = () => {
                                 props.dependencyFieldValue?.value === ""
                                     ? "empty"
                                     : loadingEdaratList
-                                        ? "loading"
+                                      ? "loading"
-                                        : props.filterParameters.value
+                                      : props.filterParameters.value
                             }
                             columnSelectOption={getColumnSelectOptions}
                         />
@@ -179,7 +179,7 @@ const SupervisorList = () => {
                             <RahdaranDialog rahdarLists={renderedCellValue} />
                         </Stack>
                     ) : (
-                        <Typography variant="body2">بدون شخص</Typography>
+                        <Typography variant="body2">-</Typography>
                     ),
             },
             {
@@ -267,8 +267,8 @@ const SupervisorList = () => {
                     columns={columns}
                     sorting={[{ id: "id", desc: true }]}
                     table_url={GET_ROAD_PATROL_SUPERVISOR_LIST}
-                    page_name={"supervisor"}
+                    page_name={"roadPatrolSupervisor"}
-                    table_name={"supervisorList"}
+                    table_name={"roadPatrolSupervisorList"}
                     TableToolbar={Toolbar}
                     enableRowActions
                     positionActionsColumn={"last"}

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

@@ -6,7 +6,7 @@ import SupervisorList from "./SupervisorList";
 const SupervisorPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"ارزیابی"} />
+            <PageTitle title={"کارتابل ارزیابی گشت راهداری و ترابری"} />
             <SupervisorList />
         </Stack>
     );

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

@@ -0,0 +1,74 @@
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import { useMemo, useState } from "react";
+import moment from "jalali-moment";
+import FileSaver from "file-saver";
+import DescriptionIcon from "@mui/icons-material/Description";
+import useRequest from "@/lib/hooks/useRequest";
+import { useTheme } from "@emotion/react";
+import DataTableFilterDataStructure from "@/core/utils/DataTableFilterDataStructure";
+import isArrayEmpty from "@/core/utils/isArrayEmpty";
+import { EXPORT_OPERATOR_ROAD_SAFETY } from "@/core/utils/routes";
+
+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_OPERATOR_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/operator/Form/EditAxisType/EditFormContent.jsx

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

src/components/dashboard/roadSafety/operator/Form/EditAxisType/OperatorEditForm.jsx

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

src/components/dashboard/roadSafety/operator/Form/EditAxisType/index.jsx

@@ -0,0 +1,19 @@
+import { Dialog, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import EditIcon from "@mui/icons-material/Edit";
+import OperatorEditForm from "./OperatorEditForm";
+
+const EditAxisType = ({ row, mutate }) => {
+    const [openEditDialog, setOpenEditDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="ویرایش محور">
+                <IconButton color="primary" onClick={() => setOpenEditDialog(true)}>
+                    <EditIcon />
+                </IconButton>
+            </Tooltip>
+            <OperatorEditForm open={openEditDialog} setOpen={setOpenEditDialog} mutate={mutate} row={row} />
+        </>
+    );
+};
+export default EditAxisType;

src/components/dashboard/roadSafety/operator/Form/StepOne/CreateFormContent.jsx

@@ -0,0 +1,154 @@
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { mixed, number, object, string } from "yup";
+import { Box, Button, DialogActions, DialogContent, Tab, Tabs } from "@mui/material";
+import StyledForm from "@/core/components/StyledForm";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+import BeenhereIcon from "@mui/icons-material/Beenhere";
+import useRequest from "@/lib/hooks/useRequest";
+import GetItemInfo from "./GetItemInfo";
+import GetSubItemInfo from "./GetSubItemInfo";
+import { format } from "date-fns";
+import { FIRST_STEP_STORE } from "@/core/utils/routes";
+
+function TabPanel(props) {
+    const { children, value, index } = props;
+    return (
+        <div role="tabpanel" hidden={value !== index}>
+            {value === index && <Box>{children}</Box>}
+        </div>
+    );
+}
+
+const validationSchema = object({
+    recognize_picture: mixed().nullable().required("لطفا عکس فعالیت را بارگذاری کنید!"),
+    info_id: number().required("نوع آیتم را مشخص کنید!"),
+    axis_type_id: string().required("نوع محور را مشخص کنید!"),
+    start_point: mixed()
+        .test("start-point-required", "لطفاً نقطه شروع را مشخص کنید!", function (value) {
+            return !!value; // چک می‌کند که مقدار موجود است
+        })
+        .required("لطفاً نقطه فعالیت را مشخص کنید!"),
+    activity_time: string().required("لطفا زمان فعالیت را انتخاب کنید!"),
+    activity_date: string().required("لطفا تاریخ فعالیت را انتخاب کنید!"),
+});
+
+const CreateFormContent = ({ setOpen, mutate }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+    const [itemsList, setItemsList] = useState();
+    const defaultValues = {
+        info_id: null,
+        axis_type_id: "",
+        recognize_picture: null,
+        activity_date: "",
+        activity_time: "",
+        start_point: "",
+    };
+
+    const [tabState, setTabState] = useState(0);
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const handleChangeTab = (event, newValue) => {
+        setTabState(newValue);
+    };
+
+    const handlePrev = () => {
+        if (tabState === 2) {
+            const fieldsToReset = ["recognize_picture", "activity_time", "activity_date", "start_point"];
+            fieldsToReset.forEach((field) => resetField(field));
+        }
+        if (tabState === 0) {
+            handleClose();
+        } else {
+            setTabState(tabState - 1);
+        }
+    };
+    const {
+        control,
+        handleSubmit,
+        resetField,
+        setValue,
+        formState: { errors, isSubmitting },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+    });
+    const onSubmitBase = async (data) => {
+        const startPoint = `${data.start_point.lat},${data.start_point.lng}`;
+        const formData = new FormData();
+        formData.append("activity_date", data.activity_date);
+        formData.append("activity_time", format(new Date(data.activity_time), "HH:mm"));
+        formData.append("info_id", data.info_id);
+        formData.append("axis_type_id", data.axis_type_id);
+        formData.append("recognize_picture", data.recognize_picture);
+        formData.append("point", startPoint);
+        await requestServer(FIRST_STEP_STORE, "post", {
+            data: formData,
+        })
+            .then((response) => {
+                mutate();
+                setOpen(false);
+            })
+            .catch((error) => {});
+    };
+
+    return (
+        <StyledForm onSubmit={handleSubmit(onSubmitBase)}>
+            <Tabs
+                allowScrollButtonsMobile
+                value={tabState}
+                onChange={handleChangeTab}
+                variant={"fullWidth"}
+                sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "100%",
+                    backgroundColor: "#efefef",
+                }}
+            >
+                <Tab icon={<InsertDriveFileIcon />} label="انتخاب مورد" />
+                <Tab disabled={tabState === 0} icon={<FileCopyIcon />} label="اطلاعات مورد مشاهده شده" />
+            </Tabs>
+            <DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
+                <Box sx={{ flex: 1 }}>
+                    <TabPanel value={tabState} index={0}>
+                        <GetItemInfo control={control} setTabState={setTabState} setItemsList={setItemsList} />
+                    </TabPanel>
+                    <TabPanel value={tabState} index={1}>
+                        <GetSubItemInfo setValue={setValue} errors={errors} itemsList={itemsList} control={control} />
+                    </TabPanel>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button
+                    onClick={handlePrev}
+                    variant="outlined"
+                    color="secondary"
+                    size="large"
+                    startIcon={tabState === 0 ? <ExitToAppIcon /> : <KeyboardDoubleArrowRightIcon />}
+                >
+                    {tabState === 0 ? "بستن" : "مرحله قبل"}
+                </Button>
+                {tabState === 1 && (
+                    <Button
+                        variant="contained"
+                        size="large"
+                        disabled={isSubmitting}
+                        type={"submit"}
+                        endIcon={<BeenhereIcon />}
+                    >
+                        {isSubmitting ? "در حال ثبت فعالیت" : "ثبت فعالیت"}
+                    </Button>
+                )}
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default CreateFormContent;

src/components/dashboard/roadSafety/operator/Form/StepOne/GetItemInfo.jsx

@@ -0,0 +1,62 @@
+import DialogLoading from "@/core/components/DialogLoading";
+import useSafetyAndPrivacyGetItems from "@/lib/hooks/useSafetyAndPrivacyGetItems";
+import { Card, CardActionArea, Grid, Typography } from "@mui/material";
+import { Controller } from "react-hook-form";
+
+const GetItemInfo = ({ setItemsList, setTabState, control }) => {
+    const { itemsList, loadingItemsList, errorItemsList } = useSafetyAndPrivacyGetItems();
+
+    return (
+        <>
+            {errorItemsList ? (
+                <Typography textAlign={"center"} color={"error"}>
+                    خطا در دریافت لیست آیتم ها
+                </Typography>
+            ) : loadingItemsList ? (
+                <DialogLoading />
+            ) : (
+                <Grid container sx={{ justifyContent: "center" }} spacing={2}>
+                    <Controller
+                        name={"info_id"}
+                        control={control}
+                        render={({ field }) => (
+                            <>
+                                {itemsList.map((item) => (
+                                    <Grid item xs={12} sm={12} key={item.id}>
+                                        <Card
+                                            elevation={0}
+                                            sx={{
+                                                border: "1px solid #e7e7e7",
+                                                "&:hover": {
+                                                    boxShadow: 2,
+                                                    cursor: "pointer",
+                                                },
+                                            }}
+                                            onClick={() => {
+                                                field.onChange(item.id);
+                                                setItemsList(item);
+                                                setTabState(1);
+                                            }}
+                                        >
+                                            <CardActionArea
+                                                sx={{
+                                                    display: "flex",
+                                                    gap: 1,
+                                                    alignItems: "center",
+                                                    p: 2,
+                                                }}
+                                            >
+                                                <Typography>{item.name}</Typography>
+                                            </CardActionArea>
+                                        </Card>
+                                    </Grid>
+                                ))}
+                            </>
+                        )}
+                    />
+                </Grid>
+            )}
+        </>
+    );
+};
+export default GetItemInfo;

src/components/dashboard/roadSafety/operator/Form/StepOne/GetSubItemInfo.jsx

@@ -0,0 +1,129 @@
+import { Box, Chip, Divider, Grid, Stack, Typography } from "@mui/material";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import ImageUpload from "./ImageUpload";
+import { Controller, useWatch } from "react-hook-form";
+import MapInfoOneMarker from "@/core/components/MapInfoOneMarker";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import MuiTimePicker from "@/core/components/MuiTimePicker";
+import SelectBox from "@/core/components/SelectBox";
+
+const GetSubItemInfo = ({ itemsList, control, setValue, errors }) => {
+    const StartPoint = useWatch({ control, name: "start_point" });
+    return (
+        <Stack spacing={2}>
+            <Stack>
+                <Grid container spacing={2} sx={{ alignItems: "center", justifyContent: "space-around" }}>
+                    <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                            <Chip
+                                icon={<InsertDriveFileIcon />}
+                                label={
+                                    <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
+                                        مورد انتخاب ‌شده
+                                    </Typography>
+                                }
+                            />
+                        </Box>
+                        <Divider sx={{ flex: 1, mx: 2 }} />
+                        <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
+                            {itemsList?.name || "هیچ آیتمی انتخاب نشده است"}
+                        </Typography>
+                    </Grid>
+                </Grid>
+            </Stack>
+            <Stack>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                        <Controller
+                            control={control}
+                            name={"axis_type_id"}
+                            render={({ field, fieldState: { error } }) => (
+                                <SelectBox
+                                    value={field.value}
+                                    label="نوع محور"
+                                    selectors={[
+                                        { id: 1, name_fa: "آزادراه" },
+                                        { id: 2, name_fa: "بزرگراه" },
+                                        { id: 3, name_fa: "اصلی" },
+                                        { id: 4, name_fa: "فرعی" },
+                                        { id: 5, name_fa: "روستایی" },
+                                    ]}
+                                    schema={{ name: "name_fa", value: "id" }}
+                                    error={error}
+                                    onChange={field.onChange}
+                                    helperText={error?.message}
+                                />
+                            )}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+            <Stack>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} sm={6}>
+                        <Controller
+                            control={control}
+                            render={({ field, fieldState: { error } }) => {
+                                return (
+                                    <MuiDatePicker
+                                        name="activity_date"
+                                        error={error}
+                                        value={field.value}
+                                        placeholder={"تاریخ فعالیت را وارد کنید"}
+                                        label={"تاریخ فعالیت"}
+                                        setFieldValue={(name, value) => field.onChange(value || [])}
+                                        helperText={error ? error.message : null}
+                                    />
+                                );
+                            }}
+                            name={"activity_date"}
+                        />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                        <Controller
+                            control={control}
+                            render={({ field, fieldState: { error } }) => {
+                                return (
+                                    <MuiTimePicker
+                                        name="activity_time"
+                                        error={error}
+                                        value={field.value}
+                                        placeholder={"زمان فعالیت را وارد کنید"}
+                                        label={"زمان فعالیت"}
+                                        setFieldValue={(name, value) => field.onChange(value || null)}
+                                        helperText={error ? error.message : null}
+                                    />
+                                );
+                            }}
+                            name={"activity_time"}
+                        />
+                    </Grid>
+                    <Grid item xs={12} sm={12}>
+                        <Controller
+                            name="recognize_picture"
+                            control={control}
+                            render={({ field, fieldState: { error } }) => (
+                                <ImageUpload
+                                    name={field.name}
+                                    value={field.value}
+                                    error={error}
+                                    onChange={field.onChange}
+                                    title={"تصویر مورد مشاهده شده"}
+                                />
+                            )}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+            <Stack sx={{ mt: 2 }}>
+                <MapInfoOneMarker
+                    setValue={setValue}
+                    StartPoint={StartPoint}
+                    errors={errors}
+                    title={"برای ثبت محل فعالیت، لطفاً نقشه را بیشتر زوم کنید."}
+                />
+            </Stack>
+        </Stack>
+    );
+};
+export default GetSubItemInfo;

src/components/dashboard/roadSafety/operator/Form/StepOne/ImageUpload.jsx

@@ -0,0 +1,77 @@
+import { FormControl, FormHelperText } from "@mui/material";
+import UploadSystem from "@/core/components/UploadSystem";
+import React, { useEffect, useState } from "react";
+
+const ImageUpload = ({ name, value, onChange, error, title }) => {
+    const [beforeImg, setBeforeImg] = useState(value ? value : null);
+    const [beforeFileType, setBeforeFileType] = useState(value ? "image/" : null);
+    const [beforeFileName, setBeforeFileName] = useState(null);
+    const [showBeforeImage, setShowBeforeImage] = useState(!value);
+
+    useEffect(() => {
+        if (value) {
+            setShowBeforeImage(false);
+            if (typeof value === "string") {
+                setBeforeImg(value);
+                setBeforeFileType("image/");
+            } else if (value instanceof File) {
+                setBeforeImg(URL.createObjectURL(value));
+                setBeforeFileType(value.type);
+            }
+        }
+    }, [value]);
+
+    const handleFileChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setBeforeImg(URL.createObjectURL(uploadedFile));
+            setBeforeFileType(fileType);
+            setBeforeFileName(fileName);
+            onChange(uploadedFile);
+            setShowBeforeImage(false);
+        }
+    };
+
+    return (
+        <FormControl
+            error={error}
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <FormHelperText
+                sx={{
+                    fontSize: 14,
+                    border: 1,
+                    borderBottom: 0,
+                    borderColor: "divider",
+                    px: 2,
+                    py: 1,
+                    borderRadius: 2,
+                    borderBottomRightRadius: 0,
+                    borderBottomLeftRadius: 0,
+                }}
+                id={name}
+            >
+                {title}
+            </FormHelperText>
+            <UploadSystem
+                selectedImage={beforeImg}
+                handleUploadChange={handleFileChange}
+                fileType={beforeFileType}
+                fileName={beforeFileName}
+                setSelectedImage={setBeforeImg}
+                imageSize={[250, 150]}
+                setShowAddIcon={setShowBeforeImage}
+                showAddIcon={showBeforeImage}
+            />
+            <FormHelperText id={name}>{error ? error.message : null}</FormHelperText>
+        </FormControl>
+    );
+};
+export default ImageUpload;

src/components/dashboard/roadSafety/operator/Form/StepOne/OperatorCreateForm.jsx

@@ -0,0 +1,26 @@
+"use client";
+import { Dialog, IconButton } from "@mui/material";
+import CreateFormContent from "./CreateFormContent";
+import CloseIcon from "@mui/icons-material/Close";
+
+const OperatorCreateForm = ({ open, setOpen, mutate }) => {
+    return (
+        <Dialog open={open} fullWidth maxWidth="sm">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
+            {open && <CreateFormContent setOpen={setOpen} mutate={mutate} />}
+        </Dialog>
+    );
+};
+export default OperatorCreateForm;

src/components/dashboard/roadSafety/operator/Form/StepOne/index.jsx

@@ -0,0 +1,36 @@
+import { Button, IconButton, useMediaQuery } from "@mui/material";
+import { AddCircle } from "@mui/icons-material";
+import { useTheme } from "@emotion/react";
+import { useState } from "react";
+import OperatorCreateForm from "./OperatorCreateForm";
+
+const StepOne = ({ mutate }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="ثبت فعالیت" color="primary" onClick={handleOpen}>
+                    <AddCircle sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    size={"small"}
+                    variant="contained"
+                    color="primary"
+                    startIcon={<AddCircle />}
+                    onClick={handleOpen}
+                >
+                    ثبت فعالیت
+                </Button>
+            )}
+            <OperatorCreateForm open={open} setOpen={setOpen} mutate={mutate} />
+        </>
+    );
+};
+export default StepOne;

src/components/dashboard/roadSafety/operator/Form/StepThree/ImageUpload.jsx

@@ -0,0 +1,77 @@
+import { FormControl, FormHelperText } from "@mui/material";
+import UploadSystem from "@/core/components/UploadSystem";
+import React, { useEffect, useState } from "react";
+
+const ImageUpload = ({ name, value, onChange, error, title }) => {
+    const [beforeImg, setBeforeImg] = useState(value ? value : null);
+    const [beforeFileType, setBeforeFileType] = useState(value ? "image/" : null);
+    const [beforeFileName, setBeforeFileName] = useState(null);
+    const [showBeforeImage, setShowBeforeImage] = useState(!value);
+
+    useEffect(() => {
+        if (value) {
+            setShowBeforeImage(false);
+            if (typeof value === "string") {
+                setBeforeImg(value);
+                setBeforeFileType("image/");
+            } else if (value instanceof File) {
+                setBeforeImg(URL.createObjectURL(value));
+                setBeforeFileType(value.type);
+            }
+        }
+    }, [value]);
+
+    const handleFileChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setBeforeImg(URL.createObjectURL(uploadedFile));
+            setBeforeFileType(fileType);
+            setBeforeFileName(fileName);
+            onChange(uploadedFile);
+            setShowBeforeImage(false);
+        }
+    };
+
+    return (
+        <FormControl
+            error={error}
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+            }}
+        >
+            <FormHelperText
+                sx={{
+                    fontSize: 14,
+                    border: 1,
+                    borderBottom: 0,
+                    borderColor: "divider",
+                    px: 2,
+                    py: 1,
+                    borderRadius: 2,
+                    borderBottomRightRadius: 0,
+                    borderBottomLeftRadius: 0,
+                }}
+                id={name}
+            >
+                {title}
+            </FormHelperText>
+            <UploadSystem
+                selectedImage={beforeImg}
+                handleUploadChange={handleFileChange}
+                fileType={beforeFileType}
+                fileName={beforeFileName}
+                setSelectedImage={setBeforeImg}
+                imageSize={[250, 150]}
+                setShowAddIcon={setShowBeforeImage}
+                showAddIcon={showBeforeImage}
+            />
+            <FormHelperText id={name}>{error ? error.message : null}</FormHelperText>
+        </FormControl>
+    );
+};
+export default ImageUpload;

src/components/dashboard/roadSafety/operator/Form/StepThree/StepThreeContent.jsx

@@ -0,0 +1,69 @@
+import { Button, DialogActions, DialogContent, Stack } from "@mui/material";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import StyledForm from "@/core/components/StyledForm";
+import { mixed, object } from "yup";
+import ImageUpload from "./ImageUpload";
+import useRequest from "@/lib/hooks/useRequest";
+import { THIRD_STEP_STORE } from "@/core/utils/routes";
+
+const StepThreeContent = ({ setOpen, mutate, rowId }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+    const defaultValues = {
+        action_picture: null,
+    };
+    const validationSchema = object({
+        action_picture: mixed().nullable().required("لطفا عکس اقدام را بارگذاری کنید!"),
+    });
+    const {
+        control,
+        handleSubmit,
+        formState: { isSubmitting, errors },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+    });
+    const onSubmit = async (data) => {
+        const formData = new FormData();
+        formData.append("action_picture", data.action_picture);
+        await requestServer(`${THIRD_STEP_STORE}/${rowId}`, "post", {
+            data: formData,
+        })
+            .then((response) => {
+                mutate();
+                setOpen(false);
+            })
+            .catch((error) => {});
+    };
+    return (
+        <StyledForm onSubmit={handleSubmit(onSubmit)}>
+            <DialogContent dividers>
+                <Stack spacing={2}>
+                    <Controller
+                        name="action_picture"
+                        control={control}
+                        render={({ field, fieldState: { error } }) => (
+                            <ImageUpload
+                                name={field.name}
+                                value={field.value}
+                                error={error}
+                                onChange={field.onChange}
+                                title={"تصویر اقدام"}
+                            />
+                        )}
+                    />
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpen(false)} variant={"outlined"} color={"secondary"}>
+                    بستن
+                </Button>
+                <Button type={"submit"} variant={"contained"} color={"primary"} disabled={isSubmitting}>
+                    {isSubmitting ? "درحال ثبت تصویر اقدام" : "ثبت تصویر اقدام"}
+                </Button>
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default StepThreeContent;

src/components/dashboard/roadSafety/operator/Form/StepThree/index.jsx

@@ -0,0 +1,32 @@
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import StepThreeContent from "./StepThreeContent";
+import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
+const StepThree = ({ mutate, rowId }) => {
+    const [open, setOpen] = useState(false);
+    return (
+        <>
+            <Tooltip title="بارگذاری تصویر اقدام">
+                <IconButton color="primary" onClick={() => setOpen(true)}>
+                    <AddPhotoAlternateIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={open}
+                onClose={() => setOpen(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>
+                <StepThreeContent setOpen={setOpen} mutate={mutate} rowId={rowId} />
+            </Dialog>
+        </>
+    );
+};
+export default StepThree;

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

@@ -0,0 +1,37 @@
+import { Box, Card, IconButton, Stack, Typography } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import React from "react";
+import MinorCrashIcon from "@mui/icons-material/MinorCrash";
+
+const ShowDocuments = ({ deleteDamageItem, selectedDamageItem }) => {
+    return (
+        <Card
+            elevation={0}
+            sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                border: 1,
+                borderColor: "divider",
+                px: 1,
+                py: 1,
+            }}
+        >
+            <Box sx={{ display: "flex" }}>
+                <MinorCrashIcon color="primary" sx={{ width: "50px", height: "50px" }} />
+                <Stack sx={{ ml: 1, justifyContent: "center" }} spacing={0.5}>
+                    <Typography variant="body1" sx={{ letterSpacing: "1px", fontWeight: 500 }}>
+                        {selectedDamageItem.name}
+                    </Typography>
+                    <Stack></Stack>
+                </Stack>
+            </Box>
+            <Box>
+                <IconButton color="error" onClick={() => deleteDamageItem(selectedDamageItem.name)}>
+                    <DeleteIcon />
+                </IconButton>
+            </Box>
+        </Card>
+    );
+};
+export default ShowDocuments;

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

@@ -0,0 +1,135 @@
+import { Box, Button, Chip, DialogActions, DialogContent, Divider, Fade, Grid, Stack, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { mixed, object } from "yup";
+import ShowDocuments from "./ShowDocuments";
+import StyledForm from "@/core/components/StyledForm";
+import { SECOND_STEP_STORE } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+
+const StepTwoContent = ({ setOpenStepTwoDialog, mutate, rowId }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+    const [selectedDamageItemList, setSelectedDamageItemList] = useState([]);
+    const defaultValues = {
+        judiciary_document: null,
+    };
+    const validationSchema = object({
+        judiciary_document: mixed().test("is-array", "لطفا حداقل یک فایل بارگذاری کنید!", (value) => {
+            return Array.isArray(value) && value.length > 0;
+        }),
+    });
+    const {
+        control,
+        handleSubmit,
+        setValue,
+        formState: { isSubmitting, errors },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+    });
+
+    const handleCreateDamage = (files) => {
+        setSelectedDamageItemList((prev) => {
+            const newFiles = files.filter((file) => !prev.some((item) => item.name === file.name));
+            return [...prev, ...newFiles];
+        });
+    };
+    useEffect(() => {
+        setValue("judiciary_document", selectedDamageItemList);
+    }, [selectedDamageItemList]);
+
+    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));
+        await requestServer(`${SECOND_STEP_STORE}/${rowId}`, "post", {
+            data: formData,
+        })
+            .then((response) => {
+                mutate();
+                setOpenStepTwoDialog(false);
+            })
+            .catch((error) => {});
+    };
+    return (
+        <StyledForm onSubmit={handleSubmit(onSubmit)}>
+            <DialogContent dividers>
+                <Stack spacing={2}>
+                    <Controller
+                        control={control}
+                        name={"judiciary_document"}
+                        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%" }}>
+                    <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"}>
+                    بستن
+                </Button>
+                <Button type={"submit"} variant={"contained"} color={"primary"} disabled={isSubmitting}>
+                    {isSubmitting ? "درحال ثبت مستندات" : "ثبت مستندات"}
+                </Button>
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default StepTwoContent;

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

@@ -0,0 +1,33 @@
+import UploadFileIcon from "@mui/icons-material/UploadFile";
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import StepTwoContent from "./StepTwoContent";
+
+const StepTwo = ({ mutate, rowId }) => {
+    const [openStepTwoDialog, setOpenStepTwoDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="بارگذاری مستندات">
+                <IconButton color="primary" onClick={() => setOpenStepTwoDialog(true)}>
+                    <UploadFileIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openStepTwoDialog}
+                onClose={() => setOpenStepTwoDialog(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>
+                <StepTwoContent mutate={mutate} rowId={rowId} setOpenStepTwoDialog={setOpenStepTwoDialog} />
+            </Dialog>
+        </>
+    );
+};
+export default StepTwo;