Personal-Test-Ground-NG/src/app/payment/payment.component.html

<h1>{{ isMobile ? 'Scan QR & Authenticate to Pay' : 'Scan to make Payment!' }}</h1>

<!-- Loading State -->
<div *ngIf="loading">
  <p>Loading…</p>
</div>

<!-- Web QR Code + Payment List -->
<div *ngIf="!isMobile && !loading && qrData"
     style="display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap;">

  <!-- QR Code -->
  <div>
    <qrcode [qrdata]="qrData" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
  </div>

  <!-- Payment List -->
  <div style="min-width: 300px; flex: 1;">
    <h2>Payment List</h2>
    <table style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr>
          <th style="text-align: left; padding: 0.5rem; border-bottom: 1px solid #ccc;">Name</th>
          <th style="text-align: left; padding: 0.5rem; border-bottom: 1px solid #ccc;">Time</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let payee of paymentList">
          <td style="padding: 0.5rem; border-bottom: 1px solid #eee;">{{ payee.name }}</td>
          <td style="padding: 0.5rem; border-bottom: 1px solid #eee;">
            {{ payee.time | date: 'medium' }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<!-- If unable to generate QR -->
<div *ngIf="!isMobile && !loading && !qrData">
  <p>Unable to generate QR code.</p>
</div>

<!-- Mobile Section -->
<div *ngIf="isMobile && !loading">
  <div *ngIf="scannedResult; else noResult">
    <p><strong>Scanned Result:</strong></p>
    <code>{{ scannedResult }}</code>
  </div>
  <ng-template #noResult>
    <p>Tap below to scan a QR code and authenticate payment.</p>
  </ng-template>

  <button (click)="startScan()">📷 Scan & Pay</button>

  <div *ngIf="postResponse" style="margin-top: 1rem;">
    <strong>Server Response:</strong>
    <p>{{ postResponse }}</p>
  </div>
</div>