diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index d2304e61..dc1705ed 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
@@ -3,10 +3,7 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Card from '@/components/Card';
 import Badge from '@/components/Badge';
-import SelectInput, {
-  useSelect,
-  OptionType,
-} from '@/components/input/SelectInput';
+import SelectInput, { useSelect } from '@/components/input/SelectInput';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import DateInput from '@/components/input/DateInput';
 import { CustomerApi } from '@/services/api/master-data';
@@ -81,14 +78,14 @@ const CustomerPaymentTab = () => {
     const normalizedValue = notes.toLowerCase();
 
     if (normalizedValue === 'lunas') {
-      return 'bg-info/10 text-info border-info';
+      return 'bg-info/10 text-black border-info';
     }
 
     if (normalizedValue.includes('belum')) {
-      return 'bg-warning/10 text-warning border-warning';
+      return 'bg-warning/10 text-black border-warning';
     }
 
-    return 'bg-gray-100 text-gray-600 border-gray-300';
+    return 'bg-gray-100 text-black border-gray-300';
   };
 
   const getPaymentStatusIndicatorColor = (notes: string) => {
@@ -781,7 +778,7 @@ const CustomerPaymentTab = () => {
                   pageSize={customerReport.rows.length + 1}
                   renderFooter={customerReport.rows.length > 0}
                   className={{
-                    containerClassName: 'w-full',
+                    containerClassName: 'w-full mb-0!',
                     tableWrapperClassName: 'overflow-x-auto',
                     tableClassName: 'w-full table-auto text-sm',
                     headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',