refactor(FE): Refactor skeleton components to remove default columns

src/components/pages/closing/skeleton/ClosingTabSkeleton.tsx

@@ -8,7 +8,7 @@ const ClosingTabSkeleton = <T extends object>({
   title,
   subtitle,
 }: {
-  columns: ColumnDef<T>[];
+  columns: ColumnDef<T, unknown>[];
   icon: React.ReactNode;
   title: string;
   subtitle: string;
@@ -17,7 +17,7 @@ const ClosingTabSkeleton = <T extends object>({
     <div className='relative size-full'>
       <Table
         data={[]}
-        columns={columns as ColumnDef<T>[]}
+        columns={columns}
         isLoading={true}
         className={{
           skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',

src/components/pages/closing/skeleton/HppExpeditionClosingSkeleton.tsx

@@ -9,29 +9,14 @@ const HppExpeditionClosingSkeleton = ({
   subtitle = 'Tidak ada data HPP ekspedisi untuk periode ini.',
   iconName = 'heroicons:chart-bar',
 }: {
-  columns?: ColumnDef<BaseExpeditionCost>[];
+  columns: ColumnDef<BaseExpeditionCost>[];
   title?: string;
   subtitle?: string;
   iconName?: string;
 }) => {
-  const defaultColumns: ColumnDef<BaseExpeditionCost>[] = [
-    {
-      id: 'id',
-      header: 'No',
-    },
-    {
-      id: 'expedition_vendor_name',
-      header: 'Nama Ekspedisi',
-    },
-    {
-      id: 'hpp_amount',
-      header: 'HPP Ekspedisi',
-    },
-  ];
-
   return (
     <ClosingTabSkeleton<BaseExpeditionCost>
-      columns={columns || defaultColumns}
+      columns={columns}
       icon={
         <Icon icon={iconName} className='text-white' width={20} height={20} />
       }

src/components/pages/closing/skeleton/OverheadClosingSkeleton.tsx

@@ -9,57 +9,14 @@ const OverheadClosingSkeleton = ({
   subtitle = 'Tidak ada data overhead untuk periode ini.',
   iconName = 'heroicons:chart-bar',
 }: {
-  columns?: ColumnDef<Overhead>[];
+  columns: ColumnDef<Overhead>[];
   title?: string;
   subtitle?: string;
   iconName?: string;
 }) => {
-  const defaultColumns: ColumnDef<Overhead>[] = [
-    {
-      id: 'name',
-      header: 'Nama Overhead',
-    },
-    {
-      id: 'budget_quantity',
-      header: 'Budget Pengajuan - Jumlah',
-    },
-    {
-      id: 'budget_unit_price',
-      header: 'Budget Pengajuan - Harga Satuan',
-    },
-    {
-      id: 'budget_total_amount',
-      header: 'Budget Pengajuan - Total',
-    },
-    {
-      id: 'actual_quantity',
-      header: 'Realisasi - Jumlah',
-    },
-    {
-      id: 'actual_unit_price',
-      header: 'Realisasi - Harga Satuan',
-    },
-    {
-      id: 'actual_total_amount',
-      header: 'Realisasi - Total',
-    },
-    {
-      id: 'difference_quantity',
-      header: 'Selisih - Jumlah',
-    },
-    {
-      id: 'difference_unit_price',
-      header: 'Selisih - Harga Satuan',
-    },
-    {
-      id: 'difference_total_amount',
-      header: 'Selisih - Total',
-    },
-  ];
-
   return (
     <ClosingTabSkeleton<Overhead>
-      columns={columns || defaultColumns}
+      columns={columns}
       icon={
         <Icon icon={iconName} className='text-white' width={20} height={20} />
       }

src/components/pages/closing/skeleton/SalesClosingSkeleton.tsx

@@ -9,69 +9,14 @@ const SalesClosingSkeleton = ({
   subtitle = 'Tidak ada data penjualan untuk periode ini.',
   iconName = 'heroicons:chart-bar',
 }: {
-  columns?: ColumnDef<BaseSales>[];
+  columns: ColumnDef<BaseSales>[];
   title?: string;
   subtitle?: string;
   iconName?: string;
 }) => {
-  const defaultColumns: ColumnDef<BaseSales>[] = [
-    {
-      id: 'realization_date',
-      header: 'Tanggal Realisasi',
-    },
-    {
-      id: 'age',
-      header: 'Umur',
-    },
-    {
-      id: 'do_number',
-      header: 'No. DO',
-    },
-    {
-      id: 'product',
-      header: 'Produk',
-    },
-    {
-      id: 'customer',
-      header: 'Customer',
-    },
-    {
-      id: 'qty',
-      header: 'Kuantitas',
-    },
-    {
-      id: 'weight',
-      header: 'Kg',
-    },
-    {
-      id: 'avg_weight',
-      header: 'AVG (Kg)',
-    },
-    {
-      id: 'sales_price',
-      header: 'Harga Sales (Rp)',
-    },
-    {
-      id: 'total_sales_price',
-      header: 'Total Sales (Rp)',
-    },
-    {
-      id: 'actual_price',
-      header: 'Harga Act (Rp)',
-    },
-    {
-      id: 'total_actual_price',
-      header: 'Total Act (Rp)',
-    },
-    {
-      id: 'kandang',
-      header: 'Kandang',
-    },
-  ];
-
   return (
     <ClosingTabSkeleton<BaseSales>
-      columns={columns || defaultColumns}
+      columns={columns}
       icon={
         <Icon icon={iconName} className='text-white' width={20} height={20} />
       }

src/components/pages/closing/skeleton/SapronakCalculationClosingSkeleton.tsx

@@ -9,57 +9,14 @@ const SapronakCalculationClosingSkeleton = ({
   subtitle = 'Tidak ada data perhitungan sapronak untuk periode ini.',
   iconName = 'heroicons:chart-bar',
 }: {
-  columns?: ColumnDef<RowSapronakCalculation>[];
+  columns: ColumnDef<RowSapronakCalculation>[];
   title?: string;
   subtitle?: string;
   iconName?: string;
 }) => {
-  const defaultColumns: ColumnDef<RowSapronakCalculation>[] = [
-    {
-      id: 'date',
-      header: 'Tanggal',
-    },
-    {
-      id: 'reference_number',
-      header: 'No. Referensi',
-    },
-    {
-      id: 'qty_in',
-      header: 'QTY Masuk',
-    },
-    {
-      id: 'qty_out',
-      header: 'QTY Keluar',
-    },
-    {
-      id: 'qty_used',
-      header: 'QTY Pakai',
-    },
-    {
-      id: 'balance',
-      header: 'Saldo',
-    },
-    {
-      id: 'unit_price_in',
-      header: 'Harga Masuk',
-    },
-    {
-      id: 'unit_price_out',
-      header: 'Harga Keluar',
-    },
-    {
-      id: 'total_price_in',
-      header: 'Total Harga Masuk',
-    },
-    {
-      id: 'total_price_out',
-      header: 'Total Harga Keluar',
-    },
-  ];
-
   return (
     <ClosingTabSkeleton<RowSapronakCalculation>
-      columns={columns || defaultColumns}
+      columns={columns}
       icon={
         <Icon icon={iconName} className='text-white' width={20} height={20} />
       }

src/components/pages/closing/skeleton/SapronakClosingSkeleton.tsx

@@ -1,103 +1,20 @@
 import { Icon } from '@iconify/react';
 import ClosingTabSkeleton from './ClosingTabSkeleton';
-import { ClosingIncomingSapronak } from '@/types/api/closing';
 import { ColumnDef } from '@tanstack/react-table';
 
-const SapronakClosingSkeleton = ({
+const SapronakClosingSkeleton = <T extends object>({
   columns,
   type = 'incoming',
   title,
   subtitle,
   iconName = 'heroicons:chart-bar',
 }: {
-  columns?: ColumnDef<ClosingIncomingSapronak>[];
+  columns: ColumnDef<T, unknown>[];
   type?: 'incoming' | 'outgoing';
   title?: string;
   subtitle?: string;
   iconName?: string;
 }) => {
-  const defaultIncomingColumns: ColumnDef<ClosingIncomingSapronak>[] = [
-    {
-      id: '#',
-      header: '#',
-    },
-    {
-      id: 'date',
-      header: 'Tanggal',
-    },
-    {
-      id: 'reference_number',
-      header: 'No. Referensi',
-    },
-    {
-      id: 'transaction_type',
-      header: 'Jenis Transaksi',
-    },
-    {
-      id: 'product_name',
-      header: 'Produk',
-    },
-    {
-      id: 'product_category',
-      header: 'Kategori Produk',
-    },
-    {
-      id: 'source_warehouse',
-      header: 'Gudang Asal',
-    },
-    {
-      id: 'destination_warehouse',
-      header: 'Gudang Tujuan',
-    },
-    {
-      id: 'quantity',
-      header: 'Kuantitas',
-    },
-    {
-      id: 'notes',
-      header: 'Keterangan',
-    },
-  ];
-
-  const defaultOutgoingColumns: ColumnDef<ClosingIncomingSapronak>[] = [
-    {
-      id: '#',
-      header: '#',
-    },
-    {
-      id: 'date',
-      header: 'Tanggal',
-    },
-    {
-      id: 'reference_number',
-      header: 'No. Referensi',
-    },
-    {
-      id: 'transaction_type',
-      header: 'Jenis Transaksi',
-    },
-    {
-      id: 'product_name',
-      header: 'Produk',
-    },
-    {
-      id: 'product_category',
-      header: 'Kategori Produk',
-    },
-    {
-      id: 'source_warehouse',
-      header: 'Gudang Asal',
-    },
-    {
-      id: 'quantity',
-      header: 'Kuantitas',
-    },
-    {
-      id: 'notes',
-      header: 'Keterangan',
-    },
-  ];
-
   const defaultTitle =
     type === 'incoming'
       ? 'Data Sapronak Masuk Belum Tersedia'
@@ -105,15 +22,12 @@ const SapronakClosingSkeleton = ({
 
   const defaultSubtitle =
     type === 'incoming'
-      ? 'Silakan pilih periode atau filter untuk melihat data sapronak masuk.'
+      ? 'Tidak ada data sapronak masuk untuk periode ini.'
-      : 'Silakan pilih periode atau filter untuk melihat data sapronak keluar.';
+      : 'Tidak ada data sapronak keluar untuk periode ini.';
 
   return (
-    <ClosingTabSkeleton<ClosingIncomingSapronak>
+    <ClosingTabSkeleton<T>
-      columns={
+      columns={columns}
-        columns ||
-        (type === 'incoming' ? defaultIncomingColumns : defaultOutgoingColumns)
-      }
       icon={
         <Icon icon={iconName} className='text-white' width={20} height={20} />
       }

src/components/pages/closing/table/OverheadClosingTable.tsx

@@ -210,6 +210,15 @@ const OverheadClosingTable = ({
 
   return (
     <>
+      <Card
+        title='Pengeluaran Overhead'
+        collapsible
+        defaultCollapsed={false}
+        className={{
+          wrapper: 'w-full',
+          body: 'p-4 shadow',
+        }}
+      >
         {isLoadingOverhead ? (
           <OverheadClosingSkeleton columns={columns} />
         ) : !isResponseSuccess(overhead) ||
@@ -222,15 +231,6 @@ const OverheadClosingTable = ({
             subtitle='Tidak ada data overhead untuk periode ini.'
           />
         ) : (
-        <Card
-          title='Pengeluaran Overhead'
-          collapsible
-          defaultCollapsed={false}
-          className={{
-            wrapper: 'w-full',
-            body: 'p-4 shadow',
-          }}
-        >
           <Table<Overhead>
             data={
               kandangId
@@ -256,7 +256,8 @@ const OverheadClosingTable = ({
                 : false
             }
           />
-          {kandangId && (
+        )}
+        {kandangId && !isLoadingOverhead && isResponseSuccess(overhead) && (
             <Card
               className={{
                 wrapper: 'w-full',
@@ -311,7 +312,6 @@ const OverheadClosingTable = ({
             </Card>
         )}
       </Card>
-      )}
     </>
   );
 };

src/components/pages/closing/table/SapronakCalculationClosingTable.tsx

@@ -195,10 +195,11 @@ const SapronakCalculationClosingTable = ({
         }}
       >
         {isLoading ? (
-          <SapronakCalculationClosingSkeleton />
+          <SapronakCalculationClosingSkeleton columns={docColumns} />
         ) : isResponseSuccess(sapronakCalculation) &&
           sapronakCalculation.data?.doc?.rows?.length === 0 ? (
           <SapronakCalculationClosingSkeleton
+            columns={docColumns}
             iconName='heroicons:chart-bar'
             title='Data Perhitungan Sapronak Tidak Ditemukan'
             subtitle='Tidak ada data perhitungan sapronak untuk periode ini.'
@@ -232,10 +233,11 @@ const SapronakCalculationClosingTable = ({
         }}
       >
         {isLoading ? (
-          <SapronakCalculationClosingSkeleton />
+          <SapronakCalculationClosingSkeleton columns={ovkColumns} />
         ) : isResponseSuccess(sapronakCalculation) &&
           sapronakCalculation.data?.ovk?.rows?.length === 0 ? (
           <SapronakCalculationClosingSkeleton
+            columns={ovkColumns}
             iconName='heroicons:chart-bar'
             title='Data Perhitungan Sapronak Tidak Ditemukan'
             subtitle='Tidak ada data perhitungan sapronak untuk periode ini.'
@@ -269,10 +271,11 @@ const SapronakCalculationClosingTable = ({
         }}
       >
         {isLoading ? (
-          <SapronakCalculationClosingSkeleton />
+          <SapronakCalculationClosingSkeleton columns={pakanColumns} />
         ) : isResponseSuccess(sapronakCalculation) &&
           sapronakCalculation.data?.pakan?.rows?.length === 0 ? (
           <SapronakCalculationClosingSkeleton
+            columns={pakanColumns}
             iconName='heroicons:chart-bar'
             title='Data Perhitungan Sapronak Tidak Ditemukan'
             subtitle='Tidak ada data perhitungan sapronak untuk periode ini.'

src/components/pages/closing/table/sapronak/IncomingSapronaksSummaryTable.tsx

@@ -133,11 +133,12 @@ const ClosingIncomingSapronaksSummaryTable = ({
       >
         <div className='w-full p-0'>
           {isLoadingIncomingSapronakSummaries ? (
-            <SapronakClosingSkeleton type='incoming' />
+            <SapronakClosingSkeleton type='incoming' columns={incomingSapronaksColumns} />
           ) : isResponseSuccess(incomingSapronakSummaries) &&
             incomingSapronakSummaries.data.length === 0 ? (
             <SapronakClosingSkeleton
               type='incoming'
+              columns={incomingSapronaksColumns}
               iconName='heroicons:chart-bar'
               title='Ringkasan Sapronak Masuk Tidak Ditemukan'
               subtitle='Tidak ada ringkasan sapronak masuk untuk periode ini.'

src/components/pages/closing/table/sapronak/IncomingSapronaksTable.tsx

@@ -169,11 +169,12 @@ const ClosingIncomingSapronaksTable = ({
           </div>
 
           {isLoadingIncomingSapronaks ? (
-            <SapronakClosingSkeleton type='incoming' />
+            <SapronakClosingSkeleton type='incoming' columns={incomingSapronaksColumns} />
           ) : isResponseSuccess(incomingSapronaks) &&
             incomingSapronaks.data.length === 0 ? (
             <SapronakClosingSkeleton
               type='incoming'
+              columns={incomingSapronaksColumns}
               iconName='heroicons:chart-bar'
               title='Data Sapronak Masuk Tidak Ditemukan'
               subtitle='Tidak ada data sapronak masuk untuk periode ini.'

src/components/pages/closing/table/sapronak/OutgoingSapronaksSummaryTable.tsx

@@ -133,11 +133,12 @@ const ClosingOutgoingSapronaksSummaryTable = ({
       >
         <div className='w-full p-0'>
           {isLoadingOutgoingSapronakSummaries ? (
-            <SapronakClosingSkeleton type='outgoing' />
+            <SapronakClosingSkeleton type='outgoing' columns={outgoingSapronaksColumns} />
           ) : isResponseSuccess(outgoingSapronakSummaries) &&
             outgoingSapronakSummaries.data.length === 0 ? (
             <SapronakClosingSkeleton
               type='outgoing'
+              columns={outgoingSapronaksColumns}
               iconName='heroicons:chart-bar'
               title='Ringkasan Sapronak Keluar Tidak Ditemukan'
               subtitle='Tidak ada ringkasan sapronak keluar untuk periode ini.'

src/components/pages/closing/table/sapronak/OutgoingSapronaksTable.tsx

@@ -169,11 +169,12 @@ const ClosingOutgoingSapronaksTable = ({
           </div>
 
           {isLoadingOutgoingSapronaks ? (
-            <SapronakClosingSkeleton type='outgoing' />
+            <SapronakClosingSkeleton type='outgoing' columns={outgoingSapronaksColumns} />
           ) : isResponseSuccess(outgoingSapronaks) &&
             outgoingSapronaks.data.length === 0 ? (
             <SapronakClosingSkeleton
               type='outgoing'
+              columns={outgoingSapronaksColumns}
               iconName='heroicons:chart-bar'
               title='Data Sapronak Keluar Tidak Ditemukan'
               subtitle='Tidak ada data sapronak keluar untuk periode ini.'