Feature: OCR Templates (#13043)

[skip ci]

Signed-off-by: dependabot[bot] <support@github.com>
Co-Authored-By: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-Authored-By: stumpylog <797416+stumpylog@users.noreply.github.com>
Co-Authored-By: GitHub Actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-Authored-By: shamoon <4887959+shamoon@users.noreply.github.com>

src-ui/src/app/app-routing.module.ts

@@ -13,6 +13,8 @@ import { DocumentDetailComponent } from './components/document-detail/document-d
 import { DocumentListComponent } from './components/document-list/document-list.component'
 import { DocumentAttributesComponent } from './components/manage/document-attributes/document-attributes.component'
 import { MailComponent } from './components/manage/mail/mail.component'
+import { OcrTemplateEditorComponent } from './components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component'
+import { OcrTemplatesComponent } from './components/manage/ocr-templates/ocr-templates.component'
 import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
 import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
 import { NotFoundComponent } from './components/not-found/not-found.component'
@@ -274,6 +276,30 @@ export const routes: Routes = [
           componentName: 'WorkflowsComponent',
         },
       },
+      {
+        path: 'ocr-templates',
+        component: OcrTemplatesComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.OcrTemplate,
+          },
+          componentName: 'OcrTemplatesComponent',
+        },
+      },
+      {
+        path: 'ocr-templates/:id',
+        component: OcrTemplateEditorComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.Change,
+            type: PermissionType.OcrTemplate,
+          },
+          componentName: 'OcrTemplateEditorComponent',
+        },
+      },
       {
         path: 'mail',
         component: MailComponent,

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -243,6 +243,14 @@
                 <i-bs class="me-2" name="boxes"></i-bs><span><ng-container i18n>Workflows</ng-container></span>
               </a>
             </li>
+            <li class="nav-item app-link"
+              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.OcrTemplate }">
+              <a class="nav-link" routerLink="ocr-templates" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="OCR Templates" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-2" name="file-earmark-break"></i-bs><span><ng-container i18n>OCR Templates</ng-container></span>
+              </a>
+            </li>
             <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
               tourAnchor="tour.mail">
               <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -82,6 +82,14 @@
         <i-bs name="pencil" class="me-1"></i-bs><ng-container i18n>PDF Editor</ng-container>
       </button>
 
+      <button ngbDropdownItem (click)="runZoneOcr()" [disabled]="!userCanEdit || !document?.document_type">
+        <i-bs width="1em" height="1em" name="file-earmark-ruled" class="me-1"></i-bs><span i18n>Run Zone OCR</span>
+      </button>
+
+      <button ngbDropdownItem (click)="createOcrTemplate()">
+        <i-bs width="1em" height="1em" name="file-earmark-medical" class="me-1"></i-bs><span i18n>Create OCR Template</span>
+      </button>
+
       @if (userIsOwner && (requiresPassword || password)) {
         <button ngbDropdownItem (click)="removePassword()" [disabled]="!password">
           <i-bs name="unlock" class="me-1"></i-bs><ng-container i18n>Remove Password</ng-container>

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -1405,6 +1405,48 @@ export class DocumentDetailComponent
     })
   }
 
+  runZoneOcr() {
+    this.documentsService.runZoneOcr(this.document.id).subscribe({
+      next: (res) => {
+        const results = res.results ?? []
+        if (results.length) {
+          const failed = results.filter(
+            (r) =>
+              r.value === null ||
+              r.value === undefined ||
+              `${r.value}`.trim() === ''
+          )
+          const filled = results.length - failed.length
+          let msg = $localize`Filled ${filled} of ${results.length} fields`
+          if (failed.length) {
+            const names = failed.map((r) => r.zone).join(', ')
+            msg = `${msg}. ${$localize`Failed to match zones: ${names}`}`
+          }
+          this.toastService.showInfo(msg)
+        } else {
+          this.toastService.showInfo(
+            $localize`Zone OCR ran but no results extracted.`
+          )
+        }
+        this.documentsService
+          .get(this.documentId)
+          .subscribe((doc) => this.updateComponent(doc))
+      },
+      error: (error) => {
+        this.toastService.showError($localize`Zone OCR failed`, error)
+      },
+    })
+  }
+
+  createOcrTemplate() {
+    this.router.navigate(['/ocr-templates', 'new'], {
+      queryParams: {
+        document_type: this.document.document_type,
+        sample_document: this.document.id,
+      },
+    })
+  }
+
   private getSelectedNonLatestVersionId(): number | null {
     const versions = this.document?.versions ?? []
     if (!versions.length || !this.selectedVersionId) {

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -95,6 +95,9 @@
           <button ngbDropdownItem (click)="mergeSelected()" [disabled]="!userCanAdd || list.allSelected || list.selectedCount < 2">
             <i-bs name="journals" class="me-1"></i-bs><ng-container i18n>Merge</ng-container>
           </button>
+          <button ngbDropdownItem (click)="runZoneOcrSelected()" [disabled]="!userCanEditAll || list.allSelected">
+            <i-bs name="file-earmark-ruled" class="me-1"></i-bs><ng-container i18n>Run Zone OCR</ng-container>
+          </button>
         </div>
       </div>
     </div>

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -12,7 +12,15 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { saveAs } from 'file-saver'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { first, map, Observable, Subject, switchMap, takeUntil } from 'rxjs'
+import {
+  first,
+  forkJoin,
+  map,
+  Observable,
+  Subject,
+  switchMap,
+  takeUntil,
+} from 'rxjs'
 import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
 import { CustomField } from 'src/app/data/custom-field'
 import { MatchingModel } from 'src/app/data/matching-model'
@@ -908,6 +916,27 @@ export class BulkEditorComponent
       })
   }
 
+  runZoneOcrSelected() {
+    const ids = Array.from(this.list.selected)
+    if (!ids.length) return
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Run Zone OCR`
+    modal.componentInstance.messageBold = $localize`Run zone OCR on ${this.getSelectionSize()} selected document(s)?`
+    modal.componentInstance.message = $localize`Each document's type template (if it has one) is applied, overwriting the mapped fields.`
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        this.executeDocumentAction(
+          modal,
+          forkJoin(ids.map((id) => this.documentService.runZoneOcr(id)))
+        )
+      })
+  }
+
   setPermissions() {
     let modal = this.modalService.open(PermissionsDialogComponent, {
       backdrop: 'static',

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.html

@@ -0,0 +1,414 @@
+<pngx-page-header [title]="pageTitle" [id]="template.id">
+    <div class="input-group input-group-sm me-5 align-items-center">
+      <div class="input-group-text">
+        <i-bs name="file-text"></i-bs>
+      </div>
+        <input
+        type="text"
+        class="form-control"
+        [(ngModel)]="previewDocModel"
+        [ngbTypeahead]="searchDocuments"
+        [inputFormatter]="documentFormatter"
+        [resultFormatter]="documentFormatter"
+        (selectItem)="onPreviewDocSelected($event)"
+        [editable]="false"
+        placeholder="Search documents by title..."
+        i18n-placeholder
+      />
+  </div>
+
+  <div class="d-flex align-items-center flex-wrap gap-2">
+    <div class="input-group input-group-sm ms-2 d-none d-md-flex">
+      <div class="input-group-text" i18n>Page</div>
+        <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewPageCount" [(ngModel)]="previewPageDisplay" />
+      <div class="input-group-text" i18n>of {{previewPageCount}}</div>
+    </div>
+    <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Previous" (click)="prevPage()" [disabled]="!pageImageUrl || previewPage <= 0">
+      <i-bs width="1.2em" height="1.2em" name="arrow-left"></i-bs>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-secondary"  i18n-title title="Next" (click)="nextPage()" [disabled]="!pageImageUrl || previewPage >= (previewPageCount ?? 1) - 1">
+      <i-bs width="1.2em" height="1.2em" name="arrow-right"></i-bs>
+    </button>
+
+    <div class="input-group input-group-sm">
+      <button class="btn btn-outline-secondary" (click)="zoomOut()" i18n>-</button>
+      <span class="input-group-text">{{ zoom * 100 | number: '1.0-0' }}%</span>
+      <button class="btn btn-outline-secondary" (click)="zoomIn()" i18n>+</button>
+    </div>
+  </div>
+</pngx-page-header>
+
+<div class="row">
+  <div class="col-md-4">
+    <div class="btn-toolbar mb-1 border-bottom">
+        <div class="btn-group pb-3">
+          <a routerLink="/ocr-templates" class="btn btn-sm btn-outline-secondary">
+            <i-bs width="1.2em" height="1.2em" name="x"></i-bs>
+            <span class="ms-1" i18n>Close</span>
+          </a>
+        </div>
+        <div class="btn-group ms-auto pb-3">
+          <button class="btn btn-sm btn-primary" (click)="save()" [disabled]="saving">
+          @if (saving) {
+            <span class="spinner-border spinner-border-sm me-1"></span>
+          }
+          <span i18n>Save</span>
+          </button>
+      </div>
+    </div>
+
+    <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-underline flex-nowrap flex-md-wrap overflow-auto">
+        <li ngbNavItem="settings">
+          <a ngbNavLink i18n>Settings</a>
+          <ng-template ngbNavContent>
+            <div class="row mb-3">
+              <div class="col-9">
+                <pngx-input-text [(ngModel)]="template.name" title="Template name" i18n-title></pngx-input-text>
+              </div>
+              <div class="col-3">
+                <pngx-input-switch [(ngModel)]="template.enabled" title="Enabled" i18n-title></pngx-input-switch>
+              </div>
+            </div>
+
+            <pngx-input-select [(ngModel)]="template.document_type" [items]="documentTypes" bindLabel="name" bindValue="id" title="Document type" i18n-title></pngx-input-select>
+
+            <small class="text-muted" i18n>
+              Draw rectangles on the preview to define extraction zones. Use the
+              page controls above the preview to add zones on different pages.
+            </small>
+          </ng-template>
+        </li>
+
+        <li ngbNavItem="zones">
+          <a ngbNavLink><ng-container i18n>Zones</ng-container> <span class="badge bg-primary ms-2">{{ template.zones.length }}</span></a>
+          <ng-template ngbNavContent>
+            @if (template.zones.length === 0) {
+              <p class="text-muted" i18n>
+                No zones defined. Load a document preview and draw rectangles to add zones.
+              </p>
+            }
+            <div class="list-group">
+              @for (zone of template.zones; track $index; let i = $index) {
+                <div
+                  class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
+                  [style.box-shadow]="selectedZoneIndex === i ? 'inset 3px 0 0 0 var(--bs-primary)' : null"
+                >
+                  <div class="flex-grow-1" role="button" style="cursor: pointer;" (click)="selectZone(i)">
+                    <div><strong [class.text-primary]="selectedZoneIndex === i">{{ zone.name }}</strong></div>
+                    <div class="small text-muted">
+                      {{ getZoneTargetName(zone) }} - {{ zone.width }}x{{ zone.height }}px  <ng-container i18n>p.</ng-container>{{ zonePage(zone) }}
+                    </div>
+                  </div>
+                  <div class="btn-group">
+                    <button class="btn btn-sm btn-outline-secondary" type="button" (click)="selectZone(i)" title="Edit" i18n-title>
+                      <i-bs name="pencil"></i-bs>
+                    </button>
+                    <button class="btn btn-sm btn-outline-danger" type="button" (click)="removeZone(i)" title="Delete" i18n-title>
+                      <i-bs name="trash"></i-bs>
+                    </button>
+                  </div>
+                </div>
+              }
+            </div>
+          </ng-template>
+        </li>
+
+        <li ngbNavItem="zone">
+          <a ngbNavLink i18n>Zone</a>
+          <ng-template ngbNavContent>
+            @if (selectedZone; as zone) {
+              <div class="d-flex justify-content-between align-items-center mb-3">
+                <strong>{{ zone.name }}</strong>
+                <div class="d-flex gap-2">
+                  <button class="btn btn-sm btn-primary" (click)="save()" [disabled]="saving">
+                    @if (saving) {
+                      <span class="spinner-border spinner-border-sm me-1"></span>
+                    }
+                    <span i18n>Save</span>
+                  </button>
+                  <button class="btn btn-sm btn-outline-danger" (click)="deleteSelectedZone()">
+                    <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete zone</ng-container>
+                  </button>
+                </div>
+              </div>
+
+              <div class="mb-3">
+                <label class="form-label" i18n>Zone Name</label>
+                <input
+                  type="text"
+                  class="form-control"
+                  [(ngModel)]="zone.name"
+                  (ngModelChange)="redrawCanvas()"
+                />
+              </div>
+
+              <div class="mb-3">
+                <label class="form-label" i18n>Page</label>
+                <input
+                  type="number"
+                  class="form-control"
+                  [(ngModel)]="zone.page"
+                  min="-1"
+                  (ngModelChange)="redrawCanvas()"
+                />
+                <small class="text-muted" i18n>Page this zone is on. Use -1 for the last page. Set automatically when you draw it.</small>
+              </div>
+
+              <div class="mb-3">
+                <label class="form-label" i18n>Field</label>
+                <div class="input-group">
+                  <select class="form-select" [ngModel]="zoneFieldValue(zone)" (ngModelChange)="setZoneField(zone, $event)">
+                    <optgroup label="Built-in fields" i18n-label>
+                      @for (t of builtinTargets; track t.id) {
+                        <option [ngValue]="t.id">{{ t.name }}</option>
+                      }
+                    </optgroup>
+                    <optgroup label="Custom fields" i18n-label>
+                      @for (cf of customFields; track cf.id) {
+                        <option [ngValue]="cf.id">{{ cf.name }} ({{ cf.data_type }})</option>
+                      }
+                    </optgroup>
+                  </select>
+                  <button
+                    class="btn btn-outline-secondary"
+                    type="button"
+                    (click)="openQuickCreate(selectedZoneIndex)"
+                    title="Create new custom field"
+                    i18n-title
+                  >
+                    <i-bs name="plus"></i-bs>
+                  </button>
+                </div>
+                <small class="text-muted" i18n>Write the extracted value to a custom field, or to a built-in field (Title, ASN, Date created).</small>
+              </div>
+
+              @if (isFieldShared(zone)) {
+                <div class="card mb-3 border-info">
+                  <div class="card-body">
+                    <h6 class="card-title d-flex align-items-center gap-2">
+                      <i-bs name="braces"></i-bs>
+                      <span i18n>Combine zones into this field</span>
+                    </h6>
+                    <p class="small text-muted mb-2" i18n>
+                      More than one zone writes to this field. Build the combined
+                      value below: click a zone to insert its token, and type any
+                      separators or literal text between tokens.
+                    </p>
+                    <div class="d-flex flex-wrap gap-1 mb-2">
+                      @for (z of zonesForField(zone); track $index) {
+                        <button
+                          type="button"
+                          class="btn btn-sm btn-outline-info"
+                          (click)="insertCombineToken(zone, z)"
+                          title="Insert token"
+                          i18n-title
+                        >
+                          + {{ z.name || 'Zone' }}
+                        </button>
+                      }
+                    </div>
+                    <input
+                      type="text"
+                      class="form-control font-monospace"
+                      [ngModel]="getCombineFormat(zone)"
+                      (ngModelChange)="setCombineFormat(zone, $event)"
+                      placeholder="{Zone 1} - {Zone 2}"
+                    />
+                    <small class="text-muted" i18n>
+                      Tokens are matched by zone name. An empty zone leaves its
+                      token blank and the stray separator is trimmed. Leave empty
+                      to just join the zones in order with a space.
+                    </small>
+                  </div>
+                </div>
+              }
+
+              @if (showQuickCreate) {
+                <div class="card mb-3 border-primary">
+                  <div class="card-body">
+                    <h6 class="card-title" i18n>Create Custom Field</h6>
+                    <div class="mb-2">
+                      <label class="form-label small" i18n>Field Name</label>
+                      <input type="text" class="form-control form-control-sm"
+                        [(ngModel)]="quickCreateName" placeholder="e.g. Invoice Number" />
+                    </div>
+                    <div class="mb-2">
+                      <label class="form-label small" i18n>Field Type</label>
+                      <select class="form-select form-select-sm" [(ngModel)]="quickCreateType">
+                        @for (t of quickCreateTypes; track t.id) {
+                          <option [ngValue]="t.id">{{ t.name }}</option>
+                        }
+                      </select>
+                    </div>
+                    <div class="d-flex gap-2">
+                      <button class="btn btn-primary btn-sm" (click)="submitQuickCreate()"
+                        [disabled]="!quickCreateName.trim()" i18n>
+                        Create & Assign
+                      </button>
+                      <button class="btn btn-outline-secondary btn-sm" (click)="cancelQuickCreate()" i18n>
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              }
+
+              <div class="mb-3">
+                <label class="form-label" i18n>OCR Language</label>
+                <ng-select
+                  [items]="ocrLanguageOptions"
+                  bindLabel="name"
+                  bindValue="id"
+                  [multiple]="true"
+                  [closeOnSelect]="false"
+                  [ngModel]="ocrLanguageArray(zone)"
+                  (ngModelChange)="setOcrLanguages(zone, $event)"
+                  placeholder="Select languages"
+                  i18n-placeholder
+                ></ng-select>
+              </div>
+
+              <div class="mb-3">
+                <label class="form-label" i18n>Transform</label>
+                <select class="form-select" [(ngModel)]="zone.transform">
+                  @for (opt of transformOptions; track opt.id) {
+                    <option [ngValue]="opt.id">{{ opt.name }}</option>
+                  }
+                </select>
+              </div>
+
+              @if (zone.transform === 'date') {
+                <div class="mb-3">
+                  <label class="form-label" i18n>Date format</label>
+                  <select class="form-select" [ngModel]="dateFormatChoice(zone)" (ngModelChange)="setDateFormatChoice(zone, $event)">
+                    @for (opt of dateFormatOptions; track opt.id) {
+                      <option [ngValue]="opt.id">{{ opt.name }}</option>
+                    }
+                    <option [ngValue]="'custom'" i18n>Custom...</option>
+                  </select>
+                  @if (dateFormatCustom) {
+                    <div class="input-group mt-2">
+                      <input type="text" class="form-control font-monospace" [(ngModel)]="zone.date_format" placeholder="%d.%m.%Y" />
+                      <button class="btn btn-outline-secondary" type="button" [ngbPopover]="dateFmtHelp" [autoClose]="true" title="Date format help" i18n-title>
+                        <i-bs name="question-circle"></i-bs>
+                      </button>
+                    </div>
+                    <ng-template #dateFmtHelp>
+                      <p class="mb-1" i18n>Python date codes:</p>
+                      <ul class="mb-1 ps-3">
+                        <li><code>%d</code> <ng-container i18n>day (01-31)</ng-container></li>
+                        <li><code>%m</code> <ng-container i18n>month (01-12)</ng-container></li>
+                        <li><code>%Y</code> <ng-container i18n>year, 4-digit</ng-container></li>
+                        <li><code>%y</code> <ng-container i18n>year, 2-digit</ng-container></li>
+                        <li><code>%b</code> <ng-container i18n>month name (Jan)</ng-container></li>
+                      </ul>
+                      <span i18n>Example:</span> <code>%d.%m.%Y</code> -> 03.03.2026
+                    </ng-template>
+                  }
+                </div>
+              }
+
+              <div class="mb-3">
+                <label class="form-label" i18n>Validation Regex</label>
+                <input
+                  type="text"
+                  class="form-control font-monospace"
+                  [(ngModel)]="zone.validation_regex"
+                  placeholder="e.g. \d{2}\.\d{2}\.\d{4}"
+                >
+              </div>
+
+              <div class="text-muted small">
+                {{ zone.x }}, {{ zone.y }} - {{ zone.width }}x{{ zone.height }}px
+              </div>
+
+              <hr class="my-3" />
+              <h6 i18n>Test</h6>
+              @if (!previewDocId) {
+                <p class="text-muted small mb-0" i18n>
+                  Load a document in the Settings tab to test this zone.
+                </p>
+              } @else {
+                <button class="btn btn-sm btn-outline-secondary" (click)="testZone()" [disabled]="zoneTesting">
+                  @if (zoneTesting) {
+                    <span class="spinner-border spinner-border-sm me-1"></span>
+                  }
+                  <span i18n>Test this zone</span>
+                </button>
+                @if (zoneTestResult) {
+                  @if (zoneTestResult.error) {
+                    <div class="alert alert-warning py-2 mt-2 mb-0 small">{{ zoneTestResult.error }}</div>
+                  } @else {
+                    <dl class="row small mt-2 mb-0">
+                      <dt class="col-sm-4" i18n>OCR text</dt>
+                      <dd class="col-sm-8"><code>{{ zoneTestResult.raw_text || '(nothing detected)' }}</code></dd>
+                      <dt class="col-sm-4" i18n>Value</dt>
+                      <dd class="col-sm-8"><code>{{ zoneTestResult.value || '(empty)' }}</code></dd>
+                      @if (zoneTestResult.regex) {
+                        <dt class="col-sm-4" i18n>Validation</dt>
+                        <dd class="col-sm-8">
+                          @if (zoneTestResult.regex_match) {
+                            <span class="badge bg-success" i18n>Regex matches</span>
+                          } @else {
+                            <span class="badge bg-danger" i18n>Regex does not match</span>
+                          }
+                        </dd>
+                      }
+                    </dl>
+                  }
+                }
+              }
+            } @else {
+              <p class="text-muted" i18n>
+                Select a zone from the Zones tab, or draw a rectangle on the document to create one.
+              </p>
+            }
+          </ng-template>
+        </li>
+      </ul>
+
+      <div [ngbNavOutlet]="nav" class="mt-3"></div>
+    </div>
+
+    <!-- Right column: Document preview with zone overlay -->
+    <div class="col-md-8">
+      @if (pageImageUrl) {
+        <div class="border" style="overflow: auto; max-height: 78vh;">
+        <div class="position-relative d-inline-block" [style.width.%]="zoom * 100">
+          <img
+            #pageImage
+            [src]="pageImageUrl"
+            (load)="onImageLoad()"
+            style="width: 100%; display: block;"
+            [style.visibility]="imageLoaded ? 'visible' : 'hidden'"
+            crossorigin="use-credentials"
+          />
+          @if (imageLoaded) {
+            <canvas
+              #zoneCanvas
+              class="position-absolute top-0 start-0"
+              style="width: 100%; height: 100%; cursor: crosshair;"
+              (mousedown)="onCanvasMouseDown($event)"
+              (mousemove)="onCanvasMouseMove($event)"
+              (mouseup)="onCanvasMouseUp($event)"
+            ></canvas>
+          }
+          @if (!imageLoaded) {
+            <div class="d-flex justify-content-center p-5">
+              <div class="spinner-border" role="status">
+                <span class="visually-hidden" i18n>Loading page...</span>
+              </div>
+            </div>
+          }
+        </div>
+        </div>
+      } @else {
+        <div class="border rounded p-5 text-center text-muted">
+          <i-bs name="file-earmark-image" width="48" height="48"></i-bs>
+          <p class="mt-3" i18n>
+            Enter a document ID and click "Load" to preview a page and draw extraction zones.
+          </p>
+        </div>
+      }
+    </div>
+  </div>

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor.component.ts

@@ -0,0 +1,997 @@
+import { CommonModule } from '@angular/common'
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  inject,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { ActivatedRoute, Router, RouterModule } from '@angular/router'
+import {
+  NgbNavModule,
+  NgbPopoverModule,
+  NgbTypeaheadModule,
+  NgbTypeaheadSelectItemEvent,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import {
+  catchError,
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  Observable,
+  of,
+  Subject,
+  switchMap,
+  takeUntil,
+} from 'rxjs'
+import { SelectComponent } from 'src/app/components/common/input/select/select.component'
+import { SwitchComponent } from 'src/app/components/common/input/switch/switch.component'
+import { TextComponent } from 'src/app/components/common/input/text/text.component'
+import { PageHeaderComponent } from 'src/app/components/common/page-header/page-header.component'
+import { CustomField } from 'src/app/data/custom-field'
+import { Document } from 'src/app/data/document'
+import { DocumentType } from 'src/app/data/document-type'
+import {
+  DATE_FORMAT_OPTIONS,
+  OCR_BUILTIN_TARGETS,
+  OCR_LANGUAGE_OPTIONS,
+  OcrTemplate,
+  OcrTemplateZone,
+  OcrZoneTestResult,
+  TRANSFORM_OPTIONS,
+  ZoneTestRequest,
+} from 'src/app/data/ocr-template'
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { ToastService } from 'src/app/services/toast.service'
+
+interface DrawingRect {
+  startX: number
+  startY: number
+  endX: number
+  endY: number
+}
+
+type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'
+
+type ActiveTab = 'settings' | 'zones' | 'zone'
+
+@Component({
+  selector: 'pngx-ocr-template-editor',
+  standalone: true,
+  imports: [
+    PageHeaderComponent,
+    TextComponent,
+    SelectComponent,
+    SwitchComponent,
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgbNavModule,
+    NgbPopoverModule,
+    NgbTypeaheadModule,
+    NgSelectModule,
+    NgxBootstrapIconsModule,
+  ],
+  templateUrl: './ocr-template-editor.component.html',
+  styleUrls: ['./ocr-template-editor.component.scss'],
+})
+export class OcrTemplateEditorComponent
+  implements OnInit, OnDestroy, AfterViewInit
+{
+  private readonly route = inject(ActivatedRoute)
+  private readonly router = inject(Router)
+  private readonly templateService = inject(OcrTemplateService)
+  private readonly customFieldsService = inject(CustomFieldsService)
+  private readonly documentTypeService = inject(DocumentTypeService)
+  private readonly correspondentService = inject(CorrespondentService)
+  private readonly documentService = inject(DocumentService)
+  private readonly toastService = inject(ToastService)
+  private readonly destroy$ = new Subject<void>()
+
+  @ViewChild('zoneCanvas') canvasRef: ElementRef<HTMLCanvasElement>
+  @ViewChild('pageImage') imageRef: ElementRef<HTMLImageElement>
+
+  template: OcrTemplate = {
+    id: null,
+    name: '',
+    document_type: null,
+    sample_document: null,
+    source_width: 0,
+    source_height: 0,
+    enabled: true,
+    combine_formats: {},
+    zones: [],
+  }
+
+  customFields: CustomField[] = []
+  documentTypes: DocumentType[] = []
+  transformOptions = TRANSFORM_OPTIONS
+  builtinTargets = OCR_BUILTIN_TARGETS
+  dateFormatOptions = DATE_FORMAT_OPTIONS
+  ocrLanguageOptions = OCR_LANGUAGE_OPTIONS
+  dateFormatCustom = false
+  isNew = true
+  saving = false
+
+  previewDocId: number | null = null
+  previewPage = 0
+  previewPageCount: number | null = null
+  private pageCountForDoc: number | null = null
+  pageImageUrl: string | null = null
+  imageLoaded = false
+  zoom = 1
+  previewDocModel: Document | string = ''
+  private correspondentNames = new Map<number, string>()
+
+  public get previewPageDisplay(): number {
+    return this.previewPage + 1
+  }
+
+  public set previewPageDisplay(value: number) {
+    this.previewPage = Math.max(0, value) - 1
+  }
+
+  activeTab: ActiveTab = 'settings'
+
+  isDrawing = false
+  currentRect: DrawingRect | null = null
+  selectedZoneIndex: number | null = null
+
+  isResizing = false
+  resizeHandle: ResizeHandle | null = null
+  resizeZoneIndex: number | null = null
+  private readonly HANDLE_SIZE = 8
+
+  isMoving = false
+  moveZoneIndex: number | null = null
+  private moveStart = { mouseX: 0, mouseY: 0, zoneX: 0, zoneY: 0 }
+
+  zoneTestResult: OcrZoneTestResult | null = null
+  zoneTesting = false
+
+  showQuickCreate = false
+  quickCreateName = ''
+  quickCreateType = 'string'
+  quickCreateForZoneIndex: number | null = null
+  quickCreateTypes = [
+    { id: 'string', name: $localize`String` },
+    { id: 'integer', name: $localize`Integer` },
+    { id: 'float', name: $localize`Float` },
+    { id: 'date', name: $localize`Date` },
+    { id: 'monetary', name: $localize`Monetary` },
+    { id: 'boolean', name: $localize`Boolean` },
+    { id: 'url', name: $localize`URL` },
+    { id: 'longtext', name: $localize`Long Text` },
+  ]
+
+  get selectedZone(): OcrTemplateZone | null {
+    return this.selectedZoneIndex !== null
+      ? (this.template.zones[this.selectedZoneIndex] ?? null)
+      : null
+  }
+
+  get pageTitle(): string {
+    return this.isNew
+      ? $localize`New OCR Template`
+      : $localize`Edit OCR Template`
+  }
+
+  ngOnInit() {
+    this.customFieldsService
+      .listAll()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((r) => (this.customFields = r.results))
+
+    this.documentTypeService
+      .listAll()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((r) => (this.documentTypes = r.results))
+
+    this.correspondentService
+      .listAll()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((r) => {
+        this.correspondentNames = new Map(r.results.map((c) => [c.id, c.name]))
+      })
+
+    const id = this.route.snapshot.paramMap.get('id')
+    if (id && id !== 'new') {
+      this.isNew = false
+      this.templateService
+        .get(parseInt(id))
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((t) => {
+          this.template = t
+          this.template.combine_formats ??= {}
+          if (t.sample_document) {
+            this.previewDocId = t.sample_document
+            this.loadPreview()
+          }
+        })
+    } else {
+      const qp = this.route.snapshot.queryParams
+      if (qp['document_type']) {
+        this.template.document_type = parseInt(qp['document_type'])
+      }
+      if (qp['sample_document']) {
+        const docId = parseInt(qp['sample_document'])
+        this.template.sample_document = docId
+        this.previewDocId = docId
+        this.loadPreview()
+      }
+    }
+  }
+
+  ngAfterViewInit() {}
+
+  searchDocuments = (text$: Observable<string>): Observable<Document[]> =>
+    text$.pipe(
+      debounceTime(250),
+      distinctUntilChanged(),
+      switchMap((term) => {
+        if (!term || term.trim().length < 2) return of([])
+        const params: { title__icontains: string; document_type__id?: number } =
+          { title__icontains: term.trim() }
+        if (this.template.document_type) {
+          params['document_type__id'] = this.template.document_type
+        }
+        return this.documentService.list(1, 10, 'created', true, params).pipe(
+          map((r) => r.results),
+          catchError(() => of([]))
+        )
+      })
+    )
+
+  documentFormatter = (doc: Document | string): string => {
+    if (typeof doc === 'string') return doc
+    const corr = doc.correspondent
+      ? this.correspondentNames.get(doc.correspondent)
+      : null
+    return corr
+      ? `#${doc.id} ${doc.title} (${corr})`
+      : `#${doc.id} ${doc.title}`
+  }
+
+  onPreviewDocSelected(event: NgbTypeaheadSelectItemEvent<Document>) {
+    event.preventDefault()
+    const doc: Document = event.item
+    this.previewDocModel = doc
+    this.previewDocId = doc.id
+    if (!this.template.document_type && doc.document_type) {
+      this.template.document_type = doc.document_type
+    }
+    this.previewPage = 0
+    this.loadPreview()
+  }
+
+  clearPreviewDoc() {
+    this.previewDocModel = ''
+    this.previewDocId = null
+    this.previewPageCount = null
+    this.pageCountForDoc = null
+    this.previewPage = 0
+    this.pageImageUrl = null
+    this.imageLoaded = false
+  }
+
+  loadPreview() {
+    if (!this.previewDocId) return
+    if (this.pageCountForDoc !== this.previewDocId) {
+      this.pageCountForDoc = this.previewDocId
+      this.previewPageCount = null
+      this.documentService
+        .get(this.previewDocId)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (doc) => {
+            this.previewPageCount = doc?.page_count ?? null
+            if (doc && !this.previewDocModel) this.previewDocModel = doc
+          },
+          error: () => (this.previewPageCount = null),
+        })
+    }
+    this.pageImageUrl = this.templateService.getPageImageUrl(
+      this.previewDocId,
+      this.previewPage
+    )
+    this.imageLoaded = false
+  }
+
+  goToPage(page: number) {
+    const max = this.previewPageCount ? this.previewPageCount - 1 : page
+    const clamped = Math.max(0, Math.min(page, max))
+    if (clamped === this.previewPage) return
+    this.previewPage = clamped
+    this.loadPreview()
+  }
+
+  prevPage() {
+    this.goToPage(this.previewPage - 1)
+  }
+
+  nextPage() {
+    this.goToPage(this.previewPage + 1)
+  }
+
+  zoomIn() {
+    this.zoom = Math.min(4, Math.round((this.zoom + 0.25) * 100) / 100)
+    this.afterZoom()
+  }
+
+  zoomOut() {
+    this.zoom = Math.max(0.5, Math.round((this.zoom - 0.25) * 100) / 100)
+    this.afterZoom()
+  }
+
+  resetZoom() {
+    this.zoom = 1
+    this.afterZoom()
+  }
+
+  private afterZoom() {
+    // Defer so the wrapper reflows to the new width before the canvas resizes.
+    setTimeout(() => this.redrawCanvas())
+  }
+
+  zonePage(zone: OcrTemplateZone): number {
+    const v = zone.page ?? 1
+    if (v === -1) return this.previewPageCount ?? this.previewPage + 1
+    return v >= 1 ? v : 1
+  }
+
+  private isOnCurrentPage(zone: OcrTemplateZone): boolean {
+    return this.zonePage(zone) === this.previewPage + 1
+  }
+
+  onImageLoad() {
+    this.imageLoaded = true
+    const img = this.imageRef.nativeElement
+    this.template.source_width = img.naturalWidth
+    this.template.source_height = img.naturalHeight
+    // The canvas only exists after @if(imageLoaded) renders, so defer the draw.
+    setTimeout(() => this.redrawCanvas())
+  }
+
+  onCanvasMouseDown(event: MouseEvent) {
+    const rect = this.canvasRef.nativeElement.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+
+    if (this.selectedZoneIndex !== null) {
+      const handle = this.findHandleAt(x, y, this.selectedZoneIndex)
+      if (handle) {
+        this.isResizing = true
+        this.resizeHandle = handle
+        this.resizeZoneIndex = this.selectedZoneIndex
+        return
+      }
+    }
+
+    const clickedIdx = this.findZoneAt(x, y)
+    if (clickedIdx !== null && !event.shiftKey) {
+      this.selectZone(clickedIdx)
+      const zone = this.template.zones[clickedIdx]
+      this.isMoving = true
+      this.moveZoneIndex = clickedIdx
+      this.moveStart = { mouseX: x, mouseY: y, zoneX: zone.x, zoneY: zone.y }
+      return
+    }
+
+    // Shift+click or click on empty area starts a new zone.
+    this.isDrawing = true
+    this.currentRect = { startX: x, startY: y, endX: x, endY: y }
+    this.selectedZoneIndex = null
+  }
+
+  onCanvasMouseMove(event: MouseEvent) {
+    const rect = this.canvasRef.nativeElement.getBoundingClientRect()
+    const mx = event.clientX - rect.left
+    const my = event.clientY - rect.top
+
+    if (this.isResizing && this.resizeZoneIndex !== null && this.resizeHandle) {
+      this.applyResize(mx, my)
+      this.redrawCanvas()
+      return
+    }
+
+    if (this.isMoving && this.moveZoneIndex !== null) {
+      const zone = this.template.zones[this.moveZoneIndex]
+      const canvas = this.canvasRef.nativeElement
+      const img = this.imageRef.nativeElement
+      const srcW = zone.zone_source_width || img.naturalWidth
+      const srcH = zone.zone_source_height || img.naturalHeight
+      const scaleX = srcW / canvas.width
+      const scaleY = srcH / canvas.height
+      const dx = Math.round((mx - this.moveStart.mouseX) * scaleX)
+      const dy = Math.round((my - this.moveStart.mouseY) * scaleY)
+      zone.x = Math.max(
+        0,
+        Math.min(this.moveStart.zoneX + dx, srcW - zone.width)
+      )
+      zone.y = Math.max(
+        0,
+        Math.min(this.moveStart.zoneY + dy, srcH - zone.height)
+      )
+      this.redrawCanvas()
+      return
+    }
+
+    if (this.isDrawing && this.currentRect) {
+      this.currentRect.endX = mx
+      this.currentRect.endY = my
+      this.redrawCanvas()
+      return
+    }
+
+    // Cursor feedback: resize handle > move (over a zone) > crosshair.
+    const canvas = this.canvasRef.nativeElement
+    if (this.selectedZoneIndex !== null) {
+      const handle = this.findHandleAt(mx, my, this.selectedZoneIndex)
+      if (handle) {
+        const cursorMap: Record<ResizeHandle, string> = {
+          nw: 'nw-resize',
+          ne: 'ne-resize',
+          sw: 'sw-resize',
+          se: 'se-resize',
+          n: 'n-resize',
+          s: 's-resize',
+          w: 'w-resize',
+          e: 'e-resize',
+        }
+        canvas.style.cursor = cursorMap[handle] || 'crosshair'
+        return
+      }
+    }
+    canvas.style.cursor =
+      this.findZoneAt(mx, my) !== null ? 'move' : 'crosshair'
+  }
+
+  onCanvasMouseUp(event: MouseEvent) {
+    if (this.isMoving) {
+      this.isMoving = false
+      this.moveZoneIndex = null
+      return
+    }
+
+    if (this.isResizing) {
+      this.isResizing = false
+      this.resizeHandle = null
+      this.resizeZoneIndex = null
+      return
+    }
+
+    if (!this.isDrawing || !this.currentRect) return
+    this.isDrawing = false
+
+    const canvas = this.canvasRef.nativeElement
+    const img = this.imageRef.nativeElement
+
+    const scaleX = img.naturalWidth / canvas.width
+    const scaleY = img.naturalHeight / canvas.height
+
+    const x = Math.round(
+      Math.min(this.currentRect.startX, this.currentRect.endX) * scaleX
+    )
+    const y = Math.round(
+      Math.min(this.currentRect.startY, this.currentRect.endY) * scaleY
+    )
+    const w = Math.round(
+      Math.abs(this.currentRect.endX - this.currentRect.startX) * scaleX
+    )
+    const h = Math.round(
+      Math.abs(this.currentRect.endY - this.currentRect.startY) * scaleY
+    )
+
+    // Ignore tiny accidental clicks.
+    if (w < 10 || h < 10) {
+      this.currentRect = null
+      this.redrawCanvas()
+      return
+    }
+
+    const zone: OcrTemplateZone = {
+      name: `Zone ${this.template.zones.length + 1}`,
+      target: 'custom_field',
+      custom_field:
+        this.customFields.length > 0 ? this.customFields[0].id : null,
+      x,
+      y,
+      width: w,
+      height: h,
+      page: this.previewPage + 1,
+      ocr_language: 'deu+eng',
+      transform: 'strip',
+      date_format: '',
+      validation_regex: '',
+      order: this.template.zones.length,
+      zone_source_width: img.naturalWidth,
+      zone_source_height: img.naturalHeight,
+    }
+
+    this.template.zones.push(zone)
+    this.currentRect = null
+    this.selectZone(this.template.zones.length - 1)
+  }
+
+  private getZoneDisplayRect(
+    zoneIdx: number
+  ): { x: number; y: number; w: number; h: number } | null {
+    const canvas = this.canvasRef?.nativeElement
+    const img = this.imageRef?.nativeElement
+    if (!canvas || !img || !img.naturalWidth) return null
+    const zone = this.template.zones[zoneIdx]
+    if (!zone) return null
+    if (!this.isOnCurrentPage(zone)) return null
+    const srcW = zone.zone_source_width || img.naturalWidth
+    const srcH = zone.zone_source_height || img.naturalHeight
+    const scaleX = canvas.width / srcW
+    const scaleY = canvas.height / srcH
+    return {
+      x: zone.x * scaleX,
+      y: zone.y * scaleY,
+      w: zone.width * scaleX,
+      h: zone.height * scaleY,
+    }
+  }
+
+  private findHandleAt(
+    mx: number,
+    my: number,
+    zoneIdx: number
+  ): ResizeHandle | null {
+    const r = this.getZoneDisplayRect(zoneIdx)
+    if (!r) return null
+    const hs = this.HANDLE_SIZE
+    const handles: [ResizeHandle, number, number][] = [
+      ['nw', r.x, r.y],
+      ['n', r.x + r.w / 2, r.y],
+      ['ne', r.x + r.w, r.y],
+      ['w', r.x, r.y + r.h / 2],
+      ['e', r.x + r.w, r.y + r.h / 2],
+      ['sw', r.x, r.y + r.h],
+      ['s', r.x + r.w / 2, r.y + r.h],
+      ['se', r.x + r.w, r.y + r.h],
+    ]
+    for (const [name, hx, hy] of handles) {
+      if (Math.abs(mx - hx) <= hs && Math.abs(my - hy) <= hs) return name
+    }
+    return null
+  }
+
+  private applyResize(mx: number, my: number) {
+    const canvas = this.canvasRef.nativeElement
+    const img = this.imageRef.nativeElement
+    const zone = this.template.zones[this.resizeZoneIndex]
+    if (!zone) return
+    const srcW = zone.zone_source_width || img.naturalWidth
+    const srcH = zone.zone_source_height || img.naturalHeight
+    const scaleX = srcW / canvas.width
+    const scaleY = srcH / canvas.height
+    const imgX = Math.round(mx * scaleX)
+    const imgY = Math.round(my * scaleY)
+    const handle = this.resizeHandle
+
+    if (handle.includes('w')) {
+      const right = zone.x + zone.width
+      zone.x = Math.max(0, Math.min(imgX, right - 10))
+      zone.width = right - zone.x
+    }
+    if (handle.includes('e')) {
+      zone.width = Math.max(10, imgX - zone.x)
+    }
+    if (handle.includes('n')) {
+      const bottom = zone.y + zone.height
+      zone.y = Math.max(0, Math.min(imgY, bottom - 10))
+      zone.height = bottom - zone.y
+    }
+    if (handle.includes('s')) {
+      zone.height = Math.max(10, imgY - zone.y)
+    }
+  }
+
+  private findZoneAt(displayX: number, displayY: number): number | null {
+    const canvas = this.canvasRef.nativeElement
+    const img = this.imageRef.nativeElement
+    if (!img.naturalWidth) return null
+
+    for (let i = this.template.zones.length - 1; i >= 0; i--) {
+      const z = this.template.zones[i]
+      if (!this.isOnCurrentPage(z)) continue
+      const srcW = z.zone_source_width || img.naturalWidth
+      const srcH = z.zone_source_height || img.naturalHeight
+      const scaleX = canvas.width / srcW
+      const scaleY = canvas.height / srcH
+      const zx = z.x * scaleX
+      const zy = z.y * scaleY
+      const zw = z.width * scaleX
+      const zh = z.height * scaleY
+      if (
+        displayX >= zx &&
+        displayX <= zx + zw &&
+        displayY >= zy &&
+        displayY <= zy + zh
+      ) {
+        return i
+      }
+    }
+    return null
+  }
+
+  redrawCanvas() {
+    if (!this.canvasRef || !this.imageRef) return
+    const canvas = this.canvasRef.nativeElement
+    const img = this.imageRef.nativeElement
+    const ctx = canvas.getContext('2d')
+
+    canvas.width = img.clientWidth
+    canvas.height = img.clientHeight
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    const colors = [
+      '#4f8ff7',
+      '#ff6b6b',
+      '#51cf66',
+      '#ffd43b',
+      '#cc5de8',
+      '#ff922b',
+      '#20c997',
+      '#e599f7',
+    ]
+
+    this.template.zones.forEach((zone, idx) => {
+      if (!this.isOnCurrentPage(zone)) return
+      const color = colors[idx % colors.length]
+      const srcW = zone.zone_source_width || img.naturalWidth
+      const srcH = zone.zone_source_height || img.naturalHeight
+      const scaleX = canvas.width / srcW
+      const scaleY = canvas.height / srcH
+      const x = zone.x * scaleX
+      const y = zone.y * scaleY
+      const w = zone.width * scaleX
+      const h = zone.height * scaleY
+
+      ctx.strokeStyle = color
+      ctx.lineWidth = idx === this.selectedZoneIndex ? 3 : 2
+      ctx.strokeRect(x, y, w, h)
+
+      ctx.fillStyle = color + '20'
+      ctx.fillRect(x, y, w, h)
+
+      const label = zone.name || `Zone ${idx + 1}`
+      ctx.font = '12px sans-serif'
+      ctx.textBaseline = 'middle'
+      const padX = 6
+      const pillH = 17
+      const pillW = ctx.measureText(label).width + padX * 2
+      const pillX = x
+      const pillY = Math.max(0, y - pillH - 2)
+      const r = 4
+      ctx.fillStyle = color
+      ctx.beginPath()
+      ctx.moveTo(pillX + r, pillY)
+      ctx.arcTo(pillX + pillW, pillY, pillX + pillW, pillY + pillH, r)
+      ctx.arcTo(pillX + pillW, pillY + pillH, pillX, pillY + pillH, r)
+      ctx.arcTo(pillX, pillY + pillH, pillX, pillY, r)
+      ctx.arcTo(pillX, pillY, pillX + pillW, pillY, r)
+      ctx.closePath()
+      ctx.fill()
+      ctx.fillStyle = '#ffffff'
+      ctx.fillText(label, pillX + padX, pillY + pillH / 2 + 0.5)
+      ctx.textBaseline = 'alphabetic'
+
+      if (idx === this.selectedZoneIndex) {
+        const hs = this.HANDLE_SIZE
+        ctx.fillStyle = color
+        const handles = [
+          [x, y],
+          [x + w / 2, y],
+          [x + w, y],
+          [x, y + h / 2],
+          [x + w, y + h / 2],
+          [x, y + h],
+          [x + w / 2, y + h],
+          [x + w, y + h],
+        ]
+        for (const [hx, hy] of handles) {
+          ctx.fillRect(hx - hs / 2, hy - hs / 2, hs, hs)
+        }
+      }
+    })
+
+    if (this.currentRect) {
+      const cw = this.currentRect.endX - this.currentRect.startX
+      const ch = this.currentRect.endY - this.currentRect.startY
+      ctx.fillStyle = 'rgba(105, 219, 124, 0.25)'
+      ctx.fillRect(this.currentRect.startX, this.currentRect.startY, cw, ch)
+      ctx.strokeStyle = '#69db7c'
+      ctx.lineWidth = 2
+      ctx.setLineDash([5, 5])
+      ctx.strokeRect(this.currentRect.startX, this.currentRect.startY, cw, ch)
+      ctx.setLineDash([])
+    }
+  }
+
+  removeZone(index: number) {
+    this.template.zones.splice(index, 1)
+    if (this.selectedZoneIndex === index) {
+      this.selectedZoneIndex = null
+    } else if (this.selectedZoneIndex > index) {
+      this.selectedZoneIndex--
+    }
+    this.redrawCanvas()
+  }
+
+  selectZone(index: number) {
+    this.selectedZoneIndex = index
+    this.activeTab = 'zone'
+    this.zoneTestResult = null
+    const zone = this.template.zones[index]
+    if (zone) {
+      this.dateFormatCustom =
+        !!zone.date_format &&
+        !this.dateFormatOptions.some((o) => o.id === zone.date_format)
+      this.seedCombineDefault(zone)
+      this.goToPage(this.zonePage(zone) - 1)
+    }
+    this.redrawCanvas()
+  }
+
+  testZone() {
+    const zone = this.selectedZone
+    if (!zone || !this.previewDocId) return
+    this.zoneTesting = true
+    this.zoneTestResult = null
+    const payload: ZoneTestRequest = {
+      name: zone.name,
+      x: zone.x,
+      y: zone.y,
+      width: zone.width,
+      height: zone.height,
+      page: zone.page ?? 1,
+      ocr_language: zone.ocr_language,
+      transform: zone.transform,
+      date_format: zone.date_format,
+      validation_regex: zone.validation_regex,
+      zone_source_width: zone.zone_source_width,
+      zone_source_height: zone.zone_source_height,
+    }
+    this.templateService
+      .testZone(this.previewDocId, payload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res) => {
+          this.zoneTestResult = res
+          this.zoneTesting = false
+        },
+        error: (err) => {
+          this.zoneTestResult = {
+            error: err.error?.error || $localize`Test failed`,
+          }
+          this.zoneTesting = false
+        },
+      })
+  }
+
+  deleteSelectedZone() {
+    if (this.selectedZoneIndex === null) return
+    this.removeZone(this.selectedZoneIndex)
+    this.activeTab = 'zones'
+  }
+
+  save() {
+    this.saving = true
+    this.pruneCombineFormats()
+    this.template.sample_document = this.previewDocId
+    const obs = this.isNew
+      ? this.templateService.create(this.template)
+      : this.templateService.update(this.template)
+
+    obs.pipe(takeUntil(this.destroy$)).subscribe({
+      next: (saved) => {
+        const idx = this.selectedZoneIndex
+        this.template = saved
+        this.isNew = false
+        this.selectedZoneIndex = idx
+        this.saving = false
+        this.toastService.showInfo($localize`OCR template saved.`)
+        this.redrawCanvas()
+      },
+      error: (e) => {
+        this.saving = false
+        this.toastService.showError($localize`Error saving OCR template.`, e)
+      },
+    })
+  }
+
+  private ocrLangCache = new WeakMap<
+    OcrTemplateZone,
+    { src: string; arr: string[] }
+  >()
+
+  ocrLanguageArray(zone: OcrTemplateZone): string[] {
+    const src = zone.ocr_language || ''
+    const cached = this.ocrLangCache.get(zone)
+    if (cached && cached.src === src) return cached.arr
+    const arr = src ? src.split('+').filter(Boolean) : []
+    this.ocrLangCache.set(zone, { src, arr })
+    return arr
+  }
+
+  setOcrLanguages(zone: OcrTemplateZone, langs: string[]) {
+    zone.ocr_language = (langs || []).join('+')
+    this.ocrLangCache.set(zone, {
+      src: zone.ocr_language,
+      arr: langs ? [...langs] : [],
+    })
+  }
+
+  getCustomFieldName(id: number): string {
+    const cf = this.customFields.find((f) => f.id === id)
+    return cf ? cf.name : `Field #${id}`
+  }
+
+  /** Value bound to the field select: a built-in id string or a custom-field id. */
+  zoneFieldValue(zone: OcrTemplateZone): number | string | null {
+    const target = zone.target || 'custom_field'
+    return target === 'custom_field' ? zone.custom_field : target
+  }
+
+  setZoneField(zone: OcrTemplateZone, value: number | string) {
+    if (value === 'title' || value === 'asn' || value === 'created') {
+      zone.target = value
+      zone.custom_field = null
+    } else {
+      zone.target = 'custom_field'
+      zone.custom_field = typeof value === 'number' ? value : null
+    }
+    this.seedCombineDefault(zone)
+  }
+
+  fieldKeyFor(zone: OcrTemplateZone): string | null {
+    const v = this.zoneFieldValue(zone)
+    return v === null || v === undefined || v === '' ? null : String(v)
+  }
+
+  zonesForField(zone: OcrTemplateZone): OcrTemplateZone[] {
+    const key = this.fieldKeyFor(zone)
+    if (!key) return []
+    return this.template.zones.filter((z) => this.fieldKeyFor(z) === key)
+  }
+
+  isFieldShared(zone: OcrTemplateZone): boolean {
+    return this.zonesForField(zone).length > 1
+  }
+
+  getCombineFormat(zone: OcrTemplateZone): string {
+    const key = this.fieldKeyFor(zone)
+    return (key && this.template.combine_formats?.[key]) || ''
+  }
+
+  setCombineFormat(zone: OcrTemplateZone, value: string) {
+    const key = this.fieldKeyFor(zone)
+    if (!key) return
+    this.template.combine_formats ??= {}
+    this.template.combine_formats[key] = value
+  }
+
+  insertCombineToken(zone: OcrTemplateZone, tokenZone: OcrTemplateZone) {
+    const token = `{${tokenZone.name}}`
+    const current = this.getCombineFormat(zone)
+    const sep = current && !current.endsWith(' ') ? ' ' : ''
+    this.setCombineFormat(zone, `${current}${sep}${token}`)
+  }
+
+  private seedCombineDefault(zone: OcrTemplateZone) {
+    const key = this.fieldKeyFor(zone)
+    if (!key) return
+    const shared = this.zonesForField(zone)
+    if (shared.length <= 1) return
+    this.template.combine_formats ??= {}
+    if (!this.template.combine_formats[key]) {
+      this.template.combine_formats[key] = shared
+        .map((z) => `{${z.name}}`)
+        .join(' ')
+    }
+  }
+
+  private pruneCombineFormats() {
+    const formats = this.template.combine_formats
+    if (!formats) return
+    const counts = new Map<string, number>()
+    for (const z of this.template.zones) {
+      const key = this.fieldKeyFor(z)
+      if (key) counts.set(key, (counts.get(key) ?? 0) + 1)
+    }
+    for (const key of Object.keys(formats)) {
+      if ((counts.get(key) ?? 0) <= 1) delete formats[key]
+    }
+  }
+
+  /** Value bound to the date-format select: a preset, '' (auto), or 'custom'. */
+  dateFormatChoice(zone: OcrTemplateZone): string {
+    if (this.dateFormatCustom) return 'custom'
+    return zone.date_format || ''
+  }
+
+  setDateFormatChoice(zone: OcrTemplateZone, value: string) {
+    if (value === 'custom') {
+      this.dateFormatCustom = true
+    } else {
+      this.dateFormatCustom = false
+      zone.date_format = value
+    }
+  }
+
+  getZoneTargetName(zone: OcrTemplateZone): string {
+    const target = zone.target || 'custom_field'
+    if (target === 'custom_field') {
+      return zone.custom_field
+        ? this.getCustomFieldName(zone.custom_field)
+        : $localize`(no field)`
+    }
+    return this.builtinTargets.find((t) => t.id === target)?.name ?? target
+  }
+
+  getDocumentTypeName(id: number): string {
+    const dt = this.documentTypes.find((d) => d.id === id)
+    return dt ? dt.name : `Type #${id}`
+  }
+
+  openQuickCreate(zoneIndex: number | null) {
+    if (zoneIndex === null) return
+    this.quickCreateForZoneIndex = zoneIndex
+    this.quickCreateName = this.template.zones[zoneIndex]?.name || ''
+    this.quickCreateType = 'string'
+    this.showQuickCreate = true
+  }
+
+  cancelQuickCreate() {
+    this.showQuickCreate = false
+    this.quickCreateForZoneIndex = null
+  }
+
+  submitQuickCreate() {
+    if (!this.quickCreateName.trim()) return
+
+    this.templateService
+      .quickCreateField(this.quickCreateName.trim(), this.quickCreateType)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (result) => {
+          this.customFieldsService.clearCache()
+          this.customFieldsService
+            .listAll()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((r) => {
+              this.customFields = r.results
+              if (this.quickCreateForZoneIndex !== null) {
+                this.template.zones[this.quickCreateForZoneIndex].custom_field =
+                  result.id
+                this.template.zones[this.quickCreateForZoneIndex].target =
+                  'custom_field'
+              }
+              this.showQuickCreate = false
+              this.quickCreateForZoneIndex = null
+            })
+        },
+        error: (err) => {
+          alert(err.error?.error || 'Failed to create custom field')
+        },
+      })
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next()
+    this.destroy$.complete()
+  }
+}

src-ui/src/app/components/manage/ocr-templates/ocr-templates.component.html

@@ -0,0 +1,75 @@
+<pngx-page-header
+  title="OCR Templates"
+  i18n-title
+  info="Define extraction zones on document types to automatically populate custom fields via OCR."
+  i18n-info
+  >
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="createTemplate()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.OcrTemplate }">
+    <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Create Template</ng-container>
+  </button>
+</pngx-page-header>
+
+<ul class="list-group">
+
+  <li class="list-group-item">
+    <div class="row">
+      <div class="col" i18n>Name</div>
+      <div class="col d-none d-sm-flex" i18n>Document Type</div>
+      <div class="col d-none d-sm-flex" i18n>Zones</div>
+      <div class="col" i18n>Status</div>
+      <div class="col" i18n>Actions</div>
+    </div>
+  </li>
+
+  @if (loading && templates.length === 0) {
+    <li class="list-group-item">
+      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+      <ng-container i18n>Loading...</ng-container>
+    </li>
+  }
+
+  @for (t of templates; track t.id) {
+    <li class="list-group-item">
+      <div class="row fade" [class.show]="show">
+        <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editTemplate(t)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.OcrTemplate)">{{t.name}}</button></div>
+        <div class="col d-flex align-items-center d-none d-sm-flex">{{getDocumentTypeName(t)}}</div>
+        <div class="col d-flex align-items-center d-none d-sm-flex"><code>{{t.zones?.length || 0}}</code></div>
+        <div class="col d-flex align-items-center">
+          <div class="form-check form-switch mb-0">
+            <input type="checkbox" class="form-check-input cursor-pointer" [id]="t.id+'_enable'" [(ngModel)]="t.enabled" (change)="toggleTemplate(t)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }">
+            <label class="form-check-label cursor-pointer" [for]="t.id+'_enable'">
+              <code> @if(t.enabled) { <ng-container i18n>Enabled</ng-container> } @else { <span i18n class="text-muted">Disabled</span> }</code>
+            </label>
+          </div>
+        </div>
+        <div class="col">
+
+          <div class="btn-group d-block d-sm-none">
+            <div ngbDropdown container="body" class="d-inline-block">
+              <button type="button" class="btn btn-link" id="actionsMenuMobile{{t.id}}" (click)="$event.stopPropagation()" ngbDropdownToggle>
+                <i-bs name="three-dots-vertical"></i-bs>
+              </button>
+              <div ngbDropdownMenu aria-labelledby="actionsMenuMobile{{t.id}}">
+                <button (click)="editTemplate(t)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }" ngbDropdownItem i18n>Edit</button>
+                <button (click)="deleteTemplate(t)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.OcrTemplate }" ngbDropdownItem i18n>Delete</button>
+              </div>
+            </div>
+          </div>
+          <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
+            <div class="btn-group">
+              <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editTemplate(t)">
+                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
+              </button>
+              <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.OcrTemplate }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteTemplate(t)">
+                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  }
+  @if (!loading && templates.length === 0) {
+    <li class="list-group-item" [class.show]="show" i18n>No OCR templates defined.</li>
+  }
+</ul>

src-ui/src/app/components/manage/ocr-templates/ocr-templates.component.ts

@@ -0,0 +1,98 @@
+import { Component, OnInit, inject } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { Router } from '@angular/router'
+import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { delay, takeUntil, tap } from 'rxjs'
+import { OcrTemplate } from 'src/app/data/ocr-template'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+@Component({
+  selector: 'pngx-ocr-templates',
+  templateUrl: './ocr-templates.component.html',
+  imports: [
+    PageHeaderComponent,
+    IfPermissionsDirective,
+    FormsModule,
+    NgbDropdownModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class OcrTemplatesComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit
+{
+  private readonly service = inject(OcrTemplateService)
+  private readonly documentTypeService = inject(DocumentTypeService)
+  private readonly router = inject(Router)
+  private readonly modalService = inject(NgbModal)
+  permissionsService = inject(PermissionsService)
+
+  public templates: OcrTemplate[] = []
+  private documentTypeNames: Map<number, string> = new Map()
+
+  ngOnInit() {
+    this.documentTypeService
+      .listAll()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((r) => {
+        this.documentTypeNames = new Map(
+          r.results.map((dt) => [dt.id, dt.name])
+        )
+      })
+    this.reload()
+  }
+
+  reload() {
+    this.loading = true
+    this.service
+      .listAll()
+      .pipe(
+        takeUntil(this.unsubscribeNotifier),
+        tap((r) => (this.templates = r.results)),
+        delay(100)
+      )
+      .subscribe(() => {
+        this.show = true
+        this.loading = false
+      })
+  }
+
+  getDocumentTypeName(t: OcrTemplate): string {
+    return (
+      this.documentTypeNames.get(t.document_type) ?? `${t.document_type ?? ''}`
+    )
+  }
+
+  createTemplate() {
+    this.router.navigate(['/ocr-templates', 'new'])
+  }
+
+  editTemplate(t: OcrTemplate) {
+    this.router.navigate(['/ocr-templates', t.id])
+  }
+
+  toggleTemplate(t: OcrTemplate) {
+    // ngModel has already flipped t.enabled — just persist it.
+    this.service.patch(t).subscribe()
+  }
+
+  deleteTemplate(t: OcrTemplate) {
+    const modal = this.modalService.open(ConfirmDialogComponent)
+    modal.componentInstance.title = $localize`Delete OCR Template`
+    modal.componentInstance.messageBoldPart = t.name
+    modal.componentInstance.message = $localize`Do you really want to delete this OCR template?`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Delete`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      modal.close()
+      this.service.delete(t).subscribe(() => this.reload())
+    })
+  }
+}

src-ui/src/app/data/ocr-template.ts

@@ -0,0 +1,102 @@
+import { ObjectWithId } from './object-with-id'
+
+export type OcrZoneTarget = 'custom_field' | 'title' | 'asn' | 'created'
+
+export const OCR_BUILTIN_TARGETS = [
+  { id: 'title', name: $localize`Title` },
+  { id: 'asn', name: $localize`Archive serial number` },
+  { id: 'created', name: $localize`Date created` },
+]
+
+export interface OcrTemplateZone {
+  id?: number
+  name: string
+  target?: OcrZoneTarget
+  custom_field: number | null
+  page?: number
+  x: number
+  y: number
+  width: number
+  height: number
+  ocr_language: string
+  transform: string
+  date_format?: string
+  validation_regex: string
+  order: number
+  zone_source_width?: number
+  zone_source_height?: number
+}
+
+export const TRANSFORM_OPTIONS = [
+  { id: 'none', name: $localize`None` },
+  { id: 'strip', name: $localize`Strip whitespace` },
+  { id: 'uppercase', name: $localize`Uppercase` },
+  { id: 'lowercase', name: $localize`Lowercase` },
+  { id: 'numeric', name: $localize`Numeric only` },
+  {
+    id: 'strip_punctuation',
+    name: $localize`Remove leading/trailing punctuation`,
+  },
+  { id: 'date', name: $localize`Parse date` },
+  { id: 'qr_code', name: $localize`Read QR/barcode` },
+]
+
+export const OCR_LANGUAGE_OPTIONS = [
+  { id: 'eng', name: $localize`English` },
+  { id: 'deu', name: $localize`German` },
+  { id: 'fra', name: $localize`French` },
+  { id: 'ita', name: $localize`Italian` },
+  { id: 'spa', name: $localize`Spanish` },
+  { id: 'por', name: $localize`Portuguese` },
+  { id: 'nld', name: $localize`Dutch` },
+]
+
+export const DATE_FORMAT_OPTIONS = [
+  { id: '', name: $localize`Auto-detect` },
+  { id: '%d.%m.%Y', name: 'DD.MM.YYYY' },
+  { id: '%Y/%m/%d', name: 'YYYY/MM/DD' },
+  { id: '%d/%m/%Y', name: 'DD/MM/YYYY' },
+]
+
+export interface OcrTemplate extends ObjectWithId {
+  name: string
+  document_type: number
+  sample_document: number | null
+  source_width: number
+  source_height: number
+  enabled: boolean
+  combine_formats?: Record<string, string>
+  created?: string
+  updated?: string
+  zones: OcrTemplateZone[]
+}
+
+export interface ZoneTestRequest {
+  name: string
+  x: number
+  y: number
+  width: number
+  height: number
+  page: number
+  ocr_language: string
+  transform: string
+  date_format?: string
+  validation_regex: string
+  zone_source_width?: number
+  zone_source_height?: number
+}
+
+export interface OcrZoneTestResult {
+  raw_text?: string | null
+  value?: string | null
+  regex?: string
+  regex_match?: boolean | null
+  error?: string
+}
+
+export interface OcrZoneRunResult {
+  template: string
+  zone: string
+  custom_field: string
+  value: string | number | null
+}

src-ui/src/app/services/permissions.service.ts

@@ -28,6 +28,7 @@ export enum PermissionType {
   ShareLink = '%s_sharelink',
   CustomField = '%s_customfield',
   Workflow = '%s_workflow',
+  OcrTemplate = '%s_ocrtemplate',
   ProcessedMail = '%s_processedmail',
   GlobalStatistics = '%s_global_statistics',
   SystemMonitoring = '%s_system_monitoring',

src-ui/src/app/services/rest/document.service.ts

@@ -12,6 +12,7 @@ import {
 import { DocumentMetadata } from 'src/app/data/document-metadata'
 import { DocumentSuggestions } from 'src/app/data/document-suggestions'
 import { FilterRule } from 'src/app/data/filter-rule'
+import { OcrZoneRunResult } from 'src/app/data/ocr-template'
 import { Results, SelectionData } from 'src/app/data/results'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { queryParamsFromFilterRules } from '../../utils/query-params'
@@ -355,6 +356,13 @@ export class DocumentService extends AbstractPaperlessService<Document> {
     })
   }
 
+  runZoneOcr(id: number): Observable<{ results: OcrZoneRunResult[] }> {
+    return this.http.post<{ results: OcrZoneRunResult[] }>(
+      this.getResourceUrl(id, 'run-zone-ocr'),
+      {}
+    )
+  }
+
   rotateDocuments(
     selection: DocumentSelectionQuery,
     degrees: number,

src-ui/src/app/services/rest/ocr-template.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import {
+  OcrTemplate,
+  OcrZoneTestResult,
+  ZoneTestRequest,
+} from '../../data/ocr-template'
+import { AbstractPaperlessService } from './abstract-paperless-service'
+
+export interface QuickCreateFieldResult {
+  id: number
+  name: string
+  data_type: string
+  created: boolean
+}
+
+@Injectable({ providedIn: 'root' })
+export class OcrTemplateService extends AbstractPaperlessService<OcrTemplate> {
+  constructor() {
+    super()
+    this.resourceName = 'ocr_templates'
+  }
+
+  getPageImageUrl(docId: number, page: number): string {
+    return `${this.baseUrl}${this.resourceName}/document-page-image/${docId}/${page}/`
+  }
+
+  testZone(
+    docId: number,
+    zone: ZoneTestRequest
+  ): Observable<OcrZoneTestResult> {
+    return this.http.post<OcrZoneTestResult>(
+      `${this.baseUrl}${this.resourceName}/test-zone/`,
+      { document: docId, zone }
+    )
+  }
+
+  quickCreateField(
+    name: string,
+    dataType: string
+  ): Observable<QuickCreateFieldResult> {
+    return this.http.post<QuickCreateFieldResult>(
+      `${this.baseUrl}${this.resourceName}/quick-create-field/`,
+      { name, data_type: dataType }
+    )
+  }
+}

src-ui/src/main.ts

@@ -79,13 +79,16 @@ import {
   exclamationTriangleFill,
   eye,
   fileEarmark,
+  fileEarmarkBreak,
   fileEarmarkCheck,
   fileEarmarkDiff,
   fileEarmarkFill,
   fileEarmarkLock,
+  fileEarmarkMedical,
   fileEarmarkMinus,
   fileEarmarkPlus,
   fileEarmarkRichtext,
+  fileEarmarkRuled,
   fileText,
   files,
   filter,
@@ -302,13 +305,16 @@ const icons = {
   exclamationTriangleFill,
   eye,
   fileEarmark,
+  fileEarmarkBreak,
   fileEarmarkCheck,
   fileEarmarkDiff,
   fileEarmarkFill,
   fileEarmarkLock,
+  fileEarmarkMedical,
   fileEarmarkMinus,
   fileEarmarkPlus,
   fileEarmarkRichtext,
+  fileEarmarkRuled,
   files,
   fileText,
   filter,