mirror of
https://github.com/kevinpapst/kimai2.git
synced 2025-04-07 14:35:47 +00:00
invoice template improvement
This commit is contained in:
parent
b10bcbbf06
commit
1299d990c7
8 changed files with 84 additions and 81 deletions
assets/sass
public/build
templates/invoice/renderer
|
@ -8,7 +8,7 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 10pt;
|
||||
margin: 0;
|
||||
margin: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
table, tr, td, th, p, h1, h2, h3, h4, h5 {
|
||||
|
@ -34,6 +34,9 @@ p {
|
|||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
@ -46,9 +49,6 @@ p {
|
|||
text-align: right;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.wrapper {
|
||||
margin: 4px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
|
@ -77,7 +77,7 @@ table.footer {
|
|||
line-height: 14px;
|
||||
}
|
||||
table.footer td {
|
||||
vertical-align: bottom;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* The invoice items list */
|
||||
table.items {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,10 +3,10 @@
|
|||
"app": {
|
||||
"js": [
|
||||
"build/runtime.fb9c99a2.js",
|
||||
"build/app.29289741.js"
|
||||
"build/app.efb35131.js"
|
||||
],
|
||||
"css": [
|
||||
"build/app.ffbe0133.css"
|
||||
"build/app.be913907.css"
|
||||
]
|
||||
},
|
||||
"invoice": {
|
||||
|
@ -15,7 +15,7 @@
|
|||
"build/invoice.c8ae95ad.js"
|
||||
],
|
||||
"css": [
|
||||
"build/invoice.976047d9.css"
|
||||
"build/invoice.7abcff08.css"
|
||||
]
|
||||
},
|
||||
"invoice-pdf": {
|
||||
|
@ -24,7 +24,7 @@
|
|||
"build/invoice-pdf.d86b82ee.js"
|
||||
],
|
||||
"css": [
|
||||
"build/invoice-pdf.b6dc0d9e.css"
|
||||
"build/invoice-pdf.48504f5f.css"
|
||||
]
|
||||
},
|
||||
"chart": {
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
body{font-family:sans-serif;font-size:10pt}body,h1,h2,h3,h4,h5,p,table,td,th,tr{margin:0;padding:0}th{border:none;text-align:left}td{vertical-align:top}p{margin-bottom:12px}.text-small{font-size:7pt}.padding-left{padding-left:15px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-nowrap{white-space:nowrap}.date{color:#666;font-size:80%;text-align:right;padding-top:6px}.wrapper{margin:4px}table{width:100%;border-spacing:0}p,table.addresses{line-height:14pt}table.addresses{margin-bottom:30px}table.header{padding-bottom:4px;border-bottom:1px solid #999}table.header .title{font-weight:400;font-size:140%}table.footer{border-top:1px solid #999;font-size:80%;padding-top:8px;line-height:14px}table.footer td{vertical-align:top}table.items{border-collapse:collapse;margin-top:50px;margin-bottom:60px}table.items tbody td,table.items thead th{border-bottom:1px solid #ccc}table.items tbody td.first,table.items thead th.first{padding-left:0}table.items tbody td.last,table.items tfoot td.last,table.items thead th.last{padding-right:0}table.items td,table.items th{padding:8px 6px}table.items tfoot td,table.items tfoot th{padding:20px 0 0;line-height:1px}table.items tfoot td.last{padding-left:10px}table.items tr.odd{background-color:#f5f5f5}
|
File diff suppressed because one or more lines are too long
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"build/app.css": "build/app.ffbe0133.css",
|
||||
"build/app.js": "build/app.29289741.js",
|
||||
"build/invoice.css": "build/invoice.976047d9.css",
|
||||
"build/app.css": "build/app.be913907.css",
|
||||
"build/app.js": "build/app.efb35131.js",
|
||||
"build/invoice.css": "build/invoice.7abcff08.css",
|
||||
"build/invoice.js": "build/invoice.c8ae95ad.js",
|
||||
"build/invoice-pdf.css": "build/invoice-pdf.b6dc0d9e.css",
|
||||
"build/invoice-pdf.css": "build/invoice-pdf.48504f5f.css",
|
||||
"build/invoice-pdf.js": "build/invoice-pdf.d86b82ee.js",
|
||||
"build/chart.js": "build/chart.3065c87d.js",
|
||||
"build/calendar.css": "build/calendar.9f5b3d41.css",
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}{{ model.invoiceNumber }}-{{ model.customer.company|default(model.customer.name)|u.snake }}{% endblock %}</title>
|
||||
<style type="text/css">
|
||||
<style>
|
||||
{{ encore_entry_css_source('invoice-pdf')|raw }}
|
||||
</style>
|
||||
</head>
|
||||
|
@ -19,7 +19,7 @@
|
|||
<td class="title">
|
||||
{{ model.template.title }}
|
||||
</td>
|
||||
<td class="date text-end">
|
||||
<td class="date text-right">
|
||||
{{ 'label.date'|trans }}: {{ model.invoiceDate|date_short }}
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -44,10 +44,9 @@
|
|||
</htmlpagefooter>
|
||||
<sethtmlpagefooter page="ALL" value="on" name="footer" show-this-page="1" />
|
||||
mpdf-->
|
||||
<div class="wrapper">
|
||||
<table class="addresses">
|
||||
<tr>
|
||||
<td width="60%">
|
||||
<td style="width:60%">
|
||||
{{ 'invoice.to'|trans }}
|
||||
<br>
|
||||
<strong>{{ model.customer.company|default(model.customer.name) }}</strong>
|
||||
|
@ -57,14 +56,6 @@ mpdf-->
|
|||
<br>
|
||||
{{ 'label.vat_id'|trans }}: {{ model.customer.vatId }}
|
||||
{% endif %}
|
||||
{% if model.customer.number is not empty %}
|
||||
<br>
|
||||
{{ 'label.number'|trans }}: {{ model.customer.number }}
|
||||
{% endif %}
|
||||
{% if model.query.project is not empty and model.query.project.orderNumber is not empty %}
|
||||
<br>
|
||||
{{ 'label.orderNumber'|trans }}: {{ model.query.project.orderNumber }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{{ 'invoice.from'|trans }}
|
||||
|
@ -82,12 +73,24 @@ mpdf-->
|
|||
</table>
|
||||
|
||||
<p>
|
||||
<strong>{{ 'invoice.number'|trans }}:</strong>
|
||||
{{ 'invoice.number'|trans }}:
|
||||
{{ model.invoiceNumber }}
|
||||
|
||||
<br>
|
||||
<strong>{{ 'invoice.due_days'|trans }}:</strong>
|
||||
{{ 'invoice.due_days'|trans }}:
|
||||
{{ model.dueDate|date_short }}
|
||||
|
||||
{% if model.customer.number is not empty %}
|
||||
<br>
|
||||
{{ 'label.number'|trans }}:
|
||||
{{ model.customer.number }}
|
||||
{% endif %}
|
||||
|
||||
{% if model.query.project is not empty and model.query.project.orderNumber is not empty %}
|
||||
<br>
|
||||
{{ 'label.orderNumber'|trans }}:
|
||||
{{ model.query.project.orderNumber }}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<table class="items">
|
||||
|
@ -95,9 +98,9 @@ mpdf-->
|
|||
<tr>
|
||||
<th class="first"><strong>{{ 'label.date'|trans }}</strong></th>
|
||||
<th><strong>{{ 'label.description'|trans }}</strong></th>
|
||||
<th class="text-end"><strong>{{ 'label.unit_price'|trans }}</strong></th>
|
||||
<th class="text-end"><strong>{{ 'label.amount'|trans }}</strong></th>
|
||||
<th class="last text-end"><strong>{{ 'label.total_rate'|trans }}</strong></th>
|
||||
<th class="text-right"><strong>{{ 'label.unit_price'|trans }}</strong></th>
|
||||
<th class="text-right"><strong>{{ 'label.amount'|trans }}</strong></th>
|
||||
<th class="last text-right"><strong>{{ 'label.total_rate'|trans }}</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -110,7 +113,7 @@ mpdf-->
|
|||
{% else %}
|
||||
{% set rate = entry.hourlyRate %}
|
||||
{% endif %}
|
||||
<tr{# class="{{ cycle(['odd', 'even'], id) }}"#}>
|
||||
<tr>
|
||||
<td nowrap class="first text-nowrap">{{ entry.begin|date_short }}</td>
|
||||
<td contenteditable="true">
|
||||
{% if entry.description is not empty %}
|
||||
|
@ -119,30 +122,30 @@ mpdf-->
|
|||
{% if entry.activity is not null %}{{ entry.activity.name }} / {% endif %}{{ entry.project.name }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td nowrap class="text-nowrap text-end">{{ rate|money(currency) }}</td>
|
||||
<td nowrap class="text-nowrap text-end">{{ duration }}</td>
|
||||
<td nowrap class="last text-nowrap text-end">{{ entry.rate|money(currency) }}</td>
|
||||
<td nowrap class="text-nowrap text-right">{{ rate|money(currency) }}</td>
|
||||
<td nowrap class="text-nowrap text-right">{{ duration }}</td>
|
||||
<td nowrap class="last text-nowrap text-right">{{ entry.rate|money(currency) }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4" class="text-end">
|
||||
<td colspan="4" class="text-right">
|
||||
{{ 'invoice.subtotal'|trans }}
|
||||
</td>
|
||||
<td class="last text-end">{{ model.calculator.subtotal|money(currency) }}</td>
|
||||
<td class="last text-right">{{ model.calculator.subtotal|money(currency) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="text-end">
|
||||
<td colspan="4" class="text-right">
|
||||
{{ 'invoice.tax'|trans }} ({{ model.calculator.vat }}%)
|
||||
</td>
|
||||
<td class="last text-end">{{ model.calculator.tax|money(currency) }}</td>
|
||||
<td class="last text-right">{{ model.calculator.tax|money(currency) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="text-end text-nowrap">
|
||||
<td colspan="4" class="text-right text-nowrap">
|
||||
<strong>{{ 'invoice.total'|trans }}</strong>
|
||||
</td>
|
||||
<td class="last text-end">
|
||||
<td class="last text-right">
|
||||
<strong>{{ model.calculator.total|money(currency) }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -154,6 +157,5 @@ mpdf-->
|
|||
{{ model.template.paymentTerms|md2html }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}{{ model.invoiceNumber }}-{{ model.customer.company|default(model.customer.name)|u.snake }}{% endblock %}</title>
|
||||
<style type="text/css">
|
||||
<style>
|
||||
{{ encore_entry_css_source('invoice-pdf')|raw }}
|
||||
</style>
|
||||
</head>
|
||||
|
@ -18,8 +18,11 @@
|
|||
<tr>
|
||||
<td class="text-small">
|
||||
{{ model.template.company }} – {{ model.template.address|nl2str(' – ') }}
|
||||
{% if model.template.vatId is not empty %}
|
||||
– {{ 'label.vat_id'|trans }}: {{ model.template.vatId }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-small text-end">
|
||||
<td class="text-small text-right">
|
||||
{{ 'export.page_of'|trans({'%page%': '{PAGENO}', '%pages%': '{nb}'}) }}
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -40,7 +43,7 @@
|
|||
<br>
|
||||
{{ model.template.paymentDetails|nl2br }}
|
||||
</td>
|
||||
<td class="text-end" style="width: 33%">
|
||||
<td class="text-right" style="width: 33%">
|
||||
<strong>{{ 'label.contact'|trans }}</strong>
|
||||
<br>
|
||||
{{ model.template.contact|nl2br }}
|
||||
|
@ -50,45 +53,48 @@
|
|||
</htmlpagefooter>
|
||||
<sethtmlpagefooter page="ALL" value="on" name="footer" show-this-page="1" />
|
||||
mpdf-->
|
||||
<div class="wrapper">
|
||||
<table class="addresses">
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ model.customer.company|default(model.customer.name) }}</strong><br>
|
||||
{{ model.customer.address|nl2br }}
|
||||
{% if model.customer.vatId is not empty %}
|
||||
<br>
|
||||
{{ 'label.vat_id'|trans }}: {{ model.customer.vatId }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<td class="text-right">
|
||||
{% set classLeft = 'text-left' %}
|
||||
{% set classRight = 'text-right text-nowrap padding-left' %}
|
||||
<table style="width: 240px">
|
||||
<tr>
|
||||
<td>{{ 'label.date'|trans }}:</td>
|
||||
<td class="text-nowrap padding-left">{{ model.invoiceDate|date_short }}</td>
|
||||
<td class="{{ classLeft }}">{{ 'label.date'|trans }}</td>
|
||||
<td class="{{ classRight }}">{{ model.invoiceDate|date_short }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'invoice.service_date'|trans }}:</td>
|
||||
<td class="text-nowrap padding-left">{{ model.query.end|month_name }} {{ model.query.end|date('Y') }}</td>
|
||||
<td class="{{ classLeft }}">{{ 'invoice.service_date'|trans }}</td>
|
||||
<td class="{{ classRight }}">{{ model.query.end|month_name }} {{ model.query.end|date('Y') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'invoice.number'|trans }}:</td>
|
||||
<td class="text-nowrap padding-left">{{ model.invoiceNumber }}</td>
|
||||
<td class="{{ classLeft }}">{{ 'invoice.number'|trans }}</td>
|
||||
<td class="{{ classRight }}">{{ model.invoiceNumber }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ 'invoice.due_days'|trans }}:</td>
|
||||
<td class="text-nowrap padding-left">{{ model.dueDate|date_short }}</td>
|
||||
<td class="{{ classLeft }}">{{ 'invoice.due_days'|trans }}</td>
|
||||
<td class="{{ classRight }}">{{ model.dueDate|date_short }}</td>
|
||||
</tr>
|
||||
{% if model.query.project is not empty and model.query.project.orderNumber is not empty %}
|
||||
{% if model.customer.number is not empty %}
|
||||
<tr>
|
||||
<td>{{ 'label.orderNumber'|trans }}</td>
|
||||
<td class="text-nowrap padding-left">{{ model.query.project.orderNumber }}</td>
|
||||
<td class="{{ classLeft }}">{{ 'label.number'|trans }}</td>
|
||||
<td class="{{ classRight }}">{{ model.customer.number }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if model.template.vatId is not empty %}
|
||||
{% if model.query.project is not empty and model.query.project.orderNumber is not empty %}
|
||||
<tr>
|
||||
<td>{{ 'label.vat_id'|trans }}:</td>
|
||||
<td class="text-nowrap padding-left">{{ model.template.vatId }}</td>
|
||||
<td class="{{ classLeft }}">{{ 'label.orderNumber'|trans }}</td>
|
||||
<td class="{{ classRight }}">{{ model.query.project.orderNumber }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if model.customer.vatId is not empty %}
|
||||
<tr>
|
||||
<td class="{{ classLeft }}">{{ 'label.vat_id'|trans }}</td>
|
||||
<td class="{{ classRight }}">{{ model.customer.vatId }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
|
@ -102,9 +108,9 @@ mpdf-->
|
|||
<thead>
|
||||
<tr>
|
||||
<th class="first">{{ 'label.description'|trans }}</th>
|
||||
<th class="text-end">{{ 'label.unit_price'|trans }}</th>
|
||||
<th class="text-end">{{ 'label.amount'|trans }}</th>
|
||||
<th class="last text-end">{{ 'label.total_rate'|trans }}</th>
|
||||
<th class="text-right">{{ 'label.unit_price'|trans }}</th>
|
||||
<th class="text-right">{{ 'label.amount'|trans }}</th>
|
||||
<th class="last text-right">{{ 'label.total_rate'|trans }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -126,30 +132,30 @@ mpdf-->
|
|||
{% if entry.activity is not null %}{{ entry.activity.name }} / {% endif %}{{ entry.project.name }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end text-nowrap">{{ rate|money(currency) }}</td>
|
||||
<td class="text-end text-nowrap">{{ duration }}</td>
|
||||
<td class="last text-end text-nowrap">{{ entry.rate|money(currency) }}</td>
|
||||
<td class="text-right text-nowrap">{{ rate|money(currency) }}</td>
|
||||
<td class="text-right text-nowrap">{{ duration }}</td>
|
||||
<td class="last text-right text-nowrap">{{ entry.rate|money(currency) }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3" class="text-end">
|
||||
<td colspan="3" class="text-right">
|
||||
{{ 'invoice.subtotal'|trans }}
|
||||
</td>
|
||||
<td class="last text-end">{{ model.calculator.subtotal|money(currency) }}</td>
|
||||
<td class="last text-right">{{ model.calculator.subtotal|money(currency) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="text-end">
|
||||
<td colspan="3" class="text-right">
|
||||
{{ 'invoice.tax'|trans }} ({{ model.calculator.vat }}%)
|
||||
</td>
|
||||
<td class="last text-end">{{ model.calculator.tax|money(currency) }}</td>
|
||||
<td class="last text-right">{{ model.calculator.tax|money(currency) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="text-end text-nowrap">
|
||||
<td colspan="3" class="text-right text-nowrap">
|
||||
<strong>{{ 'invoice.total'|trans }}</strong>
|
||||
</td>
|
||||
<td class="last text-end">
|
||||
<td class="last text-right">
|
||||
<strong>{{ model.calculator.total|money(currency) }}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -161,6 +167,5 @@ mpdf-->
|
|||
{{ model.template.paymentTerms|md2html }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Add table
Reference in a new issue