Custom sales invoice

by Lubos Hasko

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div style="padding: 30px;">
    <!-- HEADER -->
    <div class="title">TAX INVOICE</div>
    <hr />
    <!-- CUSTOMER & BUSINESS DETAILS -->
    <div style="margin-top: 20px">
        <div class="pull-right" style="padding-left: 20px">
            <div data-bind="text: Seller" style="font-weight: bold"></div>
            <div data-bind="foreach: SellerContactDetails">
                <div data-bind="text: $data"></div>
            </div>
        </div>
        <div class="pull-right" style="padding-right: 20px; border-right: 1px solid #000">
            <div style="font-weight: bold; text-align: right">Issue Date</div>
            <div data-bind="text: IssueDate" style="text-align: right; margin-bottom: 10px"></div>
            <div style="font-weight: bold; text-align: right">Due Date</div>
            <div data-bind="text: DueDate" style="text-align: right; margin-bottom: 10px"></div>
            <div style="font-weight: bold; text-align: right">Invoice No.</div>
            <div data-bind="text: Number" style="text-align: right"></div>
        </div>
        <table>
            <tr>
                <td style="text-align: right; font-weight: bold; padding-right: 20px">To</td>
                <td data-bind="text: Customer"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div data-bind="foreach: CustomerAddressLines">
                        <div data-bind="text: $data"></div>
                    </div>
                </td>
            </tr>
        </table>
        <div style="clear: both"></div>
    </div>
    <!-- LINE ITEMS -->
    <div class="summary" data-bind="text: Summary"></div>
    <table class="lineItems">
        <thead>
            <tr>
                <th>Services</th>
                <th style="text-align:...

CSS

div.title {
    text-align: center;
    font-size: 24pt;
    font-weight: bold
}
hr {
    border-top: 1px solid #000
}
div.summary {
    font-size: 11pt;
    font-weight: bold;
    margin-top: 20px
}
table.lineItems {
    width: 100%;
    margin-top: 20px
}
table.lineItems th {
    border: 1px solid #000;
    padding: 5px 10px
}
table.lineItems td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 5px 10px
}
table.lineItems td.total-label {
    text-align: right;
    border-left: none;
}
table.lineItems td.total-amount {
    border: 1px solid #000;
    text-align: right
}
table.lineItems td.total-important {
    font-weight: bold;
}
table.lineItems tr.lastLineItem td {
    border-bottom: 1px solid #000
}

JavaScript

ko.applyBindings({
    Seller: 'ACME Corporation',
    SellerContactDetails: ['1313 Webfoot Walk', 'Duckburg', 'Calisota'],
    DueDate: '24/07/2014',
    IssueDate: '27/06/2014',
    Number: '1001',
    Customer: 'Brilliant Industries',
    CustomerAddressLines: ['1 York Street', 'Metropolis'],
    Summary: 'Professional services',
    Notes: ['Please by due date.', 'Thank you for your business.'],
    LineItems: [{
        Description: ['Financial planning'],
        Qty: '4',
        UnitPrice: '100.00',
        Discount: '',
        Tax: 'GST 10%',
        LineTotal: '400.00'
    }, {
        Description: ['Tax consulting'],
        Qty: '2',
        UnitPrice: '120.00',
        Discount: '',
        Tax: 'GST 10%',
        LineTotal: '240.00'
    }],
    LineItemsIncludeTax: false,
    Subtotal: '640.00',
    TaxComponents: [{
        Name: 'GST 10%',
        Amount: '64.00'
    }],
    Total: '704.00'
});