sea-dev 1.0.0

package/packages/widget-ng/src/lib/components/sea-data-viewer.component.ts

@@ -0,0 +1,2240 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  signal,
+  inject,
+  ChangeDetectionStrategy,
+  Output,
+  EventEmitter,
+  ViewChild,
+  ElementRef,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { interval, Subscription, Subject } from "rxjs";
+import { debounceTime, distinctUntilChanged } from "rxjs/operators";
+import { LucideAngularModule, LocateFixed, Pencil } from "lucide-angular";
+import { SeaApiClientService } from "../services/api-client.service";
+import { SeaWidgetConfigService } from "../services/config.service";
+import type {
+  Submission,
+  SubmissionData,
+  Field,
+  Document,
+  DataGroup,
+} from "../models/submission.model";
+import { SeaPdfViewerComponent } from "./sea-pdf-viewer.component";
+import { SeaFeedbackModalComponent } from "./sea-feedback-modal.component";
+import { SeaDocumentListComponent } from "./sea-document-list.component";
+
+/**
+ * Data viewer component for displaying extracted submission data
+ * Shows fields with optional editing capabilities
+ */
+@Component({
+  selector: "sea-data-viewer",
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    LucideAngularModule,
+    SeaPdfViewerComponent,
+    SeaFeedbackModalComponent,
+    SeaDocumentListComponent,
+  ],
+  template: `
+    <div class="sea-data-viewer">
+      <div
+        class="sea-data-viewer__content"
+        [class.sea-data-viewer__content--with-sidebar]="selectedDocument()"
+      >
+        @if (loading()) {
+          <div class="sea-data-viewer__loading">
+            <svg class="sea-spinner" viewBox="0 0 24 24">
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                opacity="0.25"
+              />
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-dasharray="63"
+                stroke-dashoffset="50"
+              />
+            </svg>
+            <p>Loading submission data...</p>
+          </div>
+        } @else if (error()) {
+          <div class="sea-data-viewer__error">
+            <svg class="sea-error-icon" viewBox="0 0 24 24">
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              />
+              <path
+                d="M12 8v4m0 4h.01"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+            <p>{{ error()?.message || "Failed to load submission" }}</p>
+          </div>
+        } @else {
+          @if (submissionData(); as data) {
+            <div class="sea-data-viewer__header">
+              <h2 class="sea-data-viewer__title">Data</h2>
+              <div class="sea-data-viewer__meta">
+                <span
+                  class="sea-data-viewer__status"
+                  [class]="'sea-data-viewer__status--' + data.status"
+                >
+                  {{ data.status }}
+                </span>
+                @if (
+                  data.status === "draft" ||
+                  data.status === "final" ||
+                  data.status === "finalised"
+                ) {
+                  <button
+                    class="sea-data-viewer__status-button"
+                    [class.sea-data-viewer__status-button--finalise]="
+                      data.status === 'draft'
+                    "
+                    [class.sea-data-viewer__status-button--draft]="
+                      data.status === 'final' || data.status === 'finalised'
+                    "
+                    [disabled]="updatingStatus()"
+                    (click)="toggleSubmissionStatus()"
+                    type="button"
+                  >
+                    @if (updatingStatus()) {
+                      <svg
+                        class="sea-spinner sea-spinner--small"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="3"
+                          opacity="0.25"
+                        />
+                        <circle
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="3"
+                          stroke-dasharray="63"
+                          stroke-dashoffset="50"
+                        />
+                      </svg>
+                    } @else {
+                      {{
+                        data.status === "draft" ? "Finalise" : "Revert to Draft"
+                      }}
+                    }
+                  </button>
+                }
+              </div>
+            </div>
+
+            @if (data.formGroups && data.formGroups.length > 0) {
+              <div class="sea-data-viewer__groups">
+                @for (formGroup of data.formGroups; track formGroup.id) {
+                  @let dataGroups = getDataGroupsForFormGroup(formGroup.id);
+
+                  <div class="sea-form-group">
+                    <div class="sea-form-group__header">
+                      <div class="sea-form-group__heading">
+                        <h3 class="sea-form-group__title">
+                          {{ formGroup.name }}
+                        </h3>
+                        @if (formGroup.hint) {
+                          <p class="sea-form-group__hint">
+                            {{ formGroup.hint }}
+                          </p>
+                        }
+                      </div>
+                      <div class="sea-form-group__meta">
+                        @if (formGroup.multi) {
+                          <span
+                            >{{ dataGroups.length }}
+                            {{ dataGroups.length === 1 ? "row" : "rows" }}</span
+                          >
+                        } @else {
+                          <span
+                            >{{ formGroup.fields.length }}
+                            {{
+                              formGroup.fields.length === 1 ? "field" : "fields"
+                            }}</span
+                          >
+                        }
+                      </div>
+                    </div>
+
+                    <div class="sea-form-group__body">
+                      @if (formGroup.multi && dataGroups.length > 0) {
+                        <!-- Collection/Array: Render as table -->
+                        <div class="sea-table-wrapper">
+                          <table class="sea-table">
+                            <thead>
+                              <tr>
+                                @for (
+                                  field of formGroup.fields;
+                                  track field.id
+                                ) {
+                                  <th
+                                    [attr.aria-sort]="
+                                      sortState()?.columnId === field.id
+                                        ? sortState()?.direction === 'asc'
+                                          ? 'ascending'
+                                          : 'descending'
+                                        : 'none'
+                                    "
+                                  >
+                                    <button
+                                      type="button"
+                                      class="sea-table__header--sortable"
+                                      (click)="onColumnHeaderClick(field.id)"
+                                      [attr.aria-label]="
+                                        'Sort by ' + field.name
+                                      "
+                                    >
+                                      <span class="sea-table__header-content">
+                                        {{ field.name }}
+                                        @if (getSortIcon(field.id)) {
+                                          <span class="sea-table__sort-icon">{{
+                                            getSortIcon(field.id)
+                                          }}</span>
+                                        }
+                                      </span>
+                                    </button>
+                                  </th>
+                                }
+                              </tr>
+                            </thead>
+                            <tbody>
+                              @for (
+                                group of getSortedDataGroups(dataGroups);
+                                track group.id
+                              ) {
+                                <tr>
+                                  @for (
+                                    field of formGroup.fields;
+                                    track field.id
+                                  ) {
+                                    @let item =
+                                      getItemForField(group, field.id);
+                                    <td
+                                      [class.sea-table__cell--selected]="
+                                        isItemSelected(item)
+                                      "
+                                      [class.sea-table__cell--unsaved]="
+                                        isItemUnsaved(item)
+                                      "
+                                    >
+                                      <div class="sea-table-cell">
+                                        <div class="sea-button-group">
+                                          @if (item?.documentCitationId) {
+                                            <button
+                                              class="sea-icon-button sea-icon-button--table sea-citation-btn"
+                                              (click)="
+                                                onItemCitationClick(item)
+                                              "
+                                              type="button"
+                                              aria-label="View source in document"
+                                            >
+                                              <lucide-icon
+                                                [img]="TargetIcon"
+                                                [size]="12"
+                                              ></lucide-icon>
+                                              <span
+                                                class="sea-tooltip"
+                                                aria-hidden="true"
+                                                >View source</span
+                                              >
+                                            </button>
+                                          }
+                                          @if (editable) {
+                                            <button
+                                              class="sea-icon-button sea-icon-button--table sea-feedback-btn"
+                                              (click)="
+                                                openFeedbackModal(item, field)
+                                              "
+                                              type="button"
+                                              aria-label="Report incorrect extraction"
+                                            >
+                                              <lucide-icon
+                                                [img]="PencilIcon"
+                                                [size]="12"
+                                              ></lucide-icon>
+                                              <span
+                                                class="sea-tooltip"
+                                                aria-hidden="true"
+                                                >Report feedback</span
+                                              >
+                                            </button>
+                                          }
+                                        </div>
+                                        <span class="sea-table-cell__value">{{
+                                          getItemValue(item) || "—"
+                                        }}</span>
+                                      </div>
+                                    </td>
+                                  }
+                                </tr>
+                              }
+                            </tbody>
+                          </table>
+                        </div>
+                      } @else if (!formGroup.multi && dataGroups.length > 0) {
+                        <!-- Single object: Render as key-value pairs -->
+                        @let group = dataGroups[0];
+                        <div class="sea-data-viewer__fields">
+                          @for (field of formGroup.fields; track field.id) {
+                            @let item = getItemForField(group, field.id);
+                            <div
+                              class="sea-field"
+                              [class.sea-field--selected]="isItemSelected(item)"
+                              [class.sea-field--unsaved]="isItemUnsaved(item)"
+                            >
+                              <label
+                                class="sea-field__label"
+                                [attr.for]="'sea-field-' + field.id"
+                                >{{ field.name }}</label
+                              >
+                              <div class="sea-field__input-wrapper">
+                                <div class="sea-button-group">
+                                  @if (item?.documentCitationId) {
+                                    <button
+                                      class="sea-icon-button sea-citation-btn"
+                                      (click)="onItemCitationClick(item)"
+                                      type="button"
+                                      aria-label="View source in document"
+                                    >
+                                      <lucide-icon
+                                        [img]="TargetIcon"
+                                        [size]="12"
+                                      ></lucide-icon>
+                                      <span
+                                        class="sea-tooltip"
+                                        aria-hidden="true"
+                                        >View source</span
+                                      >
+                                    </button>
+                                  }
+                                  @if (editable) {
+                                    <button
+                                      class="sea-icon-button sea-feedback-btn"
+                                      (click)="openFeedbackModal(item, field)"
+                                      type="button"
+                                      aria-label="Report incorrect extraction"
+                                    >
+                                      <lucide-icon
+                                        [img]="PencilIcon"
+                                        [size]="12"
+                                      ></lucide-icon>
+                                      <span
+                                        class="sea-tooltip"
+                                        aria-hidden="true"
+                                        >Report feedback</span
+                                      >
+                                    </button>
+                                  }
+                                </div>
+                                <input
+                                  type="text"
+                                  class="sea-field__input"
+                                  [attr.id]="'sea-field-' + field.id"
+                                  [value]="getItemValue(item)"
+                                  (input)="onValueChange(item, $event)"
+                                  placeholder="Empty"
+                                />
+                              </div>
+                            </div>
+                          }
+                        </div>
+                      } @else {
+                        <div
+                          class="sea-data-viewer__empty sea-data-viewer__empty--group"
+                        >
+                          <p>No data extracted for this group yet</p>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+              </div>
+            } @else if (isProcessing()) {
+              <div class="sea-data-viewer__processing">
+                <div class="sea-processing-indicator">
+                  <svg class="sea-spinner" viewBox="0 0 24 24">
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="3"
+                      opacity="0.25"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="3"
+                      stroke-dasharray="63"
+                      stroke-dashoffset="50"
+                    />
+                  </svg>
+                  <div class="sea-processing-indicator__content">
+                    <h3 class="sea-processing-indicator__title">
+                      Processing Document
+                    </h3>
+                    <p class="sea-processing-indicator__message">
+                      Your document is being analyzed and data is being
+                      extracted. This may take a few moments depending on
+                      document complexity.
+                    </p>
+                    <p class="sea-processing-indicator__status">
+                      <span class="sea-processing-indicator__pulse"></span>
+                      Checking for updates automatically...
+                    </p>
+                  </div>
+                </div>
+              </div>
+            } @else {
+              <div class="sea-data-viewer__empty">
+                <p>No data extracted yet</p>
+              </div>
+            }
+          }
+        }
+      </div>
+
+      @if (selectedDocument() || showDocumentList()) {
+        <div
+          class="sea-data-viewer__resize-handle"
+          (mousedown)="onResizeStart($event)"
+        ></div>
+        <div
+          class="sea-data-viewer__sidebar"
+          [style.flex-basis.px]="sidebarWidth()"
+        >
+          @if (selectedDocument()) {
+            <sea-pdf-viewer
+              [document]="selectedDocument()!"
+              [selectedCitationId]="selectedCitationId()"
+              (closed)="closePdfViewer()"
+              (citationClicked)="onPdfCitationClick($event)"
+            ></sea-pdf-viewer>
+          } @else if (showDocumentList()) {
+            <sea-document-list
+              [documents]="submissionData()?.documents || []"
+              (documentClicked)="onDocumentSelected($event)"
+            ></sea-document-list>
+          }
+        </div>
+      }
+
+      <sea-feedback-modal
+        [fieldName]="feedbackFieldName()"
+        [fieldHint]="feedbackFieldHint()"
+        [extractedValue]="feedbackExtractedValue()"
+        [submissionItemId]="feedbackSubmissionItemId()"
+        (feedbackSubmitted)="onFeedbackSubmitted($event)"
+      ></sea-feedback-modal>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        --sea-color-surface: #ffffff;
+        --sea-color-surface-muted: #f8fafc;
+        --sea-color-border: #e2e8f0;
+        --sea-color-border-strong: #cbd5e1;
+        --sea-color-text: #0f172a;
+        --sea-color-text-muted: #64748b;
+        --sea-color-brand-50: #f8fafc;
+        --sea-color-brand-100: #f1f5f9;
+        --sea-color-brand-200: #e2e8f0;
+        --sea-color-brand-500: #64748b;
+        --sea-color-brand-600: #475569;
+        --sea-color-brand-700: #334155;
+        --sea-color-success-100: #dcfce7;
+        --sea-color-success-600: #059669;
+        --sea-color-warning-100: #fef3c7;
+        --sea-color-warning-600: #b45309;
+        --sea-color-error-100: #fee2e2;
+        --sea-color-error-600: #b91c1c;
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+
+      .sea-data-viewer {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        gap: 0;
+        height: 100%;
+        width: 100%;
+        max-width: 100%;
+        background: var(--sea-color-surface);
+        border: none;
+        border-radius: 0;
+        overflow: hidden;
+        box-shadow: none;
+        transition: none;
+      }
+
+      .sea-data-viewer__content {
+        flex: 1 1 0;
+        min-width: 0;
+        max-height: 100%;
+        padding: 0.5rem;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+
+      .sea-data-viewer__content--with-sidebar {
+        flex: 1 1 0;
+        min-width: 200px;
+        border-right: 1px solid var(--sea-color-border);
+      }
+
+      .sea-data-viewer__resize-handle {
+        width: 1px;
+        min-height: 100%;
+        background: #cbd5e1;
+        cursor: col-resize;
+        position: relative;
+        flex-shrink: 0;
+        transition: background-color 0.2s ease;
+        z-index: 10;
+      }
+
+      .sea-data-viewer__resize-handle:hover,
+      .sea-data-viewer__resize-handle:active {
+        background: #3b82f6;
+      }
+
+      .sea-data-viewer__resize-handle::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -4px;
+        right: -4px;
+        bottom: 0;
+      }
+
+      .sea-data-viewer__sidebar {
+        min-width: 200px;
+        max-width: calc(100% - 200px);
+        max-height: 100%;
+        background: var(--sea-color-surface);
+        overflow-y: auto;
+        overflow-x: hidden;
+        display: flex;
+        flex-direction: column;
+        flex: 0 1 auto;
+        border-left: 1px solid var(--sea-color-border);
+      }
+
+      .sea-data-viewer__loading,
+      .sea-data-viewer__error {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 3rem 1.5rem;
+        gap: 1.25rem;
+        color: var(--sea-color-text-muted);
+      }
+
+      .sea-data-viewer__error svg {
+        color: var(--sea-color-error-600);
+      }
+
+      .sea-spinner {
+        width: 3rem;
+        height: 3rem;
+        animation: rotate 1.5s linear infinite;
+        color: var(--sea-color-brand-600);
+      }
+
+      @keyframes rotate {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .sea-error-icon {
+        width: 3rem;
+        height: 3rem;
+      }
+
+      .sea-data-viewer__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 1rem;
+        margin-bottom: 1rem;
+        padding-bottom: 0.75rem;
+        border-bottom: 1px solid var(--sea-color-border);
+      }
+
+      .sea-data-viewer__title {
+        margin: 0;
+        font-size: 1.5rem;
+        line-height: 1.4;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        color: var(--sea-color-text);
+      }
+
+      .sea-data-viewer__meta {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 1rem;
+        flex-wrap: wrap;
+        font-size: 0.875rem;
+        color: var(--sea-color-text-muted);
+      }
+
+      .sea-data-viewer__status {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        padding: 0.35rem 0.85rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: capitalize;
+        background: var(--sea-color-brand-50);
+        color: var(--sea-color-brand-700);
+        border: 1px solid rgba(148, 163, 184, 0.15);
+      }
+
+      .sea-data-viewer__status--pending {
+        background: var(--sea-color-warning-100);
+        color: var(--sea-color-warning-600);
+        border-color: rgba(180, 83, 9, 0.18);
+      }
+
+      .sea-data-viewer__status--processing {
+        background: var(--sea-color-brand-100);
+        color: var(--sea-color-brand-600);
+        border-color: rgba(148, 163, 184, 0.2);
+      }
+
+      .sea-data-viewer__status--completed,
+      .sea-data-viewer__status--finalised {
+        background: var(--sea-color-success-100);
+        color: var(--sea-color-success-600);
+        border-color: rgba(5, 150, 105, 0.25);
+      }
+
+      .sea-data-viewer__status--failed {
+        background: var(--sea-color-error-100);
+        color: var(--sea-color-error-600);
+        border-color: rgba(185, 28, 28, 0.2);
+      }
+
+      .sea-data-viewer__status--draft {
+        background: var(--sea-color-brand-50);
+        color: var(--sea-color-brand-700);
+        border-color: rgba(148, 163, 184, 0.18);
+      }
+
+      .sea-data-viewer__status-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        border-radius: 0.375rem;
+        border: 1px solid transparent;
+        font-size: 0.875rem;
+        font-weight: 500;
+        letter-spacing: 0;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      }
+
+      .sea-data-viewer__status-button:focus-visible {
+        outline: 2px solid rgba(148, 163, 184, 0.35);
+        outline-offset: 3px;
+      }
+
+      .sea-data-viewer__status-button:disabled {
+        opacity: 0.65;
+        cursor: not-allowed;
+        box-shadow: none;
+      }
+
+      .sea-data-viewer__status-button--finalise {
+        background: var(--sea-color-brand-600);
+        color: #ffffff;
+      }
+
+      .sea-data-viewer__status-button--finalise:hover:not(:disabled) {
+        background: var(--sea-color-brand-700);
+      }
+
+      .sea-data-viewer__status-button--draft {
+        background: var(--sea-color-surface);
+        color: var(--sea-color-text);
+        border-color: var(--sea-color-border);
+      }
+
+      .sea-data-viewer__status-button--draft:hover:not(:disabled) {
+        background: var(--sea-color-surface-muted);
+      }
+
+      .sea-spinner--small {
+        width: 18px;
+        height: 18px;
+      }
+
+      .sea-data-viewer__groups {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .sea-form-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        background: var(--sea-color-surface);
+        border: 1px solid var(--sea-color-border);
+        border-radius: 0.5rem;
+        box-shadow:
+          0 1px 3px 0 rgba(0, 0, 0, 0.1),
+          0 1px 2px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+        transition: none;
+      }
+
+      .sea-form-group__header {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 1rem;
+        padding: 1rem 1.5rem;
+        background: var(--sea-color-surface);
+        border-bottom: 1px solid var(--sea-color-border);
+      }
+
+      .sea-form-group__heading {
+        display: flex;
+        flex-direction: column;
+        gap: 0.35rem;
+      }
+
+      .sea-form-group__title {
+        margin: 0;
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--sea-color-text);
+      }
+
+      .sea-form-group__hint {
+        margin: 0;
+        font-size: 0.875rem;
+        color: var(--sea-color-text-muted);
+      }
+
+      .sea-form-group__meta {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+
+      .sea-form-group__meta span {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.35rem 0.85rem;
+        border-radius: 9999px;
+        border: 1px solid var(--sea-color-border);
+        background: var(--sea-color-surface);
+        color: var(--sea-color-text-muted);
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+      }
+
+      .sea-form-group__body {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        padding: 0;
+        background: var(--sea-color-surface);
+      }
+
+      .sea-table-wrapper {
+        width: 100%;
+        overflow-x: auto;
+        background: var(--sea-color-surface);
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      .sea-data-viewer__content--with-sidebar .sea-table-wrapper {
+        max-width: 100%;
+      }
+
+      .sea-table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        font-size: 0.875rem;
+      }
+
+      .sea-table thead {
+        background: rgba(248, 250, 252, 0.6);
+        border-bottom: 1px solid var(--sea-color-border);
+      }
+
+      .sea-table th {
+        padding: 0.75rem 1rem;
+        text-align: left;
+        font-weight: 500;
+        color: var(--sea-color-text-muted);
+        font-size: 0.875rem;
+        letter-spacing: 0;
+        text-transform: none;
+        white-space: nowrap;
+      }
+
+      .sea-table th:first-child {
+        padding-left: 1.5rem;
+      }
+
+      .sea-table th:last-child {
+        padding-right: 1.5rem;
+      }
+
+      .sea-table__header--sortable {
+        border: none;
+        background: transparent;
+        font: inherit;
+        color: inherit;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        padding: 0;
+        transition: color 0.2s ease;
+      }
+
+      .sea-table__header--sortable:hover,
+      .sea-table th[aria-sort="ascending"] .sea-table__header--sortable,
+      .sea-table th[aria-sort="descending"] .sea-table__header--sortable {
+        color: var(--sea-color-brand-600);
+      }
+
+      .sea-table__header--sortable:focus-visible {
+        outline: 2px solid rgba(148, 163, 184, 0.35);
+        outline-offset: 4px;
+        border-radius: 9999px;
+      }
+
+      .sea-table__header-content {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+      }
+
+      .sea-table__sort-icon {
+        font-size: 0.75rem;
+        color: var(--sea-color-brand-500);
+      }
+
+      .sea-table tbody tr {
+        transition: background-color 0.2s ease;
+      }
+
+      .sea-table tbody tr:hover {
+        background: var(--sea-color-brand-50);
+      }
+
+      .sea-table td {
+        padding: 0.75rem 1rem;
+        border-top: 1px solid var(--sea-color-border);
+        color: var(--sea-color-text);
+      }
+
+      .sea-table td:first-child {
+        padding-left: 1.5rem;
+      }
+
+      .sea-table td:last-child {
+        padding-right: 1.5rem;
+      }
+
+      .sea-table__cell--selected {
+        background: linear-gradient(to right, #fdf2f8 0%, #fce7f3 100%);
+        box-shadow: inset 0 0 0 1.5px rgba(236, 72, 153, 0.2);
+        border-radius: 0.375rem;
+      }
+
+      .sea-table__cell--unsaved {
+        background: var(--sea-color-warning-100);
+        box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.35);
+      }
+
+      .sea-table-cell {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        min-height: 32px;
+      }
+
+      .sea-table-cell__value {
+        padding-left: 0.25rem;
+        color: var(--sea-color-text);
+        line-height: 1.5;
+      }
+
+      .sea-data-viewer__fields {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+      }
+
+      .sea-field {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        padding: 0.75rem 1rem;
+        border-top: 1px solid var(--sea-color-border);
+        background: var(--sea-color-surface);
+        transition: background-color 0.15s ease;
+      }
+
+      .sea-field:first-of-type {
+        border-top: none;
+      }
+
+      .sea-field:hover,
+      .sea-field:focus-within {
+        background: #f8fafc;
+      }
+
+      .sea-field--selected {
+        background: linear-gradient(to right, #fdf2f8 0%, #fce7f3 100%);
+        box-shadow: inset 0 0 0 1.5px rgba(236, 72, 153, 0.2);
+        border-radius: 0.5rem;
+      }
+
+      .sea-field--unsaved {
+        background: var(--sea-color-warning-100);
+        box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.3);
+      }
+
+      .sea-field__label {
+        flex-basis: 28%;
+        max-width: 28%;
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--sea-color-text);
+      }
+
+      .sea-field__input-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex: 1;
+        min-height: 42px;
+      }
+
+      .sea-field__input {
+        flex: 1;
+        padding: 0.5rem 0;
+        background: transparent;
+        border: none;
+        font-size: 0.95rem;
+        color: var(--sea-color-text);
+        transition:
+          border-color 0.2s ease,
+          box-shadow 0.2s ease;
+      }
+
+      .sea-field__input::placeholder {
+        color: rgba(100, 116, 139, 0.8);
+      }
+
+      .sea-field__input:focus {
+        outline: none;
+      }
+
+      .sea-field--unsaved .sea-field__input {
+        border-color: var(--sea-color-warning-600);
+        color: var(--sea-color-warning-600);
+      }
+
+      .sea-table-cell__input {
+        width: 100%;
+        padding: 0.4rem 0.25rem;
+        background: transparent;
+        border: none;
+        border-bottom: 1px solid transparent;
+        font-size: 0.875rem;
+        color: var(--sea-color-text);
+        transition:
+          border-color 0.2s ease,
+          box-shadow 0.2s ease;
+      }
+
+      .sea-table-cell__input:hover {
+        border-bottom-color: var(--sea-color-border);
+      }
+
+      .sea-table-cell__input:focus {
+        outline: none;
+        border-bottom-color: var(--sea-color-brand-600);
+        box-shadow: 0 1px 0 0 var(--sea-color-brand-600);
+      }
+
+      .sea-button-group {
+        display: flex;
+        flex-direction: row;
+        gap: 0.25rem;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .sea-icon-button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.75rem;
+        height: 1.75rem;
+        min-width: 1.75rem;
+        border-radius: 0.5rem;
+        border: none;
+        background: transparent;
+        color: #64748b;
+        cursor: pointer;
+        transition:
+          background-color 0.2s ease,
+          color 0.2s ease,
+          transform 0.15s ease;
+        opacity: 1;
+        transform: none;
+        pointer-events: auto;
+      }
+
+      .sea-icon-button svg {
+        width: 13px;
+        height: 13px;
+      }
+
+      .sea-icon-button--table {
+        width: 20px;
+        height: 20px;
+        min-width: 20px;
+      }
+
+      .sea-icon-button:hover,
+      .sea-icon-button:focus-visible {
+        background: #f8fafc;
+        color: #0f172a;
+        transform: scale(1.05);
+      }
+
+      .sea-icon-button:focus-visible {
+        outline: 2px solid rgba(148, 163, 184, 0.35);
+        outline-offset: 2px;
+        /* Reveal when keyboard focusing the button */
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+
+      .sea-feedback-btn {
+        color: #94a3b8;
+      }
+
+      .sea-feedback-btn svg {
+        color: currentColor;
+      }
+
+      .sea-feedback-btn:hover,
+      .sea-feedback-btn:focus-visible {
+        background: rgba(148, 163, 184, 0.15);
+        box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3);
+        color: #64748b;
+      }
+
+      .sea-tooltip {
+        position: absolute;
+        bottom: calc(100% + 0.5rem);
+        left: 50%;
+        transform: translate(-50%, 0.25rem);
+        padding: 0.35rem 0.5rem;
+        border-radius: 8px;
+        background: rgba(15, 23, 42, 0.95);
+        color: #ffffff;
+        font-size: 0.7rem;
+        font-weight: 600;
+        letter-spacing: 0.03em;
+        white-space: nowrap;
+        box-shadow: 0 20px 35px rgba(15, 23, 42, 0.28);
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 0.15s ease,
+          transform 0.15s ease;
+        pointer-events: none;
+        z-index: 20;
+      }
+
+      .sea-tooltip::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border-width: 6px;
+        border-style: solid;
+        border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
+      }
+
+      .sea-icon-button:hover .sea-tooltip,
+      .sea-icon-button:focus-visible .sea-tooltip {
+        opacity: 1;
+        visibility: visible;
+        transform: translate(-50%, 0);
+      }
+
+      .sea-data-viewer__empty {
+        padding: 3rem 1.5rem;
+        border-radius: 16px;
+        border: 1px dashed var(--sea-color-border);
+        background: var(--sea-color-surface);
+        text-align: center;
+        color: var(--sea-color-text-muted);
+        font-size: 0.95rem;
+      }
+
+      .sea-data-viewer__empty--group {
+        background: rgba(248, 250, 252, 0.35);
+      }
+
+      .sea-data-viewer__processing {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3.5rem 1.5rem;
+      }
+
+      .sea-processing-indicator {
+        display: flex;
+        align-items: center;
+        gap: 1.75rem;
+        padding: 1.75rem 2rem;
+        border-radius: 18px;
+        background: linear-gradient(
+          135deg,
+          rgba(248, 250, 252, 0.45),
+          rgba(255, 255, 255, 0.9)
+        );
+        border: 1px solid rgba(148, 163, 184, 0.18);
+        box-shadow: 0 24px 55px rgba(15, 23, 42, 0.12);
+      }
+
+      .sea-processing-indicator__content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .sea-processing-indicator__title {
+        margin: 0;
+        font-size: 1.15rem;
+        font-weight: 600;
+        color: var(--sea-color-text);
+      }
+
+      .sea-processing-indicator__message {
+        margin: 0;
+        font-size: 0.9rem;
+        color: var(--sea-color-text-muted);
+      }
+
+      .sea-processing-indicator__status {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.85rem;
+        color: var(--sea-color-brand-700);
+        font-weight: 600;
+      }
+
+      .sea-processing-indicator__pulse {
+        display: inline-flex;
+        width: 10px;
+        height: 10px;
+        border-radius: 9999px;
+        background: var(--sea-color-brand-600);
+        box-shadow: 0 0 0 0 rgba(71, 85, 105, 0.6);
+        animation: seaPulse 1.4s ease-in-out infinite;
+      }
+
+      @keyframes seaPulse {
+        0% {
+          box-shadow: 0 0 0 0 rgba(71, 85, 105, 0.6);
+        }
+        70% {
+          box-shadow: 0 0 0 10px rgba(71, 85, 105, 0);
+        }
+        100% {
+          box-shadow: 0 0 0 0 rgba(71, 85, 105, 0);
+        }
+      }
+
+      @media (max-width: 1200px) {
+        .sea-data-viewer {
+          flex-direction: column;
+        }
+
+        .sea-data-viewer__content--with-sidebar {
+          flex: 1 1 auto;
+          border-right: none;
+          border-bottom: 1px solid var(--sea-color-border);
+        }
+
+        .sea-data-viewer__sidebar {
+          flex: 0 0 50vh;
+        }
+      }
+
+      @media (max-width: 960px) {
+        .sea-form-group__header {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+
+        .sea-form-group__meta {
+          width: 100%;
+        }
+
+        .sea-form-group__meta span {
+          align-self: flex-start;
+        }
+
+        .sea-field {
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+
+        .sea-field__label {
+          flex-basis: auto;
+          max-width: 100%;
+        }
+
+        .sea-field__input-wrapper {
+          width: 100%;
+        }
+      }
+
+      @media (max-width: 720px) {
+        .sea-data-viewer {
+          padding: 1.5rem;
+        }
+
+        .sea-data-viewer__header {
+          align-items: flex-start;
+        }
+
+        .sea-data-viewer__meta {
+          justify-content: flex-start;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .sea-data-viewer,
+        .sea-data-viewer *,
+        .sea-form-group,
+        .sea-icon-button,
+        .sea-tooltip {
+          transition-duration: 0.01ms !important;
+          animation-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SeaDataViewerComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() submissionId!: string;
+  @Input() editable = false;
+  @Input() hasRecentUpload = false;
+
+  @Output() fieldChanged = new EventEmitter<{ field: Field; value: unknown }>();
+  @Output() citationClicked = new EventEmitter<Field>();
+  @Output() processingComplete = new EventEmitter<void>();
+  /**
+   * Non-blocking error surface for host apps. Emits when an action fails (e.g. save, status update, feedback).
+   */
+  @Output() actionError = new EventEmitter<{
+    action:
+      | "load"
+      | "poll"
+      | "save-value"
+      | "update-status"
+      | "submit-feedback";
+    error: unknown;
+  }>();
+
+  @ViewChild(SeaFeedbackModalComponent)
+  feedbackModal?: SeaFeedbackModalComponent;
+
+  private readonly api = inject(SeaApiClientService);
+  private readonly config = inject(SeaWidgetConfigService);
+  private readonly elementRef = inject(ElementRef);
+  private pollSubscription?: Subscription;
+  private valueChangesSubscription?: Subscription;
+  private submissionDataSubscription?: Subscription;
+
+  protected readonly submission = signal<Submission | null>(null);
+  protected readonly submissionData = signal<SubmissionData | null>(null);
+  protected readonly loading = signal(true);
+  protected readonly error = signal<Error | null>(null);
+  protected readonly isProcessing = signal(false);
+  protected readonly selectedDocument = signal<Document | null>(null);
+  protected readonly selectedCitationId = signal<string | undefined>(undefined);
+  protected readonly selectedItemId = signal<string | undefined>(undefined);
+  protected readonly updatingStatus = signal(false);
+  protected readonly showDocumentList = signal(false);
+
+  // Feedback modal state
+  protected readonly feedbackFieldName = signal<string | undefined>(undefined);
+  protected readonly feedbackFieldHint = signal<string | undefined>(undefined);
+  protected readonly feedbackExtractedValue = signal<any>(null);
+  protected readonly feedbackSubmissionItemId = signal<string | undefined>(
+    undefined,
+  );
+
+  // Inline editing state
+  private valueChanges$ = new Subject<{ itemId: string; value: any }>();
+  protected itemValues = new Map<string, any>();
+  protected unsavedItems = new Set<string>();
+
+  // Table sorting state
+  protected sortState = signal<{
+    columnId: string;
+    direction: "asc" | "desc";
+  } | null>(null);
+
+  // Sidebar resize state
+  protected readonly sidebarWidth = signal<number>(500);
+  private isResizing = false;
+  private resizeStartX = 0;
+  private resizeStartWidth = 0;
+  private resizeContainerWidth = 0;
+
+  // Lucide icons
+  protected readonly TargetIcon = LocateFixed;
+  protected readonly PencilIcon = Pencil;
+
+  ngOnInit(): void {
+    if (!this.submissionId) {
+      this.error.set(new Error("Submission ID is required"));
+      this.loading.set(false);
+      return;
+    }
+
+    // Set up debounced value changes
+    this.valueChangesSubscription = this.valueChanges$
+      .pipe(
+        debounceTime(2000),
+        distinctUntilChanged(
+          (prev, curr) =>
+            prev.itemId === curr.itemId && prev.value === curr.value,
+        ),
+      )
+      .subscribe(({ itemId, value }) => {
+        this.saveItemValue(itemId, value);
+      });
+
+    // Set up resize event listeners
+    this.setupResizeListeners();
+
+    this.loadSubmission();
+    this.startPollingIfProcessing();
+  }
+
+  /**
+   * Set up global mouse event listeners for resizing
+   */
+  private setupResizeListeners(): void {
+    const onMouseMove = (e: MouseEvent) => {
+      if (this.isResizing) {
+        this.onResizeMove(e);
+      }
+    };
+
+    const onMouseUp = () => {
+      if (this.isResizing) {
+        this.onResizeEnd();
+      }
+    };
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+
+    // Store for cleanup
+    this.resizeCleanup = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }
+
+  private resizeCleanup?: () => void;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!("submissionId" in changes)) {
+      return;
+    }
+
+    const change = changes["submissionId"];
+    if (change.firstChange) {
+      return;
+    }
+
+    if (change.previousValue === change.currentValue) {
+      return;
+    }
+
+    this.stopPolling();
+    this.submissionDataSubscription?.unsubscribe();
+    this.submissionDataSubscription = undefined;
+
+    this.resetSubmissionState();
+
+    const nextSubmissionId = change.currentValue as string | undefined;
+    if (!nextSubmissionId) {
+      // Keep behavior neutral when the parent clears the submission ID.
+      // Do not surface an error; just stop loading and remain reset.
+      this.loading.set(false);
+      return;
+    }
+
+    this.loadSubmission();
+  }
+
+  ngOnDestroy(): void {
+    this.stopPolling();
+    this.valueChangesSubscription?.unsubscribe();
+    this.submissionDataSubscription?.unsubscribe();
+    this.resizeCleanup?.();
+  }
+
+  /**
+   * Start resizing the sidebar
+   */
+  protected onResizeStart(event: MouseEvent): void {
+    event.preventDefault();
+    this.isResizing = true;
+    this.resizeStartX = event.clientX;
+    this.resizeStartWidth = this.sidebarWidth();
+
+    const container =
+      this.elementRef.nativeElement.querySelector(".sea-data-viewer");
+    this.resizeContainerWidth = container
+      ? container.clientWidth
+      : window.innerWidth;
+
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }
+
+  /**
+   * Handle resize movement
+   */
+  private onResizeMove(event: MouseEvent): void {
+    if (!this.isResizing) return;
+
+    // Dragging left increases sidebar, dragging right decreases it
+    const deltaX = this.resizeStartX - event.clientX;
+    const newWidth = this.resizeStartWidth + deltaX;
+
+    // Constrain width between 200px and container width minus minimum content width
+    // This ensures the content area always has at least 200px
+    const minWidth = 200;
+    const minContentWidth = 200;
+    const maxWidth = Math.min(
+      this.resizeContainerWidth * 0.8,
+      this.resizeContainerWidth - minContentWidth,
+    );
+    const constrainedWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
+
+    this.sidebarWidth.set(constrainedWidth);
+  }
+
+  /**
+   * End resizing
+   */
+  private onResizeEnd(): void {
+    this.isResizing = false;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }
+
+  /**
+   * Reload submission data (can be called externally after processing completes)
+   */
+  public reloadData(): void {
+    this.loadSubmission();
+  }
+
+  /**
+   * Load submission data from API
+   */
+  private loadSubmission(): void {
+    if (!this.submissionId) {
+      this.loading.set(false);
+      return;
+    }
+
+    this.loading.set(true);
+    this.error.set(null);
+
+    this.submissionDataSubscription?.unsubscribe();
+
+    const submissionId = this.submissionId;
+
+    // Fetch submission data from API
+    this.submissionDataSubscription = this.api
+      .getSubmissionData(submissionId)
+      .subscribe({
+        next: (data) => {
+          if (this.config.debug())
+            console.warn("[SeaDataViewer] Submission data loaded:", {
+              submissionId: data.submissionId,
+              status: data.status,
+              formGroupsCount: data.formGroups?.length ?? 0,
+              groupsCount: data.groups?.length ?? 0,
+            });
+
+          this.submissionData.set(data);
+          this.loading.set(false);
+
+          // Show document list if there are documents and no PDF is selected
+          if (
+            data.documents &&
+            data.documents.length > 0 &&
+            !this.selectedDocument()
+          ) {
+            this.showDocumentList.set(true);
+          }
+
+          // Check if submission is processing
+          const hasGroups = data.groups && data.groups.length > 0;
+          const hasData =
+            hasGroups && data.groups.some((g) => g.items?.length > 0);
+
+          const isCurrentlyProcessing =
+            data.status === "processing" ||
+            data.status === "pending" ||
+            (this.hasRecentUpload && !hasData);
+
+          if (this.config.debug())
+            console.warn("[SeaDataViewer] Processing check:", {
+              status: data.status,
+              hasRecentUpload: this.hasRecentUpload,
+              hasData,
+              isProcessing: isCurrentlyProcessing,
+            });
+
+          this.isProcessing.set(isCurrentlyProcessing);
+
+          // If data has appeared and we were tracking a recent upload, notify parent
+          if (hasData && this.hasRecentUpload) {
+            if (this.config.debug())
+              console.warn(
+                "[SeaDataViewer] Data detected, processing complete!",
+              );
+            this.processingComplete.emit();
+          }
+
+          // Polling is now handled by the upload component
+          // The viewer will reload data when upload emits processingComplete
+          // No need to poll here
+        },
+        error: (err) => {
+          console.error("[SeaDataViewer] Failed to load submission data:", err);
+          this.error.set(err);
+          this.loading.set(false);
+          this.actionError.emit({ action: "load", error: err });
+        },
+      });
+  }
+
+  private resetSubmissionState(): void {
+    this.submission.set(null);
+    this.submissionData.set(null);
+    this.selectedDocument.set(null);
+    this.selectedCitationId.set(undefined);
+    this.selectedItemId.set(undefined);
+    this.showDocumentList.set(false);
+    this.itemValues.clear();
+    this.unsavedItems.clear();
+    this.feedbackFieldName.set(undefined);
+    this.feedbackFieldHint.set(undefined);
+    this.feedbackExtractedValue.set(null);
+    this.feedbackSubmissionItemId.set(undefined);
+    this.isProcessing.set(false);
+    this.updatingStatus.set(false);
+    this.error.set(null);
+  }
+
+  /**
+   * Start polling if submission is processing
+   */
+  private startPollingIfProcessing(): void {
+    const submission = this.submission();
+    if (submission && this.isProcessing()) {
+      this.startPolling();
+    }
+  }
+
+  /**
+   * Start polling for submission updates
+   */
+  private startPolling(): void {
+    // Poll every 5 seconds
+    this.pollSubscription = interval(5000).subscribe(() => {
+      // Refresh submissions list from API using last filters
+      this.api.refreshSubmissions().subscribe({
+        next: () => {
+          // After API call completes, reload from cache
+          this.loadSubmission();
+        },
+        error: (error) => {
+          console.error("Failed to poll submission:", error);
+          this.actionError.emit({ action: "poll", error });
+        },
+      });
+    });
+  }
+
+  /**
+   * Stop polling
+   */
+  private stopPolling(): void {
+    if (this.pollSubscription) {
+      this.pollSubscription.unsubscribe();
+      this.pollSubscription = undefined;
+    }
+  }
+
+  /**
+   * Handle field value change
+   */
+  protected onFieldChange(field: Field, event: Event): void {
+    if (!this.submissionId) {
+      if (this.config.debug())
+        console.warn(
+          "[SeaDataViewer] Cannot update field without submission ID",
+        );
+      return;
+    }
+
+    const input = event.target as HTMLInputElement;
+    const value = this.parseValue(input.value, field.type);
+
+    this.fieldChanged.emit({ field, value });
+
+    // Optimistically update local state
+    const current = this.submission();
+    if (current && current.fields) {
+      const updatedFields = current.fields.map((f) =>
+        f.id === field.id ? { ...f, value } : f,
+      );
+      this.submission.set({ ...current, fields: updatedFields });
+    }
+
+    // Update on server
+    this.api
+      .updateSubmissionField(this.submissionId, field.id, value)
+      .subscribe({
+        error: (error) => {
+          console.error("Failed to update field:", error);
+          // Revert optimistic update
+          this.loadSubmission();
+        },
+      });
+  }
+
+  /**
+   * Get data groups for a form group ID
+   */
+  protected getDataGroupsForFormGroup(formGroupId: string): DataGroup[] {
+    const data = this.submissionData();
+    if (!data?.groups) return [];
+    return data.groups.filter((g) => g.formGroupId === formGroupId);
+  }
+
+  /**
+   * Get data item for a field in a group
+   */
+  protected getItemForField(group: DataGroup, fieldId: string): any {
+    return group.items?.find((item) => item.formField?.id === fieldId);
+  }
+
+  /**
+   * Check if an item is selected
+   */
+  protected isItemSelected(item: any): boolean {
+    const selectedId = this.selectedItemId();
+    if (!selectedId || !item) return false;
+    return item.id === selectedId;
+  }
+
+  /**
+   * Mark a table item as selected when focused
+   */
+  protected onTableItemFocus(item: any): void {
+    if (item) {
+      this.selectedItemId.set(item.id);
+    }
+  }
+
+  /**
+   * Handle citation click from data item
+   */
+  protected onItemCitationClick(item: any): void {
+    if (this.config.debug())
+      console.warn("[SeaDataViewer] Item citation clicked:", {
+        itemId: item.id,
+        documentCitationId: item.documentCitationId,
+        documentExtractionId: item.documentExtractionId,
+      });
+
+    if (!item.documentCitationId) {
+      if (this.config.debug())
+        console.warn("[SeaDataViewer] No citation data for item");
+      return;
+    }
+
+    // Get documents from the already-loaded submission data
+    const data = this.submissionData();
+    if (!data?.documents) {
+      if (this.config.debug())
+        console.warn("[SeaDataViewer] No documents in submission data");
+      return;
+    }
+
+    const documents = data.documents;
+    if (this.config.debug())
+      console.warn("[SeaDataViewer] Looking for document with citation:", {
+        citationId: item.documentCitationId,
+        documentCount: documents.length,
+      });
+
+    // Find document by citation ID
+    const document = documents.find((doc) =>
+      doc.citations?.some((c: any) => c.id === item.documentCitationId),
+    );
+
+    if (document) {
+      if (this.config.debug())
+        console.warn("[SeaDataViewer] Found document:", {
+          documentId: (document as any).documentId,
+          name: document.name,
+        });
+
+      // Map the document to the expected Document type
+      this.selectedDocument.set({
+        id: (document as any).documentId,
+        documentExtractionId: document.documentExtractionId,
+        name: document.name,
+        url: document.url,
+        urlExpiry: document.urlExpiry,
+        citations: document.citations,
+        status: document.status,
+      });
+      this.selectedCitationId.set(item.documentCitationId);
+      this.selectedItemId.set(item.id);
+      this.showDocumentList.set(false);
+    } else {
+      if (this.config.debug())
+        console.warn(
+          "[SeaDataViewer] No document found with citation ID:",
+          item.documentCitationId,
+        );
+    }
+  }
+
+  /**
+   * Handle citation click from PDF viewer
+   */
+  protected onPdfCitationClick(citationId: string): void {
+    if (this.config.debug())
+      console.warn("[SeaDataViewer] PDF citation clicked:", citationId);
+
+    // Find the data item with this citation ID
+    const data = this.submissionData();
+    if (!data?.groups) {
+      if (this.config.debug())
+        console.warn("[SeaDataViewer] No data groups available");
+      return;
+    }
+
+    // Search through all groups and items to find the one with this citation
+    for (const group of data.groups) {
+      for (const item of group.items || []) {
+        if (item.documentCitationId === citationId) {
+          if (this.config.debug())
+            console.warn("[SeaDataViewer] Found matching item:", item.id);
+          this.selectedItemId.set(item.id);
+          this.selectedCitationId.set(citationId);
+          return;
+        }
+      }
+    }
+
+    if (this.config.debug())
+      console.warn(
+        "[SeaDataViewer] No item found with citation ID:",
+        citationId,
+      );
+  }
+
+  protected closePdfViewer(): void {
+    this.selectedDocument.set(null);
+    this.selectedCitationId.set(undefined);
+    this.selectedItemId.set(undefined);
+
+    // Show document list again if there are documents
+    const data = this.submissionData();
+    if (data?.documents && data.documents.length > 0) {
+      this.showDocumentList.set(true);
+    }
+  }
+
+  /**
+   * Handle document selection from document list
+   */
+  protected onDocumentSelected(document: Document): void {
+    if (this.config.debug())
+      console.warn("[SeaDataViewer] Document selected from list:", document);
+
+    this.selectedDocument.set(document);
+    this.showDocumentList.set(false);
+  }
+
+  /**
+   * Toggle submission status between draft and final
+   */
+  protected toggleSubmissionStatus(): void {
+    const data = this.submissionData();
+    if (!data || !this.submissionId) {
+      return;
+    }
+
+    const currentStatus = data.status;
+    const normalizedStatus =
+      currentStatus === "finalised" ? "final" : currentStatus;
+    if (normalizedStatus !== "draft" && normalizedStatus !== "final") {
+      if (this.config.debug())
+        console.warn(
+          "[SeaDataViewer] Unsupported submission status for toggle:",
+          currentStatus,
+        );
+      return;
+    }
+
+    const newStatus = normalizedStatus === "draft" ? "final" : "draft";
+
+    if (this.config.debug())
+      console.warn(
+        "[SeaDataViewer] Updating submission status from",
+        currentStatus,
+        "to",
+        newStatus,
+      );
+    if (this.config.debug())
+      console.warn("[SeaDataViewer] Submission ID:", this.submissionId);
+
+    this.updatingStatus.set(true);
+
+    this.api.updateSubmissionStatus(this.submissionId, newStatus).subscribe({
+      next: (submission) => {
+        if (this.config.debug())
+          console.warn(
+            "[SeaDataViewer] Submission status updated successfully:",
+            submission,
+          );
+        this.updatingStatus.set(false);
+
+        // Update the local submission data
+        const currentData = this.submissionData();
+        if (currentData) {
+          this.submissionData.set({
+            ...currentData,
+            status: newStatus,
+          });
+        }
+      },
+      error: (err) => {
+        console.error(
+          "[SeaDataViewer] Failed to update submission status:",
+          err,
+        );
+        this.updatingStatus.set(false);
+        this.actionError.emit({ action: "update-status", error: err });
+      },
+    });
+  }
+
+  /**
+   * Get HTML input type for field type
+   */
+  protected getInputType(fieldType: string): string {
+    switch (fieldType) {
+      case "number":
+      case "currency":
+        return "number";
+      case "email":
+        return "email";
+      case "phone":
+        return "tel";
+      case "url":
+        return "url";
+      case "date":
+        return "date";
+      default:
+        return "text";
+    }
+  }
+
+  /**
+   * Format field value for display
+   */
+  protected formatValue(value: unknown): string {
+    if (value === null || value === undefined) return "";
+    if (typeof value === "object") return JSON.stringify(value);
+    return String(value);
+  }
+
+  /**
+   * Parse input value based on field type
+   */
+  private parseValue(value: string, fieldType: string): unknown {
+    switch (fieldType) {
+      case "number":
+      case "currency":
+        return parseFloat(value);
+      case "boolean":
+        return value === "true" || value === "1";
+      case "date":
+        return new Date(value).toISOString();
+      default:
+        return value;
+    }
+  }
+
+  /**
+   * Format date for display
+   */
+  protected formatDate(dateString: string): string {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return "just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+
+    return date.toLocaleDateString();
+  }
+
+  /**
+   * Get item value (from editing state or original value)
+   */
+  protected getItemValue(item: any): any {
+    if (!item) return "";
+    return this.itemValues.has(item.id)
+      ? this.itemValues.get(item.id)
+      : item.value;
+  }
+
+  /**
+   * Check if item is unsaved
+   */
+  protected isItemUnsaved(item: any): boolean {
+    return item ? this.unsavedItems.has(item.id) : false;
+  }
+
+  /**
+   * Handle value change from input
+   */
+  protected onValueChange(item: any, event: Event): void {
+    if (!item) return;
+
+    const input = event.target as HTMLInputElement;
+    const value = input.value;
+
+    this.selectedItemId.set(item.id);
+
+    if (this.config.debug())
+      console.warn(
+        "[SeaDataViewer] Value changed for item:",
+        item.id,
+        "new value:",
+        value,
+      );
+
+    // Update local state
+    this.itemValues.set(item.id, value);
+    this.unsavedItems.add(item.id);
+
+    // Emit to debounced subject
+    this.valueChanges$.next({ itemId: item.id, value });
+  }
+
+  /**
+   * Save item value to API
+   */
+  private saveItemValue(itemId: string, value: any): void {
+    if (!this.submissionId) {
+      if (this.config.debug())
+        console.warn(
+          "[SeaDataViewer] Cannot save item value without submission ID",
+        );
+      return;
+    }
+
+    if (this.config.debug())
+      console.warn("[SeaDataViewer] Saving item value:", itemId, value);
+
+    this.api
+      .updateSubmissionItemValue(this.submissionId, itemId, value)
+      .subscribe({
+        next: () => {
+          if (this.config.debug())
+            console.warn("[SeaDataViewer] Item value saved successfully");
+          this.unsavedItems.delete(itemId);
+          this.itemValues.delete(itemId);
+          this.updateItemValueLocally(itemId, value);
+        },
+        error: (err) => {
+          console.error("[SeaDataViewer] Failed to save item value:", err);
+          this.actionError.emit({ action: "save-value", error: err });
+          // Keep in unsaved state on error
+        },
+      });
+  }
+
+  /**
+   * Update submission data locally so UI reflects latest value
+   */
+  private updateItemValueLocally(itemId: string, value: unknown): void {
+    const data = this.submissionData();
+    if (!data?.groups) {
+      return;
+    }
+
+    const updatedGroups = data.groups.map((group) => ({
+      ...group,
+      items:
+        group.items?.map((item) =>
+          item.id === itemId ? { ...item, value } : item,
+        ) ?? [],
+    }));
+
+    this.submissionData.set({
+      ...data,
+      groups: updatedGroups,
+    });
+  }
+
+  /**
+   * Open feedback modal for a field
+   */
+  protected openFeedbackModal(item: any, field: any): void {
+    if (this.config.debug())
+      console.warn(
+        "[SeaDataViewer] Opening feedback modal for item:",
+        item,
+        "field:",
+        field,
+      );
+
+    if (!item) {
+      if (this.config.debug())
+        console.warn("[SeaDataViewer] Cannot open feedback modal without item");
+      return;
+    }
+
+    // Set the feedback modal state
+    this.feedbackFieldName.set(field?.name);
+    this.feedbackFieldHint.set(field?.hint);
+    this.feedbackExtractedValue.set(item.value);
+    this.feedbackSubmissionItemId.set(item.id);
+
+    // Open the modal using ViewChild
+    setTimeout(() => {
+      this.feedbackModal?.open();
+    }, 0);
+  }
+
+  /**
+   * Handle feedback submission
+   */
+  protected onFeedbackSubmitted(event: {
+    submissionItemId: string;
+    extractedValue: any;
+    correctedValue: string;
+    feedback: string;
+  }): void {
+    if (this.config.debug())
+      console.warn("[SeaDataViewer] Feedback submitted:", event);
+
+    if (!this.submissionId) {
+      if (this.config.debug())
+        console.warn(
+          "[SeaDataViewer] Cannot submit feedback without submission ID",
+        );
+      return;
+    }
+
+    // Call API to submit feedback
+    this.api
+      .submitFieldFeedback(
+        this.submissionId,
+        event.submissionItemId,
+        event.extractedValue,
+        event.correctedValue,
+        event.feedback,
+      )
+      .subscribe({
+        next: () => {
+          if (this.config.debug())
+            console.warn("[SeaDataViewer] Feedback submitted successfully");
+          const corrected = event.correctedValue.trim();
+          if (corrected) {
+            this.unsavedItems.delete(event.submissionItemId);
+            this.itemValues.delete(event.submissionItemId);
+            this.updateItemValueLocally(event.submissionItemId, corrected);
+          }
+          // Reload submission data to ensure everything is in sync
+          this.loadSubmission();
+        },
+        error: (err) => {
+          console.error("[SeaDataViewer] Failed to submit feedback:", err);
+          this.actionError.emit({ action: "submit-feedback", error: err });
+        },
+      });
+  }
+
+  /**
+   * Handle column header click for sorting
+   */
+  protected onColumnHeaderClick(fieldId: string): void {
+    const current = this.sortState();
+
+    // Toggle direction if same column, otherwise start with asc
+    if (current && current.columnId === fieldId) {
+      const newDirection = current.direction === "asc" ? "desc" : "asc";
+      this.sortState.set({ columnId: fieldId, direction: newDirection });
+    } else {
+      this.sortState.set({ columnId: fieldId, direction: "asc" });
+    }
+  }
+
+  /**
+   * Get sorted data groups based on current sort state
+   */
+  protected getSortedDataGroups(groups: DataGroup[]): DataGroup[] {
+    const sort = this.sortState();
+
+    if (!sort) {
+      return groups;
+    }
+
+    // Create a copy to avoid mutating the original
+    return [...groups].sort((a, b) => {
+      const itemA = this.getItemForField(a, sort.columnId);
+      const itemB = this.getItemForField(b, sort.columnId);
+
+      const valueA = this.getItemValue(itemA);
+      const valueB = this.getItemValue(itemB);
+
+      // Handle empty values (always sort to bottom)
+      if (!valueA && !valueB) return 0;
+      if (!valueA) return 1;
+      if (!valueB) return -1;
+
+      // Try numeric comparison first
+      const numA = parseFloat(valueA);
+      const numB = parseFloat(valueB);
+
+      let comparison = 0;
+      if (!isNaN(numA) && !isNaN(numB)) {
+        comparison = numA - numB;
+      } else {
+        // String comparison
+        comparison = String(valueA).localeCompare(String(valueB));
+      }
+
+      return sort.direction === "asc" ? comparison : -comparison;
+    });
+  }
+
+  /**
+   * Get sort icon for a field
+   */
+  protected getSortIcon(fieldId: string): string {
+    const sort = this.sortState();
+    if (!sort || sort.columnId !== fieldId) return "";
+    return sort.direction === "asc" ? "↑" : "↓";
+  }
+}