feat(FE): Add skeleton components for closing pages

2026-05-24 23:35:45 +00:00 · 2026-02-19 10:03:25 +07:00
parent 9c953ca382
commit 8fe19feaac
18 changed files with 1262 additions and 613 deletions
@@ -0,0 +1,44 @@
+import { Icon } from '@iconify/react';
+import ClosingTabSkeleton from './ClosingTabSkeleton';
+import { BaseExpeditionCost } from '@/types/api/closing';
+import { ColumnDef } from '@tanstack/react-table';
+
+const HppExpeditionClosingSkeleton = ({
+  columns,
+  title = 'Data HPP Ekspedisi Belum Tersedia',
+  subtitle = 'Tidak ada data HPP ekspedisi untuk periode ini.',
+  iconName = 'heroicons:chart-bar',
+}: {
+  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}
+      icon={
+        <Icon icon={iconName} className='text-white' width={20} height={20} />
+      }
+      title={title}
+      subtitle={subtitle}
+    />
+  );
+};
+
+export default HppExpeditionClosingSkeleton;