@rolatech/angular-onboarding 20.3.0-beta.2 → 20.3.0-beta.4

package/fesm2022/rolatech-angular-onboarding.mjs

@@ -1,43 +1,121 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { inject, DestroyRef, signal, computed, effect, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, output } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
-import { FormBuilder, Validators } from '@angular/forms';
-import { OnboardingApplicantService, OnboardingAdminService, onboardingStatusLabel, onboardingIssueTypeLabel, onboardingDocumentTypeLabel } from '@rolatech/angular-services';
-import { firstValueFrom } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { OnboardingApplicantService, OnboardingAdminService, onboardingStatusLabel, onboardingIssueTypeLabel, onboardingDocumentTypeLabel, onboardingVatModeLabel } from '@rolatech/angular-services';
+import { firstValueFrom, debounceTime } from 'rxjs';
 import { NgClass, DatePipe } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
 
 const applicationIdGuard = (route) => Boolean(route.paramMap.get('applicationId'));
 
-const INDIVIDUAL_REQUIRED_DOCUMENTS = [
-    { type: 'PASSPORT', label: 'Passport' },
-    { type: 'PROOF_OF_ADDRESS', label: 'Proof of address' },
+const INDIVIDUAL_REQUIRED_DOCUMENTS$1 = [
+    {
+        type: 'PASSPORT',
+        label: 'Applicant passport',
+        helperText: 'Upload a clear PDF, JPG, or PNG of the passport identity page.',
+    },
+];
+const COMPANY_BASE_REQUIRED_DOCUMENTS$1 = [
+    {
+        type: 'PASSPORT',
+        label: 'Director passport',
+        helperText: 'Upload the passport for the company director handling the application.',
+    },
+    {
+        type: 'CERTIFICATE_OF_INCORPORATION',
+        label: 'Certificate of incorporation',
+        helperText: 'Use the latest registered incorporation certificate.',
+    },
+    {
+        type: 'INDUSTRY_CERTIFICATE',
+        label: 'Industry certificate',
+        helperText: 'Accepted certificates include RICS, ARLA, NAEA, or Propertymark.',
+    },
+];
+const UK_COMPANY_REQUIRED_DOCUMENTS$1 = [
+    ...COMPANY_BASE_REQUIRED_DOCUMENTS$1,
+    {
+        type: 'OTHER',
+        label: 'Redress / AML evidence',
+        helperText: 'Upload the redress scheme certificate and HMRC AML evidence in one file if needed.',
+    },
 ];
-const COMPANY_REQUIRED_DOCUMENTS = [
-    { type: 'PASSPORT', label: 'Passport' },
-    { type: 'CERTIFICATE_OF_INCORPORATION', label: 'Certificate of incorporation' },
-    { type: 'INDUSTRY_CERTIFICATE', label: 'Industry certificate' },
+const CHINA_COMPANY_REQUIRED_DOCUMENTS$1 = [
+    ...COMPANY_BASE_REQUIRED_DOCUMENTS$1,
+    {
+        type: 'OTHER',
+        label: 'Stamped business license',
+        helperText: 'Upload the original scanned business license.',
+        warning: 'China company business licenses must include the official company stamp.',
+    },
 ];
+const SORT_CODE_PATTERN = /^\d{6}$/;
+const ACCOUNT_NUMBER_PATTERN = /^\d{8}$/;
 class AgentApplyFacade {
     onboardingService = inject(OnboardingApplicantService);
     fb = inject(FormBuilder);
-    http = inject(HttpClient);
+    destroyRef = inject(DestroyRef);
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : []));
     submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    lastLocalDraftSavedAt = signal(null, ...(ngDevMode ? [{ debugName: "lastLocalDraftSavedAt" }] : []));
     application = signal(null, ...(ngDevMode ? [{ debugName: "application" }] : []));
     detail = signal(null, ...(ngDevMode ? [{ debugName: "detail" }] : []));
+    uploadStates = signal({}, ...(ngDevMode ? [{ debugName: "uploadStates" }] : []));
     loadedApplicationId = signal(null, ...(ngDevMode ? [{ debugName: "loadedApplicationId" }] : []));
     applicationId = computed(() => this.detail()?.id ?? this.application()?.id ?? null, ...(ngDevMode ? [{ debugName: "applicationId" }] : []));
     status = computed(() => this.detail()?.status ?? this.application()?.status ?? null, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    applicantType = computed(() => this.detail()?.applicantType ?? this.application()?.applicantType ?? 'INDIVIDUAL', ...(ngDevMode ? [{ debugName: "applicantType" }] : []));
+    companyCountry = computed(() => (this.detail()?.companyCountry ?? this.application()?.companyCountry ?? 'UK').toUpperCase(), ...(ngDevMode ? [{ debugName: "companyCountry" }] : []));
+    isCompany = computed(() => this.applicantType() === 'COMPANY', ...(ngDevMode ? [{ debugName: "isCompany" }] : []));
+    isIndividual = computed(() => this.applicantType() === 'INDIVIDUAL', ...(ngDevMode ? [{ debugName: "isIndividual" }] : []));
+    isUkCompany = computed(() => this.isCompany() && this.companyCountry() === 'UK', ...(ngDevMode ? [{ debugName: "isUkCompany" }] : []));
+    isChinaCompany = computed(() => this.isCompany() && this.companyCountry() === 'CN', ...(ngDevMode ? [{ debugName: "isChinaCompany" }] : []));
+    hasSubmittedState = computed(() => {
+        const status = this.status();
+        return status === 'SUBMITTED' || status === 'IN_REVIEW' || status === 'APPROVED' || status === 'FAILED';
+    }, ...(ngDevMode ? [{ debugName: "hasSubmittedState" }] : []));
+    hasGeneralIssue = computed(() => this.issues().some((issue) => !issue.resolved && issue.issueType === 'GENERAL'), ...(ngDevMode ? [{ debugName: "hasGeneralIssue" }] : []));
     documents = computed(() => this.detail()?.documents ?? [], ...(ngDevMode ? [{ debugName: "documents" }] : []));
     issues = computed(() => this.detail()?.issues ?? [], ...(ngDevMode ? [{ debugName: "issues" }] : []));
     timeline = computed(() => this.detail()?.timeline ?? [], ...(ngDevMode ? [{ debugName: "timeline" }] : []));
+    fieldIssueComments = computed(() => {
+        const comments = {};
+        for (const issue of this.issues()) {
+            if (issue.resolved || !issue.fieldKey || comments[issue.fieldKey]) {
+                continue;
+            }
+            comments[issue.fieldKey] = issue.comment;
+        }
+        return comments;
+    }, ...(ngDevMode ? [{ debugName: "fieldIssueComments" }] : []));
+    documentIssueComments = computed(() => {
+        const comments = {};
+        for (const issue of this.issues()) {
+            if (issue.resolved || !issue.documentType || comments[issue.documentType]) {
+                continue;
+            }
+            comments[issue.documentType] = issue.comment;
+        }
+        return comments;
+    }, ...(ngDevMode ? [{ debugName: "documentIssueComments" }] : []));
     requiredDocuments = computed(() => {
-        const applicantType = this.detail()?.applicantType ?? this.application()?.applicantType;
-        return applicantType === 'COMPANY' ? COMPANY_REQUIRED_DOCUMENTS : INDIVIDUAL_REQUIRED_DOCUMENTS;
+        if (!this.isCompany()) {
+            return INDIVIDUAL_REQUIRED_DOCUMENTS$1;
+        }
+        if (this.isChinaCompany()) {
+            return CHINA_COMPANY_REQUIRED_DOCUMENTS$1;
+        }
+        if (this.isUkCompany()) {
+            return UK_COMPANY_REQUIRED_DOCUMENTS$1;
+        }
+        return COMPANY_BASE_REQUIRED_DOCUMENTS$1;
     }, ...(ngDevMode ? [{ debugName: "requiredDocuments" }] : []));
+    hasActiveUploads = computed(() => Object.values(this.uploadStates()).some((state) => state?.status === 'uploading'), ...(ngDevMode ? [{ debugName: "hasActiveUploads" }] : []));
     completion = computed(() => {
         const detail = this.detail();
         if (!detail) {
@@ -46,25 +124,38 @@ class AgentApplyFacade {
                 qualification: false,
                 financial: false,
                 banking: false,
+                form: false,
             };
         }
         if (detail.progress) {
+            const profile = detail.progress.profileCompleted;
+            const qualification = detail.progress.qualificationCompleted;
+            const financial = detail.progress.financialCompleted;
+            const banking = detail.progress.bankingCompleted;
             return {
-                profile: detail.progress.profileCompleted,
-                qualification: detail.progress.qualificationCompleted,
-                financial: detail.progress.financialCompleted,
-                banking: detail.progress.bankingCompleted,
+                profile,
+                qualification,
+                financial,
+                banking,
+                form: profile && qualification && financial && banking,
             };
         }
+        const profile = this.isProfileComplete(detail);
+        const qualification = this.isQualificationComplete(detail);
+        const financial = this.isFinancialComplete(detail);
+        const banking = this.isBankingComplete(detail);
         return {
-            profile: this.isProfileComplete(detail),
-            qualification: this.isQualificationComplete(detail),
-            financial: this.isFinancialComplete(detail),
-            banking: this.isBankingComplete(detail),
+            profile,
+            qualification,
+            financial,
+            banking,
+            form: profile && qualification && financial && banking,
         };
     }, ...(ngDevMode ? [{ debugName: "completion" }] : []));
+    readyForReview = computed(() => this.completion().form && !this.hasActiveUploads(), ...(ngDevMode ? [{ debugName: "readyForReview" }] : []));
+    canSubmit = computed(() => this.readyForReview() && !this.submitting() && !this.saving(), ...(ngDevMode ? [{ debugName: "canSubmit" }] : []));
     profileForm = this.fb.nonNullable.group({
-        organizationName: ['', [Validators.required, Validators.maxLength(255)]],
+        organizationName: ['', [Validators.maxLength(255)]],
         contactName: ['', [Validators.required, Validators.maxLength(255)]],
         contactEmail: ['', [Validators.required, Validators.email]],
         contactPhone: ['', [Validators.required, Validators.maxLength(64)]],
@@ -72,14 +163,24 @@ class AgentApplyFacade {
     });
     financialForm = this.fb.nonNullable.group({
         vatMode: ['NON_VAT_REGISTERED', [Validators.required]],
-        vatNumber: [''],
+        vatNumber: ['', [Validators.maxLength(64)]],
     });
     bankingForm = this.fb.nonNullable.group({
         bankName: ['', [Validators.required, Validators.maxLength(255)]],
-        accountHolderName: ['', [Validators.required, Validators.maxLength(255)]],
-        sortCode: ['', [Validators.required, Validators.maxLength(16)]],
-        accountNumber: ['', [Validators.required, Validators.maxLength(32)]],
+        accountHolderName: ['', [Validators.required, Validators.maxLength(255), this.accountHolderNameValidator()]],
+        sortCode: ['', [Validators.required, Validators.pattern(SORT_CODE_PATTERN)]],
+        accountNumber: ['', [Validators.required, Validators.pattern(ACCOUNT_NUMBER_PATTERN)]],
     });
+    constructor() {
+        this.setupAutosave();
+        effect(() => {
+            this.applicantType();
+            this.companyCountry();
+            this.syncProfileValidators();
+            this.syncFinancialRules();
+            this.bankingForm.controls.accountHolderName.updateValueAndValidity({ emitEvent: false });
+        });
+    }
     async start(request) {
         this.loading.set(true);
         this.error.set(null);
@@ -112,6 +213,8 @@ class AgentApplyFacade {
             this.detail.set(response);
             this.loadedApplicationId.set(response.id);
             this.patchForms(response);
+            this.restoreLocalDraft(response.id);
+            this.syncFinancialRules();
         }
         catch (error) {
             this.error.set(this.toErrorMessage(error));
@@ -120,7 +223,7 @@ class AgentApplyFacade {
             this.loading.set(false);
         }
     }
-    async saveProfile() {
+    async saveProfile(reload = true) {
         const applicationId = this.applicationId();
         if (!applicationId) {
             return false;
@@ -132,10 +235,19 @@ class AgentApplyFacade {
         this.saving.set(true);
         this.error.set(null);
         try {
-            const payload = this.profileForm.getRawValue();
+            const rawValue = this.profileForm.getRawValue();
+            const payload = {
+                organizationName: this.isCompany() ? rawValue.organizationName.trim() : rawValue.contactName.trim(),
+                contactName: rawValue.contactName.trim(),
+                contactEmail: rawValue.contactEmail.trim(),
+                contactPhone: rawValue.contactPhone.trim(),
+                countryCode: rawValue.countryCode.trim().toUpperCase(),
+            };
             const response = await firstValueFrom(this.onboardingService.saveProfile(applicationId, payload));
             this.application.set(response);
-            await this.ensureLoaded(applicationId, true);
+            if (reload) {
+                await this.ensureLoaded(applicationId, true);
+            }
             return true;
         }
         catch (error) {
@@ -146,11 +258,12 @@ class AgentApplyFacade {
             this.saving.set(false);
         }
     }
-    async saveFinancial() {
+    async saveFinancial(reload = true) {
         const applicationId = this.applicationId();
         if (!applicationId) {
             return false;
         }
+        this.syncFinancialRules();
         if (this.financialForm.invalid) {
             this.financialForm.markAllAsTouched();
             return false;
@@ -159,13 +272,20 @@ class AgentApplyFacade {
         this.error.set(null);
         try {
             const rawValue = this.financialForm.getRawValue();
-            const payload = {
-                vatMode: rawValue.vatMode,
-                vatNumber: rawValue.vatNumber || undefined,
-            };
+            const payload = this.isIndividual()
+                ? {
+                    vatMode: 'NON_VAT_REGISTERED',
+                    vatNumber: undefined,
+                }
+                : {
+                    vatMode: rawValue.vatMode,
+                    vatNumber: rawValue.vatNumber.trim() || undefined,
+                };
             const response = await firstValueFrom(this.onboardingService.saveFinancial(applicationId, payload));
             this.application.set(response);
-            await this.ensureLoaded(applicationId, true);
+            if (reload) {
+                await this.ensureLoaded(applicationId, true);
+            }
             return true;
         }
         catch (error) {
@@ -176,11 +296,13 @@ class AgentApplyFacade {
             this.saving.set(false);
         }
     }
-    async saveBanking() {
+    async saveBanking(reload = true) {
         const applicationId = this.applicationId();
         if (!applicationId) {
             return false;
         }
+        this.normalizeBankingFields();
+        this.bankingForm.controls.accountHolderName.updateValueAndValidity({ emitEvent: false });
         if (this.bankingForm.invalid) {
             this.bankingForm.markAllAsTouched();
             return false;
@@ -188,10 +310,18 @@ class AgentApplyFacade {
         this.saving.set(true);
         this.error.set(null);
         try {
-            const payload = this.bankingForm.getRawValue();
+            const rawValue = this.bankingForm.getRawValue();
+            const payload = {
+                bankName: rawValue.bankName.trim(),
+                accountHolderName: rawValue.accountHolderName.trim(),
+                sortCode: this.onlyDigits(rawValue.sortCode),
+                accountNumber: this.onlyDigits(rawValue.accountNumber),
+            };
             const response = await firstValueFrom(this.onboardingService.saveBanking(applicationId, payload));
             this.application.set(response);
-            await this.ensureLoaded(applicationId, true);
+            if (reload) {
+                await this.ensureLoaded(applicationId, true);
+            }
             return true;
         }
         catch (error) {
@@ -202,6 +332,33 @@ class AgentApplyFacade {
             this.saving.set(false);
         }
     }
+    async saveFormProgress() {
+        if (this.hasActiveUploads()) {
+            this.error.set('Wait for all document uploads to finish before continuing.');
+            return false;
+        }
+        if (!this.completion().qualification) {
+            this.error.set('Upload every required qualification document before moving to review.');
+            return false;
+        }
+        const profileSaved = await this.saveProfile(false);
+        if (!profileSaved) {
+            return false;
+        }
+        const financialSaved = await this.saveFinancial(false);
+        if (!financialSaved) {
+            return false;
+        }
+        const bankingSaved = await this.saveBanking(false);
+        if (!bankingSaved) {
+            return false;
+        }
+        const applicationId = this.applicationId();
+        if (applicationId) {
+            await this.ensureLoaded(applicationId, true);
+        }
+        return true;
+    }
     async uploadDocument(documentType, file, replacedDocumentId) {
         const applicationId = this.applicationId();
         if (!applicationId) {
@@ -209,51 +366,59 @@ class AgentApplyFacade {
         }
         this.saving.set(true);
         this.error.set(null);
+        this.setUploadState(documentType, {
+            filename: file.name,
+            progress: 0,
+            status: 'uploading',
+            error: null,
+        });
         try {
             const uploadRequest = {
                 documentType,
                 filename: file.name,
-                contentType: file.type,
+                contentType: file.type || 'application/octet-stream',
                 fileSize: file.size,
                 replacedDocumentId: replacedDocumentId ?? undefined,
             };
             const uploadUrl = await firstValueFrom(this.onboardingService.requestUploadUrl(applicationId, uploadRequest));
-            // const uploadResponse1 = await fetch(uploadUrl.uploadUrl, {
-            //   method: 'PUT',
-            //   body: file,
-            //   headers: {
-            //     'Content-Type': file.type || 'application/octet-stream',
-            //   },
-            //   mode: 'cors',
-            // });
-            // const uploadResponse = await firstValueFrom(
-            //   this.http.put(uploadUrl.uploadUrl, file, {
-            //     headers: {
-            //       'Content-Type': file.type || 'application/octet-stream',
-            //     },
-            //   }),
-            // );
-            // console.log(uploadResponse);
-            // if (!uploadResponse .ok) {
-            //   throw new Error(`Document upload failed with status ${uploadResponse.status}`);
-            // }
+            await this.uploadToSignedUrl(uploadUrl, file, (progress) => {
+                this.setUploadState(documentType, {
+                    filename: file.name,
+                    progress,
+                    status: 'uploading',
+                    error: null,
+                });
+            });
             const confirmRequest = {
                 documentType,
                 storageType: uploadUrl.storageType,
                 objectKey: uploadUrl.objectKey,
                 objectUrl: uploadUrl.uploadUrl,
                 originalFilename: file.name,
-                contentType: file.type,
+                contentType: file.type || 'application/octet-stream',
                 fileSize: file.size,
                 replacedDocumentId: replacedDocumentId ?? undefined,
             };
             const detail = await firstValueFrom(this.onboardingService.confirmDocumentUpload(applicationId, confirmRequest));
             this.detail.set(detail);
             this.loadedApplicationId.set(detail.id);
+            this.setUploadState(documentType, {
+                filename: file.name,
+                progress: 100,
+                status: 'uploaded',
+                error: null,
+            });
             return true;
         }
         catch (error) {
-            this.error.set(this.toErrorMessage(error));
+            const message = this.toErrorMessage(error);
+            this.error.set(message);
+            this.setUploadState(documentType, {
+                filename: file.name,
+                progress: 0,
+                status: 'failed',
+                error: message,
+            });
             return false;
         }
         finally {
@@ -265,11 +430,16 @@ class AgentApplyFacade {
         if (!applicationId) {
             return false;
         }
+        if (!this.readyForReview()) {
+            this.error.set('Complete the form and finish document uploads before submitting.');
+            return false;
+        }
         this.submitting.set(true);
         this.error.set(null);
         try {
             const response = await firstValueFrom(this.onboardingService.submit(applicationId));
             this.application.set(response);
+            this.clearLocalDraft(applicationId);
             await this.ensureLoaded(applicationId, true);
             return true;
         }
@@ -285,44 +455,122 @@ class AgentApplyFacade {
         return this.documents().find((item) => item.documentType === documentType) ?? null;
     }
     getIssueComment(documentType) {
-        return this.issues().find((item) => item.documentType === documentType)?.comment ?? null;
+        return this.documentIssueComments()[documentType] ?? null;
+    }
+    getFieldIssueComment(fieldKey) {
+        return this.fieldIssueComments()[fieldKey] ?? null;
+    }
+    isFieldLocked(fieldKey) {
+        if (this.hasSubmittedState()) {
+            return true;
+        }
+        if (this.status() !== 'NEED_MORE_INFO') {
+            return false;
+        }
+        if (this.hasGeneralIssue()) {
+            return false;
+        }
+        const editableFields = Object.keys(this.fieldIssueComments());
+        if (editableFields.length === 0) {
+            return true;
+        }
+        return !editableFields.includes(fieldKey);
+    }
+    isDocumentLocked(documentType) {
+        if (this.hasSubmittedState()) {
+            return true;
+        }
+        if (this.status() !== 'NEED_MORE_INFO') {
+            return false;
+        }
+        if (this.hasGeneralIssue()) {
+            return false;
+        }
+        const editableDocuments = Object.keys(this.documentIssueComments());
+        if (editableDocuments.length === 0) {
+            return true;
+        }
+        return !editableDocuments.includes(documentType);
     }
     canAccessStep(step) {
-        const completion = this.completion();
         switch (step) {
-            case 'profile':
+            case 'form':
                 return true;
-            case 'qualification':
-                return completion.profile;
-            case 'financial':
-                return completion.profile && completion.qualification;
-            case 'banking':
-                return completion.profile && completion.qualification && completion.financial;
             case 'review':
-                return completion.profile && completion.qualification && completion.financial && completion.banking;
-            case 'submitted': {
+                return this.completion().form;
+            case 'result': {
                 const status = this.status();
-                return status === 'SUBMITTED' || status === 'IN_REVIEW' || status === 'APPROVED' || status === 'FAILED';
+                return (status === 'SUBMITTED' ||
+                    status === 'IN_REVIEW' ||
+                    status === 'NEED_MORE_INFO' ||
+                    status === 'APPROVED' ||
+                    status === 'FAILED');
             }
             default:
                 return false;
         }
     }
     firstIncompleteStep() {
-        const completion = this.completion();
-        if (!completion.profile) {
-            return 'profile';
-        }
-        if (!completion.qualification) {
-            return 'qualification';
+        return this.completion().form ? 'review' : 'form';
+    }
+    uploadState(documentType) {
+        return (this.uploadStates()[documentType] ?? {
+            filename: null,
+            progress: 0,
+            status: 'idle',
+            error: null,
+        });
+    }
+    expectedAccountHolderName() {
+        const rawProfile = this.profileForm.getRawValue();
+        return this.isCompany() ? rawProfile.organizationName.trim() : rawProfile.contactName.trim();
+    }
+    formatSortCode(value) {
+        const digits = this.onlyDigits(value);
+        if (!digits) {
+            return '';
         }
-        if (!completion.financial) {
-            return 'financial';
+        return digits.match(/.{1,2}/g)?.join('-') ?? digits;
+    }
+    setupAutosave() {
+        const autosave = () => this.persistLocalDraft();
+        this.profileForm.valueChanges.pipe(debounceTime(250), takeUntilDestroyed(this.destroyRef)).subscribe(() => autosave());
+        this.financialForm.valueChanges.pipe(debounceTime(250), takeUntilDestroyed(this.destroyRef)).subscribe(() => autosave());
+        this.bankingForm.valueChanges.pipe(debounceTime(250), takeUntilDestroyed(this.destroyRef)).subscribe(() => autosave());
+        this.profileForm.controls.contactName.valueChanges
+            .pipe(debounceTime(50), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.bankingForm.controls.accountHolderName.updateValueAndValidity({ emitEvent: false }));
+        this.profileForm.controls.organizationName.valueChanges
+            .pipe(debounceTime(50), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.bankingForm.controls.accountHolderName.updateValueAndValidity({ emitEvent: false }));
+        this.financialForm.controls.vatMode.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.syncFinancialRules());
+    }
+    syncProfileValidators() {
+        const organizationName = this.profileForm.controls.organizationName;
+        const validators = this.isCompany() ? [Validators.required, Validators.maxLength(255)] : [Validators.maxLength(255)];
+        organizationName.setValidators(validators);
+        organizationName.updateValueAndValidity({ emitEvent: false });
+    }
+    syncFinancialRules() {
+        const vatMode = this.financialForm.controls.vatMode;
+        const vatNumber = this.financialForm.controls.vatNumber;
+        if (this.isIndividual()) {
+            if (vatMode.value !== 'NON_VAT_REGISTERED') {
+                vatMode.setValue('NON_VAT_REGISTERED', { emitEvent: false });
+            }
+            if (vatNumber.value) {
+                vatNumber.setValue('', { emitEvent: false });
+            }
         }
-        if (!completion.banking) {
-            return 'banking';
+        else if (vatMode.value === 'NON_VAT_REGISTERED') {
+            vatMode.setValue('VAT_REGISTERED', { emitEvent: false });
         }
-        return 'review';
+        const requiresVatNumber = this.isCompany() && vatMode.value === 'VAT_REGISTERED';
+        const validators = requiresVatNumber ? [Validators.required, Validators.maxLength(64)] : [Validators.maxLength(64)];
+        vatNumber.setValidators(validators);
+        vatNumber.updateValueAndValidity({ emitEvent: false });
     }
     patchForms(detail) {
         this.profileForm.patchValue({
@@ -330,29 +578,39 @@ class AgentApplyFacade {
             contactName: detail.contactName ?? '',
             contactEmail: detail.contactEmail ?? '',
             contactPhone: detail.contactPhone ?? '',
-            countryCode: detail.countryCode ?? 'GB',
-        });
+            countryCode: detail.countryCode ?? this.defaultCountryCode(),
+        }, { emitEvent: false });
         this.financialForm.patchValue({
-            vatMode: detail.vatMode ?? 'NON_VAT_REGISTERED',
+            vatMode: detail.vatMode ?? (detail.applicantType === 'COMPANY' ? 'VAT_REGISTERED' : 'NON_VAT_REGISTERED'),
             vatNumber: detail.vatNumber ?? '',
-        });
+        }, { emitEvent: false });
         this.bankingForm.patchValue({
             bankName: detail.bankName ?? '',
             accountHolderName: detail.accountHolderName ?? '',
-            sortCode: detail.sortCode ?? '',
-            accountNumber: detail.accountNumber ?? '',
-        });
+            sortCode: this.onlyDigits(detail.sortCode),
+            accountNumber: this.onlyDigits(detail.accountNumber),
+        }, { emitEvent: false });
     }
     isProfileComplete(detail) {
-        return Boolean(detail.organizationName && detail.contactName && detail.contactEmail && detail.contactPhone && detail.countryCode);
+        const hasApplicantName = Boolean(detail.contactName && detail.contactEmail && detail.contactPhone);
+        const hasCountryCode = Boolean(detail.countryCode);
+        if (!hasApplicantName || !hasCountryCode) {
+            return false;
+        }
+        if (detail.applicantType === 'COMPANY') {
+            return Boolean(detail.organizationName);
+        }
+        return true;
     }
     isQualificationComplete(detail) {
         const uploadedTypes = new Set(detail.documents.map((item) => item.documentType));
-        const required = detail.applicantType === 'COMPANY' ? COMPANY_REQUIRED_DOCUMENTS : INDIVIDUAL_REQUIRED_DOCUMENTS;
-        return required.every((item) => uploadedTypes.has(item.type));
+        return this.requiredDocuments().every((item) => uploadedTypes.has(item.type));
     }
     isFinancialComplete(detail) {
-        if (!detail.vatMode) {
+        if (detail.applicantType === 'INDIVIDUAL') {
+            return detail.vatMode === 'NON_VAT_REGISTERED';
+        }
+        if (!detail.vatMode || detail.vatMode === 'NON_VAT_REGISTERED') {
             return false;
         }
         if (detail.vatMode === 'VAT_REGISTERED') {
@@ -361,9 +619,121 @@ class AgentApplyFacade {
         return true;
     }
     isBankingComplete(detail) {
-        return Boolean(detail.bankName && detail.accountHolderName && detail.sortCode && detail.accountNumber);
+        if (!detail.bankName || !detail.accountHolderName) {
+            return false;
+        }
+        return (SORT_CODE_PATTERN.test(this.onlyDigits(detail.sortCode)) &&
+            ACCOUNT_NUMBER_PATTERN.test(this.onlyDigits(detail.accountNumber)));
+    }
+    accountHolderNameValidator() {
+        return (control) => {
+            const expected = this.expectedAccountHolderName();
+            const value = typeof control.value === 'string' ? control.value.trim() : '';
+            if (!value || !expected) {
+                return null;
+            }
+            return value.toLowerCase() === expected.toLowerCase() ? null : { accountHolderMismatch: true };
+        };
+    }
+    normalizeBankingFields() {
+        this.bankingForm.patchValue({
+            sortCode: this.onlyDigits(this.bankingForm.controls.sortCode.value),
+            accountNumber: this.onlyDigits(this.bankingForm.controls.accountNumber.value),
+        }, { emitEvent: false });
+    }
+    persistLocalDraft() {
+        const applicationId = this.applicationId();
+        if (!applicationId || typeof localStorage === 'undefined') {
+            return;
+        }
+        const snapshot = {
+            profile: this.profileForm.getRawValue(),
+            financial: this.financialForm.getRawValue(),
+            banking: this.bankingForm.getRawValue(),
+            updatedAt: new Date().toISOString(),
+        };
+        localStorage.setItem(this.localDraftKey(applicationId), JSON.stringify(snapshot));
+        this.lastLocalDraftSavedAt.set(snapshot.updatedAt);
+    }
+    restoreLocalDraft(applicationId) {
+        if (typeof localStorage === 'undefined') {
+            return;
+        }
+        const rawSnapshot = localStorage.getItem(this.localDraftKey(applicationId));
+        if (!rawSnapshot) {
+            this.lastLocalDraftSavedAt.set(null);
+            return;
+        }
+        try {
+            const snapshot = JSON.parse(rawSnapshot);
+            this.profileForm.patchValue(snapshot.profile, { emitEvent: false });
+            this.financialForm.patchValue(snapshot.financial, { emitEvent: false });
+            this.bankingForm.patchValue({
+                ...snapshot.banking,
+                sortCode: this.onlyDigits(snapshot.banking.sortCode),
+                accountNumber: this.onlyDigits(snapshot.banking.accountNumber),
+            }, { emitEvent: false });
+            this.lastLocalDraftSavedAt.set(snapshot.updatedAt ?? null);
+        }
+        catch {
+            localStorage.removeItem(this.localDraftKey(applicationId));
+            this.lastLocalDraftSavedAt.set(null);
+        }
+    }
+    clearLocalDraft(applicationId) {
+        if (typeof localStorage === 'undefined') {
+            return;
+        }
+        localStorage.removeItem(this.localDraftKey(applicationId));
+        this.lastLocalDraftSavedAt.set(null);
+    }
+    localDraftKey(applicationId) {
+        return `rolatech.agent-apply.${applicationId}`;
+    }
+    setUploadState(documentType, state) {
+        this.uploadStates.update((current) => ({
+            ...current,
+            [documentType]: state,
+        }));
+    }
+    uploadToSignedUrl(upload, file, onProgress) {
+        return new Promise((resolve, reject) => {
+            const request = new XMLHttpRequest();
+            request.open('PUT', upload.uploadUrl, true);
+            const headers = upload.uploadHeaders ?? {};
+            for (const [key, value] of Object.entries(headers)) {
+                request.setRequestHeader(key, value);
+            }
+            request.upload.onprogress = (event) => {
+                if (!event.lengthComputable) {
+                    return;
+                }
+                onProgress(Math.min(100, Math.round((event.loaded / event.total) * 100)));
+            };
+            request.onload = () => {
+                if (request.status >= 200 && request.status < 300) {
+                    resolve();
+                    return;
+                }
+                reject(new Error(`Document upload failed with status ${request.status}.`));
+            };
+            request.onerror = () => reject(new Error('Document upload failed.'));
+            request.send(file);
+        });
+    }
+    defaultCountryCode() {
+        return this.companyCountry() === 'CN' ? 'CN' : 'GB';
+    }
+    onlyDigits(value) {
+        return (value ?? '').replace(/\D/g, '');
     }
     toErrorMessage(error) {
+        if (error &&
+            typeof error === 'object' &&
+            'message' in error &&
+            typeof error.message === 'string') {
+            return error.message;
+        }
         if (error instanceof Error && error.message) {
             return error.message;
         }
@@ -374,7 +744,7 @@ class AgentApplyFacade {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AgentApplyFacade, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
 
 const applyStepGuard = async (childRoute) => {
     const facade = inject(AgentApplyFacade);
@@ -407,61 +777,65 @@ function buildFallbackSegments(route, fallbackStep) {
 const AGENT_APPLY_ROUTES = [
     {
         path: '',
-        loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-start-page-DC7gyOnS.mjs').then((m) => m.AgentApplyStartPage),
+        loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-start-page-BfqO2YWB.mjs').then((m) => m.AgentApplyStartPage),
     },
     {
         path: ':applicationId',
         canActivate: [applicationIdGuard],
         canActivateChild: [applyStepGuard],
         providers: [AgentApplyFacade],
-        loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-shell-page-DibWYeD1.mjs').then((m) => m.AgentApplyShellPage),
+        loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-shell-page-CaTvnFzk.mjs').then((m) => m.AgentApplyShellPage),
         children: [
             {
                 path: '',
                 pathMatch: 'full',
-                redirectTo: 'profile',
+                redirectTo: 'form',
             },
             {
-                path: 'profile',
+                path: 'form',
                 data: {
-                    requiredStep: 'profile',
+                    requiredStep: 'form',
                 },
-                loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-profile-page-DNepDxHu.mjs').then((m) => m.AgentApplyProfilePage),
+                loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-form-page-y02hYlN_.mjs').then((m) => m.AgentApplyFormPage),
+            },
+            {
+                path: 'profile',
+                pathMatch: 'full',
+                redirectTo: 'form',
             },
             {
                 path: 'qualification',
-                data: {
-                    requiredStep: 'qualification',
-                },
-                loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-qualification-page-CSwupuKt.mjs').then((m) => m.AgentApplyQualificationPage),
+                pathMatch: 'full',
+                redirectTo: 'form',
             },
             {
                 path: 'financial',
-                data: {
-                    requiredStep: 'financial',
-                },
-                loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-financial-page-Ck3Rowke.mjs').then((m) => m.AgentApplyFinancialPage),
+                pathMatch: 'full',
+                redirectTo: 'form',
             },
             {
                 path: 'banking',
-                data: {
-                    requiredStep: 'banking',
-                },
-                loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-banking-page-VYNfR4fy.mjs').then((m) => m.AgentApplyBankingPage),
+                pathMatch: 'full',
+                redirectTo: 'form',
             },
             {
                 path: 'review',
                 data: {
                     requiredStep: 'review',
                 },
-                loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-review-page-DugCjfvK.mjs').then((m) => m.AgentApplyReviewPage),
+                loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-review-page-DG_D03YW.mjs').then((m) => m.AgentApplyReviewPage),
             },
             {
                 path: 'submitted',
+                pathMatch: 'full',
+                redirectTo: 'result',
+            },
+            {
+                path: 'result',
                 data: {
-                    requiredStep: 'submitted',
+                    requiredStep: 'result',
                 },
-                loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-submitted-page-BMkV2V8K.mjs').then((m) => m.AgentApplySubmittedPage),
+                loadComponent: () => import('./rolatech-angular-onboarding-agent-apply-result-page-CEL4nWb_.mjs').then((m) => m.AgentApplyResultPage),
             },
         ],
     },
@@ -520,7 +894,7 @@ class AgentOnboardingFacade {
                 method: 'PUT',
                 body: file,
                 headers: {
-                    'Content-Type': file.type,
+                    ...uploadUrl.uploadHeaders,
                 },
             });
             if (!uploadResponse.ok) {
@@ -596,7 +970,7 @@ const AGENT_ONBOARDING_ROUTES = [
             },
             {
                 path: 'documents',
-                loadComponent: () => import('./rolatech-angular-onboarding-agent-onboarding-documents-page-DWBGTj5J.mjs').then((m) => m.AgentOnboardingDocumentsPage),
+                loadComponent: () => import('./rolatech-angular-onboarding-agent-onboarding-documents-page-BKDYZE0e.mjs').then((m) => m.AgentOnboardingDocumentsPage),
             },
             {
                 path: 'issues',
@@ -609,17 +983,17 @@ const AGENT_ONBOARDING_ROUTES = [
 const ADMIN_ONBOARDING_ROUTES = [
     {
         path: '',
-        loadComponent: () => import('./rolatech-angular-onboarding-admin-onboarding-index-page-BO4pC_NU.mjs').then((m) => m.AdminOnboardingIndexPage),
+        loadComponent: () => import('./rolatech-angular-onboarding-admin-onboarding-index-page-DP7wffLd.mjs').then((m) => m.AdminOnboardingIndexPage),
     },
     {
-        path: ':applicationId',
+        path: ':applicationId/review',
         canActivate: [applicationIdGuard],
-        loadComponent: () => import('./rolatech-angular-onboarding-admin-onboarding-detail-page-DKJQX3cs.mjs').then((m) => m.AdminOnboardingDetailPage),
+        loadComponent: () => import('./rolatech-angular-onboarding-admin-onboarding-review-page-BERcLBeQ.mjs').then((m) => m.AdminOnboardingReviewPage),
     },
     {
-        path: ':applicationId/review',
+        path: ':applicationId',
         canActivate: [applicationIdGuard],
-        loadComponent: () => import('./rolatech-angular-onboarding-admin-onboarding-review-page-BERcLBeQ.mjs').then((m) => m.AdminOnboardingReviewPage),
+        loadComponent: () => import('./rolatech-angular-onboarding-admin-onboarding-detail-page-DREEMvoT.mjs').then((m) => m.AdminOnboardingDetailPage),
     },
 ];
 
@@ -681,6 +1055,12 @@ class AdminOnboardingListFacade {
         }));
     }
     toErrorMessage(error) {
+        if (error &&
+            typeof error === 'object' &&
+            'message' in error &&
+            typeof error.message === 'string') {
+            return error.message;
+        }
         if (error instanceof Error && error.message) {
             return error.message;
         }
@@ -728,6 +1108,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             type: Injectable
         }] });
 
+const INDIVIDUAL_REQUIRED_DOCUMENTS = [
+    { type: 'PASSPORT', label: 'Applicant passport', helperText: 'Required identity document.' },
+];
+const COMPANY_BASE_REQUIRED_DOCUMENTS = [
+    { type: 'PASSPORT', label: 'Director passport', helperText: 'Required director identity document.' },
+    { type: 'CERTIFICATE_OF_INCORPORATION', label: 'Certificate of incorporation', helperText: 'Required for company verification.' },
+    { type: 'INDUSTRY_CERTIFICATE', label: 'Industry certificate', helperText: 'RICS, ARLA, NAEA, or Propertymark.' },
+];
+const UK_COMPANY_REQUIRED_DOCUMENTS = [
+    ...COMPANY_BASE_REQUIRED_DOCUMENTS,
+    { type: 'OTHER', label: 'Redress / AML evidence', helperText: 'Evidence bundle for UK company review.' },
+];
+const CHINA_COMPANY_REQUIRED_DOCUMENTS = [
+    ...COMPANY_BASE_REQUIRED_DOCUMENTS,
+    {
+        type: 'OTHER',
+        label: 'Stamped business license',
+        helperText: 'The original scanned business license must include the official company stamp.',
+    },
+];
 class AdminOnboardingReviewFacade {
     onboardingAdminService = inject(OnboardingAdminService);
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -735,7 +1135,49 @@ class AdminOnboardingReviewFacade {
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     detail = signal(null, ...(ngDevMode ? [{ debugName: "detail" }] : []));
     reviewComment = signal('', ...(ngDevMode ? [{ debugName: "reviewComment" }] : []));
-    issueDrafts = signal([], ...(ngDevMode ? [{ debugName: "issueDrafts" }] : []));
+    fieldIssueDrafts = signal({}, ...(ngDevMode ? [{ debugName: "fieldIssueDrafts" }] : []));
+    documentIssueDrafts = signal({}, ...(ngDevMode ? [{ debugName: "documentIssueDrafts" }] : []));
+    passedFields = signal({}, ...(ngDevMode ? [{ debugName: "passedFields" }] : []));
+    passedDocuments = signal({}, ...(ngDevMode ? [{ debugName: "passedDocuments" }] : []));
+    previewLoading = signal(false, ...(ngDevMode ? [{ debugName: "previewLoading" }] : []));
+    previewError = signal(null, ...(ngDevMode ? [{ debugName: "previewError" }] : []));
+    previewUrl = signal(null, ...(ngDevMode ? [{ debugName: "previewUrl" }] : []));
+    previewDocumentId = signal(null, ...(ngDevMode ? [{ debugName: "previewDocumentId" }] : []));
+    requiredDocuments = computed(() => {
+        const detail = this.detail();
+        if (!detail || detail.applicantType !== 'COMPANY') {
+            return INDIVIDUAL_REQUIRED_DOCUMENTS;
+        }
+        if (detail.companyCountry === 'CN') {
+            return CHINA_COMPANY_REQUIRED_DOCUMENTS;
+        }
+        if (detail.companyCountry === 'UK') {
+            return UK_COMPANY_REQUIRED_DOCUMENTS;
+        }
+        return COMPANY_BASE_REQUIRED_DOCUMENTS;
+    }, ...(ngDevMode ? [{ debugName: "requiredDocuments" }] : []));
+    existingFieldIssues = computed(() => {
+        const result = {};
+        for (const issue of this.detail()?.issues ?? []) {
+            if (issue.resolved || !issue.fieldKey || result[issue.fieldKey]) {
+                continue;
+            }
+            result[issue.fieldKey] = issue.comment;
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "existingFieldIssues" }] : []));
+    existingDocumentIssues = computed(() => {
+        const result = {};
+        for (const issue of this.detail()?.issues ?? []) {
+            if (issue.resolved || !issue.documentType || result[issue.documentType]) {
+                continue;
+            }
+            result[issue.documentType] = issue.comment;
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "existingDocumentIssues" }] : []));
+    issueDrafts = computed(() => this.buildIssueDrafts(), ...(ngDevMode ? [{ debugName: "issueDrafts" }] : []));
+    hasPendingIssues = computed(() => this.issueDrafts().length > 0, ...(ngDevMode ? [{ debugName: "hasPendingIssues" }] : []));
     async load(applicationId) {
         if (!applicationId) {
             return;
@@ -745,6 +1187,8 @@ class AdminOnboardingReviewFacade {
         try {
             const detail = await firstValueFrom(this.onboardingAdminService.getApplication(applicationId));
             this.detail.set(detail);
+            this.resetDrafts();
+            this.clearDocumentPreview();
         }
         catch (error) {
             this.error.set(this.toErrorMessage(error));
@@ -754,108 +1198,296 @@ class AdminOnboardingReviewFacade {
         }
     }
     addFieldIssue(fieldKey, comment) {
-        this.issueDrafts.update((items) => [
-            ...items,
-            {
-                issueType: 'FIELD',
-                fieldKey,
-                comment,
-            },
-        ]);
+        this.setFieldIssueDraft(fieldKey, {
+            optionKey: 'manual',
+            comment,
+        });
     }
     addDocumentIssue(documentType, comment) {
-        this.issueDrafts.update((items) => [
-            ...items,
-            {
-                issueType: 'DOCUMENT',
-                documentType,
-                comment,
-            },
-        ]);
+        this.setDocumentIssueDraft(documentType, {
+            optionKey: 'manual',
+            comment,
+        });
     }
     removeIssue(index) {
-        this.issueDrafts.update((items) => items.filter((_, currentIndex) => currentIndex !== index));
+        const target = this.issueDrafts()[index];
+        if (!target) {
+            return;
+        }
+        if (target.issueType === 'FIELD' && target.fieldKey) {
+            this.clearFieldIssueDraft(target.fieldKey);
+            return;
+        }
+        if (target.issueType === 'DOCUMENT' && target.documentType) {
+            this.clearDocumentIssueDraft(target.documentType);
+        }
     }
     setComment(value) {
         this.reviewComment.set(value);
     }
+    setFieldIssueDraft(fieldKey, draft) {
+        const normalized = this.normalizeDraft(draft);
+        this.fieldIssueDrafts.update((current) => {
+            const next = { ...current };
+            if (!normalized) {
+                delete next[fieldKey];
+            }
+            else {
+                next[fieldKey] = normalized;
+            }
+            return next;
+        });
+        if (normalized) {
+            this.passedFields.update((current) => ({
+                ...current,
+                [fieldKey]: false,
+            }));
+        }
+    }
+    setDocumentIssueDraft(documentType, draft) {
+        const normalized = this.normalizeDraft(draft);
+        this.documentIssueDrafts.update((current) => {
+            const next = { ...current };
+            if (!normalized) {
+                delete next[documentType];
+            }
+            else {
+                next[documentType] = normalized;
+            }
+            return next;
+        });
+        if (normalized) {
+            this.passedDocuments.update((current) => ({
+                ...current,
+                [documentType]: false,
+            }));
+        }
+    }
+    toggleFieldPassed(fieldKey, passed) {
+        this.passedFields.update((current) => ({
+            ...current,
+            [fieldKey]: passed,
+        }));
+        if (passed) {
+            this.clearFieldIssueDraft(fieldKey);
+        }
+    }
+    toggleDocumentPassed(documentType, passed) {
+        this.passedDocuments.update((current) => ({
+            ...current,
+            [documentType]: passed,
+        }));
+        if (passed) {
+            this.clearDocumentIssueDraft(documentType);
+        }
+    }
+    fieldDraft(fieldKey) {
+        return this.fieldIssueDrafts()[fieldKey] ?? null;
+    }
+    documentDraft(documentType) {
+        return this.documentIssueDrafts()[documentType] ?? null;
+    }
+    fieldDraftComment(fieldKey) {
+        return this.fieldDraft(fieldKey)?.comment ?? '';
+    }
+    documentDraftComment(documentType) {
+        return this.documentDraft(documentType)?.comment ?? '';
+    }
+    fieldPassed(fieldKey) {
+        return this.passedFields()[fieldKey] ?? false;
+    }
+    documentPassed(documentType) {
+        return this.passedDocuments()[documentType] ?? false;
+    }
     async startReview(applicationId) {
         return this.runAction(async () => {
-            const detail = await firstValueFrom(this.onboardingAdminService.startReview(applicationId));
-            this.detail.set(detail);
+            await firstValueFrom(this.onboardingAdminService.startReview(applicationId));
+            await this.load(applicationId);
         });
     }
     async requestMoreInfo(applicationId) {
+        const issues = this.issueDrafts();
+        if (issues.length === 0) {
+            this.error.set('Add at least one field or document issue before requesting more information.');
+            return false;
+        }
         const payload = {
-            comment: this.reviewComment(),
-            issues: this.issueDrafts(),
+            comment: this.reviewComment().trim(),
+            issues,
         };
         return this.runAction(async () => {
-            const detail = await firstValueFrom(this.onboardingAdminService.needMoreInfo(applicationId, payload));
-            this.detail.set(detail);
+            await firstValueFrom(this.onboardingAdminService.needMoreInfo(applicationId, payload));
+            await this.load(applicationId);
             this.reviewComment.set('');
-            this.issueDrafts.set([]);
+            this.resetDrafts();
         });
     }
     async approve(applicationId) {
+        if (this.hasPendingIssues()) {
+            this.error.set('Clear draft issues before approving the application.');
+            return false;
+        }
         const payload = {
-            comment: this.reviewComment(),
+            comment: this.reviewComment().trim(),
         };
         return this.runAction(async () => {
-            const detail = await firstValueFrom(this.onboardingAdminService.approve(applicationId, payload));
-            this.detail.set(detail);
+            await firstValueFrom(this.onboardingAdminService.approve(applicationId, payload));
+            await this.load(applicationId);
             this.reviewComment.set('');
+            this.resetDrafts();
         });
     }
     async fail(applicationId) {
+        if (this.hasPendingIssues()) {
+            this.error.set('Clear draft issues before failing the application.');
+            return false;
+        }
         const payload = {
-            comment: this.reviewComment(),
+            comment: this.reviewComment().trim(),
         };
         return this.runAction(async () => {
-            const detail = await firstValueFrom(this.onboardingAdminService.fail(applicationId, payload));
-            this.detail.set(detail);
+            await firstValueFrom(this.onboardingAdminService.fail(applicationId, payload));
+            await this.load(applicationId);
             this.reviewComment.set('');
+            this.resetDrafts();
         });
     }
-    async runAction(action) {
-        this.saving.set(true);
-        this.error.set(null);
+    async openDocumentPreview(documentId) {
+        const applicationId = this.detail()?.id;
+        if (!applicationId || !documentId) {
+            return false;
+        }
+        this.previewLoading.set(true);
+        this.previewError.set(null);
+        this.previewUrl.set(null);
+        this.previewDocumentId.set(documentId);
         try {
-            await action();
+            const response = await firstValueFrom(this.onboardingAdminService.getDocumentPreviewUrl(applicationId, documentId));
+            this.previewUrl.set(response.previewUrl);
+            this.previewDocumentId.set(response.documentId);
             return true;
         }
         catch (error) {
-            this.error.set(this.toErrorMessage(error));
+            this.previewError.set(this.toPreviewErrorMessage(error));
             return false;
         }
         finally {
-            this.saving.set(false);
+            this.previewLoading.set(false);
         }
     }
-    toErrorMessage(error) {
-        if (error instanceof Error && error.message) {
-            return error.message;
-        }
-        return 'Unable to complete the onboarding review action.';
+    clearDocumentPreview() {
+        this.previewLoading.set(false);
+        this.previewError.set(null);
+        this.previewUrl.set(null);
+        this.previewDocumentId.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AdminOnboardingReviewFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AdminOnboardingReviewFacade });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AdminOnboardingReviewFacade, decorators: [{
-            type: Injectable
-        }] });
-
-class OnboardingPageShell {
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
-    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
-    kicker = input('', ...(ngDevMode ? [{ debugName: "kicker" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingPageShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingPageShell, isStandalone: true, selector: "rolatech-onboarding-page-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    <section class="rt-onboarding-theme mx-auto w-full max-w-6xl space-y-6 bg-(--rt-base-background) px-4 py-6 text-(--rt-text-primary) sm:px-6 lg:px-8">
-      <header class="relative overflow-hidden rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm sm:p-8">
-        <div class="pointer-events-none absolute -right-10 -top-10 h-36 w-36 rounded-full bg-(--rt-10-percent-layer) blur-2xl"></div>
-        <div class="pointer-events-none absolute -bottom-16 left-12 h-36 w-36 rounded-full bg-(--rt-10-percent-layer) blur-2xl"></div>
+    clearFieldIssueDraft(fieldKey) {
+        this.fieldIssueDrafts.update((current) => {
+            const next = { ...current };
+            delete next[fieldKey];
+            return next;
+        });
+    }
+    clearDocumentIssueDraft(documentType) {
+        this.documentIssueDrafts.update((current) => {
+            const next = { ...current };
+            delete next[documentType];
+            return next;
+        });
+    }
+    buildIssueDrafts() {
+        const fieldIssues = Object.entries(this.fieldIssueDrafts()).flatMap(([fieldKey, draft]) => draft.comment.trim()
+            ? [
+                {
+                    issueType: 'FIELD',
+                    fieldKey,
+                    comment: draft.comment.trim(),
+                },
+            ]
+            : []);
+        const documentIssues = Object.entries(this.documentIssueDrafts()).flatMap(([documentType, draft]) => draft?.comment.trim()
+            ? [
+                {
+                    issueType: 'DOCUMENT',
+                    documentType: documentType,
+                    comment: draft.comment.trim(),
+                },
+            ]
+            : []);
+        return [...fieldIssues, ...documentIssues];
+    }
+    resetDrafts() {
+        this.fieldIssueDrafts.set({});
+        this.documentIssueDrafts.set({});
+        this.passedFields.set({});
+        this.passedDocuments.set({});
+    }
+    normalizeDraft(draft) {
+        if (typeof draft === 'string') {
+            return draft.trim()
+                ? {
+                    optionKey: 'manual',
+                    comment: draft,
+                }
+                : null;
+        }
+        if (!draft) {
+            return null;
+        }
+        if (!draft.optionKey?.trim()) {
+            return null;
+        }
+        return {
+            optionKey: draft.optionKey,
+            comment: draft.comment ?? '',
+        };
+    }
+    async runAction(action) {
+        this.saving.set(true);
+        this.error.set(null);
+        try {
+            await action();
+            return true;
+        }
+        catch (error) {
+            this.error.set(this.toErrorMessage(error));
+            return false;
+        }
+        finally {
+            this.saving.set(false);
+        }
+    }
+    toErrorMessage(error) {
+        if (error instanceof Error && error.message) {
+            return error.message;
+        }
+        return 'Unable to complete the onboarding review action.';
+    }
+    toPreviewErrorMessage(error) {
+        if (error instanceof Error && error.message) {
+            return error.message;
+        }
+        return 'Unable to load the document preview.';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AdminOnboardingReviewFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AdminOnboardingReviewFacade });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AdminOnboardingReviewFacade, decorators: [{
+            type: Injectable
+        }] });
 
+class OnboardingPageShell {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    kicker = input('', ...(ngDevMode ? [{ debugName: "kicker" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingPageShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingPageShell, isStandalone: true, selector: "rolatech-onboarding-page-shell", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <section
+      class="rt-onboarding-theme mx-auto w-full max-w-6xl space-y-6 bg-(--rt-base-background) px-4 py-6 text-(--rt-text-primary) sm:px-6 lg:px-8"
+    >
+      <header
+        class="relative overflow-hidden rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm sm:p-8"
+      >
         <div class="relative flex flex-wrap items-start justify-between gap-4">
           <div class="flex min-w-0 items-start gap-3">
             <div class="rt-onboarding-header-leading">
@@ -889,11 +1521,12 @@ class OnboardingPageShell {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingPageShell, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-onboarding-page-shell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'block' }, template: `
-    <section class="rt-onboarding-theme mx-auto w-full max-w-6xl space-y-6 bg-(--rt-base-background) px-4 py-6 text-(--rt-text-primary) sm:px-6 lg:px-8">
-      <header class="relative overflow-hidden rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm sm:p-8">
-        <div class="pointer-events-none absolute -right-10 -top-10 h-36 w-36 rounded-full bg-(--rt-10-percent-layer) blur-2xl"></div>
-        <div class="pointer-events-none absolute -bottom-16 left-12 h-36 w-36 rounded-full bg-(--rt-10-percent-layer) blur-2xl"></div>
-
+    <section
+      class="rt-onboarding-theme mx-auto w-full max-w-6xl space-y-6 bg-(--rt-base-background) px-4 py-6 text-(--rt-text-primary) sm:px-6 lg:px-8"
+    >
+      <header
+        class="relative overflow-hidden rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm sm:p-8"
+      >
         <div class="relative flex flex-wrap items-start justify-between gap-4">
           <div class="flex min-w-0 items-start gap-3">
             <div class="rt-onboarding-header-leading">
@@ -933,14 +1566,14 @@ class OnboardingStatusBadge {
     badgeClass = computed(() => {
         switch (this.status()) {
             case 'APPROVED':
-                return 'border-emerald-200 bg-emerald-50 text-emerald-700';
+                return 'border-(--rt-border-color) bg-(--rt-raised-background) text-emerald-700';
             case 'FAILED':
-                return 'border-rose-200 bg-rose-50 text-rose-700';
+                return 'border-(--rt-border-color) bg-(--rt-raised-background) text-rose-700';
             case 'NEED_MORE_INFO':
-                return 'border-amber-200 bg-amber-50 text-amber-700';
+                return 'border-(--rt-border-color) bg-(--rt-raised-background) text-amber-700';
             case 'SUBMITTED':
             case 'IN_REVIEW':
-                return 'border-sky-200 bg-sky-50 text-sky-700';
+                return 'border-(--rt-border-color) bg-(--rt-raised-background) text-sky-700';
             case 'IN_PROGRESS':
             case 'DRAFT':
                 return 'border-(--rt-border-color) bg-(--rt-raised-background) text-(--rt-text-secondary)';
@@ -982,7 +1615,7 @@ class OnboardingStepNav {
     activeStep = input('', ...(ngDevMode ? [{ debugName: "activeStep" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingStepNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingStepNav, isStandalone: true, selector: "rolatech-onboarding-step-nav", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    <nav class="grid gap-2 sm:grid-cols-2 lg:grid-cols-6" aria-label="Onboarding steps">
+    <nav class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3" aria-label="Onboarding steps">
       @for (step of steps(); track step.step) {
         <a
           [routerLink]="step.accessible ? step.link : null"
@@ -1018,7 +1651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'block' },
                     template: `
-    <nav class="grid gap-2 sm:grid-cols-2 lg:grid-cols-6" aria-label="Onboarding steps">
+    <nav class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3" aria-label="Onboarding steps">
       @for (step of steps(); track step.step) {
         <a
           [routerLink]="step.accessible ? step.link : null"
@@ -1051,10 +1684,28 @@ class OnboardingDocumentUploader {
     helperText = input('Upload a clear and readable file.', ...(ngDevMode ? [{ debugName: "helperText" }] : []));
     documentType = input.required(...(ngDevMode ? [{ debugName: "documentType" }] : []));
     document = input(null, ...(ngDevMode ? [{ debugName: "document" }] : []));
+    warning = input(null, ...(ngDevMode ? [{ debugName: "warning" }] : []));
     comment = input(null, ...(ngDevMode ? [{ debugName: "comment" }] : []));
     busy = input(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+    locked = input(false, ...(ngDevMode ? [{ debugName: "locked" }] : []));
+    uploading = input(false, ...(ngDevMode ? [{ debugName: "uploading" }] : []));
+    progress = input(0, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    pendingFilename = input(null, ...(ngDevMode ? [{ debugName: "pendingFilename" }] : []));
+    uploadError = input(null, ...(ngDevMode ? [{ debugName: "uploadError" }] : []));
     acceptedTypes = input('image/*,application/pdf', ...(ngDevMode ? [{ debugName: "acceptedTypes" }] : []));
+    canPreview = input(false, ...(ngDevMode ? [{ debugName: "canPreview" }] : []));
+    previewBusy = input(false, ...(ngDevMode ? [{ debugName: "previewBusy" }] : []));
     fileSelected = output();
+    previewRequested = output();
+    buttonLabel = computed(() => {
+        if (this.locked()) {
+            return 'Locked';
+        }
+        if (this.uploading()) {
+            return 'Uploading...';
+        }
+        return this.document() ? 'Replace' : 'Upload';
+    }, ...(ngDevMode ? [{ debugName: "buttonLabel" }] : []));
     onFileChange(event) {
         const target = event.target;
         const file = target.files?.[0];
@@ -1069,7 +1720,7 @@ class OnboardingDocumentUploader {
         target.value = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingDocumentUploader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingDocumentUploader, isStandalone: true, selector: "rolatech-onboarding-document-uploader", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, documentType: { classPropertyName: "documentType", publicName: "documentType", isSignal: true, isRequired: true, transformFunction: null }, document: { classPropertyName: "document", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, acceptedTypes: { classPropertyName: "acceptedTypes", publicName: "acceptedTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingDocumentUploader, isStandalone: true, selector: "rolatech-onboarding-document-uploader", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, documentType: { classPropertyName: "documentType", publicName: "documentType", isSignal: true, isRequired: true, transformFunction: null }, document: { classPropertyName: "document", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, pendingFilename: { classPropertyName: "pendingFilename", publicName: "pendingFilename", isSignal: true, isRequired: false, transformFunction: null }, uploadError: { classPropertyName: "uploadError", publicName: "uploadError", isSignal: true, isRequired: false, transformFunction: null }, acceptedTypes: { classPropertyName: "acceptedTypes", publicName: "acceptedTypes", isSignal: true, isRequired: false, transformFunction: null }, canPreview: { classPropertyName: "canPreview", publicName: "canPreview", isSignal: true, isRequired: false, transformFunction: null }, previewBusy: { classPropertyName: "previewBusy", publicName: "previewBusy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", previewRequested: "previewRequested" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <section class="rounded-2xl border border-(--rt-border-color) bg-(--rt-base-background) p-4 shadow-sm">
       <div class="flex flex-wrap items-start justify-between gap-4">
         <div>
@@ -1081,30 +1732,69 @@ class OnboardingDocumentUploader {
               {{ existing.originalFilename }}
               <span class="text-(--rt-text-secondary)">(v{{ existing.version }})</span>
             </p>
+          } @else if (pendingFilename()) {
+            <p class="mt-2 text-sm text-(--rt-text-primary)">{{ pendingFilename() }}</p>
           }
         </div>
 
-        <label
-          class="inline-flex cursor-pointer items-center rounded-xl border border-(--rt-border-color) px-3 py-2 text-sm font-medium text-(--rt-text-primary) transition hover:bg-(--rt-raised-background)"
-          [class.pointer-events-none]="busy()"
-          [class.opacity-60]="busy()"
-        >
-          {{ document() ? 'Replace' : 'Upload' }}
-          <input
-            type="file"
-            class="hidden"
-            [accept]="acceptedTypes()"
-            [disabled]="busy()"
-            (change)="onFileChange($event)"
-          />
-        </label>
+        <div class="flex flex-wrap items-center gap-2">
+          @if (document() && canPreview()) {
+            <button
+              type="button"
+              class="rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm font-medium text-(--rt-text-primary) transition hover:bg-(--rt-base-background) disabled:cursor-not-allowed disabled:opacity-60"
+              [disabled]="previewBusy()"
+              (click)="previewRequested.emit()"
+            >
+              {{ previewBusy() ? 'Loading...' : 'Preview' }}
+            </button>
+          }
+
+          <label
+            class="inline-flex cursor-pointer items-center rounded-xl border border-(--rt-border-color) px-3 py-2 text-sm font-medium text-(--rt-text-primary) transition hover:bg-(--rt-raised-background)"
+            [class.pointer-events-none]="busy() || locked()"
+            [class.opacity-60]="busy() || locked()"
+          >
+            {{ buttonLabel() }}
+            <input
+              type="file"
+              class="hidden"
+              [accept]="acceptedTypes()"
+              [disabled]="busy() || locked()"
+              (change)="onFileChange($event)"
+            />
+          </label>
+        </div>
       </div>
 
+      @if (uploading()) {
+        <div class="mt-3 space-y-2">
+          <div class="flex items-center justify-between gap-3 text-xs text-(--rt-text-secondary)">
+            <span>Uploading</span>
+            <span>{{ progress() }}%</span>
+          </div>
+          <div class="h-2 overflow-hidden rounded-full bg-(--rt-raised-background)">
+            <div class="h-full rounded-full bg-(--rt-brand-color) transition-all duration-200" [style.width.%]="progress()"></div>
+          </div>
+        </div>
+      }
+
+      @if (warning()) {
+        <div class="mt-3 rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-amber-800">
+          {{ warning() }}
+        </div>
+      }
+
       @if (comment()) {
-        <div class="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
+        <div class="mt-3 rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-amber-800">
           {{ comment() }}
         </div>
       }
+
+      @if (uploadError()) {
+        <div class="mt-3 rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-rose-700">
+          {{ uploadError() }}
+        </div>
+      }
     </section>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -1128,34 +1818,243 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
               {{ existing.originalFilename }}
               <span class="text-(--rt-text-secondary)">(v{{ existing.version }})</span>
             </p>
+          } @else if (pendingFilename()) {
+            <p class="mt-2 text-sm text-(--rt-text-primary)">{{ pendingFilename() }}</p>
           }
         </div>
 
-        <label
-          class="inline-flex cursor-pointer items-center rounded-xl border border-(--rt-border-color) px-3 py-2 text-sm font-medium text-(--rt-text-primary) transition hover:bg-(--rt-raised-background)"
-          [class.pointer-events-none]="busy()"
-          [class.opacity-60]="busy()"
-        >
-          {{ document() ? 'Replace' : 'Upload' }}
-          <input
-            type="file"
-            class="hidden"
-            [accept]="acceptedTypes()"
-            [disabled]="busy()"
-            (change)="onFileChange($event)"
-          />
-        </label>
+        <div class="flex flex-wrap items-center gap-2">
+          @if (document() && canPreview()) {
+            <button
+              type="button"
+              class="rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm font-medium text-(--rt-text-primary) transition hover:bg-(--rt-base-background) disabled:cursor-not-allowed disabled:opacity-60"
+              [disabled]="previewBusy()"
+              (click)="previewRequested.emit()"
+            >
+              {{ previewBusy() ? 'Loading...' : 'Preview' }}
+            </button>
+          }
+
+          <label
+            class="inline-flex cursor-pointer items-center rounded-xl border border-(--rt-border-color) px-3 py-2 text-sm font-medium text-(--rt-text-primary) transition hover:bg-(--rt-raised-background)"
+            [class.pointer-events-none]="busy() || locked()"
+            [class.opacity-60]="busy() || locked()"
+          >
+            {{ buttonLabel() }}
+            <input
+              type="file"
+              class="hidden"
+              [accept]="acceptedTypes()"
+              [disabled]="busy() || locked()"
+              (change)="onFileChange($event)"
+            />
+          </label>
+        </div>
       </div>
 
+      @if (uploading()) {
+        <div class="mt-3 space-y-2">
+          <div class="flex items-center justify-between gap-3 text-xs text-(--rt-text-secondary)">
+            <span>Uploading</span>
+            <span>{{ progress() }}%</span>
+          </div>
+          <div class="h-2 overflow-hidden rounded-full bg-(--rt-raised-background)">
+            <div class="h-full rounded-full bg-(--rt-brand-color) transition-all duration-200" [style.width.%]="progress()"></div>
+          </div>
+        </div>
+      }
+
+      @if (warning()) {
+        <div class="mt-3 rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-amber-800">
+          {{ warning() }}
+        </div>
+      }
+
       @if (comment()) {
-        <div class="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
+        <div class="mt-3 rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-amber-800">
           {{ comment() }}
         </div>
       }
+
+      @if (uploadError()) {
+        <div class="mt-3 rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-rose-700">
+          {{ uploadError() }}
+        </div>
+      }
     </section>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], documentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentType", required: true }] }], document: [{ type: i0.Input, args: [{ isSignal: true, alias: "document", required: false }] }], comment: [{ type: i0.Input, args: [{ isSignal: true, alias: "comment", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], acceptedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedTypes", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], documentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentType", required: true }] }], document: [{ type: i0.Input, args: [{ isSignal: true, alias: "document", required: false }] }], warning: [{ type: i0.Input, args: [{ isSignal: true, alias: "warning", required: false }] }], comment: [{ type: i0.Input, args: [{ isSignal: true, alias: "comment", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], locked: [{ type: i0.Input, args: [{ isSignal: true, alias: "locked", required: false }] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], pendingFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingFilename", required: false }] }], uploadError: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadError", required: false }] }], acceptedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptedTypes", required: false }] }], canPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "canPreview", required: false }] }], previewBusy: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewBusy", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], previewRequested: [{ type: i0.Output, args: ["previewRequested"] }] } });
+
+class OnboardingDocumentPreviewDialog {
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    subtitle = input(null, ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    url = input(null, ...(ngDevMode ? [{ debugName: "url" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    closeRequested = output();
+    sanitizer = inject(DomSanitizer);
+    safeUrl = computed(() => {
+        const url = this.url();
+        return url ? this.sanitizer.bypassSecurityTrustResourceUrl(url) : null;
+    }, ...(ngDevMode ? [{ debugName: "safeUrl" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingDocumentPreviewDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingDocumentPreviewDialog, isStandalone: true, selector: "rolatech-onboarding-document-preview-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    @if (open()) {
+      <div
+        class="fixed inset-0 z-9200 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+        (click)="closeRequested.emit()"
+      >
+        <section
+          class="flex max-h-[92vh] w-full max-w-6xl flex-col overflow-hidden rounded-xl border border-(--rt-border-color) bg-(--rt-base-background) shadow-2xl"
+          (click)="$event.stopPropagation()"
+        >
+          <header
+            class="flex flex-wrap items-start justify-between gap-4 border-b border-(--rt-border-color) bg-(--rt-raised-background) px-5 py-4"
+          >
+            <div class="min-w-0 space-y-1">
+              <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-(--rt-text-secondary)">Document Preview</p>
+              <h2 class="truncate text-lg font-semibold text-(--rt-text-primary)">{{ title() || 'Onboarding document' }}</h2>
+              @if (subtitle()) {
+                <p class="text-sm text-(--rt-text-secondary)">{{ subtitle() }}</p>
+              }
+            </div>
+
+            <div class="flex flex-wrap items-center gap-2">
+              @if (url()) {
+                <a
+                  [href]="url()!"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="rounded-full border border-(--rt-border-color) bg-(--rt-base-background) px-3 py-1.5 text-xs font-semibold text-(--rt-text-primary) transition hover:bg-(--rt-raised-background)"
+                >
+                  Open in new tab
+                </a>
+              }
+
+              <button
+                type="button"
+                class="rounded-full border border-(--rt-border-color) bg-(--rt-base-background) px-3 py-1.5 text-xs font-semibold text-(--rt-text-primary) transition hover:bg-(--rt-raised-background)"
+                (click)="closeRequested.emit()"
+              >
+                Close
+              </button>
+            </div>
+          </header>
+
+          <div class="min-h-[420px] flex-1 bg-(--rt-raised-background)">
+            @if (loading()) {
+              <div class="flex h-full items-center justify-center px-6 text-sm text-(--rt-text-secondary)">
+                Loading preview...
+              </div>
+            } @else if (error()) {
+              <div class="flex h-full items-center justify-center px-6">
+                <div
+                  class="max-w-md rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) px-5 py-4 text-sm text-rose-700"
+                >
+                  {{ error() }}
+                </div>
+              </div>
+            } @else if (safeUrl()) {
+              <iframe
+                class="h-full min-h-[420px] w-full bg-(--rt-base-background)"
+                [src]="safeUrl()"
+                title="Onboarding document preview"
+              ></iframe>
+            } @else {
+              <div class="flex h-full items-center justify-center px-6 text-sm text-(--rt-text-secondary)">
+                Preview unavailable for this document.
+              </div>
+            }
+          </div>
+        </section>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingDocumentPreviewDialog, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rolatech-onboarding-document-preview-dialog',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'block' },
+                    template: `
+    @if (open()) {
+      <div
+        class="fixed inset-0 z-9200 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+        (click)="closeRequested.emit()"
+      >
+        <section
+          class="flex max-h-[92vh] w-full max-w-6xl flex-col overflow-hidden rounded-xl border border-(--rt-border-color) bg-(--rt-base-background) shadow-2xl"
+          (click)="$event.stopPropagation()"
+        >
+          <header
+            class="flex flex-wrap items-start justify-between gap-4 border-b border-(--rt-border-color) bg-(--rt-raised-background) px-5 py-4"
+          >
+            <div class="min-w-0 space-y-1">
+              <p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-(--rt-text-secondary)">Document Preview</p>
+              <h2 class="truncate text-lg font-semibold text-(--rt-text-primary)">{{ title() || 'Onboarding document' }}</h2>
+              @if (subtitle()) {
+                <p class="text-sm text-(--rt-text-secondary)">{{ subtitle() }}</p>
+              }
+            </div>
+
+            <div class="flex flex-wrap items-center gap-2">
+              @if (url()) {
+                <a
+                  [href]="url()!"
+                  target="_blank"
+                  rel="noreferrer"
+                  class="rounded-full border border-(--rt-border-color) bg-(--rt-base-background) px-3 py-1.5 text-xs font-semibold text-(--rt-text-primary) transition hover:bg-(--rt-raised-background)"
+                >
+                  Open in new tab
+                </a>
+              }
+
+              <button
+                type="button"
+                class="rounded-full border border-(--rt-border-color) bg-(--rt-base-background) px-3 py-1.5 text-xs font-semibold text-(--rt-text-primary) transition hover:bg-(--rt-raised-background)"
+                (click)="closeRequested.emit()"
+              >
+                Close
+              </button>
+            </div>
+          </header>
+
+          <div class="min-h-[420px] flex-1 bg-(--rt-raised-background)">
+            @if (loading()) {
+              <div class="flex h-full items-center justify-center px-6 text-sm text-(--rt-text-secondary)">
+                Loading preview...
+              </div>
+            } @else if (error()) {
+              <div class="flex h-full items-center justify-center px-6">
+                <div
+                  class="max-w-md rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) px-5 py-4 text-sm text-rose-700"
+                >
+                  {{ error() }}
+                </div>
+              </div>
+            } @else if (safeUrl()) {
+              <iframe
+                class="h-full min-h-[420px] w-full bg-(--rt-base-background)"
+                [src]="safeUrl()"
+                title="Onboarding document preview"
+              ></iframe>
+            } @else {
+              <div class="flex h-full items-center justify-center px-6 text-sm text-(--rt-text-secondary)">
+                Preview unavailable for this document.
+              </div>
+            }
+          </div>
+        </section>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
 
 class OnboardingIssueList {
     issues = input([], ...(ngDevMode ? [{ debugName: "issues" }] : []));
@@ -1176,11 +2075,13 @@ class OnboardingIssueList {
       } @else {
         <div class="space-y-3">
           @for (issue of issues(); track issue.id) {
-            <article class="rounded-xl border border-amber-200 bg-amber-50 p-3">
+            <article class="rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) p-3">
               <div class="flex flex-wrap items-center justify-between gap-2">
                 <p class="text-xs font-semibold uppercase tracking-wide text-amber-800">{{ issueTypeLabel(issue.issueType) }}</p>
                 @if (issue.resolved) {
-                  <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700">
+                  <span
+                    class="rounded-full border border-(--rt-border-color) bg-(--rt-base-background) px-2 py-0.5 text-xs font-semibold text-emerald-700"
+                  >
                     Resolved
                   </span>
                 }
@@ -1224,11 +2125,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       } @else {
         <div class="space-y-3">
           @for (issue of issues(); track issue.id) {
-            <article class="rounded-xl border border-amber-200 bg-amber-50 p-3">
+            <article class="rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) p-3">
               <div class="flex flex-wrap items-center justify-between gap-2">
                 <p class="text-xs font-semibold uppercase tracking-wide text-amber-800">{{ issueTypeLabel(issue.issueType) }}</p>
                 @if (issue.resolved) {
-                  <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700">
+                  <span
+                    class="rounded-full border border-(--rt-border-color) bg-(--rt-base-background) px-2 py-0.5 text-xs font-semibold text-emerald-700"
+                  >
                     Resolved
                   </span>
                 }
@@ -1487,9 +2390,1124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
 
+class OnboardingReviewIssuesBanner {
+    issues = input([], ...(ngDevMode ? [{ debugName: "issues" }] : []));
+    status = input(null, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    unresolvedCount = computed(() => this.issues().filter((issue) => !issue.resolved).length, ...(ngDevMode ? [{ debugName: "unresolvedCount" }] : []));
+    eyebrow = computed(() => (this.status() === 'NEED_MORE_INFO' ? 'More Information Required' : 'Review Status'), ...(ngDevMode ? [{ debugName: "eyebrow" }] : []));
+    title = computed(() => this.status() === 'NEED_MORE_INFO'
+        ? 'Review feedback is blocking resubmission.'
+        : 'The application is now waiting on reviewer action.', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = computed(() => this.status() === 'NEED_MORE_INFO'
+        ? 'Only the flagged fields and documents should be updated. Approved items stay read-only until review is complete.'
+        : 'You can monitor status updates and any reviewer feedback from this flow.', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingReviewIssuesBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: OnboardingReviewIssuesBanner, isStandalone: true, selector: "rolatech-onboarding-review-issues-banner", inputs: { issues: { classPropertyName: "issues", publicName: "issues", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <section
+      class="rounded-2xl border border-(--rt-border-color) bg-(--rt-base-background) px-4 py-4 shadow-sm"
+      [class]="status() === 'NEED_MORE_INFO' ? 'text-amber-950' : 'text-sky-950'"
+    >
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div class="space-y-1">
+          <p class="text-xs font-semibold uppercase tracking-[0.2em]">{{ eyebrow() }}</p>
+          <h3 class="text-base font-semibold">{{ title() }}</h3>
+          <p class="text-sm opacity-80">{{ description() }}</p>
+        </div>
+
+        <span class="rounded-full border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-1 text-xs font-semibold">
+          {{ unresolvedCount() }} open
+        </span>
+      </div>
+    </section>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingReviewIssuesBanner, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rolatech-onboarding-review-issues-banner',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'block' },
+                    template: `
+    <section
+      class="rounded-2xl border border-(--rt-border-color) bg-(--rt-base-background) px-4 py-4 shadow-sm"
+      [class]="status() === 'NEED_MORE_INFO' ? 'text-amber-950' : 'text-sky-950'"
+    >
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div class="space-y-1">
+          <p class="text-xs font-semibold uppercase tracking-[0.2em]">{{ eyebrow() }}</p>
+          <h3 class="text-base font-semibold">{{ title() }}</h3>
+          <p class="text-sm opacity-80">{{ description() }}</p>
+        </div>
+
+        <span class="rounded-full border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-1 text-xs font-semibold">
+          {{ unresolvedCount() }} open
+        </span>
+      </div>
+    </section>
+  `,
+                }]
+        }], propDecorators: { issues: [{ type: i0.Input, args: [{ isSignal: true, alias: "issues", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+
+class OnboardingQualificationUploadSection {
+    documentSpecs = input([], ...(ngDevMode ? [{ debugName: "documentSpecs" }] : []));
+    documents = input([], ...(ngDevMode ? [{ debugName: "documents" }] : []));
+    issueComments = input({}, ...(ngDevMode ? [{ debugName: "issueComments" }] : []));
+    lockedDocuments = input([], ...(ngDevMode ? [{ debugName: "lockedDocuments" }] : []));
+    uploadStates = input({}, ...(ngDevMode ? [{ debugName: "uploadStates" }] : []));
+    busy = input(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+    fileSelected = output();
+    uploadedRequiredCount = computed(() => {
+        const uploadedTypes = new Set(this.documents().map((item) => item.documentType));
+        return this.documentSpecs().filter((spec) => uploadedTypes.has(spec.type)).length;
+    }, ...(ngDevMode ? [{ debugName: "uploadedRequiredCount" }] : []));
+    documentFor(documentType) {
+        return this.documents().find((item) => item.documentType === documentType) ?? null;
+    }
+    issueCommentFor(documentType) {
+        return this.issueComments()[documentType] ?? null;
+    }
+    isLocked(documentType) {
+        return this.lockedDocuments().includes(documentType);
+    }
+    uploadStateFor(documentType) {
+        return (this.uploadStates()[documentType] ?? {
+            filename: null,
+            progress: 0,
+            status: 'idle',
+            error: null,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingQualificationUploadSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingQualificationUploadSection, isStandalone: true, selector: "rolatech-onboarding-qualification-upload-section", inputs: { documentSpecs: { classPropertyName: "documentSpecs", publicName: "documentSpecs", isSignal: true, isRequired: false, transformFunction: null }, documents: { classPropertyName: "documents", publicName: "documents", isSignal: true, isRequired: false, transformFunction: null }, issueComments: { classPropertyName: "issueComments", publicName: "issueComments", isSignal: true, isRequired: false, transformFunction: null }, lockedDocuments: { classPropertyName: "lockedDocuments", publicName: "lockedDocuments", isSignal: true, isRequired: false, transformFunction: null }, uploadStates: { classPropertyName: "uploadStates", publicName: "uploadStates", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <section class="space-y-4 rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm">
+      <div class="flex flex-wrap items-start justify-between gap-4">
+        <div class="space-y-2">
+          <h2 class="text-lg font-semibold text-(--rt-text-primary)">Qualification Documents</h2>
+          <p class="max-w-2xl text-sm text-(--rt-text-secondary)">
+            Upload the documents needed for review. File types are limited to PDF, JPG, and PNG.
+          </p>
+        </div>
+
+        <span class="rounded-full border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-1 text-xs font-semibold text-(--rt-text-secondary)">
+          {{ uploadedRequiredCount() }}/{{ documentSpecs().length }} ready
+        </span>
+      </div>
+
+      @for (documentSpec of documentSpecs(); track documentSpec.type) {
+        <rolatech-onboarding-document-uploader
+          [label]="documentSpec.label"
+          [helperText]="documentSpec.helperText ?? 'Upload a clear and readable file.'"
+          [documentType]="documentSpec.type"
+          [document]="documentFor(documentSpec.type)"
+          [warning]="documentSpec.warning ?? null"
+          [comment]="issueCommentFor(documentSpec.type)"
+          [busy]="busy()"
+          [locked]="isLocked(documentSpec.type)"
+          [uploading]="uploadStateFor(documentSpec.type).status === 'uploading'"
+          [progress]="uploadStateFor(documentSpec.type).progress"
+          [pendingFilename]="uploadStateFor(documentSpec.type).filename"
+          [uploadError]="uploadStateFor(documentSpec.type).error"
+          (fileSelected)="fileSelected.emit($event)"
+        />
+      }
+    </section>
+  `, isInline: true, dependencies: [{ kind: "component", type: OnboardingDocumentUploader, selector: "rolatech-onboarding-document-uploader", inputs: ["label", "helperText", "documentType", "document", "warning", "comment", "busy", "locked", "uploading", "progress", "pendingFilename", "uploadError", "acceptedTypes", "canPreview", "previewBusy"], outputs: ["fileSelected", "previewRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingQualificationUploadSection, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rolatech-onboarding-qualification-upload-section',
+                    standalone: true,
+                    imports: [OnboardingDocumentUploader],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'block' },
+                    template: `
+    <section class="space-y-4 rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm">
+      <div class="flex flex-wrap items-start justify-between gap-4">
+        <div class="space-y-2">
+          <h2 class="text-lg font-semibold text-(--rt-text-primary)">Qualification Documents</h2>
+          <p class="max-w-2xl text-sm text-(--rt-text-secondary)">
+            Upload the documents needed for review. File types are limited to PDF, JPG, and PNG.
+          </p>
+        </div>
+
+        <span class="rounded-full border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-1 text-xs font-semibold text-(--rt-text-secondary)">
+          {{ uploadedRequiredCount() }}/{{ documentSpecs().length }} ready
+        </span>
+      </div>
+
+      @for (documentSpec of documentSpecs(); track documentSpec.type) {
+        <rolatech-onboarding-document-uploader
+          [label]="documentSpec.label"
+          [helperText]="documentSpec.helperText ?? 'Upload a clear and readable file.'"
+          [documentType]="documentSpec.type"
+          [document]="documentFor(documentSpec.type)"
+          [warning]="documentSpec.warning ?? null"
+          [comment]="issueCommentFor(documentSpec.type)"
+          [busy]="busy()"
+          [locked]="isLocked(documentSpec.type)"
+          [uploading]="uploadStateFor(documentSpec.type).status === 'uploading'"
+          [progress]="uploadStateFor(documentSpec.type).progress"
+          [pendingFilename]="uploadStateFor(documentSpec.type).filename"
+          [uploadError]="uploadStateFor(documentSpec.type).error"
+          (fileSelected)="fileSelected.emit($event)"
+        />
+      }
+    </section>
+  `,
+                }]
+        }], propDecorators: { documentSpecs: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentSpecs", required: false }] }], documents: [{ type: i0.Input, args: [{ isSignal: true, alias: "documents", required: false }] }], issueComments: [{ type: i0.Input, args: [{ isSignal: true, alias: "issueComments", required: false }] }], lockedDocuments: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedDocuments", required: false }] }], uploadStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadStates", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
+
+class OnboardingVatSection {
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    applicantType = input.required(...(ngDevMode ? [{ debugName: "applicantType" }] : []));
+    companyCountry = input.required(...(ngDevMode ? [{ debugName: "companyCountry" }] : []));
+    fieldLocks = input({}, ...(ngDevMode ? [{ debugName: "fieldLocks" }] : []));
+    vatRateLabel = input('20%', ...(ngDevMode ? [{ debugName: "vatRateLabel" }] : []));
+    issueComments = input({}, ...(ngDevMode ? [{ debugName: "issueComments" }] : []));
+    isIndividual = computed(() => this.applicantType() === 'INDIVIDUAL', ...(ngDevMode ? [{ debugName: "isIndividual" }] : []));
+    currentVatMode = computed(() => {
+        const value = this.form().get('vatMode')?.value;
+        return (typeof value === 'string' ? value : 'NON_VAT_REGISTERED');
+    }, ...(ngDevMode ? [{ debugName: "currentVatMode" }] : []));
+    vatNumberValue = computed(() => String(this.form().get('vatNumber')?.value ?? '').trim(), ...(ngDevMode ? [{ debugName: "vatNumberValue" }] : []));
+    sectionReadOnly = computed(() => this.isFieldLocked('vatMode') && this.isFieldLocked('vatNumber'), ...(ngDevMode ? [{ debugName: "sectionReadOnly" }] : []));
+    vatModeLabel = onboardingVatModeLabel;
+    fieldComment(fieldKey) {
+        return this.issueComments()[fieldKey] ?? null;
+    }
+    isFieldLocked(fieldKey) {
+        return this.fieldLocks()[fieldKey] ?? false;
+    }
+    hasError(controlName, errorCode) {
+        const control = this.form().get(controlName);
+        return Boolean(control?.touched && control.hasError(errorCode));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingVatSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingVatSection, isStandalone: true, selector: "rolatech-onboarding-vat-section", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, applicantType: { classPropertyName: "applicantType", publicName: "applicantType", isSignal: true, isRequired: true, transformFunction: null }, companyCountry: { classPropertyName: "companyCountry", publicName: "companyCountry", isSignal: true, isRequired: true, transformFunction: null }, fieldLocks: { classPropertyName: "fieldLocks", publicName: "fieldLocks", isSignal: true, isRequired: false, transformFunction: null }, vatRateLabel: { classPropertyName: "vatRateLabel", publicName: "vatRateLabel", isSignal: true, isRequired: false, transformFunction: null }, issueComments: { classPropertyName: "issueComments", publicName: "issueComments", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <section class="space-y-4 rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm">
+      <div class="space-y-2">
+        <h2 class="text-lg font-semibold text-(--rt-text-primary)">VAT and Settlement Terms</h2>
+        <p class="max-w-2xl text-sm text-(--rt-text-secondary)">
+          We calculate final payment as commission base x (1 + VAT rate). The current VAT rate for this application is {{ vatRateLabel() }}.
+        </p>
+      </div>
+
+      @if (isIndividual()) {
+        <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-4 py-4 text-sm text-emerald-900">
+          Individual applicants are treated as non-VAT registered. VAT is fixed at 0% and no VAT number is required.
+        </div>
+      } @else {
+        @if (sectionReadOnly()) {
+          <div class="grid gap-4 md:grid-cols-2">
+            <article class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) p-4">
+              <p class="text-xs font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">VAT mode</p>
+              <p class="mt-2 text-sm font-medium text-(--rt-text-primary)">{{ vatModeLabel(currentVatMode()) }}</p>
+            </article>
+
+            <article class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) p-4">
+              <p class="text-xs font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">VAT number</p>
+              <p class="mt-2 text-sm font-medium text-(--rt-text-primary)">{{ vatNumberValue() || 'Pending manual verification' }}</p>
+            </article>
+          </div>
+        } @else {
+          <form [formGroup]="form()" class="grid gap-4 md:grid-cols-2">
+            @if (isFieldLocked('vatMode')) {
+              <article class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) p-4">
+                <p class="text-xs font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">VAT mode</p>
+                <p class="mt-2 text-sm font-medium text-(--rt-text-primary)">{{ vatModeLabel(currentVatMode()) }}</p>
+              </article>
+            } @else {
+              <label class="grid gap-2">
+                <span class="text-sm font-medium text-(--rt-text-secondary)">VAT mode</span>
+                <select
+                  formControlName="vatMode"
+                  class="h-11 rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 text-(--rt-text-primary)"
+                >
+                  <option value="VAT_REGISTERED">VAT registered</option>
+                  <option value="MANUAL_REVIEW_REQUIRED">Manual review required</option>
+                </select>
+              </label>
+            }
+
+            @if (currentVatMode() === 'VAT_REGISTERED') {
+              <label class="grid gap-2">
+                <span class="text-sm font-medium text-(--rt-text-secondary)">VAT number</span>
+                <input formControlName="vatNumber" class="h-11 rounded-xl border border-(--rt-border-color) px-3" [readonly]="isFieldLocked('vatNumber')" />
+              </label>
+            }
+          </form>
+        }
+
+        @if (fieldComment('vatMode')) {
+          <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-4 py-3 text-sm text-amber-800">
+            {{ fieldComment('vatMode') }}
+          </div>
+        }
+
+        @if (fieldComment('vatNumber')) {
+          <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-4 py-3 text-sm text-amber-800">
+            {{ fieldComment('vatNumber') }}
+          </div>
+        }
+
+        @if (currentVatMode() === 'MANUAL_REVIEW_REQUIRED') {
+          <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-4 py-3 text-sm text-amber-900">
+            Manual verification is required because a VAT number is unavailable. This keeps the application inside the company review flow.
+          </div>
+        }
+
+        @if (companyCountry() === 'CN') {
+          <p class="text-sm text-(--rt-text-secondary)">
+            China companies still follow company VAT rules. If a VAT number is unavailable, choose manual review instead of leaving the section incomplete.
+          </p>
+        }
+
+        @if (hasError('vatNumber', 'required')) {
+          <p class="text-sm text-rose-700">VAT number is required when VAT mode is set to VAT registered.</p>
+        }
+      }
+    </section>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingVatSection, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rolatech-onboarding-vat-section',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'block' },
+                    template: `
+    <section class="space-y-4 rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm">
+      <div class="space-y-2">
+        <h2 class="text-lg font-semibold text-(--rt-text-primary)">VAT and Settlement Terms</h2>
+        <p class="max-w-2xl text-sm text-(--rt-text-secondary)">
+          We calculate final payment as commission base x (1 + VAT rate). The current VAT rate for this application is {{ vatRateLabel() }}.
+        </p>
+      </div>
+
+      @if (isIndividual()) {
+        <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-4 py-4 text-sm text-emerald-900">
+          Individual applicants are treated as non-VAT registered. VAT is fixed at 0% and no VAT number is required.
+        </div>
+      } @else {
+        @if (sectionReadOnly()) {
+          <div class="grid gap-4 md:grid-cols-2">
+            <article class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) p-4">
+              <p class="text-xs font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">VAT mode</p>
+              <p class="mt-2 text-sm font-medium text-(--rt-text-primary)">{{ vatModeLabel(currentVatMode()) }}</p>
+            </article>
+
+            <article class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) p-4">
+              <p class="text-xs font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">VAT number</p>
+              <p class="mt-2 text-sm font-medium text-(--rt-text-primary)">{{ vatNumberValue() || 'Pending manual verification' }}</p>
+            </article>
+          </div>
+        } @else {
+          <form [formGroup]="form()" class="grid gap-4 md:grid-cols-2">
+            @if (isFieldLocked('vatMode')) {
+              <article class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) p-4">
+                <p class="text-xs font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">VAT mode</p>
+                <p class="mt-2 text-sm font-medium text-(--rt-text-primary)">{{ vatModeLabel(currentVatMode()) }}</p>
+              </article>
+            } @else {
+              <label class="grid gap-2">
+                <span class="text-sm font-medium text-(--rt-text-secondary)">VAT mode</span>
+                <select
+                  formControlName="vatMode"
+                  class="h-11 rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 text-(--rt-text-primary)"
+                >
+                  <option value="VAT_REGISTERED">VAT registered</option>
+                  <option value="MANUAL_REVIEW_REQUIRED">Manual review required</option>
+                </select>
+              </label>
+            }
+
+            @if (currentVatMode() === 'VAT_REGISTERED') {
+              <label class="grid gap-2">
+                <span class="text-sm font-medium text-(--rt-text-secondary)">VAT number</span>
+                <input formControlName="vatNumber" class="h-11 rounded-xl border border-(--rt-border-color) px-3" [readonly]="isFieldLocked('vatNumber')" />
+              </label>
+            }
+          </form>
+        }
+
+        @if (fieldComment('vatMode')) {
+          <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-4 py-3 text-sm text-amber-800">
+            {{ fieldComment('vatMode') }}
+          </div>
+        }
+
+        @if (fieldComment('vatNumber')) {
+          <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-4 py-3 text-sm text-amber-800">
+            {{ fieldComment('vatNumber') }}
+          </div>
+        }
+
+        @if (currentVatMode() === 'MANUAL_REVIEW_REQUIRED') {
+          <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-4 py-3 text-sm text-amber-900">
+            Manual verification is required because a VAT number is unavailable. This keeps the application inside the company review flow.
+          </div>
+        }
+
+        @if (companyCountry() === 'CN') {
+          <p class="text-sm text-(--rt-text-secondary)">
+            China companies still follow company VAT rules. If a VAT number is unavailable, choose manual review instead of leaving the section incomplete.
+          </p>
+        }
+
+        @if (hasError('vatNumber', 'required')) {
+          <p class="text-sm text-rose-700">VAT number is required when VAT mode is set to VAT registered.</p>
+        }
+      }
+    </section>
+  `,
+                }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], applicantType: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicantType", required: true }] }], companyCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "companyCountry", required: true }] }], fieldLocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldLocks", required: false }] }], vatRateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "vatRateLabel", required: false }] }], issueComments: [{ type: i0.Input, args: [{ isSignal: true, alias: "issueComments", required: false }] }] } });
+
+class OnboardingBankingSection {
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    fieldLocks = input({}, ...(ngDevMode ? [{ debugName: "fieldLocks" }] : []));
+    expectedAccountHolderName = input('', ...(ngDevMode ? [{ debugName: "expectedAccountHolderName" }] : []));
+    issueComments = input({}, ...(ngDevMode ? [{ debugName: "issueComments" }] : []));
+    fieldComment(fieldKey) {
+        return this.issueComments()[fieldKey] ?? null;
+    }
+    isFieldLocked(fieldKey) {
+        return this.fieldLocks()[fieldKey] ?? false;
+    }
+    hasError(controlName, errorCode) {
+        const control = this.form().get(controlName);
+        return Boolean(control?.touched && control.hasError(errorCode));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingBankingSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingBankingSection, isStandalone: true, selector: "rolatech-onboarding-banking-section", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, fieldLocks: { classPropertyName: "fieldLocks", publicName: "fieldLocks", isSignal: true, isRequired: false, transformFunction: null }, expectedAccountHolderName: { classPropertyName: "expectedAccountHolderName", publicName: "expectedAccountHolderName", isSignal: true, isRequired: false, transformFunction: null }, issueComments: { classPropertyName: "issueComments", publicName: "issueComments", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <section class="space-y-4 rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm">
+      <div class="space-y-2">
+        <h2 class="text-lg font-semibold text-(--rt-text-primary)">UK Settlement Bank Account</h2>
+        <p class="max-w-2xl text-sm text-(--rt-text-secondary)">
+          Settlement is restricted to a UK local bank account. The account holder name must match the legal applicant name.
+        </p>
+      </div>
+
+      <form [formGroup]="form()" class="grid gap-4 md:grid-cols-2">
+        <label class="grid gap-2">
+          <span class="text-sm font-medium text-(--rt-text-secondary)">Bank name</span>
+          <input formControlName="bankName" class="h-11 rounded-xl border border-(--rt-border-color) px-3" [readonly]="isFieldLocked('bankName')" />
+          @if (fieldComment('bankName')) {
+            <span class="text-xs text-amber-800">{{ fieldComment('bankName') }}</span>
+          }
+          @if (hasError('bankName', 'required')) {
+            <span class="text-xs text-rose-700">Bank name is required.</span>
+          }
+        </label>
+
+        <label class="grid gap-2">
+          <span class="text-sm font-medium text-(--rt-text-secondary)">Account holder name</span>
+          <input
+            formControlName="accountHolderName"
+            class="h-11 rounded-xl border border-(--rt-border-color) px-3"
+            [readonly]="isFieldLocked('accountHolderName')"
+          />
+          <span class="text-xs text-(--rt-text-secondary)">Expected name: {{ expectedAccountHolderName() || 'Complete the profile section first' }}</span>
+          @if (fieldComment('accountHolderName')) {
+            <span class="text-xs text-amber-800">{{ fieldComment('accountHolderName') }}</span>
+          }
+          @if (hasError('accountHolderName', 'required')) {
+            <span class="text-xs text-rose-700">Account holder name is required.</span>
+          }
+          @if (hasError('accountHolderName', 'accountHolderMismatch')) {
+            <span class="text-xs text-rose-700">Account holder name must match the applicant or company legal name.</span>
+          }
+        </label>
+
+        <label class="grid gap-2">
+          <span class="text-sm font-medium text-(--rt-text-secondary)">Sort code</span>
+          <input formControlName="sortCode" class="h-11 rounded-xl border border-(--rt-border-color) px-3" [readonly]="isFieldLocked('sortCode')" />
+          <span class="text-xs text-(--rt-text-secondary)">Use 6 digits. Example: 01-02-03.</span>
+          @if (fieldComment('sortCode')) {
+            <span class="text-xs text-amber-800">{{ fieldComment('sortCode') }}</span>
+          }
+          @if (hasError('sortCode', 'required')) {
+            <span class="text-xs text-rose-700">Sort code is required.</span>
+          }
+          @if (hasError('sortCode', 'pattern')) {
+            <span class="text-xs text-rose-700">Sort code must contain exactly 6 digits.</span>
+          }
+        </label>
+
+        <label class="grid gap-2">
+          <span class="text-sm font-medium text-(--rt-text-secondary)">Account number</span>
+          <input formControlName="accountNumber" class="h-11 rounded-xl border border-(--rt-border-color) px-3" [readonly]="isFieldLocked('accountNumber')" />
+          <span class="text-xs text-(--rt-text-secondary)">Account number must contain exactly 8 digits.</span>
+          @if (fieldComment('accountNumber')) {
+            <span class="text-xs text-amber-800">{{ fieldComment('accountNumber') }}</span>
+          }
+          @if (hasError('accountNumber', 'required')) {
+            <span class="text-xs text-rose-700">Account number is required.</span>
+          }
+          @if (hasError('accountNumber', 'pattern')) {
+            <span class="text-xs text-rose-700">Account number must contain exactly 8 digits.</span>
+          }
+        </label>
+      </form>
+    </section>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingBankingSection, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rolatech-onboarding-banking-section',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'block' },
+                    template: `
+    <section class="space-y-4 rounded-3xl border border-(--rt-border-color) bg-(--rt-base-background) p-6 shadow-sm">
+      <div class="space-y-2">
+        <h2 class="text-lg font-semibold text-(--rt-text-primary)">UK Settlement Bank Account</h2>
+        <p class="max-w-2xl text-sm text-(--rt-text-secondary)">
+          Settlement is restricted to a UK local bank account. The account holder name must match the legal applicant name.
+        </p>
+      </div>
+
+      <form [formGroup]="form()" class="grid gap-4 md:grid-cols-2">
+        <label class="grid gap-2">
+          <span class="text-sm font-medium text-(--rt-text-secondary)">Bank name</span>
+          <input formControlName="bankName" class="h-11 rounded-xl border border-(--rt-border-color) px-3" [readonly]="isFieldLocked('bankName')" />
+          @if (fieldComment('bankName')) {
+            <span class="text-xs text-amber-800">{{ fieldComment('bankName') }}</span>
+          }
+          @if (hasError('bankName', 'required')) {
+            <span class="text-xs text-rose-700">Bank name is required.</span>
+          }
+        </label>
+
+        <label class="grid gap-2">
+          <span class="text-sm font-medium text-(--rt-text-secondary)">Account holder name</span>
+          <input
+            formControlName="accountHolderName"
+            class="h-11 rounded-xl border border-(--rt-border-color) px-3"
+            [readonly]="isFieldLocked('accountHolderName')"
+          />
+          <span class="text-xs text-(--rt-text-secondary)">Expected name: {{ expectedAccountHolderName() || 'Complete the profile section first' }}</span>
+          @if (fieldComment('accountHolderName')) {
+            <span class="text-xs text-amber-800">{{ fieldComment('accountHolderName') }}</span>
+          }
+          @if (hasError('accountHolderName', 'required')) {
+            <span class="text-xs text-rose-700">Account holder name is required.</span>
+          }
+          @if (hasError('accountHolderName', 'accountHolderMismatch')) {
+            <span class="text-xs text-rose-700">Account holder name must match the applicant or company legal name.</span>
+          }
+        </label>
+
+        <label class="grid gap-2">
+          <span class="text-sm font-medium text-(--rt-text-secondary)">Sort code</span>
+          <input formControlName="sortCode" class="h-11 rounded-xl border border-(--rt-border-color) px-3" [readonly]="isFieldLocked('sortCode')" />
+          <span class="text-xs text-(--rt-text-secondary)">Use 6 digits. Example: 01-02-03.</span>
+          @if (fieldComment('sortCode')) {
+            <span class="text-xs text-amber-800">{{ fieldComment('sortCode') }}</span>
+          }
+          @if (hasError('sortCode', 'required')) {
+            <span class="text-xs text-rose-700">Sort code is required.</span>
+          }
+          @if (hasError('sortCode', 'pattern')) {
+            <span class="text-xs text-rose-700">Sort code must contain exactly 6 digits.</span>
+          }
+        </label>
+
+        <label class="grid gap-2">
+          <span class="text-sm font-medium text-(--rt-text-secondary)">Account number</span>
+          <input formControlName="accountNumber" class="h-11 rounded-xl border border-(--rt-border-color) px-3" [readonly]="isFieldLocked('accountNumber')" />
+          <span class="text-xs text-(--rt-text-secondary)">Account number must contain exactly 8 digits.</span>
+          @if (fieldComment('accountNumber')) {
+            <span class="text-xs text-amber-800">{{ fieldComment('accountNumber') }}</span>
+          }
+          @if (hasError('accountNumber', 'required')) {
+            <span class="text-xs text-rose-700">Account number is required.</span>
+          }
+          @if (hasError('accountNumber', 'pattern')) {
+            <span class="text-xs text-rose-700">Account number must contain exactly 8 digits.</span>
+          }
+        </label>
+      </form>
+    </section>
+  `,
+                }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], fieldLocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldLocks", required: false }] }], expectedAccountHolderName: [{ type: i0.Input, args: [{ isSignal: true, alias: "expectedAccountHolderName", required: false }] }], issueComments: [{ type: i0.Input, args: [{ isSignal: true, alias: "issueComments", required: false }] }] } });
+
+class OnboardingReviewRow {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    helper = input('', ...(ngDevMode ? [{ debugName: "helper" }] : []));
+    existingIssue = input(null, ...(ngDevMode ? [{ debugName: "existingIssue" }] : []));
+    issueOptions = input([], ...(ngDevMode ? [{ debugName: "issueOptions" }] : []));
+    draftIssue = input(null, ...(ngDevMode ? [{ debugName: "draftIssue" }] : []));
+    passed = input(false, ...(ngDevMode ? [{ debugName: "passed" }] : []));
+    busy = input(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+    actionLabel = input(null, ...(ngDevMode ? [{ debugName: "actionLabel" }] : []));
+    actionDisabled = input(false, ...(ngDevMode ? [{ debugName: "actionDisabled" }] : []));
+    selectedIssueKey = computed(() => this.draftIssue()?.optionKey ?? '', ...(ngDevMode ? [{ debugName: "selectedIssueKey" }] : []));
+    activeIssueOption = computed(() => this.issueOptions().find((option) => option.key === this.selectedIssueKey()) ?? null, ...(ngDevMode ? [{ debugName: "activeIssueOption" }] : []));
+    showCustomComment = computed(() => this.activeIssueOption()?.requiresComment ?? false, ...(ngDevMode ? [{ debugName: "showCustomComment" }] : []));
+    selectedPresetComment = computed(() => {
+        const option = this.activeIssueOption();
+        if (!option || option.requiresComment) {
+            return '';
+        }
+        return option.comment;
+    }, ...(ngDevMode ? [{ debugName: "selectedPresetComment" }] : []));
+    customCommentPlaceholder = computed(() => this.activeIssueOption()?.placeholder ?? 'Add a short reviewer note for this issue.', ...(ngDevMode ? [{ debugName: "customCommentPlaceholder" }] : []));
+    passButtonClass = computed(() => this.passed()
+        ? 'border-(--rt-border-color) bg-(--rt-raised-background) text-emerald-800'
+        : 'border-(--rt-border-color) bg-(--rt-base-background) text-(--rt-text-secondary)', ...(ngDevMode ? [{ debugName: "passButtonClass" }] : []));
+    passedChange = output();
+    draftIssueChange = output();
+    actionTriggered = output();
+    togglePassed() {
+        this.passedChange.emit(!this.passed());
+    }
+    onIssueSelectionChange(event) {
+        const target = event.target;
+        const optionKey = target.value;
+        if (!optionKey) {
+            this.draftIssueChange.emit(null);
+            return;
+        }
+        const option = this.issueOptions().find((item) => item.key === optionKey);
+        if (!option) {
+            this.draftIssueChange.emit(null);
+            return;
+        }
+        this.draftIssueChange.emit({
+            optionKey,
+            comment: option.requiresComment && this.draftIssue()?.optionKey === optionKey
+                ? (this.draftIssue()?.comment ?? '')
+                : option.comment,
+        });
+    }
+    onCustomCommentChange(event) {
+        const option = this.activeIssueOption();
+        if (!option) {
+            this.draftIssueChange.emit(null);
+            return;
+        }
+        const target = event.target;
+        this.draftIssueChange.emit({
+            optionKey: option.key,
+            comment: target.value,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingReviewRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: OnboardingReviewRow, isStandalone: true, selector: "rolatech-onboarding-review-row", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, existingIssue: { classPropertyName: "existingIssue", publicName: "existingIssue", isSignal: true, isRequired: false, transformFunction: null }, issueOptions: { classPropertyName: "issueOptions", publicName: "issueOptions", isSignal: true, isRequired: false, transformFunction: null }, draftIssue: { classPropertyName: "draftIssue", publicName: "draftIssue", isSignal: true, isRequired: false, transformFunction: null }, passed: { classPropertyName: "passed", publicName: "passed", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionDisabled: { classPropertyName: "actionDisabled", publicName: "actionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { passedChange: "passedChange", draftIssueChange: "draftIssueChange", actionTriggered: "actionTriggered" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <article
+      class="overflow-hidden rounded-[1.75rem] border border-(--rt-border-color) bg-(--rt-base-background) p-4 shadow-sm"
+    >
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div class="min-w-0 space-y-1">
+          <div class="flex flex-wrap items-center gap-2">
+            <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">{{ label() }}</p>
+            @if (existingIssue()) {
+              <span
+                class="rounded-full border border-(--rt-border-color) bg-(--rt-raised-background) px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-800"
+              >
+                Open issue
+              </span>
+            }
+          </div>
+
+          <p class="wrap-break-words text-sm font-semibold text-(--rt-text-primary)">{{ value() || 'Missing' }}</p>
+          @if (helper()) {
+            <p class="text-xs text-(--rt-text-secondary)">{{ helper() }}</p>
+          }
+        </div>
+
+        <div class="flex flex-wrap items-center gap-2">
+          @if (actionLabel()) {
+            <button
+              type="button"
+              class="cursor-pointer rounded-full border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-1.5 text-xs font-semibold text-(--rt-text-primary) transition hover:bg-(--rt-base-background) disabled:cursor-not-allowed disabled:opacity-60"
+              [disabled]="busy() || actionDisabled()"
+              (click)="actionTriggered.emit()"
+            >
+              {{ actionLabel() }}
+            </button>
+          }
+
+          <button
+            type="button"
+            class="cursor-pointer rounded-full border px-3 py-1.5 text-xs font-semibold transition disabled:cursor-not-allowed disabled:opacity-60"
+            [class]="passButtonClass()"
+            [disabled]="busy()"
+            (click)="togglePassed()"
+          >
+            {{ passed() ? 'Passed' : 'Mark pass' }}
+          </button>
+        </div>
+      </div>
+
+      @if (existingIssue()) {
+        <div
+          class="mt-3 rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-amber-900"
+        >
+          Current issue: {{ existingIssue() }}
+        </div>
+      }
+
+      <div class="mt-3 grid gap-2">
+        <label class="grid gap-2">
+          <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">Issue to raise</span>
+          <select
+            class="rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-(--rt-text-primary) disabled:cursor-not-allowed disabled:bg-(--rt-raised-background)"
+            [value]="selectedIssueKey()"
+            [disabled]="busy() || passed()"
+            (change)="onIssueSelectionChange($event)"
+          >
+            <option value="">No issue</option>
+
+            @for (option of issueOptions(); track option.key) {
+              <option [value]="option.key">{{ option.label }}</option>
+            }
+          </select>
+        </label>
+
+        @if (selectedPresetComment()) {
+          <p class="text-xs text-(--rt-text-secondary)">Review note: {{ selectedPresetComment() }}</p>
+        }
+
+        @if (showCustomComment()) {
+          <label class="grid gap-2">
+            <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)"
+              >Custom review note</span
+            >
+            <textarea
+              class="min-h-24 rounded-xl border border-(--rt-border-color) px-3 py-2 text-sm"
+              [value]="draftIssue()?.comment ?? ''"
+              [disabled]="busy() || passed()"
+              (input)="onCustomCommentChange($event)"
+              [placeholder]="customCommentPlaceholder()"
+            ></textarea>
+          </label>
+        }
+      </div>
+    </article>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OnboardingReviewRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rolatech-onboarding-review-row',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'block' },
+                    template: `
+    <article
+      class="overflow-hidden rounded-[1.75rem] border border-(--rt-border-color) bg-(--rt-base-background) p-4 shadow-sm"
+    >
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div class="min-w-0 space-y-1">
+          <div class="flex flex-wrap items-center gap-2">
+            <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">{{ label() }}</p>
+            @if (existingIssue()) {
+              <span
+                class="rounded-full border border-(--rt-border-color) bg-(--rt-raised-background) px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-800"
+              >
+                Open issue
+              </span>
+            }
+          </div>
+
+          <p class="wrap-break-words text-sm font-semibold text-(--rt-text-primary)">{{ value() || 'Missing' }}</p>
+          @if (helper()) {
+            <p class="text-xs text-(--rt-text-secondary)">{{ helper() }}</p>
+          }
+        </div>
+
+        <div class="flex flex-wrap items-center gap-2">
+          @if (actionLabel()) {
+            <button
+              type="button"
+              class="cursor-pointer rounded-full border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-1.5 text-xs font-semibold text-(--rt-text-primary) transition hover:bg-(--rt-base-background) disabled:cursor-not-allowed disabled:opacity-60"
+              [disabled]="busy() || actionDisabled()"
+              (click)="actionTriggered.emit()"
+            >
+              {{ actionLabel() }}
+            </button>
+          }
+
+          <button
+            type="button"
+            class="cursor-pointer rounded-full border px-3 py-1.5 text-xs font-semibold transition disabled:cursor-not-allowed disabled:opacity-60"
+            [class]="passButtonClass()"
+            [disabled]="busy()"
+            (click)="togglePassed()"
+          >
+            {{ passed() ? 'Passed' : 'Mark pass' }}
+          </button>
+        </div>
+      </div>
+
+      @if (existingIssue()) {
+        <div
+          class="mt-3 rounded-2xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-amber-900"
+        >
+          Current issue: {{ existingIssue() }}
+        </div>
+      }
+
+      <div class="mt-3 grid gap-2">
+        <label class="grid gap-2">
+          <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)">Issue to raise</span>
+          <select
+            class="rounded-xl border border-(--rt-border-color) bg-(--rt-raised-background) px-3 py-2 text-sm text-(--rt-text-primary) disabled:cursor-not-allowed disabled:bg-(--rt-raised-background)"
+            [value]="selectedIssueKey()"
+            [disabled]="busy() || passed()"
+            (change)="onIssueSelectionChange($event)"
+          >
+            <option value="">No issue</option>
+
+            @for (option of issueOptions(); track option.key) {
+              <option [value]="option.key">{{ option.label }}</option>
+            }
+          </select>
+        </label>
+
+        @if (selectedPresetComment()) {
+          <p class="text-xs text-(--rt-text-secondary)">Review note: {{ selectedPresetComment() }}</p>
+        }
+
+        @if (showCustomComment()) {
+          <label class="grid gap-2">
+            <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-(--rt-text-secondary)"
+              >Custom review note</span
+            >
+            <textarea
+              class="min-h-24 rounded-xl border border-(--rt-border-color) px-3 py-2 text-sm"
+              [value]="draftIssue()?.comment ?? ''"
+              [disabled]="busy() || passed()"
+              (input)="onCustomCommentChange($event)"
+              [placeholder]="customCommentPlaceholder()"
+            ></textarea>
+          </label>
+        }
+      </div>
+    </article>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], existingIssue: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingIssue", required: false }] }], issueOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "issueOptions", required: false }] }], draftIssue: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftIssue", required: false }] }], passed: [{ type: i0.Input, args: [{ isSignal: true, alias: "passed", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionDisabled", required: false }] }], passedChange: [{ type: i0.Output, args: ["passedChange"] }], draftIssueChange: [{ type: i0.Output, args: ["draftIssueChange"] }], actionTriggered: [{ type: i0.Output, args: ["actionTriggered"] }] } });
+
+const OTHER_ISSUE_OPTION = {
+    key: 'OTHER',
+    label: 'Other issue',
+    comment: '',
+    requiresComment: true,
+    placeholder: 'Add a short reviewer note for this issue.',
+};
+const DEFAULT_FIELD_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing or incomplete',
+        comment: 'This field is missing or incomplete and needs correction.',
+    },
+    {
+        key: 'format',
+        label: 'Incorrect format',
+        comment: 'This field format is incorrect and needs correction.',
+    },
+    {
+        key: 'mismatch',
+        label: 'Does not match documents',
+        comment: 'This field does not match the supporting documents.',
+    },
+    {
+        key: 'clarify',
+        label: 'Needs clarification',
+        comment: 'Please clarify or correct this field before review can continue.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const NAME_FIELD_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing or incomplete',
+        comment: 'The name is missing or incomplete and needs correction.',
+    },
+    {
+        key: 'mismatch',
+        label: 'Does not match documents',
+        comment: 'The name does not match the supporting documents.',
+    },
+    {
+        key: 'legal',
+        label: 'Legal name unclear',
+        comment: 'Please provide the full legal name exactly as shown on the supporting documents.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const EMAIL_FIELD_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing email',
+        comment: 'The primary email address is missing.',
+    },
+    {
+        key: 'invalid',
+        label: 'Invalid format',
+        comment: 'The primary email address format is invalid.',
+    },
+    {
+        key: 'verify',
+        label: 'Needs verification',
+        comment: 'Please confirm the primary email address before review can continue.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const PHONE_FIELD_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing number',
+        comment: 'The phone number is missing or incomplete.',
+    },
+    {
+        key: 'invalid',
+        label: 'Invalid format',
+        comment: 'The phone number format is invalid.',
+    },
+    {
+        key: 'clarify',
+        label: 'Needs clarification',
+        comment: 'Please confirm the correct phone number before review can continue.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const COUNTRY_FIELD_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing selection',
+        comment: 'The country selection is missing.',
+    },
+    {
+        key: 'mismatch',
+        label: 'Does not match documents',
+        comment: 'The selected country does not match the supporting documents.',
+    },
+    {
+        key: 'clarify',
+        label: 'Needs clarification',
+        comment: 'Please confirm the correct country selection before review can continue.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const VAT_MODE_ISSUE_OPTIONS = [
+    {
+        key: 'mismatch',
+        label: 'Does not match documents',
+        comment: 'The VAT setup does not match the supporting documents.',
+    },
+    {
+        key: 'clarify',
+        label: 'Needs clarification',
+        comment: 'Please clarify the VAT registration status before review can continue.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const VAT_NUMBER_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing VAT number',
+        comment: 'The VAT number is missing.',
+    },
+    {
+        key: 'invalid',
+        label: 'Invalid format',
+        comment: 'The VAT number format appears invalid.',
+    },
+    {
+        key: 'mismatch',
+        label: 'Does not match documents',
+        comment: 'The VAT number does not match the supporting documents.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const BANK_DETAIL_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing or incomplete',
+        comment: 'The banking detail is missing or incomplete.',
+    },
+    {
+        key: 'mismatch',
+        label: 'Does not match evidence',
+        comment: 'The banking detail does not match the supporting bank evidence.',
+    },
+    {
+        key: 'clarify',
+        label: 'Needs clarification',
+        comment: 'Please confirm the banking detail before review can continue.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const BANK_ACCOUNT_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing or incomplete',
+        comment: 'The account detail is missing or incomplete.',
+    },
+    {
+        key: 'invalid',
+        label: 'Invalid format',
+        comment: 'The account detail format appears invalid.',
+    },
+    {
+        key: 'mismatch',
+        label: 'Does not match evidence',
+        comment: 'The account detail does not match the supporting bank evidence.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const DEFAULT_DOCUMENT_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing document',
+        comment: 'The required document is missing.',
+    },
+    {
+        key: 'unreadable',
+        label: 'Unreadable file',
+        comment: 'The uploaded document is unreadable or incomplete.',
+    },
+    {
+        key: 'wrong-document',
+        label: 'Wrong document',
+        comment: 'The uploaded file does not match the requested document type.',
+    },
+    {
+        key: 'mismatch',
+        label: 'Details do not match',
+        comment: 'The uploaded document details do not match the application information.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const PASSPORT_DOCUMENT_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing passport',
+        comment: 'The passport document is missing.',
+    },
+    {
+        key: 'unreadable',
+        label: 'Unreadable photo page',
+        comment: 'The passport photo page is unreadable or incomplete.',
+    },
+    {
+        key: 'expired',
+        label: 'Expired or invalid',
+        comment: 'The passport appears expired or otherwise invalid for verification.',
+    },
+    {
+        key: 'mismatch',
+        label: 'Details do not match',
+        comment: 'The passport details do not match the application information.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const CERTIFICATE_DOCUMENT_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing certificate',
+        comment: 'The certificate is missing.',
+    },
+    {
+        key: 'unreadable',
+        label: 'Unreadable file',
+        comment: 'The certificate is unreadable or incomplete.',
+    },
+    {
+        key: 'invalid',
+        label: 'Invalid or outdated',
+        comment: 'The certificate appears invalid or outdated for review.',
+    },
+    {
+        key: 'mismatch',
+        label: 'Details do not match',
+        comment: 'The certificate details do not match the application information.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+const OTHER_DOCUMENT_ISSUE_OPTIONS = [
+    {
+        key: 'missing',
+        label: 'Missing supporting file',
+        comment: 'The requested supporting evidence is missing.',
+    },
+    {
+        key: 'unreadable',
+        label: 'Unreadable file',
+        comment: 'The supporting evidence is unreadable or incomplete.',
+    },
+    {
+        key: 'insufficient',
+        label: 'Insufficient evidence',
+        comment: 'The supporting evidence is insufficient for review.',
+    },
+    {
+        key: 'wrong-document',
+        label: 'Unrelated document',
+        comment: 'The uploaded file does not provide the requested supporting evidence.',
+    },
+    OTHER_ISSUE_OPTION,
+];
+function onboardingFieldIssueOptions(fieldKey) {
+    switch (fieldKey) {
+        case 'organizationName':
+        case 'contactName':
+            return NAME_FIELD_ISSUE_OPTIONS;
+        case 'contactEmail':
+            return EMAIL_FIELD_ISSUE_OPTIONS;
+        case 'contactPhone':
+            return PHONE_FIELD_ISSUE_OPTIONS;
+        case 'countryCode':
+        case 'companyCountry':
+            return COUNTRY_FIELD_ISSUE_OPTIONS;
+        case 'vatMode':
+            return VAT_MODE_ISSUE_OPTIONS;
+        case 'vatNumber':
+            return VAT_NUMBER_ISSUE_OPTIONS;
+        case 'bankName':
+        case 'accountHolderName':
+            return BANK_DETAIL_ISSUE_OPTIONS;
+        case 'sortCode':
+        case 'accountNumber':
+            return BANK_ACCOUNT_ISSUE_OPTIONS;
+        default:
+            return DEFAULT_FIELD_ISSUE_OPTIONS;
+    }
+}
+function onboardingDocumentIssueOptions(documentType) {
+    switch (documentType) {
+        case 'PASSPORT':
+            return PASSPORT_DOCUMENT_ISSUE_OPTIONS;
+        case 'CERTIFICATE_OF_INCORPORATION':
+        case 'INDUSTRY_CERTIFICATE':
+            return CERTIFICATE_DOCUMENT_ISSUE_OPTIONS;
+        case 'OTHER':
+            return OTHER_DOCUMENT_ISSUE_OPTIONS;
+        default:
+            return DEFAULT_DOCUMENT_ISSUE_OPTIONS;
+    }
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ADMIN_ONBOARDING_ROUTES, AGENT_APPLY_ROUTES, AGENT_ONBOARDING_ROUTES, AdminOnboardingDetailFacade, AdminOnboardingListFacade, AdminOnboardingReviewFacade, AgentApplyFacade, AgentOnboardingFacade, OnboardingDocumentUploader, OnboardingIssueList, OnboardingPageShell, OnboardingStatusBadge, OnboardingStepNav, OnboardingSummaryCard, OnboardingTimeline, OnboardingTimelineDrawer, applicationIdGuard, applyStepGuard };
+export { ADMIN_ONBOARDING_ROUTES, AGENT_APPLY_ROUTES, AGENT_ONBOARDING_ROUTES, AdminOnboardingDetailFacade, AdminOnboardingListFacade, AdminOnboardingReviewFacade, AgentApplyFacade, AgentOnboardingFacade, OnboardingBankingSection, OnboardingDocumentPreviewDialog, OnboardingDocumentUploader, OnboardingIssueList, OnboardingPageShell, OnboardingQualificationUploadSection, OnboardingReviewIssuesBanner, OnboardingReviewRow, OnboardingStatusBadge, OnboardingStepNav, OnboardingSummaryCard, OnboardingTimeline, OnboardingTimelineDrawer, OnboardingVatSection, applicationIdGuard, applyStepGuard, onboardingDocumentIssueOptions, onboardingFieldIssueOptions };
 //# sourceMappingURL=rolatech-angular-onboarding.mjs.map