103 lines
5.1 KiB
HTML
103 lines
5.1 KiB
HTML
<div class="dashboard-container">
|
|
<div class="content">
|
|
<div class="quick-actions">
|
|
<!-- <button mat-raised-button color="accent" routerLink="/add-service-provider">
|
|
<mat-icon>add</mat-icon> Add New Service Provider
|
|
</button> -->
|
|
</div>
|
|
|
|
<!-- Chart Section -->
|
|
<div class="chart-section">
|
|
<app-chart [chartData]="carnetData" [carnetStatuses]="carnetStatuses"
|
|
(carnetStatusData)="onCarnetStatusClick($event)"></app-chart>
|
|
</div>
|
|
|
|
<!-- Carnet Details Section -->
|
|
<div class="carnet-details-section">
|
|
<div class="loading-shade" *ngIf="isLoading">
|
|
<mat-spinner diameter="50"></mat-spinner>
|
|
</div>
|
|
|
|
<div class="table-actions">
|
|
<button mat-raised-button color="accent" (click)="exportData()" *ngIf="dataSource.data.length > 0"
|
|
matTooltip="Export to Excel" [disabled]="dataSource.data.length === 0">
|
|
<mat-icon>download</mat-icon> Export
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-container mat-elevation-z8" *ngIf="showTable">
|
|
<table mat-table [dataSource]="dataSource" matSort>
|
|
<ng-container matColumnDef="applicationName">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Application Name</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.applicationName }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="holderName">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Holder Name</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.holderName }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="carnetNumber">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Carnet Number</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.carnetNumber }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="usSets">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>US Sets</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.usSets }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="foreignSets">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Foregin Sets</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.foreignSets }}</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="transitSets">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Transit Sets</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.transitSets }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="carnetValue">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Carnet Value</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.carnetValue }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="issueDate">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Issue Date</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.issueDate |
|
|
date:'mediumDate':'UTC' }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="expiryDate">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Expiry Date</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.expiryDate |
|
|
date:'mediumDate':'UTC' }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="orderType">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Order Type</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.orderType }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="carnetStatus">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Carnet Status</th>
|
|
<td mat-cell *matCellDef="let item">{{ getCarnetStatusLabel(item.carnetStatus) }}</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
|
|
<tr matNoDataRow *matNoDataRow>
|
|
<td [colSpan]="displayedColumns.length" class="no-data-message">
|
|
<mat-icon>info</mat-icon>
|
|
<span>No data available</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
|
|
[hidePageSize]="true" showFirstLastButtons></mat-paginator>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div> |