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

Merge branch 'feature/toll_house' into 'develop'

Browse Source 
Feature/toll house

See merge request witel-front-end/rms!93
This commit is contained in:
AmirHossein Mahmoodi
2025-04-14 11:40:54 +00:00
parent 7f5694c6ee feb2d5193b
commit c1f811b286
28 changed files with 2014 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/(withAuth)/infrastructure/layout.js Normal file
View File

@@ -0,0 +1,13 @@
import HeaderWithLogo from "@/components/layouts/dashboard/headerWithLogo";
import HeaderWithSidebar from "@/components/layouts/dashboard/headerWithSidebar";
import { Stack } from "@mui/material";
const Layout = ({ children }) => {
return (
<Stack sx={{ width: "100%", height: "100%" }}>
<HeaderWithLogo />
<HeaderWithSidebar>{children}</HeaderWithSidebar>
</Stack>
);
};
export default Layout;

7
src/app/(withAuth)/infrastructure/toll-house/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;

16
src/app/(withAuth)/infrastructure/toll-house/page.js Normal file
View File

@@ -0,0 +1,16 @@
import WithPermission from "@/core/middlewares/withPermission";
import TollHousePage from "@/components/infrastructure/tollHouse";
export const metadata = {
title: "فهرست راهدارخانه ها",
};
const Page = () => {
return (
<WithPermission permission_name={["show-tollhouse", "show-tollhouse-province"]}>
<TollHousePage />
</WithPermission>
);
};
export default Page;

33
src/components/infrastructure/tollHouse/Form/CreateTollHouse/CityContent.jsx Normal file
View File

@@ -0,0 +1,33 @@
import SelectBox from "@/core/components/SelectBox";
import { useEffect, useState } from "react";
import useCities from "@/lib/hooks/useCities";
const CityContent = ({ provinceID, field, fieldState: { error } }) => {
const { cityList, loadingCityList, errorCityList } = useCities(provinceID);
const [prevDependency, setPrevDependency] = useState(provinceID);
useEffect(() => {
if (prevDependency === provinceID) return;
field.onChange(null);
setPrevDependency(provinceID);
}, [provinceID]);
return (
<SelectBox
value={
!provinceID ? "dependency" : errorCityList ? "error" : loadingCityList ? "loading" : field.value || ""
}
label={"شهرستان"}
selectors={cityList}
schema={{ name: "name_fa", value: "id" }}
error={error}
onChange={field.onChange}
helperText={error?.message}
isLoading={loadingCityList}
errorEcured={errorCityList}
isDependency={!provinceID}
dependencyLabel={"ابتدا استان را انتخاب کنید"}
/>
);
};
export default CityContent;

14
src/components/infrastructure/tollHouse/Form/CreateTollHouse/CityController.jsx Normal file
View File

@@ -0,0 +1,14 @@
import { Controller, useWatch } from "react-hook-form";
import CityContent from "./CityContent";
const CityController = ({ control }) => {
const provinceID = useWatch({ control, name: "province_id" });
return (
<Controller
name="city_id"
control={control}
render={(props) => <CityContent provinceID={provinceID} {...props} />}
/>
);
};
export default CityController;

192
src/components/infrastructure/tollHouse/Form/CreateTollHouse/CreateTollHouseContent.jsx Normal file
View File

@@ -0,0 +1,192 @@
import StyledForm from "@/core/components/StyledForm";
import { Box, Button, DialogActions, DialogContent, Tab, Tabs } from "@mui/material";
import ExitToAppIcon from "@mui/icons-material/ExitToApp";
import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
import BeenhereIcon from "@mui/icons-material/Beenhere";
import OtherHousesIcon from "@mui/icons-material/OtherHouses";
import LocalShippingIcon from "@mui/icons-material/LocalShipping";
import EditLocationAltIcon from "@mui/icons-material/EditLocationAlt";
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 TollHouseInfo from "./TollHouseInfo";
import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
import MachineInfo from "@/components/infrastructure/tollHouse/Form/CreateTollHouse/MachineInfo";
import TollHouseLocation from "@/components/infrastructure/tollHouse/Form/CreateTollHouse/TollHouseLocation";
function TabPanel(props) {
const { children, value, index } = props;
return (
<div role="tabpanel" hidden={value !== index}>
{value === index && <Box>{children}</Box>}
</div>
);
}
const validationSchema = object({
name: string().required("وارد کردن نام راهدارخانه الزامیست!"),
status: string().required("وارد کردن وضعیت الزامیست!"),
type: string().required("وارد کردن نوع الزامیست!"),
phone: string().required("وارد کردن تلفن راهدارخانه الزامیست!"),
team_num: string().required("وارد کردن تعداد اکیپ الزامیست!"),
staff_num: string().required("وارد کردن تعداد پرسنل الزامیست!"),
responsible_name: string().required("وارد کردن نام مسئول الزامیست!"),
responsible_mobile: string()
.required("وارد کردن تلفن مسئول الزامیست!")
.matches(/^09\d{9}$/, "شماره تلفن مسئول باید با ۰۹ شروع شده و ۱۱ رقم باشد!"),
successor_name: string().required("وارد کردن نام جانشین الزامیست!"),
successor_mobile: string()
.required("وارد کردن تلفن جانشین الزامیست!")
.matches(/^09\d{9}$/, "شماره تلفن جانشین باید با ۰۹ شروع شده و ۱۱ رقم باشد!"),
province_id: number().required("وارد کردن استان الزامیست!"),
city_id: number().required("وارد کردن شهرستان الزامیست!"),
machines_light: string().required("وارد کردن ماشین آلات سبک الزامیست!"),
machines_sheavy: string().required("وارد کردن ماشین آلات نیمه سنگین الزامیست!"),
machines_heavy: string().required("وارد کردن ماشین آلات سنگین الزامیست!"),
overview_files_1: mixed().nullable().required("لطفا نمای کلی از راهداری را بارگذاری کنید!"),
overview_files_2: mixed().nullable().required("لطفا آشیانه ماشین آلات را بارگذاری کنید!"),
overview_files_3: mixed().nullable().required("لطفا انباری شن و ماسه را بارگذاری کنید!"),
overview_files_4: mixed().nullable().required("لطفا محیط کاری را بارگذاری کنید!"),
overview_files_5: mixed().nullable().required("لطفا سایر تصاویر را بارگذاری کنید!"),
start_point: mixed()
.test("start-point-required", "لطفاً محل پروژه را مشخص کنید!", function (value) {
return !!value;
})
.required("لطفاً محل پروژه را مشخص کنید!"),
});
const CreateTollHouseContent = ({ setOpen, SubmitCreateTollHouse, defaultValues }) => {
const [tabState, setTabState] = useState(0);
const handleClose = () => {
setOpen(false);
};
const handleChangeTab = (event, newValue) => {
setTabState(newValue);
};
const handleNext = async () => {
let fieldsToValidate = [];
if (tabState === 0) {
fieldsToValidate = [
"name",
"province_id",
"city_id",
"status",
"type",
"phone",
"team_num",
"staff_num",
"responsible_name",
"responsible_mobile",
"successor_name",
"successor_mobile",
];
} else if (tabState === 1) {
fieldsToValidate = [
"machines_light",
"machines_sheavy",
"machines_heavy",
"overview_files_1",
"overview_files_2",
"overview_files_3",
"overview_files_4",
"overview_files_5",
];
} else if (tabState === 2) {
fieldsToValidate = ["start_point"];
}
const isValid = await trigger(fieldsToValidate);
if (isValid) {
setTabState(tabState + 1);
}
};
const handlePrev = () => {
if (tabState === 0) {
handleClose();
} else {
setTabState(tabState - 1);
}
};
const {
control,
handleSubmit,
trigger,
setValue,
formState: { isSubmitting, errors },
} = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "onBlur",
});
const onSubmitBase = async (data) => {
await SubmitCreateTollHouse(data);
};
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={<OtherHousesIcon />} label="اطلاعات راهدارخانه" />
<Tab disabled={tabState === 0} icon={<LocalShippingIcon />} label="ماشین آلات" />
<Tab disabled={tabState === 0 || tabState === 1} icon={<EditLocationAltIcon />} label="موقعیت" />
</Tabs>
<DialogContent dividers sx={{ overflowY: "auto", maxHeight: "70vh" }}>
<Box sx={{ flex: 1 }}>
<TabPanel value={tabState} index={0}>
<TollHouseInfo control={control} />
</TabPanel>
<TabPanel value={tabState} index={1}>
<MachineInfo control={control} />
</TabPanel>
<TabPanel value={tabState} index={2}>
<TollHouseLocation control={control} setValue={setValue} errors={errors} />
</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 !== 2 && (
<Button
onClick={handleNext}
key={"handleNext"}
variant="contained"
size="large"
endIcon={<KeyboardDoubleArrowLeftIcon />}
>
مرحله بعد
</Button>
)}
{tabState === 2 && (
<Button
variant="contained"
size="large"
disabled={isSubmitting}
type={"submit"}
endIcon={<BeenhereIcon />}
>
{isSubmitting ? "در حال ثبت راهدارخانه" : "ثبت راهدارخانه"}
</Button>
)}
</DialogActions>
</StyledForm>
);
};
export default CreateTollHouseContent;

77
src/components/infrastructure/tollHouse/Form/CreateTollHouse/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;

42
src/components/infrastructure/tollHouse/Form/CreateTollHouse/LogesticController.jsx Normal file
View File

@@ -0,0 +1,42 @@
import { Controller, useWatch } from "react-hook-form";
import SelectBox from "@/core/components/SelectBox";
import useProvinces from "@/lib/hooks/useProvince";
import { Grid } from "@mui/material";
import CityController from "./CityController";
const LogesticController = ({ control }) => {
const { provinces, errorProvinces, loadingProvinces } = useProvinces();
const isProvince = useWatch({ control, name: "is_province" });
return (
<Grid container spacing={2}>
{!isProvince ? (
<Grid item xs={12} md={6}>
<Controller
name="province_id"
control={control}
render={({ field, fieldState: { error } }) => {
return (
<SelectBox
value={errorProvinces ? "error" : loadingProvinces ? "loading" : field.value || ""}
label="استان"
selectors={provinces}
schema={{ name: "name_fa", value: "id" }}
error={error}
disabled={isProvince}
onChange={field.onChange}
helperText={error?.message}
isLoading={loadingProvinces}
errorEcured={errorProvinces}
/>
);
}}
/>
</Grid>
) : null}
<Grid item xs={12} md={isProvince ? 12 : 6}>
<CityController control={control} />
</Grid>
</Grid>
);
};
export default LogesticController;

199
src/components/infrastructure/tollHouse/Form/CreateTollHouse/MachineInfo.jsx Normal file
View File

@@ -0,0 +1,199 @@
import { Grid, Stack, TextField } from "@mui/material";
import { Controller } from "react-hook-form";
import PersianTextField from "@/core/components/PersianTextField";
import ImageUpload from "@/components/dashboard/damages/operator/Actions/create/Forms/ImageUpload";
const MachineInfo = ({ control }) => {
return (
<Stack spacing={2}>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={4}>
<Controller
name="machines_light"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
fullWidth
size="small"
label="ماشین آلات سبک"
value={value}
placeholder="ماشین آلات سبک را وارد کنید"
error={!!error}
helperText={error ? error.message : null}
variant="outlined"
InputLabelProps={{ shrink: true }}
type={"tel"}
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
onChange={(event) => {
const inputValue = event.target.value;
if (isNaN(Number(inputValue))) {
return;
}
onChange(inputValue);
}}
/>
)}
/>
</Grid>
<Grid item xs={12} md={4}>
<Controller
name="machines_sheavy"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
fullWidth
size="small"
label="ماشین آلات نیمه سنگین"
value={value}
placeholder="ماشین آلات نیمه سنگین را وارد کنید"
error={!!error}
helperText={error ? error.message : null}
variant="outlined"
InputLabelProps={{ shrink: true }}
type={"tel"}
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
onChange={(event) => {
const inputValue = event.target.value;
if (isNaN(Number(inputValue))) {
return;
}
onChange(inputValue);
}}
/>
)}
/>
</Grid>
<Grid item xs={12} md={4}>
<Controller
name="machines_heavy"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
fullWidth
size="small"
label="ماشین آلات سنگین"
value={value}
placeholder="ماشین آلات سنگین را وارد کنید"
error={!!error}
helperText={error ? error.message : null}
variant="outlined"
InputLabelProps={{ shrink: true }}
type={"tel"}
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
onChange={(event) => {
const inputValue = event.target.value;
if (isNaN(Number(inputValue))) {
return;
}
onChange(inputValue);
}}
/>
)}
/>
</Grid>
</Grid>
</Stack>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Controller
name="overview_files_1"
control={control}
render={({ field, fieldState: { error } }) => (
<ImageUpload
name={field.name}
value={field.value}
error={error}
onChange={field.onChange}
title={"نمای کلی از راهداری"}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<Controller
name="overview_files_2"
control={control}
render={({ field, fieldState: { error } }) => (
<ImageUpload
name={field.name}
value={field.value}
error={error}
onChange={field.onChange}
title={"آشیانه ماشین آلات"}
/>
)}
/>
</Grid>
</Grid>
</Stack>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Controller
name="overview_files_3"
control={control}
render={({ field, fieldState: { error } }) => (
<ImageUpload
name={field.name}
value={field.value}
error={error}
onChange={field.onChange}
title={"انباری شن و ماسه"}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<Controller
name="overview_files_4"
control={control}
render={({ field, fieldState: { error } }) => (
<ImageUpload
name={field.name}
value={field.value}
error={error}
onChange={field.onChange}
title={"محیط کاری"}
/>
)}
/>
</Grid>
</Grid>
</Stack>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={12}>
<Controller
name="overview_files_5"
control={control}
render={({ field, fieldState: { error } }) => (
<ImageUpload
name={field.name}
value={field.value}
error={error}
onChange={field.onChange}
title={"سایر تصاویر"}
/>
)}
/>
</Grid>
</Grid>
</Stack>
</Stack>
);
};
export default MachineInfo;

311
src/components/infrastructure/tollHouse/Form/CreateTollHouse/TollHouseInfo.jsx Normal file
View File

@@ -0,0 +1,311 @@
import { Grid, Stack, TextField } from "@mui/material";
import { Controller } from "react-hook-form";
import SelectBox from "@/core/components/SelectBox";
import useProvince from "@/lib/hooks/useProvince";
import PersianTextField from "@/core/components/PersianTextField";
import CityController from "./CityController";
import LogesticController from "./LogesticController";
const TollHouseInfo = ({ control }) => {
const { provinces, loadingProvinces, errorProvinces } = useProvince();
return (
<Stack spacing={2}>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Controller
name="name"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<PersianTextField
value={value}
variant="outlined"
name="name"
onChange={onChange}
label="نام راهدارخانه"
placeholder="نام راهدارخانه را وارد کنید"
fullWidth
size="small"
error={error}
helperText={error?.message}
InputLabelProps={{ shrink: true }}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<Controller
name="phone"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
fullWidth
size="small"
label="تلفن راهدارخانه"
value={value}
placeholder="تلفن راهدارخانه را وارد کنید"
error={!!error}
helperText={error ? error.message : null}
variant="outlined"
InputLabelProps={{ shrink: true }}
type={"tel"}
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
onChange={(event) => {
const inputValue = event.target.value;
if (isNaN(Number(inputValue))) {
return;
}
onChange(inputValue);
}}
/>
)}
/>
</Grid>
</Grid>
</Stack>
<Stack>
<LogesticController control={control} />
</Stack>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Controller
name="status"
control={control}
render={({ field, fieldState: { error } }) => {
return (
<SelectBox
value={field.value}
label="وضعیت"
selectors={[
{ id: 0, name: "فعال" },
{ id: 1, name: "غیر فعال" },
]}
schema={{ name: "name", value: "id" }}
error={error}
onChange={field.onChange}
helperText={error?.message}
isLoading={false}
errorEcured={false}
/>
);
}}
/>
</Grid>
<Grid item xs={12} md={6}>
<Controller
name="type"
control={control}
render={({ field, fieldState: { error } }) => {
return (
<SelectBox
value={field.value}
label="نوع"
selectors={[
{ id: 0, name: "داعمی" },
{ id: 1, name: "موقت" },
{ id: 2, name: "فصلی" },
]}
schema={{ name: "name", value: "id" }}
error={error}
onChange={field.onChange}
helperText={error?.message}
isLoading={false}
errorEcured={false}
/>
);
}}
/>
</Grid>
</Grid>
</Stack>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Controller
name="team_num"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
fullWidth
size="small"
label="تعداد اکیپ"
value={value}
placeholder="تعداد اکیپ را وارد کنید"
error={!!error}
helperText={error ? error.message : null}
variant="outlined"
InputLabelProps={{ shrink: true }}
type={"tel"}
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
onChange={(event) => {
const inputValue = event.target.value;
if (isNaN(Number(inputValue))) {
return;
}
onChange(inputValue);
}}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<Controller
name="staff_num"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
fullWidth
size="small"
label="تعداد پرسنل"
value={value}
placeholder="تعداد پرسنل را وارد کنید"
error={!!error}
helperText={error ? error.message : null}
variant="outlined"
InputLabelProps={{ shrink: true }}
type={"tel"}
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
onChange={(event) => {
const inputValue = event.target.value;
if (isNaN(Number(inputValue))) {
return;
}
onChange(inputValue);
}}
/>
)}
/>
</Grid>
</Grid>
</Stack>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Controller
name="responsible_name"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<PersianTextField
value={value}
variant="outlined"
name="responsible_name"
onChange={onChange}
label="نام مسئول"
placeholder="نام مسئول را وارد کنید"
fullWidth
size="small"
error={error}
helperText={error?.message}
InputLabelProps={{ shrink: true }}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<Controller
name="responsible_mobile"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
fullWidth
size="small"
label="تلفن مسئول"
value={value}
placeholder="تلفن مسئول را وارد کنید"
error={!!error}
helperText={error ? error.message : null}
variant="outlined"
InputLabelProps={{ shrink: true }}
type={"tel"}
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
onChange={(event) => {
const inputValue = event.target.value;
if (isNaN(Number(inputValue))) {
return;
}
onChange(inputValue);
}}
/>
)}
/>
</Grid>
</Grid>
</Stack>
<Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Controller
name="successor_name"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<PersianTextField
value={value}
variant="outlined"
name="responsible_name"
onChange={onChange}
label="نام جانشین"
placeholder="نام جانشین را وارد کنید"
fullWidth
size="small"
error={error}
helperText={error?.message}
InputLabelProps={{ shrink: true }}
/>
)}
/>
</Grid>
<Grid item xs={12} md={6}>
<Controller
name="successor_mobile"
control={control}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
fullWidth
size="small"
label="تلفن جانشین"
value={value}
placeholder="تلفن جانشین را وارد کنید"
error={!!error}
helperText={error ? error.message : null}
variant="outlined"
InputLabelProps={{ shrink: true }}
type={"tel"}
inputProps={{
inputMode: "number",
min: 0,
pattern: "[0-9]*",
}}
onChange={(event) => {
const inputValue = event.target.value;
if (isNaN(Number(inputValue))) {
return;
}
onChange(inputValue);
}}
/>
)}
/>
</Grid>
</Grid>
</Stack>
</Stack>
);
};
export default TollHouseInfo;

20
src/components/infrastructure/tollHouse/Form/CreateTollHouse/TollHouseLocation.jsx Normal file
View File

@@ -0,0 +1,20 @@
import MapInfoOneMarker from "@/core/components/MapInfoOneMarker";
import { Stack } from "@mui/material";
import { useWatch } from "react-hook-form";
const TollHouseLocation = ({ setValue, errors, control }) => {
const StartPoint = useWatch({ control, name: "start_point" });
return (
<>
<Stack sx={{ mt: 2 }}>
<MapInfoOneMarker
setValue={setValue}
StartPoint={StartPoint}
errors={errors}
title={"برای ثبت محل پروژه، لطفاً نقشه را بیشتر زوم کنید."}
/>
</Stack>
</>
);
};
export default TollHouseLocation;

140
src/components/infrastructure/tollHouse/Form/CreateTollHouse/index.jsx Normal file
View File

@@ -0,0 +1,140 @@
import { Button, Dialog, IconButton, useMediaQuery } from "@mui/material";
import { useState } from "react";
import CreateTollHouseContent from "./CreateTollHouseContent";
import { AddCircle } from "@mui/icons-material";
import { useTheme } from "@emotion/react";
import { CREATE_TOLL_HOUSE } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import CloseIcon from "@mui/icons-material/Close";
import { useAuth } from "@/lib/contexts/auth";
import { usePermissions } from "@/lib/hooks/usePermissions";
const CreateTollHouse = ({ mutate }) => {
const requestServer = useRequest({ notificationSuccess: true });
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [open, setOpen] = useState(false);
const { user } = useAuth();
const { data: userPermissions } = usePermissions();
const hasCreateProvincePermission = userPermissions.some((item) => ["add-tollhouse"].includes(item));
const handleOpen = () => {
setOpen(true);
};
const SubmitCreateTollHouse = async (result) => {
const fields = [
"province_id",
"city_id",
"name",
"status",
"type",
"team_num",
"staff_num",
"phone",
"responsible_name",
"responsible_mobile",
"successor_name",
"successor_mobile",
"machines_light",
"machines_sheavy",
"machines_heavy",
"overview_files_1",
"overview_files_2",
"overview_files_3",
"overview_files_4",
"overview_files_5",
];
const formData = new FormData();
fields.forEach((field) => {
if (result[field] !== undefined && result[field] !== null) {
formData.append(field, result[field]);
}
});
formData.append("lat", result.start_point.lat);
formData.append("lng", result.start_point.lng);
await requestServer(`${CREATE_TOLL_HOUSE}`, "post", {
data: formData,
})
.then(() => {
mutate();
setOpen(false);
})
.catch(() => {});
};
const defaultValues = {
name: "",
is_province: !hasCreateProvincePermission,
province_id: !hasCreateProvincePermission ? user.province_id : null,
city_id: null,
status: "",
type: "",
phone: "",
team_num: "",
staff_num: "",
responsible_name: "",
responsible_mobile: "",
successor_name: "",
successor_mobile: "",
machines_light: "",
machines_sheavy: "",
machines_heavy: "",
overview_files_1: null,
overview_files_2: null,
overview_files_3: null,
overview_files_4: null,
overview_files_5: null,
start_point: "",
};
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>
)}
<Dialog
fullWidth
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",
},
}}
maxWidth={"md"}
scroll="paper"
>
<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 && (
<CreateTollHouseContent
setOpen={setOpen}
defaultValues={defaultValues}
SubmitCreateTollHouse={SubmitCreateTollHouse}
/>
)}
</Dialog>
</>
);
};
export default CreateTollHouse;

107
src/components/infrastructure/tollHouse/Form/Edit/EditController.jsx Normal file
View File

@@ -0,0 +1,107 @@
import useRequest from "@/lib/hooks/useRequest";
import { useEffect, useState } from "react";
import { GET_TOLL_HOUSE_DETAILS, UPDATE_TOLL_HOUSE_ITEM } from "@/core/utils/routes";
import DialogLoading from "@/core/components/DialogLoading";
import CreateTollHouseContent from "../CreateTollHouse/CreateTollHouseContent";
import { usePermissions } from "@/lib/hooks/usePermissions";
const EditController = ({ rowId, mutate, setOpenEditDialog }) => {
const { data: userPermissions } = usePermissions();
const hasCreateProvincePermission = userPermissions.some((item) => ["add-receipt"].includes(item));
const requestServer = useRequest();
const [tollHouseItemDetails, setTollHouseItemDetails] = useState(null);
const [tollHouseItemDetailsLoading, setTollHouseItemDetailsLoading] = useState(false);
useEffect(() => {
setTollHouseItemDetailsLoading(true);
requestServer(`${GET_TOLL_HOUSE_DETAILS}/${rowId}`, "get")
.then((response) => {
setTollHouseItemDetails(response.data.data);
setTollHouseItemDetailsLoading(false);
})
.catch((e) => {
setTollHouseItemDetailsLoading(false);
});
}, [rowId]);
const defaultData = {
phone: tollHouseItemDetails?.phone || "",
is_province: !hasCreateProvincePermission,
province_id: tollHouseItemDetails?.province_id || null,
city_id: tollHouseItemDetails?.city_id || null,
start_point: { lat: tollHouseItemDetails?.lat || "", lng: tollHouseItemDetails?.lng || "" },
name: tollHouseItemDetails?.name || "",
status: tollHouseItemDetails?.status || "",
type: tollHouseItemDetails?.type || "",
team_num: tollHouseItemDetails?.team_num || "",
staff_num: tollHouseItemDetails?.staff_num || "",
responsible_name: tollHouseItemDetails?.responsible_name || "",
responsible_mobile: tollHouseItemDetails?.responsible_mobile || "",
successor_name: tollHouseItemDetails?.successor_name || "",
successor_mobile: tollHouseItemDetails?.successor_mobile || "",
machines_light: tollHouseItemDetails?.machines_light || "",
machines_sheavy: tollHouseItemDetails?.machines_sheavy || "",
machines_heavy: tollHouseItemDetails?.machines_heavy || "",
overview_files_1: tollHouseItemDetails?.files[0]?.path || null,
overview_files_2: tollHouseItemDetails?.files[1]?.path || null,
overview_files_3: tollHouseItemDetails?.files[2]?.path || null,
overview_files_4: tollHouseItemDetails?.files[3]?.path || null,
overview_files_5: tollHouseItemDetails?.files[4]?.path || null,
};
const HandleSubmit = async (result) => {
const fields = [
"province_id",
"city_id",
"name",
"status",
"type",
"team_num",
"staff_num",
"phone",
"responsible_name",
"responsible_mobile",
"successor_name",
"successor_mobile",
"machines_light",
"machines_sheavy",
"machines_heavy",
];
const formData = new FormData();
fields.forEach((field) => {
if (result[field] !== undefined && result[field] !== null) {
formData.append(field, result[field]);
}
});
for (let i = 1; i <= 5; i++) {
if (result[`overview_files_${i}`] !== defaultData[`overview_files_${i}`]) {
formData.append(`overview_files_${i}`, result[`overview_files_${i}`]);
}
}
formData.append("lat", result.start_point.lat);
formData.append("lng", result.start_point.lng);
await requestServer(`${UPDATE_TOLL_HOUSE_ITEM}/${rowId}`, "post", {
data: formData,
notificationSuccess: true,
})
.then(() => {
mutate();
setOpenEditDialog(false);
})
.catch(() => {});
};
return (
<>
{tollHouseItemDetailsLoading ? (
<DialogLoading />
) : (
<CreateTollHouseContent
setOpen={setOpenEditDialog}
SubmitCreateTollHouse={HandleSubmit}
defaultValues={defaultData}
/>
)}
</>
);
};
export default EditController;

59
src/components/infrastructure/tollHouse/Form/Edit/index.jsx Normal file
View File

@@ -0,0 +1,59 @@
import { Dialog, IconButton, Tooltip } from "@mui/material";
import { useState } from "react";
import BorderColorIcon from "@mui/icons-material/BorderColor";
import EditController from "./EditController";
import CloseIcon from "@mui/icons-material/Close";
const EditForm = ({ row, mutate, rowId }) => {
const [openEditDialog, setOpenEditDialog] = useState(false);
return (
<>
<Tooltip title="ویرایش اطلاعات" arrow placement="right">
<IconButton
color="primary"
sx={{ textTransform: "unset", alignSelf: "center" }}
onClick={() => {
setOpenEditDialog(true);
}}
>
<BorderColorIcon />
</IconButton>
</Tooltip>
<Dialog
maxWidth="md"
fullWidth
open={openEditDialog}
PaperProps={{
sx: {
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
},
}}
>
<IconButton
aria-label="close"
onClick={() => setOpenEditDialog(false)}
sx={(theme) => ({
position: "absolute",
right: 8,
top: 8,
zIndex: 50,
color: theme.palette.grey[500],
})}
>
<CloseIcon />
</IconButton>
{openEditDialog && (
<EditController
openEditDialog={openEditDialog}
setOpenEditDialog={setOpenEditDialog}
rowId={rowId}
row={row}
mutate={mutate}
/>
)}
</Dialog>
</>
);
};
export default EditForm;

39
src/components/infrastructure/tollHouse/RowActions/DeleteDialog/DeleteContent.jsx Normal file
View File

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

34
src/components/infrastructure/tollHouse/RowActions/DeleteDialog/index.jsx Normal file
View File

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

45
src/components/infrastructure/tollHouse/RowActions/ImageForm/ImageFormContent.jsx Normal file
View File

@@ -0,0 +1,45 @@
import { Box, Stack, Typography, useTheme } from "@mui/material";
import Image from "next/image";
const ImageFormContent = ({ 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}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
loading="lazy"
style={{
objectFit: "contain",
marginBottom: "16px",
borderRadius: "12px",
border: `1px solid ${theme.palette.divider}`,
}}
/>
</Box>
</Stack>
);
};
export default ImageFormContent;

38
src/components/infrastructure/tollHouse/RowActions/ImageForm/ImagesContent.jsx Normal file
View File

@@ -0,0 +1,38 @@
import { useEffect, useState } from "react";
import ImageFormContent from "./ImageFormContent";
import DialogLoading from "@/core/components/DialogLoading";
import useRequest from "@/lib/hooks/useRequest";
import { GET_TOLL_HOUSE_IMAGES } from "@/core/utils/routes";
import { Typography } from "@mui/material";
const ImagesContent = ({ rowId }) => {
const requestServer = useRequest();
const [tollHouseImages, setTollHouseImages] = useState(null);
const [tollHouseImagesLoading, setTollHouseImagesLoading] = useState(false);
useEffect(() => {
setTollHouseImagesLoading(true);
requestServer(`${GET_TOLL_HOUSE_IMAGES}/${rowId}`, "get")
.then((response) => {
setTollHouseImages(response.data.data);
setTollHouseImagesLoading(false);
})
.catch((e) => {
setTollHouseImagesLoading(false);
});
}, [rowId]);
return (
<>
{tollHouseImagesLoading ? (
<DialogLoading />
) : tollHouseImages ? (
tollHouseImages.map((image, index) => {
return <ImageFormContent key={index} image={image.path} />;
})
) : (
<Typography textAlign={"center"}>تصویری در سامانه یافت نشد</Typography>
)}
</>
);
};
export default ImagesContent;

43
src/components/infrastructure/tollHouse/RowActions/ImageForm/index.jsx Normal file
View File

@@ -0,0 +1,43 @@
import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
import { useEffect, useState } from "react";
import ImagesContent from "./ImagesContent";
import useRequest from "@/lib/hooks/useRequest";
import { GET_TOLL_HOUSE_IMAGES } from "@/core/utils/routes";
import DialogLoading from "@/core/components/DialogLoading";
const ImageDialog = ({ rowId }) => {
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"
>
<DialogTitle sx={{ fontSize: "large" }}>تصاویر</DialogTitle>
<DialogContent>{openImageDialog && <ImagesContent rowId={rowId} />}</DialogContent>
<DialogActions>
<Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">
بستن
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default ImageDialog;

35
src/components/infrastructure/tollHouse/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;

38
src/components/infrastructure/tollHouse/RowActions/LocationForm/index.jsx Normal file
View File

@@ -0,0 +1,38 @@
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>
<LocationFormContent
start_lat={start_lat}
start_lng={start_lng}
end_lat={end_lat}
end_lng={end_lng}
setOpenLocationDialog={setOpenLocationDialog}
/>
</Dialog>
</>
);
};
export default LocationForm;

21
src/components/infrastructure/tollHouse/RowActions/index.jsx Normal file
View File

@@ -0,0 +1,21 @@
import { Box } from "@mui/material";
import EditForm from "../Form/Edit";
import DeleteDialog from "./DeleteDialog";
import { usePermissions } from "@/lib/hooks/usePermissions";
const RowActions = ({ row, mutate }) => {
const { data: userPermissions } = usePermissions();
const hasEditPermission = userPermissions.some((item) =>
["edit-tollhouse", "edit-tollhouse-province"].includes(item)
);
const hasDeletePermission = userPermissions.some((item) =>
["delete-tollhouse", "delete-tollhouse-province"].includes(item)
);
return (
<Box sx={{ display: "flex", gap: 1 }}>
{hasEditPermission && <EditForm row={row} mutate={mutate} rowId={row.getValue("id")} />}
{hasDeletePermission && <DeleteDialog mutate={mutate} rowId={row.getValue("id")} />}
</Box>
);
};
export default RowActions;

412
src/components/infrastructure/tollHouse/TollHouseList.jsx Normal file
View File

@@ -0,0 +1,412 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { Box, Stack, Typography } from "@mui/material";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import Toolbar from "./Toolbar";
import { GET_TOLL_HOUSE_LIST } from "@/core/utils/routes";
import moment from "jalali-moment";
import RowActions from "./RowActions";
import useProvinces from "@/lib/hooks/useProvince";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import useEdaratLists from "@/lib/hooks/useEdaratLists";
import { usePermissions } from "@/lib/hooks/usePermissions";
import LocationForm from "./RowActions/LocationForm";
import ImageDialog from "./RowActions/ImageForm";
const statusOptions = [
{ value: "", label: "همه وضعیت ها" },
{ value: 0, label: "غیرفعال" },
{ value: 1, label: "فعال" },
];
const typeOptions = [
{ value: "", label: "همه نوع ها" },
{ value: 0, label: "فصلی" },
{ value: 1, label: "داعمی" },
{ value: 2, label: "موقت" },
];
const TollHouseList = () => {
const { data: userPermissions } = usePermissions();
const hasProvincePermission = userPermissions.some((item) => ["add-tollhouse"].includes(item));
const columns = useMemo(() => {
return [
{
accessorKey: "id",
header: "کد یکتا", // Unique Code
id: "id",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
header: "اطلاعات راهدارخانه",
id: "tollHouseInfo",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
columns: [
{
accessorKey: "name",
header: "نام راهدارخانه",
id: "name",
enableColumnFilter: true,
datatype: "text",
filterMode: "equals",
sortDescFirst: false,
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "province_id",
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_name}</>,
},
{
accessorKey: "city_id",
header: "شهرستان", // Office
id: "city_id",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
dependencyId: "province_id",
grow: false,
size: 120,
ColumnSelectComponent: (props) => {
const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
props.dependencyFieldValue.value
);
const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
const getColumnSelectOptions = useMemo(() => {
if (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 (prevDependency === props.dependencyFieldValue?.value) return;
props.handleChange({ ...props.filterParameters, value: "" });
setPrevDependency(props.dependencyFieldValue?.value);
}, [props.dependencyFieldValue?.value]);
return (
<CustomSelectByDependency
{...props}
value={
props.dependencyFieldValue?.value === ""
? "empty"
: loadingEdaratList
? "loading"
: props.filterParameters.value
}
columnSelectOption={getColumnSelectOptions}
/>
);
},
Cell: ({ row }) => <>{row.original.city_name}</>,
},
{
accessorKey: "status",
header: "وضعیت",
id: "status",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
grow: false,
size: 100,
columnSelectOption: () => {
return statusOptions.map((status) => ({
value: status.value,
label: status.label,
}));
},
Cell: ({ row }) => {
const status = statusOptions.find((option) => option.value == row.original.status);
return <Typography variant="body2">{status?.label || ""}</Typography>;
},
},
{
accessorKey: "type",
header: "نوع",
id: "type",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
grow: false,
size: 100,
columnSelectOption: () => {
return typeOptions.map((type) => ({
value: type.value,
label: type.label,
}));
},
Cell: ({ row }) => {
return <Typography variant={"body2"}>{row.original.type_fa}</Typography>;
},
},
{
accessorKey: "phone",
header: "تلفن راهدارخانه",
id: "phone",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 120,
},
{
accessorKey: "team_num",
header: "تعداد اکیپ",
id: "team_num",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 120,
},
{
accessorKey: "staff_num",
header: "تعداد پرسنل",
id: "staff_num",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 120,
},
{
accessorKey: "responsible_name",
header: "مسئول",
id: "responsible_name",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 120,
},
{
accessorKey: "responsible_mobile",
header: "شماره مسئول",
id: "responsible_mobile",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 120,
},
{
accessorKey: "successor_name",
header: "جانشین",
id: "successor_name",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 120,
},
{
accessorKey: "successor_mobile",
header: "شماره جانشین",
id: "successor_mobile",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 120,
},
],
},
{
header: "ماشین آلات",
id: "machines",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
columns: [
{
accessorKey: "machines_light",
header: "ماشین آلات سبک",
id: "machines_light",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "machines_sheavy",
header: "ماشین آلات نیمه سنگین",
id: "machines_sheavy",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
accessorKey: "machines_heavy",
header: "ماشین آلات سنگین",
id: "machines_heavy",
enableColumnFilter: false,
enableSorting: true,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
},
{
header: "تصاویر",
id: "images",
enableColumnFilter: false,
enableSorting: false,
datatype: "array",
grow: false,
size: 100,
muiTableBodyCellProps: {
sx: {
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue, row }) => {
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<ImageDialog rowId={row.getValue("id")} />
</Stack>
);
},
},
],
},
{
header: "موقعیت", // Location
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: ({ renderedCellValue, row }) => {
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<LocationForm start_lat={row.original.lat} start_lng={row.original.lng} />
</Stack>
);
},
},
{
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,
},
];
}, []);
return (
<>
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
need_filter={true}
columns={columns}
table_url={GET_TOLL_HOUSE_LIST}
page_name={"tollHouse"}
table_name={"tollHouseList"}
sorting={[{ id: "id", desc: true }]}
TableToolbar={Toolbar}
enableRowActions
positionActionsColumn={"last"}
RowActions={RowActions}
/>
</Box>
</>
);
};
export default TollHouseList;

10
src/components/infrastructure/tollHouse/Toolbar.jsx Normal file
View File

@@ -0,0 +1,10 @@
import { Box } from "@mui/material";
import CreateTollHouse from "./Form/CreateTollHouse";
import { usePermissions } from "@/lib/hooks/usePermissions";
const Toolbar = ({ table, filterData, mutate }) => {
const { data: userPermissions } = usePermissions();
const hasAddPermission = userPermissions.some((item) => ["add-tollhouse", "add-tollhouse-province"].includes(item));
return <Box sx={{ display: "flex", gap: 1 }}>{hasAddPermission && <CreateTollHouse mutate={mutate} />}</Box>;
};
export default Toolbar;

14
src/components/infrastructure/tollHouse/index.jsx Normal file
View File

@@ -0,0 +1,14 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import { Stack } from "@mui/material";
import TollHouseList from "./TollHouseList";
const TollHousePage = () => {
return (
<Stack spacing={1}>
<PageTitle title={"فهرست راهدارخانه ها"} />
<TollHouseList />
</Stack>
);
};
export default TollHousePage;

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

@@ -37,7 +37,7 @@ export const headerMenu = [
},
{
title: "راهدارخانه ها",
href: api + "/v2/rahdari_points",
href: "/infrastructure/toll-house",
},
],
[

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

@@ -9,7 +9,7 @@ export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission";
export const GET_SIDEBAR_BADGE_ROUTE = api + "/api/v3/notifications";
export const REFER_ADMIN_PROVINCE = "/v3/api/fake-submit";
export const REFER_ADMIN_CITY = "/v3/api/fake-submit";
export const GET_CITY_LISTS = "/v3/api/fake-cities";
export const GET_CITY_LISTS = api + "/public/contents/provinces";
export const GET_PROVINCE_LISTS = api + "/public/contents/provinces";
export const GET_PREV_STATE_OPINION = "/v3/api/fake-prev-state-opinion";
export const SUBMIT_ROAD_SAFETY_FORM = "/v3/api/fake-submit";
@@ -154,3 +154,11 @@ export const GET_USER_ACTIVITIES_LIST = api + "/api/v3/log_list";
export const CREATE_USER_ACTIVITY = api + "/api/v3/log_list";
export const UPDATE_USER_ACTIVITY = api + "/api/v3/log_list";
export const DELETE_USER_ACTIVITIES = api + "/api/v3/log_list";
// toll-house
export const GET_TOLL_HOUSE_LIST = api + "/api/v3/road_maintenance_station";
export const CREATE_TOLL_HOUSE = api + "/api/v3/road_maintenance_station";
export const GET_TOLL_HOUSE_DETAILS = api + "/api/v3/road_maintenance_station";
export const DELETE_TOLL_HOUSE_ITEM = api + "/api/v3/road_maintenance_station";
export const UPDATE_TOLL_HOUSE_ITEM = api + "/api/v3/road_maintenance_station";
export const GET_TOLL_HOUSE_IMAGES = api + "/api/v3/road_maintenance_station/images";

61
src/lib/hooks/useCities.js
View File

@@ -1,30 +1,59 @@
import { useState, useEffect } from "react";
import { useEffect, useReducer } from "react";
import { GET_CITY_LISTS } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
const ACTIONS = {
LOADING: "loading",
SUCCESS: "success",
ERROR: "error",
RESET: "reset",
};
const useCities = () => {
const initialState = {
data: [],
loading: true,
error: null,
};
function reducer(state, action) {
switch (action.type) {
case ACTIONS.LOADING:
return { ...state, loading: true, error: null };
case ACTIONS.SUCCESS:
return { ...state, loading: false, data: action.payload };
case ACTIONS.ERROR:
return { ...state, loading: false, error: action.payload };
case ACTIONS.RESET:
return { ...initialState, loading: false };
default:
return state;
}
}
const useCities = (id) => {
const requestServer = useRequest();
const [cities, setCities] = useState([]);
const [loadingCities, setLoadingCities] = useState(true);
const [errorCities, setErrorCities] = useState(null);
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
const fetchCities = async () => {
if (!id) {
dispatch({ type: ACTIONS.RESET });
return;
}
const fetchCityLists = async () => {
dispatch({ type: ACTIONS.LOADING });
try {
const response = await requestServer(`${GET_CITY_LISTS}`);
setCities(response.data.data);
setLoadingCities(false);
} catch (e) {
console.error("Error fetching cities:", e);
setErrorCities(e);
setLoadingCities(false);
const response = await requestServer(`${GET_CITY_LISTS}/${id}`);
dispatch({ type: ACTIONS.SUCCESS, payload: response.data.data });
} catch (error) {
dispatch({ type: ACTIONS.ERROR, payload: error });
}
};
fetchCities();
}, []);
fetchCityLists();
}, [id]);
return { cities, loadingCities, errorCities };
return {
cityList: state.data,
loadingCityList: state.loading,
errorCityList: state.error,
};
};
export default useCities;