feat: complete UI redesign — client creation tabs, footer, home page, CIF & occupation fields

- Client creation: replaced vertical stepper with 3-tab layout (General, KYC & Nominee, Preview)
- All form fields redesigned with appearance="outline" and section grouping
- Preview tab with profile card, info tables, KYC details, family members
- Footer redesigned: security bar, LincShield certifications, regulatory & legal, quick navigation, support & contact, LincPay branding
- Home page redesigned: welcome banner, quick action cards, info row
- Client view header redesigned: ID chips row (Account No, CIF Number, External Id), 4-column details grid
- Added CIF Number column to clients list table
- Added CIF Number display to client view sidebar and personal data tab
- Added occupationCategoryId and occupationId dropdowns to client creation form
- Added occupation fields to client view sidebar, personal data tab, and preview
- Added 51+ missing translation keys to en-US.json
- Toolbar: added Last login chip
- Registered faUserPlus icon

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

src/app/clients/create-client/create-client.component.ts

@@ -19,12 +19,14 @@ import { ClientFamilyMembersStepComponent } from '../client-stepper/client-famil
 import { ClientAddressStepComponent } from '../client-stepper/client-address-step/client-address-step.component';
 import { ClientDatatableStepComponent } from '../client-stepper/client-datatable-step/client-datatable-step.component';
 import { ClientKycStepComponent } from '../client-stepper/client-kyc-step/client-kyc-step.component';
+import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
-import { MatStepper, MatStepperIcon, MatStep, MatStepLabel } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDivider } from '@angular/material/divider';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
 /**
@@ -36,11 +38,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   styleUrls: ['./create-client.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
-    MatStepper,
-    MatStepperIcon,
+    MatTabsModule,
+    MatIconModule,
+    MatDivider,
     FaIconComponent,
-    MatStep,
-    MatStepLabel,
     ClientGeneralStepComponent,
     ClientFamilyMembersStepComponent,
     ClientAddressStepComponent,
@@ -55,19 +56,15 @@ export class CreateClientComponent {
   private clientsService = inject(ClientsService);
   private settingsService = inject(SettingsService);
 
-  /** Client General Step */
-  @ViewChild(ClientGeneralStepComponent, { static: true }) clientGeneralStep: ClientGeneralStepComponent;
-  /** Client Family Members Step */
+  @ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
   @ViewChild('clientFamily') clientFamilyMembersStep: ClientFamilyMembersStepComponent;
-  /** Client Address Step */
   @ViewChild('clientAddress') clientAddressStep: ClientAddressStepComponent;
-  /** Client KYC Step */
   @ViewChild('clientKyc') clientKycStep: ClientKycStepComponent;
-  /** Get handle on dtclient tags in the template */
   @ViewChildren('dtclient') clientDatatables: QueryList<ClientDatatableStepComponent>;
 
   datatables: any = [];
   legalFormType = 1;
+  selectedTabIndex = 0;
 
   /** Client Template */
   clientTemplate: any;
@@ -89,38 +86,26 @@ export class CreateClientComponent {
     });
   }
 
-  /**
-   * Retrieves general information about client.
-   */
   get clientGeneralForm() {
-    return this.clientGeneralStep.createClientForm;
+    return this.clientGeneralStep?.createClientForm;
   }
 
-  /**
-   * Retrieves the client object
-   */
   get client() {
-    if (this.clientTemplate.isAddressEnabled) {
-      return {
-        ...this.clientGeneralStep.clientGeneralDetails,
-        ...this.clientFamilyMembersStep.familyMembers,
-        ...this.clientAddressStep.address
-      };
-    } else {
-      return {
-        ...this.clientGeneralStep.clientGeneralDetails,
-        ...this.clientFamilyMembersStep.familyMembers
-      };
-    }
+    const general = this.clientGeneralStep?.clientGeneralDetails || {};
+    const family = this.clientFamilyMembersStep?.familyMembers || {};
+    const addr = this.clientTemplate.isAddressEnabled && this.clientAddressStep ? this.clientAddressStep.address : {};
+    return { ...general, ...family, ...addr };
   }
 
   areFormvalids(): boolean {
+    if (!this.clientGeneralStep || !this.clientGeneralForm) {
+      return false;
+    }
     let areValids = this.clientGeneralForm.valid;
-    // Block form if sanctions match found
     if (this.clientGeneralStep.sanctionsBlocked) {
       return false;
     }
-    if (this.clientTemplate.isAddressEnabled) {
+    if (this.clientTemplate.isAddressEnabled && this.clientAddressStep) {
       areValids = areValids && this.clientAddressStep.address.address.length > 0;
     }
     if (this.clientTemplate.datatables && this.clientTemplate.datatables.length > 0 && this.clientDatatables) {
@@ -128,7 +113,6 @@ export class CreateClientComponent {
         areValids = areValids && clientDatatable.datatableForm.valid;
       });
     }
-
     return areValids;
   }