service-provider-app/src/app/home/home.component.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 | 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 mat-icon-button color="primary" (click)="processCarnet(item)"
                                    *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
                                    [hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'"
                                    matTooltip="Process">
                                    <mat-icon>pending_actions</mat-icon>
                                </button>
                                <button mat-icon-button color="primary" (click)="viewCarnet(item)"
                                    *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
                                    [hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'"
                                    matTooltip="View">
                                    <mat-icon>article</mat-icon>
                                </button>
                                <button mat-icon-button color="primary" (click)="resetClient(item.headerid)"
                                    *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
                                    [hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'"
                                    matTooltip="Reset to Client">
                                    <mat-icon>assignment_return</mat-icon>
                                </button>
                                <button mat-icon-button color="primary" (click)="deleteCarnet(item.headerid)"
                                    *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
                                    [hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'"
                                    matTooltip="Delete">
                                    <mat-icon>delete</mat-icon>
                                </button>
                                <button mat-icon-button color="primary" (click)="printCarnet(item.headerid)"
                                    *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Submitted'"
                                    [hidden]="getCarnetStatusLabel(item.carnetStatus) !== 'Submitted'"
                                    matTooltip="Print">
                                    <mat-icon>print</mat-icon>
                                </button>
                            </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>