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

Merge branch 'release/v0.14.0'

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2025-01-19 13:21:59 +03:30
parent 3933e2151e e9cd37da4b
commit 9c830ecd54
83 changed files with 2728 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local.example
View File

@@ -1,3 +1,3 @@
NEXT_PUBLIC_VERSION="0.13.0"
NEXT_PUBLIC_VERSION="0.14.0"
NEXT_PUBLIC_API_URL="https://rms.witel.ir"
NEXT_PUBLIC_MAPTILE_ENDPOINT="https://rmsmap.rmto.ir/141map"

18
src/app/(withAuth)/dashboard/road-items/reports/items-report/page.js Normal file
View File

@@ -0,0 +1,18 @@
import WithPermission from "@/core/middlewares/withPermission";
import ReportPage from "@/components/dashboard/roadItems/reports/ItemsReports";
const Page = () => {
return (
<WithPermission
permission_name={[
"show-road-item-supervise-cartable",
"show-road-item-supervise-cartable-province",
"create-road-item",
]}
>
<ReportPage />
</WithPermission>
);
};
export default Page;

17
src/app/(withAuth)/dashboard/road-items/reports/sub-items-report/page.js Normal file
View File

@@ -0,0 +1,17 @@
import WithPermission from "@/core/middlewares/withPermission";
import SubItemsReports from "@/components/dashboard/roadItems/reports/SubItemsReports";
const Page = () => {
return (
<WithPermission
permission_name={[
"show-road-item-supervise-cartable",
"show-road-item-supervise-cartable-province",
"create-road-item",
]}
>
<SubItemsReports />
</WithPermission>
);
};
export default Page;

18
src/app/(withAuth)/dashboard/road-patrols/reports/page.js Normal file
View File

@@ -0,0 +1,18 @@
import WithPermission from "@/core/middlewares/withPermission";
import ReportPage from "@/components/dashboard/roadPatrols/reports";
const Page = () => {
return (
<WithPermission
permission_name={[
"add-road-patrol",
"show-road-patrol-supervise-cartable",
"show-road-patrol-supervise-cartable-province",
]}
>
<ReportPage />
</WithPermission>
);
};
export default Page;

4
src/app/(withAuth)/dashboard/road-patrols/supervisor/page.js
View File

@@ -3,7 +3,9 @@ import SupervisorPage from "@/components/dashboard/roadPatrols/supervisor";
import ActivityCodeLog from "@/core/components/ActivityCodeLog";
const Page = () => {
return (
<WithPermission permission_name={["show-road-patrol-supervise-cartable"]}>
<WithPermission
permission_name={["show-road-patrol-supervise-cartable", "show-road-patrol-supervise-cartable-province"]}
>
<SupervisorPage />
<ActivityCodeLog activity_code={1143} />
</WithPermission>

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;

51
src/components/dashboard/roadPatrols/operator/OperatorList.jsx
View File

@@ -7,8 +7,8 @@ import { GET_ROAD_PATROL_OPERATOR_LIST } from "@/core/utils/routes";
import moment from "jalali-moment";
import RowActions from "./RowActions";
import ReportForm from "./RowActions/ReportForm";
import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
import RahdaranDialog from "./RowActions/RahdaranForm";
import MachinePerformanceForm from "./RowActions/MachinePerformanceForm";
const OperatorList = () => {
const columns = useMemo(
@@ -25,14 +25,13 @@ const OperatorList = () => {
size: 100,
},
{
accessorKey: "cmms_machines",
header: "خودرو", // Car ID
id: "cmmsMachines__machine_code",
header: "عملکرد خودرو", // Car ID
enableColumnFilter: true,
id: "cmmsMachines__machine_code",
datatype: "text",
filterMode: "contains",
enableSorting: false,
columnFilterModeOptions: ["equals", "contains"],
enableSorting: false,
grow: false,
size: 100,
muiTableBodyCellProps: {
@@ -45,23 +44,22 @@ const OperatorList = () => {
},
},
Cell: ({ renderedCellValue }) => {
if (renderedCellValue) {
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<MachinesCodeDialog machinesLists={renderedCellValue} />
</Stack>
);
}
return <Typography variant="body2">کد خودرویی وجود ندارد</Typography>;
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<MachinePerformanceForm />
</Stack>
);
},
},
{
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: {
@@ -85,35 +83,32 @@ const OperatorList = () => {
},
},
{
accessorFn: (row) => moment(row.start_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
accessorFn: (row) => moment(row.start_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
header: "تاریخ شروع",
id: "start_date",
id: "start_time",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},
{
accessorFn: (row) => moment(row.end_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
accessorFn: (row) => moment(row.end_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
header: "تاریخ پایان",
id: "end_date",
id: "end_time",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},
{
accessorFn: (row) => moment(row.register_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
header: "تاریخ ثبت",
id: "register_date",
id: "created_at",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},

76
src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/MachinePerformanceContent.jsx Normal file
View File

@@ -0,0 +1,76 @@
import { Box, DialogContent, Stack } from "@mui/material";
import React, { useEffect, useState, useRef } from "react";
import { Marker, useMap } from "react-leaflet";
import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
import StopsInfo from "@/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo";
import MapLayer from "@/core/components/MapLayer";
const defaultIconSize = [35, 35];
const MachinePerformanceContent = ({ machinesLists }) => {
const [selectedPoint, setSelectedPoint] = useState(null);
const mapRef = useRef(null);
const isFirstRender = useRef(true);
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
});
};
const MapWithBounds = () => {
const map = useMap();
useEffect(() => {
if (machinesLists.stopPoints.length > 0) {
const bounds = machinesLists.stopPoints.map((point) => [point.latitude, point.longitude]);
if (isFirstRender.current) {
map.fitBounds(bounds, {
padding: [50, 50],
});
isFirstRender.current = false;
} else if (mapRef.current) {
mapRef.current.setView(map.getCenter(), map.getZoom());
}
}
}, [machinesLists.stopPoints, map]);
return null;
};
const handleMarkerClick = (point) => {
setSelectedPoint(point);
};
return (
<>
<DialogContent>
<Stack direction={"row"} spacing={2} justifyContent={"space-between"}>
<StopsInfo
selectedPoint={selectedPoint}
staticData={{
cmmsMachineCode: machinesLists.cmms_machine_code,
fuelConsumption: machinesLists.fuelConsumption,
mileage: machinesLists.mileage,
accOnDuration: machinesLists.accOnDuration,
}}
/>
<Stack>
<Box sx={{ width: "400px", height: "400px" }}>
<MapLayer>
<MapWithBounds />
{machinesLists.stopPoints.map((point, index) => (
<Marker
key={index}
position={[point.latitude, point.longitude]}
icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
eventHandlers={{
click: () => handleMarkerClick(point),
}}
></Marker>
))}
</MapLayer>
</Box>
</Stack>
</Stack>
</DialogContent>
</>
);
};
export default MachinePerformanceContent;

125
src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo.jsx Normal file
View File

@@ -0,0 +1,125 @@
import { Box, Chip, Divider, Grid, Typography } from "@mui/material";
import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
import PinDropIcon from "@mui/icons-material/PinDrop";
import LocalGasStationIcon from "@mui/icons-material/LocalGasStation";
import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
const StopsInfo = ({ selectedPoint, staticData }) => {
return (
<Grid container spacing={3} direction="row" sx={{ justifyContent: "space-between", alignItems: "center" }}>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
کد ماشین
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.cmmsMachineCode || ""}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<LocalGasStationIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مصرف سوخت
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.fuelConsumption || ""} لیتر
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مسافت طی‌شده
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.mileage || ""} کیلومتر
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<AccessAlarmsIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مدت زمان روشن بودن خودرو
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{(staticData.accOnDuration / 60)?.toFixed(2) || ""} دقیقه
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
طول جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint ? selectedPoint.longitude : "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
عرض جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint ? selectedPoint.latitude : "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<AccessAlarmsIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مدت زمان توقف
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint ? `${selectedPoint.duration} ثانیه` : "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
</Grid>
);
};
export default StopsInfo;

39
src/components/dashboard/roadPatrols/supervisor/RowActions/MachinesCodeForm/index.jsx → src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/index.jsx
View File

@@ -1,13 +1,40 @@
import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
import MachinePerformanceContent from "./MachinePerformanceContent";
import { useState } from "react";
import MachinesCodeContent from "./MachinesCodeContent";
const MachinesCodeDialog = ({ machinesLists }) => {
const MachinePerformanceForm = () => {
const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
const machineData = {
cmms_machine_code: 245,
resultCode: 0,
mileage: 17645,
accOnDuration: 3599,
fuelConsumption: 6.1757503,
stopPoints: [
{
startDT: "2024-12-23T13:55:40",
duration: 114,
latitude: 37.521317,
longitude: 46.103584,
},
{
startDT: "2024-12-23T14:31:11",
duration: 14,
latitude: 37.566532,
longitude: 46.17688,
},
{
startDT: "2024-12-23T14:35:36",
duration: 55,
latitude: 37.569958,
longitude: 46.18166,
},
],
};
return (
<>
<Tooltip title="کد خودرو">
<Tooltip title="عملکرد خودرو">
<IconButton color="primary" onClick={() => setOpenMachinesCodeDialog(true)}>
<DirectionsCarIcon />
</IconButton>
@@ -24,8 +51,8 @@ const MachinesCodeDialog = ({ machinesLists }) => {
dir="rtl"
maxWidth={"md"}
>
<DialogTitle sx={{ fontSize: "large" }}>کد خودرو</DialogTitle>
<MachinesCodeContent machinesLists={machinesLists} />
<DialogTitle sx={{ fontSize: "large" }}>عملکرد خودرو</DialogTitle>
<MachinePerformanceContent machinesLists={machineData} />
<DialogActions>
<Button
onClick={() => setOpenMachinesCodeDialog(false)}
@@ -40,4 +67,4 @@ const MachinesCodeDialog = ({ machinesLists }) => {
</>
);
};
export default MachinesCodeDialog;
export default MachinePerformanceForm;

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

@@ -6,7 +6,7 @@ const Toolbar = ({ table, filterData, mutate }) => {
return (
<Box sx={{ display: "flex", gap: 1 }}>
<OperatorCreate table={table} mutate={mutate} />
<PrintExcel table={table} filterData={filterData} />
{/*<PrintExcel table={table} filterData={filterData} />*/}
</Box>
);
};

55
src/components/dashboard/roadPatrols/reports/ExcelPrint/index.jsx Normal file
View File

@@ -0,0 +1,55 @@
import { Button, CircularProgress } 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";
const PrintExcel = ({ table, filterData }) => {
const [loading, setLoading] = useState(false);
const requestServer = useRequest();
const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
if (filter) {
acc.push({ id: key, value: filter });
}
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_PATROL_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 (
<Button
color="primary"
variant="contained"
disabled={loading}
sx={{ textTransform: "unset", alignSelf: "center" }}
startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
onClick={clickHandler}
>
خروجی اکسل
</Button>
);
};
export default PrintExcel;

209
src/components/dashboard/roadPatrols/reports/ReportLists.jsx Normal file
View File

@@ -0,0 +1,209 @@
"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { Box } from "@mui/material";
import { useMemo } from "react";
import Toolbar from "./Toolbar";
const ReportLists = ({ data }) => {
const columns = useMemo(() => {
return [
{
accessorKey: "edare_name",
header: "اداره کل",
id: "edare_name",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
},
{
accessorKey: "tedade",
header: "تعداد کل",
id: "tedade",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
{
header: "اقدامات لازم جهت رسیدگی آتی",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
columns: [
{
accessorKey: "tedad_mavarede_moshede_shode_adi",
header: "عادی",
id: "tedad_mavarede_moshede_shode_adi",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
{
accessorKey: "tedad_mavarede_moshede_shode_fori",
header: "فوری",
id: "tedad_mavarede_moshede_shode_fori",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
{
accessorKey: "tedad_mavarede_moshede_shode_ani",
header: "آنی",
id: "tedad_mavarede_moshede_shode_ani",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
],
},
{
accessorKey: "tedad_mavarede_peygiri_shode",
header: "اقدامات رسیدگی شده",
id: "tedad_mavarede_peygiri_shode",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
{
accessorKey: "masafat_tey_shode",
header: "مجموع مسافت پیمایش شده",
id: "masafat_tey_shode",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
{
accessorKey: "tedad_faliyat_sabt_shode",
header: "تعداد فعالیت صورت گرفته حین گشت",
id: "tedad_faliyat_sabt_shode",
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
grow: false,
size: 50,
muiTableBodyCellProps: {
sx: {
textAlign: "center",
borderLeft: "1px solid #e1e1e1",
py: 0,
"&:first-of-type": {
borderLeft: "unset",
},
},
},
Cell: ({ renderedCellValue }) => {
return (renderedCellValue / 1).toLocaleString();
},
},
];
}, []);
return (
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
<DataTableWithAuth
specialFilter={data.filters}
TableToolbar={Toolbar}
columns={columns}
data={data.data}
page_name={"roadPatrolReport"}
table_name={"roadPatrolReportList"}
/>
</Box>
);
};
export default ReportLists;

27
src/components/dashboard/roadPatrols/reports/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/roadPatrols/reports/Search/SearchReportField.jsx Normal file
View File

@@ -0,0 +1,45 @@
import { Button, Grid, LinearProgress, Typography } 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/roadPatrols/reports/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/roadPatrols/reports/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/roadPatrols/reports/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;

7
src/components/dashboard/roadPatrols/reports/Toolbar.jsx Normal file
View File

@@ -0,0 +1,7 @@
import PrintExcel from "./ExcelPrint";
import { Box } from "@mui/material";
const Toolbar = ({ table, filterData, mutate }) => {
return <Box sx={{ display: "flex", gap: 1 }}>{/*<PrintExcel table={table} filterData={filterData} />*/}</Box>;
};
export default Toolbar;

122
src/components/dashboard/roadPatrols/reports/index.jsx Normal file
View File

@@ -0,0 +1,122 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import { LinearProgress, Stack } 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_REPORT, GET_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
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 { data: userPermissions } = usePermissions();
const { user } = useAuth();
const requestServer = useRequest();
const hasProvincesPermission = userPermissions.includes("show-road-patrol-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_REPORT}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.province_id === -1);
const nationalReport = {
edare_name: "کل کشور",
...nationalReportForItem,
};
setData({
data: [
nationalReport,
...result.provinces.map((province) => {
const filteredReports = result.activities.find(
(report) => report.province_id === province.id
);
return {
...filteredReports,
edare_name: province.name_fa,
};
}),
],
filters: data,
});
} catch (e) {}
} else {
try {
params.set("province_id", `${data.province_id}`);
const response = await requestServer(`${GET_CITY_ACTIVITY_REPORT}?${params}`);
const result = response.data.data;
const nationalReportForItem = result.activities.find((report) => report.edare_id === "-1");
const nationalReport = {
...nationalReportForItem,
edare_name: "کل استان",
};
setData({
data: [
nationalReport,
...result.edarateShahri.map((edare) => {
const filteredReports = result.activities.find((report) => report.edare_id == edare.id);
return {
edare_name: edare.name_fa,
...filteredReports,
};
}),
],
filters: data,
});
} catch (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(),
});
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 /> : <ReportLists data={data} />}
</Stack>
);
};
export default ReportPage;

84
src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/DeleteContent.jsx
View File

@@ -3,7 +3,13 @@ import useRequest from "@/lib/hooks/useRequest";
import React, { useState } from "react";
import { DELETE_ROAD_PATROL_SUPERVISOR } from "@/core/utils/routes";
const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
const DeleteContent = ({
rowId,
mutate,
setOpenDeleteDialog,
hasCompleteDeletePermission,
hasPartialDeletePermission,
}) => {
const requestServer = useRequest({ notificationSuccess: true });
const [submittingPartial, setSubmittingPartial] = useState(false);
const [submittingGeneral, setSubmittingGeneral] = useState(false);
@@ -49,41 +55,59 @@ const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
لطفاً نوع حذف مورد نظر را انتخاب کنید.
</Typography>
<List sx={{ listStyleType: "disc", pl: 1 }}>
<ListItem
sx={{
display: "list-item",
pl: 0,
"&::marker": {
color: "warning.main",
},
}}
>
<Typography variant="body2">حذف جزئی : حذف گشت بدون اقدامات انجام شده.</Typography>
</ListItem>
<ListItem
sx={{
display: "list-item",
pl: 0,
"&::marker": {
color: "error.main",
},
}}
>
<Typography variant="body2">حذف کلی : حذف گشت با اقدامات انجام شده.</Typography>
</ListItem>
{hasPartialDeletePermission && (
<ListItem
sx={{
display: "list-item",
pl: 0,
"&::marker": {
color: "warning.main",
},
}}
>
<Typography variant="body2">حذف جزئی : حذف گشت بدون اقدامات انجام شده.</Typography>
</ListItem>
)}
{hasCompleteDeletePermission && (
<ListItem
sx={{
display: "list-item",
pl: 0,
"&::marker": {
color: "error.main",
},
}}
>
<Typography variant="body2">حذف کلی : حذف گشت با اقدامات انجام شده.</Typography>
</ListItem>
)}
</List>
</Stack>
</DialogContent>
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
<DialogActions sx={{ justifyContent: "flex-end", paddingBottom: 2, width: "100%" }}>
<Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="primary">
بستن
</Button>
<Button onClick={handlePartialDelete} variant="outlined" color="warning" disabled={submittingPartial}>
{submittingPartial ? "درحال ارسال اطلاعات..." : "حذف جزئی"}
</Button>
<Button onClick={handleGeneralDelete} variant="contained" color="error" disabled={submittingGeneral}>
{submittingGeneral ? "درحال ارسال اطلاعات..." : "حذف کلی"}
</Button>
{hasPartialDeletePermission && (
<Button
onClick={handlePartialDelete}
variant="outlined"
color="warning"
disabled={submittingPartial}
>
{submittingPartial ? "درحال ارسال اطلاعات..." : "حذف جزئی"}
</Button>
)}
{hasCompleteDeletePermission && (
<Button
onClick={handleGeneralDelete}
variant="contained"
color="error"
disabled={submittingGeneral}
>
{submittingGeneral ? "درحال ارسال اطلاعات..." : "حذف کلی"}
</Button>
)}
</DialogActions>
</>
);

10
src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/index.jsx
View File

@@ -2,7 +2,7 @@ import React, { useState } from "react";
import { Tooltip, IconButton, Dialog, DialogTitle } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import DeleteContent from "./DeleteContent";
const DeleteForm = ({ rowId, mutate }) => {
const DeleteForm = ({ rowId, mutate, hasCompleteDeletePermission, hasPartialDeletePermission }) => {
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
return (
@@ -24,7 +24,13 @@ const DeleteForm = ({ rowId, mutate }) => {
maxWidth={"md"}
>
<DialogTitle>حذف گشت</DialogTitle>
<DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
<DeleteContent
hasCompleteDeletePermission={hasCompleteDeletePermission}
hasPartialDeletePermission={hasPartialDeletePermission}
rowId={rowId}
mutate={mutate}
setOpenDeleteDialog={setOpenDeleteDialog}
/>
</Dialog>
</>
);

76
src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/MachinePerformanceContent.jsx Normal file
View File

@@ -0,0 +1,76 @@
import { Box, DialogContent, Stack } from "@mui/material";
import React, { useEffect, useState, useRef } from "react";
import { Marker, useMap } from "react-leaflet";
import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
import StopsInfo from "./StopsInfo";
import MapLayer from "@/core/components/MapLayer";
const defaultIconSize = [35, 35];
const MachinePerformanceContent = ({ machinesLists }) => {
const [selectedPoint, setSelectedPoint] = useState(null);
const mapRef = useRef(null);
const isFirstRender = useRef(true);
const createCustomIcon = (size, iconUrl) => {
return L.icon({
iconUrl: iconUrl,
iconSize: size,
iconAnchor: [size[0] / 2, size[1]],
popupAnchor: [0, -size[1]],
});
};
const MapWithBounds = () => {
const map = useMap();
useEffect(() => {
if (machinesLists.stopPoints.length > 0) {
const bounds = machinesLists.stopPoints.map((point) => [point.latitude, point.longitude]);
if (isFirstRender.current) {
map.fitBounds(bounds, {
padding: [50, 50],
});
isFirstRender.current = false;
} else if (mapRef.current) {
mapRef.current.setView(map.getCenter(), map.getZoom());
}
}
}, [machinesLists.stopPoints, map]);
return null;
};
const handleMarkerClick = (point) => {
setSelectedPoint(point);
};
return (
<>
<DialogContent>
<Stack direction={"row"} spacing={2} justifyContent={"space-between"}>
<StopsInfo
selectedPoint={selectedPoint}
staticData={{
cmmsMachineCode: machinesLists.cmms_machine_code,
fuelConsumption: machinesLists.fuelConsumption,
mileage: machinesLists.mileage,
accOnDuration: machinesLists.accOnDuration,
}}
/>
<Stack>
<Box sx={{ width: "400px", height: "400px" }}>
<MapLayer>
<MapWithBounds />
{machinesLists.stopPoints.map((point, index) => (
<Marker
key={index}
position={[point.latitude, point.longitude]}
icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
eventHandlers={{
click: () => handleMarkerClick(point),
}}
></Marker>
))}
</MapLayer>
</Box>
</Stack>
</Stack>
</DialogContent>
</>
);
};
export default MachinePerformanceContent;

129
src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/StopsInfo.jsx Normal file
View File

@@ -0,0 +1,129 @@
import { Box, Chip, Divider, Grid, Typography } from "@mui/material";
import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
import PinDropIcon from "@mui/icons-material/PinDrop";
import LocalGasStationIcon from "@mui/icons-material/LocalGasStation";
import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
const StopsInfo = ({ selectedPoint, staticData }) => {
return (
<Grid container spacing={3} direction="row" sx={{ justifyContent: "space-between", alignItems: "center" }}>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
کد ماشین
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.cmmsMachineCode || ""}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<LocalGasStationIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مصرف سوخت
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.fuelConsumption || ""} لیتر
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مسافت طی‌شده
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.mileage || ""} کیلومتر
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<AccessAlarmsIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مدت زمان روشن بودن خودرو
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{(staticData.accOnDuration / 60)?.toFixed(2) || ""} دقیقه
</Typography>
</Grid>
{selectedPoint && (
<>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
طول جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint.longitude || ""}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
عرض جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint.latitude || ""}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<AccessAlarmsIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مدت زمان توقف
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint.duration || ""} ثانیه
</Typography>
</Grid>
</>
)}
</Grid>
);
};
export default StopsInfo;

70
src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/index.jsx Normal file
View File

@@ -0,0 +1,70 @@
import { Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
import MachinePerformanceContent from "./MachinePerformanceContent";
import { useState } from "react";
const MachinePerformanceForm = () => {
const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
const machineData = {
cmms_machine_code: 245,
resultCode: 0,
mileage: 17645,
accOnDuration: 3599,
fuelConsumption: 6.1757503,
stopPoints: [
{
startDT: "2024-12-23T13:55:40",
duration: 114,
latitude: 37.521317,
longitude: 46.103584,
},
{
startDT: "2024-12-23T14:31:11",
duration: 14,
latitude: 37.566532,
longitude: 46.17688,
},
{
startDT: "2024-12-23T14:35:36",
duration: 55,
latitude: 37.569958,
longitude: 46.18166,
},
],
};
return (
<>
<Tooltip title="عملکرد خودرو">
<IconButton color="primary" onClick={() => setOpenMachinesCodeDialog(true)}>
<DirectionsCarIcon />
</IconButton>
</Tooltip>
<Dialog
fullWidth
open={openMachinesCodeDialog}
onClose={() => setOpenMachinesCodeDialog(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 sx={{ fontSize: "large" }}>عملکرد خودرو</DialogTitle>
<MachinePerformanceContent machinesLists={machineData} />
<DialogActions>
<Button
onClick={() => setOpenMachinesCodeDialog(false)}
variant="outlined"
color="secondary"
autoFocus
>
بستن
</Button>
</DialogActions>
</Dialog>
</>
);
};
export default MachinePerformanceForm;

55
src/components/dashboard/roadPatrols/supervisor/RowActions/MachinesCodeForm/MachinesCodeContent.jsx
View File

@@ -1,55 +0,0 @@
import { DialogContent, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
import ShowPlak from "@/core/components/ShowPlak";
const MachinesCodeContent = ({ machinesLists }) => {
return (
<>
<DialogContent>
<Paper
elevation={0}
sx={{
width: "100%",
overflow: "hidden",
"*::-webkit-scrollbar": {
width: "0.5em",
},
"*::-webkit-scrollbar-thumb": {
backgroundColor: "primary.main",
},
}}
>
<TableContainer sx={{ maxHeight: 600 }}>
<Table stickyHeader sx={{ minWidth: 800 }}>
<TableHead>
<TableRow>
<TableCell>کد ماشین</TableCell>
<TableCell>نام خودرو</TableCell>
<TableCell>پلاک</TableCell>
</TableRow>
</TableHead>
<TableBody>
{machinesLists.map((machine) => {
return (
<TableRow
key={machine.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell>{machine.machine_code}</TableCell>
<TableCell>{machine.car_name}</TableCell>
<TableCell>
{machine.plak_number ? (
<ShowPlak plak_number={machine.plak_number} />
) : null}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</Paper>
</DialogContent>
</>
);
};
export default MachinesCodeContent;

2
src/components/dashboard/roadPatrols/supervisor/RowActions/OfficerDescription/index.jsx
View File

@@ -37,7 +37,7 @@ const OfficerDescriptionForm = ({ description }) => {
</IconButton>
</DialogTitle>
<DialogContent>
<Card sx={{ padding: 2, boxShadow: 3, borderRadius: 2 }}>
<Card elevation={0}>
<CardContent>
<Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
</CardContent>

13
src/components/dashboard/roadPatrols/supervisor/RowActions/index.jsx
View File

@@ -1,10 +1,21 @@
import { Box } from "@mui/material";
import DeleteForm from "./DeleteForm";
import { usePermissions } from "@/lib/hooks/usePermissions";
const RowActions = ({ row, mutate }) => {
const { data: userPermissions } = usePermissions();
const hasPartialDeletePermission = userPermissions.includes("partial-delete-road-patrol");
const hasCompleteDeletePermission = userPermissions.includes("complete-delete-road-patrol");
return (
<Box sx={{ display: "flex", gap: 1 }}>
<DeleteForm rowId={row.getValue("id")} mutate={mutate} />
{hasPartialDeletePermission | hasCompleteDeletePermission && (
<DeleteForm
hasPartialDeletePermission={hasPartialDeletePermission}
hasCompleteDeletePermission={hasCompleteDeletePermission}
rowId={row.getValue("id")}
mutate={mutate}
/>
)}
</Box>
);
};

218
src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useMemo } from "react";
import {Box, Stack, Typography} from "@mui/material";
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_ROAD_PATROL_SUPERVISOR_LIST } from "@/core/utils/routes";
@@ -11,12 +11,53 @@ import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsT
import useEdaratLists from "@/lib/hooks/useEdaratLists";
import OfficerDescriptionForm from "./RowActions/OfficerDescription";
import ReportForm from "./RowActions/ReportForm";
import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
import RahdaranDialog from "./RowActions/RahdaranForm";
import MachinePerformanceForm from "./RowActions/MachinePerformanceForm";
import { usePermissions } from "@/lib/hooks/usePermissions";
import { useAuth } from "@/lib/contexts/auth";
const OperatorList = () => {
const columns = useMemo(
() => [
const SupervisorList = () => {
const { data: userPermissions } = usePermissions();
const hasCountryPermission = userPermissions.includes("show-road-patrol-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: "کد یکتا",
@@ -28,35 +69,7 @@ const OperatorList = () => {
grow: false,
size: 100,
},
{
accessorKey: "province_id",
header: "استان",
id: "province_id",
enableColumnFilter: true,
datatype: "numeric",
filterMode: "equals",
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: "edare_id",
header: "اداره",
@@ -64,15 +77,19 @@ const OperatorList = () => {
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 getColumnSelectOptions = () => {
if (props.dependencyFieldValue.value === "") {
const [prevDependency, setPrevDependency] = useState(
hasCountryPermission ? props.dependencyFieldValue.value : user.province_id
);
const getColumnSelectOptions = useMemo(() => {
if (hasCountryPermission && props.dependencyFieldValue.value === "") {
return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
}
if (loadingEdaratList) {
@@ -88,21 +105,37 @@ const OperatorList = () => {
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.edare_name}</>,
},
{
accessorKey: "cmms_machines",
header: "خودرو", // Car ID
id: "cmmsMachines__machine_code",
header: "عملکرد خودرو",
enableColumnFilter: true,
id: "cmmsMachines__machine_code",
datatype: "text",
filterMode: "contains",
enableSorting: false,
columnFilterModeOptions: ["equals", "contains"],
enableSorting: false,
grow: false,
size: 100,
muiTableBodyCellProps: {
@@ -114,24 +147,21 @@ const OperatorList = () => {
},
},
},
Cell: ({ renderedCellValue }) => {
if (renderedCellValue) {
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<MachinesCodeDialog machinesLists={renderedCellValue} />
</Stack>
);
}
return <Typography variant="body2">کد خودرویی وجود ندارد</Typography>;
},
Cell: () => (
<Stack alignItems={"center"} justifyContent={"center"}>
<MachinePerformanceForm />
</Stack>
),
},
{
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: {
@@ -143,47 +173,42 @@ const OperatorList = () => {
},
},
},
Cell: ({ renderedCellValue }) => {
if (renderedCellValue) {
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<RahdaranDialog rahdarLists={renderedCellValue} />
</Stack>
);
}
return <Typography variant="body2">بدون شخص</Typography>;
},
Cell: ({ renderedCellValue }) =>
renderedCellValue ? (
<Stack alignItems={"center"} justifyContent={"center"}>
<RahdaranDialog rahdarLists={renderedCellValue} />
</Stack>
) : (
<Typography variant="body2">بدون شخص</Typography>
),
},
{
accessorFn: (row) => moment(row.start_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
accessorFn: (row) => moment(row.start_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
header: "تاریخ شروع",
id: "start_date",
id: "start_time",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},
{
accessorFn: (row) => moment(row.end_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
accessorFn: (row) => moment(row.end_time).locale("fa").format("HH:mm | yyyy/MM/DD"),
header: "تاریخ پایان",
id: "end_date",
id: "end_time",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},
{
accessorFn: (row) => moment(row.register_date).locale("fa").format("HH:mm | yyyy/MM/DD"),
accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
header: "تاریخ ثبت",
id: "register_date",
id: "created_at",
enableColumnFilter: true,
datatype: "date",
filterMode: "equals",
columnFilterModeOptions: ["equals", "contains"],
filterMode: "between",
grow: false,
size: 100,
},
@@ -204,13 +229,11 @@ const OperatorList = () => {
},
},
},
Cell: ({ renderedCellValue }) => {
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<OfficerDescriptionForm description={renderedCellValue} />
</Stack>
);
},
Cell: ({ renderedCellValue }) => (
<Stack alignItems={"center"} justifyContent={"center"}>
<OfficerDescriptionForm description={renderedCellValue} />
</Stack>
),
},
{
header: "گزارش مامور",
@@ -227,17 +250,14 @@ const OperatorList = () => {
},
},
},
Cell: ({ renderedCellValue, row }) => {
return (
<Stack alignItems={"center"} justifyContent={"center"}>
<ReportForm rowId={row.getValue("id")} />
</Stack>
);
},
Cell: ({ row }) => (
<Stack alignItems={"center"} justifyContent={"center"}>
<ReportForm rowId={row.getValue("id")} />
</Stack>
),
},
],
[]
);
];
}, []);
return (
<>
@@ -258,4 +278,4 @@ const OperatorList = () => {
</>
);
};
export default OperatorList;
export default SupervisorList;

6
src/components/dashboard/roadPatrols/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;

4
src/components/dashboard/roadPatrols/supervisor/index.jsx
View File

@@ -1,13 +1,13 @@
"use client";
import PageTitle from "@/core/components/PageTitle";
import { Stack } from "@mui/material";
import SuperviserList from "./SupervisorList";
import SupervisorList from "./SupervisorList";
const SupervisorPage = () => {
return (
<Stack spacing={1}>
<PageTitle title={"ارزیابی"} />
<SuperviserList />
<SupervisorList />
</Stack>
);
};

4
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx
View File

@@ -15,7 +15,9 @@ const SidebarListItems = ({ menuItem, dispatch }) => {
component={menuItem.type === "page" ? Link : null}
href={menuItem.type === "page" ? menuItem.route : null}
onClick={() => {
dispatch({ type: "COLLAPSE_MENU", id: menuItem.id });
if (menuItem.type !== "page") {
dispatch({ type: "COLLAPSE_MENU", id: menuItem.id });
}
}}
>
<ListItemIcon

4
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx
View File

@@ -14,7 +14,9 @@ const SidebarSubitems = ({ subitem, dispatch }) => {
component={subitem.type === "page" ? Link : null}
href={subitem.type === "page" ? subitem.route : null}
onClick={() => {
dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
if (subitem.type !== "page") {
dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
}
}}
>
<ListItemIcon

2
src/core/components/ActivityCodeLog.jsx
View File

@@ -3,6 +3,7 @@
import { useEffect, useState, memo } from "react";
import useRequest from "@/lib/hooks/useRequest";
import { ACTIVITY_LOG } from "@/core/utils/routes";
import NumberField from "@/core/components/NumberField";
const ActivityCodeLog = memo(({ activity_code }) => {
const requestServer = useRequest({ notificationShow: false });
@@ -32,6 +33,7 @@ const ActivityCodeLog = memo(({ activity_code }) => {
return null;
});
ActivityCodeLog.displayName = "ActivityCodeLog";
ActivityCodeLog.displayName = "ActivityCodeLog";
export default ActivityCodeLog;

6
src/core/components/CarCode.jsx
View File

@@ -77,10 +77,14 @@ const CarCode = ({ carCode, setCarCode, inputValueDefault = "", error, multiple
renderInput={(params) => (
<TextField
{...params}
label="کد خودرو"
label={multiple ? "خودرو ها" : "خودرو"}
fullWidth
placeholder={multiple ? "کد خودرو ها را وارد کنید" : "کد خودرو را وارد کنید"}
error={!!error}
helperText={error?.message}
InputLabelProps={{
shrink: true,
}}
InputProps={{
...params.InputProps,
endAdornment: (

13
src/core/components/DataTable/Main.js
View File

@@ -3,7 +3,7 @@ import { useMaterialReactTable } from "material-react-table";
import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
import { flattenArrayOfObjects } from "@/core/utils/flattenArrayOfObjects";
import useDataTable from "@/lib/hooks/useDataTable";
import { useMemo, useState } from "react";
import { useCallback, useMemo, useState } from "react";
import useRequest from "@/lib/hooks/useRequest";
import useSWR from "swr";
import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
@@ -33,7 +33,7 @@ const DataTable_Main = (props) => {
setSortData(event);
};
const fetchUrl = useMemo(() => {
const fetchUrl = useCallback(() => {
const params = new URLSearchParams();
params.set("start", `${pagination.pageIndex * pagination.pageSize}`);
params.set("size", pagination.pageSize);
@@ -76,7 +76,7 @@ const DataTable_Main = (props) => {
}
};
const { data, isValidating, mutate } = useSWR(fetchUrl, fetcher, {
const { data, isValidating, mutate } = useSWR(props.data ? "" : fetchUrl(), fetcher, {
revalidateIfStale: true,
revalidateOnFocus: false,
revalidateOnReconnect: true,
@@ -129,7 +129,11 @@ const DataTable_Main = (props) => {
onSortingChange: onSortingChange,
rowCount: totalRowCount,
renderTopToolbarCustomActions: ({ table }) => (
<>{TableToolbar && <TableToolbar table={table} mutate={mutate} filterData={filterData} />}</>
<>
{TableToolbar && (
<TableToolbar table={table} mutate={mutate} filterData={specialFilter || filterData} />
)}
</>
),
renderRowActions: ({ row }) => <RowActions row={row} mutate={mutate} />,
...props,
@@ -146,6 +150,7 @@ const DataTable_Main = (props) => {
user_id={user_id}
page_name={page_name}
table_name={table_name}
special_data={props.data}
/>
);
};

18
src/core/components/DataTable/filter/FilterBody.jsx
View File

@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import * as Yup from "yup";
import FilterBodyController from "./FilterBodyController";
import FilterBodyControllerWithDependency from "@/core/components/DataTable/filter/FilterBodyControllerWithDependency";
const ScrollBox = styled(Box)({
flexGrow: 1,
@@ -74,7 +75,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
} = useForm({
defaultValues: filterData,
resolver: yupResolver(validationSchema),
mode: "onChange",
mode: "onBlur",
});
const onSubmit = (data) => {
@@ -93,9 +94,17 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
<ScrollBox>
<form onSubmit={handleSubmit(onSubmit)}>
<Box sx={{ px: 1, py: 2 }}>
{columns.map(
(column) =>
column.enableColumnFilter && (
{columns.map((column) =>
column.enableColumnFilter ? (
column.dependencyId ? (
<FilterBodyControllerWithDependency
key={column.id}
column={column}
control={control}
errors={errors}
reset={reset}
/>
) : (
<FilterBodyController
key={column.id}
column={column}
@@ -104,6 +113,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
reset={reset}
/>
)
) : null
)}
</Box>
<Box

26
src/core/components/DataTable/filter/FilterBodyController.jsx
View File

@@ -2,23 +2,23 @@ import { Controller, useWatch } from "react-hook-form";
import FilterBodyField from "./FilterBodyField";
const FilterBodyController = ({ column, control, reset, errors }) => {
const dependencyField = useWatch({ control, name: column.dependencyId });
return (
<Controller
name={`${column.id}`}
control={control}
render={({ field: { value, onBlur, onChange } }) => (
<FilterBodyField
column={column}
filterParameters={value}
handleChange={onChange}
handleBlur={onBlur}
dependencyFieldValue={column.dependencyId ? dependencyField : null}
resetForm={() => reset()}
errors={errors}
/>
)}
render={({ field: { value, name, onBlur, onChange } }) => {
return (
<FilterBodyField
column={column}
filterParameters={value}
handleChange={onChange}
handleBlur={onBlur}
dependencyFieldValue={null}
resetForm={() => reset()}
errors={errors}
/>
);
}}
/>
);
};

27
src/core/components/DataTable/filter/FilterBodyControllerWithDependency.jsx Normal file
View File

@@ -0,0 +1,27 @@
import { Controller, useWatch } from "react-hook-form";
import FilterBodyField from "./FilterBodyField";
const FilterBodyControllerWithDependency = ({ column, control, reset, errors }) => {
const dependencyField = useWatch({ control, name: column.dependencyId });
return (
<Controller
name={`${column.id}`}
control={control}
render={({ field: { value, name, onBlur, onChange } }) => {
return (
<FilterBodyField
column={column}
filterParameters={value}
handleChange={onChange}
handleBlur={onBlur}
dependencyFieldValue={dependencyField}
resetForm={() => reset()}
errors={errors}
/>
);
}}
/>
);
};
export default FilterBodyControllerWithDependency;

2
src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
View File

@@ -8,6 +8,7 @@ function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslat
return (
<Box sx={{ display: "flex", gap: 1 }}>
<MuiDatePicker
label={column.header}
name={`${column.id}.value[0]`}
value={filterParameters.value[0]}
setFieldValue={(name, formattedDate) => {
@@ -22,6 +23,7 @@ function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslat
}
/>
<MuiDatePicker
label={column.header}
name={`${column.id}.value[1]`}
value={filterParameters.value[1]}
setFieldValue={(name, formattedDate) => {

6
src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
View File

@@ -6,7 +6,7 @@ import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import moment from "jalali-moment";
function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
function MuiDatePicker({ label, value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
return (
<Box sx={{ display: "flex", flexDirection: "column", my: 1 }}>
<LocalizationProvider
@@ -17,6 +17,7 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
value={value ? new Date(value) : null}
sx={{ width: "100%" }}
id={name}
label={label}
name={name}
closeOnSelect={true}
aria-describedby="component-helper-text"
@@ -53,6 +54,9 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
</InputAdornment>
),
},
InputLabelProps: {
shrink: true,
},
},
}}
/>

17
src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx
View File

@@ -6,24 +6,11 @@ import { useCallback, useEffect } from "react";
function CustomSelectByDependency({
column,
filterParameters,
value,
defaultFilterTranslation,
handleChange,
columnSelectOption,
}) {
const isValidValue = columnSelectOption.some((option) => option.value === filterParameters.value);
const handleInvalidValue = useCallback(() => {
if (!isValidValue && filterParameters.value !== "") {
handleChange({ ...filterParameters, value: columnSelectOption[0]?.value || "" });
}
}, [isValidValue, filterParameters, handleChange, columnSelectOption]);
useEffect(() => {
handleInvalidValue();
}, [handleInvalidValue]);
const selectedValue = isValidValue ? filterParameters.value : columnSelectOption[0]?.value || "";
return (
<FormControl fullWidth sx={{ marginY: 1 }}>
<InputLabel id={`label${column.id}`}>{column.header}</InputLabel>
@@ -31,7 +18,7 @@ function CustomSelectByDependency({
labelId={`label${column.id}`}
id={column.id}
name={`${column.id}.value`}
value={selectedValue}
value={value}
input={<OutlinedInput label={column.header} />}
onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
>

1
src/core/components/DataTable/table/Paper.js
View File

@@ -86,6 +86,7 @@ const DataTable_Paper = ({
page_name={page_name}
table_name={table_name}
table_title={table_title}
{...paperProps}
/>
))}
<DataTable_TableContainer table={table} />

9
src/core/components/DataTable/toolbar/TopToolbar.js
View File

@@ -17,6 +17,7 @@ const DataTable_TopToolbar = ({
page_name,
table_name,
table_title,
special_data,
}) => {
const {
getState,
@@ -96,8 +97,12 @@ const DataTable_TopToolbar = ({
order: 3,
}}
>
<ResetStorage user_id={user_id} page_name={page_name} table_name={table_name} />
<UpdateTable mutate={mutate} />
{!special_data && (
<>
<ResetStorage user_id={user_id} page_name={page_name} table_name={table_name} />
<UpdateTable mutate={mutate} />
</>
)}
<HideColumn
columns={table.options.columns}
user_id={user_id}

13
src/core/components/MapInfoTwoMarker.jsx
View File

@@ -111,7 +111,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
setStartPosition({ lat: center.lat, lng: center.lng });
setIsStartLocked(true);
setStartIconColor("#1CAC66");
map.panBy([25, 25])
map.panBy([25, 25]);
}
},
}}
@@ -183,13 +183,10 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
setEndPosition({ lat: center.lat, lng: center.lng });
setIsEndLocked(true);
setEndIconColor("#D13131");
map.fitBounds(
[
startPosition,
map.getCenter(),
],
{ paddingTopLeft: [16, 16], paddingBottomRight: [16, 16] }
);
map.fitBounds([startPosition, map.getCenter()], {
paddingTopLeft: [16, 16],
paddingBottomRight: [16, 16],
});
}
},
}}

7
src/core/components/MuiDatePicker.jsx
View File

@@ -6,7 +6,7 @@ import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import moment from "jalali-moment";
function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error, label }) {
return (
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
<LocalizationProvider
@@ -20,7 +20,7 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
name={name}
closeOnSelect
disableFuture
label={helperText}
label={label}
aria-describedby="component-helper-text"
onChange={(value) => {
const date = new Date(value);
@@ -34,6 +34,9 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
error: error,
size: "small",
placeholder: placeholder,
InputLabelProps: {
shrink: true,
},
InputProps: {
endAdornment: (
<InputAdornment position="end">

20
src/core/components/MuiTimePicker.jsx
View File

@@ -1,16 +1,16 @@
import React from "react";
import { LocalizationProvider, MobileTimePicker } from "@mui/x-date-pickers";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import { faIR } from "@mui/x-date-pickers/locales";
import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { parseISO, format } from "date-fns";
function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperText, placeholder, error }) {
function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperText, placeholder, error, label }) {
// Ensure value, minTime, maxTime are Date objects
const parsedValue = value ? (typeof value === "string" ? parseISO(value) : value) : null;
const parsedMinTime = minTime ? (typeof minTime === "string" ? parseISO(minTime) : minTime) : null;
const parsedMaxTime = maxTime && (typeof maxTime === "string" ? parseISO(maxTime) : null);
const parsedValue = value || null;
const parsedMinTime = minTime || null;
const parsedMaxTime = maxTime || null;
return (
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
@@ -23,14 +23,13 @@ function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperTex
sx={{ width: "100%" }}
id={name}
closeOnSelect
label={helperText ? helperText : placeholder}
label={label}
ampm={false}
timeSteps={{ hours: 1, minutes: 5 }}
views={["hours", "minutes"]}
name={name}
onChange={(newValue) => {
const formattedTime = newValue ? format(new Date(newValue), "HH:mm") : "";
setFieldValue(name, formattedTime);
setFieldValue(name, newValue);
}}
minTime={parsedMinTime}
maxTime={parsedMaxTime}
@@ -39,6 +38,9 @@ function MuiTimePicker({ value, setFieldValue, name, minTime, maxTime, helperTex
placeholder: placeholder,
size: "small",
error: error,
InputLabelProps: {
shrink: true,
},
InputProps: {
endAdornment: (
<InputAdornment position="end">

6
src/core/components/RahdarCode.jsx
View File

@@ -72,10 +72,14 @@ const RahdarCode = ({ rahdarsCode, setRahdarsCode, error, multiple = true }) =>
renderInput={(params) => (
<TextField
{...params}
label="کد راهداران"
label={multiple ? "راهداران" : "راهدار"}
fullWidth
placeholder={multiple ? "کد راهداران را وارد کنید" : "کد راهدار را وارد کنید"}
error={!!error}
helperText={error?.message}
InputLabelProps={{
shrink: true,
}}
InputProps={{
...params.InputProps,
endAdornment: (

7
src/core/components/UploadSystem.jsx
View File

@@ -11,7 +11,7 @@ const UploadSystem = ({ selectedImage, handleUploadChange, imageSize, fileType,
};
return (
<Box sx={{ width: "100%", my: 1 }}>
<Box sx={{ width: "100%" }}>
{showAddIcon ? (
<Box
sx={{
@@ -19,8 +19,9 @@ const UploadSystem = ({ selectedImage, handleUploadChange, imageSize, fileType,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
border: "1px solid #b3b3b3",
borderRadius: "10px",
border: 1,
borderColor: "divider",
borderRadius: 2,
cursor: "pointer",
padding: "5px",
height: imageSize[1],

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

@@ -148,13 +148,32 @@ export const pageMenu = [
{
id: "roadItemManagmentReport",
label: "گزارش ها",
type: "page",
route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/report",
type: "menu",
icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
permissions: [
"show-road-item-supervise-cartable",
"show-road-item-supervise-cartable-province",
"create-road-item",
hasSubitems: true,
Subitems: [
{
id: "roadItemManagmentReportProvince",
label: "تعداد فعالیت ها به تفکیک ایتم",
type: "page",
route: "/dashboard/road-items/reports/items-report",
permissions: [
"show-road-item-supervise-cartable",
"show-road-item-supervise-cartable-province",
"create-road-item",
],
},
{
id: "roadItemManagmentReportItems",
label: "تعداد و حجم فعالیت ها به تفکیک موارد مشاهده شده",
type: "page",
route: "/dashboard/road-items/reports/sub-items-report",
permissions: [
"show-road-item-supervise-cartable",
"show-road-item-supervise-cartable-province",
"create-road-item",
],
},
],
},
],
@@ -220,7 +239,7 @@ export const pageMenu = [
id: "roadPatrolManagmentReport",
label: "گزارش ها",
type: "page",
route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_patrols/report",
route: "/dashboard/road-patrols/reports",
icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
permissions: [
"add-road-patrol",

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

@@ -37,6 +37,8 @@ export const DELETE_ROAD_PATROL_SUPERVISOR = api + "/api/v3/road_patrols/delete"
export const CREATE_PATROL = api + "/api/v3/road_patrols/store";
export const GET_FMS_DATA = api + "/api/v3/fms_vehicle/get_activity";
export const GET_OTP_TOKEN = api + "/v2/get_otp_token";
export const GET_PROVINCE_ACTIVITY_REPORT = api + "/api/v3/road_patrol_reports/province_activity";
export const GET_CITY_ACTIVITY_REPORT = api + "/api/v3/road_patrol_reports/city_activity";
// road items
export const GET_ROAD_ITEMS_SUPERVISOR_LIST = api + "/api/v3/road_items/supervisor_index";
@@ -55,6 +57,10 @@ export const RESTORE_BY_SUPERVISOR = api + "/api/v3/road_items/restore";
export const GET_CAR_LIST_SEARCH = api + "/api/v3/cmms_machines/search";
export const GET_RAHDARANS_LIST_SEARCH = api + "/api/v3/rahdaran/search";
export const GET_OBSERVED_GASHT_LIST = api + "/api/v3/observed_items/filter";
export const GET_PROVINCE_ACTIVITY_PER_ITEM = api + "/api/v3/road_item_reports/province_activity_per_item";
export const GET_CITY_ACTIVITY_PER_ITEM = api + "/api/v3/road_item_reports/city_activity_per_item";
export const GET_PROVINCE_ACTIVITY_PER_SUB_ITEM = api + "/api/v3/road_item_reports/province_activity_per_sub_item";
export const GET_CITY_ACTIVITY_PER_SUB_ITEM = api + "/api/v3/road_item_reports/city_activity_per_sub_item";
// activity code log
export const ACTIVITY_LOG = api + "/api/v3/profile/add_activity";

4
src/core/utils/theme.js
View File

@@ -1,6 +1,6 @@
"use client";
import { createTheme } from "@mui/material";
import { grey } from '@mui/material/colors';
import { grey } from "@mui/material/colors";
const theme = createTheme({
direction: "rtl",
@@ -19,7 +19,7 @@ const theme = createTheme({
},
secondary: {
main: grey[700],
}
},
},
components: {
MuiBackdrop: {

12
src/lib/contexts/DataTable.js
View File

@@ -27,7 +27,17 @@ const DataTableProvider = ({ children, user_id, page_name, table_name, columns,
JSON.stringify(sortData) !== JSON.stringify(initSort) ||
JSON.stringify(filterData) !== JSON.stringify(initFilter);
const CheckFilterValues = Object.values(filterData).every((innerObject) => innerObject.value === "");
const CheckFilterValues = Object.values(filterData).every((innerObject) => {
if (innerObject.datatype === "date" && innerObject.filterMode === "between") {
return (
Array.isArray(innerObject.value) &&
innerObject.value.length === 2 &&
innerObject.value.every((v) => v === "")
);
} else {
return innerObject.value === "";
}
});
const CheckHideValues = Object.values(hideData).every((value) => value === true);
hasAnyConflict =

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

@@ -1,5 +1,4 @@
import { useState, useEffect } from "react";
import axios from "axios";
import { GET_CITY_LISTS } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";