fix(FE): fixing status badge color

This commit is contained in:
randy-ar
2026-02-03 13:40:46 +07:00
parent 15e53d2c2d
commit c102a4043c
3 changed files with 20 additions and 11 deletions
+2
View File
@@ -28,6 +28,7 @@ const StatusBadge = ({
'bg-error/20': color === 'error', 'bg-error/20': color === 'error',
'bg-primary/20': color === 'info', 'bg-primary/20': color === 'info',
'bg-[#FF9A20]/12': color === 'warning', 'bg-[#FF9A20]/12': color === 'warning',
'bg-[#1166EF]/12': color === 'primary',
}, },
className?.badge className?.badge
), ),
@@ -45,6 +46,7 @@ const StatusBadge = ({
'text-error': color === 'error', 'text-error': color === 'error',
'text-primary': color === 'info', 'text-primary': color === 'info',
'text-[#FF9A20]': color === 'warning', 'text-[#FF9A20]': color === 'warning',
'text-[#1166EF]': color === 'primary',
})} })}
> >
<circle r='6' cx='6' cy='6' fill='currentColor' /> <circle r='6' cx='6' cy='6' fill='currentColor' />
@@ -250,29 +250,29 @@ const ClosingOverheadTable = ({
body: 'p-4 shadow-button-soft border border-base-content/10 rounded-lg', 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'> <div className='flex flex-row items-center justify-between'>
<h2 className='text-base font-bold'>Pembelian Kandang </h2> <h2 className='text-base font-bold'>Pembelian Kandang </h2>
</div> </div>
<div className='flex flex-col items-center justify-center'> <div className='flex flex-col items-center justify-center'>
<Icon icon='heroicons:equals' className='inline' /> <Icon icon='heroicons:equals' className='inline' />
</div> </div>
<div className='flex flex-col flex-1'> <div className='flex flex-col flex-1 gap-1.5'>
<div className='flex flex-row items-center justify-center font-medium'> <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
Populasi Akhir KANDANG{' '} Populasi Akhir KANDANG{' '}
<Icon icon='heroicons:x-mark' className='inline' /> Pemakaian <Icon icon='heroicons:x-mark' className='inline' /> Pemakaian
Di FARM Di FARM
</div> </div>
<hr className='w-full h-1' /> <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
<div className='flex flex-row items-center justify-center font-medium'> <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
Populasi Akhir Proyek Populasi Akhir Proyek
</div> </div>
</div> </div>
<div className='flex flex-col items-center justify-center'> <div className='flex flex-col items-center justify-center'>
<Icon icon='heroicons:equals' className='inline' /> <Icon icon='heroicons:equals' className='inline' />
</div> </div>
<div className='flex flex-col flex-1'> <div className='flex flex-col flex-1 gap-1.5'>
<div className='flex flex-row items-center justify-center font-medium'> <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
{formatNumber(chickinPopulation ?? 0)} {formatNumber(chickinPopulation ?? 0)}
<Icon icon='heroicons:x-mark' className='inline' /> <Icon icon='heroicons:x-mark' className='inline' />
{formatCurrency( {formatCurrency(
@@ -281,8 +281,8 @@ const ClosingOverheadTable = ({
: 0 : 0
)} )}
</div> </div>
<hr className='w-full h-1' /> <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
<div className='flex flex-row items-center justify-center font-medium'> <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
{formatNumber(generalInformation?.population ?? 0)} {formatNumber(generalInformation?.population ?? 0)}
</div> </div>
</div> </div>
@@ -36,7 +36,6 @@ import SelectInputRadio from '@/components/input/SelectInputRadio';
import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store'; import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
import StatusBadge from '@/components/helper/StatusBadge'; import StatusBadge from '@/components/helper/StatusBadge';
import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton'; import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
const dueStatus: Record<string, Color> = { const dueStatus: Record<string, Color> = {
'Sudah Jatuh Tempo': 'error', 'Sudah Jatuh Tempo': 'error',
@@ -60,7 +59,15 @@ const getPillBadge = (
? dueStatus[statusText] || 'neutral' ? dueStatus[statusText] || 'neutral'
: paymentStatus[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 { interface DebtSupplierTabProps {