RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build and format

Browse Source
This commit is contained in:
AminGhasempoor
2026-06-14 11:48:34 +03:30
parent a80e35a510
commit 806854327a
46 changed files with 1832 additions and 1839 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/(withAuth)/(dashboardLayout)/dashboard/road-missions/reports/driverReports/page.js
View File

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

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

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

36
src/app/(withAuth)/(dashboardLayout)/dashboard/road-missions/reports/machinesReports/page.js
View File

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

142
src/components/dashboard/roadMissions/reports/diverReports/DriverReportsList.jsx
View File

@@ -1,71 +1,71 @@
"use client"; "use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth"; import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { useMemo } from "react"; import { useMemo } from "react";
import Toolbar from "./Toolbar"; import Toolbar from "./Toolbar";
import RowActions from "./RowActions"; import RowActions from "./RowActions";
const DriverReportsList = ({ data, specialFilter }) => { const DriverReportsList = ({ data, specialFilter }) => {
const columns = useMemo(() => { const columns = useMemo(() => {
return [ return [
{ {
accessorKey: "driver_id", accessorKey: "driver_id",
header: "کد یکتا", header: "کد یکتا",
id: "driver_id", id: "driver_id",
enableColumnFilter: false, enableColumnFilter: false,
enableSorting: false, enableSorting: false,
datatype: "numeric", datatype: "numeric",
grow: false, grow: false,
size: 50, size: 50,
}, },
{ {
accessorKey: "driver_name", accessorKey: "driver_name",
header: "نام راننده", header: "نام راننده",
id: "driver_name", id: "driver_name",
enableColumnFilter: false, enableColumnFilter: false,
enableSorting: false, enableSorting: false,
datatype: "text", datatype: "text",
grow: false, grow: false,
size: 50, size: 50,
}, },
{ {
accessorKey: "func", accessorKey: "func",
header: "کارکرد", header: "کارکرد",
id: "func", id: "func",
enableColumnFilter: false, enableColumnFilter: false,
enableSorting: false, enableSorting: false,
datatype: "number", datatype: "number",
grow: false, grow: false,
size: 50, size: 50,
}, },
{ {
accessorKey: "missions", accessorKey: "missions",
header: "تعداد ماموریت", header: "تعداد ماموریت",
id: "missions", id: "missions",
enableColumnFilter: false, enableColumnFilter: false,
enableSorting: false, enableSorting: false,
datatype: "number", datatype: "number",
grow: false, grow: false,
size: 50, size: 50,
}, },
]; ];
}, []); }, []);
return ( return (
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}> <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth <DataTableWithAuth
TableToolbar={Toolbar} TableToolbar={Toolbar}
columns={columns} columns={columns}
data={data.data} data={data.data}
page_name={"driverReport"} page_name={"driverReport"}
table_name={"driverReportList"} table_name={"driverReportList"}
enablePagination={false} enablePagination={false}
specialFilter={specialFilter} specialFilter={specialFilter}
enableRowActions enableRowActions
RowActions={RowActions} RowActions={RowActions}
/> />
</Box> </Box>
); );
}; };
export default DriverReportsList; export default DriverReportsList;

212
src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/DriverDetailsDialog/DriverList/index.jsx
View File

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

54
src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/index.jsx
View File

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

91
src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/index.jsx
View File

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

92
src/components/dashboard/roadMissions/reports/diverReports/RowActions/RouteDetail/ShowRoute.jsx
View File

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

114
src/components/dashboard/roadMissions/reports/diverReports/RowActions/RouteDetail/index.jsx
View File

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

12
src/components/dashboard/roadMissions/reports/diverReports/RowActions/index.jsx
View File

@@ -1,6 +1,6 @@
import DriverDetails from "./DriverDetails"; import DriverDetails from "./DriverDetails";
const RowActions = ({ row }) => { const RowActions = ({ row }) => {
return <DriverDetails row={row} />; return <DriverDetails row={row} />;
}; };
export default RowActions; export default RowActions;

54
src/components/dashboard/roadMissions/reports/diverReports/Search/FromDateController.jsx
View File

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

88
src/components/dashboard/roadMissions/reports/diverReports/Search/SearchReportField.jsx
View File

@@ -1,44 +1,44 @@
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import { Button, Grid } from "@mui/material"; import { Button, Grid } from "@mui/material";
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
import FromDateController from "./FromDateController"; import FromDateController from "./FromDateController";
import SelectProvince from "./SelectProvince"; import SelectProvince from "./SelectProvince";
import ToDateController from "./ToDateController"; import ToDateController from "./ToDateController";
const SearchReportField = ({ control, hasProvincesPermission }) => { const SearchReportField = ({ control, hasProvincesPermission }) => {
return ( return (
<Grid container spacing={2} sx={{ py: 2 }}> <Grid container spacing={2} sx={{ py: 2 }}>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}> <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<FromDateController control={control} /> <FromDateController control={control} />
</Grid> </Grid>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}> <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<ToDateController control={control} /> <ToDateController control={control} />
</Grid> </Grid>
{hasProvincesPermission && ( {hasProvincesPermission && (
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
<SelectProvince control={control} /> <SelectProvince control={control} />
</Grid> </Grid>
)} )}
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}> <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<Controller <Controller
name="submitButton" name="submitButton"
control={control} control={control}
render={({ field: { value, onChange }, formState: { isSubmitting } }) => ( render={({ field: { value, onChange }, formState: { isSubmitting } }) => (
<Button <Button
variant="contained" variant="contained"
size="medium" size="medium"
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
endIcon={<SearchIcon />} endIcon={<SearchIcon />}
fullWidth fullWidth
> >
{isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"} {isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
</Button> </Button>
)} )}
/> />
</Grid> </Grid>
</Grid> </Grid>
); );
}; };
export default SearchReportField; export default SearchReportField;

90
src/components/dashboard/roadMissions/reports/diverReports/Search/SelectProvince.jsx
View File

@@ -1,45 +1,45 @@
import useProvinces from "@/lib/hooks/useProvince"; import useProvinces from "@/lib/hooks/useProvince";
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material"; import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
const SelectProvince = ({ control }) => { const SelectProvince = ({ control }) => {
const { provinces, loadingProvinces, errorProvinces } = useProvinces(); const { provinces, loadingProvinces, errorProvinces } = useProvinces();
return ( return (
<Controller <Controller
name="province_id" name="province_id"
control={control} control={control}
render={({ field, fieldState: { error } }) => ( render={({ field, fieldState: { error } }) => (
<FormControl error={!!error} size="small" fullWidth> <FormControl error={!!error} size="small" fullWidth>
<InputLabel id="demo-error-label">استان</InputLabel> <InputLabel id="demo-error-label">استان</InputLabel>
<Select <Select
{...field} {...field}
labelId="demo-error-label" labelId="demo-error-label"
id="province_id" id="province_id"
value={loadingProvinces ? "loading" : field.value || ""} value={loadingProvinces ? "loading" : field.value || ""}
label="استان" label="استان"
onChange={field.onChange} onChange={field.onChange}
> >
{loadingProvinces ? ( {loadingProvinces ? (
<MenuItem value={"loading"}>در حال بارگذاری...</MenuItem> <MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
) : errorProvinces ? ( ) : errorProvinces ? (
<MenuItem value={"error"}>خطا در بارگذاری</MenuItem> <MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
) : ( ) : (
[ [
<MenuItem key="-1" value={"-1"}> <MenuItem key="-1" value={"-1"}>
کل کشور کل کشور
</MenuItem>, </MenuItem>,
...provinces.map((province) => ( ...provinces.map((province) => (
<MenuItem key={province.id} value={province.id}> <MenuItem key={province.id} value={province.id}>
{province.name_fa} {province.name_fa}
</MenuItem> </MenuItem>
)), )),
] ]
)} )}
</Select> </Select>
{error && <FormHelperText>{error.message}</FormHelperText>} {error && <FormHelperText>{error.message}</FormHelperText>}
</FormControl> </FormControl>
)} )}
/> />
); );
}; };
export default SelectProvince; export default SelectProvince;

60
src/components/dashboard/roadMissions/reports/diverReports/Search/ToDateController.jsx
View File

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

26
src/components/dashboard/roadMissions/reports/diverReports/Search/index.jsx
View File

@@ -1,13 +1,13 @@
import StyledForm from "@/core/components/StyledForm"; import StyledForm from "@/core/components/StyledForm";
import SearchReportField from "./SearchReportField"; import SearchReportField from "./SearchReportField";
const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => { const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => {
return ( return (
<> <>
<StyledForm onSubmit={handleSubmit(onSearchSubmit)}> <StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
<SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} /> <SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
</StyledForm> </StyledForm>
</> </>
); );
}; };
export default SearchReportList; export default SearchReportList;

22
src/components/dashboard/roadMissions/reports/diverReports/Toolbar.jsx
View File

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

5
src/components/dashboard/roadMissions/reports/diverReports/index.jsx
View File

@@ -1,9 +1,6 @@
"use client"; "use client";
import PageTitle from "@/core/components/PageTitle"; import PageTitle from "@/core/components/PageTitle";
import { import { GET_DRIVER_COUNTRY_ACTIVITY_REPORT, GET_DRIVER_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
GET_DRIVER_COUNTRY_ACTIVITY_REPORT,
GET_DRIVER_PROVINCE_ACTIVITY_REPORT,
} from "@/core/utils/routes";
import { useAuth } from "@/lib/contexts/auth"; import { useAuth } from "@/lib/contexts/auth";
import { usePermissions } from "@/lib/hooks/usePermissions"; import { usePermissions } from "@/lib/hooks/usePermissions";
import useRequest from "@/lib/hooks/useRequest"; import useRequest from "@/lib/hooks/useRequest";

154
src/components/dashboard/roadMissions/reports/machinesReports/ExcelPrint/index.jsx
View File

@@ -1,77 +1,77 @@
"use client"; "use client";
import { import {
EXPORT_GET_MACHINES_COUNTRY_ACTIVITY_REPORT, EXPORT_GET_MACHINES_COUNTRY_ACTIVITY_REPORT,
EXPORT_GET_MACHINES_PROVINCE_ACTIVITY_REPORT, EXPORT_GET_MACHINES_PROVINCE_ACTIVITY_REPORT,
} from "@/core/utils/routes"; } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest"; import useRequest from "@/lib/hooks/useRequest";
import { useTheme } from "@emotion/react"; import { useTheme } from "@emotion/react";
import DescriptionIcon from "@mui/icons-material/Description"; import DescriptionIcon from "@mui/icons-material/Description";
import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material"; import { Button, CircularProgress, IconButton, useMediaQuery } from "@mui/material";
import FileSaver from "file-saver"; import FileSaver from "file-saver";
import moment from "jalali-moment"; import moment from "jalali-moment";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
const PrintExcel = ({ table, filterData }) => { const PrintExcel = ({ table, filterData }) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const requestServer = useRequest({ notificationSuccess: true }); const requestServer = useRequest({ notificationSuccess: true });
const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => { const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
if (filter.value) { if (filter.value) {
acc.push({ id: filter.id, value: filter.value }); acc.push({ id: filter.id, value: filter.value });
} }
return acc; return acc;
}, []); }, []);
const filterParams = useMemo(() => { const filterParams = useMemo(() => {
const params = new URLSearchParams(); const params = new URLSearchParams();
activeFilters.length > 0 && activeFilters.length > 0 &&
activeFilters.map((filter, index) => { activeFilters.map((filter, index) => {
params.set(`${filter.id}`, filter.value); params.set(`${filter.id}`, filter.value);
}); });
return params; return params;
}, [activeFilters]); }, [activeFilters]);
const clickHandler = () => { const clickHandler = () => {
setLoading(true); setLoading(true);
const CountryOrProvince = activeFilters.find((item) => item.id === "province_id"); const CountryOrProvince = activeFilters.find((item) => item.id === "province_id");
const requestUrl = const requestUrl =
CountryOrProvince.value === "-1" CountryOrProvince.value === "-1"
? EXPORT_GET_MACHINES_COUNTRY_ACTIVITY_REPORT ? EXPORT_GET_MACHINES_COUNTRY_ACTIVITY_REPORT
: EXPORT_GET_MACHINES_PROVINCE_ACTIVITY_REPORT; : EXPORT_GET_MACHINES_PROVINCE_ACTIVITY_REPORT;
requestServer(`${requestUrl}?${filterParams}`, "get", { requestServer(`${requestUrl}?${filterParams}`, "get", {
requestOptions: { responseType: "blob" }, requestOptions: { responseType: "blob" },
}) })
.then((response) => { .then((response) => {
const filename = `خروجی کارتابل گزارشات گشت راهداری تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`; const filename = `خروجی کارتابل گزارشات گشت راهداری تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
FileSaver.saveAs(response.data, filename); FileSaver.saveAs(response.data, filename);
}) })
.catch(() => {}) .catch(() => {})
.finally(() => { .finally(() => {
setLoading(false); setLoading(false);
}); });
}; };
return ( return (
<> <>
{isMobile ? ( {isMobile ? (
<IconButton aria-label="خروجی اکسل" color="success" onClick={clickHandler}> <IconButton aria-label="خروجی اکسل" color="success" onClick={clickHandler}>
<DescriptionIcon sx={{ fontSize: "25px" }} /> <DescriptionIcon sx={{ fontSize: "25px" }} />
</IconButton> </IconButton>
) : ( ) : (
<Button <Button
color="success" color="success"
variant="contained" variant="contained"
size="small" size="small"
disabled={loading} disabled={loading}
sx={{ textTransform: "unset", alignSelf: "center" }} sx={{ textTransform: "unset", alignSelf: "center" }}
startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />} startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
onClick={clickHandler} onClick={clickHandler}
> >
خروجی اکسل خروجی اکسل
</Button> </Button>
)} )}
</> </>
); );
}; };
export default PrintExcel; export default PrintExcel;

162
src/components/dashboard/roadMissions/reports/machinesReports/MachinesReportsList.jsx
View File

@@ -1,81 +1,81 @@
"use client"; "use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth"; import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import { useMemo } from "react"; import { useMemo } from "react";
import Toolbar from "./Toolbar"; import Toolbar from "./Toolbar";
import RowActions from "./RowActions"; import RowActions from "./RowActions";
const MachinesReportsList = ({ data, specialFilter }) => { const MachinesReportsList = ({ data, specialFilter }) => {
const columns = useMemo(() => { const columns = useMemo(() => {
return [ return [
{ {
accessorKey: "machine_id", accessorKey: "machine_id",
header: "کد یکتا", header: "کد یکتا",
id: "machine_id", id: "machine_id",
enableColumnFilter: false, enableColumnFilter: false,
enableSorting: false, enableSorting: false,
datatype: "numeric", datatype: "numeric",
grow: false, grow: false,
size: 50, size: 50,
}, },
{ {
accessorKey: "car_name", accessorKey: "car_name",
header: "مدل ماشین", header: "مدل ماشین",
id: "car_name", id: "car_name",
enableColumnFilter: false, enableColumnFilter: false,
enableSorting: false, enableSorting: false,
datatype: "text", datatype: "text",
grow: false, grow: false,
size: 50, size: 50,
}, },
{ {
accessorKey: "machine_code", accessorKey: "machine_code",
header: "کد ماشین", header: "کد ماشین",
id: "machine_code", id: "machine_code",
enableColumnFilter: false, enableColumnFilter: false,
enableSorting: false, enableSorting: false,
datatype: "text", datatype: "text",
grow: false, grow: false,
size: 50, size: 50,
}, },
{ {
accessorKey: "func", accessorKey: "func",
header: "کارکرد", header: "کارکرد",
id: "func", id: "func",
enableColumnFilter: false, enableColumnFilter: false,
enableSorting: false, enableSorting: false,
datatype: "number", datatype: "number",
grow: false, grow: false,
size: 50, size: 50,
}, },
{ {
accessorKey: "missions", accessorKey: "missions",
header: "تعداد ماموریت", header: "تعداد ماموریت",
id: "missions", id: "missions",
enableColumnFilter: false, enableColumnFilter: false,
enableSorting: false, enableSorting: false,
datatype: "number", datatype: "number",
grow: false, grow: false,
size: 50, size: 50,
}, },
]; ];
}, []); }, []);
return ( return (
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}> <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth <DataTableWithAuth
TableToolbar={Toolbar} TableToolbar={Toolbar}
columns={columns} columns={columns}
data={data.data} data={data.data}
page_name={"roadMissionReport"} page_name={"roadMissionReport"}
table_name={"roadMissionReportList"} table_name={"roadMissionReportList"}
enablePagination={false} enablePagination={false}
specialFilter={specialFilter} specialFilter={specialFilter}
enableRowActions enableRowActions
RowActions={RowActions} RowActions={RowActions}
/> />
</Box> </Box>
); );
}; };
export default MachinesReportsList; export default MachinesReportsList;

212
src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/MachineMissionsDetailsDialog/MachineMissionsList/index.jsx
View File

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

54
src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/index.jsx
View File

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

94
src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/index.jsx
View File

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

92
src/components/dashboard/roadMissions/reports/machinesReports/RowActions/RouteDetail/ShowRoute.jsx
View File

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

114
src/components/dashboard/roadMissions/reports/machinesReports/RowActions/RouteDetail/index.jsx
View File

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

12
src/components/dashboard/roadMissions/reports/machinesReports/RowActions/index.jsx
View File

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

54
src/components/dashboard/roadMissions/reports/machinesReports/Search/FromDateController.jsx
View File

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

88
src/components/dashboard/roadMissions/reports/machinesReports/Search/SearchReportField.jsx
View File

@@ -1,44 +1,44 @@
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import { Button, Grid } from "@mui/material"; import { Button, Grid } from "@mui/material";
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
import FromDateController from "./FromDateController"; import FromDateController from "./FromDateController";
import SelectProvince from "./SelectProvince"; import SelectProvince from "./SelectProvince";
import ToDateController from "./ToDateController"; import ToDateController from "./ToDateController";
const SearchReportField = ({ control, hasProvincesPermission }) => { const SearchReportField = ({ control, hasProvincesPermission }) => {
return ( return (
<Grid container spacing={2} sx={{ py: 2 }}> <Grid container spacing={2} sx={{ py: 2 }}>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}> <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<FromDateController control={control} /> <FromDateController control={control} />
</Grid> </Grid>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}> <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<ToDateController control={control} /> <ToDateController control={control} />
</Grid> </Grid>
{hasProvincesPermission && ( {hasProvincesPermission && (
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
<SelectProvince control={control} /> <SelectProvince control={control} />
</Grid> </Grid>
)} )}
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}> <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<Controller <Controller
name="submitButton" name="submitButton"
control={control} control={control}
render={({ field: { value, onChange }, formState: { isSubmitting } }) => ( render={({ field: { value, onChange }, formState: { isSubmitting } }) => (
<Button <Button
variant="contained" variant="contained"
size="medium" size="medium"
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
endIcon={<SearchIcon />} endIcon={<SearchIcon />}
fullWidth fullWidth
> >
{isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"} {isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
</Button> </Button>
)} )}
/> />
</Grid> </Grid>
</Grid> </Grid>
); );
}; };
export default SearchReportField; export default SearchReportField;

90
src/components/dashboard/roadMissions/reports/machinesReports/Search/SelectProvince.jsx
View File

@@ -1,45 +1,45 @@
import useProvinces from "@/lib/hooks/useProvince"; import useProvinces from "@/lib/hooks/useProvince";
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material"; import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
const SelectProvince = ({ control }) => { const SelectProvince = ({ control }) => {
const { provinces, loadingProvinces, errorProvinces } = useProvinces(); const { provinces, loadingProvinces, errorProvinces } = useProvinces();
return ( return (
<Controller <Controller
name="province_id" name="province_id"
control={control} control={control}
render={({ field, fieldState: { error } }) => ( render={({ field, fieldState: { error } }) => (
<FormControl error={!!error} size="small" fullWidth> <FormControl error={!!error} size="small" fullWidth>
<InputLabel id="demo-error-label">استان</InputLabel> <InputLabel id="demo-error-label">استان</InputLabel>
<Select <Select
{...field} {...field}
labelId="demo-error-label" labelId="demo-error-label"
id="province_id" id="province_id"
value={loadingProvinces ? "loading" : field.value || ""} value={loadingProvinces ? "loading" : field.value || ""}
label="استان" label="استان"
onChange={field.onChange} onChange={field.onChange}
> >
{loadingProvinces ? ( {loadingProvinces ? (
<MenuItem value={"loading"}>در حال بارگذاری...</MenuItem> <MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
) : errorProvinces ? ( ) : errorProvinces ? (
<MenuItem value={"error"}>خطا در بارگذاری</MenuItem> <MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
) : ( ) : (
[ [
<MenuItem key="-1" value={"-1"}> <MenuItem key="-1" value={"-1"}>
کل کشور کل کشور
</MenuItem>, </MenuItem>,
...provinces.map((province) => ( ...provinces.map((province) => (
<MenuItem key={province.id} value={province.id}> <MenuItem key={province.id} value={province.id}>
{province.name_fa} {province.name_fa}
</MenuItem> </MenuItem>
)), )),
] ]
)} )}
</Select> </Select>
{error && <FormHelperText>{error.message}</FormHelperText>} {error && <FormHelperText>{error.message}</FormHelperText>}
</FormControl> </FormControl>
)} )}
/> />
); );
}; };
export default SelectProvince; export default SelectProvince;

60
src/components/dashboard/roadMissions/reports/machinesReports/Search/ToDateController.jsx
View File

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

26
src/components/dashboard/roadMissions/reports/machinesReports/Search/index.jsx
View File

@@ -1,13 +1,13 @@
import StyledForm from "@/core/components/StyledForm"; import StyledForm from "@/core/components/StyledForm";
import SearchReportField from "./SearchReportField"; import SearchReportField from "./SearchReportField";
const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => { const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => {
return ( return (
<> <>
<StyledForm onSubmit={handleSubmit(onSearchSubmit)}> <StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
<SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} /> <SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
</StyledForm> </StyledForm>
</> </>
); );
}; };
export default SearchReportList; export default SearchReportList;

22
src/components/dashboard/roadMissions/reports/machinesReports/Toolbar.jsx
View File

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

214
src/components/dashboard/roadMissions/reports/machinesReports/index.jsx
View File

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

122
src/components/dashboard/roadMissions/reports/machinesTypeReports/MachinesReportsList.jsx
View File

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

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

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

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

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

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

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

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

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

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

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

16
src/components/dashboard/roadMissions/reports/machinesTypeReports/RowActions/index.jsx
View File

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

54
src/components/dashboard/roadMissions/reports/machinesTypeReports/Search/FromDateController.jsx
View File

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

88
src/components/dashboard/roadMissions/reports/machinesTypeReports/Search/SearchReportField.jsx
View File

@@ -1,44 +1,44 @@
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import { Button, Grid } from "@mui/material"; import { Button, Grid } from "@mui/material";
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
import FromDateController from "./FromDateController"; import FromDateController from "./FromDateController";
import SelectProvince from "./SelectProvince"; import SelectProvince from "./SelectProvince";
import ToDateController from "./ToDateController"; import ToDateController from "./ToDateController";
const SearchReportField = ({ control, hasProvincesPermission }) => { const SearchReportField = ({ control, hasProvincesPermission }) => {
return ( return (
<Grid container spacing={2} sx={{ py: 2 }}> <Grid container spacing={2} sx={{ py: 2 }}>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}> <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<FromDateController control={control} /> <FromDateController control={control} />
</Grid> </Grid>
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}> <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<ToDateController control={control} /> <ToDateController control={control} />
</Grid> </Grid>
{hasProvincesPermission && ( {hasProvincesPermission && (
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
<SelectProvince control={control} /> <SelectProvince control={control} />
</Grid> </Grid>
)} )}
<Grid item xs={12} md={hasProvincesPermission ? 3 : 4}> <Grid item xs={12} md={hasProvincesPermission ? 3 : 4}>
<Controller <Controller
name="submitButton" name="submitButton"
control={control} control={control}
render={({ field: { value, onChange }, formState: { isSubmitting } }) => ( render={({ field: { value, onChange }, formState: { isSubmitting } }) => (
<Button <Button
variant="contained" variant="contained"
size="medium" size="medium"
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
endIcon={<SearchIcon />} endIcon={<SearchIcon />}
fullWidth fullWidth
> >
{isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"} {isSubmitting ? "درحال دریافت اطلاعات" : "جستجو"}
</Button> </Button>
)} )}
/> />
</Grid> </Grid>
</Grid> </Grid>
); );
}; };
export default SearchReportField; export default SearchReportField;

90
src/components/dashboard/roadMissions/reports/machinesTypeReports/Search/SelectProvince.jsx
View File

@@ -1,45 +1,45 @@
import useProvinces from "@/lib/hooks/useProvince"; import useProvinces from "@/lib/hooks/useProvince";
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material"; import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
const SelectProvince = ({ control }) => { const SelectProvince = ({ control }) => {
const { provinces, loadingProvinces, errorProvinces } = useProvinces(); const { provinces, loadingProvinces, errorProvinces } = useProvinces();
return ( return (
<Controller <Controller
name="province_id" name="province_id"
control={control} control={control}
render={({ field, fieldState: { error } }) => ( render={({ field, fieldState: { error } }) => (
<FormControl error={!!error} size="small" fullWidth> <FormControl error={!!error} size="small" fullWidth>
<InputLabel id="demo-error-label">استان</InputLabel> <InputLabel id="demo-error-label">استان</InputLabel>
<Select <Select
{...field} {...field}
labelId="demo-error-label" labelId="demo-error-label"
id="province_id" id="province_id"
value={loadingProvinces ? "loading" : field.value || ""} value={loadingProvinces ? "loading" : field.value || ""}
label="استان" label="استان"
onChange={field.onChange} onChange={field.onChange}
> >
{loadingProvinces ? ( {loadingProvinces ? (
<MenuItem value={"loading"}>در حال بارگذاری...</MenuItem> <MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
) : errorProvinces ? ( ) : errorProvinces ? (
<MenuItem value={"error"}>خطا در بارگذاری</MenuItem> <MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
) : ( ) : (
[ [
<MenuItem key="-1" value={"-1"}> <MenuItem key="-1" value={"-1"}>
کل کشور کل کشور
</MenuItem>, </MenuItem>,
...provinces.map((province) => ( ...provinces.map((province) => (
<MenuItem key={province.id} value={province.id}> <MenuItem key={province.id} value={province.id}>
{province.name_fa} {province.name_fa}
</MenuItem> </MenuItem>
)), )),
] ]
)} )}
</Select> </Select>
{error && <FormHelperText>{error.message}</FormHelperText>} {error && <FormHelperText>{error.message}</FormHelperText>}
</FormControl> </FormControl>
)} )}
/> />
); );
}; };
export default SelectProvince; export default SelectProvince;

60
src/components/dashboard/roadMissions/reports/machinesTypeReports/Search/ToDateController.jsx
View File

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

26
src/components/dashboard/roadMissions/reports/machinesTypeReports/Search/index.jsx
View File

@@ -1,13 +1,13 @@
import StyledForm from "@/core/components/StyledForm"; import StyledForm from "@/core/components/StyledForm";
import SearchReportField from "./SearchReportField"; import SearchReportField from "./SearchReportField";
const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => { const SearchReportList = ({ handleSubmit, onSearchSubmit, control, hasProvincesPermission }) => {
return ( return (
<> <>
<StyledForm onSubmit={handleSubmit(onSearchSubmit)}> <StyledForm onSubmit={handleSubmit(onSearchSubmit)}>
<SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} /> <SearchReportField control={control} hasProvincesPermission={hasProvincesPermission} />
</StyledForm> </StyledForm>
</> </>
); );
}; };
export default SearchReportList; export default SearchReportList;

22
src/components/dashboard/roadMissions/reports/machinesTypeReports/Toolbar.jsx
View File

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

9
src/core/utils/routes.js
View File

@@ -256,8 +256,10 @@ export const EXPORT_GET_MACHINES_COUNTRY_ACTIVITY_REPORT =
export const EXPORT_GET_MACHINES_PROVINCE_ACTIVITY_REPORT = export const EXPORT_GET_MACHINES_PROVINCE_ACTIVITY_REPORT =
api + "/api/v3/missions/report_machine/province_machines_activity_excel"; api + "/api/v3/missions/report_machine/province_machines_activity_excel";
export const GET_DRIVER_COUNTRY_ACTIVITY_REPORT = api + "/api/v3/missions/report_machine/country_machine_drivers_activity"; export const GET_DRIVER_COUNTRY_ACTIVITY_REPORT =
export const GET_DRIVER_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/missions/report_machine/province_machine_drivers_activity"; api + "/api/v3/missions/report_machine/country_machine_drivers_activity";
export const GET_DRIVER_PROVINCE_ACTIVITY_REPORT =
api + "/api/v3/missions/report_machine/province_machine_drivers_activity";
export const EXPORT_GET_DRIVER_COUNTRY_ACTIVITY_REPORT = export const EXPORT_GET_DRIVER_COUNTRY_ACTIVITY_REPORT =
api + "/api/v3/missions/report_machine/country_machine_drivers_activity_excel"; api + "/api/v3/missions/report_machine/country_machine_drivers_activity_excel";
export const EXPORT_GET_DRIVER_PROVINCE_ACTIVITY_REPORT = export const EXPORT_GET_DRIVER_PROVINCE_ACTIVITY_REPORT =
@@ -265,7 +267,8 @@ export const EXPORT_GET_DRIVER_PROVINCE_ACTIVITY_REPORT =
export const GET_MACHINES_TYPE_COUNTRY_ACTIVITY_REPORT = export const GET_MACHINES_TYPE_COUNTRY_ACTIVITY_REPORT =
api + "/api/v3/missions/report_machine/country_machine_types_activity"; 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 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 = export const EXPORT_GET_MACHINES_TYPE_COUNTRY_ACTIVITY_REPORT =
api + "/api/v3/missions/report_machine/country_machine_types_activity_excel"; api + "/api/v3/missions/report_machine/country_machine_types_activity_excel";
export const EXPORT_GET_MACHINES_TYPE_PROVINCE_ACTIVITY_REPORT = export const EXPORT_GET_MACHINES_TYPE_PROVINCE_ACTIVITY_REPORT =