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

Feature/safety and privacy operator

Browse Source
This commit is contained in:
Amin Ghasempoor
2025-03-04 07:48:46 +00:00
committed by AmirHossein Mahmoodi
parent 4f0e007ed5
commit d1aa304324
33 changed files with 1906 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/(withAuth)/dashboard/road-safety/operator/loading.jsx Normal file
View File

@@ -0,0 +1,7 @@
"use client";
import PageLoading from "@/core/components/PageLoading";
const Loading = () => {
return <PageLoading />;
};
export default Loading;

20
src/app/(withAuth)/dashboard/road-safety/operator/page.js Normal file
View File

@@ -0,0 +1,20 @@
import WithPermission from "@/core/middlewares/withPermission";
import OperatorPage from "@/components/dashboard/roadSafety/operator";
// import ActivityCodeLog from "@/core/components/ActivityCodeLog";
const Page = () => {
return (
<WithPermission
permission_name={[
"show-safety-and-privacy-operator-cartable",
"show-safety-and-privacy-operator-cartable-province",
"show-safety-and-privacy-operator-cartable-edarate-shahri",
]}
>
<OperatorPage />
{/*<ActivityCodeLog activity_code={1145} />*/}
</WithPermission>
);
};
export default Page;

74
src/components/dashboard/roadSafety/operator/ExcelPrint/index.jsx Normal file
View File

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

154
src/components/dashboard/roadSafety/operator/Form/StepOne/CreateFormContent.jsx Normal file
View File

@@ -0,0 +1,154 @@
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { mixed, number, object, string } from "yup";
import { Box, Button, DialogActions, DialogContent, Tab, Tabs } from "@mui/material";
import StyledForm from "@/core/components/StyledForm";
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
import FileCopyIcon from "@mui/icons-material/FileCopy";
import ExitToAppIcon from "@mui/icons-material/ExitToApp";
import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
import BeenhereIcon from "@mui/icons-material/Beenhere";
import useRequest from "@/lib/hooks/useRequest";
import GetItemInfo from "./GetItemInfo";
import GetSubItemInfo from "./GetSubItemInfo";
import { format } from "date-fns";
import { FIRST_STEP_STORE } from "@/core/utils/routes";
function TabPanel(props) {
const { children, value, index } = props;
return (
<div role="tabpanel" hidden={value !== index}>
{value === index && <Box>{children}</Box>}
</div>
);
}
const validationSchema = object({
recognize_picture: mixed().nullable().required("لطفا عکس فعالیت را بارگذاری کنید!"),
info_id: number().required("نوع آیتم را مشخص کنید!"),
axis_type_id: number().required("نوع محور را مشخص کنید!"),
start_point: mixed()
.test("start-point-required", "لطفاً نقطه شروع را مشخص کنید!", function (value) {
return !!value; // چک می‌کند که مقدار موجود است
})
.required("لطفاً نقطه فعالیت را مشخص کنید!"),
activity_time: string().required("لطفا زمان فعالیت را انتخاب کنید!"),
activity_date: string().required("لطفا تاریخ فعالیت را انتخاب کنید!"),
});
const CreateFormContent = ({ setOpen, mutate }) => {
const requestServer = useRequest({ notificationSuccess: true });
const [itemsList, setItemsList] = useState();
const defaultValues = {
info_id: null,
axis_type_id: null,
recognize_picture: null,
activity_date: "",
activity_time: "",
start_point: "",
};
const [tabState, setTabState] = useState(0);
const handleClose = () => {
setOpen(false);
};
const handleChangeTab = (event, newValue) => {
setTabState(newValue);
};
const handlePrev = () => {
if (tabState === 2) {
const fieldsToReset = ["recognize_picture", "activity_time", "activity_date", "start_point"];
fieldsToReset.forEach((field) => resetField(field));
}
if (tabState === 0) {
handleClose();
} else {
setTabState(tabState - 1);
}
};
const {
control,
handleSubmit,
resetField,
setValue,
formState: { errors, isSubmitting },
} = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "onBlur",
});
const onSubmitBase = async (data) => {
const startPoint = `${data.start_point.lat},${data.start_point.lng}`;
const formData = new FormData();
formData.append("activity_date", data.activity_date);
formData.append("activity_time", format(new Date(data.activity_time), "HH:mm"));
formData.append("info_id", data.info_id);
formData.append("axis_type_id", data.axis_type_id);
formData.append("recognize_picture", data.recognize_picture);
formData.append("point", startPoint);
await requestServer(FIRST_STEP_STORE, "post", {
data: formData,
})
.then((response) => {
mutate();
setOpen(false);
})
.catch((error) => {});
};
return (
<StyledForm onSubmit={handleSubmit(onSubmitBase)}>
<Tabs
allowScrollButtonsMobile
value={tabState}
onChange={handleChangeTab}
variant={"fullWidth"}
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
backgroundColor: "#efefef",
}}
>
<Tab icon={<InsertDriveFileIcon />} label="انتخاب آیتم" />
<Tab disabled={tabState === 0} icon={<FileCopyIcon />} label="اطلاعات مورد مشاهده شده" />
</Tabs>
<DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
<Box sx={{ flex: 1 }}>
<TabPanel value={tabState} index={0}>
<GetItemInfo control={control} setTabState={setTabState} setItemsList={setItemsList} />
</TabPanel>
<TabPanel value={tabState} index={1}>
<GetSubItemInfo setValue={setValue} errors={errors} itemsList={itemsList} control={control} />
</TabPanel>
</Box>
</DialogContent>
<DialogActions sx={{ alignItems: "center", justifyContent: "center" }}>
<Button
onClick={handlePrev}
variant="outlined"
color="secondary"
size="large"
startIcon={tabState === 0 ? <ExitToAppIcon /> : <KeyboardDoubleArrowRightIcon />}
>
{tabState === 0 ? "بستن" : "مرحله قبل"}
</Button>
{tabState === 1 && (
<Button
variant="contained"
size="large"
disabled={isSubmitting}
type={"submit"}
endIcon={<BeenhereIcon />}
>
{isSubmitting ? "در حال ثبت فعالیت" : "ثبت فعالیت"}
</Button>
)}
</DialogActions>
</StyledForm>
);
};
export default CreateFormContent;

63
src/components/dashboard/roadSafety/operator/Form/StepOne/GetItemInfo.jsx Normal file
View File

@@ -0,0 +1,63 @@
import React from "react";
import { Card, CardActionArea, Grid, LinearProgress, Typography } from "@mui/material";
import Image from "next/image";
import { Controller } from "react-hook-form";
import useSafetyAndPrivacyGetItems from "@/lib/hooks/useSafetyAndPrivacyGetItems";
const GetItemInfo = ({ setItemsList, setTabState, control }) => {
const { itemsList, loadingItemsList, errorItemsList } = useSafetyAndPrivacyGetItems();
return (
<>
{errorItemsList ? (
<Typography textAlign={"center"} color={"error"}>
خطا در دریافت لیست آیتم ها
</Typography>
) : loadingItemsList ? (
<LinearProgress />
) : (
<Grid container sx={{ justifyContent: "center" }} spacing={2}>
<Controller
name={"info_id"}
control={control}
render={({ field }) => (
<>
{itemsList.map((item) => (
<Grid item xs={12} sm={12} key={item.id}>
<Card
elevation={0}
sx={{
border: "1px solid #e7e7e7",
"&:hover": {
boxShadow: 2,
cursor: "pointer",
},
}}
onClick={() => {
field.onChange(item.id);
setItemsList(item);
setTabState(1);
}}
>
<CardActionArea
sx={{
display: "flex",
gap: 1,
alignItems: "center",
p: 2,
}}
>
<Typography>{item.name}</Typography>
</CardActionArea>
</Card>
</Grid>
))}
</>
)}
/>
</Grid>
)}
</>
);
};
export default GetItemInfo;

129
src/components/dashboard/roadSafety/operator/Form/StepOne/GetSubItemInfo.jsx Normal file
View File

@@ -0,0 +1,129 @@
import { Box, Chip, Divider, Grid, Stack, Typography } from "@mui/material";
import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
import ImageUpload from "./ImageUpload";
import { Controller, useWatch } from "react-hook-form";
import MapInfoOneMarker from "@/core/components/MapInfoOneMarker";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import MuiTimePicker from "@/core/components/MuiTimePicker";
import SelectBox from "@/core/components/SelectBox";
const GetSubItemInfo = ({ itemsList, control, setValue, errors }) => {
const StartPoint = useWatch({ control, name: "start_point" });
return (
<Stack spacing={2}>
<Stack>
<Grid container spacing={2} sx={{ alignItems: "center", justifyContent: "space-around" }}>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<InsertDriveFileIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
آیتم انتخاب ‌شده
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{itemsList?.name || "هیچ آیتمی انتخاب نشده است"}
</Typography>
</Grid>
</Grid>
</Stack>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Controller
control={control}
name={"axis_type_id"}
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: "روستایی" },
]}
schema={{ name: "name_fa", value: "id" }}
error={error}
onChange={field.onChange}
helperText={error?.message}
/>
)}
/>
</Grid>
</Grid>
</Stack>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Controller
control={control}
render={({ field, fieldState: { error } }) => {
return (
<MuiDatePicker
name="activity_date"
error={error}
value={field.value}
placeholder={"تاریخ فعالیت را وارد کنید"}
label={"تاریخ فعالیت"}
setFieldValue={(name, value) => field.onChange(value || [])}
helperText={error ? error.message : null}
/>
);
}}
name={"activity_date"}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Controller
control={control}
render={({ field, fieldState: { error } }) => {
return (
<MuiTimePicker
name="activity_time"
error={error}
value={field.value}
placeholder={"زمان فعالیت را وارد کنید"}
label={"زمان فعالیت"}
setFieldValue={(name, value) => field.onChange(value || null)}
helperText={error ? error.message : null}
/>
);
}}
name={"activity_time"}
/>
</Grid>
<Grid item xs={12} sm={12}>
<Controller
name="recognize_picture"
control={control}
render={({ field, fieldState: { error } }) => (
<ImageUpload
name={field.name}
value={field.value}
error={error}
onChange={field.onChange}
title={"تصویر مورد مشاهده شده"}
/>
)}
/>
</Grid>
</Grid>
</Stack>
<Stack sx={{ mt: 2 }}>
<MapInfoOneMarker
setValue={setValue}
StartPoint={StartPoint}
errors={errors}
title={"برای ثبت محل فعالیت، لطفاً نقشه را بیشتر زوم کنید."}
/>
</Stack>
</Stack>
);
};
export default GetSubItemInfo;

77
src/components/dashboard/roadSafety/operator/Form/StepOne/ImageUpload.jsx Normal file
View File

@@ -0,0 +1,77 @@
import { FormControl, FormHelperText } from "@mui/material";
import UploadSystem from "@/core/components/UploadSystem";
import React, { useEffect, useState } from "react";
const ImageUpload = ({ name, value, onChange, error, title }) => {
const [beforeImg, setBeforeImg] = useState(value ? value : null);
const [beforeFileType, setBeforeFileType] = useState(value ? "image/" : null);
const [beforeFileName, setBeforeFileName] = useState(null);
const [showBeforeImage, setShowBeforeImage] = useState(!value);
useEffect(() => {
if (value) {
setShowBeforeImage(false);
if (typeof value === "string") {
setBeforeImg(value);
setBeforeFileType("image/");
} else if (value instanceof File) {
setBeforeImg(URL.createObjectURL(value));
setBeforeFileType(value.type);
}
}
}, [value]);
const handleFileChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setBeforeImg(URL.createObjectURL(uploadedFile));
setBeforeFileType(fileType);
setBeforeFileName(fileName);
onChange(uploadedFile);
setShowBeforeImage(false);
}
};
return (
<FormControl
error={error}
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
<FormHelperText
sx={{
fontSize: 14,
border: 1,
borderBottom: 0,
borderColor: "divider",
px: 2,
py: 1,
borderRadius: 2,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}}
id={name}
>
{title}
</FormHelperText>
<UploadSystem
selectedImage={beforeImg}
handleUploadChange={handleFileChange}
fileType={beforeFileType}
fileName={beforeFileName}
setSelectedImage={setBeforeImg}
imageSize={[250, 150]}
setShowAddIcon={setShowBeforeImage}
showAddIcon={showBeforeImage}
/>
<FormHelperText id={name}>{error ? error.message : null}</FormHelperText>
</FormControl>
);
};
export default ImageUpload;

26
src/components/dashboard/roadSafety/operator/Form/StepOne/OperatorCreateForm.jsx Normal file
View File

@@ -0,0 +1,26 @@
"use client";
import { Dialog, IconButton } from "@mui/material";
import CreateFormContent from "./CreateFormContent";
import CloseIcon from "@mui/icons-material/Close";
const OperatorCreateForm = ({ open, setOpen, mutate }) => {
return (
<Dialog open={open} fullWidth maxWidth="sm">
<IconButton
aria-label="close"
onClick={() => setOpen(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
{open && <CreateFormContent setOpen={setOpen} mutate={mutate} />}
</Dialog>
);
};
export default OperatorCreateForm;

36
src/components/dashboard/roadSafety/operator/Form/StepOne/index.jsx Normal file
View File

@@ -0,0 +1,36 @@
import { Button, IconButton, useMediaQuery } from "@mui/material";
import { AddCircle } from "@mui/icons-material";
import { useTheme } from "@emotion/react";
import { useState } from "react";
import OperatorCreateForm from "./OperatorCreateForm";
const StepOne = ({ mutate }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
return (
<>
{isMobile ? (
<IconButton aria-label="ثبت فعالیت" color="primary" onClick={handleOpen}>
<AddCircle sx={{ fontSize: "25px" }} />
</IconButton>
) : (
<Button
size={"small"}
variant="contained"
color="primary"
startIcon={<AddCircle />}
onClick={handleOpen}
>
ثبت فعالیت
</Button>
)}
<OperatorCreateForm open={open} setOpen={setOpen} mutate={mutate} />
</>
);
};
export default StepOne;

77
src/components/dashboard/roadSafety/operator/Form/StepThree/ImageUpload.jsx Normal file
View File

@@ -0,0 +1,77 @@
import { FormControl, FormHelperText } from "@mui/material";
import UploadSystem from "@/core/components/UploadSystem";
import React, { useEffect, useState } from "react";
const ImageUpload = ({ name, value, onChange, error, title }) => {
const [beforeImg, setBeforeImg] = useState(value ? value : null);
const [beforeFileType, setBeforeFileType] = useState(value ? "image/" : null);
const [beforeFileName, setBeforeFileName] = useState(null);
const [showBeforeImage, setShowBeforeImage] = useState(!value);
useEffect(() => {
if (value) {
setShowBeforeImage(false);
if (typeof value === "string") {
setBeforeImg(value);
setBeforeFileType("image/");
} else if (value instanceof File) {
setBeforeImg(URL.createObjectURL(value));
setBeforeFileType(value.type);
}
}
}, [value]);
const handleFileChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setBeforeImg(URL.createObjectURL(uploadedFile));
setBeforeFileType(fileType);
setBeforeFileName(fileName);
onChange(uploadedFile);
setShowBeforeImage(false);
}
};
return (
<FormControl
error={error}
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
<FormHelperText
sx={{
fontSize: 14,
border: 1,
borderBottom: 0,
borderColor: "divider",
px: 2,
py: 1,
borderRadius: 2,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}}
id={name}
>
{title}
</FormHelperText>
<UploadSystem
selectedImage={beforeImg}
handleUploadChange={handleFileChange}
fileType={beforeFileType}
fileName={beforeFileName}
setSelectedImage={setBeforeImg}
imageSize={[250, 150]}
setShowAddIcon={setShowBeforeImage}
showAddIcon={showBeforeImage}
/>
<FormHelperText id={name}>{error ? error.message : null}</FormHelperText>
</FormControl>
);
};
export default ImageUpload;

69
src/components/dashboard/roadSafety/operator/Form/StepThree/StepThreeContent.jsx Normal file
View File

@@ -0,0 +1,69 @@
import { Button, DialogActions, DialogContent, Stack } from "@mui/material";
import { Controller, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import StyledForm from "@/core/components/StyledForm";
import { mixed, object } from "yup";
import ImageUpload from "./ImageUpload";
import useRequest from "@/lib/hooks/useRequest";
import { THIRD_STEP_STORE } from "@/core/utils/routes";
const StepThreeContent = ({ setOpen, mutate, rowId }) => {
const requestServer = useRequest({ notificationSuccess: true });
const defaultValues = {
action_picture: null,
};
const validationSchema = object({
action_picture: mixed().nullable().required("لطفا عکس اقدام را بارگذاری کنید!"),
});
const {
control,
handleSubmit,
formState: { isSubmitting, errors },
} = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "onBlur",
});
const onSubmit = async (data) => {
const formData = new FormData();
formData.append("action_picture", data.action_picture);
await requestServer(`${THIRD_STEP_STORE}/${rowId}`, "post", {
data: formData,
})
.then((response) => {
mutate();
setOpen(false);
})
.catch((error) => {});
};
return (
<StyledForm onSubmit={handleSubmit(onSubmit)}>
<DialogContent>
<Stack spacing={2}>
<Controller
name="action_picture"
control={control}
render={({ field, fieldState: { error } }) => (
<ImageUpload
name={field.name}
value={field.value}
error={error}
onChange={field.onChange}
title={"تصویر اقدام"}
/>
)}
/>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)} variant={"outlined"} color={"secondary"}>
بستن
</Button>
<Button type={"submit"} variant={"contained"} color={"primary"} disabled={isSubmitting}>
{isSubmitting ? "درحال ثبت تصویر اقدام" : "ثبت تصویر اقدام"}
</Button>
</DialogActions>
</StyledForm>
);
};
export default StepThreeContent;

32
src/components/dashboard/roadSafety/operator/Form/StepThree/index.jsx Normal file
View File

@@ -0,0 +1,32 @@
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import StepThreeContent from "./StepThreeContent";
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
const StepThree = ({ mutate, rowId }) => {
const [open, setOpen] = useState(false);
return (
<>
<Tooltip title="بارگذاری تصویر اقدام">
<IconButton color="primary" onClick={() => setOpen(true)}>
<AddPhotoAlternateIcon />
</IconButton>
</Tooltip>
<Dialog
open={open}
onClose={() => setOpen(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"md"}
fullWidth
>
<DialogTitle>بارگذاری تصویر اقدام</DialogTitle>
<StepThreeContent setOpen={setOpen} mutate={mutate} rowId={rowId} />
</Dialog>
</>
);
};
export default StepThree;

37
src/components/dashboard/roadSafety/operator/Form/StepTwo/ShowDocuments.jsx Normal file
View File

@@ -0,0 +1,37 @@
import { Box, Card, IconButton, Stack, Typography } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import React from "react";
import MinorCrashIcon from "@mui/icons-material/MinorCrash";
const ShowDocuments = ({ deleteDamageItem, selectedDamageItem }) => {
return (
<Card
elevation={0}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
border: 1,
borderColor: "divider",
px: 1,
py: 1,
}}
>
<Box sx={{ display: "flex" }}>
<MinorCrashIcon color="primary" sx={{ width: "50px", height: "50px" }} />
<Stack sx={{ ml: 1, justifyContent: "center" }} spacing={0.5}>
<Typography variant="body1" sx={{ letterSpacing: "1px", fontWeight: 500 }}>
{selectedDamageItem.name}
</Typography>
<Stack></Stack>
</Stack>
</Box>
<Box>
<IconButton color="error" onClick={() => deleteDamageItem(selectedDamageItem.name)}>
<DeleteIcon />
</IconButton>
</Box>
</Card>
);
};
export default ShowDocuments;

129
src/components/dashboard/roadSafety/operator/Form/StepTwo/StepTwoContent.jsx Normal file
View File

@@ -0,0 +1,129 @@
import { Box, Button, Chip, DialogActions, DialogContent, Divider, Fade, Grid, Stack, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { mixed, object } from "yup";
import ShowDocuments from "./ShowDocuments";
import StyledForm from "@/core/components/StyledForm";
import { SECOND_STEP_STORE } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
const StepTwoContent = ({ setOpenStepTwoDialog, mutate, rowId }) => {
const requestServer = useRequest({ notificationSuccess: true });
const [selectedDamageItemList, setSelectedDamageItemList] = useState([]);
const defaultValues = {
judiciary_document: null,
};
const validationSchema = object({
judiciary_document: mixed().test("is-array", "لطفا حداقل یک فایل بارگذاری کنید!", (value) => {
return Array.isArray(value) && value.length > 0;
}),
});
const {
control,
handleSubmit,
setValue,
formState: { isSubmitting, errors },
} = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "onBlur",
});
const handleCreateDamage = (files) => {
setSelectedDamageItemList((prev) => {
const newFiles = files.filter((file) => !prev.some((item) => item.name === file.name));
return [...prev, ...newFiles];
});
};
useEffect(() => {
setValue("judiciary_document", selectedDamageItemList);
}, [selectedDamageItemList]);
const deleteDamageItem = (name) => {
setSelectedDamageItemList((prev) => prev.filter((documentItem) => documentItem.name !== name));
};
const onSubmit = async (data) => {
const formData = new FormData();
data.judiciary_document.map((item, index) => formData.append(`judiciary_document[${index}]`, item));
await requestServer(`${SECOND_STEP_STORE}/${rowId}`, "post", {
data: formData,
})
.then((response) => {
mutate();
setOpenStepTwoDialog(false);
})
.catch((error) => {});
};
return (
<StyledForm onSubmit={handleSubmit(onSubmit)}>
<DialogContent>
<Stack spacing={2}>
<Controller
control={control}
name={"judiciary_document"}
render={({ field, fieldState: { error } }) => (
<>
<Button variant="contained" component="label">
انتخاب فایل
<input
type="file"
hidden
onChange={(e) => {
const files = Array.from(e.target.files);
if (files.length > 0) {
handleCreateDamage(files);
}
}}
/>
</Button>
{error && <Typography color={"error"}>{error.message}</Typography>}
</>
)}
/>
</Stack>
<Divider sx={{ my: 2, width: "100%" }}>
<Chip variant="outlined" label="لیست مستندات قضایی" />
</Divider>
{selectedDamageItemList.length === 0 && (
<Box sx={{ my: 4, width: "100%", textAlign: "center" }}>
<Typography variant="h6" sx={{ letterSpacing: "2px", color: "#606060" }}>
فایل موردنظر را بارگذاری کنید.
</Typography>
</Box>
)}
<Fade in={selectedDamageItemList.length !== 0} sx={{ width: "100%" }}>
<Grid
container
spacing={2}
sx={{
p: 1,
mt: 2,
minHeight: 150,
overflowY: "auto",
}}
>
{selectedDamageItemList.length !== 0 &&
selectedDamageItemList.map((selectedDamageItem, index) => (
<Grid key={index} item xs={12}>
<ShowDocuments
deleteDamageItem={deleteDamageItem}
selectedDamageItem={selectedDamageItem}
/>
</Grid>
))}
</Grid>
</Fade>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenStepTwoDialog(false)} variant={"outlined"} color={"secondary"}>
بستن
</Button>
<Button type={"submit"} variant={"contained"} color={"primary"} disabled={isSubmitting}>
{isSubmitting ? "درحال ثبت مستندات" : "ثبت مستندات"}
</Button>
</DialogActions>
</StyledForm>
);
};
export default StepTwoContent;

33
src/components/dashboard/roadSafety/operator/Form/StepTwo/index.jsx Normal file
View File

@@ -0,0 +1,33 @@
import UploadFileIcon from "@mui/icons-material/UploadFile";
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import StepTwoContent from "./StepTwoContent";
const StepTwo = ({ mutate, rowId }) => {
const [openStepTwoDialog, setOpenStepTwoDialog] = useState(false);
return (
<>
<Tooltip title="بارگذاری مستندات">
<IconButton color="primary" onClick={() => setOpenStepTwoDialog(true)}>
<UploadFileIcon />
</IconButton>
</Tooltip>
<Dialog
open={openStepTwoDialog}
onClose={() => setOpenStepTwoDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"md"}
fullWidth
>
<DialogTitle>بارگذاری مستندات قضایی</DialogTitle>
<StepTwoContent mutate={mutate} rowId={rowId} setOpenStepTwoDialog={setOpenStepTwoDialog} />
</Dialog>
</>
);
};
export default StepTwo;

426
src/components/dashboard/roadSafety/operator/OperatorList.jsx Normal file
View File

@@ -0,0 +1,426 @@
"use client";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box, Stack } from "@mui/material";
import moment from "jalali-moment";
import { useEffect, useMemo, useState } from "react";
import RowActions from "./RowActions";
import Toolbar from "./Toolbar";
import { usePermissions } from "@/lib/hooks/usePermissions";
import { useAuth } from "@/lib/contexts/auth";
import useProvinces from "@/lib/hooks/useProvince";
import useEdaratLists from "@/lib/hooks/useEdaratLists";
import { GET_SAFETY_AND_PRIVACY } from "@/core/utils/routes";
import RecognizePictureDialog from "./RowActions/RecognizePictureDialog";
import ActionPictureDialog from "./RowActions/ActionPictureDialog";
import JudiciaryDocumentDialog from "./RowActions/JudiciaryDocumentDialog";
import LocationForm from "./RowActions/LocationForm";
const OperatorList = () => {
const { data: userPermissions } = usePermissions();
const hasCountryPermission = userPermissions?.includes("show-fast-react");
const { user } = useAuth();
const statusOptions = [
{ value: "", label: "همه وضعیت ها" },
{ value: 1, label: "گام اول (شناسایی)" },
{ value: 2, label: "گام دوم (مستندات قضایی)" },
{ value: 3, label: "گام سوم (برخورد)" },
];
const axisOptions = [
{ value: "", label: "همه محور ها" },
{ value: 1, label: "آزادراه" },
{ value: 2, label: "بزرگراه" },
{ value: 3, label: "اصلی" },
{ value: 4, label: "فرعی" },
{ value: 5, label: "روستایی" },
];
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: ({ row }) => <>{row.original.province_fa}</>,
};
return [
{
accessorKey: "id",
header: "کد یکتا",
id: "id",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
...(hasCountryPermission ? [dynamicColumns] : []),
{
header: "اداره",
id: "edare_shahri_id",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
dependencyId: hasCountryPermission ? "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.edare_shahri_name}</>,
},
{
header: "اطلاعات فعالیت",
id: "info",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
columns: [
{
accessorKey: "info_id",
header: "موضوع مشاهده شده",
id: "info_id",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
Cell: ({ row }) => <>{row.original.info_fa}</>,
},
{
accessorKey: "axis_type_id",
header: "نوع محور",
id: "axis_type_id",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
sortDescFirst: true,
grow: false,
size: 100,
columnSelectOption: () => {
return axisOptions.map((status) => ({
value: status.value,
label: status.label,
}));
},
Cell: ({ row }) =>
row.original?.axis_type_name ? <>{row.original.axis_type_name}</> : <>بدون محور</>,
},
{
accessorKey: "location",
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?.lon} />
</Stack>
);
},
},
],
},
{
header: "گام اول",
id: "stepOne",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
columns: [
{
accessorKey: "recognize_picture",
header: "تصویر بازدید",
id: "recognize_picture",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 100,
muiTableBodyCellProps: {
sx: {
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
return renderedCellValue ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<RecognizePictureDialog image={renderedCellValue} />
</Stack>
) : (
<>بدون تصویر</>
);
},
},
{
accessorFn: (row) =>
row.activity_date_time ? (
moment(row.activity_date_time).locale("fa").format("HH:mm | yyyy/MM/DD")
) : (
<>بدون تاریخ</>
),
header: "تاریخ بازدید",
id: "activity_date_time",
enableColumnFilter: true,
datatype: "date",
filterMode: "between",
grow: false,
size: 100,
},
],
},
{
header: "گام دوم",
id: "stepTwo",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
columns: [
{
header: "مستندات قضایی",
id: "judiciary_document",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
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"}>
<JudiciaryDocumentDialog rowId={row.getValue("id")} />
</Stack>
);
},
},
{
accessorFn: (row) => {
const date = row.judiciary_document_upload_date;
if (!date || date === "0000-00-00 00:00:00") {
return <>بدون تاریخ</>;
}
return moment(date, "YYYY-MM-DD HH:mm:ss").locale("fa").format("HH:mm | yyyy/MM/DD");
},
header: "تاریخ مستندات قضایی",
id: "judiciary_document_upload_date",
enableColumnFilter: true,
datatype: "date",
filterMode: "between",
grow: false,
size: 100,
},
],
},
{
header: "گام سوم",
id: "stepThree",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
columns: [
{
accessorKey: "action_picture",
header: "تصویر اقدام",
id: "action_picture",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 100,
muiTableBodyCellProps: {
sx: {
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
return renderedCellValue ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<ActionPictureDialog image={renderedCellValue} />
</Stack>
) : (
<>بدون تصویر</>
);
},
},
{
accessorFn: (row) =>
row.action_picture_document_upload_date ? (
moment(row.action_picture_document_upload_date)
.locale("fa")
.format("HH:mm | yyyy/MM/DD")
) : (
<>بدون تاریخ</>
),
header: "تاریخ اقدام",
id: "action_picture_document_upload_date",
enableColumnFilter: true,
datatype: "date",
filterMode: "between",
grow: false,
size: 100,
},
],
},
{
accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
header: "تاریخ ثبت",
id: "created_at",
enableColumnFilter: true,
datatype: "date",
filterMode: "between",
grow: false,
size: 100,
},
{
header: "وضعیت",
id: "step",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
sortDescFirst: true,
grow: false,
size: 100,
columnSelectOption: () => {
return statusOptions.map((status) => ({
value: status.value,
label: status.label,
}));
},
Cell: ({ row }) => <>{row.original.step_fa}</>,
},
];
}, []);
return (
<>
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
need_filter={true}
columns={columns}
sorting={[{ id: "id", desc: true }]}
table_url={GET_SAFETY_AND_PRIVACY}
page_name={"operatorSafetyAndPrivacy"}
table_name={"operatorList"}
TableToolbar={Toolbar}
enableRowActions
positionActionsColumn={"last"}
RowActions={RowActions}
/>
</Box>
</>
);
};
export default OperatorList;

44
src/components/dashboard/roadSafety/operator/RowActions/ActionPictureDialog/ActionPictureContent.jsx Normal file
View File

@@ -0,0 +1,44 @@
import { Box, Stack, Typography, useTheme } from "@mui/material";
import Image from "next/image";
const ActionPictureContent = ({ image, title }) => {
const theme = useTheme();
return (
<Stack
spacing={2}
alignItems="center"
justifyContent="center"
sx={{
my: 2,
padding: 2,
borderRadius: "12px",
border: `1px solid ${theme.palette.primary.main}`,
}}
>
<Typography
variant="h6"
sx={{
color: theme.palette.primary.dark,
fontWeight: "bold",
}}
>
{title}
</Typography>
<Box sx={{ width: "100%", position: "relative", aspectRatio: "16/9" }}>
<Image
src={image}
alt="Image"
fill={true}
loading="lazy"
style={{
objectFit: "contain",
marginBottom: "16px",
borderRadius: "12px",
border: `1px solid ${theme.palette.divider}`,
}}
/>
</Box>
</Stack>
);
};
export default ActionPictureContent;

40
src/components/dashboard/roadSafety/operator/RowActions/ActionPictureDialog/index.jsx Normal file
View File

@@ -0,0 +1,40 @@
import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
import { Button, Dialog, DialogActions, DialogContent, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import ActionPictureContent from "./ActionPictureContent";
const ActionPictureDialog = ({ image }) => {
const [openImageDialog, setOpenImageDialog] = useState(false);
return (
<>
<Tooltip title="تصویر اقدام">
<IconButton color="primary" onClick={() => setOpenImageDialog(true)}>
<PhotoLibraryIcon />
</IconButton>
</Tooltip>
<Dialog
fullWidth
open={openImageDialog}
onClose={() => setOpenImageDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
maxWidth={"sm"}
scroll="paper"
>
<DialogContent>
<ActionPictureContent image={image} title={"تصویر اقدام"} />
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">
بستن
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default ActionPictureDialog;

40
src/components/dashboard/roadSafety/operator/RowActions/DeleteDialog/DeleteContent.jsx Normal file
View File

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

32
src/components/dashboard/roadSafety/operator/RowActions/DeleteDialog/index.jsx Normal file
View File

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

43
src/components/dashboard/roadSafety/operator/RowActions/JudiciaryDocumentDialog/JudiciaryDocumentContent.jsx Normal file
View File

@@ -0,0 +1,43 @@
import { Box, Button, Chip, Divider, Grid, Typography } from "@mui/material";
import DownloadIcon from "@mui/icons-material/Download";
import ArticleIcon from "@mui/icons-material/Article";
const JudiciaryDocumentContent = ({ judiciaryDocumentDetails }) => {
return (
<Grid container spacing={3} sx={{ alignItems: "center", justifyContent: "space-around" }}>
{judiciaryDocumentDetails.map((judiciaryDocument, index) => {
return (
<Grid key={index} item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<ArticleIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مستندات قضایی {index + 1}
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Button
variant="contained"
color="primary"
size="small"
startIcon={<DownloadIcon />}
onClick={() => {
if (judiciaryDocument) {
window.open(judiciaryDocument, "_blank");
} else {
alert("فایلی برای دانلود موجود نیست.");
}
}}
>
دانلود فایل
</Button>
</Grid>
);
})}
</Grid>
);
};
export default JudiciaryDocumentContent;

35
src/components/dashboard/roadSafety/operator/RowActions/JudiciaryDocumentDialog/JudiciaryDocumentController.jsx Normal file
View File

@@ -0,0 +1,35 @@
import { useEffect, useState } from "react";
import useRequest from "@/lib/hooks/useRequest";
import DialogLoading from "@/core/components/DialogLoading";
import JudiciaryDocumentContent from "./JudiciaryDocumentContent";
import { DESERIALIZE_JUDICIARY_DOCUMENT } from "@/core/utils/routes";
import { Typography } from "@mui/material";
const JudiciaryDocumentController = ({ rowId }) => {
const requestServer = useRequest();
const [judiciaryDocumentDetails, setJudiciaryDocumentDetails] = useState([]);
const [judiciaryDocumentDetailsLoading, setJudiciaryDocumentDetailsLoading] = useState(false);
useEffect(() => {
setJudiciaryDocumentDetailsLoading(true);
requestServer(`${DESERIALIZE_JUDICIARY_DOCUMENT}/${rowId}`, "get")
.then((response) => {
setJudiciaryDocumentDetails(response.data.data);
setJudiciaryDocumentDetailsLoading(false);
})
.catch((e) => {
setJudiciaryDocumentDetailsLoading(false);
});
}, [rowId]);
return (
<>
{judiciaryDocumentDetailsLoading ? (
<DialogLoading />
) : judiciaryDocumentDetails.length > 0 ? (
<JudiciaryDocumentContent judiciaryDocumentDetails={judiciaryDocumentDetails} />
) : (
<Typography textAlign={"center"}>بدون مستندات</Typography>
)}
</>
);
};
export default JudiciaryDocumentController;

40
src/components/dashboard/roadSafety/operator/RowActions/JudiciaryDocumentDialog/index.jsx Normal file
View File

@@ -0,0 +1,40 @@
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
import ArticleIcon from "@mui/icons-material/Article";
import React, { useState } from "react";
import JudiciaryDocumentController from "./JudiciaryDocumentController";
const JudiciaryDocumentDialog = ({ rowId }) => {
const [openJudiciaryDocumentDialog, setOpenJudiciaryDocumentDialog] = useState(false);
return (
<>
<Tooltip title="مستندات قضایی">
<IconButton color="primary" onClick={() => setOpenJudiciaryDocumentDialog(true)}>
<ArticleIcon />
</IconButton>
</Tooltip>
<Dialog
open={openJudiciaryDocumentDialog}
onClose={() => setOpenJudiciaryDocumentDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"sm"}
fullWidth
>
<DialogTitle>مشاهده مستندات قضایی</DialogTitle>
<DialogContent>
<JudiciaryDocumentController rowId={rowId} />
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenJudiciaryDocumentDialog(false)} variant="outlined" color="secondary">
بستن
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default JudiciaryDocumentDialog;

35
src/components/dashboard/roadSafety/operator/RowActions/LocationForm/LocationFormContent.jsx Normal file
View File

@@ -0,0 +1,35 @@
"use client";
import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
import React from "react";
import dynamic from "next/dynamic";
import MapLoading from "@/core/components/MapLayer/Loading";
import ShowLocationMarker from "@/core/components/ShowLocationMarker";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
ssr: false,
});
const LocationFormContent = ({ setOpenLocationDialog, start_lat, start_lng, end_lat, end_lng }) => {
return (
<>
<DialogContent>
<Box sx={{ width: "400px", height: "400px" }}>
<MapLayer>
<ShowLocationMarker
start_lat={start_lat}
start_lng={start_lng}
end_lat={end_lat}
end_lng={end_lng}
/>
</MapLayer>
</Box>
</DialogContent>
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
<Button onClick={() => setOpenLocationDialog(false)} variant="outlined" color="secondary">
بستن
</Button>
</DialogActions>
</>
);
};
export default LocationFormContent;

40
src/components/dashboard/roadSafety/operator/RowActions/LocationForm/index.jsx Normal file
View File

@@ -0,0 +1,40 @@
import React, { useState } from "react";
import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
import ExploreIcon from "@mui/icons-material/Explore";
import LocationFormContent from "./LocationFormContent";
const LocationForm = ({ start_lat, start_lng, end_lat, end_lng }) => {
const [openLocationDialog, setOpenLocationDialog] = useState(false);
return (
<>
<Tooltip title="موقعیت">
<IconButton color="primary" onClick={() => setOpenLocationDialog(true)}>
<ExploreIcon />
</IconButton>
</Tooltip>
<Dialog
open={openLocationDialog}
onClose={() => setOpenLocationDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
dir="rtl"
maxWidth={"md"}
>
<DialogTitle>موقعیت</DialogTitle>
{openLocationDialog && (
<LocationFormContent
start_lat={start_lat}
start_lng={start_lng}
end_lat={end_lat}
end_lng={end_lng}
setOpenLocationDialog={setOpenLocationDialog}
/>
)}
</Dialog>
</>
);
};
export default LocationForm;

44
src/components/dashboard/roadSafety/operator/RowActions/RecognizePictureDialog/RecognizePictureContent.jsx Normal file
View File

@@ -0,0 +1,44 @@
import { Box, Stack, Typography, useTheme } from "@mui/material";
import Image from "next/image";
const RecognizePictureContent = ({ image, title }) => {
const theme = useTheme();
return (
<Stack
spacing={2}
alignItems="center"
justifyContent="center"
sx={{
my: 2,
padding: 2,
borderRadius: "12px",
border: `1px solid ${theme.palette.primary.main}`,
}}
>
<Typography
variant="h6"
sx={{
color: theme.palette.primary.dark,
fontWeight: "bold",
}}
>
{title}
</Typography>
<Box sx={{ width: "100%", position: "relative", aspectRatio: "16/9" }}>
<Image
src={image}
alt="Image"
fill={true}
loading="lazy"
style={{
objectFit: "contain",
marginBottom: "16px",
borderRadius: "12px",
border: `1px solid ${theme.palette.divider}`,
}}
/>
</Box>
</Stack>
);
};
export default RecognizePictureContent;

40
src/components/dashboard/roadSafety/operator/RowActions/RecognizePictureDialog/index.jsx Normal file
View File

@@ -0,0 +1,40 @@
import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
import { Button, Dialog, DialogActions, DialogContent, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import RecognizePictureContent from "./RecognizePictureContent";
const RecognizePictureDialog = ({ image }) => {
const [openImageDialog, setOpenImageDialog] = useState(false);
return (
<>
<Tooltip title="تصویر بازدید">
<IconButton color="primary" onClick={() => setOpenImageDialog(true)}>
<PhotoLibraryIcon />
</IconButton>
</Tooltip>
<Dialog
fullWidth
open={openImageDialog}
onClose={() => setOpenImageDialog(false)}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
maxWidth={"sm"}
scroll="paper"
>
<DialogContent>
<RecognizePictureContent image={image} title={"تصویر بازدید"} />
</DialogContent>
<DialogActions>
<Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">
بستن
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default RecognizePictureDialog;

15
src/components/dashboard/roadSafety/operator/RowActions/index.jsx Normal file
View File

@@ -0,0 +1,15 @@
import { Box } from "@mui/material";
import DeleteForm from "./DeleteDialog";
import StepTwo from "../Form/StepTwo";
import StepThree from "../Form/StepThree";
const RowActions = ({ row, mutate }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
{row.original?.step === 1 && <StepTwo mutate={mutate} rowId={row.getValue("id")} />}
{row.original?.step === 2 && <StepThree mutate={mutate} rowId={row.getValue("id")} />}
<DeleteForm rowId={row.getValue("id")} mutate={mutate} />
</Box>
);
};
export default RowActions;

16
src/components/dashboard/roadSafety/operator/Toolbar.jsx Normal file
View File

@@ -0,0 +1,16 @@
import { Stack } from "@mui/material";
import StepOne from "./Form/StepOne";
import PrintExcel from "./ExcelPrint";
import { usePermissions } from "@/lib/hooks/usePermissions";
const Toolbar = ({ table, filterData, mutate }) => {
const { data: userPermissions } = usePermissions();
const hasCreatePermission = userPermissions?.includes("add-safety-and-privacy");
return (
<Stack direction={"row"} spacing={2}>
<PrintExcel filterData={filterData} table={table} />
{hasCreatePermission && <StepOne mutate={mutate} />}
</Stack>
);
};
export default Toolbar;

14
src/components/dashboard/roadSafety/operator/index.jsx Normal file
View File

@@ -0,0 +1,14 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import { Stack } from "@mui/material";
import OperatorList from "./OperatorList";
const OperatorPage = () => {
return (
<Stack spacing={1}>
<PageTitle title={"عملیات"} />
<OperatorList />
</Stack>
);
};
export default OperatorPage;

2
src/core/utils/pageMenu.js
View File

@@ -312,7 +312,7 @@ export const pageMenu = [
id: "safetyAndPrivacyManagmentOparationCartable",
label: "کارتابل",
type: "page",
route: process.env.NEXT_PUBLIC_API_URL + "/v2/safety_and_privacy/operator/cartable",
route: "/dashboard/road-safety/operator",
permissions: [
"show-safety-and-privacy-operator-cartable",
"show-safety-and-privacy-operator-cartable-province",

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

@@ -129,5 +129,13 @@ export const EXPORT_FAST_REACT_OPERATOR_LIST = api + "/api/v3/road_observations/
export const EXPORT_FAST_REACT_COMPLAINT_LIST = api + "/api/v3/road_observations/complaints_report";
// road safety
export const GET_SAFETY_AND_PRIVACY = api + "/api/v3/safety_and_privacy";
export const DELETE_SAFETY_AND_PRIVACY = api + "/api/v3/safety_and_privacy";
export const DESERIALIZE_JUDICIARY_DOCUMENT = api + "/api/v3/safety_and_privacy/deserialize";
export const GET_SAFETY_AND_PRIVACY_ITEM = api + "/api/v3/safety_and_privacy/sub_items";
export const FIRST_STEP_STORE = api + "/api/v3/safety_and_privacy/first_step_store";
export const SECOND_STEP_STORE = api + "/api/v3/safety_and_privacy/second_step_store";
export const THIRD_STEP_STORE = api + "/api/v3/safety_and_privacy/third_step_store";
export const EXPORT_OPERATOR_ROAD_SAFETY = api + "/api/v3/safety_and_privacy/excel_report";
export const GET_ROAD_SAFETY_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/safety_and_privacy_report/country_activity";
export const GET_ROAD_SAFETY_CITY_ACTIVITY_REPORT = api + "/api/v3/safety_and_privacy_report/province_activity";

30
src/lib/hooks/useSafetyAndPrivacyGetItems.js Normal file
View File

@@ -0,0 +1,30 @@
import { useEffect, useState } from "react";
import useRequest from "@/lib/hooks/useRequest";
import { GET_SAFETY_AND_PRIVACY_ITEM } from "@/core/utils/routes";
const useSafetyAndPrivacyGetItems = () => {
const requestServer = useRequest();
const [itemsList, setItemsList] = useState([]);
const [loadingItemsList, setLoadingItemsList] = useState(true);
const [errorItemsList, setErrorItemsList] = useState(null);
useEffect(() => {
const fetchItems = async () => {
try {
const response = await requestServer(`${GET_SAFETY_AND_PRIVACY_ITEM}`);
setItemsList(response.data.data);
setLoadingItemsList(false);
setErrorItemsList(false);
} catch (e) {
setErrorItemsList(e);
setLoadingItemsList(false);
}
};
fetchItems();
}, []);
return { itemsList, loadingItemsList, errorItemsList };
};
export default useSafetyAndPrivacyGetItems;