From c102a4043c639d47639efd6cc5557e50798f0852 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 3 Feb 2026 13:40:46 +0700
Subject: [PATCH] fix(FE): fixing status badge color

---
 src/components/helper/StatusBadge.tsx          |  2 ++
 .../pages/closing/ClosingOverheadTable.tsx     | 18 +++++++++---------
 .../report/finance/tab/DebtSupplierTab.tsx     | 11 +++++++++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/helper/StatusBadge.tsx b/src/components/helper/StatusBadge.tsx
index f9725fff..c90ddaee 100644
--- a/src/components/helper/StatusBadge.tsx
+++ b/src/components/helper/StatusBadge.tsx
@@ -28,6 +28,7 @@ const StatusBadge = ({
             'bg-error/20': color === 'error',
             'bg-primary/20': color === 'info',
             'bg-[#FF9A20]/12': color === 'warning',
+            'bg-[#1166EF]/12': color === 'primary',
           },
           className?.badge
         ),
@@ -45,6 +46,7 @@ const StatusBadge = ({
           'text-error': color === 'error',
           'text-primary': color === 'info',
           'text-[#FF9A20]': color === 'warning',
+          'text-[#1166EF]': color === 'primary',
         })}
       >
         <circle r='6' cx='6' cy='6' fill='currentColor' />
diff --git a/src/components/pages/closing/ClosingOverheadTable.tsx b/src/components/pages/closing/ClosingOverheadTable.tsx
index 0d51ae3b..a7a170eb 100644
--- a/src/components/pages/closing/ClosingOverheadTable.tsx
+++ b/src/components/pages/closing/ClosingOverheadTable.tsx
@@ -250,29 +250,29 @@ const ClosingOverheadTable = ({
               body: 'p-4 shadow-button-soft border border-base-content/10 rounded-lg',
             }}
           >
-            <div className='flex flex-row gap-4 w-full justify-center items-stretch'>
+            <div className='flex flex-row gap-3 w-full justify-center items-stretch'>
               <div className='flex flex-row items-center justify-between'>
                 <h2 className='text-base font-bold'>Pembelian Kandang </h2>
               </div>
               <div className='flex flex-col items-center justify-center'>
                 <Icon icon='heroicons:equals' className='inline' />
               </div>
-              <div className='flex flex-col flex-1'>
-                <div className='flex flex-row items-center justify-center font-medium'>
+              <div className='flex flex-col flex-1 gap-1.5'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
                   Populasi Akhir KANDANG{' '}
                   <Icon icon='heroicons:x-mark' className='inline' /> Pemakaian
                   Di FARM
                 </div>
-                <hr className='w-full h-1' />
-                <div className='flex flex-row items-center justify-center font-medium'>
+                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
                   Populasi Akhir Proyek
                 </div>
               </div>
               <div className='flex flex-col items-center justify-center'>
                 <Icon icon='heroicons:equals' className='inline' />
               </div>
-              <div className='flex flex-col flex-1'>
-                <div className='flex flex-row items-center justify-center font-medium'>
+              <div className='flex flex-col flex-1 gap-1.5'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
                   {formatNumber(chickinPopulation ?? 0)}
                   <Icon icon='heroicons:x-mark' className='inline' />
                   {formatCurrency(
@@ -281,8 +281,8 @@ const ClosingOverheadTable = ({
                       : 0
                   )}
                 </div>
-                <hr className='w-full h-1' />
-                <div className='flex flex-row items-center justify-center font-medium'>
+                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
                   {formatNumber(generalInformation?.population ?? 0)}
                 </div>
               </div>
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index 646cfb15..88e5a693 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -36,7 +36,6 @@ import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
 import StatusBadge from '@/components/helper/StatusBadge';
 import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
 
 const dueStatus: Record<string, Color> = {
   'Sudah Jatuh Tempo': 'error',
@@ -60,7 +59,15 @@ const getPillBadge = (
       ? dueStatus[statusText] || 'neutral'
       : paymentStatus[statusText] || 'neutral';
 
-  return <StatusBadge color={color as Color} text={statusText} />;
+  return (
+    <StatusBadge
+      color={color as Color}
+      text={statusText}
+      className={{
+        badge: 'w-fit',
+      }}
+    />
+  );
 };
 
 interface DebtSupplierTabProps {