[skip ci] update export detail wallet statement

src/pages/wallet/wallet-statement/blocks/ListToolbar.tsx

@@ -171,8 +171,8 @@ const ListToolbar = ({
               </Button>
             </DefaultTooltip>
 
-            <Button variant="outline" className="h-8" onClick={handleApplyFilters}>
+            <Button variant="default" className="h-8" onClick={handleApplyFilters}>
-              Filter Dataaaaa
+              Filter Data
             </Button>
           </div>
 

src/pages/wallet/wallet-statement/blocks/ShowDetailDialog.tsx

@@ -489,37 +489,13 @@ const ShowDetailWalletDialog = () => {
       format: 'a4'
     });
 
+    // Pindahkan deklarasi variabel ke luar block try-catch
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    const pageHeight = pdf.internal.pageSize.getHeight();
+    
     const headerImageUrl = toAbsoluteUrl('/media/avatars/KopDetailWalletStatement.png');
 
-      try {
+    // Definisikan table configuration yang akan digunakan berkali-kali
-        const pageWidth = pdf.internal.pageSize.getWidth();
-        const imageWidth = 250;
-        const imageHeight = 40;
-        const xPosition = (pageWidth - imageWidth) / 2;
-
-        pdf.addImage(headerImageUrl, 'PNG', xPosition, 10, imageWidth, imageHeight);
-
-        let currentY = 55;
-
-        pdf.setDrawColor(0, 0, 0);
-        pdf.setLineWidth(0.5);
-        pdf.line(20, currentY, pageWidth - 20, currentY);
-
-        currentY += 10;
-
-        pdf.setFontSize(16);
-        pdf.setFont('helvetica', 'bold');
-        pdf.text('Wallet Statement Details', pageWidth / 2, currentY, { align: 'center' });
-
-        currentY += 10;
-
-        pdf.setFontSize(10);
-        pdf.setFont('helvetica', 'normal');
-        pdf.text(`Export Date: ${format(new Date(), 'dd MMM yyyy HH:mm:ss')}`, 20, currentY);
-        pdf.text(`Wallet ID: ${selectedWallet?.ID || '-'}`, 20, currentY + 6);
-
-        currentY += 20;
-
     const tableHeaders = [
       'Transaction Code',
       'MSISDN Reffer',
@@ -548,6 +524,20 @@ const ShowDetailWalletDialog = () => {
       item['Notes']
     ]);
 
+    const columnStyles = {
+      0: { cellWidth: 25, halign: 'left' as const },
+      1: { cellWidth: 20, halign: 'left' as const },
+      2: { cellWidth: 25, halign: 'left' as const },
+      3: { cellWidth: 15, halign: 'left' as const },
+      4: { cellWidth: 18, halign: 'left' as const },
+      5: { cellWidth: 18, halign: 'left' as const },
+      6: { cellWidth: 18, halign: 'left' as const },
+      7: { cellWidth: 20, halign: 'left' as const },
+      8: { cellWidth: 30, halign: 'left' as const },
+      9: { cellWidth: 25, halign: 'left' as const },
+      10: { cellWidth: 25, halign: 'left' as const }
+    };
+
     const calculateLeftMargin = (
       columnStyles: Record<number, { cellWidth: number }>,
       pageWidth: number
@@ -556,34 +546,109 @@ const ShowDetailWalletDialog = () => {
         (sum, col) => sum + col.cellWidth,
         0
       );
-
       return (pageWidth - totalTableWidth) / 2;
     };
-        const columnStyles = {
-          0: { cellWidth: 25, halign: 'left' as const },
-          1: { cellWidth: 20, halign: 'left' as const },
-          2: { cellWidth: 25, halign: 'left' as const },
-          3: { cellWidth: 15, halign: 'center' as const },
-          4: { cellWidth: 18, halign: 'right' as const },
-          5: { cellWidth: 18, halign: 'right' as const },
-          6: { cellWidth: 18, halign: 'right' as const },
-          7: { cellWidth: 20, halign: 'left' as const },
-          8: { cellWidth: 30, halign: 'left' as const },
-          9: { cellWidth: 25, halign: 'left' as const },
-          10: { cellWidth: 25, halign: 'left' as const }
-        };
 
     const leftMargin = calculateLeftMargin(columnStyles, pageWidth);
 
+    try {
+      // Coba tambahkan header image
+      const imageWidth = 250;
+      const imageHeight = 40;
+      const xPosition = (pageWidth - imageWidth) / 2;
+
+      pdf.addImage(headerImageUrl, 'PNG', xPosition, 10, imageWidth, imageHeight);
+
+      let currentY = 55;
+
+      // Garis pemisah
+      pdf.setDrawColor(0, 0, 0);
+      pdf.setLineWidth(0.5);
+      pdf.line(20, currentY, pageWidth - 20, currentY);
+
+      currentY += 10;
+
+      // Title
+      pdf.setFontSize(16);
+      pdf.setFont('helvetica', 'bold');
+      pdf.text('Wallet Statement Details', pageWidth / 2, currentY, { align: 'center' });
+
+      currentY += 10;
+
+      // Info export
+      pdf.setFontSize(10);
+      pdf.setFont('helvetica', 'normal');
+      pdf.text(`Export Date: ${format(new Date(), 'dd MMM yyyy HH:mm:ss')}`, 20, currentY);
+      pdf.text(`Wallet ID: ${selectedWallet?.ID || '-'}`, 20, currentY + 6);
+
+      currentY += 20;
+
+      // Render table dengan header image
       autoTable(pdf, {
         head: [tableHeaders],
         body: tableData,
         startY: currentY,
         styles: {
           fontSize: 7,
-            cellPadding: 2,
+          cellPadding: 1.5,
           overflow: 'linebreak',
-            halign: 'center'
+          halign: 'left',
+          lineWidth: 0.1,
+          lineColor: [200, 200, 200]
+        },
+        headStyles: {
+          fillColor: [68, 114, 196],
+          textColor: [255, 255, 255],
+          fontStyle: 'bold',
+          halign: 'center',
+          cellPadding: 1.5
+        },
+        columnStyles: columnStyles,
+        tableWidth: 'wrap',
+        margin: { 
+          left: leftMargin,
+          right: leftMargin,
+          top: 10,
+          bottom: 10
+        },
+        didDrawPage: (data: any) => {
+          if (data.pageNumber > 1) {
+            pdf.setFontSize(10);
+            pdf.setFont('helvetica', 'normal');
+          }
+        },
+        theme: 'grid',
+        didDrawCell: (data: any) => {
+          if (data.section === 'body') {
+            pdf.setDrawColor(200, 200, 200);
+            pdf.setLineWidth(0.1);
+          }
+        },
+        showHead: 'everyPage'
+      });
+
+    } catch (imageError) {
+      console.error('Error loading header image:', imageError);
+      
+      // Fallback tanpa gambar header
+      pdf.setFontSize(16);
+      pdf.setFont('helvetica', 'bold');
+      pdf.text('Wallet Statement Details', pageWidth / 2, 20, { align: 'center' });
+
+      pdf.setFontSize(10);
+      pdf.setFont('helvetica', 'normal');
+      pdf.text(`Export Date: ${format(new Date(), 'dd MMM yyyy HH:mm:ss')}`, 20, 30);
+      pdf.text(`Wallet ID: ${selectedWallet?.ID || '-'}`, 20, 36);
+
+      autoTable(pdf, {
+        head: [tableHeaders],
+        body: tableData,
+        startY: 45,
+        styles: {
+          fontSize: 7,
+          cellPadding: 1.5,
+          overflow: 'linebreak',
+          halign: 'left'
         },
         headStyles: {
           fillColor: [68, 114, 196],
@@ -591,22 +656,23 @@ const ShowDetailWalletDialog = () => {
           fontStyle: 'bold',
           halign: 'center'
         },
-          columnStyles,
+        columnStyles: columnStyles,
         tableWidth: 'wrap',
-          margin: { top: currentY, left: leftMargin },
+        margin: { left: leftMargin, right: leftMargin, top: 10, bottom: 10 },
-          didDrawCell: (data: any) => {
+        theme: 'grid',
-            if (data.section === 'body') {
+        showHead: 'everyPage',
-              pdf.setDrawColor(200, 200, 200);
+        didDrawPage: (data: any) => {
-              pdf.setLineWidth(0.1);
+          if (data.pageNumber > 1) {
+            pdf.setFontSize(10);
+            pdf.setFont('helvetica', 'normal');
           }
         }
       });
+    }
 
     const fileName = `wallet_statement_${selectedWallet?.ID}_${format(new Date(), 'yyyyMMdd_HHmmss')}.pdf`;
     pdf.save(fileName);
-      } catch (imageError) {
+
-        console.error('Error loading header image:', imageError);
-      }
   } catch (error) {
     console.error('Error exporting to PDF:', error);
     toast.error('Failed to export PDF');
@@ -663,7 +729,7 @@ const ShowDetailWalletDialog = () => {
       <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
         <DialogContent className="w-screen max-w-screen max-h-screen p-4 overflow-hidden">
           <DialogHeader>
-            <DialogTitle>Details Walletsss Statementssss</DialogTitle>
+            <DialogTitle>Details Wallets Statement</DialogTitle>
           </DialogHeader>
           <DialogDescription />