cbsnexora/src/app/investment/investment-diary/investment-diary.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 · DUE DATE DIARY</div>
      <h1 class="pg-title">Due Date Diary</h1>
      <p class="pg-sub">
        Coupons, 31 Mar / 30 Sep provisions, premium amortisation, maturities and FD interest due in a period, with what
        is posted and what is still pending.
      </p>
    </div>
  </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</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>
      <label class="inv-form-field">
        <span>Status</span>
        <select [(ngModel)]="status">
          <option value="">All</option>
          <option value="PENDING">Pending</option>
          <option value="POSTED">Posted</option>
        </select>
      </label>
    </div>
    <div class="diary-actions">
      <button type="button" class="pg-btn pg-btn--ghost" (click)="setRange(7)">Next 7 days</button>
      <button type="button" class="pg-btn pg-btn--ghost" (click)="setRange(30)">Next 30 days</button>
      <button type="button" class="pg-btn pg-btn--ghost" (click)="setRange(90)">Next 90 days</button>
      <button type="button" class="pg-btn pg-btn--ghost" (click)="showOverdue()">Overdue</button>
      <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 (diary; as d) {
    <div class="diary-summary">
      <div class="diary-tile">
        <span class="diary-tile-l">Entries</span><span class="diary-tile-v">{{ rows.length }}</span>
      </div>
      <div class="diary-tile">
        <span class="diary-tile-l">Pending</span><span class="diary-tile-v">{{ d.pendingCount }}</span>
      </div>
      <div class="diary-tile" [class.diary-tile--bad]="d.overdueCount > 0">
        <span class="diary-tile-l">Overdue</span><span class="diary-tile-v">{{ d.overdueCount }}</span>
      </div>
      <div class="diary-tile">
        <span class="diary-tile-l">Money expected (not yet received)</span
        ><span class="diary-tile-v">₹{{ d.expectedInflow | number: '1.2-2' }}</span>
      </div>
    </div>

    <div class="pg-card">
      <div class="pos-section-label">{{ d.fromDate }} to {{ d.toDate }} · as on {{ d.asOnDate }}</div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Due</th>
            <th>Investment</th>
            <th>Deal No</th>
            <th>Particulars</th>
            <th class="num">Amount</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @for (r of rows; track r.instrument + r.refId + r.kind + r.date) {
            <tr>
              <td>{{ r.date }}</td>
              <td>{{ kindLabels[r.kind] }}</td>
              <td>{{ r.instrument === 'FD' ? 'FD' : 'Govt Security / Bond' }}</td>
              <td>
                <span class="pg-chip">{{ r.dealNo }}</span>
              </td>
              <td>{{ r.particulars }}</td>
              <td class="num">
                {{ r.amount !== null && r.amount !== undefined ? '₹' + (r.amount | number: '1.2-2') : '—' }}
              </td>
              <td>
                <span class="inv-badge" [ngClass]="'diary-badge--' + r.status.toLowerCase()">{{ statusLabel(r) }}</span>
                @if (r.voucherNo) {
                  <br /><small>{{ r.voucherNo }}</small>
                }
              </td>
              <td>
                @if (r.status !== 'POSTED') {
                  <a class="diary-open" [routerLink]="link(r).path" [queryParams]="link(r).query">Open →</a>
                }
              </td>
            </tr>
          } @empty {
            <tr>
              <td colspan="8" class="pg-empty">Nothing falls due in this period.</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
</div>