feat(FE): Add headings and improve layout for financial tables

This commit is contained in:
rstubryan
2026-02-19 11:52:57 +07:00
parent 82975219a8
commit a0af934002
2 changed files with 72 additions and 28 deletions
@@ -14,6 +14,7 @@ const ClosingKandangList = ({
<div className='flex flex-col @sm:flex-row gap-4'>
<div className='w-full'>
<div className='overflow-x-auto'>
<h1 className='font-bold mb-3'>Kandang</h1>
<div className='flex flex-wrap gap-2'>
{projectData?.kandangs?.map((kandang) => (
<Button
@@ -1,9 +1,11 @@
import Alert from '@/components/Alert';
import Card from '@/components/Card';
import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
import { isResponseSuccess } from '@/lib/api-helper';
import { formatCurrency, formatTitleCase } from '@/lib/helper';
import { ClosingApi } from '@/services/api/closing';
import { HppItem, ProfitLossItem } from '@/types/api/closing';
import { Icon } from '@iconify/react';
import { useSearchParams } from 'next/navigation';
import { useMemo } from 'react';
import useSWR from 'swr';
@@ -93,38 +95,79 @@ const FinanceClosingTable = ({
/>
) : (
<>
<Card
variant='bordered'
className={{
wrapper: 'w-full rounded-lg border-none',
body: 'p-0',
title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
collapsible: 'rounded-lg',
}}
>
<div className='p-4 grid grid-cols-2 gap-6'>
<div className='flex flex-col gap-1'>
<div>Laba Rugi Brutto</div>
<div className='text-lg font-bold'>
{isResponseSuccess(finance)
? formatCurrency(
finance.data.profit_loss.summary.gross_profit.amount
)
: '-'}
<section className='grid grid-cols-1 md:grid-cols-2 gap-3'>
<Card
className={{
wrapper: 'w-full rounded-xl border border-base-content/10',
body: 'p-0',
wrapperContent:
'h-full flex flex-col items-between justify-between',
}}
variant='bordered'
>
<div className='flex flex-row items-center gap-4 px-4 py-4'>
<Alert
variant='soft'
color='success'
className='rounded-lg p-3 bg-success/12 flex items-center justify-center'
>
<Icon
icon='heroicons:chart-bar-square'
width={24}
height={24}
/>
</Alert>
<div className='space-y-1'>
<h3 className='text-base-content/50 font-semibold text-sm'>
Laba Rugi Brutto
</h3>
<p className='text-xl font-semibold'>
{isResponseSuccess(finance)
? formatCurrency(
finance.data.profit_loss.summary.gross_profit.amount
)
: '-'}
</p>
</div>
</div>
<div className='flex flex-col gap-1'>
<div>Laba Rugi Netto</div>
<div className='text-lg font-bold'>
{isResponseSuccess(finance)
? formatCurrency(
finance.data.profit_loss.summary.net_profit.amount
)
: '-'}
</Card>
<Card
className={{
wrapper: 'w-full rounded-xl border border-base-content/10',
body: 'p-0',
wrapperContent:
'h-full flex flex-col items-between justify-between',
}}
variant='bordered'
>
<div className='flex flex-row items-center gap-4 px-4 py-4'>
<Alert
variant='soft'
color='info'
className='rounded-lg p-3 bg-info/12 flex items-center justify-center'
>
<Icon
icon='heroicons:currency-dollar'
width={24}
height={24}
/>
</Alert>
<div className='space-y-1'>
<h3 className='text-base-content/50 font-semibold text-sm'>
Laba Rugi Netto
</h3>
<p className='text-xl font-semibold'>
{isResponseSuccess(finance)
? formatCurrency(
finance.data.profit_loss.summary.net_profit.amount
)
: '-'}
</p>
</div>
</div>
</div>
</Card>
</Card>
</section>
<Card
title='HPP Purchases'
variant='bordered'