diff --git a/src/app/current-accounts/current-account-view/charges-tab/charges-tab.component.html b/src/app/current-accounts/current-account-view/charges-tab/charges-tab.component.html index e13ff2c12..1501437b0 100644 --- a/src/app/current-accounts/current-account-view/charges-tab/charges-tab.component.html +++ b/src/app/current-accounts/current-account-view/charges-tab/charges-tab.component.html @@ -6,25 +6,22 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
-
-
-

{{ 'labels.inputs.Charges' | translate }}

-
- @if (this.chargesData) { -
- -
- } -
+ } +
-
diff --git a/src/app/current-accounts/current-account-view/charges-tab/charges-tab.component.scss b/src/app/current-accounts/current-account-view/charges-tab/charges-tab.component.scss index aff23bdef..cab2f542a 100644 --- a/src/app/current-accounts/current-account-view/charges-tab/charges-tab.component.scss +++ b/src/app/current-accounts/current-account-view/charges-tab/charges-tab.component.scss @@ -6,30 +6,107 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.tab-container { - padding: 1%; - margin: 1%; +$navy: #0d1b2a; +$slate: #475569; +$muted: #64748b; +$border: #e2e8f0; +$soft: #f8fafc; +$blue: #1e40af; - h3 { - margin: 1% auto; +.chg-tab { + width: 100%; +} + +.chg-tab__card { + background: #fff; + border: 1px solid $border; + border-radius: 14px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; +} + +.chg-tab__toolbar { + display: flex; + align-items: center; + gap: 14px; + padding: 12px 18px; + background: $soft; + border-bottom: 1px solid $border; +} + +.chg-tab__title { + margin: 0; + font-size: 14px; + font-weight: 700; + color: $navy; + letter-spacing: 0.01em; +} + +.chg-tab__spacer { + flex: 1; +} + +.chg-tab__toggle { + height: 34px !important; + border-radius: 8px !important; + font-weight: 600 !important; + font-size: 13px !important; + padding: 0 14px !important; + background: linear-gradient(135deg, #1e88e5 0%, $blue 100%) !important; + color: #fff !important; +} + +table { + width: 100%; +} + +::ng-deep .chg-tab__card { + .mat-mdc-header-row { + background: $soft; } - .action-button { - margin-left: auto; + .mat-mdc-header-cell { + font-size: 11.5px; + font-weight: 800; + color: $slate; + text-transform: uppercase; + letter-spacing: 0.06em; + padding: 12px 14px; + border-bottom: 1px solid $border; } - table { - width: 100%; + .mat-mdc-cell { + font-size: 13px; + color: $navy; + padding: 11px 14px; + border-bottom: 1px solid #f1f5f9; + } + + .mat-mdc-row:hover { + background: #f8fafc; + cursor: pointer; + } + + /* Right-align monetary columns. */ + .mat-column-due, + .mat-column-paid, + .mat-column-waived, + .mat-column-outstanding { + text-align: right; + font-variant-numeric: tabular-nums; + } + + .mat-column-actions { + text-align: center; + width: 140px; .account-action-button { - min-width: 26px; - padding: 0 6px; - margin: 4px; - line-height: 25px; - } - - .select-row:hover { - cursor: pointer; + min-width: 30px !important; + padding: 0 8px !important; + margin: 0 3px !important; + height: 30px !important; + line-height: 30px !important; + border-radius: 7px !important; } } } diff --git a/src/app/current-accounts/current-account-view/current-account-view.component.html b/src/app/current-accounts/current-account-view/current-account-view.component.html index 52c36d9ef..f2946b53b 100644 --- a/src/app/current-accounts/current-account-view/current-account-view.component.html +++ b/src/app/current-accounts/current-account-view/current-account-view.component.html @@ -6,239 +6,232 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - - -
-
- -
+
+ +
+
+
+
-
{{ 'labels.inputs.Name' | translate }}
- - - - - - - - - - -
{{ 'labels.inputs.Current Balance' | translate }} - {{ - currentAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' - }} -
{{ 'labels.inputs.Available Balance' | translate }} - {{ - currentAccountData.summary.availableBalance - | currency: currency.code : 'symbol-narrow' : '1.2-2' - }} -
-
- } - -
- -
- + + + - - @for (item of buttonConfig.singleButtons; track item) { - - } - - @if (buttonConfig.options && !currentAccountData.subStatus.block) { - - - @for (option of buttonConfig.options; track option) { - - - - } - - } - - - - - - @if (isActive) { - + + @if (!currentAccountData.status.rejected && !currentAccountData.status.submittedAndPendingApproval) { +
+
+ {{ 'labels.inputs.Current Balance' | translate }} + + {{ currentAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + +
+
+ {{ 'labels.inputs.Available Balance' | translate }} + + {{ currentAccountData.summary.availableBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + +
+
} - + +
+ +
+ + + @for (item of buttonConfig.singleButtons; track item) { + + } + + @if (buttonConfig.options && !currentAccountData.subStatus.block) { + + + @for (option of buttonConfig.options; track option) { + + + + } + + } + + + + + @if (isActive) { + + } + + +
- - - +
+ + diff --git a/src/app/current-accounts/current-account-view/current-account-view.component.scss b/src/app/current-accounts/current-account-view/current-account-view.component.scss index 6a53700a4..9bcd5fd98 100644 --- a/src/app/current-accounts/current-account-view/current-account-view.component.scss +++ b/src/app/current-accounts/current-account-view/current-account-view.component.scss @@ -6,12 +6,390 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -mat-card-title { - display: flex; +$navy: #0d1b2a; +$blue: #1e88e5; +$blue-d: #1e40af; +$border: #e2e8f0; + +.cur-view { + max-width: 1440px; + margin: 0 auto; + padding: 12px 20px 22px; } -.product-row, -.account-number-row, -.external-id-row { - display: block; +/* ─── Gradient hero header ──────────────────────────────────────────── */ +.cur-hero { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; + align-items: stretch; + gap: 14px; + padding: 12px 18px; + border-radius: 12px; + color: #fff; + background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 45%, #4338ca 100%); + box-shadow: 0 6px 18px -10px rgb(15 23 42 / 35%); + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at top right, rgb(255 255 255 / 12%) 0%, transparent 55%); + pointer-events: none; + } + + &__left { + display: flex; + align-items: center; + gap: 12px; + min-width: 0; + position: relative; + z-index: 1; + } + + &__avatar { + width: 40px; + height: 40px; + border-radius: 10px; + background: linear-gradient(135deg, rgb(255 255 255 / 22%) 0%, rgb(255 255 255 / 10%) 100%); + border: 1px solid rgb(255 255 255 / 28%); + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 16px; + flex-shrink: 0; + box-shadow: 0 3px 10px -3px rgb(0 0 0 / 25%); + } + + &__info { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; + } + + &__status-row { + display: flex; + align-items: center; + gap: 6px; + } + + &__title { + margin: 0; + font-size: 15px; + font-weight: 800; + letter-spacing: 0.01em; + color: #fff; + line-height: 1.15; + + ::ng-deep mifosx-long-text { + color: #fff; + } + } + + &__meta { + display: flex; + flex-wrap: wrap; + gap: 2px 18px; + margin-top: 1px; + } + + &__meta-item { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 12px; + color: rgb(255 255 255 / 90%); + } + + &__meta-label { + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.07em; + color: rgb(255 255 255 / 60%); + font-weight: 600; + } + + &__meta-value { + font-weight: 600; + color: #fff; + } + + &__kpis { + display: flex; + gap: 8px; + align-items: stretch; + position: relative; + z-index: 1; + } + + &__actions { + display: flex; + align-items: center; + position: relative; + z-index: 1; + + button { + width: 32px !important; + height: 32px !important; + min-width: 32px !important; + padding: 0 !important; + border-radius: 50% !important; + color: #fff !important; + background: rgb(255 255 255 / 10%) !important; + border: 1px solid rgb(255 255 255 / 22%) !important; + display: inline-flex !important; + align-items: center; + justify-content: center; + line-height: 1; + transition: + background 0.15s ease, + border-color 0.15s ease, + transform 0.12s ease; + + ::ng-deep fa-icon { + font-size: 14px; + line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; + } + + ::ng-deep .mat-mdc-button-persistent-ripple, + ::ng-deep .mat-mdc-button-touch-target { + border-radius: 50% !important; + } + } + + button:hover { + background: rgb(255 255 255 / 22%) !important; + border-color: rgb(255 255 255 / 38%) !important; + } + + button:active { + transform: scale(0.94); + } + } +} + +/* Balance KPI tiles */ +.cur-kpi { + display: flex; + flex-direction: column; + justify-content: center; + min-width: 130px; + padding: 7px 14px; + border-radius: 9px; + background: rgb(255 255 255 / 14%); + border: 1px solid rgb(255 255 255 / 22%); + backdrop-filter: blur(8px); + + &__label { + font-size: 9.5px; + text-transform: uppercase; + letter-spacing: 0.07em; + font-weight: 700; + color: rgb(255 255 255 / 75%); + } + + &__value { + margin-top: 2px; + font-size: 15px; + font-weight: 800; + color: #fff; + font-variant-numeric: tabular-nums; + letter-spacing: -0.01em; + } + + &--available { + background: rgb(16 185 129 / 22%); + border-color: rgb(16 185 129 / 35%); + } +} + +/* Status pill */ +.cur-status-pill { + display: inline-flex; + align-items: center; + gap: 5px; + height: 18px; + padding: 0 8px; + border-radius: 999px; + background: rgb(16 185 129 / 24%); + border: 1px solid rgb(16 185 129 / 40%); + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: #d1fae5; + + &__dot { + width: 5px; + height: 5px; + border-radius: 50%; + background: #10b981; + box-shadow: 0 0 0 2px rgb(16 185 129 / 30%); + } + + &--warn { + background: rgb(245 158 11 / 24%); + border-color: rgb(245 158 11 / 40%); + color: #fef3c7; + + .cur-status-pill__dot { + background: #f59e0b; + box-shadow: 0 0 0 3px rgb(245 158 11 / 30%); + } + } + + &.statussubmitted, + &.statuspending { + background: rgb(245 158 11 / 24%); + border-color: rgb(245 158 11 / 40%); + color: #fef3c7; + + .cur-status-pill__dot { + background: #f59e0b; + } + } + + &.statusclosed, + &.statusrejected, + &.statuswithdrawn { + background: rgb(239 68 68 / 24%); + border-color: rgb(239 68 68 / 40%); + color: #fee2e2; + + .cur-status-pill__dot { + background: #ef4444; + } + } +} + +/* ─── Pill-style tab navigation ─────────────────────────────────────── */ +.cur-tabs { + margin-top: 18px; + background: #fff; + border: 1px solid $border; + border-radius: 14px; + padding: 6px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; + + ::ng-deep { + .mat-mdc-tab-link-container { + border-bottom: none !important; + } + + .mat-mdc-tab-links { + gap: 4px; + flex-wrap: wrap; + } + + .mdc-tab-indicator__content--underline, + .mat-mdc-tab-header-pagination-controls-enabled .mdc-tab-indicator__content--underline { + display: none !important; + } + } +} + +.cur-tab { + display: inline-flex !important; + align-items: center; + gap: 8px; + height: 38px !important; + min-width: 0 !important; + padding: 0 16px !important; + border-radius: 10px !important; + font-family: Inter, 'DM Sans', Roboto, sans-serif !important; + font-size: 13px !important; + font-weight: 600 !important; + letter-spacing: 0.01em !important; + color: #64748b !important; + background: transparent !important; + transition: all 0.15s ease; + white-space: nowrap; + border: 1px solid transparent !important; + opacity: 1 !important; + + &__ic { + font-size: 12px; + color: inherit; + } + + &:hover:not(.mdc-tab--active) { + background: #f1f5f9 !important; + color: $navy !important; + } + + &.mdc-tab--active, + &.mat-mdc-tab-link-active { + background: linear-gradient(135deg, $blue 0%, $blue-d 100%) !important; + color: #fff !important; + box-shadow: 0 2px 6px -1px rgb(30 64 175 / 35%); + border-color: $blue-d !important; + + ::ng-deep .mdc-tab__text-label, + ::ng-deep .mat-mdc-tab-link-content, + ::ng-deep span, + .cur-tab__ic { + color: #fff !important; + opacity: 1 !important; + } + } +} + +.cur-body { + margin-top: 16px; +} + +/* ─── Responsive ────────────────────────────────────────────────────── */ +@media (width <= 1100px) { + .cur-hero { + grid-template-columns: 1fr; + + &__kpis { + width: 100%; + flex-wrap: wrap; + } + + &__actions { + position: absolute; + top: 18px; + right: 18px; + } + } + + .cur-kpi { + flex: 1 1 auto; + min-width: 0; + } +} + +@media (width <= 700px) { + .cur-view { + padding: 12px; + } + + .cur-hero { + padding: 18px; + + &__title { + font-size: 18px; + } + + &__avatar { + width: 52px; + height: 52px; + font-size: 22px; + border-radius: 12px; + } + } + + .cur-tab { + padding: 0 12px !important; + font-size: 12px !important; + } } diff --git a/src/app/current-accounts/current-account-view/general-tab/general-tab.component.html b/src/app/current-accounts/current-account-view/general-tab/general-tab.component.html index 7bae16664..8839b59ca 100644 --- a/src/app/current-accounts/current-account-view/general-tab/general-tab.component.html +++ b/src/app/current-accounts/current-account-view/general-tab/general-tab.component.html @@ -13,355 +13,390 @@ } @if (!isLoading) { - +
+ {{ 'labels.inputs.Field Officer' | translate }} + + {{ currentAccountData.fieldOfficerName ? currentAccountData.fieldOfficerName : 'Unassigned' }} + +
+
+ {{ 'labels.inputs.Currency' | translate }} + + {{ currentAccountData.currency.name }} + [{{ currentAccountData.currency.code }}] + +
+
+ {{ 'labels.inputs.Nominal Interest Rate' | translate }} + + @if (currentAccountData.nominalAnnualInterestRate) { + {{ currentAccountData.nominalAnnualInterestRate | formatNumber }} % + } @else { + 0 % + } + +
+ } @else { +
+ {{ 'labels.inputs.Field Officer' | translate }} + + {{ currentAccountData.fieldOfficerName ? currentAccountData.fieldOfficerName : 'Unassigned' }} + +
+
+ {{ 'labels.inputs.Balance' | translate }} + + {{ currentAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + +
+ } + + + + + @if (!currentAccountData.status.rejected && !currentAccountData.status.submittedAndPendingApproval) { +
+
+ +

{{ 'labels.heading.Performance History' | translate }}

+
+
+ @if (currentAccountData.summary.totalDeposits) { +
+ {{ 'labels.inputs.Total Deposits' | translate }} + + {{ currentAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + +
+ } + @if (currentAccountData.summary.totalInterestEarned >= 0) { +
+ {{ 'labels.inputs.Total Interest Earned' | translate }} + + {{ + currentAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2' + }} + +
+ } + @if (!currentAccountData.summary.totalDeposits && !(currentAccountData.summary.totalInterestEarned >= 0)) { +
+ + No activity yet. +
+ } +
+
+ } + + + +
+ @if (isActive) { +
+
+ +

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

+
+
+ @if (currentAccountData.summary.totalWithdrawals) { +
+ {{ 'labels.inputs.Total Withdrawls' | translate }} + + {{ + currentAccountData.summary.totalWithdrawals | currency: currency.code : 'symbol-narrow' : '1.2-2' + }} + +
+ } + @if (currentAccountData.summary.totalWithdrawalFees) { +
+ {{ 'labels.inputs.Withdrawals Fees' | translate }} + + {{ + currentAccountData.summary.totalWithdrawalFees | currency: currency.code : 'symbol-narrow' : '1.2-2' + }} + +
+ } + @if (currentAccountData.summary.totalAnnualFees) { +
+ {{ 'labels.inputs.Annual Fees' | translate }} + + {{ currentAccountData.summary.totalAnnualFees | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + +
+ } + @if (currentAccountData.summary.totalInterestEarned >= 0) { +
+ {{ 'labels.inputs.Interest Earned' | translate }} + + {{ + currentAccountData.summary.totalInterestEarned | currency: currency.code : 'symbol-narrow' : '1.2-2' + }} + +
+ } + @if (currentAccountData.summary.totalInterestPosted) { +
+ {{ 'labels.inputs.Interest Posted' | translate }} + + {{ + currentAccountData.summary.totalInterestPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' + }} + +
+ } + @if (currentAccountData.summary.interestNotPosted >= 0) { +
+ {{ 'labels.inputs.Interest Earned Not Posted' | translate }} + + {{ + currentAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' + }} + +
+ } + @if (currentAccountData.summary.totalOverdraftInterestDerived) { +
+ {{ 'labels.inputs.Interest On Overdraft' | translate }} + + {{ + currentAccountData.summary.totalOverdraftInterestDerived + | currency: currency.code : 'symbol-narrow' : '1.2-2' + }} + +
+ } + @if (currentAccountData.summary.interestNotPosted < 0) { +
+ {{ 'labels.inputs.Overdraft Interest Not Posted' | translate }} + + {{ + currentAccountData.summary.interestNotPosted | currency: currency.code : 'symbol-narrow' : '1.2-2' + }} + +
+ } + @if (currentAccountData.nominalAnnualInterestRate) { +
+ {{ 'labels.inputs.Nominal Interest Rate' | translate }} + + {{ currentAccountData.nominalAnnualInterestRate | formatNumber }} % + +
+ } +
+ {{ 'labels.inputs.Interest Compounding Period' | translate }} + + {{ currentAccountData.interestCompoundingPeriodType.value | translateKey: 'catalogs' }} + +
+
+ {{ 'labels.inputs.Interest Posting Period' | translate }} + + {{ currentAccountData.interestPostingPeriodType.value | translateKey: 'catalogs' }} + +
+
+ {{ 'labels.inputs.Interest Calculated Using' | translate }} + + {{ currentAccountData.interestCalculationType.value | translateKey: 'catalogs' }} + +
+
+ {{ 'labels.inputs.Days in Year' | translate }} + + {{ currentAccountData.interestCalculationDaysInYearType.value | translateKey: 'catalogs' }} + +
+ @if (currentAccountData.withdrawalFee) { +
+ {{ 'labels.inputs.Withdrawal Fee' | translate }} + + {{ currentAccountData.withdrawalFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + +
+ } + @if (currentAccountData.lastActiveTransactionDate) { +
+ {{ 'labels.inputs.Last Active Transaction Date' | translate }} + {{ currentAccountData.lastActiveTransactionDate | dateFormat }} +
+ } + @if (!(currentAccountData.subStatus.id === 0)) { +
+ {{ 'labels.inputs.Substatus' | translate }} + {{ currentAccountData.subStatus.value }} +
+ } + @if (currentAccountData.daysToInactive) { +
+ {{ 'labels.inputs.Days to Inactive' | translate }} + {{ currentAccountData.daysToInactive }} +
+ } + @if (currentAccountData.daysToDormancy) { +
+ {{ 'labels.inputs.Days to Dormancy' | translate }} + {{ currentAccountData.daysToDormancy }} +
+ } + @if (currentAccountData.daysToEscheat) { +
+ {{ 'labels.inputs.Days to Escheat' | translate }} + {{ currentAccountData.daysToEscheat }} +
+ } + @if (currentAccountData.annualFee) { +
+ {{ 'labels.inputs.Annual Fee' | translate }} + + {{ currentAccountData.annualFee.amount | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + +
+ } + @if (currentAccountData.allowOverdraft) { +
+ {{ 'labels.inputs.Overdraft Limit' | translate }} + + {{ currentAccountData.overdraftLimit | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + +
+ } + @if (currentAccountData.allowOverdraft) { +
+ + {{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }} + + + {{ + currentAccountData.minOverdraftForInterestCalculation + | currency: currency.code : 'symbol-narrow' : '1.2-2' + }} + +
+ } + @if (currentAccountData.minBalanceForInterestCalculation) { +
+ + {{ 'labels.inputs.Min Balance Required for Interest Calculation' | translate }} + + + {{ currentAccountData.minBalanceForInterestCalculation | formatNumber }} + +
+ } + @if (currentAccountData.minRequiredBalance) { +
+ {{ 'labels.inputs.Minimum Required Balance' | translate }} + {{ currentAccountData.minRequiredBalance | formatNumber }} +
+ } + @if (currentAccountData.enforceMinRequiredBalance) { +
+ {{ 'labels.inputs.Enforce Minimum Required Balance' | translate }} + {{ currentAccountData.enforceMinRequiredBalance | yesNo }} +
+ } + @if (currentAccountData.summary.lastInterestCalculationDate) { +
+ {{ 'labels.inputs.Interest Recalculation Date' | translate }} + + {{ currentAccountData.summary.lastInterestCalculationDate | dateFormat }} + +
+ } + @if (currentAccountData.onHoldFunds) { +
+ {{ 'labels.inputs.On Hold Funds' | translate }} + + + {{ currentAccountData.onHoldFunds | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + + +
+ } + @if (currentAccountData.withHoldTax) { +
+ {{ 'labels.inputs.Withhold Tax Group' | translate }} + {{ currentAccountData.taxGroup.name }} +
+ } +
+
+ } @else { +
+
+ +

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

+
+
+
+ {{ 'labels.inputs.External Id' | translate }} + + @if (currentAccountData.externalId) { + + } @else { + {{ 'labels.inputs.Not Provided' | translate }} + } + +
+
+ {{ 'labels.inputs.Activated On' | translate }} + + {{ + currentAccountData.timeline.activatedOnDate + ? (currentAccountData.timeline.activatedOnDate | dateFormat) + : 'Not Activated' + }} + +
+
+ {{ 'labels.inputs.Currency' | translate }} + + {{ currentAccountData.currency.name }} + [{{ currentAccountData.currency.code }}] + +
+
+
+ } +
} diff --git a/src/app/current-accounts/current-account-view/general-tab/general-tab.component.scss b/src/app/current-accounts/current-account-view/general-tab/general-tab.component.scss index 2221f0329..22ae72d39 100644 --- a/src/app/current-accounts/current-account-view/general-tab/general-tab.component.scss +++ b/src/app/current-accounts/current-account-view/general-tab/general-tab.component.scss @@ -6,9 +6,15 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +$navy: #0d1b2a; +$slate: #475569; +$muted: #64748b; +$border: #e2e8f0; +$soft: #f8fafc; + +/* ─── Loader keyframes ──────────────────────────────────────────────── */ $bar: 160px; $foo: $bar * 8; -$color: #e2e4ec; .loader { margin-bottom: 39px; @@ -79,164 +85,136 @@ $color: #e2e4ec; } } -.general-tab-container { - padding: 16px 20px; - width: 100%; - box-sizing: border-box; - position: relative; - background-color: var(--background-color, #f8f9fa); - color: var(--text-color, #333); - transition: - background-color 0.3s ease, - color 0.3s ease; +/* ─── Two-column grid ───────────────────────────────────────────────── */ +.gt-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: 16px; - .page-header { - margin-bottom: 24px; - padding: 16px 0; - position: relative; - border-bottom: 1px solid var(--border-color, #e9ecef); + @media (width <= 1024px) { + grid-template-columns: 1fr; + } +} - .header-title { - font-size: 1.75rem; - font-weight: 600; - margin: 0 0 8px; - line-height: 1.2; - color: var(--primary-color, #007bff); - position: relative; - } +.gt-col { + display: flex; + flex-direction: column; + gap: 16px; + min-width: 0; +} - .header-subtitle { - font-size: 0.95rem; - margin: 0; - line-height: 1.4; - color: var(--text-secondary, #6c757d); - position: relative; - } +/* ─── Nexora section card ───────────────────────────────────────────── */ +.nx-card { + background: #fff; + border: 1px solid $border; + border-radius: 14px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; + + &__head { + display: flex; + align-items: center; + gap: 10px; + padding: 12px 18px; + background: $soft; + border-bottom: 1px solid $border; } - .content-wrapper { - position: relative; - width: 100%; - } - - .account-info-card { - background: var(--card-background, #fff); + &__ico { + width: 26px; + height: 26px; + display: inline-flex; + align-items: center; + justify-content: center; border-radius: 8px; - box-shadow: 0 2px 4px rgb(0 0 0 / 10%); - overflow: hidden; - position: relative; - width: 100%; - max-width: 600px; - transition: - box-shadow 0.3s ease, - background-color 0.3s ease; + background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); + color: #fff; + font-size: 12px; + } - .card-header { - padding: 16px 20px; - background: var(--card-header-bg, #f8f9fa); - border-bottom: 1px solid var(--border-color, #e9ecef); - position: relative; + &__title { + margin: 0; + font-size: 13.5px; + font-weight: 700; + color: $navy; + letter-spacing: 0.01em; + } - h3 { - margin: 0; - font-size: 1.1rem; - font-weight: 600; - line-height: 1.3; - color: var(--text-color, #333); - } + &__body { + padding: 4px 18px 10px; + } +} + +/* ─── Key/Value row ─────────────────────────────────────────────────── */ +.nx-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 12px; + align-items: center; + min-height: 38px; + padding: 8px 0; + border-bottom: 1px dashed #eef2f7; + font-size: 13px; + + &:last-child { + border-bottom: none; + } + + &__label { + color: $slate; + font-weight: 500; + } + + &__value { + color: $navy; + font-weight: 600; + text-align: right; + word-break: break-word; + + &--amount { + font-variant-numeric: tabular-nums; + font-weight: 700; } - .card-content { - padding: 20px; - position: relative; + &--positive { + color: #047857; + } - .info-row { - display: flex; - justify-content: space-between; - align-items: baseline; - padding: 10px 0; - border-bottom: 1px solid var(--border-light, #f1f3f4); - position: relative; - min-height: 24px; - - &:last-child { - border-bottom: none; - } - - .label { - font-weight: 500; - color: var(--text-secondary, #6c757d); - flex: 0 0 auto; - margin-right: 16px; - white-space: nowrap; - line-height: 1.4; - } - - .value { - font-weight: 600; - color: var(--text-color, #333); - text-align: right; - flex: 1 1 auto; - line-height: 1.4; - - &.currency { - color: var(--success-color, #28a745); - font-size: 1.05rem; - } - } - } + &--negative { + color: #b91c1c; } } } -// Dark mode styles -[data-theme='dark'] .general-tab-container, -.dark-theme .general-tab-container { - --background-color: #1a1a1a; - --text-color: #e9ecef; - --text-secondary: #adb5bd; - --primary-color: #4dabf7; - --card-background: #2d3748; - --card-header-bg: #374151; - --border-color: #4a5568; - --border-light: #2d3748; - --success-color: #68d391; +.nx-muted { + color: $muted; + font-weight: 500; + font-style: italic; } -// Responsive adjustments for mobile -@media (width <= 768px) { - .general-tab-container { - padding: 12px 16px; +.nx-mono { + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; + color: $muted; + margin-left: 4px; +} - .page-header { - margin-bottom: 20px; - padding: 12px 0; +/* ─── Empty state inside a card ─────────────────────────────────────── */ +.nx-empty { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 24px 16px; + color: $muted; - .header-title { - font-size: 1.5rem; - } + &__ico { + font-size: 28px; + color: #cbd5e1; + } - .header-subtitle { - font-size: 0.9rem; - } - } - - .account-info-card { - .card-header { - padding: 14px 16px; - } - - .card-content { - padding: 16px; - - .info-row { - padding: 8px 0; - - .label { - margin-right: 12px; - } - } - } - } + span { + font-size: 13px; + font-weight: 500; } } diff --git a/src/app/current-accounts/current-account-view/passbook-tab/passbook-tab.component.html b/src/app/current-accounts/current-account-view/passbook-tab/passbook-tab.component.html index 913e893d7..d9c5887a3 100644 --- a/src/app/current-accounts/current-account-view/passbook-tab/passbook-tab.component.html +++ b/src/app/current-accounts/current-account-view/passbook-tab/passbook-tab.component.html @@ -7,8 +7,8 @@ -->
- -
+ +
{{ 'labels.inputs.From Date' | translate }} @@ -45,105 +45,152 @@
- -
-
-

{{ 'labels.heading.Current Account Passbook' | translate }}

-

{{ productName }}

-
- - -
-
-
{{ 'labels.inputs.Account Number' | translate }}
-
{{ accountNo }}
+ +
+ +
+
+
+ account_balance +
+
+
LincPay Co-operative Bank Ltd.
+
Current Account Statement
+
-
-
{{ 'labels.inputs.Account Holder' | translate }}
-
{{ clientName }}
-
-
-
{{ 'labels.inputs.Current Account Product' | translate }}
-
{{ productName }}
-
-
-
{{ 'labels.inputs.Opening Date' | translate }}
-
{{ activatedOnDate | dateFormat }}
-
-
-
{{ 'labels.inputs.Status' | translate }}
-
{{ status }}
-
-
-
{{ 'labels.inputs.Interest Rate' | translate }}
-
{{ interestRate }}%
+
+
STATEMENT OF ACCOUNT
+
As on: {{ maxDate | dateFormat }}
- -
-
- {{ 'labels.inputs.Current Balance' | translate }}: - {{ accountBalance | currency: currency?.code : 'symbol-narrow' : '1.2-2' }} + +