refactor(FE): Refactor expense report page to use tab-based layout

src/components/pages/report/expense/skeleton/ReportExpenseSkeleton.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { ReportExpense } from '@/types/api/report/report-expense';
+import { ColumnDef } from '@tanstack/react-table';
+
+type ReportExpenseColumn =
+  | ColumnDef<ReportExpense>
+  | {
+      header: string;
+      columns: Array<{
+        header: string;
+        accessorKey?: string;
+        cell?: (props: {
+          row: { original: ReportExpense };
+        }) => React.ReactNode;
+      }>;
+    };
+
+const ReportExpenseSkeleton = ({
+  columns,
+  icon,
+  title,
+  subtitle,
+}: {
+  columns: ReportExpenseColumn[];
+  icon: React.ReactNode;
+  title: string;
+  subtitle: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default ReportExpenseSkeleton;