<div class="admin-wrapper">
  <!-- Header -->
  <header class="admin-header">
    <div class="header-content">
      <div class="header-left">
        <div class="logo-section">
          <svg class="medical-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2L2 7V10C2 16 6 21.4 12 22C18 21.4 22 16 22 10V7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 8V16M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <div class="header-text">
            <h1 class="dashboard-title">Admin Dashboard</h1>
            <p class="dashboard-subtitle">Telemedicine Portal</p>
          </div>
        </div>
      </div>
      <div class="header-right">
        <button class="refresh-button" (click)="refresh()" [disabled]="loading" title="Refresh Data">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 4V10H7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M23 20V14H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10M23 14L18.36 18.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>Refresh</span>
        </button>
        <button class="logout-button" (click)="logout()" title="Logout">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M16 17L21 12L16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M21 12H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>Logout</span>
        </button>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="admin-main">
    <!-- Loading State -->
    <div class="loading-container" *ngIf="loading">
      <div class="spinner-wrapper">
        <svg class="spinner" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" stroke-opacity="0.25"/>
          <path d="M12 2C16.4183 2 20 5.58172 20 10" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
        </svg>
      </div>
      <p class="loading-text">Loading dashboard data...</p>
    </div>

    <!-- Error State -->
    <div class="error-container" *ngIf="error && !loading">
      <div class="error-card">
        <svg class="error-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
          <path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <div class="error-content">
          <h3>Error Loading Data</h3>
          <p>{{ error }}</p>
          <button class="retry-button" (click)="refresh()">Try Again</button>
        </div>
      </div>
    </div>

    <!-- Tabs Navigation -->
    <div class="tabs-container" *ngIf="!loading && !error">
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'overview'"
        (click)="setTab('overview')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9 22V12H15V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Overview
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'users'"
        (click)="setTab('users')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        All Users
        <span class="tab-badge">{{ users.length }}</span>
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'doctors'"
        (click)="setTab('doctors')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 14V22M8 18H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Doctors
        <span class="tab-badge">{{ doctors.length }}</span>
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'patients'"
        (click)="setTab('patients')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Patients
        <span class="tab-badge">{{ patients.length }}</span>
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'appointments'"
        (click)="setTab('appointments'); loadAppointments()"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Appointments
        <span class="tab-badge">{{ appointments.length }}</span>
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'profile'"
        (click)="setTab('profile')"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Profile
      </button>
      <button 
        class="tab-button" 
        [class.active]="activeTab === 'hipaa-audit'"
        (click)="setTab('hipaa-audit'); loadBreachNotifications()"
      >
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        HIPAA Audit
      </button>
    </div>

    <!-- Tab Content -->
    <div class="tab-content" *ngIf="!loading && !error">
      <!-- Overview Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'overview' && stats">
        <section class="stats-section">
          <h2 class="section-title">Overview Statistics</h2>
          <div class="stats-grid">
            <div class="stat-card stat-card-primary">
              <div class="stat-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="stat-content">
                <p class="stat-label">Total Users</p>
                <p class="stat-value">{{ stats.totalUsers || 0 }}</p>
              </div>
            </div>

            <div class="stat-card stat-card-success">
              <div class="stat-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 14V22M8 18H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="stat-content">
                <p class="stat-label">Doctors</p>
                <p class="stat-value">{{ stats.totalDoctors || 0 }}</p>
              </div>
            </div>

            <div class="stat-card stat-card-info">
              <div class="stat-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="stat-content">
                <p class="stat-label">Patients</p>
                <p class="stat-value">{{ stats.totalPatients || 0 }}</p>
              </div>
            </div>

            <div class="stat-card stat-card-warning">
              <div class="stat-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 14V18M12 10V14M12 10H12.01M12 18H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="stat-content">
                <p class="stat-label">Appointments</p>
                <p class="stat-value">{{ stats.totalAppointments || 0 }}</p>
              </div>
            </div>

            <div class="stat-card stat-card-active">
              <div class="stat-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="stat-content">
                <p class="stat-label">Active Users</p>
                <p class="stat-value">{{ stats.activeUsers || 0 }}</p>
              </div>
            </div>
          </div>
        </section>

        <!-- Metrics Section -->
        <section class="metrics-section" *ngIf="metrics">
          <h2 class="section-title">System Metrics</h2>
          
          <!-- Authentication Metrics -->
          <div class="metrics-category">
            <h3 class="category-title">Authentication</h3>
            <div class="metrics-grid">
              <div class="metric-card">
                <p class="metric-label">Login Attempts</p>
                <p class="metric-value">{{ (metrics.loginAttempts || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Successful Logins</p>
                <p class="metric-value">{{ (metrics.loginSuccess || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Failed Logins</p>
                <p class="metric-value">{{ (metrics.loginFailure || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">2FA Enabled</p>
                <p class="metric-value">{{ (metrics.twoFactorAuthEnabled || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">2FA Verified</p>
                <p class="metric-value">{{ (metrics.twoFactorAuthVerified || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Password Resets</p>
                <p class="metric-value">{{ (metrics.passwordResetSuccess || 0) | number:'1.0-0' }}</p>
              </div>
            </div>
          </div>

          <!-- Appointment Metrics -->
          <div class="metrics-category">
            <h3 class="category-title">Appointments</h3>
            <div class="metrics-grid">
              <div class="metric-card">
                <p class="metric-label">Created</p>
                <p class="metric-value">{{ (metrics.appointmentsCreated || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Cancelled</p>
                <p class="metric-value">{{ (metrics.appointmentsCancelled || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Completed</p>
                <p class="metric-value">{{ (metrics.appointmentsCompleted || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Active</p>
                <p class="metric-value">{{ metrics.activeAppointments || 0 }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Total</p>
                <p class="metric-value">{{ metrics.totalAppointments || 0 }}</p>
              </div>
            </div>
          </div>

          <!-- Prescription Metrics -->
          <div class="metrics-category">
            <h3 class="category-title">Prescriptions</h3>
            <div class="metrics-grid">
              <div class="metric-card">
                <p class="metric-label">Created</p>
                <p class="metric-value">{{ (metrics.prescriptionsCreated || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Active</p>
                <p class="metric-value">{{ metrics.activePrescriptions || 0 }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Total</p>
                <p class="metric-value">{{ metrics.totalPrescriptions || 0 }}</p>
              </div>
            </div>
          </div>

          <!-- Communication Metrics -->
          <div class="metrics-category">
            <h3 class="category-title">Communication</h3>
            <div class="metrics-grid">
              <div class="metric-card">
                <p class="metric-label">Messages Sent</p>
                <p class="metric-value">{{ (metrics.messagesSent || 0) | number:'1.0-0' }}</p>
              </div>
            </div>
          </div>

          <!-- API Metrics -->
          <div class="metrics-category">
            <h3 class="category-title">API Performance</h3>
            <div class="metrics-grid">
              <div class="metric-card">
                <p class="metric-label">Total Requests</p>
                <p class="metric-value">{{ (metrics.apiRequests || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Errors</p>
                <p class="metric-value">{{ (metrics.apiErrors || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card" *ngIf="metrics.apiResponseTime?.mean">
                <p class="metric-label">Avg Response Time</p>
                <p class="metric-value">{{ (metrics.apiResponseTime.mean || 0) | number:'1.2-2' }}ms</p>
              </div>
              <div class="metric-card" *ngIf="metrics.apiResponseTime?.max">
                <p class="metric-label">Max Response Time</p>
                <p class="metric-value">{{ (metrics.apiResponseTime.max || 0) | number:'1.2-2' }}ms</p>
              </div>
            </div>
          </div>

          <!-- Database Metrics -->
          <div class="metrics-category" *ngIf="hasObjectKeys(metrics.databaseQueryTime)">
            <h3 class="category-title">Database Performance</h3>
            <div class="metrics-grid">
              <div class="metric-card" *ngIf="metrics.databaseQueryTime.mean">
                <p class="metric-label">Avg Query Time</p>
                <p class="metric-value">{{ (metrics.databaseQueryTime.mean || 0) | number:'1.2-2' }}ms</p>
              </div>
              <div class="metric-card" *ngIf="metrics.databaseQueryTime.max">
                <p class="metric-label">Max Query Time</p>
                <p class="metric-value">{{ (metrics.databaseQueryTime.max || 0) | number:'1.2-2' }}ms</p>
              </div>
              <div class="metric-card" *ngIf="metrics.databaseQueryTime.count">
                <p class="metric-label">Total Queries</p>
                <p class="metric-value">{{ (metrics.databaseQueryTime.count || 0) | number:'1.0-0' }}</p>
              </div>
            </div>
          </div>

          <!-- Security Metrics -->
          <div class="metrics-category">
            <h3 class="category-title">Security & Compliance</h3>
            <div class="metrics-grid">
              <div class="metric-card">
                <p class="metric-label">PHI Access Events</p>
                <p class="metric-value">{{ (metrics.phiAccessCount || 0) | number:'1.0-0' }}</p>
              </div>
              <div class="metric-card">
                <p class="metric-label">Breach Notifications</p>
                <p class="metric-value">{{ (metrics.breachNotifications || 0) | number:'1.0-0' }}</p>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!-- Users Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'users'">
        <section class="users-section">
          <div class="section-header">
            <h2 class="section-title">All Users</h2>
            <div class="users-count">
              <span class="count-badge">{{ users.length }} {{ users.length === 1 ? 'User' : 'Users' }}</span>
            </div>
          </div>
          <div class="table-container" *ngIf="users?.length">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Role</th>
                  <th>Status</th>
                  <th>Created</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let u of users">
                  <td>
                    <div class="td-content">
                      <span class="user-name">{{ u.firstName }} {{ u.lastName }}</span>
                    </div>
                  </td>
                  <td>
                    <span class="email-text">{{ u.email }}</span>
                  </td>
                  <td>
                    <span class="role-badge" [class.role-admin]="u.role === 'ADMIN'" [class.role-doctor]="u.role === 'DOCTOR'" [class.role-patient]="u.role === 'PATIENT'">
                      {{ u.role }}
                    </span>
                  </td>
                  <td>
                    <span class="status-badge" [class.status-active]="u.isActive" [class.status-inactive]="!u.isActive">
                      <span class="status-dot"></span>
                      {{ u.isActive ? 'Active' : 'Inactive' }}
                    </span>
                  </td>
                  <td>
                    <span class="date-text">{{ u.createdAt | date:'short' }}</span>
                  </td>
                  <td>
                    <div class="action-buttons">
                      <button 
                        class="action-btn action-btn-toggle" 
                        (click)="toggleUserStatus(u)"
                        [title]="u.isActive ? 'Deactivate User' : 'Activate User'"
                      >
                        <svg *ngIf="u.isActive" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <svg *ngIf="!u.isActive" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </button>
                      <button 
                        class="action-btn action-btn-delete" 
                        (click)="deleteUser(u)"
                        title="Delete User"
                      >
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="empty-state" *ngIf="!users || users.length === 0">
            <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <h3>No Users Found</h3>
            <p>There are no users to display at this time.</p>
          </div>
        </section>
      </div>

      <!-- Doctors Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'doctors'">
        <section class="users-section">
          <div class="section-header">
            <h2 class="section-title">Doctors</h2>
            <div class="users-count">
              <span class="count-badge">{{ doctors.length }} {{ doctors.length === 1 ? 'Doctor' : 'Doctors' }}</span>
            </div>
          </div>
          <div class="table-container" *ngIf="doctors?.length">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Medical License</th>
                  <th>Status</th>
                  <th>Verification</th>
                  <th>Created</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let d of doctors">
                  <td>
                    <div class="td-content">
                      <span class="user-name">{{ d.firstName }} {{ d.lastName }}</span>
                    </div>
                  </td>
                  <td>
                    <span class="email-text">{{ d.email }}</span>
                  </td>
                  <td>
                    <span *ngIf="d.medicalLicenseNumber" class="license-text">{{ d.medicalLicenseNumber }}</span>
                    <span *ngIf="!d.medicalLicenseNumber" class="license-missing">Not provided</span>
                  </td>
                  <td>
                    <span class="status-badge" [class.status-active]="d.isActive" [class.status-inactive]="!d.isActive">
                      <span class="status-dot"></span>
                      {{ d.isActive ? 'Active' : 'Inactive' }}
                    </span>
                  </td>
                  <td>
                    <span class="status-badge" [class.status-active]="d.isVerified" [class.status-inactive]="!d.isVerified">
                      <span class="status-dot"></span>
                      {{ d.isVerified ? 'Verified' : 'Unverified' }}
                    </span>
                  </td>
                  <td>
                    <span class="date-text">{{ d.createdAt | date:'short' }}</span>
                  </td>
                  <td>
                    <div class="action-buttons">
                      <button 
                        class="action-btn action-btn-toggle" 
                        (click)="toggleUserStatus(d)"
                        [title]="d.isActive ? 'Deactivate Doctor' : 'Activate Doctor'"
                      >
                        <svg *ngIf="d.isActive" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <svg *ngIf="!d.isActive" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </button>
                      <button 
                        *ngIf="d.medicalLicenseNumber"
                        class="action-btn" 
                        [class.action-btn-success]="!d.isVerified"
                        [class.action-btn-warning]="d.isVerified"
                        (click)="d.isVerified ? unverifyDoctor(d) : verifyDoctor(d)"
                        [title]="d.isVerified ? 'Unverify Doctor (Medical License: ' + d.medicalLicenseNumber + ')' : 'Verify Doctor (Medical License: ' + d.medicalLicenseNumber + ')'"
                      >
                        <svg *ngIf="!d.isVerified" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <svg *ngIf="d.isVerified" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
                        </svg>
                      </button>
                      <button 
                        *ngIf="!d.medicalLicenseNumber"
                        class="action-btn action-btn-disabled" 
                        disabled
                        title="Cannot verify: Medical license number is missing"
                      >
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M12 9V12M12 15H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </button>
                      <button 
                        class="action-btn action-btn-delete" 
                        (click)="deleteUser(d)"
                        title="Delete Doctor"
                      >
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="empty-state" *ngIf="!doctors || doctors.length === 0">
            <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 14V22M8 18H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <h3>No Doctors Found</h3>
            <p>There are no doctors registered in the system.</p>
          </div>
        </section>
      </div>

      <!-- Patients Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'patients'">
        <section class="users-section">
          <div class="section-header">
            <h2 class="section-title">Patients</h2>
            <div class="users-count">
              <span class="count-badge">{{ patients.length }} {{ patients.length === 1 ? 'Patient' : 'Patients' }}</span>
            </div>
          </div>
          <div class="table-container" *ngIf="patients?.length">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Status</th>
                  <th>Created</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let p of patients">
                  <td>
                    <div class="td-content">
                      <span class="user-name">{{ p.firstName }} {{ p.lastName }}</span>
                    </div>
                  </td>
                  <td>
                    <span class="email-text">{{ p.email }}</span>
                  </td>
                  <td>
                    <span class="status-badge" [class.status-active]="p.isActive" [class.status-inactive]="!p.isActive">
                      <span class="status-dot"></span>
                      {{ p.isActive ? 'Active' : 'Inactive' }}
                    </span>
                  </td>
                  <td>
                    <span class="date-text">{{ p.createdAt | date:'short' }}</span>
                  </td>
                  <td>
                    <div class="action-buttons">
                      <button 
                        class="action-btn action-btn-toggle" 
                        (click)="toggleUserStatus(p)"
                        [title]="p.isActive ? 'Deactivate Patient' : 'Activate Patient'"
                      >
                        <svg *ngIf="p.isActive" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <svg *ngIf="!p.isActive" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </button>
                      <button 
                        class="action-btn action-btn-delete" 
                        (click)="deleteUser(p)"
                        title="Delete Patient"
                      >
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="empty-state" *ngIf="!patients || patients.length === 0">
            <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <h3>No Patients Found</h3>
            <p>There are no patients registered in the system.</p>
          </div>
        </section>
      </div>


      <!-- Appointments Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'appointments'">
        <section class="users-section">
          <div class="section-header">
            <h2 class="section-title">All Appointments</h2>
            <div class="users-count">
              <span class="count-badge">{{ appointments.length }} {{ appointments.length === 1 ? 'Appointment' : 'Appointments' }}</span>
            </div>
          </div>
          <div class="table-container" *ngIf="appointments?.length">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Patient</th>
                  <th>Doctor</th>
                  <th>Date</th>
                  <th>Time</th>
                  <th>Duration</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let apt of appointments">
                  <td>
                    <div class="td-content">
                      <span class="user-name">{{ apt.patientFirstName }} {{ apt.patientLastName }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="td-content">
                      <span class="user-name">{{ apt.doctorFirstName }} {{ apt.doctorLastName }}</span>
                    </div>
                  </td>
                  <td>
                    <span class="date-text">{{ formatDate(apt.scheduledDate) }}</span>
                  </td>
                  <td>
                    <span class="date-text">{{ apt.scheduledTime }}</span>
                  </td>
                  <td>
                    <span>{{ apt.durationInMinutes }} min</span>
                  </td>
                  <td>
                    <span class="status-badge" [class.status-active]="apt.status === 'CONFIRMED' || apt.status === 'COMPLETED'" [class.status-inactive]="apt.status === 'CANCELLED'">
                      <span class="status-dot"></span>
                      {{ apt.status }}
                    </span>
                  </td>
                  <td>
                    <div class="action-buttons">
                      <button 
                        class="action-btn action-btn-delete" 
                        (click)="deleteAppointment(apt)"
                        title="Delete Appointment"
                      >
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M3 6H5H21M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="empty-state" *ngIf="!appointments || appointments.length === 0">
            <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 2V6M16 2V6M3 10H21M5 4H19C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <h3>No Appointments Found</h3>
            <p>There are no appointments in the system.</p>
          </div>
        </section>
      </div>

      <!-- Profile Tab -->
      <div class="tab-panel" *ngIf="activeTab === 'profile'">
        <section class="profile-section">
          <div class="profile-header-section">
            <div class="profile-header-content">
              <h2 class="section-title">My Profile</h2>
              <p class="section-description">View and manage your administrator account information</p>
            </div>
            <button class="edit-profile-btn" (click)="editProfile()" *ngIf="!showEditProfile">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Edit Profile
            </button>
          </div>
          
          <div class="profile-card" *ngIf="!showEditProfile">
            <div class="profile-header">
              <div class="profile-avatar">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="profile-name">
                <h3>{{ currentUser?.firstName }} {{ currentUser?.lastName }}</h3>
                <p>{{ currentUser?.email }}</p>
              </div>
            </div>
            <div class="profile-details">
              <div class="detail-row">
                <span class="detail-label">Phone Number</span>
                <span class="detail-value">{{ currentUser?.phoneNumber || 'N/A' }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">Role</span>
                <span class="detail-value">{{ currentUser?.role || 'N/A' }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">Account Status</span>
                <span class="detail-value">
                  <span class="status-badge" [ngClass]="currentUser?.isActive ? 'status-confirmed' : 'status-cancelled'">
                    {{ currentUser?.isActive ? 'Active' : 'Inactive' }}
                  </span>
                </span>
              </div>
            </div>
          </div>

          <!-- Edit Profile Form -->
          <div class="edit-profile-form" *ngIf="showEditProfile">
            <div class="form-header">
              <h3 class="form-title">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Edit Profile
              </h3>
              <p class="form-subtitle">Update your administrator account information</p>
            </div>
            <form class="profile-form" (ngSubmit)="updateUserProfile()" #profileForm="ngForm">
              <div class="form-section">
                <div class="section-header">
                  <h4 class="section-subtitle">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Basic Information
                  </h4>
                  <p class="section-description">Your personal contact details</p>
                </div>
                <div class="form-grid">
                  <div class="form-group">
                    <label class="form-label" for="firstName">
                      First Name
                      <span class="required-indicator">*</span>
                    </label>
                    <input 
                      type="text" 
                      id="firstName"
                      [(ngModel)]="editUserData.firstName" 
                      name="firstName" 
                      class="form-input" 
                      placeholder="{{ currentUser?.firstName || 'Enter first name' }}"
                      minlength="2"
                      maxlength="50"
                      pattern="[A-Za-z\s]{2,50}"
                    />
                    <span class="form-hint">2-50 characters, letters only</span>
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="lastName">
                      Last Name
                      <span class="required-indicator">*</span>
                    </label>
                    <input 
                      type="text" 
                      id="lastName"
                      [(ngModel)]="editUserData.lastName" 
                      name="lastName" 
                      class="form-input" 
                      placeholder="{{ currentUser?.lastName || 'Enter last name' }}"
                      minlength="2"
                      maxlength="50"
                      pattern="[A-Za-z\s]{2,50}"
                    />
                    <span class="form-hint">2-50 characters, letters only</span>
                  </div>
                  <div class="form-group">
                    <label class="form-label" for="phoneNumber">
                      Phone Number
                      <span class="required-indicator">*</span>
                    </label>
                    <input 
                      type="tel" 
                      id="phoneNumber"
                      [(ngModel)]="editUserData.phoneNumber" 
                      name="phoneNumber" 
                      class="form-input" 
                      placeholder="{{ currentUser?.phoneNumber || '+1234567890' }}"
                      minlength="10"
                      maxlength="15"
                      pattern="[+]?[0-9]{10,15}"
                    />
                    <span class="form-hint">10-15 digits, can include country code with +</span>
                  </div>
                </div>
              </div>

              <div class="form-actions">
                <button type="button" class="cancel-btn" (click)="showEditProfile = false">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                  Cancel
                </button>
                <button type="submit" class="submit-button" [disabled]="profileForm.invalid">
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  Save Changes
                </button>
              </div>
            </form>
          </div>
        </section>
      </div>

      <!-- HIPAA Audit Tab Panel -->
      <div class="tab-panel" *ngIf="activeTab === 'hipaa-audit'">
        <div class="section-header">
          <h2>HIPAA Audit Logs & Compliance</h2>
          <button class="primary-button" (click)="showCreateBreachNotification = !showCreateBreachNotification">
            Report Breach
          </button>
        </div>

        <!-- Create Breach Notification Form -->
        <div class="card" *ngIf="showCreateBreachNotification">
          <h3>Report Security Breach</h3>
          <form (ngSubmit)="createBreachNotification()">
            <div class="form-group">
              <label>Breach Type</label>
              <select [(ngModel)]="newBreachNotification.breachType" name="breachType" required>
                <option value="UNAUTHORIZED_ACCESS">Unauthorized Access</option>
                <option value="DISCLOSURE">Disclosure</option>
                <option value="LOSS">Loss</option>
                <option value="THEFT">Theft</option>
              </select>
            </div>
            <div class="form-group">
              <label>Incident Date</label>
              <input type="date" [(ngModel)]="newBreachNotification.incidentDate" name="incidentDate" required>
            </div>
            <div class="form-group">
              <label>Discovery Date</label>
              <input type="date" [(ngModel)]="newBreachNotification.discoveryDate" name="discoveryDate" required>
            </div>
            <div class="form-group">
              <label>Description</label>
              <textarea [(ngModel)]="newBreachNotification.description" name="description" required></textarea>
            </div>
            <div class="form-group">
              <label>Affected Patients Count</label>
              <input type="number" [(ngModel)]="newBreachNotification.affectedPatientsCount" name="affectedPatientsCount" required min="0">
            </div>
            <div class="form-group">
              <label>Mitigation Steps</label>
              <textarea [(ngModel)]="newBreachNotification.mitigationSteps" name="mitigationSteps" required></textarea>
            </div>
            <div class="form-actions">
              <button type="button" (click)="showCreateBreachNotification = false">Cancel</button>
              <button type="submit">Report Breach</button>
            </div>
          </form>
        </div>

        <!-- Audit Logs by Patient -->
        <div class="card">
          <h3>View Audit Logs by Patient</h3>
          <div class="form-group">
            <label>Select Patient</label>
            <select [(ngModel)]="selectedPatientIdForAudit" (change)="loadHipaaAuditLogsByPatient(selectedPatientIdForAudit!)">
              <option value="">Select Patient</option>
              <option *ngFor="let patient of patients" [value]="patient.id">
                {{ patient.firstName }} {{ patient.lastName }}
              </option>
            </select>
          </div>
          
          <!-- HIPAA Audit Logs -->
          <div *ngIf="selectedPatientIdForAudit && hipaaAuditLogs.length > 0" class="audit-logs-list">
            <h4>HIPAA Audit Logs</h4>
            <div *ngFor="let log of hipaaAuditLogs" class="audit-log-item">
              <div class="audit-log-header">
                <span class="action-type">{{ log.actionType }}</span>
                <span class="log-date">{{ formatDate(log.timestamp) }}</span>
              </div>
              <p><strong>User:</strong> {{ log.userName || log.userId }}</p>
              <p><strong>Resource:</strong> {{ log.resourceType }}</p>
              <p><strong>Success:</strong> {{ log.success ? 'Yes' : 'No' }}</p>
              <p *ngIf="log.failureReason"><strong>Failure Reason:</strong> {{ log.failureReason }}</p>
              <p *ngIf="log.ipAddress"><strong>IP Address:</strong> {{ log.ipAddress }}</p>
            </div>
          </div>

          <!-- PHI Access Logs -->
          <div *ngIf="selectedPatientIdForAudit" class="phi-access-section">
            <button class="secondary-button" (click)="loadPhiAccessLogsByPatient(selectedPatientIdForAudit!)">
              Load PHI Access Logs
            </button>
            <div *ngIf="phiAccessLogs.length > 0" class="phi-access-logs-list">
              <h4>PHI Access Logs</h4>
              <div *ngFor="let log of phiAccessLogs" class="phi-access-item">
                <div class="phi-access-header">
                  <span class="access-type">{{ log.accessType }}</span>
                  <span class="log-date">{{ formatDate(log.timestamp) }}</span>
                </div>
                <p><strong>User:</strong> {{ log.userName || log.userId }}</p>
                <p><strong>Accessed Fields:</strong> {{ log.accessedFields.join(', ') }}</p>
                <p><strong>Purpose:</strong> {{ log.purpose }}</p>
                <p *ngIf="log.ipAddress"><strong>IP Address:</strong> {{ log.ipAddress }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Breach Notifications -->
        <div class="card">
          <h3>Security Breach Notifications</h3>
          <div *ngIf="breachNotifications.length === 0" class="empty-state">No breach notifications</div>
          <div *ngFor="let breach of breachNotifications" class="breach-item">
            <div class="breach-header">
              <span class="breach-type">{{ breach.breachType }}</span>
              <span class="breach-status" [class]="'status-' + breach.status.toLowerCase()">
                {{ breach.status }}
              </span>
            </div>
            <p><strong>Description:</strong> {{ breach.description }}</p>
            <p><strong>Affected Patients:</strong> {{ breach.affectedPatientsCount }}</p>
            <p><strong>Mitigation Steps:</strong> {{ breach.mitigationSteps }}</p>
            <p class="timestamp">Reported: {{ formatDate(breach.createdAt) }}</p>
            <p *ngIf="breach.reportedAt" class="timestamp">Notified: {{ formatDate(breach.reportedAt) }}</p>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
