adjust filter po

src/components/pages/purchase/PurchaseTable.tsx

@@ -13,7 +13,6 @@ import toast from 'react-hot-toast';
 import Link from 'next/link';
 import { Icon } from '@iconify/react';
 import Table from '@/components/Table';
-import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import DateInput from '@/components/input/DateInput';
 import Button from '@/components/Button';
 import Modal, { useModal } from '@/components/Modal';
@@ -23,8 +22,7 @@ import PopoverContent from '@/components/popover/PopoverContent';
 import RequirePermission from '@/components/helper/RequirePermission';
 import StatusBadge from '@/components/helper/StatusBadge';
 import PurchaseTableSkeleton from '@/components/pages/purchase/skeleton/PurchaseTableSkeleton';
-import ButtonFilter from '@/components/helper/ButtonFilter';
-import PurchaseFilterModal from '@/components/pages/purchase/PurchaseFilterModal';
+import PurchaseInlineFilter from '@/components/pages/purchase/PurchaseInlineFilter';
 import Dropdown from '@/components/dropdown/Dropdown';
 import { OptionType } from '@/components/input/SelectInput';
 
@@ -258,7 +256,6 @@ const PurchaseTable = () => {
   };
 
   // ===== MODAL HOOKS =====
-  const filterModal = useModal();
   const deleteModal = useModal();
   const exportProgressInputModal = useModal();
 
@@ -878,47 +875,6 @@ const PurchaseTable = () => {
           </div>
 
           <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',
-              }}
-            />
-
-            <ButtonFilter
-              values={tableFilterState}
-              excludeFields={[
-                'page',
-                'pageSize',
-                'search',
-                'filter_by',
-                'sort_by',
-                'order_by',
-                'product_category_name',
-                'supplier_name',
-                'area_name',
-                'location_name',
-                'project_flock_name',
-                'project_flock_kandang_name',
-              ]}
-              fieldGroups={[['start_date', 'end_date']]}
-              onClick={filterModal.openModal}
-              className='px-3 py-2.5'
-            />
-
             <Dropdown
               align='end'
               direction='bottom'
@@ -976,6 +932,14 @@ const PurchaseTable = () => {
           </div>
         </div>
 
+        <PurchaseInlineFilter
+          initialValues={purchaseFilterInitialValues}
+          searchValue={tableFilterState.search}
+          onSearchChange={searchChangeHandler}
+          onSubmit={filterSubmitHandler}
+          onReset={filterResetHandler}
+        />
+
         {/* Table Section */}
         <div className='flex flex-col mb-4'>
           {isLoading ? (
@@ -1033,13 +997,6 @@ const PurchaseTable = () => {
 
       {/* ===== MODAL COMPONENTS ===== */}
 
-      <PurchaseFilterModal
-        ref={filterModal.ref}
-        initialValues={purchaseFilterInitialValues}
-        onSubmit={filterSubmitHandler}
-        onReset={filterResetHandler}
-      />
-
       <ConfirmationModal
         ref={deleteModal.ref}
         type='error'