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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
<!--
|
||||
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 & Time Liabilities</h2>
|
||||
<p class="dialog-sub">NDTL · CRR/SLR Computation Base · As per RBI Master Circular</p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="as-of-box">
|
||||
<strong>{{ reportingDateStr }}</strong>
|
||||
<span>Reporting Fortnight (45-day lag)</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-demand">
|
||||
<div class="sc-label">Total Demand Liabilities</div>
|
||||
<div class="sc-value">₹12,843<span class="cr">Cr</span></div>
|
||||
<div class="sc-change up">↑ 3.2% vs prev fortnight</div>
|
||||
</div>
|
||||
<div class="summary-card sc-time">
|
||||
<div class="sc-label">Total Time Liabilities</div>
|
||||
<div class="sc-value">₹64,618<span class="cr">Cr</span></div>
|
||||
<div class="sc-change up">↑ 1.8% vs prev fortnight</div>
|
||||
</div>
|
||||
<div class="summary-card sc-asset">
|
||||
<div class="sc-label">Assets with Banking System</div>
|
||||
<div class="sc-value">₹8,240<span class="cr">Cr</span></div>
|
||||
<div class="sc-change dn">↓ Deducted from NDTL</div>
|
||||
</div>
|
||||
<div class="summary-card sc-ndtl">
|
||||
<div class="sc-label">Net Demand & Time Liabilities (NDTL)</div>
|
||||
<div class="sc-value">₹69,221<span class="cr">Cr</span></div>
|
||||
<div class="sc-sub">After deducting banking assets</div>
|
||||
</div>
|
||||
<div class="summary-card sc-crr">
|
||||
<div class="sc-label">CRR Required ({{ crrRate }}%)</div>
|
||||
<div class="sc-value">₹{{ crrRequired | number:'1.0-0' }}<span class="cr">Cr</span></div>
|
||||
<div class="sc-sub">SLR Req: ₹{{ slrRequired | number:'1.0-0' }} Cr ({{ slrRate }}%)</div>
|
||||
</div>
|
||||
</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> Assets with Banking System
|
||||
</button>
|
||||
<button class="tab-btn" [class.active]="activeTab === 'slr'" (click)="activeTab = 'slr'">
|
||||
<span class="tab-pill pill-slr">04</span> SLR — Liquid Assets
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Demand Liabilities Table -->
|
||||
@if (activeTab === 'demand') {
|
||||
<div class="section-desc">Amounts payable on demand — RBI Schedule II</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sl">#</th>
|
||||
<th>Liability Item</th>
|
||||
<th>Account Code</th>
|
||||
<th class="right">Opening (₹ Cr)</th>
|
||||
<th class="right">Current (₹ Cr)</th>
|
||||
<th class="right">Change (₹ Cr)</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>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3"><strong>Total Demand Liabilities (All 16 Items)</strong></td>
|
||||
<td class="right foot-demand">12,114.75</td>
|
||||
<td class="right foot-demand">12,843.50</td>
|
||||
<td class="right up">+728.75</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Time Liabilities Table -->
|
||||
@if (activeTab === 'time') {
|
||||
<div class="section-desc">Amounts payable after a specified period — RBI Schedule III</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sl">#</th>
|
||||
<th>Liability Item</th>
|
||||
<th>Account Code</th>
|
||||
<th class="right">Opening (₹ Cr)</th>
|
||||
<th class="right">Current (₹ Cr)</th>
|
||||
<th class="right">Change (₹ Cr)</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>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3"><strong>Total Time Liabilities (All 13 Items)</strong></td>
|
||||
<td class="right foot-time">62,613.10</td>
|
||||
<td class="right foot-time">64,618.00</td>
|
||||
<td class="right up">+2,004.90</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Assets with Banking System Table -->
|
||||
@if (activeTab === 'assets') {
|
||||
<div class="section-desc">Deducted from gross liabilities to arrive at NDTL — RBI Master Circular</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sl">#</th>
|
||||
<th>Asset Item</th>
|
||||
<th>Account Code</th>
|
||||
<th class="right">Opening (₹ Cr)</th>
|
||||
<th class="right">Current (₹ Cr)</th>
|
||||
<th class="right">Change (₹ Cr)</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>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3"><strong>Total Assets with Banking System</strong> <span class="deduct-tag">( Deducted from NDTL )</span></td>
|
||||
<td class="right foot-asset">7,600.70</td>
|
||||
<td class="right foot-asset">8,240.20</td>
|
||||
<td class="right up">+639.50</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- SLR - Liquid Assets Table -->
|
||||
@if (activeTab === 'slr') {
|
||||
<div class="section-desc">SLR = (Liquid Assets / NDTL) × 100 — RBI Sec 24(2A) of Banking Regulation Act, 1949</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sl">#</th>
|
||||
<th>Liquid Asset</th>
|
||||
<th>Account Code</th>
|
||||
<th>Category</th>
|
||||
<th class="right">Opening (₹ Cr)</th>
|
||||
<th class="right">Current (₹ Cr)</th>
|
||||
<th class="right">Change (₹ Cr)</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>
|
||||
}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4"><strong>Total Liquid Assets (SLR Eligible)</strong></td>
|
||||
<td class="right foot-slr">12,511.70</td>
|
||||
<td class="right foot-slr">13,238.80</td>
|
||||
<td class="right up">+727.10</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- SLR Formula -->
|
||||
<div class="formula-block slr-formula">
|
||||
<div class="formula-title">SLR Computation — (Liquid Assets / NDTL) × 100</div>
|
||||
<div class="formula-row">
|
||||
<div class="formula-term ft-slr">
|
||||
<div class="formula-term-label">Liquid Assets</div>
|
||||
<div class="formula-term-val">₹13,238.80</div>
|
||||
<div class="formula-term-sub">6 asset categories</div>
|
||||
</div>
|
||||
<div class="formula-op">÷</div>
|
||||
<div class="formula-term ft-ndtl">
|
||||
<div class="formula-term-label">NDTL</div>
|
||||
<div class="formula-term-val">₹69,221.30</div>
|
||||
<div class="formula-term-sub">Net Demand & Time</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-slr-result">
|
||||
<div class="formula-term-label">Actual SLR</div>
|
||||
<div class="formula-term-val">{{ slrActualPercent }}%</div>
|
||||
<div class="formula-term-sub">Min required: {{ slrRate }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SLR Status Bar -->
|
||||
<div class="slr-status-bar">
|
||||
<div class="slr-status-left">
|
||||
<div class="slr-status-title">SLR Compliance Status</div>
|
||||
<div class="slr-status-desc">Actual: {{ slrActualPercent }}% · Required: {{ slrRate }}.00% · NDTL: ₹{{ ndtl | number:'1.2-2' }} Cr</div>
|
||||
</div>
|
||||
<div class="slr-status-calcs">
|
||||
<div class="slr-calc">
|
||||
<div class="slr-calc-label">SLR Required ({{ slrRate }}%)</div>
|
||||
<div class="slr-calc-val">₹{{ slrRequired | number:'1.2-2' }} Cr</div>
|
||||
</div>
|
||||
<div class="slr-calc">
|
||||
<div class="slr-calc-label">Liquid Assets Held</div>
|
||||
<div class="slr-calc-val">₹{{ totalLiquidAssets | number:'1.2-2' }} Cr</div>
|
||||
</div>
|
||||
<div class="slr-calc">
|
||||
<div class="slr-calc-label">Surplus</div>
|
||||
<div class="slr-calc-val surplus">₹{{ slrSurplus | number:'1.2-2' }} Cr</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- NDTL Formula Block -->
|
||||
<div class="formula-block">
|
||||
<div class="formula-title">NDTL Computation — Formula Breakdown · Data as of {{ reportingDateStr }}</div>
|
||||
<div class="formula-row">
|
||||
<div class="formula-term ft-demand">
|
||||
<div class="formula-term-label">Demand Liabilities</div>
|
||||
<div class="formula-term-val">₹{{ totalDemand | number:'1.2-2' }}</div>
|
||||
<div class="formula-term-sub">16 line items</div>
|
||||
</div>
|
||||
<div class="formula-op">+</div>
|
||||
<div class="formula-term ft-time">
|
||||
<div class="formula-term-label">Time Liabilities</div>
|
||||
<div class="formula-term-val">₹{{ totalTime | number:'1.2-2' }}</div>
|
||||
<div class="formula-term-sub">13 line items</div>
|
||||
</div>
|
||||
<div class="formula-op minus">−</div>
|
||||
<div class="formula-term ft-asset">
|
||||
<div class="formula-term-label">Assets with Banking</div>
|
||||
<div class="formula-term-val">₹{{ totalBankingAssets | number:'1.2-2' }}</div>
|
||||
<div class="formula-term-sub">3 line items</div>
|
||||
</div>
|
||||
<div class="formula-op equals">=</div>
|
||||
<div class="formula-term ft-ndtl">
|
||||
<div class="formula-term-label">NDTL</div>
|
||||
<div class="formula-term-val">₹{{ ndtl | number:'1.2-2' }}</div>
|
||||
<div class="formula-term-sub">CRR & SLR base</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CRR/SLR Bar -->
|
||||
<div class="crr-bar">
|
||||
<div class="crr-text">
|
||||
<div class="crr-title">CRR & SLR Reserve Requirements — RBI Computation on NDTL</div>
|
||||
<div class="crr-desc">Based on NDTL of ₹{{ ndtl | number:'1.2-2' }} Cr · Data as of {{ reportingDateStr }} (45-day lag)</div>
|
||||
</div>
|
||||
<div class="crr-calcs">
|
||||
<div class="crr-calc">
|
||||
<div class="crr-calc-label">CRR @ {{ crrRate }}.00%</div>
|
||||
<div class="crr-calc-val">₹{{ crrRequired | number:'1.2-2' }} Cr</div>
|
||||
</div>
|
||||
<div class="crr-calc">
|
||||
<div class="crr-calc-label">SLR @ {{ slrRate }}.00%</div>
|
||||
<div class="crr-calc-val">₹{{ slrRequired | number:'1.2-2' }} Cr</div>
|
||||
</div>
|
||||
<div class="crr-calc">
|
||||
<div class="crr-calc-label">Total Reserve</div>
|
||||
<div class="crr-calc-val">₹{{ totalReserve | number:'1.2-2' }} Cr</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="dialog-footer">
|
||||
<span>CBSNexora · RBI Liabilities Register</span>
|
||||
<span>RBI Master Circular — CRR/SLR 2024-25</span>
|
||||
<button mat-button (click)="close()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,686 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
$demand: #1d4ed8;
|
||||
$demand-bg: #eff6ff;
|
||||
$demand-b: #bfdbfe;
|
||||
$time: #0f766e;
|
||||
$time-bg: #f0fdfa;
|
||||
$time-b: #99f6e4;
|
||||
$asset: #7c3aed;
|
||||
$asset-bg: #f5f3ff;
|
||||
$asset-b: #ddd6fe;
|
||||
$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;
|
||||
|
||||
.crr-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: #fff7ed;
|
||||
color: #c2410c;
|
||||
border: 1px solid #fed7aa;
|
||||
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(5, 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-demand::before { background: $demand; }
|
||||
.sc-time::before { background: $time; }
|
||||
.sc-asset::before { background: $asset; }
|
||||
.sc-ndtl::before { background: linear-gradient(90deg, $asset, $time, $demand); }
|
||||
.sc-crr::before { background: $amber; }
|
||||
|
||||
.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-demand { background: $demand-bg; color: $demand; border: 1px solid $demand-b; }
|
||||
.pill-time { background: $time-bg; color: $time; border: 1px solid $time-b; }
|
||||
.pill-asset { background: $asset-bg; color: $asset; border: 1px solid $asset-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-demand { color: $demand; }
|
||||
.amt-time { color: $time; }
|
||||
.amt-asset { color: $asset; }
|
||||
|
||||
.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-active { background: #dcfce7; color: #15803d; }
|
||||
.chip-overdue { background: #fef2f2; color: $red; }
|
||||
.chip-locked { background: #fefce8; color: #92400e; }
|
||||
|
||||
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; }
|
||||
}
|
||||
|
||||
$slr: #0369a1;
|
||||
$slr-bg: #f0f9ff;
|
||||
$slr-b: #bae6fd;
|
||||
|
||||
.foot-demand { color: $demand; }
|
||||
.foot-time { color: $time; }
|
||||
.foot-asset { color: $asset; }
|
||||
.foot-slr { color: $slr; }
|
||||
.deduct-tag { font-size: 10px; color: $asset; font-family: $mono; margin-left: 8px; }
|
||||
|
||||
.amt-slr { color: $slr; }
|
||||
.chip-slr { background: $slr-bg; color: $slr; border: 1px solid $slr-b; }
|
||||
.pill-slr { background: $slr-bg; color: $slr; border: 1px solid $slr-b; }
|
||||
|
||||
.ft-slr {
|
||||
border-color: $slr-b;
|
||||
background: $slr-bg;
|
||||
.formula-term-label, .formula-term-val { color: $slr; }
|
||||
}
|
||||
|
||||
.ft-slr-result {
|
||||
border-color: #bbf7d0;
|
||||
background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
|
||||
.formula-term-label { color: #15803d; }
|
||||
.formula-term-val { color: $green; font-size: 20px; }
|
||||
}
|
||||
|
||||
.slr-formula::before {
|
||||
background: linear-gradient(90deg, $slr, $green) !important;
|
||||
}
|
||||
|
||||
// ===== SLR Status Bar =====
|
||||
.slr-status-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;
|
||||
}
|
||||
|
||||
.slr-status-left { flex: 1; }
|
||||
|
||||
.slr-status-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #14532d;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.slr-status-desc {
|
||||
font-size: 12px;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.slr-status-calcs {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.slr-calc { text-align: right; }
|
||||
|
||||
.slr-calc-label {
|
||||
font-size: 10px;
|
||||
color: #166534;
|
||||
font-family: $mono;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.slr-calc-val {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #14532d;
|
||||
font-family: $mono;
|
||||
|
||||
&.surplus { color: $green; }
|
||||
}
|
||||
|
||||
// ===== 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, $demand, $time, $asset);
|
||||
}
|
||||
}
|
||||
|
||||
.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-demand { border-color: $demand-b; background: $demand-bg; .formula-term-label, .formula-term-val { color: $demand; } }
|
||||
.ft-time { border-color: $time-b; background: $time-bg; .formula-term-label, .formula-term-val { color: $time; } }
|
||||
.ft-asset { border-color: $asset-b; background: $asset-bg; .formula-term-label, .formula-term-val { color: $asset; } }
|
||||
.ft-ndtl {
|
||||
border-color: #a78bfa;
|
||||
background: linear-gradient(135deg, #f5f3ff, #f0fdfa);
|
||||
.formula-term-label { color: #6d28d9; }
|
||||
.formula-term-val { color: $ink; font-size: 18px; }
|
||||
}
|
||||
|
||||
// ===== CRR Bar =====
|
||||
.crr-bar {
|
||||
margin: 0 28px 20px;
|
||||
background: linear-gradient(135deg, #fefce8, #fff7ed);
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 10px;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.crr-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.crr-desc {
|
||||
font-size: 12px;
|
||||
color: #a16207;
|
||||
}
|
||||
|
||||
.crr-text { flex: 1; }
|
||||
|
||||
.crr-calcs {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.crr-calc { text-align: right; }
|
||||
|
||||
.crr-calc-label {
|
||||
font-size: 10px;
|
||||
color: #92400e;
|
||||
font-family: $mono;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.crr-calc-val {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #78350f;
|
||||
font-family: $mono;
|
||||
}
|
||||
|
||||
// ===== 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(2, 1fr);
|
||||
}
|
||||
|
||||
.formula-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.formula-term {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.crr-calcs,
|
||||
.slr-status-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,
|
||||
.crr-bar,
|
||||
.slr-status-bar {
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.tab-nav {
|
||||
padding: 0 16px 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
/**
|
||||
* 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-crr-slr-dialog',
|
||||
standalone: true,
|
||||
templateUrl: './crr-slr-dialog.component.html',
|
||||
styleUrls: ['./crr-slr-dialog.component.scss'],
|
||||
imports: [
|
||||
CommonModule,
|
||||
DecimalPipe,
|
||||
MatDialogModule,
|
||||
MatButtonModule,
|
||||
MatTabsModule,
|
||||
MatTooltipModule,
|
||||
FaIconComponent
|
||||
]
|
||||
})
|
||||
export class CrrSlrDialogComponent {
|
||||
private dialogRef = inject(MatDialogRef<CrrSlrDialogComponent>);
|
||||
|
||||
activeTab: 'demand' | 'time' | 'assets' | 'slr' = 'demand';
|
||||
|
||||
/** Reporting fortnight date — 45 days before current date */
|
||||
today = new Date();
|
||||
reportingDate: Date;
|
||||
reportingDateStr: string;
|
||||
|
||||
/** NDTL & Reserve computations */
|
||||
readonly totalDemand = 12843.50;
|
||||
readonly totalTime = 64618.00;
|
||||
readonly totalBankingAssets = 8240.20;
|
||||
readonly ndtl = 69221.30; // Demand + Time - Banking Assets
|
||||
readonly crrRate = 3; // Current RBI CRR rate (%)
|
||||
readonly slrRate = 18; // Current RBI SLR rate (%)
|
||||
readonly crrRequired = 69221.30 * 0.03; // ₹2,076.64 Cr
|
||||
readonly slrRequired = 69221.30 * 0.18; // ₹12,459.83 Cr
|
||||
readonly totalLiquidAssets = 13238.80;
|
||||
readonly slrActualPercent = +(13238.80 / 69221.30 * 100).toFixed(2); // 19.12%
|
||||
readonly slrSurplus = +(13238.80 - 69221.30 * 0.18).toFixed(2); // 778.97
|
||||
readonly totalReserve = +(69221.30 * 0.03 + 69221.30 * 0.18).toFixed(2); // 14,536.47
|
||||
|
||||
constructor() {
|
||||
// CRR/SLR uses data from 45 days ago
|
||||
const lagDays = 45;
|
||||
this.reportingDate = new Date(this.today);
|
||||
this.reportingDate.setDate(this.reportingDate.getDate() - lagDays);
|
||||
this.reportingDateStr = this.reportingDate.toLocaleDateString('en-IN', {
|
||||
day: '2-digit', month: 'short', year: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
demandLiabilities = [
|
||||
{ sl: '01', name: 'Current Account Deposits', sub: 'Corporate & individual CA balances', code: '2001-CA', opening: '3,842.50', current: '4,120.75', change: '+278.25', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '02', name: 'Savings Bank Deposits (Withdrawable)', sub: 'Demand portion — 10% of SB balance', code: '2002-SB', opening: '1,240.00', current: '1,318.40', change: '+78.40', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '03', name: 'Demand Drafts Payable', sub: 'Issued DDs outstanding for payment', code: '2003-DD', opening: '284.20', current: '311.60', change: '+27.40', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '04', name: "Banker's Cheques / Pay Orders", sub: 'Issued pay orders pending encashment', code: '2004-PO', opening: '198.75', current: '176.30', change: '-22.45', changeDir: 'dn', status: 'Active' },
|
||||
{ sl: '05', name: 'Credit Balance in Cash Credit Accounts', sub: 'CC accounts in credit position', code: '2005-CC', opening: '542.10', current: '618.90', change: '+76.80', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '06', name: 'Overdue Fixed Deposits', sub: 'FDs past maturity — treated as demand', code: '2006-OFD', opening: '89.40', current: '112.85', change: '+23.45', changeDir: 'dn', status: 'Overdue' },
|
||||
{ sl: '07', name: 'Interest Payable on Demand Deposits', sub: 'Accrued interest on CA/SB', code: '2007-INT', opening: '34.20', current: '38.55', change: '+4.35', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '08', name: 'Margins held against Letters of Credit', sub: 'Withdrawable LC margin deposits', code: '2008-LCM', opening: '412.60', current: '388.20', change: '-24.40', changeDir: 'dn', status: 'Active' },
|
||||
{ sl: '09', name: 'Margins held against Bank Guarantees', sub: 'Withdrawable BG margin deposits', code: '2009-BGM', opening: '318.40', current: '342.10', change: '+23.70', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '10', name: 'Security Deposits (Withdrawable)', sub: 'EMD / SD refundable on demand', code: '2010-SD', opening: '124.80', current: '118.60', change: '-6.20', changeDir: 'dn', status: 'Active' },
|
||||
{ sl: '11', name: 'Unclaimed Deposits (Demand Portion)', sub: 'Balances unclaimed >10 years', code: '2011-UCD', opening: '56.30', current: '59.40', change: '+3.10', changeDir: 'dn', status: 'Unclaimed' },
|
||||
{ sl: '12', name: 'Inter-Bank Demand Deposits', sub: 'Demand deposits from other banks', code: '2012-IBD', opening: '2,840.00', current: '3,120.50', change: '+280.50', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '13', name: 'Clearing Adjustments / Balances', sub: 'Net clearing settlement balances', code: '2013-CLR', opening: '186.40', current: '210.80', change: '+24.40', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '14', name: 'Outstanding Payment Instruments', sub: 'Cheques issued but not yet presented', code: '2014-OPI', opening: '142.60', current: '158.90', change: '+16.30', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '15', name: 'Demand Liabilities towards Other Banks', sub: 'Nostro / Vostro demand obligations', code: '2015-DLB', opening: '984.20', current: '1,048.60', change: '+64.40', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '16', name: 'Deposits Repayable on Demand', sub: 'Miscellaneous on-demand deposits', code: '2016-DRD', opening: '618.30', current: '698.05', change: '+79.75', changeDir: 'up', status: 'Active' }
|
||||
];
|
||||
|
||||
timeLiabilities = [
|
||||
{ sl: '01', name: 'Fixed Deposits (FD)', sub: '7 days to 10 years · 6.5–7.2%', code: '3001-FD', opening: '28,420.50', current: '29,184.30', change: '+763.80', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '02', name: 'Recurring Deposits (RD)', sub: 'Monthly instalment · 6.0–6.8%', code: '3002-RD', opening: '4,218.60', current: '4,412.80', change: '+194.20', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '03', name: 'Time Liability Portion of Savings', sub: '90% of SB balance treated as time', code: '3003-SBT', opening: '10,840.20', current: '11,204.60', change: '+364.40', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '04', name: 'Reinvestment Deposits', sub: 'Cumulative interest plans · 7.0%', code: '3004-RID', opening: '1,842.40', current: '1,918.70', change: '+76.30', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '05', name: 'Staff Security Deposits (Fixed Period)', sub: 'Employee security deposits — locked', code: '3005-SSD', opening: '84.60', current: '86.40', change: '+1.80', changeDir: 'up', status: 'Locked' },
|
||||
{ sl: '06', name: 'Margin Money for Guarantees / LC', sub: 'LC/BG margins — fixed lock-in period', code: '3006-MGM', opening: '620.80', current: '644.20', change: '+23.40', changeDir: 'up', status: 'Locked' },
|
||||
{ sl: '07', name: 'Certificates of Deposit (CD)', sub: 'Issued to corporates / FIs · 7.35%', code: '3007-CD', opening: '3,840.00', current: '3,920.50', change: '+80.50', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '08', name: 'Interest Accrued on Time Deposits', sub: 'Accrued but unpaid interest on FD/RD', code: '3008-IAT', opening: '842.60', current: '918.40', change: '+75.80', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '09', name: 'Long-term Deposits', sub: 'Tenor >5 years · 7.5%', code: '3009-LTD', opening: '5,620.40', current: '5,818.60', change: '+198.20', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '10', name: 'Tax Saving Deposits', sub: 'Sec 80C FDs — 5-year lock-in · 6.8%', code: '3010-TSD', opening: '1,240.80', current: '1,318.40', change: '+77.60', changeDir: 'up', status: 'Locked' },
|
||||
{ sl: '11', name: 'Foreign Currency Deposits', sub: 'FCNR(B), RFC — USD/EUR/GBP', code: '3011-FCD', opening: '2,184.60', current: '2,348.20', change: '+163.60', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '12', name: 'Time Liabilities to Other Banks', sub: 'Inter-bank term deposits — call money', code: '3012-TLB', opening: '1,840.20', current: '1,924.40', change: '+84.20', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '13', name: 'Term Borrowings', sub: 'Bonds, debentures, refinance · 8.1%', code: '3013-TBR', opening: '1,018.40', current: '1,118.50', change: '+100.10', changeDir: 'up', status: 'Active' }
|
||||
];
|
||||
|
||||
bankingAssets = [
|
||||
{ sl: '01', name: 'Balances with Other Banks', sub: 'Nostro / Vostro balances — SBI, PNB, BOB', code: '4001-BWB', opening: '3,840.20', current: '4,112.40', change: '+272.20', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '02', name: 'Money at Call with Banks', sub: 'Overnight & short-notice call money', code: '4002-MCB', opening: '2,180.50', current: '2,418.60', change: '+238.10', changeDir: 'up', status: 'Active' },
|
||||
{ sl: '03', name: 'Loans to Banks (Inter-Bank Lending)', sub: 'Term loans & credit lines to SCBs', code: '4003-LTB', opening: '1,580.00', current: '1,709.20', change: '+129.20', changeDir: 'up', status: 'Active' }
|
||||
];
|
||||
|
||||
liquidAssets = [
|
||||
{ sl: '01', name: 'Central Government Securities', sub: 'G-Secs held in HTM, AFS & HFT portfolios', code: '5001-CGS', opening: '6,840.50', current: '7,218.40', change: '+377.90', changeDir: 'up', status: 'Active', category: 'G-Sec' },
|
||||
{ sl: '02', name: 'State Development Loans (SDLs)', sub: 'State govt bonds — various maturities', code: '5002-SDL', opening: '2,420.30', current: '2,584.60', change: '+164.30', changeDir: 'up', status: 'Active', category: 'SDL' },
|
||||
{ sl: '03', name: 'Treasury Bills (91/182/364 day)', sub: 'Short-term govt securities — discounted', code: '5003-TB', opening: '1,840.20', current: '1,962.80', change: '+122.60', changeDir: 'up', status: 'Active', category: 'T-Bill' },
|
||||
{ sl: '04', name: 'Gold (valued at current market)', sub: 'Gold reserves held per RBI valuation norms', code: '5004-GLD', opening: '680.40', current: '724.60', change: '+44.20', changeDir: 'up', status: 'Active', category: 'Gold' },
|
||||
{ sl: '05', name: 'Special Deposit Scheme with RBI', sub: 'Deposits placed under SDS — SLR eligible', code: '5005-SDS', opening: '420.00', current: '420.00', change: '0.00', changeDir: 'up', status: 'Active', category: 'RBI Dep' },
|
||||
{ sl: '06', name: 'NABARD / SIDBI / NHB Bonds', sub: 'PSE bonds approved as SLR-eligible', code: '5006-PSE', opening: '310.80', current: '328.40', change: '+17.60', changeDir: 'up', status: 'Active', category: 'PSE Bond' }
|
||||
];
|
||||
|
||||
close(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
@@ -19,19 +19,47 @@
|
||||
<span>Regulatory & Compliance</span>
|
||||
</div>
|
||||
<div class="cards-row four-col">
|
||||
<!-- CRR / SRR -->
|
||||
<div class="dash-card mini">
|
||||
<div class="mini-icon blue"><fa-icon icon="lock"></fa-icon></div>
|
||||
<div class="mini-label">CRR / SRR</div>
|
||||
<div class="mini-value">₹ 20.14 Cr</div>
|
||||
<div class="mini-sub">8% <span class="tag-success">Within Limits</span></div>
|
||||
<!-- CRR / SLR -->
|
||||
<div class="dash-card mini crr-slr-card">
|
||||
<div class="mini-header-row">
|
||||
<div class="mini-icon blue"><fa-icon icon="lock"></fa-icon></div>
|
||||
<div class="mini-label">CRR / SLR</div>
|
||||
<button class="view-details-btn" (click)="openCrrSlrDialog()" matTooltip="View Details">
|
||||
<fa-icon icon="external-link-alt"></fa-icon> View
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-metrics">
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">CRR Required (3%)</span>
|
||||
<span class="metric-value">₹2,077 Cr</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">SLR Required (18%)</span>
|
||||
<span class="metric-value">₹12,460 Cr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-sub"><span class="tag-success">Within Limits</span></div>
|
||||
</div>
|
||||
|
||||
<!-- CRAR -->
|
||||
<div class="dash-card mini">
|
||||
<div class="mini-icon green"><fa-icon icon="chart-line"></fa-icon></div>
|
||||
<div class="mini-label">CRAR %</div>
|
||||
<div class="mini-value">21%</div>
|
||||
<div class="dash-card mini crr-slr-card">
|
||||
<div class="mini-header-row">
|
||||
<div class="mini-icon green"><fa-icon icon="chart-line"></fa-icon></div>
|
||||
<div class="mini-label">CRAR %</div>
|
||||
<button class="view-details-btn" (click)="openCrarDialog()" matTooltip="View Details">
|
||||
<fa-icon icon="external-link-alt"></fa-icon> View
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-metrics">
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">CRAR (Basel III)</span>
|
||||
<span class="metric-value">16.84%</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">CET1 Ratio</span>
|
||||
<span class="metric-value">12.42%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-sub"><span class="tag-success">Healthy (Min 9%)</span></div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -208,7 +208,51 @@ $purple: #7c3aed;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── CRR/SRR Metric Rows ─── */
|
||||
/* ─── CRR/SLR Card Header Row ─── */
|
||||
.mini-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
|
||||
.mini-icon {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mini-label {
|
||||
margin-bottom: 0;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.view-details-btn {
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #bfdbfe;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: #1d4ed8;
|
||||
color: #fff;
|
||||
border-color: #1d4ed8;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── CRR/SLR Metric Rows ─── */
|
||||
.card-metrics {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -14,6 +14,8 @@ import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { activities } from '../activities';
|
||||
import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { AsyncPipe, DatePipe } from '@angular/common';
|
||||
import { ClientTrendsBarComponent } from './client-trends-bar/client-trends-bar.component';
|
||||
import { AmountDisbursedPieComponent } from './amount-disbursed-pie/amount-disbursed-pie.component';
|
||||
@@ -32,6 +34,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatAutocompleteTrigger,
|
||||
MatAutocomplete,
|
||||
MatTooltipModule,
|
||||
ClientTrendsBarComponent,
|
||||
AmountDisbursedPieComponent,
|
||||
AmountCollectedPieComponent,
|
||||
@@ -42,6 +45,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
private router = inject(Router);
|
||||
private dialog = inject(MatDialog);
|
||||
|
||||
today = new Date();
|
||||
|
||||
@@ -147,4 +151,29 @@ export class DashboardComponent implements OnInit {
|
||||
const filterValue = activityName.toLowerCase();
|
||||
return this.allActivities.filter((activity) => activity.activity.toLowerCase().indexOf(filterValue) === 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Opens the CRR/SLR details dialog with full liabilities breakdown.
|
||||
*/
|
||||
async openCrrSlrDialog(): Promise<void> {
|
||||
const { CrrSlrDialogComponent } = await import('./crr-slr-dialog/crr-slr-dialog.component');
|
||||
this.dialog.open(CrrSlrDialogComponent, {
|
||||
width: '95vw',
|
||||
maxWidth: '1100px',
|
||||
maxHeight: '90vh',
|
||||
panelClass: 'crr-slr-dialog-panel',
|
||||
autoFocus: false
|
||||
});
|
||||
}
|
||||
|
||||
async openCrarDialog(): Promise<void> {
|
||||
const { CrarDialogComponent } = await import('./crar-dialog/crar-dialog.component');
|
||||
this.dialog.open(CrarDialogComponent, {
|
||||
width: '95vw',
|
||||
maxWidth: '1360px',
|
||||
maxHeight: '90vh',
|
||||
panelClass: 'crr-slr-dialog-panel',
|
||||
autoFocus: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,65 +6,137 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="layout-row align-end gap-2px responsive-column container m-b-20">
|
||||
<div #buttonDashboard class="in-block">
|
||||
<button mat-raised-button color="primary" [routerLink]="['/dashboard']">
|
||||
<fa-icon icon="tachometer-alt" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Dashboard' | translate }}
|
||||
</button>
|
||||
<div class="home-container">
|
||||
<!-- Welcome Banner -->
|
||||
<div class="welcome-banner">
|
||||
<div class="welcome-left">
|
||||
<div class="welcome-greeting">
|
||||
<h2>{{ 'labels.text.Welcome' | translate }}, <strong>{{ username }}</strong></h2>
|
||||
<p class="welcome-sub">{{ tenant | titlecase }} · CBSNexora Core Banking Platform</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="welcome-right">
|
||||
<div #searchActivity class="search-box">
|
||||
<fa-icon icon="search" class="search-icon"></fa-icon>
|
||||
<input matInput
|
||||
placeholder="{{ 'labels.placeholders.Search Activity' | translate }}"
|
||||
[matAutocomplete]="activitySearch"
|
||||
[formControl]="searchText"
|
||||
class="search-input" />
|
||||
<mat-autocomplete #activitySearch="matAutocomplete">
|
||||
@for (activity of filteredActivities | async; track activity) {
|
||||
<mat-option [routerLink]="activity.path">
|
||||
<span>{{ activity.activity }}</span>
|
||||
</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Action Cards -->
|
||||
<div class="quick-actions">
|
||||
<a class="qa-card" [routerLink]="['/dashboard']" #buttonDashboard>
|
||||
<div class="qa-icon blue"><fa-icon icon="tachometer-alt"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">{{ 'labels.buttons.Dashboard' | translate }}</span>
|
||||
<span class="qa-desc">Analytics & Reports</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/clients/create']">
|
||||
<div class="qa-icon green"><fa-icon icon="user-plus"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">New Client</span>
|
||||
<span class="qa-desc">Onboard Customer</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/loans']">
|
||||
<div class="qa-icon purple"><fa-icon icon="hand-holding-usd"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">Loans</span>
|
||||
<span class="qa-desc">Manage Advances</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/savings']">
|
||||
<div class="qa-icon amber"><fa-icon icon="piggy-bank"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">Savings</span>
|
||||
<span class="qa-desc">Deposit Accounts</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/accounting']">
|
||||
<div class="qa-icon teal"><fa-icon icon="calculator"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">Accounting</span>
|
||||
<span class="qa-desc">GL & Journals</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="qa-card" [routerLink]="['/reports']">
|
||||
<div class="qa-icon red"><fa-icon icon="chart-bar"></fa-icon></div>
|
||||
<div class="qa-info">
|
||||
<span class="qa-title">Reports</span>
|
||||
<span class="qa-desc">MIS & Statements</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Info Row -->
|
||||
<div class="info-row">
|
||||
<div class="info-card">
|
||||
<div class="info-card-header">
|
||||
<fa-icon icon="clock" class="info-icon"></fa-icon>
|
||||
<span>Today's Summary</span>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Date</span>
|
||||
<span class="info-value">{{ today | date: 'dd MMM yyyy' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Branch</span>
|
||||
<span class="info-value">Head Office</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">User</span>
|
||||
<span class="info-value">{{ username }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Tenant</span>
|
||||
<span class="info-value">{{ tenant | titlecase }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-card-header">
|
||||
<fa-icon icon="bolt" class="info-icon"></fa-icon>
|
||||
<span>Quick Links</span>
|
||||
</div>
|
||||
<div class="quick-links">
|
||||
<a [routerLink]="['/tasks']">Checker Inbox & Tasks</a>
|
||||
<a [routerLink]="['/organization']">Organization Setup</a>
|
||||
<a [routerLink]="['/products']">Product Configuration</a>
|
||||
<a [routerLink]="['/system']">System Administration</a>
|
||||
<a [routerLink]="['/users']">User Management</a>
|
||||
<a [routerLink]="['/settings']">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title class="title">
|
||||
{{ 'labels.text.Welcome' | translate }} {{ username }} {{ 'labels.text.To' | translate }}
|
||||
{{ tenant | titlecase }}!
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
|
||||
<mat-card-content #searchActivity>
|
||||
<div class="layout-column">
|
||||
<mat-form-field>
|
||||
<mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
|
||||
<input matInput [matAutocomplete]="activitySearch" [formControl]="searchText" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-autocomplete #activitySearch="matAutocomplete">
|
||||
@for (activity of filteredActivities | async; track activity) {
|
||||
<mat-option [routerLink]="activity.path">
|
||||
<span>{{ activity.activity }}</span>
|
||||
</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-card-content>
|
||||
|
||||
<img mat-card-image src="assets/images/{{ tenant }}_home.png" alt="Mifos X" />
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Wizard Popovers (kept for backward compat) -->
|
||||
<ng-template #popoverButtons let-popover="popover" let-prev="prev" let-next="next">
|
||||
<div class="layout-row align-end gap-2px responsive-column">
|
||||
<button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
|
||||
{{ 'labels.buttons.Close' | translate }}
|
||||
</button>
|
||||
@if (prev) {
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(prev.template, prev.target, 'bottom', true)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(prev.template, prev.target, 'bottom', true)">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (next) {
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(next.template, next.target, 'bottom', true)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(next.template, next.target, 'bottom', true)">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
}
|
||||
@@ -81,11 +153,7 @@
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(templateSearchActivity, searchActivity, 'top', true)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateSearchActivity, searchActivity, 'top', true)">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -98,11 +166,7 @@
|
||||
<button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
|
||||
{{ 'labels.buttons.Close' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="popover.close(); showPopover(templateButtonDashboard, buttonDashboard, 'bottom', true)"
|
||||
>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); showPopover(templateButtonDashboard, buttonDashboard, 'bottom', true)">
|
||||
{{ 'labels.buttons.Back' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
|
||||
|
||||
@@ -6,21 +6,304 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$brand-dark: #0d3d78;
|
||||
$accent: #0ea5e9;
|
||||
|
||||
.title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
margin-left: -15px;
|
||||
.home-container {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
/* ── Welcome Banner ── */
|
||||
.welcome-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 20px 28px;
|
||||
background: linear-gradient(135deg, $brand-dark 0%, #1a5276 100%);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: repeating-linear-gradient(108deg, transparent 0, transparent 80px, rgb(255 255 255 / 2.5%) 80px, rgb(255 255 255 / 2.5%) 160px);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-list-base {
|
||||
padding-top: 0;
|
||||
.welcome-left {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
.welcome-greeting {
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-sub {
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.welcome-right {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
padding: 6px 14px;
|
||||
min-width: 280px;
|
||||
transition: background 0.15s;
|
||||
|
||||
&:focus-within {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Quick Action Cards ── */
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.qa-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 14px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
transition: box-shadow 0.15s, transform 0.15s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.qa-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.blue { background: #e0f2fe; color: #0284c7; }
|
||||
&.green { background: #d1fae5; color: #059669; }
|
||||
&.purple { background: #ede9fe; color: #7c3aed; }
|
||||
&.amber { background: #fef3c7; color: #d97706; }
|
||||
&.teal { background: #ccfbf1; color: #0d9488; }
|
||||
&.red { background: #fee2e2; color: #dc2626; }
|
||||
}
|
||||
|
||||
.qa-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.qa-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.qa-desc {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Info Row ── */
|
||||
.info-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
|
||||
.info-icon {
|
||||
color: $accent;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
|
||||
|
||||
&:nth-last-child(-n+2) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 13px;
|
||||
color: #1a1a1a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quick-links {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
padding: 4px 0;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
color: $brand-dark;
|
||||
text-decoration: none;
|
||||
padding: 7px 16px;
|
||||
transition: background 0.1s;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
|
||||
|
||||
&:hover {
|
||||
background: #f0f9ff;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
&:nth-last-child(-n+2) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Dark Theme ── */
|
||||
:host-context(.dark-theme) {
|
||||
.qa-card, .info-card {
|
||||
background: #1e1e2e;
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.qa-title { color: #e0e0e0; }
|
||||
.qa-desc { color: #666; }
|
||||
.info-card-header { background: #252536; }
|
||||
.info-value { color: #e0e0e0; }
|
||||
.info-label { color: #666; }
|
||||
|
||||
.quick-links a {
|
||||
color: #7dd3fc;
|
||||
&:hover { background: rgba(255, 255, 255, 0.04); }
|
||||
}
|
||||
|
||||
.search-input {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 1024px) {
|
||||
.quick-actions {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.welcome-banner {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.info-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.quick-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,9 +29,8 @@ import { SettingsService } from 'app/settings/settings.service';
|
||||
/** Custom Components */
|
||||
import { NextStepDialogComponent } from '../configuration-wizard/next-step-dialog/next-step-dialog.component';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardImage } from '@angular/material/card';
|
||||
import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
|
||||
import { AsyncPipe } from '@angular/common';
|
||||
import { AsyncPipe, DatePipe, TitleCasePipe } from '@angular/common';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
@@ -44,12 +43,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
FaIconComponent,
|
||||
MatCardHeader,
|
||||
MatCardTitle,
|
||||
MatAutocompleteTrigger,
|
||||
MatAutocomplete,
|
||||
MatCardImage,
|
||||
AsyncPipe
|
||||
AsyncPipe,
|
||||
DatePipe,
|
||||
TitleCasePipe
|
||||
]
|
||||
})
|
||||
export class HomeComponent implements OnInit, AfterViewInit {
|
||||
@@ -65,6 +63,8 @@ export class HomeComponent implements OnInit, AfterViewInit {
|
||||
username: string;
|
||||
/** Tenant name */
|
||||
tenant: string;
|
||||
/** Today's date */
|
||||
today = new Date();
|
||||
/** Activity Form. */
|
||||
activityForm: any;
|
||||
/** Search Text. */
|
||||
|
||||
Reference in New Issue
Block a user