Feature/reports road items

2025-01-19 09:37:25 +00:00
parent 897a3b3988
commit e2dacdf448
81 changed files with 2722 additions and 430 deletions
--- a/src/app/(withAuth)/dashboard/road-items/reports/items-report/page.js
+++ b/src/app/(withAuth)/dashboard/road-items/reports/items-report/page.js
@@ -0,0 +1,18 @@
+import WithPermission from "@/core/middlewares/withPermission";
+import ReportPage from "@/components/dashboard/roadItems/reports/ItemsReports";
+
+const Page = () => {
+    return (
+        <WithPermission
+            permission_name={[
+                "show-road-item-supervise-cartable",
+                "show-road-item-supervise-cartable-province",
+                "create-road-item",
+            ]}
+        >
+            <ReportPage />
+        </WithPermission>
+    );
+};
+
+export default Page;
--- a/src/app/(withAuth)/dashboard/road-items/reports/sub-items-report/page.js
+++ b/src/app/(withAuth)/dashboard/road-items/reports/sub-items-report/page.js
@@ -0,0 +1,17 @@
+import WithPermission from "@/core/middlewares/withPermission";
+import SubItemsReports from "@/components/dashboard/roadItems/reports/SubItemsReports";
+const Page = () => {
+    return (
+        <WithPermission
+            permission_name={[
+                "show-road-item-supervise-cartable",
+                "show-road-item-supervise-cartable-province",
+                "create-road-item",
+            ]}
+        >
+            <SubItemsReports />
+        </WithPermission>
+    );
+};
+
+export default Page;
--- a/src/app/(withAuth)/dashboard/road-patrols/reports/page.js
+++ b/src/app/(withAuth)/dashboard/road-patrols/reports/page.js
@@ -0,0 +1,18 @@
+import WithPermission from "@/core/middlewares/withPermission";
+import ReportPage from "@/components/dashboard/roadPatrols/reports";
+
+const Page = () => {
+    return (
+        <WithPermission
+            permission_name={[
+                "add-road-patrol",
+                "show-road-patrol-supervise-cartable",
+                "show-road-patrol-supervise-cartable-province",
+            ]}
+        >
+            <ReportPage />
+        </WithPermission>
+    );
+};
+
+export default Page;
--- a/src/app/(withAuth)/dashboard/road-patrols/supervisor/page.js
+++ b/src/app/(withAuth)/dashboard/road-patrols/supervisor/page.js
@@ -3,7 +3,9 @@ import SupervisorPage from "@/components/dashboard/roadPatrols/supervisor";
 import ActivityCodeLog from "@/core/components/ActivityCodeLog";
 const Page = () => {
    return (
-        <WithPermission permission_name={["show-road-patrol-supervise-cartable"]}>
+        <WithPermission
+            permission_name={["show-road-patrol-supervise-cartable", "show-road-patrol-supervise-cartable-province"]}
+        >
            <SupervisorPage />
            <ActivityCodeLog activity_code={1143} />
        </WithPermission>
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/CreateFormContent.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/CreateFormContent.jsx
@@ -14,6 +14,7 @@ import BeenhereIcon from "@mui/icons-material/Beenhere";
 import GetItemsForm from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemsForm";
 import GetSubItemsForm from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/GetSubItemsForm";
 import GetItemInfo from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemInfo";
+import { format } from "date-fns";

 function TabPanel(props) {
    const { children, value, index } = props;
@@ -28,7 +29,7 @@ const validationSchema = object({
    item_id: number().required("نوع آیتم را مشخص کنید!"),
    sub_item_id: number().required("موضوع مشاهده شده را مشخص کنید!"),
    amount: string().required("وارد کردن مقدار الزامیست!"),
-    cmms_machines: array().required("وارد کردن کد خودرو الزامیست!"),
+    cmms_machines: array().required("وارد کردن کد خودرو الزامیست!").min(1, "حداقل یک کد خودرو باید وارد شود!"),
    rahdaran_id: array().required("وارد کردن کد راهداران الزامیست!").min(1, "حداقل یک کد راهدار باید وارد شود!"), // بررسی حداقل یک آیتم,
    activity_time: string().test("activity-time-conditional", "لطفا زمان فعالیت را انتخاب کنید!", function (value) {
        const { is_gasht } = this.options.context; // دسترسی به context
@@ -184,6 +185,8 @@ const CreateFormContent = ({ setOpen, onSubmit, is_gasht = false }) => {
        });
        delete result.cmms_machines;

+        result[`activity_time`] = format(new Date(result.activity_time), "HH:mm");
+
        await onSubmit({
            result,
            data: {
@@ -194,7 +197,6 @@ const CreateFormContent = ({ setOpen, onSubmit, is_gasht = false }) => {
            },
        });
    };
-    console.log(errors);

    return (
        <StyledForm onSubmit={handleSubmit(onSubmitBase)} id="road_items">
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemInfo.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemInfo.jsx
@@ -12,7 +12,7 @@ import NumberField from "@/core/components/NumberField";

 const GetItemInfo = ({ register, itemsList, subItemsList, control, setValue, errors, watch, getValues, is_gasht }) => {
    return (
-        <Stack spacing={2}>
+        <Stack spacing={3}>
            <Stack>
                <PreviousStatesInfo itemsList={itemsList} subItemsList={subItemsList} />
            </Stack>
@@ -25,6 +25,7 @@ const GetItemInfo = ({ register, itemsList, subItemsList, control, setValue, err
                    type="text"
                    size={"small"}
                    unit={subItemsList.unit}
+                    placeholder={`مقدار را وارد کنید`}
                    inputProps={{
                        inputMode: "number",
                        min: 0,
@@ -86,7 +87,8 @@ const GetItemInfo = ({ register, itemsList, subItemsList, control, setValue, err
                                name="activity_date"
                                error={errors.activity_date ? errors.activity_date.message : null}
                                value={watch("activity_date")}
-                                placeholder={"تاریخ شروع فعالیت"}
+                                placeholder={"تاریخ فعالیت را وارد کنید"}
+                                label={"تاریخ فعالیت"}
                                setFieldValue={setValue}
                                helperText={errors.activity_date ? errors.activity_date.message : null}
                            />
@@ -96,7 +98,8 @@ const GetItemInfo = ({ register, itemsList, subItemsList, control, setValue, err
                                value={watch("activity_time")}
                                name="activity_time"
                                error={errors.activity_time ? errors.activity_time.message : null}
-                                placeholder={"زمان فعالیت"}
+                                placeholder={"زمان فعالیت را وارد کنید"}
+                                label={"زمان فعالیت"}
                                setFieldValue={setValue}
                                helperText={errors.activity_time ? errors.activity_time.message : null}
                            />
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetSubItemsForm.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetSubItemsForm.jsx
@@ -16,7 +16,7 @@ const GetSubItemsForm = ({ setValue, watch, setSubItemsList, tabState, setTabSta
            ) : (
                <Grid container sx={{ justifyContent: "center" }} spacing={2}>
                    {subItemsList.map((item) => (
-                        <Grid item sm={6} xs={12} key={item.id}>
+                        <Grid item xs={12} key={item.id}>
                            <Card
                                elevation={0}
                                sx={{
@@ -37,7 +37,7 @@ const GetSubItemsForm = ({ setValue, watch, setSubItemsList, tabState, setTabSta
                                        display: "flex",
                                        flexDirection: "column",
                                        alignItems: "center",
-                                        p: 2,
+                                        p: 1,
                                    }}
                                >
                                    <Typography>{item.name}</Typography>
--- a/src/components/dashboard/roadItems/operator/Actions/Create/Forms/ImageUpload.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/Create/Forms/ImageUpload.jsx
@@ -84,7 +84,20 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
                                    justifyContent: "center",
                                }}
                            >
-                                <FormHelperText sx={{ fontSize: "large" }} id="before_image">
+                                <FormHelperText
+                                    sx={{
+                                        fontSize: 14,
+                                        border: 1,
+                                        borderBottom: 0,
+                                        borderColor: "divider",
+                                        px: 2,
+                                        py: 1,
+                                        borderRadius: 2,
+                                        borderBottomRightRadius: 0,
+                                        borderBottomLeftRadius: 0,
+                                    }}
+                                    id="before_image"
+                                >
                                    عکس قبل از اقدام
                                </FormHelperText>
                                <UploadSystem
@@ -120,7 +133,20 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
                                    justifyContent: "center",
                                }}
                            >
-                                <FormHelperText sx={{ fontSize: "large" }} id="before_image">
+                                <FormHelperText
+                                    sx={{
+                                        fontSize: 14,
+                                        border: 1,
+                                        borderBottom: 0,
+                                        borderColor: "divider",
+                                        px: 2,
+                                        py: 1,
+                                        borderRadius: 2,
+                                        borderBottomRightRadius: 0,
+                                        borderBottomLeftRadius: 0,
+                                    }}
+                                    id="before_image"
+                                >
                                    عکس بعد از اقدام
                                </FormHelperText>
                                <UploadSystem
--- a/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/GashtCreate.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/GashtCreate.jsx
@@ -1,10 +1,12 @@
-import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
+import { Dialog } from "@mui/material";
 import GashtCreateContent from "./GashtCreateContent";
+import { useState } from "react";

 const GashtCreate = ({ open, setOpen, mutate, rowId }) => {
+    const [tabState, setTabState] = useState(0);
    return (
-        <Dialog open={open} fullWidth maxWidth="md">
-            <GashtCreateContent mutate={mutate} setOpen={setOpen} />
+        <Dialog open={open} fullWidth maxWidth={tabState === 0 ? "md" : "sm"}>
+            <GashtCreateContent mutate={mutate} setOpen={setOpen} setTabState={setTabState} tabState={tabState} />
        </Dialog>
    );
 };
--- a/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/GashtCreateContent.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/GashtCreateContent.jsx
@@ -36,8 +36,7 @@ const defaultFilter = [
    { value: `${defaultValues.end_date}`, datatype: "date", id: "roadPatrol.end_time", fn: "equals" },
 ];

-const GashtCreateContent = ({ mutate, setOpen }) => {
-    const [tabState, setTabState] = useState(0);
+const GashtCreateContent = ({ mutate, setOpen, tabState, setTabState }) => {
    const [itemInfo, setItemInfo] = useState(null);
    const [submitCompleteForm, setSubmitCompleteForm] = useState(false);
    const [specialFilter, setSpecialFilter] = useState(defaultFilter);
@@ -137,7 +136,7 @@ const GashtCreateContent = ({ mutate, setOpen }) => {
                <Button
                    onClick={handlePrev}
                    variant="outlined"
-                    color="error"
+                    color="secondary"
                    size="large"
                    startIcon={tabState === 0 ? <ExitToAppIcon /> : <KeyboardDoubleArrowRightIcon />}
                >
--- a/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/RowActions/CompleteItem.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/RowActions/CompleteItem.jsx
@@ -1,4 +1,4 @@
-import { Button, DialogActions, Grid, Stack } from "@mui/material";
+import { Grid, Stack } from "@mui/material";
 import PreviousStatesInfo from "./PreviousStatesInfo";
 import NumberField from "@/core/components/NumberField";
 import { Controller, useForm } from "react-hook-form";
@@ -13,9 +13,9 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import StyledForm from "@/core/components/StyledForm";
 import { array, mixed, number, object, string } from "yup";
 import useRequest from "@/lib/hooks/useRequest";
-import BeenhereIcon from "@mui/icons-material/Beenhere";
 import React, { useEffect } from "react";
 import { CREATE_ROAD_ITEMS } from "@/core/utils/routes";
+import { format } from "date-fns";

 const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpen }) => {
    const requestServer = useRequest({ notificationSuccess: true });
@@ -38,7 +38,7 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
        item_id: number().required("نوع آیتم را مشخص کنید!"),
        sub_item_id: number().required("موضوع مشاهده شده را مشخص کنید!"),
        amount: string().required("وارد کردن مقدار الزامیست!"),
-        cmms_machines: array().required("وارد کردن کد خودرو الزامیست!"),
+        cmms_machines: array().required("وارد کردن کد خودرو الزامیست!").min(1, "حداقل یک کد خودرو باید وارد شود!"),
        rahdaran_id: array().required("وارد کردن کد راهداران الزامیست!").min(1, "حداقل یک کد راهدار باید وارد شود!"), // بررسی حداقل یک آیتم,
        activity_time: string().required("لطفا زمان فعالیت را انتخاب کنید!"),
        activity_date: string().required("لطفاً تاریخ شروع فعالیت را انتخاب کنید!"),
@@ -107,7 +107,7 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
        data.before_image !== null && formData.append("before_image", data.before_image);
        subItem.needs_end_point === 1 && formData.append("end_point", endPoint);
        formData.append("start_point", startPoint);
-        formData.append("activity_time", data.activity_time);
+        formData.append("activity_time", format(new Date(data.activity_time), "HH:mm"));
        formData.append("activity_date", data.activity_date);
        formData.append("amount", data.amount);
        formData.append("item_id", data.item_id);
@@ -138,6 +138,7 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
                        error={!!errors.amount}
                        value={watch("amount")}
                        type="text"
+                        placeholder={`مقدار را وارد کنید`}
                        size={"small"}
                        unit={itemInfo.unit}
                        inputProps={{
@@ -200,7 +201,8 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
                                name="activity_date"
                                error={errors.activity_date ? errors.activity_date.message : null}
                                value={watch("activity_date")}
-                                placeholder={"تاریخ شروع فعالیت"}
+                                placeholder={"تاریخ فعالیت را وارد کنید"}
+                                label={"تاریخ فعالیت"}
                                setFieldValue={setValue}
                                helperText={errors.activity_date ? errors.activity_date.message : null}
                            />
@@ -210,7 +212,8 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
                                value={watch("activity_time")}
                                name="activity_time"
                                error={errors.activity_time ? errors.activity_time.message : null}
-                                placeholder={"زمان فعالیت"}
+                                placeholder={"زمان فعالیت را وارد کنید"}
+                                label={"زمان فعالیت"}
                                setFieldValue={setValue}
                                helperText={errors.activity_time ? errors.activity_time.message : null}
                            />
--- a/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/RowActions/ImageUpload.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/RowActions/ImageUpload.jsx
@@ -68,7 +68,20 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
                                    justifyContent: "center",
                                }}
                            >
-                                <FormHelperText sx={{ fontSize: "large" }} id="before_image">
+                                <FormHelperText
+                                    sx={{
+                                        fontSize: 14,
+                                        border: 1,
+                                        borderBottom: 0,
+                                        borderColor: "divider",
+                                        px: 2,
+                                        py: 1,
+                                        borderRadius: 2,
+                                        borderBottomRightRadius: 0,
+                                        borderBottomLeftRadius: 0,
+                                    }}
+                                    id="before_image"
+                                >
                                    عکس قبل از اقدام
                                </FormHelperText>
                                <UploadSystem
@@ -104,7 +117,20 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
                                    justifyContent: "center",
                                }}
                            >
-                                <FormHelperText sx={{ fontSize: "large" }} id="before_image">
+                                <FormHelperText
+                                    sx={{
+                                        fontSize: 14,
+                                        border: 1,
+                                        borderBottom: 0,
+                                        borderColor: "divider",
+                                        px: 2,
+                                        py: 1,
+                                        borderRadius: 2,
+                                        borderBottomRightRadius: 0,
+                                        borderBottomLeftRadius: 0,
+                                    }}
+                                    id="before_image"
+                                >
                                    عکس بعد از اقدام
                                </FormHelperText>
                                <UploadSystem
--- a/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/SearchItems.jsx
+++ b/src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/SearchItems.jsx
@@ -48,11 +48,7 @@ const SearchItems = ({ setValue, itemsList, watch, errors, register, isSubmittin
                            </MenuItem>
                        ))}
                    </Select>
-                    {/*{errors.item_id ? (*/}
-                    {/*    <FormHelperText>*/}
-                    {/*        errors.item_id.message*/}
-                    {/*    </FormHelperText>*/}
-                    {/*) : null}*/}
+                    {errors.item_id ? <FormHelperText>errors.item_id.message</FormHelperText> : null}
                </FormControl>
            </Stack>
            <Stack sx={{ flex: 1 }}>
--- a/src/components/dashboard/roadItems/operator/OperatorList.jsx
+++ b/src/components/dashboard/roadItems/operator/OperatorList.jsx
@@ -6,7 +6,7 @@ import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
 import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
 import { Box, Stack, Typography } from "@mui/material";
 import moment from "jalali-moment";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import RowActions from "./RowActions";
 import ImageDialog from "./RowActions/ImageForm";
 import LocationForm from "./RowActions/LocationForm";
@@ -35,9 +35,9 @@ const OperatorList = () => {
                size: 100,
            },
            {
-                accessorKey: "item_fa",
+                accessorKey: "item",
                header: "آیتم فعالیت",
-                id: "item_fa",
+                id: "item",
                enableColumnFilter: true,
                datatype: "numeric",
                filterMode: "equals",
@@ -46,7 +46,7 @@ const OperatorList = () => {
                ColumnSelectComponent: (props) => {
                    const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();

-                    const getColumnSelectOptions = () => {
+                    const getColumnSelectOptions = useMemo(() => {
                        if (loadingItemsList) {
                            return [{ value: "loading", label: "در حال بارگذاری..." }];
                        }
@@ -60,27 +60,35 @@ const OperatorList = () => {
                                label: item.name,
                            })),
                        ];
-                    };
+                    }, [itemsList, loadingItemsList, errorItemsList]);

-                    const columnSelectOption = getColumnSelectOptions();
-
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={loadingItemsList ? "loading" : props.filterParameters.value}
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ row }) => {
+                    return row.original.item_fa;
                },
            },
            {
-                accessorKey: "sub_item_fa",
+                accessorKey: "sub_item",
                header: "موضوع مشاهده شده",
-                id: "sub_item_fa",
+                id: "sub_item",
                enableColumnFilter: true,
                datatype: "numeric",
                filterMode: "equals",
-                dependencyId: "item_fa",
+                dependencyId: "item",
                ColumnSelectComponent: (props) => {
                    const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(
                        props.dependencyFieldValue.value
                    );
+                    const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);

-                    const getColumnSelectOptions = () => {
+                    const getColumnSelectOptions = useMemo(() => {
                        if (props.dependencyFieldValue.value === "") {
                            return [{ value: "empty", label: "ابتدا آیتم فعالیت را انتخاب کنید" }];
                        }
@@ -93,15 +101,33 @@ const OperatorList = () => {
                        return [
                            { value: "", label: props.column.header },
                            ...subItemsList.map((item) => ({
-                                value: item.id,
+                                value: item.sub_item,
                                label: item.name,
                            })),
                        ];
-                    };
+                    }, [subItemsList, loadingSubItemsList, errorSubItemsList]);

-                    const columnSelectOption = getColumnSelectOptions();
-
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                    useEffect(() => {
+                        if (prevDependency === props.dependencyFieldValue.value) return;
+                        props.handleChange({ ...props.filterParameters, value: "" });
+                        setPrevDependency(props.dependencyFieldValue.value);
+                    }, [props.dependencyFieldValue.value]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue.value === ""
+                                    ? "empty"
+                                    : loadingSubItemsList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ row }) => {
+                    return row.original.sub_item_fa;
                },
            },
            {
@@ -109,6 +135,7 @@ const OperatorList = () => {
                header: "مقدار", // Value
                id: "value",
                enableColumnFilter: false,
+                enableSorting: false,
                datatype: "text",
                filterMode: "equals",
                columnFilterModeOptions: ["equals", "contains"],
@@ -225,10 +252,12 @@ const OperatorList = () => {
            {
                accessorKey: "rahdaran",
                header: "راهداران",
-                id: "rahdaran",
-                enableColumnFilter: false,
+                id: "rahdaran__code",
+                enableColumnFilter: true,
                enableSorting: false,
-                datatype: "array",
+                datatype: "text",
+                filterMode: "contains",
+                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                muiTableBodyCellProps: {
@@ -254,8 +283,7 @@ const OperatorList = () => {
                id: "activity_date_time",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
@@ -265,8 +293,7 @@ const OperatorList = () => {
                id: "created_at",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
--- a/src/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormCreate.jsx
+++ b/src/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormCreate.jsx
@@ -13,7 +13,7 @@ import { array, mixed, object, string } from "yup";

 const validationSchema = object({
    amount: string().required("وارد کردن مقدار الزامیست!"),
-    cmms_machines: array().required("وارد کردن کد خودرو الزامیست!"),
+    cmms_machines: array().required("وارد کردن کد خودرو الزامیست!").min(1, "حداقل یک کد خودرو باید وارد شود!"),
    rahdaran_id: array().required("وارد کردن کد راهداران الزامیست!").min(1, "حداقل یک کد راهدار باید وارد شود!"),
    before_image: mixed()
        .nullable()
--- a/src/components/dashboard/roadItems/operator/Toolbar.jsx
+++ b/src/components/dashboard/roadItems/operator/Toolbar.jsx
@@ -6,7 +6,7 @@ import ObservedGashtCreate from "./Actions/ObservedGashtCreate";
 const Toolbar = ({ table, filterData, mutate }) => {
    return (
        <Stack direction={"row"} spacing={2}>
-            <PrintExcel table={table} filterData={filterData} />
+            {/*<PrintExcel table={table} filterData={filterData} />*/}
            <OperatorCreate mutate={mutate} />
            <ObservedGashtCreate mutate={mutate} />
        </Stack>
--- a/src/components/dashboard/roadItems/reports/ExcelPrint/index.jsx
+++ b/src/components/dashboard/roadItems/reports/ExcelPrint/index.jsx
@@ -0,0 +1,70 @@
+"use client";
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import { useMemo, useState } from "react";
+import moment from "jalali-moment";
+import FileSaver from "file-saver";
+import DescriptionIcon from "@mui/icons-material/Description";
+import useRequest from "@/lib/hooks/useRequest";
+import { EXPORT_ROAD_ITEMS_OPERATOR_LIST } from "@/core/utils/routes";
+import { useTheme } from "@emotion/react";
+
+const PrintExcel = ({ table, filterData }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const [loading, setLoading] = useState(false);
+    const requestServer = useRequest({ 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 });
+        }
+        return acc;
+    }, []);
+
+    const filterParams = useMemo(() => {
+        const params = new URLSearchParams();
+        activeFilters.length > 0 &&
+            activeFilters.map((filter, index) => {
+                params.set(`${filter.id}`, filter.value);
+            });
+        return params;
+    }, [activeFilters]);
+
+    const clickHandler = () => {
+        setLoading(true);
+        requestServer(`${EXPORT_ROAD_ITEMS_OPERATOR_LIST}?${filterParams}`, "get", {
+            requestOptions: { responseType: "blob" },
+        })
+            .then((response) => {
+                const filename = `خروجی کارتابل گزارشات فعالیت روزانه تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
+                FileSaver.saveAs(response.data, filename);
+            })
+            .catch(() => {})
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="خروجی اکسل" color="primary" onClick={clickHandler}>
+                    <DescriptionIcon sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    disabled={loading}
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
+                    onClick={clickHandler}
+                >
+                    خروجی اکسل
+                </Button>
+            )}
+        </>
+    );
+};
+export default PrintExcel;
--- a/src/components/dashboard/roadItems/reports/ItemsReports/ReportLists.jsx
+++ b/src/components/dashboard/roadItems/reports/ItemsReports/ReportLists.jsx
@@ -0,0 +1,92 @@
+"use client";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+
+const ReportLists = ({ itemsList, data }) => {
+    const columns = useMemo(() => {
+        const dynamicColumns =
+            itemsList?.map((item) => ({
+                accessorKey: `item_${item.id}`,
+                header: `${item.name}`,
+                id: `item_${item.id}`,
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                muiTableBodyCellProps: {
+                    sx: {
+                        textAlign: "center",
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                size: 50,
+                Cell: ({ renderedCellValue }) => {
+                    return (renderedCellValue / 1).toLocaleString();
+                },
+            })) || [];
+
+        return [
+            {
+                accessorKey: "edare_name",
+                header: "اداره",
+                id: "edare_name",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "sum",
+                header: "مجموع",
+                id: "sum",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                muiTableBodyCellProps: {
+                    sx: {
+                        textAlign: "center",
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                grow: false,
+                size: 50,
+                Cell: ({ renderedCellValue }) => {
+                    return (renderedCellValue / 1).toLocaleString();
+                },
+            },
+            {
+                header: "ایتم های فعالیت روزانه",
+                id: "items",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+                columns: [...dynamicColumns],
+            },
+        ];
+    }, [itemsList]);
+
+    return (
+        <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+            <DataTableWithAuth
+                columns={columns}
+                data={data.data}
+                page_name={"roadItemReportByItems"}
+                table_name={"roadItemReportByItemsList"}
+            />
+        </Box>
+    );
+};
+
+export default ReportLists;
--- a/src/components/dashboard/roadItems/reports/ItemsReports/Search/FromDateController.jsx
+++ b/src/components/dashboard/roadItems/reports/ItemsReports/Search/FromDateController.jsx
@@ -0,0 +1,27 @@
+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}
+                    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;
--- a/src/components/dashboard/roadItems/reports/ItemsReports/Search/SearchReportField.jsx
+++ b/src/components/dashboard/roadItems/reports/ItemsReports/Search/SearchReportField.jsx
@@ -0,0 +1,45 @@
+import { Button, Grid } 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;
--- a/src/components/dashboard/roadItems/reports/ItemsReports/Search/SelectProvince.jsx
+++ b/src/components/dashboard/roadItems/reports/ItemsReports/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;
--- a/src/components/dashboard/roadItems/reports/ItemsReports/Search/ToDateController.jsx
+++ b/src/components/dashboard/roadItems/reports/ItemsReports/Search/ToDateController.jsx
@@ -0,0 +1,29 @@
+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}
+                    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;
--- a/src/components/dashboard/roadItems/reports/ItemsReports/Search/index.jsx
+++ b/src/components/dashboard/roadItems/reports/ItemsReports/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;
--- a/src/components/dashboard/roadItems/reports/ItemsReports/index.jsx
+++ b/src/components/dashboard/roadItems/reports/ItemsReports/index.jsx
@@ -0,0 +1,166 @@
+"use client";
+import PageTitle from "@/core/components/PageTitle";
+import { LinearProgress, Stack, Typography } from "@mui/material";
+import SearchReportList from "./Search";
+import { useEffect, useState } from "react";
+import ReportLists from "./ReportLists";
+import useRequest from "@/lib/hooks/useRequest";
+import { GET_CITY_ACTIVITY_PER_ITEM, GET_PROVINCE_ACTIVITY_PER_ITEM } from "@/core/utils/routes";
+import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
+import moment from "jalali-moment";
+import * as yup from "yup";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { useAuth } from "@/lib/contexts/auth";
+
+const ReportPage = () => {
+    const [data, setData] = useState(null);
+    const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
+    const { data: userPermissions } = usePermissions();
+    const { user } = useAuth();
+    const requestServer = useRequest();
+    const hasProvincesPermission = userPermissions.includes("show-road-item-supervise-cartable");
+
+    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 onSearchSubmit = async (data) => {
+        const params = new URLSearchParams();
+        params.set("from_date", `${data.from_date}`);
+        params.set("date_to", `${data.date_to}`);
+        if (data.province_id === "-1") {
+            try {
+                const response = await requestServer(`${GET_PROVINCE_ACTIVITY_PER_ITEM}?${params}`);
+                const result = response.data.data;
+                const nationalReport = {
+                    edare_name: "کل کشور",
+                    sum: result.activities.length
+                        ? result.activities
+                              .filter((report) => report.p === -1)
+                              .reduce((acc, report) => acc + (report.s || 0), 0)
+                        : 0,
+                };
+                itemsList.forEach((item) => {
+                    const nationalReportForItem = result.activities.find(
+                        (report) => report.p === -1 && report.i === item.id
+                    );
+                    nationalReport[`item_${item.id}`] = nationalReportForItem ? nationalReportForItem.s : 0;
+                });
+
+                setData({
+                    data: [
+                        nationalReport,
+                        ...result.provinces.map((province) => {
+                            const filteredReports = result.activities.filter((report) => report.p === province.id);
+                            const sum = filteredReports.reduce((acc, report) => acc + (report.s || 0), 0);
+                            const rowData = {
+                                edare_name: province.name_fa,
+                                sum,
+                            };
+                            itemsList.forEach((item) => {
+                                const reportForItem = filteredReports.find((report) => report.i === item.id);
+                                rowData[`item_${item.id}`] = reportForItem ? reportForItem.s : 0;
+                            });
+                            return rowData;
+                        }),
+                    ],
+                    filters: data,
+                });
+            } catch (e) {}
+        } else {
+            try {
+                params.set("province_id", `${data.province_id}`);
+                const response = await requestServer(`${GET_CITY_ACTIVITY_PER_ITEM}?${params}`);
+                const result = response.data.data;
+                const nationalReport = {
+                    edare_name: "کل استان",
+                    sum: result.activities.length
+                        ? result.activities
+                              .filter((report) => report.c === -1)
+                              .reduce((acc, report) => acc + (report.s || 0), 0)
+                        : 0,
+                };
+
+                itemsList.forEach((item) => {
+                    const nationalReportForItem = result.activities.find(
+                        (report) => report.c === -1 && report.i === item.id
+                    );
+                    nationalReport[`item_${item.id}`] = nationalReportForItem ? nationalReportForItem.s : 0;
+                });
+
+                setData({
+                    data: [
+                        nationalReport,
+                        ...result.edarateShahri.map((edare) => {
+                            const filteredReports = result.activities.filter((report) => report.c === edare.id);
+                            const sum = filteredReports.reduce((acc, report) => acc + (report.s || 0), 0);
+
+                            const rowData = {
+                                edare_name: edare.name_fa,
+                                sum,
+                            };
+
+                            itemsList.forEach((item) => {
+                                const reportForItem = filteredReports.find((report) => report.i === item.id);
+                                rowData[`item_${item.id}`] = reportForItem ? reportForItem.s : 0;
+                            });
+
+                            return rowData;
+                        }),
+                    ],
+                    filters: data,
+                });
+            } catch (e) {}
+        }
+    };
+
+    useEffect(() => {
+        if (itemsList.length === 0) return;
+        onSearchSubmit(defaultValues);
+    }, [itemsList]);
+
+    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 || loadingItemsList ? (
+                <LinearProgress />
+            ) : errorItemsList ? (
+                <Typography color={"error.main"} textAlign={"center"}>
+                    خطا در دریافت اطلاعات!!!
+                </Typography>
+            ) : (
+                <ReportLists data={data} itemsList={itemsList} />
+            )}
+        </Stack>
+    );
+};
+export default ReportPage;
--- a/src/components/dashboard/roadItems/reports/SubItemsReports/Search/FromDateController.jsx
+++ b/src/components/dashboard/roadItems/reports/SubItemsReports/Search/FromDateController.jsx
@@ -0,0 +1,27 @@
+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}
+                    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;
--- a/src/components/dashboard/roadItems/reports/SubItemsReports/Search/SearchReportField.jsx
+++ b/src/components/dashboard/roadItems/reports/SubItemsReports/Search/SearchReportField.jsx
@@ -0,0 +1,48 @@
+import { Button, Grid } 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";
+import SelectItems from "./SelectItems";
+
+const SearchReportField = ({ control, hasProvincesPermission }) => {
+    return (
+        <Grid container spacing={2} sx={{ py: 2 }}>
+            <Grid item xs={12} md={hasProvincesPermission ? 2 : 3}>
+                <FromDateController control={control} />
+            </Grid>
+            <Grid item xs={12} md={hasProvincesPermission ? 2 : 3}>
+                <ToDateController control={control} />
+            </Grid>
+            {hasProvincesPermission && (
+                <Grid item xs={12} md={3}>
+                    <SelectProvince control={control} />
+                </Grid>
+            )}
+            <Grid item xs={12} md={hasProvincesPermission ? 2 : 3}>
+                <SelectItems control={control} />
+            </Grid>
+            <Grid item xs={12} md={3}>
+                <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;
--- a/src/components/dashboard/roadItems/reports/SubItemsReports/Search/SelectItems.jsx
+++ b/src/components/dashboard/roadItems/reports/SubItemsReports/Search/SelectItems.jsx
@@ -0,0 +1,42 @@
+import { Controller } from "react-hook-form";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import React from "react";
+import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
+import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
+
+const SelectProvince = ({ control }) => {
+    const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
+    return (
+        <Controller
+            name="item"
+            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="item"
+                        value={loadingItemsList ? "loading" : field.value || ""}
+                        label="ایتم"
+                        onChange={field.onChange}
+                    >
+                        {loadingItemsList ? (
+                            <MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
+                        ) : errorItemsList ? (
+                            <MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
+                        ) : (
+                            itemsList.map((item) => (
+                                <MenuItem key={item.id} value={item.id}>
+                                    {item.name}
+                                </MenuItem>
+                            ))
+                        )}
+                    </Select>
+                    {error && <FormHelperText>{error.message}</FormHelperText>}
+                </FormControl>
+            )}
+        />
+    );
+};
+export default SelectProvince;
--- a/src/components/dashboard/roadItems/reports/SubItemsReports/Search/SelectProvince.jsx
+++ b/src/components/dashboard/roadItems/reports/SubItemsReports/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;
--- a/src/components/dashboard/roadItems/reports/SubItemsReports/Search/ToDateController.jsx
+++ b/src/components/dashboard/roadItems/reports/SubItemsReports/Search/ToDateController.jsx
@@ -0,0 +1,29 @@
+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}
+                    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;
--- a/src/components/dashboard/roadItems/reports/SubItemsReports/Search/index.jsx
+++ b/src/components/dashboard/roadItems/reports/SubItemsReports/Search/index.jsx
@@ -0,0 +1,12 @@
+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;
--- a/src/components/dashboard/roadItems/reports/SubItemsReports/SubItemsList.jsx
+++ b/src/components/dashboard/roadItems/reports/SubItemsReports/SubItemsList.jsx
@@ -0,0 +1,16 @@
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { Box } from "@mui/material";
+
+const SubItemsList = ({ data }) => {
+    return (
+        <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+            <DataTableWithAuth
+                columns={data.columns}
+                data={data.data}
+                page_name={"roadItemReportBySubItems"}
+                table_name={"roadItemReportBySubItemsList"}
+            />
+        </Box>
+    );
+};
+export default SubItemsList;
--- a/src/components/dashboard/roadItems/reports/SubItemsReports/index.jsx
+++ b/src/components/dashboard/roadItems/reports/SubItemsReports/index.jsx
@@ -0,0 +1,242 @@
+"use client";
+import SubItemsList from "./SubItemsList";
+import PageTitle from "@/core/components/PageTitle";
+import { LinearProgress, Stack } from "@mui/material";
+import SearchReportList from "./Search";
+import { useEffect, useState } from "react";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { useAuth } from "@/lib/contexts/auth";
+import useRequest from "@/lib/hooks/useRequest";
+import moment from "jalali-moment";
+import { GET_CITY_ACTIVITY_PER_SUB_ITEM, GET_PROVINCE_ACTIVITY_PER_SUB_ITEM } from "@/core/utils/routes";
+import * as yup from "yup";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+
+const createColumns = (sub_items) => {
+    const dynamicColumns =
+        sub_items?.map((sub_item) => ({
+            accessorKey: `sub_item_${sub_item.sub_item}`,
+            header: `${sub_item.sub_item_str}`,
+            id: `sub_item_${sub_item.sub_item}`,
+            columns: [
+                {
+                    accessorKey: `sub_item_${sub_item.sub_item}_count`,
+                    header: "تعداد",
+                    id: `sub_item_${sub_item.sub_item}_count`,
+                    enableColumnFilter: false,
+                    enableSorting: false,
+                    datatype: "text",
+                    grow: false,
+                    muiTableBodyCellProps: {
+                        sx: {
+                            textAlign: "center",
+                            borderLeft: "1px solid #e1e1e1",
+                            py: 0,
+                            "&:first-of-type": {
+                                borderLeft: "unset",
+                            },
+                        },
+                    },
+                    size: 50,
+                    Cell: ({ renderedCellValue }) => {
+                        return (renderedCellValue / 1).toLocaleString();
+                    },
+                },
+                {
+                    accessorKey: `sub_item_${sub_item.sub_item}_sum`,
+                    header: `مجموع (${sub_item.sub_item_unit})`,
+                    id: `sub_item_${sub_item.sub_item}_sum`,
+                    enableColumnFilter: false,
+                    enableSorting: false,
+                    datatype: "text",
+                    muiTableBodyCellProps: {
+                        sx: {
+                            textAlign: "center",
+                            borderLeft: "1px solid #e1e1e1",
+                            py: 0,
+                            "&:first-of-type": {
+                                borderLeft: "unset",
+                            },
+                        },
+                    },
+                    grow: false,
+                    size: 50,
+                    Cell: ({ renderedCellValue }) => {
+                        return (renderedCellValue / 1).toLocaleString();
+                    },
+                },
+            ],
+        })) || [];
+
+    return [
+        {
+            accessorKey: "edare_name",
+            header: "اداره",
+            id: "edare_name",
+            enableColumnFilter: false,
+            enableSorting: false,
+            datatype: "text",
+            grow: false,
+            size: 50,
+        },
+        {
+            header: "موارد مشاهده شده فعالیت روزانه",
+            enableColumnFilter: false,
+            id: "subItems",
+            enableSorting: false,
+            datatype: "text",
+            grow: false,
+            size: 50,
+            columns: [...dynamicColumns],
+        },
+    ];
+};
+
+const SubItemsReports = () => {
+    const [data, setData] = useState(null);
+    const { data: userPermissions } = usePermissions();
+    const { user } = useAuth();
+    const requestServer = useRequest();
+    const hasProvincesPermission = userPermissions.includes("show-road-item-supervise-cartable");
+
+    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,
+        item: 1,
+    };
+
+    const onSearchSubmit = async (data) => {
+        const params = new URLSearchParams();
+        params.set("from_date", `${data.from_date}`);
+        params.set("date_to", `${data.date_to}`);
+        params.set("item", `${data.item}`);
+        if (data.province_id === "-1") {
+            try {
+                const response = await requestServer(`${GET_PROVINCE_ACTIVITY_PER_SUB_ITEM}?${params}`);
+                const result = response.data.data;
+                const nationalReport = {
+                    edare_name: "کل کشور",
+                };
+
+                result.sub_items.forEach((subItem) => {
+                    const nationalReportForSubItem = result.activities.find(
+                        (report) => report.p === -1 && report.t === subItem.sub_item
+                    );
+                    nationalReport[`sub_item_${subItem.sub_item}_count`] = nationalReportForSubItem
+                        ? nationalReportForSubItem.c
+                        : 0;
+                    nationalReport[`sub_item_${subItem.sub_item}_sum`] = nationalReportForSubItem
+                        ? nationalReportForSubItem.s
+                        : 0;
+                });
+
+                setData({
+                    data: [
+                        nationalReport,
+                        ...result.provinces.map((province) => {
+                            const filteredReports = result.activities.filter((report) => report.p === province.id);
+                            const rowData = {
+                                edare_name: province.name_fa,
+                            };
+
+                            result.sub_items.forEach((subItem) => {
+                                const reportForItem = filteredReports.find((report) => report.t === subItem.sub_item);
+                                rowData[`sub_item_${subItem.sub_item}_count`] = reportForItem ? reportForItem.c : 0;
+                                rowData[`sub_item_${subItem.sub_item}_sum`] = reportForItem ? reportForItem.s : 0;
+                            });
+
+                            return rowData;
+                        }),
+                    ],
+                    columns: createColumns(result.sub_items),
+                    filters: data,
+                });
+            } catch (e) {}
+        } else {
+            try {
+                params.set("province_id", `${data.province_id}`);
+                const response = await requestServer(`${GET_CITY_ACTIVITY_PER_SUB_ITEM}?${params}`);
+                const result = response.data.data;
+                const nationalReport = {
+                    edare_name: "کل استان",
+                };
+
+                result.sub_items.forEach((subItem) => {
+                    const nationalReportForSubItem = result.activities.find(
+                        (report) => report.ci === -1 && report.t === subItem.sub_item
+                    );
+                    nationalReport[`sub_item_${subItem.sub_item}_count`] = nationalReportForSubItem
+                        ? nationalReportForSubItem.c
+                        : 0;
+                    nationalReport[`sub_item_${subItem.sub_item}_sum`] = nationalReportForSubItem
+                        ? nationalReportForSubItem.s
+                        : 0;
+                });
+
+                setData({
+                    data: [
+                        nationalReport,
+                        ...result.edarateShahri.map((edare) => {
+                            const filteredReports = result.activities.filter((report) => report.ci === edare.id);
+                            const rowData = {
+                                edare_name: edare.name_fa,
+                            };
+
+                            result.sub_items.forEach((subItem) => {
+                                const reportForItem = filteredReports.find((report) => report.t === subItem.sub_item);
+                                rowData[`sub_item_${subItem.sub_item}_count`] = reportForItem ? reportForItem.c : 0;
+                                rowData[`sub_item_${subItem.sub_item}_sum`] = reportForItem ? reportForItem.s : 0;
+                            });
+
+                            return rowData;
+                        }),
+                    ],
+                    columns: createColumns(result.sub_items),
+                    filters: data,
+                });
+            } catch (e) {
+                console.log(e);
+            }
+        }
+    };
+
+    useEffect(() => {
+        onSearchSubmit(defaultValues);
+    }, []);
+
+    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(),
+        item: yup.number().required("ایتم مورد نظر را وارد کنید!!!"),
+    });
+
+    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 /> : <SubItemsList data={data} />}
+        </Stack>
+    );
+};
+export default SubItemsReports;
--- a/src/components/dashboard/roadItems/supervisor/SupervisorList.jsx
+++ b/src/components/dashboard/roadItems/supervisor/SupervisorList.jsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Box, Stack, Typography } from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import Toolbar from "./Toolbar";
@@ -14,6 +14,8 @@ import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
 import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
 import useEdaratLists from "@/lib/hooks/useEdaratLists";
 import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { useAuth } from "@/lib/contexts/auth";

 const SupervisorList = () => {
    const statusOptions = [
@@ -21,8 +23,47 @@ const SupervisorList = () => {
        { value: 1, label: "تایید" },
        { value: 2, label: "عدم تایید" },
    ];
-    const columns = useMemo(
-        () => [
+    const { data: userPermissions } = usePermissions();
+    const hasCountryPermission = userPermissions.includes("show-road-item-supervise-cartable");
+    const { user } = useAuth();
+    const columns = useMemo(() => {
+        const dynamicColumns = {
+            accessorKey: "province_id",
+            header: "استان", // Province
+            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: props.column.header },
+                        ...provinces.map((province) => ({
+                            value: province.id,
+                            label: province.name_fa,
+                        })),
+                    ];
+                }, [provinces, errorProvinces, loadingProvinces]);
+                return (
+                    <CustomSelectByDependency
+                        {...props}
+                        value={loadingProvinces ? "loading" : props.filterParameters.value}
+                        columnSelectOption={getColumnSelectOptions}
+                    />
+                );
+            },
+            Cell: ({ renderedCellValue, row }) => <>{row.original.province_fa}</>,
+        };
+        return [
            {
                accessorKey: "id",
                header: "کد یکتا", // Unique Code
@@ -35,37 +76,7 @@ const SupervisorList = () => {
                grow: false,
                size: 100,
            },
-            {
-                accessorKey: "province_id",
-                header: "استان", // Province
-                id: "province_id",
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterMode: "equals",
-                grow: false,
-                size: 130,
-                ColumnSelectComponent: (props) => {
-                    const { provinces, errorProvinces, loadingProvinces } = useProvinces();
-                    const getColumnSelectOptions = () => {
-                        if (loadingProvinces) {
-                            return [{ value: "loading", label: "در حال بارگذاری..." }];
-                        }
-                        if (errorProvinces) {
-                            return [{ value: "error", label: "خطا در بارگذاری" }];
-                        }
-                        return [
-                            { value: "", label: props.column.header },
-                            ...provinces.map((province) => ({
-                                value: province.id,
-                                label: province.name_fa,
-                            })),
-                        ];
-                    };
-                    const columnSelectOption = getColumnSelectOptions();
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
-                },
-                Cell: ({ renderedCellValue, row }) => <>{row.original.province_fa}</>,
-            },
+            ...(hasCountryPermission ? [dynamicColumns] : []),
            {
                accessorKey: "edarat_id",
                header: "اداره", // Office
@@ -73,16 +84,19 @@ const SupervisorList = () => {
                enableColumnFilter: true,
                datatype: "numeric",
                filterMode: "equals",
-                dependencyId: "province_id",
+                dependencyId: hasCountryPermission ? "province_id" : null,
                grow: false,
                size: 120,
                ColumnSelectComponent: (props) => {
                    const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
-                        props.dependencyFieldValue.value
+                        hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
+                    );
+                    const [prevDependency, setPrevDependency] = useState(
+                        hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
                    );

-                    const getColumnSelectOptions = () => {
-                        if (props.dependencyFieldValue.value === "") {
+                    const getColumnSelectOptions = useMemo(() => {
+                        if (hasCountryPermission && props.dependencyFieldValue.value === "") {
                            return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
                        }
                        if (loadingEdaratList) {
@@ -98,16 +112,33 @@ const SupervisorList = () => {
                                label: edare.name_fa,
                            })),
                        ];
-                    };
-                    const columnSelectOption = getColumnSelectOptions();
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                    }, [edaratList, loadingEdaratList, errorEdaratList]);
+                    useEffect(() => {
+                        if (hasCountryPermission) return;
+                        if (prevDependency === props.dependencyFieldValue?.value) return;
+                        props.handleChange({ ...props.filterParameters, value: "" });
+                        setPrevDependency(props.dependencyFieldValue?.value);
+                    }, [props.dependencyFieldValue?.value, hasCountryPermission]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue?.value === ""
+                                    ? "empty"
+                                    : loadingEdaratList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
                },
                Cell: ({ renderedCellValue, row }) => <>{row.original.edarat_name}</>,
            },
            {
-                accessorKey: "item_fa",
+                accessorKey: "item",
                header: "آیتم فعالیت",
-                id: "item_fa",
+                id: "item",
                enableColumnFilter: true,
                datatype: "numeric",
                filterMode: "equals",
@@ -115,7 +146,8 @@ const SupervisorList = () => {
                size: 100,
                ColumnSelectComponent: (props) => {
                    const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
-                    const getColumnSelectOptions = () => {
+
+                    const getColumnSelectOptions = useMemo(() => {
                        if (loadingItemsList) {
                            return [{ value: "loading", label: "در حال بارگذاری..." }];
                        }
@@ -129,24 +161,35 @@ const SupervisorList = () => {
                                label: item.name,
                            })),
                        ];
-                    };
-                    const columnSelectOption = getColumnSelectOptions();
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                    }, [itemsList, loadingItemsList, errorItemsList]);
+
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={loadingItemsList ? "loading" : props.filterParameters.value}
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ row }) => {
+                    return row.original.item_fa;
                },
            },
            {
-                accessorKey: "sub_item_fa",
+                accessorKey: "sub_item",
                header: "موضوع مشاهده شده",
-                id: "sub_item_fa",
+                id: "sub_item",
                enableColumnFilter: true,
                datatype: "numeric",
                filterMode: "equals",
-                dependencyId: "item_fa",
+                dependencyId: "item",
                ColumnSelectComponent: (props) => {
                    const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(
                        props.dependencyFieldValue.value
                    );
-                    const getColumnSelectOptions = () => {
+                    const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
+
+                    const getColumnSelectOptions = useMemo(() => {
                        if (props.dependencyFieldValue.value === "") {
                            return [{ value: "empty", label: "ابتدا آیتم فعالیت را انتخاب کنید" }];
                        }
@@ -159,13 +202,33 @@ const SupervisorList = () => {
                        return [
                            { value: "", label: props.column.header },
                            ...subItemsList.map((item) => ({
-                                value: item.id,
+                                value: item.sub_item,
                                label: item.name,
                            })),
                        ];
-                    };
-                    const columnSelectOption = getColumnSelectOptions();
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                    }, [subItemsList, loadingSubItemsList, errorSubItemsList]);
+
+                    useEffect(() => {
+                        if (prevDependency === props.dependencyFieldValue.value) return;
+                        props.handleChange({ ...props.filterParameters, value: "" });
+                        setPrevDependency(props.dependencyFieldValue.value);
+                    }, [props.dependencyFieldValue.value]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue.value === ""
+                                    ? "empty"
+                                    : loadingSubItemsList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ row }) => {
+                    return row.original.sub_item_fa;
                },
            },
            {
@@ -173,6 +236,7 @@ const SupervisorList = () => {
                header: "مقدار", // Value
                id: "value",
                enableColumnFilter: false,
+                enableSorting: false,
                datatype: "text",
                filterMode: "equals",
                grow: false,
@@ -289,10 +353,12 @@ const SupervisorList = () => {
            {
                accessorKey: "rahdaran",
                header: "راهداران",
-                id: "rahdaran",
-                enableColumnFilter: false,
+                id: "rahdaran__code",
+                enableColumnFilter: true,
                enableSorting: false,
-                datatype: "array",
+                datatype: "text",
+                filterMode: "contains",
+                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                muiTableBodyCellProps: {
@@ -321,8 +387,7 @@ const SupervisorList = () => {
                id: "activity_date_time",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
@@ -332,8 +397,7 @@ const SupervisorList = () => {
                id: "created_at",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
@@ -355,9 +419,8 @@ const SupervisorList = () => {
                },
                Cell: ({ renderedCellValue, row }) => <>{row.original.status_fa}</>,
            },
-        ],
-        []
-    );
+        ];
+    }, []);

    return (
        <>
--- a/src/components/dashboard/roadItems/supervisor/Toolbar.jsx
+++ b/src/components/dashboard/roadItems/supervisor/Toolbar.jsx
@@ -1,10 +1,6 @@
 import PrintExcel from "./ExcelPrint";

 const Toolbar = ({ table, filterData }) => {
-    return (
-        <>
-            <PrintExcel table={table} filterData={filterData} />
-        </>
-    );
+    return <>{/*<PrintExcel table={table} filterData={filterData} />*/}</>;
 };
 export default Toolbar;
--- a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/CompeleteRequest.jsx
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/CompeleteRequest.jsx
@@ -140,7 +140,7 @@ const CompeleteRequest = ({ watch, isSubmitting, setValue, register }) => {
                            <Chip label="راهدار / راهداران حاضر در گشت" />
                        </Divider>
                        {watch("road_patrol_rahdaran_id")?.map((rahdar, index) => (
-                            <Box sx={{ display: "flex", alignItems: "center", my: 1 }}>
+                            <Box key={index} sx={{ display: "flex", alignItems: "center", my: 1 }}>
                                <Typography>نام و کد راهدار</Typography>
                                <Divider sx={{ flex: 1, mx: 2 }} />
                                <Typography>
--- a/src/components/dashboard/roadPatrols/operator/OperatorList.jsx
+++ b/src/components/dashboard/roadPatrols/operator/OperatorList.jsx
@@ -7,8 +7,8 @@ import { GET_ROAD_PATROL_OPERATOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
 import ReportForm from "./RowActions/ReportForm";
-import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
 import RahdaranDialog from "./RowActions/RahdaranForm";
+import MachinePerformanceForm from "./RowActions/MachinePerformanceForm";

 const OperatorList = () => {
    const columns = useMemo(
@@ -25,14 +25,13 @@ const OperatorList = () => {
                size: 100,
            },
            {
-                accessorKey: "cmms_machines",
-                header: "خودرو", // Car ID
-                id: "cmmsMachines__machine_code",
+                header: "عملکرد خودرو", // Car ID
                enableColumnFilter: true,
+                id: "cmmsMachines__machine_code",
                datatype: "text",
                filterMode: "contains",
-                enableSorting: false,
                columnFilterModeOptions: ["equals", "contains"],
+                enableSorting: false,
                grow: false,
                size: 100,
                muiTableBodyCellProps: {
@@ -45,23 +44,22 @@ const OperatorList = () => {
                    },
                },
                Cell: ({ renderedCellValue }) => {
-                    if (renderedCellValue) {
-                        return (
-                            <Stack alignItems={"center"} justifyContent={"center"}>
-                                <MachinesCodeDialog machinesLists={renderedCellValue} />
-                            </Stack>
-                        );
-                    }
-                    return <Typography variant="body2">کد خودرویی وجود ندارد</Typography>;
+                    return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <MachinePerformanceForm />
+                        </Stack>
+                    );
                },
            },
            {
                accessorKey: "rahdaran",
                header: "راهداران",
-                id: "rahdaran",
-                enableColumnFilter: false,
+                id: "rahdaran__code",
+                enableColumnFilter: true,
                enableSorting: false,
-                datatype: "array",
+                datatype: "text",
+                filterMode: "contains",
+                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                muiTableBodyCellProps: {
@@ -85,35 +83,32 @@ const OperatorList = () => {
                },
            },
            {
-                accessorFn: (row) => moment(row.start_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                accessorFn: (row) => moment(row.start_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
                header: "تاریخ شروع",
-                id: "start_date",
+                id: "start_time",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
            {
-                accessorFn: (row) => moment(row.end_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                accessorFn: (row) => moment(row.end_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
                header: "تاریخ پایان",
-                id: "end_date",
+                id: "end_time",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
            {
-                accessorFn: (row) => moment(row.register_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
                header: "تاریخ ثبت",
-                id: "register_date",
+                id: "created_at",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
--- a/src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/MachinePerformanceContent.jsx
+++ b/src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/MachinePerformanceContent.jsx
@@ -0,0 +1,76 @@
+import { Box, DialogContent, Stack } from "@mui/material";
+import React, { useEffect, useState, useRef } from "react";
+import { Marker, useMap } from "react-leaflet";
+import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
+import StopsInfo from "@/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo";
+import MapLayer from "@/core/components/MapLayer";
+const defaultIconSize = [35, 35];
+const MachinePerformanceContent = ({ machinesLists }) => {
+    const [selectedPoint, setSelectedPoint] = useState(null);
+    const mapRef = useRef(null);
+    const isFirstRender = useRef(true);
+    const createCustomIcon = (size, iconUrl) => {
+        return L.icon({
+            iconUrl: iconUrl,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    };
+    const MapWithBounds = () => {
+        const map = useMap();
+        useEffect(() => {
+            if (machinesLists.stopPoints.length > 0) {
+                const bounds = machinesLists.stopPoints.map((point) => [point.latitude, point.longitude]);
+                if (isFirstRender.current) {
+                    map.fitBounds(bounds, {
+                        padding: [50, 50],
+                    });
+                    isFirstRender.current = false;
+                } else if (mapRef.current) {
+                    mapRef.current.setView(map.getCenter(), map.getZoom());
+                }
+            }
+        }, [machinesLists.stopPoints, map]);
+        return null;
+    };
+    const handleMarkerClick = (point) => {
+        setSelectedPoint(point);
+    };
+
+    return (
+        <>
+            <DialogContent>
+                <Stack direction={"row"} spacing={2} justifyContent={"space-between"}>
+                    <StopsInfo
+                        selectedPoint={selectedPoint}
+                        staticData={{
+                            cmmsMachineCode: machinesLists.cmms_machine_code,
+                            fuelConsumption: machinesLists.fuelConsumption,
+                            mileage: machinesLists.mileage,
+                            accOnDuration: machinesLists.accOnDuration,
+                        }}
+                    />
+                    <Stack>
+                        <Box sx={{ width: "400px", height: "400px" }}>
+                            <MapLayer>
+                                <MapWithBounds />
+                                {machinesLists.stopPoints.map((point, index) => (
+                                    <Marker
+                                        key={index}
+                                        position={[point.latitude, point.longitude]}
+                                        icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
+                                        eventHandlers={{
+                                            click: () => handleMarkerClick(point),
+                                        }}
+                                    ></Marker>
+                                ))}
+                            </MapLayer>
+                        </Box>
+                    </Stack>
+                </Stack>
+            </DialogContent>
+        </>
+    );
+};
+export default MachinePerformanceContent;
--- a/src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo.jsx
+++ b/src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo.jsx
@@ -0,0 +1,125 @@
+import { Box, Chip, Divider, Grid, Typography } from "@mui/material";
+import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
+import PinDropIcon from "@mui/icons-material/PinDrop";
+import LocalGasStationIcon from "@mui/icons-material/LocalGasStation";
+import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
+
+const StopsInfo = ({ selectedPoint, staticData }) => {
+    return (
+        <Grid container spacing={3} direction="row" sx={{ justifyContent: "space-between", alignItems: "center" }}>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<DirectionsCarIcon />}
+                        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" }}>
+                    {staticData.cmmsMachineCode || ""}
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<LocalGasStationIcon />}
+                        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" }}>
+                    {staticData.fuelConsumption || ""} لیتر
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<DirectionsCarIcon />}
+                        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" }}>
+                    {staticData.mileage || ""} کیلومتر
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<AccessAlarmsIcon />}
+                        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" }}>
+                    {(staticData.accOnDuration / 60)?.toFixed(2) || ""} دقیقه
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<PinDropIcon />}
+                        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" }}>
+                    {selectedPoint ? selectedPoint.longitude : "نقطه مورد نظر را انتخاب کنید"}
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<PinDropIcon />}
+                        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" }}>
+                    {selectedPoint ? selectedPoint.latitude : "نقطه مورد نظر را انتخاب کنید"}
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<AccessAlarmsIcon />}
+                        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" }}>
+                    {selectedPoint ? `${selectedPoint.duration} ثانیه` : "نقطه مورد نظر را انتخاب کنید"}
+                </Typography>
+            </Grid>
+        </Grid>
+    );
+};
+export default StopsInfo;
--- a/src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/index.jsx
+++ b/src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/index.jsx
@@ -1,13 +1,40 @@
 import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
 import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
+import MachinePerformanceContent from "./MachinePerformanceContent";
 import { useState } from "react";
-import MachinesCodeContent from "./MachinesCodeContent";

-const MachinesCodeDialog = ({ machinesLists }) => {
+const MachinePerformanceForm = () => {
    const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
+    const machineData = {
+        cmms_machine_code: 245,
+        resultCode: 0,
+        mileage: 17645,
+        accOnDuration: 3599,
+        fuelConsumption: 6.1757503,
+        stopPoints: [
+            {
+                startDT: "2024-12-23T13:55:40",
+                duration: 114,
+                latitude: 37.521317,
+                longitude: 46.103584,
+            },
+            {
+                startDT: "2024-12-23T14:31:11",
+                duration: 14,
+                latitude: 37.566532,
+                longitude: 46.17688,
+            },
+            {
+                startDT: "2024-12-23T14:35:36",
+                duration: 55,
+                latitude: 37.569958,
+                longitude: 46.18166,
+            },
+        ],
+    };
    return (
        <>
-            <Tooltip title="کد خودرو">
+            <Tooltip title="عملکرد خودرو">
                <IconButton color="primary" onClick={() => setOpenMachinesCodeDialog(true)}>
                    <DirectionsCarIcon />
                </IconButton>
@@ -24,8 +51,8 @@ const MachinesCodeDialog = ({ machinesLists }) => {
                dir="rtl"
                maxWidth={"md"}
            >
-                <DialogTitle sx={{ fontSize: "large" }}>کد خودرو</DialogTitle>
-                <MachinesCodeContent machinesLists={machinesLists} />
+                <DialogTitle sx={{ fontSize: "large" }}>عملکرد خودرو</DialogTitle>
+                <MachinePerformanceContent machinesLists={machineData} />
                <DialogActions>
                    <Button
                        onClick={() => setOpenMachinesCodeDialog(false)}
@@ -40,4 +67,4 @@ const MachinesCodeDialog = ({ machinesLists }) => {
        </>
    );
 };
-export default MachinesCodeDialog;
+export default MachinePerformanceForm;
--- a/src/components/dashboard/roadPatrols/operator/Toolbar.jsx
+++ b/src/components/dashboard/roadPatrols/operator/Toolbar.jsx
@@ -6,7 +6,7 @@ const Toolbar = ({ table, filterData, mutate }) => {
    return (
        <Box sx={{ display: "flex", gap: 1 }}>
            <OperatorCreate table={table} mutate={mutate} />
-            <PrintExcel table={table} filterData={filterData} />
+            {/*<PrintExcel table={table} filterData={filterData} />*/}
        </Box>
    );
 };
--- a/src/components/dashboard/roadPatrols/reports/ExcelPrint/index.jsx
+++ b/src/components/dashboard/roadPatrols/reports/ExcelPrint/index.jsx
@@ -0,0 +1,55 @@
+import { Button, CircularProgress } 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";
+
+const PrintExcel = ({ table, filterData }) => {
+    const [loading, setLoading] = useState(false);
+    const requestServer = useRequest();
+    const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
+        if (filter) {
+            acc.push({ id: key, value: filter });
+        }
+        return acc;
+    }, []);
+
+    const filterParams = useMemo(() => {
+        const params = new URLSearchParams();
+        activeFilters.length > 0 &&
+            activeFilters.map((filter, index) => {
+                params.set(`${filter.id}`, filter.value);
+            });
+        return params;
+    }, [activeFilters]);
+
+    const clickHandler = () => {
+        // setLoading(true);
+        // requestServer(`${EXPORT_ROAD_PATROL_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 (
+        <Button
+            color="primary"
+            variant="contained"
+            disabled={loading}
+            sx={{ textTransform: "unset", alignSelf: "center" }}
+            startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
+            onClick={clickHandler}
+        >
+            خروجی اکسل
+        </Button>
+    );
+};
+export default PrintExcel;
--- a/src/components/dashboard/roadPatrols/reports/ReportLists.jsx
+++ b/src/components/dashboard/roadPatrols/reports/ReportLists.jsx
@@ -0,0 +1,209 @@
+"use client";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+import Toolbar from "./Toolbar";
+
+const ReportLists = ({ data }) => {
+    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: "tedad_mavarede_moshede_shode_adi",
+                        header: "عادی",
+                        id: "tedad_mavarede_moshede_shode_adi",
+                        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: "tedad_mavarede_moshede_shode_fori",
+                        header: "فوری",
+                        id: "tedad_mavarede_moshede_shode_fori",
+                        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: "tedad_mavarede_moshede_shode_ani",
+                        header: "آنی",
+                        id: "tedad_mavarede_moshede_shode_ani",
+                        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: "tedad_mavarede_peygiri_shode",
+                header: "اقدامات رسیدگی شده",
+                id: "tedad_mavarede_peygiri_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: "masafat_tey_shode",
+                header: "مجموع مسافت پیمایش شده",
+                id: "masafat_tey_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: "tedad_faliyat_sabt_shode",
+                header: "تعداد فعالیت صورت گرفته حین گشت",
+                id: "tedad_faliyat_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();
+                },
+            },
+        ];
+    }, []);
+
+    return (
+        <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+            <DataTableWithAuth
+                specialFilter={data.filters}
+                TableToolbar={Toolbar}
+                columns={columns}
+                data={data.data}
+                page_name={"roadPatrolReport"}
+                table_name={"roadPatrolReportList"}
+            />
+        </Box>
+    );
+};
+
+export default ReportLists;
--- a/src/components/dashboard/roadPatrols/reports/Search/FromDateController.jsx
+++ b/src/components/dashboard/roadPatrols/reports/Search/FromDateController.jsx
@@ -0,0 +1,27 @@
+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}
+                    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;
--- a/src/components/dashboard/roadPatrols/reports/Search/SearchReportField.jsx
+++ b/src/components/dashboard/roadPatrols/reports/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;
--- a/src/components/dashboard/roadPatrols/reports/Search/SelectProvince.jsx
+++ b/src/components/dashboard/roadPatrols/reports/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;
--- a/src/components/dashboard/roadPatrols/reports/Search/ToDateController.jsx
+++ b/src/components/dashboard/roadPatrols/reports/Search/ToDateController.jsx
@@ -0,0 +1,29 @@
+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}
+                    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;
--- a/src/components/dashboard/roadPatrols/reports/Search/index.jsx
+++ b/src/components/dashboard/roadPatrols/reports/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;
--- a/src/components/dashboard/roadPatrols/reports/Toolbar.jsx
+++ b/src/components/dashboard/roadPatrols/reports/Toolbar.jsx
@@ -0,0 +1,7 @@
+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;
--- a/src/components/dashboard/roadPatrols/reports/index.jsx
+++ b/src/components/dashboard/roadPatrols/reports/index.jsx
@@ -0,0 +1,122 @@
+"use client";
+import PageTitle from "@/core/components/PageTitle";
+import { LinearProgress, Stack } from "@mui/material";
+import SearchReportList from "./Search";
+import { useEffect, useState } from "react";
+import ReportLists from "./ReportLists";
+import useRequest from "@/lib/hooks/useRequest";
+import { GET_CITY_ACTIVITY_REPORT, GET_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
+import moment from "jalali-moment";
+import * as yup from "yup";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { useAuth } from "@/lib/contexts/auth";
+
+const ReportPage = () => {
+    const [data, setData] = useState(null);
+    const { data: userPermissions } = usePermissions();
+    const { user } = useAuth();
+    const requestServer = useRequest();
+    const hasProvincesPermission = userPermissions.includes("show-road-patrol-supervise-cartable");
+
+    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 onSearchSubmit = async (data) => {
+        const params = new URLSearchParams();
+        params.set("from_date", `${data.from_date}`);
+        params.set("date_to", `${data.date_to}`);
+        if (data.province_id === "-1") {
+            try {
+                const response = await requestServer(`${GET_PROVINCE_ACTIVITY_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) {}
+        } else {
+            try {
+                params.set("province_id", `${data.province_id}`);
+                const response = await requestServer(`${GET_CITY_ACTIVITY_REPORT}?${params}`);
+                const result = response.data.data;
+                const nationalReportForItem = result.activities.find((report) => report.edare_id === "-1");
+                const nationalReport = {
+                    ...nationalReportForItem,
+                    edare_name: "کل استان",
+                };
+                setData({
+                    data: [
+                        nationalReport,
+                        ...result.edarateShahri.map((edare) => {
+                            const filteredReports = result.activities.find((report) => report.edare_id == edare.id);
+                            return {
+                                edare_name: edare.name_fa,
+                                ...filteredReports,
+                            };
+                        }),
+                    ],
+                    filters: data,
+                });
+            } catch (e) {}
+        }
+    };
+
+    useEffect(() => {
+        onSearchSubmit(defaultValues);
+    }, []);
+
+    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 data={data} />}
+        </Stack>
+    );
+};
+export default ReportPage;
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/DeleteContent.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/DeleteContent.jsx
@@ -3,7 +3,13 @@ import useRequest from "@/lib/hooks/useRequest";
 import React, { useState } from "react";
 import { DELETE_ROAD_PATROL_SUPERVISOR } from "@/core/utils/routes";

-const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
+const DeleteContent = ({
+    rowId,
+    mutate,
+    setOpenDeleteDialog,
+    hasCompleteDeletePermission,
+    hasPartialDeletePermission,
+}) => {
    const requestServer = useRequest({ notificationSuccess: true });
    const [submittingPartial, setSubmittingPartial] = useState(false);
    const [submittingGeneral, setSubmittingGeneral] = useState(false);
@@ -49,41 +55,59 @@ const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
                        لطفاً نوع حذف مورد نظر را انتخاب کنید.
                    </Typography>
                    <List sx={{ listStyleType: "disc", pl: 1 }}>
-                        <ListItem
-                            sx={{
-                                display: "list-item",
-                                pl: 0,
-                                "&::marker": {
-                                    color: "warning.main",
-                                },
-                            }}
-                        >
-                            <Typography variant="body2">حذف جزئی : حذف گشت بدون اقدامات انجام شده.</Typography>
-                        </ListItem>
-                        <ListItem
-                            sx={{
-                                display: "list-item",
-                                pl: 0,
-                                "&::marker": {
-                                    color: "error.main",
-                                },
-                            }}
-                        >
-                            <Typography variant="body2">حذف کلی : حذف گشت با اقدامات انجام شده.</Typography>
-                        </ListItem>
+                        {hasPartialDeletePermission && (
+                            <ListItem
+                                sx={{
+                                    display: "list-item",
+                                    pl: 0,
+                                    "&::marker": {
+                                        color: "warning.main",
+                                    },
+                                }}
+                            >
+                                <Typography variant="body2">حذف جزئی : حذف گشت بدون اقدامات انجام شده.</Typography>
+                            </ListItem>
+                        )}
+                        {hasCompleteDeletePermission && (
+                            <ListItem
+                                sx={{
+                                    display: "list-item",
+                                    pl: 0,
+                                    "&::marker": {
+                                        color: "error.main",
+                                    },
+                                }}
+                            >
+                                <Typography variant="body2">حذف کلی : حذف گشت با اقدامات انجام شده.</Typography>
+                            </ListItem>
+                        )}
                    </List>
                </Stack>
            </DialogContent>
-            <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
+            <DialogActions sx={{ justifyContent: "flex-end", paddingBottom: 2, width: "100%" }}>
                <Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="primary">
                    بستن
                </Button>
-                <Button onClick={handlePartialDelete} variant="outlined" color="warning" disabled={submittingPartial}>
-                    {submittingPartial ? "درحال ارسال اطلاعات..." : "حذف جزئی"}
-                </Button>
-                <Button onClick={handleGeneralDelete} variant="contained" color="error" disabled={submittingGeneral}>
-                    {submittingGeneral ? "درحال ارسال اطلاعات..." : "حذف کلی"}
-                </Button>
+                {hasPartialDeletePermission && (
+                    <Button
+                        onClick={handlePartialDelete}
+                        variant="outlined"
+                        color="warning"
+                        disabled={submittingPartial}
+                    >
+                        {submittingPartial ? "درحال ارسال اطلاعات..." : "حذف جزئی"}
+                    </Button>
+                )}
+                {hasCompleteDeletePermission && (
+                    <Button
+                        onClick={handleGeneralDelete}
+                        variant="contained"
+                        color="error"
+                        disabled={submittingGeneral}
+                    >
+                        {submittingGeneral ? "درحال ارسال اطلاعات..." : "حذف کلی"}
+                    </Button>
+                )}
            </DialogActions>
        </>
    );
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/index.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import DeleteContent from "./DeleteContent";
-const DeleteForm = ({ rowId, mutate }) => {
+const DeleteForm = ({ rowId, mutate, hasCompleteDeletePermission, hasPartialDeletePermission }) => {
    const [openDeleteDialog, setOpenDeleteDialog] = useState(false);

    return (
@@ -24,7 +24,13 @@ const DeleteForm = ({ rowId, mutate }) => {
                maxWidth={"md"}
            >
                <DialogTitle>حذف گشت</DialogTitle>
-                <DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
+                <DeleteContent
+                    hasCompleteDeletePermission={hasCompleteDeletePermission}
+                    hasPartialDeletePermission={hasPartialDeletePermission}
+                    rowId={rowId}
+                    mutate={mutate}
+                    setOpenDeleteDialog={setOpenDeleteDialog}
+                />
            </Dialog>
        </>
    );
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/MachinePerformanceContent.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/MachinePerformanceContent.jsx
@@ -0,0 +1,76 @@
+import { Box, DialogContent, Stack } from "@mui/material";
+import React, { useEffect, useState, useRef } from "react";
+import { Marker, useMap } from "react-leaflet";
+import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
+import StopsInfo from "./StopsInfo";
+import MapLayer from "@/core/components/MapLayer";
+const defaultIconSize = [35, 35];
+const MachinePerformanceContent = ({ machinesLists }) => {
+    const [selectedPoint, setSelectedPoint] = useState(null);
+    const mapRef = useRef(null);
+    const isFirstRender = useRef(true);
+    const createCustomIcon = (size, iconUrl) => {
+        return L.icon({
+            iconUrl: iconUrl,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    };
+    const MapWithBounds = () => {
+        const map = useMap();
+        useEffect(() => {
+            if (machinesLists.stopPoints.length > 0) {
+                const bounds = machinesLists.stopPoints.map((point) => [point.latitude, point.longitude]);
+                if (isFirstRender.current) {
+                    map.fitBounds(bounds, {
+                        padding: [50, 50],
+                    });
+                    isFirstRender.current = false;
+                } else if (mapRef.current) {
+                    mapRef.current.setView(map.getCenter(), map.getZoom());
+                }
+            }
+        }, [machinesLists.stopPoints, map]);
+        return null;
+    };
+    const handleMarkerClick = (point) => {
+        setSelectedPoint(point);
+    };
+
+    return (
+        <>
+            <DialogContent>
+                <Stack direction={"row"} spacing={2} justifyContent={"space-between"}>
+                    <StopsInfo
+                        selectedPoint={selectedPoint}
+                        staticData={{
+                            cmmsMachineCode: machinesLists.cmms_machine_code,
+                            fuelConsumption: machinesLists.fuelConsumption,
+                            mileage: machinesLists.mileage,
+                            accOnDuration: machinesLists.accOnDuration,
+                        }}
+                    />
+                    <Stack>
+                        <Box sx={{ width: "400px", height: "400px" }}>
+                            <MapLayer>
+                                <MapWithBounds />
+                                {machinesLists.stopPoints.map((point, index) => (
+                                    <Marker
+                                        key={index}
+                                        position={[point.latitude, point.longitude]}
+                                        icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
+                                        eventHandlers={{
+                                            click: () => handleMarkerClick(point),
+                                        }}
+                                    ></Marker>
+                                ))}
+                            </MapLayer>
+                        </Box>
+                    </Stack>
+                </Stack>
+            </DialogContent>
+        </>
+    );
+};
+export default MachinePerformanceContent;
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/StopsInfo.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/StopsInfo.jsx
@@ -0,0 +1,129 @@
+import { Box, Chip, Divider, Grid, Typography } from "@mui/material";
+import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
+import PinDropIcon from "@mui/icons-material/PinDrop";
+import LocalGasStationIcon from "@mui/icons-material/LocalGasStation";
+import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
+const StopsInfo = ({ selectedPoint, staticData }) => {
+    return (
+        <Grid container spacing={3} direction="row" sx={{ justifyContent: "space-between", alignItems: "center" }}>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<DirectionsCarIcon />}
+                        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" }}>
+                    {staticData.cmmsMachineCode || ""}
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<LocalGasStationIcon />}
+                        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" }}>
+                    {staticData.fuelConsumption || ""} لیتر
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<DirectionsCarIcon />}
+                        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" }}>
+                    {staticData.mileage || ""} کیلومتر
+                </Typography>
+            </Grid>
+            <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                    <Chip
+                        icon={<AccessAlarmsIcon />}
+                        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" }}>
+                    {(staticData.accOnDuration / 60)?.toFixed(2) || ""} دقیقه
+                </Typography>
+            </Grid>
+
+            {selectedPoint && (
+                <>
+                    <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                            <Chip
+                                icon={<PinDropIcon />}
+                                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" }}>
+                            {selectedPoint.longitude || ""}
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                            <Chip
+                                icon={<PinDropIcon />}
+                                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" }}>
+                            {selectedPoint.latitude || ""}
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                            <Chip
+                                icon={<AccessAlarmsIcon />}
+                                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" }}>
+                            {selectedPoint.duration || ""} ثانیه
+                        </Typography>
+                    </Grid>
+                </>
+            )}
+        </Grid>
+    );
+};
+export default StopsInfo;
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/index.jsx
@@ -0,0 +1,70 @@
+import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
+import MachinePerformanceContent from "./MachinePerformanceContent";
+import { useState } from "react";
+
+const MachinePerformanceForm = () => {
+    const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
+    const machineData = {
+        cmms_machine_code: 245,
+        resultCode: 0,
+        mileage: 17645,
+        accOnDuration: 3599,
+        fuelConsumption: 6.1757503,
+        stopPoints: [
+            {
+                startDT: "2024-12-23T13:55:40",
+                duration: 114,
+                latitude: 37.521317,
+                longitude: 46.103584,
+            },
+            {
+                startDT: "2024-12-23T14:31:11",
+                duration: 14,
+                latitude: 37.566532,
+                longitude: 46.17688,
+            },
+            {
+                startDT: "2024-12-23T14:35:36",
+                duration: 55,
+                latitude: 37.569958,
+                longitude: 46.18166,
+            },
+        ],
+    };
+    return (
+        <>
+            <Tooltip title="عملکرد خودرو">
+                <IconButton color="primary" onClick={() => setOpenMachinesCodeDialog(true)}>
+                    <DirectionsCarIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openMachinesCodeDialog}
+                onClose={() => setOpenMachinesCodeDialog(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>
+                <MachinePerformanceContent machinesLists={machineData} />
+                <DialogActions>
+                    <Button
+                        onClick={() => setOpenMachinesCodeDialog(false)}
+                        variant="outlined"
+                        color="secondary"
+                        autoFocus
+                    >
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default MachinePerformanceForm;
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/MachinesCodeForm/MachinesCodeContent.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/MachinesCodeForm/MachinesCodeContent.jsx
@@ -1,55 +0,0 @@
-import { DialogContent, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
-import ShowPlak from "@/core/components/ShowPlak";
-
-const MachinesCodeContent = ({ machinesLists }) => {
-    return (
-        <>
-            <DialogContent>
-                <Paper
-                    elevation={0}
-                    sx={{
-                        width: "100%",
-                        overflow: "hidden",
-                        "*::-webkit-scrollbar": {
-                            width: "0.5em",
-                        },
-                        "*::-webkit-scrollbar-thumb": {
-                            backgroundColor: "primary.main",
-                        },
-                    }}
-                >
-                    <TableContainer sx={{ maxHeight: 600 }}>
-                        <Table stickyHeader sx={{ minWidth: 800 }}>
-                            <TableHead>
-                                <TableRow>
-                                    <TableCell>کد ماشین</TableCell>
-                                    <TableCell>نام خودرو</TableCell>
-                                    <TableCell>پلاک</TableCell>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {machinesLists.map((machine) => {
-                                    return (
-                                        <TableRow
-                                            key={machine.id}
-                                            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-                                        >
-                                            <TableCell>{machine.machine_code}</TableCell>
-                                            <TableCell>{machine.car_name}</TableCell>
-                                            <TableCell>
-                                                {machine.plak_number ? (
-                                                    <ShowPlak plak_number={machine.plak_number} />
-                                                ) : null}
-                                            </TableCell>
-                                        </TableRow>
-                                    );
-                                })}
-                            </TableBody>
-                        </Table>
-                    </TableContainer>
-                </Paper>
-            </DialogContent>
-        </>
-    );
-};
-export default MachinesCodeContent;
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/OfficerDescription/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/OfficerDescription/index.jsx
@@ -37,7 +37,7 @@ const OfficerDescriptionForm = ({ description }) => {
                    </IconButton>
                </DialogTitle>
                <DialogContent>
-                    <Card sx={{ padding: 2, boxShadow: 3, borderRadius: 2 }}>
+                    <Card elevation={0}>
                        <CardContent>
                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
                        </CardContent>
--- a/src/components/dashboard/roadPatrols/supervisor/RowActions/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/RowActions/index.jsx
@@ -1,10 +1,21 @@
 import { Box } from "@mui/material";
 import DeleteForm from "./DeleteForm";
+import { usePermissions } from "@/lib/hooks/usePermissions";

 const RowActions = ({ row, mutate }) => {
+    const { data: userPermissions } = usePermissions();
+    const hasPartialDeletePermission = userPermissions.includes("partial-delete-road-patrol");
+    const hasCompleteDeletePermission = userPermissions.includes("complete-delete-road-patrol");
    return (
        <Box sx={{ display: "flex", gap: 1 }}>
-            <DeleteForm rowId={row.getValue("id")} mutate={mutate} />
+            {hasPartialDeletePermission | hasCompleteDeletePermission && (
+                <DeleteForm
+                    hasPartialDeletePermission={hasPartialDeletePermission}
+                    hasCompleteDeletePermission={hasCompleteDeletePermission}
+                    rowId={row.getValue("id")}
+                    mutate={mutate}
+                />
+            )}
        </Box>
    );
 };
--- a/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
@@ -1,6 +1,6 @@
 "use client";
-import { useMemo } from "react";
-import {Box, Stack, Typography} from "@mui/material";
+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_ROAD_PATROL_SUPERVISOR_LIST } from "@/core/utils/routes";
@@ -11,12 +11,53 @@ import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsT
 import useEdaratLists from "@/lib/hooks/useEdaratLists";
 import OfficerDescriptionForm from "./RowActions/OfficerDescription";
 import ReportForm from "./RowActions/ReportForm";
-import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
 import RahdaranDialog from "./RowActions/RahdaranForm";
+import MachinePerformanceForm from "./RowActions/MachinePerformanceForm";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { useAuth } from "@/lib/contexts/auth";

-const OperatorList = () => {
-    const columns = useMemo(
-        () => [
+const SupervisorList = () => {
+    const { data: userPermissions } = usePermissions();
+    const hasCountryPermission = userPermissions.includes("show-road-patrol-supervise-cartable");
+    const { user } = useAuth();
+    const columns = useMemo(() => {
+        const dynamicColumns = {
+            accessorKey: "province_id",
+            header: "استان", // Province
+            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: props.column.header },
+                        ...provinces.map((province) => ({
+                            value: province.id,
+                            label: province.name_fa,
+                        })),
+                    ];
+                }, [provinces, errorProvinces, loadingProvinces]);
+                return (
+                    <CustomSelectByDependency
+                        {...props}
+                        value={loadingProvinces ? "loading" : props.filterParameters.value}
+                        columnSelectOption={getColumnSelectOptions}
+                    />
+                );
+            },
+            Cell: ({ renderedCellValue, row }) => <>{row.original.province_fa}</>,
+        };
+        return [
            {
                accessorKey: "id",
                header: "کد یکتا",
@@ -28,35 +69,7 @@ const OperatorList = () => {
                grow: false,
                size: 100,
            },
-            {
-                accessorKey: "province_id",
-                header: "استان",
-                id: "province_id",
-                enableColumnFilter: true,
-                datatype: "numeric",
-                filterMode: "equals",
-                ColumnSelectComponent: (props) => {
-                    const { provinces, errorProvinces, loadingProvinces } = useProvinces();
-                    const getColumnSelectOptions = () => {
-                        if (loadingProvinces) {
-                            return [{ value: "loading", label: "در حال بارگذاری..." }];
-                        }
-                        if (errorProvinces) {
-                            return [{ value: "error", label: "خطا در بارگذاری" }];
-                        }
-                        return [
-                            { value: "", label: props.column.header },
-                            ...provinces.map((province) => ({
-                                value: province.id,
-                                label: province.name_fa,
-                            })),
-                        ];
-                    };
-                    const columnSelectOption = getColumnSelectOptions();
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
-                },
-                Cell: ({ renderedCellValue, row }) => <>{row.original.province_fa}</>,
-            },
+            ...(hasCountryPermission ? [dynamicColumns] : []),
            {
                accessorKey: "edare_id",
                header: "اداره",
@@ -64,15 +77,19 @@ const OperatorList = () => {
                enableColumnFilter: true,
                datatype: "numeric",
                filterMode: "equals",
-                dependencyId: "province_id",
+                dependencyId: hasCountryPermission ? "province_id" : null,
                grow: false,
                size: 120,
                ColumnSelectComponent: (props) => {
                    const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
-                        props.dependencyFieldValue.value
+                        hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
                    );
-                    const getColumnSelectOptions = () => {
-                        if (props.dependencyFieldValue.value === "") {
+                    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) {
@@ -88,21 +105,37 @@ const OperatorList = () => {
                                label: edare.name_fa,
                            })),
                        ];
-                    };
-                    const columnSelectOption = getColumnSelectOptions();
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                    }, [edaratList, loadingEdaratList, errorEdaratList]);
+                    useEffect(() => {
+                        if (hasCountryPermission) return;
+                        if (prevDependency === props.dependencyFieldValue?.value) return;
+                        props.handleChange({ ...props.filterParameters, value: "" });
+                        setPrevDependency(props.dependencyFieldValue?.value);
+                    }, [props.dependencyFieldValue?.value, hasCountryPermission]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue?.value === ""
+                                    ? "empty"
+                                    : loadingEdaratList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
                },
                Cell: ({ renderedCellValue, row }) => <>{row.original.edare_name}</>,
            },
            {
-                accessorKey: "cmms_machines",
-                header: "خودرو", // Car ID
-                id: "cmmsMachines__machine_code",
+                header: "عملکرد خودرو",
                enableColumnFilter: true,
+                id: "cmmsMachines__machine_code",
                datatype: "text",
                filterMode: "contains",
-                enableSorting: false,
                columnFilterModeOptions: ["equals", "contains"],
+                enableSorting: false,
                grow: false,
                size: 100,
                muiTableBodyCellProps: {
@@ -114,24 +147,21 @@ const OperatorList = () => {
                        },
                    },
                },
-                Cell: ({ renderedCellValue }) => {
-                    if (renderedCellValue) {
-                        return (
-                            <Stack alignItems={"center"} justifyContent={"center"}>
-                                <MachinesCodeDialog machinesLists={renderedCellValue} />
-                            </Stack>
-                        );
-                    }
-                    return <Typography variant="body2">کد خودرویی وجود ندارد</Typography>;
-                },
+                Cell: () => (
+                    <Stack alignItems={"center"} justifyContent={"center"}>
+                        <MachinePerformanceForm />
+                    </Stack>
+                ),
            },
            {
                accessorKey: "rahdaran",
                header: "راهداران",
-                id: "rahdaran",
-                enableColumnFilter: false,
+                id: "rahdaran__code",
+                enableColumnFilter: true,
                enableSorting: false,
-                datatype: "array",
+                datatype: "text",
+                filterMode: "contains",
+                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                muiTableBodyCellProps: {
@@ -143,47 +173,42 @@ const OperatorList = () => {
                        },
                    },
                },
-                Cell: ({ renderedCellValue }) => {
-                    if (renderedCellValue) {
-                        return (
-                            <Stack alignItems={"center"} justifyContent={"center"}>
-                                <RahdaranDialog rahdarLists={renderedCellValue} />
-                            </Stack>
-                        );
-                    }
-                    return <Typography variant="body2">بدون شخص</Typography>;
-                },
+                Cell: ({ renderedCellValue }) =>
+                    renderedCellValue ? (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <RahdaranDialog rahdarLists={renderedCellValue} />
+                        </Stack>
+                    ) : (
+                        <Typography variant="body2">بدون شخص</Typography>
+                    ),
            },
            {
-                accessorFn: (row) => moment(row.start_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                accessorFn: (row) => moment(row.start_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
                header: "تاریخ شروع",
-                id: "start_date",
+                id: "start_time",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
            {
-                accessorFn: (row) => moment(row.end_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                accessorFn: (row) => moment(row.end_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
                header: "تاریخ پایان",
-                id: "end_date",
+                id: "end_time",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
            {
-                accessorFn: (row) => moment(row.register_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
                header: "تاریخ ثبت",
-                id: "register_date",
+                id: "created_at",
                enableColumnFilter: true,
                datatype: "date",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                filterMode: "between",
                grow: false,
                size: 100,
            },
@@ -204,13 +229,11 @@ const OperatorList = () => {
                        },
                    },
                },
-                Cell: ({ renderedCellValue }) => {
-                    return (
-                        <Stack alignItems={"center"} justifyContent={"center"}>
-                            <OfficerDescriptionForm description={renderedCellValue} />
-                        </Stack>
-                    );
-                },
+                Cell: ({ renderedCellValue }) => (
+                    <Stack alignItems={"center"} justifyContent={"center"}>
+                        <OfficerDescriptionForm description={renderedCellValue} />
+                    </Stack>
+                ),
            },
            {
                header: "گزارش مامور",
@@ -227,17 +250,14 @@ const OperatorList = () => {
                        },
                    },
                },
-                Cell: ({ renderedCellValue, row }) => {
-                    return (
-                        <Stack alignItems={"center"} justifyContent={"center"}>
-                            <ReportForm rowId={row.getValue("id")} />
-                        </Stack>
-                    );
-                },
+                Cell: ({ row }) => (
+                    <Stack alignItems={"center"} justifyContent={"center"}>
+                        <ReportForm rowId={row.getValue("id")} />
+                    </Stack>
+                ),
            },
-        ],
-        []
-    );
+        ];
+    }, []);

    return (
        <>
@@ -258,4 +278,4 @@ const OperatorList = () => {
        </>
    );
 };
-export default OperatorList;
+export default SupervisorList;
--- a/src/components/dashboard/roadPatrols/supervisor/Toolbar.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/Toolbar.jsx
@@ -1,10 +1,6 @@
 import PrintExcel from "./ExcelPrint";

 const Toolbar = ({ table, filterData }) => {
-    return (
-        <>
-            <PrintExcel table={table} filterData={filterData} />
-        </>
-    );
+    return <>{/*<PrintExcel table={table} filterData={filterData} />*/}</>;
 };
 export default Toolbar;
--- a/src/components/dashboard/roadPatrols/supervisor/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/index.jsx
@@ -1,13 +1,13 @@
 "use client";
 import PageTitle from "@/core/components/PageTitle";
 import { Stack } from "@mui/material";
-import SuperviserList from "./SupervisorList";
+import SupervisorList from "./SupervisorList";

 const SupervisorPage = () => {
    return (
        <Stack spacing={1}>
            <PageTitle title={"ارزیابی"} />
-            <SuperviserList />
+            <SupervisorList />
        </Stack>
    );
 };
--- a/src/core/components/ActivityCodeLog.jsx
+++ b/src/core/components/ActivityCodeLog.jsx
@@ -3,6 +3,7 @@
 import { useEffect, useState, memo } from "react";
 import useRequest from "@/lib/hooks/useRequest";
 import { ACTIVITY_LOG } from "@/core/utils/routes";
+import NumberField from "@/core/components/NumberField";

 const ActivityCodeLog = memo(({ activity_code }) => {
    const requestServer = useRequest({ notificationShow: false });
@@ -32,5 +33,6 @@ const ActivityCodeLog = memo(({ activity_code }) => {

    return null;
 });
+ActivityCodeLog.displayName = "ActivityCodeLog";

 export default ActivityCodeLog;
--- a/src/core/components/CarCode.jsx
+++ b/src/core/components/CarCode.jsx
@@ -77,10 +77,14 @@ const CarCode = ({ carCode, setCarCode, inputValueDefault = "", error, multiple
            renderInput={(params) => (
                <TextField
                    {...params}
-                    label="کد خودرو"
+                    label={multiple ? "خودرو ها" : "خودرو"}
                    fullWidth
+                    placeholder={multiple ? "کد خودرو ها را وارد کنید" : "کد خودرو را وارد کنید"}
                    error={!!error}
                    helperText={error?.message}
+                    InputLabelProps={{
+                        shrink: true,
+                    }}
                    InputProps={{
                        ...params.InputProps,
                        endAdornment: (
--- a/src/core/components/DataTable/Main.js
+++ b/src/core/components/DataTable/Main.js
@@ -3,7 +3,7 @@ import { useMaterialReactTable } from "material-react-table";
 import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
 import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
 import useDataTable from "@/lib/hooks/useDataTable";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import useRequest from "@/lib/hooks/useRequest";
 import useSWR from "swr";
 import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
@@ -33,7 +33,7 @@ const DataTable_Main = (props) => {
        setSortData(event);
    };

-    const fetchUrl = useMemo(() => {
+    const fetchUrl = useCallback(() => {
        const params = new URLSearchParams();
        params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
        params.set("size", pagination.pageSize);
@@ -76,7 +76,7 @@ const DataTable_Main = (props) => {
        }
    };

-    const { data, isValidating, mutate } = useSWR(fetchUrl, fetcher, {
+    const { data, isValidating, mutate } = useSWR(props.data ? "" : fetchUrl(), fetcher, {
        revalidateIfStale: true,
        revalidateOnFocus: false,
        revalidateOnReconnect: true,
@@ -129,7 +129,11 @@ const DataTable_Main = (props) => {
        onSortingChange: onSortingChange,
        rowCount: totalRowCount,
        renderTopToolbarCustomActions: ({ table }) => (
-            <>{TableToolbar && <TableToolbar table={table} mutate={mutate} filterData={filterData} />}</>
+            <>
+                {TableToolbar && (
+                    <TableToolbar table={table} mutate={mutate} filterData={specialFilter || filterData} />
+                )}
+            </>
        ),
        renderRowActions: ({ row }) => <RowActions row={row} mutate={mutate} />,
        ...props,
@@ -146,6 +150,7 @@ const DataTable_Main = (props) => {
            user_id={user_id}
            page_name={page_name}
            table_name={table_name}
+            special_data={props.data}
        />
    );
 };
--- a/src/core/components/DataTable/filter/FilterBody.jsx
+++ b/src/core/components/DataTable/filter/FilterBody.jsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import * as Yup from "yup";
 import FilterBodyController from "./FilterBodyController";
+import FilterBodyControllerWithDependency from "@/core/components/DataTable/filter/FilterBodyControllerWithDependency";

 const ScrollBox = styled(Box)({
    flexGrow: 1,
@@ -74,7 +75,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
    } = useForm({
        defaultValues: filterData,
        resolver: yupResolver(validationSchema),
-        mode: "onChange",
+        mode: "onBlur",
    });

    const onSubmit = (data) => {
@@ -93,9 +94,17 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
                <ScrollBox>
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <Box sx={{ px: 1, py: 2 }}>
-                            {columns.map(
-                                (column) =>
-                                    column.enableColumnFilter && (
+                            {columns.map((column) =>
+                                column.enableColumnFilter ? (
+                                    column.dependencyId ? (
+                                        <FilterBodyControllerWithDependency
+                                            key={column.id}
+                                            column={column}
+                                            control={control}
+                                            errors={errors}
+                                            reset={reset}
+                                        />
+                                    ) : (
                                        <FilterBodyController
                                            key={column.id}
                                            column={column}
@@ -104,6 +113,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
                                            reset={reset}
                                        />
                                    )
+                                ) : null
                            )}
                        </Box>
                        <Box
--- a/src/core/components/DataTable/filter/FilterBodyController.jsx
+++ b/src/core/components/DataTable/filter/FilterBodyController.jsx
@@ -2,23 +2,23 @@ import { Controller, useWatch } from "react-hook-form";
 import FilterBodyField from "./FilterBodyField";

 const FilterBodyController = ({ column, control, reset, errors }) => {
-    const dependencyField = useWatch({ control, name: column.dependencyId });
-
    return (
        <Controller
            name={`${column.id}`}
            control={control}
-            render={({ field: { value, onBlur, onChange } }) => (
-                <FilterBodyField
-                    column={column}
-                    filterParameters={value}
-                    handleChange={onChange}
-                    handleBlur={onBlur}
-                    dependencyFieldValue={column.dependencyId ? dependencyField : null}
-                    resetForm={() => reset()}
-                    errors={errors}
-                />
-            )}
+            render={({ field: { value, name, onBlur, onChange } }) => {
+                return (
+                    <FilterBodyField
+                        column={column}
+                        filterParameters={value}
+                        handleChange={onChange}
+                        handleBlur={onBlur}
+                        dependencyFieldValue={null}
+                        resetForm={() => reset()}
+                        errors={errors}
+                    />
+                );
+            }}
        />
    );
 };
--- a/src/core/components/DataTable/filter/FilterBodyControllerWithDependency.jsx
+++ b/src/core/components/DataTable/filter/FilterBodyControllerWithDependency.jsx
@@ -0,0 +1,27 @@
+import { Controller, useWatch } from "react-hook-form";
+import FilterBodyField from "./FilterBodyField";
+
+const FilterBodyControllerWithDependency = ({ column, control, reset, errors }) => {
+    const dependencyField = useWatch({ control, name: column.dependencyId });
+
+    return (
+        <Controller
+            name={`${column.id}`}
+            control={control}
+            render={({ field: { value, name, onBlur, onChange } }) => {
+                return (
+                    <FilterBodyField
+                        column={column}
+                        filterParameters={value}
+                        handleChange={onChange}
+                        handleBlur={onBlur}
+                        dependencyFieldValue={dependencyField}
+                        resetForm={() => reset()}
+                        errors={errors}
+                    />
+                );
+            }}
+        />
+    );
+};
+export default FilterBodyControllerWithDependency;
--- a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
@@ -8,6 +8,7 @@ function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslat
    return (
        <Box sx={{ display: "flex", gap: 1 }}>
            <MuiDatePicker
+                label={column.header}
                name={`${column.id}.value[0]`}
                value={filterParameters.value[0]}
                setFieldValue={(name, formattedDate) => {
@@ -22,6 +23,7 @@ function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslat
                }
            />
            <MuiDatePicker
+                label={column.header}
                name={`${column.id}.value[1]`}
                value={filterParameters.value[1]}
                setFieldValue={(name, formattedDate) => {
--- a/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
@@ -6,7 +6,7 @@ import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import moment from "jalali-moment";

-function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
+function MuiDatePicker({ label, value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
    return (
        <Box sx={{ display: "flex", flexDirection: "column", my: 1 }}>
            <LocalizationProvider
@@ -17,6 +17,7 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
                    value={value ? new Date(value) : null}
                    sx={{ width: "100%" }}
                    id={name}
+                    label={label}
                    name={name}
                    closeOnSelect={true}
                    aria-describedby="component-helper-text"
@@ -53,6 +54,9 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
                                    </InputAdornment>
                                ),
                            },
+                            InputLabelProps: {
+                                shrink: true,
+                            },
                        },
                    }}
                />
--- a/src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx
@@ -6,24 +6,11 @@ import { useCallback, useEffect } from "react";
 function CustomSelectByDependency({
    column,
    filterParameters,
+    value,
    defaultFilterTranslation,
    handleChange,
    columnSelectOption,
 }) {
-    const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
-
-    const handleInvalidValue = useCallback(() => {
-        if (!isValidValue && filterParameters.value !== "") {
-            handleChange({ ...filterParameters, value: columnSelectOption[0]?.value || "" });
-        }
-    }, [isValidValue, filterParameters, handleChange, columnSelectOption]);
-
-    useEffect(() => {
-        handleInvalidValue();
-    }, [handleInvalidValue]);
-
-    const selectedValue = isValidValue ? filterParameters.value : columnSelectOption[0]?.value || "";
-
    return (
        <FormControl fullWidth sx={{ marginY: 1 }}>
            <InputLabel id={`label${column.id}`}>{column.header}</InputLabel>
@@ -31,7 +18,7 @@ function CustomSelectByDependency({
                labelId={`label${column.id}`}
                id={column.id}
                name={`${column.id}.value`}
-                value={selectedValue}
+                value={value}
                input={<OutlinedInput label={column.header} />}
                onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
            >
--- a/src/core/components/DataTable/table/Paper.js
+++ b/src/core/components/DataTable/table/Paper.js
@@ -86,6 +86,7 @@ const DataTable_Paper = ({
                        page_name={page_name}
                        table_name={table_name}
                        table_title={table_title}
+                        {...paperProps}
                    />
                ))}
            <DataTable_TableContainer table={table} />
--- a/src/core/components/DataTable/toolbar/TopToolbar.js
+++ b/src/core/components/DataTable/toolbar/TopToolbar.js
@@ -17,6 +17,7 @@ const DataTable_TopToolbar = ({
    page_name,
    table_name,
    table_title,
+    special_data,
 }) => {
    const {
        getState,
@@ -96,8 +97,12 @@ const DataTable_TopToolbar = ({
                            order: 3,
                        }}
                    >
-                        <ResetStorage user_id={user_id} page_name={page_name} table_name={table_name} />
-                        <UpdateTable mutate={mutate} />
+                        {!special_data && (
+                            <>
+                                <ResetStorage user_id={user_id} page_name={page_name} table_name={table_name} />
+                                <UpdateTable mutate={mutate} />
+                            </>
+                        )}
                        <HideColumn
                            columns={table.options.columns}
                            user_id={user_id}
--- a/src/core/components/MapInfoTwoMarker.jsx
+++ b/src/core/components/MapInfoTwoMarker.jsx
@@ -111,7 +111,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                            setStartPosition({ lat: center.lat, lng: center.lng });
                            setIsStartLocked(true);
                            setStartIconColor("#1CAC66");
-                            map.panBy([25, 25])
+                            map.panBy([25, 25]);
                        }
                    },
                }}
@@ -183,13 +183,10 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                                    setEndPosition({ lat: center.lat, lng: center.lng });
                                    setIsEndLocked(true);
                                    setEndIconColor("#D13131");
-                                    map.fitBounds(
-                                        [
-                                            startPosition,
-                                            map.getCenter(),
-                                        ],
-                                        { paddingTopLeft: [16, 16], paddingBottomRight: [16, 16] }
-                                    );
+                                    map.fitBounds([startPosition, map.getCenter()], {
+                                        paddingTopLeft: [16, 16],
+                                        paddingBottomRight: [16, 16],
+                                    });
                                }
                            },
                        }}
--- a/src/core/components/MuiDatePicker.jsx
+++ b/src/core/components/MuiDatePicker.jsx
@@ -6,7 +6,7 @@ import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import moment from "jalali-moment";

-function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
+function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error, label }) {
    return (
        <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
            <LocalizationProvider
@@ -20,7 +20,7 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
                    name={name}
                    closeOnSelect
                    disableFuture
-                    label={helperText}
+                    label={label}
                    aria-describedby="component-helper-text"
                    onChange={(value) => {
                        const date = new Date(value);
@@ -34,6 +34,9 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
                            error: error,
                            size: "small",
                            placeholder: placeholder,
+                            InputLabelProps: {
+                                shrink: true,
+                            },
                            InputProps: {
                                endAdornment: (
                                    <InputAdornment position="end">
--- a/src/core/components/MuiTimePicker.jsx
+++ b/src/core/components/MuiTimePicker.jsx
@@ -1,16 +1,16 @@
 import React from "react";
-import { LocalizationProvider, MobileTimePicker } from "@mui/x-date-pickers";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
 import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
 import { faIR } from "@mui/x-date-pickers/locales";
 import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
-import { parseISO, format } from "date-fns";

-function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperText, placeholder, error }) {
+function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperText, placeholder, error, label }) {
    // Ensure value, minTime, maxTime are Date objects
-    const parsedValue = value ? (typeof value === "string" ? parseISO(value) : value) : null;
-    const parsedMinTime = minTime ? (typeof minTime === "string" ? parseISO(minTime) : minTime) : null;
-    const parsedMaxTime = maxTime && (typeof maxTime === "string" ? parseISO(maxTime) : null);
+    const parsedValue = value || null;
+    const parsedMinTime = minTime || null;
+    const parsedMaxTime = maxTime || null;

    return (
        <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
@@ -23,14 +23,13 @@ function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperTex
                    sx={{ width: "100%" }}
                    id={name}
                    closeOnSelect
-                    label={helperText ? helperText : placeholder}
+                    label={label}
                    ampm={false}
                    timeSteps={{ hours: 1, minutes: 5 }}
                    views={["hours", "minutes"]}
                    name={name}
                    onChange={(newValue) => {
-                        const formattedTime = newValue ? format(new Date(newValue), "HH:mm") : "";
-                        setFieldValue(name, formattedTime);
+                        setFieldValue(name, newValue);
                    }}
                    minTime={parsedMinTime}
                    maxTime={parsedMaxTime}
@@ -39,6 +38,9 @@ function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperTex
                            placeholder: placeholder,
                            size: "small",
                            error: error,
+                            InputLabelProps: {
+                                shrink: true,
+                            },
                            InputProps: {
                                endAdornment: (
                                    <InputAdornment position="end">
--- a/src/core/components/RahdarCode.jsx
+++ b/src/core/components/RahdarCode.jsx
@@ -72,10 +72,14 @@ const RahdarCode = ({ rahdarsCode, setRahdarsCode, error, multiple = true }) =>
            renderInput={(params) => (
                <TextField
                    {...params}
-                    label="کد راهداران"
+                    label={multiple ? "راهداران" : "راهدار"}
                    fullWidth
+                    placeholder={multiple ? "کد راهداران را وارد کنید" : "کد راهدار را وارد کنید"}
                    error={!!error}
                    helperText={error?.message}
+                    InputLabelProps={{
+                        shrink: true,
+                    }}
                    InputProps={{
                        ...params.InputProps,
                        endAdornment: (
--- a/src/core/components/UploadSystem.jsx
+++ b/src/core/components/UploadSystem.jsx
@@ -11,7 +11,7 @@ const UploadSystem = ({ selectedImage, handleUploadChange, imageSize, fileType,
    };

    return (
-        <Box sx={{ width: "100%", my: 1 }}>
+        <Box sx={{ width: "100%" }}>
            {showAddIcon ? (
                <Box
                    sx={{
@@ -19,8 +19,9 @@ const UploadSystem = ({ selectedImage, handleUploadChange, imageSize, fileType,
                        flexDirection: "column",
                        alignItems: "center",
                        justifyContent: "center",
-                        border: "1px solid #b3b3b3",
-                        borderRadius: "10px",
+                        border: 1,
+                        borderColor: "divider",
+                        borderRadius: 2,
                        cursor: "pointer",
                        padding: "5px",
                        height: imageSize[1],
--- a/src/core/utils/pageMenu.js
+++ b/src/core/utils/pageMenu.js
@@ -148,13 +148,32 @@ export const pageMenu = [
            {
                id: "roadItemManagmentReport",
                label: "گزارش ها",
-                type: "page",
-                route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/report",
+                type: "menu",
                icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
-                permissions: [
-                    "show-road-item-supervise-cartable",
-                    "show-road-item-supervise-cartable-province",
-                    "create-road-item",
+                hasSubitems: true,
+                Subitems: [
+                    {
+                        id: "roadItemManagmentReportProvince",
+                        label: "تعداد فعالیت ها به تفکیک ایتم",
+                        type: "page",
+                        route: "/dashboard/road-items/reports/items-report",
+                        permissions: [
+                            "show-road-item-supervise-cartable",
+                            "show-road-item-supervise-cartable-province",
+                            "create-road-item",
+                        ],
+                    },
+                    {
+                        id: "roadItemManagmentReportItems",
+                        label: "تعداد و حجم فعالیت ها به تفکیک موارد مشاهده شده",
+                        type: "page",
+                        route: "/dashboard/road-items/reports/sub-items-report",
+                        permissions: [
+                            "show-road-item-supervise-cartable",
+                            "show-road-item-supervise-cartable-province",
+                            "create-road-item",
+                        ],
+                    },
                ],
            },
        ],
@@ -220,7 +239,7 @@ export const pageMenu = [
                id: "roadPatrolManagmentReport",
                label: "گزارش ها",
                type: "page",
-                route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_patrols/report",
+                route: "/dashboard/road-patrols/reports",
                icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
                permissions: [
                    "add-road-patrol",
--- a/src/core/utils/routes.js
+++ b/src/core/utils/routes.js
@@ -37,6 +37,8 @@ export const DELETE_ROAD_PATROL_SUPERVISOR = api + "/api/v3/road_patrols/delete"
 export const CREATE_PATROL = api + "/api/v3/road_patrols/store";
 export const GET_FMS_DATA = api + "/api/v3/fms_vehicle/get_activity";
 export const GET_OTP_TOKEN = api + "/v2/get_otp_token";
+export const GET_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/road_patrol_reports/province_activity";
+export const GET_CITY_ACTIVITY_REPORT = api + "/api/v3/road_patrol_reports/city_activity";

 // road items
 export const GET_ROAD_ITEMS_SUPERVISOR_LIST = api + "/api/v3/road_items/supervisor_index";
@@ -55,6 +57,10 @@ export const RESTORE_BY_SUPERVISOR = api + "/api/v3/road_items/restore";
 export const GET_CAR_LIST_SEARCH = api + "/api/v3/cmms_machines/search";
 export const GET_RAHDARANS_LIST_SEARCH = api + "/api/v3/rahdaran/search";
 export const GET_OBSERVED_GASHT_LIST = api + "/api/v3/observed_items/filter";
+export const GET_PROVINCE_ACTIVITY_PER_ITEM = api + "/api/v3/road_item_reports/province_activity_per_item";
+export const GET_CITY_ACTIVITY_PER_ITEM = api + "/api/v3/road_item_reports/city_activity_per_item";
+export const GET_PROVINCE_ACTIVITY_PER_SUB_ITEM = api + "/api/v3/road_item_reports/province_activity_per_sub_item";
+export const GET_CITY_ACTIVITY_PER_SUB_ITEM = api + "/api/v3/road_item_reports/city_activity_per_sub_item";

 // activity code log
 export const ACTIVITY_LOG = api + "/api/v3/profile/add_activity";
--- a/src/core/utils/theme.js
+++ b/src/core/utils/theme.js
@@ -1,6 +1,6 @@
 "use client";
 import { createTheme } from "@mui/material";
-import { grey } from '@mui/material/colors';
+import { grey } from "@mui/material/colors";

 const theme = createTheme({
    direction: "rtl",
@@ -19,7 +19,7 @@ const theme = createTheme({
        },
        secondary: {
            main: grey[700],
-        }
+        },
    },
    components: {
        MuiBackdrop: {
--- a/src/lib/contexts/DataTable.js
+++ b/src/lib/contexts/DataTable.js
@@ -27,7 +27,17 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
            JSON.stringify(sortData) !== JSON.stringify(initSort) ||
            JSON.stringify(filterData) !== JSON.stringify(initFilter);

-        const CheckFilterValues = Object.values(filterData).every((innerObject) => innerObject.value === "");
+        const CheckFilterValues = Object.values(filterData).every((innerObject) => {
+            if (innerObject.datatype === "date" && innerObject.filterMode === "between") {
+                return (
+                    Array.isArray(innerObject.value) &&
+                    innerObject.value.length === 2 &&
+                    innerObject.value.every((v) => v === "")
+                );
+            } else {
+                return innerObject.value === "";
+            }
+        });
        const CheckHideValues = Object.values(hideData).every((value) => value === true);

        hasAnyConflict =
--- a/src/lib/hooks/useCities.js
+++ b/src/lib/hooks/useCities.js
@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import axios from "axios";
 import { GET_CITY_LISTS } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";