BUSINESS Documentation

component.invoice

invoice

Live Example
Logo
Note:
This page is optimized for print. Try print the invoice and check out the preview. For example, this note will not be visible.

#12345678 / 01 Feb 2014

Company information

Apple Inc.

1 Infinite Loop
Cupertino, CA 95014
408.996.1010
e-mail: company@mybiz.com
phone: (012) 345-678-901
fax: (012) 678-132-901

Client information

John Doe

Business manager at Business
e-mail: john.doe@mybiz.com
phone: (012) 345-678-901
fax: (012) 678-132-901

Note:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.
No. Qty Price VAT TAX incl.
1
Product name goes here
Size: 3-4 Years Color: Blue Navy 		1 $1,000.00 $119.00 $1,119.00
2
Product name goes here
Size: 3-4 Years Color: Blue Navy 		1 $1,000.00 $119.00 $1,119.00
3
Product name goes here
Size: 3-4 Years Color: Blue Navy 		1 $1,000.00 $119.00 $1,119.00
4
Product name goes here
Size: 3-4 Years Color: Blue Navy 		1 $1,000.00 $119.00 $1,119.00

Note:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.

Subtotal: $1,000.00
Delivery: $5.00
VAT: $119.00
Total: $1,195.95 
<div id="pdfTarget">
	<div class="innerAll shop-client-products cart invoice">
		<table class="table table-invoice">
			<tbody>
				<tr>
					<td style="width: 58%;">
						<div class="media">
							<img class="media-object pull-left thumb" src="http://1.s3.envato.com/files/50438174/tf-avatar.jpg" alt="Logo" />
							<div class="media-body hidden-print">
								<div class="alert alert-primary margin-none">
									<strong>Note:</strong><br/>
									This page is optimized for print. Try print the invoice and check out the preview.
									For example, this note will not be visible.
								</div>
								<div class="separator bottom"></div>
							</div>
						</div>
					</td>
					<td class="right">
						<div class="innerL">
							<h4 class="separator bottom">#12345678 / 01 Feb 2014</h4>
							<button type="button" data-toggle="print" class="btn btn-default print hidden-print"><i class="fa fa-fw fa-print"></i> Print invoice</button>
							<button type="button" data-toggle="button-loading pdf" data-target="#pdfTarget" class="btn btn-primary hidden-print"><i class="fa fa-fw fa-download"></i> Save as PDF</button>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		
		<div class="box-generic">
			<table class="table table-invoice">
				<tbody>
					<tr>
						<td style="width: 50%;">
							<p class="lead">Company information</p>
							<h2>Apple Inc.</h2>
							<address class="margin-none">
								<strong>1 Infinite Loop</strong><br/>
								Cupertino, CA 95014<br/>
								408.996.1010<br/>
								<abbr title="Work email">e-mail:</abbr> <a href="mailto:#">company@mybiz.com</a><br /> 
								<abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br/>
								<abbr title="Work Fax">fax:</abbr> (012) 678-132-901
							</address>
						</td>
						<td class="right">
							<p class="lead">Client information</p>
							<h2>John Doe</h2>
							<address class="margin-none">
								<strong>Business manager</strong> at 
								<strong><a href="#">Business</a></strong><br> 
								<abbr title="Work email">e-mail:</abbr> <a href="mailto:#">john.doe@mybiz.com</a><br /> 
								<abbr title="Work Phone">phone:</abbr> (012) 345-678-901<br/>
								<abbr title="Work Fax">fax:</abbr> (012) 678-132-901
								<div class="separator line"></div>
								<p class="margin-none"><strong>Note:</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.</p>
							</address>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<table class="table table-bordered table-primary table-striped table-vertical-center">
			<thead>
				<tr>
					<th style="width: 1%;" class="center">No.</th>
					<th></th>
					<th style="width: 50px;">Qty</th>
					<th style="width: 80px;">Price</th>
					<th style="width: 80px;">VAT</th>
					<th style="width: 80px;">TAX incl.</th>
				</tr>
			</thead>
			<tbody>
			
								<!-- Cart item -->
				<tr>
					<td class="center">1</td>
					<td>
						<h5>Product name goes here</h5>
						Size: <span class="label label-default">3-4 Years</span>
						Color: <span class="label label-default">Blue Navy</span>
					</td>
					<td class="center">1</td>
					<td class="center">&dollar;1,000.00</td>
					<td class="center">&dollar;119.00</td>
					<td class="center">&dollar;1,119.00</td>
				</tr>
				<!-- // Cart item END -->
								<!-- Cart item -->
				<tr>
					<td class="center">2</td>
					<td>
						<h5>Product name goes here</h5>
						Size: <span class="label label-default">3-4 Years</span>
						Color: <span class="label label-default">Blue Navy</span>
					</td>
					<td class="center">1</td>
					<td class="center">&dollar;1,000.00</td>
					<td class="center">&dollar;119.00</td>
					<td class="center">&dollar;1,119.00</td>
				</tr>
				<!-- // Cart item END -->
								<!-- Cart item -->
				<tr>
					<td class="center">3</td>
					<td>
						<h5>Product name goes here</h5>
						Size: <span class="label label-default">3-4 Years</span>
						Color: <span class="label label-default">Blue Navy</span>
					</td>
					<td class="center">1</td>
					<td class="center">&dollar;1,000.00</td>
					<td class="center">&dollar;119.00</td>
					<td class="center">&dollar;1,119.00</td>
				</tr>
				<!-- // Cart item END -->
								<!-- Cart item -->
				<tr>
					<td class="center">4</td>
					<td>
						<h5>Product name goes here</h5>
						Size: <span class="label label-default">3-4 Years</span>
						Color: <span class="label label-default">Blue Navy</span>
					</td>
					<td class="center">1</td>
					<td class="center">&dollar;1,000.00</td>
					<td class="center">&dollar;119.00</td>
					<td class="center">&dollar;1,119.00</td>
				</tr>
				<!-- // Cart item END -->
								
			</tbody>
		</table>
		<div class="separator bottom hidden-print"></div>
		
		<!-- Row -->
		<div class="row">
		
			<!-- Column -->
			<div class="col-md-5 hidden-print">
				<div class="box-generic">
					<p class="margin-none"><strong>Note:</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc.</p>
				</div>
			</div>
			<!-- Column END -->
			
			<!-- Column -->
			<div class="col-md-4 col-md-offset-3">
				<div class="box-generic">
					<table class="table table-borderless margin-none table-condensed cart_total">
						<tbody>
							<tr>
								<td class="right border-none">Subtotal:</td>
								<td class="right strong border-none">&dollar;1,000.00</td>
							</tr>
							<tr>
								<td class="right">Delivery:</td>
								<td class="right strong">&dollar;5.00</td>
							</tr>
							<tr>
								<td class="right">VAT:</td>
								<td class="right strong">&dollar;119.00</td>
							</tr>
							<tr>
								<td class="right">Total:</td>
								<td class="right strong">&dollar;1,195.95</td>
							</tr>
							<tr class="hidden-print">
								<td colspan="2" class="border-none"><button type="submit" class="btn btn-block btn-primary"><i class="fa fa-fw fa-arrow-right"></i> Proceed to Payment</span></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- // Column END -->
			
		</div>
		<!-- // Row END -->
		
	</div>
</div>

Code

@import "assets/components/common/tables/classic/assets/less/tables.less";
@import "http://localhost/shared/components/modules/admin/invoice/assets/less/invoice.less";
@import "assets/components/common/ui/buttons/assets/buttons.less";
@import "http://localhost/shared/components/common/ui/alerts/assets/alerts.less";
@import "assets/components/core/less/labels.less";
@import "http://localhost/shared/components/common/widgets/widget-generic/assets/widget-generic.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files: 

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/invoice/assets/js/invoice.init.js?v=v1.0.2&sv=v0.0.1"></script>