@fayz-ai/plugin-forms 0.1.1

package/src/components/PersonDocumentsWidget.tsx

@@ -0,0 +1,220 @@
+import React, { useState, useCallback, useRef } from 'react'
+import { ArrowLeft, Image as ImageIcon, Paperclip } from 'lucide-react'
+import { Badge } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import type { CustomFormsConfig } from '../config'
+import type { CustomFormsDataProvider } from '../data/types'
+import type { CustomFormsStore } from '../store'
+import type { FormDocument, FormTemplate } from '../types'
+import type { DocumentTypeOption } from '../document-types'
+import { DocumentList } from './DocumentList'
+import { DocumentFormDialog } from './DocumentFormDialog'
+import { FormViewer } from './FormViewer'
+import { AddDocumentDropdown } from './AddDocumentDropdown'
+
+interface PersonDocumentsWidgetProps {
+  item: { id: string; name?: string; [key: string]: any }
+  config: CustomFormsConfig
+  provider: CustomFormsDataProvider
+  store: CustomFormsStore
+}
+
+type WidgetView =
+  | { type: 'list' }
+  | { type: 'fill'; template: FormTemplate }
+  | { type: 'view'; document: FormDocument }
+  | { type: 'edit'; document: FormDocument }
+
+export function PersonDocumentsWidget({ item, config, provider, store }: PersonDocumentsWidgetProps) {
+  const t = useTranslation()
+  const [view, setView] = useState<WidgetView>({ type: 'list' })
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [pendingFileAccept, setPendingFileAccept] = useState<string>('*/*')
+
+  const handleDocTypeSelect = useCallback(async (option: DocumentTypeOption) => {
+    // Form template
+    if (option.id.startsWith('template:')) {
+      const templateId = option.id.replace('template:', '')
+      const template = await provider.getTemplateById(templateId)
+      if (template) {
+        setView({ type: 'fill', template })
+      }
+      return
+    }
+
+    // Image — open file picker for images
+    if (option.id === 'core:image') {
+      setPendingFileAccept('image/*')
+      setTimeout(() => fileInputRef.current?.click(), 0)
+      return
+    }
+
+    // Attachment — open file picker for any file
+    if (option.id === 'core:attachment') {
+      setPendingFileAccept('*/*')
+      setTimeout(() => fileInputRef.current?.click(), 0)
+      return
+    }
+  }, [provider])
+
+  const handleFiles = useCallback(async (files: File[]) => {
+    for (const file of files) {
+      const isImage = file.type.startsWith('image/')
+      await store.getState().createDocument({
+        kind: isImage ? 'image' : 'attachment',
+        personId: item.id,
+        title: file.name,
+        fileName: file.name,
+        fileSize: file.size,
+        mimeType: file.type,
+        status: 'completed',
+      })
+    }
+  }, [store, item.id])
+
+  const handleFileInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files ?? [])
+    if (files.length > 0) handleFiles(files)
+    e.target.value = ''
+  }, [handleFiles])
+
+  const handleViewDoc = useCallback((doc: FormDocument) => {
+    setView({ type: 'view', document: doc })
+  }, [])
+
+  const handleEditDoc = useCallback((doc: FormDocument) => {
+    setView({ type: 'edit', document: doc })
+  }, [])
+
+  const handleBack = useCallback(() => {
+    setView({ type: 'list' })
+  }, [])
+
+  const handleSaved = useCallback(() => {
+    setView({ type: 'list' })
+  }, [])
+
+  // Fill form
+  if (view.type === 'fill') {
+    return (
+      <DocumentFormDialog
+        template={view.template}
+        personId={item.id}
+        personName={item.name}
+        provider={provider}
+        store={store}
+        onSaved={handleSaved}
+        onBack={handleBack}
+      />
+    )
+  }
+
+  // View document — route by kind
+  if (view.type === 'view') {
+    const doc = view.document
+    const isForm = doc.kind === 'form' || (!doc.kind && doc.templateId)
+
+    if (!isForm) {
+      // File document (image/attachment) — simple preview
+      return (
+        <FileDocumentViewer document={doc} onBack={handleBack} />
+      )
+    }
+
+    return (
+      <FormViewer
+        document={doc}
+        provider={provider}
+        onBack={handleBack}
+        onEdit={handleEditDoc}
+      />
+    )
+  }
+
+  // Edit document — only for form docs
+  if (view.type === 'edit') {
+    return (
+      <DocumentFormDialog
+        template={null}
+        existingDocument={view.document}
+        personId={item.id}
+        personName={item.name}
+        provider={provider}
+        store={store}
+        onSaved={handleSaved}
+        onBack={handleBack}
+      />
+    )
+  }
+
+  // Default: list with dropdown + drag zone
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold">{t('customForms.documents')}</h3>
+        <AddDocumentDropdown personId={item.id} onSelect={handleDocTypeSelect} />
+      </div>
+      <DocumentList
+        personId={item.id}
+        provider={provider}
+        store={store}
+        onView={handleViewDoc}
+        onFileDrop={handleFiles}
+      />
+      {/* Hidden file input for image/attachment upload */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        className="hidden"
+        accept={pendingFileAccept}
+        multiple
+        onChange={handleFileInputChange}
+      />
+    </div>
+  )
+}
+
+function FileDocumentViewer({ document: doc, onBack }: { document: FormDocument; onBack: () => void }) {
+  const isImage = doc.kind === 'image' || doc.mimeType?.startsWith('image/')
+  const Icon = isImage ? ImageIcon : Paperclip
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onBack}
+          className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+        </button>
+        <div className="flex-1 min-w-0">
+          <h3 className="font-semibold text-sm truncate">{doc.title ?? doc.fileName ?? 'Document'}</h3>
+          <p className="text-xs text-muted-foreground">
+            {new Date(doc.createdAt).toLocaleDateString()}
+          </p>
+        </div>
+        <Badge variant="secondary" className="text-[10px] bg-success/15 text-success">
+          {doc.status === 'completed' ? 'Finalizado' : doc.status}
+        </Badge>
+      </div>
+
+      <div className="rounded-xl border p-6 flex flex-col items-center gap-4">
+        {isImage && doc.fileUrl ? (
+          <img src={doc.fileUrl} alt={doc.fileName ?? ''} className="max-w-full max-h-[500px] rounded-lg object-contain" />
+        ) : (
+          <div className="flex flex-col items-center gap-3 py-8">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+              <Icon className="h-7 w-7 text-muted-foreground" />
+            </div>
+            <p className="text-sm font-medium">{doc.fileName ?? doc.title ?? 'Arquivo'}</p>
+            {doc.fileSize && (
+              <p className="text-xs text-muted-foreground">
+                {(doc.fileSize / 1024).toFixed(1)} KB
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/TemplateSelector.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react'
+import { FileText, Search } from 'lucide-react'
+import { Input } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import type { CustomFormsDataProvider } from '../data/types'
+import type { FormTemplate } from '../types'
+
+interface TemplateSelectorProps {
+  provider: CustomFormsDataProvider
+  onSelect: (template: FormTemplate) => void
+  onClose: () => void
+}
+
+export function TemplateSelector({ provider, onSelect, onClose }: TemplateSelectorProps) {
+  const t = useTranslation()
+  const [templates, setTemplates] = useState<FormTemplate[]>([])
+  const [search, setSearch] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    provider
+      .getTemplates({ search: search || undefined })
+      .then((result) => setTemplates(result.data))
+      .finally(() => setLoading(false))
+  }, [provider, search])
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div
+        className="bg-card rounded-xl border shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="p-4 border-b">
+          <h3 className="font-semibold text-sm mb-3">{t('customForms.selectTemplate')}</h3>
+          <div className="relative">
+            <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"
+              autoFocus
+            />
+          </div>
+        </div>
+
+        {/* List */}
+        <div className="flex-1 overflow-y-auto p-2">
+          {loading && (
+            <div className="flex items-center justify-center py-8">
+              <div className="h-5 w-5 border-2 border-primary border-t-transparent animate-spin rounded-full" />
+            </div>
+          )}
+
+          {!loading && templates.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-8 text-center">
+              <FileText className="h-8 w-8 text-muted-foreground/50 mb-2" />
+              <p className="text-sm text-muted-foreground">{t('customForms.noTemplates')}</p>
+            </div>
+          )}
+
+          {templates.map((tpl) => (
+            <button
+              key={tpl.id}
+              onClick={() => onSelect(tpl)}
+              className="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg hover:bg-muted transition-colors text-left"
+            >
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0">
+                <FileText className="h-4 w-4 text-primary" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium truncate">{tpl.name}</p>
+                <div className="flex items-center gap-2 mt-0.5">
+                  <Badge variant="secondary" className="text-[10px]">
+                    {t(`customForms.category.${tpl.category}`)}
+                  </Badge>
+                  <span className="text-[10px] text-muted-foreground">
+                    {tpl.schema.fields.length} {t('customForms.builder.fields').toLowerCase()}
+                  </span>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/config.ts

@@ -0,0 +1,39 @@
+import type { PluginScope, VerticalId } from '@fayz-ai/core'
+import type { CustomFormsDataProvider } from './data/types'
+
+export interface CustomFormsPluginOptions {
+  scope?: PluginScope
+  verticalId?: VerticalId
+  dataProvider?: CustomFormsDataProvider
+  navSection?: 'main' | 'secondary' | 'settings'
+  navPosition?: number
+  labels?: Partial<CustomFormsLabels>
+}
+
+export interface CustomFormsLabels {
+  pageTitle: string
+  settingsLabel: string
+  templates: string
+  documents: string
+  newTemplate: string
+  addDocument: string
+}
+
+export interface CustomFormsConfig {
+  labels: CustomFormsLabels
+}
+
+const DEFAULT_LABELS: CustomFormsLabels = {
+  pageTitle: 'Custom Forms',
+  settingsLabel: 'Forms & Documents',
+  templates: 'Templates',
+  documents: 'Documents',
+  newTemplate: 'New Template',
+  addDocument: 'Add Document',
+}
+
+export function resolveConfig(options?: CustomFormsPluginOptions): CustomFormsConfig {
+  return {
+    labels: { ...DEFAULT_LABELS, ...options?.labels },
+  }
+}

package/src/data/index.ts

@@ -0,0 +1,3 @@
+export type { CustomFormsDataProvider } from './types'
+export { createMockFormsProvider } from './mock'
+export { createSupabaseFormsProvider } from './supabase'

package/src/data/mock.ts

@@ -0,0 +1,193 @@
+import type { CustomFormsDataProvider } from './types'
+import type {
+  FormTemplate,
+  FormDocument,
+  DocumentFile,
+  TemplateQuery,
+  DocumentQuery,
+  PaginatedResult,
+  CreateTemplateInput,
+  UpdateTemplateInput,
+  CreateDocumentInput,
+  UpdateDocumentInput,
+} from '../types'
+
+function uuid() {
+  return crypto.randomUUID()
+}
+
+function now() {
+  return new Date().toISOString()
+}
+
+export function createMockFormsProvider(): CustomFormsDataProvider {
+  const templates: FormTemplate[] = []
+  const documents: FormDocument[] = []
+  const files: DocumentFile[] = []
+
+  return {
+    // ── Templates ──────────────────────────────────────────
+    async getTemplates(query: TemplateQuery): Promise<PaginatedResult<FormTemplate>> {
+      let filtered = templates.filter((t) => !t.isDeleted && t.isCurrent)
+      if (query.category) {
+        filtered = filtered.filter((t) => t.category === query.category)
+      }
+      if (query.search) {
+        const s = query.search.toLowerCase()
+        filtered = filtered.filter((t) => t.name.toLowerCase().includes(s))
+      }
+      const page = query.page ?? 1
+      const pageSize = query.pageSize ?? 25
+      const start = (page - 1) * pageSize
+      return { data: filtered.slice(start, start + pageSize), total: filtered.length }
+    },
+
+    async getTemplateById(id: string): Promise<FormTemplate | null> {
+      return templates.find((t) => t.id === id && !t.isDeleted) ?? null
+    },
+
+    async createTemplate(input: CreateTemplateInput): Promise<FormTemplate> {
+      const template: FormTemplate = {
+        id: uuid(),
+        tenantId: 'mock-tenant',
+        name: input.name,
+        description: input.description,
+        category: input.category,
+        version: 1,
+        isCurrent: true,
+        schema: input.schema,
+        specialty: input.specialty,
+        tags: input.tags ?? [],
+        metadata: input.metadata ?? {},
+        isActive: true,
+        isDeleted: false,
+        createdAt: now(),
+        updatedAt: now(),
+      }
+      templates.push(template)
+      return template
+    },
+
+    async updateTemplate(id: string, input: UpdateTemplateInput): Promise<FormTemplate> {
+      const idx = templates.findIndex((t) => t.id === id)
+      if (idx === -1) throw new Error('Template not found')
+      const existing = templates[idx]
+      const updated: FormTemplate = {
+        ...existing,
+        ...input,
+        tags: input.tags ?? existing.tags,
+        metadata: input.metadata ?? existing.metadata,
+        schema: input.schema ?? existing.schema,
+        updatedAt: now(),
+      }
+      templates[idx] = updated
+      return updated
+    },
+
+    async deleteTemplate(id: string): Promise<void> {
+      const idx = templates.findIndex((t) => t.id === id)
+      if (idx !== -1) templates[idx] = { ...templates[idx], isDeleted: true }
+    },
+
+    // ── Documents ──────────────────────────────────────────
+    async getDocuments(query: DocumentQuery): Promise<PaginatedResult<FormDocument>> {
+      let filtered = documents.filter((d) => !d.isDeleted)
+      if (query.personId) {
+        filtered = filtered.filter((d) => d.personId === query.personId)
+      }
+      if (query.templateId) {
+        filtered = filtered.filter((d) => d.templateId === query.templateId)
+      }
+      if (query.status) {
+        const statuses = Array.isArray(query.status) ? query.status : [query.status]
+        filtered = filtered.filter((d) => statuses.includes(d.status))
+      }
+      if (query.search) {
+        const s = query.search.toLowerCase()
+        filtered = filtered.filter(
+          (d) =>
+            d.title?.toLowerCase().includes(s) ||
+            d.templateName?.toLowerCase().includes(s),
+        )
+      }
+      filtered.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
+      const page = query.page ?? 1
+      const pageSize = query.pageSize ?? 25
+      const start = (page - 1) * pageSize
+      return { data: filtered.slice(start, start + pageSize), total: filtered.length }
+    },
+
+    async getDocumentById(id: string): Promise<FormDocument | null> {
+      return documents.find((d) => d.id === id && !d.isDeleted) ?? null
+    },
+
+    async createDocument(input: CreateDocumentInput): Promise<FormDocument> {
+      const template = templates.find((t) => t.id === input.templateId)
+      const doc: FormDocument = {
+        id: uuid(),
+        tenantId: 'mock-tenant',
+        templateId: input.templateId ?? '',
+        templateName: template?.name,
+        templateCategory: template?.category,
+        personId: input.personId,
+        title: input.title,
+        data: input.data ?? {},
+        kind: input.kind ?? (input.templateId ? 'form' : 'attachment'),
+        status: input.status ?? 'draft',
+        metadata: {},
+        isDeleted: false,
+        createdAt: now(),
+        updatedAt: now(),
+      }
+      documents.push(doc)
+      return doc
+    },
+
+    async updateDocument(id: string, input: UpdateDocumentInput): Promise<FormDocument> {
+      const idx = documents.findIndex((d) => d.id === id)
+      if (idx === -1) throw new Error('Document not found')
+      const existing = documents[idx]
+      const updated: FormDocument = {
+        ...existing,
+        ...input,
+        data: input.data ?? existing.data,
+        updatedAt: now(),
+      }
+      documents[idx] = updated
+      return updated
+    },
+
+    async deleteDocument(id: string): Promise<void> {
+      const idx = documents.findIndex((d) => d.id === id)
+      if (idx !== -1) documents[idx] = { ...documents[idx], isDeleted: true }
+    },
+
+    // ── Files ──────────────────────────────────────────────
+    async getDocumentFiles(documentId: string): Promise<DocumentFile[]> {
+      return files.filter((f) => f.documentId === documentId)
+    },
+
+    async uploadFile(documentId: string, fieldKey: string, file: File): Promise<DocumentFile> {
+      const docFile: DocumentFile = {
+        id: uuid(),
+        tenantId: 'mock-tenant',
+        documentId,
+        fieldKey,
+        fileUrl: URL.createObjectURL(file),
+        fileName: file.name,
+        fileSize: file.size,
+        mimeType: file.type,
+        sortOrder: files.filter((f) => f.documentId === documentId && f.fieldKey === fieldKey).length,
+        metadata: {},
+        createdAt: now(),
+      }
+      files.push(docFile)
+      return docFile
+    },
+
+    async deleteFile(fileId: string): Promise<void> {
+      const idx = files.findIndex((f) => f.id === fileId)
+      if (idx !== -1) files.splice(idx, 1)
+    },
+  }
+}