From 0ed6c246b1289b4c496d0c19c66b8d25e479eef2 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Thu, 29 Jan 2026 20:18:42 +0700
Subject: [PATCH] fix(FE): fix badge and table pdf

---
 src/components/helper/StatusBadge.tsx         |  2 +
 .../finance/export/DebtSupllierExportPDF.tsx  | 59 ++++++++++++-------
 .../report/finance/tab/DebtSupplierTab.tsx    | 21 +------
 3 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/components/helper/StatusBadge.tsx b/src/components/helper/StatusBadge.tsx
index c4f99593..f9725fff 100644
--- a/src/components/helper/StatusBadge.tsx
+++ b/src/components/helper/StatusBadge.tsx
@@ -27,6 +27,7 @@ const StatusBadge = ({
             'bg-success/30': color === 'success',
             'bg-error/20': color === 'error',
             'bg-primary/20': color === 'info',
+            'bg-[#FF9A20]/12': color === 'warning',
           },
           className?.badge
         ),
@@ -43,6 +44,7 @@ const StatusBadge = ({
           'text-[#008000]': color === 'success',
           'text-error': color === 'error',
           'text-primary': color === 'info',
+          'text-[#FF9A20]': color === 'warning',
         })}
       >
         <circle r='6' cx='6' cy='6' fill='currentColor' />
diff --git a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
index 869430b0..edcd360f 100644
--- a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
+++ b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
@@ -281,16 +281,16 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
               <View style={[pdfStyles.tableCellHeader, { flex: 0.5 }]}>
                 <Text>No</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
                 <Text>No. PR</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
                 <Text>No. PO</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 0.7 }]}>
                 <Text>Tgl Terima/Bayar</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 0.7 }]}>
                 <Text>Tgl PO</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 0.6 }]}>
@@ -320,7 +320,12 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
                 <Text>Status</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View
+                style={[
+                  pdfStyles.tableCellHeader,
+                  { flex: 1, borderRight: 'none' },
+                ]}
+              >
                 <Text>No. Perjalanan</Text>
               </View>
             </View>
@@ -330,16 +335,16 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
               <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
                 <Text></Text> {/* NO */}
               </View>
-              <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+              <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                 <Text></Text> {/* No. PR */}
               </View>
-              <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+              <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                 <Text></Text> {/* No. PO */}
               </View>
-              <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
                 <Text></Text> {/* Tgl Terima/Bayar */}
               </View>
-              <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
                 <Text></Text> {/* Tgl PO */}
               </View>
               <View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
@@ -381,8 +386,13 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
               <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
                 <Text></Text> {/* Status */}
               </View>
-              <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                <Text></Text> {/* No. Perjalanan */}
+              <View
+                style={[
+                  pdfStyles.tableCell, // No. Perjalanan
+                  { flex: 1, borderRight: 'none' },
+                ]}
+              >
+                <Text></Text>
               </View>
             </View>
 
@@ -400,13 +410,13 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                 <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
                   <Text>{index + 1}</Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text>{item.pr_number || '-'}</Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text>{item.po_number || '-'}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
                   <Text>
                     {item.received_date
                       ? item.received_date != '-'
@@ -415,7 +425,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                       : '-'}
                   </Text>
                 </View>
-                <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCellCenter, { flex: 0.7 }]}>
                   <Text>
                     {item.po_date
                       ? item.po_date != '-'
@@ -526,7 +536,12 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                     <Text>-</Text>
                   )}
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <View
+                  style={[
+                    pdfStyles.tableCell, // No. Perjalanan
+                    { flex: 1, borderRight: 'none' },
+                  ]}
+                >
                   <Text>{item.travel_number || '-'}</Text>
                 </View>
               </View>
@@ -538,18 +553,18 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                 <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
                   <Text>Total</Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text></Text>
-                </View>
-                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text></Text>
-                </View>
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text></Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text></Text>
                 </View>
+                <View style={[pdfStyles.tableCell, { flex: 0.7 }]}>
+                  <Text></Text>
+                </View>
+                <View style={[pdfStyles.tableCell, { flex: 0.7 }]}>
+                  <Text></Text>
+                </View>
                 <View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
                   <Text>{formatNumber(supplierReport.total.aging)} Hari</Text>
                 </View>
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index aa66cf66..811c739b 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -2,10 +2,7 @@ import Button from '@/components/Button';
 import Card from '@/components/Card';
 import Dropdown from '@/components/Dropdown';
 import DateInput from '@/components/input/DateInput';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import { OptionType, useSelect } from '@/components/input/SelectInput';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Modal, { useModal } from '@/components/Modal';
@@ -32,12 +29,12 @@ import {
   DebtSupplierFilterType,
 } from '@/components/pages/report/finance/filter/DebtSupplierFilter';
 import ButtonFilter from '@/components/helper/ButtonFilter';
-import Badge from '@/components/Badge';
 import { Color } from '@/types/theme';
 import { Supplier } from '@/types/api/master-data/supplier';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 const dueStatus: Record<string, Color> = {
   'Sudah Jatuh Tempo': 'error',
@@ -61,19 +58,7 @@ const getPillBadge = (
       ? dueStatus[statusText] || 'neutral'
       : paymentStatus[statusText] || 'neutral';
 
-  return (
-    <Badge
-      color={color as Color}
-      size='sm'
-      variant='soft'
-      className={{
-        badge: `py-2.5 px-2 font-medium text-base-content rounded-full border border-${color}`,
-      }}
-      statusIndicator
-    >
-      {statusText}
-    </Badge>
-  );
+  return <StatusBadge color={color as Color} text={statusText} />;
 };
 
 interface DebtSupplierTabProps {