feat(FE-361): Add Reset button to clear report filters

src/components/pages/report/logistic-stock/PurchasesPerSupplierTab.tsx

@@ -21,6 +21,7 @@ import {
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import Pagination from '@/components/Pagination';
+import Button from '@/components/Button';
 
 interface Totals {
   totalQty: number;
@@ -144,6 +145,17 @@ const PurchasesPerSupplierTab = () => {
     [updateFilter]
   );
 
+  const resetFilters = useCallback(() => {
+    updateFilter('area_id', '');
+    updateFilter('supplier_id', '');
+    updateFilter('product_id', '');
+    updateFilter('received_date', '');
+    updateFilter('po_date', '');
+    updateFilter('start_date', '');
+    updateFilter('end_date', '');
+    setDataType('received_date');
+  }, [updateFilter]);
+
   // ===== DATA FETCHING =====
   const { data: response, isLoading } = useSWR(
     `${LogisticService.basePath}/purchase-supplier${getTableFilterQueryString()}`,
@@ -322,8 +334,12 @@ const PurchasesPerSupplierTab = () => {
         subtitle='Laporan > Rekapitulasi Pembelian Per Supplier'
         className={{ wrapper: 'w-full', body: 'p-1!' }}
       >
+        <div className='mb-4 flex justify-end'>
+          <Button onClick={resetFilters} className='px-4 py-2'>
+            Reset
+          </Button>
+        </div>
         <div className='grid grid-cols-12 gap-4'>
-          {/* TODO START */}
           <SelectInput
             label='Area'
             placeholder='Pilih Area'
@@ -416,7 +432,6 @@ const PurchasesPerSupplierTab = () => {
               wrapper: 'col-span-12 sm:col-span-4',
             }}
           />
-          {/* TODO END */}
         </div>
 
         {isLoading ? (