LFFE-18 Merge branch 'feature/LFFE-18_confirm_title' into 'develop'

2023-11-07 10:19:39 +00:00
parent dd6da54379 1d1f0a1ffe
commit 691651196a
12 changed files with 187 additions and 92 deletions
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -161,7 +161,10 @@
    "updated_at": "تاریخ بروزرسانی",
    "navgan_id": "کد ناوگان",
    "vehicle_type": "نوع ماشین",
-    "state_name": "وضعیت درخواست"
+    "state_name": "وضعیت درخواست",
+    "confirm": "ارجاع به کارشناس ماشین آلات",
+    "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
+    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf"
  },
  "CommercialChief": {
    "name": "نام",
@@ -183,7 +186,10 @@
    "updated_at": "تاریخ بروزرسانی",
    "navgan_id": "کد ناوگان",
    "vehicle_type": "نوع ماشین",
-    "state_name": "وضعیت درخواست"
+    "state_name": "وضعیت درخواست",
+    "confirm": "تایید نهایی و ارجاع به بانک",
+    "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
+    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf"
  },
  "PassengerBoss": {
    "name": "نام",
@@ -194,7 +200,12 @@
    "updated_at": "تاریخ بروزرسانی",
    "navgan_id": "کد ناوگان",
    "vehicle_type": "نوع ماشین",
-    "state_name": "وضعیت درخواست"
+    "state_name": "وضعیت درخواست",
+    "confirm": "ارجاع به معاون حمل و نقل",
+    "upload_file": "صورت جلسه کارگروه استانی را بارگذاری کنید",
+    "upload_file_required": "وارد کردن صورت جلسه کارگروه استانی الزامیست",
+    "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
+    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf"
  },
  "RefahiProvinceManager": {
    "name": "نام",
@@ -262,7 +273,10 @@
    "updated_at": "تاریخ بروزرسانی",
    "navgan_id": "کد ناوگان",
    "vehicle_type": "نوع ماشین",
-    "state_name": "وضعیت درخواست"
+    "state_name": "وضعیت درخواست",
+    "confirm": "ارجاع به مدیر کل استانی",
+    "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
+    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf"
  },
  "InspectorExpert": {
    "name": "نام",
@@ -284,7 +298,12 @@
    "updated_at": "تاریخ بروزرسانی",
    "navgan_id": "کد ناوگان",
    "vehicle_type": "نوع ماشین",
-    "state_name": "وضعیت درخواست"
+    "state_name": "وضعیت درخواست",
+    "confirm": "ارجاع به کارگروه استانی",
+    "upload_file": "گزارش کارشناسی را بارگذاری کنید",
+    "upload_file_required": "وارد کردن گزارش کارشناسی الزامیست",
+    "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
+    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf"
  },
  "UserManagement": {
    "name": "نام",
@@ -322,7 +341,8 @@
    "toman": "تومان",
    "proposed_amount_error": "وارد کردن مقدار پیشنهادی الزامیست",
    "proposed_amount": "مقدار پیشنهادی",
-    "proposed_amount_positive": "مقدار پیشنهادی باید مثبت باشد"
+    "proposed_amount_positive": "مقدار پیشنهادی باید مثبت باشد",
+    "proposed_amount_number": "مقدار پیشنهادی باید عدد باشد"
  },
  "ReviseDialog": {
    "revise": " نیاز به ویرایش",
--- a/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx
@@ -1,11 +1,10 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
+import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
 import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
-import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import {useState} from "react";
 import PriceField from "@/core/components/PriceField";
 import * as Yup from "yup";
@@ -25,7 +24,18 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
            `${t("ConfirmDialog.proposed_amount_number")}`,
            (value) => !isNaN(value)
        ).test("positive", `${t("ConfirmDialog.proposed_amount_positive")}`, (value) => value >= 0)
-            .required(t("ConfirmDialog.proposed_amount_error"))
+            .required(t("ConfirmDialog.proposed_amount_error")),
+        confirm_img: Yup.mixed()
+            .required(t("MachinaryOffice.upload_file_required"))
+            .test('fileSize', `${t("MachinaryOffice.upload_file_unit")}`, (value) => {
+                // if (!value) return true; // Skip if no file is provided
+                return value.size <= 2 * 1024 * 1024; // 100KB limit (adjust as needed)
+            })
+            .test('fileType', `${t("MachinaryOffice.upload_file_format")}`, (value) => {
+                // if (!value) return true; // Skip if no file is provided
+                const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types
+                return allowedTypes.includes(value.type);
+            })
    });

    const formik = useFormik({
@@ -60,19 +70,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const handleUploadChange = (event) => {
        const uploadedFile = event.target?.files?.[0];
        if (uploadedFile) {
-            const maxFileSize = 2 * 1024 * 1024;
-            if (uploadedFile.size > maxFileSize) {
-                UploadFileNotification(t);
-                event.target.value = "";
-                return;
-            }
-
            const fileType = event.target?.files?.[0].type;
            const fileName = event.target?.files?.[0].name;
            setSelectedImage(URL.createObjectURL(uploadedFile));
            setfileType(fileType);
            setfileName(fileName);
-            formik.setFieldValue("confirm_img", uploadedFile);
+            formik.setFieldValue("confirm_img", uploadedFile).then(() => {
+                formik.setFieldTouched("confirm_img", true);
+            })
            setShowAddIcon(false);
        }
    };
@@ -129,7 +134,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                        />
                    </Stack>
                    <Stack>
-                        <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                        <Typography>{t("MachinaryOffice.upload_file")}</Typography>
                        <UploadSystem
                            selectedImage={selectedImage}
                            handleUploadChange={handleUploadChange} // Pass the updated function directly
@@ -140,9 +145,19 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                            fileName={fileName}
                            imageAlt={t("app_name")}
                            imageSize={[250, 150]}
+                            onBlur={formik.handleBlur("confirm_img")}
+                            error={
+                                formik.touched.confirm_img &&
+                                Boolean(formik.errors.confirm_img)
+                            }
                            setShowAddIcon={setShowAddIcon}
                            showAddIcon={showAddIcon}
                        />
+                        <FormHelperText
+                            error={Boolean(formik.errors.confirm_img)}
+                        >
+                            {formik.touched.confirm_img && formik.errors.confirm_img}
+                        </FormHelperText>
                    </Stack>
                </Stack>
            </DialogContent>
--- a/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx
+++ b/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx
@@ -1,9 +1,8 @@
 import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
 import {useTranslations} from "next-intl";
-import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import {useState} from "react";
 import ConfirmContent from "./ConfirmContent";
-
+import CallMadeIcon from '@mui/icons-material/CallMade';
 const Confirm = ({rowId, mutate}) => {
    const t = useTranslations();
    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
@@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => {
                        setOpenConfirmDialog(true)
                    }}
                >
-                    <ThumbUpAltIcon/>
+                    <CallMadeIcon/>
                </IconButton>
            </Tooltip>
            <Dialog fullWidth open={openConfirmDialog}
                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
-                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogTitle>{t("MachinaryOffice.confirm")}</DialogTitle>
                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
            </Dialog>
        </>
--- a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx
@@ -1,12 +1,12 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
+import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
 import {CONFIRM_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
-import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import {useState} from "react";
+import * as Yup from "yup";

 const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const t = useTranslations();
@@ -17,11 +17,24 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const requestServer = useRequest({auth: true})
    const {update_notification} = useNotification()

+    const validationSchema = Yup.object().shape({
+        confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error"))
+            .test('fileSize', `${t("NavganProvinceManager.upload_file_unit")}`, (value) => {
+                if (!value) return true
+                return value.size <= 2 * 1024 * 1024;
+            })
+            .test('fileType', `${t("NavganProvinceManager.upload_file_format")}`, (value) => {
+                if (!value) return true
+                const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types
+                return allowedTypes.includes(value.type);
+            })
+    })
+
    const formik = useFormik({
        initialValues: {
            description: "",
            confirm_img: null
-        },
+        }, validationSchema,
        onSubmit: (values, {setSubmitting}) => {
            const formData = new FormData();
            if (values.description != "") formData.append("expert_description", values.description);
@@ -47,19 +60,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const handleUploadChange = (event) => {
        const uploadedFile = event.target?.files?.[0];
        if (uploadedFile) {
-            const maxFileSize = 2 * 1024 * 1024;
-            if (uploadedFile.size > maxFileSize) {
-                UploadFileNotification(t);
-                event.target.value = "";
-                return;
-            }
-
            const fileType = event.target?.files?.[0].type;
            const fileName = event.target?.files?.[0].name;
            setSelectedImage(URL.createObjectURL(uploadedFile));
            setfileType(fileType);
            setfileName(fileName);
-            formik.setFieldValue("confirm_img", uploadedFile);
+            formik.setFieldValue("confirm_img", uploadedFile).then(() => {
+                formik.setFieldTouched("confirm_img", true);
+            })
            setShowAddIcon(false);
        }
    };
@@ -96,7 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                            imageSize={[250, 150]}
                            setShowAddIcon={setShowAddIcon}
                            showAddIcon={showAddIcon}
+                            onBlur={() => formik.handleBlur("confirm_img")}
+                            error={
+                                formik.touched.confirm_img &&
+                                Boolean(formik.errors.confirm_img)
+                            }
                        />
+                        <FormHelperText
+                            error={Boolean(formik.errors.confirm_img)}
+                        >
+                            {formik.touched.confirm_img && formik.errors.confirm_img}
+                        </FormHelperText>
                    </Stack>
                </Stack>
            </DialogContent>
@@ -106,7 +124,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                    {t("ConfirmDialog.button-cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                        disabled={formik.isSubmitting}>
+                        disabled={formik.isSubmitting || !formik.isValid}>
                    {t("ConfirmDialog.button-confirm")}
                </Button>
            </DialogActions>
--- a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx
+++ b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx
@@ -1,9 +1,8 @@
 import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
 import {useTranslations} from "next-intl";
-import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import {useState} from "react";
 import ConfirmContent from "./ConfirmContent";
-
+import CallMadeIcon from '@mui/icons-material/CallMade';
 const Confirm = ({rowId, mutate}) => {
    const t = useTranslations();
    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
@@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => {
                        setOpenConfirmDialog(true)
                    }}
                >
-                    <ThumbUpAltIcon/>
+                    <CallMadeIcon/>
                </IconButton>
            </Tooltip>
            <Dialog fullWidth open={openConfirmDialog}
                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
-                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogTitle>{t("NavganProvinceManager.confirm")}</DialogTitle>
                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
            </Dialog>
        </>
--- a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx
@@ -1,11 +1,10 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
+import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
 import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
-import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import {useState} from "react";
 import PriceField from "@/core/components/PriceField";
 import * as Yup from "yup";
@@ -25,7 +24,16 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
            `${t("ConfirmDialog.approved_amount_number")}`,
            (value) => !isNaN(value)
        ).test("positive", `${t("ConfirmDialog.approved_amount_positive")}`, (value) => value >= 0)
-            .required(t("ConfirmDialog.approved_amount_error"))
+            .required(t("ConfirmDialog.approved_amount_error")),
+        confirm_img: Yup.mixed()
+            .required(t("PassengerBoss.upload_file_required"))
+            .test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => {
+                return value.size <= 2 * 1024 * 1024;
+            })
+            .test('fileType', `${t("PassengerBoss.upload_file_format")}`, (value) => {
+                const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types
+                return allowedTypes.includes(value.type);
+            })
    });

    const formik = useFormik({
@@ -38,7 +46,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
            const formData = new FormData();
            formData.append("approved_amount", values.approved_amount);
            if (values.description != "") formData.append("expert_description", values.description);
-            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+            formData.append("attachment", values.confirm_img);

            requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', {
                data: formData,
@@ -60,19 +68,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const handleUploadChange = (event) => {
        const uploadedFile = event.target?.files?.[0];
        if (uploadedFile) {
-            const maxFileSize = 2 * 1024 * 1024;
-            if (uploadedFile.size > maxFileSize) {
-                UploadFileNotification(t);
-                event.target.value = "";
-                return;
-            }
-
            const fileType = event.target?.files?.[0].type;
            const fileName = event.target?.files?.[0].name;
            setSelectedImage(URL.createObjectURL(uploadedFile));
            setfileType(fileType);
            setfileName(fileName);
-            formik.setFieldValue("confirm_img", uploadedFile);
+            formik.setFieldValue("confirm_img", uploadedFile).then(() => {
+                formik.setFieldTouched("confirm_img", true);
+            })
            setShowAddIcon(false);
        }
    };
@@ -83,7 +86,6 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
            formik.setFieldValue("approved_amount", formik.values.approved_amount)
        }
    };
-
    return (
        <>
            <DialogContent>
@@ -129,7 +131,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                        />
                    </Stack>
                    <Stack>
-                        <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                        <Typography>{t("PassengerBoss.upload_file")}</Typography>
                        <UploadSystem
                            selectedImage={selectedImage}
                            handleUploadChange={handleUploadChange} // Pass the updated function directly
@@ -142,7 +144,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                            imageSize={[250, 150]}
                            setShowAddIcon={setShowAddIcon}
                            showAddIcon={showAddIcon}
+                            onBlur={() => formik.handleBlur("confirm_img")}
+                            error={
+                                formik.touched.confirm_img &&
+                                Boolean(formik.errors.confirm_img)
+                            }
                        />
+                        <FormHelperText
+                            error={Boolean(formik.errors.confirm_img)}
+                        >
+                            {formik.touched.confirm_img && formik.errors.confirm_img}
+                        </FormHelperText>
                    </Stack>
                </Stack>
            </DialogContent>
--- a/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx
+++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx
@@ -1,9 +1,8 @@
 import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
 import {useTranslations} from "next-intl";
-import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import {useState} from "react";
 import ConfirmContent from "./ConfirmContent";
-
+import CallMadeIcon from '@mui/icons-material/CallMade';
 const Confirm = ({rowId, mutate}) => {
    const t = useTranslations();
    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
@@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => {
                        setOpenConfirmDialog(true)
                    }}
                >
-                    <ThumbUpAltIcon/>
+                    <CallMadeIcon/>
                </IconButton>
            </Tooltip>
            <Dialog fullWidth open={openConfirmDialog}
                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
-                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogTitle>{t("PassengerBoss.confirm")}</DialogTitle>
                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
            </Dialog>
        </>
--- a/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx
@@ -1,12 +1,12 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
+import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
 import {CONFIRM_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
-import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import {useState} from "react";
+import * as Yup from "yup";

 const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const t = useTranslations();
@@ -17,11 +17,24 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const requestServer = useRequest({auth: true})
    const {update_notification} = useNotification()

+    const validationSchema = Yup.object().shape({
+        confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error"))
+            .test('fileSize', `${t("PassengerOffice.upload_file_unit")}`, (value) => {
+                if (!value) return true
+                return value.size <= 2 * 1024 * 1024;
+            })
+            .test('fileType', `${t("PassengerOffice.upload_file_format")}`, (value) => {
+                if (!value) return true
+                const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types
+                return allowedTypes.includes(value.type);
+            })
+    })
+
    const formik = useFormik({
        initialValues: {
            description: "",
            confirm_img: null
-        },
+        }, validationSchema,
        onSubmit: (values, {setSubmitting}) => {
            const formData = new FormData();
            if (values.description != "") formData.append("description", values.description);
@@ -47,19 +60,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const handleUploadChange = (event) => {
        const uploadedFile = event.target?.files?.[0];
        if (uploadedFile) {
-            const maxFileSize = 2 * 1024 * 1024;
-            if (uploadedFile.size > maxFileSize) {
-                UploadFileNotification(t);
-                event.target.value = "";
-                return;
-            }
-
            const fileType = event.target?.files?.[0].type;
            const fileName = event.target?.files?.[0].name;
            setSelectedImage(URL.createObjectURL(uploadedFile));
            setfileType(fileType);
            setfileName(fileName);
-            formik.setFieldValue("confirm_img", uploadedFile);
+            formik.setFieldValue("confirm_img", uploadedFile).then(() => {
+                formik.setFieldTouched("confirm_img", true);
+            })
            setShowAddIcon(false);
        }
    };
@@ -96,7 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                            imageSize={[250, 150]}
                            setShowAddIcon={setShowAddIcon}
                            showAddIcon={showAddIcon}
+                            onBlur={() => formik.handleBlur("confirm_img")}
+                            error={
+                                formik.touched.confirm_img &&
+                                Boolean(formik.errors.confirm_img)
+                            }
                        />
+                        <FormHelperText
+                            error={Boolean(formik.errors.confirm_img)}
+                        >
+                            {formik.touched.confirm_img && formik.errors.confirm_img}
+                        </FormHelperText>
                    </Stack>
                </Stack>
            </DialogContent>
@@ -106,7 +124,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                    {t("ConfirmDialog.button-cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                        disabled={formik.isSubmitting}>
+                        disabled={formik.isSubmitting || !formik.isValid}>
                    {t("ConfirmDialog.button-confirm")}
                </Button>
            </DialogActions>
--- a/src/components/dashboard/passenger-office/Form/ConfirmForm/index.jsx
+++ b/src/components/dashboard/passenger-office/Form/ConfirmForm/index.jsx
@@ -1,9 +1,8 @@
 import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
 import {useTranslations} from "next-intl";
-import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import {useState} from "react";
 import ConfirmContent from "./ConfirmContent";
-
+import CallMadeIcon from '@mui/icons-material/CallMade';
 const Confirm = ({rowId, mutate}) => {
    const t = useTranslations();
    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
@@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => {
                        setOpenConfirmDialog(true)
                    }}
                >
-                    <ThumbUpAltIcon/>
+                    <CallMadeIcon/>
                </IconButton>
            </Tooltip>
            <Dialog fullWidth open={openConfirmDialog}
                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
-                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogTitle>{t("PassengerOffice.confirm")}</DialogTitle>
                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
            </Dialog>
        </>
--- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx
@@ -1,12 +1,12 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
+import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
 import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
-import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import {useState} from "react";
+import * as Yup from "yup";

 const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const t = useTranslations();
@@ -17,11 +17,24 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const requestServer = useRequest({auth: true})
    const {update_notification} = useNotification()

+    const validationSchema = Yup.object().shape({
+        confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error"))
+            .test('fileSize', `${t("TransportationAssistance.upload_file_unit")}`, (value) => {
+                if (!value) return true
+                return value.size <= 2 * 1024 * 1024;
+            })
+            .test('fileType', `${t("TransportationAssistance.upload_file_format")}`, (value) => {
+                if (!value) return true
+                const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types
+                return allowedTypes.includes(value.type);
+            })
+    })
+
    const formik = useFormik({
        initialValues: {
            description: "",
            confirm_img: null
-        },
+        }, validationSchema,
        onSubmit: (values, {setSubmitting}) => {
            const formData = new FormData();
            if (values.description != "") formData.append("expert_description", values.description);
@@ -47,19 +60,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
    const handleUploadChange = (event) => {
        const uploadedFile = event.target?.files?.[0];
        if (uploadedFile) {
-            const maxFileSize = 2 * 1024 * 1024;
-            if (uploadedFile.size > maxFileSize) {
-                UploadFileNotification(t);
-                event.target.value = "";
-                return;
-            }
-
            const fileType = event.target?.files?.[0].type;
            const fileName = event.target?.files?.[0].name;
            setSelectedImage(URL.createObjectURL(uploadedFile));
            setfileType(fileType);
            setfileName(fileName);
-            formik.setFieldValue("confirm_img", uploadedFile);
+            formik.setFieldValue("confirm_img", uploadedFile).then(() => {
+                formik.setFieldTouched("confirm_img", true);
+            })
            setShowAddIcon(false);
        }
    };
@@ -96,7 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                            imageSize={[250, 150]}
                            setShowAddIcon={setShowAddIcon}
                            showAddIcon={showAddIcon}
+                            onBlur={() => formik.handleBlur("confirm_img")}
+                            error={
+                                formik.touched.confirm_img &&
+                                Boolean(formik.errors.confirm_img)
+                            }
                        />
+                        <FormHelperText
+                            error={Boolean(formik.errors.confirm_img)}
+                        >
+                            {formik.touched.confirm_img && formik.errors.confirm_img}
+                        </FormHelperText>
                    </Stack>
                </Stack>
            </DialogContent>
@@ -106,7 +124,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                    {t("ConfirmDialog.button-cancel")}
                </Button>
                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                        disabled={formik.isSubmitting}>
+                        disabled={formik.isSubmitting || !formik.isValid}>
                    {t("ConfirmDialog.button-confirm")}
                </Button>
            </DialogActions>
--- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx
@@ -1,9 +1,8 @@
 import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
 import {useTranslations} from "next-intl";
-import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import {useState} from "react";
 import ConfirmContent from "./ConfirmContent";
-
+import CallMadeIcon from '@mui/icons-material/CallMade';
 const Confirm = ({rowId, mutate}) => {
    const t = useTranslations();
    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
@@ -16,12 +15,12 @@ const Confirm = ({rowId, mutate}) => {
                        setOpenConfirmDialog(true)
                    }}
                >
-                    <ThumbUpAltIcon/>
+                    <CallMadeIcon/>
                </IconButton>
            </Tooltip>
            <Dialog fullWidth open={openConfirmDialog}
                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
-                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogTitle>{t("TransportationAssistance.confirm")}</DialogTitle>
                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
            </Dialog>
        </>
--- a/src/core/components/UploadSystem.jsx
+++ b/src/core/components/UploadSystem.jsx
@@ -10,7 +10,6 @@ const UploadSystem = ({
                          handleUploadChange,
                          fieldname,
                          setFieldValue,
-                          imageAlt,
                          imageSize,
                          fileType,
                          fileName,
@@ -19,7 +18,6 @@ const UploadSystem = ({
                      }) => {
    const t = useTranslations();
    const fileInputRef = useRef(null);
-
    const handleClick = () => {
        fileInputRef.current.click();
    };
@@ -69,13 +67,14 @@ const UploadSystem = ({
                            variant="subtitle2"
                            sx={{
                                fontWeight: 600,
-                                fontSize: "1rem",
+                                fontSize: "0.8rem",
                                color: "#a19d9d",
                                mt: 1,
                            }}
                            textAlign="center"
                        >
-                            {t("UploadSystem.upload_file")}
+                            {t("UploadSystem.upload_file_format")}<br/>
+                            {t("UploadSystem.upload_file_unit")}
                        </Typography>
                    </Box>
                </>