144 lines
6.8 KiB
PHP
144 lines
6.8 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<div class="flex flex-row w-full">
|
|
<h2 class="grow font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
|
|
{{ __('incoming.Incoming') }}
|
|
</h2>
|
|
<a href="{{ route('excel') }}" class="relative flex flex-row">
|
|
<x-excel-icon class="text-gray-800 cursor-pointer"/>
|
|
</a>
|
|
</div>
|
|
</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 flex flex-row">
|
|
<section class="w-1/2">
|
|
<header>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('incoming.Add new invoice') }}
|
|
</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ __("incoming.Add new invoice by clicking add") }}
|
|
</p>
|
|
</header>
|
|
<a class="mt-6 inline-block" href="{{ route('incoming.create') }}"><x-primary-button>{{ __('form.Add') }}</x-primary-button></a>
|
|
</section>
|
|
<section class="w-1/2">
|
|
<header>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('incoming.Upload new invoice') }}
|
|
</h2>
|
|
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ __("incoming.Upload new xml invoice by clicking upload") }}
|
|
</p>
|
|
</header>
|
|
<a class="mt-6 inline-block" href="{{ route('incoming.upload') }}"><x-primary-button>{{ __('form.Upload') }}</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="incomingForm">
|
|
<section>
|
|
<header>
|
|
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
{{ __('incoming.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>
|
|
</header>
|
|
|
|
<summary class="cursor-pointer flex flex-row w-full mt-4">
|
|
<div class="w-1/6 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/4 font-bold border-b-2">{{ __('common.Name') }}</div>
|
|
<div class="w-1/12 font-bold border-b-2 text-right">{{ __('invoice.Sum') }}</div>
|
|
<div class="w-1/12 font-bold border-b-2 text-right">{{ __('common.Created at') }}</div>
|
|
<div class="w-1/12 font-bold border-b-2 text-right">{{ __('common.Paid at') }}</div>
|
|
</summary>
|
|
|
|
<template x-for="invoice in invoices">
|
|
<details class="even:bg-gray-100 odd:bg-white">
|
|
<summary class="cursor-pointer flex flex-row w-full" @click="window.location.href='/incoming/' + invoice.id + '/edit';">
|
|
<div class="w-1/6" x-text="invoice.invoice_number"></div>
|
|
<div class="w-1/3" x-text="invoice.supplier.name"></div>
|
|
<div class="w-1/4" x-text="invoice.supplier.email"></div>
|
|
<div class="w-1/12 text-right" x-text="invoice.gross + ' €'"></div>
|
|
<div class="w-1/12 text-right" x-text="invoice.created"></div>
|
|
<div class="w-1/12 text-right" x-text="invoice.paid"></div>
|
|
</summary>
|
|
</details>
|
|
</template>
|
|
|
|
<div class="w-full border-t-2"></div>
|
|
|
|
<div class="w-1/2 grid grid-cols-2">
|
|
<div>{{ __('invoice.Net') }}</div>
|
|
<div class="text-right" x-text="net + ' €'"></div>
|
|
<div>{{ __('invoice.Tax') }}</div>
|
|
<div class="text-right" x-text="tax + ' €'"></div>
|
|
<div class="font-bold">{{ __('invoice.Sum') }}</div>
|
|
<div class="font-bold text-right" x-text="gross + ' €'"></div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</x-app-layout>
|
|
|
|
<script>
|
|
function incomingForm() {
|
|
return {
|
|
net: 0,
|
|
gross: 0,
|
|
tax: 0,
|
|
from: "{{ \Illuminate\Support\Facades\Date::now()->firstOfMonth()->format('Y-m-d') }}",
|
|
end: "{{ \Illuminate\Support\Facades\Date::now()->format('Y-m-d') }}",
|
|
invoices: [],
|
|
|
|
init() {
|
|
this.fetchInvoices();
|
|
},
|
|
|
|
fetchInvoices() {
|
|
let vm = this;
|
|
axios.get('/incoming-filter/' + this.from + '/' + this.end)
|
|
.then(function (response) {
|
|
vm.invoices = response.data;
|
|
vm.calculateSum();
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
})
|
|
},
|
|
|
|
calculateSum() {
|
|
this.net = 0;
|
|
this.gross = 0;
|
|
this.tax = 0;
|
|
for (const [key, invoice] of Object.entries(this.invoices)) {
|
|
this.net += parseFloat(invoice.net);
|
|
this.gross += parseFloat(invoice.gross);
|
|
this.tax += parseFloat(invoice.tax)
|
|
}
|
|
this.net = this.net.toFixed(2)
|
|
this.gross = this.gross.toFixed(2);
|
|
this.tax = this.tax.toFixed(2);
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|