cbsnexora/src/app/letter-mgmt/certificates/share-certificate/share-certificate.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">
  <!-- HEADER -->
  <div class="cert-head">
    <div class="cert-head-l">
      <fa-icon icon="certificate" class="cert-head-ic"></fa-icon>
      <div>
        <h2 class="cert-head-t">Share Certificate</h2>
        <div class="cert-head-s">
          Issue, preview and download member share certificates with folio + share-number range.
        </div>
      </div>
    </div>
  </div>

  <!-- KPI STRIP -->
  <div class="cert-kpis">
    <div class="cert-kpi cert-kpi--blue">
      <fa-icon icon="certificate" class="cert-kpi-ic"></fa-icon>
      <div>
        <div class="cert-kpi-n">{{ filteredRecords.length | number }}</div>
        <div class="cert-kpi-l">Certificates</div>
      </div>
    </div>
    <div class="cert-kpi cert-kpi--teal">
      <fa-icon icon="cube" class="cert-kpi-ic"></fa-icon>
      <div>
        <div class="cert-kpi-n">{{ totalShares() | number }}</div>
        <div class="cert-kpi-l">Shares Held</div>
      </div>
    </div>
    <div class="cert-kpi cert-kpi--green">
      <fa-icon icon="coins" class="cert-kpi-ic"></fa-icon>
      <div>
        <div class="cert-kpi-n">₹{{ totalShareValue() | number: '1.0-0' }}</div>
        <div class="cert-kpi-l">Total Face Value</div>
      </div>
    </div>
  </div>

  <!-- FILTERS -->
  <div class="cert-filters">
    <div class="cert-filter">
      <label>Certificate / Folio / Member / PAN</label>
      <div class="cert-input-ic">
        <fa-icon icon="search"></fa-icon>
        <input type="text" [(ngModel)]="search" placeholder="e.g. SC-2024-000123 or member name" />
      </div>
    </div>

    <div class="cert-filter">
      <label>Share class</label>
      <select [(ngModel)]="classFilter">
        <option value="">All classes</option>
        @for (o of classOptions; track o.value) {
          <option [value]="o.value">{{ o.label }}</option>
        }
      </select>
    </div>

    <div class="cert-filter">
      <label>Branch</label>
      <select [(ngModel)]="branchFilter">
        <option value="">All branches</option>
        @for (b of branchOptions; track b) {
          <option [value]="b">{{ b }}</option>
        }
      </select>
    </div>

    @if (search || classFilter || branchFilter) {
      <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>Member · Folio</th>
            <th>Certificate No.</th>
            <th>Class</th>
            <th>Branch</th>
            <th class="num">Shares</th>
            <th class="num">Face Value</th>
            <th class="num">Total</th>
            <th>Share Nos.</th>
            <th>Issued</th>
            <th class="col-actions">Actions</th>
          </tr>
        </thead>
        <tbody>
          @for (r of filteredRecords; track r.certificateNo) {
            <tr>
              <td>
                <div class="cert-cust-name">{{ r.memberName }}</div>
                <div class="mono small muted">
                  {{ r.memberId }} · Folio <span class="cert-folio">{{ r.folioNo }}</span> · PAN {{ r.memberPan }}
                </div>
              </td>
              <td class="mono">{{ r.certificateNo }}</td>
              <td>
                <span
                  class="cert-pill"
                  [class.cert-pill--blue]="r.shareClass === 'ORDINARY'"
                  [class.cert-pill--amber]="r.shareClass === 'PREFERENCE'"
                >
                  {{ classLabel(r.shareClass) }}
                </span>
              </td>
              <td class="small">{{ r.branch }}</td>
              <td class="num">
                <strong class="cert-shares">{{ r.shareCount | number }}</strong>
              </td>
              <td class="num">₹{{ r.faceValue | number: '1.0-0' }}</td>
              <td class="num">
                <strong>₹{{ r.shareCount * r.faceValue | number: '1.0-0' }}</strong>
              </td>
              <td class="mono small">{{ r.shareNoFrom }}&ndash;{{ r.shareNoTo }}</td>
              <td class="small">{{ r.issueDate | date: 'd MMM y' }}</td>
              <td class="col-actions">
                <div class="cert-row-actions">
                  <button
                    type="button"
                    class="cert-icon-btn primary"
                    (click)="viewCertificate(r)"
                    matTooltip="View / Print certificate"
                  >
                    <fa-icon icon="eye"></fa-icon>
                  </button>
                  <button
                    type="button"
                    class="cert-icon-btn"
                    (click)="downloadCertificate(r)"
                    matTooltip="Download PDF"
                  >
                    <fa-icon icon="download"></fa-icon>
                  </button>
                </div>
              </td>
            </tr>
          }
          @if (filteredRecords.length === 0) {
            <tr>
              <td colspan="10" class="cert-empty">
                <fa-icon icon="info-circle"></fa-icon>
                No share certificates match the current filters.
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  </div>
</div>