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

@@ -6,23 +6,34 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="container">
-  <mat-card>
+<div class="ec-container">
+  <div class="ec-header">
+    <button mat-stroked-button [routerLink]="['../']" class="ec-back">
+      <i class="fas fa-arrow-left"></i> {{ 'labels.heading.Cashiers' | translate }}
+    </button>
+    <h2 class="ec-header__title">{{ 'labels.heading.Edit Cashier' | translate }}</h2>
+  </div>
+
+  <div class="ec-card">
     <form [formGroup]="editCashierForm" (ngSubmit)="submit()">
-      <mat-card-content>
-        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field class="flex-48">
+      <div class="ec-section">
+        <div class="ec-section__header">
+          <i class="fas fa-user-tie"></i>
+          <h3>{{ 'labels.heading.Cashier Assignment' | translate }}</h3>
+        </div>
+        <div class="ec-grid">
+          <mat-form-field appearance="outline" class="ec-field">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
-            <input matInput required autofocus [value]="cashierData.template.officeName" disabled />
+            <input matInput required [value]="cashierData.template.officeName" disabled />
           </mat-form-field>
 
-          <mat-form-field class="flex-48">
+          <mat-form-field appearance="outline" class="ec-field">
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
-            <input matInput required autofocus [value]="cashierData.data.tellerName" disabled />
+            <input matInput required [value]="cashierData.data.tellerName" disabled />
           </mat-form-field>
 
           @if (isStaffId) {
-            <mat-form-field class="flex-48">
+            <mat-form-field appearance="outline" class="ec-field">
               <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
               <mat-select formControlName="staffId">
                 @for (staff of cashierData.template.staffOptions; track staff) {
@@ -35,24 +46,30 @@
           }
 
           @if (!isStaffId) {
-            <mat-form-field class="flex-48">
+            <mat-form-field appearance="outline" class="ec-field">
               <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
-              @if (!isStaffId) {
-                <mat-select formControlName="staffId">
-                  <mat-option [value]="cashierData.data.staffId">
-                    {{ 'labels.inputs.Select Option' | translate }}
-                  </mat-option>
-                </mat-select>
-              }
+              <mat-select formControlName="staffId">
+                <mat-option [value]="cashierData.data.staffId">
+                  {{ 'labels.inputs.Select Option' | translate }}
+                </mat-option>
+              </mat-select>
             </mat-form-field>
           }
 
-          <mat-form-field class="flex-48">
+          <mat-form-field appearance="outline" class="ec-field">
             <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
-            <input matInput autofocus formControlName="description" />
+            <input matInput formControlName="description" />
           </mat-form-field>
+        </div>
+      </div>
 
-          <mat-form-field class="flex-48" (click)="fromDatePicker.open()">
+      <div class="ec-section">
+        <div class="ec-section__header">
+          <i class="fas fa-calendar-alt"></i>
+          <h3>{{ 'labels.heading.Schedule' | translate }}</h3>
+        </div>
+        <div class="ec-grid">
+          <mat-form-field appearance="outline" class="ec-field" (click)="fromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.From' | translate }}</mat-label>
             <input
               matInput
@@ -72,7 +89,7 @@
             }
           </mat-form-field>
 
-          <mat-form-field class="flex-48" (click)="toDatePicker.open()">
+          <mat-form-field appearance="outline" class="ec-field" (click)="toDatePicker.open()">
             <mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
             <input
               matInput
@@ -93,21 +110,17 @@
           </mat-form-field>
 
           @if (!editCashierForm.value.isFullDay) {
-            <div class="flex-48 layout-row gap-10px">
-              <mat-form-field class="flex-50">
-                <mat-label
-                  >{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label
-                >
+            <div class="ec-time-row">
+              <mat-form-field appearance="outline" class="ec-time-field">
+                <mat-label>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label>
                 <mat-select formControlName="hourStartTime">
                   @for (hour of hours; track hour) {
                     <mat-option [value]="hour">{{ hour }}</mat-option>
                   }
                 </mat-select>
               </mat-form-field>
-              <mat-form-field class="flex-50">
-                <mat-label
-                  >{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label
-                >
+              <mat-form-field appearance="outline" class="ec-time-field">
+                <mat-label>{{ 'labels.inputs.Start Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label>
                 <mat-select formControlName="minStartTime">
                   @for (minute of minutes; track minute) {
                     <mat-option [value]="minute">{{ minute }}</mat-option>
@@ -115,21 +128,17 @@
                 </mat-select>
               </mat-form-field>
             </div>
-            <div class="flex-48 layout-row gap-10px">
-              <mat-form-field class="flex-50">
-                <mat-label
-                  >{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label
-                >
+            <div class="ec-time-row">
+              <mat-form-field appearance="outline" class="ec-time-field">
+                <mat-label>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Hour' | translate }})</mat-label>
                 <mat-select formControlName="hourEndTime">
                   @for (hour of hours; track hour) {
                     <mat-option [value]="hour">{{ hour }}</mat-option>
                   }
                 </mat-select>
               </mat-form-field>
-              <mat-form-field class="flex-50">
-                <mat-label
-                  >{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label
-                >
+              <mat-form-field appearance="outline" class="ec-time-field">
+                <mat-label>{{ 'labels.inputs.End Time' | translate }} ({{ 'labels.inputs.Minute' | translate }})</mat-label>
                 <mat-select formControlName="minEndTime">
                   @for (minute of minutes; track minute) {
                     <mat-option [value]="minute">{{ minute }}</mat-option>
@@ -138,7 +147,7 @@
               </mat-form-field>
             </div>
             @if (editCashierForm.hasError('invalidTimeRange')) {
-              <div class="flex-48">
+              <div class="ec-field--full">
                 <mat-error>
                   {{ 'labels.inputs.End Time' | translate }} {{ 'labels.commons.must' | translate }}
                   {{ 'labels.commons.be' | translate }} {{ 'labels.commons.greater than' | translate }}
@@ -148,27 +157,29 @@
             }
           }
 
-          <div class="space flex-100">
-            <mat-checkbox labelPosition="before" formControlName="isFullDay">
+          <div class="ec-checkbox-row">
+            <mat-checkbox labelPosition="after" formControlName="isFullDay">
               {{ 'labels.inputs.Full Day' | translate }}?
             </mat-checkbox>
           </div>
         </div>
-      </mat-card-content>
+      </div>
 
-      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
-        <button type="button" mat-raised-button [routerLink]="['../']">
+      <div class="ec-actions">
+        <button type="button" mat-stroked-button [routerLink]="['../']" class="ec-actions__cancel">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
         <button
-          mat-raised-button
+          type="submit"
+          mat-flat-button
           color="primary"
           [disabled]="!editCashierForm.valid"
+          class="ec-actions__submit"
           *mifosxHasPermission="'UPDATECASHIERALLOCATION_TELLER'"
         >
-          {{ 'labels.buttons.Submit' | translate }}
+          <i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
         </button>
-      </mat-card-actions>
+      </div>
     </form>
-  </mat-card>
+  </div>
 </div>

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

@@ -6,6 +6,149 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.space {
-  padding-top: 10px;
+$primary: #1353a0;
+$accent: #0ea5e9;
+$border: #e2e8f0;
+$gray-50: #f8f9fa;
+$gray-200: #e8eaed;
+$gray-500: #9aa0a6;
+$gray-700: #5f6368;
+$gray-900: #202124;
+
+:host {
+  display: block;
+
+  .ec-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px 16px;
+  }
+
+  .ec-header {
+    display: flex !important;
+    align-items: center !important;
+    gap: 14px;
+    margin-bottom: 20px;
+
+    &__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: $gray-900;
+      margin: 0;
+    }
+  }
+
+  .ec-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; }
+  }
+
+  .ec-card {
+    background: #fff;
+    border: 1px solid $border;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .ec-section {
+    & + & {
+      border-top: 1px solid $gray-200;
+    }
+
+    &__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;
+      }
+    }
+  }
+
+  .ec-grid {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 4px 16px;
+    padding: 16px 24px;
+
+    @media (max-width: 600px) { grid-template-columns: 1fr !important; }
+  }
+
+  .ec-field {
+    width: 100% !important;
+
+    &--full {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .ec-time-row {
+    display: flex !important;
+    gap: 12px;
+
+    @media (max-width: 600px) { flex-direction: column; gap: 4px; }
+  }
+
+  .ec-time-field {
+    flex: 1;
+    width: 100% !important;
+  }
+
+  .ec-checkbox-row {
+    grid-column: 1 / -1;
+    padding: 4px 0;
+
+    ::ng-deep .mat-mdc-checkbox {
+      font-size: 13px;
+    }
+  }
+
+  .ec-actions {
+    display: flex !important;
+    justify-content: flex-end !important;
+    gap: 10px;
+    padding: 14px 24px;
+    border-top: 1px solid $gray-200;
+    background: $gray-50 !important;
+
+    &__cancel {
+      border-radius: 8px !important;
+      font-size: 13px !important;
+      font-weight: 600 !important;
+      height: 36px !important;
+      border-color: $border !important;
+      color: $gray-700 !important;
+    }
+
+    &__submit {
+      border-radius: 8px !important;
+      font-size: 13px !important;
+      font-weight: 600 !important;
+      height: 36px !important;
+      box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
+
+      i { margin-right: 6px; font-size: 12px; }
+    }
+  }
 }