WEB-596:feat(clients) add Personal Data tab with comprehensive client info view (#3006)

improve the translation file

src/app/clients/clients-routing.module.ts

@@ -24,6 +24,7 @@ import { NotesTabComponent } from './clients-view/notes-tab/notes-tab.component'
 import { DocumentsTabComponent } from './clients-view/documents-tab/documents-tab.component';
 import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-tab.component';
 import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
+import { PersonalDataTabComponent } from './clients-view/personal-data-tab/personal-data-tab.component';
 import { ClientActionsComponent } from './clients-view/client-actions/client-actions.component';
 import { ViewChargeComponent } from './clients-view/charges/view-charge/view-charge.component';
 import { ClientPayChargesComponent } from './clients-view/charges/client-pay-charges/client-pay-charges.component';
@@ -99,6 +100,11 @@ const routes: Routes = [
                 clientCollateralData: ClientCollateralResolver
               }
             },
+            {
+              path: 'personal-data',
+              component: PersonalDataTabComponent,
+              data: { title: 'Personal Data', breadcrumb: 'Personal Data', routeParamBreadcrumb: false }
+            },
             {
               path: 'address',
               component: AddressTabComponent,

src/app/clients/clients-view/clients-view.component.html

@@ -378,6 +378,15 @@
       >
         {{ 'labels.inputs.General' | translate }}
       </a>
+      <a
+        mat-tab-link
+        [routerLink]="['./personal-data']"
+        routerLinkActive
+        #personalData="routerLinkActive"
+        [active]="personalData.isActive"
+      >
+        {{ 'labels.inputs.Personal Data' | translate }}
+      </a>
       <a
         mat-tab-link
         [routerLink]="['./address']"

src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.html

@@ -0,0 +1,247 @@
+<!--
+  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="tab-container mat-typography">
+  <!-- Personal Information Section -->
+  <div class="section">
+    <h3>{{ 'labels.heading.Personal Information' | translate }}</h3>
+    <div class="data-grid">
+      <!-- Display Name (common for both person and entity) -->
+      @if (clientViewData.displayName) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Display Name' | translate }}</span>
+          <span class="value">{{ clientViewData.displayName }}</span>
+        </div>
+      }
+      @if (isPerson()) {
+        @if (clientViewData.firstname) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.First Name' | translate }}</span>
+            <span class="value">{{ clientViewData.firstname }}</span>
+          </div>
+        }
+        @if (clientViewData.middlename) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Middle Name' | translate }}</span>
+            <span class="value">{{ clientViewData.middlename }}</span>
+          </div>
+        }
+        @if (clientViewData.lastname) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Last Name' | translate }}</span>
+            <span class="value">{{ clientViewData.lastname }}</span>
+          </div>
+        }
+        @if (clientViewData.dateOfBirth) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Date of Birth' | translate }}</span>
+            <span class="value">{{ clientViewData.dateOfBirth | dateFormat }}</span>
+          </div>
+        }
+        @if (clientViewData.gender) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Gender' | translate }}</span>
+            <span class="value">{{ clientViewData.gender.name }}</span>
+          </div>
+        }
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Is staff' | translate }}</span>
+          <span class="value">{{
+            clientViewData.isStaff ? ('labels.commons.Yes' | translate) : ('labels.commons.No' | translate)
+          }}</span>
+        </div>
+      }
+      @if (isLegalEntity()) {
+        @if (clientViewData.fullname) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Entity Name' | translate }}</span>
+            <span class="value">{{ clientViewData.fullname }}</span>
+          </div>
+        }
+        @if (clientViewData.dateOfBirth) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Incorporation Date' | translate }}</span>
+            <span class="value">{{ clientViewData.dateOfBirth | dateFormat }}</span>
+          </div>
+        }
+      }
+      @if (clientViewData.legalForm) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Legal Form' | translate }}</span>
+          <span class="value">{{ clientViewData.legalForm.value }}</span>
+        </div>
+      }
+    </div>
+  </div>
+
+  <!-- Account Information Section -->
+  <div class="section">
+    <h3>{{ 'labels.heading.Account Information' | translate }}</h3>
+    <div class="data-grid">
+      <div class="data-item">
+        <span class="label">{{ 'labels.inputs.Account No' | translate }}</span>
+        <span class="value">{{ clientViewData.accountNo || '-' }}</span>
+      </div>
+      <div class="data-item">
+        <span class="label">{{ 'labels.inputs.External Id' | translate }}</span>
+        <span class="value">{{ clientViewData.externalId || '-' }}</span>
+      </div>
+      <div class="data-item">
+        <span class="label">{{ 'labels.inputs.Office' | translate }}</span>
+        <span class="value">{{ clientViewData.officeName || '-' }}</span>
+      </div>
+      <div class="data-item">
+        <span class="label">{{ 'labels.inputs.Staff' | translate }}</span>
+        <span class="value">{{ clientViewData.staffName || ('labels.inputs.Unassigned' | translate) }}</span>
+      </div>
+      @if (clientViewData.savingsAccountId) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Default Savings Account' | translate }}</span>
+          <span class="value">{{ clientViewData.savingsAccountId }}</span>
+        </div>
+      }
+    </div>
+  </div>
+
+  <!-- Non-Person Details Section (for Legal Entities) -->
+  @if (isLegalEntity() && clientViewData.clientNonPersonDetails) {
+    <div class="section">
+      <h3>{{ 'labels.heading.Entity Details' | translate }}</h3>
+      <div class="data-grid">
+        @if (clientViewData.clientNonPersonDetails.constitution) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Constitution' | translate }}</span>
+            <span class="value">{{ clientViewData.clientNonPersonDetails.constitution.name }}</span>
+          </div>
+        }
+        @if (clientViewData.clientNonPersonDetails.mainBusinessLine) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Main Business Line' | translate }}</span>
+            <span class="value">{{ clientViewData.clientNonPersonDetails.mainBusinessLine.name }}</span>
+          </div>
+        }
+        @if (clientViewData.clientNonPersonDetails.incorpValidityTillDate) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
+            <span class="value">{{ clientViewData.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
+          </div>
+        }
+        @if (clientViewData.clientNonPersonDetails.incorpNumber) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Incorporation No' | translate }}</span>
+            <span class="value">{{ clientViewData.clientNonPersonDetails.incorpNumber }}</span>
+          </div>
+        }
+        @if (clientViewData.clientNonPersonDetails.remarks) {
+          <div class="data-item full-width">
+            <span class="label">{{ 'labels.inputs.Remarks' | translate }}</span>
+            <span class="value">{{ clientViewData.clientNonPersonDetails.remarks }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  }
+
+  <!-- Contact Information Section -->
+  <div class="section">
+    <h3>{{ 'labels.heading.Contact Information' | translate }}</h3>
+    <div class="data-grid">
+      <div class="data-item">
+        <span class="label">{{ 'labels.inputs.Mobile Number' | translate }}</span>
+        <span class="value">{{ clientViewData.mobileNo || '-' }}</span>
+      </div>
+      <div class="data-item">
+        <span class="label">{{ 'labels.inputs.Email' | translate }}</span>
+        <span class="value">{{ clientViewData.emailAddress || '-' }}</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Classification Section -->
+  <div class="section">
+    <h3>{{ 'labels.heading.Classification' | translate }}</h3>
+    <div class="data-grid">
+      @if (clientViewData.clientType) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Client Type' | translate }}</span>
+          <span class="value">{{ clientViewData.clientType.name }}</span>
+        </div>
+      }
+      @if (clientViewData.clientClassification) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Client Classification' | translate }}</span>
+          <span class="value">{{ clientViewData.clientClassification.name }}</span>
+        </div>
+      }
+      @if (!clientViewData.clientType && !clientViewData.clientClassification) {
+        <div class="data-item">
+          <span class="value no-data">{{ 'labels.commons.No classification data available' | translate }}</span>
+        </div>
+      }
+    </div>
+  </div>
+
+  <!-- Group Membership Section -->
+  @if (clientViewData.groups && clientViewData.groups.length > 0) {
+    <div class="section">
+      <h3>{{ 'labels.heading.Group Membership' | translate }}</h3>
+      <div class="data-grid">
+        @for (group of clientViewData.groups; track group) {
+          <div class="data-item">
+            <span class="label">{{ 'labels.inputs.Group' | translate }}</span>
+            <span class="value">{{ group.name }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  }
+
+  <!-- Important Dates Section -->
+  <div class="section">
+    <h3>{{ 'labels.heading.Important Dates' | translate }}</h3>
+    <div class="data-grid">
+      @if (clientViewData.timeline?.submittedOnDate) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Submitted On' | translate }}</span>
+          <span class="value">{{ clientViewData.timeline.submittedOnDate | dateFormat }}</span>
+        </div>
+      }
+      @if (clientViewData.activationDate) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Activation Date' | translate }}</span>
+          <span class="value">{{ clientViewData.activationDate | dateFormat }}</span>
+        </div>
+      }
+      @if (clientViewData.timeline?.closedOnDate) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Closed Date' | translate }}</span>
+          <span class="value">{{ clientViewData.timeline.closedOnDate | dateFormat }}</span>
+        </div>
+      }
+    </div>
+  </div>
+
+  <!-- Status Section -->
+  <div class="section">
+    <h3>{{ 'labels.heading.Status' | translate }}</h3>
+    <div class="data-grid">
+      @if (clientViewData.status) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Client Status' | translate }}</span>
+          <span class="value">{{ 'labels.status.' + clientViewData.status.value | translate }}</span>
+        </div>
+      }
+      @if (clientViewData.subStatus) {
+        <div class="data-item">
+          <span class="label">{{ 'labels.inputs.Sub Status' | translate }}</span>
+          <span class="value">{{ clientViewData.subStatus.name }}</span>
+        </div>
+      }
+    </div>
+  </div>
+</div>

src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.scss

@@ -0,0 +1,73 @@
+/**
+ * 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/.
+ */
+
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  h3 {
+    margin: 1% auto;
+  }
+}
+
+.section {
+  margin-bottom: 2%;
+
+  h3 {
+    margin-bottom: 1%;
+    padding-bottom: 0.5%;
+    border-bottom: 1px solid var(--mdc-outlined-text-field-outline-color, #ccc);
+    font-weight: 500;
+  }
+}
+
+.data-grid {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 2%;
+
+  @media (width <=768px) {
+    flex-direction: column;
+  }
+}
+
+.data-item {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 23%;
+  padding: 1%;
+  margin-bottom: 1%;
+  border-radius: 4px;
+  border: 1px solid var(--mdc-outlined-text-field-outline-color, #e0e0e0);
+
+  @media (width <=768px) {
+    flex: 0 0 100%;
+  }
+
+  &.full-width {
+    flex: 0 0 100%;
+  }
+
+  .label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.25rem;
+    color: var(--md-sys-color-primary, #1074b9);
+  }
+
+  .value {
+    font-size: 1rem;
+
+    &.no-data {
+      font-style: italic;
+      opacity: 0.7;
+    }
+  }
+}

src/app/clients/clients-view/personal-data-tab/personal-data-tab.component.ts

@@ -0,0 +1,86 @@
+/**
+ * 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/.
+ */
+
+/** Angular Imports */
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+/** Custom Imports */
+import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
+import { DateFormatPipe } from '../../../pipes/date-format.pipe';
+
+/** Interfaces */
+interface ClientViewData {
+  id: number;
+  accountNo?: string;
+  externalId?: string;
+  status?: { id: number; code: string; value: string };
+  active?: boolean;
+  activationDate?: number[];
+  firstname?: string;
+  middlename?: string;
+  lastname?: string;
+  fullname?: string;
+  displayName?: string;
+  mobileNo?: string;
+  emailAddress?: string;
+  dateOfBirth?: number[];
+  gender?: { id: number; name: string; active?: boolean };
+  clientType?: { id: number; name: string; active?: boolean };
+  clientClassification?: { id: number; name: string; active?: boolean };
+  legalForm?: { id: number; name: string };
+  officeId?: number;
+  officeName?: string;
+  staffId?: number;
+  staffName?: string;
+  savingsProductId?: number;
+  savingsProductName?: string;
+  [key: string]: any; // Allow additional properties from API
+}
+
+/**
+ * Personal Data Tab Component.
+ * Displays all personal/client details in a read-only format.
+ */
+@Component({
+  selector: 'mifosx-personal-data-tab',
+  templateUrl: './personal-data-tab.component.html',
+  styleUrls: ['./personal-data-tab.component.scss'],
+  standalone: true,
+  imports: [
+    ...STANDALONE_SHARED_IMPORTS,
+    DateFormatPipe
+  ]
+})
+export class PersonalDataTabComponent {
+  private route = inject(ActivatedRoute);
+
+  /** Client View Data */
+  clientViewData!: ClientViewData;
+
+  constructor() {
+    this.route.parent.data.pipe(takeUntilDestroyed()).subscribe((data: { clientViewData: ClientViewData }) => {
+      this.clientViewData = data.clientViewData;
+    });
+  }
+
+  /**
+   * Check if client is a person (legalFormId = 1) or entity (legalFormId = 2)
+   */
+  isPerson(): boolean {
+    return this.clientViewData?.legalForm?.id === 1;
+  }
+
+  /**
+   * Check if client is a legal entity
+   */
+  isLegalEntity(): boolean {
+    return this.clientViewData?.legalForm?.id === 2;
+  }
+}

src/app/clients/clients.module.ts

@@ -29,6 +29,7 @@ import { EditNotesDialogComponent } from './clients-view/custom-dialogs/edit-not
 import { DocumentsTabComponent } from './clients-view/documents-tab/documents-tab.component';
 import { DatatableTabComponent } from './clients-view/datatable-tab/datatable-tab.component';
 import { AddressTabComponent } from './clients-view/address-tab/address-tab.component';
+import { PersonalDataTabComponent } from './clients-view/personal-data-tab/personal-data-tab.component';
 import { ChargesOverviewComponent } from './clients-view/charges/charges-overview/charges-overview.component';
 import { ClientActionsComponent } from './clients-view/client-actions/client-actions.component';
 import { ClientAssignStaffComponent } from './clients-view/client-actions/client-assign-staff/client-assign-staff.component';
@@ -79,6 +80,7 @@ import { ClientDatatableStepComponent } from './client-stepper/client-datatable-
     ClientsComponent,
     ClientsViewComponent,
     GeneralTabComponent,
+    PersonalDataTabComponent,
     FamilyMembersTabComponent,
     AddFamilyMemberComponent,
     EditFamilyMemberComponent,