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

Feature/reports road items

Browse Source
This commit is contained in:
Amin Ghasempoor
2025-01-19 09:37:25 +00:00
committed by AmirHossein Mahmoodi
parent 897a3b3988
commit e2dacdf448
81 changed files with 2722 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/dashboard/roadItems/operator/Actions/Create/Forms/CreateFormContent.jsx
View File

@@ -14,6 +14,7 @@ import BeenhereIcon from "@mui/icons-material/Beenhere";
import GetItemsForm from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemsForm";
import GetSubItemsForm from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/GetSubItemsForm";
import GetItemInfo from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemInfo";
import { format } from "date-fns";
function TabPanel(props) {
const { children, value, index } = props;
@@ -28,7 +29,7 @@ const validationSchema = object({
item_id: number().required("نوع آیتم را مشخص کنید!"),
sub_item_id: number().required("موضوع مشاهده شده را مشخص کنید!"),
amount: string().required("وارد کردن مقدار الزامیست!"),
cmms_machines: array().required("وارد کردن کد خودرو الزامیست!"),
cmms_machines: array().required("وارد کردن کد خودرو الزامیست!").min(1, "حداقل یک کد خودرو باید وارد شود!"),
rahdaran_id: array().required("وارد کردن کد راهداران الزامیست!").min(1, "حداقل یک کد راهدار باید وارد شود!"), // بررسی حداقل یک آیتم,
activity_time: string().test("activity-time-conditional", "لطفا زمان فعالیت را انتخاب کنید!", function (value) {
const { is_gasht } = this.options.context; // دسترسی به context
@@ -184,6 +185,8 @@ const CreateFormContent = ({ setOpen, onSubmit, is_gasht = false }) => {
});
delete result.cmms_machines;
result[`activity_time`] = format(new Date(result.activity_time), "HH:mm");
await onSubmit({
result,
data: {
@@ -194,7 +197,6 @@ const CreateFormContent = ({ setOpen, onSubmit, is_gasht = false }) => {
},
});
};
console.log(errors);
return (
<StyledForm onSubmit={handleSubmit(onSubmitBase)} id="road_items">

9
src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetItemInfo.jsx
View File

@@ -12,7 +12,7 @@ import NumberField from "@/core/components/NumberField";
const GetItemInfo = ({ register, itemsList, subItemsList, control, setValue, errors, watch, getValues, is_gasht }) => {
return (
<Stack spacing={2}>
<Stack spacing={3}>
<Stack>
<PreviousStatesInfo itemsList={itemsList} subItemsList={subItemsList} />
</Stack>
@@ -25,6 +25,7 @@ const GetItemInfo = ({ register, itemsList, subItemsList, control, setValue, err
type="text"
size={"small"}
unit={subItemsList.unit}
placeholder={`مقدار را وارد کنید`}
inputProps={{
inputMode: "number",
min: 0,
@@ -86,7 +87,8 @@ const GetItemInfo = ({ register, itemsList, subItemsList, control, setValue, err
name="activity_date"
error={errors.activity_date ? errors.activity_date.message : null}
value={watch("activity_date")}
placeholder={"تاریخ شروع فعالیت"}
placeholder={"تاریخ فعالیت را وارد کنید"}
label={"تاریخ فعالیت"}
setFieldValue={setValue}
helperText={errors.activity_date ? errors.activity_date.message : null}
/>
@@ -96,7 +98,8 @@ const GetItemInfo = ({ register, itemsList, subItemsList, control, setValue, err
value={watch("activity_time")}
name="activity_time"
error={errors.activity_time ? errors.activity_time.message : null}
placeholder={"زمان فعالیت"}
placeholder={"زمان فعالیت را وارد کنید"}
label={"زمان فعالیت"}
setFieldValue={setValue}
helperText={errors.activity_time ? errors.activity_time.message : null}
/>

4
src/components/dashboard/roadItems/operator/Actions/Create/Forms/GetSubItemsForm.jsx
View File

@@ -16,7 +16,7 @@ const GetSubItemsForm = ({ setValue, watch, setSubItemsList, tabState, setTabSta
) : (
<Grid container sx={{ justifyContent: "center" }} spacing={2}>
{subItemsList.map((item) => (
<Grid item sm={6} xs={12} key={item.id}>
<Grid item xs={12} key={item.id}>
<Card
elevation={0}
sx={{
@@ -37,7 +37,7 @@ const GetSubItemsForm = ({ setValue, watch, setSubItemsList, tabState, setTabSta
display: "flex",
flexDirection: "column",
alignItems: "center",
p: 2,
p: 1,
}}
>
<Typography>{item.name}</Typography>

30
src/components/dashboard/roadItems/operator/Actions/Create/Forms/ImageUpload.jsx
View File

@@ -84,7 +84,20 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
justifyContent: "center",
}}
>
<FormHelperText sx={{ fontSize: "large" }} id="before_image">
<FormHelperText
sx={{
fontSize: 14,
border: 1,
borderBottom: 0,
borderColor: "divider",
px: 2,
py: 1,
borderRadius: 2,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}}
id="before_image"
>
عکس قبل از اقدام
</FormHelperText>
<UploadSystem
@@ -120,7 +133,20 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
justifyContent: "center",
}}
>
<FormHelperText sx={{ fontSize: "large" }} id="before_image">
<FormHelperText
sx={{
fontSize: 14,
border: 1,
borderBottom: 0,
borderColor: "divider",
px: 2,
py: 1,
borderRadius: 2,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}}
id="before_image"
>
عکس بعد از اقدام
</FormHelperText>
<UploadSystem

8
src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/GashtCreate.jsx
View File

@@ -1,10 +1,12 @@
import { Button, Dialog, DialogActions, DialogTitle } from "@mui/material";
import { Dialog } from "@mui/material";
import GashtCreateContent from "./GashtCreateContent";
import { useState } from "react";
const GashtCreate = ({ open, setOpen, mutate, rowId }) => {
const [tabState, setTabState] = useState(0);
return (
<Dialog open={open} fullWidth maxWidth="md">
<GashtCreateContent mutate={mutate} setOpen={setOpen} />
<Dialog open={open} fullWidth maxWidth={tabState === 0 ? "md" : "sm"}>
<GashtCreateContent mutate={mutate} setOpen={setOpen} setTabState={setTabState} tabState={tabState} />
</Dialog>
);
};

5
src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/GashtCreateContent.jsx
View File

@@ -36,8 +36,7 @@ const defaultFilter = [
{ value: `${defaultValues.end_date}`, datatype: "date", id: "roadPatrol.end_time", fn: "equals" },
];
const GashtCreateContent = ({ mutate, setOpen }) => {
const [tabState, setTabState] = useState(0);
const GashtCreateContent = ({ mutate, setOpen, tabState, setTabState }) => {
const [itemInfo, setItemInfo] = useState(null);
const [submitCompleteForm, setSubmitCompleteForm] = useState(false);
const [specialFilter, setSpecialFilter] = useState(defaultFilter);
@@ -137,7 +136,7 @@ const GashtCreateContent = ({ mutate, setOpen }) => {
<Button
onClick={handlePrev}
variant="outlined"
color="error"
color="secondary"
size="large"
startIcon={tabState === 0 ? <ExitToAppIcon /> : <KeyboardDoubleArrowRightIcon />}
>

15
src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/RowActions/CompleteItem.jsx
View File

@@ -1,4 +1,4 @@
import { Button, DialogActions, Grid, Stack } from "@mui/material";
import { Grid, Stack } from "@mui/material";
import PreviousStatesInfo from "./PreviousStatesInfo";
import NumberField from "@/core/components/NumberField";
import { Controller, useForm } from "react-hook-form";
@@ -13,9 +13,9 @@ import { yupResolver } from "@hookform/resolvers/yup";
import StyledForm from "@/core/components/StyledForm";
import { array, mixed, number, object, string } from "yup";
import useRequest from "@/lib/hooks/useRequest";
import BeenhereIcon from "@mui/icons-material/Beenhere";
import React, { useEffect } from "react";
import { CREATE_ROAD_ITEMS } from "@/core/utils/routes";
import { format } from "date-fns";
const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpen }) => {
const requestServer = useRequest({ notificationSuccess: true });
@@ -38,7 +38,7 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
item_id: number().required("نوع آیتم را مشخص کنید!"),
sub_item_id: number().required("موضوع مشاهده شده را مشخص کنید!"),
amount: string().required("وارد کردن مقدار الزامیست!"),
cmms_machines: array().required("وارد کردن کد خودرو الزامیست!"),
cmms_machines: array().required("وارد کردن کد خودرو الزامیست!").min(1, "حداقل یک کد خودرو باید وارد شود!"),
rahdaran_id: array().required("وارد کردن کد راهداران الزامیست!").min(1, "حداقل یک کد راهدار باید وارد شود!"), // بررسی حداقل یک آیتم,
activity_time: string().required("لطفا زمان فعالیت را انتخاب کنید!"),
activity_date: string().required("لطفاً تاریخ شروع فعالیت را انتخاب کنید!"),
@@ -107,7 +107,7 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
data.before_image !== null && formData.append("before_image", data.before_image);
subItem.needs_end_point === 1 && formData.append("end_point", endPoint);
formData.append("start_point", startPoint);
formData.append("activity_time", data.activity_time);
formData.append("activity_time", format(new Date(data.activity_time), "HH:mm"));
formData.append("activity_date", data.activity_date);
formData.append("amount", data.amount);
formData.append("item_id", data.item_id);
@@ -138,6 +138,7 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
error={!!errors.amount}
value={watch("amount")}
type="text"
placeholder={`مقدار را وارد کنید`}
size={"small"}
unit={itemInfo.unit}
inputProps={{
@@ -200,7 +201,8 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
name="activity_date"
error={errors.activity_date ? errors.activity_date.message : null}
value={watch("activity_date")}
placeholder={"تاریخ شروع فعالیت"}
placeholder={"تاریخ فعالیت را وارد کنید"}
label={"تاریخ فعالیت"}
setFieldValue={setValue}
helperText={errors.activity_date ? errors.activity_date.message : null}
/>
@@ -210,7 +212,8 @@ const CompleteItem = ({ subItem, itemInfo, setSubmitCompleteForm, mutate, setOpe
value={watch("activity_time")}
name="activity_time"
error={errors.activity_time ? errors.activity_time.message : null}
placeholder={"زمان فعالیت"}
placeholder={"زمان فعالیت را وارد کنید"}
label={"زمان فعالیت"}
setFieldValue={setValue}
helperText={errors.activity_time ? errors.activity_time.message : null}
/>

30
src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/RowActions/ImageUpload.jsx
View File

@@ -68,7 +68,20 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
justifyContent: "center",
}}
>
<FormHelperText sx={{ fontSize: "large" }} id="before_image">
<FormHelperText
sx={{
fontSize: 14,
border: 1,
borderBottom: 0,
borderColor: "divider",
px: 2,
py: 1,
borderRadius: 2,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}}
id="before_image"
>
عکس قبل از اقدام
</FormHelperText>
<UploadSystem
@@ -104,7 +117,20 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
justifyContent: "center",
}}
>
<FormHelperText sx={{ fontSize: "large" }} id="before_image">
<FormHelperText
sx={{
fontSize: 14,
border: 1,
borderBottom: 0,
borderColor: "divider",
px: 2,
py: 1,
borderRadius: 2,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}}
id="before_image"
>
عکس بعد از اقدام
</FormHelperText>
<UploadSystem

6
src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/SearchItems.jsx
View File

@@ -48,11 +48,7 @@ const SearchItems = ({ setValue, itemsList, watch, errors, register, isSubmittin
</MenuItem>
))}
</Select>
{/*{errors.item_id ? (*/}
{/* <FormHelperText>*/}
{/* errors.item_id.message*/}
{/* </FormHelperText>*/}
{/*) : null}*/}
{errors.item_id ? <FormHelperText>errors.item_id.message</FormHelperText> : null}
</FormControl>
</Stack>
<Stack sx={{ flex: 1 }}>

75
src/components/dashboard/roadItems/operator/OperatorList.jsx
View File

@@ -6,7 +6,7 @@ import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
import { Box, Stack, Typography } from "@mui/material";
import moment from "jalali-moment";
import { useMemo } from "react";
import { useEffect, useMemo, useState } from "react";
import RowActions from "./RowActions";
import ImageDialog from "./RowActions/ImageForm";
import LocationForm from "./RowActions/LocationForm";
@@ -35,9 +35,9 @@ const OperatorList = () => {
size: 100,
},
{
accessorKey: "item_fa",
accessorKey: "item",
header: "آیتم فعالیت",
id: "item_fa",
id: "item",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
@@ -46,7 +46,7 @@ const OperatorList = () => {
ColumnSelectComponent: (props) => {
const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
const getColumnSelectOptions = () => {
const getColumnSelectOptions = useMemo(() => {
if (loadingItemsList) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
@@ -60,27 +60,35 @@ const OperatorList = () => {
label: item.name,
})),
];
};
}, [itemsList, loadingItemsList, errorItemsList]);
const columnSelectOption = getColumnSelectOptions();
return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
return (
<CustomSelectByDependency
{...props}
value={loadingItemsList ? "loading" : props.filterParameters.value}
columnSelectOption={getColumnSelectOptions}
/>
);
},
Cell: ({ row }) => {
return row.original.item_fa;
},
},
{
accessorKey: "sub_item_fa",
accessorKey: "sub_item",
header: "موضوع مشاهده شده",
id: "sub_item_fa",
id: "sub_item",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
dependencyId: "item_fa",
dependencyId: "item",
ColumnSelectComponent: (props) => {
const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(
props.dependencyFieldValue.value
);
const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
const getColumnSelectOptions = () => {
const getColumnSelectOptions = useMemo(() => {
if (props.dependencyFieldValue.value === "") {
return [{ value: "empty", label: "ابتدا آیتم فعالیت را انتخاب کنید" }];
}
@@ -93,15 +101,33 @@ const OperatorList = () => {
return [
{ value: "", label: props.column.header },
...subItemsList.map((item) => ({
value: item.id,
value: item.sub_item,
label: item.name,
})),
];
};
}, [subItemsList, loadingSubItemsList, errorSubItemsList]);
const columnSelectOption = getColumnSelectOptions();
return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
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"
: loadingSubItemsList
? "loading"
: props.filterParameters.value
}
columnSelectOption={getColumnSelectOptions}
/>
);
},
Cell: ({ row }) => {
return row.original.sub_item_fa;
},
},
{
@@ -109,6 +135,7 @@ const OperatorList = () => {
header: "مقدار", // Value
id: "value",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
@@ -225,10 +252,12 @@ const OperatorList = () => {
{
accessorKey: "rahdaran",
header: "راهداران",
id: "rahdaran",
enableColumnFilter: false,
id: "rahdaran__code",
enableColumnFilter: true,
enableSorting: false,
datatype: "array",
datatype: "text",
filterMode: "contains",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
muiTableBodyCellProps: {
@@ -254,8 +283,7 @@ const OperatorList = () => {
id: "activity_date_time",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},
@@ -265,8 +293,7 @@ const OperatorList = () => {
id: "created_at",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},

2
src/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormCreate.jsx
View File

@@ -13,7 +13,7 @@ import { array, mixed, object, string } from "yup";
const validationSchema = object({
amount: string().required("وارد کردن مقدار الزامیست!"),
cmms_machines: array().required("وارد کردن کد خودرو الزامیست!"),
cmms_machines: array().required("وارد کردن کد خودرو الزامیست!").min(1, "حداقل یک کد خودرو باید وارد شود!"),
rahdaran_id: array().required("وارد کردن کد راهداران الزامیست!").min(1, "حداقل یک کد راهدار باید وارد شود!"),
before_image: mixed()
.nullable()

2
src/components/dashboard/roadItems/operator/Toolbar.jsx
View File

@@ -6,7 +6,7 @@ import ObservedGashtCreate from "./Actions/ObservedGashtCreate";
const Toolbar = ({ table, filterData, mutate }) => {
return (
<Stack direction={"row"} spacing={2}>
<PrintExcel table={table} filterData={filterData} />
{/*<PrintExcel table={table} filterData={filterData} />*/}
<OperatorCreate mutate={mutate} />
<ObservedGashtCreate mutate={mutate} />
</Stack>

70
src/components/dashboard/roadItems/reports/ExcelPrint/index.jsx Normal file
View File

@@ -0,0 +1,70 @@
"use client";
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 { EXPORT_ROAD_ITEMS_OPERATOR_LIST } from "@/core/utils/routes";
import { useTheme } from "@emotion/react";
const PrintExcel = ({ table, filterData }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const [loading, setLoading] = useState(false);
const requestServer = useRequest({ notificationSuccess: true });
const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
if (filter.value) {
// Check if there's an active filter
acc.push({ id: key, value: filter.value });
}
return acc;
}, []);
const filterParams = useMemo(() => {
const params = new URLSearchParams();
activeFilters.length > 0 &&
activeFilters.map((filter, index) => {
params.set(`${filter.id}`, filter.value);
});
return params;
}, [activeFilters]);
const clickHandler = () => {
setLoading(true);
requestServer(`${EXPORT_ROAD_ITEMS_OPERATOR_LIST}?${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;

92
src/components/dashboard/roadItems/reports/ItemsReports/ReportLists.jsx Normal file
View File

@@ -0,0 +1,92 @@
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material";
import { useMemo } from "react";
const ReportLists = ({ itemsList, data }) => {
const columns = useMemo(() => {
const dynamicColumns =
itemsList?.map((item) => ({
accessorKey: `item_${item.id}`,
header: `${item.name}`,
id: `item_${item.id}`,
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
size: 50,
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
})) || [];
return [
{
accessorKey: "edare_name",
header: "اداره",
id: "edare_name",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
{
accessorKey: "sum",
header: "مجموع",
id: "sum",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
grow: false,
size: 50,
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
{
header: "ایتم های فعالیت روزانه",
id: "items",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
columns: [...dynamicColumns],
},
];
}, [itemsList]);
return (
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
columns={columns}
data={data.data}
page_name={"roadItemReportByItems"}
table_name={"roadItemReportByItemsList"}
/>
</Box>
);
};
export default ReportLists;

27
src/components/dashboard/roadItems/reports/ItemsReports/Search/FromDateController.jsx Normal file
View File

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

45
src/components/dashboard/roadItems/reports/ItemsReports/Search/SearchReportField.jsx Normal file
View File

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

47
src/components/dashboard/roadItems/reports/ItemsReports/Search/SelectProvince.jsx Normal file
View File

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

29
src/components/dashboard/roadItems/reports/ItemsReports/Search/ToDateController.jsx Normal file
View File

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

13
src/components/dashboard/roadItems/reports/ItemsReports/Search/index.jsx Normal file
View File

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

166
src/components/dashboard/roadItems/reports/ItemsReports/index.jsx Normal file
View File

@@ -0,0 +1,166 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import { LinearProgress, Stack, Typography } from "@mui/material";
import SearchReportList from "./Search";
import { useEffect, useState } from "react";
import ReportLists from "./ReportLists";
import useRequest from "@/lib/hooks/useRequest";
import { GET_CITY_ACTIVITY_PER_ITEM, GET_PROVINCE_ACTIVITY_PER_ITEM } from "@/core/utils/routes";
import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
import moment from "jalali-moment";
import * as yup from "yup";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { usePermissions } from "@/lib/hooks/usePermissions";
import { useAuth } from "@/lib/contexts/auth";
const ReportPage = () => {
const [data, setData] = useState(null);
const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
const { data: userPermissions } = usePermissions();
const { user } = useAuth();
const requestServer = useRequest();
const hasProvincesPermission = userPermissions.includes("show-road-item-supervise-cartable");
const defaultValues = {
from_date: moment(new Date()).format("YYYY-MM-DD"),
date_to: moment(new Date()).format("YYYY-MM-DD"),
province_id: hasProvincesPermission ? "-1" : user.province_id,
};
const onSearchSubmit = async (data) => {
const params = new URLSearchParams();
params.set("from_date", `${data.from_date}`);
params.set("date_to", `${data.date_to}`);
if (data.province_id === "-1") {
try {
const response = await requestServer(`${GET_PROVINCE_ACTIVITY_PER_ITEM}?${params}`);
const result = response.data.data;
const nationalReport = {
edare_name: "کل کشور",
sum: result.activities.length
? result.activities
.filter((report) => report.p === -1)
.reduce((acc, report) => acc + (report.s || 0), 0)
: 0,
};
itemsList.forEach((item) => {
const nationalReportForItem = result.activities.find(
(report) => report.p === -1 && report.i === item.id
);
nationalReport[`item_${item.id}`] = nationalReportForItem ? nationalReportForItem.s : 0;
});
setData({
data: [
nationalReport,
...result.provinces.map((province) => {
const filteredReports = result.activities.filter((report) => report.p === province.id);
const sum = filteredReports.reduce((acc, report) => acc + (report.s || 0), 0);
const rowData = {
edare_name: province.name_fa,
sum,
};
itemsList.forEach((item) => {
const reportForItem = filteredReports.find((report) => report.i === item.id);
rowData[`item_${item.id}`] = reportForItem ? reportForItem.s : 0;
});
return rowData;
}),
],
filters: data,
});
} catch (e) {}
} else {
try {
params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_CITY_ACTIVITY_PER_ITEM}?${params}`);
const result = response.data.data;
const nationalReport = {
edare_name: "کل استان",
sum: result.activities.length
? result.activities
.filter((report) => report.c === -1)
.reduce((acc, report) => acc + (report.s || 0), 0)
: 0,
};
itemsList.forEach((item) => {
const nationalReportForItem = result.activities.find(
(report) => report.c === -1 && report.i === item.id
);
nationalReport[`item_${item.id}`] = nationalReportForItem ? nationalReportForItem.s : 0;
});
setData({
data: [
nationalReport,
...result.edarateShahri.map((edare) => {
const filteredReports = result.activities.filter((report) => report.c === edare.id);
const sum = filteredReports.reduce((acc, report) => acc + (report.s || 0), 0);
const rowData = {
edare_name: edare.name_fa,
sum,
};
itemsList.forEach((item) => {
const reportForItem = filteredReports.find((report) => report.i === item.id);
rowData[`item_${item.id}`] = reportForItem ? reportForItem.s : 0;
});
return rowData;
}),
],
filters: data,
});
} catch (e) {}
}
};
useEffect(() => {
if (itemsList.length === 0) return;
onSearchSubmit(defaultValues);
}, [itemsList]);
const validationSchema = yup.object().shape({
from_date: yup
.string()
.required("تاریخ شروع الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ شروع الزامی است!")
.test("is-valid-date", "تاریخ شروع معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
date_to: yup
.string()
.required("تاریخ پایان الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ پایان الزامی است!")
.test("is-valid-date", "تاریخ پایان معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
province_id: yup.string().nullable(),
});
const { control, handleSubmit } = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "onBlur",
});
return (
<Stack spacing={1}>
<PageTitle title={"گزارش تعداد فعالیت ها به تفکیک ایتم"} />
<SearchReportList
control={control}
hasProvincesPermission={hasProvincesPermission}
handleSubmit={handleSubmit}
onSearchSubmit={onSearchSubmit}
/>
{!data || loadingItemsList ? (
<LinearProgress />
) : errorItemsList ? (
<Typography color={"error.main"} textAlign={"center"}>
خطا در دریافت اطلاعات!!!
</Typography>
) : (
<ReportLists data={data} itemsList={itemsList} />
)}
</Stack>
);
};
export default ReportPage;

27
src/components/dashboard/roadItems/reports/SubItemsReports/Search/FromDateController.jsx Normal file
View File

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

48
src/components/dashboard/roadItems/reports/SubItemsReports/Search/SearchReportField.jsx Normal file
View File

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

42
src/components/dashboard/roadItems/reports/SubItemsReports/Search/SelectItems.jsx Normal file
View File

@@ -0,0 +1,42 @@
import { Controller } from "react-hook-form";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import React from "react";
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from "@mui/material";
import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
const SelectProvince = ({ control }) => {
const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
return (
<Controller
name="item"
control={control}
render={({ field, fieldState: { error } }) => (
<FormControl error={!!error} size="small" fullWidth>
<InputLabel id="demo-error-label">ایتم</InputLabel>
<Select
{...field}
labelId="demo-error-label"
id="item"
value={loadingItemsList ? "loading" : field.value || ""}
label="ایتم"
onChange={field.onChange}
>
{loadingItemsList ? (
<MenuItem value={"loading"}>در حال بارگذاری...</MenuItem>
) : errorItemsList ? (
<MenuItem value={"error"}>خطا در بارگذاری</MenuItem>
) : (
itemsList.map((item) => (
<MenuItem key={item.id} value={item.id}>
{item.name}
</MenuItem>
))
)}
</Select>
{error && <FormHelperText>{error.message}</FormHelperText>}
</FormControl>
)}
/>
);
};
export default SelectProvince;

47
src/components/dashboard/roadItems/reports/SubItemsReports/Search/SelectProvince.jsx Normal file
View File

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

29
src/components/dashboard/roadItems/reports/SubItemsReports/Search/ToDateController.jsx Normal file
View File

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

12
src/components/dashboard/roadItems/reports/SubItemsReports/Search/index.jsx Normal file
View File

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

16
src/components/dashboard/roadItems/reports/SubItemsReports/SubItemsList.jsx Normal file
View File

@@ -0,0 +1,16 @@
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material";
const SubItemsList = ({ data }) => {
return (
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
columns={data.columns}
data={data.data}
page_name={"roadItemReportBySubItems"}
table_name={"roadItemReportBySubItemsList"}
/>
</Box>
);
};
export default SubItemsList;

242
src/components/dashboard/roadItems/reports/SubItemsReports/index.jsx Normal file
View File

@@ -0,0 +1,242 @@
"use client";
import SubItemsList from "./SubItemsList";
import PageTitle from "@/core/components/PageTitle";
import { LinearProgress, Stack } from "@mui/material";
import SearchReportList from "./Search";
import { useEffect, useState } from "react";
import { usePermissions } from "@/lib/hooks/usePermissions";
import { useAuth } from "@/lib/contexts/auth";
import useRequest from "@/lib/hooks/useRequest";
import moment from "jalali-moment";
import { GET_CITY_ACTIVITY_PER_SUB_ITEM, GET_PROVINCE_ACTIVITY_PER_SUB_ITEM } from "@/core/utils/routes";
import * as yup from "yup";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
const createColumns = (sub_items) => {
const dynamicColumns =
sub_items?.map((sub_item) => ({
accessorKey: `sub_item_${sub_item.sub_item}`,
header: `${sub_item.sub_item_str}`,
id: `sub_item_${sub_item.sub_item}`,
columns: [
{
accessorKey: `sub_item_${sub_item.sub_item}_count`,
header: "تعداد",
id: `sub_item_${sub_item.sub_item}_count`,
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
size: 50,
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
{
accessorKey: `sub_item_${sub_item.sub_item}_sum`,
header: `مجموع (${sub_item.sub_item_unit})`,
id: `sub_item_${sub_item.sub_item}_sum`,
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
grow: false,
size: 50,
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
],
})) || [];
return [
{
accessorKey: "edare_name",
header: "اداره",
id: "edare_name",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
{
header: "موارد مشاهده شده فعالیت روزانه",
enableColumnFilter: false,
id: "subItems",
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
columns: [...dynamicColumns],
},
];
};
const SubItemsReports = () => {
const [data, setData] = useState(null);
const { data: userPermissions } = usePermissions();
const { user } = useAuth();
const requestServer = useRequest();
const hasProvincesPermission = userPermissions.includes("show-road-item-supervise-cartable");
const defaultValues = {
from_date: moment(new Date()).format("YYYY-MM-DD"),
date_to: moment(new Date()).format("YYYY-MM-DD"),
province_id: hasProvincesPermission ? "-1" : user.province_id,
item: 1,
};
const onSearchSubmit = async (data) => {
const params = new URLSearchParams();
params.set("from_date", `${data.from_date}`);
params.set("date_to", `${data.date_to}`);
params.set("item", `${data.item}`);
if (data.province_id === "-1") {
try {
const response = await requestServer(`${GET_PROVINCE_ACTIVITY_PER_SUB_ITEM}?${params}`);
const result = response.data.data;
const nationalReport = {
edare_name: "کل کشور",
};
result.sub_items.forEach((subItem) => {
const nationalReportForSubItem = result.activities.find(
(report) => report.p === -1 && report.t === subItem.sub_item
);
nationalReport[`sub_item_${subItem.sub_item}_count`] = nationalReportForSubItem
? nationalReportForSubItem.c
: 0;
nationalReport[`sub_item_${subItem.sub_item}_sum`] = nationalReportForSubItem
? nationalReportForSubItem.s
: 0;
});
setData({
data: [
nationalReport,
...result.provinces.map((province) => {
const filteredReports = result.activities.filter((report) => report.p === province.id);
const rowData = {
edare_name: province.name_fa,
};
result.sub_items.forEach((subItem) => {
const reportForItem = filteredReports.find((report) => report.t === subItem.sub_item);
rowData[`sub_item_${subItem.sub_item}_count`] = reportForItem ? reportForItem.c : 0;
rowData[`sub_item_${subItem.sub_item}_sum`] = reportForItem ? reportForItem.s : 0;
});
return rowData;
}),
],
columns: createColumns(result.sub_items),
filters: data,
});
} catch (e) {}
} else {
try {
params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_CITY_ACTIVITY_PER_SUB_ITEM}?${params}`);
const result = response.data.data;
const nationalReport = {
edare_name: "کل استان",
};
result.sub_items.forEach((subItem) => {
const nationalReportForSubItem = result.activities.find(
(report) => report.ci === -1 && report.t === subItem.sub_item
);
nationalReport[`sub_item_${subItem.sub_item}_count`] = nationalReportForSubItem
? nationalReportForSubItem.c
: 0;
nationalReport[`sub_item_${subItem.sub_item}_sum`] = nationalReportForSubItem
? nationalReportForSubItem.s
: 0;
});
setData({
data: [
nationalReport,
...result.edarateShahri.map((edare) => {
const filteredReports = result.activities.filter((report) => report.ci === edare.id);
const rowData = {
edare_name: edare.name_fa,
};
result.sub_items.forEach((subItem) => {
const reportForItem = filteredReports.find((report) => report.t === subItem.sub_item);
rowData[`sub_item_${subItem.sub_item}_count`] = reportForItem ? reportForItem.c : 0;
rowData[`sub_item_${subItem.sub_item}_sum`] = reportForItem ? reportForItem.s : 0;
});
return rowData;
}),
],
columns: createColumns(result.sub_items),
filters: data,
});
} catch (e) {
console.log(e);
}
}
};
useEffect(() => {
onSearchSubmit(defaultValues);
}, []);
const validationSchema = yup.object().shape({
from_date: yup
.string()
.required("تاریخ شروع الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ شروع الزامی است!")
.test("is-valid-date", "تاریخ شروع معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
date_to: yup
.string()
.required("تاریخ پایان الزامی است!")
.matches(/^\d{4}-\d{2}-\d{2}$/, "تاریخ پایان الزامی است!")
.test("is-valid-date", "تاریخ پایان معتبر نیست!", (value) => moment(value, "YYYY-MM-DD", true).isValid()),
province_id: yup.string().nullable(),
item: yup.number().required("ایتم مورد نظر را وارد کنید!!!"),
});
const { control, handleSubmit } = useForm({
defaultValues,
resolver: yupResolver(validationSchema),
mode: "onBlur",
});
return (
<Stack spacing={1}>
<PageTitle title={"گزارش تعداد فعالیت ها به تفکیک موارد مشاهده شده"} />
<SearchReportList
control={control}
hasProvincesPermission={hasProvincesPermission}
handleSubmit={handleSubmit}
onSearchSubmit={onSearchSubmit}
/>
{!data ? <LinearProgress /> : <SubItemsList data={data} />}
</Stack>
);
};
export default SubItemsReports;

193
src/components/dashboard/roadItems/supervisor/SupervisorList.jsx
View File

@@ -1,4 +1,4 @@
import { useMemo } from "react";
import { useEffect, useMemo, useState } from "react";
import { Box, Stack, Typography } from "@mui/material";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import Toolbar from "./Toolbar";
@@ -14,6 +14,8 @@ import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
import useEdaratLists from "@/lib/hooks/useEdaratLists";
import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
import { usePermissions } from "@/lib/hooks/usePermissions";
import { useAuth } from "@/lib/contexts/auth";
const SupervisorList = () => {
const statusOptions = [
@@ -21,8 +23,47 @@ const SupervisorList = () => {
{ value: 1, label: "تایید" },
{ value: 2, label: "عدم تایید" },
];
const columns = useMemo(
() => [
const { data: userPermissions } = usePermissions();
const hasCountryPermission = userPermissions.includes("show-road-item-supervise-cartable");
const { user } = useAuth();
const columns = useMemo(() => {
const dynamicColumns = {
accessorKey: "province_id",
header: "استان", // Province
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: props.column.header },
...provinces.map((province) => ({
value: province.id,
label: province.name_fa,
})),
];
}, [provinces, errorProvinces, loadingProvinces]);
return (
<CustomSelectByDependency
{...props}
value={loadingProvinces ? "loading" : props.filterParameters.value}
columnSelectOption={getColumnSelectOptions}
/>
);
},
Cell: ({ renderedCellValue, row }) => <>{row.original.province_fa}</>,
};
return [
{
accessorKey: "id",
header: "کد یکتا", // Unique Code
@@ -35,37 +76,7 @@ const SupervisorList = () => {
grow: false,
size: 100,
},
{
accessorKey: "province_id",
header: "استان", // Province
id: "province_id",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
grow: false,
size: 130,
ColumnSelectComponent: (props) => {
const { provinces, errorProvinces, loadingProvinces } = useProvinces();
const getColumnSelectOptions = () => {
if (loadingProvinces) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
if (errorProvinces) {
return [{ value: "error", label: "خطا در بارگذاری" }];
}
return [
{ value: "", label: props.column.header },
...provinces.map((province) => ({
value: province.id,
label: province.name_fa,
})),
];
};
const columnSelectOption = getColumnSelectOptions();
return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
},
Cell: ({ renderedCellValue, row }) => <>{row.original.province_fa}</>,
},
...(hasCountryPermission ? [dynamicColumns] : []),
{
accessorKey: "edarat_id",
header: "اداره", // Office
@@ -73,16 +84,19 @@ const SupervisorList = () => {
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
dependencyId: "province_id",
dependencyId: hasCountryPermission ? "province_id" : null,
grow: false,
size: 120,
ColumnSelectComponent: (props) => {
const { edaratList, loadingEdaratList, errorEdaratList } = useEdaratLists(
props.dependencyFieldValue.value
hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
);
const [prevDependency, setPrevDependency] = useState(
hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
);
const getColumnSelectOptions = () => {
if (props.dependencyFieldValue.value === "") {
const getColumnSelectOptions = useMemo(() => {
if (hasCountryPermission && props.dependencyFieldValue.value === "") {
return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
}
if (loadingEdaratList) {
@@ -98,16 +112,33 @@ const SupervisorList = () => {
label: edare.name_fa,
})),
];
};
const columnSelectOption = getColumnSelectOptions();
return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
}, [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: ({ renderedCellValue, row }) => <>{row.original.edarat_name}</>,
},
{
accessorKey: "item_fa",
accessorKey: "item",
header: "آیتم فعالیت",
id: "item_fa",
id: "item",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
@@ -115,7 +146,8 @@ const SupervisorList = () => {
size: 100,
ColumnSelectComponent: (props) => {
const { itemsList, loadingItemsList, errorItemsList } = useRoadItemGetItems();
const getColumnSelectOptions = () => {
const getColumnSelectOptions = useMemo(() => {
if (loadingItemsList) {
return [{ value: "loading", label: "در حال بارگذاری..." }];
}
@@ -129,24 +161,35 @@ const SupervisorList = () => {
label: item.name,
})),
];
};
const columnSelectOption = getColumnSelectOptions();
return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
}, [itemsList, loadingItemsList, errorItemsList]);
return (
<CustomSelectByDependency
{...props}
value={loadingItemsList ? "loading" : props.filterParameters.value}
columnSelectOption={getColumnSelectOptions}
/>
);
},
Cell: ({ row }) => {
return row.original.item_fa;
},
},
{
accessorKey: "sub_item_fa",
accessorKey: "sub_item",
header: "موضوع مشاهده شده",
id: "sub_item_fa",
id: "sub_item",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
dependencyId: "item_fa",
dependencyId: "item",
ColumnSelectComponent: (props) => {
const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetSubItems(
props.dependencyFieldValue.value
);
const getColumnSelectOptions = () => {
const [prevDependency, setPrevDependency] = useState(props.dependencyFieldValue.value);
const getColumnSelectOptions = useMemo(() => {
if (props.dependencyFieldValue.value === "") {
return [{ value: "empty", label: "ابتدا آیتم فعالیت را انتخاب کنید" }];
}
@@ -159,13 +202,33 @@ const SupervisorList = () => {
return [
{ value: "", label: props.column.header },
...subItemsList.map((item) => ({
value: item.id,
value: item.sub_item,
label: item.name,
})),
];
};
const columnSelectOption = getColumnSelectOptions();
return <CustomSelectByDependency {...props} columnSelectOption={columnSelectOption} />;
}, [subItemsList, loadingSubItemsList, errorSubItemsList]);
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"
: loadingSubItemsList
? "loading"
: props.filterParameters.value
}
columnSelectOption={getColumnSelectOptions}
/>
);
},
Cell: ({ row }) => {
return row.original.sub_item_fa;
},
},
{
@@ -173,6 +236,7 @@ const SupervisorList = () => {
header: "مقدار", // Value
id: "value",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
filterMode: "equals",
grow: false,
@@ -289,10 +353,12 @@ const SupervisorList = () => {
{
accessorKey: "rahdaran",
header: "راهداران",
id: "rahdaran",
enableColumnFilter: false,
id: "rahdaran__code",
enableColumnFilter: true,
enableSorting: false,
datatype: "array",
datatype: "text",
filterMode: "contains",
columnFilterModeOptions: ["equals", "contains"],
grow: false,
size: 100,
muiTableBodyCellProps: {
@@ -321,8 +387,7 @@ const SupervisorList = () => {
id: "activity_date_time",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},
@@ -332,8 +397,7 @@ const SupervisorList = () => {
id: "created_at",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},
@@ -355,9 +419,8 @@ const SupervisorList = () => {
},
Cell: ({ renderedCellValue, row }) => <>{row.original.status_fa}</>,
},
],
[]
);
];
}, []);
return (
<>

6
src/components/dashboard/roadItems/supervisor/Toolbar.jsx
View File

@@ -1,10 +1,6 @@
import PrintExcel from "./ExcelPrint";
const Toolbar = ({ table, filterData }) => {
return (
<>
<PrintExcel table={table} filterData={filterData} />
</>
);
return <>{/*<PrintExcel table={table} filterData={filterData} />*/}</>;
};
export default Toolbar;