confirm transportation assistance show tanafos and sakht period

public/locales/fa/app.json

@@ -369,6 +369,7 @@
     "tanafos_amount_number": "دوره تنفس باید عدد باشد",
     "toman": "میلیون تومان",
     "tanafos_amount_month": "ماه",
+    "approved_amount_title": "مبلغ تصویب شده کارگروه",
     "sakht_amount_day": "روز",
     "proposed_amount_error": "وارد کردن مقدار پیشنهادی الزامیست",
     "proposed_amount": "مبلغ پیشنهادی",

src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx

@@ -2,7 +2,6 @@ import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
 import {
-    Box,
     Button,
     DialogActions,
     DialogContent,
@@ -20,6 +19,7 @@ import {useEffect, useState} from "react";
 import * as Yup from "yup";
 import CustomAccordion from "@/core/components/CustomAccordion";
 import ImageContent from "@/core/components/ImageContent";
+import NumberShowBox from "@/core/components/NumberShowBox";
 
 const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeClick}) => {
     const t = useTranslations();
@@ -142,34 +142,6 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
         }
         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.proposed_amount")}</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>
@@ -177,7 +149,26 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
                     <Grid item xs={hasImageShown ? 6 : 12}>
                         {loading ? <LinearProgress/> :
                             <>
-                                {numberShowBox()}
+                                <NumberShowBox
+                                    showNumber={(detailsList?.data?.proposed_amount) / 10}
+                                    headerTitle={t("ConfirmDialog.proposed_amount")}
+                                    unitTitle={t("ConfirmDialog.unit")}
+                                />
+                                <NumberShowBox
+                                    showNumber={(detailsList?.data?.approved_amount) / 10}
+                                    headerTitle={t("ConfirmDialog.approved_amount_title")}
+                                    unitTitle={t("ConfirmDialog.unit")}
+                                />
+                                <NumberShowBox
+                                    showNumber={detailsList?.data?.sakht_amount}
+                                    headerTitle={t("ConfirmDialog.sakht_amount")}
+                                    unitTitle={t("ConfirmDialog.sakht_amount_day")}
+                                />
+                                <NumberShowBox
+                                    showNumber={detailsList?.data?.tanafos_amount}
+                                    headerTitle={t("ConfirmDialog.tanafos_amount")}
+                                    unitTitle={t("ConfirmDialog.tanafos_amount_month")}
+                                />
                                 {renderCustomAccordions()}
                             </>
                         }

src/components/dashboard/transportation-assistance/index.jsx

@@ -194,9 +194,14 @@ function DashboardTransportationAssistanceComponent() {
         ],
         []
     );
+    const data = [{
+        id: 1,
+        vehicle_type: "مینی بوس"
+    }]
     return (
         <Box sx={{px: 3}}>
             <DataTable
+                data={data}
                 tableUrl={GET_TRANSPORTATION_ASSISTANCE}
                 columns={columns}
                 selectableRow={false}