feat(FE): Integrate UI store for table state and search handling

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 (

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);
   };
 

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<