AI-Assisted-Smart-Data-Entry-PoC/ai-data-entry-ui/src/app/components/user-management/user-management.component.html

<div class="management-container">
  <header>
    <button class="back-btn" routerLink="/dashboard">
      <lucide-icon [name]="ArrowLeft" class="icon-small"></lucide-icon> Back to Dashboard
    </button>
    <h1>User Management</h1>
    <p>Manage employee medical allowances and profiles</p>
  </header>

  <div class="management-grid">
    <!-- Creation Form -->
    <div class="card form-card">
      <h2>Add New Employee</h2>
      <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
        <div class="form-field">
          <label for="name">Full Name</label>
          <input id="name" type="text" formControlName="name" placeholder="E.g. John Doe">
        </div>
        <div class="form-field">
          <label for="department">Department</label>
          <input id="department" type="text" formControlName="department" placeholder="E.g. Engineering">
        </div>
        <div class="form-field">
          <label for="medical_allowance">Annual Allowance (MYR)</label>
          <input id="medical_allowance" type="number" formControlName="medical_allowance">
        </div>
        <button type="submit" [disabled]="!userForm.valid || isLoading" class="submit-btn text-white">
          <lucide-icon [name]="UserPlus" class="icon-small"></lucide-icon>
          {{ isLoading ? 'Creating...' : 'Create Profile' }}
        </button>
      </form>
    </div>

    <!-- User List -->
    <div class="card list-card">
      <h2>Employee Directory</h2>
      <div class="user-list">
        <div *ngIf="isLoading && users.length === 0" class="loading">Loading directory...</div>
        <div *ngFor="let user of users" class="user-item">
          <div class="user-info">
            <div class="user-avatar-small">{{ user.name[0] }}</div>
            <div>
              <h3>{{ user.name }}</h3>
              <p>{{ user.department }}</p>
            </div>
          </div>
          <div class="user-balance">
            <span class="label">Balance</span>
            <span class="value">RM {{ user.medical_allowance | number:'1.2-2' }}</span>
          </div>
        </div>
        <div *ngIf="!isLoading && users.length === 0" class="empty-state">No employees registered yet.</div>
      </div>
    </div>
  </div>
</div>