feat(FE): Add skeleton components for closing pages

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

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