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

feat: add CFCFRMS module, bank menus, mock backend, and dashboard redesign

Browse Source 
- CFCFRMS cyber fraud complaint management with dashboard, complaints,
  escalation, report suspect/mule/fraud txn, FMR submission, CFR lookup
- Mock HTTP interceptor with 20 dummy complaints and all endpoints
- Simulator service for I4C/MHA integration testing
- 3-row menu bar with 22 items (7+8+8 layout)
- Mega menus for General Ledger, Sub Ledger, Deposits, Share, Others,
  HRM, RBI with search and grouped columns
- Dropdowns for Cashier, Clearing, NPA, CKYC, Advances, Letter Mgmt,
  Insurance, Digital
- Dashboard redesign with regulatory, financial health, deposits,
  risk/NPA sections using static banking data
- All translations added to en-US.json
- FontAwesome icons registered for all new menu items

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
2026-03-18 18:05:43 +05:30
co-authored by Claude Opus 4.6
parent 0a32d7135e
commit b3a4cce0cf
55 changed files with 9667 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/dashboard/dashboard.component.html
+241 -91
View File
@@ -7,132 +7,282 @@
-->
<div class="cbs-dashboard-container">
<div class="cbs-header">Core Banking System Dashboard</div>
<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">
<!-- Search Activity -->
<div class="search-row">
<mat-card-content>
<mat-form-field class="search-field">
<mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
<input matInput [matAutocomplete]="activitySearch" [formControl]="searchText" />
</mat-form-field>
<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>
<!-- ═══════ SECTION: Regulatory & Compliance ═══════ -->
<div class="section-header regulatory">
<fa-icon icon="shield-alt" class="section-icon"></fa-icon>
<span>Regulatory &amp; Compliance</span>
</div>
<!-- Regulatory & Compliance -->
<div class="section-title">Regulatory & Compliance</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-title">CRR / SLR</div>
<div class="stat-card-value">&#8377; 125 Cr</div>
<div class="stat-trend up">&#9650; Within Limits</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">&#8377; 20.14 Cr</div>
<div class="mini-sub">8% <span class="tag-success">Within Limits</span></div>
</div>
<div class="stat-card">
<div class="stat-card-title">CRAR</div>
<div class="stat-card-value">13.42%</div>
<div class="stat-trend up">&#9650; Healthy</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="mini-sub"><span class="tag-success">Healthy (Min 9%)</span></div>
</div>
<div class="stat-card">
<div class="stat-card-title">DICGC (Samyak)</div>
<div class="stat-card-value">Updated</div>
<div class="stat-trend">Last Sync: Today</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>
<div class="stat-card">
<div class="stat-card-title">Interbank Exposure</div>
<div class="stat-card-value">72%</div>
<div class="stat-trend down">&#9660; Near Limit</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>
<!-- Financial Health -->
<div class="section-title">Financial Health</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-title">Net Worth</div>
<div class="stat-card-value">&#8377; 342 Cr</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="stat-card">
<div class="stat-card-title">CD Ratio</div>
<div class="stat-card-value">68.2%</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="stat-card">
<div class="stat-card-title">Capital Working</div>
<div class="stat-card-value">&#8377; 210 Cr</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="stat-card">
<div class="stat-card-title">Per Employee Income</div>
<div class="stat-card-value">&#8377; 8.4 L</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>
<!-- Deposits & Advances -->
<div class="section-title">Deposits & Advances</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-title">Total Deposits</div>
<div class="stat-card-value">&#8377; 1,240 Cr</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>
<div class="stat-card">
<div class="stat-card-title">Total Advances</div>
<div class="stat-card-value">&#8377; 845 Cr</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>
<div class="stat-card">
<div class="stat-card-title">Decay Analysis</div>
<div class="stat-card-value">Moderate</div>
</div>
<div class="stat-card">
<div class="stat-card-title">TSWM</div>
<div class="stat-card-value">Active</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>
<!-- Risk & NPA Monitoring -->
<div class="section-title">Risk & NPA Monitoring</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-title">Gross NPA</div>
<div class="stat-card-value">4.82%</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>
<div class="stat-card">
<div class="stat-card-title">Net NPA</div>
<div class="stat-card-value">2.11%</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>
<div class="stat-card">
<div class="stat-card-title">Risk-wise Analysis</div>
<div class="stat-card-value">Stable</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>
<!-- Alerts & Notifications -->
<div class="section-title">Alerts & Notifications</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">
<span>&#9888; CRAR approaching minimum threshold.</span><br />
<span>&#9888; Interbank exposure nearing limit.</span><br />
<span>&#9888; RBI circular pending review.</span>
<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>
<!-- Existing Charts -->
<div class="section-title">Analytics</div>
<!-- ═══════ SECTION: Analytics Charts ═══════ -->
<div class="section-header analytics">
<fa-icon icon="chart-bar" class="section-icon"></fa-icon>
<span>Analytics</span>
</div>
<div class="charts-section">
<div class="top-card">
<div class="trends-bar">
src/app/home/dashboard/dashboard.component.scss
+661 -67
View File
@@ -6,27 +6,45 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
$navy: #0d1b2a;
$blue: #1e88e5;
$green: #10b981;
$orange: #f59e0b;
$red: #ef4444;
$purple: #7c3aed;
.cbs-dashboard-container {
background: #f4f6f9;
background: #f0f2f5;
min-height: 100vh;
}
.cbs-header {
background: #1f3b73;
background: linear-gradient(135deg, $navy 0%, #1b3a5c 100%);
color: white;
padding: 15px 25px;
font-size: 20px;
font-weight: bold;
padding: 6px 24px;
font-size: 16px;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
.header-date {
font-size: 11px;
font-weight: 400;
opacity: 0.8;
}
}
.cbs-content {
padding: 20px;
padding: 0 24px 12px;
max-width: 1440px;
margin: 0 auto;
}
.search-row {
width: 100%;
margin-bottom: 10px;
margin: 0;
mat-card-content {
width: 100%;
}
@@ -34,69 +52,625 @@
.search-field {
width: 100%;
}
}
.section-title {
margin: 20px 0 10px;
font-size: 16px;
font-weight: bold;
color: #333;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
}
.stat-card {
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
transition: box-shadow 0.2s ease;
&:hover {
box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
.mat-mdc-form-field {
margin-bottom: 0;
}
}
.stat-card-title {
/* ─── Section Headers ─── */
.section-header {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 6px;
padding: 5px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
.section-icon {
font-size: 16px;
}
&.regulatory {
background: #e3f2fd;
color: #0d47a1;
}
&.financial {
background: #e8f5e9;
color: #1b5e20;
}
&.deposits {
background: #f3e5f5;
color: #6a1b9a;
}
&.risk {
background: #fce4ec;
color: #b71c1c;
}
&.alerts {
background: #fff3e0;
color: #e65100;
}
&.analytics {
background: #e0f2f1;
color: #004d40;
}
}
/* ─── Card Grid Layouts ─── */
.cards-row {
display: grid;
gap: 12px;
}
.four-col {
grid-template-columns: repeat(4, 1fr);
}
.five-col {
grid-template-columns: repeat(5, 1fr);
}
.three-col {
grid-template-columns: repeat(3, 1fr);
}
.two-col {
grid-template-columns: repeat(2, 1fr);
}
/* ─── Dashboard Cards ─── */
.dash-card {
background: #fff;
border-radius: 8px;
padding: 14px;
box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
border: 1px solid #e8ecf0;
transition:
box-shadow 0.2s,
transform 0.15s;
&:hover {
box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
transform: translateY(-1px);
}
}
.card-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.card-icon-wrap {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
flex-shrink: 0;
&.blue {
background: $blue;
}
&.green {
background: $green;
}
&.orange {
background: $orange;
}
&.red {
background: $red;
}
&.purple {
background: $purple;
}
}
.card-label {
font-size: 13px;
color: #777;
font-weight: 600;
color: #475569;
}
.card-big-value {
font-size: 32px;
font-weight: 800;
color: $navy;
margin-bottom: 8px;
}
.stat-card-value {
font-size: 22px;
font-weight: bold;
color: #1f3b73;
}
.stat-trend {
/* ─── Card Status Badges ─── */
.card-status {
font-size: 12px;
margin-top: 5px;
color: #888;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 5px;
&.up {
color: green;
&.success {
background: #ecfdf5;
color: #065f46;
}
&.down {
color: red;
&.warning {
background: #fffbeb;
color: #92400e;
}
&.info {
background: #eff6ff;
color: #1e40af;
}
}
.alert-panel {
background: #fff3f3;
border-left: 4px solid red;
padding: 10px 15px;
border-radius: 6px;
/* ─── CRR/SRR Metric Rows ─── */
.card-metrics {
margin-bottom: 10px;
}
.metric-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px solid #f1f5f9;
&:last-child {
border-bottom: none;
}
}
.metric-label {
font-size: 12px;
color: #94a3b8;
}
.metric-value {
font-size: 14px;
font-weight: 700;
color: $navy;
}
/* ─── DICSC Mini Table ─── */
.dicsc-card {
padding: 14px;
}
.mini-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
margin-top: 4px;
th {
text-align: right;
font-weight: 600;
color: #64748b;
padding: 4px 6px;
border-bottom: 2px solid #e2e8f0;
font-size: 11px;
&:first-child {
text-align: left;
}
}
td {
text-align: right;
padding: 5px 6px;
color: $navy;
font-weight: 600;
border-bottom: 1px solid #f1f5f9;
}
.row-label {
text-align: left;
color: #64748b;
font-weight: 500;
}
}
/* ─── Interbank Exposure ─── */
.exposure-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.exposure-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
padding: 4px 0;
color: #475569;
}
.badge {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
&.maintain {
background: #ecfdf5;
color: #065f46;
}
&.exceed {
background: #fef2f2;
color: #991b1b;
}
}
/* ─── Mini Cards (Financial Health) ─── */
.dash-card.mini {
text-align: center;
padding: 16px 12px;
}
.mini-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
font-size: 18px;
color: #fff;
&.blue {
background: $blue;
}
&.green {
background: $green;
}
&.purple {
background: $purple;
}
&.orange {
background: $orange;
}
&.red {
background: $red;
}
}
.mini-label {
font-size: 12px;
color: #64748b;
margin-bottom: 4px;
}
.mini-value {
font-size: 22px;
font-weight: 800;
color: $navy;
}
.mini-sub {
font-size: 11px;
color: #64748b;
margin-top: 4px;
}
.tag-success {
background: #ecfdf5;
color: #065f46;
padding: 2px 6px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
}
.tag-warning {
background: #fffbeb;
color: #92400e;
padding: 2px 6px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
}
.tag-danger {
background: #fef2f2;
color: #991b1b;
padding: 2px 6px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
}
/* ─── Compact Detail Cards ─── */
.dash-card.compact {
padding: 12px 16px;
}
.compact-header {
font-size: 13px;
line-height: 1.8;
color: #333;
font-weight: 700;
color: #475569;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.compact-icon {
font-size: 14px;
&.purple-text {
color: $purple;
}
&.orange-text {
color: $orange;
}
}
.exposure-pct {
font-weight: 700;
color: $navy;
margin-left: auto;
margin-right: 8px;
}
/* ─── Deposits vs Advances ─── */
.da-compare {
display: flex;
flex-direction: column;
gap: 14px;
}
.da-item {
.da-label {
font-size: 12px;
color: #64748b;
margin-bottom: 2px;
}
.da-value {
font-size: 20px;
font-weight: 800;
margin-bottom: 6px;
&.deposit {
color: $blue;
}
&.advance {
color: $purple;
}
}
}
.da-bar {
height: 8px;
background: #f1f5f9;
border-radius: 4px;
overflow: hidden;
}
.da-fill {
height: 100%;
border-radius: 4px;
transition: width 1s ease;
&.deposit-fill {
background: linear-gradient(90deg, $blue, #42a5f5);
}
&.advance-fill {
background: linear-gradient(90deg, $purple, #a78bfa);
}
}
/* ─── PSL Breakdown ─── */
.psl-breakdown {
margin-top: 8px;
}
.psl-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.psl-label {
font-size: 12px;
color: #64748b;
width: 100px;
flex-shrink: 0;
}
.psl-bar-wrap {
flex: 1;
height: 10px;
background: #f1f5f9;
border-radius: 5px;
overflow: hidden;
}
.psl-bar {
height: 100%;
border-radius: 5px;
&.weaker {
background: $orange;
}
&.msme {
background: $green;
}
}
.psl-pct {
font-size: 13px;
font-weight: 700;
color: $navy;
width: 36px;
text-align: right;
}
/* ─── Portfolio Quality ─── */
.quality-grid {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
}
.quality-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.quality-label {
font-size: 13px;
color: #475569;
}
.quality-badge {
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
&.moderate {
background: #fffbeb;
color: #92400e;
}
&.active {
background: #ecfdf5;
color: #065f46;
}
}
/* ─── NPA Gauge Cards ─── */
.npa-gauge {
display: flex;
align-items: center;
gap: 16px;
margin-top: 4px;
}
.npa-circle {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.gross {
background: conic-gradient($red 0% 7%, #fee2e2 7% 100%);
box-shadow: inset 0 0 0 12px #fff;
}
&.net {
background: conic-gradient($green 0% 2%, #ecfdf5 2% 100%);
box-shadow: inset 0 0 0 12px #fff;
}
}
.npa-pct {
font-size: 18px;
font-weight: 800;
color: $navy;
}
.npa-detail {
.npa-status {
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 4px;
&.success {
color: #065f46;
}
&.warning {
color: #b45309;
}
}
.npa-note {
font-size: 11px;
color: #94a3b8;
}
}
/* ─── Risk Summary ─── */
.risk-summary {
display: flex;
flex-direction: column;
gap: 8px;
margin: 8px 0 12px;
}
.risk-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #475569;
}
.risk-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
&.green {
background: $green;
}
&.yellow {
background: $orange;
}
&.red {
background: $red;
}
}
.risk-val {
margin-left: auto;
font-weight: 700;
color: $navy;
}
/* ─── Alerts ─── */
.alert-panel {
background: #fff;
border-radius: 10px;
padding: 14px 18px;
border: 1px solid #e8ecf0;
display: flex;
flex-direction: column;
gap: 8px;
}
.alert-item {
font-size: 13px;
padding: 8px 12px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 8px;
&.warning {
background: #fffbeb;
color: #92400e;
border-left: 3px solid $orange;
}
&.info {
background: #eff6ff;
color: #1e40af;
border-left: 3px solid $blue;
}
}
/* ─── Charts ─── */
.charts-section {
display: flex;
flex-direction: column;
@@ -125,29 +699,49 @@
margin-top: 30px;
text-align: center;
font-size: 12px;
color: #888;
color: #94a3b8;
padding: 15px 0;
}
/* ─── Responsive ─── */
@media screen and (width <= 1200px) {
.four-col {
grid-template-columns: repeat(2, 1fr);
}
.five-col {
grid-template-columns: repeat(3, 1fr);
}
.three-col {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (width <= 768px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
.four-col,
.five-col,
.three-col {
grid-template-columns: 1fr;
}
.stat-card-value {
.card-big-value {
font-size: 26px;
}
.mini-value {
font-size: 18px;
}
.charts-section {
.bottom-card {
flex-direction: column;
.cbs-header {
flex-direction: column;
gap: 4px;
text-align: center;
}
.amount-collected,
.amount-disbursed {
flex: 1 0 100%;
width: 100%;
}
.charts-section .bottom-card {
flex-direction: column;
.amount-collected,
.amount-disbursed {
flex: 1 0 100%;
width: 100%;
}
}
}
src/app/home/dashboard/dashboard.component.ts
+7 -2
View File
@@ -14,10 +14,11 @@ import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { activities } from '../activities';
import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
import { AsyncPipe } from '@angular/common';
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';
import { AmountCollectedPieComponent } from './amount-collected-pie/amount-collected-pie.component';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
/**
* Dashboard component.
@@ -34,12 +35,16 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
ClientTrendsBarComponent,
AmountDisbursedPieComponent,
AmountCollectedPieComponent,
AsyncPipe
AsyncPipe,
DatePipe,
FaIconComponent
]
})
export class DashboardComponent implements OnInit {
private router = inject(Router);
today = new Date();
/** Array of all user activities */
userActivity: string[];
/** Array of most recent user activities */