cbsnexora/src/app/home/dashboard/crr-slr-dialog/crr-slr-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="crr-dialog">
  <!-- Header -->
  <div class="dialog-header">
    <div class="header-left">
      <div class="header-badge">
        <fa-icon icon="university"></fa-icon>
        RBI Liabilities Register
      </div>
      <h2 class="dialog-title">Demand &amp; Time Liabilities</h2>
      <p class="dialog-sub">What the bank owes, and what it must hold against it</p>
    </div>
    <div class="header-right">
      <!-- The close being reported, and under it the close the ratios are charged on. Two dates,
           because they are not the same day and the requirement belongs to the earlier one. -->
      <div class="as-of-box">
        <strong>{{ reportingDateStr || '—' }}</strong>
        <span>
          Fortnight close
          @if (baseDateStr) {
            &middot; charged on {{ baseDateStr }}
          }
        </span>
      </div>
      <a
        class="rbi-circular-btn"
        href="https://www.rbi.org.in/scripts/bs_circularindexdisplay.aspx"
        target="_blank"
        rel="noopener noreferrer"
        matTooltip="View RBI Circulars"
      >
        <fa-icon icon="external-link-alt"></fa-icon>
        RBI Circulars
      </a>
      <button class="close-btn" (click)="close()" matTooltip="Close">
        <fa-icon icon="times"></fa-icon>
      </button>
    </div>
  </div>

  <!-- What the liabilities are, and what they come to. Four cards rather than five: the CRR
       requirement that used to sit here is on the compliance bar below, beside what is held
       against it, where it answers a question rather than repeating one. -->
  <div class="summary-row">
    <div class="summary-card sc-demand">
      <div class="sc-label">Demand liabilities</div>
      <div class="sc-value" [title]="money(totalDemand)">{{ tile(totalDemand) }}</div>
      <div class="sc-sub">Repayable on demand</div>
    </div>
    <div class="summary-card sc-time">
      <div class="sc-label">Time liabilities</div>
      <div class="sc-value" [title]="money(totalTime)">{{ tile(totalTime) }}</div>
      <div class="sc-sub">Repayable on maturity</div>
    </div>
    <div class="summary-card sc-asset">
      <div class="sc-label">Held with other banks</div>
      <!-- Scaled on the tile, exact on hover: the card is read for order of magnitude, but the
           figure behind it should never be more than a pointer away. -->
      <div class="sc-value" [title]="money(totalBankingAssets)">
        {{ tile(totalBankingAssets) }}
      </div>
      <!-- These assets net against what the bank OWES other banks, not against the whole base, and
           the netting floors at zero — so where they exceed what is owed, nothing comes off at all.
           Said plainly, because "deducted from NDTL" was being printed on a card where no
           deduction had been made. -->
      <div class="sc-sub" [class.dn]="bankingAssetsNet">
        {{ bankingAssetsNet ? 'Reduces the base below' : 'More than we owe banks — base unchanged' }}
      </div>
    </div>
    <div class="summary-card sc-ndtl">
      <div class="sc-label">NDTL &mdash; the base</div>
      <div class="sc-value" [title]="money(ndtl)">{{ tile(ndtl) }}</div>
      <div class="sc-sub">Demand + time, net of bank balances</div>
    </div>
  </div>

  <!-- Why the figures are not there, in the return's own words. A dashboard that simply shows
       dashes sends an administrator looking for a fault in the dashboard. -->
  <div class="unavailable-note" *ngIf="unavailable">
    <fa-icon icon="exclamation-triangle"></fa-icon>
    {{ unavailable }}
  </div>

  <!-- Tab Navigation -->
  <div class="tab-nav">
    <button class="tab-btn" [class.active]="activeTab === 'demand'" (click)="activeTab = 'demand'">
      <span class="tab-pill pill-demand">01</span> Demand Liabilities
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'time'" (click)="activeTab = 'time'">
      <span class="tab-pill pill-time">02</span> Time Liabilities
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'assets'" (click)="activeTab = 'assets'">
      <span class="tab-pill pill-asset">03</span> Held with other banks
    </button>
    <button class="tab-btn" [class.active]="activeTab === 'slr'" (click)="activeTab = 'slr'">
      <span class="tab-pill pill-slr">04</span> SLR assets
    </button>
    <!-- Where the reserve is actually held, and what it holds TODAY. The four tabs above report the
         fortnight close the return is made up to; this one answers the question a treasury desk
         asks every morning — as things stand now, are we short, and which account do we cover it
         into. A close two weeks old cannot say that, because the balances have since moved. -->
    <button class="tab-btn" [class.active]="activeTab === 'held'" (click)="activeTab = 'held'">
      <span class="tab-pill pill-held">05</span> Our accounts today
    </button>
  </div>

  <!-- Demand Liabilities Table -->
  @if (activeTab === 'demand') {
    <div class="section-desc">Money the bank must repay whenever a customer asks for it.</div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th class="sl">#</th>
            <th>Liability Item</th>
            <th>Item</th>
            <th class="right">Opening</th>
            <th class="right">Current</th>
            <th class="right">Change</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (item of demandLiabilities; track item.sl) {
            <tr>
              <td class="sl">{{ item.sl }}</td>
              <td>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-sub">{{ item.sub }}</div>
              </td>
              <td class="mono">{{ item.code }}</td>
              <td class="right amt amt-demand">{{ item.opening }}</td>
              <td class="right amt amt-demand">{{ item.current }}</td>
              <td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">
                {{ item.change }}
              </td>
              <td>
                <span
                  class="status-chip"
                  [class.chip-active]="item.status === 'Active'"
                  [class.chip-overdue]="item.status === 'Overdue' || item.status === 'Unclaimed'"
                >
                  {{ item.status }}
                </span>
              </td>
            </tr>
          } @empty {
            <tr class="empty-row">
              <td colspan="7">
                No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin &rarr;
                RBI Reserve Configuration.
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <strong>Total Demand Liabilities ({{ demandLiabilities.length }} accounts)</strong>
            </td>
            <td class="right foot-demand">{{ totalOf(demandLiabilities, 'openingValue') }}</td>
            <td class="right foot-demand">{{ totalOf(demandLiabilities, 'currentValue') }}</td>
            <td class="right">{{ totalChange(demandLiabilities) }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  }

  <!-- Time Liabilities Table -->
  @if (activeTab === 'time') {
    <div class="section-desc">Money the bank repays only when the deposit matures.</div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th class="sl">#</th>
            <th>Liability Item</th>
            <th>Item</th>
            <th class="right">Opening</th>
            <th class="right">Current</th>
            <th class="right">Change</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (item of timeLiabilities; track item.sl) {
            <tr>
              <td class="sl">{{ item.sl }}</td>
              <td>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-sub">{{ item.sub }}</div>
              </td>
              <td class="mono">{{ item.code }}</td>
              <td class="right amt amt-time">{{ item.opening }}</td>
              <td class="right amt amt-time">{{ item.current }}</td>
              <td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">
                {{ item.change }}
              </td>
              <td>
                <span
                  class="status-chip"
                  [class.chip-active]="item.status === 'Active'"
                  [class.chip-locked]="item.status === 'Locked'"
                >
                  {{ item.status }}
                </span>
              </td>
            </tr>
          } @empty {
            <tr class="empty-row">
              <td colspan="7">
                No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin &rarr;
                RBI Reserve Configuration.
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <strong>Total Time Liabilities ({{ timeLiabilities.length }} accounts)</strong>
            </td>
            <td class="right foot-time">{{ totalOf(timeLiabilities, 'openingValue') }}</td>
            <td class="right foot-time">{{ totalOf(timeLiabilities, 'currentValue') }}</td>
            <td class="right">{{ totalChange(timeLiabilities) }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  }

  <!-- Assets with Banking System Table -->
  @if (activeTab === 'assets') {
    <div class="section-desc">
      What the bank keeps with other banks. This comes off what it owes them — and only off that, so where it is the
      larger of the two the base is left as it is.
    </div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th class="sl">#</th>
            <th>Asset Item</th>
            <th>Item</th>
            <th class="right">Opening</th>
            <th class="right">Current</th>
            <th class="right">Change</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (item of bankingAssets; track item.sl) {
            <tr>
              <td class="sl">{{ item.sl }}</td>
              <td>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-sub">{{ item.sub }}</div>
              </td>
              <td class="mono">{{ item.code }}</td>
              <td class="right amt amt-asset">{{ item.opening }}</td>
              <td class="right amt amt-asset">{{ item.current }}</td>
              <td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">
                {{ item.change }}
              </td>
              <td>
                <span class="status-chip chip-active">{{ item.status }}</span>
              </td>
            </tr>
          } @empty {
            <tr class="empty-row">
              <td colspan="7">
                No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin &rarr;
                RBI Reserve Configuration.
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">
              <strong>Total Assets with Banking System</strong>
              <span class="deduct-tag">{{
                bankingAssetsNet
                  ? '( Deducted from NDTL )'
                  : '( Netted against item I, which is smaller — no deduction )'
              }}</span>
            </td>
            <td class="right foot-asset">{{ totalOf(bankingAssets, 'openingValue') }}</td>
            <td class="right foot-asset">{{ totalOf(bankingAssets, 'currentValue') }}</td>
            <td class="right">{{ totalChange(bankingAssets) }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  }

  <!-- SLR - Liquid Assets Table -->
  @if (activeTab === 'slr') {
    <div class="section-desc">Cash, bank balances and securities the bank holds against its SLR requirement.</div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th class="sl">#</th>
            <th>Liquid Asset</th>
            <th>Item</th>
            <th>Category</th>
            <th class="right">Opening</th>
            <th class="right">Current</th>
            <th class="right">Change</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (item of liquidAssets; track item.sl) {
            <tr>
              <td class="sl">{{ item.sl }}</td>
              <td>
                <div class="item-name">{{ item.name }}</div>
                <div class="item-sub">{{ item.sub }}</div>
              </td>
              <td class="mono">{{ item.code }}</td>
              <td>
                <span class="status-chip chip-slr">{{ item.category }}</span>
              </td>
              <td class="right amt amt-slr">{{ item.opening }}</td>
              <td class="right amt amt-slr">{{ item.current }}</td>
              <td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">
                {{ item.change }}
              </td>
              <td>
                <span class="status-chip chip-active">{{ item.status }}</span>
              </td>
            </tr>
          } @empty {
            <tr class="empty-row">
              <td colspan="7">
                No accounts are mapped to this head, so the return reports nothing under it. Map them in Admin &rarr;
                RBI Reserve Configuration.
              </td>
            </tr>
          }
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4"><strong>Total Liquid Assets (SLR Eligible)</strong></td>
            <td class="right foot-slr">{{ totalOf(liquidAssets, 'openingValue') }}</td>
            <td class="right foot-slr">{{ totalOf(liquidAssets, 'currentValue') }}</td>
            <td class="right">{{ totalChange(liquidAssets) }}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>

    <!-- How the ratio is struck. The "× 100" box that stood here was a term whose value was 100 and
         whose label was 100 — it took a quarter of the row to say that a fraction is written as a
         percentage. -->
    <div class="formula-block slr-formula">
      <div class="formula-title">How the SLR ratio is worked out</div>
      <div class="formula-row">
        <div class="formula-term ft-slr">
          <div class="formula-term-label">Assets we hold</div>
          <div class="formula-term-val">{{ money(totalLiquidAssets) }}</div>
          <div class="formula-term-sub">{{ liquidAssets.length }} categories</div>
        </div>
        <div class="formula-op">&divide;</div>
        <div class="formula-term ft-ndtl">
          <div class="formula-term-label">NDTL base</div>
          <div class="formula-term-val">{{ money(baseNdtl) }}</div>
          <div class="formula-term-sub">as at {{ baseDateStr || '—' }}</div>
        </div>
        <div class="formula-op equals">=</div>
        <div class="formula-term ft-slr-result">
          <div class="formula-term-label">SLR held</div>
          <div class="formula-term-val">{{ slrActualPercent }}%</div>
          <div class="formula-term-sub">minimum {{ slrRate }}%</div>
        </div>
      </div>
    </div>

    <!-- The SLR compliance bar that used to sit here said the same three figures as the row above
         it and the bar below it — required, held, surplus, three times on one screen. It is gone;
         the compliance bar at the foot carries both ratios for every tab. -->
  }

  <!-- Required against held, for both ratios. Always on screen, under whichever tab is open:
       whether the bank is short is the one thing a reader must not have to go looking for. -->
  <div class="crr-bar">
    <div class="crr-text">
      <div class="crr-title">Are we meeting the requirement?</div>
      <div class="crr-desc">
        Charged on the NDTL of {{ money(baseNdtl) }} as at {{ baseDateStr || reportingDateStr }}
      </div>
    </div>
    <!-- Required AND held, side by side. The requirement alone answers half the question: a screen
         headed "Reserve Requirements" that states ₹2.10 Cr without saying what is against it sends
         a reader to another tab to find out whether the bank is short — which is the one thing they
         opened this bar to learn. -->
    <div class="crr-calcs">
      @for (r of positionRatios(); track r.name) {
        <div class="crr-calc" [class.crr-calc--short]="!r.met">
          <!-- A ratio with no rate on record is said to have none. It used to print "SLR @ null%" and
               a surplus of nothing, which reads as a requirement met rather than one not set. -->
          <div class="crr-calc-label">{{ r.name }}{{ r.rate === null ? ' — rate not set' : ' @ ' + r.rate + '%' }}</div>
          <div class="crr-calc-val">{{ money(r.required) }}</div>
          <div class="crr-calc-held">
            held {{ money(r.maintained) }}
            <span [class.crr-short]="!r.met">
              &middot; {{ r.met ? '+' + money(r.surplus) : 'short ' + money(r.shortfall) }}
            </span>
          </div>
        </div>
      }
      <div class="crr-calc">
        <div class="crr-calc-label">Total Reserve</div>
        <div class="crr-calc-val">{{ money(totalReserve) }}</div>
        <div class="crr-calc-held">CRR + SLR required</div>
      </div>
    </div>
  </div>

  <!-- Reserve accounts, as they stand today -->
  @if (activeTab === 'held') {
    <div class="section-desc">
      Where the cash reserve is held, with each account's balance on the business date
      <strong>{{ position?.onDate || '—' }}</strong
      >. The requirement below is charged on <strong>{{ position?.baseDate || '—' }}</strong
      >, a fortnight back — RBI's lag is a rule, so today's own liabilities settle nothing yet.
    </div>

    @if (position) {
      <!-- Required against held, for each ratio. Stated before the accounts because a desk reads
           the gap first and only then asks which account to move money into. -->
      <div class="held-ratios">
        @for (r of positionRatios(); track r.name) {
          <div class="held-ratio" [class.held-ratio--short]="!r.met">
            <div class="held-ratio__name">{{ r.name }}{{ r.rate === null ? '' : ' @ ' + r.rate + '%' }}</div>
            <div class="held-ratio__grid">
              <span>Required</span><strong>{{ money(r.required) }}</strong> <span>Maintained</span
              ><strong>{{ money(r.maintained) }}</strong>
              <span>{{ r.met ? 'Surplus' : 'Shortfall' }}</span>
              <strong [class.held-short]="!r.met">{{ money(r.met ? r.surplus : r.shortfall) }}</strong>
            </div>
          </div>
        }
      </div>

      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th class="sl">#</th>
              <th>Account</th>
              <th>Form 1 head</th>
              <th class="right">Balance today</th>
              <th>&nbsp;</th>
            </tr>
          </thead>
          <tbody>
            @for (a of position.accounts; track a.glAccountId) {
              <tr>
                <td class="sl">{{ $index + 1 }}</td>
                <td>
                  <div class="item-name">{{ a.name }}</div>
                  <div class="item-sub mono">{{ a.glCode }}</div>
                </td>
                <td>
                  {{ a.item }} &middot; {{ a.head }}
                  <!-- An account the return does not read is named as such. It can still be moved
                       into — the money is real — but adding it to what is maintained would have
                       this screen claim a compliance the filed form does not. -->
                  @if (!a.countsTowardMaintained) {
                    <span class="held-chip">not counted on the return</span>
                  }
                </td>
                <td class="right amt">{{ money(a.balance) }}</td>
                <td class="right">
                  <button class="held-move" (click)="openTransfer(a)">
                    <fa-icon icon="exchange-alt"></fa-icon>
                    Transfer
                  </button>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    }
  }

  <!-- Footer -->
  <div class="dialog-footer">
    <span>CBSNexora &middot; RBI Liabilities Register</span>
    <span>RBI Master Circular &mdash; CRR/SLR 2024-25</span>
    <button mat-button (click)="close()">Close</button>
  </div>
</div>