cbsnexora/src/app/shares/reports/share-payment-certificate/share-payment-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">
  <div class="cert-head srep-no-print">
    <div class="cert-head-l">
      <fa-icon icon="file-signature" class="cert-head-ic"></fa-icon>
      <div>
        <h2 class="cert-head-t">Share Payment Certificate</h2>
        <div class="cert-head-s">Proof of what a member paid for their shares, and against which receipt.</div>
      </div>
    </div>
    <div class="cert-head-r">
      <button class="cert-cta-btn" (click)="print()" [disabled]="!account">
        <fa-icon icon="print"></fa-icon> Print Certificate
      </button>
    </div>
  </div>

  <div class="cert-filters srep-no-print">
    <div class="cert-filter" style="flex: 2 1 340px; position: relative">
      <label>Share account</label>
      <div class="cert-input-ic">
        <fa-icon icon="search"></fa-icon>
        <input
          type="text"
          [ngModel]="accountSearch"
          (ngModelChange)="onAccountSearch($event)"
          placeholder="Search member name or share account number"
        />
      </div>
      @if (accountOptions.length && !selectedAccountId) {
        <div class="srep-picker">
          @for (opt of accountOptions; track opt.id) {
            <button type="button" class="srep-picker-item" (click)="selectAccount(opt)">
              <span class="srep-picker-name">{{ opt.clientName }}</span>
              <span class="srep-picker-meta srep-mono">{{ opt.accountNo }}</span>
              <span class="srep-picker-meta">{{ opt.productName }}</span>
            </button>
          }
        </div>
      }
    </div>
  </div>

  @if (!selectedAccountId) {
    <div class="srep-state">Search for a member or share account above to issue a payment certificate.</div>
  } @else if (loading) {
    <div class="srep-state">Loading payment record…</div>
  } @else if (loadError) {
    <div class="srep-state srep-state--error"><fa-icon icon="exclamation-circle"></fa-icon> {{ loadError }}</div>
  } @else if (account) {
    <!-- The certificate itself. Everything above is the picker; this is what prints. -->
    <div class="spc-doc">
      <div class="spc-letterhead">
        <div class="spc-org">{{ institution?.name || institution?.institutionName || 'Co-operative Bank' }}</div>
        @if (institution?.addressLine1 || institution?.address) {
          <div class="spc-org-sub">{{ institution?.addressLine1 || institution?.address }}</div>
        }
        <div class="spc-title">Share Payment Certificate</div>
      </div>

      <div class="spc-body">
        <p>
          This is to certify that <b>{{ account.clientName }}</b>
          @if (account.cifNumber) {
            (Membership No. <b class="srep-mono">{{ account.cifNumber }}</b
            >)
          }
          @if (account.officeName) {
            of our <b>{{ account.officeName }}</b> branch
          }
          has paid the amounts set out below towards
          <b>{{ totals?.sharesPaidFor | number }}</b> shares of <b>{{ account.productName }}</b> at ₹{{
            account.unitPrice | number: '1.2-2'
          }}
          each, held under share account <b class="srep-mono">{{ account.accountNo }}</b
          >.
        </p>
      </div>

      <div class="srep-table-wrap">
        <table class="srep-table">
          <thead>
            <tr>
              <th>Payment Date</th>
              <th class="srep-num">Shares</th>
              <th class="srep-num">Unit Price</th>
              <th class="srep-num">Amount Paid</th>
              <th>Paid By</th>
              <th>Receipt / Voucher</th>
              <th>Board Resolution</th>
            </tr>
          </thead>
          <tbody>
            @for (p of payments; track p.transactionId) {
              <tr>
                <td>{{ p.paymentDate }}</td>
                <td class="srep-num">{{ p.shares | number }}</td>
                <td class="srep-num">{{ p.unitPrice | number: '1.2-2' }}</td>
                <td class="srep-num">₹{{ p.amount | number: '1.2-2' }}</td>
                <td>{{ funding(p.fundingSource) }}</td>
                <td class="srep-mono">
                  {{ receiptRef(p) }}
                  @if (p.receiptDate) {
                    <div class="srep-scope-note" style="margin: 0">{{ p.receiptDate }}</div>
                  }
                </td>
                <td class="srep-mono">{{ p.resolutionNumber || '—' }}</td>
              </tr>
            }
            @for (c of charges; track c.chargeName) {
              <tr>
                <td>—</td>
                <td class="srep-num">—</td>
                <td class="srep-num">—</td>
                <td class="srep-num">₹{{ c.amountPaid | number: '1.2-2' }}</td>
                <td colspan="3">{{ c.chargeName }} (entry fee)</td>
              </tr>
            }
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3">Total paid</td>
              <td class="srep-num">₹{{ totals?.totalPaid | number: '1.2-2' }}</td>
              <td colspan="3"></td>
            </tr>
          </tfoot>
        </table>
      </div>

      @if (amountInWords) {
        <div class="spc-words">
          Amount in words: <b>{{ amountInWords }}</b>
        </div>
      }

      <div class="spc-foot">
        <div class="spc-foot-l">
          <div>
            Date of issue: <b>{{ today }}</b>
          </div>
          <div class="srep-scope-note" style="margin-top: 4px">
            Account status: {{ statusLabel(account.statusEnum) }}. Shares currently held:
            {{ account.sharesHeld | number }}.
          </div>
        </div>
        <div class="spc-sign">
          <div class="spc-sign-line"></div>
          <div>Authorised Signatory</div>
        </div>
      </div>
    </div>
  }
</div>