feat: implement Query Param Tab Navigation

src/components/pages/report/finance/FinanceTabs.tsx

@@ -1,31 +1,47 @@
 'use client';
 
-import { useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import Tabs from '@/components/Tabs';
 import CustomerPaymentTab from '@/components/pages/report/finance/tab/CustomerPaymentTab';
 import DebtSupplierTab from '@/components/pages/report/finance/tab/DebtSupplierTab';
 import BalanceMonitoringTab from '@/components/pages/report/finance/tab/BalanceMonitoringTab';
 import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
 
+const VALID_TAB_IDS = [
+  'debt-supplier',
+  'customer-payment',
+  'balance-monitoring',
+];
+
 const FinanceTabs = () => {
-  const [activeTabId, setActiveTabId] = useState<string>('1');
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const tabParam = searchParams.get('tab') ?? 'debt-supplier';
+  const activeTabId = VALID_TAB_IDS.includes(tabParam)
+    ? tabParam
+    : 'debt-supplier';
   const tabActions = useTabActionsStore((state) => state.tabActions);
 
+  const handleTabChange = (tabId: string) => {
+    router.push(`${pathname}?tab=${tabId}`);
+  };
+
   const tabs = [
     {
-      id: '1',
+      id: 'debt-supplier',
       label: 'Rekapitulasi Hutang Ke Supplier',
-      content: <DebtSupplierTab tabId={'1'} />,
+      content: <DebtSupplierTab tabId={'debt-supplier'} />,
     },
     {
-      id: '2',
+      id: 'customer-payment',
       label: 'Kontrol Pembayaran Customer',
-      content: <CustomerPaymentTab tabId={'2'} />,
+      content: <CustomerPaymentTab tabId={'customer-payment'} />,
     },
     {
-      id: '3',
+      id: 'balance-monitoring',
       label: 'Monitoring Saldo',
-      content: <BalanceMonitoringTab tabId={'3'} />,
+      content: <BalanceMonitoringTab tabId={'balance-monitoring'} />,
     },
   ];
 
@@ -35,7 +51,7 @@ const FinanceTabs = () => {
         tabs={tabs}
         variant='boxed'
         activeTabId={activeTabId}
-        onTabChange={setActiveTabId}
+        onTabChange={handleTabChange}
         className={{
           tabHeaderWrapper:
             'justify-between items-center p-3 border-b border-base-content/10',