fix

src/app/app-routing.module.ts

@@ -4,6 +4,9 @@ import { InfopageComponent } from './infopage/infopage.component';
 import { ValidationpageComponent } from './validationpage/validationpage.component';
 import { RecordpageComponent } from './recordpage/recordpage.component';
 import { CaseDetailsPageComponent } from './case-details-page/case-details-page.component';
+import { QuestionSummaryPageComponent } from './question-summary-page/question-summary-page.component';
+import { CaseDetailsSummaryPageComponent } from './case-details-summary-page/case-details-summary-page.component';
+import { ViewDetailsPageComponent } from './view-details-page/view-details-page.component';
 
 const routes: Routes = [
   { 
@@ -20,6 +23,11 @@ const routes: Routes = [
   { path: 'record', component: RecordpageComponent },
   { path: 'case-details', component: CaseDetailsPageComponent },
   { path: 'case-details/:id', component: CaseDetailsPageComponent },
+  { path: 'case-details-summary-page', component: CaseDetailsSummaryPageComponent },
+  { path: 'case-details-summary-page/:id', component: CaseDetailsSummaryPageComponent },
+  { path: 'question-summary', component: QuestionSummaryPageComponent },
+  { path: 'view-details', component: ViewDetailsPageComponent },
+  { path: 'view-details/:index', component: ViewDetailsPageComponent },
   { path: '', redirectTo: '/case-detail', pathMatch: 'full' },
 
   {

src/app/app.module.ts

@@ -14,6 +14,9 @@ import { SignUpComponent } from './homepage/sign-up/sign-up.component';
 import { RecordpageComponent } from './recordpage/recordpage.component';
 import { CaseDetailsPageComponent } from './case-details-page/case-details-page.component';
 import { MatCardModule } from '@angular/material/card';
+import { QuestionSummaryPageComponent } from './question-summary-page/question-summary-page.component';
+import { CaseDetailsSummaryPageComponent } from './case-details-summary-page/case-details-summary-page.component';
+import { ViewDetailsPageComponent } from './view-details-page/view-details-page.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +24,10 @@ import { MatCardModule } from '@angular/material/card';
     InfopageComponent,
     ValidationpageComponent,
     RecordpageComponent,
-    CaseDetailsPageComponent
+    CaseDetailsPageComponent,
+    QuestionSummaryPageComponent,
+    CaseDetailsSummaryPageComponent,
+    ViewDetailsPageComponent
   ],
   imports: [
     BrowserModule,

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

@@ -1,7 +1,7 @@
 @import '../recordpage/recordpage.component.css';
 
 body, html {
-  overflow: auto !important;
+  overflow-y: hidden !important;
 }
 
 body, main.content {
@@ -26,7 +26,7 @@ body, main.content {
 .header-inner {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   padding: 18px 32px 0 32px;
   position: relative;
 }
@@ -462,6 +462,8 @@ hr {
   }
 }
 
+
+
 /* table layout for case details page */
 .record-table {
   width: 100%;
@@ -581,7 +583,8 @@ td.actions {
   z-index: 1;
 }
 .details-content {
-  max-width: 1200px;
+  max-width: 
+      ;
   margin: 0 auto;
   background: #fff;
   border-radius: 18px;
@@ -747,9 +750,9 @@ body.popup-open {
 }
 
 .btn.close-btn-bottom {
-  position: absolute;
-  right: 32px;
-  top: 32px;
+  position: fixed;
+  right: 326px;
+  top: 46px;
   background: #2563eb;
   color: #fff;
   border: none;
@@ -867,11 +870,12 @@ footer {
   color: #fff;
   text-align: center;
   padding: 10px 0px;
-  position: relative;
+  position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
-  margin-top: 40px;
+  z-index: 100;
+  margin-top: 0;
 }
 
 /* Additional Styles for Go Detect button/icon */
@@ -936,7 +940,7 @@ footer {
   border-radius: 24px;
   font-weight: 700;
   font-size: 1.08em;
-  padding: 10px 28px;
+  padding: 5px 28px;
   box-shadow: 0 2px 12px rgba(25, 118, 210, 0.13);
   cursor: pointer;
   transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
@@ -974,6 +978,62 @@ footer {
   100% { opacity: 0.9; }
 }
 
+.header-actions-right {
+  position: absolute;
+  right: 32px;
+  top: 27px;
+  display: flex;
+  align-items: center;
+  z-index: 100;
+}
+
+.logout-btn {
+  font-size: 0.85rem;
+  padding: 0.18rem 0.7rem;
+  border-radius: 5px;
+  min-width: unset;
+  min-height: unset;
+  box-shadow: 0 1px 4px #d1d5db22;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.logout-btn:hover {
+  background: linear-gradient(90deg, #23272b 0%, #ef4444 100%);
+  color: #fff;
+  box-shadow: 0 2px 24px #ef444488;
+  transform: scale(1.04);
+}
+.logout-icon {
+  font-size: 1.2em;
+  margin-right: 6px;
+}
+
+.summary-value.blue { color: #2563eb; }
+.summary-value.green { color: #22c55e; }
+.summary-value.red { color: #ef4444; }
+
+.sort {
+ display: inline-block;
+ width:0;
+ height:0;
+ border-left:4px solid transparent;
+ border-right:4px solid transparent;
+ margin-left:6px;
+ vertical-align: middle;
+}
+.sort.asc {
+ border-bottom:6px solid #4a5568;
+}
+.sort.desc {
+ border-top:6px solid #4a5568;
+}
+.sort.neutral {
+ border-top:6px solid #b0b0b0;
+ border-bottom:6px solid #b0b0b0;
+ opacity:0.5;
+}
+
 
 
 

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

@@ -1,302 +1,373 @@
 <!-- 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 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 class="header-actions-right">
+ <button class="back-small" *ngIf="selectedCase" (click)="closeAndReturn()">← Back to {{ getReturnLabel() }}</button>
+ <button class="logout-btn" (click)="logout()">
+ <span class="logout-icon">⎋</span> Logout
+ </button>
+ </div>
+ </div>
 </div>
 
 <div class="record-card">
-  <div class="record-header">
-    <div class="record-title-group">
-      <span class="record-title">Your Assigned Cases</span>
-    </div>
-    <div class="record-header-actions">
-      <input class="record-search" type="text" [(ngModel)]="q" placeholder="Search your cases..." />
-    </div>
-  </div>
+ <div class="analytics-panel">
+ <div class="analytics-blue">
+ <div class="record-header">
+ <div class="record-title-group">
+ <span class="record-title"><i class="fas fa-database"></i> Police Investigation Records</span>
+ </div>
+ <div class="record-header-actions">
+ <span style="position:relative;">
+ <i class="fas fa-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#b0b0b0;"></i>
+ <input class="record-search" type="text" [(ngModel)]="q" (ngModelChange)="applyFilters()" placeholder="Search this list..." style="padding-left:32px;" />
+ </span>
+ </div>
+ </div>
+ <div class="analytics-cards">
+ <div class="summary-card total">
+ <div class="summary-left">
+ <div class="summary-label">Total Cases</div>
+ <div class="summary-value blue">{{ totalCases }}</div>
+ <div class="summary-sub">&nbsp;</div>
+ </div>
+ <div class="summary-icon icon-indigo"><i class="fas fa-folder-open fa-bounce"></i></div>
+ </div>
+ <div class="summary-card open">
+ <div class="summary-left">
+ <div class="summary-label">Open</div>
+ <div class="summary-value green">{{ openCases }}</div>
+ <div class="summary-sub">&nbsp;</div>
+ </div>
+ <div class="summary-icon icon-blue"><i class="fas fa-exclamation-circle fa-beat"></i></div>
+ </div>
+ <div class="summary-card closed">
+ <div class="summary-left">
+ <div class="summary-label">Closed</div>
+ <div class="summary-value red">{{ closedCases }}</div>
+ <div class="summary-sub">&nbsp;</div>
+ </div>
+ <div class="summary-icon icon-green"><i class="fas fa-check-circle fa-spin"></i></div>
+ </div>
+ <div class="summary-card review">
+ <div class="summary-left">
+ <div class="summary-label">Pending Review</div>
+ <div class="summary-value blue">{{ reviewCases }}</div>
+ <div class="summary-sub">&nbsp;</div>
+ </div>
+ <div class="summary-icon icon-yellow"><i class="fas fa-hourglass-half"></i></div>
+ </div>
+ </div>
+ </div>
+ <div class="record-meta" style="padding:8px24px024px; color: #6b7280; font-size:0.98em;">
+ {{ filteredCases.length }} items • Updated a few seconds ago
+ </div>
+ </div>
 
-  <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 class="summary-card review">
-      <div class="summary-label">Pending Review</div>
-      <div class="summary-value">{{ reviewCases }}</div>
-    </div>
-  </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>
 
-  <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>
+ <!-- Table/list view always visible -->
+ <table class="record-table">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th (click)="setSort('caseId')" [attr.aria-sort]="ariaSort('caseId')" style="cursor:pointer;">
+ Case ID
+ <span class="sort" [ngClass]="{'asc': isAsc('caseId'), 'desc': isDesc('caseId'), 'neutral': !isAsc('caseId') && !isDesc('caseId')}"></span>
+ </th>
+ <th (click)="setSort('priority')" [attr.aria-sort]="ariaSort('priority')" style="cursor:pointer;">
+ Priority
+ <span class="sort" [ngClass]="{'asc': isAsc('priority'), 'desc': isDesc('priority'), 'neutral': !isAsc('priority') && !isDesc('priority')}"></span>
+ </th>
+ <th (click)="setSort('status')" [attr.aria-sort]="ariaSort('status')" style="cursor:pointer;">
+ Status
+ <span class="sort" [ngClass]="{'asc': isAsc('status'), 'desc': isDesc('status'), 'neutral': !isAsc('status') && !isDesc('status')}"></span>
+ </th>
+ <th (click)="setSort('crime')" [attr.aria-sort]="ariaSort('crime')" style="cursor:pointer;">
+ Crime Type
+ <span class="sort" [ngClass]="{'asc': isAsc('crime'), 'desc': isDesc('crime'), 'neutral': !isAsc('crime') && !isDesc('crime')}"></span>
+ </th>
+ <th (click)="setSort('dateTime')" [attr.aria-sort]="ariaSort('dateTime')" style="cursor:pointer;">
+ Date &amp; Time
+ <span class="sort" [ngClass]="{'asc': isAsc('dateTime'), 'desc': isDesc('dateTime'), 'neutral': !isAsc('dateTime') && !isDesc('dateTime')}"></span>
+ </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>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let c of rows, let i = index">
+ <td>{{ (currentPage -1) * pageSize + 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>
+ <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.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">
+ <i class="fas fa-eye"></i>
+ </button>
+ <button type="button" class="detect-btn"
+ [disabled]="!c.caseId"
+ (click)="c.caseId && goToDetectWithMetadata(c)"
+ title="Go Detect" aria-label="Go Detect">
+ Go Detect
+ </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="rows.length ===0">
+ <td colspan="12" class="empty">No records found.</td>
+ </tr>
+ </tbody>
+ </table>
 
-  <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>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let c of rows, let i = index">
-        <td>{{ (currentPage - 1) * pageSize + 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>
-          <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.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">
-            <i class="fas fa-eye"></i>
-          </button>
-          <button type="button" class="detect-btn"
-                  [disabled]="!c.caseId"
-                  (click)="c.caseId && goToDetectWithMetadata(c)"
-                  title="Go Detect" aria-label="Go Detect">
-            Go Detect
-          </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="rows.length === 0">
-        <td colspan="12" class="empty">No records found.</td>
-      </tr>
-    </tbody>
-  </table>
-
-  <!-- Pagination Controls -->
-  <div class="pagination-controls" style="display:flex;justify-content:center;align-items:center;margin:20px 0;gap:10px;">
-    <style>
-      .pagination-controls button {
-        border: none;
-        background: #f3f4f6;
-        color: #333;
-        border-radius: 8px;
-        padding: 0 16px;
-        min-width: 40px;
-        min-height: 40px;
-        font-size: 1.1em;
-        font-weight: 500;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-        transition: background 0.2s, color 0.2s, transform 0.2s;
-        cursor: pointer;
-        outline: none;
-      }
-      .pagination-controls button:hover:not(:disabled),
-      .pagination-controls button:focus:not(:disabled) {
-        background: #e3eafe;
-        color: #1976d2;
-        transform: scale(1.08);
-      }
-      .pagination-controls button.active {
-        background: #1976d2;
-        color: #fff;
-        font-weight: bold;
-        box-shadow: 0 0 0 2px #90caf9;
-        animation: pulseActive 1s infinite;
-      }
-      @keyframes pulseActive {
-        0% { box-shadow: 0 0 0 2px #90caf9; }
-        50% { box-shadow: 0 0 0 6px #90caf9; }
-        100% { box-shadow: 0 0 0 2px #90caf9; }
-      }
-      .pagination-controls span {
-        font-size: 1.2em;
-        color: #888;
-        padding: 0 8px;
-      }
-    </style>
-    <button (click)="prevPage()" [disabled]="currentPage === 1">«</button>
-    <ng-container *ngFor="let page of getPagination()">
-      <button *ngIf="page !== '...'" (click)="goToPage(page)" [class.active]="currentPage === page">{{ page }}</button>
-      <span *ngIf="page === '...'">...</span>
-    </ng-container>
-    <button (click)="nextPage()" [disabled]="currentPage === totalPages">»</button>
-  </div>
+ <!-- Pagination Controls -->
+ <div class="pagination-controls" style="display:flex;justify-content:center;align-items:center;margin:20px0;gap:10px;">
+ <style>
+ .pagination-controls button {
+ border: none;
+ background: #f3f4f6;
+ color: #333;
+ border-radius:8px;
+ padding:016px;
+ min-width:40px;
+ min-height:40px;
+ font-size:1.1em;
+ font-weight:500;
+ box-shadow:02px 8px rgba(0,0,0,0.04);
+ transition: background 0.2s, color 0.2s, transform 0.2s;
+ cursor: pointer;
+ outline: none;
+ }
+ .pagination-controls button:hover:not(:disabled),
+ .pagination-controls button:focus:not(:disabled) {
+ background: #e3eafe;
+ color: #1976d2;
+ transform: scale(1.08);
+ }
+ .pagination-controls button.active {
+ background: #1976d2;
+ color: #fff;
+ font-weight: bold;
+ box-shadow:0002px #90caf9;
+ animation: pulseActive1s infinite;
+ }
+ @keyframes pulseActive {
+0% { box-shadow:0002px #90caf9; }
+50% { box-shadow:0006px #90caf9; }
+100% { box-shadow:0002px #90caf9; }
+ }
+ .pagination-controls span {
+ font-size:1.2em;
+ color: #888;
+ padding:08px;
+ }
+ </style>
+ <button (click)="prevPage()" [disabled]="currentPage ===1">«</button>
+ <ng-container *ngFor="let page of getPagination()">
+ <button *ngIf="page !== '...'" (click)="goToPage(page)" [class.active]="currentPage === page">{{ page }}</button>
+ <span *ngIf="page === '...'">...</span>
+ </ng-container>
+ <button (click)="nextPage()" [disabled]="currentPage === totalPages">»</button>
+ </div>
 </div>
 
 <!-- Results summary and page size selector -->
 <div style="display:flex;align-items:center;justify-content:flex-start;gap:24px;margin-bottom:16px;">
-  <span style="font-size:1.1em;">Results: {{ resultsStart }} - {{ resultsEnd }} of {{ resultsTotal }}</span>
-  <select [(ngModel)]="pageSize" (change)="onPageSizeChange(pageSize)" style="padding:4px 12px;border-radius:8px;font-size:1em;">
-    <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
-  </select>
+ <span style="font-size:1.1em;">Results: {{ resultsStart }} - {{ resultsEnd }} of {{ resultsTotal }}</span>
+ <select [(ngModel)]="pageSize" (change)="onPageSizeChange(pageSize)" style="padding:4px 12px;border-radius:8px;font-size:1em;">
+ <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
+ </select>
 </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>
+ <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>
 </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" />
+ <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>
 
 <!-- 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="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 class="details-section-card">
+ <div style="display:flex;align-items:center;justify-content:space-between;">
+ <div class="section-title">All Entered Fields (Raw Form Data)</div>
+ <div style="display:flex;gap:8px;align-items:center;">
+ <button class="small-btn" (click)="copyFormData()" title="Copy JSON">Copy JSON</button>
+ <span *ngIf="copySuccess" style="color:green;font-weight:600;">Copied!</span>
+ </div>
+ </div>
+ <div class="raw-formdata-table" style="max-height:420px;overflow:auto;padding:8px;">
+ <div *ngIf="getFormDataArray(selectedCase)?.length; else noRaw">
+ <table style="width:100%;border-collapse:collapse;">
+ <tr *ngFor="let kv of getFormDataArray(selectedCase)">
+ <td style="padding:8px;border-bottom:1px solid #eee;font-weight:600;width:35%;vertical-align:top;">{{ kv.key }}</td>
+ <td style="padding:8px;border-bottom:1px solid #eee;vertical-align:top;">
+ <pre style="white-space:pre-wrap;margin:0;font-family:inherit;">{{ formatFormValue(kv.value) }}</pre>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <ng-template #noRaw>
+ <div style="color:#888;">No raw form data saved for this case.</div>
+ </ng-template>
+ </div>
+ </div>
+
+ </div>
+ <div style="display:flex;gap:8px;position:relative;">
+ <button class="btn edit-btn" (click)="editCase()" title="Edit Case">Edit</button>
+ <button class="btn close-btn-bottom" (click)="closeAndReturn()" title="Close">&times;</button>
+ </div>
+ </div>
 </div>
 
 <!-- Footer from provided design -->
 <footer>
-  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+ <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
 </footer>
 <!-- End of record-card -->

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
 
 type EvidenceType = 'Document' | 'Photo';
@@ -21,7 +21,38 @@ export class CaseDetailsPageComponent implements OnInit {
   }
   get pagedCases(): PoliceCase[] {
     const start = (this.currentPage - 1) * this.pageSize;
-    return this.filteredCases.slice(start, start + this.pageSize);
+    const sorted = [...this.filteredCases].sort((a: any, b: any) => {
+      let aVal: any, bVal: any;
+      switch (this.sortKey) {
+        case 'caseId':
+          aVal = a.caseId || '';
+          bVal = b.caseId || '';
+          break;
+        case 'priority':
+          aVal = this.getCasePriority(a) || '';
+          bVal = this.getCasePriority(b) || '';
+          break;
+        case 'crime':
+          aVal = a.crime || '';
+          bVal = b.crime || '';
+          break;
+        case 'dateTime':
+          aVal = a.dateTime ? new Date(a.dateTime).getTime() :0;
+          bVal = b.dateTime ? new Date(b.dateTime).getTime() :0;
+          break;
+        case 'status':
+          aVal = a.status || '';
+          bVal = b.status || '';
+          break;
+        default:
+          aVal = '';
+          bVal = '';
+      }
+      if (aVal < bVal) return this.sortDir === 'asc' ? -1 :1;
+      if (aVal > bVal) return this.sortDir === 'asc' ?1 : -1;
+      return 0;
+    });
+    return sorted.slice(start, start + this.pageSize);
   }
   setPage(page: number) {
     if (page < 1 || page > this.totalPages) return;
@@ -45,9 +76,15 @@ export class CaseDetailsPageComponent implements OnInit {
 
   showDetails = false;
   selectedCase: PoliceCase | null = null;
+  rawFormJson: string = '';
+  copySuccess: boolean = false;
   username: string = '';
   q: string = '';
 
+  // Date field groups used for formatting in details view
+  dateTimeFields = new Set<string>(['Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered']);
+  dateFields = new Set<string>(['Follow-up Date', 'Next Hearing Date']);
+
   filterStatus: string = '';
   filterCrimeType: string = '';
   filterDateFrom: string = '';
@@ -100,11 +137,54 @@ export class CaseDetailsPageComponent implements OnInit {
   evidenceType: EvidenceType = 'Document';
   evidenceFiles: { [caseId: string]: { Document: File[]; Photo: File[] } } = {};
 
-  constructor(private caseStore: CaseStoreService, private router: Router) {}
+  returnTo: string = '/';
+  navHasFrom: boolean = false;
+  overlayOpenedLocally: boolean = false;
+
+  // Sorting state
+  sortKey: string = 'dateTime';
+  sortDir: 'asc' | 'desc' = 'desc';
+
+  constructor(private caseStore: CaseStoreService, private router: Router, private route: ActivatedRoute) {}
 
   ngOnInit(): void {
+    // Load cases first
     this.cases = this.caseStore.getPoliceCases();
     this.username = localStorage.getItem('username') || sessionStorage.getItem('username') || '';
+    
+    // If navigated with a case in history state, use it (faster)
+    try {
+      const navState = (history && (history as any).state) || null;
+      const navCase = navState && navState.case ? navState.case : null;
+      if (navCase) {
+        this.selectedCase = navCase as PoliceCase;
+        this.showDetails = true;
+        // store origin to navigate back
+        this.returnTo = navState.from || '/record';
+        this.navHasFrom = !!navState.from;
+        this.overlayOpenedLocally = false;
+        // Prepare raw JSON for copy/inspection
+        try { this.rawFormJson = this.selectedCase && this.selectedCase.formData ? JSON.stringify(this.selectedCase.formData, null,2) : ''; } catch { this.rawFormJson = ''; }
+        return;
+      }
+    } catch {}
+
+    // React to route param changes so clicking any eye always goes through the same route
+    this.route.paramMap.subscribe(params => {
+      const id = params.get('id');
+      if (!id) return;
+      // refresh cases in case store changed
+      this.cases = this.caseStore.getPoliceCases();
+      const found = this.cases.find(c => c.caseId === id || String(c.caseId).toLowerCase() === id.toLowerCase());
+      if (found) {
+        this.selectedCase = found;
+        this.showDetails = true;
+        this.overlayOpenedLocally = false;
+        try { this.rawFormJson = this.selectedCase && this.selectedCase.formData ? JSON.stringify(this.selectedCase.formData, null,2) : ''; } catch { this.rawFormJson = ''; }
+        // default returnTo if not set
+        if (!this.returnTo) this.returnTo = '/record';
+      }
+    });
   }
 
   get filteredCases(): PoliceCase[] {
@@ -150,10 +230,31 @@ export class CaseDetailsPageComponent implements OnInit {
     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');
+  openDetails(c: PoliceCase, fromRoute: string = ''): void {
+    if (!c || !c.caseId) return;
+    // Determine origin for navigation
+    let origin = fromRoute;
+    if (!origin) {
+      // Prefer explicit current router URL (if user is on case-details page)
+      try {
+        const cur = this.router.url || '';
+        if (cur.includes('/case-details')) origin = 'case-details';
+        if (cur.includes('/record')) origin = 'record';
+      } catch {}
+    }
+    if (!origin) {
+      // Fallback to role-based detection
+      origin = this.isInvestigator() ? 'case-details' : 'record';
+    }
+
+    console.log('openDetails: navigating to summary for', c.caseId, 'origin=', origin);
+    this.router.navigate(['/case-details-summary-page', c.caseId], { queryParams: { from: origin, returnId: c.caseId }, state: { case: c, from: origin, returnId: c.caseId } });
+  }
+
+  viewSummary(caseId: string) {
+    const origin = (this.router.url || '').includes('/case-details') ? 'case-details' : 'record';
+    console.log('viewSummary: caseId=', caseId, 'from=', origin);
+    this.router.navigate(['/case-details-summary-page', caseId], { queryParams: { from: origin, returnId: caseId }, state: { from: origin, returnId: caseId } });
   }
 
   closeDetails(): void {
@@ -170,6 +271,7 @@ export class CaseDetailsPageComponent implements OnInit {
     const metadata = {
       caseId: c.caseId || '',
       crimeType: c.crime || '',
+      briefDescription: c.briefDescription || '',
       dateTime: c.dateTime || '',
       location: c.police?.address || '',
       suspectName: c.accused?.name || '',
@@ -336,16 +438,95 @@ export class CaseDetailsPageComponent implements OnInit {
     };
 
     const path = fieldMap[field] || field;
+    let value: any = '—';
     if (Array.isArray(path)) {
-      let value = sc;
+      let v = sc;
       for (const p of path) {
-        if (value && value[p] !== undefined) value = value[p];
-        else return '—';
+        if (v && v[p] !== undefined) v = v[p];
+        else {
+          v = undefined;
+          break;
+        }
       }
-      return value !== undefined && value !== null && value !== '' ? value : '—';
+      value = v;
     } else {
-      return sc[path] !== undefined && sc[path] !== null && sc[path] !== '' ? sc[path] : '—';
+      value = sc && sc[path] !== undefined ? sc[path] : undefined;
     }
+
+    // If not found on mapped path, try raw formData saved with the case
+    if (value === null || value === undefined || value === '') {
+      try {
+        const fd = this.getFormDataArray(sc);
+        const norm = (s: any) => {
+          if (s === null || s === undefined) return '';
+          let t = String(s).toLowerCase();
+          t = t.replace(/&/g, ''); // remove ampersand
+          t = t.replace(/and/g, '');
+          t = t.replace(/entry/g, '');
+          t = t.replace(/\s+/g, '');
+          return t.replace(/[^a-z0-9]/g, '');
+        };
+
+        // Try exact key match first
+        if (fd && fd.length) {
+          let kv = fd.find(k => k && String(k.key).toLowerCase() === String(field).toLowerCase());
+          if (kv) value = kv.value;
+
+          // Try normalized matches: label -> stored key, and mapped path names
+          if (value === null || value === undefined || value === '') {
+            const fieldNorm = norm(field);
+            const pathName = Array.isArray(path) ? path[path.length -1] : String(path);
+            const pathNorm = norm(pathName);
+
+            kv = fd.find(k => k && (norm(k.key) === fieldNorm || norm(k.key) === pathNorm || norm(k.key).includes(fieldNorm) || fieldNorm.includes(norm(k.key))));
+            if (kv) value = kv.value;
+          }
+        }
+
+        // If still not found, check sc.formData object shape
+        if ((value === null || value === undefined || value === '') && sc && sc.formData && typeof sc.formData === 'object') {
+          // try direct property
+          if (sc.formData[field] !== undefined) value = sc.formData[field];
+          else {
+            // normalized search in object keys
+            const fieldNorm = (s: any) => s === null || s === undefined ? '' : String(s).toLowerCase().replace(/[^a-z0-9]/g, '');
+            const target = fieldNorm(field);
+            for (const k of Object.keys(sc.formData)) {
+              if (fieldNorm(k) === target || k.toLowerCase() === field.toLowerCase() || k.toLowerCase().includes(field.toLowerCase())) {
+                value = sc.formData[k];
+                break;
+              }
+            }
+          }
+        }
+      } catch (e) {
+        // ignore
+      }
+    }
+
+    // Normalize and format
+    if (value === null || value === undefined || value === '') return '—';
+
+    // Special-case: date/time fields - try to format human-readable
+    if ((this.dateTimeFields && this.dateTimeFields.has(field)) || (this.dateFields && this.dateFields.has(field))) {
+      const d = new Date(value);
+      if (!isNaN(d.getTime())) {
+        if (this.dateFields && this.dateFields.has(field)) return d.toISOString().slice(0,10);
+        return d.toLocaleString();
+      }
+    }
+
+    if (typeof value === 'object') return this.formatFormValue(value);
+    return value;
+  }
+
+  // New helper: safely format display value for formData
+  formatFormValue(value: any): string {
+    if (value === null || value === undefined || value === '') return '—';
+    if (typeof value === 'object') {
+      try { return JSON.stringify(value, null,2); } catch { return String(value); }
+    }
+    return String(value);
   }
 
   getProgressValue(caseObj: any): number {
@@ -381,10 +562,13 @@ export class CaseDetailsPageComponent implements OnInit {
     // Automatic logic based on crime type and status
     const highCrimes = ['Murder', 'Robbery'];
     const mediumCrimes = ['Theft', 'Assault'];
-    if (highCrimes.includes(c.crime) || c.status === 'Open') {
+    const crimeStr = (c && c.crime) ? String(c.crime) : '';
+    const statusStr = (c && c.status) ? String(c.status) : '';
+
+    if (highCrimes.includes(crimeStr) || statusStr === 'Open') {
       return 'High';
     }
-    if (mediumCrimes.includes(c.crime) || c.status === 'Under Investigation') {
+    if (mediumCrimes.includes(crimeStr) || statusStr === 'Under Investigation') {
       return 'Medium';
     }
     return 'Low';
@@ -437,6 +621,27 @@ export class CaseDetailsPageComponent implements OnInit {
     return this.pagedCases;
   }
 
+  // Sorting methods
+  setSort(key: string) {
+    if (this.sortKey === key) {
+      this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.sortKey = key;
+      this.sortDir = key === 'dateTime' ? 'desc' : 'asc';
+    }
+    this.currentPage = 1;
+  }
+
+  isAsc(key: string) {
+    return this.sortKey === key && this.sortDir === 'asc';
+  }
+  isDesc(key: string) {
+    return this.sortKey === key && this.sortDir === 'desc';
+  }
+  ariaSort(key: string) {
+    return this.sortKey === key ? (this.sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
+  }
+
   // Helper for pagination display
   getPagination(): (number | string)[] {
     const pages: (number | string)[] = [];
@@ -468,4 +673,127 @@ export class CaseDetailsPageComponent implements OnInit {
       this.setPage(page);
     }
   }
+
+  logout(): void {
+    // Implement your logout logic here (clear session, etc.)
+    // For now, just redirect to home/login
+    window.location.href = '/';
+  }
+
+  // New helper: return keys in saved formData (preserve order)
+  getFormDataKeys(caseObj: any): string[] {
+    if (!caseObj || !caseObj.formData) return [];
+    try {
+      const fd = caseObj.formData;
+      if (Array.isArray(fd)) {
+        return fd.map((kv: any) => kv && kv.key ? String(kv.key) : '');
+      }
+      return Object.keys(fd);
+    } catch {
+      return [];
+    }
+  }
+
+  // New helper: detect if formData is key/value array
+  isFormDataArray(fd: any): boolean {
+    return Array.isArray(fd) && fd.length >0 && fd.every((item: any) => item && Object.prototype.hasOwnProperty.call(item, 'key'));
+  }
+
+  // Return formData as array of {key,value}
+  getFormDataArray(caseObj: any): Array<{ key: string; value: any }> {
+    if (!caseObj || !caseObj.formData) return [];
+    const fd = caseObj.formData;
+    if (this.isFormDataArray(fd)) return fd as Array<{ key: string; value: any }>;
+    if (typeof fd === 'object') return Object.keys(fd).map(k => ({ key: k, value: fd[k] }));
+    return [{ key: 'value', value: fd }];
+  }
+
+  copyFormData(): void {
+    if (!this.selectedCase) return;
+    // Use the key/value array representation for copying so UI and clipboard match
+    const kv = this.getFormDataArray(this.selectedCase);
+    const json = JSON.stringify(kv, null,2);
+
+    const write = (text: string) => {
+      if (navigator && (navigator as any).clipboard && (navigator as any).clipboard.writeText) {
+        return (navigator as any).clipboard.writeText(text);
+      }
+      return new Promise<void>((resolve, reject) => {
+        try {
+          const ta = document.createElement('textarea');
+          ta.value = text;
+          ta.style.position = 'fixed';
+          ta.style.left = '-9999px';
+          document.body.appendChild(ta);
+          ta.select();
+          document.execCommand('copy');
+          document.body.removeChild(ta);
+          resolve();
+        } catch (e) { reject(e); }
+      });
+    };
+
+    write(json).then(() => {
+      this.copySuccess = true;
+      setTimeout(() => this.copySuccess = false,2000);
+    }).catch(() => {
+      alert('Copy failed - your browser may not support programmatic clipboard access.');
+    });
+  }
+
+  editCase(): void {
+    if (!this.selectedCase) return;
+    // Send the stored key/value array back to Infopage as a flat object
+    const kv = this.getFormDataArray(this.selectedCase);
+    const flat: any = {};
+    kv.forEach(item => { flat[item.key] = item.value; });
+    // Navigate to infopage route with state carrying the flat form
+    this.router.navigate(['/infopage'], { state: { prefillFormData: flat } });
+  }
+
+  // Navigation back to origin
+  closeAndReturn(): void {
+    this.closeDetails();
+    // Use returnTo if available, otherwise default to '/record'
+    const target = this.returnTo || '/record';
+
+    // Debug info for runtime troubleshooting
+    console.log('closeAndReturn called. returnTo=', this.returnTo, 'history.state=', (history && (history as any).state) || {});
+
+    // Normalize and handle case-details with id if available in history.state
+    const hist = (history && (history as any).state) || {};
+    const returnId = hist && (hist.returnId || hist.caseId || hist.case) ? (hist.returnId || hist.caseId || (hist.case && hist.case.caseId)) : null;
+
+    try {
+      if (target.includes('case-details')) {
+        if (returnId) {
+          // navigate to specific case details page
+          this.router.navigate(['/case-details', returnId]);
+          return;
+        }
+        // navigate to case-details root
+        this.router.navigate(['/case-details']);
+        return;
+      }
+    } catch (e) {
+      // fallback to generic navigation below
+    }
+
+    // For other targets ensure absolute URL and navigate
+    const normalized = target.startsWith('/') ? target : ('/' + target);
+    // Use navigateByUrl to avoid relative navigation issues
+    this.router.navigateByUrl(normalized);
+  }
+
+  getReturnLabel(): string {
+    try {
+      if (!this.returnTo) return 'Previous Page';
+      const t = this.returnTo.toString();
+      if (t.includes('/record') || t === 'record') return 'Records';
+      if (t.includes('/case-details') || t === 'case-details') return 'Case Details';
+      if (t.includes('/infopage') || t === 'infopage') return 'Info Page';
+      if (t.includes('/')) return 'Previous Page';
+    } catch {}
+    return 'Previous Page';
+  }
 }

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

@@ -0,0 +1,481 @@
+:root {
+  --masthead-min-height: 140px;
+}
+
+/* Base */
+body {
+  background: linear-gradient(135deg, #e0e7ef 0%, #38bdf8 100%);
+  min-height: 100vh;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+}
+
+/* Layout */
+.case-details-summary-layout {
+  display: flex;
+  min-height: 90vh; /* unified (was 88vh in an earlier duplicate) */
+  background: linear-gradient(120deg, #e0f2fe 0%, #f4f6fa 100%);
+}
+
+.masthead {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 24px 24px 12px;
+  min-height: var(--masthead-min-height);
+  background: transparent;
+  margin-bottom: 48px;
+}
+
+/* Header (from infopage) */
+.site-header {
+  background: #011329;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 0;
+  position: relative;
+  z-index: 10;
+  padding-bottom: 0;
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 32px 0 32px;
+  position: relative;
+}
+
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.logo-img-header {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  padding: 4px;
+  margin-top: -6px;
+  margin-bottom: 1vh;
+}
+
+.py-detect-title-header {
+  font-size: 2.1rem;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-weight: 900;
+  letter-spacing: 6px;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 1.5vh;
+}
+
+  .py-detect-title-header .py-letter.p,
+  .py-detect-title-header .py-letter.d,
+  .py-detect-title-header .py-letter.t,
+  .py-detect-title-header .py-letter.c {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.y,
+  .py-detect-title-header .py-letter.e,
+  .py-detect-title-header .py-letter.e2,
+  .py-detect-title-header .py-letter.t2 {
+    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;
+  }
+
+/* Sidebar */
+.sidebar {
+  width: 370px;
+  height: 84vh;
+  color: #fff;
+  box-shadow: 0 8px 32px #2563eb33;
+  display: flex;
+  flex-direction: column;
+  padding-top: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: 0;
+  overflow-y: auto;
+  background: linear-gradient(to right, #011022, #01030a);
+}
+
+  .sidebar ul {
+    list-style: none;
+    padding: 14px;
+    margin: 0;
+  }
+
+  .sidebar > ul > li > button {
+    border-radius: 12px !important;
+    margin-bottom: 18px;
+    padding: 18px 32px;
+    box-shadow: 0 4px 16px #38bdf855;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    letter-spacing: 1px;
+    text-align: left;
+    outline: none;
+    position: relative !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    min-width: 150px !important;
+    justify-content: center !important;
+    background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)) !important;
+    border: 1px solid rgba(0,212,255,0.3) !important;
+    backdrop-filter: blur(10px) !important;
+    color: #e0e6ed !important;
+    font-weight: 900 !important;
+    font-size: 1.18rem !important;
+  }
+
+    .sidebar > ul > li > button.active,
+    .sidebar > ul > li > button:focus {
+      background: linear-gradient(90deg, #38bdf8 0%, #bfcfe7 100%);
+      box-shadow: 0 8px 32px #2563eb55;
+      transform: scale(1.06);
+    }
+
+    .sidebar > ul > li > button:hover {
+      background: linear-gradient(90deg, #0ea5e9 0%, #bfcfe7 100%);
+    }
+
+  .sidebar ul ul {
+    background: rgba(255, 255, 255, 0.18);
+    border-radius: 14px;
+    margin-top: 2px;
+    box-shadow: 0 2px 8px #38bdf822;
+    padding: 8px 0;
+    animation: slideDown 0.35s cubic-bezier(.77, 0, .175, 1);
+  }
+
+    .sidebar ul ul li {
+      background: linear-gradient(90deg, #f8fafc 0%, #e0e7ef 100%);
+      color: #010610;
+      font-size: 1.05em;
+      font-weight: 700;
+      border-radius: 10px;
+      margin: 6px 18px;
+      padding: 12px 22px;
+      box-shadow: 0 2px 8px #2563eb11;
+      cursor: pointer;
+      transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
+      border: 2px solid transparent;
+    }
+
+      .sidebar ul ul li.active,
+      .sidebar ul ul li:focus {
+        background: linear-gradient(90deg, #38bdf8 0%, #0c0c0c 100%);
+        color: #fff;
+        border: 2px solid #2563eb;
+        box-shadow: 0 4px 16px #38bdf855;
+        transform: scale(1.04);
+      }
+
+      .sidebar ul ul li:hover {
+        background: linear-gradient(90deg, #e0f2fe 0%, #38bdf8 100%);
+        color: #2563eb;
+        border: 2px solid #38bdf8;
+      }
+
+/* Main */
+.main-content {
+  flex: 1;
+  padding: 6px 6px;
+  background: linear-gradient(120deg, #f4f6fa 0%, #e0e7ef 100%);
+  min-height: calc(100vh - var(--masthead-min-height) - 48px);
+  border-radius: 0;
+  box-shadow: 0 8px 32px #2563eb22;
+  animation: fadeIn 0.5s cubic-bezier(.77, 0, .175, 1);
+  overflow-y: auto;
+}
+
+/* Slide panel */
+.slide-panel {
+  background: #fff;
+  border-radius: 0;
+  box-shadow: 0 4px 24px #23272b18;
+  padding: 38px 54px;
+  min-height: 340px;
+  transition: transform 0.3s cubic-bezier(.77, 0, .175, 1), box-shadow 0.2s;
+  transform: translateX(0);
+  animation: fadeIn 0.5s cubic-bezier(.77, 0, .175, 1);
+}
+
+  .slide-panel.open {
+    transform: translateX(0);
+    box-shadow: 0 12px 48px #2563eb22;
+  }
+
+/* Tabs */
+.tabs {
+  display: flex;
+  gap: 18px;
+  margin-bottom: 32px;
+}
+
+  .tabs button {
+    background: #f8fafc;
+    color: #2563eb;
+    border: none;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: 1.08em;
+    padding: 12px 32px;
+    cursor: pointer;
+    box-shadow: 0 2px 8px #2563eb11;
+    transition: background 0.25s, color 0.25s, transform 0.18s;
+  }
+
+    .tabs button.active,
+    .tabs button:focus {
+      background: #2563eb;
+      color: #fff;
+      box-shadow: 0 4px 16px #38bdf855;
+      transform: scale(1.04);
+    }
+
+    .tabs button:hover {
+      background: #0ea5e9;
+      color: #fff;
+    }
+
+/* Table */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 24px 0;
+}
+
+th {
+  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
+  color: #fff;
+  padding: 16px;
+  text-align: left;
+  font-weight: 700;
+  font-size: 1.1em;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+td {
+  background: #fff;
+  padding: 16px;
+  border-bottom: 2px solid #e0e7ef;
+  color: #50575d;
+  font-size: 1em;
+  vertical-align: middle;
+}
+
+tr:hover td {
+  background: #f1f9ff;
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+/* Footer */
+footer {
+  background: linear-gradient(to right, #011022, #01030a);
+  color: #fff;
+  text-align: center;
+  padding: 10px 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  margin-top: 0;
+}
+
+/* Cards */
+.details-card {
+  background: #fff;
+  border-radius: 0;
+  box-shadow: 0 4px 32px #2563eb22;
+  padding: 5px 5px;
+  margin-top: -5px;
+  margin-bottom: 32px;
+  max-width: 1510px;
+  width: 100%;
+  animation: fadeIn 0.6s cubic-bezier(.77, 0, .175, 1);
+}
+
+.details-header {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 32px;
+}
+
+  .details-header h2 {
+    font-size: 2.3em;
+    font-weight: 900;
+    color: #2563eb;
+    margin: 0;
+    letter-spacing: 1.5px;
+    text-shadow: 1px 0 #fff;
+  }
+
+.subheader-pill {
+  background: linear-gradient(90deg, #000000 0%, #0066ff 100%);
+  color: #fff;
+  font-weight: 700;
+  font-size: 1.1em;
+  border-radius: 16px;
+  padding: 8px 22px;
+  margin-left: 18px;
+  box-shadow: 0 2px 8px #38bdf855;
+  display: inline-block;
+}
+
+.details-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 6px 6px;
+}
+
+.details-field {
+  background: linear-gradient(90deg, #f8fafc 0%, #e0e7ef 100%);
+  border-radius: 0;
+  box-shadow: 0 2px 8px #2563eb11;
+  padding: 3px 3px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-height: 3px;
+  transition: box-shadow 0.18s, background 0.18s;
+}
+
+.field-label {
+  color: #2563eb;
+  font-weight: 700;
+  font-size: 1.09em;
+  margin-bottom: 2px;
+}
+
+.field-value {
+  color: #23272b;
+  font-size: 1.08em;
+  font-weight: 500;
+  word-break: break-word;
+}
+
+.details-field .field-value {
+  max-height: 220px;
+  overflow-y: auto;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.details-field.description-field {
+  min-height: 32px;
+}
+
+  .details-field.description-field .field-value {
+    white-space: pre-wrap;
+    min-height: 32px;
+    max-height: 400px;
+    overflow-y: auto;
+    resize: vertical;
+    transition: min-height 0.2s, max-height 0.2s;
+  }
+
+/* Animated back button */
+.animated-back {
+  background: linear-gradient(90deg, #38bdf8 0%, #bfcfe7 100%);
+  color: #23272b; /* text color */
+  font-size: 1em;
+  font-weight: 900;
+  border: none;
+  border-radius: 5px;
+  margin-bottom: 18px;
+  padding: 0px 4px;
+  box-shadow: 0 4px 16px #38bdf855;
+  cursor: pointer;
+  transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.18s;
+  letter-spacing: 1px;
+  text-align: center;
+  outline: none;
+  position: relative;
+  animation: backBtnFadeIn 0.6s cubic-bezier(.77,0,.175,1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0px;
+}
+
+  .animated-back:hover {
+    background: linear-gradient(90deg, #0ea5e9 0%, #bfcfe7 100%);
+    transform: scale(1.08);
+    box-shadow: 0 8px 32px #2563eb55;
+  }
+
+.back-icon {
+  font-size: 1em;
+  margin-right: 4px;
+  margin-top: -4px;
+  transition: transform 0.2s;
+}
+
+.animated-back:hover .back-icon {
+  transform: translateX(-4px) scale(1.2);
+}
+
+
+/* Animations */
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes backBtnFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

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

@@ -0,0 +1,87 @@
+<!-- Modern UI header with logo and PyDetect title -->
+<div class="site-header">
+ <div class="header-inner">
+ <div class="logo-cluster">
+ <span style="cursor:default;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 class="header-actions-right">
+ <button class="back-btn animated-back" (click)="navigateBack()">
+ <span class="back-icon">←</span> Back
+ </button>
+ </div>
+ </div>
+</div>
+
+
+<div class="case-details-summary-layout">
+ <aside class="sidebar">
+ <ul>
+ <li>
+ <button (click)="setMainHeader('crime')" [class.active]="expandedMainHeader==='crime'">Crime Details</button>
+ <ul *ngIf="expandedMainHeader==='crime'">
+ <ng-container *ngFor="let subgroupName of crimeSubgroupOrder">
+ <li *ngIf="sections['crime']?.subgroups[subgroupName]" (click)="setSubheader('crime', subgroupName)" [class.active]="activeSubheader==='crime-' + subgroupName">
+ {{ subgroupName }}
+ </li>
+ </ng-container>
+ </ul>
+ </li>
+ <li>
+ <button (click)="setMainHeader('suspect')" [class.active]="expandedMainHeader==='suspect'">Suspect Details</button>
+ <ul *ngIf="expandedMainHeader==='suspect'">
+ <ng-container *ngFor="let subgroupName of suspectSubgroupOrder">
+ <li *ngIf="sections['suspect']?.subgroups[subgroupName]" (click)="setSubheader('suspect', subgroupName)" [class.active]="activeSubheader==='suspect-' + subgroupName">
+ {{ subgroupName }}
+ </li>
+ </ng-container>
+ </ul>
+ </li>
+ <li>
+ <button (click)="setMainHeader('notes')" [class.active]="expandedMainHeader==='notes'">Documents/Evidence</button>
+ <ul *ngIf="expandedMainHeader==='notes'">
+ <ng-container *ngFor="let subgroupName of notesSubgroupOrder">
+ <li *ngIf="sections['notes']?.subgroups[subgroupName]" (click)="setSubheader('notes', subgroupName)" [class.active]="activeSubheader==='notes-' + subgroupName">
+ {{ subgroupName }}
+ </li>
+ </ng-container>
+ </ul>
+ </li>
+ </ul>
+ </aside>
+ <main class="main-content">
+ <div *ngIf="activeMainHeader && activeSubheader">
+ <div class="details-card">
+ <div class="details-header">
+ <h2>{{ sections[activeMainHeader]?.title }} <span class="subheader-pill">{{ activeSubheaderName }}</span></h2>
+ </div>
+ <div *ngIf="sections[activeMainHeader]?.subgroups[activeSubheaderName] as fields">
+ <div class="details-grid">
+ <div class="details-field" [ngClass]="{'description-field': field.toLowerCase().includes('description') || field.toLowerCase().includes('notes') || field.toLowerCase().includes('findings') }" *ngFor="let field of fields">
+ <div class="field-label">{{ field }}</div>
+ <div class="field-value">{{ getFilledDetail(activeMainHeader, activeSubheaderName, field) }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
+</div>
+
+<!-- Footer from provided design -->
+<footer>
+ <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+</footer>
+<!-- End of record-card -->

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

@@ -0,0 +1,446 @@
+import { InfopageComponent } from '../infopage/infopage.component';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
+
+@Component({
+ selector: 'app-case-details-summary-page',
+ templateUrl: './case-details-summary-page.component.html',
+ styleUrls: ['./case-details-summary-page.component.css']
+})
+export class CaseDetailsSummaryPageComponent implements OnInit {
+ caseId: string | null = null;
+ activeSection: string = 'crime';
+ activeSubgroup: string = '';
+ // Added ordered list for crime subgroups to ensure sidebar shows in desired order
+ crimeSubgroupOrder: string[] = [
+ 'Identification & Timing',
+ 'Location & People',
+ 'Offence & Context',
+ 'Evidence & Scene',
+ 'Operational Notes',
+ 'Status & Linkage',
+ 'Remark'
+ ];
+ // Added ordered list for suspect subgroups
+ suspectSubgroupOrder: string[] = [
+ 'Identity',
+ 'Physical Description',
+ 'Background',
+ 'Known Associates',
+ 'Prior Records',
+ 'Remark'
+ ];
+
+ // Added ordered list for notes/evidence subgroups
+ notesSubgroupOrder: string[] = [
+ 'Investigation Notes',
+ 'Evidence Files',
+ 'Links and Recommendation',
+ 'Remark'
+ ];
+ 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', 'Physical Evidence', 'Evidence Storage Reference', 'Photos / Video?', 'CCTV Present?', 'CCTV Sources / IDs', 'Forensic Tests Required', 'Chain of Custody?', 'Scene Condition', 'Digital Evidence'],
+ '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)', 'Tattoo Details', 'Hair Color', 'Scar Details', 'Distinguishing Marks', 'Build', 'Eye Color', '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']
+ }
+ }
+ };
+ mainTitles: string[] = ['Crime Details', 'Suspect Details', 'Evidence and Documents'];
+ mainKeys: string[] = ['crime', 'suspect', 'notes'];
+ subgroups: string[] = [];
+ activeTab: string = 'Crime Details';
+ tabs: string[] = ['Crime Details', 'Suspect Details', 'Evidence and Documents']; // Added tabs property
+ slideOpen: boolean = true; // Added slideOpen property
+ activeMainHeader: string = 'crime';
+ activeSubheader: string = '';
+ activeSubheaderName: string = '';
+ expandedMainHeader: string | null = 'crime'; // Track which main header is expanded
+ selectedCase: PoliceCase | null = null;
+ fromPage: string = 'record'; // default
+ returnId: string | null = null;
+
+ // date sets for formatting
+ private dateTimeFields = new Set<string>(['Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered']);
+ private dateFields = new Set<string>(['Follow-up Date', 'Next Hearing Date']);
+
+ constructor(private route: ActivatedRoute, private router: Router, private caseStore: CaseStoreService) {
+ // Read route params
+ this.route.paramMap.subscribe(params => {
+ this.caseId = params.get('id');
+ });
+
+ // Read query params (preferable for reliable behavior)
+ this.route.queryParams.subscribe(params => {
+ if (params['from']) {
+ this.fromPage = params['from'];
+ }
+ if (params['returnId']) {
+ this.returnId = params['returnId'];
+ }
+ });
+
+ // Also read navigation state (router state or history.state) as a fallback
+ const nav = this.router.getCurrentNavigation();
+ if (nav && nav.extras && (nav.extras.state as any)) {
+ const st = nav.extras.state as any;
+ if (st.from) this.fromPage = st.from;
+ if (st.returnId) this.returnId = st.returnId;
+ if (st.case) this.selectedCase = st.case as PoliceCase;
+ if (st.caseId) this.returnId = this.returnId || st.caseId;
+ }
+
+ // Fallback to history.state for cases where getCurrentNavigation() is unavailable (e.g., after reload)
+ const hist = (window && (window as any).history && (window as any).history.state) || {};
+ if (hist.from) this.fromPage = hist.from;
+ if (hist.returnId) this.returnId = this.returnId || hist.returnId;
+ if (hist.caseId) this.returnId = this.returnId || hist.caseId;
+ if (hist.case && !this.selectedCase) this.selectedCase = hist.case as PoliceCase;
+
+ // Debug log to help trace where navigation came from
+ console.log('[CaseDetailsSummary] init sources:', {
+ urlParamId: this.caseId,
+ queryFrom: (this.route.snapshot.queryParamMap.get('from')),
+ queryReturnId: (this.route.snapshot.queryParamMap.get('returnId')),
+ navState: nav?.extras?.state,
+ historyState: hist,
+ resolvedFrom: this.fromPage,
+ resolvedReturnId: this.returnId
+ });
+ }
+
+ ngOnInit() {
+ this.setSection('crime');
+ // Ensure the main header and first subgroup are selected so main content shows by default
+ const crimeSubgroups = Object.keys(this.sections['crime']?.subgroups || {});
+ const first = crimeSubgroups[0] || '';
+ this.activeMainHeader = 'crime';
+ this.expandedMainHeader = 'crime';
+ this.activeSubheader = 'crime-' + first;
+ this.activeSubheaderName = first;
+
+ // Load the selected case if not already provided in navigation state
+ if (!this.selectedCase) {
+ // Prefer caseId from route param or returnId
+ const id = this.caseId || this.returnId || null;
+ if (id) {
+ const found = this.caseStore.getPoliceCases().find(c => c.caseId === id || String(c.caseId).toLowerCase() === id.toLowerCase());
+ if (found) this.selectedCase = found;
+ }
+ }
+ }
+
+ setSection(section: string) {
+ this.activeSection = section;
+ this.subgroups = Object.keys(this.sections[section].subgroups);
+ this.activeSubgroup = this.subgroups[0];
+ this.activeTab = this.sections[section].title;
+ }
+
+ setSubgroup(subgroup: string) {
+ this.activeSubgroup = subgroup;
+ }
+
+ setTab(tab: string) {
+ // Find section key by tab title
+ const sectionKey = this.mainKeys[this.mainTitles.indexOf(tab)];
+ if (sectionKey) {
+ this.activeTab = tab;
+ this.setSection(sectionKey);
+ }
+ }
+
+ setMainHeader(header: string) {
+ if (this.expandedMainHeader === header) {
+ // Collapse if already expanded
+ this.expandedMainHeader = null;
+ } else {
+ // Expand and collapse others
+ this.expandedMainHeader = header;
+ this.activeMainHeader = header;
+ // Set first subgroup as default
+ const subgroups = Object.keys(this.sections[header]?.subgroups || {});
+ this.activeSubheader = header + '-' + (subgroups[0] || '');
+ this.activeSubheaderName = subgroups[0] || '';
+ }
+ }
+
+ setSubheader(mainHeader: string, subgroup: string) {
+ this.activeSubheader = mainHeader + '-' + subgroup;
+ this.activeSubheaderName = subgroup;
+ }
+
+ getFilledDetail(mainHeader: string, subgroup: string, field: string): string {
+ // If we have a selectedCase, map the field to the case object first
+ if (this.selectedCase) {
+ const v = this.getFieldValueFromCase(this.selectedCase, field);
+ if (v !== null && v !== undefined && v !== '') {
+ // format dates if needed
+ if (this.dateFields && this.dateFields.has(field)) {
+ const d = new Date(v);
+ if (!isNaN(d.getTime())) return d.toISOString().slice(0,10);
+ }
+ if (this.dateTimeFields && this.dateTimeFields.has(field)) {
+ const d = new Date(v);
+ if (!isNaN(d.getTime())) return d.toLocaleString();
+ }
+ return String(v);
+ }
+ }
+
+ // Load saved form data from localStorage as fallback (legacy behavior)
+ const savedData = localStorage.getItem('pydetect-form-data');
+ if (savedData) {
+ const data = JSON.parse(savedData);
+ if (data.formData && data.formData[field] !== undefined && data.formData[field] !== null) {
+ return data.formData[field];
+ }
+ }
+ return '';
+ }
+
+ // Map field labels to properties on PoliceCase (copied/adapted from recordpage)
+ private getFieldValueFromCase(sc: any, field: string): any {
+ const fieldMap: { [key: string]: string | string[] } = {
+ '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;
+ let value: any = undefined;
+ if (Array.isArray(path)) {
+ let v: any = sc as any;
+ for (const p of path) {
+ if (v && v[p] !== undefined) v = v[p];
+ else { v = undefined; break; }
+ }
+ value = v;
+ } else {
+ value = (sc as any) && (sc as any)[path] !== undefined ? (sc as any)[path] : undefined;
+ }
+
+ // If not found on mapped path, try raw formData saved with the case
+ if (value === null || value === undefined || value === '') {
+ try {
+ const fd = this.getFormDataArray(sc as any);
+ const norm = (s: any) => {
+ if (s === null || s === undefined) return '';
+ let t = String(s).toLowerCase();
+ t = t.replace(/&/g, '');
+ t = t.replace(/and/g, '');
+ t = t.replace(/entry/g, '');
+ t = t.replace(/\s+/g, '');
+ return t.replace(/[^a-z0-9]/g, '');
+ };
+
+ if (fd && fd.length) {
+ let kv = fd.find(k => k && String(k.key).toLowerCase() === String(field).toLowerCase());
+ if (kv) value = kv.value;
+ if (value === null || value === undefined || value === '') {
+ const fieldNorm = norm(field);
+ const pathName = Array.isArray(path) ? path[path.length -1] : String(path);
+ const pathNorm = norm(pathName);
+ kv = fd.find(k => k && (norm(k.key) === fieldNorm || norm(k.key) === pathNorm || norm(k.key).includes(fieldNorm) || fieldNorm.includes(norm(k.key))));
+ if (kv) value = kv.value;
+ }
+ }
+
+ if ((value === null || value === undefined || value === '') && (sc as any) && (sc as any).formData && typeof (sc as any).formData === 'object') {
+ if ((sc as any).formData[field] !== undefined) value = (sc as any).formData[field];
+ else {
+ const fieldNorm = (s: any) => s === null || s === undefined ? '' : String(s).toLowerCase().replace(/[^a-z0-9]/g, '');
+ const target = fieldNorm(field);
+ for (const k of Object.keys((sc as any).formData)) {
+ if (fieldNorm(k) === target || k.toLowerCase() === field.toLowerCase() || k.toLowerCase().includes(field.toLowerCase())) {
+ value = (sc as any).formData[k];
+ break;
+ }
+ }
+ }
+ }
+ } catch (e) {
+ // ignore
+ }
+ }
+
+ return value;
+ }
+
+ // Helpers reused from other components
+ private isFormDataArray(fd: any): boolean {
+ return Array.isArray(fd) && fd.length >0 && fd.every((item: any) => item && Object.prototype.hasOwnProperty.call(item, 'key'));
+ }
+
+ private getFormDataArray(caseObj: any): Array<{ key: string; value: any }> {
+ if (!caseObj || !(caseObj as any).formData) return [];
+ const fd = (caseObj as any).formData;
+ if (this.isFormDataArray(fd)) return fd as Array<{ key: string; value: any }>;
+ if (typeof fd === 'object') return Object.keys(fd).map(k => ({ key: k, value: fd[k] }));
+ return [{ key: 'value', value: fd }];
+ }
+
+ // New helper: safely format display value for formData
+ formatFormValue(value: any): string {
+ if (value === null || value === undefined || value === '') return '—';
+ if (typeof value === 'object') {
+ try { return JSON.stringify(value, null,2); } catch { return String(value); }
+ }
+ return String(value);
+ }
+
+ navigateBack() {
+ // Prefer explicit fromPage values set via queryParam or navigation state
+ if (this.fromPage === 'case-details') {
+ // If returnId is available, pass it back in navigation state for the target to use
+ if (this.returnId) {
+ this.router.navigate(['/case-details'], { state: { caseId: this.returnId } });
+ } else {
+ this.router.navigate(['/case-details']);
+ }
+ } else {
+ // Default/record
+ this.router.navigate(['/record']);
+ }
+ }
+}

src/app/data/case-data.ts

@@ -0,0 +1,30 @@
+export const CASE_DATA = [
+ {
+ caseId: 'CASE-007', officer: 'Ganesh', date: '2025-10-15',
+ question: 'Did you visit the location on12th?', answer: 'Yes, I was there for about20 minutes.', duration: '00:18', truthProbability: '78%', dominantEmotion: 'Nervous 😟', emotion: 'Calm',
+ stressLevel:68, confidence: 'Moderate', sentiment: 'Negative (-0.45)', responseDelay: '3.1 sec', eyeContact: '78%', blinkRate: '12/min',
+ posture: 'Neutral', handMovement: 'Low', legMovement: 'Moderate', microExpressions: '2 detected',
+ physicalExpression: 'Neutral, Low hand, Moderate leg,2 detected', physicalScore: '2%', voiceExpression: 'Stress68,64%', voiceScore: '33%', overallScore: '33%'
+ },
+ {
+ caseId: 'CASE-007', officer: 'Ganesh', date: '2025-10-15',
+ question: 'Were you alone at the scene?', answer: 'No, my friend was with me.', duration: '00:22', truthProbability: '62%', dominantEmotion: 'Nervous 😟', emotion: 'Nervous',
+ stressLevel:72, confidence: 'Low', sentiment: 'Negative (-0.32)', responseDelay: '2.7 sec', eyeContact: '65%', blinkRate: '15/min',
+ posture: 'Defensive', handMovement: 'Medium', legMovement: 'Low', microExpressions: '3 detected',
+ physicalExpression: 'Defensive, Medium hand, Low leg,3 detected', physicalScore: '3%', voiceExpression: 'Stress72,51%', voiceScore: '27%', overallScore: '27%'
+ },
+ {
+ caseId: 'CASE-007', officer: 'Ganesh', date: '2025-10-15',
+ question: 'Did you know the victim?', answer: 'Yes, we worked together.', duration: '00:15', truthProbability: '85%', dominantEmotion: 'Calm 😌', emotion: 'Calm',
+ stressLevel:38, confidence: 'High', sentiment: 'Positive (+0.22)', responseDelay: '1.2 sec', eyeContact: '82%', blinkRate: '10/min',
+ posture: 'Relaxed', handMovement: 'Low', legMovement: 'Low', microExpressions: '1 detected',
+ physicalExpression: 'Relaxed, Low hand, Low leg,1 detected', physicalScore: '1%', voiceExpression: 'Stress38,64%', voiceScore: '33%', overallScore: '33%'
+ },
+ {
+ caseId: 'CASE-007', officer: 'Ganesh', date: '2025-10-15',
+ question: 'Did you handle any objects?', answer: 'I picked up a bag to check for ID.', duration: '00:19', truthProbability: '44%', dominantEmotion: 'Defensive 🛡️', emotion: 'Defensive',
+ stressLevel:81, confidence: 'Low', sentiment: 'Negative (-0.61)', responseDelay: '4.0 sec', eyeContact: '55%', blinkRate: '18/min',
+ posture: 'Tense', handMovement: 'High', legMovement: 'High', microExpressions: '4 detected',
+ physicalExpression: 'Tense, High hand, High leg,4 detected', physicalScore: '4%', voiceExpression: 'Stress81,56%', voiceScore: '30%', overallScore: '30%'
+ }
+];

src/app/homepage/auth-card/auth-card.component.css

@@ -0,0 +1,91 @@
+/* auth-card layout: side-by-side faces that slide horizontally */
+:host { display: block; }
+.auth-popup { display:flex; align-items:center; justify-content:center; }
+
+.auth-card {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  border-radius: 18px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* inner holds both faces side-by-side (200% width) */
+.card-inner {
+  width: 200%;
+  height: 620px;
+  display: flex; /* place front and back side-by-side */
+  transition: transform 0.6s cubic-bezier(.22,.9,.32,1);
+  will-change: transform;
+}
+
+/* When flipped, slide to show back face */
+.auth-card.flipped .card-inner {
+  transform: translate3d(-50%, 0, 0);
+}
+.auth-card:not(.flipped) .card-inner {
+  transform: translate3d(0, 0, 0);
+}
+
+/* Each face takes 50% of inner width */
+.card-front, .card-back {
+  width: 50%;
+  height: 100%;
+  flex: 0 0 50%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+}
+
+@media (max-width: 900px) {
+  .card-inner { width: 200%; height: auto; flex-direction: column; }
+  .card-front, .card-back { width: 100%; height: auto; flex: 0 0 auto; }
+}
+
+/* Layout inside each face: side-panel + main-panel split */
+.card-content { display: flex; height: 100%;flex-direction:row-reverse; }
+.side-panel { flex: 0 0 auto; position: relative; overflow: hidden; }
+.main-panel { flex: 1 1 auto; padding: 6px 8px; box-sizing: border-box; background:#fff; overflow: auto; }
+
+/* --- Per-face explicit sizes (FRONT: 48% / 47%) --- */
+.card-front .side-panel.side-left { flex: 0 0 48%; max-width: 48%; }
+.card-front .main-panel { flex: 0 0 47%; max-width: 47%; }
+.card-front .side-panel.side-right { flex: 0 0 auto; }
+
+/* Front face coloring */
+.card-front .side-panel.side-left { background: linear-gradient(135deg,#ff416c 0%,#ff4b2b 100%); }
+.card-front .side-panel.side-right { background: #ffffff; }
+
+/* --- Per-face explicit sizes (BACK: 35% / 65%) --- */
+.card-back .side-panel.side-left { flex: 0 0 35%; max-width: 35%; }
+.card-back .main-panel { flex: 0 0 65%; max-width: 65%; }
+.card-back .side-panel.side-right { flex: 0 0 auto; }
+
+/* Back face coloring */
+.card-back .side-panel.side-left { background: #ffffff; }
+.card-back .side-panel.side-right { background: linear-gradient(135deg,#ff416c 0%,#ff4b2b 100%); }
+
+/* Text color rules to ensure good contrast depending on panel */
+.card-front .side-panel.side-left .side-inner,
+.card-back .side-panel.side-right .side-inner { color: #fff; }
+.card-front .side-panel.side-right .side-inner,
+.card-back .side-panel.side-left .side-inner { color: #222; }
+
+/* Ensure main panel text is dark on white backgrounds */
+.card-front .main-panel, .card-back .main-panel { background: #fff; color: #222; }
+
+/* Keep image behavior inside side panels */
+.side-panel .side-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
+
+/* overlay and layering */
+.card-front .side-panel.side-left::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12)); pointer-events: none; z-index: 1; }
+.card-front .side-panel.side-left .side-inner { position: relative; z-index: 2; padding: 24px; }
+
+/* responsive adjustments */
+@media (max-width: 700px) {
+  .card-content { flex-direction: column; }
+  .card-front .side-panel.side-left, .card-back .side-panel.side-left { flex: 0 0 auto; height: 220px; max-width: none; }
+  .card-front .main-panel, .card-back .main-panel { flex: 0 0 auto; }
+  .card-front .side-panel.side-left::before { display: none; }
+}

src/app/homepage/auth-card/auth-card.component.html

@@ -0,0 +1,18 @@
+<section class="auth-popup">
+  <div class="auth-card" [class.flipped]="isFlipped">
+    <div class="card-inner">
+      <div class="card-front">
+        <!-- Embed sign-in content directly -->
+        <ng-container *ngTemplateOutlet="signInTemplate"></ng-container>
+      </div>
+      <div class="card-back">
+        <!-- Embed sign-up content directly -->
+        <ng-container *ngTemplateOutlet="signUpTemplate"></ng-container>
+      </div>
+    </div>
+  </div>
+
+  <!-- Templates passed in from parent component -->
+  <ng-content select="[signInTemplate]"></ng-content>
+  <ng-content select="[signUpTemplate]"></ng-content>
+</section>

src/app/homepage/auth-card/auth-card.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-auth-card',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './auth-card.component.html',
+  styleUrls: ['./auth-card.component.css']
+})
+export class AuthCardComponent {
+  @Input() isFlipped = false;
+  @Output() flip = new EventEmitter<boolean>();
+
+  toggleFlip() {
+    this.isFlipped = !this.isFlipped;
+    this.flip.emit(this.isFlipped);
+  }
+}

src/app/homepage/auth-wrapper.component.css

@@ -0,0 +1,13 @@
+/* Styles for the card swipe container and animation */
+.card-swipe-container {
+ width:100%;
+ overflow: hidden;
+ position: relative;
+ will-change: transform;
+}
+
+/* Optional: add transition for smoother effect */
+.card-swipe-container > * {
+ width:100%;
+ min-height:100%;
+}

src/app/homepage/auth-wrapper.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+@Component({
+ selector: 'app-auth-wrapper',
+ template: `
+ <div class="card-swipe-container" [@cardSwipe]="cardState">
+ <app-sign-in
+ *ngIf="cardState === 'signin'"
+ [cardState]="cardState"
+ (switchToSignUp)="switchToSignUp()"
+ ></app-sign-in>
+ <app-sign-up
+ *ngIf="cardState === 'signup'"
+ [cardState]="cardState"
+ (switchToSignIn)="switchToSignIn()"
+ ></app-sign-up>
+ </div>
+ `,
+ styleUrls: ['./auth-wrapper.component.css'],
+ animations: [
+ trigger('cardSwipe', [
+ state('signup', style({ transform: 'translateX(0%)' })),
+ state('signin', style({ transform: 'translateX(-100%)' })),
+ transition('signup <=> signin', [
+ animate('400ms cubic-bezier(.25,.8,.25,1)')
+ ]),
+ ])
+ ]
+})
+export class AuthWrapperComponent {
+ cardState: 'signup' | 'signin' = 'signin';
+
+ switchToSignUp() { this.cardState = 'signup'; }
+ switchToSignIn() { this.cardState = 'signin'; }
+}

src/app/homepage/homepage.component.css

@@ -984,3 +984,64 @@ footer .social-icons {
   box-shadow: 0 4px 24px #38bdf8cc;
   opacity: 1;
 }
+
+/* Replace the existing .auth-topright .auth-btn rules only for image variant */
+.auth-topright .auth-btn {
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
+  border: none;
+  box-shadow: 0 2px 12px #38bdf888;
+}
+
+.auth-topright .auth-btn:hover {
+  transform: scale(1.03);
+}
+
+.auth-btn-img {
+  width: 42px;
+  height: 42px;
+  object-fit: contain;
+  display: block;
+}
+
+/* Fallback: if image not available, show text inside small circle */
+.auth-topright .auth-btn:empty::before {
+  content: 'Sign In';
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.8rem;
+}
+
+/* Replace the existing .auth-topright .auth-btn rules only for svg variant */
+.auth-topright .auth-btn {
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.6));
+  border: 2px solid rgba(14,165,201,0.12);
+  box-shadow: 0 4px 18px rgba(2,6,23,0.6);
+  cursor: pointer;
+}
+
+.auth-topright .auth-btn:hover { transform: scale(1.04); }
+
+.auth-btn-svg { width: 42px; height: 42px; display: block; }
+.auth-ring { stroke: rgba(168,213,241,0.85); }
+.auth-head { fill: rgba(168,213,241,0.95); }
+.auth-body { stroke: rgba(168,213,241,0.95); }
+
+/* Fallback text hidden when svg present */
+.auth-topright .auth-btn:empty::before { content: 'Login'; color: #fff; }
+

src/app/homepage/homepage.component.html

@@ -22,8 +22,15 @@
 
 <!-- Top-right auth buttons (unchanged) -->
 <div class="auth-topright">
-  <button class="auth-btn" (click)="openSignIn()">Sign In</button>
-  <button class="auth-btn" (click)="openSignUp()">Sign Up</button>
+  <!-- Inline SVG-based circular login button -->
+  <button class="auth-btn" (click)="openSignIn()" aria-label="Open Sign In">
+    <!-- user-circle icon: outer ring with person silhouette -->
+    <svg class="auth-btn-svg" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+      <circle cx="32" cy="32" r="30" class="auth-ring" fill="none" stroke-width="2" />
+      <circle cx="32" cy="20" r="8" class="auth-head" />
+      <path class="auth-body" d="M16 48c0-8.8 7.2-16 16-16s16 7.2 16 16" fill="none" stroke-width="6" stroke-linecap="round" />
+    </svg>
+  </button>
 </div>
 
 <!-- New Landing Hero + Sections -->

src/app/homepage/homepage.component.ts

@@ -27,14 +27,19 @@ export class HomepageComponent implements OnInit, OnDestroy {
 
   welcomeText = `Py-Detect is an intelligent lie detection platform designed to analyze human responses and uncover hidden truths. During each session, we also record and analyze body language using video to provide deeper behavioral insights. Whether you're evaluating a suspect, interviewing a student, or conducting sensitive assessments, Py-Detect uses advanced algorithms to ask targeted questions and deliver a truthfulness score—a percentage-based estimate of how likely the person is being honest.`;
 
+  private authCloseListener = () => { this.closeModal(); };
+
   constructor(private router: Router, private renderer: Renderer2) { }
 
   ngOnInit() {
     this.renderer.addClass(document.body, 'homepage-bg');
+    // Listen for global auth-close events emitted by sign-in/sign-up components
+    window.addEventListener('auth-close', this.authCloseListener as EventListener);
   }
 
   ngOnDestroy() {
     this.renderer.removeClass(document.body, 'homepage-bg');
+    window.removeEventListener('auth-close', this.authCloseListener as EventListener);
   }
 
   // === Auth modal open/close (same as your last version in the template) ===

src/app/homepage/sign-in/sign-in.component.css

@@ -1,3 +1,5 @@
+/* root colors and variables remain unchanged */
+
 .signin-popup {
   position: fixed;
   top: 0;
@@ -10,8 +12,11 @@
   justify-content: center;
   z-index: 1000;
   background: rgb(30 41 59 / 67%);
+  backdrop-filter: blur(16px);
 }
 
+/* Ensure no solid white background is set anywhere */
+
 .signin-header {
   width: 420px;
   max-width: 95vw;
@@ -52,6 +57,13 @@
   cursor: pointer;
 }
 .signin-box {
+  margin: 0 auto;
+  /* Center the box horizontally and vertically */
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   background: #18314a;
   border-radius: 22px;
   box-shadow: 0 12px 48px #000a;
@@ -61,7 +73,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  position: relative;
 }
 .signin-title {
   color: #38bdf8;
@@ -147,9 +158,9 @@ form {
   cursor: pointer;
 }
 .signin-btn {
-  width: 100%;
-  background: #38bdf8;
-  color: #18314a;
+  width:100%;
+  background: #18314a;
+  color: #fff;
   border: none;
   border-radius: 8px;
   padding: 14px 0;
@@ -158,11 +169,10 @@ form {
   margin-bottom: 18px;
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
-  box-shadow: 0 2px 8px #0003;
-}
-.signin-btn:hover {
-  background: #13bfa6;
 }
+  .signin-btn:hover {
+    background: #38bdf8;
+  }
 .signin-footer {
   color: #b0b8c1;
   font-size: 0.95rem;
@@ -224,3 +234,940 @@ form {
     gap: 0;
   }
 }
+.ai-particle-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background: url('/assets/particles.svg');
+  opacity: 0.18;
+  animation: particleDrift 18s linear infinite;
+}
+@keyframes particleDrift {
+  0% { background-position: 0 0; }
+  100% { background-position: 120px 80px; }
+}
+.spinner {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 3px solid #fff;
+  border-top: 3px solid #38bdf8;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg);}
+  100% { transform: rotate(360deg);}
+}
+
+.py-logo-glow {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  box-shadow: 0 0 24px #38bdf8, 0 0 12px #13bfa6;
+  animation: logoGlow 3.5s ease-in-out infinite alternate;
+}
+@keyframes logoGlow {
+  0% { box-shadow: 0 0 12px #38bdf8, 0 0 6px #13bfa6; }
+  100% { box-shadow: 0 0 32px #38bdf8, 0 0 18px #13bfa6; }
+}
+.ai-scan-line {
+  display: none;
+}
+.ai-slide-in {
+  animation: slideInBox 0.8s cubic-bezier(.39,.58,.57,1) both;
+}
+@keyframes slideInBox {
+  0% { opacity: 0; transform: translateY(40px) scale(0.98); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+.lock-icon {
+  color: #38bdf8;
+  font-size: 1.2em;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+.signin-tagline {
+  color: #b0b8c1;
+  font-size: 1.08em;
+  text-align: center;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+.signin-welcome {
+  color: #38bdf8;
+  font-size: 1.05em;
+  text-align: center;
+  margin-bottom: 18px;
+  font-weight: 600;
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 22px;
+}
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: #b0b8c1;
+  border-radius: 22px;
+  transition: .4s;
+}
+.switch input:checked + .slider {
+  background: #38bdf8;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 3px;
+  bottom: 3px;
+  background: #fff;
+  border-radius: 50%;
+  transition: .4s;
+}
+.switch input:checked + .slider:before {
+  transform: translateX(16px);
+}
+.signin-hint {
+  color: #b0b8c1;
+  font-size: 0.95em;
+  text-align: right;
+  margin-bottom: 8px;
+}
+.ai-pulse {
+  animation: aiPulseGlow 1.5s infinite alternate;
+}
+@keyframes aiPulseGlow {
+  0% { box-shadow: 0 2px 12px #38bdf844; }
+  100% { box-shadow: 0 2px 24px #38bdf888; }
+}
+.signin-session-tip {
+  color: #b0b8c1;
+  font-size: 0.95em;
+  text-align: center;
+  margin-bottom: 8px;
+}
+.signin-security-note {
+  color: #ff5252;
+  font-size: 0.95em;
+  font-weight: 600;
+  display: block;
+  margin-bottom: 4px;
+}
+.signin-error-toast {
+  background: #ff5252;
+  color: #fff;
+  font-weight: 700;
+  border-radius: 8px;
+  padding: 8px 18px;
+  margin: 12px 0;
+  text-align: center;
+  animation: shakeError 0.3s cubic-bezier(.39,.58,.57,1);
+}
+@keyframes shakeError {
+  0% { transform: translateX(0); }
+  20% { transform: translateX(-8px); }
+  40% { transform: translateX(8px); }
+  60% { transform: translateX(-8px); }
+  80% { transform: translateX(8px); }
+  100% { transform: translateX(0); }
+}
+.forgot-modal-bg {
+  position: fixed;
+  inset: 0;
+  background: rgba(30,41,59,0.9);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeInModalBg 0.4s;
+}
+@keyframes fadeInModalBg {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.forgot-modal {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
+  padding: 32px 36px 28px 36px;
+  min-width: 320px;
+  max-width: 90vw;
+  text-align: center;
+  z-index: 2001;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: fadeInModal 0.4s;
+}
+@keyframes fadeInModal {
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
+}
+.forgot-modal h3 {
+  color: #38bdf8;
+  margin: 12px 0 8px 0;
+  font-size: 1.4em;
+  font-weight: 700;
+}
+.forgot-modal p {
+  color: #23272b;
+  font-size: 1.08em;
+  margin-bottom: 18px;
+}
+.forgot-modal input[type="email"] {
+  background: #f4f6fa;
+  color: #18314a;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-size: 1rem;
+  margin-bottom: 12px;
+  box-shadow: 0 1px 4px #0002;
+  width: 100%;
+}
+.modal-close {
+  width: 23%;
+  background: #18314a;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 0;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  display: block;
+}
+
+  .modal-close:hover {
+    background: #38bdf8;
+    color: #18314a;
+  }
+.google-signin-row {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+#google-btn-div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+#google-btn-div > div {
+  width: 100%;
+  min-width: 0;
+  border-radius: 8px !important;
+  padding: 14px 0 !important;
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  box-shadow: 0 2px 8px #0003 !important;
+  background: #fff !important;
+  color: #18314a !important;
+  border: none !important;
+  margin: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.g-signin2 {
+  width: 100%;
+  min-width: 0;
+  border-radius: 8px !important;
+  padding: 14px 0 !important;
+  font-size: 1.1rem !important;
+  font-weight: 700 !important;
+  box-shadow: 0 2px 8px #0003 !important;
+  background: #fff !important;
+  color: #18314a !important;
+  border: none !important;
+  margin: 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.eye-toggle {
+  position: absolute;
+  right: 12px;
+  top: 38px;
+  background: none;
+  border: none;
+  font-size: 1.3em;
+  color: #888;
+  cursor: pointer;
+  z-index: 2;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.7;
+  transition: color 0.2s, opacity 0.2s;
+}
+.eye-toggle:hover {
+  color: #555;
+  opacity: 1;
+}
+.eye-toggle:focus {
+  outline: none;
+}
+/* --- UI DESIGN UPDATE TO MATCH SCREENSHOT --- */
+.auth-box {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 820px;
+  max-width: 98vw;
+  min-width: 340px;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #0002;
+  overflow: hidden;
+  background: none;
+}
+
+.panel-left {
+  background: #fff;
+  color: #222;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 32px;
+}
+.panel-left .signin-title {
+  font-size: 2.1rem;
+  font-weight: 800;
+  margin-bottom: 12px;
+  text-align: center;
+  color: #222;
+}
+.panel-left .signin-desc {
+  font-size: 1.05rem;
+  margin-bottom: 24px;
+  text-align: center;
+  color: #555;
+}
+.panel-left .signin-btn {
+  background: var(--primary-cyan-mid);
+  color: #fff;
+  border: none;
+  border-radius: 999px;
+  padding: 12px 32px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+.panel-left .signin-btn:hover {
+  background: var(--primary-cyan-dark);
+  color: #fff;
+}
+
+.panel-right {
+  background: linear-gradient(135deg, var(--primary-cyan-dark) 0%, var(--primary-cyan-mid) 100%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 32px;
+}
+.panel-right .signup-title {
+  font-size: 2rem;
+  font-weight: 800;
+  margin-bottom: 18px;
+  text-align: left;
+  color: #fff;
+}
+.panel-right .signup-desc {
+  font-size: 1.05rem;
+  margin-bottom: 24px;
+  text-align: center;
+  color: #fff;
+}
+.panel-right .signup-btn {
+  background: none;
+  color: #fff;
+  border: 2px solid #fff;
+  border-radius: 999px;
+  padding: 12px 32px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  box-shadow: none;
+}
+
+
+/* Input fields and buttons for left panel */
+.panel-left .signin-field input,
+.panel-left .signin-field select {
+  background: #f5f5f5;
+  color: #222;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 12px 14px;
+  font-size: 1rem;
+  margin-bottom: 2px;
+  box-shadow: 0 1px 4px #0001;
+  transition: border 0.2s, box-shadow 0.2s;
+}
+.panel-left .signin-field input:focus,
+.panel-left .signin-field select:focus {
+  outline: 2px solid #ff416c;
+  border-color: #ff416c;
+  box-shadow: 0 0 0 2px #ff416c44;
+}
+
+/* Social buttons row for left panel */
+.panel-left .social-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 18px;
+  justify-content: center;
+}
+.panel-left .social-btn {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3em;
+  color: var(--primary-cyan-dark);
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 2px 8px #0001;
+  transition: background 0.2s, color 0.2s;
+}
+.panel-left .social-btn:hover {
+  background: var(--primary-cyan-dark);
+  color: #fff;
+}
+
+/* Professional shadow and rounded corners for the whole box */
+.auth-box {
+  box-shadow: 0 8px 32px #0002;
+  border-radius: 18px;
+}
+
+/* Ensure identical size and prevent clipping */
+.auth-box {
+  display: grid;
+  grid-template-columns: 420px 600px; /* match sign-up columns */
+  width: 1020px; /* increased to accommodate both panels */
+  height: 620px; /* increased height to avoid overflow */
+  max-width: 98vw;
+  min-width: 340px;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #0002;
+  overflow: visible; /* ensure no content is clipped */
+  background: none;
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* Reduce right panel width to make it less large */
+.auth-box {
+  display: grid;
+  grid-template-columns: 360px 840px; /* reduced right panel from 600px to 520px */
+  width: 850px; /* adjusted total width to match columns */
+  height: 820px;
+  max-width: 98vw;
+  min-width: 340px;
+  border-radius: 18px;
+  box-shadow: 0 8px 32px #0002;
+  overflow: visible; /* ensure no content is clipped */
+  background: none;
+  position: relative;
+  box-sizing: border-box;
+  justify-content:end;
+  align-items:baseline;
+  justify-items:start;
+}
+
+/* Ensure panels occupy full height and use box-sizing */
+.panel-left, .panel-right {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* Card viewport and sliding inner container */
+.auth-card {
+  width: 1140px; /* viewport width remains */
+  height: 700px; /* increased height to accommodate content and remove scroll */
+  perspective: none;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  margin: 0 auto;
+}
+
+.card-inner {
+ width:200%; /* contains both faces side-by-side */
+ height:100%;
+ display: flex; /* place front and back side-by-side */
+ /* much slower transition so flip is clearly visible to users */
+ transition: transform 0.7s cubic-bezier(.22, .9, .32,1);
+ will-change: transform;
+}
+
+.auth-card.flipped .card-inner {
+ transform: translate3d(-50%,0,0);
+}
+.auth-card:not(.flipped) .card-inner {
+ transform: translate3d(0,0,0);
+}
+
+/* panel fade with proper syntax */
+.card-front .main-panel,
+.card-back .main-panel {
+ transition: opacity 1s ease 0.15s;
+}
+.card-front[aria-hidden="true"] .main-panel,
+.card-back[aria-hidden="true"] .main-panel {
+ opacity:0;
+}
+.card-front[aria-hidden="false"] .main-panel,
+.card-back[aria-hidden="false"] .main-panel {
+ opacity:1;
+}
+
+/* faces: each takes 50% of the inner width (i.e. the viewport) */
+.card-front, .card-back {
+  width: 50%;
+  height: 100%;
+  flex: 0 0 50%;
+  box-sizing: border-box;
+  position: relative; /* allow absolute children inside */
+  overflow: hidden;
+}
+
+/* layout inside each face: side-panel + main-panel split */
+.card-content {
+  display: flex;
+  height: 100%;
+  flex-direction: row-reverse;
+}
+.side-panel { width: 48%; display:flex; align-items:center; justify-content:center; }
+.main-panel { width: 55%; padding: 36px 48px; box-sizing:border-box; background:#fff; overflow: visible; }
+
+.side-right {
+  background: linear-gradient(135deg,#137ec4 0%,#137ec4 100%);
+}
+.side-left {
+  background: linear-gradient(135deg, #137ec4 0%, #38bdf8 100%);
+}
+.side-inner { color:#fff; text-align:center; padding: 32px; }
+.side-inner h3 { font-size: 1.6rem; margin-bottom:12px; }
+.side-text { opacity: 0.95; }
+.panel-cta { background:none; border:2px solid #fff; color:#fff; padding:10px 22px; border-radius:999px; cursor:pointer; margin-top:12px; }
+
+/* Ensure sign-in text colors for white main panel */
+.card-front .main-panel .signin-title { color: #222; }
+.card-back .main-panel .signup-title { color: #222; }
+
+/* Maintain previous smaller-screen behavior (stack panels) */
+@media (max-width: 900px){
+  .auth-card{ width:92vw; height:auto; }
+  .card-inner{ width: 200%; /* still double width but we'll stack */ }
+  .card-content{ flex-direction: column; }
+  .side-panel{ width:100%; height:200px; }
+  .main-panel{ width:100%; overflow: visible; }
+}
+
+/* keep existing control styles unchanged (inputs/buttons/etc.) */
+
+/* minimal overwrite of previous rules that used absolute positioning */
+.m, .signin-close, .card-back .signin-close { position: absolute; top: 5px; right: 5px; z-index: 10; }
+
+/* accessibility: hide offscreen face from assistive tech when sliding */
+.card-front[aria-hidden="true"], .card-back[aria-hidden="true"] {
+  pointer-events: none;
+}
+
+/* Change right panel gradient to blue/cyan */
+.side-panel.side-right {
+  background: linear-gradient(135deg, #1d608b 0%, #1d608b 100%);
+}
+
+/* Info box styling for right panel */
+.side-info-box {
+  position: absolute;
+  top: 164px;
+  left: 0;
+  width: 88%;
+  padding: 0 32px;
+  z-index: 2;
+  text-align: left;
+}
+.side-info-title {
+  font-size: 1.35rem;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 6px;
+  letter-spacing: 0.5px;
+}
+.side-info-desc {
+  font-size: 1.08rem;
+  color: #e0f7fa;
+  margin-bottom: 8px;
+}
+.side-info-link {
+  color: #fff;
+  font-weight: 700;
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.side-info-link:hover {
+  color: #23395d;
+}
+
+/* Ensure info box is above image */
+.side-panel {
+  position: relative;
+}
+
+/* Google button row spacing */
+.google-signin-row {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+#google-btn-div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.g-signin2 {
+
+  margin: 0 auto;
+}
+
+/* Ensure main-panel text is black (readable on white background) */
+.card-front .main-panel,
+.card-front .main-panel .signin-title,
+.card-front .main-panel .signin-tagline,
+.card-front .main-panel .signin-welcome,
+.card-front .main-panel .signin-session-tip,
+.card-front .main-panel .signin-hint,
+.card-front .main-panel .signin-footer,
+.card-front .main-panel label,
+.card-front .main-panel .signin-field small,
+.card-front .main-panel .signin-field label {
+  color: #23395d !important;
+}
+
+/* Keep links styled but darken slightly for contrast */
+.card-front .main-panel a {
+ color: #0b57a4 !important;
+}
+.signin-divider-row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width:100%;
+ margin:12px 018px 0;
+}
+.divider {
+ flex:1;
+ height:1px;
+ background: #b0b8c1;
+ margin:08px;
+}
+.divider-or {
+ color: #23395d;
+ font-size:1.08em;
+ font-weight:600;
+ margin:08px;
+}
+.google-btn {
+  width: 100%;
+  height: 45px;
+  background: #18314a;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 18px;
+  cursor: pointer;
+  box-shadow: 02px 8px #0003;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  transition: background 0.2s, color 0.2s;
+}
+  .google-btn:hover {
+    background: #38bdf8;
+  }
+.google-logo {
+ width:24px;
+ height:24px;
+}
+.fact-rotator {
+ font-size:1.18rem;
+ font-weight:700;
+ color: #fff;
+ margin-bottom:8px;
+ min-height:32px;
+ text-align: left;
+ transition: opacity 0.6s;
+ letter-spacing:0.5px;
+ animation: fadeFact0.6s;
+}
+@keyframes fadeFact {
+ from { opacity:0; }
+ to { opacity:1; }
+}
+.side-panel.side-left {
+  position: relative;
+  overflow: hidden;
+  background: #1d608b; /* Strong blue for contrast */
+  min-height: 400px;
+}
+.side-img {
+ position: absolute;
+ top:0; left:0;
+ width:100%; height:100%;
+ object-fit: cover;
+ z-index:0;
+ opacity:0.12;
+}
+.side-bg-shapes {
+ position: absolute;
+ top:0; left:0; right:0; bottom:0;
+ width:100%;
+ height:100%;
+ z-index:1;
+ pointer-events: none;
+}
+.bg-circle {
+ position: absolute;
+ border-radius:50%;
+ opacity:0.85;
+}
+.circle1 {
+  width: 120px;
+  height: 120px;
+  top: 18px;
+  left: 18px;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+}
+.circle2 {
+  width: 80px;
+  height: 80px;
+  top: 71%;
+  left: 113px;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+}
+
+.circle3 {
+  width: 48px;
+  height: 48px;
+  top: 80%;
+  left: 70%;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+}
+
+.circle4 {
+  width: 160px;
+  height: 160px;
+  top: 70px;
+  right: 204px;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+  opacity: 0.7;
+}
+
+.circle5 {
+  width: 36px;
+  height: 36px;
+  top: 30%;
+  left: 80%;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+  opacity: 0.6;
+}
+
+.circle6 {
+  width: 60px;
+  height: 60px;
+  bottom: 12%;
+  right: 18%;
+  background: linear-gradient(135deg, #38bdf8 80%, #137ec4 100%);
+  opacity: 0.5;
+}
+
+.circle7 {
+  width: 54px;
+  height: 54px;
+  top: 10%;
+  right: 10%;
+  background: #18314a;
+  opacity: 0.8;
+}
+
+.circle8 {
+  width: 32px;
+  height: 32px;
+  bottom: 20%;
+  left: 60%;
+  background: #14263c;
+  opacity: 0.8;
+}
+
+.circle9 {
+  width: 44px;
+  height: 44px;
+  top: 75%;
+  left: 40%;
+  background: #18314a;
+  opacity: 0.7;
+}
+
+.circle10 {
+  width: 28px;
+  height: 28px;
+  top: 15%;
+  left: 60%;
+  background: #14263c;
+  opacity: 0.9;
+}
+
+.circle11 {
+  width: 38px;
+  height: 38px;
+  bottom: 10%;
+  right: 10%;
+  background: #18314a;
+  opacity: 0.7;
+}
+
+.circle12 {
+  width: 22px;
+  height: 22px;
+  top: 85%;
+  right: 20%;
+  background: #14263c;
+  opacity: 0.8;
+}
+
+/* New large solid circles for sign-in page background */
+.circle-large1 {
+ width:220px;
+ height:220px;
+ top:40px;
+ left:60px;
+ background: #137ec4;
+ opacity:0.45;
+ z-index:0;
+}
+.circle-large2 {
+ width:180px;
+ height:180px;
+ bottom:40px;
+ right:40px;
+ background: #38bdf8;
+ opacity:0.35;
+ z-index:0;
+}
+.circle-large3 {
+ width:140px;
+ height:140px;
+ top:60%;
+ left:60%;
+ background: #18314a;
+ opacity:0.25;
+ z-index:0;
+}
+.circle-large4 {
+ width:100px;
+ height:100px;
+ bottom:11%;
+ left:5%;
+ background: #13bfa6;
+ opacity:0.52;
+ z-index:0;
+}
+
+/* Add more white rings for contrast */
+.bg-ring {
+ position: absolute;
+ border-radius:50%;
+ border:6px solid #fff;
+ background: none;
+ opacity:0.8;
+ z-index:1;
+}
+.ring1 { width:90px; height:90px; bottom:24px; left:18px; }
+.ring2 { width:48px; height:48px; top:60px; right:32px; }
+.ring3 { width:72px; height:72px; top:10%; left:70%; border-color: #fff; opacity:0.7; }
+.ring4 { width:110px; height:110px; bottom:2%; right:43%; border-color: #fff; opacity:0.5; }
+.ring5 { width:38px; height:38px; top:75%; left:10%; border-color: #fff; opacity:0.8; }
+.ring6 { width:64px; height:64px; top:49%; right:20%; border-color: #fff; opacity:0.7; }
+.ring7 { width:120px; height:120px; top:14%; left:49%; border-color: #fff; opacity:0.6; }
+.ring8 { width:80px; height:80px; bottom:20%; right:30%; border-color: #fff; opacity:0.7; }
+.ring9 { width:60px; height:60px; top:65%; left:36%; border-color: #fff; opacity:0.7; }
+
+.side-welcome-overlay {
+ position: absolute;
+ top:30%;
+ left:50px;
+ width:93%;
+ text-align: start;
+ z-index:2;
+ padding:024px;
+ pointer-events: auto;
+}
+.welcome-back-title {
+ font-size:2.1rem;
+ font-weight:800;
+ color: #fff;
+ margin-bottom:8px;
+ 
+}
+.welcome-back-desc {
+ font-size:1rem;
+ color: #e0f7fa;
+ margin-bottom:18px;
+
+}
+.action-btn {
+ width:21%;
+ background: #18314a;
+ color: #fff;
+ border: none;
+ border-radius:8px;
+ padding:14px 0;
+ font-size:1.1rem;
+ font-weight:700;
+ margin-top:18px;
+ margin-bottom:0;
+ display: inline-block;
+ letter-spacing:0.5px;
+ box-shadow:02px 8px #0003;
+ cursor: pointer;
+ transition: background 0.2s, color 0.2s;
+}
+.action-btn:hover {
+ background: #38bdf8;
+ color: #18314a;
+}
+

src/app/homepage/sign-in/sign-in.component.html

@@ -1,44 +1,192 @@
-<section class="signin-popup">
-  <div class="signin-header">
-    <div class="signin-logo">
-      <!-- No logo or CO. text as per sign-up style -->
-    </div>
-  </div>
-  <div class="signin-box">
-    <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close">&times;</button>
-    <h2 class="signin-title">Log In</h2>
-    <form [formGroup]="form" (ngSubmit)="signIn()" novalidate>
-      <div class="signin-row">
-        <div class="signin-field">
-          <label for="email">Email</label>
-          <input id="email" type="email" placeholder="you@example.com" formControlName="email" [attr.aria-invalid]="form.get('email')?.invalid && form.get('email')?.touched" />
-          <small class="error" *ngIf="form.get('email')?.touched && form.get('email')?.hasError('required')">Email is required.</small>
-          <small class="error" *ngIf="form.get('email')?.touched && form.get('email')?.hasError('email')">Please enter a valid email address.</small>
-        </div>
-      </div>
-      <div class="signin-row">
-        <div class="signin-field">
-          <label for="password">Password</label>
-          <input id="password" type="password" placeholder="••••••••" formControlName="password" [attr.aria-invalid]="form.get('password')?.invalid && form.get('password')?.touched" />
-          <small class="error" *ngIf="form.get('password')?.touched && form.get('password')?.hasError('required')">Password is required.</small>
-        </div>
-      </div>
-      <div class="signin-row signin-options-row">
-        <div class="remember-me">
-          <input id="rememberMe" type="checkbox" />
-          <label for="rememberMe">Remember me</label>
-        </div>
-        <div class="forgot-password">
-          <a href="#" class="forgot-link">Forgot password?</a>
-        </div>
-      </div>
-      <button class="signin-btn" type="submit">Sign In</button>
-    </form>
-    <div class="signin-footer">
-      <span>Don't have an account?</span>
-      <a href="#" (click)="goToSignUp(); $event.preventDefault()">Sign up here!</a>
-      <span class="footer-sep"></span>
-      &copy; Pykara Technologies, 2025. All rights reserved.
-    </div>
-  </div>
+<section class="signin-popup ai-bg-animate">
+ <div class="ai-particle-bg"></div>
+ <div class="signin-header">
+ </div>
+
+ <div class="auth-card" [class.flipped]="isFlipped">
+ <div class="card-inner">
+ <!-- FRONT: sign-in on main panel, image side on left -->
+ <div class="card-front">
+ <div class="card-content">
+ <div class="side-panel side-left">
+ <!-- Decorative background shapes -->
+ <div class="side-bg-shapes">
+ <div class="bg-circle circle1"></div>
+ <div class="bg-circle circle2"></div>
+ <div class="bg-circle circle3"></div>
+ <div class="bg-circle circle4"></div>
+ <div class="bg-circle circle5"></div>
+ <div class="bg-circle circle6"></div>
+ <div class="bg-circle circle7"></div>
+ <div class="bg-circle circle8"></div>
+ <div class="bg-circle circle9"></div>
+ <div class="bg-circle circle10"></div>
+ <div class="bg-circle circle11"></div>
+ <div class="bg-circle circle12"></div>
+ <div class="bg-circle circle13"></div>
+ <div class="bg-circle circle14"></div>
+ <div class="bg-circle circle-large1"></div>
+ <div class="bg-circle circle-large2"></div>
+ <div class="bg-circle circle-large3"></div>
+ <div class="bg-circle circle-large4"></div>
+ <div class="bg-ring ring1"></div>
+ <div class="bg-ring ring2"></div>
+ <div class="bg-ring ring3"></div>
+ <div class="bg-ring ring4"></div>
+ <div class="bg-ring ring5"></div>
+ <div class="bg-ring ring6"></div>
+ <div class="bg-ring ring7"></div>
+ <div class="bg-ring ring8"></div>
+ <div class="bg-ring ring9"></div>
+ </div>
+ <!-- Overlay text and button -->
+ <div class="side-welcome-overlay">
+   <div class="welcome-back-title">Welcome back!</div>
+   <div class="welcome-back-desc">You can sign in to access with your existing account.</div>
+   <div class="welcome-back-desc">First time here? Join now.</div>
+   <button class="action-btn" type="button" (click)="flipToSignUp()">Sign Up</button>
+ </div>
+ <!-- Replace /assets/side-placeholder-left.jpg with your chosen image -->
+ </div>
+
+ <div class="main-panel" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px;">
+   <!-- existing sign-in form -->
+   <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close" style="align-self: flex-end; margin-bottom: 10px;">&times;</button>
+   <h2 class="signin-title" style="text-align: center; margin-bottom: 24px;">
+     <span class="login-text">Login</span>
+   </h2>
+   <form [formGroup]="form" (ngSubmit)="signIn()" novalidate style="width: 100%; max-width: 340px;">
+ <div class="signin-row">
+ <div class="signin-field">
+ <label for="email">Email</label>
+ <input id="email" type="email" placeholder="you@example.com" formControlName="email" [attr.aria-invalid]="form.get('email')?.invalid && form.get('email')?.touched" />
+ </div>
+ </div>
+ <div class="signin-row">
+ <div class="signin-field" style="position:relative;">
+ <label for="password">Password</label>
+ <input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="password" [attr.aria-invalid]="form.get('password')?.invalid && form.get('password')?.touched" />
+ <button type="button" class="eye-toggle" (click)="togglePasswordVisibility()" tabindex="-1" aria-label="Show/Hide password">
+ </button>
+ <div *ngIf="errorMessage" class="signin-error-toast">{{ errorMessage }}</div>
+ </div>
+ </div>
+ <div class="signin-row signin-options-row">
+ <div class="remember-me">
+ <label class="switch">
+ <input id="rememberMe" type="checkbox" />
+ <span class="slider"></span>
+ </label>
+ <span>Remember me</span>
+ </div>
+ <div class="forgot-password">
+ <a href="#" class="forgot-link" (click)="openForgotModal($event)">Forgot password?</a>
+ </div>
+ </div>
+ <!-- Hint removed for minimal UI -->
+ <button class="signin-btn ai-pulse" type="submit" [disabled]="loading">
+ <ng-container *ngIf="!loading; else signingIn">
+ Sign In
+ </ng-container>
+ <ng-template #signingIn>
+ <span class="spinner"></span> Signing In...
+ </ng-template>
+</button>
+
+ <!-- Divider with 'or' -->
+ <div class="signin-divider-row">
+ <div class="divider"></div>
+ <span class="divider-or">or</span>
+ <div class="divider"></div>
+ </div>
+
+ <!-- Custom Google Sign-In button -->
+ <button class="google-btn" type="button" (click)="onGoogleSignIn()">
+ <img src="assets/google-logo.svg" alt="Google logo" class="google-logo" />
+ <span>Log in with Google</span>
+ </button>
+
+ </form>
+ </div>
+ </div>
+ </div>
+
+ <!-- BACK: sign-up on main panel, image side on right -->
+ <div class="card-back">
+ <div class="card-content card-content-reverse">
+ <div class="main-panel">
+ <div class="panel-right-embed">
+ 
+ <app-sign-up [embedded]="true" (switchToSignIn)="flipToSignIn()"></app-sign-up>
+ </div>
+ <div class="signin-footer">
+ <a href="#" (click)="flipToSignIn(); $event.preventDefault()">Back to Sign In</a>
+ </div>
+ </div>
+
+ <div class="side-panel side-right">
+   <!-- Decorative background shapes -->
+   <div class="side-bg-shapes">
+     <div class="bg-circle circle1"></div>
+     <div class="bg-circle circle2"></div>
+     <div class="bg-circle circle3"></div>
+     <div class="bg-circle circle4"></div>
+     <div class="bg-circle circle5"></div>
+     <div class="bg-circle circle6"></div>
+     <div class="bg-circle circle7"></div>
+     <div class="bg-circle circle8"></div>
+     <div class="bg-circle circle9"></div>
+     <div class="bg-circle circle10"></div>
+     <div class="bg-circle circle11"></div>
+     <div class="bg-circle circle12"></div>
+     <div class="bg-circle circle13"></div>
+     <div class="bg-circle circle14"></div>
+     <!-- New large solid circles -->
+     <div class="bg-circle circle-large1"></div>
+     <div class="bg-circle circle-large2"></div>
+     <div class="bg-circle circle-large3"></div>
+     <div class="bg-circle circle-large4"></div>
+     <!-- More white rings for contrast -->
+     <div class="bg-ring ring1"></div>
+     <div class="bg-ring ring2"></div>
+     <div class="bg-ring ring3"></div>
+     <div class="bg-ring ring4"></div>
+     <div class="bg-ring ring5"></div>
+     <div class="bg-ring ring6"></div>
+     <div class="bg-ring ring7"></div>
+     <div class="bg-ring ring8"></div>
+     <div class="bg-ring ring9"></div>
+   </div>
+   <div class="side-info-box">
+     <div class="welcome-back-title">Investigate Smarter.</div>
+     <div class="welcome-back-title">Analyze Deeper.</div>
+     <div class="welcome-back-desc">
+       Py-Detect transforms traditional investigations with advanced emotion, tone, and consistency analysis.
+     </div>
+     <div class="welcome-back-desc">
+       Get started today — powered by the intelligence of tomorrow.
+     </div>
+     <div class="welcome-back-desc">
+       Existing user? Log in to your account.
+     </div>
+     <button class="action-btn" type="button" (click)="goToLogin()">Sign In</button>
+   </div>
+   <!-- Replace /assets/side-placeholder-right.jpg with your chosen image -->
+   <img class="side-img" src="/assets/side-placeholder-right.jpg" alt="" />
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ <div *ngIf="showForgotModal" class="forgot-modal-bg">
+ <div class="forgot-modal">
+ <h3>Forgot Password</h3>
+ <p>Enter your email to receive password reset instructions.</p>
+ <input type="email" [(ngModel)]="forgotEmail" placeholder="Your email" />
+ <button class="signin-btn" (click)="sendForgotEmail()">Send Reset Link</button>
+ <button class="modal-close" (click)="closeForgotModal()">Close</button>
+ </div>
+ </div>
 </section>

src/app/homepage/sign-in/sign-in.component.ts

@@ -1,14 +1,16 @@
 // sign-in.component.ts
 import { Component, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder, Validators, FormGroup, FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
-import { SignInService } from './sign-in.service';  // Import SignInService
+import { SignInService } from './sign-in.service';
+import { AuthService } from '../../auth.service';  // Import SignInService
+import { SignUpComponent } from '../sign-up/sign-up.component';
 
 @Component({
   selector: 'app-sign-in',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  imports: [CommonModule, ReactiveFormsModule, RouterLink, FormsModule, SignUpComponent],
   templateUrl: './sign-in.component.html',
   styleUrls: ['./sign-in.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -18,7 +20,52 @@ export class SignInComponent {
   @Output() close = new EventEmitter<void>();
   form: FormGroup;
 
-  constructor(private fb: FormBuilder, private router: Router, private signInService: SignInService) {
+  loading = false;
+  errorMessage = '';
+
+    // UI and template state
+    isFlipped = false;
+    typingTitle = '';
+    showPassword = false;
+    showForgotModal = false;
+    forgotEmail = '';
+
+    // Template methods
+    flipToSignUp() {
+      this.isFlipped = true;
+    }
+    flipToSignIn() {
+      this.isFlipped = false;
+    }
+    togglePasswordVisibility() {
+      this.showPassword = !this.showPassword;
+    }
+    openForgotModal(event?: Event) {
+      if (event) event.preventDefault();
+      this.showForgotModal = true;
+    }
+    closeForgotModal() {
+      this.showForgotModal = false;
+      this.forgotEmail = '';
+    }
+    sendForgotEmail() {
+      this.closeForgotModal();
+      alert('Password reset link sent to your email.');
+    }
+    onGoogleSignIn() {
+      // Implement Google sign-in logic here
+      console.log('Google sign-in clicked');
+    }
+    goToLogin() {
+      this.flipToSignIn();
+    }
+
+  constructor(
+    private fb: FormBuilder,
+    private router: Router,
+    private signInService: SignInService,
+    private authService: AuthService
+  ) {
     this.form = this.fb.group({
       email: ['', [Validators.required, Validators.email]],  // Added email validation
       password: ['', [Validators.required]]
@@ -35,41 +82,78 @@ export class SignInComponent {
 
   signIn() {
     if (this.form.invalid) {
-      console.log("Form is invalid:", this.form.errors);
+      this.errorMessage = '';
       return;
     }
-
+    this.loading = true;
+    this.errorMessage = '';
     const payload = {
       email: this.form.get('email')?.value,
       password: this.form.get('password')?.value
     };
-
     this.signInService.signIn(payload).subscribe(
       (response) => {
-        console.log('Login successful:', response);
-        // Save role to localStorage for future logins
-        if (response && response.role) {
-          localStorage.setItem('role', response.role);
-        }
-        // Redirect based on role
-        if (response && response.role === 'admin') {
-          this.router.navigate(['/infopage']);
-        } else {
-          this.router.navigate(['/case-details']);
-        }
+        this.loading = false;
+        console.log(response);
+        // Store user info and navigate based on role
+        this.handleSuccessfulLogin(response, payload.email);
       },
       (error) => {
-        console.error('Login failed:', error);
-        alert('Invalid email or password!');
+        this.loading = false;
+        console.log('Sign-in error:', error);
+        if (error && error.status === 401) {
+          this.errorMessage = 'Password is incorrect';
+        } else {
+          this.errorMessage = 'An error occurred. Please try again.';
+        }
+        setTimeout(() => {
+          this.errorMessage = '';
+        }, 3000);
       }
     );
   }
 
-  ngOnInit() {
-    // If already logged in and role is admin, redirect to infopage
-    const role = localStorage.getItem('role');
-    if (role === 'admin') {
-      this.router.navigate(['/infopage']);
+  private handleSuccessfulLogin(response: any, email: string): void {
+    // Extract role from backend response
+    const userRole = response?.data?.user?.role || response?.user?.role || response?.role || 'user';
+    const userData = response?.data?.user || response?.user || { email: email, role: userRole };
+
+    // Store in localStorage
+    
+    localStorage.setItem('userRole', userRole);
+    localStorage.setItem('user', JSON.stringify({
+      email: email,
+      role: userRole,
+      ...userData
+    }));
+
+    this.redirectBasedOnRole(userRole);
+  }
+
+  private handleLocalStorageLogin(): void {
+    const userRole = this.authService.getUserRole() || 'user';
+    this.redirectBasedOnRole(userRole);
+  }
+
+  private redirectBasedOnRole(userRole: string): void {
+    console.log('User role detected:', userRole);
+    console.log('Current URL before redirect:', window.location.href);
+
+    if (userRole === 'admin') {
+      console.log('Redirecting admin to infopage');
+      this.router.navigate(['/infopage']).then((success) => {
+        console.log('Navigation to infopage successful:', success);
+      });
+    } else {
+      console.log('Redirecting user to case-details');
+      this.router.navigate(['/case-details']).then((success) => {
+        console.log('Navigation to case-details successful:', success);
+      });
     }
   }
+
+  ngOnInit() {
+    console.log('Sign-in component initialized');
+    // Do not auto-redirect - user must manually login
+  }
 }

src/app/homepage/sign-in/sign-in.service.ts

@@ -10,6 +10,6 @@ export class SignInService {
   constructor(private http: HttpClient) { }
 
   signIn(payload: any): Observable<any> {
-    return this.http.post('http://127.0.0.1:5000/sign-in', payload);
+    return this.http.post('http://127.0.0.1:5002/sign-in', payload);
   }
 }

src/app/homepage/sign-up/sign-up.component.css

@@ -1,170 +1,365 @@
 :host {
   display: block;
+  width: 100%;
+  min-height: 100vh;
 }
 
-/* Two-column card */
-.auth-box {
-  width: 49vw;
-  display: grid;
-  grid-template-columns: 1fr;
-  background: #2b1b6b; /* purple base under left panel */
-  border-radius: 14px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
-  position: relative;
-}
-/* Right column (image) */
-.panel-right {
-  position: relative;
-  background: radial-gradient(120% 120% at 20% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%);
+.signup-bg {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f7fafd;
 }
 
-  .panel-right::before {
-    /* vertical fold shade between left and right */
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 26%);
-    pointer-events: none;
-  }
-
-.right-image {
+.signup-container {
   display: flex;
+  width: 100vw;
+  max-width: 1200px;
+  min-height: 600px;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: hidden;
   align-items: center;
   justify-content: center;
-  width: 23.9vw;
 }
 
-  .right-image img {
-    width: 100%;
-    display: block;
-  }
+.signup-panel-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 0;
+}
 
-/* Left column (form) */
-.panel-left {
-  padding: clamp(22px, 3.5vw, 36px);
-  background: white; /* brighter purple */
-  color: black;
+.signup-panel-right {
+  flex: 1 1 0;
+  background: #f7fafd;
 }
 
-.brand-mark {
-  width: 4vw;
-  margin-bottom: 14px;
-  border: 2px solid #b1b1b17d;
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+.create-card {
+  background: #fff;
+  width: 90%;
+  max-width: 540px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 38px 38px 28px 38px;
+  border-radius: 18px;
+  box-shadow: 0 12px 48px rgba(2, 6, 23, 0.18), 0 0 0 2px rgba(56, 189, 248, 0.08);
+  margin: 0 auto;
 }
 
-.title {
-  margin: 0 0 6px;
-  font-size: clamp(22px, 3vw, 26px);
-  font-weight: 700;
+.create-title {
+  font-size: 2.1rem;
+  font-weight: 900;
+  text-align: center;
+  margin-bottom: 28px;
+  letter-spacing: 0.6px;
+  color: #23395d;
 }
 
-.subtitle {
-  margin: 0 0 18px;
+.signup-title.center-title {
+  text-align: center;
+  margin-bottom: 32px;
+  width: 100%;
+  font-size: 2.1rem;
+  font-weight: 800;
+  letter-spacing: 1px;
+  color: #23395d;
+  text-shadow: 0 2px 8px #0008;
+  /* animation: logoGlow 3.5s ease-in-out infinite alternate; */
 }
 
-.form {
-  display: grid;
-  gap: 25px; /* Increased gap for better spacing between fields */
+@keyframes logoGlow {
+  0% {
+    text-shadow: 0 2px 8px #0008, 0 0 12px #38bdf8, 0 0 6px #13bfa6;
+  }
+
+  100% {
+    text-shadow: 0 2px 8px #0008, 0 0 32px #38bdf8, 0 0 18px #13bfa6;
+  }
 }
 
-/* Field-specific margin adjustments */
-.field {
+.create-form {
+  width: 100%;
+  max-width: 510px;
   display: grid;
-  gap: 12px; /* Increased gap between label/input pairs */
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 15px;
+  align-items: start;
+  margin-bottom: 14px;
 }
 
-label {
+.terms-info {
+  color: #137ec4;
+  font-size: 1.08rem;
   font-weight: 600;
-  font-size: 13px;
+  text-align: left;
+  margin: 12px 0 0 0;
+  letter-spacing: 0.5px;
+  display: block;
 }
 
-/* Inputs: translucent with subtle border */
-input[type="text"], input[type="password"], select.input-field {
-  color: #000000;
-  border: 1px solid rgb(0 0 0 / 57%);
-  border-radius: 10px;
-  padding: 12px 14px; /* Increased padding */
-  outline: none;
+.form-row {
+  display: contents;
 }
 
-input::placeholder {
-  color: #808080;
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
 }
 
-input:focus, select.input-field:focus {
-  border-color: #a78bfa;
-  box-shadow: 0 0 0 3px rgba(167, 139, 250, .25);
+  .form-field label {
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: #23395d;
+  }
+
+  .form-field input,
+  .form-field select {
+    background: #fff;
+    color: #23395d;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 14px;
+    font-size: 1rem;
+    margin-bottom: 2px;
+    box-shadow: 0 1px 4px #0002;
+    transition: border 0.2s, box-shadow 0.2s;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    height: 46px;
+    box-sizing: border-box;
+  }
+
+    .form-field input:focus,
+    .form-field select:focus {
+      outline: 2px solid #1de9b6;
+      border-color: #1de9b6;
+      box-shadow: 0 0 6px rgba(56, 189, 248, 0.5), 0 0 0 2px #1de9b688;
+    }
+
+    .form-field input::placeholder {
+      color: #b0b8c1;
+      opacity: 1;
+    }
+
+.form-checkbox {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  color: #2b5160;
+  margin-top: 8px;
 }
 
-select.input-field {
-  font-size: 16px;
+  .form-checkbox input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    accent-color: #38bdf8;
+  }
+
+.create-btn {
+  grid-column: 1 / -1;
   width: 100%;
-  background: #fff;
-  box-sizing: border-box;
+  background: #23395d;
+  color: #fff;
+  padding: 14px 18px;
+  border-radius: 10px;
+  font-weight: 800;
+  border: none;
+  box-shadow: 0 10px 30px rgba(3, 20, 36, 0.32);
+  cursor: pointer;
+  font-size: 1.15rem;
+  margin-top: 10px;
+}
+
+  .create-btn:hover {
+    background: #38bdf8;
+    color: #fff;
+  }
+
+.create-login-link {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #137ec4;
+  margin-top: 0px;
+}
+
+  .create-login-link a {
+    color: #137ec4;
+    font-weight: 700;
+  }
+
+.create-footer {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #010207;
+  font-size: 0.9rem;
+  margin-top: 16px;
 }
 
-.error {
-  color: red;
-  font-size: 12px;
+.form-field .error {
+  color: #ff5252;
+  font-size: 0.85rem;
+  margin-top: 0px;
 }
 
-/* Buttons */
-.btn {
+.welcome-info-box {
+  position: absolute;
+  top: 32px;
+  left: 0;
   width: 100%;
-  border-radius: 999px;
-  padding: 12px 18px;
-  cursor: pointer;
+  padding: 0 32px;
+  z-index: 2;
+  text-align: left;
 }
 
-.btn-primary {
-  background: #0b0f1a;
+.welcome-info-title {
+  font-size: 1.35rem;
+  font-weight: 800;
   color: #fff;
-  border: none;
-  font-weight: 700;
+  margin-bottom: 6px;
+  letter-spacing: 0.5px;
 }
 
-.btn-dark {
-  background: #111827;
-  color: #fff;
-  border: none;
-  margin-top: 8px;
+.welcome-info-desc {
+  font-size: 1.08rem;
+  color: #e0f7fa;
+  margin-bottom: 8px;
 }
 
-.btn[aria-busy="true"] {
-  opacity: .75;
-  cursor: progress;
+.welcome-info-link {
+  color: #fff;
+  font-weight: 700;
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s;
 }
 
-.footnote {
-  margin: 14px 0 0;
-  font-size: 13px;
+  .welcome-info-link:hover {
+    color: #23395d;
+  }
+
+/* Extra whitespace and centering for small screens */
+@media (max-width: 900px) {
+  .signup-container {
+    flex-direction: column;
+    width: 98vw;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .signup-panel-right {
+    padding: 18px 6vw;
+  }
+
+  .create-card {
+    padding: 18px 6vw;
+    margin: 0 auto;
+  }
+
+  .create-form {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+
+  .create-btn {
+    width: 100%;
+  }
 }
 
-  .footnote a {
-    color: red;
-    text-decoration: underline;
+@media (max-width: 600px) {
+  .create-card {
+    padding: 10px 2vw;
   }
 
-/* Layout: stack on small, split on >= 900px */
-@media(min-width: 900px) {
-  .auth-box {
-    grid-template-columns: 520px 1fr;
+  .signup-panel-right {
+    padding: 10px 2vw;
   }
 }
 
-.topTitle {
+.signin-close {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 38px;
+  height: 38px;
+  border: none;
+  background: #14263c;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 2rem;
+  font-weight: bold;
   display: flex;
   align-items: center;
-  gap: 21px;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: background 0.2s, color 0.2s;
+  box-shadow: 0 2px 8px #0005;
 }
 
-.topHeader {
-  font-size: 1vw;
+  .signin-close:hover {
+    background: #38bdf8;
+    color: #18314a;
+  }
+
+/* Eye toggle inside password fields: match sign-in positioning */
+.form-field .eye-toggle {
+  position: absolute;
+  right: 12px;
+  top: 38px;
+  background: none;
+  border: none;
+  font-size: 1.3em;
+  color: #888;
+  cursor: pointer;
+  z-index: 2;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.9;
+  transition: color 0.2s, opacity 0.2s;
 }
 
-@keyframes fadeInBackdrop {
+  .form-field .eye-toggle:hover {
+    color: #555;
+    opacity: 1;
+  }
+
+  .form-field .eye-toggle:focus {
+    outline: none;
+  }
+
+  /* Ensure button SVG scales nicely */
+  .form-field .eye-toggle svg {
+    width: 22px;
+    height: 22px;
+  }
+
+/* Small screen tweak: move eye toggle slightly up if spacing differs */
+@media (max-width: 700px) {
+  .form-field .eye-toggle {
+    top: 28px;
+  }
+}
+
+.fact-rotator {
+  font-size: 1.18rem;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 18px;
+  min-height: 32px;
+  text-align: center;
+  transition: opacity 0.6s;
+  letter-spacing: 0.5px;
+  animation: fadeFact 0.6s;
+}
+
+@keyframes fadeFact {
   from {
     opacity: 0;
   }
@@ -174,260 +369,303 @@ select.input-field {
   }
 }
 
-.signup-popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+.side-panel.side-right {
+  position: relative;
+  overflow: hidden;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
-  background: rgb(30 41 59 / 67%);
+  background: linear-gradient(135deg, #38bdf8 0%, #7b2ff2 100%);
+  min-height: 100%;
 }
 
-.signup-header {
-  width: 100vw;
+.side-panel.side-left {
+  position: relative;
+  overflow: hidden;
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 32px 48px 0 48px;
+  align-items: center;
+  justify-content: center;
+ 
+  min-height: 100%;
+}
+
+.wave-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.wave-svg {
   position: absolute;
   top: 0;
   left: 0;
-  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
 }
-.signup-logo {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  pointer-events: auto;
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #38bdf8 0%, #7b2ff2 100%);
+  opacity: 0.85;
 }
-.signup-logo img {
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  background: #fff;
-  border: 2px solid #b1b1b17d;
+
+.circle1 {
+  width: 90px;
+  height: 90px;
+  top: 80px;
+  left: 60px;
+  box-shadow: 0 0 32px #7b2ff2aa;
 }
-.signup-brand {
-  color: #1de9b6;
-  font-size: 2.2rem;
-  font-weight: 900;
-  letter-spacing: 2px;
+
+.circle2 {
+  width: 60px;
+  height: 60px;
+  top: 220px;
+  left: 220px;
+  box-shadow: 0 0 24px #38bdf8aa;
 }
-/* Removed header login link positioning; new variant below form */
-.signup-login-link {
-  font-size: 1.05rem;
-  color: #fff;
+
+.circle3 {
+  width: 120px;
+  height: 120px;
+  bottom: 40px;
+  left: 120px;
+  box-shadow: 0 0 48px #7b2ff2aa;
+}
+
+.circle4 {
+  width: 36px;
+  height: 36px;
+  bottom: 80px;
+  right: 60px;
+  box-shadow: 0 0 12px #38bdf8aa;
+}
+
+.welcome-content {
+  position: relative;
+  z-index: 2;
+  width: 100%;
   text-align: center;
-  margin: 14px 0 4px;
-}
-.signup-login-link.below { margin-top: 8px; }
-  .signup-login-link a {
-    color: #38bdf8;
-    text-decoration: underline;
-    margin-left: 6px;
-    font-weight: 600;
-    cursor: pointer;
-  }
-.signup-box {
-  background: #18314a;
-  border-radius: 22px;
-  box-shadow: 0 12px 48px #000a;
-  padding: 48px 38px 32px 38px;
-  width: 520px;
-  max-width: 95vw;
   display: flex;
   flex-direction: column;
   align-items: center;
-  position: relative;
+  justify-content: center;
+  margin-top: 80px;
 }
-.signup-title {
-  color: #38bdf8;
-  font-size: 2.1rem;
+
+.welcome-title {
+  font-size: 2.2rem;
   font-weight: 800;
-  margin-bottom: 32px;
-  text-align: center;
-  letter-spacing: 1px;
-  text-shadow: 0 2px 8px #0008;
-}
-form {
-  width: 100%;
-}
-.signup-row {
-  display: flex;
-  gap: 24px;
+  color: #fff;
   margin-bottom: 18px;
+  text-shadow: 0 2px 16px #0006;
 }
-.signup-field {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+
+.welcome-subtitle {
+  font-size: 1.08rem;
+  color: #e0e7ef;
+  margin-bottom: 32px;
+  letter-spacing: 1px;
+  text-shadow: 0 2px 8px #0004;
 }
-.signup-field label {
+
+.welcome-footer {
+  font-size: 1.05rem;
   color: #fff;
-  font-weight: 600;
-  margin-bottom: 6px;
-  font-size: 1rem;
-  letter-spacing: 0.5px;
-}
-.signup-field input,
-.signup-field select {
-  background: #fff;
-  color: #18314a;
-  border: none;
-  border-radius: 8px;
-  padding: 12px 14px;
-  font-size: 1rem;
-  margin-bottom: 2px;
-  box-shadow: 0 1px 4px #0002;
-  transition: border 0.2s, box-shadow 0.2s;
-}
-.signup-field input:focus,
-.signup-field select:focus {
-  outline: 2px solid #1de9b6;
-  border-color: #1de9b6;
-  box-shadow: 0 0 0 2px #1de9b688;
-}
-.signup-field input::placeholder {
-  color: #b0b8c1;
-  opacity: 1;
-}
-.signup-field small.error {
-  color: #ff5252;
-  font-size: 0.85rem;
-  margin-top: 2px;
-  text-shadow: 0 1px 2px #0008;
+  opacity: 0.7;
+  margin-top: 120px;
+  letter-spacing: 2px;
 }
-.signup-checkbox {
+
+/* Glossy info popup for role info */
+.role-info-popup-bg {
+  position: fixed;
+  inset: 0;
+  background: rgba(30, 41, 59, 0.55);
+  backdrop-filter: blur(1px);
+  z-index: 0;
   display: flex;
   align-items: center;
-  margin-bottom: 22px;
-  color: #fff;
-  font-size: 1rem;
-}
-.signup-checkbox input[type="checkbox"] {
-  margin-right: 10px;
-  accent-color: #1de9b6;
+  justify-content: flex-end;
+  padding: 48px 56px 48px 24px;
+  animation: fadeInModalBg 0.3s;
 }
-  .signup-checkbox a {
-    color: #38bdf8;
-    text-decoration: underline;
-    margin-left: 4px;
+
+@keyframes fadeInModalBg {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
   }
-.signup-btn {
-  width: 100%;
-  background: #38bdf8;
-  color: #18314a;
-  border: none;
-  border-radius: 8px;
-  padding: 14px 0;
-  font-size: 1.1rem;
-  font-weight: 700;
-  margin-bottom: 8px; /* reduced because login link follows */
-  cursor: pointer;
-  transition: background 0.2s, color 0.2s;
-  box-shadow: 0 2px 8px #0003;
 }
-.signup-btn:hover {
-  background: #13bfa6;
+
+@keyframes popupOpen {
+  0% {
+    opacity: 0;
+    transform: scale(0.92) translateY(24px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
-.signup-social-row {
-  display: flex;
-  gap: 18px;
-  width: 100%;
-  margin-bottom: 18px;
+
+.role-info-popup {
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 4px;
+  box-shadow: 0 8px 32px #38bdf844 0 24px #1e293b88;
+  padding: 22px 28px 18px 28px;
+  min-width: 220px;
+  max-width: 90vw;
+  text-align: left;
+  z-index: 3001;
+  font-size: 0.98em;
+  color: #23395d;
+  letter-spacing: 0.2px;
+  line-height: 1.5;
+  position: relative;
+  font-family: inherit;
+  opacity: 1;
+  animation: popupOpen 1.2s cubic-bezier(.22, .9, .32, 1) both;
 }
-.signup-social {
-  flex: 1;
-  background: #fff;
-  color: #18314a;
+
+  .role-info-popup .close-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: #14263c;
+    color: #fff;
+    border-radius: 50%;
+    font-size: 1.1rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: background 0.2s, color 0.2s;
+    box-shadow: 0 2px 8px #0005;
+  }
+
+    .role-info-popup .close-btn:hover {
+      background: #38bdf8;
+      color: #18314a;
+    }
+
+.role-info-btn {
+  background: none;
   border: none;
-  border-radius: 8px;
-  padding: 12px 0;
-  font-size: 1rem;
-  font-weight: 600;
+  color: #38bdf8;
+  font-size: 1.15em;
   cursor: pointer;
-  transition: background 0.2s, color 0.2s;
-}
-.signup-social.facebook:hover {
-  background: #3b5998;
-  color: #fff;
-}
-.signup-social.twitter:hover {
-  background: #1da1f2;
-  color: #fff;
-}
-.signup-footer {
-  color: #b0b8c1;
-  font-size: 0.95rem;
-  text-align: center;
-  margin-top: 8px;
-}
-.signup-close {
-  position: absolute;
-  top: 18px;
-  right: 18px;
-  width: 38px;
-  height: 38px;
-  border: none;
-  background: #14263c;
-  color: #fff;
-  border-radius: 50%;
-  font-size: 2rem;
-  font-weight: bold;
-  display: flex;
+  margin-left: 6px;
+  vertical-align: middle;
+  padding: 0;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  z-index: 10;
-  transition: background 0.2s, color 0.2s;
-  box-shadow: 0 2px 8px #0005;
+  transition: color 0.2s;
 }
-.signup-close:hover {
-  background: #38bdf8;
-  color: #18314a;
+
+  .role-info-btn:hover {
+    color: #137ec4;
+  }
+
+/* Spinner for loading state on buttons */
+.spinner {
+ display: inline-block;
+ width:18px;
+ height:18px;
+ border:3px solid #fff;
+ border-top:3px solid #38bdf8;
+ border-radius:50%;
+ animation: spin0.7s linear infinite;
+ vertical-align: middle;
+ margin-right:8px;
+}
+@keyframes spin {
+0% { transform: rotate(0deg);}
+100% { transform: rotate(360deg);}
+}
+
+/* Info button and floating info popup styles */
+.info-btn {
+ background: #38bdf8;
+ color: #fff;
+ border: none;
+ border-radius:50%;
+ width:28px;
+ height:28px;
+ font-size:1.1rem;
+ font-weight: bold;
+ cursor: pointer;
+ margin-left:8px;
+}
+
+.info-popup-bg {
+ position: fixed;
+ inset:0;
+ background: rgba(30,41,59,0.45);
+ backdrop-filter: blur(2px);
+ z-index:;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.info-popup {
+  background: rgba(255,255,255,0.85);
+  border-radius: 16px;
+  box-shadow: 08px 32px #38bdf844,0024px #1e293b88;
+  padding: 24px 28px 18px 28px;
+  min-width: 320px;
+  max-width: 90vw;
+  text-align: left;
+  font-size: 0.98rem;
+  color: #23395d;
+  position: relative;
+  font-family: inherit;
+  left: 840px;
 }
 
-/* Animated glow loop for role info button when closed */
-@keyframes pulseGlow { 0%{box-shadow:0 0 0 0 rgba(56,189,248,.75);} 70%{box-shadow:0 0 12px 6px rgba(56,189,248,0);} 100%{box-shadow:0 0 0 0 rgba(56,189,248,0);} }
-.role-info-btn.glow-loop { animation:pulseGlow 2s ease-in-out infinite; }
-.role-info-btn.glow-loop:hover { animation:none; }
+.info-title {
+ font-size:1.08rem;
+ font-weight:700;
+ margin-bottom:8px;
+ color: #38bdf8;
+ letter-spacing:0.5px;
+}
 
-/* Pop-in animation for role-help panel */
-@keyframes popIn { 0%{opacity:0; transform:translateY(-8px) scale(.95);} 60%{opacity:1; transform:translateY(2px) scale(1.02);} 100%{opacity:1; transform:translateY(0) scale(1);} }
-.role-help { animation:popIn .35s cubic-bezier(.23,1,.32,1); }
+.info-text {
+ font-size:0.95rem;
+ color: #23395d;
+ opacity:0.95;
+}
 
-@media (max-width: 700px) {
-  .signup-box {
-    padding: 18px 6vw 18px 6vw;
-    width: 98vw;
-  }
-  .signup-header {
-    flex-direction: column;
-    align-items: flex-start;
-    width: 98vw;
-    padding: 0 0 12px 0;
-  }
-  .signup-title {
-    font-size: 1.3rem;
-  }
-  .signup-row {
-    flex-direction: column;
-    gap: 0;
-  }
-  .signup-login-link { font-size: .95rem; }
-}
-
-/* Detached overlay modal (centered) */
-.role-help-overlay { position:fixed; inset:0; background:rgba(15,33,50,.72); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1400; animation:fadeInBackdrop .25s ease-out; }
-.role-help-modal { position:relative; width:min(480px,90vw); background:#18314a; color:#e6f4fa; border:1px solid #27526b; border-radius:20px; padding:46px 34px 32px; box-shadow:0 18px 48px rgba(0,0,0,.55),0 0 0 1px #1d4358; animation:popIn .38s cubic-bezier(.23,1,.32,1); }
-.role-help-title { margin:0 0 14px; font-size:1.55rem; font-weight:800; letter-spacing:.5px; color:#38bdf8; text-shadow:0 2px 8px #0008; }
-.role-help-list { margin:0 0 14px 18px; padding:0; list-style:disc; }
-.role-help-list li { margin:0 0 6px; line-height:1.4; }
-.role-help-tip { margin:4px 0 0; font-size:.85rem; color:#9bd7ff; font-style:italic; }
-.role-help-close { position:absolute; top:12px; right:12px; width:42px; height:42px; border:none; border-radius:50%; background:#102536; color:#38bdf8; font-size:1.5rem; font-weight:700; cursor:pointer; box-shadow:0 0 0 1px #1e3a4d; transition:background .25s,color .25s, transform .25s, box-shadow .25s; }
-.role-help-close:hover { background:#38bdf8; color:#102536; box-shadow:0 0 0 2px #38bdf8,0 0 14px #38bdf8aa; transform:rotate(90deg); }
+.info-close {
+ position: absolute;
+ top:8px;
+ right:12px;
+ background: none;
+ border: none;
+ font-size:1.5rem;
+ color: #38bdf8;
+ cursor: pointer;
+ font-weight: bold;
+ opacity:0.7;
+ transition: opacity 0.2s;
+}
+.info-close:hover {
+ opacity:1;
+}

src/app/homepage/sign-up/sign-up.component.html

@@ -1,73 +1,118 @@
-<section class="signup-popup" (click)="hideRoleInfo()">
+<section class="signup-popup ai-bg-animate">
+  <div class="ai-particle-bg"></div>
   <div class="signup-header">
-    <div class="signup-logo"></div>
+    <div class="signup-logo">
+      
+    </div>
   </div>
-  <div class="signup-box" (click)="$event.stopPropagation()">
-    <button class="signup-close" type="button" (click)="closePopup()" aria-label="Close">&times;</button>
-    <h2 class="signup-title">Create An Account</h2>
-    <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
-      <div class="signup-row">
-        <div class="signup-field">
-          <label for="firstName">First Name</label>
-          <input id="firstName" type="text" placeholder="First Name" formControlName="name" [attr.aria-invalid]="controlHasError('name')" />
-          <small *ngIf="controlHasError('name','required') && form.get('name')?.touched" class="error">First name is required.</small>
-          <small *ngIf="controlHasError('name','minlength') && form.get('name')?.touched" class="error">Enter at least 2 characters.</small>
-        </div>
-        <div class="signup-field">
-          <label for="lastName">Last Name</label>
-          <input id="lastName" type="text" placeholder="Last Name" />
-        </div>
-      </div>
-      <div class="signup-row">
-        <div class="signup-field">
-          <label for="email">Email</label>
-          <input id="email" type="text" placeholder="email@gmail.com" formControlName="email" [attr.aria-invalid]="controlHasError('email')" />
-          <small *ngIf="controlHasError('email','required') && form.get('email')?.touched" class="error">Email is required.</small>
-          <small *ngIf="controlHasError('email','pattern') && form.get('email')?.touched" class="error">Enter a valid email/phone.</small>
-        </div>
-        <div class="signup-field role-field-wrapper">
-          <label for="role">
-            Role
-            <button type="button" class="role-info-btn" [class.glow-loop]="!showRoleInfo" (click)="toggleRoleInfo($event)" aria-label="Role descriptions">i</button>
-          </label>
-          <select id="role" formControlName="role" [attr.aria-invalid]="controlHasError('role')">
-            <option value="">-- Select Role --</option>
-            <option value="admin">Admin</option>
-            <option value="teachers">Teachers</option>
-            <option value="lawyers">Lawyers</option>
-            <option value="investigators">Investigators</option>
-            <option value="others">Others</option>
-          </select>
-          <small *ngIf="controlHasError('role','required') && form.get('role')?.touched" class="error">Role is required.</small>
-        </div>
-      </div>
-      <div class="signup-row">
-        <div class="signup-field">
-          <label for="password">Create Password</label>
-          <input id="password" type="password" placeholder="••••••••" formControlName="password" [attr.aria-invalid]="controlHasError('password')" />
-          <small *ngIf="controlHasError('password','required') && form.get('password')?.touched" class="error">Password is required.</small>
-          <small *ngIf="controlHasError('password','minlength') && form.get('password')?.touched" class="error">Use at least 6 characters.</small>
-        </div>
-        <div class="signup-field">
-          <label for="confirmPassword">Confirm Password</label>
-          <input id="confirmPassword" type="password" placeholder="••••••••" formControlName="confirmPassword" [attr.aria-invalid]="showPwdMismatch()" />
-          <small *ngIf="controlHasError('confirmPassword','required') && form.get('confirmPassword')?.touched" class="error">Confirm password is required.</small>
-          <small *ngIf="showPwdMismatch() && form.get('confirmPassword')?.touched" class="error">Passwords do not match.</small>
+
+  <div class="auth-card">
+    <div class="card-inner">
+      <!-- FRONT: sign-up on main panel, image side on left -->
+      <div class="card-front">
+        <button class="signin-close" type="button" (click)="closePopup()" aria-label="Close">&times;</button>
+
+        <div class="card-content">
+          <div class="side-panel side-left">
+            <div class="signup-panel-left">
+
+            </div>
+            <div class="main-panel">
+              <h2 class="signup-title center-title">Create An Account</h2>
+
+              <form [formGroup]="form" (ngSubmit)="submit()" class="create-form" novalidate>
+                <div class="form-row">
+                  <div class="form-field">
+                    <label for="firstName">First Name</label>
+                    <input id="firstName" type="text" placeholder="First Name" formControlName="name" [attr.aria-invalid]="controlHasError('name')" />
+                    <small *ngIf="controlHasError('name','required') && form.get('name')?.touched" class="error">First name is required.</small>
+                    <small *ngIf="controlHasError('name','minlength') && form.get('name')?.touched" class="error">Enter at least 2 characters.</small>
+                    <small *ngIf="controlHasError('name','invalidName') && form.get('name')?.touched" class="error">Only alphabets and spaces allowed.</small>
+                  </div>
+                  <div class="form-field">
+                    <label for="lastName">Last Name</label>
+                    <input id="lastName" type="text" placeholder="Last Name" formControlName="lastName" [attr.aria-invalid]="controlHasError('lastName')" />
+                    <small *ngIf="controlHasError('lastName','required') && form.get('lastName')?.touched" class="error">Last name is required.</small>
+                    <small *ngIf="controlHasError('lastName','minlength') && form.get('lastName')?.touched" class="error">Enter at least 2 characters.</small>
+                    <small *ngIf="controlHasError('lastName','invalidName') && form.get('lastName')?.touched" class="error">Only alphabets and spaces allowed.</small>
+                  </div>
+                </div>
+                <div class="form-row">
+                  <div class="form-field">
+                    <label for="email">Email</label>
+                    <input id="email" type="text" placeholder="email@gmail.com" formControlName="email" [attr.aria-invalid]="controlHasError('email')" />
+                    <small *ngIf="controlHasError('email','required') && form.get('email')?.touched" class="error">Email is required.</small>
+                    <small *ngIf="controlHasError('email','pattern') && form.get('email')?.touched" class="error">Enter a valid email/phone.</small>
+                  </div>
+                  <div class="form-field role-field-wrapper">
+                    <label for="role">
+                      Role
+                      <button class="info-btn" type="button" (click)="showInfo = true">i</button>
+                    </label>
+                    <select id="role" formControlName="role" [attr.aria-invalid]="controlHasError('role')">
+                      <option value="">-- Select Role --</option>
+                      <option value="admin">Admin</option>
+                      <option value="teachers">Teachers</option>
+                      <option value="lawyers">Lawyers</option>
+                      <option value="investigators">Investigators</option>
+                      <option value="others">Others</option>
+                    </select>
+                    <small *ngIf="controlHasError('role','required') && form.get('role')?.touched" class="error">Role is required.</small>
+                  </div>
+                </div>
+                <div class="form-row">
+                  <div class="form-field" style="position:relative;">
+                    <label for="password">Create Password</label>
+                    <input id="password" [type]="showPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="password" [attr.aria-invalid]="controlHasError('password')" />
+                    <button type="button" class="eye-toggle" (click)="toggleConfirmPasswordVisibility()" tabindex="-1" aria-label="Show/Hide confirm password">
+                    </button>
+                    <small *ngIf="controlHasError('password','required') && form.get('password')?.touched" class="error">Password is required.</small>
+                    <small *ngIf="controlHasError('password','minlength') && form.get('password')?.touched" class="error">Use at least 8 characters.</small>
+                    <small *ngIf="form.get('password')?.hasError('passwordPolicy') && form.get('password')?.touched" class="policy-info">
+                      Create a strong password with at least 8 characters using letters, numbers, and special symbols.
+                    </small>
+                  </div>
+
+                  <div class="form-field" style="position:relative;">
+                    <label for="confirmPassword">Confirm Password</label>
+                    <input id="confirmPassword" [type]="showConfirmPassword ? 'text' : 'password'" placeholder="••••••••" formControlName="confirmPassword" [attr.aria-invalid]="showPwdMismatch()" />
+                    <button type="button" class="eye-toggle" (click)="toggleConfirmPasswordVisibility()" tabindex="-1" aria-label="Show/Hide confirm password">
+                    </button>
+                    <small *ngIf="controlHasError('confirmPassword','required') && form.get('confirmPassword')?.touched" class="error">Confirm password is required.</small>
+                    <small *ngIf="showPwdMismatch() && form.get('confirmPassword')?.touched" class="error">Passwords do not match.</small>
+                  </div>
+                </div>
+                <div class="form-checkbox">
+                  <input type="checkbox" id="terms" formControlName="terms" />
+                  <label for="terms">Creating your account and you accepting <a href="#">Terms & Conditions.</a></label>
+                </div>
+                <div *ngIf="submitted && !form.get('terms')?.value" class="terms-info">
+                  Please accept Terms &amp; Conditions.
+                </div>
+                <button class="create-btn ai-pulse" type="submit" [disabled]="loading">
+                  <ng-container *ngIf="!loading; else creatingAccount">
+                    Create Account
+                  </ng-container>
+                  <ng-template #creatingAccount>
+                    <span class="spinner"></span> Creating Account...
+                  </ng-template>
+                </button>
+
+
+                <!-- Google Sign-In button -->
+                <div class="google-signup-row">
+                  <div id="google-signup-btn-div">
+                    <div class="g-signin2" data-width="240" data-height="50" data-longtitle="true"></div>
+                  </div>
+                </div>
+
+                <div class="create-footer"><b>© Pykara Technologies, 2025. All rights reserved.</b></div>
+              </form>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="signup-checkbox">
-        <input type="checkbox" id="terms" required />
-        <label for="terms">Creating your account and you accepting <a href="#">Terms & Conditions.</a></label>
-      </div>
-      <button class="signup-btn" type="submit">Create Account</button>
-      <div class="signup-login-link below">
-        <span>Already have an account?</span>
-        <a href="#" (click)="goToLogin(); $event.preventDefault()">Sign in here!</a>
-      </div>
-    </form>
-    <div class="signup-footer">&copy; Pykara Technologies, 2025. All rights reserved.</div>
   </div>
-
   <!-- Detached overlay/modal so layout doesn't shift -->
   <div class="role-help-overlay" *ngIf="showRoleInfo" (click)="hideRoleInfo()">
     <div class="role-help-modal" role="dialog" aria-label="Role descriptions" (click)="$event.stopPropagation()">
@@ -83,4 +128,26 @@
       <p class="role-help-tip">Not sure? Select Others; an Admin can upgrade your role later.</p>
     </div>
   </div>
-</section>
+
+  <!-- Floating Info Popup -->
+  <div *ngIf="showInfo" class="info-popup-bg">
+    <div class="info-popup">
+      <button class="info-close" type="button" (click)="showInfo = false">&times;</button>
+      <div class="info-title">Role Information</div>
+      <div class="info-text">
+        <ul>
+          <li><strong>Admin:</strong> Full control: users, roles, system settings.</li>
+          <li><strong>Teachers:</strong> Run assessments / training evaluations.</li>
+          <li><strong>Lawyers:</strong> Review analytics for case & witness prep.</li>
+          <li><strong>Investigators:</strong> Conduct interviews and capture signals.</li>
+          <li><strong>Others:</strong> General or limited access usage.</li>
+        </ul>
+        <p>Not sure? Select Others; an Admin can upgrade your role later.</p>
+      </div>
+    </div>
+  </div>
+
+
+
+
+

src/app/homepage/sign-up/sign-up.component.ts

@@ -1,46 +1,114 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+
+import { Component, Output, EventEmitter, ChangeDetectorRef, Input, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators, AbstractControl } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { SignUpService } from './sign-up.service';  // Import the SignUpService
 import { AuthService } from '../../auth.service';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+export function nameValidator(control: AbstractControl): ValidationErrors | null {
+  const value = control.value || '';
+  // Only allow alphabets and spaces, min2 chars
+  if (!/^[A-Za-z ]{2,}$/.test(value)) {
+    return { invalidName: true };
+  }
+  return null;
+}
 
 @Component({
   selector: 'app-sign-up',
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule, RouterLink],
   templateUrl: './sign-up.component.html',
-  styleUrls: ['./sign-up.component.css']
+  styleUrls: ['./sign-up.component.css'],
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity:0 }),
+        animate('600ms', style({ opacity:1 }))
+      ]),
+      transition(':leave', [
+        animate('600ms', style({ opacity:0 }))
+      ])
+    ])
+  ]
 })
-export class SignUpComponent {
+export class SignUpComponent implements OnInit, OnDestroy {
+  @Input() embedded = false; // when true, render only inner panel (for embedding in auth-card)
+  @Output() switchToSignIn = new EventEmitter<void>();
   form: FormGroup;
   private isSubmitting = false;
 
-  // Added: state & handlers for role info popover used in template
+  // Role info popover logic preserved
   showRoleInfo = false;
   toggleRoleInfo(ev?: Event) { ev?.stopPropagation(); this.showRoleInfo = !this.showRoleInfo; }
   hideRoleInfo() { this.showRoleInfo = false; }
 
-  @Output() switchToSignIn = new EventEmitter<void>();
   @Output() close = new EventEmitter<void>();
 
-  constructor(private fb: FormBuilder, private router: Router, private signUpService: SignUpService) {  // Inject SignUpService
+  showPassword = false;
+  showConfirmPassword = false;
+  errorMessage = '';
+
+  isSignUpActive = true; // ← Added state for sign-up panel activation
+  public loading = false; // Used to disable the button during sign-up
+  submitted = false; // Track form submission status
+
+  // Added: terms & conditions error handling
+  termsError: string = '';
+
+  facts: string[] = [
+    '🧠 Py-Detect AI analyzes tone, emotion, and consistency.',
+    '🎥 Supports video and audio interrogation analysis.',
+    '📊 Generates instant investigation summary reports.'
+  ];
+  currentFact: string = this.facts[0];
+  private factIndex =0;
+  private factInterval: any;
+
+  showInfo = false;
+
+  constructor(
+    private fb: FormBuilder,
+    private router: Router,
+    private signUpService: SignUpService,
+    private cdr: ChangeDetectorRef
+  ) {
     this.form = this.fb.group({
-      name: ['', [Validators.required, Validators.minLength(2)]],
+      name: ['', [Validators.required, Validators.minLength(2), nameValidator]],
+      lastName: ['', [Validators.required, Validators.minLength(2), nameValidator]],
       email: ['', [
         Validators.required,
         Validators.pattern(/(^[^@]+@[^@]+\.[^@]+$)|(^\+?\d[\d\-\s]{8,14}\d$)/)
       ]],
-      //gender: ['', [Validators.required]],
-      password: ['', [Validators.required, Validators.minLength(6)]],
+      password: ['', [Validators.required, Validators.minLength(8), passwordPolicyValidator]],
       confirmPassword: ['', [Validators.required]],
       role: ['', [Validators.required]],
+      terms: [false, Validators.requiredTrue] // Added terms control with requiredTrue validator
     }, { validators: [this.passwordsMatchValidator] });
 
     // Close popover when clicking anywhere in document (capture phase not needed here)
     document.addEventListener('click', () => this.hideRoleInfo());
   }
 
+  ngOnInit() {
+    this.startFactRotation();
+  }
+
+  ngOnDestroy() {
+    if (this.factInterval) {
+      clearInterval(this.factInterval);
+    }
+  }
+
+  startFactRotation() {
+    this.factInterval = setInterval(() => {
+      this.factIndex = (this.factIndex +1) % this.facts.length;
+      this.currentFact = this.facts[this.factIndex];
+    },5000);
+  }
+
   control(path: string): AbstractControl | null { return this.form.get(path); }
 
   controlHasError(path: string, error?: string): boolean {
@@ -62,11 +130,20 @@ export class SignUpComponent {
     return pw && cpw && pw === cpw ? null : { passwordMismatch: true };
   }
 
-  async submit() {
+  togglePasswordVisibility() {
+    this.showPassword = !this.showPassword;
+  }
+  toggleConfirmPasswordVisibility() {
+    this.showConfirmPassword = !this.showConfirmPassword;
+  }
+
+  submit() {
     // Confirm button click
     alert("Sign-Up button clicked!");
     console.log("Sign-Up button clicked!");
 
+    this.submitted = true; // Track the form submission attempt
+
     // Mark all form controls as touched to trigger validation
     this.form.markAllAsTouched();
 
@@ -84,12 +161,20 @@ export class SignUpComponent {
       return;
     }
 
+    // Check terms & conditions acceptance
+    if (!this.form.get('terms')?.value) {
+      this.termsError = 'Please accept Terms & Conditions.';
+      return;
+    }
+    this.termsError = '';
+
+    this.loading = true; // Set loading to true when starting submission
     try {
       // Prepare the payload to send to the backend
       const payload = {
         name: this.control('name')?.value,
+        lastName: this.control('lastName')?.value,
         email: this.control('email')?.value,
-        //gender: this.control('gender')?.value,
         password: this.control('password')?.value,
         role: this.control('role')?.value
       };
@@ -98,17 +183,33 @@ export class SignUpComponent {
       console.log("Payload to send:", payload);
 
       // Make the HTTP request
-      await this.signUpService.signUp(payload).toPromise();
-      console.log("Sign-up request sent successfully!");
-
-      // On success, navigate based on role
-      if (payload.role === 'admin') {
-        this.router.navigateByUrl('/infopage');
-      } else {
-        this.router.navigateByUrl('/auth/signin');
-      }
+      this.signUpService.signUp(payload).subscribe(
+        (response) => {
+          this.errorMessage = '';
+          console.log("Sign-up request sent successfully!");
+          this.loading = false; // Reset loading on success
+          // Wait for loader to finish, then navigate
+          setTimeout(() => {
+            this.router.navigate(['/auth/signin']);
+          }, 500);
+        },
+        (error) => {
+          if (error && error.status === 400) {
+            this.errorMessage = 'This email or username is already registered.';
+          } else {
+            this.errorMessage = 'An error occurred. Please try again.';
+          }
+          this.loading = false; // Reset loading on error
+          this.cdr.markForCheck();
+          setTimeout(() => {
+            this.errorMessage = '';
+            this.cdr.markForCheck();
+          }, 3000);
+        }
+      );
     } catch (error) {
       console.error("Error occurred during sign-up:", error); // Log any errors from the API call
+      this.loading = false; // Reset loading on exception
     }
   }
 
@@ -119,11 +220,48 @@ export class SignUpComponent {
   }
 
   closePopup() {
+    try {
+      // dispatch a global event so parent or other listeners always can close modals
+      window.dispatchEvent(new CustomEvent('auth-close'));
+    } catch (e) {
+      // ignore
+    }
+
     this.close.emit();
+    // Defensive: remove modal/backdrop if parent didn't hide them
+    try {
+      const modal = document.querySelector('.modal');
+      if (modal && modal.parentElement) modal.parentElement.removeChild(modal);
+      const backdrop = document.querySelector('.modal-backdrop');
+      if (backdrop && backdrop.parentElement) backdrop.parentElement.removeChild(backdrop);
+    } catch (e) {
+      console.warn('Failed to remove modal/backdrop DOM elements', e);
+    }
+    // Ensure change detection updates
+    this.cdr.markForCheck();
   }
 
   tr(key: string): string {
     const map: Record<string, string> = { title: 'Create your account', subtitle: 'Join to continue' };
     return map[key] || '';
   }
+
+  goToSignIn() {
+    // Emit to parent when embedded so the card can slide back
+    this.switchToSignIn.emit();
+  }
+
+  goToSignUp() {
+    // no-op when embedded
+  }
+}
+
+function passwordPolicyValidator(control: AbstractControl): ValidationErrors | null {
+  const value = control.value || '';
+  // Policy: min 8 chars, 1 uppercase, 1 lowercase, 1 number, 1 special char
+  const policy = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>\/?]).{8,}$/;
+  if (!policy.test(value)) {
+    return { passwordPolicy: true };
+  }
+  return null;
 }

src/app/homepage/sign-up/sign-up.service.ts

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';  // Import Observable for async handling
   providedIn: 'root'
 })
 export class SignUpService {
-  private apiUrl = 'http://127.0.0.1:5000';  // The base URL for your Flask backend
+  private apiUrl = 'http://127.0.0.1:5002';  // The base URL for your Flask backend
   constructor(private http: HttpClient) { }
 
   // Method to sign up a user

src/app/infopage/infopage.component.css

@@ -51,7 +51,7 @@ body::before {
   justify-content: space-between;
   padding: 18px 32px 0 32px;
   position: relative;
-  gap: 32px;
+  gap:0px;
 }
 
 .logo-cluster {
@@ -100,7 +100,8 @@ body::before {
   align-items: center;
   gap: 14px;
   margin-right: 32px;
-  margin-left:89vh;
+  margin-left: 92vh;
+  margin-bottom: 15px;
 }
 
 .pykara-analysis-label {
@@ -110,26 +111,6 @@ body::before {
   letter-spacing: 1px;
 }
 
-.pykara-progress-bar {
-  width: 220px;
-  height: 14px;
-  background: #e3f6ff;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px #38bdf844, 0 0 12px #38bdf8aa;
-  position: relative;
-}
-
-.pykara-progress-bar-inner {
-  height: 100%;
-  background: linear-gradient(270deg, #38bdf8, #06ffa5, #ff006e, #38bdf8);
-  background-size: 400% 100%;
-  border-radius: 8px 0 0 8px;
-  transition: width 0.4s cubic-bezier(.4,2,.6,1);
-  animation: progressBarGradientMove 2.5s linear infinite;
-  box-shadow: 0 0 16px #38bdf8cc, 0 0 8px #06ffa5aa;
-}
-
 @keyframes progressBarGradientMove {
   0% { background-position: 0% 50%; }
   100% { background-position: 100% 50%; }
@@ -674,6 +655,7 @@ html {
   color: white !important;
   font-weight: 500 !important;
   backdrop-filter: blur(10px) !important;
+  margin-bottom: 15px;
 }
 
   .autosave-indicator.saving {
@@ -1197,8 +1179,8 @@ html {
 }
 
 .pykara-progress-bar {
-  width: 220px;
-  height: 14px;
+  width: 186px;
+  height: 6px;
   background: #e3f6ff;
   border-radius: 8px;
   overflow: hidden;

src/app/infopage/infopage.component.html

@@ -30,12 +30,14 @@
         <span>{{ autoSaveStatus }}</span>
       </div>
       <!-- View Records Button -->
-      <button class="view-records-btn" style="margin-left:16px;vertical-align:middle;"
+      <div class="view-records-btn" style="margin-left: 16px; vertical-align: middle; color: #fff; font-size: 1.5em; width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; margin-bottom: 15px;"
               type="button"
-              (click)="goToRecords()">
+              (click)="goToRecords()"
+              (mouseenter)="showViewRecordsTooltip = true"
+              (mouseleave)="showViewRecordsTooltip = false">
         <i class="fas fa-folder-open"></i>
-        <span>View Records</span>
-      </button>
+        <span *ngIf="showViewRecordsTooltip" style="position:absolute;top:100%;left:0%;transform:translateX(-50%);background:#222;color:#fff;padding:4px 12px;border-radius:6px;font-size:0.6em;white-space:nowrap;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.12);">View Records</span>
+      </div>
     </div>
   </div>
 </div>
@@ -112,7 +114,8 @@
         </button>
         <!-- Field Selector Popup: floating, anchored to button -->
         <div class="modern-field-selector-popup"
-             *ngIf="showFieldSelector === (currentSection + '-' + currentSubgroup)">
+             *ngIf="showFieldSelector === (currentSection + '-' + currentSubgroup)"
+             (click)="$event.stopPropagation()">
           <div class="popup-header">
             <span><i class="fas fa-list-check"></i> Select Fields to Display</span>
             <button class="popup-close-btn" (click)="closeFieldSelector()" type="button">
@@ -124,6 +127,7 @@
               <label class="popup-field-label">
                 <input type="checkbox"
                        [checked]="isFieldSelected(field)"
+                       (click)="$event.stopPropagation()"
                        (change)="toggleFieldSelection(field, $event)" />
                 <span class="popup-field-text">{{ field }}</span>
               </label>
@@ -287,12 +291,12 @@
                     <ng-template #textInput>
                       <!-- Description fields as textarea -->
                       <textarea *ngIf="field.toLowerCase().includes('description') || field === 'Remark'; else regularInput"
-                                class="field-input"
+                                class="field-input auto-scroll-textarea"
                                 [class.compact]="isCompactField(field)"
                                 [(ngModel)]="formData[field]"
                                 (input)="onFieldChange(field)"
                                 [placeholder]="getFieldPlaceholder(field)"
-                                [maxlength]="getMaxLength(field)"
+                                [attr.maxlength]="field === 'Brief Description' ? null : getMaxLength(field)"
                                 rows="3"></textarea>
                       <!-- Recording status for Remark -->
                       <div *ngIf="field === 'Remark' && isRecording" style="margin-top:4px;color:#e74c3c;font-size:0.95em;">
@@ -356,3 +360,4 @@
   </footer>
 
 
+

src/app/infopage/infopage.component.ts

@@ -5,1193 +5,1224 @@ import { Router } from '@angular/router';
 import { CaseStoreService } from '../shared/case-store.service';
 
 @Component({
-  selector: 'app-infopage',
-  templateUrl: './infopage.component.html',
-  styleUrls: ['./infopage.component.css'],
-  animations: [
-    // Simple card animation
-    trigger('cardSlide', [
-      transition(':enter', [
-        style({ transform: 'translateY(20px)', opacity: 0 }),
-        animate('300ms ease-out', 
-          style({ transform: 'translateY(0)', opacity: 1 }))
-      ])
-    ]),
-    // Field animation
-    trigger('fieldAnimation', [
-      transition(':enter', [
-        style({ opacity: 0, transform: 'translateY(10px)' }),
-        animate('200ms ease-out', 
-          style({ opacity: 1, transform: 'translateY(0)' }))
-      ])
-    ]),
-    // Simple fade animation
-    trigger('fadeIn', [
-      transition(':enter', [
-        style({ opacity: 0 }),
-        animate('200ms ease-in', style({ opacity: 1 }))
-      ]),
-      transition(':leave', [
-        animate('150ms ease-out', style({ opacity: 0 }))
-      ])
-    ]),
-    // Help animation
-    trigger('helpAnimation', [
-      transition(':enter', [
-        style({ opacity: 0, transform: 'translateY(-10px)' }),
-        animate('200ms ease-out', 
-          style({ opacity: 1, transform: 'translateY(0)' }))
-      ]),
-      transition(':leave', [
-        animate('150ms ease-in', 
-          style({ opacity: 0, transform: 'translateY(-10px)' }))
-      ])
-    ])
-  ]
+ selector: 'app-infopage',
+ templateUrl: './infopage.component.html',
+ styleUrls: ['./infopage.component.css'],
+ animations: [
+ // Simple card animation
+ trigger('cardSlide', [
+ transition(':enter', [
+ style({ transform: 'translateY(20px)', opacity:0 }),
+ animate('300ms ease-out', 
+ style({ transform: 'translateY(0)', opacity:1 }))
+ ]),
+ transition(':leave', [
+ animate('300ms ease-in', 
+ style({ transform: 'translateY(20px)', opacity:0 }))
+ ])
+ ]),
+ // Field animation
+ trigger('fieldAnimation', [
+ transition(':enter', [
+ style({ opacity:0, transform: 'translateY(10px)' }),
+ animate('200ms ease-out', 
+ style({ opacity:1, transform: 'translateY(0)' }))
+ ]),
+ transition(':leave', [
+ animate('150ms ease-out', style({ opacity:0, transform: 'translateY(10px)' }))
+ ])
+ ]),
+ // Simple fade animation
+ trigger('fadeIn', [
+ transition(':enter', [
+ style({ opacity:0 }),
+ animate('200ms ease-in', style({ opacity:1 }))
+ ]),
+ transition(':leave', [
+ animate('150ms ease-out', style({ opacity:0 }))
+ ])
+ ]),
+ // Help animation
+ trigger('helpAnimation', [
+ transition(':enter', [
+ style({ opacity:0, transform: 'translateY(-10px)' }),
+ animate('200ms ease-out', 
+ style({ opacity:1, transform: 'translateY(0)' }))
+ ]),
+ transition(':leave', [
+ animate('150ms ease-in', 
+ style({ opacity:0, transform: 'translateY(-10px)' }))
+ ])
+ ])
+ ]
 })
 export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
-  showRemarkModal: boolean = false;
-  showSubmitPopup: boolean = false;
-  showMicPopup: boolean = false;
-  isRecording: boolean = false;
-  constructor(private router: Router, private caseStore: CaseStoreService) {}
-  // Core state
-  currentSection: 'crime' | 'suspect' | 'notes' = 'crime';
-  currentSubgroup: string = 'Identification & Timing';
-  showHelpFor: string | null = null;
-  
-  // UI state
-  isAutoSaving: boolean = false;
-  autoSaveStatus: string = 'Saved';
-  isDragOver: boolean = false;
-  
-  // Card state
-  isCardMinimized = {
-    primary: false,
-    secondary: false,
-    tertiary: false
-  };
-  
-  // Form data and validation
-  formData: Record<string, any> = {};
-  fieldValidation: Record<string, { hasError: boolean, isValid: boolean, message: string }> = {};
-  completedFields: Set<string> = new Set();
-  completedSubgroups: Set<string> = new Set();
-  completedSections: Set<string> = new Set();
-  
-  // Subjects for reactive programming
-  private destroy$ = new Subject<void>();
-  private autoSave$ = new Subject<void>();
-  
-  // Constants - Reverted to original values except for Identification & Timing
-  readonly sectionKeys: ('crime' | 'suspect' | 'notes')[] = ['crime', 'suspect', 'notes'];
-  readonly maxFieldsPerCard = 8; // Reverted to original
-  readonly maxFieldsPerSecondaryCard = 8; // Reverted to original
-  readonly maxFieldsPerCardIdentificationTiming = 6; // Special for Identification & Timing
-  readonly maxFieldsPerSecondaryCardIdentificationTiming = 6; // Special for Identification & Timing
-  
-  @ViewChild('formCard1') formCard1!: ElementRef<HTMLDivElement>;
-  @ViewChild('formCard2') formCard2!: ElementRef<HTMLDivElement>;
-  @ViewChild('formCard3') formCard3!: ElementRef<HTMLDivElement>;
-
-  // Enhanced field definitions with validation rules
-  readonly requiredFields = new Set<string>([
-    'Case ID', 'Crime Type', 'Date & Time (Entry)', 'Location', 'Suspect Name', 'Age', 'Gender',
-    'FIR / Ref #', 'Case Category', 'Occurred From', 'Country', 'State', 'District',
-    'Jurisdiction / PS', 'Scene Type', 'Reported By', 'Case Status', 'Investigating Officer'
-  ]);
-  
-  readonly compactFields = new Set<string>([
-    'Age', 'Gender', 'Height (cm)', 'Weight (kg)', 'Build', 'Hair Color', 'Eye Color',
-    'Number of Victims', 'Witness Count', 'Prior Arrests', 'arrest Count', 'Case Priority',
-    'Photos / Video?', 'CCTV Present?', 'Arrest Made', 'risk Level', 'Confidentiality'
-  ]);
-  
-  readonly numericFields = new Set<string>([
-    'Age', 'Height (cm)', 'Weight (kg)', 'Number of Victims', 'Witness Count', 'Prior Arrests', 'arrest Count'
-  ]);
-
-  // File type configurations
-  readonly fileTypeConfig: Record<string, string> = {
-    'Photo Upload': 'image/*',
-    'Evidence Photos': 'image/*',
-    'Evidence Videos': 'video/*',
-    'Evidence Documents': '.pdf,.doc,.docx,.txt',
-    'Evidence Files': '*',
-    'Upload Evidence Files': '*',
-    'Digital Evidence': '*'
-  };
-
-  // Track selected values (cascading dropdown logic)
-  selectedValues: Record<string, string> = {};
-
-  // Date field groups
-  dateTimeFields = new Set<string>(['Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered']);
-  dateFields = new Set<string>(['Follow-up Date', 'Next Hearing Date']);
-
-  // Country/State/District data
-  countries = ['India'];
-  indiaStates = [
-    'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar', 'Chhattisgarh', 'Goa', 'Gujarat', 
-    'Haryana', 'Himachal Pradesh', 'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh', 
-    'Maharashtra', 'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab', 
-    'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura', 'Uttar Pradesh', 
-    'Uttarakhand', 'West Bengal'
-  ];
-  
-  tamilNaduDistricts = [
-    'Ariyalur', 'Chengalpattu', 'Chennai', 'Coimbatore', 'Cuddalore', 'Dharmapuri', 'Dindigul', 
-    'Erode', 'Kallakurichi', 'Kanchipuram', 'Kanyakumari', 'Karur', 'Krishnagiri', 'Madurai', 
-    'Mayiladuthurai', 'Nagapattinam', 'Namakkal', 'Nilgiris', 'Perambalur', 'Pudukkottai', 
-    'Ramanathapuram', 'Ranipet', 'Salem', 'Sivaganga', 'Tenkasi', 'Thanjavur', 'Theni', 
-    'Thoothukudi (Tuticorin)', 'Tiruchirappalli', 'Tirunelveli', 'Tirupathur', 'Tiruppur', 
-    'Tiruvallur', 'Tiruvannamalai', 'Tiruvarur', 'Vellore', 'Viluppuram', 'Virudhunagar'
-  ];
-
-  // Enhanced select options - Added missing field options
-  selectOptions: Record<string, string[]> = {
-    'Crime Type': ['Theft', 'Assault', 'Homicide', 'Cybercrime', 'Fraud', 'Narcotics', 'Arson', 'Kidnapping', 'General', 'Other'],
-    'Case Category': ['Property', 'Violent', 'Cyber', 'Financial', 'Public Order', 'Narcotics', 'Organized', 'General', 'Other'],
-    'Number of Victims': ['0', '1', '2', '3', '4', '5+'],
-    'Jurisdiction / PS': ['Central PS', 'East Division', 'West Division', 'Rural Unit', 'Cyber Cell', 'General'],
-    'Scene Type': ['Residential', 'Commercial', 'Public Space', 'Vehicle', 'Rural', 'Online', 'General', 'Other'],
-    'Witness Count': ['0', '1', '2', '3', '4', '5+'],
-    'Victim Summary': ['Stable', 'Injured', 'Critical', 'Deceased', 'Unknown'],
-    'Suspected Offender Known?': ['Yes', 'No', 'Unknown'],
-    'Offence Category': ['Minor', 'Serious', 'Organized', 'Cyber', 'Financial', 'Violent', 'General', 'Other'],
-    'Suspected Motive': ['Financial Gain', 'Revenge', 'Jealousy', 'Ideological', 'Political', 'Personal Dispute', 'Unknown', 'General', 'Other'],
-    'Confirmed Motive': ['Financial Gain', 'Revenge', 'Jealousy', 'Ideological', 'Political', 'Personal Dispute', 'Unknown', 'General', 'Other'],
-    'Weapon Involved': ['None', 'Knife', 'Firearm', 'Blunt Object', 'Explosive', 'Chemical', 'Other', 'Unknown', 'General'],
-    'Property Loss / Damage': ['None', 'Minor', 'Moderate', 'Major', 'Severe', 'Unknown'],
-    'Photos / Video?': ['Yes', 'No'],
-    'CCTV Present?': ['Yes', 'No'],
-    'Scene Condition': ['Intact', 'Disturbed', 'Contaminated', 'Secured', 'Compromised', 'General'],
-    'Chain of Custody?': ['Initiated', 'Ongoing', 'Complete', 'Not Started'],
-    'Forensic Tests Required': ['None', 'DNA', 'Fingerprints', 'Ballistics', 'Toxicology', 'Digital Forensics', 'Trace', 'General', 'Other'],
-    'Arrest Made': ['Yes', 'No'],
-    'riskLevel': ['Low', 'Medium', 'High', 'Critical'],
-    'Confidentiality': ['Internal', 'Restricted', 'Sensitive', 'Sealed'],
-    'Initial Actions Taken': ['Scene Secured', 'Medical Aid', 'Evidence Logged', 'Witness Statements', 'Suspect Detained', 'General', 'Other'],
-    'Case Status': ['Open', 'Active', 'Suspended', 'Closed', 'Archived'],
-    'Case Priority': ['Low', 'Normal', 'High', 'Urgent', 'Critical'],
-    'Gender': ['Male', 'Female', 'Other'],
-    'Nationality': ['India'],
-    'Languages': ['English', 'Hindi', 'Tamil', 'Telugu', 'Kannada', 'Malayalam', 'Bengali', 'Marathi', 'Gujarati', 'Other'],
-    'Build': ['Slim', 'Average', 'Athletic', 'Heavy', 'Obese'],
-    'Hair Color': ['Black', 'Brown', 'Blonde', 'Red', 'Grey', 'White', 'Dyed / Other', 'Unknown'],
-    'Eye Color': ['Brown', 'Blue', 'Green', 'Hazel', 'Grey', 'Black', 'Unknown'],
-    'Employment': ['Employed', 'Unemployed', 'Self-Employed', 'Student', 'Retired', 'Unknown'],
-    'Education': ['None', 'Primary', 'Secondary', 'Diploma', 'Bachelor', 'Master', 'Doctorate', 'Other'],
-    'Marital Status': ['Single', 'Married', 'Divorced', 'Separated', 'Widowed', 'Unknown'],
-    'Known Habits': ['Smoking', 'Alcohol', 'Substance Use', 'Gambling', 'None', 'Unknown'],
-    'Occupation': ['Unskilled', 'Skilled Labour', 'Professional', 'Executive', 'Military', 'Law Enforcement', 'IT', 'Healthcare', 'Education', 'Finance', 'Other'],
-    'Known Financial Details': ['None', 'Low Income', 'Moderate Income', 'High Income', 'Wealthy', 'Unknown'],
-    'Gang Affiliation': ['None', 'Local', 'Regional', 'International', 'Unknown'],
-    'Criminal History': ['None', 'Minor', 'Multiple', 'Serious'],
-    'Prior Arrests': ['0', '1', '2', '3', '4', '5+'],
-    'Probation/Parole Status': ['None', 'On Probation', 'On Parole', 'Completed', 'Unknown'],
-    'Status': ['Draft', 'In Progress', 'Completed', 'Archived'],
-    // Additional field options for complete coverage
-    'arrestCount': ['0', '1', '2', '3', '4', '5+'],
-    'Linked Cases': [], // Will be populated dynamically with existing case IDs
-    'Suspect Link': [], // Will be populated dynamically with existing suspect IDs
-    'Government ID': ['Aadhaar Card', 'PAN Card', 'Driving License', 'Passport', 'Voter ID', 'Other'],
-    'Family Connections': ['Spouse', 'Parent', 'Child', 'Sibling', 'Relative', 'Friend', 'Other'],
-    'Social Media Handles': [], // Text input field for multiple handles
-    'Version History / Updates': [] // Text area for version tracking
-  };
-
-  // File upload fields
-  fileFields = new Set<string>([
-    'Photo Upload', 'Evidence Photos', 'Evidence Videos', 'Evidence Documents', 
-    'Evidence Files', 'Upload Evidence Files', 'Digital Evidence'
-  ]);
-
-  uploadedFiles: Record<string, File[]> = {};
-
-  // Section icons
-  sectionIcons = {
-    crime: 'fas fa-gavel',
-    suspect: 'fas fa-user-secret',
-    notes: 'fas fa-sticky-note'
-  };
-
-  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']
-      } 
-    }
-  };
-
-  // Complete field descriptions
-  fieldDescriptions: Record<string, string> = { 
-    // Crime: Identification & Timing
-    'Case ID': 'Unique internal tracking identifier for this case.',
-    'FIR / Ref #': 'Official First Information Report or reference number.',
-    'Crime Type': 'Primary legal / investigative classification of the offence.',
-    'Case Category': 'Broader grouping used for analytics and reporting.',
-    'Date & Time (Entry)': 'Timestamp when the case was first registered in the system.',
-    'Occurred From': 'Start of the known / suspected offence time window.',
-    'Occurred To': 'End of the known / suspected offence time window.',
-    'Time Reported': 'When it was first reported to authorities.',
-    'Time Discovered': 'When the incident was first discovered (may differ from reported).',
-    'Country': 'Country where the offence occurred.',
-    'State': 'State / province of occurrence.',
-    'District': 'Administrative district of occurrence (Tamil Nadu districts supported).',
-    'Number of Victims': 'Total count of direct victims involved.',
-    'Brief Description': 'Short narrative summary for quick reference.',
-
-    // Crime: Location & People
-    'Location': 'Exact address / geo description of the scene.',
-    'Jurisdiction / PS': 'Police Station or jurisdiction handling the investigation.',
-    'Scene Type': 'Type of environment where the offence occurred.',
-    'Reported By': 'Name of the reporting individual / entity.',
-    'Reported Contact': 'Contact details for the reporting party.',
-    'Witness Count': 'Number of identified witnesses so far.',
-    'Victim Name': 'Primary victim name (or placeholder if protected).',
-    'Victim Contact': 'Phone / email / other contact channel for victim.',
-    'Victim Summary': 'Short summary of victim condition or status.',
-    'Suspected Offender Known?': 'Whether victim / witnesses know the offender.',
-    'Suspect Link': 'Internal reference to related suspect record.',
-
-    // Crime: Offence & Context
-    'Legal Sections / Charges': 'Applicable statutory sections / penal codes.',
-    'Offence Category': 'Higher level grouping (e.g., violent, cyber).',
-    'Offence Description': 'Detailed narrative of what occurred.',
-    'Suspected Motive': 'Preliminary perceived motive (subject to change).',
-    'Confirmed Motive': 'Validated motive after evidence review.',
-    'Weapon Involved': 'Weapon(s) used or suspected; choose Unknown if unclear.',
-    'Property Loss / Damage': 'Summary / valuation of property loss or damage.',
-
-    // Crime: Evidence & Scene
-    'Evidence Collected': 'General list of all evidentiary items gathered.',
-    'Forensic Tests Required': 'Pending or requested forensic examinations.',
-    'Scene Condition': 'Condition of scene upon first secure entry.',
-    'Photos / Video?': 'Whether any media was captured.',
-    'CCTV Present?': 'If relevant CCTV sources exist.',
-    'CCTV Sources / IDs': 'Identifiers / locations for each CCTV source.',
-    'Physical Evidence (list)': 'Individual tangible exhibits (bagged / tagged).',
-    'Chain of Custody?': 'Status of formal evidence transfer logging.',
-    'Digital Evidence': 'Electronic sources: phones, email dumps, logs, socials.',
-    'Evidence Storage Reference': 'Locker / repository / digital vault reference ID.',
-
-    // Crime: Operational Notes
-    'Investigating Officer': 'Lead officer responsible for case progress.',
-    'Duty Person': 'Officer / staff who received the report.',
-    'Supervising Officer': 'Oversight / escalation point for the case.',
-    'Patrol Notes': 'First responder observations / scene notes.',
-    'Arrest Made': 'Indicates whether an arrest has occurred.',
-    'Arrest Location': 'Location at which arrest was executed.',
-    'Initial Actions Taken': 'Immediate remedial or containment actions.',
-    'riskLevel': 'Risk classification influencing priority.',
-    'Confidentiality': 'Access / visibility level of case records.',
-
-    // Crime: Status & Linkage
-    'Biometric / Forensic IDs': 'External forensic system identifiers (AFIS, DNA DB).',
-    'DNA Ref ID': 'Laboratory DNA reference identifier.',
-    'Fingerprint ID': 'Fingerprint database reference.',
-    'Case Status': 'Lifecycle status (Open / Active / Closed etc.).',
-    'Linked Cases': 'Related or associated case identifiers.',
-    'arrestCount': 'Total arrests associated with this case.',
-    'Case Priority': 'Operational prioritisation level.',
-    'Follow-up Date': 'Next scheduled investigative review date.',
-    'Court Case ID': 'Judicial / docket identifier once filed.',
-    'Next Hearing Date': 'Date of next scheduled court proceeding.',
-    'Final Summary': 'Closure narrative entered at completion.',
-
-    // Suspect: Identity
-    'Suspect ID': 'Internal unique suspect identifier.',
-    'Suspect Name': 'Full legal or recorded name.',
-    'Alias / Nickname': 'Commonly used alternative names.',
-    'Age': 'Approximate or confirmed age.',
-    'Gender': 'Recorded gender descriptor.',
-    'Nationality': 'Country of citizenship.',
-    'Nationality ID / Passport Number': 'Official national ID / passport number.',
-    'Languages': 'Languages spoken or understood by suspect.',
-    'Address': 'Primary last known address.',
-    'Known Aliases': 'Additional identity variations.',
-    'Government ID': 'Government issued identification (license / ID card).',
-
-    // Suspect: Physical Description
-    'Height (cm)': 'Height in centimetres measured or estimated.',
-    'Weight (kg)': 'Weight in kilograms measured or estimated.',
-    'Build': 'General body build classification.',
-    'Hair Color': 'Observed or recorded hair colour.',
-    'Eye Color': 'Observed or recorded eye colour.',
-    'Distinguishing Marks': 'Unique visible physical markers.',
-    'Tattoo Details': 'Location and description of tattoos.',
-    'Scar Details': 'Location and description of scars.',
-    'Photo Upload': 'Most recent or relevant facial photograph.',
-
-    // Suspect: Background
-    'Employment': 'Current employment status.',
-    'Education': 'Highest completed education level.',
-    'Occupation': 'Primary occupation / role.',
-    'Company': 'Employer / organisation name.',
-    'Workplace Address': 'Physical address of workplace.',
-    'Marital Status': 'Current marital / relationship status.',
-    'Known Habits': 'Behavioural patterns (substances, gambling, etc.).',
-    'Known Financial Details': 'Financial profile relevant to investigation.',
-
-    // Suspect: Known Associates
-    'Associate Names': 'Key associate individuals linked to suspect.',
-    'Gang Affiliation': 'Known gang or group membership.',
-    'Family Connections': 'Notable family relational links.',
-    'Social Media Handles': 'Identifiers used on social platforms.',
-
-    // Suspect: Prior Records
-    'Criminal History': 'Summary of prior criminal involvement.',
-    'Prior Arrests': 'Number / list of previous arrests.',
-    'Probation/Parole Status': 'Current supervision / release status.',
-
-    // Notes: Investigation Notes
-    'Initial Findings': 'Early observations at investigation start.',
-    'Detailed Notes': 'Progressive narrative & analytical details.',
-    'Status': 'Progress state category for notes.',
-    'Version History / Updates': 'Chronological changes & authorship log.',
-
-    // Notes: Evidence Files
-    'Evidence Photos': 'Photographic evidence references.',
-    'Evidence Videos': 'Video evidence references.',
-    'Evidence Documents': 'Document / PDF evidence references.',
-
-    // Notes: Links and Recommendation
-    'Links to Evidence': 'External or internal reference links to sources.',
-    'Final Recommendations': 'Closing recommendations / actions summary.'
-  };
-
-  subgroupIcons: any = {
-    'Identification & Timing': 'fas fa-clock',
-    'Location & People': 'fas fa-map-marker-alt',
-    'Offence & Context': 'fas fa-gavel',
-    'Evidence & Scene': 'fas fa-search',
-    'Operational Notes': 'fas fa-clipboard',
-    'Status & Linkage': 'fas fa-link',
-    'Identity': 'fas fa-id-card',
-    'Physical Description': 'fas fa-user',
-    'Background': 'fas fa-user-graduate',
-    'Known Associates': 'fas fa-users',
-    'Prior Records': 'fas fa-file-alt',
-    'Investigation Notes': 'fas fa-sticky-note',
-    'Evidence Files': 'fas fa-folder',
-    'Links and Recommendation': 'fas fa-link',
-    'Recommendations': 'fas fa-thumbs-up'
-  };
-
-  ngOnInit(): void {
-    // Set up autosave
-    this.autoSave$.pipe(
-      debounceTime(2000),
-      takeUntil(this.destroy$)
-    ).subscribe(() => {
-      this.performAutoSave();
-    });
-    
-    // Load saved form data
-    this.loadFormData();
-    
-    // Load field selections
-    this.loadFieldSelections();
-  }
-
-  ngAfterViewInit(): void {
-    // No special scroll handling needed anymore
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  // Progress Calculation
-  get progressPercentage(): number {
-    const totalFields = this.getAllFields().length;
-    const completedFields = this.completedFields.size;
-    return totalFields > 0 ? Math.round((completedFields / totalFields) * 100) : 0;
-  }
-
-  private getAllFields(): string[] {
-    let allFields: string[] = [];
-    for (const section of this.sectionKeys) {
-      for (const subgroup of Object.keys(this.sections[section].subgroups)) {
-        allFields = allFields.concat(this.sections[section].subgroups[subgroup]);
-      }
-    }
-    return allFields;
-  }
-
-  // Helper method to check if we're in Identification & Timing
-  private isIdentificationAndTimingPage(): boolean {
-    return this.currentSubgroup === 'Identification & Timing';
-  }
-
-  // Helper method to check if we're in Location & People
-  private isLocationAndPeoplePage(): boolean {
-    return this.currentSubgroup === 'Location & People';
-  }
-
-  // Helper method to check if we need compact layout (applies to all pages now)
-  private needsCompactLayout(): boolean {
-    return true; // Apply compact layout to all pages to prevent main page scroll
-  }
-
-  // Card Management - Updated for single card layout across ALL pages
-  showSecondaryCard(): boolean {
-    return false; // No secondary card for any page - single card layout for all
-  }
-
-  showTertiaryCard(): boolean {
-    return false; // No tertiary card for any page - single card layout for all
-  }
-
-  getPrimaryFields(): string[] {
-    // Return selected fields for display instead of all fields
-    return this.getSelectedFieldsForDisplay();
-  }
-
-  getSecondaryFields(): string[] {
-    // Return empty array for single card layout across all pages
-    return [];
-  }
-
-  getTertiaryFields(): string[] {
-    // Return empty array for single card layout across all pages
-    return [];
-  }
-  
-  private getCurrentFields(): string[] {
-    return this.sections[this.currentSection].subgroups[this.currentSubgroup] || [];
-  }
-
-  toggleCardMinimize(card: 'primary' | 'secondary' | 'tertiary'): void {
-    this.isCardMinimized[card] = !this.isCardMinimized[card];
-  }
-
-  // Field Management
-  isFieldRequired(field: string): boolean {
-    return this.requiredFields.has(field);
-  }
-
-  isCompactField(field: string): boolean {
-    return this.compactFields.has(field);
-  }
-
-  getInputType(field: string): string {
-    if (this.numericFields.has(field)) return 'number';
-    if (this.dateTimeFields.has(field)) return 'datetime-local';
-    if (this.dateFields.has(field)) return 'date';
-    if (field.toLowerCase().includes('email')) return 'email';
-    if (field.toLowerCase().includes('phone') || field.toLowerCase().includes('contact')) return 'tel';
-    if (field.toLowerCase().includes('url') || field.toLowerCase().includes('link')) return 'url';
-    if (field.toLowerCase().includes('description')) return 'textarea';
-    return 'text';
-  }
-
-  getFieldPlaceholder(field: string): string {
-    if (field === 'Age') return 'Enter age (18-99)';
-    if (field === 'Height (cm)') return 'Height in cm';
-    if (field === 'Weight (kg)') return 'Weight in kg';
-    if (this.dateTimeFields.has(field)) return 'dd-mm-yyyy --:--';
-    if (this.dateFields.has(field)) return 'dd-mm-yyyy';
-    if (field.toLowerCase().includes('email')) return 'Enter email address';
-    if (field.toLowerCase().includes('phone')) return 'Enter phone number';
-    if (field.toLowerCase().includes('description')) return 'Enter detailed description...';
-    return `Enter ${field.toLowerCase()}`;
-  }
-
-  getMaxLength(field: string): number {
-    if (field === 'Age') return 2;
-    if (field === 'Gender') return 10;
-    if (field === 'Height (cm)') return 3;
-    if (field === 'Weight (kg)') return 3;
-    if (this.compactFields.has(field)) return 20;
-    return 500;
-  }
-
-  // Validation
-  validateField(field: string): void {
-    const value = this.formData[field];
-    let hasError = false;
-    let isValid = false;
-    let message = '';
-
-    if (this.isFieldRequired(field) && (!value || value.toString().trim() === '')) {
-      hasError = true;
-      message = `${field} is required`;
-    } else if (value && value.toString().trim() !== '') {
-      // Field-specific validation
-      if (field === 'Age') {
-        const age = parseInt(value);
-        if (isNaN(age) || age < 1 || age > 120) {
-          hasError = true;
-          message = 'Age must be a valid number between 1 and 120';
-        } else {
-          isValid = true;
-        }
-      } else if (field === 'Email') {
-        // Basic email pattern; improve with regex if needed
-        const emailPattern = /\S+@\S+\.\S+/;
-        isValid = emailPattern.test(value);
-        if (!isValid) {
-          hasError = true;
-          message = 'Invalid email address format';
-        }
-      } else {
-        // Generic validation for other fields (extend as needed)
-        isValid = true;
-      }
-    }
-
-    // Update field validation state
-    this.fieldValidation[field] = { hasError, isValid, message };
-
-    // Update overall form completion status
-    this.updateCompletionStatus();
-  }
-
-  private updateCompletionStatus(): void {
-    this.completedFields.clear();
-
-    for (const field of Object.keys(this.formData)) {
-      if (this.formData[field] !== null && this.formData[field] !== undefined && this.formData[field] !== '') {
-        this.completedFields.add(field);
-      }
-    }
-
-    // Update completed subgroups and sections
-    this.updateCompletedGroupsAndSections();
-  }
-
-  private updateCompletedGroupsAndSections(): void {
-    this.completedSubgroups.clear();
-    this.completedSections.clear();
-
-    for (const section of this.sectionKeys) {
-      const subgroups = Object.keys(this.sections[section].subgroups);
-      for (const subgroup of subgroups) {
-        const fields = this.sections[section].subgroups[subgroup];
-        const allFieldsCompleted = fields.every((field: string) => this.completedFields.has(field));
-        
-        if (allFieldsCompleted) {
-          this.completedSubgroups.add(subgroup);
-        }
-      }
-
-      if (this.completedSubgroups.size === subgroups.length) {
-        this.completedSections.add(section);
-      }
-    }
-  }
-
-  // Field selection functionality - Updated to allow all fields by default
-  selectedFields: Record<string, string[]> = {}; // Store selected fields per subgroup
-  showFieldSelector: string | null = null; // Track which field selector is open
-  readonly maxSelectableFields = 50; // Increased limit to allow more fields
-
-  // Get all available fields for current subgroup
-  getAvailableFields(): string[] {
-    return this.getCurrentFields();
-  }
-
-  // Get total available fields count dynamically
-  getTotalAvailableFieldsCount(): number {
-    return this.getAvailableFields().length;
-  }
-
-  // Get currently selected fields for display (default to ALL fields if none selected)
-  getSelectedFieldsForDisplay(): string[] {
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    if (this.selectedFields[subgroupKey] && this.selectedFields[subgroupKey].length >= 0) {
-      return this.selectedFields[subgroupKey];
-    }
-    // Default to ALL fields if no selection made
-    return this.getCurrentFields();
-  }
-
-  // Toggle field selection with enhanced debugging
-  toggleFieldSelection(field: string, event?: Event): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    console.log('Toggling field selection for:', field);
-
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    if (!this.selectedFields[subgroupKey]) {
-      // Initialize with all fields selected by default
-      this.selectedFields[subgroupKey] = [...this.getCurrentFields()];
-    }
-
-    const currentSelection = this.selectedFields[subgroupKey];
-    const fieldIndex = currentSelection.indexOf(field);
-
-    console.log('Current selection:', currentSelection);
-    console.log('Field index:', fieldIndex);
-
-    if (fieldIndex > -1) {
-      // Remove field if already selected
-      currentSelection.splice(fieldIndex, 1);
-      console.log('Removed field:', field);
-    } else {
-      // Add field if not selected and under limit
-      if (currentSelection.length < this.maxSelectableFields) {
-        currentSelection.push(field);
-        console.log('Added field:', field);
-      } else {
-        console.log('Selection limit reached, cannot add:', field);
-      }
-    }
-
-    // Trigger change detection
-    this.selectedFields = { ...this.selectedFields };
-    this.saveFieldSelections();
-    // Do NOT close the popup here; just update selection and save
-  }
-
-  // Check if field is currently selected
-  isFieldSelected(field: string): boolean {
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    const selections = this.selectedFields[subgroupKey];
-    if (!selections) {
-      // If no selections made, all fields are selected by default
-      return true;
-    }
-    return selections.includes(field);
-  }
-
-  // Get count of selected fields
-  getSelectedFieldCount(): number {
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    const selections = this.selectedFields[subgroupKey];
-    if (!selections) {
-      return this.getCurrentFields().length; // All fields selected by default
-    }
-    return selections.length;
-  }
-
-  // Check if selection limit is reached
-  isSelectionLimitReached(): boolean {
-    return this.getSelectedFieldCount() >= this.maxSelectableFields;
-  }
-
-  // Reset field selection for current subgroup (clear all)
-  resetFieldSelection(event?: Event): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    this.selectedFields[subgroupKey] = [];
-    this.selectedFields = { ...this.selectedFields };
-    this.saveFieldSelections();
-    // Do NOT close the popup here; keep it open for further selection
-  }
-
-  // Select all fields
-  selectAllFields(event?: Event): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    const allFields = this.getCurrentFields();
-    this.selectedFields[subgroupKey] = [...allFields];
-    this.selectedFields = { ...this.selectedFields };
-    this.saveFieldSelections();
-  }
-
-  // Select default fields (first 10 or all if less than 10) - Renamed for clarity
-  selectDefaultFields(event?: Event): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    const allFields = this.getCurrentFields();
-    this.selectedFields[subgroupKey] = allFields.slice(0, Math.min(10, allFields.length));
-    this.selectedFields = { ...this.selectedFields };
-    this.saveFieldSelections();
-  }
-
-  // Get dynamic max selectable based on available fields
-  getDynamicMaxSelectable(): number {
-    const totalFields = this.getTotalAvailableFieldsCount();
-    return Math.min(this.maxSelectableFields, totalFields);
-  }
-
-  // Check if all fields are selected
-  areAllFieldsSelected(): boolean {
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    const selections = this.selectedFields[subgroupKey];
-    const totalFields = this.getCurrentFields().length;
-    
-    if (!selections) {
-      return true; // All fields selected by default
-    }
-    
-    return selections.length === totalFields;
-  }
-
-  // Check if no fields are selected
-  areNoFieldsSelected(): boolean {
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    const selections = this.selectedFields[subgroupKey];
-    
-    if (!selections) {
-      return false; // All fields selected by default
-    }
-    
-    return selections.length === 0;
-  }
-
-  // Navigation and section management methods
-  getSubgroups(): string[] {
-    return Object.keys(this.sections[this.currentSection].subgroups);
-  }
-
-  showSection(section: 'crime' | 'suspect' | 'notes'): void {
-    // Close field selector when changing sections
-    this.closeFieldSelector();
-    this.currentSection = section;
-    this.currentSubgroup = Object.keys(this.sections[this.currentSection].subgroups)[0];
-    this.showHelpFor = null;
-    this.triggerAutoSave();
-  }
-
-  // Enhanced document click handler
-  @HostListener('document:click', ['$event'])
-  handleDoc(event: Event): void {
-    this.showHelpFor = null;
-    // Only close field selector if click is outside the popup
-    const target = event.target as HTMLElement;
-    if (this.showFieldSelector && !target.closest('.field-selector-container')) {
-      this.closeFieldSelector();
-    }
-  }
-
-  // Handle section/subgroup changes to refresh field selector
-  setSubgroup(key: string): void {
-    // Close field selector when changing subgroups
-    this.closeFieldSelector();
-    this.currentSubgroup = key;
-    this.showHelpFor = null;
-    this.triggerAutoSave();
-  }
-
-  // Section and subgroup completion status
-  isSectionCompleted(section: string): boolean {
-    return this.completedSections.has(section);
-  }
-
-  isSubgroupCompleted(subgroup: string): boolean {
-    return this.completedSubgroups.has(subgroup);
-  }
-
-  // Section descriptions
-  getSectionDescription(section: string): string {
-    const descriptions = {
-      crime: 'Capture complete crime intelligence: timing, location, evidence, and operational context. Use dropdown values for consistency and upload supporting materials.',
-      suspect: 'Document comprehensive suspect profile: identity, physical characteristics, background, associations, and criminal history. Include recent photographs where available.',
-      notes: 'Maintain detailed investigative records: findings, evidence files, reference materials, and final recommendations with proper version control.'
-    };
-    return descriptions[section as keyof typeof descriptions] || '';
-  }
-
-  // Field handling and validation
-  onFieldChange(field: string): void {
-    this.validateField(field);
-    this.triggerAutoSave();
-  }
-
-  // Auto-save functionality
-  private triggerAutoSave(): void {
-    this.autoSave$.next();
-  }
-
-  private performAutoSave(): void {
-    this.isAutoSaving = true;
-    this.autoSaveStatus = 'Saving...';
-    
-    // Save to localStorage
-    this.saveFormData();
-    
-    // Simulate save delay
-    setTimeout(() => {
-      this.isAutoSaving = false;
-      this.autoSaveStatus = 'Saved';
-      
-      // Reset status after a moment
-      setTimeout(() => {
-        this.autoSaveStatus = 'Auto-save enabled';
-      }, 2000);
-    }, 500);
-  }
-
-  private saveFormData(): void {
-    const saveData = {
-      formData: this.formData,
-      completedFields: Array.from(this.completedFields),
-      completedSubgroups: Array.from(this.completedSubgroups),
-      completedSections: Array.from(this.completedSections),
-      currentSection: this.currentSection,
-      currentSubgroup: this.currentSubgroup
-    };
-    localStorage.setItem('pydetect-form-data', JSON.stringify(saveData));
-  }
-
-  private loadFormData(): void {
-    const savedData = localStorage.getItem('pydetect-form-data');
-    if (savedData) {
-      const data = JSON.parse(savedData);
-      this.formData = data.formData || {};
-      this.completedFields = new Set(data.completedFields || []);
-      this.completedSubgroups = new Set(data.completedSubgroups || []);
-      this.completedSections = new Set(data.completedSections || []);
-      this.currentSection = data.currentSection || 'crime';
-      this.currentSubgroup = data.currentSubgroup || 'Identification & Timing';
-    }
-  }
-
-  // Dropdown options and cascading logic
-  getOptions(field: string): string[] | undefined {
-    if (field === 'Country') return this.countries;
-    if (field === 'State') return (this.selectedValues['Country'] === 'India' || !this.selectedValues['Country']) ? this.indiaStates : [];
-    if (field === 'District') {
-      if (this.selectedValues['State'] === 'Tamil Nadu') {
-        return this.tamilNaduDistricts;
-      } else if (this.selectedValues['State']) {
-        return [];
-      } else {
-        return [];
-      }
-    }
-    return this.selectOptions[field];
-  }
-
-  onSelectChange(field: string, event: Event): void {
-    const value = (event.target as HTMLSelectElement).value;
-    this.selectedValues[field] = value;
-    this.formData[field] = value;
-    
-    // Clear dependent fields
-    if (field === 'Country') {
-      delete this.selectedValues['State'];
-      delete this.selectedValues['District'];
-      delete this.formData['State'];
-      delete this.formData['District'];
-    }
-    if (field === 'State') {
-      delete this.selectedValues['District'];
-      delete this.formData['District'];
-    }
-    
-    this.validateField(field);
-    this.triggerAutoSave();
-  }
-
-  // Field help functionality
-  toggleFieldInfo(field: string, ev: MouseEvent): void {
-    ev.stopPropagation();
-    this.showHelpFor = this.showHelpFor === field ? null : field;
-  }
-
-  closeFieldInfo(): void {
-    this.showHelpFor = null;
-  }
-
-  // File upload functionality
-  onFileChange(field: string, event: Event): void {
-    const input = event.target as HTMLInputElement;
-    const files = input.files ? Array.from(input.files) : [];
-    if (files.length) {
-      this.uploadedFiles[field] = (this.uploadedFiles[field] || []).concat(files);
-      this.validateField(field);
-      this.triggerAutoSave();
-    }
-  }
-
-  onDragOver(event: DragEvent): void {
-    event.preventDefault();
-    this.isDragOver = true;
-  }
-
-  onDragLeave(event: DragEvent): void {
-    event.preventDefault();
-    this.isDragOver = false;
-  }
-
-  onFileDrop(field: string, event: DragEvent): void {
-    event.preventDefault();
-    this.isDragOver = false;
-    
-    const files = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
-    if (files.length) {
-      this.uploadedFiles[field] = (this.uploadedFiles[field] || []).concat(files);
-      this.validateField(field);
-      this.triggerAutoSave();
-    }
-  }
-
-  removeFile(field: string, file: File): void {
-    if (this.uploadedFiles[field]) {
-      this.uploadedFiles[field] = this.uploadedFiles[field].filter(f => f !== file);
-      this.triggerAutoSave();
-    }
-  }
-
-  getAcceptedFileTypes(field: string): string {
-    return this.fileTypeConfig[field] || '*';
-  }
-
-  getFileIcon(filename: string): string {
-    const ext = filename.split('.').pop()?.toLowerCase();
-    switch (ext) {
-      case 'pdf': return 'fas fa-file-pdf';
-      case 'doc':
-      case 'docx': return 'fas fa-file-word';
-      case 'jpg':
-      case 'jpeg':
-      case 'png':
-      case 'gif': return 'fas fa-file-image';
-      case 'mp4':
-      case 'avi':
-      case 'mov': return 'fas fa-file-video';
-      default: return 'fas fa-file';
-    }
-  }
-
-  // Navigation helper methods for floating buttons
-  getPreviousSubgroup(): string {
-    const list = this.getSubgroups();
-    const currentIndex = list.indexOf(this.currentSubgroup);
-    return currentIndex > 0 ? list[currentIndex - 1] : '';
-  }
-
-  getNextSubgroup(): string {
-    const subgroups = this.getSubgroups();
-    const currentIndex = subgroups.indexOf(this.currentSubgroup);
-    if (currentIndex < subgroups.length - 1) {
-      return subgroups[currentIndex + 1];
-    }
-    // If last subgroup, return first subgroup of next section if exists
-    const sectionIndex = this.sectionKeys.indexOf(this.currentSection);
-    if (sectionIndex < this.sectionKeys.length - 1) {
-      const nextSection = this.sectionKeys[sectionIndex + 1];
-      return Object.keys(this.sections[nextSection].subgroups)[0];
-    }
-    return '';
-  }
-
-  isLastSubgroup(): boolean {
-    const list = this.getSubgroups();
-    return list.indexOf(this.currentSubgroup) === list.length - 1;
-  }
-
-  canNextSubgroup(): boolean {
-    // Enable Next on last subgroup if not notes section
-    if (this.isLastSubgroup()) {
-      return !(this.currentSection === 'notes' && this.currentSubgroup === 'Remark');
-    }
-    return true;
-  }
-
-  nextSubgroup(): void {
-    const subgroups = this.getSubgroups();
-    const currentIndex = subgroups.indexOf(this.currentSubgroup);
-    // If not last subgroup, go to next subgroup
-    if (currentIndex < subgroups.length - 1) {
-      this.setSubgroup(subgroups[currentIndex + 1]);
-      return;
-    }
-    // If last subgroup, go to first subgroup of next section (if exists)
-    const sectionIndex = this.sectionKeys.indexOf(this.currentSection);
-    if (sectionIndex < this.sectionKeys.length - 1) {
-      const nextSection = this.sectionKeys[sectionIndex + 1];
-      this.currentSection = nextSection;
-      this.currentSubgroup = Object.keys(this.sections[nextSection].subgroups)[0];
-      this.showHelpFor = null;
-      this.triggerAutoSave();
-    }
-  }
-
-  prevSubgroup(): void {
-    const subgroups = this.getSubgroups();
-    const currentIndex = subgroups.indexOf(this.currentSubgroup);
-    if (currentIndex > 0) {
-      this.setSubgroup(subgroups[currentIndex - 1]);
-      return;
-    }
-    // If first subgroup, go to last subgroup of previous section (if exists)
-    const sectionIndex = this.sectionKeys.indexOf(this.currentSection);
-    if (sectionIndex > 0) {
-      const prevSection = this.sectionKeys[sectionIndex - 1];
-      const prevSubgroups = Object.keys(this.sections[prevSection].subgroups);
-      this.currentSection = prevSection;
-      this.currentSubgroup = prevSubgroups[prevSubgroups.length - 1];
-      this.showHelpFor = null;
-      this.triggerAutoSave();
-    }
-  }
-
-  submitCurrentSection(): void {
-    // Perform final validation
-    const currentFields = this.getCurrentFields();
-    const requiredFields = currentFields.filter(f => this.isFieldRequired(f));
-    const missingFields = requiredFields.filter(f => !this.completedFields.has(f));
-
-    if (missingFields.length > 0) {
-      alert(`Please complete the following required fields: ${missingFields.join(', ')}`);
-      return;
-    }
-
-    this.performAutoSave();
-
-    // Map flat formData to nested structure expected by addOrUpdateFromInfoForm
-    const crime = {
-      caseId: this.formData['Case ID'] || '',
-      dateTime: this.formData['Date & Time (Entry)'] || '',
-      crimeType: this.formData['Crime Type'] || '',
-      location: this.formData['Location'] || '',
-      victimName: this.formData['Victim Name'] || '',
-      caseCategory: this.formData['Case Category'] || '',
-      reportedBy: this.formData['Reported By'] || '',
-      briefDescription: this.formData['Brief Description'] || '',
-      'FIR / Ref #': this.formData['FIR / Ref #'] || '',
-      'Occurred From': this.formData['Occurred From'] || '',
-      'Occurred To': this.formData['Occurred To'] || '',
-      'Jurisdiction / PS': this.formData['Jurisdiction / PS'] || '',
-      'Scene Type': this.formData['Scene Type'] || ''
-    };
-    const suspect = {
-      fullName: this.formData['Suspect Name'] || '',
-      age: this.formData['Age'] || '',
-      gender: this.formData['Gender'] || '',
-      address: this.formData['Address'] || '',
-      alias: this.formData['Alias / Nickname'] || ''
-    };
-    const notes = {
-      status: this.formData['Case Status'] || this.formData['Status'] || 'Open',
-      officerInCharge: this.formData['Investigating Officer'] || '',
-      initialFindings: this.formData['Initial Findings'] || '',
-      verifiedBy: this.formData['Verified By'] || ''
-    };
-    const legal = {
-      witnessStatements: this.formData['Witness Statements'] || '',
-      confessions: this.formData['Confessions'] || '',
-      evidence: this.uploadedFiles['Evidence Files'] || []
-    };
-
-    this.caseStore.addOrUpdateFromInfoForm({ crime, suspect, notes, legal });
-    // Show popup first
-    this.showSubmitPopup = true;
-  }
-
-  onSubmitPopupClose(): void {
-    this.showSubmitPopup = false;
-    this.router.navigate(['/record'], { state: { formData: this.formData } });
-  }
-
-  // Keyboard navigation
-  @HostListener('document:keydown', ['$event'])
-  handleKeydown(event: KeyboardEvent): void {
-    // Keyboard navigation
-    if (event.ctrlKey && event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.nextSubgroup();
-    } else if (event.ctrlKey && event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.prevSubgroup();
-    } else if (event.ctrlKey && event.key === 's') {
-      event.preventDefault();
-      this.performAutoSave();
-    } else if (event.key === 'Escape') {
-      this.closeFieldInfo();
-    }
-  }
-
-  // Toggle field selector visibility
-  toggleFieldSelector(event?: Event): void {
-    if (event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
-    this.showFieldSelector = this.showFieldSelector === subgroupKey ? null : subgroupKey;
-  }
-
-  // Close field selector
-  closeFieldSelector(): void {
-    this.showFieldSelector = null;
-  }
-
-  // Save field selections to localStorage
-  private saveFieldSelections(): void {
-    try {
-      localStorage.setItem('pydetect-field-selections', JSON.stringify(this.selectedFields));
-    } catch (error) {
-      console.warn('Could not save field selections to localStorage:', error);
-    }
-  }
-
-  // Load field selections from localStorage
-  private loadFieldSelections(): void {
-    try {
-      const savedSelections = localStorage.getItem('pydetect-field-selections');
-      if (savedSelections) {
-        this.selectedFields = JSON.parse(savedSelections);
-      }
-    } catch (error) {
-      console.warn('Could not load field selections from localStorage:', error);
-      this.selectedFields = {};
-    }
-  }
-
-  // Track by function for ngFor optimization
-  trackByField(index: number, field: string): string {
-    return field;
-  }
-
-  toggleRecording() {
-    this.isRecording = !this.isRecording;
-    // Add actual recording logic here if needed
-    // For now, just toggles the state
-  }
-
-  goToRecords(): void {
-    this.router.navigate(['/record']);
-  }
+ showRemarkModal: boolean = false;
+ showSubmitPopup: boolean = false;
+ showMicPopup: boolean = false;
+ isRecording: boolean = false;
+ constructor(private router: Router, private caseStore: CaseStoreService) {}
+ // Core state
+ currentSection: 'crime' | 'suspect' | 'notes' = 'crime';
+ currentSubgroup: string = 'Identification & Timing';
+ showHelpFor: string | null = null;
+ 
+ // UI state
+ isAutoSaving: boolean = false;
+ autoSaveStatus: string = 'Saved';
+ isDragOver: boolean = false;
+ showViewRecordsTooltip: boolean = false;
+ 
+ // Card state
+ isCardMinimized = {
+ primary: false,
+ secondary: false,
+ tertiary: false
+ };
+ 
+ // Form data and validation
+ formData: Record<string, any> = {};
+ fieldValidation: Record<string, { hasError: boolean, isValid: boolean, message: string }> = {};
+ completedFields: Set<string> = new Set();
+ completedSubgroups: Set<string> = new Set();
+ completedSections: Set<string> = new Set();
+ 
+ // Subjects for reactive programming
+ private destroy$ = new Subject<void>();
+ private autoSave$ = new Subject<void>();
+ 
+ // Constants - Reverted to original values except for Identification & Timing
+ readonly sectionKeys: ('crime' | 'suspect' | 'notes')[] = ['crime', 'suspect', 'notes'];
+ readonly maxFieldsPerCard =8; // Reverted to original
+ readonly maxFieldsPerSecondaryCard =8; // Reverted to original
+ readonly maxFieldsPerCardIdentificationTiming =6; // Special for Identification & Timing
+ readonly maxFieldsPerSecondaryCardIdentificationTiming =6; // Special for Identification & Timing
+ 
+ @ViewChild('formCard1') formCard1!: ElementRef<HTMLDivElement>;
+ @ViewChild('formCard2') formCard2!: ElementRef<HTMLDivElement>;
+ @ViewChild('formCard3') formCard3!: ElementRef<HTMLDivElement>;
+
+ // Enhanced field definitions with validation rules
+ readonly requiredFields = new Set<string>([
+ 'Case ID', 'Crime Type', 'Date & Time (Entry)', 'Location', 'Suspect Name', 'Age', 'Gender',
+ 'FIR / Ref #', 'Case Category', 'Occurred From', 'Country', 'State', 'District',
+ 'Jurisdiction / PS', 'Scene Type', 'Reported By', 'Case Status', 'Investigating Officer'
+ ]);
+ 
+ readonly compactFields = new Set<string>([
+ 'Age', 'Gender', 'Height (cm)', 'Weight (kg)', 'Build', 'Hair Color', 'Eye Color',
+ 'Number of Victims', 'Witness Count', 'Prior Arrests', 'arrest Count', 'Case Priority',
+ 'Photos / Video?', 'CCTV Present?', 'Arrest Made', 'risk Level', 'Confidentiality'
+ ]);
+ 
+ readonly numericFields = new Set<string>([
+ 'Age', 'Height (cm)', 'Weight (kg)', 'Number of Victims', 'Witness Count', 'Prior Arrests', 'arrest Count'
+ ]);
+
+ // File type configurations
+ readonly fileTypeConfig: Record<string, string> = {
+ 'Photo Upload': 'image/*',
+ 'Evidence Photos': 'image/*',
+ 'Evidence Videos': 'video/*',
+ 'Evidence Documents': '.pdf,.doc,.docx,.txt',
+ 'Evidence Files': '*',
+ 'Upload Evidence Files': '*',
+ 'Digital Evidence': '*'
+ };
+
+ // Track selected values (cascading dropdown logic)
+ selectedValues: Record<string, string> = {};
+
+ // Date field groups
+ dateTimeFields = new Set<string>(['Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered']);
+ dateFields = new Set<string>(['Follow-up Date', 'Next Hearing Date']);
+
+ // Country/State/District data
+ countries = ['India'];
+ indiaStates = [
+ 'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar', 'Chhattisgarh', 'Goa', 'Gujarat', 
+ 'Haryana', 'Himachal Pradesh', 'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh', 
+ 'Maharashtra', 'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab', 
+ 'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura', 'Uttar Pradesh', 
+ 'Uttarakhand', 'West Bengal'
+ ];
+ 
+ tamilNaduDistricts = [
+ 'Ariyalur', 'Chengalpattu', 'Chennai', 'Coimbatore', 'Cuddalore', 'Dharmapuri', 'Dindigul', 
+ 'Erode', 'Kallakurichi', 'Kanchipuram', 'Kanyakumari', 'Karur', 'Krishnagiri', 'Madurai', 
+ 'Mayiladuthurai', 'Nagapattinam', 'Namakkal', 'Nilgiris', 'Perambalur', 'Pudukkottai', 
+ 'Ramanathapuram', 'Ranipet', 'Salem', 'Sivaganga', 'Tenkasi', 'Thanjavur', 'Theni', 
+ 'Thoothukudi (Tuticorin)', 'Tiruchirappalli', 'Tirunelveli', 'Tirupathur', 'Tiruppur', 
+ 'Tiruvallur', 'Tiruvannamalai', 'Tiruvarur', 'Vellore', 'Viluppuram', 'Virudhunagar'
+ ];
+
+ // Enhanced select options - Added missing field options
+ selectOptions: Record<string, string[]> = {
+ 'Crime Type': ['Theft', 'Assault', 'Homicide', 'Cybercrime', 'Fraud', 'Narcotics', 'Arson', 'Kidnapping', 'General', 'Other'],
+ 'Case Category': ['Property', 'Violent', 'Cyber', 'Financial', 'Public Order', 'Narcotics', 'Organized', 'General', 'Other'],
+ 'Number of Victims': ['0', '1', '2', '3', '4', '5+'],
+ 'Jurisdiction / PS': ['Central PS', 'East Division', 'West Division', 'Rural Unit', 'Cyber Cell', 'General'],
+ 'Scene Type': ['Residential', 'Commercial', 'Public Space', 'Vehicle', 'Rural', 'Online', 'General', 'Other'],
+ 'Witness Count': ['0', '1', '2', '3', '4', '5+'],
+ 'Victim Summary': ['Stable', 'Injured', 'Critical', 'Deceased', 'Unknown'],
+ 'Suspected Offender Known?': ['Yes', 'No', 'Unknown'],
+ 'Offence Category': ['Minor', 'Serious', 'Organized', 'Cyber', 'Financial', 'Violent', 'General', 'Other'],
+ 'Suspected Motive': ['Financial Gain', 'Revenge', 'Jealousy', 'Ideological', 'Political', 'Personal Dispute', 'Unknown', 'General', 'Other'],
+ 'Confirmed Motive': ['Financial Gain', 'Revenge', 'Jealousy', 'Ideological', 'Political', 'Personal Dispute', 'Unknown', 'General', 'Other'],
+ 'Weapon Involved': ['None', 'Knife', 'Firearm', 'Blunt Object', 'Explosive', 'Chemical', 'Other', 'Unknown', 'General'],
+ 'Property Loss / Damage': ['None', 'Minor', 'Moderate', 'Major', 'Severe', 'Unknown'],
+ 'Photos / Video?': ['Yes', 'No'],
+ 'CCTV Present?': ['Yes', 'No'],
+ 'Scene Condition': ['Intact', 'Disturbed', 'Contaminated', 'Secured', 'Compromised', 'General'],
+ 'Chain of Custody?': ['Initiated', 'Ongoing', 'Complete', 'Not Started'],
+ 'Forensic Tests Required': ['None', 'DNA', 'Fingerprints', 'Ballistics', 'Toxicology', 'Digital Forensics', 'Trace', 'General', 'Other'],
+ 'Arrest Made': ['Yes', 'No'],
+ 'riskLevel': ['Low', 'Medium', 'High', 'Critical'],
+ 'Confidentiality': ['Internal', 'Restricted', 'Sensitive', 'Sealed'],
+ 'Initial Actions Taken': ['Scene Secured', 'Medical Aid', 'Evidence Logged', 'Witness Statements', 'Suspect Detained', 'General', 'Other'],
+ 'Case Status': ['Open', 'Active', 'Suspended', 'Closed', 'Archived'],
+ 'Case Priority': ['Low', 'Normal', 'High', 'Urgent', 'Critical'],
+ 'Gender': ['Male', 'Female', 'Other'],
+ 'Nationality': ['India'],
+ 'Languages': ['English', 'Hindi', 'Tamil', 'Telugu', 'Kannada', 'Malayalam', 'Bengali', 'Marathi', 'Gujarati', 'Other'],
+ 'Build': ['Slim', 'Average', 'Athletic', 'Heavy', 'Obese'],
+ 'Hair Color': ['Black', 'Brown', 'Blonde', 'Red', 'Grey', 'White', 'Dyed / Other', 'Unknown'],
+ 'Eye Color': ['Brown', 'Blue', 'Green', 'Hazel', 'Grey', 'Black', 'Unknown'],
+ 'Employment': ['Employed', 'Unemployed', 'Self-Employed', 'Student', 'Retired', 'Unknown'],
+ 'Education': ['None', 'Primary', 'Secondary', 'Diploma', 'Bachelor', 'Master', 'Doctorate', 'Other'],
+ 'Marital Status': ['Single', 'Married', 'Divorced', 'Separated', 'Widowed', 'Unknown'],
+ 'Known Habits': ['Smoking', 'Alcohol', 'Substance Use', 'Gambling', 'None', 'Unknown'],
+ 'Occupation': ['Unskilled', 'Skilled Labour', 'Professional', 'Executive', 'Military', 'Law Enforcement', 'IT', 'Healthcare', 'Education', 'Finance', 'Other'],
+ 'Known Financial Details': ['None', 'Low Income', 'Moderate Income', 'High Income', 'Wealthy', 'Unknown'],
+ 'Gang Affiliation': ['None', 'Local', 'Regional', 'International', 'Unknown'],
+ 'Criminal History': ['None', 'Minor', 'Multiple', 'Serious'],
+ 'Prior Arrests': ['0', '1', '2', '3', '4', '5+'],
+ 'Probation/Parole Status': ['None', 'On Probation', 'On Parole', 'Completed', 'Unknown'],
+ 'Status': ['Draft', 'In Progress', 'Completed', 'Archived'],
+ // Additional field options for complete coverage
+ 'arrestCount': ['0', '1', '2', '3', '4', '5+'],
+ 'Linked Cases': [], // Will be populated dynamically with existing case IDs
+ 'Suspect Link': [], // Will be populated dynamically with existing suspect IDs
+ 'Government ID': ['Aadhaar Card', 'PAN Card', 'Driving License', 'Passport', 'Voter ID', 'Other'],
+ 'Family Connections': ['Spouse', 'Parent', 'Child', 'Sibling', 'Relative', 'Friend', 'Other'],
+ 'Social Media Handles': [], // Text input field for multiple handles
+ 'Version History / Updates': [] // Text area for version tracking
+ };
+
+ // File upload fields
+ fileFields = new Set<string>([
+ 'Photo Upload', 'Evidence Photos', 'Evidence Videos', 'Evidence Documents', 
+ 'Evidence Files', 'Upload Evidence Files', 'Digital Evidence'
+ ]);
+
+ uploadedFiles: Record<string, File[]> = {};
+
+ // Section icons
+ sectionIcons = {
+ crime: 'fas fa-gavel',
+ suspect: 'fas fa-user-secret',
+ notes: 'fas fa-sticky-note'
+ };
+
+ 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', 'Physical Evidence', 'Evidence Storage Reference', 'Photos / Video?', 'CCTV Present?', 'CCTV Sources / IDs', 'Forensic Tests Required', 'Chain of Custody?', 'Scene Condition', 'Digital Evidence'], 
+ '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)', 'Tattoo Details', 'Hair Color', 'Scar Details', 'Distinguishing Marks', 'Build', 'Eye Color', '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']
+ } 
+ }
+ };
+
+ // Complete field descriptions
+ fieldDescriptions: Record<string, string> = { 
+ // Crime: Identification & Timing
+ 'Case ID': 'Unique internal tracking identifier for this case.',
+ 'FIR / Ref #': 'Official First Information Report or reference number.',
+ 'Crime Type': 'Primary legal / investigative classification of the offence.',
+ 'Case Category': 'Broader grouping used for analytics and reporting.',
+ 'Date & Time (Entry)': 'Timestamp when the case was first registered in the system.',
+ 'Occurred From': 'Start of the known / suspected offence time window.',
+ 'Occurred To': 'End of the known / suspected offence time window.',
+ 'Time Reported': 'When it was first reported to authorities.',
+ 'Time Discovered': 'When the incident was first discovered (may differ from reported).',
+ 'Country': 'Country where the offence occurred.',
+ 'State': 'State / province of occurrence.',
+ 'District': 'Administrative district of occurrence (Tamil Nadu districts supported).',
+ 'Number of Victims': 'Total count of direct victims involved.',
+ 'Brief Description': 'Short narrative summary for quick reference.',
+
+ // Crime: Location & People
+ 'Location': 'Exact address / geo description of the scene.',
+ 'Jurisdiction / PS': 'Police Station or jurisdiction handling the investigation.',
+ 'Scene Type': 'Type of environment where the offence occurred.',
+ 'Reported By': 'Name of the reporting individual / entity.',
+ 'Reported Contact': 'Contact details for the reporting party.',
+ 'Witness Count': 'Number of identified witnesses so far.',
+ 'Victim Name': 'Primary victim name (or placeholder if protected).',
+ 'Victim Contact': 'Phone / email / other contact channel for victim.',
+ 'Victim Summary': 'Short summary of victim condition or status.',
+ 'Suspected Offender Known?': 'Whether victim / witnesses know the offender.',
+ 'Suspect Link': 'Internal reference to related suspect record.',
+
+ // Crime: Offence & Context
+ 'Legal Sections / Charges': 'Applicable statutory sections / penal codes.',
+ 'Offence Category': 'Higher level grouping (e.g., violent, cyber).',
+ 'Offence Description': 'Detailed narrative of what occurred.',
+ 'Suspected Motive': 'Preliminary perceived motive (subject to change).',
+ 'Confirmed Motive': 'Validated motive after evidence review.',
+ 'Weapon Involved': 'Weapon(s) used or suspected; choose Unknown if unclear.',
+ 'Property Loss / Damage': 'Summary / valuation of property loss or damage.',
+
+ // Crime: Evidence & Scene
+ 'Evidence Collected': 'General list of all evidentiary items gathered.',
+ 'Forensic Tests Required': 'Pending or requested forensic examinations.',
+ 'Scene Condition': 'Condition of scene upon first secure entry.',
+ 'Photos / Video?': 'Whether any media was captured.',
+ 'CCTV Present?': 'If relevant CCTV sources exist.',
+ 'CCTV Sources / IDs': 'Identifiers / locations for each CCTV source.',
+ 'Physical Evidence (list)': 'Individual tangible exhibits (bagged / tagged).',
+ 'Chain of Custody?': 'Status of formal evidence transfer logging.',
+ 'Digital Evidence': 'Electronic sources: phones, email dumps, logs, socials.',
+ 'Evidence Storage Reference': 'Locker / repository / digital vault reference ID.',
+
+ // Crime: Operational Notes
+ 'Investigating Officer': 'Lead officer responsible for case progress.',
+ 'Duty Person': 'Officer / staff who received the report.',
+ 'Supervising Officer': 'Oversight / escalation point for the case.',
+ 'Patrol Notes': 'First responder observations / scene notes.',
+ 'Arrest Made': 'Indicates whether an arrest has occurred.',
+ 'Arrest Location': 'Location at which arrest was executed.',
+ 'Initial Actions Taken': 'Immediate remedial or containment actions.',
+ 'riskLevel': 'Risk classification influencing priority.',
+ 'Confidentiality': 'Access / visibility level of case records.',
+
+ // Crime: Status & Linkage
+ 'Biometric / Forensic IDs': 'External forensic system identifiers (AFIS, DNA DB).',
+ 'DNA Ref ID': 'Laboratory DNA reference identifier.',
+ 'Fingerprint ID': 'Fingerprint database reference.',
+ 'Case Status': 'Lifecycle status (Open / Active / Closed etc.).',
+ 'Linked Cases': 'Related or associated case identifiers.',
+ 'arrestCount': 'Total arrests associated with this case.',
+ 'Case Priority': 'Operational prioritisation level.',
+ 'Follow-up Date': 'Next scheduled investigative review date.',
+ 'Court Case ID': 'Judicial / docket identifier once filed.',
+ 'Next Hearing Date': 'Date of next scheduled court proceeding.',
+ 'Final Summary': 'Closure narrative entered at completion.',
+
+ // Suspect: Identity
+ 'Suspect ID': 'Internal unique suspect identifier.',
+ 'Suspect Name': 'Full legal or recorded name.',
+ 'Alias / Nickname': 'Commonly used alternative names.',
+ 'Age': 'Approximate or confirmed age.',
+ 'Gender': 'Recorded gender descriptor.',
+ 'Nationality': 'Country of citizenship.',
+ 'Nationality ID / Passport Number': 'Official national ID / passport number.',
+ 'Languages': 'Languages spoken or understood by suspect.',
+ 'Address': 'Primary last known address.',
+ 'Known Aliases': 'Additional identity variations.',
+ 'Government ID': 'Government issued identification (license / ID card).',
+
+ // Suspect: Physical Description
+ 'Height (cm)': 'Height in centimetres measured or estimated.',
+ 'Weight (kg)': 'Weight in kilograms measured or estimated.',
+ 'Build': 'General body build classification.',
+ 'Hair Color': 'Observed or recorded hair colour.',
+ 'Eye Color': 'Observed or recorded eye colour.',
+ 'Distinguishing Marks': 'Unique visible physical markers.',
+ 'Tattoo Details': 'Location and description of tattoos.',
+ 'Scar Details': 'Location and description of scars.',
+ 'Photo Upload': 'Most recent or relevant facial photograph.',
+
+ // Suspect: Background
+ 'Employment': 'Current employment status.',
+ 'Education': 'Highest completed education level.',
+ 'Occupation': 'Primary occupation / role.',
+ 'Company': 'Employer / organisation name.',
+ 'Workplace Address': 'Physical address of workplace.',
+ 'Marital Status': 'Current marital / relationship status.',
+ 'Known Habits': 'Behavioural patterns (substances, gambling, etc.).',
+ 'Known Financial Details': 'Financial profile relevant to investigation.',
+
+ // Suspect: Known Associates
+ 'Associate Names': 'Key associate individuals linked to suspect.',
+ 'Gang Affiliation': 'Known gang or group membership.',
+ 'Family Connections': 'Notable family relational links.',
+ 'Social Media Handles': 'Identifiers used on social platforms.',
+
+ // Suspect: Prior Records
+ 'Criminal History': 'Summary of prior criminal involvement.',
+ 'Prior Arrests': 'Number / list of previous arrests.',
+ 'Probation/Parole Status': 'Current supervision / release status.',
+
+ // Notes: Investigation Notes
+ 'Initial Findings': 'Early observations at investigation start.',
+ 'Detailed Notes': 'Progressive narrative & analytical details.',
+ 'Status': 'Progress state category for notes.',
+ 'Version History / Updates': 'Chronological changes & authorship log.',
+
+ // Notes: Evidence Files
+ 'Evidence Photos': 'Photographic evidence references.',
+ 'Evidence Videos': 'Video evidence references.',
+ 'Evidence Documents': 'Document / PDF evidence references.',
+
+ // Notes: Links and Recommendation
+ 'Links to Evidence': 'External or internal reference links to sources.',
+ 'Final Recommendations': 'Closing recommendations / actions summary.'
+ };
+
+ subgroupIcons: any = {
+ 'Identification & Timing': 'fas fa-clock',
+ 'Location & People': 'fas fa-map-marker-alt',
+ 'Offence & Context': 'fas fa-gavel',
+ 'Evidence & Scene': 'fas fa-search',
+ 'Operational Notes': 'fas fa-clipboard',
+ 'Status & Linkage': 'fas fa-link',
+ 'Identity': 'fas fa-id-card',
+ 'Physical Description': 'fas fa-user',
+ 'Background': 'fas fa-user-graduate',
+ 'Known Associates': 'fas fa-users',
+ 'Prior Records': 'fas fa-file-alt',
+ 'Investigation Notes': 'fas fa-sticky-note',
+ 'Evidence Files': 'fas fa-folder',
+ 'Links and Recommendation': 'fas fa-link',
+ 'Recommendations': 'fas fa-thumbs-up'
+ };
+
+ ngOnInit(): void {
+ // Set up autosave
+ this.autoSave$.pipe(
+ debounceTime(2000),
+ takeUntil(this.destroy$)
+ ).subscribe(() => {
+ this.performAutoSave();
+ });
+ 
+ // Do NOT auto-load saved form data on page load/refresh to keep the form empty by default.
+ // Load only field selections (UI prefs)
+ this.loadFieldSelections();
+ 
+ // If navigation state contains prefillFormData (when editing a case), merge it into formData.
+ try {
+ const navState = (history && (history as any).state) || null;
+ const statePrefill = navState && navState.prefillFormData ? navState.prefillFormData : null;
+ if (statePrefill && typeof statePrefill === 'object') {
+ // Merge saved values into current formData
+ this.formData = { ...(this.formData || {}), ...statePrefill };
+ // Restore cascading dropdown selections if present
+ if (this.formData['Country']) this.selectedValues['Country'] = this.formData['Country'];
+ if (this.formData['State']) this.selectedValues['State'] = this.formData['State'];
+ if (this.formData['District']) this.selectedValues['District'] = this.formData['District'];
+ // Recompute completion status
+ this.updateCompletionStatus();
+ } else {
+ // Ensure form is empty when arriving without prefill (fresh/new case or refresh)
+ this.formData = {};
+ this.completedFields.clear();
+ this.completedSubgroups.clear();
+ this.completedSections.clear();
+ }
+ } catch (e) {
+ // ignore
+ }
+ }
+
+ ngAfterViewInit(): void {
+ // No special scroll handling needed anymore
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+
+ // Progress Calculation
+ get progressPercentage(): number {
+ const totalFields = this.getAllFields().length;
+ const completedFields = this.completedFields.size;
+ return totalFields >0 ? Math.round((completedFields / totalFields) *100) :0;
+ }
+
+ private getAllFields(): string[] {
+ let allFields: string[] = [];
+ for (const section of this.sectionKeys) {
+ for (const subgroup of Object.keys(this.sections[section].subgroups)) {
+ allFields = allFields.concat(this.sections[section].subgroups[subgroup]);
+ }
+ }
+ return allFields;
+ }
+
+ // Helper method to check if we're in Identification & Timing
+ private isIdentificationAndTimingPage(): boolean {
+ return this.currentSubgroup === 'Identification & Timing';
+ }
+
+ // Helper method to check if we're in Location & People
+ private isLocationAndPeoplePage(): boolean {
+ return this.currentSubgroup === 'Location & People';
+ }
+
+ // Helper method to check if we need compact layout (applies to all pages now)
+ private needsCompactLayout(): boolean {
+ return true; // Apply compact layout to all pages to prevent main page scroll
+ }
+
+ // Card Management - Updated for single card layout across ALL pages
+ showSecondaryCard(): boolean {
+ return false; // No secondary card for any page - single card layout for all
+ }
+
+ showTertiaryCard(): boolean {
+ return false; // No tertiary card for any page - single card layout for all
+ }
+
+ getPrimaryFields(): string[] {
+ // Return selected fields for display instead of all fields
+ return this.getSelectedFieldsForDisplay();
+ }
+
+ getSecondaryFields(): string[] {
+ // Return empty array for single card layout across all pages
+ return [];
+ }
+
+ getTertiaryFields(): string[] {
+ // Return empty array for single card layout across all pages
+ return [];
+ }
+ 
+ private getCurrentFields(): string[] {
+ return this.sections[this.currentSection].subgroups[this.currentSubgroup] || [];
+ }
+
+ toggleCardMinimize(card: 'primary' | 'secondary' | 'tertiary'): void {
+ this.isCardMinimized[card] = !this.isCardMinimized[card];
+ }
+
+ // Field Management
+ isFieldRequired(field: string): boolean {
+ return this.requiredFields.has(field);
+ }
+
+ isCompactField(field: string): boolean {
+ return this.compactFields.has(field);
+ }
+
+ getInputType(field: string): string {
+ if (this.numericFields.has(field)) return 'number';
+ if (this.dateTimeFields.has(field)) return 'datetime-local';
+ if (this.dateFields.has(field)) return 'date';
+ if (field.toLowerCase().includes('email')) return 'email';
+ if (field.toLowerCase().includes('phone') || field.toLowerCase().includes('contact')) return 'tel';
+ if (field.toLowerCase().includes('url') || field.toLowerCase().includes('link')) return 'url';
+ if (field.toLowerCase().includes('description')) return 'textarea';
+ return 'text';
+ }
+
+ getFieldPlaceholder(field: string): string {
+ if (field === 'Age') return 'Enter age (18-99)';
+ if (field === 'Height (cm)') return 'Height in cm';
+ if (field === 'Weight (kg)') return 'Weight in kg';
+ if (this.dateTimeFields.has(field)) return 'dd-mm-yyyy --:--';
+ if (this.dateFields.has(field)) return 'dd-mm-yyyy';
+ if (field.toLowerCase().includes('email')) return 'Enter email address';
+ if (field.toLowerCase().includes('phone')) return 'Enter phone number';
+ if (field.toLowerCase().includes('description')) return 'Enter detailed description...';
+ return `Enter ${field.toLowerCase()}`;
+ }
+
+ getMaxLength(field: string): number {
+ if (field === 'Age') return 2;
+ if (field === 'Gender') return 10;
+ if (field === 'Height (cm)') return 3;
+ if (field === 'Weight (kg)') return 3;
+ if (this.compactFields.has(field)) return 20;
+ return 500;
+ }
+
+ // Validation
+ validateField(field: string): void {
+ const value = this.formData[field];
+ let hasError = false;
+ let isValid = false;
+ let message = '';
+
+ if (this.isFieldRequired(field) && (!value || value.toString().trim() === '')) {
+ hasError = true;
+ message = `${field} is required`;
+ } else if (value && value.toString().trim() !== '') {
+ // Field-specific validation
+ if (field === 'Age') {
+ const age = parseInt(value);
+ if (isNaN(age) || age <1 || age >120) {
+ hasError = true;
+ message = 'Age must be a valid number between1 and120';
+ } else {
+ isValid = true;
+ }
+ } else if (field === 'Email') {
+ // Basic email pattern; improve with regex if needed
+ const emailPattern = /\S+@\S+\.\S+/;
+ isValid = emailPattern.test(value);
+ if (!isValid) {
+ hasError = true;
+ message = 'Invalid email address format';
+ }
+ } else {
+ // Generic validation for other fields (extend as needed)
+ isValid = true;
+ }
+ }
+
+ // Update field validation state
+ this.fieldValidation[field] = { hasError, isValid, message };
+
+ // Update overall form completion status
+ this.updateCompletionStatus();
+ }
+
+ private updateCompletionStatus(): void {
+ this.completedFields.clear();
+
+ for (const field of Object.keys(this.formData)) {
+ if (this.formData[field] !== null && this.formData[field] !== undefined && this.formData[field] !== '') {
+ this.completedFields.add(field);
+ }
+ }
+
+ // Update completed subgroups and sections
+ this.updateCompletedGroupsAndSections();
+ }
+
+ private updateCompletedGroupsAndSections(): void {
+ this.completedSubgroups.clear();
+ this.completedSections.clear();
+
+ for (const section of this.sectionKeys) {
+ const subgroups = Object.keys(this.sections[section].subgroups);
+ for (const subgroup of subgroups) {
+ const fields = this.sections[section].subgroups[subgroup];
+ const allFieldsCompleted = fields.every((field: string) => this.completedFields.has(field));
+ 
+ if (allFieldsCompleted) {
+ this.completedSubgroups.add(subgroup);
+ }
+ }
+
+ if (this.completedSubgroups.size === subgroups.length) {
+ this.completedSections.add(section);
+ }
+ }
+ }
+
+ // Field selection functionality - Updated to allow all fields by default
+ selectedFields: Record<string, string[]> = {}; // Store selected fields per subgroup
+ showFieldSelector: string | null = null; // Track which field selector is open
+ readonly maxSelectableFields =50; // Increased limit to allow more fields
+
+ // Get all available fields for current subgroup
+ getAvailableFields(): string[] {
+ return this.getCurrentFields();
+ }
+
+ // Get total available fields count dynamically
+ getTotalAvailableFieldsCount(): number {
+ return this.getAvailableFields().length;
+ }
+
+ // Get currently selected fields for display (default to ALL fields if none selected)
+ getSelectedFieldsForDisplay(): string[] {
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ if (this.selectedFields[subgroupKey] && this.selectedFields[subgroupKey].length >=0) {
+ return this.selectedFields[subgroupKey];
+ }
+ // Default to ALL fields if no selection made
+ return this.getCurrentFields();
+ }
+
+ // Toggle field selection with enhanced debugging
+ toggleFieldSelection(field: string, event?: Event): void {
+ if (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
+ console.log('Toggling field selection for:', field);
+
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ if (!this.selectedFields[subgroupKey]) {
+ // Initialize with all fields selected by default
+ this.selectedFields[subgroupKey] = [...this.getCurrentFields()];
+ }
+
+ const currentSelection = this.selectedFields[subgroupKey];
+ const fieldIndex = currentSelection.indexOf(field);
+
+ console.log('Current selection:', currentSelection);
+ console.log('Field index:', fieldIndex);
+
+ if (fieldIndex > -1) {
+ // Remove field if already selected
+ currentSelection.splice(fieldIndex,1);
+ console.log('Removed field:', field);
+ } else {
+ // Add field if not selected and under limit
+ if (currentSelection.length < this.maxSelectableFields) {
+ currentSelection.push(field);
+ console.log('Added field:', field);
+ } else {
+ console.log('Selection limit reached, cannot add:', field);
+ }
+ }
+
+ // Trigger change detection
+ this.selectedFields = { ...this.selectedFields };
+ this.saveFieldSelections();
+ // Do NOT close the popup here; just update selection and save
+ }
+
+ // Check if field is currently selected
+ isFieldSelected(field: string): boolean {
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ const selections = this.selectedFields[subgroupKey];
+ if (!selections) {
+ // If no selections made, all fields are selected by default
+ return true;
+ }
+ return selections.includes(field);
+ }
+
+ // Get count of selected fields
+ getSelectedFieldCount(): number {
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ const selections = this.selectedFields[subgroupKey];
+ if (!selections) {
+ return this.getCurrentFields().length; // All fields selected by default
+ }
+ return selections.length;
+ }
+
+ // Check if selection limit is reached
+ isSelectionLimitReached(): boolean {
+ return this.getSelectedFieldCount() >= this.maxSelectableFields;
+ }
+
+ // Reset field selection for current subgroup (clear all)
+ resetFieldSelection(event?: Event): void {
+ if (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ this.selectedFields[subgroupKey] = [];
+ this.selectedFields = { ...this.selectedFields };
+ this.saveFieldSelections();
+ // Do NOT close the popup here; keep it open for further selection
+ }
+
+ // Select all fields
+ selectAllFields(event?: Event): void {
+ if (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ const allFields = this.getCurrentFields();
+ this.selectedFields[subgroupKey] = [...allFields];
+ this.selectedFields = { ...this.selectedFields };
+ this.saveFieldSelections();
+ }
+
+ // Select default fields (first10 or all if less than10) - Renamed for clarity
+ selectDefaultFields(event?: Event): void {
+ if (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ const allFields = this.getCurrentFields();
+ this.selectedFields[subgroupKey] = allFields.slice(0, Math.min(10, allFields.length));
+ this.selectedFields = { ...this.selectedFields };
+ this.saveFieldSelections();
+ }
+
+ // Get dynamic max selectable based on available fields
+ getDynamicMaxSelectable(): number {
+ const totalFields = this.getTotalAvailableFieldsCount();
+ return Math.min(this.maxSelectableFields, totalFields);
+ }
+
+ // Check if all fields are selected
+ areAllFieldsSelected(): boolean {
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ const selections = this.selectedFields[subgroupKey];
+ const totalFields = this.getCurrentFields().length;
+ 
+ if (!selections) {
+ return true; // All fields selected by default
+ }
+ 
+ return selections.length === totalFields;
+ }
+
+ // Check if no fields are selected
+ areNoFieldsSelected(): boolean {
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ const selections = this.selectedFields[subgroupKey];
+ 
+ if (!selections) {
+ return false; // All fields selected by default
+ }
+ 
+ return selections.length ===0;
+ }
+
+ // Navigation and section management methods
+ getSubgroups(): string[] {
+ return Object.keys(this.sections[this.currentSection].subgroups);
+ }
+
+ showSection(section: 'crime' | 'suspect' | 'notes'): void {
+ // Close field selector when changing sections
+ this.closeFieldSelector();
+ this.currentSection = section;
+ this.currentSubgroup = Object.keys(this.sections[this.currentSection].subgroups)[0];
+ this.showHelpFor = null;
+ this.triggerAutoSave();
+ }
+
+ // Enhanced document click handler
+ @HostListener('document:click', ['$event'])
+ handleDoc(event: Event): void {
+ this.showHelpFor = null;
+ // Only close field selector if click is outside the popup
+ const target = event.target as HTMLElement;
+ if (this.showFieldSelector && !target.closest('.field-selector-container')) {
+ this.closeFieldSelector();
+ }
+ }
+
+ // Handle section/subgroup changes to refresh field selector
+ setSubgroup(key: string): void {
+ // Close field selector when changing subgroups
+ this.closeFieldSelector();
+ this.currentSubgroup = key;
+ this.showHelpFor = null;
+ this.triggerAutoSave();
+ }
+
+ // Section and subgroup completion status
+ isSectionCompleted(section: string): boolean {
+ return this.completedSections.has(section);
+ }
+
+ isSubgroupCompleted(subgroup: string): boolean {
+ return this.completedSubgroups.has(subgroup);
+ }
+
+ // Section descriptions
+ getSectionDescription(section: string): string {
+ const descriptions = {
+ crime: 'Capture complete crime intelligence: timing, location, evidence, and operational context. Use dropdown values for consistency and upload supporting materials.',
+ suspect: 'Document comprehensive suspect profile: identity, physical characteristics, background, associations, and criminal history. Include recent photographs where available.',
+ notes: 'Maintain detailed investigative records: findings, evidence files, reference materials, and final recommendations with proper version control.'
+ };
+ return descriptions[section as keyof typeof descriptions] || '';
+ }
+
+ // Field handling and validation
+ onFieldChange(field: string): void {
+ this.validateField(field);
+ this.triggerAutoSave();
+ }
+
+ // Auto-save functionality
+ private triggerAutoSave(): void {
+ this.autoSave$.next();
+ }
+
+ private performAutoSave(): void {
+ this.isAutoSaving = true;
+ this.autoSaveStatus = 'Saving...';
+ 
+ // Save to localStorage
+ this.saveFormData();
+ 
+ // Simulate save delay
+ setTimeout(() => {
+ this.isAutoSaving = false;
+ this.autoSaveStatus = 'Saved';
+ 
+ // Reset status after a moment
+ setTimeout(() => {
+ this.autoSaveStatus = 'Auto-save';
+ },2000);
+ },500);
+ }
+
+ private saveFormData(): void {
+ const saveData = {
+ formData: this.formData,
+ completedFields: Array.from(this.completedFields),
+ completedSubgroups: Array.from(this.completedSubgroups),
+ completedSections: Array.from(this.completedSections),
+ currentSection: this.currentSection,
+ currentSubgroup: this.currentSubgroup
+ };
+ localStorage.setItem('pydetect-form-data', JSON.stringify(saveData));
+ }
+
+ private loadFormData(): void {
+ const savedData = localStorage.getItem('pydetect-form-data');
+ if (savedData) {
+ const data = JSON.parse(savedData);
+ this.formData = data.formData || {};
+ this.completedFields = new Set(data.completedFields || []);
+ this.completedSubgroups = new Set(data.completedSubgroups || []);
+ this.completedSections = new Set(data.completedSections || []);
+ this.currentSection = data.currentSection || 'crime';
+ this.currentSubgroup = data.currentSubgroup || 'Identification & Timing';
+ }
+ }
+
+ // Dropdown options and cascading logic
+ getOptions(field: string): string[] | undefined {
+ if (field === 'Country') return this.countries;
+ if (field === 'State') return (this.selectedValues['Country'] === 'India' || !this.selectedValues['Country']) ? this.indiaStates : [];
+ if (field === 'District') {
+ if (this.selectedValues['State'] === 'Tamil Nadu') {
+ return this.tamilNaduDistricts;
+ } else if (this.selectedValues['State']) {
+ return [];
+ } else {
+ return [];
+ }
+ }
+ return this.selectOptions[field];
+ }
+
+ onSelectChange(field: string, event: Event): void {
+ const value = (event.target as HTMLSelectElement).value;
+ this.selectedValues[field] = value;
+ this.formData[field] = value;
+ 
+ // Clear dependent fields
+ if (field === 'Country') {
+ delete this.selectedValues['State'];
+ delete this.selectedValues['District'];
+ delete this.formData['State'];
+ delete this.formData['District'];
+ }
+ if (field === 'State') {
+ delete this.selectedValues['District'];
+ delete this.formData['District'];
+ }
+ 
+ this.validateField(field);
+ this.triggerAutoSave();
+ }
+
+ // Field help functionality
+ toggleFieldInfo(field: string, ev: MouseEvent): void {
+ ev.stopPropagation();
+ this.showHelpFor = this.showHelpFor === field ? null : field;
+ }
+
+ closeFieldInfo(): void {
+ this.showHelpFor = null;
+ }
+
+ // File upload functionality
+ onFileChange(field: string, event: Event): void {
+ const input = event.target as HTMLInputElement;
+ const files = input.files ? Array.from(input.files) : [];
+ if (files.length) {
+ this.uploadedFiles[field] = (this.uploadedFiles[field] || []).concat(files);
+ this.validateField(field);
+ this.triggerAutoSave();
+ }
+ }
+
+ onDragOver(event: DragEvent): void {
+ event.preventDefault();
+ this.isDragOver = true;
+ }
+
+ onDragLeave(event: DragEvent): void {
+ event.preventDefault();
+ this.isDragOver = false;
+ }
+
+ onFileDrop(field: string, event: DragEvent): void {
+ event.preventDefault();
+ this.isDragOver = false;
+ 
+ const files = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
+ if (files.length) {
+ this.uploadedFiles[field] = (this.uploadedFiles[field] || []).concat(files);
+ this.validateField(field);
+ this.triggerAutoSave();
+ }
+ }
+
+ removeFile(field: string, file: File): void {
+ if (this.uploadedFiles[field]) {
+ this.uploadedFiles[field] = this.uploadedFiles[field].filter(f => f !== file);
+ this.triggerAutoSave();
+ }
+ }
+
+ getAcceptedFileTypes(field: string): string {
+ return this.fileTypeConfig[field] || '*';
+ }
+
+ getFileIcon(filename: string): string {
+ const ext = filename.split('.').pop()?.toLowerCase();
+ switch (ext) {
+ case 'pdf': return 'fas fa-file-pdf';
+ case 'doc':
+ case 'docx': return 'fas fa-file-word';
+ case 'jpg':
+ case 'jpeg':
+ case 'png':
+ case 'gif': return 'fas fa-file-image';
+ case 'mp4':
+ case 'avi':
+ case 'mov': return 'fas fa-file-video';
+ default: return 'fas fa-file';
+ }
+ }
+
+ // Navigation helper methods for floating buttons
+ getPreviousSubgroup(): string {
+ const list = this.getSubgroups();
+ const currentIndex = list.indexOf(this.currentSubgroup);
+ return currentIndex >0 ? list[currentIndex -1] : '';
+ }
+
+ getNextSubgroup(): string {
+ const subgroups = this.getSubgroups();
+ const currentIndex = subgroups.indexOf(this.currentSubgroup);
+ if (currentIndex < subgroups.length -1) {
+ return subgroups[currentIndex +1];
+ }
+ // If last subgroup, return first subgroup of next section if exists
+ const sectionIndex = this.sectionKeys.indexOf(this.currentSection);
+ if (sectionIndex < this.sectionKeys.length -1) {
+ const nextSection = this.sectionKeys[sectionIndex +1];
+ return Object.keys(this.sections[nextSection].subgroups)[0];
+ }
+ return '';
+ }
+
+ isLastSubgroup(): boolean {
+ const list = this.getSubgroups();
+ return list.indexOf(this.currentSubgroup) === list.length -1;
+ }
+
+ canNextSubgroup(): boolean {
+ // Enable Next on last subgroup if not notes section
+ if (this.isLastSubgroup()) {
+ return !(this.currentSection === 'notes' && this.currentSubgroup === 'Remark');
+ }
+ return true;
+ }
+
+ nextSubgroup(): void {
+ const subgroups = this.getSubgroups();
+ const currentIndex = subgroups.indexOf(this.currentSubgroup);
+ // If not last subgroup, go to next subgroup
+ if (currentIndex < subgroups.length -1) {
+ this.setSubgroup(subgroups[currentIndex +1]);
+ return;
+ }
+ // If last subgroup, go to first subgroup of next section (if exists)
+ const sectionIndex = this.sectionKeys.indexOf(this.currentSection);
+ if (sectionIndex < this.sectionKeys.length -1) {
+ const nextSection = this.sectionKeys[sectionIndex +1];
+ this.currentSection = nextSection;
+ this.currentSubgroup = Object.keys(this.sections[nextSection].subgroups)[0];
+ this.showHelpFor = null;
+ this.triggerAutoSave();
+ }
+ }
+
+ prevSubgroup(): void {
+ const subgroups = this.getSubgroups();
+ const currentIndex = subgroups.indexOf(this.currentSubgroup);
+ if (currentIndex >0) {
+ this.setSubgroup(subgroups[currentIndex -1]);
+ return;
+ }
+ // If first subgroup, go to last subgroup of previous section (if exists)
+ const sectionIndex = this.sectionKeys.indexOf(this.currentSection);
+ if (sectionIndex >0) {
+ const prevSection = this.sectionKeys[sectionIndex -1];
+ const prevSubgroups = Object.keys(this.sections[prevSection].subgroups);
+ this.currentSection = prevSection;
+ this.currentSubgroup = prevSubgroups[prevSubgroups.length -1];
+ this.showHelpFor = null;
+ this.triggerAutoSave();
+ }
+ }
+
+ submitCurrentSection(): void {
+ // Perform final validation
+ const currentFields = this.getCurrentFields();
+ const requiredFields = currentFields.filter(f => this.isFieldRequired(f));
+ const missingFields = requiredFields.filter(f => !this.completedFields.has(f));
+
+ if (missingFields.length >0) {
+ alert(`Please complete the following required fields: ${missingFields.join(', ')}`);
+ return;
+ }
+
+ this.performAutoSave();
+
+ // Map flat formData to nested structure expected by addOrUpdateFromInfoForm
+ const crime = {
+ caseId: this.formData['Case ID'] || '',
+ dateTime: this.formData['Date & Time (Entry)'] || '',
+ crimeType: this.formData['Crime Type'] || '',
+ location: this.formData['Location'] || '',
+ victimName: this.formData['Victim Name'] || '',
+ caseCategory: this.formData['Case Category'] || '',
+ reportedBy: this.formData['Reported By'] || '',
+ briefDescription: this.formData['Brief Description'] || '',
+ 'FIR / Ref #': this.formData['FIR / Ref #'] || '',
+ 'Occurred From': this.formData['Occurred From'] || '',
+ 'Occurred To': this.formData['Occurred To'] || '',
+ 'Jurisdiction / PS': this.formData['Jurisdiction / PS'] || '',
+ 'Scene Type': this.formData['Scene Type'] || ''
+ };
+ const suspect = {
+ fullName: this.formData['Suspect Name'] || '',
+ age: this.formData['Age'] || '',
+ gender: this.formData['Gender'] || '',
+ address: this.formData['Address'] || '',
+ alias: this.formData['Alias / Nickname'] || ''
+ };
+ const notes = {
+ status: this.formData['Case Status'] || this.formData['Status'] || 'Open',
+ officerInCharge: this.formData['Investigating Officer'] || '',
+ initialFindings: this.formData['Initial Findings'] || '',
+ verifiedBy: this.formData['Verified By'] || ''
+ };
+ const legal = {
+ witnessStatements: this.formData['Witness Statements'] || '',
+ confessions: this.formData['Confessions'] || '',
+ evidence: this.uploadedFiles['Evidence Files'] || []
+ };
+
+ // Pass the full flat formData object so CaseStoreService can save raw inputs
+ this.caseStore.addOrUpdateFromInfoForm({ crime, suspect, notes, legal, formData: this.formData });
+ // Show popup first
+ this.showSubmitPopup = true;
+ }
+
+ onSubmitPopupClose(): void {
+ this.showSubmitPopup = false;
+ this.router.navigate(['/record'], { state: { formData: this.formData } });
+ }
+
+ // Keyboard navigation
+ @HostListener('document:keydown', ['$event'])
+ handleKeydown(event: KeyboardEvent): void {
+ // Keyboard navigation
+ if (event.ctrlKey && event.key === 'ArrowRight') {
+ event.preventDefault();
+ this.nextSubgroup();
+ } else if (event.ctrlKey && event.key === 'ArrowLeft') {
+ event.preventDefault();
+ this.prevSubgroup();
+ } else if (event.ctrlKey && event.key === 's') {
+ event.preventDefault();
+ this.performAutoSave();
+ } else if (event.key === 'Escape') {
+ this.closeFieldInfo();
+ }
+ }
+
+ // Toggle field selector visibility
+ toggleFieldSelector(event?: Event): void {
+ if (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
+ const subgroupKey = `${this.currentSection}-${this.currentSubgroup}`;
+ this.showFieldSelector = this.showFieldSelector === subgroupKey ? null : subgroupKey;
+ }
+
+ // Close field selector
+ closeFieldSelector(): void {
+ this.showFieldSelector = null;
+ }
+
+ // Save field selections to localStorage
+ private saveFieldSelections(): void {
+ try {
+ localStorage.setItem('pydetect-field-selections', JSON.stringify(this.selectedFields));
+ } catch (error) {
+ console.warn('Could not save field selections to localStorage:', error);
+ }
+ }
+
+ // Load field selections from localStorage
+ private loadFieldSelections(): void {
+ try {
+ const savedSelections = localStorage.getItem('pydetect-field-selections');
+ if (savedSelections) {
+ this.selectedFields = JSON.parse(savedSelections);
+ }
+ } catch (error) {
+ console.warn('Could not load field selections from localStorage:', error);
+ this.selectedFields = {};
+ }
+ }
+
+ // Track by function for ngFor optimization
+ trackByField(index: number, field: string): string {
+ return field;
+ }
+
+ toggleRecording() {
+ this.isRecording = !this.isRecording;
+ // Add actual recording logic here if needed
+ // For now, just toggles the state
+ }
+
+ goToRecords(): void {
+ this.router.navigate(['/record']);
+ }
 
 }

src/app/py-detect/py-detect.component.css

@@ -236,7 +236,7 @@ body, html {
   grid-template-columns: 1fr 1.5fr;
   gap: 32px;
   margin: 32px auto 0 auto;
-  max-width: 1400px;
+  max-width: 1700px;
   min-height: 80vh;
   background: linear-gradient(120deg, #f6f8fa 60%, #e0f2fe 100%);
   border-radius: 24px;
@@ -250,8 +250,8 @@ body, html {
   gap: 18px;
   justify-content: flex-start;
   align-items: flex-start;
-  min-width: 555px;
-  max-width: 480px;
+  min-width: 750px;
+  max-width: 800px;
 }
 
 .right-panel {
@@ -259,7 +259,8 @@ body, html {
   flex-direction: column;
   gap: 24px;
   align-items: stretch;
-  min-width: 400px;
+  min-width: 600px;
+  max-width: 900px;
 }
 
 /* Card style for summary/case info */
@@ -848,7 +849,7 @@ body, html {
   position: relative;
   animation: fadeInUp 0.7s cubic-bezier(.39,.58,.57,1);
   min-height: 180px;
-  max-width: 480px;
+  max-width: 700px;
   width: 100%;
   z-index: 1;
 }
@@ -1222,7 +1223,7 @@ body, html {
   font-weight: 700;
   padding: 8px 22px;
   border-radius: 16px;
-  box-shadow: 0 2px 12px #ef444488;
+  max-width: 1000px;
   z-index: 10;
   letter-spacing: 1px;
   display: flex;

src/app/py-detect/py-detect.component.html

@@ -35,7 +35,7 @@
 <!-- Header action bar with buttons and divider line -->
 <div class="header-action-bar">
   <div class="header-action-left" style="position:relative;">
-    <button class="small-btn" (click)="onStartRecording()">
+  <button class="small-btn" (click)="onStartInvestigation()">
       <i class="fas fa-search"></i> Start Investigation
     </button>
     <div *ngIf="currentQuestionIndex < 0" class="guidance-tooltip">
@@ -51,26 +51,81 @@
   <section class="left-panel">
     <div class="animated-divider"></div>
     <!-- Remove old question/status block, keep only the new decorated card -->
-    <div class="tts-question-card">
-      <div class="tts-question-title">Question {{ currentQuestionIndex + 1 }} of {{ totalQuestions }}</div>
-      <div class="tts-question-text">{{ currentQuestionText }}</div>
-      <div *ngIf="infoText" class="tts-status-row">{{ infoText }}</div>
-      <div *ngIf="status() === 'idle-wait'" class="tts-status-row">
-        Waiting for suspect reply...
-      </div>
-      <div *ngIf="isRecording" class="tts-status-row">
-        Voice is being recognized...
-      </div>
-      <!-- Recording Status Bar inside question card -->
-      <div class="recording-status-bar">
-        <span class="status-icon">
-          <ng-container *ngIf="isRecording; else pausedIcon">🔴</ng-container>
-          <ng-template #pausedIcon>⏸️</ng-template>
-        </span>
-        <span>{{ isRecording ? 'Recording' : 'Paused' }}</span>
-        <span class="status-timer">— {{ isRecording ? elapsedTime : remainingTime }}</span>
+    <!-- In tts-question-card, show AI question if available -->
+<div class="tts-question-card">
+  <div class="tts-question-title">Question {{ currentQuestionIndex + 1 }}</div>
+  <div class="tts-question-text">
+    <ng-container *ngIf="questions.length > 0; else noQuestion">
+      {{ questions[currentQuestionIndex] }}
+    </ng-container>
+    <ng-template #noQuestion>
+      <span *ngIf="currentQuestionText">{{ currentQuestionText }}</span>
+      <span *ngIf="!currentQuestionText">No question available.</span>
+    </ng-template>
+  </div>
+  <div *ngIf="infoText" class="tts-status-row">{{ infoText }}</div>
+
+  <!-- Manual answer input for testing -->
+      <div class="answer-section">
+  <div class="answer-card" style="background: #f8fbff; border-radius: 12px; box-shadow: 0 2px 8px #0001; padding: 18px 20px; margin-top: 10px; display: flex; flex-direction: column; gap: 18px; max-width: 650px; width: 100%;">
+          <label for="answerInput" style="font-weight: 500; margin-bottom: 4px; color: #2a3b5c;">Your Answer:</label>
+          <textarea id="answerInput" [(ngModel)]="textAnswer" (focus)="captureTextStart()" class="answer-input" placeholder="Type or speak your answer here..." rows="4" maxlength="3000" style="width: 100%; font-size: 1.08em; border-radius: 8px; border: 1px solid #bcd0ee; padding: 10px; resize: vertical; background: #fff; box-shadow: 0 1px 4px #0001; min-height: 60px;"></textarea>
+          <div style="display: flex; gap: 10px; margin-top: 6px;">
+            <button (click)="submitCombinedAnswer()" class="small-btn" style="background: linear-gradient(90deg,#3a8bfd,#6ad1ff); color: #fff; border-radius: 6px; font-weight: 500; padding: 7px 18px; border: none; box-shadow: 0 1px 4px #0001; cursor: pointer;">Submit Answer</button>
+            <button (click)="toggleVoiceRecording()" class="mic-btn" style="background: #fff; color: #3a8bfd; border-radius: 6px; font-weight: 500; padding: 7px 18px; border: 1px solid #3a8bfd; box-shadow: 0 1px 4px #0001; cursor: pointer;">
+              <span *ngIf="!isVoiceRecording">🎤 Start Recording</span>
+              <span *ngIf="isVoiceRecording">⏹️ Stop Recording</span>
+            </button>
+          </div>
+          <div *ngIf="isVoiceRecording" class="voice-hint" style="color: #e74c3c; font-weight: 500; margin-top: 4px;">🎤 Recording... Speak now.</div>
+          <!-- Results Section: Truth Score, Face Detection, Involvement -->
+          <div class="results-section" style="display: flex; flex-direction: column; gap: 16px; margin-top: 10px;">
+            <div *ngIf="truthScore !== null" class="result-card" style="background: #e0f7fa; border-radius: 10px; box-shadow: 0 1px 6px #38bdf822; padding: 12px 16px; margin-bottom: 0;">
+              <div style="display: flex; align-items: center; gap: 10px;">
+                <i class="fas fa-check-circle" style="color: #38bdf8; font-size: 1.3em;"></i>
+                <span style="font-weight: 600; color: #2563eb; font-size: 1.08em;">Truth Score</span>
+                <span style="font-weight: 700; color: #222; font-size: 1.15em; margin-left: auto;">{{ truthScore }}</span>
+              </div>
+            </div>
+            <div *ngIf="faceDetectionScore !== null" class="result-card" style="background: #fffde7; border-radius: 10px; box-shadow: 0 1px 6px #ffe08244; padding: 12px 16px; margin-bottom: 0;">
+              <div style="display: flex; align-items: center; gap: 10px;">
+                <i class="fas fa-user-check" style="color: #ff9800; font-size: 1.3em;"></i>
+                <span style="font-weight: 600; color: #ff9800; font-size: 1.08em;">Face Detection Score</span>
+                <span style="font-weight: 700; color: #222; font-size: 1.15em; margin-left: auto;">{{ faceDetectionScore }}</span>
+              </div>
+            </div>
+            <div *ngIf="involvementScore !== null" class="result-card" style="background: #f3e8ff; border-radius: 10px; box-shadow: 0 1px 6px #a78bfa44; padding: 12px 16px; margin-bottom: 0;">
+              <div style="font-weight:600;color:#6d28d9;display:flex;align-items:center;gap:8px;">
+                <i class="fas fa-user-tag" style="color: #6d28d9; font-size: 1.3em;"></i>
+                <span>Involvement Score</span>
+                <span style="font-weight: 700; color: #222; font-size: 1.15em; margin-left: auto;">{{ involvementScore | number:'1.1-1' }}</span>
+              </div>
+              <div style="flex:1;background:#e0ecf8;height:14px;border-radius:6px;overflow:hidden;margin-top:8px;">
+                <div [style.width]="involvementScore + '%'" [style.background]="'linear-gradient(90deg,#4caf50,#ff9800,#f44336)'" style="height:100%;"></div>
+              </div>
+              <div *ngIf="involvementCues.length" style="margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;">
+                <span *ngFor="let cue of involvementCues" style="background:#3a8bfd11;color:#1d3e63;padding:4px 10px;border:1px solid #3a8bfd33;border-radius:16px;font-size:0.75rem;font-weight:500;">{{ cue.replace('_cue','').replace('_',' ') }}</span>
+              </div>
+              <div *ngIf="dominantInvestigativeExpression" style="margin-top:4px;font-size:0.75rem;color:#445;">Dominant Investigative Expression: <strong>{{ dominantInvestigativeExpression }}</strong></div>
+              <div class="body-language-explanation" *ngIf="bodyLanguageMeaning || bodyLanguageExplanation">
+                <span *ngIf="bodyLanguageMeaning" class="explanation-label">Body Language Meaning:</span>
+                <span *ngIf="bodyLanguageMeaning" class="explanation-text">{{ bodyLanguageMeaning }}</span><br *ngIf="bodyLanguageMeaning && bodyLanguageExplanation">
+                <span *ngIf="bodyLanguageExplanation" class="explanation-label">Body Language Explanation:</span>
+                <span *ngIf="bodyLanguageExplanation" class="explanation-text">{{ bodyLanguageExplanation }}</span>
+              </div>
+             </div>
+             <div *ngIf="ferEmotion" class="result-card" style="background: #e3f6ff; border-radius: 10px; box-shadow: 0 1px 6px #38bdf822; padding: 12px 16px; margin-bottom: 0;">
+               <div style="display: flex; align-items: center; gap: 10px;">
+                 <i class="fas fa-smile" style="color: #38bdf8; font-size: 1.3em;"></i>
+                 <span style="font-weight: 600; color: #2563eb; font-size: 1.08em;">Emotion (FER)</span>
+                 <span style="font-weight: 700; color: #222; font-size: 1.15em; margin-left: auto;">{{ ferEmotion }}</span>
+               </div>
+            </div>
+          </div>
+          <div *ngIf="guidanceCommand" style="margin-top:6px;font-size:0.72rem;color:#555;background:#ffeecd;padding:6px 8px;border-radius:6px;box-shadow:0 1px 3px #0001;">Guidance: {{ guidanceCommand }}</div>
+        </div>
       </div>
-    </div>
+</div>
   </section>
   <!-- Right Panel: Video + Transcript -->
   <section class="right-panel">
@@ -83,7 +138,7 @@
         </div>
       </ng-container>
       <ng-container *ngIf="videoStream">
-        <video #videoElement autoplay muted playsinline class="camera-video"></video>
+  <video #videoElement [srcObject]="videoStream" autoplay muted playsinline class="camera-video"></video>
         <div *ngIf="isRecording && currentQuestionIndex >= 0 && currentQuestionIndex < totalQuestions" class="recording-indicator">
           <span style="font-size:1.3em;">🔴</span> Recording...
         </div>
@@ -103,6 +158,7 @@
     <button class="submit-evaluate-btn" (click)="navigateToValidationPage()">
       Submit & Evaluate
     </button>
+  <!-- <a *ngIf="recordedVideoUrl" [href]="recordedVideoUrl" download="investigation-video.webm" class="download-btn" style="margin-left: 12px; background: #3a8bfd; color: #fff; padding: 10px 22px; border-radius: 8px; font-weight: 500; text-decoration: none; box-shadow: 0 1px 4px #0001; vertical-align: middle;">Download Video</a> -->
   </section>
 </main>
 <!-- Evidence Panel Sidebar (directly below button bar) -->
@@ -139,7 +195,7 @@
       <hr class="evidence-divider" />
       <div class="evidence-summary-row">
         <label for="evidenceSummary" class="evidence-summary-label">Remark</label>
-        <textarea id="evidenceSummary" [(ngModel)]="evidenceSummary" rows="3" placeholder="Enter Remark..." class="evidence-summary-textarea"></textarea>
+  <textarea id="evidenceSummary" [(ngModel)]="evidenceSummary" [ngModelOptions]="{standalone: true}" rows="3" placeholder="Enter Remark..." class="evidence-summary-textarea"></textarea>
       </div>
       <button type="submit" class="evidence-submit-btn">Submit</button>
     </form>

src/app/py-detect/py-detect.component.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { Router, NavigationStart } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { FormsModule } from '@angular/forms';
+import { PyDetectService } from '../services/pydetect.service';
 
 declare global {
   interface Window {
@@ -31,29 +32,269 @@ type QAResult = {
   styleUrls: ['./py-detect.component.css']
 })
 export class PyDetectComponent implements OnInit, OnDestroy {
+  // Store body language explanation for UI
+  public bodyLanguageExplanation: string | null = null;
+  public bodyLanguageMeaning: string | null = null;
+
+  // Fetch explanation for a body language cue from backend
+  public fetchBodyLanguageExplanation(cue: string) {
+    this.bodyLanguageExplanation = null;
+    this.bodyLanguageMeaning = null;
+    this.pyDetectService.bodyLanguageExplain(cue).subscribe({
+      next: (resp) => {
+        if (resp?.explanation) {
+          this.bodyLanguageExplanation = resp.explanation;
+        }
+        if (resp?.meaning) {
+          this.bodyLanguageMeaning = resp.meaning;
+        }
+        console.log('[PyDetect] Body Language:', {
+          meaning: resp?.meaning,
+          explanation: resp?.explanation
+        });
+      },
+      error: () => {
+        this.bodyLanguageExplanation = 'No explanation available.';
+        this.bodyLanguageMeaning = null;
+        console.warn('[PyDetect] No body language explanation available.');
+      }
+    });
+  }
+  // FER emotion result for UI display
+  public ferEmotion: string | null = null;
+  // Face detection score for UI display
+  public faceDetectionScore: number | null = null;
+  // --- Patch: Add missing properties for template and logic ---
+  public currentQuestionIndex: number = -1;
+  public totalQuestions: number = 0;
+  public currentQuestionText: string = '';
+  public evidenceSummary: string = '';
+  // Store the truth score for the last submitted answer
+  public truthScore: number | null = null;
+  // Timing & frame streaming additions
+  public questionWindowStartAt: number | null = null;
+  public answerStartAt: number | null = null;
+  public answerEndAt: number | null = null;
+  public answerMode: 'voice' | 'text' | 'mixed' = 'text';
+  private frameIntervalId: any;
+  private frameStreamingActive: boolean = false;
+  public involvementScore: number | null = null;
+  public involvementCues: string[] = [];
+  public dominantInvestigativeExpression: string | null = null;
+  public behaviorTagDistribution: Record<string, number> | null = null;
+  public guidanceCommand: string | null = null;
+
+  // --- Patch: Add missing stub methods for template bindings ---
+  public async speakQuestion(question: string) {
+    // Use TTS to speak the question (stub)
+    await this.speak(question);
+  }
+
+  public startRecognitionWithRecording(index: number) {
+    // Stub for starting recognition with recording
+    // You may want to start voice recording and speech recognition here
+  }
+
+  public async navigateToValidationPage() {
+    // Stop video recording and release camera
+    this.stopVideoRecording();
+    if (this.videoStream) {
+      this.videoStream.getTracks().forEach(t => t.stop());
+      this.videoStream = undefined;
+    }
+    this.isRecording = false;
+    // Wait for the video to finish processing if needed
+    await this.sleep(500); // Give time for onstop to fire and recordedVideoUrl to be set
+    // Automatically download the recorded video if available
+    if (this.recordedVideoUrl) {
+      const anchor = document.createElement('a');
+      anchor.href = this.recordedVideoUrl;
+      anchor.download = 'investigation-video.webm';
+      anchor.style.display = 'none';
+      document.body.appendChild(anchor);
+      anchor.click();
+      setTimeout(() => {
+        document.body.removeChild(anchor);
+        // Optionally revoke the object URL after download
+        // URL.revokeObjectURL(this.recordedVideoUrl);
+      }, 100);
+    }
+    // Then navigate to validation page
+    this.router.navigate(['/validationpage']);
+  }
+
+  public uploadDocument() {
+    // Stub for document upload logic
+    // You may want to handle file upload here
+  }
+
+  public onEvidenceFileSelect(event: any, type: string) {
+    // Stub for evidence file selection logic
+    // You may want to process selected files here
+  }
+  // Manual answer submission for testing
+  public submitTextAnswer() {
+    if (!this.textAnswer || !this.sessionId || this.currentQuestionIndex < 0 || !this.questions[this.currentQuestionIndex]) {
+      this.infoText = 'Please enter an answer and ensure a question is active.';
+      return;
+    }
+    // Call backend to submit response
+    this.pyDetectService.submitResponse(
+      this.sessionId,
+      this.textAnswer,
+      this.questions[this.currentQuestionIndex]
+    ).subscribe({
+      next: async (res) => {
+        // Extract truth score if present
+        this.truthScore = (res && (res.truth_score || res.score)) ? Number(res.truth_score || res.score) : null;
+        this.infoText = 'Answer submitted.' + (this.truthScore !== null ? ` Truth Score: ${this.truthScore}` : '');
+        this.textAnswer = '';
+        // Fetch body language explanation for the first involvement cue
+        if (this.involvementCues.length) {
+          this.fetchBodyLanguageExplanation(this.involvementCues[0]);
+        }
+        const response = await this.pyDetectService.askQuestion(
+          this.sessionId,
+          this.crimeType,
+          this.briefDescription
+        ).toPromise();
+        if (response && response.question) {
+          this.questions.push(response.question);
+          this.currentQuestionIndex++;
+          this.cdr.detectChanges();
+          await this.speakQuestion(response.question);
+        } else {
+          this.infoText = 'No more questions.';
+        }
+      },
+      error: (err) => {
+        this.infoText = 'Error submitting answer.';
+      }
+    });
+  }
   public showDetailsPanel: boolean = false;
   public metadata: any = null;
 
-  // ---- UI state ----
-  status = signal<'idle' | 'asking' | 'idle-wait' | 'recording' | 'processing'>('idle');
-  autoMode = signal(true); // Auto Next is always enabled
-  micOn = signal(false);
-  ttsEnabled = signal(true); // Speak Questions is always enabled
-  recognizerReady = signal(false);
+  // Backend-driven session and investigation state
+  sessionId: string = '';
+  caseData: any = null;
+  briefDescription: string = '';
+  isSessionStarted: boolean = false;
+  isLoading: boolean = false;
+  currentQuestion: string = '';
+  textAnswer: string = '';
+  lastAnalysisResult: any = null;
+  questionCount: number = 0;
+  currentInvestigationStage: string = 'Initial Investigation';
+  questionNumber: number = 1;
+  cameraActive: boolean = false;
+  voiceRecordingActive: boolean = false;
+  investigationActive: boolean = false;
+  investigationStarted: boolean = false;
+  caseSummary: any = null;
+  processingResponse: boolean = false;
+  videoStatus: string = 'Camera Ready';
+  ttsEnabled: boolean = false;
+  isListening: boolean = false;
+  speechRecognition: any = null;
+          // Combined answer submission: prefer text box, fallback to transcript
+          public submitCombinedAnswer() {
+            // Accept answer from text box or voice transcript
+            let answerText = (this.textAnswer && this.textAnswer.trim()) ? this.textAnswer.trim() : (this.transcriptSoFar && this.transcriptSoFar.trim()) ? this.transcriptSoFar.trim() : '';
+            if (!answerText || !this.sessionId || !this.questions[this.currentQuestionIndex]) {
+              this.infoText = 'Please provide your answer before submitting.';
+              return;
+            }
+            this.stopAudioRecording();
+            this.infoText = 'Submitting answer...';
+            this.textAnswer = '';
+            this.transcriptSoFar = '';
+            const endTs = Date.now();
+            this.answerEndAt = endTs;
+            if (!this.answerStartAt) this.answerStartAt = this.questionWindowStartAt || endTs;
+            const durationMs = this.answerEndAt - this.answerStartAt;
+            this.stopFrameStreaming();
+            this.pyDetectService.submitResponse(
+              this.sessionId,
+              answerText,
+              this.questions[this.currentQuestionIndex],
+              {
+                answer_start_at: this.answerStartAt,
+                answer_end_at: this.answerEndAt,
+                duration_ms: durationMs,
+                mode: this.answerMode
+              }
+            ).subscribe({
+              next: async (res) => {
+                // Extract truth score if present
+                this.truthScore = (res && (res.truth_score || res.score)) ? Number(res.truth_score || res.score) : null;
+                this.infoText = 'Answer submitted.' + (this.truthScore !== null ? ` Truth Score: ${this.truthScore}` : '');
+                // Pull involvement metrics
+                this.fetchLatestInvolvement();
+                // Fetch next question from backend
+                const response = await this.pyDetectService.askQuestion(
+                  this.sessionId,
+                  this.crimeType,
+                  this.briefDescription
+                ).toPromise();
+                if (response && response.question) {
+                  this.questions.push(response.question);
+                  this.currentQuestionIndex++;
+                  this.questionNumber = this.currentQuestionIndex + 1;
+                  this.cdr.detectChanges();
+                  await this.startCamera();
+                  await this.startVideoRecording();
+                  await this.speakQuestion(response.question);
+                  // Restart window for next question
+                  this.startQuestionWindow();
+                  // Reset answer timing
+                  this.answerStartAt = null;
+                  this.answerEndAt = null;
+                  this.answerMode = 'text';
+                } else {
+                  this.infoText = 'No more questions.';
+                  this.showSummary = true;
+                }
+              },
+              error: () => {
+                this.infoText = 'Error submitting answer.';
+              }
+            });
+          }
+  public stopAudioRecording() {
+    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+      this.mediaRecorder.stop();
+      // Show the transcribed answer in the text box
+      this.textAnswer = this.transcriptSoFar;
+      this.infoText = 'Voice recording stopped.';
+      // Stop speech recognition when recording stops
+      if (this.recognition) {
+        try { this.recognition.stop(); } catch {}
+      }
+    }
+  }
+  speechSynthesis: any = null;
+  voiceSupported: boolean = false;
+  microphoneSupported: boolean = false;
+  microphonePermissionDenied: boolean = false;
+  permissionStatus: string = 'unknown';
 
   // ---- TTS active flag ----
   private isActive = false;
 
   // ---- Q/A data ----
-  currentQuestion = signal<string>('');
-  questionIndex = signal<number>(0);
+  // log: QAResult[] = [];
   log: QAResult[] = [];
 
 
   // ---- Constructor with Router Injection ----
   private routerSubscription?: Subscription;
 
-  constructor(private router: Router, private cdr: ChangeDetectorRef) {
+  constructor(
+    private router: Router,
+    private cdr: ChangeDetectorRef,
+    private pyDetectService: PyDetectService
+  ) {
     // Cancel TTS on any navigation away
     this.routerSubscription = this.router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
@@ -75,7 +316,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
 
   private pitchSamples: number[] = [];
   private volumeSamples: number[] = [];
-  private analyserBuffer?: Float32Array;
+  private analyserBuffer: Float32Array = new Float32Array(2048);
   private analyserTimer?: any;
 
   // ---- Speech Recognition ----
@@ -90,27 +331,20 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   private analyserWindowMs = 100;  // Declare analyserWindowMs property
 
   // Example question source (replace with API call when ready)
-  public seedQuestions = [
-    'Please introduce yourself in two sentences.',
-    'What motivates you to take on challenging tasks?',
-    'Describe a situation where you solved a tough problem.',
-    'How do you handle disagreements in a team?',
-    'What is a recent technology you learned and why?'
-  ];
+  // Remove legacy seedQuestions
+  public questions: string[] = [];
 
   // Button state signals
-  startDisabled = signal(false); // Always enabled
-  stopDisabled = signal(true);
-  resumeDisabled = signal(true);
-  submitDisabled = signal(true);
+  // Remove legacy button state signals
 
   // Add missing public methods and properties for template binding
-  public videoStatus: string = '';
+  // videoStatus already declared above for backend workflow
   public videoStream?: MediaStream;
-  public videoRecorder?: MediaRecorder;
   @ViewChild('videoElement', { static: false }) videoElement?: ElementRef<HTMLVideoElement>;
   public videoChunks: Blob[] = [];
   public videoAnswers: Blob[] = [];
+  public videoRecorder?: MediaRecorder;
+  public recordedVideoUrl: string = '';
 
   // UI properties for template
   caseId: string = '';
@@ -224,6 +458,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
       this.progress = metadata.progress || 0;
       this.progressStage = metadata.progressStage || '';
       this.sessionTime = metadata.sessionTime || '';
+      this.briefDescription = metadata.briefDescription || '';
     }
   }
 
@@ -234,8 +469,6 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     }
     this.cleanupAll();
     this.stopVideoRecording();
-    this.micOn.set(false); // Stop mic indicator
-    this.recognizerReady.set(false); // Stop recognizer indicator
     this.videoStatus = '';
     if (this.videoStream) {
       this.videoStream.getTracks().forEach(t => t.stop());
@@ -248,139 +481,18 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   }
 
   // ======== Main flow ========
-  async start(): Promise<void> {
-    if (this.status() !== 'idle') return;
-    this.status.set('asking');
-    this.setupRecognition();
-    this.recognizerReady.set(!!this.recognition);
-    await this.startCamera();
-    this.startDisabled.set(false); // Always enabled
-    this.stopDisabled.set(false);
-    this.resumeDisabled.set(true);
-    this.submitDisabled.set(true);
-    this.autoMode.set(true); // Enable auto mode for continuous questions
-    this.nextQuestionLoopRunning = true;
-    this.nextQuestionLoop();
-  }
-
-  stopAll(): void {
-    this.autoMode.set(false); // Stop auto mode to halt question loop
-    this.nextQuestionLoopRunning = false;
-    if (this.videoRecorder && this.videoRecorder.state === 'recording') {
-      this.videoRecorder.stop();
-    }
-    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
-      this.cleanupRecording();
-    }
-    this.stopRecognition();
-    if (window.speechSynthesis) {
-      window.speechSynthesis.cancel(); // Stop any TTS audio
-    }
-    // Stop and clear video stream
-    if (this.videoStream) {
-      this.videoStream.getTracks().forEach(t => t.stop());
-      this.videoStream = undefined;
-      if (this.videoElement?.nativeElement) {
-        this.videoElement.nativeElement.srcObject = null;
-      }
-    }
-    this.videoRecorder = undefined;
-    this.videoStatus = '';
-    this.micOn.set(false);
-    this.recognizerReady.set(false);
-    this.status.set('idle');
-    this.startDisabled.set(false); // Always enabled
-    this.stopDisabled.set(false); // Ensure Stop button is enabled after stopping
-    this.resumeDisabled.set(false);
-    this.submitDisabled.set(false);
-  }
-
-  public resume() {
-    // Start camera if not already started
-    this.startCamera();
-    // Resume video recording if paused
-    if (this.videoRecorder && this.videoRecorder.state === 'paused') {
-      this.videoRecorder.resume();
-      this.videoStatus = 'Recording...';
-      this.stopDisabled.set(false);
-      this.resumeDisabled.set(true);
-      this.submitDisabled.set(true);
-    }
-    // Resume question loop if stopped
-    if (this.status() === 'idle') {
-      this.autoMode.set(true);
-      this.nextQuestionLoopRunning = true;
-      this.startDisabled.set(false);
-      this.stopDisabled.set(false);
-      this.resumeDisabled.set(true);
-      this.submitDisabled.set(true);
-      this.nextQuestionLoop();
-    }
-  }
+  // Legacy start method removed. Use backend-driven workflow only.
 
-  private nextQuestionLoopRunning = false;
+  // Legacy stopAll method removed. Use backend-driven workflow only.
 
-  private async nextQuestionLoop(): Promise<void> {
-    while (this.autoMode() && this.nextQuestionLoopRunning) {
-      // 1) Get next question
-      const q = await this.fetchNextQuestion();
-      this.currentQuestion.set(q);
-      this.status.set('asking'); // Show listening HUD
-      if (this.ttsEnabled()) {
-        await this.speak(q);
-      }
-      // Start camera and audio recording
-      await this.startCamera();
-      this.status.set('recording'); // Show recording HUD
-      await this.startVideoRecording();
-      this.transcriptSoFar = '';
-      this.startRecognition('en-IN');
-      let silenceTimer: any;
-      let lastTranscript = '';
-      let silenceStart: number | null = null;
-      let answerDone = false;
-      // Wait for user to start speaking, then monitor for silence
-      await new Promise<void>((resolve) => {
-        const poll = () => {
-          const currentTranscript = this.transcriptSoFar.trim();
-          if (currentTranscript.length > 0) {
-            if (lastTranscript !== currentTranscript) {
-              lastTranscript = currentTranscript;
-              silenceStart = null;
-            } else {
-              if (!silenceStart) silenceStart = Date.now();
-              if (Date.now() - silenceStart > 10000) {
-                answerDone = true;
-                resolve();
-                return;
-              }
-            }
-          }
-          setTimeout(poll, 500);
-        };
-        poll();
-      });
-      // Stop recognition and video recording
-      this.stopRecognition();
-      this.stopVideoRecording();
-      this.status.set('processing');
-      await this.sleep(700);
-      this.questionIndex.set(this.questionIndex() + 1);
-    }
-    this.status.set('idle');
-    this.stopVideoRecording();
-    this.startDisabled.set(false);
-    this.stopDisabled.set(true);
-    this.resumeDisabled.set(false);
-    this.submitDisabled.set(false);
-  }
+  // Legacy resume method removed. Use backend-driven workflow only.
 
   // ======== Question source ========
   private async fetchNextQuestion(): Promise<string> {
     // Replace this with HTTP call to your backend if needed.
     // Example: const { question } = await this.http.get<{question:string}>('/api/next-question').toPromise();
-    const i = this.questionIndex() % this.seedQuestions.length;
-    return this.seedQuestions[i];
+  // Legacy fetchNextQuestion logic removed. Use backend-driven workflow only.
+  return '';
   }
 
   // ======== TTS (question playback) ========
@@ -423,7 +535,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
       audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true },
       video: false
     });
-    this.micOn.set(true);
+  // ...existing code...
 
     // 2) prepare MediaRecorder
     const mime = this.chooseMimeType();
@@ -455,7 +567,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     this.stopAnalyser();
     this.stopRecognition();
     this.cleanupMediaStream();
-    this.micOn.set(false);
+  // ...existing code...
 
     // 7) build audio URL
     const blob = new Blob(this.audioChunks, { type: mime });
@@ -474,8 +586,8 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   private waitForSilenceOrContinue() {
     if (this.silenceTimeout) clearTimeout(this.silenceTimeout);
     this.silenceTimeout = setTimeout(() => {
-      this.stopAll();
-    }, 5000); // Timeout after 5 seconds of silence
+  // ...existing code...
+    }, 5002); // Timeout after 5 seconds of silence
   }
 
 
@@ -500,7 +612,8 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     this.analyser.fftSize = 2048;
     this.sourceNode.connect(this.analyser);
 
-    this.analyserBuffer = new Float32Array(this.analyser.fftSize);
+    // Use correct constructor for Float32Array
+  this.analyserBuffer = new Float32Array(this.analyser.fftSize);
 
     const tick = () => {
       if (!this.analyser || !this.analyserBuffer) return;
@@ -662,267 +775,310 @@ export class PyDetectComponent implements OnInit, OnDestroy {
     }
   }
 
+  // ===== Frame streaming for nonverbal analysis =====
+  private startQuestionWindow() {
+    this.questionWindowStartAt = Date.now();
+    this.answerStartAt = null;
+    this.answerEndAt = null;
+    this.answerMode = 'text'; // default until voice starts
+    this.startFrameStreaming();
+  }
+
+  private startFrameStreaming() {
+    if (this.frameStreamingActive) return;
+    if (!this.videoElement?.nativeElement) return;
+    const videoEl = this.videoElement.nativeElement;
+    const canvas = document.createElement('canvas');
+    canvas.width = 320;
+    canvas.height = 240;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    this.frameStreamingActive = true;
+    this.frameIntervalId = setInterval(() => {
+      if (!this.frameStreamingActive) return;
+      try {
+        ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
+        const dataUrl = canvas.toDataURL('image/jpeg', 0.6);
+        if (this.sessionId) {
+          this.pyDetectService.faceFrame(this.sessionId, dataUrl).subscribe({
+            next: (resp) => {
+              if (resp?.metrics?.emotion) this.ferEmotion = resp.metrics.emotion;
+              if (resp?.command) this.guidanceCommand = resp.command;
+            },
+            error: () => { /* ignore */ }
+          });
+        }
+      } catch { /* ignore */ }
+    }, 150);
+  }
+
+  private stopFrameStreaming() {
+    if (this.frameIntervalId) clearInterval(this.frameIntervalId);
+    this.frameIntervalId = null;
+    this.frameStreamingActive = false;
+  }
+
+  // Capture text start when user focuses the answer textarea
+  public captureTextStart() {
+    if (!this.answerStartAt) {
+      this.answerStartAt = Date.now();
+      if (this.answerMode === 'voice') {
+        this.answerMode = 'mixed';
+      } else {
+        this.answerMode = 'text';
+      }
+    }
+  }
+
+  // Fetch latest involvement metrics (defined here to resolve reference)
+  private fetchLatestInvolvement() {
+    if (!this.sessionId) return;
+    this.pyDetectService.getReport(this.sessionId).subscribe({
+      next: (report) => {
+        const responses = report?.responses || [];
+        if (!responses.length) return;
+        const last = responses[responses.length - 1];
+        const assess = last?.investigative_assessment;
+        const fb = last?.face_body?.metrics;
+        if (assess) {
+          this.involvementScore = typeof assess.involvement_score === 'number' ? assess.involvement_score : null;
+          this.involvementCues = Array.isArray(assess.cues) ? assess.cues : [];
+        }
+        if (fb) {
+          this.dominantInvestigativeExpression = fb.dominant_investigative_expression || null;
+          this.behaviorTagDistribution = fb.behavior_tag_distribution || null;
+        }
+        this.cdr.detectChanges();
+      },
+      error: () => { /* silent fail */ }
+    });
+  }
+
   public async startVideoRecording() {
     if (!this.videoStream) return;
+    // Prevent double-start
+    if (this.videoRecorder && this.videoRecorder.state === 'recording') {
+      console.warn('[PyDetect] Video recording already in progress.');
+      return;
+    }
     this.videoChunks = [];
     this.videoRecorder = new MediaRecorder(this.videoStream, { mimeType: 'video/webm' });
-    this.videoRecorder.ondataavailable = (e) => {
+    this.videoRecorder.ondataavailable = (e: BlobEvent) => {
       if (e.data && e.data.size > 0) this.videoChunks.push(e.data);
     };
-    this.videoRecorder.onstart = () => {
-      this.videoStatus = 'Recording...';
-    };
     this.videoRecorder.onstop = () => {
-      this.videoStatus = 'Stopped';
       const videoBlob = new Blob(this.videoChunks, { type: 'video/webm' });
-      this.videoAnswers.push(videoBlob);
+      this.recordedVideoUrl = URL.createObjectURL(videoBlob);
+      console.log('[PyDetect] Video recording complete. Blob URL:', this.recordedVideoUrl);
+      if (this.videoStream) {
+        this.videoStream.getTracks().forEach(t => t.stop());
+        this.videoStream = undefined;
+      }
+      this.cdr.detectChanges();
     };
     this.videoRecorder.start();
+    console.log('[PyDetect] Video recording started.');
   }
 
   public stopVideoRecording() {
-    if (this.videoRecorder && this.videoRecorder.state !== 'inactive') {
+    // Prevent double-stop
+    if (this.videoRecorder && this.videoRecorder.state === 'recording') {
       this.videoRecorder.stop();
+      // The onstop handler will release the camera and update the UI
+    } else {
+      console.warn('[PyDetect] Video recording already stopped or not started.');
     }
   }
 
-  public stopCamera() {
-    if (this.videoStream) {
-      this.videoStream.getTracks().forEach((track: any) => track.stop());
-    this.videoStream = undefined;
-    }
-    this.videoStatus = 'Camera stopped';
-  }
-
-  // UI methods for template
-  onStartInterview() {
-    this.currentQuestionIndex = 0;
-    this.progress = 0;
-    this.isRecording = false;
-    this.isProcessing = false;
-  }
-  public submitAll() {
-    // Do NOT stop audio or video playback here
-    this.videoStatus = 'Submitted!';
-    this.startDisabled.set(true);
-    this.stopDisabled.set(true);
-    this.resumeDisabled.set(true);
-    this.submitDisabled.set(true);
-    // TODO: Upload all videoAnswers to backend
-
-    // Example: Calculate dummy percentages (replace with real logic)
-    const truePercentage = 70;
-    const falsePercentage = 30;
-    this.router.navigate(['/validationpage'], { state: { truePercentage, falsePercentage } });
-  }
-
-  // Start Investigation workflow
-public async onStartRecording() {
-  this.floatingInfoText = 'Starting camera and microphone...';
-  this.infoText = null;
-  await this.sleep(1200); // Wait for UI effect
-  await this.startCamera();
-  await this.startVideoRecording();
-  this.floatingInfoText = 'Camera and microphone ready.';
-  await this.sleep(800);
-  this.floatingInfoText = null;
-  this.currentQuestionIndex = 0; // Ensure first question is selected
-  this.askCurrentQuestion();     // Automatically ask the first question
-}
-
-  // Refactor askCurrentQuestion to allow time for user to answer after silence
-  public async askCurrentQuestion(): Promise<void> {
-    if (this.currentQuestionIndex >= this.seedQuestions.length) {
-      // All questions done
-      this.floatingInfoText = 'Investigation complete. Camera stopped.';
-      this.stopVideoRecording();
-      this.stopCamera();
-      setTimeout(() => {
-        this.floatingInfoText = null;
-        this.showSummary = true;
-      }, 2000);
-      return;
-    }
-
-    // Start camera and video recording for each question
+  // Call startVideoRecording in onStartInvestigation
+  public async onStartInvestigation() {
+    this.isLoading = true;
+    this.infoText = 'Starting investigation...';
     await this.startCamera();
     await this.startVideoRecording();
-
-    // Show "Recording..." only during active questions
-    this.isRecording = (this.currentQuestionIndex >= 0 && this.currentQuestionIndex < this.totalQuestions);
-    this.infoText = 'Recording in progress – Asking question.';
-
-    // Start audio recording in parallel
-    this.startRecognitionWithRecording(this.currentQuestionIndex);
-
-    await this.speakQuestion(this.currentQuestionText);
-    await this.sleep(1000);
-
-    this.infoText = 'Recording in progress – Listening to answer.';
-
-    await this.sleep(10000); // Give user time to answer
-
-    // Hide recording status bar and indicator before processing
-    this.isRecording = false;
-    // Stop audio and video recording after answer
-    this.stopRecognition();
-    this.stopVideoRecording();
-    this.infoText = 'Processing your question and answer...';
-    await this.sleep(5000); // Simulate backend save
-
-    // Hide recording status bar and indicator before showing saved text
-    this.isRecording = false;
-    this.infoText = 'Saved successfully.';
-    await this.sleep(1000);
-    this.infoText = null;
-
-    this.currentQuestionIndex++;
-    await this.askCurrentQuestion();
-  }
-
-  // Move to next question
-  public nextQuestion() {
-    this.currentQuestionIndex++;
-    if (this.currentQuestionIndex < this.seedQuestions.length) {
-      this.askCurrentQuestion();
-    } else {
-      this.infoText = null;
-      this.floatingInfoText = 'Session complete.';
-      setTimeout(() => this.floatingInfoText = null, 2000);
+    await this.startSession();
+    // Ensure questions are loaded and index is set
+    // Use fallback logic for brief description
+    let briefDescriptionToSend = this.briefDescription?.trim() || '';
+    if (!briefDescriptionToSend) {
+      briefDescriptionToSend = 
+        sessionStorage.getItem('briefDescription')?.trim() || 
+        this.caseData?.briefDescription?.trim() || 
+        this.caseData?.police?.information?.trim() || 
+        this.caseData?.crime?.trim() || 
+        '';
     }
-  }
-
-  // Add evidence summary and file handling
-  public evidenceSummary: string = '';
-  public evidenceFiles: { document?: File, photo?: File, recording?: File } = {};
-
-public onEvidenceFileSelect(event: any, type: 'document' | 'photo' | 'recording') {
-    const file = event.target.files && event.target.files[0];
-    if (file) {
-      this.evidenceFiles[type] = file;
+    const response = await this.pyDetectService.askQuestion(
+      this.sessionId,
+      this.crimeType,
+      briefDescriptionToSend
+    ).toPromise();
+    if (response && response.question) {
+      this.questions = [response.question]; // Wrap single question in array
+      this.currentQuestionIndex = 0;
+      this.cdr.detectChanges(); // Force UI update after async
+      this.isRecording = true;
+      this.infoText = 'Recording in progress – Asking question.';
+      this.startRecognitionWithRecording(this.currentQuestionIndex);
+      // Start the question window BEFORE speaking so question time included
+      this.startQuestionWindow();
+      // Speak the first question using TTS (inside window)
+      await this.speakQuestion(this.questions[0]);
+      this.infoText = 'Recording in progress – Listening to answer.';
+    } else {
+      this.questions = [];
+      this.currentQuestionIndex = -1;
+      this.cdr.detectChanges();
     }
+    this.infoText = 'Investigation started. Please answer the question.';
+    this.isLoading = false;
   }
 
-  public uploadDocument() {
-    if (this.evidenceFiles.document) {
-      this.uploadedDocuments.push(this.evidenceFiles.document.name + (this.evidenceSummary ? ' - ' + this.evidenceSummary : ''));
-      this.evidenceFiles.document = undefined;
-      this.evidenceSummary = '';
-    }
-    if (this.evidenceFiles.photo) {
-      this.capturedPhotos.push(this.evidenceFiles.photo.name);
-      this.evidenceFiles.photo = undefined;
-    }
-    if (this.evidenceFiles.recording) {
-      this.previousRecordings.push(this.evidenceFiles.recording.name);
-      this.evidenceFiles.recording = undefined;
+  // Backend-driven session start and first question fetch
+public async startSession(): Promise<void> {
+  try {
+    this.isLoading = true;
+    if (this.voiceSupported) {
+      this.ttsEnabled = true;
+      setTimeout(() => {
+        this.speakQuestion('Investigation starting. I will ask you questions and you can respond using voice or text.');
+      }, 1000);
     }
-    this.showEvidencePanel = false; // Automatically close the panel after submit
-  }
-
-  // Add missing properties and methods for workflow
-  public currentQuestionIndex: number = -1;
-  public get totalQuestions(): number { return this.seedQuestions.length; }
-  public liveTranscription: string = '';
-  public get currentQuestionText(): string {
-    return this.currentQuestionIndex >= 0 ? this.seedQuestions[this.currentQuestionIndex] : '';
-  }
-
-  // TTS method
-  public async speakQuestion(text: string): Promise<void> {
-    return new Promise<void>((resolve) => {
-      const utterance = new SpeechSynthesisUtterance(text);
-      utterance.lang = 'en-IN';
-      utterance.pitch = 1;
-      utterance.rate = 1;
-      utterance.volume = 1;
-      utterance.onend = () => resolve();
-      window.speechSynthesis.cancel();
-      window.speechSynthesis.speak(utterance);
-    });
-  }
-
-  // Speech recognition stub
-  public startRecognitionWithRecording(idx: number) {
-    const Ctor = (window as any).webkitSpeechRecognition || (window as any).SpeechRecognition;
-    if (!Ctor) {
-      alert('Speech Recognition not supported on this browser.');
-      return;
+    let briefDescriptionToSend = this.briefDescription?.trim() || '';
+    if (!briefDescriptionToSend) {
+      briefDescriptionToSend = 
+        sessionStorage.getItem('briefDescription')?.trim() || 
+        this.caseData?.briefDescription?.trim() || 
+        this.caseData?.police?.information?.trim() || 
+        this.caseData?.crime?.trim() || 
+        '';
     }
-    this.recognition = new Ctor();
-    this.recognition.lang = 'en-IN';
-    this.recognition.continuous = true;
-    this.recognition.interimResults = true;
-    let hasStartedSpeaking = false;
-    let silenceTimer: any = null;
-    this.recognition.onresult = (event: any) => {
-      const transcript = Array.from(event.results)
-        .map((res: any) => res[0].transcript)
-        .join(' ')
-        .trim();
-      this.liveTranscription = transcript; // <-- This is critical!
-      if (transcript.length > 0 && !hasStartedSpeaking) {
-        hasStartedSpeaking = true;
-        this.isRecording = true;
-      }
-      // Reset silence detection timer
-      clearTimeout(silenceTimer);
-      silenceTimer = setTimeout(() => {
-        if (hasStartedSpeaking) {
-          // Only stop recognition, do not set isRecording = false here
-          this.recognition.stop();
-        }
-      }, 2000); // Stop after 2 seconds of silence
-    };
-    this.recognition.onend = () => {
-      clearTimeout(silenceTimer);
-      // Do NOT set isRecording = false here
-      this.status.set('processing');
-      // Do NOT auto-advance to next question here. Wait for user to click Next Question.
+    const sessionResponse = await this.pyDetectService.startSession(briefDescriptionToSend).toPromise();
+    this.sessionId = sessionResponse.session_id;
+    sessionStorage.setItem('sessionId', this.sessionId);
+    localStorage.setItem('sessionId', this.sessionId);
+    const caseData = this.caseData || {};
+    const caseDataToSend = {
+      ...caseData,
+      brief_description: briefDescriptionToSend
     };
-    this.recognition.onerror = (err: any) => {
-      // Do NOT set isRecording = false here
-      this.status.set('idle');
-    };
-    this.recognition.start();
+    await this.pyDetectService.submitCaseDetails(
+      this.sessionId,
+      caseDataToSend,
+      briefDescriptionToSend
+    ).toPromise();
+    if (briefDescriptionToSend && briefDescriptionToSend.length > 0) {
+      const questionsResponse = await this.pyDetectService.askQuestion(
+        this.sessionId,
+        this.crimeType,
+        briefDescriptionToSend
+      ).toPromise();
+      if (questionsResponse && questionsResponse.questions && questionsResponse.questions.length > 0) {
+        this.questions = questionsResponse.questions;
+        this.currentQuestion = this.questions[0];
+        this.currentQuestionIndex = 0;
+        this.questionCount = this.questions.length;
+  this.questionNumber = 1;
+        // Optionally, update UI to show the first question
+      } else {
+        this.questions = [];
+        this.currentQuestionIndex = -1;
+      }
+    }
+    this.isSessionStarted = true;
+    this.investigationStarted = true;
+    this.investigationActive = true;
+    this.isLoading = false;
+  } catch (error) {
+    alert('Failed to connect to backend. Please check if the Flask server is running on port 5002.');
+    this.isLoading = false;
   }
-
-  public closeSummary() {
-    this.showSummary = false;
   }
-
-  // Navigate to the validation page
-  navigateToValidationPage() {
-    this.router.navigate(['/validationpage']);
-  }
-
-  // Start timer when recording starts
-  public startRecordingTimer(durationSeconds: number) {
-    let elapsed = 0;
-    let remaining = durationSeconds;
-    this.elapsedTime = '00:00';
-    this.remainingTime = this.formatTime(durationSeconds);
-    clearInterval(this.recordingTimerInterval);
-    this.recordingTimerInterval = setInterval(() => {
-      if (this.isRecording) {
-        elapsed++;
-        remaining--;
-        this.elapsedTime = this.formatTime(elapsed);
-        this.remainingTime = this.formatTime(remaining);
-        if (remaining <= 0) {
-          clearInterval(this.recordingTimerInterval);
+  public isVoiceRecording: boolean = false;
+
+    // Start audio recording and speech recognition
+    public async startAudioRecording() {
+      // Debounce: Prevent rapid start
+      if (this.isVoiceRecording) return;
+      // Clear previous answer before starting new recording
+      this.textAnswer = '';
+      console.log('[PyDetect] Voice recording started.');
+      try {
+        // Request microphone access
+        this.mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+        // Setup MediaRecorder
+        const mimeType = this.chooseMimeType();
+        this.mediaRecorder = new MediaRecorder(this.mediaStream, { mimeType });
+        this.audioChunks = [];
+        this.mediaRecorder.ondataavailable = (e) => {
+          if (e.data && e.data.size > 0) this.audioChunks.push(e.data);
+        };
+        this.mediaRecorder.onstop = () => {
+          console.log('[PyDetect] Voice recording stopped.');
+          // Stop speech recognition when recording stops
+          if (this.recognition) {
+            try { this.recognition.stop(); } catch {}
+          }
+          // UI feedback if no transcript
+          if (!this.transcriptSoFar) {
+            this.infoText = 'No voice detected. Please try again or type your answer.';
+          } else {
+            this.infoText = 'Voice recording stopped.';
+          }
+        };
+        this.mediaRecorder.start();
+        // Setup speech recognition
+        const Ctor = window.webkitSpeechRecognition || window.SpeechRecognition;
+        if (Ctor) {
+          this.recognition = new Ctor();
+          this.recognition.lang = 'en-IN';
+          this.recognition.continuous = true;
+          this.recognition.interimResults = false;
+          this.transcriptSoFar = '';
+          this.recognition.onstart = () => {
+            this.infoText = 'Listening...';
+          };
+          this.recognition.onresult = (event: any) => {
+            let finalText = '';
+            for (let i = event.resultIndex; i < event.results.length; i++) {
+              const result = event.results[i];
+              if (result.isFinal) {
+                finalText += result[0].transcript.trim();
+              }
+            }
+            this.transcriptSoFar = finalText.trim();
+            this.textAnswer = this.transcriptSoFar;
+          };
+          this.recognition.onerror = (error: any) => {
+            this.infoText = 'Speech recognition error: ' + error.error;
+          };
+          this.recognition.onend = () => {
+            if (!this.transcriptSoFar) {
+              this.infoText = 'No voice detected. Please try again or type your answer.';
+            } else {
+              this.infoText = 'Voice recording stopped.';
+            }
+          };
+          this.recognition.start();
+        } else {
+          this.infoText = 'Speech Recognition not supported.';
         }
+        this.isVoiceRecording = true;
+      } catch (err) {
+        this.infoText = 'Could not start audio recording.';
       }
-    }, 1000);
-  }
-
-  public stopRecordingTimer() {
-    clearInterval(this.recordingTimerInterval);
+    }
+public async toggleVoiceRecording() {
+  if (this.isVoiceRecording) {
+    this.stopAudioRecording();
+    this.isVoiceRecording = false;
+    this.infoText = 'Voice recording stopped.';
+  } else {
+    await this.startAudioRecording();
+    this.isVoiceRecording = true;
+    this.infoText = 'Voice recording started. Speak your answer.';
   }
+}
 
-  private formatTime(seconds: number): string {
-    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
-    const s = (seconds % 60).toString().padStart(2, '0');
-    return `${m}:${s}`;
-  }
+// Ensure the class is properly closed
 }

src/app/py-detect/test-video.component.html

@@ -0,0 +1,2 @@
+<video #videoElement width="400" height="300" autoplay playsinline></video>
+<div *ngIf="!videoStream">Camera is not active.</div>

src/app/question-data.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class QuestionDataService {
+ private questions: any[] = [];
+ private caseDetails: any = {};
+
+ setQuestions(questions: any[]) {
+ this.questions = questions;
+ }
+ getQuestions() {
+ return this.questions;
+ }
+
+ setCaseDetails(details: any) {
+ this.caseDetails = details;
+ }
+ getCaseDetails() {
+ return this.caseDetails;
+ }
+}

src/app/question-summary-page/question-summary-page.component.css

@@ -0,0 +1,821 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
+
+
+
+/* Modern UI header styles from infopage */
+.site-header {
+  background: #011329;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 0;
+  position: relative;
+  z-index: 10;
+  padding-bottom: 0;
+}
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 32px 0 32px;
+  position: relative;
+}
+
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.logo-img-header {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  padding: 4px;
+  margin-top: -6px;
+  margin-bottom: 1vh;
+}
+
+.py-detect-title-header {
+  font-size: 2.1rem;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-weight: 900;
+  letter-spacing: 6px;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  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;
+  }
+
+
+.question-summary-fullpage {
+  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+  background: linear-gradient(120deg, #e0f7fa0%, #f8fafc100%);
+  padding: 0 0 32px 0;
+  padding-bottom: 32px;
+  
+}
+.qs-header {
+  background: linear-gradient(90deg, #f0f9ff 0%, #dbeafe 100%);
+  color: #2563eb;
+  padding: 10px 18px 0;
+  border-radius: 0 0 32px 32px;
+  box-shadow: 0 8px 32px #2563eb22, 0 2px 16px #38bdf822;
+  margin-bottom: 32px;
+  text-align: center;
+}
+.qs-header-title {
+ font-size:2.3rem;
+ font-weight:900;
+ letter-spacing:2px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap:18px;
+}
+.qs-logo {
+ font-size:2.5rem;
+ filter: drop-shadow(02px8px #38bdf8cc);
+}
+.qs-title-main {
+ font-size:2.1rem;
+ font-weight:900;
+ letter-spacing:2px;
+}
+.qs-header-meta {
+ margin-top:12px;
+ font-size:1.08rem;
+ display: flex;
+ flex-wrap: wrap;
+ gap:18px;
+ justify-content: center;
+ align-items: center;
+}
+.qs-meta-label {
+  color: #0e0f10b5;
+  font-weight: 700;
+  margin-right: 2px;
+}
+.qs-verdict {
+ color: #22c55e;
+ font-weight:900;
+ font-size:1.13em;
+}
+
+.qs-summary-section {
+ display: flex;
+ flex-wrap: wrap;
+ gap:32px;
+ justify-content: center;
+ margin-bottom:24px;
+}
+.qs-summary-block, .qs-observations-block {
+ background: #fff;
+ border-radius:1.2rem;
+ box-shadow:0 2px 12px #2563eb22;
+ padding:18px 24px 12px 24px;
+ min-width:320px;
+ max-width:480px;
+ flex:11320px;
+ color: #23272b;
+}
+.qs-summary-title, .qs-observations-title {
+ color: #2563eb;
+ font-weight:800;
+ font-size:1.18em;
+ margin-bottom:8px;
+}
+.qs-summary-text, .qs-observations-text {
+ color: #23272b;
+ font-size:1.07em;
+}
+
+.qs-extra-section {
+ margin:32px auto 0 auto;
+ max-width:700px;
+ background: #fff;
+ border-radius:1.2rem;
+ box-shadow:0 2px 12px #2563eb22;
+ padding:18px 24px 12px 24px;
+ color: #23272b;
+}
+.qs-extra-title {
+ color: #2563eb;
+ font-weight:800;
+ font-size:1.13em;
+ margin-bottom:8px;
+}
+.qs-extra-list {
+ list-style: none;
+ padding:0;
+ margin:0;
+ color: #23272b;
+ font-size:1.05em;
+}
+.qs-extra-list li {
+ margin-bottom:4px;
+ padding-left:0.5em;
+}
+
+.qs-footer {
+ margin-top:32px;
+ text-align: center;
+ color: #64748b;
+ font-size:1.01em;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap:8px;
+}
+.qs-btn-back {
+ background: linear-gradient(90deg,#64748b,#2563eb);
+ color: #fff;
+ border: none;
+ border-radius:1.2rem;
+ padding:0.5rem 1.2rem;
+ font-size:1.01rem;
+ font-weight:700;
+ letter-spacing:1px;
+ box-shadow:0 1px 8px #38bdf888;
+ cursor: pointer;
+ transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s, border 0.2s;
+ outline: none;
+ margin-top:8px;
+}
+.qs-btn-back:hover {
+ box-shadow:0 4px 12px #38bdf888,0 1px 8px #2563eb44;
+ transform: scale(1.04);
+ border:2px solid #38bdf8;
+}
+.qs-footer-brand {
+ margin-top:8px;
+ font-size:0.98em;
+ color: #b0b0b0;
+}
+.download-btn {
+ background: linear-gradient(90deg,#38bdf8,#2563eb);
+ color: #fff;
+ border: none;
+ border-radius:1.2rem;
+ padding:0.5rem 1.2rem;
+ font-size:1.01rem;
+ font-weight:700;
+ letter-spacing:1px;
+ box-shadow:0 1px 8px #38bdf888;
+ cursor: pointer;
+ margin-top:18px;
+ margin-bottom:0;
+ transition: background 0.3s, box-shadow 0.3s, color 0.2s, transform 0.2s, border 0.2s;
+}
+.download-btn:hover {
+ box-shadow:0 4px 12px #38bdf888,0 1px 8px #2563eb44;
+ transform: scale(1.04);
+ border:2px solid #2563eb;
+}
+.download-btn-container {
+ margin-bottom:0 !important;
+}
+
+/* Footer */
+footer {
+  background: linear-gradient(to right, #011022, #01030a);
+  color: #fff;
+  text-align: center;
+  padding: 10px 0px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 100;
+  margin-top: 0;
+}
+
+.video-card {
+ display: flex;
+ flex-direction: column;
+}
+
+.video-metrics {
+ margin-left: auto;
+ max-width:340px;
+ width:100%;
+ text-align: right;
+}
+
+.qs-video-metrics-card {
+ background: #fff;
+ border-radius:14px;
+ box-shadow:0 4px 24px rgba(0,0,0,0.08);
+ padding:20px 18px;
+ min-width:420px;
+ max-width:600px;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+}
+
+.metrics-sections-row {
+ display: flex;
+ flex-direction: row;
+ gap:18px;
+ justify-content: space-between;
+ min-width:380px;
+ width:100%;
+ max-width:560px;
+}
+
+.metrics-section {
+ flex:110;
+ min-width:0;
+}
+
+.audio-analysis-section {
+ border-right:1px solid #e0e7ef;
+ padding-right:12px;
+ margin-right:12px;
+}
+
+.video-analysis-section {
+ padding-left:12px;
+}
+
+.metrics-section-title {
+ font-weight:600;
+ color: #2563eb;
+ margin-bottom:6px;
+ font-size:1.05rem;
+}
+
+.audio-badges {
+ display: flex;
+ flex-direction: column;
+ gap:8px;
+ margin-bottom:4px;
+}
+.audio-badge {
+ background: #e0f7fa;
+ color: #2563eb;
+ border-radius:8px;
+ padding:4px 10px;
+ font-size:0.95rem;
+ font-weight:500;
+ display: inline-block;
+ margin-bottom:2px;
+}
+.audio-badge.truth { background: #d1fae5; color: #059669; }
+.audio-badge.emotion { background: #fef3c7; color: #b45309; }
+.audio-badge.duration { background: #e0e7ff; color: #3730a3; }
+
+.metrics-grid {
+ width:100%;
+ display: flex;
+ flex-direction: column;
+ gap:8px;
+}
+.metric-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.metric-label {
+ color: #2563eb;
+ font-weight:500;
+}
+.metric-value {
+ font-weight:600;
+ color: #0a192f;
+}
+
+.excel-table {
+ border-collapse: collapse;
+ width:100%;
+ outline:10px solid rgba(100,116,139,0.13); /* subtle gray outline */
+ box-shadow: none;
+}
+.excel-table th, .excel-table td {
+ border:1px solid rgba(100,116,139,0.10); /* faint gray cell borders */
+}
+.excel-table.summary {
+ margin-top:32px;
+ outline:2px solid rgba(100,116,139,0.10);
+ width:100%;
+ border-collapse: collapse;
+ background: #f8fafc;
+ border-radius:12px;
+ box-shadow:0 2px 12px #38bdf822;
+}
+.excel-table.summary th {
+ background: #e0f7fa;
+ color: #2563eb;
+ font-weight:700;
+ font-size:1.08em;
+ padding:10px 14px;
+ border-bottom:2px solid #38bdf822;
+}
+.excel-table.summary td {
+ background: #fff;
+ color: #23272b;
+ font-size:1.04em;
+ padding:10px 14px;
+ border:1px solid rgba(100,116,139,0.08);
+}
+.excel-table.summary tr {
+ transition: background 0.2s;
+}
+.excel-table.summary tr:hover {
+ background: #e0f7fa55;
+}
+.tables-wrapper {
+ max-width:1100px;
+ margin:0 auto;
+ width:100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.excel-table-container,
+.summary-table-container {
+ width:100%;
+ margin:0;
+ max-width:100%;
+}
+
+
+.excel-table.compact,
+.excel-table.summary {
+ width:100%;
+ min-width:0;
+ box-sizing: border-box;
+}
+.summary-table-container {
+ margin-bottom:18px;
+ max-width:100%;
+}
+
+.excel-table-container th {
+  background: #e0f7fa;
+  color: #2563eb;
+  font-weight: 700;
+  font-size: 1.08em;
+  padding: 10px 14px;
+  border-bottom: 2px solid #38bdf822;
+}
+
+@media (max-width:700px) {
+ .qs-video-metrics-card {
+ min-width:0;
+ max-width:100%;
+ }
+ .metrics-sections-row {
+ flex-direction: column;
+ gap:12px;
+ }
+ .audio-analysis-section {
+ border-right: none;
+ border-bottom:1px solid #e0e7ef;
+ padding-right:0;
+ margin-right:0;
+ padding-bottom:10px;
+ margin-bottom:10px;
+ }
+}
+
+/* Added styles */
+.view-details-icon {
+ display: inline-block;
+ cursor: pointer;
+ color: #2563eb;
+ background: #e0f7fa;
+ border-radius:50%;
+ padding:6px 10px;
+ transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+ font-size:1.2em;
+ box-shadow:0 2px 8px #2563eb22;
+ margin-left:6px;
+}
+.view-details-icon:hover, .view-details-icon:focus {
+ background: #2563eb;
+ color: #fff;
+ box-shadow:0 4px 12px #38bdf888;
+ outline: none;
+}
+
+.excel-table.compact th, .excel-table.compact td {
+ text-align: left;
+ padding:10px 14px;
+ font-size:1.05em;
+}
+
+.excel-table.compact th {
+ background: #e0f7fa;
+ color: #2563eb;
+ font-weight:700;
+}
+
+.excel-table.compact tr:hover {
+ background: #e0f7fa55;
+}
+
+/* Pagination controls */
+.pagination-controls {
+ display:flex;
+ gap:8px;
+ justify-content:center;
+ align-items:center;
+ margin-top:18px;
+}
+.page-btn, .page-number {
+ background: linear-gradient(90deg,#38bdf8,#2563eb);
+ color:#fff;
+ border:none;
+ padding:6px 10px;
+ border-radius:8px;
+ font-weight:700;
+ cursor:pointer;
+ transition: transform 0.16s ease, box-shadow 0.16s ease;
+}
+.page-btn[disabled], .page-number[disabled] {
+ opacity:0.5;
+ cursor:not-allowed;
+}
+.page-number { background: transparent; color: #0b3b72; border:1px solid rgba(3,102,214,0.08); padding:6px 8px; }
+.page-number.active { background: linear-gradient(90deg,#38bdf8,#2563eb); color:#fff; box-shadow:0 6px 16px rgba(3,102,214,0.12); }
+/* Results toolbar centered pagination */
+.results-toolbar {
+ display: flex;
+ align-items: center;
+ justify-content: center; /* center the pagination bar */
+ background: #f3f4f6; /* light gray bar */
+ padding:12px 16px;
+ border-radius:6px;
+ gap:16px;
+}
+
+.pagination-bar {
+ display: flex;
+ align-items: center;
+ gap:14px;
+}
+
+.page-info {
+ color: #6b7280;
+ font-size:0.95rem;
+ margin-right:8px;
+}
+
+.pagination-controls {
+ display: flex;
+ align-items: center;
+ gap:8px;
+}
+
+.page-prev, .page-next {
+ background: transparent;
+ border: none;
+ color: #6b7280;
+ font-weight:600;
+ cursor: pointer;
+}
+
+.page-number {
+ width:32px;
+ height:32px;
+ min-width:32px;
+ border-radius:50%;
+ border:1px solid transparent;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background: transparent;
+ color: #6b7280;
+ font-weight:600;
+ cursor: pointer;
+}
+
+.page-number.active {
+ background: #6366f1; /* primary blue/purple */
+ color: #fff;
+ box-shadow:0 6px 16px rgba(99,102,241,0.18);
+}
+
+.ellipsis {
+ color: #9ca3af;
+ padding:4px 6px;
+}
+
+.page-size-select {
+ margin-left: auto; /* keep selector to the right if parent allows */
+}
+
+/* Make the toolbar span full width but keep content centered */
+.results-toolbar {
+ width:100%;
+ max-width:960px;
+ margin:12px auto;
+}
+
+/* New professional centered pagination toolbar */
+.results-toolbar-new {
+ background: #f8fafc; /* very light gray */
+ padding:18px 12px;
+ border-top:1px solid #e6e9ef;
+ border-bottom:1px solid #e6e9ef;
+ margin-top:18px;
+}
+.results-toolbar-new .toolbar-inner {
+ max-width:920px;
+ margin:0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap:18px;
+}
+
+/* Position the left-controls (results mini + entries select) in the toolbar */
+.results-toolbar-new { position: relative; }
+
+/* place the grouped left-controls at the left of the toolbar */
+.results-toolbar-new .toolbar-inner .left-controls {
+ position: absolute;
+ left:18px;
+ top:50%;
+ transform: translateY(-50%);
+ display: flex;
+ gap:12px;
+ align-items: center;
+}
+
+/* results mini stays left within the group */
+.results-toolbar-new .toolbar-inner .results-summary-mini {
+ margin:0;
+ margin-right:8px;
+ justify-content: flex-start;
+}
+
+/* entries select appears immediately to the right of results mini */
+.results-toolbar-new .toolbar-inner .entries-select {
+ display: flex;
+ align-items: center;
+ gap:8px;
+ margin-left:190px;
+}
+
+/* Keep existing hide behavior on small screens */
+@media (max-width:640px) {
+ .results-toolbar-new .toolbar-inner .left-controls { display: none; }
+}
+
+.page-info {
+ color: #6b7280;
+ font-size:0.95rem;
+ margin-right:8px;
+}
+
+.pagination-list {
+ list-style: none;
+ display: flex;
+ align-items: center;
+ gap:10px;
+ padding:0;
+ margin:0;
+}
+
+.pagination-list li { display: inline-flex; }
+
+.page-number {
+ width:36px;
+ height:36px;
+ min-width:36px;
+ border-radius:50%;
+ border: none;
+ background: transparent;
+ color: #111827;
+ font-weight:600;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
+}
+
+.page-number:hover { transform: translateY(-4px); }
+
+.page-number.active {
+ background: #6366f1; /* indigo/purple */
+ color: #fff;
+ box-shadow:0 8px 24px rgba(99,102,241,0.18);
+}
+
+.dots {
+ color: #9ca3af;
+ padding:06px;
+}
+
+.nav-btn {
+ background: transparent;
+ border: none;
+ color: #6b7280;
+ font-weight:600;
+ padding:6px 8px;
+ cursor: pointer;
+}
+
+.nav-btn[disabled] { opacity:0.45; cursor: default; }
+
+@media (max-width:640px) {
+ .results-toolbar-new .toolbar-inner { gap:10px; }
+ .page-info { display: none; }
+ .page-number { width:30px; height:30px; min-width:30px; }
+}
+
+/* Back button styling — gradient and subtle animation to match page design */
+.back-btn {
+  background: linear-gradient(90deg,#38bdf8,#2563eb);
+  color: #fff;
+  border: none;
+  border-radius: 12px;
+  padding: 8px 14px;
+  font-size: 0.98rem;
+  font-weight: 800;
+  letter-spacing: 0.6px;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(56,189,248,0.12);
+  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, filter 220ms ease;
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+  .back-btn .back-icon {
+    font-weight: 900;
+    margin-right: 6px;
+  }
+
+  .back-btn:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 18px 40px rgba(56,189,248,0.18);
+    filter: saturate(1.05);
+  }
+
+  .back-btn:active {
+    transform: translateY(-1px) scale(0.995);
+  }
+
+  /* subtle sheen on hover */
+  .back-btn::after {
+    content: "";
+    position: absolute;
+    left: -40%;
+    top: -40%;
+    width: 80%;
+    height: 180%;
+    background: linear-gradient(120deg, rgba(255,255,255,0.18)0%, rgba(255,255,255,0.02)60%, rgba(255,255,255,0)100%);
+    transform: rotate(-25deg) translateX(-30%);
+    transition: transform 550ms cubic-bezier(.2,.9,.2,1), opacity 350ms ease;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .back-btn:hover::after {
+    transform: rotate(-25deg) translateX(120%);
+    opacity: 1;
+  }
+
+  /* accessible focus ring */
+  .back-btn:focus {
+    outline: 3px solid rgba(56,189,248,0.18);
+    outline-offset: 2px;
+  }
+
+@media (max-width:520px) {
+  .back-btn {
+    padding: 6px 10px;
+    font-size: 0.92rem;
+    border-radius: 10px;
+  }
+}
+
+/* small results summary on question summary page */
+.results-summary-mini { display:flex; align-items:center; gap:8px; color:#0b3b72; font-weight:700; justify-self:start; }
+.results-summary-mini .fa { color:#6b7280; }
+.results-mini-text { font-size:0.98rem; }
+
+@media (max-width:640px) {
+ .results-summary-mini { display:none; }
+}
+
+/* Position the small results summary to the left corner of the centered toolbar */
+.results-toolbar-new {
+ position: relative; /* allow absolute positioning of children */
+}
+
+.results-toolbar-new .results-summary-mini {
+ position: absolute;
+ left:18px; /* align to left edge of toolbar area */
+ top:50%;
+ transform: translateY(-50%);
+ justify-content: flex-start;
+}
+
+/* Ensure it does not overlap on very small screens (keep existing hide behavior) */
+@media (max-width:640px) {
+ .results-toolbar-new .results-summary-mini { display: none; }
+}

src/app/question-summary-page/question-summary-page.component.html

@@ -0,0 +1,131 @@
+<!-- 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 class="header-actions-right">
+ <button class="back-btn" (click)="goBack()">
+ <span class="back-icon">←</span> Back to Validation Summary
+ </button>
+ </div>
+ </div>
+</div>
+
+<div class="question-summary-fullpage">
+ <div class="qs-header-row">
+ <header class="qs-header">
+ <div class="qs-header-title">
+ <span class="qs-logo">🕵️‍♂️</span>
+ <span class="qs-title-main">Investigation Question Summary</span>
+ </div>
+ <div class="qs-header-meta">
+ <span class="qs-meta-label">Case ID:</span> <b>{{ caseDetails.caseId || '—' }}</b>
+ <span class="qs-meta-label">Officer:</span> <b>{{ caseDetails.officer || '—' }}</b>
+ <span class="qs-meta-label">Suspect:</span> <b>{{ caseDetails.suspect || '—' }}</b>
+ <span class="qs-meta-label">Date:</span> <b>{{ caseDetails.date || '—' }}</b>
+ <span class="qs-meta-label">Verdict:</span> <b class="qs-verdict">{{ caseDetails.verdict || '—' }}</b>
+ </div>
+ <div style="margin-top:18px; text-align:center;">
+ <button class="download-btn" (click)="downloadExcel()">
+ 📊 Download Questions & Answers
+ </button>
+ </div>
+ </header>
+ </div>
+
+ <div class="excel-table-container">
+ <table class="excel-table compact">
+ <thead>
+ <tr>
+ <th>S. No</th>
+ <th>Question</th>
+ <th>Answer</th>
+ <th>Truth Probability</th>
+ <th>Dominant Emotion</th>
+ <th>View Details</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let q of pagedQuestions; let i = index">
+ <td>{{ (currentPage -1) * pageSize + i +1 }}</td>
+ <td>{{q.text}}</td>
+ <td>{{q.answer}}</td>
+ <td>{{q.truthProbability}}%</td>
+ <td>{{q.dominantEmotion}}</td>
+ <td>
+ <span class="view-details-icon" 
+ matTooltip="View Details" 
+ (click)="viewDetails(i)"
+ tabindex="0">
+ <i class="fa fa-eye"></i>
+ </span>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <!-- Results toolbar (professional centered pagination) -->
+<div class="results-toolbar-new" *ngIf="totalPages >1">
+ <div class="toolbar-inner">
+ <div class="left-controls">
+ <div class="results-summary-mini">
+ <i class="fa fa-list" aria-hidden="true"></i>
+ <span class="results-mini-text">Results: {{ resultsStart }} - {{ resultsEnd }} of {{ totalResults }}</span>
+ </div>
+ <div class="entries-select">
+ <label for="pageSizeSelect">Show</label>
+ <select id="pageSizeSelect" (change)="changePageSize($event)">
+ <option [value]="5" [selected]="pageSize===5">5</option>
+ <option [value]="10" [selected]="pageSize===10">10</option>
+ <option [value]="20" [selected]="pageSize===20">20</option>
+ </select>
+ <span class="entries-label">entries</span>
+ </div>
+ </div>
+
+ <div class="page-info">Page {{ currentPage }} of {{ totalPages }}</div>
+
+ <ul class="pagination-list" role="navigation" aria-label="Pagination">
+ <li>
+ <button class="nav-btn" (click)="prevPage()" [disabled]="currentPage ===1" aria-label="Previous page">«</button>
+ </li>
+
+ <ng-container *ngFor="let p of visiblePages()">
+ <li *ngIf="p === '...'" class="dots">…</li>
+ <li *ngIf="p !== '...'">
+ <button
+ class="page-number"
+ [class.active]="currentPage === +p"
+ (click)="goToPage(+p)"
+ [attr.aria-current]="currentPage === +p ? 'page' : null">
+ {{ p }}
+ </button>
+ </li>
+ </ng-container>
+
+ <li>
+ <button class="nav-btn" (click)="nextPage()" [disabled]="currentPage === totalPages" aria-label="Next page">»</button>
+ </li>
+ </ul>
+ </div>
+</div>
+
+ <footer>
+ <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+ </footer>
+</div>

src/app/question-summary-page/question-summary-page.component.ts

@@ -0,0 +1,266 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import * as XLSX from 'xlsx';
+import { saveAs } from 'file-saver';
+// @ts-ignore
+import jsPDF from 'jspdf';
+// @ts-ignore
+import autoTable from 'jspdf-autotable';
+import { QuestionDataService } from '../question-data.service';
+
+@Component({
+  selector: 'app-question-summary-page',
+  templateUrl: './question-summary-page.component.html',
+  styleUrls: ['./question-summary-page.component.css']
+})
+export class QuestionSummaryPageComponent {
+  // pagination
+  pageSize = 5;
+  currentPage = 1;
+
+  // Example investigation/case details (replace/fetch as needed)
+  caseDetails = {
+    caseId: 'CASE-007',
+    officer: 'Ganesh',
+    suspect: 'Jeeva',
+    date: '2025-10-15',
+    verdict: 'Consistent',
+    summary: 'The suspect displayed calm emotions overall but showed minor inconsistency in hand gestures. Recommendation: Conduct a short follow-up session.',
+    observations: 'During questioning, the suspect showed hesitation when discussing the time of the incident. Eye movement frequency decreased by25% during key questions. Speech tone remained steady, indicating partial honesty. Recommendation: Further questioning advised for financial motive discussion.',
+    location: 'Chennai',
+    sessionTime: '00:42:18',
+    progress: 92,
+    status: 'Closed'
+  };
+
+  questions = [
+    { text: 'Did you visit the location on 12th?', answer: 'Yes, I was there for about 20 minutes.', duration: '00:18', truthProbability: 78, dominantEmotion: 'Nervous 😟', body: 'ajslkdfjsa ldfjlska', bodyScore: 33, voice: 'aksjdfkls jadflk', voiceScore: 23, overallScore: '66%', emotion: 'Calm', videoUrl: '', audioUrl: '', eyeContact: '78%', blinkRate: '12/min', posture: 'Neutral', handMovement: 'Low', legMovement: 'Moderate', microExpressions: '2 detected', stressLevel: 68, confidence: 'Moderate', sentiment: 'Negative (-0.45)', responseDelay: '3.1 sec' },
+    { text: 'Were you alone at the scene?', answer: 'No, my friend was with me.', duration: '00:22', truthProbability: 62, dominantEmotion: 'Nervous 😟', body: '', bodyScore: '', voice: '', voiceScore: '', overallScore: '', emotion: 'Nervous', videoUrl: '', audioUrl: '', eyeContact: '65%', blinkRate: '15/min', posture: 'Defensive', handMovement: 'Medium', legMovement: 'Low', microExpressions: '3 detected', stressLevel: 72, confidence: 'Low', sentiment: 'Negative (-0.32)', responseDelay: '2.7 sec' },
+    { text: 'Did you know the victim?', answer: 'Yes, we worked together.', duration: '00:15', truthProbability: 85, dominantEmotion: 'Calm 😌', body: '', bodyScore: '', voice: '', voiceScore: '', overallScore: '', emotion: 'Calm', videoUrl: '', audioUrl: '', eyeContact: '82%', blinkRate: '10/min', posture: 'Relaxed', handMovement: 'Low', legMovement: 'Low', microExpressions: '1 detected', stressLevel: 38, confidence: 'High', sentiment: 'Positive (+0.22)', responseDelay: '1.2 sec' },
+    { text: 'Did you handle any objects?', answer: 'I picked up a bag to check for ID.', duration: '00:19', truthProbability: 44, dominantEmotion: 'Defensive 🛡️', body: '', bodyScore: '', voice: '', voiceScore: '', overallScore: '', emotion: 'Defensive', videoUrl: '', audioUrl: '', eyeContact: '55%', blinkRate: '18/min', posture: 'Tense', handMovement: 'High', legMovement: 'High', microExpressions: '4 detected', stressLevel: 81, confidence: 'Low', sentiment: 'Negative (-0.61)', responseDelay: '4.0 sec' },
+    // Demo questions added so paginator is visible
+    { text: 'What time did the incident occur?', answer: 'Around 9 PM.', duration: '00:12', truthProbability: 71, dominantEmotion: 'Calm 😌', body: '', bodyScore: '', voice: '', voiceScore: '', overallScore: '', emotion: 'Calm', videoUrl: '', audioUrl: '', eyeContact: '70%', blinkRate: '11/min', posture: 'Relaxed', handMovement: 'Low', legMovement: 'Low', microExpressions: '1 detected', stressLevel: 40, confidence: 'High', sentiment: 'Neutral (0.00)', responseDelay: '1.0 sec' },
+    { text: 'Did anyone else accompany you?', answer: 'No one else was present.', duration: '00:10', truthProbability: 79, dominantEmotion: 'Calm 😌', body: '', bodyScore: '', voice: '', voiceScore: '', overallScore: '', emotion: 'Calm', videoUrl: '', audioUrl: '', eyeContact: '80%', blinkRate: '9/min', posture: 'Neutral', handMovement: 'Low', legMovement: 'Low', microExpressions: '0 detected', stressLevel: 34, confidence: 'High', sentiment: 'Positive (+0.15)', responseDelay: '0.8 sec' }
+  ];
+
+  constructor(private router: Router, public questionDataService: QuestionDataService) { }
+
+  // pagination helpers
+  get totalPages(): number {
+    return Math.max(1, Math.ceil(this.questions.length / this.pageSize));
+  }
+
+  get pagedQuestions() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    return this.questions.slice(start, start + this.pageSize);
+  }
+
+  goToPage(page: number) {
+    if (page < 1) page = 1;
+    if (page > this.totalPages) page = this.totalPages;
+    this.currentPage = page;
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  prevPage() { this.goToPage(this.currentPage - 1); }
+  nextPage() { this.goToPage(this.currentPage + 1); }
+
+  // Helpers required by template
+  get totalResults(): number {
+    return this.questions.length;
+  }
+
+  get resultsStart(): number {
+    if (this.totalResults === 0) return 0;
+    return (this.currentPage - 1) * this.pageSize + 1;
+  }
+
+  get resultsEnd(): number {
+    return Math.min(this.currentPage * this.pageSize, this.totalResults);
+  }
+
+  changePageSize(eventOrSize: any) {
+    let newSize: any = eventOrSize;
+    // If event passed from template, extract value safely
+    if (eventOrSize && typeof eventOrSize === 'object' && 'target' in eventOrSize) {
+      const target = eventOrSize.target as HTMLSelectElement | null;
+      newSize = target?.value;
+    }
+    const size = Number(newSize) || 5;
+    this.pageSize = size;
+    this.currentPage = 1;
+  }
+
+  visiblePages(): (number | string)[] {
+    const total = this.totalPages;
+    const current = this.currentPage;
+    const pages: (number | string)[] = [];
+    if (total <= 7) {
+      for (let i = 1; i <= total; i++) pages.push(i);
+      return pages;
+    }
+    pages.push(1);
+    if (current > 4) pages.push('...');
+    const start = Math.max(2, Math.min(current - 1, total - 4));
+    const end = Math.min(total - 1, start + 2);
+    for (let i = start; i <= end; i++) pages.push(i);
+    if (end < total - 1) pages.push('...');
+    pages.push(total);
+    return pages;
+  }
+
+  goBack() {
+    this.router.navigate(['/validationpage']);
+  }
+
+  navigateHome() {
+    // TODO: Implement navigation to home page
+  }
+
+  navigateBackToPyDetect() {
+    // TODO: Implement navigation to PyDetect investigation page
+  }
+
+  downloadExcel() {
+    // First header row (group headers)
+    const header1 = [
+      'S. No', 'Case ID', 'Officer', 'Date',
+      'Question', 'Answer', 'Duration', 'Truth Probability', 'Dominant Emotion', 'Emotion',
+      'Audio Analysis', '', '', '', '',
+      'Video Analysis', '', '', '', '', '',
+      'Physical Expression', 'Physical Score', 'Voice Expression', 'Voice Score', 'Overall Score'
+    ];
+    // Second header row (sub-headers)
+    const header2 = [
+      '', '', '', '',
+      '', '', '', '', '', '',
+      'Stress Level', 'Confidence', 'Sentiment', 'Response Delay',
+      'Eye Contact', 'Blink Rate', 'Posture', 'Hand Movement', 'Leg Movement', 'Micro Expressions',
+      '', '', '', '', '', ''
+    ];
+    // Data rows for main table, now with S. No and summary columns
+    const dataRows = this.questions.map((q, i) => [
+      i + 1,
+      this.caseDetails.caseId || '',
+      this.caseDetails.officer || '',
+      this.caseDetails.date || '',
+      q.text,
+      q.answer,
+      q.duration,
+      (q.truthProbability !== undefined ? q.truthProbability + '%' : ''),
+      q.dominantEmotion || '',
+      q.emotion || '',
+      q.stressLevel || '',
+      q.confidence || '',
+      q.sentiment || '',
+      q.responseDelay || '',
+      q.eyeContact || '',
+      q.blinkRate || '',
+      q.posture || '',
+      q.handMovement || '',
+      q.legMovement || '',
+      q.microExpressions || '',
+      this.getPhysicalExpressionSummary(q),
+      this.getPhysicalScore(q),
+      this.getVoiceExpressionSummary(q),
+      this.getVoiceScore(q),
+      this.getOverallScore(q)
+    ]);
+
+    // Combine all data for export
+    const wsData = [header1, header2, ...dataRows];
+    const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+    // Merge cells for group headers (main table only)
+    ws['!merges'] = [
+      { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } }, // S. No
+      { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } }, // Case ID
+      { s: { r: 0, c: 2 }, e: { r: 1, c: 2 } }, // Officer
+      { s: { r: 0, c: 3 }, e: { r: 1, c: 3 } }, // Date
+      { s: { r: 0, c: 4 }, e: { r: 1, c: 4 } }, // Question
+      { s: { r: 0, c: 5 }, e: { r: 1, c: 5 } }, // Answer
+      { s: { r: 0, c: 6 }, e: { r: 1, c: 6 } }, // Duration
+      { s: { r: 0, c: 7 }, e: { r: 1, c: 7 } }, // Truth Probability
+      { s: { r: 0, c: 8 }, e: { r: 1, c: 8 } }, // Dominant Emotion
+      { s: { r: 0, c: 9 }, e: { r: 1, c: 9 } }, // Emotion
+      { s: { r: 0, c: 10 }, e: { r: 0, c: 14 } }, // Audio Analysis group
+      { s: { r: 0, c: 15 }, e: { r: 0, c: 20 } }, // Video Analysis group
+      { s: { r: 0, c: 21 }, e: { r: 1, c: 21 } }, // Physical Expression
+      { s: { r: 0, c: 22 }, e: { r: 1, c: 22 } }, // Physical Score
+      { s: { r: 0, c: 23 }, e: { r: 1, c: 23 } }, // Voice Expression
+      { s: { r: 0, c: 24 }, e: { r: 1, c: 24 } }, // Voice Score
+      { s: { r: 0, c: 25 }, e: { r: 1, c: 25 } } // Overall Score
+    ];
+
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Questions');
+    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
+    saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'questions-and-answers.xlsx');
+  }
+
+  getPhysicalExpressionSummary(q: any): string {
+    let parts = [];
+    if (q.posture) parts.push(q.posture);
+    if (q.handMovement) parts.push(q.handMovement + ' hand');
+    if (q.legMovement) parts.push(q.legMovement + ' leg');
+    if (q.microExpressions) parts.push(q.microExpressions);
+    return parts.length ? parts.join(', ') : '—';
+  }
+  getPhysicalScore(q: any): string {
+    let scores = [];
+    if (typeof q.handMovement === 'number') scores.push(q.handMovement);
+    if (typeof q.legMovement === 'number') scores.push(q.legMovement);
+    const match = (q.microExpressions || '').match(/(\d+)/);
+    if (match) scores.push(Number(match[1]));
+    if (scores.length === 0) return '—';
+    return Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) + '%';
+  }
+  getVoiceExpressionSummary(q: any): string {
+    let parts = [];
+    if (q.stressLevel !== undefined) parts.push('Stress ' + q.stressLevel);
+    if (q.confidence) parts.push('Conf ' + q.confidence);
+    if (q.sentiment) parts.push('Sent ' + this.getSentimentPercent(q.sentiment));
+    if (q.responseDelay) parts.push('Delay ' + q.responseDelay);
+    return parts.length ? parts.join(', ') : '—';
+  }
+  getVoiceScore(q: any): string {
+    let scores = [];
+    if (typeof q.stressLevel === 'number') scores.push(q.stressLevel);
+    if (typeof q.confidence === 'number') scores.push(q.confidence);
+    else if (q.confidence === 'High') scores.push(90);
+    else if (q.confidence === 'Moderate') scores.push(60);
+    else if (q.confidence === 'Low') scores.push(30);
+    if (scores.length === 0) return '—';
+    return Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) + '%';
+  }
+  getOverallScore(q: any): string {
+    // Example: average of physical and voice scores
+    const phys = this.getPhysicalScore(q);
+    const voice = this.getVoiceScore(q);
+    const physNum = parseInt(phys);
+    const voiceNum = parseInt(voice);
+    if (isNaN(physNum) && isNaN(voiceNum)) return '—';
+    if (isNaN(physNum)) return voice;
+    if (isNaN(voiceNum)) return phys;
+    return Math.round((physNum + voiceNum) / 2) + '%';
+  }
+  getSentimentPercent(sentiment: string): string {
+    if (!sentiment) return '';
+    const match = sentiment.match(/([+-]?\d*\.?\d+)/);
+    if (match) {
+      const value = parseFloat(match[1]);
+      const percent = Math.round(value * 100);
+      return (percent > 0 ? '+' : '') + percent + '%';
+    }
+    return sentiment;
+  }
+
+  viewDetails(index: number) {
+    // Set live data in service before navigation
+    const normalized = this.questions.map((q: any) => ({ ...q, question: q.question ?? q.text ?? '' }));
+    this.questionDataService.setQuestions(normalized);
+    this.questionDataService.setCaseDetails(this.caseDetails);
+    const absoluteIndex = (this.currentPage - 1) * this.pageSize + index;
+    this.router.navigate(['/view-details', absoluteIndex]);
+  }
+}

src/app/recordpage/recordpage.component.css

@@ -1,6 +1,131 @@
+/* ===== Header ===== */
+:root {
+ --masthead-min-height:140px;
+ --analytics-blue-height:110px;
+ --primary-accent: #2563eb;
+ --primary-accent-light: #38bdf8;
+ --primary-accent-dark: #1e40af;
+ --secondary-accent: #7c3aed;
+ --card-radius:14px;
+ --card-shadow:06px24px rgba(30,41,59,0.13);
+ --section-gap:32px;
+}
+
+body, main.content {
+ background: #f4f6fa;
+ min-height:100vh;
+ margin:0;
+ overflow-y: auto;
+ font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+ animation: fadeInPage0.7s cubic-bezier(0.4,0.2,0.2,1) both;
+}
+
+@keyframes fadeInPage {
+ from { opacity:0; transform: translateY(32px); }
+ to { opacity:1; transform: none; }
+}
+
+/* Card hover animation */
+.record-card, .summary-card, .section-block, .subgroup-block {
+ transition: box-shadow 0.25s, transform 0.18s;
+}
+.record-card:hover, .summary-card:hover, .section-block:hover, .subgroup-block:hover {
+ box-shadow:08px 32px #2563eb33,02px 8px #38bdf822;
+ /*transform: translateY(-2px) scale(1.012);*/
+}
+
+/* Table row hover animation */
+.record-table tr {
+ transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
+}
+.record-table tr:hover td {
+ background: #e0f2fe;
+ box-shadow:02px 12px #38bdf822;
+ transform: scale(1.01);
+}
+
+/* Button and icon-btn animation */
+.btn, .icon-btn {
+ transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
+}
+.btn:hover, .icon-btn:hover {
+ transform: scale(1.08) rotate(-2deg);
+ box-shadow:04px 16px #2563eb33;
+}
+
+/* Modal fade/slide in */
+.modal-backdrop {
+ animation: fadeInModalBg0.4s cubic-bezier(0.4,0.2,0.2,1) both;
+}
+@keyframes fadeInModalBg {
+ from { opacity:0; }
+ to { opacity:1; }
+}
+.modal {
+ animation: slideInModal0.5s cubic-bezier(0.4,0.2,0.2,1) both;
+}
+@keyframes slideInModal {
+ from { opacity:0; transform: translateY(-40px) scale(0.98); }
+ to { opacity:1; transform: none; }
+}
+
+/* Status badge pulse for Open */
+.status-label.status-open, .status-open {
+ animation: pulseStatusOpen1.6s infinite alternate;
+}
+@keyframes pulseStatusOpen {
+ from { box-shadow:0000px #22c55e44; }
+ to { box-shadow:0008px #22c55e11; }
+}
+
+/* Animated icons */
+.icon-btn .fa-spin, .summary-icon .fa-spin {
+ animation: fa-spin1.2s infinite linear;
+}
+@keyframes fa-spin {
+0% { transform: rotate(0deg); }
+100% { transform: rotate(359deg); }
+}
+.icon-btn .fa-bounce, .summary-icon .fa-bounce {
+ animation: fa-bounce1.2s infinite alternate;
+}
+@keyframes fa-bounce {
+0% { transform: translateY(0); }
+100% { transform: translateY(-8px); }
+}
+.icon-btn .fa-beat, .summary-icon .fa-beat {
+ animation: fa-beat1.1s infinite alternate;
+}
+@keyframes fa-beat {
+0% { transform: scale(1); }
+100% { transform: scale(1.18); }
+}
+
+/* Subtle fade for overlays */
+.modal-blur-overlay {
+ animation: fadeInModalBg0.4s cubic-bezier(0.4,0.2,0.2,1) both;
+}
+
+/* Modern Searchbar animation */
+.modern-searchbar-form {
+ transition: box-shadow 0.18s, transform 0.18s;
+}
+.modern-searchbar-form:focus-within {
+ box-shadow:06px 24px #38bdf855;
+ transform: scale(1.03);
+}
+
 /* ===== Header ===== */
 :root {
   --masthead-min-height: 140px;
+  --analytics-blue-height:110px; /* Default, can be overridden inline or in other CSS */
+  --primary-accent: #2563eb;
+  --primary-accent-light: #38bdf8;
+  --primary-accent-dark: #1e40af;
+  --secondary-accent: #7c3aed;
+  --card-radius:14px;
+  --card-shadow:06px24px rgba(30,41,59,0.13);
+  --section-gap:32px;
 }
 
 .masthead {
@@ -49,7 +174,7 @@
   height: auto;
   border-radius: 50%;
   padding: 4px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+  box-shadow: 04px 10px rgba(0, 0, 0, 0.25);
   transition: transform .25s ease;
 }
 
@@ -162,7 +287,6 @@
   font-weight: 800;
   margin-bottom: 12px;
 }*/
-
 /* header tools */
 .toolbar {
   display: flex;
@@ -208,7 +332,144 @@
   overflow: auto;
 }
 
-/* table */
+/* --- Modern Table Refactor Inspired by Example --- */
+
+.record-table {
+ width:100%;
+ border-collapse: separate;
+ border-spacing:0;
+ background: #fff;
+ border-radius:12px;
+ box-shadow:0 2px 12px #2563eb11;
+ overflow: hidden;
+}
+
+.record-table th, .record-table td {
+ padding:14px 14px;
+ font-size:1.08rem;
+ border-bottom:1.5px solid #e5e7eb;
+ text-align: left;
+ white-space: nowrap;
+}
+
+.record-table th {
+ background: #f8fafc;
+ color: #222b45;
+ font-weight:700;
+ font-size:1.08rem;
+ letter-spacing:0.5px;
+ border-bottom:2.5px solid #e5e7eb;
+ text-shadow: none;
+ position: sticky;
+ top:0;
+ z-index:2;
+}
+
+  .record-table th i {
+    color: #e50808;
+    margin-right: 7px;
+    font-size: 1.1em;
+  }
+
+.record-table td {
+ background: #fff;
+ font-size:1.05rem;
+ color: #23272b;
+ vertical-align: middle;
+}
+
+/* Remove alternate row color: force all rows to white */
+.record-table tr:nth-child(odd) td {
+ background: #fff !important;
+}
+
+.record-table tr:hover td {
+ background: #e0f2fe;
+ transition: background 0.18s;
+}
+
+/* Checkbox column */
+.record-table td.select-col, .record-table th.select-col {
+ width:36px;
+ text-align: center;
+ padding-left:10px;
+ padding-right:10px;
+}
+
+/* Status badge */
+.status-label {
+ display: inline-flex;
+ align-items: center;
+ gap:6px;
+ padding:3px 14px;
+ border-radius:12px;
+ font-weight:700;
+ font-size:1em;
+ letter-spacing:0.5px;
+ min-width:70px;
+ text-align: center;
+ background: #e0e7ff;
+ color: var(--primary-accent);
+ box-shadow:0 2px 8px #2563eb11;
+}
+.status-dot {
+ display: inline-block;
+ width:9px;
+ height:9px;
+ border-radius:50%;
+ margin-right:4px;
+}
+.status-open { background: #d1fae5; color: #059669; }
+.status-open .status-dot { background: #059669; }
+.status-under { background: #dbeafe; color: #2563eb; }
+.status-under .status-dot { background: #2563eb; }
+.status-closed { background: #fee2e2; color: #dc2626; }
+.status-closed .status-dot { background: #dc2626; }
+
+.record-table td.actions-col, .record-table th.actions-col {
+ min-width:80px;
+ text-align: left;
+ padding-right:18px;
+}
+
+.icon-btn {
+ margin:02px;
+ font-size:1.18em;
+ border-radius:6px;
+ padding:6px 10px;
+ transition: background 0.15s, color 0.15s, box-shadow 0.15s;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+.icon-btn.verify { color: #22c55e; }
+.icon-btn.view { color: #2563eb; }
+.icon-btn.edit { color: #7c3aed; }
+.icon-btn.delete { color: #ef4444; }
+.icon-btn:hover { background: #f0f7ff; }
+.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:hover { background: #e0ffe6; color: #15803d; }
+
+/* Responsive: stack columns on small screens */
+@media (max-width:900px) {
+ .record-table th, .record-table td {
+ padding:10px6px;
+ font-size:0.98rem;
+ }
+ .record-table {
+ font-size:0.98rem;
+ }
+}
+
+.empty {
+ text-align: center;
+ color: #718096;
+ padding: 24px;
+ font-size: 1.1em;
+}
+
 .records {
   width: 100%;
   min-width: 1500px;
@@ -483,7 +744,7 @@
       color: #fff;
     }
 
-/* Icon buttons */
+    /* Icon buttons */
 .icon-btn {
   background: none;
   border: none;
@@ -713,15 +974,15 @@
     border-top: 6px solid #4a5568;
   }
 
-/* Remove global blur and pointer-events when modal is open */
-/*
-.show-details body > *:not(.cdk-overlay-container):not(app-root),
-.show-details app-root > *:not(.modal):not(.modal-backdrop) {
-  filter: blur(8px) !important;
-  pointer-events: none !important;
-  user-select: none !important;
-}
-*/
+  /* Remove global blur and pointer-events when modal is open */
+  /*
+  .show-details body > *:not(.cdk-overlay-container):not(app-root),
+  .show-details app-root > *:not(.modal):not(.modal-backdrop) {
+    filter: blur(8px) !important;
+    pointer-events: none !important;
+    user-select: none !important;
+  }
+  */
 
 .show-details .modal,
 .show-details .modal-backdrop {
@@ -920,7 +1181,7 @@
 .header-inner {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   padding: 18px 32px 0 32px;
   position: relative;
 }
@@ -1007,6 +1268,49 @@
     text-shadow: 0 0 6px #38bdf8;
   }
 
+header {
+  position: relative;
+  z-index: 10;
+}
+
+.header-actions-right {
+  position: absolute;
+  right: 32px;
+  top: 27px;
+  display: flex;
+  align-items: center;
+  z-index: 100;
+}
+
+.logout-btn {
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 2px;
+  background: linear-gradient(90deg, #ef4444 0%, #23272b 100%);
+  color: #fff;
+  box-shadow: 0 2px 16px #ef444488;
+  border: none;
+  border-radius: 12px;
+  padding: 0.55rem 1.3rem;
+  margin: 0 0.3rem;
+  cursor: pointer;
+  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
+  overflow: hidden;
+}
+
+.logout-btn:hover {
+  background: linear-gradient(90deg, #23272b 0%, #ef4444 100%);
+  color: #fff;
+  box-shadow: 0 2px 24px #ef444488;
+  transform: scale(1.04);
+}
+
+.logout-icon {
+  font-size: 1.2em;
+  margin-right: 6px;
+}
+
 body, main.content {
   background: #f4f6fa;
   min-height: 100vh;
@@ -1020,7 +1324,7 @@ body, main.content {
   border-radius: 10px;
   box-shadow: 0 2px 8px #0001, 0 1.5px 0 #e5e7eb;
   border: 1.5px solid #e5e7eb;
-  margin: 40px auto 0 auto;
+  margin: 24px auto 0 auto;
   max-width: 98vw;
   width: 98vw;
   min-width: 320px;
@@ -1035,7 +1339,7 @@ body, main.content {
   justify-content: space-between;
   padding: 18px 24px 8px 24px;
   border-bottom: 1.5px solid #e5e7eb;
-  background: #f8fafc;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
   border-radius: 10px 10px 0 0;
 }
 
@@ -1048,7 +1352,7 @@ body, main.content {
 .record-title {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #222b45;
+  color: #fff;
 }
 
 .record-dropdown {
@@ -1098,7 +1402,7 @@ body, main.content {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  background: #fff;
+  background: #4654ff;
 }
 
   .record-table th, .record-table td {
@@ -1122,9 +1426,7 @@ body, main.content {
     transition: background 0.15s;
   }
 
-    .record-table tr:hover {
-      background: #f1f5f9;
-    }
+  
 
   .record-table a {
     color: #2563eb;
@@ -1282,7 +1584,6 @@ body, main.content {
       color: #0ea5e9;
     }
 
-/* Stylish pills for subgroups */
 .subgroup-pills {
   display: flex;
   flex-wrap: wrap;
@@ -1366,7 +1667,7 @@ body, main.content {
   align-items: center;
   margin: 24px 0 12px 0;
   padding: 12px 18px;
-  background: #f8fafc;
+  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 100%);
   border-radius: 12px;
   box-shadow: 0 2px 8px #2563eb11;
 }
@@ -1413,51 +1714,68 @@ body, main.content {
         background: #ef4444;
       }
 
-.analytics-summary {
-  display: flex;
-  gap: 32px;
-  margin: 18px 0 8px 0;
+.analytics-panel {
+  margin: 18px 16px 8px 16px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 24px rgba(15,23,42,0.06);
 }
 
-.summary-card {
-  background: #f8fafc;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px #2563eb11;
-  padding: 18px 32px;
-  min-width: 120px;
-  text-align: center;
+.analytics-header {
+  background: linear-gradient(90deg,#6b46ff,#7c3aed);
+  color: #fff;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-  .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;
-  }
+.analytics-title {
+  font-weight: 800;
+  font-size: 1.05rem;
+}
 
-  .summary-card.open .summary-value {
-    color: #059669;
-  }
+.create-project-btn {
+  background: #fff;
+  color: #111827;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-weight: 700;
+  cursor: pointer;
+}
 
-  .summary-card.closed .summary-value {
-    color: #dc2626;
-  }
+.analytics-cards {
+  display: flex;
+  gap: 5px;
+  width: 100%;
+  justify-content: stretch;
+  align-items: stretch;
+}
 
-.record-meta {
-  color: #64748b;
-  font-size: 0.98em;
-  margin: 0 0 10px 0;
-  padding-left: 2px;
-  font-weight: 500;
-  letter-spacing: 0.1px;
+.summary-card {
+  flex: 110;
+  min-width: 0;
+  max-width: none;
+  /* keep all previous styles and animations */
+  border: none;
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
+  border-left: 5px solid var(--primary-accent-light);
+  transition: box-shadow 0.18s, border 0.18s, transform 0.18s;
+  background: #3f51b526;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
 }
 
+@media (max-width: 900px) {
+  .analytics-cards { gap: 6px; padding: 8px; }
+  .summary-card { flex: 11100%; min-width: 80px; max-width: 100%; padding: 6px 6px; flex-direction: row; }
+}
 
 /* Footer */
 footer {
@@ -1465,10 +1783,243 @@ footer {
   color: #fff;
   text-align: center;
   padding: 10px 0px;
-  position: relative;
-  bottom: 0;
+  position: fixed;
   left: 0;
+  bottom: 0;
   width: 100%;
-  margin-top: 40px;
+  z-index: 100;
+  margin-top: 0;
 }
 
+.back-btn {
+  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 1px;
+  background: #fff;
+  color: #23272b;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  padding: 0.32rem 0.8rem;
+  margin: 0 0.3rem;
+  cursor: pointer;
+  transition: background 0.3s, color 0.2s, box-shadow 0.2s, transform 0.2s;
+  box-shadow: 0 2px 8px #d1d5db44;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.back-btn:hover {
+  background: #f3f4f6;
+  color: #1976d2;
+  box-shadow: 0 2px 16px #bae6fd88;
+  transform: scale(1.04);
+}
+
+.back-icon {
+  font-size: 1.1em;
+  margin-right: 4px;
+}
+
+.back-btn,
+.logout-btn {
+  font-size: 0.85rem;
+  padding: 0.18rem 0.7rem;
+  border-radius: 5px;
+  min-width: unset;
+  min-height: unset;
+  box-shadow: 0 1px 4px #d1d5db22;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.analytics-blue {
+  height: var(--analytics-blue-height);
+  animation: analyticsBlueFadeIn0.7s cubic-bezier(0.4,0.2,0.2,1) both;
+}
+
+@keyframes analyticsBlueFadeIn {
+  from {
+    opacity:0;
+    transform: translateY(-32px);
+  }
+  to {
+    opacity:1;
+    transform: translateY(0);
+  }
+}
+
+
+/* === Modern Additions for Record Page === */
+:root {
+ --primary-accent: #2563eb;
+ --primary-accent-light: #38bdf8;
+ --primary-accent-dark: #1e40af;
+ --secondary-accent: #7c3aed;
+ --card-radius:14px;
+ --card-shadow:06px24px rgba(30,41,59,0.13);
+ --section-gap:32px;
+}
+
+/* Modern gradient for analytics-blue */
+.analytics-blue {
+ background: linear-gradient(90deg, var(--primary-accent)0%, var(--primary-accent-light)100%);
+ border-radius: var(--card-radius) var(--card-radius)00;
+ box-shadow: var(--card-shadow);
+}
+
+/* Modern shadow and accent border for summary-card */
+.summary-card {
+ border-radius: var(--card-radius);
+ box-shadow: var(--card-shadow);
+ border-left:5px solid var(--primary-accent-light);
+ transition: box-shadow 0.18s, border 0.18s;
+}
+.summary-card:hover {
+ box-shadow:0 10px 32px rgba(30,41,59,0.18);
+ border-left:5px solid var(--primary-accent);
+}
+
+/* Modern color for summary-label, value, sub */
+.summary-label {
+ color: var(--primary-accent);
+ font-weight:900;
+ font-size:1.25rem;
+ letter-spacing:1.5px;
+ text-transform: uppercase;
+ font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+ margin-bottom:-11px;
+ opacity:0.95;
+}
+.summary-value {
+ font-size:3.0rem;
+ font-weight:500;
+ color: var(--primary-accent-light);
+ font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+ letter-spacing:2px;
+ text-shadow:02px 8px #2563eb11;
+ margin-bottom:4px;
+}
+.summary-sub {
+ color: var(--secondary-accent);
+ font-size:1.18rem;
+ font-weight:700;
+ font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+ opacity:0.88;
+}
+.summary-icon {
+ width:64px;
+ height:64px;
+ border-radius:12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size:2.6rem;
+ margin-bottom:0;
+ margin-left:18px;
+}
+
+/* Slide-in animation for table rows on load */
+.record-table tbody tr {
+ animation: rowSlideIn0.7s cubic-bezier(0.4,0.2,0.2,1) both;
+}
+@keyframes rowSlideIn {
+ from { opacity:0; transform: translateX(-32px); }
+ to { opacity:1; transform: none; }
+}
+
+/* Animated highlight (glow, no shadow) on row hover/focus */
+.record-table tr:hover td,
+.record-table tr:focus-within td {
+ background: #e0f2fe !important;
+ animation: rowGlow1.2s linear infinite alternate;
+ border-left:4px solid #38bdf8;
+}
+@keyframes rowGlow {
+ from { box-shadow:0000px #38bdf800; }
+ to { box-shadow:0004px #38bdf866; }
+}
+
+/* Remove box-shadow on hover for table rows (override previous) */
+.record-table tr:hover td {
+ box-shadow: none !important;
+}
+
+/* Animated highlight for selected row (if you use .selected-row) */
+.record-table tr.selected-row td {
+ background: #bae6fd !important;
+ animation: rowGlowSelected1.2s linear infinite alternate;
+ border-left:4px solid #38bdf8;
+}
+@keyframes rowGlowSelected {
+ from { box-shadow:0000px #38bdf800; }
+ to { box-shadow:0004px #38bdf866; }
+}
+
+/* Remove all box-shadow from table rows and cells */
+.record-table td, .record-table th {
+ box-shadow: none !important;
+}
+
+/* === Summary Card Animations and Dynamic Styles === */
+.summary-card {
+  transition: box-shadow 0.25s, border 0.18s, transform 0.18s;
+  cursor: pointer;
+  height: 100px;
+}
+.summary-card:hover {
+ transform: scale(1.045) rotate(0deg);
+ /* Default blue glow, overridden below for each type */
+ box-shadow:0 0 24px 0 #38bdf8cc,0 10px 32px rgba(30,41,59,0.18);
+ border-left:5px solid var(--primary-accent);
+}
+
+/* Card type specific icon and glow */
+.summary-card.total .summary-icon {
+  /* background: linear-gradient(135deg, #38bdf8 0%, #7c3aed 100%); */
+  color: #23272b;
+  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); /* effectively no shadow */
+}
+
+.summary-card.total:hover {
+  box-shadow: 0 0 32px 0 #38bdf8cc, 0 10px 32px #38bdf822;
+  border-left: 5px solid #38bdf8;
+}
+
+.summary-card.closed .summary-icon {
+  /* background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%); */
+  color: #ef4444;
+}
+
+.summary-card.closed:hover {
+  box-shadow: 0 0 32px 0 #ef4444cc, 0 10px 32px #ef444422;
+  border-left: 5px solid #ef4444;
+}
+
+.summary-card.open .summary-icon {
+  /* background: linear-gradient(135deg, #22c55e 0%, #2563eb 100%); */
+  color: #00ae0e; /* 6 digit hex, avoids linter warnings */
+}
+
+.summary-card.open:hover {
+  box-shadow: 0 0 32px 0 #22c55ecc, 0 10px 32px #22c55e22;
+  border-left: 5px solid #22c55e;
+}
+
+/* Subtle bounce animation for icon on hover */
+.summary-card:hover .summary-icon {
+ animation: summary-bounce0.7s cubic-bezier(0.4,0.2,0.2,1) both;
+}
+@keyframes summary-bounce {
+0% { transform: scale(1) translateY(0); }
+30% { transform: scale(1.18) translateY(-6px); }
+60% { transform: scale(0.96) translateY(2px); }
+100% { transform: scale(1) translateY(0); }
+}
+
+.summary-value.blue { color: #2563eb; }
+.summary-value.green { color: #22c55e; }
+.summary-value.red { color: #ef4444; }
+

src/app/recordpage/recordpage.component.html

@@ -1,260 +1,301 @@
 <!-- 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 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 class="header-actions-right">
+ <button class="back-btn" (click)="navigateBackToInfoPage()">
+ <span class="back-icon">←</span> Back to Info Page
+ </button>
+ <button class="logout-btn" (click)="logout()">
+ <span class="logout-icon">⎋</span> Logout
+ </button>
+ </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 class="analytics-panel">
+    <div class="analytics-blue">
+
+      <div class="record-header">
+        <div class="record-title-group">
+          <span class="record-title"><i class="fas fa-database"></i> Police Investigation Records</span>
+          <select class="record-dropdown">
+            <option>Recently Viewed</option>
+            <option>All Records</option>
+          </select>
+        </div>
+        <div class="record-header-actions">
+          <span style="position:relative;">
+            <i class="fas fa-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#b0b0b0;"></i>
+            <input class="record-search" type="text" [(ngModel)]="q" (ngModelChange)="applyFilters()" placeholder="Search this list..." style="padding-left:32px;" />
+          </span>
+        </div>
+      </div>
+
+      <div class="analytics-cards">
+        <!-- Total Cases -->
+        <div class="summary-card total">
+          <div class="summary-left">
+            <div class="summary-label">Total Cases</div>
+            <div class="summary-value blue">{{ totalCases }}</div>
+            <div class="summary-sub">&nbsp;</div>
+          </div>
+          <div class="summary-icon icon-indigo"><i class="fas fa-folder-open fa-bounce"></i></div>
+        </div>
+        <!-- Open Cases -->
+        <div class="summary-card open">
+          <div class="summary-left">
+            <div class="summary-label">Open</div>
+            <div class="summary-value green">{{ openCases }}</div>
+            <div class="summary-sub">&nbsp;</div>
+          </div>
+          <div class="summary-icon icon-blue"><i class="fas fa-exclamation-circle fa-beat"></i></div>
+        </div>
+        <!-- Closed Cases -->
+        <div class="summary-card closed">
+          <div class="summary-left">
+            <div class="summary-label">Closed</div>
+            <div class="summary-value red">{{ closedCases }}</div>
+            <div class="summary-sub">&nbsp;</div>
+          </div>
+          <div class="summary-icon icon-green"><i class="fas fa-check-circle fa-spin"></i></div>
+        </div>
+      </div>
     </div>
-    <div class="summary-card closed">
-      <div class="summary-label">Closed</div>
-      <div class="summary-value">{{ closedCases }}</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>
-  </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">
+      <span style="margin-right:8px;"><i class="fas fa-filter"></i></span>
+      <select [(ngModel)]="filterCrimeType">
+        <option value="">Crime Type</option>
+        <option *ngFor="let type of crimeTypes">{{ type }}</option>
+      </select>
+      <select [(ngModel)]="filterStatus">
+        <option value="">Select 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()"><i class="fas fa-check"></i> Apply</button>
+      <button (click)="resetFilters()"><i class="fas fa-undo"></i> Reset</button>
+    </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 class="select-col"><i class="fas fa-list-ol"></i> Sl. No</th>
+          <th (click)="setSort('caseId')" [attr.aria-sort]="ariaSort('caseId')" style="cursor:pointer;">
+            <i class="fas fa-id-badge"></i> Case ID
+            <span class="sort" [ngClass]="{'asc': isAsc('caseId'), 'desc': isDesc('caseId'), 'neutral': !isAsc('caseId') && !isDesc('caseId')}"></span>
+          </th>
+          <th (click)="setSort('status')" [attr.aria-sort]="ariaSort('status')" style="cursor:pointer;">
+            <i class="fas fa-info-circle"></i> Status
+            <span class="sort" [ngClass]="{'asc': isAsc('status'), 'desc': isDesc('status'), 'neutral': !isAsc('status') && !isDesc('status')}"></span>
+          </th>
+          <th (click)="setSort('crime')" [attr.aria-sort]="ariaSort('crime')" style="cursor:pointer;">
+            <i class="fas fa-gavel"></i> Crime Type
+            <span class="sort" [ngClass]="{'asc': isAsc('crime'), 'desc': isDesc('crime'), 'neutral': !isAsc('crime') && !isDesc('crime')}"></span>
+          </th>
+          <th (click)="setSort('Investigation Officer')" [attr.aria-sort]="ariaSort('Investigation Officer')" style="cursor:pointer;">
+            <i class="fas fa-user-tie"></i> Investigator
+            <span class="sort" [ngClass]="{'asc': isAsc('Investigation Officer'), 'desc': isDesc('Investigation Officer'), 'neutral': !isAsc('Investigation Officer') && !isDesc('Investigation Officer')}"></span>
+          </th>
+          <th (click)="setSort('dateTime')" [attr.aria-sort]="ariaSort('dateTime')" style="cursor:pointer;">
+            <i class="fas fa-calendar-alt"></i> Date &amp; Time
+            <span class="sort" [ngClass]="{'asc': isAsc('dateTime'), 'desc': isDesc('dateTime'), 'neutral': !isAsc('dateTime') && !isDesc('dateTime')}"></span>
+          </th>
+          <th class="actions-col" style="text-align:left;"><i class="fas fa-cogs"></i> Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let c of rows, let i = index">
+          <td class="select-col">{{ (currentPage -1) * pageSize + i +1 }}</td>
+          <td><a (click)="navigateToCaseDetails(c)" style="cursor:pointer">{{ 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'
+ }">
+              <span class="status-dot"></span>{{ c.status || '—' }}
+            </span>
+          </td>
+          <td>{{ c.crime || '—' }}</td>
+          <td>{{ c.police?.name || '—' }}</td>
+          <td>{{ c.dateTime ? (c.dateTime | date:'M/d/yyyy HH:mm') : '—' }}</td>
+          <td class="actions-col" style="text-align:left;">
+            <button class="icon-btn view" (click)="navigateToCaseDetails(c)" 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="7" class="empty">No records found.</td>
+        </tr>
+      </tbody>
+    </table>
 
-  <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>{{ (currentPage - 1) * pageSize + 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((currentPage - 1) * pageSize + i)" title="Verify">
-            <i class="fas fa-user-check"></i>
-          </button>
-          <button class="icon-btn view" (click)="openDetails(c, (currentPage - 1) * pageSize + i)" title="View">
-            <i class="fas fa-eye"></i>
-          </button>
-          <button class="icon-btn edit" (click)="editCase(c, (currentPage - 1) * pageSize + i)" title="Edit">
-            <i class="fas fa-edit"></i>
-          </button>
-          <button class="icon-btn delete" (click)="deleteCase((currentPage - 1) * pageSize + 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>
+    <!-- Pagination Controls -->
+    <div class="pagination-controls" style="display:flex;justify-content:center;align-items:center;margin:5px 0;gap:10px;">
+      <style>
+        .pagination-controls button {
+          border: none;
+          background: #f3f4f6;
+          color: #333;
+          border-radius: 8px;
+          padding: 016px;
+          min-width: 40px;
+          min-height: 40px;
+          font-size: 1.1em;
+          font-weight: 500;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+          transition: background 0.2s, color 0.2s, transform 0.2s;
+          cursor: pointer;
+          outline: none;
+        }
 
-  <!-- Pagination Controls -->
-  <div class="pagination-controls" style="display:flex;justify-content:center;align-items:center;margin:20px 0;gap:10px;">
-    <style>
-      .pagination-controls button {
-        border: none;
-        background: #f3f4f6;
-        color: #333;
-        border-radius: 8px;
-        padding: 0 16px;
-        min-width: 40px;
-        min-height: 40px;
-        font-size: 1.1em;
-        font-weight: 500;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-        transition: background 0.2s, color 0.2s, transform 0.2s;
-        cursor: pointer;
-        outline: none;
-      }
+          .pagination-controls button:hover:not(:disabled),
+          .pagination-controls button:focus:not(:disabled) {
+            background: #e3eafe;
+            color: #1976d2;
+            transform: scale(1.08);
+          }
 
-        .pagination-controls button:hover:not(:disabled),
-        .pagination-controls button:focus:not(:disabled) {
-          background: #e3eafe;
-          color: #1976d2;
-          transform: scale(1.08);
-        }
+          .pagination-controls button.active {
+            background: #1976d2;
+            color: #fff;
+            font-weight: bold;
+            box-shadow: 0002px #90caf9;
+            animation: pulseActive1s infinite;
+          }
 
-        .pagination-controls button.active {
-          background: #1976d2;
-          color: #fff;
-          font-weight: bold;
-          box-shadow: 0 0 0 2px #90caf9;
-          animation: pulseActive 1s infinite;
-        }
+        @keyframes pulseActive {
+          0% {
+            box-shadow: 0002px #90caf9;
+          }
 
-      @keyframes pulseActive {
-        0% {
-          box-shadow: 0 0 0 2px #90caf9;
-        }
+          50% {
+            box-shadow: 0006px #90caf9;
+          }
 
-        50% {
-          box-shadow: 0 0 0 6px #90caf9;
+          100% {
+            box-shadow: 0002px #90caf9;
+          }
         }
 
-        100% {
-          box-shadow: 0 0 0 2px #90caf9;
+        .pagination-controls span {
+          font-size: 1.2em;
+          color: #888;
+          padding: 08px;
         }
-      }
-
-      .pagination-controls span {
-        font-size: 1.2em;
-        color: #888;
-        padding: 0 8px;
-      }
-    </style>
-    <button (click)="prevPage()" [disabled]="currentPage === 1">«</button>
-    <ng-container *ngFor="let page of getPagination()">
-      <button *ngIf="page !== '...'" (click)="goToPage(page)" [class.active]="currentPage === page">{{ page }}</button>
-      <span *ngIf="page === '...'">...</span>
-    </ng-container>
-    <button (click)="nextPage()" [disabled]="currentPage === totalPages">»</button>
+      </style>
+      <button (click)="prevPage()" [disabled]="currentPage ===1">«</button>
+      <ng-container *ngFor="let page of getPagination()">
+        <button *ngIf="page !== '...'" (click)="goToPage(page)" [class.active]="currentPage === page">{{ page }}</button>
+        <span *ngIf="page === '...'">...</span>
+      </ng-container>
+      <button (click)="nextPage()" [disabled]="currentPage === totalPages">»</button>
+    </div>
   </div>
-</div>
 
-<!-- Results summary and page size selector -->
-<div style="display:flex;align-items:center;justify-content:flex-start;gap:24px;margin-bottom:16px;">
-  <span style="font-size:1.1em;">Results: {{ resultsStart }} - {{ resultsEnd }} of {{ resultsTotal }}</span>
-  <select [(ngModel)]="pageSize" (change)="onPageSizeChange(pageSize)" style="padding:4px 12px;border-radius:8px;font-size:1em;">
-    <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
-  </select>
-</div>
+  <!-- Results summary and page size selector -->
+  <div style="display:flex;align-items:center;justify-content:flex-start;gap:24px;margin-bottom:12px;">
+    <span style="font-size:1.1em;"><i class="fas fa-list-ol"></i> Results: {{ resultsStart }} - {{ resultsEnd }} of {{ resultsTotal }}</span>
+    <select [(ngModel)]="pageSize" (change)="onPageSizeChange(pageSize)" style="padding:4px 12px;border-radius:8px;font-size:1em;">
+      <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
+    </select>
+  </div>
 
-<!-- Modal -->
-<!-- Modal white blur overlay for background -->
-<div class="modal-blur-overlay" *ngIf="showDetails"></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']">
+  <!-- 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"><i class="fas fa-info-circle"></i> 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">
+              <i *ngIf="sectionKey === 'crime'" class="fas fa-gavel"></i>
+              <i *ngIf="sectionKey === 'suspect'" class="fas fa-user-secret"></i>
+              <i *ngIf="sectionKey === 'notes'" class="fas fa-file-alt"></i>
+              {{ sectionKey === 'crime' ? 'Crime Details' : sectionKey === 'suspect' ? 'Suspect Details' : 'Evidence and Documents' }}
+            </div>
+            <ng-container *ngFor="let subgroup of getSubgroups(sectionKey)">
+              <div class="subgroup-title" style="margin:10px 0 4px 0;font-weight:600;color:#1976d2;">
+                <i class="fas fa-folder"></i> {{ subgroup }}
+              </div>
+              <div class="fields-grid">
+                <ng-container *ngFor="let field of getFieldsForSubgroup(sectionKey, subgroup)">
+                  <div class="field-card" style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f3f4f6;">
+                    <span style="font-weight:500;color:#333;"><i class="fas fa-tag"></i> {{ field }}</span>
+                    <span style="color:#444;">{{ getFieldValue(sc, sectionKey, field) }}</span>
+                  </div>
+                </ng-container>
+              </div>
+            </ng-container>
+          </div>
+        </ng-container>
+        <!-- Show all other fields from formData not in the above structure -->
         <div class="section-block">
-          <div class="section-title">{{ sectionKey === 'crime' ? 'Crime Details' : sectionKey === 'suspect' ? 'Suspect Details' : 'Evidence and Documents' }}</div>
-          <ng-container *ngFor="let subgroup of getSubgroups(sectionKey)">
-            <div class="subgroup-title" style="margin:10px 0 4px 0;font-weight:600;color:#1976d2;">{{ subgroup }}</div>
-            <div class="fields-grid">
-              <ng-container *ngFor="let field of getFieldsForSubgroup(sectionKey, subgroup)">
-                <div class="field-card" style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f3f4f6;">
-                  <span style="font-weight:500;color:#333;">{{ field }}</span>
-                  <span style="color:#444;">{{ getFieldValue(sc, sectionKey, field) }}</span>
-                </div>
-              </ng-container>
+          <div class="section-title"><i class="fas fa-list"></i> All Entered Information</div>
+          <div class="fields-grid">
+            <div class="field-card" *ngFor="let key of objectKeys(sc)" style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f3f4f6;">
+              <span style="font-weight:500;color:#333;"><i class="fas fa-tag"></i> {{ key }}</span>
+              <span style="color:#444;">{{ getValue(sc, key) }}</span>
             </div>
-          </ng-container>
-        </div>
-      </ng-container>
-      <!-- Show all other fields from formData not in the above structure -->
-      <div class="section-block">
-        <div class="section-title">All Entered Information</div>
-        <div class="fields-grid">
-          <div class="field-card" *ngFor="let key of objectKeys(sc)" style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f3f4f6;">
-            <span style="font-weight:500;color:#333;">{{ key }}</span>
-            <span style="color:#444;">{{ getValue(sc, key) }}</span>
           </div>
         </div>
       </div>
     </div>
+    <div class="modal-footer">
+      <button type="button" class="btn" (click)="closeDetails()"><i class="fas fa-times"></i> Close</button>
+    </div>
   </div>
-  <div class="modal-footer">
-    <button type="button" class="btn" (click)="closeDetails()">Close</button>
-  </div>
-</div>
 
-<!-- Footer from provided design -->
-<footer>
-  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
-</footer>
+  <footer>
+    <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+  </footer>
+
+

src/app/recordpage/recordpage.component.ts

@@ -1,15 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
-import { CaseStoreService, PoliceCase } from '../case-store.service';
+import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
 import { InfopageComponent } from '../infopage/infopage.component';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-recordpage',
   templateUrl: './recordpage.component.html',
   styleUrls: ['./recordpage.component.css']
 })
-export class RecordpageComponent implements OnInit {
+export class RecordpageComponent implements OnInit, OnDestroy {
   cases: PoliceCase[] = [];
+  private casesSub?: Subscription;
+
+  // Date field groups for formatting
+  dateTimeFields = new Set<string>(['Date & Time (Entry)', 'Occurred From', 'Occurred To', 'Time Reported', 'Time Discovered']);
+  dateFields = new Set<string>(['Follow-up Date', 'Next Hearing Date']);
 
   // Pagination
   currentPage: number = 1;
@@ -187,20 +193,111 @@ export class RecordpageComponent implements OnInit {
     };
 
     const path = fieldMap[field] || field;
+    let value: any = undefined;
     if (Array.isArray(path)) {
-      let value = sc;
+      let v = sc;
       for (const p of path) {
-        if (value && value[p] !== undefined) value = value[p];
-        else return '—';
+        if (v && v[p] !== undefined) v = v[p];
+        else { v = undefined; break; }
       }
-      return value !== undefined && value !== null && value !== '' ? value : '—';
+      value = v;
     } else {
-      return sc[path] !== undefined && sc[path] !== null && sc[path] !== '' ? sc[path] : '—';
+      value = sc && sc[path] !== undefined ? sc[path] : undefined;
+    }
+
+    // Fallback: try raw formData (array or object) saved with the case
+    if (value === null || value === undefined || value === '') {
+      try {
+        const fd = this.getFormDataArray(sc);
+        const norm = (s: any) => {
+          if (s === null || s === undefined) return '';
+          let t = String(s).toLowerCase();
+          t = t.replace(/&/g, '');
+          t = t.replace(/and/g, '');
+          t = t.replace(/entry/g, '');
+          t = t.replace(/\s+/g, '');
+          return t.replace(/[^a-z0-9]/g, '');
+        };
+
+        if (fd && fd.length) {
+          let kv = fd.find(k => k && String(k.key).toLowerCase() === String(field).toLowerCase());
+          if (kv) value = kv.value;
+          if (value === null || value === undefined || value === '') {
+            const fieldNorm = norm(field);
+            const pathName = Array.isArray(path) ? path[path.length -1] : String(path);
+            const pathNorm = norm(pathName);
+            kv = fd.find(k => k && (norm(k.key) === fieldNorm || norm(k.key) === pathNorm || norm(k.key).includes(fieldNorm) || fieldNorm.includes(norm(k.key))));
+            if (kv) value = kv.value;
+          }
+        }
+
+        if ((value === null || value === undefined || value === '') && sc && sc.formData && typeof sc.formData === 'object') {
+          if (sc.formData[field] !== undefined) value = sc.formData[field];
+          else {
+            const fieldNorm = (s: any) => s === null || s === undefined ? '' : String(s).toLowerCase().replace(/[^a-z0-9]/g, '');
+            const target = fieldNorm(field);
+            for (const k of Object.keys(sc.formData)) {
+              if (fieldNorm(k) === target || k.toLowerCase() === field.toLowerCase() || k.toLowerCase().includes(field.toLowerCase())) {
+                value = sc.formData[k];
+                break;
+              }
+            }
+          }
+        }
+      } catch (e) {
+        // ignore
+      }
+    }
+
+    // Normalize and format
+    if (value === null || value === undefined || value === '') return '—';
+
+    // Date formatting
+    if ((this.dateTimeFields && this.dateTimeFields.has(field)) || (this.dateFields && this.dateFields.has(field))) {
+      const d = new Date(value);
+      if (!isNaN(d.getTime())) {
+        if (this.dateFields && this.dateFields.has(field)) return d.toISOString().slice(0,10);
+        return d.toLocaleString();
+      }
     }
+
+    if (typeof value === 'object') return this.formatFormValue(value);
+    return value;
   }
 
   getValue(obj: any, key: string): any {
-    return obj && obj[key] !== undefined && obj[key] !== null && obj[key] !== '' ? obj[key] : '—';
+    const v = obj && obj[key] !== undefined ? obj[key] : undefined;
+    if (v === null || v === undefined || v === '') return '—';
+    if (typeof v === 'object') return this.formatFormValue(v);
+    if ((this.dateTimeFields && this.dateTimeFields.has(key)) || (this.dateFields && this.dateFields.has(key))) {
+      const d = new Date(v);
+      if (!isNaN(d.getTime())) {
+        if (this.dateFields && this.dateFields.has(key)) return d.toISOString().slice(0,10);
+        return d.toLocaleString();
+      }
+    }
+    return v;
+  }
+
+  // Helpers for handling stored formData
+  isFormDataArray(fd: any): boolean {
+    return Array.isArray(fd) && fd.length >0 && fd.every((item: any) => item && Object.prototype.hasOwnProperty.call(item, 'key'));
+  }
+
+  getFormDataArray(caseObj: any): Array<{ key: string; value: any }> {
+    if (!caseObj || !caseObj.formData) return [];
+    const fd = caseObj.formData;
+    if (this.isFormDataArray(fd)) return fd as Array<{ key: string; value: any }>;
+    if (typeof fd === 'object') return Object.keys(fd).map(k => ({ key: k, value: fd[k] }));
+    return [{ key: 'value', value: fd }];
+  }
+
+  formatFormValue(value: any): string {
+    if (value === null || value === undefined || value === '') return '—';
+    if (typeof value === 'object') {
+      try { return JSON.stringify(value, null,2); } catch { return String(value); }
+    }
+    return String(value);
   }
 
   constructor(private caseStore: CaseStoreService, private router: Router) { }
@@ -218,18 +315,45 @@ export class RecordpageComponent implements OnInit {
 
   filteredCases: PoliceCase[] = [];
 
+  // selection state
+  allSelected: boolean = false;
+
   ngOnInit(): void {
-    this.load();
-    this.populateFilterOptions();
-    this.applyFilters();
+    // Subscribe to case store so UI updates automatically when new cases are added/updated
+    if (typeof this.caseStore.getCases$ === 'function') {
+      this.casesSub = this.caseStore.getCases$().subscribe((cases: PoliceCase[]) => {
+        this.cases = cases || [];
+        this.cases.forEach((c: any) => { if (c.selected === undefined) c.selected = false; });
+        this.populateFilterOptions();
+        this.applyFilters();
+        this.applySort();
+      });
+    } else {
+      // Fallback for older API
+      this.load();
+      this.populateFilterOptions();
+      this.applyFilters();
+      this.applySort();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.casesSub) this.casesSub.unsubscribe();
   }
 
   load(): void {
     this.cases = this.caseStore.getPoliceCases();
+    this.cases.forEach((c: any) => { if (c.selected === undefined) c.selected = false; });
     this.populateFilterOptions();
     this.applyFilters();
   }
 
+  toggleSelectAll(event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    this.allSelected = checked;
+    this.rows.forEach((c: any) => c.selected = checked);
+  }
+
   populateFilterOptions() {
     this.crimeTypes = [...new Set(this.cases.map(c => c.crime).filter(Boolean))] as string[];
     this.statusTypes = [...new Set(this.cases.map(c => c.status).filter(Boolean))] as string[];
@@ -238,13 +362,27 @@ export class RecordpageComponent implements OnInit {
   }
 
   applyFilters() {
-    this.filteredCases = this.cases.filter(c =>
+    // First, filter by dropdowns
+    let filtered = this.cases.filter(c =>
       (!this.filterCrimeType || c.crime === this.filterCrimeType) &&
       (!this.filterStatus || c.status === this.filterStatus) &&
       (!this.filterLocation || c.police?.address === this.filterLocation) &&
       (!this.filterOfficer || c.police?.name === this.filterOfficer)
     );
-    this.currentPage = 1; // Reset to first page on filter
+    // Then, filter by search query
+    const s = (this.q || '').toLowerCase();
+    if (s) {
+      filtered = filtered.filter(c =>
+        (c.caseId || '').toString().toLowerCase().includes(s) ||
+        (c.crime || '').toLowerCase().includes(s) ||
+        (c.police?.address || '').toLowerCase().includes(s) ||
+        (c.status || '').toLowerCase().includes(s) ||
+        (c.police?.name || '').toLowerCase().includes(s)
+      );
+    }
+    this.filteredCases = filtered;
+    this.currentPage =1; // Reset to first page on filter
+    this.applySort();
   }
 
   resetFilters() {
@@ -276,22 +414,56 @@ export class RecordpageComponent implements OnInit {
       this.sortKey = key;
       this.sortDir = key === 'dateTime' ? 'desc' : 'asc';
     }
+    this.applySort();
+  }
+  isAsc(key: typeof this.sortKey) {
+    return this.sortKey === key && this.sortDir === 'asc';
+  }
+  isDesc(key: typeof this.sortKey) {
+    return this.sortKey === key && this.sortDir === 'desc';
   }
-  isAsc(key: typeof this.sortKey) { return this.sortKey === key && this.sortDir === 'asc'; }
-  isDesc(key: typeof this.sortKey) { return this.sortKey === key && this.sortDir === 'desc'; }
   ariaSort(key: typeof this.sortKey) {
     return this.sortKey === key ? (this.sortDir === 'asc' ? 'ascending' : 'descending') : 'none';
   }
 
-  private cell(c: any, key: typeof this.sortKey): string | number {
-    switch (key) {
-      case 'caseId': return (c.caseId ?? '').toString();
-      case 'crime': return (c.crime ?? '').toString();
-      case 'dateTime': return c.dateTime ? new Date(c.dateTime).getTime() : 0;
-      case 'location': return (c.police?.address ?? '').toString();
-      case 'status': return (c.status ?? '').toString();
-      case 'Investigation Officer': return (c.police?.name ?? '').toString();
-    }
+  applySort() {
+    const key = this.sortKey;
+    const dir = this.sortDir;
+    this.filteredCases.sort((a, b) => {
+      let aVal: any, bVal: any;
+      switch (key) {
+        case 'caseId':
+          aVal = a.caseId || '';
+          bVal = b.caseId || '';
+          break;
+        case 'crime':
+          aVal = a.crime || '';
+          bVal = b.crime || '';
+          break;
+        case 'dateTime':
+          aVal = a.dateTime ? new Date(a.dateTime).getTime() :0;
+          bVal = b.dateTime ? new Date(b.dateTime).getTime() :0;
+          break;
+        case 'location':
+          aVal = a.police?.address || '';
+          bVal = b.police?.address || '';
+          break;
+        case 'status':
+          aVal = a.status || '';
+          bVal = b.status || '';
+          break;
+        case 'Investigation Officer':
+          aVal = a.police?.name || '';
+          bVal = b.police?.name || '';
+          break;
+        default:
+          aVal = '';
+          bVal = '';
+      }
+      if (aVal < bVal) return dir === 'asc' ? -1 :1;
+      if (aVal > bVal) return dir === 'asc' ?1 : -1;
+      return 0;
+    });
   }
 
   // Update your table to use filteredCases instead of rows
@@ -314,8 +486,51 @@ export class RecordpageComponent implements OnInit {
   }
 
   editCase(c: PoliceCase, i: number): void {
-    // Navigate to /infopage/:id for editing
-    this.router.navigate(['/infopage', c.caseId]);
+    // Navigate to /infopage/:id for editing and pass prefill data in navigation state
+    const prefill: Record<string, any> = {};
+    try {
+      // If case.formData is stored as array of {key,value}
+      const fd = (c as any).formData;
+      if (fd && Array.isArray(fd)) {
+        (fd as Array<any>).forEach(kv => { if (kv && kv.key) prefill[kv.key] = kv.value; });
+      } else if (fd && typeof fd === 'object') {
+        Object.assign(prefill, fd as Record<string, any>);
+      }
+      // Also include mapped top-level properties for convenience
+      if (c.caseId) prefill['Case ID'] = c.caseId;
+      if (c.crime) prefill['Crime Type'] = c.crime;
+      if (c.dateTime) prefill['Date & Time (Entry)'] = c.dateTime;
+      if (c.police && c.police.address) prefill['Location'] = c.police.address;
+      if (c.police && c.police.name) prefill['Investigating Officer'] = c.police.name;
+      if (c.accused && c.accused.name) prefill['Suspect Name'] = c.accused.name;
+    } catch (e) {
+      // ignore
+    }
+
+    this.router.navigate(['/infopage', c.caseId], { state: { from: 'record', returnId: c.caseId, prefillFormData: prefill, case: c } });
+  }
+
+  // resolve origin dynamically from current router url
+  private resolveOrigin(): string {
+    try {
+      const cur = this.router.url || '';
+      if (cur.includes('/case-details')) return 'case-details';
+      if (cur.includes('/record')) return 'record';
+    } catch {}
+    return 'record';
+  }
+
+  navigateToCaseDetails(c: PoliceCase): void {
+    if (!c || !c.caseId) return;
+    const origin = this.resolveOrigin();
+    // navigate to new summary page — include source so summary can navigate back
+    const from = origin;
+    this.router.navigate(['/case-details-summary-page', c.caseId], { queryParams: { from, returnId: c.caseId }, state: { case: c, from, returnId: c.caseId } });
+  }
+
+  viewSummary(caseId: string) {
+    const origin = this.resolveOrigin();
+    this.router.navigate(['/case-details-summary-page', caseId], { queryParams: { from: origin, returnId: caseId }, state: { from: origin, returnId: caseId } });
   }
 
   onModernSearch() {
@@ -406,4 +621,14 @@ export class RecordpageComponent implements OnInit {
   goToDetect(caseId: string): void {
     this.router.navigate(['/py-detect'], { state: { caseId } });
   }
+
+  navigateBackToInfoPage(): void {
+    this.router.navigate(['/infopage']);
+  }
+
+  logout(): void {
+    // Implement your logout logic here (clear session, etc.)
+    // For now, just redirect to home/login
+    window.location.href = '/';
+  }
 }

src/app/services/pydetect.service.ts

@@ -0,0 +1,486 @@
+export interface SessionData {
+  sessionId: string;
+  caseData?: CaseData;
+  accusedData?: AccusedData;
+  evidence?: EvidenceItem[];
+  questions?: any[];
+  responses?: any[];
+  notes?: any[];
+  report?: any;
+}
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable, BehaviorSubject, of, throwError } from 'rxjs';
+import { delay, tap, catchError } from 'rxjs/operators';
+import { environment } from '../../environments/environment';
+  // Request investigation questions based on Brief Description
+
+export interface CaseData {
+  caseId: string;
+  caseType: string;
+  crimeCategory: string;
+  crimeSubtype: string;
+  description: string;
+  location: string;
+  dateTime: string;
+  urgency: string;
+  officerName: string;
+  badgeNumber: string;
+  department: string;
+  contactInfo: string;
+}
+
+export interface AccusedData {
+  name: string;
+  age: string;
+  gender: string;
+  address: string;
+  occupation: string;
+  contactNumber: string;
+  relationship: string;
+  background: string;
+  previousRecords: string;
+}
+
+export interface EvidenceItem {
+  type: string;
+  description: string;
+  location: string;
+  collectedBy: string;
+  dateCollected: string;
+  chainOfCustody: string;
+  significance: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PyDetectService {
+  private baseUrl = environment.pyDetectApiUrl;
+  private httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json'
+    })
+  };
+
+  // Session management
+  private currentSessionSubject = new BehaviorSubject<SessionData | null>(null);
+  public currentSession$ = this.currentSessionSubject.asObservable();
+  
+  // Voice settings
+  private voiceEnabledSubject = new BehaviorSubject<boolean>(true);
+  public voiceEnabled$ = this.voiceEnabledSubject.asObservable();
+
+  constructor(private http: HttpClient) {
+    // Initialize voice settings from localStorage
+    const savedVoiceEnabled = localStorage.getItem('pydetect_voice_enabled');
+    if (savedVoiceEnabled !== null) {
+      this.voiceEnabledSubject.next(JSON.parse(savedVoiceEnabled));
+    }
+  }
+
+  // Request investigation questions based on Brief Description
+
+  // ============ SESSION MANAGEMENT ============
+  
+  // Start a new session
+  startSession(briefDescription?: string): Observable<any> {
+  const payload: any = {};
+  if (briefDescription) payload.brief_description = briefDescription;
+    return this.http.post(`${this.baseUrl}/start_session`, payload, this.httpOptions)
+      .pipe(
+        tap(response => {
+          const responseData = response as any;
+          const sessionData: SessionData = {
+            sessionId: responseData.session_id || this.generateSessionId(),
+            caseData: undefined,
+            accusedData: undefined,
+            evidence: [],
+            questions: [],
+            responses: [],
+            notes: [],
+            report: undefined
+          };
+          this.currentSessionSubject.next(sessionData);
+          this.saveSessionToStorage(sessionData);
+        }),
+        catchError(this.handleError)
+      );
+  }
+
+  // Get current session
+  getCurrentSession(): SessionData | null {
+    return this.currentSessionSubject.value;
+  }
+
+  // Update session data
+  updateSession(updates: Partial<SessionData>): void {
+    const current = this.currentSessionSubject.value;
+    if (current) {
+      const updated = { ...current, ...updates };
+      this.currentSessionSubject.next(updated);
+      this.saveSessionToStorage(updated);
+    }
+  }
+
+  // ============ CASE MANAGEMENT ============
+
+  // Submit complete case details
+  submitCaseDetails(sessionId: string, caseData: CaseData, briefDescription?: string): Observable<any> {
+    const payload: any = {
+      session_id: sessionId,
+      case_data: caseData,
+      timestamp: new Date().toISOString()
+    };
+    // ...existing code...
+    return this.http.post(`${this.baseUrl}/submit_case`, payload, this.httpOptions)
+      .pipe(
+        tap(response => {
+          this.updateSession({ caseData: caseData });
+        }),
+        catchError(this.handleError)
+      );
+  }
+
+  // ============ BODY LANGUAGE EXPLANATION ============
+
+  /**
+   * Fetches body language explanation for a given cue from backend.
+   * @param cue The body language cue to explain
+   * @returns Observable<{ explanation: string }>
+   */
+  bodyLanguageExplain(cue: string): Observable<{ meaning?: string; explanation?: string }> {
+    const payload = { cue };
+    return this.http.post<{ meaning?: string; explanation?: string }>(`${this.baseUrl}/body_language_explain`, payload, this.httpOptions)
+      .pipe(catchError((error): Observable<{ meaning?: string; explanation?: string }> => {
+        let errorMessage = 'An unknown error occurred';
+        if (error.error instanceof ErrorEvent) {
+          errorMessage = `Client Error: ${error.error.message}`;
+        } else {
+          errorMessage = `Server Error: ${error.status} - ${error.message}`;
+        }
+        // Return an object with explanation only for error case
+        return of({ explanation: errorMessage });
+      }));
+  }
+
+  // Submit accused details
+  submitAccused(sessionId: string, accused: AccusedData, additionalData?: any): Observable<any> {
+    const currentSession = this.getCurrentSession();
+    
+    const payload = {
+      session_id: sessionId,
+      accused: accused,
+      crime: additionalData?.crime || currentSession?.caseData?.crimeCategory || '',
+      profile: currentSession?.caseData || additionalData?.profile || {},
+      evidence: currentSession?.evidence || additionalData?.evidence || [],
+      timestamp: new Date().toISOString(),
+      ...additionalData
+    };
+
+    return this.http.post(`${this.baseUrl}/submit_accused`, payload, this.httpOptions)
+      .pipe(
+        tap(response => {
+          this.updateSession({ accusedData: accused });
+        }),
+        catchError(this.handleError)
+      );
+  }
+
+  // ============ EVIDENCE MANAGEMENT ============
+
+  // Submit evidence
+  submitEvidence(sessionId: string, evidence: EvidenceItem[]): Observable<any> {
+    const payload = {
+      session_id: sessionId,
+      evidence: evidence.map(item => ({
+        ...item,
+        timestamp: new Date().toISOString(),
+        evidence_id: this.generateEvidenceId()
+      }))
+    };
+
+    return this.http.post(`${this.baseUrl}/submit_evidence`, payload, this.httpOptions)
+      .pipe(
+        tap(response => {
+          const currentSession = this.getCurrentSession();
+          const updatedEvidence = [...(currentSession?.evidence || []), ...evidence];
+          this.updateSession({ evidence: updatedEvidence });
+        }),
+        catchError(this.handleError)
+      );
+  }
+
+  // Add single evidence item
+  addEvidenceItem(sessionId: string, evidenceItem: EvidenceItem): Observable<any> {
+    return this.submitEvidence(sessionId, [evidenceItem]);
+  }
+
+  // ============ INVESTIGATION NOTES ============
+
+  // Add investigation note
+  addNote(sessionId: string, note: string, category: string = 'general'): Observable<any> {
+    const noteData = {
+      session_id: sessionId,
+      note: note,
+      timestamp: new Date().toISOString(),
+      category: category,
+      note_id: this.generateNoteId(),
+      officer: this.getCurrentSession()?.caseData?.officerName || 'Unknown Officer'
+    };
+
+    return this.http.post(`${this.baseUrl}/add_note`, noteData, this.httpOptions)
+      .pipe(
+        tap(response => {
+          const currentSession = this.getCurrentSession();
+          const updatedNotes = [...(currentSession?.notes || []), noteData];
+          this.updateSession({ notes: updatedNotes });
+        }),
+        catchError(this.handleError)
+      );
+  }
+
+  // ============ AI QUESTIONING SYSTEM ============
+
+  // Get context-aware AI questions
+  askQuestion(sessionId: string, crimeType?: string, briefDescription?: string): Observable<any> {
+  // ...existing code...
+    const queryParams = [`session_id=${encodeURIComponent(sessionId)}`];
+    // Always send crimeType, even if empty
+    queryParams.push(`crime_type=${encodeURIComponent(crimeType ?? '')}`);
+    // Always send briefDescription, even if empty
+    queryParams.push(`brief_description=${encodeURIComponent(briefDescription ?? '')}`);
+    const queryString = queryParams.join('&');
+    return this.http.get(`${this.baseUrl}/ask_question?${queryString}`, this.httpOptions)
+      .pipe(catchError(this.handleError));
+  }
+
+  // Submit response to AI question
+  submitResponse(sessionId: string, text: string, questionId?: string, timing?: {
+    answer_start_at?: number;
+    answer_end_at?: number;
+    duration_ms?: number;
+    mode?: string;
+  }): Observable<any> {
+    const responseData: any = {
+      session_id: sessionId,
+      text: text,
+      question_id: questionId,
+      timestamp: new Date().toISOString(),
+      response_id: this.generateResponseId()
+    };
+    if (timing) {
+      if (timing.answer_start_at) responseData.answer_start_at = timing.answer_start_at;
+      if (timing.answer_end_at) responseData.answer_end_at = timing.answer_end_at;
+      if (typeof timing.duration_ms === 'number') responseData.duration_ms = timing.duration_ms;
+      if (timing.mode) responseData.mode = timing.mode;
+    }
+    return this.http.post(`${this.baseUrl}/submit_response`, responseData, this.httpOptions)
+      .pipe(
+        tap(response => {
+          const currentSession = this.getCurrentSession();
+          const updatedResponses = [...(currentSession?.responses || []), responseData];
+          this.updateSession({ responses: updatedResponses });
+        }),
+        catchError(this.handleError)
+      );
+  }
+
+  // Stream a single face frame for nonverbal analysis
+  faceFrame(sessionId: string, frameDataUrl: string): Observable<any> {
+    const payload = { session_id: sessionId, frame: frameDataUrl };
+    return this.http.post(`${this.baseUrl}/face_frame`, payload, this.httpOptions)
+      .pipe(catchError(this.handleError));
+  }
+
+  // ============ REPORTING SYSTEM ============
+
+  // Get comprehensive report
+  getReport(sessionId: string, reportType: string = 'complete'): Observable<any> {
+    return this.http.get(`${this.baseUrl}/get_report/${sessionId}?type=${reportType}`, this.httpOptions)
+      .pipe(
+        tap(response => {
+          this.updateSession({ report: response });
+        }),
+        catchError(this.handleError)
+      );
+  }
+
+  // Generate summary report
+  generateSummary(sessionId: string): Observable<any> {
+    const currentSession = this.getCurrentSession();
+    const summaryData = {
+      session_id: sessionId,
+      case_data: currentSession?.caseData,
+      accused_data: currentSession?.accusedData,
+      evidence_count: currentSession?.evidence?.length || 0,
+      questions_answered: currentSession?.responses?.length || 0,
+      notes_count: currentSession?.notes?.length || 0,
+      timestamp: new Date().toISOString()
+    };
+
+    return this.http.post(`${this.baseUrl}/generate_summary`, summaryData, this.httpOptions)
+      .pipe(catchError(this.handleError));
+  }
+
+  // ============ VOICE FUNCTIONALITY ============
+
+  // Toggle voice functionality
+  toggleVoice(): void {
+    const current = this.voiceEnabledSubject.value;
+    this.voiceEnabledSubject.next(!current);
+    localStorage.setItem('pydetect_voice_enabled', JSON.stringify(!current));
+  }
+
+  // Check if voice is enabled
+  isVoiceEnabled(): boolean {
+    return this.voiceEnabledSubject.value;
+  }
+
+  // ============ AUTHENTICATION ============
+
+  // Sign in
+  signIn(email: string, password: string): Observable<any> {
+    return this.http.post(`${this.baseUrl}/sign-in`, {
+      email: email,
+      password: password
+    }, this.httpOptions).pipe(catchError(this.handleError));
+  }
+
+  // Sign up
+  signUp(name: string, email: string, password: string, role: string = 'investigator'): Observable<any> {
+    return this.http.post(`${this.baseUrl}/sign-up`, {
+      name: name,
+      email: email,
+      password: password,
+      role: role
+    }, this.httpOptions).pipe(catchError(this.handleError));
+  }
+
+  // Health check
+  healthCheck(): Observable<any> {
+    return this.http.get(`${this.baseUrl}/health`, this.httpOptions)
+      .pipe(catchError(this.handleError));
+  }
+
+  // ============ UTILITY METHODS ============
+
+  // Generate unique session ID
+  private generateSessionId(): string {
+    return 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+  }
+
+  // Generate unique evidence ID
+  private generateEvidenceId(): string {
+    return 'evidence_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+  }
+
+  // Generate unique note ID
+  private generateNoteId(): string {
+    return 'note_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+  }
+
+  // Generate unique response ID
+  private generateResponseId(): string {
+    return 'response_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+  }
+
+  // Save session to localStorage
+  private saveSessionToStorage(session: SessionData): void {
+    try {
+      localStorage.setItem('pydetect_current_session', JSON.stringify(session));
+    } catch (error) {
+    }
+  }
+
+  // Load session from localStorage
+  loadSessionFromStorage(): SessionData | null {
+    try {
+      const stored = localStorage.getItem('pydetect_current_session');
+      if (stored) {
+        const session = JSON.parse(stored);
+        this.currentSessionSubject.next(session);
+        return session;
+      }
+    } catch (error) {
+    }
+    return null;
+  }
+
+  // Clear current session
+  clearSession(): void {
+    this.currentSessionSubject.next(null);
+    localStorage.removeItem('pydetect_current_session');
+  }
+
+  // Error handling
+  private handleError(error: any): Observable<never> {
+    
+    let errorMessage = 'An unknown error occurred';
+    if (error.error instanceof ErrorEvent) {
+      errorMessage = `Client Error: ${error.error.message}`;
+    } else {
+      errorMessage = `Server Error: ${error.status} - ${error.message}`;
+    }
+    
+    return throwError(() => new Error(errorMessage));
+  }
+
+  // ============ DATA VALIDATION ============
+
+  // Validate case data
+  validateCaseData(caseData: Partial<CaseData>): { isValid: boolean; errors: string[] } {
+    const errors: string[] = [];
+    
+    if (!caseData.caseId) errors.push('Case ID is required');
+    if (!caseData.crimeCategory) errors.push('Crime category is required');
+    if (!caseData.description) errors.push('Description is required');
+    if (!caseData.officerName) errors.push('Officer name is required');
+    if (!caseData.badgeNumber) errors.push('Badge number is required');
+    
+    return {
+      isValid: errors.length === 0,
+      errors: errors
+    };
+  }
+
+  // Validate accused data
+  validateAccusedData(accusedData: Partial<AccusedData>): { isValid: boolean; errors: string[] } {
+    const errors: string[] = [];
+    
+    if (!accusedData.name) errors.push('Accused name is required');
+    if (!accusedData.age) errors.push('Age is required');
+    if (!accusedData.gender) errors.push('Gender is required');
+    
+    return {
+      isValid: errors.length === 0,
+      errors: errors
+    };
+  }
+
+  // ============ STATISTICS & ANALYTICS ============
+
+  // Get session statistics
+  getSessionStats(): any {
+    const session = this.getCurrentSession();
+    if (!session) return null;
+
+    return {
+      sessionId: session.sessionId,
+      questionsAnswered: session.responses?.length || 0,
+      evidenceItems: session.evidence?.length || 0,
+      notesAdded: session.notes?.length || 0,
+      hasAccusedData: !!session.accusedData,
+      hasCaseData: !!session.caseData,
+      hasReport: !!session.report
+    };
+  }
+
+  // Request investigation questions from backend
+  getInvestigationQuestions(sessionId: string, crimeType: string, briefDescription: string): Observable<any> {
+    return this.http.get(
+      `${this.baseUrl}/ask_question?session_id=${sessionId}&crime_type=${encodeURIComponent(crimeType)}&brief_description=${encodeURIComponent(briefDescription)}`,
+      this.httpOptions
+    );
+  }
+}

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

@@ -1,25 +1,26 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 export interface PoliceCase {
   // Optional metadata used by your UI
   caseId?: string;
   dateTime?: string;
   status?: 'Open' | 'Under Investigation' | 'Closed' | 'Archived';
-  crime: string;
-  police: {
-    name: string;
-    station: string;
-    address: string;
-    pincode: string;
-    dutyPerson: string;
-    modeOfCrime: string;
+  crime?: string;
+  police?: {
+    name?: string;
+    station?: string;
+    address?: string;
+    pincode?: string;
+    dutyPerson?: string;
+    modeOfCrime?: string;
     information?: string;
   };
-  accused: {
-    name: string;
-    age: string | number;
-    gender: string;
-    address: string;
+  accused?: {
+    name?: string;
+    age?: string | number;
+    gender?: string;
+    address?: string;
     occupation?: string;
   };
   lastUpdated?: string;
@@ -29,21 +30,48 @@ export interface PoliceCase {
   verifiedBy?: string;
   briefDescription?: string;
   caseCategory?: string;
+  // Store raw form data from infopage so all entered fields can be displayed
+  // Use array of key/value pairs for safe rendering
+  formData?: Array<{ key: string; value: any }> | Record<string, any>;
+  selected?: boolean; // <-- Add this line for table selection
 }
 
 @Injectable({ providedIn: 'root' })
 export class CaseStoreService {
   private readonly storageKey = 'py_detect_police_cases';
   private cases: PoliceCase[] = [];
+  // Observable subject to broadcast changes
+  private casesSubject = new BehaviorSubject<PoliceCase[]>([]);
+
+  /** Observable for components to subscribe to case list updates */
+  getCases$(): Observable<PoliceCase[]> {
+    return this.casesSubject.asObservable();
+  }
 
   constructor() {
     this.load();
   }
 
   /** Create (newest first) */
+  private getNextCaseId(): string {
+    const max = this.cases
+      .map(c => c.caseId)
+      .map(id => parseInt((id || '').replace('CASE-', ''),10))
+      .filter(n => !isNaN(n))
+      .reduce((a, b) => Math.max(a, b),0);
+    return `CASE-${(max +1).toString().padStart(3, '0')}`;
+  }
+
   addPoliceCase(c: PoliceCase): void {
+    if (!c.caseId) {
+      c.caseId = this.getNextCaseId();
+    }
+    c.lastUpdated = new Date().toISOString();
+    c.verifiedBy = c.verifiedBy || '';
     this.cases.unshift(c);
     this.save();
+    this.debugLogCasesOperation('addPoliceCase', c);
+    this.casesSubject.next(this.cases.slice());
   }
 
   /** Read */
@@ -53,9 +81,20 @@ export class CaseStoreService {
 
   /** Update by array index */
   updatePoliceCaseAt(index: number, updated: PoliceCase): void {
-    if (index >= 0 && index < this.cases.length) {
+    if (index >=0 && index < this.cases.length) {
+      updated.lastUpdated = new Date().toISOString();
       this.cases[index] = updated;
       this.save();
+      this.casesSubject.next(this.cases.slice());
+    }
+  }
+
+  /** Delete by array index */
+  deletePoliceCaseAt(index: number): void {
+    if (index >=0 && index < this.cases.length) {
+      this.cases.splice(index,1);
+      this.save();
+      this.casesSubject.next(this.cases.slice());
     }
   }
 
@@ -63,8 +102,10 @@ export class CaseStoreService {
   updatePoliceCaseById(caseId: string, updated: PoliceCase): void {
     const idx = this.cases.findIndex(c => c.caseId === caseId);
     if (idx !== -1) {
+      updated.lastUpdated = new Date().toISOString();
       this.cases[idx] = updated;
       this.save();
+      this.casesSubject.next(this.cases.slice());
     }
   }
 
@@ -77,6 +118,14 @@ export class CaseStoreService {
     const suspect = (formValue && formValue.suspect) || {};
     const notes = (formValue && formValue.notes) || {};
 
+    // Merge raw inputs so we capture everything entered on the Info page
+    const mergedRaw = {
+      ...(formValue && formValue.formData ? formValue.formData : (formValue || {})),
+      ...crime,
+      ...suspect,
+      ...notes
+    };
+
     const mapped: PoliceCase = {
       caseId: crime.caseId || '',
       dateTime: crime.dateTime || '',
@@ -97,7 +146,9 @@ export class CaseStoreService {
         gender: suspect.gender || '—',
         address: suspect.address || '—',
         occupation: suspect.alias || ''
-      }
+      },
+      // store raw form data so UI can display all entered fields
+      formData: this.convertToKeyValue(mergedRaw || {})
     };
 
     this.addPoliceCase(mapped);
@@ -109,8 +160,8 @@ export class CaseStoreService {
     const suspect = (formValue && formValue.suspect) || {};
     const notes = (formValue && formValue.notes) || {};
     const mapped: PoliceCase = {
-      caseId: crime.caseId || '',
-      dateTime: crime.dateTime || '',
+      caseId: crime.caseId || (formValue && formValue['Case ID']) || '',
+      dateTime: crime.dateTime || '' ,
       status: notes.status || 'Open',
       crime: crime.crimeType || 'Unknown',
       police: {
@@ -132,16 +183,91 @@ export class CaseStoreService {
       reportedBy: crime.reportedBy || '',
       verifiedBy: notes.verifiedBy || '',
       briefDescription: crime.briefDescription || '',
+      // Save full raw form data. Merge wrapper fields so everything entered is preserved.
+      formData: this.convertToKeyValue(
+      {
+      ...(formValue && formValue.formData ? formValue.formData : (formValue || {})),
+      ...crime,
+      ...suspect,
+      ...notes,
+      ...(formValue && formValue.legal ? formValue.legal : {})
+      }
+      )
     };
+
     const idx = this.cases.findIndex(c => c.caseId === mapped.caseId);
     if (idx !== -1) {
-      this.cases[idx] = mapped;
+      // Merge existing object to preserve other metadata where possible
+      this.cases[idx] = { ...this.cases[idx], ...mapped };
       this.save();
+      this.debugLogCasesOperation('updatePoliceCase', mapped);
+      this.casesSubject.next(this.cases.slice());
     } else {
       this.addPoliceCase(mapped);
     }
   }
 
+  /**
+   * Convert an object (or already key/value array) into an array of {key, value}
+   */
+  private convertToKeyValue(data: any): Array<{ key: string; value: any }> {
+    if (!data) return [];
+    if (Array.isArray(data)) {
+      // assume already in the desired shape
+      return data.map(item => {
+        if (item && typeof item === 'object' && 'key' in item) return item;
+        return { key: String(item), value: item };
+      });
+    }
+
+    const result: Array<{ key: string; value: any }> = [];
+
+    const isPlainObject = (v: any) => v && typeof v === 'object' && !(v instanceof Date) && !(v instanceof File) && !Array.isArray(v);
+
+    const recurse = (obj: any, prefix = '') => {
+      if (obj === null || obj === undefined) return;
+      if (typeof obj !== 'object' || obj instanceof Date || obj instanceof File) {
+        result.push({ key: prefix || 'value', value: obj });
+        return;
+      }
+
+      if (Array.isArray(obj)) {
+        // store arrays as JSON string for readability
+        result.push({ key: prefix || 'value', value: JSON.stringify(obj) });
+        return;
+      }
+
+      for (const k of Object.keys(obj)) {
+        const v = obj[k];
+        const newKey = prefix ? `${prefix}.${k}` : k;
+        if (isPlainObject(v)) {
+          recurse(v, newKey);
+        } else if (Array.isArray(v)) {
+          // arrays -> stringify
+          result.push({ key: newKey, value: JSON.stringify(v) });
+        } else {
+          result.push({ key: newKey, value: v });
+        }
+      }
+    };
+
+    if (typeof data === 'object') {
+      recurse(data, '');
+      return result;
+    }
+
+    // primitive
+    return [{ key: 'value', value: data }];
+  }
+
+  // Simple debug helper to log saved cases (can be removed later)
+  private debugLogCasesOperation(label: string, mapped?: PoliceCase) {
+    try {
+      console.log(`[CaseStore] ${label}`, mapped || null);
+      console.log('[CaseStore] current cases:', JSON.parse(localStorage.getItem(this.storageKey) || '[]'));
+    } catch { }
+  }
+
   /** Persist to localStorage (safe to keep; remove if not needed) */
   private save(): void {
     try { localStorage.setItem(this.storageKey, JSON.stringify(this.cases)); } catch { }
@@ -156,7 +282,7 @@ export class CaseStoreService {
       this.cases = [];
     }
     // Seed a default case if none exist (for development/testing)
-    if (this.cases.length === 0) {
+    if (this.cases.length ===0) {
       this.cases = [
         {
           caseId: 'CASE-001',
@@ -174,14 +300,17 @@ export class CaseStoreService {
           },
           accused: {
             name: 'Jane Smith',
-            age: 30,
+            age:30,
             gender: 'Female',
             address: '456 Side Rd, City',
             occupation: 'Unemployed'
-          }
+          },
+          formData: []
         }
       ];
       this.save();
     }
+    // Emit current cases to subscribers
+    this.casesSubject.next(this.cases.slice());
   }
 }

src/app/validationpage/validationpage.component.css

@@ -1,901 +1,1190 @@
 /* Modern UI header styles from infopage */
 .site-header {
-  background: #011329;
-  box-shadow: 0 2px 12px #38bdf844;
-  margin-bottom: 0;
-  position: relative;
-  z-index: 10;
-  padding-bottom: 0;
+ background: #011329;
+ box-shadow:0 2px 12px #38bdf844;
+ margin-bottom:0;
+ position: relative;
+ z-index:10;
+ padding-bottom:0;
+}
+
+/* CSS variables for positioning */
+:root {
+ --validation-result-top:140px; /* distance from top for the result container */
+ --header-question-height:64px; /* approximate height of the header-question-summary box */
+ --header-question-gap:12px; /* gap between question box and result container */
 }
 
 /* Validation Report Template Styles */
 .validation-template-main {
-  margin-top: 32px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
+ margin-top:32px;
+ width:100%;
+ display: flex;
+ justify-content: flex-start; /* moved to left side */
 }
+
 .validation-template-flex {
-  display: flex;
-  flex-direction: row;
-  max-width: 1200px;
-  width: 100%;
-  gap: 32px;
+ display: grid;
+ /* increased left column width from360px to420px to give more room for case summary */
+ grid-template-columns:420px 1fr;
+ gap:28px;
+ align-items: start;
+ max-width:1200px;
+ margin:0; /* remove auto centering so layout sits on the left */
 }
+
+.validation-side-left {
+ width:420px; /* increased from360px */
+ display: flex;
+ flex-direction: column;
+ gap:16px;
+ align-items: stretch;
+}
+
 .validation-template-left {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 32px;
-  min-width: 180px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ gap:32px;
+ min-width:180px;
 }
+
 .validation-circle {
-  width: 140px;
-  height: 140px;
-  border-radius: 50%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 16px #38bdf844;
-  margin-bottom: 8px;
+ width:140px;
+ height:140px;
+ border-radius:50%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-shadow:0 2px 16px #38bdf844;
+ margin-bottom:8px;
 }
+
+
 .validation-circle.truth {
   background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%);
 }
+
 .validation-circle.inconsistency {
   background: linear-gradient(135deg, #fee2e2 0%, #991b1b 100%);
 }
+
 .circle-value {
-  font-size: 2.4rem;
-  font-weight: 900;
-  color: #2563eb;
-  margin-bottom: 8px;
+ font-size:2.4rem;
+ font-weight:900;
+ color: #2563eb;
+ margin-bottom:8px;
 }
+
 .validation-circle.inconsistency .circle-value {
-  color: #991b1b;
+ color: #991b1b;
 }
+
 .circle-label {
-  font-size: 1rem;
-  color: #6366f1;
-  text-align: center;
+ font-size:1rem;
+ color: #6366f1;
+ text-align: center;
 }
+
 .validation-template-right {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
+ flex:1;
+ display: flex;
+ flex-direction: column;
+ gap:24px;
 }
+
+/* Action buttons row below the main validation template */
+.validation-actions {
+ display:flex;
+ gap:35px;
+ justify-content:flex-end;
+ align-items:center;
+ padding:18px 24px;
+ max-width:1200px;
+ margin:-9px 0 24px 42px; /* align with main content area (left column420px) */
+}
+
+.action-btn {
+ display:inline-flex;
+ align-items:center;
+ gap:8px;
+ background:#fff;
+ border:1px solid rgba(2,24,64,0.06);
+ padding:6px 10px;
+ border-radius:8px;
+ cursor:pointer;
+ font-weight:700;
+ box-shadow:0 8px 18px rgba(2,24,64,0.04);
+}
+
+.action-icon {
+ width:14px;
+ height:14px;
+ border-radius:999px;
+ display:inline-block;
+}
+
+.action-icon.blue { background:#1e40af; }
+.action-icon.purple { background:#7c3aed; }
+.action-icon.green { background:#059669; }
+
+.action-btn.action-download .action-label { color:#0f172a; }
+.action-btn.action-email .action-label { color:#0f172a; }
+.action-btn.action-reanalyze .action-label { color:#0f172a; }
+
+.action-btn:hover { transform:translateY(-2px); box-shadow:012px32px rgba(2,24,64,0.06); }
+
+@media (max-width:900px) {
+ .validation-actions { justify-content:center; margin-left:0; }
+}
+
 .validation-section {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 16px #2563eb22;
-  margin-bottom: 0;
-  padding-bottom: 0;
+ background: #fff;
+ border-radius:12px;
+ box-shadow:0 2px 16px #2563eb22;
+ margin-bottom:0;
+ padding-bottom:0;
 }
+
 .section-header {
-  font-size: 1.15rem;
-  font-weight: 700;
-  padding: 12px 24px;
-  border-radius: 12px 12px 0 0;
-  letter-spacing: 1px;
+ font-size:1.15rem;
+ font-weight:700;
+ padding:12px 24px;
+ border-radius:12px 12px 0 0;
+ letter-spacing:1px;
 }
+
 .details-header {
-  background: #fbbf24;
-  color: #23272b;
+ background: #fbbf24;
+ color: #23272b;
 }
+
 .incident-header {
-  background: #ef4444;
-  color: #fff;
+ background: #ef4444;
+ color: #fff;
 }
+
 .followup-header {
-  background: #14b8a6;
-  color: #fff;
+ background: #14b8a6;
+ color: #fff;
 }
+
 .section-table {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 0 24px 18px 24px;
+ width:100%;
+ display: flex;
+ flex-direction: column;
+ padding:0 24px 18px 24px;
 }
+
 .section-row {
-  display: flex;
-  border-bottom: 1px solid #e5e7eb;
-  padding: 8px 0;
-}
-.section-row:last-child {
-  border-bottom: none;
+ display: flex;
+ border-bottom:1px solid #e5e7eb;
+ padding:8px 0;
 }
+
+ .section-row:last-child {
+ border-bottom: none;
+ }
+
 .section-cell {
-  flex: 1;
-  font-size: 1rem;
-  color: #23272b;
-  padding-right: 16px;
-  word-break: break-word;
+ flex:1;
+ font-size:1rem;
+ color: #23272b;
+ padding-right:16px;
+ word-break: break-word;
 }
-.section-cell[colspan="3"] {
-  flex: 3;
-}
-@media (max-width: 900px) {
-  .validation-template-flex {
-    flex-direction: column;
-    align-items: center;
-  }
-  .validation-template-right {
-    width: 100%;
-  }
+
+ .section-cell[colspan="3"] {
+ flex:3;
+ }
+
+@media (max-width:900px) {
+ .validation-template-flex {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .validation-template-right {
+ width:100%;
+ }
 }
 
 .header-inner {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 18px 32px 0 32px;
-  position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding:18px 32px 0 32px;
+ position: relative;
 }
 
 .logo-cluster {
-  display: flex;
-  align-items: center;
-  gap: 18px;
+ display: flex;
+ align-items: center;
+ gap:18px;
 }
 
 .logo-img-header {
-  width: 54px;
-  height: 54px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
-  padding: 4px;
-  margin-top: -6px;
-  margin-bottom: 1vh;
+ width:54px;
+ height:54px;
+ border-radius:50%;
+ background: #fff;
+ box-shadow:0 2px 8px rgba(0,0,0,0.18);
+ padding:4px;
+ margin-top: -6px;
+ margin-bottom:1vh;
 }
 
 .py-detect-title-header {
-  font-size: 2.1rem;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
-  font-weight: 900;
-  letter-spacing: 6px;
-  color: #38bdf8;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  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;
-  }
+ font-size:2.1rem;
+ font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+ font-weight:900;
+ letter-spacing:6px;
+ color: #38bdf8;
+ display: flex;
+ align-items: center;
+ gap:2px;
+ margin-bottom:1.5vh;
+}
 
+ .py-detect-title-header .py-letter.p {
+ color: #e3f6ff;
+ text-shadow:006px #38bdf8;
+ }
 
-/* Footer */
-footer {
-  background: linear-gradient(to right, #011022, #01030a);
-  color: #fff;
-  text-align: center;
-  padding: 10px 0px;
-  position: static;
-  width: 100%;
+ .py-detect-title-header .py-letter.y {
+ color: #38bdf8;
+ text-shadow:006px #38bdf8;
+ }
+
+ .py-detect-title-header .py-shape {
+ color: #e3f6ff;
+ background: #e3f6ff;
+ text-shadow:006px #38bdf8;
+ box-shadow:006px #38bdf8,002px #fff;
+ border:2px solid #23272b;
+ width:18px;
+ height:4px;
+ display: inline-block;
+ margin:08px;
+ border-radius:2px;
+ }
+
+ .py-detect-title-header .py-letter.d {
+ color: #e3f6ff;
+ text-shadow:006px #38bdf8;
+ }
+
+ .py-detect-title-header .py-letter.e {
+ color: #38bdf8;
+ text-shadow:006px #38bdf8;
+ }
+
+ .py-detect-title-header .py-letter.t {
+ color: #e3f6ff;
+ text-shadow:006px #38bdf8;
+ }
+
+ .py-detect-title-header .py-letter.e2 {
+ color: #38bdf8;
+ text-shadow:006px #38bdf8;
+ }
+
+ .py-detect-title-header .py-letter.c {
+ color: #e3f6ff;
+ text-shadow:006px #38bdf8;
+ }
+
+ .py-detect-title-header .py-letter.t2 {
+ color: #38bdf8;
+ text-shadow:006px #38bdf8;
+ }
+
+.footer {
+ background: linear-gradient(to right, #011022, #01030a);
+ color: #fff;
+ text-align: center;
+ padding:10px 0px;
+ position: fixed;
+ left:0;
+ bottom:0;
+ width:100%;
+ z-index:100;
+ margin-top:0;
+}
+
+/* Back button styling — gradient and subtle animation to match page design */
+.back-btn {
+ background: linear-gradient(90deg,#38bdf8,#2563eb);
+ color: #fff;
+ border: none;
+ border-radius:12px;
+ padding:8px 14px;
+ font-size:0.98rem;
+ font-weight:800;
+ letter-spacing:0.6px;
+ cursor: pointer;
+ box-shadow:0 6px 18px rgba(56,189,248,0.12);
+ transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, filter 220ms ease;
+ display: inline-flex;
+ gap:8px;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ overflow: hidden;
+ margin-bottom:16px;
 }
 
 /* Professional, modern look for validation results */
 .validation-result-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  background: #f6f8fa;
-  position: relative;
-  padding-bottom: 64px; /* Ensure space for footer */
-  min-height: 0;
-}
-
-h2 {
-  font-size: 2.4rem;
-  font-weight: 800;
-  color: #2563eb;
-  margin-top: 40px;
-  margin-bottom: 28px;
-  letter-spacing: 2px;
-  text-align: center;
-  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  text-shadow: 0 2px 12px #38bdf844;
-  border-bottom: 2px solid #38bdf8;
-  padding-bottom: 12px;
+ position: sticky;
+ right:0;
+ top:110px;
+ width:360px;
+ background: linear-gradient(180deg, #ffffff, #f1fbff);
+ padding:18px;
+ border-radius:12px;
+ box-shadow:0 12px 36px rgba(3,102,214,0.06);
+ z-index:60;
 }
 
+/* adjust percentage-box border color so it reads on the lighter container */
 .percentage-box {
-  background: rgba(30,41,59,0.92);
-  border-radius: 18px;
-  box-shadow: 0 8px 32px rgba(30,41,59,0.48), 0 0 24px #38bdf844;
-  border: 3px solid #38bdf8;
-  padding: 48px 64px;
-  min-width: 340px;
-  max-width: 480px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 32px;
+ background: rgba(3,102,214,0.06);
+ border-radius:14px;
+ box-shadow:0 8px 32px rgba(30,41,59,0.06),0018px rgba(56,189,248,0.04);
+ border:1px solid rgba(56,189,248,0.08);
+ padding:20px 26px; /* reduced */
+ min-width:260px;
+ max-width:320px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap:12px;
 }
 
-.percentage-box p {
-  font-size: 2.2rem;
-  font-weight: 700;
-  color: #bae6fd;
-  margin: 0;
-  letter-spacing: 1px;
-  text-shadow: 0 0 8px #38bdf888;
-}
+/* Radial diagram sizing inside the compact box */
+.radial-chart-wrapper { width:212px; height:177px; display:flex; align-items:center; justify-content:center; }
+.radial-number { font-size:1.2rem; }
 
-.percentage-box p strong {
-  color: #38bdf8;
-  font-size: 2.3rem;
-  font-weight: 900;
-  margin-right: 12px;
-}
+/* Radial animation styles */
+.radial-chart-wrapper {
+ width:212px;
+ height:177px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.radial-svg { width:100%; height:124%; overflow:visible; }
 
-/* Add a subtle animation for result appearance */
-.validation-result-container {
-  animation: fadeInUp 0.8s cubic-bezier(.39,.58,.57,1) both;
+.radial-bg { stroke: rgba(0,0,0,0.06); }
+.radial-anim { transition: stroke-dashoffset 3000ms cubic-bezier(.2,.9,.2,1); transform-origin: center; }
+
+/* Color the animated strokes to match labels */
+.outer-fg { stroke: #6366f1; }
+.middle-fg { stroke: #059669; }
+.inner-fg { stroke: #ef4444; }
+
+/* Color the radial percentage values per modality: audio (blue), video (green), verified (red) */
+.radial-values .radial-item:nth-child(1) .radial-number {
+ color: #2563eb; /* blue for audio */
+}
+.radial-values .radial-item:nth-child(2) .radial-number {
+ color: #059669; /* green for video */
 }
+.radial-values .radial-item:nth-child(3) .radial-number {
+ color: #ef4444; /* red for verified */
+}
+
+/* Ensure circles use correct stroke-dasharray values via binding; initial dashoffset set in component to circumference (hidden) */
 
-@keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    transform: translateY(40px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.radial-values { display:flex; flex-direction:row; gap:53px; }
+.radial-item { display:flex; gap:10px; align-items:center; }
+.radial-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:999px; }
+.icon-audio { background: linear-gradient(90deg,#eef2ff,#e0f2fe); color:#0550ff; padding:4px; border-radius:6px; }
+.icon-video { background: linear-gradient(90deg,#ecfdf5,#d1fae5); color:#059669; padding:4px; border-radius:6px; }
+.icon-verified { background: linear-gradient(90deg,#fff1f2,#fee2e2); color:#ef4444; padding:4px; border-radius:6px; }
+
+.radial-number { font-size:1.4rem; font-weight:800; color:#0f172a; }
+.radial-label { font-size:0.95rem; color:#475569; }
+.radial-detail { font-size:0.9rem; color:#6b7280; margin-top:4px; }
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ .radial-anim { transition: none !important; }
 }
 
-.global-bottom-left-btn {
-  position: fixed;
-  left: 32px;
-  bottom: 32px;
-  z-index: 1000;
-  margin: 0;
-  box-shadow: 0 0 32px #38bdf888, 0 2px 24px #22222288;
+/* Ensure layout is responsive: on small screens keep it centered and full-width */
+@media (max-width:900px) {
+ .validation-result-container {
+ position: static;
+ right: auto;
+ top: auto;
+ width:100%;
+ max-width:100%;
+ padding:18px 12px;
+ border-radius:12px;
+ margin:0 12px 18px 12px;
+ }
+
+ .percentage-box {
+ min-width: auto;
+ max-width:100%;
+ padding:18px;
+ }
+
+ .radial-chart-wrapper {
+ width:212px;
+ height:177px;
+ }
 }
 
-.back-btn {
-  font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  font-size: 1.05rem;
-  font-weight: 700;
-  letter-spacing: 2px;
-  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
-  color: #e3f6ff;
-  box-shadow: 0 2px 16px #38bdf888;
-  border: none;
-  border-radius: 12px;
-  padding: 0.55rem 1.3rem;
-  margin: 0 0.3rem;
-  cursor: pointer;
-  transition: background 0.4s, box-shadow 0.4s, color 0.3s, transform 0.2s;
-  position: fixed;
-  left: 24px;
-  bottom: 24px;
-  z-index: 1000;
-  overflow: hidden;
-  animation: buttonPulse 1.2s infinite alternate;
+.validation-template-left .validation-result-container {
+ position: relative;
+ right: auto;
+ top: auto;
+ width:100%;
+ max-width:900px;
+ margin:12px 0 4px 0;
+ padding:16px;
+ border-radius:12px;
+ box-shadow:0 8px 32px rgba(3,102,214,0.06);
+ background: linear-gradient(180deg, #ffffff, #f7fbff);
 }
 
-.back-btn:hover {
-  background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
-  color: #bae6fd;
-  box-shadow: 0 2px 24px #bae6fd88;
-  animation: buttonPulse 0.7s;
+.validation-template-left .percentage-box { max-width:100%; min-width: auto; padding:16px; }
+.radial-chart-wrapper { width:212px; height:177px; }
+
+/* Responsive adjustments: ensure left panel width is respected on smaller screens */
+@media (max-width:1200px) {
+ .validation-template-flex { grid-template-columns:48%1fr; }
+ .validation-side-left { width:48%; }
+}
+@media (max-width:1000px) {
+ .validation-template-right { display: none; }
+ .validation-template-flex { grid-template-columns:1fr; }
+ .validation-template-left .radial-chart-wrapper {
+ width:212px;
+ height:177px;
+ }
 }
 
-@keyframes buttonPulse {
-  0% { box-shadow: 0 2px 16px #38bdf888; transform: scale(1); }
-  100% { box-shadow: 0 2px 32px #bae6fd88; transform: scale(1.07); }
+/* Footer */
+footer {
+ background: linear-gradient(to right, #011022, #01030a);
+ color: #fff;
+ text-align: center;
+ padding:10px 0px;
+ position: fixed;
+ left:0;
+ bottom:0;
+ width:100%;
+ z-index:100;
+ margin-top:0;
 }
 
 /* Summary card for investigation evaluation */
 .summary-card {
-  margin-top: 32px;
-  background: rgba(56, 189, 248, 0.08);
-  border-radius: 14px;
-  border: 2px solid rgba(99, 102, 241, 0.15);
-  box-shadow: 0 0 24px rgba(99, 102, 241, 0.12);
-  padding: 24px 32px;
-  max-width: 420px;
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+ margin-top:32px;
+ background: rgba(56,189,248,0.08);
+ border-radius:12px;
+ border:2px solid rgba(99,102,241,0.15);
+ box-shadow:0024px rgba(99,102,241,0.12);
+ padding:24px 32px;
+ max-width:420px;
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
 }
+
 .summary-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #2563eb;
-  margin-bottom: 10px;
-  letter-spacing: 1px;
+ font-size:1.25rem;
+ font-weight:700;
+ color: #2563eb;
+ margin-bottom:10px;
+ letter-spacing:1px;
 }
+
 .summary-text {
-  font-size: 1.08rem;
-  color: #23272b;
-  font-weight: 500;
-  margin: 0;
+ font-size:1.08rem;
+ color: #23272b;
+ font-weight:500;
+ margin:0;
 }
 
 /* Status chips/badges for result */
 .status-chip {
-  display: inline-block;
-  font-size: 0.85rem;
-  padding: 4px 10px;
-  border-radius: 8px;
-  font-weight: 600;
-}
-.status-chip.active { background: #dcfce7; color: #15803d; }
-.status-chip.archived { background: #fee2e2; color: #991b1b; }
+ display: inline-block;
+ font-size:0.85rem;
+ padding:4px 10px;
+ border-radius:8px;
+ font-weight:600;
+}
+
+ .status-chip.active {
+ background: #dcfce7;
+ color: #15803d;
+ }
+
+ .status-chip.archived {
+ background: #fee2e2;
+ color: #991b1b;
+ }
 /* Modal styles for report summary */
 .modal-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(30,41,59,0.65);
-  z-index: 2000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeInUp 0.4s;
+ position: fixed;
+ top:0;
+ left:0;
+ right:0;
+ bottom:0;
+ background: rgba(30,41,59,0.65);
+ z-index:2000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ animation: fadeInUp0.4s;
 }
+
 .modal-content {
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 8px 32px #38bdf844, 0 2px 16px #6366f144;
-  padding: 36px 44px 28px 44px;
-  min-width: 340px;
-  max-width: 480px;
-  color: #23272b;
-  position: relative;
-  outline: none;
+ background: #fff;
+ border-radius:18px;
+ box-shadow:0 8px 32px #38bdf844,0 2px 16px #6366f144;
+ padding:36px 44px 28px 44px;
+ min-width:340px;
+ max-width:480px;
+ color: #23272b;
+ position: relative;
+ outline: none;
 }
+
 .modal-title {
-  font-size: 2rem;
-  font-weight: 800;
-  color: #2563eb;
-  margin-bottom: 18px;
-  letter-spacing: 1px;
+ font-size:2rem;
+ font-weight:800;
+ color: #2563eb;
+ margin-bottom:18px;
+ letter-spacing:1px;
 }
+
 .modal-section {
-  margin-bottom: 18px;
+ margin-bottom:18px;
 }
+
 .modal-close {
-  position: absolute;
-  top: 18px;
-  right: 24px;
-  background: none;
-  border: none;
-  font-size: 2rem;
-  color: #2563eb;
-  cursor: pointer;
-  z-index: 10;
+ position: absolute;
+ top:18px;
+ right:24px;
+ background: none;
+ border: none;
+ font-size:2rem;
+ color: #2563eb;
+ cursor: pointer;
+ z-index:10;
 }
+
 .report-actions, .modal-section h3 {
-  margin-top: 18px;
+ margin-top:18px;
 }
+
+
 .report-btn {
   background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
   color: #fff;
-  font-weight: 700;
+  font-weight:700;
   border: none;
-  border-radius: 999px;
-  padding: 0.5rem 1.4rem;
-  margin-right: 12px;
-  margin-bottom: 8px;
+  border-radius:999px;
+  padding:0.5rem 1.4rem;
+  margin-right:12px;
+  margin-bottom:8px;
   cursor: pointer;
-  box-shadow: 0 2px 16px #38bdf888;
+  box-shadow:0 2px 16px #38bdf888;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  font-size: 1rem;
+  gap:8px;
+  font-size:1rem;
   transition: background 0.2s, box-shadow 0.2s;
 }
+
 .report-btn:hover {
   background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
   color: #bae6fd;
-  box-shadow: 0 2px 24px #bae6fd88;
+  box-shadow:0 2px 24px #bae6fd88;
 }
+
 .icon-report::before {
-  content: "\1F4C4";
-  font-size: 1.2em;
-  margin-right: 4px;
+ content: "\1F4C4";
+ font-size:1.2em;
+ margin-right:4px;
 }
+
 .icon-download::before {
-  content: "\1F4BE";
-  font-size: 1.2em;
-  margin-right: 4px;
+ content: "\1F4BE";
+ font-size:1.2em;
+ margin-right:4px;
 }
+
 .icon-email::before {
-  content: "\2709";
-  font-size: 1.2em;
-  margin-right: 4px;
+ content: "\2709";
+ font-size:1.2em;
+ margin-right:4px;
 }
+
 .modal-content h3 {
-  font-size: 1.1rem;
-  color: #2563eb;
-  font-weight: 700;
-  margin-bottom: 6px;
+ font-size:1.1rem;
+ color: #2563eb;
+ font-weight:700;
+ margin-bottom:6px;
 }
+
 .modal-content p {
-  font-size: 1rem;
-  color: #23272b;
-  margin-bottom: 0;
+ font-size:1rem;
+ color: #23272b;
+ margin-bottom:0;
 }
 
 /* Dashboard header styles */
+
 .dashboard-header {
   background: linear-gradient(90deg, rgba(30,41,59,0.92) 0%, #38bdf8 100%);
-  padding: 32px 0 24px 0;
+  padding:12px 0 10px 0;
   color: #fff;
-  box-shadow: 0 2px 16px #2563eb44;
+  box-shadow:0 2px 16px #2563eb44;
   position: relative;
 }
+
 .dashboard-header-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ max-width:1200px;
+ margin:0 auto;
+ padding:032px;
 }
+
 .dashboard-logo {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 2px 8px #38bdf844;
-  margin-right: 24px;
+ width:64px;
+ height:64px;
+ border-radius:50%;
+ background: #fff;
+ box-shadow:0 2px 8px #38bdf844;
+ margin-right:24px;
 }
+
 .dashboard-title-block {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
 }
+
 .dashboard-title {
-  font-size: 2.2rem;
-  font-weight: 900;
-  letter-spacing: 2px;
-  color: #fff;
+ font-size:1.45rem;
+ font-weight:900;
+ letter-spacing:2px;
+ color: #fff;
 }
+
 .dashboard-date {
-  font-size: 1.1rem;
-  color: #bae6fd;
-  margin-top: 4px;
+ font-size:0.95rem;
+ color: #bae6fd;
+ margin-top:2px;
 }
+
 .header-btns-right {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-/* Main dashboard content */
-.dashboard-main {
-  background: #f6f8fa;
-  min-height: 100vh;
-  padding: 32px 0 0 0;
-}
-.dashboard-cards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 32px;
-  max-width: 1200px;
-  margin: 0 auto;
-  justify-content: center;
-}
-.dashboard-card {
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 4px 24px #2563eb22;
-  padding: 32px 28px;
-  min-width: 280px;
-  max-width: 340px;
-  flex: 1 1 320px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+ display: flex;
+ align-items: center;
+ gap:16px;
 }
-.dashboard-card-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #2563eb;
-  margin-bottom: 18px;
-  letter-spacing: 1px;
-}
-.dashboard-chart-card {
+
+/* Top hero bar */
+.hero-bar {
+ width:100%;
+ background: linear-gradient(90deg, #64748b, #00d4ff);
+ color: #e6f2ff;
+ padding:0px 0;
+ box-shadow:0 8px 36px #bae6fd;
+}
+.hero-inner {
+ max-width:1200px;
+ margin:0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap:12px;
+ padding:024px;
+}
+.hero-title h1 {
+ margin:0;
+ font-size:1.6rem;
+ font-weight:900;
+ letter-spacing:1px;
+ background: linear-gradient(90deg, #fff, #cceeff);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ color: transparent; /* fallback for browsers respecting color */
+}
+.hero-sub { color: #bcd9f8; font-size:0.95rem; margin-top:4px; }
+.hero-actions { display:flex; align-items:center; gap:8px; }
+
+/* Ensure hero-inner is a positioning context for absolute button */
+.hero-inner { position: relative; }
+
+/* Place the More details pill at the right-side corner of the hero bar */
+.hero-more-btn {
+  position: absolute;
+  right: 150px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 30;
+  /* keep existing visual styles */
+  background: linear-gradient(90deg, #0ea5ff, #23272b);
+  color: #fff;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 999px;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(37,99,235,0.18);
 }
-.dashboard-chart-circle {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 12px;
-  box-shadow: 0 2px 16px #38bdf844;
-}
-.dashboard-circle-value {
-  font-size: 2.2rem;
-  font-weight: 900;
-  color: #2563eb;
-  text-shadow: 0 2px 12px #38bdf844;
-}
-.dashboard-card-label {
-  font-size: 1rem;
-  color: #6366f1;
-  margin-top: 8px;
-}
-.dashboard-details-card {
-  align-items: flex-start;
-}
-.dashboard-details-list {
-  width: 100%;
-}
-.dashboard-details-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 14px;
+
+.hero-more-btn:hover { transform: translateY(-52%); box-shadow:0 10px 26px rgba(37,99,235,0.22); }
+
+/* Ensure hero title and actions appear inline and centered as a group */
+.hero-bar .hero-inner { justify-content: center !important; position: relative; }
+.hero-bar .hero-title { text-align: center; }
+.hero-bar .hero-actions {
+ position: static !important;
+ display: flex;
+ gap:8px;
+ align-items: center;
+ margin-left:16px; /* space between title and actions */
+}
+.hero-bar .hero-more-btn {
+ right: -285px;
+ top: auto !important;
+ transform: none !important;
 }
-.dashboard-details-label {
-  font-size: 1rem;
-  color: #23272b;
-  font-weight: 600;
+
+/* Responsive: keep actions inline on small screens but allow wrapping */
+@media (max-width:900px) {
+ .hero-bar .hero-inner { flex-direction: column; gap:12px; }
+ .hero-bar .hero-actions { margin-left:0; }
 }
-.dashboard-details-value {
-  font-size: 1rem;
-  color: #2563eb;
-  font-weight: 700;
+
+/* Layout containers (left content / right analytics) */
+.validation-template-main { padding:18px 20px; }
+.validation-template-flex { display: grid; grid-template-columns:360px 1fr; gap:28px; align-items: start; max-width:1200px; margin:0 auto; }
+
+/* Summary cards grid */
+.summary-cards { display: grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap:16px; width:100%; }
+.summary-card { padding:14px; border-radius:12px; min-height:100px; display:flex; flex-direction:column; gap:8px; justify-content:center; }
+.summary-card .card-top { font-weight:700; color:#075985; font-size:0.95rem; }
+.summary-card .card-value { font-size:1.25rem; font-weight:800; color:#0f3b72; }
+.summary-card .card-sub { font-size:0.9rem; color:#64748b; }
+
+/* Metrics pane */
+.metrics-pane { width:100%; margin-top:18px; }
+.metrics-title { font-size:1.05rem; color:#075985; margin-bottom:10px; font-weight:800; }
+.metrics-bars { display:flex; flex-direction:column; gap:10px; }
+.metrics-row-item { display:flex; align-items:center; gap:12px; }
+.metrics-label {
+ width:120px;
+ font-weight: 700;
+ color: #475569;}
+.metrics-bar-bg { flex:1; background:#e6eef8; border-radius:12px; height:12px; overflow:hidden; }
+.metrics-bar-fill { height:100%; width:0%; background: linear-gradient(90deg,#38bdf8,#2aa89f); border-radius:12px; transition: width 0.9s cubic-bezier(.2,.9,.2,1); }
+.metrics-bar-fill.cyan { background: linear-gradient(90deg,#60a5fa,#06b6d4); }
+.metrics-bar-fill.amber { background: linear-gradient(90deg,#fbbf24,#f97316); }
+.metrics-value { width:56px; text-align:right; font-weight:700; color:#075985; }
+
+/* Case summary refinements */
+.case-summary-section { padding:18px; background: rgba(255,255,255,0.95); border-radius:12px; box-shadow:0 8px 32px rgba(2,6,23,0.04); margin-top:18px; width:100%; max-width:100%; }
+.case-summary-grid { display:flex; gap:16px; align-items:flex-start; }
+.case-summary-fields { display:flex; flex-direction:column; gap:6px; color:#334155; margin-bottom:12px; }
+.case-summary-text { color:#334155; flex:1; margin-top:12px; }
+
+/* Ensure card-modal-case defaults align with wider left panel when present */
+.card-modal-case {
+ --w:34%; /* default flex width for the card row version */
+ --h: calc(100vh -160px);
+ min-width:300px;
+ align-self: flex-start;
 }
-.dashboard-actions-card {
-  align-items: flex-start;
+
+/* Validation results when moved into left column */
+.validation-template-left .validation-result-container {
+ position: relative;
+ right: auto;
+ top: auto;
+ width:100%;
+ max-width:900px;
+ margin:12px 0 4px 0;
+ padding:16px;
+ border-radius:12px;
+ box-shadow:0 8px 32px rgba(3,102,214,0.06);
+ background: linear-gradient(180deg, #ffffff, #f7fbff);
 }
 
-/* Session Overview Card */
-.session-overview-card {
-  background: #fbbf24;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px #fbbf2444;
-  margin: 32px auto 18px auto;
-  max-width: 700px;
-  padding: 18px 32px 12px 32px;
+/* small tweak: ensure radial box scales within left column */
+.validation-template-left .percentage-box { max-width:100%; min-width: auto; padding:16px; }
+.radial-chart-wrapper {
+ width:212px;
+ height:177px;
 }
-.session-header {
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: #23272b;
-  margin-bottom: 10px;
-}
-.session-fields {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 18px 32px;
-}
-.session-field {
-  min-width: 220px;
-  font-size: 1rem;
-  color: #23272b;
-}
-.field-label {
-  font-weight: 600;
-  color: #23272b;
-}
-.field-value {
-  font-weight: 500;
-  color: #2563eb;
-}
-
-/* AI Analysis Summary */
-.ai-summary-section {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 16px #2563eb22;
-  margin: 0 auto 24px auto;
-  max-width: 900px;
-  padding: 24px 32px;
-}
-.ai-summary-header {
-  font-size: 1.2rem;
-  font-weight: 700;
-  color: #2563eb;
-  margin-bottom: 18px;
+
+/* Keep original right-column behaviour but lower priority (in case other pages use it) */
+.validation-result-container { position: sticky; top:110px; right:0; width:360px; }
+
+/* Horizontal main row to place validation results and cards side-by-side */
+.main-row { display:flex; gap:20px; align-items:flex-start; width:100%; }
+.cards-col { flex:1; display:flex; flex-direction:column; gap:16px; }
+
+/* Make validation-result-container take intrinsic width and let cards-col expand */
+.validation-result-container { width:auto; max-width:420px; }
+
+/* Align summary-cards to be a vertical stack in cards-col */
+.summary-cards { display:flex; flex-direction:column; gap:16px; }
+.summary-card { max-width:100%; }
+
+@media (max-width:1000px) {
+ .main-row { flex-direction:column; }
+ .validation-result-container { max-width:100%; }
+ .cards-col { width:100%; }
 }
-.ai-metrics-grid {
+
+/* Cards row: horizontal layout to fit page width */
+.cards-row { display:flex; gap:16px; align-items:flex-start; width:100%; justify-content:flex-start; grid-column:1 / -1; justify-self: start; margin-left:0; padding-left:0; position: relative; left:0; }
+.card-modal { background: linear-gradient(120deg,#ffffff,#f6faff); border-radius:12px; box-shadow:0 8px 32px rgba(2,6,23,0.04); padding:12px; display:flex; flex-direction:column; }
+
+/* Make all card-modals expand to fill available horizontal space evenly */
+.cards-row .card-modal { flex:110; min-width:350px; height: calc(100vh -200px); overflow:hidden; }
+
+/* Remove previous rigid per-card max-widths (selectors kept for compatibility) */
+.card-modal-case, .card-modal-metrics, .card-modal-results, .card-modal-summary { /* sized by .cards-row .card-modal */ }
+
+.card-modal-header { font-weight:800; color:#075985; margin-bottom:8px; }
+.card-modal-body { flex:1; overflow:h; padding-right:8px; }
+.card-modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
+
+/* Specific inner layouts */
+.results-horizontal { display:flex; gap:12px; align-items:center; }
+.results-values { display:flex; flex-direction:row; gap:12px; }
+
+/* Summary grid inside summary card modal */
+.summary-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 18px 32px;
-}
-.ai-metric {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  background: #f6f8fa;
-  border-radius: 10px;
-  padding: 16px 18px;
-  box-shadow: 0 2px 8px #2563eb11;
-}
-.metric-label {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #23272b;
-  margin-bottom: 8px;
-}
-.metric-ring {
-  font-size: 2rem;
-  font-weight: 900;
-  border-radius: 50%;
-  padding: 18px 0;
-  width: 90px;
-  text-align: center;
-  margin-bottom: 6px;
-}
-.metric-blue {
-  background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%);
-  color: #2563eb;
-  box-shadow: 0 2px 8px #38bdf844;
+  grid-template-columns: repeat(2, minmax(0,1fr));
+  gap: 12px;
+  margin-top: -8px;
 }
-.metric-cyan {
-  background: linear-gradient(135deg, #a7f3d0 0%, #38bdf8 100%);
-  color: #0e7490;
+
+/* Ensure metrics bars keep original look */
+.metrics-bars { display:flex; flex-direction:column; gap:10px; }
+.metrics-row-item { display:flex; align-items:center; gap:12px; }
+
+/* Hide scrollbars where possible and ensure page height fits viewport */
+:host {
+ margin:0;
+ padding:0;
+ width:100%;
+ height:100%;
+ /* Hide both horizontal and vertical scrollbars for this validation page only */
+ overflow: hidden;
 }
-.metric-red {
-  background: linear-gradient(135deg, #fee2e2 0%, #991b1b 100%);
-  color: #991b1b;
+
+.validation-template-main {
+ height: calc(100vh -120px);
+ overflow: hidden;
 }
-.metric-bar {
-  font-size: 1rem;
-  font-weight: 700;
-  color: #2563eb;
-  margin-bottom: 6px;
+
+.validation-template-flex {
+ height:100%;
+ display: flex;
+ flex-direction: column;
 }
-.metric-verdict-box {
-  background: #fef9c3;
-  color: #f59e42;
-  font-weight: 700;
-  border-radius: 8px;
-  padding: 8px 12px;
-  margin-top: 6px;
-  box-shadow: 0 2px 8px #fbbf2444;
-}
-
-/* AI Observations Section */
-.ai-observations-section {
-  background: #14b8a6;
-  border-radius: 12px;
-  box-shadow: 0 2px 16px #14b8a644;
-  margin: 0 auto 24px auto;
-  max-width: 900px;
-  padding: 24px 32px;
-  color: #fff;
+
+.cards-row .card-modal-body {
+ max-height: calc(100vh -260px);
+ overflow-y: auto;
 }
-.observations-header {
-  font-size: 1.15rem;
-  font-weight: 700;
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+
+
+/* Responsive: stack cards vertically on small screens */
+@media (max-width:1200px) {
+ .card-modal-case, .card-modal-metrics, .card-modal-results, .card-modal-summary { flex:1145%; max-width:48%; }
 }
-.ai-icon {
-  font-size: 1.3rem;
-}
-.observations-note {
-  background: #fff;
-  color: #134e4a;
-  border-radius: 8px;
-  padding: 14px 18px;
-  font-size: 1rem;
-  font-weight: 500;
-  box-shadow: 0 2px 8px #14b8a644;
-}
-
-/* Audio–Video Metrics Section */
-.audio-video-metrics-section {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 16px #2563eb22;
-  margin: 0 auto 24px auto;
-  max-width: 900px;
-  padding: 24px 32px;
-}
-.metrics-header {
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: #2563eb;
-  margin-bottom: 12px;
-}
-.metrics-graphs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 18px;
-}
-.graph-placeholder {
-  background: #f6f8fa;
-  border-radius: 8px;
-  color: #6366f1;
-  font-size: 1rem;
-  font-weight: 600;
-  padding: 18px 24px;
-  min-width: 220px;
-  flex: 1;
-  text-align: center;
-  box-shadow: 0 2px 8px #2563eb11;
-}
-
-/* Final Outcome Section */
-.final-outcome-section {
-  background: linear-gradient(90deg, #fbbf24 0%, #fef9c3 100%);
-  border-radius: 12px;
-  box-shadow: 0 2px 16px #fbbf2444;
-  margin: 0 auto 32px auto;
-  max-width: 900px;
-  padding: 24px 32px;
-}
-.outcome-header {
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: #f59e42;
-  margin-bottom: 12px;
-}
-.outcome-fields {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 18px 32px;
-  margin-bottom: 18px;
-}
-.outcome-field {
-  min-width: 220px;
-  font-size: 1rem;
-  color: #23272b;
-}
-.outcome-field .field-label {
-  font-weight: 600;
-  color: #23272b;
-}
-.outcome-field .field-value {
-  font-weight: 500;
-  color: #2563eb;
-}
-.outcome-field .field-value.warning {
-  color: #991b1b;
-  font-weight: 700;
+@media (max-width:900px) {
+ .cards-row { flex-direction:column; }
+ .card-modal-case, .card-modal-metrics, .card-modal-results, .card-modal-summary { width:100%; max-width:100%; min-width:unset; height:auto; }
+ .card-modal-body { overflow: visible; max-height: none; }
+ .validation-template-main { height: auto; }
 }
-.outcome-actions {
-  display: flex;
-  gap: 18px;
+
+/* Animations and transitions */
+.card-glass { /* existing definitions remain applied */ }
+
+/* small touch: animate radial numbers and card entries */
+.summary-card { transform: translateY(6px); animation: enterCard0.48s cubic-bezier(.2,.9,.2,1) both; }
+@keyframes enterCard { from { opacity:0; transform: translateY(12px) scale(0.995);} to { opacity:1; transform: translateY(0) scale(1);} }
+
+/* Ensure metrics fills update smoothly on load */
+.metrics-bar-fill { will-change: width; }
+
+/* ensure footer won't overlap sticky right panel on small screens */
+@media (max-width:600px) { footer { position: static; } }
+
+/* place pre-question summary inside validation header at top-right */
+.validation-header {
+ position: relative;
+}
+.validation-header .header-question-summary {
+ position: absolute;
+ right:24px;
+ /* place inside the header (top-right) */
+ top:18px;
+ background: linear-gradient(90deg, #ffffff, #f1fbff);
+ border:1px solid rgba(3,102,214,0.06);
+ padding:8px 12px;
+ border-radius:10px;
+ box-shadow:0 6px 18px rgba(3,102,214,0.06);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-width:160px;
+ z-index:60;
 }
-.report-btn {
-  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
-  color: #fff;
-  font-weight: 700;
-  border: none;
-  border-radius: 999px;
-  padding: 0.5rem 1.4rem;
-  margin-bottom: 8px;
-  cursor: pointer;
-  box-shadow: 0 2px 16px #38bdf888;
-  font-size: 1rem;
-  transition: background 0.2s, box-shadow 0.2s;
+
+.validation-header .header-question-summary .question-summary-title {
+ font-size:1rem;
+ font-weight:800;
+ color: #075985;
+ margin-bottom:6px;
 }
-.report-btn:hover {
-  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
-  color: #bae6fd;
-  box-shadow: 0 2px 24px #bae6fd88;
-}
-.investigation-outcome-card {
-  width: 100%;
-  max-width: 420px;
-  margin: 0 auto;
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 4px 24px #2563eb22;
-  padding: 32px 28px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+
+.validation-header .header-question-summary .action-btn {
+ padding:6px 10px;
+ font-size:0.95rem;
+ border-radius:8px;
 }
-.outcome-fields-grid {
-  display: grid;
-  grid-template-columns: 1fr 1.2fr;
-  gap: 18px 12px;
-  width: 100%;
-  margin-top: 8px;
-}
-.outcome-field-row {
-  display: contents;
-}
-.outcome-label {
-  font-size: 1rem;
-  color: #23272b;
-  font-weight: 600;
-  text-align: right;
-  padding-right: 12px;
-}
-.outcome-value {
-  font-size: 1rem;
-  color: #2563eb;
-  font-weight: 700;
-  text-align: left;
+
+@media (max-width:900px) {
+ .validation-header .header-question-summary {
+ position: static;
+ margin-top:12px;
+ right: auto;
+ top: auto;
+ transform: none;
+ min-width: auto;
+ }
 }
-.status-chip.active {
-  background: #dcfce7;
-  color: #15803d;
-  border-radius: 8px;
-  padding: 4px 10px;
-  font-weight: 700;
+
+/* Horizontal main row to place validation results and cards side-by-side */
+.main-row { display:flex; gap:20px; align-items:flex-start; width:100%; }
+.cards-col { flex:1; display:flex; flex-direction:column; gap:16px; }
+
+/* Make validation-result-container take intrinsic width and let cards-col expand */
+.validation-result-container { width:auto; max-width:420px; }
+
+/* Align summary-cards to be a vertical stack in cards-col */
+.summary-cards { display:flex; flex-direction:column; gap:16px; }
+.summary-card { max-width:100%; }
+
+@media (max-width:1000px) {
+ .main-row { flex-direction:column; }
+ .validation-result-container { max-width:100%; }
+ .cards-col { width:100%; }
 }
-.status-chip.archived {
-  background: #fee2e2;
-  color: #991b1b;
-  border-radius: 8px;
-  padding: 4px 10px;
-  font-weight: 700;
+
+/* Cards row: horizontal layout to fit page width */
+.cards-row { display:flex; gap:16px; align-items:flex-start; width:100%; justify-content:flex-start; grid-column:1 / -1; justify-self: start; margin-left:0; padding-left:0; position: relative; left:0; }
+.card-modal { background: linear-gradient(120deg,#ffffff,#f6faff); border-radius:12px; box-shadow:0 8px 32px rgba(2,6,23,0.04); padding:12px; display:flex; flex-direction:column; }
+
+/* Make all card-modals expand to fill available horizontal space evenly */
+.cards-row .card-modal { flex:110; min-width:200px; height: calc(100vh -200px); overflow:hidden; }
+
+/* Remove previous rigid per-card max-widths (selectors kept for compatibility) */
+.card-modal-case, .card-modal-metrics, .card-modal-results, .card-modal-summary { /* sized by .cards-row .card-modal */ }
+
+.card-modal-header { font-weight:800; color:#075985; margin-bottom:8px; }
+.card-modal-body { flex:1; overflow:auto; padding-right:8px; }
+.card-modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
+
+.cards-row {
+ /* Use CSS Grid for a clean3-column layout */
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0,1fr)); /*3 columns on wide screens */
+ gap:20px;
+ align-items: start;
+ justify-items: stretch;
+ width:153%;
+ margin-left:-340px; /* ensure it's flush to left */
+}
+
+/* Responsive grid breakpoints */
+@media (max-width:1200px) {
+ .cards-row {
+ grid-template-columns: repeat(2, minmax(0,1fr)); /*2 columns on medium screens */
+ }
 }
-.summary-value {
-  grid-column: span 2;
-  background: #f6f8fa;
-  color: #991b1b;
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 0.98rem;
-  font-weight: 600;
-  margin-top: 6px;
+@media (max-width:800px) {
+ .cards-row {
+ grid-template-columns:1fr; /* stack on small screens */
+ }
 }
+
+/* Base card styling used by all dashboard cards */
+.case-summary-card,
+.metrics-card,
+.result-chart-card,
+.summary-card {
+ /* Per-card variables (can be set inline or with additional classes):
+ --card-offset-x: shift left/right (example: "-12px" or "8px")
+ --card-margin-left: extra margin-left if preferred (example: "8px")
+ --card-width: explicit width (e.g. "100%" or "480px"); grid keeps this flexible
+ --card-height: explicit height (e.g. "480px")
+ */
+ --card-offset-x:0px;
+ --card-margin-left:0px;
+ --card-width: auto;
+ --card-height:0px;
+
+ background: linear-gradient(180deg, #ffffff, #f7fbff);
+ border-radius:12px;
+ box-shadow:0 10px 30px rgba(2,6,23,0.06);
+ padding:16px;
+ box-sizing: border-box;
+
+ /* Allow nudging via transform (preferred) and margin as fallback */
+ transform: translateX(var(--card-offset-x));
+ margin-left: var(--card-margin-left);
+
+ /* Width/height controls - width in grid context should usually be "auto" or100% */
+ width: var(--card-width);
+ min-width:0; /* important for grid children to allow shrinking */
+ height: var(--card-height);
+
+ /* Smooth animations when position/size changes */
+ transition: transform 280ms cubic-bezier(.2,.9,.2,1),
+ margin 280ms cubic-bezier(.2,.9,.2,1),
+ width 340ms cubic-bezier(.2,.9,.2,1),
+ height 340ms cubic-bezier(.2,.9,.2,1),
+ box-shadow 220ms ease;
+
+ /* Ensure content can scroll internally if height is constrained */
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+/* Content area inside card that may scroll if content is taller than allowed height */
+.case-summary-card .card-body,
+.metrics-card .card-body,
+.result-chart-card .card-body,
+.summary-card .card-body {
+ overflow: auto;
+ padding-right:8px;
+}
+
+/* Utility classes for quick nudges (small adjustments) */
+.nudge-left { --card-offset-x: -12px; }
+.nudge-right { --card-offset-x:12px; }
+.nudge-more-left { --card-offset-x: -24px; }
+.nudge-more-right { --card-offset-x:24px; }
+
+/* Utility classes to increase card size */
+.card-tall { --card-height:560px; }
+.card-taller { --card-height:680px; }
+.card-wide { /* span two columns in the grid */
+ grid-column: span2; /* makes the card occupy two columns */
+}
+
+/* Hover elevation effect to indicate interactivity */
+.case-summary-card:hover,
+.metrics-card:hover,
+.result-chart-card:hover,
+.summary-card:hover {
+ box-shadow:0 18px 40px rgba(2,6,23,0.10);
+ transform: translateX(calc(var(--card-offset-x) *1.2)) translateY(-6px);
+}
+
+/* Focus or active state for keyboard users */
+.case-summary-card:focus,
+.metrics-card:focus,
+.result-chart-card:focus,
+.summary-card:focus {
+ outline:3px solid rgba(59,130,246,0.12);
+ outline-offset:4px;
+}
+
+/* Example specific defaults (can be overridden inline or with utility classes)
+ - These make the case summary slightly wider by default and metrics a bit narrower
+*/
+.case-summary-card { --card-width: auto; --card-height:0px; }
+.metrics-card { --card-width: auto; --card-height:0px; }
+.result-chart-card { --card-width: auto; --card-height:0px; }
+.summary-card { --card-width: auto; --card-height:0px; }
+
+/* Ensure card content areas handle internal layout gracefully */
+.card-title { font-weight:800; color: #075985; margin-bottom:8px; }
+.card-subtitle { color: #64748b; font-size:0.95rem; margin-bottom:12px; }
+
+/* Accessibility: ensure sufficient contrast for borders/shadows when scaled */
+@media (prefers-reduced-motion: reduce) {
+ .case-summary-card,
+ .metrics-card,
+ .result-chart-card,
+ .summary-card {
+ transition: none;
+ }
+}
+
+/* End of dashboard card layout controls */
+
+/* Scoped: Remove internal scrollbar only for the Validation Results card */
+.card-modal-results, .card-modal-results .card-modal-body {
+ /* Prevent internal scrollbars from appearing inside the results card */
+ overflow: visible !important;
+ max-height: none !important;
+}
+
+/* Hide WebKit scrollbars if any still appear inside results card */
+.card-modal-results::-webkit-scrollbar, .card-modal-results .card-modal-body::-webkit-scrollbar {
+ width:0px;
+ height:0px;
+ display: none;
+}
+
+/* Hide scrollbars in Firefox/IE for results card */
+.card-modal-results, .card-modal-results .card-modal-body {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+
+/* Case summary heading */
+.case-summary-heading {
+ font-weight:800;
+ color: #075985;
+ margin-bottom:8px;
+ font-size:1rem;
+}
+
+/* Ensure the Py-Detect Summary heading has spacing above it when present */
+.case-summary-heading.pydetect { margin-top:6px; }
+
+/* Nudge the Summary card slightly upward to better align with screenshot */
+.card-modal-summary {
+ transform: translateY(-12px);
+ /* ensure smooth transition and promote to its own layer */
+ will-change: transform;
+ z-index:5;
+}
+
+@media (max-width:900px) {
+ /* remove nudge on small screens to prevent overlap */
+ .card-modal-summary { transform: none; z-index: auto; }
+}
+

src/app/validationpage/validationpage.component.html

@@ -1,203 +1,220 @@
-<!-- Back to Case Details button at the top -->
-<button class="back-btn" (click)="navigateBackToCaseDetails()">
-  <span class="back-icon">←</span> Back to Case Details
-</button>
-
 <!-- 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 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 class="header-actions-right">
+ <button class="back-btn" (click)="navigateBackToPyDetect()">
+ <span class="back-icon">←</span> Back to Investigation Page
+ </button>
+ </div>
+ </div>
 </div>
 
-<!-- Dashboard-style header -->
-<div class="dashboard-header">
-  <div class="dashboard-header-content">
-
-    <div class="dashboard-title-block">
-      <div class="dashboard-title">Investigation Report</div>
-      <div class="dashboard-date">{{ reportDate || 'June 2024' }}</div>
-    </div>
-    <div class="header-btns-right">
-      <button class="back-btn" (click)="navigateBackToPyDetect()">
-        <span class="back-icon">←</span> Back to Investigation
-      </button>
-    </div>
-  </div>
-</div>
+<!-- Hero / Top summary bar -->
+<header class="hero-bar">
+ <div class="hero-inner">
+ <div class="hero-title">
+ <h1>Investigation Validation Summary</h1>
+ <div class="hero-sub">Snapshot of the current investigation — concise, actionable</div>
+ </div>
+ <div class="hero-actions">
+ <div class="progress-badge">Analysis: <strong>100% Complete</strong></div>
+ <button class="icon-btn" title="Settings">⚙️</button>
+ <button class="icon-btn" title=" Report">🔍</button>
+ <!-- More details pill button -->
+ <button class="hero-more-btn" (click)="goToQuestionSummary()" title="More details">
+ <span class="hero-more-icon">🛈</span>
+ <span class="hero-more-label">More details</span>
+ </button>
+ </div>
+ </div>
+</header>
 
-<!-- Main dashboard content -->
-<div class="dashboard-main">
-  <div class="dashboard-cards">
-    <!-- Circular chart card -->
-    <div class="dashboard-card dashboard-chart-card">
-      <div class="dashboard-card-title">Truth Consistency</div>
-      <div class="dashboard-chart-circle">
-        <!-- Placeholder for chart, can use SVG or library later -->
-        <div class="dashboard-circle-value">{{ truePercentage }}%</div>
-      </div>
-      <div class="dashboard-card-label">Consistency Index</div>
-    </div>
-    <!-- Circular chart card -->
-    <div class="dashboard-card dashboard-chart-card">
-      <div class="dashboard-card-title">Inconsistency Index</div>
-      <div class="dashboard-chart-circle">
-        <!-- Placeholder for chart, can use SVG or library later -->
-        <div class="dashboard-circle-value">{{ truePercentage }}%</div>
-      </div>
-      <div class="dashboard-card-label">InConsistency Index</div>
-    </div>
-
-    <!-- Actions card -->
-    <div class="dashboard-card dashboard-actions-card">
-      <div class="dashboard-card-title">Actions</div>
-      <button class="report-btn" (click)="downloadPDF()">
-        <span class="icon-download"></span> Download PDF
-      </button>
-      <button class="report-btn" (click)="emailReport()">
-        <span class="icon-email"></span> Email Report
-      </button>
-      <button class="report-btn" (click)="reAnalyze()">Re-Analyze Audio/Video</button>
-    </div>
-    <!-- Details card -->
-    <div class="dashboard-card dashboard-details-card investigation-outcome-card">
-      <div class="dashboard-card-title">Investigation Outcome</div>
-      <div class="outcome-fields-grid">
-        <div class="outcome-field-row">
-          <span class="outcome-label">Status:</span>
-          <span class="outcome-value">
-            <span *ngIf="truePercentage >= 80" class="status-chip active">🟩 Consistent</span>
-            <span *ngIf="truePercentage < 80" class="status-chip archived">��� Inconsistent</span>
-          </span>
-        </div>
-        <div class="outcome-field-row">
-          <span class="outcome-label">Investigation Confidence Score:</span>
-          <span class="outcome-value">92%</span>
-        </div>
-        <div class="outcome-field-row">
-          <span class="outcome-label">Dominant Emotion Detected:</span>
-          <span class="outcome-value">Calm</span>
-        </div>
-        <div class="outcome-field-row">
-          <span class="outcome-label">Response Clarity:</span>
-          <span class="outcome-value">84% Clear</span>
-        </div>
-        <div class="outcome-field-row">
-          <span class="outcome-label">Speech Tone Analysis:</span>
-          <span class="outcome-value">Neutral: 60%, Tense: 40%</span>
-        </div>
-        <div class="outcome-field-row">
-          <span class="outcome-label">Summary:</span>
-          <span class="outcome-value summary-value">
-            The investigation did not meet validation criteria. Further review advised.
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<div class="validation-template-main">
+ <div class="validation-template-flex">
 
-<!-- Session Overview -->
-<div class="session-overview-card">
-  <div class="session-header">Session Overview</div>
-  <div class="session-fields">
-    <div class="session-field"><span class="field-label">Session ID:</span> <span class="field-value">INT-2025-007</span></div>
-    <div class="session-field"><span class="field-label">Suspect Name:</span> <span class="field-value">Ajay Kumar</span></div>
-    <div class="session-field"><span class="field-label">Investigation Officer:</span> <span class="field-value">Ganesh R.</span></div>
-    <div class="session-field"><span class="field-label">Session Duration:</span> <span class="field-value">00:42:18</span></div>
-    <div class="session-field"><span class="field-label">AI Model Version:</span> <span class="field-value">Py-Detect AI 2.0</span></div>
-    <div class="session-field"><span class="field-label">Date Analyzed:</span> <span class="field-value">2025-10-15</span></div>
-  </div>
-</div>
+ <!-- Single horizontal row containing independent card-modals -->
+ <div class="cards-row">
 
-<!-- AI Analysis Summary -->
-<div class="ai-summary-section">
-  <div class="ai-summary-header">AI Analysis Summary</div>
-  <div class="ai-metrics-grid">
-    <div class="ai-metric metric-consistency">
-      <div class="metric-label">Truth Consistency Index</div>
-      <div class="metric-ring metric-blue">72%</div>
-    </div>
-    <div class="ai-metric metric-inconsistency">
-      <div class="metric-label">Inconsistency Index</div>
-      <div class="metric-ring metric-red">28%</div>
-    </div>
-    <div class="ai-metric metric-emotion">
-      <div class="metric-label">Emotional State Distribution</div>
-      <div class="metric-bar">Calm – 60%, Nervous – 30%, Angry – 10%</div>
-    </div>
-    <div class="ai-metric metric-clarity">
-      <div class="metric-label">Response Clarity</div>
-      <div class="metric-ring metric-cyan">85% clear</div>
-    </div>
-    <div class="ai-metric metric-eyecontact">
-      <div class="metric-label">Eye-Contact Frequency</div>
-      <div class="metric-ring metric-blue">68% consistent</div>
-    </div>
-    <div class="ai-metric metric-confidence">
-      <div class="metric-label">Speech Confidence Level</div>
-      <div class="metric-ring metric-cyan">75%</div>
-    </div>
-    <div class="ai-metric metric-verdict">
-      <div class="metric-label">Overall AI Verdict</div>
-      <div class="metric-verdict-box">Partially Consistent / Needs Review</div>
-    </div>
-  </div>
-</div>
+ <!-- Case Summary Card (card-modal) -->
+ <article class="card-modal card-modal-case">
+ <header class="card-modal-header">Case Summary</header>
+ <div class="card-modal-body">
+ <div class="case-summary-fields">
+ <div>Case ID: <b>CASE-007</b></div>
+ <div>Officer: <b>Ganesh</b></div>
+ <div>Date: <b>2025-10-15</b></div>
+ <div>Suspect: <b>Jeeva</b></div>
+ </div>
+ <div class="case-summary-text">
+ <div class="case-summary-heading">Investigation Summary</div>
+ The suspect displayed calm emotions overall but showed minor inconsistency in hand gestures. <br />
+ <b>Recommendation:</b> Conduct a short follow-up session.
+ </div>
+ </div>
+ </article>
 
-<!-- AI Observations and Insights -->
-<div class="ai-observations-section">
-  <div class="observations-header"><span class="ai-icon">🤖</span> AI Observations & Insights</div>
-  <div class="observations-note">
-    <strong>Observation Summary:</strong><br>
-    During questioning, the suspect showed hesitation when discussing the time of the incident.<br>
-    Eye movement frequency decreased by 25% during key questions.<br>
-    Speech tone remained steady, indicating partial honesty.<br>
-    <strong>Recommendation:</strong> Further questioning advised for financial motive discussion.
-  </div>
-</div>
+ <!-- Metrics Card -->
+ <article class="card-modal card-modal-metrics">
+ <header class="card-modal-header">Audio / Video Metrics</header>
+ <div class="card-modal-body">
+ <div class="metrics-bars">
+ <div class="metrics-row-item">
+ <div class="metrics-label">Speech</div>
+ <div class="metrics-bar-bg">
+ <div class="metrics-bar-fill" [style.width.%]="audioMetric1"></div>
+ </div>
+ <div class="metrics-value">{{ audioMetric1 }}%</div>
+ </div>
 
-<!-- Audio–Video Metrics (Graphs Placeholder) -->
-<div class="audio-video-metrics-section">
-  <div class="metrics-header">Audio–Video Metrics</div>
-  <div class="metrics-graphs">
-    <div class="graph-placeholder">Waveform & Emotion Timeline (Graph)</div>
-    <div class="graph-placeholder">Confidence vs Time (Graph)</div>
-    <div class="graph-placeholder">Facial Micro-Expression (Graph)</div>
-  </div>
-</div>
+ <div class="metrics-row-item">
+ <div class="metrics-label">Eye Contact</div>
+ <div class="metrics-bar-bg">
+ <div class="metrics-bar-fill cyan" [style.width.%]="audioMetric2"></div>
+ </div>
+ <div class="metrics-value">{{ audioMetric2 }}%</div>
+ </div>
+
+ <div class="metrics-row-item">
+ <div class="metrics-label">Emotion</div>
+ <div class="metrics-bar-bg">
+ <div class="metrics-bar-fill amber" [style.width.%]="audioMetric3"></div>
+ </div>
+ <div class="metrics-value">{{ audioMetric3 }}%</div>
+ </div>
+
+ <div class="metrics-row-item">
+ <div class="metrics-label">Clarity</div>
+ <div class="metrics-bar-bg">
+ <div class="metrics-bar-fill" [style.width.%]="audioMetric4"></div>
+ </div>
+ <div class="metrics-value">{{ audioMetric4 }}%</div>
+ </div>
+
+ <div class="metrics-row-item">
+ <div class="metrics-label">Confidence</div>
+ <div class="metrics-bar-bg">
+ <div class="metrics-bar-fill" [style.width.%]="audioMetric5"></div>
+ </div>
+ <div class="metrics-value">{{ audioMetric5 }}%</div>
+ </div>
+ </div>
+ </div>
+ </article>
 
-<!-- Final Outcome Summary -->
-<div class="final-outcome-section">
-  <div class="outcome-header">Final Outcome Summary</div>
-  <div class="outcome-fields">
-    <div class="outcome-field"><span class="field-label">AI Verdict:</span> <span class="field-value warning">⚠️ Requires Further Verification</span></div>
-    <div class="outcome-field"><span class="field-label">Confidence Score:</span> <span class="field-value">82%</span></div>
-    <div class="outcome-field"><span class="field-label">Recommended Action:</span> <span class="field-value">Conduct follow-up questioning with corroborating evidence C-2025-A.</span></div>
-    <div class="outcome-field"><span class="field-label">Report Generated By:</span> <span class="field-value">Py-Detect AI System</span></div>
-  </div>
-  <div class="outcome-actions">
-    <button class="report-btn" (click)="downloadPDF()">Download Report (PDF)</button>
-    <button class="report-btn" (click)="emailReport()">Email Summary</button>
-    <button class="report-btn" (click)="reAnalyze()">Re-Analyze Audio/Video</button>
-  </div>
+ <!-- Validation Results Card -->
+ <article class="card-modal card-modal-results">
+ <header class="card-modal-header">Validation Results</header>
+ <div class="card-modal-body results-horizontal">
+ <div class="radial-chart-wrapper" aria-hidden="true">
+ <svg viewBox="0 0 220 220" preserveAspectRatio="xMidYMid meet" class="radial-svg" role="img" aria-label="Validation radial chart">
+ <g transform="translate(110,110) rotate(-90)">
+ <circle [attr.r]="r1" class="radial-bg outer" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference1"></circle>
+ <circle [attr.r]="r1" class="radial-anim outer-fg" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference1" [attr.stroke-dashoffset]="offset1" stroke-linecap="round"></circle>
+
+ <circle [attr.r]="r2" class="radial-bg middle" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference2"></circle>
+ <circle [attr.r]="r2" class="radial-anim middle-fg" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference2" [attr.stroke-dashoffset]="offset2" stroke-linecap="round"></circle>
+
+ <circle [attr.r]="r3" class="radial-bg inner" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference3"></circle>
+ <circle [attr.r]="r3" class="radial-anim inner-fg" stroke-width="10" fill="none" [attr.stroke-dasharray]="circumference3" [attr.stroke-dashoffset]="offset3" stroke-linecap="round"></circle>
+ </g>
+ </svg>
+ </div>
+
+ <div class="radial-values horizontal-values">
+ <div class="radial-item">
+ <div class="radial-icon" title="Audio"><span class="icon-audio">🔊</span></div>
+ <div>
+ <div class="radial-number">{{ audioAnalysisScore }}%</div>
+ <div class="radial-label">Audio-Analysis</div>
+ <div class="radial-detail">Truthness: <strong>{{ audioTruthness }}%</strong></div>
+ </div>
+ </div>
+ <div class="radial-item">
+ <div class="radial-icon" title="Video"><span class="icon-video">🎥</span></div>
+ <div>
+ <div class="radial-number">{{ videoAnalysisScore }}%</div>
+ <div class="radial-label">Video-Analysis</div>
+ <div class="radial-detail">Truthness: <strong>{{ videoTruthness }}%</strong></div>
+ </div>
+ </div>
+ <div class="radial-item">
+ <div class="radial-icon" title="Verified"><span class="icon-verified">✔️</span></div>
+ <div>
+ <div class="radial-number">{{ verifiedScore }}%</div>
+ <div class="radial-label">Verified-Scores</div>
+ <div class="radial-detail">Overall Truth Probability : <strong>{{ verifiedConfidence }}%</strong></div>
+ </div>
+ </div>
+ </div>
+ </div>
+  </article>
+
+ <!-- Summary Card (combined) -->
+ <article class="card-modal card-modal-summary">
+ <header class="card-modal-header">Summary</header>
+ <div class="card-modal-body summary-grid">
+ <div class="summary-card card-glass">
+ <div class="card-top">Verdict / Status</div>
+ <div class="card-value status-badge status-badge-green">Consistent</div>
+ <div class="card-sub">Verdict derived from multi-modal analysis</div>
+ </div>
+ <div class="summary-card card-glass">
+ <div class="card-top">Investigation Confidence</div>
+ <div class="card-value confidence-percentage">92%</div>
+ <div class="card-sub">Overall system confidence</div>
+ </div>
+ <div class="summary-card card-glass">
+ <div class="card-top">Dominant Emotion</div>
+ <div class="card-value emotion-emoji">😌 Calm</div>
+ <div class="card-sub">Detected from vocal and facial cues</div>
+ </div>
+ <div class="summary-card card-glass">
+ <div class="card-top">Session Overview</div>
+ <div class="card-value">Audio {{ audioAnalysisScore }}% · Video {{ videoAnalysisScore }}% · Truth {{ verifiedConfidence }}%</div>
+ <div class="card-sub">Quick breakdown of modal scores</div>
+ </div>
+ </div>
+ </article>
+
+ </div>
+
+ </div>
 </div>
 
 <footer>
-  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+ <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
 </footer>
+
+<!-- Action buttons: Download / Email / Re-Analyze placed below the main template -->
+<div class="validation-actions" aria-hidden="false">
+ <button class="action-btn action-download" (click)="downloadPDF()" aria-label="Download Report">
+ <span class="action-icon blue" aria-hidden="true"></span>
+ <span class="action-label">Download Report</span>
+ </button>
+
+ <button class="action-btn action-email" (click)="emailReport()" aria-label="Email to Supervisor">
+ <span class="action-icon purple" aria-hidden="true"></span>
+ <span class="action-label">Email to Supervisor</span>
+ </button>
+
+ <button class="action-btn action-reanalyze" (click)="reAnalyze()" aria-label="Re-Analyze Audio/Video">
+ <span class="action-icon green" aria-hidden="true"></span>
+ <span class="action-label">Re-Analyze Audio/Video</span>
+ </button>
+</div>

src/app/validationpage/validationpage.component.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { CaseStoreService, PoliceCase } from '../shared/case-store.service';
 // For PDF generation
 // import jsPDF from 'jspdf';
 
@@ -8,19 +9,194 @@ import { Router } from '@angular/router';
   templateUrl: './validationpage.component.html',
   styleUrls: ['./validationpage.component.css']
 })
-export class ValidationpageComponent {
-  truePercentage: number = 0;
-  falsePercentage: number = 0;
+export class ValidationpageComponent implements OnInit {
+  truePercentage: number = 72;
+  falsePercentage: number = 28;
   modalOpen: boolean = false;
   reportDate: string = new Date().toLocaleString('default', { month: 'long', year: 'numeric' });
 
-  constructor(private router: Router) {
+
+  // Dashboard metrics (real-time from CaseStoreService)
+  sessionCount: number = 0;
+  officerCount: number = 0;
+  suspectCount: number = 0;
+  avgSessionDuration: string = '';
+  analysisCount: number = 0;
+  consistencyIndex: number = 0;
+  audioVideoCount: number = 0;
+  reportCount: number = 0;
+
+  // Donut chart (officer session distribution)
+  officer1Percent: number = 0;
+  officer2Percent: number = 0;
+  officer3Percent: number = 0;
+
+  // Audio/Video metrics (current values will be animated)
+  audioMetric1: number = 0; // Speech
+  audioMetric2: number = 0; // Eye Contact
+  audioMetric3: number = 0; // Emotion
+  audioMetric4: number = 0; // Clarity
+  audioMetric5: number = 0; // Confidence
+
+  // Targets for animations
+  private audioMetric1Target = 0;
+  private audioMetric2Target = 0;
+  private audioMetric3Target = 0;
+  private audioMetric4Target = 0;
+  private audioMetric5Target = 0;
+
+  // Outcome distribution
+  outcome1: number = 0; // Consistent
+  outcome2: number = 0; // Needs Review
+  outcome3: number = 0; // Inconsistent
+
+  // Track which section/tab is selected
+  selectedSection: string = 'Dashboard';
+
+  // Analysis overview scores (for radial diagram) - displayed values
+  audioAnalysisScore: number = 0;
+  videoAnalysisScore: number = 0;
+  verifiedScore: number = 0;
+
+  // Analysis targets (final percentages to animate to)
+  audioAnalysisTarget: number = 0;
+  videoAnalysisTarget: number = 0;
+  verifiedTarget: number = 0;
+
+  // New: truthness/confidence fields used by template
+  audioTruthness: number = 74;
+  videoTruthness: number = 72;
+  verifiedConfidence: number = 73;
+
+  // SVG circle radii and computed values
+  r1 = 80; // outer (blue)
+  r2 = 64; // middle (green)
+  r3 = 48; // inner (red)
+  circumference1 = 2 * Math.PI * this.r1;
+  circumference2 = 2 * Math.PI * this.r2;
+  circumference3 = 2 * Math.PI * this.r3;
+  // stroke-dashoffset values (start hidden = full circumference)
+  offset1 = this.circumference1;
+  offset2 = this.circumference2;
+  offset3 = this.circumference3;
+
+  constructor(private router: Router, private caseStore: CaseStoreService) {
+    // Get latest cases
+    const cases = this.caseStore.getPoliceCases();
+    this.sessionCount = cases.length;
+    this.officerCount = Array.from(new Set(cases.map(c => c.police?.name))).length;
+    this.suspectCount = Array.from(new Set(cases.map(c => c.accused?.name))).length;
+    this.analysisCount = cases.length;
+    this.reportCount = cases.length;
+    // Dummy: avgSessionDuration
+    this.avgSessionDuration = '00:42:18';
+    // Dummy: audio/video count
+    this.audioVideoCount = cases.length;
+    // Dummy: consistencyIndex (use a fallback value, or derive from available case data)
+    this.consistencyIndex = Math.round((cases.reduce((sum, c) => sum + 72, 0) / (cases.length || 1)));
+    // Donut chart: officer session distribution
+    const officerSessions = cases.reduce((acc, c) => {
+      const name = c.police?.name || 'Unknown';
+      acc[name] = (acc[name] || 0) + 1;
+      return acc;
+    }, {} as { [name: string]: number });
+    const officerNames = Object.keys(officerSessions);
+    const totalSessions = cases.length || 1;
+    this.officer1Percent = Math.round((officerSessions[officerNames[0]] || 0) * 100 / totalSessions);
+    this.officer2Percent = Math.round((officerSessions[officerNames[1]] || 0) * 100 / totalSessions);
+    this.officer3Percent = Math.round((officerSessions[officerNames[2]] || 0) * 100 / totalSessions);
+    // Dummy: audio/video metric targets
+    this.audioMetric1Target = 68;
+    this.audioMetric2Target = 75;
+    this.audioMetric3Target = 60;
+    this.audioMetric4Target = 85;
+    this.audioMetric5Target = 82;
+    // Dummy: outcome distribution
+    this.outcome1 = 60;
+    this.outcome2 = 25;
+    this.outcome3 = 15;
+    // true/false percentage from router state
     const nav = this.router.getCurrentNavigation();
     const state = nav?.extras?.state as { truePercentage?: number; falsePercentage?: number };
     this.truePercentage = state?.truePercentage ?? 0;
     this.falsePercentage = state?.falsePercentage ?? 0;
+
+    // compute overview targets (do NOT set displayed scores yet)
+    this.computeOverviewScores();
+  }
+
+  ngOnInit(): void {
+    // Start load animations
+    this.animateLoad();
+  }
+
+  private animateLoad() {
+    const duration = 3000; // ms — slow 3s animation per request
+    const start = performance.now();
+
+    const animate = (now: number) => {
+      const t = Math.min(1, (now - start) / duration);
+      // ease-out
+      const ease = 1 - Math.pow(1 - t, 3);
+
+      // animate metric bars from their targets
+      this.audioMetric1 = Math.round(this.audioMetric1Target * ease);
+      this.audioMetric2 = Math.round(this.audioMetric2Target * ease);
+      this.audioMetric3 = Math.round(this.audioMetric3Target * ease);
+      this.audioMetric4 = Math.round(this.audioMetric4Target * ease);
+      this.audioMetric5 = Math.round(this.audioMetric5Target * ease);
+
+      // interpolate displayed radial scores from0 to targets
+      this.audioAnalysisScore = Math.round(this.audioAnalysisTarget * ease);
+      this.videoAnalysisScore = Math.round(this.videoAnalysisTarget * ease);
+      this.verifiedScore = Math.round(this.verifiedTarget * ease);
+
+      // Also update the truthness/confidence displayed details
+      this.audioTruthness = this.audioAnalysisScore;
+      this.videoTruthness = this.videoAnalysisScore;
+      this.verifiedConfidence = this.verifiedScore;
+
+      // update SVG offsets so stroke animates from full circumference to target offset
+      this.offset1 = Math.round(this.circumference1 * (1 - this.audioAnalysisScore / 100));
+      this.offset2 = Math.round(this.circumference2 * (1 - this.videoAnalysisScore / 100));
+      this.offset3 = Math.round(this.circumference3 * (1 - this.verifiedScore / 100));
+
+      if (t < 1) {
+        requestAnimationFrame(animate);
+      }
+    };
+
+    // ensure offsets start hidden (full circumference)
+    this.offset1 = this.circumference1;
+    this.offset2 = this.circumference2;
+    this.offset3 = this.circumference3;
+
+    requestAnimationFrame(animate);
   }
 
+  computeOverviewScores() {
+    // Audio analysis target: average of audio metric targets
+    const audioVals = [this.audioMetric1Target, this.audioMetric2Target, this.audioMetric3Target, this.audioMetric4Target, this.audioMetric5Target].filter(v => typeof v === 'number');
+    this.audioAnalysisTarget = audioVals.length ? Math.round(audioVals.reduce((a, b) => a + b, 0) / audioVals.length) : 0;
+
+    // Video analysis target: use consistencyIndex as proxy or derive from other available metrics
+    this.videoAnalysisTarget = this.consistencyIndex || Math.round((this.audioMetric2Target + this.audioMetric3Target + this.audioMetric4Target) / 3);
+
+    // Verified target: derive from truePercentage if available, else average of audio/video targets
+    const v = this.truePercentage || Math.round((this.audioAnalysisTarget + this.videoAnalysisTarget) / 2);
+    this.verifiedTarget = Math.round(v);
+
+    // Do not set displayed scores or offsets here; animateLoad will handle the animated transition
+  }
+
+  percentToOffset(percent: number, circumference: number) {
+    const pct = Math.max(0, Math.min(100, percent));
+    return Math.round(circumference * (1 - pct / 100));
+  }
+
+  selectSection(section: string) {
+    this.selectedSection = section;
+  }
 
   navigateBackToCaseDetails() {
     this.router.navigate(['/case-details']);
@@ -35,7 +211,6 @@ export class ValidationpageComponent {
   }
 
   downloadPDF() {
-    
     // Example: Use jsPDF to generate PDF
     // const doc = new jsPDF();
     // doc.text('Investigation Report', 10, 10);
@@ -62,4 +237,22 @@ export class ValidationpageComponent {
     // TODO: Implement re-analysis logic
     alert('Re-Analyze Audio/Video functionality to be implemented.');
   }
+
+  // Navigate to question summary page
+  goToQuestionSummary() {
+    this.router.navigate(['/question-summary']);
+  }
+
+  getMetricGradient(metricValue: number): string {
+    const p = Math.max(0, Math.min(100, Math.round(metricValue)));
+    if (p >= 80) return 'linear-gradient(90deg, #10b981, #34d399)'; // green
+    if (p >= 60) return 'linear-gradient(90deg, #3b82f6, #60a5fa)'; // blue
+    if (p >= 40) return 'linear-gradient(90deg, #f59e0b, #f97316)'; // amber
+    return 'linear-gradient(90deg, #ef4444, #fb7185)'; // red
+  }
+
+  getMetricTextColor(metricValue: number): string {
+    const p = Math.max(0, Math.min(100, Math.round(metricValue)));
+    return p >= 50 ? '#ffffff' : '#0f172a';
+  }
 }

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

@@ -0,0 +1,750 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+:root {
+  --bg-dark: #011329;
+  --accent: #008cff;
+  --accent-strong: #006bb3;
+  --accent-soft: #a8dcff;
+  --accent-emerald: #0ea5a4;
+  --muted: #6b7280;
+  --muted-2: #94a3b8;
+  --card-bg: #ffffff;
+  --card-border: #e6f2ff;
+  --card-border-hover: rgba(0,140,255,0.18);
+  --soft-blue: rgba(3,102,214,0.06);
+  --shadow-strong: 08px24px rgba(3,102,214,0.08);
+  --gap: 18px;
+  --transition-fast: 160ms;
+  --transition-medium: 280ms;
+  --transition-slow: 420ms;
+}
+
+/* Modern UI header styles from infopage */
+.site-header {
+  background: #011329;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 0;
+  position: relative;
+  z-index: 10;
+  padding-bottom: 0;
+}
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 32px 0 32px;
+  position: relative;
+}
+
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.logo-img-header {
+  width: 54px;
+  height: 54px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  padding: 4px;
+  margin-top: -6px;
+  margin-bottom: 1vh;
+}
+
+.py-detect-title-header {
+  font-size: 2.1rem;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
+  font-weight: 900;
+  letter-spacing: 6px;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  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;
+  }
+/* Overall layout spacing */
+.details-layout {
+  display: flex;
+  gap: 28px;
+  align-items: flex-start;
+  padding: 18px 20px 80px;
+  background: linear-gradient(120deg, #f7fbff, #fafcff);
+}
+
+.details-sidebar {
+  width: 270px;
+  background: linear-gradient(180deg,#091427,#0b1a33);
+  border-radius: 18px;
+  padding: 28px 18px;
+  box-shadow: 0 12px 36px rgba(2,24,64,0.06);
+  color: #fff;
+}
+
+.sidebar-section-heading {
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: rgba(255,255,255,0.02);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
+  font-weight: 700;
+}
+
+.sidebar-btn-group {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.sidebar-btn2 {
+  padding: 12px;
+  border-radius: 10px;
+  text-align: left;
+  font-weight: 700;
+  transition: background var(--transition-fast) ease, transform var(--transition-fast) ease;
+}
+
+  .sidebar-btn2:hover {
+    background: rgba(255,255,255,0.02);
+    transform: translateY(-1px);
+  }
+
+/* Color and animation enhancements for clearer visual hierarchy */
+.details-sidebar .sidebar-btn2 {
+  color: var(--muted-2);
+  background: transparent;
+  border-left: 4px solid transparent;
+}
+
+  .details-sidebar .sidebar-btn2:hover {
+    background: rgba(255,255,255,0.02);
+    color: #e6f7ff;
+    transform: translateY(-1px);
+  }
+
+  .details-sidebar .sidebar-btn2.active {
+    background: linear-gradient(90deg, rgba(0,140,255,0.06), rgba(56,189,248,0.03));
+    color: #e8f8ff;
+    border-left-color: var(--accent);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
+  }
+
+/* Main card */
+.indigo-main-card {
+  background: var(--card-bg);
+  border-radius: 18px;
+  padding: 24px;
+  box-shadow: var(--shadow-strong);
+  border: 1px solid var(--soft-blue);
+  width: 100%;
+  max-width: calc(100% -320px);
+  box-sizing: border-box;
+  overflow: auto;
+  transition: box-shadow var(--transition-medium) ease, transform var(--transition-medium) ease;
+}
+
+  .indigo-main-card:hover {
+    box-shadow: 0 18px 48px rgba(3,102,214,0.08);
+    transform: translateY(-2px);
+  }
+
+  .indigo-main-card.wide {
+    background: #f7fbff;
+    border-radius: 18px;
+    box-shadow: 0 8px 32px rgba(56,189,248,0.10);
+    padding: 32px 32px 28px 32px;
+    max-width: 1600px;
+    margin: 32px auto 0 auto;
+    width: 100%;
+  }
+
+.indigo-main-card,
+.indigo-main-card.wide {
+  overflow-x: visible !important;
+  overflow-y: visible !important;
+}
+
+.case-header {
+  padding: 8px 6px 14px 6px;
+}
+
+.case-qa {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-weight: 600;
+  color: #0b3b72;
+}
+
+  .case-qa strong {
+    color: #0b3b72;
+  }
+
+/* Layout toggle */
+.layout-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.toggle-btn {
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(2,24,64,0.06);
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--transition-fast) ease;
+}
+
+  .toggle-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(2,24,64,0.04);
+  }
+
+  .toggle-btn.active {
+    background: var(--accent);
+    color: #fff;
+    box-shadow: 0 6px 16px rgba(3,102,214,0.12);
+  }
+
+/* Metrics card appearance */
+.metrics-card {
+  background: #fff;
+  border-radius: 18px;
+  padding: 32px 28px 28px 28px;
+  box-shadow: 0 4px 24px rgba(56,189,248,0.10);
+  border: 1.5px solid #e6f2ff;
+  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.metrics-card-heading {
+  background: #f7fbff;
+  padding: 14px 24px;
+  border-radius: 14px;
+  display: inline-block;
+  color: #232a3d;
+  font-size: 1.22rem;
+  font-weight: 700;
+  margin-bottom: 22px;
+  box-shadow: 0 2px 12px #e0e7ff;
+  text-align: left;
+}
+
+.metrics-card-heading.audio-analysis,
+.metrics-card-heading.video-analysis {
+  color: #2563eb !important;
+}
+
+.metric-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 10px;
+  gap: 18px;
+  border-bottom: 1px solid #e6eaf3;
+  font-size: 1.12rem;
+  background: none;
+}
+
+.metric-label, .metric-name {
+  background: none;
+  border: none;
+  color: #232a3d;
+  font-weight: 600;
+  padding: 0;
+  margin-bottom: 0;
+  font-size: 1.04rem;
+  box-shadow: none;
+  display: inline-block;
+  text-align: left;
+}
+.metric-value {
+  color: #05204a;
+  font-weight: 900;
+  text-align: right;
+  font-size: 1.18rem;
+}
+
+/* Responsive tweaks for smaller screens */
+@media (max-width: 1200px) {
+  .audio-cards-row {
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+  }
+  .indigo-main-card.wide {
+    padding: 18px 8px 12px 8px;
+    max-width: 100%;
+  }
+}
+@media (max-width: 900px) {
+  .audio-cards-row {
+    flex-direction: column;
+    gap: 18px;
+    align-items: stretch;
+  }
+  .audio-cards-row .metrics-card {
+    max-width: 100%;
+    min-width: 0;
+  }
+}
+@media (max-width: 700px) {
+  .audio-cards-row {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+  .metrics-card {
+    min-height: 180px;
+    padding: 16px 8px;
+  }
+}
+
+/* Ensure four cards are always displayed in a single horizontal row */
+.audio-cards-row {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+  justify-content: center;
+  align-items: stretch;
+  width: 100%;
+  margin-top: 0;
+}
+.audio-cards-row .metrics-card {
+  flex: 1 1 0;
+  max-width: 340px;
+  min-width: 220px;
+}
+
+/* Fix: Make audio cards row fill available horizontal space and align cards in a single row */
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  gap: 32px;
+}
+
+.metrics-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.metrics-card-heading {
+  font-size: 1.08rem;
+  color: var(--accent);
+}
+
+.metrics-list-plain {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+  .metrics-list-plain li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 6px;
+    border-bottom: 1px dashed rgba(3,102,214,0.04);
+  }
+
+    .metrics-list-plain li .value {
+      min-width: 72px;
+      text-align: right;
+      color: #0b3b72;
+      font-weight: 700;
+    }
+
+/* Multiple cards layout */
+.metrics-grid-multiple {
+  display: flex;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+  .metrics-grid-multiple .metrics-card {
+    min-width: 311px;
+    flex: auto;
+    transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
+  }
+
+    .metrics-grid-multiple .metrics-card:hover {
+      transform: translateY(-6px);
+      box-shadow: 0 20px 40px rgba(3,102,214,0.08);
+    }
+
+/* Charts and table styles */
+.charts-row {
+  display: flex;
+  gap: 16px;
+  margin-top: 18px;
+  flex-wrap: wrap;
+}
+
+.chart-card {
+  flex: 11420px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px;
+  border: 1px solid var(--soft-blue);
+  box-shadow: 0 4px 12px rgba(3,102,214,0.04);
+}
+
+.simple-bar {
+  width: 100%;
+  height: 180px;
+  display: block;
+}
+
+.summary-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.95rem;
+}
+
+  .summary-table th, .summary-table td {
+    border: 1px solid rgba(224,231,239,0.6);
+    padding: 8px 12px;
+    text-align: left;
+  }
+
+  .summary-table thead th {
+    background: #fbfdff;
+    color: var(--accent);
+    font-weight: 700;
+  }
+
+  .summary-table tbody tr:nth-child(even) {
+    background: #fbfbff;
+  }
+
+/* Audio / video summary rows */
+.audio-summary-row {
+  display: flex;
+  gap: 16px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+  .audio-summary-row .summary-item {
+    font-weight: 700;
+    color: #0b3b72;
+    padding: 6px 8px;
+    border-radius: 8px;
+    background: rgba(56,189,248,0.04);
+    transition: background var(--transition-fast) ease, transform var(--transition-fast) ease;
+  }
+
+    .audio-summary-row .summary-item:hover {
+      background: rgba(56,189,248,0.08);
+      transform: translateY(-3px);
+    }
+
+/* Scrollable details area for cards that allow internal scrolling */
+.audio-card-body, .audio-details-card, .video-details-card, .metrics-card-body {
+  max-height: 340px;
+  overflow: auto;
+}
+
+  .audio-card-body::-webkit-scrollbar, .audio-details-card::-webkit-scrollbar, .video-details-card::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+
+  .audio-card-body::-webkit-scrollbar-thumb, .audio-details-card::-webkit-scrollbar-thumb, .video-details-card::-webkit-scrollbar-thumb {
+    background: rgba(2,24,64,0.12);
+    border-radius: 6px;
+  }
+
+/* Back button styling (matches page accent and animated glow) */
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(90deg, rgba(0,140,255,0.14), rgba(3,102,214,0.10));
+  color: #01243a;
+  font-weight: 800;
+  padding: 8px 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(3,102,214,0.12);
+  box-shadow: 0 6px 18px rgba(3,102,214,0.06);
+  cursor: pointer;
+  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, border-color var(--transition-fast) ease;
+}
+
+  .back-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 14px 30px rgba(3,102,214,0.12);
+    border-color: rgba(0,140,255,0.22);
+  }
+
+  .back-btn:active {
+    transform: translateY(-1px) scale(0.995);
+  }
+
+  .back-btn:focus {
+    outline: none;
+    box-shadow: 0004px rgba(0,140,255,0.12);
+  }
+
+  /* small icon styling */
+.back-icon {
+  display: inline-block;
+  font-weight: 900;
+  color: var(--accent-strong);
+  transform: translateX(-1px);
+}
+
+/* subtle pulse animation to draw attention when on verification page */
+@keyframes backPulse {
+  0% {
+    box-shadow: 0 6px 18px rgba(3,102,214,0.06);
+  }
+
+  50% {
+    box-shadow: 0 20px 40px rgba(3,102,214,0.08);
+  }
+
+  100% {
+    box-shadow: 0 6px 18px rgba(3,102,214,0.06);
+  }
+}
+
+/* Apply pulse conditionally — you can add `.pulse` class in template if needed */
+.back-btn.pulse {
+  animation: backPulse3.6s ease-in-out infinite;
+}
+
+/* Dark mode inverse for header area */
+.site-header .back-btn {
+  background: linear-gradient(90deg, #38bdf8, rgba(255, 255, 255, 0.02));
+  color: #e6f7ff;
+  border: 1px solid rgba(255,255,255,0.04);
+  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
+  margin-bottom: 16px;
+}
+
+  .site-header .back-btn:hover {
+    box-shadow: 0 14px 30px rgba(0,0,0,0.28);
+    transform: translateY(-2px);
+  }
+
+.nav-btn {
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(2,24,64,0.06);
+  background: linear-gradient(90deg, rgba(0,140,255,0.06), rgba(56,189,248,0.03));
+  color: #044a91;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms cubic-bezier(.2,.8,.2,1), background 220ms ease;
+}
+
+  .nav-btn:hover:not([disabled]) {
+    transform: translateY(-3px);
+    box-shadow:0 12px 22px rgba(3,102,214,0.10);
+    background: linear-gradient(90deg, rgba(0,140,255,0.12), rgba(56,189,248,0.06));
+  }
+
+  .nav-btn[disabled] {
+    opacity:0.5;
+    cursor: default;
+    transform: none;
+    box-shadow: none;
+  }
+
+/* During click/navigation animation we keep transform but remove any shadow to avoid background glow */
+.nav-btn.prev-anim {
+  transform: translateX(-6px) scale(0.98);
+  box-shadow: none !important;
+  background: linear-gradient(90deg, rgba(3,102,214,0.14), rgba(56,189,248,0.06));
+}
+
+.nav-btn.next-anim {
+  transform: translateX(6px) scale(0.98);
+  box-shadow: none !important;
+  background: linear-gradient(90deg, rgba(3,102,214,0.14), rgba(56,189,248,0.06));
+}
+
+/* Also ensure active state does not show shadow */
+.nav-btn:active {
+  box-shadow: none !important;
+}
+
+/* Footer */
+footer {
+  background: linear-gradient(to right, #011022, #01030a);
+  color: #fff;
+  text-align: center;
+  padding: 10px 0px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 100;
+  margin-top: 0;
+}
+
+/* Indigo container style for Verified Scores (refined to match screenshot) */
+.indigo-main-card.verified-scores {
+  background: linear-gradient(180deg,#f7fbff, #ffffff);
+  border-radius: 18px;
+  padding: 20px;
+  box-shadow: 0 14px 40px rgba(3,102,214,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
+  border: 1px solid rgba(3,102,214,0.08);
+  margin-bottom: 18px;
+  position: relative;
+  overflow: auto;
+}
+
+  /* subtle divider under the main heading inside the indigo container */
+  .indigo-main-card.verified-scores > .metrics-card-heading {
+    color: #2563eb;
+    font-size: 1.08rem;
+    margin-bottom: 10px;
+    padding: 10px 8px;
+    border-radius: 8px;
+    display: inline-block;
+  }
+
+    .indigo-main-card.verified-scores .metrics-card-heading + .metrics-grid-card {
+      margin-top: 12px;
+    }
+
+  /* thin top rule under the overall heading (full width) */
+  .indigo-main-card.verified-scores .heading-divider {
+    content: '';
+    display: block;
+    height: 1px;
+    background: rgba(6,30,70,0.06);
+    margin: 12px 0 18px 0;
+  }
+
+  /* custom scrollbar styling to match screenshot cyan thumb */
+  .indigo-main-card.verified-scores::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  .indigo-main-card.verified-scores::-webkit-scrollbar-track {
+    background: rgba(0,0,0,0.03);
+    border-radius: 8px;
+  }
+
+  .indigo-main-card.verified-scores::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg,#00e0ff,#00c0f0);
+    border-radius: 8px 5px 0 9px;
+  }
+
+    /* ensure inner validation card blends and keeps same rounded edges */
+.metrics-card.validation-card {
+  background: rgba(250,252,255,0.98);
+  border-radius: 12px;
+  padding: 18px;
+  border: 1px solid rgba(3,102,214,0.04);
+}
+
+/* Make the three-column grid appear with soft separators similar to screenshot */
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 32px;
+}
+
+  .metrics-grid .metrics-col {
+    padding: 12px;
+    background: rgba(255,255,255,0.6);
+    border-radius: 10px;
+  }
+
+    .metrics-grid .metrics-col .metrics-card-heading {
+      background: rgba(3,102,214,0.03);
+      padding: 8px 10px;
+      border-radius: 8px;
+    }
+
+  /* Small tweak: emphasize metric separators inside the grid */
+  .metrics-grid .metric-row {
+    border-bottom: 1px solid rgba(6,30,70,0.04);
+  }
+
+/* Scoped: remove internal scrollbar only for the video details metrics card */
+.video-details-card {
+ /* allow content to expand and avoid internal scroll */
+ overflow: visible !important;
+ max-height: none !important;
+}
+
+/* Hide any WebKit scrollbars that might still appear inside the video card */
+.video-details-card::-webkit-scrollbar {
+ width:0px;
+ height:0px;
+ display: none;
+}
+
+/* Hide scrollbars in Firefox/IE for the video card */
+.video-details-card {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}

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

@@ -0,0 +1,320 @@
+<!-- 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 class="header-actions-right">
+      <button class="back-btn" (click)="goBack()">
+        <span class="back-icon">←</span> Back
+      </button>
+    </div>
+  </div>
+</div>
+
+<div class="details-layout">
+  <aside class="details-sidebar modern-sidebar">
+    <div class="sidebar-section-heading">Analysis Modules</div>
+    <div class="sidebar-btn-group">
+      <button class="sidebar-btn2" [class.active]="activeTab === 'audio'" (click)="setTab('audio')">
+        <span class="sidebar-icon material-icons">Audio Analysis</span>
+       
+      </button>
+      <button class="sidebar-btn2" [class.active]="activeTab === 'video'" (click)="setTab('video')">
+        <span class="sidebar-icon material-icons">Video Analysis</span>
+        
+      </button>
+      <button class="sidebar-btn2" [class.active]="activeTab === 'validation'" (click)="setTab('validation')">
+        <span class="sidebar-icon material-icons">verified Scores</span>
+        
+      </button>
+    </div>
+
+  </aside>
+
+  <main class="details-main">
+    <div class="indigo-main-card wide" [@fadeInTab]>
+
+      <!-- Case header (only show Question/Answer) -->
+      <div class="case-header" *ngIf="selectedQuestion || (questions && questions.length > 0)">
+        <div class="case-qa">
+          <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
+            <div style="flex:1">
+              <div><strong>Question:</strong> {{ selectedQuestion?.question || questions[0]?.question || '—' }}</div>
+              <div><strong>Answer:</strong> {{ selectedQuestion?.answer || questions[0]?.answer || '—' }}</div>
+            </div>
+
+            <!-- Question counter -->
+            <div style="display:flex;flex-direction:column;align-items:flex-end;min-width:140px;margin:8px;">
+              <div class="qa-counter" aria-live="polite" style="font-weight:700;color:#075985;">
+                Question
+                {{ getCurrentIndex() >= 0 ? (getCurrentIndex() + 1) : (selectedQuestion ? 1 : 0) }}
+                of {{ questions.length || 0 }}
+              </div>
+            </div>
+
+            <div style="display:flex;align-items:center;gap:8px;">
+              <button class="nav-btn"
+                      (click)="prevQuestion()"
+                      [disabled]="!hasPrev()"
+                      [class.prev-anim]="navAnimating === 'prev'">
+                Previous
+              </button>
+              <button class="nav-btn"
+                      (click)="nextQuestion()"
+                      [disabled]="!hasNext()"
+                      [class.next-anim]="navAnimating === 'next'">
+                Next
+              </button>
+            </div>
+          </div>
+        </div>
+        <hr />
+      </div>
+
+      <!-- If no questions for this case show fallback -->
+      <div *ngIf="(!questions || questions.length === 0)" class="empty-message">
+        No question records available for Case ID {{ caseId }}.
+      </div>
+
+      <!-- Audio tab -->
+      <div *ngIf="questions && questions.length > 0 && activeTab === 'audio'">
+        <div *ngFor="let q of (selectedQuestion ? [selectedQuestion] : questions); let i = index"
+             class="audio-analysis-card metrics-card audio-card"
+             [@cardFade]>
+
+          <div class="metrics-card-heading audio-analysis">Audio Analysis</div>
+
+          <div class="metrics-list">
+            <ng-container *ngIf="layoutMode === 'single'">
+              <div class="metrics-grid-card">
+                <div class="metrics-grid">
+                  <div class="metrics-card metrics-col">
+                    <div class="metrics-card-heading">Core Metrics</div>
+                    <div *ngFor="let m of coreMetrics" class="metric-row">
+                      <button class="metric-name metric-label" (click)="toggleTooltip(m.key)">
+                        {{ m.label }}
+                      </button>
+                      <div class="metric-value">{{ getMetricValue(q, m.key) }}</div>
+                      <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                    </div>
+                  </div>
+
+                  <div class="metrics-card metrics-col">
+                    <div class="metrics-card-heading">Stress & Tone</div>
+                    <div *ngFor="let m of stressToneMetrics" class="metric-row">
+                      <button class="metric-name metric-label" (click)="toggleTooltip(m.key)">
+                        {{ m.label }}
+                      </button>
+                      <div class="metric-value">{{ getMetricValue(q, m.key) }}</div>
+                      <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                    </div>
+                  </div>
+
+                  <div class="metrics-card metrics-col">
+                    <div class="metrics-card-heading">Speech Behaviour</div>
+                    <div *ngFor="let m of speechBehaviourMetrics" class="metric-row">
+                      <button class="metric-name metric-label" (click)="toggleTooltip(m.key)">
+                        {{ m.label }}
+                      </button>
+                      <div class="metric-value">{{ getMetricValue(q, m.key) }}</div>
+                      <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                    </div>
+                  </div>
+
+                  <div class="metrics-card metrics-col">
+                    <div class="metrics-card-heading">Advanced (optional)</div>
+                    <div *ngFor="let m of advancedMetrics" class="metric-row">
+                      <button class="metric-name metric-label" (click)="toggleTooltip(m.key)">
+                        {{ m.label }}
+                      </button>
+                      <div class="metric-value">{{ getMetricValue(q, m.key) }}</div>
+                      <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ng-container>
+
+            <ng-container *ngIf="layoutMode === 'multiple'">
+              <div class="metrics-grid-multiple">
+                <div class="metrics-card"
+                     *ngFor="let group of [coreMetrics, stressToneMetrics, speechBehaviourMetrics, advancedMetrics]">
+                  <div class="metrics-card-heading">
+                    {{
+                      group === coreMetrics ? 'Core Metrics' :
+                      group === stressToneMetrics ? 'Stress & Tone' :
+                      group === speechBehaviourMetrics ? 'Speech Behaviour' :
+                      'Advanced (optional)'
+                    }}
+                  </div>
+
+                  <div *ngFor="let m of group" class="metric-row">
+                    <button class="metric-name metric-label" (click)="toggleTooltip(m.key)">
+                      {{ m.label }}
+                    </button>
+                    <div class="metric-value">{{ getMetricValue(q, m.key) }}</div>
+                    <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                  </div>
+                </div>
+              </div>
+            </ng-container>
+          </div>
+
+        </div>
+      </div>
+
+      <!-- Video tab -->
+      <div *ngIf="questions && questions.length > 0 && activeTab === 'video'">
+        <div *ngFor="let q of (selectedQuestion ? [selectedQuestion] : questions); let i = index"
+             class="video-analysis-card metrics-card video-card"
+             [@cardFade]>
+
+          <div class="metrics-card-heading video-analysis">Video Analysis</div>
+
+          <ng-container *ngIf="layoutMode === 'single'">
+            <div class="metrics-grid-card">
+              <div class="metrics-grid">
+                <div class="metrics-card metrics-col">
+                  <div class="metrics-card-heading">Core Metrics</div>
+                  <div *ngFor="let m of videoCoreMetrics" class="metric-row">
+                    <button class="metric-name metric-label" (click)="toggleTooltip(m.key)">
+                      {{ m.label }}
+                    </button>
+                    <div class="metric-value">{{ getMetricValue(q, m.key) }}</div>
+                    <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                  </div>
+                </div>
+
+                <div class="metrics-card metrics-col">
+                  <div class="metrics-card-heading">Behavioural & Psychological</div>
+                  <div *ngFor="let m of videoBehaviourMetrics" class="metric-row">
+                    <button class="metric-name metric-label" (click)="toggleTooltip(m.key)">
+                      {{ m.label }}
+                    </button>
+                    <div class="metric-value">{{ getMetricValue(q, m.key) }}</div>
+                    <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                  </div>
+                </div>
+
+                <div class="metrics-card metrics-col">
+                  <div class="metrics-card-heading">Advanced (optional)</div>
+                  <div *ngFor="let m of videoAdvancedMetrics" class="metric-row">
+                    <button class="metric-name metric-label" (click)="toggleTooltip(m.key)">
+                      {{ m.label }}
+                    </button>
+                    <div class="metric-value">{{ getMetricValue(q, m.key) }}</div>
+                    <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ng-container>
+
+          <ng-container *ngIf="layoutMode === 'multiple'">
+            <div class="metrics-grid-multiple">
+              <div class="metrics-card"
+                   *ngFor="let group of [videoCoreMetrics, videoBehaviourMetrics, videoAdvancedMetrics]">
+                <div class="metrics-card-heading">
+                  {{
+                    group === videoCoreMetrics ? 'Core Metrics' :
+                    group === videoBehaviourMetrics ? 'Behavioural & Psychological' :
+                    'Advanced (optional)'
+                  }}
+                </div>
+
+                <div *ngFor="let m of group" class="metric-row">
+                  <button class="metric-name metric-label" (click)="toggleTooltip(m.key)">
+                    {{ m.label }}
+                  </button>
+                  <div class="metric-value">{{ getMetricValue(q, m.key) }}</div>
+                  <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                </div>
+              </div>
+            </div>
+          </ng-container>
+
+        </div>
+      </div>
+
+      <!-- Validation tab -->
+      <div *ngIf="questions && questions.length > 0 && activeTab === 'validation'">
+        <div *ngFor="let q of (selectedQuestion ? [selectedQuestion] : questions); let i = index"
+             class="validation-analysis-wrap">
+
+          <div class="indigo-main-card verified-scores" [@cardFade]>
+            <div class="metrics-card-heading">Verified Scores</div>
+
+            <ng-container *ngIf="layoutMode === 'single'">
+              <div class="verified-scores-grid">
+                <!-- First row: three cards -->
+                <div class="verified-scores-row" style="display:flex;gap:16px;margin-bottom:16px;">
+                  <div class="metrics-card verified-score-card" style="flex:1;min-width:220px;">
+                    <div class="metrics-card-heading" style="font-weight:600;">Physical Expression</div>
+                    <div class="metric-value" style="font-weight:700;">Neutral, Low hand, Moderate leg, 2 detected</div>
+                  </div>
+                  <div class="metrics-card verified-score-card" style="flex:1;min-width:220px;">
+                    <div class="metrics-card-heading" style="font-weight:600;">Physical Score (%)</div>
+                    <div class="metric-value" style="font-weight:700;">2%</div>
+                  </div>
+                  <div class="metrics-card verified-score-card" style="flex:1;min-width:220px;">
+                    <div class="metrics-card-heading" style="font-weight:600;">Voice Expression</div>
+                    <div class="metric-value" style="font-weight:700;">Stress 68, Conf Moderate, Sent -45%, Delay 3.1 sec</div>
+                  </div>
+                </div>
+                <!-- Second row: two cards -->
+                <div class="verified-scores-row" style="display:flex;gap:16px;">
+                  <div class="metrics-card verified-score-card" style="flex:1;min-width:220px;">
+                    <div class="metrics-card-heading" style="font-weight:600;">Voice Score (%)</div>
+                    <div class="metric-value" style="font-weight:700;">23</div>
+                  </div>
+                  <div class="metrics-card verified-score-card" style="flex:1;min-width:220px;">
+                    <div class="metrics-card-heading" style="font-weight:600;">Truth Probability (%)</div>
+                    <div class="metric-value" style="font-weight:700;">78%</div>
+                  </div>
+                </div>
+              </div>
+            </ng-container>
+
+            <ng-container *ngIf="layoutMode === 'multiple'">
+              <div class="metrics-grid-multiple">
+                <div class="metrics-card" *ngFor="let m of videoFinalMetrics">
+                  <div class="metrics-card-heading" *ngIf="m.label !== 'Overall Score (%)'">
+                    {{ m.label }}
+                  </div>
+
+                  <div class="metric-row" *ngIf="m.label !== 'Overall Score (%)'">
+                    <div class="metric-value">{{ getFinalMetricValue(q, m.key) }}</div>
+                  </div>
+
+                  <div class="tooltip" *ngIf="shownTooltip === m.key">{{ m.desc }}</div>
+                </div>
+              </div>
+            </ng-container>
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </main>
+
+  <footer>
+    <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+  </footer>
+</div>

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

@@ -0,0 +1,360 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { QuestionDataService } from '../question-data.service';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { CASE_DATA } from '../data/case-data';
+
+@Component({
+  selector: 'app-view-details-page',
+  templateUrl: './view-details-page.component.html',
+  styleUrls: ['./view-details-page.component.css'],
+  animations: [
+    trigger('fadeInTab', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(16px)' }),
+        animate('500ms cubic-bezier(.4,0,.2,1)', style({ opacity: 1, transform: 'translateY(0)' }))
+      ])
+    ]),
+    // cardFade used for individual metric cards when they enter/leave
+    trigger('cardFade', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(8px) scale(0.98)' }),
+        // duration300ms, delay60ms
+        animate('300ms 60ms cubic-bezier(.2,.8,.2,1)', style({ opacity: 1, transform: 'translateY(0) scale(1)' }))
+      ]),
+      transition(':leave', [
+        animate('180ms cubic-bezier(.4,0,.2,1)', style({ opacity: 0, transform: 'translateY(8px) scale(0.98)' }))
+      ])
+    ])
+  ]
+})
+export class ViewDetailsPageComponent {
+  activeTab: 'audio' | 'video' | 'validation' = 'audio';
+
+  // When navigated from question summary with an index -> selectedQuestion is shown
+  selectedQuestion: any = null;
+
+  // When navigated by caseId -> questions contains all questions for the case
+  caseId: string = '';
+  caseDetails: any = null;
+  questions: any[] = [];
+
+  // prefer service data; fallback to static CASE_DATA
+  private sourceData: any[] = CASE_DATA;
+
+  // layout mode persistence: 'single' or 'multiple'
+  layoutMode: 'single' | 'multiple' = 'single';
+
+  // tooltip handling
+  shownTooltip: string | null = null;
+
+  // Audio metric groups (use key for binding and label for display)
+  coreMetrics = [
+    { key: 'truthProbability', label: 'Truth Probability (%)', desc: 'AI-estimated likelihood the spoken response is truthful.' },
+    { key: 'dominantEmotion', label: 'Dominant Emotion', desc: 'Primary emotion (Calm, Nervous, Defensive, Angry, Sad).' },
+    { key: 'emotion', label: 'Emotion', desc: 'Detected emotion labels or values for the utterance.' },
+    { key: 'duration', label: 'Duration', desc: 'Length of the spoken response or recording.' },
+    { key: 'confidence', label: 'Confidence Level', desc: 'High / Moderate / Low (based on tone steadiness).' },
+    { key: 'speechRate', label: 'Speech Rate (WPM)', desc: 'Words per minute. Faster or slower speech under stress.' },
+    { key: 'sentiment', label: 'Sentiment Score', desc: 'Positive / Negative / Neutral tone.' }
+  ];
+
+  stressToneMetrics = [
+    { key: 'pitchStability', label: 'Pitch Stability (Hz variation)', desc: 'Measures vocal frequency fluctuation.' },
+    { key: 'stressLevel', label: 'Stress Level (%)', desc: 'Based on amplitude variation & tone sharpness.' },
+    { key: 'blinkRate', label: 'Blink Rate', desc: 'Blinks per minute — often rises under stress.' },
+    { key: 'energyLevel', label: 'Energy Level (dB)', desc: 'Average vocal energy / loudness.' },
+    { key: 'voiceTremor', label: 'Voice Tremor Index', desc: 'Detects micro-shakes in tone.' }
+  ];
+
+  speechBehaviourMetrics = [
+    { key: 'responseDelay', label: 'Response Delay (sec)', desc: 'Time between question end and answer start.' },
+    { key: 'pausesPerMinute', label: 'Pauses per Minute', desc: 'Number of noticeable silences.' },
+    { key: 'disfluencyRate', label: 'Disfluency Rate', desc: '“Uh”, “um”, or stuttering frequency.' },
+    { key: 'articulationClarity', label: 'Articulation Clarity', desc: 'Pronunciation sharpness.' },
+    { key: 'eyeContact', label: 'Eye Contact', desc: 'Estimate of eye contact during response (if available).' }
+  ];
+
+  advancedMetrics = [
+    { key: 'spectralTilt', label: 'Spectral Tilt', desc: 'Balance between low/high frequency energy.' },
+    { key: 'formantShifts', label: 'Formant Shifts (F1, F2)', desc: 'Resonance changes in vocal tract.' },
+    { key: 'prosodyScore', label: 'Prosody Score', desc: 'Rhythm + intonation smoothness.' },
+    { key: 'emotionStability', label: 'Emotion Stability Index', desc: 'Consistency of emotion across phrases.' }
+  ];
+
+  // Video metric groups (Core, Behavioural, Advanced) — only these metrics per user request
+  videoCoreMetrics = [
+    { key: 'facialEmotion', label: 'Facial Emotion Detection', desc: 'Classifies visible emotions (Calm, Angry, Nervous, Sad, Confused, Fearful).' },
+    { key: 'eyeContactConsistency', label: 'Eye Contact Consistency (%)', desc: 'Percentage of time the subject maintains eye contact.' },
+    { key: 'blinkRate', label: 'Blink Rate (per minute)', desc: 'Blink frequency; increased blinking may indicate nervousness.' },
+    { key: 'headMovement', label: 'Head Movement Analysis', desc: 'Detects nods, shakes, or tilts.' },
+    { key: 'bodyMovementIndex', label: 'Body Movement Index', desc: 'Tracks posture shifts, fidgeting, or restlessness.' },
+    { key: 'handMovementFreq', label: 'Hand Movement Frequency', desc: 'Detects gesturing or hiding hands.' },
+    { key: 'microExpressionScore', label: 'Facial Micro-Expression Score', desc: 'AI-based confidence in identifying suppressed emotions.' }
+  ];
+
+  videoBehaviourMetrics = [
+    { key: 'confidenceLevel', label: 'Confidence Level (%)', desc: 'Derived from posture, facial stability, and gestures.' },
+    { key: 'stressLevel', label: 'Stress Level (%)', desc: 'Combines facial tension + movement instability.' },
+    { key: 'emotionShiftTimeline', label: 'Emotion Shift Timeline', desc: 'Tracks emotion changes throughout questioning.' }
+  ];
+
+  videoAdvancedMetrics = [
+    { key: 'gazeDeviation', label: 'Gaze Deviation Angle', desc: 'Measures deviation of eye direction from interviewer.' },
+    { key: 'facialTempMap', label: 'Facial Temperature Map (IR)', desc: 'Detects heat changes around nose/forehead (IR optional).' },
+    { key: 'postureStability', label: 'Posture Stability Index', desc: 'Monitors torso movement variance.' }
+  ];
+
+  // Final verified metrics used in Validation tab (only these metrics)
+  videoFinalMetrics = [
+    { key: 'physicalExpression', label: 'Physical Expression', desc: 'Summary of visible cues: posture, gestures, micro-expressions.' },
+    { key: 'physicalScore', label: 'Physical Score (%)', desc: 'Overall body-language consistency and stability score.' },
+    { key: 'voiceExpression', label: 'Voice Expression', desc: 'Combined emotional tone summary.' },
+    { key: 'voiceScore', label: 'Voice Score (%)', desc: 'Confidence and emotional steadiness derived from tone and speech.' },
+    { key: 'truthProbability', label: 'Truth Probability (%)', desc: 'Weighted average score combining both voice and video indicators.' },
+    
+  ];
+
+  constructor(private route: ActivatedRoute, private router: Router, private questionDataService: QuestionDataService) {
+    // load persisted layout
+    const saved = localStorage.getItem('metricsLayoutMode');
+    if (saved === 'single' || saved === 'multiple') this.layoutMode = saved;
+
+    this.route.paramMap.subscribe(params => {
+      const idParam = params.get('id');
+      const caseParam = params.get('caseId');
+
+      const svcQuestions = this.questionDataService.getQuestions() || [];
+      const rawData = svcQuestions.length ? svcQuestions : this.sourceData;
+      // normalize so each item has `question` (fallback to `text`)
+      const data = rawData.map(q => ({ ...(q || {}), question: q?.question || q?.text || '' }));
+      this.caseDetails = this.questionDataService.getCaseDetails() || null;
+
+      if (idParam !== null) {
+        const idx = Number(idParam);
+        this.selectedQuestion = data[idx] || null;
+        this.caseId = this.selectedQuestion?.caseId || this.caseDetails?.caseId || '';
+        // keep full data list so Previous/Next navigate across all questions
+        this.questions = data;
+        this.activeTab = 'audio';
+      } else if (caseParam) {
+        this.caseId = caseParam;
+        this.questions = data.filter(q => q.caseId === this.caseId);
+        this.selectedQuestion = this.questions[0] || null;
+      } else {
+        this.questions = data;
+        this.selectedQuestion = this.questions[0] || null;
+        this.caseId = this.selectedQuestion?.caseId || '';
+      }
+    });
+  }
+
+  toggleLayout(mode: 'single' | 'multiple') {
+    this.layoutMode = mode;
+    localStorage.setItem('metricsLayoutMode', mode);
+  }
+
+  toggleTooltip(key: string) {
+    this.shownTooltip = this.shownTooltip === key ? null : key;
+  }
+
+  // helper to read metric value from question object and format
+  getMetricValue(q: any, key: string): string {
+    if (!q) return '—';
+    // truthProbability uses existing formatter
+    if (key === 'truthProbability') return this.formatTruthProbability(q);
+    const val = q[key];
+    if (val === undefined || val === null) return '—';
+    if (typeof val === 'number') {
+      // append % for keys that represent percent-like metrics
+      if (/Level|Score|Probability|Rate|Tremor|Stability/i.test(key)) return val + '%';
+      return String(val);
+    }
+    return String(val);
+  }
+
+  setTab(tab: 'audio' | 'video' | 'validation') {
+    this.activeTab = tab;
+  }
+
+  goBack() {
+    // navigate back to question summary list
+    this.router.navigate(['/question-summary']);
+  }
+
+  navigateHome() {
+    window.location.href = '/home';
+  }
+
+  // helper methods for validation calculations
+  getPhysicalExpressionSummary(q: any): string {
+    const parts: string[] = [];
+    if (!q) return '—';
+    if (q.posture) parts.push(q.posture);
+    if (q.handMovement) parts.push(q.handMovement + ' hand');
+    if (q.legMovement) parts.push(q.legMovement + ' leg');
+    if (q.microExpressions) parts.push(q.microExpressions);
+    return parts.length ? parts.join(', ') : '—';
+  }
+
+  getPhysicalScore(q: any): string {
+    if (!q) return '—';
+    const scores: number[] = [];
+    if (typeof q.handMovement === 'number') scores.push(q.handMovement);
+    if (typeof q.legMovement === 'number') scores.push(q.legMovement);
+    const match = (q.microExpressions || '').match(/(\d+)/);
+    if (match) scores.push(Number(match[1]));
+    if (!scores.length) return '—';
+    return Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) + '%';
+  }
+
+  getVoiceExpressionSummary(q: any): string {
+    if (!q) return '—';
+    const parts: string[] = [];
+    if (q.stressLevel !== undefined) parts.push('Stress ' + q.stressLevel);
+    if (q.confidence) parts.push('Conf ' + q.confidence);
+    if (q.sentiment) parts.push('Sent ' + this.getSentimentPercent(q.sentiment));
+    if (q.responseDelay) parts.push('Delay ' + q.responseDelay);
+    return parts.length ? parts.join(', ') : '—';
+  }
+
+  getVoiceScore(q: any): string {
+    if (!q) return '—';
+    const scores: number[] = [];
+    if (typeof q.stressLevel === 'number') scores.push(q.stressLevel);
+    if (typeof q.confidence === 'number') scores.push(q.confidence);
+    else if (q.confidence === 'High') scores.push(90);
+    else if (q.confidence === 'Moderate') scores.push(60);
+    else if (q.confidence === 'Low') scores.push(30);
+    if (!scores.length) return '—';
+    return Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) + '%';
+  }
+
+  getOverallScore(q: any): string {
+    const phys = this.getPhysicalScore(q);
+    const voice = this.getVoiceScore(q);
+    const physNum = parseInt(phys as any);
+    const voiceNum = parseInt(voice as any);
+    if (isNaN(physNum) && isNaN(voiceNum)) return '—';
+    if (isNaN(physNum)) return voice;
+    if (isNaN(voiceNum)) return phys;
+    return Math.round((physNum + voiceNum) / 2) + '%';
+  }
+
+  getSentimentPercent(sentiment: string): string {
+    if (!sentiment) return '';
+    const match = sentiment.match(/([+-]?\d*\.?\d+)/);
+    if (match) {
+      const value = parseFloat(match[1]);
+      const percent = Math.round(value * 100);
+      return (percent > 0 ? '+' : '') + percent + '%';
+    }
+    return sentiment;
+  }
+
+  // New helper: compute lie percentage from truthProbability (string like '78%')
+  getLiePercent(q: any): string {
+    if (!q) return '—';
+    const tp = q.truthProbability;
+    if (tp === undefined || tp === null) return '—';
+    // allow number or string with %
+    let num = NaN;
+    if (typeof tp === 'number') num = tp;
+    else if (typeof tp === 'string') {
+      const m = tp.match(/(\d+)/);
+      if (m) num = Number(m[1]);
+    }
+    if (isNaN(num)) return '—';
+    const lie = Math.max(0, 100 - num);
+    return lie + '%';
+  }
+
+  // helper to format truthProbability for display in template
+  formatTruthProbability(q: any): string {
+    if (!q) return '—';
+    const tp = q.truthProbability;
+    if (tp === undefined || tp === null) return '—';
+    if (typeof tp === 'number') return tp + '%';
+    if (typeof tp === 'string') {
+      // if already contains %, return as-is, else append
+      if (tp.includes('%')) return tp;
+      const m = tp.match(/(\d+)/);
+      if (m) return m[1] + '%';
+      return tp;
+    }
+    return String(tp);
+  }
+
+  // helper to get display value for final verified metrics
+  getFinalMetricValue(q: any, key: string): string {
+    if (!q) return '—';
+    switch (key) {
+      case 'physicalExpression':
+        return q?.physicalExpression || this.getPhysicalExpressionSummary(q) || '—';
+      case 'physicalScore':
+        return q?.physicalScore || this.getPhysicalScore(q);
+      case 'voiceExpression':
+        return q?.voiceExpression || this.getVoiceExpressionSummary(q);
+      case 'voiceScore':
+        return q?.voiceScore || this.getVoiceScore(q);
+      case 'truthProbability':
+        return this.formatTruthProbability(q);
+      case 'overallScore':
+        return q?.overallScore || this.getOverallScore(q);
+      default:
+        return this.getMetricValue(q, key);
+    }
+  }
+
+  // navigation helpers for Previous / Next buttons
+  public getCurrentIndex(): number {
+    if (!this.selectedQuestion || !this.questions || !this.questions.length) return -1;
+    // try reference match first
+    let idx = this.questions.indexOf(this.selectedQuestion);
+    if (idx >=0) return idx;
+    // fallback to matching by caseId + question text
+    idx = this.questions.findIndex(q => q && this.selectedQuestion && q.caseId === this.selectedQuestion.caseId && (q.question === this.selectedQuestion.question || q.text === this.selectedQuestion.question));
+    return idx;
+  }
+
+  hasPrev(): boolean {
+    const idx = this.getCurrentIndex();
+    return idx >0;
+  }
+
+  hasNext(): boolean {
+    const idx = this.getCurrentIndex();
+    return idx >=0 && idx < this.questions.length -1;
+  }
+
+  prevQuestion() {
+    const idx = this.getCurrentIndex();
+    if (idx >0) {
+      const newIdx = idx -1;
+      // play click animation briefly before navigating
+      this.navAnimating = 'prev';
+      this.shownTooltip = null;
+      setTimeout(() => {
+        this.router.navigate(['/view-details', newIdx]);
+      },140);
+      // clear animation state after it finishes
+      setTimeout(() => { this.navAnimating = null; },420);
+    }
+  }
+
+  nextQuestion() {
+    const idx = this.getCurrentIndex();
+    if (idx >=0 && idx < this.questions.length -1) {
+      const newIdx = idx +1;
+      this.navAnimating = 'next';
+      this.shownTooltip = null;
+      setTimeout(() => {
+        this.router.navigate(['/view-details', newIdx]);
+      },140);
+      setTimeout(() => { this.navAnimating = null; },420);
+    }
+  }
+
+  // transient animation state for nav buttons ('prev' | 'next' | null)
+  navAnimating: 'prev' | 'next' | null = null;
+}

src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  pyDetectApiUrl: 'http://127.0.0.1:5002'
+};

src/styles.css

@@ -5,10 +5,9 @@ body, html {
   background: url('/assets/background.jpg') no-repeat center center fixed;
   background-size: cover;
   transition: background-color 0.3s ease, color 0.3s ease;
+   overflow-x: hidden !important;
 }
 
-
-
 /* Theme Support */
 body.dark-theme {
   background-color: #0a0e16;