mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-19 03:35:02 +00:00
PDF Invoice
This commit is contained in:
Peter Papp
Vendored
+304
@@ -0,0 +1,304 @@
|
||||
$primary-color: #bc30fd;
|
||||
$text-color: #1B2539;
|
||||
$border-color: #D8D8D8;
|
||||
$background-color: #F4F5F6;
|
||||
$border-radius: 15px;
|
||||
|
||||
@mixin font-size($size) {
|
||||
font-size:(($size*1.6)/16) + 0em;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
*, html, body, h1, h2, h3, h4, p, span, b, strong {
|
||||
font-family: 'Nunito', serif;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&.spaces {
|
||||
margin: 0 -15px;
|
||||
|
||||
div[class^='col-'] {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
div[class^='col-'] {
|
||||
flex-grow: 1;
|
||||
|
||||
&.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.col-left, .col-right {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.align-center div[class^='col-'] {
|
||||
align-self: center;
|
||||
}
|
||||
&.align-bottom div[class^='col-'] {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-header {
|
||||
|
||||
.logo {
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.email, .phone {
|
||||
display: block;
|
||||
@include font-size(7);
|
||||
font-weight: 400;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 1;
|
||||
padding-bottom: 5px;
|
||||
@include font-size(16);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $primary-color;
|
||||
font-weight: 600;
|
||||
@include font-size(11);
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $text-color;
|
||||
font-weight: 600;
|
||||
@include font-size(7);
|
||||
}
|
||||
}
|
||||
|
||||
.supplier {
|
||||
float: right;
|
||||
max-width: 600px;
|
||||
|
||||
.box {
|
||||
background: $background-color;
|
||||
border-radius: $border-radius;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dates {
|
||||
margin-top: 10px;
|
||||
|
||||
p {
|
||||
text-align: right;
|
||||
@include font-size(9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.special-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
gap: 20px;
|
||||
|
||||
.special-item {
|
||||
background: $background-color;
|
||||
border-radius: 8px;
|
||||
|
||||
.padding {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
color: $primary-color;
|
||||
@include font-size(9);
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size(10);
|
||||
font-weight: 600;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: $background-color;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
flex: 1 1 100%;
|
||||
text-align: left;
|
||||
min-width: 50px;
|
||||
word-break: break-word;
|
||||
|
||||
span, a {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
flex: 0 0 280px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
.table-row {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: white !important;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 0;
|
||||
display: block;
|
||||
|
||||
.table-cell {
|
||||
|
||||
span {
|
||||
color: $primary-color;
|
||||
font-weight: 600;
|
||||
@include font-size(9);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
align-self: center;
|
||||
|
||||
span, a {
|
||||
vertical-align: middle;
|
||||
font-weight: 500;
|
||||
@include font-size(9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
max-width: 300px;
|
||||
margin: 20px 0 30px auto;
|
||||
text-align: right;
|
||||
|
||||
li {
|
||||
padding: 2px 0;
|
||||
|
||||
.col-full:first-child {
|
||||
|
||||
b, span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.col-full {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size(10);
|
||||
}
|
||||
|
||||
b {
|
||||
@include font-size(13);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $primary-color;
|
||||
font-weight: 600;
|
||||
padding-bottom: 8px;
|
||||
@include font-size(10);
|
||||
}
|
||||
|
||||
p, span {
|
||||
font-weight: 400;
|
||||
padding-bottom: 4px;
|
||||
@include font-size(10);
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
section, header {
|
||||
border-bottom: 1px dashed $border-color;
|
||||
padding-bottom: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.address, .number {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.thank-you {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
||||
.stamp {
|
||||
max-width: 200px;
|
||||
display: block;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
|
||||
div {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap" rel="stylesheet">
|
||||
|
||||
<link href="{{ mix('css/oasis-invoice.css') }}?v={{ get_version() }}" rel="stylesheet">
|
||||
|
||||
<title>Invoice</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr class="table-row">
|
||||
<td class="table-cell">
|
||||
<span>Názov produktu</span>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<span>Množstvo</span>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<span>J. Cena</span>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<span>Celkom</span>
|
||||
</td>
|
||||
@if($invoice->client['ic_dph'])
|
||||
<td class="table-cell">
|
||||
<span>Sadzba DPH</span>
|
||||
</td>
|
||||
@endif
|
||||
@if($invoice->client['ic_dph'])
|
||||
<td class="table-cell">
|
||||
<span>DPH</span>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<span>Celkom s DPH</span>
|
||||
</td>
|
||||
@endif
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@foreach($invoice->items as $item)
|
||||
<tr class="table-row">
|
||||
<td class="table-cell">
|
||||
<span style="word-break: break-word">{{ $item['description'] }}</span>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<span>{{ $item['amount'] }}</span>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<span>{{ format_to_currency($item['price']) }}</span>
|
||||
</td>
|
||||
|
||||
<td class="table-cell">
|
||||
<span>{{ format_to_currency($item['price'] * $item['amount']) }}</span>
|
||||
</td>
|
||||
|
||||
@if($invoice->client['ic_dph'])
|
||||
<td class="table-cell">
|
||||
<span>{{ $item['tax_rate'] }} %</span>
|
||||
</td>
|
||||
@endif
|
||||
|
||||
@if($invoice->client['ic_dph'])
|
||||
<td class="table-cell">
|
||||
<span>{{ invoice_item_only_tax_price($item, true) }}</span>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<span>{{ invoice_item_with_tax_price($item, true) }}</span>
|
||||
</td>
|
||||
@endif
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<ul class="summary">
|
||||
|
||||
@if($invoice->discount_type)
|
||||
<li class="row">
|
||||
<div class="col-full">
|
||||
<span>Zlava za doklad:</span>
|
||||
</div>
|
||||
<div class="col-full">
|
||||
<!-- -32,64-->
|
||||
<span>-{{ invoice_total_discount($invoice, true) }}</span>
|
||||
</div>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{--VAT Payer--}}
|
||||
@if($invoice->client['ic_dph'] && ! $invoice->discount_type)
|
||||
<li class="row">
|
||||
<div class="col-full">
|
||||
<span>Cena bez DPH:</span>
|
||||
</div>
|
||||
<div class="col-full">
|
||||
<span>{{ format_to_currency($invoice->total_net) }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="row">
|
||||
<div class="col-full">
|
||||
<span>DPH:</span>
|
||||
</div>
|
||||
<div class="col-full">
|
||||
<span>{{ format_to_currency($invoice->total_tax) }}</span>
|
||||
</div>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{--VAT Payer with Discount--}}
|
||||
@if($invoice->client['ic_dph'] && $invoice->discount_type)
|
||||
<li class="row">
|
||||
<div class="col-full">
|
||||
<span>Cena bez DPH:</span>
|
||||
</div>
|
||||
<div class="col-full">
|
||||
<span>
|
||||
@if($invoice->discount_type === 'percent')
|
||||
<!--244,80-->
|
||||
{{ format_to_currency($invoice->total_net * ((100 - $invoice->discount_rate) / 100)) }}
|
||||
@endif
|
||||
@if($invoice->discount_type === 'value')
|
||||
<!--263,67-->
|
||||
{{ format_to_currency(($invoice->total_net + invoice_total_tax($invoice)) / ((100 - $invoice->discount_rate) / 100)) }}
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="row">
|
||||
<div class="col-full">
|
||||
<span>DPH:</span>
|
||||
</div>
|
||||
<div class="col-full">
|
||||
@if($invoice->discount_type === 'percent')
|
||||
<!--48,96-->
|
||||
<span>{{ format_to_currency(invoice_total_tax($invoice) * ((100 - $invoice->discount_rate) / 100)) }}</span>
|
||||
@endif
|
||||
@if($invoice->discount_type === 'value')
|
||||
<!--52,73-->
|
||||
@endif
|
||||
</div>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
{{--<li class="row">
|
||||
<div class="col-full">
|
||||
<b>Spolu k úhrade:</b>
|
||||
</div>
|
||||
<div class="col-full">
|
||||
@if($invoice->client['ic_dph'])
|
||||
<b>{{ format_to_currency($invoice->total_net + $invoice->total_tax) }}</b>
|
||||
@else
|
||||
<b>{{ format_to_currency($invoice->total_net) }}</b>
|
||||
@endif
|
||||
</div>
|
||||
</li>--}}
|
||||
</ul>
|
||||
|
||||
{{--Invoice header--}}
|
||||
<header class="invoice-header">
|
||||
<div class="row">
|
||||
<div class="col-left">
|
||||
{{--TODO: klientske logo--}}
|
||||
<img class="logo" src="{{ get_setting('app_logo_horizontal') }}">
|
||||
|
||||
<b class="email">{{ $user->email }}</b>
|
||||
<b class="phone">{{ $user->settings->phone_number }}</b>
|
||||
</div>
|
||||
<div class="col-right align-right">
|
||||
<h1>Faktúra - daňový doklad</h1>
|
||||
<h2>Číslo: {{ $invoice->invoice_number }}</h2>
|
||||
<h4>Variabilný symbol: {{ $invoice->variable_number }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!--Supplier-->
|
||||
<section>
|
||||
<div class="supplier">
|
||||
<div class="box">
|
||||
<h3>Odberateľ:</h3>
|
||||
<p>{{ $invoice->client['name'] }}</p>
|
||||
<p>{{ $invoice->client['address'] }}, {{ $invoice->client['city'] }}</p>
|
||||
<p>{{ $invoice->client['postal_code'] }} {{ $invoice->client['country'] }}</p>
|
||||
|
||||
<div class="single-row">
|
||||
<span>
|
||||
@isset($invoice->client['ico'])
|
||||
<span class="highlight">IČO</span>: {{ $invoice->client['ico'] }}
|
||||
@endisset
|
||||
@isset($invoice->client['dic'])
|
||||
<span class="highlight">DIČ</span>: {{ $invoice->client['dic'] }}
|
||||
@endisset
|
||||
@isset($invoice->client['ic_dph'])
|
||||
<span class="highlight">IC DPH</span>: {{ $invoice->client['ic_dph'] }}
|
||||
@endisset
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dates">
|
||||
<p>Dátum vystavenia: {{ format_date($invoice->created_at, '%d. %B. %Y') }}</p>
|
||||
<p>Dátum dodania: {{ format_date($invoice->delivery_at, '%d. %B. %Y') }}</p>
|
||||
<p>Dátum splatnosti: {{ format_date($invoice->due_at, '%d. %B. %Y') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-box">
|
||||
<h3>Dodávateľ:</h3>
|
||||
<p>{{ $user->settings->name }}</p>
|
||||
<small>{{ $user->settings->registration_notes }}</small>
|
||||
</div>
|
||||
|
||||
<div class="content-box">
|
||||
<h3>Sídlo:</h3>
|
||||
<p>{{ $user->settings->address }} {{ $user->settings->city }}</p>
|
||||
<p>{{ $user->settings->postal_code }}, {{ $user->settings->country }}</p>
|
||||
</div>
|
||||
|
||||
<div class="content-box">
|
||||
<h3>Faktúračné údaje:</h3>
|
||||
|
||||
@isset($user->settings->ico)
|
||||
<p>IČO: {{ $user->settings->ico }}</p>
|
||||
@endisset
|
||||
@isset($user->settings->dic)
|
||||
<p>DIČ: {{ $user->settings->dic }}</p>
|
||||
@endisset
|
||||
@isset($invoice->supplier_ic_dph)
|
||||
<p>IČ DPH: {{ $user->settings->ic_dph }}</p>
|
||||
@endisset
|
||||
|
||||
<p>{{ $user->settings->bank_name }}</p>
|
||||
<p>IBAN: {{ $user->settings->iban }}, BIC kód/SWIFT: {{ $user->settings->swift }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{--Special info--}}
|
||||
<div class="special-wrapper">
|
||||
<div class="special-item">
|
||||
<div class="padding">
|
||||
<b>Číslo účtu:</b>
|
||||
<span>{{ $user->settings->iban }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="special-item">
|
||||
<div class="padding">
|
||||
<b>Variabilný symbol:</b>
|
||||
<span>{{ $invoice->variable_number }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="special-item">
|
||||
<div class="padding">
|
||||
<b>Dátum splatnosti:</b>
|
||||
<span>{{ format_date($invoice->due_at, '%d. %B. %Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="special-item">
|
||||
<div class="padding">
|
||||
<b>Suma na úhradu:</b>
|
||||
<span>{{ format_to_currency($invoice->total_net) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user