cbsnexora/src/app/clients/clients-view/address-tab/address-tab.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="addr-container mat-typography">
  <!-- Header -->
  <div class="addr-header">
    <div class="addr-header__left">
      <i class="fa fa-map-marker addr-header__icon"></i>
      <h3 class="addr-header__title">{{ 'labels.heading.Address' | translate }}</h3>
      <span class="addr-header__badge">{{ clientAddressData?.length || 0 }}</span>
    </div>
    <button mat-flat-button color="primary" class="addr-header__btn" (click)="addAddress()">
      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
    </button>
  </div>

  <!-- Address Cards -->
  @if (!clientAddressData || clientAddressData.length === 0) {
    <div class="addr-empty">
      <i class="fa fa-map-o addr-empty__icon"></i>
      <p class="addr-empty__text">No addresses added yet</p>
    </div>
  }

  <mat-accordion multi>
    @for (address of clientAddressData; track address.addressId; let i = $index) {
      <mat-expansion-panel class="addr-panel">
        <mat-expansion-panel-header class="addr-panel__header">
          <mat-panel-title class="addr-panel__title">
            <i class="fa fa-home addr-panel__type-icon"></i>
            <span class="addr-panel__type">{{ address.addressType }}</span>
            <span
              class="addr-panel__status"
              [class.addr-panel__status--active]="address.isActive"
              [class.addr-panel__status--inactive]="!address.isActive"
            >
              {{ address.isActive ? 'Active' : 'Inactive' }}
            </span>
            <!-- Only shown on the address a welcome kit was actually posted to. -->
            @if (verificationOf(address); as verification) {
              <span
                class="addr-panel__verify"
                [class.addr-panel__verify--yes]="verification === 'VERIFIED'"
                [class.addr-panel__verify--no]="verification === 'NOT_VERIFIED'"
                [matTooltip]="
                  verification === 'VERIFIED'
                    ? 'Welcome kit was delivered to this address'
                    : 'Welcome kit sent here was returned undelivered'
                "
              >
                <i
                  class="fa"
                  [class.fa-check-circle]="verification === 'VERIFIED'"
                  [class.fa-times-circle]="verification === 'NOT_VERIFIED'"
                ></i>
                {{ verification === 'VERIFIED' ? 'Verified' : 'Not Verified' }}
              </span>
            }
          </mat-panel-title>
          <mat-panel-description class="addr-panel__desc">
            {{ address.city || '' }}{{ address.city && (address.countyDistrict || address.addressLine3) ? ', ' : ''
            }}{{ address.countyDistrict || address.addressLine3 || ''
            }}{{ address.postalCode ? ' - ' + address.postalCode : '' }}
          </mat-panel-description>
        </mat-expansion-panel-header>

        <!-- Actions Bar -->
        <div class="addr-actions">
          <button mat-stroked-button color="primary" class="addr-actions__edit" (click)="editAddress(address, i)">
            <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
          </button>
          <div class="addr-actions__toggle">
            <span class="addr-actions__toggle-label">{{ 'labels.inputs.Active Status' | translate }}</span>
            <mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
          </div>
        </div>

        <!-- Address Details Grid -->
        <div class="addr-grid">
          @if (address.addressLine1) {
            <div class="addr-field">
              <div class="addr-field__label">Address Line 1</div>
              <div class="addr-field__value">{{ address.addressLine1 }}</div>
            </div>
          }
          @if (address.addressLine2) {
            <div class="addr-field">
              <div class="addr-field__label">Address Line 2</div>
              <div class="addr-field__value">{{ address.addressLine2 }}</div>
            </div>
          }
          @if (address.street) {
            <div class="addr-field">
              <div class="addr-field__label">Landmark</div>
              <div class="addr-field__value">{{ address.street }}</div>
            </div>
          }
          @if (address.postalCode) {
            <div class="addr-field">
              <div class="addr-field__label">PIN Code</div>
              <div class="addr-field__value addr-field__value--mono">{{ address.postalCode }}</div>
            </div>
          }
          @if (address.addressLine3) {
            <div class="addr-field">
              <div class="addr-field__label">Locality / State</div>
              <div class="addr-field__value">{{ address.addressLine3 }}</div>
            </div>
          }
          @if (address.city) {
            <div class="addr-field">
              <div class="addr-field__label">City</div>
              <div class="addr-field__value">{{ address.city }}</div>
            </div>
          }
          @if (address.countyDistrict) {
            <div class="addr-field">
              <div class="addr-field__label">District</div>
              <div class="addr-field__value">{{ address.countyDistrict }}</div>
            </div>
          }
          <!-- State — always render. The address payload may carry the value
               under `stateProvinceId` (numeric → resolve via template options),
               `stateName` / `stateProvinceName` (string), or be missing
               entirely. Render whatever we can find, otherwise show "—". -->
          <div class="addr-field">
            <div class="addr-field__label">State</div>
            <div class="addr-field__value">
              {{
                (address.stateProvinceId
                  ? getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name
                  : null) ||
                  address.stateName ||
                  address.stateProvinceName ||
                  '—'
              }}
            </div>
          </div>
          <div class="addr-field">
            <div class="addr-field__label">Country</div>
            <div class="addr-field__value">
              {{ getSelectedValue('countryIdOptions', address.countryId)?.name || 'India' }}
            </div>
          </div>
        </div>
      </mat-expansion-panel>
    }
  </mat-accordion>
</div>