refactor(FE): Refactor CustomerPaymentTab to use StatusBadge component

src/components/pages/report/finance/tab/CustomerPaymentTab.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo, useCallback, useEffect } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Card from '@/components/Card';
-import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import { useSelect } from '@/components/input/SelectInput';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import SelectInputRadio from '@/components/input/SelectInputRadio';
@@ -11,7 +11,13 @@ import { CustomerApi } from '@/services/api/master-data';
 import { FinanceApi } from '@/services/api/report/finance-report';
 import Table from '@/components/Table';
 import { ColumnDef } from '@tanstack/react-table';
-import { formatCurrency, formatDate, formatNumber, cn } from '@/lib/helper';
+import {
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatTitleCase,
+  cn,
+} from '@/lib/helper';
 import {
   CustomerPaymentReport,
   CustomerPaymentSummary,
@@ -33,6 +39,7 @@ import { generateCustomerPaymentPDF } from '@/components/pages/report/finance/ex
 import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
 import CustomerSupplierSkeleton from '@/components/pages/report/finance/skeleton/CustomerSupplierSkeleton';
 import { OptionType } from '@/components/table/TableRowSizeSelector';
+import { Color } from '@/types/theme';
 
 interface CustomerPaymentTabProps {
   tabId: string;
@@ -116,40 +123,18 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     },
   });
 
-  const getPaymentStatusColor = (notes: string) => {
+  const getPaymentStatusBadgeColor = (notes: string): Color => {
     const normalizedValue = notes.toLowerCase();
 
     if (normalizedValue === 'lunas') {
-      return 'bg-info/10 text-black border-info';
+      return 'primary';
     }
 
     if (normalizedValue.includes('belum')) {
-      return 'bg-warning/10 text-black border-warning';
+      return 'warning';
     }
 
-    return 'bg-gray-100 text-black border-gray-300';
-  };
-
-  const getPaymentStatusIndicatorColor = (notes: string) => {
-    const normalizedValue = notes.toLowerCase();
-
-    if (normalizedValue === 'lunas') {
-      return 'bg-info';
-    }
-
-    if (normalizedValue.includes('belum')) {
-      return 'bg-warning';
-    }
-
-    return 'bg-gray-400';
-  };
-
-  const getPaymentStatusText = (notes: string) => {
-    return notes
-      .toLowerCase()
-      .split(' ')
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ');
+    return 'neutral';
   };
 
   // ===== DATE CHANGE HANDLERS =====
@@ -181,7 +166,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
         setHasDateError(false);
       }
     },
-    [formik, dateErrorShown]
+    [dateErrorShown]
   );
 
   const handleEndDateChange = useCallback(
@@ -211,7 +196,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
         setDateErrorShown(false);
       }
     },
-    [formik, dateErrorShown]
+    [dateErrorShown]
   );
 
   // ===== FILTER HELPERS =====
@@ -685,17 +670,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
           }
 
           return (
-            <Badge
-              statusIndicator={true}
-              size='sm'
-              variant='soft'
-              className={{
-                badge: `py-2.5 px-2 font-thin text-xs border border-gray-200 rounded-xl justify-start ${getPaymentStatusColor(value)}`,
-                status: getPaymentStatusIndicatorColor(value),
-              }}
-            >
-              {getPaymentStatusText(value)}
-            </Badge>
+            <StatusBadge
+              color={getPaymentStatusBadgeColor(value)}
+              text={formatTitleCase(value)}
+            />
           );
         },
       },