@nauticana/sail 1.1.24 → 1.1.26

package/README.md

@@ -20,15 +20,16 @@ A shared Angular component library for building CRUD-based admin frontends. Prov
 | **Account** | `MyAccountComponent` (self-service hub), `ProfileEditorComponent` (name/locale immediate; email/phone verify-before-apply) |
 | **Auth** | `ConsentGateComponent`, `OtpInputComponent`, `SocialLoginComponent` |
 | **Billing** | `PlanSelectorComponent`, `PriceSelectorComponent`, `CheckoutButtonComponent`, `PaymentMethodsComponent`, `PortalButtonComponent`, `UsageMeterComponent`, `StatusChipComponent`, `TrialBannerComponent`, `SeatSelectorComponent`, `DunningBannerComponent` |
-| **Dashboard** | `DashboardShellComponent`, `DataCardComponent`, `LockedOverlayComponent`, `ActionCenterComponent`, `EntitySelectorComponent`, `VerificationFlowComponent` |
+| **Dashboard** | `DashboardShellComponent`, `DataCardComponent`, `StatTileComponent`, `LockedOverlayComponent`, `ActionCenterComponent`, `EntitySelectorComponent`, `VerificationFlowComponent` |
 | **Payout** | `PayoutProviderOnboardingComponent`, `PayoutBankInfoFormComponent` |
 | **Agency** | `AgencyClientsComponent`, `AgencyStatusBannerComponent`, `AgencyAcceptComponent`, `AgencyEarningsSummaryComponent`, `CommissionLedgerComponent`, `AgencyPayoutHistoryComponent`, `AgencyPayoutProfileComponent` |
 | **Notifications** | `NotificationCenterComponent`, `NotificationInboxService` |
+| **Documents** | `DocumentUploadComponent`, `PartnerDocumentsComponent`, `DocumentReviewQueueComponent`, `PartnerDocumentService` |
 | **Payments / SCA** | `UserPaymentMethodsComponent`, `ScaConfirmComponent`, `ScaConfirmer` (port), `SCA_CONFIRMER` (token) |
-| **Services** | `BaseAuthService` (OTP / social / push / deleteAccount / logoutEverywhere / profile: `getProfile`, `updateProfile`, `request`+`confirmEmailChange`, `request`+`confirmPhoneChange`), `BillingService`, `AgencyService`, `BackendService`, `PayoutService`, `UserPaymentMethodService`, `NotificationInboxService`, `loadScript()`, `authInterceptor`, `apiResponseInterceptor` |
+| **Services** | `BaseAuthService` (OTP / social / push / deleteAccount / logoutEverywhere / profile: `getProfile`, `updateProfile`, `request`+`confirmEmailChange`, `request`+`confirmPhoneChange`), `BillingService`, `AgencyService`, `BackendService`, `PayoutService`, `UserPaymentMethodService`, `PartnerDocumentService`, `NotificationInboxService`, `loadScript()`, `authInterceptor`, `apiResponseInterceptor` |
 | **Abstracts** | `BaseTable`, `BaseForm`, `BaseView`, `AbstractEditableView`, `BaseAsync`, `BaseRestService` |
 | **Config** | `SAIL_GUI_CONFIG`, `SailGuiConfig`, `configureRestUrls()` |
-| **Models** | `ApplicationData`, `TableDefinition`, `SiudAction`, `ApplicationMenu`, `ConstantValue`, `UserAccount`, `RestReport`, `ReportParam`, `TrustedDevice`, `PublicPlan`, `PlanPrice`, `PaymentMethod`, `Subscription`, `Invoice`, `CheckoutRequest`/`CheckoutResponse`, `PortalResponse`, `UsageMeter`, `ChargeResult`, `UserPaymentMethod`, `TableAction`, `ReusableAccount`, `PayoutOnboardingSession`, `BankInfoFormValue`, `CountryProfile`, `OtpRequest`/`OtpResponse`, `SignupConsent`, `ConsentState`, `ConsentOption`, `SocialProvider`, `PushPlatform`, `InboxMessage`/`InboxPage`, 2FA types, etc. |
+| **Models** | `ApplicationData`, `TableDefinition`, `SiudAction`, `ApplicationMenu`, `ConstantValue`, `UserAccount`, `RestReport`, `ReportParam`, `TrustedDevice`, `PublicPlan`, `PlanPrice`, `PaymentMethod`, `Subscription`, `Invoice`, `CheckoutRequest`/`CheckoutResponse`, `PortalResponse`, `UsageMeter`, `ChargeResult`, `UserPaymentMethod`, `TableAction`, `TableActionParameter`, `ReusableAccount`, `PayoutOnboardingSession`, `BankInfoFormValue`, `CountryProfile`, `OtpRequest`/`OtpResponse`, `SignupConsent`, `ConsentState`, `ConsentOption`, `SocialProvider`, `PushPlatform`, `InboxMessage`/`InboxPage`, `PartnerDocument`/`DocumentUploadRequest`, 2FA types, etc. |
 | **Decorators** | `@IsSailString()`, `@IsSailNumeric()` (class-validator based) |
 | **Utils** | `titleCase()`, `fromPriceLabel()`, `formatMinorCurrency()` |
 
@@ -269,7 +270,7 @@ this.labels.loadLabels('ride_type').subscribe(() => {
 });
 ```
 
-Concurrent loads share one application-data subscription, completed domains stay cached, and application-data failures can be retried. Missing values fall back to the raw key.
+Concurrent loads share one application-data subscription, completed domains stay cached, and application-data failures can be retried. `getLabel` falls back to the raw key; `requireLabel` throws instead, for values that must not render as a raw code. `options(domain)` returns every `{code, caption}` of a loaded domain, sorted by caption, for picklists.
 
 ## Status-filtered API errors
 
@@ -400,7 +401,7 @@ Every keel login response (keel v1.2.57+) carries `refreshToken` beside `token`;
 
 ### Realtime
 
-`RealtimeService` (root-provided) is the client for keel's `realtime.Hub`. `connect()` opens `RestURL.realtimeURL` (`/public/ws`) on the configured backend host with the stored JWT, reconnects with backoff, and re-subscribes every channel after a reconnect. `channel<T>(name)` returns the payloads keel broadcasts on that channel; `userFrames<T>()` returns payloads addressed to the user; `send(frame)` forwards an application frame to the hub's `OnMessage`. A subscription keel's `CanSubscribe` rejects is logged and exposed on `lastError`. Channel names and payload shapes are app-owned.
+`RealtimeService` (root-provided) is the client for keel's `realtime.Hub`. `connect()` opens `RestURL.realtimeURL` (`/public/ws`) on the configured backend host with the stored JWT, reconnects with backoff, and re-subscribes every channel after a reconnect. `channel<T>(name)` returns the payloads keel broadcasts on that channel; `userFrames<T>()` returns payloads addressed to the user, including keel's `{op: "notification"}` frames; `send(frame)` forwards an application frame to the hub's `OnMessage`. A subscription keel's `CanSubscribe` rejects is logged and exposed on `lastError`. Channel names and payload shapes are app-owned.
 
 ## Billing
 
@@ -568,6 +569,10 @@ A `TableAction` with `kind: 'R'` (redirect — the `constant_value` code) makes
 
 > **Response-shape contract.** The generic redirect-action path reads a bare `url` because it's polymorphic — one dispatch for checkout / portal / export / etc., where the action's identity lives in the metadata, not the payload. keel's `WrapTableAction` enforces no shape; your inner handler must return `{ url }`. The *typed* billing endpoints keep specific names instead (`createCheckout()` → `checkoutUrl`, `createPortalSession()` → `portalUrl`). So the same portal concept has two response shapes depending on the path: wire it as `<sail-portal-button>` (typed → `portalUrl`) **or** as a `table_action` redirect (generic → `url`), not both.
 
+### Action parameters (v1.1.25)
+
+An action with `parameters` (keel v1.2.75 `table_action_parameter`) opens a dialog before posting: one field per parameter, typed by `dataType` (`boolean` checkbox, numeric, `date`, `timestamp`, `file`, otherwise text), or a dropdown when `lookupTable` names a table in the client cache (a `foreign_key_lookup` dropdown table); a numeric `dataType` still posts the chosen key as a number. The dialog shows `confirmMessage` in place of the native prompt and posts `{...primaryKeyValues(record), ...values}`; empty optional values are left out. A `file` parameter turns the post into `multipart/form-data`, so a table-level `upload` action whose parameters are `file`, `document_type` (lookup `document_type`), `title`, … posts straight to keel's `DocumentHandler.Upload`. An action without parameters behaves as before.
+
 ### Status chip (v1.0.1)
 
 `<sail-status-chip>` resolves a code to its caption from the client-cache `constant_value` dictionary — no per-app `@switch`. It defaults to the `SUBSCRIPTION_STATUS` domain (so `T` trialing / `X` past-due render with no app code) and works for any constant domain via `[domain]`. The code is exposed as `[attr.data-status]` so the app can colour the chip:
@@ -970,6 +975,7 @@ Horizontal building blocks for an entitlement-aware dashboard. All are presentat
 - **`DataCardComponent`** (`sail-data-card`) — card chrome for one visualization with `[state]` ∈ `loading | ready | empty | error | locked | no-source`. The chart is supplied as an `<ng-template>` and instantiated **only** in `ready`, so during loading/error/locked/no-source it never exists (no hidden canvas). `description` (required) is the screen-reader text alternative; `[tableHeaders]`/`[tableRows]` render a visually-hidden (`.sr-only`) data table. Emits `upgrade`, `connect`, and `retry`. `[connectLabel]="''"` renders the `no-source` state without a button — a source whose collector does not exist yet has nothing to connect.
 - **`LockedOverlayComponent`** (`sail-locked-overlay`) — entitlement gate. Wraps protected content given as an `<ng-template>`; when `[locked]` the template is never instantiated, so **no data exists behind the gate** (DOM, canvas, or network) — the strict free-tier rule. Emits `upgrade`.
 - **`NoSourceOverlayComponent`** (`sail-no-source-overlay`) — source-readiness gate. Takes `[sourceName]` and emits `connect`; while `[unavailable]`, its protected `<ng-template>` is never instantiated. Use this for included features whose provider is not connected or whose collector is unavailable—never show an upgrade prompt for this state. Set `[ctaLabel]="''"` when there is nothing to connect, and no button renders.
+- **`StatTileComponent`** (`sail-stat-tile`) — one number: `label`, `value`, optional `target`, `progress` (0..1, a `role="progressbar"`), `delta` with `deltaGood` (`true | false | null`, the `.good` / `.bad` hook) and `trend` (`number[]`, a decorative sparkline, hidden under two points). Values are preformatted strings; the tile does no formatting. Styles: `.stat-tile` / `-label` / `-value` / `-target` / `-delta` / `-progress` / `-progress-fill` / `-trend`.
 - **`ActionCenterComponent`** (`sail-action-center`) — prioritized next-best-action list from `[actions]: ActionItem[]` (sorted by `priority`, done items show a check). Emits `act`.
 - **`EntitySelectorComponent`** (`sail-entity-selector`) — scope dropdown over `[entities]: EntityOption[]`; resolves `[selected]` or the first active entity and emits `selectionChange`.
 - **`VerificationFlowComponent`** (`sail-verification-flow`) — self-service request → enter-code → verified UI (a 2FA sibling), backend-agnostic: emits `requestVerification` / `confirmCode`, driven by `[step]` + `[errorMessage]` the host feeds back. `[resendAfterSeconds]` holds `Resend code` for a cooldown and `[codeExpiresInSeconds]` blocks `Confirm` once the issued code expires; both default to `0`, which keeps the button always enabled and shows no expiry. Both countdowns restart when the component emits `requestVerification`. `[disabled]` blocks all actions while the host is processing one. `[errorMessage]` also renders in the `idle` step, so a failed send is reported where it happened.
@@ -1075,8 +1081,10 @@ readonly unread = inject(NotificationInboxService).unreadCount;   // Signal<numb
 | `load(limit)` / `loadMore(limit)` | Default 20; keel caps a page at 100 and the client clamps to match. |
 
 Message ids are server-side `BIGINT`s serialized as strings. Both mark-read routes
-return `204`, so the service updates its cache locally. Call `load()` to pick up new
-messages and `reset()` on logout.
+return `204`, so the service updates its cache locally. After the first successful `load()`, each
+`{op: "notification"}` frame from keel's `realtime.UserDispatcher` (v1.2.79+) on a
+connected `RealtimeService` re-fetches the newest page into the cache. Call `reset()`
+on logout.
 
 ```html
 <sail-notification-center
@@ -1100,6 +1108,31 @@ Ships no CSS — style
 `.notification-item`, `.notification-item--unread` and
 `.notification-item__{select,static,title,body,time,read}`.
 
+## Partner documents (v1.1.26)
+
+`PartnerDocumentService` covers generic `partner_document` reads plus keel's
+`handler.DocumentHandler` (keel **v1.2.79+**): `list(userId?)`, `pending()`,
+`upload(file, request)` (progress events), `previewUrl(id)` and `review(id, approve,
+notes)`. The defaults assume the handler is mounted at
+`/api/v1/partner_document/{upload,preview,review}`; override the three
+`partnerDocument*URL` values otherwise. Authorization stays in keel's hooks.
+
+```html
+<sail-document-upload documentType="driver_license" [maxBytes]="10485760"
+    [canUpload]="attested()" (uploaded)="onUploaded($event)" (failed)="onFailed($event)">
+  <!-- app-specific attestations -->
+</sail-document-upload>
+```
+
+Images preview inline, PDFs open in a new tab. `(failed)` hands over the raw error;
+branch on `errorCode(err)` for keel's `document_*` codes. Status captions come from
+the `partner_document_status` domain through `LabelService`.
+
+`<sail-partner-documents>` shows the latest version per type and offers replacement
+uploads for rejected or expiring documents. `<sail-document-review-queue>` lists
+pending rows with an inline preview and approve/reject controls. Both rely on the
+app's generic `partner_document` read grants and the handler authorization hooks.
+
 ## Grouped review actions and diffs (v1.1.19)
 
 `GroupedBulkActionComponent` (`sail-grouped-bulk-action`) groups eligible rows
@@ -1476,8 +1509,8 @@ The v0.6 / v0.7 line introduced three additive feature groups against keel v0.7.
 | `@nauticana/sail` | `PayoutService` | keel/payout API client — onboarding, reuse, status, bank-version replacement, beneficiary registration |
 | `@nauticana/sail` | `PayoutProviderOnboardingComponent` (`<sail-payout-provider-onboarding>`) | Drop-in onboarding step with reuse picker, hosted-KYC handoff, and asynchronous-confirmation output |
 | `@nauticana/sail` | `PayoutBankInfoFormComponent` (`<sail-payout-bank-info-form>`) | Tax + payout details form (country / currency / tax ID / billing address / agreement) |
-| `@nauticana/sail` | `UserPaymentMethodService` | Saved-card list / delete / set-default API client |
-| `@nauticana/sail` | `UserPaymentMethodsComponent` (`<sail-user-payment-methods>`) | List of saved cards/wallets with set-default + delete |
+| `@nauticana/sail` | `UserPaymentMethodService` | Saved-card list / remove / set-default API client |
+| `@nauticana/sail` | `UserPaymentMethodsComponent` (`<sail-user-payment-methods>`) | List of saved cards/wallets with set-default + remove |
 | `@nauticana/sail` | `TableAction`, `ReusableAccount`, `PayoutOnboardingSession`, `BankInfoFormValue`, `CountryProfile`, `UserPaymentMethod`, `DEFAULT_COUNTRY_PROFILES` | Model types / defaults |
 
 ### 2. New keel endpoints
@@ -1492,10 +1525,11 @@ Make sure your keel deployment exposes these — they're all under `/api/v1/`:
 | `/api/v1/payout/status` | POST | `{ complete: true }` once the active partner's row has a `providerAccountId` |
 | `/api/v1/payout/bank/replace` | POST | Supersede the active bank-info version and insert its replacement atomically; the app must wire the handler's `SealTaxID` hook |
 | `/api/v1/payout/beneficiary/register` | POST | Create and link a provider beneficiary from provider-collected details |
-| `/api/v1/payment-methods/set-default` | POST | Atomic multi-row UPDATE — sets one row as default, clears the rest |
+| `/api/v1/user_payment_method/set_default` | POST | `{id}` — sets one row as default, clears the rest |
+| `/api/v1/user_payment_method/remove` | POST | `{id}` — detaches the method at the provider, then deletes the row (keel v1.2.79) |
 | `/api/v1/{table}/{action_name}` | POST | Per-table custom actions resolved from `basis.table_action` |
 
-`list` / `delete` for the `user_payment_method` table go through keel's generic REST CRUD (`/api/v1/user_payment_method/list|delete`) — `user_payment_method` is a UserSpecific basis table, so keel auto-scopes reads to the caller and owner-locks DELETE. No custom endpoint needed for those two.
+`list` for `user_payment_method` is keel's generic REST CRUD, auto-scoped to the caller. keel grants no generic DELETE on the table, so removal goes through `remove`.
 
 ### 3. Payout onboarding wiring
 
@@ -1534,7 +1568,7 @@ For apps that operate on a single keel partner, the reuse picker stays empty and
     [title]="'Payment Methods'"
     (addClicked)="goToSetupIntent()"
     (defaultChanged)="onDefaultChanged($event)"
-    (deleted)="onDeleted($event)">
+    (removed)="onRemoved($event)">
 </sail-user-payment-methods>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
   "exports": {
@@ -52,6 +52,7 @@
     "@angular/core": "^21.0.0",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
     "@angular/router": "^21.0.0",
     "class-validator": "^0.15.1",
     "rxjs": "~7.8.0"

package/src/component/abstract/base_table.ts

@@ -8,6 +8,7 @@ import { titleCase } from "../../util/text";
 import { errorDetail } from "../../util/errors";
 import { MatDialog } from "@angular/material/dialog";
 import { RevealDialog } from "../table/reveal_dialog";
+import { ActionParamsDialog } from "../table/action_params_dialog";
 
 
 /** CRUD verb used by `requireAuth()` to compose the "Missing authorization" alert. */
@@ -20,7 +21,7 @@ const ISO_PREFIX = /^\d{4}-\d{2}-\d{2}T/;
 export abstract class BaseTable {
     protected readonly cacheService = inject(BaseAuthService);
     protected readonly backendService = inject(BackendService);
-    // Reveal dialogs are rare — resolve MatDialog lazily so every BaseTable subclass doesn't eagerly depend on it.
+    // Action dialogs are rare — resolve MatDialog lazily so every BaseTable subclass doesn't eagerly depend on it.
     readonly #injector = inject(Injector);
     protected readonly config: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
     protected readonly dialogWidth: string = '400px';
@@ -127,9 +128,10 @@ export abstract class BaseTable {
      *   2. Subclass-specific pre-flight guard via `beforeExecuteAction()` —
      *      returns false to abort silently (the hook has already shown its
      *      own alert).
-     *   3. Optional confirm prompt from `action.confirmMessage`
+     *   3. A parameter dialog when the action declares `parameters`
+     *      (it shows `confirmMessage`), otherwise the confirm prompt
      *   4. POST `{}` for table-level actions or `primaryKeyValues(record)`
-     *      for record-specific actions
+     *      for record-specific actions, merged with the parameter values
      *   5. On success, dispatch `onActionSuccess()` so subclasses can refresh
      *      their views; on error, log and alert.
      *
@@ -141,8 +143,21 @@ export abstract class BaseTable {
             return;
         }
         if (!this.beforeExecuteAction(action, record)) return;
+        const key = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
+        if (action.parameters?.length) {
+            this.#injector.get(MatDialog)
+                .open<ActionParamsDialog, TableAction, Record<string, unknown>>(ActionParamsDialog, { data: action, width: this.dialogWidth })
+                .afterClosed()
+                .subscribe((values) => {
+                    if (values) this.postAction(action, {...key, ...values}, record);
+                });
+            return;
+        }
         if (action.confirmMessage && !confirm(action.confirmMessage)) return;
-        const body = action.recordSpecific && record ? this.primaryKeyValues(record) : {};
+        this.postAction(action, key, record);
+    }
+
+    private postAction(action: TableAction, body: Record<string, unknown>, record?: Record<string, unknown>): void {
         this.backendService.executeAction<Record<string, unknown>>(action.method, body).subscribe({
             next: (resp) => {
                 const url = resp?.['url'];

package/src/component/dashboard/stat_tile.html

@@ -0,0 +1,29 @@
+<div class="stat-tile">
+  <p class="stat-tile-label">{{ label() }}</p>
+  <p class="stat-tile-value">
+    {{ value() }}
+    @if (target()) { <span class="stat-tile-target">/ {{ target() }}</span> }
+  </p>
+  @if (delta()) {
+    <p class="stat-tile-delta" [class.good]="deltaGood() === true" [class.bad]="deltaGood() === false">
+      {{ delta() }}
+      @if (deltaGood() !== null) { <span class="sr-only">{{ deltaGood() ? '(improving)' : '(worsening)' }}</span> }
+    </p>
+  }
+  @let percent = progressPercent();
+  @if (percent !== null) {
+    <div class="stat-tile-progress" role="progressbar"
+         [attr.aria-label]="label()"
+         aria-valuemin="0"
+         aria-valuemax="100"
+         [attr.aria-valuenow]="percent"
+         [attr.aria-valuetext]="valueText()">
+      <div class="stat-tile-progress-fill" [style.width.%]="percent"></div>
+    </div>
+  }
+  @if (sparkline()) {
+    <svg class="stat-tile-trend" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true" focusable="false">
+      <polyline [attr.points]="sparkline()" fill="none" stroke="currentColor" vector-effect="non-scaling-stroke" />
+    </svg>
+  }
+</div>

package/src/component/dashboard/stat_tile.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
+
+/**
+ * One dashboard number with an optional target, progress, delta and trend.
+ * Values arrive preformatted: the caller knows whether a number is money, a
+ * percentage or a count.
+ */
+@Component({
+  selector: 'sail-stat-tile',
+  templateUrl: './stat_tile.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class StatTileComponent {
+  readonly label = input.required<string>();
+  readonly value = input.required<string>();
+  readonly target = input<string>('');
+  /** 0..1; clamped. */
+  readonly progress = input<number | null>(null);
+  readonly delta = input<string>('');
+  /** true / false colours the delta as an improvement / regression; null leaves it neutral. */
+  readonly deltaGood = input<boolean | null>(null);
+  readonly trend = input<number[]>([]);
+
+  readonly progressPercent = computed(() => {
+    const p = this.progress();
+    return p == null || isNaN(p) ? null : Math.round(Math.min(1, Math.max(0, p)) * 100);
+  });
+
+  readonly valueText = computed(() => this.target() ? `${this.value()} of ${this.target()}` : this.value());
+
+  /** SVG polyline points in a 100×24 box; '' under two points. */
+  readonly sparkline = computed(() => {
+    const points = this.trend().filter((n) => Number.isFinite(n));
+    if (points.length < 2) return '';
+    const min = Math.min(...points);
+    const range = Math.max(...points) - min;
+    return points
+      .map((n, i) => {
+        const x = (i / (points.length - 1)) * 100;
+        const y = range === 0 ? 12 : 22 - ((n - min) / range) * 20;
+        return `${x.toFixed(2)},${y.toFixed(2)}`;
+      })
+      .join(' ');
+  });
+}

package/src/component/document/document_review_queue.html

@@ -0,0 +1,24 @@
+<section class="document-review-queue" [attr.aria-busy]="loading()">
+  @if (errorMessage()) { <p class="document-review-queue__error" role="alert">{{ errorMessage() }}</p> }
+  @if (!loading() && !documents().length) {
+    <p class="document-review-queue__empty">No documents are awaiting review.</p>
+  }
+  @for (doc of documents(); track doc.Id) {
+    <article class="document-review">
+      <h3>{{ doc.Title || doc.DocumentType }}</h3>
+      <p>{{ doc.FileName }} · version {{ doc.VersionNo }}</p>
+      <button matButton type="button" (click)="showPreview(doc)">Preview</button>
+      @if (preview()?.id === doc.Id) {
+        <iframe class="document-review__preview" [src]="preview()!.url" [title]="'Preview of ' + (doc.Title || doc.FileName)"></iframe>
+      }
+      <mat-form-field appearance="outline">
+        <mat-label>Review notes</mat-label>
+        <textarea matInput [value]="notes()[doc.Id]" (input)="setNotes(doc.Id, $event)"></textarea>
+      </mat-form-field>
+      <div class="document-review__actions">
+        <button matButton="filled" type="button" [disabled]="reviewing() === doc.Id" (click)="review(doc, true)">Approve</button>
+        <button matButton type="button" [disabled]="reviewing() === doc.Id" (click)="review(doc, false)">Reject</button>
+      </div>
+    </article>
+  }
+</section>

package/src/component/document/document_review_queue.ts

@@ -0,0 +1,67 @@
+import { ChangeDetectionStrategy, Component, OnInit, SecurityContext, ViewEncapsulation, inject, signal } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BaseAsync } from '../abstract/base_async';
+import { PartnerDocument } from '../../model/document';
+import { PartnerDocumentService } from '../../service/partner_document.service';
+
+@Component({
+  selector: 'sail-document-review-queue',
+  templateUrl: './document_review_queue.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [MatButtonModule, MatFormFieldModule, MatInputModule],
+})
+export class DocumentReviewQueueComponent extends BaseAsync implements OnInit {
+  private readonly service = inject(PartnerDocumentService);
+  private readonly sanitizer = inject(DomSanitizer);
+
+  readonly documents = signal<PartnerDocument[]>([]);
+  readonly preview = signal<{ id: number; url: SafeResourceUrl } | null>(null);
+  readonly reviewing = signal<number | null>(null);
+  readonly notes = signal<Record<number, string>>({});
+
+  ngOnInit(): void {
+    this.reload();
+  }
+
+  reload(): void {
+    this.run(this.service.pending(), (rows) => this.documents.set(rows), 'Could not load pending documents.');
+  }
+
+  showPreview(doc: PartnerDocument): void {
+    this.service.previewUrl(doc.Id).subscribe({
+      next: (url) => {
+        const safe = this.sanitizer.sanitize(SecurityContext.URL, url);
+        if (!safe) {
+          this.errorMessage.set('The document preview URL is invalid.');
+          return;
+        }
+        this.preview.set({ id: doc.Id, url: this.sanitizer.bypassSecurityTrustResourceUrl(safe) });
+      },
+      error: (err) => this.setError(err, 'Could not preview the document.'),
+    });
+  }
+
+  setNotes(id: number, event: Event): void {
+    const value = (event.target as HTMLTextAreaElement).value;
+    this.notes.update((notes) => ({ ...notes, [id]: value }));
+  }
+
+  review(doc: PartnerDocument, approve: boolean): void {
+    this.reviewing.set(doc.Id);
+    this.service.review(doc.Id, approve, this.notes()[doc.Id] ?? '').subscribe({
+      next: () => {
+        this.documents.update((rows) => rows.filter((row) => row.Id !== doc.Id));
+        if (this.preview()?.id === doc.Id) this.preview.set(null);
+        this.reviewing.set(null);
+      },
+      error: (err) => {
+        this.reviewing.set(null);
+        this.setError(err, 'Could not review the document.');
+      },
+    });
+  }
+}

package/src/component/document/document_upload.html

@@ -0,0 +1,31 @@
+<div class="document-upload">
+  @if (!file()) {
+    <button matButton="outlined" type="button" class="document-upload__pick" (click)="picker.click()">
+      <mat-icon>upload_file</mat-icon> {{ label() }}
+    </button>
+  } @else {
+    <div class="document-upload__preview">
+      @if (imageUrl(); as src) {
+        <img [src]="src" [alt]="file()!.name" class="document-upload__image">
+      } @else if (pdfUrl(); as src) {
+        <a [href]="src" target="_blank" rel="noopener" class="document-upload__pdf">Open preview</a>
+      }
+      <span class="document-upload__name">{{ file()!.name }}</span>
+    </div>
+
+    <ng-content />
+
+    <div class="document-upload__actions">
+      <button matButton="filled" type="button" (click)="upload()" [disabled]="!canUpload() || uploading()">Upload</button>
+      <button matButton="outlined" type="button" (click)="picker.click()" [disabled]="uploading()">Choose another</button>
+    </div>
+  }
+  <input #picker type="file" hidden [accept]="accept()" (change)="pick($event)" [attr.aria-label]="label()">
+
+  @if (progress() !== null) {
+    <mat-progress-bar mode="determinate" [value]="progress()" aria-label="Upload progress" />
+  }
+  @if (errorMessage()) {
+    <p class="document-upload__error" role="alert">{{ errorMessage() }}</p>
+  }
+</div>

package/src/component/document/document_upload.ts

@@ -0,0 +1,113 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation, computed, inject, input, output, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { HttpEventType } from '@angular/common/http';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { PartnerDocumentService } from '../../service/partner_document.service';
+import { PartnerDocument } from '../../model/document';
+import { errorDetail } from '../../util/errors';
+
+/**
+ * Picks, previews and uploads one keel partner document. App-specific
+ * attestations are projected content; bind `[canUpload]` to their state.
+ * Ships no CSS — style the `.document-upload*` classes globally.
+ */
+@Component({
+  selector: 'sail-document-upload',
+  templateUrl: './document_upload.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [MatButtonModule, MatIconModule, MatProgressBarModule],
+})
+export class DocumentUploadComponent {
+  private readonly documents = inject(PartnerDocumentService);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly documentType = input.required<string>();
+  readonly title = input('');
+  readonly documentNumber = input('');
+  /** YYYY-MM-DD. */
+  readonly expiresOn = input('');
+  readonly userId = input<number | undefined>(undefined);
+  readonly accept = input('image/*,application/pdf');
+  /** Client-side size cap; 0 leaves the limit to keel's document type. */
+  readonly maxBytes = input(0);
+  readonly label = input('Choose file');
+  readonly canUpload = input(true);
+
+  readonly uploaded = output<PartnerDocument>();
+  /** The raw error; branch on `errorCode(err)` (keel's `document_*` codes). */
+  readonly failed = output<unknown>();
+
+  readonly file = signal<File | null>(null);
+  readonly progress = signal<number | null>(null);
+  readonly errorMessage = signal('');
+  private readonly objectUrl = signal<string | null>(null);
+
+  readonly isImage = computed(() => this.file()?.type.startsWith('image/') ?? false);
+  readonly imageUrl = computed(() => (this.isImage() ? this.objectUrl() : null));
+  readonly pdfUrl = computed(() => (this.file()?.type === 'application/pdf' ? this.objectUrl() : null));
+  readonly uploading = computed(() => this.progress() !== null);
+
+  constructor() {
+    this.destroyRef.onDestroy(() => this.revokePreview());
+  }
+
+  pick(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0] ?? null;
+    input.value = '';
+    this.errorMessage.set('');
+    this.revokePreview();
+    this.file.set(null);
+    if (!file) return;
+    const max = this.maxBytes();
+    if (max > 0 && file.size > max) {
+      this.errorMessage.set(`The file exceeds the ${(max / 1048576).toFixed(1)} MB limit.`);
+      return;
+    }
+    this.file.set(file);
+    this.objectUrl.set(URL.createObjectURL(file));
+  }
+
+  upload(): void {
+    const file = this.file();
+    if (!file || !this.canUpload() || this.uploading()) return;
+    this.errorMessage.set('');
+    this.progress.set(0);
+    this.documents.upload(file, {
+      documentType: this.documentType(),
+      title: this.title() || undefined,
+      documentNumber: this.documentNumber() || undefined,
+      expiresOn: this.expiresOn() || undefined,
+      userId: this.userId(),
+    }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+      next: (event) => {
+        if (event.type === HttpEventType.UploadProgress && event.total) {
+          this.progress.set(Math.round((100 * event.loaded) / event.total));
+        } else if (event.type === HttpEventType.Response && event.body) {
+          this.progress.set(null);
+          this.clear();
+          this.uploaded.emit(event.body);
+        }
+      },
+      error: (err) => {
+        this.progress.set(null);
+        this.errorMessage.set(errorDetail(err, 'Upload failed.'));
+        this.failed.emit(err);
+      },
+    });
+  }
+
+  clear(): void {
+    this.revokePreview();
+    this.file.set(null);
+  }
+
+  private revokePreview(): void {
+    const url = this.objectUrl();
+    if (url) URL.revokeObjectURL(url);
+    this.objectUrl.set(null);
+  }
+}

package/src/component/document/partner_documents.html

@@ -0,0 +1,33 @@
+<section class="partner-documents" [attr.aria-busy]="loading()">
+  @if (heading()) { <h2 class="partner-documents__title">{{ heading() }}</h2> }
+  @if (errorMessage()) { <p class="partner-documents__error" role="alert">{{ errorMessage() }}</p> }
+
+  @if (!loading() && !latest().length) {
+    <p class="partner-documents__empty">{{ emptyMessage() }}</p>
+  } @else {
+    <ul class="partner-documents__list">
+      @for (doc of latest(); track doc.Id) {
+        <li class="partner-document" [class.partner-document--rejected]="doc.Status === 'N'">
+          <div class="partner-document__details">
+            <strong>{{ doc.Title || doc.DocumentType }}</strong>
+            <span>{{ status(doc.Status) }} · version {{ doc.VersionNo }}</span>
+            @if (doc.ExpiresOn) { <span>Expires {{ doc.ExpiresOn | date }}</span> }
+            @if (doc.ReviewerNotes) { <span>{{ doc.ReviewerNotes }}</span> }
+          </div>
+          <div class="partner-document__actions">
+            <button matButton type="button" (click)="preview(doc)">
+              <mat-icon>visibility</mat-icon> Preview
+            </button>
+            @if (canReupload(doc)) {
+              <button matButton type="button" (click)="reuploading.set(doc)">Upload replacement</button>
+            }
+          </div>
+          @if (reuploading()?.Id === doc.Id) {
+            <sail-document-upload [documentType]="doc.DocumentType" [title]="doc.Title"
+                [documentNumber]="doc.DocumentNumber ?? ''" [userId]="doc.UserId ?? undefined" (uploaded)="uploaded()" />
+          }
+        </li>
+      }
+    </ul>
+  }
+</section>