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

<app-header></app-header>
<div align="center">
	<div class="text1">{{(ownerUpdate | async)!.name}}</div>
	<table style="padding-top: 10px;
								padding-bottom: 10px;">
		<tr class="text1a">
			<td>
			{{ vE.listordersEndDate }}{{(ownerUpdate | async)!.expiration | date: 'YYYY-MM-dd'}}
			</td>
			<td>
				<button mat-icon-button color="primary">
					<mat-icon class="icon">queue</mat-icon>
				</button>
			</td>
    </tr>
  </table>
	<table >
		<tr>
			<td width="45%">
				<button class="text" mat-raised-button [routerLink]="['/shop']" color="primary">
					<mat-icon class="icon">home</mat-icon>
					{{ vE.listordersBacktoshopBtn }}
				</button>
		  </td>
		  <td width="10%">
		  </td>
		  <td width="45%">
      	<button mat-raised-button color="primary"
		        class="text" (click)="openDbExport()">
				  <mat-icon class="icon">get_app</mat-icon>
					{{ vE.listordersExportOrders }}
				</button>
			</td>	
	  </tr>
  </table>
</div>
<table class="totalsTbl" width="100%">	
	<tr class="totalsHdr">
		<td width="10%"></td>
		<td width="40%" >
			<div class="totalsHdrTitle">{{ vE.listordersTodaysTotal }}</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">{{ vE.listordersOverallTotal }}</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]="'35px'" [expandedHeight]="'30px'" >
		   <mat-panel-title>
			 <div class="orderListTitle">
	        <img src="/assets/zec_rv.png" 
			       style="height: 14px;
			              margin-bottom: -2px;
			              padding-right: 3px;"
			    >{{order.totalZec | number: '1.08'}}
			 </div>
		   </mat-panel-title>
		   <mat-panel-description>
		   	 <table width="100%">
		   	   <tr>	
		   	   <td>
				   <fa-icon  *ngIf="payConf" 
				   					 [icon]="getIcon(order)" [style]="getIconStyle(order)" ></fa-icon>
			     </td>
			     <td align="center"
			         style="font-family: 'Roboto Mono' !important;
			                font-weight: 700 ;
			                font-size: 14px;">
  			    		{{order.timestamp | date: 'YYYY-MM-dd, HH:mm'}}
  			   </td>
			   </tr>
			 </table>
		    </mat-panel-description>
		</mat-expansion-panel-header>
		<div class='orderheader'>
			<div class="text2"> <b>{{ vE.listordersOrderId }}</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%">{{ vE.listordersOrderTotal }}</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%">{{ vE.listordersItemLbl }}
					</th>
					<th class="tbheader"
					    style="text-align: left;" 
					    width="15%">{{ vE.listordersQtyLbl }}
					</th>
					<th class="tbheader"
					    style="text-align: right;" 
					    width="30%">{{ vE.listordersTotalLbl }}
					</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-left: 20%;
							  padding-right: 20%;
							  margin-top: 10px;">
			<span>
				<button mat-stroked-button class="minibutton" color="primary" (click)="invoice(order)">{{ vE.listordersInvoiceBtn }}</button>
			</span>
			<span>
				<button mat-stroked-button class="minibutton" color="primary" (click)="receipt(order)">{{ vE.listordersReceiptBtn }}</button>
			</span>
		</div>
	</mat-expansion-panel>
  </mat-accordion>
  <p class="text" *ngIf = "orders.length <= 0">{{ vE.listordersNoOrders }}</p>
</div>