carnet-portal-app/src/app/fees/carnet-fee/carnet-fee.component.html

<div class="fee-commission-container">
    <div class="actions-bar">
        <mat-slide-toggle (change)="toggleShowExpiredRecords()">
            Show Expired Records
        </mat-slide-toggle>
        <button mat-raised-button color="primary" (click)="addNewFeeCommission()">
            <mat-icon>add</mat-icon> Add New Fee & Commission
        </button>
    </div>

    <div class="table-container mat-elevation-z8">
        <div class="loading-shade" *ngIf="isLoading">
            <mat-spinner diameter="50"></mat-spinner>
        </div>

        <table mat-table [dataSource]="dataSource" matSort>
            <!-- Fee Type Column -->
            <ng-container matColumnDef="feeType">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Fee Type</th>
                <td mat-cell *matCellDef="let item">{{ getFeeTypeLabel(item.feeType) }}</td>
            </ng-container>

            <!-- Commission Rate Column -->
            <ng-container matColumnDef="commissionRate">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Commission Rate</th>
                <td mat-cell *matCellDef="let item">{{ item.commissionRate | number:'1.2-2' }}</td>
            </ng-container>

            <!-- Effective Date Column -->
            <ng-container matColumnDef="effectiveDate">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Effective Date</th>
                <td mat-cell *matCellDef="let item">{{ item.effectiveDate | date:'mediumDate':'UTC' }}</td>
            </ng-container>

            <!-- Expired Date Column -->
            <ng-container matColumnDef="expiredDate">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Expired Date</th>
                <td mat-cell *matCellDef="let fee">{{ fee.expiredDate | date:'mediumDate':'UTC' }}</td>
            </ng-container>

            <!-- Actions Column -->
            <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef>Actions</th>
                <td mat-cell *matCellDef="let item">
                    <button mat-icon-button color="primary" (click)="editFeeCommission(item)" matTooltip="Edit">
                        <mat-icon>edit</mat-icon>
                    </button>
                    <!-- <button mat-icon-button color="warn" (click)="deleteFeeCommission(item.feeCommissionId)"
                        matTooltip="Delete" *ngIf="!isEditMode">
                        <mat-icon>delete</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 fee & commission records 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>

    <!-- Fee & Commission Form -->
    <div class="form-container" *ngIf="showForm">
        <form [formGroup]="feeCommissionForm" (ngSubmit)="saveFeeCommission()">
            <div class="form-header">
                <h3>{{ isEditing ? 'Edit Fee & Commission' : 'Add New Fee & Commission' }}</h3>
            </div>

            <div class="form-row">
                <mat-form-field appearance="outline">
                    <mat-label>Fee Type</mat-label>
                    <mat-select formControlName="feeType" required>
                        <mat-option *ngFor="let type of feeTypes" [value]="type.id">
                            {{ type.name }}
                        </mat-option>
                    </mat-select>
                    <mat-error *ngIf="feeCommissionForm.get('feeType')?.errors?.['required']">
                        Fee type is required
                    </mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>Commission Rate</mat-label>
                    <input matInput type="number" formControlName="commissionRate">
                    <mat-error *ngIf="feeCommissionForm.get('commissionRate')?.errors?.['required']">
                        Commission rate is required
                    </mat-error>
                    <mat-error *ngIf="feeCommissionForm.get('commissionRate')?.errors?.['pattern']">
                        Please enter a valid number with up to 2 decimal places
                    </mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>Effective Date</mat-label>
                    <input matInput [matDatepicker]="picker" formControlName="effectiveDate" required>
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                    <mat-error *ngIf="feeCommissionForm.get('effectiveDate')?.errors?.['required']">
                        Effective date is required
                    </mat-error>
                </mat-form-field>
            </div>

            <div *ngIf="isEditing" class="readonly-section">
                <div class="readonly-fields">
                    <div class="field-column">
                        <!-- Last Changed By -->
                        <div class="readonly-field">
                            <label>Last Changed By</label>
                            <div class="readonly-value">
                                {{readOnlyFields.lastChangedBy || 'N/A'}}
                            </div>
                        </div>
                    </div>
                    <div class="field-column">
                        <!-- Last Changed Date -->
                        <div class="readonly-field">
                            <label>Last Changed Date</label>
                            <div class="readonly-value">
                                {{(readOnlyFields.lastChangedDate | date:'mediumDate':'UTC') || 'N/A'}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <button mat-raised-button color="primary" type="submit"
                    [disabled]="feeCommissionForm.invalid || changeInProgress">
                    {{ isEditing ? 'Update' : 'Save' }}
                </button>
                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
            </div>
        </form>
    </div>
</div>