Merge branch 'feature/amiriis_add_image_to_road_safety' into 'develop'

Feature/amiriis add image to road safety

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

src/components/dashboard/damages/operator/Actions/create/Forms/ImageUpload.jsx

@@ -46,12 +46,12 @@ const ImageUpload = ({ name, value, onChange, error, title }) => {
         >
             <FormHelperText
                 sx={{
-                    fontSize: 14,
+                    fontSize: 12,
                     border: 1,
                     borderBottom: 0,
                     borderColor: "divider",
                     px: 2,
-                    py: 1,
+                    py: 0.5,
                     borderRadius: 2,
                     borderBottomRightRadius: 0,
                     borderBottomLeftRadius: 0,

src/components/dashboard/damages/operator/Form/RegisterInsurance/ImageUpload.jsx

@@ -46,12 +46,12 @@ const ImageUpload = ({ name, value, onChange, error, beforeImage = null, title }
         >
             <FormHelperText
                 sx={{
-                    fontSize: 14,
+                    fontSize: 12,
                     border: 1,
                     borderBottom: 0,
                     borderColor: "divider",
                     px: 2,
-                    py: 1,
+                    py: 0.5,
                     borderRadius: 2,
                     borderBottomRightRadius: 0,
                     borderBottomLeftRadius: 0,

src/components/dashboard/fastReact/complaintList/Form/registerAction/ImageUpload.jsx

@@ -46,12 +46,12 @@ const ImageUpload = ({ name, value, onChange, error, title }) => {
         >
             <FormHelperText
                 sx={{
-                    fontSize: 14,
+                    fontSize: 12,
                     border: 1,
                     borderBottom: 0,
                     borderColor: "divider",
                     px: 2,
-                    py: 1,
+                    py: 0.5,
                     borderRadius: 2,
                     borderBottomRightRadius: 0,
                     borderBottomLeftRadius: 0,

src/components/dashboard/roadItems/operator/Actions/Create/Forms/ImageUpload.jsx

@@ -86,12 +86,12 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
                             >
                                 <FormHelperText
                                     sx={{
-                                        fontSize: 14,
+                                        fontSize: 12,
                                         border: 1,
                                         borderBottom: 0,
                                         borderColor: "divider",
                                         px: 2,
-                                        py: 1,
+                                        py: 0.5,
                                         borderRadius: 2,
                                         borderBottomRightRadius: 0,
                                         borderBottomLeftRadius: 0,
@@ -135,12 +135,12 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
                             >
                                 <FormHelperText
                                     sx={{
-                                        fontSize: 14,
+                                        fontSize: 12,
                                         border: 1,
                                         borderBottom: 0,
                                         borderColor: "divider",
                                         px: 2,
-                                        py: 1,
+                                        py: 0.5,
                                         borderRadius: 2,
                                         borderBottomRightRadius: 0,
                                         borderBottomLeftRadius: 0,

src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/RowActions/ImageUpload.jsx

@@ -70,12 +70,12 @@ const ImageUpload = ({ control, setValue, errors, getValues, beforeImage = null,
                             >
                                 <FormHelperText
                                     sx={{
-                                        fontSize: 14,
+                                        fontSize: 12,
                                         border: 1,
                                         borderBottom: 0,
                                         borderColor: "divider",
                                         px: 2,
-                                        py: 1,
+                                        py: 0.5,
                                         borderRadius: 2,
                                         borderBottomRightRadius: 0,
                                         borderBottomLeftRadius: 0,

src/components/dashboard/roadSafety/operator/Form/StepOne/CreateFormContent.jsx

@@ -1,19 +1,18 @@
-import React, { useState } from "react";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { mixed, number, object, string } from "yup";
-import { Box, Button, DialogActions, DialogContent, Tab, Tabs } from "@mui/material";
 import StyledForm from "@/core/components/StyledForm";
-import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import { FIRST_STEP_STORE } from "@/core/utils/routes";
-import FileCopyIcon from "@mui/icons-material/FileCopy";
-import ExitToAppIcon from "@mui/icons-material/ExitToApp";
-import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
-import BeenhereIcon from "@mui/icons-material/Beenhere";
 import useRequest from "@/lib/hooks/useRequest";
+import { yupResolver } from "@hookform/resolvers/yup";
+import BeenhereIcon from "@mui/icons-material/Beenhere";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+import { Box, Button, DialogActions, DialogContent, Tab, Tabs } from "@mui/material";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { mixed, number, object, string } from "yup";
 import GetItemInfo from "./GetItemInfo";
 import GetSubItemInfo from "./GetSubItemInfo";
-import { format } from "date-fns";
-import { FIRST_STEP_STORE } from "@/core/utils/routes";
 
 function TabPanel(props) {
     const { children, value, index } = props;
@@ -25,7 +24,8 @@ function TabPanel(props) {
 }
 
 const validationSchema = object({
-    recognize_picture: mixed().nullable().required("لطفا عکس فعالیت را بارگذاری کنید!"),
+    recognize_picture: mixed().nullable().required("لطفا تصویر بازدید 1 را بارگذاری کنید!"),
+    recognize_picture_2: mixed().nullable().required("لطفا تصویر بازدید 2 را بارگذاری کنید!"),
     info_id: number().required("نوع آیتم را مشخص کنید!"),
     axis_type_id: string().required("نوع محور را مشخص کنید!"),
     start_point: mixed()
@@ -44,6 +44,7 @@ const CreateFormContent = ({ setOpen, mutate }) => {
         info_id: null,
         axis_type_id: "",
         recognize_picture: null,
+        recognize_picture_2: null,
         activity_date: "",
         activity_time: "",
         start_point: "",
@@ -59,7 +60,13 @@ const CreateFormContent = ({ setOpen, mutate }) => {
 
     const handlePrev = () => {
         if (tabState === 2) {
-            const fieldsToReset = ["recognize_picture", "activity_time", "activity_date", "start_point"];
+            const fieldsToReset = [
+                "recognize_picture",
+                "recognize_picture_2",
+                "activity_time",
+                "activity_date",
+                "start_point",
+            ];
             fieldsToReset.forEach((field) => resetField(field));
         }
         if (tabState === 0) {
@@ -87,6 +94,7 @@ const CreateFormContent = ({ setOpen, mutate }) => {
         formData.append("info_id", data.info_id);
         formData.append("axis_type_id", data.axis_type_id);
         formData.append("recognize_picture", data.recognize_picture);
+        formData.append("recognize_picture_2", data.recognize_picture_2);
         formData.append("point", startPoint);
         await requestServer(FIRST_STEP_STORE, "post", {
             data: formData,

src/components/dashboard/roadSafety/operator/Form/StepOne/GetSubItemInfo.jsx

@@ -95,7 +95,7 @@ const GetSubItemInfo = ({ itemsList, control, setValue, errors }) => {
                             name={"activity_time"}
                         />
                     </Grid>
-                    <Grid item xs={12} sm={12}>
+                    <Grid item xs={12} sm={6}>
                         <Controller
                             name="recognize_picture"
                             control={control}
@@ -105,7 +105,22 @@ const GetSubItemInfo = ({ itemsList, control, setValue, errors }) => {
                                     value={field.value}
                                     error={error}
                                     onChange={field.onChange}
-                                    title={"تصویر مورد مشاهده شده"}
+                                    title={"تصویر بازدید 1"}
+                                />
+                            )}
+                        />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                        <Controller
+                            name="recognize_picture_2"
+                            control={control}
+                            render={({ field, fieldState: { error } }) => (
+                                <ImageUpload
+                                    name={field.name}
+                                    value={field.value}
+                                    error={error}
+                                    onChange={field.onChange}
+                                    title={"تصویر بازدید 2"}
                                 />
                             )}
                         />

src/components/dashboard/roadSafety/operator/Form/StepOne/ImageUpload.jsx

@@ -46,12 +46,12 @@ const ImageUpload = ({ name, value, onChange, error, title }) => {
         >
             <FormHelperText
                 sx={{
-                    fontSize: 14,
+                    fontSize: 12,
                     border: 1,
                     borderBottom: 0,
                     borderColor: "divider",
                     px: 2,
-                    py: 1,
+                    py: 0.5,
                     borderRadius: 2,
                     borderBottomRightRadius: 0,
                     borderBottomLeftRadius: 0,

src/components/dashboard/roadSafety/operator/Form/StepThree/ImageUpload.jsx

@@ -46,12 +46,12 @@ const ImageUpload = ({ name, value, onChange, error, title }) => {
         >
             <FormHelperText
                 sx={{
-                    fontSize: 14,
+                    fontSize: 12,
                     border: 1,
                     borderBottom: 0,
                     borderColor: "divider",
                     px: 2,
-                    py: 1,
+                    py: 0.5,
                     borderRadius: 2,
                     borderBottomRightRadius: 0,
                     borderBottomLeftRadius: 0,

src/components/dashboard/roadSafety/operator/Form/StepThree/StepThreeContent.jsx

@@ -4,7 +4,7 @@ import StyledForm from "@/core/components/StyledForm";
 import { THIRD_STEP_STORE } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Button, DialogActions, DialogContent, Grid, Stack } from "@mui/material";
+import { Button, DialogActions, DialogContent, Divider, Grid, Stack } from "@mui/material";
 import { Controller, useForm } from "react-hook-form";
 import { mixed, object, string } from "yup";
 import ImageUpload from "./ImageUpload";
@@ -15,11 +15,15 @@ const StepThreeContent = ({ setOpen, mutate, rowId }) => {
         action_date: "",
         action_time: "",
         action_picture: null,
+        finish_picture: null,
+        evidence_picture: null,
     };
     const validationSchema = object({
         action_date: string().required("لطفا تاریخ اقدام را انتخاب کنید!"),
         action_time: string().required("لطفا ساعت اقدام را انتخاب کنید!"),
-        action_picture: mixed().nullable().required("لطفا عکس اقدام را بارگذاری کنید!"),
+        action_picture: mixed().nullable().required("لطفا تصویر در حین انجام را بارگذاری کنید!"),
+        finish_picture: mixed().nullable().required("لطفا تصویر بعد از انجام را بارگذاری کنید!"),
+        evidence_picture: mixed().nullable().required("لطفا تصویر بعد صورت جلسه را بارگذاری کنید!"),
     });
     const {
         control,
@@ -34,6 +38,8 @@ const StepThreeContent = ({ setOpen, mutate, rowId }) => {
         const formData = new FormData();
         formData.append("action_date", `${data.action_date} ${data.action_time.toString().padStart(2, "0")}:00`);
         formData.append("action_picture", data.action_picture);
+        formData.append("finish_picture", data.finish_picture);
+        formData.append("evidence_picture", data.evidence_picture);
         await requestServer(`${THIRD_STEP_STORE}/${rowId}`, "post", {
             data: formData,
             hasSidebarUpdate: true,
@@ -85,19 +91,54 @@ const StepThreeContent = ({ setOpen, mutate, rowId }) => {
                             />
                         </Grid>
                     </Grid>
-                    <Controller
+                    <Divider sx={{ my: 2 }} />
-                        name="action_picture"
+                    <Grid container spacing={2}>
-                        control={control}
+                        <Grid item xs={12} sm={6}>
-                        render={({ field, fieldState: { error } }) => (
+                            <Controller
-                            <ImageUpload
+                                name="action_picture"
-                                name={field.name}
+                                control={control}
-                                value={field.value}
+                                render={({ field, fieldState: { error } }) => (
-                                error={error}
+                                    <ImageUpload
-                                onChange={field.onChange}
+                                        name={field.name}
-                                title={"تصویر اقدام"}
+                                        value={field.value}
+                                        error={error}
+                                        onChange={field.onChange}
+                                        title={"تصویر در حین کار"}
+                                    />
+                                )}
                             />
-                        )}
+                        </Grid>
-                    />
+                        <Grid item xs={12} sm={6}>
+                            <Controller
+                                name="finish_picture"
+                                control={control}
+                                render={({ field, fieldState: { error } }) => (
+                                    <ImageUpload
+                                        name={field.name}
+                                        value={field.value}
+                                        error={error}
+                                        onChange={field.onChange}
+                                        title={"تصویر اتمام عملیات"}
+                                    />
+                                )}
+                            />
+                        </Grid>
+                        <Grid item xs={12} sm={6}>
+                            <Controller
+                                name="evidence_picture"
+                                control={control}
+                                render={({ field, fieldState: { error } }) => (
+                                    <ImageUpload
+                                        name={field.name}
+                                        value={field.value}
+                                        error={error}
+                                        onChange={field.onChange}
+                                        title={"تصویر صورت جلسه"}
+                                    />
+                                )}
+                            />
+                        </Grid>
+                    </Grid>
                 </Stack>
             </DialogContent>
             <DialogActions>

src/components/dashboard/roadSafety/operator/Form/StepThree/index.jsx

@@ -24,7 +24,7 @@ const StepThree = ({ mutate, rowId }) => {
                 fullWidth
             >
                 <DialogTitle>ثبت اقدام</DialogTitle>
-                <StepThreeContent setOpen={setOpen} mutate={mutate} rowId={rowId} />
+                {open && <StepThreeContent setOpen={setOpen} mutate={mutate} rowId={rowId} />}
             </Dialog>
         </>
     );

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

@@ -293,7 +293,7 @@ const OperatorList = () => {
                 columns: [
                     {
                         accessorKey: "recognize_picture",
-                        header: "تصویر بازدید",
+                        header: "تصاویر بازدید",
                         id: "recognize_picture",
                         enableColumnFilter: false,
                         enableSorting: false,
@@ -309,10 +309,13 @@ const OperatorList = () => {
                                 },
                             },
                         },
-                        Cell: ({ renderedCellValue }) => {
+                        Cell: ({ row }) => {
-                            return renderedCellValue ? (
+                            return row.original.recognize_picture ? (
                                 <Stack alignItems={"center"} justifyContent={"center"}>
-                                    <RecognizePictureDialog image={renderedCellValue} />
+                                    <RecognizePictureDialog
+                                        image1={row.original.recognize_picture}
+                                        image2={row.original.recognize_picture_2}
+                                    />
                                 </Stack>
                             ) : (
                                 <>-</>
@@ -431,7 +434,7 @@ const OperatorList = () => {
                 columns: [
                     {
                         accessorKey: "action_picture",
-                        header: "تصویر اقدام",
+                        header: "تصاویر اقدام",
                         id: "action_picture",
                         enableColumnFilter: false,
                         enableSorting: false,
@@ -447,10 +450,14 @@ const OperatorList = () => {
                                 },
                             },
                         },
-                        Cell: ({ renderedCellValue }) => {
+                        Cell: ({ row }) => {
-                            return renderedCellValue ? (
+                            return row.original.action_picture ? (
                                 <Stack alignItems={"center"} justifyContent={"center"}>
-                                    <ActionPictureDialog image={renderedCellValue} />
+                                    <ActionPictureDialog
+                                        image1={row.original.action_picture}
+                                        image2={row.original.finish_picture}
+                                        image3={row.original.evidence_picture}
+                                    />
                                 </Stack>
                             ) : (
                                 <>-</>

src/components/dashboard/roadSafety/operator/RowActions/ActionPictureDialog/List.jsx

@@ -0,0 +1,13 @@
+import { Stack } from "@mui/material";
+import ActionPictureContent from "./ActionPictureContent";
+
+const List = ({ image1, image2, image3 }) => {
+    return (
+        <Stack>
+            <ActionPictureContent image={image1} title={"تصویر در حین کار"} />
+            <ActionPictureContent image={image2} title={"تصویر اتمام عملیات"} />
+            <ActionPictureContent image={image3} title={"تصویر صورت جلسه"} />
+        </Stack>
+    );
+};
+export default List;

src/components/dashboard/roadSafety/operator/RowActions/ActionPictureDialog/index.jsx

@@ -1,14 +1,14 @@
 import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
 import { Button, Dialog, DialogActions, DialogContent, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
-import ActionPictureContent from "./ActionPictureContent";
+import List from "./List";
 
-const ActionPictureDialog = ({ image }) => {
+const ActionPictureDialog = ({ image1, image2, image3 }) => {
     const [openImageDialog, setOpenImageDialog] = useState(false);
 
     return (
         <>
-            <Tooltip title="تصویر اقدام">
+            <Tooltip title="تصاویر اقدام">
                 <IconButton color="primary" onClick={() => setOpenImageDialog(true)}>
                     <PhotoLibraryIcon />
                 </IconButton>
@@ -26,7 +26,7 @@ const ActionPictureDialog = ({ image }) => {
                 scroll="paper"
             >
                 <DialogContent>
-                    <ActionPictureContent image={image} title={"تصویر اقدام"} />
+                    <List image1={image1} image2={image2} image3={image3} />
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">

src/components/dashboard/roadSafety/operator/RowActions/RecognizePictureDialog/List.jsx

@@ -0,0 +1,12 @@
+import { Stack } from "@mui/material";
+import RecognizePictureContent from "./RecognizePictureContent";
+
+const List = ({ image1, image2 }) => {
+    return (
+        <Stack>
+            <RecognizePictureContent image={image1} title={"تصویر بازدید 1"} />
+            <RecognizePictureContent image={image2} title={"تصویر بازدید 2"} />
+        </Stack>
+    );
+};
+export default List;

src/components/dashboard/roadSafety/operator/RowActions/RecognizePictureDialog/index.jsx

@@ -1,9 +1,9 @@
 import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
 import { Button, Dialog, DialogActions, DialogContent, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
-import RecognizePictureContent from "./RecognizePictureContent";
+import List from "./List";
 
-const RecognizePictureDialog = ({ image }) => {
+const RecognizePictureDialog = ({ image1, image2 }) => {
     const [openImageDialog, setOpenImageDialog] = useState(false);
 
     return (
@@ -26,7 +26,7 @@ const RecognizePictureDialog = ({ image }) => {
                 scroll="paper"
             >
                 <DialogContent>
-                    <RecognizePictureContent image={image} title={"تصویر بازدید"} />
+                    <List image1={image1} image2={image2} />
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">

src/components/dashboard/roadSafety/reports/map/PointsOnMap/DialogInfoItem/ContentInfoItem.jsx

@@ -79,23 +79,73 @@ const ContentInfoItem = ({ data }) => {
                         />
                     </Box>
                 </Stack>
+                <Stack
+                    sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }}
+                    spacing={1}
+                    alignItems={"center"}
+                >
+                    <Chip size="small" label="تصویر بازدید" />
+                    <Box sx={{ position: "relative", height: 300, width: "100%" }}>
+                        <Image
+                            src={data.recognize_picture_2}
+                            style={{ objectFit: "contain" }}
+                            alt="recognize_picture"
+                            fill
+                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                        />
+                    </Box>
+                </Stack>
                 {data.step == 3 && (
-                    <Stack
+                    <>
-                        sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }}
+                        <Stack
-                        spacing={1}
+                            sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }}
-                        alignItems={"center"}
+                            spacing={1}
-                    >
+                            alignItems={"center"}
-                        <Chip size="small" label="تصویر اقدام" />
+                        >
-                        <Box sx={{ position: "relative", height: 300, width: "100%" }}>
+                            <Chip size="small" label="تصویر در حین کار" />
-                            <Image
+                            <Box sx={{ position: "relative", height: 300, width: "100%" }}>
-                                src={data.action_picture}
+                                <Image
-                                style={{ objectFit: "contain" }}
+                                    src={data.action_picture}
-                                alt="action_picture"
+                                    style={{ objectFit: "contain" }}
-                                fill
+                                    alt="action_picture"
-                                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                                    fill
-                            />
+                                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                        </Box>
+                                />
-                    </Stack>
+                            </Box>
+                        </Stack>
+                        <Stack
+                            sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }}
+                            spacing={1}
+                            alignItems={"center"}
+                        >
+                            <Chip size="small" label="تصویر اتمام عملیات" />
+                            <Box sx={{ position: "relative", height: 300, width: "100%" }}>
+                                <Image
+                                    src={data.finish_picture}
+                                    style={{ objectFit: "contain" }}
+                                    alt="finish_picture"
+                                    fill
+                                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                                />
+                            </Box>
+                        </Stack>
+                        <Stack
+                            sx={{ flex: 1, border: 1, borderColor: "divider", borderRadius: 2, p: 1 }}
+                            spacing={1}
+                            alignItems={"center"}
+                        >
+                            <Chip size="small" label={"تصویر صورت جلسه"} />
+                            <Box sx={{ position: "relative", height: 300, width: "100%" }}>
+                                <Image
+                                    src={data.evidence_picture}
+                                    style={{ objectFit: "contain" }}
+                                    alt="evidence_picture"
+                                    fill
+                                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                                />
+                            </Box>
+                        </Stack>
+                    </>
                 )}
             </Stack>
         </Stack>

src/components/dashboard/roadSafety/supervisor/RowActions/ActionPictureDialog/List.jsx

@@ -0,0 +1,13 @@
+import { Stack } from "@mui/material";
+import ActionPictureContent from "./ActionPictureContent";
+
+const List = ({ image1, image2, image3 }) => {
+    return (
+        <Stack>
+            <ActionPictureContent image={image1} title={"تصویر در حین کار"} />
+            <ActionPictureContent image={image2} title={"تصویر اتمام عملیات"} />
+            <ActionPictureContent image={image3} title={"تصویر صورت جلسه"} />
+        </Stack>
+    );
+};
+export default List;

src/components/dashboard/roadSafety/supervisor/RowActions/ActionPictureDialog/index.jsx

@@ -1,14 +1,14 @@
 import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
 import { Button, Dialog, DialogActions, DialogContent, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
-import ActionPictureContent from "./ActionPictureContent";
+import List from "./List";
 
-const ActionPictureDialog = ({ image }) => {
+const ActionPictureDialog = ({ image1, image2, image3 }) => {
     const [openImageDialog, setOpenImageDialog] = useState(false);
 
     return (
         <>
-            <Tooltip title="تصویر اقدام">
+            <Tooltip title="تصاویر اقدام">
                 <IconButton color="primary" onClick={() => setOpenImageDialog(true)}>
                     <PhotoLibraryIcon />
                 </IconButton>
@@ -26,7 +26,7 @@ const ActionPictureDialog = ({ image }) => {
                 scroll="paper"
             >
                 <DialogContent>
-                    <ActionPictureContent image={image} title={"تصویر اقدام"} />
+                    <List image1={image1} image2={image2} image3={image3} />
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">

src/components/dashboard/roadSafety/supervisor/RowActions/RecognizePictureDialog/List.jsx

@@ -0,0 +1,12 @@
+import { Stack } from "@mui/material";
+import RecognizePictureContent from "./RecognizePictureContent";
+
+const List = ({ image1, image2 }) => {
+    return (
+        <Stack>
+            <RecognizePictureContent image={image1} title={"تصویر بازدید 1"} />
+            <RecognizePictureContent image={image2} title={"تصویر بازدید 2"} />
+        </Stack>
+    );
+};
+export default List;

src/components/dashboard/roadSafety/supervisor/RowActions/RecognizePictureDialog/index.jsx

@@ -1,9 +1,9 @@
 import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
 import { Button, Dialog, DialogActions, DialogContent, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
-import RecognizePictureContent from "./RecognizePictureContent";
+import List from "./List";
 
-const RecognizePictureDialog = ({ image }) => {
+const RecognizePictureDialog = ({ image1, image2 }) => {
     const [openImageDialog, setOpenImageDialog] = useState(false);
 
     return (
@@ -26,7 +26,7 @@ const RecognizePictureDialog = ({ image }) => {
                 scroll="paper"
             >
                 <DialogContent>
-                    <RecognizePictureContent image={image} title={"تصویر بازدید"} />
+                    <List image1={image1} image2={image2} />
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setOpenImageDialog(false)} variant="outlined" color="secondary">

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

@@ -400,7 +400,7 @@ const SupervisorList = () => {
                 columns: [
                     {
                         accessorKey: "recognize_picture",
-                        header: "تصویر بازدید",
+                        header: "تصاویر بازدید",
                         id: "recognize_picture",
                         enableColumnFilter: false,
                         enableSorting: false,
@@ -416,10 +416,13 @@ const SupervisorList = () => {
                                 },
                             },
                         },
-                        Cell: ({ renderedCellValue }) => {
+                        Cell: ({ row }) => {
-                            return renderedCellValue ? (
+                            return row.original.recognize_picture ? (
                                 <Stack alignItems={"center"} justifyContent={"center"}>
-                                    <RecognizePictureDialog image={renderedCellValue} />
+                                    <RecognizePictureDialog
+                                        image1={row.original.recognize_picture}
+                                        image2={row.original.recognize_picture_2}
+                                    />
                                 </Stack>
                             ) : (
                                 <>-</>
@@ -538,7 +541,7 @@ const SupervisorList = () => {
                 columns: [
                     {
                         accessorKey: "action_picture",
-                        header: "تصویر اقدام",
+                        header: "تصاویر اقدام",
                         id: "action_picture",
                         enableColumnFilter: false,
                         enableSorting: false,
@@ -554,10 +557,14 @@ const SupervisorList = () => {
                                 },
                             },
                         },
-                        Cell: ({ renderedCellValue }) => {
+                        Cell: ({ row }) => {
-                            return renderedCellValue ? (
+                            return row.original.action_picture ? (
                                 <Stack alignItems={"center"} justifyContent={"center"}>
-                                    <ActionPictureDialog image={renderedCellValue} />
+                                    <ActionPictureDialog
+                                        image1={row.original.action_picture}
+                                        image2={row.original.finish_picture}
+                                        image3={row.original.evidence_picture}
+                                    />
                                 </Stack>
                             ) : (
                                 <>-</>

src/components/infrastructure/tollHouse/Form/CreateTollHouse/ImageUpload.jsx

@@ -46,12 +46,12 @@ const ImageUpload = ({ name, value, onChange, error, title }) => {
         >
             <FormHelperText
                 sx={{
-                    fontSize: 14,
+                    fontSize: 12,
                     border: 1,
                     borderBottom: 0,
                     borderColor: "divider",
                     px: 2,
-                    py: 1,
+                    py: 0.5,
                     borderRadius: 2,
                     borderBottomRightRadius: 0,
                     borderBottomLeftRadius: 0,

src/components/layouts/dashboard/headerWithSidebar/index.jsx

@@ -9,7 +9,7 @@ import moment from "jalali-moment";
 import { headerMenu } from "@/core/utils/headerMenu";
 import SidebarMenu from "./Sidebar/SidebarMenu";
 
-const drawerWidth = 275;
+const drawerWidth = 280;
 const headersHeight = 51;
 
 const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({