feat: complete UI redesign — client creation tabs, footer, home page, CIF & occupation fields
- Client creation: replaced vertical stepper with 3-tab layout (General, KYC & Nominee, Preview) - All form fields redesigned with appearance="outline" and section grouping - Preview tab with profile card, info tables, KYC details, family members - Footer redesigned: security bar, LincShield certifications, regulatory & legal, quick navigation, support & contact, LincPay branding - Home page redesigned: welcome banner, quick action cards, info row - Client view header redesigned: ID chips row (Account No, CIF Number, External Id), 4-column details grid - Added CIF Number column to clients list table - Added CIF Number display to client view sidebar and personal data tab - Added occupationCategoryId and occupationId dropdowns to client creation form - Added occupation fields to client view sidebar, personal data tab, and preview - Added 51+ missing translation keys to en-US.json - Toolbar: added Last login chip - Registered faUserPlus icon Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
b3a4cce0cf
commit
7b1f2e8ad7
@@ -0,0 +1,380 @@
|
||||
<!--
|
||||
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="crar-dialog">
|
||||
<!-- Header -->
|
||||
<div class="dialog-header">
|
||||
<div class="header-left">
|
||||
<div class="header-badge">
|
||||
<fa-icon icon="shield-alt"></fa-icon>
|
||||
Basel III Capital Adequacy
|
||||
</div>
|
||||
<h2 class="dialog-title">CRAR — Basel III Capital Adequacy</h2>
|
||||
<p class="dialog-sub">Capital to Risk-Weighted Assets Ratio · RBI Master Circular</p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="as-of-box">
|
||||
<strong>Q3 FY 2025-26</strong>
|
||||
<span>Reporting Quarter</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>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="summary-row">
|
||||
<div class="summary-card sc-t1c">
|
||||
<div class="sc-label">Tier 1 Capital</div>
|
||||
<div class="sc-value">₹8,284<span class="cr">Cr</span></div>
|
||||
<div class="sc-sub">CET1 + AT1</div>
|
||||
</div>
|
||||
<div class="summary-card sc-t2c">
|
||||
<div class="sc-label">Tier 2 Capital</div>
|
||||
<div class="sc-value">₹1,556<span class="cr">Cr</span></div>
|
||||
<div class="sc-sub">Supplementary Capital</div>
|
||||
</div>
|
||||
<div class="summary-card sc-total-cap">
|
||||
<div class="sc-label">Total Capital</div>
|
||||
<div class="sc-value">₹9,840<span class="cr">Cr</span></div>
|
||||
<div class="sc-sub">Tier 1 + Tier 2</div>
|
||||
</div>
|
||||
<div class="summary-card sc-rwa">
|
||||
<div class="sc-label">Total RWA</div>
|
||||
<div class="sc-value">₹58,420<span class="cr">Cr</span></div>
|
||||
<div class="sc-sub">Credit + Market + Op Risk</div>
|
||||
</div>
|
||||
<div class="summary-card sc-crar">
|
||||
<div class="sc-label">CRAR</div>
|
||||
<div class="sc-value">{{ crar }}%</div>
|
||||
<div class="sc-sub">Min required: 10.50%</div>
|
||||
</div>
|
||||
<div class="summary-card sc-buffer">
|
||||
<div class="sc-label">Capital Buffer</div>
|
||||
<div class="sc-value">+{{ capitalBuffer }}%</div>
|
||||
<div class="sc-change up">↑ Above RBI minimum</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="tab-nav">
|
||||
<button class="tab-btn" [class.active]="activeTab === 'tier1'" (click)="activeTab = 'tier1'">
|
||||
<span class="tab-pill pill-t1c">01</span> Tier 1 Capital
|
||||
</button>
|
||||
<button class="tab-btn" [class.active]="activeTab === 'tier2'" (click)="activeTab = 'tier2'">
|
||||
<span class="tab-pill pill-t2c">02</span> Tier 2 Capital
|
||||
</button>
|
||||
<button class="tab-btn" [class.active]="activeTab === 'creditRisk'" (click)="activeTab = 'creditRisk'">
|
||||
<span class="tab-pill pill-cr">03</span> Credit Risk RWA
|
||||
</button>
|
||||
<button class="tab-btn" [class.active]="activeTab === 'marketRisk'" (click)="activeTab = 'marketRisk'">
|
||||
<span class="tab-pill pill-mr">04</span> Market Risk RWA
|
||||
</button>
|
||||
<button class="tab-btn" [class.active]="activeTab === 'opRisk'" (click)="activeTab = 'opRisk'">
|
||||
<span class="tab-pill pill-or">05</span> Operational Risk RWA
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tier 1 Capital Table -->
|
||||
@if (activeTab === 'tier1') {
|
||||
<div class="section-desc">Common Equity Tier 1 (CET1) + Additional Tier 1 (AT1) — Basel III Framework</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sl">#</th>
|
||||
<th>Capital Item</th>
|
||||
<th>Account Code</th>
|
||||
<th>Category</th>
|
||||
<th class="right">Previous (₹ Cr)</th>
|
||||
<th class="right">Current (₹ Cr)</th>
|
||||
<th class="right">Change (₹ Cr)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (item of tier1Capital; 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" [class.chip-cet1]="item.category === 'CET1'" [class.chip-at1]="item.category === 'AT1'">
|
||||
{{ item.category }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="right amt amt-t1c">{{ item.prev }}</td>
|
||||
<td class="right amt amt-t1c">{{ item.curr }}</td>
|
||||
<td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">{{ item.change }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4"><strong>Total Tier 1 Capital (CET1 + AT1)</strong></td>
|
||||
<td class="right foot-t1c">7,961.20</td>
|
||||
<td class="right foot-t1c">8,284.80</td>
|
||||
<td class="right up">+323.60</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Tier 2 Capital Table -->
|
||||
@if (activeTab === 'tier2') {
|
||||
<div class="section-desc">Supplementary Capital — Subordinated debt, provisions & reserves</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sl">#</th>
|
||||
<th>Capital Item</th>
|
||||
<th>Account Code</th>
|
||||
<th class="right">Previous (₹ Cr)</th>
|
||||
<th class="right">Current (₹ Cr)</th>
|
||||
<th class="right">Change (₹ Cr)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (item of tier2Capital; 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-t2c">{{ item.prev }}</td>
|
||||
<td class="right amt amt-t2c">{{ item.curr }}</td>
|
||||
<td class="right" [class.up]="item.changeDir === 'up'" [class.dn]="item.changeDir === 'dn'">{{ item.change }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3"><strong>Total Tier 2 Capital</strong></td>
|
||||
<td class="right foot-t2c">1,484.60</td>
|
||||
<td class="right foot-t2c">1,556.00</td>
|
||||
<td class="right up">+71.40</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Credit Risk RWA Table -->
|
||||
@if (activeTab === 'creditRisk') {
|
||||
<div class="section-desc">Risk-Weighted Assets for Credit Risk — Standardised Approach (RBI)</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sl">#</th>
|
||||
<th>Exposure Category</th>
|
||||
<th>Account Code</th>
|
||||
<th>Risk Weight</th>
|
||||
<th class="right">Gross Exposure (₹ Cr)</th>
|
||||
<th class="right">RWA (₹ Cr)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (item of creditRiskRWA; 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-rw">{{ item.rw }}</span></td>
|
||||
<td class="right amt amt-cr">{{ item.gross }}</td>
|
||||
<td class="right amt amt-cr">{{ item.rwa }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4"><strong>Total Credit Risk RWA</strong></td>
|
||||
<td class="right"></td>
|
||||
<td class="right foot-cr">47,820.40</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Market Risk RWA Table -->
|
||||
@if (activeTab === 'marketRisk') {
|
||||
<div class="section-desc">Risk-Weighted Assets for Market Risk — Standardised Duration Approach</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sl">#</th>
|
||||
<th>Risk Component</th>
|
||||
<th>Account Code</th>
|
||||
<th>Approach</th>
|
||||
<th class="right">Capital Charge (₹ Cr)</th>
|
||||
<th class="right">RWA (₹ Cr)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (item of marketRiskRWA; 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-approach">{{ item.approach }}</span></td>
|
||||
<td class="right amt amt-mr">{{ item.cc }}</td>
|
||||
<td class="right amt amt-mr">{{ item.rwa }}</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4"><strong>Total Market Risk RWA</strong></td>
|
||||
<td class="right"></td>
|
||||
<td class="right foot-mr">7,005.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Operational Risk RWA Table -->
|
||||
@if (activeTab === 'opRisk') {
|
||||
<div class="section-desc">Basic Indicator Approach (BIA) — RWA = Capital Charge × 12.5</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sl">#</th>
|
||||
<th>Parameter</th>
|
||||
<th class="right">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="sl">01</td>
|
||||
<td>
|
||||
<div class="item-name">Gross Income Average (3-year)</div>
|
||||
<div class="item-sub">Average of last 3 years positive gross income</div>
|
||||
</td>
|
||||
<td class="right amt amt-or">₹{{ opRiskGrossIncome | number:'1.2-2' }} Cr</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sl">02</td>
|
||||
<td>
|
||||
<div class="item-name">Alpha Factor</div>
|
||||
<div class="item-sub">Fixed multiplier as per Basel III BIA</div>
|
||||
</td>
|
||||
<td class="right amt amt-or">{{ opRiskAlpha }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sl">03</td>
|
||||
<td>
|
||||
<div class="item-name">Capital Charge</div>
|
||||
<div class="item-sub">Gross Income × Alpha</div>
|
||||
</td>
|
||||
<td class="right amt amt-or">₹{{ opRiskCapitalCharge | number:'1.2-2' }} Cr</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="sl">04</td>
|
||||
<td>
|
||||
<div class="item-name">RWA (Capital Charge × 12.5)</div>
|
||||
<div class="item-sub">{{ opRiskCapitalCharge }} × 12.5 = {{ opRiskRWA }}</div>
|
||||
</td>
|
||||
<td class="right amt amt-or">₹{{ opRiskRWA | number:'1.2-2' }} Cr</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"><strong>Total Operational Risk RWA</strong></td>
|
||||
<td class="right foot-or">3,595.60</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- CRAR Formula Block -->
|
||||
<div class="formula-block crar-formula">
|
||||
<div class="formula-title">CRAR Computation — (Tier 1 + Tier 2) ÷ Total RWA × 100</div>
|
||||
<div class="formula-row">
|
||||
<div class="formula-term ft-t1c">
|
||||
<div class="formula-term-label">Tier 1 Capital</div>
|
||||
<div class="formula-term-val">₹{{ totalTier1 | number:'1.2-2' }}</div>
|
||||
<div class="formula-term-sub">CET1 + AT1</div>
|
||||
</div>
|
||||
<div class="formula-op">+</div>
|
||||
<div class="formula-term ft-t2c">
|
||||
<div class="formula-term-label">Tier 2 Capital</div>
|
||||
<div class="formula-term-val">₹{{ totalTier2 | number:'1.2-2' }}</div>
|
||||
<div class="formula-term-sub">Supplementary</div>
|
||||
</div>
|
||||
<div class="formula-op">÷</div>
|
||||
<div class="formula-term ft-rwa">
|
||||
<div class="formula-term-label">Total RWA</div>
|
||||
<div class="formula-term-val">₹{{ totalRWA | number:'1.0-0' }}</div>
|
||||
<div class="formula-term-sub">Credit + Market + Op</div>
|
||||
</div>
|
||||
<div class="formula-op">×</div>
|
||||
<div class="formula-term" style="border-color:#e2e8f0;background:#f8fafc;">
|
||||
<div class="formula-term-label" style="color:#64748b;">100</div>
|
||||
<div class="formula-term-val" style="color:#334155;">100</div>
|
||||
<div class="formula-term-sub"> </div>
|
||||
</div>
|
||||
<div class="formula-op equals">=</div>
|
||||
<div class="formula-term ft-crar-result">
|
||||
<div class="formula-term-label">CRAR</div>
|
||||
<div class="formula-term-val">{{ crar }}%</div>
|
||||
<div class="formula-term-sub">Min required: 10.50%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Basel III Compliance Bar -->
|
||||
<div class="compliance-bar">
|
||||
<div class="compliance-left">
|
||||
<div class="compliance-title">Basel III Compliance Status</div>
|
||||
<div class="compliance-desc">All thresholds met · CRAR: {{ crar }}% · CET1: {{ cet1Ratio }}% · Tier 1: {{ tier1Ratio }}% · Tier 2: {{ tier2Ratio }}%</div>
|
||||
</div>
|
||||
<div class="compliance-calcs">
|
||||
<div class="compliance-calc">
|
||||
<div class="compliance-calc-label">CET1 Ratio</div>
|
||||
<div class="compliance-calc-val">{{ cet1Ratio }}%</div>
|
||||
</div>
|
||||
<div class="compliance-calc">
|
||||
<div class="compliance-calc-label">Tier 1 Ratio</div>
|
||||
<div class="compliance-calc-val">{{ tier1Ratio }}%</div>
|
||||
</div>
|
||||
<div class="compliance-calc">
|
||||
<div class="compliance-calc-label">CRAR</div>
|
||||
<div class="compliance-calc-val surplus">{{ crar }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="dialog-footer">
|
||||
<span>CBSNexora · Basel III Capital Adequacy</span>
|
||||
<span>RBI Master Circular — CRAR 2025-26</span>
|
||||
<button mat-button (click)="close()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user