refactor(FE): Enhance customer payment PDF export and filters

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

@@ -136,41 +136,129 @@ const pdfStyles = StyleSheet.create({
     backgroundColor: '#F0F0F0',
     fontWeight: 'bold',
   },
+  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',
+  },
+  parameterBadge: {
+    backgroundColor: '#F5F5F5',
+    color: '#333333',
+    padding: 4,
+    borderRadius: 4,
+    fontSize: 8,
+    marginRight: 8,
+    marginBottom: 4,
+  },
+  parameterContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: 8,
+  },
 });
 
 interface CustomerPaymentExportPDFParams {
   data: CustomerPaymentReport[];
+  params?: {
+    customer_name?: string;
+    sales?: string;
+    start_date?: string;
+    end_date?: string;
+    filter_by?: string;
+  };
 }
 
+const getParameterText = (
+  params?: CustomerPaymentExportPDFParams['params']
+) => {
+  const paramsText = [];
+
+  if (params?.customer_name) {
+    paramsText.push(`Customer: ${params.customer_name}`);
+  } else {
+    paramsText.push('Semua Customer');
+  }
+
+  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;
+};
+
 const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
   return (
     <Document>
       {params.data.map((customerReport, customerIndex) => (
         <Page
           key={customerIndex}
-          size='A4'
+          size='A3'
           orientation='landscape'
           style={pdfStyles.page}
         >
-          {/* Title and Customer Info */}
+          {/* Title and Parameters */}
           <View style={pdfStyles.titleSection}>
             <Text style={pdfStyles.mainTitle}>
               Laporan &gt; Kontrol Pembayaran Customer
             </Text>
+            <View style={pdfStyles.parameterContainer}>
+              <View style={pdfStyles.parameterBadge}>
+                <Text>
+                  Periode:{' '}
+                  {params.params?.start_date
+                    ? formatDate(params.params.start_date, 'DD MMM YYYY')
+                    : '-'}{' '}
+                  s.d{' '}
+                  {params.params?.end_date
+                    ? formatDate(params.params.end_date, 'DD MMM YYYY')
+                    : '-'}
+                </Text>
+              </View>
+              <View style={pdfStyles.parameterBadge}>
+                <Text>Filter Tanggal: Tanggal DO</Text>
+              </View>
+              <View style={pdfStyles.parameterBadge}>
+                <Text>
+                  Customer: {params.params?.customer_name || 'Semua Customer'}
+                </Text>
+              </View>
+              <View style={pdfStyles.parameterBadge}>
+                <Text>
+                  Dicetak: {formatDate(new Date(), 'DD MMM YYYY HH:mm')}
+                </Text>
+              </View>
+            </View>
             <Text style={pdfStyles.supplierTitle}>
               {customerReport.customer.name}
             </Text>
             <Text style={pdfStyles.supplierInfo}>
-              {customerReport.customer.address || ''}
+              Alamat: {customerReport.customer.address || '-'}
             </Text>
-            {customerReport.summary && (
-              <Text style={pdfStyles.supplierInfo}>
-                Total Saldo Piutang:{' '}
-                {formatCurrency(
-                  customerReport.summary.total_accounts_receivable
-                )}
-              </Text>
-            )}
           </View>
 
           {/* Table */}
@@ -181,10 +269,10 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 <Text>No</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>Tgl DO/Bayar</Text>
+                <Text>Tanggal DO</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>Tgl Realisasi</Text>
+                <Text>Tanggal Realisasi</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 0.8 }]}>
                 <Text>Aging</Text>
@@ -193,16 +281,16 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 <Text>Referensi</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>No. Polisi</Text>
+                <Text>No Polisi</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
                 <Text>Qty</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Berat (Kg)</Text>
+                <Text>Berat</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>AVG</Text>
+                <Text>Rata-Rata</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Harga Awal</Text>
@@ -214,7 +302,7 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 <Text>Harga Akhir</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>PPN (%)</Text>
+                <Text>Pajak</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Total</Text>
@@ -223,10 +311,10 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 <Text>Pembayaran</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Saldo Piutang</Text>
+                <Text>Saldo</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
-                <Text>Ket</Text>
+                <Text>Keterangan</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
                 <Text>Pengambilan</Text>
@@ -304,7 +392,24 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                   <Text>{formatCurrency(item.accounts_receivable)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text>{item.notes || '-'}</Text>
+                  {item.notes ? (
+                    <Text>{item.notes}</Text>
+                  ) : (
+                    <View
+                      style={[
+                        pdfStyles.badge,
+                        item.accounts_receivable === 0
+                          ? pdfStyles.badgeLunas
+                          : pdfStyles.badgeBelumLunas,
+                      ]}
+                    >
+                      <Text>
+                        {item.accounts_receivable === 0
+                          ? 'Lunas'
+                          : 'Belum Lunas'}
+                      </Text>
+                    </View>
+                  )}
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text>{item.pickup_info || '-'}</Text>