Files
cbsnexora/src/app/home/dashboard/dashboard.component.html
T
AdityaandClaude Opus 4.6 b890d24bb7 feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview
- Hide Financial & Classification section for non-individual entities in personal data and preview
- Fix legal form column in clients list — fetch legalForm from client API for correct display
- Add person/business icon before client name in list rows
- Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API
- Add registration number format hint (mat-hint) based on constitution type
- Add spacing between verification row and constitution type dropdowns
- Reduce table cell padding and prevent action buttons from being clipped
- Add missing MPL-2.0 license headers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 15:10:51 +05:30

311 lines
12 KiB
HTML

<!--
Copyright since 2025 Mifos Initiative
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<div class="cbs-dashboard-container">
<div class="cbs-header">
<span class="header-title">Core Banking System Dashboard</span>
<span class="header-date">{{ today | date: 'mediumDate' }}</span>
</div>
<div class="cbs-content">
<!-- ═══════ SECTION: Regulatory & Compliance ═══════ -->
<div class="section-header regulatory">
<fa-icon icon="shield-alt" class="section-icon"></fa-icon>
<span>Regulatory &amp; Compliance</span>
</div>
<div class="cards-row four-col">
<!-- 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">&#8377;2,077 Cr</span>
</div>
<div class="metric-row">
<span class="metric-label">SLR Required (18%)</span>
<span class="metric-value">&#8377;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 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>
<!-- DICSC with table inside -->
<div class="dash-card compact">
<div class="compact-header"><fa-icon icon="database" class="compact-icon purple-text"></fa-icon> DICSC</div>
<table class="mini-table">
<thead>
<tr>
<th></th>
<th>Freeze</th>
<th>Inop.</th>
<th>Rectified</th>
</tr>
</thead>
<tbody>
<tr>
<td class="row-label">Aadhaar</td>
<td>2,000</td>
<td>1,000</td>
<td>1,100</td>
</tr>
<tr>
<td class="row-label">PAN</td>
<td>3,000</td>
<td>2,000</td>
<td>2,200</td>
</tr>
<tr>
<td class="row-label">Mobile</td>
<td>2,000</td>
<td>—</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<!-- Interbank Exposure with details inside -->
<div class="dash-card compact">
<div class="compact-header">
<fa-icon icon="exchange" class="compact-icon orange-text"></fa-icon> Interbank Exposure — 20%
</div>
<div class="exposure-list">
<div class="exposure-row">
<span>Yes Bank</span><span class="exposure-pct">3%</span><span class="badge maintain">Maintain</span>
</div>
<div class="exposure-row">
<span>IDBI</span><span class="exposure-pct">11%</span><span class="badge exceed">Exceed</span>
</div>
<div class="exposure-row">
<span>Other Bank</span><span class="exposure-pct">6%</span><span class="badge exceed">Exceed</span>
</div>
</div>
</div>
</div>
<!-- ═══════ SECTION: Financial Health ═══════ -->
<div class="section-header financial">
<fa-icon icon="chart-bar" class="section-icon"></fa-icon>
<span>Financial Health</span>
</div>
<div class="cards-row five-col">
<div class="dash-card mini">
<div class="mini-icon blue"><fa-icon icon="university"></fa-icon></div>
<div class="mini-label">Net Worth</div>
<div class="mini-value">&#8377; 342 Cr</div>
</div>
<div class="dash-card mini">
<div class="mini-icon green"><fa-icon icon="chart-pie"></fa-icon></div>
<div class="mini-label">CD Ratio</div>
<div class="mini-value">65%</div>
</div>
<div class="dash-card mini">
<div class="mini-icon purple"><fa-icon icon="cogs"></fa-icon></div>
<div class="mini-label">Working Capital</div>
<div class="mini-value">&#8377; 210 Cr</div>
</div>
<div class="dash-card mini">
<div class="mini-icon orange"><fa-icon icon="user-tie"></fa-icon></div>
<div class="mini-label">Per Employee Profit</div>
<div class="mini-value">&#8377; 10 Lakh</div>
</div>
<div class="dash-card mini">
<div class="mini-icon red"><fa-icon icon="hand-holding-usd"></fa-icon></div>
<div class="mini-label">Advance &lt; 25 Lakh</div>
<div class="mini-value">55%</div>
</div>
</div>
<!-- ═══════ SECTION: Deposits & Advances ═══════ -->
<div class="section-header deposits">
<fa-icon icon="piggy-bank" class="section-icon"></fa-icon>
<span>Deposits &amp; Advances</span>
</div>
<div class="cards-row three-col">
<!-- Deposits & Advances Summary -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon-wrap blue"><fa-icon icon="coins"></fa-icon></div>
<div class="card-label">Deposits vs Advances</div>
</div>
<div class="da-compare">
<div class="da-item">
<div class="da-label">Total Deposits</div>
<div class="da-value deposit">&#8377; 3,264.42 Cr</div>
<div class="da-bar"><div class="da-fill deposit-fill" style="width: 78%"></div></div>
</div>
<div class="da-item">
<div class="da-label">Total Advances</div>
<div class="da-value advance">&#8377; 4,162.65 Cr</div>
<div class="da-bar"><div class="da-fill advance-fill" style="width: 100%"></div></div>
</div>
</div>
</div>
<!-- PSL -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon-wrap green"><fa-icon icon="flag"></fa-icon></div>
<div class="card-label">Priority Sector Lending (PSL)</div>
</div>
<div class="card-big-value">65%</div>
<div class="psl-breakdown">
<div class="psl-row">
<span class="psl-label">Weaker Section</span>
<div class="psl-bar-wrap">
<div class="psl-bar weaker" style="width: 15%"></div>
</div>
<span class="psl-pct">15%</span>
</div>
<div class="psl-row">
<span class="psl-label">MSME</span>
<div class="psl-bar-wrap">
<div class="psl-bar msme" style="width: 7%"></div>
</div>
<span class="psl-pct">7%</span>
</div>
</div>
</div>
<!-- Decay & TSWM -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon-wrap purple"><fa-icon icon="chart-bar"></fa-icon></div>
<div class="card-label">Portfolio Quality</div>
</div>
<div class="quality-grid">
<div class="quality-item">
<div class="quality-label">Decay Analysis</div>
<div class="quality-badge moderate">Moderate</div>
</div>
<div class="quality-item">
<div class="quality-label">TSWM</div>
<div class="quality-badge active">Active</div>
</div>
</div>
</div>
</div>
<!-- ═══════ SECTION: Risk & NPA Monitoring ═══════ -->
<div class="section-header risk">
<fa-icon icon="exclamation-triangle" class="section-icon"></fa-icon>
<span>Risk &amp; NPA Monitoring</span>
</div>
<div class="cards-row three-col">
<!-- Gross NPA -->
<div class="dash-card npa-card">
<div class="card-top">
<div class="card-icon-wrap red"><fa-icon icon="chart-line"></fa-icon></div>
<div class="card-label">Gross NPA</div>
</div>
<div class="npa-gauge">
<div class="npa-circle gross">
<span class="npa-pct">7%</span>
</div>
<div class="npa-detail">
<div class="npa-status warning"><fa-icon icon="exclamation-triangle"></fa-icon> Above Threshold</div>
<div class="npa-note">RBI norm: &lt; 5%</div>
</div>
</div>
</div>
<!-- Net NPA -->
<div class="dash-card npa-card">
<div class="card-top">
<div class="card-icon-wrap orange"><fa-icon icon="chart-line"></fa-icon></div>
<div class="card-label">Net NPA</div>
</div>
<div class="npa-gauge">
<div class="npa-circle net">
<span class="npa-pct">2%</span>
</div>
<div class="npa-detail">
<div class="npa-status success"><fa-icon icon="check-circle"></fa-icon> Within Limits</div>
<div class="npa-note">RBI norm: &lt; 3%</div>
</div>
</div>
</div>
<!-- Risk Analysis -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon-wrap blue"><fa-icon icon="shield-alt"></fa-icon></div>
<div class="card-label">Risk-wise Analysis</div>
</div>
<div class="risk-summary">
<div class="risk-item">
<span class="risk-dot green"></span>
<span>Low Risk</span>
<span class="risk-val">62%</span>
</div>
<div class="risk-item">
<span class="risk-dot yellow"></span>
<span>Medium Risk</span>
<span class="risk-val">25%</span>
</div>
<div class="risk-item">
<span class="risk-dot red"></span>
<span>High Risk</span>
<span class="risk-val">13%</span>
</div>
</div>
<div class="card-status info"><fa-icon icon="info-circle"></fa-icon> Overall: Stable</div>
</div>
</div>
<!-- ═══════ SECTION: Alerts & Notifications ═══════ -->
<div class="section-header alerts">
<fa-icon icon="bell" class="section-icon"></fa-icon>
<span>Alerts &amp; Notifications</span>
</div>
<div class="alert-panel">
<div class="alert-item warning">
<fa-icon icon="exclamation-triangle"></fa-icon> Gross NPA at 7% — above RBI threshold of 5%. Immediate review
required.
</div>
<div class="alert-item warning">
<fa-icon icon="exclamation-triangle"></fa-icon> IDBI interbank exposure at 11% — exceeds single-party limit.
</div>
<div class="alert-item info"><fa-icon icon="info-circle"></fa-icon> DICSC data synced successfully today.</div>
<div class="alert-item info">
<fa-icon icon="info-circle"></fa-icon> RBI circular pending review — compliance action due by month end.
</div>
</div>
</div>
</div>