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

src/components/pages/report/expense/ReportExpenseTabs.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState } from 'react';
+import Tabs from '@/components/Tabs';
+
+import { useReportTabStore } from '@/stores/report/report-tab.store';
+import ReportExpenseTab from './tab/ReportExpenseTab';
+
+const ReportExpenseTabs = () => {
+  const [activeTabId, setActiveTabId] = useState<string>('1');
+  const tabActions = useReportTabStore((state) => state.tabActions);
+
+  const tabs = [
+    {
+      id: '1',
+      label: 'Laporan Biaya Operasional',
+      content: <ReportExpenseTab tabId={'1'} />,
+    },
+  ];
+
+  return (
+    <section className='w-full'>
+      <Tabs
+        tabs={tabs}
+        variant='boxed'
+        activeTabId={activeTabId}
+        onTabChange={setActiveTabId}
+        className={{
+          tabHeaderWrapper:
+            'justify-between items-center p-3 border-b border-base-content/10',
+          tab: 'w-fit',
+          content: 'p-0 m-0',
+        }}
+        sideContent={tabActions[activeTabId] || null}
+      />
+    </section>
+  );
+};
+
+export default ReportExpenseTabs;