fix: search and filter

app/Http/Controllers/ExpenseController.php

     public function index()
     {
         return inertia('expense/Index', [
-            'filters' => request()->all('startDate', 'endDate', 'outlet'),
+            'initialDateRange' => request()->collect(['startDate', 'endDate'])->flatten(),
             'expenses' => Expense::filter(request()->only('startDate', 'endDate', 'outlet'))
                 ->latest()
                 ->paginate(10)

app/Http/Controllers/MutationController.php

         $mutations = Mutation::filter(request()->only('startDate', 'endDate'));
 
         return inertia('mutation/Report', [
-            'initialDateRage' => request()->collect('startDate', 'endDate')->flatten(),
+            'initialDateRange' => request()->collect(['startDate', 'endDate'])->flatten(),
             'mutations' => Inertia::lazy(
                 fn() => [
                     'totalIncome' => (new MutationService)->totalIncomeAsString($mutations->get()),

app/Http/Controllers/TopUpController.php

     {
         return inertia('topup/Index', [
             'initialSearch' => request('search'),
-            'initialDateRage' => request()->collect(['startDate', 'endDate'])->flatten(),
+            'initialDateRange' => request()->collect(['startDate', 'endDate'])->flatten(),
             'topUp' => TopUp::filter(request()->only('startDate', 'endDate', 'search'))
                 ->latest()
                 ->paginate(10)

public/js/resources_js_pages_expense_Index_vue.js

 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
     expenses: Object,
-    initialDateRage: Array
+    initialDateRange: Array
   },
   setup: function setup(__props, _ref) {
     var expose = _ref.expose;
     expose();
     var props = __props;
 
-    var _useDateRangeFilter = (0,_components_useDateRangeFilter__WEBPACK_IMPORTED_MODULE_5__.useDateRangeFilter)(props.initialDateRage),
+    var _useDateRangeFilter = (0,_components_useDateRangeFilter__WEBPACK_IMPORTED_MODULE_5__.useDateRangeFilter)(props),
         dates = _useDateRangeFilter.dates,
         startDate = _useDateRangeFilter.startDate,
         endDate = _useDateRangeFilter.endDate;
 /* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_1__);
 
 
-function useDateRangeFilter() {
-  var initialDateRage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function useDateRangeFilter(props) {
   var dates = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null);
   var startDate = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null);
   var endDate = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null);
   (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(function () {
-    if (initialDateRage[0] || initialDateRage[1]) {
-      if (initialDateRage[1]) {
-        dates.push([new Date(initialDateRage[0]), new Date(initialDateRage[1])]);
+    if (!props.initialDateRange) {
+      return;
+    }
+
+    if (props.initialDateRange[0] || props.initialDateRange[1]) {
+      if (props.initialDateRange[1]) {
+        dates.value = [new Date(props.initialDateRange[0]), new Date(props.initialDateRange[1])];
       } else {
-        dates.push([new Date(props.initialDateRage[1]), null]);
+        dates.value = [new Date(props.props.initialDateRange[1]), null];
       }
     }
   });

public/js/resources_js_pages_member_Index_vue.js

     expose();
     var props = __props;
 
-    var _useSearchText = (0,_components_useSearchText__WEBPACK_IMPORTED_MODULE_5__.useSearchText)(props.initialSearch),
+    var _useSearchText = (0,_components_useSearchText__WEBPACK_IMPORTED_MODULE_5__.useSearchText)(props),
         search = _useSearchText.search;
 
     (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(search, function () {
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
-function useSearchText(initialSearch) {
-  var search = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(initialSearch);
+function useSearchText(props) {
+  var search = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(props.initialSearch);
   return {
     search: search
   };

public/js/resources_js_pages_mutation_Report_vue.js

         }
       }
     },
-    initialDateRage: Array
+    initialDateRange: Array
   },
   setup: function setup(__props, _ref) {
     var expose = _ref.expose;
     expose();
     var props = __props;
 
-    var _useDateRangeFilter = (0,_components_useDateRangeFilter__WEBPACK_IMPORTED_MODULE_5__.useDateRangeFilter)(props.initialDateRage),
+    var _useDateRangeFilter = (0,_components_useDateRangeFilter__WEBPACK_IMPORTED_MODULE_5__.useDateRangeFilter)(props),
         dates = _useDateRangeFilter.dates,
         startDate = _useDateRangeFilter.startDate,
         endDate = _useDateRangeFilter.endDate;
 /* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_1__);
 
 
-function useDateRangeFilter() {
-  var initialDateRage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function useDateRangeFilter(props) {
   var dates = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null);
   var startDate = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null);
   var endDate = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null);
   (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(function () {
-    if (initialDateRage[0] || initialDateRage[1]) {
-      if (initialDateRage[1]) {
-        dates.push([new Date(initialDateRage[0]), new Date(initialDateRage[1])]);
+    if (!props.initialDateRange) {
+      return;
+    }
+
+    if (props.initialDateRange[0] || props.initialDateRange[1]) {
+      if (props.initialDateRange[1]) {
+        dates.value = [new Date(props.initialDateRange[0]), new Date(props.initialDateRange[1])];
       } else {
-        dates.push([new Date(props.initialDateRage[1]), null]);
+        dates.value = [new Date(props.props.initialDateRange[1]), null];
       }
     }
   });

public/js/resources_js_pages_topup_Index_vue.js

     expose();
     var props = __props;
 
-    var _useSearchText = (0,_components_useSearchText__WEBPACK_IMPORTED_MODULE_5__.useSearchText)(props.initialSearch),
+    var _useSearchText = (0,_components_useSearchText__WEBPACK_IMPORTED_MODULE_5__.useSearchText)(props),
         search = _useSearchText.search;
 
-    var _useDateRangeFilter = (0,_components_useDateRangeFilter__WEBPACK_IMPORTED_MODULE_6__.useDateRangeFilter)(props.initialDateRange),
+    var _useDateRangeFilter = (0,_components_useDateRangeFilter__WEBPACK_IMPORTED_MODULE_6__.useDateRangeFilter)(props),
         dates = _useDateRangeFilter.dates,
         startDate = _useDateRangeFilter.startDate,
         endDate = _useDateRangeFilter.endDate;
 /* harmony import */ var dayjs__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dayjs__WEBPACK_IMPORTED_MODULE_1__);
 
 
-function useDateRangeFilter() {
-  var initialDateRage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function useDateRangeFilter(props) {
   var dates = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null);
   var startDate = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null);
   var endDate = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null);
   (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(function () {
-    if (initialDateRage[0] || initialDateRage[1]) {
-      if (initialDateRage[1]) {
-        dates.push([new Date(initialDateRage[0]), new Date(initialDateRage[1])]);
+    if (!props.initialDateRange) {
+      return;
+    }
+
+    if (props.initialDateRange[0] || props.initialDateRange[1]) {
+      if (props.initialDateRange[1]) {
+        dates.value = [new Date(props.initialDateRange[0]), new Date(props.initialDateRange[1])];
       } else {
-        dates.push([new Date(props.initialDateRage[1]), null]);
+        dates.value = [new Date(props.props.initialDateRange[1]), null];
       }
     }
   });
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
-function useSearchText(initialSearch) {
-  var search = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(initialSearch);
+function useSearchText(props) {
+  var search = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(props.initialSearch);
   return {
     search: search
   };

public/js/resources_js_pages_user_Index_vue.js

     expose();
     var props = __props;
 
-    var _useSearchText = (0,_components_useSearchText__WEBPACK_IMPORTED_MODULE_5__.useSearchText)(props.initialSearch),
+    var _useSearchText = (0,_components_useSearchText__WEBPACK_IMPORTED_MODULE_5__.useSearchText)(props),
         search = _useSearchText.search;
 
     (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(search, function () {
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
-function useSearchText(initialSearch) {
-  var search = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(initialSearch);
+function useSearchText(props) {
+  var search = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(props.initialSearch);
   return {
     search: search
   };

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=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"85a497d97d470da0","resources_js_pages_auth_Login_vue":"b69ff437d119c92b","resources_js_pages_auth_ResetPassword_vue":"9bc29d6465cc0c53","resources_js_pages_auth_VerifyEmail_vue":"f88499b46d5f110c","resources_js_pages_expense_Create_vue":"6b317317dd1facc1","resources_js_pages_expense_Index_vue":"f327c35b5ad8e14e","resources_js_pages_expense_Show_vue":"3733d151f20dd403","resources_js_pages_expense_tableHeader_js":"5b2c3a80fb697fff","resources_js_pages_home_Index_vue":"d37b07ec9a0de76b","resources_js_pages_member_Create_vue":"c8a23ed2db3f0fe9","resources_js_pages_member_Edit_vue":"a68321144f3d34d1","resources_js_pages_member_Index_vue":"40ca1ddbbabb9e2f","resources_js_pages_member_tableHeader_js":"04203ba8e978ad6d","resources_js_pages_member_useVehicle_js":"8edc972eb134efdf","resources_js_pages_mutation_Report_vue":"90f53c276fcf49e9","resources_js_pages_mutation_tableHeader_js":"2c25ede9c3d1ff83","resources_js_pages_parkingfee_Create_vue":"3b5d007865a3175b","resources_js_pages_topup_Create_vue":"32cf0789dbb7fa35","resources_js_pages_topup_Index_vue":"c1090dc1adf89b8a","resources_js_pages_topup_Show_vue":"6fc93ef73b921bef","resources_js_pages_topup_tableHeader_js":"03d60ae1a3c0ef0b","resources_js_pages_typemember_Create_vue":"4156d4c5d6d84320","resources_js_pages_typemember_Edit_vue":"837a31dd27cce269","resources_js_pages_typemember_Index_vue":"636b8e7509320ec1","resources_js_pages_typemember_tableHeader_js":"02f8a6c57093a7fe","resources_js_pages_typemember_useVehicle_js":"9bcdb75c62376835","resources_js_pages_typevehicle_Create_vue":"473e9a1484d5a361","resources_js_pages_typevehicle_Edit_vue":"771320873aaeb34e","resources_js_pages_typevehicle_Index_vue":"3f5b8f7cd6431c9c","resources_js_pages_typevehicle_tableHeader_js":"9616b18c4a750c3f","resources_js_pages_user_Create_vue":"c0966eacbaebe9f3","resources_js_pages_user_Edit_vue":"d72a87bfe38c706a","resources_js_pages_user_Index_vue":"b105362e3311d405","resources_js_pages_user_Show_vue":"9fd2ebf7d82aac77","resources_js_pages_user_tableHeader_js":"21d48ec8ebf81ea7"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"node_modules_chart_js_auto_auto_esm_js":"10c6b388645ceb22","resources_js_pages_auth_ForgotPassword_vue":"85a497d97d470da0","resources_js_pages_auth_Login_vue":"b69ff437d119c92b","resources_js_pages_auth_ResetPassword_vue":"9bc29d6465cc0c53","resources_js_pages_auth_VerifyEmail_vue":"f88499b46d5f110c","resources_js_pages_expense_Create_vue":"6b317317dd1facc1","resources_js_pages_expense_Index_vue":"f68ad02de7919d7f","resources_js_pages_expense_Show_vue":"3733d151f20dd403","resources_js_pages_expense_tableHeader_js":"5b2c3a80fb697fff","resources_js_pages_home_Index_vue":"d37b07ec9a0de76b","resources_js_pages_member_Create_vue":"c8a23ed2db3f0fe9","resources_js_pages_member_Edit_vue":"a68321144f3d34d1","resources_js_pages_member_Index_vue":"8a62ba4f5d8b877c","resources_js_pages_member_tableHeader_js":"04203ba8e978ad6d","resources_js_pages_member_useVehicle_js":"8edc972eb134efdf","resources_js_pages_mutation_Report_vue":"719b40705807e96b","resources_js_pages_mutation_tableHeader_js":"2c25ede9c3d1ff83","resources_js_pages_parkingfee_Create_vue":"3b5d007865a3175b","resources_js_pages_topup_Create_vue":"32cf0789dbb7fa35","resources_js_pages_topup_Index_vue":"a739a8f215e72422","resources_js_pages_topup_Show_vue":"6fc93ef73b921bef","resources_js_pages_topup_tableHeader_js":"03d60ae1a3c0ef0b","resources_js_pages_typemember_Create_vue":"4156d4c5d6d84320","resources_js_pages_typemember_Edit_vue":"837a31dd27cce269","resources_js_pages_typemember_Index_vue":"636b8e7509320ec1","resources_js_pages_typemember_tableHeader_js":"02f8a6c57093a7fe","resources_js_pages_typemember_useVehicle_js":"9bcdb75c62376835","resources_js_pages_typevehicle_Create_vue":"473e9a1484d5a361","resources_js_pages_typevehicle_Edit_vue":"771320873aaeb34e","resources_js_pages_typevehicle_Index_vue":"3f5b8f7cd6431c9c","resources_js_pages_typevehicle_tableHeader_js":"9616b18c4a750c3f","resources_js_pages_user_Create_vue":"c0966eacbaebe9f3","resources_js_pages_user_Edit_vue":"d72a87bfe38c706a","resources_js_pages_user_Index_vue":"5f3af1ecccab0573","resources_js_pages_user_Show_vue":"9fd2ebf7d82aac77","resources_js_pages_user_tableHeader_js":"21d48ec8ebf81ea7"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/components/useDateRangeFilter.js

 import { onMounted, watch, ref } from 'vue'
 import dayjs from 'dayjs'
 
-export function useDateRangeFilter(initialDateRage = []) {
+export function useDateRangeFilter(props) {
   const dates = ref(null)
+
   const startDate = ref(null)
+
   const endDate = ref(null)
 
   onMounted(() => {
-    if (initialDateRage[0] || initialDateRage[1]) {
-      if (initialDateRage[1]) {
-        dates.push([new Date(initialDateRage[0]), new Date(initialDateRage[1])])
+    if (!props.initialDateRange) {
+      return
+    }
+
+    if (props.initialDateRange[0] || props.initialDateRange[1]) {
+      if (props.initialDateRange[1]) {
+        dates.value = [new Date(props.initialDateRange[0]), new Date(props.initialDateRange[1])]
       } else {
-        dates.push([new Date(props.initialDateRage[1]), null])
+        dates.value = [new Date(props.props.initialDateRange[1]), null]
       }
     }
   })
   watch(dates, () => {
     if (dates.value[1]) {
       startDate.value = dayjs(dates.value[0]).format('YYYY-MM-DD')
+
       endDate.value = dayjs(dates.value[1]).format('YYYY-MM-DD')
     } else if (dates.value[0]) {
       startDate.value = dayjs(dates.value[0]).format('YYYY-MM-DD')
+
       endDate.value = null
     }
   })

resources/js/components/useSearchText.js

 import { ref } from 'vue'
 
-export function useSearchText(initialSearch) {
-  const search = ref(initialSearch)
+export function useSearchText(props) {
+  const search = ref(props.initialSearch)
 
   return {
     search,

resources/js/pages/expense/Index.vue

 
 const props = defineProps({
   expenses: Object,
-  initialDateRage: Array,
+  initialDateRange: Array,
 })
 
-const { dates, startDate, endDate } = useDateRangeFilter(props.initialDateRage)
+const { dates, startDate, endDate } = useDateRangeFilter(props)
 
 watch(dates, () => {
   Inertia.get(

resources/js/pages/member/Index.vue

   initialSearch: String,
 })
 
-const { search } = useSearchText(props.initialSearch)
+const { search } = useSearchText(props)
 
 watch(search, () => {
   Inertia.get('/members', pickBy({ search: search.value }), { preserveState: true })

resources/js/pages/mutation/Report.vue

       },
     },
   },
-  initialDateRage: Array,
+  initialDateRange: Array,
 })
 
-const { dates, startDate, endDate } = useDateRangeFilter(props.initialDateRage)
+const { dates, startDate, endDate } = useDateRangeFilter(props)
 
 watch(dates, () => {
   Inertia.reload({

resources/js/pages/topup/Index.vue

   initialDateRange: Array,
 })
 
-const { search } = useSearchText(props.initialSearch)
-const { dates, startDate, endDate } = useDateRangeFilter(props.initialDateRange)
+const { search } = useSearchText(props)
+
+const { dates, startDate, endDate } = useDateRangeFilter(props)
 
 watch([dates, search], () => {
   Inertia.get(

resources/js/pages/user/Index.vue

   initialSearch: String,
 })
 
-const { search } = useSearchText(props.initialSearch)
+const { search } = useSearchText(props)
 
 watch(search, () => {
   Inertia.get('/users', pickBy({ search: search.value }), { preserveState: true })