Build the stuff for payments.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
@php
|
||||
$customers = \App\Models\Customer::doesntHave('address')->get();
|
||||
$invoices = \App\Models\Invoice::where('status', '=', 'created')->orderBy('created_at')->get();
|
||||
$created_invoices = \App\Models\Invoice::where('status', '=', 'created')->orderBy('created_at')->get();
|
||||
$sent_invoices = \App\Models\Invoice::where('status', '=', 'sent')->orderBy('created_at')->get();
|
||||
|
||||
@endphp
|
||||
|
||||
@@ -12,10 +13,40 @@
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w mx-auto sm:px-6 lg:px-8 grid grid-cols-4 gap-4">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 grid grid-cols-3 gap-4">
|
||||
|
||||
<!-- Invoices not paid -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg col-span-2">
|
||||
<div class="p-6 text-gray-900 dark:text-gray-100">
|
||||
<h2 class="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('dashboard.Invoices not paid') }}</h2>
|
||||
@foreach($sent_invoices as $invoice)
|
||||
<a href="{{ route('payment.create') }}"
|
||||
class="flex max-w even:bg-gray-100 odd:bg-white">
|
||||
<div class="w-1/4">{{ $invoice->number }}</div>
|
||||
<div class="w-1/4">{{ $invoice->address->name }}</div>
|
||||
<div class="w-1/4">{{ $invoice->sum }}</div>
|
||||
<div class="w-1/4">{{ $invoice->created }}</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invoices not sent -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 text-gray-900 dark:text-gray-100">
|
||||
<h2 class="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('dashboard.Invoices not sent') }}</h2>
|
||||
@foreach($created_invoices as $invoice)
|
||||
<a href="{{ route('invoice.edit', $invoice->id) }}"
|
||||
class="flex max-w even:bg-gray-100 odd:bg-white">
|
||||
<div class="w-1/2">{{ $invoice->number }}</div>
|
||||
<div class="w-1/2">{{ $invoice->address->name }}</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customers without address -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg col-span-2">
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 text-gray-900 dark:text-gray-100">
|
||||
<h2 class="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('dashboard.Customers without address') }}</h2>
|
||||
@foreach($customers as $customer)
|
||||
@@ -28,20 +59,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invoices not sent -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg col-span-2">
|
||||
<div class="p-6 text-gray-900 dark:text-gray-100">
|
||||
<h2 class="mb-4 text-lg font-medium text-gray-900 dark:text-gray-100">{{ __('dashboard.Invoices not sent') }}</h2>
|
||||
@foreach($invoices as $invoice)
|
||||
<a href="{{ route('invoice.edit', $invoice->id) }}"
|
||||
class="flex max-w even:bg-gray-100 odd:bg-white">
|
||||
<div class="w-1/2">{{ $invoice->number }}</div>
|
||||
<div class="w-1/2">{{ $invoice->address->name }}</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
|
||||
fetchInvoices() {
|
||||
let vm = this;
|
||||
axios.get('/invoice/' + this.from + '/' + this.end)
|
||||
axios.get('/invoice-filter/' + this.from + '/' + this.end)
|
||||
.then(function (response) {
|
||||
vm.invoices = response.data;
|
||||
vm.calculateSum();
|
||||
|
||||
@@ -23,6 +23,10 @@
|
||||
:active="\Illuminate\Support\Str::startsWith(request()->route()->getName(), 'invoice.')">
|
||||
{{ __('invoice.Invoices') }}
|
||||
</x-nav-link>
|
||||
<x-nav-link :href="route('payment.index')"
|
||||
:active="\Illuminate\Support\Str::startsWith(request()->route()->getName(), 'payment.')">
|
||||
{{ __('invoice.Payments') }}
|
||||
</x-nav-link>
|
||||
<x-nav-link :href="route('taxrate.index')"
|
||||
:active="\Illuminate\Support\Str::startsWith(request()->route()->getName(), 'taxrate.')">
|
||||
{{ __('configuration.Taxrates') }}
|
||||
@@ -93,7 +97,7 @@
|
||||
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
|
||||
<div class="pt-2 pb-3 space-y-1">
|
||||
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
|
||||
{{ __('common.Dashboard') }}
|
||||
{{ __('dashboard.Dashboard') }}
|
||||
</x-responsive-nav-link>
|
||||
</div>
|
||||
|
||||
|
||||
206
resources/views/payment/create.blade.php
Normal file
206
resources/views/payment/create.blade.php
Normal file
@@ -0,0 +1,206 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||
{{ __('invoice.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">
|
||||
{{ __('invoice.Select invoice') }}
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ __("invoice.Select your invoice for payment") }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="mt-8">
|
||||
<template x-for="(invoice, index) in invoices" x-bind="invoices">
|
||||
<div class="cursor-pointer grid grid-cols-4 even:bg-gray-100 odd:bg-white"
|
||||
:class="invoice.id == invoice_id ? 'font-bold' : ''"
|
||||
x-on:click="invoice_id = invoice.id;getPayments(index);">
|
||||
<div x-text="invoice.number"></div>
|
||||
<div x-text="invoice.customer.name"></div>
|
||||
<div x-text="invoice.customer.email"></div>
|
||||
<div x-text="invoice.sum + ' €'"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Existing payments for selected invoice -->
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg" x-show="payments.length != 0">
|
||||
<div class="max-w">
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
|
||||
{{ __('invoice.Existing payments for invoice') }}
|
||||
<span x-text="selected_invoice.number"></span>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<template x-for="(payment, index) in payments">
|
||||
<div class="w-1/2 grid grid-cols-2 even:bg-gray-100 odd:bg-white">
|
||||
<div x-text="payment.date"></div>
|
||||
<div x-text="payment.paid_amount + ' €'"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment data -->
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg" x-show="invoice_id != 0">
|
||||
<div class="max-w">
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ __('invoice.Payment for invoice') }}
|
||||
<span x-text="selected_invoice.number"></span>
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ __("invoice.Enter your payment data") }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form class="mt-6 space-y-6" @submit.prevent="">
|
||||
<p class="text-red-600 font-bold" x-text="message" x-show="error"></p>
|
||||
|
||||
<div>
|
||||
<x-input-label :value="__('invoice.Payment status?')"/>
|
||||
<div class="flex flex-row">
|
||||
<x-input-label class="w-1/4" for="status_full" :value="__('invoice.Payment state full')"/>
|
||||
<x-text-input id="status_full" name="status" type="radio" class="mt-1"
|
||||
value="full" required autofocus autocomplete="name"
|
||||
x-model="payment_data.status"/>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<x-input-label class="w-1/4" for="status_partial" :value="__('invoice.Payment state partial')"/>
|
||||
<x-text-input id="status_partial" name="status" type="radio" class="mt-1"
|
||||
value="partial" required autofocus autocomplete="name"
|
||||
x-model="payment_data.status"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label class="w-1/4" for="payment_date" :value="__('invoice.Payment date')"/>
|
||||
<x-text-input id="payment_date" name="payment_date" type="date" class="mt-1"
|
||||
:value="old('payment_date')" required
|
||||
x-model="payment_data.payment_date"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label class="w-1/4" for="paid_amount" :value="__('invoice.Payment amount')"/>
|
||||
<x-text-input id="paid_amount" name="paid_amount" type="number" class="mt-1" step="0.01"
|
||||
:value="old('paid_amount')" required
|
||||
x-bind:disabled="payment_data.status == 'full'"
|
||||
x-model="payment_data.paid_amount"/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<x-primary-button @click="submit">{{ __('form.Save') }}</x-primary-button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</x-app-layout>
|
||||
|
||||
<script>
|
||||
function paymentForm() {
|
||||
return {
|
||||
index: 0,
|
||||
invoice_id: 0,
|
||||
invoices: [],
|
||||
payments: [],
|
||||
selected_invoice: {},
|
||||
number: '',
|
||||
sum: 0,
|
||||
payment_data: {
|
||||
paid_amount: 0,
|
||||
status: 'full',
|
||||
payment_date: "{{ \Illuminate\Support\Facades\Date::now()->addDays(14)->format('Y-m-d') }}"
|
||||
},
|
||||
|
||||
error: false,
|
||||
message: '',
|
||||
|
||||
init() {
|
||||
let vm = this;
|
||||
axios.get('/invoice_open')
|
||||
.then(function(response) {
|
||||
vm.invoices = response.data;
|
||||
}).catch(function (error) {
|
||||
vm.error = true;
|
||||
vm.message = error.response.data.message;
|
||||
})
|
||||
},
|
||||
|
||||
getPayments(index) {
|
||||
this.index = index;
|
||||
this.selected_invoice = this.invoices[index];
|
||||
this.number = this.selected_invoice.number;
|
||||
this.payment_data.invoice_id = this.selected_invoice.id;
|
||||
|
||||
let vm = this;
|
||||
axios.get('/invoice/' + this.invoice_id + '/payment')
|
||||
.then(function(response) {
|
||||
vm.payments = response.data;
|
||||
vm.calculateSum();
|
||||
}).catch(function(error) {
|
||||
vm.error = true;
|
||||
vm.message = error.response.data.message;
|
||||
})
|
||||
},
|
||||
|
||||
calculateSum() {
|
||||
this.sum = 0;
|
||||
for (const [key, payment] of Object.entries(this.payments)) {
|
||||
this.sum += parseFloat(payment.paid_amount);
|
||||
}
|
||||
this.sum = this.sum.toFixed(2)
|
||||
this.payment_data.paid_amount = (this.selected_invoice.sum - this.sum).toFixed(2);
|
||||
},
|
||||
|
||||
submit() {
|
||||
let vm = this;
|
||||
|
||||
axios.post('/invoice/' + this.invoice_id + '/payment', this.payment_data)
|
||||
.then(function(response) {
|
||||
if (vm.payment_data.status === 'full') {
|
||||
vm.invoice_id = 0;
|
||||
vm.selected_invoice = {};
|
||||
vm.invoices.splice(vm.index, 1);
|
||||
vm.payments = [];
|
||||
} else {
|
||||
vm.getPayments(vm.index);
|
||||
}
|
||||
}).catch(function (error) {
|
||||
vm.error = true;
|
||||
vm.message = error.response.data.message;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
95
resources/views/payment/edit.blade.php
Normal file
95
resources/views/payment/edit.blade.php
Normal file
@@ -0,0 +1,95 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||
{{ __('invoice.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">
|
||||
|
||||
<!-- Payment 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">
|
||||
{{ __('invoice.Payment for invoice') }}
|
||||
<span x-text="payment.invoice.number"></span>
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ __("invoice.Enter your payment data") }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form class="mt-6 space-y-6" @submit.prevent="">
|
||||
<p class="text-red-600 font-bold" x-text="message" x-show="error"></p>
|
||||
|
||||
<div>
|
||||
<x-input-label :value="__('invoice.Payment status?')"/>
|
||||
<div class="flex flex-row">
|
||||
<x-input-label class="w-1/4" for="status_full" :value="__('invoice.Payment state full')"/>
|
||||
<x-text-input id="status_full" name="status" type="radio" class="mt-1"
|
||||
value="full" required autofocus autocomplete="name"
|
||||
x-model="payment.status"/>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<x-input-label class="w-1/4" for="status_partial" :value="__('invoice.Payment state partial')"/>
|
||||
<x-text-input id="status_partial" name="status" type="radio" class="mt-1"
|
||||
value="partial" required autofocus autocomplete="name"
|
||||
x-model="payment.status"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label class="w-1/4" for="payment_date" :value="__('invoice.Payment date')"/>
|
||||
<x-text-input id="payment_date" name="payment_date" type="date" class="mt-1"
|
||||
:value="old('payment_date')" required
|
||||
x-model="payment.payment_date"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center">
|
||||
<x-input-label class="w-1/4" for="paid_amount" :value="__('invoice.Payment amount')"/>
|
||||
<x-text-input id="paid_amount" name="paid_amount" type="number" class="mt-1" step="0.01"
|
||||
:value="old('paid_amount')" required
|
||||
x-bind:disabled="payment.status == 'full'"
|
||||
x-model="payment.paid_amount"/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<x-primary-button @click="submit">{{ __('form.Save') }}</x-primary-button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</x-app-layout>
|
||||
|
||||
<script>
|
||||
function paymentForm() {
|
||||
return {
|
||||
payment: {!! $payment !!},
|
||||
error: false,
|
||||
message: '',
|
||||
|
||||
submit() {
|
||||
let vm = this;
|
||||
|
||||
axios.put('/payment/' + this.payment.id, this.payment)
|
||||
.then(function(response) {
|
||||
window.location.href = '/payment/';
|
||||
}).catch(function (error) {
|
||||
vm.error = true;
|
||||
vm.message = error.response.data.message;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
101
resources/views/payment/index.blade.php
Normal file
101
resources/views/payment/index.blade.php
Normal file
@@ -0,0 +1,101 @@
|
||||
<x-app-layout>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
||||
{{ __('invoice.Payments') }}
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
||||
<div class="max-w-xl">
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
{{ __('invoice.Add new payment') }}
|
||||
</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
||||
{{ __("invoice.Add new payment by clicking add") }}
|
||||
</p>
|
||||
</header>
|
||||
<a class="mt-6 inline-block" href="{{ route('payment.create') }}"><x-primary-button>{{ __('form.Add') }}</x-primary-button></a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
||||
<div class="max-w" x-data="paymentForm">
|
||||
<section>
|
||||
<header>
|
||||
<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">
|
||||
<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>
|
||||
</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/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>
|
||||
</summary>
|
||||
|
||||
<template x-for="payment in payments">
|
||||
<details class="even:bg-gray-100 odd:bg-white">
|
||||
<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/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>
|
||||
</summary>
|
||||
</details>
|
||||
</template>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
<script>
|
||||
function paymentForm() {
|
||||
return {
|
||||
from: "{{ \Illuminate\Support\Facades\Date::now()->firstOfMonth()->format('Y-m-d') }}",
|
||||
end: "{{ \Illuminate\Support\Facades\Date::now()->format('Y-m-d') }}",
|
||||
payments: [],
|
||||
sum: 0,
|
||||
|
||||
init() {
|
||||
this.fetchPayments();
|
||||
},
|
||||
|
||||
fetchPayments() {
|
||||
let vm = this;
|
||||
axios.get('/payment-filter/' + this.from + '/' + this.end)
|
||||
.then(function (response) {
|
||||
vm.payments = response.data;
|
||||
vm.calculateSum();
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
})
|
||||
},
|
||||
|
||||
calculateSum() {
|
||||
this.sum = 0;
|
||||
for (const [key, payment] of Object.entries(this.payments)) {
|
||||
this.sum += parseFloat(payment.sum);
|
||||
}
|
||||
this.sum = this.sum.toFixed(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -35,7 +35,7 @@
|
||||
href="{{ url('/dashboard') }}"
|
||||
class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
|
||||
>
|
||||
{{ __('common.Dashboard') }}
|
||||
{{ __('dashboard.Dashboard') }}
|
||||
</a>
|
||||
@else
|
||||
<a
|
||||
|
||||
Reference in New Issue
Block a user