implemented machines reports

jsconfig.json

@@ -1,27 +1,27 @@
 // javascript for production
-// {
-//     "compilerOptions": {
-//         "paths": {
-//             "@/*": ["./src/*"],
-//             "^/*": ["./public/*"]
-//         }
-//     }
-// }
-
-// typescript for local development
 {
     "compilerOptions": {
-        "jsx": "react-jsx",
-        "noUnusedLocals": true,
-        "noImplicitAny": false,
-        "checkJs": true,
-        "allowJs": true,
-        "strict": true,
-        "baseUrl": ".",
         "paths": {
             "@/*": ["./src/*"],
             "^/*": ["./public/*"]
         }
-    },
-    "exclude": ["node_modules"]
+    }
 }
+
+// typescript for local development
+// {
+//     "compilerOptions": {
+//         "jsx": "react-jsx",
+//         "noUnusedLocals": true,
+//         "noImplicitAny": false,
+//         "checkJs": true,
+//         "allowJs": true,
+//         "strict": true,
+//         "baseUrl": ".",
+//         "paths": {
+//             "@/*": ["./src/*"],
+//             "^/*": ["./public/*"]
+//         }
+//     },
+//     "exclude": ["node_modules"]
+// }

src/components/dashboard/roadMissions/reports/machinesReports/MachinesReportsList.jsx

@@ -3,6 +3,7 @@ import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import { Box } from "@mui/material";
 import { useMemo } from "react";
 import Toolbar from "./Toolbar";
+import RowActions from "./RowActions";
 
 const MachinesReportsList = ({ data, specialFilter }) => {
     const columns = useMemo(() => {
@@ -70,6 +71,8 @@ const MachinesReportsList = ({ data, specialFilter }) => {
                 table_name={"roadMissionReportList"}
                 enablePagination={false}
                 specialFilter={specialFilter}
+                enableRowActions
+                RowActions={RowActions}
             />
         </Box>
     );

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

@@ -0,0 +1,106 @@
+import DataTableWithAuth from "@/core/components/DataTableWithAuth";
+import { GET_MACHINE_MISSIONS_DETAILS } from "@/core/utils/routes";
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+
+const MachineMissionsList = ({ row }) => {
+    const columns = useMemo(
+        () => [
+            {
+                accessorKey: "id",
+                header: "کد یکتا",
+                id: "id",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 80,
+            },
+            {
+                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",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "station_name",
+                header: "راهدارخانه",
+                id: "station_name",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "driver_name",
+                header: "راننده",
+                id: "driver_name",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "km",
+                header: "کیلومتر شروع",
+                id: "km",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+            {
+                accessorKey: "end_km",
+                header: "کیلومتر پایان",
+                id: "end_km",
+                enableColumnFilter: true,
+                datatype: "text",
+                filterMode: "equals",
+                columnFilterModeOptions: ["equals", "contains"],
+                grow: false,
+                size: 100,
+            },
+        ],
+        []
+    );
+
+    return (
+        <>
+            <Box sx={{ mt: 3 }}>
+                <DataTableWithAuth
+                    need_filter={true}
+                    columns={columns}
+                    sorting={[{ id: "id", desc: true }]}
+                    table_url={`${GET_MACHINE_MISSIONS_DETAILS}?machine_id=${row.machine_id}`}
+                    page_name={"roadMissionsTransportation"}
+                    table_name={"roadMissionsTransportationMachinesList"}
+                    positionActionsColumn={"first"}
+                />
+            </Box>
+        </>
+    );
+};
+export default MachineMissionsList;

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

@@ -0,0 +1,27 @@
+import { Box, Button, DialogActions, DialogContent } from "@mui/material";
+import { Stack } from "@mui/system";
+import MachineMissionsList from "./MachineMissionsDetailsDialog/MachineMissionsList";
+
+const MachineMissionsDetailsTable = ({ row, setOpenMachineMissionsDetails }) => {
+    return (
+        <>
+            <DialogContent dividers>
+                <Box sx={{ flex: 1 }}>
+                    <Stack spacing={3}>
+                        <Stack spacing={2}>
+                            <MachineMissionsList row={row} />
+                        </Stack>
+                    </Stack>
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>
+                <Stack direction={"row"} spacing={1}>
+                    <Button onClick={() => setOpenMachineMissionsDetails(false)} variant="outlined" color="primary">
+                        بستن
+                    </Button>
+                </Stack>
+            </DialogActions>
+        </>
+    );
+};
+export default MachineMissionsDetailsTable;

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

@@ -0,0 +1,47 @@
+import { Close, RemoveRedEye } from "@mui/icons-material";
+import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import MachineMissionsDetailsTable from "./Form";
+
+const MissionDetails = ({ row }) => {
+    const [openMachineMissionsDetails, setOpenMachineMissionsDetails] = useState(false);
+
+    return (
+        <>
+            <Tooltip title="ریزگزارشات" arrow placement="right">
+                <IconButton
+                    color="primary"
+                    sx={{ textTransform: "unset", alignSelf: "center" }}
+                    onClick={() => {
+                        setOpenMachineMissionsDetails(true);
+                    }}
+                >
+                    <RemoveRedEye />
+                </IconButton>
+            </Tooltip>
+            <Dialog open={openMachineMissionsDetails} fullWidth maxWidth="md">
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenMachineMissionsDetails(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <Close />
+                </IconButton>
+                <DialogTitle>ریز گزارشات خودرو</DialogTitle>
+                {openMachineMissionsDetails && (
+                    <MachineMissionsDetailsTable
+                        row={row.original}
+                        setOpenMachineMissionsDetails={setOpenMachineMissionsDetails}
+                    />
+                )}
+            </Dialog>
+        </>
+    );
+};
+export default MissionDetails;

src/components/dashboard/roadMissions/reports/machinesReports/RowActions/RouteDetail/ShowRoute.jsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from "react";
+import { Marker, Polyline, useMap } from "react-leaflet";
+import L from "leaflet";
+import polyline from "@mapbox/polyline";
+import SourceIcon from "@/assets/images/source-icon.svg";
+import DestIcon from "@/assets/images/destination-icon.svg";
+
+const ShowRoute = ({ area }) => {
+    const map = useMap();
+    const defaultIconSize = [35, 35];
+
+    const createCustomIcon = (size, iconUrl) => {
+        return L.icon({
+            iconUrl: iconUrl,
+            iconSize: size,
+            iconAnchor: [size[0] / 2, size[1]],
+            popupAnchor: [0, -size[1]],
+        });
+    };
+
+    useEffect(() => {
+        if (coords.length > 0) {
+            map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
+        }
+    }, [area]);
+    const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
+    const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
+
+    if (!area) return null;
+    const coords = polyline.decode(area, 6);
+
+    if (coords.length === 0) return null;
+
+    const sourcePosition = coords[0];
+    const destPosition = coords[coords.length - 1];
+
+    return (
+        <>
+            <Polyline positions={coords} color="#015688" weight={7} opacity={1} />
+            <Marker position={sourcePosition} icon={sourceIcon} />
+            <Marker position={destPosition} icon={destIcon} />
+        </>
+    );
+};
+
+export default ShowRoute;

src/components/dashboard/roadMissions/reports/machinesReports/RowActions/RouteDetail/index.jsx

@@ -0,0 +1,57 @@
+import { Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { useState } from "react";
+import MapIcon from "@mui/icons-material/Map";
+import MapLayer from "@/core/components/MapLayer";
+import ShowRoute from "./ShowRoute";
+
+const RouteDetail = ({ encoded_route }) => {
+    const [openRouteDetailDialog, setOpenRouteDetailDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title="مسیر انتخابی">
+                <IconButton color="primary" onClick={() => setOpenRouteDetailDialog(true)}>
+                    <MapIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                fullWidth
+                open={openRouteDetailDialog}
+                onClose={() => setOpenRouteDetailDialog(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={"sm"}
+            >
+                <DialogTitle sx={{ fontSize: "large" }}>مسیر انتخابی</DialogTitle>
+                <Box sx={{ mx: 1, borderRadius: "5px" }}>
+                    <Box
+                        sx={{
+                            width: "100%",
+                            height: "300px",
+                            border: "1px solid #e1e1e1",
+                            borderRadius: "5px",
+                        }}
+                    >
+                        <MapLayer style={{ borderRadius: "4px" }}>
+                            <ShowRoute area={encoded_route} />
+                        </MapLayer>
+                    </Box>
+                </Box>
+                <DialogActions>
+                    <Button
+                        onClick={() => setOpenRouteDetailDialog(false)}
+                        variant="outlined"
+                        color="secondary"
+                        autoFocus
+                    >
+                        بستن
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default RouteDetail;

src/components/dashboard/roadMissions/reports/machinesReports/RowActions/index.jsx

@@ -0,0 +1,6 @@
+import MissionDetails from "./MissionDitails";
+
+const RowActions = ({ row }) => {
+    return <MissionDetails row={row} />;
+};
+export default RowActions;

src/core/utils/routes.js

@@ -291,3 +291,4 @@ export const GET_PROVINCES_LIST = api + "/api/v3/provinces/list";
 export const GET_CITIES_LIST = api + "/api/v3/cities/list";
 export const GET_STATIONS_LIST = api + "/api/v3/road_maintenance_station";
 export const UPDATE_MACHINE_STATUS_AND_LOCATION = api + "/api/v3/cmms_machines";
+export const GET_MACHINE_MISSIONS_DETAILS = api + "/api/v3/missions/report_machine/machine_details_report";