client-app/src/app/home/home.component.html

<div class="dashboard-container">
    <div class="content">
        <div class="app-container">
            <!-- Chart Section -->
            <div class="chart-section">
                <app-chart [chartData]="carnetData" [carnetStatuses]="carnetStatuses"
                    (carnetStatusData)="onCarnetStatusClick($event)"></app-chart>
            </div>

            <!-- Questions Section -->
            <div class="questions-section">
                <div class="question-row">
                    <mat-radio-group (change)="newCarnet($event)">
                        <mat-label>Do you need a new carnet?</mat-label>
                        <mat-radio-button [value]="true">Yes</mat-radio-button>
                        <mat-radio-button [value]="false">No</mat-radio-button>
                    </mat-radio-group>
                </div>

                <div class="question-row">
                    <mat-radio-group (change)="additionalSets($event)">
                        <mat-label>Do you need additional sets?</mat-label>
                        <mat-radio-button [value]="true">Yes</mat-radio-button>
                        <mat-radio-button [value]="false">No</mat-radio-button>
                    </mat-radio-group>
                </div>

                <div class="question-row">
                    <mat-radio-group (change)="duplicateCarnet($event)">
                        <mat-label>Did you lose your carnet? Are you looking for duplicates?</mat-label>
                        <mat-radio-button [value]="true">Yes</mat-radio-button>
                        <mat-radio-button [value]="false">No</mat-radio-button>
                    </mat-radio-group>
                </div>

                <div class="question-row">
                    <mat-radio-group (change)="extendCarnet($event)">
                        <mat-label>Do you need to extend the carnet?</mat-label>
                        <mat-radio-button [value]="true">Yes</mat-radio-button>
                        <mat-radio-button [value]="false">No</mat-radio-button>
                    </mat-radio-group>
                </div>
            </div>
        </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-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>

                    <ng-container matColumnDef="actions">
                        <th mat-header-cell *matHeaderCellDef>Actions</th>
                        <td mat-cell *matCellDef="let item">
                            <button mat-icon-button color="primary" (click)="editCarnet(item)"
                                *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Pending'"
                                [hidden]="getCarnetStatusLabel(item.carnetStatus) === 'Pending'" matTooltip="Edit">
                                <mat-icon>edit</mat-icon>
                            </button>
                        </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>