feat: add search input

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import {
   CellContext,
@@ -33,6 +33,7 @@ import { cn, formatDate, formatNumber } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Color } from '@/types/theme';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 
 const RowOptionsMenu = ({
   props,
@@ -432,6 +433,10 @@ const TransferToLayingsTable = () => {
     setIsRejectLoading(false);
   };
 
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
   const filterSubmitHandler = (values: TransferToLayingFilter) => {
     updateFilter('startDate', values.startDate);
     updateFilter('endDate', values.endDate);
@@ -527,7 +532,27 @@ const TransferToLayingsTable = () => {
             )}
           </div>
 
-          <div className='flex flex-row justify-center items-center gap-3'>
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Search'
+              value={tableFilterState.search ?? ''}
+              onChange={searchChangeHandler}
+              startAdornment={
+                <Icon
+                  icon='heroicons:magnifying-glass'
+                  width={20}
+                  height={20}
+                />
+              }
+              className={{
+                wrapper: 'w-full min-w-24 max-w-3xs',
+                inputWrapper: 'rounded-xl! shadow-button-soft',
+                input:
+                  'placeholder:font-semibold placeholder:text-base-content/50',
+              }}
+            />
+
             <Button
               variant='outline'
               color='none'