mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-18 14:22:35 +00:00
179 lines
7.7 KiB
HTML
179 lines
7.7 KiB
HTML
<div id="invoice" class="compact page-layout blank" fxLayout="row" fusePerfectScrollbar>
|
|
|
|
<div class="invoice-container">
|
|
|
|
<!-- INVOICE -->
|
|
<div class="card">
|
|
|
|
<div class="header">
|
|
<div class="invoice-date">{{invoice.date}}</div>
|
|
|
|
<div fxLayout="row" fxLayoutAlign="space-between stretch">
|
|
<div class="client">
|
|
<div class="invoice-number" fxLayout="row" fxLayoutAlign="start center">
|
|
<span class="title">INVOICE</span>
|
|
<span class="number">{{invoice.number}}</span>
|
|
</div>
|
|
|
|
<div class="due-date" fxLayout="row" fxLayoutAlign="start center">
|
|
<span class="title">DUE DATE</span>
|
|
<span class="date">{{invoice.dueDate}}</span>
|
|
</div>
|
|
|
|
<div class="info">
|
|
<div class="title">{{invoice.client.title}}</div>
|
|
<div *ngIf="invoice?.client.address" class="address">{{invoice.client.address}}</div>
|
|
<div *ngIf="invoice?.client.phone" class="phone">{{invoice.client.phone}}</div>
|
|
<div *ngIf="invoice?.client.email" class="email">{{invoice.client.email}}</div>
|
|
<div *ngIf="invoice?.client.website" class="website">{{invoice.client.website}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="issuer md-accent-bg" fxLayout="row" fxLayoutAlign="start center">
|
|
<div class="logo">
|
|
<img src="assets/images/logos/fuse.svg">
|
|
</div>
|
|
|
|
<div class="info">
|
|
<div class="title">{{invoice.from.title}}</div>
|
|
<div *ngIf="invoice?.from.address" class="address">{{invoice.from.address}}</div>
|
|
<div *ngIf="invoice?.from.phone" class="phone">{{invoice.from.phone}}</div>
|
|
<div *ngIf="invoice?.from.email" class="email">{{invoice.from.email}}</div>
|
|
<div *ngIf="invoice?.from.website" class="website">{{invoice.from.website}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<table class="simple invoice-table">
|
|
<thead>
|
|
<tr>
|
|
<th>SERVICE</th>
|
|
<th>UNIT</th>
|
|
<th class="text-right">UNIT PRICE</th>
|
|
<th class="text-right">QUANTITY</th>
|
|
<th class="text-right">TOTAL</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let service of invoice.services">
|
|
<td>
|
|
<div class="title">
|
|
{{service.title}}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{{service.unit}}
|
|
</td>
|
|
<td class="text-right">
|
|
{{service.unitPrice | currency:'USD':true}}
|
|
</td>
|
|
<td class="text-right">
|
|
{{service.quantity}}
|
|
</td>
|
|
<td class="text-right">
|
|
{{service.total | currency:'USD':true}}
|
|
</td>
|
|
</tr>
|
|
<!-- Double the invoice data for demo purposes -->
|
|
<tr *ngFor="let service of invoice.services">
|
|
<td>
|
|
<div class="title">
|
|
{{service.title}}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{{service.unit}}
|
|
</td>
|
|
<td class="text-right">
|
|
{{service.unitPrice | currency:'USD':true}}
|
|
</td>
|
|
<td class="text-right">
|
|
{{service.quantity}}
|
|
</td>
|
|
<td class="text-right">
|
|
{{service.total | currency:'USD':true}}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="simple invoice-table-footer">
|
|
<tbody>
|
|
<tr class="subtotal">
|
|
<td>SUBTOTAL</td>
|
|
<td>{{invoice.subtotal | currency:'USD':true}}</td>
|
|
</tr>
|
|
<tr class="tax">
|
|
<td>TAX</td>
|
|
<td>{{invoice.tax | currency:'USD':true}}</td>
|
|
</tr>
|
|
<tr class="discount">
|
|
<td>DISCOUNT</td>
|
|
<td>-{{invoice.discount | currency:'USD':true}}</td>
|
|
</tr>
|
|
<tr class="total">
|
|
<td>TOTAL</td>
|
|
<td>{{invoice.total | currency:'USD':true}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<div class="note">Please pay within 15 days. Thank you for your business.</div>
|
|
<div fxLayout="row" fxLayoutAlign="start start">
|
|
<div class="logo">
|
|
<img src="assets/images/logos/fuse.svg">
|
|
</div>
|
|
<div class="small-note">
|
|
In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque
|
|
scelerisque lacus sed feugiat fermentum. Cras aliquet facilisis pellentesque. Nunc hendrerit
|
|
quam at leo commodo, a suscipit tellus dapibus. Etiam at felis volutpat est mollis lacinia.
|
|
Mauris placerat sem sit amet velit mollis, in porttitor ex finibus. Proin eu nibh id libero
|
|
tincidunt lacinia et eget eros.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
|
|
Use the following elements to add breaks to your pages. This will make sure that the section in between
|
|
these elements will be printed on a new page. The following two elements must be used before and after the
|
|
page content that you want to show as a new page. So, you have to wrap your content with them.
|
|
|
|
Elements:
|
|
---------
|
|
<div class="page-break-after"></div>
|
|
<div class="page-break-before"></div>
|
|
|
|
-->
|
|
|
|
<!--
|
|
|
|
Example:
|
|
--------
|
|
|
|
Initial page content!
|
|
|
|
<div class="page-break-after"></div>
|
|
<div class="page-break-before"></div>
|
|
|
|
This is the second page!
|
|
|
|
<div class="page-break-after"></div>
|
|
<div class="page-break-before"></div>
|
|
|
|
This is the third page!
|
|
|
|
<div class="page-break-after"></div>
|
|
<div class="page-break-before"></div>
|
|
|
|
-->
|
|
|
|
</div>
|
|
<!-- / INVOICE -->
|
|
|
|
</div>
|
|
</div> |