Merge pull request 'feature/excel_export' (#2) from feature/excel_export into develop

Reviewed-on: http://git.witel.ir/RMS/Frontend/pulls/2

src/app/(withAuth)/(dashboardLayout)/dashboard/road-missions/reports/missionsReports/page.js

@@ -1,18 +1,18 @@
-import WithPermission from "@/core/middlewares/withPermission";
-import ReportPage from "@/components/dashboard/roadMissions/reports";
-export const metadata = {
-    title: "کارتابل گزارش ماموریت",
-};
-const Page = () => {
-    return (
-        <WithPermission
-            permission_name={[
-                "all", // TODO : change permission
-            ]}
-        >
-            <ReportPage />
-        </WithPermission>
-    );
-};
-
-export default Page;
+import WithPermission from "@/core/middlewares/withPermission";
+import MissionsReportPage from "@/components/dashboard/roadMissions/reports/taradodReports";
+export const metadata = {
+    title: "کارتابل گزارش ترددها",
+};
+const Page = () => {
+    return (
+        <WithPermission
+            permission_name={[
+                "all", // TODO : change permission
+            ]}
+        >
+            <MissionsReportPage />
+        </WithPermission>
+    );
+};
+
+export default Page;

src/app/(withAuth)/(dashboardLayout)/dashboard/road-missions/reports/violationsReports/page.js

@@ -0,0 +1,18 @@
+import ViolationsReportsPage from "@/components/dashboard/roadMissions/reports/violationsReports";
+import WithPermission from "@/core/middlewares/withPermission";
+
+export const metadata = {
+    title: "کارتابل گزارش تخلفات",
+};
+
+export default function Page() {
+    return (
+        <WithPermission
+            permission_name={[
+                "all", // TODO : change permission
+            ]}
+        >
+            <ViolationsReportsPage />
+        </WithPermission>
+    );
+}

src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/index.jsx

@@ -12,7 +12,6 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
 
 const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
     const [bound, setBound] = useState(allData.bound);
-    const [boundType, setBoundType] = useState(allData.bound_type);
 
     const handleNext = useCallback(() => {
         setAllData({ bound: bound });
@@ -23,19 +22,9 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
         <>
             <DialogContent dividers>
                 <Stack spacing={2}>
-                    <SelectBoundType
-                        boundType={boundType}
-                        setBoundType={setBoundType}
-                        setBound={setBound}
-                        setAllData={setAllData}
-                    />
                     <Box sx={{ width: "100%", height: "400px" }}>
                         <MapLayer style={{ borderRadius: "4px" }}>
-                            {boundType == "polygon" ? (
-                                <MapControlPolygon bound={bound} setBound={setBound} boundType={boundType} />
-                            ) : (
-                                <MapControlPolyline bound={bound} setBound={setBound} boundType={boundType} />
-                            )}
+                            <MapControlPolyline bound={bound} setBound={setBound} boundType={"polyline"} />
                         </MapLayer>
                     </Box>
                 </Stack>

src/components/dashboard/roadMissions/operator/Actions/Create/Form/index.jsx

@@ -60,7 +60,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
             >
                 <Tab icon={<InsertDriveFile />} label="مشخصات" />
                 <Tab disabled={tabState < 1} icon={<AccessTime />} label="زمانبندی" />
-                <Tab disabled={tabState < 2} icon={<Route />} label="منطقه عملیاتی" />
+                <Tab disabled={tabState < 2} icon={<Route />} label="مسیر عملیاتی" />
                 <Tab disabled={tabState < 3} icon={<Engineering />} label="همراهان" />
                 <Tab disabled={tabState < 4} icon={<Verified />} label="بررسی نهایی" />
             </Tabs>

src/components/dashboard/roadMissions/operator/Actions/Create/index.jsx

@@ -20,16 +20,8 @@ const Create = ({ mutate }) => {
     const submitForm = async (result) => {
         setSubmitting(true);
         const bound = result.bound.getLatLngs();
-        let area =
-            result.bound_type === "polygon"
-                ? bound.map((ring) => ring.map((latlng) => [latlng.lng, latlng.lat]))[0]
-                : bound.map((latlng) => [latlng.lng, latlng.lat]);
+        let area = bound.map((latlng) => [latlng.lng, latlng.lat]);
 
-        // بستن polygon
-        if (result.bound_type === "polygon" && area.length > 0) {
-            const firstPoint = area[0];
-            area.push({ ...firstPoint });
-        }
         await requestServer(REQUEST_MISSION, "post", {
             data: {
                 explanation: result.explanation,

src/components/dashboard/roadMissions/operator/Actions/CreateWithoutProcess/Form/index.jsx

@@ -61,7 +61,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
             >
                 <Tab icon={<InsertDriveFile />} label="مشخصات" />
                 <Tab disabled={tabState < 1} icon={<AccessTime />} label="زمانبندی" />
-                <Tab disabled={tabState < 2} icon={<Route />} label="منطقه عملیاتی" />
+                <Tab disabled={tabState < 2} icon={<Route />} label="مسیر عملیاتی" />
                 <Tab disabled={tabState < 3} icon={<LocalShipping />} label="خودرو و راننده" />
                 <Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
                 <Tab disabled={tabState < 5} icon={<Verified />} label="بررسی نهایی" />

src/components/dashboard/roadMissions/operator/Actions/CreateWithoutProcess/index.jsx

@@ -20,16 +20,7 @@ const CreateWithoutProcess = ({ mutate }) => {
     const submitForm = async (result) => {
         setSubmitting(true);
         const bound = result.bound.getLatLngs();
-        let area =
-            result.bound_type === "polygon"
-                ? bound.map((ring) => ring.map((latlng) => [latlng.lng, latlng.lat]))[0]
-                : bound.map((latlng) => [latlng.lng, latlng.lat]);
-
-        // بستن polygon
-        if (result.bound_type === "polygon" && area.length > 0) {
-            const firstPoint = area[0];
-            area.push({ ...firstPoint });
-        }
+        let area = bound.map((latlng) => [latlng.lng, latlng.lat]);
 
         await requestServer(REQUEST_MISSION_WITHOUT_PROCESS, "post", {
             data: {

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

@@ -1,84 +0,0 @@
-"use client";
-import DataTableWithAuth from "@/core/components/DataTableWithAuth";
-import { Box } from "@mui/material";
-import { useMemo } from "react";
-import Toolbar from "./Toolbar";
-
-const ReportLists = ({ data, specialFilter }) => {
-    const columns = useMemo(() => {
-        return [
-            {
-                accessorKey: "province_name",
-                header: "اداره کل",
-                id: "province_name",
-                enableColumnFilter: false,
-                enableSorting: false,
-                datatype: "text",
-                grow: false,
-                size: 50,
-            },
-            {
-                accessorKey: "no_mission_count",
-                header: "تردد بدون ماموریت",
-                id: "no_mission_count",
-                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;
-                },
-            },
-            {
-                accessorKey: "out_of_area_count",
-                header: "تردد خارج محدوده",
-                id: "out_of_area_count",
-                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;
-                },
-            },
-        ];
-    }, []);
-
-    return (
-        <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
-            <DataTableWithAuth
-                TableToolbar={Toolbar}
-                columns={columns}
-                data={data.data}
-                page_name={"roadMissionReport"}
-                table_name={"roadMissionReportList"}
-                enablePagination={false}
-                specialFilter={specialFilter}
-            />
-        </Box>
-    );
-};
-
-export default ReportLists;

src/components/dashboard/roadMissions/reports/taradodReports/ExcelPrint/index.jsx

@@ -1,72 +1,77 @@
-"use client";
-import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
-import { useMemo, useState } from "react";
-import moment from "jalali-moment";
-import FileSaver from "file-saver";
-import DescriptionIcon from "@mui/icons-material/Description";
-import useRequest from "@/lib/hooks/useRequest";
-import { useTheme } from "@emotion/react";
-import { EXPORT_COUNTRY_ROAD_PATROL_REPORTS, EXPORT_PROVINCE_ROAD_PATROL_REPORTS } from "@/core/utils/routes";
-
-const PrintExcel = ({ table, filterData }) => {
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-    const [loading, setLoading] = useState(false);
-    const requestServer = useRequest({ notificationSuccess: true });
-    const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
-        if (filter.value) {
-            acc.push({ id: filter.id, 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);
-        const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
-        const requestUrl =
-            CountryOrProvince.value === "-1" ? EXPORT_COUNTRY_ROAD_PATROL_REPORTS : EXPORT_PROVINCE_ROAD_PATROL_REPORTS;
-        requestServer(`${requestUrl}?${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="success" onClick={clickHandler}>
-                    <DescriptionIcon sx={{ fontSize: "25px" }} />
-                </IconButton>
-            ) : (
-                <Button
-                    color="success"
-                    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;
+"use client";
+import {
+    EXPORT_MISSIONS_REPORT_TARADOD_COUNTRY_EXCEL_ACTIVITY,
+    EXPORT_MISSIONS_REPORT_TARADOD_PROVINCE_EXCEL_ACTIVITY,
+} from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { useTheme } from "@emotion/react";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import FileSaver from "file-saver";
+import moment from "jalali-moment";
+import { useMemo, useState } from "react";
+
+const PrintExcel = ({ table, filterData }) => {
+    const 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) {
+            acc.push({ id: filter.id, 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);
+        const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
+        const requestUrl =
+            CountryOrProvince.value === "-1"
+                ? EXPORT_MISSIONS_REPORT_TARADOD_COUNTRY_EXCEL_ACTIVITY
+                : EXPORT_MISSIONS_REPORT_TARADOD_PROVINCE_EXCEL_ACTIVITY;
+        requestServer(`${requestUrl}?${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="success" onClick={clickHandler}>
+                    <DescriptionIcon sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    color="success"
+                    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/roadMissions/reports/taradodReports/MissionsReportLists.jsx

@@ -0,0 +1,141 @@
+"use client";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { Box } from "@mui/material";
+import { useEffect, useMemo } from "react";
+import Toolbar from "./Toolbar";
+
+const TaradodReportLists = ({ data, specialFilter }) => {
+    useEffect(() => {
+        console.log(data);
+    }, [data]);
+    const columns = useMemo(() => {
+        return [
+            {
+                accessorKey: "edare_name",
+                header: "اداره کل",
+                id: "edare_name",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "total",
+                header: "کل ماموریت ها",
+                id: "total",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "khareg_mahdode",
+                header: "تردد خارج از محدوده",
+                id: "khareg_mahdode",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "durations",
+                header: "جمع ساعات ماموریت",
+                id: "duration",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "gps",
+                header: "جمع ساعات gps",
+                id: "gps",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "far_h",
+                header: "با فرایند ساعتی",
+                id: "far_h",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "far_d",
+                header: "با فرایند روزانه",
+                id: "far_d",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "un_far_h",
+                header: "بدون فرایند ساعتی",
+                id: "un_far_h",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "un_far_d",
+                header: "بدون فرایند روزانه",
+                id: "un_far_d",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "item",
+                header: "فعالیت روزانه",
+                id: "item",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "patrol",
+                header: "گشت راهداری",
+                id: "patrol",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+            },
+        ];
+    }, []);
+
+    return (
+        <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+            <DataTableWithAuth
+                TableToolbar={Toolbar}
+                columns={columns}
+                data={data.data}
+                page_name={"roadMissionReport"}
+                table_name={"roadMissionReportList"}
+                enablePagination={false}
+                specialFilter={specialFilter}
+            />
+        </Box>
+    );
+};
+
+export default TaradodReportLists;

src/components/dashboard/roadMissions/reports/taradodReports/Search/FromDateController.jsx

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

src/components/dashboard/roadMissions/reports/taradodReports/Search/SearchReportField.jsx

@@ -1,44 +1,44 @@
-import SearchIcon from "@mui/icons-material/Search";
-import { Button, Grid } from "@mui/material";
-import { Controller } from "react-hook-form";
-import FromDateController from "./FromDateController";
-import SelectProvince from "./SelectProvince";
-import ToDateController from "./ToDateController";
-
-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;
+import SearchIcon from "@mui/icons-material/Search";
+import { Button, Grid } from "@mui/material";
+import { Controller } from "react-hook-form";
+import FromDateController from "./FromDateController";
+import SelectProvince from "./SelectProvince";
+import ToDateController from "./ToDateController";
+
+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/roadMissions/reports/taradodReports/Search/SelectProvince.jsx

@@ -1,45 +1,45 @@
-import useProvinces from "@/lib/hooks/useProvince";
-import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
-import { Controller } from "react-hook-form";
-
-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;
+import useProvinces from "@/lib/hooks/useProvince";
+import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
+import { Controller } from "react-hook-form";
+
+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/roadMissions/reports/taradodReports/Search/ToDateController.jsx

@@ -1,30 +1,30 @@
-import MuiDatePicker from "@/core/components/MuiDatePicker";
-import moment from "jalali-moment";
-import { Controller, useWatch } from "react-hook-form";
-
-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}
-                    maxDate={new Date()}
-                    error={!!error}
-                    value={value}
-                    label={"تاریخ شروع (تا تاریخ)"}
-                    placeholder={"تا تاریخ"}
-                    setFieldValue={(name, newValue) => {
-                        const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
-                        onChange(formattedDate); // Update the field value in react-hook-form
-                    }}
-                    helperText={error ? error.message : null}
-                />
-            )}
-        />
-    );
-};
-export default ToDateController;
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import moment from "jalali-moment";
+import { Controller, useWatch } from "react-hook-form";
+
+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}
+                    maxDate={new Date()}
+                    error={!!error}
+                    value={value}
+                    label={"تاریخ شروع (تا تاریخ)"}
+                    placeholder={"تا تاریخ"}
+                    setFieldValue={(name, newValue) => {
+                        const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
+                        onChange(formattedDate); // Update the field value in react-hook-form
+                    }}
+                    helperText={error ? error.message : null}
+                />
+            )}
+        />
+    );
+};
+export default ToDateController;

src/components/dashboard/roadMissions/reports/taradodReports/Search/index.jsx

@@ -1,13 +1,16 @@
-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;
+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/roadMissions/reports/taradodReports/Toolbar.jsx

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

src/components/dashboard/roadMissions/reports/taradodReports/index.jsx

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

src/components/dashboard/roadMissions/reports/violationsReports/ExcelPrint/index.jsx

@@ -0,0 +1,77 @@
+"use client";
+import {
+    EXPORT_MISSIONS_REPORT_VIOLATION_COUNTRY_EXCEL_ACTIVITY,
+    EXPORT_MISSIONS_REPORT_VIOLATION_PROVINCE_EXCEL_ACTIVITY,
+} from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import { useTheme } from "@emotion/react";
+import DescriptionIcon from "@mui/icons-material/Description";
+import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
+import FileSaver from "file-saver";
+import moment from "jalali-moment";
+import { useMemo, useState } from "react";
+
+const PrintExcel = ({ table, filterData }) => {
+    const 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) {
+            acc.push({ id: filter.id, 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);
+        const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
+        const requestUrl =
+            CountryOrProvince.value === "-1"
+                ? EXPORT_MISSIONS_REPORT_VIOLATION_COUNTRY_EXCEL_ACTIVITY
+                : EXPORT_MISSIONS_REPORT_VIOLATION_PROVINCE_EXCEL_ACTIVITY;
+        requestServer(`${requestUrl}?${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="success" onClick={clickHandler}>
+                    <DescriptionIcon sx={{ fontSize: "25px" }} />
+                </IconButton>
+            ) : (
+                <Button
+                    color="success"
+                    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/roadMissions/reports/violationsReports/Search/FromDateController.jsx

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

src/components/dashboard/roadMissions/reports/violationsReports/Search/SearchReportField.jsx

@@ -0,0 +1,44 @@
+import SearchIcon from "@mui/icons-material/Search";
+import { Button, Grid } from "@mui/material";
+import { Controller } from "react-hook-form";
+import FromDateController from "./FromDateController";
+import SelectProvince from "./SelectProvince";
+import ToDateController from "./ToDateController";
+
+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/roadMissions/reports/violationsReports/Search/SelectProvince.jsx

@@ -0,0 +1,45 @@
+import useProvinces from "@/lib/hooks/useProvince";
+import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
+import { Controller } from "react-hook-form";
+
+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/roadMissions/reports/violationsReports/Search/ToDateController.jsx

@@ -0,0 +1,30 @@
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import moment from "jalali-moment";
+import { Controller, useWatch } from "react-hook-form";
+
+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}
+                    maxDate={new Date()}
+                    error={!!error}
+                    value={value}
+                    label={"تاریخ شروع (تا تاریخ)"}
+                    placeholder={"تا تاریخ"}
+                    setFieldValue={(name, newValue) => {
+                        const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");
+                        onChange(formattedDate); // Update the field value in react-hook-form
+                    }}
+                    helperText={error ? error.message : null}
+                />
+            )}
+        />
+    );
+};
+export default ToDateController;

src/components/dashboard/roadMissions/reports/violationsReports/Search/index.jsx

@@ -0,0 +1,16 @@
+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/roadMissions/reports/violationsReports/Toolbar.jsx

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

src/components/dashboard/roadMissions/reports/violationsReports/ViolationsReportsList.jsx

@@ -0,0 +1,101 @@
+"use client";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { Box } from "@mui/material";
+import { useEffect, useMemo } from "react";
+import Toolbar from "./Toolbar";
+
+const ViolationsReportsList = ({ data, specialFilter }) => {
+    useEffect(() => {
+        console.log(data);
+    }, [data]);
+    const columns = useMemo(() => {
+        return [
+            {
+                accessorKey: "edare_name",
+                header: "اداره کل",
+                id: "edare_name",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "total",
+                header: "کل تخلفات",
+                id: "total",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "done",
+                header: "اقدام شده",
+                id: "done",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "undone",
+                header: "اقدام نشده",
+                id: "un_done",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "gps",
+                header: "GPS",
+                id: "gps",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "herasat",
+                header: "ثبت حراست",
+                id: "herasat",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "mil_gps",
+                header: "کیلومتر GPS",
+                id: "mil_gps",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "numeric",
+                grow: false,
+                size: 50,
+            },
+        ];
+    }, []);
+
+    return (
+        <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+            <DataTableWithAuth
+                TableToolbar={Toolbar}
+                columns={columns}
+                data={data.data}
+                page_name={"roadMissionReport"}
+                table_name={"roadMissionReportList"}
+                enablePagination={false}
+                specialFilter={specialFilter}
+            />
+        </Box>
+    );
+};
+
+export default ViolationsReportsList;

src/components/dashboard/roadMissions/reports/violationsReports/index.jsx

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

src/core/utils/pageMenu.js

@@ -33,6 +33,7 @@ import ContactPageIcon from "@mui/icons-material/ContactPage";
 import DirectionsBusIcon from "@mui/icons-material/DirectionsBus";
 import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
 import RemoveRoadIcon from "@mui/icons-material/RemoveRoad";
+import { ReportProblem, RvHookup } from "@mui/icons-material";
 
 export const pageMenu = [
     {
@@ -167,11 +168,31 @@ export const pageMenu = [
             {
                 id: "roadMissionsReports",
                 label: "گزارشات",
-                type: "page",
-                route: "/dashboard/road-missions/reports",
+                type: "menu",
                 icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
                 // badges: [{ key: "mission.control" }], // TODO: add badge and permission
                 permissions: ["all"],
+                hasSubitems: true,
+                Subitems: [
+                    {
+                        id: "missionsReports",
+                        label: "ترددها",
+                        icon: <RvHookup sx={{ width: "inherit", height: "inherit" }} />,
+                        type: "page",
+                        route: "/dashboard/road-missions/reports/missionsReports",
+                        badges: [{ key: "mission.request_portal" }],
+                        permissions: ["all"],
+                    },
+                    {
+                        id: "violationsReports",
+                        label: "تخلفات",
+                        icon: <ReportProblem sx={{ width: "inherit", height: "inherit" }} />,
+                        type: "page",
+                        route: "/dashboard/road-missions/reports/violationsReports",
+                        badges: [{ key: "mission.request_portal" }],
+                        permissions: ["all"],
+                    },
+                ],
             },
         ],
     },

src/core/utils/pageMenuDev.js

@@ -1,4 +1,4 @@
-import { Mediation } from "@mui/icons-material";
+import { Mediation, ReportProblem, RvHookup } from "@mui/icons-material";
 import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
 import AssessmentIcon from "@mui/icons-material/Assessment";
@@ -6,7 +6,9 @@ import AssignmentLateIcon from "@mui/icons-material/AssignmentLate";
 import AssistantIcon from "@mui/icons-material/Assistant";
 import BallotIcon from "@mui/icons-material/Ballot";
 import BiotechIcon from "@mui/icons-material/Biotech";
+import ContactPageIcon from "@mui/icons-material/ContactPage";
 import CottageIcon from "@mui/icons-material/Cottage";
+import DirectionsBusIcon from "@mui/icons-material/DirectionsBus";
 import DoorbellIcon from "@mui/icons-material/Doorbell";
 import DriveEtaIcon from "@mui/icons-material/DriveEta";
 import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
@@ -19,19 +21,17 @@ import GroupsIcon from "@mui/icons-material/Groups";
 import HandymanIcon from "@mui/icons-material/Handyman";
 import LineAxisIcon from "@mui/icons-material/LineAxis";
 import LockPersonIcon from "@mui/icons-material/LockPerson";
+import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
 import MapIcon from "@mui/icons-material/Map";
+import MapsHomeWorkIcon from "@mui/icons-material/MapsHomeWork";
+import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt";
+import RemoveRoadIcon from "@mui/icons-material/RemoveRoad";
 import RouteIcon from "@mui/icons-material/Route";
 import ScienceIcon from "@mui/icons-material/Science";
+import SecurityIcon from "@mui/icons-material/Security";
 import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
 import SpeedIcon from "@mui/icons-material/Speed";
-import PsychologyAltIcon from "@mui/icons-material/PsychologyAlt";
-import MapsHomeWorkIcon from "@mui/icons-material/MapsHomeWork";
-import SecurityIcon from "@mui/icons-material/Security";
-import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
-import DirectionsBusIcon from "@mui/icons-material/DirectionsBus";
-import ContactPageIcon from "@mui/icons-material/ContactPage";
 import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
-import RemoveRoadIcon from "@mui/icons-material/RemoveRoad";
 
 export const pageMenuDev = [
     {
@@ -166,11 +166,31 @@ export const pageMenuDev = [
             {
                 id: "roadMissionsReports",
                 label: "گزارشات",
-                type: "page",
-                route: "/dashboard/road-missions/reports",
+                type: "menu",
                 icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
                 // badges: [{ key: "mission.control" }], // TODO: add badge and permission
                 permissions: ["all"],
+                hasSubitems: true,
+                Subitems: [
+                    {
+                        id: "missionsReports",
+                        label: "ترددها",
+                        icon: <RvHookup sx={{ width: "inherit", height: "inherit" }} />,
+                        type: "page",
+                        route: "/dashboard/road-missions/reports/missionsReports",
+                        badges: [{ key: "mission.request_portal" }],
+                        permissions: ["all"],
+                    },
+                    {
+                        id: "violationsReports",
+                        label: "تخلفات",
+                        icon: <ReportProblem sx={{ width: "inherit", height: "inherit" }} />,
+                        type: "page",
+                        route: "/dashboard/road-missions/reports/violationsReports",
+                        badges: [{ key: "mission.request_portal" }],
+                        permissions: ["all"],
+                    },
+                ],
             },
         ],
     },

src/core/utils/routes.js

@@ -42,11 +42,29 @@ export const CREATE_PATROL = api + "/api/v3/road_patrols/operator/store";
 export const GET_FMS_DATA = api + "/api/v3/fms_vehicle/get_activity";
 export const GET_OTP_TOKEN = api + "/api/v3/otp/get_token";
 
-export const GET_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/road_patrols/report/country_activity";
-export const GET_CITY_ACTIVITY_REPORT = api + "/api/v3/missions/report/country_activity";
+export const GET_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/missions/report/province_activity";
+export const GET_COUNTRY_ACTIVITY_REPORT = api + "/api/v3/missions/report/country_activity";
 export const EXPORT_COUNTRY_ROAD_PATROL_REPORTS = api + "/api/v3/road_patrols/report/country_activity_excel";
 export const EXPORT_PROVINCE_ROAD_PATROL_REPORTS = api + "/api/v3/road_patrols/report/province_activity_excel";
 
+export const GET_MISSIONS_REPORT_TARADOD_COUNTRY_ACTIVITY =
+    "http://192.168.1.132:8000" + "/api/v3/missions/report_taradod/country_activity";
+export const GET_MISSIONS_REPORT_TARADOD_PROVINCE_ACTIVITY =
+    "http://192.168.1.132:8000" + "/api/v3/missions/report_taradod/province_activity";
+export const EXPORT_MISSIONS_REPORT_TARADOD_COUNTRY_EXCEL_ACTIVITY =
+    "http://192.168.1.132:8000" + "/api/v3/missions/report_taradod/country_excel_activity";
+export const EXPORT_MISSIONS_REPORT_TARADOD_PROVINCE_EXCEL_ACTIVITY =
+    "http://192.168.1.132:8000" + "/api/v3/missions/report_taradod/province_excel_activity";
+
+export const GET_MISSIONS_REPORT_VIOLATION_COUNTRY_ACTIVITY =
+    "http://192.168.1.132:8000" + "/api/v3/missions/report_violation/country_activity";
+export const GET_MISSIONS_REPORT_VIOLATION_PROVINCE_ACTIVITY =
+    "http://192.168.1.132:8000" + "/api/v3/missions/report_violation/province_activity";
+export const EXPORT_MISSIONS_REPORT_VIOLATION_COUNTRY_EXCEL_ACTIVITY =
+    "http://192.168.1.132:8000" + "/api/v3/missions/report_violation/country_excel_activity";
+export const EXPORT_MISSIONS_REPORT_VIOLATION_PROVINCE_EXCEL_ACTIVITY =
+    "http://192.168.1.132:8000" + "/api/v3/missions/report_violation/province_excel_activity";
+
 // road items
 export const GET_ROAD_ITEMS_SUPERVISOR_LIST = api + "/api/v3/road_items/supervisor";
 export const EXPORT_ROAD_ITEMS_SUPERVISOR_LIST = api + "/api/v3/road_items/supervisor/excel";
@@ -233,6 +251,8 @@ export const GET_MISSION_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/missions/repo
 export const GET_MISSION_CITY_ACTIVITY_REPORT = api + "/api/v3/missions/report/country_activity";
 export const CREATE_VIOLATION = api + "/api/v3/missions/violation_management";
 export const EDIT_VIOLATION = api + "/api/v3/missions/violation_management";
+export const EXPORT_COUNTRY_ROAD_MISSIONS_REPORTS = api + "/api/v3/missions/report/country_excel_activity";
+export const EXPORT_PROVINCE_ROAD_MISSIONS_REPORTS = api + "/api/v3/missions/report/province_excel_activity";
 
 export const GET_MACHINES_TABLE_LIST = api + "/api/v3/cmms_machines";