Default Invoice Template - 5(Document)
Header
<div style="margin: 10px 40px; padding-top: 80px">
<table align="left" border="0" style="width: 100%;">
<tbody>
<tr>
<td style="width: 343px;" valign="top">
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 346px;">
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle; height: 80px; background-color: rgb(0, 191, 165); width: 336px;">
<h1>
<strong>INVOICE</strong>
</h1>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="1" cellspacing="1" style="width: 342px;">
<tbody>
<tr>
<td style="width: 164px;">Invoice date:<br/>
<strong>{{ invoice.date|date("jS F Y") }}</strong>
</td>
<td style="width: 164px;">Invoice number:<br/>
<strong>#{{ invoice.number }}</strong>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="1" cellspacing="1" style="width: 342px;">
<tbody>
<tr>
<td style="width: 164px;">Customer name:<br/>
<strong>{{ invoice.clientContact.name }}</strong>
</td>
<td style="width: 164px;">Customer number:<br/>
<strong>{{ invoice.clientContact.number }}</strong>
</td>
</tr>
</tbody>
</table>
<br/>
Customer address:<br/>
<strong>{{ invoice.clientContact.PostalAddress.addressText|raw }}</strong><br/>
<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody>
<tr>
<td style="width: 164px;">Animal name:<br/>
<strong>{{ invoice.animal.name }}</strong>
</td>
<td style="width: 164px;">Animal DOB:<br/>
<strong>{{ invoice.animal.dateOfBirth|date("jS F Y") }}</strong>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 399px;" valign="top">
<div style="text-align: right;"><img src="{{ templatesettings.logoLocation }}"/></div>
<p><br/>
<br/>
From:<br/>
<strong>{{ business.name }}</strong><br/>
<strong>{{ business.postalAddress.addressText|raw }}</strong><br/>
</p>
<table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody>
<tr>
<td style="width: 33%;">Phone:<br/>
<strong>{{ business.phoneNumber }}</strong>
</td>
<td style="width: 33%;">Fax:<br/>
<strong>{{ business.faxNumber }}</strong>
</td>
<td style="width: 33%;">Email:<br/>
<strong>{{ business.businessEmail }}</strong>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>Body
<style>
type="text/css"
th,
td {
text-align: left;
padding: 6px;
}
hr {
height: 2px;
border-width: 0;
color: #00bfa5;
background-color: #00bfa5;
}
.heading tr td {
border-bottom: 2px solid #ccc;
}
.summary tr td {
font-size: 11px
}
</style>
<div style="margin: 0 40px;">
<hr/>
<table style="width: 1041px; border-bottom: 2px solid #ccc">
<thead class="heading">
<tr>
<td style="text-align: left; float: left; width: 205px; height: 40px; color:#000000; padding-left: 10px">
<span style="font-size:14px;">
<b>Description</b>
</span>
</td>
<td style="text-align: left; float: left; width: 130px;color:#000000;">
<span style="font-size:14px;">
<b>Staff Member</b>
</span>
</td>
<td style="text-align: left; float: left; width: 65px;color:#000000;">
<span style="font-size:14px;">
<b>Qty</b>
</span>
</td>
{% if invoice.hasDiscounts %}
<td style="text-align: left; float: left; width: 80px;color:#000000;">
<span style="font-size:14px;">
<b>Price</b>
</span>
</td>
<td style="text-align: left; float: left; width: 80px;color:#000000;">
<span style="font-size:14px;">
<b>Discount</b>
</span>
</td>
<td style="text-align: left; float: left; width: 80px;color:#000000;">
<span style="font-size:14px;">
<b>Discount (%)</b>
</span>
</td>
{% endif %}
<td style="text-align: right; float: left; width: 100px; color: rgb(0, 0, 0); padding-right: 10px;">
<span style="font-size:14px;">
<b>Total</b>
</span>
</td>
</tr>
</thead>
<tbody class="lines">
{% for invoiceline in invoice.lineItems %}
{% if invoiceline.isHeaderLine and not invoiceline.hasHeaderLine %}
<tr>
<td>{{ invoiceline.product.name }}</td>
<td>{{ invoiceline.salesPerson.name }}</td>
<td>{{ invoiceline.quantity }}</td>
{% if invoice.hasDiscounts %}
<td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if invoiceline.totalDiscount(true) > 0 %}
<td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td>
<td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td></td>
<td></td>
{% endif %}
{% endif %}
<td style=" text-align: right; width: 223px;">{{ invoiceline.total(true)|moneyformat }}</td>
</tr>
{% if invoiceline.printContained %}
{% for subinvoiceline in invoiceline.nestedLines %}
<tr>
<td style="font-style: italic; color:#555;"> {{ subinvoiceline.product.name }}</td>
<td style="font-style: italic; color:#555;">{{ subinvoiceline.salesPerson.name }}</td>
<td style="font-style: italic; color:#555;">{{ subinvoiceline.quantity }}</td>
{% if invoiceline.printContainedPrices %}
{% if invoice.hasDiscounts %}
<td style="font-style: italic; color:#555;">{{ subinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if subinvoiceline.totalDiscount(true) > 0 %}
<td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscount(true)|moneyformat }}</td>
<td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td style="font-style: italic; color:#555;"></td>
<td style="font-style: italic; color:#555;"></td>
{% endif %}
{% endif %}
{% endif %}
<td style="text-align:right;font-style: italic; color:#555;">
{% if invoiceline.printContainedPrices %}
{{ subinvoiceline.total(true)|moneyformat }}
{% endif %}
</td>
</tr>
{% if subinvoiceline.isHeaderline %}
{% if subinvoiceline.printContained %}
{% for subsubinvoiceline in subinvoiceline.nestedLines %}
<tr>
<td style="font-style: italic; color:#555;"> {{ subsubinvoiceline.product.name }}</td>
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.salesPerson.name }}</td>
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.quantity }}</td>
{% if subinvoiceline.printContainedPrices %}
{% if invoice.hasDiscounts %}
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if subsubinvoiceline.totalDiscount(true) > 0 %}
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscount(true)|moneyformat }}</td>
<td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td style="font-style: italic; color:#555;"></td>
<td style="font-style: italic; color:#555;"></td>
{% endif %}
{% endif %}
{% endif %}
<td style="text-align:right;font-style: italic; color:#555;">
{% if subinvoiceline.printContainedPrices %}
{{ subsubinvoiceline.total(true)|moneyformat }}
{% endif %}
</td>
</tr>
{% if subsubinvoiceline.isHeaderline %}
{% if subsubinvoiceline.printContained %}
{% for subsubsubinvoiceline in subsubinvoiceline.nestedLines %}
<tr>
<td style="font-style: italic; color:#555;"> {{ subsubsubinvoiceline.product.name }}</td>
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.salesPerson.name }}</td>
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.quantity }}</td>
{% if subsubinvoiceline.printContainedPrices %}
{% if invoice.hasDiscounts %}
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if subsubsubinvoiceline.totalDiscount(true) > 0 %}
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscount(true)|moneyformat }}</td>
<td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td style="font-style: italic; color:#555;"></td>
<td style="font-style: italic; color:#555;"></td>
{% endif %}
{% endif %}
{% endif %}
<td style="text-align:right;font-style: italic; color:#555;">
{% if subsubinvoiceline.printContainedPrices %}
{{ subsubsubinvoiceline.total(true)|moneyformat }}
{% endif %}
</td>
</tr>
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% elseif not invoiceline.hasHeaderLine %}
<tr>
<td>{{ invoiceline.product.name }}</td>
<td>{{ invoiceline.salesPerson.name }}</td>
<td>{{ invoiceline.quantity }}</td>
{% if invoice.hasDiscounts %}
<td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td>
{% if invoiceline.totalDiscount(true) > 0 %}
<td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td>
<td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td>
{% else %}
<td></td>
<td></td>
{% endif %}
{% endif %}
<td style="text-align:right;">{{ invoiceline.total(true)|moneyformat }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="1" style="margin-left: auto; width: 267px;">
<tbody class="summary">
<tr>
<td style="width: 103px; padding-top: 20px;">Subtotal:</td>
<td style="width: 123px; text-align: right; padding-right: 15px; padding-top: 20px;">
<strong>{{ invoice.subTotal|moneyformat }}</strong>
</td>
</tr>
{% if invoice.includesTax %}
<tr>
<td style="width: 103px;">Including tax:</td>
<td style="width: 123px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.total|moneyformat }}</strong>
</td>
</tr>
{% endif %}
{% if invoice.hasDiscounts %}
<tr>
<td style="width: 103px;">Discount:</td>
<td style="width: 123px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.totalDiscountAmountIncTax|moneyformat }}</strong>
</td>
</tr>
{% endif %}
<tr>
<td style="width: 103px;">Total:</td>
<td style="width: 123px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.total|moneyformat }}</strong>
</td>
</tr>
{% if invoice.paymentMethods %}
<tr>
<td style="width: 103px;">Payment method:</td>
<td style="width: 123px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.paymentMethods }}</strong>
</td>
</tr>
{% endif %}
<tr>
<td style="width: 103px;">Amount paid:</td>
<td style="width: 123px; text-align: right; padding-right: 15px;">
<strong>{{ invoice.paid|moneyformat }}</strong>
</td>
</tr>
<tr>{% set balance = invoice.total - invoice.paid %}
<td style="width: 103px; padding-bottom: 30px;">Balance:</td>
<td style="width: 123px; text-align: right; padding-right: 15px; padding-bottom: 30px;">
<strong>{{ balance|moneyformat }}</strong>
</td>
</tr>
</tbody>
</table>
</div>