cbsnexora/src/app/accounting/balance-sheet/balance-sheet.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="bs-page">
  <!-- Controls — not part of the printed sheet. -->
  <div class="bs-controls">
    <label class="bs-field">
      <span>As on date</span>
      <input type="date" [(ngModel)]="asOnDate" (change)="load()" />
    </label>
    <label class="bs-field">
      <span>Branch</span>
      <select [(ngModel)]="officeId" (ngModelChange)="load()">
        <option [ngValue]="null">All branches</option>
        @for (office of offices; track office.id) {
          <option [ngValue]="office.id">{{ office.name }}</option>
        }
      </select>
    </label>
    <label class="bs-check">
      <input type="checkbox" [(ngModel)]="hideZeroBalances" (ngModelChange)="applyZeroFilter()" />
      <span>Hide nil balances</span>
    </label>
    <span class="bs-controls__spacer"></span>
    @if (!loading && debitSide && creditSide) {
      <span class="bs-tally" [class.bs-tally--off]="!tallied">
        {{ tallied ? 'Balanced' : 'Out of balance by ' + fmt(difference) }}
      </span>
    }
    <button type="button" class="bs-btn" (click)="load()" [disabled]="loading">
      {{ loading ? 'Loading…' : 'Refresh' }}
    </button>
    <button type="button" class="bs-btn bs-btn--primary" (click)="downloadPdf()" [disabled]="loading || !debitSide">
      Download PDF
    </button>
  </div>

  @if (error) {
    <div class="bs-alert">{{ error }}</div>
  }

  @if (loading) {
    <div class="bs-loading">Loading balance sheet…</div>
  }

  @if (!loading && debitSide && creditSide) {
    <!-- The sheet itself — this block is what prints. -->
    <div class="bs-sheet">
      <header class="bs-sheet__head">
        <h2>CONSOLIDATED BALANCE SHEET (SUB GROUP WISE)</h2>
        <p>AS ON : {{ displayDate(asOnDateLoaded) }}</p>
        <p class="bs-sheet__branches">FOR BRANCHES : {{ officeLabel }}</p>
      </header>

      <div class="bs-sheet__body">
        <!-- Liabilities (credit) on the left, assets (debit) on the right — as the printed sheet reads. -->
        <section class="bs-col">
          <div class="bs-col__title">LIABILITIES ( CREDIT )</div>
          <div class="bs-row bs-row--colhead">
            <span>ACCOUNT NAME</span>
            <span>BALANCE</span>
            <span>TOTAL</span>
          </div>
          @for (group of creditSide.groups; track group.classification) {
            @for (root of group.nodes; track root.id) {
              <ng-container *ngTemplateOutlet="block; context: { $implicit: root }"></ng-container>
            }
          }
          @if (creditSide.groups.length === 0) {
            <div class="bs-empty">No liability, equity or income balances as on this date.</div>
          }
          <div class="bs-row bs-row--grand">
            <span></span>
            <span></span>
            <span>{{ fmt(creditSide.total) }}</span>
          </div>
        </section>

        <section class="bs-col">
          <div class="bs-col__title">ASSETS ( DEBIT )</div>
          <div class="bs-row bs-row--colhead">
            <span>ACCOUNT NAME</span>
            <span>BALANCE</span>
            <span>TOTAL</span>
          </div>
          @for (group of debitSide.groups; track group.classification) {
            @for (root of group.nodes; track root.id) {
              <ng-container *ngTemplateOutlet="block; context: { $implicit: root }"></ng-container>
            }
          }
          @if (debitSide.groups.length === 0) {
            <div class="bs-empty">No asset or expense balances as on this date.</div>
          }
          <div class="bs-row bs-row--grand">
            <span></span>
            <span></span>
            <span>{{ fmt(debitSide.total) }}</span>
          </div>
        </section>
      </div>

      <footer class="bs-sheet__foot">
        <span>CLERK</span>
        <span>ACCOUNTANT / OFFICER</span>
        <span>ASST. GEN MANAGER</span>
        <span>GENERAL MANAGER</span>
        <span>CHAIRMAN</span>
      </footer>
    </div>
  }
</div>

<!--
  One top-level block: the Header account's name, a rule, its lines, then its subtotal in the TOTAL
  column.
-->
<ng-template #block let-root>
  @if (root.usage === 'DETAIL') {
    <!-- A Detail account with no Header of its own: a group of one, so it gets a single line
         carrying both its balance and its total rather than a heading repeating its own name. -->
    <div class="bs-block bs-block--single">
      <div class="bs-row bs-row--standalone">
        <span class="bs-name" [title]="root.glCode">{{ root.name }}</span>
        <span class="bs-amt">{{ fmt(root.balance) }}</span>
        <span class="bs-amt">{{ fmt(root.balance) }}</span>
      </div>
    </div>
  } @else {
    <div class="bs-block">
      <div class="bs-block__name" [title]="root.glCode">{{ root.name }}</div>
      <div class="bs-block__rule"></div>
      @for (child of root.children; track child.id) {
        <ng-container *ngTemplateOutlet="lines; context: { $implicit: child, depth: 0 }"></ng-container>
      }
      @if (root.children.length === 0) {
        <div class="bs-row bs-row--line">
          <span class="bs-name bs-name--muted">No accounts under this group</span>
          <span></span>
          <span></span>
        </div>
      }
      <div class="bs-row bs-row--subtotal">
        <span></span>
        <span></span>
        <span>{{ fmt(root.balance) }}</span>
      </div>
    </div>
  }
</ng-template>

<!--
  Everything below a top-level block. A nested Header keeps its own name and its own subtotal, so a
  Header inside a Header still reads as its own sub-group rather than flattening into the parent.
-->
<ng-template #lines let-node let-depth="depth">
  @if (node.usage === 'DETAIL') {
    <div class="bs-row bs-row--line">
      <span class="bs-name" [style.paddingLeft.px]="depth * 14" [title]="node.glCode">{{ node.name }}</span>
      <span class="bs-amt">{{ fmt(node.balance) }}</span>
      <span></span>
    </div>
  } @else {
    <div class="bs-row bs-row--subhead">
      <span class="bs-name" [style.paddingLeft.px]="depth * 14" [title]="node.glCode">{{ node.name }}</span>
      <span></span>
      <span></span>
    </div>
    @for (child of node.children; track child.id) {
      <ng-container *ngTemplateOutlet="lines; context: { $implicit: child, depth: depth + 1 }"></ng-container>
    }
    <div class="bs-row bs-row--subsubtotal">
      <span></span>
      <span class="bs-amt">{{ fmt(node.balance) }}</span>
      <span></span>
    </div>
  }
</ng-template>