Merge branch 'release/v0.17.0'

.env.local.example

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

package.json

@@ -26,7 +26,6 @@
     "date-fns-jalali": "^2.13.0-0",
     "dayjs": "^1.11.10",
     "file-saver": "^2.0.5",
-    "formik": "^2.4.5",
     "jalali-moment": "^3.3.11",
     "lz-string": "^1.5.0",
     "material-react-table": "^2.11.2",
@@ -36,6 +35,7 @@
     "react-hook-form": "^7.52.1",
     "react-leaflet": "^4.2.1",
     "react-leaflet-draw": "^0.20.4",
+    "react-leaflet-markercluster": "^4.2.1",
     "react-toastify": "^10.0.5",
     "sass": "^1.75.0",
     "sharp": "^0.33.4",
@@ -45,7 +45,6 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@types/node": "22.10.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",

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

@@ -0,0 +1,11 @@
+import DamagesPage from "@/components/dashboard/damageItems";
+import WithPermission from "@/core/middlewares/withPermission";
+
+const Page = () => {
+    return (
+        <WithPermission permission_name={["manage-damage"]}>
+            <DamagesPage />
+        </WithPermission>
+    );
+};
+export default Page;

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

@@ -0,0 +1,13 @@
+import WithPermission from "@/core/middlewares/withPermission";
+import ActivityCodeLog from "@/core/components/ActivityCodeLog";
+import OperatorPage from "@/components/dashboard/damages/operator";
+const Page = () => {
+    return (
+        <WithPermission permission_name={["all"]}>
+            <OperatorPage />
+            {/*<ActivityCodeLog activity_code={1152} /> change permission  */}
+        </WithPermission>
+    );
+};
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import DamagesReportPage from "@/components/dashboard/damages/report";
+import WithPermission from "@/core/middlewares/withPermission";
+
+const Page = () => {
+    return (
+        <WithPermission permission_name={["show-receipt", "show-receipt-province"]}>
+            <DamagesReportPage />
+        </WithPermission>
+    );
+};
+export default Page;

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

@@ -0,0 +1,12 @@
+import OperatorPage from "@/components/dashboard/fastReact/operator";
+import WithPermission from "@/core/middlewares/withPermission";
+const Page = () => {
+    return (
+        <WithPermission permission_name={["show-fast-react-edarate-shahri"]}>
+            <OperatorPage />
+            {/* <ActivityCodeLog activity_code={1137} /> */}
+        </WithPermission>
+    );
+};
+
+export default Page;

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

@@ -0,0 +1,13 @@
+import WithPermission from "@/core/middlewares/withPermission";
+import SupervisorPage from "@/components/dashboard/fastReact/supervisor";
+import ActivityCodeLog from "@/core/components/ActivityCodeLog";
+const Page = () => {
+    return (
+        <WithPermission permission_name={["show-fast-react", "show-fast-react-province"]}>
+            <SupervisorPage />
+            <ActivityCodeLog activity_code={1137} />
+        </WithPermission>
+    );
+};
+
+export default Page;

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

@@ -0,0 +1,6 @@
+import RoadItemsReportMap from "@/components/dashboard/roadItems/reports/Map";
+
+const Page = () => {
+    return <RoadItemsReportMap />;
+};
+export default Page;

src/assets/scss/global.scss

@@ -1,6 +1,7 @@
 @import "fontiran";
 @import "leaflet/dist/leaflet.css";
 @import "react-toastify/dist/ReactToastify.css";
+@import "./map-styles.scss";
 
 .filter-toast {
     box-shadow:

src/assets/scss/map-styles.scss

@@ -1,27 +1,9 @@
-.leaflet-draw-tooltip {
-    background-color: #4f4f4f;
-    font-family: IRANSans;
+.custom-marker-cluster {
+    font-family: IRANSansFaNum;
+    background-color: rgba(51, 181, 229, 0.6);
     color: #fff;
-    font-size: 10px;
-    padding: 2px 8px;
-    margin-right: 15px;
-    border-radius: 4px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.leaflet-draw-tooltip:before {
-    content: "";
-    position: absolute;
-    bottom: 100%;
-    left: 103%;
-    transform: rotate(90deg);
-    margin-left: -6px;
-    border-width: 6px;
-    border-style: solid;
-    border-color: transparent transparent #333 transparent;
-}
-
-.leaflet-draw-tooltip-subtext {
-    font-size: 12px;
-    color: #ffeb3b;
+    border-radius: 50%;
+    text-align: center;
+    font-size: 14px;
+    line-height: 40px;
 }

src/components/dashboard/azmayesh/Forms/CandUAzmayesh/index.jsx

@@ -1,13 +1,27 @@
 "use client";
 
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import FormAndRequest from "./FormAndRequest";
 import DialogLoading from "@/core/components/DialogLoading";
+import CloseIcon from "@mui/icons-material/Close";
 
 const CandUAzmayesh = ({ open, setOpen, mutate, updateInfo, rowId, loadingOpen, fromUpdate = false }) => {
     const isUpdateReady = fromUpdate ? updateInfo !== null : true;
     return (
         <Dialog open={open} fullWidth maxWidth="lg">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {isUpdateReady ? (
                 <FormAndRequest
                     setOpen={setOpen}

src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/index.jsx

@@ -1,11 +1,25 @@
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import FormAndRequest from "./FormAndRequest";
 import DialogLoading from "@/core/components/DialogLoading";
+import CloseIcon from "@mui/icons-material/Close";
 
 const CandUAzmayeshType = ({ open, setOpen, mutate, rowId, updateInfo, loadingOpen, fromUpdate = false }) => {
     const isUpdateReady = fromUpdate ? updateInfo !== null : true;
     return (
         <Dialog open={open} fullWidth maxWidth="lg">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {isUpdateReady ? (
                 <FormAndRequest
                     setOpen={setOpen}

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

@@ -0,0 +1,145 @@
+import NumberField from "@/core/components/NumberField";
+import StyledForm from "@/core/components/StyledForm";
+import { CREATE_RECEIPT_DAMAGE_ITEMS } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Beenhere, ExitToApp } from "@mui/icons-material";
+import { Button, DialogActions, DialogContent, DialogTitle, Stack, TextField } from "@mui/material";
+import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
+import { Controller, useForm } from "react-hook-form";
+import { object, string } from "yup";
+
+const validationSchema = object({
+    title: string().required("وارد کردن عنوان الزامیست!"),
+    unit: string().required("وارد کردن واحد الزامیست!"),
+    base_price: string().required("وارد کردن فی الزامیست!"),
+});
+
+const CreateFormContent = ({ setOpen, mutate }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+    const defaultValues = {
+        title: "",
+        unit: "",
+        base_price: null,
+    };
+
+    const {
+        control,
+        handleSubmit,
+        formState: { isSubmitting },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+    });
+
+    const onSubmit = async (data) => {
+        const formData = new FormData();
+        formData.append("title", data.title);
+        formData.append("unit", data.unit);
+        formData.append("base_price", data.base_price);
+
+        try {
+            await requestServer(CREATE_RECEIPT_DAMAGE_ITEMS, "post", {
+                data: formData,
+            });
+            mutate();
+            setOpen(false);
+        } catch (error) {}
+    };
+
+    return (
+        <>
+            <DialogHeader>
+                <DialogTitle>ثبت آیتم جدید</DialogTitle>
+            </DialogHeader>
+            <DialogContent dividers>
+                <StyledForm onSubmit={handleSubmit(onSubmit)} id="createDamageForm">
+                    <Stack spacing={3}>
+                        <Controller
+                            name="title"
+                            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 }}
+                                />
+                            )}
+                        />
+                        <Controller
+                            name="unit"
+                            control={control}
+                            render={({ field: { onChange, value }, fieldState: { error } }) => (
+                                <TextField
+                                    fullWidth
+                                    size="small"
+                                    label="واحد"
+                                    value={value}
+                                    onChange={onChange}
+                                    error={!!error}
+                                    placeholder="واحد را وارد کنید"
+                                    helperText={error ? error.message : null}
+                                    variant="outlined"
+                                    InputLabelProps={{ shrink: true }}
+                                />
+                            )}
+                        />
+                        <Controller
+                            name="base_price"
+                            control={control}
+                            render={({ field: { onChange, value }, fieldState: { error } }) => (
+                                <NumberField
+                                    label={`فی`}
+                                    error={!!error}
+                                    value={value || ""}
+                                    type="text"
+                                    size={"small"}
+                                    unit={"ریال"}
+                                    inputProps={{
+                                        placeholder: "فی را وارد کنید",
+                                        inputMode: "number",
+                                        min: 0,
+                                        pattern: "[0-9]*",
+                                    }}
+                                    onChange={(event) => {
+                                        if (!isNaN(event.target.value)) {
+                                            onChange(event.target.value);
+                                        } else {
+                                            onChange(value);
+                                        }
+                                    }}
+                                    helperText={error ? error.message : null}
+                                    variant="outlined"
+                                    fullWidth
+                                />
+                            )}
+                        />
+                    </Stack>
+                </StyledForm>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpen(false)} variant="outlined" color="secondary" startIcon={<ExitToApp />}>
+                    بستن
+                </Button>
+                <Button
+                    variant="contained"
+                    disabled={isSubmitting}
+                    type={"submit"}
+                    form="createDamageForm"
+                    endIcon={<Beenhere />}
+                >
+                    {isSubmitting ? "در حال ثبت آیتم" : "ثبت آیتم"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default CreateFormContent;

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

@@ -0,0 +1,25 @@
+import { Dialog, IconButton } from "@mui/material";
+import CreateFormContent from "./CreateFormContent";
+import CloseIcon from "@mui/icons-material/Close";
+
+const CreateForm = ({ open, setOpen, mutate }) => {
+    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>
+            {open && <CreateFormContent setOpen={setOpen} mutate={mutate} />}
+        </Dialog>
+    );
+};
+export default CreateForm;

src/components/dashboard/damageItems/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 CreateDamage = ({ 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 CreateDamage;

src/components/dashboard/damageItems/DamagesList.jsx

@@ -0,0 +1,84 @@
+"use client";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { GET_RECEIPT_DAMAGE_ITEMS_LIST } from "@/core/utils/routes";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+import Toolbar from "./Toolbar";
+import RowActions from "./RowActions";
+
+const DamagesList = () => {
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "title",
+                header: "عنوان",
+                id: "title",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "unit",
+                header: "واحد",
+                id: "unit",
+                enableColumnFilter: false,
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "base_price",
+                header: "فی (ریال)",
+                id: "base_price",
+                enableColumnFilter: false,
+                grow: false,
+                size: 100,
+                Cell: ({ renderedCellValue }) => (renderedCellValue / 1).toLocaleString(),
+            },
+            {
+                accessorKey: "status",
+                header: "وضعیت",
+                id: "status",
+                enableColumnFilter: false,
+                grow: false,
+                size: 100,
+                Cell: ({ renderedCellValue }) => (renderedCellValue == 1 ? "فعال" : "غیرفعال"),
+            },
+        ],
+        []
+    );
+
+    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_RECEIPT_DAMAGE_ITEMS_LIST}
+                    page_name={"receiptDamanagePage"}
+                    table_name={"damanageList"}
+                    TableToolbar={Toolbar}
+                    enableRowActions
+                    positionActionsColumn={"last"}
+                    RowActions={RowActions}
+                />
+            </Box>
+        </>
+    );
+};
+export default DamagesList;

src/components/dashboard/damageItems/RowActions/Activity/index.jsx

@@ -0,0 +1,31 @@
+import { ATIVITY_RECEIPT_DAMAGE_ITEMS } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { Switch } from "@mui/material";
+import { useState } from "react";
+
+const Activity = ({ rowId, mutate, status }) => {
+    const [disabled, setDisabled] = useState(false);
+    const [checked, setChecked] = useState(status == 1);
+    const requestServer = useRequest();
+
+    const handleSwitch = (event) => {
+        const newChecked = event.target.checked;
+        setChecked(newChecked);
+        setDisabled(true);
+
+        requestServer(`${ATIVITY_RECEIPT_DAMAGE_ITEMS}/${rowId}`, "post")
+            .then(() => {
+                mutate();
+            })
+            .catch(() => {
+                setChecked(!newChecked);
+            })
+            .finally(() => {
+                setDisabled(false);
+            });
+    };
+
+    return <Switch size="small" disabled={disabled} checked={checked} onChange={handleSwitch} />;
+};
+
+export default Activity;

src/components/dashboard/damageItems/RowActions/Edit/Form/index.jsx

@@ -0,0 +1,145 @@
+import NumberField from "@/core/components/NumberField";
+import StyledForm from "@/core/components/StyledForm";
+import { UPDATE_RECEIPT_DAMAGE_ITEMS } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Beenhere, ExitToApp } from "@mui/icons-material";
+import { Button, DialogActions, DialogContent, DialogTitle, Stack, TextField } from "@mui/material";
+import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
+import { Controller, useForm } from "react-hook-form";
+import { object, string } from "yup";
+
+const validationSchema = object({
+    title: string().required("وارد کردن عنوان الزامیست!"),
+    unit: string().required("وارد کردن واحد الزامیست!"),
+    base_price: string().required("وارد کردن فی الزامیست!"),
+});
+
+const EditFormContent = ({ row, rowId, mutate, setOpen }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+    const defaultValues = {
+        title: row.original.title,
+        unit: row.original.unit,
+        base_price: row.original.base_price,
+    };
+
+    const {
+        control,
+        handleSubmit,
+        formState: { isSubmitting },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+    });
+
+    const onSubmit = async (data) => {
+        const formData = new FormData();
+        formData.append("title", data.title);
+        formData.append("unit", data.unit);
+        formData.append("base_price", data.base_price);
+
+        try {
+            await requestServer(`${UPDATE_RECEIPT_DAMAGE_ITEMS}/${rowId}`, "post", {
+                data: formData,
+            });
+            mutate();
+            setOpen(false);
+        } catch (error) {}
+    };
+
+    return (
+        <>
+            <DialogHeader>
+                <DialogTitle>ویرایش آیتم</DialogTitle>
+            </DialogHeader>
+            <DialogContent dividers>
+                <StyledForm onSubmit={handleSubmit(onSubmit)} id="updateDamageForm">
+                    <Stack spacing={3}>
+                        <Controller
+                            name="title"
+                            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 }}
+                                />
+                            )}
+                        />
+                        <Controller
+                            name="unit"
+                            control={control}
+                            render={({ field: { onChange, value }, fieldState: { error } }) => (
+                                <TextField
+                                    fullWidth
+                                    size="small"
+                                    label="واحد"
+                                    value={value}
+                                    onChange={onChange}
+                                    error={!!error}
+                                    placeholder="واحد را وارد کنید"
+                                    helperText={error ? error.message : null}
+                                    variant="outlined"
+                                    InputLabelProps={{ shrink: true }}
+                                />
+                            )}
+                        />
+                        <Controller
+                            name="base_price"
+                            control={control}
+                            render={({ field: { onChange, value }, fieldState: { error } }) => (
+                                <NumberField
+                                    label={`فی`}
+                                    error={!!error}
+                                    value={value || ""}
+                                    type="text"
+                                    size={"small"}
+                                    unit={"ریال"}
+                                    inputProps={{
+                                        placeholder: "فی را وارد کنید",
+                                        inputMode: "number",
+                                        min: 0,
+                                        pattern: "[0-9]*",
+                                    }}
+                                    onChange={(event) => {
+                                        if (!isNaN(event.target.value)) {
+                                            onChange(event.target.value);
+                                        } else {
+                                            onChange(value);
+                                        }
+                                    }}
+                                    helperText={error ? error.message : null}
+                                    variant="outlined"
+                                    fullWidth
+                                />
+                            )}
+                        />
+                    </Stack>
+                </StyledForm>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpen(false)} variant="outlined" color="secondary" startIcon={<ExitToApp />}>
+                    بستن
+                </Button>
+                <Button
+                    variant="contained"
+                    disabled={isSubmitting}
+                    type={"submit"}
+                    form="updateDamageForm"
+                    endIcon={<Beenhere />}
+                >
+                    {isSubmitting ? "در حال ویرایش آیتم" : "ویرایش آیتم"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default EditFormContent;

src/components/dashboard/damageItems/RowActions/Edit/index.jsx

@@ -0,0 +1,44 @@
+import BorderColorIcon from "@mui/icons-material/BorderColor";
+import { Dialog, IconButton, Tooltip } from "@mui/material";
+import EditFormContent from "./Form";
+import { useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+
+const Edit = ({ row, mutate, rowId }) => {
+    const [openEditDialog, setOpenEditDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="ویرایش" arrow placement="right">
+                <IconButton
+                    color="primary"
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    onClick={() => {
+                        setOpenEditDialog(true);
+                    }}
+                >
+                    <BorderColorIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog open={openEditDialog} fullWidth maxWidth="xs">
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenEditDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <CloseIcon />
+                </IconButton>
+                {openEditDialog && (
+                    <EditFormContent rowId={rowId} row={row} setOpen={setOpenEditDialog} mutate={mutate} />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default Edit;

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

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

src/components/dashboard/damageItems/Toolbar.jsx

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

src/components/dashboard/damageItems/index.jsx

@@ -0,0 +1,13 @@
+import PageTitle from "@/core/components/PageTitle";
+import { Stack } from "@mui/material";
+import DamagesList from "./DamagesList";
+
+const DamagesPage = () => {
+    return (
+        <Stack spacing={1}>
+            <PageTitle title={"آیتم خسارات"} />
+            <DamagesList />
+        </Stack>
+    );
+};
+export default DamagesPage;

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

@@ -0,0 +1,39 @@
+import SelectBox from "@/core/components/SelectBox";
+import useEdaratLists from "@/lib/hooks/useEdaratLists";
+import { useEffect, useState } from "react";
+
+const CityContent = ({ provinceID, field, fieldState: { error } }) => {
+    const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(provinceID);
+    const [prevDependency, setPrevDependency] = useState(provinceID);
+
+    useEffect(() => {
+        if (prevDependency === provinceID) return;
+        field.onChange(null);
+        setPrevDependency(provinceID);
+    }, [provinceID]);
+
+    return (
+        <SelectBox
+            value={
+                !provinceID
+                    ? "dependency"
+                    : errorEdaratList
+                      ? "error"
+                      : loadingEdaratList
+                        ? "loading"
+                        : field.value || ""
+            }
+            label={"شهرستان"}
+            selectors={edaratList}
+            schema={{ name: "name_fa", value: "id" }}
+            error={error}
+            onChange={field.onChange}
+            helperText={error?.message}
+            isLoading={loadingEdaratList}
+            errorEcured={errorEdaratList}
+            isDependency={!provinceID}
+            dependencyLabel={"ابتدا استان را انتخاب کنید"}
+        />
+    );
+};
+export default CityContent;

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

@@ -0,0 +1,16 @@
+import SelectBox from "@/core/components/SelectBox";
+import useEdaratLists from "@/lib/hooks/useEdaratLists";
+import { Controller, useWatch } from "react-hook-form";
+import CityContent from "./CityContent";
+
+const CityController = ({ control }) => {
+    const provinceID = useWatch({ control, name: "province_id" });
+    return (
+        <Controller
+            name="city_id"
+            control={control}
+            render={(props) => <CityContent provinceID={provinceID} {...props} />}
+        />
+    );
+};
+export default CityController;

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

@@ -0,0 +1,239 @@
+import React, { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { array, mixed, number, object, string } from "yup";
+import { Box, Button, DialogActions, DialogContent, Tab, Tabs } from "@mui/material";
+import StyledForm from "@/core/components/StyledForm";
+import InfoIcon from "@mui/icons-material/Info";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+import BeenhereIcon from "@mui/icons-material/Beenhere";
+import MinorCrashIcon from "@mui/icons-material/MinorCrash";
+import DamageInfo from "./DamageInfo";
+import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
+import DamageReport from "./DamageReport";
+import DamageItem from "./DamageItem";
+import validateNationalCode from "@/core/utils/nationalCodeValidation";
+import AssessmentIcon from "@mui/icons-material/Assessment";
+
+function TabPanel(props) {
+    const { children, value, index } = props;
+    return (
+        <div role="tabpanel" hidden={value !== index}>
+            {value === index && <Box>{children}</Box>}
+        </div>
+    );
+}
+
+const validationSchema = object({
+    accident_date: string().required("لطفا تاریخ تصادف را وارد کنید!!!"),
+    accident_time: string().required("لطفا زمان تصادف را وارد کنید!!!"),
+    accident_type: string().required("لطفا نوع تصادف را وارد کنید!!!"),
+    province_id: number().required("لطفا استان را وارد کنید!!!"),
+    city_id: number().required("لطفا شهرستان را وارد کنید!!!"),
+    axis_name: string().required("لطفا نام محور را وارد کنید!!!"),
+    driver_name: string().required("لطفا نام و نام خانوادگی را وارد کنید!!!"),
+    phone_number: string()
+        .matches(/^09\d{9}$/, "شماره موبایل باید با 09 شروع شده و 11 رقم باشد")
+        .required("لطفا تلفن همراه را وارد کنید!!!"),
+    national_code: mixed()
+        .test("max", "کد ملی باید شامل 10 رقم باشد", (value) => value.toString().length === 10)
+        .test("validation", "کد ملی صحیح نمی باشد", (value) => validateNationalCode(value))
+        .required("لطفا کد ملی را وارد کنید!!!"),
+    start_point: mixed()
+        .test("start-point-required", "لطفاً نقطه تصادف را مشخص کنید!", function (value) {
+            return !!value;
+        })
+        .required("لطفاً نقطه تصادف را مشخص کنید!"),
+    plate_part1: mixed()
+        .test("max", "2رقم", (value) => value.toString().length === 2)
+        .required("plate_part1 الزامیست"),
+    plate_part2: mixed().required("plate_part2 الزامیست"),
+    plate_part3: mixed()
+        .test("max", "3رقم", (value) => value.toString().length === 3)
+        .required("plate_part3الزامیست"),
+    plate_part4: mixed()
+        .test("max", "2رقم", (value) => value.toString().length === 2)
+        .required("plate_part4الزامیست"),
+    damage_picture1: mixed().nullable().required("لطفا عکس تصادف را بارگذاری کنید!"),
+    damage_picture2: mixed().nullable().required("لطفا عکس تصادف را بارگذاری کنید!"),
+    police_serial: string().when("radio_button", {
+        is: "police_file_checkbox", // زمانی که گزینه "police_file_checkbox" انتخاب شده باشد
+        then: (schema) => schema.required("شماره کروکی یا نامه پلیس راه الزامی است"),
+    }),
+    police_file_date: string().when("radio_button", {
+        is: "police_file_checkbox", // زمانی که گزینه "police_file_checkbox" انتخاب شده باشد
+        then: (schema) => schema.required("تاریخ کروکی یا نامه پلیس راه الزامی است"),
+    }),
+    police_file: mixed().when("radio_button", {
+        is: "police_file_checkbox", // زمانی که گزینه "police_file_checkbox" انتخاب شده باشد
+        then: (schema) => schema.nullable().required("تصویر کروکی یا نامه پلیس راه الزامی است"),
+        otherwise: (schema) => schema.notRequired(),
+    }),
+    items_damage: array().min(1, "حداقل یک آیتم خسارت ضروریست!!!"),
+});
+
+const CreateFormContent = ({ setOpen, SubmitDamage, defaultData }) => {
+    const defaultValues = {
+        accident_date: defaultData.accident_date,
+        accident_time: defaultData.accident_time,
+        accident_type: defaultData.accident_type,
+        province_id: defaultData.province_id,
+        city_id: defaultData.city_id,
+        axis_name: defaultData.axis_name,
+        driver_name: defaultData.driver_name,
+        phone_number: defaultData.phone_number,
+        national_code: defaultData.national_code,
+        plate_part1: defaultData.plate_part1,
+        plate_part2: defaultData.plate_part2,
+        plate_part3: defaultData.plate_part3,
+        plate_part4: defaultData.plate_part4,
+        radio_button: defaultData.radio_button,
+        damage_picture1: defaultData.damage_picture1,
+        damage_picture2: defaultData.damage_picture2,
+        report_base: defaultData.report_base,
+        police_file_checkbox: defaultData.police_file_checkbox,
+        police_file: defaultData.police_file,
+        police_file_date: defaultData.police_file_date,
+        police_serial: defaultData.police_serial,
+        start_point: defaultData.start_point,
+        items_damage: defaultData.items_damage,
+    };
+
+    const [tabState, setTabState] = useState(0);
+    const handleClose = () => setOpen(false);
+    const handleChangeTab = (event, newValue) => setTabState(newValue);
+    const handlePrev = () => {
+        if (tabState === 0) {
+            handleClose();
+        } else {
+            setTabState(tabState - 1);
+        }
+    };
+    const {
+        control,
+        handleSubmit,
+        setValue,
+        trigger,
+        formState: { errors, isSubmitting, isValid },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "all",
+    });
+    const onSubmitBase = async (data) => {
+        await SubmitDamage(data);
+    };
+    const handleNext = async () => {
+        let fieldsToValidate = [];
+        if (tabState === 0) {
+            fieldsToValidate = [
+                "phone_number",
+                "start_point",
+                "plate_part1",
+                "plate_part2",
+                "plate_part3",
+                "plate_part4",
+                "accident_date",
+                "accident_type",
+                "national_code",
+                "accident_time",
+                "province_id",
+                "city_id",
+                "axis_name",
+                "driver_name",
+                "damage_picture1",
+                "damage_picture2",
+            ];
+        } else if (tabState === 1) {
+            fieldsToValidate = ["report_base", "police_file", "police_file_date", "police_serial"];
+        } else if (tabState === 2) {
+            fieldsToValidate = ["items_damage"];
+        }
+        const isValid = await trigger(fieldsToValidate);
+        if (isValid) {
+            setTabState(tabState + 1);
+        }
+    };
+    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={<InfoIcon />} label="اطلاعات تصادف" />
+                <Tab disabled={tabState === 0} icon={<AssessmentIcon />} label="گزارش خسارت" />
+                <Tab disabled={tabState === 0 || tabState === 1} icon={<MinorCrashIcon />} label="آیتم خسارت" />
+            </Tabs>
+            <DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
+                <Box sx={{ flex: 1 }}>
+                    <TabPanel value={tabState} index={0}>
+                        <DamageInfo setValue={setValue} errors={errors} control={control} />
+                    </TabPanel>
+                    <TabPanel value={tabState} index={1}>
+                        <DamageReport setValue={setValue} control={control} />
+                    </TabPanel>
+                    <TabPanel value={tabState} index={2}>
+                        <Controller
+                            name={"items_damage"}
+                            control={control}
+                            render={({ field, fieldState: { error } }) => {
+                                return (
+                                    <DamageItem
+                                        baseDamageItems={defaultData.items_damage}
+                                        baseControl={control}
+                                        baseOnChange={field.onChange}
+                                    />
+                                );
+                            }}
+                        />
+                    </TabPanel>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
+                <Button
+                    onClick={handlePrev}
+                    key={"handlePrev"}
+                    variant="outlined"
+                    color="secondary"
+                    size="large"
+                    startIcon={tabState === 0 ? <ExitToAppIcon /> : <KeyboardDoubleArrowRightIcon />}
+                >
+                    {tabState === 0 ? "بستن" : "مرحله قبل"}
+                </Button>
+                {tabState !== 2 ? (
+                    <Button
+                        onClick={handleNext}
+                        key={"handleNext"}
+                        variant="contained"
+                        size="large"
+                        endIcon={<KeyboardDoubleArrowLeftIcon />}
+                    >
+                        مرحله بعد
+                    </Button>
+                ) : (
+                    <Button
+                        variant="contained"
+                        size="large"
+                        key={"Submit"}
+                        disabled={!isValid || isSubmitting}
+                        type={"submit"}
+                        endIcon={!isValid ? null : <BeenhereIcon />}
+                    >
+                        {!isValid ? "حداقل یک آیتم خسارت ضروریست" : isSubmitting ? "در حال ثبت خسارت" : "ثبت خسارت"}
+                    </Button>
+                )}
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default CreateFormContent;

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

@@ -0,0 +1,56 @@
+import { Controller, useWatch } from "react-hook-form";
+import { Grid } from "@mui/material";
+import NumberField from "@/core/components/NumberField";
+import { useEffect } from "react";
+
+const DamageAmount = ({ control, damageItemList, setValue }) => {
+    const itemDamage = useWatch({ control, name: "id" });
+    const itemValue = useWatch({ control, name: "value" });
+    const itemDamageId = damageItemList.find((damageItem) => damageItem.id === itemDamage);
+    const isDisabled = itemDamageId?.base_price ? itemDamageId?.base_price !== 0 : false;
+    const calculatedValue = itemValue * (itemDamageId?.base_price ? itemDamageId?.base_price : 0);
+    useEffect(() => {
+        if (isDisabled) {
+            setValue("amount", calculatedValue);
+        }
+    }, [itemValue, itemDamageId, isDisabled, setValue]);
+    return (
+        <Grid item xs={12} sm={6}>
+            <Controller
+                name="amount"
+                control={control}
+                render={({ field, fieldState: { error } }) => {
+                    return (
+                        <NumberField
+                            value={isDisabled ? calculatedValue : field.value || ""}
+                            variant="outlined"
+                            name="amount"
+                            inputProps={{
+                                inputMode: "number",
+                                min: 0,
+                                pattern: "[0-9]*",
+                            }}
+                            onChange={(event) => {
+                                const inputValue = event.target.value;
+                                if (isNaN(Number(inputValue))) {
+                                    return;
+                                }
+                                if (!isDisabled) {
+                                    field.onChange(inputValue);
+                                }
+                            }}
+                            label={`هزینه خسارت (ریال)`}
+                            placeholder="هزینه خسارت را وارد کنید"
+                            fullWidth
+                            size="small"
+                            disabled={isDisabled || itemDamage === null}
+                            error={error}
+                            helperText={error?.message}
+                        />
+                    );
+                }}
+            />
+        </Grid>
+    );
+};
+export default DamageAmount;

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

@@ -0,0 +1,280 @@
+import { Controller, useWatch } from "react-hook-form";
+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";
+
+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}>
+                <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
+                        name="driver_name"
+                        control={control}
+                        render={({ field, fieldState: { error } }) => (
+                            <PersianTextField
+                                value={field.value}
+                                variant="outlined"
+                                name="driver_name"
+                                fieldOnChange={field.onChange}
+                                label="نام و نام خانوادگی راننده"
+                                placeholder={"نام و نام خانوادگی فارسی را وارد کنید"}
+                                fullWidth
+                                size="small"
+                                error={error}
+                                helperText={error?.message}
+                                InputLabelProps={{ shrink: true }}
+                            />
+                        )}
+                    />
+                </Grid>
+                <Grid item xs={12} md={6}>
+                    <Controller
+                        name="national_code"
+                        control={control}
+                        render={({ field, fieldState: { error } }) => (
+                            <TextField
+                                value={field.value}
+                                variant="outlined"
+                                name="national_code"
+                                type={"tel"}
+                                inputProps={{
+                                    inputMode: "number",
+                                    min: 0,
+                                    pattern: "[0-9]*",
+                                }}
+                                onChange={(event) => {
+                                    const inputValue = event.target.value;
+                                    if (isNaN(Number(inputValue))) {
+                                        return;
+                                    }
+                                    field.onChange(inputValue);
+                                }}
+                                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
+                        name="phone_number"
+                        control={control}
+                        render={({ field, fieldState: { error } }) => (
+                            <TextField
+                                value={field.value}
+                                variant="outlined"
+                                name="phone_number"
+                                type={"tel"}
+                                inputProps={{
+                                    inputMode: "number",
+                                    min: 0,
+                                    pattern: "[0-9]*",
+                                }}
+                                onChange={(event) => {
+                                    const inputValue = event.target.value;
+                                    if (isNaN(Number(inputValue))) {
+                                        return;
+                                    }
+                                    field.onChange(inputValue);
+                                }}
+                                label="شماره موبایل راننده"
+                                placeholder={"شماره موبایل راننده را وارد کنید"}
+                                fullWidth
+                                size="small"
+                                error={error}
+                                helperText={error?.message}
+                                InputLabelProps={{ shrink: true }}
+                            />
+                        )}
+                    />
+                </Grid>
+                <Grid item xs={12} md={6}>
+                    <PlateNumber control={control} />
+                </Grid>
+            </Grid>
+            <Grid sx={{ mt: 1 }} container spacing={2}>
+                <Grid item xs={12} md={4}>
+                    <Controller
+                        control={control}
+                        render={({ field, fieldState: { error } }) => {
+                            return (
+                                <MuiDatePicker
+                                    name="accident_date"
+                                    error={error}
+                                    value={field.value}
+                                    placeholder={"تاریخ تصادف را وارد کنید"}
+                                    label={"تاریخ تصادف"}
+                                    setFieldValue={(name, value) => field.onChange(value || [])}
+                                    helperText={error ? error.message : null}
+                                />
+                            );
+                        }}
+                        name={"accident_date"}
+                    />
+                </Grid>
+                <Grid item xs={12} md={4}>
+                    <Controller
+                        control={control}
+                        render={({ field, fieldState: { error } }) => {
+                            return (
+                                <MuiTimePicker
+                                    name="accident_time"
+                                    error={error}
+                                    value={field.value}
+                                    placeholder={"زمان تصادف را وارد کنید"}
+                                    label={"زمان تصادف"}
+                                    setFieldValue={(name, value) => field.onChange(value || null)}
+                                    helperText={error ? error.message : null}
+                                />
+                            );
+                        }}
+                        name={"accident_time"}
+                    />
+                </Grid>
+                <Grid item xs={12} md={4}>
+                    <Controller
+                        name="accident_type"
+                        control={control}
+                        render={({ field, fieldState: { error } }) => {
+                            return (
+                                <SelectBox
+                                    value={field.value}
+                                    label="نوع خسارت"
+                                    selectors={[
+                                        {
+                                            id: 1,
+                                            value: "1",
+                                            name: "خسارتی",
+                                        },
+                                        {
+                                            id: 2,
+                                            value: "2",
+                                            name: "جرحی",
+                                        },
+                                        {
+                                            id: 3,
+                                            value: "3",
+                                            name: "فوتی",
+                                        },
+                                    ]}
+                                    schema={{ name: "name", value: "value" }}
+                                    error={error}
+                                    onChange={field.onChange}
+                                    helperText={error?.message}
+                                    isLoading={false}
+                                    errorEcured={false}
+                                />
+                            );
+                        }}
+                    />
+                </Grid>
+            </Grid>
+            <Grid sx={{ mt: 2 }} container spacing={2}>
+                <Grid item xs={12} md={6}>
+                    <Controller
+                        name="damage_picture1"
+                        control={control}
+                        render={({ field, fieldState: { error } }) => (
+                            <ImageUpload
+                                name={field.name}
+                                value={field.value}
+                                error={error}
+                                onChange={field.onChange}
+                                title={"تصویر تصادف"}
+                            />
+                        )}
+                    />
+                </Grid>
+                <Grid item xs={12} md={6}>
+                    <Controller
+                        name="damage_picture2"
+                        control={control}
+                        render={({ field, fieldState: { error } }) => (
+                            <ImageUpload
+                                name={field.name}
+                                value={field.value}
+                                error={error}
+                                onChange={field.onChange}
+                                title={"تصویر تصادف"}
+                            />
+                        )}
+                    />
+                </Grid>
+            </Grid>
+            <Stack sx={{ mt: 2 }}>
+                <MapInfoOneMarker
+                    setValue={setValue}
+                    StartPoint={StartPoint}
+                    errors={errors}
+                    title={"برای ثبت محل تصادف، لطفاً نقشه را بیشتر زوم کنید."}
+                />
+            </Stack>
+        </Stack>
+    );
+};
+export default DamageInfo;

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

@@ -0,0 +1,167 @@
+import {
+    Autocomplete,
+    Box,
+    Button,
+    Chip,
+    Divider,
+    Fade,
+    Grid,
+    Skeleton,
+    Stack,
+    TextField,
+    Typography,
+} from "@mui/material";
+import { Controller, useForm, useWatch } from "react-hook-form";
+import LinearProgress from "@mui/material/LinearProgress";
+import { useEffect, useState } from "react";
+import DamageItemInfo from "./DamageItemInfo";
+import { number, object } from "yup";
+import useDamageItemList from "@/lib/hooks/useDamageItemList";
+import DamagePrice from "./DamagePrice";
+import { yupResolver } from "@hookform/resolvers/yup";
+
+const schema = object({
+    id: number().required("لطفا نوع خسارت را وارد کنید!!!"),
+    value: number().required("لطفا میزان خسارت را وارد کنید!!!"),
+    amount: number().required("لطفا هزینه خسارت را وارد کنید!!!"),
+});
+const defaultValues = {
+    id: null,
+    value: null,
+    amount: null,
+};
+const DamageItem = ({ baseOnChange, baseDamageItems }) => {
+    const flattenBaseDamageItems = (items) => {
+        return items.map((item) => ({
+            id: item.id,
+            title: item.title,
+            unit: item.unit,
+            base_price: item.base_price,
+            status: item.status,
+            until_27_shahrivar: item.until_27_shahrivar,
+            ...item.pivot, // اضافه کردن مقادیر موجود در pivot به سطح بالا
+        }));
+    };
+    const [selectedDamageItemList, setSelectedDamageItemList] = useState(
+        baseDamageItems.length !== 0 ? flattenBaseDamageItems(baseDamageItems) : []
+    );
+    const { damageItemList, loadingDamageItemList, errorDamageItemList } = useDamageItemList();
+    const { control, handleSubmit, reset, setValue } = useForm({
+        defaultValues,
+        resolver: yupResolver(schema),
+        mode: "onBlur",
+    });
+    const deleteDamageItem = (id) => {
+        setSelectedDamageItemList((prev) => prev.filter((DamageItem) => DamageItem.id !== id));
+    };
+    useEffect(() => {
+        baseOnChange(selectedDamageItemList);
+    }, [selectedDamageItemList]);
+    const handleCreateDamage = (data) => {
+        setSelectedDamageItemList((prev) => {
+            const isDuplicate = prev.some((item) => item.id === data.id);
+            if (!isDuplicate) {
+                return [...prev, data];
+            } else {
+                return prev;
+            }
+        });
+        reset();
+    };
+
+    return (
+        <>
+            <Stack spacing={2}>
+                {loadingDamageItemList ? (
+                    <Box sx={{ width: "100%" }}>
+                        <LinearProgress />
+                    </Box>
+                ) : (
+                    <>
+                        <Stack sx={{ minWidth: "200px" }}>
+                            <Controller
+                                name="id"
+                                control={control}
+                                render={({ field, fieldState: { error } }) => (
+                                    <Autocomplete
+                                        options={damageItemList || []}
+                                        size={"small"}
+                                        getOptionLabel={(option) => option.title}
+                                        isOptionEqualToValue={(option, value) => option.id === value.id}
+                                        loading={loadingDamageItemList}
+                                        renderInput={(params) => (
+                                            <TextField
+                                                {...params}
+                                                label="نوع خسارت"
+                                                error={!!error}
+                                                helperText={error?.message}
+                                            />
+                                        )}
+                                        onChange={(_, value) => field.onChange(value?.id)}
+                                        value={damageItemList.find((item) => item.id === field.value) || null}
+                                    />
+                                )}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Grid container columnSpacing={1}>
+                                <DamagePrice setValue={setValue} control={control} damageItemList={damageItemList} />
+                            </Grid>
+                        </Stack>
+                        <Stack>
+                            <Button
+                                variant="contained"
+                                fullWidth
+                                onClick={handleSubmit(handleCreateDamage)}
+                                sx={{ textWrap: "nowrap" }}
+                            >
+                                افزودن آیتم خسارت
+                            </Button>
+                        </Stack>
+                    </>
+                )}
+            </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,
+                        maxHeight: 300,
+                        overflowY: "auto",
+                    }}
+                >
+                    {loadingDamageItemList ? (
+                        <Stack sx={{ width: "100%", pl: 2, pt: 2 }}>
+                            <Skeleton animation="wave" variant="rounded" height={100} />
+                        </Stack>
+                    ) : (
+                        selectedDamageItemList.length !== 0 &&
+                        selectedDamageItemList.map((selectedDamageItem, index) => (
+                            <Grid key={index} item xs={12}>
+                                <DamageItemInfo
+                                    damageItemList={damageItemList}
+                                    selectedDamageItem={selectedDamageItem}
+                                    deleteDamageItem={deleteDamageItem}
+                                />
+                            </Grid>
+                        ))
+                    )}
+                </Grid>
+            </Fade>
+        </>
+    );
+};
+export default DamageItem;

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

@@ -0,0 +1,60 @@
+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 DamageItemInfo = ({ deleteDamageItem, selectedDamageItem, damageItemList }) => {
+    const itemDamageId = damageItemList.find((item) => item.id == selectedDamageItem.id);
+    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 }}>
+                        {itemDamageId.title}
+                    </Typography>
+                    <Stack>
+                        <Typography variant="caption">
+                            میزان خسارت ({itemDamageId.unit}) :{" "}
+                            <Typography
+                                component="span"
+                                variant="body1"
+                                sx={{ fontWeight: "bold", fontSize: "0.9rem" }}
+                            >
+                                {(selectedDamageItem.value / 1).toLocaleString()}
+                            </Typography>
+                        </Typography>
+
+                        <Typography variant="caption">
+                            هزینه خسارت (ریال) :{" "}
+                            <Typography
+                                component="span"
+                                variant="body1"
+                                sx={{ fontWeight: "bold", fontSize: "0.9rem" }}
+                            >
+                                {(selectedDamageItem.amount / 1).toLocaleString()}
+                            </Typography>
+                        </Typography>
+                    </Stack>
+                </Stack>
+            </Box>
+            <Box>
+                <IconButton color="error" onClick={() => deleteDamageItem(selectedDamageItem.id)}>
+                    <DeleteIcon />
+                </IconButton>
+            </Box>
+        </Card>
+    );
+};
+export default DamageItemInfo;

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

@@ -0,0 +1,48 @@
+import { Controller, useWatch } from "react-hook-form";
+import { Grid, TextField } from "@mui/material";
+import DamageAmount from "./DamageAmount";
+
+const DamagePrice = ({ damageItemList, control, setValue }) => {
+    const itemDamage = useWatch({ control, name: "id" });
+    const itemDamageId = damageItemList.find((damageItem) => damageItem.id === itemDamage);
+
+    return (
+        <>
+            <Grid item xs={12} sm={6}>
+                <Controller
+                    name="value"
+                    control={control}
+                    render={({ field, fieldState: { error } }) => {
+                        return (
+                            <TextField
+                                value={field.value || ""}
+                                variant="outlined"
+                                disabled={itemDamage === null}
+                                inputProps={{
+                                    inputMode: "number",
+                                    min: 0,
+                                    pattern: "[0-9]*",
+                                }}
+                                name="value"
+                                onChange={(event) => {
+                                    const inputValue = event.target.value;
+                                    if (isNaN(Number(inputValue))) {
+                                        return;
+                                    }
+                                    field.onChange(inputValue);
+                                }}
+                                label={`میزان خسارت ${itemDamageId?.unit ? `(${itemDamageId?.unit})` : ""}`}
+                                fullWidth
+                                size="small"
+                                error={error}
+                                helperText={error?.message}
+                            />
+                        );
+                    }}
+                />
+            </Grid>
+            <DamageAmount setValue={setValue} damageItemList={damageItemList} control={control} />
+        </>
+    );
+};
+export default DamagePrice;

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

@@ -0,0 +1,51 @@
+import { FormControlLabel, RadioGroup, Stack } from "@mui/material";
+import { Controller, useWatch } from "react-hook-form";
+import { useState } from "react";
+import PoliceFileReport from "./PoliceFileReport";
+import Radio from "@mui/material/Radio";
+
+const DamageReport = ({ control }) => {
+    const watchedStatus = useWatch({ control, name: "radio_button" });
+    const [selectedOption, setSelectedOption] = useState(watchedStatus || null);
+    // const [selectedOption, setSelectedOption] = useState("report_base");
+
+    const handleOptionChange = (e) => {
+        setSelectedOption(e.target.value);
+    };
+
+    return (
+        <>
+            <RadioGroup
+                aria-label="file-options"
+                name="file-options"
+                value={selectedOption}
+                onChange={handleOptionChange}
+            >
+                <Stack direction={"row"} alignItems={"center"} justifyContent={"center"}>
+                    <FormControlLabel
+                        control={
+                            <Controller
+                                name="radio_button"
+                                control={control}
+                                render={({ field }) => <Radio {...field} value="report_base" />}
+                            />
+                        }
+                        label="بازدید عوامل و کارشناسان راهداری"
+                    />
+                    <FormControlLabel
+                        control={
+                            <Controller
+                                name="radio_button"
+                                control={control}
+                                render={({ field }) => <Radio {...field} value="police_file_checkbox" />}
+                            />
+                        }
+                        label="کروکی یا نامه پلیس راه (معرفی فرد به اداره)"
+                    />
+                </Stack>
+            </RadioGroup>
+            {selectedOption === "police_file_checkbox" && <PoliceFileReport control={control} />}
+        </>
+    );
+};
+export default DamageReport;

src/components/dashboard/damages/operator/Actions/create/Forms/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/damages/operator/Actions/create/Forms/PoliceFileReport.jsx

@@ -0,0 +1,67 @@
+import { Controller } from "react-hook-form";
+import { Grid, Stack, TextField } from "@mui/material";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import ImageUpload from "./ImageUpload";
+
+const PoliceFileReport = ({ control }) => {
+    return (
+        <Stack spacing={3} mt={2}>
+            <Stack>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} sm={6}>
+                        <Controller
+                            name="police_serial"
+                            control={control}
+                            render={({ field, fieldState: { error } }) => (
+                                <TextField
+                                    {...field}
+                                    label="شماره کروکی یا نامه پلیس راه"
+                                    variant="outlined"
+                                    fullWidth
+                                    size="small"
+                                    error={error}
+                                    helperText={error && error.message}
+                                />
+                            )}
+                        />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                        <Controller
+                            control={control}
+                            render={({ field, fieldState: { error } }) => {
+                                return (
+                                    <MuiDatePicker
+                                        name="police_file_date"
+                                        error={error}
+                                        value={field.value}
+                                        placeholder={"تاریخ کروکی یا نامه پلیس راه"}
+                                        label={"تاریخ کروکی یا نامه پلیس راه"}
+                                        setFieldValue={(name, value) => field.onChange(value || [])}
+                                        helperText={error ? error.message : null}
+                                    />
+                                );
+                            }}
+                            name={"police_file_date"}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+            <Controller
+                name="police_file"
+                control={control}
+                render={({ field, fieldState: { error } }) => {
+                    return (
+                        <ImageUpload
+                            name={field.name}
+                            value={field.value}
+                            error={error}
+                            title={"تصویر کروکی یا نامه پلیس راه"}
+                            onChange={field.onChange}
+                        />
+                    );
+                }}
+            />
+        </Stack>
+    );
+};
+export default PoliceFileReport;

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

@@ -0,0 +1,102 @@
+"use client";
+import { Dialog, IconButton } from "@mui/material";
+import CreateFormContent from "./CreateFormContent";
+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";
+
+const OperatorCreateForm = ({ open, setOpen, mutate }) => {
+    const requestServer = useRequest({ notificationSuccess: true });
+    const SubmitCreateDamage = async (result) => {
+        const PlateNumber = `${result.plate_part1}-${result.plate_part2}-${result.plate_part3}-${result.plate_part4}`;
+        const formData = new FormData();
+        formData.append("accident_date", result.accident_date);
+        formData.append("accident_time", format(new Date(result.accident_time), "HH:mm"));
+        formData.append("accident_type", result.accident_type);
+        formData.append("province_id", result.province_id);
+        formData.append("city_id", result.city_id);
+        formData.append("axis_name", result.axis_name);
+        formData.append("driver_name", result.driver_name);
+        formData.append("driver_phone_number", result.phone_number);
+        formData.append("driver_national_code", result.national_code);
+        formData.append("plaque", PlateNumber);
+        formData.append("damage_picture1", result.damage_picture1);
+        formData.append("damage_picture2", result.damage_picture2);
+        formData.append("lat", result.start_point.lat);
+        formData.append("lng", result.start_point.lng);
+        result.items_damage.map((item, index) => {
+            formData.append(`damage_items[${index}][id]`, item.id);
+            formData.append(`damage_items[${index}][value]`, item.value);
+            formData.append(`damage_items[${index}][amount]`, item.amount);
+        });
+        if (result.radio_button === "report_base") {
+            formData.append("report_base", 1);
+        }
+        if (result.radio_button === "police_file_checkbox") {
+            formData.append("report_base", 0);
+            formData.append("police_file", result.police_file);
+            formData.append("police_file_date", result.police_file_date);
+            formData.append("police_serial", result.police_serial);
+        }
+        await requestServer(`${CREATE_DAMAGE}`, "post", {
+            data: formData,
+        })
+            .then(() => {
+                mutate();
+                setOpen(false);
+            })
+            .catch(() => {});
+    };
+    const defaultData = {
+        accident_date: "",
+        accident_time: "",
+        accident_type: "",
+        province_id: null,
+        city_id: null,
+        axis_name: "",
+        driver_name: "",
+        phone_number: "",
+        national_code: "",
+        plate_part1: "",
+        plate_part2: "الف",
+        plate_part3: "",
+        plate_part4: "",
+        radio_button: "report_base",
+        damage_picture1: null,
+        damage_picture2: null,
+        report_base: "",
+        police_file_checkbox: "",
+        police_file: null,
+        police_file_date: "",
+        police_serial: "",
+        start_point: "",
+        items_damage: [],
+    };
+    return (
+        <Dialog open={open} fullWidth maxWidth="md">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
+            {open && (
+                <CreateFormContent
+                    defaultData={defaultData}
+                    SubmitDamage={SubmitCreateDamage}
+                    setOpen={setOpen}
+                    mutate={mutate}
+                />
+            )}
+        </Dialog>
+    );
+};
+export default OperatorCreateForm;

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

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

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

@@ -0,0 +1,75 @@
+"use client";
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import { useMemo, useState } from "react";
+import moment from "jalali-moment";
+import FileSaver from "file-saver";
+import DescriptionIcon from "@mui/icons-material/Description";
+import useRequest from "@/lib/hooks/useRequest";
+import { useTheme } from "@emotion/react";
+import DataTableFilterDataStructure from "@/core/utils/DataTableFilterDataStructure";
+import isArrayEmpty from "@/core/utils/isArrayEmpty";
+import { EXPORT_DAMAGES_OPERATOR_LIST } from "@/core/utils/routes";
+
+const PrintExcel = ({ table, filterData }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const [loading, setLoading] = useState(false);
+    const requestServer = useRequest({ notificationSuccess: true });
+    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_DAMAGES_OPERATOR_LIST}?${filterParams}`, "get", {
+            requestOptions: { responseType: "blob" },
+        })
+            .then((response) => {
+                const filename = `خروجی کارتابل عملیات فعالیت روزانه تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
+                FileSaver.saveAs(response.data, filename);
+            })
+            .catch(() => {})
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="خروجی اکسل" color="primary" onClick={clickHandler}>
+                    <DescriptionIcon sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    disabled={loading}
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
+                    onClick={clickHandler}
+                >
+                    خروجی اکسل
+                </Button>
+            )}
+        </>
+    );
+};
+export default PrintExcel;

src/components/dashboard/damages/operator/Form/CreateFactor/CreateFactorContent.jsx

@@ -0,0 +1,215 @@
+import { CHECK_PAYMENT_STATUS, CREATE_FACTOR_DAMAGE, SEND_SMS_AGAIN } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import PaymentIcon from "@mui/icons-material/Payment";
+import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
+import RequestQuoteIcon from "@mui/icons-material/RequestQuote";
+import WebAssetIcon from "@mui/icons-material/WebAsset";
+import {
+    Alert,
+    Box,
+    Button,
+    Chip,
+    DialogActions,
+    DialogContent,
+    Divider,
+    Grid,
+    Stack,
+    Typography,
+} from "@mui/material";
+import { useReducer, useState } from "react";
+
+const initialState = {
+    submittingCreateFactor: false,
+    submittingCheckFactor: false,
+    submittingSms: false,
+};
+
+const reducer = (state, action) => {
+    switch (action.type) {
+        case "SET_SUBMITTING_CREATE_FACTOR":
+            return { ...state, submittingCreateFactor: action.payload };
+        case "SET_SUBMITTING_CHECK_FACTOR":
+            return { ...state, submittingCheckFactor: action.payload };
+        case "SET_SUBMITTING_SMS":
+            return { ...state, submittingSms: action.payload };
+        default:
+            return state;
+    }
+};
+const CreateFactorContent = ({ row, mutate, rowId, setOpenCreateFactorDialog }) => {
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const requestServer = useRequest({ notificationSuccess: true });
+    const [factorCreated, setFactorCreated] = useState(row.original?.status === 3);
+    const handleCreateFactor = () => {
+        dispatch({ type: "SET_SUBMITTING_CREATE_FACTOR", payload: true });
+        requestServer(`${CREATE_FACTOR_DAMAGE}/${rowId}`, "get")
+            .then(() => {
+                mutate();
+                dispatch({ type: "SET_SUBMITTING_CREATE_FACTOR", payload: false });
+                setFactorCreated(true);
+            })
+            .catch(() => {
+                dispatch({ type: "SET_SUBMITTING_CREATE_FACTOR", payload: false });
+            });
+    };
+    const handleCheckPaymentStatus = () => {
+        dispatch({ type: "SET_SUBMITTING_CHECK_FACTOR", payload: true });
+        requestServer(`${CHECK_PAYMENT_STATUS}/${rowId}`, "get")
+            .then(() => {
+                setOpenCreateFactorDialog(false);
+                mutate();
+                dispatch({ type: "SET_SUBMITTING_CHECK_FACTOR", payload: false });
+            })
+            .catch(() => {
+                dispatch({ type: "SET_SUBMITTING_CHECK_FACTOR", payload: false });
+            });
+    };
+    const handleSendSMS = () => {
+        dispatch({ type: "SET_SUBMITTING_SMS", payload: true });
+        requestServer(`${SEND_SMS_AGAIN}/${rowId}`, "get")
+            .then(() => {
+                dispatch({ type: "SET_SUBMITTING_SMS", payload: false });
+            })
+            .catch(() => {
+                dispatch({ type: "SET_SUBMITTING_SMS", payload: false });
+            });
+    };
+
+    return (
+        <>
+            <DialogContent dividers>
+                <Grid container spacing={3} 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={<PaymentIcon />}
+                                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" }}>
+                            {(row.original?.deposit_insurance_amount / 1).toLocaleString() || "0"} ریال
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                            <Chip
+                                icon={<WebAssetIcon />}
+                                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" }}>
+                            {(row.original?.deposit_daghi_amount / 1).toLocaleString() || "0"} ریال
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                            <Chip
+                                icon={<RequestQuoteIcon />}
+                                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" }}>
+                            {(row.original?.sum / 1).toLocaleString() || "0"} ریال
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                            <Chip
+                                icon={<ReceiptLongIcon />}
+                                label={
+                                    <Typography variant="h6" sx={{ fontWeight: 600, color: "primary.main" }}>
+                                        مبلغ قابل پرداخت
+                                    </Typography>
+                                }
+                            />
+                        </Box>
+                        <Divider sx={{ flex: 1, mx: 2 }} />
+                        <Typography variant="h5" sx={{ fontWeight: 600, color: "primary.main" }}>
+                            {(row.original?.sum / 1).toLocaleString() || "0"} ریال
+                        </Typography>
+                    </Grid>
+                    {!factorCreated && (
+                        <Grid item xs={12}>
+                            <Stack spacing={1}>
+                                <Alert severity="warning">
+                                    بعد از صدور فاکتور، ویرایش اطلاعات کاربر و مبالغ امکان‌پذیر نخواهد بود.
+                                </Alert>
+                                <Alert severity="info">
+                                    لینک پرداخت فاکتور به شماره {row.original?.driver_phone_number} ارسال می شود.
+                                </Alert>
+                            </Stack>
+                        </Grid>
+                    )}
+                </Grid>
+            </DialogContent>
+            <DialogActions>
+                {factorCreated ? (
+                    <>
+                        <Button
+                            key={"close"}
+                            onClick={() => setOpenCreateFactorDialog(false)}
+                            variant="outlined"
+                            color="secondary"
+                        >
+                            بستن
+                        </Button>
+                        <Button
+                            key={"submittingSms"}
+                            onClick={handleSendSMS}
+                            variant="outlined"
+                            color="warning"
+                            disabled={state.submittingSms}
+                        >
+                            {state.submittingSms ? "درحال ارسال مجدد پیام پرداخت..." : "ارسال مجدد پیام پرداخت"}
+                        </Button>
+                        <Button
+                            key={"submittingCheckFactor"}
+                            onClick={handleCheckPaymentStatus}
+                            variant="contained"
+                            color="primary"
+                            disabled={state.submittingCheckFactor}
+                        >
+                            {state.submittingCheckFactor ? "درحال دریافت اطلاعات..." : "استعلام پرداخت"}
+                        </Button>
+                    </>
+                ) : (
+                    <>
+                        <Button
+                            key={"close"}
+                            onClick={() => setOpenCreateFactorDialog(false)}
+                            variant="outlined"
+                            color="secondary"
+                        >
+                            بستن
+                        </Button>
+                        <Button
+                            key={"submittingCreateFactor"}
+                            onClick={handleCreateFactor}
+                            variant="contained"
+                            color="primary"
+                            disabled={state.submittingCreateFactor}
+                        >
+                            {state.submittingCreateFactor ? "درحال صدور فاکتور..." : "صدور فاکتور"}
+                        </Button>
+                    </>
+                )}
+            </DialogActions>
+        </>
+    );
+};
+export default CreateFactorContent;

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

@@ -0,0 +1,43 @@
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
+import CreateFactorContent from "./CreateFactorContent";
+
+const CreateFactor = ({ row, rowId, mutate }) => {
+    const [openCreateFactorDialog, setOpenCreateFactorDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title={row.original?.status == 2 ? "صدور فاکتور" : "استعلام پرداخت"}>
+                <IconButton color="primary" onClick={() => setOpenCreateFactorDialog(true)}>
+                    <ReceiptLongIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openCreateFactorDialog}
+                onClose={() => setOpenCreateFactorDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                maxWidth={"sm"}
+                scroll="paper"
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>
+                    {row.original?.status == 2 ? "صدور فاکتور" : "استعلام پرداخت"}
+                </DialogTitle>
+                {openCreateFactorDialog && (
+                    <CreateFactorContent
+                        setOpenCreateFactorDialog={setOpenCreateFactorDialog}
+                        rowId={rowId}
+                        mutate={mutate}
+                        row={row}
+                    />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default CreateFactor;

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

@@ -0,0 +1,113 @@
+import useRequest from "@/lib/hooks/useRequest";
+import CreateFormContent from "@/components/dashboard/damages/operator/Actions/create/Forms/CreateFormContent";
+import { useEffect, useState } from "react";
+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";
+
+const EditController = ({ rowId, mutate, setOpenEditDialog }) => {
+    const requestServer = useRequest();
+    const [damageItemDetails, setDamageItemDetails] = useState(null);
+    const [damageItemDetailsLoading, setDamageItemDetailsLoading] = useState(false);
+
+    useEffect(() => {
+        setDamageItemDetailsLoading(true);
+        requestServer(`${GET_DAMAGE_ITEM_DETAILS}/${rowId}`, "get")
+            .then((response) => {
+                setDamageItemDetails(response.data.data);
+                setDamageItemDetailsLoading(false);
+            })
+            .catch((e) => {
+                setDamageItemDetailsLoading(false);
+            });
+    }, [rowId]);
+
+    const today = new Date().toISOString().split("T")[0];
+    const plaqueNumber = damageItemDetails?.plaque.split("-") || [];
+    const defaultData = {
+        damage_picture1: damageItemDetails?.damage_picture1 || null,
+        damage_picture2: damageItemDetails?.damage_picture2 || null,
+        accident_date: new Date(damageItemDetails?.accident_date) || "",
+        accident_time: new Date(`${today} ${damageItemDetails?.accident_time || ""}`),
+        accident_type: damageItemDetails?.accident_type || "",
+        axis_name: damageItemDetails?.axis_name || "",
+        driver_name: damageItemDetails?.driver_name || "",
+        police_file: damageItemDetails?.police_file || null,
+        police_file_date: damageItemDetails?.police_file_date || "",
+        police_serial: damageItemDetails?.police_serial || "",
+        items_damage: damageItemDetails?.damages || [],
+        phone_number: damageItemDetails?.driver_phone_number || "",
+        national_code: damageItemDetails?.driver_national_code || "",
+        plate_part1: plaqueNumber[0] || "",
+        plate_part2: plaqueNumber[1] || "",
+        plate_part3: plaqueNumber[2] || "",
+        plate_part4: plaqueNumber[3] || "",
+        radio_button: damageItemDetails?.report_base === 1 ? "report_base" : "police_file_checkbox",
+        report_base: damageItemDetails?.report_base,
+        province_id: damageItemDetails?.province_id || null,
+        city_id: damageItemDetails?.city_id || null,
+        start_point: { lat: damageItemDetails?.lat || "", lng: damageItemDetails?.lng || "" },
+    };
+    const HandleSubmit = async (result) => {
+        const PlateNumber = `${result.plate_part1}-${result.plate_part2}-${result.plate_part3}-${result.plate_part4}`;
+        const formData = new FormData();
+        const accidentDate =
+            result.accident_date == defaultData.accident_date
+                ? moment(result.accident_date).locale("en").format("YYYY-MM-DD")
+                : result.accident_date;
+        formData.append("accident_date", accidentDate);
+        formData.append("accident_time", format(new Date(result.accident_time), "HH:mm"));
+        formData.append("accident_type", result.accident_type);
+        formData.append("province_id", result.province_id);
+        formData.append("city_id", result.city_id);
+        formData.append("axis_name", result.axis_name);
+        formData.append("driver_name", result.driver_name);
+        formData.append("driver_phone_number", result.phone_number);
+        formData.append("driver_national_code", result.national_code);
+        formData.append("plaque", PlateNumber);
+        result.damage_picture1 !== defaultData.damage_picture1 &&
+            formData.append("damage_picture1", result.damage_picture1);
+        result.damage_picture2 !== defaultData.damage_picture2 &&
+            formData.append("damage_picture2", result.damage_picture2);
+        formData.append("lat", result.start_point.lat);
+        formData.append("lng", result.start_point.lng);
+        result.items_damage.map((item, index) => {
+            formData.append(`damage_items[${index}][id]`, item.id);
+            formData.append(`damage_items[${index}][value]`, item.value);
+            formData.append(`damage_items[${index}][amount]`, item.amount);
+        });
+        if (result.radio_button === "report_base") {
+            formData.append("report_base", 1);
+        }
+        if (result.radio_button === "police_file_checkbox") {
+            formData.append("report_base", 0);
+            result.police_file !== defaultData.police_file && formData.append("police_file", result.police_file);
+            formData.append("police_file_date", result.police_file_date);
+            formData.append("police_serial", result.police_serial);
+        }
+        await requestServer(`${UPDATE_DAMAGE_ITEM}/${rowId}`, "post", {
+            data: formData,
+        })
+            .then(() => {
+                mutate();
+                setOpenEditDialog(false);
+            })
+            .catch(() => {});
+    };
+    return (
+        <>
+            {damageItemDetailsLoading ? (
+                <DialogLoading />
+            ) : (
+                <CreateFormContent
+                    setOpen={setOpenEditDialog}
+                    SubmitDamage={HandleSubmit}
+                    defaultData={defaultData}
+                    mutate={mutate}
+                />
+            )}
+        </>
+    );
+};
+export default EditController;

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

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

src/components/dashboard/damages/operator/Form/RegisterInsurance/DaghiFile.jsx

@@ -0,0 +1,48 @@
+import { Grid, Stack, TextField } from "@mui/material";
+import { Controller } from "react-hook-form";
+import ImageUpload from "./ImageUpload";
+import NumberField from "@/core/components/NumberField";
+
+const DaghiFile = ({ control }) => {
+    return (
+        <Stack spacing={3} mt={2}>
+            <Stack>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} sm={12}>
+                        <Controller
+                            name="deposit_daghi_amount"
+                            control={control}
+                            render={({ field, fieldState: { error } }) => (
+                                <NumberField
+                                    {...field}
+                                    value={field.value || ""}
+                                    label="مبلغ داغی (ریال)"
+                                    variant="outlined"
+                                    placeholder="مبلغ داغی را وارد کنید"
+                                    fullWidth
+                                    size="small"
+                                    error={error}
+                                    helperText={error && error.message}
+                                />
+                            )}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+            <Controller
+                name="deposit_daghi_image"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                    <ImageUpload
+                        name={field.name}
+                        value={field.value}
+                        error={error}
+                        title={"تصویر صورتجلسه تحویل داغی به انبار"}
+                        onChange={field.onChange}
+                    />
+                )}
+            />
+        </Stack>
+    );
+};
+export default DaghiFile;

src/components/dashboard/damages/operator/Form/RegisterInsurance/DaghiPayment.jsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { FormControlLabel, RadioGroup, Stack } from "@mui/material";
+import { Controller, useWatch } from "react-hook-form";
+import Radio from "@mui/material/Radio";
+import DaghiFile from "./DaghiFile";
+
+const DaghiPayment = ({ control }) => {
+    const watchedStatus = useWatch({ control, name: "deposit_daghi_status" });
+    const [selectedOption, setSelectedOption] = useState(watchedStatus || null);
+
+    const handleOptionChange = (e) => {
+        setSelectedOption(e.target.value);
+    };
+
+    return (
+        <>
+            <RadioGroup
+                aria-label="file-options"
+                name="file-options"
+                value={selectedOption}
+                onChange={handleOptionChange}
+            >
+                <Stack direction={"row"} alignItems={"center"} justifyContent={"center"}>
+                    <FormControlLabel
+                        value="no_daghi"
+                        control={
+                            <Controller
+                                control={control}
+                                name="deposit_daghi_status"
+                                render={({ field }) => <Radio {...field} value="no_daghi" />}
+                            />
+                        }
+                        label="صورتجلسه تحویل داغی به انبار ندارد"
+                    />
+                    <FormControlLabel
+                        value="has_daghi"
+                        control={
+                            <Controller
+                                control={control}
+                                name="deposit_daghi_status"
+                                render={({ field }) => <Radio {...field} value="has_daghi" />}
+                            />
+                        }
+                        label="صورتجلسه تحویل داغی به انبار دارد"
+                    />
+                </Stack>
+            </RadioGroup>
+
+            {selectedOption === "has_daghi" && <DaghiFile control={control} />}
+        </>
+    );
+};
+export default DaghiPayment;

src/components/dashboard/damages/operator/Form/RegisterInsurance/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, beforeImage = null, title }) => {
+    const [beforeImg, setBeforeImg] = useState(beforeImage ? beforeImage : null);
+    const [beforeFileType, setBeforeFileType] = useState(beforeImage ? "image/" : null);
+    const [beforeFileName, setBeforeFileName] = useState(null);
+    const [showBeforeImage, setShowBeforeImage] = useState(!beforeImage);
+
+    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/damages/operator/Form/RegisterInsurance/InsuranceFile.jsx

@@ -0,0 +1,48 @@
+import NumberField from "@/core/components/NumberField";
+import { Grid, Stack } from "@mui/material";
+import { Controller } from "react-hook-form";
+import ImageUpload from "./ImageUpload";
+
+const InsuranceFile = ({ control }) => {
+    return (
+        <Stack spacing={3} mt={2}>
+            <Stack>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} sm={12}>
+                        <Controller
+                            name="deposit_insurance_amount"
+                            control={control}
+                            render={({ field, fieldState: { error } }) => (
+                                <NumberField
+                                    {...field}
+                                    value={field.value || ""}
+                                    label="مبلغ بیمه (ریال)"
+                                    variant="outlined"
+                                    fullWidth
+                                    size="small"
+                                    placeholder="مبلغ بیمه را وارد کنید"
+                                    error={error}
+                                    helperText={error && error.message}
+                                />
+                            )}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+            <Controller
+                name="deposit_insurance_image"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                    <ImageUpload
+                        name={field.name}
+                        value={field.value}
+                        error={error}
+                        title={"تصویر فیش واریزی بیمه"}
+                        onChange={field.onChange}
+                    />
+                )}
+            />
+        </Stack>
+    );
+};
+export default InsuranceFile;

src/components/dashboard/damages/operator/Form/RegisterInsurance/InsurancePayment.jsx

@@ -0,0 +1,52 @@
+import { FormControlLabel, FormHelperText, RadioGroup, Stack } from "@mui/material";
+import { Controller, useWatch } from "react-hook-form";
+import Radio from "@mui/material/Radio";
+import { useState } from "react";
+import InsuranceFile from "./InsuranceFile";
+
+const InsurancePayment = ({ control }) => {
+    const watchedStatus = useWatch({ control, name: "deposit_insurance_status" });
+    const [selectedOption, setSelectedOption] = useState(watchedStatus || null);
+
+    const handleOptionChange = (e) => {
+        setSelectedOption(e.target.value);
+    };
+
+    return (
+        <>
+            <RadioGroup
+                aria-label="file-options"
+                name="file-options"
+                value={selectedOption}
+                onChange={handleOptionChange}
+            >
+                <Stack direction={"row"} alignItems={"center"} justifyContent={"center"}>
+                    <FormControlLabel
+                        value="no_insurance"
+                        control={
+                            <Controller
+                                control={control}
+                                name="deposit_insurance_status"
+                                render={({ field }) => <Radio {...field} value="no_insurance" />}
+                            />
+                        }
+                        label="فیش واریزی (بیمه) ندارد"
+                    />
+                    <FormControlLabel
+                        value="has_insurance"
+                        control={
+                            <Controller
+                                control={control}
+                                name="deposit_insurance_status"
+                                render={({ field }) => <Radio {...field} value="has_insurance" />}
+                            />
+                        }
+                        label="فیش واریزی (بیمه) دارد"
+                    />
+                </Stack>
+            </RadioGroup>
+            {selectedOption === "has_insurance" && <InsuranceFile control={control} />}
+        </>
+    );
+};
+export default InsurancePayment;

src/components/dashboard/damages/operator/Form/RegisterInsurance/RegisterInsuranceContent.jsx

@@ -0,0 +1,203 @@
+import { Box, Button, DialogActions, DialogContent, Tab, Tabs, Typography } from "@mui/material";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
+import LocalPostOfficeIcon from "@mui/icons-material/LocalPostOffice";
+import BeenhereIcon from "@mui/icons-material/Beenhere";
+import StyledForm from "@/core/components/StyledForm";
+import PaymentIcon from "@mui/icons-material/Payment";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { mixed, object, string } from "yup";
+import InsurancePayment from "./InsurancePayment";
+import DaghiPayment from "./DaghiPayment";
+import { CONFIRM_PAYMENT_INFO } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+function TabPanel(props) {
+    const { children, value, index } = props;
+    return (
+        <div role="tabpanel" hidden={value !== index}>
+            {value === index && <Box>{children}</Box>}
+        </div>
+    );
+}
+const validationSchema = object({
+    deposit_insurance_status: string().required("انتخاب یک گزینه الزامیست."),
+    deposit_daghi_status: string().required("انتخاب یک گزینه الزامیست."),
+    deposit_insurance_amount: string().when("deposit_insurance_status", {
+        is: "has_insurance",
+        then: (schema) => schema.required("مبلغ بیمه الزامی است."),
+        otherwise: (schema) => schema.notRequired(),
+    }),
+    deposit_insurance_image: mixed().when("deposit_insurance_status", {
+        is: "has_insurance",
+        then: (schema) => schema.required("تصویر فیش واریزی بیمه الزامی است."),
+        otherwise: (schema) => schema.notRequired(),
+    }),
+    deposit_daghi_amount: string()
+        .when("deposit_daghi_status", {
+            is: "has_daghi",
+            then: (schema) => schema.required("مبلغ داغی الزامی است."),
+            otherwise: (schema) => schema.notRequired(),
+        })
+        .test("max-percentage", "مبلغ داغی نباید بیشتر از ۳۰ درصد مبلغ کل خسارت باشد.", function (value) {
+            const sum = this.options.context.sum || 0;
+            if (!value || isNaN(value) || !sum) return true;
+            return parseFloat(value) <= sum * 0.3;
+        }),
+    deposit_daghi_image: mixed().when("deposit_daghi_status", {
+        is: "has_daghi",
+        then: (schema) => schema.required("تصویر صورتجلسه تحویل داغی به انبار الزامی است."),
+        otherwise: (schema) => schema.notRequired(),
+    }),
+}).test("total-amount-limit", "مجموع مبلغ بیمه و داغی نباید از کل مبلغ خسارت بیشتر باشد.", function (values) {
+    const sum = this.options.context.sum || 0;
+    const depositInsuranceAmount = parseFloat(values.deposit_insurance_amount) || 0;
+    const depositDaghiAmount = parseFloat(values.deposit_daghi_amount) || 0;
+    return depositInsuranceAmount + depositDaghiAmount <= sum;
+});
+
+const RegisterInsuranceContent = ({ setOpenRegisterInsuranceDialog, row, mutate, rowId }) => {
+    const [tabState, setTabState] = useState(0);
+    const requestServer = useRequest({ notificationSuccess: true });
+    const handleClose = () => setOpenRegisterInsuranceDialog(false);
+    const handleChangeTab = (event, newValue) => setTabState(newValue);
+
+    const defaultValues = {
+        deposit_insurance_status: "no_insurance",
+        deposit_insurance_amount: "",
+        deposit_insurance_image: null,
+        deposit_daghi_status: "no_daghi",
+        deposit_daghi_amount: "",
+        deposit_daghi_image: null,
+    };
+    const handlePrev = () => {
+        if (tabState === 0) {
+            handleClose();
+        } else {
+            setTabState(tabState - 1);
+        }
+    };
+    const handleNext = async () => {
+        let fieldsToValidate = [];
+        if (tabState === 0) {
+            fieldsToValidate = ["deposit_insurance_status", "deposit_insurance_amount", "deposit_insurance_image"];
+        }
+        if (tabState === 1) {
+            fieldsToValidate = ["deposit_daghi_status", "deposit_daghi_amount", "deposit_daghi_image"];
+        }
+
+        const isValid = await trigger(fieldsToValidate);
+        if (isValid) {
+            setTabState(tabState + 1);
+        }
+    };
+
+    const {
+        control,
+        handleSubmit,
+        trigger,
+        formState: { isSubmitting, errors },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "all",
+        context: { sum: row?.original?.sum },
+    });
+
+    const onSubmitBase = async (data) => {
+        const formData = new FormData();
+        const depositDaghiStatus = data.deposit_daghi_status === "no_daghi" ? 0 : 1;
+        const depositInsuranceStatus = data.deposit_insurance_status === "no_insurance" ? 0 : 1;
+
+        if (data.deposit_daghi_status === "has_daghi") {
+            formData.append("deposit_daghi_status", depositDaghiStatus);
+            formData.append("deposit_daghi_amount", data.deposit_daghi_amount);
+            formData.append("deposit_daghi_image", data.deposit_daghi_image);
+        }
+        if (data.deposit_insurance_status === "has_insurance") {
+            formData.append("deposit_insurance_status", depositInsuranceStatus);
+            formData.append("deposit_insurance_amount", data.deposit_insurance_amount);
+            formData.append("deposit_insurance_image", data.deposit_insurance_image);
+        }
+        try {
+            await requestServer(`${CONFIRM_PAYMENT_INFO}/${rowId}`, "post", {
+                data: formData,
+            });
+            mutate();
+            setOpenRegisterInsuranceDialog(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={<PaymentIcon />} label="فیش واریزی بیمه" />
+                <Tab disabled={tabState === 0} icon={<LocalPostOfficeIcon />} label="صورتجلسه تحویل داغی به انبار" />
+            </Tabs>
+            <DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
+                <Box sx={{ flex: 1 }}>
+                    <TabPanel value={tabState} index={0}>
+                        <InsurancePayment control={control} />
+                    </TabPanel>
+                    <TabPanel value={tabState} index={1}>
+                        <DaghiPayment control={control} />
+                    </TabPanel>
+                </Box>
+            </DialogContent>
+            {errors[""]?.message && (
+                <Typography textAlign={"center"} color={"error.main"} sx={{ mt: 2 }}>
+                    {errors[""].message}
+                </Typography>
+            )}
+            <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
+                        type="button"
+                        onClick={handleNext}
+                        variant="contained"
+                        key={"handleNext"}
+                        size="large"
+                        endIcon={<KeyboardDoubleArrowLeftIcon />}
+                    >
+                        مرحله بعد
+                    </Button>
+                )}
+                {tabState === 1 && (
+                    <Button
+                        type={"submit"}
+                        variant="contained"
+                        size="large"
+                        disabled={isSubmitting}
+                        key={"submit"}
+                        endIcon={<BeenhereIcon />}
+                    >
+                        {isSubmitting ? "در حال ثبت" : "ثبت"}
+                    </Button>
+                )}
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default RegisterInsuranceContent;

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

@@ -0,0 +1,53 @@
+import { Dialog, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import ReceiptIcon from "@mui/icons-material/Receipt";
+import RegisterInsuranceContent from "./RegisterInsuranceContent";
+import CloseIcon from "@mui/icons-material/Close";
+
+const RegisterInsurance = ({ row, mutate, rowId }) => {
+    const [openRegisterInsuranceDialog, setOpenRegisterInsuranceDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="ثبت بیمه و داغی">
+                <IconButton color="primary" onClick={() => setOpenRegisterInsuranceDialog(true)}>
+                    <ReceiptIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openRegisterInsuranceDialog}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                maxWidth={"sm"}
+                scroll="paper"
+            >
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenRegisterInsuranceDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <CloseIcon />
+                </IconButton>
+                {openRegisterInsuranceDialog && (
+                    <RegisterInsuranceContent
+                        rowId={rowId}
+                        mutate={mutate}
+                        row={row}
+                        setOpenRegisterInsuranceDialog={setOpenRegisterInsuranceDialog}
+                    />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default RegisterInsurance;

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

@@ -0,0 +1,466 @@
+"use client";
+import { useEffect, useMemo, useState } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import Toolbar from "./Toolbar";
+import { GET_TECHNICAL_DAMAGE_OPERATOR_LIST } from "@/core/utils/routes";
+import moment from "jalali-moment";
+import RowActions from "./RowActions";
+import useProvinces from "@/lib/hooks/useProvince";
+import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
+import useEdaratLists from "@/lib/hooks/useEdaratLists";
+import ImageDialog from "./RowActions/ImageDialog";
+import LocationForm from "./RowActions/LocationForm";
+import ShowPlate from "./RowActions/ShowPlate";
+import DamageItemDialog from "./RowActions/DamageItemDialog";
+import DamageReportDialog from "./RowActions/DamageReport";
+
+const OperatorList = () => {
+    const statusOptions = [
+        { value: "", label: "همه وضعیت ها" },
+        { value: 0, label: "بدون اقدام" },
+        { value: 1, label: "صدور نامه بیمه و کارشناسی داغی" },
+        { value: 2, label: "فیش ها ثبت شده است" },
+        { value: 3, label: "فاکتور صادر شده است" },
+        { value: 4, label: "فاکتور پرداخت شده است" },
+        { value: 5, label: "نامه پلیس راه صادر شده است" },
+    ];
+    const columns = useMemo(() => {
+        return [
+            {
+                accessorKey: "id",
+                header: "کد یکتا", // Unique Code
+                id: "id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                header: "اطلاعات تصادف",
+                id: "accidentInfo",
+                enableColumnFilter: false,
+                enableSorting: false,
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        accessorKey: "province_id",
+                        header: "استان",
+                        id: "province_id",
+                        enableColumnFilter: true,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        grow: false,
+                        size: 130,
+                        ColumnSelectComponent: (props) => {
+                            const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+                            const getColumnSelectOptions = useMemo(() => {
+                                if (loadingProvinces) {
+                                    return [{ value: "loading", label: "در حال بارگذاری..." }];
+                                }
+                                if (errorProvinces) {
+                                    return [{ value: "error", label: "خطا در بارگذاری" }];
+                                }
+                                return [
+                                    { value: "", label: "کل کشور" },
+                                    ...provinces.map((province) => ({
+                                        value: province.id,
+                                        label: province.name_fa,
+                                    })),
+                                ];
+                            }, [provinces, errorProvinces, loadingProvinces]);
+                            return (
+                                <CustomSelectByDependency
+                                    {...props}
+                                    value={loadingProvinces ? "loading" : props.filterParameters.value}
+                                    columnSelectOption={getColumnSelectOptions}
+                                />
+                            );
+                        },
+                        Cell: ({ row }) => <>{row.original.province_fa}</>,
+                    },
+                    {
+                        accessorKey: "city_id",
+                        header: "شهرستان", // Office
+                        id: "city_id",
+                        enableColumnFilter: true,
+                        datatype: "numeric",
+                        filterMode: "equals",
+                        dependencyId: "province_id",
+                        grow: false,
+                        size: 120,
+                        ColumnSelectComponent: (props) => {
+                            const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
+                                props.dependencyFieldValue.value
+                            );
+                            const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
+
+                            const getColumnSelectOptions = useMemo(() => {
+                                if (props.dependencyFieldValue.value === "") {
+                                    return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
+                                }
+                                if (loadingEdaratList) {
+                                    return [{ value: "loading", label: "در حال بارگذاری..." }];
+                                }
+                                if (errorEdaratList) {
+                                    return [{ value: "error", label: "خطا در بارگذاری" }];
+                                }
+                                return [
+                                    { value: "", label: "کل شهر ها" },
+                                    ...edaratList.map((edare) => ({
+                                        value: edare.id,
+                                        label: edare.name_fa,
+                                    })),
+                                ];
+                            }, [edaratList, loadingEdaratList, errorEdaratList]);
+                            useEffect(() => {
+                                if (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"
+                                            : loadingEdaratList
+                                              ? "loading"
+                                              : props.filterParameters.value
+                                    }
+                                    columnSelectOption={getColumnSelectOptions}
+                                />
+                            );
+                        },
+                        Cell: ({ row }) => <>{row.original.city_fa}</>,
+                    },
+                    {
+                        accessorKey: "axis_name",
+                        header: "نام محور",
+                        id: "axis_name",
+                        enableColumnFilter: true,
+                        enableSorting: true,
+                        datatype: "text",
+                        filterMode: "equals",
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 120,
+                    },
+                    {
+                        accessorKey: "driver_name",
+                        header: "نام راننده",
+                        id: "driver_name",
+                        enableColumnFilter: true,
+                        enableSorting: true,
+                        datatype: "text",
+                        filterMode: "equals",
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 120,
+                    },
+                    {
+                        accessorKey: "driver_national_code",
+                        header: "کد ملی راننده",
+                        id: "driver_national_code",
+                        enableColumnFilter: true,
+                        enableSorting: true,
+                        datatype: "text",
+                        filterMode: "equals",
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 120,
+                    },
+                    {
+                        accessorKey: "driver_phone_number",
+                        header: "شماره موبایل راننده",
+                        id: "driver_phone_number",
+                        enableColumnFilter: true,
+                        enableSorting: true,
+                        datatype: "text",
+                        filterMode: "equals",
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 120,
+                    },
+                    {
+                        accessorKey: "plaque",
+                        header: "پلاک",
+                        id: "plaque",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        enableSorting: false,
+                        grow: false,
+                        size: 100,
+                        Cell: ({ renderedCellValue }) => <ShowPlate plate={renderedCellValue} />,
+                    },
+                    {
+                        accessorKey: "accident_type",
+                        header: "نوع تصادف", // Value
+                        id: "accident_type",
+                        enableColumnFilter: true,
+                        enableSorting: true,
+                        datatype: "text",
+                        filterMode: "equals",
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 120,
+                        Cell: ({ row }) => <>{row.original.accident_type_fa}</>,
+                    },
+                    {
+                        accessorFn: (row) => {
+                            const formattedDate = moment(row.accident_date, "YYYY-MM-DD"); // تنظیم فرمت صحیح تاریخ
+                            const formattedTime = row.accident_time || "00:00:00"; // در صورت خالی بودن مقدار، مقدار پیش‌فرض داده شود
+                            return moment(`${formattedDate.format("YYYY-MM-DD")}T${formattedTime}`)
+                                .locale("fa")
+                                .format("HH:mm | YYYY/MM/DD");
+                        },
+                        header: "تاریخ تصادف",
+                        id: "accident_date",
+                        enableColumnFilter: true,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        accessorKey: "files",
+                        header: "تصاویر",
+                        id: "files",
+                        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.damage_picture1) {
+                                const imagesList = [row.original.damage_picture1, row.original.damage_picture2];
+                                return (
+                                    <Stack alignItems={"center"} justifyContent={"center"}>
+                                        <ImageDialog images={imagesList} />
+                                    </Stack>
+                                );
+                            }
+                            return (
+                                <Typography textAlign={"center"} variant="body2">
+                                    بدون تصویر
+                                </Typography>
+                            );
+                        },
+                    },
+                    {
+                        accessorKey: "location",
+                        header: "موقعیت",
+                        id: "location",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "array",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <LocationForm start_lat={row.original.lat} start_lng={row.original.lng} />
+                                </Stack>
+                            );
+                        },
+                    },
+                ],
+            },
+            {
+                header: "اطلاعات خسارت",
+                id: "damagesInfo",
+                enableColumnFilter: false,
+                enableSorting: false,
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        header: "گزارش خسارت",
+                        id: "damageReport",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "array",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <DamageReportDialog rowId={row.getValue("id")} />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        header: "آیتم های خسارت",
+                        id: "damageItems",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "array",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) => {
+                            return (
+                                <Stack alignItems={"center"} justifyContent={"center"}>
+                                    <DamageItemDialog rowId={row.getValue("id")} />
+                                </Stack>
+                            );
+                        },
+                    },
+                    {
+                        accessorKey: "sum",
+                        header: "مبلغ کل خسارت (ریال)",
+                        id: "sum",
+                        enableColumnFilter: true,
+                        datatype: "text",
+                        filterMode: "equals",
+                        columnFilterModeOptions: ["equals", "contains"],
+                        sortDescFirst: true,
+                        grow: false,
+                        size: 100,
+                        Cell: ({ row }) => (
+                            <Typography variant={"body2"} sx={{ margin: 1 }} component="span">
+                                {(row.original.sum / 1).toLocaleString()}
+                            </Typography>
+                        ),
+                    },
+                ],
+            },
+            {
+                header: "اطلاعات واریز",
+                id: "items",
+                enableColumnFilter: false,
+                enableSorting: false,
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        header: "مبلغ فیش (ریال)",
+                        id: "final_amount",
+                        enableColumnFilter: false,
+                        grow: false,
+                        size: 100,
+                        Cell: ({ row }) => (
+                            <Typography variant={"body2"} sx={{ margin: 1 }} component="span">
+                                {(row.original.final_amount / 1).toLocaleString()}
+                            </Typography>
+                        ),
+                    },
+                    {
+                        header: "مبلغ بیمه (ریال)",
+                        id: "deposit_insurance_amount",
+                        enableColumnFilter: false,
+                        grow: false,
+                        size: 100,
+                        Cell: ({ row }) => (
+                            <Typography variant={"body2"} sx={{ margin: 1 }} component="span">
+                                {(row.original.deposit_insurance_amount / 1).toLocaleString()}
+                            </Typography>
+                        ),
+                    },
+                    {
+                        header: "مبلغ داغی (ریال)",
+                        id: "deposit_daghi_amount",
+                        enableColumnFilter: false,
+                        grow: false,
+                        size: 100,
+                        Cell: ({ row }) => (
+                            <Typography variant={"body2"} sx={{ margin: 1 }} component="span">
+                                {(row.original.deposit_daghi_amount / 1).toLocaleString()}
+                            </Typography>
+                        ),
+                    },
+                ],
+            },
+            {
+                accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                header: "تاریخ ثبت",
+                id: "created_at",
+                enableColumnFilter: true,
+                datatype: "date",
+                filterMode: "between",
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "status",
+                header: "وضعیت",
+                id: "status",
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterMode: "equals",
+                grow: false,
+                size: 100,
+                columnSelectOption: () => {
+                    return statusOptions.map((status) => ({
+                        value: status.value,
+                        label: status.label,
+                    }));
+                },
+                Cell: ({ row }) => {
+                    return <Typography variant={"body2"}>{row.original.status_fa}</Typography>;
+                },
+            },
+        ];
+    }, []);
+
+    return (
+        <>
+            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    columns={columns}
+                    table_url={GET_TECHNICAL_DAMAGE_OPERATOR_LIST}
+                    page_name={"operatorDamages"}
+                    table_name={"operatorList"}
+                    sorting={[{ id: "id", desc: true }]}
+                    TableToolbar={Toolbar}
+                    enableRowActions
+                    positionActionsColumn={"last"}
+                    RowActions={RowActions}
+                />
+            </Box>
+        </>
+    );
+};
+export default OperatorList;

src/components/dashboard/damages/operator/RowActions/DamageItemDialog/DamageItemContent.jsx

@@ -0,0 +1,76 @@
+import DialogLoading from "@/core/components/DialogLoading";
+import { GET_DAMAGE_ITEM_DETAILS, GET_RAHDARAN_ROAD_ITEM } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import {
+    DialogContent,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Typography,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+
+const DamageItemContent = ({ rowId }) => {
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState(null);
+    const request = useRequest();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await request(`${GET_DAMAGE_ITEM_DETAILS}/${rowId}`);
+                setData(response.data.data.damages);
+            } catch (error) {
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
+
+    return (
+        <>
+            <DialogContent>
+                {loading ? (
+                    <DialogLoading />
+                ) : data ? (
+                    <TableContainer sx={{ maxHeight: 600 }}>
+                        <Table stickyHeader sx={{ minWidth: 800 }}>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell>نوع خسارت</TableCell>
+                                    <TableCell>میزان خسارت</TableCell>
+                                    <TableCell>هزینه خسارت (ریال)</TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {data.map((item) => {
+                                    return (
+                                        <TableRow
+                                            key={item.id}
+                                            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                                        >
+                                            <TableCell>{item?.title}</TableCell>
+                                            <TableCell>
+                                                {(item?.pivot?.value / 1).toLocaleString()} ({item?.pivot?.unit})
+                                            </TableCell>
+                                            <TableCell>{(item?.pivot?.amount / 1).toLocaleString()}</TableCell>
+                                        </TableRow>
+                                    );
+                                })}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                ) : (
+                    <Typography textAlign={"center"}>اطلاعات یافت نشد</Typography>
+                )}
+            </DialogContent>
+        </>
+    );
+};
+export default DamageItemContent;

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

@@ -0,0 +1,43 @@
+import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import MinorCrashIcon from "@mui/icons-material/MinorCrash";
+import { useState } from "react";
+import DamageItemContent from "./DamageItemContent";
+
+const DamageItemDialog = ({ rowId }) => {
+    const [openDamageItemDialog, setOpenDamageItemDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="آیتم های خسارت">
+                <IconButton color="primary" onClick={() => setOpenDamageItemDialog(true)}>
+                    <MinorCrashIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openDamageItemDialog}
+                onClose={() => setOpenDamageItemDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>آیتم های خسارت</DialogTitle>
+                {openDamageItemDialog && <DamageItemContent rowId={rowId} />}
+                <DialogActions>
+                    <Button
+                        onClick={() => setOpenDamageItemDialog(false)}
+                        variant="outlined"
+                        color="secondary"
+                        autoFocus
+                    >
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default DamageItemDialog;

src/components/dashboard/damages/operator/RowActions/DamageReport/DamageReportContent.jsx

@@ -0,0 +1,103 @@
+import { Box, Button, Chip, DialogContent, Divider, Grid, Typography } from "@mui/material";
+import PaymentIcon from "@mui/icons-material/Payment";
+import moment from "jalali-moment";
+import DownloadIcon from "@mui/icons-material/Download";
+import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
+import EventNoteIcon from "@mui/icons-material/EventNote";
+import ImageIcon from "@mui/icons-material/Image";
+
+const DamageReportContent = ({ damageReportDetails }) => {
+    return (
+        <>
+            <DialogContent>
+                <Grid container spacing={3} 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={<PaymentIcon />}
+                                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" }}>
+                            {damageReportDetails?.report_base === 1
+                                ? "بازدید عوامل و کارشناسان راهداری"
+                                : "کروکی یا نامه پلیس راه"}
+                        </Typography>
+                    </Grid>
+                    {damageReportDetails?.report_base === 0 && (
+                        <>
+                            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                                <Box sx={{ display: "flex", alignItems: "center" }}>
+                                    <Chip
+                                        icon={<FormatListNumberedIcon />}
+                                        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" }}>
+                                    {damageReportDetails?.police_serial}
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                                <Box sx={{ display: "flex", alignItems: "center" }}>
+                                    <Chip
+                                        icon={<EventNoteIcon />}
+                                        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" }}>
+                                    {moment(damageReportDetails?.police_file_date, "YYYY-MM-DD HH:mm:ss")
+                                        .locale("fa")
+                                        .format("YYYY/MM/DD")}
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                                <Box sx={{ display: "flex", alignItems: "center" }}>
+                                    <Chip
+                                        icon={<ImageIcon />}
+                                        label={
+                                            <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
+                                                تصویر کروکی یا نامه پلیس راه
+                                            </Typography>
+                                        }
+                                    />
+                                </Box>
+                                <Divider sx={{ flex: 1, mx: 2 }} />
+                                <Button
+                                    variant="contained"
+                                    color="primary"
+                                    size="small"
+                                    startIcon={<DownloadIcon />}
+                                    onClick={() => {
+                                        if (damageReportDetails?.police_file) {
+                                            window.open(damageReportDetails.police_file, "_blank");
+                                        } else {
+                                            alert("فایلی برای دانلود موجود نیست.");
+                                        }
+                                    }}
+                                >
+                                    دانلود فایل
+                                </Button>
+                            </Grid>
+                        </>
+                    )}
+                </Grid>
+            </DialogContent>
+        </>
+    );
+};
+export default DamageReportContent;

src/components/dashboard/damages/operator/RowActions/DamageReport/DamageReportController.jsx

@@ -0,0 +1,34 @@
+import useRequest from "@/lib/hooks/useRequest";
+import { useEffect, useState } from "react";
+import { GET_DAMAGE_ITEM_DETAILS } from "@/core/utils/routes";
+import DialogLoading from "@/core/components/DialogLoading";
+import DamageReportContent from "./DamageReportContent";
+
+const DamageReportController = ({ rowId }) => {
+    const requestServer = useRequest();
+    const [damageReportDetails, setDamageReportDetails] = useState(null);
+    const [damageItemDetailsLoading, setDamageItemDetailsLoading] = useState(false);
+
+    useEffect(() => {
+        setDamageItemDetailsLoading(true);
+        requestServer(`${GET_DAMAGE_ITEM_DETAILS}/${rowId}`, "get")
+            .then((response) => {
+                setDamageReportDetails(response.data.data);
+                setDamageItemDetailsLoading(false);
+            })
+            .catch((e) => {
+                setDamageItemDetailsLoading(false);
+            });
+    }, [rowId]);
+
+    return (
+        <>
+            {damageItemDetailsLoading ? (
+                <DialogLoading />
+            ) : (
+                <DamageReportContent damageReportDetails={damageReportDetails} />
+            )}
+        </>
+    );
+};
+export default DamageReportController;

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

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { Tooltip, IconButton, Dialog, DialogTitle, DialogActions, Button } from "@mui/material";
+import AssessmentIcon from "@mui/icons-material/Assessment";
+import DamageReportController from "./DamageReportController";
+const DamageReportDialog = ({ rowId }) => {
+    const [openDamageReportDialog, setOpenDamageReportDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="گزارش خسارت">
+                <IconButton color="primary" onClick={() => setOpenDamageReportDialog(true)}>
+                    <AssessmentIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openDamageReportDialog}
+                onClose={() => setOpenDamageReportDialog(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>
+                {openDamageReportDialog && <DamageReportController rowId={rowId} />}
+                <DialogActions>
+                    <Button onClick={() => setOpenDamageReportDialog(false)} variant="outlined" color="secondary">
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default DamageReportDialog;

src/components/dashboard/damages/operator/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_DAMAGE_ITEM } 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_DAMAGE_ITEM}/${rowId}`, "delete")
+            .then(() => {
+                mutate();
+                setOpenDeleteDialog(false);
+                setSubmitting(false);
+            })
+            .catch(() => {
+                setSubmitting(false);
+            });
+    };
+    return (
+        <>
+            <DialogContent>
+                <Stack alignItems="center" spacing={2}>
+                    <Typography mt={2}>آیا از حذف فعالیت اطمینان دارید؟</Typography>
+                </Stack>
+            </DialogContent>
+            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
+                <Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
+                    خیر !
+                </Button>
+                <Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
+                    {submitting ? "درحال حذف..." : "بله اطمینان دارم"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default DeleteContent;

src/components/dashboard/damages/operator/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/damages/operator/RowActions/ImageDialog/ImageFormContent.jsx

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

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

@@ -0,0 +1,44 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Tooltip } from "@mui/material";
+import { useState } from "react";
+import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
+import ImageFormContent from "./ImageFormContent";
+
+const ImageDialog = ({ images }) => {
+    const [openImageDialog, setOpenImageDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="تصاویر">
+                <IconButton color="primary" onClick={() => setOpenImageDialog(true)}>
+                    <PhotoLibraryIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openImageDialog}
+                onClose={() => setOpenImageDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                maxWidth={"sm"}
+                scroll="paper"
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>تصاویر</DialogTitle>
+                {openImageDialog && (
+                    <DialogContent>
+                        <ImageFormContent image={images[1]} title={"تصویر تصادف"} />
+                        <ImageFormContent image={images[0]} title={"تصویر تصادف"} />
+                    </DialogContent>
+                )}
+                <DialogActions>
+                    <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default ImageDialog;

src/components/dashboard/damages/operator/RowActions/LocationForm/LocationFormContent.jsx

@@ -0,0 +1,35 @@
+"use client";
+import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
+import React from "react";
+import dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import ShowLocationMarker from "@/core/components/ShowLocationMarker";
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+
+const LocationFormContent = ({ setOpenLocationDialog, start_lat, start_lng, end_lat, end_lng }) => {
+    return (
+        <>
+            <DialogContent>
+                <Box sx={{ width: "400px", height: "400px" }}>
+                    <MapLayer>
+                        <ShowLocationMarker
+                            start_lat={start_lat}
+                            start_lng={start_lng}
+                            end_lat={end_lat}
+                            end_lng={end_lng}
+                        />
+                    </MapLayer>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
+                <Button onClick={() => setOpenLocationDialog(false)} variant="outlined" color="secondary">
+                    بستن
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default LocationFormContent;

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

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
+import ExploreIcon from "@mui/icons-material/Explore";
+import LocationFormContent from "./LocationFormContent";
+const LocationForm = ({ start_lat, start_lng, end_lat, end_lng }) => {
+    const [openLocationDialog, setOpenLocationDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="موقعیت">
+                <IconButton color="primary" onClick={() => setOpenLocationDialog(true)}>
+                    <ExploreIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openLocationDialog}
+                onClose={() => setOpenLocationDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle>موقعیت</DialogTitle>
+                {openLocationDialog && (
+                    <LocationFormContent
+                        start_lat={start_lat}
+                        start_lng={start_lng}
+                        end_lat={end_lat}
+                        end_lng={end_lng}
+                        setOpenLocationDialog={setOpenLocationDialog}
+                    />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default LocationForm;

src/components/dashboard/damages/operator/RowActions/PoliceRahLetter/PoliceRahLetterContent.jsx

@@ -0,0 +1,40 @@
+import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
+import React, { useState } from "react";
+import useRequest from "@/lib/hooks/useRequest";
+import { GET_POLICERAH, GET_POLICERAH_PAGE } from "@/core/utils/routes";
+
+const PoliceRahLetterContent = ({ setOpenPoliceRahDialog, rowId, mutate }) => {
+    const [submitting, setSubmitting] = useState(false);
+    const requestServer = useRequest();
+    const handleClick = () => {
+        setSubmitting(true);
+        requestServer(`${GET_POLICERAH}/${rowId}`, "get")
+            .then(() => {
+                mutate();
+                window.open(`${GET_POLICERAH_PAGE}/${rowId}`, "_blank");
+                setSubmitting(false);
+                setOpenPoliceRahDialog(false);
+            })
+            .catch(() => {
+                setSubmitting(false);
+            });
+    };
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Typography mt={2}>آیا از صدور نامه به پلیس راه اطمینان دارید؟</Typography>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenPoliceRahDialog(false)} variant="outlined" color="secondary">
+                    خیر !
+                </Button>
+                <Button onClick={handleClick} variant="contained" color="primary" disabled={submitting}>
+                    {submitting ? "درحال صدور نامه پلیس راه..." : "بله اطمینان دارم"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default PoliceRahLetterContent;

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

@@ -0,0 +1,38 @@
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import GarageIcon from "@mui/icons-material/Garage";
+import React, { useState } from "react";
+import PoliceRahLetterContent from "./PoliceRahLetterContent";
+
+const PoliceRahLetter = ({ rowId, mutate }) => {
+    const [openPoliceRahDialog, setOpenPoliceRahDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="نامه پلیس راه">
+                <IconButton color="primary" onClick={() => setOpenPoliceRahDialog(true)}>
+                    <GarageIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openPoliceRahDialog}
+                onClose={() => setOpenPoliceRahDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                maxWidth={"xs"}
+                scroll="paper"
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>صدور نامه پلیس راه</DialogTitle>
+                {openPoliceRahDialog && (
+                    <PoliceRahLetterContent
+                        mutate={mutate}
+                        rowId={rowId}
+                        setOpenPoliceRahDialog={setOpenPoliceRahDialog}
+                    />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default PoliceRahLetter;

src/components/dashboard/damages/operator/RowActions/SendToInsurance/SendToInsuranceContent.jsx

@@ -0,0 +1,40 @@
+import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
+import React, { useState } from "react";
+import useRequest from "@/lib/hooks/useRequest";
+import { GET_INSURANCE, GET_INSURANCE_PAGE } from "@/core/utils/routes";
+
+const SendToInsuranceContent = ({ setOpenSendInsuranceDialog, rowId, mutate }) => {
+    const [submitting, setSubmitting] = useState(false);
+    const requestServer = useRequest();
+    const handleClick = () => {
+        setSubmitting(true);
+        requestServer(`${GET_INSURANCE}/${rowId}`, "get")
+            .then(() => {
+                mutate();
+                window.open(`${GET_INSURANCE_PAGE}/${rowId}`, "_blank");
+                setSubmitting(false);
+                setOpenSendInsuranceDialog(false);
+            })
+            .catch(() => {
+                setSubmitting(false);
+            });
+    };
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Typography mt={2}>آیا از صدور نامه بیمه اطمینان دارید؟</Typography>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenSendInsuranceDialog(false)} variant="outlined" color="secondary">
+                    خیر !
+                </Button>
+                <Button onClick={handleClick} variant="contained" color="primary" disabled={submitting}>
+                    {submitting ? "درحال صدور نامه بیمه..." : "بله اطمینان دارم"}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default SendToInsuranceContent;

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

@@ -0,0 +1,38 @@
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import EmailIcon from "@mui/icons-material/Email";
+import React, { useState } from "react";
+import SendToInsuranceContent from "./SendToInsuranceContent";
+
+const SendToInsurance = ({ rowId, mutate }) => {
+    const [openSendInsuranceDialog, setOpenSendInsuranceDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="نامه بیمه">
+                <IconButton color="primary" onClick={() => setOpenSendInsuranceDialog(true)}>
+                    <EmailIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openSendInsuranceDialog}
+                onClose={() => setOpenSendInsuranceDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                maxWidth={"xs"}
+                scroll="paper"
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>نامه بیمه</DialogTitle>
+                {openSendInsuranceDialog && (
+                    <SendToInsuranceContent
+                        mutate={mutate}
+                        rowId={rowId}
+                        setOpenSendInsuranceDialog={setOpenSendInsuranceDialog}
+                    />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default SendToInsurance;

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

@@ -0,0 +1,38 @@
+import { Stack } from "@mui/material";
+
+const ShowPlate = ({ plate }) => {
+    return (
+        <Stack sx={{ border: 1, borderColor: "divider", borderRadius: 1 }} direction={"row"}>
+            <Stack sx={{ borderRight: 1, borderColor: "divider", textAlign: "center", px: 1 }}>
+                {plate.split("-")[3]}
+            </Stack>
+            <Stack direction={"row"} spacing={1} sx={{ width: "100%", px: 0.5 }}>
+                <Stack
+                    sx={{
+                        textAlign: "center",
+                        width: "100%",
+                    }}
+                >
+                    {plate.split("-")[2]}
+                </Stack>
+                <Stack
+                    sx={{
+                        textAlign: "center",
+                        width: "100%",
+                    }}
+                >
+                    {plate.split("-")[1]}
+                </Stack>
+                <Stack
+                    sx={{
+                        textAlign: "center",
+                        width: "100%",
+                    }}
+                >
+                    {plate.split("-")[0]}
+                </Stack>
+            </Stack>
+        </Stack>
+    );
+};
+export default ShowPlate;

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

@@ -0,0 +1,33 @@
+import { Box } from "@mui/material";
+import RegisterInsurance from "../Form/RegisterInsurance";
+import CreateFactor from "../Form/CreateFactor";
+import DeleteDialog from "./DeleteDialog";
+import SendToInsurance from "./SendToInsurance";
+import PoliceRahLetter from "./PoliceRahLetter";
+import EditForm from "../Form/EditForm";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+
+const RowActions = ({ row, mutate }) => {
+    const { data: userPermissions } = usePermissions();
+    const hasDeletePermission = userPermissions.some((item) =>
+        ["delete-receipt", "delete-receipt-province"].includes(item)
+    );
+    const hasEditPermission = userPermissions.some((item) => ["edit-receipt", "edit-receipt-province"].includes(item));
+    return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+            {[4, 5].includes(row.original?.status) && <PoliceRahLetter mutate={mutate} rowId={row.getValue("id")} />}
+            {[2, 3].includes(row.original?.status) && (
+                <CreateFactor row={row} rowId={row.getValue("id")} mutate={mutate} />
+            )}
+            {[1, 2].includes(row.original?.status) && (
+                <RegisterInsurance mutate={mutate} row={row} rowId={row.getValue("id")} />
+            )}
+            {[0, 1, 2].includes(row.original?.status) && <SendToInsurance mutate={mutate} rowId={row.getValue("id")} />}
+            {hasEditPermission && [0, 1, 2].includes(row.original?.status) && (
+                <EditForm row={row} mutate={mutate} rowId={row.getValue("id")} />
+            )}
+            {hasDeletePermission && <DeleteDialog mutate={mutate} rowId={row.getValue("id")} />}
+        </Box>
+    );
+};
+export default RowActions;

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

@@ -0,0 +1,16 @@
+import { Box } from "@mui/material";
+import OperatorCreate from "./Actions/create";
+import PrintExcel from "./ExcelPrint";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+
+const Toolbar = ({ table, filterData, mutate }) => {
+    const { data: userPermissions } = usePermissions();
+    const hasAddPermission = userPermissions.some((item) => ["add-receipt", "add-receipt-province"].includes(item));
+    return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+            <PrintExcel table={table} filterData={filterData} />
+            {hasAddPermission && <OperatorCreate mutate={mutate} />}
+        </Box>
+    );
+};
+export default Toolbar;

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

@@ -0,0 +1,14 @@
+"use client";
+import PageTitle from "@/core/components/PageTitle";
+import { Stack } from "@mui/material";
+import OperatorList from "./OperatorList";
+
+const OperatorPage = () => {
+    return (
+        <Stack spacing={1}>
+            <PageTitle title={"خسارات وارده بر ابنیه فنی و تاسیسات راه"} />
+            <OperatorList />
+        </Stack>
+    );
+};
+export default OperatorPage;

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

@@ -1,12 +1,12 @@
 "use client";
-import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
-import { useMemo, useState } from "react";
-import moment from "jalali-moment";
-import FileSaver from "file-saver";
-import DescriptionIcon from "@mui/icons-material/Description";
+import { EXPORT_COUNTRY_RECEIPT_REPORT, EXPORT_PROVINCE_RECEIPT_REPORT } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";
-import { EXPORT_ROAD_ITEMS_OPERATOR_LIST } from "@/core/utils/routes";
 import { useTheme } from "@emotion/react";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import FileSaver from "file-saver";
+import moment from "jalali-moment";
+import { useMemo, useState } from "react";
 
 const PrintExcel = ({ table, filterData }) => {
     const theme = useTheme();
@@ -15,8 +15,7 @@ const PrintExcel = ({ table, filterData }) => {
     const requestServer = useRequest({ notificationSuccess: true });
     const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
         if (filter.value) {
-            // Check if there's an active filter
-            acc.push({ id: key, value: filter.value });
+            acc.push({ id: filter.id, value: filter.value });
         }
         return acc;
     }, []);
@@ -32,11 +31,14 @@ const PrintExcel = ({ table, filterData }) => {
 
     const clickHandler = () => {
         setLoading(true);
-        requestServer(`${EXPORT_ROAD_ITEMS_OPERATOR_LIST}?${filterParams}`, "get", {
+        const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
+        const requestUrl =
+            CountryOrProvince.value === "-1" ? EXPORT_COUNTRY_RECEIPT_REPORT : EXPORT_PROVINCE_RECEIPT_REPORT;
+        requestServer(`${requestUrl}?${filterParams}`, "get", {
             requestOptions: { responseType: "blob" },
         })
             .then((response) => {
-                const filename = `خروجی کارتابل گزارشات فعالیت روزانه تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
+                const filename = `خروجی کارتابل گزارشات خسارات وارده بر ابنیه فنی تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
                 FileSaver.saveAs(response.data, filename);
             })
             .catch(() => {})

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

@@ -0,0 +1,241 @@
+"use client";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+import Toolbar from "./Toolbar";
+
+const ReportLists = ({ data, specialFilter }) => {
+    const columns = useMemo(() => {
+        return [
+            {
+                accessorKey: "edare_name",
+                header: "اداره",
+                id: "edare_name",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "tedade",
+                header: "تعداد کل",
+                id: "tedade",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                muiTableBodyCellProps: {
+                    sx: {
+                        textAlign: "center",
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue }) => {
+                    return (renderedCellValue / 1).toLocaleString();
+                },
+            },
+            {
+                header: "تعداد نحوه شناسایی خسارت",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        accessorKey: "police_rah",
+                        header: "گزارش پلیس راه",
+                        id: "police_rah",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "text",
+                        grow: false,
+                        size: 50,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                textAlign: "center",
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            return (renderedCellValue / 1).toLocaleString();
+                        },
+                    },
+                    {
+                        accessorKey: "gozaresh_gasht",
+                        header: "گزارش گشت راهداری",
+                        id: "gozaresh_gasht",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "text",
+                        grow: false,
+                        size: 50,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                textAlign: "center",
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            return (renderedCellValue / 1).toLocaleString();
+                        },
+                    },
+                ],
+            },
+            {
+                accessorKey: "kol_sabt_shode",
+                header: "مبلغ کل خسارات ثبت شده (ریال)",
+                id: "kol_sabt_shode",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                muiTableBodyCellProps: {
+                    sx: {
+                        textAlign: "center",
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue }) => {
+                    return (renderedCellValue / 1).toLocaleString();
+                },
+            },
+            {
+                accessorKey: "vasel_shode",
+                header: "کل مبلغ وصول شده (ریال)",
+                id: "vasel_shode",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                muiTableBodyCellProps: {
+                    sx: {
+                        textAlign: "center",
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue }) => {
+                    return (renderedCellValue / 1).toLocaleString();
+                },
+            },
+            {
+                header: "مبلغ وصول شده به تفکیک نوع پرداخت (ریال)",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        accessorKey: "vasel_shode_final",
+                        header: "فیش",
+                        id: "vasel_shode_final",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "text",
+                        grow: false,
+                        size: 50,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                textAlign: "center",
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            return (renderedCellValue / 1).toLocaleString();
+                        },
+                    },
+                    {
+                        accessorKey: "vasel_shode_bimeh",
+                        header: "بیمه",
+                        id: "vasel_shode_bimeh",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "text",
+                        grow: false,
+                        size: 50,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                textAlign: "center",
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            return (renderedCellValue / 1).toLocaleString();
+                        },
+                    },
+                    {
+                        accessorKey: "vasel_shode_daghi",
+                        header: "داغی",
+                        id: "vasel_shode_daghi",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "text",
+                        grow: false,
+                        size: 50,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                textAlign: "center",
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            return (renderedCellValue / 1).toLocaleString();
+                        },
+                    },
+                ],
+            },
+        ];
+    }, []);
+
+    return (
+        <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+            <DataTableWithAuth
+                TableToolbar={Toolbar}
+                columns={columns}
+                data={data.data}
+                page_name={"receiptReport"}
+                table_name={"receiptReportList"}
+                specialFilter={specialFilter}
+            />
+        </Box>
+    );
+};
+
+export default ReportLists;

src/components/dashboard/damages/report/Search/FromDateController.jsx

@@ -0,0 +1,28 @@
+import { Controller } from "react-hook-form";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import React from "react";
+import moment from "jalali-moment";
+
+const FromDateController = ({ control }) => {
+    return (
+        <Controller
+            name="from_date"
+            control={control}
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+                <MuiDatePicker
+                    name="from_date"
+                    error={!!error}
+                    value={value}
+                    label={"تاریخ تصادف (از تاریخ)"}
+                    placeholder={"از تاریخ"}
+                    setFieldValue={(name, newValue) => {
+                        const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
+                        onChange(formattedDate); // Update the field value in react-hook-form
+                    }}
+                    helperText={error ? error.message : null}
+                />
+            )}
+        />
+    );
+};
+export default FromDateController;

src/components/dashboard/damages/report/Search/SearchReportField.jsx

@@ -0,0 +1,45 @@
+import { Button, Grid, LinearProgress, Typography } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import React from "react";
+import FromDateController from "./FromDateController";
+import ToDateController from "./ToDateController";
+import SelectProvince from "./SelectProvince";
+import { Controller } from "react-hook-form";
+
+const SearchReportField = ({ control, hasProvincesPermission }) => {
+    return (
+        <Grid container spacing={2} sx={{ py: 2 }}>
+            <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
+                <FromDateController control={control} />
+            </Grid>
+            <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
+                <ToDateController control={control} />
+            </Grid>
+            {hasProvincesPermission && (
+                <Grid item xs={12} md={3}>
+                    <SelectProvince control={control} />
+                </Grid>
+            )}
+            <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
+                <Controller
+                    name="submitButton"
+                    control={control}
+                    render={({ field: { value, onChange }, formState: { isSubmitting } }) => (
+                        <Button
+                            variant="contained"
+                            size="medium"
+                            type="submit"
+                            disabled={isSubmitting}
+                            endIcon={<SearchIcon />}
+                            fullWidth
+                        >
+                            {isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
+                        </Button>
+                    )}
+                />
+            </Grid>
+        </Grid>
+    );
+};
+
+export default SearchReportField;

src/components/dashboard/damages/report/Search/SelectProvince.jsx

@@ -0,0 +1,47 @@
+import { Controller } from "react-hook-form";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import React from "react";
+import { FormControl, FormHelperText, InputLabel, LinearProgress, MenuItem, Select, Typography } from "@mui/material";
+import useProvinces from "@/lib/hooks/useProvince";
+
+const SelectProvince = ({ control }) => {
+    const { provinces, loadingProvinces, errorProvinces } = useProvinces();
+    return (
+        <Controller
+            name="province_id"
+            control={control}
+            render={({ field, fieldState: { error } }) => (
+                <FormControl error={!!error} size="small" fullWidth>
+                    <InputLabel id="demo-error-label">استان</InputLabel>
+                    <Select
+                        {...field}
+                        labelId="demo-error-label"
+                        id="province_id"
+                        value={loadingProvinces ? "loading" : field.value || ""}
+                        label="استان"
+                        onChange={field.onChange}
+                    >
+                        {loadingProvinces ? (
+                            <MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
+                        ) : errorProvinces ? (
+                            <MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
+                        ) : (
+                            [
+                                <MenuItem key="-1" value={"-1"}>
+                                    کل کشور
+                                </MenuItem>,
+                                ...provinces.map((province) => (
+                                    <MenuItem key={province.id} value={province.id}>
+                                        {province.name_fa}
+                                    </MenuItem>
+                                )),
+                            ]
+                        )}
+                    </Select>
+                    {error && <FormHelperText>{error.message}</FormHelperText>}
+                </FormControl>
+            )}
+        />
+    );
+};
+export default SelectProvince;

src/components/dashboard/damages/report/Search/ToDateController.jsx

@@ -0,0 +1,30 @@
+import { Controller, useWatch } from "react-hook-form";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import React from "react";
+import moment from "jalali-moment";
+
+const ToDateController = ({ control }) => {
+    const minDate = useWatch({ control, name: "from_date" });
+    return (
+        <Controller
+            name="date_to"
+            control={control}
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+                <MuiDatePicker
+                    name="date_to"
+                    minDate={minDate}
+                    error={!!error}
+                    value={value}
+                    label={"تاریخ تصادف (تا تاریخ)"}
+                    placeholder={"تا تاریخ"}
+                    setFieldValue={(name, newValue) => {
+                        const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
+                        onChange(formattedDate); // Update the field value in react-hook-form
+                    }}
+                    helperText={error ? error.message : null}
+                />
+            )}
+        />
+    );
+};
+export default ToDateController;

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

@@ -0,0 +1,13 @@
+import StyledForm from "@/core/components/StyledForm";
+import SearchReportField from "./SearchReportField";
+
+const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => {
+    return (
+        <>
+            <StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
+                <SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
+            </StyledForm>
+        </>
+    );
+};
+export default SearchReportList;

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

@@ -0,0 +1,11 @@
+import PrintExcel from "./ExcelPrint";
+import { Box } from "@mui/material";
+
+const Toolbar = ({ table, filterData, mutate }) => {
+    return (
+        <Box sx={{ display: "flex", gap: 1 }}>
+            <PrintExcel table={table} filterData={filterData} />
+        </Box>
+    );
+};
+export default Toolbar;

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

@@ -0,0 +1,137 @@
+"use client";
+import PageTitle from "@/core/components/PageTitle";
+import { GET_PROVINCE_RECEIPT_REPORT, GET_COUNTRY_RECEIPT_REPORT } from "@/core/utils/routes";
+import { useAuth } from "@/lib/contexts/auth";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { LinearProgress, Stack } from "@mui/material";
+import moment from "jalali-moment";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import SearchReportList from "./Search";
+import ReportLists from "./ReportLists";
+
+const DamagesReportPage = () => {
+    const [data, setData] = useState(null);
+    const { data: userPermissions } = usePermissions();
+    const { user } = useAuth();
+    const requestServer = useRequest();
+    const hasProvincesPermission = userPermissions?.includes("show-receipt");
+
+    const defaultValues = {
+        from_date: moment(new Date()).format("YYYY-MM-DD"),
+        date_to: moment(new Date()).format("YYYY-MM-DD"),
+        province_id: hasProvincesPermission ? "-1" : user.province_id,
+    };
+    const defaultFilter = [
+        { value: `${defaultValues.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
+        { value: `${defaultValues.from_date}`, datatype: "date", id: "from_date", fn: "between" },
+        { value: `${defaultValues.date_to}`, datatype: "date", id: "date_to", fn: "between" },
+    ];
+    const [specialFilter, setSpecialFilter] = useState(defaultFilter);
+
+    const onSearchSubmit = async (data) => {
+        const params = new URLSearchParams();
+        params.set("from_date", `${data.from_date}`);
+        params.set("date_to", `${data.date_to}`);
+        setSpecialFilter([
+            { value: `${data.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
+            { value: `${data.from_date}`, datatype: "date", id: "from_date", fn: "between" },
+            { value: `${data.date_to}`, datatype: "date", id: "date_to", fn: "between" },
+        ]);
+        if (data.province_id === "-1") {
+            try {
+                const response = await requestServer(`${GET_COUNTRY_RECEIPT_REPORT}?${params}`);
+                const result = response.data.data;
+                const nationalReportForItem = result.activities.find((report) => report.province_id == -1);
+                const nationalReport = {
+                    edare_name: "کل کشور",
+                    ...nationalReportForItem,
+                };
+
+                setData({
+                    data: [
+                        nationalReport,
+                        ...result.provinces.map((province) => {
+                            const filteredReports = result.activities.find(
+                                (report) => report.province_id == province.id
+                            );
+                            return {
+                                ...filteredReports,
+                                edare_name: province.name_fa,
+                            };
+                        }),
+                    ],
+                    filters: data,
+                });
+            } catch (e) {
+                console.log(e);
+            }
+        } else {
+            try {
+                params.set("province_id", `${data.province_id}`);
+                const response = await requestServer(`${GET_PROVINCE_RECEIPT_REPORT}?${params}`);
+                const result = response.data.data;
+                const nationalReportForItem = result.activities.find((report) => report.city_id == "-1");
+                const nationalReport = {
+                    ...nationalReportForItem,
+                    edare_name: "کل استان",
+                };
+                setData({
+                    data: [
+                        nationalReport,
+                        ...result.cities.map((edare) => {
+                            const filteredReports = result.activities.find((report) => report.city_id == edare.id);
+                            return {
+                                edare_name: edare.name_fa,
+                                ...filteredReports,
+                            };
+                        }),
+                    ],
+                    filters: data,
+                });
+            } catch (e) {}
+        }
+    };
+
+    useEffect(() => {
+        if (!userPermissions) return;
+        onSearchSubmit(defaultValues);
+    }, [userPermissions]);
+
+    const validationSchema = yup.object().shape({
+        from_date: yup
+            .string()
+            .required("تاریخ شروع الزامی است!")
+            .matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ شروع الزامی است!")
+            .test("is-valid-date", "تاریخ شروع معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
+        date_to: yup
+            .string()
+            .required("تاریخ پایان الزامی است!")
+            .matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ پایان الزامی است!")
+            .test("is-valid-date", "تاریخ پایان معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
+        province_id: yup.string().nullable(),
+    });
+
+    const { control, handleSubmit } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onBlur",
+    });
+
+    return (
+        <Stack spacing={1}>
+            <PageTitle title={"گزارش خسارات وارده بر ابنیه فنی"} />
+            <SearchReportList
+                control={control}
+                hasProvincesPermission={hasProvincesPermission}
+                handleSubmit={handleSubmit}
+                onSearchSubmit={onSearchSubmit}
+            />
+            {!data ? <LinearProgress /> : <ReportLists specialFilter={specialFilter} data={data} />}
+        </Stack>
+    );
+};
+export default DamagesReportPage;

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

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

src/components/dashboard/fastReact/complaintList/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 { EXPORT_FAST_REACT_COMPLAINT_LIST } from "@/core/utils/routes";
+import { useTheme } from "@emotion/react";
+import DataTableFilterDataStructure from "@/core/utils/DataTableFilterDataStructure";
+import isArrayEmpty from "@/core/utils/isArrayEmpty";
+
+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_FAST_REACT_COMPLAINT_LIST}?${filterParams}`, "get", {
+            requestOptions: { responseType: "blob" },
+        })
+            .then((response) => {
+                const filename = `خروجی لیست شکایات واکنش سریع تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
+                FileSaver.saveAs(response.data, filename);
+            })
+            .catch(() => {})
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="خروجی اکسل" color="primary" onClick={clickHandler}>
+                    <DescriptionIcon sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    disabled={loading}
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
+                    onClick={clickHandler}
+                >
+                    خروجی اکسل
+                </Button>
+            )}
+        </>
+    );
+};
+export default PrintExcel;

src/components/dashboard/fastReact/complaintList/Form/registerAction/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/fastReact/complaintList/Form/registerAction/RegisterActionContent.jsx

@@ -0,0 +1,106 @@
+import { Button, DialogActions, DialogContent, FormControlLabel, RadioGroup, Stack } from "@mui/material";
+import { Controller, useForm } from "react-hook-form";
+import Radio from "@mui/material/Radio";
+import StyledForm from "@/core/components/StyledForm";
+import { useState } from "react";
+import RegisterActionDone from "./RegisterActionDone";
+import RegisterActionUndone from "./RegisterActionUndone";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { mixed, object, string } from "yup";
+import BeenhereIcon from "@mui/icons-material/Beenhere";
+
+const RegisterActionContent = ({ setOpen, defaultValues, onBaseSubmit }) => {
+    const [selectedOption, setSelectedOption] = useState(defaultValues?.rms_status || "1");
+
+    const handleOptionChange = (e) => {
+        setSelectedOption(e.target.value);
+    };
+    const validationSchema = object({
+        description: string().required("توضیحات الزامی است"),
+        start_point: mixed().when("rms_status", {
+            is: "1",
+            then: (schema) => schema.required("مکان اقدام الزامی است"),
+            otherwise: (schema) => schema.notRequired(),
+        }),
+        image_before_1: mixed().when("rms_status", {
+            is: "1",
+            then: (schema) => schema.required("تصویر قبل از اقدام الزامی است"),
+            otherwise: (schema) => schema.notRequired(),
+        }),
+        image_after_1: mixed().when("rms_status", {
+            is: "1",
+            then: (schema) => schema.required("تصویر بعد از اقدام الزامی است"),
+            otherwise: (schema) => schema.notRequired(),
+        }),
+    });
+
+    const {
+        control,
+        handleSubmit,
+        setValue,
+        formState: { isSubmitting, errors },
+    } = useForm({
+        defaultValues,
+        resolver: yupResolver(validationSchema),
+        mode: "onChange",
+    });
+
+    const onSubmit = async (data) => {
+        await onBaseSubmit(data);
+    };
+    return (
+        <StyledForm onSubmit={handleSubmit(onSubmit)}>
+            <DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
+                <RadioGroup
+                    aria-label="file-options"
+                    name="status-options"
+                    value={selectedOption}
+                    onChange={handleOptionChange}
+                >
+                    <Stack direction={"row"} alignItems={"center"} justifyContent={"center"}>
+                        <FormControlLabel
+                            control={
+                                <Controller
+                                    name="rms_status"
+                                    control={control}
+                                    render={({ field }) => <Radio {...field} value="1" />}
+                                />
+                            }
+                            label="اقدام انجام شد"
+                        />
+                        <FormControlLabel
+                            control={
+                                <Controller
+                                    name="rms_status"
+                                    control={control}
+                                    render={({ field }) => <Radio {...field} value="2" />}
+                                />
+                            }
+                            label="اقدام انجام نشد"
+                        />
+                    </Stack>
+                </RadioGroup>
+                {selectedOption === "1" ? (
+                    <RegisterActionDone control={control} setValue={setValue} errors={errors} />
+                ) : (
+                    <RegisterActionUndone control={control} />
+                )}
+            </DialogContent>
+            <DialogActions>
+                <Button color={"secondary"} variant={"outlined"} onClick={() => setOpen(false)}>
+                    بستن
+                </Button>
+                <Button
+                    disabled={isSubmitting}
+                    endIcon={<BeenhereIcon />}
+                    color={"primary"}
+                    variant={"contained"}
+                    type={"submit"}
+                >
+                    {isSubmitting ? "درحال ثبت اقدام..." : "ثبت اقدام"}
+                </Button>
+            </DialogActions>
+        </StyledForm>
+    );
+};
+export default RegisterActionContent;

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

@@ -0,0 +1,86 @@
+import { Controller, useWatch } from "react-hook-form";
+import { Grid, Stack, TextField } from "@mui/material";
+import ImageUpload from "./ImageUpload";
+import MapInfoOneMarker from "@/core/components/MapInfoOneMarker";
+
+const RegisterActionDone = ({ control, setValue, errors }) => {
+    const StartPoint = useWatch({ control, name: "start_point" });
+    return (
+        <Stack spacing={2}>
+            <Stack>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} sm={12}>
+                        <Controller
+                            name="description"
+                            control={control}
+                            render={({ field, fieldState: { error } }) => {
+                                return (
+                                    <TextField
+                                        name={field.name}
+                                        value={field.value}
+                                        label={"توضیحات"}
+                                        placeholder={"لطفا توضیحات خود را وارد کنید"}
+                                        onChange={field.onChange}
+                                        fullWidth
+                                        multiline
+                                        rows={4}
+                                        error={error}
+                                        helperText={error ? error.message : null}
+                                        size={"small"}
+                                    />
+                                );
+                            }}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+            <Stack>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} sm={6}>
+                        <Controller
+                            name="image_before_1"
+                            control={control}
+                            render={({ field, fieldState: { error } }) => (
+                                <ImageUpload
+                                    name={field.name}
+                                    value={field.value}
+                                    error={error}
+                                    onChange={field.onChange}
+                                    title={"تصویر قبل از اقدام"}
+                                />
+                            )}
+                        />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                        <Controller
+                            name="image_after_1"
+                            control={control}
+                            render={({ field, fieldState: { error } }) => (
+                                <ImageUpload
+                                    name={field.name}
+                                    value={field.value}
+                                    error={error}
+                                    onChange={field.onChange}
+                                    title={"تصویر بعد از اقدام"}
+                                />
+                            )}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+            <Stack>
+                <Grid container>
+                    <Grid item xs={12} sm={12}>
+                        <MapInfoOneMarker
+                            setValue={setValue}
+                            StartPoint={StartPoint}
+                            errors={errors}
+                            title={"برای ثبت محل اقدام، لطفاً نقشه را بیشتر زوم کنید."}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+        </Stack>
+    );
+};
+export default RegisterActionDone;

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

@@ -0,0 +1,37 @@
+import { Grid, Stack, TextField } from "@mui/material";
+import { Controller } from "react-hook-form";
+
+const RegisterActionUndone = ({ control }) => {
+    return (
+        <Stack spacing={2}>
+            <Stack>
+                <Grid container spacing={2}>
+                    <Grid item xs={12} sm={12}>
+                        <Controller
+                            name="description"
+                            control={control}
+                            render={({ field, fieldState: { error } }) => {
+                                return (
+                                    <TextField
+                                        name={field.name}
+                                        value={field.value}
+                                        label={"توضیحات"}
+                                        placeholder={"لطفا توضیحات خود را وارد کنید"}
+                                        onChange={field.onChange}
+                                        fullWidth
+                                        multiline
+                                        rows={4}
+                                        error={error}
+                                        helperText={error ? error.message : null}
+                                        size={"small"}
+                                    />
+                                );
+                            }}
+                        />
+                    </Grid>
+                </Grid>
+            </Stack>
+        </Stack>
+    );
+};
+export default RegisterActionUndone;

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

@@ -0,0 +1,66 @@
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+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 requestServer = useRequest({ notificationSuccess: true });
+    const [openRegisterActionDialog, setOpenRegisterActionDialog] = useState(false);
+    const defaultValues = {
+        rms_status: "1",
+        description: "",
+        start_point: "",
+        image_before_1: null,
+        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") {
+            formData.append("rms_description", result.description);
+            formData.append("rms_status", 1);
+            formData.append("start_point", rmsLatLng);
+            formData.append("image_before", result.image_before_1);
+            formData.append("image_after", result.image_after_1);
+        } else {
+            formData.append("rms_description", result.description);
+            formData.append("rms_status", 2);
+        }
+        await requestServer(`${REGISTER_COMPLAINTS_LIST}/${rowId}`, "post", {
+            data: formData,
+        })
+            .then((res) => {
+                mutate();
+                setOpenRegisterActionDialog(false);
+            })
+            .catch(() => {});
+    };
+    return (
+        <>
+            <Tooltip title="ثبت اقدام">
+                <IconButton color="primary" onClick={() => setOpenRegisterActionDialog(true)}>
+                    <AppRegistrationIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openRegisterActionDialog}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+            >
+                <DialogTitle>ثبت اقدام</DialogTitle>
+                <RegisterActionContent
+                    setOpen={setOpenRegisterActionDialog}
+                    onBaseSubmit={onBaseSubmit}
+                    defaultValues={defaultValues}
+                />
+            </Dialog>
+        </>
+    );
+};
+export default RegisterAction;

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

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

src/components/dashboard/fastReact/complaintList/RowActions/LocationDialog/LocationFormContent.jsx

@@ -0,0 +1,30 @@
+"use client";
+import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
+import React from "react";
+import dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import ShowLocationMarker from "@/core/components/ShowLocationMarker";
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading />,
+    ssr: false,
+});
+
+const LocationFormContent = ({ setOpenLocationDialog, start_lat, start_lng }) => {
+    return (
+        <>
+            <DialogContent>
+                <Box sx={{ width: "400px", height: "400px" }}>
+                    <MapLayer>
+                        <ShowLocationMarker start_lat={start_lat} start_lng={start_lng} />
+                    </MapLayer>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
+                <Button onClick={() => setOpenLocationDialog(false)} variant="outlined" color="secondary">
+                    بستن
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default LocationFormContent;

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

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
+import ExploreIcon from "@mui/icons-material/Explore";
+import LocationFormContent from "./LocationFormContent";
+const LocationForm = ({ start_lat, start_lng }) => {
+    const [openLocationDialog, setOpenLocationDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="موقعیت">
+                <IconButton color="primary" onClick={() => setOpenLocationDialog(true)}>
+                    <ExploreIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openLocationDialog}
+                onClose={() => setOpenLocationDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle>موقعیت</DialogTitle>
+                <LocationFormContent
+                    start_lat={start_lat}
+                    start_lng={start_lng}
+                    setOpenLocationDialog={setOpenLocationDialog}
+                />
+            </Dialog>
+        </>
+    );
+};
+export default LocationForm;

src/components/dashboard/fastReact/complaintList/RowActions/Refer/EdarateShahriField.jsx

@@ -0,0 +1,70 @@
+"use client";
+import useEdaratLists from "@/lib/hooks/useEdaratLists";
+import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
+import { useEffect, useMemo, useState } from "react";
+import { useWatch } from "react-hook-form";
+
+const EdarateShahriField = ({ control, field, fieldState: { error } }) => {
+    const dependencyField = useWatch({ control, name: "province_id" });
+    return (
+        <EdarehShahriController
+            value={field.value}
+            onChange={field.onChange}
+            dependencyField={dependencyField}
+            error={error}
+        />
+    );
+};
+
+const EdarehShahriController = ({ value, onChange, dependencyField, error }) => {
+    const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(dependencyField);
+    const [prevDependency, setPrevDependency] = useState(dependencyField);
+
+    const columnSelectOption = useMemo(() => {
+        if (dependencyField === "") {
+            return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
+        }
+        if (loadingEdaratList) {
+            return [{ value: "loading", label: "در حال بارگذاری..." }];
+        }
+        if (errorEdaratList) {
+            return [{ value: "error", label: "خطا در بارگذاری" }];
+        }
+        return edaratList.map((edare) => ({
+            value: edare.id,
+            label: edare.name_fa,
+        }));
+    }, [edaratList, loadingEdaratList, errorEdaratList]);
+
+    useEffect(() => {
+        if (prevDependency === dependencyField) return;
+        onChange("");
+        setPrevDependency(dependencyField);
+    }, [dependencyField]);
+
+    return (
+        <FormControl fullWidth error={!!error} size="small">
+            <InputLabel id={`labeledarat_id`} shrink>
+                اداره
+            </InputLabel>
+            <Select
+                labelId={`labeledarat_id`}
+                id={"edarat_id"}
+                name={`edarat_id`}
+                value={dependencyField === "" ? "empty" : loadingEdaratList ? "loading" : value}
+                input={<OutlinedInput label="اداره" />}
+                size="small"
+                onChange={(e) => onChange(e.target.value)}
+                displayEmpty
+            >
+                {columnSelectOption.map((option) => (
+                    <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                    </MenuItem>
+                ))}
+            </Select>
+            {error && <FormHelperText>{error.message}</FormHelperText>}
+        </FormControl>
+    );
+};
+export default EdarateShahriField;

src/components/dashboard/fastReact/complaintList/RowActions/Refer/ProvinceField.jsx

@@ -0,0 +1,33 @@
+import useProvinces from "@/lib/hooks/useProvince";
+import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
+
+const ProvinceField = ({ field, fieldState: { error } }) => {
+    const { provinces, loadingProvinces, errorProvinces } = useProvinces();
+    return (
+        <FormControl error={!!error} size="small" fullWidth>
+            <InputLabel id="demo-error-label">استان</InputLabel>
+            <Select
+                {...field}
+                labelId="demo-error-label"
+                id="province_id"
+                value={loadingProvinces ? "loading" : field.value || ""}
+                label="استان"
+                onChange={field.onChange}
+            >
+                {loadingProvinces ? (
+                    <MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
+                ) : errorProvinces ? (
+                    <MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
+                ) : (
+                    provinces.map((province) => (
+                        <MenuItem key={province.id} value={province.id}>
+                            {province.name_fa}
+                        </MenuItem>
+                    ))
+                )}
+            </Select>
+            {error && <FormHelperText>{error.message}</FormHelperText>}
+        </FormControl>
+    );
+};
+export default ProvinceField;

src/components/dashboard/fastReact/complaintList/RowActions/Refer/ReferContent.jsx

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

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

@@ -0,0 +1,33 @@
+import SettingsBackupRestoreIcon from "@mui/icons-material/SettingsBackupRestore";
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import ReferContent from "./ReferContent";
+
+const Refer = ({ rowId, mutate }) => {
+    const [openReferDialog, setOpenReferDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="ارجاع">
+                <IconButton color="primary" onClick={() => setOpenReferDialog(true)}>
+                    <SettingsBackupRestoreIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openReferDialog}
+                maxWidth="xs"
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+            >
+                <DialogTitle>ارجاع</DialogTitle>
+                {openReferDialog && (
+                    <ReferContent mutate={mutate} rowId={rowId} setOpenReferDialog={setOpenReferDialog} />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default Refer;

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

@@ -0,0 +1,81 @@
+import DialogLoading from "@/core/components/DialogLoading";
+import { GET_FAST_REACT_REFER_LIST } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import {
+    DialogContent,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Typography,
+} from "@mui/material";
+import moment from "jalali-moment";
+import { useEffect, useState } from "react";
+
+const ReferListContent = ({ rowId }) => {
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState(null);
+    const request = useRequest();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await request(`${GET_FAST_REACT_REFER_LIST}/${rowId}`);
+                setData(response.data.data);
+            } catch (error) {
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
+
+    return (
+        <>
+            <DialogContent>
+                {loading ? (
+                    <DialogLoading />
+                ) : data.length !== 0 ? (
+                    <TableContainer sx={{ maxHeight: 600 }}>
+                        <Table stickyHeader sx={{ minWidth: 800 }}>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell>کاربر</TableCell>
+                                    <TableCell>از اداره</TableCell>
+                                    <TableCell>از اداره</TableCell>
+                                    <TableCell>تاریخ</TableCell>
+                                    <TableCell>توضیحات</TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {data.map((refer, index) => {
+                                    return (
+                                        <TableRow
+                                            key={index}
+                                            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                                        >
+                                            <TableCell>{refer.user}</TableCell>
+                                            <TableCell>{`${refer.from_province} | ${refer.from_edareh}`}</TableCell>
+                                            <TableCell>{`${refer.to_province} | ${refer.to_edareh}`}</TableCell>
+                                            <TableCell>
+                                                {moment(refer.created_at).locale("fa").format("HH:mm | yyyy/MM/DD")}
+                                            </TableCell>
+                                            <TableCell>{refer.description}</TableCell>
+                                        </TableRow>
+                                    );
+                                })}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                ) : (
+                    <Typography textAlign={"center"}>ارجاعی در سامانه یافت نشد</Typography>
+                )}
+            </DialogContent>
+        </>
+    );
+};
+export default ReferListContent;

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

@@ -0,0 +1,43 @@
+import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import ListAltIcon from "@mui/icons-material/ListAlt";
+import ReferListContent from "./ReferListContent";
+import { useState } from "react";
+
+const ReferList = ({ rowId }) => {
+    const [openReferListDialog, setOpenReferListDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="لیست ارجاعات">
+                <IconButton color="primary" onClick={() => setOpenReferListDialog(true)}>
+                    <ListAltIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openReferListDialog}
+                onClose={() => setOpenReferListDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"md"}
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>لیست ارجاعات</DialogTitle>
+                {openReferListDialog && <ReferListContent rowId={rowId} />}
+                <DialogActions>
+                    <Button
+                        onClick={() => setOpenReferListDialog(false)}
+                        variant="outlined"
+                        color="secondary"
+                        autoFocus
+                    >
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default ReferList;

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

@@ -0,0 +1,20 @@
+import { Box } from "@mui/material";
+import RegisterAction from "../Form/registerAction";
+import ReferList from "./ReferList";
+import Refer from "./Refer";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+
+const RowActions = ({ row, mutate }) => {
+    const { data: userPermissions } = usePermissions();
+    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")} />
+            )}
+            <Refer rowId={row.getValue("road_observeds__id")} mutate={mutate} />
+            <ReferList rowId={row.getValue("road_observeds__id")} />
+        </Box>
+    );
+};
+export default RowActions;

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

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

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

@@ -0,0 +1,36 @@
+import { 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";
+
+const ComplaintList = ({ 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}>
+                    <ChecklistIcon sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    size={"small"}
+                    variant="contained"
+                    color="primary"
+                    startIcon={<ChecklistIcon />}
+                    onClick={handleOpen}
+                >
+                    لیست شکایات
+                </Button>
+            )}
+            <ComplaintListTable open={open} setOpen={setOpen} mutate={mutate} />
+        </>
+    );
+};
+export default ComplaintList;

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

@@ -0,0 +1,75 @@
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import { useMemo, useState } from "react";
+import moment from "jalali-moment";
+import FileSaver from "file-saver";
+import DescriptionIcon from "@mui/icons-material/Description";
+import useRequest from "@/lib/hooks/useRequest";
+import { EXPORT_FAST_REACT_OPERATOR_LIST } from "@/core/utils/routes";
+import { useTheme } from "@emotion/react";
+import DataTableFilterDataStructure from "@/core/utils/DataTableFilterDataStructure";
+import isArrayEmpty from "@/core/utils/isArrayEmpty";
+
+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_FAST_REACT_OPERATOR_LIST}?${filterParams}`, "get", {
+            requestOptions: { responseType: "blob" },
+        })
+            .then((response) => {
+                const filename = `خروجی کارتابل عملیات واکنش سریع تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
+                FileSaver.saveAs(response.data, filename);
+            })
+            .catch(() => {})
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="خروجی اکسل" color="primary" onClick={clickHandler}>
+                    <DescriptionIcon sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    disabled={loading}
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
+                    onClick={clickHandler}
+                >
+                    خروجی اکسل
+                </Button>
+            )}
+        </>
+    );
+};
+
+export default PrintExcel;

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

@@ -0,0 +1,72 @@
+import useRequest from "@/lib/hooks/useRequest";
+import { useEffect, useState } from "react";
+import { GET_FAST_REACT_ITEM_DETAIL, UPDATE_FAST_REACT } from "@/core/utils/routes";
+import DialogLoading from "@/core/components/DialogLoading";
+import RegisterActionContent from "@/components/dashboard/fastReact/complaintList/Form/registerAction/RegisterActionContent";
+
+const EditController = ({ rowId, mutate, setOpenEditDialog }) => {
+    const requestServer = useRequest();
+    const [fastReactItemDetails, setFastReactItemDetails] = useState(null);
+    const [fastReactItemDetailsLoading, setFastReactItemDetailsLoading] = useState(false);
+
+    useEffect(() => {
+        setFastReactItemDetailsLoading(true);
+        requestServer(`${GET_FAST_REACT_ITEM_DETAIL}/${rowId}`, "get")
+            .then((response) => {
+                setFastReactItemDetails(response.data.data);
+                setFastReactItemDetailsLoading(false);
+            })
+            .catch((e) => {
+                setFastReactItemDetailsLoading(false);
+            });
+    }, [rowId]);
+    const startPoint = fastReactItemDetails?.rms_start_latlng
+        ? { lat: fastReactItemDetails?.rms_start_latlng[0], lng: fastReactItemDetails?.rms_start_latlng[1] }
+        : { lat: "", lng: "" };
+    const defaultData = {
+        rms_status: `${fastReactItemDetails?.rms_status || "1"}`,
+        description: fastReactItemDetails?.rms_description || "",
+        start_point: startPoint,
+        image_before_1: fastReactItemDetails?.image_before || null,
+        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") {
+            formData.append("rms_description", result.description);
+            formData.append("rms_status", 1);
+            formData.append("start_point", rmsLatLng);
+            result.image_before_1 !== defaultData.image_before_1 &&
+                formData.append("image_before", result.image_before_1);
+            result.image_after_1 !== defaultData.image_after_1 && formData.append("image_after", result.image_after_1);
+        } else {
+            formData.append("rms_description", result.description);
+            formData.append("rms_status", 2);
+        }
+
+        await requestServer(`${UPDATE_FAST_REACT}/${rowId}`, "post", {
+            data: formData,
+        })
+            .then(() => {
+                mutate();
+                setOpenEditDialog(false);
+            })
+            .catch(() => {});
+    };
+    return (
+        <>
+            {fastReactItemDetailsLoading ? (
+                <DialogLoading />
+            ) : (
+                <RegisterActionContent
+                    setOpen={setOpenEditDialog}
+                    onBaseSubmit={HandleSubmit}
+                    defaultValues={defaultData}
+                />
+            )}
+        </>
+    );
+};
+export default EditController;

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

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

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

@@ -0,0 +1,323 @@
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { GET_FAST_REACT_OPERATOR } from "@/core/utils/routes";
+import EngineeringIcon from "@mui/icons-material/Engineering";
+import ThreePIcon from "@mui/icons-material/ThreeP";
+import { Box, Stack, Typography } from "@mui/material";
+import moment from "jalali-moment";
+import { useMemo } from "react";
+import RowActions from "./RowActions";
+import DescriptionForm from "./RowActions/DescriptionDialog";
+import ImageDialog from "./RowActions/ImageDialog";
+import LocationForm from "./RowActions/LocationDialog";
+import Toolbar from "./Toolbar";
+
+const OperatorList = () => {
+    const statusOptions = [
+        { value: "", label: "همه وضعیت ها" },
+        { value: 0, label: "درحال بررسی" },
+        { value: 1, label: "تایید شده" },
+        { value: 2, label: "عدم تایید" },
+    ];
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "road_observeds__id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                sortDescFirst: false,
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                header: "اطلاعات ثبت‌ شده در سامانه سوانح",
+                id: "fkInfo",
+                enableColumnFilter: false,
+                enableSorting: false,
+                grow: false,
+                size: 50,
+                columns: [
+                    {
+                        accessorKey: "fk_RegisteredEventMessage",
+                        header: "کد سوانح",
+                        id: "fk_RegisteredEventMessage",
+                        enableColumnFilter: true,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        accessorKey: "Title",
+                        header: "موضوع گزارش",
+                        id: "Title",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        accessorKey: "FeatureTypeTitle",
+                        header: "نوع گزارش",
+                        id: "FeatureTypeTitle",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        accessorKey: "Description",
+                        header: "توضیح گزارش",
+                        id: "Description",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ renderedCellValue }) => {
+                            if (renderedCellValue) {
+                                return (
+                                    <Stack alignItems={"center"} justifyContent={"center"}>
+                                        <DescriptionForm description={renderedCellValue} title={"توضیحات گزارش"} />
+                                    </Stack>
+                                );
+                            }
+                            return <Typography variant="body2">بدون توضیحات</Typography>;
+                        },
+                    },
+                    {
+                        header: "موقعیت",
+                        id: "location",
+                        enableColumnFilter: false,
+                        enableSorting: false,
+                        datatype: "array",
+                        grow: false,
+                        size: 100,
+                        muiTableBodyCellProps: {
+                            sx: {
+                                borderLeft: "1px solid #e1e1e1",
+                                py: 0,
+                                "&:first-of-type": {
+                                    borderLeft: "unset",
+                                },
+                            },
+                        },
+                        Cell: ({ row }) => {
+                            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>
+                            );
+                        },
+                    },
+                    {
+                        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>
+                            );
+                        },
+                    },
+                    {
+                        accessorKey: "MobileForSendEventSms",
+                        header: "شماره تماس گیرنده",
+                        id: "MobileForSendEventSms",
+                        enableColumnFilter: false,
+                        datatype: "text",
+                        filterMode: "equals",
+                        sortDescFirst: false,
+                        columnFilterModeOptions: ["equals", "contains"],
+                        grow: false,
+                        size: 100,
+                    },
+                    {
+                        accessorFn: (row) => moment(row.StartTime_DateTime, "M/D/YYYY h:mm:ss A").locale("fa").format("HH:mm | yyyy/MM/DD"),
+                        header: "تاریخ ثبت",
+                        id: "StartTime_DateTime",
+                        enableColumnFilter: false,
+                        datatype: "date",
+                        filterMode: "between",
+                        grow: false,
+                        size: 100,
+                    },
+                ]
+            },
+            {
+                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: "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>;
+                },
+            },
+            {
+                accessorKey: "supervisor_description",
+                header: "توضیح کارشناس",
+                id: "supervisor_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={ThreePIcon}
+                                />
+                            </Stack>
+                        );
+                    }
+                    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}</>,
+            },
+        ],
+        []
+    );
+
+    return (
+        <>
+            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    columns={columns}
+                    sorting={[
+                        { id: "status", desc: true },
+                        { id: "id", desc: true },
+                    ]}
+                    table_url={GET_FAST_REACT_OPERATOR}
+                    page_name={"operatorFastReact"}
+                    table_name={"OperatorList"}
+                    TableToolbar={Toolbar}
+                    enableRowActions
+                    positionActionsColumn={"last"}
+                    RowActions={RowActions}
+                />
+            </Box>
+        </>
+    );
+};
+export default OperatorList;

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

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