cbsnexora/src/app/centers/centers.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/.
-->

<mat-card class="container">
  <!-- Header Bar -->
  <div class="table-header">
    <div class="table-title-group">
      <h2 class="table-title">
        <div class="t-logomark"><span></span><span></span><span></span><span></span></div>
        {{ 'labels.menus.Centers' | translate }}
      </h2>
    </div>

    <div class="table-actions">
      <mat-form-field class="table-search" appearance="outline">
        <input matInput placeholder="{{ 'labels.text.SearchByName' | translate }}" [formControl]="name" />
      </mat-form-field>

      <mat-form-field class="table-search" appearance="outline">
        <input matInput placeholder="{{ 'labels.text.SearchByExternalID' | translate }}" [formControl]="externalId" />
      </mat-form-field>

      <mat-checkbox
        #showClosedCenters
        labelPosition="after"
        (change)="changeShowClosedCenters()"
        class="table-checkbox"
      >
        {{ 'labels.inputs.Show Closed Centers' | translate }}
      </mat-checkbox>

      <div class="table-buttons">
        <button
          mat-stroked-button
          [routerLink]="['../', 'organization', 'bulk-import', 'Centers']"
          *mifosxHasPermission="'CREATE_CENTER'"
          class="btn-import"
        >
          <fa-icon icon="download"></fa-icon>
          {{ 'labels.buttons.Import Center' | translate }}
        </button>
        <button
          mat-flat-button
          color="primary"
          [routerLink]="['create']"
          *mifosxHasPermission="'CREATE_CENTER'"
          class="btn-create"
        >
          <fa-icon icon="plus"></fa-icon>
          {{ 'labels.buttons.Create Center' | translate }}
        </button>
      </div>
    </div>
  </div>

  <!-- Table -->
  <div class="table-container">
    <table mat-table [dataSource]="dataSource" matSort class="modern-table">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
        <td mat-cell *matCellDef="let center" class="cell-link">{{ center.name }}</td>
      </ng-container>

      <ng-container matColumnDef="accountNo">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Account' | translate }} #</th>
        <td mat-cell *matCellDef="let center" class="cell-mono">{{ center.accountNo }}</td>
      </ng-container>

      <ng-container matColumnDef="externalId">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.External Id' | translate }}</th>
        <td mat-cell *matCellDef="let center" class="cell-mono">{{ center.externalId }}</td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
        <td mat-cell *matCellDef="let row">
          <span class="status-badge" [ngClass]="row.status.code | statusLookup">
            {{ row.status.value }}
          </span>
        </td>
      </ng-container>

      <ng-container matColumnDef="officeName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office Name' | translate }}</th>
        <td mat-cell *matCellDef="let center">{{ center.officeName }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        [routerLink]="[row.id, 'general']"
        class="table-row"
      ></tr>
    </table>

    <mat-paginator
      [length]="dataSource?.records$ | async"
      [pageSize]="10"
      [pageSizeOptions]="[10, 25, 50, 100]"
      showFirstLastButtons
    ></mat-paginator>
  </div>
</mat-card>