cbsnexora/src/app/shared/dormancy-alert-panel/dormancy-alert-panel.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/.
-->

@if (shouldShow) {
  <div class="dap" [class]="'dap--' + risk">
    <!-- ══ HEADER ════════════════════════════════════════════════════ -->
    <div class="dap__header">
      <div class="dap__header-left">
        <div class="dap__icon-wrap">
          <i [class]="isProductMode ? 'fas fa-shield-alt' : 'fas fa-exclamation-triangle'"></i>
        </div>
        <div>
          <div class="dap__title">
            {{ isProductMode ? 'Dormancy Monitoring Configuration' : 'Dormancy Risk Monitor' }}
          </div>
          <div class="dap__subtitle">
            @if (isProductMode) {
              Product-level dormancy thresholds applied to this account
            } @else {
              Real-time dormancy tracking · Based on last customer transaction
            }
          </div>
        </div>
      </div>

      <!-- Risk severity badge -->
      <div class="dap__badges">
        <span
          class="dap__risk-badge"
          [class]="'dap__risk-badge--' + risk"
          title="Dormancy risk level based on transaction inactivity"
        >
          <span class="dap__risk-dot"></span>
          @if (isProductMode) {
            Monitoring: {{ riskSeverity }}
          } @else {
            Dormancy Risk: {{ riskSeverity }}
          }
        </span>
        @if (!isProductMode && isMonitoringActive) {
          <span class="dap__monitor-badge"> <i class="fas fa-satellite-dish"></i> Monitoring Active </span>
        }
      </div>
    </div>

    <!-- ══ METRIC CARDS ════════════════════════════════════════════ -->
    <div class="dap__cards" [class.dap__cards--product]="isProductMode">
      @if (isProductMode) {
        <!-- ── PRODUCT MODE CARDS ─────────────────────────────────── -->

        <!-- Account Status -->
        <div class="dap__card">
          <span class="dap__card-label">Account Status</span>
          <span class="dap__pill dap__pill--green"> <i class="fas fa-check-circle"></i> New Account </span>
          <span class="dap__card-hint">No transactions yet</span>
        </div>

        <!-- Monitoring Status -->
        <div class="dap__card">
          <span class="dap__card-label">
            Dormancy Monitoring
            <i
              class="fas fa-info-circle dap__help"
              title="When enabled, the system tracks transaction activity and alerts on inactivity"
            ></i>
          </span>
          <span class="dap__pill" [class]="isMonitoringActive ? 'dap__pill--green' : 'dap__pill--gray'">
            <i [class]="isMonitoringActive ? 'fas fa-satellite-dish' : 'fas fa-ban'"></i>
            {{ isMonitoringActive ? 'Enabled' : 'Disabled' }}
          </span>
          <span class="dap__card-hint">{{
            isMonitoringActive ? 'Transaction activity tracked' : 'Not configured'
          }}</span>
        </div>

        <!-- Alert Notification -->
        <div class="dap__card">
          <span class="dap__card-label">
            Alert Notifications
            <i
              class="fas fa-info-circle dap__help"
              title="Sends alerts to branch officers when account approaches dormancy threshold"
            ></i>
          </span>
          <span class="dap__pill" [class]="isAlertEnabled ? 'dap__pill--green' : 'dap__pill--gray'">
            <i [class]="isAlertEnabled ? 'fas fa-bell' : 'fas fa-bell-slash'"></i>
            {{ isAlertEnabled ? 'Enabled' : 'Disabled' }}
          </span>
          <span class="dap__card-hint">{{ isAlertEnabled ? 'Branch will be notified' : 'No alerts configured' }}</span>
        </div>

        <!-- Inactive Threshold -->
        <div class="dap__card">
          <span class="dap__card-label">
            Inactive Threshold
            <i
              class="fas fa-info-circle dap__help"
              title="Account is flagged inactive after this many days of no customer-initiated transaction"
            ></i>
          </span>
          @if (daysToInactive !== null) {
            <span class="dap__number"> {{ daysToInactive }}<small>days</small> </span>
            <span class="dap__card-hint">No transaction for {{ daysToInactive }} days</span>
          } @else {
            <span class="dap__na">Not configured</span>
          }
        </div>

        <!-- Dormancy Threshold -->
        <div class="dap__card">
          <span class="dap__card-label">
            Dormancy Threshold
            <i
              class="fas fa-info-circle dap__help"
              title="Account is classified dormant after this many additional days following inactive status"
            ></i>
          </span>
          @if (daysToDormancy !== null) {
            <span class="dap__number">{{ daysToDormancy }}<small>days</small></span>
            <span class="dap__card-hint">{{ daysToDormancy }} days after inactive</span>
          } @else {
            <span class="dap__na">Not configured</span>
          }
        </div>

        <!-- Escheat Threshold -->
        <div class="dap__card">
          <span class="dap__card-label">
            Escheat Threshold
            <i
              class="fas fa-info-circle dap__help"
              title="Unclaimed funds transferred to government/regulator after this many days of dormancy"
            ></i>
          </span>
          @if (daysToEscheat !== null) {
            <span class="dap__number">{{ daysToEscheat }}<small>days</small></span>
            <span class="dap__card-hint">{{ daysToEscheat }} days after dormant</span>
          } @else {
            <span class="dap__na">Not configured</span>
          }
        </div>
      } @else {
        <!-- ── ACCOUNT VIEW MODE CARDS ────────────────────────────── -->

        <!-- Account Status -->
        <div class="dap__card">
          <span class="dap__card-label">Account Status</span>
          <span class="dap__pill" [class]="'dap__pill--' + risk">
            <i class="fas fa-circle"></i> {{ statusLabel }}
          </span>
          <span class="dap__card-hint">
            @if (statusId === 0) {
              Currently active
            }
            @if (statusId === 100) {
              No recent transactions
            }
            @if (statusId === 200) {
              Classified as dormant
            }
            @if (statusId === 300) {
              Pending regulatory transfer
            }
          </span>
        </div>

        <!-- Last Transaction -->
        <div class="dap__card">
          <span class="dap__card-label">Last Transaction</span>
          @if (lastTxnDate) {
            <span class="dap__date"><i class="fas fa-calendar-check"></i> {{ lastTxnDate }}</span>
            <span class="dap__card-hint">Most recent customer activity</span>
          } @else if (accountOpenedDate) {
            <span class="dap__date dap__date--muted"><i class="fas fa-calendar-plus"></i> {{ accountOpenedDate }}</span>
            <span class="dap__card-hint">Account opened · No transactions yet</span>
          } @else {
            <span class="dap__na">No transactions yet</span>
          }
        </div>

        <!-- Days to Inactive -->
        <div class="dap__card">
          <span class="dap__card-label">
            Days to Inactive
            <i
              class="fas fa-info-circle dap__help"
              title="Account will be flagged inactive after no customer-initiated transaction for this duration"
            ></i>
          </span>
          @if (statusId >= 100) {
            <span class="dap__reached"><i class="fas fa-flag"></i> Threshold Reached</span>
            <span class="dap__card-hint">Account is inactive</span>
          } @else if (daysToInactive !== null) {
            <span class="dap__number" [class.dap__number--warn]="daysToInactive <= 30">
              {{ daysToInactive }}<small>days</small>
            </span>
            <span class="dap__card-hint">{{ inactiveSubtext() }}</span>
          } @else {
            <span class="dap__na">—</span>
          }
        </div>

        <!-- Days to Dormant -->
        <div class="dap__card">
          <span class="dap__card-label">
            Days to Dormant
            <i
              class="fas fa-info-circle dap__help"
              title="Dormant classification per RBI guidelines after prolonged inactivity"
            ></i>
          </span>
          @if (statusId >= 200) {
            <span class="dap__reached"><i class="fas fa-flag"></i> Threshold Reached</span>
            <span class="dap__card-hint">Account is dormant</span>
          } @else if (daysToDormancy !== null) {
            <span class="dap__number" [class.dap__number--warn]="daysToDormancy <= 30">
              {{ daysToDormancy }}<small>days</small>
            </span>
            <span class="dap__card-hint">{{ dormancySubtext() }}</span>
          } @else {
            <span class="dap__na">—</span>
          }
        </div>

        <!-- Days to Escheat -->
        <div class="dap__card">
          <span class="dap__card-label">
            Days to Escheat
            <i
              class="fas fa-info-circle dap__help"
              title="Unclaimed funds transferred to government if account remains dormant beyond this period"
            ></i>
          </span>
          @if (statusId >= 300) {
            <span class="dap__reached"><i class="fas fa-flag"></i> Threshold Reached</span>
            <span class="dap__card-hint">Pending regulatory transfer</span>
          } @else if (daysToEscheat !== null) {
            <span class="dap__number" [class.dap__number--warn]="daysToEscheat <= 30">
              {{ daysToEscheat }}<small>days</small>
            </span>
            <span class="dap__card-hint">{{ escheatSubtext() }}</span>
          } @else {
            <span class="dap__na">—</span>
          }
        </div>
      }
    </div>

    <!-- ══ DORMANCY PROGRESSION TIMELINE ══════════════════════════ -->
    <div class="dap__timeline">
      <div class="dap__tl-header">
        <span class="dap__tl-label">Dormancy Progression</span>
        @if (!isProductMode) {
          <span class="dap__tl-note">Timeline based on last customer transaction</span>
        }
      </div>

      <div class="dap__tl-track">
        <!-- Active node (always reached) -->
        <div class="dap__tl-node" [class.dap__tl-node--current]="statusId === 0" [class.dap__tl-node--reached]="true">
          <div class="dap__tl-circle dap__tl-circle--done">
            <i class="fas fa-check"></i>
          </div>
          <span class="dap__tl-name">Active</span>
          <span class="dap__tl-sub">Normal</span>
        </div>

        @for (step of timelineSteps; track step.label) {
          <div class="dap__tl-line" [class.dap__tl-line--done]="step.reached"></div>
          <div
            class="dap__tl-node"
            [class.dap__tl-node--current]="step.current"
            [class.dap__tl-node--reached]="step.reached"
          >
            <div
              class="dap__tl-circle"
              [class.dap__tl-circle--done]="step.reached && !step.current"
              [class.dap__tl-circle--current]="step.current"
              [class.dap__tl-circle--pending]="!step.reached"
            >
              @if (step.reached && !step.current) {
                <i class="fas fa-check"></i>
              } @else if (step.current) {
                <i class="fas fa-circle"></i>
              } @else {
                <i class="far fa-circle"></i>
              }
            </div>
            <span class="dap__tl-name" [title]="step.tooltip">
              {{ step.label }}
              <i class="fas fa-info-circle dap__tl-info"></i>
            </span>
            @if (!step.reached && step.days !== null) {
              <span class="dap__tl-days">{{ step.days }}d</span>
            } @else if (step.reached) {
              <span class="dap__tl-reached-tag">Reached</span>
            }
          </div>
        }
      </div>
    </div>
  </div>
}