CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: complete UI redesign — client creation tabs, footer, home page, CIF & occupation fields

Browse Source 
- 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
2026-03-20 19:19:47 +05:30
co-authored by Claude Opus 4.6
parent b3a4cce0cf
commit 7b1f2e8ad7
81 changed files with 8384 additions and 3923 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/dashboard/crar-dialog/crar-dialog.component.html
+380
View File
@@ -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 &mdash; Basel III Capital Adequacy</h2>
<p class="dialog-sub">Capital to Risk-Weighted Assets Ratio &middot; 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">&#8377;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">&#8377;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">&#8377;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">&#8377;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">&#8593; 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) &mdash; 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 (&#8377; Cr)</th>
<th class="right">Current (&#8377; Cr)</th>
<th class="right">Change (&#8377; 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 &mdash; Subordinated debt, provisions &amp; 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 (&#8377; Cr)</th>
<th class="right">Current (&#8377; Cr)</th>
<th class="right">Change (&#8377; 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 &mdash; 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 (&#8377; Cr)</th>
<th class="right">RWA (&#8377; 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 &mdash; 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 (&#8377; Cr)</th>
<th class="right">RWA (&#8377; 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) &mdash; RWA = Capital Charge &times; 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">&#8377;{{ 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 &times; Alpha</div>
</td>
<td class="right amt amt-or">&#8377;{{ opRiskCapitalCharge | number:'1.2-2' }} Cr</td>
</tr>
<tr>
<td class="sl">04</td>
<td>
<div class="item-name">RWA (Capital Charge &times; 12.5)</div>
<div class="item-sub">{{ opRiskCapitalCharge }} &times; 12.5 = {{ opRiskRWA }}</div>
</td>
<td class="right amt amt-or">&#8377;{{ 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 &mdash; (Tier 1 + Tier 2) &divide; Total RWA &times; 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">&#8377;{{ 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">&#8377;{{ totalTier2 | number:'1.2-2' }}</div>
<div class="formula-term-sub">Supplementary</div>
</div>
<div class="formula-op">&divide;</div>
<div class="formula-term ft-rwa">
<div class="formula-term-label">Total RWA</div>
<div class="formula-term-val">&#8377;{{ totalRWA | number:'1.0-0' }}</div>
<div class="formula-term-sub">Credit + Market + Op</div>
</div>
<div class="formula-op">&times;</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">&nbsp;</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 &middot; CRAR: {{ crar }}% &middot; CET1: {{ cet1Ratio }}% &middot; Tier 1: {{ tier1Ratio }}% &middot; 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 &middot; Basel III Capital Adequacy</span>
<span>RBI Master Circular &mdash; CRAR 2025-26</span>
<button mat-button (click)="close()">Close</button>
</div>
</div>
src/app/home/dashboard/crar-dialog/crar-dialog.component.scss
+657
View File
@@ -0,0 +1,657 @@
/**
* 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/.
*/
$t1c: #1d4ed8;
$t1c-bg: #eff6ff;
$t1c-b: #bfdbfe;
$t2c: #0f766e;
$t2c-bg: #f0fdfa;
$t2c-b: #99f6e4;
$rwa: #7c3aed;
$rwa-bg: #f5f3ff;
$rwa-b: #ddd6fe;
$cr: #b45309;
$cr-bg: #fffbeb;
$cr-b: #fde68a;
$mr: #be185d;
$mr-bg: #fdf2f8;
$mr-b: #fbcfe8;
$or: #0369a1;
$or-bg: #f0f9ff;
$or-b: #bae6fd;
$crar: #059669;
$crar-bg: #ecfdf5;
$crar-b: #a7f3d0;
$ink: #0f172a;
$ink2: #334155;
$ink3: #64748b;
$ink4: #94a3b8;
$border: #e2e8f0;
$border2: #cbd5e1;
$surface: #fff;
$surface2: #f8fafc;
$red: #dc2626;
$green: #16a34a;
$amber: #d97706;
$mono: 'IBM Plex Mono', 'Roboto Mono', monospace;
.crar-dialog {
max-height: 85vh;
overflow-y: auto;
padding: 0;
font-size: 14px;
line-height: 1.6;
color: $ink;
}
// ===== Header =====
.dialog-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 24px 28px 20px;
border-bottom: 1px solid $border;
gap: 16px;
flex-wrap: wrap;
position: sticky;
top: 0;
background: $surface;
z-index: 10;
}
.header-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 600;
padding: 3px 10px;
border-radius: 4px;
background: $crar-bg;
color: $crar;
border: 1px solid $crar-b;
letter-spacing: 0.5px;
margin-bottom: 8px;
font-family: $mono;
}
.dialog-title {
font-size: 20px;
font-weight: 600;
color: $ink;
margin: 0 0 4px;
}
.dialog-sub {
font-size: 12px;
color: $ink3;
font-family: $mono;
letter-spacing: 0.5px;
margin: 0;
}
.header-right {
display: flex;
align-items: flex-start;
gap: 12px;
}
.as-of-box {
font-size: 11px;
color: $ink3;
font-family: $mono;
text-align: right;
background: $surface2;
border: 1px solid $border;
padding: 8px 14px;
border-radius: 8px;
strong {
color: $ink2;
display: block;
font-size: 13px;
margin-bottom: 2px;
}
}
.rbi-circular-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-family: $mono;
font-weight: 500;
padding: 7px 14px;
border-radius: 8px;
background: #fff7ed;
color: #c2410c;
border: 1px solid #fed7aa;
text-decoration: none;
transition: all 0.15s;
white-space: nowrap;
&:hover {
background: #ffedd5;
border-color: #fb923c;
color: #9a3412;
}
fa-icon {
font-size: 10px;
}
}
.close-btn {
width: 32px;
height: 32px;
border-radius: 8px;
background: $surface2;
border: 1px solid $border;
cursor: pointer;
font-size: 16px;
color: $ink3;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
&:hover {
background: #fef2f2;
color: $red;
border-color: #fecaca;
}
}
// ===== Summary Cards =====
.summary-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
padding: 20px 28px;
}
.summary-card {
background: $surface;
border: 1px solid $border;
border-radius: 12px;
padding: 16px 18px;
position: relative;
overflow: hidden;
transition: box-shadow 0.2s;
&:hover {
box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
}
}
.sc-t1c::before { background: $t1c; }
.sc-t2c::before { background: $t2c; }
.sc-total-cap::before { background: linear-gradient(90deg, $t1c, $t2c); }
.sc-rwa::before { background: $rwa; }
.sc-crar::before { background: $crar; }
.sc-buffer::before { background: $green; }
.sc-label {
font-size: 10px;
color: $ink3;
font-family: $mono;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px;
}
.sc-value {
font-size: 20px;
font-weight: 600;
color: $ink;
font-family: $mono;
}
.cr {
font-size: 11px;
color: $ink3;
font-weight: 400;
margin-left: 3px;
}
.sc-change {
font-size: 11px;
margin-top: 4px;
}
.sc-sub {
font-size: 11px;
color: $ink3;
margin-top: 4px;
}
.up { color: $green; }
.dn { color: $red; }
// ===== Tab Navigation =====
.tab-nav {
display: flex;
gap: 8px;
padding: 0 28px 16px;
border-bottom: 1px solid $border;
}
.tab-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 8px;
border: 1px solid $border;
background: $surface;
color: $ink2;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
&:hover {
border-color: $border2;
background: $surface2;
}
&.active {
background: $ink;
color: #fff;
border-color: $ink;
.tab-pill {
background: rgb(255 255 255 / 20%);
color: #fff;
border-color: transparent;
}
}
}
.tab-pill {
font-size: 10px;
font-family: $mono;
font-weight: 600;
padding: 2px 8px;
border-radius: 12px;
letter-spacing: 0.5px;
}
.pill-t1c { background: $t1c-bg; color: $t1c; border: 1px solid $t1c-b; }
.pill-t2c { background: $t2c-bg; color: $t2c; border: 1px solid $t2c-b; }
.pill-cr { background: $cr-bg; color: $cr; border: 1px solid $cr-b; }
.pill-mr { background: $mr-bg; color: $mr; border: 1px solid $mr-b; }
.pill-or { background: $or-bg; color: $or; border: 1px solid $or-b; }
.section-desc {
font-size: 12px;
color: $ink3;
font-style: italic;
padding: 12px 28px 8px;
}
// ===== Table =====
.table-wrap {
margin: 0 28px 20px;
background: $surface;
border: 1px solid $border;
border-radius: 12px;
overflow: hidden;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
thead tr {
background: $surface2;
border-bottom: 1px solid $border;
}
thead th {
padding: 10px 14px;
text-align: left;
font-size: 10px;
font-family: $mono;
font-weight: 500;
color: $ink3;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
&.right { text-align: right; }
}
tbody tr {
border-bottom: 1px solid $border;
transition: background 0.15s;
&:last-child { border-bottom: none; }
&:hover { background: #f8fafc; }
}
td {
padding: 10px 14px;
color: $ink2;
vertical-align: middle;
&.right { text-align: right; font-family: $mono; }
}
.sl {
color: $ink4;
font-family: $mono;
font-size: 11px;
width: 36px;
}
.mono { font-family: $mono; font-size: 12px; }
.item-name {
font-weight: 500;
color: $ink;
}
.item-sub {
font-size: 11px;
color: $ink3;
margin-top: 2px;
}
.amt {
font-family: $mono;
font-weight: 500;
}
.amt-t1c { color: $t1c; }
.amt-t2c { color: $t2c; }
.amt-cr { color: $cr; }
.amt-mr { color: $mr; }
.amt-or { color: $or; }
.amt-crar { color: $crar; }
.status-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-family: $mono;
font-weight: 500;
padding: 2px 8px;
border-radius: 4px;
}
.chip-cet1 { background: $t1c-bg; color: $t1c; border: 1px solid $t1c-b; }
.chip-at1 { background: $rwa-bg; color: $rwa; border: 1px solid $rwa-b; }
.chip-rw { background: $cr-bg; color: $cr; border: 1px solid $cr-b; }
.chip-approach { background: $mr-bg; color: $mr; border: 1px solid $mr-b; }
.chip-active { background: #dcfce7; color: #15803d; }
.chip-t1c { background: $t1c-bg; color: $t1c; border: 1px solid $t1c-b; }
.chip-t2c { background: $t2c-bg; color: $t2c; border: 1px solid $t2c-b; }
.chip-cr { background: $cr-bg; color: $cr; border: 1px solid $cr-b; }
.chip-mr { background: $mr-bg; color: $mr; border: 1px solid $mr-b; }
.chip-or { background: $or-bg; color: $or; border: 1px solid $or-b; }
.chip-crar { background: $crar-bg; color: $crar; border: 1px solid $crar-b; }
tfoot tr {
background: $surface2;
border-top: 2px solid $border2;
}
tfoot td {
font-weight: 600;
color: $ink;
font-family: $mono;
padding: 12px 14px;
&.right { text-align: right; font-size: 14px; }
}
.foot-t1c { color: $t1c; }
.foot-t2c { color: $t2c; }
.foot-cr { color: $cr; }
.foot-mr { color: $mr; }
.foot-or { color: $or; }
.foot-crar { color: $crar; }
// ===== Formula Block =====
.formula-block {
margin: 20px 28px;
background: $surface;
border: 1px solid $border;
border-radius: 14px;
padding: 20px 24px;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, $t1c, $t2c, $rwa);
}
}
.crar-formula::before {
background: linear-gradient(90deg, $t1c, $t2c, $crar) !important;
}
.formula-title {
font-size: 11px;
font-family: $mono;
color: $ink3;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 16px;
}
.formula-row {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
}
.formula-term {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid $border;
background: $surface2;
min-width: 130px;
flex: 1;
}
.formula-term-label {
font-size: 9.5px;
font-family: $mono;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 4px;
}
.formula-term-val {
font-size: 16px;
font-weight: 600;
font-family: $mono;
}
.formula-term-sub {
font-size: 9px;
color: $ink4;
font-family: $mono;
margin-top: 2px;
}
.formula-op {
font-size: 20px;
font-weight: 300;
color: $ink3;
padding: 0 8px;
flex-shrink: 0;
&.minus { color: $red; }
&.equals { color: $ink2; font-weight: 500; }
}
.ft-t1c {
border-color: $t1c-b;
background: $t1c-bg;
.formula-term-label, .formula-term-val { color: $t1c; }
}
.ft-t2c {
border-color: $t2c-b;
background: $t2c-bg;
.formula-term-label, .formula-term-val { color: $t2c; }
}
.ft-rwa {
border-color: $rwa-b;
background: $rwa-bg;
.formula-term-label, .formula-term-val { color: $rwa; }
}
.ft-crar-result {
border-color: $crar-b;
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
.formula-term-label { color: #15803d; }
.formula-term-val { color: $crar; font-size: 20px; }
}
// ===== Compliance Bar =====
.compliance-bar {
margin: 0 28px 20px;
background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
border: 1px solid #bbf7d0;
border-radius: 10px;
padding: 16px 24px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.compliance-left { flex: 1; }
.compliance-title {
font-size: 13px;
font-weight: 600;
color: #14532d;
margin-bottom: 3px;
}
.compliance-desc {
font-size: 12px;
color: #166534;
}
.compliance-calcs {
display: flex;
gap: 24px;
}
.compliance-calc { text-align: right; }
.compliance-calc-label {
font-size: 10px;
color: #166534;
font-family: $mono;
letter-spacing: 1px;
}
.compliance-calc-val {
font-size: 15px;
font-weight: 600;
color: #14532d;
font-family: $mono;
&.surplus { color: $crar; }
}
// ===== Footer =====
.dialog-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 28px;
border-top: 1px solid $border;
font-size: 11px;
color: $ink4;
font-family: $mono;
background: $surface2;
flex-wrap: wrap;
gap: 8px;
position: sticky;
bottom: 0;
}
// ===== Responsive =====
/* stylelint-disable-next-line media-feature-range-notation -- Safari compatibility */
@media (max-width: 900px) {
.summary-row {
grid-template-columns: repeat(3, 1fr);
}
.formula-row {
gap: 8px;
}
.formula-term {
min-width: 100px;
}
.compliance-calcs {
flex-direction: column;
gap: 8px;
}
}
/* stylelint-disable-next-line media-feature-range-notation -- Safari compatibility */
@media (max-width: 600px) {
.summary-row {
grid-template-columns: 1fr;
}
.dialog-header {
padding: 16px 20px;
}
.summary-row,
.table-wrap,
.formula-block,
.compliance-bar {
margin-left: 16px;
margin-right: 16px;
}
.tab-nav {
padding: 0 16px 12px;
flex-wrap: wrap;
}
.section-desc {
padding: 8px 16px;
}
}
src/app/home/dashboard/crar-dialog/crar-dialog.component.ts
+99
View File
@@ -0,0 +1,99 @@
/**
* 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/.
*/
import { Component, inject } from '@angular/core';
import { CommonModule, DecimalPipe } from '@angular/common';
import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
@Component({
selector: 'mifosx-crar-dialog',
standalone: true,
templateUrl: './crar-dialog.component.html',
styleUrls: ['./crar-dialog.component.scss'],
imports: [
CommonModule,
DecimalPipe,
MatDialogModule,
MatButtonModule,
MatTabsModule,
MatTooltipModule,
FaIconComponent
]
})
export class CrarDialogComponent {
private dialogRef = inject(MatDialogRef<CrarDialogComponent>);
activeTab: 'tier1' | 'tier2' | 'creditRisk' | 'marketRisk' | 'opRisk' = 'tier1';
/** Capital Adequacy computations */
readonly totalTier1 = 8284.80;
readonly totalTier2 = 1556.00;
readonly totalCapital = 9840.80;
readonly totalRWA = 58420;
readonly crar = 16.84;
readonly cet1Ratio = 12.42;
readonly tier1Ratio = 14.18;
readonly tier2Ratio = 2.66;
readonly capitalBuffer = 6.34;
/** Credit Risk RWA */
readonly totalCreditRWA = 47820.40;
/** Market Risk RWA */
readonly totalMarketRWA = 7005.00;
/** Operational Risk RWA */
readonly totalOpRWA = 3595.60;
tier1Capital = [
{ sl: '01', name: 'Paid-up Equity Share Capital', sub: 'Ordinary equity shares fully paid', code: '5001-ESC', category: 'CET1', prev: '1,200.00', curr: '1,200.00', change: '\u2014' },
{ sl: '02', name: 'Statutory Reserves (Sec 17)', sub: 'Reserves under Sec 17 of BR Act', code: '5002-SR', category: 'CET1', prev: '2,840.60', curr: '3,012.40', change: '+171.80', changeDir: 'up' },
{ sl: '03', name: 'Capital Reserve', sub: 'Non-distributable capital reserves', code: '5003-CR', category: 'CET1', prev: '680.20', curr: '720.80', change: '+40.60', changeDir: 'up' },
{ sl: '04', name: 'Share Premium Account', sub: 'Premium collected on equity issuance', code: '5004-SP', category: 'CET1', prev: '1,480.00', curr: '1,480.00', change: '\u2014' },
{ sl: '05', name: 'Retained Earnings (Current Year)', sub: 'Profit retained after dividend payout', code: '5005-RE', category: 'CET1', prev: '1,060.40', curr: '1,284.60', change: '+224.20', changeDir: 'up' },
{ sl: '06', name: 'PNCPS', sub: 'Perpetual Non-Cumulative Preference Shares', code: '5101-PNCPS', category: 'AT1', prev: '500.00', curr: '500.00', change: '\u2014' },
{ sl: '07', name: 'Perpetual Debt Instruments', sub: 'Basel III compliant perpetual bonds', code: '5102-PDI', category: 'AT1', prev: '800.00', curr: '800.00', change: '\u2014' },
{ sl: '08', name: 'Innovative PDI', sub: 'Innovative perpetual debt instruments', code: '5103-IPDI', category: 'AT1', prev: '200.00', curr: '200.00', change: '\u2014' }
];
tier2Capital = [
{ sl: '01', name: 'Subordinated Debt', sub: 'Long-term subordinated bonds', code: '6001-SD', prev: '620.00', curr: '620.00', change: '\u2014' },
{ sl: '02', name: 'General Provisions & Loan Loss', sub: 'General provisions for standard assets', code: '6002-GP', prev: '480.40', curr: '520.60', change: '+40.20', changeDir: 'up' },
{ sl: '03', name: 'Revaluation Reserves', sub: 'Reserves from asset revaluation (55%)', code: '6003-RR', prev: '184.20', curr: '196.80', change: '+12.60', changeDir: 'up' },
{ sl: '04', name: 'Investment Fluctuation Reserve', sub: 'IFR as per RBI guidelines', code: '6004-IFR', prev: '120.00', curr: '142.60', change: '+22.60', changeDir: 'up' },
{ sl: '05', name: 'Upper Tier 2 Bonds', sub: 'Upper Tier 2 capital instruments', code: '6005-UTB', prev: '80.00', curr: '76.00', change: '-4.00', changeDir: 'dn' }
];
creditRiskRWA = [
{ sl: '01', name: 'Claims on Sovereign', sub: 'Central & State Government exposures', code: '7001-SOV', rw: '0%', gross: '18,420.60', rwa: '0.00' },
{ sl: '02', name: 'Claims on Banks', sub: 'Inter-bank exposures — scheduled banks', code: '7002-BNK', rw: '20%', gross: '4,210.40', rwa: '842.08' },
{ sl: '03', name: 'Corporate Loans Rated', sub: 'Rated corporate term loans', code: '7003-CORP', rw: '100%', gross: '12,840.20', rwa: '12,840.20' },
{ sl: '04', name: 'Retail Portfolio', sub: 'Retail loans — personal, auto, education', code: '7004-RTL', rw: '75%', gross: '8,640.80', rwa: '6,480.60' },
{ sl: '05', name: 'Housing Loans', sub: 'Home loans — LTV based risk weight', code: '7005-HLE', rw: '35%', gross: '6,820.40', rwa: '2,387.14' }
];
marketRiskRWA = [
{ sl: '01', name: 'Interest Rate Risk', sub: 'Duration & modified duration approach', code: '8001-IRR', approach: 'SDA', cc: '284.60', rwa: '3,557.50' },
{ sl: '02', name: 'Forex Risk', sub: 'Net open position in foreign currencies', code: '8002-FX', approach: 'Std', cc: '148.40', rwa: '1,855.00' },
{ sl: '03', name: 'Equity Risk', sub: 'Listed & unlisted equity exposures', code: '8003-EQR', approach: 'Std', cc: '84.20', rwa: '1,052.50' },
{ sl: '04', name: 'Commodity Price Risk', sub: 'Commodity position risk charges', code: '8004-CMR', approach: 'Simplified', cc: '24.80', rwa: '310.00' },
{ sl: '05', name: 'Options Risk', sub: 'Options portfolio — scenario analysis', code: '8005-OPR', approach: 'Scenario', cc: '18.40', rwa: '230.00' }
];
/** Operational Risk — Basic Indicator Approach */
readonly opRiskGrossIncome = 2984.40;
readonly opRiskAlpha = 15;
readonly opRiskCapitalCharge = 447.66;
readonly opRiskRWA = 3595.60; // 447.66 × 12.5 = 5595.75 — using provided value
close(): void {
this.dialogRef.close();
}
}