cbsnexora/src/app/organization/branch-profile/branch-profile.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="bp-container">
  <div class="bp-header">
    <button mat-stroked-button [routerLink]="['/organization']" class="bp-back">
      <i class="fas fa-arrow-left"></i> Organization
    </button>
    <h2 class="bp-header__title">Branch Profile</h2>
  </div>

  @if (errorMsg) {
    <div class="bp-alert bp-alert--error">{{ errorMsg }}</div>
  }
  @if (successMsg) {
    <div class="bp-alert bp-alert--success">{{ successMsg }}</div>
  }

  <div class="bp-card">
    <div class="bp-section">
      <div class="bp-section__header">
        <i class="fas fa-code-branch"></i>
        <h3>Select Branch</h3>
      </div>
      <div class="bp-body">
        @if (loadingOffices) {
          <span class="bp-muted">Loading branches…</span>
        } @else {
          <mat-form-field appearance="outline" class="bp-field">
            <mat-label>Branch</mat-label>
            <mat-select [value]="selectedOfficeId" (selectionChange)="selectOffice($event.value)">
              @for (o of offices; track o.officeId) {
                <mat-option [value]="o.officeId">{{ officeLabel(o) }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        }
      </div>
    </div>

    @if (loadingProfile) {
      <div class="bp-loading">Loading…</div>
    }

    @if (selectedOfficeId && !loadingProfile) {
      <form [formGroup]="form" (ngSubmit)="submit()">
        <div class="bp-section">
          <div class="bp-section__header">
            <i class="fas fa-id-card"></i>
            <h3>Branch Details</h3>
          </div>
          <div class="bp-body">
            <mat-form-field appearance="outline" class="bp-field bp-field--half">
              <mat-label>Branch Code</mat-label>
              <input matInput formControlName="branchCode" placeholder="e.g. BR001" />
            </mat-form-field>
            <mat-form-field appearance="outline" class="bp-field bp-field--half">
              <mat-label>Branch Type</mat-label>
              <mat-select formControlName="branchType">
                @for (t of branchTypes; track t.value) {
                  <mat-option [value]="t.value">{{ t.label }}</mat-option>
                }
              </mat-select>
            </mat-form-field>
            <mat-form-field appearance="outline" class="bp-field">
              <mat-label>Address</mat-label>
              <textarea matInput formControlName="address" rows="2"></textarea>
            </mat-form-field>
            <mat-form-field appearance="outline" class="bp-field bp-field--half">
              <mat-label>Pincode</mat-label>
              <input matInput formControlName="pincode" maxlength="10" placeholder="e.g. 462001" />
            </mat-form-field>
            <mat-form-field appearance="outline" class="bp-field bp-field--half">
              <mat-label>Contact Phone</mat-label>
              <input matInput formControlName="contactPhone" />
            </mat-form-field>
            <mat-form-field appearance="outline" class="bp-field bp-field--half">
              <mat-label>Contact Email</mat-label>
              <input matInput type="email" formControlName="contactEmail" />
            </mat-form-field>
          </div>
        </div>

        <div class="bp-section">
          <div class="bp-section__header">
            <i class="fas fa-landmark"></i>
            <h3>Branch Identifiers</h3>
          </div>
          <div class="bp-body">
            <mat-form-field appearance="outline" class="bp-field bp-field--half">
              <mat-label>IFSC Code</mat-label>
              <input matInput formControlName="ifscCode" placeholder="e.g. SUCB0000123" />
            </mat-form-field>
            <mat-form-field appearance="outline" class="bp-field bp-field--half">
              <mat-label>MICR Code</mat-label>
              <input matInput formControlName="micrCode" />
            </mat-form-field>
          </div>
          <p class="bp-note">
            SWIFT/BIC is set once for the whole bank, not per branch — see
            <a [routerLink]="['/organization/institution-profile']">Bank Profile</a>.
          </p>
        </div>

        <div class="bp-section">
          <div class="bp-section__header">
            <i class="fas fa-map-marked-alt"></i>
            <h3>Location (optional)</h3>
          </div>
          <div class="bp-body">
            <mat-form-field appearance="outline" class="bp-field bp-field--half">
              <mat-label>Latitude</mat-label>
              <input matInput type="number" step="0.000001" formControlName="latitude" />
            </mat-form-field>
            <mat-form-field appearance="outline" class="bp-field bp-field--half">
              <mat-label>Longitude</mat-label>
              <input matInput type="number" step="0.000001" formControlName="longitude" />
            </mat-form-field>
          </div>
        </div>

        <div class="bp-section">
          <div class="bp-section__header">
            <i class="fas fa-clock"></i>
            <h3>Working Hours</h3>
          </div>
          <div class="bp-body">
            <mat-form-field appearance="outline" class="bp-field bp-field--third">
              <mat-label>Opens At</mat-label>
              <input matInput type="time" formControlName="workingHoursStart" />
            </mat-form-field>
            <mat-form-field appearance="outline" class="bp-field bp-field--third">
              <mat-label>Closes At</mat-label>
              <input matInput type="time" formControlName="workingHoursEnd" />
            </mat-form-field>
            <mat-form-field appearance="outline" class="bp-field bp-field--third">
              <mat-label>Working Days</mat-label>
              <input matInput formControlName="workingDays" placeholder="e.g. Mon-Sat" />
            </mat-form-field>
          </div>
        </div>

        @if (lastUpdated) {
          <div class="bp-lastupdated">Last updated by {{ lastUpdated.by }} · {{ lastUpdated.at | dateFormat }}</div>
        }

        <div class="bp-actions">
          <button
            type="submit"
            mat-flat-button
            color="primary"
            [disabled]="form.pristine || saving"
            *mifosxHasPermission="'UPDATE_BRANCHPROFILE'"
            class="bp-actions__submit"
          >
            <i class="fas fa-check"></i> Save
          </button>
        </div>
      </form>
    }
  </div>
</div>