Build overview and handling for unpaid incoming.

resources/views/incoming/create-payment.blade.php

@@ -0,0 +1,77 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('incoming.Create new payment') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12" x-data="paymentForm()">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+
+            <!-- Invoice data -->
+            <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                <div class="max-w">
+                    <section>
+                        <header>
+                            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                                {{ __('incoming.Select invoice') }}
+                            </h2>
+                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                                {{ __('incoming.Select your invoice for payment') }}
+                            </p>
+                        </header>
+
+                        <div class="mt-8" x-show="invoices.length == 0">
+                            {{ __('invoice.No invoices') }}
+                        </div>
+
+                        <summary class="cursor-pointer flex flex-row w-full mt-4">
+                            <div class="w-1/3 font-bold border-b-2">{{ __('invoice.Invoice Number') }}</div>
+                            <div class="w-1/3 font-bold border-b-2">{{ __('supplier.Supplier') }}</div>
+                            <div class="w-1/6 font-bold border-b-2 text-right">{{ __('invoice.Sum') }}</div>
+                            <div class="w-1/6 font-bold border-b-2 text-right">{{ __('common.Created at') }}</div>
+                        </summary>
+
+                        <template x-for="(invoice, index) in invoices" x-bind="invoices">
+                            <a class="cursor-pointer flex flex-row even:bg-gray-100 odd:bg-white hover:bg-gray-400"
+                               :href="'/incoming/' + invoice.id + '/edit'">
+                                <div class="w-1/3" x-text="invoice.invoice_number"></div>
+                                <div class="w-1/3" x-text="invoice.supplier.name"></div>
+                                <div class="w-1/6 text-right" x-text="invoice.gross + ' €'"></div>
+                                <div class="w-1/6 text-right" x-text="invoice.issue_date"></div>
+                            </a>
+                        </template>
+
+                    </section>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+
+</x-app-layout>
+
+<script>
+    function paymentForm() {
+        return {
+            invoices: [],
+
+            error: false,
+            message: '',
+
+            init() {
+                let vm = this;
+                axios.get('/incoming_open')
+                    .then(function (response) {
+                        vm.invoices = response.data;
+                    })
+                    .catch(function (error) {
+                        vm.error = true;
+                        vm.message = error.response.data.message;
+                    })
+            }
+
+        }
+    }
+</script>