Feature/reports road items

This commit is contained in:
2025-01-19 09:37:25 +00:00
committed by AmirHossein Mahmoodi
parent 897a3b3988
commit e2dacdf448
81 changed files with 2722 additions and 430 deletions

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,5 +33,6 @@ const ActivityCodeLog = memo(({ activity_code }) => {
return null;
});
ActivityCodeLog.displayName = "ActivityCodeLog";
export default ActivityCodeLog;

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: (

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}
/>
);
};

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

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}
/>
);
}}
/>
);
};

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;

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) => {

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,
},
},
}}
/>

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 })}
>

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} />

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}

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],
});
}
},
}}

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">

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">

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: (

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],

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",

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";

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: {