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

<div class="basic-fee-container">
    <div class="actions-bar">
        <mat-slide-toggle (change)="toggleShowExpiredRecords()">
            Show Expired Records
        </mat-slide-toggle>
    </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>
            <!-- Start Carnet Value Column -->
            <ng-container matColumnDef="startCarnetValue">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Start Carnet Value</th>
                <td mat-cell *matCellDef="let fee">{{ fee.startCarnetValue | number }}</td>
            </ng-container>

            <!-- End Carnet Value Column -->
            <ng-container matColumnDef="endCarnetValue">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>End Carnet Value</th>
                <td mat-cell *matCellDef="let fee">
                    {{ fee.endCarnetValue ? (fee.endCarnetValue | number) : 'Above' }}
                </td>
            </ng-container>

            <!-- Fees Column -->
            <ng-container matColumnDef="fees">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Fees</th>
                <td mat-cell *matCellDef="let fee">{{ fee.fees | currency }}</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 fee">{{ fee.effectiveDate | date:'mediumDate':'UTC' }}</td>
            </ng-container>

            <!-- Actions Column -->
            <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef>Actions</th>
                <td mat-cell *matCellDef="let fee">
                    <button mat-icon-button color="primary" (click)="editFee(fee)" 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 basic fees 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 Form -->
    <div class="form-container" *ngIf="showForm">
        <form [formGroup]="feeForm" (ngSubmit)="saveFee()">
            <div class="form-header">
                <h3>{{ isEditing ? 'Edit Basic Fee' : 'Add New Basic Fee' }}</h3>
            </div>

            <div class="form-row">
                <mat-form-field appearance="outline">
                    <mat-label>Start Carnet Value</mat-label>
                    <input matInput type="number" formControlName="startCarnetValue" required min="0" step="1">
                    <mat-error *ngIf="feeForm.get('startCarnetValue')?.errors?.['required']">
                        Start value is required
                    </mat-error>
                    <mat-error *ngIf="feeForm.get('startCarnetValue')?.errors?.['min']">
                        Value must be positive
                    </mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>End Carnet Value (leave blank for no upper limit)</mat-label>
                    <input matInput type="number" formControlName="endCarnetValue" min="0" step="1">
                    <mat-error *ngIf="feeForm.get('endCarnetValue')?.errors?.['min']">
                        Value must be positive
                    </mat-error>
                    <mat-error *ngIf="feeForm.get('endCarnetValue')?.errors?.['invalidRange']">
                        Must be greater than start value
                    </mat-error>
                </mat-form-field>
            </div>

            <div class="form-row">
                <mat-form-field appearance="outline">
                    <mat-label>Fees</mat-label>
                    <span class="dollar-prefix" matPrefix>$&nbsp;</span>
                    <input matInput type="number" formControlName="fees" required min="0" step="1">
                    <mat-error *ngIf="feeForm.get('fees')?.errors?.['required']">
                        Fees are required
                    </mat-error>
                    <mat-error *ngIf="feeForm.get('fees')?.errors?.['min']">
                        Fees must be positive
                    </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="feeForm.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]="feeForm.invalid || changeInProgress">
                    {{ isEditing ? 'Update' : 'Save' }}
                </button>
                <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
            </div>
        </form>
    </div>
</div>