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

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -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>
   );
 };