cbsnexora/src/app/investment/investment-interest-report/investment-interest-report.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="pg">
  <header class="pg-head">
    <div>
      <div class="pg-eyebrow">TREASURY · INVESTMENT · REPORTS</div>
      <h1 class="pg-title">Total Interest Received &amp; Receivable</h1>
      <p class="pg-sub">
        Interest received from Govt Securities, bonds and FDs in the period, and interest earned up to the To date that
        has not come in yet.
      </p>
    </div>
    <button type="button" class="pg-btn pg-btn--ghost" [disabled]="!report || generating" (click)="exportExcel()">
      {{ generating ? 'Generating…' : 'Export to Excel' }}
    </button>
  </header>

  <div class="pg-card">
    <div class="inv-form-grid">
      <label class="inv-form-field"
        ><span>From</span><mifosx-date-ddmmyyyy [(ngModel)]="fromDate"></mifosx-date-ddmmyyyy
      ></label>
      <label class="inv-form-field"
        ><span>To (receivable as on)</span><mifosx-date-ddmmyyyy [(ngModel)]="toDate"></mifosx-date-ddmmyyyy
      ></label>
      <label class="inv-form-field">
        <span>Investment</span>
        <select [(ngModel)]="instrument">
          <option value="">All</option>
          <option value="SECURITY">Govt Security / Bond</option>
          <option value="FD">FD with banks</option>
        </select>
      </label>
    </div>
    <div class="diary-actions">
      <button type="button" class="pg-btn pg-btn--primary" [disabled]="loading" (click)="load()">
        {{ loading ? 'Loading…' : 'Show' }}
      </button>
    </div>
    @if (error) {
      <p class="diary-error">{{ error }}</p>
    }
  </div>

  @if (report; as r) {
    <div class="diary-summary">
      <div class="diary-tile">
        <span class="diary-tile-l">Received</span
        ><span class="diary-tile-v">₹{{ totals.received | number: '1.2-2' }}</span>
      </div>
      <div class="diary-tile">
        <span class="diary-tile-l">Receivable</span
        ><span class="diary-tile-v">₹{{ totals.receivable | number: '1.2-2' }}</span>
      </div>
      <div class="diary-tile">
        <span class="diary-tile-l">Of which provisioned (100603)</span
        ><span class="diary-tile-v">₹{{ totals.provisioned | number: '1.2-2' }}</span>
      </div>
      <div class="diary-tile">
        <span class="diary-tile-l">Total</span><span class="diary-tile-v">₹{{ totals.total | number: '1.2-2' }}</span>
      </div>
    </div>

    <div class="pg-card">
      <div class="pos-section-label">
        {{ r.fromDate }} to {{ r.toDate }} · received in the period, receivable as on {{ r.toDate }}
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Investment</th>
            <th>Deal No</th>
            <th>Particulars</th>
            <th>Status</th>
            <th class="num">Principal / Face Value</th>
            <th class="num">Rate</th>
            <th class="num col-in">Received</th>
            <th class="num">Receivable</th>
            <th class="num">Of which provisioned</th>
            <th class="num">Total</th>
          </tr>
        </thead>
        <tbody>
          @for (x of rows; track x.instrument + x.refId) {
            <tr>
              <td>{{ x.instrument === 'FD' ? 'FD' : 'Govt Security / Bond' }}</td>
              <td>
                <span class="pg-chip">{{ x.dealNo }}</span>
              </td>
              <td>{{ x.particulars }}</td>
              <td>{{ x.status }}</td>
              <td class="num">₹{{ x.principal | number: '1.2-2' }}</td>
              <td class="num">{{ x.rate !== null && x.rate !== undefined ? x.rate + '%' : '—' }}</td>
              <td class="num col-in">₹{{ x.received | number: '1.2-2' }}</td>
              <td class="num">₹{{ x.receivable | number: '1.2-2' }}</td>
              <td class="num">₹{{ x.provisioned | number: '1.2-2' }}</td>
              <td class="num">₹{{ x.total | number: '1.2-2' }}</td>
            </tr>
          } @empty {
            <tr>
              <td colspan="10" class="pg-empty">No interest received or receivable in this period.</td>
            </tr>
          }
        </tbody>
        @if (rows.length) {
          <tfoot>
            <tr class="report-total">
              <td colspan="6">Total</td>
              <td class="num col-in">₹{{ totals.received | number: '1.2-2' }}</td>
              <td class="num">₹{{ totals.receivable | number: '1.2-2' }}</td>
              <td class="num">₹{{ totals.provisioned | number: '1.2-2' }}</td>
              <td class="num">₹{{ totals.total | number: '1.2-2' }}</td>
            </tr>
          </tfoot>
        }
      </table>
    </div>
  }
</div>