WEB-525 No report is displayed for Savings transactions (#2931)

src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.html

@@ -5,5 +5,21 @@
     </button>
   </div>
 
-  <iframe [src]="pentahoUrl" frameborder="0" width="100%" height="600px;"></iframe>
+  <div *ngIf="pentahoUrl; else noData" class="pdf-container">
+    <iframe [src]="pentahoUrl" class="pdf-iframe"></iframe>
+  </div>
+
+  <ng-template #noData>
+    <div class="error-message">
+      <h3>Unable to Load Receipt</h3>
+      <p>The transaction receipt could not be loaded. This may be due to:</p>
+      <ul>
+        <li>Missing or incomplete report configuration</li>
+        <li>Report generation service unavailable</li>
+        <li>Invalid transaction data</li>
+      </ul>
+      <p><strong>Please contact your system administrator for assistance.</strong></p>
+      <p class="console-hint">Technical details may be available in the browser console (F12).</p>
+    </div>
+  </ng-template>
 </mat-card>

src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.scss

@@ -1,8 +1,50 @@
 .container {
   max-width: 50rem;
+  margin: 0 auto;
 
   .back-button {
-    max-height: 2%;
+    margin-bottom: 1rem;
-    margin-bottom: 2%;
+  }
+
+  .pdf-container {
+    width: 100%;
+    height: calc(100vh - 250px);
+    min-height: 600px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #525659;
+
+    .pdf-iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  }
+
+  .error-message {
+    padding: 2rem;
+    text-align: center;
+    background-color: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+    margin: 1rem 0;
+
+    h3 {
+      color: #856404;
+      margin-bottom: 1rem;
+    }
+
+    ul {
+      text-align: left;
+      display: inline-block;
+      margin: 1rem 0;
+    }
+
+    .console-hint {
+      font-size: 0.875rem;
+      color: #6c757d;
+      margin-top: 1rem;
+    }
   }
 }

src/app/savings/savings-account-view/transactions/view-reciept/view-reciept.component.ts

@@ -1,9 +1,10 @@
 /** Angular Imports */
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { HttpResponse } from '@angular/common/http';
 
 /**
  * View Transaction Reciept Component
@@ -17,14 +18,16 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
     FaIconComponent
   ]
 })
-export class ViewRecieptComponent implements OnInit {
+export class ViewRecieptComponent implements OnInit, OnDestroy {
   private sanitizer = inject(DomSanitizer);
   private route = inject(ActivatedRoute);
 
   /** trusted resource url for pentaho output */
-  pentahoUrl: any;
+  pentahoUrl: SafeResourceUrl | null = null;
   /** Transaction Reciept Data */
-  transactionRecieptData: any;
+  transactionRecieptData: HttpResponse<Blob>;
+  /** Blob URL for cleanup */
+  private blobUrl: string | null = null;
 
   /**
    * Fetches transaction reciept `resolve`
@@ -32,15 +35,30 @@ export class ViewRecieptComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    */
   constructor() {
-    this.route.data.subscribe((data: { savingsTransactionReciept: any }) => {
+    this.route.data.subscribe((data: { savingsTransactionReciept: HttpResponse<Blob> }) => {
       this.transactionRecieptData = data.savingsTransactionReciept;
     });
   }
 
   ngOnInit() {
+    if (!this.transactionRecieptData || !this.transactionRecieptData.body) {
+      return;
+    }
+
     const contentType = this.transactionRecieptData.headers.get('Content-Type');
     const file = new Blob([this.transactionRecieptData.body], { type: contentType });
-    const filecontent = URL.createObjectURL(file);
+
-    this.pentahoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(filecontent);
+    if (file.size === 0) {
+      return;
+    }
+
+    this.blobUrl = URL.createObjectURL(file);
+    this.pentahoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.blobUrl);
+  }
+
+  ngOnDestroy() {
+    if (this.blobUrl) {
+      URL.revokeObjectURL(this.blobUrl);
+    }
   }
 }