aConnect-UX/src/app/menu/menu.component.html

<div class="page-content">
    <div class="container-fluid">
        <!-- User Selection Card -->
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <form [formGroup]="permission" class="row align-items-center">
                    <label class="col-md-2 col-form-label fw-semibold">
                        {{ "userCode" | translate }}
                    </label>
                    <div class="col-md-6">
                        <ng-select class="form-select" formControlName="userCode" [items]="users" bindLabel="userName"
                            bindValue="userId" placeholder="{{ 'choose' | translate }}" (change)="onUserChange()"
                            [searchable]="true" [clearable]="false" [dropdownPosition]="'auto'" [virtualScroll]="true"
                            [bufferAmount]="20" appendTo="body">
                            <!-- Custom template for dropdown options -->
                            <ng-template ng-option-tmp let-item="item">
                                <div class="d-flex flex-column">
                                    <span class="fw-medium">{{ item.userName }}</span>
                                    <small class="text-muted">{{ item.userId }}</small>
                                </div>
                            </ng-template>

                            <!-- Optional: Custom template for selected item -->
                            <ng-template ng-label-tmp let-item="item">
                                <span>{{ item.userName }} ({{ item.userId }})</span>
                            </ng-template>
                        </ng-select>
                    </div>
                </form>
            </div>
        </div>

        <div class="card shadow-sm" *ngIf="showPermissions">
            <div class="card-body">
                <h4 class="card-title mb-3">{{ "menu" | translate }}</h4>

                <div class="table-responsive scrollable-table">
                    <table class="table table-hover table-bordered table-sm permission-table">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 50px">#</th>
                                <th>{{ "type" | translate }}</th>
                                <th style="width: 100px;" class="text-center">{{ "allow" | translate }}</th>
                            </tr>
                        </thead>

                        <tbody>
                            
                                    <tr *ngFor="let item of menuItems; let i = index">
                                        <td class="text-muted">{{ i + 1 }}</td>
                                        <td>{{ item.name | translate }}</td>
                                        <td class="text-center"><input type="checkbox"
                                                [(ngModel)]="item.checked" /></td>
                                    </tr>
                                                                   
                        </tbody>
                    </table>
                </div>

                <div class="text-end mt-3">
                    <button class="btn btn-primary btn-sm px-4" (click)="savePermissions()">
                        {{ "save" | translate }}
                    </button>
                </div>
            </div>
        </div>
    </div>