get factor invoice

package-lock.json

@@ -13,9 +13,11 @@
         "@tanstack/react-query": "^5.62.8",
         "axios": "^1.7.9",
         "formik": "^2.4.6",
+        "html2canvas": "^1.4.1",
         "i18next": "^24.2.0",
         "iconsax-react": "^0.0.8",
         "js-cookie": "^2.2.1",
+        "jspdf": "^3.0.1",
         "moment-jalaali": "^0.10.4",
         "rc-rate": "^2.13.0",
         "react": "^19.0.0",
@@ -1582,13 +1584,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.26.0",
+      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
-      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
       "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
       "engines": {
         "node": ">=6.9.0"
       }
@@ -3333,6 +3332,13 @@
       "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
       "license": "MIT"
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
@@ -3381,7 +3387,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
@@ -3811,6 +3817,18 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/attr-accept": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
@@ -3934,6 +3952,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -4004,6 +4031,18 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -4102,6 +4141,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4247,6 +4306,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.42.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.42.0.tgz",
+      "integrity": "sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.41.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.41.0.tgz",
@@ -4286,6 +4357,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4452,6 +4532,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dompurify": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz",
+      "integrity": "sha512-mLPd29uoRe9HpvwP2TxClGQBzGXeEC/we/q+bFlmPPmj2p2Ugl3r6ATu/UU1v77DXNcehiBg9zsr1dREyA/dJQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -4977,6 +5067,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -5610,6 +5706,19 @@
         "void-elements": "3.1.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/i18next": {
       "version": "24.2.0",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.0.tgz",
@@ -6348,6 +6457,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jspdf": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.1.tgz",
+      "integrity": "sha512-qaGIxqxetdoNnFQQXxTKUD9/Z7AloLaw94fFsOiJMxbfYdBbrBuhWmbzI8TVjrw7s3jBY1PFHofBKMV/wZPapg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -6893,6 +7020,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7182,6 +7316,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -7533,10 +7677,11 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
+      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
@@ -7672,6 +7817,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.29.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.29.1.tgz",
@@ -8069,6 +8224,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -8357,6 +8522,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/swiper": {
       "version": "11.2.1",
       "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.1.tgz",
@@ -8498,6 +8673,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -8918,6 +9102,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/vite": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.5.tgz",

package.json

@@ -15,9 +15,11 @@
     "@tanstack/react-query": "^5.62.8",
     "axios": "^1.7.9",
     "formik": "^2.4.6",
+    "html2canvas": "^1.4.1",
     "i18next": "^24.2.0",
     "iconsax-react": "^0.0.8",
     "js-cookie": "^2.2.1",
+    "jspdf": "^3.0.1",
     "moment-jalaali": "^0.10.4",
     "rc-rate": "^2.13.0",
     "react": "^19.0.0",

src/components/PDFGenerator.tsx

@@ -0,0 +1,67 @@
+import { jsPDF } from 'jspdf';
+import html2canvas from 'html2canvas';
+import { FC } from 'react';
+import Button from './Button';
+import { useTranslation } from 'react-i18next';
+
+interface PDFGeneratorProps {
+    elementId: string;
+    fileName: string;
+}
+
+const PDFGenerator: FC<PDFGeneratorProps> = ({ elementId, fileName }) => {
+    const { t } = useTranslation('global');
+
+    const generatePDF = async () => {
+        const element = document.getElementById(elementId);
+        if (!element) return;
+
+        // تنظیم استایل‌های موقت برای PDF
+        const originalStyles = element.getAttribute('style') || '';
+        element.setAttribute('style', `
+            ${originalStyles}
+            width: 800px !important;
+            margin: 0 auto !important;
+            padding: 20px !important;
+        `);
+
+        const canvas = await html2canvas(element, {
+            scale: 1.5, // کاهش کیفیت برای سایز کمتر
+            useCORS: true,
+            logging: false,
+            backgroundColor: '#ffffff',
+            windowWidth: 800,
+            width: 800
+        });
+
+        // برگرداندن استایل‌های اصلی
+        element.setAttribute('style', originalStyles);
+
+        const imgData = canvas.toDataURL('image/jpeg', 0.8); // استفاده از JPEG با کیفیت 80%
+        const pdf = new jsPDF({
+            orientation: 'portrait',
+            unit: 'mm',
+            format: 'a4'
+        });
+
+        const imgWidth = 180; // کاهش عرض برای حاشیه بیشتر
+        const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+        // محاسبه موقعیت برای قرار دادن در وسط صفحه
+        const x = (210 - imgWidth) / 2; // 210 عرض A4 در میلی‌متر
+        const y = (297 - imgHeight) / 2; // 297 ارتفاع A4 در میلی‌متر
+
+        pdf.addImage(imgData, 'JPEG', x, y, imgWidth, imgHeight);
+        pdf.save(`${fileName}.pdf`);
+    };
+
+    return (
+        <Button
+            label={t('receip.get_factor')}
+            className='bg-[#E8E8E8] text-description text-xs'
+            onClick={generatePDF}
+        />
+    );
+};
+
+export default PDFGenerator; 

src/pages/receipts/Detail.tsx

@@ -18,6 +18,7 @@ import { Helmet } from 'react-helmet-async'
 import { useGetProfile } from '../profile/hooks/useProfileData'
 import { toast } from 'react-toastify'
 import { ErrorType } from '../../helpers/types'
+import PDFGenerator from '../../components/PDFGenerator'
 
 const ReceiptsDetail: FC = () => {
 
@@ -108,14 +109,13 @@ const ReceiptsDetail: FC = () => {
                     :
                     <div className='flex xl:flex-row flex-col mt-8 gap-6'>
                         <div className='flex-1'>
-                            <div className='w-full bg-white rounded-3xl p-8'>
+                            <div id="receipt-details" className='w-full bg-white rounded-3xl p-8'>
-                                <div className='flex justify-between items-center'>
+                                <div className='flex justify-between items-center mb-6'>
-                                    <div>
+                                    <div className='text-lg font-medium'>
                                         {t('receip.personal_information')}
                                     </div>
                                 </div>
 
-
                                 {
                                     getProfile.data?.data?.user?.financialType === 'LEGAL' ?
                                         <LegalInfo />
@@ -125,20 +125,15 @@ const ReceiptsDetail: FC = () => {
                                             : <RegisterInfo data={getProfile.data?.data} />
                                 }
 
-
+                                <div className='mt-8'>
-
+                                    <div className='flex justify-between items-center mb-6'>
-
+                                        <div className='text-lg font-medium'>
-                            </div>
-
-                            <div className='w-full bg-white rounded-3xl mt-8 p-8'>
-                                <div className='flex justify-between items-center'>
-                                    <div>
                                             {t('receip.detail_receip')}
                                         </div>
                                     </div>
 
                                     <div className='mt-7 text-sm'>
-                                    <div className='flex justify-between items-center text-description h-14'>
+                                        <div className='flex justify-between items-center text-description h-14 font-medium'>
                                             <div>
                                                 {t('receip.description')}
                                             </div>
@@ -186,6 +181,50 @@ const ReceiptsDetail: FC = () => {
                                         </div>
                                     </div>
                                 </div>
+
+                                <div className='mt-8'>
+                                    <div className='flex justify-between items-center mb-6'>
+                                        <div className='text-lg font-medium'>
+                                            {t('receip.receip_information')}
+                                        </div>
+                                    </div>
+
+                                    <div className='mt-6 text-xs font-extralight'>
+                                        <div className='flex justify-between h-12 border-b items-center'>
+                                            <div className='text-description'>
+                                                {t('receip.date_factor')}
+                                            </div>
+                                            <div>
+                                                {moment(getInvoce.data?.data?.invoice?.createdAt).format('jYYYY-jMM-jDD')}
+                                            </div>
+                                        </div>
+                                        <div className='flex justify-between h-12 border-b items-center'>
+                                            <div className='text-description'>
+                                                {t('receip.due_date')}
+                                            </div>
+                                            <div>
+                                                {moment(getInvoce.data?.data?.invoice?.dueDate).format('jYYYY-jMM-jDD')}
+                                            </div>
+                                        </div>
+                                        <div className='flex justify-between h-12 border-b items-center'>
+                                            <div className='text-description'>
+                                                {t('receip.factor_number')}
+                                            </div>
+                                            <div>
+                                                {moment(getInvoce.data?.data?.invoice.createdAt).format('jYYYY') + getInvoce.data?.data?.invoice.numericId}
+                                            </div>
+                                        </div>
+                                        <div className='flex justify-between h-12 border-b items-center'>
+                                            <div className='text-description'>
+                                                {t('receip.status_factor')}
+                                            </div>
+                                            <div>
+                                                {t(`receip.${getInvoce.data?.data?.invoice?.status}`)}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
 
                         <div className='bg-white xl:w-sidebar text-sm h-fit rounded-3xl p-8'>
@@ -245,9 +284,9 @@ const ReceiptsDetail: FC = () => {
                                 {
                                     getInvoce.data?.data?.invoice?.status === 'WAIT_PAYMENT' &&
                                     <div className='flex gap-4 items-center mt-8'>
-                                        <Button
+                                        <PDFGenerator
-                                            label={t('receip.get_factor')}
+                                            elementId="receipt-details"
-                                            className='bg-[#E8E8E8] text-description text-xs'
+                                            fileName={`receipt-${getInvoce.data?.data?.invoice.numericId}`}
                                         />
                                         <PayInvoice
                                             id={id ? id : ''}