sea-dev 1.0.0

package/tests/crm-viewer-app/angular.json

@@ -0,0 +1,114 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "crm-viewer-app": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "inlineTemplate": true,
+          "inlineStyle": true,
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@ngx-env/builder:application",
+          "options": {
+            "outputPath": "dist/crm-viewer-app",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/ngx-extended-pdf-viewer/assets",
+                "output": "/assets"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@ngx-env/builder:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "crm-viewer-app:build:production"
+            },
+            "development": {
+              "buildTarget": "crm-viewer-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "port": 4201
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

package/tests/crm-viewer-app/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@sea/crm-viewer-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --port 4201",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/cdk": "^19.2.0",
+    "@angular/common": "^19.2.0",
+    "@angular/compiler": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/platform-browser": "^19.2.0",
+    "@angular/platform-browser-dynamic": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "@sea-dev/widget-ng": "workspace:*",
+    "ngx-extended-pdf-viewer": "^25.5.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.2.19",
+    "@angular/cli": "^19.2.19",
+    "@angular/compiler-cli": "^19.2.0",
+    "@ngx-env/builder": "^20.1.1",
+    "ngx-env": "^0.1.0",
+    "typescript": "~5.7.2"
+  }
+}

package/tests/crm-viewer-app/src/app/app.component.ts

@@ -0,0 +1,534 @@
+import {
+  Component,
+  OnInit,
+  AfterViewInit,
+  ElementRef,
+  inject,
+  signal,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  SeaPdfViewerComponent,
+  SeaApiClientService,
+  SeaWidgetConfigService,
+} from '@sea-dev/widget-ng';
+import { CitationService } from './citation.service';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, SeaPdfViewerComponent],
+  template: `
+    <!-- CRM Page Layout -->
+    <div class="sf-header">
+      <div class="sf-logo">LOS</div>
+      <div class="sf-nav">
+        <div class="sf-nav-item">Home</div>
+        <div class="sf-nav-item active">Accounts</div>
+        <div class="sf-nav-item">Contacts</div>
+        <div class="sf-nav-item">Opportunities</div>
+        <div class="sf-nav-item">Financial Accounts</div>
+      </div>
+      <div class="sf-user-menu">
+        <span>John Smith</span>
+      </div>
+    </div>
+
+    <div class="sf-sub-nav">
+      <div class="sf-breadcrumb">Home > Accounts > Enterprise Financial Group</div>
+      <input type="text" class="sf-search" placeholder="Search LOS..." />
+    </div>
+
+    <div class="sf-container">
+      <!-- Page Header -->
+      <div class="sf-page-header">
+        <div class="sf-page-title">
+          <div class="sf-icon">🏢</div>
+          <div class="sf-title-text">
+            <h1>Enterprise Financial Group</h1>
+            <div class="subtitle">Account • Customer - Direct</div>
+          </div>
+        </div>
+        <div class="sf-actions">
+          <button class="sf-button">Follow</button>
+          <button class="sf-button">Edit</button>
+          <button class="sf-button-primary">New Opportunity</button>
+        </div>
+      </div>
+
+      <!-- Main Content -->
+      <div class="sf-content">
+        <!-- Left Column -->
+        <div>
+          <!-- Account Details with clickable fields -->
+          <div class="sf-section">
+            <div class="sf-section-header">Account Details (Click fields to view citations)</div>
+            <div class="sf-section-body">
+              <div class="sf-field-row">
+                <div class="sf-field">
+                  <div class="sf-field-label">Account Name</div>
+                  <div
+                    class="sf-field-value"
+                    data-sea-field="account-name"
+                    (click)="onFieldClick('account-name')"
+                  >
+                    Enterprise Financial Group
+                  </div>
+                </div>
+                <div class="sf-field">
+                  <div class="sf-field-label">Account Owner</div>
+                  <div class="sf-field-value">
+                    <a href="#" class="sf-link">John Smith</a>
+                  </div>
+                </div>
+              </div>
+              <div class="sf-field-row">
+                <div class="sf-field">
+                  <div class="sf-field-label">Type</div>
+                  <div class="sf-field-value">Customer - Direct</div>
+                </div>
+                <div class="sf-field">
+                  <div class="sf-field-label">Industry</div>
+                  <div class="sf-field-value">Financial Services</div>
+                </div>
+              </div>
+              <div class="sf-field-row">
+                <div class="sf-field">
+                  <div class="sf-field-label">Phone</div>
+                  <div class="sf-field-value">(415) 555-0123</div>
+                </div>
+                <div class="sf-field">
+                  <div class="sf-field-label">Annual Revenue</div>
+                  <div
+                    class="sf-field-value"
+                    data-sea-field="annual-revenue"
+                    (click)="onFieldClick('annual-revenue')"
+                  >
+                    $45,000,000
+                  </div>
+                </div>
+              </div>
+              <div class="sf-field-row">
+                <div class="sf-field">
+                  <div class="sf-field-label">Billing Address</div>
+                  <div
+                    class="sf-field-value"
+                    data-sea-field="billing-address"
+                    (click)="onFieldClick('billing-address')"
+                  >
+                    123 Market Street<br />San Francisco, CA 94105
+                  </div>
+                </div>
+                <div class="sf-field">
+                  <div class="sf-field-label">Website</div>
+                  <div class="sf-field-value">
+                    <a href="#" class="sf-link">www.enterprisefinancial.com</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Current Assets Section -->
+          <div class="sf-section" style="margin-top: 15px;">
+            <div class="sf-section-header">Current Assets (Click fields to view source documents)</div>
+            <div class="sf-section-body">
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
+                <!-- Cash -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    CASH
+                  </label>
+                  <input
+                    type="text"
+                    data-sea-field="Cash"
+                    [value]="fieldValues()['Cash'] || ''"
+                    placeholder="$0.00"
+                    (click)="onFieldClick('Cash')"
+                    title="Money on hand and in checking accounts available for daily operations. (COA: L0005)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px;"
+                  />
+                </div>
+
+                <!-- Certificate of Deposit (No Citation) -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    CERTIFICATE OF DEPOSIT
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="$0.00"
+                    title="Bank-issued deposit with a fixed date of maturity, not immediately accessible. (COA: L0006)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px; opacity: 0.6; cursor: not-allowed; background: #f9fafb;"
+                    disabled
+                  />
+                </div>
+
+                <!-- Marketable Securities (No Citation) -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    MARKETABLE SECURITIES
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="$0.00"
+                    title="Short-term financial instruments (stocks, bonds, etc.) that can be converted to cash quickly. (COA: L0007)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px; opacity: 0.6; cursor: not-allowed; background: #f9fafb;"
+                    disabled
+                  />
+                </div>
+
+                <!-- Accounts Receivable -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    ACCOUNTS RECEIVABLE (A/R)
+                  </label>
+                  <input
+                    type="text"
+                    data-sea-field="Accounts Receivable (A/R)"
+                    [value]="fieldValues()['Accounts Receivable (A/R)'] || ''"
+                    placeholder="$0.00"
+                    (click)="onFieldClick('Accounts Receivable (A/R)')"
+                    title="Amounts billed to customers for goods or services delivered, awaiting payment. (COA: L0010)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px;"
+                  />
+                </div>
+
+                <!-- Notes Receivable – Current (No Citation) -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    NOTES RECEIVABLE – CURRENT
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="$0.00"
+                    title="Short-term promissory notes owed to the business, due within one year. (COA: L0015)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px; opacity: 0.6; cursor: not-allowed; background: #f9fafb;"
+                    disabled
+                  />
+                </div>
+
+                <!-- Inventory – Raw Materials (No Citation) -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    INVENTORY – RAW MATERIALS
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="$0.00"
+                    title="Stock of basic materials to be used in manufacturing or production. (COA: L0020)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px; opacity: 0.6; cursor: not-allowed; background: #f9fafb;"
+                    disabled
+                  />
+                </div>
+
+                <!-- Inventory – Work in Progress (No Citation) -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    INVENTORY – WORK IN PROGRESS
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="$0.00"
+                    title="Goods partway through the manufacturing process but not yet finished. (COA: L0021)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px; opacity: 0.6; cursor: not-allowed; background: #f9fafb;"
+                    disabled
+                  />
+                </div>
+
+                <!-- Inventory – Finished Goods (No Citation) -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    INVENTORY – FINISHED GOODS
+                  </label>
+                  <input
+                    type="text"
+                    placeholder="$0.00"
+                    title="Completed products ready for sale but not yet sold. (COA: L0022)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px; opacity: 0.6; cursor: not-allowed; background: #f9fafb;"
+                    disabled
+                  />
+                </div>
+
+                <!-- Prepaid Expenses -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    PREPAID EXPENSES
+                  </label>
+                  <input
+                    type="text"
+                    data-sea-field="Prepaid Expenses"
+                    [value]="fieldValues()['Prepaid Expenses'] || ''"
+                    placeholder="$0.00"
+                    (click)="onFieldClick('Prepaid Expenses')"
+                    title="Payments made in advance for goods or services to be received in the future. (COA: L0030)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px;"
+                  />
+                </div>
+
+                <!-- Other Current Assets -->
+                <div>
+                  <label style="display: block; font-size: 11px; color: #706e6b; margin-bottom: 4px; font-weight: 600;">
+                    OTHER CURRENT ASSETS
+                  </label>
+                  <input
+                    type="text"
+                    data-sea-field="Other Current Assets"
+                    [value]="fieldValues()['Other Current Assets'] || ''"
+                    placeholder="$0.00"
+                    (click)="onFieldClick('Other Current Assets')"
+                    title="Miscellaneous current assets not classified elsewhere, expected to be liquidated within a year. (COA: L0055)"
+                    style="width: 100%; padding: 8px; border: 1px solid #d8dde6; border-radius: 3px; font-size: 13px;"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right Column - Info Panel -->
+        <div class="sf-sidebar">
+          <div class="sf-section">
+            <div class="sf-section-header">Quick Actions</div>
+            <div class="sf-section-body">
+              <p style="font-size: 12px; color: #706e6b; margin-bottom: 12px;">
+                Click on any field with a 📄 icon to view its source document citation in the PDF viewer.
+              </p>
+              <button
+                class="sf-button"
+                style="width: 100%; margin-bottom: 8px;"
+                (click)="togglePdfViewer()"
+              >
+                {{ pdfViewerVisible() ? 'Close' : 'Open' }} PDF Viewer
+              </button>
+              @if (selectedCitation()) {
+                <div style="margin-top: 12px; padding: 12px; background: #f0f8ff; border-radius: 4px;">
+                  <div style="font-size: 11px; font-weight: 600; margin-bottom: 4px;">
+                    Active Citation
+                  </div>
+                  <div style="font-size: 12px; color: #706e6b;">
+                    Field: {{ selectedCitation()!.fieldId }}<br />
+                    Citation ID: {{ selectedCitation()!.citationId }}<br />
+                    Page: {{ selectedCitation()!.pageNumber }}
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- PDF Viewer Overlay -->
+    @if (pdfViewerVisible()) {
+      <div class="pdf-viewer-overlay visible" (click)="closePdfViewer()"></div>
+      <div class="pdf-viewer-container visible">
+        @if (activeDocument()) {
+          <sea-pdf-viewer
+            [document]="activeDocument()"
+            [selectedCitationId]="selectedCitation()?.citationId"
+            (closed)="closePdfViewer()"
+            (citationClicked)="onCitationClicked($event)"
+          ></sea-pdf-viewer>
+        } @else {
+          <div style="padding: 20px; text-align: center;">
+            <p>No document selected</p>
+          </div>
+        }
+      </div>
+    }
+  `,
+  styles: [],
+})
+export class AppComponent implements OnInit, AfterViewInit {
+  private readonly citationService = inject(CitationService);
+  private readonly elementRef = inject(ElementRef);
+  private readonly apiClient = inject(SeaApiClientService);
+  private readonly widgetConfig = inject(SeaWidgetConfigService);
+
+  // Submission ID to load
+  private readonly SUBMISSION_ID = 'txlrja5bnij8vzrj2sb5s';
+
+  // Expose service signals to template
+  protected readonly pdfViewerVisible = this.citationService.pdfViewerVisible;
+  protected readonly selectedCitation = this.citationService.selectedCitation;
+  protected readonly activeDocument = this.citationService.activeDocument;
+
+  // Field values from API
+  protected fieldValues = signal<Record<string, string>>({});
+
+  ngOnInit(): void {
+    console.log('[CRM Viewer] App initialized');
+
+    // Set API key from environment variable
+    // Create a .env file with NG_APP_SEA_API_KEY=your-api-key
+    const apiKey =
+      (import.meta as any).env?.NG_APP_SEA_API_KEY || 'sk-sea-YOUR_API_KEY';
+
+    if (apiKey === 'sk-sea-YOUR_API_KEY') {
+      console.warn(
+        '[CRM Viewer] Using placeholder API key. Set NG_APP_SEA_API_KEY in .env file for real data.'
+      );
+    }
+
+    this.widgetConfig.setApiKey(apiKey);
+
+    // Load submission data
+    this.loadSubmissionData();
+  }
+
+  /**
+   * Load submission data from API and register citations
+   */
+  private loadSubmissionData(): void {
+    console.log('[CRM Viewer] Loading submission data:', this.SUBMISSION_ID);
+
+    this.apiClient.getSubmissionData(this.SUBMISSION_ID).subscribe({
+      next: (data) => {
+        console.log('[CRM Viewer] Submission data loaded:', data);
+        this.processCitations(data);
+      },
+      error: (error) => {
+        console.error('[CRM Viewer] Error loading submission data:', error);
+        // Fall back to placeholder data
+        console.log('[CRM Viewer] Using placeholder citations');
+      },
+    });
+  }
+
+  /**
+   * Process submission data and register citations
+   */
+  private processCitations(data: any): void {
+    console.log('[CRM Viewer] Processing citations from submission data');
+    console.log('[CRM Viewer] Full data:', data);
+
+    // Clear existing placeholder citations
+    this.citationService.clearCitations();
+
+    // Store documents first (they contain the citations)
+    if (data.documents && data.documents.length > 0) {
+      console.log('[CRM Viewer] Storing documents:', data.documents.length);
+      this.citationService.setDocuments(data.documents);
+    }
+
+    // Process data groups to get field values and their citations
+    const values: Record<string, string> = {};
+
+    data.groups?.forEach((group: any) => {
+      console.log('[CRM Viewer] Processing data group:', group.formGroupId);
+
+      group.items?.forEach((item: any) => {
+        if (item.formField) {
+          // Store the field value
+          if (item.value !== null && item.value !== undefined) {
+            values[item.formField.name] = item.value;
+          }
+
+          if (item.documentCitationId) {
+            console.log('[CRM Viewer] Found citation for field:', {
+              fieldName: item.formField.name,
+              citationId: item.documentCitationId,
+              extractionId: item.documentExtractionId,
+              value: item.value,
+            });
+
+            // Find the document that contains this citation
+            const document = data.documents?.find((doc: any) =>
+              doc.documentExtractionId === item.documentExtractionId
+            );
+
+            if (document) {
+              // Find the specific citation in the document
+              const citation = document.citations?.find(
+                (cit: any) => cit.id === item.documentCitationId
+              );
+
+              if (citation) {
+                // Get the first page number from the bounding regions
+                const firstRegion = Object.values(citation.boundingRegions || {})[0] as any;
+                const pageNumber = firstRegion?.[0]?.pageNumber || 1;
+
+                this.citationService.registerCitation({
+                  fieldId: item.formField.name,
+                  citationId: item.documentCitationId,
+                  documentId: document.documentId, // Use documentId field from API
+                  pageNumber: pageNumber,
+                });
+
+                console.log('[CRM Viewer] Registered citation:', {
+                  fieldId: item.formField.name,
+                  documentId: document.documentId,
+                  documentName: document.name,
+                  pageNumber: pageNumber,
+                });
+              }
+            }
+          }
+        }
+      });
+    });
+
+    // Update field values signal
+    this.fieldValues.set(values);
+    console.log('[CRM Viewer] Field values:', values);
+    console.log('[CRM Viewer] Citation processing complete');
+  }
+
+  ngAfterViewInit(): void {
+    // Set up click listeners for any fields with data-sea-field attribute
+    this.setupFieldListeners();
+  }
+
+  /**
+   * Set up click listeners for all fields with data-sea-field attributes
+   */
+  private setupFieldListeners(): void {
+    const fields = this.elementRef.nativeElement.querySelectorAll(
+      '[data-sea-field]'
+    );
+    fields.forEach((field: HTMLElement) => {
+      const fieldId = field.getAttribute('data-sea-field');
+      if (fieldId && this.citationService.hasCitation(fieldId)) {
+        // Add a visual indicator that this field has a citation
+        field.style.cursor = 'pointer';
+        field.title = 'Click to view citation in PDF';
+      }
+    });
+  }
+
+  /**
+   * Handle field click - activate the citation
+   */
+  protected onFieldClick(fieldId: string): void {
+    console.log('[CRM Viewer] Field clicked:', fieldId);
+    this.citationService.activateCitationWithDocument(fieldId);
+  }
+
+  /**
+   * Handle citation clicked in PDF viewer
+   */
+  protected onCitationClicked(citationId: string): void {
+    console.log('[CRM Viewer] Citation clicked in PDF:', citationId);
+    // You could highlight the corresponding field in the form here
+  }
+
+  /**
+   * Close the PDF viewer
+   */
+  protected closePdfViewer(): void {
+    this.citationService.closePdfViewer();
+  }
+
+  /**
+   * Toggle PDF viewer visibility
+   */
+  protected togglePdfViewer(): void {
+    if (this.pdfViewerVisible()) {
+      this.closePdfViewer();
+    } else {
+      // Open with the first current assets field
+      this.onFieldClick('Cash');
+    }
+  }
+}