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/users/create-user/create-user.component.html

@@ -6,225 +6,181 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="container">
-  <mat-card>
+<div class="cu-container">
+  <!-- Header -->
+  <div class="cu-header">
+    <button mat-stroked-button [routerLink]="['../']" class="cu-back">
+      <i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Users' | translate }}
+    </button>
+    <h2 class="cu-header__title">{{ 'labels.heading.Create User' | translate }}</h2>
+  </div>
+
+  <!-- Form Card -->
+  <div class="cu-card">
     <form [formGroup]="userForm" (ngSubmit)="submit()">
-      <mat-card-content>
-        <div #userFormRef class="layout-row-wrap layout-lt-md-column gap-2percent">
-          <mat-form-field class="flex-48">
+      <!-- Account Section -->
+      <div class="cu-section">
+        <div class="cu-section__header">
+          <i class="fas fa-user-circle"></i>
+          <h3>Account Details</h3>
+        </div>
+        <div class="cu-grid" #userFormRef>
+          <mat-form-field appearance="outline" class="cu-field">
             <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
             <input matInput required formControlName="username" />
             @if (userForm.controls.username.hasError('required')) {
-              <mat-error>
-                {{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
+              <mat-error>{{ 'labels.inputs.Username' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
             }
           </mat-form-field>
 
-          <mat-form-field class="flex-48">
+          <mat-form-field appearance="outline" class="cu-field">
             <mat-label>{{ 'labels.inputs.Email' | translate }}</mat-label>
             <input matInput [required]="userForm.controls.sendPasswordToEmail.value" formControlName="email" />
             @if (userForm.controls.email.hasError('email')) {
-              <mat-error>
-                {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.invalid' | translate }}</strong>
-              </mat-error>
+              <mat-error>{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.invalid' | translate }}</strong></mat-error>
             }
             @if (userForm.controls.email.hasError('required')) {
-              <mat-error>
-                {{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
+              <mat-error>{{ 'labels.inputs.Email' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
             }
           </mat-form-field>
 
-          <mat-form-field class="flex-48">
+          <mat-form-field appearance="outline" class="cu-field">
             <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname" />
             @if (userForm.controls.firstname.hasError('pattern')) {
-              <mat-error>
-                {{ 'labels.inputs.First Name' | translate }}
-                <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
-              </mat-error>
+              <mat-error>{{ 'labels.inputs.First Name' | translate }} <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong></mat-error>
             }
             @if (userForm.controls.firstname.hasError('required')) {
-              <mat-error>
-                {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
+              <mat-error>{{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
             }
           </mat-form-field>
 
-          <mat-form-field class="flex-48">
+          <mat-form-field appearance="outline" class="cu-field">
             <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname" />
             @if (userForm.controls.lastname.hasError('pattern')) {
-              <mat-error>
-                {{ 'labels.inputs.Last Name' | translate }}
-                <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong>
-              </mat-error>
+              <mat-error>{{ 'labels.inputs.Last Name' | translate }} <strong>{{ 'labels.commons.cannot begin with a special character or number' | translate }}</strong></mat-error>
             }
             @if (userForm.controls.lastname.hasError('required')) {
-              <mat-error>
-                {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
+              <mat-error>{{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
             }
           </mat-form-field>
+        </div>
+      </div>
 
-          <div class="password-never-expires-wrapper flex-48">
-            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
+      <!-- Security Section -->
+      <div class="cu-section">
+        <div class="cu-section__header">
+          <i class="fas fa-lock"></i>
+          <h3>Security</h3>
+        </div>
+        <div class="cu-grid">
+          <div class="cu-checkbox-row">
+            <mat-checkbox labelPosition="after" formControlName="passwordNeverExpires">
               {{ 'labels.inputs.Password never expires' | translate }}
             </mat-checkbox>
-          </div>
 
-          <div class="send-password-to-email-wrapper flex-48">
-            <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail">
+            <mat-checkbox labelPosition="after" formControlName="sendPasswordToEmail">
               {{ 'labels.inputs.Send password to email address' | translate }}
             </mat-checkbox>
           </div>
 
           @if (!userForm.controls.sendPasswordToEmail.value) {
-            <mat-form-field class="flex-48">
+            <mat-form-field appearance="outline" class="cu-field">
               <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
               <input matInput required type="password" formControlName="password" />
               @if (userForm.controls.password.hasError('required')) {
-                <mat-error>
-                  {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
+                <mat-error>{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
               }
               @if (userForm.controls.password.hasError('minlength')) {
-                <mat-error>
-                  {{ 'labels.commons.Password should be at least' | translate }}
-                  <strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
-                </mat-error>
+                <mat-error>{{ 'labels.commons.Password should be at least' | translate }} <strong>{{ 'labels.commons.12 characters long' | translate }}</strong></mat-error>
               }
               @if (userForm.controls.password.hasError('maxlength')) {
-                <mat-error>
-                  {{ 'labels.commons.Password should not be more than' | translate }}
-                  <strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
-                </mat-error>
+                <mat-error>{{ 'labels.commons.Password should not be more than' | translate }} <strong>{{ 'labels.commons.50 characters long' | translate }}</strong></mat-error>
               }
-              @if (
-                userForm.controls.password.hasError('pattern') &&
-                !(userForm.controls.password.hasError('minlength') || userForm.controls.password.hasError('maxlength'))
-              ) {
-                <mat-error>
-                  {{ 'labels.commons.Password should include a' | translate }}
-                  <strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }}
-                  <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{
-                    'labels.commons.lowercase and special character' | translate
-                  }}</strong>
-                </mat-error>
+              @if (userForm.controls.password.hasError('pattern') && !(userForm.controls.password.hasError('minlength') || userForm.controls.password.hasError('maxlength'))) {
+                <mat-error>{{ 'labels.commons.Password should include a' | translate }} <strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }} <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong>, <strong>{{ 'labels.commons.lowercase and special character' | translate }}</strong></mat-error>
               }
             </mat-form-field>
-          }
 
-          @if (!userForm.controls.sendPasswordToEmail.value) {
-            <mat-form-field class="flex-48">
+            <mat-form-field appearance="outline" class="cu-field">
               <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
               <input matInput required type="password" formControlName="repeatPassword" />
               @if (userForm.controls.repeatPassword.hasError('required')) {
-                <mat-error>
-                  {{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }}
-                  <strong>{{ 'labels.commons.required' | translate }}</strong>
-                </mat-error>
+                <mat-error>{{ 'labels.inputs.Password' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
               }
             </mat-form-field>
           }
 
-          @if (
-            userForm.errors?.passwordsDoNotMatch &&
-            !userForm.controls.password.hasError('required') &&
-            !userForm.controls.repeatPassword.hasError('required')
-          ) {
-            <p class="flex-98 reset-password-error">
-              {{ 'labels.inputs.Passwords' | translate }}
-              <strong>{{ 'labels.commons.do not match' | translate }}</strong>
-            </p>
+          @if (userForm.errors?.passwordsDoNotMatch && !userForm.controls.password.hasError('required') && !userForm.controls.repeatPassword.hasError('required')) {
+            <p class="cu-error">{{ 'labels.inputs.Passwords' | translate }} <strong>{{ 'labels.commons.do not match' | translate }}</strong></p>
           }
+        </div>
+      </div>
 
-          <mat-form-field class="flex-48">
+      <!-- Assignment Section -->
+      <div class="cu-section">
+        <div class="cu-section__header">
+          <i class="fas fa-sitemap"></i>
+          <h3>Assignment</h3>
+        </div>
+        <div class="cu-grid">
+          <mat-form-field appearance="outline" class="cu-field">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               @for (office of officesData; track office) {
-                <mat-option [value]="office.id">
-                  {{ office.name }}
-                </mat-option>
+                <mat-option [value]="office.id">{{ office.name }}</mat-option>
               }
             </mat-select>
             @if (userForm.controls.officeId.hasError('required')) {
-              <mat-error>
-                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-                <strong>{{ 'labels.commons.required' | translate }}</strong>
-              </mat-error>
+              <mat-error>{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong></mat-error>
             }
           </mat-form-field>
 
-          <mat-form-field class="flex-48">
+          <mat-form-field appearance="outline" class="cu-field">
             <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               @for (staff of staffData; track staff) {
-                <mat-option [value]="staff.id">
-                  {{ staff.displayName }}
-                </mat-option>
+                <mat-option [value]="staff.id">{{ staff.displayName }}</mat-option>
               }
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field class="flex-48">
+          <mat-form-field appearance="outline" class="cu-field cu-field--full">
             <mat-label>{{ 'labels.inputs.Roles' | translate }}</mat-label>
             <mat-select required formControlName="roles" multiple>
               @for (role of rolesData; track role) {
-                <mat-option [value]="role.id">
-                  {{ role.name }}
-                </mat-option>
+                <mat-option [value]="role.id">{{ role.name }}</mat-option>
               }
             </mat-select>
             @if (userForm.controls.roles.hasError('required')) {
-              <mat-error>
-                {{ 'labels.commons.At least one role' | translate }}
-                <strong>{{ 'labels.commons.must be selected' | translate }}</strong>
-              </mat-error>
+              <mat-error>{{ 'labels.commons.At least one role' | translate }} <strong>{{ 'labels.commons.must be selected' | translate }}</strong></mat-error>
             }
           </mat-form-field>
         </div>
-      </mat-card-content>
+      </div>
 
-      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
-        <button type="button" mat-raised-button [routerLink]="['../']">
+      <!-- Actions -->
+      <div class="cu-actions">
+        <button type="button" mat-stroked-button [routerLink]="['../']" class="cu-actions__cancel">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
-        <button mat-raised-button color="primary" [disabled]="!userForm.valid">
-          {{ 'labels.buttons.Submit' | translate }}
+        <button type="submit" mat-flat-button color="primary" [disabled]="!userForm.valid" class="cu-actions__submit">
+          <i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
         </button>
-      </mat-card-actions>
+      </div>
     </form>
-  </mat-card>
+  </div>
 </div>
 
+<!-- Config Wizard Template -->
 <ng-template #templateUserFormRef let-popover="popover">
   <h2>{{ 'labels.heading.Create User' | translate }}</h2>
-  <p class="mw400">
-    {{ 'labels.text.Filling Details' | translate }}:
-    <a [href]="'users' | documentationLink" target="_blank" rel="noopener noreferrer">{{
-      'labels.inputs.Users' | translate
-    }}</a>
-  </p>
+  <p class="mw400">{{ 'labels.text.Filling Details' | translate }}: <a [href]="'users' | documentationLink" target="_blank" rel="noopener noreferrer">{{ 'labels.inputs.Users' | translate }}</a></p>
   <div class="layout-row align-end gap-2px responsive-column">
-    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
-      {{ 'labels.buttons.Close' | translate }}
-    </button>
-    <button mat-raised-button color="primary" (click)="popover.close()">
-      {{ 'labels.buttons.Create User' | translate }}
-    </button>
-    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">
-      {{ 'labels.buttons.Back' | translate }}
-    </button>
-    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">
-      {{ 'labels.buttons.Next' | translate }}
-    </button>
+    <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close()">{{ 'labels.buttons.Create User' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close(); previousStep()">{{ 'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close(); nextStep()">{{ 'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/users/create-user/create-user.component.scss

@@ -6,16 +6,148 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.password-never-expires-wrapper {
-  padding: 17.5px 0;
+$primary: #1353a0;
+$accent: #0ea5e9;
+$border: #e2e8f0;
+$gray-50: #f8f9fa;
+$gray-200: #e8eaed;
+$gray-500: #9aa0a6;
+$gray-700: #5f6368;
+$gray-900: #202124;
+
+.cu-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px 16px;
 }
 
-.send-password-to-email-wrapper {
-  padding: 17.5px 0;
+// Header
+.cu-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 20px;
+
+  &__title {
+    font-size: 18px;
+    font-weight: 600;
+    color: $gray-900;
+    margin: 0;
+  }
 }
 
-.reset-password-error {
-  color: #f44336;
-  font-size: 80%;
+.cu-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; }
+}
+
+// Card
+.cu-card {
+  background: #fff;
+  border: 1px solid $border;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+// Section
+.cu-section {
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 24px;
+    background: $gray-50;
+    border-bottom: 1px solid $gray-200;
+
+    i {
+      font-size: 14px;
+      color: $accent;
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: $gray-900;
+    }
+  }
+
+  & + & {
+    border-top: 1px solid $gray-200;
+  }
+}
+
+// Grid
+.cu-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px 16px;
+  padding: 16px 24px;
+
+  @media (max-width: 600px) { grid-template-columns: 1fr; }
+}
+
+.cu-field {
+  width: 100%;
+
+  &--full {
+    grid-column: 1 / -1;
+  }
+}
+
+.cu-checkbox-row {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: 24px;
+  padding: 8px 0;
+  flex-wrap: wrap;
+
+  ::ng-deep .mat-mdc-checkbox {
+    font-size: 13px;
+  }
+}
+
+.cu-error {
+  grid-column: 1 / -1;
+  color: #dc2626;
+  font-size: 12px;
   margin: 0;
+  padding: 0 0 8px;
+}
+
+// Actions
+.cu-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 24px;
+  border-top: 1px solid $gray-200;
+  background: $gray-50;
+
+  &__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; }
+  }
 }