carnet-portal-app/src/app/service-provider/carnet-sequence/carnet-sequence.component.html

<div class="carnet-sequence-container">
    <div class="actions-bar">
        <button mat-raised-button color="primary" *ngIf="!isEditMode" (click)="addNewSequence()">
            <mat-icon>add</mat-icon> Add New Sequence
        </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>
            <!-- Carnet Type Column -->
            <ng-container matColumnDef="carnetType">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Carnet Type</th>
                <td mat-cell *matCellDef="let sequence">{{ getCarnetTypeLabel(sequence.carnetType) }}</td>
            </ng-container>

            <!-- Region Column -->
            <ng-container matColumnDef="region">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Region</th>
                <td mat-cell *matCellDef="let sequence">{{ getRegionLabel(sequence.region) }}</td>
            </ng-container>

            <!-- Start Number Column -->
            <ng-container matColumnDef="startNumber">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Start Number</th>
                <td mat-cell *matCellDef="let sequence">{{ sequence.startNumber | number }}</td>
            </ng-container>

            <!-- End Number Column -->
            <ng-container matColumnDef="endNumber">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>End Number</th>
                <td mat-cell *matCellDef="let sequence">{{ sequence.endNumber | number }}</td>
            </ng-container>

            <!-- Last Number Column -->
            <ng-container matColumnDef="lastNumber">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Number</th>
                <td mat-cell *matCellDef="let sequence">{{ sequence.lastNumber | number }}</td>
            </ng-container>

            <!-- Actions Column -->
            <!-- <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef>Actions</th>
                <td mat-cell *matCellDef="let sequence">
                    <button mat-icon-button color="primary" (click)="editSequence(sequence)" matTooltip="Edit">
                        <mat-icon>edit</mat-icon>
                    </button>
                    <button mat-icon-button color="warn" (click)="deleteSequence(sequence.id)" matTooltip="Delete">
                        <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 sequences available</span>
                </td>
            </tr>
        </table>

        <mat-paginator [length]="dataSource.data.length" [pageSizeOptions]="[userPreferences.pageSize!]"
            [hidePageSize]="true" showFirstLastButtons></mat-paginator>
    </div>

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

            <div class="form-row">
                <mat-label>Carnet Type</mat-label>
                <mat-radio-group formControlName="carnetType" required class="horizontal-group">
                    <mat-radio-button *ngFor="let type of carnetTypes" [value]="type.value" class="radio-button">
                        {{ type.label }}
                    </mat-radio-button>
                </mat-radio-group>
                <mat-error *ngIf="sequenceForm.get('carnetType')?.errors?.['required']">
                    Carnet type is required
                </mat-error>
            </div>

            <div class="form-row">

                <mat-form-field appearance="outline">
                    <mat-label>Region</mat-label>
                    <mat-select formControlName="region" required>
                        <mat-option *ngFor="let region of regions" [value]="region.id">
                            {{ region.regionname }}
                        </mat-option>
                    </mat-select>
                    <mat-error *ngIf="sequenceForm.get('region')?.errors?.['required']">
                        Region is required
                    </mat-error>
                </mat-form-field>
            </div>

            <div class="form-row">
                <mat-form-field appearance="outline">
                    <mat-label>Start Number</mat-label>
                    <input matInput formControlName="startNumber" type="number" required>
                    <mat-error *ngIf="sequenceForm.get('startNumber')?.errors?.['required']">
                        Start number is required
                    </mat-error>
                    <mat-error *ngIf="sequenceForm.get('startNumber')?.errors?.['pattern']">
                        Must be a valid number
                    </mat-error>
                    <mat-error *ngIf="sequenceForm.get('startNumber')?.errors?.['min']">
                        Must be greater than 0
                    </mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>End Number</mat-label>
                    <input matInput formControlName="endNumber" type="number" required>
                    <mat-error *ngIf="sequenceForm.get('endNumber')?.errors?.['required']">
                        End number is required
                    </mat-error>
                    <mat-error *ngIf="sequenceForm.get('endNumber')?.errors?.['pattern']">
                        Must be a valid number
                    </mat-error>
                    <mat-error *ngIf="sequenceForm.get('endNumber')?.errors?.['min']">
                        Must be greater than 0
                    </mat-error>
                </mat-form-field>
            </div>

            <mat-error *ngIf="sequenceForm?.errors?.['invalidRange']" class="form-error">
                End number must be greater than start number
            </mat-error>

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