Merge branch 'feature/gasht_cartables' into 'develop'

Feature/gasht cartables

See merge request witel-front-end/rms!48

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

@@ -1,11 +1,12 @@
 "use client";
 import { useMemo } from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import Toolbar from "./Toolbar";
 import { GET_ROAD_PATROL_OPERATOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
+import ReportForm from "./RowActions/ReportForm";
 
 const OperatorList = () => {
     const columns = useMemo(
@@ -81,6 +82,29 @@ const OperatorList = () => {
                 grow: false,
                 size: 100,
             },
+            {
+                header: "گزارش مامور",
+                enableColumnFilter: false,
+                datatype: "text",
+                grow: false,
+                size: 100,
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue, row }) => {
+                    return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <ReportForm rowId={row.getValue("id")} />
+                        </Stack>
+                    );
+                },
+            },
         ],
         []
     );
@@ -89,7 +113,6 @@ const OperatorList = () => {
         <>
             <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
                 <DataTableWithAuth
-                    table_title={"عملیات"}
                     need_filter={true}
                     columns={columns}
                     sorting={[{ id: "id", desc: true }]}

src/components/dashboard/roadPatrols/operator/RowActions/ReportForm/index.jsx

@@ -2,8 +2,7 @@ import { Tooltip, IconButton } from "@mui/material";
 import PrintIcon from "@mui/icons-material/Print";
 
 const ReportForm = ({ rowId }) => {
-    const reportUrl = "https://rms.rmto.ir/v2/road_patrols/operator/report/96872"; // TODO replace id here
+    const reportUrl = `https://rms.rmto.ir/v2/road_patrols/operator/report/${rowId}`;
-
     return (
         <Tooltip title="گزارش" arrow placement="right">
             <IconButton

src/components/dashboard/roadPatrols/operator/RowActions/index.jsx

@@ -1,11 +1,6 @@
 import { Box } from "@mui/material";
-import ReportForm from "./ReportForm";
 
 const RowActions = ({ row }) => {
-    return (
+    return <Box sx={{ display: "flex", gap: 1 }}></Box>;
-        <Box sx={{ display: "flex", gap: 1 }}>
-            <ReportForm rowId={row.getValue("id")} />
-        </Box>
-    );
 };
 export default RowActions;

src/components/dashboard/roadPatrols/supervisor/RowActions/DeleteForm/DeleteContent.jsx

@@ -1,9 +1,45 @@
 import { Button, DialogActions, DialogContent, Stack, Typography, List, ListItem } from "@mui/material";
 import useRequest from "@/lib/hooks/useRequest";
-import React from "react";
+import React, { useState } from "react";
+import { DELETE_ROAD_PATROL_SUPERVISOR } from "@/core/utils/routes";
 
 const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
-    const requestServer = useRequest();
+    const requestServer = useRequest({ notificationSuccess: true });
+    const [submittingPartial, setSubmittingPartial] = useState(false);
+    const [submittingGeneral, setSubmittingGeneral] = useState(false);
+    const handleGeneralDelete = () => {
+        setSubmittingGeneral(true);
+        requestServer(`${DELETE_ROAD_PATROL_SUPERVISOR}/${rowId}`, "post", {
+            data: {
+                type: 2,
+            },
+        })
+            .then(() => {
+                mutate();
+                setOpenDeleteDialog(false);
+                setSubmittingGeneral(false);
+            })
+            .catch(() => {
+                setSubmittingGeneral(false);
+            });
+    };
+
+    const handlePartialDelete = () => {
+        setSubmittingPartial(true);
+        requestServer(`${DELETE_ROAD_PATROL_SUPERVISOR}/${rowId}`, "post", {
+            data: {
+                type: 1,
+            },
+        })
+            .then(() => {
+                mutate();
+                setOpenDeleteDialog(false);
+                setSubmittingPartial(false);
+            })
+            .catch(() => {
+                setSubmittingPartial(false);
+            });
+    };
 
     return (
         <>
@@ -42,23 +78,11 @@ const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
                 <Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="primary">
                     بستن
                 </Button>
-                <Button
+                <Button onClick={handlePartialDelete} variant="outlined" color="warning" disabled={submittingPartial}>
-                    onClick={() => {
+                    {submittingPartial ? "درحال ارسال اطلاعات..." : "حذف جزئی"}
-                        /* handle partial delete */
-                    }}
-                    variant="outlined"
-                    color="warning"
-                >
-                    حذف جزئی
                 </Button>
-                <Button
+                <Button onClick={handleGeneralDelete} variant="contained" color="error" disabled={submittingGeneral}>
-                    onClick={() => {
+                    {submittingGeneral ? "درحال ارسال اطلاعات..." : "حذف کلی"}
-                        /* handle complete delete */
-                    }}
-                    variant="contained"
-                    color="error"
-                >
-                    حذف کلی
                 </Button>
             </DialogActions>
         </>

src/components/dashboard/roadPatrols/supervisor/RowActions/OfficerDescription/index.jsx

@@ -1,26 +1,10 @@
 import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip, Typography, Card, CardContent } from "@mui/material";
 import { useState } from "react";
-import useRequest from "@/lib/hooks/useRequest";
 import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
 import CloseIcon from "@mui/icons-material/Close";
 
-const OfficerDescriptionForm = ({ row }) => {
+const OfficerDescriptionForm = ({ description }) => {
     const [openOfficerDescriptionDialog, setOpenOfficerDescriptionDialog] = useState(false);
-    const requestServer = useRequest();
-
-    const handleSubmit = () => {
-        // requestServer(`${RESERVE_PASSENGER_BOSS}/${rowId}`, "post", { description })
-        //     .then((response) => {
-        //         setOpenOfficerDescriptionDialog(false);
-        //         mutate();
-        //     })
-        //     .catch((error) => {
-        //         console.error(error);
-        //     })
-        //     .finally(() => {
-        //         setIsSubmitting(false);
-        //     });
-    };
 
     return (
         <>
@@ -55,18 +39,7 @@ const OfficerDescriptionForm = ({ row }) => {
                 <DialogContent>
                     <Card sx={{ padding: 2, boxShadow: 3, borderRadius: 2 }}>
                         <CardContent>
-                            <Typography
+                            <Typography variant="body2">{description || "هیچ توضیحی موجود نیست"} </Typography>
-                                gutterBottom
-                                variant="body1"
-                                component="div"
-                                sx={{ fontWeight: "bold", mb: 2, color: "primary.main" }}
-                            >
-                                توضیحات :
-                            </Typography>
-                            <Typography variant="body2">
-                                {row.original.description || "هیچ توضیحی موجود نیست"}{" "}
-                                {/* should replace row.original.description with the back end*/}
-                            </Typography>
                         </CardContent>
                     </Card>
                 </DialogContent>
@@ -74,5 +47,4 @@ const OfficerDescriptionForm = ({ row }) => {
         </>
     );
 };
-
 export default OfficerDescriptionForm;

src/components/dashboard/roadPatrols/supervisor/RowActions/ReportForm/index.jsx

@@ -2,8 +2,7 @@ import { Tooltip, IconButton } from "@mui/material";
 import PrintIcon from "@mui/icons-material/Print";
 
 const ReportForm = ({ rowId }) => {
-    const reportUrl = "https://rms.rmto.ir/v2/road_patrols/operator/report/96872"; // TODO replace id here
+    const reportUrl = `https://rms.rmto.ir/v2/road_patrols/operator/report/${rowId}`;
-
     return (
         <Tooltip title="گزارش" arrow placement="right">
             <IconButton

src/components/dashboard/roadPatrols/supervisor/RowActions/index.jsx

@@ -1,13 +1,9 @@
 import { Box } from "@mui/material";
-import ReportForm from "./ReportForm";
 import DeleteForm from "./DeleteForm";
-import OfficerDescriptionForm from "./OfficerDescription";
 
 const RowActions = ({ row, mutate }) => {
     return (
         <Box sx={{ display: "flex", gap: 1 }}>
-            <ReportForm rowId={row.getValue("id")} />
-            <OfficerDescriptionForm row={row} />
             <DeleteForm rowId={row.getValue("id")} mutate={mutate} />
         </Box>
     );

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

@@ -1,15 +1,16 @@
 "use client";
 import { useMemo } from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import Toolbar from "./Toolbar";
 import { GET_ROAD_PATROL_SUPERVISOR_LIST } from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
 import useProvinces from "@/lib/hooks/useProvince";
-import useRoadItemGetItems from "@/lib/hooks/useRoadItemGetItems";
 import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
 import useEdaratLists from "@/lib/hooks/useEdaratLists";
+import OfficerDescriptionForm from "./RowActions/OfficerDescription";
+import ReportForm from "./RowActions/ReportForm";
 
 const OperatorList = () => {
     const columns = useMemo(
@@ -151,6 +152,54 @@ const OperatorList = () => {
                 grow: false,
                 size: 100,
             },
+            {
+                accessorKey: "description",
+                header: "توضیحات مامور",
+                id: "description",
+                enableColumnFilter: false,
+                datatype: "text",
+                grow: false,
+                size: 100,
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue }) => {
+                    return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <OfficerDescriptionForm description={renderedCellValue} />
+                        </Stack>
+                    );
+                },
+            },
+            {
+                header: "گزارش مامور",
+                enableColumnFilter: false,
+                datatype: "text",
+                grow: false,
+                size: 100,
+                muiTableBodyCellProps: {
+                    sx: {
+                        borderLeft: "1px solid #e1e1e1",
+                        py: 0,
+                        "&:first-of-type": {
+                            borderLeft: "unset",
+                        },
+                    },
+                },
+                Cell: ({ renderedCellValue, row }) => {
+                    return (
+                        <Stack alignItems={"center"} justifyContent={"center"}>
+                            <ReportForm rowId={row.getValue("id")} />
+                        </Stack>
+                    );
+                },
+            },
         ],
         []
     );
@@ -159,7 +208,6 @@ const OperatorList = () => {
         <>
             <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
                 <DataTableWithAuth
-                    table_title={"ارزیابی"}
                     need_filter={true}
                     columns={columns}
                     sorting={[{ id: "id", desc: true }]}

src/core/components/MapInfoOneMarker.jsx

@@ -12,24 +12,19 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
     ssr: false,
 });
 
-const createCustomIcon = (size, iconUrl, labelText) => {
+const createCustomIcon = (size, iconUrl, labelText, color) => {
     if (labelText) {
         return L.divIcon({
+            className: "custom-marker", // Apply your custom CSS class
             html: `
-                <div style="position: relative; display: inline-block; text-align: center;">
+                  <div style="position: relative; text-align: center; width: 50px;">
-                    <img 
+                    <div style="background-color: ${color}; color: white; border-radius: 20px; padding: 5px;">
-                        src="${iconUrl}" 
+                      <span style="font-family: 'IRANSansFaNum', sans-serif;">${labelText}</span>
-                        style="width: ${size[0]}px; height: ${size[1]}px;" 
-                        alt="icon"
-                    />
-                    <div style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); color: black; font-size: 12px;">
-                        ${labelText}
                     </div>
-                </div>
+                    <div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
-            `,
+                  </div>`,
-            iconSize: size,
+            iconSize: [100, 50], // Adjust icon size to fit your content
-            iconAnchor: [size[0] / 2, size[1]],
+            iconAnchor: [50, 25], // Adjust to position the marker correctly
-            popupAnchor: [0, -size[1]],
         });
     }
 
@@ -45,6 +40,7 @@ const MAX_ZOOM_FOR_MARKER = 13;
 const MapInteraction = ({ setValue, startLat, startLng }) => {
     const [isMarkerLocked, setIsMarkerLocked] = useState(!!(startLat && startLng)); // وضعیت قفل مارکر
     const [enableSend, setEnableSend] = useState(false);
+    const [startIconColor, setStartIconColor] = useState(startLat ? "#1CAC66" : "#003d4f"); // رنگ آیکن شروع
     const [markerPosition, setMarkerPosition] = useState(
         startLat && startLng ? { lat: startLat, lng: startLng } : null
     );
@@ -79,6 +75,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
             setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
             setMarkerPosition({ lat: center.lat, lng: center.lng }); // به‌روزرسانی موقعیت مارکر
             setIsMarkerLocked(true);
+            setStartIconColor("#1CAC66");
         }
     };
 
@@ -86,6 +83,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
         setValue("start_point", null); // حذف مقدار قبلی
         setIsMarkerLocked(false); // باز کردن قفل مارکر
         setMarkerPosition(null); // تنظیم مارکر به مرکز نقشه
+        setStartIconColor("#003d4f");
     };
 
     return (
@@ -93,7 +91,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
             <Marker
                 position={markerPosition || map.getCenter()} // استفاده از موقعیت
                 ref={markerRef}
-                icon={createCustomIcon([35, 35], HereIcon.src, "اینجا")}
+                icon={createCustomIcon([35, 35], HereIcon.src, "اینجا", startIconColor)}
                 eventHandlers={{
                     click: handleMarkerClick,
                 }}

src/core/components/MapInfoTwoMarker.jsx

@@ -12,27 +12,21 @@ const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
     loading: () => <MapLoading />,
     ssr: false,
 });
-const createCustomIcon = (size, iconUrl, labelText) => {
+const createCustomIcon = (size, iconUrl, labelText, color) => {
     if (labelText) {
         return L.divIcon({
+            className: "custom-marker", // Apply your custom CSS class
             html: `
-                <div style="position: relative; display: inline-block; text-align: center;">
+                  <div style="position: relative; text-align: center; width: 50px;">
-                    <img 
+                    <div style="background-color: ${color}; color: white; border-radius: 20px; padding: 5px;">
-                        src="${iconUrl}" 
+                      <span style="font-family: 'IRANSansFaNum', sans-serif;">${labelText}</span>
-                        style="width: ${size[0]}px; height: ${size[1]}px;" 
-                        alt="icon"
-                    />
-                    <div style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); color: black; font-size: 12px;">
-                        ${labelText}
                     </div>
-                </div>
+                    <div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
-            `,
+                  </div>`,
-            iconSize: size,
+            iconSize: [100, 50], // Adjust icon size to fit your content
-            iconAnchor: [size[0] / 2, size[1]],
+            iconAnchor: [50, 25], // Adjust to position the marker correctly
-            popupAnchor: [0, -size[1]],
         });
     }
-
     return L.icon({
         iconUrl: iconUrl,
         iconSize: size,
@@ -48,6 +42,8 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
     const [startPosition, setStartPosition] = useState(startLat && startLng ? { lat: startLat, lng: startLng } : null);
     const [endPosition, setEndPosition] = useState(endLat && endLng ? { lat: endLat, lng: endLng } : null);
     const [enableSend, setEnableSend] = useState(false);
+    const [startIconColor, setStartIconColor] = useState(startLat ? "#1CAC66" : "#003d4f"); // رنگ آیکن شروع
+    const [endIconColor, setEndIconColor] = useState(endLat ? "#D13131" : "#003d4f"); // رنگ آیکن پایان
     const startRef = useRef();
     const endRef = useRef();
 
@@ -86,6 +82,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
         setIsStartLocked(false);
         setStartPosition(null);
         setValue("start_point", null);
+        setStartIconColor("#003d4f");
     };
 
     const handleUnlockEnd = () => {
@@ -95,6 +92,8 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
         setStartPosition(null);
         setValue("end_point", "");
         setValue("start_point", null);
+        setStartIconColor("#003d4f");
+        setEndIconColor("#003d4f");
     };
 
     return (
@@ -102,7 +101,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
             <Marker
                 position={startPosition || map.getCenter()}
                 ref={startRef}
-                icon={createCustomIcon([35, 35], StartIcon.src, "نقطه شروع")}
+                icon={createCustomIcon([35, 35], StartIcon.src, "شروع", startIconColor)}
                 eventHandlers={{
                     click: () => {
                         if (!enableSend) return;
@@ -111,6 +110,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                             setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
                             setStartPosition({ lat: center.lat, lng: center.lng });
                             setIsStartLocked(true);
+                            setStartIconColor("#1CAC66");
                         }
                     },
                 }}
@@ -172,7 +172,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                     <Marker
                         position={endPosition || map.getCenter()}
                         ref={endRef}
-                        icon={createCustomIcon([35, 35], EndIcon.src, "نقطه پایان")}
+                        icon={createCustomIcon([35, 35], EndIcon.src, "پایان", endIconColor)}
                         eventHandlers={{
                             click: () => {
                                 if (!enableSend) return;
@@ -181,6 +181,7 @@ const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
                                     setValue("end_point", { lat: center.lat.toString(), lng: center.lng.toString() });
                                     setEndPosition({ lat: center.lat, lng: center.lng });
                                     setIsEndLocked(true);
+                                    setEndIconColor("#D13131");
                                 }
                             },
                         }}

src/core/utils/routes.js

@@ -30,9 +30,10 @@ export const UPDATE_AZMAYESH_TYPE = api + "/api/v3/azmayesh_types/update";
 
 //road patrol
 export const GET_ROAD_PATROL_OPERATOR_LIST = api + "/api/v3/road_patrols/operator_index";
-export const EXPORT_ROAD_PATROL_OPERATOR_LIST = "https://rms.rmto.ir/v2/road_patrols/operator/cartable/report";
+export const EXPORT_ROAD_PATROL_OPERATOR_LIST = "https://rms.witel.ir/v2/road_patrols/operator/cartable/report";
 export const GET_ROAD_PATROL_SUPERVISOR_LIST = api + "/api/v3/road_patrols/supervisor_index";
-export const EXPORT_ROAD_PATROL_SUPERVISOR_LIST = "https://rms.rmto.ir/v2/road_patrols/supervisor/cartable/report";
+export const EXPORT_ROAD_PATROL_SUPERVISOR_LIST = "https://rms.witel.ir/v2/road_patrols/supervisor/cartable/report";
+export const DELETE_ROAD_PATROL_SUPERVISOR = api + "/api/v3/road_patrols/delete";
 
 // road items
 export const GET_ROAD_ITEMS_SUPERVISOR_LIST = api + "/api/v3/road_items/supervisor_index";