src/app/recordpage/recordpage.component.html

<!-- Modern UI header with logo and PyDetect title -->
<div class="site-header">
  <div class="header-inner">
    <div class="logo-cluster">
      <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
        <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
      </span>
      <div class="py-detect-title-header">
        <span class="py-letter p">P</span>
        <span class="py-letter y">Y</span>
        <span class="py-shape"></span>
        <span class="py-letter d">D</span>
        <span class="py-letter e">E</span>
        <span class="py-letter t">T</span>
        <span class="py-letter e2">E</span>
        <span class="py-letter c">C</span>
        <span class="py-letter t2">T</span>
      </div>
    </div>
  </div>
</div>

<!-- Salesforce-style card/table content below the header -->
<div class="record-card">
  <div class="record-header">
    <div class="record-title-group">
      <span class="record-title">Police Investigation Records</span>
      <select class="record-dropdown">
        <option>Recently Viewed</option>
        <option>All Records</option>
      </select>
    </div>
    <div class="record-header-actions">
      <input class="record-search" type="text" [(ngModel)]="q" placeholder="Search this list..." />
    </div>
  </div>

  <!-- Analytics summary panel -->
  <div class="analytics-summary">
    <div class="summary-card total">
      <div class="summary-label">Total Cases</div>
      <div class="summary-value">{{ totalCases }}</div>
    </div>
    <div class="summary-card open">
      <div class="summary-label">Open</div>
      <div class="summary-value">{{ openCases }}</div>
    </div>
    <div class="summary-card closed">
      <div class="summary-label">Closed</div>
      <div class="summary-value">{{ closedCases }}</div>
    </div>
  </div>

  <div class="record-meta" style="padding: 8px 24px 0 24px; color: #6b7280; font-size: 0.98em;">
    {{ rows.length }} items • Updated a few seconds ago
  </div>

  <!-- Filter bar above the table -->
  <div class="filter-bar">
    <select [(ngModel)]="filterCrimeType">
      <option value="">Crime Type</option>
      <option *ngFor="let type of crimeTypes">{{ type }}</option>
    </select>
    <select [(ngModel)]="filterStatus">
      <option value="">Status</option>
      <option *ngFor="let status of statusTypes">{{ status }}</option>
    </select>
    <select [(ngModel)]="filterLocation">
      <option value="">Location</option>
      <option *ngFor="let loc of locations">{{ loc }}</option>
    </select>
    <select [(ngModel)]="filterOfficer">
      <option value="">Officer</option>
      <option *ngFor="let officer of officers">{{ officer }}</option>
    </select>
    <button (click)="applyFilters()">Apply</button>
    <button (click)="resetFilters()">Reset</button>
  </div>

  <table class="record-table">
    <thead>
      <tr>
        <th>#</th>
        <th>Case ID</th>
        <th>Status</th>
        <th>Crime Type</th>
        <th>Date &amp; Time</th>
        <th>Location</th>
        <th>Investigation Officer</th>
        <th>Suspect Name</th>
        <th>Reported By</th>
        <th>Last Updated</th>
        <th>Verified By</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let c of rows, let i = index">
        <td>{{ i + 1 }}</td>
        <td><a (click)="openDetails(c, i)">{{ c.caseId || '—' }}</a></td>
        <td>
          <span class="status-label"
                [ngClass]="{
                  'status-open': c.status === 'Open',
                  'status-under': c.status === 'Under Investigation',
                  'status-closed': c.status === 'Closed'
                }">
            {{ c.status || '—' }}
          </span>
        </td>
        <td>{{ c.crime || '—' }}</td>
        <td>{{ c.dateTime ? (c.dateTime | date:'M/d/yyyy HH:mm') : '—' }}</td>
        <td>{{ c.police?.address || '—' }}</td>
        <td>{{ c.police?.name || '—' }}</td>
        <td>{{ c.accused?.name || '—' }}</td>
        <td>{{ c.reportedBy || '—' }}</td>
        <td>{{ c.lastUpdated ? (c.lastUpdated | date:'M/d/yyyy HH:mm') : '—' }}</td>
        <td>{{ c.verifiedBy || '—' }}</td>
        <td>
          <button class="icon-btn verify" (click)="verifyCase(i)" title="Verify">
            <i class="fas fa-user-check"></i>
          </button>
          <button class="icon-btn view" (click)="openDetails(c, i)" title="View">
            <i class="fas fa-eye"></i>
          </button>
          <button class="icon-btn edit" (click)="editCase(c, i)" title="Edit">
            <i class="fas fa-edit"></i>
          </button>
          <button class="icon-btn delete" (click)="deleteCase(i)" title="Delete">
            <i class="fas fa-trash"></i>
          </button>
        </td>
      </tr>
      <tr *ngIf="rows.length === 0">
        <td colspan="12" class="empty">No records found.</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Modal -->
<!-- Modal white blur overlay for background -->
<div class="modal-blur-overlay" *ngIf="showDetails"></div>

<!-- Modal backdrop and modal as before -->
<div class="modal-backdrop" *ngIf="showDetails" (click)="closeDetails()"></div>
<div class="modal" *ngIf="showDetails" role="dialog" aria-modal="true" aria-labelledby="detailsTitle">
  <div class="modal-header">
    <h2 id="detailsTitle">Case Details</h2>
  </div>
  <!-- View Modal: Show all subgroup pills and fields for each section -->
  <div class="modal-body" *ngIf="selectedCase as sc">
    <div class="modal-sections-grid">
      <ng-container *ngFor="let sectionKey of ['crime', 'suspect', 'notes']">
        <div class="section-block">
          <div class="section-title">{{ sectionKey === 'crime' ? 'Crime Details' : sectionKey === 'suspect' ? 'Suspect Details' : 'Evidence and Documents' }}</div>
          <div class="subgroup-pills">
            <button *ngFor="let subgroup of getSubgroups(sectionKey)"
                    [class.active]="selectedSubgroup[sectionKey] === subgroup"
                    (click)="selectSubgroup(sectionKey, subgroup)">
              {{ subgroup }}
            </button>
          </div>
          <div class="fields-grid">
            <ng-container *ngFor="let field of getFieldsForSubgroup(sectionKey, selectedSubgroup[sectionKey])">
              <div class="field-card">
                <span>{{ field }}</span>
                <b>{{ getFieldValue(sc, sectionKey, field) }}</b>
              </div>
            </ng-container>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn" (click)="closeDetails()">Close</button>
  </div>
</div>