PalmOilRipenessDetection-Python/frontend/src/app/components/history/history.component.html

<div class="history-container">
  <div class="history-header glass-panel">
    <h1>Vault & History</h1>
    <p>View previous detections and industrial reports.</p>
    
    <div class="vault-tabs">
      <button [class.active]="viewMode === 'local'" (click)="switchTab('local')" class="tab-btn">
        <span class="icon">💻</span> Browser Cache
      </button>
      <button [class.active]="viewMode === 'remote'" (click)="switchTab('remote')" class="tab-btn">
        <span class="icon">☁️</span> Industrial Cloud (API)
      </button>
    </div>
  </div>

  <div *ngIf="loading" class="loading-state glass-panel">
    <div class="spinner"></div>
    <p>Synchronizing vault data...</p>
  </div>

  <div *ngIf="!loading && currentHistory.length === 0" class="empty-state glass-panel">
    <div class="empty-icon">📭</div>
    <p *ngIf="viewMode === 'local'">Your browser cache is empty. Run a local analysis to save records.</p>
    <p *ngIf="viewMode === 'remote'">No industrial records found on the server.</p>
  </div>

  <div *ngIf="!loading && currentHistory.length > 0" class="history-list">
    <div *ngFor="let record of currentHistory" 
         class="history-card glass-panel"
         [class.expanded]="isExpanded(record.timestamp, record.filename, record.archive_id)">
      
      <div class="card-header" (click)="toggleExpand(record.timestamp, record.filename, record.archive_id)">
        <div class="card-main-info">
          <span class="timestamp">{{ record.timestamp }}</span>
          <span class="filename">{{ record.filename }}</span>
          <span class="engine-badge">{{ record.engine }}</span>
        </div>
        <div class="summary-mini">
          <span *ngFor="let badge of getSummaryBadge(record.summary)" class="badge">{{ badge }}</span>
        </div>
        <div class="expand-icon">{{ isExpanded(record.timestamp, record.filename, record.archive_id) ? '▾' : '▸' }}</div>
      </div>

      <div *ngIf="isExpanded(record.timestamp, record.filename, record.archive_id)" class="card-details">
        <hr>
        <div class="details-grid">
          <div class="preview-side">
             <div *ngIf="record.imageData" class="image-wrapper">
                <img [src]="record.imageData" alt="Analysis Preview">
                <div *ngFor="let det of record.detections" 
                     class="detection-box"
                     [ngStyle]="getBoxStyles(det.box, record.dimensions)">
                </div>
             </div>
             <div *ngIf="!record.imageData" class="no-image-preview">
                <p>Cloud Archive: Metadata Only</p>
             </div>
          </div>
          <div class="data-side">
            <h3>Industrial Metrics</h3>
            <ul>
              <li><strong>Total Bunches:</strong> {{ record.detections.length }}</li>
              <li><strong>Archive ID:</strong> {{ record.archive_id || 'LOCAL_ONLY' }}</li>
              <li><strong>Inference:</strong> {{ record.inference_ms }} ms</li>
              <li><strong>Processing:</strong> {{ (record.processing_ms || 0).toFixed(1) }} ms</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>