chore(FE-350): add add button in FinancesTable component

src/components/pages/finance/FinancesTable.tsx

@@ -92,6 +92,7 @@ const FinancesTable = () => {
   const {
     state: tableFilterState,
     updateFilter,
+    reset: resetFilter,
     setPage,
     setPageSize,
     toQueryString: getTableFilterQueryString,
@@ -276,15 +277,7 @@ const FinancesTable = () => {
     setSelectedBank(null);
     setSelectedSortBy(null);
 
-    updateFilter('search', '');
-    updateFilter('transactionType', '');
-    updateFilter('customerId', '');
-    updateFilter('supplierId', '');
-    updateFilter('kandangId', '');
-    updateFilter('bankId', '');
-    updateFilter('sortBy', '');
-    updateFilter('startDate', '');
-    updateFilter('endDate', '');
+    resetFilter();
   };
 
   // track sorting
@@ -301,14 +294,23 @@ const FinancesTable = () => {
   return (
     <div className='w-full p-0 sm:p-4'>
       <div className='flex flex-col gap-4 mb-4'>
-        {/* Row 1: Search */}
-        <div className='w-full'>
+        {/* Row 1: Search and Add Button */}
+        <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-4'>
+          <Button
+            href='/finance/add'
+            variant='outline'
+            color='primary'
+            className='w-full sm:w-fit'
+          >
+            <Icon icon='ic:round-plus' width={24} height={24} />
+            Tambah
+          </Button>
           <DebouncedTextInput
             name='search'
             placeholder='Search'
             value={tableFilterState.search}
             onChange={searchChangeHandler}
-            className={{ wrapper: 'w-full' }}
+            className={{ wrapper: 'w-full sm:max-w-xs' }}
           />
         </div>
 
@@ -410,7 +412,7 @@ const FinancesTable = () => {
           />
           <DateInput
             name='startDate'
-            label='Periode Tanggal'
+            label='Tanggal Mulai'
             placeholder='Pilih Tanggal Mulai'
             value={tableFilterState.startDate}
             onChange={(e) => updateFilter('startDate', e.target.value)}
@@ -418,7 +420,7 @@ const FinancesTable = () => {
           />
           <DateInput
             name='endDate'
-            label=' '
+            label='Tanggal Akhir '
             placeholder='Pilih Tanggal Selesai'
             value={tableFilterState.endDate}
             onChange={(e) => updateFilter('endDate', e.target.value)}
@@ -426,22 +428,8 @@ const FinancesTable = () => {
           />
         </div>
 
-        {/* Row 4: Page Size, Filter Actions */}
-        <div className='flex flex-row justify-between items-center mt-2'>
-          <div className='w-20'>
-            {/* Page size selector logic is inside Table usually, or we can add it here if needed, but Table component handles it via props. Let's keep it clean or add a rows selector if requested. Screenshot shows 'Baris 10' dropdown. */}
-            {/* Table component usually has a prop for rowOptions, but doesn't expose the selector UI outside unless we use TableRowSizeSelector. Let's just rely on Table's implicit size control or add it if strictly needed. The screenshot shows it outside. Implementing minimally for now. */}
-          </div>
+        <div className='flex flex-row justify-end items-center'>
           <div className='flex flex-row gap-2'>
-            <Button
-              onClick={() => {
-                /* Trigger search/filter explicitly if needed, but useEffect/onChange handles it */
-              }}
-              color='primary'
-              className='min-w-20'
-            >
-              Cari
-            </Button>
             <Button
               onClick={resetFilters}
               variant='outline'