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 (