bugfix/bugfix_cartables #4
@@ -0,0 +1,26 @@
|
|||||||
|
import { Close } from "@mui/icons-material";
|
||||||
|
import { Dialog, DialogTitle, IconButton } from "@mui/material";
|
||||||
|
import ViolationsList from "./ViolationsList";
|
||||||
|
|
||||||
|
const ViolationsDialog = ({ open, setOpen, mutate, row }) => {
|
||||||
|
return (
|
||||||
|
<Dialog open={open} fullWidth maxWidth="xs">
|
||||||
|
<IconButton
|
||||||
|
aria-label="close"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
sx={(theme) => ({
|
||||||
|
position: "absolute",
|
||||||
|
right: 8,
|
||||||
|
top: 8,
|
||||||
|
zIndex: 50,
|
||||||
|
color: theme.palette.grey[500],
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Close />
|
||||||
|
</IconButton>
|
||||||
|
<DialogTitle>تخلفات</DialogTitle>
|
||||||
|
{open && <ViolationsList setOpen={setOpen} />}
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ViolationsDialog;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
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 Routing from "./Routing";
|
||||||
|
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
||||||
|
loading: () => <MapLoading />,
|
||||||
|
ssr: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
|
||||||
|
const [area, setArea] = useState(allData.area);
|
||||||
|
const [locations, setLocations] = useState(allData.locations);
|
||||||
|
|
||||||
|
const handleNext = useCallback(() => {
|
||||||
|
setAllData({ area: area });
|
||||||
|
setAllData({ locations: locations });
|
||||||
|
setTabState((s) => s + 1);
|
||||||
|
}, [area]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DialogContent dividers>
|
||||||
|
<Stack spacing={2}>
|
||||||
|
<Box sx={{ width: "100%", height: "400px" }}>
|
||||||
|
<MapLayer style={{ borderRadius: "4px" }}>
|
||||||
|
<Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
|
||||||
|
</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={!area} onClick={handleNext}>
|
||||||
|
{!area ? "در انتظار ترسیم" : "مرحله بعد"}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Area;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import SelectId from "./SelectId";
|
||||||
|
|
||||||
|
const RowActions = ({ row, onChange, setOpenFastReactDialog }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SelectId row={row} onChange={onChange} setOpenFastReactDialog={setOpenFastReactDialog} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default RowActions;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,150 @@
|
|||||||
|
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}>
|
||||||
|
<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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import Allocate from "./Allocate";
|
||||||
|
|
||||||
|
const RowActions = ({ row, setMachine, setOpenMachinesDialog }) => {
|
||||||
|
return <Allocate row={row} setMachine={setMachine} setOpenMachinesDialog={setOpenMachinesDialog} />;
|
||||||
|
};
|
||||||
|
export default RowActions;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typography } from "@mui/material";
|
||||||
|
import { useState } from "react";
|
||||||
|
import DriversDialog from "./DriversDialog";
|
||||||
|
|
||||||
|
const MachineAndDriver = ({ setTabState, allData, setAllData, handlePrev }) => {
|
||||||
|
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}>
|
||||||
|
{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={!driver} size="large" onClick={() => handleNext({ driver })}>
|
||||||
|
مرحله بعد
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default MachineAndDriver;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
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 ShowRoute from "../Area/Routing/ShowRoute";
|
||||||
|
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}>
|
||||||
|
<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>
|
||||||
|
<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.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;
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
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";
|
||||||
|
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;
|
||||||
|
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 < 2} icon={<Person />} 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
|
||||||
|
allData={allData}
|
||||||
|
setAllData={(data) => {
|
||||||
|
dispatch({ type: "changeData", data });
|
||||||
|
}}
|
||||||
|
handlePrev={handlePrev}
|
||||||
|
setTabState={setTabState}
|
||||||
|
/>
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value={tabState} index={1}>
|
||||||
|
<MachineAndDriver
|
||||||
|
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}>
|
||||||
|
<Rahdaran
|
||||||
|
allData={allData}
|
||||||
|
setAllData={(data) => {
|
||||||
|
dispatch({ type: "changeData", data });
|
||||||
|
}}
|
||||||
|
handlePrev={handlePrev}
|
||||||
|
setTabState={setTabState}
|
||||||
|
/>
|
||||||
|
</TabPanel>
|
||||||
|
<TabPanel value={tabState} index={4}>
|
||||||
|
<Verify allData={allData} handlePrev={handlePrev} submitForm={submitForm} submitting={submitting} />
|
||||||
|
</TabPanel>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default CreateForm;
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
import { MISSOINS_CORRECTION_VIOLATION } from "@/core/utils/routes";
|
||||||
|
import useRequest from "@/lib/hooks/useRequest";
|
||||||
|
import { AddCircleOutline, Close } from "@mui/icons-material";
|
||||||
|
import { Dialog, IconButton, Tooltip } from "@mui/material";
|
||||||
|
import { useState } from "react";
|
||||||
|
import CreateForm from "./Form";
|
||||||
|
|
||||||
|
const MissionCorrection = ({ row, mutate }) => {
|
||||||
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
const requestServer = useRequest({ notificationSuccess: true });
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
const handleOpen = () => {
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitForm = async (result) => {
|
||||||
|
setSubmitting(true);
|
||||||
|
|
||||||
|
await requestServer(`${MISSOINS_CORRECTION_VIOLATION}/${row.original.id}`, "post", {
|
||||||
|
data: {
|
||||||
|
explanation: result.explanation,
|
||||||
|
category_id: result.category_id,
|
||||||
|
...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
|
||||||
|
zone: result.region,
|
||||||
|
end_point: result.end_point,
|
||||||
|
driver: result.driver.id,
|
||||||
|
encoded_route: result.area,
|
||||||
|
},
|
||||||
|
hasSidebarUpdate: true,
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
mutate();
|
||||||
|
setOpen(false);
|
||||||
|
})
|
||||||
|
.catch((error) => {})
|
||||||
|
.finally(() => {
|
||||||
|
setSubmitting(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Tooltip title="تصحیح ماموریت" arrow placement="left">
|
||||||
|
<IconButton aria-label="تصحیح ماموریت" color="primary" onClick={handleOpen}>
|
||||||
|
<AddCircleOutline sx={{ fontSize: "25px" }} />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Dialog open={open} fullWidth maxWidth="md">
|
||||||
|
<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: [],
|
||||||
|
end_point: "",
|
||||||
|
region: "",
|
||||||
|
driver: null,
|
||||||
|
area: null,
|
||||||
|
locations: [],
|
||||||
|
}}
|
||||||
|
submitForm={submitForm}
|
||||||
|
submitting={submitting}
|
||||||
|
setOpen={setOpen}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default MissionCorrection;
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import MissionCorrection from "./MissionCorrection";
|
||||||
|
|
||||||
|
export default function RowActions({ row, mutate }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MissionCorrection row={row} mutate={mutate} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
|
||||||
|
import { Box } from "@mui/material";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
import RowActions from "./RowActions";
|
||||||
|
import { GET_OPERATOR_VIOLATIONS_LIST } from "@/core/utils/routes";
|
||||||
|
import useCities from "@/lib/hooks/useCities";
|
||||||
|
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
|
||||||
|
import useProvinces from "@/lib/hooks/useProvince";
|
||||||
|
|
||||||
|
const ViolationsList = ({ setOpen }) => {
|
||||||
|
const columns = useMemo(() => {
|
||||||
|
const dynamicColumns = {
|
||||||
|
header: "استان",
|
||||||
|
id: "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: ({ renderedCellValue, row }) => {
|
||||||
|
return <>{row.original.province_name}</>;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
accessorKey: "id",
|
||||||
|
header: "کد یکتا",
|
||||||
|
id: "id",
|
||||||
|
enableColumnFilter: true,
|
||||||
|
datatype: "text",
|
||||||
|
filterMode: "equals",
|
||||||
|
columnFilterModeOptions: ["equals", "contains"],
|
||||||
|
grow: false,
|
||||||
|
size: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "machine_code",
|
||||||
|
header: "کد خودرو",
|
||||||
|
id: "machine_code",
|
||||||
|
enableColumnFilter: true,
|
||||||
|
datatype: "text",
|
||||||
|
filterMode: "equals",
|
||||||
|
columnFilterModeOptions: ["equals", "contains"],
|
||||||
|
grow: false,
|
||||||
|
size: 100,
|
||||||
|
},
|
||||||
|
...[dynamicColumns],
|
||||||
|
{
|
||||||
|
header: "شهر",
|
||||||
|
id: "city_id",
|
||||||
|
enableColumnFilter: true,
|
||||||
|
datatype: "numeric",
|
||||||
|
filterMode: "equals",
|
||||||
|
dependencyId: "province_id",
|
||||||
|
grow: false,
|
||||||
|
size: 120,
|
||||||
|
ColumnSelectComponent: (props) => {
|
||||||
|
const { cityList, loadingCityList, errorCityList } = useCities(props.dependencyFieldValue.value);
|
||||||
|
|
||||||
|
const getColumnSelectOptions = useMemo(() => {
|
||||||
|
if (props.dependencyFieldValue.value === "") {
|
||||||
|
return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
|
||||||
|
}
|
||||||
|
if (loadingCityList) {
|
||||||
|
return [{ value: "loading", label: "در حال بارگذاری..." }];
|
||||||
|
}
|
||||||
|
if (errorCityList) {
|
||||||
|
return [{ value: "error", label: "خطا در بارگذاری" }];
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
{ value: "", label: "کل ادارات" },
|
||||||
|
...cityList.map((edare) => ({
|
||||||
|
value: edare.id,
|
||||||
|
label: edare.name_fa,
|
||||||
|
})),
|
||||||
|
];
|
||||||
|
}, [cityList, loadingCityList, errorCityList]);
|
||||||
|
return (
|
||||||
|
<CustomSelectByDependency
|
||||||
|
{...props}
|
||||||
|
value={
|
||||||
|
props.dependencyFieldValue?.value === ""
|
||||||
|
? "empty"
|
||||||
|
: loadingCityList
|
||||||
|
? "loading"
|
||||||
|
: props.filterParameters.value
|
||||||
|
}
|
||||||
|
columnSelectOption={getColumnSelectOptions}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
Cell: ({ row }) => <>{row.original.city_name}</>,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box sx={{ mt: 3, p: 1 }}>
|
||||||
|
<DataTableWithAuth
|
||||||
|
need_filter={true}
|
||||||
|
// table_title="لیست تخلفات"
|
||||||
|
columns={columns}
|
||||||
|
sorting={[{ id: "id", desc: true }]}
|
||||||
|
table_url={GET_OPERATOR_VIOLATIONS_LIST}
|
||||||
|
page_name={"operatorViolations"}
|
||||||
|
table_name={"operatorViolationsList"}
|
||||||
|
enableRowActions
|
||||||
|
positionActionsColumn={"first"}
|
||||||
|
RowActions={(props) => <RowActions {...props} setOpen={setOpen} />}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ViolationsList;
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import { Button, IconButton, Tooltip, useMediaQuery } from "@mui/material";
|
||||||
|
import { useState } from "react";
|
||||||
|
import ViolationsDialog from "./Dialog";
|
||||||
|
import theme from "@/core/utils/theme";
|
||||||
|
import RemoveRoadIcon from "@mui/icons-material/RemoveRoad";
|
||||||
|
|
||||||
|
const OperatorViolations = ({ row, mutate }) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Tooltip title="تخلفات">
|
||||||
|
{isMobile ? (
|
||||||
|
<IconButton aria-label="تخلفات" color="primary" onClick={() => setOpen(true)}>
|
||||||
|
<RemoveRoadIcon sx={{ fontSize: "25px" }} />
|
||||||
|
</IconButton>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
size={"small"}
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
startIcon={<RemoveRoadIcon />}
|
||||||
|
onClick={() => setOpen(true)}
|
||||||
|
>
|
||||||
|
تخلفات
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</Tooltip>
|
||||||
|
<ViolationsDialog open={open} setOpen={setOpen} mutate={mutate} row={row} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default OperatorViolations;
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { Close } from "@mui/icons-material";
|
||||||
|
import { Dialog, DialogTitle, IconButton } from "@mui/material";
|
||||||
|
import ChangeStatusForm from "./Form";
|
||||||
|
|
||||||
|
const ChangeStatusDialog = ({ open, setOpen, mutate, row }) => {
|
||||||
|
return (
|
||||||
|
<Dialog open={open} fullWidth maxWidth="xs">
|
||||||
|
<IconButton
|
||||||
|
aria-label="close"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
sx={(theme) => ({
|
||||||
|
position: "absolute",
|
||||||
|
right: 8,
|
||||||
|
top: 8,
|
||||||
|
zIndex: 50,
|
||||||
|
color: theme.palette.grey[500],
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<Close />
|
||||||
|
</IconButton>
|
||||||
|
<DialogTitle>تغییر وضعیت</DialogTitle>
|
||||||
|
{open && <ChangeStatusForm setOpen={setOpen} mutate={mutate} row={row} />}
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ChangeStatusDialog;
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
import SelectBox from "@/core/components/SelectBox";
|
||||||
|
import StyledForm from "@/core/components/StyledForm";
|
||||||
|
import { CHANGE_STATUS_OPERATOR, CHANGE_STATUS_RECEIPT } 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, DialogActions, DialogContent, Grid, Stack } from "@mui/material";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
import { object, string } from "yup";
|
||||||
|
|
||||||
|
const validationSchema = object({
|
||||||
|
status: string().required("وضعیت را مشخص کنید!"),
|
||||||
|
});
|
||||||
|
|
||||||
|
const ChangeStatusForm = ({ setOpen, mutate, row }) => {
|
||||||
|
const requestServer = useRequest({ notificationSuccess: true });
|
||||||
|
const defaultValues = {
|
||||||
|
status: row.original?.status || "",
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { isSubmitting },
|
||||||
|
} = useForm({
|
||||||
|
defaultValues,
|
||||||
|
resolver: yupResolver(validationSchema),
|
||||||
|
mode: "all",
|
||||||
|
});
|
||||||
|
const onSubmitBase = async (data) => {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("state_id", data.status);
|
||||||
|
await requestServer(`${CHANGE_STATUS_OPERATOR}/${row.original.id}`, "post", {
|
||||||
|
data: formData,
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
mutate();
|
||||||
|
setOpen(false);
|
||||||
|
})
|
||||||
|
.catch((error) => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledForm onSubmit={handleSubmit(onSubmitBase)}>
|
||||||
|
<DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
|
||||||
|
<Stack>
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name={"status"}
|
||||||
|
render={({ field, fieldState: { error } }) => (
|
||||||
|
<SelectBox
|
||||||
|
value={field.value}
|
||||||
|
label="وضعیت"
|
||||||
|
selectors={[
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name_fa: "درخواست ایجاد شد و در حال بررسی توسط واحد تایید کننده است",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name_fa:
|
||||||
|
"خودرو اختصاص داده شد و درخواست توسط واحد کنترل در حال بررسی است",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name_fa: "درخواست توسط واحد کنترل تایید شد و ماموریت آغاز می شود",
|
||||||
|
},
|
||||||
|
{ id: 4, name_fa: "اتمام ماموریت" },
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name_fa:
|
||||||
|
"عدم تخصیص خودرو توسط واحد تایید کننده و بازگشت درخواست به کارتابل کاربر",
|
||||||
|
},
|
||||||
|
{ id: 6, name_fa: "ماموریت لغو شد" },
|
||||||
|
{ id: 7, name_fa: "ماموریت بدون فرایند ثبت شد" },
|
||||||
|
]}
|
||||||
|
schema={{ name: "name_fa", value: "id" }}
|
||||||
|
error={error}
|
||||||
|
onChange={field.onChange}
|
||||||
|
helperText={error?.message}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Stack>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
|
||||||
|
<Button
|
||||||
|
onClick={handleClose}
|
||||||
|
variant="outlined"
|
||||||
|
color="secondary"
|
||||||
|
size="large"
|
||||||
|
startIcon={<ExitToApp />}
|
||||||
|
>
|
||||||
|
بستن
|
||||||
|
</Button>
|
||||||
|
<Button variant="contained" size="large" disabled={isSubmitting} type={"submit"} endIcon={<Beenhere />}>
|
||||||
|
{isSubmitting ? "در حال ثبت" : "ثبت"}
|
||||||
|
</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</StyledForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ChangeStatusForm;
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { Reply } from "@mui/icons-material";
|
||||||
|
import { IconButton, Tooltip } from "@mui/material";
|
||||||
|
import { useState } from "react";
|
||||||
|
import ChangeStatusDialog from "./Dialog";
|
||||||
|
|
||||||
|
const ChangeStatus = ({ row, mutate }) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Tooltip title="تغییر وضعیت">
|
||||||
|
<IconButton color="primary" onClick={() => setOpen(true)}>
|
||||||
|
<Reply />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<ChangeStatusDialog open={open} setOpen={setOpen} mutate={mutate} row={row} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ChangeStatus;
|
||||||
@@ -3,9 +3,13 @@ import Edit from "./Edit";
|
|||||||
import Delete from "./Delete";
|
import Delete from "./Delete";
|
||||||
import { useAuth } from "@/lib/contexts/auth";
|
import { useAuth } from "@/lib/contexts/auth";
|
||||||
import Add from "./Add";
|
import Add from "./Add";
|
||||||
|
import ChangeStatus from "@/components/dashboard/roadMissions/operator/RowActions/ChangeStatus";
|
||||||
|
import { usePermissions } from "@/lib/hooks/usePermissions";
|
||||||
|
|
||||||
const RowActions = ({ row, mutate }) => {
|
const RowActions = ({ row, mutate }) => {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
|
const { data: userPermissions } = usePermissions();
|
||||||
|
const hasChangeStatusPermission = userPermissions.some((item) => ["mission-change-state"].includes(item));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box sx={{ display: "flex", gap: 1 }}>
|
<Box sx={{ display: "flex", gap: 1 }}>
|
||||||
@@ -20,6 +24,7 @@ const RowActions = ({ row, mutate }) => {
|
|||||||
<Add mutate={mutate} row={row} />
|
<Add mutate={mutate} row={row} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
{hasChangeStatusPermission && <ChangeStatus mutate={mutate} row={row} />}
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,12 +1,14 @@
|
|||||||
import { Stack } from "@mui/material";
|
import { Stack } from "@mui/material";
|
||||||
import Create from "./Actions/Create";
|
import Create from "./Actions/Create";
|
||||||
import CreateWithoutProcess from "./Actions/CreateWithoutProcess";
|
import OperatorViolations from "./Actions/Violations";
|
||||||
|
// import CreateWithoutProcess from "./Actions/CreateWithoutProcess";
|
||||||
|
|
||||||
const Toolbar = ({ table, filterData, mutate }) => {
|
const Toolbar = ({ table, filterData, mutate }) => {
|
||||||
return (
|
return (
|
||||||
<Stack direction={"row"} spacing={1}>
|
<Stack direction={"row"} spacing={1}>
|
||||||
<Create mutate={mutate} />
|
<Create mutate={mutate} />
|
||||||
<CreateWithoutProcess mutate={mutate} />
|
<OperatorViolations />
|
||||||
|
{/*<CreateWithoutProcess mutate={mutate} />*/}
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -5,6 +5,16 @@ import RowActions from "./RowActions";
|
|||||||
import { GET_MACHINES_TABLE_LIST } from "@/core/utils/routes";
|
import { GET_MACHINES_TABLE_LIST } from "@/core/utils/routes";
|
||||||
import { useAuth } from "@/lib/contexts/auth";
|
import { useAuth } from "@/lib/contexts/auth";
|
||||||
|
|
||||||
|
const statusTypes = [
|
||||||
|
{ id: 1, name_fa: "آماده" },
|
||||||
|
{ id: 2, name_fa: "رزرو" },
|
||||||
|
{ id: 3, name_fa: "در ماموریت" },
|
||||||
|
{ id: 4, name_fa: "خارج از رده" },
|
||||||
|
{ id: 5, name_fa: "در تعمیر" },
|
||||||
|
{ id: 6, name_fa: "فروخته شده" },
|
||||||
|
{ id: 7, name_fa: "نیاز به تعمیر" },
|
||||||
|
];
|
||||||
|
|
||||||
const MachinesList = ({ machineType, setMachine, setOpenMachinesDialog }) => {
|
const MachinesList = ({ machineType, setMachine, setOpenMachinesDialog }) => {
|
||||||
const {
|
const {
|
||||||
user: { city_id, province_id },
|
user: { city_id, province_id },
|
||||||
@@ -33,6 +43,28 @@ const MachinesList = ({ machineType, setMachine, setOpenMachinesDialog }) => {
|
|||||||
grow: false,
|
grow: false,
|
||||||
size: 100,
|
size: 100,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "status",
|
||||||
|
header: "وضعیت",
|
||||||
|
id: "status",
|
||||||
|
enableColumnFilter: true,
|
||||||
|
datatype: "numeric",
|
||||||
|
filterMode: "equals",
|
||||||
|
sortDescFirst: true,
|
||||||
|
grow: false,
|
||||||
|
size: 100,
|
||||||
|
columnSelectOption: () => {
|
||||||
|
return statusTypes.map((category) => ({
|
||||||
|
value: category.id,
|
||||||
|
label: category.name_fa,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
Cell: ({ row }) => {
|
||||||
|
const statusValue = row.original.status;
|
||||||
|
const statusItem = statusTypes.find((item) => item.id === statusValue);
|
||||||
|
return statusItem ? statusItem.name_fa : statusValue;
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
|
|||||||
import { Button, DialogActions, DialogContent, Stack } from "@mui/material";
|
import { Button, DialogActions, DialogContent, Stack } from "@mui/material";
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
import * as yup from "yup";
|
import * as yup from "yup";
|
||||||
|
import MissionDates from "@/components/dashboard/roadMissions/violations/Actions/CreateViolation/Form/MissionDates";
|
||||||
const schema = yup.object().shape({
|
const schema = yup.object().shape({
|
||||||
machinesId: yup.object().required("کد خودرو الزامی است."),
|
machinesId: yup.object().required("کد خودرو الزامی است."),
|
||||||
km: yup.string(),
|
km: yup.string(),
|
||||||
@@ -61,6 +62,9 @@ const CreateViolationForm = ({ setOpenMachinesDialog, defaultValues, onSubmitBas
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
<Stack spacing={2} sx={{ minWidth: "200px" }}>
|
||||||
|
<MissionDates control={control} />
|
||||||
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
<DialogActions sx={{ alignItems: "center", justifyContent: "end" }}>
|
<DialogActions sx={{ alignItems: "center", justifyContent: "end" }}>
|
||||||
|
|||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import MuiDatePicker from "@/core/components/MuiDatePicker";
|
||||||
|
import MuiTimePicker from "@/core/components/MuiTimePicker";
|
||||||
|
import { Grid } from "@mui/material";
|
||||||
|
import { Controller, useWatch } from "react-hook-form";
|
||||||
|
|
||||||
|
const MissionDates = ({ control }) => {
|
||||||
|
const start_date = useWatch({ control, name: "start_date" });
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Grid item xs={12} sm={6}>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name={"start_date"}
|
||||||
|
render={({ field, fieldState: { error } }) => {
|
||||||
|
return (
|
||||||
|
<MuiDatePicker
|
||||||
|
name="start_date"
|
||||||
|
error={error}
|
||||||
|
value={field.value}
|
||||||
|
disableFuture={false}
|
||||||
|
minDate={start_date ? start_date : now}
|
||||||
|
placeholder={"تاریخ شروع ماموریت را وارد کنید"}
|
||||||
|
label={"تاریخ شروع ماموریت"}
|
||||||
|
setFieldValue={(name, value) => field.onChange(value || [])}
|
||||||
|
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}
|
||||||
|
placeholder={"زمان شروع ماموریت را وارد کنید"}
|
||||||
|
label={"زمان شروع ماموریت"}
|
||||||
|
setFieldValue={(name, value) => field.onChange(value || null)}
|
||||||
|
helperText={error ? error.message : null}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default MissionDates;
|
||||||
@@ -3,6 +3,7 @@ import { DialogHeader } from "next/dist/client/components/react-dev-overlay/inte
|
|||||||
import useRequest from "@/lib/hooks/useRequest";
|
import useRequest from "@/lib/hooks/useRequest";
|
||||||
import { CREATE_VIOLATION } from "@/core/utils/routes";
|
import { CREATE_VIOLATION } from "@/core/utils/routes";
|
||||||
import CreateViolationForm from "@/components/dashboard/roadMissions/violations/Actions/CreateViolation/Form/CreateForm";
|
import CreateViolationForm from "@/components/dashboard/roadMissions/violations/Actions/CreateViolation/Form/CreateForm";
|
||||||
|
import moment from "jalali-moment";
|
||||||
|
|
||||||
const ViolationForm = ({ setOpenMachinesDialog, mutate, openMachinesDialog }) => {
|
const ViolationForm = ({ setOpenMachinesDialog, mutate, openMachinesDialog }) => {
|
||||||
const requestServer = useRequest({ notificationSuccess: true });
|
const requestServer = useRequest({ notificationSuccess: true });
|
||||||
@@ -10,6 +11,8 @@ const ViolationForm = ({ setOpenMachinesDialog, mutate, openMachinesDialog }) =>
|
|||||||
const defaultValues = {
|
const defaultValues = {
|
||||||
machinesId: null,
|
machinesId: null,
|
||||||
km: "",
|
km: "",
|
||||||
|
start_date: null,
|
||||||
|
start_time: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
const submitForm = async (result) => {
|
const submitForm = async (result) => {
|
||||||
@@ -17,6 +20,7 @@ const ViolationForm = ({ setOpenMachinesDialog, mutate, openMachinesDialog }) =>
|
|||||||
data: {
|
data: {
|
||||||
machine_code: result.machinesId.machine_code,
|
machine_code: result.machinesId.machine_code,
|
||||||
km: result.km,
|
km: result.km,
|
||||||
|
exit_station: `${result.start_date} ${moment(result.start_time).format("HH:mm")}`,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
|
|||||||
@@ -60,7 +60,6 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Tab icon={<InsertDriveFile />} label="مشخصات" />
|
<Tab icon={<InsertDriveFile />} label="مشخصات" />
|
||||||
<Tab disabled={tabState < 1} icon={<AccessTime />} label="زمانبندی" />
|
|
||||||
<Tab disabled={tabState < 2} icon={<Person />} label="راننده" />
|
<Tab disabled={tabState < 2} icon={<Person />} label="راننده" />
|
||||||
<Tab disabled={tabState < 3} icon={<Map />} label="مختصات" />
|
<Tab disabled={tabState < 3} icon={<Map />} label="مختصات" />
|
||||||
<Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
|
<Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
|
||||||
@@ -77,16 +76,6 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
|||||||
/>
|
/>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel value={tabState} index={1}>
|
<TabPanel value={tabState} index={1}>
|
||||||
<GetDateTime
|
|
||||||
allData={allData}
|
|
||||||
setAllData={(data) => {
|
|
||||||
dispatch({ type: "changeData", data });
|
|
||||||
}}
|
|
||||||
handlePrev={handlePrev}
|
|
||||||
setTabState={setTabState}
|
|
||||||
/>
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel value={tabState} index={2}>
|
|
||||||
<MachineAndDriver
|
<MachineAndDriver
|
||||||
allData={allData}
|
allData={allData}
|
||||||
setAllData={(data) => {
|
setAllData={(data) => {
|
||||||
@@ -96,7 +85,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
|||||||
setTabState={setTabState}
|
setTabState={setTabState}
|
||||||
/>
|
/>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel value={tabState} index={3}>
|
<TabPanel value={tabState} index={2}>
|
||||||
<Area
|
<Area
|
||||||
allData={allData}
|
allData={allData}
|
||||||
setAllData={(data) => {
|
setAllData={(data) => {
|
||||||
@@ -106,7 +95,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
|||||||
setTabState={setTabState}
|
setTabState={setTabState}
|
||||||
/>
|
/>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel value={tabState} index={4}>
|
<TabPanel value={tabState} index={3}>
|
||||||
<Rahdaran
|
<Rahdaran
|
||||||
allData={allData}
|
allData={allData}
|
||||||
setAllData={(data) => {
|
setAllData={(data) => {
|
||||||
@@ -116,7 +105,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
|||||||
setTabState={setTabState}
|
setTabState={setTabState}
|
||||||
/>
|
/>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
<TabPanel value={tabState} index={5}>
|
<TabPanel value={tabState} index={4}>
|
||||||
<Verify allData={allData} handlePrev={handlePrev} submitForm={submitForm} submitting={submitting} />
|
<Verify allData={allData} handlePrev={handlePrev} submitForm={submitForm} submitting={submitting} />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -25,8 +25,6 @@ const CreateWithoutProcess = ({ row, mutate }) => {
|
|||||||
...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
|
...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
|
||||||
zone: result.region,
|
zone: result.region,
|
||||||
end_point: result.end_point,
|
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")}`,
|
|
||||||
driver: result.driver.id,
|
driver: result.driver.id,
|
||||||
encoded_route: result.area,
|
encoded_route: result.area,
|
||||||
},
|
},
|
||||||
@@ -71,10 +69,6 @@ const CreateWithoutProcess = ({ row, mutate }) => {
|
|||||||
category_id: "",
|
category_id: "",
|
||||||
road_observed_id: "",
|
road_observed_id: "",
|
||||||
rahdaran: [],
|
rahdaran: [],
|
||||||
start_date: "",
|
|
||||||
start_time: null,
|
|
||||||
end_date: "",
|
|
||||||
end_time: null,
|
|
||||||
end_point: "",
|
end_point: "",
|
||||||
region: "",
|
region: "",
|
||||||
driver: null,
|
driver: null,
|
||||||
|
|||||||
@@ -5,24 +5,19 @@ import { DialogHeader } from "next/dist/client/components/react-dev-overlay/inte
|
|||||||
import EditViolationForm from "./EditViolationForm";
|
import EditViolationForm from "./EditViolationForm";
|
||||||
import moment from "jalali-moment";
|
import moment from "jalali-moment";
|
||||||
|
|
||||||
const EditController = ({ rowId, mutate, setOpen }) => {
|
const EditController = ({ rowId, mutate, setOpen, row }) => {
|
||||||
const requestServer = useRequest({ notificationSuccess: true });
|
const requestServer = useRequest({ notificationSuccess: true });
|
||||||
|
const [endDate] = row?.original?.enter_station?.split(" ") || [null];
|
||||||
|
|
||||||
const defaultData = {
|
const defaultData = {
|
||||||
start_date: null,
|
end_date: endDate,
|
||||||
start_time: null,
|
end_time: row?.original?.enter_station ? new Date(row.original.enter_station) : null,
|
||||||
end_date: null,
|
|
||||||
end_time: null,
|
|
||||||
};
|
};
|
||||||
const handleSubmit = async (result) => {
|
const handleSubmit = async (result) => {
|
||||||
const payload = {};
|
const payload = {};
|
||||||
|
|
||||||
if (result.start_date && result.start_time) {
|
|
||||||
payload.enter_time = `${result.start_date} ${moment(result.start_time).format("HH:mm")}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (result.end_date && result.end_time) {
|
if (result.end_date && result.end_time) {
|
||||||
payload.exit_time = `${result.end_date} ${moment(result.end_time).format("HH:mm")}`;
|
payload.enter_station = `${result.end_date} ${moment(result.end_time).format("HH:mm")}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
await requestServer(`${EDIT_VIOLATION}/${rowId}`, "post", {
|
await requestServer(`${EDIT_VIOLATION}/${rowId}`, "post", {
|
||||||
|
|||||||
@@ -5,53 +5,11 @@ import { Grid } from "@mui/material";
|
|||||||
import { Controller, useWatch } from "react-hook-form";
|
import { Controller, useWatch } from "react-hook-form";
|
||||||
|
|
||||||
const MissionDates = ({ control }) => {
|
const MissionDates = ({ control }) => {
|
||||||
const start_date = useWatch({ control, name: "start_date" });
|
|
||||||
const end_date = useWatch({ control, name: "end_date" });
|
const end_date = useWatch({ control, name: "end_date" });
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Grid item xs={12} sm={6}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name={"start_date"}
|
|
||||||
render={({ field, fieldState: { error } }) => {
|
|
||||||
return (
|
|
||||||
<MuiDatePicker
|
|
||||||
name="start_date"
|
|
||||||
error={error}
|
|
||||||
value={field.value}
|
|
||||||
disableFuture={false}
|
|
||||||
maxDate={end_date ?? null}
|
|
||||||
placeholder={"تاریخ شروع ماموریت را وارد کنید"}
|
|
||||||
label={"تاریخ شروع ماموریت"}
|
|
||||||
setFieldValue={(name, value) => field.onChange(value || [])}
|
|
||||||
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"]}
|
|
||||||
placeholder={"زمان شروع ماموریت را وارد کنید"}
|
|
||||||
label={"زمان شروع ماموریت"}
|
|
||||||
setFieldValue={(name, value) => field.onChange(value || null)}
|
|
||||||
helperText={error ? error.message : null}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} sm={6}>
|
<Grid item xs={12} sm={6}>
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
@@ -63,7 +21,7 @@ const MissionDates = ({ control }) => {
|
|||||||
error={error}
|
error={error}
|
||||||
value={field.value}
|
value={field.value}
|
||||||
disableFuture={false}
|
disableFuture={false}
|
||||||
minDate={start_date ? start_date : now}
|
minDate={end_date ? end_date : now}
|
||||||
placeholder={"تاریخ پایان ماموریت را وارد کنید"}
|
placeholder={"تاریخ پایان ماموریت را وارد کنید"}
|
||||||
label={"تاریخ پایان ماموریت"}
|
label={"تاریخ پایان ماموریت"}
|
||||||
setFieldValue={(name, value) => field.onChange(value || [])}
|
setFieldValue={(name, value) => field.onChange(value || [])}
|
||||||
@@ -83,7 +41,6 @@ const MissionDates = ({ control }) => {
|
|||||||
name="end_time"
|
name="end_time"
|
||||||
error={error}
|
error={error}
|
||||||
value={field.value}
|
value={field.value}
|
||||||
views={["hours"]}
|
|
||||||
placeholder={"زمان پایان ماموریت را وارد کنید"}
|
placeholder={"زمان پایان ماموریت را وارد کنید"}
|
||||||
label={"زمان پایان ماموریت"}
|
label={"زمان پایان ماموریت"}
|
||||||
setFieldValue={(name, value) => field.onChange(value || null)}
|
setFieldValue={(name, value) => field.onChange(value || null)}
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
import CreateWithoutProcess from "../Actions/CreateWithoutProcess";
|
// import CreateWithoutProcess from "../Actions/CreateWithoutProcess";
|
||||||
import EditViolation from "../Actions/EditViolation";
|
import EditViolation from "../Actions/EditViolation";
|
||||||
|
|
||||||
const RowActions = ({ row, mutate }) => {
|
const RowActions = ({ row, mutate }) => {
|
||||||
const canEdit = row.original.status === 0 && row.original.type === 1;
|
// const canEdit = row.original.status === 0 && row.original.type === 1;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{!row.original.mileage && <EditViolation row={row} mutate={mutate} rowId={row.getValue("id")} />}
|
{!row.original.mileage && <EditViolation row={row} mutate={mutate} rowId={row.getValue("id")} />}
|
||||||
{canEdit && <CreateWithoutProcess row={row} mutate={mutate} />}
|
{/*{canEdit && <CreateWithoutProcess row={row} mutate={mutate} />}*/}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -6,10 +6,51 @@ import moment from "jalali-moment";
|
|||||||
import { useMemo } from "react";
|
import { useMemo } from "react";
|
||||||
import RowActions from "./RowActions";
|
import RowActions from "./RowActions";
|
||||||
import Toolbar from "./Toolbar";
|
import Toolbar from "./Toolbar";
|
||||||
|
import { violationsCategoryStatus } from "@/core/utils/violationsCategoryStatus";
|
||||||
|
import useProvinces from "@/lib/hooks/useProvince";
|
||||||
|
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
|
||||||
|
import useCities from "@/lib/hooks/useCities";
|
||||||
|
|
||||||
const ViolationsList = () => {
|
const ViolationsList = () => {
|
||||||
const columns = useMemo(
|
const columns = useMemo(() => {
|
||||||
() => [
|
const dynamicColumns = {
|
||||||
|
header: "استان",
|
||||||
|
id: "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: ({ renderedCellValue, row }) => {
|
||||||
|
return <>{row.original.province_name}</>;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return [
|
||||||
{
|
{
|
||||||
accessorKey: "id",
|
accessorKey: "id",
|
||||||
header: "کد یکتا",
|
header: "کد یکتا",
|
||||||
@@ -21,14 +62,20 @@ const ViolationsList = () => {
|
|||||||
grow: false,
|
grow: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "type",
|
accessorKey: "status",
|
||||||
header: "نوع تخلف",
|
header: "وضعیت",
|
||||||
id: "type",
|
id: "status",
|
||||||
enableColumnFilter: true,
|
enableColumnFilter: true,
|
||||||
datatype: "numeric",
|
datatype: "numeric",
|
||||||
filterMode: "equals",
|
filterMode: "equals",
|
||||||
sortDescFirst: true,
|
sortDescFirst: true,
|
||||||
grow: false,
|
grow: false,
|
||||||
|
columnSelectOption: () => {
|
||||||
|
return violationsCategoryStatus.map((category) => ({
|
||||||
|
value: category.id,
|
||||||
|
label: category.name_fa,
|
||||||
|
}));
|
||||||
|
},
|
||||||
Cell: ({ row }) => (row.original.type === 1 ? "خروج بدون مجوز" : "عدم تحرک"),
|
Cell: ({ row }) => (row.original.type === 1 ? "خروج بدون مجوز" : "عدم تحرک"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -39,6 +86,53 @@ const ViolationsList = () => {
|
|||||||
columnFilterModeOptions: ["equals", "contains"],
|
columnFilterModeOptions: ["equals", "contains"],
|
||||||
grow: false,
|
grow: false,
|
||||||
},
|
},
|
||||||
|
...[dynamicColumns],
|
||||||
|
{
|
||||||
|
header: "شهر",
|
||||||
|
id: "city_id",
|
||||||
|
enableColumnFilter: true,
|
||||||
|
datatype: "numeric",
|
||||||
|
filterMode: "equals",
|
||||||
|
dependencyId: "province_id",
|
||||||
|
grow: false,
|
||||||
|
size: 120,
|
||||||
|
ColumnSelectComponent: (props) => {
|
||||||
|
const { cityList, loadingCityList, errorCityList } = useCities(props.dependencyFieldValue.value);
|
||||||
|
|
||||||
|
const getColumnSelectOptions = useMemo(() => {
|
||||||
|
if (props.dependencyFieldValue.value === "") {
|
||||||
|
return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
|
||||||
|
}
|
||||||
|
if (loadingCityList) {
|
||||||
|
return [{ value: "loading", label: "در حال بارگذاری..." }];
|
||||||
|
}
|
||||||
|
if (errorCityList) {
|
||||||
|
return [{ value: "error", label: "خطا در بارگذاری" }];
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
{ value: "", label: "کل ادارات" },
|
||||||
|
...cityList.map((edare) => ({
|
||||||
|
value: edare.id,
|
||||||
|
label: edare.name_fa,
|
||||||
|
})),
|
||||||
|
];
|
||||||
|
}, [cityList, loadingCityList, errorCityList]);
|
||||||
|
return (
|
||||||
|
<CustomSelectByDependency
|
||||||
|
{...props}
|
||||||
|
value={
|
||||||
|
props.dependencyFieldValue?.value === ""
|
||||||
|
? "empty"
|
||||||
|
: loadingCityList
|
||||||
|
? "loading"
|
||||||
|
: props.filterParameters.value
|
||||||
|
}
|
||||||
|
columnSelectOption={getColumnSelectOptions}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
Cell: ({ row }) => <>{row.original.city_name}</>,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
accessorKey: "machine",
|
accessorKey: "machine",
|
||||||
header: "نام خودرو",
|
header: "نام خودرو",
|
||||||
@@ -68,9 +162,8 @@ const ViolationsList = () => {
|
|||||||
grow: false,
|
grow: false,
|
||||||
Cell: ({ row }) => moment(row.original.request_date).locale("fa").format("YYYY/MM/DD"),
|
Cell: ({ row }) => moment(row.original.request_date).locale("fa").format("YYYY/MM/DD"),
|
||||||
},
|
},
|
||||||
],
|
];
|
||||||
[]
|
}, []);
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ const RahdarNameOrCode = ({ title = "راهدار", rahdarsName, setRahdarsName,
|
|||||||
setInputValue(newInputValue || ""); // بهروزرسانی مقدار تایپشده
|
setInputValue(newInputValue || ""); // بهروزرسانی مقدار تایپشده
|
||||||
}}
|
}}
|
||||||
options={options} // گزینههای موجود
|
options={options} // گزینههای موجود
|
||||||
getOptionLabel={(option) => (typeof option === "string" ? option : `${option.code} - ${option.name}`)}
|
getOptionLabel={(option) => (typeof option === "string" ? option : `${option.name}`)}
|
||||||
isOptionEqualToValue={(option, value) => {
|
isOptionEqualToValue={(option, value) => {
|
||||||
if (!value) return false;
|
if (!value) return false;
|
||||||
if (value === "") return option.code === "";
|
if (value === "") return option.code === "";
|
||||||
|
|||||||
@@ -130,6 +130,7 @@ export const GET_INSURANCE_PAGE = api + "/v2/receipt/send-to-insurance";
|
|||||||
export const GET_POLICERAH = api + "/api/v3/receipts/generate_police_document";
|
export const GET_POLICERAH = api + "/api/v3/receipts/generate_police_document";
|
||||||
export const GET_POLICERAH_PAGE = api + "/v2/receipt/document-release";
|
export const GET_POLICERAH_PAGE = api + "/v2/receipt/document-release";
|
||||||
export const CHANGE_STATUS_RECEIPT = api + "/api/v3/receipts/change_status";
|
export const CHANGE_STATUS_RECEIPT = api + "/api/v3/receipts/change_status";
|
||||||
|
export const CHANGE_STATUS_OPERATOR = api + "/api/v3/missions/request_portal/change_state";
|
||||||
|
|
||||||
// recept report
|
// recept report
|
||||||
export const GET_COUNTRY_RECEIPT_REPORT = api + "/api/v3/receipt_reports/country_report";
|
export const GET_COUNTRY_RECEIPT_REPORT = api + "/api/v3/receipt_reports/country_report";
|
||||||
@@ -235,6 +236,7 @@ export const GET_ROAD_MISSIONS_CONTROL_LIST = api + "/api/v3/missions/control_un
|
|||||||
export const REQUEST_MISSION = api + "/api/v3/missions/request_portal";
|
export const REQUEST_MISSION = api + "/api/v3/missions/request_portal";
|
||||||
export const REQUEST_MISSION_WITHOUT_PROCESS = api + "/api/v3/missions/request_portal/no_process";
|
export const REQUEST_MISSION_WITHOUT_PROCESS = api + "/api/v3/missions/request_portal/no_process";
|
||||||
export const REQUEST_MISSION_VIOLATIONS_PROCESS = api + "/api/v3/missions/violation_management/no_process";
|
export const REQUEST_MISSION_VIOLATIONS_PROCESS = api + "/api/v3/missions/violation_management/no_process";
|
||||||
|
export const MISSOINS_CORRECTION_VIOLATION = api + "/api/v3/missions/request_portal/clarify_unauthorized_exit";
|
||||||
export const REQUEST_MISSION_CONTINUE_MISSION = api + "/api/v3/missions/request_portal/continue";
|
export const REQUEST_MISSION_CONTINUE_MISSION = api + "/api/v3/missions/request_portal/continue";
|
||||||
export const UPDATE_REQUEST_MISSION = api + "/api/v3/missions/request_portal";
|
export const UPDATE_REQUEST_MISSION = api + "/api/v3/missions/request_portal";
|
||||||
export const DELETE_REQUEST_MISSION = api + "/api/v3/missions/request_portal";
|
export const DELETE_REQUEST_MISSION = api + "/api/v3/missions/request_portal";
|
||||||
@@ -252,6 +254,7 @@ export const EDIT_VIOLATION = api + "/api/v3/missions/violation_management";
|
|||||||
export const EXPORT_COUNTRY_ROAD_MISSIONS_REPORTS = api + "/api/v3/missions/report/country_excel_activity";
|
export const EXPORT_COUNTRY_ROAD_MISSIONS_REPORTS = api + "/api/v3/missions/report/country_excel_activity";
|
||||||
export const EXPORT_PROVINCE_ROAD_MISSIONS_REPORTS = api + "/api/v3/missions/report/province_excel_activity";
|
export const EXPORT_PROVINCE_ROAD_MISSIONS_REPORTS = api + "/api/v3/missions/report/province_excel_activity";
|
||||||
|
|
||||||
|
export const GET_OPERATOR_VIOLATIONS_LIST = api + "/api/v3/missions/request_portal/violations";
|
||||||
export const GET_MACHINES_TABLE_LIST = api + "/api/v3/cmms_machines";
|
export const GET_MACHINES_TABLE_LIST = api + "/api/v3/cmms_machines";
|
||||||
|
|
||||||
// rahdaran
|
// rahdaran
|
||||||
|
|||||||
4
src/core/utils/violationsCategoryStatus.js
Normal file
4
src/core/utils/violationsCategoryStatus.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export const violationsCategoryStatus = [
|
||||||
|
{ id: 0, name_fa: "بدون اقدام" },
|
||||||
|
{ id: 1, name_fa: "اقدام شده" },
|
||||||
|
];
|
||||||
Reference in New Issue
Block a user