feat: reset filter

app/Http/Controllers/ReportMutationController.php

 use App\Http\Controllers\Controller;
 use App\Models\Mutation;
 use App\Models\Outlet;
+use Inertia\Inertia;
 
 class ReportMutationController extends Controller
 {
     {
         return inertia('mutation/Report', [
             'filters' => request()->all('startDate', 'endDate', 'outlet'),
-            'mutations' => Mutation::filter(request()->only('startDate', 'endDate', 'outlet'))
-                ->latest()
-                ->paginate(10)
-                ->withQueryString()
-                ->through(fn($mutation) => [
-                    'createdAt' => $mutation->created_at,
-                    'outlet' => $mutation->outlet->name,
-                    'amount' => $mutation->amount,
-                    'type' => $mutation->type,
-                    'transactionId' => $mutation->transaction_id,
-                    'expenseId' => $mutation->expense_id,
-                ]),
+            'mutations' => Inertia::lazy(
+                fn() => Mutation::filter(request()->only('startDate', 'endDate', 'outlet'))
+                    ->latest()
+                    ->paginate(10)
+                    ->withQueryString()
+                    ->through(fn($mutation) => [
+                        'createdAt' => $mutation->created_at,
+                        'outlet' => $mutation->outlet->name,
+                        'amount' => $mutation->amount,
+                        'type' => $mutation->type,
+                        'transactionId' => $mutation->transaction_id,
+                        'expenseId' => $mutation->expense_id,
+                    ])
+            ),
             'outlets' => Outlet::all()
                 ->transform(fn($outlet) => [
                     'label' => $outlet->name,

app/Http/Controllers/ReportTransactionController.php

 
         return inertia('transaction/Report', [
             'filters' => request()->all('startDate', 'endDate', 'outlet'),
-            'transactions' => $transaction,
+            'transactions' => Inertia::lazy(
+                fn() => $transaction
+            ),
             'outlets' => Outlet::all()
                 ->transform(fn($outlet) => [
                     'label' => $outlet->name,

public/js/resources_js_pages_expense_Index_vue.js

         }
       }
     });
-    (0,vue__WEBPACK_IMPORTED_MODULE_1__.watch)(filterForm, lodash_throttle__WEBPACK_IMPORTED_MODULE_4___default()(function () {
+    (0,vue__WEBPACK_IMPORTED_MODULE_1__.watch)(filterForm, function () {
       if (filterForm.dates) {
         if (filterForm.dates[1]) {
           filterForm.startDate = dayjs__WEBPACK_IMPORTED_MODULE_3___default()(filterForm.dates[0]).format('YYYY-MM-DD');
       }), {
         preserveState: true
       });
-    }, 300));
+    });
+
+    var filterReset = function filterReset() {
+      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia.get('/expenses');
+    };
+
     var isAdmin = (0,vue__WEBPACK_IMPORTED_MODULE_1__.computed)(function () {
       return (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage)().props.value.isAdmin;
     });
     var __returned__ = {
       props: props,
       filterForm: filterForm,
+      filterReset: filterReset,
       isAdmin: isAdmin,
       Inertia: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia,
       watch: vue__WEBPACK_IMPORTED_MODULE_1__.watch,
   "class": "col-12 md:col-4"
 };
 var _hoisted_7 = {
+  "class": "col-auto mt-2 ml-2"
+};
+var _hoisted_8 = {
   "class": "col-12 md:col-4 flex justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_Dropdown = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Dropdown");
 
+  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
+
   var _component_Column = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Column");
 
   var _component_DataTable = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("DataTable");
             "selection-mode": "range",
             placeholder: "filter waktu...",
             "date-format": "dd/mm/yy",
-            "show-button-bar": true,
             "manual-input": false
           }, null, 8
           /* PROPS */
             options: $props.outlets
           }, null, 8
           /* PROPS */
-          , ["modelValue", "options"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
+          , ["modelValue", "options"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+            label: "reset",
+            "class": "p-button-link",
+            onClick: $setup.filterReset
+          })])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
             label: "Tambah Pengeluaran",
             "class": "p-button-outlined",
             icon: "pi pi-pencil",

public/js/resources_js_pages_mutation_Report_vue.js

 /* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
 /* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! dayjs */ "./node_modules/dayjs/dayjs.min.js");
 /* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lodash/throttle */ "./node_modules/lodash/throttle.js");
-/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var lodash_pickBy__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lodash/pickBy */ "./node_modules/lodash/pickBy.js");
-/* harmony import */ var lodash_pickBy__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(lodash_pickBy__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
-/* harmony import */ var _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/components/AppPagination.vue */ "./resources/js/components/AppPagination.vue");
-/* harmony import */ var _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/components/AppButton.vue */ "./resources/js/components/AppButton.vue");
-/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/mutation/TableHeader.js");
-
+/* harmony import */ var lodash_pickBy__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lodash/pickBy */ "./node_modules/lodash/pickBy.js");
+/* harmony import */ var lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash_pickBy__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
+/* harmony import */ var _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/components/AppPagination.vue */ "./resources/js/components/AppPagination.vue");
+/* harmony import */ var _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/components/AppButton.vue */ "./resources/js/components/AppButton.vue");
+/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/mutation/TableHeader.js");
 
 
 
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
-    mutations: Object,
+    mutations: {
+      type: Object,
+      "default": {
+        data: [],
+        links: [],
+        total: 0
+      }
+    },
     filters: Object,
     outlets: Array
   },
         }
       }
     });
-    (0,vue__WEBPACK_IMPORTED_MODULE_1__.watch)(filterForm, lodash_throttle__WEBPACK_IMPORTED_MODULE_4___default()(function () {
+    (0,vue__WEBPACK_IMPORTED_MODULE_1__.watch)(filterForm, function () {
       if (filterForm.dates) {
         if (filterForm.dates[1]) {
           filterForm.startDate = dayjs__WEBPACK_IMPORTED_MODULE_3___default()(filterForm.dates[0]).format('YYYY-MM-DD');
         filterForm.startDate = null;
       }
 
-      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia.get('/reports/mutations', lodash_pickBy__WEBPACK_IMPORTED_MODULE_5___default()({
-        startDate: filterForm.startDate,
-        endDate: filterForm.endDate,
-        outlet: filterForm.outlet
-      }), {
-        preserveState: true
+      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia.reload({
+        data: lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default()({
+          startDate: filterForm.startDate,
+          endDate: filterForm.endDate,
+          outlet: filterForm.outlet
+        }),
+        only: ['mutations']
       });
       var params = window.location.search;
       exportExcelLink.value = "/reports/mutations/export/excel".concat(params);
-    }, 300));
+    });
+
+    var filterReset = function filterReset() {
+      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia.get('/reports/mutations');
+    };
 
     var linkReference = function linkReference(data) {
       if (data.transactionId) {
     var __returned__ = {
       props: props,
       filterForm: filterForm,
+      filterReset: filterReset,
       linkReference: linkReference,
       exportExcelLink: exportExcelLink,
       isAdmin: isAdmin,
       useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm,
       usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage,
       dayjs: (dayjs__WEBPACK_IMPORTED_MODULE_3___default()),
-      throttle: (lodash_throttle__WEBPACK_IMPORTED_MODULE_4___default()),
-      pickBy: (lodash_pickBy__WEBPACK_IMPORTED_MODULE_5___default()),
-      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_6__["default"],
-      AppPagination: _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_7__["default"],
-      AppButton: _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_8__["default"],
-      TableHeader: _TableHeader__WEBPACK_IMPORTED_MODULE_9__["default"]
+      pickBy: (lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default()),
+      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__["default"],
+      AppPagination: _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_6__["default"],
+      AppButton: _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_7__["default"],
+      TableHeader: _TableHeader__WEBPACK_IMPORTED_MODULE_8__["default"]
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
   "class": "col-12 md:col-4"
 };
 var _hoisted_7 = {
+  "class": "col-auto mt-2 ml-2"
+};
+var _hoisted_8 = {
   "class": "col-12 md:col-4 flex justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_Dropdown = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Dropdown");
 
+  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
+
   var _component_Column = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Column");
 
   var _component_DataTable = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("DataTable");
             "selection-mode": "range",
             placeholder: "filter waktu...",
             "date-format": "dd/mm/yy",
-            "show-button-bar": true,
             "manual-input": false
           }, null, 8
           /* PROPS */
             options: $props.outlets
           }, null, 8
           /* PROPS */
-          , ["modelValue", "options"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [$props.mutations.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppButton"], {
+          , ["modelValue", "options"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+            label: "reset",
+            "class": "p-button-link",
+            onClick: $setup.filterReset
+          })])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [$props.mutations.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppButton"], {
             key: 0,
             label: "Export excel",
             "class-button": "p-button-outlined md:w-16rem",
 module.exports = baseToString;
 
 
-/***/ }),
-
-/***/ "./node_modules/lodash/_baseTrim.js":
-/*!******************************************!*\
-  !*** ./node_modules/lodash/_baseTrim.js ***!
-  \******************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var trimmedEndIndex = __webpack_require__(/*! ./_trimmedEndIndex */ "./node_modules/lodash/_trimmedEndIndex.js");
-
-/** Used to match leading whitespace. */
-var reTrimStart = /^\s+/;
-
-/**
- * The base implementation of `_.trim`.
- *
- * @private
- * @param {string} string The string to trim.
- * @returns {string} Returns the trimmed string.
- */
-function baseTrim(string) {
-  return string
-    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
-    : string;
-}
-
-module.exports = baseTrim;
-
-
 /***/ }),
 
 /***/ "./node_modules/lodash/_baseUnary.js":
 module.exports = toSource;
 
 
-/***/ }),
-
-/***/ "./node_modules/lodash/_trimmedEndIndex.js":
-/*!*************************************************!*\
-  !*** ./node_modules/lodash/_trimmedEndIndex.js ***!
-  \*************************************************/
-/***/ ((module) => {
-
-/** Used to match a single whitespace character. */
-var reWhitespace = /\s/;
-
-/**
- * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
- * character of `string`.
- *
- * @private
- * @param {string} string The string to inspect.
- * @returns {number} Returns the index of the last non-whitespace character.
- */
-function trimmedEndIndex(string) {
-  var index = string.length;
-
-  while (index-- && reWhitespace.test(string.charAt(index))) {}
-  return index;
-}
-
-module.exports = trimmedEndIndex;
-
-
-/***/ }),
-
-/***/ "./node_modules/lodash/debounce.js":
-/*!*****************************************!*\
-  !*** ./node_modules/lodash/debounce.js ***!
-  \*****************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var isObject = __webpack_require__(/*! ./isObject */ "./node_modules/lodash/isObject.js"),
-    now = __webpack_require__(/*! ./now */ "./node_modules/lodash/now.js"),
-    toNumber = __webpack_require__(/*! ./toNumber */ "./node_modules/lodash/toNumber.js");
-
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max,
-    nativeMin = Math.min;
-
-/**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked. The debounced function comes with a `cancel` method to cancel
- * delayed `func` invocations and a `flush` method to immediately invoke them.
- * Provide `options` to indicate whether `func` should be invoked on the
- * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
- * with the last arguments provided to the debounced function. Subsequent
- * calls to the debounced function return the result of the last `func`
- * invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.debounce` and `_.throttle`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0] The number of milliseconds to delay.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=false]
- *  Specify invoking on the leading edge of the timeout.
- * @param {number} [options.maxWait]
- *  The maximum time `func` is allowed to be delayed before it's invoked.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new debounced function.
- * @example
- *
- * // Avoid costly calculations while the window size is in flux.
- * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
- *
- * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * jQuery(element).on('click', _.debounce(sendMail, 300, {
- *   'leading': true,
- *   'trailing': false
- * }));
- *
- * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
- * var source = new EventSource('/stream');
- * jQuery(source).on('message', debounced);
- *
- * // Cancel the trailing debounced invocation.
- * jQuery(window).on('popstate', debounced.cancel);
- */
-function debounce(func, wait, options) {
-  var lastArgs,
-      lastThis,
-      maxWait,
-      result,
-      timerId,
-      lastCallTime,
-      lastInvokeTime = 0,
-      leading = false,
-      maxing = false,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject(options)) {
-    leading = !!options.leading;
-    maxing = 'maxWait' in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-
-  function invokeFunc(time) {
-    var args = lastArgs,
-        thisArg = lastThis;
-
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = setTimeout(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime,
-        timeWaiting = wait - timeSinceLastCall;
-
-    return maxing
-      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
-      : timeWaiting;
-  }
-
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime;
-
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
-  }
-
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-
-  function trailingEdge(time) {
-    timerId = undefined;
-
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = undefined;
-    return result;
-  }
-
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
-
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
-  }
-
-  function debounced() {
-    var time = now(),
-        isInvoking = shouldInvoke(time);
-
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-
-module.exports = debounce;
-
-
 /***/ }),
 
 /***/ "./node_modules/lodash/eq.js":
 module.exports = memoize;
 
 
-/***/ }),
-
-/***/ "./node_modules/lodash/now.js":
-/*!************************************!*\
-  !*** ./node_modules/lodash/now.js ***!
-  \************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var root = __webpack_require__(/*! ./_root */ "./node_modules/lodash/_root.js");
-
-/**
- * Gets the timestamp of the number of milliseconds that have elapsed since
- * the Unix epoch (1 January 1970 00:00:00 UTC).
- *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Date
- * @returns {number} Returns the timestamp.
- * @example
- *
- * _.defer(function(stamp) {
- *   console.log(_.now() - stamp);
- * }, _.now());
- * // => Logs the number of milliseconds it took for the deferred invocation.
- */
-var now = function() {
-  return root.Date.now();
-};
-
-module.exports = now;
-
-
 /***/ }),
 
 /***/ "./node_modules/lodash/pickBy.js":
 module.exports = stubFalse;
 
 
-/***/ }),
-
-/***/ "./node_modules/lodash/throttle.js":
-/*!*****************************************!*\
-  !*** ./node_modules/lodash/throttle.js ***!
-  \*****************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var debounce = __webpack_require__(/*! ./debounce */ "./node_modules/lodash/debounce.js"),
-    isObject = __webpack_require__(/*! ./isObject */ "./node_modules/lodash/isObject.js");
-
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/**
- * Creates a throttled function that only invokes `func` at most once per
- * every `wait` milliseconds. The throttled function comes with a `cancel`
- * method to cancel delayed `func` invocations and a `flush` method to
- * immediately invoke them. Provide `options` to indicate whether `func`
- * should be invoked on the leading and/or trailing edge of the `wait`
- * timeout. The `func` is invoked with the last arguments provided to the
- * throttled function. Subsequent calls to the throttled function return the
- * result of the last `func` invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the throttled function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.throttle` and `_.debounce`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to throttle.
- * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=true]
- *  Specify invoking on the leading edge of the timeout.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new throttled function.
- * @example
- *
- * // Avoid excessively updating the position while scrolling.
- * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
- *
- * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
- * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
- * jQuery(element).on('click', throttled);
- *
- * // Cancel the trailing throttled invocation.
- * jQuery(window).on('popstate', throttled.cancel);
- */
-function throttle(func, wait, options) {
-  var leading = true,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  if (isObject(options)) {
-    leading = 'leading' in options ? !!options.leading : leading;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-  return debounce(func, wait, {
-    'leading': leading,
-    'maxWait': wait,
-    'trailing': trailing
-  });
-}
-
-module.exports = throttle;
-
-
-/***/ }),
-
-/***/ "./node_modules/lodash/toNumber.js":
-/*!*****************************************!*\
-  !*** ./node_modules/lodash/toNumber.js ***!
-  \*****************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var baseTrim = __webpack_require__(/*! ./_baseTrim */ "./node_modules/lodash/_baseTrim.js"),
-    isObject = __webpack_require__(/*! ./isObject */ "./node_modules/lodash/isObject.js"),
-    isSymbol = __webpack_require__(/*! ./isSymbol */ "./node_modules/lodash/isSymbol.js");
-
-/** Used as references for various `Number` constants. */
-var NAN = 0 / 0;
-
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
-
-/** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
-
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
-
-/**
- * Converts `value` to a number.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
- *
- * _.toNumber(3.2);
- * // => 3.2
- *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toNumber(Infinity);
- * // => Infinity
- *
- * _.toNumber('3.2');
- * // => 3.2
- */
-function toNumber(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject(other) ? (other + '') : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
-  }
-  value = baseTrim(value);
-  var isBinary = reIsBinary.test(value);
-  return (isBinary || reIsOctal.test(value))
-    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-    : (reIsBadHex.test(value) ? NAN : +value);
-}
-
-module.exports = toNumber;
-
-
 /***/ }),
 
 /***/ "./node_modules/lodash/toString.js":

public/js/resources_js_pages_transaction_Index_vue.js

         }
       }
     });
-    (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(filterForm, lodash_throttle__WEBPACK_IMPORTED_MODULE_4___default()(function () {
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(filterForm, function () {
       if (filterForm.dates) {
         if (filterForm.dates[1]) {
           filterForm.startDate = dayjs__WEBPACK_IMPORTED_MODULE_3___default()(filterForm.dates[0]).format('YYYY-MM-DD');
       }), {
         preserveState: true
       });
-    }, 300));
+    });
+
+    var filterReset = function filterReset() {
+      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia.get('/transactions');
+    };
+
     var transactionId = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)();
     var updateStatusDialogShow = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(false);
     var updateStatusForm = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm)({
     var __returned__ = {
       props: props,
       filterForm: filterForm,
+      filterReset: filterReset,
       transactionId: transactionId,
       updateStatusDialogShow: updateStatusDialogShow,
       updateStatusForm: updateStatusForm,
   "class": "grid"
 };
 var _hoisted_5 = {
-  "class": "col-12 md:col-4"
+  "class": "col-12 md:col-3"
 };
 var _hoisted_6 = {
-  "class": "col-12 md:col-4"
+  "class": "col-12 md:col-3"
 };
 var _hoisted_7 = {
-  "class": "col-12 md:col-4"
+  "class": "col-12 md:col-3"
 };
 var _hoisted_8 = {
-  "class": "col-12 md:col-4 flex justify-content-end"
+  "class": "col-auto mt-2 ml-2"
 };
 var _hoisted_9 = {
-  "class": "font-bold"
+  "class": "col-12 md:col-4 flex justify-content-end"
 };
 var _hoisted_10 = {
   "class": "font-bold"
 };
 var _hoisted_11 = {
-  "class": "grid"
+  "class": "font-bold"
 };
 var _hoisted_12 = {
-  "class": "col-12"
+  "class": "grid"
 };
 var _hoisted_13 = {
+  "class": "col-12"
+};
+var _hoisted_14 = {
   "class": "flex justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_Dropdown = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Dropdown");
 
+  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
+
   var _component_Badge = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Badge");
 
   var _component_Column = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Column");
 
-  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
-
   var _component_DataTable = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("DataTable");
 
   var _component_Dialog = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Dialog");
             "selection-mode": "range",
             placeholder: "filter waktu...",
             "date-format": "dd/mm/yy",
-            "show-button-bar": true,
             "manual-input": false
           }, null, 8
           /* PROPS */
             options: $props.outlets
           }, null, 8
           /* PROPS */
-          , ["modelValue", "options"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
+          , ["modelValue", "options"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+            label: "reset",
+            "class": "p-button-link",
+            onClick: $setup.filterReset
+          })])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppButton"], {
             label: "Tambah Transaksi",
             "class": "p-button-outlined md:w-16rem",
             icon: "pi pi-pencil",
                     field = _ref.field;
                 return [field === 'transactionNumber' ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                   key: 0
-                }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data[field]), 1
+                }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data[field]), 1
                 /* TEXT */
                 ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.createdAt), 1
                 /* TEXT */
                 /* STABLE_FRAGMENT */
                 )) : field === 'customer' ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
                   key: 1
-                }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.customer.number), 1
+                }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.customer.number), 1
                 /* TEXT */
                 ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.customer.name), 1
                 /* TEXT */
         onHide: $setup.updateStatusDialogShow
       }, {
         footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
             label: "Simpan",
             icon: "pi pi-check",
             "class": "p-button-text",
           , ["disabled"])])];
         }),
         "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDropdown"], {
+          return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppDropdown"], {
             label: "Perbaharui Status",
             placeholder: "pilih satu",
             modelValue: $setup.updateStatusForm.transaction_status_id,

public/js/resources_js_pages_transaction_Report_vue.js

 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js");
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+/* harmony import */ var _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @inertiajs/inertia */ "./node_modules/@inertiajs/inertia/dist/index.js");
 /* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
 /* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! dayjs */ "./node_modules/dayjs/dayjs.min.js");
 /* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lodash/throttle */ "./node_modules/lodash/throttle.js");
-/* harmony import */ var lodash_throttle__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash_throttle__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var lodash_pickBy__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lodash/pickBy */ "./node_modules/lodash/pickBy.js");
-/* harmony import */ var lodash_pickBy__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(lodash_pickBy__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
-/* harmony import */ var _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/components/AppPagination.vue */ "./resources/js/components/AppPagination.vue");
-/* harmony import */ var _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/components/AppButton.vue */ "./resources/js/components/AppButton.vue");
-/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/transaction/TableHeader.js");
-
+/* harmony import */ var lodash_pickBy__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lodash/pickBy */ "./node_modules/lodash/pickBy.js");
+/* harmony import */ var lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash_pickBy__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
+/* harmony import */ var _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/components/AppPagination.vue */ "./resources/js/components/AppPagination.vue");
+/* harmony import */ var _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/components/AppButton.vue */ "./resources/js/components/AppButton.vue");
+/* harmony import */ var _TableHeader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./TableHeader */ "./resources/js/pages/transaction/TableHeader.js");
 
 
 
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
-    transactions: Object,
+    transactions: {
+      type: Object,
+      "default": {
+        data: [],
+        links: [],
+        total: 0
+      }
+    },
     filters: Object,
     outlets: Array
   },
       endDate: props.filters.endDate,
       outlet: props.filters.outlet
     });
-    (0,vue__WEBPACK_IMPORTED_MODULE_1__.onMounted)(function () {
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(function () {
       if (props.filters.startDate || props.filters.endDate) {
         if (props.filters.endDate) {
           filterForm.dates = [new Date(props.filters.startDate), new Date(props.filters.endDate)];
         }
       }
     });
-    (0,vue__WEBPACK_IMPORTED_MODULE_1__.watch)(filterForm, lodash_throttle__WEBPACK_IMPORTED_MODULE_4___default()(function () {
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(filterForm, function () {
       if (filterForm.dates) {
         if (filterForm.dates[1]) {
           filterForm.startDate = dayjs__WEBPACK_IMPORTED_MODULE_3___default()(filterForm.dates[0]).format('YYYY-MM-DD');
         filterForm.startDate = null;
       }
 
-      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia.get('/reports/transactions', lodash_pickBy__WEBPACK_IMPORTED_MODULE_5___default()({
-        startDate: filterForm.startDate,
-        endDate: filterForm.endDate,
-        outlet: filterForm.outlet
-      }), {
-        preserveState: true
+      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia.reload({
+        data: lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default()({
+          startDate: filterForm.startDate,
+          endDate: filterForm.endDate,
+          outlet: filterForm.outlet
+        }),
+        only: ['transactions']
       });
       var params = window.location.search;
       exportExcelLink.value = "/reports/transactions/export/excel".concat(params);
-    }, 300));
-    var exportExcelLink = (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)('/reports/transactions/export/excel');
-    var isAdmin = (0,vue__WEBPACK_IMPORTED_MODULE_1__.computed)(function () {
+    });
+
+    var filterReset = function filterReset() {
+      _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia.get('/reports/transactions');
+    };
+
+    var exportExcelLink = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)('/reports/transactions/export/excel');
+    var isAdmin = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
       return (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage)().props.value.isAdmin;
     });
     var __returned__ = {
       props: props,
       filterForm: filterForm,
+      filterReset: filterReset,
       exportExcelLink: exportExcelLink,
       isAdmin: isAdmin,
-      Inertia: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_0__.Inertia,
-      watch: vue__WEBPACK_IMPORTED_MODULE_1__.watch,
-      computed: vue__WEBPACK_IMPORTED_MODULE_1__.computed,
-      onMounted: vue__WEBPACK_IMPORTED_MODULE_1__.onMounted,
-      ref: vue__WEBPACK_IMPORTED_MODULE_1__.ref,
+      watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
+      computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed,
+      onMounted: vue__WEBPACK_IMPORTED_MODULE_0__.onMounted,
+      ref: vue__WEBPACK_IMPORTED_MODULE_0__.ref,
+      Inertia: _inertiajs_inertia__WEBPACK_IMPORTED_MODULE_1__.Inertia,
       Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.Head,
       useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.useForm,
       usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_2__.usePage,
       dayjs: (dayjs__WEBPACK_IMPORTED_MODULE_3___default()),
-      throttle: (lodash_throttle__WEBPACK_IMPORTED_MODULE_4___default()),
-      pickBy: (lodash_pickBy__WEBPACK_IMPORTED_MODULE_5___default()),
-      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_6__["default"],
-      AppPagination: _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_7__["default"],
-      AppButton: _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_8__["default"],
-      TransactionReportTable: _TableHeader__WEBPACK_IMPORTED_MODULE_9__.TransactionReportTable
+      pickBy: (lodash_pickBy__WEBPACK_IMPORTED_MODULE_4___default()),
+      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_5__["default"],
+      AppPagination: _components_AppPagination_vue__WEBPACK_IMPORTED_MODULE_6__["default"],
+      AppButton: _components_AppButton_vue__WEBPACK_IMPORTED_MODULE_7__["default"],
+      TransactionReportTable: _TableHeader__WEBPACK_IMPORTED_MODULE_8__.TransactionReportTable
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
   "class": "col-12 md:col-4"
 };
 var _hoisted_7 = {
+  "class": "col-auto mt-2 ml-2"
+};
+var _hoisted_8 = {
   "class": "col-12 md:col-4 flex justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_Dropdown = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Dropdown");
 
+  var _component_Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Button");
+
   var _component_Column = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Column");
 
   var _component_DataTable = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("DataTable");
             "selection-mode": "range",
             placeholder: "filter waktu...",
             "date-format": "dd/mm/yy",
-            "show-button-bar": true,
             "manual-input": false
           }, null, 8
           /* PROPS */
             options: $props.outlets
           }, null, 8
           /* PROPS */
-          , ["modelValue", "options"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [$props.transactions.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppButton"], {
+          , ["modelValue", "options"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+            label: "reset",
+            "class": "p-button-link",
+            onClick: $setup.filterReset
+          })])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [$props.transactions.total ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["AppButton"], {
             key: 0,
             label: "Export excel",
             "class-button": "p-button-outlined md:w-16rem",
 module.exports = baseToString;
 
 
-/***/ }),
-
-/***/ "./node_modules/lodash/_baseTrim.js":
-/*!******************************************!*\
-  !*** ./node_modules/lodash/_baseTrim.js ***!
-  \******************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var trimmedEndIndex = __webpack_require__(/*! ./_trimmedEndIndex */ "./node_modules/lodash/_trimmedEndIndex.js");
-
-/** Used to match leading whitespace. */
-var reTrimStart = /^\s+/;
-
-/**
- * The base implementation of `_.trim`.
- *
- * @private
- * @param {string} string The string to trim.
- * @returns {string} Returns the trimmed string.
- */
-function baseTrim(string) {
-  return string
-    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
-    : string;
-}
-
-module.exports = baseTrim;
-
-
 /***/ }),
 
 /***/ "./node_modules/lodash/_baseUnary.js":
 module.exports = toSource;
 
 
-/***/ }),
-
-/***/ "./node_modules/lodash/_trimmedEndIndex.js":
-/*!*************************************************!*\
-  !*** ./node_modules/lodash/_trimmedEndIndex.js ***!
-  \*************************************************/
-/***/ ((module) => {
-
-/** Used to match a single whitespace character. */
-var reWhitespace = /\s/;
-
-/**
- * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
- * character of `string`.
- *
- * @private
- * @param {string} string The string to inspect.
- * @returns {number} Returns the index of the last non-whitespace character.
- */
-function trimmedEndIndex(string) {
-  var index = string.length;
-
-  while (index-- && reWhitespace.test(string.charAt(index))) {}
-  return index;
-}
-
-module.exports = trimmedEndIndex;
-
-
-/***/ }),
-
-/***/ "./node_modules/lodash/debounce.js":
-/*!*****************************************!*\
-  !*** ./node_modules/lodash/debounce.js ***!
-  \*****************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var isObject = __webpack_require__(/*! ./isObject */ "./node_modules/lodash/isObject.js"),
-    now = __webpack_require__(/*! ./now */ "./node_modules/lodash/now.js"),
-    toNumber = __webpack_require__(/*! ./toNumber */ "./node_modules/lodash/toNumber.js");
-
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max,
-    nativeMin = Math.min;
-
-/**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked. The debounced function comes with a `cancel` method to cancel
- * delayed `func` invocations and a `flush` method to immediately invoke them.
- * Provide `options` to indicate whether `func` should be invoked on the
- * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
- * with the last arguments provided to the debounced function. Subsequent
- * calls to the debounced function return the result of the last `func`
- * invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.debounce` and `_.throttle`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0] The number of milliseconds to delay.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=false]
- *  Specify invoking on the leading edge of the timeout.
- * @param {number} [options.maxWait]
- *  The maximum time `func` is allowed to be delayed before it's invoked.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new debounced function.
- * @example
- *
- * // Avoid costly calculations while the window size is in flux.
- * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
- *
- * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * jQuery(element).on('click', _.debounce(sendMail, 300, {
- *   'leading': true,
- *   'trailing': false
- * }));
- *
- * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
- * var source = new EventSource('/stream');
- * jQuery(source).on('message', debounced);
- *
- * // Cancel the trailing debounced invocation.
- * jQuery(window).on('popstate', debounced.cancel);
- */
-function debounce(func, wait, options) {
-  var lastArgs,
-      lastThis,
-      maxWait,
-      result,
-      timerId,
-      lastCallTime,
-      lastInvokeTime = 0,
-      leading = false,
-      maxing = false,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject(options)) {
-    leading = !!options.leading;
-    maxing = 'maxWait' in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-
-  function invokeFunc(time) {
-    var args = lastArgs,
-        thisArg = lastThis;
-
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = setTimeout(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime,
-        timeWaiting = wait - timeSinceLastCall;
-
-    return maxing
-      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
-      : timeWaiting;
-  }
-
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime;
-
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
-  }
-
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-
-  function trailingEdge(time) {
-    timerId = undefined;
-
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = undefined;
-    return result;
-  }
-
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
-
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
-  }
-
-  function debounced() {
-    var time = now(),
-        isInvoking = shouldInvoke(time);
-
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-
-module.exports = debounce;
-
-
 /***/ }),
 
 /***/ "./node_modules/lodash/eq.js":
 module.exports = memoize;
 
 
-/***/ }),
-
-/***/ "./node_modules/lodash/now.js":
-/*!************************************!*\
-  !*** ./node_modules/lodash/now.js ***!
-  \************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var root = __webpack_require__(/*! ./_root */ "./node_modules/lodash/_root.js");
-
-/**
- * Gets the timestamp of the number of milliseconds that have elapsed since
- * the Unix epoch (1 January 1970 00:00:00 UTC).
- *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Date
- * @returns {number} Returns the timestamp.
- * @example
- *
- * _.defer(function(stamp) {
- *   console.log(_.now() - stamp);
- * }, _.now());
- * // => Logs the number of milliseconds it took for the deferred invocation.
- */
-var now = function() {
-  return root.Date.now();
-};
-
-module.exports = now;
-
-
 /***/ }),
 
 /***/ "./node_modules/lodash/pickBy.js":
 module.exports = stubFalse;
 
 
-/***/ }),
-
-/***/ "./node_modules/lodash/throttle.js":
-/*!*****************************************!*\
-  !*** ./node_modules/lodash/throttle.js ***!
-  \*****************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var debounce = __webpack_require__(/*! ./debounce */ "./node_modules/lodash/debounce.js"),
-    isObject = __webpack_require__(/*! ./isObject */ "./node_modules/lodash/isObject.js");
-
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/**
- * Creates a throttled function that only invokes `func` at most once per
- * every `wait` milliseconds. The throttled function comes with a `cancel`
- * method to cancel delayed `func` invocations and a `flush` method to
- * immediately invoke them. Provide `options` to indicate whether `func`
- * should be invoked on the leading and/or trailing edge of the `wait`
- * timeout. The `func` is invoked with the last arguments provided to the
- * throttled function. Subsequent calls to the throttled function return the
- * result of the last `func` invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the throttled function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.throttle` and `_.debounce`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to throttle.
- * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=true]
- *  Specify invoking on the leading edge of the timeout.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new throttled function.
- * @example
- *
- * // Avoid excessively updating the position while scrolling.
- * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
- *
- * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
- * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
- * jQuery(element).on('click', throttled);
- *
- * // Cancel the trailing throttled invocation.
- * jQuery(window).on('popstate', throttled.cancel);
- */
-function throttle(func, wait, options) {
-  var leading = true,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  if (isObject(options)) {
-    leading = 'leading' in options ? !!options.leading : leading;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-  return debounce(func, wait, {
-    'leading': leading,
-    'maxWait': wait,
-    'trailing': trailing
-  });
-}
-
-module.exports = throttle;
-
-
-/***/ }),
-
-/***/ "./node_modules/lodash/toNumber.js":
-/*!*****************************************!*\
-  !*** ./node_modules/lodash/toNumber.js ***!
-  \*****************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var baseTrim = __webpack_require__(/*! ./_baseTrim */ "./node_modules/lodash/_baseTrim.js"),
-    isObject = __webpack_require__(/*! ./isObject */ "./node_modules/lodash/isObject.js"),
-    isSymbol = __webpack_require__(/*! ./isSymbol */ "./node_modules/lodash/isSymbol.js");
-
-/** Used as references for various `Number` constants. */
-var NAN = 0 / 0;
-
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
-
-/** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
-
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
-
-/**
- * Converts `value` to a number.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
- *
- * _.toNumber(3.2);
- * // => 3.2
- *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toNumber(Infinity);
- * // => Infinity
- *
- * _.toNumber('3.2');
- * // => 3.2
- */
-function toNumber(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject(other) ? (other + '') : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
-  }
-  value = baseTrim(value);
-  var isBinary = reIsBinary.test(value);
-  return (isBinary || reIsOctal.test(value))
-    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-    : (reIsBadHex.test(value) ? NAN : +value);
-}
-
-module.exports = toNumber;
-
-
 /***/ }),
 
 /***/ "./node_modules/lodash/toString.js":

public/js/vue.js

 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"resources_js_pages_Access_vue":"a18ed856923fae52","resources_js_pages_auth_ForgotPassword_vue":"c9f401672b6f2423","resources_js_pages_auth_Login_vue":"cb0cb153b976d2c1","resources_js_pages_auth_ResetPassword_vue":"1078df5cebf2e3c6","resources_js_pages_auth_VerifyEmail_vue":"a0ee23b849c826b1","resources_js_pages_customer_Create_vue":"a3cba38b65a678ea","resources_js_pages_customer_Edit_vue":"6529085778080d36","resources_js_pages_customer_Index_vue":"aea07a25c21bfc45","resources_js_pages_customer_TableHeader_js":"71be5afdca048a9c","resources_js_pages_discount_Index_vue":"31e829a87f7e517d","resources_js_pages_expense_Create_vue":"f625b4fbdf8889af","resources_js_pages_expense_Index_vue":"6430d7df81d7f9d0","resources_js_pages_expense_Show_vue":"4801bedc7912088f","resources_js_pages_expense_TableHeader_js":"72e3dee74175b1c0","resources_js_pages_laundry_Create_vue":"17128fbd0e28898d","resources_js_pages_laundry_Edit_vue":"2bd6d1f463c9a9a3","resources_js_pages_laundry_Index_vue":"96eee4afb428456e","resources_js_pages_laundry_TableHeader_js":"494e577855bbcaf6","resources_js_pages_mutation_Report_vue":"c65a8ada6e5952f4","resources_js_pages_mutation_TableHeader_js":"82c2999bd7d098a1","resources_js_pages_outlet_Create_vue":"bdf868378013b7e7","resources_js_pages_outlet_Edit_vue":"77775fdca5fe7621","resources_js_pages_outlet_Index_vue":"2e36a83555378ccb","resources_js_pages_outlet_TableHeader_js":"498bf7e64bc0d0c4","resources_js_pages_product_Create_vue":"0d0dddb2e60ec31c","resources_js_pages_product_Edit_vue":"59d0ee7b5403f776","resources_js_pages_product_Index_vue":"73a854a747e35d21","resources_js_pages_product_TableHeader_js":"b8eaaa9de25a2322","resources_js_pages_transaction_Create_vue":"ea4b3be68403cd31","resources_js_pages_transaction_Index_vue":"271760c84b8b6295","resources_js_pages_transaction_Report_vue":"1a5d0eb3c141f232","resources_js_pages_transaction_Show_vue":"ebd8059da08e93b1","resources_js_pages_transaction_TableHeader_js":"be63e672e103818b","resources_js_pages_user_Create_vue":"da0b02d8fda8f9a0","resources_js_pages_user_Edit_vue":"cf9a306d21f40913","resources_js_pages_user_Index_vue":"badcb54776b8c7e0","resources_js_pages_user_Show_vue":"1474a0ad843dc2d5","resources_js_pages_user_TableHeader_js":"5653ecbcd70fd235"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"resources_js_pages_Access_vue":"a18ed856923fae52","resources_js_pages_auth_ForgotPassword_vue":"c9f401672b6f2423","resources_js_pages_auth_Login_vue":"cb0cb153b976d2c1","resources_js_pages_auth_ResetPassword_vue":"1078df5cebf2e3c6","resources_js_pages_auth_VerifyEmail_vue":"a0ee23b849c826b1","resources_js_pages_customer_Create_vue":"a3cba38b65a678ea","resources_js_pages_customer_Edit_vue":"6529085778080d36","resources_js_pages_customer_Index_vue":"aea07a25c21bfc45","resources_js_pages_customer_TableHeader_js":"71be5afdca048a9c","resources_js_pages_discount_Index_vue":"31e829a87f7e517d","resources_js_pages_expense_Create_vue":"f625b4fbdf8889af","resources_js_pages_expense_Index_vue":"ad6478718f2fbf90","resources_js_pages_expense_Show_vue":"4801bedc7912088f","resources_js_pages_expense_TableHeader_js":"72e3dee74175b1c0","resources_js_pages_laundry_Create_vue":"17128fbd0e28898d","resources_js_pages_laundry_Edit_vue":"2bd6d1f463c9a9a3","resources_js_pages_laundry_Index_vue":"96eee4afb428456e","resources_js_pages_laundry_TableHeader_js":"494e577855bbcaf6","resources_js_pages_mutation_Report_vue":"aaaf24154a43b9f5","resources_js_pages_mutation_TableHeader_js":"82c2999bd7d098a1","resources_js_pages_outlet_Create_vue":"bdf868378013b7e7","resources_js_pages_outlet_Edit_vue":"77775fdca5fe7621","resources_js_pages_outlet_Index_vue":"2e36a83555378ccb","resources_js_pages_outlet_TableHeader_js":"498bf7e64bc0d0c4","resources_js_pages_product_Create_vue":"0d0dddb2e60ec31c","resources_js_pages_product_Edit_vue":"59d0ee7b5403f776","resources_js_pages_product_Index_vue":"73a854a747e35d21","resources_js_pages_product_TableHeader_js":"b8eaaa9de25a2322","resources_js_pages_transaction_Create_vue":"ea4b3be68403cd31","resources_js_pages_transaction_Index_vue":"1dcdc1cb350a954b","resources_js_pages_transaction_Report_vue":"bd0a1b87dd8a494b","resources_js_pages_transaction_Show_vue":"ebd8059da08e93b1","resources_js_pages_transaction_TableHeader_js":"be63e672e103818b","resources_js_pages_user_Create_vue":"da0b02d8fda8f9a0","resources_js_pages_user_Edit_vue":"cf9a306d21f40913","resources_js_pages_user_Index_vue":"badcb54776b8c7e0","resources_js_pages_user_Show_vue":"1474a0ad843dc2d5","resources_js_pages_user_TableHeader_js":"5653ecbcd70fd235"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/pages/expense/Index.vue

   }
 })
 
-watch(
-  filterForm,
-  throttle(() => {
-    if (filterForm.dates) {
-      if (filterForm.dates[1]) {
-        filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
-        filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
-      } else {
-        filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
-        filterForm.endDate = null
-      }
+watch(filterForm, () => {
+  if (filterForm.dates) {
+    if (filterForm.dates[1]) {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
+      filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
     } else {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
       filterForm.endDate = null
-      filterForm.startDate = null
     }
+  } else {
+    filterForm.endDate = null
+    filterForm.startDate = null
+  }
 
-    Inertia.get(
-      '/expenses',
-      pickBy({
-        startDate: filterForm.startDate,
-        endDate: filterForm.endDate,
-        outlet: filterForm.outlet,
-      }),
-      {
-        preserveState: true,
-      }
-    )
-  }, 300)
-)
+  Inertia.get(
+    '/expenses',
+    pickBy({
+      startDate: filterForm.startDate,
+      endDate: filterForm.endDate,
+      outlet: filterForm.outlet,
+    }),
+    {
+      preserveState: true,
+    }
+  )
+})
+
+const filterReset = () => {
+  Inertia.get('/expenses')
+}
 
 const isAdmin = computed(() => usePage().props.value.isAdmin)
 </script>
                   selection-mode="range"
                   placeholder="filter waktu..."
                   date-format="dd/mm/yy"
-                  :show-button-bar="true"
                   :manual-input="false"
                 />
               </div>
                   :options="outlets"
                 />
               </div>
+              <div class="col-auto mt-2 ml-2">
+                <Button label="reset" class="p-button-link" @click="filterReset" />
+              </div>
             </div>
           </div>
           <div class="col-12 md:col-4 flex justify-content-end">

resources/js/pages/mutation/Report.vue

 import { watch, computed, onMounted, ref } from 'vue'
 import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
 import dayjs from 'dayjs'
-import throttle from 'lodash/throttle'
 import pickBy from 'lodash/pickBy'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppPagination from '@/components/AppPagination.vue'
 import TableHeader from './TableHeader'
 
 const props = defineProps({
-  mutations: Object,
+  mutations: {
+    type: Object,
+    default: {
+      data: [],
+      links: [],
+      total: 0,
+    },
+  },
   filters: Object,
   outlets: Array,
 })
   }
 })
 
-watch(
-  filterForm,
-  throttle(() => {
-    if (filterForm.dates) {
-      if (filterForm.dates[1]) {
-        filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
-        filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
-      } else {
-        filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
-        filterForm.endDate = null
-      }
+watch(filterForm, () => {
+  if (filterForm.dates) {
+    if (filterForm.dates[1]) {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
+      filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
     } else {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
       filterForm.endDate = null
-      filterForm.startDate = null
     }
+  } else {
+    filterForm.endDate = null
+    filterForm.startDate = null
+  }
+
+  Inertia.reload({
+    data: pickBy({
+      startDate: filterForm.startDate,
+      endDate: filterForm.endDate,
+      outlet: filterForm.outlet,
+    }),
+    only: ['mutations'],
+  })
+
+  const params = window.location.search
+  exportExcelLink.value = `/reports/mutations/export/excel${params}`
+})
 
-    Inertia.get(
-      '/reports/mutations',
-      pickBy({
-        startDate: filterForm.startDate,
-        endDate: filterForm.endDate,
-        outlet: filterForm.outlet,
-      }),
-      {
-        preserveState: true,
-      }
-    )
-
-    const params = window.location.search
-    exportExcelLink.value = `/reports/mutations/export/excel${params}`
-  }, 300)
-)
+const filterReset = () => {
+  Inertia.get('/reports/mutations')
+}
 
 const linkReference = (data) => {
   if (data.transactionId) {
                   selection-mode="range"
                   placeholder="filter waktu..."
                   date-format="dd/mm/yy"
-                  :show-button-bar="true"
                   :manual-input="false"
                 />
               </div>
                   :options="outlets"
                 />
               </div>
+              <div class="col-auto mt-2 ml-2">
+                <Button label="reset" class="p-button-link" @click="filterReset" />
+              </div>
             </div>
           </div>
           <div class="col-12 md:col-4 flex justify-content-end">

resources/js/pages/transaction/Index.vue

   }
 })
 
-watch(
-  filterForm,
-  throttle(() => {
-    if (filterForm.dates) {
-      if (filterForm.dates[1]) {
-        filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
-        filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
-      } else {
-        filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
-        filterForm.endDate = null
-      }
+watch(filterForm, () => {
+  if (filterForm.dates) {
+    if (filterForm.dates[1]) {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
+      filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
     } else {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
       filterForm.endDate = null
-      filterForm.startDate = null
     }
+  } else {
+    filterForm.endDate = null
+    filterForm.startDate = null
+  }
+
+  Inertia.get(
+    '/transactions',
+    pickBy({
+      search: filterForm.search,
+      startDate: filterForm.startDate,
+      endDate: filterForm.endDate,
+      outlet: filterForm.outlet,
+    }),
+    {
+      preserveState: true,
+    }
+  )
+})
 
-    Inertia.get(
-      '/transactions',
-      pickBy({
-        search: filterForm.search,
-        startDate: filterForm.startDate,
-        endDate: filterForm.endDate,
-        outlet: filterForm.outlet,
-      }),
-      {
-        preserveState: true,
-      }
-    )
-  }, 300)
-)
+const filterReset = () => {
+  Inertia.get('/transactions')
+}
 
 const transactionId = ref()
 
         <div class="grid">
           <div class="col-12 md:col-8">
             <div class="grid">
-              <div class="col-12 md:col-4">
+              <div class="col-12 md:col-3">
                 <InputText class="w-full" placeholder="cari..." v-model="filterForm.search" />
               </div>
-
-              <div class="col-12 md:col-4">
+              <div class="col-12 md:col-3">
                 <Calendar
                   class="w-full"
                   v-model="filterForm.dates"
                   selection-mode="range"
                   placeholder="filter waktu..."
                   date-format="dd/mm/yy"
-                  :show-button-bar="true"
                   :manual-input="false"
                 />
               </div>
-
-              <div class="col-12 md:col-4">
+              <div class="col-12 md:col-3">
                 <Dropdown
                   v-if="isAdmin"
                   class="w-full"
                   :options="outlets"
                 />
               </div>
+              <div class="col-auto mt-2 ml-2">
+                <Button label="reset" class="p-button-link" @click="filterReset" />
+              </div>
             </div>
           </div>
           <div class="col-12 md:col-4 flex justify-content-end">

resources/js/pages/transaction/Report.vue

 <script setup>
-import { Inertia } from '@inertiajs/inertia'
 import { watch, computed, onMounted, ref } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
 import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
 import dayjs from 'dayjs'
-import throttle from 'lodash/throttle'
 import pickBy from 'lodash/pickBy'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppPagination from '@/components/AppPagination.vue'
 import { TransactionReportTable } from './TableHeader'
 
 const props = defineProps({
-  transactions: Object,
+  transactions: {
+    type: Object,
+    default: {
+      data: [],
+      links: [],
+      total: 0,
+    },
+  },
   filters: Object,
   outlets: Array,
 })
   }
 })
 
-watch(
-  filterForm,
-  throttle(() => {
-    if (filterForm.dates) {
-      if (filterForm.dates[1]) {
-        filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
-        filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
-      } else {
-        filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
-        filterForm.endDate = null
-      }
+watch(filterForm, () => {
+  if (filterForm.dates) {
+    if (filterForm.dates[1]) {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
+      filterForm.endDate = dayjs(filterForm.dates[1]).format('YYYY-MM-DD')
     } else {
+      filterForm.startDate = dayjs(filterForm.dates[0]).format('YYYY-MM-DD')
       filterForm.endDate = null
-      filterForm.startDate = null
     }
+  } else {
+    filterForm.endDate = null
+    filterForm.startDate = null
+  }
 
-    Inertia.get(
-      '/reports/transactions',
-      pickBy({
-        startDate: filterForm.startDate,
-        endDate: filterForm.endDate,
-        outlet: filterForm.outlet,
-      }),
-      {
-        preserveState: true,
-      }
-    )
-
-    const params = window.location.search
-    exportExcelLink.value = `/reports/transactions/export/excel${params}`
-  }, 300)
-)
+  Inertia.reload({
+    data: pickBy({
+      startDate: filterForm.startDate,
+      endDate: filterForm.endDate,
+      outlet: filterForm.outlet,
+    }),
+    only: ['transactions'],
+  })
+
+  const params = window.location.search
+  exportExcelLink.value = `/reports/transactions/export/excel${params}`
+})
+
+const filterReset = () => {
+  Inertia.get('/reports/transactions')
+}
 
 const exportExcelLink = ref('/reports/transactions/export/excel')
 
                   selection-mode="range"
                   placeholder="filter waktu..."
                   date-format="dd/mm/yy"
-                  :show-button-bar="true"
                   :manual-input="false"
                 />
               </div>
                   :options="outlets"
                 />
               </div>
+              <div class="col-auto mt-2 ml-2">
+                <Button label="reset" class="p-button-link" @click="filterReset" />
+              </div>
             </div>
           </div>
           <div class="col-12 md:col-4 flex justify-content-end">