cbsnexora/src/app/tasks/checker-inbox-and-tasks-tabs/share-addition-requests/share-addition-request-detail-dialog/share-addition-request-detail-dialog.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/.
-->

<h2 mat-dialog-title>Additional Share Request</h2>

<mat-dialog-content class="sard-content">
  @if (loading) {
    <div class="sard-loading">
      <mat-spinner diameter="28"></mat-spinner>
      <span>Loading request…</span>
    </div>
  } @else if (!detail) {
    <div class="sard-error">{{ errorMsg }}</div>
  } @else {
    <div class="sard-grid">
      <div class="sard-row">
        <span>Client</span>
        <span>{{ detail.clientName }}</span>
      </div>
      <div class="sard-row">
        <span>Share account</span>
        <span class="mono">{{ detail.accountNo }} — {{ detail.productName }}</span>
      </div>
      <div class="sard-row">
        <span>Office</span>
        <span>{{ detail.officeName }}</span>
      </div>
      <div class="sard-row">
        <span>Requested shares</span>
        <span>{{ detail.totalShares }} @ {{ detail.unitPrice | number: '1.2-2' }}</span>
      </div>
      <div class="sard-row sard-row--total">
        <span>Amount</span>
        <span>{{ detail.amount | number: '1.2-2' }}</span>
      </div>
      @if (detail.chargeAmount > 0) {
        <div class="sard-row">
          <span>Entry fee</span>
          <span>{{ detail.chargeAmount | number: '1.2-2' }}</span>
        </div>
      }
      <div class="sard-row">
        <span>Board resolution</span>
        <span>{{ detail.resolutionNumber || '—' }}</span>
      </div>
      <div class="sard-row">
        <span>Meeting date</span>
        <span>{{ detail.meetingDate || '—' }}</span>
      </div>
      <div class="sard-row">
        <span>Requested on</span>
        <span>{{ detail.transactionDate }}</span>
      </div>
    </div>

    <div class="sard-funding">
      <div class="sard-funding-label">How it was funded</div>

      @if (detail.fundingSource === 'CASH') {
        @if (voucherCount > 0) {
          <table class="sard-voucher-table">
            <thead>
              <tr>
                <th class="ta-left">Voucher / Receipt</th>
                <th class="ta-left">Date</th>
                <th class="ta-left">Description</th>
                <th class="ta-left">Collected by</th>
                <th class="ta-right">Amount</th>
                <th class="ta-center">Detail</th>
              </tr>
            </thead>
            <tbody>
              @for (v of detail.vouchers; track v.id) {
                <tr class="sard-voucher-row" (click)="toggleVoucherGlEntries(v.id)">
                  <td class="ta-left mono">{{ v.voucherNo || v.receiptNo }}</td>
                  <td class="ta-left">{{ v.collectionDate }}</td>
                  <td class="ta-left sard-desc-cell" [title]="v.note">{{ v.note || '—' }}</td>
                  <td class="ta-left">{{ v.collectedByName || '—' }}</td>
                  <td class="ta-right amount-cell">{{ v.amount | number: '1.2-2' }}</td>
                  <td class="ta-center">
                    <button
                      type="button"
                      mat-icon-button
                      class="sard-detail-btn"
                      (click)="$event.stopPropagation(); toggleVoucherGlEntries(v.id)"
                      title="View this receipt's actual GL posting"
                    >
                      <mat-icon>visibility</mat-icon>
                    </button>
                  </td>
                </tr>
                @if (expandedVoucherId === v.id) {
                  <tr class="sard-gl-row">
                    <td colspan="6">
                      @if (loadingGlEntriesId === v.id) {
                        <div class="sard-gl-loading">Loading GL entry…</div>
                      } @else if (!glEntriesByVoucherId[v.id]?.length) {
                        <div class="sard-gl-empty">No GL posting recorded for this receipt.</div>
                      } @else {
                        <table class="sard-gl-table">
                          <thead>
                            <tr>
                              <th class="ta-left">GL Account</th>
                              <th class="ta-center">Dr / Cr</th>
                              <th class="ta-right">Amount</th>
                            </tr>
                          </thead>
                          <tbody>
                            @for (leg of glEntriesByVoucherId[v.id]; track leg.glCode + leg.drCr) {
                              <tr>
                                <td class="ta-left mono">{{ leg.glCode }} — {{ leg.accountName }}</td>
                                <td class="ta-center">
                                  <span
                                    class="sard-drcr-pill"
                                    [class.sard-drcr-pill--dr]="leg.drCr === 'Dr'"
                                    [class.sard-drcr-pill--cr]="leg.drCr === 'Cr'"
                                  >
                                    {{ leg.drCr }}
                                  </span>
                                </td>
                                <td class="ta-right amount-cell">{{ leg.amount | number: '1.2-2' }}</td>
                              </tr>
                            }
                          </tbody>
                        </table>
                      }
                    </td>
                  </tr>
                }
              }
            </tbody>
          </table>
        } @else {
          <div class="sard-funding-empty">Cash-funded, but no receipt is linked to this request.</div>
        }
      } @else if (detail.fundingSource === 'SAVINGS') {
        @if (detail.savingsAccount) {
          <div class="sard-row">
            <span>Savings account</span>
            <span class="mono">{{ detail.savingsAccount.accountNo }}</span>
          </div>
          <div class="sard-row">
            <span>Current balance</span>
            <span>{{ detail.savingsAccount.balance | number: '1.2-2' }}</span>
          </div>
          <div class="sard-funding-hint">
            This amount was already debited from savings when the tranche was submitted.
          </div>
        } @else {
          <div class="sard-funding-empty">Savings-funded, but no linked savings account could be found.</div>
        }
      } @else {
        <div class="sard-funding-empty">No funding route was recorded for this request.</div>
      }
    </div>

    @if (errorMsg) {
      <div class="sard-error">{{ errorMsg }}</div>
    }
  }
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button mat-button (click)="cancel()" [disabled]="actioning">Close</button>
  @if (detail) {
    <button mat-stroked-button color="warn" [disabled]="actioning" (click)="reject()">
      {{ actioning ? 'Working…' : 'Reject' }}
    </button>
    <button mat-raised-button color="primary" [disabled]="actioning" (click)="approve()">
      {{ actioning ? 'Working…' : 'Approve' }}
    </button>
  }
</mat-dialog-actions>