feat: KYC re-verify UX, family/nominee tab gating, savings dialogs, cfcfrms shell
- KYC tab: fix Verify (PAN) and Send OTP (Aadhaar) being disabled in edit mode; unmask Aadhaar input and show on-file masked value as hint; resolve kycId from id/kycId/resourceId fallbacks. - Client stepper/view: add familyAllowed / nomineeAllowed predicates + CanActivate route guards. Family tab hidden for non-individuals, Nominee tab hidden for non-proprietor entities. Family-members step accepts a nomineeOnly input for proprietorship clients. Add/Edit/Delete buttons inside family-members and nominee tabs gated by canAdd. - cfcfrms: add cfcfrms-shell wrapper, restyle complaint/fraud/mule/escalate pages and dashboard. - Savings: identity-verify and transaction-confirm dialogs, manage / activate / add-charge flows, account preview styling. - Tasks, core shell, account-nominees, icons: minor style and behaviour updates. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
bf3e26a0d0
commit
b149fef72e
+244
@@ -80,6 +80,23 @@
|
||||
min-width: 1040px;
|
||||
}
|
||||
|
||||
/* Admin Mega Menu — 3-column rectangular panel (Setup · Catalog ·
|
||||
Audit & Compliance). Reuses the deposit-mega-menu grid + group chrome
|
||||
and retints the group-title accent to Admin purple. */
|
||||
.admin-mega-panel {
|
||||
max-width: 760px !important;
|
||||
}
|
||||
|
||||
.admin-grid {
|
||||
grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
|
||||
min-width: 680px;
|
||||
|
||||
.deposit-group-title {
|
||||
color: #7c3aed !important;
|
||||
border-bottom-color: #7c3aed !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Material Select Panel Styles (Material Design 3) =====
|
||||
.mat-mdc-select-panel {
|
||||
background: var(--md-sys-color-surface-container, #fff);
|
||||
@@ -1026,6 +1043,233 @@ mat-card {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ─── Savings Account Actions Menu ───
|
||||
Modern Nexora dropdown for the kebab on the savings account view hero.
|
||||
Groups actions semantically (Transact · Restrict · Interest · Admin ·
|
||||
Danger zone) and colour-codes each row's icon by category. */
|
||||
.sav-action-menu.mat-mdc-menu-panel {
|
||||
min-width: 280px !important;
|
||||
max-width: 320px !important;
|
||||
border-radius: 14px !important;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow:
|
||||
0 12px 32px -8px rgb(15 23 42 / 18%),
|
||||
0 4px 12px -4px rgb(15 23 42 / 10%) !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sav-action-menu .mat-mdc-menu-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.sav-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Inter, 'DM Sans', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.sav-menu__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 45%, #4338ca 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sav-menu__head-ico {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: rgb(255 255 255 / 18%);
|
||||
border: 1px solid rgb(255 255 255 / 28%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sav-menu__head-title {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.sav-menu__head-sub {
|
||||
margin-top: 1px;
|
||||
font-size: 10.5px;
|
||||
color: rgb(255 255 255 / 78%);
|
||||
}
|
||||
|
||||
.sav-menu__group {
|
||||
padding: 6px 0;
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: #fefafa;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sav-menu__group-title {
|
||||
font-size: 9.5px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: #94a3b8;
|
||||
padding: 4px 14px 2px;
|
||||
}
|
||||
|
||||
.sav-menu__item.mat-mdc-menu-item {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 38px !important;
|
||||
height: 38px !important;
|
||||
padding: 0 14px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #0d1b2a !important;
|
||||
background: transparent !important;
|
||||
transition: background 0.12s ease;
|
||||
|
||||
/* Hide Material's default trailing chevron/state container so our
|
||||
icon + label are the only visual elements. */
|
||||
.mat-mdc-menu-item-text {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sav-menu__ico {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 7px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11.5px;
|
||||
flex-shrink: 0;
|
||||
background: #e0e7ff;
|
||||
color: #4338ca;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
transform 0.12s ease,
|
||||
background 0.12s ease,
|
||||
color 0.12s ease;
|
||||
}
|
||||
|
||||
.sav-menu__label {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Hover lift on the icon */
|
||||
.sav-menu__item:hover .sav-menu__ico {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
/* Variant tints */
|
||||
.sav-menu__item--transact .sav-menu__ico {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.sav-menu__item--block .sav-menu__ico {
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.sav-menu__item--interest .sav-menu__ico {
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.sav-menu__item--admin .sav-menu__ico {
|
||||
background: #f5f3ff;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.sav-menu__item--danger.mat-mdc-menu-item {
|
||||
color: #991b1b !important;
|
||||
}
|
||||
|
||||
.sav-menu__item--danger .sav-menu__ico {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.sav-menu__item--danger:hover {
|
||||
background: #fef2f2 !important;
|
||||
}
|
||||
|
||||
/* ─── Identity-Verify Dialog Panel ───
|
||||
Strip Material's default surface padding so the teal gradient header
|
||||
on the Withdraw "Verify Customer Identity" pop-up reaches edge-to-edge
|
||||
(no white gutter around the gradient). */
|
||||
.idv-panel {
|
||||
.mat-mdc-dialog-container {
|
||||
padding: 0 !important;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-mdc-dialog-surface {
|
||||
padding: 0 !important;
|
||||
border-radius: 14px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-mdc-dialog-content {
|
||||
padding: 0 !important;
|
||||
max-height: 72vh;
|
||||
}
|
||||
|
||||
.mat-mdc-dialog-actions {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Transaction-Confirm Dialog Panel ───
|
||||
Same flush surface treatment for the Deposit/Withdraw confirmation. */
|
||||
.tcd-panel {
|
||||
.mat-mdc-dialog-container {
|
||||
padding: 0 !important;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-mdc-dialog-surface {
|
||||
padding: 0 !important;
|
||||
border-radius: 14px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mat-mdc-dialog-content {
|
||||
padding: 0 !important;
|
||||
max-height: 72vh;
|
||||
}
|
||||
|
||||
.mat-mdc-dialog-actions {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Add Beneficiary Dialog Panel ─── */
|
||||
.abd-dialog-panel {
|
||||
.mat-mdc-dialog-container {
|
||||
|
||||
Reference in New Issue
Block a user