cbsnexora/src/app/letter-mgmt/certificates/share-certificate/real-share-accounts-view/real-share-accounts-view.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="rsad-root">
  @if (loading) {
    <div class="rsad-state">
      <fa-icon icon="spinner" class="rsad-state-ic fa-spin"></fa-icon>
      Loading real share accounts&hellip;
    </div>
  } @else if (loadError) {
    <div class="rsad-state rsad-state--error">
      <fa-icon icon="exclamation-triangle" class="rsad-state-ic"></fa-icon>
      Could not load share accounts from the server.
      <button type="button" class="cert-clear" (click)="retry()"><fa-icon icon="redo"></fa-icon> Retry</button>
    </div>
  } @else if (rows.length === 0) {
    <div class="rsad-state">
      <fa-icon icon="info-circle" class="rsad-state-ic"></fa-icon>
      No share accounts found in m_share_account yet.
    </div>
  } @else {
    <!-- 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">{{ filteredRows.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. 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 (row of filteredRows; track row.record.certificateNo) {
              <tr>
                <td>
                  <div class="cert-cust-name">{{ row.record.memberName }}</div>
                  <div class="mono small muted">
                    {{ row.record.memberId }} · Folio <span class="cert-folio">{{ row.record.folioNo }}</span> · PAN
                    {{ row.record.memberPan }}
                  </div>
                </td>
                <td class="mono">{{ row.record.certificateNo }}</td>
                <td>
                  <span
                    class="cert-pill"
                    [class.cert-pill--blue]="row.record.shareClass === 'ORDINARY'"
                    [class.cert-pill--amber]="row.record.shareClass === 'PREFERENCE'"
                  >
                    {{ classLabel(row.record.shareClass) }}
                  </span>
                </td>
                <td class="small">{{ row.record.branch || '—' }}</td>
                <td class="num">
                  <strong class="cert-shares">{{ row.record.shareCount | number }}</strong>
                </td>
                <td class="num">₹{{ row.record.faceValue | number: '1.0-0' }}</td>
                <td class="num">
                  <strong>₹{{ row.record.shareCount * row.record.faceValue | number: '1.0-0' }}</strong>
                </td>
                <td class="mono small">
                  {{ row.record.shareNoFrom | number }}&ndash;{{ row.record.shareNoTo | number }}
                </td>
                <td class="small">{{ row.record.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(row)"
                      matTooltip="View / Print certificate"
                    >
                      <fa-icon icon="eye"></fa-icon>
                    </button>
                    <button
                      type="button"
                      class="cert-icon-btn"
                      (click)="downloadCertificate(row)"
                      matTooltip="Download PDF"
                    >
                      <fa-icon icon="download"></fa-icon>
                    </button>
                  </div>
                </td>
              </tr>
            }
            @if (filteredRows.length === 0) {
              <tr>
                <td colspan="10" class="cert-empty">
                  <fa-icon icon="info-circle"></fa-icon>
                  No share accounts match the current filters.
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>
  }
</div>