cbsnexora/src/app/fd-dashboard/fd-dashboard.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="fdd-container">
  <!-- Compact Light Header -->
  <div class="fdd-header">
    <div class="fdd-header__left">
      <div class="fdd-header__icon">
        <fa-icon icon="piggy-bank"></fa-icon>
      </div>
      <div>
        <div class="fdd-header__title-row">
          <h2 class="fdd-header__title">FD Dashboard & Maturity Ladder</h2>
          <span class="fdd-header__badge">Core Banking</span>
        </div>
        <p class="fdd-header__sub">
          Active Fixed Deposits positioned against maturity dates. Press <kbd>ESC</kbd> to toggle header & footer.
        </p>
      </div>
    </div>
    <div class="fdd-header__right">
      <button class="fdd-btn fdd-btn--slim" (click)="load()" [disabled]="loading" title="Refresh maturity ladder data">
        <fa-icon icon="sync-alt" [class.fa-spin]="loading"></fa-icon>
        <span>{{ loading ? 'Syncing...' : 'Reload' }}</span>
      </button>
    </div>
  </div>

  <!-- Alerts -->
  @if (errorMessage) {
    <div class="fdd-alert fdd-alert--danger">
      <fa-icon icon="exclamation-triangle"></fa-icon>
      <span>{{ errorMessage }}</span>
    </div>
  }

  <!-- Compact Stat Cards Grid -->
  <div class="fdd-stats-grid">
    @for (key of stageKeys; track key) {
      <button
        [class]="'fdd-stat-card fdd-stat-card--' + stageMeta[key].tone"
        [class.fdd-stat-card--active]="stageFilter === key"
        (click)="toggleStage(key)"
      >
        <div class="fdd-stat-card__header">
          <span class="fdd-stat-card__label">{{ stageMeta[key].label }}</span>
          <div class="fdd-stat-card__icon">
            @switch (key) {
              @case ('MATURED') {
                <fa-icon icon="exclamation-circle"></fa-icon>
              }
              @case ('DUE_SOON') {
                <fa-icon icon="clock"></fa-icon>
              }
              @case ('UPCOMING') {
                <fa-icon icon="calendar-alt"></fa-icon>
              }
              @default {
                <fa-icon icon="check-circle"></fa-icon>
              }
            }
          </div>
        </div>

        <div class="fdd-stat-card__val">
          @switch (key) {
            @case ('MATURED') {
              {{ summary.matured }}
            }
            @case ('DUE_SOON') {
              {{ summary.dueSoon }}
            }
            @case ('UPCOMING') {
              {{ summary.upcoming }}
            }
            @default {
              {{ summary.onTrack }}
            }
          }
        </div>
        <div class="fdd-stat-card__sub">{{ stageMeta[key].summary }}</div>
      </button>
    }
  </div>

  <!-- Compact Filter & Search Toolbar -->
  <div class="fdd-toolbar">
    <div class="fdd-search-box">
      <fa-icon icon="search" class="fdd-search-box__icon"></fa-icon>
      <input
        class="fdd-search-box__input"
        type="text"
        placeholder="Search account no. or client name..."
        [(ngModel)]="search"
      />
      @if (search) {
        <button class="fdd-search-box__clear" (click)="search = ''" title="Clear search">
          <fa-icon icon="times"></fa-icon>
        </button>
      }
    </div>

    @if (stageFilter || search) {
      <button class="fdd-btn fdd-btn--reset fdd-btn--slim" (click)="resetFilters()">
        <fa-icon icon="undo"></fa-icon> Reset
      </button>
    }

    <div class="fdd-toolbar__spacer"></div>

    <div class="fdd-count-chip">
      <fa-icon icon="layer-group"></fa-icon>
      <span
        ><strong>{{ visibleRows.length }}</strong> of {{ summary.total }} active FDs</span
      >
    </div>
  </div>

  <!-- Worklist Table / Empty State -->
  @if (loading) {
    <div class="fdd-card fdd-state-card">
      <fa-icon icon="spinner" [class.fa-spin]="true" class="fdd-spinner"></fa-icon>
      <p>Loading FD maturity list...</p>
    </div>
  } @else if (visibleRows.length === 0) {
    <div class="fdd-card fdd-state-card">
      <fa-icon icon="inbox" class="fdd-state-icon"></fa-icon>
      <p class="fdd-state-msg">
        @if (!stageFilter && summary.total > 0) {
          No FDs are matured or maturing within {{ policy.upcomingDays }} days. Click "On Track" to see all active FDs.
        } @else {
          No FDs match these filters.
        }
      </p>
      @if (stageFilter || search) {
        <button class="fdd-btn fdd-btn--primary fdd-btn--slim" (click)="resetFilters()">
          <fa-icon icon="undo"></fa-icon> Clear Filters
        </button>
      }
    </div>
  } @else {
    <div class="fdd-table-card">
      <div class="fdd-table-wrapper">
        <table class="fdd-table">
          <thead>
            <tr>
              <th>Account</th>
              <th>Client</th>
              <th>Product</th>
              <th>Maturity Date</th>
              <th class="text-right">Deposit Amount</th>
              <th class="text-right">Maturity Amount</th>
              <th>Status</th>
              <th class="text-center">Action</th>
            </tr>
          </thead>
          <tbody>
            @for (r of visibleRows; track r.id) {
              <tr class="fdd-row" (click)="openAccount(r)">
                <td>
                  <span class="fdd-acc-num">{{ r.accountNo || '—' }}</span>
                </td>

                <td>
                  <div class="fdd-client-cell">
                    <span class="fdd-client-name">{{ r.clientName }}</span>
                  </div>
                </td>

                <td>
                  <span class="fdd-product-tag">{{ r.productName }}</span>
                </td>

                <td>
                  <div class="fdd-date-cell">
                    <span class="fdd-date-val">{{ r.maturityDate }}</span>
                    <span class="fdd-date-sub" [class.fdd-date-sub--overdue]="r.daysOverdue > 0">
                      {{ maturityText(r) }}
                    </span>
                  </div>
                </td>

                <td class="text-right">
                  <span class="fdd-amount fdd-amount--deposit">
                    {{ r.depositAmount != null ? '₹' + (r.depositAmount | number: '1.2-2') : '—' }}
                  </span>
                </td>

                <td class="text-right">
                  <span class="fdd-amount fdd-amount--maturity">
                    {{ r.maturityAmount != null ? '₹' + (r.maturityAmount | number: '1.2-2') : '—' }}
                  </span>
                </td>

                <td>
                  <div class="fdd-status-cell">
                    <span [class]="stageClass(r.stage)">
                      {{ r.meta.label }}
                    </span>
                    @if (r.renewable) {
                      <div
                        class="fdd-grace-sub"
                        [class.fdd-grace-sub--warning]="r.renewalGracePeriodDays > 0 && !r.withinGraceWindow"
                      >
                        {{ graceStatusText(r) }}
                      </div>
                    } @else if (r.configuredInstructionLabel) {
                      <div class="fdd-grace-sub">Configured: {{ r.configuredInstructionLabel }} (auto-processes)</div>
                    }
                  </div>
                </td>

                <td class="fdd-act-cell text-center" (click)="$event.stopPropagation()">
                  @if (r.renewable) {
                    <button class="fdd-btn fdd-btn--action" [disabled]="renewing === r.id" (click)="openRenewDialog(r)">
                      @if (renewing === r.id) {
                        <fa-icon icon="spinner" [class.fa-spin]="true"></fa-icon> Renewing...
                      } @else {
                        <fa-icon icon="sync-alt"></fa-icon> Renew
                      }
                    </button>
                  } @else {
                    <button class="fdd-btn-icon" (click)="openAccount(r)" title="View Account Details">
                      <fa-icon icon="chevron-right"></fa-icon>
                    </button>
                  }
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>
  }
</div>