From cd51ee14ab398e4f520b8d062e2f1b04a3055b4c Mon Sep 17 00:00:00 2001
From: Yasiu1376 <yasaman1376529@gmail.com>
Date: Sat, 22 Jul 2023 15:51:44 +0330
Subject: [PATCH 1/2] upload_file

---
 public/locales/fa/app.json                    |   8 +
 .../machinary-office/Form/ConfirmForm.jsx     |  30 ++++
 .../machinary-office/Form/RejectForm.jsx      |  31 ++++
 .../passenger-boss/Form/ConfirmForm.jsx       |  30 ++++
 .../passenger-boss/Form/RejectForm.jsx        |  31 ++++
 .../passenger-office/Form/ConfirmForm.jsx     |  84 ++++------
 .../passenger-office/Form/RejectForm.jsx      |  33 +++-
 .../province-manager/Form/ConfirmForm.jsx     |  84 ++++------
 .../province-manager/Form/RejectForm.jsx      |  30 ++++
 .../Form/RejectForm.jsx                       |  31 +++-
 src/core/components/UploadSystem.jsx          | 154 ++++++++++++++++++
 11 files changed, 434 insertions(+), 112 deletions(-)
 create mode 100644 src/core/components/UploadSystem.jsx

diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index bf81001..2a80338 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -172,5 +172,13 @@
     "button-cancel": "بستن",
     "description": "توضیحات",
     "description_error": "وارد کردن توضیحات الزامی است!"
+  },
+  "UploadSystem": {
+    "upload_file": "آپلود فایل",
+    "delete": "پاک کردن",
+    "button-reject": "عدم تایید",
+    "button-cancel": "بستن",
+    "description": "توضیحات",
+    "description_error": "وارد کردن توضیحات الزامی است!"
   }
 }
diff --git a/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx b/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
index 55ae682..d5d415b 100644
--- a/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
@@ -12,11 +12,16 @@ import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { useFormik } from "formik";
 import * as Yup from "yup";
+import UploadSystem from "@/core/components/UploadSystem";
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
   const [proposedAmount, setProposedAmount] = useState("");
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   //formik
   const validationSchema = Yup.object().shape({
@@ -47,6 +52,18 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
     formik.handleChange(event);
   };
 
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      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);
+      setShowAddIcon(false);
+    }
+  };
   return (
     <Dialog open={open} onClose={handleClose}>
       <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
@@ -86,6 +103,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           sx={{ mt: 1 }}
           fullWidth
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={formik.handleSubmit} color="primary">
diff --git a/src/components/dashboard/machinary-office/Form/RejectForm.jsx b/src/components/dashboard/machinary-office/Form/RejectForm.jsx
index 723f9a6..757fb47 100644
--- a/src/components/dashboard/machinary-office/Form/RejectForm.jsx
+++ b/src/components/dashboard/machinary-office/Form/RejectForm.jsx
@@ -12,10 +12,15 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
@@ -39,6 +44,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     formik.handleChange(event);
   };
 
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
+
   return (
     <Dialog open={open} onClose={handleClose}>
       <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +78,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={formik.handleSubmit} color="primary">
diff --git a/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx b/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
index 227971a..26d80c9 100644
--- a/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
@@ -12,11 +12,16 @@ import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { useFormik } from "formik";
 import * as Yup from "yup";
+import UploadSystem from "@/core/components/UploadSystem";
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
   const [proposedAmount, setProposedAmount] = useState("");
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   //formik
   const validationSchema = Yup.object().shape({
@@ -48,6 +53,18 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
     }
     formik.handleChange(event);
   };
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      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);
+      setShowAddIcon(false);
+    }
+  };
 
   return (
     <Dialog open={open} onClose={handleClose}>
@@ -88,6 +105,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           sx={{ mt: 1 }}
           fullWidth
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={formik.handleSubmit} color="primary">
diff --git a/src/components/dashboard/passenger-boss/Form/RejectForm.jsx b/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
index 18a48a7..bb350f8 100644
--- a/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
+++ b/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
@@ -12,10 +12,15 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,6 +43,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
+  
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
 
   return (
     <Dialog open={open} onClose={handleClose}>
@@ -60,6 +78,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={formik.handleSubmit} color="primary">
diff --git a/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx b/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
index 8d39af1..5f71ebf 100644
--- a/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
@@ -1,3 +1,4 @@
+import UploadSystem from "@/core/components/UploadSystem";
 import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
 import {
   Dialog,
@@ -17,8 +18,11 @@ const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
   const [description, setDescription] = useState("");
-  const [fileData, setFileData] = useState(null);
-  const inputRef = useRef(null);
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
+
 
   const formik = useFormik({
     initialValues: {
@@ -35,31 +39,23 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
     },
   });
 
-  const handleUploadClick = () => {
-    // 👇 We redirect the click event onto the hidden input element
-    inputRef.current?.click();
-  };
+ 
 
   const handleDescriptionChange = (event) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
 
-  const handleFileChange = (e) => {
-    const selectedFile = e.target.files[0];
-    if (selectedFile) {
-      const fileSizeInBytes = selectedFile.size;
-      if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
-        formik.setFieldError(
-          "fileData",
-          `File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
-        );
-        e.target.value = null;
-      } else {
-        setFileData(selectedFile);
-        formik.setFieldValue("fileData", selectedFile);
-        formik.setFieldError("fileData", "");
-      }
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      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);
+      setShowAddIcon(false);
     }
   };
 
@@ -80,39 +76,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
-        <div>
-          <label htmlFor="fileData">
-            <Button
-              variant="outlined"
-              color="primary"
-              onClick={handleUploadClick}
-              component="span"
-              sx={{ mt: 1, width: "100%" }}
-            >
-              {fileData ? (
-                <>
-                  Name : {fileData.name}
-                  <br />
-                  Size : {fileData.size}
-                </>
-              ) : (
-                <>{t("ConfirmDialog.choose_file")}</>
-              )}
-            </Button>
-          </label>
-          <input
-            id="fileData"
-            name="fileData"
-            type="file"
-            accept=".pdf, image/*"
-            ref={inputRef}
-            onChange={handleFileChange}
-            style={{ display: "none" }}
-          />
-        </div>
-        <FormHelperText error={Boolean(formik.errors.fileData)}>
-          {formik.errors.fileData && formik.errors.fileData}
-        </FormHelperText>
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={formik.handleSubmit} color="primary">
diff --git a/src/components/dashboard/passenger-office/Form/RejectForm.jsx b/src/components/dashboard/passenger-office/Form/RejectForm.jsx
index 149c480..7190af7 100644
--- a/src/components/dashboard/passenger-office/Form/RejectForm.jsx
+++ b/src/components/dashboard/passenger-office/Form/RejectForm.jsx
@@ -12,11 +12,16 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
   const [description, setDescription] = useState("");
-
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
+  
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
   });
@@ -38,7 +43,18 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
-
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
   return (
     <Dialog open={open} onClose={handleClose}>
       <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +76,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={formik.handleSubmit} color="primary">
diff --git a/src/components/dashboard/province-manager/Form/ConfirmForm.jsx b/src/components/dashboard/province-manager/Form/ConfirmForm.jsx
index b2ef723..7a9bcdf 100644
--- a/src/components/dashboard/province-manager/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/province-manager/Form/ConfirmForm.jsx
@@ -1,3 +1,4 @@
+import UploadSystem from "@/core/components/UploadSystem";
 import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
 import {
   Dialog,
@@ -17,8 +18,10 @@ const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
   const [description, setDescription] = useState("");
-  const [fileData, setFileData] = useState(null);
-  const inputRef = useRef(null);
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const formik = useFormik({
     initialValues: {
@@ -35,31 +38,21 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
     },
   });
 
-  const handleUploadClick = () => {
-    // 👇 We redirect the click event onto the hidden input element
-    inputRef.current?.click();
-  };
-
   const handleDescriptionChange = (event) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
 
-  const handleFileChange = (e) => {
-    const selectedFile = e.target.files[0];
-    if (selectedFile) {
-      const fileSizeInBytes = selectedFile.size;
-      if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
-        formik.setFieldError(
-          "fileData",
-          `File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
-        );
-        e.target.value = null;
-      } else {
-        setFileData(selectedFile);
-        formik.setFieldValue("fileData", selectedFile);
-        formik.setFieldError("fileData", "");
-      }
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      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);
+      setShowAddIcon(false);
     }
   };
 
@@ -80,39 +73,20 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
-        <div>
-          <label htmlFor="fileData">
-            <Button
-              variant="outlined"
-              color="primary"
-              onClick={handleUploadClick}
-              component="span"
-              sx={{ mt: 1, width: "100%" }}
-            >
-              {fileData ? (
-                <>
-                  Name : {fileData.name}
-                  <br />
-                  Size : {fileData.size}
-                </>
-              ) : (
-                <>{t("ConfirmDialog.choose_file")}</>
-              )}
-            </Button>
-          </label>
-          <input
-            id="fileData"
-            name="fileData"
-            type="file"
-            accept=".pdf, image/*"
-            ref={inputRef}
-            onChange={handleFileChange}
-            style={{ display: "none" }}
-          />
-        </div>
-        <FormHelperText error={Boolean(formik.errors.fileData)}>
-          {formik.errors.fileData && formik.errors.fileData}
-        </FormHelperText>
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
+        
       </DialogContent>
       <DialogActions>
         <Button onClick={formik.handleSubmit} color="primary">
diff --git a/src/components/dashboard/province-manager/Form/RejectForm.jsx b/src/components/dashboard/province-manager/Form/RejectForm.jsx
index 53f3c62..c1b91d9 100644
--- a/src/components/dashboard/province-manager/Form/RejectForm.jsx
+++ b/src/components/dashboard/province-manager/Form/RejectForm.jsx
@@ -12,10 +12,15 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,6 +43,18 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
 
   return (
     <Dialog open={open} onClose={handleClose}>
@@ -60,6 +77,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={formik.handleSubmit} color="primary">
diff --git a/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx b/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
index 262f9db..5e35c77 100644
--- a/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
@@ -12,9 +12,14 @@ import { useTranslations } from "next-intl";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
+import UploadSystem from "@/core/components/UploadSystem";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
   const t = useTranslations();
 
   const validationSchema = Yup.object().shape({
@@ -38,7 +43,18 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
-
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const fileType = event.target?.files?.[0].type;
+      const fileName = event.target?.files?.[0].name;
+      setSelectedImage(URL.createObjectURL(uploadedFile));
+      setfileType(fileType);
+      setfileName(fileName);
+      formik.setFieldValue("reject_img", uploadedFile);
+      setShowAddIcon(false);
+    }
+  };
   return (
     <Dialog open={open} onClose={handleClose}>
       <DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +76,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="reject_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={formik.handleSubmit} color="primary">
diff --git a/src/core/components/UploadSystem.jsx b/src/core/components/UploadSystem.jsx
new file mode 100644
index 0000000..8b89250
--- /dev/null
+++ b/src/core/components/UploadSystem.jsx
@@ -0,0 +1,154 @@
+import { Box, Button, Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import { useRef } from "react";
+
+const UploadSystem = ({
+  selectedImage,
+  setselectedImage,
+  handleUploadChange,
+  fieldname,
+  setFieldValue,
+  imageAlt,
+  imageSize,
+  fileType,
+  fileName,
+  setShowAddIcon,
+  showAddIcon,
+}) => {
+  const t = useTranslations();
+  const fileInputRef = useRef(null);
+
+  const handleClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleDeleteImage = () => {
+    setselectedImage(null);
+    setFieldValue(fieldname, null);
+    setShowAddIcon(true);
+  };
+
+  const isDocumentFormat = (fileType) => {
+    const documentFormats = [
+      "application/pdf",
+      "application/msword",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "application/vnd.ms-excel",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ];
+    return documentFormats.includes(fileType);
+  };
+
+  return (
+    <Box sx={{ width: imageSize[0], my: 1 }}>
+      {showAddIcon ? (
+        // Show the add icon and "Upload File" text when no image is selected
+        <>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              border: "1px solid #b3b3b3",
+              borderRadius: "10px",
+              cursor: "pointer",
+              padding: "5px",
+              width: imageSize[0],
+              height: imageSize[1],
+            }}
+            onClick={handleClick}
+          >
+            <AddIcon sx={{ fontSize: "2rem", color: "#a19d9d" }} />
+            <Typography
+              variant="subtitle2"
+              sx={{
+                fontWeight: 600,
+                fontSize: "1rem",
+                color: "#a19d9d",
+                mt: 1,
+              }}
+              textAlign="center"
+            >
+              {t("UploadSystem.upload_file")}
+            </Typography>
+          </Box>
+        </>
+      ) : (
+        // Show the uploaded content along with the delete button when an image or document is selected
+        <>
+          {fileType && fileType.startsWith("image/") ? (
+            <Image
+              width={imageSize[0]}
+              height={imageSize[1]}
+              src={selectedImage}
+              priority
+              alt={imageAlt}
+              onClick={handleClick}
+              style={{
+                cursor: "pointer",
+                objectFit: "contain",
+                border: "1px solid #b3b3b3",
+                borderRadius: "10px",
+                borderBottom: "unset",
+                padding: "5px",
+              }}
+            />
+          ) : (
+            fileType &&
+            isDocumentFormat(fileType) && (
+              <Box
+                sx={{
+                  width: imageSize[0],
+                  height: imageSize[1],
+                  display: "flex",
+                  border: "1px solid #b3b3b3",
+                  borderRadius: "10px",
+                  borderBottom: "unset",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+                onClick={handleClick}
+              >
+                <Typography
+                  margin={2}
+                  sx={{
+                    fontWeight: 600,
+                    fontSize: "1rem",
+                    color: "#a19d9d",
+                  }}
+                  textAlign="center"
+                >
+                  {fileName}
+                </Typography>
+              </Box>
+            )
+          )}
+          <Button
+            sx={{
+              width: "100%",
+            }}
+            color="error"
+            endIcon={<DeleteForeverIcon />}
+            variant="contained"
+            onClick={handleDeleteImage}
+          >
+            {t("UploadSystem.delete")}
+          </Button>
+        </>
+      )}
+      <input
+        type="file"
+        accept="image/*, .pdf, .doc, .docx, .xls, .xlsx"
+        style={{ display: "none" }}
+        onChange={handleUploadChange}
+        ref={fileInputRef}
+      />
+    </Box>
+  );
+};
+
+export default UploadSystem;

From 8866cbc52fbb69141a4c86daab91c69689060e0f Mon Sep 17 00:00:00 2001
From: Yasiu1376 <yasaman1376529@gmail.com>
Date: Sat, 22 Jul 2023 17:26:19 +0330
Subject: [PATCH 2/2] upload file

---
 public/locales/fa/app.json                    |  5 +--
 .../machinary-office/Form/ConfirmForm.jsx     |  8 ++++
 .../machinary-office/Form/RejectForm.jsx      |  8 ++++
 .../passenger-boss/Form/ConfirmForm.jsx       |  8 ++++
 .../passenger-boss/Form/RejectForm.jsx        | 10 ++++-
 .../passenger-office/Form/ConfirmForm.jsx     | 15 ++++----
 .../passenger-office/Form/RejectForm.jsx      | 10 ++++-
 .../province-manager/Form/ConfirmForm.jsx     | 13 ++++---
 .../province-manager/Form/RejectForm.jsx      |  8 ++++
 .../Form/ConfirmForm.jsx                      | 38 +++++++++++++++++++
 .../Form/RejectForm.jsx                       |  8 ++++
 src/core/components/UploadSystem.jsx          |  7 +++-
 .../notifications/UploadFileNotification.jsx  | 37 ++++++++++++++++++
 13 files changed, 155 insertions(+), 20 deletions(-)
 create mode 100644 src/core/components/notifications/UploadFileNotification.jsx

diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index a4791a5..a7b7a9a 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -177,9 +177,6 @@
   "UploadSystem": {
     "upload_file": "آپلود فایل",
     "delete": "پاک کردن",
-    "button-reject": "عدم تایید",
-    "button-cancel": "بستن",
-    "description": "توضیحات",
-    "description_error": "وارد کردن توضیحات الزامی است!"
+    "uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
   }
 }
diff --git a/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx b/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
index f868aa0..6166ff4 100644
--- a/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
@@ -13,9 +13,12 @@ import { useState } from "react";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [proposedAmount, setProposedAmount] = useState("");
   const [description, setDescription] = useState("");
   const [selectedImage, setSelectedImage] = useState("");
@@ -55,6 +58,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const handleUploadChange = (event) => {
     const uploadedFile = event.target?.files?.[0];
     if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
       const fileType = event.target?.files?.[0].type;
       const fileName = event.target?.files?.[0].name;
       setSelectedImage(URL.createObjectURL(uploadedFile));
diff --git a/src/components/dashboard/machinary-office/Form/RejectForm.jsx b/src/components/dashboard/machinary-office/Form/RejectForm.jsx
index 69f7e61..70c606c 100644
--- a/src/components/dashboard/machinary-office/Form/RejectForm.jsx
+++ b/src/components/dashboard/machinary-office/Form/RejectForm.jsx
@@ -13,9 +13,12 @@ import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
 import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
   const [selectedImage, setSelectedImage] = useState("");
   const [fileType, setfileType] = useState(null);
@@ -47,6 +50,11 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const handleUploadChange = (event) => {
     const uploadedFile = event.target?.files?.[0];
     if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
       const fileType = event.target?.files?.[0].type;
       const fileName = event.target?.files?.[0].name;
       setSelectedImage(URL.createObjectURL(uploadedFile));
diff --git a/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx b/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
index d8f3b00..788305c 100644
--- a/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
@@ -13,9 +13,12 @@ import { useState } from "react";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [proposedAmount, setProposedAmount] = useState("");
   const [description, setDescription] = useState("");
   const [selectedImage, setSelectedImage] = useState("");
@@ -56,6 +59,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const handleUploadChange = (event) => {
     const uploadedFile = event.target?.files?.[0];
     if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
       const fileType = event.target?.files?.[0].type;
       const fileName = event.target?.files?.[0].name;
       setSelectedImage(URL.createObjectURL(uploadedFile));
diff --git a/src/components/dashboard/passenger-boss/Form/RejectForm.jsx b/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
index d430af5..eeb23c1 100644
--- a/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
+++ b/src/components/dashboard/passenger-boss/Form/RejectForm.jsx
@@ -13,9 +13,12 @@ import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
 import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
   const [selectedImage, setSelectedImage] = useState("");
   const [fileType, setfileType] = useState(null);
@@ -43,10 +46,15 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
     setDescription(event.target.value);
     formik.handleChange(event);
   };
-  
+
   const handleUploadChange = (event) => {
     const uploadedFile = event.target?.files?.[0];
     if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
       const fileType = event.target?.files?.[0].type;
       const fileName = event.target?.files?.[0].name;
       setSelectedImage(URL.createObjectURL(uploadedFile));
diff --git a/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx b/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
index 86eced4..645c2f6 100644
--- a/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
@@ -1,5 +1,7 @@
 import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
+import useDirection from "@/lib/app/hooks/useDirection";
 import {
   Dialog,
   DialogTitle,
@@ -8,39 +10,33 @@ import {
   DialogActions,
   Button,
   TextField,
-  FormHelperText,
 } from "@mui/material";
 import { useFormik } from "formik";
 import { useTranslations } from "next-intl";
 import { useRef, useState } from "react";
-const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
   const [selectedImage, setSelectedImage] = useState("");
   const [fileType, setfileType] = useState(null);
   const [fileName, setfileName] = useState(null);
   const [showAddIcon, setShowAddIcon] = useState(true);
 
-
   const formik = useFormik({
     initialValues: {
       description: "",
-      fileData: null,
     },
     onSubmit: () => {
       const formData = new FormData();
       if (description !== "")
         formData.append("expert_description", description);
-      if (fileData !== null) formData.append("file", fileData);
       handleClose();
       confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
     },
   });
 
- 
-
   const handleDescriptionChange = (event) => {
     setDescription(event.target.value);
     formik.handleChange(event);
@@ -49,6 +45,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const handleUploadChange = (event) => {
     const uploadedFile = event.target?.files?.[0];
     if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
       const fileType = event.target?.files?.[0].type;
       const fileName = event.target?.files?.[0].name;
       setSelectedImage(URL.createObjectURL(uploadedFile));
diff --git a/src/components/dashboard/passenger-office/Form/RejectForm.jsx b/src/components/dashboard/passenger-office/Form/RejectForm.jsx
index 5ee55f1..d4ab6d6 100644
--- a/src/components/dashboard/passenger-office/Form/RejectForm.jsx
+++ b/src/components/dashboard/passenger-office/Form/RejectForm.jsx
@@ -13,15 +13,18 @@ import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
 import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
   const [selectedImage, setSelectedImage] = useState("");
   const [fileType, setfileType] = useState(null);
   const [fileName, setfileName] = useState(null);
   const [showAddIcon, setShowAddIcon] = useState(true);
-  
+
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
   });
@@ -46,6 +49,11 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const handleUploadChange = (event) => {
     const uploadedFile = event.target?.files?.[0];
     if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
       const fileType = event.target?.files?.[0].type;
       const fileName = event.target?.files?.[0].name;
       setSelectedImage(URL.createObjectURL(uploadedFile));
diff --git a/src/components/dashboard/province-manager/Form/ConfirmForm.jsx b/src/components/dashboard/province-manager/Form/ConfirmForm.jsx
index 0a8078f..e5c04ec 100644
--- a/src/components/dashboard/province-manager/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/province-manager/Form/ConfirmForm.jsx
@@ -1,5 +1,7 @@
 import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
+import useDirection from "@/lib/app/hooks/useDirection";
 import {
   Dialog,
   DialogTitle,
@@ -8,15 +10,14 @@ import {
   DialogActions,
   Button,
   TextField,
-  FormHelperText,
 } from "@mui/material";
 import { useFormik } from "formik";
 import { useTranslations } from "next-intl";
 import { useRef, useState } from "react";
-const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
   const [selectedImage, setSelectedImage] = useState("");
   const [fileType, setfileType] = useState(null);
@@ -26,13 +27,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const formik = useFormik({
     initialValues: {
       description: "",
-      fileData: null,
     },
     onSubmit: () => {
       const formData = new FormData();
       if (description !== "")
         formData.append("expert_description", description);
-      if (fileData !== null) formData.append("file", fileData);
       handleClose();
       confirmData(CONFIRM_PROVINCE_MANAGER, rowId, formData);
     },
@@ -46,6 +45,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const handleUploadChange = (event) => {
     const uploadedFile = event.target?.files?.[0];
     if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
       const fileType = event.target?.files?.[0].type;
       const fileName = event.target?.files?.[0].name;
       setSelectedImage(URL.createObjectURL(uploadedFile));
@@ -86,7 +90,6 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           setShowAddIcon={setShowAddIcon}
           showAddIcon={showAddIcon}
         />
-        
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/province-manager/Form/RejectForm.jsx b/src/components/dashboard/province-manager/Form/RejectForm.jsx
index ec95a1b..430c5b2 100644
--- a/src/components/dashboard/province-manager/Form/RejectForm.jsx
+++ b/src/components/dashboard/province-manager/Form/RejectForm.jsx
@@ -13,9 +13,12 @@ import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
 import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
   const [selectedImage, setSelectedImage] = useState("");
   const [fileType, setfileType] = useState(null);
@@ -46,6 +49,11 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const handleUploadChange = (event) => {
     const uploadedFile = event.target?.files?.[0];
     if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
       const fileType = event.target?.files?.[0].type;
       const fileName = event.target?.files?.[0].name;
       setSelectedImage(URL.createObjectURL(uploadedFile));
diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
index e11680e..93a76e8 100644
--- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm.jsx
@@ -1,4 +1,6 @@
+import UploadSystem from "@/core/components/UploadSystem";
 import { CONFIRM_TRANSPORTATION_ASSISTANCE } from "@/core/data/apiRoutes";
+import useDirection from "@/lib/app/hooks/useDirection";
 import {
   Dialog,
   DialogTitle,
@@ -11,10 +13,16 @@ import {
 import { useFormik } from "formik";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
+  const { directionApp } = useDirection();
   const [description, setDescription] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
+  const [fileType, setfileType] = useState(null);
+  const [fileName, setfileName] = useState(null);
+  const [showAddIcon, setShowAddIcon] = useState(true);
 
   const formik = useFormik({
     initialValues: {
@@ -31,7 +39,24 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const handleDescriptionChange = (event) => {
     setDescription(event.target.value);
   };
+  const handleUploadChange = (event) => {
+    const uploadedFile = event.target?.files?.[0];
+    if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        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);
+      setShowAddIcon(false);
+    }
+  };
   return (
     <Dialog open={open}>
       <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
@@ -48,6 +73,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           variant="outlined"
           sx={{ mt: 1 }}
         />
+        <UploadSystem
+          selectedImage={selectedImage}
+          handleUploadChange={handleUploadChange} // Pass the updated function directly
+          setselectedImage={setSelectedImage}
+          setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+          fieldname="confirm_img"
+          fileType={fileType}
+          fileName={fileName}
+          imageAlt={t("app_name")}
+          imageSize={[250 /*width*/, 150 /*height*/]}
+          setShowAddIcon={setShowAddIcon}
+          showAddIcon={showAddIcon}
+        />
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="secondary" autoFocus>
diff --git a/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx b/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
index abf8f74..a022a33 100644
--- a/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
@@ -13,6 +13,8 @@ import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useState } from "react";
 import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
 
 const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const [description, setDescription] = useState("");
@@ -21,6 +23,7 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const [fileName, setfileName] = useState(null);
   const [showAddIcon, setShowAddIcon] = useState(true);
   const t = useTranslations();
+   const { directionApp } = useDirection();
 
   const validationSchema = Yup.object().shape({
     description: Yup.string().required(t("RejectDialog.description_error")),
@@ -46,6 +49,11 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
   const handleUploadChange = (event) => {
     const uploadedFile = event.target?.files?.[0];
     if (uploadedFile) {
+      const maxFileSize = 2 * 1024 * 1024;
+      if (uploadedFile.size > maxFileSize) {
+        UploadFileNotification(directionApp, t);
+        return;
+      }
       const fileType = event.target?.files?.[0].type;
       const fileName = event.target?.files?.[0].name;
       setSelectedImage(URL.createObjectURL(uploadedFile));
diff --git a/src/core/components/UploadSystem.jsx b/src/core/components/UploadSystem.jsx
index 8b89250..f8cbc48 100644
--- a/src/core/components/UploadSystem.jsx
+++ b/src/core/components/UploadSystem.jsx
@@ -92,7 +92,8 @@ const UploadSystem = ({
                 cursor: "pointer",
                 objectFit: "contain",
                 border: "1px solid #b3b3b3",
-                borderRadius: "10px",
+                borderTopRightRadius: "10px",
+                borderTopLeftRadius: "10px",
                 borderBottom: "unset",
                 padding: "5px",
               }}
@@ -106,10 +107,12 @@ const UploadSystem = ({
                   height: imageSize[1],
                   display: "flex",
                   border: "1px solid #b3b3b3",
-                  borderRadius: "10px",
+                  borderTopRightRadius: "10px",
+                  borderTopLeftRadius: "10px",
                   borderBottom: "unset",
                   alignItems: "center",
                   justifyContent: "center",
+                  cursor: "pointer",
                 }}
                 onClick={handleClick}
               >
diff --git a/src/core/components/notifications/UploadFileNotification.jsx b/src/core/components/notifications/UploadFileNotification.jsx
new file mode 100644
index 0000000..d06783b
--- /dev/null
+++ b/src/core/components/notifications/UploadFileNotification.jsx
@@ -0,0 +1,37 @@
+import DangerousIcon from "@mui/icons-material/Dangerous";
+import { Box, Typography } from "@mui/material";
+import { toast } from "react-toastify";
+
+const UploadFileNotification = (directionApp, t) => {
+  toast(
+    ({ closeToast }) => (
+      <>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "start",
+            justifyContent: "start",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center" }}>
+            <DangerousIcon color="error" sx={{ mr: 1.6 }} />
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <Typography color="error" variant="button">
+                {t("UploadSystem.uploadfile_error")}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </>
+    ),
+    {
+      position: directionApp === "ltr" ? "top-left" : "top-right",
+      autoClose: false,
+      closeOnClick: false,
+      draggable: false,
+    }
+  );
+};
+
+export default UploadFileNotification;