cbsnexora/src/app/chequebook/cheque-series/cheque-series.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="container">
  <div class="page-header">
    <h2>{{ 'labels.inputs.Cheque Series' | translate }}</h2>
    <div class="header-actions">
      <button mat-raised-button color="primary" (click)="showForm = !showForm">
        <fa-icon icon="plus"></fa-icon>&nbsp;{{ 'labels.buttons.Add Cheque Series' | translate }}
      </button>
      <button mat-raised-button [routerLink]="['/chequebook']">{{ 'labels.buttons.Back' | translate }}</button>
    </div>
  </div>

  @if (showForm) {
    <mat-card class="add-form">
      <mat-card-content>
        <form [formGroup]="seriesForm" (ngSubmit)="submit()">
          <div class="form-grid">
            <mat-form-field appearance="fill">
              <mat-label>{{ 'labels.inputs.Series Code' | translate }}</mat-label>
              <input matInput formControlName="seriesCode" placeholder="CTS-25" required />
            </mat-form-field>
            <mat-form-field appearance="fill">
              <mat-label>{{ 'labels.inputs.Name' | translate }}</mat-label>
              <input matInput formControlName="name" required />
            </mat-form-field>
            <mat-form-field appearance="fill">
              <mat-label>{{ 'labels.inputs.Leaves Per Book' | translate }}</mat-label>
              <input matInput type="number" formControlName="leavesPerBook" required />
            </mat-form-field>
            <mat-form-field appearance="fill">
              <mat-label>{{ 'labels.inputs.Applicable Account Type' | translate }}</mat-label>
              <mat-select formControlName="applicableAccountType" required>
                <mat-option value="SAVINGS">{{ 'labels.inputs.Savings Only' | translate }}</mat-option>
                <mat-option value="CURRENT">{{ 'labels.inputs.Current Only' | translate }}</mat-option>
              </mat-select>
              <mat-hint>{{ 'labels.text.SB and CA cheque stationery differ' | translate }}</mat-hint>
            </mat-form-field>
            <mat-form-field appearance="fill">
              <mat-label>{{ 'labels.inputs.Reorder Level' | translate }}</mat-label>
              <input matInput type="number" formControlName="reorderLevel" />
              <mat-hint>{{ 'labels.text.Low-stock alert threshold (remaining leaves)' | translate }}</mat-hint>
            </mat-form-field>
          </div>
          <mat-checkbox formControlName="ctsCompliant">{{
            'labels.inputs.CTS-2010 Compliant' | translate
          }}</mat-checkbox>
          <div class="form-actions">
            <button mat-raised-button type="button" (click)="showForm = false">
              {{ 'labels.buttons.Cancel' | translate }}
            </button>
            <button mat-raised-button color="primary" type="submit" [disabled]="seriesForm.invalid || busy">
              {{ 'labels.buttons.Submit' | translate }}
            </button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  }

  <div class="filter-row">
    @for (s of ['ACTIVE', 'INACTIVE']; track s) {
      <button mat-stroked-button [class.active]="statusFilter === s" (click)="filterByStatus(s)">{{ s }}</button>
    }
  </div>

  <div class="table-wrapper mat-elevation-z1">
    <table mat-table [dataSource]="seriesList">
      <ng-container matColumnDef="seriesCode">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Series Code' | translate }}</th>
        <td mat-cell *matCellDef="let s">{{ s.seriesCode }}</td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
        <td mat-cell *matCellDef="let s">{{ s.name }}</td>
      </ng-container>
      <ng-container matColumnDef="leavesPerBook">
        <th mat-header-cell *matHeaderCellDef class="num">{{ 'labels.inputs.Leaves Per Book' | translate }}</th>
        <td mat-cell *matCellDef="let s" class="num">{{ s.leavesPerBook }}</td>
      </ng-container>
      <ng-container matColumnDef="applicableAccountType">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Applicable Account Type' | translate }}</th>
        <td mat-cell *matCellDef="let s">
          <span class="pill neutral">{{ s.applicableAccountType }}</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="ctsCompliant">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.CTS-2010 Compliant' | translate }}</th>
        <td mat-cell *matCellDef="let s">
          <span class="pill" [ngClass]="s.ctsCompliant ? 'ok' : 'neutral'">{{ s.ctsCompliant ? 'Yes' : 'No' }}</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="reorderLevel">
        <th mat-header-cell *matHeaderCellDef class="num">{{ 'labels.inputs.Reorder Level' | translate }}</th>
        <td mat-cell *matCellDef="let s" class="num">{{ s.reorderLevel ?? '-' }}</td>
      </ng-container>
      <ng-container matColumnDef="active">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
        <td mat-cell *matCellDef="let s">
          <span class="pill" [ngClass]="s.active ? 'ok' : 'neutral'">{{ s.active ? 'Active' : 'Inactive' }}</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let s">
          @if (s.active) {
            <button mat-icon-button color="warn" (click)="deactivate(s)">
              <mat-icon><fa-icon icon="trash"></fa-icon></mat-icon>
            </button>
          }
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="columns"></tr>
      <tr mat-row *matRowDef="let row; columns: columns"></tr>
    </table>
    @if (seriesList.length === 0) {
      <div class="empty-state">{{ 'labels.text.No records to display' | translate }}</div>
    }
    @if (totalRecords > 0) {
      <mat-paginator
        [length]="totalRecords"
        [pageSize]="pageSize"
        [pageSizeOptions]="pageSizeOptions"
        [pageIndex]="pageIndex"
        showFirstLastButtons
        (page)="onPageChange($event)"
      ></mat-paginator>
    }
  </div>
</div>