-
{{ 'labels.heading.Details' | translate }}
-
-
-
- {{ 'labels.inputs.Product' | translate }}
- {{
- fixedDepositAccountData.productId | find: fixedDepositsAccountTemplate.productOptions : 'id' : 'name'
- }}
-
-
-
- {{ 'labels.inputs.Submitted On' | translate }}
- {{ fixedDepositAccountData.submittedOnDate | dateFormat }}
-
-
-
- {{ 'labels.inputs.External Id' | translate }}
- {{ fixedDepositAccountData.externalId }}
-
-
-
- {{ 'labels.inputs.Field Officer' | translate }}
- {{
- (fixedDepositAccountData.fieldOfficerId
- | find: fixedDepositsAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName') || 'Unassigned'
- | translateKey: 'inputs'
- }}
-
-
-
{{ 'labels.heading.Currency' | translate }}
-
-
-
- {{ 'labels.inputs.Currency' | translate }}
- {{ fixedDepositsAccountProductTemplate.currency.code }}
-
-
-
- {{ 'labels.inputs.Currency Multiple' | translate }}
- {{ fixedDepositsAccountProductTemplate.currency.inMultiplesOf }}
-
-
-
- {{ 'labels.inputs.Decimal Places' | translate }}
- {{ fixedDepositsAccountProductTemplate.currency.decimalPlaces }}
-
-
-
{{ 'labels.heading.Terms' | translate }}
-
-
-
- {{ 'labels.inputs.Fixed Deposit Amount' | translate }}:
- {{
- fixedDepositAccountData.depositAmount
- | currency: fixedDepositsAccountProductTemplate.currency.code : 'symbol-narrow' : '1.2-2'
- }}
-
-
-
- {{ 'labels.inputs.Deposit Period' | translate }}:
- {{ fixedDepositAccountData.depositPeriod }}
- {{
- fixedDepositAccountData.depositPeriodFrequencyId
- | find: fixedDepositsAccountProductTemplate.periodFrequencyTypeOptions : 'id' : 'value'
- | translateKey: 'catalogs'
- }}
-
-
-
- {{ 'labels.inputs.Interest Compounding Period' | translate }}:
- {{
- fixedDepositAccountData.interestCompoundingPeriodType
- | find: fixedDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
- | translateKey: 'catalogs'
- }}
-
-
-
- {{ 'labels.inputs.Interest Posting Period' | translate }}:
- {{
- fixedDepositAccountData.interestPostingPeriodType
- | find: fixedDepositsAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
- | translateKey: 'catalogs'
- }}
-
-
-
- {{ 'labels.inputs.Interest Calculated using' | translate }}:
- {{
- fixedDepositAccountData.interestCalculationType
- | find: fixedDepositsAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
- | translateKey: 'catalogs'
- }}
-
-
-
- {{ 'labels.inputs.Days in Year' | translate }}:
- {{
- fixedDepositAccountData.interestCalculationDaysInYearType
- | find: fixedDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
- | translateKey: 'catalogs'
- }}
-
-
-
{{ 'labels.heading.Settings' | translate }}
-
-
-
- {{ 'labels.inputs.Lock-in Period' | translate }}:
- {{ fixedDepositAccountData.lockinPeriodFrequency }}
- {{
- fixedDepositAccountData.lockinPeriodFrequencyType
- | find: fixedDepositsAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value'
- | translateKey: 'catalogs'
- }}
-
-
-
- {{ 'labels.inputs.Minimum Deposit Term' | translate }}:
- {{ fixedDepositsAccountProductTemplate.minDepositTerm }}
- {{ fixedDepositsAccountProductTemplate.minDepositTermType?.value | translateKey: 'catalogs' }}
-
-
-
- {{ 'labels.inputs.In Multiples Of' | translate }}:
- {{ fixedDepositsAccountProductTemplate.inMultiplesOfDepositTerm }}
- {{ fixedDepositsAccountProductTemplate.inMultiplesOfDepositTermType?.value | translateKey: 'catalogs' }}
-
-
-
- {{ 'labels.inputs.Maximum Deposit Term' | translate }}
- {{ fixedDepositsAccountProductTemplate.maxDepositTerm }}
- {{ fixedDepositsAccountProductTemplate.maxDepositTermType?.value | translateKey: 'catalogs' }}
-
-
-
- {{ 'labels.inputs.Transfer Interest to Savings Account' | translate }}?
- {{ fixedDepositAccountData.transferInterestToSavings | yesNo }}
-
-
-
- {{ 'labels.inputs.Linked Savings Account' | translate }}
- {{
- fixedDepositAccountData.linkAccountId
- | find: fixedDepositsAccountProductTemplate.savingsAccounts : 'id' : 'accountNo'
- }}
-
-
-
- {{ 'labels.inputs.Maturity Instructions' | translate }}
- {{
- fixedDepositAccountData.maturityInstructionId
- | find: fixedDepositsAccountProductTemplate.maturityInstructionOptions : 'id' : 'value'
- | translateKey: 'catalogs'
- }}
-
-
-
- {{ 'labels.inputs.Apply Penal Interest (less)' | translate }}:
- {{ fixedDepositsAccountProductTemplate.preClosurePenalApplicable | yesNo }}
-
-
-
- {{ 'labels.inputs.Penal Interest' | translate }} (%):
- {{
- fixedDepositsAccountProductTemplate.preClosurePenalInterest +
- '% (' +
- fixedDepositsAccountProductTemplate.preClosurePenalInterestOnType?.id +
- ')'
- }}
-
-
-
- {{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:
- {{ fixedDepositAccountData.withHoldTax | yesNo }}
-
-
-
{{ 'labels.heading.Interest Rate Chart' | translate }}
-
-
-
- {{ 'labels.inputs.name' | translate }}:
- {{ fixedDepositsAccountProductTemplate?.accountChart.name }}
-
-
-
- {{ 'labels.inputs.Valid from Date' | translate }}:
- {{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}
-
-
-
- {{ 'labels.inputs.End Date' | translate }}:
- {{ fixedDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}
-
-
-
- {{ 'labels.inputs.Description' | translate }}:
- {{ fixedDepositsAccountProductTemplate?.accountChart.description }}
-
-
-
- {{ 'labels.inputs.Primary Grouping by Amount' | translate }}:
- {{
- fixedDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
- }}
-
-
-
-
- | {{ 'labels.inputs.Period' | translate }} |
-
- {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }} {{
- chartSlab.periodType.value | translateKey: 'catalogs'
- }}
- |
-
-
-
- {{ 'labels.inputs.Amount Range' | translate }} |
-
- {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
- |
-
-
-
- {{ 'labels.inputs.Interest' | translate }} |
- {{ chartSlab.annualInterestRate | formatNumber }} % |
-
-
-
- {{ 'labels.inputs.Description' | translate }} |
- {{ chartSlab.description }} |
-
-
-
- {{ 'labels.inputs.Actions' | translate }} |
-
-
- |
-
-
-
-
-
-
-
- {{ 'labels.heading.Incentives' | translate }}
-
-
-
-
- | {{ 'labels.inputs.Entity Type' | translate }} |
-
- {{ incentive.entityType.value }}
- |
-
-
-
- {{ 'labels.inputs.Attribute Name' | translate }} |
-
- {{ incentive.attributeName.value }}
- |
-
-
-
- {{ 'labels.inputs.Condition Type' | translate }} |
-
- {{ incentive.conditionType.value | titlecase }}
- |
-
-
-
- {{ 'labels.inputs.Attribute Value' | translate }} |
-
- {{ incentive.attributeValueDesc }}
- |
-
-
-
- {{ 'labels.inputs.Incentive Type' | translate }} |
-
- {{ incentive.incentiveType.value }}
- |
-
-
-
- {{ 'labels.inputs.Interest' | translate }} |
-
- {{ incentive.amount | formatNumber }}
- |
-
-
- |
- |
-
-
+
+
+
+
+
+
+
+ Product
+ {{
+ fixedDepositAccountData?.productId | find: fixedDepositsAccountTemplate?.productOptions : 'id' : 'name'
+ }}
- |
-
+
+ Submitted On
+ {{ fixedDepositAccountData?.submittedOnDate | dateFormat }}
+
+
+ Field Officer
+ {{
+ (fixedDepositAccountData?.fieldOfficerId
+ | find: fixedDepositsAccountProductTemplate?.fieldOfficerOptions : 'id' : 'displayName') || 'Unassigned'
+ }}
+
+
+ External ID
+
+ {{ fixedDepositAccountData?.externalId || 'Unassigned' }}
+
+
+
+
+
- |
- |
- |
-
+
+ @if (fixedDepositsAccountProductTemplate) {
+
+
+
+
+ @if (fixedDepositAccountData?.accountType) {
+
+ Account Type
+ {{ fixedDepositAccountData.accountType }}
+
+ }
+ @if (fixedDepositAccountData?.customerSegment) {
+
+ Customer Segment
+ {{ fixedDepositAccountData.customerSegment }}
+
+ }
+ @if (fixedDepositsAccountProductTemplate?.fdType) {
+
+ FD Type
+ {{ getFdTypeLabel(fixedDepositsAccountProductTemplate.fdType) }}
+
+ }
+
+ Account No
+
+ {{
+ fixedDepositsAccountProductTemplate?.previewAccountNo ||
+ fixedDepositsAccountTemplate?.accountNo ||
+ 'Auto-generated'
+ }}
+
+
+ @if (fixedDepositsAccountProductTemplate?.effectiveDate) {
+
+ Effective To
+ {{ fixedDepositsAccountProductTemplate.effectiveDate | dateFormat }}
+
+ }
+ @if (fixedDepositsAccountProductTemplate?.endDate) {
+
+ End Date
+ {{ fixedDepositsAccountProductTemplate.endDate | dateFormat }}
+
+ }
+
+ Share Linking Enabled
+
+ {{ fixedDepositsAccountProductTemplate?.shareLinkingEnabled ? 'Yes' : 'No' }}
+
+
+ @if (fixedDepositsAccountProductTemplate?.introducerRequired !== undefined) {
+
+ Introducer Required
+
+ {{ fixedDepositsAccountProductTemplate?.introducerRequired ? 'Yes' : 'No' }}
+
+
+ }
+
+
+
+ }
-
-
{{ 'labels.heading.Charges' | translate }}
+
+ @if (fixedDepositAccountData?.accountStatus) {
+
+
+
+
+
+ @switch (fixedDepositAccountData.accountStatus) {
+ @case ('INDIVIDUAL_MALE') {
+ Individual (Male)
+ }
+ @case ('INDIVIDUAL_FEMALE') {
+ Individual (Female)
+ }
+ @case ('SINGLE') {
+ Single Account
+ }
+ @case ('JOINT') {
+ Joint Account
+ }
+ @case ('MINOR') {
+ Minor Account
+ }
+ @case ('SENIOR_CITIZEN') {
+ Senior Citizen
+ }
+ @default {
+ {{ fixedDepositAccountData.accountStatus }}
+ }
+ }
+
+
-
-
-
- | {{ 'labels.inputs.name' | translate }} |
-
- {{ charge.name + ', ' + charge.currency.displaySymbol }}
- |
-
+ @if (fixedDepositAccountData.accountStatus === 'JOINT') {
+
+
+ Mode of Operation
+
+ @switch (fixedDepositAccountData.modeOfOperation) {
+ @case ('EITHER_OR_SURVIVOR') {
+ Either or Survivor
+ }
+ @case ('FORMER_OR_SURVIVOR') {
+ Former or Survivor
+ }
+ @case ('JOINTLY') {
+ Jointly
+ }
+ @case ('ANYONE_OR_SURVIVOR') {
+ Anyone or Survivor
+ }
+ @default {
+ {{ fixedDepositAccountData.modeOfOperation || '—' }}
+ }
+ }
+
+
+
+
+
+
+ | Sr. |
+ Holder Name |
+ CIF No. |
+ Ownership % |
+ Signing |
+ Role |
+
+
+
+ @for (holder of fixedDepositAccountData.jointHolders; track holder.clientId; let i = $index) {
+
+ | {{ i + 1 }} |
+
+ {{ holder.displayName || holder.clientName || '—' }}
+ @if (holder.isPrimary) {
+ Primary
+ }
+ |
+ {{ holder.cifNumber || holder.clientCif || '—' }} |
+ {{ holder.sharePercentage ?? '—' }}% |
+ {{ holder.isMandatory ? 'Mandatory' : 'Optional' }} |
+ {{ holder.isPrimary ? 'Primary Account Holder' : 'Co-Holder' }} |
+
+ }
+
+
+
{{ 'labels.inputs.Type' | translate }} |
-
- {{ charge.chargeCalculationType.value }}
- |
-
+ @if (fixedDepositAccountData.accountStatus === 'INDIVIDUAL_MALE' && fixedDepositAccountData.specialCategory) {
+
+
+ Special Category
+ {{ fixedDepositAccountData.specialCategory }}
+
+
{{ 'labels.inputs.Amount' | translate }} |
-
- {{ charge.amount }}
- |
-
+ @if (fixedDepositAccountData.accountStatus === 'INDIVIDUAL_FEMALE' && fixedDepositAccountData.weakerSection) {
+
+
+ Weaker Section
+ {{ fixedDepositAccountData.weakerSection }}
+
+
{{ 'labels.inputs.Date' | translate }} |
-
+ @if (fixedDepositAccountData.accountStatus === 'MINOR') {
+
+
+ Guardian Name
+ {{ fixedDepositAccountData.guardianName || '—' }}
+
+
+ Guardian CIF
+ {{ fixedDepositAccountData.guardianCifNumber || '—' }}
+
+
+ Relationship
+ {{ fixedDepositAccountData.guardianRelationship || '—' }}
+
+
+
+
+
+
+ Account No
+ {{ fixedDepositAccountData.linkedAccountNo }}
+
+
+ Account Type
+ {{ fixedDepositAccountData.linkedAccountType }}
+
+
+ Account ID
+ {{ fixedDepositAccountData.linkedAccountId }}
+
+
+
+
+
+
+
+
+ {{ 'labels.inputs.Currency' | translate }}
+ {{ currencyName }}
+
+
+ {{ 'labels.inputs.Decimal Places' | translate }}
+ {{ decimalPlaces }}
+
+
+ {{ 'labels.inputs.Currency In Multiples Of' | translate }}
+ {{ inMultiplesOf }}
+
+
+
+ Auto Debit Facility
- {{ (charge.dueDate | dateFormat) || 'Unassigned' }}
-
-
- {{ charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | dateFormat: 'dd MMMM') : 'Unassigned' }}
+ {{ fixedDepositAccountData?.autoDebitFacility | yesNo }}
+
+
+
+
+
+
+
+
+
+
+ Inactive
+
+ After {{ fixedDepositsAccountProductTemplate?.daysToInactiveFromProduct || 30 }} days of no transaction
+
+
+
+
+
+
+
+ Dormant
+
+ {{ fixedDepositsAccountProductTemplate?.daysToDormancyFromProduct || 60 }} days after inactive
+
+
+
+
+
+
+
+ Escheat
+
+ {{ fixedDepositsAccountProductTemplate?.daysToEscheatFromProduct || 90 }} days after dormant
+
+
+
+
+
+
+
+
+
+
+ Full Name
+ {{
+ fixedDepositAccountData.nominee.fullName || fixedDepositAccountData.nominee.displayName
+ }}
+
+
+ Relationship
+ {{ fixedDepositAccountData.nominee.relationship }}
+
+
+ Nominee Share (%)
+ {{ fixedDepositAccountData.nominee.nomineeShare }}%
+
+ @if (fixedDepositAccountData.nominee.dateOfBirth) {
+
+ Date of Birth
+ {{ fixedDepositAccountData.nominee.dateOfBirth | dateFormat }}
+
+ }
+ @if (fixedDepositAccountData.nominee.nationality) {
+
+ Nationality
+ {{ fixedDepositAccountData.nominee.nationality }}
+
+ }
+ @if (fixedDepositAccountData.nominee.mobileNo) {
+
+ Mobile Number
+ {{ fixedDepositAccountData.nominee.mobileNo }}
+
+ }
+
+
+
+
+
+
+ @if (selectedTenure && matchedSlabIndex >= 0) {
+
+
+
+
+ Your FD Tenure
+ {{ selectedTenureLabel }}
+
+
+
+
+ Applicable Interest Rate
+ {{ interestRateChartData[matchedSlabIndex]?.annualInterestRate | formatNumber }}%
+
+
+
+ Slab: {{ interestRateChartData[matchedSlabIndex]?.fromPeriod }}–{{
+ interestRateChartData[matchedSlabIndex]?.toPeriod ?? '∞'
+ }}
+ {{ interestRateChartData[matchedSlabIndex]?.periodType?.value }}
+
+
+ }
+
+
+ @if (fixedDepositsAccountProductTemplate?.accountChart?.name) {
+
+ Name
+ {{ fixedDepositsAccountProductTemplate.accountChart.name }}
+
+ }
+
+ Valid From
+ {{
+ fixedDepositsAccountProductTemplate?.accountChart?.fromDate | dateFormat
+ }}
+
+
+ Primary Grouping by Amount
- {{ 'labels.inputs.N/A' | translate }}
+ {{ fixedDepositsAccountProductTemplate?.accountChart?.isPrimaryGroupingByAmount | yesNo }}
- |
-
+
+
-
- {{ 'labels.inputs.Repayments Every' | translate }} |
-
- {{ charge.feeInterval || 'Not Provided' }}
- |
-
+
+
+ | {{ 'labels.inputs.Period' | translate }} |
+
+ {{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }} {{
+ chartSlab.periodType?.value | translateKey: 'catalogs'
+ }}
+ |
+
-
- {{ 'labels.inputs.Collected On' | translate }} |
-
- {{ charge.chargeTimeType.value }}
- |
-
+
+ {{ 'labels.inputs.Amount Range' | translate }} |
+
+ {{ chartSlab.amountRangeFrom | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
+ |
+
- |
- |
-
+
+ {{ 'labels.inputs.Interest' | translate }} |
+ {{ chartSlab.annualInterestRate | formatNumber }} % |
+
+
+
+ {{ 'labels.inputs.Description' | translate }} |
+ {{ chartSlab.description }} |
+
+
+
+ {{ 'labels.inputs.Actions' | translate }} |
+
+
+ |
+
+
+
+
+
+
+ {{ 'labels.heading.Incentives' | translate }}
+
+
+ | {{ 'labels.inputs.Entity Type' | translate }} |
+ {{ incentive.entityType?.value }} |
+
+
+ {{ 'labels.inputs.Attribute Name' | translate }} |
+ {{ incentive.attributeName?.value }} |
+
+
+ {{ 'labels.inputs.Condition Type' | translate }} |
+ {{ incentive.conditionType?.value | titlecase }} |
+
+
+ {{ 'labels.inputs.Attribute Value' | translate }} |
+ {{ incentive.attributeValueDesc }} |
+
+
+ {{ 'labels.inputs.Incentive Type' | translate }} |
+ {{ incentive.incentiveType?.value }} |
+
+
+ {{ 'labels.inputs.Interest' | translate }} |
+ {{ incentive.amount | formatNumber }} |
+
+ |
+ |
+
+
+ |
+
+
+ |
+ |
+ |
+
+ @if (selectedTenure && matchedSlabIndex >= 0) {
+
+
+ Highlighted row is the slab applicable for your selected tenure of {{ selectedTenureLabel }}
+
+ }
+
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.scss b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.scss
index 4c9f978a6..c7c88cafb 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.scss
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.scss
@@ -6,35 +6,277 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
-table {
- width: 100%;
+// ── Wrapper ──────────────────────────────────────────────────────────────────
+.preview-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+ padding: 0.5rem 0;
}
-.mat-elevation-z1 {
- margin: 1em 0 1.5em;
+// ── Section card ─────────────────────────────────────────────────────────────
+.preview-section {
+ border: 1px solid #e2e8f0;
+ border-radius: 10px;
+ overflow: hidden;
+ background: #fff;
+ box-shadow: 0 1px 4px rgb(0 0 0 / 5%);
+
+ &__header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ background: #f8fafc;
+ border-bottom: 1px solid #e2e8f0;
+ padding: 0.6rem 1rem;
+ }
+
+ &__icon {
+ font-size: 13px;
+ color: #0ea5e9;
+ width: 16px;
+ text-align: center;
+ }
+
+ &__title {
+ flex: 1;
+ font-size: 0.82rem;
+ font-weight: 700;
+ color: #1e293b;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ }
+
+ &__badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 2px 10px;
+ border-radius: 999px;
+ font-size: 10px;
+ font-weight: 700;
+ background: #dbeafe;
+ color: #1d4ed8;
+ border: 1px solid #bfdbfe;
+ text-transform: uppercase;
+
+ &--active {
+ background: #dcfce7 !important;
+ color: #15803d !important;
+ border-color: #bbf7d0 !important;
+ }
+ }
}
-h2,
-h3,
-h4 {
- margin: 0;
+// ── Body ─────────────────────────────────────────────────────────────────────
+.preview-body {
+ padding: 1rem 1.25rem;
+}
+
+// ── Subsection (inside Settings) ─────────────────────────────────────────────
+.preview-subsection {
+ margin-bottom: 1rem;
+
+ &__title {
+ font-size: 0.82rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: #666;
+ margin-bottom: 0.6rem;
+ }
+}
+
+.preview-divider {
+ margin: 0.75rem 0 1rem;
+}
+
+// ── Grid ─────────────────────────────────────────────────────────────────────
+.preview-grid {
+ display: grid;
+ gap: 0.85rem 1.5rem;
+
+ &--three {
+ grid-template-columns: repeat(3, 1fr);
+
+ @media (width <= 768px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (width <= 480px) {
+ grid-template-columns: 1fr;
+ }
+ }
+}
+
+// ── Field ─────────────────────────────────────────────────────────────────────
+.preview-field {
+ display: flex;
+ flex-direction: column;
+ gap: 0.15rem;
+}
+
+.preview-label {
+ font-size: 0.68rem;
+ color: #94a3b8;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+.preview-value {
+ font-size: 0.9rem;
+ color: #1e293b;
font-weight: 500;
}
-span {
- margin: 0.5em 0;
+// ── Yes/No badge ─────────────────────────────────────────────────────────────
+.preview-badge {
+ display: inline-block;
+ padding: 0.15rem 0.6rem;
+ border-radius: 12px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ background: #fef2f2;
+ color: #dc2626;
+ width: fit-content;
+
+ &--yes {
+ background: #f0fdf4;
+ color: #15803d;
+ }
+
+ &--warn {
+ background: #fef3c7;
+ color: #92400e;
+ }
}
-mat-divider {
- margin: 0 0 0.5em;
+// ── Section badge variant for tenure ─────────────────────────────────────────
+.preview-section__badge--tenure {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ padding: 3px 10px;
+ border-radius: 999px;
+ font-size: 11px;
+ font-weight: 700;
+ background: #dcfce7;
+ color: #16a34a;
+ margin-left: auto;
}
-.margin-t {
- margin-top: 1em;
+// ── Tenure + Rate banner ──────────────────────────────────────────────────────
+.preview-tenure-banner {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 14px 18px;
+ background: #f0fdf4;
+ border: 1.5px solid #86efac;
+ border-radius: 10px;
+ margin-bottom: 16px;
+ flex-wrap: wrap;
+
+ &__left {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ > i {
+ font-size: 20px;
+ color: #16a34a;
+ }
+ }
+
+ &__label {
+ display: block;
+ font-size: 10px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: #4b5563;
+ }
+
+ &__value {
+ display: block;
+ font-size: 22px;
+ font-weight: 800;
+ color: #0f172a;
+ line-height: 1.2;
+ }
+
+ &__divider {
+ width: 1px;
+ height: 40px;
+ background: #86efac;
+ }
+
+ &__right {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ }
+
+ &__rate-label {
+ font-size: 10px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: #4b5563;
+ }
+
+ &__rate {
+ font-size: 26px;
+ font-weight: 800;
+ color: #16a34a;
+ line-height: 1.2;
+ }
+
+ &__slab {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ color: #374151;
+ margin-left: auto;
+
+ i {
+ color: #16a34a;
+ font-size: 11px;
+ }
+ }
}
-.margin-b {
- margin-bottom: 0.25em;
+// ── Matched slab row highlight ────────────────────────────────────────────────
+.preview-slab-row--matched td {
+ background: #dcfce7 !important;
+ border-left: 3px solid #16a34a;
+}
+
+// ── Legend below table ────────────────────────────────────────────────────────
+.preview-slab-legend {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: 8px;
+ font-size: 12px;
+ color: #4b5563;
+
+ &__dot {
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ border-radius: 2px;
+ background: #dcfce7;
+ border: 2px solid #16a34a;
+ flex-shrink: 0;
+ }
+}
+
+// ── Tables ───────────────────────────────────────────────────────────────────
+.preview-table {
+ width: 100%;
+ margin-top: 1rem;
}
.irc-table {
@@ -56,3 +298,222 @@ mat-divider {
}
}
}
+
+.margin-t {
+ margin-top: 1em;
+}
+
+// ── Preview Tenure Result Card ─────────────────────────────────────────────────
+.preview-tenure-result {
+ border: 1px solid #e0f2fe;
+ border-radius: 10px;
+ overflow: hidden;
+
+ &__row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.65rem 1rem;
+ border-bottom: 1px solid #f0f9ff;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &--highlight {
+ background: #f0f9ff;
+ }
+ }
+
+ &__rate {
+ font-size: 1.5rem;
+ font-weight: 800;
+ color: #0369a1;
+ }
+}
+
+// ── Misc ──────────────────────────────────────────────────────────────────────
+.preview-muted {
+ color: #94a3b8;
+ font-style: italic;
+}
+
+.preview-mono {
+ font-family: monospace;
+ font-size: 0.88rem;
+ color: #334155;
+}
+
+// ── Status of Account (SOA) ───────────────────────────────────────────────────
+.preview-soa-status-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.preview-soa-tile {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 20px;
+ border-radius: 999px;
+ font-size: 14px;
+ font-weight: 700;
+ background: #eff6ff;
+ color: #1d4ed8;
+ border: 2px solid #bfdbfe;
+
+ i {
+ font-size: 16px;
+ }
+}
+
+.preview-soa-table-wrap {
+ margin-top: 14px;
+ overflow-x: auto;
+ border-radius: 8px;
+ border: 1px solid #e2e8f0;
+}
+
+.preview-soa-tbl {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 13px;
+}
+
+.preview-soa-th {
+ background: #f8fafc;
+ padding: 8px 12px;
+ text-align: left;
+ font-weight: 600;
+ color: #475569;
+ border-bottom: 1px solid #e2e8f0;
+ white-space: nowrap;
+}
+
+.preview-soa-td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #f1f5f9;
+ color: #0f172a;
+ vertical-align: middle;
+}
+
+.preview-soa-tr--primary {
+ background: #f0f9ff;
+
+ .preview-soa-td {
+ font-weight: 600;
+ }
+}
+
+.preview-soa-primary-tag {
+ display: inline-block;
+ margin-left: 6px;
+ padding: 1px 8px;
+ border-radius: 999px;
+ font-size: 10px;
+ font-weight: 700;
+ background: #dbeafe;
+ color: #1d4ed8;
+ border: 1px solid #bfdbfe;
+ vertical-align: middle;
+}
+
+// ── Dormancy Monitoring Timeline ──────────────────────────────────────────────
+.preview-dormancy-timeline {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ margin: 1.25rem 0;
+ overflow-x: auto;
+ padding-bottom: 8px;
+}
+
+.preview-dorm-step {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex: 0 0 140px;
+ gap: 10px;
+
+ &__dot {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 3px solid #e2e8f0;
+ background: #f8fafc;
+ position: relative;
+ box-shadow: 0 0 0 4px #fff;
+ z-index: 2;
+
+ &--inactive {
+ border-color: #f59e0b;
+ background: #fffbeb;
+
+ &::after {
+ content: '';
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #f59e0b;
+ }
+ }
+
+ &--dormant {
+ border-color: #ef4444;
+ background: #fef2f2;
+
+ &::after {
+ content: '';
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #ef4444;
+ }
+ }
+
+ &--escheat {
+ border-color: #7c3aed;
+ background: #f5f3ff;
+
+ &::after {
+ content: '';
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #7c3aed;
+ }
+ }
+ }
+
+ &__body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 2px;
+ }
+
+ &__label {
+ font-size: 12px;
+ font-weight: 700;
+ color: #1e293b;
+ }
+
+ &__days {
+ font-size: 10.5px;
+ color: #64748b;
+ line-height: 1.3;
+ }
+}
+
+.preview-dorm-connector {
+ flex: 0 0 40px;
+ height: 3px;
+ background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
+ margin-top: 16px;
+ border-radius: 2px;
+}
diff --git a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.ts b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.ts
index e4b3d2c86..b9f463659 100644
--- a/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.ts
+++ b/src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.ts
@@ -76,6 +76,8 @@ export class FixedDepositAccountPreviewStepComponent implements OnChanges {
@Input() fixedDepositsAccountProductTemplate: any;
/** Fixed Deposits Account Data */
@Input() fixedDepositAccountData: any;
+ /** Tenure selected from the interest rate chart step */
+ @Input() selectedTenure: { depositPeriod: number; depositPeriodFrequencyId: number } | null = null;
/** Charges Displayed Columns */
chargesDisplayedColumns: string[] = [
@@ -110,6 +112,28 @@ export class FixedDepositAccountPreviewStepComponent implements OnChanges {
/** Expand Chart Slab Index used in the view */
expandChartSlabIndex: number;
+ readonly fdTypeLabels: Record
= {
+ SINGLE: 'FD Single (Days < 1 Year)',
+ DOUBLE: 'FD Double (≥ 1 Year)',
+ SPECIAL: 'FD Special (Monthly Interest Payout)'
+ };
+
+ getFdTypeLabel(fdType: string): string {
+ return this.fdTypeLabels[fdType] || fdType;
+ }
+
+ get currencyName(): string {
+ return this.fixedDepositsAccountProductTemplate?.currency?.name || '—';
+ }
+
+ get decimalPlaces(): string | number {
+ return this.fixedDepositsAccountProductTemplate?.currency?.decimalPlaces ?? '—';
+ }
+
+ get inMultiplesOf(): string | number {
+ return this.fixedDepositsAccountProductTemplate?.currency?.inMultiplesOf ?? '—';
+ }
+
/** Form submission event */
@Output() submitEvent = new EventEmitter();
@@ -117,7 +141,34 @@ export class FixedDepositAccountPreviewStepComponent implements OnChanges {
ngOnChanges() {
if (this.fixedDepositsAccountProductTemplate) {
- this.interestRateChartData = this.fixedDepositsAccountProductTemplate.accountChart.chartSlabs;
+ this.interestRateChartData = this.fixedDepositsAccountProductTemplate.accountChart?.chartSlabs ?? [];
}
}
+
+ get matchedSlabIndex(): number {
+ if (!this.selectedTenure || !this.interestRateChartData?.length) return -1;
+ const { depositPeriod, depositPeriodFrequencyId } = this.selectedTenure;
+ // Convert selected tenure to days for comparison
+ const toDays = (v: number, id: number) => {
+ if (id === 2) return v * 30; // Months
+ if (id === 3) return v * 365; // Years
+ return v; // Days (id=0)
+ };
+ const enteredDays = toDays(depositPeriod, depositPeriodFrequencyId);
+
+ return this.interestRateChartData.findIndex((slab: any) => {
+ const periodTypeValue = (slab.periodType?.value || '').toLowerCase();
+ const slabId = periodTypeValue.includes('month') ? 2 : periodTypeValue.includes('year') ? 3 : 0;
+ const fromDays = toDays(slab.fromPeriod ?? 0, slabId);
+ const toDaysVal = slab.toPeriod != null ? toDays(slab.toPeriod, slabId) : Infinity;
+ return enteredDays >= fromDays && enteredDays <= toDaysVal;
+ });
+ }
+
+ get selectedTenureLabel(): string {
+ if (!this.selectedTenure) return '';
+ const { depositPeriod, depositPeriodFrequencyId } = this.selectedTenure;
+ const unitMap: Record = { 0: 'Days', 2: 'Months', 3: 'Years' };
+ return `${depositPeriod} ${unitMap[depositPeriodFrequencyId] ?? ''}`;
+ }
}
diff --git a/src/environments/.env.ts b/src/environments/.env.ts
index ab249d204..c863a04fb 100644
--- a/src/environments/.env.ts
+++ b/src/environments/.env.ts
@@ -5,13 +5,12 @@
* 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/.
*/
-
// IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT OR CHECKIN!
/* tslint:disable */
export default {
'mifos_x': {
- 'version': '260504',
- 'hash': 'e9d2f4b5'
+ 'version': '260507',
+ 'hash': 'b0cffd38'
},
'allow_switching_backend_instance': true
};