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

Merge branch develop into feature/machines_report

Browse Source
This commit is contained in:
baslani
2026-06-13 14:04:22 +03:30
parent c6283ae130 be0922cfcc
commit a540d79715
66 changed files with 2903 additions and 2422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
src/components/dashboard/machines/MachinesList.jsx
View File

@@ -1,134 +1,134 @@
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_MACHINES_LIST } from "@/core/utils/routes";
import { Box, Typography } from "@mui/material";
import { useMemo } from "react";
import RowActions from "./RowActions";
const statusOptions = [
{ value: "", label: "همه وضعیت ها" },
{ value: 1, label: "آماده" },
{ value: 2, label: "رزرو" },
{ value: 3, label: "در ماموریت" },
{ value: 4, label: "خارج از رده" },
{ value: 5, label: "در تعمیر" },
{ value: 6, label: "فروخته شده" },
{ value: 7, label: "نیاز به تعمیر" },
];
const MachinesList = () => {
const columns = useMemo(() => {
return [
{
accessorKey: "id",
header: "کد یکتا", // Unique Code
id: "id",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 50,
},
{
header: "اطلاعات ماشین‌ها",
id: "machines_info",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
columns: [
{
accessorKey: "car_name",
header: "نام ماشین",
id: "car_name",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "car_type",
header: "نوع ماشین",
id: "car_type",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "machine_code",
header: "کد ماشین",
id: "machine_code",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "plak_number",
header: "پلاک",
id: "plak_number",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "status",
header: "وضعیت",
id: "status",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
grow: false,
size: 100,
columnSelectOption: () => {
return statusOptions.map((status) => ({
value: status.value,
label: status.label,
}));
},
Cell: ({ row }) => {
const status = statusOptions.find((option) => option.value == row.original.status);
return <Typography variant="body2">{status?.label || ""}</Typography>;
},
},
],
},
];
}, []);
return (
<>
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
need_filter={true}
columns={columns}
table_url={GET_MACHINES_LIST}
page_name={"machines"}
table_name={"machinesList"}
sorting={[{ id: "id", desc: true }]}
enableRowActions
positionActionsColumn={"first"}
RowActions={RowActions}
/>
</Box>
</>
);
};
export default MachinesList;
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_MACHINES_LIST } from "@/core/utils/routes";
import { Box, Typography } from "@mui/material";
import { useMemo } from "react";
import RowActions from "./RowActions";
const statusOptions = [
{ value: "", label: "همه وضعیت ها" },
{ value: 1, label: "آماده" },
{ value: 2, label: "رزرو" },
{ value: 3, label: "در ماموریت" },
{ value: 4, label: "خارج از رده" },
{ value: 5, label: "در تعمیر" },
{ value: 6, label: "فروخته شده" },
{ value: 7, label: "نیاز به تعمیر" },
];
const MachinesList = () => {
const columns = useMemo(() => {
return [
{
accessorKey: "id",
header: "کد یکتا", // Unique Code
id: "id",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 50,
},
{
header: "اطلاعات ماشین‌ها",
id: "machines_info",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
columns: [
{
accessorKey: "car_name",
header: "نام ماشین",
id: "car_name",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "car_type",
header: "نوع ماشین",
id: "car_type",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "machine_code",
header: "کد ماشین",
id: "machine_code",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "plak_number",
header: "پلاک",
id: "plak_number",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "status",
header: "وضعیت",
id: "status",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
grow: false,
size: 100,
columnSelectOption: () => {
return statusOptions.map((status) => ({
value: status.value,
label: status.label,
}));
},
Cell: ({ row }) => {
const status = statusOptions.find((option) => option.value == row.original.status);
return <Typography variant="body2">{status?.label || ""}</Typography>;
},
},
],
},
];
}, []);
return (
<>
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
need_filter={true}
columns={columns}
table_url={GET_MACHINES_LIST}
page_name={"machines"}
table_name={"machinesList"}
sorting={[{ id: "id", desc: true }]}
enableRowActions
positionActionsColumn={"first"}
RowActions={RowActions}
/>
</Box>
</>
);
};
export default MachinesList;

78
src/components/dashboard/machines/RowActions/DeleteDialog/DeleteContent.jsx
View File

@@ -1,39 +1,39 @@
import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
import React, { useState } from "react";
import useRequest from "@/lib/hooks/useRequest";
import { DELETE_TOLL_HOUSE_ITEM } from "@/core/utils/routes";
const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
const [submitting, setSubmitting] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const handleClick = () => {
setSubmitting(true);
requestServer(`${DELETE_TOLL_HOUSE_ITEM}/${rowId}`, "delete")
.then(() => {
mutate();
setOpenDeleteDialog(false);
setSubmitting(false);
})
.catch(() => {
setSubmitting(false);
});
};
return (
<>
<DialogContent>
<Stack alignItems="center" spacing={2}>
<Typography mt={2}>آیا از حذف راهدارخانه اطمینان دارید؟</Typography>
</Stack>
</DialogContent>
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
<Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
خیر !
</Button>
<Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
{submitting ? "درحال حذف..." : "بله اطمینان دارم"}
</Button>
</DialogActions>
</>
);
};
export default DeleteContent;
import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
import React, { useState } from "react";
import useRequest from "@/lib/hooks/useRequest";
import { DELETE_TOLL_HOUSE_ITEM } from "@/core/utils/routes";
const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
const [submitting, setSubmitting] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const handleClick = () => {
setSubmitting(true);
requestServer(`${DELETE_TOLL_HOUSE_ITEM}/${rowId}`, "delete")
.then(() => {
mutate();
setOpenDeleteDialog(false);
setSubmitting(false);
})
.catch(() => {
setSubmitting(false);
});
};
return (
<>
<DialogContent>
<Stack alignItems="center" spacing={2}>
<Typography mt={2}>آیا از حذف راهدارخانه اطمینان دارید؟</Typography>
</Stack>
</DialogContent>
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
<Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
خیر !
</Button>
<Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
{submitting ? "درحال حذف..." : "بله اطمینان دارم"}
</Button>
</DialogActions>
</>
);
};
export default DeleteContent;

68
src/components/dashboard/machines/RowActions/DeleteDialog/index.jsx
View File

@@ -1,34 +1,34 @@
import DeleteIcon from "@mui/icons-material/Delete";
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import DeleteContent from "./DeleteContent";
const DeleteDialog = ({ rowId, mutate }) => {
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
return (
<>
<Tooltip title="حذف">
<IconButton color="error" onClick={() => setOpenDeleteDialog(true)}>
<DeleteIcon />
</IconButton>
</Tooltip>
<Dialog
open={openDeleteDialog}
onClose={() => setOpenDeleteDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"md"}
>
<DialogTitle>حذف راهدارخانه</DialogTitle>
{openDeleteDialog && (
<DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
)}
</Dialog>
</>
);
};
export default DeleteDialog;
import DeleteIcon from "@mui/icons-material/Delete";
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import DeleteContent from "./DeleteContent";
const DeleteDialog = ({ rowId, mutate }) => {
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
return (
<>
<Tooltip title="حذف">
<IconButton color="error" onClick={() => setOpenDeleteDialog(true)}>
<DeleteIcon />
</IconButton>
</Tooltip>
<Dialog
open={openDeleteDialog}
onClose={() => setOpenDeleteDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"md"}
>
<DialogTitle>حذف راهدارخانه</DialogTitle>
{openDeleteDialog && (
<DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
)}
</Dialog>
</>
);
};
export default DeleteDialog;

562
src/components/dashboard/machines/RowActions/Edit/Form/index.jsx
View File

@@ -1,281 +1,281 @@
import StyledForm from "@/core/components/StyledForm";
import {
GET_CITIES_LIST,
GET_PROVINCES_LIST,
GET_STATIONS_LIST,
UPDATE_MACHINE_STATUS_AND_LOCATION,
} from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { Beenhere, ExitToApp } from "@mui/icons-material";
import {
Button,
CircularProgress,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
InputLabel,
MenuItem,
Select,
Stack,
} from "@mui/material";
import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
import { useEffect, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { number, object } from "yup";
const statusOptions = [
{ value: 1, label: "آماده" },
{ value: 2, label: "رزرو" },
{ value: 3, label: "در ماموریت" },
{ value: 4, label: "خارج از رده" },
{ value: 5, label: "در تعمیر" },
{ value: 6, label: "فروخته شده" },
{ value: 7, label: "نیاز به تعمیر" },
];
const validationSchema = object({
status: number().required("انتخاب وضعیت الزامی است"),
province_id: number().required("انتخاب استان الزامی است"),
city_id: number().required("انتخاب شهر الزامی است"),
station_id: number().required("انتخاب راهداری الزامی است"),
});
const EditFormContent = ({ row, rowId, mutate, setOpen }) => {
const requestServer = useRequest();
const [provinces, setProvinces] = useState([]);
const [cities, setCities] = useState([]);
const [stations, setStations] = useState([]);
const [loadingProvinces, setLoadingProvinces] = useState(false);
const [loadingCities, setLoadingCities] = useState(false);
const [loadingStations, setLoadingStations] = useState(false);
const {
control,
handleSubmit,
setValue,
formState: { isSubmitting },
} = useForm({
defaultValues: {
status: row.original.status,
province_id: row.original.province_id,
city_id: row.original.city_id,
station_id: row.original.station_id,
},
resolver: yupResolver(validationSchema),
mode: "all",
});
const provinceId = useWatch({
control,
name: "province_id",
});
const cityId = useWatch({
control,
name: "city_id",
});
const loadProvinces = async () => {
try {
setLoadingProvinces(true);
const response = await requestServer(GET_PROVINCES_LIST, "get");
setProvinces(response.data?.data || []);
} finally {
setLoadingProvinces(false);
}
};
const loadCities = async (provinceId) => {
if (!provinceId) return;
try {
setLoadingCities(true);
const response = await requestServer(`${GET_CITIES_LIST}?province_id=${provinceId}`, "get");
setCities(response.data?.data || []);
} finally {
setLoadingCities(false);
}
};
const loadStations = async (cityId) => {
if (!cityId) return;
try {
setLoadingStations(true);
const response = await requestServer(`${GET_STATIONS_LIST}/search_by_city?city_id=${cityId}`, "get");
setStations(response.data?.data || []);
} finally {
setLoadingStations(false);
}
};
useEffect(() => {
loadProvinces();
}, []);
/**
* Initial edit mode loading
*/
useEffect(() => {
if (row.original.province_id) {
loadCities(row.original.province_id);
}
if (row.original.city_id) {
loadStations(row.original.city_id);
}
}, []);
useEffect(() => {
if (!provinceId) return;
loadCities(provinceId);
if (provinceId !== row.original.province_id) {
setValue("city_id", "");
setValue("station_id", "");
setStations([]);
}
}, [provinceId]);
useEffect(() => {
if (!cityId) return;
loadStations(cityId);
if (cityId !== row.original.city_id) {
setValue("station_id", "");
}
}, [cityId]);
const onSubmit = async (data) => {
const formData = new FormData();
formData.append("status", String(data.status));
formData.append("province_id", String(data.province_id));
formData.append("city_id", String(data.city_id));
formData.append("station_id", String(data.station_id));
try {
await requestServer(`${UPDATE_MACHINE_STATUS_AND_LOCATION}/${rowId}`, "post", {
data: formData,
});
mutate();
setOpen(false);
} catch (error) {}
};
return (
<>
<DialogHeader>
<DialogTitle>ویرایش ماشین</DialogTitle>
</DialogHeader>
<DialogContent dividers>
<StyledForm id="updateMachineForm" onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Controller
name="province_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>استان</InputLabel>
<Select {...field} label="استان" disabled={loadingProvinces}>
{provinces.map((province) => (
<MenuItem key={province.id} value={province.id}>
{province.name_fa}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="city_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>شهر</InputLabel>
<Select {...field} label="شهر" disabled={!provinceId || loadingCities}>
{cities.map((city) => (
<MenuItem key={city.id} value={city.id}>
{city.name_fa}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="station_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>راهداری</InputLabel>
<Select {...field} label="راهداری" disabled={!cityId || loadingStations}>
{stations.map((station) => (
<MenuItem key={station.id} value={station.id}>
{station.name}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="status"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>وضعیت</InputLabel>
<Select {...field} label="وضعیت">
{statusOptions.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
{(loadingCities || loadingStations) && (
<Stack direction="row" justifyContent="center">
<CircularProgress size={24} />
</Stack>
)}
</Stack>
</StyledForm>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)} variant="outlined" color="secondary" startIcon={<ExitToApp />}>
بستن
</Button>
<Button
variant="contained"
disabled={isSubmitting}
type="submit"
form="updateMachineForm"
endIcon={<Beenhere />}
>
{isSubmitting ? "در حال ویرایش" : "ویرایش ماشین"}
</Button>
</DialogActions>
</>
);
};
export default EditFormContent;
import StyledForm from "@/core/components/StyledForm";
import {
GET_CITIES_LIST,
GET_PROVINCES_LIST,
GET_STATIONS_LIST,
UPDATE_MACHINE_STATUS_AND_LOCATION,
} from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup";
import { Beenhere, ExitToApp } from "@mui/icons-material";
import {
Button,
CircularProgress,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
InputLabel,
MenuItem,
Select,
Stack,
} from "@mui/material";
import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
import { useEffect, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { number, object } from "yup";
const statusOptions = [
{ value: 1, label: "آماده" },
{ value: 2, label: "رزرو" },
{ value: 3, label: "در ماموریت" },
{ value: 4, label: "خارج از رده" },
{ value: 5, label: "در تعمیر" },
{ value: 6, label: "فروخته شده" },
{ value: 7, label: "نیاز به تعمیر" },
];
const validationSchema = object({
status: number().required("انتخاب وضعیت الزامی است"),
province_id: number().required("انتخاب استان الزامی است"),
city_id: number().required("انتخاب شهر الزامی است"),
station_id: number().required("انتخاب راهداری الزامی است"),
});
const EditFormContent = ({ row, rowId, mutate, setOpen }) => {
const requestServer = useRequest();
const [provinces, setProvinces] = useState([]);
const [cities, setCities] = useState([]);
const [stations, setStations] = useState([]);
const [loadingProvinces, setLoadingProvinces] = useState(false);
const [loadingCities, setLoadingCities] = useState(false);
const [loadingStations, setLoadingStations] = useState(false);
const {
control,
handleSubmit,
setValue,
formState: { isSubmitting },
} = useForm({
defaultValues: {
status: row.original.status,
province_id: row.original.province_id,
city_id: row.original.city_id,
station_id: row.original.station_id,
},
resolver: yupResolver(validationSchema),
mode: "all",
});
const provinceId = useWatch({
control,
name: "province_id",
});
const cityId = useWatch({
control,
name: "city_id",
});
const loadProvinces = async () => {
try {
setLoadingProvinces(true);
const response = await requestServer(GET_PROVINCES_LIST, "get");
setProvinces(response.data?.data || []);
} finally {
setLoadingProvinces(false);
}
};
const loadCities = async (provinceId) => {
if (!provinceId) return;
try {
setLoadingCities(true);
const response = await requestServer(`${GET_CITIES_LIST}?province_id=${provinceId}`, "get");
setCities(response.data?.data || []);
} finally {
setLoadingCities(false);
}
};
const loadStations = async (cityId) => {
if (!cityId) return;
try {
setLoadingStations(true);
const response = await requestServer(`${GET_STATIONS_LIST}/search_by_city?city_id=${cityId}`, "get");
setStations(response.data?.data || []);
} finally {
setLoadingStations(false);
}
};
useEffect(() => {
loadProvinces();
}, []);
/**
* Initial edit mode loading
*/
useEffect(() => {
if (row.original.province_id) {
loadCities(row.original.province_id);
}
if (row.original.city_id) {
loadStations(row.original.city_id);
}
}, []);
useEffect(() => {
if (!provinceId) return;
loadCities(provinceId);
if (provinceId !== row.original.province_id) {
setValue("city_id", "");
setValue("station_id", "");
setStations([]);
}
}, [provinceId]);
useEffect(() => {
if (!cityId) return;
loadStations(cityId);
if (cityId !== row.original.city_id) {
setValue("station_id", "");
}
}, [cityId]);
const onSubmit = async (data) => {
const formData = new FormData();
formData.append("status", String(data.status));
formData.append("province_id", String(data.province_id));
formData.append("city_id", String(data.city_id));
formData.append("station_id", String(data.station_id));
try {
await requestServer(`${UPDATE_MACHINE_STATUS_AND_LOCATION}/${rowId}`, "post", {
data: formData,
});
mutate();
setOpen(false);
} catch (error) {}
};
return (
<>
<DialogHeader>
<DialogTitle>ویرایش ماشین</DialogTitle>
</DialogHeader>
<DialogContent dividers>
<StyledForm id="updateMachineForm" onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Controller
name="province_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>استان</InputLabel>
<Select {...field} label="استان" disabled={loadingProvinces}>
{provinces.map((province) => (
<MenuItem key={province.id} value={province.id}>
{province.name_fa}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="city_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>شهر</InputLabel>
<Select {...field} label="شهر" disabled={!provinceId || loadingCities}>
{cities.map((city) => (
<MenuItem key={city.id} value={city.id}>
{city.name_fa}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="station_id"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>راهداری</InputLabel>
<Select {...field} label="راهداری" disabled={!cityId || loadingStations}>
{stations.map((station) => (
<MenuItem key={station.id} value={station.id}>
{station.name}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="status"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl fullWidth size="small" error={!!error}>
<InputLabel>وضعیت</InputLabel>
<Select {...field} label="وضعیت">
{statusOptions.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</Select>
</FormControl>
)}
/>
{(loadingCities || loadingStations) && (
<Stack direction="row" justifyContent="center">
<CircularProgress size={24} />
</Stack>
)}
</Stack>
</StyledForm>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)} variant="outlined" color="secondary" startIcon={<ExitToApp />}>
بستن
</Button>
<Button
variant="contained"
disabled={isSubmitting}
type="submit"
form="updateMachineForm"
endIcon={<Beenhere />}
>
{isSubmitting ? "در حال ویرایش" : "ویرایش ماشین"}
</Button>
</DialogActions>
</>
);
};
export default EditFormContent;

88
src/components/dashboard/machines/RowActions/Edit/index.jsx
View File

@@ -1,44 +1,44 @@
import { SwapHoriz } from "@mui/icons-material";
import CloseIcon from "@mui/icons-material/Close";
import { Dialog, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import EditFormContent from "./Form";
const Edit = ({ row, mutate, rowId }) => {
const [openEditDialog, setOpenEditDialog] = useState(false);
return (
<>
<Tooltip title="ویرایش" arrow placement="right">
<IconButton
color="primary"
sx={{ textTransform: "unset", alignSelf: "center" }}
onClick={() => {
setOpenEditDialog(true);
}}
>
<SwapHoriz />
</IconButton>
</Tooltip>
<Dialog open={openEditDialog} fullWidth maxWidth="xs">
<IconButton
aria-label="close"
onClick={() => setOpenEditDialog(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
{openEditDialog && (
<EditFormContent rowId={rowId} row={row} setOpen={setOpenEditDialog} mutate={mutate} />
)}
</Dialog>
</>
);
};
export default Edit;
import { SwapHoriz } from "@mui/icons-material";
import CloseIcon from "@mui/icons-material/Close";
import { Dialog, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import EditFormContent from "./Form";
const Edit = ({ row, mutate, rowId }) => {
const [openEditDialog, setOpenEditDialog] = useState(false);
return (
<>
<Tooltip title="ویرایش" arrow placement="right">
<IconButton
color="primary"
sx={{ textTransform: "unset", alignSelf: "center" }}
onClick={() => {
setOpenEditDialog(true);
}}
>
<SwapHoriz />
</IconButton>
</Tooltip>
<Dialog open={openEditDialog} fullWidth maxWidth="xs">
<IconButton
aria-label="close"
onClick={() => setOpenEditDialog(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
{openEditDialog && (
<EditFormContent rowId={rowId} row={row} setOpen={setOpenEditDialog} mutate={mutate} />
)}
</Dialog>
</>
);
};
export default Edit;

28
src/components/dashboard/machines/RowActions/index.jsx
View File

@@ -1,14 +1,14 @@
import { usePermissions } from "@/lib/hooks/usePermissions";
import { Box } from "@mui/material";
import Edit from "./Edit";
const RowActions = ({ row, mutate }) => {
const { data: userPermissions } = usePermissions();
const hasEditPermission = userPermissions.some((item) => ["update-machine"].includes(item));
return (
<Box sx={{ display: "flex", gap: 1 }}>
{hasEditPermission && <Edit row={row} mutate={mutate} rowId={row.getValue("id")} />}
</Box>
);
};
export default RowActions;
import { usePermissions } from "@/lib/hooks/usePermissions";
import { Box } from "@mui/material";
import Edit from "./Edit";
const RowActions = ({ row, mutate }) => {
const { data: userPermissions } = usePermissions();
const hasEditPermission = userPermissions.some((item) => ["update-machine"].includes(item));
return (
<Box sx={{ display: "flex", gap: 1 }}>
{hasEditPermission && <Edit row={row} mutate={mutate} rowId={row.getValue("id")} />}
</Box>
);
};
export default RowActions;

58
src/components/dashboard/machines/ShowProjectArea/ShowBound.jsx
View File

@@ -1,29 +1,29 @@
import { useEffect, useRef } from "react";
import { FeatureGroup, useMap } from "react-leaflet";
const ShowBound = ({ bound }) => {
const map = useMap();
const featureRef = useRef(null);
const safeFitBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.fitBounds(latLngs, {
paddingTopLeft: [20, 20],
paddingBottomRight: [20, 20],
});
} catch (e) {
console.warn("fitBounds failed:", e);
}
};
useEffect(() => {
bound?.editing?.disable();
featureRef.current.addLayer(bound);
safeFitBounds(bound);
}, []);
return <FeatureGroup ref={featureRef} />;
};
export default ShowBound;
import { useEffect, useRef } from "react";
import { FeatureGroup, useMap } from "react-leaflet";
const ShowBound = ({ bound }) => {
const map = useMap();
const featureRef = useRef(null);
const safeFitBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.fitBounds(latLngs, {
paddingTopLeft: [20, 20],
paddingBottomRight: [20, 20],
});
} catch (e) {
console.warn("fitBounds failed:", e);
}
};
useEffect(() => {
bound?.editing?.disable();
featureRef.current.addLayer(bound);
safeFitBounds(bound);
}, []);
return <FeatureGroup ref={featureRef} />;
};
export default ShowBound;

130
src/components/dashboard/machines/ShowProjectArea/index.jsx
View File

@@ -1,65 +1,65 @@
const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
import MapLayer from "@/core/components/MapLayer";
import CloseIcon from "@mui/icons-material/Close";
import LayersIcon from "@mui/icons-material/Layers";
import L from "leaflet";
import { useMemo, useState } from "react";
import ShowBound from "./ShowBound";
const ShowProjectArea = ({ primaryArea }) => {
const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
const bound = useMemo(() => {
const coordinates = Object.values(primaryArea.coordinates);
const latLngCoords = coordinates.map(([lat, lng]) => [parseFloat(lng), parseFloat(lat)]);
return primaryArea.type === "polygon"
? L.polygon(latLngCoords, { color: "#ff5555" })
: L.polyline(latLngCoords);
}, [primaryArea]);
return (
<Box>
<Tooltip title="نمایش پلیگان" placement="right" arrow>
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
<LayersIcon />
</IconButton>
</Tooltip>
<Dialog
open={openShowAreaDialog}
onClose={() => setOpenShowAreaDialog(false)}
PaperProps={{
sx: {
transition: "all .3s",
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
borderRadius: 2,
padding: 1,
},
}}
maxWidth="sm"
fullWidth
dir="rtl"
>
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
محدوده طرح
</Typography>
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ flex: 1 }}>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={bound} />
</MapLayer>
</Box>
</Box>
</DialogContent>
</Dialog>
</Box>
);
};
export default ShowProjectArea;
const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
import MapLayer from "@/core/components/MapLayer";
import CloseIcon from "@mui/icons-material/Close";
import LayersIcon from "@mui/icons-material/Layers";
import L from "leaflet";
import { useMemo, useState } from "react";
import ShowBound from "./ShowBound";
const ShowProjectArea = ({ primaryArea }) => {
const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
const bound = useMemo(() => {
const coordinates = Object.values(primaryArea.coordinates);
const latLngCoords = coordinates.map(([lat, lng]) => [parseFloat(lng), parseFloat(lat)]);
return primaryArea.type === "polygon"
? L.polygon(latLngCoords, { color: "#ff5555" })
: L.polyline(latLngCoords);
}, [primaryArea]);
return (
<Box>
<Tooltip title="نمایش پلیگان" placement="right" arrow>
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
<LayersIcon />
</IconButton>
</Tooltip>
<Dialog
open={openShowAreaDialog}
onClose={() => setOpenShowAreaDialog(false)}
PaperProps={{
sx: {
transition: "all .3s",
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
borderRadius: 2,
padding: 1,
},
}}
maxWidth="sm"
fullWidth
dir="rtl"
>
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
محدوده طرح
</Typography>
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ flex: 1 }}>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={bound} />
</MapLayer>
</Box>
</Box>
</DialogContent>
</Dialog>
</Box>
);
};
export default ShowProjectArea;

28
src/components/dashboard/machines/index.jsx
View File

@@ -1,14 +1,14 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import { Stack } from "@mui/material";
import MachinesList from "./MachinesList";
const MachinesPage = () => {
return (
<Stack spacing={1}>
<PageTitle title={"لیست ماشین ها"} />
<MachinesList />
</Stack>
);
};
export default MachinesPage;
"use client";
import PageTitle from "@/core/components/PageTitle";
import { Stack } from "@mui/material";
import MachinesList from "./MachinesList";
const MachinesPage = () => {
return (
<Stack spacing={1}>
<PageTitle title={"لیست ماشین ها"} />
<MachinesList />
</Stack>
);
};
export default MachinesPage;

211
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/MapControlPolyline/index.jsx
View File

@@ -1,116 +1,113 @@
import { Delete, Route } from "@mui/icons-material";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useReducer } from "react";
import DrawBound from "./DrawBound";
"use client";
const statusType = [
{
id: 0,
message: "برای آغاز ترسیم مسیر، کلیک کنید!",
buttons: [
{
label: "شروع ترسیم مسیر",
key: "start",
color: "primary",
icon: <Route />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 1 });
},
},
],
},
{
id: 1,
message: "مسیر موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی پایانی کلیک کنید!",
buttons: [],
},
{
id: 2,
message: "برای اصلاح مسیر، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
buttons: [
{
label: "حذف",
key: "end",
color: "error",
icon: <Delete />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 0 });
},
},
],
},
];
import { useEffect, useState } from "react";
import { Marker, Polyline, useMap } from "react-leaflet";
import L from "leaflet";
const createInitialState = (bound) => {
if (bound) {
return { status: 2 };
}
return { status: 0 };
};
// ===== Icons =====
const originIcon = new L.Icon({
iconUrl: "/icons/origin-icon.svg",
iconSize: [32, 32],
iconAnchor: [16, 32],
});
const reducer = (state, action) => {
switch (action.type) {
case "SET_STATUS":
return { ...state, status: action.status };
default:
return state;
}
};
const destinationIcon = new L.Icon({
iconUrl: "/icons/destination-icon.svg",
iconSize: [32, 32],
iconAnchor: [16, 32],
});
const MapControlPolyline = ({ bound, setBound }) => {
const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
// ===== Track Center =====
function MapCenterTracker({ setCenter }) {
const map = useMap();
useEffect(() => {
const updateCenter = () => {
setCenter(map.getCenter());
};
updateCenter();
map.on("move", updateCenter);
return () => {
map.off("move", updateCenter);
};
}, [map, setCenter]);
return null;
}
// ===== Fixed Center Marker =====
function FixedCenterMarker() {
return (
<div
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -100%)",
zIndex: 1000,
pointerEvents: "none",
}}
>
<img src="/icons/origin-icon.svg" width={40} height={40} alt="center" />
</div>
);
}
export default function Example() {
const [center, setCenter] = useState(null);
const [origin, setOrigin] = useState(null);
const [destination, setDestination] = useState(null);
const [step, setStep] = useState("origin");
const handleOk = () => {
if (!center) return;
if (step === "origin") {
setOrigin(center);
setStep("destination");
return;
}
if (step === "destination") {
setDestination(center);
setStep("done");
}
};
return (
<>
<DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
<Stack
direction={"row"}
justifyContent={"center"}
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
>
<Box
sx={{
background: (theme) => theme.palette.info.main,
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
py: 0.5,
px: 2,
}}
>
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
{statusType.find((st) => st.id == control.status).message}
</Typography>
</Box>
</Stack>
<Box
sx={{
position: "absolute",
left: 0,
bottom: 0,
zIndex: 2000,
width: "100%",
py: 1,
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
<div>
<div
style={{
position: "relative",
height: "400px",
}}
>
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
{statusType
.find((st) => st.id == control.status)
.buttons.map((button) => (
<Button
size="small"
key={button.key}
variant="contained"
onClick={() => button.onclick(controlDispach)}
color={button.color}
startIcon={button.icon}
>
{button.label}
</Button>
))}
</Stack>
</Box>
</>
<MapCenterTracker setCenter={setCenter} />
{/* saved markers */}
{origin && <Marker position={origin} icon={originIcon} />}
{destination && <Marker position={destination} icon={destinationIcon} />}
{/* route line */}
{origin && destination && <Polyline positions={[origin, destination]} />}
{/* fixed center pin */}
{step !== "done" && <FixedCenterMarker />}
</div>
<div style={{ marginTop: 16, position: "absolute", z: 50, top: 5 }}>
<button onClick={handleOk}>
{step === "origin" && "Set Origin"}
{step === "destination" && "Set Destination"}
{step === "done" && "Completed"}
</button>
</div>
</div>
);
};
export default MapControlPolyline;
}

28
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/AlarmText.jsx Normal file
View File

@@ -0,0 +1,28 @@
import { Box, Typography } from "@mui/material";
const AlarmText = ({ isSource }) => {
if (isSource) return null;
return (
<Box
sx={{
position: "absolute",
top: 5,
left: 5,
zIndex: 1000,
border: "1px solid #ed0f02",
backgroundColor: "#f19898",
py: 0.5,
px: 1,
borderRadius: 2,
opacity: 0.8,
boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
}}
>
<Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
با کلیک بر روی مارکر موقعیت را انتخاب کنید
</Typography>
</Box>
);
};
export default AlarmText;

53
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/DataBox.jsx Normal file
View File

@@ -0,0 +1,53 @@
import { Box, Button, TextField } from "@mui/material";
const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
if (!isSource) return null;
return (
<Box
sx={{
position: "absolute",
bottom: 5,
left: 5,
zIndex: 1000,
backgroundColor: "white",
border: "1px solid #e1e1e1",
padding: 1,
borderRadius: 2,
opacity: 0.8,
gap: 1,
display: "flex",
flexDirection: "column",
}}
>
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
variant="outlined"
size="small"
readOnly
value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
/>
{isSource && isDest && (
<Button variant="contained" color="success" size="small" onClick={onEditSource}>
ویرایش مبدا
</Button>
)}
</div>
{isDest && (
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
size="small"
variant="outlined"
readOnly
value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
/>
<Button variant="contained" color="error" size="small" onClick={onEditDest}>
ویرایش مقصد
</Button>
</div>
)}
</Box>
);
};
export default DataBox;

46
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/ShowRoute.jsx Normal file
View File

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

219
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Area/Routing/index.jsx Normal file
View File

@@ -0,0 +1,219 @@
import { Marker, Polyline, useMapEvents } from "react-leaflet";
import L from "leaflet";
import polyline from "@mapbox/polyline";
import SourceIcon from "@/assets/images/source-icon.svg";
import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
import DestIcon from "@/assets/images/destination-icon.svg";
import { useEffect, useRef, useState } from "react";
import DataBox from "./DataBox";
import AlarmText from "./AlarmText";
const Routing = ({ setArea, setLocations, locations, area }) => {
const mapPrevSourceMarker = useRef();
const mapPrevDestMarker = useRef();
const mapRef = useRef(null);
const defaultIconSize = [35, 35];
const [isSource, setIsSource] = useState(false);
const [sourcePosition, setSourcePosition] = useState(null);
const [isDest, setIsDest] = useState(false);
const [destPosition, setDestPosition] = useState(null);
const [routeCoords, setRouteCoords] = useState([]);
const [alternateCoords, setAlternateCoords] = useState([]);
const [editingTarget, setEditingTarget] = useState(null);
const [selectedRoute, setSelectedRoute] = useState(null);
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
});
};
const defaultIcon = createCustomIcon(
defaultIconSize,
isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
);
const prevDestIcon = createCustomIcon(
defaultIconSize,
isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
);
const isMovingSource = !isSource || editingTarget === "source";
const isMovingDest = isSource && (!isDest || editingTarget === "dest");
const map = useMapEvents({
move(e) {
if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
},
movestart() {
if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
if (isMovingDest && mapPrevDestMarker.current)
mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
},
moveend() {
if (isMovingSource)
mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
if (isMovingDest && mapPrevDestMarker.current)
mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
},
});
useEffect(() => {
mapRef.current = map;
}, [map]);
useEffect(() => {
if (locations.length < 2) return;
const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
setSourcePosition(restoredSource);
setDestPosition(restoredDest);
setIsSource(true);
setIsDest(true);
if (area) {
const decoded = polyline.decode(area, 6);
setRouteCoords(decoded);
setSelectedRoute({ index: "main", coords: decoded });
setTimeout(() => {
mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
}, 100);
} else {
fetchRoute(restoredSource, restoredDest);
}
}, []);
const fetchRoute = async (source, dest) => {
const locs = [
{ lat: source.lat, lon: source.lng },
{ lat: dest.lat, lon: dest.lng },
];
try {
const response = await fetch("https://jouya.141.ir/api/router/drive", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ locations: locs }),
});
const data = await response.json();
const shape = data.trip.legs[0].shape;
setLocations(locs);
setArea(shape);
const decoded = polyline.decode(shape, 6);
setRouteCoords(decoded);
setSelectedRoute({ index: "main", coords: decoded });
if (data.alternates?.length > 0) {
const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
setAlternateCoords(decodedAlternates);
} else {
setAlternateCoords([]);
}
map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
} catch (error) {
console.error("Routing error:", error);
}
};
const handleMarkerClick = async () => {
if (!isSource || editingTarget === "source") {
const clickedPosition = mapPrevSourceMarker.current.getLatLng();
setSourcePosition(clickedPosition);
setIsSource(true);
setEditingTarget(null);
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
if (editingTarget === "source" && destPosition) {
await fetchRoute(clickedPosition, destPosition);
}
}
};
const handleDestMarkerClick = async () => {
if (!isDest || editingTarget === "dest") {
const clickedPosition = mapPrevDestMarker.current.getLatLng();
setDestPosition(clickedPosition);
setIsDest(true);
setEditingTarget(null);
await fetchRoute(sourcePosition, clickedPosition);
}
};
const handleEditSource = () => {
setEditingTarget("source");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleEditDest = () => {
setEditingTarget("dest");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleSelectRoute = (index, coords) => {
setSelectedRoute({ index, coords });
const encoded = polyline.encode(coords, 6);
setArea(encoded);
map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
};
return (
<>
<DataBox
isSource={isSource}
isDest={isDest}
sourcePosition={sourcePosition}
destPosition={destPosition}
editingTarget={editingTarget}
onEditSource={handleEditSource}
onEditDest={handleEditDest}
/>
<AlarmText isSource={isSource} />
<Marker
position={sourcePosition || map.getCenter()}
ref={mapPrevSourceMarker}
eventHandlers={{ click: handleMarkerClick }}
icon={defaultIcon}
/>
{isSource && (
<Marker
position={destPosition || map.getCenter()}
ref={mapPrevDestMarker}
eventHandlers={{ click: handleDestMarkerClick }}
icon={prevDestIcon}
/>
)}
{alternateCoords.map((coords, index) => (
<Polyline
key={`alternate-${index}-${selectedRoute?.index === index}`}
positions={coords}
color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === index ? 7 : 6}
opacity={selectedRoute?.index === index ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
/>
))}
{routeCoords.length > 0 && (
<Polyline
key={`main-${selectedRoute?.index === "main"}`}
positions={routeCoords}
color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === "main" ? 7 : 6}
opacity={selectedRoute?.index === "main" ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
/>
)}
</>
);
};
export default Routing;

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

@@ -2,19 +2,21 @@ import MapLoading from "@/core/components/MapLayer/Loading";
import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
import dynamic from "next/dynamic";
import { useCallback, useState } from "react";
import MapControlPolyline from "./MapControlPolyline";
import Routing from "./Routing";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
});
const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
const [bound, setBound] = useState(allData.bound);
const [area, setArea] = useState(allData.area);
const [locations, setLocations] = useState(allData.locations);
const handleNext = useCallback(() => {
setAllData({ bound: bound });
setAllData({ area: area });
setAllData({ locations: locations });
setTabState((s) => s + 1);
}, [bound]);
}, [area]);
return (
<>
@@ -22,7 +24,7 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
<Stack spacing={2}>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<MapControlPolyline bound={bound} setBound={setBound} boundType={"polyline"} />
<Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
</MapLayer>
</Box>
</Stack>
@@ -31,8 +33,8 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
{"مرحله قبلی"}
</Button>
<Button variant="contained" size="large" disabled={!bound} onClick={handleNext}>
{!bound ? "در انتظار ترسیم" : "مرحله بعد"}
<Button variant="contained" size="large" disabled={!area} onClick={handleNext}>
{!area ? "در انتظار ترسیم" : "مرحله بعد"}
</Button>
</DialogActions>
</>

17
src/components/dashboard/roadMissions/operator/Actions/Create/Form/Verify/index.jsx
View File

@@ -7,7 +7,7 @@ import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typogr
import moment from "jalali-moment";
import dynamic from "next/dynamic";
import { useCallback } from "react";
import ShowBound from "../../../showBound";
import ShowRoute from "../Area/Routing/ShowRoute";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
@@ -23,11 +23,16 @@ const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
<DialogContent dividers>
<Box sx={{ flex: 1 }}>
<Stack spacing={2}>
<Box sx={{ width: "100%", height: "200px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={allData.bound} />
</MapLayer>
</Box>
<Stack spacing={1}>
<Divider>
<Chip color="primary" variant="outlined" label="مسیر ماموریت" />
</Divider>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowRoute area={allData.area} />
</MapLayer>
</Box>
</Stack>
<Stack spacing={1}>
<Divider>
<Chip color="primary" variant="outlined" label="مشخصات ماموریت" />

11
src/components/dashboard/roadMissions/operator/Actions/Create/index.jsx
View File

@@ -19,8 +19,6 @@ const Create = ({ mutate }) => {
const submitForm = async (result) => {
setSubmitting(true);
const bound = result.bound.getLatLngs();
let area = bound.map((latlng) => [latlng.lng, latlng.lat]);
await requestServer(REQUEST_MISSION, "post", {
data: {
@@ -31,10 +29,7 @@ const Create = ({ mutate }) => {
road_observed_id: result.road_observed_id,
}
: {}),
area: {
type: result.bound_type,
coordinates: area,
},
encoded_route: result.area,
...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
requested_machines: result.requested_machines,
type: result.type,
@@ -101,8 +96,8 @@ const Create = ({ mutate }) => {
road_observed_id: "",
rahdaran: [],
requested_machines: [],
bound: null,
bound_type: "polyline",
area: null,
locations: [],
type: "",
start_date: "",
start_time: null,

18
src/components/dashboard/roadMissions/operator/OperatorList.jsx
View File

@@ -1,21 +1,21 @@
"use client";
import DescriptionDialog from "@/components/dashboard/roadMissions/operator/RowActions/DescriptionDialog";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { missionCategoryTypes } from "@/core/utils/missionCategoryTypes";
import { missionRegions } from "@/core/utils/missionRegions";
import { missionTypes } from "@/core/utils/missionTypes";
import { GET_ROAD_MISSIONS_OPERATOR_LIST } from "@/core/utils/routes";
import useCities from "@/lib/hooks/useCities";
import useProvinces from "@/lib/hooks/useProvince";
import { Box, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useMemo } from "react";
import ShowArea from "./Actions/showArea";
import RowActions from "./RowActions";
import MachinesDialog from "./RowActions/Machines";
import Toolbar from "./Toolbar";
import RahdaranDialog from "./RowActions/Rahdaran";
import DescriptionDialog from "@/components/dashboard/roadMissions/operator/RowActions/DescriptionDialog";
import useProvinces from "@/lib/hooks/useProvince";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import useCities from "@/lib/hooks/useCities";
import RouteDetail from "./RowActions/RouteDetail";
import Toolbar from "./Toolbar";
const OperatorList = () => {
const columns = useMemo(() => {
@@ -247,7 +247,7 @@ const OperatorList = () => {
},
{
header: "منطقه عملیاتی",
id: "area",
id: "encoded_route",
enableColumnFilter: false,
datatype: "numeric",
filterMode: "equals",
@@ -263,9 +263,9 @@ const OperatorList = () => {
},
},
Cell: ({ row }) =>
row.original.area ? (
row.original.encoded_route ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<ShowArea area={row.original.area} />
<RouteDetail encoded_route={row.original.encoded_route} />
</Stack>
) : (
"-"

57
src/components/dashboard/roadMissions/operator/RowActions/RouteDetail/index.jsx Normal file
View File

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

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

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

276
src/components/dashboard/roadMissions/reports/taradodReports/MissionsReportLists.jsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

284
src/components/dashboard/roadMissions/reports/taradodReports/index.jsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

196
src/components/dashboard/roadMissions/reports/violationsReports/ViolationsReportsList.jsx
View File

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

282
src/components/dashboard/roadMissions/reports/violationsReports/index.jsx
View File

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

40
src/components/dashboard/roadMissions/transportation/RowActions/Allocation/Form/index.jsx
View File

@@ -14,16 +14,10 @@ import MachinesDialog from "./MachinesDialog";
import Reject from "./Reject";
import SelectBox from "@/core/components/SelectBox";
import { Controller, useForm } from "react-hook-form";
import RouteDetail from "../../RouteDetail";
import ShowRoute from "../../RouteDetail/ShowRoute";
const AllocationForm = ({ row, mutate, setOpenAllocationDialog }) => {
const latLngs = useMemo(() => {
return row.area.coordinates.map(([lng, lat]) => [lat, lng]);
}, [row.area.coordinates]);
const bound = useMemo(
() => (row.area.type === "polygon" ? L.polygon(latLngs) : L.polyline(latLngs)),
[row.area.type, latLngs]
);
const requestServer = useRequest({ notificationSuccess: true });
const [machine, setMachine] = useState();
const [driver, setDriver] = useState();
@@ -180,10 +174,32 @@ const AllocationForm = ({ row, mutate, setOpenAllocationDialog }) => {
)}
</Stack>
</Stack>
<Box sx={{ width: "100%", height: "200px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowBound bound={bound} />
</MapLayer>
<Box
sx={{
width: "100%",
height: "200px",
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
{row.encoded_route ? (
<MapLayer style={{ borderRadius: "4px" }}>
<ShowRoute area={row.encoded_route} />
</MapLayer>
) : (
<Typography
sx={{
color: "#ff4a4c",
fontSize: "16px",
fontWeight: "bold",
textAlign: "center",
letterSpacing: "1px",
}}
>
مختصات برای این ماموریت در دسترس نمیباشد
</Typography>
)}
</Box>
</Stack>
</Box>

46
src/components/dashboard/roadMissions/transportation/RowActions/RouteDetail/ShowRoute.jsx Normal file
View File

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

57
src/components/dashboard/roadMissions/transportation/RowActions/RouteDetail/index.jsx Normal file
View File

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

6
src/components/dashboard/roadMissions/transportation/TransportationList.jsx
View File

@@ -4,13 +4,13 @@ import { GET_ROAD_MISSIONS_TRANSPORTATION_LIST } from "@/core/utils/routes";
import { Box, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useMemo } from "react";
import ShowArea from "./Actions/showArea";
import RowActions from "./RowActions";
import { missionRegions } from "@/core/utils/missionRegions";
import { missionTypes } from "@/core/utils/missionTypes";
import useProvinces from "@/lib/hooks/useProvince";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import useCities from "@/lib/hooks/useCities";
import RouteDetail from "./RowActions/RouteDetail";
const TransportationList = () => {
const columns = useMemo(() => {
@@ -230,9 +230,9 @@ const TransportationList = () => {
},
},
Cell: ({ row }) =>
row.original.area ? (
row.original.encoded_route ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<ShowArea area={row.original.area} />
<RouteDetail encoded_route={row.original.encoded_route} />
</Stack>
) : (
"-"

129
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/DrawBound/index.jsx
View File

@@ -1,129 +0,0 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import L from "leaflet";
import { FeatureGroup, useMap } from "react-leaflet";
import "leaflet-draw";
const DrawBound = ({ control, controlDispach, bound, setBound }) => {
const map = useMap();
const featureRef = useRef(null);
const [area, setArea] = useState();
const drawControlRef = useRef(null);
const safeFlyToBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.flyToBounds(latLngs, {
paddingTopLeft: [20, 35],
paddingBottomRight: [20, 55],
});
} catch (e) {
console.warn("flyToBounds failed:", e);
}
};
const safeFitBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.fitBounds(latLngs, {
paddingTopLeft: [20, 35],
paddingBottomRight: [20, 55],
});
} catch (e) {
console.warn("fitBounds failed:", e);
}
};
const bindEditEvent = (layer) => {
if (!layer) return;
layer.on("edit", function (e) {
const editedLayer = e.target;
setArea(editedLayer);
setBound(editedLayer);
safeFlyToBounds(editedLayer);
});
};
const handlerCreatedBound = useCallback((event) => {
const { layer } = event;
layer.editing.enable();
featureRef.current.addLayer(layer); // 🟢 اول اضافه به نقشه
setArea(layer);
setBound(layer);
safeFlyToBounds(layer);
bindEditEvent(layer);
controlDispach({ type: "SET_STATUS", status: 2 });
}, []);
useEffect(() => {
if (
control.status === 1 &&
drawControlRef.current &&
drawControlRef.current._toolbars?.draw?._modes?.polygon?.handler
) {
drawControlRef.current._toolbars.draw._modes.polygon.handler.enable();
}
}, [control.status]);
useEffect(() => {
if (control.status === 0 && area && featureRef.current) {
featureRef.current.removeLayer(area);
setArea(null);
setBound(null);
}
}, [control.status, area]);
useEffect(() => {
if (control.status === 2 && bound && featureRef.current) {
setArea(bound);
featureRef.current.addLayer(bound);
bound.editing.enable();
safeFitBounds(bound);
bindEditEvent(bound);
}
}, [control.status, bound]);
useEffect(() => {
if (!featureRef.current) return;
L.drawLocal.draw.handlers.polygon.tooltip.start = "برای شروع ترسیم محدوده، روی نقشه کلیک کنید";
L.drawLocal.draw.handlers.polygon.tooltip.cont = "برای ادامه ترسیم، نقاط بعدی را کلیک کنید";
L.drawLocal.draw.handlers.polygon.tooltip.end = "برای بستن محدوده، روی نقطه‌ی شروع کلیک کنید";
const drawControl = new L.Control.Draw({
draw: {
polygon: {
shapeOptions: {
color: "#3388ff",
weight: 3,
clickable: true,
},
},
polyline: false,
rectangle: false,
circle: false,
marker: false,
circlemarker: false,
},
edit: {
featureGroup: featureRef.current,
edit: true,
remove: false,
},
});
drawControlRef.current = drawControl;
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, handlerCreatedBound);
return () => {
map.off(L.Draw.Event.CREATED, handlerCreatedBound);
map.removeControl(drawControl);
};
}, [map, handlerCreatedBound]);
return <FeatureGroup ref={featureRef} />;
};
export default DrawBound;

116
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolygon/index.jsx
View File

@@ -1,116 +0,0 @@
import { Delete, Route } from "@mui/icons-material";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useReducer } from "react";
import DrawBound from "./DrawBound";
const statusType = [
{
id: 0,
message: "برای آغاز ترسیم محدوده، کلیک کنید!",
buttons: [
{
label: "شروع ترسیم محدوده",
key: "start",
color: "primary",
icon: <Route />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 1 });
},
},
],
},
{
id: 1,
message: "محدوده‌ی موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی ابتدایی کلیک کنید!",
buttons: [],
},
{
id: 2,
message: "برای اصلاح محدوده، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
buttons: [
{
label: "حذف",
key: "end",
color: "error",
icon: <Delete />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 0 });
},
},
],
},
];
const createInitialState = (bound) => {
if (bound) {
return { status: 2 };
}
return { status: 0 };
};
const reducer = (state, action) => {
switch (action.type) {
case "SET_STATUS":
return { ...state, status: action.status };
default:
return state;
}
};
const MapControlPolygon = ({ bound, setBound }) => {
const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
return (
<>
<DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
<Stack
direction={"row"}
justifyContent={"center"}
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
>
<Box
sx={{
background: (theme) => theme.palette.info.main,
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
py: 0.5,
px: 2,
}}
>
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
{statusType.find((st) => st.id == control.status).message}
</Typography>
</Box>
</Stack>
<Box
sx={{
position: "absolute",
left: 0,
bottom: 0,
zIndex: 2000,
width: "100%",
py: 1,
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
}}
>
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
{statusType
.find((st) => st.id == control.status)
.buttons.map((button) => (
<Button
size="small"
key={button.key}
variant="contained"
onClick={() => button.onclick(controlDispach)}
color={button.color}
startIcon={button.icon}
>
{button.label}
</Button>
))}
</Stack>
</Box>
</>
);
};
export default MapControlPolygon;

129
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/DrawBound/index.jsx
View File

@@ -1,129 +0,0 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import L from "leaflet";
import { FeatureGroup, useMap } from "react-leaflet";
import "leaflet-draw";
const DrawBound = ({ control, controlDispach, bound, setBound }) => {
const map = useMap();
const featureRef = useRef(null);
const [area, setArea] = useState();
const drawControlRef = useRef(null);
const safeFlyToBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.flyToBounds(latLngs, {
paddingTopLeft: [20, 35],
paddingBottomRight: [20, 55],
});
} catch (e) {
console.warn("flyToBounds failed:", e);
}
};
const safeFitBounds = (layer) => {
if (!layer || !map) return;
try {
const latLngs = layer.getLatLngs();
map.fitBounds(latLngs, {
paddingTopLeft: [20, 35],
paddingBottomRight: [20, 55],
});
} catch (e) {
console.warn("fitBounds failed:", e);
}
};
const bindEditEvent = (layer) => {
if (!layer) return;
layer.on("edit", function (e) {
const editedLayer = e.target;
setArea(editedLayer);
setBound(editedLayer);
safeFlyToBounds(editedLayer);
});
};
const handlerCreatedBound = useCallback((event) => {
const { layer } = event;
layer.editing.enable();
featureRef.current.addLayer(layer); // 🟢 اول اضافه به نقشه
setArea(layer);
setBound(layer);
safeFlyToBounds(layer);
bindEditEvent(layer);
controlDispach({ type: "SET_STATUS", status: 2 });
}, []);
useEffect(() => {
if (
control.status === 1 &&
drawControlRef.current &&
drawControlRef.current._toolbars?.draw?._modes?.polyline?.handler
) {
drawControlRef.current._toolbars.draw._modes.polyline.handler.enable();
}
}, [control.status]);
useEffect(() => {
if (control.status === 0 && area && featureRef.current) {
featureRef.current.removeLayer(area);
setArea(null);
setBound(null);
}
}, [control.status, area]);
useEffect(() => {
if (control.status === 2 && bound && featureRef.current) {
setArea(bound);
featureRef.current.addLayer(bound);
bound.editing.enable();
safeFitBounds(bound);
bindEditEvent(bound);
}
}, [control.status, bound]);
useEffect(() => {
if (!featureRef.current) return;
L.drawLocal.draw.handlers.polyline.tooltip.start = "برای شروع ترسیم مسیر، روی نقشه کلیک کنید";
L.drawLocal.draw.handlers.polyline.tooltip.cont = "برای ادامه ترسیم، نقاط بعدی را کلیک کنید";
L.drawLocal.draw.handlers.polyline.tooltip.end = "برای بستن مسیر، روی نقطه پایانی کلیک کنید";
const drawControl = new L.Control.Draw({
draw: {
polyline: {
shapeOptions: {
color: "#3388ff",
weight: 3,
clickable: true,
},
},
polygon: false,
rectangle: false,
circle: false,
marker: false,
circlemarker: false,
},
edit: {
featureGroup: featureRef.current,
edit: true,
remove: false,
},
});
drawControlRef.current = drawControl;
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, handlerCreatedBound);
return () => {
map.off(L.Draw.Event.CREATED, handlerCreatedBound);
map.removeControl(drawControl);
};
}, [map, handlerCreatedBound]);
return <FeatureGroup ref={featureRef} />;
};
export default DrawBound;

116
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/MapControlPolyline/index.jsx
View File

@@ -1,116 +0,0 @@
import { Delete, Route } from "@mui/icons-material";
import { Box, Button, Stack, Typography } from "@mui/material";
import { useReducer } from "react";
import DrawBound from "./DrawBound";
const statusType = [
{
id: 0,
message: "برای آغاز ترسیم مسیر، کلیک کنید!",
buttons: [
{
label: "شروع ترسیم مسیر",
key: "start",
color: "primary",
icon: <Route />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 1 });
},
},
],
},
{
id: 1,
message: "مسیر موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطه‌ی پایانی کلیک کنید!",
buttons: [],
},
{
id: 2,
message: "برای اصلاح مسیر، گوشه‌ها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
buttons: [
{
label: "حذف",
key: "end",
color: "error",
icon: <Delete />,
onclick: (controlDispach) => {
controlDispach({ type: "SET_STATUS", status: 0 });
},
},
],
},
];
const createInitialState = (bound) => {
if (bound) {
return { status: 2 };
}
return { status: 0 };
};
const reducer = (state, action) => {
switch (action.type) {
case "SET_STATUS":
return { ...state, status: action.status };
default:
return state;
}
};
const MapControlPolyline = ({ bound, setBound }) => {
const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
return (
<>
<DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
<Stack
direction={"row"}
justifyContent={"center"}
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
>
<Box
sx={{
background: (theme) => theme.palette.info.main,
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
py: 0.5,
px: 2,
}}
>
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
{statusType.find((st) => st.id == control.status).message}
</Typography>
</Box>
</Stack>
<Box
sx={{
position: "absolute",
left: 0,
bottom: 0,
zIndex: 2000,
width: "100%",
py: 1,
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
}}
>
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
{statusType
.find((st) => st.id == control.status)
.buttons.map((button) => (
<Button
size="small"
key={button.key}
variant="contained"
onClick={() => button.onclick(controlDispach)}
color={button.color}
startIcon={button.icon}
>
{button.label}
</Button>
))}
</Stack>
</Box>
</>
);
};
export default MapControlPolyline;

28
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/AlarmText.jsx Normal file
View File

@@ -0,0 +1,28 @@
import { Box, Typography } from "@mui/material";
const AlarmText = ({ isSource }) => {
if (isSource) return null;
return (
<Box
sx={{
position: "absolute",
top: 5,
left: 5,
zIndex: 1000,
border: "1px solid #ed0f02",
backgroundColor: "#f19898",
py: 0.5,
px: 1,
borderRadius: 2,
opacity: 0.8,
boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
}}
>
<Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
با کلیک بر روی مارکر موقعیت را انتخاب کنید
</Typography>
</Box>
);
};
export default AlarmText;

53
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/DataBox.jsx Normal file
View File

@@ -0,0 +1,53 @@
import { Box, Button, TextField } from "@mui/material";
const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
if (!isSource) return null;
return (
<Box
sx={{
position: "absolute",
bottom: 5,
left: 5,
zIndex: 1000,
backgroundColor: "white",
border: "1px solid #e1e1e1",
padding: 1,
borderRadius: 2,
opacity: 0.8,
gap: 1,
display: "flex",
flexDirection: "column",
}}
>
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
variant="outlined"
size="small"
readOnly
value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
/>
{isSource && isDest && (
<Button variant="contained" color="success" size="small" onClick={onEditSource}>
ویرایش مبدا
</Button>
)}
</div>
{isDest && (
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
<TextField
size="small"
variant="outlined"
readOnly
value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
/>
<Button variant="contained" color="error" size="small" onClick={onEditDest}>
ویرایش مقصد
</Button>
</div>
)}
</Box>
);
};
export default DataBox;

46
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/ShowRoute.jsx Normal file
View File

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

219
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/Routing/index.jsx Normal file
View File

@@ -0,0 +1,219 @@
import { Marker, Polyline, useMapEvents } from "react-leaflet";
import L from "leaflet";
import polyline from "@mapbox/polyline";
import SourceIcon from "@/assets/images/source-icon.svg";
import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
import DestIcon from "@/assets/images/destination-icon.svg";
import { useEffect, useRef, useState } from "react";
import DataBox from "./DataBox";
import AlarmText from "./AlarmText";
const Routing = ({ setArea, setLocations, locations, area }) => {
const mapPrevSourceMarker = useRef();
const mapPrevDestMarker = useRef();
const mapRef = useRef(null);
const defaultIconSize = [35, 35];
const [isSource, setIsSource] = useState(false);
const [sourcePosition, setSourcePosition] = useState(null);
const [isDest, setIsDest] = useState(false);
const [destPosition, setDestPosition] = useState(null);
const [routeCoords, setRouteCoords] = useState([]);
const [alternateCoords, setAlternateCoords] = useState([]);
const [editingTarget, setEditingTarget] = useState(null);
const [selectedRoute, setSelectedRoute] = useState(null);
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
});
};
const defaultIcon = createCustomIcon(
defaultIconSize,
isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
);
const prevDestIcon = createCustomIcon(
defaultIconSize,
isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
);
const isMovingSource = !isSource || editingTarget === "source";
const isMovingDest = isSource && (!isDest || editingTarget === "dest");
const map = useMapEvents({
move(e) {
if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
},
movestart() {
if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
if (isMovingDest && mapPrevDestMarker.current)
mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
},
moveend() {
if (isMovingSource)
mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
if (isMovingDest && mapPrevDestMarker.current)
mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
},
});
useEffect(() => {
mapRef.current = map;
}, [map]);
useEffect(() => {
if (locations.length < 2) return;
const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
setSourcePosition(restoredSource);
setDestPosition(restoredDest);
setIsSource(true);
setIsDest(true);
if (area) {
const decoded = polyline.decode(area, 6);
setRouteCoords(decoded);
setSelectedRoute({ index: "main", coords: decoded });
setTimeout(() => {
mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
}, 100);
} else {
fetchRoute(restoredSource, restoredDest);
}
}, []);
const fetchRoute = async (source, dest) => {
const locs = [
{ lat: source.lat, lon: source.lng },
{ lat: dest.lat, lon: dest.lng },
];
try {
const response = await fetch("https://jouya.141.ir/api/router/drive", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ locations: locs }),
});
const data = await response.json();
const shape = data.trip.legs[0].shape;
setLocations(locs);
setArea(shape);
const decoded = polyline.decode(shape, 6);
setRouteCoords(decoded);
setSelectedRoute({ index: "main", coords: decoded });
if (data.alternates?.length > 0) {
const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
setAlternateCoords(decodedAlternates);
} else {
setAlternateCoords([]);
}
map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
} catch (error) {
console.error("Routing error:", error);
}
};
const handleMarkerClick = async () => {
if (!isSource || editingTarget === "source") {
const clickedPosition = mapPrevSourceMarker.current.getLatLng();
setSourcePosition(clickedPosition);
setIsSource(true);
setEditingTarget(null);
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
if (editingTarget === "source" && destPosition) {
await fetchRoute(clickedPosition, destPosition);
}
}
};
const handleDestMarkerClick = async () => {
if (!isDest || editingTarget === "dest") {
const clickedPosition = mapPrevDestMarker.current.getLatLng();
setDestPosition(clickedPosition);
setIsDest(true);
setEditingTarget(null);
await fetchRoute(sourcePosition, clickedPosition);
}
};
const handleEditSource = () => {
setEditingTarget("source");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleEditDest = () => {
setEditingTarget("dest");
setRouteCoords([]);
setAlternateCoords([]);
setSelectedRoute(null);
};
const handleSelectRoute = (index, coords) => {
setSelectedRoute({ index, coords });
const encoded = polyline.encode(coords, 6);
setArea(encoded);
map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
};
return (
<>
<DataBox
isSource={isSource}
isDest={isDest}
sourcePosition={sourcePosition}
destPosition={destPosition}
editingTarget={editingTarget}
onEditSource={handleEditSource}
onEditDest={handleEditDest}
/>
<AlarmText isSource={isSource} />
<Marker
position={sourcePosition || map.getCenter()}
ref={mapPrevSourceMarker}
eventHandlers={{ click: handleMarkerClick }}
icon={defaultIcon}
/>
{isSource && (
<Marker
position={destPosition || map.getCenter()}
ref={mapPrevDestMarker}
eventHandlers={{ click: handleDestMarkerClick }}
icon={prevDestIcon}
/>
)}
{alternateCoords.map((coords, index) => (
<Polyline
key={`alternate-${index}-${selectedRoute?.index === index}`}
positions={coords}
color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === index ? 7 : 6}
opacity={selectedRoute?.index === index ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
/>
))}
{routeCoords.length > 0 && (
<Polyline
key={`main-${selectedRoute?.index === "main"}`}
positions={routeCoords}
color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
weight={selectedRoute?.index === "main" ? 7 : 6}
opacity={selectedRoute?.index === "main" ? 1 : 0.7}
eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
/>
)}
</>
);
};
export default Routing;

25
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/SelectBoundType/index.jsx
View File

@@ -1,25 +0,0 @@
import SelectBox from "@/core/components/SelectBox";
export const boundTypes = [
{ id: "polygon", name_fa: "محدوده" },
{ id: "polyline", name_fa: "مسیر" },
];
const SelectBoundType = ({ boundType, setBoundType, setBound, setAllData }) => {
return (
<>
<SelectBox
value={boundType}
label="نوع منطقه عملیاتی"
selectors={boundTypes}
schema={{ name: "name_fa", value: "id" }}
onChange={(newValue) => {
setBound(null);
setBoundType(newValue);
setAllData({ bound_type: newValue });
}}
/>
</>
);
};
export default SelectBoundType;

29
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Area/index.jsx
View File

@@ -2,40 +2,29 @@ import MapLoading from "@/core/components/MapLayer/Loading";
import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
import dynamic from "next/dynamic";
import { useCallback, useState } from "react";
import MapControlPolygon from "./MapControlPolygon";
import MapControlPolyline from "./MapControlPolyline";
import SelectBoundType from "./SelectBoundType";
import Routing from "./Routing";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
});
const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
const [bound, setBound] = useState(allData.bound);
const [boundType, setBoundType] = useState(allData.bound_type);
const [area, setArea] = useState(allData.area);
const [locations, setLocations] = useState(allData.locations);
const handleNext = useCallback(() => {
setAllData({ bound: bound });
setAllData({ area: area });
setAllData({ locations: locations });
setTabState((s) => s + 1);
}, [bound]);
}, [area]);
return (
<>
<DialogContent dividers>
<Stack spacing={2}>
<SelectBoundType
boundType={boundType}
setBoundType={setBoundType}
setBound={setBound}
setAllData={setAllData}
/>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
{boundType == "polygon" ? (
<MapControlPolygon bound={bound} setBound={setBound} boundType={boundType} />
) : (
<MapControlPolyline bound={bound} setBound={setBound} boundType={boundType} />
)}
<Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
</MapLayer>
</Box>
</Stack>
@@ -44,8 +33,8 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
{"مرحله قبلی"}
</Button>
<Button variant="contained" size="large" disabled={!bound} onClick={handleNext}>
{!bound ? "در انتظار ترسیم" : "مرحله بعد"}
<Button variant="contained" size="large" disabled={!area} onClick={handleNext}>
{!area ? "در انتظار ترسیم" : "مرحله بعد"}
</Button>
</DialogActions>
</>

12
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Verify/index.jsx
View File

@@ -5,7 +5,7 @@ import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typogr
import moment from "jalali-moment";
import dynamic from "next/dynamic";
import { useCallback } from "react";
import ShowBound from "../../../showBound";
import ShowRoute from "../Area/Routing/ShowRoute";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
@@ -22,6 +22,16 @@ const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
<Box sx={{ flex: 1 }}>
<Stack spacing={2}>
<Stack spacing={1}>
<Stack spacing={1}>
<Divider>
<Chip color="primary" variant="outlined" label="مسیر ماموریت" />
</Divider>
<Box sx={{ width: "100%", height: "400px" }}>
<MapLayer style={{ borderRadius: "4px" }}>
<ShowRoute area={allData.area} />
</MapLayer>
</Box>
</Stack>
<Divider>
<Chip color="primary" variant="outlined" label="مشخصات ماموریت" />
</Divider>

20
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/index.jsx
View File

@@ -1,4 +1,4 @@
import { AccessTime, Engineering, InsertDriveFile, Person, Verified } from "@mui/icons-material";
import { AccessTime, Engineering, InsertDriveFile, Person, Verified, Map } from "@mui/icons-material";
import { Box, Tab, Tabs } from "@mui/material";
import { useReducer, useState } from "react";
import GetDateTime from "./GetDateTime";
@@ -6,6 +6,7 @@ import GetItemInfo from "./GetItemInfo";
import MachineAndDriver from "./MachineAndDriver";
import Rahdaran from "./Rahdaran";
import Verify from "./Verify";
import Area from "./Area";
function TabPanel(props) {
const { children, value, index } = props;
@@ -61,8 +62,9 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
<Tab icon={<InsertDriveFile />} label="مشخصات" />
<Tab disabled={tabState < 1} icon={<AccessTime />} label="زمانبندی" />
<Tab disabled={tabState < 2} icon={<Person />} label="راننده" />
<Tab disabled={tabState < 3} icon={<Engineering />} label="همراهان" />
<Tab disabled={tabState < 4} icon={<Verified />} label="بررسی نهایی" />
<Tab disabled={tabState < 3} icon={<Map />} label="مختصات" />
<Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
<Tab disabled={tabState < 5} icon={<Verified />} label="بررسی نهایی" />
</Tabs>
<TabPanel value={tabState} index={0}>
<GetItemInfo
@@ -95,7 +97,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
/>
</TabPanel>
<TabPanel value={tabState} index={3}>
<Rahdaran
<Area
allData={allData}
setAllData={(data) => {
dispatch({ type: "changeData", data });
@@ -105,6 +107,16 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
/>
</TabPanel>
<TabPanel value={tabState} index={4}>
<Rahdaran
allData={allData}
setAllData={(data) => {
dispatch({ type: "changeData", data });
}}
handlePrev={handlePrev}
setTabState={setTabState}
/>
</TabPanel>
<TabPanel value={tabState} index={5}>
<Verify allData={allData} handlePrev={handlePrev} submitForm={submitForm} submitting={submitting} />
</TabPanel>
</>

5
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/index.jsx
View File

@@ -28,6 +28,7 @@ const CreateWithoutProcess = ({ row, mutate }) => {
start_date: `${result.start_date} ${moment(result.start_time).format("HH:mm")}`,
end_date: `${result.end_date} ${moment(result.end_time).format("HH:mm")}`,
driver: result.driver.id,
encoded_route: result.area,
},
hasSidebarUpdate: true,
})
@@ -49,7 +50,7 @@ const CreateWithoutProcess = ({ row, mutate }) => {
</IconButton>
</Tooltip>
<Dialog open={open} fullWidth maxWidth="sm">
<Dialog open={open} fullWidth maxWidth="md">
<IconButton
aria-label="close"
onClick={() => setOpen(false)}
@@ -77,6 +78,8 @@ const CreateWithoutProcess = ({ row, mutate }) => {
end_point: "",
region: "",
driver: null,
area: null,
locations: [],
}}
submitForm={submitForm}
submitting={submitting}

4
src/components/dashboard/roadPatrols/reports/index.jsx
View File

@@ -5,7 +5,7 @@ import SearchReportList from "./Search";
import { useEffect, useState } from "react";
import ReportLists from "./ReportLists";
import useRequest from "@/lib/hooks/useRequest";
import { GET_CITY_ACTIVITY_REPORT, GET_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
import { GET_COUNTRY_ACTIVITY_REPORT, GET_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
import moment from "jalali-moment";
import * as yup from "yup";
import { useForm } from "react-hook-form";
@@ -70,7 +70,7 @@ const ReportPage = () => {
} else {
try {
params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_CITY_ACTIVITY_REPORT}?${params}`);
const response = await requestServer(`${GET_COUNTRY_ACTIVITY_REPORT}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.edare_id === "-1");
const nationalReport = {