From 5deef877bab5d23702eb5b50708ae22381888bca Mon Sep 17 00:00:00 2001
From: chris <christiansteinle@arcor.de>
Date: Tue, 13 May 2025 11:32:21 +0200
Subject: [PATCH] Make invoices and payments searchable. Extend payments
 overview.

---
 app/Models/Payment.php                  |  2 +-
 resources/views/invoice/index.blade.php | 41 ++++++++++++++---
 resources/views/payment/index.blade.php | 58 +++++++++++++++++++------
 3 files changed, 81 insertions(+), 20 deletions(-)

diff --git a/app/Models/Payment.php b/app/Models/Payment.php
index 69c61e4..c529193 100644
--- a/app/Models/Payment.php
+++ b/app/Models/Payment.php
@@ -54,7 +54,7 @@ class Payment extends Model
      */
     public function invoice(): BelongsTo
     {
-        return $this->belongsTo(Invoice::class);
+        return $this->belongsTo(Invoice::class)->with(['customer']);
     }
 
 }
diff --git a/resources/views/invoice/index.blade.php b/resources/views/invoice/index.blade.php
index 69590fa..f5ecc00 100644
--- a/resources/views/invoice/index.blade.php
+++ b/resources/views/invoice/index.blade.php
@@ -36,11 +36,23 @@
                             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                 {{ __('invoice.Existing invoices') }}
                             </h2>
-                            <div class="flex flex-row space-x-4 items-center mt-4">
-                                <x-input-label for="from" :value="__('invoice.From')"/>
-                                <x-text-input type="date" id="from" name="from" x-model="from" x-on:change="fetchInvoices()"/>
-                                <x-input-label for="end" :value="__('invoice.End')"/>
-                                <x-text-input type="date" id="end" name="end" x-model="end" x-on:change="fetchInvoices()"/>
+                            <div class="grid grid-cols-2">
+                                <div class="flex flex-row space-x-4 items-center mt-4">
+                                    <x-input-label for="from" :value="__('invoice.From')"/>
+                                    <x-text-input type="date" id="from" name="from" x-model="from" x-on:change="fetchInvoices()"/>
+                                    <x-input-label for="end" :value="__('invoice.End')"/>
+                                    <x-text-input type="date" id="end" name="end" x-model="end" x-on:change="fetchInvoices()"/>
+                                </div>
+                                <div class="flex flex-row items-center gap-8">
+                                    <x-input-label for="search_invoice" :value="__('common.Search')"/>
+                                    <x-text-input id="search_invoice" name="search_invoice" type="text"
+                                                  class="mt-1 block w-full"
+                                                  x-ref="search_invoice"
+                                                  autofocus
+                                                  placeholder="{{ __('incoming.Search invoice') }}"
+                                                  x-on:keydown.window.prevent.slash="$refs.search_invoice.focus()"
+                                                  x-model="search_invoice"/>
+                                </div>
                             </div>
                         </header>
 
@@ -53,7 +65,7 @@
                             <div class="w-1/12 font-bold border-b-2 text-right">{{ __('common.Created at') }}</div>
                         </summary>
 
-                        <template x-for="invoice in invoices">
+                        <template x-for="invoice in getFilteredInvoices()">
                             <details class="even:bg-gray-100 odd:bg-white hover:bg-gray-400">
                                 <summary class="cursor-pointer flex flex-row w-full" @click="window.location.href='/invoice/' + invoice.id;">
                                     <div class="w-1/6" x-text="invoice.number"></div>
@@ -96,6 +108,7 @@
             from: "{{ $first }}",
             end: "{{ $last }}",
             invoices: [],
+            search_invoice: '',
             sum: 0,
             tax: 0,
 
@@ -115,6 +128,22 @@
                     })
             },
 
+            getFilteredInvoices() {
+                if (this.search_invoice === '') {
+                    return this.invoices;
+                }
+                return this.invoices.filter((invoice) => {
+                    return invoice.customer.name
+                            .replace(/ /g, '')
+                            .toLowerCase()
+                            .includes(this.search_invoice.replace(/ /g, '').toLowerCase())
+                        || invoice.number
+                            .replace(/ /g, '')
+                            .toLowerCase()
+                            .includes(this.search_invoice.replace(/ /g, '').toLowerCase())
+                });
+            },
+
             calculateSum() {
                 this.sum = 0;
                 this.tax = 0;
diff --git a/resources/views/payment/index.blade.php b/resources/views/payment/index.blade.php
index 708132f..bbf5655 100644
--- a/resources/views/payment/index.blade.php
+++ b/resources/views/payment/index.blade.php
@@ -35,28 +35,43 @@
                             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                 {{ __('invoice.Existing payments') }}
                             </h2>
-                            <div class="flex flex-row space-x-4 items-center mt-4">
-                                <x-input-label for="from" :value="__('invoice.From')"/>
-                                <x-text-input type="date" id="from" name="from" x-model="from" x-on:change="fetchPayments()"/>
-                                <x-input-label for="end" :value="__('invoice.End')"/>
-                                <x-text-input type="date" id="end" name="end" x-model="end" x-on:change="fetchPayments()"/>
+                            <div class="grid grid-cols-2">
+                                <div class="flex flex-row space-x-4 items-center mt-4">
+                                    <x-input-label for="from" :value="__('invoice.From')"/>
+                                    <x-text-input type="date" id="from" name="from" x-model="from" x-on:change="fetchPayments()"/>
+                                    <x-input-label for="end" :value="__('invoice.End')"/>
+                                    <x-text-input type="date" id="end" name="end" x-model="end" x-on:change="fetchPayments()"/>
+                                </div>
+                                <div class="flex flex-row items-center gap-8">
+                                    <x-input-label for="search_invoice" :value="__('common.Search')"/>
+                                    <x-text-input id="search_invoice" name="search_invoice" type="text"
+                                                  class="mt-1 block w-full"
+                                                  x-ref="search_invoice"
+                                                  autofocus
+                                                  placeholder="{{ __('incoming.Search invoice') }}"
+                                                  x-on:keydown.window.prevent.slash="$refs.search_invoice.focus()"
+                                                  x-model="search_invoice"/>
+                                </div>
+
                             </div>
                         </header>
 
                         <summary class="flex flex-row w-full mt-4">
-                            <div class="w-1/4 font-bold border-b-2">{{ __('invoice.Invoice Number') }}</div>
+                            <div class="w-1/6 font-bold border-b-2">{{ __('invoice.Invoice Number') }}</div>
+                            <div class="w-1/4 font-bold border-b-2">{{ __('common.Name') }}</div>
                             <div class="w-1/4 font-bold border-b-2">{{ __('invoice.State') }}</div>
-                            <div class="w-1/4 text-right font-bold border-b-2 text-right">{{ __('invoice.Sum') }}</div>
-                            <div class="w-1/4 text-right font-bold border-b-2 text-right">{{ __('invoice.Paid at') }}</div>
+                            <div class="w-1/6 text-right font-bold border-b-2 text-right">{{ __('invoice.Sum') }}</div>
+                            <div class="w-1/6 text-right font-bold border-b-2 text-right">{{ __('invoice.Paid at') }}</div>
                         </summary>
 
-                        <template x-for="payment in payments">
+                        <template x-for="payment in getFilteredInvoices()">
                             <details class="even:bg-gray-100 odd:bg-white hover:bg-gray-400">
                                 <summary class="cursor-pointer flex flex-row w-full" @click="window.location.href='/payment/' + payment.id + '/edit';">
-                                    <div class="w-1/4" x-text="payment.invoice.number"></div>
+                                    <div class="w-1/6" x-text="payment.invoice.number"></div>
+                                    <div class="w-1/4" x-text="payment.invoice.customer.name"></div>
                                     <div class="w-1/4" x-text="payment.localized_state"></div>
-                                    <div class="w-1/4 text-right" x-text="payment.paid_amount + ' €'"></div>
-                                    <div class="w-1/4 text-right" x-text="payment.date"></div>
+                                    <div class="w-1/6 text-right" x-text="payment.paid_amount + ' €'"></div>
+                                    <div class="w-1/6 text-right" x-text="payment.date"></div>
                                 </summary>
                             </details>
                         </template>
@@ -90,6 +105,7 @@
             from: "{{ $first }}",
             end: "{{ $last }}",
             payments: [],
+            search_invoice: '',
             sum: 0,
             tax: 0,
 
@@ -109,10 +125,26 @@
                     })
             },
 
+            getFilteredInvoices() {
+                if (this.search_invoice === '') {
+                    return this.payments;
+                }
+                return this.payments.filter((payment) => {
+                    return payment.invoice.customer.name
+                            .replace(/ /g, '')
+                            .toLowerCase()
+                            .includes(this.search_invoice.replace(/ /g, '').toLowerCase())
+                        || payment.invoice.number
+                            .replace(/ /g, '')
+                            .toLowerCase()
+                            .includes(this.search_invoice.replace(/ /g, '').toLowerCase())
+                });
+            },
+
             calculateSum() {
                 this.sum = 0;
                 this.tax = 0;
-                for (const [key, payment] of Object.entries(this.payments)) {
+                for (const [key, payment] of Object.entries(this.getFilteredInvoices())) {
                     this.sum += parseFloat(payment.paid_amount);
                     this.tax += payment.invoice.tax * payment.paid_amount / payment.invoice.sum;
                 }