Client-stepper: pre-fill existing KYC/address proofs in edit, fix identifier saves
Edit-mode now shows the previously selected KYC document type + uploaded file thumbnail
(loads from /clients/{id}/identifiers + /client_identifiers/{id}/documents). Same for
address proof on the India address step. Closes the gap where editing a client showed
an empty file picker even when proof had been uploaded on create.
Identifier-save hardened across all three callsites (create-client, edit-client,
identities-tab.createIdentifierWithDocs) - the KYC chip picker proofId is a CODE
string ('AADHAAR'), but backend ClientIdentifierRequest.documentTypeId is Long, which
Spring rejects with HttpMessageNotReadableException -> 400. resolveDocumentTypeId
helper looks up the code against /kyc/proof-types?type=id and substitutes the numeric
CodeValue id before posting. Skips silently for constitution-specific non-individual
docs that have no CodeValue mapping.
KYC payload normalises panNumber / enterprisePan / gstinNumber / cinNumber via
toUpperCase + whitespace strip so user-typed lowercase or trailing spaces don't trip
the backend regex (validation.msg.CLIENTKYC.panNumber.does.not.match.regexp).
State name match in client-address save now normalises both sides (lowercase, collapse
underscores + spaces) so legacy MADHYA_PRADESH resolves to 'Madhya Pradesh' returned
by api.postalpincode.in. Backed by tenant migration 0297.
Identities-tab resolver flattened - was returning identifiers before the per-row
forkJoin(getClientIdentificationDocuments) completed, so the view rendered empty
documents arrays. Now uses switchMap + forkJoin so the resolver awaits completion.
Also bundles concurrent work-in-progress on letter-mgmt, organization, users,
bank-calendar, shell, nominee/notes/identifier dialogs, and theming.
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
325228c514
commit
83ea57ccf0
@@ -869,6 +869,49 @@
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* Read-only Yes/No flag — replaces the disabled mat-checkbox in view mode
|
||||
so we don't fight Material's greyed-out disabled checkbox styling. */
|
||||
.ro-flag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
&__label {
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
&__chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
mat-icon {
|
||||
font-size: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&--yes {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
&--no {
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Link select inside status box */
|
||||
.link-select {
|
||||
font-size: 12px;
|
||||
@@ -1402,12 +1445,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Non-selected chip in read-only mode — visible but visibly unclickable.
|
||||
The selected chip stays fully highlighted (no `--locked` class on it). */
|
||||
&--locked {
|
||||
cursor: default;
|
||||
background: #f8fafc;
|
||||
border-color: #e2e8f0;
|
||||
color: #94a3b8;
|
||||
|
||||
.kyc-doc-chip__icon {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #e2e8f0;
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid #1976d2;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* When the whole wrap is locked, prevent the selected chip's cursor from
|
||||
suggesting interactivity either. */
|
||||
.kyc-doc-chip-wrap--locked .kyc-doc-chip--sel {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.kyc-doc-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1640,4 +1707,524 @@
|
||||
&__remove {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Locked variant — used when an existing saved doc is shown but the
|
||||
section's top-level Edit hasn't been clicked yet. */
|
||||
&--locked {
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background: #f0fdf4;
|
||||
border-color: #86efac;
|
||||
}
|
||||
}
|
||||
|
||||
/* Existing saved document — thumbnail + filename + actions. */
|
||||
&__existing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__thumb {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
background: #e2e8f0;
|
||||
border: 1px solid #cbd5e1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__doc-ic {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 32px;
|
||||
color: #1e88e5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__existing-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__existing-name {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__existing-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__view {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
background: #eff6ff;
|
||||
color: #1e40af;
|
||||
border: 1px solid #bfdbfe;
|
||||
transition: all 0.12s;
|
||||
|
||||
mat-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #dbeafe;
|
||||
border-color: #1e40af;
|
||||
}
|
||||
}
|
||||
|
||||
&__sep {
|
||||
color: #cbd5e1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__existing-hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11.5px;
|
||||
color: #1e40af;
|
||||
font-weight: 600;
|
||||
|
||||
mat-icon {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
Read-only / disabled form-field overrides
|
||||
─── When the form is .disable()'d (view mode after KYC is locked),
|
||||
Material drops opacity and greys everything. That reads as
|
||||
"blurry" to users. Restore proper contrast: dark text, crisp
|
||||
outline, normal-weight label — just NOT editable.
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
:host ::ng-deep {
|
||||
/* Outlined form fields in disabled state */
|
||||
.mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled {
|
||||
opacity: 1;
|
||||
|
||||
/* Input text */
|
||||
.mat-mdc-input-element,
|
||||
input.mat-mdc-input-element {
|
||||
color: #0f172a !important;
|
||||
-webkit-text-fill-color: #0f172a !important; /* Chrome/Safari override */
|
||||
font-weight: 600;
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
/* Floating label */
|
||||
.mat-mdc-floating-label,
|
||||
.mdc-floating-label {
|
||||
color: #64748b !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* The outline lines */
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__notch,
|
||||
.mdc-notched-outline__trailing {
|
||||
border-color: #cbd5e1 !important;
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
/* matPrefix icons (the credit-card / fingerprint glyphs) */
|
||||
.field-prefix-icon mat-icon,
|
||||
.mat-mdc-form-field-icon-prefix mat-icon {
|
||||
color: #475569 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* matSuffix verify-ok icon — keep its green */
|
||||
.verify-icon-ok {
|
||||
color: #059669 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hint text */
|
||||
.mat-mdc-form-field-hint {
|
||||
color: #64748b !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Disabled checkbox — keep the check + label crisp */
|
||||
.mat-mdc-checkbox-disabled {
|
||||
opacity: 1 !important;
|
||||
|
||||
.mdc-checkbox__background {
|
||||
background-color: #059669 !important;
|
||||
border-color: #059669 !important;
|
||||
}
|
||||
|
||||
.mdc-checkbox__checkmark {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.mdc-form-field > label,
|
||||
.mat-mdc-checkbox-label,
|
||||
.mdc-label {
|
||||
color: #0f172a !important;
|
||||
opacity: 1 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* Disabled mat-select — same treatment as inputs */
|
||||
.mat-mdc-form-field-disabled .mat-mdc-select-value-text,
|
||||
.mat-mdc-form-field-disabled .mat-mdc-select-value {
|
||||
color: #0f172a !important;
|
||||
-webkit-text-fill-color: #0f172a !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Disabled "toggle visibility" eye icon button */
|
||||
.mat-mdc-form-field-disabled .toggle-vis-btn {
|
||||
color: #64748b !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
Unified Identity Verification Summary (PAN + Aadhaar + Link)
|
||||
─── replaces the legacy pan-result-card / aadhaar-result-card /
|
||||
pan-link-box trio with a single polished panel.
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
.idv-summary {
|
||||
margin: 4px 0 12px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
border: 1px solid #d1fae5;
|
||||
box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
|
||||
overflow: hidden;
|
||||
|
||||
&.partial {
|
||||
border-color: #fde68a;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero strip — gradient green when both verified, amber when partial. */
|
||||
.idv-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 18px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #047857 0%, #059669 60%, #10b981 100%);
|
||||
|
||||
.idv-summary.partial & {
|
||||
background: linear-gradient(135deg, #b45309 0%, #d97706 60%, #f59e0b 100%);
|
||||
}
|
||||
|
||||
&__ic {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: rgb(255 255 255 / 18%);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
&__txt {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
&__sub {
|
||||
margin-top: 3px;
|
||||
font-size: 11.5px;
|
||||
opacity: 0.92;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&__count {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgb(255 255 255 / 22%);
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 2px;
|
||||
border: 1px solid rgb(255 255 255 / 30%);
|
||||
|
||||
&-num {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&-of {
|
||||
font-size: 11px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Two-column body */
|
||||
.idv-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
background: #ecfdf5;
|
||||
|
||||
.idv-summary.partial & {
|
||||
background: #fef3c7;
|
||||
}
|
||||
}
|
||||
|
||||
.idv-col {
|
||||
padding: 14px 18px;
|
||||
border-right: 1px dashed rgb(5 150 105 / 25%);
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.muted {
|
||||
background: rgb(255 255 255 / 50%);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__ic {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 7px;
|
||||
background: #fff;
|
||||
color: #047857;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 800;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
&__rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
font-size: 11.5px;
|
||||
color: #64748b;
|
||||
background: rgb(255 255 255 / 70%);
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #cbd5e1;
|
||||
|
||||
strong {
|
||||
color: #334155;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.idv-chip {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
fa-icon {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
&.ok {
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
}
|
||||
|
||||
.idv-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
|
||||
&__k {
|
||||
flex-shrink: 0;
|
||||
width: 110px;
|
||||
font-size: 10.5px;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
&__v {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
word-break: break-word;
|
||||
|
||||
&.name {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
&.mono {
|
||||
font-family: ui-monospace, 'Roboto Mono', SFMono-Regular, monospace;
|
||||
font-size: 12px;
|
||||
color: #1f2937;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer — PAN ↔ Aadhaar link status */
|
||||
.idv-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 18px;
|
||||
background: #f0fdf4;
|
||||
border-top: 1px solid #bbf7d0;
|
||||
|
||||
&__ic {
|
||||
color: #047857;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__txt {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: #475569;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
font-style: italic;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.not-linked {
|
||||
background: #fef2f2;
|
||||
border-top-color: #fecaca;
|
||||
|
||||
.idv-link__ic,
|
||||
.idv-link__value {
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
&.exempt {
|
||||
background: #eff6ff;
|
||||
border-top-color: #bfdbfe;
|
||||
|
||||
.idv-link__ic,
|
||||
.idv-link__value {
|
||||
color: #1d4ed8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive — stack columns on narrow screens */
|
||||
@media (width <= 640px) {
|
||||
.idv-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.idv-col {
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed rgb(5 150 105 / 25%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.idv-hero {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.idv-link {
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__hint {
|
||||
width: 100%;
|
||||
padding-left: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.idv-row__k {
|
||||
width: 95px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user