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

<div class="dashboard-wrapper">
  <!-- Sidebar -->
  <aside class="sidebar">
    <div class="logo">
      <div class="logo-icon">AI</div>
      <span>SmartClaims</span>
    </div>
    
    <nav>
      <a routerLink="/" class="nav-item active">Dashboard</a>
    </nav>

  </aside>

  <!-- Main Content -->
  <main class="content">
    <header class="content-header">
      <div>
        <h1>Global Stats</h1>
        <p>Monitor and audit medical expenditure across the organization</p>
      </div>
      <div class="quick-actions">
        <button class="action-btn" routerLink="/new-claim">
          <lucide-icon [name]="Plus" class="icon-small"></lucide-icon> File New Claim
        </button>
      </div>
    </header>

    <div class="stats-overview">
      <div class="stat-card">
        <span class="label">Total Claims (Session)</span>
        <span class="value">{{ claims.length }}</span>
      </div>
      <div class="stat-card">
        <span class="label">Total Medical Payouts</span>
        <span class="value">RM {{ totalClaimed | number:'1.2-2' }}</span>
      </div>
    </div>

    <div class="claims-table-container">
      <table class="claims-table">
        <thead>
          <tr>
            <th>Employee</th>
            <th>Provider</th>
            <th>Visit Date</th>
            <th>Spent (Receipt)</th>
            <th>Claimed (Capped)</th>
            <th>Status</th>
            <th>Audit</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let claim of claims" (click)="viewDetail(claim)" class="clickable-row">
            <td>
              <div class="user-cell">
                <span class="user-name">{{ claim.submitted_by }}</span>
                <span class="user-dept">{{ claim.department }}</span>
              </div>
            </td>
            <td>{{ claim.provider_name || claim.extraction_data?.provider_name || 'N/A' }}</td>
            <td>{{ (claim.visit_date || claim.extraction_data?.visit_date) | date:'mediumDate' }}</td>
            <td>RM {{ claim.amount_spent | number:'1.2-2' }}</td>
            <td [class.capped-text]="claim.amount_claimed < claim.amount_spent">
              RM {{ claim.amount_claimed | number:'1.2-2' }}
            </td>
            <td>
              <span class="status-pill" *ngIf="claim.extraction_data"
                   [class.verified]="!claim.extraction_data.needs_manual_review" 
                   [class.review]="claim.extraction_data.needs_manual_review">
                {{ claim.extraction_data.needs_manual_review ? 'In Review' : 'AI Verified' }}
              </span>
              <span class="status-pill manually-verified" style="background: rgba(148, 163, 184, 0.1); color: #475569;" *ngIf="!claim.extraction_data">
                Manual Entry
              </span>
            </td>
            <td class="actions-cell">
               <lucide-icon [name]="ExternalLink" class="icon-tiny" title="View Audit"></lucide-icon>
               <button class="delete-icon-btn" (click)="deleteClaim($event, claim.id)" title="Delete Claim">
                  <lucide-icon [name]="Trash2" class="icon-tiny"></lucide-icon>
               </button>
            </td>
          </tr>
        </tbody>
      </table>
      <div *ngIf="loading" class="table-loading">Syncing secure data...</div>
      <div *ngIf="!loading && claims.length === 0" class="empty-table">No claims recorded in this session.</div>
    </div>
  </main>

  <!-- Detail Modal -->
  <div class="modal-overlay" *ngIf="selectedClaim" (click)="closeDetail()">
    <div class="modal-content" (click)="$event.stopPropagation()">
      <button class="close-btn" (click)="closeDetail()">
        <lucide-icon [name]="X" class="icon-small"></lucide-icon>
      </button>
      
      <div class="modal-header">
        <h2>Claim Audit Details</h2>
        <span class="claim-id">Transaction ID: {{ selectedClaim.id.substring(0,8) }}</span>
      </div>

      <div class="modal-body">
        <div class="audit-grid">
          <div class="receipt-audit" *ngIf="selectedClaim.extraction_data">
            <h3>Evidence Preview</h3>
            <div class="mock-receipt-view">
              <lucide-icon [name]="FileText" class="icon-large" style="margin-bottom: 1rem; color: var(--text-secondary)"></lucide-icon>
              <p>Medical Receipt Evidence</p>
              <p style="font-size: 0.8rem">Verified by OpenAI 4o-mini</p>
            </div>
            <div class="extraction-summary">
               <h4>AI Extracted Items:</h4>
               <ul>
                 <li *ngFor="let item of selectedClaim.extraction_data.items">{{ item }}</li>
               </ul>
            </div>
          </div>
          <div class="receipt-audit" *ngIf="!selectedClaim.extraction_data" style="display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;">
             <lucide-icon [name]="FileText" class="icon-large" style="margin-bottom: 1rem; color: var(--text-secondary); opacity: 0.5;"></lucide-icon>
             <h3 style="margin-bottom: 0.5rem; color: var(--text-secondary)">Manual Entry</h3>
             <p style="font-size: 0.85rem; color: var(--text-secondary)">No AI assistant or receipt evidence was provided for this claim.</p>
          </div>

          <div class="financial-audit">
            <h3>Claim Metadata & Policy</h3>
            
            <div class="audit-item">
              <span class="label">Benefit Category:</span>
              <span class="val">{{ selectedClaim.extraction_data?.claim_category || 'General' }}</span>
            </div>
            <div class="audit-item">
              <span class="label">Treatment Type:</span>
              <span class="val">{{ selectedClaim.treatment_type }}</span>
            </div>
            <div class="audit-item">
              <span class="label">Cost Center:</span>
              <span class="val">{{ selectedClaim.cost_center }}</span>
            </div>

            <div class="audit-divider"></div>

            <div class="audit-item">
              <span class="label">Receipt Ref:</span>
              <span class="val">{{ selectedClaim.extraction_data?.receipt_ref_no || 'N/A' }}</span>
            </div>
            <div class="audit-item">
              <span class="label">Clinic Reg No:</span>
              <span class="val">{{ selectedClaim.extraction_data?.clinic_reg_no || 'N/A' }}</span>
            </div>
            <div class="audit-item">
              <span class="label">Diagnosis:</span>
              <span class="val" style="text-align: right; max-width: 60%;">{{ selectedClaim.extraction_data?.diagnosis_brief || 'Manual Entry' }}</span>
            </div>

            <div class="audit-divider"></div>

            <div class="audit-item">
              <span class="label">Gross Spent:</span>
              <span class="val">RM {{ selectedClaim.amount_spent | number:'1.2-2' }}</span>
            </div>
            <div class="audit-item">
              <span class="label">Policy Ceiling:</span>
              <span class="val">{{ selectedClaim.amount_claimed < selectedClaim.amount_spent ? 'Capped' : 'N/A' }}</span>
            </div>
            <div class="audit-item" *ngIf="selectedClaim.amount_claimed < selectedClaim.amount_spent">
              <span class="label">Deduction:</span>
              <span class="val" style="color: #ef4444">- RM {{ (selectedClaim.amount_spent - selectedClaim.amount_claimed) | number:'1.2-2' }}</span>
            </div>
            
            <div class="audit-item total">
              <span class="label">Final Payout:</span>
              <span class="val">RM {{ selectedClaim.amount_claimed | number:'1.2-2' }}</span>
            </div>

            <div *ngIf="selectedClaim.extraction_data">
              <div class="ai-confidence-box">
                 <span class="label">AI Confidence Score</span>
                 <div class="conf-bar">
                   <div class="conf-fill" [style.width.%]="selectedClaim.extraction_data.confidence_score * 100"></div>
                 </div>
                 <span class="conf-val">{{ (selectedClaim.extraction_data.confidence_score * 100).toFixed(1) }}% Match</span>
              </div>

              <div class="ai-reasoning-summary" style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color)">
                <h4 style="font-size: 0.9rem; margin-bottom: 0.5rem">AI Reasoning:</h4>
                <p style="font-size: 0.85rem; color: var(--text-secondary); font-style: italic">"{{ selectedClaim.extraction_data.ai_reasoning }}"</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>