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

package/fesm2022/rolatech-angular-onboarding-admin-onboarding-detail-page-DREEMvoT.mjs

@@ -0,0 +1,720 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { onboardingApplicantTypeLabel, onboardingStatusLabel, onboardingVatModeLabel, onboardingDocumentTypeLabel } from '@rolatech/angular-services';
+import { PlatformPageHeader, PlatformStatCard } from '@rolatech/angular-platform';
+import { AdminOnboardingReviewFacade, onboardingFieldIssueOptions, onboardingDocumentIssueOptions, OnboardingStatusBadge, OnboardingIssueList, OnboardingTimelineDrawer, OnboardingReviewRow, OnboardingReviewIssuesBanner, OnboardingDocumentPreviewDialog } from './rolatech-angular-onboarding.mjs';
+
+class AdminOnboardingDetailPage {
+    facade = inject(AdminOnboardingReviewFacade);
+    timelineOpen = signal(false, ...(ngDevMode ? [{ debugName: "timelineOpen" }] : []));
+    previewOpen = signal(false, ...(ngDevMode ? [{ debugName: "previewOpen" }] : []));
+    previewTitle = signal(null, ...(ngDevMode ? [{ debugName: "previewTitle" }] : []));
+    previewSubtitle = signal(null, ...(ngDevMode ? [{ debugName: "previewSubtitle" }] : []));
+    onboardingApplicantTypeLabel = onboardingApplicantTypeLabel;
+    onboardingStatusLabel = onboardingStatusLabel;
+    route = inject(ActivatedRoute);
+    paramMap = toSignal(this.route.paramMap, {
+        initialValue: this.route.snapshot.paramMap,
+    });
+    subtitle = computed(() => {
+        const detail = this.facade.detail();
+        if (!detail) {
+            return 'Inspect onboarding data and triage approvals inline.';
+        }
+        return `${detail.organizationName || detail.contactName || 'Applicant'} • ${detail.contactEmail || 'No email'}`;
+    }, ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    title = computed(() => {
+        const detail = this.facade.detail();
+        if (!detail) {
+            return 'Agent Application Review';
+        }
+        return detail.organizationName || detail.contactName || 'Agent Application Review';
+    }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    documentCount = computed(() => this.facade.detail()?.documents.length ?? 0, ...(ngDevMode ? [{ debugName: "documentCount" }] : []));
+    timelineCount = computed(() => this.facade.detail()?.timeline.length ?? 0, ...(ngDevMode ? [{ debugName: "timelineCount" }] : []));
+    openIssueCount = computed(() => (this.facade.detail()?.issues ?? []).filter((issue) => !issue.resolved).length, ...(ngDevMode ? [{ debugName: "openIssueCount" }] : []));
+    profileItems = computed(() => {
+        const detail = this.facade.detail();
+        if (!detail) {
+            return [];
+        }
+        return [
+            ...(detail.applicantType === 'COMPANY'
+                ? [{ key: 'organizationName', label: 'Company legal name', value: detail.organizationName, helper: '' }]
+                : [{ key: 'contactName', label: 'Applicant name', value: detail.contactName, helper: '' }]),
+            ...(detail.applicantType === 'COMPANY'
+                ? [{ key: 'contactName', label: 'Primary contact', value: detail.contactName, helper: '' }]
+                : []),
+            { key: 'contactEmail', label: 'Primary email', value: detail.contactEmail, helper: '' },
+            { key: 'contactPhone', label: 'Phone number', value: detail.contactPhone, helper: '' },
+            { key: 'countryCode', label: 'Country code', value: detail.countryCode, helper: '' },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "profileItems" }] : []));
+    complianceItems = computed(() => {
+        const detail = this.facade.detail();
+        if (!detail) {
+            return [];
+        }
+        return [
+            { key: 'vatMode', label: 'VAT mode', value: onboardingVatModeLabel(detail.vatMode ?? null), helper: '' },
+            { key: 'vatNumber', label: 'VAT number', value: detail.vatNumber || 'Missing', helper: '' },
+            { key: 'bankName', label: 'Bank name', value: detail.bankName, helper: '' },
+            { key: 'accountHolderName', label: 'Account holder', value: detail.accountHolderName, helper: '' },
+            { key: 'sortCode', label: 'Sort code', value: detail.sortCode, helper: '' },
+            { key: 'accountNumber', label: 'Account number', value: detail.accountNumber, helper: '' },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "complianceItems" }] : []));
+    documentItems = computed(() => {
+        const detail = this.facade.detail();
+        if (!detail) {
+            return [];
+        }
+        const requiredItems = this.facade.requiredDocuments().map((spec) => {
+            const document = detail.documents.find((item) => item.documentType === spec.type) ?? null;
+            return {
+                documentType: spec.type,
+                label: spec.label,
+                helper: spec.helperText ?? '',
+                document,
+                value: document?.originalFilename ?? 'Missing',
+            };
+        });
+        const requiredTypes = new Set(requiredItems.map((item) => item.documentType));
+        const additionalItems = detail.documents
+            .filter((item) => !requiredTypes.has(item.documentType))
+            .map((item) => ({
+            documentType: item.documentType,
+            label: `Additional: ${onboardingDocumentTypeLabel(item.documentType)}`,
+            helper: 'Supporting document uploaded by the applicant.',
+            document: item,
+            value: item.originalFilename,
+        }));
+        return [...requiredItems, ...additionalItems];
+    }, ...(ngDevMode ? [{ debugName: "documentItems" }] : []));
+    constructor() {
+        effect(() => {
+            const applicationId = this.paramMap().get('applicationId');
+            if (!applicationId) {
+                return;
+            }
+            void this.facade.load(applicationId);
+        });
+    }
+    setComment(event) {
+        const target = event.target;
+        this.facade.setComment(target.value);
+    }
+    fieldIssueOptions(fieldKey) {
+        return onboardingFieldIssueOptions(fieldKey);
+    }
+    documentIssueOptions(documentType) {
+        return onboardingDocumentIssueOptions(documentType);
+    }
+    onFieldIssue(fieldKey, draft) {
+        this.facade.setFieldIssueDraft(fieldKey, draft);
+    }
+    fieldExistingIssue(fieldKey) {
+        const existing = this.facade.existingFieldIssues();
+        return Object.prototype.hasOwnProperty.call(existing, fieldKey) ? existing[fieldKey] : null;
+    }
+    onFieldPassed(fieldKey, passed) {
+        this.facade.toggleFieldPassed(fieldKey, passed);
+    }
+    onDocumentIssue(documentType, draft) {
+        this.facade.setDocumentIssueDraft(documentType, draft);
+    }
+    documentExistingIssue(documentType) {
+        const existing = this.facade.existingDocumentIssues();
+        return existing[documentType] ?? null;
+    }
+    onDocumentPassed(documentType, passed) {
+        this.facade.toggleDocumentPassed(documentType, passed);
+    }
+    async openDocumentPreview(item) {
+        if (!item.document) {
+            return;
+        }
+        this.previewTitle.set(item.label);
+        this.previewSubtitle.set(item.document.originalFilename || null);
+        this.previewOpen.set(true);
+        await this.facade.openDocumentPreview(item.document.id);
+    }
+    async startReview() {
+        const applicationId = this.paramMap().get('applicationId');
+        if (!applicationId) {
+            return;
+        }
+        await this.facade.startReview(applicationId);
+    }
+    async needMoreInfo() {
+        const applicationId = this.paramMap().get('applicationId');
+        if (!applicationId) {
+            return;
+        }
+        await this.facade.requestMoreInfo(applicationId);
+    }
+    async approve() {
+        const applicationId = this.paramMap().get('applicationId');
+        if (!applicationId) {
+            return;
+        }
+        await this.facade.approve(applicationId);
+    }
+    async fail() {
+        const applicationId = this.paramMap().get('applicationId');
+        if (!applicationId) {
+            return;
+        }
+        await this.facade.fail(applicationId);
+    }
+    openTimeline() {
+        this.timelineOpen.set(true);
+    }
+    closeTimeline() {
+        this.timelineOpen.set(false);
+    }
+    closeDocumentPreview() {
+        this.previewOpen.set(false);
+        this.previewTitle.set(null);
+        this.previewSubtitle.set(null);
+        this.facade.clearDocumentPreview();
+    }
+    countryLabel(value) {
+        switch ((value ?? '').toUpperCase()) {
+            case 'CN':
+                return 'China';
+            case 'UK':
+                return 'United Kingdom';
+            default:
+                return value || '—';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AdminOnboardingDetailPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: AdminOnboardingDetailPage, isStandalone: true, selector: "rolatech-admin-onboarding-detail-page", host: { classAttribute: "block" }, providers: [AdminOnboardingReviewFacade], ngImport: i0, template: `
+    <section class="rt-platform-theme flex flex-col gap-6 bg-(--rt-base-background) p-6 text-(--rt-text-primary)">
+      <rolatech-platform-page-header>
+        <div header-left class="space-y-2">
+          <div class="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+            <a [routerLink]="['../']" class="hover:underline cursor-pointer">Agent Applications</a>
+            @if (facade.detail(); as detail) {
+            <span>/</span>
+            <span>{{ detail.organizationName || detail.contactName || detail.id }}</span>
+            }
+          </div>
+
+          <div>
+            <h1 class="text-2xl font-semibold tracking-tight">{{ title() }}</h1>
+            <p class="mt-1 text-sm text-muted-foreground">{{ subtitle() }}</p>
+          </div>
+        </div>
+
+        <div header-actions>
+          @if (facade.detail()?.status || null; as status) {
+          <rolatech-onboarding-status-badge [status]="status" />
+          }
+          <a
+            [routerLink]="['review']"
+            class="inline-flex items-center rounded-xl border border-(--rt-border-color) px-4 py-2 text-sm font-medium hover:bg-(--rt-raised-background) cursor-pointer"
+          >
+            Review Page
+          </a>
+          <button
+            type="button"
+            class="inline-flex items-center rounded-xl border border-(--rt-border-color) px-4 py-2 text-sm font-medium"
+            (click)="openTimeline()"
+          >
+            Timeline
+          </button>
+        </div>
+      </rolatech-platform-page-header>
+
+      <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <rolatech-platform-stat-card>
+          <div stat-label>Documents</div>
+          <div stat-value>{{ documentCount() }}</div>
+        </rolatech-platform-stat-card>
+
+        <rolatech-platform-stat-card>
+          <div stat-label>Open Issues</div>
+          <div stat-value>{{ openIssueCount() }}</div>
+        </rolatech-platform-stat-card>
+
+        <rolatech-platform-stat-card>
+          <div stat-label>Timeline Events</div>
+          <div stat-value>{{ timelineCount() }}</div>
+        </rolatech-platform-stat-card>
+
+        <rolatech-platform-stat-card>
+          <div stat-label>Draft Issues</div>
+          <div stat-value>{{ facade.issueDrafts().length }}</div>
+        </rolatech-platform-stat-card>
+      </section>
+
+      @if (facade.error()) {
+      <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{{ facade.error() }}</div>
+      }
+
+      @if (facade.detail(); as detail) {
+        <div class="space-y-4">
+          <section class="rounded-2xl border border-(--rt-border-color) bg-card p-5 shadow-sm">
+            <div class="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
+              <span>Application ID: <span class="font-semibold text-(--rt-text-primary)">{{ detail.id }}</span></span>
+              <span>•</span>
+              <span>{{ onboardingStatusLabel(detail.status) }}</span>
+              <span>•</span>
+              <span>{{ onboardingApplicantTypeLabel(detail.applicantType) }}</span>
+              <span>•</span>
+              <span>{{ countryLabel(detail.companyCountry) }}</span>
+            </div>
+          </section>
+
+          @if (detail.status === 'NEED_MORE_INFO') {
+            <rolatech-onboarding-review-issues-banner [issues]="detail.issues" [status]="detail.status" />
+          }
+
+          <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)">Inline Review Workspace</h2>
+                <p class="max-w-2xl text-sm text-(--rt-text-secondary)">
+                  Review the application in place. Mark a field or document as passed, or leave an issue directly beside the item that needs correction.
+                </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)">
+                {{ facade.issueDrafts().length }} draft issues
+              </span>
+            </div>
+
+            <label class="grid gap-2">
+              <span class="text-sm font-medium text-(--rt-text-secondary)">Review summary</span>
+              <textarea
+                class="min-h-28 rounded-xl border border-(--rt-border-color) px-3 py-2"
+                [value]="facade.reviewComment()"
+                (input)="setComment($event)"
+                placeholder="Add a high-level review note or final decision context..."
+              ></textarea>
+            </label>
+
+            <div class="flex flex-wrap gap-3">
+              <button
+                type="button"
+                class="rounded-xl border border-(--rt-border-color) px-4 py-2 text-sm font-semibold text-(--rt-text-secondary) hover:bg-(--rt-raised-background)"
+                [disabled]="facade.saving()"
+                (click)="startReview()"
+              >
+                Start Review
+              </button>
+
+              <button
+                type="button"
+                class="rounded-xl border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-800 hover:bg-amber-100"
+                [disabled]="facade.saving()"
+                (click)="needMoreInfo()"
+              >
+                Need More Info
+              </button>
+
+              <button
+                type="button"
+                class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-800 hover:bg-emerald-100"
+                [disabled]="facade.saving()"
+                (click)="approve()"
+              >
+                Approve
+              </button>
+
+              <button
+                type="button"
+                class="rounded-xl border border-rose-300 bg-rose-50 px-4 py-2 text-sm font-semibold text-rose-800 hover:bg-rose-100"
+                [disabled]="facade.saving()"
+                (click)="fail()"
+              >
+                Fail
+              </button>
+            </div>
+          </section>
+
+          <section class="space-y-4">
+            <div class="space-y-1">
+              <h2 class="text-lg font-semibold text-(--rt-text-primary)">Applicant Profile</h2>
+              <p class="text-sm text-(--rt-text-secondary)">Check identity, contact, and company information.</p>
+            </div>
+
+            <div class="grid gap-4 lg:grid-cols-2">
+              @for (item of profileItems(); track item.key) {
+                <rolatech-onboarding-review-row
+                  [label]="item.label"
+                  [value]="item.value"
+                  [helper]="item.helper"
+                  [issueOptions]="fieldIssueOptions(item.key)"
+                  [existingIssue]="fieldExistingIssue(item.key)"
+                  [draftIssue]="facade.fieldDraft(item.key)"
+                  [passed]="facade.fieldPassed(item.key)"
+                  [busy]="facade.saving()"
+                  (passedChange)="onFieldPassed(item.key, $event)"
+                  (draftIssueChange)="onFieldIssue(item.key, $event)"
+                />
+              }
+            </div>
+          </section>
+
+          <section class="space-y-4">
+            <div class="space-y-1">
+              <h2 class="text-lg font-semibold text-(--rt-text-primary)">Compliance and Banking</h2>
+              <p class="text-sm text-(--rt-text-secondary)">Check VAT setup and settlement account details.</p>
+            </div>
+
+            <div class="grid gap-4 lg:grid-cols-2">
+              @for (item of complianceItems(); track item.key) {
+                <rolatech-onboarding-review-row
+                  [label]="item.label"
+                  [value]="item.value"
+                  [helper]="item.helper"
+                  [issueOptions]="fieldIssueOptions(item.key)"
+                  [existingIssue]="fieldExistingIssue(item.key)"
+                  [draftIssue]="facade.fieldDraft(item.key)"
+                  [passed]="facade.fieldPassed(item.key)"
+                  [busy]="facade.saving()"
+                  (passedChange)="onFieldPassed(item.key, $event)"
+                  (draftIssueChange)="onFieldIssue(item.key, $event)"
+                />
+              }
+            </div>
+          </section>
+
+          <section class="space-y-4">
+            <div class="space-y-1">
+              <h2 class="text-lg font-semibold text-(--rt-text-primary)">Documents</h2>
+              <p class="text-sm text-(--rt-text-secondary)">Review required documents and flag anything missing or unreadable.</p>
+            </div>
+
+            <div class="grid gap-4 lg:grid-cols-2">
+              @for (item of documentItems(); track item.documentType + item.label) {
+                <rolatech-onboarding-review-row
+                  [label]="item.label"
+                  [value]="item.value"
+                  [helper]="item.helper"
+                  [issueOptions]="documentIssueOptions(item.documentType)"
+                  [existingIssue]="documentExistingIssue(item.documentType)"
+                  [draftIssue]="facade.documentDraft(item.documentType)"
+                  [passed]="facade.documentPassed(item.documentType)"
+                  [busy]="facade.saving()"
+                  [actionLabel]="item.document ? 'Preview' : null"
+                  [actionDisabled]="!item.document"
+                  (passedChange)="onDocumentPassed(item.documentType, $event)"
+                  (draftIssueChange)="onDocumentIssue(item.documentType, $event)"
+                  (actionTriggered)="openDocumentPreview(item)"
+                />
+              }
+            </div>
+          </section>
+
+          <rolatech-onboarding-issue-list [issues]="detail.issues" />
+        </div>
+      } @else {
+        <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-base-background) p-5 text-sm text-(--rt-text-secondary) shadow-sm">
+          Loading application details...
+        </div>
+      }
+
+      @if (facade.detail(); as detail) {
+      <rolatech-onboarding-timeline-drawer
+        floating
+        [open]="timelineOpen()"
+        [title]="'Application Timeline'"
+        [items]="detail.timeline"
+        [zIndex]="9100"
+        (closeRequested)="closeTimeline()"
+      />
+      }
+
+      <rolatech-onboarding-document-preview-dialog
+        [open]="previewOpen()"
+        [title]="previewTitle()"
+        [subtitle]="previewSubtitle()"
+        [url]="facade.previewUrl()"
+        [loading]="facade.previewLoading()"
+        [error]="facade.previewError()"
+        (closeRequested)="closeDocumentPreview()"
+      />
+    </section>
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PlatformPageHeader, selector: "rolatech-platform-page-header" }, { kind: "component", type: PlatformStatCard, selector: "rolatech-platform-stat-card" }, { kind: "component", type: OnboardingStatusBadge, selector: "rolatech-onboarding-status-badge", inputs: ["status"] }, { kind: "component", type: OnboardingIssueList, selector: "rolatech-onboarding-issue-list", inputs: ["issues"] }, { kind: "component", type: OnboardingTimelineDrawer, selector: "rolatech-onboarding-timeline-drawer", inputs: ["open", "title", "items", "zIndex"], outputs: ["closeRequested"] }, { kind: "component", type: OnboardingReviewRow, selector: "rolatech-onboarding-review-row", inputs: ["label", "value", "helper", "existingIssue", "issueOptions", "draftIssue", "passed", "busy", "actionLabel", "actionDisabled"], outputs: ["passedChange", "draftIssueChange", "actionTriggered"] }, { kind: "component", type: OnboardingReviewIssuesBanner, selector: "rolatech-onboarding-review-issues-banner", inputs: ["issues", "status"] }, { kind: "component", type: OnboardingDocumentPreviewDialog, selector: "rolatech-onboarding-document-preview-dialog", inputs: ["open", "title", "subtitle", "url", "loading", "error"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AdminOnboardingDetailPage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rolatech-admin-onboarding-detail-page',
+                    standalone: true,
+                    imports: [
+                        RouterLink,
+                        PlatformPageHeader,
+                        PlatformStatCard,
+                        OnboardingStatusBadge,
+                        OnboardingIssueList,
+                        OnboardingTimelineDrawer,
+                        OnboardingReviewRow,
+                        OnboardingReviewIssuesBanner,
+                        OnboardingDocumentPreviewDialog,
+                    ],
+                    providers: [AdminOnboardingReviewFacade],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'block' },
+                    template: `
+    <section class="rt-platform-theme flex flex-col gap-6 bg-(--rt-base-background) p-6 text-(--rt-text-primary)">
+      <rolatech-platform-page-header>
+        <div header-left class="space-y-2">
+          <div class="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+            <a [routerLink]="['../']" class="hover:underline cursor-pointer">Agent Applications</a>
+            @if (facade.detail(); as detail) {
+            <span>/</span>
+            <span>{{ detail.organizationName || detail.contactName || detail.id }}</span>
+            }
+          </div>
+
+          <div>
+            <h1 class="text-2xl font-semibold tracking-tight">{{ title() }}</h1>
+            <p class="mt-1 text-sm text-muted-foreground">{{ subtitle() }}</p>
+          </div>
+        </div>
+
+        <div header-actions>
+          @if (facade.detail()?.status || null; as status) {
+          <rolatech-onboarding-status-badge [status]="status" />
+          }
+          <a
+            [routerLink]="['review']"
+            class="inline-flex items-center rounded-xl border border-(--rt-border-color) px-4 py-2 text-sm font-medium hover:bg-(--rt-raised-background) cursor-pointer"
+          >
+            Review Page
+          </a>
+          <button
+            type="button"
+            class="inline-flex items-center rounded-xl border border-(--rt-border-color) px-4 py-2 text-sm font-medium"
+            (click)="openTimeline()"
+          >
+            Timeline
+          </button>
+        </div>
+      </rolatech-platform-page-header>
+
+      <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <rolatech-platform-stat-card>
+          <div stat-label>Documents</div>
+          <div stat-value>{{ documentCount() }}</div>
+        </rolatech-platform-stat-card>
+
+        <rolatech-platform-stat-card>
+          <div stat-label>Open Issues</div>
+          <div stat-value>{{ openIssueCount() }}</div>
+        </rolatech-platform-stat-card>
+
+        <rolatech-platform-stat-card>
+          <div stat-label>Timeline Events</div>
+          <div stat-value>{{ timelineCount() }}</div>
+        </rolatech-platform-stat-card>
+
+        <rolatech-platform-stat-card>
+          <div stat-label>Draft Issues</div>
+          <div stat-value>{{ facade.issueDrafts().length }}</div>
+        </rolatech-platform-stat-card>
+      </section>
+
+      @if (facade.error()) {
+      <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{{ facade.error() }}</div>
+      }
+
+      @if (facade.detail(); as detail) {
+        <div class="space-y-4">
+          <section class="rounded-2xl border border-(--rt-border-color) bg-card p-5 shadow-sm">
+            <div class="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
+              <span>Application ID: <span class="font-semibold text-(--rt-text-primary)">{{ detail.id }}</span></span>
+              <span>•</span>
+              <span>{{ onboardingStatusLabel(detail.status) }}</span>
+              <span>•</span>
+              <span>{{ onboardingApplicantTypeLabel(detail.applicantType) }}</span>
+              <span>•</span>
+              <span>{{ countryLabel(detail.companyCountry) }}</span>
+            </div>
+          </section>
+
+          @if (detail.status === 'NEED_MORE_INFO') {
+            <rolatech-onboarding-review-issues-banner [issues]="detail.issues" [status]="detail.status" />
+          }
+
+          <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)">Inline Review Workspace</h2>
+                <p class="max-w-2xl text-sm text-(--rt-text-secondary)">
+                  Review the application in place. Mark a field or document as passed, or leave an issue directly beside the item that needs correction.
+                </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)">
+                {{ facade.issueDrafts().length }} draft issues
+              </span>
+            </div>
+
+            <label class="grid gap-2">
+              <span class="text-sm font-medium text-(--rt-text-secondary)">Review summary</span>
+              <textarea
+                class="min-h-28 rounded-xl border border-(--rt-border-color) px-3 py-2"
+                [value]="facade.reviewComment()"
+                (input)="setComment($event)"
+                placeholder="Add a high-level review note or final decision context..."
+              ></textarea>
+            </label>
+
+            <div class="flex flex-wrap gap-3">
+              <button
+                type="button"
+                class="rounded-xl border border-(--rt-border-color) px-4 py-2 text-sm font-semibold text-(--rt-text-secondary) hover:bg-(--rt-raised-background)"
+                [disabled]="facade.saving()"
+                (click)="startReview()"
+              >
+                Start Review
+              </button>
+
+              <button
+                type="button"
+                class="rounded-xl border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-800 hover:bg-amber-100"
+                [disabled]="facade.saving()"
+                (click)="needMoreInfo()"
+              >
+                Need More Info
+              </button>
+
+              <button
+                type="button"
+                class="rounded-xl border border-emerald-300 bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-800 hover:bg-emerald-100"
+                [disabled]="facade.saving()"
+                (click)="approve()"
+              >
+                Approve
+              </button>
+
+              <button
+                type="button"
+                class="rounded-xl border border-rose-300 bg-rose-50 px-4 py-2 text-sm font-semibold text-rose-800 hover:bg-rose-100"
+                [disabled]="facade.saving()"
+                (click)="fail()"
+              >
+                Fail
+              </button>
+            </div>
+          </section>
+
+          <section class="space-y-4">
+            <div class="space-y-1">
+              <h2 class="text-lg font-semibold text-(--rt-text-primary)">Applicant Profile</h2>
+              <p class="text-sm text-(--rt-text-secondary)">Check identity, contact, and company information.</p>
+            </div>
+
+            <div class="grid gap-4 lg:grid-cols-2">
+              @for (item of profileItems(); track item.key) {
+                <rolatech-onboarding-review-row
+                  [label]="item.label"
+                  [value]="item.value"
+                  [helper]="item.helper"
+                  [issueOptions]="fieldIssueOptions(item.key)"
+                  [existingIssue]="fieldExistingIssue(item.key)"
+                  [draftIssue]="facade.fieldDraft(item.key)"
+                  [passed]="facade.fieldPassed(item.key)"
+                  [busy]="facade.saving()"
+                  (passedChange)="onFieldPassed(item.key, $event)"
+                  (draftIssueChange)="onFieldIssue(item.key, $event)"
+                />
+              }
+            </div>
+          </section>
+
+          <section class="space-y-4">
+            <div class="space-y-1">
+              <h2 class="text-lg font-semibold text-(--rt-text-primary)">Compliance and Banking</h2>
+              <p class="text-sm text-(--rt-text-secondary)">Check VAT setup and settlement account details.</p>
+            </div>
+
+            <div class="grid gap-4 lg:grid-cols-2">
+              @for (item of complianceItems(); track item.key) {
+                <rolatech-onboarding-review-row
+                  [label]="item.label"
+                  [value]="item.value"
+                  [helper]="item.helper"
+                  [issueOptions]="fieldIssueOptions(item.key)"
+                  [existingIssue]="fieldExistingIssue(item.key)"
+                  [draftIssue]="facade.fieldDraft(item.key)"
+                  [passed]="facade.fieldPassed(item.key)"
+                  [busy]="facade.saving()"
+                  (passedChange)="onFieldPassed(item.key, $event)"
+                  (draftIssueChange)="onFieldIssue(item.key, $event)"
+                />
+              }
+            </div>
+          </section>
+
+          <section class="space-y-4">
+            <div class="space-y-1">
+              <h2 class="text-lg font-semibold text-(--rt-text-primary)">Documents</h2>
+              <p class="text-sm text-(--rt-text-secondary)">Review required documents and flag anything missing or unreadable.</p>
+            </div>
+
+            <div class="grid gap-4 lg:grid-cols-2">
+              @for (item of documentItems(); track item.documentType + item.label) {
+                <rolatech-onboarding-review-row
+                  [label]="item.label"
+                  [value]="item.value"
+                  [helper]="item.helper"
+                  [issueOptions]="documentIssueOptions(item.documentType)"
+                  [existingIssue]="documentExistingIssue(item.documentType)"
+                  [draftIssue]="facade.documentDraft(item.documentType)"
+                  [passed]="facade.documentPassed(item.documentType)"
+                  [busy]="facade.saving()"
+                  [actionLabel]="item.document ? 'Preview' : null"
+                  [actionDisabled]="!item.document"
+                  (passedChange)="onDocumentPassed(item.documentType, $event)"
+                  (draftIssueChange)="onDocumentIssue(item.documentType, $event)"
+                  (actionTriggered)="openDocumentPreview(item)"
+                />
+              }
+            </div>
+          </section>
+
+          <rolatech-onboarding-issue-list [issues]="detail.issues" />
+        </div>
+      } @else {
+        <div class="rounded-2xl border border-(--rt-border-color) bg-(--rt-base-background) p-5 text-sm text-(--rt-text-secondary) shadow-sm">
+          Loading application details...
+        </div>
+      }
+
+      @if (facade.detail(); as detail) {
+      <rolatech-onboarding-timeline-drawer
+        floating
+        [open]="timelineOpen()"
+        [title]="'Application Timeline'"
+        [items]="detail.timeline"
+        [zIndex]="9100"
+        (closeRequested)="closeTimeline()"
+      />
+      }
+
+      <rolatech-onboarding-document-preview-dialog
+        [open]="previewOpen()"
+        [title]="previewTitle()"
+        [subtitle]="previewSubtitle()"
+        [url]="facade.previewUrl()"
+        [loading]="facade.previewLoading()"
+        [error]="facade.previewError()"
+        (closeRequested)="closeDocumentPreview()"
+      />
+    </section>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+export { AdminOnboardingDetailPage };
+//# sourceMappingURL=rolatech-angular-onboarding-admin-onboarding-detail-page-DREEMvoT.mjs.map