refactor(FE): Render payment notes as Badge and highlight balance

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

@@ -2,6 +2,7 @@ import { useState, useMemo, useCallback } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
 import SelectInput, {
   useSelect,
   OptionType,
@@ -67,6 +68,38 @@ const CustomerPaymentTab = () => {
     []
   );
 
+  const getPaymentStatusColor = (notes: string) => {
+    const normalizedValue = notes.toLowerCase();
+
+    if (normalizedValue === 'lunas') {
+      return 'bg-info/10 text-info border-info';
+    }
+
+    if (normalizedValue.includes('belum')) {
+      return 'bg-warning/10 text-warning border-warning';
+    }
+
+    return 'bg-gray-100 text-gray-600 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;
+  };
+
   // ===== FILTER HANDLERS =====
   const handleResetFilters = useCallback(() => {
     setIsSubmitted(false);
@@ -435,7 +468,9 @@ const CustomerPaymentTab = () => {
         accessorKey: 'accounts_receivable',
         cell: (props) => {
           const value = props.row.original.accounts_receivable;
-          return <div className='text-right'>{formatCurrency(value)}</div>;
+          return (
+            <div className='text-right text-error'>{formatCurrency(value)}</div>
+          );
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
@@ -449,7 +484,23 @@ const CustomerPaymentTab = () => {
         accessorKey: 'notes',
         cell: (props) => {
           const value = props.row.original.notes;
-          return value || '-';
+
+          if (!value) {
+            return '-';
+          }
+
+          return (
+            <Badge
+              statusIndicator={true}
+              variant='soft'
+              className={{
+                badge: `rounded-xl justify-start border border-gray-200 ${getPaymentStatusColor(value)}`,
+                status: getPaymentStatusIndicatorColor(value),
+              }}
+            >
+              {getPaymentStatusText(value)}
+            </Badge>
+          );
         },
       },
       {
@@ -647,14 +698,13 @@ const CustomerPaymentTab = () => {
               total_accounts_receivable: 0,
             };
 
-            const totalAccountsReceivable = summary.total_accounts_receivable;
             const tableColumns = getTableColumns(summary);
 
             return (
               <Card
                 key={customerReport.customer.id}
                 title={customerReport.customer.name}
-                subtitle={`${customerReport.customer.address || ''}\nSaldo Piutang: ${formatCurrency(totalAccountsReceivable)}`}
+                subtitle={`${customerReport.customer.address || ''}`}
                 className={{ wrapper: 'w-full' }}
                 variant='bordered'
                 collapsible={true}