From 18ebf75aa716d3bb7bec9ed29089520e295ce838 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 4 Mar 2026 11:06:53 +0700
Subject: [PATCH] feat(FE): Integrate UI store and pathname handling in table
 components

---
 src/components/pages/closing/ClosingsTable.tsx | 14 ++++++++++++++
 src/components/pages/expense/ExpensesTable.tsx | 14 ++++++++++++++
 .../pages/purchase/PurchaseTable.tsx           | 18 ++++++++++++++++--
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/closing/ClosingsTable.tsx b/src/components/pages/closing/ClosingsTable.tsx
index 912e8dfd..d3586e98 100644
--- a/src/components/pages/closing/ClosingsTable.tsx
+++ b/src/components/pages/closing/ClosingsTable.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { ChangeEventHandler, useEffect, useState, useMemo } from 'react';
+import { usePathname } from 'next/navigation';
+import { useUiStore } from '@/stores/ui/ui.store';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import { useRouter } from 'next/navigation';
@@ -91,6 +93,9 @@ const RowOptionsMenu = ({
 };
 
 const ClosingsTable = () => {
+  const { searchValue, setSearchValue, setTableState } = useUiStore();
+  const pathname = usePathname();
+
   // ===== ROUTER =====
   const router = useRouter();
 
@@ -289,8 +294,17 @@ const ClosingsTable = () => {
     );
   }, [formik.values.project_status, projectStatusOptions]);
 
+  useEffect(() => {
+    updateFilter('search', searchValue);
+  }, [searchValue, updateFilter]);
+
+  useEffect(() => {
+    setTableState('closing-table', pathname);
+  }, [pathname, setTableState]);
+
   // ===== SEARCH CHANGE HANDLER =====
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
 
diff --git a/src/components/pages/expense/ExpensesTable.tsx b/src/components/pages/expense/ExpensesTable.tsx
index 849c1f83..d9118fdf 100644
--- a/src/components/pages/expense/ExpensesTable.tsx
+++ b/src/components/pages/expense/ExpensesTable.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { useUiStore } from '@/stores/ui/ui.store';
 import useSWR from 'swr';
 import {
   CellContext,
@@ -151,6 +153,9 @@ const RowOptionsMenu = ({
 };
 
 const ExpensesTable = () => {
+  const { searchValue, setSearchValue, setTableState } = useUiStore();
+  const pathname = usePathname();
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -507,7 +512,16 @@ const ExpensesTable = () => {
     setIsRejectLoading(false);
   };
 
+  useEffect(() => {
+    updateFilter('search', searchValue);
+  }, [searchValue, updateFilter]);
+
+  useEffect(() => {
+    setTableState('expense-table', pathname);
+  }, [pathname, setTableState]);
+
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
 
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index e84d56d3..b3ba4487 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -1,6 +1,8 @@
 'use client';
 
-import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { useUiStore } from '@/stores/ui/ui.store';
 import useSWR from 'swr';
 import useSWRInfinite from 'swr/infinite';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
@@ -139,6 +141,9 @@ const RowOptionsMenu = ({
 };
 
 const PurchaseTable = () => {
+  const { searchValue, setSearchValue, setTableState } = useUiStore();
+  const pathname = usePathname();
+
   // ===== STATE MANAGEMENT =====
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [selectedPurchase, setSelectedPurchase] = useState<Purchase | null>(
@@ -385,11 +390,20 @@ const PurchaseTable = () => {
     setIsDeleteLoading(false);
   }, [selectedPurchase?.id, refreshPurchaseRequests, deleteModal]);
 
+  useEffect(() => {
+    updateFilter('search', searchValue);
+  }, [searchValue, updateFilter]);
+
+  useEffect(() => {
+    setTableState('purchase-table', pathname);
+  }, [pathname, setTableState]);
+
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = useCallback(
     (e) => {
+      setSearchValue(e.target.value);
       updateFilter('search', e.target.value);
     },
-    [updateFilter]
+    [updateFilter, setSearchValue]
   );
 
   const pageSizeChangeHandler = useCallback(