refactor(FE): Refactor CustomerPaymentExportPDF to use reusable PDF

components

src/components/pages/report/finance/export/CustomerPaymentExportPDF.tsx

@@ -2,7 +2,6 @@
 
 import {
   Page,
-  Text,
   View,
   Document,
   StyleSheet,
@@ -18,6 +17,9 @@ import {
   PdfTbodyCell,
   PdfTfootCell,
 } from '@/components/helper/pdf/table';
+import { PdfParamBadge } from '@/components/helper/pdf/badge/PdfParamBadge';
+import { PdfStatusBadge } from '@/components/helper/pdf/badge/PdfStatusBadge';
+import { PdfTypography } from '@/components/helper/pdf/typography/PdfTypography';
 
 Font.register({
   family: 'Helvetica',
@@ -34,53 +36,6 @@ const pdfStyles = StyleSheet.create({
   titleSection: {
     marginBottom: 10,
   },
-  mainTitle: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    marginBottom: 5,
-    color: '#1f74bf',
-  },
-  supplierTitle: {
-    fontSize: 12,
-    fontWeight: 'bold',
-    marginBottom: 8,
-    color: '#1f74bf',
-  },
-  supplierInfo: {
-    fontSize: 9,
-    marginBottom: 5,
-    color: '#333333',
-  },
-  badge: {
-    backgroundColor: '#1f74bf',
-    color: '#FFFFFF',
-    padding: 2,
-    borderRadius: 2,
-    fontSize: 7,
-    fontWeight: 'bold',
-    alignSelf: 'center',
-    marginRight: 4,
-  },
-  badgeLunas: {
-    backgroundColor: '#1f74bf',
-    color: '#FFFFFF',
-  },
-  badgeBelumLunas: {
-    backgroundColor: '#F97316',
-    color: '#FFFFFF',
-  },
-  textError: {
-    color: '#DC2626',
-  },
-  parameterBadge: {
-    backgroundColor: '#F5F5F5',
-    color: '#333333',
-    padding: 4,
-    borderRadius: 4,
-    fontSize: 8,
-    marginRight: 8,
-    marginBottom: 4,
-  },
   parameterContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -100,38 +55,6 @@ interface CustomerPaymentExportPDFParams {
   };
 }
 
-const getParameterText = (
-  params?: CustomerPaymentExportPDFParams['params']
-) => {
-  const paramsText = [];
-
-  if (params?.customer_name) {
-    paramsText.push(`Customer: ${params.customer_name}`);
-  } else {
-    paramsText.push('Semua Customer');
-  }
-
-  // TODO: Uncomment when BE is ready
-  // if (params?.sales) {
-  //   paramsText.push(`Sales: ${params.sales}`);
-  // }
-
-  if (params?.start_date && params?.end_date) {
-    const startDate = formatDate(params.start_date, 'DD MMM YYYY');
-    const endDate = formatDate(params.end_date, 'DD MMM YYYY');
-    paramsText.push(`Periode: ${startDate} - ${endDate}`);
-  } else if (params?.start_date) {
-    const startDate = formatDate(params.start_date, 'DD MMM YYYY');
-    paramsText.push(`Tanggal: ${startDate}`);
-  }
-
-  const currentDate = formatDate(new Date(), 'DD MMM YYYY HH:mm');
-  paramsText.push(`Dicetak: ${currentDate}`);
-
-  return paramsText;
-};
-
-// Helper functions for PdfTable
 const getTableColumns = (): PdfColumn[] => [
   { key: 'no', header: 'No', flex: 0.5, align: 'center' },
   { key: 'trans_date', header: 'Tanggal DO', flex: 1.2, align: 'center' },
@@ -221,15 +144,14 @@ const getTableData = (
     {
       key: 'status',
       value: item.status ? (
-        <View
+        <View style={{ alignItems: 'center' }}>
-          style={[
+          <PdfStatusBadge
-            pdfStyles.badge,
+            backgroundColor={item.status === 'LUNAS' ? '#DBEAFE' : '#FEE2E2'}
-            item.status === 'LUNAS'
+            textColor={item.status === 'LUNAS' ? '#1E40AF' : '#991B1B'}
-              ? pdfStyles.badgeLunas
+            borderColor={item.status === 'LUNAS' ? '#60A5FA' : '#F87171'}
-              : pdfStyles.badgeBelumLunas,
+          >
-          ]}
+            {item.status === 'LUNAS' ? 'Lunas' : 'Belum Lunas'}
-        >
+          </PdfStatusBadge>
-          <Text>{item.status === 'LUNAS' ? 'Lunas' : 'Belum Lunas'}</Text>
         </View>
       ) : (
         '-'
@@ -302,43 +224,37 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
         >
           {/* Title and Parameters */}
           <View style={pdfStyles.titleSection}>
-            <Text style={pdfStyles.mainTitle}>
+            <PdfTypography size='h1' variant='primary'>
               Laporan &gt; Kontrol Pembayaran Customer
-            </Text>
+            </PdfTypography>
             <View style={pdfStyles.parameterContainer}>
-              <View style={pdfStyles.parameterBadge}>
+              <PdfParamBadge>
-                <Text>
+                Periode:{' '}
-                  Periode:{' '}
+                {params.params?.start_date
-                  {params.params?.start_date
+                  ? formatDate(params.params.start_date, 'DD MMM YYYY')
-                    ? formatDate(params.params.start_date, 'DD MMM YYYY')
+                  : '-'}{' '}
-                    : '-'}{' '}
+                s.d{' '}
-                  s.d{' '}
+                {params.params?.end_date
-                  {params.params?.end_date
+                  ? formatDate(params.params.end_date, 'DD MMM YYYY')
-                    ? formatDate(params.params.end_date, 'DD MMM YYYY')
+                  : '-'}
-                    : '-'}
+              </PdfParamBadge>
-                </Text>
-              </View>
               {/* TODO: Uncomment when BE is ready */}
-              {/* <View style={pdfStyles.parameterBadge}>
+              {/* <PdfParamBadge>
-                <Text>Filter Tanggal: Tanggal DO</Text>
+                Filter Tanggal: Tanggal DO
-              </View> */}
+              </PdfParamBadge> */}
-              <View style={pdfStyles.parameterBadge}>
+              <PdfParamBadge>
-                <Text>
+                Customer: {params.params?.customer_name || 'Semua Customer'}
-                  Customer: {params.params?.customer_name || 'Semua Customer'}
+              </PdfParamBadge>
-                </Text>
+              <PdfParamBadge>
-              </View>
+                Dicetak: {formatDate(new Date(), 'DD MMM YYYY HH:mm')}
-              <View style={pdfStyles.parameterBadge}>
+              </PdfParamBadge>
-                <Text>
-                  Dicetak: {formatDate(new Date(), 'DD MMM YYYY HH:mm')}
-                </Text>
-              </View>
             </View>
-            <Text style={pdfStyles.supplierTitle}>
+            <PdfTypography size='h2' variant='primary'>
               {customerReport.customer.name}
-            </Text>
+            </PdfTypography>
-            <Text style={pdfStyles.supplierInfo}>
+            <PdfTypography size='label'>
               Alamat: {customerReport.customer.address || '-'}
-            </Text>
+            </PdfTypography>
           </View>
 
           {/* Table */}