Feature/reports road items

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;

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;

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;

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>

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">

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}
                             />

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>

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

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">
+        <Dialog open={open} fullWidth maxWidth={tabState === 0 ? "md" : "sm"}>
-            <GashtCreateContent mutate={mutate} setOpen={setOpen} />
+            <GashtCreateContent mutate={mutate} setOpen={setOpen} setTabState={setTabState} tabState={tabState} />
         </Dialog>
     );
 };

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 GashtCreateContent = ({ mutate, setOpen, tabState, setTabState }) => {
-    const [tabState, setTabState] = useState(0);
     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 />}
                 >

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}
                             />

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

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 ? (*/}
+                    {errors.item_id ? <FormHelperText>errors.item_id.message</FormHelperText> : null}
-                    {/*    <FormHelperText>*/}
-                    {/*        errors.item_id.message*/}
-                    {/*    </FormHelperText>*/}
-                    {/*) : null}*/}
                 </FormControl>
             </Stack>
             <Stack sx={{ flex: 1 }}>

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
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                            {...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();
+                    useEffect(() => {
-
+                        if (prevDependency === props.dependencyFieldValue.value) return;
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                        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",
+                id: "rahdaran__code",
-                enableColumnFilter: false,
+                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",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
             },
@@ -265,8 +293,7 @@ const OperatorList = () => {
                 id: "created_at",
                 enableColumnFilter: true,
                 datatype: "date",
-                filterMode: "equals",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
             },

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()

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>

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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,
             },
-            {
+            ...(hasCountryPermission ? [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 = () => {
-                        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}</>,
-            },
             {
                 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 = () => {
+                    const getColumnSelectOptions = useMemo(() => {
-                        if (props.dependencyFieldValue.value === "") {
+                        if (hasCountryPermission && props.dependencyFieldValue.value === "") {
                             return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
                         }
                         if (loadingEdaratList) {
@@ -98,16 +112,33 @@ const SupervisorList = () => {
                                 label: edare.name_fa,
                             })),
                         ];
-                    };
+                    }, [edaratList, loadingEdaratList, errorEdaratList]);
-                    const columnSelectOption = getColumnSelectOptions();
+                    useEffect(() => {
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                        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,
                             })),
                         ];
-                    };
+                    }, [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 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,
                             })),
                         ];
-                    };
+                    }, [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;
                 },
             },
             {
@@ -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",
+                id: "rahdaran__code",
-                enableColumnFilter: false,
+                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",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
             },
@@ -332,8 +397,7 @@ const SupervisorList = () => {
                 id: "created_at",
                 enableColumnFilter: true,
                 datatype: "date",
-                filterMode: "equals",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
             },
@@ -355,9 +419,8 @@ const SupervisorList = () => {
                 },
                 Cell: ({ renderedCellValue, row }) => <>{row.original.status_fa}</>,
             },
-        ],
+        ];
-        []
+    }, []);
-    );
 
     return (
         <>

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

@@ -1,10 +1,6 @@
 import PrintExcel from "./ExcelPrint";
 
 const Toolbar = ({ table, filterData }) => {
-    return (
+    return <>{/*<PrintExcel table={table} filterData={filterData} />*/}</>;
-        <>
-            <PrintExcel table={table} filterData={filterData} />
-        </>
-    );
 };
 export default Toolbar;

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>

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
-                header: "خودرو", // Car ID
-                id: "cmmsMachines__machine_code",
                 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 (
-                        return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
-                            <Stack alignItems={"center"} justifyContent={"center"}>
+                            <MachinePerformanceForm />
-                                <MachinesCodeDialog machinesLists={renderedCellValue} />
+                        </Stack>
-                            </Stack>
+                    );
-                        );
-                    }
-                    return <Typography variant="body2">کد خودرویی وجود ندارد</Typography>;
                 },
             },
             {
                 accessorKey: "rahdaran",
                 header: "راهداران",
-                id: "rahdaran",
+                id: "rahdaran__code",
-                enableColumnFilter: false,
+                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",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 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",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 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",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
             },

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;

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;

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>
+                <DialogTitle sx={{ fontSize: "large" }}>عملکرد خودرو</DialogTitle>
-                <MachinesCodeContent machinesLists={machinesLists} />
+                <MachinePerformanceContent machinesLists={machineData} />
                 <DialogActions>
                     <Button
                         onClick={() => setOpenMachinesCodeDialog(false)}
@@ -40,4 +67,4 @@ const MachinesCodeDialog = ({ machinesLists }) => {
         </>
     );
 };
-export default MachinesCodeDialog;
+export default MachinePerformanceForm;

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>
     );
 };

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;

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;

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;

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;

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;

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;

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;

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;

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;

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
+                        {hasPartialDeletePermission && (
-                            sx={{
+                            <ListItem
-                                display: "list-item",
+                                sx={{
-                                pl: 0,
+                                    display: "list-item",
-                                "&::marker": {
+                                    pl: 0,
-                                    color: "warning.main",
+                                    "&::marker": {
-                                },
+                                        color: "warning.main",
-                            }}
+                                    },
-                        >
+                                }}
-                            <Typography variant="body2">حذف جزئی : حذف گشت بدون اقدامات انجام شده.</Typography>
+                            >
-                        </ListItem>
+                                <Typography variant="body2">حذف جزئی : حذف گشت بدون اقدامات انجام شده.</Typography>
-                        <ListItem
+                            </ListItem>
-                            sx={{
+                        )}
-                                display: "list-item",
+                        {hasCompleteDeletePermission && (
-                                pl: 0,
+                            <ListItem
-                                "&::marker": {
+                                sx={{
-                                    color: "error.main",
+                                    display: "list-item",
-                                },
+                                    pl: 0,
-                            }}
+                                    "&::marker": {
-                        >
+                                        color: "error.main",
-                            <Typography variant="body2">حذف کلی : حذف گشت با اقدامات انجام شده.</Typography>
+                                    },
-                        </ListItem>
+                                }}
+                            >
+                                <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}>
+                {hasPartialDeletePermission && (
-                    {submittingPartial ? "درحال ارسال اطلاعات..." : "حذف جزئی"}
+                    <Button
-                </Button>
+                        onClick={handlePartialDelete}
-                <Button onClick={handleGeneralDelete} variant="contained" color="error" disabled={submittingGeneral}>
+                        variant="outlined"
-                    {submittingGeneral ? "درحال ارسال اطلاعات..." : "حذف کلی"}
+                        color="warning"
-                </Button>
+                        disabled={submittingPartial}
+                    >
+                        {submittingPartial ? "درحال ارسال اطلاعات..." : "حذف جزئی"}
+                    </Button>
+                )}
+                {hasCompleteDeletePermission && (
+                    <Button
+                        onClick={handleGeneralDelete}
+                        variant="contained"
+                        color="error"
+                        disabled={submittingGeneral}
+                    >
+                        {submittingGeneral ? "درحال ارسال اطلاعات..." : "حذف کلی"}
+                    </Button>
+                )}
             </DialogActions>
         </>
     );

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>
         </>
     );

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;

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;

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;

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;

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>

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>
     );
 };

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

@@ -1,6 +1,6 @@
 "use client";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
-import {Box, Stack, Typography} from "@mui/material";
+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 SupervisorList = () => {
-    const columns = useMemo(
+    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,
             },
-            {
+            ...(hasCountryPermission ? [dynamicColumns] : []),
-                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}</>,
-            },
             {
                 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 = () => {
+                    const [prevDependency, setPrevDependency] = useState(
-                        if (props.dependencyFieldValue.value === "") {
+                        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,
                             })),
                         ];
-                    };
+                    }, [edaratList, loadingEdaratList, errorEdaratList]);
-                    const columnSelectOption = getColumnSelectOptions();
+                    useEffect(() => {
-                    return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
+                        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: "عملکرد خودرو",
-                header: "خودرو", // Car ID
-                id: "cmmsMachines__machine_code",
                 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 }) => {
+                Cell: () => (
-                    if (renderedCellValue) {
+                    <Stack alignItems={"center"} justifyContent={"center"}>
-                        return (
+                        <MachinePerformanceForm />
-                            <Stack alignItems={"center"} justifyContent={"center"}>
+                    </Stack>
-                                <MachinesCodeDialog machinesLists={renderedCellValue} />
+                ),
-                            </Stack>
-                        );
-                    }
-                    return <Typography variant="body2">کد خودرویی وجود ندارد</Typography>;
-                },
             },
             {
                 accessorKey: "rahdaran",
                 header: "راهداران",
-                id: "rahdaran",
+                id: "rahdaran__code",
-                enableColumnFilter: false,
+                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 }) => {
+                Cell: ({ renderedCellValue }) =>
-                    if (renderedCellValue) {
+                    renderedCellValue ? (
-                        return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
-                            <Stack alignItems={"center"} justifyContent={"center"}>
+                            <RahdaranDialog rahdarLists={renderedCellValue} />
-                                <RahdaranDialog rahdarLists={renderedCellValue} />
+                        </Stack>
-                            </Stack>
+                    ) : (
-                        );
+                        <Typography variant="body2">بدون شخص</Typography>
-                    }
+                    ),
-                    return <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",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 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",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 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",
+                filterMode: "between",
-                columnFilterModeOptions: ["equals", "contains"],
                 grow: false,
                 size: 100,
             },
@@ -204,13 +229,11 @@ const OperatorList = () => {
                         },
                     },
                 },
-                Cell: ({ renderedCellValue }) => {
+                Cell: ({ renderedCellValue }) => (
-                    return (
+                    <Stack alignItems={"center"} justifyContent={"center"}>
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        <OfficerDescriptionForm description={renderedCellValue} />
-                            <OfficerDescriptionForm description={renderedCellValue} />
+                    </Stack>
-                        </Stack>
+                ),
-                    );
-                },
             },
             {
                 header: "گزارش مامور",
@@ -227,17 +250,14 @@ const OperatorList = () => {
                         },
                     },
                 },
-                Cell: ({ renderedCellValue, row }) => {
+                Cell: ({ row }) => (
-                    return (
+                    <Stack alignItems={"center"} justifyContent={"center"}>
-                        <Stack alignItems={"center"} justifyContent={"center"}>
+                        <ReportForm rowId={row.getValue("id")} />
-                            <ReportForm rowId={row.getValue("id")} />
+                    </Stack>
-                        </Stack>
+                ),
-                    );
-                },
             },
-        ],
+        ];
-        []
+    }, []);
-    );
 
     return (
         <>
@@ -258,4 +278,4 @@ const OperatorList = () => {
         </>
     );
 };
-export default OperatorList;
+export default SupervisorList;

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

@@ -1,10 +1,6 @@
 import PrintExcel from "./ExcelPrint";
 
 const Toolbar = ({ table, filterData }) => {
-    return (
+    return <>{/*<PrintExcel table={table} filterData={filterData} />*/}</>;
-        <>
-            <PrintExcel table={table} filterData={filterData} />
-        </>
-    );
 };
 export default Toolbar;

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>
     );
 };

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;

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: (

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}
         />
     );
 };

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(
+                            {columns.map((column) =>
-                                (column) =>
+                                column.enableColumnFilter ? (
-                                    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

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 } }) => (
+            render={({ field: { value, name, onBlur, onChange } }) => {
-                <FilterBodyField
+                return (
-                    column={column}
+                    <FilterBodyField
-                    filterParameters={value}
+                        column={column}
-                    handleChange={onChange}
+                        filterParameters={value}
-                    handleBlur={onBlur}
+                        handleChange={onChange}
-                    dependencyFieldValue={column.dependencyId ? dependencyField : null}
+                        handleBlur={onBlur}
-                    resetForm={() => reset()}
+                        dependencyFieldValue={null}
-                    errors={errors}
+                        resetForm={() => reset()}
-                />
+                        errors={errors}
-            )}
+                    />
+                );
+            }}
         />
     );
 };

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;

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

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,
+                            },
                         },
                     }}
                 />

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 })}
             >

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} />

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} />
+                        {!special_data && (
-                        <UpdateTable mutate={mutate} />
+                            <>
+                                <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}

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(
+                                    map.fitBounds([startPosition, map.getCenter()], {
-                                        [
+                                        paddingTopLeft: [16, 16],
-                                            startPosition,
+                                        paddingBottomRight: [16, 16],
-                                            map.getCenter(),
+                                    });
-                                        ],
-                                        { paddingTopLeft: [16, 16], paddingBottomRight: [16, 16] }
-                                    );
                                 }
                             },
                         }}

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">

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 parsedValue = value || null;
-    const parsedMinTime = minTime ? (typeof minTime === "string" ? parseISO(minTime) : minTime) : null;
+    const parsedMinTime = minTime || null;
-    const parsedMaxTime = maxTime && (typeof maxTime === "string" ? parseISO(maxTime) : 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, newValue);
-                        setFieldValue(name, formattedTime);
                     }}
                     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">

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: (

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",
+                        border: 1,
-                        borderRadius: "10px",
+                        borderColor: "divider",
+                        borderRadius: 2,
                         cursor: "pointer",
                         padding: "5px",
                         height: imageSize[1],

src/core/utils/pageMenu.js

@@ -148,13 +148,32 @@ export const pageMenu = [
             {
                 id: "roadItemManagmentReport",
                 label: "گزارش ها",
-                type: "page",
+                type: "menu",
-                route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/report",
                 icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
-                permissions: [
+                hasSubitems: true,
-                    "show-road-item-supervise-cartable",
+                Subitems: [
-                    "show-road-item-supervise-cartable-province",
+                    {
-                    "create-road-item",
+                        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",

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";

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: {

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 =

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";