cbsnexora/src/app/clients/clients-view/client-actions/transfer-client/transfer-client.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="ca-root">
  <!-- HERO -->
  <div class="ca-hero">
    <div class="ca-hero-icon"><fa-icon icon="exchange"></fa-icon></div>
    <div class="ca-hero-text">
      <div class="ca-hero-eyebrow">Client Action</div>
      <h2 class="ca-hero-title">{{ 'labels.heading.Transfer Client' | translate }}</h2>
      <p class="ca-hero-sub">
        Move this client to a different office or branch. The destination office will need to
        <strong>accept</strong> the proposed transfer before it takes effect. The client's accounts move with them.
      </p>
    </div>
  </div>

  <form [formGroup]="transferClientForm" (ngSubmit)="submit()" class="ca-card">
    <div class="ca-card-body">
      <div class="ca-form-row">
        <mat-form-field appearance="outline">
          <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
          <mat-select required formControlName="destinationOfficeId">
            @for (office of officeData; track office) {
              <mat-option [value]="office.id">{{ office.name }}</mat-option>
            }
          </mat-select>
          @if (transferClientForm.controls.destinationOfficeId.hasError('required')) {
            <mat-error>
              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          }
        </mat-form-field>
      </div>

      <div class="ca-form-row">
        <mat-form-field appearance="outline" (click)="transferDatePicker.open()">
          <mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="transferDatePicker"
            required
            formControlName="transferDate"
          />
          <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #transferDatePicker></mat-datepicker>
          @if (transferClientForm.controls.transferDate.hasError('required')) {
            <mat-error>
              {{ 'labels.inputs.Transfer Date' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          }
        </mat-form-field>
      </div>

      <div class="ca-form-row">
        <mat-form-field appearance="outline">
          <mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
          <textarea
            matInput
            formControlName="note"
            cdkTextareaAutosize
            cdkAutosizeMinRows="2"
            placeholder="Optional — reason or context for the transfer"
          ></textarea>
        </mat-form-field>
      </div>

      <div class="ca-notice">
        <fa-icon icon="info-circle"></fa-icon>
        <span>
          The transfer is created as <strong>proposed</strong> until the destination office accepts it. Until then it
          can be withdrawn from the client's <em>Actions → Undo Transfer</em> menu.
        </span>
      </div>
    </div>

    <div class="ca-actions">
      <button type="button" class="ca-btn ca-btn--cancel" [routerLink]="['../../']">
        <fa-icon icon="times"></fa-icon>
        <span>{{ 'labels.buttons.Cancel' | translate }}</span>
      </button>
      <button type="submit" class="ca-btn ca-btn--confirm" [disabled]="!transferClientForm.valid">
        <fa-icon icon="paper-plane"></fa-icon>
        <span>{{ 'labels.buttons.Confirm' | translate }}</span>
      </button>
    </div>
  </form>
</div>