0
0
Fork 0
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:
Kevin Papst 2022-03-19 02:34:06 +01:00
parent b10bcbbf06
commit 1299d990c7
8 changed files with 84 additions and 81 deletions

View file

@ -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

View file

@ -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": {

View file

@ -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

View file

@ -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",

View file

@ -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>

View file

@ -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 }} &ndash; {{ model.template.address|nl2str(' &ndash; ') }}
{% if model.template.vatId is not empty %}
&ndash; {{ '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>