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 }}</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>