feat: search data

app/Http/Controllers/CustomerController.php

     public function index()
     {
         return inertia('customer/Index', [
+            'filters' => request()->all('search'),
             'customers' => Customer::latest()
-                ->filter(request()->search)
+                ->filter(request()->only('search'))
                 ->paginate(10)
                 ->withQueryString()
                 ->through(fn($customer) => [

app/Http/Controllers/LaundryController.php

     public function index()
     {
         return inertia('laundry/Index', [
+            'filters' => request()->all('search'),
             'laundries' => Laundry::latest()
-                ->filter(request()->search)
+                ->filter(request()->only('search'))
                 ->paginate(10)
                 ->withQueryString()
                 ->through(fn($laundry) => [

app/Http/Controllers/OutletController.php

         }
 
         return inertia('outlet/Index', [
+            'filters' => request()->all('search'),
             'outlets' => Outlet::latest()
-                ->filter(request()->search)
+                ->filter(request()->only('search'))
                 ->paginate(10)
                 ->withQueryString()
                 ->through(fn($outlet) => [

app/Http/Controllers/TransactionController.php

         } else {
             $transactions = Transaction::where('outlet_id', Auth::user()->outlet_id)->latest();
         }
+
         return inertia('transaction/Index', [
+            'filters' => request()->all('search', 'dates'),
             'transactions' => $transactions
-                ->filter(request()->only(['search']))
+                ->filter(request()->only('search', 'dates'))
                 ->paginate(10)
                 ->withQueryString()
                 ->through(fn($transaction) => [

app/Http/Controllers/UserController.php

         }
 
         return inertia('user/Index', [
+            'filters' => request()->all('search'),
             'users' => User::latest()
-                ->filter(request()->search)
+                ->filter(request()->only('search'))
                 ->paginate(10)
                 ->withQueryString()
                 ->through(fn($user) => [

app/Models/Customer.php

         );
     }
 
-    public function scopeFilter($query, $search)
+    public function scopeFilter($query, $filters)
     {
-        $query->when($search ?? null, function ($query, $search) {
+        $query->when($filters['search'] ?? null, function ($query, $search) {
             $query->where(function ($query) use ($search) {
                 $query->where('customer_number', 'like', '%' . $search . '%')
                     ->orWhere('name', 'like', '%' . $search . '%')

app/Models/Laundry.php

         );
     }
 
-    public function scopeFilter($query, $search)
+    public function scopeFilter($query, $filters)
     {
-        $query->when($search ?? null, function ($query, $search) {
+        $query->when($filters['search'] ?? null, function ($query, $search) {
             $query->where(function ($query) use ($search) {
                 $query->where('name', 'like', '%' . $search . '%')
                     ->orWhere('price', 'like', '%' . $search . '%')

app/Models/Outlet.php

         'address',
     ];
 
-    public function scopeFilter($query, $search)
+    public function scopeFilter($query, $filter)
     {
-        $query->when($search ?? null, function ($query, $search) {
+        $query->when($filter['search'] ?? null, function ($query, $search) {
             $query->where(function ($query) use ($search) {
                 $query->where('outlet_number', 'like', '%' . $search . '%')
-                    ->orWhere('name', 'like', '%' . $search . '%')
-                    ->orWhere('phone', 'like', '%' . $search . '%')
-                    ->orWhere('address', 'like', '%' . $search . '%');
+                    ->orWhere('name', 'like', '%' . $search . '%');
             });
         });
     }

app/Models/Transaction.php

         $query->when($filters['search'] ?? null, function ($query, $search) {
             $query->where(function ($query) use ($search) {
                 $query->where('transaction_number', 'like', '%' . $search . '%')
-                    ->orWhere('customer.customer_number', 'like', '%' . $search . '%')
-                    ->orWhere('phone', 'like', '%' . $search . '%');
+                    ->orWhereHas('customer', function ($query) use ($search) {
+                        $query->where('customer_number', 'like', '%' . $search . '%')
+                            ->orWhere('phone', 'like', '%' . $search . '%');
+                    });
             });
+        })->when($filters['dates'] ?? null, function ($query, $dates) {
+            $query->whereBetween('created_at', $dates);
         });
     }
 

app/Models/User.php

         return $this->belongsTo(Outlet::class);
     }
 
-    public function scopeFilter($query, $search)
+    public function scopeFilter($query, $filters)
     {
-        $query->when($search ?? null, function ($query, $search) {
+        $query->when($filters['search'] ?? null, function ($query, $search) {
             $query->where(function ($query) use ($search) {
                 $query->where('name', 'like', '%' . $search . '%')
                     ->orWhere('phone', 'like', '%' . $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=" + {"resources_js_pages_Access_vue":"5c8a7a90d229c3f4","resources_js_pages_auth_ForgotPassword_vue":"9db08b886f3acf35","resources_js_pages_auth_Login_vue":"998ee232f83d0aa9","resources_js_pages_auth_ResetPassword_vue":"3191258dc6d8a4b7","resources_js_pages_auth_VerifyEmail_vue":"632c69e9e8e9c0af","resources_js_pages_customer_Create_vue":"49ac9c113ddac399","resources_js_pages_customer_Edit_vue":"5c8910eb625abf14","resources_js_pages_customer_Index_vue":"e452238637d526f9","resources_js_pages_customer_TableHeader_js":"be6685f342bbd7c2","resources_js_pages_laundry_Create_vue":"24b222d472e458b9","resources_js_pages_laundry_Edit_vue":"e972d2d98c195ade","resources_js_pages_laundry_Index_vue":"d6f815d9c19ce1a5","resources_js_pages_laundry_TableHeader_js":"494e577855bbcaf6","resources_js_pages_outlet_Create_vue":"916319d80a0821ca","resources_js_pages_outlet_Edit_vue":"a89fba3c72a8d6ef","resources_js_pages_outlet_Index_vue":"478bf7ef371d8d29","resources_js_pages_outlet_TableHeader_js":"960433b5f8e003c1","resources_js_pages_transaction_Create_vue":"5390e70d3c3444be","resources_js_pages_transaction_Index_vue":"034abc2087e2eee6","resources_js_pages_transaction_Show_vue":"961762e530a6b329","resources_js_pages_transaction_TableHeader_js":"8b928867ad174e10","resources_js_pages_user_Create_vue":"99b372fa4d1dac71","resources_js_pages_user_Edit_vue":"3412c1b357ee588a","resources_js_pages_user_Index_vue":"3d2db2af0af45ee9","resources_js_pages_user_Show_vue":"c68356ef9b76e682","resources_js_pages_user_TableHeader_js":"c19ccf0fa7c2fb2b"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"resources_js_pages_Access_vue":"5c8a7a90d229c3f4","resources_js_pages_auth_ForgotPassword_vue":"9db08b886f3acf35","resources_js_pages_auth_Login_vue":"998ee232f83d0aa9","resources_js_pages_auth_ResetPassword_vue":"3191258dc6d8a4b7","resources_js_pages_auth_VerifyEmail_vue":"632c69e9e8e9c0af","resources_js_pages_customer_Create_vue":"49ac9c113ddac399","resources_js_pages_customer_Edit_vue":"5c8910eb625abf14","resources_js_pages_customer_Index_vue":"531ae28619c9501a","resources_js_pages_customer_TableHeader_js":"be6685f342bbd7c2","resources_js_pages_laundry_Create_vue":"24b222d472e458b9","resources_js_pages_laundry_Edit_vue":"e972d2d98c195ade","resources_js_pages_laundry_Index_vue":"a4df50af578d72ee","resources_js_pages_laundry_TableHeader_js":"494e577855bbcaf6","resources_js_pages_outlet_Create_vue":"916319d80a0821ca","resources_js_pages_outlet_Edit_vue":"a89fba3c72a8d6ef","resources_js_pages_outlet_Index_vue":"580d1ba885665300","resources_js_pages_outlet_TableHeader_js":"960433b5f8e003c1","resources_js_pages_transaction_Create_vue":"5390e70d3c3444be","resources_js_pages_transaction_Index_vue":"9fef47b26e89fec8","resources_js_pages_transaction_Show_vue":"961762e530a6b329","resources_js_pages_transaction_TableHeader_js":"8b928867ad174e10","resources_js_pages_user_Create_vue":"99b372fa4d1dac71","resources_js_pages_user_Edit_vue":"3412c1b357ee588a","resources_js_pages_user_Index_vue":"4823481d9c700d66","resources_js_pages_user_Show_vue":"c68356ef9b76e682","resources_js_pages_user_TableHeader_js":"c19ccf0fa7c2fb2b"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	
       methods: {
         route: route
       }
-    }).directive('styleclass', primevue_styleclass__WEBPACK_IMPORTED_MODULE_9__["default"]).directive('ripple', primevue_ripple__WEBPACK_IMPORTED_MODULE_25__["default"]).directive('tooltip', primevue_tooltip__WEBPACK_IMPORTED_MODULE_26__["default"]).component('AutoComplete', primevue_autocomplete__WEBPACK_IMPORTED_MODULE_10__["default"]).component('Button', primevue_button__WEBPACK_IMPORTED_MODULE_12__["default"]).component('Badge', primevue_badge__WEBPACK_IMPORTED_MODULE_11__["default"]).component('Card', primevue_card__WEBPACK_IMPORTED_MODULE_14__["default"]).component('Calender', primevue_calendar__WEBPACK_IMPORTED_MODULE_13__["default"]).component('Column', primevue_column__WEBPACK_IMPORTED_MODULE_15__["default"]).component('DataTable', primevue_datatable__WEBPACK_IMPORTED_MODULE_16__["default"]).component('Dialog', primevue_dialog__WEBPACK_IMPORTED_MODULE_17__["default"]).component('Divider', primevue_divider__WEBPACK_IMPORTED_MODULE_18__["default"]).component('Dropdown', primevue_dropdown__WEBPACK_IMPORTED_MODULE_19__["default"]).component('InputNumber', primevue_inputnumber__WEBPACK_IMPORTED_MODULE_20__["default"]).component('InputText', primevue_inputtext__WEBPACK_IMPORTED_MODULE_21__["default"]).component('Message', primevue_message__WEBPACK_IMPORTED_MODULE_22__["default"]).component('Paginator', primevue_paginator__WEBPACK_IMPORTED_MODULE_23__["default"]).component('Password', primevue_password__WEBPACK_IMPORTED_MODULE_24__["default"]).mount(el);
+    }).directive('styleclass', primevue_styleclass__WEBPACK_IMPORTED_MODULE_9__["default"]).directive('ripple', primevue_ripple__WEBPACK_IMPORTED_MODULE_25__["default"]).directive('tooltip', primevue_tooltip__WEBPACK_IMPORTED_MODULE_26__["default"]).component('AutoComplete', primevue_autocomplete__WEBPACK_IMPORTED_MODULE_10__["default"]).component('Button', primevue_button__WEBPACK_IMPORTED_MODULE_12__["default"]).component('Badge', primevue_badge__WEBPACK_IMPORTED_MODULE_11__["default"]).component('Card', primevue_card__WEBPACK_IMPORTED_MODULE_14__["default"]).component('Calendar', primevue_calendar__WEBPACK_IMPORTED_MODULE_13__["default"]).component('Column', primevue_column__WEBPACK_IMPORTED_MODULE_15__["default"]).component('DataTable', primevue_datatable__WEBPACK_IMPORTED_MODULE_16__["default"]).component('Dialog', primevue_dialog__WEBPACK_IMPORTED_MODULE_17__["default"]).component('Divider', primevue_divider__WEBPACK_IMPORTED_MODULE_18__["default"]).component('Dropdown', primevue_dropdown__WEBPACK_IMPORTED_MODULE_19__["default"]).component('InputNumber', primevue_inputnumber__WEBPACK_IMPORTED_MODULE_20__["default"]).component('InputText', primevue_inputtext__WEBPACK_IMPORTED_MODULE_21__["default"]).component('Message', primevue_message__WEBPACK_IMPORTED_MODULE_22__["default"]).component('Paginator', primevue_paginator__WEBPACK_IMPORTED_MODULE_23__["default"]).component('Password', primevue_password__WEBPACK_IMPORTED_MODULE_24__["default"]).mount(el);
   }
 });
 _inertiajs_progress__WEBPACK_IMPORTED_MODULE_7__.InertiaProgress.init({

resources/js/pages/customer/Index.vue

 <script setup>
-import { Head, Link } from '@inertiajs/inertia-vue3'
+import { watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { Head, Link, useForm } from '@inertiajs/inertia-vue3'
+import throttle from 'lodash/throttle'
+import pickBy from 'lodash/pickBy'
 import AppButton from '@/components/AppButton.vue'
 import AppPagination from '@/components/AppPagination.vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 
 import TableHeader from './TableHeader'
 
-defineProps({
+const props = defineProps({
   customers: Object,
+  filters: Object,
 })
+
+const filterForm = useForm({
+  search: props.filters.search,
+})
+
+watch(
+  filterForm,
+  throttle(() => {
+    Inertia.get('/customers', pickBy({ search: filterForm.search }), { preserveState: true })
+  }, 300)
+)
 </script>
 
 <template>
       :stripedRows="true"
     >
       <template #header>
+        <h5>Customer</h5>
+
         <div class="grid">
-          <div class="col-12 md:col-6">
+          <div class="col-12 md:col-8">
             <div class="flex align-items-center">
-              <h5 class="mr-3 mb-0">Customer</h5>
-
-              <InputText class="w-full md:w-27rem" placeholder="cari..." />
+              <InputText class="w-full md:w-27rem" placeholder="cari..." v-model="filterForm.search" />
             </div>
           </div>
 
-          <div class="col-12 md:col-6 flex justify-content-end">
+          <div class="col-12 md:col-4 flex justify-content-end">
             <AppButton :href="route('customers.create')" label="Tambah Customer" icon="pi pi-pencil" />
           </div>
         </div>

resources/js/pages/laundry/Index.vue

 <script setup>
-import { Head, Link } from '@inertiajs/inertia-vue3'
+import { watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { Head, Link, useForm } from '@inertiajs/inertia-vue3'
+import throttle from 'lodash/throttle'
+import pickBy from 'lodash/pickBy'
 import AppButton from '@/components/AppButton.vue'
 import AppPagination from '@/components/AppPagination.vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 
 import TableHeader from './TableHeader'
 
-defineProps({
+const props = defineProps({
   laundries: Object,
+  filters: Object,
 })
+
+const filterForm = useForm({
+  search: props.filters.search,
+})
+
+watch(
+  filterForm,
+  throttle(() => {
+    Inertia.get('/laundries', pickBy({ search: filterForm.search }), { preserveState: true })
+  }, 300)
+)
 </script>
 
 <template>
       :stripedRows="true"
     >
       <template #header>
+        <h5>Laundry</h5>
+
         <div class="grid">
-          <div class="col-12 md:col-6">
+          <div class="col-12 md:col-8">
             <div class="flex align-items-center">
-              <h5 class="mr-3 mb-0">Laundry</h5>
-
-              <InputText class="w-full md:w-27rem" placeholder="cari..." />
+              <InputText class="w-full md:w-27rem" placeholder="cari..." v-model="filterForm.search" />
             </div>
           </div>
 
-          <div class="col-12 md:col-6 flex justify-content-end">
+          <div class="col-12 md:col-4 flex justify-content-end">
             <AppButton :href="route('laundries.create')" label="Tambah Laundry" icon="pi pi-pencil" />
           </div>
         </div>

resources/js/pages/outlet/Index.vue

 <script setup>
-import { Head, Link } from '@inertiajs/inertia-vue3'
+import { watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { Head, Link, useForm } from '@inertiajs/inertia-vue3'
+import throttle from 'lodash/throttle'
+import pickBy from 'lodash/pickBy'
 import AppButton from '@/components/AppButton.vue'
 import AppPagination from '@/components/AppPagination.vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 
 import TableHeader from './TableHeader'
 
-defineProps({
+const props = defineProps({
   outlets: Object,
+  filters: Object,
 })
+
+const filterForm = useForm({
+  search: props.filters.search,
+})
+
+watch(
+  filterForm,
+  throttle(() => {
+    Inertia.get('/outlets', pickBy({ search: filterForm.search }), { preserveState: true })
+  }, 300)
+)
 </script>
 
 <template>
       :stripedRows="true"
     >
       <template #header>
+        <h5>Outlet</h5>
+
         <div class="grid">
-          <div class="col-12 md:col-6">
+          <div class="col-12 md:col-8">
             <div class="flex align-items-center">
-              <h5 class="mr-3 mb-0">Outlet</h5>
-
-              <InputText class="w-full md:w-27rem" placeholder="cari..." />
+              <InputText class="w-full md:w-27rem" placeholder="cari..." v-model="filterForm.search" />
             </div>
           </div>
 
-          <div class="col-12 md:col-6 flex justify-content-end">
+          <div class="col-12 md:col-4 flex justify-content-end">
             <AppButton :href="route('outlets.create')" label="Tambah Outlet" icon="pi pi-pencil" />
           </div>
         </div>

resources/js/pages/transaction/Index.vue

 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { Inertia } from '@inertiajs/inertia'
 import { Head, useForm } from '@inertiajs/inertia-vue3'
+import throttle from 'lodash/throttle'
+import pickBy from 'lodash/pickBy'
 import AppButton from '@/components/AppButton.vue'
 import AppPagination from '@/components/AppPagination.vue'
 import AppMenu from '@/components/AppMenu.vue'
 const props = defineProps({
   transactions: Object,
   transactionsStatus: Array,
+  filters: Object,
 })
 
+const filterForm = useForm({
+  search: props.filters.search,
+  dates: props.filters.dates,
+})
+
+watch(
+  filterForm,
+  throttle(() => {
+    Inertia.get('/transactions', pickBy({ search: filterForm.search, dates: filterForm.dates }), {
+      preserveState: true,
+    })
+  }, 300)
+)
+
 const transactionId = ref()
 
 const updateStatusDialog = ref(false)
 
 const overlayItems = ref([])
 
+const startPrinting = (transactionNumber) => {
+  Inertia.get(`/thermal-printing/${transactionNumber}`)
+}
+
 const overlayToggle = (event, data) => {
   overlayItems.value =
     data.transactionStatusId == 4
           {
             label: 'Cetak ulang',
             icon: 'pi pi-print',
-            command() {},
+            command() {
+              startPrinting(data.transactionNumber)
+            },
           },
         ]
       : [
             label: 'Cetak ulang',
             icon: 'pi pi-print',
             command() {
-              Inertia.get(`/thermal-printing/${data.transactionNumber}`)
+              startPrinting(data.transactionNumber)
             },
           },
         ]
       :stripedRows="true"
     >
       <template #header>
-        <div class="grid">
-          <div class="col-12 md:col-6">
-            <div class="flex align-items-center">
-              <h5 class="mr-3 mb-0">Transaksi</h5>
+        <h5>Transaksi</h5>
 
-              <InputText class="w-full md:w-27rem" placeholder="cari..." />
+        <div class="grid">
+          <div class="col-12 md:col-8">
+            <div class="flex flex-column md:flex-row">
+              <div class="flex align-items-center mr-0 md:mr-2 mb-2 md:mb-0">
+                <InputText class="w-full md:w-16rem" placeholder="cari..." v-model="filterForm.search" />
+              </div>
+
+              <Calendar
+                class="w-full md:w-16rem"
+                v-model="filterForm.dates"
+                selection-mode="range"
+                placeholder="filter waktu..."
+                date-format="dd/mm/yy"
+                :show-button-bar="true"
+                :manual-input="false"
+              />
             </div>
           </div>
 
-          <div class="col-12 md:col-6 flex justify-content-end">
+          <div class="col-12 md:col-4 flex justify-content-end">
             <AppButton
               label="Tambah Transaksi"
               class="p-button-text"

resources/js/pages/user/Index.vue

 <script setup>
-import { Head, Link } from '@inertiajs/inertia-vue3'
+import { watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import { Head, Link, useForm } from '@inertiajs/inertia-vue3'
+import throttle from 'lodash/throttle'
+import pickBy from 'lodash/pickBy'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppButton from '@/components/AppButton.vue'
 import AppPagination from '@/components/AppPagination.vue'
 
 import TableHeader from './TableHeader'
 
-defineProps({
+const props = defineProps({
   users: Object,
+  filters: Object,
 })
+
+const filterForm = useForm({
+  search: props.filters.search,
+})
+
+watch(
+  filterForm,
+  throttle(() => {
+    Inertia.get('/users', pickBy({ search: filterForm.search }), { preserveState: true })
+  }, 300)
+)
 </script>
 
 <template>
       :stripedRows="true"
     >
       <template #header>
+        <h5>User</h5>
+
         <div class="grid">
-          <div class="col-12 md:col-6">
+          <div class="col-12 md:col-8">
             <div class="flex align-items-center">
-              <h5 class="mr-3 mb-0">User</h5>
-
-              <InputText class="w-full md:w-27rem" placeholder="cari..." />
+              <InputText class="w-full md:w-27rem" placeholder="cari..." v-model="filterForm.search" />
             </div>
           </div>
 
-          <div class="col-12 md:col-6 flex justify-content-end">
+          <div class="col-12 md:col-4 flex justify-content-end">
             <AppButton :href="route('users.create')" label="Tambah User" icon="pi pi-pencil" class="p-button-text" />
           </div>
         </div>

resources/js/vue.js

 import AutoComplete from 'primevue/autocomplete'
 import Badge from 'primevue/badge'
 import Button from 'primevue/button'
-import Calender from 'primevue/calendar'
+import Calendar from 'primevue/calendar'
 import Card from 'primevue/card'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
       .component('Button', Button)
       .component('Badge', Badge)
       .component('Card', Card)
-      .component('Calender', Calender)
+      .component('Calendar', Calendar)
       .component('Column', Column)
       .component('DataTable', DataTable)
       .component('Dialog', Dialog)