cbsnexora/src/app/clients/clients-view/identities-tab/identities-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="idt-container">
  <!-- Header -->
  <div class="idt-header">
    <div class="idt-header__left">
      <i class="fa fa-id-card idt-header__icon"></i>
      <h3 class="idt-header__title">{{ 'labels.heading.Identities' | translate }}</h3>
      <span class="idt-header__badge">{{ clientIdentities?.length || 0 }}</span>
    </div>
    <button
      mat-flat-button
      color="primary"
      class="idt-header__btn"
      (click)="addIdentifier()"
      *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'"
    >
      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
    </button>
  </div>

  <!-- Empty State -->
  @if (!clientIdentities || clientIdentities.length === 0) {
    <div class="idt-empty">
      <i class="fa fa-id-badge idt-empty__icon"></i>
      <p class="idt-empty__text">{{ 'labels.messages.No Identities Available' | translate }}</p>
    </div>
  }

  <!-- Identity Cards -->
  @for (identity of clientIdentities; track identity.id; let i = $index) {
    <div class="idt-card">
      <!-- Card Header -->
      <div class="idt-card__header">
        <div class="idt-card__title">
          <i class="fa fa-file-text idt-card__type-icon"></i>
          <span class="idt-card__type">{{ identity.documentType?.name }}</span>
          <span
            class="idt-card__status"
            [class.idt-card__status--active]="identity.status === 'clientIdentifierStatusType.active'"
            [class.idt-card__status--inactive]="identity.status !== 'clientIdentifierStatusType.active'"
          >
            {{ identity.status === 'clientIdentifierStatusType.active' ? 'Active' : 'Inactive' }}
          </span>
        </div>
        <button
          mat-stroked-button
          color="warn"
          class="idt-card__delete"
          (click)="deleteIdentifier(identity.clientId, identity.id, i)"
          *mifosxHasPermission="'DELETE_CLIENTIDENTIFIER'"
        >
          <i class="fa fa-trash"></i>
        </button>
      </div>

      <!-- Card Body -->
      <div class="idt-card__body">
        <div class="idt-meta">
          <div class="idt-meta__row">
            <i class="fa fa-key idt-meta__icon"></i>
            <span class="idt-meta__label">{{ 'labels.inputs.Document Key' | translate }}</span>
            <span class="idt-meta__value idt-meta__value--mono">{{ identity.documentKey || '—' }}</span>
          </div>
          @if (identity.description) {
            <div class="idt-meta__row">
              <i class="fa fa-sticky-note-o idt-meta__icon"></i>
              <span class="idt-meta__label">{{ 'labels.inputs.Description' | translate }}</span>
              <span class="idt-meta__value">{{ identity.description }}</span>
            </div>
          }
        </div>

        <!-- Documents -->
        @if (identity.documents?.length) {
          <div class="idt-docs">
            <div class="idt-docs__title">
              <i class="fa fa-paperclip"></i> {{ 'labels.inputs.Identity Documents' | translate }}
              <span class="idt-docs__count">{{ identity.documents.length }}</span>
            </div>
            <div class="idt-docs__grid">
              @for (document of identity.documents; track trackByDocumentId($index, document)) {
                <div
                  class="idt-doc"
                  [class.idt-doc--clickable]="isPreviewable(document)"
                  (click)="isPreviewable(document) && openDocumentPreview(identity, document)"
                  (keydown.enter)="isPreviewable(document) && openDocumentPreview(identity, document)"
                  tabindex="0"
                  role="button"
                  [attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
                >
                  @if (previewThumbnails[document.id]) {
                    <img
                      [src]="previewThumbnails[document.id]"
                      [alt]="document.name"
                      class="idt-doc__thumb"
                      loading="lazy"
                    />
                  } @else {
                    <div class="idt-doc__placeholder">
                      <i class="fa fa-file-text-o"></i>
                    </div>
                  }
                  <div class="idt-doc__info">
                    <span class="idt-doc__name">{{ document.name }}</span>
                    @if (document.fileName) {
                      <span class="idt-doc__file"> <i class="fa fa-paperclip"></i> {{ document.fileName }} </span>
                    }
                  </div>
                  @if (isPreviewable(document)) {
                    <i class="fa fa-eye idt-doc__preview"></i>
                  }
                </div>
              }
            </div>
          </div>
        }
      </div>
    </div>
  }
</div>

<div #identityLightbox class="document-lightbox-host"></div>