feat(FE-208): add goods receipt section with table and dummy data in purchase order detail view

This commit is contained in:
rstubryan
2025-11-14 09:05:58 +07:00
parent 7485919e52
commit 1b64c1f5d1
@@ -26,6 +26,23 @@ interface PurchaseOrderItem {
total: number;
}
interface GoodsReceiptItem {
id: number;
tanggalPenerimaan: string;
gudangTujuan: string;
noSuratJalan: string;
dokumenSuratJalan: string;
noArmada: string;
pengangkut: string;
jumlahTotal: string;
jumlahDiterima: string;
jumlahRetur: string;
ekspedisi: string;
transportPerItem: string;
transportTotal: string;
status?: 'diterima' | 'belum-diterima';
}
interface PurchaseOrderInfo {
businessUnit: string;
area: string;
@@ -62,6 +79,103 @@ const dummyPurchaseOrderItems: PurchaseOrderItem[] = [
},
];
const dummyGoodsReceiptItems: GoodsReceiptItem[] = [
{
id: 1,
tanggalPenerimaan: '1 Jan 1970 00:00',
gudangTujuan: 'Gudang A',
noSuratJalan: 'NSJ-1',
dokumenSuratJalan: 'details',
noArmada: 'NAP-1',
pengangkut: 'details',
jumlahTotal: 'Rp10.000,00',
jumlahDiterima: 'details',
jumlahRetur: 'details',
ekspedisi: 'Ekspedisi 1',
transportPerItem: 'details',
transportTotal: 'Rp1.000,00',
},
{
id: 2,
tanggalPenerimaan: '1 Jan 1970 00:00',
gudangTujuan: 'Gudang A',
noSuratJalan: 'NSJ-1',
dokumenSuratJalan: 'details',
noArmada: 'NAP-1',
pengangkut: 'details',
jumlahTotal: 'Rp10.000,00',
jumlahDiterima: 'details',
jumlahRetur: 'Rp0',
ekspedisi: 'Ekspedisi 1',
transportPerItem: 'details',
transportTotal: 'Rp10.000,00',
},
{
id: 3,
tanggalPenerimaan: '1 Jan 1970 00:00',
gudangTujuan: 'Gudang A',
noSuratJalan: 'NSJ-1',
dokumenSuratJalan: 'details',
noArmada: 'NAP-1',
pengangkut: 'details',
jumlahTotal: 'Rp10.000,00',
jumlahDiterima: 'Jumlah Produk Diterima',
jumlahRetur: 'Rp0.000,00',
ekspedisi: 'Ekspedisi 1',
transportPerItem: 'details',
transportTotal: 'Rp10.000,00',
status: 'diterima',
},
{
id: 4,
tanggalPenerimaan: '1 Jan 1970 00:00',
gudangTujuan: 'Gudang A',
noSuratJalan: 'NSJ-1',
dokumenSuratJalan: 'details',
noArmada: 'NAP-1',
pengangkut: 'details',
jumlahTotal: 'Rp10.000,00',
jumlahDiterima: 'Jumlah Produk Belum Diterima',
jumlahRetur: 'Rp0.000,00',
ekspedisi: 'Ekspedisi 1',
transportPerItem: 'details',
transportTotal: 'Rp10.000,00',
status: 'belum-diterima',
},
{
id: 5,
tanggalPenerimaan: '1 Jan 1970 00:00',
gudangTujuan: 'Gudang A',
noSuratJalan: 'NSJ-1',
dokumenSuratJalan: 'details',
noArmada: 'NAP-1',
pengangkut: 'details',
jumlahTotal: 'Rp10.000,00',
jumlahDiterima: 'Nominal Produk Diterima',
jumlahRetur: 'Rp0.000,00',
ekspedisi: 'Ekspedisi 1',
transportPerItem: 'details',
transportTotal: 'Rp10.000,00',
status: 'diterima',
},
{
id: 6,
tanggalPenerimaan: '1 Jan 1970 00:00',
gudangTujuan: 'Gudang A',
noSuratJalan: 'NSJ-1',
dokumenSuratJalan: 'details',
noArmada: 'NAP-1',
pengangkut: 'details',
jumlahTotal: 'Rp10.000,00',
jumlahDiterima: 'Nominal Produk Belum Diterima',
jumlahRetur: 'Rp0.000,00',
ekspedisi: 'Ekspedisi 1',
transportPerItem: 'details',
transportTotal: 'Rp10.000,00',
status: 'belum-diterima',
},
];
const dummyGroupedApprovals: BaseGroupedApproval[] = [
{
step_number: 1,
@@ -164,6 +278,7 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
// ===== STATIC DATA =====
const purchaseOrderInfo = dummyPurchaseOrderInfo;
const purchaseOrderItems = dummyPurchaseOrderItems;
const goodsReceiptItems = dummyGoodsReceiptItems;
const groupedApprovals = dummyGroupedApprovals;
const latestApproval =
groupedApprovals[groupedApprovals.length - 1]?.approvals[0];
@@ -230,6 +345,57 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
},
];
const goodsReceiptColumns: ColumnDef<GoodsReceiptItem>[] = [
{
accessorKey: 'tanggalPenerimaan',
header: 'Tanggal Penerimaan',
},
{
accessorKey: 'gudangTujuan',
header: 'Gudang Tujuan',
},
{
accessorKey: 'noSuratJalan',
header: 'No. Surat Jalan',
},
{
accessorKey: 'dokumenSuratJalan',
header: 'Dokumen Surat Jalan',
},
{
accessorKey: 'noArmada',
header: 'No. Armada',
},
{
accessorKey: 'pengangkut',
header: 'Pengangkut',
},
{
accessorKey: 'jumlahTotal',
header: 'Jumlah Total',
},
{
accessorKey: 'jumlahDiterima',
header: 'Jumlah Diterima',
},
{
accessorKey: 'jumlahRetur',
header: 'Jumlah Retur',
},
{
accessorKey: 'ekspedisi',
header: 'Ekspedisi',
},
{
accessorKey: 'transportPerItem',
header: 'Transport /Item',
},
{
accessorKey: 'transportTotal',
header: 'Transport Total',
},
];
const summaryData = [
{
label: 'Total Sebelum Pajak',
@@ -448,6 +614,38 @@ const PurchaseOrderDetail = ({ type = 'detail' }: PurchaseOrderDetailProps) => {
</div>
</div>
</Card>
{/* Penerimaan Barang */}
<Card
collapsible
title='Penerimaan Barang'
variant='bordered'
className={{
wrapper: 'w-full mt-8',
}}
>
<div className='rounded-lg border border-gray-200 overflow-hidden'>
<div className='overflow-x-auto'>
<Table<GoodsReceiptItem>
data={goodsReceiptItems}
columns={goodsReceiptColumns}
isLoading={false}
className={{
containerClassName: 'm-0',
tableWrapperClassName: 'overflow-x-auto',
tableClassName: 'w-full table-auto',
headerRowClassName: 'bg-gray-50 border-b border-gray-200',
headerColumnClassName:
'px-4 py-3 text-sm font-semibold text-gray-700 text-left whitespace-nowrap',
bodyRowClassName:
'border-b border-gray-100 hover:bg-gray-50 transition-colors',
bodyColumnClassName: 'px-4 py-3 text-sm text-gray-900 whitespace-nowrap',
paginationClassName: 'hidden',
}}
/>
</div>
</div>
</Card>
</section>
);
};