From b5a0614218bb8f7390e4a2aacb697976b1dd1685 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Fri, 22 May 2026 11:13:52 +0700
Subject: [PATCH] feat: implement url query param tab navigation

---
 src/app/report/expense/layout.tsx             | 11 ++++++++
 .../report/expense/ReportExpenseTabs.tsx      | 26 ++++++++++++++-----
 2 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 src/app/report/expense/layout.tsx

diff --git a/src/app/report/expense/layout.tsx b/src/app/report/expense/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/report/expense/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/components/pages/report/expense/ReportExpenseTabs.tsx b/src/components/pages/report/expense/ReportExpenseTabs.tsx
index 045e7a99..f700a0bb 100644
--- a/src/components/pages/report/expense/ReportExpenseTabs.tsx
+++ b/src/components/pages/report/expense/ReportExpenseTabs.tsx
@@ -1,26 +1,38 @@
 'use client';
 
-import { useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import Tabs from '@/components/Tabs';
 
 import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 import ReportExpenseTab from '@/components/pages/report/expense/tab/ReportExpenseTab';
 import ReportDepreciationTab from '@/components/pages/report/expense/tab/ReportDepreciationTab';
 
+const VALID_TAB_IDS = ['operational-expense', 'depreciation'];
+
 const ReportExpenseTabs = () => {
-  const [activeTabId, setActiveTabId] = useState<string>('1');
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const tabParam = searchParams.get('tab') ?? 'operational-expense';
+  const activeTabId = VALID_TAB_IDS.includes(tabParam)
+    ? tabParam
+    : 'operational-expense';
   const tabActions = useTabActionsStore((state) => state.tabActions);
 
+  const handleTabChange = (tabId: string) => {
+    router.push(`${pathname}?tab=${tabId}`);
+  };
+
   const tabs = [
     {
-      id: '1',
+      id: 'operational-expense',
       label: 'Laporan Biaya Operasional',
-      content: <ReportExpenseTab tabId={'1'} />,
+      content: <ReportExpenseTab tabId={'operational-expense'} />,
     },
     {
-      id: '2',
+      id: 'depreciation',
       label: 'Laporan Depresiasi',
-      content: <ReportDepreciationTab tabId={'2'} />,
+      content: <ReportDepreciationTab tabId={'depreciation'} />,
     },
   ];
 
@@ -30,7 +42,7 @@ const ReportExpenseTabs = () => {
         tabs={tabs}
         variant='boxed'
         activeTabId={activeTabId}
-        onTabChange={setActiveTabId}
+        onTabChange={handleTabChange}
         className={{
           tabHeaderWrapper:
             'justify-between items-center p-3 border-b border-base-content/10',