@fayz-ai/saas 0.8.1 → 0.8.2

package/src/crud/CrudFormPage.tsx

@@ -14,9 +14,11 @@ import { ServiceFormLayout } from './archetypes/ServiceFormLayout'
 import { LocationFormLayout } from './archetypes/LocationFormLayout'
 import { SubjectFormLayout } from './archetypes/SubjectFormLayout'
 import { useTranslation } from '@fayz-ai/core'
+import type { EntityImageConfig } from '@fayz-ai/core'
 import type { FieldDef, FieldGroup, EntityDef } from '@fayz-ai/core'
 import type { FormLayout } from '@fayz-ai/core'
 import { RelationSelect } from './relation-field'
+import { useLimitGuard, invalidateLimit } from '../access'
 
 interface CrudFormPageProps {
   entityDef: EntityDef
@@ -248,16 +250,104 @@ function FormFieldItem({ field, value, onChange, allValues }: { field: FieldDef;
   )
 }
 
+/**
+ * The image slot, wired. Renders the record's current image and, when the entity
+ * supplies an `upload`, lets it be replaced. Upload attaches the file to an
+ * existing record id, so in create mode the slot explains itself instead of
+ * offering an action that cannot work yet.
+ */
+function ImageSlot({
+  image,
+  row,
+  canEdit,
+}: {
+  image: EntityImageConfig
+  row: Record<string, any>
+  canEdit: boolean
+}) {
+  const t = useTranslation()
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [url, setUrl] = React.useState<string | undefined>(() => image.get(row))
+  const [busy, setBusy] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  // The form mounts before the record is loaded in edit mode, so the initial
+  // value can be undefined and arrive later.
+  React.useEffect(() => { setUrl(image.get(row)) }, [image.get(row)])
+
+  const pick = () => { if (canEdit && !busy) inputRef.current?.click() }
+
+  const onFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    e.target.value = ''
+    if (!file || !image.upload) return
+    setBusy(true)
+    setError(null)
+    try {
+      setUrl(await image.upload(file, row))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const editable = canEdit && Boolean(image.upload)
+
+  return (
+    <div className="shrink-0">
+      <div
+        onClick={pick}
+        role={editable ? 'button' : undefined}
+        tabIndex={editable ? 0 : undefined}
+        onKeyDown={(e) => { if (editable && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); pick() } }}
+        title={editable ? t('crud.form.changeImage') : undefined}
+        className={`relative flex h-20 w-20 items-center justify-center overflow-hidden rounded-lg border-2 text-muted-foreground transition-colors ${
+          url ? 'border-solid border-border' : 'border-dashed border-muted'
+        } ${editable ? 'cursor-pointer hover:border-primary/30 hover:text-primary/50' : ''}`}
+      >
+        {url
+          ? <img src={url} alt="" className="h-full w-full object-cover" />
+          : <ImagePlus className="h-5 w-5" />}
+        {busy && (
+          <span className="absolute inset-0 flex items-center justify-center bg-background/70 text-[10px]">
+            ...
+          </span>
+        )}
+      </div>
+      {editable && (
+        <input
+          ref={inputRef}
+          type="file"
+          accept={image.accept ?? 'image/*'}
+          className="hidden"
+          onChange={onFile}
+        />
+      )}
+      {!canEdit && (
+        <p className="mt-1 w-20 text-[10px] leading-tight text-muted-foreground">
+          {t('crud.form.imageAfterSave')}
+        </p>
+      )}
+      {error && <p className="mt-1 w-20 text-[10px] leading-tight text-destructive">{error}</p>}
+    </div>
+  )
+}
+
 function FormGroup({
   group,
   fields,
   values,
   onChange,
+  image,
+  canEditImage,
 }: {
   group: FieldGroup
   fields: FieldDef[]
   values: Record<string, any>
   onChange: (key: string, val: any) => void
+  image?: EntityImageConfig
+  canEditImage?: boolean
 }) {
   const cols = group.columns ?? 2
 
@@ -285,12 +375,16 @@ function FormGroup({
         <CardContent className="pt-4">
           {group.imageSlot ? (
             <div className="flex gap-4">
-              {/* Decorative image slot — non-functional placeholder for now. */}
-              <div className="shrink-0">
-                <div className="flex h-20 w-20 cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-muted text-muted-foreground transition-colors hover:border-primary/30 hover:text-primary/50">
-                  <ImagePlus className="h-5 w-5" />
-                </div>
-              </div>
+              {image
+                ? <ImageSlot image={image} row={values} canEdit={Boolean(canEditImage)} />
+                : (
+                  // No entity image config: keep the old decorative square.
+                  <div className="shrink-0">
+                    <div className="flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-muted text-muted-foreground">
+                      <ImagePlus className="h-5 w-5" />
+                    </div>
+                  </div>
+                )}
               <div className="flex-1">{grid}</div>
             </div>
           ) : (
@@ -320,7 +414,16 @@ export function CrudFormPage({ entityDef, mode, initialData, onSubmit, onCancel,
 
   const computedKeys = new Set(formFields.filter((f) => f.type === 'computed').map((f) => f.key))
 
+  // Plan quantity guard for CREATE. Hook is called unconditionally (rules of
+  // hooks) with a safe empty key when the entity declares none; the guard then
+  // resolves to 'ok'. Degrades to allow-all outside <AccessProvider>.
+  const limitKey = entityDef.limitKey
+  const guardLimit = useLimitGuard(limitKey ?? '')
+
   const submit = async () => {
+    // Client-side plan cap: block the save (the guard opens the UpgradeModal)
+    // before touching the store. Only CREATE consumes a new slot.
+    if (mode === 'create' && limitKey && (await guardLimit(1)) === 'blocked') return
     setSaving(true)
     try {
       // Sanitize: convert empty strings to null so the DB doesn't choke on e.g. empty date fields.
@@ -331,6 +434,8 @@ export function CrudFormPage({ entityDef, mode, initialData, onSubmit, onCancel,
         sanitized[key] = val === '' ? null : val
       }
       await onSubmit(sanitized)
+      // Refresh the live count so gates/banners reflect the new row immediately.
+      if (mode === 'create' && limitKey) invalidateLimit(limitKey)
     } catch (err: any) {
       const message = err?.message || 'Something went wrong'
       toast.error(t('crud.form.failedToSave', { entity: entityDef.name.toLowerCase() }), { description: message })
@@ -446,6 +551,8 @@ export function CrudFormPage({ entityDef, mode, initialData, onSubmit, onCancel,
                   fields={fields}
                   values={values}
                   onChange={handleChange}
+                  image={entityDef.image}
+                  canEditImage={mode === 'edit'}
                 />
               )
             })}

package/src/crud/CrudListView.tsx

@@ -10,6 +10,7 @@ import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@fayz-
 import { fieldToColumns } from './fieldToColumn'
 import { CrudCardGrid } from './CrudCardGrid'
 import { PermissionGate } from '../permissions/PermissionGate'
+import { LimitGate } from '../shell/components/billing/gates'
 
 /** A resolved facet: a field plus the option pills to render. */
 export interface CrudFacet {
@@ -112,6 +113,20 @@ export function CrudListView<T extends { id: string }>({
     ? <Button onClick={onNew}>{addLabel ?? t('crud.list.addEntity', { entity: entityDef.name })}</Button>
     : null
 
+  // Compose the create action's gates: RBAC (PermissionGate, role axis) then the
+  // plan quantity cap (LimitGate, plan axis). At the cap, LimitGate dims the
+  // button and intercepts the click to open the global UpgradeModal.
+  const gatedNewButton = newButton
+    ? (() => {
+        const roleGated = feature
+          ? <PermissionGate feature={feature} action="create">{newButton}</PermissionGate>
+          : newButton
+        return entityDef.limitKey
+          ? <LimitGate limitKey={entityDef.limitKey}>{roleGated}</LimitGate>
+          : roleGated
+      })()
+    : null
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -124,7 +139,7 @@ export function CrudListView<T extends { id: string }>({
           )}
         </div>
         <div className="flex items-center gap-2">
-          {newButton && (feature ? <PermissionGate feature={feature} action="create">{newButton}</PermissionGate> : newButton)}
+          {gatedNewButton}
           {hasImportExport && (
             <Dropdown>
               <DropdownTrigger asChild>

package/src/crud/CrudPage.tsx

@@ -13,6 +13,7 @@ import { ImportWizard } from './ImportWizard'
 import { exportToCSV } from './csv-export'
 import { fieldToColumns } from './fieldToColumn'
 import { PermissionGate } from '../permissions/PermissionGate'
+import { useLimitGuard, invalidateLimit } from '../access'
 import { useFieldRules } from '../hooks/useFieldRules'
 import { deriveEntityKey } from '@fayz-ai/core'
 import { toast } from '@fayz-ai/ui'
@@ -196,6 +197,7 @@ export function CrudPage<T extends { id: string }>({ entityDef: rawEntityDef, us
   }, [store])
   const tanColumns = useCrudColumns(entityDef, { basePath: normalizedBasePath, onDelete: readOnly ? undefined : (item) => setDeleteItem(item), onInlineUpdate: handleInlineUpdate, feature, readOnly })
   const currentOrgId = useOrganizationStore((s) => s.currentOrg?.id)
+  const guardImport = useLimitGuard(entityDef.limitKey ?? '')
 
   useEffect(() => {
     if (currentOrgId) store.fetch()
@@ -216,11 +218,25 @@ export function CrudPage<T extends { id: string }>({ entityDef: rawEntityDef, us
       }
     }
 
+    // Plan quantity guard BEFORE the batch insert: adding `rows.length` rows must
+    // stay within the plan cap. When it would exceed, the guard opens the global
+    // UpgradeModal; we also surface a clear toast + a wizard error row and abort.
+    if (entityDef.limitKey && (await guardImport(rows.length)) === 'blocked') {
+      toast.error(t('crud.import.limitExceeded'))
+      return {
+        success: 0,
+        errors: [{ row: 0, message: t('crud.import.limitExceeded') }],
+      }
+    }
+
     const { success, results } = await store.createMany(rows, {
       batchSize: 10,
       onProgress,
     })
 
+    // Refresh the live count so gates/banners reflect the imported rows.
+    if (success > 0 && entityDef.limitKey) invalidateLimit(entityDef.limitKey)
+
     const errors: ImportRowError[] = []
     for (let i = 0; i < results.length; i++) {
       if (results[i].error) {
@@ -232,7 +248,7 @@ export function CrudPage<T extends { id: string }>({ entityDef: rawEntityDef, us
       toast.success(t('crud.import.toastSuccess', { count: String(success) }))
     }
     return { success, errors }
-  }, [store, t])
+  }, [store, t, guardImport, entityDef.limitKey])
 
   const handleExport = useCallback(() => {
     const items = store.items
@@ -460,10 +476,16 @@ export function CrudPage<T extends { id: string }>({ entityDef: rawEntityDef, us
     )
   }
 
-  const handleDeleteConfirm = () => {
-    if (deleteItem) {
-      store.remove((deleteItem as any).id)
-      setDeleteItem(null)
+  const handleDeleteConfirm = async () => {
+    if (!deleteItem) return
+    const id = (deleteItem as any).id
+    setDeleteItem(null)
+    // Await the removal so the (cache-invalidated) list refetch completes and the
+    // deleted row is gone before we settle on the list view — previously this was
+    // fire-and-forget and raced with navigation, leaving a ghost row behind.
+    try {
+      await store.remove(id)
+    } finally {
       navigateToList()
     }
   }

package/src/crud/DeleteConfirmDialog.tsx

@@ -27,7 +27,7 @@ export function DeleteConfirmDialog({ open, onClose, onConfirm, entityName, disp
           <ModalTitle>{t('crud.delete.title', { entity: entityName })}</ModalTitle>
           <ModalDescription>
             {displayValue
-              ? t('crud.delete.confirmNamed', { name: displayValue })
+              ? t('crud.delete.confirmNamed', { displayValue })
               : t('crud.delete.confirmGeneric', { entity: entityName.toLowerCase() })}
           </ModalDescription>
         </ModalHeader>

package/src/crud/archetypes/AddressesTab.tsx

@@ -0,0 +1,387 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { MapPin, Star, Pencil, Trash2, Plus } from 'lucide-react'
+import {
+  Card, CardContent, Badge, Button, Input, ConfirmDialog,
+  Modal, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalFooter,
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '@fayz-ai/ui'
+import { getSupabaseClientOptional, getActiveTenantId, useTranslation } from '@fayz-ai/core'
+import { toast } from '../../shell/components/notifications/ToastProvider'
+
+// ---------------------------------------------------------------------------
+// Addresses tab — generic on purpose. public.addresses is a CORE table (spine
+// migration @fayz-ai/db 017_core_addresses), so any app with a person record
+// gets this: a client's delivery addresses, a supplier's pickup point, a staff
+// member's home address. Nothing here is shop-specific.
+//
+// Rows are read by owner_id alone, without an owner_type filter, because a
+// person can be reached from two sides today: a core `people` row, or a
+// module's own customer row that mirrors it (the shop's plg_shop_customers
+// keeps the same id). Both resolve to the same address book. Rows WRITTEN here
+// are stamped 'person' — the spine's canonical owner kind.
+// ---------------------------------------------------------------------------
+
+export interface AddressRow {
+  id: string
+  label: string | null
+  recipient: string | null
+  phone: string | null
+  postal_code: string
+  street: string
+  number: string | null
+  complement: string | null
+  district: string | null
+  city: string
+  state: string
+  country: string
+  is_default: boolean
+  kind: string
+}
+
+/** The editable shape. Separate from AddressRow: no id, every field a string. */
+interface AddressForm {
+  label: string
+  kind: string
+  recipient: string
+  phone: string
+  postal_code: string
+  street: string
+  number: string
+  complement: string
+  district: string
+  city: string
+  state: string
+  is_default: boolean
+}
+
+const EMPTY_FORM: AddressForm = {
+  label: '', kind: 'both', recipient: '', phone: '', postal_code: '', street: '',
+  number: '', complement: '', district: '', city: '', state: '', is_default: false,
+}
+
+function toForm(a: AddressRow): AddressForm {
+  return {
+    label: a.label ?? '', kind: a.kind, recipient: a.recipient ?? '', phone: a.phone ?? '',
+    postal_code: a.postal_code, street: a.street, number: a.number ?? '',
+    complement: a.complement ?? '', district: a.district ?? '', city: a.city,
+    state: a.state, is_default: a.is_default,
+  }
+}
+
+const SPAN_CLASS: Record<number, string> = {
+  1: 'sm:col-span-1', 2: 'sm:col-span-2', 3: 'sm:col-span-3',
+  4: 'sm:col-span-4', 6: 'sm:col-span-6',
+}
+
+/** Label + control, wired by htmlFor/id so the label is actually clickable and
+ *  the control is reachable by its accessible name. */
+function Field({ id, label, required, span, children }: {
+  id: string
+  label: string
+  required?: boolean
+  span: number
+  children: React.ReactNode
+}) {
+  return (
+    <div className={SPAN_CLASS[span]}>
+      <label htmlFor={`address-${id}`} className="text-xs text-muted-foreground">
+        {label}{required ? ' *' : ''}
+      </label>
+      {children}
+    </div>
+  )
+}
+
+function formatLine(a: AddressRow): string {
+  // Rua, número — complemento · bairro · cidade/UF · CEP, skipping whatever is
+  // missing so a partial address never renders stray commas.
+  const streetLine = [a.street, a.number].filter(Boolean).join(', ')
+  const withComplement = a.complement ? `${streetLine} — ${a.complement}` : streetLine
+  return [withComplement, a.district, `${a.city}/${a.state}`, a.postal_code]
+    .filter((part) => part && part !== '—' && part !== '/')
+    .join(' · ')
+}
+
+export function AddressesTab({ item }: { item?: unknown }) {
+  const t = useTranslation()
+  const record = item as { id?: string } | undefined
+  const [rows, setRows] = useState<AddressRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const [editing, setEditing] = useState<AddressRow | null>(null)
+  const [formOpen, setFormOpen] = useState(false)
+  const [form, setForm] = useState<AddressForm>(EMPTY_FORM)
+  const [saving, setSaving] = useState(false)
+  const [deleting, setDeleting] = useState<AddressRow | null>(null)
+
+  const ownerId = record?.id
+
+  // getSupabaseClientOptional is loosely typed at this layer; the query shape is
+  // asserted here rather than pulling supabase-js into the UI package.
+  const db = () => getSupabaseClientOptional() as unknown as { from: (t: string) => any } | null
+
+  const load = useCallback(async () => {
+    const client = db()
+    if (!client || !ownerId) { setLoading(false); return }
+    setLoading(true)
+    setError(null)
+    const { data, error: err } = await client
+      .from('addresses')
+      .select('*')
+      .eq('owner_id', ownerId)
+      .order('is_default', { ascending: false })
+    if (err) setError(err.message)
+    else setRows((data ?? []) as AddressRow[])
+    setLoading(false)
+  }, [ownerId])
+
+  useEffect(() => { void load() }, [load])
+
+  const openCreate = () => { setEditing(null); setForm(EMPTY_FORM); setFormOpen(true) }
+  const openEdit = (a: AddressRow) => { setEditing(a); setForm(toForm(a)); setFormOpen(true) }
+
+  const set = <K extends keyof AddressForm>(key: K, value: AddressForm[K]) =>
+    setForm((prev) => ({ ...prev, [key]: value }))
+
+  // CEP, street and city are what make an address findable; the rest is optional.
+  const canSave = form.postal_code.trim() !== '' && form.street.trim() !== '' && form.city.trim() !== ''
+
+  const handleSave = async () => {
+    const client = db()
+    if (!client || !ownerId || !canSave) return
+    const tenantId = getActiveTenantId()
+    if (!tenantId) { toast.error(t('crud.archetype.addresses.noTenant')); return }
+
+    setSaving(true)
+    try {
+      const values = {
+        label: form.label.trim() || null,
+        kind: form.kind,
+        recipient: form.recipient.trim() || null,
+        phone: form.phone.trim() || null,
+        postal_code: form.postal_code.trim(),
+        street: form.street.trim(),
+        number: form.number.trim() || null,
+        complement: form.complement.trim() || null,
+        district: form.district.trim() || null,
+        city: form.city.trim(),
+        state: form.state.trim().toUpperCase(),
+        is_default: form.is_default,
+      }
+
+      // addresses_one_default_idx is a UNIQUE partial index on
+      // (owner_type, owner_id, kind) WHERE is_default — the previous default
+      // must be cleared BEFORE this row claims the flag, or the write fails.
+      if (form.is_default) {
+        let q = client.from('addresses').update({ is_default: false })
+          .eq('owner_id', ownerId).eq('kind', form.kind).eq('is_default', true)
+        if (editing) q = q.neq('id', editing.id)
+        const { error: clearErr } = await q
+        if (clearErr) throw clearErr
+      }
+
+      const { error: err } = editing
+        ? await client.from('addresses').update(values).eq('id', editing.id)
+        : await client.from('addresses').insert({
+            ...values,
+            tenant_id: tenantId,
+            owner_type: 'person',
+            owner_id: ownerId,
+          })
+      if (err) throw err
+
+      setFormOpen(false)
+      await load()
+      toast.success(editing ? t('crud.archetype.addresses.updated') : t('crud.archetype.addresses.created'))
+    } catch (e: any) {
+      toast.error(t('crud.archetype.addresses.saveFailed'), { description: e?.message })
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    const client = db()
+    if (!client || !deleting) return
+    const { error: err } = await client.from('addresses').delete().eq('id', deleting.id)
+    setDeleting(null)
+    if (err) { toast.error(t('crud.archetype.addresses.deleteFailed'), { description: err.message }); return }
+    await load()
+    toast.success(t('crud.archetype.addresses.deleted'))
+  }
+
+  if (loading) {
+    return (
+      <Card><CardContent className="space-y-2 py-6">
+        <div className="h-4 w-56 animate-pulse rounded bg-muted/40" />
+        <div className="h-4 w-40 animate-pulse rounded bg-muted/30" />
+      </CardContent></Card>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
+        <p className="font-medium">{t('crud.archetype.addresses.loadFailed')}</p>
+        <p className="mt-1 text-red-700">{error}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex justify-end">
+        <Button size="sm" onClick={openCreate}>
+          <Plus className="mr-1.5 h-3.5 w-3.5" /> {t('crud.archetype.addresses.add')}
+        </Button>
+      </div>
+
+      {rows.length === 0 ? (
+        <Card><CardContent className="flex flex-col items-center justify-center py-12 text-center">
+          <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+            <MapPin className="h-5 w-5 text-muted-foreground" />
+          </div>
+          <p className="text-sm font-medium">{t('crud.archetype.addresses.emptyTitle')}</p>
+          <p className="mt-1 max-w-xs text-xs text-muted-foreground">
+            {t('crud.archetype.addresses.emptyDescription')}
+          </p>
+        </CardContent></Card>
+      ) : (
+        <div className="space-y-2">
+          {rows.map((a) => (
+            <Card key={a.id}>
+              <CardContent className="flex items-start gap-3 py-3">
+                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-sm font-medium">
+                      {a.label ?? t('crud.archetype.addresses.fallbackLabel')}
+                    </span>
+                    {a.is_default && (
+                      <Badge variant="secondary" className="gap-1 text-[10px]">
+                        <Star className="h-2.5 w-2.5" /> {t('crud.archetype.addresses.default')}
+                      </Badge>
+                    )}
+                    {a.kind !== 'both' && (
+                      <Badge variant="secondary" className="text-[10px]">
+                        {t(`crud.archetype.addresses.kind.${a.kind}`)}
+                      </Badge>
+                    )}
+                  </div>
+                  <p className="mt-0.5 text-sm text-muted-foreground">{formatLine(a)}</p>
+                  {(a.recipient || a.phone) && (
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      {[a.recipient, a.phone].filter(Boolean).join(' · ')}
+                    </p>
+                  )}
+                </div>
+                <div className="flex shrink-0 gap-1">
+                  {/* Named for the ADDRESS, not just "Editar": the person
+                      detail header already owns a plain Editar/Excluir pair,
+                      and two identical accessible names on one screen is a
+                      coin flip for a screen reader user. */}
+                  <Button variant="ghost" size="sm" onClick={() => openEdit(a)}
+                    aria-label={t('crud.archetype.addresses.editTitle')}>
+                    <Pencil className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => setDeleting(a)}
+                    aria-label={t('crud.archetype.addresses.deleteTitle')}>
+                    <Trash2 className="h-3.5 w-3.5 text-destructive" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <Modal open={formOpen} onOpenChange={setFormOpen}>
+        <ModalContent size="lg">
+          <ModalHeader>
+            <ModalTitle>
+              {editing ? t('crud.archetype.addresses.editTitle') : t('crud.archetype.addresses.addTitle')}
+            </ModalTitle>
+            <ModalDescription>{t('crud.archetype.addresses.formDescription')}</ModalDescription>
+          </ModalHeader>
+
+          <div className="grid grid-cols-1 gap-3 px-6 sm:grid-cols-6">
+            <Field id="label" span={3} label={t('crud.archetype.addresses.field.label')}>
+              <Input id="address-label" value={form.label} onChange={(e) => set('label', e.target.value)}
+                placeholder={t('crud.archetype.addresses.labelPlaceholder')} />
+            </Field>
+            <Field id="kind" span={3} label={t('crud.archetype.addresses.field.kind')}>
+              <Select value={form.kind} onValueChange={(v: string) => set('kind', v)}>
+                <SelectTrigger id="address-kind"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="both">{t('crud.archetype.addresses.kind.both')}</SelectItem>
+                  <SelectItem value="shipping">{t('crud.archetype.addresses.kind.shipping')}</SelectItem>
+                  <SelectItem value="billing">{t('crud.archetype.addresses.kind.billing')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </Field>
+
+            <Field id="postal_code" span={2} required label={t('crud.archetype.addresses.field.postalCode')}>
+              <Input id="address-postal_code" value={form.postal_code}
+                onChange={(e) => set('postal_code', e.target.value)} placeholder="00000-000" />
+            </Field>
+            <Field id="street" span={4} required label={t('crud.archetype.addresses.field.street')}>
+              <Input id="address-street" value={form.street} onChange={(e) => set('street', e.target.value)} />
+            </Field>
+
+            <Field id="number" span={2} label={t('crud.archetype.addresses.field.number')}>
+              <Input id="address-number" value={form.number} onChange={(e) => set('number', e.target.value)} />
+            </Field>
+            <Field id="complement" span={4} label={t('crud.archetype.addresses.field.complement')}>
+              <Input id="address-complement" value={form.complement} onChange={(e) => set('complement', e.target.value)} />
+            </Field>
+
+            <Field id="district" span={3} label={t('crud.archetype.addresses.field.district')}>
+              <Input id="address-district" value={form.district} onChange={(e) => set('district', e.target.value)} />
+            </Field>
+            <Field id="city" span={2} required label={t('crud.archetype.addresses.field.city')}>
+              <Input id="address-city" value={form.city} onChange={(e) => set('city', e.target.value)} />
+            </Field>
+            <Field id="state" span={1} label={t('crud.archetype.addresses.field.state')}>
+              <Input id="address-state" value={form.state} onChange={(e) => set('state', e.target.value)}
+                maxLength={2} placeholder="UF" />
+            </Field>
+
+            <Field id="recipient" span={3} label={t('crud.archetype.addresses.field.recipient')}>
+              <Input id="address-recipient" value={form.recipient} onChange={(e) => set('recipient', e.target.value)} />
+            </Field>
+            <Field id="phone" span={3} label={t('crud.archetype.addresses.field.phone')}>
+              <Input id="address-phone" value={form.phone} onChange={(e) => set('phone', e.target.value)} />
+            </Field>
+
+            <label className="flex items-center gap-2 text-sm sm:col-span-6">
+              <input type="checkbox" checked={form.is_default}
+                onChange={(e) => set('is_default', e.target.checked)} className="h-4 w-4" />
+              {t('crud.archetype.addresses.setDefault')}
+            </label>
+          </div>
+
+          <ModalFooter>
+            <Button variant="ghost" onClick={() => setFormOpen(false)} disabled={saving}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={() => void handleSave()} disabled={!canSave || saving}>
+              {saving ? t('common.saving') : t('common.save')}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <ConfirmDialog
+        open={deleting !== null}
+        variant="destructive"
+        title={t('crud.archetype.addresses.deleteTitle')}
+        description={deleting ? formatLine(deleting) : ''}
+        confirmLabel={t('common.delete')}
+        cancelLabel={t('common.cancel')}
+        onConfirm={() => void handleDelete()}
+        onCancel={() => setDeleting(null)}
+      />
+    </div>
+  )
+}