@fayz-ai/saas 0.1.6

package/src/crud/archetypes/PersonPicker.tsx

@@ -0,0 +1,299 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { Search, Plus, X, User, Loader2, Check } from 'lucide-react'
+import { Input } from '@fayz-ai/ui'
+import { Button } from '@fayz-ai/ui'
+import { getSupabaseClientOptional } from '@fayz-ai/core'
+import { useOrganizationStore } from '../../org'
+
+interface Person {
+  id: string
+  name: string
+  email?: string
+  phone?: string
+  kind: string
+}
+
+interface PersonPickerProps {
+  value?: string | null
+  onChange: (personId: string | null, person?: Person) => void
+  personKind?: string
+  label?: string
+  placeholder?: string
+  onPersonData?: (data: { name: string; phone?: string; email?: string }) => void
+}
+
+export function PersonPicker({
+  value,
+  onChange,
+  personKind = 'customer',
+  label = 'Person',
+  placeholder = 'Search or type a name to add...',
+  onPersonData,
+}: PersonPickerProps) {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<Person[]>([])
+  const [searching, setSearching] = useState(false)
+  const [selected, setSelected] = useState<Person | null>(null)
+  const [showCreate, setShowCreate] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // New person form
+  const [newPhone, setNewPhone] = useState('')
+  const [newEmail, setNewEmail] = useState('')
+
+  const tenantId = useOrganizationStore((s) => s.currentOrg?.id)
+
+  // Load selected person on mount
+  useEffect(() => {
+    if (value && !selected) {
+      const supabase = getSupabaseClientOptional() as any
+      if (!supabase) return
+      supabase.schema('saas_core')
+        .from('persons')
+        .select('id, name, email, phone, kind')
+        .eq('id', value)
+        .single()
+        .then(({ data }: any) => {
+          if (data) setSelected(data as Person)
+        })
+    }
+  }, [value])
+
+  // Close on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+        setShowCreate(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  const doSearch = useCallback(async (term: string) => {
+    if (!term.trim() || !tenantId) { setResults([]); return }
+    setSearching(true)
+    try {
+      const supabase = getSupabaseClientOptional() as any
+      if (!supabase) return
+      const { data } = await supabase.schema('saas_core')
+        .from('persons')
+        .select('id, name, email, phone, kind')
+        .eq('tenant_id', tenantId)
+        .ilike('name', `%${term}%`)
+        .limit(6)
+      setResults((data ?? []) as Person[])
+    } finally {
+      setSearching(false)
+    }
+  }, [tenantId])
+
+  const handleInput = (val: string) => {
+    setQuery(val)
+    setShowCreate(false)
+    if (!open) setOpen(true)
+    if (searchTimer.current) clearTimeout(searchTimer.current)
+    searchTimer.current = setTimeout(() => doSearch(val), 250)
+  }
+
+  const handleSelect = (person: Person) => {
+    setSelected(person)
+    onChange(person.id, person)
+    onPersonData?.({ name: person.name, phone: person.phone, email: person.email })
+    setOpen(false)
+    setQuery('')
+    setResults([])
+    setShowCreate(false)
+  }
+
+  const handleStartCreate = () => {
+    setShowCreate(true)
+    setNewPhone('')
+    setNewEmail('')
+  }
+
+  const handleCreate = async () => {
+    if (!query.trim() || !tenantId) return
+    setCreating(true)
+    try {
+      const supabase = getSupabaseClientOptional() as any
+      if (!supabase) return
+      const { data, error } = await supabase.schema('saas_core')
+        .from('persons')
+        .insert({
+          tenant_id: tenantId,
+          kind: personKind,
+          name: query.trim(),
+          phone: newPhone.trim() || null,
+          email: newEmail.trim() || null,
+          is_active: true,
+        })
+        .select('id, name, email, phone, kind')
+        .single()
+      if (error) throw error
+      handleSelect(data as Person)
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setSelected(null)
+    setQuery('')
+    onChange(null)
+    onPersonData?.({ name: '', phone: '', email: '' })
+    setTimeout(() => inputRef.current?.focus(), 50)
+  }
+
+  const noResults = query.trim().length > 1 && !searching && results.length === 0
+
+  return (
+    <div ref={containerRef} className="relative">
+      {/* Selected state */}
+      {selected && !open ? (
+        <button
+          type="button"
+          onClick={() => { setOpen(true); setQuery(''); setTimeout(() => inputRef.current?.focus(), 50) }}
+          className="flex items-center gap-3 w-full rounded-lg border px-3 py-2.5 text-left hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors"
+        >
+          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <User className="h-4 w-4" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate">{selected.name}</p>
+            <p className="text-xs text-muted-foreground truncate">
+              {[selected.phone, selected.email].filter(Boolean).join(' · ') || 'No contact info'}
+            </p>
+          </div>
+          <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+            <span className="text-[10px] text-muted-foreground">Change</span>
+            <button type="button" onClick={handleClear} className="p-1 text-muted-foreground hover:text-destructive rounded">
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </button>
+      ) : (
+        /* Search input */
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => handleInput(e.target.value)}
+            onFocus={() => { if (query) setOpen(true) }}
+            placeholder={placeholder}
+            className="flex h-10 w-full rounded-lg border border-input bg-background pl-10 pr-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          />
+          {searching && <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />}
+        </div>
+      )}
+
+      {/* Dropdown */}
+      {open && (query.trim().length > 0 || showCreate) && (
+        <div className="fayz-glass-surface absolute z-50 mt-1 w-full rounded-lg border bg-popover shadow-lg overflow-hidden">
+          {/* Results */}
+          {results.length > 0 && (
+            <div className="max-h-52 overflow-y-auto">
+              {results.map((person) => (
+                <button
+                  key={person.id}
+                  type="button"
+                  onClick={() => handleSelect(person)}
+                  className="flex items-center gap-3 w-full px-3 py-2.5 text-left hover:bg-muted/50 transition-colors"
+                >
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted">
+                    <User className="h-3.5 w-3.5 text-muted-foreground" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <p className="text-sm font-medium truncate">{person.name}</p>
+                      <span className="inline-flex items-center rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground capitalize shrink-0">
+                        {person.kind}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground truncate">
+                      {[person.phone, person.email].filter(Boolean).join(' · ')}
+                    </p>
+                  </div>
+                  {person.id === value && <Check className="h-4 w-4 text-primary shrink-0" />}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* No results — prompt to create */}
+          {noResults && !showCreate && (
+            <button
+              type="button"
+              onClick={handleStartCreate}
+              className="flex items-center gap-3 w-full px-3 py-3 text-left hover:bg-muted/50 transition-colors border-t border-dashed"
+            >
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+                <Plus className="h-4 w-4" />
+              </div>
+              <div>
+                <p className="text-sm font-medium">Add "<span className="text-primary">{query.trim()}</span>"</p>
+                <p className="text-xs text-muted-foreground">Create a new {label.toLowerCase()} with this name</p>
+              </div>
+            </button>
+          )}
+
+          {/* Also show create option when there ARE results */}
+          {results.length > 0 && !showCreate && (
+            <button
+              type="button"
+              onClick={handleStartCreate}
+              className="flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors border-t text-xs text-muted-foreground"
+            >
+              <Plus className="h-3 w-3" />
+              Add "<span className="font-medium text-foreground">{query.trim()}</span>" as new {label.toLowerCase()}
+            </button>
+          )}
+
+          {/* Inline create form */}
+          {showCreate && (
+            <div className="p-3 border-t space-y-3 bg-muted/20">
+              <div className="flex items-center gap-2">
+                <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+                  <Plus className="h-3 w-3" />
+                </div>
+                <p className="text-xs font-medium">New {label}: <span className="text-primary">{query.trim()}</span></p>
+              </div>
+              <div className="grid gap-2 sm:grid-cols-2">
+                <Input
+                  value={newPhone}
+                  onChange={(e) => setNewPhone(e.target.value)}
+                  placeholder="Phone"
+                  className="h-8 text-xs"
+                />
+                <Input
+                  value={newEmail}
+                  onChange={(e) => setNewEmail(e.target.value)}
+                  placeholder="Email"
+                  type="email"
+                  className="h-8 text-xs"
+                />
+              </div>
+              <div className="flex justify-end gap-2">
+                <Button type="button" variant="ghost" size="sm" className="h-7 text-xs" onClick={() => setShowCreate(false)}>
+                  Cancel
+                </Button>
+                <Button type="button" size="sm" className="h-7 text-xs" onClick={handleCreate} disabled={creating}>
+                  {creating ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Check className="h-3 w-3 mr-1" />}
+                  {creating ? 'Saving...' : 'Save & Select'}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/crud/archetypes/ProductDetailTabs.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { BarChart3, Truck, Tag, Clock } from 'lucide-react'
+import { Card, CardContent } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+
+function ComingSoon({ icon: Icon, title, description }: { icon: React.ElementType; title: string; description: string }) {
+  const t = useTranslation()
+  return (
+    <Card>
+      <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted mb-3">
+          <Icon className="h-5 w-5 text-muted-foreground" />
+        </div>
+        <p className="text-sm font-medium">{title}</p>
+        <p className="text-xs text-muted-foreground mt-1 max-w-xs">{description}</p>
+        <Badge variant="secondary" className="mt-3 text-[10px]">{t('crud.archetype.comingSoon')}</Badge>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function InventoryTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={BarChart3}
+      title={t('crud.archetype.inventory.title')}
+      description={t('crud.archetype.inventory.description')}
+    />
+  )
+}
+
+export function SuppliersTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={Truck}
+      title={t('crud.archetype.suppliers.title')}
+      description={t('crud.archetype.suppliers.description')}
+    />
+  )
+}
+
+export function PricingTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={Tag}
+      title={t('crud.archetype.pricing.title')}
+      description={t('crud.archetype.pricing.description')}
+    />
+  )
+}
+
+export function ProductActivityTab() {
+  const t = useTranslation()
+  return (
+    <ComingSoon
+      icon={Clock}
+      title={t('crud.archetype.productActivity.title')}
+      description={t('crud.archetype.productActivity.description')}
+    />
+  )
+}
+
+export const PRODUCT_DETAIL_TABS = [
+  { id: 'inventory', label: 'Inventory', component: InventoryTab },
+  { id: 'suppliers', label: 'Suppliers', component: SuppliersTab },
+  { id: 'pricing', label: 'Pricing', component: PricingTab },
+  { id: 'activity', label: 'Activity', component: ProductActivityTab },
+]

package/src/crud/archetypes/ProductFormLayout.tsx

@@ -0,0 +1,197 @@
+import React from 'react'
+import { Package } from 'lucide-react'
+import { Card, CardContent } from '@fayz-ai/ui'
+import { ActiveToggle } from './ActiveToggle'
+import type { FieldDef, FieldGroup } from '@fayz-ai/core'
+
+interface ProductFormLayoutProps {
+  fields: FieldDef[]
+  fieldGroups: FieldGroup[]
+  values: Record<string, any>
+  onChange: (key: string, val: any) => void
+  renderField: (field: FieldDef, value: any, onChange: (val: any) => void) => React.ReactNode
+}
+
+const PRICING_FIELDS = new Set(['price', 'cost', 'currency', 'unit'])
+const STOCK_FIELDS = new Set(['stock', 'minStock'])
+const SKIP_FIELDS = new Set(['status', 'isActive', 'tags', 'imageUrl', 'name', 'description', 'sku', 'category'])
+
+function FieldItem({ field, value, onChange, renderField, colSpan }: {
+  field: FieldDef; value: any; onChange: (val: any) => void
+  renderField: ProductFormLayoutProps['renderField']; colSpan?: boolean
+}) {
+  return (
+    <div className={`space-y-1.5 ${colSpan ? 'md:col-span-2' : ''}`}>
+      <label className="text-sm font-medium">
+        {field.label}{field.required && <span className="text-destructive ml-0.5">*</span>}
+      </label>
+      {renderField(field, value, onChange)}
+    </div>
+  )
+}
+
+export function ProductFormLayout({ fields, fieldGroups, values, onChange, renderField }: ProductFormLayoutProps) {
+  const nameField = fields.find((f) => f.key === 'name')
+  const descField = fields.find((f) => f.key === 'description')
+  const skuField = fields.find((f) => f.key === 'sku')
+  const categoryField = fields.find((f) => f.key === 'category')
+  const imageField = fields.find((f) => f.key === 'imageUrl')
+  const pricingFields = fields.filter((f) => PRICING_FIELDS.has(f.key))
+  const stockFields = fields.filter((f) => STOCK_FIELDS.has(f.key))
+  const statusField = fields.find((f) => f.key === 'status')
+  const hasActive = fields.some((f) => f.key === 'isActive')
+
+  // Project-specific fields
+  const projectFields = fields.filter((f) => !SKIP_FIELDS.has(f.key) && !PRICING_FIELDS.has(f.key) && !STOCK_FIELDS.has(f.key))
+
+  const groupFieldMap = new Map<string, FieldDef[]>()
+  const ungroupedProject: FieldDef[] = []
+  for (const field of projectFields) {
+    if (field.group) {
+      const existing = groupFieldMap.get(field.group) ?? []
+      existing.push(field)
+      groupFieldMap.set(field.group, existing)
+    } else {
+      ungroupedProject.push(field)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Identity card — image + name + category + active */}
+      <Card>
+        <CardContent className="pt-5">
+          <div className="flex gap-5">
+            {/* Product image or placeholder */}
+            <div className="shrink-0 space-y-2">
+              {values.imageUrl ? (
+                <img src={values.imageUrl} alt="" className="h-24 w-24 rounded-2xl object-cover" />
+              ) : (
+                <div className="flex h-24 w-24 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                  <Package className="h-8 w-8" />
+                </div>
+              )}
+              {imageField && (
+                <div className="w-24">
+                  <input
+                    type="text"
+                    value={values.imageUrl ?? ''}
+                    onChange={(e) => onChange('imageUrl', e.target.value)}
+                    placeholder="Image URL"
+                    className="w-full rounded-md border border-input bg-background px-2 py-1 text-[10px] text-muted-foreground placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  />
+                </div>
+              )}
+            </div>
+
+            <div className="flex-1 space-y-4">
+              {/* Name + active toggle */}
+              <div className="flex items-start gap-4">
+                {nameField && (
+                  <div className="flex-1 space-y-1.5">
+                    <label className="text-sm font-medium">{nameField.label}{nameField.required && <span className="text-destructive ml-0.5">*</span>}</label>
+                    {renderField(nameField, values[nameField.key], (val) => onChange(nameField.key, val))}
+                  </div>
+                )}
+                {(hasActive || statusField) && (
+                  <div className="mt-6 shrink-0">
+                    <ActiveToggle
+                      active={hasActive ? (values.isActive ?? true) : statusField ? values[statusField.key] === 'active' || values[statusField.key] === 'available' : true}
+                      onChange={(v) => {
+                        if (hasActive) onChange('isActive', v)
+                        if (statusField) {
+                          const opts = statusField.options?.map((o: any) => typeof o === 'string' ? o : o.value) ?? []
+                          const activeVal = opts.find((o: string) => o === 'active' || o === 'available') ?? 'active'
+                          const inactiveVal = opts.find((o: string) => o === 'inactive' || o === 'sold_out' || o === 'hidden') ?? 'inactive'
+                          onChange(statusField.key, v ? activeVal : inactiveVal)
+                        }
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+
+              {/* Category + SKU */}
+              <div className="grid gap-4 sm:grid-cols-2">
+                {categoryField && <FieldItem field={categoryField} value={values[categoryField.key]} onChange={(val) => onChange(categoryField.key, val)} renderField={renderField} />}
+                {skuField && <FieldItem field={skuField} value={values[skuField.key]} onChange={(val) => onChange(skuField.key, val)} renderField={renderField} />}
+              </div>
+
+              {/* Description */}
+              {descField && <FieldItem field={descField} value={values[descField.key]} onChange={(val) => onChange(descField.key, val)} renderField={renderField} colSpan />}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Pricing */}
+      {pricingFields.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">Pricing</h3>
+          <Card className="mt-1">
+            <CardContent className="pt-5">
+              <div className="grid gap-4 md:grid-cols-2">
+                {pricingFields.map((field) => (
+                  <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Stock */}
+      {stockFields.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">Inventory</h3>
+          <Card className="mt-1">
+            <CardContent className="pt-5">
+              <div className="grid gap-4 md:grid-cols-2">
+                {stockFields.map((field) => (
+                  <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Project-specific grouped fields */}
+      {fieldGroups.map((group) => {
+        const gFields = groupFieldMap.get(group.id)
+        if (!gFields || gFields.length === 0) return null
+        const cols = group.columns ?? 2
+        return (
+          <div key={group.id}>
+            <h3 className="text-sm font-semibold text-foreground">{group.label}</h3>
+            <Card className="mt-1">
+              <CardContent className="pt-5">
+                <div className={`grid gap-4 ${cols >= 2 ? 'md:grid-cols-2' : ''}`}>
+                  {gFields.map((field) => (
+                    <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} colSpan={field.span === 2} />
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )
+      })}
+
+      {/* Ungrouped project fields */}
+      {ungroupedProject.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-foreground">Details</h3>
+          <Card className="mt-1">
+            <CardContent className="pt-5">
+              <div className="grid gap-4 md:grid-cols-2">
+                {ungroupedProject.map((field) => (
+                  <FieldItem key={field.key} field={field} value={values[field.key]} onChange={(val) => onChange(field.key, val)} renderField={renderField} colSpan={field.span === 2} />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  )
+}