view-reciept.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<mat-card class="container">
  <div class="back-button">
    <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">
      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{ 'labels.buttons.Back' | translate }}
    </button>
  </div>

  <div *ngIf="pentahoUrl; else noData" class="pdf-container">
    <iframe [src]="pentahoUrl" class="pdf-iframe"></iframe>
  </div>

  <ng-template #noData>
    <div class="error-message">
      <h3>{{ 'labels.heading.Unable to Load Receipt' | translate }}</h3>
      <p>{{ 'labels.text.The transaction receipt could not be loaded. This may be due to:' | translate }}</p>
      <ul>
        <li>{{ 'labels.text.Missing or incomplete report configuration' | translate }}</li>
        <li>{{ 'labels.text.Report generation service unavailable' | translate }}</li>
        <li>{{ 'labels.text.Invalid transaction data' | translate }}</li>
      </ul>
      <p><strong>{{ 'labels.text.Please contact your system administrator for assistance.' | translate }}</strong></p>
      <p class="console-hint">{{ 'labels.text.Technical details may be available in the browser console (F12).' | translate }}</p>
    </div>
  </ng-template>
</mat-card>