working on actions page

src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/ActionInfo.jsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, {useState} from "react";
 import dynamic from "next/dynamic";
 import MapLoading from "@/core/components/MapLayer/Loading";
 import {
@@ -10,60 +10,146 @@ import {
     CardContent,
     CardHeader,
     Chip,
+    Collapse,
     Divider,
     IconButton,
     Stack,
     Typography
 } from "@mui/material";
+import {styled} from '@mui/material/styles';
 import HandymanIcon from '@mui/icons-material/Handyman';
 import DeleteIcon from "@mui/icons-material/Delete";
-import EditIcon from "@mui/icons-material/Edit";
 import moment from "jalali-moment";
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import WatchLaterIcon from '@mui/icons-material/WatchLater';
+import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
+import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
+import PersonIcon from '@mui/icons-material/Person';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DesignServicesIcon from '@mui/icons-material/DesignServices';
+import EditActionDuringPatrol from "./EditActionDuringPatrol";
 
 const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
     loading: () => <MapLoading/>,
     ssr: false,
 });
 
-const ActionInfo = ({action, deleteAction}) => {
+const ActionInfo = ({action, index, deleteAction}) => {
-    console.log("action", action)
+    const [expanded, setExpanded] = useState(false);
+
+    const handleExpandClick = () => {
+        setExpanded(!expanded);
+    };
+
+    const ExpandMore = styled((props) => {
+        const {expand, ...other} = props;
+        return <IconButton {...other} />;
+    })(({theme}) => ({
+        marginLeft: 'auto',
+        transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shortest,
+        }),
+        variants: [
+            {
+                props: ({expand}) => !expand,
+                style: {
+                    transform: 'rotate(0deg)',
+                },
+            },
+            {
+                props: ({expand}) => !!expand,
+                style: {
+                    transform: 'rotate(180deg)',
+                },
+            },
+        ],
+    }));
+
+
     return (
         <Card sx={{maxWidth: 300}}>
             <CardHeader
                 avatar={
                     <HandymanIcon color="primary" sx={{width: "30px", height: "30px"}}/>
                 }
-                title={"متن تست"}
+                title={<Typography sx={{fontSize: "14px", fontWeight: 500}}>{action.data.item_name}</Typography>}
-                subheader={"ساب آیتم تست"}
+                subheader={action.data.sub_item_name}
             />
             <CardContent>
-                <Stack sx={{gap: 2}}>
+                <Stack sx={{gap: 1}}>
-                    <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
+                    <Box sx={{display: "flex", alignItems: "center", gap: 1}}>
-                        <Chip size="small" label="تاریخ" icon={<CalendarMonthIcon/>}/>
+                        <CalendarMonthIcon/>
-                        <Divider sx={{flex: 1, mx: 2}}/>
+                        <Typography variant="button">
-                        <Typography sx={{fontSize: "12px", fontWeight: 500, textDecoration: "underline"}}>
+                            تاریخ:
-                            {moment(action.start_date).locale("fa").format("YYYY/MM/DD")}
+                        </Typography>
+                        <Typography variant="button">
+                            {moment(action.data.activity_date).locale("fa").format("YYYY/MM/DD")}
                         </Typography>
                     </Box>
-                    <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
+                    <Box sx={{display: "flex", alignItems: "center", gap: 1}}>
-                        <Chip size="small" label="ساعت" icon={<WatchLaterIcon/>}/>
+                        <WatchLaterIcon/>
-                        <Divider sx={{flex: 1, mx: 2}}/>
+                        <Typography variant="button">
-                        <Typography sx={{fontSize: "12px", fontWeight: 500, textDecoration: "underline"}}>
+                            ساعت:
-                            {action.action_date}
+                        </Typography>
+                        <Typography variant="button">
+                            {action.data.activity_time}
+                        </Typography>
+                    </Box>
+                    <Box sx={{display: "flex", alignItems: "center", gap: 1}}>
+                        <DesignServicesIcon/>
+                        <Typography variant="button">
+                            میزان فعالیت انجام شده:
+                        </Typography>
+                        <Typography variant="button">
+                            {action.data.amount}
+                            {/*({action.data.unit_fa})*/}
                         </Typography>
                     </Box>
                 </Stack>
             </CardContent>
             <CardActions disableSpacing>
-                <IconButton aria-label="حذف فعالیت" color="error">
+                <Box>
-                    <DeleteIcon/>
+                    <IconButton aria-label="حذف فعالیت" color="error" onClick={deleteAction}>
-                </IconButton>
+                        <DeleteIcon/>
-                <IconButton aria-label="ویرایش فعالیت" color="primary">
+                    </IconButton>
-                    <EditIcon/>
+                    <EditActionDuringPatrol action={action}/>
-                </IconButton>
+                </Box>
+                <ExpandMore
+                    expand={expanded}
+                    onClick={handleExpandClick}
+                    aria-expanded={expanded}
+                    aria-label="show more"
+                >
+                    <ExpandMoreIcon/>
+                </ExpandMore>
             </CardActions>
+            <Collapse in={expanded} timeout="auto" unmountOnExit sx={{p: 2}}>
+                <Stack sx={{gap: 1}}>
+                    <Box>
+                        <Divider sx={{mb: 1}}>
+                            <Chip size="small" label="خودرو ها" icon={<DirectionsCarIcon/>}/>
+                        </Divider>
+                        <Stack>
+                            {action.data.cmms_machines.map((cmms_machine, index) => (
+                                <Typography variant="button" key={index}>
+                                    {index + 1}: {cmms_machine.car_name}
+                                </Typography>
+                            ))}
+                        </Stack>
+                    </Box>
+                    <Box>
+                        <Divider sx={{mb: 1}}>
+                            <Chip size="small" label="راهداران" icon={<PersonIcon/>}/>
+                        </Divider>
+                        <Stack>
+                            {action.data.rahdaran_id.map((rahdar, index) => (
+                                <Typography variant="button" key={index}>
+                                    {index + 1}: {rahdar.name}
+                                </Typography>
+                            ))}
+                        </Stack>
+                    </Box>
+                </Stack>
+            </Collapse>
         </Card>
     );
 };

src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/ActionsDurigPatrol.jsx

@@ -5,6 +5,7 @@ import AddCircleIcon from '@mui/icons-material/AddCircle';
 import React, {useState} from "react";
 import ModalActionsDuringPatrol from "./ModalActionsDuringPatrol";
 import ActionInfo from "./ActionInfo";
+import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
 
 const ActionsDuringPatrol = ({tabState, setTabState}) => {
     const [ActionsList, setActionsList] = useState([]);
@@ -39,6 +40,7 @@ const ActionsDuringPatrol = ({tabState, setTabState}) => {
                         <Grid key={index} item xs={12} sm={6} lg={4}>
                             <ActionInfo
                                 action={action}
+                                index={index}
                                 deleteAction={() => deleteAction(index)}
                             />
                         </Grid>
@@ -51,6 +53,14 @@ const ActionsDuringPatrol = ({tabState, setTabState}) => {
                     </Typography>
                 </Box>
             }
+            <Box>
+                <Box sx={{display: "flex", gap: 1, justifyContent: "center"}}>
+                    <Button variant="contained" color="primary" onClick={() => setTabState(tabState + 1)}
+                            endIcon={<KeyboardDoubleArrowLeftIcon/>} sx={{mt: 2}}>
+                        نهایی کردن درخواست
+                    </Button>
+                </Box>
+            </Box>
         </Box>
     );
 };

src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/EditActionDuringPatrol.jsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, {useState} from "react";
+import dynamic from "next/dynamic";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import {Dialog, DialogTitle, IconButton} from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import EditFormContent from "@/components/dashboard/roadItems/operator/RowActions/EditForm/EditFormContent";
+
+const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
+    loading: () => <MapLoading/>,
+    ssr: false,
+});
+
+const EditActionDuringPatrol = ({action}) => {
+
+    console.log("action", action)
+
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const HandleSubmit = async (data, result) => {
+        setActionsList((prev) => [...prev, data]);
+        setOpen(false);
+    }
+
+    return (
+        <>
+            <IconButton aria-label="ویرایش فعالیت" color="primary" onClick={handleOpen}>
+                <EditIcon/>
+            </IconButton>
+            <Dialog
+                maxWidth="sm"
+                fullWidth
+                open={open}
+                PaperProps={{
+                    sx: {
+                        boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
+                    },
+                }}
+            >
+                <DialogTitle>ویرایش اطلاعات</DialogTitle>
+                <EditFormContent setOpenEditDialog={setOpen} onSubmit={HandleSubmit} defaultData={action.data}/>
+            </Dialog>
+        </>
+    );
+};
+
+export default EditActionDuringPatrol;

src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolDetailInfo.jsx

@@ -10,6 +10,7 @@ import WatchLaterIcon from '@mui/icons-material/WatchLater';
 import QueryBuilderIcon from '@mui/icons-material/QueryBuilder';
 import AddRoadIcon from '@mui/icons-material/AddRoad';
 import ShareLocationIcon from '@mui/icons-material/ShareLocation';
+import ElectricCarIcon from '@mui/icons-material/ElectricCar';
 import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
 import QrCode2Icon from '@mui/icons-material/QrCode2';
 import moment from "jalali-moment";
@@ -36,65 +37,65 @@ const PatrolDetailInfo = ({patrolData, tabState, setTabState}) => {
                     }}>
                     <Stack sx={{minWidth: {xs: "100%", lg: "300px"}, gap: 2}}>
                         <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
-                            <Chip size="small" label="مدت زمان روشن بودن خودرو" icon={<DirectionsCarFilledIcon/>}/>
+                            <Chip size="small" label="مدت زمان روشن بودن خودرو" icon={<ElectricCarIcon/>}/>
                             <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                 {Math.floor(patrolData.accOnDuration / 60)} دقیقه
                             </Typography>
                         </Box>
                         <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                             <Chip size="small" label="نام خودرو" icon={<DirectionsCarFilledIcon/>}/>
                             <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                 {patrolData.roadPatrolMachinesId.car_name}
                             </Typography>
                         </Box>
                         <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                             <Chip size="small" label="کد خودرو" icon={<QrCode2Icon/>}/>
                             <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                 {patrolData.roadPatrolMachinesId.machine_code}
                             </Typography>
                         </Box>
                         <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                             <Chip size="small" label="پلاک خودرو" icon={<DirectionsCarFilledIcon/>}/>
                             <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                 {patrolData.roadPatrolMachinesId.plak_number}
                             </Typography>
                         </Box>
                         <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                             <Chip size="small" label="زمان شروع گشت" icon={<QueryBuilderIcon/>}/>
                             <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                 {moment(patrolData.start_time).locale("fa").format("HH:mm | YYYY/MM/DD")}
                             </Typography>
                         </Box>
                         <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                             <Chip size="small" label="زمان پایان گشت" icon={<WatchLaterIcon/>}/>
                             <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                 {moment(patrolData.end_time).locale("fa").format("HH:mm | YYYY/MM/DD")}
                             </Typography>
                         </Box>
                         <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                             <Chip size="small" label="مسافت" icon={<AddRoadIcon/>}/>
                             <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                 {(patrolData.mileage / 1000).toFixed(1)} کیلومتر
                             </Typography>
                         </Box>
                         <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                             <Chip size="small" label="میزان مصرف سوخت" icon={<LocalGasStationIcon/>}/>
                             <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                 {Math.round(patrolData.fuelConsumption * 10) / 10} لیتر
                             </Typography>
                         </Box>
                         <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
                             <Chip size="small" label="تعداد توقف در مسیر" icon={<ShareLocationIcon/>}/>
                             <Divider sx={{flex: 1, mx: 2}}/>
-                            <Typography sx={{fontSize: "13px", fontWeight: 400, textDecoration: "underline"}}>
+                            <Typography sx={{fontSize: "13px", fontWeight: 400}}>
                                 {patrolData.stopPoints.length} مورد
                             </Typography>
                         </Box>

src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolForms.jsx

@@ -55,7 +55,7 @@ const PatrolForms = ({mutate}) => {
     const requestServer = useRequest({notificationSuccess: true});
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-    const [tabState, setTabState] = useState(0);
+    const [tabState, setTabState] = useState(2);
     const [activeUpTo, setActiveUpTo] = useState(0);
 
     const handleChangeTab = (event, newValue) => {

src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/SuperVisorsDetail.jsx

@@ -44,10 +44,11 @@ const SuperVisorsDetail = ({control, watch, setValue, tabState, setTabState}) =>
                         <Controller
                             control={control}
                             render={({field, fieldState: {error}}) => {
+                                console.log("field.value", field.value)
                                 return (
                                     <RahdarCode
-                                        rahdarsCode={field.value || []}
+                                        rahdarsCode={field.value}
-                                        setRahdarsCode={(value) => field.onChange(value || [])}
+                                        setRahdarsCode={(value) => field.onChange(value)}
                                         error={error}
                                         multiple={false}
                                     />