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

<div class="split-view">
  <!-- Left Column: Receipt Preview -->
  <div class="receipt-container">
    <h2>Receipt Preview</h2>
    <div class="preview-wrapper">
      <img *ngIf="previewUrl" [src]="previewUrl" class="receipt-preview" alt="Receipt Preview">
      <div *ngIf="!previewUrl" class="placeholder">
        <p>No receipt uploaded. Please select a file to begin extraction.</p>
      </div>
      
      <!-- Overlay for Manual Review -->
      <div *ngIf="extractionResponse?.needs_manual_review" class="review-banner">
        <lucide-icon [name]="AlertCircle" class="icon"></lucide-icon>
        <span>Review Required: Blurry or Ambiguous Data</span>
      </div>
    </div>
    
    <div class="upload-section">
      <input type="file" #fileInput (change)="onFileSelected($event)" style="display: none" accept="image/*">
      <button class="upload-btn" (click)="fileInput.click()">
        Upload Medical Receipt
      </button>
      <div *ngIf="isLoading" class="spinner">Extracting data...</div>
    </div>
  </div>

  <!-- Right Column: Data Entry Form -->
  <div class="form-container">
    <h2>Claim Information</h2>
    <form [formGroup]="claimForm">
      
      <!-- Provider Name -->
      <div class="form-field" [class.ai-unconfident]="confidenceScore < 0.8">
        <label for="provider_name">Provider Name</label>
        <input id="provider_name" type="text" formControlName="provider_name" placeholder="Clinic or Hospital Name">
        <div class="confidence-badge" *ngIf="extractionResponse">
          AI Confidence: {{ (extractionResponse.confidence_score * 100).toFixed(0) }}%
        </div>
      </div>

      <!-- Visit Date -->
      <div class="form-field" [class.ai-unconfident]="confidenceScore < 0.8">
        <label for="visit_date">Visit Date</label>
        <input id="visit_date" type="date" formControlName="visit_date">
        <div class="confidence-badge" *ngIf="extractionResponse">
          AI Confidence: {{ (extractionResponse.confidence_score * 100).toFixed(0) }}%
        </div>
      </div>

      <!-- Total Amount -->
      <div class="form-field" [class.ai-unconfident]="confidenceScore < 0.8">
        <label for="total_amount">Total Amount</label>
        <div class="amount-input">
          <input id="total_amount" type="number" formControlName="total_amount" step="0.01">
          <span class="currency-label">MYR</span>
        </div>
        <div class="confidence-badge" *ngIf="extractionResponse">
          AI Confidence: {{ (extractionResponse.confidence_score * 100).toFixed(0) }}%
        </div>
      </div>

      <div class="form-actions">
        <button type="submit" [disabled]="!claimForm.valid || isLoading" class="submit-btn">
          Confirm and Submit Claim
        </button>
      </div>
    </form>
  </div>
</div>