195 lines
11 KiB
HTML
195 lines
11 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">
|
|
<div class="filter-controls" *ngIf="dataSource.data.length > 0">
|
|
<!-- Column Selection Dropdown -->
|
|
<mat-form-field appearance="outline" class="filter-field">
|
|
<mat-label>Filter By</mat-label>
|
|
<mat-select [(value)]="selectedColumn" (selectionChange)="onColumnChange()">
|
|
<mat-option value=""></mat-option>
|
|
<mat-option *ngFor="let column of filterableColumns" [value]="column.value">
|
|
{{column.displayName}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<!-- Search Input -->
|
|
<mat-form-field appearance="outline" class="filter-field">
|
|
<mat-label>Search Value</mat-label>
|
|
<input matInput [(ngModel)]="filterValue" (keyup)="applyFilter()"
|
|
placeholder="Enter search term...">
|
|
<mat-icon matSuffix>search</mat-icon>
|
|
</mat-form-field>
|
|
|
|
<!-- Clear Filter Button -->
|
|
<button mat-raised-button type="button" (click)="clearFilter()"
|
|
[disabled]="!selectedColumn && !filterValue">
|
|
<mat-icon>clear_all</mat-icon>
|
|
Clear Filter
|
|
</button>
|
|
</div>
|
|
<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="clientName">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Client Name</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.clientName }}</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="deliveryType">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Delivery Type</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.deliveryType }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="securityType">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Security Type</th>
|
|
<td mat-cell *matCellDef="let item">{{ item.securityType }}</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 | currency}}</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>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef>Actions</th>
|
|
<td mat-cell *matCellDef="let item">
|
|
<div class="action-buttons">
|
|
<button matIconButton [matMenuTriggerFor]="carnetActions">
|
|
<mat-icon>more_horiz</mat-icon>
|
|
</button>
|
|
<mat-menu #carnetActions="matMenu">
|
|
<button mat-menu-item (click)="processCarnet(item)"
|
|
*ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
|
|
[hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'">
|
|
<mat-icon>pending_actions</mat-icon>
|
|
<span>Process</span>
|
|
</button>
|
|
<button mat-menu-item (click)="viewCarnet(item)">
|
|
<mat-icon>article</mat-icon>
|
|
<span>View</span>
|
|
</button>
|
|
<button mat-menu-item (click)="resetClient(item.headerid)"
|
|
*ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
|
|
[hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'">
|
|
<mat-icon>assignment_return</mat-icon>
|
|
<span>Reset</span>
|
|
</button>
|
|
<button mat-menu-item (click)="deleteCarnet(item.headerid)" *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted' ||
|
|
getCarnetStatusLabel(item.carnetStatus) === 'Not Submitted'">
|
|
<mat-icon>delete</mat-icon>
|
|
<span>Delete</span>
|
|
</button>
|
|
<button mat-menu-item (click)="printGeneralList(item.headerid)"
|
|
*ngIf="item.printGLStatus === 'PRINTGL'">
|
|
<mat-icon>print</mat-icon>
|
|
<span>Print GL</span>
|
|
</button>
|
|
<button mat-menu-item (click)="printCarnet(item.headerid, item.carnetNumber)"
|
|
*ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Valid'">
|
|
<mat-icon>print</mat-icon>
|
|
<span>Print</span>
|
|
</button>
|
|
<button mat-menu-item (click)="voidCarnet(item.headerid)"
|
|
*ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Valid'">
|
|
<mat-icon>delete_forever</mat-icon>
|
|
<span>Void</span>
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
</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 *ngIf="dataSource.data.length > userPreferences.pageSize!"
|
|
[length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
|
|
[hidePageSize]="true" showFirstLastButtons></mat-paginator>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div> |