feat: add CFCFRMS module, bank menus, mock backend, and dashboard redesign
- 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
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
0a32d7135e
commit
b3a4cce0cf
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user