From 9fccf770d51d9a526199787e26dc54e4929b5da6 Mon Sep 17 00:00:00 2001
From: Mohammad Jalali <muhammad.art79@gmail.com>
Date: Sun, 15 Dec 2024 18:27:27 +0330
Subject: [PATCH] work on phone validation part and complete structure with
 timeline

---
 .../dashboard/road-patrols/operator/page.js   |   2 +-
 .../operator/Actions/Create/index.jsx         |  33 +++++
 .../roadPatrols/operator/ExcelPrint/index.jsx |  26 ++--
 .../Forms/CreatePatrol/PatrolForms.jsx        |  80 +++++++++++
 .../Forms/CreatePatrol/PatrolTimeLine.jsx     | 122 ++++++++++++++++
 .../Forms/CreatePatrol/PhoneValidation.jsx    | 130 ++++++++++++++++++
 .../operator/Forms/CreatePatrol/index.jsx     |  17 +++
 .../roadPatrols/operator/Toolbar.jsx          |  11 +-
 .../dashboard/roadPatrols/operator/index.jsx  |   8 +-
 .../roadPatrols/supervisor/SupervisorList.jsx |  28 ++--
 .../roadPatrols/supervisor/index.jsx          |   8 +-
 src/core/utils/pageMenu.js                    |  87 ++++++------
 src/core/utils/routes.js                      |   1 +
 13 files changed, 466 insertions(+), 87 deletions(-)
 create mode 100644 src/components/dashboard/roadPatrols/operator/Actions/Create/index.jsx
 create mode 100644 src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolForms.jsx
 create mode 100644 src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolTimeLine.jsx
 create mode 100644 src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PhoneValidation.jsx
 create mode 100644 src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/index.jsx

diff --git a/src/app/(withAuth)/dashboard/road-patrols/operator/page.js b/src/app/(withAuth)/dashboard/road-patrols/operator/page.js
index 73fa9cf..ce319b9 100644
--- a/src/app/(withAuth)/dashboard/road-patrols/operator/page.js
+++ b/src/app/(withAuth)/dashboard/road-patrols/operator/page.js
@@ -4,7 +4,7 @@ import OperatorPage from "@/components/dashboard/roadPatrols/operator";
 const Page = () => {
     return (
         <WithPermission permission_name={["add-road-patrol"]}>
-            <OperatorPage />
+            <OperatorPage/>
         </WithPermission>
     );
 };
diff --git a/src/components/dashboard/roadPatrols/operator/Actions/Create/index.jsx b/src/components/dashboard/roadPatrols/operator/Actions/Create/index.jsx
new file mode 100644
index 0000000..63347f0
--- /dev/null
+++ b/src/components/dashboard/roadPatrols/operator/Actions/Create/index.jsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {Button, IconButton, useMediaQuery} from "@mui/material";
+import {useTheme} from "@emotion/react";
+import {useState} from "react";
+import {AddCircle} from "@mui/icons-material";
+import CreatePatrol from "../../Forms/CreatePatrol";
+
+const OperatorCreate = ({mutate}) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    return (
+        <>
+            {isMobile ? (
+                <IconButton aria-label="ثبت اقدام جدید" color="primary" onClick={handleOpen}>
+                    <AddCircle sx={{fontSize: "25px"}}/>
+                </IconButton>
+            ) : (
+                <Button variant="contained" color="primary" startIcon={<AddCircle/>} onClick={handleOpen}>
+                    ثبت اقدام
+                </Button>
+            )}
+            {open && <CreatePatrol open={open} setOpen={setOpen} mutate={mutate}/>}
+        </>
+    );
+};
+export default OperatorCreate;
diff --git a/src/components/dashboard/roadPatrols/operator/ExcelPrint/index.jsx b/src/components/dashboard/roadPatrols/operator/ExcelPrint/index.jsx
index 8fdc753..9148331 100644
--- a/src/components/dashboard/roadPatrols/operator/ExcelPrint/index.jsx
+++ b/src/components/dashboard/roadPatrols/operator/ExcelPrint/index.jsx
@@ -1,18 +1,18 @@
-import { Button, CircularProgress } from "@mui/material";
-import { useMemo, useState } from "react";
+import {Button, CircularProgress} from "@mui/material";
+import {useMemo, useState} from "react";
 import moment from "jalali-moment";
 import FileSaver from "file-saver";
 import DescriptionIcon from "@mui/icons-material/Description";
 import useRequest from "@/lib/hooks/useRequest";
-import { EXPORT_OPERATOR_LIST } from "@/core/utils/routes";
+import {EXPORT_OPERATOR_LIST} from "@/core/utils/routes";
 
-const PrintExcel = ({ table, filterData }) => {
+const PrintExcel = ({table, filterData}) => {
     const [loading, setLoading] = useState(false);
     const requestServer = useRequest();
     const activeFilters = Object.entries(filterData).reduce((acc, [key, filter]) => {
         if (filter.value) {
             // Check if there's an active filter
-            acc.push({ id: key, value: filter.value });
+            acc.push({id: key, value: filter.value});
         }
         return acc;
     }, []);
@@ -20,22 +20,23 @@ const PrintExcel = ({ table, filterData }) => {
     const filterParams = useMemo(() => {
         const params = new URLSearchParams();
         activeFilters.length > 0 &&
-            activeFilters.map((filter, index) => {
-                params.set(`${filter.id}`, filter.value);
-            });
+        activeFilters.map((filter, index) => {
+            params.set(`${filter.id}`, filter.value);
+        });
         return params;
     }, [activeFilters]);
 
     const clickHandler = () => {
         setLoading(true);
         requestServer(`${EXPORT_OPERATOR_LIST}?${filterParams}`, "get", {
-            requestOptions: { responseType: "blob" },
+            requestOptions: {responseType: "blob"},
         })
             .then((response) => {
                 const filename = `خروجی کارتابل عملیات تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
                 FileSaver.saveAs(response.data, filename);
             })
-            .catch(() => {})
+            .catch(() => {
+            })
             .finally(() => {
                 setLoading(false);
             });
@@ -45,10 +46,9 @@ const PrintExcel = ({ table, filterData }) => {
         <Button
             color="primary"
             variant="contained"
-            size="small"
             disabled={loading}
-            sx={{ textTransform: "unset", alignSelf: "center" }}
-            startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <DescriptionIcon />}
+            sx={{textTransform: "unset", alignSelf: "center"}}
+            startIcon={loading ? <CircularProgress size={18} color="inherit"/> : <DescriptionIcon/>}
             onClick={clickHandler}
         >
             خروجی اکسل
diff --git a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolForms.jsx b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolForms.jsx
new file mode 100644
index 0000000..4146808
--- /dev/null
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolForms.jsx
@@ -0,0 +1,80 @@
+"use client";
+
+import {Box, DialogContent, Tab, Tabs, useMediaQuery} from "@mui/material";
+import {useTheme} from "@emotion/react";
+import React, {useState} from "react";
+import TapAndPlayIcon from '@mui/icons-material/TapAndPlay';
+import TaxiAlertIcon from '@mui/icons-material/TaxiAlert';
+import EngineeringIcon from '@mui/icons-material/Engineering';
+import HandymanIcon from '@mui/icons-material/Handyman';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import PatrolTimeLine from "./PatrolTimeLine";
+import PhoneValidation from "./PhoneValidation";
+
+function TabPanel(props) {
+    const {children, value, index} = props;
+
+    return (
+        <div role="tabpanel" hidden={value !== index}>
+            {value === index && <Box>{children}</Box>}
+        </div>
+    );
+}
+
+const PatrolForms = () => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const [tabState, setTabState] = useState(0);
+
+    const handleChangeTab = (event, newValue) => {
+        setTabState(newValue);
+    };
+
+    return (
+        <>
+            <Tabs
+                allowScrollButtonsMobile
+                value={tabState}
+                onChange={handleChangeTab}
+                variant={`${isMobile ? "scrollable" : "fullWidth"}`}
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-around",
+                    width: "100%",
+                    backgroundColor: "#efefef",
+                }}
+            >
+                <Tab icon={<TapAndPlayIcon/>} label="تایید هویت"></Tab>
+                <Tab icon={<TaxiAlertIcon/>} label="مشخصات گشت"></Tab>
+                <Tab icon={<EngineeringIcon/>} label="مشخصات راهداران"></Tab>
+                <Tab icon={<HandymanIcon/>} label="اقدامات حین گشت"></Tab>
+                <Tab icon={<VerifiedIcon/>} label="تکمیل درخواست"></Tab>
+            </Tabs>
+            <DialogContent dividers sx={{display: "flex"}}>
+                <Box sx={{flex: 1}}>
+                    <TabPanel value={tabState} index={0}>
+                        <PhoneValidation/>
+                    </TabPanel>
+                    <TabPanel value={tabState} index={1}>
+                        <>moshakhasat gasht</>
+                    </TabPanel>
+                    <TabPanel value={tabState} index={2}>
+                        <>moshakhasat rahdar</>
+                    </TabPanel>
+                    <TabPanel value={tabState} index={3}>
+                        <>eghdamat heine gasht</>
+                    </TabPanel>
+                    <TabPanel value={tabState} index={4}>
+                        <>taiidie</>
+                    </TabPanel>
+                </Box>
+                {!isMobile && (
+                    <Box sx={{display: "flex", alignItems: "center"}}>
+                        <PatrolTimeLine/>
+                    </Box>
+                )}
+            </DialogContent>
+        </>
+    );
+};
+export default PatrolForms;
diff --git a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolTimeLine.jsx b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolTimeLine.jsx
new file mode 100644
index 0000000..5343e33
--- /dev/null
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolTimeLine.jsx
@@ -0,0 +1,122 @@
+"use client";
+
+import {Box, Typography} from "@mui/material";
+import TapAndPlayIcon from '@mui/icons-material/TapAndPlay';
+import TaxiAlertIcon from '@mui/icons-material/TaxiAlert';
+import EngineeringIcon from '@mui/icons-material/Engineering';
+import HandymanIcon from '@mui/icons-material/Handyman';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import {
+    Timeline,
+    TimelineConnector,
+    TimelineContent,
+    TimelineDot,
+    TimelineItem,
+    timelineItemClasses,
+    TimelineSeparator,
+} from "@mui/lab";
+
+const PatrolTimeLine = ({tabState}) => {
+    return (
+        <Box sx={{display: "flex", alignItems: "center"}}>
+            <Timeline
+                position="right"
+                sx={{
+                    [`& .${timelineItemClasses.root}:before`]: {flex: 0, padding: 0},
+                }}
+            >
+                <TimelineItem>
+                    <TimelineSeparator>
+                        <TimelineConnector/>
+                        <TimelineDot sx={{backgroundColor: "#fff"}}>
+                            <TapAndPlayIcon
+                                color={tabState === 0 ? "primary" : "error"}
+                                sx={{width: "1.5rem", height: "1.5rem"}}
+                            />
+                        </TimelineDot>
+                        <TimelineConnector/>
+                    </TimelineSeparator>
+                    <TimelineContent sx={{py: "12px", px: 2}}>
+                        <Typography variant="h6">تایید هویت</Typography>
+                        <Typography variant="caption" sx={{color: "#606060"}}>
+                            تایید هویت با شماره همراه
+                        </Typography>
+                    </TimelineContent>
+                </TimelineItem>
+                <TimelineItem>
+                    <TimelineSeparator>
+                        <TimelineConnector/>
+                        <TimelineDot sx={{backgroundColor: "#fff"}}>
+                            <TaxiAlertIcon
+                                color={tabState === 1 ? "primary" : "error"}
+                                sx={{width: "1.5rem", height: "1.5rem"}}
+                            />
+                        </TimelineDot>
+                        <TimelineConnector/>
+                    </TimelineSeparator>
+                    <TimelineContent sx={{py: "12px", px: 2}}>
+                        <Typography variant="h6">مشخصات گشت</Typography>
+                        <Typography variant="caption" sx={{color: "#606060"}}>
+                            تایید اطلاعات اولیه گشت
+                        </Typography>
+                    </TimelineContent>
+                </TimelineItem>
+                <TimelineItem>
+                    <TimelineSeparator>
+                        <TimelineConnector/>
+                        <TimelineDot sx={{backgroundColor: "#fff"}}>
+                            <EngineeringIcon
+                                color={tabState === 1 ? "primary" : "error"}
+                                sx={{width: "1.5rem", height: "1.5rem"}}
+                            />
+                        </TimelineDot>
+                        <TimelineConnector/>
+                    </TimelineSeparator>
+                    <TimelineContent sx={{py: "12px", px: 2}}>
+                        <Typography variant="h6">مشخصات راهداران</Typography>
+                        <Typography variant="caption" sx={{color: "#606060"}}>
+                            راهدار/راهداران حاظر در گشت
+                        </Typography>
+                    </TimelineContent>
+                </TimelineItem>
+                <TimelineItem>
+                    <TimelineSeparator>
+                        <TimelineConnector/>
+                        <TimelineDot sx={{backgroundColor: "#fff"}}>
+                            <HandymanIcon
+                                color={tabState === 1 ? "primary" : "error"}
+                                sx={{width: "1.5rem", height: "1.5rem"}}
+                            />
+                        </TimelineDot>
+                        <TimelineConnector/>
+                    </TimelineSeparator>
+                    <TimelineContent sx={{py: "12px", px: 2}}>
+                        <Typography variant="h6">اقدامات حین گشت</Typography>
+                        <Typography variant="caption" sx={{color: "#606060"}}>
+                            ثبت فعالیت های صورت گرفته حین گشت
+                        </Typography>
+                    </TimelineContent>
+                </TimelineItem>
+                <TimelineItem>
+                    <TimelineSeparator>
+                        <TimelineConnector/>
+                        <TimelineDot sx={{backgroundColor: "#fff"}}>
+                            <VerifiedIcon
+                                color={tabState === 1 ? "primary" : "error"}
+                                sx={{width: "1.5rem", height: "1.5rem"}}
+                            />
+                        </TimelineDot>
+                        <TimelineConnector/>
+                    </TimelineSeparator>
+                    <TimelineContent sx={{py: "12px", px: 2}}>
+                        <Typography variant="h6">تکمیل درخواست</Typography>
+                        <Typography variant="caption" sx={{color: "#606060"}}>
+                            تکمیل درخواست و ثبت نهایی
+                        </Typography>
+                    </TimelineContent>
+                </TimelineItem>
+            </Timeline>
+        </Box>
+    );
+};
+export default PatrolTimeLine;
diff --git a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PhoneValidation.jsx b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PhoneValidation.jsx
new file mode 100644
index 0000000..0310d02
--- /dev/null
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PhoneValidation.jsx
@@ -0,0 +1,130 @@
+"use client";
+
+import {Box, Button, FormControl, InputLabel, OutlinedInput, Slide} from "@mui/material";
+import React, {useEffect, useState} from "react";
+import ForwardToInboxIcon from '@mui/icons-material/ForwardToInbox';
+import QrCodeIcon from '@mui/icons-material/QrCode';
+import useRequest from "@/lib/hooks/useRequest";
+import {GET_OTP_TOKEN} from "@/core/utils/routes";
+
+const PhoneValidation = () => {
+    const requestServer = useRequest({auth: true});
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [validPhone, setValidPhone] = useState(false);
+    const [delayPerRequest, setDelayPerRequest] = useState(false);
+    const [counter, setCounter] = useState(120);
+    const [otpSended, setOtpSended] = useState(false);
+
+    const handleNumericInput = (e) => {
+        e.target.value = e.target.value.replace(/[^0-9]/g, '');
+    };
+
+    useEffect(() => {
+        if (phoneNumber.length === 11) {
+            setValidPhone(true)
+        } else {
+            setValidPhone(false)
+        }
+    }, [phoneNumber]);
+
+    useEffect(() => {
+        if (counter === 0) {
+            setDelayPerRequest(false);
+            return;
+        }
+
+        if (delayPerRequest && counter > 0) {
+            const timer = setInterval(() => {
+                setCounter(prevCounter => prevCounter - 1);
+            }, 1000);
+
+            return () => clearInterval(timer);
+        }
+    }, [counter, delayPerRequest]);
+
+    const sendOtp = () => {
+        if (!validPhone) return false;
+        requestServer(`${GET_OTP_TOKEN}?phone_number=${phoneNumber}`, "get")
+            .then((response) => {
+                console.log("request sent");
+            })
+            .catch(() => {
+            });
+        //////////**** (mohammad) this part should keep in success but for now we go next level ****////////////
+        setOtpSended(true);
+        setDelayPerRequest(true);
+    };
+
+    // Format counter as MM:SS
+    const formatCounter = (counter) => {
+        const minutes = Math.floor(counter / 60).toString().padStart(2, '0');
+        const seconds = (counter % 60).toString().padStart(2, '0');
+        return `${minutes}:${seconds}`;
+    };
+
+    return (
+        <Box sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            my: 3
+        }}>
+            <Box sx={{display: "flex", alignItems: "center", gap: 2, width: {xs: "100%", sm: "70%"}}}>
+                <FormControl size="small" fullWidth variant="outlined">
+                    <InputLabel htmlFor="phone_number">شماره تلفن مامور گشت</InputLabel>
+                    <OutlinedInput
+                        id="phone_number"
+                        label={"شماره تلفن مامور گشت"}
+                        disabled={delayPerRequest}
+                        autoComplete="off"
+                        size="small"
+                        fullWidth
+                        value={phoneNumber}
+                        onChange={(e) => setPhoneNumber(e.target.value)}
+                        onInput={handleNumericInput}
+                        type="text"
+                        inputProps={{
+                            maxLength: 11
+                        }}
+                    />
+                </FormControl>
+                <Button onClick={sendOtp} disabled={!validPhone || delayPerRequest} variant="contained" color="success"
+                        sx={{width: "200px", height: "37px"}}
+                        endIcon={<ForwardToInboxIcon/>}>
+                    {delayPerRequest ? formatCounter(counter) : "دریافت کد"}
+                </Button>
+            </Box>
+            <Slide in={otpSended} sx={{my: 5, width: {xs: "100%", sm: "70%"}}}>
+                <Box>
+                    <FormControl size="small" fullWidth variant="outlined" focused>
+                        <InputLabel htmlFor="otp_code">کد پیامک شده</InputLabel>
+                        <OutlinedInput
+                            id="otp_code"
+                            label={"کد پیامک شده"}
+                            placeholder="------"
+                            autoComplete="off"
+                            size="small"
+                            fullWidth
+                            type="text"
+                            onInput={handleNumericInput}
+                            inputProps={{
+                                maxLength: 6,
+                                inputMode: "numeric",
+                                style: {
+                                    textAlign: "center",
+                                    letterSpacing: "10px",
+                                },
+                            }}
+                        />
+                    </FormControl>
+                    <Button fullWidth variant="contained" endIcon={<QrCodeIcon/>} sx={{mt: 2}}>
+                        بررسی کد و رفتن به مرحله بعد
+                    </Button>
+                </Box>
+            </Slide>
+        </Box>
+    );
+};
+
+export default PhoneValidation;
\ No newline at end of file
diff --git a/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/index.jsx b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/index.jsx
new file mode 100644
index 0000000..46eac78
--- /dev/null
+++ b/src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/index.jsx
@@ -0,0 +1,17 @@
+"use client";
+
+import {Dialog} from "@mui/material";
+import PatrolForms from "@/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolForms";
+
+const CreatePatrol = ({open, setOpen, mutate, rowId}) => {
+    return (
+        <Dialog open={open} fullWidth maxWidth="lg">
+            <PatrolForms
+                setOpen={setOpen}
+                mutate={mutate}
+                rowId={rowId}
+            />
+        </Dialog>
+    );
+};
+export default CreatePatrol;
diff --git a/src/components/dashboard/roadPatrols/operator/Toolbar.jsx b/src/components/dashboard/roadPatrols/operator/Toolbar.jsx
index 32c4395..f652e04 100644
--- a/src/components/dashboard/roadPatrols/operator/Toolbar.jsx
+++ b/src/components/dashboard/roadPatrols/operator/Toolbar.jsx
@@ -1,10 +1,13 @@
 import PrintExcel from "./ExcelPrint";
+import OperatorCreate from "./Actions/Create";
+import {Box} from "@mui/material";
 
-const Toolbar = ({ table, filterData }) => {
+const Toolbar = ({table, filterData, mutate}) => {
     return (
-        <>
-            <PrintExcel table={table} filterData={filterData} />
-        </>
+        <Box sx={{display: "flex", gap: 1}}>
+            <OperatorCreate table={table} mutate={mutate}/>
+            <PrintExcel table={table} filterData={filterData}/>
+        </Box>
     );
 };
 export default Toolbar;
diff --git a/src/components/dashboard/roadPatrols/operator/index.jsx b/src/components/dashboard/roadPatrols/operator/index.jsx
index 7835954..dcf34af 100644
--- a/src/components/dashboard/roadPatrols/operator/index.jsx
+++ b/src/components/dashboard/roadPatrols/operator/index.jsx
@@ -1,13 +1,13 @@
 "use client";
 import PageTitle from "@/core/components/PageTitle";
-import { Stack } from "@mui/material";
-import OperatorList from "@/components/dashboard/roadPatrols/operator/OperatorList";
+import {Stack} from "@mui/material";
+import OperatorList from "./OperatorList";
 
 const OperatorPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"عملیات"} />
-            <OperatorList />
+            <PageTitle title={"عملیات"}/>
+            <OperatorList/>
         </Stack>
     );
 };
diff --git a/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx b/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
index d568c46..9478939 100644
--- a/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx
@@ -1,15 +1,15 @@
 "use client";
-import { useMemo } from "react";
-import { Box, Typography } from "@mui/material";
+import {useMemo} from "react";
+import {Box, Typography} from "@mui/material";
 import DataTableWithAuth from "@/core/components/DataTableWithAuth";
 import Toolbar from "./Toolbar";
-import { GET_SUPERVISOR_LIST } from "@/core/utils/routes";
+import {GET_SUPERVISOR_LIST} from "@/core/utils/routes";
 import moment from "jalali-moment";
 import RowActions from "./RowActions";
 import useProvinces from "@/lib/hooks/useProvince";
 
-const OperatorList = () => {
-    const { provinces, errorProvinces, loadingProvinces } = useProvinces();
+const SuperviserList = () => {
+    const {provinces, errorProvinces, loadingProvinces} = useProvinces();
     const citiesListApi = "https://rms.rmto.ir/public/contents/edarate_shahri_by_province";
     const columns = useMemo(
         () => [
@@ -31,11 +31,11 @@ const OperatorList = () => {
                 filterFn: "equals",
                 columnSelectOption: () => {
                     if (loadingProvinces) {
-                        return [{ value: "", label: "در حال بارگذاری..." }];
+                        return [{value: "", label: "در حال بارگذاری..."}];
                     }
 
                     if (errorProvinces) {
-                        return [{ value: "", label: "خطا در بارگذاری" }];
+                        return [{value: "", label: "خطا در بارگذاری"}];
                     }
 
                     return provinces.map((province) => ({
@@ -54,10 +54,10 @@ const OperatorList = () => {
                 dependencyId: "province",
                 columnSelectOption: (dependencyField) => {
                     if (dependencyField.value === "") {
-                        return [{ value: "", label: "ابتدا استان را انتخاب کنید" }];
+                        return [{value: "", label: "ابتدا استان را انتخاب کنید"}];
                     }
 
-                    return [{ value: dependencyField.value, label: dependencyField.value }];
+                    return [{value: dependencyField.value, label: dependencyField.value}];
                 },
             },
             {
@@ -95,7 +95,7 @@ const OperatorList = () => {
                 datatype: "date",
                 filterFn: "equals",
                 columnFilterModeOptions: ["equals", "contains"],
-                Cell: ({ renderedCellValue }) => (
+                Cell: ({renderedCellValue}) => (
                     <Typography variant="body2">
                         {renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"}
                     </Typography>
@@ -109,7 +109,7 @@ const OperatorList = () => {
                 datatype: "date",
                 filterFn: "equals",
                 columnFilterModeOptions: ["equals", "contains"],
-                Cell: ({ renderedCellValue }) => (
+                Cell: ({renderedCellValue}) => (
                     <Typography variant="body2">
                         {renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"}
                     </Typography>
@@ -123,7 +123,7 @@ const OperatorList = () => {
                 datatype: "date",
                 filterFn: "equals",
                 columnFilterModeOptions: ["equals", "contains"],
-                Cell: ({ renderedCellValue }) => (
+                Cell: ({renderedCellValue}) => (
                     <Typography variant="body2">
                         {renderedCellValue ? moment(renderedCellValue).locale("fa").format("YYYY/MM/DD") : "-"}
                     </Typography>
@@ -135,7 +135,7 @@ const OperatorList = () => {
 
     return (
         <>
-            <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
+            <Box sx={{p: 1, border: 1, borderColor: "divider", borderRadius: 1}}>
                 <DataTableWithAuth
                     table_title={"ارزیابی"}
                     need_filter={true}
@@ -152,4 +152,4 @@ const OperatorList = () => {
         </>
     );
 };
-export default OperatorList;
+export default SuperviserList;
diff --git a/src/components/dashboard/roadPatrols/supervisor/index.jsx b/src/components/dashboard/roadPatrols/supervisor/index.jsx
index 3fa490b..5e2001d 100644
--- a/src/components/dashboard/roadPatrols/supervisor/index.jsx
+++ b/src/components/dashboard/roadPatrols/supervisor/index.jsx
@@ -1,13 +1,13 @@
 "use client";
 import PageTitle from "@/core/components/PageTitle";
-import { Stack } from "@mui/material";
-import SupervisorList from "./SupervisorList";
+import {Stack} from "@mui/material";
+import SuperviserList from "./SupervisorList";
 
 const SupervisorPage = () => {
     return (
         <Stack spacing={1}>
-            <PageTitle title={"ارزیابی"} />
-            <SupervisorList />
+            <PageTitle title={"ارزیابی"}/>
+            <SuperviserList/>
         </Stack>
     );
 };
diff --git a/src/core/utils/pageMenu.js b/src/core/utils/pageMenu.js
index 6000f64..5fd062d 100644
--- a/src/core/utils/pageMenu.js
+++ b/src/core/utils/pageMenu.js
@@ -28,7 +28,7 @@ export const pageMenu = [
         label: "پیشخوان",
         type: "page",
         route: "/dashboard",
-        icon: <SpaceDashboardIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <SpaceDashboardIcon sx={{width: "inherit", height: "inherit"}}/>,
         permissions: ["all"],
     },
     {
@@ -36,14 +36,14 @@ export const pageMenu = [
         label: "مدیریت کاربران",
         type: "page",
         route: process.env.NEXT_PUBLIC_API_URL + "/v2/user_management",
-        icon: <GroupsIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <GroupsIcon sx={{width: "inherit", height: "inherit"}}/>,
         permissions: ["full-user-management", "limited-user-management"],
     },
     {
         id: "projectsManagment",
         label: "پروژه های راهداری",
         type: "menu",
-        icon: <AccountTreeIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <AccountTreeIcon sx={{width: "inherit", height: "inherit"}}/>,
         hasSubitems: true,
         Subitems: [
             {
@@ -51,7 +51,7 @@ export const pageMenu = [
                 label: "ثبت قرارداد و پروژه",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/rahdari_projects/finance",
-                icon: <GavelIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <GavelIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["show-contract", "show-contract-province"],
             },
             {
@@ -59,7 +59,7 @@ export const pageMenu = [
                 label: "لیست پروژه ها",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/rahdari_projects/projects_list",
-                icon: <BallotIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <BallotIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["all"],
             },
             {
@@ -67,7 +67,7 @@ export const pageMenu = [
                 label: "پروژه های پیشنهادی",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/rahdari_projects/proposal",
-                icon: <AssistantIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <AssistantIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["show-proposal", "show-proposal-province"],
             },
             {
@@ -75,7 +75,7 @@ export const pageMenu = [
                 label: "درخواست نمایندگان",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/rahdari_projects/lawmakers",
-                icon: <AdminPanelSettingsIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <AdminPanelSettingsIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["show-lawmaker", "show-lawmaker-province"],
             },
             {
@@ -83,7 +83,7 @@ export const pageMenu = [
                 label: "پراکندگی بر روی نقشه",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=rahdari_projects",
-                icon: <MapIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <MapIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["all"],
             },
         ],
@@ -92,7 +92,7 @@ export const pageMenu = [
         id: "roadItemManagment",
         label: "فعالیت های روزانه",
         type: "menu",
-        icon: <FactCheckIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <FactCheckIcon sx={{width: "inherit", height: "inherit"}}/>,
         hasSubitems: true,
         badges: ["road_items.total"],
         Subitems: [
@@ -100,7 +100,7 @@ export const pageMenu = [
                 id: "roadItemManagmentSupervisor",
                 label: "ارزیابی",
                 type: "menu",
-                icon: <SpeedIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <SpeedIcon sx={{width: "inherit", height: "inherit"}}/>,
                 hasSubitems: true,
                 badges: ["road_items.supervise_cnt"],
                 Subitems: [
@@ -120,7 +120,7 @@ export const pageMenu = [
                 id: "roadItemManagmentOparation",
                 label: "عملیات",
                 type: "menu",
-                icon: <EngineeringIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <EngineeringIcon sx={{width: "inherit", height: "inherit"}}/>,
                 hasSubitems: true,
                 badges: ["road_items.operation_cnt"],
                 Subitems: [
@@ -145,7 +145,7 @@ export const pageMenu = [
                 label: "پراکندگی بر روی نقشه",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=road_items",
-                icon: <MapIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <MapIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: [
                     "show-road-item-supervise-cartable",
                     "show-road-item-supervise-cartable-province",
@@ -157,7 +157,7 @@ export const pageMenu = [
                 label: "گزارش ها",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/report",
-                icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <AssessmentIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: [
                     "show-road-item-supervise-cartable",
                     "show-road-item-supervise-cartable-province",
@@ -170,7 +170,7 @@ export const pageMenu = [
         id: "roadPatrolManagment",
         label: "گشت راهداری و ترابری",
         type: "menu",
-        icon: <FireTruckIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <FireTruckIcon sx={{width: "inherit", height: "inherit"}}/>,
         hasSubitems: true,
         badges: ["road_patrols.total"],
         Subitems: [
@@ -178,7 +178,7 @@ export const pageMenu = [
                 id: "roadPatrolManagmentSupervisor",
                 label: "ارزیابی",
                 type: "menu",
-                icon: <SpeedIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <SpeedIcon sx={{width: "inherit", height: "inherit"}}/>,
                 hasSubitems: true,
                 badges: ["road_patrols.supervise_cnt"],
                 Subitems: [
@@ -198,22 +198,15 @@ export const pageMenu = [
                 id: "roadPatrolManagmentOparation",
                 label: "عملیات",
                 type: "menu",
-                icon: <EngineeringIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <EngineeringIcon sx={{width: "inherit", height: "inherit"}}/>,
                 hasSubitems: true,
                 badges: ["road_patrols.operation_cnt"],
                 Subitems: [
-                    {
-                        id: "roadPatrolManagmentOparationCreate",
-                        label: "ثبت اقدام",
-                        type: "page",
-                        route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_patrols/operator/create",
-                        permissions: ["add-road-patrol"],
-                    },
                     {
                         id: "roadPatrolManagmentOparationCartable",
                         label: "کارتابل",
                         type: "page",
-                        route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_patrols/operator/cartable",
+                        route: "/dashboard/road-patrols/operator",
                         permissions: ["add-road-patrol"],
                     },
                 ],
@@ -223,7 +216,7 @@ export const pageMenu = [
                 label: "پراکندگی بر روی نقشه",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=road_patrols",
-                icon: <MapIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <MapIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: [
                     "add-road-patrol",
                     "show-road-patrol-supervise-cartable",
@@ -235,7 +228,7 @@ export const pageMenu = [
                 label: "گزارش ها",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_patrols/report",
-                icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <AssessmentIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: [
                     "add-road-patrol",
                     "show-road-patrol-supervise-cartable",
@@ -248,7 +241,7 @@ export const pageMenu = [
         id: "inquiryPrivacyManagment",
         label: "استعلام حریم راه",
         type: "menu",
-        icon: <DoorbellIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <DoorbellIcon sx={{width: "inherit", height: "inherit"}}/>,
         hasSubitems: true,
         Subitems: [
             {
@@ -285,7 +278,7 @@ export const pageMenu = [
         id: "safetyAndPrivacyManagment",
         label: "نگهداری حریم راه",
         type: "menu",
-        icon: <RouteIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <RouteIcon sx={{width: "inherit", height: "inherit"}}/>,
         hasSubitems: true,
         badges: ["safety_and_privacy.step_one", "safety_and_privacy.step_two"],
         Subitems: [
@@ -293,7 +286,7 @@ export const pageMenu = [
                 id: "safetyAndPrivacyManagmentOparation",
                 label: "عملیات",
                 type: "menu",
-                icon: <EngineeringIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <EngineeringIcon sx={{width: "inherit", height: "inherit"}}/>,
                 hasSubitems: true,
                 Subitems: [
                     {
@@ -321,7 +314,7 @@ export const pageMenu = [
                 label: "پراکندگی بر روی نقشه",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=safety_and_privacy",
-                icon: <MapIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <MapIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: [
                     "show-safety-and-privacy-operator-cartable",
                     "show-safety-and-privacy-operator-cartable-province",
@@ -334,7 +327,7 @@ export const pageMenu = [
                 label: "گزارش ها",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/safety_and_privacy/report",
-                icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <AssessmentIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: [
                     "show-safety-and-privacy-operator-cartable",
                     "show-safety-and-privacy-operator-cartable-province",
@@ -348,7 +341,7 @@ export const pageMenu = [
         id: "roadObservationsManagment",
         label: "واکنش سریع",
         type: "menu",
-        icon: <ElectricBoltIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <ElectricBoltIcon sx={{width: "inherit", height: "inherit"}}/>,
         hasSubitems: true,
         badges: ["road_observations.total"],
         Subitems: [
@@ -356,7 +349,7 @@ export const pageMenu = [
                 id: "roadObservationsManagmentSupervisor",
                 label: "ارزیابی",
                 type: "menu",
-                icon: <SpeedIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <SpeedIcon sx={{width: "inherit", height: "inherit"}}/>,
                 hasSubitems: true,
                 badges: ["road_observations.supervise_cnt"],
                 Subitems: [
@@ -374,14 +367,14 @@ export const pageMenu = [
                 label: "رسیدگی به شکایات",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_observations",
-                icon: <AssignmentLateIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <AssignmentLateIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["show-fast-react", "show-fast-react-province", "show-fast-react-edarate-shahri"],
             },
             {
                 id: "roadObservationsManagmentOparation",
                 label: "عملیات",
                 type: "menu",
-                icon: <EngineeringIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <EngineeringIcon sx={{width: "inherit", height: "inherit"}}/>,
                 hasSubitems: true,
                 badges: ["road_observations.operation_cnt"],
                 Subitems: [
@@ -399,7 +392,7 @@ export const pageMenu = [
                 label: "پراکندگی بر روی نقشه",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=road_observations",
-                icon: <MapIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <MapIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["all"],
             },
             {
@@ -407,7 +400,7 @@ export const pageMenu = [
                 label: "گزارش ها",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_observations/report/index",
-                icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <AssessmentIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["all"],
             },
         ],
@@ -416,7 +409,7 @@ export const pageMenu = [
         id: "winterCampManagment",
         label: "قرارگاه زمستانی",
         type: "menu",
-        icon: <CottageIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <CottageIcon sx={{width: "inherit", height: "inherit"}}/>,
         hasSubitems: true,
         Subitems: [
             {
@@ -424,7 +417,7 @@ export const pageMenu = [
                 label: "محور های انسدادی",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/winter_camp",
-                icon: <LineAxisIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <LineAxisIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["show-camp", "show-camp-province"],
             },
             {
@@ -432,7 +425,7 @@ export const pageMenu = [
                 label: "محور های حلقه اول",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=camp",
-                icon: <LineAxisIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <LineAxisIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["show-camp", "show-camp-province"],
             },
             {
@@ -440,7 +433,7 @@ export const pageMenu = [
                 label: "گزارش ها",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=campNew",
-                icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <AssessmentIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["show-camp", "show-camp-province"],
             },
         ],
@@ -449,14 +442,14 @@ export const pageMenu = [
         id: "receiptManagment",
         label: "خسارات وارده بر ابنیه فنی و تاسیسات راه",
         type: "menu",
-        icon: <GppMaybeIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <GppMaybeIcon sx={{width: "inherit", height: "inherit"}}/>,
         hasSubitems: true,
         Subitems: [
             {
                 id: "receiptManagmentOparation",
                 label: "عملیات",
                 type: "menu",
-                icon: <EngineeringIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <EngineeringIcon sx={{width: "inherit", height: "inherit"}}/>,
                 hasSubitems: true,
                 Subitems: [
                     {
@@ -473,7 +466,7 @@ export const pageMenu = [
                 label: "گزارش ها",
                 type: "page",
                 route: process.env.NEXT_PUBLIC_API_URL + "/v2/receipt/report",
-                icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
+                icon: <AssessmentIcon sx={{width: "inherit", height: "inherit"}}/>,
                 permissions: ["all"],
             },
         ],
@@ -483,7 +476,7 @@ export const pageMenu = [
         label: "آزمایشات (OPTS)",
         type: "page",
         route: "/dashboard/azmayesh",
-        icon: <ScienceIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <ScienceIcon sx={{width: "inherit", height: "inherit"}}/>,
         permissions: ["azmayesh-management"],
     },
     {
@@ -491,7 +484,7 @@ export const pageMenu = [
         label: "نوع آزمایشات",
         type: "page",
         route: "/dashboard/azmayesh_type",
-        icon: <BiotechIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <BiotechIcon sx={{width: "inherit", height: "inherit"}}/>,
         permissions: ["azmayesh-type-management"],
     },
     {
@@ -499,7 +492,7 @@ export const pageMenu = [
         label: "اطلاعات خودرو",
         type: "page",
         route: "/dashboard/car-details",
-        icon: <DriveEtaIcon sx={{ width: "inherit", height: "inherit" }} />,
+        icon: <DriveEtaIcon sx={{width: "inherit", height: "inherit"}}/>,
         permissions: [""],
     },
 ];
diff --git a/src/core/utils/routes.js b/src/core/utils/routes.js
index db24fd6..c9ee515 100644
--- a/src/core/utils/routes.js
+++ b/src/core/utils/routes.js
@@ -31,3 +31,4 @@ export const GET_OPERATOR_LIST = "/v3/api/fake-operator-list";
 export const EXPORT_OPERATOR_LIST = "https://rms.rmto.ir/v2/road_patrols/operator/cartable/report";
 export const GET_SUPERVISOR_LIST = "/v3/api/fake-supervisor-list";
 export const EXPORT_SUPERVISOR_LIST = "https://rms.rmto.ir/v2/road_patrols/supervisor/cartable/report";
+export const GET_OTP_TOKEN = "https://rms.rmto.ir/v2/get_otp_token";