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/cashiers/view-cashier/view-cashier.component.html

@@ -6,79 +6,55 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="layout-row align-end gap-2px responsive-column container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CASHIER'">
-    <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Edit' | translate }}
-  </button>
-  <button mat-raised-button color="warn" (click)="deleteCashier()" *mifosxHasPermission="'DELETECASHIER_TELLER'">
-    <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    {{ 'labels.buttons.Delete' | translate }}
-  </button>
-</div>
+<div class="vc-container">
+  <div class="vc-header">
+    <button mat-stroked-button [routerLink]="['..']" class="vc-back">
+      <i class="fas fa-arrow-left"></i> {{ 'labels.heading.Cashiers' | translate }}
+    </button>
+    <h2 class="vc-header__title">{{ cashierData.staffName }}</h2>
+    <div class="vc-header__spacer"></div>
+    <button mat-flat-button color="primary" [routerLink]="['edit']" class="vc-header__action" *mifosxHasPermission="'UPDATE_CASHIER'">
+      <i class="fas fa-pen"></i> {{ 'labels.buttons.Edit' | translate }}
+    </button>
+    <button mat-stroked-button color="warn" (click)="deleteCashier()" class="vc-header__delete" *mifosxHasPermission="'DELETECASHIER_TELLER'">
+      <i class="fas fa-trash-alt"></i> {{ 'labels.buttons.Delete' | translate }}
+    </button>
+  </div>
 
-<div class="container">
-  <mat-card>
-    <mat-card-content>
-      <div class="layout-row-wrap">
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Name' | translate }}
+  <div class="vc-card">
+    <div class="vc-section">
+      <div class="vc-section__header">
+        <i class="fas fa-user-tie"></i>
+        <h3>{{ 'labels.heading.Cashier Details' | translate }}</h3>
+      </div>
+      <div class="vc-details">
+        <div class="vc-detail">
+          <span class="vc-detail__label">{{ 'labels.inputs.Name' | translate }}</span>
+          <span class="vc-detail__value">{{ cashierData.staffName }}</span>
         </div>
-
-        <div class="flex-50">
-          {{ cashierData.staffName }}
+        <div class="vc-detail">
+          <span class="vc-detail__label">{{ 'labels.inputs.Teller' | translate }}</span>
+          <span class="vc-detail__value">{{ cashierData.tellerName }}</span>
         </div>
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Teller' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ cashierData.tellerName }}
-        </div>
-
         @if (cashierData.description !== '') {
-          <div class="flex-50 header">
-            {{ 'labels.inputs.Description' | translate }}
+          <div class="vc-detail vc-detail--full">
+            <span class="vc-detail__label">{{ 'labels.inputs.Description' | translate }}</span>
+            <span class="vc-detail__value">{{ cashierData.description }}</span>
           </div>
         }
-
-        @if (cashierData.description !== '') {
-          <div class="flex-50">
-            {{ cashierData.description }}
-          </div>
-        }
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Start Date' | translate }}
+        <div class="vc-detail">
+          <span class="vc-detail__label">{{ 'labels.inputs.Start Date' | translate }}</span>
+          <span class="vc-detail__value">{{ cashierData.startDate | dateFormat }}</span>
         </div>
-
-        <div class="flex-50">
-          {{ cashierData.startDate | dateFormat }}
+        <div class="vc-detail">
+          <span class="vc-detail__label">{{ 'labels.inputs.End Date' | translate }}</span>
+          <span class="vc-detail__value">{{ cashierData.endDate | dateFormat }}</span>
         </div>
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.End Date' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ cashierData.endDate | dateFormat }}
-        </div>
-
-        <div class="flex-50 header">
-          {{ 'labels.inputs.Full Day/Time' | translate }}
-        </div>
-
-        <div class="flex-50">
-          {{ cashierData.isFullDay }}
+        <div class="vc-detail">
+          <span class="vc-detail__label">{{ 'labels.inputs.Full Day/Time' | translate }}</span>
+          <span class="vc-detail__value">{{ cashierData.isFullDay | yesNo }}</span>
         </div>
       </div>
-    </mat-card-content>
-
-    <mat-card-actions class="layout-row align-center gap-5px responsive-column">
-      <button type="button" color="primary" mat-raised-button [routerLink]="['..']">
-        {{ 'labels.buttons.Back' | translate }}
-      </button>
-    </mat-card-actions>
-  </mat-card>
+    </div>
+  </div>
 </div>

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.scss

@@ -6,17 +6,136 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.container {
-  max-width: 37rem;
+$primary: #1353a0;
+$accent: #0ea5e9;
+$border: #e2e8f0;
+$gray-50: #f8f9fa;
+$gray-200: #e8eaed;
+$gray-500: #9aa0a6;
+$gray-700: #5f6368;
+$gray-900: #202124;
 
-  .content {
-    div {
-      margin: 1rem 0;
-      word-wrap: break-word;
+:host {
+  display: block;
 
-      &.header {
-        font-weight: 500;
+  .vc-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px 16px;
+  }
+
+  .vc-header {
+    display: flex !important;
+    align-items: center !important;
+    gap: 14px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+
+    &__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: $gray-900;
+      margin: 0;
+    }
+
+    &__spacer {
+      flex: 1;
+    }
+
+    &__action {
+      border-radius: 8px !important;
+      font-size: 12px !important;
+      font-weight: 600 !important;
+      height: 32px !important;
+      box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
+
+      i { margin-right: 6px; font-size: 12px; }
+    }
+
+    &__delete {
+      border-radius: 8px !important;
+      font-size: 12px !important;
+      font-weight: 600 !important;
+      height: 32px !important;
+
+      i { margin-right: 6px; font-size: 12px; }
+    }
+  }
+
+  .vc-back {
+    border-radius: 8px !important;
+    font-size: 12px !important;
+    font-weight: 600 !important;
+    height: 32px !important;
+    border-color: $border !important;
+    color: $gray-500 !important;
+
+    i { margin-right: 6px; }
+
+    &:hover { color: $primary !important; border-color: $primary !important; }
+  }
+
+  .vc-card {
+    background: #fff;
+    border: 1px solid $border;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .vc-section {
+    &__header {
+      display: flex !important;
+      flex-direction: row !important;
+      align-items: center !important;
+      gap: 10px;
+      padding: 12px 24px;
+      background: $gray-50 !important;
+      border-bottom: 1px solid $gray-200;
+
+      i {
+        font-size: 14px;
+        color: $accent;
+      }
+
+      h3 {
+        margin: 0 !important;
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        color: $gray-900;
       }
     }
   }
+
+  .vc-details {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 16px;
+    padding: 20px 24px;
+
+    @media (max-width: 600px) { grid-template-columns: 1fr !important; }
+  }
+
+  .vc-detail {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 4px;
+
+    &--full {
+      grid-column: 1 / -1;
+    }
+
+    &__label {
+      font-size: 12px;
+      font-weight: 600;
+      color: $gray-500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    &__value {
+      font-size: 14px;
+      color: $gray-900;
+      word-wrap: break-word;
+    }
+  }
 }

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.ts

@@ -18,6 +18,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { OrganizationService } from 'app/organization/organization.service';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { DateFormatPipe } from '../../../../pipes/date-format.pipe';
+import { YesnoPipe } from '../../../../pipes/yesno.pipe';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -30,7 +31,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     FaIconComponent,
-    DateFormatPipe
+    DateFormatPipe,
+    YesnoPipe
   ]
 })
 export class ViewCashierComponent {