cbsnexora/src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html

<!--
  Copyright since 2025 Mifos Initiative
-->

<div class="fm-step">
  <!-- Step Header -->
  <div class="step-header">
    <div class="step-header__left">
      <fa-icon icon="users" class="step-header__icon"></fa-icon>
      <div>
        <h3 class="step-header__title">Family Members</h3>
        <p class="step-header__sub">Add family members and dependents of the client.</p>
      </div>
    </div>
  </div>

  <!-- ═══ FAMILY MEMBERS ═══ -->
  <div class="fm-step__header">
    <div class="fm-step__title">
      <fa-icon icon="users" class="fm-step__icon"></fa-icon>
      <span>Family Members</span>
      @if (clientFamilyMembers.length > 0) {
        <span class="fm-step__count">{{ clientFamilyMembers.length }}</span>
      }
    </div>
    @if (!readOnly) {
      <button mat-flat-button color="primary" type="button" class="fm-step__add-btn" (click)="addFamilyMember()">
        <mat-icon>add</mat-icon> Add Member
      </button>
    }
  </div>

  @if (clientFamilyMembers.length === 0) {
    <div class="fm-step__empty fm-step__empty--required">
      <mat-icon class="fm-step__empty-icon">people_outline</mat-icon>
      <span>No family members added yet.</span>
      <span class="fm-step__empty-required">At least one family member is required.</span>
    </div>
  }

  <!-- Spouse hint for married clients -->
  @if (isMarried && !hasSpouse) {
    <div class="fm-spouse-hint">
      <mat-icon class="fm-spouse-hint__icon">favorite</mat-icon>
      <span>Marital status is <strong>Married</strong>. Consider adding spouse as a family member.</span>
    </div>
  }

  @if (clientFamilyMembers.length > 0) {
    <div class="fm-table">
      <div class="fm-table__header">
        <span class="fm-table__col fm-table__col--name">Name</span>
        <span class="fm-table__col fm-table__col--rel">Relationship</span>
        <span class="fm-table__col fm-table__col--dob">Date of Birth</span>
        <span class="fm-table__col fm-table__col--id">Aadhaar / PAN</span>
        <span class="fm-table__col fm-table__col--status">Alive</span>
        <span class="fm-table__col fm-table__col--actions">Actions</span>
      </div>

      @for (member of clientFamilyMembers; track member; let i = $index) {
        <div class="fm-table__row">
          <span class="fm-table__col fm-table__col--name">
            <mat-icon class="fm-table__avatar">{{ member.linkedClientId ? 'link' : 'person' }}</mat-icon>
            <div class="fm-table__name-info">
              <span class="fm-table__name-text">{{ member.firstName || member.displayName }}</span>
              @if (member.linkedClientId) {
                <span class="fm-table__linked-tag">Linked Client #{{ member.linkedClientId }}</span>
              }
            </div>
          </span>
          <span class="fm-table__col fm-table__col--rel">
            {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name' }}
          </span>
          <span class="fm-table__col fm-table__col--dob">
            {{ member.dateOfBirth ? (member.dateOfBirth | dateFormat) : '—' }}
          </span>
          <span class="fm-table__col fm-table__col--id fm-mono">
            @if (member.panNumber) { {{ member.panNumber }} }
            @else if (member.aadhaarNumber) { {{ member.aadhaarNumber }} }
            @else { — }
          </span>
          <span class="fm-table__col fm-table__col--status">
            @if (member.isAlive !== false) {
              <span class="fm-alive-badge fm-alive-badge--yes">Yes</span>
            } @else {
              <span class="fm-alive-badge fm-alive-badge--no">No</span>
            }
          </span>
          <span class="fm-table__col fm-table__col--actions">
            <button mat-icon-button type="button" (click)="viewFamilyMember(member)" class="fm-action-btn" matTooltip="View">
              <mat-icon>visibility</mat-icon>
            </button>
            @if (!readOnly) {
              <button mat-icon-button type="button" (click)="editFamilyMember(member, i)" class="fm-action-btn" matTooltip="Edit">
                <mat-icon>edit</mat-icon>
              </button>
              <button mat-icon-button type="button" (click)="deleteFamilyMember(member.firstName, i)" class="fm-action-btn fm-action-btn--delete" matTooltip="Delete">
                <mat-icon>delete</mat-icon>
              </button>
            }
          </span>
        </div>
      }
    </div>
  }

</div>