cbsnexora/src/app/tasks/checker-inbox-and-tasks-tabs/pending-savings-account-edits/pending-savings-account-edits.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="psae-tab-content">
  @if (showData) {
    <div class="psae-action-bar">
      <mat-form-field appearance="outline" class="psae-search-field">
        <mat-icon matPrefix>search</mat-icon>
        <input #filterInput matInput placeholder="Search by account number" (keyup)="applyFilter(filterInput.value)" />
      </mat-form-field>
    </div>

    <div class="table-container">
      <table mat-table [dataSource]="dataSource" class="modern-table">
        <ng-container matColumnDef="accountNo">
          <th mat-header-cell *matHeaderCellDef>Account No.</th>
          <td mat-cell *matCellDef="let edit">{{ edit.accountNo }}</td>
        </ng-container>

        <ng-container matColumnDef="accountType">
          <th mat-header-cell *matHeaderCellDef>Account Type</th>
          <td mat-cell *matCellDef="let edit">
            <span
              class="status-badge"
              [class.status-badge--savings]="edit.accountType === 'Savings'"
              [class.status-badge--current]="edit.accountType === 'Current'"
              [class.status-badge--fd]="edit.accountType === 'Fixed Deposit'"
              [class.status-badge--rd]="edit.accountType === 'Recurring Deposit'"
            >
              {{ edit.accountType }}
            </span>
          </td>
        </ng-container>

        <ng-container matColumnDef="makerUsername">
          <th mat-header-cell *matHeaderCellDef>Submitted By</th>
          <td mat-cell *matCellDef="let edit">{{ edit.makerUsername }}</td>
        </ng-container>

        <ng-container matColumnDef="createdOn">
          <th mat-header-cell *matHeaderCellDef>Submitted On</th>
          <td mat-cell *matCellDef="let edit">{{ formatDate(edit.createdOn) }}</td>
        </ng-container>

        <ng-container matColumnDef="holdAmount">
          <th mat-header-cell *matHeaderCellDef>Hold Amount</th>
          <td mat-cell *matCellDef="let edit">
            @if (edit.holdAmount) {
              <span class="status-badge status-badge--hold">{{ edit.holdAmount }}</span>
            } @else {
              &mdash;
            }
          </td>
        </ng-container>

        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef>Status</th>
          <td mat-cell *matCellDef="let edit">
            <span class="status-badge status-badge--pending">{{ edit.status }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>Actions</th>
          <td mat-cell *matCellDef="let edit">
            <button mat-stroked-button class="psae-btn psae-btn-view" (click)="viewCompare(edit)">
              <fa-icon icon="eye" class="m-r-10"></fa-icon>Compare
            </button>
            <button mat-stroked-button class="psae-btn psae-btn-approve" (click)="approve(edit)">
              <fa-icon icon="check" class="m-r-10"></fa-icon>Approve
            </button>
            <button mat-stroked-button class="psae-btn psae-btn-reject" (click)="reject(edit)">
              <fa-icon icon="ban" class="m-r-10"></fa-icon>Reject
            </button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns" class="table-row"></tr>
      </table>
    </div>

    @if (selectedEdit) {
      <div class="psae-diff-panel">
        <div class="psae-diff-header">
          <h3>Proposed Changes &mdash; Account "{{ selectedEdit.accountNo }}"</h3>
          <button mat-icon-button (click)="closeCompare()"><fa-icon icon="times"></fa-icon></button>
        </div>

        @if (selectedEdit.facilityConfigSubmitted) {
          <div class="psae-diff-block">
            <h4>Digital &amp; Account Features</h4>
            <table class="psae-diff-table">
              <thead>
                <tr>
                  <th>Feature</th>
                  <th>Proposed Value</th>
                </tr>
              </thead>
              <tbody>
                @for (row of entries(selectedEdit.proposedFacilityConfig); track row.key) {
                  <tr>
                    <td class="psae-diff-label">{{ row.key }}</td>
                    <td class="psae-diff-proposed">{{ row.value }}</td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        }

        @if (selectedEdit.nomineeSubmitted) {
          <div class="psae-diff-block">
            <h4>Nominee Change</h4>
            <table class="psae-diff-table">
              <thead>
                <tr>
                  <th>Field</th>
                  <th>Proposed Value</th>
                </tr>
              </thead>
              <tbody>
                @for (row of entries(selectedEdit.proposedNominee); track row.key) {
                  <tr>
                    <td class="psae-diff-label">{{ row.key }}</td>
                    <td class="psae-diff-proposed">{{ row.value }}</td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        }

        @if (!selectedEdit.facilityConfigSubmitted && !selectedEdit.nomineeSubmitted) {
          <p class="psae-diff-loading">No proposed changes recorded on this edit.</p>
        }

        @if (selectedEdit.rejectReason) {
          <p class="psae-reject-reason"><strong>Reject Reason:</strong> {{ selectedEdit.rejectReason }}</p>
        }
      </div>
    }
  }

  @if (!showData) {
    <div class="empty-state">
      <fa-icon icon="hourglass-half" class="empty-icon"></fa-icon>
      <p class="empty-title">No pending account edits</p>
      <p class="empty-text">There are no Nominee / Digital-Feature edits awaiting approval at this time.</p>
    </div>
  }
</div>