From 6e7dfebacc9657dfeb7a477a8e7fab5abde8f75a Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 4 Mar 2026 10:56:35 +0700
Subject: [PATCH] feat(FE): Integrate UI store for table state and search
 handling

---
 .../project-flock/ProjectFlockTable.tsx           | 15 ++++++++++++++-
 .../transfer-to-laying/TransferToLayingsTable.tsx | 14 ++++++++++++++
 .../production/uniformity/UniformityTable.tsx     | 13 ++++++++++++-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 14378852..1ae56fa2 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -21,8 +21,9 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Icon } from '@iconify/react';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
-import { useRouter } from 'next/navigation';
+import { useRouter, usePathname } from 'next/navigation';
 import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
+import { useUiStore } from '@/stores/ui/ui.store';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 import { useFormik } from 'formik';
@@ -148,6 +149,9 @@ const RowOptionsMenu = ({
 };
 
 const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
+  const { searchValue, setSearchValue, setTableState } = useUiStore();
+  const pathname = usePathname();
+
   const isSuccess = useProjectFlockStore((s) => s.isSuccess);
   const setIsSuccess = useProjectFlockStore((s) => s.setIsSuccess);
   const createdProjectFlock = useProjectFlockStore(
@@ -416,7 +420,16 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     setIsDeleteLoading(false);
     setRowSelection({});
   };
+  useEffect(() => {
+    updateFilter('search', searchValue);
+  }, [searchValue, updateFilter]);
+
+  useEffect(() => {
+    setTableState('project-flock-table', pathname);
+  }, [pathname, setTableState]);
+
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
   const confirmApprovalHandler = async (
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
index 0b8a299f..e3177791 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { ChangeEventHandler, useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { useUiStore } from '@/stores/ui/ui.store';
 import useSWR from 'swr';
 import {
   CellContext,
@@ -121,6 +123,9 @@ const RowOptionsMenu = ({
 };
 
 const TransferToLayingsTable = () => {
+  const { searchValue, setSearchValue, setTableState } = useUiStore();
+  const pathname = usePathname();
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -413,7 +418,16 @@ const TransferToLayingsTable = () => {
     setIsRejectLoading(false);
   };
 
+  useEffect(() => {
+    updateFilter('search', searchValue);
+  }, [searchValue, updateFilter]);
+
+  useEffect(() => {
+    setTableState('transfer-to-laying-table', pathname);
+  }, [pathname, setTableState]);
+
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
 
diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 9e543902..8c3f5b88 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+import { useUiStore } from '@/stores/ui/ui.store';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
@@ -184,6 +185,8 @@ const UniformityChartWrapper = ({
 const UniformityTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { searchValue, setSearchValue, setTableState } = useUiStore();
   const isSuccess = useUniformityStore((s) => s.isSuccess);
   const setIsSuccess = useUniformityStore((s) => s.setIsSuccess);
   const createdUniformity = useUniformityStore((s) => s.createdUniformity);
@@ -218,6 +221,14 @@ const UniformityTable = () => {
     },
   });
 
+  useEffect(() => {
+    updateFilter('search', searchValue);
+  }, [searchValue, updateFilter]);
+
+  useEffect(() => {
+    setTableState('uniformity-table', pathname);
+  }, [pathname, setTableState]);
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const [selectedUniformity, setSelectedUniformity] = useState<