Taxes
sandervanhooft opened this issue · 5 comments
@WesCossick et al,
I absolutely love the cleanliness of this template!
And would very much like to provide it by default in an update of my laravel-invoicable package.
For this to work I'd need to hack some tax fields in (percentage per product/line), and show a tax total.
Do you have some plans/suggestions for supporting this?
Sander
This can be done very easily, especially if you are familiar with HTML and tables. I've attached an example of what the outcome could be.
Here is the HTML I've used to make the corresponding layout:
https://pastebin.com/dFhfZNTx
(Ps. The class "p-0" is "padding: 0"
I've never posted on GH before so if this is not how to utilize a post effectively, sorry.
@Nachfolger1 Thanks for sharing!
I will include tax percentage per line as well. Hope to be able to look into this soon.
Will keep you posted.
Have fiddled around a bit. Current version below. Not final, because it's not rendered ok by dompdf.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your receipt</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
border-spacing: 0;
border-collapse: collapse;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td{
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
/*font-weight: bold;*/
}
.text-align-right {
text-align: right;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-box">
<table>
<tr class="top">
<td colspan="3">
<table>
<tr>
<td class="title">
Company name
</td>
<td>
Date: 2018-03-28<br>
Invoice ref.: 2018-03-28-GKSJWD
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="3">
<table>
<tr>
<td>
My Company<br>
123 Street<br>
Example City
</td>
<td>
Client name<br>
456 Street<br>
Client City
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>Item</td>
<td>Tax</td>
<td class="text-align-right">Price</td>
</tr>
<tr class="item">
<td>Et maiores consequatur nihil omnis.</td>
<td>21%</td>
<td class="text-align-right">€ 639,77</td>
</tr>
<tr class="item">
<td>Omnis omnis id sed mollitia sit.</td>
<td>21%</td>
<td class="text-align-right">€ 74,94</td>
</tr>
<tr class="item last">
<td>Libero minus repellendus nulla modi quisquam aut qui sint.</td>
<td>21%</td>
<td class="text-align-right">€ 761,92</td>
</tr>
<tr class="total">
<td></td>
<td colspan="2">
<b>Total: € 1.476,63</b><br />
Included tax: € 256,27
</td>
</tr>
</table>
</div>
</body>
</html>
@sandervanhooft I would recommend breaking down the total (Subtotal, Tax, Total) as the "included tax" message is confusing, but perhaps that's just my perception.
For about two months I tried my very best to generate a PDF directly from the HTML but I found that on some browsers the blur was just absolutely horrific and when it was printed, the resolution was messed up and looked cheesy. So I came up with two solutions:
- I used PDF generation libraries and wrote up my own invoice design, but used this invoice template for modifying and creating an invoice (For my employees to use). The libraries I used and love are:
- JsPDF (For client side generation and printing)
- FPDF (For server side generation, like sending an email copy)
- Then I also added CSS media print queries to make the invoice look flawless when printed from the browser. This solution is still not as good as designing an invoice with FPDF/JsPDF.
Thanks @Nachfolger1 !
But sometimes a good night sleep is all it takes (and a bit of fiddling around with the CSS :) ).
I narrowed the problem down to this line:
.invoice-box table {
width: 100%;
line-height: inherit; /* REMOVE THIS LINE */
text-align: left;
}
I removed it and both the html and pdf look great!
Not sure why it was in there. You?