feat(FE): Persist Recording search across navigation

src/components/pages/production/recording/RecordingTable.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import React, {
+  useCallback,
+  useState,
+  useMemo,
+  useEffect,
+  useRef,
+} from 'react';
 import { RefObject } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
@@ -28,6 +34,7 @@ import { useTableFilter } from '@/services/hooks/useTableFilter';
 import toast from 'react-hot-toast';
 import Badge from '@/components/Badge';
 import CheckboxInput from '@/components/input/CheckboxInput';
+import { useTableStore } from '@/stores/table/table.store';
 import { BaseApproval, BaseApiResponse } from '@/types/api/api-general';
 
 const RowOptionsMenu = ({
@@ -344,6 +351,9 @@ const ApprovalHistoryModal = ({
 };
 
 const RecordingTable = () => {
+  const { searchValue, setSearchValue, resetSearchValue } = useTableStore();
+  const previousPathRef = useRef<string | null>(null);
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -352,7 +362,7 @@ const RecordingTable = () => {
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
     initial: {
-      search: '',
+      search: searchValue,
       areaFilter: '',
       locationFilter: '',
       kandangFilter: '',
@@ -403,12 +413,35 @@ const RecordingTable = () => {
     );
   }, []);
 
+  useEffect(() => {
+    // Store current path on mount
+    previousPathRef.current = window.location.pathname;
+
+    return () => {
+      const currentPath = window.location.pathname;
+
+      // if both paths are within /production/recording module
+      const isCurrentPathRecording = currentPath.includes(
+        '/production/recording'
+      );
+      const isPreviousPathRecording = previousPathRef.current?.includes(
+        '/production/recording'
+      );
+
+      // reset if we outside recording module entirely
+      if (isPreviousPathRecording && !isCurrentPathRecording) {
+        resetSearchValue();
+      }
+    };
+  }, [resetSearchValue]);
+
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       updateFilter('search', e.target.value);
+      setSearchValue(e.target.value);
       setPage(1);
     },
-    [updateFilter, setPage]
+    [updateFilter, setSearchValue, setPage]
   );
 
   const pageSizeChangeHandler = useCallback(