mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-22 22:35:45 +00:00
rstubryan
508 lines
20 KiB
TypeScript
508 lines
20 KiB
TypeScript
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';
|
|
import FinanceClosingSkeleton from '@/components/pages/closing/skeleton/FinanceClosingSkeleton';
|
|
|
|
const FinanceClosingTable = ({
|
|
projectFlockId,
|
|
}: {
|
|
projectFlockId: number;
|
|
}) => {
|
|
const searchParams = useSearchParams();
|
|
const kandangId = searchParams.get('kandangId');
|
|
|
|
const { data: finance, isLoading } = useSWR(
|
|
`/closing/finance/${projectFlockId}${kandangId ? `/${kandangId}` : ''}`,
|
|
() =>
|
|
ClosingApi.getFinance(
|
|
projectFlockId,
|
|
kandangId ? Number(kandangId) : undefined
|
|
)
|
|
);
|
|
|
|
const hppTableData: HppItem[] = useMemo(() => {
|
|
if (isResponseSuccess(finance)) {
|
|
const customItems = {
|
|
label: 'HPP dan Pengeluaran',
|
|
code: 'custom_row',
|
|
} as HppItem;
|
|
const purchases = finance.data.hpp.items.filter(
|
|
(item) => item.category === 'purchase'
|
|
);
|
|
const totalBudgeting = {
|
|
label: 'HPP dan Bahan Baku',
|
|
code: 'custom_row',
|
|
} as HppItem;
|
|
const overheads = finance.data.hpp.items.filter(
|
|
(item) => item.category === 'overhead'
|
|
);
|
|
return [customItems, ...purchases, totalBudgeting, ...overheads];
|
|
}
|
|
return [];
|
|
}, [finance]);
|
|
|
|
const profitLossTableData: ProfitLossItem[] = useMemo(() => {
|
|
if (isResponseSuccess(finance)) {
|
|
const incomes = finance.data.profit_loss.items.filter(
|
|
(item) => item.type === 'income'
|
|
);
|
|
const purchases = finance.data.profit_loss.items.filter(
|
|
(item) => item.type === 'purchase'
|
|
);
|
|
const overheads = finance.data.profit_loss.items.filter(
|
|
(item) => item.type === 'overhead'
|
|
);
|
|
const grossProfit = {
|
|
label: 'LABA RUGI BRUTO',
|
|
code: 'custom_row',
|
|
type: 'gross_profit',
|
|
rp_per_bird:
|
|
finance.data.profit_loss.summary.gross_profit.rp_per_bird ?? 0,
|
|
rp_per_kg: finance.data.profit_loss.summary.gross_profit.rp_per_kg ?? 0,
|
|
amount: finance.data.profit_loss.summary.gross_profit.amount ?? 0,
|
|
} as ProfitLossItem;
|
|
const subtotal = {
|
|
label: 'Subtotal',
|
|
code: 'custom_row',
|
|
type: 'subtotal',
|
|
rp_per_bird:
|
|
finance.data.profit_loss.summary.sub_total.rp_per_bird ?? 0,
|
|
rp_per_kg: finance.data.profit_loss.summary.sub_total.rp_per_kg ?? 0,
|
|
amount: finance.data.profit_loss.summary.sub_total.amount ?? 0,
|
|
} as ProfitLossItem;
|
|
return [...incomes, ...purchases, grossProfit, ...overheads, subtotal];
|
|
}
|
|
return [];
|
|
}, [finance]);
|
|
|
|
return (
|
|
<div className='flex flex-col gap-4 pt-3'>
|
|
{isLoading ? (
|
|
<FinanceClosingSkeleton />
|
|
) : !isResponseSuccess(finance) ? (
|
|
<FinanceClosingSkeleton
|
|
iconName='heroicons:chart-bar'
|
|
title='Data Keuangan Tidak Ditemukan'
|
|
subtitle='Tidak ada data keuangan untuk periode ini.'
|
|
/>
|
|
) : (
|
|
<>
|
|
<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>
|
|
</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>
|
|
</Card>
|
|
</section>
|
|
<Card
|
|
title='HPP Purchases'
|
|
variant='bordered'
|
|
collapsible
|
|
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-0'>
|
|
<Table<HppItem>
|
|
data={hppTableData}
|
|
isLoading={isLoading}
|
|
columns={[
|
|
{
|
|
header: 'No.',
|
|
enableSorting: false,
|
|
accessorFn: (item, index) => {
|
|
if (item.code === 'custom_row') return '-';
|
|
const dataRowsBefore = hppTableData
|
|
.slice(0, index)
|
|
.filter((row) => row.code !== 'custom_row').length;
|
|
return dataRowsBefore + 1;
|
|
},
|
|
footer: () => {
|
|
return 'HPP';
|
|
},
|
|
},
|
|
{
|
|
header: 'Jenis',
|
|
enableSorting: false,
|
|
accessorFn: (item) => formatTitleCase(item.label || '-'),
|
|
},
|
|
{
|
|
header: 'Budgeting',
|
|
enableSorting: false,
|
|
columns: [
|
|
{
|
|
header: 'Rp/Ekor',
|
|
id: 'budgeting_rp_per_bird',
|
|
enableSorting: false,
|
|
accessorFn: (item) =>
|
|
formatCurrency(item.budgeting?.rp_per_bird || 0),
|
|
footer: (props) => {
|
|
return props.column.id === 'budgeting_rp_per_bird' &&
|
|
isResponseSuccess(finance)
|
|
? formatCurrency(
|
|
finance.data.hpp.summary?.budgeting
|
|
?.rp_per_bird || 0
|
|
)
|
|
: '-';
|
|
},
|
|
},
|
|
{
|
|
header: 'Rp/Kg',
|
|
id: 'budgeting_rp_per_kg',
|
|
enableSorting: false,
|
|
accessorFn: (item) =>
|
|
formatCurrency(item.budgeting?.rp_per_kg || 0),
|
|
footer: (props) => {
|
|
return props.column.id === 'budgeting_rp_per_kg' &&
|
|
isResponseSuccess(finance)
|
|
? formatCurrency(
|
|
finance.data.hpp.summary?.budgeting
|
|
?.rp_per_kg || 0
|
|
)
|
|
: '-';
|
|
},
|
|
},
|
|
{
|
|
header: 'Jumlah (Rp)',
|
|
id: 'budgeting_amount',
|
|
enableSorting: false,
|
|
accessorFn: (item) =>
|
|
formatCurrency(item.budgeting?.amount || 0),
|
|
footer: (props) => {
|
|
return props.column.id === 'budgeting_amount' &&
|
|
isResponseSuccess(finance)
|
|
? formatCurrency(
|
|
finance.data.hpp.summary?.budgeting?.amount || 0
|
|
)
|
|
: '-';
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
header: 'Realization',
|
|
enableSorting: false,
|
|
columns: [
|
|
{
|
|
header: 'Rp/Ekor',
|
|
id: 'realization_rp_per_bird',
|
|
enableSorting: false,
|
|
accessorFn: (item) =>
|
|
formatCurrency(item.realization?.rp_per_bird || 0),
|
|
footer: (props) => {
|
|
return props.column.id ===
|
|
'realization_rp_per_bird' &&
|
|
isResponseSuccess(finance)
|
|
? formatCurrency(
|
|
finance.data.hpp.summary?.realization
|
|
?.rp_per_bird || 0
|
|
)
|
|
: '-';
|
|
},
|
|
},
|
|
{
|
|
header: 'Rp/Kg',
|
|
id: 'realization_rp_per_kg',
|
|
enableSorting: false,
|
|
accessorFn: (item) =>
|
|
formatCurrency(item.realization?.rp_per_kg || 0),
|
|
footer: (props) => {
|
|
return props.column.id === 'realization_rp_per_kg' &&
|
|
isResponseSuccess(finance)
|
|
? formatCurrency(
|
|
finance.data.hpp.summary?.realization
|
|
?.rp_per_kg || 0
|
|
)
|
|
: '-';
|
|
},
|
|
},
|
|
{
|
|
header: 'Jumlah (Rp)',
|
|
id: 'realization_amount',
|
|
enableSorting: false,
|
|
accessorFn: (item) =>
|
|
formatCurrency(item.realization?.amount || 0),
|
|
footer: (props) => {
|
|
return props.column.id === 'realization_amount' &&
|
|
isResponseSuccess(finance)
|
|
? formatCurrency(
|
|
finance.data.hpp.summary?.realization?.amount ||
|
|
0
|
|
)
|
|
: '-';
|
|
},
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
className={{
|
|
containerClassName: 'w-full mb-0!',
|
|
tableWrapperClassName:
|
|
'overflow-x-auto rounded-tr-none rounded-tl-none',
|
|
tableClassName: 'w-full table-auto text-sm',
|
|
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
|
|
headerColumnClassName:
|
|
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
|
|
bodyRowClassName:
|
|
'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
|
|
bodyColumnClassName:
|
|
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
|
tableFooterClassName:
|
|
'bg-gray-100 font-semibold border border-gray-200',
|
|
footerRowClassName: 'border-t-2 border-gray-300',
|
|
footerColumnClassName:
|
|
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
|
paginationClassName: 'hidden',
|
|
}}
|
|
renderCustomRow={(row) => {
|
|
const rowData = row.original;
|
|
if (rowData.code === 'custom_row') {
|
|
return (
|
|
<tr
|
|
key={row.id}
|
|
className={TABLE_DEFAULT_STYLING.bodyRowClassName}
|
|
>
|
|
<td
|
|
className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
|
|
></td>
|
|
<td
|
|
colSpan={7}
|
|
className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
|
|
>
|
|
<div className='font-bold'>
|
|
{formatTitleCase(rowData.label ?? '-')}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
return null;
|
|
}}
|
|
renderFooter={isResponseSuccess(finance)}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
<Card
|
|
title='Profit/Loss'
|
|
variant='bordered'
|
|
collapsible
|
|
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-0'>
|
|
<Table<ProfitLossItem>
|
|
data={profitLossTableData}
|
|
isLoading={isLoading}
|
|
columns={[
|
|
{
|
|
header: 'Jenis',
|
|
enableSorting: false,
|
|
accessorFn: (item) => item.label,
|
|
cell: (item) => (
|
|
<div className=''>
|
|
{formatTitleCase(item.row.original.label || '-')}
|
|
</div>
|
|
),
|
|
footer: () => (
|
|
<div className='font-bold uppercase'>LABA RUGI NETTO</div>
|
|
),
|
|
},
|
|
{
|
|
header: 'Rp/Ekor',
|
|
enableSorting: false,
|
|
accessorFn: (item) => formatCurrency(item.rp_per_bird || 0),
|
|
footer: () => (
|
|
<div className='font-bold'>
|
|
{isResponseSuccess(finance)
|
|
? formatCurrency(
|
|
finance.data.profit_loss.summary.net_profit
|
|
.rp_per_bird || 0
|
|
)
|
|
: formatCurrency(0)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
header: 'Rp/Kg',
|
|
enableSorting: false,
|
|
accessorFn: (item) => formatCurrency(item.rp_per_kg || 0),
|
|
footer: () => (
|
|
<div className='font-bold'>
|
|
{isResponseSuccess(finance)
|
|
? formatCurrency(
|
|
finance.data.profit_loss.summary.net_profit
|
|
.rp_per_kg || 0
|
|
)
|
|
: formatCurrency(0)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
header: 'Jumlah (Rp)',
|
|
enableSorting: false,
|
|
accessorFn: (item) => formatCurrency(item.amount || 0),
|
|
footer: () => (
|
|
<div className='font-bold'>
|
|
{isResponseSuccess(finance)
|
|
? formatCurrency(
|
|
finance.data.profit_loss.summary.net_profit
|
|
.amount || 0
|
|
)
|
|
: formatCurrency(0)}
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
className={{
|
|
containerClassName: 'w-full mb-0!',
|
|
tableWrapperClassName:
|
|
'overflow-x-auto rounded-tr-none rounded-tl-none',
|
|
tableClassName: 'w-full table-auto text-sm',
|
|
headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
|
|
headerColumnClassName:
|
|
'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
|
|
bodyRowClassName:
|
|
'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
|
|
bodyColumnClassName:
|
|
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
|
tableFooterClassName:
|
|
'bg-gray-100 font-semibold border border-gray-200',
|
|
footerRowClassName: 'border-t-2 border-gray-300',
|
|
footerColumnClassName:
|
|
'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
|
|
paginationClassName: 'hidden',
|
|
}}
|
|
renderCustomRow={(row) => {
|
|
const rowData = row.original;
|
|
if (rowData.code === 'custom_row') {
|
|
return (
|
|
<tr
|
|
key={row.id}
|
|
className={TABLE_DEFAULT_STYLING.footerRowClassName}
|
|
>
|
|
<td
|
|
className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
|
|
>
|
|
<div className='font-bold ps-6 uppercase'>
|
|
{formatTitleCase(rowData.label ?? '-')}
|
|
</div>
|
|
</td>
|
|
<td
|
|
className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
|
|
>
|
|
<div className='font-bold'>
|
|
{formatCurrency(rowData.rp_per_bird ?? 0)}
|
|
</div>
|
|
</td>
|
|
<td
|
|
className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
|
|
>
|
|
<div className='font-bold'>
|
|
{formatCurrency(rowData.rp_per_kg ?? 0)}
|
|
</div>
|
|
</td>
|
|
<td
|
|
className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
|
|
>
|
|
<div className='font-bold'>
|
|
{formatCurrency(rowData.amount ?? 0)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
return null;
|
|
}}
|
|
renderFooter={isResponseSuccess(finance)}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FinanceClosingTable;
|