refactor(FE-364): update PDF export layout and parameter badges

src/components/pages/report/logistic-stock/export/PurchasesPerSupplierExport.tsx

@@ -24,32 +24,6 @@ const pdfStyles = StyleSheet.create({
     padding: 20,
     backgroundColor: '#FFFFFF',
   },
-  header: {
-    marginBottom: 20,
-  },
-  logo: {
-    width: 120,
-    height: 30,
-    marginBottom: 8,
-  },
-  companyInfo: {
-    fontSize: 12,
-    fontWeight: 'bold',
-    marginBottom: 4,
-    color: '#1f74bf',
-  },
-  address: {
-    fontSize: 8,
-    color: '#666666',
-    maxWidth: 400,
-    marginBottom: 10,
-  },
-  divider: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#000000',
-    borderBottomStyle: 'solid',
-    marginBottom: 15,
-  },
   titleSection: {
     marginBottom: 10,
   },
@@ -59,11 +33,6 @@ const pdfStyles = StyleSheet.create({
     marginBottom: 5,
     color: '#1f74bf',
   },
-  parameterSection: {
-    fontSize: 9,
-    color: '#666666',
-    marginBottom: 15,
-  },
   supplierTitle: {
     fontSize: 12,
     fontWeight: 'bold',
@@ -223,10 +192,10 @@ const pdfStyles = StyleSheet.create({
     fontWeight: 'bold',
   },
   supplierSection: {
-    marginBottom: 20,
+    marginBottom: 10,
   },
   supplierSectionBreak: {
-    marginBottom: 25,
+    marginBottom: 15,
   },
   badge: {
     backgroundColor: '#1f74bf',
@@ -236,6 +205,21 @@ const pdfStyles = StyleSheet.create({
     fontSize: 7,
     fontWeight: 'bold',
     alignSelf: 'flex-start',
+    marginRight: 4,
+  },
+  parameterBadge: {
+    backgroundColor: '#F5F5F5',
+    color: '#333333',
+    padding: 4,
+    borderRadius: 4,
+    fontSize: 8,
+    marginRight: 8,
+    marginBottom: 4,
+  },
+  parameterContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: 8,
   },
 });
 
@@ -290,12 +274,6 @@ const getParameterText = (
 ) => {
   const paramsText = [];
 
-  if (params.filter_by === 'received_date') {
-    paramsText.push('Tanggal Terima');
-  } else if (params.filter_by === 'po_date') {
-    paramsText.push('Tanggal PO');
-  }
-
   if (params.supplier_name) {
     paramsText.push(`Supplier: ${params.supplier_name}`);
   } else {
@@ -314,7 +292,7 @@ const getParameterText = (
   const currentDate = formatDate(new Date(), 'DD MMM YYYY HH:mm');
   paramsText.push(`Dicetak: ${currentDate}`);
 
-  return paramsText.join(' | ');
+  return paramsText;
 };
 
 const createPDFDocument = (
@@ -328,13 +306,21 @@ const createPDFDocument = (
         <Text style={pdfStyles.mainTitle}>
           Laporan &gt; Rekapitulasi Pembelian Per Supplier
         </Text>
-        <Text style={pdfStyles.parameterSection}>
-          Jenis Tanggal:{' '}
-          {params.filter_by === 'received_date'
-            ? 'Tanggal Terima'
-            : 'Tanggal PO'}{' '}
-          | {getParameterText(params)}
-        </Text>
+        <View style={pdfStyles.parameterContainer}>
+          <View style={pdfStyles.parameterBadge}>
+            <Text>
+              Jenis Tanggal:{' '}
+              {params.filter_by === 'received_date'
+                ? 'Tanggal Terima'
+                : 'Tanggal PO'}
+            </Text>
+          </View>
+          {getParameterText(params).map((param, index) => (
+            <View key={index} style={pdfStyles.parameterBadge}>
+              <Text>{param}</Text>
+            </View>
+          ))}
+        </View>
       </View>
 
       {/* Supplier Sections */}