casedetailspage-update

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

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

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

@@ -43,30 +43,69 @@
       <div class="summary-label">Closed</div>
       <div class="summary-value">{{ closedCases }}</div>
     </div>
+    <div class="summary-card review">
+      <div class="summary-label">Pending Review</div>
+      <div class="summary-value">{{ reviewCases }}</div>
+    </div>
   </div>
 
   <div class="record-meta" style="padding: 8px 24px 0 24px; color: #6b7280; font-size: 0.98em;">
     {{ filteredCases.length }} items • Updated a few seconds ago
   </div>
 
+  <div class="filter-bar">
+    <select [(ngModel)]="filterStatus">
+      <option value="">Status</option>
+      <option *ngFor="let status of statusTypes">{{ status }}</option>
+    </select>
+    <select [(ngModel)]="filterCrimeType">
+      <option value="">Crime Type</option>
+      <option *ngFor="let type of crimeTypes">{{ type }}</option>
+    </select>
+    <button (click)="applyFilters()">Apply</button>
+    <button (click)="resetFilters()">Reset</button>
+  </div>
+
+  <!-- Table/list view always visible -->
   <table class="record-table">
     <thead>
       <tr>
         <th>#</th>
         <th>Case ID</th>
+        <th>Priority</th>
         <th>Status</th>
         <th>Crime Type</th>
         <th>Date &amp; Time</th>
         <th>Location</th>
         <th>Suspect Name</th>
         <th>Last Updated</th>
-        <th>Actions</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 filteredCases; let i = index">
-        <td>{{ i + 1 }}</td>
-        <td class="mono">{{ c.caseId || '—' }}</td>
+      <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]="{
@@ -82,38 +121,182 @@
         <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 Details">
+          <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 && goToDetect(c.caseId)"
+                  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="filteredCases.length === 0">
-        <td colspan="9" class="empty">No records found.</td>
+      <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>
 </div>
 
-<!-- Modal white blur overlay for background -->
-<div class="modal-blur-overlay" *ngIf="showDetails"></div>
-<div class="modal" *ngIf="showDetails" role="dialog" aria-modal="true" aria-labelledby="detailsTitle">
-  <div class="modal-header">
-    <h2 id="detailsTitle">Case Details</h2>
+<!-- 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>
+
+<!-- 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>
+</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>
-  <div class="modal-body" *ngIf="selectedCase as sc">
-    <div class="detail-row"><span>Case ID</span><b>{{ sc.caseId || '—' }}</b></div>
-    <div class="detail-row"><span>Status</span><b>{{ sc.status || '—' }}</b></div>
-    <div class="detail-row"><span>Crime Type</span><b>{{ sc.crime || '—' }}</b></div>
-    <div class="detail-row"><span>Date & Time</span><b>{{ sc.dateTime ? (sc.dateTime | date:'M/d/yyyy HH:mm') : '—' }}</b></div>
-    <div class="detail-row"><span>Location</span><b>{{ sc.police.address || '—' }}</b></div>
-    <div class="detail-row"><span>Suspect Name</span><b>{{ sc.accused.name || '—' }}</b></div>
-    <div class="detail-row"><span>Last Updated</span><b>{{ sc.lastUpdated ? (sc.lastUpdated | date:'M/d/yyyy HH:mm') : '—' }}</b></div>
-    <hr />
-    <div class="detail-row"><span>Notes / Explanation</span><b>{{ sc.police.information || '—' }}</b></div>
+  <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="modal-footer">
-    <button type="button" class="btn" (click)="closeDetails()">Close</button>
+  <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>
 
+<!-- Footer from provided design -->
+<footer>
+  <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

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

src/app/case-store.service.ts

@@ -143,6 +143,7 @@ export class CaseStoreService {
     this.addPoliceCase(mapped);
   }
 
+  
   /** Persist to localStorage (safe to keep; remove if not needed) */
   private save(): void {
     try { localStorage.setItem(this.storageKey, JSON.stringify(this.cases)); } catch { }

src/app/homepage/homepage.component.css

@@ -39,138 +39,115 @@ body, html {
   left: 0;
   z-index: 30;
 }
-
-.logo {
-  width: 120px;
-  height: 120px;
-  margin-left: 0;
-  margin-top: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 40;
-}
-
-.logo-fixed {
+/* Modern UI header styles from infopage */
+.site-header {
+  background: #011329;
+  box-shadow: 0 2px 12px #38bdf844;
+  margin-bottom: 0;
   position: fixed;
   top: 0;
   left: 0;
-  width: 120px;
-  height: 120px;
+  width: 100%;
   z-index: 100;
-  margin: 0;
+  padding-bottom: 0;
 }
 
-/* Add gap between logo and browser border */
-.logo-img {
-  width: 6vw;
-  position: fixed;
-  top: 21px;
-  left: 36px;
-  z-index: 300;
-  margin: 0;
-  background: #ffffff;
-  max-width: 4.2vw;
-  min-width: 56px;
-  height: auto;
-  border-radius: 50%;
-  padding: 4px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
-  transition: transform .25s ease;
+body {
+  padding-top: 80px; /* Adjust to match header height so content is not hidden */
 }
 
-/* Move Py-Detect text further down by increasing top value of .logo-title-row */
-.logo-title-row {
+.header-inner {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  position: absolute;
-  top: 180px; /* Increased from 120px to move text further down */
-  left: 48px;
-  z-index: 300;
-  gap: 32px;
   justify-content: flex-start;
-  width: 100%;
+  padding: 18px 32px 0 32px;
+  position: relative;
 }
 
-.py-detect-title {
-  position: fixed;
-  margin-left: 97px;
-  margin-top: -228px;
-  text-align: left;
-  font-size: 3vw;
-  color: #38bdf8;
+.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;
-  background: none;
-  border: none;
-  box-shadow: none;
-  min-width: unset;
-  max-width: unset;
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-bottom: 1.5vh;
 }
 
-  /* Py-Detect title: each letter with its own color */
-  .py-detect-title .py-letter.p {
+  .py-detect-title-header .py-letter.p {
     color: #e3f6ff;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-  .py-detect-title .py-letter.y {
+  .py-detect-title-header .py-letter.y {
     color: #38bdf8;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-  .py-detect-title .py-shape {
+  .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-shape {
-  display: inline-block;
-  width: 18px;
-  height: 4px;
-  background: #38bdf8;
-  margin: 0 8px;
-  vertical-align: middle;
-  border-radius: 2px;
-  box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff;
-  border: 2px solid #23272b;
-}
-
-  .py-detect-title .py-letter.d {
+  .py-detect-title-header .py-letter.d {
     color: #e3f6ff;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-  .py-detect-title .py-letter.e {
+  .py-detect-title-header .py-letter.e {
     color: #38bdf8;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-  .py-detect-title .py-letter.t {
+  .py-detect-title-header .py-letter.t {
     color: #e3f6ff;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-  .py-detect-title .py-letter.e2 {
+  .py-detect-title-header .py-letter.e2 {
     color: #38bdf8;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-  .py-detect-title .py-letter.c {
+  .py-detect-title-header .py-letter.c {
     color: #e3f6ff;
     text-shadow: 0 0 6px #38bdf8;
   }
 
-  .py-detect-title .py-letter.t2 {
+  .py-detect-title-header .py-letter.t2 {
     color: #38bdf8;
     text-shadow: 0 0 6px #38bdf8;
   }
 
+
+
 .center-instructions {
   position: absolute;
   top: 50%;
@@ -230,7 +207,7 @@ body, html {
 
 .auth-topright {
   position: fixed;
-  top: 46px;
+  top: 28px;
   right: 48px;
   z-index: 200;
   display: flex;
@@ -974,3 +951,36 @@ footer .social-icons {
   background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
   box-shadow: 0 4px 8px rgba(188, 24, 136, 0.3);
 }
+
+/* Sleek header auth buttons */
+.auth-topright .auth-btn {
+  font-size: 0.95rem;
+  font-weight: 600;
+  padding: 0.35rem 1.1rem;
+  background: rgba(30,41,59,0.85);
+  color: #e3f6ff;
+  border: 1px solid #38bdf8;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px #01132944;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
+  opacity: 0.96;
+}
+
+.auth-topright .auth-btn {
+  animation: authPulse 2.2s ease-in-out infinite;
+}
+
+@keyframes authPulse {
+  0% { box-shadow: 0 0 0px #38bdf844, 0 2px 8px #01132944; }
+  50% { box-shadow: 0 0 12px #38bdf8cc, 0 2px 16px #01132944; }
+  100% { box-shadow: 0 0 0px #38bdf844, 0 2px 8px #01132944; }
+}
+
+.auth-topright .auth-btn:hover {
+  animation: none;
+  background: rgba(56,189,248,0.18);
+  color: #bae6fd;
+  border-color: #bae6fd;
+  box-shadow: 0 4px 24px #38bdf8cc;
+  opacity: 1;
+}

src/app/homepage/homepage.component.html

@@ -1,24 +1,28 @@
-<!-- Logo and Py-Detect Title (kept as your last version) -->
-<div class="back-colo">
-<div class="logo-title-row">
-  <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img" />
-  <div class="py-detect-title">
-    <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>
+<!-- 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>
-</div>
 
 <!-- Top-right auth buttons (unchanged) -->
 <div class="auth-topright">
-   <button class="auth-btn" (click)="openSignIn()">Sign In</button>
+  <button class="auth-btn" (click)="openSignIn()">Sign In</button>
   <button class="auth-btn" (click)="openSignUp()">Sign Up</button>
 </div>
 
@@ -100,7 +104,7 @@
 <section class="how-to-use">
   <h2 class="section-title">How to Use Py-Detect?</h2>
   <p class="section-subtitle">
-    Py-Detect supports both <strong>Admins</strong> (e.g., Inspectors) and <strong>Users</strong> (e.g., Constables) 
+    Py-Detect supports both <strong>Admins</strong> (e.g., Inspectors) and <strong>Users</strong> (e.g., Constables)
     to manage cases, conduct investigations, and analyse suspects with AI.
   </p>
 
@@ -110,7 +114,7 @@
       <i class="fas fa-user-tie icon"></i>
       <h3>1. Admin Creates Case</h3>
       <p>
-        The Admin (Inspector) logs in, enters case details, and assigns 
+        The Admin (Inspector) logs in, enters case details, and assigns
         the investigation to specific users.
       </p>
     </div>
@@ -120,7 +124,7 @@
       <i class="fas fa-user-check icon"></i>
       <h3>2. User Views Assignment</h3>
       <p>
-        Assigned Users (Constables) log in to see their cases, 
+        Assigned Users (Constables) log in to see their cases,
         review case details, and prepare for investigation.
       </p>
     </div>
@@ -130,7 +134,7 @@
       <i class="fas fa-video icon"></i>
       <h3>3. Investigation Recording</h3>
       <p>
-        During interrogation, the system generates AI-based questions. 
+        During interrogation, the system generates AI-based questions.
         Video and audio responses are recorded in real time.
       </p>
     </div>
@@ -140,7 +144,7 @@
       <i class="fas fa-brain icon"></i>
       <h3>4. AI Analysis</h3>
       <p>
-        Py-Detect analyses tone, body language, and facial expressions 
+        Py-Detect analyses tone, body language, and facial expressions
         to produce a deception score and behavioural insights.
       </p>
     </div>
@@ -150,7 +154,7 @@
       <i class="fas fa-file-alt icon"></i>
       <h3>5. Report & Decision</h3>
       <p>
-        A final AI-powered prediction report is generated, 
+        A final AI-powered prediction report is generated,
         helping investigators make evidence-based decisions quickly.
       </p>
     </div>

src/app/homepage/homepage.component.ts

@@ -1,6 +1,7 @@
 import { Component, Renderer2, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 import { SignInComponent } from './sign-in/sign-in.component';
 import { SignUpComponent } from './sign-up/sign-up.component';
 
@@ -9,7 +10,7 @@ import { SignUpComponent } from './sign-up/sign-up.component';
   standalone: true,
   templateUrl: './homepage.component.html',
   styleUrls: ['./homepage.component.css'],
-  imports: [CommonModule, SignInComponent, SignUpComponent]
+  imports: [CommonModule, RouterModule, SignInComponent, SignUpComponent]
 })
 export class HomepageComponent implements OnInit, OnDestroy {
   // Keep your existing auth modal flags (reverted)
@@ -56,4 +57,8 @@ export class HomepageComponent implements OnInit, OnDestroy {
   toggleInfo(info: string) {
     this.selectedInfo = (this.selectedInfo === info) ? null : info;
   }
+
+  public navigateHome(): void {
+    this.router.navigate(['/']);
+  }
 }

src/app/infopage/infopage.component.css

@@ -765,7 +765,7 @@ html {
 /* ===== FLOATING NAVIGATION BUTTON ===== */
 .modern-floating-nav-btn {
   position: fixed;
-  bottom: 32px;
+  bottom: 95px;
   right: 32px;
   z-index: 2000;
   display: flex;
@@ -1851,7 +1851,7 @@ html {
 /* ===== FLOATING NAVIGATION BUTTON ===== */
 .modern-floating-nav-btn {
   position: fixed;
-  bottom: 32px;
+  bottom: 95px;
   right: 32px;
   z-index: 2000;
   display: flex;
@@ -2151,3 +2151,15 @@ html {
   margin-bottom: 8px;
 }
 
+
+/* Footer */
+footer {
+  background: linear-gradient(to right, #011022, #01030a);
+  color: #fff;
+  text-align: center;
+  padding: 10px 0px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}

src/app/infopage/infopage.component.html

@@ -29,6 +29,13 @@
         <i class="fas fa-save"></i>
         <span>{{ autoSaveStatus }}</span>
       </div>
+      <!-- View Records Button -->
+      <button class="view-records-btn" style="margin-left:16px;vertical-align:middle;"
+              type="button"
+              (click)="goToRecords()">
+        <i class="fas fa-folder-open"></i>
+        <span>View Records</span>
+      </button>
     </div>
   </div>
 </div>
@@ -58,13 +65,13 @@
 </div>
 
 <!-- AI-Enhanced Job Category Style Subgroup Navigation with Section-Specific Styling -->
-<div class="subgroup-pills" 
+<div class="subgroup-pills"
      [class.crime-section]="currentSection === 'crime'"
      [class.suspect-section]="currentSection === 'suspect'"
      [class.notes-section]="currentSection === 'notes'"
      [@fadeIn]>
   <div class="neural-mesh"></div>
-  <div class="pill ai-subgroup-pill" 
+  <div class="pill ai-subgroup-pill"
        *ngFor="let key of getSubgroups(); let i = index"
        [class.active]="key === currentSubgroup"
        [class.completed]="isSubgroupCompleted(key)"
@@ -83,7 +90,7 @@
 
 <!-- Job Cards Style Layout - Universal Single Card Layout for All Pages -->
 <div class="investigation-container">
-  
+
   <!-- Universal Single Investigation Card -->
   <div class="form-card primary-card" [@cardSlide] #formCard1>
     <div class="card-header compact-card-header">
@@ -159,6 +166,50 @@
                     [attr.aria-label]="'Info for ' + field">
               <i class="fas fa-info"></i>
             </button>
+            <!-- Microphone icon for Remark field -->
+            <ng-container *ngIf="field === 'Remark'">
+              <span style="display:inline-flex;align-items:center;position:relative;">
+                <button type="button"
+                        (mouseenter)="showMicPopup = true"
+                        (mouseleave)="showMicPopup = false"
+                        (click)="toggleRecording()"
+                        style="background:none;border:none;outline:none;cursor:pointer;padding:0;margin-left:6px;">
+                  <i class="fas fa-microphone"
+                     [ngStyle]="{
+                       color: isRecording ? '#e74c3c' : '#3498db',
+                       animation: 'micPulse 1s infinite',
+                       fontSize: '1.2em',
+                       transition: 'color 0.2s'
+                     }"
+                     style="transition:color 0.2s;">
+                  </i>
+                </button>
+                <!-- Popup on hover -->
+                <div *ngIf="showMicPopup"
+                     style="position:absolute;top:120%;left:0;z-index:10;background:#fff;border:1px solid #ccc;padding:8px 12px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);white-space:nowrap;min-width:160px;">
+                  Click to record your remark.<br>Release to stop.<br>Recording is {{ isRecording ? 'ON' : 'OFF' }}.
+                </div>
+                <!-- Inline animation keyframes -->
+                <style>
+                  @keyframes micPulse {
+                    0% {
+                      transform: scale(1);
+                      filter: drop-shadow(0 0 0 #e74c3c);
+                    }
+
+                    50% {
+                      transform: scale(1.2);
+                      filter: drop-shadow(0 0 8px #e74c3c);
+                    }
+
+                    100% {
+                      transform: scale(1);
+                      filter: drop-shadow(0 0 0 #e74c3c);
+                    }
+                  }
+                </style>
+              </span>
+            </ng-container>
           </label>
 
           <!-- Dynamic Field Rendering -->
@@ -235,7 +286,7 @@
 
                     <ng-template #textInput>
                       <!-- Description fields as textarea -->
-                      <textarea *ngIf="field.toLowerCase().includes('description'); else regularInput"
+                      <textarea *ngIf="field.toLowerCase().includes('description') || field === 'Remark'; else regularInput"
                                 class="field-input"
                                 [class.compact]="isCompactField(field)"
                                 [(ngModel)]="formData[field]"
@@ -243,7 +294,10 @@
                                 [placeholder]="getFieldPlaceholder(field)"
                                 [maxlength]="getMaxLength(field)"
                                 rows="3"></textarea>
-
+                      <!-- Recording status for Remark -->
+                      <div *ngIf="field === 'Remark' && isRecording" style="margin-top:4px;color:#e74c3c;font-size:0.95em;">
+                        Recording... Speak now.
+                      </div>
                       <ng-template #regularInput>
                         <input [type]="getInputType(field)"
                                class="field-input"
@@ -274,10 +328,12 @@
 
 <!-- Floating Modern Navigation Button (fixed, no scroll) -->
 <div class="modern-floating-nav-btn">
-  <button *ngIf="!isLastSubgroup()" type="button" class="modern-round-btn next-btn-animated" (click)="nextSubgroup()" [disabled]="!canNextSubgroup()" title="Next">
+  <!-- Next button appears on all pages except the last Remark page under notes -->
+  <button *ngIf="!(isLastSubgroup() && currentSection === 'notes' && currentSubgroup === 'Remark')" type="button" class="modern-round-btn next-btn-animated" (click)="nextSubgroup()" [disabled]="!canNextSubgroup()" title="Next">
     <i class="fas fa-arrow-right"></i>
   </button>
-  <button *ngIf="isLastSubgroup()" type="button" class="modern-round-btn submit-btn-animated" (click)="submitCurrentSection()" title="Submit">
+  <!-- Submit button only on last Remark page under notes -->
+  <button *ngIf="isLastSubgroup() && currentSection === 'notes' && currentSubgroup === 'Remark'" type="button" class="modern-round-btn submit-btn-animated" (click)="submitCurrentSection()" title="Submit">
     <i class="fas fa-paper-plane"></i>
   </button>
 </div>
@@ -294,3 +350,9 @@
   </div>
 </div>
 
+<!-- Footer from provided design -->
+<footer>
+  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+  </footer>
+
+

src/app/infopage/infopage.component.ts

@@ -2,7 +2,7 @@ import { Component, HostListener, ElementRef, ViewChild, AfterViewInit, OnInit,
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { Subject, debounceTime, takeUntil } from 'rxjs';
 import { Router } from '@angular/router';
-import { CaseStoreService } from '../case-store.service';
+import { CaseStoreService } from '../shared/case-store.service';
 
 @Component({
   selector: 'app-infopage',
@@ -52,6 +52,8 @@ import { CaseStoreService } from '../case-store.service';
 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';
@@ -886,7 +888,15 @@ export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
   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') return this.selectedValues['State'] === 'Tamil Nadu' ? this.tamilNaduDistricts : [];
+    if (field === 'District') {
+      if (this.selectedValues['State'] === 'Tamil Nadu') {
+        return this.tamilNaduDistricts;
+      } else if (this.selectedValues['State']) {
+        return [];
+      } else {
+        return [];
+      }
+    }
     return this.selectOptions[field];
   }
 
@@ -990,9 +1000,18 @@ export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   getNextSubgroup(): string {
-    const list = this.getSubgroups();
-    const currentIndex = list.indexOf(this.currentSubgroup);
-    return currentIndex < list.length - 1 ? list[currentIndex + 1] : '';
+    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 {
@@ -1000,30 +1019,50 @@ export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
     return list.indexOf(this.currentSubgroup) === list.length - 1;
   }
 
-  isFirstSubgroup(): boolean {
-    return this.getSubgroups().indexOf(this.currentSubgroup) === 0;
-  }
-
-  canPrevSubgroup(): boolean {
-    return !this.isFirstSubgroup();
-  }
-
   canNextSubgroup(): boolean {
-    return !this.isLastSubgroup();
+    // Enable Next on last subgroup if not notes section
+    if (this.isLastSubgroup()) {
+      return !(this.currentSection === 'notes' && this.currentSubgroup === 'Remark');
+    }
+    return true;
   }
 
-  prevSubgroup(): void {
-    if (!this.canPrevSubgroup()) return;
-    const list = this.getSubgroups();
-    const i = list.indexOf(this.currentSubgroup);
-    this.setSubgroup(list[i - 1]);
+  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();
+    }
   }
 
-  nextSubgroup(): void {
-    if (!this.canNextSubgroup()) return;
-    const list = this.getSubgroups();
-    const i = list.indexOf(this.currentSubgroup);
-    this.setSubgroup(list[i + 1]);
+  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 {
@@ -1039,7 +1078,7 @@ export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
 
     this.performAutoSave();
 
-    // Map flat formData to nested structure expected by addFromInfoForm
+    // Map flat formData to nested structure expected by addOrUpdateFromInfoForm
     const crime = {
       caseId: this.formData['Case ID'] || '',
       dateTime: this.formData['Date & Time (Entry)'] || '',
@@ -1048,6 +1087,7 @@ export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
       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'] || '',
@@ -1064,7 +1104,8 @@ export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
     const notes = {
       status: this.formData['Case Status'] || this.formData['Status'] || 'Open',
       officerInCharge: this.formData['Investigating Officer'] || '',
-      initialFindings: this.formData['Initial Findings'] || ''
+      initialFindings: this.formData['Initial Findings'] || '',
+      verifiedBy: this.formData['Verified By'] || ''
     };
     const legal = {
       witnessStatements: this.formData['Witness Statements'] || '',
@@ -1072,7 +1113,7 @@ export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
       evidence: this.uploadedFiles['Evidence Files'] || []
     };
 
-    this.caseStore.addFromInfoForm({ crime, suspect, notes, legal });
+    this.caseStore.addOrUpdateFromInfoForm({ crime, suspect, notes, legal });
     // Show popup first
     this.showSubmitPopup = true;
   }
@@ -1142,4 +1183,15 @@ export class InfopageComponent implements OnInit, AfterViewInit, OnDestroy {
   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

@@ -240,7 +240,7 @@ body, html {
   align-items: flex-start;
   width: 100%;
   height: 80vh;
-  gap: 32px;
+  gap: 48px; /* Increased gap for more separation */
 }
 
 .question-section {
@@ -256,14 +256,18 @@ body, html {
 }
 
 .big-question {
-  font-size: 3.2rem;
-  font-weight: 900;
-  color: #38bdf8;
+  background: #f0f4ff;
+  border-radius: 18px;
+  box-shadow: 0 2px 16px #2563eb22;
+  padding: 32px 28px;
+  color: #23272b;
+  font-size: 2.2rem;
+  font-weight: 700;
   margin-bottom: 24px;
-  text-align: left;
   min-height: 100px;
   max-width: 700px;
   word-break: break-word;
+  text-align: left;
 }
 
 .big-question-animated {
@@ -275,6 +279,11 @@ body, html {
   100% { text-shadow: 0 0 32px #38bdf8, 0 2px 24px #22222288; }
 }
 
+@keyframes questionFadeIn {
+  from { opacity: 0; transform: translateY(24px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .video-section {
   flex: 1;
   display: flex;
@@ -323,6 +332,30 @@ body, html {
   animation: buttonPulse 1.2s infinite alternate;
 }
 
+.btn-start {
+  background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%);
+  color: #fff;
+  font-size: 1.25rem;
+  font-weight: 700;
+  padding: 0.7rem 2.2rem;
+  border-radius: 999px;
+  box-shadow: 0 4px 24px #6366f188, 0 2px 8px #2563eb44;
+  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+  border: none;
+  outline: none;
+  letter-spacing: 2px;
+  position: relative;
+  overflow: hidden;
+  animation: buttonPulse 1.2s infinite alternate;
+}
+
+.btn-start:hover {
+  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
+  color: #e0e7ff;
+  transform: scale(1.05);
+  box-shadow: 0 6px 32px #6366f1cc;
+}
+
 .btn-submit {
   position: fixed;
   right: 32px;
@@ -370,25 +403,522 @@ body, html {
   z-index: 1000;
 }
 
-/* Reduce Pykara logo size in py-detect topbar */
-header .pykara-logo-small {
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
+/* 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: flex-start;
+  padding: 18px 32px 0 32px;
+  position: relative;
+}
+
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 18px;
 }
 
-/* Pykara logo size for consistency across homepage, py-detect, and infopage */
-.pykara-logo-consistent {
-  width: 120px;
-  height: 120px;
-  object-fit: contain;
+.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;
 }
 
-header .text-lg.font-semibold.tracking-wide.text-white {
-  font-size: 2.8rem;
+.py-detect-title-header {
+  font-size: 2.1rem;
+  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
   font-weight: 900;
-  letter-spacing: 8px;
-  color: #e3f6ff;
+  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;
+  }
+
+/* Footer */
+footer {
+  background: linear-gradient(to right, #011022, #01030a);
+  color: #fff;
+  text-align: center;
+  padding: 10px 0px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+
+/* Left Panel */
+.left-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 32px 24px 32px 32px;
+  min-width: 420px;
+  max-width: 700px;
+}
+.case-meta {
+  margin-bottom: 24px;
+  font-size: 1.1rem;
+  color: #6366f1;
+}
+.case-id-value {
+  color: #fbbf24;
+  font-weight: bold;
+}
+.officer-value {
+  color: #38bdf8;
+  font-weight: bold;
+}
+.progress-label {
+  color: #38bdf8;
+}
+.progress-value {
+  color: #fff;
+  background: #2563eb;
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-weight: 700;
+}
+
+/* Question Card */
+.question-card {
+  background: #f0f4ff;
+  border-radius: 18px;
+  box-shadow: 0 2px 16px #2563eb22;
+  padding: 32px 28px;
+  margin-bottom: 18px;
+  min-height: 120px;
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.question-typewriter {
+  font-size: 2.1rem;
+  font-weight: 700;
+  color: #23272b;
+  min-height: 48px;
+  width: 100%;
+  animation: typewriter 2.2s steps(40, end) 1;
+  white-space: pre-line;
+  overflow: hidden;
+  border-right: 2px solid #2563eb;
+}
+@keyframes typewriter {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+/* Audio Status & Waveform */
+.audio-status {
+  margin-top: 18px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+.recording-text {
+  color: #38bdf8;
+  font-weight: 700;
+  font-size: 1.1rem;
+  letter-spacing: 1px;
+  animation: pulseRecording 1.2s infinite alternate;
+}
+.processing-text {
+  color: #fbbf24;
+  font-weight: 700;
+  font-size: 1.1rem;
+  letter-spacing: 1px;
+  animation: pulseProcessing 1.2s infinite alternate;
+}
+@keyframes pulseRecording {
+  0% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+@keyframes pulseProcessing {
+  0% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+.waveform-animation {
+  width: 48px;
+  height: 24px;
+  display: inline-block;
+  background: none;
+  position: relative;
+}
+.waveform-animation::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: url('data:image/svg+xml;utf8,<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="10" width="4" height="4" rx="2" fill="%2338bdf8"><animate attributeName="height" values="4;16;4" dur="1s" repeatCount="indefinite"/></rect><rect x="10" y="6" width="4" height="12" rx="2" fill="%2338bdf8"><animate attributeName="height" values="12;4;12" dur="1s" repeatCount="indefinite"/></rect><rect x="18" y="10" width="4" height="4" rx="2" fill="%2338bdf8"><animate attributeName="height" values="4;16;4" dur="1s" repeatCount="indefinite"/></rect><rect x="26" y="6" width="4" height="12" rx="2" fill="%2338bdf8"><animate attributeName="height" values="12;4;12" dur="1s" repeatCount="indefinite"/></rect><rect x="34" y="10" width="4" height="4" rx="2" fill="%2338bdf8"><animate attributeName="height" values="4;16;4" dur="1s" repeatCount="indefinite"/></rect><rect x="42" y="6" width="4" height="12" rx="2" fill="%2338bdf8"><animate attributeName="height" values="12;4;12" dur="1s" repeatCount="indefinite"/></rect></svg>') no-repeat center center;
+}
+
+/* Controls Row */
+.controls-row {
+  display: flex;
+  gap: 18px;
+  margin-top: 18px;
+}
+.btn-start-gradient {
+  background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%);
+  color: #fff;
+  font-size: 1.25rem;
+  font-weight: 700;
+  padding: 0.7rem 2.2rem;
+  border-radius: 999px;
+  box-shadow: 0 4px 24px #6366f188, 0 2px 8px #2563eb44;
+  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+  border: none;
+  outline: none;
+  letter-spacing: 2px;
+  position: relative;
+  overflow: hidden;
+  animation: buttonPulse 1.2s infinite alternate;
+}
+.btn-start-gradient:hover {
+  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
+  color: #e0e7ff;
+  transform: scale(1.05);
+  box-shadow: 0 6px 32px #6366f1cc;
+}
+.btn-pause {
+  background: #fbbf24;
+  color: #23272b;
+  font-weight: 700;
+  border-radius: 999px;
+  padding: 0.7rem 1.5rem;
+  border: none;
+  font-size: 1.1rem;
+  box-shadow: 0 2px 8px #fbbf2444;
+  transition: background 0.2s, color 0.2s;
+}
+.btn-skip {
+  background: #e0e7ff;
+  color: #6366f1;
+  font-weight: 700;
+  border-radius: 999px;
+  padding: 0.7rem 1.5rem;
+  border: none;
+  font-size: 1.1rem;
+  box-shadow: 0 2px 8px #6366f144;
+  transition: background 0.2s, color 0.2s;
+}
+
+/* Right Panel */
+.right-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 32px 32px 32px 0;
+  min-width: 400px;
+  max-width: 100vw;
+}
+.video-preview {
+  margin-bottom: 18px;
+  margin-left: 48px; /* Ensure this matches transcript-panel */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 285px;
+  background: #374151;
+  border: 2px dashed #64748b;
+  border-radius: 16px;
+  box-shadow: 0 2px 16px #23272b44;
+  padding: 32px 0;
+  width: 100%;
+  max-width: 995px;
+}
+.camera-video {
+  border-radius: 18px;
+  border: 4px solid #38bdf8;
+  box-shadow: 0 0 24px #38bdf844, 0 0 8px #1e293b88;
+  background: #222;
+  object-fit: cover;
+  margin-bottom: 18px;
+  transition: box-shadow 0.4s, border 0.4s;
+}
+.camera-video-large {
+  width: 60vw;
+  max-width: 800px;
+  height: 40vh;
+  max-height: 60vh;
+}
+.camera-inactive-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 260px;
+  color: #a0aec0;
+}
+.camera-inactive-icon {
+  font-size: 4rem;
+  color: #64748b;
+  margin-bottom: 18px;
+}
+.camera-inactive-title {
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #cbd5e1;
+  margin-bottom: 6px;
+}
+.camera-inactive-sub {
+  font-size: 1.05rem;
+  color: #94a3b8;
+}
+
+/* Transcript Panel */
+.transcript-panel {
+  margin-left: 48px; /* Match video-preview for alignment */
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 2px 12px #6366f122;
+  padding: 18px 18px 18px 18px;
+  width: 100%;
+  max-width: 962px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.transcript-title {
+  font-weight: 700;
+  color: #6366f1;
+  margin-bottom: 8px;
+}
+.transcript-scrollable {
+  overflow-y: auto;
+  max-height: 180px;
+  padding-right: 8px;
+}
+.transcript-line {
+  font-size: 1.05rem;
+  color: #23272b;
+  margin-bottom: 4px;
+}
+
+/* Completion Summary Modal */
+.summary-modal {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(30,41,59,0.85);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.summary-modal-content {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 2px 32px #6366f1cc;
+  padding: 32px 40px;
+  min-width: 420px;
+  max-width: 700px;
+}
+.summary-qa-row {
+  margin-bottom: 18px;
+}
+.summary-question {
+  font-weight: 700;
+  color: #2563eb;
+}
+.summary-answer {
+  color: #23272b;
+  margin-bottom: 4px;
+}
+.summary-duration {
+  color: #6366f1;
+  font-size: 0.98em;
+}
+.btn-close-summary {
+  background: linear-gradient(90deg, #2563eb 0%, #6366f1 100%);
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 700;
+  padding: 0.7rem 2.2rem;
+  border-radius: 999px;
+  box-shadow: 0 4px 24px #6366f188, 0 2px 8px #2563eb44;
+  border: none;
+  outline: none;
+  letter-spacing: 2px;
+  margin-top: 18px;
+  cursor: pointer;
+}
+.btn-close-summary:hover {
+  background: linear-gradient(90deg, #6366f1 0%, #2563eb 100%);
+  color: #e0e7ff;
+  transform: scale(1.05);
+  box-shadow: 0 6px 32px #6366f1cc;
+}
+
+/* Info Card Styles */
+.info-card {
+  background: linear-gradient(135deg, #232b3e 60%, #232b3e 100%);
+  border: 2px solid #38bdf8;
+  border-radius: 14px;
+  box-shadow: 0 2px 16px #38bdf822;
+  padding: 32px 24px;
+  margin-bottom: 32px;
+  max-width: 520px;
+  text-align: center;
+  color: #fff;
+}
+.info-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+.info-desc {
+  font-size: 1.15rem;
+  color: #e2e8f0;
+}
+
+/* Camera Inactive Card Styles */
+.camera-inactive-card {
+  background: linear-gradient(135deg, #232b3e 60%, #232b3e 100%);
+  border: 2px dashed #a0aec0;
+  border-radius: 14px;
+  box-shadow: 0 2px 16px #38bdf822;
+  padding: 48px 24px 32px 24px;
+  margin-bottom: 32px;
+  max-width: 600px;
+  min-height: 320px;
+  text-align: center;
+  color: #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.camera-icon {
+  margin-bottom: 18px;
+  color: #a0aec0;
+}
+
+.button-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 18px;
+  padding: 18px 32px 18px 32px;
+  box-shadow: 0 2px 12px #38bdf844;
+  border-bottom: 1px solid #23272b;
+}
+.header-btn {
   font-family: 'Montserrat', 'Poppins', 'Arial Black', Arial, sans-serif;
-  text-shadow: 0 0 16px #1e293b, 0 0 8px #38bdf8, 0 2px 8px #22222244;
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 2px;
+  background: #fff;
+  color: #2563eb;
+  border: 2px solid #2563eb;
+  border-radius: 12px;
+  padding: 0.55rem 1.3rem;
+  margin: 0 0.3rem;
+  cursor: pointer;
+  box-shadow: 0 2px 16px #38bdf888;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s, border 0.2s;
+}
+.header-btn.active, .header-btn:focus, .header-btn:hover {
+  background: #2563eb;
+  color: #fff;
+  border-color: #38bdf8;
+  box-shadow: 0 2px 24px #bae6fd88;
+}
+.home-btn {
+  background: #2563eb;
+  color: #fff;
+  border-color: #38bdf8;
+  box-shadow: 0 2px 24px #bae6fd88;
+}
+.home-btn:focus, .home-btn:hover {
+  background: #38bdf8;
+  color: #fff;
+}
+.start-btn {
+  background: #fff;
+  color: #2563eb;
+}
+.camera-btn, .voice-btn, .tts-btn {
+  background: #e0e7ff;
+  color: #2563eb;
+  border-color: #2563eb;
+}
+.tts-btn.active {
+  background: #2563eb;
+  color: #fff;
 }

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

@@ -1,57 +1,116 @@
-<div class="h-full bg-gray-900 text-gray-200 flex flex-col">
-  <!-- Topbar Section -->
-  <header class="flex justify-between items-center p-4 border-b border-gray-700 bg-gray-800">
-    <div class="flex items-center space-x-4">
-      <!-- Logo Image and Title -->
-      <img src="./assets/pykara-logo.png" alt="Logo" class="pykara-logo-consistent" />
-      <div class="text-lg font-semibold tracking-wide text-white">Py-Detect</div>
+<!-- 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>
 
-    <div class="flex items-center gap-4">
-      <!-- Home Button -->
-      <button class="home-btn" (click)="navigateHome()">Home</button>
+<!-- Button Bar Below Header -->
+<div class="button-bar">
+  <button class="header-btn home-btn" (click)="navigateHome()">Home</button>
+  <button class="header-btn camera-btn" (click)="startCamera()">Start Camera</button>
+  <button class="header-btn voice-btn" (click)="startVoice()">Start Voice</button>
+  <button class="header-btn tts-btn" [class.active]="ttsEnabled()"> <i class="fas fa-volume-up"></i> TTS On</button>
+</div>
 
-      <!-- Start Button -->
-      <button class="btn-start stylish-font" (click)="start()" [disabled]="startDisabled()" [ngClass]="{'fade-out': startDisabled()}">Start</button>
-      <!-- Stop Button -->
-      <button class="btn-stop stylish-font" (click)="stopAll()" [disabled]="stopDisabled()">Stop</button>
-      <!-- Final Submit Button -->
-      <button class="btn-submit stylish-font" (click)="submitAll()" [disabled]="submitDisabled()">Final Submit</button>
+<main class="main-flex-layout">
+  <!-- Left Panel: Controls & Question -->
+  <section class="left-panel">
+    <div class="case-meta">
+      <div class="case-id">Case ID: <span class="case-id-value">{{ caseId }}</span></div>
+      <div class="officer">Officer: <span class="officer-value">{{ officer }}</span></div>
+      <div class="progress-label">Progress: <span class="progress-value">{{ progress }}%</span></div>
     </div>
-  </header>
-
-  <!-- Main Stage Section -->
-  <main class="main-flex-layout">
-    <!-- Left: Question Section -->
-    <section class="question-section">
-      <div *ngIf="currentQuestion()" class="text-sm text-gray-400 mb-2 stylish-font">Question {{ questionIndex() + 1 }}</div>
-      <div class="big-question stylish-font big-question-animated" style="min-height: 64px;">
-        <ng-container *ngIf="currentQuestion(); else showStart">
-          {{ currentQuestion() }}
-        </ng-container>
-        <ng-template #showStart>
-          <button class="btn-start stylish-font" (click)="start()" [disabled]="startDisabled()" [ngClass]="{'fade-out': startDisabled()}">Start</button>
-        </ng-template>
+    <div class="question-card">
+      <!-- Show Start button if no question is active -->
+      <div *ngIf="!currentQuestionText">
+        <button class="btn-start-gradient" (click)="onStartRecording()">
+          <i class="fas fa-search"></i> Start Investigation
+        </button>
       </div>
-      <div class="flex items-center justify-between mt-6">
-        <span class="badge stylish-font"
-              [ngClass]="{
-            'bg-blue-600': status() === 'asking',
-            'bg-green-600': status() === 'listening',
-            'bg-yellow-600': status() === 'processing'
-          }">
-          {{ status() | uppercase }}
-        </span>
-        <span class="mic" [class.bg-green-600]="micOn()"></span>
-        <span class="recog stylish-font" [class.bg-blue-600]="recognizerReady()">STT</span>
+      <!-- Show question if active -->
+      <div *ngIf="currentQuestionText">
+        <div class="question-number" style="font-size:1.1em;color:#6366f1;font-weight:600;margin-bottom:8px;">
+          Question {{ currentQuestionIndex }} of {{ totalQuestions }}
+        </div>
+        <div class="question-typewriter">
+          {{ currentQuestionText }}
+        </div>
+        <!-- Asking popup -->
+        <div *ngIf="status() === 'asking'" class="popup asking-popup">
+          <span>Asking...</span>
+        </div>
+        <!-- Idle popup -->
+        <div *ngIf="status() === 'idle-wait'" class="popup idle-popup">
+          <span>Waiting for suspect reply...</span>
+        </div>
+        <div *ngIf="status() === 'recording'" class="recording-indicator" style="color:#38bdf8;font-weight:600;margin-top:12px;">Recording...</div>
+       </div>
+      <div class="audio-status">
+        <span *ngIf="isRecording" class="recording-text">Recording...</span>
+        <span *ngIf="isProcessing" class="processing-text">Processing Answer...</span>
+        <div class="waveform-animation" *ngIf="isRecording"></div>
+      </div>
+    </div>
+    <div class="controls-row" *ngIf="currentQuestionText">
+      <button class="btn-pause" (click)="pauseRecording()"><i class="fas fa-pause"></i> Pause</button>
+      <button class="btn-skip" (click)="skipQuestion()"><i class="fas fa-forward"></i> Skip Question</button>
+    </div>
+  </section>
+
+  <!-- Right Panel: Video + Transcript -->
+  <section class="right-panel">
+    <div class="video-preview">
+      <ng-container *ngIf="!videoStream">
+        <div class="camera-inactive-block">
+          <i class="fas fa-video camera-inactive-icon"></i>
+          <div class="camera-inactive-title">Camera Inactive</div>
+          <div class="camera-inactive-sub">Click "Start Camera" to begin video recording</div>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="videoStream">
+        <video #videoElement autoplay muted playsinline class="camera-video camera-video-large"></video>
+        <div class="video-status stylish-font">{{ videoStatus }}</div>
+      </ng-container>
+    </div>
+    <div class="transcript-panel">
+      <div class="transcript-title">Transcription (Live):</div>
+      <div class="transcript-scrollable">
+        <div *ngFor="let line of transcriptLines" class="transcript-line">{{ line }}</div>
       </div>
-    </section>
-    <!-- Right: Camera Section -->
-    <section class="video-section">
-      <video #videoElement autoplay muted playsinline class="camera-video camera-video-large"></video>
-      <div class="video-status stylish-font">{{ videoStatus }}</div>
-    </section>
-  </main>
-  <!-- Back Button moved outside main to be fixed at bottom left -->
-  <button class="back-btn global-bottom-left-btn" (click)="goToInfoPage()">Back</button>
+    </div>
+  </section>
+</main>
+
+<!-- Completion Summary Modal -->
+<div class="summary-modal" *ngIf="showSummary">
+  <div class="summary-modal-content">
+    <h2>Interview Summary</h2>
+    <div *ngFor="let qa of summaryData" class="summary-qa-row">
+      <div class="summary-question">Q: {{ qa.question }}</div>
+      <div class="summary-answer">A: {{ qa.answer }}</div>
+      <div class="summary-duration">Audio: {{ qa.duration }}s</div>
+    </div>
+    <button class="btn-close-summary" (click)="closeSummary()">Close</button>
+  </div>
 </div>
+
+<footer>
+  <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
+</footer>
+

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, signal, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnDestroy, OnInit, signal, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router, NavigationStart } from '@angular/router';
 import { Subscription } from 'rxjs';
@@ -31,7 +31,7 @@ type QAResult = {
 export class PyDetectComponent implements OnInit, OnDestroy {
 
   // ---- UI state ----
-  status = signal<'idle' | 'asking' | 'listening' | 'processing'>('idle');
+  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
@@ -49,7 +49,7 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   // ---- Constructor with Router Injection ----
   private routerSubscription?: Subscription;
 
-  constructor(private router: Router) {
+  constructor(private router: Router, private cdr: ChangeDetectorRef) {
     // Cancel TTS on any navigation away
     this.routerSubscription = this.router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
@@ -108,6 +108,17 @@ export class PyDetectComponent implements OnInit, OnDestroy {
   public videoChunks: Blob[] = [];
   public videoAnswers: Blob[] = [];
 
+  // UI properties for template
+  progress: number = 0;
+  caseId: string = 'CASE-007';
+  officer: string = 'Ganesh';
+  currentQuestionText: string = '';
+  isRecording: boolean = false;
+  isProcessing: boolean = false;
+  transcriptLines: string[] = [];
+  showSummary: boolean = false;
+  summaryData: { question: string; answer: string; duration: number }[] = [];
+
   // Navigate back to the homepage
   navigateHome() {
     if (window.speechSynthesis) {
@@ -243,36 +254,37 @@ export class PyDetectComponent implements OnInit, OnDestroy {
       // 1) Get next question
       const q = await this.fetchNextQuestion();
       this.currentQuestion.set(q);
-      this.status.set('asking');
+      this.status.set('asking'); // Show asking popup
       if (this.ttsEnabled()) {
         await this.speak(q);
       }
-      this.status.set('listening');
-      await this.startVideoRecording();
-      const startedAt = Date.now();
-      let silenceTimer: any;
+      // After question finishes playing, show idle popup for 5 seconds
+      this.status.set('idle-wait'); // Show idle popup
+      await this.sleep(5000); // Wait for suspect reply
+      // Now start speech recognition only
+      this.status.set('recording');
       let userSpoke = false;
       this.transcriptSoFar = '';
       this.startRecognition('en-IN');
-      const speechPromise = new Promise<void>((resolve) => {
+      // Wait for user to start speaking
+      await new Promise<void>((resolve) => {
         const checkSpeech = () => {
-          if (this.transcriptSoFar.trim().length > 0) {
+          if (this.transcriptSoFar.trim().length > 0 && !userSpoke) {
             userSpoke = true;
-            clearTimeout(silenceTimer);
+            // Start video recording and analysis when user speaks
+            this.startVideoRecording();
             resolve();
           } else {
-            silenceTimer = setTimeout(() => resolve(), 5000);
+            setTimeout(checkSpeech, 200);
           }
         };
-        const poll = () => {
-          checkSpeech();
-          if (!userSpoke && silenceTimer && this.nextQuestionLoopRunning) setTimeout(poll, 500);
-        };
-        poll();
+        checkSpeech();
       });
-      await speechPromise;
+      // Stop recognition and video recording after answer window
+      await this.sleep(this.maxAnswerMs);
       this.stopRecognition();
       this.stopVideoRecording();
+      const startedAt = Date.now();
       const { audioUrl, avgPitchHz, avgVolume, transcript, language } =
         await this.captureAnswerWithAnalysis(this.maxAnswerMs);
       const endedAt = Date.now();
@@ -608,4 +620,153 @@ export class PyDetectComponent implements OnInit, OnDestroy {
       this.videoRecorder.stop();
     }
   }
+
+  // UI methods for template
+  onStartInterview() {
+    this.currentQuestionText = this.seedQuestions[0];
+    this.progress = 0;
+    this.isRecording = false;
+    this.isProcessing = false;
+  }
+  pauseRecording() {
+    this.isRecording = false;
+    // Add logic to pause recording
+  }
+  skipQuestion() {
+    const idx = this.seedQuestions.indexOf(this.currentQuestionText);
+    if (idx >= 0 && idx < this.seedQuestions.length - 1) {
+      this.currentQuestionText = this.seedQuestions[idx + 1];
+      this.progress = Math.round(((idx + 2) / this.seedQuestions.length) * 100);
+    } else {
+      this.currentQuestionText = '';
+      this.progress = 100;
+      this.showSummary = true;
+    }
+  }
+  closeSummary() {
+    this.showSummary = false;
+  }
+  onStartRecording() {
+    this.progress = 0;
+    this.transcriptLines = [];
+    this.showSummary = false;
+    this.startQuestionFlow(0);
+    // Play the question using TTS, then wait 2s, then start recognition
+    this.speakQuestion(this.seedQuestions[0], () => {
+      setTimeout(() => {
+        this.startRecognitionWithRecording(0);
+      }, 2000);
+    });
+  }
+
+  speakQuestion(text: string, onEnd?: () => void) {
+    const synth = window.speechSynthesis;
+    if (!synth) {
+      if (onEnd) onEnd();
+      return;
+    }
+    const utter = new SpeechSynthesisUtterance(text);
+    utter.lang = 'en-IN';
+    synth.cancel(); // Stop any previous speech
+    utter.onend = () => { if (onEnd) onEnd(); };
+    synth.speak(utter);
+  }
+
+  startRecognitionWithRecording(idx: number) {
+    const Ctor = window.webkitSpeechRecognition || window.SpeechRecognition;
+    if (!Ctor) return;
+    this.recognition = new Ctor();
+    this.recognition.lang = 'en-IN';
+    this.recognition.continuous = false;
+    this.recognition.interimResults = false;
+    let recordingStarted = false;
+    const startTime = Date.now();
+    // Timeout logic for 5 seconds if no answer
+    const silenceTimeout = setTimeout(() => {
+      if (!recordingStarted) {
+        this.recognition.stop();
+        // Do NOT set isRecording = false here
+        this.status.set('idle');
+        setTimeout(() => this.playNextQuestion(idx + 1), 5000);
+      }
+    }, 5000);
+    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();
+        }
+      }
+      if (!recordingStarted) {
+        recordingStarted = true;
+        clearTimeout(silenceTimeout); // Cancel timeout if answer detected
+      }
+      this.transcriptLines.push(finalText);
+    };
+    this.recognition.onend = () => {
+      this.isRecording = false;
+      this.status.set('processing');
+      setTimeout(() => this.playNextQuestion(idx + 1), 5000);
+    };
+    this.recognition.onerror = () => {
+      this.isRecording = false;
+      this.status.set('idle');
+    };
+    this.recognition.start();
+  }
+
+  playNextQuestion(idx: number) {
+    if (idx >= this.seedQuestions.length) {
+      this.currentQuestionText = '';
+      this.progress = 100;
+      this.showSummary = true;
+      this.status.set('idle');
+      this.cdr.detectChanges();
+      this.isRecording = false;
+      return;
+    }
+    this.currentQuestionText = this.seedQuestions[idx];
+    this.cdr.detectChanges();
+    this.status.set('asking'); // Set status to asking
+    this.isRecording = false;  // Not recording yet
+    this.speakQuestion(this.seedQuestions[idx], () => {
+      // After TTS, wait 5 seconds, then start recording
+      setTimeout(() => {
+        this.status.set('recording');
+        this.isRecording = true;
+        this.startRecognitionWithRecording(idx);
+      }, 5000);
+    });
+  }
+
+  startQuestionFlow(idx: number) {
+    if (idx >= this.seedQuestions.length) {
+      this.currentQuestionText = '';
+      this.progress = 100;
+      this.showSummary = true;
+      this.status.set('idle');
+      return;
+    }
+    this.currentQuestionText = this.seedQuestions[idx];
+    this.status.set('asking');
+    setTimeout(() => {
+      this.status.set('recording');
+      this.isRecording = true;
+      this.isProcessing = false;
+      this.transcriptLines = [];
+      this.startRecognition('en-IN');
+    }, 1200); // 1.2s delay for "Asking..."
+  }
+
+  get currentQuestionIndex(): number {
+    return this.seedQuestions.indexOf(this.currentQuestionText) + 1;
+  }
+  get totalQuestions(): number {
+    return this.seedQuestions.length;
+  }
+  startVoice() {
+    // Add logic to start voice recording or recognition here
+    this.status.set('recording');
+  }
 }

src/app/recordpage/recordpage.component.css

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

src/app/recordpage/recordpage.component.html

@@ -95,8 +95,8 @@
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let c of rows, let i = index">
-        <td>{{ i + 1 }}</td>
+      <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"
@@ -117,16 +117,16 @@
         <td>{{ c.lastUpdated ? (c.lastUpdated | date:'M/d/yyyy HH:mm') : '—' }}</td>
         <td>{{ c.verifiedBy || '—' }}</td>
         <td>
-          <button class="icon-btn verify" (click)="verifyCase(i)" title="Verify">
+          <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, i)" title="View">
+          <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, i)" title="Edit">
+          <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(i)" title="Delete">
+          <button class="icon-btn delete" (click)="deleteCase((currentPage - 1) * pageSize + i)" title="Delete">
             <i class="fas fa-trash"></i>
           </button>
         </td>
@@ -136,6 +136,76 @@
       </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>
+</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>
 
 <!-- Modal -->
@@ -154,26 +224,37 @@
       <ng-container *ngFor="let sectionKey of ['crime', 'suspect', 'notes']">
         <div class="section-block">
           <div class="section-title">{{ sectionKey === 'crime' ? 'Crime Details' : sectionKey === 'suspect' ? 'Suspect Details' : 'Evidence and Documents' }}</div>
-          <div class="subgroup-pills">
-            <button *ngFor="let subgroup of getSubgroups(sectionKey)"
-                    [class.active]="selectedSubgroup[sectionKey] === subgroup"
-                    (click)="selectSubgroup(sectionKey, subgroup)">
-              {{ subgroup }}
-            </button>
-          </div>
-          <div class="fields-grid">
-            <ng-container *ngFor="let field of getFieldsForSubgroup(sectionKey, selectedSubgroup[sectionKey])">
-              <div class="field-card">
-                <span>{{ field }}</span>
-                <b>{{ getFieldValue(sc, sectionKey, field) }}</b>
-              </div>
-            </ng-container>
-          </div>
+          <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>
+          </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>
   <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>

src/app/recordpage/recordpage.component.ts

@@ -11,6 +11,23 @@ import { InfopageComponent } from '../infopage/infopage.component';
 export class RecordpageComponent implements OnInit {
   cases: PoliceCase[] = [];
 
+  // Pagination
+  currentPage: number = 1;
+  pageSize: number = 5; // Change to 20 if you want 20 per page
+  get totalPages(): number {
+    return Math.ceil(this.filteredCases.length / this.pageSize) || 1;
+  }
+  get pagedCases(): PoliceCase[] {
+    const start = (this.currentPage - 1) * this.pageSize;
+    return this.filteredCases.slice(start, start + this.pageSize);
+  }
+  setPage(page: number) {
+    if (page < 1 || page > this.totalPages) return;
+    this.currentPage = page;
+  }
+  nextPage() { this.setPage(this.currentPage + 1); }
+  prevPage() { this.setPage(this.currentPage - 1); }
+
   // modal
   showDetails = false;
   selectedCase: PoliceCase | null = null;
@@ -227,6 +244,7 @@ export class RecordpageComponent implements OnInit {
       (!this.filterLocation || c.police?.address === this.filterLocation) &&
       (!this.filterOfficer || c.police?.name === this.filterOfficer)
     );
+    this.currentPage = 1; // Reset to first page on filter
   }
 
   resetFilters() {
@@ -278,19 +296,21 @@ export class RecordpageComponent implements OnInit {
 
   // Update your table to use filteredCases instead of rows
   get rows(): PoliceCase[] {
-    return this.filteredCases;
+    return this.pagedCases;
   }
 
   openDetails(c: PoliceCase, i: number): void {
     this.selectedCase = c;
     this.selectedIndex = i;
     this.showDetails = true;
+    document.body.classList.add('modal-open');
   }
 
   closeDetails(): void {
     this.showDetails = false;
     this.selectedCase = null;
     this.selectedIndex = -1;
+    document.body.classList.remove('modal-open');
   }
 
   editCase(c: PoliceCase, i: number): void {
@@ -336,4 +356,54 @@ export class RecordpageComponent implements OnInit {
   get closedCases(): number {
     return this.cases.filter(c => c.status === 'Closed').length;
   }
+
+  getPagination(): (number | string)[] {
+    const pages: (number | string)[] = [];
+    const total = this.totalPages;
+    if (total <= 7) {
+      for (let i = 1; i <= total; i++) pages.push(i);
+    } else {
+      if (this.currentPage <= 4) {
+        for (let i = 1; i <= 5; i++) pages.push(i);
+        pages.push('...');
+        pages.push(total);
+      } else if (this.currentPage >= total - 3) {
+        pages.push(1);
+        pages.push('...');
+        for (let i = total - 4; i <= total; i++) pages.push(i);
+      } else {
+        pages.push(1);
+        pages.push('...');
+        for (let i = this.currentPage - 1; i <= this.currentPage + 1; i++) pages.push(i);
+        pages.push('...');
+        pages.push(total);
+      }
+    }
+    return pages;
+  }
+
+  goToPage(page: string | number) {
+    if (typeof page === 'number') {
+      this.setPage(page);
+    }
+  }
+
+  pageSizeOptions: number[] = [5, 10, 20, 50];
+  onPageSizeChange(size: number) {
+    this.pageSize = size;
+    this.currentPage = 1;
+  }
+  get resultsStart(): number {
+    return this.filteredCases.length === 0 ? 0 : (this.currentPage - 1) * this.pageSize + 1;
+  }
+  get resultsEnd(): number {
+    return Math.min(this.currentPage * this.pageSize, this.filteredCases.length);
+  }
+  get resultsTotal(): number {
+    return this.filteredCases.length;
+  }
+
+  goToDetect(caseId: string): void {
+    this.router.navigate(['/py-detect'], { state: { caseId } });
+  }
 }

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

@@ -4,7 +4,7 @@ export interface PoliceCase {
   // Optional metadata used by your UI
   caseId?: string;
   dateTime?: string;
-  status?: 'Open' | 'Under Investigation' | 'Closed';
+  status?: 'Open' | 'Under Investigation' | 'Closed' | 'Archived';
   crime: string;
   police: {
     name: string;
@@ -23,6 +23,12 @@ export interface PoliceCase {
     occupation?: string;
   };
   lastUpdated?: string;
+  nextAction?: string;
+  casePriority?: 'High' | 'Medium' | 'Low';
+  reportedBy?: string;
+  verifiedBy?: string;
+  briefDescription?: string;
+  caseCategory?: string;
 }
 
 @Injectable({ providedIn: 'root' })
@@ -53,6 +59,15 @@ export class CaseStoreService {
     }
   }
 
+  /** Update by caseId */
+  updatePoliceCaseById(caseId: string, updated: PoliceCase): void {
+    const idx = this.cases.findIndex(c => c.caseId === caseId);
+    if (idx !== -1) {
+      this.cases[idx] = updated;
+      this.save();
+    }
+  }
+
   /**
    * Convenience: map Info page reactive-form value to PoliceCase and store it.
    * Call with the whole this.form.value from InfopageComponent.
@@ -88,6 +103,45 @@ export class CaseStoreService {
     this.addPoliceCase(mapped);
   }
 
+  /** Add or update from Info page form */
+  addOrUpdateFromInfoForm(formValue: any): void {
+    const crime = (formValue && formValue.crime) || {};
+    const suspect = (formValue && formValue.suspect) || {};
+    const notes = (formValue && formValue.notes) || {};
+    const mapped: PoliceCase = {
+      caseId: crime.caseId || '',
+      dateTime: crime.dateTime || '',
+      status: notes.status || 'Open',
+      crime: crime.crimeType || 'Unknown',
+      police: {
+        name: notes.officerInCharge || '—',
+        station: '—',
+        address: crime.location || '—',
+        pincode: '',
+        dutyPerson: notes.officerInCharge || '—',
+        modeOfCrime: crime.crimeType || '—',
+        information: notes.initialFindings || ''
+      },
+      accused: {
+        name: suspect.fullName || '—',
+        age: suspect.age || '—',
+        gender: suspect.gender || '—',
+        address: suspect.address || '—',
+        occupation: suspect.alias || ''
+      },
+      reportedBy: crime.reportedBy || '',
+      verifiedBy: notes.verifiedBy || '',
+      briefDescription: crime.briefDescription || '',
+    };
+    const idx = this.cases.findIndex(c => c.caseId === mapped.caseId);
+    if (idx !== -1) {
+      this.cases[idx] = mapped;
+      this.save();
+    } else {
+      this.addPoliceCase(mapped);
+    }
+  }
+
   /** Persist to localStorage (safe to keep; remove if not needed) */
   private save(): void {
     try { localStorage.setItem(this.storageKey, JSON.stringify(this.cases)); } catch { }