machine type report completed

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

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

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

@@ -0,0 +1,79 @@
+"use client";
+import {
+    EXPORT_GET_MACHINES_COUNTRY_ACTIVITY_REPORT,
+    EXPORT_GET_MACHINES_PROVINCE_ACTIVITY_REPORT,
+    EXPORT_GET_MACHINES_TYPE_COUNTRY_ACTIVITY_REPORT,
+    EXPORT_GET_MACHINES_TYPE_PROVINCE_ACTIVITY_REPORT,
+} 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_GET_MACHINES_TYPE_COUNTRY_ACTIVITY_REPORT
+                : EXPORT_GET_MACHINES_TYPE_PROVINCE_ACTIVITY_REPORT;
+        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/machinesTypeReports/MachinesReportsList.jsx

@@ -0,0 +1,61 @@
+"use client";
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+import Toolbar from "./Toolbar";
+// import RowActions from "./RowActions";
+
+const MachinesReportsList = ({ data, specialFilter }) => {
+    const columns = useMemo(() => {
+        return [
+            {
+                accessorKey: "car_type",
+                header: "نوع ماشین",
+                id: "car_type",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "text",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "func",
+                header: "کارکرد",
+                id: "func",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "number",
+                grow: false,
+                size: 50,
+            },
+            {
+                accessorKey: "missions",
+                header: "تعداد ماموریت",
+                id: "missions",
+                enableColumnFilter: false,
+                enableSorting: false,
+                datatype: "number",
+                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={"roadMissionReportMachineTypeReport"}
+                table_name={"roadMissionReportMachineTypeReportList"}
+                enablePagination={false}
+                specialFilter={specialFilter}
+                // enableRowActions
+                // RowActions={RowActions}
+            />
+        </Box>
+    );
+};
+
+export default MachinesReportsList;

src/components/dashboard/roadMissions/reports/machinesTypeReports/RowActions/MissionDitails/Form/MachineMissionsDetailsDialog/MachineMissionsList/index.jsx

@@ -0,0 +1,106 @@
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { GET_MACHINE_MISSIONS_DETAILS, GET_MACHINE_TYPE_MISSIONS_DETAILS } from "@/core/utils/routes";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+
+const MachineMissionsList = ({ row }) => {
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 80,
+            },
+            {
+                accessorKey: "province_name",
+                header: "استان",
+                id: "province_name",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "city_name",
+                header: "شهر",
+                id: "city_name",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "station_name",
+                header: "راهدارخانه",
+                id: "station_name",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "driver_name",
+                header: "راننده",
+                id: "driver_name",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "km",
+                header: "کیلومتر شروع",
+                id: "km",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "end_km",
+                header: "کیلومتر پایان",
+                id: "end_km",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+        ],
+        []
+    );
+
+    return (
+        <>
+            <Box sx={{ mt: 3 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    columns={columns}
+                    sorting={[{ id: "id", desc: true }]}
+                    table_url={`${GET_MACHINE_TYPE_MISSIONS_DETAILS}?car_type=${row.car_type}`}
+                    page_name={"roadMissionReportMachineType"}
+                    table_name={"roadMissionReportMachineTypeList"}
+                    positionActionsColumn={"first"}
+                />
+            </Box>
+        </>
+    );
+};
+export default MachineMissionsList;

src/components/dashboard/roadMissions/reports/machinesTypeReports/RowActions/MissionDitails/Form/index.jsx

@@ -0,0 +1,27 @@
+import { Box, Button, DialogActions, DialogContent } from "@mui/material";
+import { Stack } from "@mui/system";
+import MachineMissionsList from "./MachineMissionsDetailsDialog/MachineMissionsList";
+
+const MachineMissionsDetailsTable = ({ row, setOpenMachineMissionsDetails }) => {
+    return (
+        <>
+            <DialogContent dividers>
+                <Box sx={{ flex: 1 }}>
+                    <Stack spacing={3}>
+                        <Stack spacing={2}>
+                            <MachineMissionsList row={row} />
+                        </Stack>
+                    </Stack>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>
+                <Stack direction={"row"} spacing={1}>
+                    <Button onClick={() => setOpenMachineMissionsDetails(false)} variant="outlined" color="primary">
+                        بستن
+                    </Button>
+                </Stack>
+            </DialogActions>
+        </>
+    );
+};
+export default MachineMissionsDetailsTable;

src/components/dashboard/roadMissions/reports/machinesTypeReports/RowActions/MissionDitails/index.jsx

@@ -0,0 +1,47 @@
+import { Close, RemoveRedEye } from "@mui/icons-material";
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import MachineMissionsDetailsTable from "./Form";
+
+const MissionDetails = ({ row }) => {
+    const [openMachineMissionsDetails, setOpenMachineMissionsDetails] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="ریزگزارشات" arrow placement="right">
+                <IconButton
+                    color="primary"
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    onClick={() => {
+                        setOpenMachineMissionsDetails(true);
+                    }}
+                >
+                    <RemoveRedEye />
+                </IconButton>
+            </Tooltip>
+            <Dialog open={openMachineMissionsDetails} fullWidth maxWidth="md">
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenMachineMissionsDetails(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <Close />
+                </IconButton>
+                <DialogTitle>ریز گزارشات نوع خودرو</DialogTitle>
+                {openMachineMissionsDetails && (
+                    <MachineMissionsDetailsTable
+                        row={row.original}
+                        setOpenMachineMissionsDetails={setOpenMachineMissionsDetails}
+                    />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default MissionDetails;

src/components/dashboard/roadMissions/reports/machinesTypeReports/RowActions/RouteDetail/ShowRoute.jsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "react";
+import { Marker, Polyline, useMap } from "react-leaflet";
+import L from "leaflet";
+import polyline from "@mapbox/polyline";
+import SourceIcon from "@/assets/images/source-icon.svg";
+import DestIcon from "@/assets/images/destination-icon.svg";
+
+const ShowRoute = ({ area }) => {
+    const map = useMap();
+    const defaultIconSize = [35, 35];
+
+    const createCustomIcon = (size, iconUrl) => {
+        return L.icon({
+            iconUrl: iconUrl,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    };
+
+    useEffect(() => {
+        if (coords.length > 0) {
+            map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
+        }
+    }, [area]);
+    const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
+    const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
+
+    if (!area) return null;
+    const coords = polyline.decode(area, 6);
+
+    if (coords.length === 0) return null;
+
+    const sourcePosition = coords[0];
+    const destPosition = coords[coords.length - 1];
+
+    return (
+        <>
+            <Polyline positions={coords} color="#015688" weight={7} opacity={1} />
+            <Marker position={sourcePosition} icon={sourceIcon} />
+            <Marker position={destPosition} icon={destIcon} />
+        </>
+    );
+};
+
+export default ShowRoute;

src/components/dashboard/roadMissions/reports/machinesTypeReports/RowActions/RouteDetail/index.jsx

@@ -0,0 +1,57 @@
+import { Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import MapIcon from "@mui/icons-material/Map";
+import MapLayer from "@/core/components/MapLayer";
+import ShowRoute from "./ShowRoute";
+
+const RouteDetail = ({ encoded_route }) => {
+    const [openRouteDetailDialog, setOpenRouteDetailDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="مسیر انتخابی">
+                <IconButton color="primary" onClick={() => setOpenRouteDetailDialog(true)}>
+                    <MapIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openRouteDetailDialog}
+                onClose={() => setOpenRouteDetailDialog(false)}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+                dir="rtl"
+                maxWidth={"sm"}
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>مسیر انتخابی</DialogTitle>
+                <Box sx={{ mx: 1, borderRadius: "5px" }}>
+                    <Box
+                        sx={{
+                            width: "100%",
+                            height: "300px",
+                            border: "1px solid #e1e1e1",
+                            borderRadius: "5px",
+                        }}
+                    >
+                        <MapLayer style={{ borderRadius: "4px" }}>
+                            <ShowRoute area={encoded_route} />
+                        </MapLayer>
+                    </Box>
+                </Box>
+                <DialogActions>
+                    <Button
+                        onClick={() => setOpenRouteDetailDialog(false)}
+                        variant="outlined"
+                        color="secondary"
+                        autoFocus
+                    >
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default RouteDetail;

src/components/dashboard/roadMissions/reports/machinesTypeReports/RowActions/index.jsx

@@ -0,0 +1,10 @@
+// import MissionDetails from "./MissionDitails";
+
+const RowActions = ({ row }) => {
+    return (
+        <>
+        {/*<MissionDetails row={row} />*/}
+        </>
+    );
+};
+export default RowActions;

src/components/dashboard/roadMissions/reports/machinesTypeReports/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/machinesTypeReports/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/machinesTypeReports/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/machinesTypeReports/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/machinesTypeReports/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/roadMissions/reports/machinesTypeReports/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/machinesTypeReports/index.jsx

@@ -0,0 +1,110 @@
+"use client";
+import PageTitle from "@/core/components/PageTitle";
+import {
+    GET_MACHINES_TYPE_COUNTRY_ACTIVITY_REPORT,
+    GET_MACHINES_TYPE_PROVINCE_ACTIVITY_REPORT,
+} from "@/core/utils/routes";
+import { useAuth } from "@/lib/contexts/auth";
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { LinearProgress, Stack } from "@mui/material";
+import moment from "jalali-moment";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import MachinesReportsList from "./MachinesReportsList";
+import SearchReportList from "./Search";
+
+const MachinesTypeReportsPage = () => {
+    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} 00:00:00`);
+        params.set("date_to", `${data.date_to} 23:59:59`);
+        setSpecialFilter([
+            { value: `${data.province_id}`, datatype: "numeric", id: "province_id", fn: "equals" },
+            { value: `${data.from_date}`, datatype: "date", id: "from_date", fn: "between" },
+            { value: `${data.date_to}`, datatype: "date", id: "date_to", fn: "between" },
+        ]);
+        if (data.province_id === "-1") {
+            try {
+                const response = await requestServer(`${GET_MACHINES_TYPE_COUNTRY_ACTIVITY_REPORT}?${params}`);
+                const result = response.data.data;
+
+                setData({
+                    data: result.activities,
+                    filters: data,
+                });
+            } catch (e) {}
+        } else {
+            try {
+                params.set("province_id", `${data.province_id}`);
+                const response = await requestServer(`${GET_MACHINES_TYPE_PROVINCE_ACTIVITY_REPORT}?${params}`);
+
+                const result = response.data.data;
+
+                setData({
+                    data: result.activities,
+                    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 /> : <MachinesReportsList specialFilter={specialFilter} data={data} />}
+        </Stack>
+    );
+};
+export default MachinesTypeReportsPage;

src/core/utils/pageMenu.js

@@ -1,4 +1,4 @@
-import { ReportProblem, RvHookup } from "@mui/icons-material";
+import { DriveEtaOutlined, 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";
@@ -34,6 +34,7 @@ import SecurityIcon from "@mui/icons-material/Security";
 import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
 import SpeedIcon from "@mui/icons-material/Speed";
 import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
+import TaxiAlertIcon from "@mui/icons-material/TaxiAlert";
 
 export const pageMenu = [
     {
@@ -201,6 +202,15 @@ export const pageMenu = [
                         badges: [{ key: "mission.request_portal" }],
                         permissions: ["all"],
                     },
+                    {
+                        id: "machinesTypeReports",
+                        label: "نوع ماشین‌ها",
+                        icon: <TaxiAlertIcon sx={{ width: "inherit", height: "inherit" }} />,
+                        type: "page",
+                        route: "/dashboard/road-missions/reports/machineTypeReports",
+                        badges: [{ key: "mission.request_portal" }],
+                        permissions: ["all"],
+                    },
                 ],
             },
         ],

src/core/utils/pageMenuDev.js

@@ -1,4 +1,4 @@
-import { Mediation, ReportProblem, RvHookup } from "@mui/icons-material";
+import { DriveEtaOutlined, 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";
@@ -31,6 +31,7 @@ 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 TaxiAlertIcon from "@mui/icons-material/TaxiAlert";
 import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
 
 export const pageMenuDev = [
@@ -199,6 +200,15 @@ export const pageMenuDev = [
                         badges: [{ key: "mission.request_portal" }],
                         permissions: ["all"],
                     },
+                    {
+                        id: "machinesTypeReports",
+                        label: "نوع ماشین‌ها",
+                        icon: <TaxiAlertIcon sx={{ width: "inherit", height: "inherit" }} />,
+                        type: "page",
+                        route: "/dashboard/road-missions/reports/machineTypeReports",
+                        badges: [{ key: "mission.request_portal" }],
+                        permissions: ["all"],
+                    },
                 ],
             },
         ],

src/core/utils/routes.js

@@ -255,6 +255,14 @@ export const EXPORT_GET_MACHINES_COUNTRY_ACTIVITY_REPORT =
     api + "/api/v3/missions/report_machine/country_machines_activity_excel";
 export const EXPORT_GET_MACHINES_PROVINCE_ACTIVITY_REPORT =
     api + "/api/v3/missions/report_machine/province_machines_activity_excel";
+
+export const GET_MACHINES_TYPE_COUNTRY_ACTIVITY_REPORT =
+    api + "/api/v3/missions/report_machine/country_machine_types_activity";
+export const GET_MACHINES_TYPE_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/missions/report_machine/province_machine_types_activity";
+export const EXPORT_GET_MACHINES_TYPE_COUNTRY_ACTIVITY_REPORT =
+    api + "/api/v3/missions/report_machine/country_machine_types_activity_excel";
+export const EXPORT_GET_MACHINES_TYPE_PROVINCE_ACTIVITY_REPORT =
+    api + "/api/v3/missions/report_machine/province_machine_types_activity_excel";
 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";
@@ -295,3 +303,4 @@ export const GET_CITIES_LIST = api + "/api/v3/cities/list";
 export const GET_STATIONS_LIST = api + "/api/v3/road_maintenance_station";
 export const UPDATE_MACHINE_STATUS_AND_LOCATION = api + "/api/v3/cmms_machines";
 export const GET_MACHINE_MISSIONS_DETAILS = api + "/api/v3/missions/report_machine/machine_details_report";
+export const GET_MACHINE_TYPE_MISSIONS_DETAILS = api + "/api/v3/missions/report_machine/machine_type_details_report";