cbsnexora/src/app/current-accounts/current-account-stepper/current-account-preview-step/current-account-preview-step.component.html

<!--
  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/.
-->

<div class="preview-wrapper">
  <!-- ══ 1. Account Details ════════════════════════════════════════ -->
  <div class="preview-section">
    <div class="preview-section__header">
      <i class="fas fa-info-circle preview-section__icon"></i>
      <span class="preview-section__title">Account Details</span>
    </div>
    <div class="preview-body">
      <div class="preview-grid preview-grid--three">
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.Product' | translate }}</span>
          <span class="preview-value">{{
            currentAccount?.productId | find: currentAccountTemplate?.productOptions : 'id' : 'name'
          }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.Submitted On' | translate }}</span>
          <span class="preview-value">{{ currentAccount?.submittedOnDate | dateFormat }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.Field Officer' | translate }}</span>
          <span class="preview-value">{{
            currentAccount?.fieldOfficerId
              | find: currentAccountProductTemplate?.fieldOfficerOptions : 'id' : 'displayName'
          }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">{{ 'labels.inputs.External Id' | translate }}</span>
          @if (currentAccount?.externalId) {
            <span class="preview-value">
              <mifosx-external-identifier externalId="{{ currentAccount.externalId }}"></mifosx-external-identifier>
            </span>
          } @else {
            <span class="preview-value preview-muted">Unassigned</span>
          }
        </div>
      </div>
    </div>
  </div>

  <!-- ══ 2. Product Classification ════════════════════════════════ -->
  @if (
    currentAccountProductTemplate?.accountType ||
    currentAccountProductTemplate?.customerSegment ||
    currentAccountProductTemplate?.productCode ||
    currentAccountProductTemplate?.previewAccountNo ||
    currentAccountProductTemplate?.effectiveDate ||
    currentAccountProductTemplate?.effectiveTo ||
    currentAccountProductTemplate?.endDate
  ) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-tags preview-section__icon"></i>
        <span class="preview-section__title">Product Classification</span>
        <span class="preview-section__badge">From Product</span>
      </div>
      <div class="preview-body">
        <div class="preview-grid preview-grid--three">
          @if (currentAccountProductTemplate?.accountType) {
            <div class="preview-field">
              <span class="preview-label">Account Type</span>
              <span class="preview-value">{{ currentAccountProductTemplate?.accountType }}</span>
            </div>
          }
          @if (currentAccountProductTemplate?.customerSegment) {
            <div class="preview-field">
              <span class="preview-label">Customer Segment</span>
              <span class="preview-value">{{ currentAccountProductTemplate?.customerSegment }}</span>
            </div>
          }
          @if (currentAccountProductTemplate?.productCode) {
            <div class="preview-field">
              <span class="preview-label">Product Code</span>
              <span class="preview-value preview-mono">{{ currentAccountProductTemplate?.productCode }}</span>
            </div>
          }
          <div class="preview-field">
            <span class="preview-label">Account No</span>
            <span class="preview-value preview-mono">{{
              currentAccountProductTemplate?.previewAccountNo || currentAccountTemplate?.accountNo || 'Auto-generated'
            }}</span>
          </div>
          @if (currentAccountProductTemplate?.effectiveDate) {
            <div class="preview-field">
              <span class="preview-label">Effective Date</span>
              <span class="preview-value">{{ currentAccountProductTemplate?.effectiveDate | dateFormat }}</span>
            </div>
          }
          @if (currentAccountProductTemplate?.effectiveTo) {
            <div class="preview-field">
              <span class="preview-label">Effective To</span>
              <span class="preview-value">{{ currentAccountProductTemplate?.effectiveTo | dateFormat }}</span>
            </div>
          }
          @if (currentAccountProductTemplate?.endDate) {
            <div class="preview-field">
              <span class="preview-label">End Date</span>
              <span class="preview-value">{{ currentAccountProductTemplate?.endDate | dateFormat }}</span>
            </div>
          }
          <div class="preview-field">
            <span class="preview-label">Introducer Required</span>
            <span
              class="preview-value preview-badge"
              [class.preview-badge--yes]="currentAccountProductTemplate?.introducerRequired"
            >
              {{ currentAccountProductTemplate?.introducerRequired | yesNo }}
            </span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Share Linking Enabled</span>
            <span
              class="preview-value preview-badge"
              [class.preview-badge--yes]="currentAccountProductTemplate?.shareLinkingEnabled"
            >
              {{ currentAccountProductTemplate?.shareLinkingEnabled | yesNo }}
            </span>
          </div>
        </div>
      </div>
    </div>
  }

  <!-- ══ 3. Introducer Details (if selected) ══════════════════════ -->
  @if (currentAccount?.introducerId) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-user-tie preview-section__icon"></i>
        <span class="preview-section__title">Introducer Details</span>
      </div>
      <div class="preview-body">
        <div class="preview-grid preview-grid--three">
          <div class="preview-field">
            <span class="preview-label">Name</span>
            <span class="preview-value">{{ currentAccount?.introducerName || '—' }}</span>
          </div>
          @if (currentAccount?.introducerCif) {
            <div class="preview-field">
              <span class="preview-label">CIF No</span>
              <span class="preview-value preview-mono">{{ currentAccount.introducerCif }}</span>
            </div>
          }
          <div class="preview-field">
            <span class="preview-label">Client ID</span>
            <span class="preview-value preview-mono">{{ currentAccount.introducerId }}</span>
          </div>
        </div>
      </div>
    </div>
  }

  <!-- ══ 4. Currency & Account Flags ══════════════════════════════ -->
  <div class="preview-section">
    <div class="preview-section__header">
      <i class="fas fa-coins preview-section__icon"></i>
      <span class="preview-section__title">Currency &amp; Account Flags</span>
    </div>
    <div class="preview-body">
      <div class="preview-grid preview-grid--three">
        <div class="preview-field">
          <span class="preview-label">Currency</span>
          <span class="preview-value">{{ currencyName }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">Decimal Places</span>
          <span class="preview-value">{{ decimalPlaces }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">Currency In Multiples Of</span>
          <span class="preview-value">{{ inMultiplesOf }}</span>
        </div>
        <div class="preview-field">
          <span class="preview-label">Balance Swap Option</span>
          <span
            class="preview-value preview-badge"
            [class.preview-badge--yes]="currentAccountCurrencyFlags?.balanceSwapOption"
          >
            {{ currentAccountCurrencyFlags?.balanceSwapOption | yesNo }}
          </span>
        </div>
        <div class="preview-field">
          <span class="preview-label">MSME</span>
          <span class="preview-value preview-badge" [class.preview-badge--yes]="currentAccountCurrencyFlags?.msme">
            {{ currentAccountCurrencyFlags?.msme | yesNo }}
          </span>
        </div>
        <div class="preview-field">
          <span class="preview-label">Auto Debit Facility</span>
          <span
            class="preview-value preview-badge"
            [class.preview-badge--yes]="currentAccountCurrencyFlags?.autoDebitFacility"
          >
            {{ currentAccountCurrencyFlags?.autoDebitFacility | yesNo }}
          </span>
        </div>
        <div class="preview-field">
          <span class="preview-label">Dormancy Alert</span>
          <span
            class="preview-value preview-badge"
            [class.preview-badge--yes]="currentAccountProductTemplate?.dormancyAlert"
          >
            {{ currentAccountProductTemplate?.dormancyAlert | yesNo }}
          </span>
        </div>
        <div class="preview-field">
          <span class="preview-label">Nomination Facility</span>
          <span
            class="preview-value preview-badge"
            [class.preview-badge--yes]="currentAccountProductTemplate?.nominationFacility"
          >
            {{ currentAccountProductTemplate?.nominationFacility | yesNo }}
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- ══ 5. Dormancy Monitoring ════════════════════════════════════ -->
  @if (currentAccountProductTemplate?.dormancyAlert || currentAccountProductTemplate?.isDormancyTrackingActive) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-moon preview-section__icon"></i>
        <span class="preview-section__title">Dormancy Monitoring</span>
        <span
          class="preview-section__badge"
          [class.preview-section__badge--active]="currentAccountProductTemplate?.isDormancyTrackingActive"
        >
          {{ currentAccountProductTemplate?.isDormancyTrackingActive ? 'Active' : 'Inactive' }}
        </span>
      </div>
      <div class="preview-body">
        <div class="preview-dormancy-timeline">
          <div class="preview-dorm-step">
            <div class="preview-dorm-step__dot preview-dorm-step__dot--inactive"></div>
            <div class="preview-dorm-step__body">
              <span class="preview-dorm-step__label">Inactive</span>
              <span class="preview-dorm-step__days">
                @if (currentAccountProductTemplate?.daysToInactive != null) {
                  After {{ currentAccountProductTemplate.daysToInactive }} days of no transaction
                } @else {
                  Not configured
                }
              </span>
            </div>
          </div>
          <div class="preview-dorm-connector"></div>
          <div class="preview-dorm-step">
            <div class="preview-dorm-step__dot preview-dorm-step__dot--dormant"></div>
            <div class="preview-dorm-step__body">
              <span class="preview-dorm-step__label">Dormant</span>
              <span class="preview-dorm-step__days">
                @if (currentAccountProductTemplate?.daysToDormancy != null) {
                  {{ currentAccountProductTemplate.daysToDormancy }} days after inactive
                } @else {
                  Not configured
                }
              </span>
            </div>
          </div>
          <div class="preview-dorm-connector"></div>
          <div class="preview-dorm-step">
            <div class="preview-dorm-step__dot preview-dorm-step__dot--escheat"></div>
            <div class="preview-dorm-step__body">
              <span class="preview-dorm-step__label">Escheat</span>
              <span class="preview-dorm-step__days">
                @if (currentAccountProductTemplate?.daysToEscheat != null) {
                  {{ currentAccountProductTemplate.daysToEscheat }} days after dormant
                } @else {
                  Not configured
                }
              </span>
            </div>
          </div>
        </div>
        <div class="preview-dorm-flags">
          <span class="preview-dorm-flag" [class.preview-dorm-flag--on]="currentAccountProductTemplate?.dormancyAlert">
            <i class="fas fa-bell"></i> Alert
            {{ currentAccountProductTemplate?.dormancyAlert ? 'Enabled' : 'Disabled' }}
          </span>
          <span
            class="preview-dorm-flag"
            [class.preview-dorm-flag--on]="currentAccountProductTemplate?.isDormancyTrackingActive"
          >
            <i class="fas fa-eye"></i> Tracking
            {{ currentAccountProductTemplate?.isDormancyTrackingActive ? 'Active' : 'Inactive' }}
          </span>
        </div>
      </div>
    </div>
  }

  <!-- ══ 6. Nominee Details (if filled) ═══════════════════════════ -->
  @if (currentAccountNominee) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-user-shield preview-section__icon"></i>
        <span class="preview-section__title">Nominee Details</span>
        <span class="preview-section__badge">
          {{ currentAccountNominee?.mode === 'linked' ? 'Linked Client' : 'Manual Entry' }}
        </span>
      </div>
      <div class="preview-body">
        <div class="preview-grid preview-grid--three">
          <div class="preview-field">
            <span class="preview-label">Name</span>
            <span class="preview-value">{{
              currentAccountNominee?.fullName || currentAccountNominee?.displayName || '—'
            }}</span>
          </div>
          @if (currentAccountNominee?.cifNumber) {
            <div class="preview-field">
              <span class="preview-label">CIF No</span>
              <span class="preview-value preview-mono">{{ currentAccountNominee.cifNumber }}</span>
            </div>
          }
          <div class="preview-field">
            <span class="preview-label">Relationship</span>
            <span class="preview-value">{{ currentAccountNominee?.relationship || '—' }}</span>
          </div>
          <div class="preview-field">
            <span class="preview-label">Share %</span>
            <span class="preview-value">{{ currentAccountNominee?.nomineeShare ?? '—' }}%</span>
          </div>
          @if (currentAccountNominee?.dateOfBirth) {
            <div class="preview-field">
              <span class="preview-label">Date of Birth</span>
              <span class="preview-value">{{ currentAccountNominee?.dateOfBirth | dateFormat }}</span>
            </div>
          }
          @if (currentAccountNominee?.nationality) {
            <div class="preview-field">
              <span class="preview-label">Nationality</span>
              <span class="preview-value">{{ currentAccountNominee?.nationality }}</span>
            </div>
          }
          @if (currentAccountNominee?.mobileNo) {
            <div class="preview-field">
              <span class="preview-label">Mobile No</span>
              <span class="preview-value preview-mono">{{ currentAccountNominee?.mobileNo }}</span>
            </div>
          }
          @if (currentAccountNominee?.aadhaarNumber) {
            <div class="preview-field">
              <span class="preview-label">Aadhaar No</span>
              <span class="preview-value preview-mono">{{ currentAccountNominee?.aadhaarNumber }}</span>
            </div>
          }
          @if (currentAccountNominee?.panNumber) {
            <div class="preview-field">
              <span class="preview-label">PAN No</span>
              <span class="preview-value preview-mono">{{ currentAccountNominee?.panNumber }}</span>
            </div>
          }
          @if (currentAccountNominee?.guardianName) {
            <div class="preview-field">
              <span class="preview-label">Guardian Name</span>
              <span class="preview-value">{{ currentAccountNominee?.guardianName }}</span>
            </div>
          }
          @if (currentAccountNominee?.guardianRelationship) {
            <div class="preview-field">
              <span class="preview-label">Guardian Relationship</span>
              <span class="preview-value">{{ currentAccountNominee?.guardianRelationship }}</span>
            </div>
          }
          @if (currentAccountNominee?.remarks) {
            <div class="preview-field">
              <span class="preview-label">Remarks</span>
              <span class="preview-value">{{ currentAccountNominee?.remarks }}</span>
            </div>
          }
        </div>
      </div>
    </div>
  }

  <!-- ══ 7. Non-Individual Details (if applicable) ════════════════ -->
  @if (currentAccount?.partners?.length > 0) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-building preview-section__icon"></i>
        <span class="preview-section__title">Non-Individual Account Details</span>
      </div>
      <div class="preview-body">
        <!-- Partners -->
        <div class="preview-ni-label">Partners / Members</div>
        <div class="preview-ni-table-wrap">
          <table class="preview-ni-tbl">
            <thead>
              <tr>
                <th>Partner Name</th>
                <th>CIF No</th>
                <th>Ownership %</th>
                <th>Signing Authority</th>
              </tr>
            </thead>
            <tbody>
              @for (p of currentAccount.partners; track p.clientId) {
                <tr>
                  <td>{{ p.clientName || '—' }}</td>
                  <td class="preview-mono">{{ p.clientCif || '—' }}</td>
                  <td>{{ p.sharePercentage }}%</td>
                  <td>
                    <span class="preview-badge" [class.preview-badge--yes]="p.isMandatory">
                      {{ p.isMandatory ? 'Mandatory' : 'Optional' }}
                    </span>
                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
        <!-- Signatory Rights -->
        @if (currentAccount?.signatoryRights) {
          <div class="preview-ni-mode">
            <i class="fas fa-how_to_vote"></i>
            <span class="preview-ni-mode__label">Mode of Operation:</span>
            <strong>{{ currentAccount.signatoryRights }}</strong>
          </div>
        }
      </div>
    </div>
  }

  <!-- ══ 8. Digital Facilities ════════════════════════════════════ -->
  @if (hasDigitalSection) {
    <div class="preview-section">
      <div class="preview-section__header">
        <i class="fas fa-mobile-alt preview-section__icon"></i>
        <span class="preview-section__title">Digital Facilities</span>
        <span class="preview-section__badge preview-section__badge--digital">User Configured</span>
      </div>
      <div class="preview-body">
        <div class="preview-digital-grid">
          @for (facility of digitalFacilityLabels; track facility.key) {
            <div class="preview-digital-card" [class.preview-digital-card--on]="digitalFacilityConfig?.[facility.key]">
              <span class="preview-digital-label">{{ facility.label }}</span>
              <span
                class="preview-digital-status"
                [class.preview-digital-status--on]="digitalFacilityConfig?.[facility.key]"
              >
                {{ digitalFacilityConfig?.[facility.key] ? 'Enabled' : 'Disabled' }}
              </span>
            </div>
          }
        </div>
      </div>
    </div>
  }
</div>

<div class="layout-row responsive-column align-center gap-2px margin-t">
  <button mat-raised-button matStepperPrevious>
    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
    {{ 'labels.buttons.Previous' | translate }}
  </button>
  <button mat-raised-button [routerLink]="['../..']">
    {{ 'labels.buttons.Cancel' | translate }}
  </button>
  <button mat-raised-button color="primary" (click)="submitEvent.emit()">
    {{ 'labels.buttons.Submit' | translate }}
  </button>
</div>