fix: components

resources/js/components/AppDateRangeFilter.vue

     type: Object,
     required: true,
   },
-  refreshData: {
+  url: {
     type: String,
     required: true,
   },
+  refreshData: {
+    type: Array,
+    default: [],
+    required: false,
+  },
 })
 
 const filters = reactive({
       filters.endDate = null
     }
 
-    Inertia.reload({
-      data: pickBy({
+    Inertia.get(
+      props.url,
+      pickBy({
         start_date: filters.startDate,
         end_date: filters.endDate,
       }),
-      only: [props.refreshData],
-    })
+      {
+        preserveState: true,
+        only: [...props.refreshData],
+      }
+    )
   }
 )
-
-const removeParams = (...params) => {
-  const urlParams = new URLSearchParams(location.search)
-
-  params.forEach((value) => urlParams.delete(value))
-
-  history.replaceState({}, '', `${location.pathname}?${urlParams}`)
-}
-
-const dateSelect = () => {
-  if (filters.dates[0]) {
-    removeParams('end_date')
-  }
-
-  removeParams('page')
-}
 </script>
 
 <template>
     selection-mode="range"
     date-format="dd/mm/yy"
     :manual-input="false"
-    @date-select="dateSelect"
     v-model="filters.dates"
   />
 </template>

resources/js/components/AppResetFilter.vue

+<script setup>
+import { Inertia } from '@inertiajs/inertia'
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true,
+  },
+})
+
+const reset = () => {
+  Inertia.get(props.url)
+}
+</script>
+
+<template>
+  <Button label="reset" class="p-button-link" @click="reset()" />
+</template>

resources/js/components/AppSearchFilter.vue

 import { pickBy } from 'lodash'
 
 const props = defineProps({
+  initialSearch: {
+    required: true,
+  },
   url: {
     type: String,
     required: true,
   },
-  initialSearch: {
-    required: true,
+  refreshData: {
+    type: Array,
+    default: [],
+    required: false,
   },
 })
 
 const search = ref(props.initialSearch)
 
-watch(search, () => {
-  Inertia.get(props.url, pickBy({ search: search.value }), {
+watch(search, (value) => {
+  Inertia.get(props.url, pickBy({ search: value }), {
     preserveState: true,
+    only: [...props.refreshData],
   })
 })
 </script>

resources/js/pages/Products/Index.vue

               <AppSearchFilter
                 class="w-full md:w-27rem"
                 placeholder="nomor, nama"
-                url="/products"
+                :url="route('products.index')"
                 :initial-search="initialSearch"
               />
             </div>

resources/js/pages/Purchases/Index.vue

             <AppSearchFilter
               class="w-full md:w-27rem"
               placeholder="nama, email, no hp, status"
-              url="/purchases"
+              :url="route('purchases.index')"
               :initial-search="initialSearch"
             />
           </div>

resources/js/pages/Sales/Index.vue

               <AppSearchFilter
                 class="w-full md:w-27rem"
                 placeholder="nama, no hp, status"
-                url="/sales"
+                :url="route('sales.index')"
                 :initial-search="initialSearch"
               />
             </div>

resources/js/pages/Sales/Report.vue

 import AppButtonLink from '@/components/AppButtonLink.vue'
 import AppPagination from '@/components/AppPagination.vue'
 import DashboardLayout from '@/layouts/Dashboard/DashboardLayout.vue'
+import AppResetFilter from '@/components/AppResetFilter.vue'
 
 defineProps({
   filters: Object,
 })
 
 const exportExcel = () => {
-  return `/sales/excel/report${location.search}`
+  return route('sales.report.excel', location.search)
 }
 </script>
 
           <div class="col-12 sm:col-6 lg:col-4">
             <AppDateRangeFilter
               placeholder="filter waktu..."
-              refresh-data="sales"
+              :url="route('sales.report')"
+              :refresh-data="['sales']"
               :initial-filter="filters"
             />
           </div>
 
+          <div class="col-12 sm:col-6 lg:col-4">
+            <AppResetFilter :url="route('sales.report')" />
+          </div>
+
           <div class="col-12">
             <AppButtonLink
               v-if="sales.total"

resources/js/pages/StockProducts/Index.vue

         <AppSearchFilter
           class="w-full md:w-27rem"
           placeholder="nama"
-          url="/stock-products"
+          :url="route('stock-products.index')"
           :initial-search="initialSearch"
         />
       </template>

resources/js/pages/Suppliers/Index.vue

               <AppSearchFilter
                 class="w-full md:w-27rem"
                 placeholder="nama, no hp, npwp"
-                url="/suppliers"
+                :url="route('suppliers.index')"
                 :initial-search="initialSearch"
               />
             </div>

resources/js/pages/Users/Index.vue

               <AppSearchFilter
                 class="w-full md:w-27rem"
                 placeholder="nama, nama pengguna"
-                url="/users"
+                :url="route('users.index')"
                 :initialSearch="initialSearch"
               />
             </div>

routes/web.php

         "deliveryOrder",
     ])->name("purchases.pdf.do");
 
-    Route::get("/purchases/excel/report", [
+    Route::get("/purchases/report/excel", [
         PurchaseController::class,
         "reportExcel",
-    ]);
+    ])->name("purchases.report.excel");
 
     Route::get("/purchases/report", [PurchaseController::class, "report"]);
 
         "deliveryOrder",
     ])->name("sales.pdf.do");
 
-    Route::get("/sales/excel/report", [SalesController::class, "reportExcel"]);
+    Route::get("/sales/report/excel", [
+        SalesController::class,
+        "reportExcel",
+    ])->name("sales.report.excel");
 
-    Route::get("/sales/report", [SalesController::class, "report"]);
+    Route::get("/sales/report", [SalesController::class, "report"])->name(
+        "sales.report"
+    );
 
     Route::resource("/sales", SalesController::class);