From b149fef72ede0dfdc3f421c28dd410bf0b1febf4 Mon Sep 17 00:00:00 2001 From: Aditya Date: Thu, 21 May 2026 18:49:43 +0530 Subject: [PATCH] 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) --- .claude/settings.local.json | 9 +- src/app/cfcfrms/_cfc-form.scss | 305 ++++++ src/app/cfcfrms/cfcfrms-routing.module.ts | 2 + .../cfcfrms-shell.component.html | 99 ++ .../cfcfrms-shell.component.scss | 174 ++++ .../cfcfrms-shell/cfcfrms-shell.component.ts | 34 + src/app/cfcfrms/cfcfrms.module.ts | 2 + .../cfr-lookup/cfr-lookup.component.html | 5 - .../cfr-lookup/cfr-lookup.component.scss | 19 +- .../complaint-detail.component.html | 22 +- .../complaint-detail.component.scss | 35 +- .../complaint-list.component.html | 10 +- .../complaint-list.component.scss | 182 +++- .../cfcfrms-dashboard.component.html | 224 ++--- .../cfcfrms-dashboard.component.scss | 384 +++++--- .../dashboard/cfcfrms-dashboard.component.ts | 6 +- .../cfcfrms/escalate/escalate.component.html | 5 - .../cfcfrms/escalate/escalate.component.scss | 206 ++--- .../fmr-submission.component.html | 5 - .../fmr-submission.component.scss | 19 +- .../report-fraud-txn.component.html | 5 - .../report-fraud-txn.component.scss | 105 +-- .../report-mule/report-mule.component.html | 5 - .../report-mule/report-mule.component.scss | 99 +- .../report-suspect.component.html | 5 - .../report-suspect.component.scss | 94 +- .../client-family-members-step.component.html | 50 +- .../client-family-members-step.component.ts | 7 + .../client-preview-step.component.html | 4 +- .../client-preview-step.component.ts | 14 + src/app/clients/clients-routing.module.ts | 3 + .../clients-view/clients-view.component.html | 22 +- .../clients-view/clients-view.component.ts | 16 + .../family-members-tab.component.html | 43 +- .../family-members-tab.component.ts | 29 +- .../kyc-tab/kyc-tab.component.html | 7 +- .../clients-view/kyc-tab/kyc-tab.component.ts | 16 +- .../nominee-tab/nominee-tab.component.html | 28 +- .../nominee-tab/nominee-tab.component.ts | 27 + .../create-client.component.html | 8 +- .../create-client/create-client.component.ts | 39 +- .../edit-client/edit-client.component.html | 60 +- .../edit-client/edit-client.component.ts | 41 +- src/app/clients/utils/client-rules.ts | 37 + src/app/clients/utils/family-nominee.guard.ts | 66 ++ src/app/core/shell/shell.component.html | 263 ++++-- src/app/core/shell/shell.component.scss | 45 +- .../core/shell/sidenav/sidenav.component.html | 70 +- .../core/shell/toolbar/toolbar.component.scss | 10 + .../create-savings-account.component.html | 215 +++-- .../create-savings-account.component.scss | 186 ++-- .../create-savings-account.component.ts | 38 +- .../activate-savings-account.component.html | 114 ++- .../activate-savings-account.component.scss | 188 +++- .../activate-savings-account.component.ts | 7 +- .../add-charge-savings-account.component.html | 242 ++--- .../add-charge-savings-account.component.scss | 271 +++++- .../add-charge-savings-account.component.ts | 4 +- .../manage-savings-account.component.html | 140 ++- .../manage-savings-account.component.scss | 303 +++++- .../manage-savings-account.component.ts | 47 +- .../identity-verify-dialog.component.html | 128 +++ .../identity-verify-dialog.component.scss | 404 ++++++++ .../identity-verify-dialog.component.ts | 156 ++++ ...avings-account-transactions.component.html | 431 +++++++-- ...avings-account-transactions.component.scss | 868 +++++++++++++++++- .../savings-account-transactions.component.ts | 313 ++++++- .../transaction-confirm-dialog.component.html | 82 ++ .../transaction-confirm-dialog.component.scss | 248 +++++ .../transaction-confirm-dialog.component.ts | 75 ++ ...avings-account-details-step.component.html | 7 - .../savings-account-details-step.component.ts | 51 +- ...avings-account-preview-step.component.html | 17 +- ...avings-account-preview-step.component.scss | 25 + .../savings-account-preview-step.component.ts | 2 - .../charges-tab/charges-tab.component.html | 21 +- .../charges-tab/charges-tab.component.scss | 111 ++- .../general-tab/general-tab.component.html | 713 +++++++------- .../general-tab/general-tab.component.scss | 258 +++--- .../general-tab/general-tab.component.ts | 2 - .../savings-account-view.component.html | 580 +++++++----- .../savings-account-view.component.scss | 397 +++++++- .../savings-account-view.component.ts | 123 ++- .../transactions-tab.component.html | 47 +- .../transactions-tab.component.scss | 160 +++- .../transactions-tab.component.ts | 3 - ...ngs-transaction-general-tab.component.html | 240 ++--- ...ngs-transaction-general-tab.component.scss | 307 ++++++- ...vings-transaction-general-tab.component.ts | 25 + .../account-nominees-tab.component.html | 12 + .../account-nominees-tab.component.ts | 41 +- src/app/shared/icons.module.ts | 14 +- .../checker-inbox.component.html | 79 +- .../checker-inbox.component.scss | 41 + .../checker-inbox-and-tasks.component.html | 41 +- .../checker-inbox-and-tasks.component.scss | 153 ++- .../checker-inbox-and-tasks.component.ts | 6 +- src/environments/.env.ts | 4 +- src/main.scss | 244 +++++ 99 files changed, 8575 insertions(+), 2574 deletions(-) create mode 100644 src/app/cfcfrms/_cfc-form.scss create mode 100644 src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.html create mode 100644 src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.scss create mode 100644 src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.ts create mode 100644 src/app/clients/utils/client-rules.ts create mode 100644 src/app/clients/utils/family-nominee.guard.ts create mode 100644 src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.html create mode 100644 src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.scss create mode 100644 src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.ts create mode 100644 src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.html create mode 100644 src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.scss create mode 100644 src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.ts diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 703120349..a02f5f9a1 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -66,7 +66,14 @@ "Bash(node node_modules/prettier/bin/prettier.cjs --write \"src/**/*.{ts,html,scss}\")", "Bash(node node_modules/stylelint/bin/stylelint.mjs --fix \"src/**/*.scss\")", "Bash(node node_modules/stylelint/bin/stylelint.mjs \"src/**/*.scss\")", - "Bash(node node_modules/eslint/bin/eslint.js --cache \"src/app/users/users.component.ts\")" + "Bash(node node_modules/eslint/bin/eslint.js --cache \"src/app/users/users.component.ts\")", + "Bash(git stash *)", + "Bash(npx sass *)", + "Bash(awk '/library\\\\.addIcons/{p=1} p' src/app/shared/icons.module.ts)", + "Bash(echo \"EXIT=$?\")", + "Bash(npx lint-staged *)", + "Bash(npx --no-install tsc --noEmit -p tsconfig.json)", + "Bash(npx --no-install prettier --write src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html src/app/clients/edit-client/edit-client.component.html src/app/clients/utils/family-nominee.guard.ts)" ] } } diff --git a/src/app/cfcfrms/_cfc-form.scss b/src/app/cfcfrms/_cfc-form.scss new file mode 100644 index 000000000..da9b266ea --- /dev/null +++ b/src/app/cfcfrms/_cfc-form.scss @@ -0,0 +1,305 @@ +/** + * 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/. + */ + +/* Shared Nexora skin for CFCFRMS form pages (escalate, report-suspect, + report-mule, report-fraud-txn, fmr-submission). Each component @use's + this partial and @include's `cfc-form-skin($accent)`. + + $accent: 'blue' | 'red' — controls the title-bar gradient + submit + button colour. */ + +@mixin cfc-form-skin($accent: 'blue') { + $accent-from: #3b82f6; + $accent-to: #1e40af; + $accent-shadow: rgb(30 64 175 / 30%); + $submit-from: #1e88e5; + $submit-to: #1e40af; + + @if $accent == 'red' { + $accent-from: #ef4444; + $accent-to: #991b1b; + $accent-shadow: rgb(153 27 27 / 35%); + $submit-from: #dc2626; + $submit-to: #991b1b; + } + + /* ─── Card chrome (overrides Material's mat-card) ─────────────────── */ + .report-card, + .escalate-card, + .instructions-card { + border-radius: 14px !important; + border: 1px solid #e2e8f0 !important; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%) !important; + overflow: hidden; + background: #fff; + + ::ng-deep .mat-mdc-card-header { + padding: 0 !important; + margin: 0 !important; + display: block; + background: #f8fafc; + border-bottom: 1px solid #e2e8f0; + } + + ::ng-deep .mat-mdc-card-title { + display: flex !important; + align-items: center; + gap: 10px; + margin: 0 !important; + padding: 14px 18px; + font-size: 14.5px !important; + font-weight: 700 !important; + color: #0d1b2a; + letter-spacing: 0.01em; + line-height: 1; + + /* Promote the FA icon into a small gradient tile. */ + .fa-icon, + fa-icon { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 8px; + background: linear-gradient(135deg, $accent-from 0%, $accent-to 100%); + color: #fff; + font-size: 13px; + box-shadow: 0 2px 6px -2px $accent-shadow; + margin-right: 4px; + } + } + + ::ng-deep .mat-mdc-card-content { + padding: 22px !important; + background: #fff; + } + } + + /* ─── Form fields (consistent compact density) ────────────────────── */ + .full-width, + .half-width { + width: 100%; + } + + /* Tighten the default Material outlined field — the dashboard hero + + pill tabs are compact, so the form fields should match. */ + ::ng-deep .mat-mdc-form-field { + margin-bottom: 2px; + + .mat-mdc-text-field-wrapper { + background: #fff; + border-radius: 10px; + } + + .mdc-notched-outline__leading, + .mdc-notched-outline__notch, + .mdc-notched-outline__trailing { + border-color: #cbd5e1 !important; + } + + &.mat-focused { + .mdc-notched-outline__leading, + .mdc-notched-outline__notch, + .mdc-notched-outline__trailing { + border-color: $accent-to !important; + border-width: 2px !important; + } + } + + .mat-mdc-form-field-infix { + min-height: 48px; + padding-top: 12px !important; + padding-bottom: 12px !important; + } + + .mat-mdc-form-field-icon-suffix { + padding: 0 10px; + } + } + + /* Datepicker icon size + tone */ + ::ng-deep .mat-datepicker-toggle .mat-mdc-icon-button { + color: #64748b; + } + + /* ─── Form layout helpers ────────────────────────────────────────── */ + .form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + + @media (width <= 720px) { + grid-template-columns: 1fr; + } + } + + .ticket-lookup-row { + display: grid; + grid-template-columns: 1fr auto; + gap: 12px; + align-items: start; + + .ticket-field { + width: 100%; + } + + .lookup-btn { + height: 48px !important; + margin-top: 0; + border-radius: 10px !important; + font-weight: 600 !important; + } + } + + /* ─── Submit button ───────────────────────────────────────────────── */ + .submit-btn { + margin-top: 10px; + height: 46px !important; + border-radius: 12px !important; + font-size: 14px !important; + font-weight: 700 !important; + letter-spacing: 0.02em !important; + background: linear-gradient(135deg, $submit-from 0%, $submit-to 100%) !important; + color: #fff !important; + box-shadow: 0 4px 12px -2px $accent-shadow !important; + transition: + filter 0.15s ease, + transform 0.1s ease; + + &:hover:not(:disabled) { + filter: brightness(1.05); + } + + &:active:not(:disabled) { + transform: translateY(1px); + } + + &:disabled { + opacity: 0.55; + filter: grayscale(0.3); + } + } + + .inline-spinner { + display: inline-block; + margin-right: 8px; + } + + /* ─── Success result panel ───────────────────────────────────────── */ + .success-result { + text-align: center; + padding: 14px 0 6px; + + .success-icon { + width: 64px; + height: 64px; + margin: 0 auto 14px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: linear-gradient(135deg, #34d399 0%, #047857 100%); + color: #fff; + box-shadow: 0 8px 22px -8px rgb(4 120 87 / 50%); + + fa-icon { + font-size: 28px; + } + } + + h3 { + margin: 0 0 18px; + color: #065f46; + font-size: 18px; + font-weight: 800; + letter-spacing: 0.01em; + } + } + + .result-details { + text-align: left; + max-width: 520px; + margin: 0 auto; + background: #f0fdf4; + border: 1px solid #bbf7d0; + border-radius: 12px; + padding: 14px 16px; + } + + .result-row { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + padding: 8px 0; + border-bottom: 1px dashed #bbf7d0; + font-size: 13px; + + &:last-child { + border-bottom: none; + } + + .result-label { + color: #475569; + font-weight: 500; + } + + .result-value { + font-weight: 700; + color: #0d1b2a; + text-align: right; + + &.mono { + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; + color: #1e40af; + } + } + } + + .status-flagged { + color: #b91c1c !important; + font-weight: 800 !important; + text-transform: uppercase; + letter-spacing: 0.04em; + font-size: 12px; + } + + .mr-05 { + margin-right: 6px; + } + + .mt-16 { + margin-top: 18px; + } + + .mono { + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; + } +} + +/* ─── Two-column "form + side panel" layout ─────────────────────────── */ +@mixin cfc-side-layout { + .report-layout, + .escalate-layout { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 16px; + + /* Promote to two-column once the right-hand panel exists (escalate). */ + &:has(.instructions-card) { + grid-template-columns: minmax(0, 1fr) 360px; + + @media (width <= 1100px) { + grid-template-columns: minmax(0, 1fr); + } + } + } +} diff --git a/src/app/cfcfrms/cfcfrms-routing.module.ts b/src/app/cfcfrms/cfcfrms-routing.module.ts index 08fe11479..f9cb5d33b 100644 --- a/src/app/cfcfrms/cfcfrms-routing.module.ts +++ b/src/app/cfcfrms/cfcfrms-routing.module.ts @@ -9,6 +9,7 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { Route } from '../core/route/route.service'; +import { CfcfrmsShellComponent } from './cfcfrms-shell/cfcfrms-shell.component'; import { CfcfrmsDashboardComponent } from './dashboard/cfcfrms-dashboard.component'; import { ComplaintListComponent } from './complaint-list/complaint-list.component'; import { ComplaintDetailComponent } from './complaint-detail/complaint-detail.component'; @@ -23,6 +24,7 @@ const routes: Routes = [ Route.withShell([ { path: 'cfcfrms', + component: CfcfrmsShellComponent, data: { title: 'CFCFRMS', breadcrumb: 'CFCFRMS' }, children: [ { diff --git a/src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.html b/src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.html new file mode 100644 index 000000000..d9fce160f --- /dev/null +++ b/src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.html @@ -0,0 +1,99 @@ + + +
+ +
+
+ +
+

CFCFRMS

+
+ Cyber Fraud Complaint Management & Reporting — track complaints, escalate, and report suspect / mule + / fraud transactions. +
+
+
+
+ + + + + +
+ +
+ +
diff --git a/src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.scss b/src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.scss new file mode 100644 index 000000000..4ce13c5b7 --- /dev/null +++ b/src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.scss @@ -0,0 +1,174 @@ +/** + * 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/. + */ + +$navy: #0d1b2a; +$blue: #1e88e5; +$blue-d: #1e40af; +$indigo: #4f46e5; +$red: #dc2626; +$red-d: #991b1b; + +.cfc-container { + padding: 20px 24px; + max-width: 1440px; + margin: 0 auto; +} + +.cfc-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; + gap: 12px; + flex-wrap: wrap; + + &__left { + display: flex; + align-items: center; + gap: 12px; + } + + &__icon { + width: 44px; + height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 12px; + background: linear-gradient(135deg, $blue 0%, $indigo 100%); + color: #fff; + font-size: 18px; + box-shadow: 0 2px 8px rgb(29 78 216 / 25%); + } + + &__title { + margin: 0; + font-size: 20px; + font-weight: 800; + color: $navy; + line-height: 1.1; + letter-spacing: 0.02em; + } + + &__sub { + margin-top: 2px; + font-size: 12.5px; + color: #64748b; + max-width: 720px; + } +} + +/* Pill-style tab navigation */ +.cfc-tabs { + margin-bottom: 20px; + background: #fff; + border: 1px solid #e2e8f0; + 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; + } + + .mdc-tab-indicator__content--underline, + .mat-mdc-tab-header-pagination-controls-enabled .mdc-tab-indicator__content--underline { + display: none !important; + } + } +} + +.cfc-tab { + display: inline-flex !important; + align-items: center; + gap: 8px; + height: 38px !important; + min-width: 0 !important; + padding: 0 18px !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: 13px; + 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, + .cfc-tab__ic { + color: #fff !important; + opacity: 1 !important; + } + } + + /* Danger-flavour tabs (the three reporting tabs) glow red when active so + users can see at a glance that they're on a high-impact submission flow. */ + &--danger { + &.mdc-tab--active, + &.mat-mdc-tab-link-active { + background: linear-gradient(135deg, $red 0%, $red-d 100%) !important; + box-shadow: 0 2px 6px -1px rgb(153 27 27 / 40%); + border-color: $red-d !important; + } + + &:hover:not(.mdc-tab--active) { + background: #fef2f2 !important; + color: $red-d !important; + } + } +} + +.cfc-body { + /* Sub-pages no longer carry their own page-header (the hero above already + does that). Add a little breathing room and let their content cards + stand on their own. */ + padding: 0; +} + +@media (width <= 768px) { + .cfc-tabs { + overflow-x: auto; + + ::ng-deep .mat-mdc-tab-links { + flex-wrap: nowrap; + } + } + + .cfc-tab { + padding: 0 14px !important; + font-size: 12px !important; + } +} diff --git a/src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.ts b/src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.ts new file mode 100644 index 000000000..feb413716 --- /dev/null +++ b/src/app/cfcfrms/cfcfrms-shell/cfcfrms-shell.component.ts @@ -0,0 +1,34 @@ +/** + * 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/. + */ + +import { Component } from '@angular/core'; +import { MatTabNav, MatTabLink, MatTabNavPanel } from '@angular/material/tabs'; +import { RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; +import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; + +/** + * CFCFRMS Shell — single landing page that exposes the full Cyber Fraud + * Complaint Management workflow (Dashboard, Complaints, Escalate, Suspect / + * Mule / Fraud reporting) as pill-style tabs above a router-outlet. + */ +@Component({ + selector: 'mifosx-cfcfrms-shell', + templateUrl: './cfcfrms-shell.component.html', + styleUrls: ['./cfcfrms-shell.component.scss'], + imports: [ + ...STANDALONE_SHARED_IMPORTS, + MatTabNav, + MatTabLink, + RouterLinkActive, + MatTabNavPanel, + RouterOutlet, + FaIconComponent + ] +}) +export class CfcfrmsShellComponent {} diff --git a/src/app/cfcfrms/cfcfrms.module.ts b/src/app/cfcfrms/cfcfrms.module.ts index eab2f268d..065a2ef1c 100644 --- a/src/app/cfcfrms/cfcfrms.module.ts +++ b/src/app/cfcfrms/cfcfrms.module.ts @@ -8,6 +8,7 @@ import { NgModule } from '@angular/core'; import { CfcfrmsRoutingModule } from './cfcfrms-routing.module'; +import { CfcfrmsShellComponent } from './cfcfrms-shell/cfcfrms-shell.component'; import { CfcfrmsDashboardComponent } from './dashboard/cfcfrms-dashboard.component'; import { ComplaintListComponent } from './complaint-list/complaint-list.component'; import { ComplaintDetailComponent } from './complaint-detail/complaint-detail.component'; @@ -21,6 +22,7 @@ import { CfrLookupComponent } from './cfr-lookup/cfr-lookup.component'; @NgModule({ imports: [ CfcfrmsRoutingModule, + CfcfrmsShellComponent, CfcfrmsDashboardComponent, ComplaintListComponent, ComplaintDetailComponent, diff --git a/src/app/cfcfrms/cfr-lookup/cfr-lookup.component.html b/src/app/cfcfrms/cfr-lookup/cfr-lookup.component.html index a8a656ce5..65d6a9fad 100644 --- a/src/app/cfcfrms/cfr-lookup/cfr-lookup.component.html +++ b/src/app/cfcfrms/cfr-lookup/cfr-lookup.component.html @@ -7,11 +7,6 @@ -->
-
-

{{ 'labels.text.CFR Lookup' | translate }}

-

{{ 'labels.text.Query RBI Central Fraud Registry before customer onboarding' | translate }}

-
- diff --git a/src/app/cfcfrms/cfr-lookup/cfr-lookup.component.scss b/src/app/cfcfrms/cfr-lookup/cfr-lookup.component.scss index 06967caf9..80e6c4f60 100644 --- a/src/app/cfcfrms/cfr-lookup/cfr-lookup.component.scss +++ b/src/app/cfcfrms/cfr-lookup/cfr-lookup.component.scss @@ -7,27 +7,12 @@ */ .cfr-lookup-page { - padding: 24px; + /* Wrapper hero already handles outer padding. */ + padding: 0; max-width: 1200px; margin: 0 auto; } -.page-header { - margin-bottom: 24px; - - h2 { - margin: 0; - font-size: 24px; - font-weight: 600; - } - - .subtitle { - margin: 4px 0 0; - color: #666; - font-size: 14px; - } -} - .search-card { margin-bottom: 24px; } diff --git a/src/app/cfcfrms/complaint-detail/complaint-detail.component.html b/src/app/cfcfrms/complaint-detail/complaint-detail.component.html index 96ba244f9..20cd2c028 100644 --- a/src/app/cfcfrms/complaint-detail/complaint-detail.component.html +++ b/src/app/cfcfrms/complaint-detail/complaint-detail.component.html @@ -7,14 +7,22 @@ -->
-
- - + +
+ + + {{ 'labels.text.Back' | translate }} -
-

{{ 'labels.menus.Complaint Detail' | translate }}

-

{{ 'labels.text.Ticket ID' | translate }}: {{ ticketId }}

-
+ + + {{ ticketId }} +
@if (isLoading) { diff --git a/src/app/cfcfrms/complaint-detail/complaint-detail.component.scss b/src/app/cfcfrms/complaint-detail/complaint-detail.component.scss index d6a73640b..aa6b7d164 100644 --- a/src/app/cfcfrms/complaint-detail/complaint-detail.component.scss +++ b/src/app/cfcfrms/complaint-detail/complaint-detail.component.scss @@ -7,29 +7,38 @@ */ .complaint-detail-page { - padding: 24px; + padding: 0; max-width: 1400px; margin: 0 auto; } -.page-header { +/* Sub-toolbar (back-button + ticket chip). Lives under the wrapper hero. */ +.cfc-subtoolbar { display: flex; align-items: center; gap: 12px; - margin-bottom: 24px; + margin-bottom: 18px; - h2 { - margin: 0; - font-size: 24px; - font-weight: 700; - color: #0d1b2a; + &__ticket { + display: inline-flex; + align-items: center; + gap: 6px; + height: 32px; + padding: 0 12px; + border-radius: 999px; + background: #eff6ff; + color: #1e40af; + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; + font-weight: 600; + border: 1px solid #bfdbfe; } +} - .subtitle { - margin: 2px 0 0; - color: #64748b; - font-size: 14px; - } +.cfc-back-btn { + height: 36px !important; + border-radius: 10px !important; + font-weight: 600 !important; } .loading-container { diff --git a/src/app/cfcfrms/complaint-list/complaint-list.component.html b/src/app/cfcfrms/complaint-list/complaint-list.component.html index d9b987305..994446bb0 100644 --- a/src/app/cfcfrms/complaint-list/complaint-list.component.html +++ b/src/app/cfcfrms/complaint-list/complaint-list.component.html @@ -7,11 +7,11 @@ -->
-
-
-

{{ 'labels.menus.Complaint Management' | translate }}

-

{{ 'labels.text.I4C/MHA CFCFRMS Complaint Tickets' | translate }}

-
+ +
+ {{ 'labels.text.I4C/MHA CFCFRMS Complaint Tickets' | translate }} + diff --git a/src/app/cfcfrms/complaint-list/complaint-list.component.scss b/src/app/cfcfrms/complaint-list/complaint-list.component.scss index 993b2b704..a00f1d72c 100644 --- a/src/app/cfcfrms/complaint-list/complaint-list.component.scss +++ b/src/app/cfcfrms/complaint-list/complaint-list.component.scss @@ -6,46 +6,73 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +$navy: #0d1b2a; +$slate: #475569; +$muted: #64748b; +$border: #e2e8f0; +$soft: #f8fafc; + .complaint-list-page { - padding: 24px; + /* Wrapper hero owns the page chrome — sub-page just needs to breathe. */ + padding: 0; max-width: 1400px; margin: 0 auto; } -.page-header { +/* ─── Sub-toolbar (hint + export) ───────────────────────────────────── */ +.cfc-subtoolbar { display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 20px; + align-items: center; + gap: 12px; + margin-bottom: 14px; - h2 { - margin: 0; - font-size: 24px; - font-weight: 700; - color: #0d1b2a; + &__hint { + font-size: 13px; + color: $muted; + font-weight: 500; } - .subtitle { - margin: 4px 0 0; - color: #64748b; - font-size: 14px; + &__spacer { + flex: 1; + } + + ::ng-deep .mat-mdc-raised-button { + border-radius: 10px !important; + height: 38px !important; + font-weight: 600 !important; + letter-spacing: 0.01em !important; } } +/* ─── Status pill-chip bar ──────────────────────────────────────────── */ .filter-chips { display: flex; - gap: 10px; - margin-bottom: 16px; + gap: 8px; + margin-bottom: 14px; + flex-wrap: wrap; button { - border-radius: 20px !important; - font-size: 13px; + height: 34px !important; + padding: 0 14px !important; + border-radius: 999px !important; + font-size: 12.5px !important; + font-weight: 600 !important; + border: 1px solid $border !important; + background: #fff !important; + color: $slate !important; + transition: all 0.15s ease; + + &:hover:not(.active-chip) { + background: #f1f5f9 !important; + color: $navy !important; + } } .active-chip { - background: #1e88e5 !important; + background: linear-gradient(135deg, #1e88e5 0%, #1e40af 100%) !important; color: #fff !important; - border-color: #1e88e5 !important; + border-color: #1e40af !important; + box-shadow: 0 2px 6px -1px rgb(30 64 175 / 35%); } .chip-dot { @@ -69,12 +96,16 @@ } } +/* ─── Filter bar (Nexora card chrome) ───────────────────────────────── */ .filter-bar { margin-bottom: 16px; - border-radius: 8px !important; + border-radius: 12px !important; + border: 1px solid $border !important; + background: #fff !important; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%) !important; - mat-card-content { - padding: 12px 16px !important; + ::ng-deep .mat-mdc-card-content { + padding: 14px 16px !important; } } @@ -87,13 +118,48 @@ .filter-field { flex: 1; min-width: 180px; + margin-bottom: 0; } } -.table-card { - border-radius: 8px !important; +/* Compact form-field density inside the filter bar */ +::ng-deep .filter-bar .mat-mdc-form-field { + .mat-mdc-text-field-wrapper { + background: #fff; + border-radius: 10px; + } - mat-card-content { + .mat-mdc-form-field-infix { + min-height: 42px; + padding-top: 9px !important; + padding-bottom: 9px !important; + } + + .mdc-notched-outline__leading, + .mdc-notched-outline__notch, + .mdc-notched-outline__trailing { + border-color: #cbd5e1 !important; + } + + &.mat-focused { + .mdc-notched-outline__leading, + .mdc-notched-outline__notch, + .mdc-notched-outline__trailing { + border-color: #1e40af !important; + border-width: 2px !important; + } + } +} + +/* ─── Table card ────────────────────────────────────────────────────── */ +.table-card { + border-radius: 12px !important; + border: 1px solid $border !important; + background: #fff !important; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%) !important; + overflow: hidden; + + ::ng-deep .mat-mdc-card-content { padding: 0 !important; } } @@ -106,10 +172,41 @@ width: 100%; } +::ng-deep .table-card { + .mat-mdc-header-cell { + background: $soft; + font-size: 12px; + font-weight: 700; + color: $slate; + text-transform: uppercase; + letter-spacing: 0.06em; + padding: 12px 16px; + border-bottom: 1px solid $border; + } + + .mat-mdc-cell { + font-size: 13.5px; + color: $navy; + padding: 12px 16px; + border-bottom: 1px solid #f1f5f9; + } + + .mat-mdc-row:hover { + background: #f8fafc; + } + + .mat-mdc-paginator { + border-top: 1px solid $border; + background: $soft; + } +} + .ticket-link { - color: #1e88e5; + color: #1e40af; text-decoration: none; - font-weight: 600; + font-weight: 700; + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; &:hover { text-decoration: underline; @@ -117,31 +214,46 @@ } .amount-cell { - font-weight: 600; - color: #0d1b2a; + font-weight: 700; + color: $navy; + font-variant-numeric: tabular-nums; } .mono { - font-family: 'Courier New', monospace; - font-size: 13px; + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; + color: $navy; } .loading-container { display: flex; justify-content: center; - padding: 48px; + padding: 56px; } .empty-state { display: flex; flex-direction: column; align-items: center; - padding: 64px; - color: #94a3b8; + padding: 56px 24px; + color: $muted; + + fa-icon { + color: #cbd5e1; + margin-bottom: 8px; + } p { margin: 12px 0; font-size: 14px; + font-weight: 600; + color: $slate; + } + + button { + margin-top: 4px; + border-radius: 8px !important; + font-weight: 600 !important; } } diff --git a/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.html b/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.html index f991a7686..ae133bcc8 100644 --- a/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.html +++ b/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.html @@ -7,133 +7,137 @@ -->
-
-

{{ 'labels.menus.CFCFRMS Dashboard' | translate }}

-

{{ 'labels.text.Cyber Fraud Complaint Management Overview' | translate }}

+ +
+
+
+ +
+
+
{{ stats?.totalComplaints || 0 }}
+
{{ 'labels.text.Total Complaints' | translate }}
+
+
+
+
+ +
+
+
{{ stats?.pendingReview || 0 }}
+
{{ 'labels.text.Pending Review' | translate }}
+
+
+
+
+ +
+
+
{{ stats?.lienMarked || 0 }}
+
{{ 'labels.text.Lien Marked' | translate }}
+
+
+
+
+ +
+
+
{{ formatCurrency(stats?.fundsRecovered || 0) }}
+
{{ 'labels.text.Funds Recovered' | translate }}
+
+
- -
- - -
-
- {{ stats?.totalComplaints || 0 }} - {{ 'labels.text.Total Complaints' | translate }} -
- - - - -
-
- {{ stats?.pendingReview || 0 }} - {{ 'labels.text.Pending Review' | translate }} -
- - - - -
-
- {{ stats?.lienMarked || 0 }} - {{ 'labels.text.Lien Marked' | translate }} -
- - - - -
-
- {{ formatCurrency(stats?.fundsRecovered || 0) }} - {{ 'labels.text.Funds Recovered' | translate }} -
- - -
- - +
- - - {{ 'labels.text.Status Distribution' | translate }} - - +
+
+ +

{{ 'labels.text.Status Distribution' | translate }}

+
+
- - - - - {{ 'labels.text.Fraud Amount by Status' | translate }} - - +
+
+
+
+ +

{{ 'labels.text.Fraud Amount by Status' | translate }}

+
+
- - +
+
- - - - {{ 'labels.text.Recent Complaints' | translate }} - - {{ - 'labels.text.View All' | translate - }} - - + +
+
+ +

{{ 'labels.text.Recent Complaints' | translate }}

+ + + {{ 'labels.text.View All' | translate }} + + +
+
@if (isLoading) { -
+
} @else if (recentComplaints.length === 0) { -
- -

{{ 'labels.text.No complaints found' | translate }}

+
+ +
{{ 'labels.text.No complaints found' | translate }}
+
Recent activity will appear here.
} @else { - - - - - - - - - - - - - - - - - - - - - - - - - +
+
{{ 'labels.text.Ticket ID' | translate }} - {{ row.ticketId }} - {{ 'labels.text.Complainant' | translate }}{{ row.complainantName }}{{ 'labels.text.Fraud Amount' | translate }}{{ formatCurrency(row.fraudAmount) }}{{ 'labels.text.Status' | translate }} - - {{ 'labels.text.Created' | translate }}{{ formatDate(row.createdAt) }}{{ 'labels.text.Actions' | translate }} - - - -
+ + + + + + + + + + + + + + + + + + + + + + + + - - -
{{ 'labels.text.Ticket ID' | translate }} + {{ row.ticketId }} + {{ 'labels.text.Complainant' | translate }}{{ row.complainantName }}{{ 'labels.text.Fraud Amount' | translate }}{{ formatCurrency(row.fraudAmount) }}{{ 'labels.text.Status' | translate }} + + {{ 'labels.text.Created' | translate }}{{ formatDate(row.createdAt) }} + {{ 'labels.text.Actions' | translate }} + + + + +
+ + + +
} - - +
+
diff --git a/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.scss b/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.scss index 061991332..bd37b33fd 100644 --- a/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.scss +++ b/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.scss @@ -6,147 +6,193 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +$navy: #0d1b2a; +$slate: #475569; +$muted: #64748b; +$border: #e2e8f0; +$soft: #f8fafc; + .cfcfrms-dashboard { - padding: 24px; + /* Wrapper hero handles outer padding/centering. */ + padding: 0; max-width: 1400px; margin: 0 auto; } -.page-header { - margin-bottom: 24px; - - h2 { - margin: 0; - font-size: 24px; - font-weight: 700; - color: #0d1b2a; - } - - .subtitle { - margin: 4px 0 0; - color: #64748b; - font-size: 14px; - } -} - -.stat-cards { +/* ─── KPI strip ─────────────────────────────────────────────────────── */ +.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 20px; - margin-bottom: 24px; + gap: 16px; + margin-bottom: 20px; - @media (width <= 1280px) { + @media (width <= 1100px) { grid-template-columns: repeat(2, 1fr); } -} -.stat-card { - border-left: 4px solid; - border-radius: 8px !important; - - mat-card-content { - display: flex; - align-items: center; - gap: 16px; - padding: 20px !important; - } - - .stat-icon { - width: 56px; - height: 56px; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - color: #fff; - } - - .stat-info { - display: flex; - flex-direction: column; - } - - .stat-value { - font-size: 28px; - font-weight: 700; - line-height: 1.2; - } - - .stat-label { - font-size: 13px; - color: #64748b; - margin-top: 2px; - } - - &.stat-total { - border-color: #1e88e5; - - .stat-icon { - background: #1e88e5; - } - - .stat-value { - color: #1e88e5; - } - } - - &.stat-pending { - border-color: #f59e0b; - - .stat-icon { - background: #f59e0b; - } - - .stat-value { - color: #f59e0b; - } - } - - &.stat-lien { - border-color: #eab308; - - .stat-icon { - background: #eab308; - } - - .stat-value { - color: #92400e; - } - } - - &.stat-recovered { - border-color: #10b981; - - .stat-icon { - background: #10b981; - } - - .stat-value { - color: #10b981; - } - } -} - -.charts-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 20px; - margin-bottom: 24px; - - @media (width <= 1280px) { + @media (width <= 640px) { grid-template-columns: 1fr; } } -.chart-card { - border-radius: 8px !important; +.kpi-card { + display: flex; + align-items: center; + gap: 14px; + background: #fff; + border: 1px solid $border; + border-radius: 14px; + padding: 16px 18px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + transition: + transform 0.15s ease, + box-shadow 0.15s ease, + border-color 0.15s ease; - mat-card-header { - padding: 16px 16px 0; + &:hover { + transform: translateY(-1px); + box-shadow: 0 6px 16px -6px rgb(15 23 42 / 12%); } - mat-card-content { - padding: 16px !important; + &__ico { + width: 44px; + height: 44px; + border-radius: 12px; + display: inline-flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 17px; + flex-shrink: 0; + } + + &__body { + display: flex; + flex-direction: column; + min-width: 0; + } + + &__value { + font-size: 22px; + font-weight: 800; + color: $navy; + line-height: 1.15; + letter-spacing: -0.01em; + } + + &__label { + margin-top: 2px; + font-size: 12px; + color: $muted; + text-transform: uppercase; + letter-spacing: 0.06em; + font-weight: 600; + } + + /* Variant tint — left accent stripe + gradient icon. */ + &--blue { + border-left: 3px solid #1e88e5; + + .kpi-card__ico { + background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); + box-shadow: 0 4px 10px -4px rgb(30 64 175 / 50%); + } + } + + &--amber { + border-left: 3px solid #f59e0b; + + .kpi-card__ico { + background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); + box-shadow: 0 4px 10px -4px rgb(217 119 6 / 50%); + } + } + + &--purple { + border-left: 3px solid #8b5cf6; + + .kpi-card__ico { + background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%); + box-shadow: 0 4px 10px -4px rgb(109 40 217 / 50%); + } + } + + &--green { + border-left: 3px solid #10b981; + + .kpi-card__ico { + background: linear-gradient(135deg, #34d399 0%, #047857 100%); + box-shadow: 0 4px 10px -4px rgb(4 120 87 / 50%); + } + } +} + +/* ─── Charts row ────────────────────────────────────────────────────── */ +.charts-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + margin-bottom: 20px; + + @media (width <= 1100px) { + grid-template-columns: 1fr; + } +} + +/* ─── Generic Nexora 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: 14px 18px; + border-bottom: 1px solid $border; + background: $soft; + } + + &__ico { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 8px; + background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); + color: #fff; + font-size: 13px; + } + + &__title { + margin: 0; + font-size: 14px; + font-weight: 700; + color: $navy; + letter-spacing: 0.01em; + } + + &__spacer { + flex: 1; + } + + &__action { + height: 32px !important; + border-radius: 8px !important; + font-size: 12.5px !important; + font-weight: 600 !important; + } + + &__body { + padding: 18px; + + &--flush { + padding: 0; + } } } @@ -155,53 +201,87 @@ position: relative; } -.recent-complaints-card { - border-radius: 8px !important; - - mat-card-header { - display: flex; - align-items: center; - padding: 16px; - - .spacer { - flex: 1; - } - } - - mat-card-content { - padding: 0 !important; - } +/* ─── Table ─────────────────────────────────────────────────────────── */ +.nx-table-wrap { + overflow-x: auto; } -.full-width { +.nx-table { width: 100%; + + ::ng-deep .mat-mdc-header-cell { + background: $soft; + font-size: 12px; + font-weight: 700; + color: $slate; + text-transform: uppercase; + letter-spacing: 0.06em; + padding: 12px 16px; + } + + ::ng-deep .mat-mdc-cell { + font-size: 13.5px; + color: $navy; + padding: 12px 16px; + } + + ::ng-deep .mat-mdc-row:hover { + background: #f1f5f9; + } } .ticket-link { - color: #1e88e5; + color: #1e40af; text-decoration: none; - font-weight: 600; + font-weight: 700; + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; &:hover { text-decoration: underline; } } -.loading-container { - display: flex; - justify-content: center; - padding: 40px; +.amount-cell { + font-weight: 700; + color: $navy; + font-variant-numeric: tabular-nums; } -.empty-state { +.text-right { + text-align: right; +} + +.ml-04 { + margin-left: 4px; +} + +/* ─── States (loading / empty) ──────────────────────────────────────── */ +.nx-state { display: flex; flex-direction: column; align-items: center; - padding: 48px; - color: #94a3b8; + justify-content: center; + gap: 8px; + padding: 56px 24px; + color: $muted; - p { - margin-top: 12px; - font-size: 14px; + &--empty { + .nx-state__ico { + font-size: 38px; + color: #cbd5e1; + margin-bottom: 6px; + } + + .nx-state__title { + font-size: 14.5px; + font-weight: 700; + color: $slate; + } + + .nx-state__sub { + font-size: 12.5px; + color: $muted; + } } } diff --git a/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.ts b/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.ts index d009e143e..12e625eed 100644 --- a/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.ts +++ b/src/app/cfcfrms/dashboard/cfcfrms-dashboard.component.ts @@ -9,17 +9,15 @@ import { Component, OnInit, inject, ViewChild, ElementRef } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; -import { MatCardModule } from '@angular/material/card'; import { MatTableModule } from '@angular/material/table'; import { MatButtonModule } from '@angular/material/button'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { MatIconModule } from '@angular/material/icon'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { Chart, registerables } from 'chart.js'; import { TranslateModule } from '@ngx-translate/core'; import { CfcfrmsService } from '../cfcfrms.service'; import { StatusBadgeComponent } from '../components/status-badge/status-badge.component'; -import { Complaint, DashboardStats, ComplaintStatus } from '../models/cfcfrms.models'; +import { Complaint, DashboardStats } from '../models/cfcfrms.models'; Chart.register(...registerables); @@ -29,11 +27,9 @@ Chart.register(...registerables); imports: [ CommonModule, RouterModule, - MatCardModule, MatTableModule, MatButtonModule, MatProgressSpinnerModule, - MatIconModule, FaIconComponent, TranslateModule, StatusBadgeComponent diff --git a/src/app/cfcfrms/escalate/escalate.component.html b/src/app/cfcfrms/escalate/escalate.component.html index 3df586d6d..f9bc50857 100644 --- a/src/app/cfcfrms/escalate/escalate.component.html +++ b/src/app/cfcfrms/escalate/escalate.component.html @@ -7,11 +7,6 @@ -->
-
-

{{ 'labels.menus.Escalate Complaint' | translate }}

-

{{ 'labels.text.Forward complaint to the next bank in the transaction chain' | translate }}

-
-
diff --git a/src/app/cfcfrms/escalate/escalate.component.scss b/src/app/cfcfrms/escalate/escalate.component.scss index b449c40c4..3598682e0 100644 --- a/src/app/cfcfrms/escalate/escalate.component.scss +++ b/src/app/cfcfrms/escalate/escalate.component.scss @@ -6,206 +6,138 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +@use '../cfc-form' as *; + .escalate-page { - padding: 24px; + /* Wrapper hero already handles outer padding. */ + padding: 0; max-width: 1200px; margin: 0 auto; } -.page-header { - margin-bottom: 24px; - - h2 { - margin: 0; - font-size: 24px; - font-weight: 700; - color: #0d1b2a; - } - - .subtitle { - margin: 4px 0 0; - color: #64748b; - font-size: 14px; - } -} - .escalate-layout { display: grid; - grid-template-columns: 1fr 360px; - gap: 24px; + grid-template-columns: minmax(0, 1fr) 360px; + gap: 16px; align-items: start; - @media (width <= 1280px) { - grid-template-columns: 1fr; - } -} - -.escalate-card, -.instructions-card { - border-radius: 8px !important; - - mat-card-header { - padding: 16px 20px 0; - } - - mat-card-content { - padding: 16px 20px 20px !important; - } -} - -.ticket-lookup-row { - display: flex; - gap: 12px; - align-items: flex-start; - - .ticket-field { - flex: 1; - } - - .lookup-btn { - margin-top: 4px; - height: 56px; + @media (width <= 1100px) { + grid-template-columns: minmax(0, 1fr); } } .lookup-result { - background: #f0f9ff; - border: 1px solid #bae6fd; - border-radius: 8px; - padding: 16px; - margin-bottom: 16px; + background: #eff6ff; + border: 1px solid #bfdbfe; + border-radius: 12px; + padding: 14px 16px; + margin-bottom: 18px; .lookup-row { display: flex; align-items: center; - gap: 8px; - padding: 4px 0; - font-size: 14px; + gap: 10px; + padding: 5px 0; + font-size: 13px; span { - color: #64748b; + color: #475569; + } + + strong { + color: #0d1b2a; + font-weight: 700; + + &.mono { + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; + color: #1e40af; + } } } } -.full-width { - width: 100%; -} - -.submit-btn { - margin-top: 8px; - height: 44px; -} - -.inline-spinner { - display: inline-block; -} - -.mr-05 { - margin-right: 4px; -} - -.mt-16 { - margin-top: 16px; -} - -.mono { - font-family: 'Courier New', monospace; -} - -// Success result -.success-result { - text-align: center; - padding: 24px 0; - - .success-icon { - color: #10b981; - margin-bottom: 12px; - } - - h3 { - margin: 0 0 20px; - color: #065f46; - font-size: 20px; +/* ─── Instructions side panel ───────────────────────────────────────── */ +.instructions-card { + ::ng-deep .mat-mdc-card-content { + padding: 18px !important; } } -.result-details { - text-align: left; - background: #f0fdf4; - border: 1px solid #bbf7d0; - border-radius: 8px; - padding: 16px; - - .result-row { - display: flex; - justify-content: space-between; - padding: 6px 0; - font-size: 14px; - - .result-label { - color: #64748b; - } - - .result-value { - font-weight: 600; - color: #1e293b; - } - } -} - -// Instructions card .guidelines { - margin-bottom: 20px; + margin-bottom: 16px; } .guideline-item { display: flex; gap: 10px; align-items: flex-start; - padding: 8px 0; + padding: 7px 0; .guideline-icon { + width: 22px; + height: 22px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 6px; + background: #ecfdf5; color: #10b981; - margin-top: 2px; + font-size: 11px; flex-shrink: 0; + margin-top: 1px; &.warn { - color: #f59e0b; + background: #fffbeb; + color: #d97706; } } p { margin: 0; - font-size: 13px; - color: #475569; + font-size: 12.5px; + color: #334155; line-height: 1.5; } } .bank-info { background: #f8fafc; - border-radius: 8px; - padding: 16px; + border-radius: 10px; + padding: 14px 16px; border: 1px solid #e2e8f0; h4 { - margin: 0 0 8px; - font-size: 13px; - font-weight: 700; + margin: 0 0 10px; + font-size: 11.5px; + font-weight: 800; color: #0d1b2a; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.08em; } .bank-row { display: flex; justify-content: space-between; - padding: 4px 0; - font-size: 14px; + align-items: center; + padding: 5px 0; + font-size: 13px; span { color: #64748b; } + + strong { + color: #0d1b2a; + font-weight: 700; + + &.mono { + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; + color: #1e40af; + } + } } } + +@include cfc-form-skin('blue'); diff --git a/src/app/cfcfrms/fmr-submission/fmr-submission.component.html b/src/app/cfcfrms/fmr-submission/fmr-submission.component.html index 3a689b1cd..fb06bc101 100644 --- a/src/app/cfcfrms/fmr-submission/fmr-submission.component.html +++ b/src/app/cfcfrms/fmr-submission/fmr-submission.component.html @@ -7,11 +7,6 @@ -->
-
-

{{ 'labels.text.FMR Submission' | translate }}

-

{{ 'labels.text.Submit Fraud Monitoring Return to RBI FUA System' | translate }}

-
-
diff --git a/src/app/cfcfrms/fmr-submission/fmr-submission.component.scss b/src/app/cfcfrms/fmr-submission/fmr-submission.component.scss index 183f1ba73..57341de6e 100644 --- a/src/app/cfcfrms/fmr-submission/fmr-submission.component.scss +++ b/src/app/cfcfrms/fmr-submission/fmr-submission.component.scss @@ -7,27 +7,12 @@ */ .report-page { - padding: 24px; + /* Wrapper hero already handles outer padding. */ + padding: 0; max-width: 1200px; margin: 0 auto; } -.page-header { - margin-bottom: 24px; - - h2 { - margin: 0; - font-size: 24px; - font-weight: 600; - } - - .subtitle { - margin: 4px 0 0; - color: #666; - font-size: 14px; - } -} - .report-layout { display: flex; gap: 24px; diff --git a/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.html b/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.html index 5df0c900a..382ee7e7c 100644 --- a/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.html +++ b/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.html @@ -7,11 +7,6 @@ -->
-
-

{{ 'labels.text.Report Fraud Transaction' | translate }}

-

{{ 'labels.text.Report a detected fraud transaction to I4C' | translate }}

-
-
diff --git a/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.scss b/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.scss index 3fae27dd4..80d405fea 100644 --- a/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.scss +++ b/src/app/cfcfrms/report-fraud-txn/report-fraud-txn.component.scss @@ -6,114 +6,23 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +@use '../cfc-form' as *; + .report-page { - padding: 24px; + /* Wrapper hero already handles outer padding. */ + padding: 0; max-width: 1200px; margin: 0 auto; } -.page-header { - margin-bottom: 24px; - - h2 { - margin: 0; - font-size: 24px; - font-weight: 600; - } - - .subtitle { - margin: 4px 0 0; - color: #666; - font-size: 14px; - } -} - .report-layout { - display: flex; - gap: 24px; + display: block; } .report-card { flex: 1; - max-width: 700px; -} - -.full-width { width: 100%; } -.mr-05 { - margin-right: 0.5rem; -} - -.mt-16 { - margin-top: 16px; -} - -.submit-btn { - margin-top: 8px; - height: 48px; - font-size: 16px; -} - -.inline-spinner { - display: inline-block; - margin-right: 8px; -} - -.success-result { - text-align: center; - padding: 32px 16px; - - .success-icon { - color: #10b981; - margin-bottom: 16px; - } - - h3 { - color: #10b981; - margin-bottom: 24px; - } -} - -.result-details { - text-align: left; - max-width: 500px; - margin: 0 auto; - background: #f8f9fa; - border-radius: 8px; - padding: 16px; -} - -.result-row { - display: flex; - justify-content: space-between; - padding: 8px 0; - border-bottom: 1px solid #eee; - - &:last-child { - border-bottom: none; - } -} - -.result-label { - color: #666; - font-weight: 500; -} - -.result-value { - font-weight: 600; -} - -.mono { - font-family: 'Roboto Mono', monospace; -} - -.form-row { - display: flex; - gap: 16px; -} - -.half-width { - flex: 1; -} +/* Layered Nexora skin: red-accented for the high-impact fraud report. */ +@include cfc-form-skin('red'); diff --git a/src/app/cfcfrms/report-mule/report-mule.component.html b/src/app/cfcfrms/report-mule/report-mule.component.html index 9c6dbc760..bae050e1d 100644 --- a/src/app/cfcfrms/report-mule/report-mule.component.html +++ b/src/app/cfcfrms/report-mule/report-mule.component.html @@ -7,11 +7,6 @@ -->
-
-

{{ 'labels.text.Report Mule Account' | translate }}

-

{{ 'labels.text.Flag a mule account proactively to I4C/CFCFRMS' | translate }}

-
-
diff --git a/src/app/cfcfrms/report-mule/report-mule.component.scss b/src/app/cfcfrms/report-mule/report-mule.component.scss index 32e7cac87..82b1e5b0e 100644 --- a/src/app/cfcfrms/report-mule/report-mule.component.scss +++ b/src/app/cfcfrms/report-mule/report-mule.component.scss @@ -6,110 +6,21 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +@use '../cfc-form' as *; + .report-page { - padding: 24px; + padding: 0; max-width: 1200px; margin: 0 auto; } -.page-header { - margin-bottom: 24px; - - h2 { - margin: 0; - font-size: 24px; - font-weight: 600; - } - - .subtitle { - margin: 4px 0 0; - color: #666; - font-size: 14px; - } -} - .report-layout { - display: flex; - gap: 24px; + display: block; } .report-card { flex: 1; - max-width: 700px; -} - -.full-width { width: 100%; } -.mr-05 { - margin-right: 0.5rem; -} - -.mt-16 { - margin-top: 16px; -} - -.submit-btn { - margin-top: 8px; - height: 48px; - font-size: 16px; -} - -.inline-spinner { - display: inline-block; - margin-right: 8px; -} - -.success-result { - text-align: center; - padding: 32px 16px; - - .success-icon { - color: #10b981; - margin-bottom: 16px; - } - - h3 { - color: #10b981; - margin-bottom: 24px; - } -} - -.result-details { - text-align: left; - max-width: 500px; - margin: 0 auto; - background: #f8f9fa; - border-radius: 8px; - padding: 16px; -} - -.result-row { - display: flex; - justify-content: space-between; - padding: 8px 0; - border-bottom: 1px solid #eee; - - &:last-child { - border-bottom: none; - } -} - -.result-label { - color: #666; - font-weight: 500; -} - -.result-value { - font-weight: 600; -} - -.mono { - font-family: 'Roboto Mono', monospace; -} - -.status-flagged { - color: #ef4444; - font-weight: 700; -} +@include cfc-form-skin('red'); diff --git a/src/app/cfcfrms/report-suspect/report-suspect.component.html b/src/app/cfcfrms/report-suspect/report-suspect.component.html index c56416e4d..10612c242 100644 --- a/src/app/cfcfrms/report-suspect/report-suspect.component.html +++ b/src/app/cfcfrms/report-suspect/report-suspect.component.html @@ -7,11 +7,6 @@ -->
-
-

{{ 'labels.text.Report Suspect Account' | translate }}

-

{{ 'labels.text.Report internally detected suspect account to I4C' | translate }}

-
-
diff --git a/src/app/cfcfrms/report-suspect/report-suspect.component.scss b/src/app/cfcfrms/report-suspect/report-suspect.component.scss index 26c382c13..82b1e5b0e 100644 --- a/src/app/cfcfrms/report-suspect/report-suspect.component.scss +++ b/src/app/cfcfrms/report-suspect/report-suspect.component.scss @@ -6,105 +6,21 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +@use '../cfc-form' as *; + .report-page { - padding: 24px; + padding: 0; max-width: 1200px; margin: 0 auto; } -.page-header { - margin-bottom: 24px; - - h2 { - margin: 0; - font-size: 24px; - font-weight: 600; - } - - .subtitle { - margin: 4px 0 0; - color: #666; - font-size: 14px; - } -} - .report-layout { - display: flex; - gap: 24px; + display: block; } .report-card { flex: 1; - max-width: 700px; -} - -.full-width { width: 100%; } -.mr-05 { - margin-right: 0.5rem; -} - -.mt-16 { - margin-top: 16px; -} - -.submit-btn { - margin-top: 8px; - height: 48px; - font-size: 16px; -} - -.inline-spinner { - display: inline-block; - margin-right: 8px; -} - -.success-result { - text-align: center; - padding: 32px 16px; - - .success-icon { - color: #10b981; - margin-bottom: 16px; - } - - h3 { - color: #10b981; - margin-bottom: 24px; - } -} - -.result-details { - text-align: left; - max-width: 500px; - margin: 0 auto; - background: #f8f9fa; - border-radius: 8px; - padding: 16px; -} - -.result-row { - display: flex; - justify-content: space-between; - padding: 8px 0; - border-bottom: 1px solid #eee; - - &:last-child { - border-bottom: none; - } -} - -.result-label { - color: #666; - font-weight: 500; -} - -.result-value { - font-weight: 600; -} - -.mono { - font-family: 'Roboto Mono', monospace; -} +@include cfc-form-skin('red'); diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html index aab5f1fb6..e12cd5e8e 100644 --- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html +++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html @@ -16,29 +16,45 @@
-

Family Members

-

Add family members and dependents of the client.

+ @if (nomineeOnly) { +

Nominees

+

+ Nominees for this client. Family members are not applicable for this entity type. +

+ } @else { +

Family Members

+

Add family members and dependents of the client.

+ }
+ @if (nomineeOnly) { +
+ shield + Nominees are managed per account from the Nominees tab once accounts are opened. +
+ } + -
-
- - Family Members - @if (clientFamilyMembers.length > 0) { - {{ clientFamilyMembers.length }} + @if (!nomineeOnly) { +
+
+ + Family Members + @if (clientFamilyMembers.length > 0) { + {{ clientFamilyMembers.length }} + } +
+ @if (!readOnly) { + }
- @if (!readOnly) { - - } -
+ } - @if (clientFamilyMembers.length === 0) { + @if (!nomineeOnly && clientFamilyMembers.length === 0) {
people_outline No family members added yet. @@ -47,14 +63,14 @@ } - @if (isMarried && !hasSpouse) { + @if (!nomineeOnly && isMarried && !hasSpouse) {
favorite Marital status is Married. Consider adding spouse as a family member.
} - @if (clientFamilyMembers.length > 0) { + @if (!nomineeOnly && clientFamilyMembers.length > 0) {
Name diff --git a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts index 1f3181844..b322a56b1 100644 --- a/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts +++ b/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts @@ -52,6 +52,12 @@ export class ClientFamilyMembersStepComponent implements OnInit { @Input() maritalStatusOptions: any[] = []; /** Read-only mode — hides add/edit/delete buttons */ @Input() readOnly = false; + /** + * When true, hide the family-member section entirely. Used for clients that + * are eligible for nominees but not for family members (e.g. proprietorship + * entities — see {@link nomineeAllowed} / {@link familyAllowed}). + */ + @Input() nomineeOnly = false; /** Family Members */ clientFamilyMembers: any[] = []; @@ -131,6 +137,7 @@ export class ClientFamilyMembersStepComponent implements OnInit { } addFamilyMember() { + if (this.nomineeOnly || this.readOnly) return; const ref = this.dialog.open(ClientFamilyMemberDialogComponent, { data: { context: 'Add', diff --git a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html index 1880295fe..eefd2a892 100644 --- a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html +++ b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html @@ -1024,8 +1024,8 @@ } } - - @if (client?.legalFormId !== 2) { + + @if (showFamilyPreview) {
diff --git a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts index b4c491044..520a294d1 100644 --- a/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts +++ b/src/app/clients/client-stepper/client-preview-step/client-preview-step.component.ts @@ -24,6 +24,7 @@ import { DateFormatPipe } from '../../../pipes/date-format.pipe'; import { YesnoPipe } from '../../../pipes/yesno.pipe'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; import { LegalFormId } from 'app/clients/models/legal-form.enum'; +import { familyAllowed, nomineeAllowed } from 'app/clients/utils/client-rules'; /** * Client Preview Step Component @@ -69,6 +70,11 @@ export class ClientPreviewStepComponent { @Input() nominees: any[] = []; /** Family members from family step */ @Input() familyMembers: any[] = []; + /** + * Constitution display name for entity clients — drives the proprietorship-only + * nominee rule so the preview matches what's eligible elsewhere. + */ + @Input() constitutionLabel: string = ''; /** Marital Status ID from general step */ @Input() maritalStatusId: number | null = null; /** Marital Status Options */ @@ -99,6 +105,14 @@ export class ClientPreviewStepComponent { /** Form submission event */ @Output() submitEvent = new EventEmitter(); + get showFamilyPreview(): boolean { + return familyAllowed(this.client?.legalFormId, this.constitutionLabel); + } + + get showNomineePreview(): boolean { + return nomineeAllowed(this.client?.legalFormId, this.constitutionLabel); + } + /** Expose enum to template */ readonly LegalFormId = LegalFormId; diff --git a/src/app/clients/clients-routing.module.ts b/src/app/clients/clients-routing.module.ts index 8f1c0f3d3..b49c5b51c 100644 --- a/src/app/clients/clients-routing.module.ts +++ b/src/app/clients/clients-routing.module.ts @@ -60,6 +60,7 @@ import { KycTabComponent } from './clients-view/kyc-tab/kyc-tab.component'; import { CkycTabComponent } from './clients-view/ckyc-tab/ckyc-tab.component'; import { Form60TabComponent } from './clients-view/form60-tab/form60-tab.component'; import { EntityClassificationTabComponent } from './clients-view/entity-classification-tab/entity-classification-tab.component'; +import { familyAllowedGuard, nomineeAllowedGuard } from './utils/family-nominee.guard'; const routes: Routes = [ Route.withShell([ @@ -123,10 +124,12 @@ const routes: Routes = [ { path: 'nominees', component: NomineeTabComponent, + canActivate: [nomineeAllowedGuard], data: { title: 'Nominees', breadcrumb: 'Nominees', routeParamBreadcrumb: false } }, { path: 'family-members', + canActivate: [familyAllowedGuard], data: { title: 'Family Members', breadcrumb: 'Family Members', routeParamBreadcrumb: false }, children: [ { diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html index 4a8e09457..775c195c8 100644 --- a/src/app/clients/clients-view/clients-view.component.html +++ b/src/app/clients/clients-view/clients-view.component.html @@ -481,7 +481,7 @@ > {{ 'labels.inputs.Address' | translate }} - @if (clientViewData?.legalForm?.id !== 2) { + @if (showFamilyTab) { Family Members } - - Nominee - + @if (showNomineeTab) { + + Nominee + + } { this.clientViewData = data.clientViewData; diff --git a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html index cfbc8c481..9e80a2a3c 100644 --- a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html +++ b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html @@ -14,9 +14,11 @@

Family Members

{{ familyMembers.length }}
- + @if (canAdd) { + + }
@if (familyMembers.length === 0) { @@ -44,21 +46,28 @@ -
-
- - + @if (canAdd) { +
+
+ + +
-
+ }
@if (member.firstName) { diff --git a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.ts b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.ts index 3741280cc..b377c45d7 100644 --- a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.ts +++ b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.ts @@ -21,6 +21,7 @@ import { ClientsService } from '../../clients.service'; import { TranslateService } from '@ngx-translate/core'; import { SettingsService } from 'app/settings/settings.service'; import { Dates } from 'app/core/utils/dates'; +import { familyAllowed } from '../../utils/client-rules'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { MatIcon } from '@angular/material/icon'; @@ -71,6 +72,12 @@ export class FamilyMembersTabComponent { clientId: string; /** Family member template options */ familyMemberOptions: any; + /** + * Defensive flag — the route guard already blocks unauthorised clients, but + * we re-check here so that if the component is somehow reachable via direct + * link or stale state, the Add / Edit buttons stay hidden. + */ + canAdd = false; constructor() { this.route.data.subscribe((data: { clientFamilyMembers: any }) => { @@ -80,6 +87,17 @@ export class FamilyMembersTabComponent { // so the clientId param lives two levels up, not one. this.clientId = this.route.parent?.parent?.snapshot.params['clientId'] || this.route.parent?.snapshot.params['clientId']; + if (this.clientId) { + this.clientsService.getClientData(this.clientId).subscribe({ + next: (client: any) => { + const constitutionLabel = client?.clientNonPersonDetails?.constitution?.name || ''; + this.canAdd = familyAllowed(client?.legalForm?.id, constitutionLabel); + }, + error: () => { + this.canAdd = false; + } + }); + } } /** Family members (non-nominee entries) */ @@ -116,6 +134,7 @@ export class FamilyMembersTabComponent { } addFamilyMember() { + if (!this.canAdd) return; this.ensureTemplateLoaded().then(() => { const dialogRef = this.dialog.open(ClientFamilyMemberDialogComponent, { width: '640px', @@ -124,7 +143,10 @@ export class FamilyMembersTabComponent { data: { context: 'Add', options: this.familyMemberOptions, - existingMembers: this.familyMembers + existingMembers: this.familyMembers, + // Pass the host client's id so the dialog's self-add guard can + // filter the search results and refuse self-link attempts. + hostClientId: this.clientId } }); dialogRef.afterClosed().subscribe((response: any) => { @@ -139,6 +161,7 @@ export class FamilyMembersTabComponent { } editFamilyMember(member: any, _index: number) { + if (!this.canAdd) return; this.ensureTemplateLoaded().then(() => { const dialogRef = this.dialog.open(ClientFamilyMemberDialogComponent, { width: '640px', @@ -148,7 +171,8 @@ export class FamilyMembersTabComponent { context: 'Edit', options: this.familyMemberOptions, member, - existingMembers: this.familyMembers + existingMembers: this.familyMembers, + hostClientId: this.clientId } }); dialogRef.afterClosed().subscribe((response: any) => { @@ -226,6 +250,7 @@ export class FamilyMembersTabComponent { // ═══ Common ═══ deleteMember(member: any, label: string) { + if (!this.canAdd) return; const realIndex = this.clientFamilyMembers.indexOf(member); const deleteFamilyMemberDialogRef = this.dialog.open(DeleteDialogComponent, { data: { deleteContext: `${label} ${member.firstName || ''}` } diff --git a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.html b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.html index 6cae13a84..820d4877a 100644 --- a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.html +++ b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.html @@ -560,9 +560,14 @@ matInput formControlName="aadhaarNumber" maxlength="12" - type="password" + inputmode="numeric" + autocomplete="off" + placeholder="Enter 12-digit Aadhaar" [readonly]="aadhaarOtpSent" /> + @if (kycData?.aadhaarNumberMasked) { + On file: {{ kycData.aadhaarNumberMasked }} + } @if (kycForm.get('aadhaarNumber')?.hasError('pattern') && kycForm.get('aadhaarNumber')?.touched) { {{ 'labels.inputs.Enter 12-digit Aadhaar' | translate }} } diff --git a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.ts b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.ts index e78e8cd26..2c8e5cef2 100644 --- a/src/app/clients/clients-view/kyc-tab/kyc-tab.component.ts +++ b/src/app/clients/clients-view/kyc-tab/kyc-tab.component.ts @@ -147,12 +147,15 @@ export class KycTabComponent implements OnInit, OnDestroy { this.loading = false; this.kycData = data; if (data) { - this.kycId = data.id?.toString() || null; + const rawKycId = data.id ?? data.kycId ?? data.resourceId; + this.kycId = rawKycId != null ? rawKycId.toString() : null; this.kycForm.patchValue({ kycType: data.kycType || 1, riskCategory: data.riskCategory || 1, panNumber: data.panNumber || '', - aadhaarNumber: data.aadhaarNumberMasked || '', + // Aadhaar is stored masked on the server; user must re-enter + // the full 12-digit number to re-verify, so don't pre-fill. + aadhaarNumber: '', gstinNumber: data.gstinNumber || '', remarks: data.remarks || '' }); @@ -181,6 +184,15 @@ export class KycTabComponent implements OnInit, OnDestroy { toggleEditMode(): void { this.isEditMode = !this.isEditMode; this.resetOtpState(); + if (this.isEditMode) { + // Clear Aadhaar so the user types a fresh 12-digit number for re-verify; + // server only returns the masked form which would fail validation. + this.kycForm.get('aadhaarNumber')?.reset(''); + this.verificationStatus.aadhaar = null; + this.verificationStatus.pan = null; + this.verificationError.aadhaar = null; + this.verificationError.pan = null; + } } saveKyc(): void { diff --git a/src/app/clients/clients-view/nominee-tab/nominee-tab.component.html b/src/app/clients/clients-view/nominee-tab/nominee-tab.component.html index c90d6138d..56e8b75cc 100644 --- a/src/app/clients/clients-view/nominee-tab/nominee-tab.component.html +++ b/src/app/clients/clients-view/nominee-tab/nominee-tab.component.html @@ -66,7 +66,7 @@ } - @if (selectedAccountId && !showAddForm) { + @if (canAdd && selectedAccountId && !showAddForm) { - - + @if (canAdd) { + + + }
@if (nominee.nomineeIsMinor && (nominee.guardianDisplayName || nominee.guardianName)) { diff --git a/src/app/clients/clients-view/nominee-tab/nominee-tab.component.ts b/src/app/clients/clients-view/nominee-tab/nominee-tab.component.ts index 7275b315d..7402d36de 100644 --- a/src/app/clients/clients-view/nominee-tab/nominee-tab.component.ts +++ b/src/app/clients/clients-view/nominee-tab/nominee-tab.component.ts @@ -11,6 +11,7 @@ import { MatDialog } from '@angular/material/dialog'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { ClientsService } from '../../clients.service'; import { SettingsService } from 'app/settings/settings.service'; +import { nomineeAllowed } from '../../utils/client-rules'; import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component'; import { ImageZoomDialogComponent } from '../../client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; @@ -55,6 +56,12 @@ export class NomineeTabComponent implements OnInit { clientId: string; loading = true; accountGroups: AccountGroup[] = []; + /** + * Defensive flag — route guard already blocks unauthorised clients, but + * we re-check here so Add / Edit / Delete stay hidden if the component is + * reached via direct link or stale state. + */ + canAdd = false; selectedType: string = ''; selectedAccountId: number | null = null; @@ -132,6 +139,23 @@ export class NomineeTabComponent implements OnInit { this.clientId = this.route.parent.snapshot.params['clientId']; this.loadAccounts(); this.loadTemplate(); + this.loadClientEligibility(); + } + + private loadClientEligibility(): void { + if (!this.clientId) { + this.canAdd = false; + return; + } + this.clientsService.getClientData(this.clientId).subscribe({ + next: (client: any) => { + const constitutionLabel = client?.clientNonPersonDetails?.constitution?.name || ''; + this.canAdd = nomineeAllowed(client?.legalForm?.id, constitutionLabel); + }, + error: () => { + this.canAdd = false; + } + }); } private loadTemplate(): void { @@ -462,6 +486,7 @@ export class NomineeTabComponent implements OnInit { // ═══ Save Nominee ═══ saveNominee(): void { + if (!this.canAdd) return; if (!this.selectedClient || !this.nomineeRelationshipId || !this.nomineeShare) return; if (this.totalShare + this.nomineeShare > 100) return; @@ -531,6 +556,7 @@ export class NomineeTabComponent implements OnInit { } editNominee(nominee: any, index: number): void { + if (!this.canAdd) return; this.editingIndex = index; this.editRelId = nominee.relationshipId || null; this.editShare = nominee.percentageShare; @@ -566,6 +592,7 @@ export class NomineeTabComponent implements OnInit { } deleteNominee(nominee: any, index: number): void { + if (!this.canAdd) return; const ref = this.dialog.open(DeleteDialogComponent, { data: { deleteContext: `nominee ${nominee.nomineeDisplayName || nominee.firstName || ''}` } }); diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html index fb0dec13c..0f7579d2e 100644 --- a/src/app/clients/create-client/create-client.component.html +++ b/src/app/clients/create-client/create-client.component.html @@ -150,12 +150,12 @@
- - @if (legalFormType !== 2) { + + @if (showFamilyTab) { - FAMILY + {{ familyTabNomineeOnly ? 'NOMINEES' : 'FAMILY' }} @let familyTabIdx = legalFormType === 2 ? 4 : 3;
@@ -183,6 +183,7 @@ [maritalStatusId]="clientGeneralStep?.createClientForm?.get('maritalStatusId')?.value" [maritalStatusOptions]="clientGeneralStep?.maritalStatusOptions || []" [readOnly]="isTabReadOnly(familyTabIdx)" + [nomineeOnly]="familyTabNomineeOnly" >
@@ -205,6 +206,7 @@ [guardianRelation]="clientGeneralStep?.createClientForm?.get('guardianDetails.guardianRelation')?.value || ''" [entityClassificationData]="clientEntityKycStep?.classificationData" [familyMembers]="clientFamilyMembersStep?.clientFamilyMembers || []" + [constitutionLabel]="constitutionLabel" [maritalStatusId]="clientGeneralStep?.createClientForm?.get('maritalStatusId')?.value" [maritalStatusOptions]="clientGeneralStep?.maritalStatusOptions || []" [educationLevelOptions]="clientGeneralStep?.educationLevelOptions || []" diff --git a/src/app/clients/create-client/create-client.component.ts b/src/app/clients/create-client/create-client.component.ts index cce52988a..222f1f385 100644 --- a/src/app/clients/create-client/create-client.component.ts +++ b/src/app/clients/create-client/create-client.component.ts @@ -14,6 +14,7 @@ import { map } from 'rxjs/operators'; /** Custom Services */ import { ClientsService } from '../clients.service'; +import { familyAllowed, nomineeAllowed, isProprietorship } from '../utils/client-rules'; /** Custom Components */ import { ClientGeneralStepComponent } from '../client-stepper/client-general-step/client-general-step.component'; @@ -130,9 +131,37 @@ export class CreateClientComponent { return this.clientGeneralStep?.createClientForm; } - /** Total tab count: Individual has Family tab, Non-Individual has Scheme & Sector tab — both 5 */ + /** + * Constitution display name for the selected entity constitution. Drives the + * proprietorship-only nominee rule below. Empty / null for individual clients. + */ + get constitutionLabel(): string { + return this.clientGeneralStep?.selectedConstitution?.name || ''; + } + + /** Whether the Family/Nominee tab should appear at all. */ + get showFamilyTab(): boolean { + return nomineeAllowed(this.legalFormType, this.constitutionLabel); + } + + /** + * Whether the Family/Nominee tab should render in nominee-only mode (family + * member rows hidden). True for entity proprietorship, false for individuals. + */ + get familyTabNomineeOnly(): boolean { + return !familyAllowed(this.legalFormType, this.constitutionLabel) && this.showFamilyTab; + } + + /** Total tab count varies by legal form + constitution. + * Individual: General + KYC + Address + Family + Preview = 5 + * Entity (proprietorship): General + KYC + S&S + Address + Nominees + Preview = 6 + * Entity (non-proprietor): General + KYC + S&S + Address + Preview = 5 + */ get totalTabs(): number { - return 5; + let count = 4; // General + KYC + Address + Preview + if (this.legalFormType === 2) count++; // S&S only for entities + if (this.showFamilyTab) count++; + return count; } /** @@ -358,9 +387,11 @@ export class CreateClientComponent { return; } - // Family tab (index 3 for Individual, 4 for Non-Individual) + // Family tab (index 3 for Individual, 4 for Non-Individual proprietorship). + // Skip entirely when the tab is hidden (entity non-proprietor) so we don't + // confuse Preview at the same index slot with the Family step. const familyTabIndex = this.legalFormType === 2 ? 4 : 3; - if (tabIndex === familyTabIndex) { + if (this.showFamilyTab && tabIndex === familyTabIndex) { if (this.clientFamilyMembersStep?.hasFamilyMembers) { this.saveClientFamilyMembers(clientId); } diff --git a/src/app/clients/edit-client/edit-client.component.html b/src/app/clients/edit-client/edit-client.component.html index 7e91447b7..08e14add8 100644 --- a/src/app/clients/edit-client/edit-client.component.html +++ b/src/app/clients/edit-client/edit-client.component.html @@ -138,33 +138,40 @@
- - - - - FAMILY - - @let familyTabIdx = legalFormType === 2 ? 4 : 3; -
-
- @if (isTabReadOnly(familyTabIdx)) { - - } @else { - - } + + @if (showFamilyTab) { + + + + {{ familyTabNomineeOnly ? 'NOMINEES' : 'FAMILY' }} + + @let familyTabIdx = legalFormType === 2 ? 4 : 3; +
+
+ @if (isTabReadOnly(familyTabIdx)) { + + } @else { + + } +
+
- -
- + + } @@ -182,6 +189,7 @@ [guardianRelation]="clientGeneralStep?.createClientForm?.get('guardianDetails.guardianRelation')?.value || ''" [entityClassificationData]="clientEntityKycStep?.classificationData" [familyMembers]="clientFamilyMembersStep?.clientFamilyMembers || []" + [constitutionLabel]="constitutionLabel" [maritalStatusId]="clientGeneralStep?.createClientForm?.get('maritalStatusId')?.value" [maritalStatusOptions]="clientGeneralStep?.maritalStatusOptions || []" [educationLevelOptions]="clientGeneralStep?.educationLevelOptions || []" diff --git a/src/app/clients/edit-client/edit-client.component.ts b/src/app/clients/edit-client/edit-client.component.ts index 2adaed2b1..432d7c35d 100644 --- a/src/app/clients/edit-client/edit-client.component.ts +++ b/src/app/clients/edit-client/edit-client.component.ts @@ -17,6 +17,7 @@ import { map } from 'rxjs/operators'; import { ClientsService } from '../clients.service'; import { SettingsService } from 'app/settings/settings.service'; import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component'; +import { familyAllowed, nomineeAllowed } from '../utils/client-rules'; /** Custom Components */ import { ClientGeneralStepComponent } from '../client-stepper/client-general-step/client-general-step.component'; @@ -121,9 +122,40 @@ export class EditClientComponent { return this.clientGeneralStep?.createClientForm; } - /** Total tab count (+1 for Nominees, +1 for Non-Individual Entity KYC) */ + /** + * Constitution display name pulled from the live general step (preferred — + * stays in sync if the user changes constitution mid-edit) with a fallback + * to the resolver-provided snapshot. Drives the proprietorship-only nominee + * rule below. + */ + get constitutionLabel(): string { + return ( + this.clientGeneralStep?.selectedConstitution?.name || + this.clientDataAndTemplate?.clientNonPersonDetails?.constitution?.name || + '' + ); + } + + /** Whether the Family/Nominee tab should appear at all. */ + get showFamilyTab(): boolean { + return nomineeAllowed(this.legalFormType, this.constitutionLabel); + } + + /** True when the tab should render in nominee-only mode (family rows hidden). */ + get familyTabNomineeOnly(): boolean { + return !familyAllowed(this.legalFormType, this.constitutionLabel) && this.showFamilyTab; + } + + /** Total tab count varies by legal form + constitution. + * Individual: General + KYC + Address + Family + Preview = 5 + * Entity (proprietorship): General + KYC + S&S + Address + Nominees + Preview = 6 + * Entity (non-proprietor): General + KYC + S&S + Address + Preview = 5 + */ get totalTabs(): number { - return this.legalFormType === 2 ? 6 : 5; + let count = 4; // General + KYC + Address + Preview + if (this.legalFormType === 2) count++; // S&S only for entities + if (this.showFamilyTab) count++; + return count; } /** Get constitution type from general step for entity KYC */ @@ -411,9 +443,10 @@ export class EditClientComponent { return; } - // Family tab + // Family tab — only present for individuals and proprietorship entities. + // Skip when hidden so Preview at the same index isn't mistaken for Family. const familyTabIdx = this.legalFormType === 2 ? 4 : 3; - if (tabIndex === familyTabIdx) { + if (this.showFamilyTab && tabIndex === familyTabIdx) { this.savingClient = true; if (this.clientFamilyMembersStep?.hasFamilyMembers) { this.saveClientFamilyMembers(this.clientId); diff --git a/src/app/clients/utils/client-rules.ts b/src/app/clients/utils/client-rules.ts new file mode 100644 index 000000000..d18ae6d11 --- /dev/null +++ b/src/app/clients/utils/client-rules.ts @@ -0,0 +1,37 @@ +/** + * 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/. + */ + +/** + * Predicates that decide which optional family/nominee UI a client is + * eligible for. Mirrors the backend authorization checks so the UI stays + * in lockstep with what the server will accept. + * + * Individual (legalForm = 1) → family + nominees + * Non-individual + Proprietorship → nominees only + * Non-individual + anything else → neither + */ + +const normalize = (s: string | null | undefined): string => (s || '').toUpperCase().replace(/[\s_-]+/g, ''); + +export function isProprietorship(constitutionLabel: string | null | undefined): boolean { + const n = normalize(constitutionLabel); + return n === 'PROPRIETORSHIP' || n === 'PROPRIETOR' || n === 'SOLEPROPRIETORSHIP' || n === 'SOLEPROPRIETOR'; +} + +export function isIndividualClient(legalFormId: number | null | undefined): boolean { + return legalFormId === 1; // 1 = PERSON, 2 = ENTITY +} + +export function familyAllowed(legalFormId: number | null | undefined, _constitutionLabel?: string | null): boolean { + return isIndividualClient(legalFormId); +} + +export function nomineeAllowed(legalFormId: number | null | undefined, constitutionLabel?: string | null): boolean { + if (isIndividualClient(legalFormId)) return true; + return isProprietorship(constitutionLabel); +} diff --git a/src/app/clients/utils/family-nominee.guard.ts b/src/app/clients/utils/family-nominee.guard.ts new file mode 100644 index 000000000..9496ec013 --- /dev/null +++ b/src/app/clients/utils/family-nominee.guard.ts @@ -0,0 +1,66 @@ +/** + * 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/. + */ + +import { inject } from '@angular/core'; +import { ActivatedRouteSnapshot, CanActivateFn, Router } from '@angular/router'; +import { Observable, of } from 'rxjs'; +import { catchError, map } from 'rxjs/operators'; + +import { ClientsService } from '../clients.service'; +import { familyAllowed, nomineeAllowed } from './client-rules'; + +/** + * Walk up the route snapshot tree until we find a `clientId` path param. The + * family-members / nominees routes are nested two levels under the client + * shell, so simple `route.params['clientId']` returns undefined. + */ +function findClientId(route: ActivatedRouteSnapshot): string | null { + let cur: ActivatedRouteSnapshot | null = route; + while (cur) { + const id = cur.params?.['clientId']; + if (id) return id; + cur = cur.parent; + } + return null; +} + +/** + * Build a guard that redirects to the client's General tab when the client + * isn't eligible for the section. Resolves the client lazily so we don't + * couple the guard to any specific parent resolver. + */ +function makeEligibilityGuard( + predicate: (legalFormId: number | null | undefined, constitutionLabel?: string | null) => boolean +): CanActivateFn { + return (route) => { + const router = inject(Router); + const clientsService = inject(ClientsService); + const clientId = findClientId(route); + // No clientId in the URL — let the framework's own missing-param handling kick in. + if (!clientId) return true; + + return clientsService.getClientData(clientId).pipe( + map((client: any) => { + const legalFormId = client?.legalForm?.id; + const constitutionLabel = client?.clientNonPersonDetails?.constitution?.name || ''; + if (predicate(legalFormId, constitutionLabel)) return true; + return router.createUrlTree([ + '/clients', + clientId, + 'general' + ]); + }), + // If the client lookup fails, fail open and let downstream handle it + // rather than redirecting users into an infinite loop on a stale URL. + catchError(() => of(true)) + ) as Observable>; + }; +} + +export const familyAllowedGuard: CanActivateFn = makeEligibilityGuard(familyAllowed); +export const nomineeAllowedGuard: CanActivateFn = makeEligibilityGuard(nomineeAllowed); diff --git a/src/app/core/shell/shell.component.html b/src/app/core/shell/shell.component.html index 2f313eca8..2e82fb8a8 100644 --- a/src/app/core/shell/shell.component.html +++ b/src/app/core/shell/shell.component.html @@ -89,20 +89,36 @@ │ - + + +
Institution - + Tasks @@ -116,21 +132,11 @@ Admin - + Sub Ledger - + General Ledger @@ -150,8 +156,6 @@
- -
HRM @@ -177,12 +181,7 @@ Insurance - + RBI @@ -204,6 +203,123 @@
+ ════════ END OLD ORDER ════════ + --> + +
+ +
+ + Client Master + + + + CFCFRMS + + + Approvals + + + Cashier + + + + Clearing + + + + Deposits + + + + Advances + + + + Share + + + + NPA + + + + General Ledger + + + + Sub Ledger + + +
+ + +
+ + Accounting + + + CKYC + + + + Insurance + + + + Digital + + + + HRM + + + + Admin + + + + RBI + + + + Reports + + + + Others + + + + Reconciliation + + + + Documents Hub + + +
+
@@ -252,35 +368,65 @@ - - - - - - - - - - - + + +
+ +
+
Setup
+ + + +
+ + +
+
Catalog
+ + + +
+ + +
+
Audit & Compliance
+ + + + +
+
@@ -873,6 +1019,9 @@ + +
diff --git a/src/app/core/shell/shell.component.scss b/src/app/core/shell/shell.component.scss index 0452ec107..b308b1cf0 100644 --- a/src/app/core/shell/shell.component.scss +++ b/src/app/core/shell/shell.component.scss @@ -130,25 +130,32 @@ $gray-700: #334155; border-bottom: 2.5px solid $brand; box-shadow: 0 1px 4px rgb(0 0 0 / 7%); position: sticky; - top: 0; + + /* Sit directly under the sticky toolbar (32px tall) so both stay visible. */ + top: 32px; z-index: 900; overflow: visible; } .nav-row { height: 44px; - display: grid; - grid-template-columns: repeat(11, minmax(0, 1fr)); + display: flex; align-items: stretch; overflow: visible; position: relative; - /* Grid container background shows through the 1 px gap as crisp 1 px borders - on every side of every cell — no doubled-up 2 px lines between adjacent - items, perfect 1 px outer frame too. */ - gap: 1px; - background: $gray-200; + /* Outer frame; vertical dividers between cells are drawn as `border-right` + on each `.ni` below. Switched away from the equal-column grid so each + cell can size to its own label — long names (General Ledger, Documents + Hub) no longer overflow and short ones (Approvals, HRM) no longer waste + space. */ border: 1px solid $gray-200; + background: #fff; +} + +.r2.nav-row { + /* Row 2 shares the row-1 bottom edge — collapse the duplicate border. */ + border-top: none; } .r1 .ni { @@ -168,7 +175,17 @@ $gray-700: #334155; justify-content: center; gap: 7px; height: 100%; - padding: 0 10px; + + /* Each cell sizes to its own label (min-width: max-content) and grows + to share any leftover row width. Short labels stay compact, long ones + get the room they need — no overlap, no wasted gap. */ + flex: 1 0 auto; + min-width: max-content; + padding: 0 14px; + + /* Vertical divider between adjacent cells; outer frame is the row's + own border, and the last cell drops its right border below. */ + border-right: 1px solid $gray-200; cursor: pointer; white-space: nowrap; font-family: @@ -193,8 +210,8 @@ $gray-700: #334155; &::before { content: ''; position: absolute; - left: 8px; - right: 8px; + left: 4px; + right: 4px; top: 0; height: 3px; background: transparent; @@ -224,6 +241,12 @@ $gray-700: #334155; outline: 2px solid $brand; outline-offset: -2px; } + + /* Last cell in a row sits flush against the row's own right edge, so + drop its divider to avoid a double 2 px line. */ + &:last-child { + border-right: none; + } } .ni-ico { diff --git a/src/app/core/shell/sidenav/sidenav.component.html b/src/app/core/shell/sidenav/sidenav.component.html index 1182df9ba..f740caa30 100644 --- a/src/app/core/shell/sidenav/sidenav.component.html +++ b/src/app/core/shell/sidenav/sidenav.component.html @@ -159,83 +159,25 @@ {{ 'labels.menus.Analytics' | translate }} - +
{{ 'labels.menus.CFCFRMS' | translate }}
- - - - {{ 'labels.menus.CFCFRMS Dashboard' | translate }} - - - - - - {{ 'labels.menus.Complaints' | translate }} - - - - - - {{ 'labels.menus.Escalate' | translate }} - - - {{ 'labels.menus.Report Suspect' | translate }} - - - - - - {{ 'labels.menus.Report Mule' | translate }} - - - - - - {{ 'labels.menus.Report Fraud Txn' | translate }} + {{ 'labels.menus.CFCFRMS' | translate }} diff --git a/src/app/core/shell/toolbar/toolbar.component.scss b/src/app/core/shell/toolbar/toolbar.component.scss index cce99bd4f..f34e9ad40 100644 --- a/src/app/core/shell/toolbar/toolbar.component.scss +++ b/src/app/core/shell/toolbar/toolbar.component.scss @@ -11,6 +11,16 @@ $accent: #0ea5e9; $accent-2: #10b981; $top-h: 32px; +// Pin the toolbar to the top of the viewport so it stays visible while +// scrolling, just like the .main-header menu below it. z-index sits one tier +// above the menu so the toolbar's dropdowns / chips never get clipped. +:host { + display: block; + position: sticky; + top: 0; + z-index: 950; +} + // ===== Top Identity Bar ===== .top-bar { height: $top-h; diff --git a/src/app/savings/create-savings-account/create-savings-account.component.html b/src/app/savings/create-savings-account/create-savings-account.component.html index b9a7272d1..56d77ee1c 100644 --- a/src/app/savings/create-savings-account/create-savings-account.component.html +++ b/src/app/savings/create-savings-account/create-savings-account.component.html @@ -6,100 +6,129 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
- + +
+ +
+

Create Savings Account

+
+ Pick a product, confirm currency, set digital channels and review before submit. +
+
+
+ + + - - - - - - - - - - - - - - - - - - - - - - - Product Classification - - - - - - @if (savingsAccountProductTemplate) { - - - Currency - - - -
- - -
- - - - - Digital - - - - -
- - -
- - - - - {{ 'labels.inputs.PREVIEW' | translate }} - + + + + Product + +
+ - - - } - + + +
+ + +
+
+ + + + + + + Currency + +
+ @if (savingsAccountProductTemplate) { + + } + +
+ + + +
+
+ + + + + + + Digital + +
+ @if (savingsAccountProductTemplate) { + + + } + +
+ + + +
+
+ + + + + + + {{ 'labels.inputs.PREVIEW' | translate }} + +
+ @if (savingsAccountProductTemplate) { + + + } + +
+ +
+
+ +
diff --git a/src/app/savings/create-savings-account/create-savings-account.component.scss b/src/app/savings/create-savings-account/create-savings-account.component.scss index 94c2d9d26..b385e0bed 100644 --- a/src/app/savings/create-savings-account/create-savings-account.component.scss +++ b/src/app/savings/create-savings-account/create-savings-account.component.scss @@ -6,75 +6,153 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -// Container styling with proper spacing and margins -.container { - margin: 1.5rem auto; - max-width: 75rem; - width: 100%; - padding: 0 1.5rem; - box-sizing: border-box; +$navy: #0d1b2a; +$blue: #1e88e5; +$blue-d: #1e40af; +$indigo: #4f46e5; +$border: #e2e8f0; + +.csa-container { + max-width: 1180px; + margin: 0 auto; + padding: 20px 24px; } -// Material Stepper styling with proper spacing -:host ::ng-deep mat-stepper { - background: transparent; +/* ─── Hero header (matches Nexora pages) ────────────────────────────── */ +.csa-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; - .mat-step-header { - padding: 1rem 1.5rem; - margin-bottom: 0.5rem; + &__icon { + width: 44px; + height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 12px; + background: linear-gradient(135deg, $blue 0%, $indigo 100%); + color: #fff; + font-size: 18px; + box-shadow: 0 2px 8px rgb(29 78 216 / 25%); + flex-shrink: 0; } - .mat-step-content { - padding: 1.5rem; - margin: 1rem 0; - overflow: visible !important; + &__title { + margin: 0; + font-size: 20px; + font-weight: 800; + color: $navy; + line-height: 1.1; + letter-spacing: 0.02em; + } + + &__sub { + margin-top: 2px; + font-size: 12.5px; + color: #64748b; } } -// Form field spacing within steps -:host ::ng-deep mat-step-content { - overflow: visible !important; +/* ─── Wizard tab strip ──────────────────────────────────────────────── */ +.csa-tabs { + background: #fff; + border: 1px solid $border; + border-radius: 14px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; - mat-form-field { - margin-bottom: 1rem; - width: 100%; - } - - .layout-row-wrap { - gap: 1rem; - margin-bottom: 1rem; - } -} - -// Responsive design -@media (width <= 768px) { - .container { - padding: 0 1rem; - margin: 1rem auto; - } - - :host ::ng-deep mat-stepper { - .mat-step-content { - padding: 1rem; - margin: 0.75rem 0; + ::ng-deep { + .mat-mdc-tab-header { + background: #f8fafc; + border-bottom: 1px solid $border; } - .mat-step-header { - padding: 0.75rem 1rem; + .mat-mdc-tab { + min-width: 140px; + height: 50px; + padding: 0 22px; + font-size: 13px !important; + font-weight: 600 !important; + letter-spacing: 0.01em; + color: #475569 !important; + opacity: 1 !important; + } + + .mat-mdc-tab:hover:not(.mdc-tab--active, .mat-mdc-tab-disabled) { + background: rgb(30 64 175 / 5%); + color: $navy !important; + } + + .mat-mdc-tab.mdc-tab--active { + .mdc-tab__text-label { + color: $blue-d !important; + font-weight: 700 !important; + } + } + + /* Active-tab underline indicator — slightly bolder than Material's default. */ + .mdc-tab-indicator__content--underline { + border-color: $blue-d !important; + border-top-width: 3px !important; + } + + .mat-mdc-tab.mat-mdc-tab-disabled { + opacity: 0.45 !important; + cursor: not-allowed; + } + + .mat-mdc-tab-body-wrapper { + min-height: 320px; + } + + .mat-mdc-tab-body, + .mat-mdc-tab-body-content { + overflow: visible !important; } } } -@media (width <= 480px) { - .container { - padding: 0 0.75rem; - margin: 0.75rem auto; - } +.csa-tab__icon { + margin-right: 8px; + font-size: 13px; +} - :host ::ng-deep mat-stepper { - .mat-step-content { - padding: 0.75rem; - margin: 0.5rem 0; - } +/* ─── Tab body + action bar ─────────────────────────────────────────── */ +.csa-tab-body { + padding: 24px; + + @media (width <= 768px) { + padding: 16px; } } + +.csa-actions { + display: flex; + align-items: center; + gap: 12px; + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid #f1f5f9; + + &__spacer { + flex: 1; + } + + button { + height: 40px !important; + border-radius: 10px !important; + font-weight: 600 !important; + padding: 0 18px !important; + } +} + +/* Utility helpers preserved from the prior stepper template. */ +.m-l-10 { + margin-left: 8px; +} + +.m-r-10 { + margin-right: 8px; +} diff --git a/src/app/savings/create-savings-account/create-savings-account.component.ts b/src/app/savings/create-savings-account/create-savings-account.component.ts index dcb32c39d..e7657c1ca 100644 --- a/src/app/savings/create-savings-account/create-savings-account.component.ts +++ b/src/app/savings/create-savings-account/create-savings-account.component.ts @@ -15,27 +15,24 @@ import { FormGroup } from '@angular/forms'; import { SavingsAccountDetailsStepComponent } from '../savings-account-stepper/savings-account-details-step/savings-account-details-step.component'; import { SavingsAccountCurrencyStepComponent } from '../savings-account-stepper/savings-account-currency-step/savings-account-currency-step.component'; import { SavingsAccountDigitalStepComponent } from '../savings-account-stepper/savings-account-digital-step/savings-account-digital-step.component'; -import { SavingsAccountSettingsStepComponent } from '../savings-account-stepper/savings-account-settings-step/savings-account-settings-step.component'; /** Custom Services */ import { SavingsService } from '../savings.service'; import { SettingsService } from 'app/settings/settings.service'; import { Dates } from 'app/core/utils/dates'; import { AlertService } from 'app/core/alert/alert.service'; -import { - MatStepper, - MatStepperIcon, - MatStep, - MatStepLabel, - MatStepperNext, - MatStepperPrevious -} from '@angular/material/stepper'; +import { MatTabsModule } from '@angular/material/tabs'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { SavingsAccountPreviewStepComponent } from '../savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; /** * Create Savings Account Component + * + * Wizard-tab UI: Product → Currency → Digital → Preview. Tabs 2-4 are + * disabled until a product is picked on Tab 1 (matches the prior stepper + * gate that only rendered later steps once `savingsAccountProductTemplate` + * was set). */ @Component({ selector: 'mifosx-create-savings-account', @@ -43,13 +40,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; styleUrls: ['./create-savings-account.component.scss'], imports: [ ...STANDALONE_SHARED_IMPORTS, - MatStepper, - MatStepperIcon, - MatStepperNext, - MatStepperPrevious, + MatTabsModule, FaIconComponent, - MatStep, - MatStepLabel, SavingsAccountDetailsStepComponent, SavingsAccountCurrencyStepComponent, SavingsAccountDigitalStepComponent, @@ -68,6 +60,10 @@ export class CreateSavingsAccountComponent { savingsAccountTemplate: any; /** Savings Account Product Template */ savingsAccountProductTemplate: any; + /** Currently visible wizard tab (0-indexed). */ + selectedTabIndex = 0; + /** Total wizard tabs — Product, Currency, Digital, Preview. */ + private readonly totalTabs = 4; @ViewChild(SavingsAccountDetailsStepComponent, { static: true }) savingsAccountDetailsStep: SavingsAccountDetailsStepComponent; @@ -88,6 +84,18 @@ export class CreateSavingsAccountComponent { this.savingsAccountProductTemplate = $event; } + next(): void { + if (this.selectedTabIndex < this.totalTabs - 1) { + this.selectedTabIndex += 1; + } + } + + prev(): void { + if (this.selectedTabIndex > 0) { + this.selectedTabIndex -= 1; + } + } + get savingsAccountDetailsForm() { return this.savingsAccountDetailsStep.savingsAccountDetailsForm; } diff --git a/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html b/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html index f27a3a11e..c38a3f304 100644 --- a/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html +++ b/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html @@ -6,53 +6,73 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
- -
- -
- - {{ 'labels.inputs.Activated On Date' | translate }} - - - - @if (activateSavingsAccountForm.controls.activatedOnDate.hasError('required')) { - - {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - +
+ +
+
+ +
+
+

Activate Savings Account

+

Set the activation date and opening balance to bring this account live.

+
+
- - Opening Balance - - ₹  - @if (minRequiredOpeningBalance) { - Minimum required: ₹{{ minRequiredOpeningBalance }} - } - @if (activateSavingsAccountForm.controls.openingBalance.hasError('min')) { - Opening balance must be at least ₹{{ minRequiredOpeningBalance ?? 0 }} - } - -
- + + +
+ +

Activation Details

+
- - - - - - +
+ + {{ 'labels.inputs.Activated On Date' | translate }} + + + + @if (activateSavingsAccountForm.controls.activatedOnDate.hasError('required')) { + + {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + + + + Opening Balance + + ₹  + @if (minRequiredOpeningBalance) { + Minimum required: ₹{{ minRequiredOpeningBalance }} + } + @if (activateSavingsAccountForm.controls.openingBalance.hasError('min')) { + Opening balance must be at least ₹{{ minRequiredOpeningBalance ?? 0 }} + } + +
+ +
+ + +
+
diff --git a/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.scss b/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.scss index 7c3f1555b..11ea1164b 100644 --- a/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.scss +++ b/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.scss @@ -6,6 +6,190 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.container { - max-width: 37rem; +$navy: #0d1b2a; +$blue: #1e88e5; +$blue-d: #1e40af; +$green: #10b981; +$green-d: #047857; +$border: #e2e8f0; +$soft: #f8fafc; + +.act-savings { + max-width: 720px; + margin: 0 auto; + padding: 20px 24px; + + /* ─── Hero ───────────────────────────────────────────────────────── */ + &__hero { + display: flex; + align-items: center; + gap: 14px; + margin-bottom: 18px; + } + + &__hero-icon { + width: 46px; + height: 46px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 12px; + background: linear-gradient(135deg, $green 0%, $green-d 100%); + color: #fff; + font-size: 18px; + box-shadow: 0 4px 14px -4px rgb(4 120 87 / 45%); + flex-shrink: 0; + } + + &__title { + margin: 0; + font-size: 20px; + font-weight: 800; + color: $navy; + line-height: 1.15; + letter-spacing: 0.01em; + } + + &__sub { + margin: 4px 0 0; + font-size: 13px; + color: #64748b; + max-width: 540px; + } + + /* ─── Form card ─────────────────────────────────────────────────── */ + &__card { + background: #fff; + border: 1px solid $border; + border-radius: 14px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; + } + + &__card-head { + display: flex; + align-items: center; + gap: 10px; + padding: 13px 20px; + background: $soft; + border-bottom: 1px solid $border; + } + + &__card-ico { + width: 26px; + height: 26px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 8px; + background: linear-gradient(135deg, $blue 0%, $blue-d 100%); + color: #fff; + font-size: 12px; + } + + &__card-title { + margin: 0; + font-size: 13.5px; + font-weight: 700; + color: $navy; + letter-spacing: 0.01em; + } + + &__card-body { + padding: 22px 22px 4px; + display: grid; + gap: 6px; + } + + /* Form field tweaks — slightly more compact density. */ + &__field { + width: 100%; + + ::ng-deep .mat-mdc-text-field-wrapper { + background: #fff; + border-radius: 10px; + } + + ::ng-deep .mat-mdc-form-field-infix { + min-height: 48px; + padding-top: 12px !important; + padding-bottom: 12px !important; + } + + ::ng-deep .mdc-notched-outline__leading, + ::ng-deep .mdc-notched-outline__notch, + ::ng-deep .mdc-notched-outline__trailing { + border-color: #cbd5e1 !important; + } + + ::ng-deep &.mat-focused { + .mdc-notched-outline__leading, + .mdc-notched-outline__notch, + .mdc-notched-outline__trailing { + border-color: $blue-d !important; + border-width: 2px !important; + } + } + } + + &__prefix { + color: #64748b; + font-weight: 600; + margin-right: 4px; + } + + /* ─── Action row ────────────────────────────────────────────────── */ + &__actions { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + padding: 14px 20px 18px; + border-top: 1px solid #f1f5f9; + background: #fff; + + button { + height: 42px !important; + border-radius: 10px !important; + font-weight: 600 !important; + padding: 0 22px !important; + letter-spacing: 0.01em; + } + } + + &__cancel { + color: #475569 !important; + border-color: $border !important; + } + + &__confirm { + background: linear-gradient(135deg, $green 0%, $green-d 100%) !important; + color: #fff !important; + box-shadow: 0 4px 12px -2px rgb(4 120 87 / 35%) !important; + + &:disabled { + opacity: 0.55; + filter: grayscale(0.3); + background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important; + box-shadow: none !important; + } + } +} + +.m-r-6 { + margin-right: 6px; +} + +@media (width <= 600px) { + .act-savings { + padding: 14px; + + &__actions { + flex-direction: column-reverse; + + button { + width: 100%; + } + } + } } diff --git a/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.ts b/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.ts index 2130afe2e..e9add4f43 100644 --- a/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.ts +++ b/src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.ts @@ -11,6 +11,7 @@ import { Component, OnInit, Input, inject } from '@angular/core'; import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms'; import { ActivatedRoute, Router, RouterLink } from '@angular/router'; import { Dates } from 'app/core/utils/dates'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; /** Custom Services */ import { SavingsService } from 'app/savings/savings.service'; @@ -19,13 +20,17 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; /** * Activate Savings Account Component + * + * Nexora redesign: gradient green hero + section card with form fields and + * a primary/secondary action row. */ @Component({ selector: 'mifosx-activate-savings-account', templateUrl: './activate-savings-account.component.html', styleUrls: ['./activate-savings-account.component.scss'], imports: [ - ...STANDALONE_SHARED_IMPORTS + ...STANDALONE_SHARED_IMPORTS, + FaIconComponent ] }) export class ActivateSavingsAccountComponent implements OnInit { diff --git a/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html b/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html index 698dcb2e0..207ddf198 100644 --- a/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html +++ b/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html @@ -6,121 +6,153 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
- -
- -
- - {{ 'labels.inputs.Charge' | translate }} - - @for (savingsCharge of savingsChargeOptions; track savingsCharge) { - - {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }} - - } - - @if (savingsChargeForm.controls.chargeId.hasError('required')) { +
+ +
+ + +
+ +
+ +
+

Add Charge to Savings Account

+

+ Attach a fee or penalty from the product's catalogue. Amount and timing are pre-filled from the selected charge + — override only when needed. +

+
+ + + + Charge + +
+ + + +
+ +

Charge Details

+
+ +
+ + {{ 'labels.inputs.Charge' | translate }} + + @for (savingsCharge of savingsChargeOptions; track savingsCharge.id) { + + {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }} + + } + + @if (savingsChargeForm.controls.chargeId.hasError('required')) { + + {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + + + @if (chargeDetails) { +
+ + {{ 'labels.inputs.Amount' | translate }} + + @if (savingsChargeForm.controls.amount.hasError('required')) { - {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }} {{ 'labels.commons.required' | translate }} } - @if (chargeDetails) { -
- - {{ 'labels.inputs.Amount' | translate }} - - @if (savingsChargeForm.controls.amount.hasError('required')) { - - {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - - - {{ 'labels.inputs.Charge Calculation' | translate }} - - @for (chargeCalculation of chargeDetails.chargeCalculationTypeOptions; track chargeCalculation) { - - {{ chargeCalculation.value }} - - } - - - - {{ 'labels.inputs.Charge time type' | translate }} - - @for (chargeTime of chargeDetails.chargeTimeTypeOptions; track chargeTime) { - - {{ chargeTime.value }} - - } - - - @if (savingsChargeForm.contains('dueDate')) { - - {{ 'labels.inputs.Due for collection on' | translate }} - - - - @if (savingsChargeForm.controls.dueDate.hasError('required')) { - - {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - + + {{ 'labels.inputs.Charge Calculation' | translate }} + + @for (chargeCalculation of chargeDetails.chargeCalculationTypeOptions; track chargeCalculation.id) { + {{ chargeCalculation.value }} } - @if (savingsChargeForm.contains('feeOnMonthDay')) { - - {{ 'labels.inputs.Due On' | translate }} - - - - @if (savingsChargeForm.controls.feeOnMonthDay.hasError('required')) { - - {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - + + + + + {{ 'labels.inputs.Charge time type' | translate }} + + @for (chargeTime of chargeDetails.chargeTimeTypeOptions; track chargeTime.id) { + {{ chargeTime.value }} } - @if (savingsChargeForm.contains('feeInterval')) { - - {{ 'labels.inputs.Repeats Every' | translate }} - - + + + + @if (savingsChargeForm.contains('dueDate')) { + + {{ 'labels.inputs.Due for collection on' | translate }} + + + + @if (savingsChargeForm.controls.dueDate.hasError('required')) { + + {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + } -
+ + } + @if (savingsChargeForm.contains('feeOnMonthDay')) { + + {{ 'labels.inputs.Due On' | translate }} + + + + @if (savingsChargeForm.controls.feeOnMonthDay.hasError('required')) { + + {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + + } + @if (savingsChargeForm.contains('feeInterval')) { + + {{ 'labels.inputs.Repeats Every' | translate }} + + }
+ } @else { +
+ + Pick a charge above to load its amount, calculation type and timing. +
+ } +
- - - - - - - +
+ + +
+
diff --git a/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.scss b/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.scss index e1ea46f9f..422ef42b1 100644 --- a/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.scss +++ b/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.scss @@ -6,6 +6,273 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.container { - width: 37rem; +$navy: #0d1b2a; +$slate: #475569; +$muted: #64748b; +$border: #e2e8f0; +$soft: #f8fafc; +$violet: #6d28d9; +$violet-d: #4c1d95; + +.acs { + max-width: 820px; + margin: 0 auto; + padding: 14px 18px 22px; + display: flex; + flex-direction: column; + gap: 12px; +} + +/* ─── Hero ─────────────────────────────────────────────────────────── */ +.acs__hero { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 18px; + border-radius: 12px; + color: #fff; + background: linear-gradient(135deg, #1e1b4b 0%, $violet-d 45%, $violet 100%); + box-shadow: 0 6px 18px -10px rgb(76 29 149 / 50%); + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at top right, rgb(255 255 255 / 12%), transparent 55%); + pointer-events: none; + } +} + +.acs__back { + height: 30px !important; + min-width: 30px !important; + width: 30px !important; + padding: 0 !important; + border-radius: 50% !important; + background: rgb(255 255 255 / 14%) !important; + color: #fff !important; + border: 1px solid rgb(255 255 255 / 28%) !important; + font-size: 12px !important; + flex-shrink: 0; + position: relative; + z-index: 1; + + &:hover { + background: rgb(255 255 255 / 26%) !important; + } +} + +.acs__hero-ico { + width: 36px; + height: 36px; + border-radius: 9px; + background: rgb(255 255 255 / 18%); + border: 1px solid rgb(255 255 255 / 28%); + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 15px; + flex-shrink: 0; + position: relative; + z-index: 1; +} + +.acs__hero-text { + flex: 1 1 auto; + min-width: 0; + position: relative; + z-index: 1; +} + +.acs__title { + margin: 0; + font-size: 14.5px; + font-weight: 800; + letter-spacing: 0.01em; + line-height: 1.15; +} + +.acs__sub { + margin: 2px 0 0; + font-size: 11.5px; + color: rgb(255 255 255 / 82%); + line-height: 1.4; +} + +.acs__hero-pill { + display: inline-flex; + align-items: center; + gap: 5px; + height: 22px; + padding: 0 10px; + border-radius: 999px; + background: rgb(255 255 255 / 16%); + border: 1px solid rgb(255 255 255 / 30%); + font-size: 10.5px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.07em; + color: #fff; + flex-shrink: 0; + position: relative; + z-index: 1; + + fa-icon { + font-size: 10px; + opacity: 0.95; + } +} + +/* ─── Form card ────────────────────────────────────────────────────── */ +.acs__card { + background: #fff; + border: 1px solid $border; + border-radius: 12px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; +} + +.acs__card-head { + display: flex; + align-items: center; + gap: 8px; + padding: 9px 14px; + background: $soft; + border-bottom: 1px solid $border; +} + +.acs__card-ico { + width: 24px; + height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 7px; + background: linear-gradient(135deg, $violet 0%, $violet-d 100%); + color: #fff; + font-size: 11px; +} + +.acs__card-title { + margin: 0; + font-size: 12.5px; + font-weight: 700; + color: $navy; + letter-spacing: 0.01em; +} + +.acs__card-body { + padding: 16px 18px 6px; +} + +.acs__field { + width: 100%; + + ::ng-deep .mat-mdc-text-field-wrapper { + background: #fff; + border-radius: 10px; + } + + ::ng-deep .mat-mdc-form-field-infix { + min-height: 46px; + padding-top: 11px !important; + padding-bottom: 11px !important; + } + + ::ng-deep .mdc-notched-outline__leading, + ::ng-deep .mdc-notched-outline__notch, + ::ng-deep .mdc-notched-outline__trailing { + border-color: #cbd5e1 !important; + } +} + +/* Two-column grid for the charge-detail fields when a charge is selected. */ +.acs__field-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4px 12px; + margin-top: 4px; + + @media (width <= 600px) { + grid-template-columns: 1fr; + } +} + +/* Hint shown before a charge is picked. */ +.acs__hint { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 14px; + margin-top: 4px; + border-radius: 10px; + background: #eef2ff; + border: 1px dashed #c7d2fe; + color: #3730a3; + font-size: 12.5px; + font-weight: 500; + + fa-icon { + color: $violet; + flex-shrink: 0; + } +} + +/* ─── Actions ─────────────────────────────────────────────────────── */ +.acs__actions { + display: flex; + justify-content: flex-end; + gap: 10px; + padding: 12px 18px 14px; + border-top: 1px solid #f1f5f9; + + button { + height: 38px !important; + border-radius: 9px !important; + font-weight: 700 !important; + padding: 0 18px !important; + letter-spacing: 0.01em; + } +} + +.acs__cancel { + color: $slate !important; + border-color: $border !important; +} + +.acs__submit { + background: linear-gradient(135deg, $violet 0%, $violet-d 100%) !important; + color: #fff !important; + box-shadow: 0 3px 10px -2px rgb(76 29 149 / 35%) !important; + + &:disabled { + opacity: 0.55; + filter: grayscale(0.3); + background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important; + box-shadow: none !important; + } +} + +.m-r-6 { + margin-right: 6px; +} + +@media (width <= 600px) { + .acs { + padding: 12px; + } + + .acs__hero { + flex-wrap: wrap; + } + + .acs__actions { + flex-direction: column-reverse; + + button { + width: 100%; + } + } } diff --git a/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.ts b/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.ts index 3b33b7032..b82742f42 100644 --- a/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.ts +++ b/src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.ts @@ -21,6 +21,7 @@ import { Router, ActivatedRoute, RouterLink } from '@angular/router'; import { SavingsService } from '../../savings.service'; import { SettingsService } from 'app/settings/settings.service'; import { Dates } from 'app/core/utils/dates'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; /** @@ -31,7 +32,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; templateUrl: './add-charge-savings-account.component.html', styleUrls: ['./add-charge-savings-account.component.scss'], imports: [ - ...STANDALONE_SHARED_IMPORTS + ...STANDALONE_SHARED_IMPORTS, + FaIconComponent ] }) export class AddChargeSavingsAccountComponent implements OnInit { diff --git a/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html b/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html index b2b90a14f..b23ce935a 100644 --- a/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html +++ b/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.html @@ -6,36 +6,92 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
- - @if (transactionType.holdamount) { - {{ 'labels.heading.Hold Amount' | translate }} - } - @if (transactionType.blockaccount) { - {{ 'labels.heading.Block Savings Account' | translate }} - } +
+ +
+ -
- - - {{ 'labels.inputs.Reason' | translate }} - - @for (codeValue of reasonOptions; track codeValue) { - - {{ codeValue.name }} - - } - - @if (manageSavingsAccountForm.controls.reasonForBlock.hasError('required')) { - - {{ 'labels.inputs.Reason' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - +
+ +
+
+

@if (transactionType.holdamount) { - + {{ 'labels.heading.Hold Amount' | translate }} + } @else if (transactionType.blockaccount) { + Block Savings Account + } @else if (transactionType.blockdeposit) { + Block Deposits + } @else if (transactionType.blockwithdrawal) { + Block Withdrawals + } +

+

+ @if (transactionType.holdamount) { + Place a hold on a portion of the available balance with a reason and amount. + } @else if (transactionType.blockaccount) { + Freezes all account activity. Select a reason to record the action in the audit log. + } @else if (transactionType.blockdeposit) { + Stops incoming credits to this account. Existing withdrawals continue to work. + } @else if (transactionType.blockwithdrawal) { + Stops outgoing debits from this account. Deposits continue to be accepted. + } +

+
+ + + + Action recorded + +
+ + + +
+ +

Action Details

+
+ +
+ + {{ 'labels.inputs.Reason' | translate }} + + @for (codeValue of reasonOptions; track codeValue.id) { + {{ codeValue.name }} + } + + @if (manageSavingsAccountForm.controls.reasonForBlock.hasError('required')) { + + {{ 'labels.inputs.Reason' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + + + @if (transactionType.holdamount) { +
+ {{ 'labels.inputs.Transaction Date' | translate }} } - } - @if (transactionType.holdamount) { - } - +
+ } +
- - - - - - +
+ + +
+
diff --git a/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.scss b/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.scss index e1ea46f9f..0cdfd06ff 100644 --- a/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.scss +++ b/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.scss @@ -6,6 +6,305 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.container { - width: 37rem; +/* Manage-Savings-Account screen — drives four flows: Hold Amount (blue), + Block Deposit (orange), Block Withdrawal (orange), Block Account (red). + Hero gradient + Confirm button tint shift per modifier class. */ + +$navy: #0d1b2a; +$slate: #475569; +$muted: #64748b; +$border: #e2e8f0; +$soft: #f8fafc; +$blue: #1e88e5; +$blue-d: #1e40af; +$amber: #d97706; +$amber-d: #b45309; +$red: #b91c1c; +$red-d: #7f1d1d; + +.msa { + max-width: 720px; + margin: 0 auto; + padding: 14px 18px 22px; + display: flex; + flex-direction: column; + gap: 12px; +} + +/* ─── Hero ─────────────────────────────────────────────────────────── */ +.msa__hero { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 18px; + border-radius: 12px; + color: #fff; + position: relative; + overflow: hidden; + + /* Default (Hold Amount) — calm blue. Modifier classes override below. */ + background: linear-gradient(135deg, #0f172a 0%, $blue-d 45%, $blue 100%); + box-shadow: 0 6px 18px -10px rgb(30 64 175 / 50%); + + &::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at top right, rgb(255 255 255 / 12%), transparent 55%); + pointer-events: none; + } +} + +/* Hero gradient variants */ +.msa--block-deposit .msa__hero, +.msa--block-withdrawal .msa__hero { + background: linear-gradient(135deg, #7c2d12 0%, $amber-d 45%, $amber 100%); + box-shadow: 0 6px 18px -10px rgb(180 83 9 / 50%); +} + +.msa--block-account .msa__hero { + background: linear-gradient(135deg, $red-d 0%, $red 45%, #dc2626 100%); + box-shadow: 0 6px 18px -10px rgb(153 27 27 / 55%); +} + +.msa__back { + height: 30px !important; + min-width: 30px !important; + width: 30px !important; + padding: 0 !important; + border-radius: 50% !important; + background: rgb(255 255 255 / 14%) !important; + color: #fff !important; + border: 1px solid rgb(255 255 255 / 28%) !important; + font-size: 12px !important; + flex-shrink: 0; + position: relative; + z-index: 1; + + &:hover { + background: rgb(255 255 255 / 26%) !important; + } +} + +.msa__hero-ico { + width: 36px; + height: 36px; + border-radius: 9px; + background: rgb(255 255 255 / 18%); + border: 1px solid rgb(255 255 255 / 28%); + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 15px; + flex-shrink: 0; + position: relative; + z-index: 1; +} + +.msa__hero-text { + flex: 1 1 auto; + min-width: 0; + position: relative; + z-index: 1; +} + +.msa__title { + margin: 0; + font-size: 14.5px; + font-weight: 800; + letter-spacing: 0.01em; + line-height: 1.15; +} + +.msa__sub { + margin: 2px 0 0; + font-size: 11.5px; + color: rgb(255 255 255 / 82%); + line-height: 1.4; +} + +.msa__hero-pill { + display: inline-flex; + align-items: center; + gap: 5px; + height: 22px; + padding: 0 10px; + border-radius: 999px; + background: rgb(255 255 255 / 16%); + border: 1px solid rgb(255 255 255 / 30%); + font-size: 10.5px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.07em; + color: #fff; + flex-shrink: 0; + position: relative; + z-index: 1; + + fa-icon { + font-size: 10px; + opacity: 0.95; + } +} + +/* ─── Form card ────────────────────────────────────────────────────── */ +.msa__card { + background: #fff; + border: 1px solid $border; + border-radius: 12px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; +} + +.msa__card-head { + display: flex; + align-items: center; + gap: 8px; + padding: 9px 14px; + background: $soft; + border-bottom: 1px solid $border; +} + +.msa__card-ico { + width: 24px; + height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 7px; + background: linear-gradient(135deg, $blue 0%, $blue-d 100%); + color: #fff; + font-size: 11px; +} + +.msa--block-deposit .msa__card-ico, +.msa--block-withdrawal .msa__card-ico { + background: linear-gradient(135deg, $amber 0%, $amber-d 100%); +} + +.msa--block-account .msa__card-ico { + background: linear-gradient(135deg, $red 0%, $red-d 100%); +} + +.msa__card-title { + margin: 0; + font-size: 12.5px; + font-weight: 700; + color: $navy; + letter-spacing: 0.01em; +} + +.msa__card-body { + padding: 16px 18px 4px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.msa__field { + width: 100%; + + ::ng-deep .mat-mdc-text-field-wrapper { + background: #fff; + border-radius: 10px; + } + + ::ng-deep .mat-mdc-form-field-infix { + min-height: 46px; + padding-top: 11px !important; + padding-bottom: 11px !important; + } + + ::ng-deep .mdc-notched-outline__leading, + ::ng-deep .mdc-notched-outline__notch, + ::ng-deep .mdc-notched-outline__trailing { + border-color: #cbd5e1 !important; + } +} + +.msa__field-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + + @media (width <= 600px) { + grid-template-columns: 1fr; + } +} + +/* ─── Actions ─────────────────────────────────────────────────────── */ +.msa__actions { + display: flex; + justify-content: flex-end; + gap: 10px; + padding: 12px 18px 14px; + border-top: 1px solid #f1f5f9; + + button { + height: 38px !important; + border-radius: 9px !important; + font-weight: 700 !important; + padding: 0 18px !important; + letter-spacing: 0.01em; + } +} + +.msa__cancel { + color: $slate !important; + border-color: $border !important; +} + +.msa__confirm { + /* Default — blue (Hold Amount) */ + background: linear-gradient(135deg, $blue 0%, $blue-d 100%) !important; + color: #fff !important; + box-shadow: 0 3px 10px -2px rgb(30 64 175 / 35%) !important; + + &:disabled { + opacity: 0.55; + filter: grayscale(0.3); + background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important; + box-shadow: none !important; + } +} + +.msa--block-deposit .msa__confirm, +.msa--block-withdrawal .msa__confirm { + background: linear-gradient(135deg, $amber 0%, $amber-d 100%) !important; + box-shadow: 0 3px 10px -2px rgb(180 83 9 / 35%) !important; + + &:disabled { + background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important; + } +} + +.msa--block-account .msa__confirm { + background: linear-gradient(135deg, $red 0%, $red-d 100%) !important; + box-shadow: 0 3px 10px -2px rgb(153 27 27 / 40%) !important; + + &:disabled { + background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important; + } +} + +.m-r-6 { + margin-right: 6px; +} + +@media (width <= 600px) { + .msa { + padding: 12px; + } + + .msa__hero { + flex-wrap: wrap; + } + + .msa__actions { + flex-direction: column-reverse; + + button { + width: 100%; + } + } } diff --git a/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.ts b/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.ts index 830b53ef9..43a679746 100644 --- a/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.ts +++ b/src/app/savings/saving-account-actions/manage-savings-account/manage-savings-account.component.ts @@ -14,8 +14,10 @@ import { SavingsService } from 'app/savings/savings.service'; import { SettingsService } from 'app/settings/settings.service'; import { Currency } from 'app/shared/models/general.model'; import { SystemService } from 'app/system/system.service'; -import { MatCard, MatCardTitle, MatCardContent, MatCardActions } from '@angular/material/card'; +import { MatDialog } from '@angular/material/dialog'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { InputAmountComponent } from '../../../shared/input-amount/input-amount.component'; +import { SuccessDialogComponent } from 'app/shared/success-dialog/success-dialog.component'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; type TransactionCommandType = 'holdamount' | 'blockaccount' | 'blockdeposit' | 'blockwithdrawal'; @@ -33,7 +35,7 @@ interface TransactionType { styleUrls: ['./manage-savings-account.component.scss'], imports: [ ...STANDALONE_SHARED_IMPORTS, - MatCardTitle, + FaIconComponent, InputAmountComponent ] }) @@ -45,6 +47,7 @@ export class ManageSavingsAccountComponent implements OnInit { private router = inject(Router); private systemService = inject(SystemService); private settingsService = inject(SettingsService); + private dialog = inject(MatDialog); @Input() currency: Currency; /** Minimum date allowed. */ @@ -170,9 +173,7 @@ export class ManageSavingsAccountComponent implements OnInit { this.savingsService .executeSavingsAccountTransactionsCommand(this.savingAccountId, command, payload) - .subscribe((response: any) => { - this.router.navigate(['../../transactions'], { relativeTo: this.route }); - }); + .subscribe(() => this.showSuccessAndExit()); } else { payload = { ...this.manageSavingsAccountForm.value @@ -186,9 +187,39 @@ export class ManageSavingsAccountComponent implements OnInit { this.savingsService .executeSavingsAccountCommand(this.savingAccountId, command, payload) - .subscribe((response: any) => { - this.router.navigate(['../../transactions'], { relativeTo: this.route }); - }); + .subscribe(() => this.showSuccessAndExit()); } } + + /** + * Shows the shared success pop-up with copy tuned to the current + * transactionType, then navigates back to the transactions tab when + * the cashier dismisses it. + */ + private showSuccessAndExit(): void { + let title = 'Action Completed'; + let message = 'The action has been recorded on the account.'; + if (this.transactionType.holdamount) { + title = 'Amount Held Successfully'; + message = 'The selected amount has been placed on hold on this savings account.'; + } else if (this.transactionType.blockaccount) { + title = 'Account Blocked Successfully'; + message = 'All activity on this savings account has been frozen.'; + } else if (this.transactionType.blockdeposit) { + title = 'Deposits Blocked Successfully'; + message = 'Incoming credits to this savings account have been blocked.'; + } else if (this.transactionType.blockwithdrawal) { + title = 'Withdrawals Blocked Successfully'; + message = 'Outgoing debits from this savings account have been blocked.'; + } + const ref = this.dialog.open(SuccessDialogComponent, { + width: '420px', + maxWidth: '92vw', + autoFocus: false, + data: { title, message, buttonLabel: 'Done' } + }); + ref.afterClosed().subscribe(() => { + this.router.navigate(['../../transactions'], { relativeTo: this.route }); + }); + } } diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.html b/src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.html new file mode 100644 index 000000000..90de2d73c --- /dev/null +++ b/src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.html @@ -0,0 +1,128 @@ + + +
+ +
+ +

Verify Customer Identity

+ + + + KYC Check + + +
+ + +
+ +
+ @if (profileImage) { + Profile + + } @else { + + } +
+ +
+
+ Client + {{ displayName || data.clientName || '—' }} +
+
+ CIF Number + {{ cifNumber || '—' }} +
+
+ Account No + {{ data.accountNo || '—' }} +
+ @if (mobileNo) { +
+ Mobile + {{ mobileNo }} +
+ } + @if (emailAddress) { +
+ Email + {{ emailAddress }} +
+ } +
+
+ + +
+ KYC Identifiers +
+
+ PAN + {{ panNumber || '—' }} + @if (panNumber) { + + + {{ panVerified ? 'Verified' : 'Unverified' }} + + } +
+
+ Aadhaar + {{ aadhaarMasked || '—' }} + @if (aadhaarMasked) { + + + {{ aadhaarVerified ? 'Verified' : 'Unverified' }} + + } +
+
+
+ + +
+ Specimen Signature +
+ @if (signatureImage) { + Signature + + } @else if (loading) { + Loading… + } @else { + No signature on file + } +
+
+ + + + + +
diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.scss b/src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.scss new file mode 100644 index 000000000..c05fd6d7b --- /dev/null +++ b/src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.scss @@ -0,0 +1,404 @@ +/** + * 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/. + */ + +$navy: #0d1b2a; +$slate: #475569; +$muted: #64748b; +$border: #e2e8f0; +$soft: #f8fafc; +$teal: #0f766e; +$teal-d: #134e4a; +$green: #047857; +$amber: #b45309; + +.idv { + width: 480px; + max-width: 92vw; +} + +/* Single-line teal strip — icon · title · KYC badge · close. Compact, + reaches edge-to-edge, no subtitle clutter. */ +.idv__head { + display: flex; + align-items: center; + gap: 10px; + padding: 0 14px; + height: 44px; + color: #fff; + background: linear-gradient(135deg, $teal-d 0%, #115e59 45%, $teal 100%); + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at top right, rgb(255 255 255 / 14%), transparent 55%); + pointer-events: none; + } +} + +.idv__head-ico { + font-size: 14px; + color: #fff; + flex-shrink: 0; + position: relative; + z-index: 1; + opacity: 0.92; +} + +.idv__title { + position: relative; + z-index: 1; + margin: 0; + font-size: 14px; + font-weight: 800; + letter-spacing: 0.01em; + line-height: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.idv__head-spacer { + flex: 1 1 auto; +} + +/* KYC badge — communicates the purpose of the dialog without needing + subtitle copy. */ +.idv__head-tag { + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + gap: 5px; + height: 22px; + padding: 0 10px; + border-radius: 999px; + background: rgb(255 255 255 / 16%); + border: 1px solid rgb(255 255 255 / 30%); + font-size: 10.5px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.07em; + color: #fff; + flex-shrink: 0; + + fa-icon { + font-size: 10px; + opacity: 0.95; + } +} + +/* Close (×) button — clean white circle, right-anchored. */ +.idv__head-close { + position: relative; + z-index: 1; + width: 26px; + height: 26px; + border-radius: 50%; + border: 1px solid rgb(255 255 255 / 30%); + background: rgb(255 255 255 / 12%); + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 11px; + cursor: pointer; + flex-shrink: 0; + transition: + background 0.15s ease, + border-color 0.15s ease, + transform 0.12s ease; + + &:hover { + background: rgb(255 255 255 / 26%); + border-color: rgb(255 255 255 / 46%); + } + + &:active { + transform: scale(0.92); + } +} + +.idv__content { + padding: 16px 18px 8px !important; + background: #fff; +} + +/* Profile photo + identity meta */ +.idv__row { + display: flex; + gap: 14px; + align-items: center; + margin-bottom: 14px; + padding-bottom: 14px; + border-bottom: 1px dashed $border; +} + +.idv__photo { + position: relative; + width: 92px; + height: 92px; + border-radius: 12px; + overflow: hidden; + background: $soft; + border: 1px solid $border; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: #cbd5e1; + font-size: 42px; + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.18s ease; + } + + &--zoomable { + cursor: zoom-in; + + &:hover img { + transform: scale(1.04); + } + + &:hover .idv__zoom-hint { + opacity: 1; + } + } + + &:focus-visible { + outline: 2px solid $teal; + outline-offset: 2px; + } +} + +/* Tiny magnifier badge in the corner of zoomable surfaces. */ +.idv__zoom-hint { + position: absolute; + bottom: 6px; + right: 6px; + width: 22px; + height: 22px; + border-radius: 50%; + background: rgb(15 23 42 / 78%); + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 11px; + opacity: 0.85; + transition: opacity 0.15s ease; + pointer-events: none; + box-shadow: 0 2px 6px -2px rgb(0 0 0 / 35%); + + &--sig { + width: auto; + height: 26px; + padding: 0 10px; + border-radius: 999px; + gap: 5px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + + fa-icon { + font-size: 10px; + } + } +} + +.idv__meta { + flex: 1 1 auto; + display: flex; + flex-direction: column; + gap: 5px; + min-width: 0; +} + +.idv__meta-row { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 12px; + font-size: 12.5px; +} + +.idv__meta-label { + color: $slate; + font-size: 10.5px; + text-transform: uppercase; + letter-spacing: 0.07em; + font-weight: 700; +} + +.idv__meta-value { + color: $navy; + font-weight: 700; + text-align: right; + word-break: break-word; + + &--mono { + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 11.5px; + letter-spacing: 0.02em; + } +} + +/* Sections (KYC / Signature) */ +.idv__section { + margin-bottom: 12px; +} + +.idv__section-title { + display: block; + font-size: 10px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.08em; + color: $slate; + margin-bottom: 6px; +} + +.idv__kyc { + background: $soft; + border: 1px solid $border; + border-radius: 10px; + padding: 8px 12px; +} + +.idv__kyc-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 5px 0; + font-size: 12.5px; + + & + & { + border-top: 1px dashed #eef2f7; + } +} + +.idv__kyc-label { + font-size: 10.5px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.07em; + color: $slate; + min-width: 64px; +} + +.idv__kyc-value { + flex: 1 1 auto; + text-align: center; +} + +.idv__pill { + display: inline-flex; + align-items: center; + gap: 4px; + height: 20px; + padding: 0 8px; + border-radius: 999px; + font-size: 10px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.05em; + + fa-icon { + font-size: 9px; + } + + &--ok { + background: #ecfdf5; + color: $green; + border: 1px solid #a7f3d0; + } + + &--warn { + background: #fffbeb; + color: $amber; + border: 1px solid #fde68a; + } +} + +/* Signature */ +.idv__sig { + position: relative; + background: $soft; + border: 1px solid $border; + border-radius: 10px; + height: 110px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + transition: border-color 0.15s ease; + + img { + max-width: 92%; + max-height: 92%; + object-fit: contain; + transition: transform 0.18s ease; + } + + &--zoomable { + cursor: zoom-in; + + &:hover { + border-color: $teal; + } + + &:hover img { + transform: scale(1.04); + } + + &:hover .idv__zoom-hint { + opacity: 1; + } + } + + &:focus-visible { + outline: 2px solid $teal; + outline-offset: 2px; + } +} + +.idv__sig-empty { + font-size: 12px; + color: $muted; + font-style: italic; +} + +/* Actions */ +.idv__actions { + padding: 12px 18px 16px !important; + justify-content: flex-end; + background: #fff; + border-top: 1px solid #f1f5f9; + margin: 0 !important; +} + +.idv__close { + height: 36px !important; + border-radius: 9px !important; + font-weight: 700 !important; + padding: 0 22px !important; + background: linear-gradient(135deg, $teal 0%, $teal-d 100%) !important; + color: #fff !important; + box-shadow: 0 3px 10px -2px rgb(15 118 110 / 35%) !important; +} + +.m-r-6 { + margin-right: 6px; +} diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.ts b/src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.ts new file mode 100644 index 000000000..ea6942e94 --- /dev/null +++ b/src/app/savings/saving-account-actions/savings-account-transactions/identity-verify-dialog/identity-verify-dialog.component.ts @@ -0,0 +1,156 @@ +/** + * 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/. + */ + +import { Component, OnInit, inject } from '@angular/core'; +import { + MatDialog, + MatDialogRef, + MAT_DIALOG_DATA, + MatDialogContent, + MatDialogActions, + MatDialogClose +} from '@angular/material/dialog'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; +import { ClientsService } from 'app/clients/clients.service'; +import { ImageZoomDialogComponent } from 'app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; +import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; + +export interface IdentityVerifyData { + clientId: number; + /** Optional — we already know these from the parent screen, used as fallback + * while the API calls are still in flight. */ + clientName: string | null; + accountNo: string | null; +} + +/** + * Identity-verify pop-up shown on the withdrawal screen. Loads the + * client's CIF, profile picture, signature, PAN and Aadhaar so the + * cashier can match the customer against the system before paying out + * cash. + */ +@Component({ + selector: 'mifosx-identity-verify-dialog', + standalone: true, + templateUrl: './identity-verify-dialog.component.html', + styleUrls: ['./identity-verify-dialog.component.scss'], + imports: [ + ...STANDALONE_SHARED_IMPORTS, + MatDialogContent, + MatDialogActions, + MatDialogClose, + FaIconComponent + ] +}) +export class IdentityVerifyDialogComponent implements OnInit { + dialogRef = inject>(MatDialogRef); + data = inject(MAT_DIALOG_DATA); + private clientsService = inject(ClientsService); + private sanitizer = inject(DomSanitizer); + private dialog = inject(MatDialog); + + loading = true; + /** Best-effort population — any failing fetch leaves the corresponding + * field null and the template falls back to "—". */ + cifNumber: string | null = null; + displayName: string | null = null; + mobileNo: string | null = null; + emailAddress: string | null = null; + panNumber: string | null = null; + panVerified = false; + aadhaarMasked: string | null = null; + aadhaarVerified = false; + profileImage: SafeUrl | null = null; + signatureImage: SafeUrl | null = null; + + ngOnInit(): void { + if (!this.data?.clientId) { + this.loading = false; + return; + } + const id = String(this.data.clientId); + let pending = 3; + const done = () => { + pending--; + if (pending <= 0) this.loading = false; + }; + + // Client profile (CIF, name, mobile, email) + this.clientsService.getClientData(id).subscribe({ + next: (client: any) => { + this.cifNumber = client?.cifNumber ?? client?.cifNo ?? null; + this.displayName = client?.displayName ?? client?.fullname ?? this.data.clientName; + this.mobileNo = client?.mobileNo ?? null; + this.emailAddress = client?.emailAddress ?? client?.email ?? null; + done(); + }, + error: () => done() + }); + + // KYC (PAN, Aadhaar) + this.clientsService.getClientKyc(id).subscribe({ + next: (kyc: any) => { + this.panNumber = kyc?.panNumber ?? null; + this.panVerified = !!kyc?.panVerified; + this.aadhaarMasked = kyc?.aadhaarNumberMasked ?? kyc?.aadhaarNumber ?? null; + this.aadhaarVerified = !!kyc?.aadhaarVerified; + done(); + }, + error: () => done() + }); + + // Profile picture + this.clientsService.getClientProfileImage(id).subscribe({ + next: (img: any) => { + if (img) this.profileImage = this.sanitizer.bypassSecurityTrustResourceUrl(img); + done(); + }, + error: () => done() + }); + + // Signature — finds the doc named/described 'signature' then pulls + // the blob. Counted separately because not all clients have one. + this.clientsService.getClientDocuments(id).subscribe({ + next: (docs: any[]) => { + const sigDoc = docs?.find( + (d: any) => + d?.name?.toLowerCase()?.includes('signature') || d?.description?.toLowerCase()?.includes('signature') + ); + if (sigDoc?.id != null) { + this.clientsService.getClientSignatureImage(id, String(sigDoc.id)).subscribe({ + next: (blob: Blob) => { + this.signatureImage = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob)); + }, + error: () => {} + }); + } + }, + error: () => {} + }); + } + + close(): void { + this.dialogRef.close(); + } + + /** + * Pop the image up in the shared full-screen zoom viewer so the + * cashier can match minute details (signature loops, photo features) + * against the customer at the counter. + */ + zoomImage(imageSrc: SafeUrl | null, title: string): void { + if (!imageSrc) return; + this.dialog.open(ImageZoomDialogComponent, { + data: { imageSrc, title }, + panelClass: 'image-zoom-panel', + maxWidth: '90vw', + maxHeight: '90vh' + }); + } +} diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html index d7fa7e616..1a47c22ca 100644 --- a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html +++ b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html @@ -6,127 +6,364 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
- - @if (transactionType.withdrawal) { - - {{ 'labels.heading.Withdraw Money From Saving Account' | translate }} - - } - @if (transactionType.deposit) { - - {{ 'labels.heading.Deposit Money To Saving Account' | translate }} - - } +
+ +
+
+ +
+ +
+
+

+ {{ + transactionType.withdrawal + ? ('labels.heading.Withdraw Money From Saving Account' | translate) + : ('labels.heading.Deposit Money To Saving Account' | translate) + }} +

+

+ {{ + transactionType.deposit + ? 'Count the cash by denomination, then confirm the payment details.' + : 'Disburse cash by denomination and confirm the payment details.' + }} +

+
+ @if (transactionType.withdrawal && clientId) { + + } +
+ Counted Total + ₹{{ denominationTotal | number: '1.2-2' }} + @if (totalPieces > 0) { + {{ totalPieces }} piece(s) + } +
+
-
- -
- - {{ 'labels.inputs.Transaction Date' | translate }} - - - - @if (savingAccountTransactionForm.controls.transactionDate.hasError('required')) { - - {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - + +
+
+ +
+ Client + {{ clientName || '—' }} +
+
-
+ +
+ +
+ Account No + {{ accountNo || '—' }} +
+
+ +
+ +
+ +
+ Available Balance + + ₹{{ availableBalance | number: '1.2-2' }} + +
+
+ +
+ +
+ +
+ KYC + - + + {{ kycStatus }} + +
+
- - {{ 'labels.inputs.Payment Type' | translate }} - - @for (paymentType of paymentTypeOptions; track paymentType) { - - {{ paymentType.name }} - - } - - @if (savingAccountTransactionForm.controls.paymentTypeId.hasError('required')) { - - {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }} - {{ 'labels.commons.required' | translate }} - - } - +
-
- - -
- {{ 'labels.inputs.Show Payment Details' | translate }} -
- +
+ +
+ Today's NEFT/RTGS + ₹{{ sameDayNeftRtgs | number: '1.2-2' }} +
+
+ +
+ +
+ +
+ Cheque In Clearing + ₹{{ sameDayChequeClearing | number: '1.2-2' }} +
+
+
+
+ + + +
+
+ +

Cash Denomination Breakdown

+ + +
+ + +
+
+ Banknotes + ₹{{ notesTotal | number: '1.2-2' }} +
+
+ @for (d of notes; track d.value) { +
+
+ {{ d.label }} + ₹{{ subtotalFor(d) | number: '1.2-2' }} +
+
+ + + +
+
+ } +
+
+ + +
+
+ Coins + ₹{{ coinsTotal | number: '1.2-2' }} +
+
+ @for (d of coins; track d.value) { +
+
+ {{ d.label }} + ₹{{ subtotalFor(d) | number: '1.2-2' }} +
+
+ + + +
+
+ } +
+
+ + +
+
+ Banknotes + ₹{{ notesTotal | number: '1.2-2' }} +
+
+ Coins + ₹{{ coinsTotal | number: '1.2-2' }} +
+
+ Grand Total + ₹{{ denominationTotal | number: '1.2-2' }} +
+ +
+
+ + +
+
+ +

Transaction Details

+
+ +
+ + {{ 'labels.inputs.Transaction Date' | translate }} + + + + @if (savingAccountTransactionForm.controls.transactionDate.hasError('required')) { + + {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + + + + + + @if (denominationTotal > 0 && !denominationMatchesForm) { +
+ + + Counted cash ₹{{ denominationTotal | number: '1.2-2' }} doesn't match the transaction + amount. Click Use ₹{{ denominationTotal | number: '1.2-2' }} to sync.
+ } + @if (denominationMatchesForm) { +
+ + Cash count matches transaction amount. +
+ } - @if (addPaymentDetailsFlag) { - + + {{ 'labels.inputs.Payment Type' | translate }} + + @for (paymentType of paymentTypeOptions; track paymentType) { + {{ paymentType.name }} + } + + @if (savingAccountTransactionForm.controls.paymentTypeId.hasError('required')) { + + {{ 'labels.inputs.Payment Type' | translate }} {{ 'labels.commons.is' | translate }} + {{ 'labels.commons.required' | translate }} + + } + + +
+ + {{ 'labels.inputs.Show Payment Details' | translate }} + +
+ + @if (addPaymentDetailsFlag) { +
+ {{ 'labels.inputs.Account Number' | translate }} - } - - @if (addPaymentDetailsFlag) { - + {{ 'labels.inputs.Cheque' | translate }} - } - - @if (addPaymentDetailsFlag) { - + {{ 'labels.inputs.Routing Code' | translate }} - } - - @if (addPaymentDetailsFlag) { - + {{ 'labels.inputs.Receipt Number' | translate }} - } - - @if (addPaymentDetailsFlag) { - + {{ 'labels.inputs.Bank' | translate }} - } +
+ } - - {{ 'labels.inputs.Notes' | translate }} - - + + {{ 'labels.inputs.Notes' | translate }} + + - - - - +
+ +
- - - +
+
+
diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.scss b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.scss index b21a3cf9c..dfe99b06d 100644 --- a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.scss +++ b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.scss @@ -6,24 +6,872 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.expandcollapsebutton { - margin-top: -7px; +/* Banking-grade transaction-entry screen. Two-column layout: cash + denomination breakdown on the left (the cashier's primary workspace), + transaction & payment details on the right. Hero header is green for + deposits / amber for withdrawals. */ + +$navy: #0d1b2a; +$slate: #475569; +$muted: #64748b; +$border: #e2e8f0; +$soft: #f8fafc; +$blue: #1e40af; +$green: #059669; +$green-d: #047857; +$amber: #d97706; +$amber-d: #b45309; +$red: #b91c1c; + +.sat { + width: 100%; + padding: 10px 16px 18px; + display: flex; + flex-direction: column; + gap: 10px; } -.container { - max-width: 37rem; +/* ─── Hero ─────────────────────────────────────────────────────────── */ + +/* Deep navy-blue banking gradient — formal, high-contrast, sits well + with KYC / Risk / NEFT-RTGS / Cheque badges that follow. */ +.sat__hero { + display: flex; + flex-direction: column; + gap: 10px; + padding: 10px 16px 12px; + border-radius: 12px; + color: #fff; + background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #1e40af 100%); + box-shadow: 0 6px 18px -10px rgb(15 23 42 / 50%); + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at top right, rgb(255 255 255 / 12%), transparent 55%); + pointer-events: none; + } } -.right-input { +.sat__hero-top { + display: flex; + align-items: center; + gap: 12px; + position: relative; + z-index: 1; +} + +/* Back button — sits at the top-left of the hero on a translucent + surface so it reads clearly against the dark gradient. */ +.sat__hero-back { + height: 30px !important; + border-radius: 8px !important; + padding: 0 11px !important; + font-weight: 700 !important; + font-size: 12px !important; + letter-spacing: 0.01em; + background: rgb(255 255 255 / 14%) !important; + color: #fff !important; + border: 1px solid rgb(255 255 255 / 28%) !important; + flex-shrink: 0; + transition: + background 0.15s ease, + border-color 0.15s ease; + + &:hover { + background: rgb(255 255 255 / 26%) !important; + border-color: rgb(255 255 255 / 42%) !important; + } +} + +.sat__hero-title-wrap { + flex: 1 1 auto; + min-width: 0; +} + +/* Deep teal banking gradient for withdrawals — clearly distinct from the + navy-blue deposit hero without resorting to a loud red. */ +.sat--withdrawal .sat__hero { + background: linear-gradient(135deg, #134e4a 0%, #115e59 45%, #0f766e 100%); + box-shadow: 0 6px 18px -10px rgb(15 118 110 / 50%); +} + +.sat__hero-ico { + width: 36px; + height: 36px; + border-radius: 9px; + background: rgb(255 255 255 / 18%); + border: 1px solid rgb(255 255 255 / 28%); + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 15px; + flex-shrink: 0; +} + +.sat__title { + margin: 0; + font-size: 14.5px; + font-weight: 800; + letter-spacing: 0.01em; + line-height: 1.15; +} + +.sat__sub { + margin: 1px 0 0; + font-size: 11.5px; + color: rgb(255 255 255 / 80%); +} + +/* Withdrawal-only "Verify Identity" pill — sits next to the Counted + Total tile and opens the identity-verify dialog. + + Adds a subtle outer pulse-ring (via ::before) until the cashier has + opened the dialog once — drives attention to the compliance step + without changing the button's resting colour. */ +.sat__hero-verify { + position: relative; + height: 30px !important; + border-radius: 8px !important; + padding: 0 12px !important; + font-weight: 700 !important; + font-size: 12px !important; + letter-spacing: 0.01em; + color: #fff !important; + background: rgb(255 255 255 / 16%) !important; + border: 1px solid rgb(255 255 255 / 30%) !important; + flex-shrink: 0; + transition: + background 0.15s ease, + border-color 0.15s ease; + overflow: visible !important; + + &:hover { + background: rgb(255 255 255 / 28%) !important; + border-color: rgb(255 255 255 / 42%) !important; + } + + /* Pulse ring lives just outside the pill so it doesn't clip; sits on + a separate paint layer so it doesn't trigger layout. */ + &::before { + content: ''; + position: absolute; + inset: -2px; + border-radius: 10px; + border: 2px solid rgb(255 255 255 / 70%); + opacity: 0; + pointer-events: none; + will-change: transform, opacity; + } + + &--pulse::before { + animation: sat-verify-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + + /* Pause the pulse on hover so the hover state isn't fighting the + animation — gives the cashier a calm target to click. */ + &--pulse:hover::before { + animation-play-state: paused; + opacity: 0; + } +} + +@keyframes sat-verify-pulse { + 0% { + transform: scale(1); + opacity: 0.85; + } + + 70% { + transform: scale(1.18); + opacity: 0; + } + + 100% { + transform: scale(1.18); + opacity: 0; + } +} + +@media (prefers-reduced-motion: reduce) { + .sat__hero-verify--pulse::before { + animation: none; + opacity: 0.5; + } +} + +.sat__hero-meta { + display: inline-flex; + flex-direction: column; + align-items: flex-end; + padding: 5px 12px; + border-radius: 8px; + background: rgb(255 255 255 / 18%); + border: 1px solid rgb(255 255 255 / 30%); + backdrop-filter: blur(8px); + min-width: 130px; + flex-shrink: 0; +} + +.sat__hero-meta-label { + font-size: 9.5px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.07em; + color: rgb(255 255 255 / 78%); +} + +.sat__hero-meta-value { + font-size: 15px; + font-weight: 800; + color: #fff; + font-variant-numeric: tabular-nums; + letter-spacing: -0.01em; +} + +.sat__hero-meta-sub { + font-size: 10px; + color: rgb(255 255 255 / 75%); + margin-top: 0; +} + +/* ─── Context strip (client / account / KYC / risk / NEFT-RTGS) ──── */ +.sat__ctx { + display: flex; + align-items: stretch; + flex-wrap: wrap; + gap: 0; + padding: 5px 8px; + border-radius: 8px; + background: rgb(255 255 255 / 12%); + border: 1px solid rgb(255 255 255 / 22%); + backdrop-filter: blur(8px); + position: relative; + z-index: 1; +} + +.sat__ctx-item { + display: flex; + align-items: center; + gap: 6px; + + /* Tight flex-basis (110px) so all chips pack on a single row at typical + desktop widths — items shrink down to their content when space is + constrained instead of wrapping. */ + flex: 1 1 110px; + padding: 2px 8px; + min-width: 0; +} + +.sat__ctx-ico { + width: 22px; + height: 22px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 6px; + background: rgb(255 255 255 / 18%); + border: 1px solid rgb(255 255 255 / 25%); + color: #fff; + font-size: 10px; + flex-shrink: 0; +} + +.sat__ctx-text { + display: flex; + flex-direction: column; + min-width: 0; + gap: 0; +} + +.sat__ctx-label { + font-size: 9px; + text-transform: uppercase; + letter-spacing: 0.06em; + color: rgb(255 255 255 / 70%); + font-weight: 700; +} + +.sat__ctx-value { + font-size: 11.5px; + font-weight: 700; + color: #fff; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &--mono { + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 10.5px; + letter-spacing: 0.02em; + } + + &--amount { + font-variant-numeric: tabular-nums; + font-size: 12px; + } + + &--lg { + font-size: 13px; + } +} + +/* Highlight the live balance — the cashier's anchor figure. */ +.sat__ctx-item--balance { + background: rgb(255 255 255 / 12%); + border: 1px solid rgb(255 255 255 / 22%); + border-radius: 7px; + padding: 3px 8px; +} + +.sat__ctx-divider { + width: 1px; + background: rgb(255 255 255 / 18%); + margin: 4px 0; + flex-shrink: 0; + + /* Vertical divider — hidden when items wrap to multiple rows */ + @media (width <= 720px) { + display: none; + } +} + +.sat__ctx-badge { + display: inline-flex; + align-items: center; + gap: 5px; + height: 22px; + padding: 0 9px; + border-radius: 999px; + font-size: 11.5px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.04em; + background: rgb(255 255 255 / 18%); + border: 1px solid rgb(255 255 255 / 30%); + color: #fff; + align-self: flex-start; + width: fit-content; + + fa-icon { + font-size: 10px; + } + + &--ok { + background: rgb(16 185 129 / 36%); + border-color: rgb(110 231 183 / 60%); + color: #d1fae5; + } + + &--warn { + background: rgb(245 158 11 / 36%); + border-color: rgb(252 211 77 / 60%); + color: #fef3c7; + } + + &--danger { + background: rgb(239 68 68 / 36%); + border-color: rgb(252 165 165 / 60%); + color: #fee2e2; + } +} + +/* ─── Two-column layout ───────────────────────────────────────────── */ +.sat__form { + display: grid; + grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); + gap: 14px; + align-items: start; + + @media (width <= 1100px) { + grid-template-columns: 1fr; + } +} + +.sat__panel { + background: #fff; + border: 1px solid $border; + border-radius: 14px; + box-shadow: 0 1px 3px rgb(15 23 42 / 4%); + overflow: hidden; +} + +.sat__panel-head { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + background: $soft; + border-bottom: 1px solid $border; +} + +.sat__panel-ico { + width: 24px; + height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 7px; + background: linear-gradient(135deg, $green 0%, $green-d 100%); + color: #fff; + font-size: 11px; +} + +.sat--withdrawal .sat__panel-ico { + background: linear-gradient(135deg, $amber 0%, $amber-d 100%); +} + +.sat__panel-title { + margin: 0; + font-size: 12.5px; + font-weight: 700; + color: $navy; + letter-spacing: 0.01em; +} + +.sat__panel-spacer { + flex: 1; +} + +.sat__panel-action { + height: 26px !important; + border-radius: 7px !important; + font-size: 11.5px !important; + font-weight: 600 !important; + padding: 0 10px !important; +} + +.sat__panel-body { + padding: 12px 14px 14px; + display: flex; + flex-direction: column; + gap: 3px; +} + +/* ─── Denomination groups ─────────────────────────────────────────── */ +.sat__denom-group { + padding: 8px 14px 4px; + + & + & { + border-top: 1px solid #f1f5f9; + } +} + +.sat__denom-group-head { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 5px; +} + +.sat__denom-group-title { + font-size: 10px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.07em; + color: $slate; +} + +.sat__denom-group-total { + font-size: 12px; + font-weight: 700; + color: $navy; + font-variant-numeric: tabular-nums; +} + +.sat__denom-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 6px; +} + +/* ── Single denomination tile ── + Two-row layout: top has the denomination chip + running subtotal, + bottom has a full-width stepper (− / count / +). Easier to read, + gives the cashier obvious tap targets, and never clips on narrow + columns. */ +.sat__denom { + display: flex; + flex-direction: column; + gap: 5px; + padding: 6px 9px; + border-radius: 8px; + background: #fff; + border: 1px solid $border; + transition: + border-color 0.15s ease, + background 0.15s ease, + box-shadow 0.15s ease; + min-width: 0; + + &--active { + border-color: #86efac; + background: #f0fdf4; + box-shadow: 0 1px 3px -1px rgb(4 120 87 / 18%); + } +} + +.sat__denom-top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + min-width: 0; +} + +.sat__denom-chip { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 48px; + height: 22px; + padding: 0 9px; + border-radius: 5px; + font-size: 11.5px; + font-weight: 800; + letter-spacing: 0.02em; + font-variant-numeric: tabular-nums; + flex-shrink: 0; + + &--note { + background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%); + color: #155e75; + border: 1px solid #a5f3fc; + } + + &--coin { + background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%); + color: #854d0e; + border: 1px solid #fcd34d; + } +} + +.sat__denom-amount { + font-size: 11.5px; + font-weight: 700; + color: $navy; + font-variant-numeric: tabular-nums; text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; } -.right-label { - padding-right: 25px !important; +/* Stepper — full-width row beneath the chip. */ +.sat__denom-stepper { + display: flex; + align-items: stretch; + height: 28px; + border-radius: 6px; + border: 1px solid $border; + background: #fff; + overflow: hidden; } -.form-heading { - font-size: 1.25rem; +.sat__denom-count { + flex: 1 1 auto; + width: 100%; + min-width: 0; + border: none; + outline: none; + background: transparent; + text-align: center; + font-size: 12.5px; + font-weight: 700; + color: $navy; + font-variant-numeric: tabular-nums; + padding: 0 4px; + + /* Hide the native number spinner — the explicit + / − buttons replace it. */ + appearance: textfield; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + appearance: none; + margin: 0; + } +} + +.sat__denom-step { + flex: 0 0 auto; + width: 28px; + background: $soft; + border: none; + border-right: 1px solid $border; + font-size: 15px; + font-weight: 700; + color: $slate; + cursor: pointer; + transition: + background 0.12s ease, + color 0.12s ease; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + padding: 0; + + &:last-child { + border-right: none; + border-left: 1px solid $border; + } + + &:hover:not(:disabled) { + background: #e2e8f0; + color: $navy; + } + + &:active:not(:disabled) { + background: #cbd5e1; + } + + &:disabled { + opacity: 0.35; + cursor: not-allowed; + } +} + +/* ─── Tally / apply ───────────────────────────────────────────────── */ +.sat__tally { + margin: 8px 14px 14px; + padding: 10px 12px; + border-radius: 10px; + background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); + border: 1px solid $border; +} + +.sat__tally-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 3px 0; + font-size: 12px; + color: $slate; + + &--grand { + margin-top: 4px; + padding-top: 8px; + border-top: 1px dashed #cbd5e1; + + .sat__tally-label { + font-weight: 800; + color: $navy; + text-transform: uppercase; + letter-spacing: 0.06em; + font-size: 11px; + } + + .sat__tally-value { + font-size: 15.5px; + font-weight: 800; + color: $green-d; + } + } +} + +.sat--withdrawal .sat__tally-row--grand .sat__tally-value { + color: $amber-d; +} + +.sat__tally-value { + font-weight: 700; + color: $navy; + font-variant-numeric: tabular-nums; +} + +.sat__apply { + width: 100%; + margin-top: 8px; + height: 34px !important; + border-radius: 8px !important; + background: linear-gradient(135deg, $green 0%, $green-d 100%) !important; + color: #fff !important; + font-weight: 700 !important; + font-size: 12.5px !important; + letter-spacing: 0.01em; + box-shadow: 0 3px 10px -2px rgb(4 120 87 / 35%) !important; + + &:disabled { + opacity: 0.5; + filter: grayscale(0.4); + box-shadow: none !important; + } +} + +.sat--withdrawal .sat__apply { + background: linear-gradient(135deg, $amber 0%, $amber-d 100%) !important; + box-shadow: 0 4px 12px -2px rgb(180 83 9 / 35%) !important; +} + +/* ─── Form fields (right panel) ───────────────────────────────────── */ +.sat__field { + width: 100%; + + ::ng-deep .mat-mdc-text-field-wrapper { + background: #fff; + border-radius: 10px; + } + + ::ng-deep .mat-mdc-form-field-infix { + min-height: 48px; + padding-top: 12px !important; + padding-bottom: 12px !important; + } + + ::ng-deep .mdc-notched-outline__leading, + ::ng-deep .mdc-notched-outline__notch, + ::ng-deep .mdc-notched-outline__trailing { + border-color: #cbd5e1 !important; + } +} + +.sat__sub-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px 12px; + + .sat__field--wide { + grid-column: 1 / -1; + } + + @media (width <= 600px) { + grid-template-columns: 1fr; + } +} + +.sat__toggle-row { + display: flex; + align-items: center; + padding: 6px 4px 10px; + cursor: pointer; + user-select: none; + + .sat__toggle-label { + margin-left: 8px; + font-size: 13px; + font-weight: 600; + color: $slate; + } +} + +/* Match / mismatch banners */ +.sat__mismatch, +.sat__match { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 12px; + border-radius: 10px; + font-size: 12.5px; font-weight: 500; - margin-bottom: 0.5rem; + margin: 2px 0 8px; +} + +.sat__mismatch { + background: #fffbeb; + border: 1px solid #fde68a; + color: #92400e; + + &-ico { + color: $amber; + flex-shrink: 0; + } + + strong { + font-weight: 800; + } +} + +.sat__match { + background: #ecfdf5; + border: 1px solid #a7f3d0; + color: #065f46; + + &-ico { + color: $green; + flex-shrink: 0; + } +} + +/* ─── Actions ─────────────────────────────────────────────────────── */ +.sat__actions { + display: flex; + justify-content: flex-end; + gap: 10px; + margin-top: 10px; + padding-top: 12px; + border-top: 1px solid #f1f5f9; + + button { + height: 42px !important; + border-radius: 10px !important; + font-weight: 700 !important; + padding: 0 22px !important; + letter-spacing: 0.01em; + } +} + +.sat__cancel { + color: $slate !important; + border-color: $border !important; +} + +.sat__submit { + background: linear-gradient(135deg, $green 0%, $green-d 100%) !important; + color: #fff !important; + box-shadow: 0 4px 12px -2px rgb(4 120 87 / 35%) !important; + + &:disabled { + opacity: 0.55; + filter: grayscale(0.3); + background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important; + box-shadow: none !important; + } +} + +.sat--withdrawal .sat__submit { + background: linear-gradient(135deg, $amber 0%, $amber-d 100%) !important; + box-shadow: 0 4px 12px -2px rgb(180 83 9 / 35%) !important; + + &:disabled { + background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important; + } +} + +.m-r-6 { + margin-right: 6px; +} + +/* ─── Responsive ──────────────────────────────────────────────────── */ +@media (width <= 720px) { + .sat__hero-top { + flex-wrap: wrap; + } + + .sat__hero-meta { + width: 100%; + } + + .sat__ctx-item { + flex: 1 1 calc(50% - 14px); + } +} + +@media (width <= 480px) { + .sat__ctx-item { + flex: 1 1 100%; + } + + .sat__actions { + flex-direction: column-reverse; + + button { + width: 100%; + } + } } diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.ts b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.ts index 469c47497..a15a24803 100644 --- a/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.ts +++ b/src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.ts @@ -19,16 +19,33 @@ import { Router, ActivatedRoute, RouterLink } from '@angular/router'; /** Custom Services */ import { SavingsService } from '../../savings.service'; +import { ClientsService } from 'app/clients/clients.service'; import { SettingsService } from 'app/settings/settings.service'; import { Dates } from 'app/core/utils/dates'; import { Currency } from 'app/shared/models/general.model'; import { InputAmountComponent } from '../../../shared/input-amount/input-amount.component'; import { MatSlideToggle } from '@angular/material/slide-toggle'; import { CdkTextareaAutosize } from '@angular/cdk/text-field'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; +import { MatDialog } from '@angular/material/dialog'; +import { TransactionConfirmDialogComponent } from './transaction-confirm-dialog/transaction-confirm-dialog.component'; +import { IdentityVerifyDialogComponent } from './identity-verify-dialog/identity-verify-dialog.component'; import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; +/** Single Indian denomination row (note or coin). */ +interface Denomination { + value: number; + kind: 'note' | 'coin'; + label: string; +} + /** - * Create savings account transactions component. + * Create savings account transactions component (Deposit / Withdraw). + * + * Banking-grade redesign: gradient hero, denomination breakdown grid + * (Indian notes ₹500/₹200/₹100/₹50/₹20/₹10 + coins ₹20/₹10/₹5/₹2/Re 1) + * with live total + auto-sync into transactionAmount, payment & note + * panel below. */ @Component({ selector: 'mifosx-savings-transactions', @@ -38,7 +55,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; ...STANDALONE_SHARED_IMPORTS, InputAmountComponent, MatSlideToggle, - CdkTextareaAutosize + CdkTextareaAutosize, + FaIconComponent ] }) export class SavingsAccountTransactionsComponent implements OnInit { @@ -47,7 +65,9 @@ export class SavingsAccountTransactionsComponent implements OnInit { private router = inject(Router); private dateUtils = inject(Dates); private savingsService = inject(SavingsService); + private clientsService = inject(ClientsService); private settingsService = inject(SettingsService); + private dialog = inject(MatDialog); /** Minimum Due Date allowed. */ minDate = new Date(2000, 0, 1); @@ -73,15 +93,50 @@ export class SavingsAccountTransactionsComponent implements OnInit { savingAccountId: string; currency: Currency | null = null; - /** - * Retrieves the Saving Account transaction template data from `resolve`. - * @param {FormBuilder} formBuilder Form Builder. - * @param {SavingsService} savingsService Savings Service. - * @param {ActivatedRoute} route Activated Route. - * @param {Dates} dateUtils Date Utils. - * @param {Router} router Router for navigation. - * @param {SettingsService} settingsService Settings Service - */ + /** Indian banknote denominations (descending). */ + readonly notes: Denomination[] = [ + { value: 500, kind: 'note', label: '₹500' }, + { value: 200, kind: 'note', label: '₹200' }, + { value: 100, kind: 'note', label: '₹100' }, + { value: 50, kind: 'note', label: '₹50' }, + { value: 20, kind: 'note', label: '₹20' }, + { value: 10, kind: 'note', label: '₹10' } + ]; + + /** Indian coin denominations (descending). */ + readonly coins: Denomination[] = [ + { value: 20, kind: 'coin', label: '₹20' }, + { value: 10, kind: 'coin', label: '₹10' }, + { value: 5, kind: 'coin', label: '₹5' }, + { value: 2, kind: 'coin', label: '₹2' }, + { value: 1, kind: 'coin', label: 'Re 1' } + ]; + + /** Quantity per denomination — keyed by `${kind}:${value}`. */ + denominationCounts: Record = {}; + + // ── Context strip data (populated async) ─────────────────────────── + /** Account number of the savings account. */ + accountNo: string | null = null; + /** Client / group display name. */ + clientName: string | null = null; + /** Client id (if this savings account is owned by a client, not a group) + * — used to open the identity-verify dialog on the withdrawal screen. */ + clientId: number | null = null; + /** Best-effort KYC status: 'Verified' | 'Partial' | 'Pending'. */ + kycStatus: 'Verified' | 'Partial' | 'Pending' = 'Pending'; + /** Sum of NEFT/RTGS transactions on the current business day for this + * account — used as an AML hint for the cashier. */ + sameDayNeftRtgs = 0; + /** Sum of same-day cheque transactions that are still awaiting + * clearing for this account — pre-empts duplicate cash credit. */ + sameDayChequeClearing = 0; + /** Live available balance of the savings account. */ + availableBalance = 0; + /** Tracks whether the cashier has opened the identity-verify pop-up + * at least once on this transaction; toggles off the attention pulse. */ + identityVerified = false; + constructor() { this.route.data.subscribe((data: { savingsAccountActionData: any }) => { this.paymentTypeOptions = data.savingsAccountActionData.paymentTypeOptions; @@ -94,17 +149,118 @@ export class SavingsAccountTransactionsComponent implements OnInit { this.savingAccountId = this.route.snapshot.params['savingAccountId']; } - /** - * Creates the Saving account transaction form when component loads. - */ ngOnInit() { this.maxDate = this.settingsService.businessDate; this.createSavingAccountTransactionForm(); + this.loadContextStrip(); } /** - * Method to create the Saving Account Transaction Form. + * Pull the savings account + client to populate the cashier's context + * strip (account number, client name, KYC status, risk level, same-day + * NEFT/RTGS aggregate). Each fetch fails silently — the strip just + * shows '—' for whatever wasn't returned. */ + private loadContextStrip(): void { + if (!this.savingAccountId) return; + this.savingsService.getSavingsAccountData(this.savingAccountId).subscribe({ + next: (account: any) => { + this.accountNo = account?.accountNo ?? null; + this.clientName = account?.clientName ?? account?.groupName ?? null; + this.clientId = account?.clientId ?? null; + if (!this.currency && account?.currency) this.currency = account.currency; + this.availableBalance = Number(account?.summary?.availableBalance ?? account?.summary?.accountBalance ?? 0); + this.computeSameDayNeftRtgs(account?.transactions); + this.computeSameDayChequeClearing(account?.transactions); + if (account?.clientId) { + this.fetchClientKyc(String(account.clientId)); + } + }, + error: () => { + // Leave defaults in place — strip falls back to '—'. + } + }); + } + + private fetchClientKyc(clientId: string): void { + this.clientsService.getClientKyc(clientId).subscribe({ + next: (kyc: any) => { + const pan = !!kyc?.panVerified; + const aadhaar = !!kyc?.aadhaarVerified; + this.kycStatus = pan && aadhaar ? 'Verified' : pan || aadhaar ? 'Partial' : 'Pending'; + }, + error: () => {} + }); + } + + /** + * Filter `transactions` to those on today's business date whose payment + * type or transaction-type label mentions NEFT or RTGS, and sum them. + * The list will be undefined for accounts loaded without the + * `transactions` association — in that case we just stay at 0. + */ + private computeSameDayNeftRtgs(transactions: any[] | undefined): void { + if (!Array.isArray(transactions) || transactions.length === 0) { + this.sameDayNeftRtgs = 0; + return; + } + const today = this.settingsService.businessDate ?? new Date(); + const sameDay = (d: any) => { + if (!d) return false; + const t = Array.isArray(d) && d.length >= 3 ? new Date(d[0], d[1] - 1, d[2]) : new Date(d); + return ( + t.getFullYear() === today.getFullYear() && t.getMonth() === today.getMonth() && t.getDate() === today.getDate() + ); + }; + const isNeftRtgs = (t: any) => { + const txnType = (t?.transactionType?.value ?? t?.transactionType?.code ?? '').toUpperCase(); + const payType = (t?.paymentDetailData?.paymentType?.name ?? '').toUpperCase(); + return /NEFT|RTGS/.test(txnType) || /NEFT|RTGS/.test(payType); + }; + this.sameDayNeftRtgs = transactions + .filter((t: any) => !t.reversed && sameDay(t.date) && isNeftRtgs(t)) + .reduce((sum, t: any) => sum + (Number(t.amount) || 0), 0); + } + + /** + * Sum same-day cheque transactions that are still in clearing for this + * account. A row is treated as a cheque-clearing entry when either: + * • paymentDetailData carries a cheque/check number, OR + * • the transaction type / payment type label mentions "CHEQUE". + * Posted (cleared) entries are excluded so we only show the pending + * float — that's the AML-relevant figure for the cashier. + */ + private computeSameDayChequeClearing(transactions: any[] | undefined): void { + if (!Array.isArray(transactions) || transactions.length === 0) { + this.sameDayChequeClearing = 0; + return; + } + const today = this.settingsService.businessDate ?? new Date(); + const sameDay = (d: any) => { + if (!d) return false; + const t = Array.isArray(d) && d.length >= 3 ? new Date(d[0], d[1] - 1, d[2]) : new Date(d); + return ( + t.getFullYear() === today.getFullYear() && t.getMonth() === today.getMonth() && t.getDate() === today.getDate() + ); + }; + const isCheque = (t: any) => { + const txnType = (t?.transactionType?.value ?? t?.transactionType?.code ?? '').toUpperCase(); + const payType = (t?.paymentDetailData?.paymentType?.name ?? '').toUpperCase(); + const hasCheckNo = !!t?.paymentDetailData?.checkNumber; + return hasCheckNo || /CHEQUE|CHECK/.test(txnType) || /CHEQUE|CHECK/.test(payType); + }; + const isPending = (t: any) => { + const cleared = t?.transactionType?.bankTransfer === true || t?.transactionType?.deposit === true; + // Treat anything not yet posted as in-clearing — backends differ on + // the exact flag, so we look at `cleared` as a heuristic and exclude + // it from the float. + return !cleared; + }; + this.sameDayChequeClearing = transactions + .filter((t: any) => !t.reversed && sameDay(t.date) && isCheque(t) && isPending(t)) + .reduce((sum, t: any) => sum + (Number(t.amount) || 0), 0); + } + createSavingAccountTransactionForm() { this.savingAccountTransactionForm = this.formBuilder.group({ transactionDate: [ @@ -123,6 +279,83 @@ export class SavingsAccountTransactionsComponent implements OnInit { }); } + // ── Denomination helpers ──────────────────────────────────────────── + denomKey(d: Denomination): string { + return `${d.kind}:${d.value}`; + } + + countFor(d: Denomination): number { + return this.denominationCounts[this.denomKey(d)] || 0; + } + + subtotalFor(d: Denomination): number { + return this.countFor(d) * d.value; + } + + onDenomChange(d: Denomination, raw: any): void { + const n = Math.max(0, Math.floor(Number(raw) || 0)); + this.denominationCounts[this.denomKey(d)] = n; + } + + bumpDenom(d: Denomination, delta: number): void { + const next = Math.max(0, this.countFor(d) + delta); + this.denominationCounts[this.denomKey(d)] = next; + } + + get notesTotal(): number { + return this.notes.reduce((s, d) => s + this.subtotalFor(d), 0); + } + + get coinsTotal(): number { + return this.coins.reduce((s, d) => s + this.subtotalFor(d), 0); + } + + get denominationTotal(): number { + return this.notesTotal + this.coinsTotal; + } + + get totalPieces(): number { + return Object.values(this.denominationCounts).reduce((s, n) => s + (n || 0), 0); + } + + get denominationMatchesForm(): boolean { + const formAmt = Number(this.savingAccountTransactionForm?.controls?.['transactionAmount']?.value || 0); + return this.denominationTotal > 0 && formAmt === this.denominationTotal; + } + + /** Push the counted total into the form's transactionAmount field. */ + applyDenominationTotal(): void { + this.savingAccountTransactionForm.controls['transactionAmount'].setValue(this.denominationTotal); + this.savingAccountTransactionForm.controls['transactionAmount'].markAsDirty(); + } + + clearDenominations(): void { + this.denominationCounts = {}; + } + + /** + * Open the identity-verify pop-up. Only meaningful for withdrawals + * (where the cashier needs to match the customer at the counter + * against the on-file profile before paying out cash). + */ + openIdentityVerify(): void { + if (!this.clientId) return; + // Calm the attention pulse after the first open — the cashier has + // acknowledged the verification step. + this.identityVerified = true; + this.dialog.open(IdentityVerifyDialogComponent, { + width: '500px', + maxWidth: '92vw', + panelClass: 'idv-panel', + autoFocus: false, + data: { + clientId: this.clientId, + clientName: this.clientName, + accountNo: this.accountNo + } + }); + } + /** * Method to add payment detail fields to the UI. */ @@ -145,8 +378,39 @@ export class SavingsAccountTransactionsComponent implements OnInit { /** * Method to submit the transaction details. + * + * Opens a pre-commit confirmation pop-up showing the current balance, + * the transaction amount, and the resulting balance. The actual API + * call only fires after the cashier confirms. */ submit() { + const formAmount = Number(this.savingAccountTransactionForm.value.transactionAmount) || 0; + const paymentTypeId = this.savingAccountTransactionForm.value.paymentTypeId; + const paymentTypeLabel = this.paymentTypeOptions?.find((p) => p.id === paymentTypeId)?.name ?? null; + + const ref = this.dialog.open(TransactionConfirmDialogComponent, { + width: '480px', + maxWidth: '92vw', + panelClass: 'tcd-panel', + autoFocus: false, + data: { + kind: this.transactionType.deposit ? 'deposit' : 'withdrawal', + clientName: this.clientName, + accountNo: this.accountNo, + currentBalance: this.availableBalance, + transactionAmount: formAmount, + paymentTypeLabel + } + }); + ref.afterClosed().subscribe((result: any) => { + if (result?.confirm) { + this.postTransaction(); + } + }); + } + + /** Actual API call — only invoked after the cashier confirms the dialog. */ + private postTransaction(): void { const savingAccountTransactionFormData = this.savingAccountTransactionForm.value; const locale = this.settingsService.language.code; const dateFormat = this.settingsService.dateFormat; @@ -160,9 +424,26 @@ export class SavingsAccountTransactionsComponent implements OnInit { locale }; data['transactionAmount'] = data['transactionAmount'] * 1; + // Surface the denomination breakdown on the wire — backend can ignore + // unknown fields, but if a cash-handling extension is enabled it can + // record the cashier's count for audit. + if (this.denominationTotal > 0) { + const breakdown = [ + ...this.notes, + ...this.coins + ] + .map((d) => ({ + denomination: d.value, + kind: d.kind, + count: this.countFor(d), + subtotal: this.subtotalFor(d) + })) + .filter((row) => row.count > 0); + data['denominationBreakdown'] = breakdown; + } this.savingsService .executeSavingsAccountTransactionsCommand(this.savingAccountId, this.transactionCommand, data) - .subscribe((res) => { + .subscribe(() => { this.router.navigate(['../../transactions'], { relativeTo: this.route }); }); } diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.html b/src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.html new file mode 100644 index 000000000..ff21e270e --- /dev/null +++ b/src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.html @@ -0,0 +1,82 @@ + + +
+ +
+
+ +
+
+

Confirm {{ isDeposit ? 'Deposit' : 'Withdrawal' }}

+

Review the figures below — once confirmed the entry will post to the account ledger.

+
+
+ + + +
+
+ Client + {{ data.clientName || '—' }} +
+
+ Account No + {{ data.accountNo || '—' }} +
+ @if (data.paymentTypeLabel) { +
+ Payment Type + {{ data.paymentTypeLabel }} +
+ } +
+ + +
+
+ Current Balance + ₹{{ data.currentBalance | number: '1.2-2' }} +
+
+ + {{ isDeposit ? 'Deposit Amount' : 'Withdrawal Amount' }} + + + {{ isDeposit ? '+' : '−' }} ₹{{ data.transactionAmount | number: '1.2-2' }} + +
+
+ New Balance + ₹{{ newBalance | number: '1.2-2' }} +
+
+ + + @if (overdraft) { +
+ + Resulting balance is negative — confirm the account permits overdraft before proceeding. +
+ } + + + + + + +
diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.scss b/src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.scss new file mode 100644 index 000000000..1af104281 --- /dev/null +++ b/src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.scss @@ -0,0 +1,248 @@ +/** + * 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/. + */ + +$navy: #0d1b2a; +$slate: #475569; +$muted: #64748b; +$border: #e2e8f0; +$soft: #f8fafc; +$green: #059669; +$green-d: #047857; +$teal: #0f766e; +$teal-d: #134e4a; +$red: #b91c1c; +$amber: #b45309; + +.tcd { + width: 460px; + max-width: 92vw; + display: flex; + flex-direction: column; +} + +/* ─── Header ──────────────────────────────────────────────────────── */ +.tcd__head { + display: flex; + align-items: center; + gap: 14px; + padding: 18px 22px; + color: #fff; + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at top right, rgb(255 255 255 / 14%), transparent 55%); + pointer-events: none; + } +} + +.tcd--deposit .tcd__head { + background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #1e40af 100%); +} + +.tcd--withdrawal .tcd__head { + background: linear-gradient(135deg, $teal-d 0%, #115e59 45%, $teal 100%); +} + +.tcd__head-ico { + width: 44px; + height: 44px; + border-radius: 12px; + background: rgb(255 255 255 / 18%); + border: 1px solid rgb(255 255 255 / 28%); + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 18px; + flex-shrink: 0; + position: relative; + z-index: 1; +} + +.tcd__head-text { + position: relative; + z-index: 1; + min-width: 0; +} + +.tcd__title { + margin: 0; + font-size: 17px; + font-weight: 800; + letter-spacing: 0.01em; +} + +.tcd__sub { + margin: 3px 0 0; + font-size: 12px; + color: rgb(255 255 255 / 82%); + line-height: 1.4; +} + +/* ─── Content ─────────────────────────────────────────────────────── */ +.tcd__content { + padding: 18px 22px 6px !important; + background: #fff; +} + +.tcd__meta { + display: flex; + flex-direction: column; + gap: 6px; + margin-bottom: 14px; + padding-bottom: 14px; + border-bottom: 1px dashed $border; +} + +.tcd__meta-item { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 12px; + font-size: 13px; +} + +.tcd__meta-label { + color: $slate; + font-weight: 500; +} + +.tcd__meta-value { + color: $navy; + font-weight: 700; + text-align: right; + word-break: break-word; + + &--mono { + font-family: 'JetBrains Mono', 'Courier New', monospace; + font-size: 12.5px; + } +} + +/* ─── Breakdown card ──────────────────────────────────────────────── */ +.tcd__breakdown { + background: $soft; + border: 1px solid $border; + border-radius: 12px; + padding: 12px 16px; +} + +.tcd__brk-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; + font-size: 13px; + color: $slate; + + & + & { + border-top: 1px dashed #eef2f7; + } + + &--total { + padding-top: 12px; + margin-top: 4px; + border-top: 1px solid #cbd5e1 !important; + + .tcd__brk-label { + font-size: 12px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.06em; + color: $navy; + } + + .tcd__brk-value { + font-size: 18px; + font-weight: 800; + color: $navy; + } + } +} + +.tcd__brk-label { + font-weight: 500; +} + +.tcd__brk-value { + font-weight: 700; + color: $navy; + font-variant-numeric: tabular-nums; + + &--positive { + color: $green-d; + } + + &--negative { + color: $red; + } +} + +/* ─── Overdraft warning ───────────────────────────────────────────── */ +.tcd__warn { + display: flex; + align-items: center; + gap: 10px; + margin-top: 12px; + padding: 10px 14px; + border-radius: 10px; + background: #fffbeb; + border: 1px solid #fde68a; + color: #92400e; + font-size: 12.5px; + font-weight: 500; + + fa-icon { + color: $amber; + flex-shrink: 0; + } +} + +/* ─── Actions ─────────────────────────────────────────────────────── */ +.tcd__actions { + padding: 14px 22px 18px !important; + justify-content: flex-end; + gap: 10px; + background: #fff; + border-top: 1px solid #f1f5f9; + margin: 0 !important; + + button { + height: 40px !important; + border-radius: 10px !important; + font-weight: 700 !important; + padding: 0 18px !important; + letter-spacing: 0.01em; + } +} + +.tcd__cancel { + color: $slate !important; + border-color: $border !important; +} + +.tcd__confirm { + color: #fff !important; + box-shadow: 0 4px 12px -2px rgb(4 120 87 / 35%) !important; +} + +.tcd--deposit .tcd__confirm { + background: linear-gradient(135deg, $green 0%, $green-d 100%) !important; +} + +.tcd--withdrawal .tcd__confirm { + background: linear-gradient(135deg, $teal 0%, $teal-d 100%) !important; + box-shadow: 0 4px 12px -2px rgb(15 118 110 / 35%) !important; +} + +.m-r-6 { + margin-right: 6px; +} diff --git a/src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.ts b/src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.ts new file mode 100644 index 000000000..379362413 --- /dev/null +++ b/src/app/savings/saving-account-actions/savings-account-transactions/transaction-confirm-dialog/transaction-confirm-dialog.component.ts @@ -0,0 +1,75 @@ +/** + * 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/. + */ + +import { Component, inject } from '@angular/core'; +import { + MatDialogRef, + MAT_DIALOG_DATA, + MatDialogContent, + MatDialogActions, + MatDialogClose +} from '@angular/material/dialog'; +import { FaIconComponent } from '@fortawesome/angular-fontawesome'; +import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; + +export interface TransactionConfirmData { + /** 'deposit' | 'withdrawal' — drives the colour palette + sign. */ + kind: 'deposit' | 'withdrawal'; + clientName: string | null; + accountNo: string | null; + currentBalance: number; + transactionAmount: number; + paymentTypeLabel: string | null; +} + +/** + * Pre-commit confirmation pop-up showing the cashier exactly how the + * deposit / withdrawal will affect the account: current balance, the + * transaction amount, and the post-transaction balance. + */ +@Component({ + selector: 'mifosx-transaction-confirm-dialog', + standalone: true, + templateUrl: './transaction-confirm-dialog.component.html', + styleUrls: ['./transaction-confirm-dialog.component.scss'], + imports: [ + ...STANDALONE_SHARED_IMPORTS, + MatDialogContent, + MatDialogActions, + MatDialogClose, + FaIconComponent + ] +}) +export class TransactionConfirmDialogComponent { + dialogRef = inject>(MatDialogRef); + data = inject(MAT_DIALOG_DATA); + + get isDeposit(): boolean { + return this.data.kind === 'deposit'; + } + + get signedAmount(): number { + return this.isDeposit ? this.data.transactionAmount : -this.data.transactionAmount; + } + + get newBalance(): number { + return this.data.currentBalance + this.signedAmount; + } + + get overdraft(): boolean { + return !this.isDeposit && this.newBalance < 0; + } + + confirm(): void { + this.dialogRef.close({ confirm: true }); + } + + cancel(): void { + this.dialogRef.close({ confirm: false }); + } +} diff --git a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html index 5ac5521e6..1e3aa76af 100644 --- a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html +++ b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html @@ -57,13 +57,6 @@ } - - @if (savingsProductSelected) { - - {{ 'labels.inputs.External ID' | translate }} - - - }
diff --git a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts index ac67782d2..a817b26f7 100644 --- a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts +++ b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts @@ -82,6 +82,10 @@ export class SavingsAccountDetailsStepComponent implements OnInit { primaryClientCif = ''; primaryClientId: number | null = null; primaryHolderShare = 0; + /** Best-effort string label of the client's entity type + * (e.g. "Individual", "Corporate", "MSME") — used to auto-fill the + * Customer Segment dropdown when the product template lands. */ + private clientEntityType: string | null = null; // ── Status of Account (RBI) ──────────────────────────────────────────── readonly accountStatusOptions = [ @@ -167,8 +171,7 @@ export class SavingsAccountDetailsStepComponent implements OnInit { productId: this.savingsAccountTemplate.savingsProductId, submittedOnDate: this.savingsAccountTemplate.timeline.submittedOnDate && - new Date(this.savingsAccountTemplate.timeline.submittedOnDate), - externalId: this.savingsAccountTemplate.externalId + new Date(this.savingsAccountTemplate.timeline.submittedOnDate) }); } else { this.savingsAccountDetailsForm.patchValue({ @@ -193,11 +196,49 @@ export class SavingsAccountDetailsStepComponent implements OnInit { this.autoDetectAccountStatus(); } } + this.clientEntityType = this.deriveEntityType(client); + // Product template may have already arrived before the client did — + // try the segment-apply both here and when the template lands. + this.applyInferredCustomerSegment(); this.cdr.detectChanges(); }); } } + /** + * Build a best-effort label for the client's entity / customer type. + * Tries `clientType` first (the explicit master), then falls back to + * `clientClassification` and finally `legalForm`. + */ + private deriveEntityType(client: any): string | null { + if (!client) return null; + const direct = + client.clientType?.value ?? + client.clientType?.name ?? + client.clientClassification?.value ?? + client.clientClassification?.name; + if (direct && typeof direct === 'string') return direct; + const legalForm = client.legalForm?.value ?? client.legalForm?.code ?? client.legalForm?.name; + return typeof legalForm === 'string' ? legalForm : null; + } + + /** + * If `clientEntityType` and `customerSegmentOptions` are both ready, try + * to match an option (exact then case-insensitive substring) and set it + * as the selected Customer Segment. Falls through silently otherwise so + * the existing product default stays in place. + */ + private applyInferredCustomerSegment(): void { + if (!this.clientEntityType || !this.customerSegmentOptions?.length) return; + const needle = this.clientEntityType.trim().toLowerCase(); + const match = + this.customerSegmentOptions.find((o) => o.toLowerCase() === needle) || + this.customerSegmentOptions.find((o) => o.toLowerCase().includes(needle) || needle.includes(o.toLowerCase())); + if (match) { + this.selectedCustomerSegment = match; + } + } + /** Parse DOB from backend — handles array [yyyy, mm, dd] or string */ private parseClientDob(dob: any): Date | null { if (!dob) return null; @@ -263,8 +304,7 @@ export class SavingsAccountDetailsStepComponent implements OnInit { '', Validators.required ], - fieldOfficerId: [''], - externalId: [''] + fieldOfficerId: [''] }); } @@ -279,6 +319,9 @@ export class SavingsAccountDetailsStepComponent implements OnInit { this.customerSegmentOptions = this.extractOptions(response.customerSegmentOptions, response.customerSegment); this.selectedAccountType = response.accountType ?? null; this.selectedCustomerSegment = response.customerSegment ?? null; + // Override the product's default segment with the one inferred + // from the client's entity type when an option matches. + this.applyInferredCustomerSegment(); this.savingsAccountProductTemplate.emit(response); this.fieldOfficerData = response.fieldOfficerOptions; this.savingsProductSelected = true; diff --git a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html index 283f8db6f..c261103a1 100644 --- a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html +++ b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html @@ -575,15 +575,18 @@ }
-
- - -
diff --git a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.scss b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.scss index d73e7acde..a52f1780f 100644 --- a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.scss +++ b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.scss @@ -13,6 +13,31 @@ padding: 0.5rem 0; } +/* Submit + Cancel row at the bottom of the preview. Previous lives in the + parent wizard's tab action bar. */ +.preview-submit-row { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 12px; + margin-top: 18px; + padding-top: 16px; + border-top: 1px solid #f1f5f9; + + button { + height: 42px !important; + border-radius: 10px !important; + font-weight: 600 !important; + padding: 0 22px !important; + } + + &__primary { + background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important; + color: #fff !important; + box-shadow: 0 4px 12px -2px rgb(4 120 87 / 35%) !important; + } +} + .preview-section { border: 1px solid #e2e8f0; border-radius: 10px; diff --git a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.ts b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.ts index 7ce5f9f6e..8ca52d826 100644 --- a/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.ts +++ b/src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.ts @@ -23,7 +23,6 @@ import { } from '@angular/material/table'; import { MatDivider } from '@angular/material/divider'; import { ExternalIdentifierComponent } from '../../../shared/external-identifier/external-identifier.component'; -import { MatStepperPrevious } from '@angular/material/stepper'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { FindPipe } from '../../../pipes/find.pipe'; import { DateFormatPipe } from '../../../pipes/date-format.pipe'; @@ -52,7 +51,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; MatHeaderRow, MatRowDef, MatRow, - MatStepperPrevious, FaIconComponent, FindPipe, DateFormatPipe, diff --git a/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html b/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html index 04635716a..fa4eea0e3 100644 --- a/src/app/savings/savings-account-view/charges-tab/charges-tab.component.html +++ b/src/app/savings/savings-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/savings/savings-account-view/charges-tab/charges-tab.component.scss b/src/app/savings/savings-account-view/charges-tab/charges-tab.component.scss index aff23bdef..cab2f542a 100644 --- a/src/app/savings/savings-account-view/charges-tab/charges-tab.component.scss +++ b/src/app/savings/savings-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/savings/savings-account-view/general-tab/general-tab.component.html b/src/app/savings/savings-account-view/general-tab/general-tab.component.html index 015191aea..4a9182157 100644 --- a/src/app/savings/savings-account-view/general-tab/general-tab.component.html +++ b/src/app/savings/savings-account-view/general-tab/general-tab.component.html @@ -13,355 +13,378 @@ } @if (!isLoading) { -
{{ 'labels.inputs.Name' | translate }}
- - - - @if (savingsAccountData.externalId) { - - } - @if (!savingsAccountData.externalId) { - - } - - - - - - - - - - - - - - - - - - -
{{ 'labels.inputs.External Id' | translate }} - - {{ 'labels.inputs.Not Provided' | translate }}
{{ 'labels.inputs.Activated On' | translate }} - {{ - savingsAccountData.timeline.activatedOnDate - ? (savingsAccountData.timeline.activatedOnDate | dateFormat) - : 'Not Activated' - }} -
{{ 'labels.inputs.Field Officer' | translate }}{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}
{{ 'labels.inputs.Currency' | translate }}{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]
{{ 'labels.inputs.Nominal Interest Rate' | translate }} - @if (savingsAccountData.nominalAnnualInterestRate) { - {{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} % - } - @if (!savingsAccountData.nominalAnnualInterestRate) { - 0 % - } -
-
- } @else { -
-

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

- - - - - - - - - - - -
{{ 'labels.inputs.Field Officer' | translate }}{{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }}
{{ 'labels.inputs.Balance' | translate }} - {{ savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }} -
-
- } - @if (!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval) { -
-

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

- - - @if (savingsAccountData.summary.totalDeposits) { - - - - - } - @if (savingsAccountData.summary.totalInterestEarned >= 0) { - - - - - } - -
{{ 'labels.inputs.Total Deposits' | translate }} - {{ savingsAccountData.summary.totalDeposits | currency: currency.code : 'symbol-narrow' : '1.2-2' }} -
{{ 'labels.inputs.Total Interest Earned' | translate }} - {{ - savingsAccountData.summary.totalInterestEarned - | currency: currency.code : 'symbol-narrow' : '1.2-2' - }} -
-
- } -
- @if (isActive) { -
-

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

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

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

- - - - - @if (savingsAccountData.externalId) { - - } - @if (!savingsAccountData.externalId) { - - } - - - - - - - - - - -
{{ 'labels.inputs.External Id' | translate }} - - {{ 'labels.inputs.Not Provided' | translate }}
{{ 'labels.inputs.Activated On' | translate }} +
+ +
+ +
+
+ +

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

+
+
+
+ {{ 'labels.inputs.Account Number' | translate }} + {{ savingsAccountData.accountNo }} +
+
+ {{ 'labels.text.' + entityType | translate }} {{ 'labels.inputs.name' | translate }} + + {{ savingsAccountData.clientName || savingsAccountData.groupName || '—' }} + +
+ @if (!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval) { +
+ {{ 'labels.inputs.Activated On' | translate }} + {{ savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate | dateFormat) : 'Not Activated' }} -
{{ 'labels.inputs.Currency' | translate }}{{ savingsAccountData.currency.name }} [{{ savingsAccountData.currency.code }}]
-
- } + +
+
+ {{ 'labels.inputs.Field Officer' | translate }} + + {{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }} + +
+
+ {{ 'labels.inputs.Currency' | translate }} + + {{ savingsAccountData.currency.name }} + [{{ savingsAccountData.currency.code }}] + +
+
+ {{ 'labels.inputs.Nominal Interest Rate' | translate }} + + @if (savingsAccountData.nominalAnnualInterestRate) { + {{ savingsAccountData.nominalAnnualInterestRate | formatNumber }} % + } @else { + 0 % + } + +
+ } @else { +
+ {{ 'labels.inputs.Field Officer' | translate }} + + {{ savingsAccountData.fieldOfficerName ? savingsAccountData.fieldOfficerName : 'Unassigned' }} + +
+
+ {{ 'labels.inputs.Balance' | translate }} + + {{ savingsAccountData.summary.accountBalance | currency: currency.code : 'symbol-narrow' : '1.2-2' }} + +
+ } +
+ + + + @if (!savingsAccountData.status.rejected && !savingsAccountData.status.submittedAndPendingApproval) { +
+
+ +

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

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

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

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

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

+
+
+
+ {{ 'labels.inputs.Activated On' | translate }} + + {{ + savingsAccountData.timeline.activatedOnDate + ? (savingsAccountData.timeline.activatedOnDate | dateFormat) + : 'Not Activated' + }} + +
+
+ {{ 'labels.inputs.Currency' | translate }} + + {{ savingsAccountData.currency.name }} + [{{ savingsAccountData.currency.code }}] + +
+
+
+ } +
} diff --git a/src/app/savings/savings-account-view/general-tab/general-tab.component.scss b/src/app/savings/savings-account-view/general-tab/general-tab.component.scss index 2221f0329..a738ebc18 100644 --- a/src/app/savings/savings-account-view/general-tab/general-tab.component.scss +++ b/src/app/savings/savings-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 (legacy, untouched) ──────────────────────────── */ $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/savings/savings-account-view/general-tab/general-tab.component.ts b/src/app/savings/savings-account-view/general-tab/general-tab.component.ts index bd3ab2ea4..673051052 100644 --- a/src/app/savings/savings-account-view/general-tab/general-tab.component.ts +++ b/src/app/savings/savings-account-view/general-tab/general-tab.component.ts @@ -10,7 +10,6 @@ import { Component, inject } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Currency } from 'app/shared/models/general.model'; import { CurrencyPipe } from '@angular/common'; -import { ExternalIdentifierComponent } from '../../../shared/external-identifier/external-identifier.component'; import { DateFormatPipe } from '../../../pipes/date-format.pipe'; import { FormatNumberPipe } from '../../../pipes/format-number.pipe'; import { YesnoPipe } from '../../../pipes/yesno.pipe'; @@ -22,7 +21,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module'; styleUrls: ['./general-tab.component.scss'], imports: [ ...STANDALONE_SHARED_IMPORTS, - ExternalIdentifierComponent, CurrencyPipe, DateFormatPipe, FormatNumberPipe, diff --git a/src/app/savings/savings-account-view/savings-account-view.component.html b/src/app/savings/savings-account-view/savings-account-view.component.html index 266957c89..a9db2e800 100644 --- a/src/app/savings/savings-account-view/savings-account-view.component.html +++ b/src/app/savings/savings-account-view/savings-account-view.component.html @@ -6,239 +6,373 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -