cbsnexora/src/app/organization/tellers/cashiers/cashiers.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="table-header">
    <div class="table-title-group">
      <h2 class="table-title">
        <i class="fas fa-user-tie title-icon"></i>
        {{ 'labels.heading.Cashiers' | translate }}
      </h2>
    </div>
    <div class="table-actions">
      <mat-form-field class="table-search" appearance="outline">
        <i matPrefix class="fas fa-search"></i>
        <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
        <input matInput (keyup)="applyFilter($event.target.value)" />
      </mat-form-field>
      <div class="table-buttons">
        <button
          mat-flat-button
          color="primary"
          class="btn-create"
          [routerLink]="['create']"
          *mifosxHasPermission="'CREATE_CASHIERS_FOR_TELLER'"
        >
          <fa-icon icon="plus" class="m-r-10"></fa-icon>
          {{ 'labels.buttons.New Cashier' | translate }}
        </button>
      </div>
    </div>
  </div>

  <div class="table-container">
    <table mat-table [dataSource]="dataSource" matSort class="modern-table">
      <ng-container matColumnDef="period">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Period' | translate }}</th>
        <td mat-cell *matCellDef="let cashier">
          {{ cashier.startDate | dateFormat }} - {{ cashier.endDate | dateFormat }}
        </td>
      </ng-container>

      <ng-container matColumnDef="staffName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Cashier/Staff' | translate }}</th>
        <td mat-cell *matCellDef="let cashier">{{ cashier.staffName }}</td>
      </ng-container>

      <ng-container matColumnDef="isFullDay">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Full Day/Time' | translate }}</th>
        <td mat-cell *matCellDef="let cashier">{{ cashier.isFullDay | yesNo }}</td>
      </ng-container>

      <ng-container matColumnDef="vaultActions">
        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Vault Actions' | translate }}</th>
        <td mat-cell *matCellDef="let cashier" (click)="$event.stopPropagation()">
          <div class="vault-actions">
            <a
              class="vault-btn vault-btn--allocate"
              matTooltip="{{ 'tooltips.Allocate Cash' | translate }}"
              [routerLink]="[cashier.id, 'allocate']"
              *mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
            >
              <i class="fas fa-arrow-up"></i>
            </a>
            <a
              class="vault-btn vault-btn--settle"
              matTooltip="{{ 'tooltips.Settle Cash' | translate }}"
              [routerLink]="[cashier.id, 'settle']"
              *mifosxHasPermission="'SETTLECASHIER_TELLER'"
            >
              <i class="fas fa-arrow-down"></i>
            </a>
            <a
              class="vault-btn vault-btn--view"
              matTooltip="{{ 'tooltips.View Transactions' | translate }}"
              [routerLink]="[cashier.id, 'transactions']"
              *mifosxHasPermission="'ALLOCATECASHIER_TELLER'"
            >
              <i class="fas fa-eye"></i>
            </a>
          </div>
        </td>
      </ng-container>

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

    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
  </div>
</div>