mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-22 14:25:47 +00:00
feat(FE-284): Slicing and API Integration Perhitungan Sapronak
This commit is contained in:
randy-ar
@@ -1,5 +1,310 @@
|
||||
const SapronakCalculationTable = () => {
|
||||
return <div>SapronakCalculationTable</div>;
|
||||
'use client';
|
||||
|
||||
import Card from '@/components/Card';
|
||||
|
||||
import Table from '@/components/Table';
|
||||
import { cn, formatCurrency, formatNumber } from '@/lib/helper';
|
||||
import {
|
||||
SapronakCalculation,
|
||||
RowSapronakCalculation,
|
||||
TotalSapronakCalculation,
|
||||
} from '@/types/api/closing/closing';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
interface SapronakCalculationTableProps {
|
||||
type?: 'detail';
|
||||
initialValues?: SapronakCalculation;
|
||||
}
|
||||
|
||||
interface FooterSapronakCalculationRow extends RowSapronakCalculation {
|
||||
_isFooter: true;
|
||||
}
|
||||
|
||||
const SapronakCalculationTable = ({
|
||||
type,
|
||||
initialValues,
|
||||
}: SapronakCalculationTableProps) => {
|
||||
const columns: ColumnDef<RowSapronakCalculation>[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
header: 'Tanggal',
|
||||
accessorKey: 'tanggal',
|
||||
cell: (props) => {
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
if (isFooter) return null;
|
||||
const value = props.getValue() as string;
|
||||
return value || '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'No. Referensi',
|
||||
accessorKey: 'no_referensi',
|
||||
cell: (props) => {
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
const value = props.getValue() as string;
|
||||
if (isFooter) {
|
||||
return (
|
||||
<div className='font-semibold text-gray-900 col-span-2'>
|
||||
{value}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return value || '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'QTY Masuk',
|
||||
accessorKey: 'qty_masuk',
|
||||
cell: (props) => {
|
||||
const value = props.getValue() as number;
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
return (
|
||||
<div className={isFooter ? 'font-semibold text-gray-900' : ''}>
|
||||
{formatNumber(value)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'QTY Keluar',
|
||||
accessorKey: 'qty_keluar',
|
||||
cell: (props) => {
|
||||
const value = props.getValue() as number;
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
return (
|
||||
<div className={isFooter ? 'font-semibold text-gray-900' : ''}>
|
||||
{formatNumber(value)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'QTY Pakai',
|
||||
accessorKey: 'qty_pakai',
|
||||
cell: (props) => {
|
||||
const value = props.getValue() as number;
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
return (
|
||||
<div className={isFooter ? 'font-semibold text-gray-900' : ''}>
|
||||
{formatNumber(value)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Uraian',
|
||||
accessorKey: 'uraian',
|
||||
cell: (props) => {
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
if (isFooter) return null;
|
||||
const value = props.getValue() as string;
|
||||
return value || '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Kategori Produk',
|
||||
accessorKey: 'kategori_produk',
|
||||
cell: (props) => {
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
if (isFooter) return null;
|
||||
const value = props.getValue() as string;
|
||||
return value || '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Harga Beli/Qty (Rp)',
|
||||
accessorKey: 'harga_beli_per_qty',
|
||||
cell: (props) => {
|
||||
const value = props.getValue() as number;
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
return (
|
||||
<div className={isFooter ? 'font-semibold text-gray-900' : ''}>
|
||||
{formatCurrency(value)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Total Harga (Rp)',
|
||||
accessorKey: 'total_harga',
|
||||
cell: (props) => {
|
||||
const value = props.getValue() as number;
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
return (
|
||||
<div className={isFooter ? 'font-semibold text-gray-900' : ''}>
|
||||
{formatCurrency(value)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
header: 'Keterangan',
|
||||
accessorKey: 'keterangan',
|
||||
cell: (props) => {
|
||||
const isFooter = '_isFooter' in props.row.original;
|
||||
if (isFooter) return null;
|
||||
const value = props.getValue() as string;
|
||||
return value || '-';
|
||||
},
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const createFooterRow = (
|
||||
total?: TotalSapronakCalculation
|
||||
): FooterSapronakCalculationRow[] => {
|
||||
if (!total) return [];
|
||||
return [
|
||||
{
|
||||
id: -999,
|
||||
tanggal: '',
|
||||
no_referensi: total.label,
|
||||
qty_masuk: total.qty_masuk,
|
||||
qty_keluar: total.qty_keluar,
|
||||
qty_pakai: total.qty_pakai,
|
||||
uraian: '',
|
||||
kategori_produk: '',
|
||||
harga_beli_per_qty: total.harga_beli_per_qty,
|
||||
total_harga: total.total_harga,
|
||||
keterangan: '',
|
||||
_isFooter: true,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const docBroilerFooter = useMemo(
|
||||
() => createFooterRow(initialValues?.doc_broiler.total),
|
||||
[initialValues?.doc_broiler.total]
|
||||
);
|
||||
|
||||
const ovkFooter = useMemo(
|
||||
() => createFooterRow(initialValues?.ovk.total),
|
||||
[initialValues?.ovk.total]
|
||||
);
|
||||
|
||||
const pakanFooter = useMemo(
|
||||
() => createFooterRow(initialValues?.pakan.total),
|
||||
[initialValues?.pakan.total]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-4'>
|
||||
<>
|
||||
<Card
|
||||
title='DOC Broiler'
|
||||
variant='bordered'
|
||||
collapsible
|
||||
defaultCollapsed={false}
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<Table<RowSapronakCalculation>
|
||||
data={initialValues?.doc_broiler.rows ?? []}
|
||||
columns={columns}
|
||||
footerData={docBroilerFooter}
|
||||
renderFooter={
|
||||
(initialValues?.doc_broiler.rows.length ?? 0) > 0 &&
|
||||
!!initialValues?.doc_broiler.total
|
||||
}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': initialValues?.doc_broiler.rows.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
tableFooterClassName:
|
||||
'bg-gray-100 font-semibold border border-gray-200',
|
||||
footerRowClassName: 'border-t-2 border-gray-300',
|
||||
footerColumnClassName: 'px-6 py-3 text-xs text-gray-900',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title='OVK'
|
||||
variant='bordered'
|
||||
collapsible
|
||||
defaultCollapsed={true}
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<Table<RowSapronakCalculation>
|
||||
data={initialValues?.ovk.rows ?? []}
|
||||
columns={columns}
|
||||
footerData={ovkFooter}
|
||||
renderFooter={
|
||||
(initialValues?.ovk.rows.length ?? 0) > 0 &&
|
||||
!!initialValues?.ovk.total
|
||||
}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': initialValues?.ovk.rows.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
tableFooterClassName:
|
||||
'bg-gray-100 font-semibold border border-gray-200',
|
||||
footerRowClassName: 'border-t-2 border-gray-300',
|
||||
footerColumnClassName: 'px-6 py-3 text-xs text-gray-900',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title='Pakan'
|
||||
variant='bordered'
|
||||
collapsible
|
||||
defaultCollapsed={true}
|
||||
className={{
|
||||
wrapper: 'w-full',
|
||||
}}
|
||||
>
|
||||
<Table<RowSapronakCalculation>
|
||||
data={initialValues?.pakan.rows ?? []}
|
||||
columns={columns}
|
||||
footerData={pakanFooter}
|
||||
renderFooter={
|
||||
(initialValues?.pakan.rows.length ?? 0) > 0 &&
|
||||
!!initialValues?.pakan.total
|
||||
}
|
||||
className={{
|
||||
containerClassName: cn({
|
||||
'mb-20': initialValues?.pakan.rows.length === 0,
|
||||
}),
|
||||
tableWrapperClassName: 'overflow-x-auto min-h-full!',
|
||||
tableClassName: 'font-inter w-full table-auto min-h-full!',
|
||||
headerRowClassName: 'border-b border-b-gray-200',
|
||||
headerColumnClassName:
|
||||
'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
|
||||
bodyRowClassName: 'border-b border-b-gray-200',
|
||||
bodyColumnClassName:
|
||||
'px-6 py-3 last:flex last:flex-row last:justify-end',
|
||||
tableFooterClassName:
|
||||
'bg-gray-100 font-semibold border border-gray-200',
|
||||
footerRowClassName: 'border-t-2 border-gray-300',
|
||||
footerColumnClassName: 'px-6 py-3 text-xs text-gray-900',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SapronakCalculationTable;
|
||||
|
||||
Reference in New Issue
Block a user