zgo/src/app/listorders/listorders.component.html

<app-header></app-header>
<div align="center">
	<h3 class="text">{{(ownerUpdate | async)!.name}}</h3>
	<button class="text" mat-raised-button [routerLink]="['/shop']" color="primary">
		Back to Shop
	</button>
</div>
<table class="totalsTbl" width="100%">	
	<tr class="totalsHdr">
		<td width="10%"></td>
		<td width="40%" >
			<div class="totalsHdrTitle">Today's Total:</div>
			<div class="totalsHdrDetail">
			   <img src="/assets/zec_rv.png" 
				   style="height: 16px !important;
					     margin-bottom: -2px;">{{todayTotal | number: '1.08'}}
			</div>
		</td>
		<td width="40%" >
			<div class="totalsHdrTitle">Overall Total:</div>
			<div class="totalsHdrDetail">
			   <img src="/assets/zec_rv.png" 
				   style="height: 16px !important;
					     margin-bottom: -2px;">{{total | number: '1.08'}}
			</div>
		</td>
		<td width="10%"></td>
	</tr>
</table>
 
<div class="orderList">
  <mat-accordion *ngIf = "orders.length > 0">
	<mat-expansion-panel *ngFor = "let order of orders">
		<mat-expansion-panel-header [collapsedHeight]="'30px'" [expandedHeight]="'30px'" >
		   <mat-panel-title>
			<div class="orderListTitle">
  		        <img src="/assets/zec_rv.png" 
			       style="height: 16px;
			              margin-bottom: -2px;"
			    >{{order.totalZec | number: '1.08'}}
			</div>
		   </mat-panel-title>
		   <mat-panel-description>
		   	 <table width="100%">
		   	   <tr>	
		   	   	<td>
				   <fa-icon  [icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon>
			     </td>
			     <td align="center">
  			    		{{order.timestamp | date: 'short'}}
  			    	</td>
			   </tr>
			 </table>
		    </mat-panel-description>
		</mat-expansion-panel-header>
		<div class='orderheader'>
			<div class="text2"> <b>Order Id</b>: {{order._id}}</div>
  		</div>

		<table style="width: 100%;" 
		       cellspacing="0">
			<tr style="font-family: Roboto Mono;
			           font-weight: 700;
			           font-size: 16px;
			           height: 20px;">
				<td width="50%">Order Total:</td>
				<td align="right"
				    width="50%">	
					<img class="icon" src="/assets/zec_rv.png"
					>{{ order.totalZec  | number: '1.08'}}
				</td>
			</tr>
			<tr style="font-family: Roboto Mono;
			           font-size: 15px;
			           font-weight: 400;
			           height: 18px;">
				<td width="50%">
					<img class="icon" 
					     style="color: lightgray; 
					            margin-bottom: -3px;" 
					     src="/assets/zec_rv.png"
					>1.0 = {{ order.price | currency: order.currency.toUpperCase()}}
				</td>
				<td width="50%" align="right">
					{{ order.total | currency: order.currency.toUpperCase()}}
				</td>
			</tr>
		</table>

		<table style="width: 100%;">
             <thead style="width: 100%;">
				<tr style="background: lightblue;">
					<th class="tbheader"
					    style="text-align: left;" 
					    width="55%">Item
					</th>
					<th class="tbheader"
					    style="text-align: left;" 
					    width="15%">Qty.
					</th>
					<th class="tbheader"
					    style="text-align: right;" 
					    width="30%">Total
					</th>
				</tr>
		    </thead>	

		    <tbody>
				<tr *ngFor="let item of order.lines">
					<td class="tbdetail" 
					    style="text-align: left;" 
					    width="55%">{{item.name}}
					</td>
					<td class="tbdetail" 
					    style="text-align: left;" 
					    width="15%">{{item.qty}}
					</td>
					<td class="tbdetail" 
					    style="text-align: right;" 
					    width="30%">{{item.qty * item.cost | number:'1.02' | currency: order.currency.toUpperCase() }} 
					</td>
				</tr>
			</tbody>
		</table>
		<div style="display: flex;
								justify-content: space-between;
							  padding: 5px;
							  height: 25px;
							  background: lightblue;
							  cursor: pointer;">
			<button style="background: #ff5722;
										 color: white;"
			        (click)="invoice(order)">Invoice</button>

			<button style="background: #ff5722;
										 color: white;"
							 (click)="receipt(order)">Receipt</button>
		</div>
	</mat-expansion-panel>
  </mat-accordion>
  <p class="text" *ngIf = "orders.length <= 0">No orders</p>
</div>