diff --git a/example.env.local b/example.env.local
index e8913b3..7b2ec17 100644
--- a/example.env.local
+++ b/example.env.local
@@ -1,5 +1,5 @@
 NEXT_PUBLIC_API_NAME = "Loan Facilities Dashboard"
-NEXT_PUBLIC_API_VERSION = "1.22.3"
+NEXT_PUBLIC_API_VERSION = "1.28.3"
 NEXT_PUBLIC_DEFAULT_LANGUAGE = "fa"
 NEXT_PUBLIC_DEFAULT_DIRECTION = "rtl"
 
diff --git a/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx
index 16b7ca3..ada0a12 100644
--- a/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/machinary-office/Form/ConfirmForm/ConfirmContent.jsx
@@ -1,26 +1,79 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
+import {
+    Button,
+    DialogActions,
+    DialogContent,
+    FormHelperText,
+    Grid,
+    LinearProgress,
+    Stack,
+    TextField,
+    Typography
+} from "@mui/material"
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
-import {CONFIRM_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
-import {useState} from "react";
+import {
+    CONFIRM_MACHINARY_OFFICE,
+    CONFIRM_MACHINARY_OFFICE_DETAILS
+} from "@/core/data/apiRoutes";
+import {useEffect, useState} from "react";
 import PriceField from "@/core/components/PriceField";
 import * as Yup from "yup";
+import CustomAccordion from "@/core/components/CustomAccordion";
+import ImageContent from "@/core/components/ImageContent";
 
 const vehicle_amount = {
     "اتوبوس": 7000,
     "مینی بوس": 2000,
 }
-const ConfirmContent = ({mutate, setOpenConfirmDialog, rowId, vehicle_type}) => {
+const ConfirmContent = ({mutate, setOpenConfirmDialog, rowId, vehicle_type , handleSizeChangeClick}) => {
     const t = useTranslations();
     const [selectedImage, setSelectedImage] = useState("");
     const [fileType, setfileType] = useState(null);
     const [fileName, setfileName] = useState(null);
     const [showAddIcon, setShowAddIcon] = useState(true);
-    const requestServer = useRequest({auth: true})
+    const requestServer = useRequest({auth: true , notification: false})
     const {update_notification} = useNotification()
+    const [accordionStates, setAccordionStates] = useState([]);
+    const [hasImageShown, setHasImageShown] = useState(false);
+    const [imageLink, setImageLink] = useState(null);
+    const [detailsList, setDetailsData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [isSkeleton, setIsSkeleton] = useState(false);
+
+    useEffect(() => {
+        requestServer(`${CONFIRM_MACHINARY_OFFICE_DETAILS}/${rowId}`, 'get')
+            .then((response) => {
+                const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
+                setAccordionStates(booleanData);
+                setDetailsData(response.data)
+            })
+            .catch(() => {
+            }).finally(() => {
+            setLoading(false);
+        });
+    }, []);
+
+    const handleAccordionChange = (index) => {
+        const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
+        setAccordionStates(newAccordionStates);
+
+        if (!newAccordionStates[index])
+        {
+            handleSizeChangeClick('sm');
+            setHasImageShown(false);
+            setIsSkeleton(false)
+        }
+        else {
+            handleSizeChangeClick('xl');
+            setHasImageShown(true);
+            setImageLink(detailsList.data.attachment_files[index])
+            setIsSkeleton(true)
+        }
+    };
+
     const validationSchema = Yup.object().shape({
         proposed_amount: Yup.mixed().test(
             "is-number",
@@ -91,77 +144,104 @@ const ConfirmContent = ({mutate, setOpenConfirmDialog, rowId, vehicle_type}) =>
         }
     };
 
+    const renderCustomAccordions = () => {
+        if (detailsList && detailsList.data && detailsList.data.attachment_files) {
+            return detailsList.data.attachment_files.map((file, index) => (
+                <CustomAccordion
+                    key={index}
+                    title={`${file.title}`}
+                    hasOpened={accordionStates[index]}
+                    hasAccordionOpened={null}
+                    handleAccordionChange={() => handleAccordionChange(index)}
+                    accordionIndex={index}
+                    downloadFile={file.attachment}
+                />
+            ));
+        }
+        return null;
+    };
+
     return (
         <>
             <DialogContent>
-                <Stack spacing={2}>
-                    <Stack>
-                        <TextField
-                            name="description"
-                            multiline
-                            rows={8}
-                            label={<>
-                                <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
-                            value={formik.values.description}
-                            onChange={handleDescriptionChange}
-                            fullWidth
-                            variant="outlined"
-                            sx={{mt: 1}}
-                        />
-                    </Stack>
-                    <Stack>
-                        <PriceField
-                            name="proposed_amount"
-                            label={<>
-                                <span>{t("ConfirmDialog.proposed_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
-                            type="text"
-                            inputProps={{
-                                inputMode: "number",
-                                min: 0,
-                                pattern: "[0-9]*",
-                            }}
-                            variant="outlined"
-                            value={formik.values.proposed_amount}
-                            onChange={handleAmountChange}
-                            onBlur={formik.handleBlur("proposed_amount")}
-                            error={
-                                formik.touched.proposed_amount &&
-                                Boolean(formik.errors.proposed_amount)
-                            }
-                            helperText={
-                                formik.touched.proposed_amount && formik.errors.proposed_amount
-                            }
-                            sx={{mt: 1}}
-                            fullWidth
-                        />
-                    </Stack>
-                    <Stack>
-                        <Typography>{t("MachinaryOffice.upload_file")}</Typography>
-                        <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, 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>
+                <Grid container spacing={2}>
+                    <Grid item xs={hasImageShown ? 6 : 12}>
+                        {loading ? <LinearProgress /> : renderCustomAccordions()}
+                        <Stack spacing={2}>
+                            <Stack>
+                                <TextField
+                                    name="description"
+                                    multiline
+                                    rows={8}
+                                    label={<>
+                                        <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                    value={formik.values.description}
+                                    onChange={handleDescriptionChange}
+                                    fullWidth
+                                    variant="outlined"
+                                    sx={{mt: 1}}
+                                />
+                            </Stack>
+                            <Stack>
+                                <PriceField
+                                    name="proposed_amount"
+                                    label={<>
+                                        <span>{t("ConfirmDialog.proposed_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
+                                    type="text"
+                                    inputProps={{
+                                        inputMode: "number",
+                                        min: 0,
+                                        pattern: "[0-9]*",
+                                    }}
+                                    variant="outlined"
+                                    value={formik.values.proposed_amount}
+                                    onChange={handleAmountChange}
+                                    onBlur={formik.handleBlur("proposed_amount")}
+                                    error={
+                                        formik.touched.proposed_amount &&
+                                        Boolean(formik.errors.proposed_amount)
+                                    }
+                                    helperText={
+                                        formik.touched.proposed_amount && formik.errors.proposed_amount
+                                    }
+                                    sx={{mt: 1}}
+                                    fullWidth
+                                />
+                            </Stack>
+                            <Stack>
+                                <Typography>{t("MachinaryOffice.upload_file")}</Typography>
+                                <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, 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>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Stack sx={{ display: hasImageShown ? 'flex' : 'none', alignItems: 'center', gap: 0.5 , justifyContent:'center'}}>
+                            <ImageContent  imageLink={imageLink} isSkeleton={isSkeleton} setIsSkeleton={setIsSkeleton}/>
+                        </Stack>
+                    </Grid>
+                </Grid>
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
diff --git a/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx b/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx
index 3affc7b..445aab3 100644
--- a/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx
+++ b/src/components/dashboard/machinary-office/Form/ConfirmForm/index.jsx
@@ -1,12 +1,25 @@
 import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
 import {useTranslations} from "next-intl";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import ConfirmContent from "./ConfirmContent";
 import CallMadeIcon from '@mui/icons-material/CallMade';
 
 const Confirm = ({rowId, mutate, vehicle_type}) => {
     const t = useTranslations();
     const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const [dialogSize, setDialogSize] = useState('sm');
+
+    useEffect(() => {
+        if (!openConfirmDialog) {
+            setDialogSize('sm');
+        }
+    }, [openConfirmDialog]);
+
+    const handleSizeChangeClick = (size) => {
+        setDialogSize(size);
+    };
+
+
     return (
         <>
             <Tooltip title={t("ConfirmDialog.confirm")}>
@@ -20,9 +33,9 @@ const Confirm = ({rowId, mutate, vehicle_type}) => {
                 </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'}}}>
+                    PaperProps={{sx: {transition: 'all .3s' , boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}>
                 <DialogTitle>{t("MachinaryOffice.confirm")}</DialogTitle>
-                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}
+                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} handleSizeChangeClick={handleSizeChangeClick}
                                 vehicle_type={vehicle_type}/>
             </Dialog>
         </>
diff --git a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx
index daa4df9..aa2107f 100644
--- a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx
@@ -1,21 +1,43 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
+import {
+    Box,
+    Button,
+    DialogActions,
+    DialogContent,
+    FormHelperText,
+    Grid,
+    LinearProgress,
+    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 {useState} from "react";
+import {
+    CONFIRM_NAVGAN_PROVINCE_MANAGER,
+    CONFIRM_PROVINCE_MANAGER_DETAILS
+} from "@/core/data/apiRoutes";
+import {useEffect, useState} from "react";
 import * as Yup from "yup";
+import CustomAccordion from "@/core/components/CustomAccordion";
+import ImageContent from "@/core/components/ImageContent";
 
-const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
+const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeClick}) => {
     const t = useTranslations();
     const [selectedImage, setSelectedImage] = useState("");
     const [fileType, setfileType] = useState(null);
     const [fileName, setfileName] = useState(null);
     const [showAddIcon, setShowAddIcon] = useState(true);
-    const requestServer = useRequest({auth: true})
+    const requestServer = useRequest({auth: true , notification: false})
     const {update_notification} = useNotification()
+    const [accordionStates, setAccordionStates] = useState([]);
+    const [hasImageShown, setHasImageShown] = useState(false);
+    const [imageLink, setImageLink] = useState(null);
+    const [detailsList, setDetailsData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [isSkeleton, setIsSkeleton] = useState(false);
 
     const validationSchema = Yup.object().shape({
         confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error"))
@@ -30,6 +52,37 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
             })
     })
 
+    useEffect(() => {
+        requestServer(`${CONFIRM_PROVINCE_MANAGER_DETAILS}/${rowId}`, 'get')
+            .then((response) => {
+                const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
+                setAccordionStates(booleanData);
+                setDetailsData(response.data)
+            })
+            .catch(() => {
+            }).finally(() => {
+            setLoading(false);
+        });
+    }, []);
+
+    const handleAccordionChange = (index) => {
+        const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
+        setAccordionStates(newAccordionStates);
+
+        if (!newAccordionStates[index])
+        {
+            handleSizeChangeClick('sm');
+            setHasImageShown(false);
+            setIsSkeleton(false)
+        }
+        else {
+            handleSizeChangeClick('xl');
+            setHasImageShown(true);
+            setImageLink(detailsList.data.attachment_files[index])
+            setIsSkeleton(true)
+        }
+    };
+
     const formik = useFormik({
         initialValues: {
             description: "",
@@ -71,51 +124,109 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
             setShowAddIcon(false);
         }
     };
+
+    const renderCustomAccordions = () => {
+        if (detailsList && detailsList.data && detailsList.data.attachment_files) {
+            return detailsList.data.attachment_files.map((file, index) => (
+                <CustomAccordion
+                    key={index}
+                    title={`${file.title}`}
+                    hasOpened={accordionStates[index]}
+                    hasAccordionOpened={null}
+                    handleAccordionChange={() => handleAccordionChange(index)}
+                    accordionIndex={index}
+                    downloadFile={file.attachment}
+                />
+            ));
+        }
+        return null;
+    };
+
+    const numberShowBox = () => {
+            return (
+                <>
+                    <Box  sx={{ border: '1px solid #ccc' ,p:2 , mb:2 ,  borderRadius: '8px'}}>
+                        <Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
+                        <Typography pt={1}>
+                            {isNaN((detailsList?.data?.proposed_amount) / 10)
+                                ? ""
+                                : ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
+                            {t("ConfirmDialog.unit")}
+                        </Typography>
+                    </Box>
+                    <Box  sx={{ border: '1px solid #ccc' ,p:2 ,  mb:2 , borderRadius: '8px'}}>
+                        <Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("secondary.passenger-boss")}</Typography>
+                        <Typography pt={1}>
+                            {isNaN((detailsList?.data?.approved_amount) / 10)
+                                ? ""
+                                : ((detailsList?.data?.approved_amount) / 10).toLocaleString()}{" "}
+                            {t("ConfirmDialog.unit")}
+                        </Typography>
+                    </Box>
+                </>
+            );
+    };
+
     return (
         <>
             <DialogContent>
-                <Stack spacing={2}>
-                    <Stack>
-                        <TextField
-                            name="description"
-                            multiline
-                            rows={8}
-                            label={<>
-                                <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
-                            value={formik.values.description}
-                            onChange={handleDescriptionChange}
-                            fullWidth
-                            variant="outlined"
-                            sx={{mt: 1}}
-                        />
-                    </Stack>
-                    <Stack>
-                        <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
-                        <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, 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>
+                <Grid container spacing={2}>
+                    <Grid item xs={hasImageShown ? 6 : 12}>
+                        {loading ? <LinearProgress /> :
+                            <>
+                            {numberShowBox()}
+                            {renderCustomAccordions()}
+                            </>
+                        }
+                        <Stack spacing={2}>
+                            <Stack>
+                                <TextField
+                                    name="description"
+                                    multiline
+                                    rows={8}
+                                    label={<>
+                                        <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                    value={formik.values.description}
+                                    onChange={handleDescriptionChange}
+                                    fullWidth
+                                    variant="outlined"
+                                    sx={{mt: 1}}
+                                />
+                            </Stack>
+                            <Stack>
+                                <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                                <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, 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>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Stack sx={{ display: hasImageShown ? 'flex' : 'none', alignItems: 'center', gap: 0.5 , justifyContent:'center'}}>
+                            <ImageContent  imageLink={imageLink} isSkeleton={isSkeleton} setIsSkeleton={setIsSkeleton}/>
+                        </Stack>
+                    </Grid>
+                </Grid>
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
diff --git a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx
index 2d983db..e8ca6ba 100644
--- a/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx
+++ b/src/components/dashboard/navgan-province-manager/Form/ConfirmForm/index.jsx
@@ -1,11 +1,22 @@
 import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
 import {useTranslations} from "next-intl";
-import {useState} from "react";
+import {useEffect, 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);
+    const [dialogSize, setDialogSize] = useState('sm');
+
+    useEffect(() => {
+        if (!openConfirmDialog) {
+            setDialogSize('sm');
+        }
+    }, [openConfirmDialog]);
+
+    const handleSizeChangeClick = (size) => {
+        setDialogSize(size);
+    };
     return (
         <>
             <Tooltip title={t("ConfirmDialog.confirm")}>
@@ -19,9 +30,9 @@ const Confirm = ({rowId, mutate}) => {
                 </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'}}}>
+                    PaperProps={{sx: {transition: 'all .3s', boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}>
                 <DialogTitle>{t("NavganProvinceManager.confirm")}</DialogTitle>
-                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
+                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}  handleSizeChangeClick={handleSizeChangeClick}/>
             </Dialog>
         </>
     )
diff --git a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx
index f0a8c12..8f3de83 100644
--- a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx
@@ -1,26 +1,80 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
+import {
+    Box,
+    Button,
+    DialogActions,
+    DialogContent,
+    FormHelperText,
+    Grid,
+    LinearProgress,
+    Stack,
+    TextField,
+    Typography
+} from "@mui/material"
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
-import {CONFIRM_PASSENGER_BOSS} from "@/core/data/apiRoutes";
-import {useState} from "react";
+import {
+    CONFIRM_PASSENGER_BOSS,
+    EXPORT_PASSENGER_BOSS_DETAILS,
+} from "@/core/data/apiRoutes";
+import {useEffect, useState} from "react";
 import PriceField from "@/core/components/PriceField";
 import * as Yup from "yup";
+import CustomAccordion from "@/core/components/CustomAccordion";
+import ImageContent from "@/core/components/ImageContent";
 
 const vehicle_amount = {
     "اتوبوس": 7000,
     "مینی بوس": 2000,
 }
-const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type}) => {
+const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type , handleSizeChangeClick}) => {
     const t = useTranslations();
     const [selectedImage, setSelectedImage] = useState("");
     const [fileType, setfileType] = useState(null);
     const [fileName, setfileName] = useState(null);
     const [showAddIcon, setShowAddIcon] = useState(true);
-    const requestServer = useRequest({auth: true})
-    const {update_notification} = useNotification()
+    const requestServer = useRequest({auth: true ,notification: false})
+    const {update_notification} = useNotification();
+    const [accordionStates, setAccordionStates] = useState([]);
+    const [hasImageShown, setHasImageShown] = useState(false);
+    const [imageLink, setImageLink] = useState(null);
+    const [detailsList, setDetailsData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [isSkeleton, setIsSkeleton] = useState(false);
+
+    useEffect(() => {
+        requestServer(`${EXPORT_PASSENGER_BOSS_DETAILS}/${rowId}`, 'get')
+            .then((response) => {
+                const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
+                setAccordionStates(booleanData);
+                setDetailsData(response.data)
+            })
+            .catch(() => {
+            }).finally(() => {
+            setLoading(false);
+        });
+    }, []);
+
+    const handleAccordionChange = (index) => {
+        const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
+        setAccordionStates(newAccordionStates);
+
+        if (!newAccordionStates[index])
+        {
+            handleSizeChangeClick('sm');
+            setHasImageShown(false);
+            setIsSkeleton(false)
+        }
+        else {
+            handleSizeChangeClick('xl');
+            setHasImageShown(true);
+            setImageLink(detailsList.data.attachment_files[index])
+            setIsSkeleton(true)
+        }
+    };
+
 
     const validationSchema = Yup.object().shape({
         approved_amount: Yup.mixed().test(
@@ -92,77 +146,125 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type}) =>
             formik.setFieldValue("approved_amount", formik.values.approved_amount)
         }
     };
+
+    const renderCustomAccordions = () => {
+        if (detailsList && detailsList.data && detailsList.data.attachment_files) {
+            return detailsList.data.attachment_files.map((file, index) => (
+                <CustomAccordion
+                    key={index}
+                    title={`${file.title}`}
+                    hasOpened={accordionStates[index]}
+                    hasAccordionOpened={null}
+                    handleAccordionChange={() => handleAccordionChange(index)}
+                    accordionIndex={index}
+                    downloadFile={file.attachment}
+                />
+            ));
+        }
+        return null;
+    };
+    const numberShowBox = () => {
+        return (
+            <>
+                <Box  sx={{ border: '1px solid #ccc' ,p:2 , mb:2 ,  borderRadius: '8px'}}>
+                    <Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
+                    <Typography pt={1}>
+                        {isNaN((detailsList?.data?.proposed_amount) / 10)
+                            ? ""
+                            : ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
+                        {t("ConfirmDialog.unit")}
+                    </Typography>
+                </Box>
+            </>
+        );
+    };
+
     return (
         <>
             <DialogContent>
-                <Stack spacing={2}>
-                    <Stack>
-                        <TextField
-                            name="description"
-                            multiline
-                            rows={8}
-                            label={<>
-                                <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
-                            value={formik.values.description}
-                            onChange={handleDescriptionChange}
-                            fullWidth
-                            variant="outlined"
-                            sx={{mt: 1}}
-                        />
-                    </Stack>
-                    <Stack>
-                        <PriceField
-                            name="approved_amount"
-                            label={<>
-                                <span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
-                            type="text"
-                            inputProps={{
-                                inputMode: "number",
-                                min: 0,
-                                pattern: "[0-9]*",
-                            }}
-                            variant="outlined"
-                            value={formik.values.approved_amount}
-                            onChange={handleAmountChange}
-                            onBlur={formik.handleBlur("approved_amount")}
-                            error={
-                                formik.touched.approved_amount &&
-                                Boolean(formik.errors.approved_amount)
-                            }
-                            helperText={
-                                formik.touched.approved_amount && formik.errors.approved_amount
-                            }
-                            sx={{mt: 1}}
-                            fullWidth
-                        />
-                    </Stack>
-                    <Stack>
-                        <Typography>{t("PassengerBoss.upload_file")}</Typography>
-                        <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, 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>
+                <Grid container spacing={2}>
+                    <Grid item xs={hasImageShown ? 6 : 12}>
+                        {loading ? <LinearProgress /> :
+                            <>
+                                {numberShowBox()}
+                                {renderCustomAccordions()}
+                            </>
+                        }
+                        <Stack spacing={2}>
+                            <Stack>
+                                <TextField
+                                    name="description"
+                                    multiline
+                                    rows={8}
+                                    label={<>
+                                        <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                    value={formik.values.description}
+                                    onChange={handleDescriptionChange}
+                                    fullWidth
+                                    variant="outlined"
+                                    sx={{mt: 1}}
+                                />
+                            </Stack>
+                            <Stack>
+                                <PriceField
+                                    name="approved_amount"
+                                    label={<>
+                                        <span>{t("ConfirmDialog.approved_amount")}</span><small>{t("ConfirmDialog.unit")}</small></>}
+                                    type="text"
+                                    inputProps={{
+                                        inputMode: "number",
+                                        min: 0,
+                                        pattern: "[0-9]*",
+                                    }}
+                                    variant="outlined"
+                                    value={formik.values.approved_amount}
+                                    onChange={handleAmountChange}
+                                    onBlur={formik.handleBlur("approved_amount")}
+                                    error={
+                                        formik.touched.approved_amount &&
+                                        Boolean(formik.errors.approved_amount)
+                                    }
+                                    helperText={
+                                        formik.touched.approved_amount && formik.errors.approved_amount
+                                    }
+                                    sx={{mt: 1}}
+                                    fullWidth
+                                />
+                            </Stack>
+                            <Stack>
+                                <Typography>{t("PassengerBoss.upload_file")}</Typography>
+                                <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, 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>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Stack sx={{ display: hasImageShown ? 'flex' : 'none', alignItems: 'center', gap: 0.5 , justifyContent:'center'}}>
+                            <ImageContent  imageLink={imageLink} isSkeleton={isSkeleton} setIsSkeleton={setIsSkeleton}/>
+                        </Stack>
+                    </Grid>
+                </Grid>
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
diff --git a/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx b/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx
index 004d119..055ea70 100644
--- a/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx
+++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm/index.jsx
@@ -1,12 +1,24 @@
 import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
 import {useTranslations} from "next-intl";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import ConfirmContent from "./ConfirmContent";
 import CallMadeIcon from '@mui/icons-material/CallMade';
 
 const Confirm = ({rowId, mutate, vehicle_type}) => {
     const t = useTranslations();
     const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const [dialogSize, setDialogSize] = useState('sm');
+
+    useEffect(() => {
+        if (!openConfirmDialog) {
+            setDialogSize('sm');
+        }
+    }, [openConfirmDialog]);
+
+    const handleSizeChangeClick = (size) => {
+        setDialogSize(size);
+    };
+
     return (
         <>
             <Tooltip title={t("ConfirmDialog.confirm")}>
@@ -20,9 +32,9 @@ const Confirm = ({rowId, mutate, vehicle_type}) => {
                 </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'}}}>
+                    PaperProps={{sx: {transition: 'all .3s' , boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}>
                 <DialogTitle>{t("PassengerBoss.confirm")}</DialogTitle>
-                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}
+                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}  handleSizeChangeClick={handleSizeChangeClick}
                                 vehicle_type={vehicle_type}/>
             </Dialog>
         </>
diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx
index fa9f438..076af16 100644
--- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx
@@ -17,7 +17,7 @@ import {CONFIRM_TRANSPORTATION_ASSISTANCE, GET_TRANSPORTATION_ASSISTANCE_DETAILS
 import {useEffect, useState} from "react";
 import * as Yup from "yup";
 import CustomAccordion from "@/core/components/CustomAccordion";
-import ImageContent from "@/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent";
+import ImageContent from "@/core/components/ImageContent";
 const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeClick}) => {
     const t = useTranslations();
     const [selectedImage, setSelectedImage] = useState("");
@@ -28,58 +28,44 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
     const [accordionStates, setAccordionStates] = useState([]);
     const [hasAccordionOpened, setHasAccordionOpened] = useState([]);
     const {update_notification} = useNotification();
-    const [hasImageShown, sethasImageShown] = useState(false);
-    const [imageLink, setimageLink] = useState(null);
+    const [hasImageShown, setHasImageShown] = useState(false);
+    const [imageLink, setImageLink] = useState(null);
     const [detailsList, setDetailsData] = useState(null);
     const [loading, setLoading] = useState(true);
     const [isSkeleton, setIsSkeleton] = useState(false);
-    const [isButtonDisabled, setIsButtonDisabled] = useState(true);
 
     useEffect(() => {
         requestServer(`${GET_TRANSPORTATION_ASSISTANCE_DETAILS}/${rowId}`, 'get')
             .then((response) => {
-                    const booleanArray = Array.from({ length: response.data.data.attachment_files.length }, () => false);
-                    setAccordionStates(booleanArray);
-                    setHasAccordionOpened(booleanArray);
+                    const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
+                    setAccordionStates(booleanData);
+                    setHasAccordionOpened(booleanData);
                     setDetailsData(response.data)
             })
-            .catch((error) => {
-
+            .catch(() => {
             }).finally(() => {
                     setLoading(false);
         });
     }, []);
 
-    useEffect(() => {
-        if (detailsList && detailsList.data && detailsList.data.attachment_files && detailsList.data.attachment_files.length !== 0) {
-            setIsButtonDisabled(true);
-        } else {
-            setIsButtonDisabled(false);
-        }
-    }, [detailsList]);
-
     const handleAccordionChange = (index) => {
         const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
         setAccordionStates(newAccordionStates);
 
-        if (newAccordionStates[index]===false)
+        if (!newAccordionStates[index])
         {
-            handleSizeChangeClick(index , false);
-            sethasImageShown(false);
+            handleSizeChangeClick('sm');
+            setHasImageShown(false);
             setIsSkeleton(false)
         }
         else {
-            handleSizeChangeClick(index , true);
-            sethasImageShown(true);
-            setimageLink(detailsList.data.attachment_files[index])
+            handleSizeChangeClick('xl');
+            setHasImageShown(true);
+            setImageLink(detailsList.data.attachment_files[index])
             setIsSkeleton(true)
             const newHasAccordionOpened = [...hasAccordionOpened];
             newHasAccordionOpened[index] = true;
             setHasAccordionOpened(newHasAccordionOpened);
-
-            if (newHasAccordionOpened.every(opened => opened === true)) {
-                setIsButtonDisabled(false)
-            }
         }
     };
 
@@ -92,7 +78,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
             })
             .test('fileType', `${t("TransportationAssistance.upload_file_format")}`, (value) => {
                 if (!value) return true
-                const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types
+                const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf'];
                 return allowedTypes.includes(value.type);
             })
     })
@@ -149,37 +135,47 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
                     hasAccordionOpened={hasAccordionOpened[index]}
                     handleAccordionChange={() => handleAccordionChange(index)}
                     accordionIndex={index}
-                    handleSizeChange={() => handleSizeChange(index)}
+                    downloadFile={file.attachment}
                 />
             ));
         }
         return null;
     };
-
+    const numberShowBox = () => {
+        return (
+            <>
+                <Box  sx={{ border: '1px solid #ccc' ,p:2 , mb:2 ,  borderRadius: '8px'}}>
+                    <Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
+                    <Typography pt={1}>
+                        {isNaN((detailsList?.data?.proposed_amount) / 10)
+                            ? ""
+                            : ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
+                        {t("ConfirmDialog.unit")}
+                    </Typography>
+                </Box>
+                <Box  sx={{ border: '1px solid #ccc' ,p:2 ,  mb:2 , borderRadius: '8px'}}>
+                    <Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("secondary.passenger-boss")}</Typography>
+                    <Typography pt={1}>
+                        {isNaN((detailsList?.data?.approved_amount) / 10)
+                            ? ""
+                            : ((detailsList?.data?.approved_amount) / 10).toLocaleString()}{" "}
+                        {t("ConfirmDialog.unit")}
+                    </Typography>
+                </Box>
+            </>
+        );
+    };
     return (
         <>
             <DialogContent>
                 <Grid container spacing={2}>
                     <Grid item xs={hasImageShown ? 6 : 12}>
-                        <Box  sx={{ border: '1px solid #ccc' ,p:2 , mb:2 ,  borderRadius: '8px'}}>
-                            <Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")}</Typography>
-                            <Typography pt={1}>
-                                {isNaN((detailsList?.data?.proposed_amount) / 10)
-                                    ? ""
-                                    : ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "}
-                                {t("ConfirmDialog.unit")}
-                            </Typography>
-                        </Box>
-                        <Box  sx={{ border: '1px solid #ccc' ,p:2 ,  mb:2 , borderRadius: '8px'}}>
-                            <Typography sx={{color: "primary.main" , fontWeight: 500}}>{t("ConfirmDialog.approved_amount")} {t("secondary.passenger-boss")}</Typography>
-                            <Typography pt={1}>
-                                {isNaN((detailsList?.data?.approved_amount) / 10)
-                                    ? ""
-                                    : ((detailsList?.data?.approved_amount) / 10).toLocaleString()}{" "}
-                                {t("ConfirmDialog.unit")}
-                            </Typography>
-                        </Box>
-                        {loading ? <LinearProgress /> : renderCustomAccordions()}
+                        {loading ? <LinearProgress /> :
+                            <>
+                                {numberShowBox()}
+                                {renderCustomAccordions()}
+                            </>
+                        }
                         <Stack spacing={2}>
                             <Stack>
                                 <TextField
@@ -237,7 +233,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
                 </Button>
                 <Button onClick={formik.handleSubmit} variant="contained" color="primary"
                         disabled={formik.isSubmitting || !formik.isValid ||
-                           isButtonDisabled }
+                            hasAccordionOpened.some((opened) => !opened) }
                 >
                     {t("ConfirmDialog.button-confirm")}
                 </Button>
diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx
index b33f30d..9747618 100644
--- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx
+++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx
@@ -14,14 +14,8 @@ const Confirm = ({rowId, mutate}) => {
         }
     }, [openConfirmDialog]);
 
-    const handleSizeChangeClick = (num , state) => {
-        if (state===true){
-        setDialogSize('xl');
-
-        }
-        else {
-            setDialogSize('sm');
-        }
+    const handleSizeChangeClick = (size) => {
+        setDialogSize(size);
     };
 
     return (
@@ -39,7 +33,7 @@ const Confirm = ({rowId, mutate}) => {
             <Dialog fullWidth open={openConfirmDialog}
                     PaperProps={{sx: {transition: 'all .3s', boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}  maxWidth={dialogSize}>
                 <DialogTitle>{t("TransportationAssistance.confirm")}</DialogTitle>
-                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog} setDialogSize={setDialogSize} handleSizeChangeClick={handleSizeChangeClick}/>
+                <ConfirmContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}  handleSizeChangeClick={handleSizeChangeClick}/>
             </Dialog>
         </>
     )
diff --git a/src/core/components/CustomAccordion.jsx b/src/core/components/CustomAccordion.jsx
index eb2efcc..20ba932 100644
--- a/src/core/components/CustomAccordion.jsx
+++ b/src/core/components/CustomAccordion.jsx
@@ -10,29 +10,18 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import VerifiedIcon from '@mui/icons-material/Verified';
 import Check from "@mui/icons-material/Check";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
-import VisibilityRoundedIcon from "@mui/icons-material/VisibilityRounded";
-import {useTranslations} from "next-intl";
 import {useState} from "react";
-
-const CustomAccordion = ({ title,
-                             hasOpened,
-                             hasAccordionOpened,
-                             handleAccordionChange,
-                             accordionIndex,
-                             handleSizeChange }) => {
-    const t = useTranslations();
+const CustomAccordion = ({ title, hasOpened, hasAccordionOpened, handleAccordionChange, accordionIndex , downloadFile}) => {
     const [downloadStatus, setDownloadStatus] = useState('initial');
-    const handleDownloadClick = (setStatus) => {
-
-        console.log(setStatus)
+    const handleDownloadClick = (setStatus , url) => {
         setStatus('downloading');
+        window.open(url, '_blank');
         setTimeout(() => {
             setStatus('completed');
             setTimeout(() => {
                 setStatus('initial');
-            }, 2500);
-        }, 2000);
-        // Perform the actual download logic here
+            }, 1200);
+        }, 1000);
     };
     return(
     <Accordion elevation={0} expanded={hasOpened || false} onChange={() => handleAccordionChange(accordionIndex)} sx={{
@@ -52,7 +41,7 @@ const CustomAccordion = ({ title,
             <Grid container direction="column" alignItems="center">
                 <Grid item>
                     <ButtonGroup variant="contained" aria-label="outlined primary button group">
-                        <Button onClick={() => handleDownloadClick(setDownloadStatus)}>
+                        <Button onClick={() => handleDownloadClick(setDownloadStatus , downloadFile)}>
                             {downloadStatus === 'completed' ? (
                                 <Check sx={{ color: 'white' }} fontSize="small" />
                             ) : downloadStatus === 'downloading' ? (
diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx b/src/core/components/ImageContent.jsx
similarity index 60%
rename from src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx
rename to src/core/components/ImageContent.jsx
index 9d3afa9..f99e2e8 100644
--- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx
+++ b/src/core/components/ImageContent.jsx
@@ -1,29 +1,30 @@
 import {Box, Skeleton, Stack} from "@mui/material";
 import {useEffect} from "react";
-const ImageContent = (link) => {
+const ImageContent = (prop) => {
+
     useEffect(() => {
         const timer = setTimeout(() => {
-            link.setIsSkeleton(false);
-        }, 1000);
+            prop.setIsSkeleton(false);
+        }, 1500);
 
         return () => clearTimeout(timer);
-    }, [link.isSkeleton]);
+    }, [prop.isSkeleton]);
 
-    const isPDF = link && link.imageLink && link.imageLink.attachment && link.imageLink.attachment.endsWith('.pdf');
+    const isPDF = prop.imageLink && prop.imageLink.attachment && prop.imageLink.attachment.endsWith('.pdf');
     return (
         <>
             <Stack sx={{width :"100%"}}>
-                {link.isSkeleton && (
+                {prop.isSkeleton && (
                     <Box  sx={{display:'flex' ,justifyContent:'center' , border: '1px solid #ccc' ,p:5 , height: '700px' , borderRadius: '8px' , width:'100%'}}>
                         <Skeleton variant="rectangular"  animation="wave" sx={{ width: '100%', height: '100%' }}  />
                     </Box>
                 )}
                 {isPDF ? (
-                        <embed src={link.imageLink.attachment} type="application/pdf" width="100%" height="700px" style={{ display: link.isSkeleton ? 'none' : 'block' }}/>
+                    <embed src={prop.imageLink.attachment} type="application/pdf" width="100%" height="700px" style={{ display: prop.isSkeleton ? 'none' : 'block' }}/>
                 ) : (
-                    link && link.imageLink && link.imageLink.attachment && (
-                        <Box sx={{display: link.isSkeleton ? 'none' : 'flex' ,justifyContent:'center' , border: '1px solid #ccc' , p:5 , height: '700px' , borderRadius: '8px',}}>
-                            <Box component="img" src={link.imageLink.attachment} alt="Image Preview" width="auto"  height="auto" sx={{maxHeight: '700px' , maxWidth:'100%'}}></Box>
+                    prop.imageLink && prop.imageLink.attachment && (
+                        <Box sx={{display: prop.isSkeleton ? 'none' : 'flex' ,justifyContent:'center' , border: '1px solid #ccc' , p:5 , height: '700px' , borderRadius: '8px',}}>
+                            <Box component="img" src={prop.imageLink.attachment} alt="Image Preview" width="auto"  height="auto" sx={{maxHeight: '700px' , maxWidth:'100%'}}></Box>
                         </Box>
                     )
                 )}
diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js
index d184ab2..2de4dd8 100644
--- a/src/core/data/apiRoutes.js
+++ b/src/core/data/apiRoutes.js
@@ -37,6 +37,9 @@ export const REJECT_PASSENGER_BOSS =
     BASE_URL + "/dashboard/province_working_group/reject";
 export const EXPORT_PASSENGER_BOSS =
     BASE_URL + "/dashboard/province_working_group/export";
+
+export const EXPORT_PASSENGER_BOSS_DETAILS =
+    BASE_URL + "/dashboard/province_working_group";
 //passenger boss
 
 //transportation assistance
@@ -61,6 +64,9 @@ export const GET_MACHINARY_OFFICE =
 export const CONFIRM_MACHINARY_OFFICE =
     BASE_URL + "/dashboard/machinery_expert/confirm";
 
+export const CONFIRM_MACHINARY_OFFICE_DETAILS =
+    BASE_URL + "/dashboard/machinery_expert";
+
 export const REJECT_MACHINARY_OFFICE =
     BASE_URL + "/dashboard/machinery_expert/reject";
 export const EXPORT_MACHINARY_OFFICE =
@@ -89,6 +95,9 @@ export const REJECT_NAVGAN_PROVINCE_MANAGER =
     BASE_URL + "/dashboard/province_manager/reject";
 export const EXPORT_NAVGAN_PROVINCE_MANAGER =
     BASE_URL + "/dashboard/province_manager/export";
+
+export const CONFIRM_PROVINCE_MANAGER_DETAILS =
+    BASE_URL + "/dashboard/province_manager";
 //navgan province manager
 
 // refahi province manager