Merge pull request 'feature/missions_table_updates' (#13) from feature/missions_table_updates into develop

Reviewed-on: #13

src/components/dashboard/roadMissions/operator/Actions/Violations/Dialog.jsx

@@ -4,7 +4,7 @@ import ViolationsList from "./ViolationsList";
 
 const ViolationsDialog = ({ open, setOpen, mutate }) => {
     return (
-        <Dialog open={open} fullWidth maxWidth="xs">
+        <Dialog open={open} fullWidth maxWidth="sm">
             <IconButton
                 aria-label="close"
                 onClick={() => setOpen(false)}

src/components/dashboard/roadMissions/operator/Actions/Violations/ViolationsList.jsx

@@ -116,6 +116,54 @@ const ViolationsList = ({ setOpen, mutate }) => {
                 },
                 Cell: ({ row }) => <>{row.original.city_name}</>,
             },
+            {
+                accessorKey: "enter_time",
+                header: "تاریخ و ساعت ورود",
+                id: "enter_time",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 140,
+                Cell: ({ cell }) => {
+                    const value = formatDateTime(cell.getValue());
+
+                    if (!value) return "-";
+
+                    return (
+                        <>
+                            <span className="font-medium">{value.date}</span>
+                            <span> - </span>
+                            <span className="text-xs text-muted-foreground">{value.time}</span>
+                        </>
+                    );
+                },
+            },
+            {
+                accessorKey: "exit_time",
+                header: "تاریخ و ساعت خروج",
+                id: "exit_time",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 140,
+                Cell: ({ cell }) => {
+                    const value = formatDateTime(cell.getValue());
+
+                    if (!value) return "-";
+
+                    return (
+                        <div className="flex flex-col leading-tight">
+                            <span className="font-medium">{value.date}</span>
+                            <span> - </span>
+                            <span className="text-xs text-muted-foreground">{value.time}</span>
+                        </div>
+                    );
+                },
+            },
         ];
     }, []);
 
@@ -139,3 +187,22 @@ const ViolationsList = ({ setOpen, mutate }) => {
     );
 };
 export default ViolationsList;
+
+const formatDateTime = (value) => {
+    if (!value) return null;
+
+    const date = new Date(value.replace(" ", "T"));
+
+    return {
+        date: new Intl.DateTimeFormat("fa-IR", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+        }).format(date),
+
+        time: new Intl.DateTimeFormat("fa-IR", {
+            hour: "2-digit",
+            minute: "2-digit",
+        }).format(date),
+    };
+};

src/components/dashboard/roadMissions/reports/diverReports/RowActions/DriverDetails/Form/DriverDetailsDialog/DriverList/index.jsx

@@ -1,11 +1,51 @@
+import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import { GET_DRIVER_DETAILS } from "@/core/utils/routes";
+import useCities from "@/lib/hooks/useCities";
+import useProvinces from "@/lib/hooks/useProvince";
 import { Box } from "@mui/material";
 import { useMemo } from "react";
 
 const DriverList = ({ row, specialFilter }) => {
-    const columns = useMemo(
-        () => [
+    const columns = useMemo(() => {
+        const dynamicColumns = {
+            header: "استان",
+            id: "province_id",
+            enableColumnFilter: true,
+            datatype: "numeric",
+            filterMode: "equals",
+            grow: false,
+            size: 130,
+            ColumnSelectComponent: (props) => {
+                const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+                const getColumnSelectOptions = useMemo(() => {
+                    if (loadingProvinces) {
+                        return [{ value: "loading", label: "در حال بارگذاری..." }];
+                    }
+                    if (errorProvinces) {
+                        return [{ value: "error", label: "خطا در بارگذاری" }];
+                    }
+                    return [
+                        { value: "", label: "کل کشور" },
+                        ...provinces.map((province) => ({
+                            value: province.id,
+                            label: province.name_fa,
+                        })),
+                    ];
+                }, [provinces, errorProvinces, loadingProvinces]);
+                return (
+                    <CustomSelectByDependency
+                        {...props}
+                        value={loadingProvinces ? "loading" : props.filterParameters.value}
+                        columnSelectOption={getColumnSelectOptions}
+                    />
+                );
+            },
+            Cell: ({ renderedCellValue, row }) => {
+                return <>{row.original.province_name}</>;
+            },
+        };
+        return [
             {
                 accessorKey: "id",
                 header: "کد یکتا",
@@ -17,27 +57,52 @@ const DriverList = ({ row, specialFilter }) => {
                 grow: false,
                 size: 80,
             },
+            ...[dynamicColumns],
             {
-                accessorKey: "province_name",
-                header: "استان",
-                id: "province_name",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
-                grow: false,
-                size: 100,
-            },
-            {
-                accessorKey: "city_name",
                 header: "شهر",
-                id: "city_name",
+                id: "city_id",
                 enableColumnFilter: true,
-                datatype: "text",
+                datatype: "numeric",
                 filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                dependencyId: "province_id",
                 grow: false,
-                size: 100,
+                size: 120,
+                ColumnSelectComponent: (props) => {
+                    const { cityList, loadingCityList, errorCityList } = useCities(props.dependencyFieldValue.value);
+
+                    const getColumnSelectOptions = useMemo(() => {
+                        if (props.dependencyFieldValue.value === "") {
+                            return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
+                        }
+                        if (loadingCityList) {
+                            return [{ value: "loading", label: "در حال بارگذاری..." }];
+                        }
+                        if (errorCityList) {
+                            return [{ value: "error", label: "خطا در بارگذاری" }];
+                        }
+                        return [
+                            { value: "", label: "کل ادارات" },
+                            ...cityList.map((edare) => ({
+                                value: edare.id,
+                                label: edare.name_fa,
+                            })),
+                        ];
+                    }, [cityList, loadingCityList, errorCityList]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue?.value === ""
+                                    ? "empty"
+                                    : loadingCityList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ row }) => <>{row.original.city_name}</>,
             },
             {
                 accessorKey: "station_name",
@@ -83,9 +148,8 @@ const DriverList = ({ row, specialFilter }) => {
                 grow: false,
                 size: 100,
             },
-        ],
-        []
-    );
+        ];
+    }, []);
 
     return (
         <>

src/components/dashboard/roadMissions/reports/machinesReports/RowActions/MissionDitails/Form/MachineMissionsDetailsDialog/MachineMissionsList/index.jsx

@@ -1,11 +1,51 @@
+import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import { GET_MACHINE_MISSIONS_DETAILS } from "@/core/utils/routes";
+import useCities from "@/lib/hooks/useCities";
+import useProvinces from "@/lib/hooks/useProvince";
 import { Box } from "@mui/material";
 import { useMemo } from "react";
 
 const MachineMissionsList = ({ row, specialFilter }) => {
-    const columns = useMemo(
-        () => [
+    const columns = useMemo(() => {
+        const dynamicColumns = {
+            header: "استان",
+            id: "province_id",
+            enableColumnFilter: true,
+            datatype: "numeric",
+            filterMode: "equals",
+            grow: false,
+            size: 130,
+            ColumnSelectComponent: (props) => {
+                const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+                const getColumnSelectOptions = useMemo(() => {
+                    if (loadingProvinces) {
+                        return [{ value: "loading", label: "در حال بارگذاری..." }];
+                    }
+                    if (errorProvinces) {
+                        return [{ value: "error", label: "خطا در بارگذاری" }];
+                    }
+                    return [
+                        { value: "", label: "کل کشور" },
+                        ...provinces.map((province) => ({
+                            value: province.id,
+                            label: province.name_fa,
+                        })),
+                    ];
+                }, [provinces, errorProvinces, loadingProvinces]);
+                return (
+                    <CustomSelectByDependency
+                        {...props}
+                        value={loadingProvinces ? "loading" : props.filterParameters.value}
+                        columnSelectOption={getColumnSelectOptions}
+                    />
+                );
+            },
+            Cell: ({ renderedCellValue, row }) => {
+                return <>{row.original.province_name}</>;
+            },
+        };
+        return [
             {
                 accessorKey: "id",
                 header: "کد یکتا",
@@ -17,27 +57,52 @@ const MachineMissionsList = ({ row, specialFilter }) => {
                 grow: false,
                 size: 80,
             },
+            ...[dynamicColumns],
             {
-                accessorKey: "province_name",
-                header: "استان",
-                id: "province_name",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
-                grow: false,
-                size: 100,
-            },
-            {
-                accessorKey: "city_name",
                 header: "شهر",
-                id: "city_name",
+                id: "city_id",
                 enableColumnFilter: true,
-                datatype: "text",
+                datatype: "numeric",
                 filterMode: "equals",
-                columnFilterModeOptions: ["equals", "contains"],
+                dependencyId: "province_id",
                 grow: false,
-                size: 100,
+                size: 120,
+                ColumnSelectComponent: (props) => {
+                    const { cityList, loadingCityList, errorCityList } = useCities(props.dependencyFieldValue.value);
+
+                    const getColumnSelectOptions = useMemo(() => {
+                        if (props.dependencyFieldValue.value === "") {
+                            return [{ value: "empty", label: "ابتدا استان را انتخاب کنید" }];
+                        }
+                        if (loadingCityList) {
+                            return [{ value: "loading", label: "در حال بارگذاری..." }];
+                        }
+                        if (errorCityList) {
+                            return [{ value: "error", label: "خطا در بارگذاری" }];
+                        }
+                        return [
+                            { value: "", label: "کل ادارات" },
+                            ...cityList.map((edare) => ({
+                                value: edare.id,
+                                label: edare.name_fa,
+                            })),
+                        ];
+                    }, [cityList, loadingCityList, errorCityList]);
+                    return (
+                        <CustomSelectByDependency
+                            {...props}
+                            value={
+                                props.dependencyFieldValue?.value === ""
+                                    ? "empty"
+                                    : loadingCityList
+                                      ? "loading"
+                                      : props.filterParameters.value
+                            }
+                            columnSelectOption={getColumnSelectOptions}
+                        />
+                    );
+                },
+                Cell: ({ row }) => <>{row.original.city_name}</>,
             },
             {
                 accessorKey: "station_name",
@@ -83,9 +148,8 @@ const MachineMissionsList = ({ row, specialFilter }) => {
                 grow: false,
                 size: 100,
             },
-        ],
-        []
-    );
+        ];
+    }, []);
 
     return (
         <>