cbsnexora/src/app/digital/sender-history-dialog/sender-history-dialog.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/.
-->

<div class="shd-root">
  <!-- HEADER -->
  <div class="shd-head">
    <div class="shd-head-l">
      <fa-icon icon="chart-line" class="shd-head-ic"></fa-icon>
      <div>
        <h2 class="shd-head-t">{{ data.senderName }} <small>· NEFT / RTGS · Today</small></h2>
        <div class="shd-head-s">
          @if (data.senderAccountNo) {
            <span class="mono">{{ data.senderAccountNo }}</span> ·
          }
          <strong>{{ totalCount | number }}</strong> txns today &middot;
          <strong>₹{{ totalAmount | number: '1.0-0' }}</strong>
        </div>
      </div>
    </div>
    <button type="button" class="shd-x" (click)="close()" matTooltip="Close">
      <fa-icon icon="times"></fa-icon>
    </button>
  </div>

  <!-- KPI STRIP -->
  <div class="shd-kpis">
    <div class="shd-kpi shd-kpi--blue">
      <div class="shd-kpi-n">{{ totalCount | number }}</div>
      <div class="shd-kpi-l">Total</div>
    </div>
    <div class="shd-kpi shd-kpi--teal">
      <div class="shd-kpi-n">₹{{ totalAmount | number: '1.0-0' }}</div>
      <div class="shd-kpi-l">Value</div>
    </div>
    <div class="shd-kpi shd-kpi--green">
      <div class="shd-kpi-n">{{ settledCount | number }}</div>
      <div class="shd-kpi-l">Settled ({{ successRate | number: '1.1-1' }}%)</div>
    </div>
    <div class="shd-kpi shd-kpi--amber">
      <div class="shd-kpi-n">{{ pendingCount | number }}</div>
      <div class="shd-kpi-l">In-Flight</div>
    </div>
    <div class="shd-kpi shd-kpi--red">
      <div class="shd-kpi-n">{{ returnedCount | number }}</div>
      <div class="shd-kpi-l">Returned</div>
    </div>
  </div>

  <!-- TABLE -->
  <div class="shd-body">
    @if (filteredTxns.length === 0) {
      <div class="shd-empty">
        <fa-icon icon="info-circle"></fa-icon>
        <div>
          <strong>No NEFT / RTGS transactions today for this sender.</strong>
          <p>This view shows only today's outward transfers. Older history isn't included here.</p>
        </div>
      </div>
    } @else {
      <div class="shd-table-wrap">
        <table class="shd-table">
          <thead>
            <tr>
              <th>UTR</th>
              <th>Beneficiary</th>
              <th>IFSC</th>
              <th>Type</th>
              <th class="num">Amount</th>
              <th>Value Date</th>
              <th>State</th>
              <th>Sent</th>
            </tr>
          </thead>
          <tbody>
            @for (t of filteredTxns; track t.utrNumber) {
              <tr>
                <td class="mono small">{{ t.utrNumber }}</td>
                <td>
                  <div>{{ t.beneName }}</div>
                  <div class="mono small muted">{{ t.beneAcc }} · {{ t.beneBank }}</div>
                </td>
                <td class="mono small">{{ t.beneIfsc }}</td>
                <td>
                  <span
                    class="shd-pill mini"
                    [class.shd-pill--purple]="t.paymentType === 'RTGS'"
                    [class.shd-pill--blue]="t.paymentType === 'NEFT'"
                  >
                    {{ t.paymentType }}
                  </span>
                </td>
                <td class="num">
                  <strong>₹{{ t.amount | number: '1.2-2' }}</strong>
                </td>
                <td>{{ t.valueDate | date: 'd MMM y' }}</td>
                <td>
                  <span class="shd-pill mini" [ngClass]="'shd-pill--' + stateColor(t.processingState)">
                    {{ t.processingState }}
                  </span>
                  @if (t.returnCode) {
                    <div class="small muted">{{ t.returnCode }} · {{ t.returnReason }}</div>
                  }
                </td>
                <td class="mono small">{{ t.sentTimestamp }}</td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    }
  </div>
</div>