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

implemented violations list page

Browse Source
This commit is contained in:
baslani
2025-12-02 10:49:56 +03:30
parent 275e115963
commit 4db50470da
35 changed files with 2264 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
jsconfig.json
View File

@@ -1,27 +1,27 @@
// javascript for production
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"],
"^/*": ["./public/*"]
}
}
}
// typescript for local development
// {
// "compilerOptions": {
// "jsx": "react-jsx",
// "noUnusedLocals": true,
// "noImplicitAny": false,
// "checkJs": true,
// "allowJs": true,
// "strict": true,
// "baseUrl": ".",
// "paths": {
// "@/*": ["./src/*"],
// "^/*": ["./public/*"]
// }
// },
// "exclude": ["node_modules"]
// }
// }
// typescript for local development
{
"compilerOptions": {
"jsx": "react-jsx",
"noUnusedLocals": true,
"noImplicitAny": false,
"checkJs": true,
"allowJs": true,
"strict": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"^/*": ["./public/*"]
}
},
"exclude": ["node_modules"]
}

14
src/app/(withAuth)/(dashboardLayout)/dashboard/road-missions/violation/page.js
View File

@@ -1,19 +1,13 @@
import ViolationsPage from "@/components/dashboard/roadMissions/violations";
import WithPermission from "@/core/middlewares/withPermission";
import OperatorPage from "@/components/dashboard/roadMissions/operator";
export const metadata = {
title: "کارتابل ماموریت",
title: "کارتابل تخلفات",
};
const Page = () => {
return (
<>
<WithPermission
permission_name={[
"manage-request-portal-country",
"manage-request-portal-province",
"manage-request-portal-city",
]}
>
<OperatorPage />
<WithPermission permission_name={["all"]}>
<ViolationsPage />
{/* <ActivityCodeLog activity_code={1152} /> */}
</WithPermission>
</>

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

@@ -0,0 +1,129 @@
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 Normal file
View File

@@ -0,0 +1,116 @@
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 Normal file
View File

@@ -0,0 +1,129 @@
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 Normal file
View File

@@ -0,0 +1,116 @@
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;

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

@@ -0,0 +1,25 @@
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;

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

@@ -0,0 +1,54 @@
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";
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 handleNext = useCallback(() => {
setAllData({ bound: bound });
setTabState((s) => s + 1);
}, [bound]);
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} />
)}
</MapLayer>
</Box>
</Stack>
</DialogContent>
<DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
{"مرحله قبلی"}
</Button>
<Button variant="contained" size="large" disabled={!bound} onClick={handleNext}>
{!bound ? "در انتظار ترسیم" : "مرحله بعد"}
</Button>
</DialogActions>
</>
);
};
export default Area;

119
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/GetDateTime/MissionDates/index.jsx Normal file
View File

@@ -0,0 +1,119 @@
import MuiDatePicker from "@/core/components/MuiDatePicker";
import MuiTimePicker from "@/core/components/MuiTimePicker";
import { makeDateTime } from "@/core/utils/makeDateTime";
import { Grid } from "@mui/material";
import { Controller, useWatch } from "react-hook-form";
const MissionDates = ({ control }) => {
const start_date = useWatch({ control, name: "start_date" });
const end_date = useWatch({ control, name: "end_date" });
const start_time = useWatch({ control, name: "start_time" });
const end_time = useWatch({ control, name: "end_time" });
const startDateTime = makeDateTime(start_date, start_time);
const endDateTime = makeDateTime(end_date, end_time);
const now = new Date();
return (
<>
<Grid item xs={12} sm={6}>
<Controller
control={control}
name={"start_date"}
render={({ field, fieldState: { error } }) => (
<MuiDatePicker
name="start_date"
error={error}
value={field.value}
maxDate={end_date ?? null}
placeholder={"تاریخ شروع ماموریت را وارد کنید"}
label={"تاریخ شروع ماموریت"}
setFieldValue={(name, value) => field.onChange(value || null)}
helperText={error ? error.message : null}
/>
)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Controller
control={control}
name={"start_time"}
render={({ field, fieldState: { error } }) => {
return (
<MuiTimePicker
name="start_time"
error={error}
value={field.value}
views={["hours", "minutes"]}
maxTime={
endDateTime &&
start_date &&
end_date &&
new Date(start_date).toDateString() === new Date(end_date).toDateString()
? endDateTime
: null
}
placeholder={"زمان شروع ماموریت را وارد کنید"}
label={"زمان شروع ماموریت"}
setFieldValue={(name, value) => field.onChange(value || null)}
helperText={error ? error.message : null}
/>
);
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Controller
control={control}
name={"end_date"}
render={({ field, fieldState: { error } }) => (
<MuiDatePicker
name="end_date"
error={error}
value={field.value}
minDate={start_date ?? null}
maxDate={now}
placeholder={"تاریخ پایان ماموریت را وارد کنید"}
label={"تاریخ پایان ماموریت"}
setFieldValue={(name, value) => field.onChange(value || null)}
helperText={error ? error.message : null}
/>
)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Controller
control={control}
name={"end_time"}
render={({ field, fieldState: { error } }) => {
return (
<MuiTimePicker
name="end_time"
error={error}
value={field.value}
views={["hours", "minutes"]}
minTime={
startDateTime &&
end_date &&
start_date &&
new Date(start_date).toDateString() === new Date(end_date).toDateString()
? startDateTime
: null
}
maxTime={
end_date && new Date(end_date).toDateString() === now.toDateString() ? now : null
}
placeholder={"زمان پایان ماموریت را وارد کنید"}
label={"زمان پایان ماموریت"}
setFieldValue={(name, value) => field.onChange(value || null)}
helperText={error ? error.message : null}
/>
);
}}
/>
</Grid>
</>
);
};
export default MissionDates;

59
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/GetDateTime/index.jsx Normal file
View File

@@ -0,0 +1,59 @@
import SelectBox from "@/core/components/SelectBox";
import StyledForm from "@/core/components/StyledForm";
import { missionTypes } from "@/core/utils/missionTypes";
import { yupResolver } from "@hookform/resolvers/yup";
import { Box, Button, DialogActions, DialogContent, Grid, Stack } from "@mui/material";
import moment from "jalali-moment";
import { Controller, useForm } from "react-hook-form";
import { object, string } from "yup";
import MissionDates from "./MissionDates";
const validationSchema = object({
start_date: string().required("تاریخ شروع ماموریت را مشخص کنید!"),
start_time: string().required("زمان شروع ماموریت را مشخص کنید!"),
end_date: string().required("تاریخ پایان ماموریت را مشخص کنید!"),
end_time: string().required("زمان شروع ماموریت را مشخص کنید!"),
});
const GetDateTime = ({ allData, setAllData, handlePrev, setTabState }) => {
const defaultValues = {
start_date: allData.start_date,
start_time: allData.start_time ? moment(allData.start_time).toDate() : null,
end_date: allData.end_date,
end_time: allData.end_time ? moment(allData.end_time).toDate() : null,
};
const { control, handleSubmit } = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "all",
});
const handleNext = (data) => {
setAllData(data);
setTabState((s) => s + 1);
};
return (
<StyledForm onSubmit={handleSubmit(handleNext)}>
<DialogContent dividers>
<Box sx={{ flex: 1 }}>
<Stack>
<Grid container spacing={2}>
<MissionDates control={control} />
</Grid>
</Stack>
</Box>
</DialogContent>
<DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
{"مرحله قبلی"}
</Button>
<Button variant="contained" size="large" type="submit">
مرحله بعد
</Button>
</DialogActions>
</StyledForm>
);
};
export default GetDateTime;

20
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/GetItemInfo/FastReactCode/Dialog/List/RowActions/SelectId/index.jsx Normal file
View File

@@ -0,0 +1,20 @@
import { Done } from "@mui/icons-material";
import { IconButton, Tooltip } from "@mui/material";
const SelectId = ({ row, onChange, setOpenFastReactDialog }) => {
const handleClick = () => {
onChange(row.original.id);
setOpenFastReactDialog(false);
};
return (
<>
<Tooltip title="انتخاب" arrow placement="right">
<IconButton color="primary" sx={{ textTransform: "unset", alignSelf: "center" }} onClick={handleClick}>
<Done />
</IconButton>
</Tooltip>
</>
);
};
export default SelectId;

10
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/GetItemInfo/FastReactCode/Dialog/List/RowActions/index.jsx Normal file
View File

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

274
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/GetItemInfo/FastReactCode/Dialog/List/index.jsx Normal file
View File

@@ -0,0 +1,274 @@
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_FAST_REACT_COMPLAINTS } from "@/core/utils/routes";
import { Box, Stack, Typography } from "@mui/material";
import { useMemo } from "react";
import RowActions from "./RowActions";
import { usePermissions } from "@/lib/hooks/usePermissions";
import { useAuth } from "@/lib/contexts/auth";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import DescriptionForm from "@/components/dashboard/fastReact/complaintList/RowActions/DescriptionDialog";
import LocationForm from "@/components/dashboard/fastReact/complaintList/RowActions/LocationDialog";
import moment from "jalali-moment";
import useProvinces from "@/lib/hooks/useProvince";
import useEdaratLists from "@/lib/hooks/useEdaratLists";
const FastReactList = ({ onChange, setOpenFastReactDialog }) => {
const { data: userPermissions } = usePermissions();
const hasCountryPermission = userPermissions?.includes("show-fast-react");
const { user } = useAuth();
const columns = useMemo(() => {
const dynamicColumns = {
header: "استان",
id: "road_observeds__province_id",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
grow: false,
size: 130,
ColumnSelectComponent: (props) => {
const { provinces, errorProvinces, loadingProvinces } = useProvinces();
const getColumnSelectOptions = useMemo(() => {
if (loadingProvinces) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
if (errorProvinces) {
return [{ value: "error", label: "خطا در بارگذاری" }];
}
return [
{ value: "", label: "کل کشور" },
...provinces.map((province) => ({
value: province.id,
label: province.name_fa,
})),
];
}, [provinces, errorProvinces, loadingProvinces]);
return (
<CustomSelectByDependency
{...props}
value={loadingProvinces ? "loading" : props.filterParameters.value}
columnSelectOption={getColumnSelectOptions}
/>
);
},
Cell: ({ row }) => <>{row.original.province_fa}</>,
};
return [
{
accessorKey: "id",
header: "کد یکتا",
id: "road_observeds__id",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
...(hasCountryPermission ? [dynamicColumns] : []),
{
header: "اداره",
id: "road_observeds__edarate_shahri_id",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
dependencyId: hasCountryPermission ? "road_observeds__province_id" : null,
grow: false,
size: 120,
ColumnSelectComponent: (props) => {
const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
);
const [prevDependency, setPrevDependency] = useState(
hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
);
const getColumnSelectOptions = useMemo(() => {
if (hasCountryPermission && props.dependencyFieldValue.value === "") {
return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
}
if (loadingEdaratList) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
if (errorEdaratList) {
return [{ value: "error", label: "خطا در بارگذاری" }];
}
return [
{ value: "", label: "کل ادارات" },
...edaratList.map((edare) => ({
value: edare.id,
label: edare.name_fa,
})),
];
}, [edaratList, loadingEdaratList, errorEdaratList]);
useEffect(() => {
if (hasCountryPermission) return;
if (prevDependency === props.dependencyFieldValue?.value) return;
props.handleChange({ ...props.filterParameters, value: "" });
setPrevDependency(props.dependencyFieldValue?.value);
}, [props.dependencyFieldValue?.value, hasCountryPermission]);
return (
<CustomSelectByDependency
{...props}
value={
props.dependencyFieldValue?.value === ""
? "empty"
: loadingEdaratList
? "loading"
: props.filterParameters.value
}
columnSelectOption={getColumnSelectOptions}
/>
);
},
Cell: ({ row }) => <>{row.original.edarate_shahri_name_fa}</>,
},
{
header: "اطلاعات ثبت‌ شده در سامانه سوانح",
id: "fkInfo",
enableColumnFilter: false,
enableSorting: false,
grow: false,
size: 50,
columns: [
{
accessorKey: "fk_RegisteredEventMessage",
header: "کد سوانح",
id: "fk_RegisteredEventMessage",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "Title",
header: "موضوع گزارش",
id: "Title",
enableColumnFilter: false,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "FeatureTypeTitle",
header: "نوع گزارش",
id: "FeatureTypeTitle",
enableColumnFilter: false,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "Description",
header: "توضیح گزارش",
id: "Description",
enableColumnFilter: false,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
muiTableBodyCellProps: {
sx: {
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
if (renderedCellValue) {
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<DescriptionForm description={renderedCellValue} title={"توضیح گزارش"} />
</Stack>
);
}
return <Typography variant="body2">-</Typography>;
},
},
{
header: "موقعیت",
id: "location",
enableColumnFilter: false,
enableSorting: false,
datatype: "array",
grow: false,
size: 100,
muiTableBodyCellProps: {
sx: {
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ row }) => {
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<LocationForm start_lat={row.original.lat} start_lng={row.original.lng} />
</Stack>
);
},
},
{
accessorKey: "MobileForSendEventSms",
header: "شماره تماس گیرنده",
id: "MobileForSendEventSms",
enableColumnFilter: false,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorFn: (row) => moment(row.StartTime_DateTime).locale("fa").format("HH:mm | yyyy/MM/DD"),
header: "تاریخ ثبت",
id: "StartTime_DateTime",
enableColumnFilter: true,
datatype: "date",
filterMode: "between",
grow: false,
size: 100,
},
],
},
];
}, []);
return (
<>
<Box sx={{ mt: 3, p: 1 }}>
<DataTableWithAuth
need_filter={true}
table_title="لیست شکایات"
columns={columns}
sorting={[{ id: "StartTime_DateTime", desc: true }]}
table_url={GET_FAST_REACT_COMPLAINTS}
page_name={"roadMissionsOperator"}
table_name={"roadMissionsOperatorFastReactList"}
enableRowActions
positionActionsColumn={"first"}
RowActions={(props) => (
<RowActions {...props} onChange={onChange} setOpenFastReactDialog={setOpenFastReactDialog} />
)}
/>
</Box>
</>
);
};
export default FastReactList;

49
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/GetItemInfo/FastReactCode/Dialog/index.jsx Normal file
View File

@@ -0,0 +1,49 @@
import { Close, Edit } from "@mui/icons-material";
import { Button, Chip, Dialog, Divider, IconButton } from "@mui/material";
import FastReactList from "./List";
import { useState, forwardRef } from "react";
const FastReactDialog = forwardRef(({ onChange, value }, ref) => {
const [openFastReactDialog, setOpenFastReactDialog] = useState(false);
return (
<>
<Divider ref={ref}>
{value === "" ? (
<Button onClick={() => setOpenFastReactDialog(true)} variant="outlined">
انتخاب شکایت
</Button>
) : (
<Chip
label={`کد شکایت: ${value}`}
variant="outlined"
deleteIcon={<Edit />}
onDelete={() => setOpenFastReactDialog(true)}
/>
)}
</Divider>
<Dialog open={openFastReactDialog} fullWidth maxWidth="md">
<IconButton
aria-label="close"
onClick={() => setOpenFastReactDialog(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<Close />
</IconButton>
{openFastReactDialog && (
<FastReactList onChange={onChange} setOpenFastReactDialog={setOpenFastReactDialog} />
)}
</Dialog>
</>
);
});
FastReactDialog.displayName = "FastReactDialog";
export default FastReactDialog;

22
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/GetItemInfo/FastReactCode/index.jsx Normal file
View File

@@ -0,0 +1,22 @@
import { Divider, Stack } from "@mui/material";
import { Controller, useWatch } from "react-hook-form";
import FastReactDialog from "./Dialog";
const FastReactCode = ({ control }) => {
const category_id = useWatch({ control, name: "category_id" });
if (category_id != 3) return null;
return (
<Controller
control={control}
name={"road_observed_id"}
render={({ field }) => (
<Stack justifyContent={"center"} sx={{ height: "100%" }}>
<FastReactDialog {...field} />
</Stack>
)}
/>
);
};
export default FastReactCode;

153
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/GetItemInfo/index.jsx Normal file
View File

@@ -0,0 +1,153 @@
import PersianTextField from "@/core/components/PersianTextField";
import SelectBox from "@/core/components/SelectBox";
import StyledForm from "@/core/components/StyledForm";
import { missionCategoryTypes } from "@/core/utils/missionCategoryTypes";
import { missionRegions } from "@/core/utils/missionRegions";
import { yupResolver } from "@hookform/resolvers/yup";
import { ExitToApp } from "@mui/icons-material";
import { Box, Button, DialogActions, DialogContent, Grid, Stack } from "@mui/material";
import { Controller, useForm } from "react-hook-form";
import { object, string } from "yup";
import FastReactCode from "./FastReactCode";
const validationSchema = object({
explanation: string().required("موضوع را مشخص کنید!"),
end_point: string().required("مقصد را مشخص کنید!"),
region: string().required("محور ماموریت را مشخص کنید!"),
category_id: string().required("نوع ماموریت را مشخص کنید!"),
road_observed_id: string().when("category_id", {
is: "3",
then: (schema) => schema.required("کد یکتا شکایت را مشخص کنید!"),
otherwise: (schema) => schema.notRequired(),
}),
});
const GetItemInfo = ({ allData, setAllData, handlePrev, setTabState }) => {
const defaultValues = {
explanation: allData.explanation,
end_point: allData.end_point,
region: allData.region,
category_id: allData.category_id,
road_observed_id: allData.road_observed_id,
};
const { control, handleSubmit } = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "all",
});
const handleNext = (data) => {
setAllData(data);
setTabState((s) => s + 1);
};
return (
<StyledForm onSubmit={handleSubmit(handleNext)}>
<DialogContent dividers>
<Box sx={{ flex: 1 }}>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Controller
control={control}
name={"explanation"}
render={({ field, fieldState: { error } }) => (
<PersianTextField
value={field.value}
variant="outlined"
name="explanation"
onChange={field.onChange}
label="موضوع"
placeholder={"موضوع را وارد کنید"}
fullWidth
size="small"
error={error}
helperText={error?.message}
InputLabelProps={{ shrink: true }}
/>
)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Controller
control={control}
name={"region"}
render={({ field, fieldState: { error } }) => (
<SelectBox
value={field.value}
label="محدوده"
selectors={missionRegions}
schema={{ name: "name_fa", value: "id" }}
error={error}
onChange={field.onChange}
helperText={error?.message}
/>
)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Controller
control={control}
name={"category_id"}
render={({ field, fieldState: { error } }) => (
<SelectBox
value={field.value}
label="نوع ماموریت"
selectors={missionCategoryTypes}
schema={{ name: "name_fa", value: "id" }}
error={error}
onChange={field.onChange}
helperText={error?.message}
/>
)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<FastReactCode control={control} />
</Grid>
<Grid item xs={12} sm={6}>
<Controller
control={control}
name={"end_point"}
render={({ field, fieldState: { error } }) => {
return (
<PersianTextField
value={field.value}
variant="outlined"
name="end_point"
onChange={field.onChange}
label="مقصد"
placeholder={"مقصد را وارد کنید"}
fullWidth
size="small"
error={error}
helperText={error?.message}
InputLabelProps={{ shrink: true }}
/>
);
}}
/>
</Grid>
</Grid>
</Stack>
</Box>
</DialogContent>
<DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
<Button
onClick={handlePrev}
variant="outlined"
color="secondary"
size="large"
startIcon={<ExitToApp />}
>
{"بستن"}
</Button>
<Button variant="contained" size="large" type="submit">
مرحله بعد
</Button>
</DialogActions>
</StyledForm>
);
};
export default GetItemInfo;

61
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/MachineAndDriver/DriversDialog/DriversSearch/Form/index.jsx Normal file
View File

@@ -0,0 +1,61 @@
import RahdarNameOrCode from "@/core/components/RahdarNameOrCode";
import StyledForm from "@/core/components/StyledForm";
import { yupResolver } from "@hookform/resolvers/yup";
import { Done } from "@mui/icons-material";
import { Button, Stack } from "@mui/material";
import { Controller, useForm } from "react-hook-form";
import { object } from "yup";
const schema = object().shape({
rahdar: object().required("همراه الزامی است."),
});
const DriverForm = ({ setDriver, setOpenDriversDialog }) => {
const defaultValues = {
rahdar: null,
};
const {
control,
handleSubmit,
formState: { isSubmitting, isValid },
} = useForm({ defaultValues, resolver: yupResolver(schema), mode: "all" });
const submit = (data) => {
setDriver(data.rahdar);
setOpenDriversDialog(false);
};
return (
<StyledForm onSubmit={handleSubmit(submit)}>
<Stack direction={{ xs: "column", sm: "row" }} justifyContent={"center"} spacing={2}>
<Stack sx={{ minWidth: "250px" }}>
<Controller
control={control}
render={({ field, fieldState: { error } }) => {
return (
<RahdarNameOrCode
title="راننده"
rahdarsName={field.value}
setRahdarsName={(value) => field.onChange(value)}
error={error}
multiple={false}
/>
);
}}
name={"rahdar"}
/>
</Stack>
<Button
variant="contained"
type="submit"
sx={{ textWrap: "nowrap", px: 3 }}
disabled={isSubmitting || !isValid}
startIcon={<Done />}
>
انتخاب
</Button>
</Stack>
</StyledForm>
);
};
export default DriverForm;

11
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/MachineAndDriver/DriversDialog/DriversSearch/index.jsx Normal file
View File

@@ -0,0 +1,11 @@
import { DialogContent } from "@mui/material";
import DriverForm from "./Form";
const DriversSearch = ({ setDriver, setOpenDriversDialog }) => {
return (
<DialogContent dividers>
<DriverForm setDriver={setDriver} setOpenDriversDialog={setOpenDriversDialog} />
</DialogContent>
);
};
export default DriversSearch;

41
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/MachineAndDriver/DriversDialog/index.jsx Normal file
View File

@@ -0,0 +1,41 @@
import { Close, Edit } from "@mui/icons-material";
import { Button, Dialog, DialogTitle, IconButton } from "@mui/material";
import { useState } from "react";
import DriversSearch from "./DriversSearch";
const DriversDialog = ({ setDriver, mode }) => {
const [openDriversDialog, setOpenDriversDialog] = useState(false);
return (
<>
{mode == "edit" ? (
<IconButton onClick={() => setOpenDriversDialog(true)} size="small">
<Edit />
</IconButton>
) : (
<Button onClick={() => setOpenDriversDialog(true)} variant="contained" fullWidth size="large">
انتخاب راننده
</Button>
)}
<Dialog open={openDriversDialog} fullWidth maxWidth="xs">
<IconButton
aria-label="close"
onClick={() => setOpenDriversDialog(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<Close />
</IconButton>
<DialogTitle>انتخاب راننده</DialogTitle>
{openDriversDialog && (
<DriversSearch setDriver={setDriver} setOpenDriversDialog={setOpenDriversDialog} />
)}
</Dialog>
</>
);
};
export default DriversDialog;

20
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/MachineAndDriver/MachinesDialog/MachineList/RowActions/Allocate/index.jsx Normal file
View File

@@ -0,0 +1,20 @@
import { Done } from "@mui/icons-material";
import { IconButton, Tooltip } from "@mui/material";
const Allocate = ({ row, setMachine, setOpenMachinesDialog }) => {
const handleClick = () => {
setMachine(row.original);
setOpenMachinesDialog(false);
};
return (
<>
<Tooltip title="تخصیص" arrow placement="right">
<IconButton color="primary" sx={{ textTransform: "unset", alignSelf: "center" }} onClick={handleClick}>
<Done />
</IconButton>
</Tooltip>
</>
);
};
export default Allocate;

6
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/MachineAndDriver/MachinesDialog/MachineList/RowActions/index.jsx Normal file
View File

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

68
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/MachineAndDriver/MachinesDialog/MachineList/index.jsx Normal file
View File

@@ -0,0 +1,68 @@
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material";
import { useMemo } from "react";
import RowActions from "./RowActions";
import { GET_MACHINES_TABLE_LIST } from "@/core/utils/routes";
const MachinesList = ({ machineType, setMachine, setOpenMachinesDialog }) => {
const columns = useMemo(
() => [
{
accessorKey: "machine_code",
header: "کد خودرو",
id: "machine_code",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "car_name",
header: "نام خودرو",
id: "car_name",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "car_type",
header: "نوع خودرو",
id: "car_type",
enableColumnFilter: false,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
],
[]
);
return (
<>
<Box sx={{ mt: 3, p: 1 }}>
<DataTableWithAuth
need_filter={true}
table_title="لیست خودرو ها"
columns={columns}
sorting={[{ id: "id", desc: true }]}
table_url={GET_MACHINES_TABLE_LIST}
page_name={"roadMissionsOperator"}
table_name={"roadMissionsOperatorMachinesList"}
enableRowActions
positionActionsColumn={"first"}
RowActions={(props) => (
<RowActions {...props} setMachine={setMachine} setOpenMachinesDialog={setOpenMachinesDialog} />
)}
/>
</Box>
</>
);
};
export default MachinesList;

40
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/MachineAndDriver/MachinesDialog/index.jsx Normal file
View File

@@ -0,0 +1,40 @@
import { Close, Edit } from "@mui/icons-material";
import { Button, Dialog, IconButton } from "@mui/material";
import { useState } from "react";
import MachinesList from "./MachineList";
const MachinesDialog = ({ setMachine, mode }) => {
const [openMachinesDialog, setOpenMachinesDialog] = useState(false);
return (
<>
{mode == "edit" ? (
<IconButton onClick={() => setOpenMachinesDialog(true)} size="small">
<Edit />
</IconButton>
) : (
<Button onClick={() => setOpenMachinesDialog(true)} variant="contained" fullWidth size="large">
انتخاب خودرو
</Button>
)}
<Dialog open={openMachinesDialog} fullWidth maxWidth="sm">
<IconButton
aria-label="close"
onClick={() => setOpenMachinesDialog(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<Close />
</IconButton>
{openMachinesDialog && (
<MachinesList setMachine={setMachine} setOpenMachinesDialog={setOpenMachinesDialog} />
)}
</Dialog>
</>
);
};
export default MachinesDialog;

77
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/MachineAndDriver/index.jsx Normal file
View File

@@ -0,0 +1,77 @@
import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typography } from "@mui/material";
import DriversDialog from "./DriversDialog";
import { useState } from "react";
import MachinesDialog from "./MachinesDialog";
const MachineAndDriver = ({ setTabState, allData, setAllData, handlePrev }) => {
const [machine, setMachine] = useState(allData.machine);
const [driver, setDriver] = useState(allData.driver);
const handleNext = (data) => {
setAllData(data);
setTabState((s) => s + 1);
};
return (
<>
<DialogContent dividers>
<Box sx={{ flex: 1 }}>
<Stack sx={{ my: 1 }} spacing={2}>
<Stack direction={"row"} alignItems={"center"} spacing={1}>
{machine ? (
<>
<Typography variant="body2">خودرو</Typography>
<Divider sx={{ flex: 1 }} />
<Chip
label={
machine
? `${machine.machine_code} | ${machine.car_name}`
: "خودرویی انتخاب نشده"
}
size="small"
/>
<Divider sx={{ flex: 1 }} />
<MachinesDialog setMachine={setMachine} mode={"edit"} />
</>
) : (
<MachinesDialog setMachine={setMachine} />
)}
</Stack>
{machine && (
<Stack direction={"row"} alignItems={"center"} spacing={1}>
{driver ? (
<>
<Typography variant="body2">راننده</Typography>
<Divider sx={{ flex: 1 }} />
<Chip
label={driver ? `${driver.code} | ${driver.name}` : "راننده ای انتخاب نشده"}
size="small"
/>
<Divider sx={{ flex: 1 }} />
<DriversDialog setDriver={setDriver} mode={"edit"} />
</>
) : (
<DriversDialog setDriver={setDriver} />
)}
</Stack>
)}
</Stack>
</Box>
</DialogContent>
<DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
{"مرحله قبلی"}
</Button>
<Button
variant="contained"
disabled={!machine || !driver}
size="large"
onClick={() => handleNext({ machine, driver })}
>
مرحله بعد
</Button>
</DialogActions>
</>
);
};
export default MachineAndDriver;

66
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Rahdaran/Form/index.jsx Normal file
View File

@@ -0,0 +1,66 @@
import RahdarNameOrCode from "@/core/components/RahdarNameOrCode";
import StyledForm from "@/core/components/StyledForm";
import { yupResolver } from "@hookform/resolvers/yup";
import { Add } from "@mui/icons-material";
import { Button, Stack } from "@mui/material";
import { Controller, useForm } from "react-hook-form";
import { object } from "yup";
const schema = object().shape({
rahdar: object().required("همراه الزامی است."),
});
const RahdaranForm = ({ setRahdaran }) => {
const defaultValues = {
rahdar: null,
};
const {
control,
handleSubmit,
reset,
formState: { isSubmitting, isValid },
} = useForm({ defaultValues, resolver: yupResolver(schema), mode: "all" });
const submit = (data) => {
setRahdaran((prev) => {
const alreadyExists = prev.some((r) => r.id === data.rahdar.id);
if (alreadyExists) return prev;
return [...prev, data.rahdar];
});
reset();
};
return (
<StyledForm onSubmit={handleSubmit(submit)}>
<Stack direction={{ xs: "column", sm: "row" }} justifyContent={"center"} spacing={2}>
<Stack sx={{ minWidth: "250px" }}>
<Controller
control={control}
render={({ field, fieldState: { error } }) => {
return (
<RahdarNameOrCode
title="همراه"
rahdarsName={field.value}
setRahdarsName={(value) => field.onChange(value)}
error={error}
multiple={false}
/>
);
}}
name={"rahdar"}
/>
</Stack>
<Button
variant="contained"
type="submit"
sx={{ textWrap: "nowrap", px: 3 }}
disabled={isSubmitting || !isValid}
startIcon={<Add />}
>
افزودن همراه
</Button>
</Stack>
</StyledForm>
);
};
export default RahdaranForm;

56
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Rahdaran/List/index.jsx Normal file
View File

@@ -0,0 +1,56 @@
import { AccountCircle, Delete } from "@mui/icons-material";
import { Card, Collapse, IconButton, Stack, Typography } from "@mui/material";
import { TransitionGroup } from "react-transition-group";
const RahdaranList = ({ rahdaran, setRahdaran }) => {
const handleRemove = (index) => {
setRahdaran((prev) => prev.filter((_, i) => i !== index));
};
return (
<Stack>
<TransitionGroup>
{rahdaran.map((rahdar, index) => (
<Collapse key={rahdar.code}>
<Card
elevation={0}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
border: 1,
borderColor: "divider",
px: 1,
py: 1,
my: 1,
}}
>
<Stack direction={"row"} spacing={1}>
<AccountCircle color="primary" sx={{ width: "32px", height: "32px" }} />
<Stack>
<Stack direction={"row"} spacing={0.5}>
<Typography variant="caption">نام و نام خانوادگی:</Typography>
<Typography variant="body2">{rahdar.name}</Typography>
</Stack>
<Stack direction={"row"} spacing={0.5}>
<Typography variant="caption">کدملی:</Typography>
<Typography variant="body2">{rahdar.code}</Typography>
</Stack>
</Stack>
</Stack>
<IconButton color="error" onClick={() => handleRemove(index)}>
<Delete />
</IconButton>
</Card>
</Collapse>
))}
{rahdaran.length == 0 && (
<Collapse>
<Typography align="center">همراهی ثبت نشده است</Typography>
</Collapse>
)}
</TransitionGroup>
</Stack>
);
};
export default RahdaranList;

36
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Rahdaran/index.jsx Normal file
View File

@@ -0,0 +1,36 @@
import { Box, Button, Chip, DialogActions, DialogContent, Divider } from "@mui/material";
import { useCallback, useState } from "react";
import RahdaranForm from "./Form";
import RahdaranList from "./List";
const Rahdaran = ({ allData, setAllData, setTabState, handlePrev }) => {
const [rahdaran, setRahdaran] = useState(allData.rahdaran);
const handleNext = useCallback(() => {
setAllData({ rahdaran: rahdaran });
setTabState((s) => s + 1);
}, [rahdaran]);
return (
<>
<DialogContent dividers>
<Box sx={{ flex: 1 }}>
<RahdaranForm setRahdaran={setRahdaran} />
<Divider sx={{ my: 2 }}>
<Chip label="لیست همراهان" />
</Divider>
<RahdaranList rahdaran={rahdaran} setRahdaran={setRahdaran} />
</Box>
</DialogContent>
<DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
{"مرحله قبلی"}
</Button>
<Button variant="contained" size="large" onClick={handleNext}>
{"مرحله بعد"}
</Button>
</DialogActions>
</>
);
};
export default Rahdaran;

130
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/Form/Verify/index.jsx Normal file
View File

@@ -0,0 +1,130 @@
import MapLoading from "@/core/components/MapLayer/Loading";
import { missionCategoryTypes } from "@/core/utils/missionCategoryTypes";
import { missionRegions } from "@/core/utils/missionRegions";
import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typography } from "@mui/material";
import moment from "jalali-moment";
import dynamic from "next/dynamic";
import { useCallback } from "react";
import ShowBound from "../../../showBound";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
});
const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
const handleNext = useCallback(() => {
submitForm(allData);
}, [allData]);
return (
<>
<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>
<Stack direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">موضوع ماموریت</Typography>
<Divider sx={{ flex: 1 }} />
<Chip size="small" label={allData.explanation} />
</Stack>
<Stack direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">محدوده</Typography>
<Divider sx={{ flex: 1 }} />
<Chip size="small" label={missionRegions.find((r) => r.id == allData.region).name_fa} />
</Stack>
<Stack direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">نوع ماموریت</Typography>
<Divider sx={{ flex: 1 }} />
<Chip
size="small"
label={missionCategoryTypes.find((t) => t.id == allData.category_id).name_fa}
/>
</Stack>
{allData.category_id == 3 && (
<Stack direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">کد شکایت</Typography>
<Divider sx={{ flex: 1 }} />
<Chip size="small" label={allData.road_observed_id} />
</Stack>
)}
<Stack direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">مقصد</Typography>
<Divider sx={{ flex: 1 }} />
<Chip size="small" label={allData.end_point} />
</Stack>
<Stack direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">تاریخ شروع ماموریت</Typography>
<Divider sx={{ flex: 1 }} />
<Chip
size="small"
label={`${moment(allData.start_time).format("HH:mm")} | ${moment(allData.start_date).locale("fa").format("YYYY/MM/DD")}`}
/>
</Stack>
<Stack direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">تاریخ پایان ماموریت</Typography>
<Divider sx={{ flex: 1 }} />
<Chip
size="small"
label={`${moment(allData.end_time).format("HH:mm")} | ${moment(allData.end_date).locale("fa").format("YYYY/MM/DD")}`}
/>
</Stack>
</Stack>
<Stack spacing={1}>
<Divider>
<Chip color="primary" variant="outlined" label="خودرو و راننده" />
</Divider>
<Stack direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">خودرو</Typography>
<Divider sx={{ flex: 1 }} />
<Chip
size="small"
label={`${allData.machine.machine_code} | ${allData.machine.car_name}`}
/>
</Stack>
<Stack direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">راننده</Typography>
<Divider sx={{ flex: 1 }} />
<Chip size="small" label={`${allData.driver.code} | ${allData.driver.name}`} />
</Stack>
</Stack>
<Stack spacing={1}>
<Divider>
<Chip color="primary" variant="outlined" label="همراهان" />
</Divider>
{allData.rahdaran.length != 0 ? (
allData.rahdaran.map((rahdar) => (
<Stack key={rahdar.id} direction={"row"} alignItems={"center"} spacing={1}>
<Typography variant="body2">{rahdar.name}</Typography>
<Divider sx={{ flex: 1 }} />
<Chip size="small" label={rahdar.code} />
</Stack>
))
) : (
<Stack direction={"row"} alignItems={"center"} justifyContent={"center"}>
<Typography variant="body2">همراهی ثبت نشده است</Typography>
</Stack>
)}
</Stack>
</Stack>
</Box>
</DialogContent>
<DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
<Button onClick={handlePrev} variant="outlined" color="secondary" disabled={submitting} size="large">
{"مرحله قبلی"}
</Button>
<Button variant="contained" size="large" disabled={submitting} onClick={handleNext}>
تایید و ثبت ماموریت
</Button>
</DialogActions>
</>
);
};
export default Verify;

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

@@ -0,0 +1,125 @@
import { AccessTime, Engineering, InsertDriveFile, LocalShipping, Route, Verified } from "@mui/icons-material";
import { Box, Tab, Tabs } from "@mui/material";
import { useReducer, useState } from "react";
import Area from "./Area";
import GetDateTime from "./GetDateTime";
import GetItemInfo from "./GetItemInfo";
import Rahdaran from "./Rahdaran";
import Verify from "./Verify";
import MachineAndDriver from "./MachineAndDriver";
function TabPanel(props) {
const { children, value, index } = props;
return (
<div role="tabpanel" hidden={value !== index}>
{value === index && <Box>{children}</Box>}
</div>
);
}
const reducer = (state, action) => {
switch (action.type) {
case "changeData":
return { ...state, ...action.data };
default:
return state;
}
};
const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
const [allData, dispatch] = useReducer(reducer, defaultValues);
const [tabState, setTabState] = useState(0);
const handleClose = () => {
setOpen(false);
};
const handleChangeTab = (event, newValue) => {
setTabState(newValue);
};
const handlePrev = () => {
if (tabState === 0) {
handleClose();
} else {
setTabState((t) => t - 1);
}
};
return (
<>
<Tabs
allowScrollButtonsMobile
value={tabState}
onChange={handleChangeTab}
variant={"fullWidth"}
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
backgroundColor: "#efefef",
}}
>
<Tab icon={<InsertDriveFile />} label="مشخصات" />
<Tab disabled={tabState < 1} icon={<AccessTime />} label="زمانبندی" />
<Tab disabled={tabState < 2} icon={<Route />} label="منطقه عملیاتی" />
<Tab disabled={tabState < 3} icon={<LocalShipping />} label="خودرو و راننده" />
<Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
<Tab disabled={tabState < 5} icon={<Verified />} label="بررسی نهایی" />
</Tabs>
<TabPanel value={tabState} index={0}>
<GetItemInfo
allData={allData}
setAllData={(data) => {
dispatch({ type: "changeData", data });
}}
handlePrev={handlePrev}
setTabState={setTabState}
/>
</TabPanel>
<TabPanel value={tabState} index={1}>
<GetDateTime
allData={allData}
setAllData={(data) => {
dispatch({ type: "changeData", data });
}}
handlePrev={handlePrev}
setTabState={setTabState}
/>
</TabPanel>
<TabPanel value={tabState} index={2}>
<Area
allData={allData}
setAllData={(data) => {
dispatch({ type: "changeData", data });
}}
handlePrev={handlePrev}
setTabState={setTabState}
/>
</TabPanel>
<TabPanel value={tabState} index={3}>
<MachineAndDriver
allData={allData}
setAllData={(data) => {
dispatch({ type: "changeData", data });
}}
handlePrev={handlePrev}
setTabState={setTabState}
/>
</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>
</>
);
};
export default CreateForm;

119
src/components/dashboard/roadMissions/violations/Actions/CreateWithoutProcess/index.jsx Normal file
View File

@@ -0,0 +1,119 @@
import { REQUEST_MISSION_WITHOUT_PROCESS } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { AddCircle, AddCircleOutline, Close } from "@mui/icons-material";
import { Button, Dialog, IconButton, useMediaQuery, useTheme } from "@mui/material";
import moment from "jalali-moment";
import { useState } from "react";
import CreateForm from "./Form";
const CreateWithoutProcess = ({ mutate }) => {
const [submitting, setSubmitting] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const submitForm = async (result) => {
setSubmitting(true);
const bound = result.bound.getLatLngs();
let area =
result.bound_type == "polygon"
? bound.map((ring) => ring.map((latlng) => [latlng.lat, latlng.lng]))[0]
: bound.map((latlng) => [latlng.lat, latlng.lng]);
await requestServer(REQUEST_MISSION_WITHOUT_PROCESS, "post", {
data: {
explanation: result.explanation,
category_id: result.category_id,
...(result.category_id == 3
? {
road_observed_id: result.road_observed_id,
}
: {}),
area: {
type: result.bound_type,
coordinates: area,
},
...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
zone: result.region,
end_point: result.end_point,
start_date: `${result.start_date} ${moment(result.start_time).format("HH:mm")}`,
end_date: `${result.end_date} ${moment(result.end_time).format("HH:mm")}`,
machines: [result.machine.id],
driver: result.driver.id,
},
hasSidebarUpdate: true,
})
.then((response) => {
mutate();
setOpen(false);
})
.catch((error) => {})
.finally(() => {
setSubmitting(false);
});
};
return (
<>
{isMobile ? (
<IconButton aria-label="تصحیح ماموریت" color="primary" onClick={handleOpen}>
<AddCircleOutline sx={{ fontSize: "25px" }} />
</IconButton>
) : (
<Button
size={"small"}
variant="contained"
color="primary"
startIcon={<AddCircle />}
onClick={handleOpen}
>
تصحیح ماموریت
</Button>
)}
<Dialog open={open} fullWidth maxWidth="sm">
<IconButton
aria-label="close"
onClick={() => setOpen(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<Close />
</IconButton>
{open && (
<CreateForm
defaultValues={{
explanation: "",
category_id: "",
road_observed_id: "",
rahdaran: [],
bound: null,
bound_type: "polygon",
start_date: "",
start_time: null,
end_date: "",
end_time: null,
end_point: "",
region: "",
machine: null,
driver: null,
}}
submitForm={submitForm}
submitting={submitting}
setOpen={setOpen}
/>
)}
</Dialog>
</>
);
};
export default CreateWithoutProcess;

4
src/components/dashboard/roadMissions/violations/RowActions/index.jsx Normal file
View File

@@ -0,0 +1,4 @@
const RowActions = ({ row, mutate }) => {
return <></>;
};
export default RowActions;

83
src/components/dashboard/roadMissions/violations/ViolationsList.jsx Normal file
View File

@@ -0,0 +1,83 @@
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_ROAD_MISSIONS_VIOLATIONS_LIST } from "@/core/utils/routes";
import { Box } from "@mui/material";
import moment from "jalali-moment";
import { useMemo } from "react";
import RowActions from "./RowActions";
const ViolationsList = () => {
const columns = useMemo(
() => [
{
accessorKey: "id",
header: "کد یکتا",
id: "id",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
},
{
accessorKey: "type",
header: "نوع تخلف",
id: "type",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
sortDescFirst: true,
grow: false,
Cell: ({ row }) => (row.original.type === 1 ? "خروج بدون مجوز" : "عدم تحرک"),
},
{
accessorKey: "machine_code",
header: "خودرو",
id: "machine_code",
datatype: "text",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
},
{
accessorKey: "mission_id",
header: "کد ماموریت",
id: "mission_id",
enableColumnFilter: false,
datatype: "numeric",
filterMode: "equals",
grow: false,
Cell: ({ row }) => row.original.mission_id || "-",
},
{
accessorKey: "request_date",
header: "تاریخ تخلف",
id: "request_date",
enableColumnFilter: true,
datatype: "date",
filterMode: "between",
grow: false,
Cell: ({ row }) => moment(row.original.request_date).locale("fa").format("YYYY/MM/DD"),
},
],
[]
);
return (
<>
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
need_filter={true}
columns={columns}
sorting={[{ id: "id", desc: true }]}
table_url={GET_ROAD_MISSIONS_VIOLATIONS_LIST}
page_name={"roadMissionsOperator"}
table_name={"roadMissionsViolationsList"}
enableRowActions
positionActionsColumn={"first"}
RowActions={RowActions}
/>
</Box>
</>
);
};
export default ViolationsList;

14
src/components/dashboard/roadMissions/violations/index.jsx Normal file
View File

@@ -0,0 +1,14 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import { Stack } from "@mui/material";
import ViolationsList from "./ViolationsList";
const ViolationsPage = () => {
return (
<Stack spacing={1}>
<PageTitle title={"کارتابل تخلفات"} />
<ViolationsList />
</Stack>
);
};
export default ViolationsPage;

8
src/core/utils/pageMenuDev.js
View File

@@ -131,6 +131,14 @@ export const pageMenuDev = [
badges: [{ key: "mission.control" }],
permissions: ["manage-control-unit"],
},
{
id: "roadMissionsViolations",
label: "تخلفات",
type: "page",
route: "/dashboard/road-missions/violation",
// badges: [{ key: "mission.control" }], // TODO: add badge and permission
permissions: ["all"],
},
],
},
{

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

@@ -227,6 +227,7 @@ export const ALLOCATE_REQUEST_MISSION = api + "/api/v3/missions/transportation_u
export const DEALLOCATE_REQUEST_MISSION = api + "/api/v3/missions/transportation_unit/deallocate";
export const START_MISSION = api + "/api/v3/missions/control_unit/start";
export const FINISH_MISSION = api + "/api/v3/missions/control_unit/finish";
export const GET_ROAD_MISSIONS_VIOLATIONS_LIST = api + "/api/v3/missions/violation_management";
export const GET_MACHINES_TABLE_LIST = api + "/api/v3/cmms_machines";