From 4b93cb45890ddc1d87bbb7d0be1b07668606a9fe Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 4 Mar 2026 10:51:51 +0700
Subject: [PATCH] feat(FE): Integrate UI store state with InventoryProductTable

---
 .../inventory/product/InventoryProductTable.tsx  | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/inventory/product/InventoryProductTable.tsx b/src/components/pages/inventory/product/InventoryProductTable.tsx
index 4951f030..21ded2bc 100644
--- a/src/components/pages/inventory/product/InventoryProductTable.tsx
+++ b/src/components/pages/inventory/product/InventoryProductTable.tsx
@@ -8,10 +8,12 @@ import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatNumber } from '@/lib/helper';
 import { InventoryProductApi } from '@/services/api/inventory';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { useUiStore } from '@/stores/ui/ui.store';
 import { InventoryProduct } from '@/types/api/inventory/product';
 import { Icon } from '@iconify/react';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-import { ChangeEventHandler, useMemo, useState } from 'react';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
+import { usePathname } from 'next/navigation';
 import useSWR from 'swr';
 import PopoverButton from '@/components/popover/PopoverButton';
 import PopoverContent from '@/components/popover/PopoverContent';
@@ -69,6 +71,9 @@ const RowOptionsMenu = ({
 };
 
 const InventoryProductTable = () => {
+  const { searchValue, setSearchValue, setTableState } = useUiStore();
+  const pathname = usePathname();
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -92,7 +97,16 @@ const InventoryProductTable = () => {
     InventoryProductApi.getAllFetcher
   );
 
+  useEffect(() => {
+    updateFilter('search', searchValue);
+  }, [searchValue, updateFilter]);
+
+  useEffect(() => {
+    setTableState('inventory-product-table', pathname);
+  }, [pathname, setTableState]);
+
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };