feature/machines_report #6
@@ -0,0 +1,18 @@
|
|||||||
|
import MachinesReportsPage from "@/components/dashboard/roadMissions/reports/machinesReports";
|
||||||
|
import WithPermission from "@/core/middlewares/withPermission";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "کارتابل گزارش ماشینها",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<WithPermission
|
||||||
|
permission_name={[
|
||||||
|
"all", // TODO : change permission
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<MachinesReportsPage />
|
||||||
|
</WithPermission>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -38,7 +38,6 @@ const StartMissionContent = ({ rowId, mutate, setOpenStartMissionDialog }) => {
|
|||||||
const onSubmit = (values) => {
|
const onSubmit = (values) => {
|
||||||
const formattedDate = values.start_date;
|
const formattedDate = values.start_date;
|
||||||
const formattedTime = format(values.start_time, "HH:mm");
|
const formattedTime = format(values.start_time, "HH:mm");
|
||||||
console.log(formattedDate, formattedTime);
|
|
||||||
|
|
||||||
requestServer(`${START_MISSION}/${rowId}`, "post", {
|
requestServer(`${START_MISSION}/${rowId}`, "post", {
|
||||||
data: {
|
data: {
|
||||||
|
|||||||
@@ -0,0 +1,77 @@
|
|||||||
|
"use client";
|
||||||
|
import {
|
||||||
|
EXPORT_GET_MACHINES_COUNTRY_ACTIVITY_REPORT,
|
||||||
|
EXPORT_GET_MACHINES_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_COUNTRY_ACTIVITY_REPORT
|
||||||
|
: EXPORT_GET_MACHINES_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;
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
"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: "machine_id",
|
||||||
|
header: "کد یکتا",
|
||||||
|
id: "machine_id",
|
||||||
|
enableColumnFilter: false,
|
||||||
|
enableSorting: false,
|
||||||
|
datatype: "numeric",
|
||||||
|
grow: false,
|
||||||
|
size: 50,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "car_name",
|
||||||
|
header: "مدل ماشین",
|
||||||
|
id: "car_name",
|
||||||
|
enableColumnFilter: false,
|
||||||
|
enableSorting: false,
|
||||||
|
datatype: "text",
|
||||||
|
grow: false,
|
||||||
|
size: 50,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "machine_code",
|
||||||
|
header: "کد ماشین",
|
||||||
|
id: "machine_code",
|
||||||
|
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={"roadMissionReport"}
|
||||||
|
table_name={"roadMissionReportList"}
|
||||||
|
enablePagination={false}
|
||||||
|
specialFilter={specialFilter}
|
||||||
|
enableRowActions
|
||||||
|
RowActions={RowActions}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MachinesReportsList;
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
|
||||||
|
import { GET_MACHINE_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_MISSIONS_DETAILS}?machine_id=${row.machine_id}`}
|
||||||
|
page_name={"roadMissionsTransportation"}
|
||||||
|
table_name={"roadMissionsTransportationMachinesList"}
|
||||||
|
positionActionsColumn={"first"}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default MachineMissionsList;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import MissionDetails from "./MissionDitails";
|
||||||
|
|
||||||
|
const RowActions = ({ row }) => {
|
||||||
|
return <MissionDetails row={row} />;
|
||||||
|
};
|
||||||
|
export default RowActions;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
"use client";
|
||||||
|
import PageTitle from "@/core/components/PageTitle";
|
||||||
|
import { GET_MACHINES_COUNTRY_ACTIVITY_REPORT, GET_MACHINES_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 MachinesReportsPage = () => {
|
||||||
|
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_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_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 MachinesReportsPage;
|
||||||
@@ -192,6 +192,15 @@ export const pageMenu = [
|
|||||||
badges: [{ key: "mission.request_portal" }],
|
badges: [{ key: "mission.request_portal" }],
|
||||||
permissions: ["all"],
|
permissions: ["all"],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "machinesReports",
|
||||||
|
label: "ماشینها",
|
||||||
|
icon: <DriveEtaIcon sx={{ width: "inherit", height: "inherit" }} />,
|
||||||
|
type: "page",
|
||||||
|
route: "/dashboard/road-missions/reports/machinesReports",
|
||||||
|
badges: [{ key: "mission.request_portal" }],
|
||||||
|
permissions: ["all"],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -190,6 +190,15 @@ export const pageMenuDev = [
|
|||||||
badges: [{ key: "mission.request_portal" }],
|
badges: [{ key: "mission.request_portal" }],
|
||||||
permissions: ["all"],
|
permissions: ["all"],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "machinesReports",
|
||||||
|
label: "ماشینها",
|
||||||
|
icon: <DriveEtaIcon sx={{ width: "inherit", height: "inherit" }} />,
|
||||||
|
type: "page",
|
||||||
|
route: "/dashboard/road-missions/reports/machinesReports",
|
||||||
|
badges: [{ key: "mission.request_portal" }],
|
||||||
|
permissions: ["all"],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -249,6 +249,12 @@ export const FINISH_MISSION = api + "/api/v3/missions/control_unit/finish";
|
|||||||
export const GET_ROAD_MISSIONS_VIOLATIONS_LIST = api + "/api/v3/missions/violation_management";
|
export const GET_ROAD_MISSIONS_VIOLATIONS_LIST = api + "/api/v3/missions/violation_management";
|
||||||
export const GET_MISSION_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/missions/report/country_activity";
|
export const GET_MISSION_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/missions/report/country_activity";
|
||||||
export const GET_MISSION_CITY_ACTIVITY_REPORT = api + "/api/v3/missions/report/country_activity";
|
export const GET_MISSION_CITY_ACTIVITY_REPORT = api + "/api/v3/missions/report/country_activity";
|
||||||
|
export const GET_MACHINES_COUNTRY_ACTIVITY_REPORT = api + "/api/v3/missions/report_machine/country_machines_activity";
|
||||||
|
export const GET_MACHINES_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/missions/report_machine/province_machines_activity";
|
||||||
|
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 CREATE_VIOLATION = api + "/api/v3/missions/violation_management";
|
export const CREATE_VIOLATION = api + "/api/v3/missions/violation_management";
|
||||||
export const EDIT_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_COUNTRY_ROAD_MISSIONS_REPORTS = api + "/api/v3/missions/report/country_excel_activity";
|
||||||
@@ -288,3 +294,4 @@ export const GET_PROVINCES_LIST = api + "/api/v3/provinces/list";
|
|||||||
export const GET_CITIES_LIST = api + "/api/v3/cities/list";
|
export const GET_CITIES_LIST = api + "/api/v3/cities/list";
|
||||||
export const GET_STATIONS_LIST = api + "/api/v3/road_maintenance_station";
|
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 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";
|
||||||
|
|||||||
Reference in New Issue
Block a user