feat(FE): Add skeleton components for closing pages

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

@@ -0,0 +1,72 @@
+import { Icon } from '@iconify/react';
+import ClosingTabSkeleton from './ClosingTabSkeleton';
+import { Overhead } from '@/types/api/closing';
+import { ColumnDef } from '@tanstack/react-table';
+
+const OverheadClosingSkeleton = ({
+  columns,
+  title = 'Data Overhead Belum Tersedia',
+  subtitle = 'Tidak ada data overhead untuk periode ini.',
+  iconName = 'heroicons:chart-bar',
+}: {
+  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}
+      icon={
+        <Icon icon={iconName} className='text-white' width={20} height={20} />
+      }
+      title={title}
+      subtitle={subtitle}
+    />
+  );
+};
+
+export default OverheadClosingSkeleton;