niteshandClaude Sonnet 5
31e99b1363
The CKYC tab's document cards now open a dedicated dialog (with client-side
preview) instead of expanding inline, collecting document type, number, and
issue/expiry dates the same way client creation does. Fixes several bugs
found along the way:
- Uploading a document type that's valid for both identity and address
(Aadhaar, Passport, etc.) no longer 404s or 500s — the "no such endpoint"
and case-sensitive ClientIdentifierStatus.valueOf("Active") crashes are
both resolved.
- Edit Client's Identity-proof and Address-proof steps no longer show each
other's document when both are dual-purpose OVD types, and no longer show
stale/mismatched front-back scans after a document type change.
- Address-proof's own document preview never showed a document at all when
no m_client_kyc record existed yet.
Document number and issue/expiry dates are persisted on the identifier
(documentKey + a shared "Issue date: ..., Expiry date: ..." description
convention) and read back by both the CKYC tab and Edit Client so the same
details appear everywhere.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
789 lines
14 KiB
SCSS
789 lines
14 KiB
SCSS
/**
|
|
* 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/.
|
|
*/
|
|
|
|
.ckyc-tab-container {
|
|
padding: 16px;
|
|
}
|
|
|
|
.ckyc-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 48px;
|
|
gap: 16px;
|
|
color: #666;
|
|
}
|
|
|
|
.ckyc-tab-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ckyc-tab-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
h3 {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.ckyc-badge {
|
|
background-color: #1976d2;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
letter-spacing: 0.5px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
/* ===================== CERSAI Sync Hero ===================== */
|
|
.cersai-hero {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding: 22px 26px;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
margin-bottom: 18px;
|
|
color: #fff;
|
|
box-shadow: 0 6px 22px rgb(0 0 0 / 10%);
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -60%;
|
|
right: -10%;
|
|
width: 320px;
|
|
height: 320px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgb(255 255 255 / 18%), transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
&--synced {
|
|
background: linear-gradient(135deg, #0f6e56 0%, #1d9e75 55%, #2fb88c 100%);
|
|
}
|
|
|
|
&--pending {
|
|
background: linear-gradient(135deg, #8a5a14 0%, #ba7517 55%, #d4892f 100%);
|
|
}
|
|
|
|
&__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
min-width: 0;
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
&__icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 16px;
|
|
background: rgb(255 255 255 / 20%);
|
|
border: 1px solid rgb(255 255 255 / 35%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26px;
|
|
flex-shrink: 0;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
&__text {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
&__tag {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
background: rgb(255 255 255 / 22%);
|
|
border: 1px solid rgb(255 255 255 / 40%);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.8px;
|
|
text-transform: uppercase;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
&__ckyc-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
opacity: 0.9;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin: 10px 0 4px;
|
|
}
|
|
|
|
&__ckyc-number {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
|
letter-spacing: 0.5px;
|
|
line-height: 1.1;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
&__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
opacity: 0.95;
|
|
flex-wrap: wrap;
|
|
|
|
fa-icon {
|
|
font-size: 11px;
|
|
opacity: 0.9;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
&__sep {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&__hint {
|
|
font-size: 12px;
|
|
opacity: 0.9;
|
|
line-height: 1.5;
|
|
max-width: 480px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
&__pulse {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 14px;
|
|
background: rgb(255 255 255 / 20%);
|
|
border: 1px solid rgb(255 255 255 / 35%);
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
backdrop-filter: blur(8px);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
&__pulse-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #9fe1cb;
|
|
box-shadow: 0 0 0 0 rgb(159 225 203 / 70%);
|
|
animation: cersai-pulse 2s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes cersai-pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgb(159 225 203 / 70%);
|
|
}
|
|
|
|
70% {
|
|
box-shadow: 0 0 0 10px rgb(159 225 203 / 0%);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgb(159 225 203 / 0%);
|
|
}
|
|
}
|
|
|
|
/* ===================== KYC Verification status ===================== */
|
|
.kyc-status-card {
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 14px;
|
|
background: #fff;
|
|
margin-bottom: 18px;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
|
|
|
|
&--complete {
|
|
border-color: #bbf7d0;
|
|
background: linear-gradient(180deg, #f0fdf4 0%, #fff 60%);
|
|
}
|
|
|
|
&__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid #eef2f7;
|
|
}
|
|
|
|
&__title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
&__icon {
|
|
color: #2563eb;
|
|
font-size: 16px;
|
|
}
|
|
|
|
&--complete &__icon {
|
|
color: #16a34a;
|
|
}
|
|
|
|
&__badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.4px;
|
|
text-transform: uppercase;
|
|
|
|
fa-icon {
|
|
font-size: 11px;
|
|
}
|
|
|
|
&--ok {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
|
|
&--partial {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
border: 1px solid #fde68a;
|
|
}
|
|
|
|
&--pending {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
padding: 6px 18px 14px;
|
|
}
|
|
}
|
|
|
|
.kyc-status-row {
|
|
display: grid;
|
|
grid-template-columns: 140px 1fr auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px dashed #eef2f7;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&__label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
|
|
fa-icon {
|
|
color: #64748b;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
&__value {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
|
|
&--missing {
|
|
color: #94a3b8;
|
|
font-style: italic;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
&__id {
|
|
font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
word-break: break-all;
|
|
}
|
|
|
|
&__name {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
}
|
|
|
|
.kyc-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.3px;
|
|
white-space: nowrap;
|
|
|
|
fa-icon {
|
|
font-size: 11px;
|
|
}
|
|
|
|
&--ok {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
|
|
&--pending {
|
|
background: #f1f5f9;
|
|
color: #64748b;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
}
|
|
|
|
@media (width <= 640px) {
|
|
.kyc-status-row {
|
|
grid-template-columns: 110px 1fr;
|
|
grid-template-rows: auto auto;
|
|
|
|
.kyc-pill {
|
|
grid-column: 2 / 3;
|
|
justify-self: start;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===================== Client info grid ===================== */
|
|
.ckyc-info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.ckyc-info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 14px 16px;
|
|
background: #fff;
|
|
border: 1px solid #e8eaed;
|
|
border-radius: 12px;
|
|
min-width: 0;
|
|
transition: all 0.15s;
|
|
|
|
&:hover {
|
|
border-color: #c6dafc;
|
|
box-shadow: 0 2px 8px rgb(26 115 232 / 6%);
|
|
}
|
|
}
|
|
|
|
@media (width <= 900px) {
|
|
.ckyc-info-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.cersai-hero {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
&__left {
|
|
width: 100%;
|
|
}
|
|
|
|
&__icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
&__ckyc-number {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 500px) {
|
|
.ckyc-info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.ckyc-info-label {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: #5f6368;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
|
|
fa-icon {
|
|
color: #1a73e8;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
.ckyc-info-value {
|
|
font-size: 13px;
|
|
color: #202124;
|
|
font-weight: 600;
|
|
min-height: 18px;
|
|
word-break: break-word;
|
|
|
|
&--mono {
|
|
font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
|
|
font-size: 12px;
|
|
color: #1a73e8;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
&--missing {
|
|
color: #9aa0a6;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.ckyc-info-hint {
|
|
display: none;
|
|
}
|
|
|
|
.ckyc-section-title {
|
|
margin: 24px 0 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ckyc-upload-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ckyc-upload-card {
|
|
border-radius: 12px !important;
|
|
border: 1px solid #e8eaed;
|
|
box-shadow: none !important;
|
|
transition:
|
|
border-color 0.15s,
|
|
box-shadow 0.15s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 240px;
|
|
|
|
&:hover {
|
|
border-color: #c6dafc;
|
|
box-shadow: 0 2px 10px rgb(26 115 232 / 6%) !important;
|
|
}
|
|
|
|
.mat-mdc-card-content {
|
|
padding: 18px 20px !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.ckyc-upload-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: #202124;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid #f1f3f4;
|
|
}
|
|
|
|
.ckyc-upload-icon {
|
|
font-size: 18px;
|
|
height: 32px;
|
|
width: 32px;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #1a73e8, #4285f4);
|
|
border-radius: 8px;
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 6px rgb(26 115 232 / 25%);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ckyc-upload-hint {
|
|
font-size: 12px;
|
|
color: #888;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.ckyc-missing {
|
|
margin-top: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.ckyc-uploading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: #5f6368;
|
|
}
|
|
|
|
.ckyc-upload-error {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
padding: 8px 12px;
|
|
background-color: #fdecea;
|
|
border: 1px solid #f5c6cb;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
color: #b71c1c;
|
|
|
|
mat-icon {
|
|
font-size: 16px;
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
@media (width <= 900px) {
|
|
.ckyc-upload-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (width <= 600px) {
|
|
.ckyc-info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ckyc-upload-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ===================== Already-available banners ===================== */
|
|
|
|
.ckyc-existing-loading {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 14px;
|
|
background: #e8f0fe;
|
|
color: #0c447c;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
margin-bottom: 14px;
|
|
|
|
mat-progress-spinner {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.ckyc-existing {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 14px 14px 12px;
|
|
background: #f0fbf6;
|
|
border: 1px solid #cfecdd;
|
|
border-radius: 10px;
|
|
margin-top: 14px;
|
|
flex: 1;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: 3px;
|
|
background: #1d9e75;
|
|
border-radius: 10px 0 0 10px;
|
|
}
|
|
|
|
&__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
strong {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #085041;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
|
|
&__ok {
|
|
font-size: 20px;
|
|
color: #1d9e75;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__source {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: #0f6e56;
|
|
margin-top: 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: #085041;
|
|
flex-wrap: wrap;
|
|
padding: 8px 10px;
|
|
background: #fff;
|
|
border: 1px solid #cfecdd;
|
|
border-radius: 8px;
|
|
|
|
> span:first-of-type {
|
|
font-weight: 600;
|
|
}
|
|
|
|
fa-icon {
|
|
color: #1d9e75;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
&__key {
|
|
font-family: 'SF Mono', Consolas, monospace;
|
|
font-size: 11px;
|
|
background: #e1f5ee;
|
|
color: #0f6e56;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
border: 1px solid #cfecdd;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__count {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
background: #1d9e75;
|
|
color: #fff;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
&__thumbs {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&__dates {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 11px;
|
|
color: #0f6e56;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
fa-icon {
|
|
color: #1d9e75;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
&__thumb {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 10px;
|
|
border: 2px solid #fff;
|
|
outline: 1px solid #cfecdd;
|
|
background: #fff;
|
|
object-fit: cover;
|
|
align-self: center;
|
|
box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
|
|
|
|
&--wide {
|
|
width: 200px;
|
|
height: 80px;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
&__replace {
|
|
align-self: stretch;
|
|
margin-top: auto;
|
|
height: 34px !important;
|
|
font-size: 11px !important;
|
|
font-weight: 600 !important;
|
|
border-radius: 8px !important;
|
|
border: 1px solid #cfecdd !important;
|
|
color: #0f6e56 !important;
|
|
background: #fff !important;
|
|
padding: 0 12px !important;
|
|
letter-spacing: 0.2px;
|
|
|
|
fa-icon {
|
|
margin-right: 6px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
&:hover {
|
|
background: #e1f5ee !important;
|
|
border-color: #1d9e75 !important;
|
|
}
|
|
}
|
|
}
|