Last active
August 29, 2015 14:22
-
-
Save theinventor/d0546d11ede2a2cd9b2d to your computer and use it in GitHub Desktop.
invoice template with account summary area (showing open balances)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head><meta http-equiv="Content-type" content="text/html; charset=utf-8"/> | |
| <title>RepairShopr Invoice Template 6</title> | |
| <style type="text/css">html, body { | |
| font-family: Arial, "Arial Unicode", "Arial Unicode MS", Helvetica, sans-serif; | |
| font-size: 12px; | |
| line-height: 16px; | |
| word-wrap: break-word; | |
| } | |
| .print-container { | |
| clear: both; | |
| /*Do something here with A4*/ | |
| padding: 54px 40px 72px 40px; | |
| z-index: 0; | |
| } | |
| .print-title { | |
| font-family: Arial, "Arial Unicode", "Arial Unicode MS", Helvetica, sans-serif; | |
| position: absolute; | |
| top: 0; | |
| margin-left: 0.5in; | |
| border: solid 1px #f1f1f1; | |
| padding: 3px 5px; | |
| } | |
| .clearb { | |
| clear: both; | |
| } | |
| .invheader { | |
| min-height: 230px; | |
| position: relative; | |
| } | |
| .invheader-upper { | |
| z-index: 10; | |
| position: relative; | |
| margin-left: 0.20in; | |
| min-height: 90px; | |
| } | |
| .invheader-lower { | |
| clear: both; | |
| margin-top: 20px; | |
| margin-left: 0.20in; | |
| min-height: 100px; | |
| } | |
| .invheader-address-account { | |
| float: left; | |
| width: 300px; | |
| margin-bottom: 20px; | |
| } | |
| .invheader-logo { | |
| float: right; | |
| } | |
| .invheader-logo-container { | |
| width: 250px; | |
| height: 90px; | |
| float: right; | |
| } | |
| .invheader-address-client { | |
| float: left; | |
| width: 300px; | |
| padding-bottom: 20px; | |
| } | |
| .invheader-invoicedetails { | |
| float: right; | |
| width: 300px; | |
| padding-bottom: 20px; | |
| padding-left: 20px; | |
| page-break-inside: avoid; | |
| } | |
| .invheader-invoicedetails table { | |
| width: 100%; | |
| } | |
| .invbody { | |
| clear: both; | |
| position: relative; | |
| overflow: auto; | |
| } | |
| .invheader, | |
| .invheader th, | |
| .invbody, | |
| .invbody .description, | |
| .invstub th, | |
| .invheader-invoicedetails th, | |
| .attachment-header th, { | |
| font-family: Arial, "Arial Unicode", "Arial Unicode MS", Helvetica, sans-serif; | |
| font-size: 12px; | |
| line-height: 18px; | |
| text-align: left; | |
| } | |
| .invheader-logo { | |
| text-align: center; | |
| font-size: 11px; | |
| line-height: 12px; | |
| } | |
| .attachment-image img { | |
| max-height: 9in; | |
| max-width: 100%; | |
| } | |
| .invheader-invoicedetails table th { | |
| width: 50%; | |
| font-weight: normal; | |
| white-space: nowrap; | |
| text-align: left; | |
| } | |
| .invheader-invoicedetails table td, | |
| .attachment-header td { | |
| text-align: right; | |
| font-family: Arial, "Arial Unicode", "Arial Unicode MS", Helvetica, sans-serif; | |
| font-size: 12px; | |
| line-height: 18px; | |
| } | |
| .invheader-invoicedetails th, .invheader-invoicedetails td { | |
| padding: 0px 5px; | |
| } | |
| .invheader-invoicedetails-balance th, .invheader-invoicedetails-balance td, | |
| .attachment-header th, .attachment-header td { | |
| background-color: #e5e5e5; | |
| border-top: solid 1px #c7c7c7; | |
| border-bottom: solid 1px #c7c7c7; | |
| padding: 0px; | |
| font-weight: bold; | |
| } | |
| .attachment-header td { | |
| font-weight: normal; | |
| } | |
| .attachment-header th, .attachment-header td { | |
| vertical-align: top; | |
| } | |
| .invheader-invoicedetails .invheader-invoicedetails-balance th, .attachment-header th { | |
| border-left: solid 1px #c7c7c7; | |
| } | |
| .invheader-invoicedetails .invheader-invoicedetails-balance td, .attachment-header td { | |
| border-right: solid 1px #c7c7c7; | |
| } | |
| .invheader-invoicedetails .invheader-invoicedetails-balance th div, .attachment-header th div { | |
| border-left: solid 1px #f1f1f1; | |
| border-top: solid 1px #f1f1f1; | |
| padding: 3px 5px; | |
| } | |
| .invheader-invoicedetails .invheader-invoicedetails-balance td div, .attachment-header td div { | |
| border-top: solid 1px #f1f1f1; | |
| padding: 3px 5px; | |
| } | |
| /* | |
| * TABLE | |
| */ | |
| .invbody-items { | |
| width: 100%; | |
| margin-bottom: 24px; | |
| } | |
| .invbody-items td, .invbody-expenses td, .invbody-timeentries td { | |
| vertical-align: top; | |
| } | |
| .invbody-items thead, .invbody-expenses thead, .invbody-timeentries thead { | |
| font-weight: bold; | |
| page-break-after: avoid; | |
| } | |
| .invbody-items tbody, .invbody-expenses tbody, .invbody-timeentries tbody { | |
| page-break-before: avoid; | |
| vertical-align: top; | |
| } | |
| .invbody-items td, .invbody-expenses td, .invbody-timeentries td { | |
| padding: 3px 0px 3px 2px; | |
| border-bottom: solid 1px #e5e5e5; | |
| } | |
| .invbody-items th, .invbody-expenses th, .invbody-timeentries th { | |
| background-color: #e3e3e3; | |
| line-height: normal; | |
| border-top: solid 1px #c7c7c7; | |
| border-bottom: solid 1px #c7c7c7; | |
| vertical-align: top; | |
| } | |
| .invbody-items th div, .invbody-expenses th div, .invbody-timeentries th div { | |
| padding: 5px 0; | |
| } | |
| .invbody-items th.first, .invbody-expenses th.first, .invbody-timeentries th.first { | |
| border-left: solid 1px #c7c7c7; | |
| } | |
| .invbody-items th.last, .invbody-expenses th.last, .invbody-timeentries th.last { | |
| border-right: solid 1px #c7c7c7; | |
| } | |
| /* | |
| * ITEMS TABLE | |
| */ | |
| .invbody-items thead .item { | |
| border-left: solid 1px #f1f1f1; | |
| border-top: solid 1px #f1f1f1; | |
| padding-left: 5px; | |
| text-align: left; | |
| } | |
| .invbody-items tbody .item { | |
| padding-left: 5px; | |
| text-align: left; | |
| } | |
| .invbody-items thead .description { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: left; | |
| } | |
| .invbody-items thead .unitcost { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: right; | |
| } | |
| .invbody-items tbody .unitcost { | |
| text-align: right; | |
| } | |
| .invbody-items thead .quantity { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: right; | |
| padding-right: 5px; | |
| } | |
| .invbody-items tbody .quantity { | |
| text-align: right; | |
| padding-right: 5px; | |
| } | |
| .invbody-items thead .linetotal { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: right; | |
| padding-right: 5px; | |
| } | |
| .invbody-items tbody .linetotal { | |
| text-align: right; | |
| padding-right: 5px; | |
| } | |
| /* | |
| * EXPENSE TABLE | |
| */ | |
| .invbody-expenses thead .description { | |
| border-left: solid 1px #f1f1f1; | |
| border-top: solid 1px #f1f1f1; | |
| padding-left: 5px; | |
| text-align: left; | |
| } | |
| .invbody-expenses tbody .description { | |
| padding-left: 5px; | |
| text-align: left; | |
| } | |
| .invbody-expenses thead .unitcost { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: right; | |
| } | |
| .invbody-expenses tbody .unitcost { | |
| text-align: right; | |
| } | |
| .invbody-expenses thead .quantity { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: right; | |
| } | |
| .invbody-expenses tbody .quantity { | |
| text-align: right; | |
| } | |
| .invbody-expenses thead .linetotal { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: right; | |
| padding-right: 5px; | |
| } | |
| .invbody-expenses tbody .linetotal { | |
| text-align: right; | |
| padding-right: 5px; | |
| } | |
| /* | |
| * TIME ENTRIES TABLE | |
| */ | |
| .invbody-timeentries thead .notes { | |
| border-left: solid 1px #f1f1f1; | |
| border-top: solid 1px #f1f1f1; | |
| padding-left: 5px; | |
| text-align: left; | |
| } | |
| .invbody-timeentries tbody .notes { | |
| padding-left: 5px; | |
| text-align: left; | |
| } | |
| .invbody-timeentries thead .rate { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: right; | |
| } | |
| .invbody-timeentries tbody .rate { | |
| text-align: right; | |
| } | |
| .invbody-timeentries thead .hours { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: right; | |
| } | |
| .invbody-timeentries tbody .hours { | |
| text-align: right; | |
| } | |
| .invbody-timeentries thead .linetotal { | |
| border-top: solid 1px #f1f1f1; | |
| text-align: right; | |
| padding-right: 5px; | |
| } | |
| .invbody-timeentries tbody .linetotal { | |
| text-align: right; | |
| padding-right: 5px; | |
| } | |
| /* | |
| * SUMMARY TABLE | |
| */ | |
| .invbody-summary { | |
| page-break-before: always; | |
| page-break-inside: avoid; | |
| min-height: 126px; | |
| clear: both; | |
| width: 100%; | |
| border-top: solid 3px #e3e3e3; | |
| margin-bottom: 18px; | |
| } | |
| .invbody-summary th { | |
| font-weight: normal; | |
| text-align: left; | |
| } | |
| .invbody-summary td { | |
| text-align: right; | |
| } | |
| .invbody-summary th, .invbody-summary td { | |
| padding: 0px 5px; | |
| } | |
| .invbody-summary .border { | |
| border-top: solid 1px #e5e5e5; | |
| padding-top: 3px; | |
| } | |
| .invbody-summary-paid td, .invbody-summary-paid th { | |
| padding-bottom: 3px; | |
| } | |
| .invbody-summary-subtotal td, .invbody-summary-subtotal th { | |
| padding-top: 3px; | |
| } | |
| .invbody-summary-discount td, .invbody-summary-discount th { | |
| padding-top: 3px; | |
| } | |
| .invbody-summary-total td, .invbody-summary-total th { | |
| background-color: #e5e5e5; | |
| border-top: solid 1px #c7c7c7; | |
| border-bottom: solid 1px #c7c7c7; | |
| padding: 0px; | |
| } | |
| .invbody-summary-total th { | |
| border-left: solid 1px #c7c7c7; | |
| } | |
| .invbody-summary-total td { | |
| border-right: solid 1px #c7c7c7; | |
| } | |
| .invbody-summary .invbody-summary-total th div { | |
| border-left: solid 1px #f1f1f1; | |
| border-top: solid 1px #f1f1f1; | |
| padding: 3px 5px; | |
| } | |
| .invbody-summary .invbody-summary-total td div { | |
| border-top: solid 1px #f1f1f1; | |
| padding: 3px 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="print-container"> | |
| <div class="invheader"> | |
| <div class="invheader-upper"> | |
| <div class="invheader-address-account">123 All Street<br /> | |
| Nashville, TN 98101<br /> | |
| myrepairshop.com<br /> | |
| 601-555-1212</div> | |
| <div class="invheader-logo-container">{{invoice_paid_stamp}} | |
| <div class="invheader-logo"><img src="/__logo_url__.png" style="max-height: 80px;" /></div> | |
| </div> | |
| </div> | |
| <div class="invheader-lower"> | |
| <div class="invheader-address-client">{{customer_business_name_or_customer_full_name}}<br /> | |
| {{customer_address}} {{customer_address_2}}<br /> | |
| {{customer_city}}, {{customer_state}} {{customer_zip}}</div> | |
| <div class="invheader-invoicedetails"> | |
| <table cellspacing="0"> | |
| <tbody> | |
| <tr> | |
| <th>Invoice #</th> | |
| <td>{{invoice_number}}</td> | |
| </tr> | |
| <tr> | |
| <th>Invoice Date</th> | |
| <td>{{invoice_date}}</td> | |
| </tr> | |
| <tr class="invheader-invoicedetails-balance"> | |
| <th> | |
| <div>Balance Due</div> | |
| </th> | |
| <td> | |
| <div>{{invoice_balance_due}}</div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="invbody"> | |
| <table cellspacing="0" class="invbody-items"> | |
| <thead> | |
| <tr> | |
| <th class="first"> | |
| <div class="item">Account Summary</div> | |
| </th> | |
| <th class="last"> | |
| <div class="linetotal">Amount</div> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody>{{invoice_account_summary_lines}} | |
| </tbody> | |
| </table> | |
| <div class="invbody"> | |
| <table cellspacing="0" class="invbody-items"> | |
| <thead> | |
| <tr> | |
| <th class="first"> | |
| <div class="item">Item</div> | |
| </th> | |
| <th> | |
| <div class="description">Description</div> | |
| </th> | |
| <th> | |
| <div class="unitcost">Unit Cost</div> | |
| </th> | |
| <th> | |
| <div class="quantity">Quantity</div> | |
| </th> | |
| <th class="last"> | |
| <div class="linetotal">Line Total</div> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody>{{invoice_line_items_table}} | |
| </tbody> | |
| </table> | |
| <div class="invbody-summary"> | |
| <div class="invheader-invoicedetails"> | |
| <table cellspacing="0"> | |
| <tbody> | |
| <tr> | |
| <th style="width: 150px;"><strong>Subtotal</strong></th> | |
| <td style="width: 120px;"><strong>{{invoice_subtotal}}</strong></td> | |
| </tr> | |
| <tr class="invbody-summary-paid"> | |
| <th style="width: 150px;">Tax</th> | |
| <td style="width: 120px;">{{invoice_tax}}</td> | |
| </tr> | |
| <tr class="invbody-summary-paid"> | |
| <th style="width: 150px;">Invoice Total</th> | |
| <td style="width: 120px;">{{invoice_total}}</td> | |
| </tr> | |
| <tr class="invbody-summary-paid"> | |
| <th style="width: 150px;">Payments</th> | |
| <td style="width: 120px;">{{invoice_payments_amount}}</td> | |
| </tr> | |
| <tr class="invbody-summary-paid"> | |
| <th style="width: 150px;">Credits</th> | |
| <td style="width: 120px;">{{invoice_misc_credits}}</td> | |
| </tr> | |
| <tr class="invbody-summary-total"> | |
| <th style="width: 150px;"> | |
| <div><strong>Balance Due</strong></div> | |
| </th> | |
| <td style="width: 120px;"> | |
| <div><strong>{{customer_open_balance}}</strong></div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <h2>Disclaimer</h2> | |
| <p><span>{{invoice_disclaimer}} </span></p> | |
| </div> | |
| <div class="clearb" style="height: 1px; overflow: hidden;"> </div> | |
| </div> | |
| <div>{{signature_line}}</div> | |
| <div style="text-align: center; padding: 20px;"><img src="http://barcody.herokuapp.com/barcodes/{{customer_phone}}.png" /></div> | |
| <div class="clearb"> </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment