@fayz-ai/plugin-forms 0.1.1

package/src/types.ts

@@ -0,0 +1,203 @@
+// ============================================================
+// FORM FIELD TYPES (builder palette)
+// ============================================================
+
+export type FormFieldType =
+  | 'title'      // Section heading (no input)
+  | 'text'       // Texto Simples
+  | 'memo'       // Memorando (multiline plain text)
+  | 'richtext'   // Texto Rico
+  | 'date'       // Data
+  | 'select'     // Seleção
+  | 'radio'      // Radio
+  | 'tags'       // Tags (multiselect chips)
+  | 'checkbox'   // Checkbox
+  | 'image'      // Imagem / Desenho
+  | 'gallery'    // Galeria
+  | 'budget'     // Orçamento (line items + prices)
+
+// ============================================================
+// FORM FIELD DEFINITION (stored in template.schema.fields[])
+// ============================================================
+
+export interface FormFieldDef {
+  id: string
+  type: FormFieldType
+  label: string
+  placeholder?: string
+  required?: boolean
+  /** Start column (0-based) */
+  col: number
+  /** Row index */
+  row: number
+  /** Column span (1–12) */
+  colSpan: number
+  /** Row span (default: 1) */
+  rowSpan?: number
+  /** Options for select / radio / tags */
+  options?: Array<{ label: string; value: string }>
+  /** Type-specific configuration */
+  config?: Record<string, unknown>
+}
+
+export interface FormSchema {
+  fields: FormFieldDef[]
+  layout: { columns: 12 }
+}
+
+// ============================================================
+// TEMPLATE (maps to frm_templates)
+// ============================================================
+
+export type TemplateCategory =
+  | 'anamnesis'
+  | 'evolution'
+  | 'report'
+  | 'contract'
+  | 'general'
+
+export interface FormTemplate {
+  id: string
+  tenantId: string
+  name: string
+  description?: string
+  category: TemplateCategory
+  version: number
+  isCurrent: boolean
+  parentId?: string
+  schema: FormSchema
+  specialty?: string
+  tags: string[]
+  metadata: Record<string, unknown>
+  isActive: boolean
+  isDeleted: boolean
+  createdBy?: string
+  updatedBy?: string
+  createdAt: string
+  updatedAt: string
+}
+
+// ============================================================
+// DOCUMENT (maps to frm_documents)
+// ============================================================
+
+export type DocumentStatus = 'draft' | 'completed' | 'signed' | 'archived'
+
+export interface FormDocument {
+  id: string
+  tenantId: string
+  templateId: string
+  templateName?: string
+  templateCategory?: TemplateCategory
+  personId?: string
+  personName?: string
+  title?: string
+  data: Record<string, unknown>
+  status: DocumentStatus
+  signedAt?: string
+  signedBy?: string
+  notes?: string
+  metadata: Record<string, unknown>
+  isDeleted: boolean
+  createdBy?: string
+  updatedBy?: string
+  createdAt: string
+  updatedAt: string
+  /** Document kind from saas_core.documents */
+  kind?: string
+  /** File URL for image/attachment documents */
+  fileUrl?: string
+  fileName?: string
+  fileSize?: number
+  mimeType?: string
+}
+
+// ============================================================
+// DOCUMENT FILE (maps to frm_document_files)
+// ============================================================
+
+export interface DocumentFile {
+  id: string
+  tenantId: string
+  documentId: string
+  fieldKey: string
+  fileUrl: string
+  fileName?: string
+  fileSize?: number
+  mimeType?: string
+  sortOrder: number
+  metadata: Record<string, unknown>
+  createdAt: string
+}
+
+// ============================================================
+// QUERIES
+// ============================================================
+
+export interface TemplateQuery {
+  category?: TemplateCategory
+  search?: string
+  page?: number
+  pageSize?: number
+}
+
+export interface DocumentQuery {
+  personId?: string
+  templateId?: string
+  status?: DocumentStatus | DocumentStatus[]
+  search?: string
+  page?: number
+  pageSize?: number
+}
+
+export interface PaginatedResult<T> {
+  data: T[]
+  total: number
+}
+
+// ============================================================
+// INPUTS
+// ============================================================
+
+export interface CreateTemplateInput {
+  name: string
+  description?: string
+  category: TemplateCategory
+  schema: FormSchema
+  specialty?: string
+  tags?: string[]
+  metadata?: Record<string, unknown>
+}
+
+export interface UpdateTemplateInput {
+  name?: string
+  description?: string
+  category?: TemplateCategory
+  schema?: FormSchema
+  specialty?: string
+  tags?: string[]
+  metadata?: Record<string, unknown>
+  isActive?: boolean
+}
+
+export interface CreateDocumentInput {
+  templateId?: string
+  personId?: string
+  title?: string
+  data?: Record<string, unknown>
+  status?: DocumentStatus
+  /** Document kind: 'form', 'image', 'attachment', etc. */
+  kind?: string
+  /** File fields for non-form documents */
+  fileUrl?: string
+  fileName?: string
+  fileSize?: number
+  mimeType?: string
+}
+
+export interface UpdateDocumentInput {
+  data?: Record<string, unknown>
+  status?: DocumentStatus
+  title?: string
+  notes?: string
+}

package/src/views/CustomFormsSettingsTab.tsx

@@ -0,0 +1,115 @@
+import React, { useState, useCallback } from 'react'
+import { TemplateListView } from './TemplateListView'
+import { useTranslation } from '@fayz-ai/core'
+import type { PluginRegistryDef } from '@fayz-ai/core'
+import type { CustomFormsConfig } from '../config'
+import type { CustomFormsDataProvider } from '../data/types'
+import type { CustomFormsStore } from '../store'
+import type { FormTemplate } from '../types'
+
+interface CustomFormsSettingsTabProps {
+  config: CustomFormsConfig
+  provider: CustomFormsDataProvider
+  store: CustomFormsStore
+  registries?: PluginRegistryDef[]
+}
+
+export function CustomFormsSettingsTab({ config, provider, store, registries }: CustomFormsSettingsTabProps) {
+  const t = useTranslation()
+  const [builderTemplateId, setBuilderTemplateId] = useState<string | null>(null)
+
+  const handleNew = useCallback(() => {
+    setBuilderTemplateId('__new__')
+  }, [])
+
+  const handleEdit = useCallback((template: FormTemplate) => {
+    setBuilderTemplateId(template.id)
+  }, [])
+
+  const handleBackFromBuilder = useCallback(() => {
+    setBuilderTemplateId(null)
+    // Re-fetch templates to reflect any saves
+    store.getState().fetchTemplates()
+  }, [store])
+
+  // Sync from hash on mount
+  React.useEffect(() => {
+    function checkHash() {
+      const hash = window.location.hash.slice(1) || '/'
+      const builderMatch = hash.match(/\/settings\/custom_forms\/templates\/(.+)/)
+      if (builderMatch && builderMatch[1] !== 'new') {
+        setBuilderTemplateId(builderMatch[1])
+      } else if (builderMatch && builderMatch[1] === 'new') {
+        setBuilderTemplateId('__new__')
+      }
+    }
+    checkHash()
+  }, [])
+
+  // Templates tab content — either list or builder
+  const templatesContent = builderTemplateId ? (
+    <BuilderWrapper
+      templateId={builderTemplateId === '__new__' ? undefined : builderTemplateId}
+      store={store}
+      provider={provider}
+      config={config}
+      onBack={handleBackFromBuilder}
+    />
+  ) : (
+    <TemplateListView
+      store={store}
+      config={config}
+      onEdit={handleEdit}
+      onNew={handleNew}
+    />
+  )
+
+  return (
+    <div style={{ padding: '24px' }}>
+      <div style={{ marginBottom: '16px' }}>
+        <h1 style={{ fontSize: '20px', fontWeight: 600, margin: 0 }}>{t('customForms.settingsTitle')}</h1>
+        <p style={{ color: 'var(--muted-foreground, #6b7280)', margin: '4px 0 0', fontSize: '14px' }}>
+          {t('customForms.settingsSubtitle')}
+        </p>
+      </div>
+      {templatesContent}
+    </div>
+  )
+}
+
+/** Lazy-loads the FormBuilder to avoid pulling @dnd-kit into the initial bundle */
+function BuilderWrapper({
+  templateId,
+  store,
+  provider,
+  config,
+  onBack,
+}: {
+  templateId?: string
+  store: CustomFormsStore
+  provider: CustomFormsDataProvider
+  config: CustomFormsConfig
+  onBack: () => void
+}) {
+  const FormBuilderLazy = React.lazy(() =>
+    import('../components/FormBuilder').then((m) => ({ default: m.FormBuilder })),
+  )
+
+  return (
+    <React.Suspense
+      fallback={
+        <div className="flex items-center justify-center py-12">
+          <div className="h-6 w-6 border-2 border-primary border-t-transparent animate-spin rounded-full" />
+        </div>
+      }
+    >
+      <FormBuilderLazy
+        templateId={templateId}
+        store={store}
+        provider={provider}
+        config={config}
+        onBack={onBack}
+      />
+    </React.Suspense>
+  )
+}

package/src/views/TemplateListView.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { Plus, Pencil, Trash2, FileText, Search } from 'lucide-react'
+import { Button } from '@fayz-ai/ui'
+import { Card, CardContent } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { Input } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { getFormsTenantId } from '../lib/tenant'
+import type { CustomFormsStore } from '../store'
+import type { CustomFormsConfig } from '../config'
+import type { FormTemplate, TemplateCategory } from '../types'
+
+interface TemplateListViewProps {
+  store: CustomFormsStore
+  config: CustomFormsConfig
+  onEdit: (template: FormTemplate) => void
+  onNew: () => void
+}
+
+const CATEGORY_COLORS: Record<TemplateCategory, string> = {
+  anamnesis: 'bg-info-soft text-info-soft-foreground',
+  evolution: 'bg-success-soft text-success-soft-foreground',
+  report: 'bg-magic-soft text-magic-soft-foreground',
+  contract: 'bg-warning-soft text-warning-soft-foreground',
+  general: 'bg-muted text-muted-foreground',
+}
+
+export function TemplateListView({ store, config, onEdit, onNew }: TemplateListViewProps) {
+  const t = useTranslation()
+  const [search, setSearch] = useState('')
+
+  // Subscribe to zustand store reactively
+  const templates = store((s) => s.templates)
+  const loading = store((s) => s.templatesLoading)
+
+  const orgId = getFormsTenantId()
+
+  // Fetch when org is ready or search changes — debounce to avoid Strict Mode double-fire
+  useEffect(() => {
+    if (!orgId) return
+    const timer = setTimeout(() => {
+      store.getState().fetchTemplates({ search: search || undefined })
+    }, 50)
+    return () => clearTimeout(timer)
+  }, [orgId, search])
+
+  const handleDelete = useCallback(async (template: FormTemplate) => {
+    if (!window.confirm(t('customForms.deleteTemplateConfirm'))) return
+    await store.getState().deleteTemplate(template.id)
+  }, [store, t])
+
+  const categoryLabel = (cat: TemplateCategory) =>
+    t(`customForms.category.${cat}`)
+
+  return (
+    <div className="space-y-4">
+      {/* Search + New */}
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1 max-w-xs">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={t('common.search')}
+            className="h-9 pl-8 text-sm"
+          />
+        </div>
+        <Button onClick={onNew} size="sm" className="h-9">
+          <Plus className="h-3.5 w-3.5 mr-1.5" />
+          {t('customForms.newTemplate')}
+        </Button>
+      </div>
+
+      {/* Empty state */}
+      {!loading && templates.length === 0 && (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-16 text-center">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted mb-4">
+              <FileText className="h-5 w-5 text-muted-foreground" />
+            </div>
+            <p className="font-medium">{t('customForms.noTemplates')}</p>
+            <p className="text-sm text-muted-foreground mt-1 max-w-sm">
+              {t('customForms.noTemplatesDescription')}
+            </p>
+            <Button onClick={onNew} size="sm" className="mt-4">
+              <Plus className="h-3.5 w-3.5 mr-1.5" />
+              {t('customForms.newTemplate')}
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Template list */}
+      {templates.length > 0 && (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {templates.map((template) => (
+            <Card
+              key={template.id}
+              className="group cursor-pointer hover:shadow-md transition-shadow"
+              onClick={() => onEdit(template)}
+            >
+              <CardContent className="p-4">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="min-w-0 flex-1">
+                    <h3 className="font-medium text-sm truncate">{template.name}</h3>
+                    {template.description && (
+                      <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                        {template.description}
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button
+                      onClick={(e) => { e.stopPropagation(); onEdit(template) }}
+                      className="p-1.5 rounded-md hover:bg-muted"
+                    >
+                      <Pencil className="h-3.5 w-3.5 text-muted-foreground" />
+                    </button>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); handleDelete(template) }}
+                      className="p-1.5 rounded-md hover:bg-destructive/10"
+                    >
+                      <Trash2 className="h-3.5 w-3.5 text-destructive" />
+                    </button>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 mt-3">
+                  <Badge variant="secondary" className={`text-[10px] ${CATEGORY_COLORS[template.category]}`}>
+                    {categoryLabel(template.category)}
+                  </Badge>
+                  <span className="text-[10px] text-muted-foreground">
+                    {template.schema.fields.length} {t('customForms.builder.fields').toLowerCase()}
+                  </span>
+                  {template.version > 1 && (
+                    <span className="text-[10px] text-muted-foreground">v{template.version}</span>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Loading skeleton */}
+      {loading && (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Card key={i}>
+              <CardContent className="p-4 space-y-3">
+                <div className="h-4 w-2/3 bg-muted animate-pulse rounded" />
+                <div className="h-3 w-full bg-muted animate-pulse rounded" />
+                <div className="flex gap-2">
+                  <div className="h-5 w-16 bg-muted animate-pulse rounded-full" />
+                  <div className="h-5 w-12 bg-muted animate-pulse rounded-full" />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}