KYC management: stage-wise notices, pagination, RD base chart

src/app/rbi-circulars/aml-rules/aml-flagged-transactions/aml-flagged-transactions.component.ts

@@ -7,7 +7,7 @@
  */
 
 /** Angular Imports */
-import { Component, OnInit, AfterViewInit, OnDestroy, inject, ViewChild } from '@angular/core';
+import { Component, OnInit, AfterViewInit, OnDestroy, inject, ViewChild, TemplateRef } from '@angular/core';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
 import { MatIconModule } from '@angular/material/icon';
@@ -167,9 +167,24 @@ export class AmlFlaggedTransactionsComponent implements OnInit, AfterViewInit, O
    * and the one state the flag existed to make visible — this one is actually being worked — became meaningless.
    */
   toggleExpanded(alert: any): void {
-    this.expandedId = this.expandedId === alert.id ? null : alert.id;
-    // Ticks belong to the alert they were made on, not to whichever pane is open next.
+    this.expandedId = alert.id;
+    // Ticks belong to the alert they were made on, not to whichever popup is open next.
     this.selectedRuleCodes.clear();
+    this.dialog
+      .open(this.rulesDialogTpl, { width: '780px', maxWidth: '95vw', maxHeight: '90vh', autoFocus: false })
+      .afterClosed()
+      .subscribe(() => {
+        this.expandedId = null;
+        this.selectedRuleCodes.clear();
+      });
+  }
+
+  /** The popup that lists every rule the open alert tripped. */
+  @ViewChild('rulesDialog') rulesDialogTpl!: TemplateRef<unknown>;
+
+  /** The alert the popup is showing, looked up fresh so a feed refresh behind it does not leave it stale. */
+  get expandedAlert(): any {
+    return this.alerts.data.find((a: any) => a.id === this.expandedId) ?? null;
   }
 
   isExpanded(alert: any): boolean {