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.'
-      : 'Silakan pilih periode atau filter untuk melihat data sapronak keluar.';
+      ? 'Tidak ada data sapronak masuk untuk periode ini.'
+      : 'Tidak ada data sapronak keluar untuk periode ini.';
 
   return (
-    <ClosingTabSkeleton<ClosingIncomingSapronak>
-      columns={
-        columns ||
-        (type === 'incoming' ? defaultIncomingColumns : defaultOutgoingColumns)
-      }
+    <ClosingTabSkeleton<T>
+      columns={columns}
       icon={
         <Icon icon={iconName} className='text-white' width={20} height={20} />
       }