mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-11 05:32:39 +01:00
254 lines
7.6 KiB
HTML
254 lines
7.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<!-- Basic Statement Design -->
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
font-family: $font_name, Helvetica, sans-serif;
|
||
|
|
font-size: $font_sizepx !important;
|
||
|
|
zoom: 80%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@page {
|
||
|
|
margin: 0 !important;
|
||
|
|
size: $page_size $page_layout;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
line-height: 1.5;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
margin-top: 2rem;
|
||
|
|
min-width: 100%;
|
||
|
|
table-layout: fixed;
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
th {
|
||
|
|
text-align: center;
|
||
|
|
padding-left: 6px;
|
||
|
|
padding-right: 6px;
|
||
|
|
padding-top: 6px;
|
||
|
|
padding-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
text-align: center;
|
||
|
|
padding-left: 6px;
|
||
|
|
padding-right: 6px;
|
||
|
|
padding-top: 6px;
|
||
|
|
padding-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-row {
|
||
|
|
border-bottom: 1px #000 dotted;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals-row-label {
|
||
|
|
text-align: right;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.totals-row-value {
|
||
|
|
text-align: right;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-totals {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 2fr 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.entity-container {
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
border: 0px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.entity-container h2 {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
padding-right: 5px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.label {
|
||
|
|
text-align: right;
|
||
|
|
padding: 0;
|
||
|
|
margin-right: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.value {
|
||
|
|
text-align: left;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.two-col-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
borderx: 1px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
#statement-details {
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#client-details {
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#company-details {
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="two-col-grid">
|
||
|
|
<div id="client-details"></div>
|
||
|
|
<div id="company-details"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Details -->
|
||
|
|
<div class="two-col-grid">
|
||
|
|
<div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="statement-details">
|
||
|
|
<ninja>
|
||
|
|
<h2>{{ t('statement') }}</h2>
|
||
|
|
<p>$start_date - $end_date</p>
|
||
|
|
</ninja>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<ninja>
|
||
|
|
{% if invoices|e %}
|
||
|
|
<div class="entity-container">
|
||
|
|
<h2>{{ t('invoices') }}<h2>
|
||
|
|
<table width="100%" cellspacing="0" cellpadding="0" class="">
|
||
|
|
<thead class="">
|
||
|
|
<tr class="">
|
||
|
|
<th class="">{{ t('invoice')}} #</th>
|
||
|
|
<th class="">{{ t('invoice_date') }}</th>
|
||
|
|
<th class="">{{ t('invoice_due_date') }}</th>
|
||
|
|
<th class="">{{ t('total') }}</th>
|
||
|
|
<th class="">{{ t('balance') }}</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{% for invoice in invoices %}
|
||
|
|
<tr class="item-row">
|
||
|
|
<td class="">{{ invoice.number }}</td>
|
||
|
|
<td class="">{{ invoice.date }}</td>
|
||
|
|
<td class="">{{ invoice.due_date }}</td>
|
||
|
|
<td class="">{{ invoice.amount }}</td>
|
||
|
|
<td class="">{{ invoice.balance }}</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</ninja>
|
||
|
|
|
||
|
|
<ninja>
|
||
|
|
{% if payments|e %}
|
||
|
|
<div class="entity-container">
|
||
|
|
<h2>{{ t('payments') }}<h2>
|
||
|
|
<table width="100%" cellspacing="0" cellpadding="0" class="">
|
||
|
|
<thead class="">
|
||
|
|
<tr class="">
|
||
|
|
<th class="">{{ t('invoice') }} #</th>
|
||
|
|
<th class="">{{ t('payment_date') }}</th>
|
||
|
|
<th class="">{{ t('method') }}</th>
|
||
|
|
<th class="">{{ t('amount') }}</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{% for payment in payments %}
|
||
|
|
<tr class="item-row">
|
||
|
|
<td class="">{{ payment.number }}</td>
|
||
|
|
<td class="">{{ payment.date }}</td>
|
||
|
|
{%if payment.is_credit %}
|
||
|
|
<td class="">Credit {{ payment.number }}</td>
|
||
|
|
{%else%}
|
||
|
|
<td class="">{{ payment.method }}</td>
|
||
|
|
{%endif%}
|
||
|
|
<td class="">{{ payment.amount }}</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</ninja>
|
||
|
|
|
||
|
|
<ninja>
|
||
|
|
{% if credits|e %}
|
||
|
|
<div class="entity-container">
|
||
|
|
<h2>Credits<h2>
|
||
|
|
<table width="100%" cellspacing="0" cellpadding="0" class="">
|
||
|
|
<thead class="">
|
||
|
|
<tr class="">
|
||
|
|
<th class="">{{ t('credit') }} #</th>
|
||
|
|
<th class="">{{ t('credit_date') }}</th>
|
||
|
|
<th class="">{{ t('total') }}</th>
|
||
|
|
<th class="">{{ t('balance') }}</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{% for credit in credits %}
|
||
|
|
<tr class="item-row">
|
||
|
|
<td class="">{{ credit.number }}</td>
|
||
|
|
<td class="">{{ credit.date }}</td>
|
||
|
|
<td class="">{{ credit.amount }}</td>
|
||
|
|
<td class="">{{ credit.balance }}</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</ninja>
|
||
|
|
|
||
|
|
<ninja>
|
||
|
|
{% if aging %}
|
||
|
|
<div class="entity-container">
|
||
|
|
<h2>{{ t('aging') }}<h2>
|
||
|
|
<table width="100%" cellspacing="0" cellpadding="0" class="">
|
||
|
|
<thead class="">
|
||
|
|
<tr class="">
|
||
|
|
{% for key, age in aging %}
|
||
|
|
<th class="">{{ key }}</th>
|
||
|
|
{% endfor %}
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr class="item-row">
|
||
|
|
{% for key, age in aging %}
|
||
|
|
<td>{{ age }}</td>
|
||
|
|
{% endfor %}
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</ninja>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|