feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API

- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview
- Hide Financial & Classification section for non-individual entities in personal data and preview
- Fix legal form column in clients list — fetch legalForm from client API for correct display
- Add person/business icon before client name in list rows
- Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API
- Add registration number format hint (mat-hint) based on constitution type
- Add spacing between verification row and constitution type dropdowns
- Reduce table cell padding and prevent action buttons from being clipped
- Add missing MPL-2.0 license headers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/organization/tellers/tellers.component.html

@@ -6,23 +6,31 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="container m-b-20 layout-row align-end gap-20px">
-  <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TELLER'">
-    <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Create Teller' | translate }}
-  </button>
-</div>
-
 <div class="container">
-  <div class="layout-row gap-20px">
-    <mat-form-field class="flex-fill">
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
-      <input matInput (keyup)="applyFilter($event.target.value)" />
-    </mat-form-field>
+  <div class="table-header">
+    <div class="table-title-group">
+      <h2 class="table-title">
+        <i class="fas fa-cash-register title-icon"></i>
+        {{ 'labels.heading.Teller / Cashier Management' | translate }}
+      </h2>
+    </div>
+    <div class="table-actions">
+      <mat-form-field class="table-search" appearance="outline">
+        <i matPrefix class="fas fa-search"></i>
+        <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+        <input matInput (keyup)="applyFilter($event.target.value)" />
+      </mat-form-field>
+      <div class="table-buttons">
+        <button mat-flat-button color="primary" class="btn-create" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TELLER'">
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>
+          {{ 'labels.buttons.Create Teller' | translate }}
+        </button>
+      </div>
+    </div>
   </div>
 
-  <div class="mat-elevation-z8">
-    <table mat-table [dataSource]="dataSource" matSort>
+  <div class="table-container">
+    <table mat-table [dataSource]="dataSource" matSort class="modern-table">
       <ng-container matColumnDef="officeName">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Branch' | translate }}</th>
         <td mat-cell *matCellDef="let teller">{{ teller.officeName }}</td>
@@ -36,18 +44,9 @@
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Status' | translate }}</th>
         <td mat-cell *matCellDef="let teller">
-          <div [className]="teller.status === 'ACTIVE' ? 'true' : 'false'">
-            <fa-icon
-              matTooltip="{{
-                teller.status === 'ACTIVE'
-                  ? ('labels.inputs.Active' | translate)
-                  : ('labels.catalogs.Inactive' | translate)
-              }}"
-              matTooltipPosition="right"
-              icon="circle"
-              size="lg"
-            ></fa-icon>
-          </div>
+          <span [class]="teller.status === 'ACTIVE' ? 'status-badge status-active' : 'status-badge status-closed'">
+            {{ teller.status === 'ACTIVE' ? ('labels.inputs.Active' | translate) : ('labels.catalogs.Inactive' | translate) }}
+          </span>
         </td>
       </ng-container>
 
@@ -59,14 +58,14 @@
       <ng-container matColumnDef="actions">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
         <td mat-cell *matCellDef="let teller" (click)="$event.stopPropagation()">
-          <button mat-button color="primary" [routerLink]="[teller.id, 'cashiers']">
-            <fa-icon icon="eye" class="m-r-10"></fa-icon>{{ 'labels.buttons.View Cashiers' | translate }}
-          </button>
+          <a class="cell-link" [routerLink]="[teller.id, 'cashiers']">
+            <i class="fas fa-eye" style="margin-right: 6px; font-size: 11px;"></i>{{ 'labels.buttons.View Cashiers' | translate }}
+          </a>
         </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="table-row"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>