From 98a5af6f60747947a0319a50fb8aaa1aca6f68aa Mon Sep 17 00:00:00 2001
From: Shubham Kumar <shubham.24bcs10320@sst.scaler.com>
Date: Wed, 31 Dec 2025 07:55:24 +0530
Subject: [PATCH] WEB-396:fix align heading and add button in address, family,
 and identities tabs (#2951)

Remove improper trackBy usage and fix type safety issues.
---
 .../address-tab/address-tab.component.html    | 17 +++++++-----
 .../address-tab/address-tab.component.scss    |  4 +++
 .../family-members-tab.component.html         | 17 +++++++-----
 .../family-members-tab.component.scss         |  4 +++
 .../identities-tab.component.html             | 27 ++++++++++---------
 .../identities-tab.component.scss             |  4 +++
 6 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/app/clients/clients-view/address-tab/address-tab.component.html b/src/app/clients/clients-view/address-tab/address-tab.component.html
index 98ae04fe1..6249e336f 100644
--- a/src/app/clients/clients-view/address-tab/address-tab.component.html
+++ b/src/app/clients/clients-view/address-tab/address-tab.component.html
@@ -1,14 +1,17 @@
 <div class="tab-container mat-typography">
-  <h3>{{ 'labels.heading.Address' | translate }}</h3>
-
-  <div class="layout-row align-flex-end">
-    <button mat-raised-button color="primary" (click)="addAddress()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
-    </button>
+  <div class="layout-row align-start">
+    <div class="m-b-10">
+      <h3>{{ 'labels.heading.Address' | translate }}</h3>
+    </div>
+    <div class="action-button m-b-10 gap-25px">
+      <button mat-raised-button color="primary" (click)="addAddress()">
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
+      </button>
+    </div>
   </div>
 
   <mat-accordion>
-    @for (address of clientAddressData; track address; let i = $index) {
+    @for (address of clientAddressData; track address.addressId; let i = $index) {
       <mat-expansion-panel class="address">
         <mat-expansion-panel-header>
           <mat-panel-title>
diff --git a/src/app/clients/clients-view/address-tab/address-tab.component.scss b/src/app/clients/clients-view/address-tab/address-tab.component.scss
index 2531b01e4..637199a79 100644
--- a/src/app/clients/clients-view/address-tab/address-tab.component.scss
+++ b/src/app/clients/clients-view/address-tab/address-tab.component.scss
@@ -2,6 +2,10 @@
   padding: 1%;
   margin: 1%;
 
+  .action-button {
+    margin-left: auto;
+  }
+
   .address {
     .address-actions {
       margin-top: 1%;
diff --git a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
index 880f01331..268baa279 100644
--- a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
+++ b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.html
@@ -1,15 +1,18 @@
 <div class="tab-container mat-typography">
   <router-outlet>
-    <h3>{{ 'labels.heading.Family Members' | translate }}</h3>
-
-    <div class="layout-row align-flex-end">
-      <button mat-raised-button color="primary" [routerLink]="['./add']">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
-      </button>
+    <div class="layout-row align-start">
+      <div class="m-b-10">
+        <h3>{{ 'labels.heading.Family Members' | translate }}</h3>
+      </div>
+      <div class="action-button m-b-10 gap-25px">
+        <button mat-raised-button color="primary" [routerLink]="['./add']">
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
+        </button>
+      </div>
     </div>
 
     <mat-accordion>
-      @for (member of clientFamilyMembers; track member; let i = $index) {
+      @for (member of clientFamilyMembers; track member.id; let i = $index) {
         <mat-expansion-panel class="family-member">
           <mat-expansion-panel-header>
             <mat-panel-title>
diff --git a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.scss b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.scss
index 1c0f07ff8..9ecf6e4c7 100644
--- a/src/app/clients/clients-view/family-members-tab/family-members-tab.component.scss
+++ b/src/app/clients/clients-view/family-members-tab/family-members-tab.component.scss
@@ -2,6 +2,10 @@
   padding: 1%;
   margin: 1%;
 
+  .action-button {
+    margin-left: auto;
+  }
+
   .family-member {
     .family-member-actions {
       margin-top: 1%;
diff --git a/src/app/clients/clients-view/identities-tab/identities-tab.component.html b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
index f94c8872d..0b41b3d75 100644
--- a/src/app/clients/clients-view/identities-tab/identities-tab.component.html
+++ b/src/app/clients/clients-view/identities-tab/identities-tab.component.html
@@ -1,16 +1,19 @@
 <div class="tab-container mat-typography">
-  <h3>{{ 'labels.heading.Identities' | translate }}</h3>
-
-  <div class="layout-row align-flex-end">
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="addIdentifier()"
-      *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'"
-    >
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Add' | translate }}
-    </button>
+  <div class="layout-row align-start">
+    <div class="m-b-10">
+      <h3>{{ 'labels.heading.Identities' | translate }}</h3>
+    </div>
+    <div class="action-button m-b-10 gap-25px">
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="addIdentifier()"
+        *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'"
+      >
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Add' | translate }}
+      </button>
+    </div>
   </div>
 
   <table mat-table #identifiersTable [dataSource]="clientIdentities" [ngStyle]="{ 'margin-top': '3%' }">
diff --git a/src/app/clients/clients-view/identities-tab/identities-tab.component.scss b/src/app/clients/clients-view/identities-tab/identities-tab.component.scss
index 1e88a6539..b9274796b 100644
--- a/src/app/clients/clients-view/identities-tab/identities-tab.component.scss
+++ b/src/app/clients/clients-view/identities-tab/identities-tab.component.scss
@@ -4,6 +4,10 @@
   padding: 1rem;
   margin: 1rem 0;
 
+  .action-button {
+    margin-left: auto;
+  }
+
   h3 {
     margin: 0;
   }