FW ↔ PF-15/16/17 Integration Guide

┌─────────────────────────────────────────────────────────────────┐
│                    Shared Infrastructure                         │
├─────────────────────────────────────────────────────────────────┤
│  FIELD_TYPE_REGISTRY (src/platform/field-config/fieldTypes.ts) │
│  Shared Field Renderers (src/platform/forms/components/fields/)│
└─────────────────────────────────────────────────────────────────┘
         │                                    │
         ▼                                    ▼
┌─────────────────────┐            ┌─────────────────────┐
│   FW Form Builder   │            │  PF-17 Entity Forms │
│  (Standalone Forms) │            │  (Database Entities)│
├─────────────────────┤            ├─────────────────────┤
│ FieldEditorDialog   │            │ DynamicFormRenderer │
│ FormRenderer        │            │ ConfigurableForm    │
│ LookupConfigPanel   │            │ STANDARD_FIELDS     │
│ PicklistConfigPanel │◄──────────►│ PicklistSelector    │
└─────────────────────┘            └─────────────────────┘
         │                                    │
         ▼                                    ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Data Sources                                  │
├─────────────────────┬─────────────────────┬────────────────────┤
│   Static Options    │   Table Lookups     │    PF-15 Picklists │
│   (hardcoded)       │   (fw_lookup_tables)│    (pf_picklists)  │
└─────────────────────┴─────────────────────┴────────────────────┘

import { FIELD_TYPE_REGISTRY, getFWFieldTypes } from '@/platform/field-config/fieldTypes';

// Get all field types (for PF-17)
const allTypes = Object.values(FIELD_TYPE_REGISTRY);

// Get FW-compatible types only (excludes PF-17 specific like 'lookup', 'currency')
const fwTypes = getFWFieldTypes();

// Data source options: 'static' | 'lookup' | 'picklist'
const [dataSource, setDataSource] = useState<'static' | 'lookup' | 'picklist'>('static');

// When picklist is selected, use PicklistConfigPanel
{dataSource === 'picklist' && (
  <PicklistConfigPanel
    picklistName={picklistConfig.picklistName}
    onChange={(name) => setPicklistConfig({ picklistName: name })}
  />
)}

// Picklist data source
settings: {
  dataSource: 'picklist',
  picklistName: 'employment_status'
}

<SelectField
  fieldKey="status"
  label="Status"
  value={formData.status}
  onChange={(val) => handleChange('status', val)}
  // Pick ONE of these data sources:
  staticOptions={[{ label: 'Active', value: 'active' }]}  // OR
  picklistName="employee_status"                           // OR
  lookupSettings={{ lookupTable: 'hr_departments', ... }}
/>

import { mapSectionsToPages, getUniqueSections } from '@/platform/forms/utils/sectionPageMapping';

// Convert entity field configs to form pages
const pages = mapSectionsToPages(fieldConfigs);

// Get unique section names
const sections = getUniqueSections(fieldConfigs);

const config: EntityMappingConfig = {
  targetEntity: 'fa_customers',
  operation: 'create', // 'create' | 'update' | 'upsert'
  lookupField: 'email', // Required for update/upsert
  fieldMappings: [
    { formField: 'full_name', entityField: 'customer_name', isCustomField: false },
    { formField: 'notes', entityField: 'custom_fields.intake_notes', isCustomField: true },
  ],
};

const response = await supabase.functions.invoke('process-entity-mapping', {
  body: {
    submissionData: formSubmission.submission_data,
    actionConfig: config,
    organizationId: org.id,
    userId: user.id,
  },
});

case 'text':
  return (
    <div className="space-y-2">
      <Label>{field.label}</Label>
      <Input value={value} onChange={...} />
    </div>
  );

import { TextField } from '@/platform/forms/components/fields';

case 'text':
  return (
    <TextField
      fieldKey={field.field_key}
      label={field.label}
      value={value}
      onChange={(val) => handleChange(field.field_key, val)}
      required={field.required}
      error={errors[field.field_key]}
    />
  );