From 1ff256d220eb3c6fab1d709bc422d9f0fba4e0ca Mon Sep 17 00:00:00 2001 From: Aditya Date: Fri, 20 Mar 2026 23:41:47 +0530 Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20Personal=20Data=20tab=20?= =?UTF-8?q?=E2=80=94=20card=20sections=20with=20grid=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Each section in a bordered card with icon header (Personal Info, Account, Contact, Classification, Dates, Status) - 4-column grid layout with cell borders and hover effects - Monospace font for account numbers, CIF, external IDs - Status badge with colored dot (active/closed/pending) - Contact fields with inline icons - Compact 10px uppercase labels, 13.5px values Co-Authored-By: Claude Opus 4.6 (1M context) --- .../personal-data-tab.component.html | 488 ++++++++++-------- .../personal-data-tab.component.scss | 234 +++++++-- 2 files changed, 454 insertions(+), 268 deletions(-) diff --git a/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html b/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html index d44201c67..e606f9617 100644 --- a/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html +++ b/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html @@ -6,258 +6,310 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
- -
-

{{ 'labels.heading.Personal Information' | translate }}

-
- - @if (clientViewData.displayName) { -
- {{ 'labels.inputs.Display Name' | translate }} - {{ clientViewData.displayName }} -
- } - @if (isPerson()) { - @if (clientViewData.firstname) { -
- {{ 'labels.inputs.First Name' | translate }} - {{ clientViewData.firstname }} +
+ + +
+
+ +

{{ 'labels.heading.Personal Information' | translate }}

+
+
+
+ @if (clientViewData.displayName) { +
+
{{ 'labels.inputs.Display Name' | translate }}
+
{{ clientViewData.displayName }}
} - @if (clientViewData.middlename) { -
- {{ 'labels.inputs.Middle Name' | translate }} - {{ clientViewData.middlename }} + @if (isPerson()) { + @if (clientViewData.firstname) { +
+
{{ 'labels.inputs.First Name' | translate }}
+
{{ clientViewData.firstname }}
+
+ } + @if (clientViewData.middlename) { +
+
{{ 'labels.inputs.Middle Name' | translate }}
+
{{ clientViewData.middlename }}
+
+ } + @if (clientViewData.lastname) { +
+
{{ 'labels.inputs.Last Name' | translate }}
+
{{ clientViewData.lastname }}
+
+ } + @if (clientViewData.dateOfBirth) { +
+
{{ 'labels.inputs.Date of Birth' | translate }}
+
{{ clientViewData.dateOfBirth | dateFormat }}
+
+ } + @if (clientViewData.gender) { +
+
{{ 'labels.inputs.Gender' | translate }}
+
{{ clientViewData.gender.name }}
+
+ } +
+
{{ 'labels.inputs.Is staff' | translate }}
+
{{ + clientViewData.isStaff ? ('labels.commons.Yes' | translate) : ('labels.commons.No' | translate) + }}
} - @if (clientViewData.lastname) { -
- {{ 'labels.inputs.Last Name' | translate }} - {{ clientViewData.lastname }} + @if (isLegalEntity()) { + @if (clientViewData.fullname) { +
+
{{ 'labels.inputs.Entity Name' | translate }}
+
{{ clientViewData.fullname }}
+
+ } + @if (clientViewData.dateOfBirth) { +
+
{{ 'labels.inputs.Incorporation Date' | translate }}
+
{{ clientViewData.dateOfBirth | dateFormat }}
+
+ } + } + @if (clientViewData.legalForm) { +
+
{{ 'labels.inputs.Legal Form' | translate }}
+
{{ clientViewData.legalForm.value }}
} - @if (clientViewData.dateOfBirth) { -
- {{ 'labels.inputs.Date of Birth' | translate }} - {{ clientViewData.dateOfBirth | dateFormat }} -
- } - @if (clientViewData.gender) { -
- {{ 'labels.inputs.Gender' | translate }} - {{ clientViewData.gender.name }} -
- } -
- {{ 'labels.inputs.Is staff' | translate }} - {{ - clientViewData.isStaff ? ('labels.commons.Yes' | translate) : ('labels.commons.No' | translate) - }} -
- } - @if (isLegalEntity()) { - @if (clientViewData.fullname) { -
- {{ 'labels.inputs.Entity Name' | translate }} - {{ clientViewData.fullname }} -
- } - @if (clientViewData.dateOfBirth) { -
- {{ 'labels.inputs.Incorporation Date' | translate }} - {{ clientViewData.dateOfBirth | dateFormat }} -
- } - } - @if (clientViewData.legalForm) { -
- {{ 'labels.inputs.Legal Form' | translate }} - {{ clientViewData.legalForm.value }} -
- } +
- -
-

{{ 'labels.heading.Account Information' | translate }}

-
-
- {{ 'labels.inputs.Account No' | translate }} - {{ clientViewData.accountNo || '-' }} -
-
- {{ 'labels.inputs.CIF Number' | translate }} - {{ clientViewData.cifNumber || '-' }} -
-
- {{ 'labels.inputs.External Id' | translate }} - {{ clientViewData.externalId || '-' }} -
-
- {{ 'labels.inputs.Office' | translate }} - {{ clientViewData.officeName || '-' }} -
-
- {{ 'labels.inputs.Staff' | translate }} - {{ clientViewData.staffName || ('labels.inputs.Unassigned' | translate) }} -
- @if (clientViewData.savingsAccountId) { -
- {{ 'labels.inputs.Default Savings Account' | translate }} - {{ clientViewData.savingsAccountId }} + +
+
+ +

{{ 'labels.heading.Account Information' | translate }}

+
+
+
+
+
{{ 'labels.inputs.Account No' | translate }}
+
{{ clientViewData.accountNo || '-' }}
- } +
+
{{ 'labels.inputs.CIF Number' | translate }}
+
{{ clientViewData.cifNumber || '-' }}
+
+
+
{{ 'labels.inputs.External Id' | translate }}
+
{{ clientViewData.externalId || '-' }}
+
+
+
{{ 'labels.inputs.Office' | translate }}
+
{{ clientViewData.officeName || '-' }}
+
+
+
{{ 'labels.inputs.Staff' | translate }}
+
{{ clientViewData.staffName || ('labels.inputs.Unassigned' | translate) }}
+
+ @if (clientViewData.savingsAccountId) { +
+
{{ 'labels.inputs.Default Savings Account' | translate }}
+
{{ clientViewData.savingsAccountId }}
+
+ } +
@if (isLegalEntity() && clientViewData.clientNonPersonDetails) { -
-

{{ 'labels.heading.Entity Details' | translate }}

-
- @if (clientViewData.clientNonPersonDetails.constitution) { -
- {{ 'labels.inputs.Constitution' | translate }} - {{ clientViewData.clientNonPersonDetails.constitution.name }} -
- } - @if (clientViewData.clientNonPersonDetails.mainBusinessLine) { -
- {{ 'labels.inputs.Main Business Line' | translate }} - {{ clientViewData.clientNonPersonDetails.mainBusinessLine.name }} -
- } - @if (clientViewData.clientNonPersonDetails.incorpValidityTillDate) { -
- {{ 'labels.inputs.Incorporation Validity Till Date' | translate }} - {{ clientViewData.clientNonPersonDetails.incorpValidityTillDate | dateFormat }} -
- } - @if (clientViewData.clientNonPersonDetails.incorpNumber) { -
- {{ 'labels.inputs.Incorporation No' | translate }} - {{ clientViewData.clientNonPersonDetails.incorpNumber }} -
- } - @if (clientViewData.clientNonPersonDetails.remarks) { -
- {{ 'labels.inputs.Remarks' | translate }} - {{ clientViewData.clientNonPersonDetails.remarks }} -
- } +
+
+ +

{{ 'labels.heading.Entity Details' | translate }}

+
+
+
+ @if (clientViewData.clientNonPersonDetails.constitution) { +
+
{{ 'labels.inputs.Constitution' | translate }}
+
{{ clientViewData.clientNonPersonDetails.constitution.name }}
+
+ } + @if (clientViewData.clientNonPersonDetails.mainBusinessLine) { +
+
{{ 'labels.inputs.Main Business Line' | translate }}
+
{{ clientViewData.clientNonPersonDetails.mainBusinessLine.name }}
+
+ } + @if (clientViewData.clientNonPersonDetails.incorpValidityTillDate) { +
+
{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}
+
{{ clientViewData.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}
+
+ } + @if (clientViewData.clientNonPersonDetails.incorpNumber) { +
+
{{ 'labels.inputs.Incorporation No' | translate }}
+
{{ clientViewData.clientNonPersonDetails.incorpNumber }}
+
+ } + @if (clientViewData.clientNonPersonDetails.remarks) { +
+
{{ 'labels.inputs.Remarks' | translate }}
+
{{ clientViewData.clientNonPersonDetails.remarks }}
+
+ } +
} - -
-

{{ 'labels.heading.Contact Information' | translate }}

-
-
- {{ 'labels.inputs.Mobile Number' | translate }} - {{ clientViewData.mobileNo || '-' }} -
-
- {{ 'labels.inputs.Email' | translate }} - {{ clientViewData.emailAddress || '-' }} + +
+
+ +

{{ 'labels.heading.Contact Information' | translate }}

+
+
+
+
+
{{ 'labels.inputs.Mobile Number' | translate }}
+
+ {{ clientViewData.mobileNo || '-' }} +
+
+
+
{{ 'labels.inputs.Email' | translate }}
+
+ {{ clientViewData.emailAddress || '-' }} +
+
- -
-

{{ 'labels.heading.Classification' | translate }}

-
- @if (clientViewData.clientType) { -
- {{ 'labels.inputs.Client Type' | translate }} - {{ clientViewData.clientType.name }} -
- } - @if (clientViewData.clientClassification) { -
- {{ 'labels.inputs.Client Classification' | translate }} - {{ clientViewData.clientClassification.name }} -
- } - @if (clientViewData.occupationCategory) { -
- {{ 'labels.inputs.Occupation Category' | translate }} - {{ clientViewData.occupationCategory.name }} -
- } - @if (clientViewData.occupation) { -
- {{ 'labels.inputs.Occupation' | translate }} - {{ clientViewData.occupation.name }} -
- } - @if (!clientViewData.clientType && !clientViewData.clientClassification) { -
- {{ 'labels.commons.No classification data available' | translate }} -
- } + +
+
+ +

{{ 'labels.heading.Classification' | translate }}

+
+
+
+ @if (clientViewData.clientType) { +
+
{{ 'labels.inputs.Client Type' | translate }}
+
{{ clientViewData.clientType.name }}
+
+ } + @if (clientViewData.clientClassification) { +
+
{{ 'labels.inputs.Client Classification' | translate }}
+
{{ clientViewData.clientClassification.name }}
+
+ } + @if (clientViewData.occupationCategory) { +
+
{{ 'labels.inputs.Occupation Category' | translate }}
+
{{ clientViewData.occupationCategory.name }}
+
+ } + @if (clientViewData.occupation) { +
+
{{ 'labels.inputs.Occupation' | translate }}
+
{{ clientViewData.occupation.name }}
+
+ } + @if (!clientViewData.clientType && !clientViewData.clientClassification) { +
+
{{ 'labels.commons.No classification data available' | translate }}
+
+ } +
- + @if (clientViewData.groups && clientViewData.groups.length > 0) { -
-

{{ 'labels.heading.Group Membership' | translate }}

-
- @for (group of clientViewData.groups; track group) { -
- {{ 'labels.inputs.Group' | translate }} - {{ group.name }} -
- } +
+
+ +

{{ 'labels.heading.Group Membership' | translate }}

+
+
+
+ @for (group of clientViewData.groups; track group) { +
+
{{ 'labels.inputs.Group' | translate }}
+
{{ group.name }}
+
+ } +
} - -
-

{{ 'labels.heading.Important Dates' | translate }}

-
- @if (clientViewData.timeline?.submittedOnDate) { -
- {{ 'labels.inputs.Submitted On' | translate }} - {{ clientViewData.timeline.submittedOnDate | dateFormat }} -
- } - @if (clientViewData.activationDate) { -
- {{ 'labels.inputs.Activation Date' | translate }} - {{ clientViewData.activationDate | dateFormat }} -
- } - @if (clientViewData.timeline?.closedOnDate) { -
- {{ 'labels.inputs.Closed Date' | translate }} - {{ clientViewData.timeline.closedOnDate | dateFormat }} -
- } + +
+
+ +

{{ 'labels.heading.Important Dates' | translate }}

+
+
+
+ @if (clientViewData.timeline?.submittedOnDate) { +
+
{{ 'labels.inputs.Submitted On' | translate }}
+
{{ clientViewData.timeline.submittedOnDate | dateFormat }}
+
+ } + @if (clientViewData.activationDate) { +
+
{{ 'labels.inputs.Activation Date' | translate }}
+
{{ clientViewData.activationDate | dateFormat }}
+
+ } + @if (clientViewData.timeline?.closedOnDate) { +
+
{{ 'labels.inputs.Closed Date' | translate }}
+
{{ clientViewData.timeline.closedOnDate | dateFormat }}
+
+ } +
- -
-

{{ 'labels.heading.Status' | translate }}

-
- @if (clientViewData.status) { -
- {{ 'labels.inputs.Client Status' | translate }} - {{ 'labels.status.' + clientViewData.status.value | translate }} -
- } - @if (clientViewData.subStatus) { -
- {{ 'labels.inputs.Sub Status' | translate }} - {{ clientViewData.subStatus.name }} -
- } + +
+
+ +

{{ 'labels.heading.Status' | translate }}

+
+
+
+ @if (clientViewData.status) { +
+
{{ 'labels.inputs.Client Status' | translate }}
+
+ + {{ 'labels.status.' + clientViewData.status.value | translate }} + +
+
+ } + @if (clientViewData.subStatus) { +
+
{{ 'labels.inputs.Sub Status' | translate }}
+
{{ clientViewData.subStatus.name }}
+
+ } +
+
diff --git a/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.scss b/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.scss index 73f7be323..2c8f41b3d 100644 --- a/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.scss +++ b/src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.scss @@ -6,68 +6,202 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.tab-container { - padding: 1%; - margin: 1%; +$primary: #1a73e8; +$primary-light: #e8f0fe; +$gray-50: #f8f9fa; +$gray-100: #f1f3f4; +$gray-200: #e8eaed; +$gray-500: #9aa0a6; +$gray-700: #5f6368; +$gray-900: #202124; +$white: #fff; +$green: #34a853; +$red: #ea4335; +$orange: #f9ab00; +$teal: #00897b; - h3 { - margin: 1% auto; - } -} - -.section { - margin-bottom: 2%; - - h3 { - margin-bottom: 1%; - padding-bottom: 0.5%; - border-bottom: 1px solid var(--mdc-outlined-text-field-outline-color, #ccc); - font-weight: 500; - } -} - -.data-grid { - display: flex; - flex-flow: row wrap; - gap: 2%; - - @media (width <=768px) { - flex-direction: column; - } -} - -.data-item { +.personal-data-container { + padding: 20px 24px; display: flex; flex-direction: column; - flex: 0 0 23%; - padding: 1%; - margin-bottom: 1%; - border-radius: 4px; - border: 1px solid var(--mdc-outlined-text-field-outline-color, #e0e0e0); + gap: 20px; +} - @media (width <=768px) { - flex: 0 0 100%; +// Section card +.pd-section { + background: $white; + border-radius: 8px; + border: 1px solid $gray-200; + overflow: hidden; +} + +.pd-section__header { + display: flex; + align-items: center; + gap: 10px; + padding: 12px 20px; + background: $gray-50; + border-bottom: 1px solid $gray-200; + + i { + font-size: 15px; + color: $primary; + width: 20px; + text-align: center; + } + + h3 { + margin: 0; + font-size: 14px; + font-weight: 600; + color: $gray-900; + letter-spacing: 0.2px; + } +} + +.pd-section__body { + padding: 16px 20px; +} + +// Data grid — 4 columns +.pd-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0; + + @media (max-width: 1024px) { + grid-template-columns: repeat(3, 1fr); + } + + @media (max-width: 768px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (max-width: 480px) { + grid-template-columns: 1fr; + } +} + +// Individual data field +.pd-field { + padding: 10px 14px; + border-bottom: 1px solid $gray-100; + border-right: 1px solid $gray-100; + transition: background 0.15s ease; + + &:hover { + background: $gray-50; + } + + // Remove right border on last column + &:nth-child(4n) { + border-right: none; + } + + // Remove bottom border on last row (approximate) + &:last-child { + border-bottom: none; } &.full-width { - flex: 0 0 100%; + grid-column: 1 / -1; + border-right: none; + } +} + +.pd-field__label { + font-size: 10px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + color: $gray-500; + margin-bottom: 3px; + line-height: 1.3; +} + +.pd-field__value { + font-size: 13.5px; + font-weight: 500; + color: $gray-900; + line-height: 1.4; + word-break: break-word; + + &.no-data { + font-style: italic; + color: $gray-500; + font-weight: 400; } - .label { - font-size: 0.75rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; - color: var(--md-sys-color-primary, #1074b9); + &.status-badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 2px 10px; + border-radius: 12px; + font-size: 12px; + font-weight: 600; + + &::before { + content: ''; + width: 7px; + height: 7px; + border-radius: 50%; + flex-shrink: 0; + } + + &.status-active { + background: rgba($green, 0.1); + color: darken($green, 10%); + + &::before { + background: $green; + } + } + + &.status-closed { + background: rgba($red, 0.08); + color: $red; + + &::before { + background: $red; + } + } + + &.status-pending { + background: rgba($orange, 0.1); + color: darken($orange, 15%); + + &::before { + background: $orange; + } + } } - .value { - font-size: 1rem; + &.monospace { + font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; + font-size: 13px; + letter-spacing: 0.3px; + } - &.no-data { - font-style: italic; - opacity: 0.7; + &.link { + color: $primary; + cursor: pointer; + + &:hover { + text-decoration: underline; } } } + +// Contact info icons +.pd-contact-icon { + display: inline-flex; + align-items: center; + gap: 6px; + color: $gray-700; + + i { + font-size: 13px; + color: $gray-500; + } +}