Resolve #86c24uue0 "Feature/extract images cars roads api "

src/components/dashboard/roadItems/operator/OperatorList.jsx

@@ -156,9 +156,8 @@ const OperatorList = () => {
                 },
             },
             {
-                accessorKey: "files",
+                header: "تصاویر",
-                header: "تصاویر", // Images
+                id: "images",
-                id: "files",
                 enableColumnFilter: false,
                 enableSorting: false,
                 datatype: "array",
@@ -173,23 +172,15 @@ const OperatorList = () => {
                         },
                     },
                 },
-                Cell: ({ renderedCellValue }) => {
+                Cell: ({ renderedCellValue, row }) => {
-                    if (renderedCellValue.length > 0) {
-                        return (
-                            <Stack alignItems={"center"} justifyContent={"center"}>
-                                <ImageDialog images={renderedCellValue} />
-                            </Stack>
-                        );
-                    }
                     return (
-                        <Typography textAlign={"center"} variant="body2">
+                        <Stack alignItems={"center"} justifyContent={"center"}>
-                            بدون تصویر
+                            <ImageDialog rowId={row.getValue("id")} />
-                        </Typography>
+                        </Stack>
                     );
                 },
             },
             {
-                accessorKey: "location",
                 header: "موقعیت", // Location
                 id: "location",
                 enableColumnFilter: false,
@@ -220,8 +211,7 @@ const OperatorList = () => {
                 },
             },
             {
-                accessorKey: "cmms_machines",
+                header: "خودرو ها",
-                header: "خودرو ها", // Car ID
                 id: "cmmsMachines__machine_code",
                 enableColumnFilter: true,
                 datatype: "text",
@@ -239,19 +229,15 @@ const OperatorList = () => {
                         },
                     },
                 },
-                Cell: ({ renderedCellValue }) => {
+                Cell: ({ renderedCellValue, row }) => {
-                    if (renderedCellValue) {
+                    return (
-                        return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
-                            <Stack alignItems={"center"} justifyContent={"center"}>
+                            <MachinesCodeDialog rowId={row.getValue("id")} />
-                                <MachinesCodeDialog machinesLists={renderedCellValue} />
+                        </Stack>
-                            </Stack>
+                    );
-                        );
-                    }
-                    return <Typography variant="body2">خودرویی وجود ندارد</Typography>;
                 },
             },
             {
-                accessorKey: "rahdaran",
                 header: "راهداران",
                 id: "rahdaran__code",
                 enableColumnFilter: true,
@@ -270,10 +256,10 @@ const OperatorList = () => {
                         },
                     },
                 },
-                Cell: ({ renderedCellValue }) => {
+                Cell: ({ renderedCellValue, row }) => {
                     return (
                         <Stack alignItems={"center"} justifyContent={"center"}>
-                            <RahdaranDialog rahdarLists={renderedCellValue} />
+                            <RahdaranDialog rowId={row.getValue("id")} />
                         </Stack>
                     );
                 },

src/components/dashboard/roadItems/operator/RowActions/EditForm/EditController.jsx

@@ -1,19 +1,77 @@
-import { Dialog, DialogTitle } from "@mui/material";
+import { GET_CMMS_MACHINE_ROAD_ITEM, UPDATE_ROAD_ITEMS } from "@/core/utils/routes";
+import { Dialog, DialogTitle, Typography } from "@mui/material";
 import EditFormContent from "./EditFormContent";
-import { UPDATE_ROAD_ITEMS } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";
+import { useEffect, useState } from "react";
+import DialogLoading from "@/core/components/DialogLoading";
 
 const EditController = ({ rowId, mutate, setOpenEditDialog, openEditDialog, row }) => {
-    const requestServer = useRequest({ notificationSuccess: true });
+    const requestServer = useRequest();
+    const [loadingImages, setLoadingImages] = useState(true);
+    const [images, setImages] = useState(null);
+    const [loadingCmmsMachine, setLoadingCmmsMachine] = useState(true);
+    const [cmmsMachine, setCmmsMachine] = useState(null);
+    const [loadingRahdaran, setLoadingRahdaran] = useState(true);
+    const [rahdaran, setRahdaran] = useState(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoadingImages(true);
+                const response = await requestServer(`${GET_IMAGES_ROAD_ITEM}/${rowId}`);
+                setImages(response.data);
+            } catch (error) {
+            } finally {
+                setLoadingImages(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoadingCmmsMachine(true);
+                const response = await requestServer(`${GET_CMMS_MACHINE_ROAD_ITEM}/${rowId}`);
+                setCmmsMachine(response.data);
+            } catch (error) {
+            } finally {
+                setLoadingCmmsMachine(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoadingRahdaran(true);
+                const response = await requestServer(`${GET_RAHDARAN_ROAD_ITEM}/${rowId}`);
+                setRahdaran(response.data);
+            } catch (error) {
+            } finally {
+                setLoadingRahdaran(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
 
     const HandleSubmit = async ({ result }) => {
         const formData = new FormData();
         for (const [key, value] of Object.entries(result)) {
             formData.append(key, value);
         }
-        await requestServer(`${UPDATE_ROAD_ITEMS}/${rowId}`, "post", {
+        await requestServer(
-            data: formData,
+            `${UPDATE_ROAD_ITEMS}/${rowId}`,
-        })
+            "post",
+            {
+                data: formData,
+            },
+            { notificationSuccess: true }
+        )
             .then((response) => {
                 mutate();
                 setOpenEditDialog(false);
@@ -21,34 +79,28 @@ const EditController = ({ rowId, mutate, setOpenEditDialog, openEditDialog, row
             .catch((error) => {});
     };
 
-    return (
+    return loadingImages || loadingCmmsMachine || loadingRahdaran ? (
-        <Dialog
+        <DialogLoading />
-            maxWidth="sm"
+    ) : images && cmmsMachine && rahdaran ? (
-            fullWidth
+        <EditFormContent
-            open={openEditDialog}
+            setOpenEditDialog={setOpenEditDialog}
-            PaperProps={{
+            onSubmit={HandleSubmit}
-                sx: {
+            defaultData={{
-                    boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                before_image: images.before_image || null,
-                },
+                after_image: images.after_image || null,
+                item_id: row.original?.item || null,
+                sub_item_id: row.original?.sub_item || null,
+                amount: row.original?.sub_item_data || null,
+                start_point: { lat: row.original?.start_lat || "", lng: row.original?.start_lng || "" },
+                end_point: { lat: row.original?.end_lat || "", lng: row.original?.end_lng || "" },
+                cmms_machines: cmmsMachine || null,
+                rahdaran_id: rahdaran.rahdaran_id || null,
             }}
-        >
+        />
-            <DialogTitle>ویرایش اطلاعات</DialogTitle>
+    ) : (
-            <EditFormContent
+        <Typography textAlign={"center"} sx={{ py: 4 }}>
-                setOpenEditDialog={setOpenEditDialog}
+            تمامی اطلاعات یافت نشد!
-                onSubmit={HandleSubmit}
+        </Typography>
-                defaultData={{
-                    before_image: row.original?.files[0]?.full_path_for_fast_react || null,
-                    after_image: row.original?.files[1]?.full_path_for_fast_react || null,
-                    item_id: row.original?.item || null,
-                    sub_item_id: row.original?.sub_item || null,
-                    amount: row.original?.sub_item_data || null,
-                    start_point: { lat: row.original?.start_lat || "", lng: row.original?.start_lng || "" },
-                    end_point: { lat: row.original?.end_lat || "", lng: row.original?.end_lng || "" },
-                    cmms_machines: row.original?.cmms_machines || null,
-                    rahdaran_id: row.original?.rahdaran || null,
-                }}
-            />
-        </Dialog>
     );
 };
 export default EditController;

src/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormContent.jsx

@@ -1,7 +1,6 @@
-import { LinearProgress, Typography } from "@mui/material";
-import React from "react";
-import useRoadItemGetISubtems from "@/lib/hooks/useRoadItemGetISubtems";
 import EditFormCreate from "@/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormCreate";
+import useRoadItemGetISubtems from "@/lib/hooks/useRoadItemGetISubtems";
+import { LinearProgress, Typography } from "@mui/material";
 
 const EditFormContent = ({ setOpenEditDialog, onSubmit, defaultData, is_gasht }) => {
     const { subItemsList, loadingSubItemsList, errorSubItemsList } = useRoadItemGetISubtems(defaultData?.item_id);

src/components/dashboard/roadItems/operator/RowActions/EditForm/index.jsx

@@ -19,13 +19,27 @@ const EditForm = ({ row, mutate, rowId }) => {
                     <BorderColorIcon />
                 </IconButton>
             </Tooltip>
-            <EditController
+            <Dialog
-                openEditDialog={openEditDialog}
+                maxWidth="sm"
-                setOpenEditDialog={setOpenEditDialog}
+                fullWidth
-                rowId={rowId}
+                open={openEditDialog}
-                row={row}
+                PaperProps={{
-                mutate={mutate}
+                    sx: {
-            />
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+            >
+                <DialogTitle>ویرایش اطلاعات</DialogTitle>
+                {openEditDialog && (
+                    <EditController
+                        openEditDialog={openEditDialog}
+                        setOpenEditDialog={setOpenEditDialog}
+                        rowId={rowId}
+                        row={row}
+                        mutate={mutate}
+                    />
+                )}
+            </Dialog>
         </>
     );
 };

src/components/dashboard/roadItems/operator/RowActions/ImageForm/ImagesContent.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import ImageFormContent from "./ImageFormContent";
+import DialogLoading from "@/core/components/DialogLoading";
+import useRequest from "@/lib/hooks/useRequest";
+import { GET_IMAGES_ROAD_ITEM } from "@/core/utils/routes";
+import { Typography } from "@mui/material";
+
+const ImagesContent = ({ rowId }) => {
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState(null);
+    const request = useRequest();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await request(`${GET_IMAGES_ROAD_ITEM}/${rowId}`);
+                setData(response.data.data);
+            } catch (error) {
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
+
+    return (
+        <>
+            {loading ? (
+                <DialogLoading />
+            ) : data ? (
+                <>
+                    <ImageFormContent image={data[1].full_path_for_fast_react} title={"قبل از اقدام"} />
+                    <ImageFormContent image={data[0].full_path_for_fast_react} title={"بعد از اقدام"} />
+                </>
+            ) : (
+                <Typography textAlign={"center"}>تصویری در سامانه یافت نشد</Typography>
+            )}
+        </>
+    );
+};
+export default ImagesContent;

src/components/dashboard/roadItems/operator/RowActions/ImageForm/index.jsx

@@ -1,9 +1,9 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Tooltip } from "@mui/material";
-import { useState } from "react";
 import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
-import ImageFormContent from "./ImageFormContent";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import ImagesContent from "./ImagesContent";
 
-const ImageDialog = ({ images }) => {
+const ImageDialog = ({ rowId }) => {
     const [openImageDialog, setOpenImageDialog] = useState(false);
 
     return (
@@ -26,12 +26,7 @@ const ImageDialog = ({ images }) => {
                 scroll="paper"
             >
                 <DialogTitle sx={{ fontSize: "large" }}>تصاویر</DialogTitle>
-                <DialogContent>
+                <DialogContent>{openImageDialog && <ImagesContent rowId={rowId} />}</DialogContent>
-                    <Paper elevation={0}>
-                        <ImageFormContent image={images[1]?.full_path_for_fast_react} title={"قبل از اقدام"} />
-                        <ImageFormContent image={images[0]?.full_path_for_fast_react} title={"بعد از اقدام"} />
-                    </Paper>
-                </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">
                         بستن

src/components/dashboard/roadItems/operator/RowActions/MachinesCodeForm/MachinesCodeContent.jsx

@@ -1,23 +1,45 @@
-import { DialogContent, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import DialogLoading from "@/core/components/DialogLoading";
 import ShowPlak from "@/core/components/ShowPlak";
+import { GET_CMMS_MACHINE_ROAD_ITEM } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import {
+    DialogContent,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Typography,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+
+const MachinesCodeContent = ({ rowId }) => {
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState(null);
+    const request = useRequest();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await request(`${GET_CMMS_MACHINE_ROAD_ITEM}/${rowId}`);
+                setData(response.data.data);
+            } catch (error) {
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
 
-const MachinesCodeContent = ({ machinesLists }) => {
     return (
         <>
             <DialogContent>
-                <Paper
+                {loading ? (
-                    elevation={0}
+                    <DialogLoading />
-                    sx={{
+                ) : data ? (
-                        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>
@@ -28,7 +50,7 @@ const MachinesCodeContent = ({ machinesLists }) => {
                                 </TableRow>
                             </TableHead>
                             <TableBody>
-                                {machinesLists.map((machine) => {
+                                {data.map((machine) => {
                                     return (
                                         <TableRow
                                             key={machine.id}
@@ -47,7 +69,9 @@ const MachinesCodeContent = ({ machinesLists }) => {
                             </TableBody>
                         </Table>
                     </TableContainer>
-                </Paper>
+                ) : (
+                    <Typography textAlign={"center"}>اطلاعات خودرویی در سامانه یافت نشد</Typography>
+                )}
             </DialogContent>
         </>
     );

src/components/dashboard/roadItems/operator/RowActions/MachinesCodeForm/index.jsx

@@ -3,7 +3,7 @@ import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
 import { useState } from "react";
 import MachinesCodeContent from "./MachinesCodeContent";
 
-const MachinesCodeDialog = ({ machinesLists }) => {
+const MachinesCodeDialog = ({ rowId }) => {
     const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
     return (
         <>
@@ -25,7 +25,7 @@ const MachinesCodeDialog = ({ machinesLists }) => {
                 maxWidth={"md"}
             >
                 <DialogTitle sx={{ fontSize: "large" }}>خودرو ها</DialogTitle>
-                <MachinesCodeContent machinesLists={machinesLists} />
+                {openMachinesCodeDialog && <MachinesCodeContent rowId={rowId} />}
                 <DialogActions>
                     <Button
                         onClick={() => setOpenMachinesCodeDialog(false)}

src/components/dashboard/roadItems/operator/RowActions/RahdaranForm/RahdaranContent.jsx

@@ -1,22 +1,44 @@
-import { DialogContent, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import DialogLoading from "@/core/components/DialogLoading";
+import { GET_RAHDARAN_ROAD_ITEM } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import {
+    DialogContent,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Typography,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+
+const RahdaranContent = ({ rowId }) => {
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState(null);
+    const request = useRequest();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await request(`${GET_RAHDARAN_ROAD_ITEM}/${rowId}`);
+                setData(response.data.data);
+            } catch (error) {
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
 
-const RahdaranContent = ({ rahdarLists }) => {
     return (
         <>
             <DialogContent>
-                <Paper
+                {loading ? (
-                    elevation={0}
+                    <DialogLoading />
-                    sx={{
+                ) : data ? (
-                        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>
@@ -26,7 +48,7 @@ const RahdaranContent = ({ rahdarLists }) => {
                                 </TableRow>
                             </TableHead>
                             <TableBody>
-                                {rahdarLists.map((rahdar) => {
+                                {data.map((rahdar) => {
                                     return (
                                         <TableRow
                                             key={rahdar.id}
@@ -40,7 +62,9 @@ const RahdaranContent = ({ rahdarLists }) => {
                             </TableBody>
                         </Table>
                     </TableContainer>
-                </Paper>
+                ) : (
+                    <Typography textAlign={"center"}>اطلاعات راهداران در سامانه یافت نشد</Typography>
+                )}
             </DialogContent>
         </>
     );

src/components/dashboard/roadItems/operator/RowActions/RahdaranForm/index.jsx

@@ -3,7 +3,7 @@ import GroupsIcon from "@mui/icons-material/Groups";
 import { useState } from "react";
 import RahdaranContent from "./RahdaranContent";
 
-const RahdaranDialog = ({ rahdarLists }) => {
+const RahdaranDialog = ({ rowId }) => {
     const [openRahdaranDialog, setOpenRahdaranDialog] = useState(false);
     return (
         <>
@@ -25,7 +25,7 @@ const RahdaranDialog = ({ rahdarLists }) => {
                 maxWidth={"md"}
             >
                 <DialogTitle sx={{ fontSize: "large" }}>لیست راهداران</DialogTitle>
-                <RahdaranContent rahdarLists={rahdarLists} />
+                {openRahdaranDialog && <RahdaranContent rowId={rowId} />}
                 <DialogActions>
                     <Button onClick={() => setOpenRahdaranDialog(false)} variant="outlined" color="secondary" autoFocus>
                         بستن

src/components/dashboard/roadItems/supervisor/RowActions/ImageForm/ImagesContent.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import ImageFormContent from "./ImageFormContent";
+import DialogLoading from "@/core/components/DialogLoading";
+import useRequest from "@/lib/hooks/useRequest";
+import { GET_IMAGES_ROAD_ITEM } from "@/core/utils/routes";
+import { Typography } from "@mui/material";
+
+const ImagesContent = ({ rowId }) => {
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState(null);
+    const request = useRequest();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await request(`${GET_IMAGES_ROAD_ITEM}/${rowId}`);
+                setData(response.data.data);
+            } catch (error) {
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
+
+    return (
+        <>
+            {loading ? (
+                <DialogLoading />
+            ) : data ? (
+                <>
+                    <ImageFormContent image={data[1].full_path_for_fast_react} title={"قبل از اقدام"} />
+                    <ImageFormContent image={data[0].full_path_for_fast_react} title={"بعد از اقدام"} />
+                </>
+            ) : (
+                <Typography textAlign={"center"}>تصویری در سامانه یافت نشد</Typography>
+            )}
+        </>
+    );
+};
+export default ImagesContent;

src/components/dashboard/roadItems/supervisor/RowActions/ImageForm/index.jsx

@@ -1,9 +1,9 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Tooltip } from "@mui/material";
-import { useState } from "react";
 import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
-import ImageFormContent from "./ImageFormContent";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import ImagesContent from "./ImagesContent";
 
-const ImageDialog = ({ images }) => {
+const ImageDialog = ({ rowId }) => {
     const [openImageDialog, setOpenImageDialog] = useState(false);
 
     return (
@@ -26,12 +26,7 @@ const ImageDialog = ({ images }) => {
                 scroll="paper"
             >
                 <DialogTitle sx={{ fontSize: "large" }}>تصاویر</DialogTitle>
-                <DialogContent>
+                <DialogContent>{openImageDialog && <ImagesContent rowId={rowId} />}</DialogContent>
-                    <Paper elevation={0}>
-                        <ImageFormContent image={images[1]?.full_path_for_fast_react} title={"قبل از اقدام"} />
-                        <ImageFormContent image={images[0]?.full_path_for_fast_react} title={"بعد از اقدام"} />
-                    </Paper>
-                </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">
                         بستن

src/components/dashboard/roadItems/supervisor/RowActions/MachinesCodeForm/MachinesCodeContent.jsx

@@ -1,23 +1,45 @@
-import { DialogContent, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import DialogLoading from "@/core/components/DialogLoading";
 import ShowPlak from "@/core/components/ShowPlak";
+import { GET_CMMS_MACHINE_ROAD_ITEM } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import {
+    DialogContent,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Typography,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+
+const MachinesCodeContent = ({ rowId }) => {
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState(null);
+    const request = useRequest();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await request(`${GET_CMMS_MACHINE_ROAD_ITEM}/${rowId}`);
+                setData(response.data.data);
+            } catch (error) {
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
 
-const MachinesCodeContent = ({ machinesLists }) => {
     return (
         <>
             <DialogContent>
-                <Paper
+                {loading ? (
-                    elevation={0}
+                    <DialogLoading />
-                    sx={{
+                ) : data ? (
-                        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>
@@ -28,7 +50,7 @@ const MachinesCodeContent = ({ machinesLists }) => {
                                 </TableRow>
                             </TableHead>
                             <TableBody>
-                                {machinesLists.map((machine) => {
+                                {data.map((machine) => {
                                     return (
                                         <TableRow
                                             key={machine.id}
@@ -47,7 +69,9 @@ const MachinesCodeContent = ({ machinesLists }) => {
                             </TableBody>
                         </Table>
                     </TableContainer>
-                </Paper>
+                ) : (
+                    <Typography textAlign={"center"}>اطلاعات خودرویی در سامانه یافت نشد</Typography>
+                )}
             </DialogContent>
         </>
     );

src/components/dashboard/roadItems/supervisor/RowActions/MachinesCodeForm/index.jsx

@@ -3,7 +3,7 @@ import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
 import { useState } from "react";
 import MachinesCodeContent from "./MachinesCodeContent";
 
-const MachinesCodeDialog = ({ machinesLists }) => {
+const MachinesCodeDialog = ({ rowId }) => {
     const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
     return (
         <>
@@ -25,7 +25,7 @@ const MachinesCodeDialog = ({ machinesLists }) => {
                 maxWidth={"md"}
             >
                 <DialogTitle sx={{ fontSize: "large" }}>خودرو ها</DialogTitle>
-                <MachinesCodeContent machinesLists={machinesLists} />
+                {openMachinesCodeDialog && <MachinesCodeContent rowId={rowId} />}
                 <DialogActions>
                     <Button
                         onClick={() => setOpenMachinesCodeDialog(false)}

src/components/dashboard/roadItems/supervisor/RowActions/RahdaranForm/RahdaranContent.jsx

@@ -1,22 +1,44 @@
-import { DialogContent, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import DialogLoading from "@/core/components/DialogLoading";
+import { GET_RAHDARAN_ROAD_ITEM } from "@/core/utils/routes";
+import useRequest from "@/lib/hooks/useRequest";
+import {
+    DialogContent,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Typography,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+
+const RahdaranContent = ({ rowId }) => {
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState(null);
+    const request = useRequest();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                setLoading(true);
+                const response = await request(`${GET_RAHDARAN_ROAD_ITEM}/${rowId}`);
+                setData(response.data.data);
+            } catch (error) {
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [rowId]);
 
-const RahdaranContent = ({ rahdarLists }) => {
     return (
         <>
             <DialogContent>
-                <Paper
+                {loading ? (
-                    elevation={0}
+                    <DialogLoading />
-                    sx={{
+                ) : data ? (
-                        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>
@@ -26,7 +48,7 @@ const RahdaranContent = ({ rahdarLists }) => {
                                 </TableRow>
                             </TableHead>
                             <TableBody>
-                                {rahdarLists.map((rahdar) => {
+                                {data.map((rahdar) => {
                                     return (
                                         <TableRow
                                             key={rahdar.id}
@@ -40,7 +62,9 @@ const RahdaranContent = ({ rahdarLists }) => {
                             </TableBody>
                         </Table>
                     </TableContainer>
-                </Paper>
+                ) : (
+                    <Typography textAlign={"center"}>اطلاعات راهداران در سامانه یافت نشد</Typography>
+                )}
             </DialogContent>
         </>
     );

src/components/dashboard/roadItems/supervisor/RowActions/RahdaranForm/index.jsx

@@ -3,7 +3,7 @@ import GroupsIcon from "@mui/icons-material/Groups";
 import { useState } from "react";
 import RahdaranContent from "./RahdaranContent";
 
-const RahdaranDialog = ({ rahdarLists }) => {
+const RahdaranDialog = ({ rowId }) => {
     const [openRahdaranDialog, setOpenRahdaranDialog] = useState(false);
     return (
         <>
@@ -25,7 +25,7 @@ const RahdaranDialog = ({ rahdarLists }) => {
                 maxWidth={"md"}
             >
                 <DialogTitle sx={{ fontSize: "large" }}>لیست راهداران</DialogTitle>
-                <RahdaranContent rahdarLists={rahdarLists} />
+                {openRahdaranDialog && <RahdaranContent rowId={rowId} />}
                 <DialogActions>
                     <Button onClick={() => setOpenRahdaranDialog(false)} variant="outlined" color="secondary" autoFocus>
                         بستن

src/components/dashboard/roadItems/supervisor/SupervisorList.jsx

@@ -6,14 +6,14 @@ import { GET_ROAD_ITEMS_SUPERVISOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
 import LocationForm from "./RowActions/LocationForm";
-import ImageDialog from "./RowActions/ImageForm";
+import ImageDialog from "../operator/RowActions/ImageForm";
-import RahdaranDialog from "./RowActions/RahdaranForm";
+import RahdaranDialog from "../operator/RowActions/RahdaranForm";
 import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import useProvinces from "@/lib/hooks/useProvince";
 import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
 import useRoadItemGetSubItems from "@/lib/hooks/useRoadItemGetISubtems";
 import useEdaratLists from "@/lib/hooks/useEdaratLists";
-import MachinesCodeDialog from "./RowActions/MachinesCodeForm";
+import MachinesCodeDialog from "../operator/RowActions/MachinesCodeForm";
 import { usePermissions } from "@/lib/hooks/usePermissions";
 import { useAuth } from "@/lib/contexts/auth";
 
@@ -29,8 +29,7 @@ const SupervisorList = () => {
     const { user } = useAuth();
     const columns = useMemo(() => {
         const dynamicColumns = {
-            accessorKey: "province_id",
+            header: "استان",
-            header: "استان", // Province
             id: "province_id",
             enableColumnFilter: true,
             datatype: "numeric",
@@ -79,7 +78,6 @@ const SupervisorList = () => {
             },
             ...(hasCountryPermission ? [dynamicColumns] : []),
             {
-                accessorKey: "edarat_id",
                 header: "اداره", // Office
                 id: "edarat_id",
                 enableColumnFilter: true,
@@ -137,7 +135,6 @@ const SupervisorList = () => {
                 Cell: ({ renderedCellValue, row }) => <>{row.original.edarat_name}</>,
             },
             {
-                accessorKey: "item",
                 header: "آیتم فعالیت",
                 id: "item",
                 enableColumnFilter: true,
@@ -177,7 +174,6 @@ const SupervisorList = () => {
                 },
             },
             {
-                accessorKey: "sub_item",
                 header: "اقدام انجام شده",
                 id: "sub_item",
                 enableColumnFilter: true,
@@ -233,7 +229,6 @@ const SupervisorList = () => {
                 },
             },
             {
-                accessorKey: "value",
                 header: "مقدار", // Value
                 id: "value",
                 enableColumnFilter: false,
@@ -257,9 +252,8 @@ const SupervisorList = () => {
                 },
             },
             {
-                accessorKey: "files",
+                header: "تصاویر",
-                header: "تصاویر", // Images
+                id: "images",
-                id: "files",
                 enableColumnFilter: false,
                 enableSorting: false,
                 datatype: "array",
@@ -274,23 +268,15 @@ const SupervisorList = () => {
                         },
                     },
                 },
-                Cell: ({ renderedCellValue }) => {
+                Cell: ({ renderedCellValue, row }) => {
-                    if (renderedCellValue.length > 0) {
-                        return (
-                            <Stack alignItems={"center"} justifyContent={"center"}>
-                                <ImageDialog images={renderedCellValue} />
-                            </Stack>
-                        );
-                    }
                     return (
-                        <Typography textAlign={"center"} variant="body2">
+                        <Stack alignItems={"center"} justifyContent={"center"}>
-                            بدون تصویر
+                            <ImageDialog rowId={row.getValue("id")} />
-                        </Typography>
+                        </Stack>
                     );
                 },
             },
             {
-                accessorKey: "location",
                 header: "موقعیت", // Location
                 id: "location",
                 enableColumnFilter: false,
@@ -321,8 +307,7 @@ const SupervisorList = () => {
                 },
             },
             {
-                accessorKey: "cmms_machines",
+                header: "خودرو ها",
-                header: "خودرو ها", // Car ID
                 id: "cmmsMachines__machine_code",
                 enableColumnFilter: true,
                 datatype: "text",
@@ -340,19 +325,15 @@ const SupervisorList = () => {
                         },
                     },
                 },
-                Cell: ({ renderedCellValue }) => {
+                Cell: ({ renderedCellValue, row }) => {
-                    if (renderedCellValue) {
+                    return (
-                        return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
-                            <Stack alignItems={"center"} justifyContent={"center"}>
+                            <MachinesCodeDialog rowId={row.getValue("id")} />
-                                <MachinesCodeDialog machinesLists={renderedCellValue} />
+                        </Stack>
-                            </Stack>
+                    );
-                        );
-                    }
-                    return <Typography variant="body2">خودرویی وجود ندارد</Typography>;
                 },
             },
             {
-                accessorKey: "rahdaran",
                 header: "راهداران",
                 id: "rahdaran__code",
                 enableColumnFilter: true,
@@ -371,15 +352,12 @@ const SupervisorList = () => {
                         },
                     },
                 },
-                Cell: ({ renderedCellValue }) => {
+                Cell: ({ renderedCellValue, row }) => {
-                    if (renderedCellValue) {
+                    return (
-                        return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
-                            <Stack alignItems={"center"} justifyContent={"center"}>
+                            <RahdaranDialog rowId={row.getValue("id")} />
-                                <RahdaranDialog rahdarLists={renderedCellValue} />
+                        </Stack>
-                            </Stack>
+                    );
-                        );
-                    }
-                    return <Typography variant="body2">بدون شخص</Typography>;
                 },
             },
             {
@@ -403,7 +381,6 @@ const SupervisorList = () => {
                 size: 100,
             },
             {
-                accessorKey: "status",
                 header: "وضعیت نظارت",
                 id: "status",
                 enableColumnFilter: true,
@@ -421,7 +398,7 @@ const SupervisorList = () => {
                 Cell: ({ renderedCellValue, row }) => <>{row.original.status_fa}</>,
             },
         ];
-    }, []);
+    }, [hasCountryPermission]);
 
     return (
         <>

src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx

@@ -257,7 +257,7 @@ const SupervisorList = () => {
                 ),
             },
         ];
-    }, []);
+    }, [hasCountryPermission]);
 
     return (
         <>

src/core/utils/routes.js

@@ -75,6 +75,9 @@ export const GET_PROVINCE_ACTIVITY_PER_ITEM = api + "/api/v3/road_item_reports/c
 export const GET_CITY_ACTIVITY_PER_ITEM = api + "/api/v3/road_item_reports/province_activity_per_item";
 export const GET_PROVINCE_ACTIVITY_PER_SUB_ITEM = api + "/api/v3/road_item_reports/country_activity_per_sub_item";
 export const GET_CITY_ACTIVITY_PER_SUB_ITEM = api + "/api/v3/road_item_reports/province_activity_per_sub_item";
+export const GET_IMAGES_ROAD_ITEM = api + "/api/v3/road_items/files";
+export const GET_CMMS_MACHINE_ROAD_ITEM = api + "/api/v3/road_items/machines";
+export const GET_RAHDARAN_ROAD_ITEM = api + "/api/v3/road_items/rahdaran";
 
 // damage items
 export const GET_RECEIPT_DAMAGE_ITEMS_LIST = api + "/api/v3/damages";