cbsnexora/src/app/letter-mgmt/certificates/noc/noc.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="cert-root">
  <div class="cert-head">
    <div class="cert-head-l">
      <fa-icon icon="id-card" class="cert-head-ic"></fa-icon>
      <div>
        <h2 class="cert-head-t">No-Objection Certificate (NOC)</h2>
        <div class="cert-head-s">
          Issue NOCs for closed loan accounts — releases the bank's lien on hypothecated assets (vehicles, property,
          gold) or confirms unsecured-loan closure.
        </div>
      </div>
    </div>
  </div>

  <!-- KPI strip -->
  <div class="cert-kpis">
    <div class="cert-kpi cert-kpi--green">
      <fa-icon icon="check-circle" class="cert-kpi-ic"></fa-icon>
      <div>
        <div class="cert-kpi-n">{{ countIssued() | number }}</div>
        <div class="cert-kpi-l">NOCs Issued</div>
      </div>
    </div>
    <div class="cert-kpi cert-kpi--blue">
      <fa-icon icon="paper-plane" class="cert-kpi-ic"></fa-icon>
      <div>
        <div class="cert-kpi-n">{{ countReady() | number }}</div>
        <div class="cert-kpi-l">Ready to Issue</div>
      </div>
    </div>
    <div class="cert-kpi cert-kpi--amber">
      <fa-icon icon="hourglass-half" class="cert-kpi-ic"></fa-icon>
      <div>
        <div class="cert-kpi-n">{{ countPending() | number }}</div>
        <div class="cert-kpi-l">Pending Closure</div>
      </div>
    </div>
  </div>

  <!-- Filters -->
  <div class="cert-filters">
    <div class="cert-filter">
      <label>NOC / A/C / Customer / Asset</label>
      <div class="cert-input-ic">
        <fa-icon icon="search"></fa-icon>
        <input type="text" [(ngModel)]="search" placeholder="e.g. NOC-2024-005012, KA-01-MZ-4421 or customer name" />
      </div>
    </div>

    <div class="cert-filter">
      <label>Loan type</label>
      <select [(ngModel)]="loanTypeFilter">
        <option value="">All types</option>
        @for (o of loanTypeOptions; track o.value) {
          <option [value]="o.value">{{ o.label }}</option>
        }
      </select>
    </div>

    <div class="cert-filter">
      <label>Status</label>
      <select [(ngModel)]="statusFilter">
        <option value="">All statuses</option>
        <option value="ISSUED">Issued</option>
        <option value="READY_TO_ISSUE">Ready to issue</option>
        <option value="PENDING">Pending closure</option>
      </select>
    </div>

    @if (search || loanTypeFilter || statusFilter) {
      <button type="button" class="cert-clear" (click)="clearFilters()"><fa-icon icon="times"></fa-icon> Clear</button>
    }
  </div>

  <!-- Table -->
  <div class="cert-card">
    <div class="cert-table-wrap">
      <table class="cert-table">
        <thead>
          <tr>
            <th>Customer · Loan A/C</th>
            <th>NOC No.</th>
            <th>Loan Type</th>
            <th>Asset / Identifier</th>
            <th class="num">Total Paid</th>
            <th>Closure</th>
            <th>Status</th>
            <th class="col-actions">Actions</th>
          </tr>
        </thead>
        <tbody>
          @for (r of filteredRecords; track r.nocNo) {
            <tr>
              <td>
                <div class="cert-cust-name">{{ r.customerName }}</div>
                <div class="mono small muted">{{ r.accountNo }} · {{ r.customerId }} · PAN {{ r.customerPan }}</div>
              </td>
              <td class="mono">{{ r.nocNo }}</td>
              <td>
                <span class="cert-pill cert-pill--type">{{ loanTypeLabel(r.loanType) }}</span>
                <div class="small muted">Sanctioned ₹{{ r.sanctionedAmount | number: '1.0-0' }}</div>
              </td>
              <td>
                @if (r.assetType !== 'NONE') {
                  <div>{{ r.assetDescription }}</div>
                  <div class="mono small muted">{{ r.assetIdentifier }}</div>
                } @else {
                  <span class="muted small">Unsecured · no asset</span>
                }
              </td>
              <td class="num">
                <strong>₹{{ r.totalPaid | number: '1.0-0' }}</strong>
              </td>
              <td class="small">
                @if (r.closureDate) {
                  {{ r.closureDate | date: 'd MMM y' }}
                } @else {
                  <span class="muted">—</span>
                }
              </td>
              <td>
                @if (r.status === 'ISSUED') {
                  <span class="cert-pill cert-pill--green"> <fa-icon icon="check-circle"></fa-icon> Issued </span>
                  @if (r.issuedOn) {
                    <div class="mono small muted">{{ r.issuedOn | date: 'd MMM y' }}</div>
                  }
                } @else if (r.status === 'READY_TO_ISSUE') {
                  <span class="cert-pill cert-pill--blue"> <fa-icon icon="paper-plane"></fa-icon> Ready to issue </span>
                } @else {
                  <span class="cert-pill cert-pill--amber">
                    <fa-icon icon="hourglass-half"></fa-icon> Pending closure
                  </span>
                }
              </td>
              <td class="col-actions">
                <div class="cert-row-actions">
                  <button
                    type="button"
                    class="cert-icon-btn primary"
                    [disabled]="r.status === 'PENDING'"
                    (click)="viewCertificate(r)"
                    matTooltip="View / Print NOC"
                  >
                    <fa-icon icon="eye"></fa-icon>
                  </button>
                  <button
                    type="button"
                    class="cert-icon-btn"
                    [disabled]="r.status === 'PENDING'"
                    (click)="downloadCertificate(r)"
                    matTooltip="Download PDF"
                  >
                    <fa-icon icon="download"></fa-icon>
                  </button>
                </div>
              </td>
            </tr>
          }
          @if (filteredRecords.length === 0) {
            <tr>
              <td colspan="8" class="cert-empty">
                <fa-icon icon="info-circle"></fa-icon>
                No NOCs match the current filters.
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  </div>
</div>