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">
                <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="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 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>
                                <!-- <button mat-icon-button color="primary" (click)="viewCarnet(item)" 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' || 
                                    getCarnetStatusLabel(item.carnetStatus) === 'Not Submitted'" matTooltip="Delete">
                                    <mat-icon>delete</mat-icon>
                                </button>
                                <button mat-icon-button color="primary" (click)="printGeneralList(item.headerid)"
                                    matTooltip="Print General List">
                                    <mat-icon>print</mat-icon>
                                </button>
                                <button mat-icon-button color="primary" (click)="printCarnet(item.headerid)"
                                    *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Valid'" matTooltip="Print">
                                    <mat-icon>print</mat-icon>
                                </button>
                                <button mat-icon-button color="primary" (click)="voidCarnet(item.headerid)"
                                    *ngIf="getCarnetStatusLabel(item.carnetStatus) === 'Valid'" matTooltip="Void">
                                    <mat-icon>delete_forever</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>