revert

src/app/case-details-page/case-details-page.component.css

@@ -1,9 +1,5 @@
 @import '../recordpage/recordpage.component.css';
 
-body, html {
-  overflow: auto !important;
-}
-
 body, main.content {
   background: #f4f6fa;
   min-height: 100vh;
@@ -425,15 +421,6 @@ hr {
   max-width: 320px;
 }
 
-.next-action-col {
-  text-align: left;
-  min-width: 120px;
-  padding-left: 0;
-  padding-right: 0;
-  font-weight: 500;
-  color: #2563eb;
-}
-
 @media (max-width: 700px) {
   .actions .btn {
     min-width: 120px;
@@ -462,49 +449,19 @@ hr {
   }
 }
 
-/* table layout for case details page */
-.record-table {
+/* Make all table columns equal width */
+.records {
+  table-layout: fixed;
   width: 100%;
-  table-layout: auto;
-  border-collapse: collapse;
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
-
-.record-table th, .record-table td {
-  padding-left: 12px;
-  padding-right: 12px;
-  word-break: break-word;
-  white-space: normal;
-  box-sizing: border-box;
-  border-bottom: 1px solid #e5e7eb; /* consistent row border */
-}
-
-.record-table tr:last-child td {
-  border-bottom: none;
 }
-
-th.actions, td.actions {
-  text-align: left;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-td.actions {
+.records th,
+.records td {
+  width: 16.66%; /* 6 columns, 100/6 = 16.66% */
+  text-align: center;
   vertical-align: middle;
-}
-
-.icon-btn.view {
-  margin: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #2563eb;
-  font-size: 1.4em;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .custom-active-cases-label {
@@ -518,353 +475,4 @@ td.actions {
   right: 32vw;
 }
 
-.filter-bar select,
-.filter-bar .filter-date {
-  padding: 6px 18px;
-  border-radius: 6px;
-  border: 1.5px solid #cbd5e1;
-  font-size: 1em;
-  color: #2563eb;
-  background: #fff;
-  font-weight: 600;
-  outline: none;
-  transition: border 0.15s;
-  min-width: 160px;
-  margin-right: 4px;
-}
-.filter-bar select:focus,
-.filter-bar .filter-date:focus {
-  border: 1.5px solid #38bdf8;
-}
-.date-group {
-  display: inline-flex;
-  align-items: center;
-  font-family: inherit;
-  color: #a86a00;
-  font-size: 1.08em;
-  font-weight: 500;
-  margin-right: 8px;
-  gap: 2px;
-}
-.date-label {
-  margin: 0 4px 0 4px;
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-.calendar-ico {
-  font-size: 1.1em;
-  margin-left: 2px;
-  vertical-align: middle;
-}
-.filter-date {
-  border: none;
-  background: transparent;
-  color: #a86a00;
-  font-size: 1em;
-  font-weight: 600;
-  outline: none;
-  min-width: 90px;
-  margin-left: 2px;
-}
-.filter-date::-webkit-input-placeholder { color: #a86a00; }
-.filter-date:-moz-placeholder { color: #a86a00; }
-.filter-date::-moz-placeholder { color: #a86a00; }
-.filter-date:-ms-input-placeholder { color: #a86a00; }
-
-.fullpage-details {
-  width: 100vw;
-  min-height: 100vh;
-  background: #f8fafc;
-  padding: 32px 0 32px 0;
-  position: relative;
-  z-index: 1;
-}
-.details-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 8px 32px rgba(30,41,59,0.12);
-  padding: 32px 48px;
-}
-.btn.back-btn {
-  margin: 0 0 24px 0;
-  background: #64748b;
-  color: #fff;
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 1.1rem;
-  padding: 10px 28px;
-  border: none;
-  cursor: pointer;
-}
-
-.fullpage-popup-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  width: 100vw;
-  height: 100vh;
-  background: #f8fafc;
-  z-index: 9999;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-body.popup-open {
-  overflow: hidden !important;
-}
-
-.fullpage-popup-content {
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 8px 32px rgba(30,41,59,0.18);
-  margin: 40px 0;
-  max-width: 1200px;
-  width: 90vw;
-  min-height: 80vh;
-  padding: 32px 48px;
-  position: relative;
-}
-
-/* --- Section Card Styles --- */
-.details-section-card {
-  background: #fff;
-  border-radius: 22px;
-  box-shadow: 0 4px 24px rgba(30,41,59,0.10);
-  border-left: 6px solid #38bdf8;
-  border-right: 2px solid #e0f2fe;
-  padding: 32px 36px 32px 36px;
-  margin-bottom: 0;
-  margin-top: 32px;
-  animation: fadeInUp 0.6s cubic-bezier(.23,1.01,.32,1) both;
-}
-@keyframes fadeInUp {
-  from { opacity: 0; transform: translateY(32px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.section-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #2563eb;
-  margin-bottom: 18px;
-  letter-spacing: 0.5px;
-}
-
-.subgroup-pills {
-  display: flex;
-  gap: 18px;
-  margin-bottom: 28px;
-  flex-wrap: wrap;
-}
-.subgroup-pills button {
-  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
-  color: #fff;
-  font-weight: 700;
-  border: none;
-  border-radius: 22px;
-  padding: 10px 32px;
-  font-size: 1.08em;
-  box-shadow: 0 2px 12px rgba(56,189,248,0.13);
-  cursor: pointer;
-  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
-  outline: none;
-  margin-bottom: 4px;
-}
-.subgroup-pills button.active,
-.subgroup-pills button:focus {
-  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
-  box-shadow: 0 4px 16px rgba(56,189,248,0.18);
-  transform: translateY(-2px) scale(1.04);
-}
-
-.fields-table-2col {
-  display: flex;
-  flex-direction: row;
-  gap: 0;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-.fields-col {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.fields-col-labels {
-  min-width: 260px;
-  text-align: left;
-}
-.fields-col-values {
-  min-width: 220px;
-  text-align: right;
-}
-.field-label {
-  color: #22223b;
-  font-weight: 500;
-  font-size: 1.08em;
-  padding: 2px 0;
-}
-.field-value {
-  color: #22223b;
-  font-weight: 700;
-  font-size: 1.08em;
-  padding: 2px 0;
-  letter-spacing: 0.5px;
-}
-
-/* --- Card Container and Title --- */
-.case-details-title {
-  font-size: 2.2rem;
-  font-weight: 700;
-  color: #22223b;
-  margin-bottom: 32px;
-  margin-left: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-}
-
-.btn.close-btn {
-  background: none;
-  color: #64748b;
-  border: none;
-  font-size: 2.2rem;
-  font-weight: 700;
-  cursor: pointer;
-  position: absolute;
-  right: 0;
-  top: 0;
-  line-height: 1;
-  padding: 0 16px;
-  transition: color 0.15s;
-}
-.btn.close-btn:hover {
-  color: #2563eb;
-}
-
-.btn.close-btn-bottom {
-  position: absolute;
-  right: 32px;
-  top: 32px;
-  background: #2563eb;
-  color: #fff;
-  border: none;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-  font-size: 2.2rem;
-  font-weight: 700;
-  box-shadow: 0 4px 16px rgba(56,189,248,0.18);
-  cursor: pointer;
-  z-index: 10001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
-}
-  .btn.close-btn-bottom:hover {
-    background: #38bdf8;
-    color: #22223b;
-  }
-
-.progress-col {
-  text-align: left;
-  min-width: 90px;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.progress-dot {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  display: inline-block;
-  margin-right: 6px;
-  vertical-align: middle;
-  box-shadow: 0 2px 8px rgba(56,189,248,0.10);
-}
-.progress-dot.blue {
-  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
-}
-.progress-dot.green {
-  background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%);
-}
-.progress-check {
-  font-size: 1.2em;
-  color: #34d399;
-  background: #d1fae5;
-  border-radius: 4px;
-  padding: 2px 4px;
-  display: inline-block;
-  margin-right: 6px;
-  vertical-align: middle;
-}
-.progress-value {
-  font-weight: 700;
-  font-size: 1em;
-  color: #22223b;
-  vertical-align: middle;
-}
-
-.priority-pill {
-  display: inline-flex;
-  align-items: center;
-  font-weight: bold;
-  font-size: 0.98em;
-  padding: 2px 12px 2px 8px;
-  border-radius: 16px;
-  margin-right: 2px;
-  letter-spacing: 0.02em;
-}
-.priority-high {
-  background: #fee2e2;
-  color: #b91c1c;
-}
-.priority-medium {
-  background: #fef9c3;
-  color: #ca8a04;
-}
-.priority-low {
-  background: #dcfce7;
-  color: #15803d;
-}
-
-.evidence-upload-section {
-  margin-top: 32px;
-  padding: 16px;
-  background: #f3f4f6;
-  border-radius: 12px;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
-}
-.evidence-upload-section h3 {
-  margin-bottom: 12px;
-  font-size: 1.1em;
-  color: #2563eb;
-}
-.evidence-list {
-  margin-top: 10px;
-}
-.evidence-file {
-  display: flex;
-  align-items: center;
-  font-size: 0.98em;
-  margin-bottom: 6px;
-  color: #374151;
-}
-.evidence-file i {
-  margin-right: 8px;
-  color: #2563eb;
-}
-
-
-
-
-
-
-
-
 

src/app/case-details-page/case-details-page.component.html

@@ -43,69 +43,30 @@
       <div class="summary-label">Closed</div>
       <div class="summary-value">{{ closedCases }}</div>
     </div>
-    <div class="summary-card review">
-      <div class="summary-label">Pending Review</div>
-      <div class="summary-value">{{ reviewCases }}</div>
-    </div>
   </div>
 
   <div class="record-meta" style="padding: 8px 24px 0 24px; color: #6b7280; font-size: 0.98em;">
     {{ filteredCases.length }} items • Updated a few seconds ago
   </div>
 
-  <div class="filter-bar">
-    <select [(ngModel)]="filterStatus">
-      <option value="">Status</option>
-      <option *ngFor="let status of statusTypes">{{ status }}</option>
-    </select>
-    <select [(ngModel)]="filterCrimeType">
-      <option value="">Crime Type</option>
-      <option *ngFor="let type of crimeTypes">{{ type }}</option>
-    </select>
-    <button (click)="applyFilters()">Apply</button>
-    <button (click)="resetFilters()">Reset</button>
-  </div>
-
-  <!-- Table/list view always visible -->
   <table class="record-table">
     <thead>
       <tr>
         <th>#</th>
         <th>Case ID</th>
-        <th>Priority</th>
         <th>Status</th>
         <th>Crime Type</th>
         <th>Date &amp; Time</th>
         <th>Location</th>
         <th>Suspect Name</th>
         <th>Last Updated</th>
-        <th class="progress-col">Progress</th>
-        <th class="next-action-col">Next Action</th>
-        <th class="actions">Actions</th>
+        <th>Actions</th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let c of filteredCases; let i = index">
         <td>{{ i + 1 }}</td>
-        <td class="mono">
-          <a (click)="openDetails(c)" style="cursor:pointer; color:#2563eb; text-decoration:underline;">
-            {{ c.caseId || '—' }}
-          </a>
-        </td>
-        <td>
-          <ng-container [ngSwitch]="getCasePriority(c)">
-            <span *ngSwitchCase="'High'" class="priority-pill priority-high" title="High Priority">
-              🔴 High
-            </span>
-            <span *ngSwitchCase="'Medium'" class="priority-pill priority-medium" title="Medium Priority">
-              🟡 Medium
-            </span>
-            <span *ngSwitchCase="'Low'" class="priority-pill priority-low" title="Low Priority">
-              🟢 Low
-            </span>
-            <span *ngSwitchDefault style="color:#6b7280;">—</span>
-          </ng-container>
-        </td>
+        <td class="mono">{{ c.caseId || '—' }}</td>
         <td>
           <span class="status-label"
                 [ngClass]="{
@@ -118,117 +79,41 @@
         </td>
         <td>{{ c.crime || '—' }}</td>
         <td>{{ c.dateTime ? (c.dateTime | date:'M/d/yyyy HH:mm') : '—' }}</td>
-        <td>{{ c.police.address || '—' }}</td>
-        <td>{{ c.accused.name || '—' }}</td>
+        <td>{{ c.police?.address || '—' }}</td>
+        <td>{{ c.accused?.name || '—' }}</td>
         <td>{{ c.lastUpdated ? (c.lastUpdated | date:'M/d/yyyy HH:mm') : '—' }}</td>
-        <td class="progress-col">
-          <ng-container [ngSwitch]="getProgressValue(c)">
-            <ng-container *ngSwitchCase="100">
-              <span class="progress-check">&#x2714;</span>
-              <span class="progress-value">100%</span>
-            </ng-container>
-            <ng-container *ngSwitchCase="75">
-              <span class="progress-dot green"></span>
-              <span class="progress-value">75%</span>
-            </ng-container>
-            <ng-container *ngSwitchDefault>
-              <span class="progress-dot blue"></span>
-              <span class="progress-value">{{ getProgressValue(c) }}%</span>
-            </ng-container>
-          </ng-container>
-        </td>
-        <td class="next-action-col">
-          {{ getNextActionMessage(c) }}
-        </td>
         <td class="actions">
-          <button type="button" class="icon-btn view" (click)="openDetails(c)" title="View Case Details" aria-label="View Case Details">
+          <button type="button" class="icon-btn view" (click)="openDetails(c)" title="View Details">
             <i class="fas fa-eye"></i>
           </button>
-          <button *ngIf="isInvestigator()" type="button" class="icon-btn upload" (click)="showEvidencePanel(c)" title="Upload Evidence" aria-label="Upload Evidence">
-            <i class="fas fa-upload"></i>
-          </button>
         </td>
       </tr>
       <tr *ngIf="filteredCases.length === 0">
-        <td colspan="12" class="empty">No records found.</td>
+        <td colspan="9" class="empty">No records found.</td>
       </tr>
     </tbody>
   </table>
+</div>
 
-  <!-- Evidence Upload Section for Investigators only, below the table -->
-  <div *ngIf="isInvestigator() && selectedCase" class="evidence-upload-section">
-    <h3>Upload Evidence for Case: {{ selectedCase.caseId }}</h3>
-    <input type="file" multiple (change)="onEvidenceUpload($event)" />
-    <div class="evidence-list" *ngIf="uploadedEvidence.length">
-      <div *ngFor="let file of uploadedEvidence" class="evidence-file">
-        <i class="fas fa-file-upload"></i> {{ file.name }}
-      </div>
-    </div>
+<!-- Modal white blur overlay for background -->
+<div class="modal-blur-overlay" *ngIf="showDetails"></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>
-
-  <!-- Evidence Upload Panel for selected case -->
-  <div *ngIf="isInvestigator() && evidencePanelCase && evidencePanelCase.caseId" class="evidence-upload-section">
-    <hr class="evidence-hr" />
-    <div class="evidence-title">
-      <i class="fas fa-folder-open evidence-folder"></i>
-      Evidence Upload for Case: {{ evidencePanelCase.caseId }}
-    </div>
-    <hr class="evidence-hr" />
-    <div class="evidence-type-tabs">
-      <button [class.active]="evidenceType === 'Document'" (click)="setEvidenceType('Document')">Document</button>
-      <button [class.active]="evidenceType === 'Photo'" (click)="setEvidenceType('Photo')">Photo</button>
-    </div>
-    <div class="evidence-actions">
-      <label class="evidence-file-label">
-        [Choose File]
-        <input type="file" multiple (change)="onEvidenceFileSelectType($event)" style="display:none;" />
-      </label>
-    </div>
-    <hr class="evidence-hr" />
-    <div class="evidence-list-block">
-      <div class="evidence-list-title">Uploaded Evidence ({{ evidenceType }}):</div>
-      <div *ngFor="let file of evidenceFiles[evidencePanelCase.caseId][evidenceType]" class="evidence-file-row">
-        <i [ngClass]="getEvidenceIcon(file.name)" class="evidence-file-icon"></i>
-        <span class="evidence-file-name">{{ file.name }}</span>
-        <a class="evidence-view-link" href="#" (click)="viewEvidenceFile(file)">(View)</a>
-      </div>
-    </div>
-    <hr class="evidence-hr" />
+  <div class="modal-body" *ngIf="selectedCase as sc">
+    <div class="detail-row"><span>Case ID</span><b>{{ sc.caseId || '—' }}</b></div>
+    <div class="detail-row"><span>Status</span><b>{{ sc.status || '—' }}</b></div>
+    <div class="detail-row"><span>Crime Type</span><b>{{ sc.crime || '—' }}</b></div>
+    <div class="detail-row"><span>Date & Time</span><b>{{ sc.dateTime ? (sc.dateTime | date:'M/d/yyyy HH:mm') : '—' }}</b></div>
+    <div class="detail-row"><span>Location</span><b>{{ sc.police.address || '—' }}</b></div>
+    <div class="detail-row"><span>Suspect Name</span><b>{{ sc.accused.name || '—' }}</b></div>
+    <div class="detail-row"><span>Last Updated</span><b>{{ sc.lastUpdated ? (sc.lastUpdated | date:'M/d/yyyy HH:mm') : '—' }}</b></div>
+    <hr />
+    <div class="detail-row"><span>Notes / Explanation</span><b>{{ sc.police.information || '—' }}</b></div>
   </div>
-
-  <!-- Full-page overlay for details (no evidence upload here) -->
-  <div *ngIf="selectedCase" class="fullpage-popup-overlay">
-    <div class="fullpage-popup-content">
-      <div class="case-details-title">Case Details</div>
-      <div class="details-sections">
-        <ng-container *ngFor="let sectionKey of ['crime', 'suspect', 'notes']">
-          <div class="details-section-card">
-            <div class="section-title">{{ sections[sectionKey].title }}</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-table-2col">
-              <div class="fields-col fields-col-labels">
-                <div class="field-label" *ngFor="let field of getFieldsForSubgroup(sectionKey, selectedSubgroup[sectionKey])">
-                  {{ field }}
-                </div>
-              </div>
-              <div class="fields-col fields-col-values">
-                <div class="field-value" *ngFor="let field of getFieldsForSubgroup(sectionKey, selectedSubgroup[sectionKey])">
-                  {{ getFieldValue(selectedCase, sectionKey, field) }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </ng-container>
-      </div>
-      <button class="btn close-btn-bottom" (click)="closeDetails()" title="Close">&times;</button>
-    </div>
+  <div class="modal-footer">
+    <button type="button" class="btn" (click)="closeDetails()">Close</button>
   </div>
 </div>
-<!-- End of record-card -->
 

src/app/case-details-page/case-details-page.component.ts

@@ -2,8 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
 
-type EvidenceType = 'Document' | 'Photo';
-
 @Component({
   selector: 'app-case-details-page',
   templateUrl: './case-details-page.component.html',
@@ -16,58 +14,6 @@ export class CaseDetailsPageComponent implements OnInit {
   username: string = '';
   q: string = '';
 
-  filterStatus: string = '';
-  filterCrimeType: string = '';
-  filterDateFrom: string = '';
-  filterDateTo: string = '';
-
-  sections: any = {
-    crime: { 
-      title: 'Crime Details', 
-      subgroups: { 
-        'Identification & Timing': ['Case ID', 'FIR / Ref #', 'Crime Type', 'Case Category', 'Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered', 'Country', 'State', 'District', 'Number of Victims', 'Brief Description'], 
-        'Location & People': ['Location', 'Jurisdiction / PS', 'Scene Type', 'Reported By', 'Reported Contact', 'Witness Count', 'Victim Name', 'Victim Contact', 'Victim Summary', 'Suspected Offender Known?', 'Suspect Link'], 
-        'Offence & Context': ['Legal Sections / Charges', 'Offence Category', 'Offence Description', 'Suspected Motive', 'Confirmed Motive', 'Weapon Involved', 'Property Loss / Damage'], 
-        'Evidence & Scene': ['Evidence Collected', 'Forensic Tests Required', 'Scene Condition', 'Photos / Video?', 'CCTV Present?', 'CCTV Sources / IDs', 'Physical Evidence (list)', 'Chain of Custody?', 'Digital Evidence', 'Evidence Storage Reference'], 
-        'Operational Notes': ['Investigating Officer', 'Duty Person', 'Supervising Officer', 'Patrol Notes', 'Arrest Made', 'Arrest Location', 'Initial Actions Taken', 'riskLevel', 'Confidentiality'], 
-        'Status & Linkage': ['Biometric / Forensic IDs', 'DNA Ref ID', 'Fingerprint ID', 'Case Status', 'Linked Cases', 'arrestCount', 'Case Priority', 'Follow-up Date', 'Court Case ID', 'Next Hearing Date', 'Final Summary'],
-        'Remark': ['Remark']
-      } 
-    },
-    suspect: { 
-      title: 'Suspect Details', 
-      subgroups: { 
-        'Identity': ['Suspect ID', 'Suspect Name', 'Alias / Nickname', 'Age', 'Gender', 'Nationality', 'Nationality ID / Passport Number', 'Languages', 'Address', 'Known Aliases', 'Government ID'], 
-        'Physical Description': ['Height (cm)', 'Weight (kg)', 'Build', 'Hair Color', 'Eye Color', 'Distinguishing Marks', 'Tattoo Details', 'Scar Details', 'Photo Upload'], 
-        'Background': ['Employment', 'Education', 'Occupation', 'Company', 'Workplace Address', 'Marital Status', 'Known Habits', 'Known Financial Details'], 
-        'Known Associates': ['Associate Names', 'Gang Affiliation', 'Family Connections', 'Social Media Handles'], 
-        'Prior Records': ['Criminal History', 'Prior Arrests', 'Probation/Parole Status'],
-        'Remark': ['Remark']
-      } 
-    },
-    notes: { 
-      title: 'Evidence and Documents', 
-      subgroups: { 
-        'Investigation Notes': ['Initial Findings', 'Detailed Notes', 'Status', 'Version History / Updates'], 
-        'Evidence Files': ['Evidence Photos', 'Evidence Videos', 'Evidence Documents'], 
-        'Links and Recommendation': ['Links to Evidence', 'Final Recommendations'],
-        'Remark': ['Remark']
-      } 
-    }
-  };
-
-  selectedSubgroup: any = {
-    crime: 'Identification & Timing',
-    suspect: 'Identity',
-    notes: 'Investigation Notes'
-  };
-
-  uploadedEvidence: File[] = [];
-
-  evidencePanelCase: PoliceCase | null = null;
-  evidenceType: EvidenceType = 'Document';
-  evidenceFiles: { [caseId: string]: { Document: File[]; Photo: File[] } } = {};
-
   constructor(private caseStore: CaseStoreService, private router: Router) {}
 
   ngOnInit(): void {
@@ -76,19 +22,9 @@ export class CaseDetailsPageComponent implements OnInit {
   }
 
   get filteredCases(): PoliceCase[] {
-    let filtered = this.cases;
-
-    if (this.filterStatus) {
-      filtered = filtered.filter(c => c.status === this.filterStatus);
-    }
-    if (this.filterCrimeType) {
-      filtered = filtered.filter(c => c.crime === this.filterCrimeType);
-    }
-    // Add date filtering logic here if needed
-
-    if (!this.q?.trim()) return filtered;
+    if (!this.q?.trim()) return this.cases;
     const qLower = this.q.trim().toLowerCase();
-    return filtered.filter(c =>
+    return this.cases.filter(c =>
       (c.caseId || '').toLowerCase().includes(qLower) ||
       (c.status || '').toLowerCase().includes(qLower) ||
       (c.crime || '').toLowerCase().includes(qLower) ||
@@ -107,27 +43,14 @@ export class CaseDetailsPageComponent implements OnInit {
     return this.cases.filter(c => c.status === 'Closed').length;
   }
 
-  get reviewCases(): number {
-    return this.cases.filter(c => c.status === 'Under Investigation').length;
-  }
-
-  get statusTypes(): string[] {
-    return Array.from(new Set(this.cases.map(c => c.status).filter(s => !!s))) as string[];
-  }
-  get crimeTypes(): string[] {
-    return Array.from(new Set(this.cases.map(c => c.crime).filter(s => !!s))) as string[];
-  }
-
   openDetails(c: PoliceCase): void {
     this.selectedCase = c;
     this.showDetails = true;
-    document.body.classList.add('popup-open');
   }
 
   closeDetails(): void {
     this.showDetails = false;
     this.selectedCase = null;
-    document.body.classList.remove('popup-open');
   }
 
   goToDetect(): void {
@@ -137,246 +60,4 @@ export class CaseDetailsPageComponent implements OnInit {
   navigateHome(): void {
     this.router.navigate(['/']);
   }
-
-  applyFilters() {
-    // No-op: filteredCases getter will use filters
-  }
-  resetFilters() {
-    this.filterStatus = '';
-    this.filterCrimeType = '';
-    this.filterDateFrom = '';
-    this.filterDateTo = '';
-    this.q = '';
-  }
-  getSubgroups(sectionKey: string): string[] {
-    return Object.keys(this.sections[sectionKey].subgroups);
-  }
-
-  getFieldsForSubgroup(sectionKey: string, subgroup: string): string[] {
-    return this.sections[sectionKey].subgroups[subgroup] || [];
-  }
-
-  selectSubgroup(sectionKey: string, subgroup: string) {
-    this.selectedSubgroup[sectionKey] = subgroup;
-  }
-
-  getFieldValue(sc: any, sectionKey: string, field: string): any {
-    // Map field labels to PoliceCase property paths (copied from recordpage.component.ts)
-    const fieldMap: { [key: string]: string | string[] } = {
-      // Crime Details
-      'Case ID': 'caseId',
-      'FIR / Ref #': 'firRef',
-      'Crime Type': 'crime',
-      'Case Category': 'caseCategory',
-      'Date & Time (Entry)': 'dateTime',
-      'Occurred From': 'occurredFrom',
-      'Occurred To': 'occurredTo',
-      'Time Reported': 'timeReported',
-      'Time Discovered': 'timeDiscovered',
-      'Country': 'country',
-      'State': 'state',
-      'District': 'district',
-      'Number of Victims': 'numberOfVictims',
-      'Brief Description': 'briefDescription',
-      'Location': ['police', 'address'],
-      'Jurisdiction / PS': 'jurisdiction',
-      'Scene Type': 'sceneType',
-      'Reported By': 'reportedBy',
-      'Reported Contact': 'reportedContact',
-      'Witness Count': 'witnessCount',
-      'Victim Name': 'victimName',
-      'Victim Contact': 'victimContact',
-      'Victim Summary': 'victimSummary',
-      'Suspected Offender Known?': 'suspectedOffenderKnown',
-      'Suspect Link': 'suspectLink',
-      'Legal Sections / Charges': 'legalSections',
-      'Offence Category': 'offenceCategory',
-      'Offence Description': 'offenceDescription',
-      'Suspected Motive': 'suspectedMotive',
-      'Confirmed Motive': 'confirmedMotive',
-      'Weapon Involved': 'weaponInvolved',
-      'Property Loss / Damage': 'propertyLoss',
-      'Evidence Collected': 'evidenceCollected',
-      'Forensic Tests Required': 'forensicTestsRequired',
-      'Scene Condition': 'sceneCondition',
-      'Photos / Video?': 'photosVideo',
-      'CCTV Present?': 'cctvPresent',
-      'CCTV Sources / IDs': 'cctvSources',
-      'Physical Evidence (list)': 'physicalEvidence',
-      'Chain of Custody?': 'chainOfCustody',
-      'Digital Evidence': 'digitalEvidence',
-      'Evidence Storage Reference': 'evidenceStorageReference',
-      'Investigating Officer': ['police', 'name'],
-      'Duty Person': ['police', 'dutyPerson'],
-      'Supervising Officer': ['police', 'supervisingOfficer'],
-      'Patrol Notes': ['police', 'patrolNotes'],
-      'Arrest Made': 'arrestMade',
-      'Arrest Location': 'arrestLocation',
-      'Initial Actions Taken': 'initialActionsTaken',
-      'riskLevel': 'riskLevel',
-      'Confidentiality': 'confidentiality',
-      'Biometric / Forensic IDs': 'biometricIds',
-      'DNA Ref ID': 'dnaRefId',
-      'Fingerprint ID': 'fingerprintId',
-      'Case Status': 'status',
-      'Linked Cases': 'linkedCases',
-      'arrestCount': 'arrestCount',
-      'Case Priority': 'casePriority',
-      'Follow-up Date': 'followUpDate',
-      'Court Case ID': 'courtCaseId',
-      'Next Hearing Date': 'nextHearingDate',
-      'Final Summary': 'finalSummary',
-      'Remark': 'remark',
-      // Suspect Details
-      'Suspect ID': ['accused', 'suspectId'],
-      'Suspect Name': ['accused', 'name'],
-      'Alias / Nickname': ['accused', 'alias'],
-      'Age': ['accused', 'age'],
-      'Gender': ['accused', 'gender'],
-      'Nationality': ['accused', 'nationality'],
-      'Nationality ID / Passport Number': ['accused', 'passportNumber'],
-      'Languages': ['accused', 'languages'],
-      'Address': ['accused', 'address'],
-      'Known Aliases': ['accused', 'knownAliases'],
-      'Government ID': ['accused', 'governmentId'],
-      'Height (cm)': ['accused', 'height'],
-      'Weight (kg)': ['accused', 'weight'],
-      'Build': ['accused', 'build'],
-      'Hair Color': ['accused', 'hairColor'],
-      'Eye Color': ['accused', 'eyeColor'],
-      'Distinguishing Marks': ['accused', 'distinguishingMarks'],
-      'Tattoo Details': ['accused', 'tattooDetails'],
-      'Scar Details': ['accused', 'scarDetails'],
-      'Photo Upload': ['accused', 'photoUpload'],
-      'Employment': ['accused', 'employment'],
-      'Education': ['accused', 'education'],
-      'Occupation': ['accused', 'occupation'],
-      'Company': ['accused', 'company'],
-      'Workplace Address': ['accused', 'workplaceAddress'],
-      'Marital Status': ['accused', 'maritalStatus'],
-      'Known Habits': ['accused', 'knownHabits'],
-      'Known Financial Details': ['accused', 'knownFinancialDetails'],
-      'Associate Names': ['accused', 'associateNames'],
-      'Gang Affiliation': ['accused', 'gangAffiliation'],
-      'Family Connections': ['accused', 'familyConnections'],
-      'Social Media Handles': ['accused', 'socialMediaHandles'],
-      'Criminal History': ['accused', 'criminalHistory'],
-      'Prior Arrests': ['accused', 'priorArrests'],
-      'Probation/Parole Status': ['accused', 'probationStatus'],
-      // Notes/Evidence
-      'Initial Findings': ['police', 'information'],
-      'Detailed Notes': ['notes', 'detailedNotes'],
-      'Status': 'status',
-      'Version History / Updates': ['notes', 'versionHistory'],
-      'Evidence Photos': ['legal', 'evidencePhotos'],
-      'Evidence Videos': ['legal', 'evidenceVideos'],
-      'Evidence Documents': ['legal', 'evidenceDocuments'],
-      'Links to Evidence': ['legal', 'linksToEvidence'],
-      'Final Recommendations': ['legal', 'finalRecommendations'],
-      'Witness Statements': ['legal', 'witnessStatements'],
-      'Confessions': ['legal', 'confessions'],
-      // Audit Fields
-      'Created By': 'createdBy',
-      'Creation Date': 'creationDate',
-      'Last Updated': 'lastUpdated',
-      'Verified By': 'verifiedBy'
-    };
-
-    const path = fieldMap[field] || field;
-    if (Array.isArray(path)) {
-      let value = sc;
-      for (const p of path) {
-        if (value && value[p] !== undefined) value = value[p];
-        else return '—';
-      }
-      return value !== undefined && value !== null && value !== '' ? value : '—';
-    } else {
-      return sc[path] !== undefined && sc[path] !== null && sc[path] !== '' ? sc[path] : '—';
-    }
-  }
-
-  getProgressValue(caseObj: any): number {
-    let total = 0, filled = 0;
-    ['crime', 'suspect', 'notes'].forEach(sectionKey => {
-      const subgroups = this.getSubgroups(sectionKey);
-      subgroups.forEach(subgroup => {
-        const fields = this.getFieldsForSubgroup(sectionKey, subgroup);
-        total += fields.length;
-        fields.forEach(field => {
-          const value = this.getFieldValue(caseObj, sectionKey, field);
-          if (value && value !== '—') filled++;
-        });
-      });
-    });
-    return total ? Math.round((filled / total) * 100) : 0;
-  }
-  getNextActionMessage(c: any): string {
-    // Example logic based on status and progress
-    const progress = this.getProgressValue(c);
-    if (c.status === 'Closed' || progress === 100) {
-      return 'Case completed';
-    }
-    if (c.status === 'Under Review' || progress >= 75) {
-      return 'Await supervisor approval';
-    }
-    if (c.status === 'Open' || progress < 75) {
-      return 'Collect evidence';
-    }
-    return '—';
-  }
-  getCasePriority(c: PoliceCase): 'High' | 'Medium' | 'Low' {
-    // Automatic logic based on crime type and status
-    const highCrimes = ['Murder', 'Robbery'];
-    const mediumCrimes = ['Theft', 'Assault'];
-    if (highCrimes.includes(c.crime) || c.status === 'Open') {
-      return 'High';
-    }
-    if (mediumCrimes.includes(c.crime) || c.status === 'Under Investigation') {
-      return 'Medium';
-    }
-    return 'Low';
-  }
-
-  isInvestigator(): boolean {
-    // Simple role check: username contains 'investigator' (customize as needed)
-    return this.username.toLowerCase().includes('investigator');
-  }
-
-  onEvidenceUpload(event: any): void {
-    const files = Array.from(event.target.files) as File[];
-    this.uploadedEvidence = [...this.uploadedEvidence, ...files];
-    // You can add logic to save evidence to the case or backend here
-  }
-
-  showEvidencePanel(c: PoliceCase): void {
-    if (!c.caseId) return;
-    this.evidencePanelCase = c;
-    this.evidenceType = 'Document';
-    if (!this.evidenceFiles[c.caseId]) {
-      this.evidenceFiles[c.caseId] = { Document: [], Photo: [] };
-    }
-  }
-
-  setEvidenceType(type: EvidenceType): void {
-    this.evidenceType = type;
-  }
-
-  onEvidenceFileSelectType(event: any): void {
-    const files = Array.from(event.target.files) as File[];
-    if (this.evidencePanelCase && this.evidencePanelCase.caseId) {
-      this.evidenceFiles[this.evidencePanelCase.caseId][this.evidenceType].push(...files);
-    }
-  }
-
-  getEvidenceIcon(filename: string): string {
-    if (filename.match(/\.(jpg|jpeg|png|gif)$/i)) return 'fas fa-camera';
-    if (filename.match(/\.(mp4|avi|mov)$/i)) return 'fas fa-film';
-    if (filename.match(/\.(pdf)$/i)) return 'fas fa-file-pdf';
-    return 'fas fa-file';
-  }
-
-  viewEvidenceFile(file: File): void {
-    const url = URL.createObjectURL(file);
-    window.open(url, '_blank');
-  }
 }

src/app/recordpage/recordpage.component.css

@@ -245,7 +245,6 @@
     max-width: 100vw;
     min-width: 1000px;
   }
-
   .table-wrap {
     max-width: 100vw;
     min-height: 400px;
@@ -258,16 +257,13 @@
     width: 100%;
     max-width: 100vw;
   }
-
   .table-wrap {
     min-height: 200px;
   }
-
   .padded-table-wrap {
     padding-left: 4px;
     padding-right: 4px;
   }
-
   .records-header-row {
     flex-direction: column;
     align-items: stretch;
@@ -275,12 +271,10 @@
     padding-left: 4px;
     padding-right: 4px;
   }
-
   .page-title {
     text-align: center;
     margin-right: 0;
   }
-
   .toolbar {
     position: static;
     transform: none;
@@ -330,11 +324,6 @@
 
 .records th.actions-col, .records td.actions {
   color: #fff;
-  text-align: left;
-  padding-left: 18px;
-  padding-right: 18px;
-  width: 1%;
-  white-space: nowrap;
 }
 
 .records tbody tr:last-child td {
@@ -418,17 +407,14 @@
   background: #e5e7eb;
   color: #22223b;
 }
-
 .status-open {
   background: #d1fae5;
   color: #059669;
 }
-
 .status-under {
   background: #dbeafe;
   color: #2563eb;
 }
-
 .status-closed {
   background: #fee2e2;
   color: #dc2626;
@@ -470,18 +456,17 @@
     border-color: #805ad5;
   }
 
-  .btn.delete {
-    background: #ef4444;
-    color: #fff;
-    border-color: #ef4444;
-    box-shadow: 0 2px 8px #ef444422;
-    transition: background 0.18s, color 0.18s;
-  }
-
-    .btn.delete:hover {
-      background: #991b1b;
-      color: #fff;
-    }
+.btn.delete {
+  background: #ef4444;
+  color: #fff;
+  border-color: #ef4444;
+  box-shadow: 0 2px 8px #ef444422;
+  transition: background 0.18s, color 0.18s;
+}
+.btn.delete:hover {
+  background: #991b1b;
+  color: #fff;
+}
 
 /* Icon buttons */
 .icon-btn {
@@ -499,56 +484,38 @@
   align-items: center;
   justify-content: center;
 }
-
-  .icon-btn.view {
-    margin: 0;
-    padding: 0 8px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: #2563eb;
-    font-size: 1.2em;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .icon-btn.edit {
-    color: #7c3aed;
-  }
-
-  .icon-btn.delete {
-    color: #ef4444;
-  }
-
-  .icon-btn:hover {
-    background: #f0f7ff;
-    box-shadow: 0 2px 8px #2563eb22;
-  }
-
-  .icon-btn.delete:hover {
-    background: #fff0f0;
-    color: #b91c1c;
-  }
-
-  .icon-btn.edit:hover {
-    background: #f3e8ff;
-    color: #5b21b6;
-  }
-
-  .icon-btn.view:hover {
-    background: #e0f2fe;
-    color: #0ea5e9;
-  }
-
-  .icon-btn.verify {
-    color: #22c55e;
-  }
-
-    .icon-btn.verify:hover {
-      background: #e0ffe6;
-      color: #15803d;
-    }
+.icon-btn.view {
+  color: #2563eb;
+}
+.icon-btn.edit {
+  color: #7c3aed;
+}
+.icon-btn.delete {
+  color: #ef4444;
+}
+.icon-btn:hover {
+  background: #f0f7ff;
+  box-shadow: 0 2px 8px #2563eb22;
+}
+.icon-btn.delete:hover {
+  background: #fff0f0;
+  color: #b91c1c;
+}
+.icon-btn.edit:hover {
+  background: #f3e8ff;
+  color: #5b21b6;
+}
+.icon-btn.view:hover {
+  background: #e0f2fe;
+  color: #0ea5e9;
+}
+.icon-btn.verify {
+  color: #22c55e;
+}
+.icon-btn.verify:hover {
+  background: #e0ffe6;
+  color: #15803d;
+}
 
 .empty {
   text-align: center;
@@ -584,7 +551,6 @@
   display: flex;
   flex-direction: column;
 }
-
 .modal-header, .modal-footer {
   padding: 24px 40px 18px 40px;
   background: #f8fafc;
@@ -592,7 +558,6 @@
   font-size: 1.18rem;
   color: #23272b;
 }
-
 .modal-body {
   flex: 1 1 auto;
   padding: 32px 48px 32px 48px;
@@ -610,33 +575,33 @@
   border-bottom: 1px solid #e5e7eb;
 }
 
-  .detail-row:last-child {
-    border-bottom: none;
-  }
+.detail-row:last-child {
+  border-bottom: none;
+}
 
-  .detail-row span {
-    color: #2563eb;
-    font-weight: 600;
-    font-size: 1.07em;
-  }
+.detail-row span {
+  color: #2563eb;
+  font-weight: 600;
+  font-size: 1.07em;
+}
 
-  .detail-row b {
-    color: #23272b;
-    font-weight: 500;
-    font-size: 1.07em;
-  }
+.detail-row b {
+  color: #23272b;
+  font-weight: 500;
+  font-size: 1.07em;
+}
 
 .detail-block {
   margin-top: 18px;
   margin-bottom: 8px;
 }
 
-  .detail-block .label {
-    font-weight: 700;
-    color: #2563eb;
-    margin-bottom: 6px;
-    font-size: 1.09em;
-  }
+.detail-block .label {
+  font-weight: 700;
+  color: #2563eb;
+  margin-bottom: 6px;
+  font-size: 1.09em;
+}
 
 .explain {
   white-space: pre-wrap;
@@ -659,9 +624,9 @@
   margin-left: 8px;
 }
 
-  .btn:hover {
-    background: #e0e7ef;
-  }
+.btn:hover {
+  background: #e0e7ef;
+}
 
 .records-center {
   display: flex;
@@ -760,11 +725,11 @@
   z-index: 10;
 }
 
-  .modern-searchbar-container.compact {
-    width: auto;
-    margin: 0 0 0 24px;
-    align-items: center;
-  }
+.modern-searchbar-container.compact {
+  width: auto;
+  margin: 0 0 0 24px;
+  align-items: center;
+}
 
 .modern-searchbar-form {
   display: flex;
@@ -778,12 +743,12 @@
   position: relative;
 }
 
-  .modern-searchbar-form.compact {
-    height: 44px;
-    min-width: 260px;
-    width: 320px;
-    padding: 0 8px 0 10px;
-  }
+.modern-searchbar-form.compact {
+  height: 44px;
+  min-width: 260px;
+  width: 320px;
+  padding: 0 8px 0 10px;
+}
 
 .modern-searchbar-icon {
   display: flex;
@@ -804,11 +769,11 @@
   height: 32px;
 }
 
-  .modern-searchbar-input::placeholder {
-    color: #e0e7ef;
-    opacity: 1;
-    font-weight: 400;
-  }
+.modern-searchbar-input::placeholder {
+  color: #e0e7ef;
+  opacity: 1;
+  font-weight: 400;
+}
 
 .modern-searchbar-btn {
   background: #fff;
@@ -825,10 +790,10 @@
   transition: background 0.18s, color 0.18s;
 }
 
-  .modern-searchbar-btn:hover {
-    background: #ede9fe;
-    color: #4f46e5;
-  }
+.modern-searchbar-btn:hover {
+  background: #ede9fe;
+  color: #4f46e5;
+}
 
 .modern-searchbar-form.white-bg {
   background: #fff !important;
@@ -840,10 +805,10 @@
   color: #23272b !important;
 }
 
-  .modern-searchbar-input.white-bg::placeholder {
-    color: #64748b !important;
-    opacity: 1;
-  }
+.modern-searchbar-input.white-bg::placeholder {
+  color: #64748b !important;
+  opacity: 1;
+}
 
 .modern-searchbar-icon svg {
   stroke: #64748b !important;
@@ -864,10 +829,10 @@
   transition: background 0.18s, color 0.18s;
 }
 
-  .modern-searchbar-btn:hover {
-    background: #38bdf8;
-    color: #fff;
-  }
+.modern-searchbar-btn:hover {
+  background: #38bdf8;
+  color: #fff;
+}
 
 
 .back-colo {
@@ -900,11 +865,11 @@
     width: 95vw;
     justify-content: flex-end;
   }
-
   .modern-searchbar-form.compact {
     width: 100%;
     min-width: 0;
   }
+
 }
 
 /* Modern UI header styles from infopage */
@@ -916,7 +881,6 @@
   z-index: 10;
   padding-bottom: 0;
 }
-
 .header-inner {
   display: flex;
   align-items: center;
@@ -924,13 +888,11 @@
   padding: 18px 32px 0 32px;
   position: relative;
 }
-
 .logo-cluster {
   display: flex;
   align-items: center;
   gap: 18px;
 }
-
 .logo-img-header {
   width: 54px;
   height: 54px;
@@ -941,7 +903,6 @@
   margin-top: -6px;
   margin-bottom: 1vh;
 }
-
 .py-detect-title-header {
   font-size: 2.1rem;
   font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
@@ -954,58 +915,15 @@
   margin-bottom: 1.5vh;
 }
 
-  .py-detect-title-header .py-letter.p {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
-
-  .py-detect-title-header .py-letter.y {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
-
-  .py-detect-title-header .py-shape {
-    color: #e3f6ff;
-    background: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-    box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
-    border: 2px solid #23272b;
-    width: 18px;
-    height: 4px;
-    display: inline-block;
-    margin: 0 8px;
-    border-radius: 2px;
-  }
-
-  .py-detect-title-header .py-letter.d {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
-
-  .py-detect-title-header .py-letter.e {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
-
-  .py-detect-title-header .py-letter.t {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
-
-  .py-detect-title-header .py-letter.e2 {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
-
-  .py-detect-title-header .py-letter.c {
-    color: #e3f6ff;
-    text-shadow: 0 0 6px #38bdf8;
-  }
-
-  .py-detect-title-header .py-letter.t2 {
-    color: #38bdf8;
-    text-shadow: 0 0 6px #38bdf8;
-  }
+.py-detect-title-header .py-letter.p { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.y { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-shape { color: #e3f6ff; background: #e3f6ff; text-shadow: 0 0 6px #38bdf8; box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff; border: 2px solid #23272b; width: 18px; height: 4px; display: inline-block; margin: 0 8px; border-radius: 2px; }
+.py-detect-title-header .py-letter.d { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.e { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.t { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.e2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.c { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
+.py-detect-title-header .py-letter.t2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
 
 body, main.content {
   background: #f4f6fa;
@@ -1088,10 +1006,9 @@ body, main.content {
   cursor: pointer;
   transition: background 0.18s;
 }
-
-  .record-new-btn:hover {
-    background: #1e40af;
-  }
+.record-new-btn:hover {
+  background: #1e40af;
+}
 
 .record-table {
   width: 100%;
@@ -1100,52 +1017,50 @@ body, main.content {
   background: #fff;
 }
 
-  .record-table th, .record-table td {
-    border-bottom: 1.5px solid #e5e7eb;
-    padding: 12px 16px;
-    text-align: left;
-    font-size: 1.05rem;
-  }
-
-  .record-table th {
-    background: #f4f6fa;
-    color: #222b45;
-    font-weight: 700;
-  }
+.record-table th, .record-table td {
+  border-bottom: 1.5px solid #e5e7eb;
+  padding: 12px 16px;
+  text-align: left;
+  font-size: 1.05rem;
+}
 
-  .record-table tr:last-child td {
-    border-bottom: none;
-  }
+.record-table th {
+  background: #f4f6fa;
+  color: #222b45;
+  font-weight: 700;
+}
 
-  .record-table tr {
-    transition: background 0.15s;
-  }
+.record-table tr:last-child td {
+  border-bottom: none;
+}
 
-    .record-table tr:hover {
-      background: #f1f5f9;
-    }
+.record-table tr {
+  transition: background 0.15s;
+}
+.record-table tr:hover {
+  background: #f1f5f9;
+}
 
-  .record-table a {
-    color: #2563eb;
-    text-decoration: underline;
-    cursor: pointer;
-  }
+.record-table a {
+  color: #2563eb;
+  text-decoration: underline;
+  cursor: pointer;
+}
 
-  .record-table .record-status {
-    font-weight: 500;
-    border-radius: 6px;
-    padding: 2px 10px;
-    background: #f1f5f9;
-    color: #2563eb;
-    font-size: 0.98em;
-  }
+.record-table .record-status {
+  font-weight: 500;
+  border-radius: 6px;
+  padding: 2px 10px;
+  background: #f1f5f9;
+  color: #2563eb;
+  font-size: 0.98em;
+}
 
 .vertical-sections {
   display: flex;
   flex-direction: column;
   gap: 32px;
 }
-
 .horizontal-sections {
   display: flex;
   flex-direction: column;
@@ -1155,7 +1070,6 @@ body, main.content {
   box-shadow: 0 8px 32px #2563eb22;
   padding: 32px 0 32px 0;
 }
-
 .section-block {
   background: rgba(255,255,255,0.98);
   border-radius: 18px;
@@ -1168,12 +1082,10 @@ body, main.content {
   border-left: 6px solid #38bdf8;
   transition: box-shadow 0.2s, border 0.2s;
 }
-
-  .section-block:hover {
-    box-shadow: 0 8px 32px #2563eb33;
-    border-left: 6px solid #2563eb;
-  }
-
+.section-block:hover {
+  box-shadow: 0 8px 32px #2563eb33;
+  border-left: 6px solid #2563eb;
+}
 .section-title {
   font-size: 1.32em;
   font-weight: 900;
@@ -1185,14 +1097,12 @@ body, main.content {
   align-items: center;
   gap: 10px;
 }
-
 .subgroup-row {
   display: flex;
   flex-direction: row;
   gap: 36px;
   overflow-x: auto;
 }
-
 .subgroup-block {
   min-width: 260px;
   flex: 1 1 0;
@@ -1208,13 +1118,11 @@ body, main.content {
   border: 1.5px solid #e0e7ef;
   transition: box-shadow 0.18s, border 0.18s, background 0.18s;
 }
-
-  .subgroup-block:hover {
-    box-shadow: 0 4px 16px #38bdf855;
-    border: 1.5px solid #38bdf8;
-    background: #e0f2fe;
-  }
-
+.subgroup-block:hover {
+  box-shadow: 0 4px 16px #38bdf855;
+  border: 1.5px solid #38bdf8;
+  background: #e0f2fe;
+}
 .subgroup-title {
   font-size: 1.11em;
   font-weight: 700;
@@ -1226,7 +1134,6 @@ body, main.content {
   align-items: center;
   gap: 8px;
 }
-
 .fields-table {
   display: flex;
   flex-direction: column;
@@ -1236,7 +1143,6 @@ body, main.content {
   border-radius: 0;
   padding: 0;
 }
-
 .field-row {
   display: flex;
   flex-direction: row;
@@ -1250,36 +1156,32 @@ body, main.content {
   transition: background 0.18s;
   gap: 32px;
 }
-
-  .field-row:last-child {
-    border-bottom: none;
-  }
-
-  .field-row span {
-    color: #1e293b;
-    font-weight: 700;
-    letter-spacing: 0.2px;
-    min-width: 180px;
-    font-size: 1.08em;
-    margin-right: 32px;
-    text-align: left;
-    display: inline-block;
-  }
-
-  .field-row b {
-    color: #2563eb;
-    font-weight: 700;
-    word-break: break-word;
-    letter-spacing: 0.1px;
-    font-size: 1.13em;
-    margin-left: 8px;
-    text-align: left;
-    display: inline-block;
-  }
-
-    .field-row b:hover {
-      color: #0ea5e9;
-    }
+.field-row:last-child {
+  border-bottom: none;
+}
+.field-row span {
+  color: #1e293b;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  min-width: 180px;
+  font-size: 1.08em;
+  margin-right: 32px;
+  text-align: left;
+  display: inline-block;
+}
+.field-row b {
+  color: #2563eb;
+  font-weight: 700;
+  word-break: break-word;
+  letter-spacing: 0.1px;
+  font-size: 1.13em;
+  margin-left: 8px;
+  text-align: left;
+  display: inline-block;
+}
+.field-row b:hover {
+  color: #0ea5e9;
+}
 
 /* Stylish pills for subgroups */
 .subgroup-pills {
@@ -1288,32 +1190,29 @@ body, main.content {
   gap: 12px;
   margin-bottom: 18px;
 }
-
-  .subgroup-pills button {
-    background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
-    border: none;
-    border-radius: 20px;
-    padding: 7px 22px;
-    font-size: 1em;
-    color: #fff;
-    font-weight: 700;
-    cursor: pointer;
-    box-shadow: 0 2px 8px #2563eb22;
-    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
-    outline: none;
-  }
-
-    .subgroup-pills button.active,
-    .subgroup-pills button:focus {
-      background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
-      color: #fff;
-      box-shadow: 0 4px 16px #38bdf855;
-    }
-
-    .subgroup-pills button:hover {
-      background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
-      color: #fff;
-    }
+.subgroup-pills button {
+  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
+  border: none;
+  border-radius: 20px;
+  padding: 7px 22px;
+  font-size: 1em;
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 2px 8px #2563eb22;
+  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+  outline: none;
+}
+.subgroup-pills button.active,
+.subgroup-pills button:focus {
+  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
+  color: #fff;
+  box-shadow: 0 4px 16px #38bdf855;
+}
+.subgroup-pills button:hover {
+  background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
+  color: #fff;
+}
 
 .field-card {
   display: flex;
@@ -1327,32 +1226,26 @@ body, main.content {
   .section-block {
     padding: 18px 8vw 12px 8vw;
   }
-
   .subgroup-block {
     min-width: 180px;
     padding: 12px 8px 8px 8px;
   }
-
   .field-row span {
     min-width: 120px;
   }
 }
-
 @media (max-width: 600px) {
   .section-block {
     padding: 10px 2vw 8px 2vw;
   }
-
   .subgroup-block {
     min-width: 120px;
     padding: 8px 2px 6px 2px;
   }
-
   .field-row span {
     min-width: 80px;
     font-size: 0.98em;
   }
-
   .field-row b {
     font-size: 1em;
   }
@@ -1369,55 +1262,48 @@ body, main.content {
   border-radius: 12px;
   box-shadow: 0 2px 8px #2563eb11;
 }
-
-  .filter-bar select {
-    padding: 6px 18px;
-    border-radius: 6px;
-    border: 1.5px solid #cbd5e1;
-    font-size: 1em;
-    color: #2563eb;
-    background: #fff;
-    font-weight: 600;
-    outline: none;
-    transition: border 0.15s;
-  }
-
-    .filter-bar select:focus {
-      border: 1.5px solid #38bdf8;
-    }
-
-  .filter-bar button {
-    padding: 6px 18px;
-    border-radius: 6px;
-    border: none;
-    font-size: 1em;
-    font-weight: 700;
-    cursor: pointer;
-    background: #2563eb;
-    color: #fff;
-    transition: background 0.15s;
-  }
-
-    .filter-bar button:hover {
-      background: #0ea5e9;
-    }
-
-    .filter-bar button:last-child {
-      background: #f87171;
-      color: #fff;
-      margin-left: 4px;
-    }
-
-      .filter-bar button:last-child:hover {
-        background: #ef4444;
-      }
+.filter-bar select {
+  padding: 6px 18px;
+  border-radius: 6px;
+  border: 1.5px solid #cbd5e1;
+  font-size: 1em;
+  color: #2563eb;
+  background: #fff;
+  font-weight: 600;
+  outline: none;
+  transition: border 0.15s;
+}
+.filter-bar select:focus {
+  border: 1.5px solid #38bdf8;
+}
+.filter-bar button {
+  padding: 6px 18px;
+  border-radius: 6px;
+  border: none;
+  font-size: 1em;
+  font-weight: 700;
+  cursor: pointer;
+  background: #2563eb;
+  color: #fff;
+  transition: background 0.15s;
+}
+.filter-bar button:hover {
+  background: #0ea5e9;
+}
+.filter-bar button:last-child {
+  background: #f87171;
+  color: #fff;
+  margin-left: 4px;
+}
+.filter-bar button:last-child:hover {
+  background: #ef4444;
+}
 
 .analytics-summary {
   display: flex;
   gap: 32px;
   margin: 18px 0 8px 0;
 }
-
 .summary-card {
   background: #f8fafc;
   border-radius: 12px;
@@ -1426,27 +1312,23 @@ body, main.content {
   min-width: 120px;
   text-align: center;
 }
-
-  .summary-card .summary-label {
-    font-size: 1em;
-    color: #64748b;
-    font-weight: 600;
-    margin-bottom: 6px;
-  }
-
-  .summary-card .summary-value {
-    font-size: 2em;
-    font-weight: 900;
-    color: #2563eb;
-  }
-
-  .summary-card.open .summary-value {
-    color: #059669;
-  }
-
-  .summary-card.closed .summary-value {
-    color: #dc2626;
-  }
+.summary-card .summary-label {
+  font-size: 1em;
+  color: #64748b;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+.summary-card .summary-value {
+  font-size: 2em;
+  font-weight: 900;
+  color: #2563eb;
+}
+.summary-card.open .summary-value {
+  color: #059669;
+}
+.summary-card.closed .summary-value {
+  color: #dc2626;
+}
 
 .record-meta {
   color: #64748b;
@@ -1456,3 +1338,5 @@ body, main.content {
   font-weight: 500;
   letter-spacing: 0.1px;
 }
+
+

src/app/recordpage/recordpage.component.html

@@ -110,9 +110,9 @@
         </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.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>

src/app/recordpage/recordpage.component.ts

@@ -285,14 +285,12 @@ export class RecordpageComponent implements OnInit {
     this.selectedCase = c;
     this.selectedIndex = i;
     this.showDetails = true;
-    document.body.classList.add('modal-open');
   }
 
   closeDetails(): void {
     this.showDetails = false;
     this.selectedCase = null;
     this.selectedIndex = -1;
-    document.body.classList.remove('modal-open');
   }
 
   editCase(c: PoliceCase, i: number): void {

src/app/shared/case-store.service.ts

@@ -23,8 +23,6 @@ export interface PoliceCase {
     occupation?: string;
   };
   lastUpdated?: string;
-  nextAction?: string;
-  casePriority?: 'High' | 'Medium' | 'Low';
 }
 
 @Injectable({ providedIn: 'root' })