@asteby/metacore-runtime-react 46.3.0 → 47.0.0

package/src/business/print-send-dialog.tsx

@@ -0,0 +1,175 @@
+// PrintSendDialog — imprimir o enviar un documento ya emitido (cotización,
+// factura, nota de crédito…). El SDK NO llama a un proveedor de mensajería: el
+// host recibe `onSend(channel, destination, document)` y decide qué hacer.
+// Imprimir usa la URL del PDF que pasa el host (o su propio `onPrint`).
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Mail, MessageCircle, Printer, Loader2 } from 'lucide-react'
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Input,
+} from '@asteby/metacore-ui/primitives'
+import { FormErrorBanner } from './feedback'
+
+export type SendChannel = 'email' | 'whatsapp'
+
+export interface PrintableDocument {
+    folio: string
+    /** URL del PDF ya generado. Sin ella no hay «Imprimir». */
+    pdfUrl?: string
+    /** Texto de cabecera («Factura», «Cotización»). */
+    title?: string
+    /** Destinos sugeridos (datos del cliente). */
+    email?: string
+    phone?: string
+}
+
+export interface PrintSendDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    document: PrintableDocument
+    /** Canales de envío disponibles. Default: ambos. Vacío = solo imprimir. */
+    channels?: SendChannel[]
+    /**
+     * Envío a cargo del host. Si rechaza, el mensaje se muestra en el diálogo.
+     * Sin `onSend` no se ofrece enviar.
+     */
+    onSend?: (channel: SendChannel, destination: string, document: PrintableDocument) => Promise<void> | void
+    /** Reemplaza la impresión por defecto (abrir `pdfUrl` en otra pestaña). */
+    onPrint?: (document: PrintableDocument) => void
+}
+
+function defaultPrint(doc: PrintableDocument): void {
+    if (!doc.pdfUrl || typeof window === 'undefined') return
+    window.open(doc.pdfUrl, '_blank', 'noopener,noreferrer')
+}
+
+export function PrintSendDialog({
+    open,
+    onOpenChange,
+    document: doc,
+    channels = ['email', 'whatsapp'],
+    onSend,
+    onPrint,
+}: PrintSendDialogProps) {
+    const { t } = useTranslation()
+    const [channel, setChannel] = useState<SendChannel>(channels[0] ?? 'email')
+    const [destination, setDestination] = useState('')
+    const [sending, setSending] = useState(false)
+    const [sent, setSent] = useState(false)
+    const [error, setError] = useState<string | undefined>()
+
+    const suggested = channel === 'email' ? doc.email : doc.phone
+    useEffect(() => {
+        if (open) {
+            setDestination(suggested ?? '')
+            setSent(false)
+            setError(undefined)
+        }
+    }, [open, channel, suggested])
+
+    const canSend = !!onSend && channels.length > 0
+    const send = async () => {
+        const dest = destination.trim()
+        if (!onSend || !dest) return
+        setSending(true)
+        setError(undefined)
+        setSent(false)
+        try {
+            await onSend(channel, dest, doc)
+            setSent(true)
+        } catch (e) {
+            const msg = (e as { message?: unknown } | undefined)?.message
+            setError(
+                typeof msg === 'string' && msg
+                    ? msg
+                    : t('printSend.error', { defaultValue: 'No se pudo enviar el documento. Inténtalo de nuevo.' }),
+            )
+        } finally {
+            setSending(false)
+        }
+    }
+
+    const channelLabel = (c: SendChannel) =>
+        c === 'email' ? t('printSend.email', { defaultValue: 'Correo' }) : t('printSend.whatsapp', { defaultValue: 'WhatsApp' })
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>
+                        {t('printSend.title', { defaultValue: 'Imprimir o enviar' })}
+                        {doc.title ? ` · ${doc.title}` : ''}
+                    </DialogTitle>
+                    <DialogDescription>{doc.folio}</DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-4">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        className="w-full justify-start"
+                        disabled={!doc.pdfUrl && !onPrint}
+                        onClick={() => (onPrint ?? defaultPrint)(doc)}
+                    >
+                        <Printer className="mr-2 size-4" aria-hidden />
+                        {t('printSend.print', { defaultValue: 'Imprimir' })}
+                    </Button>
+
+                    {canSend && (
+                        <div className="space-y-2">
+                            {channels.length > 1 && (
+                                <div className="flex gap-2" role="group" aria-label={t('printSend.channel', { defaultValue: 'Canal de envío' })}>
+                                    {channels.map((c) => (
+                                        <Button
+                                            key={c}
+                                            type="button"
+                                            size="sm"
+                                            variant={c === channel ? 'default' : 'outline'}
+                                            aria-pressed={c === channel}
+                                            onClick={() => setChannel(c)}
+                                        >
+                                            {c === 'email' ? <Mail className="mr-1.5 size-4" aria-hidden /> : <MessageCircle className="mr-1.5 size-4" aria-hidden />}
+                                            {channelLabel(c)}
+                                        </Button>
+                                    ))}
+                                </div>
+                            )}
+                            <Input
+                                value={destination}
+                                type={channel === 'email' ? 'email' : 'tel'}
+                                aria-label={t('printSend.destination', { defaultValue: 'Destino' })}
+                                placeholder={channel === 'email' ? 'cliente@ejemplo.com' : '+52 55 0000 0000'}
+                                onChange={(e) => setDestination(e.target.value)}
+                            />
+                            <FormErrorBanner message={error} />
+                            {sent && (
+                                <p role="status" className="text-sm text-emerald-600 dark:text-emerald-400">
+                                    {t('printSend.sent', { defaultValue: 'Enviado.' })}
+                                </p>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+                <DialogFooter>
+                    <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                        {t('common.close', { defaultValue: 'Cerrar' })}
+                    </Button>
+                    {canSend && (
+                        <Button type="button" onClick={send} disabled={sending || !destination.trim()}>
+                            {sending && <Loader2 className="mr-2 size-4 animate-spin" aria-hidden />}
+                            {t('printSend.send', { defaultValue: 'Enviar' })}
+                        </Button>
+                    )}
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/business/relate-documents.tsx

@@ -0,0 +1,182 @@
+// RelateDocuments — relaciona uno o más documentos origen (CFDI) desde un
+// formulario: nota de crédito, devolución, sustitución. El valor es DATO
+// (`related_document_id`, `relation_type`, UUID/folio para mostrar), no un flujo
+// de un solo módulo. El SDK no embebe catálogos fiscales: los tipos de relación
+// (p. ej. SAT 01/03/04) llegan por la prop `relationTypes`.
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link2, Search, X } from 'lucide-react'
+import { Badge, Button, Input } from '@asteby/metacore-ui'
+import { useAsyncSearch } from './use-async-search'
+
+export interface RelatableDocument {
+    id: string
+    /** UUID fiscal (CFDI), cuando ya está timbrado. */
+    uuid?: string
+    folio?: string
+    /** Texto libre para mostrar («Factura A-120 · Cliente X»). */
+    label?: string
+    total?: number
+}
+
+export interface RelationTypeOption {
+    /** Clave que viaja en `relation_type` (p. ej. `"01"`). */
+    value: string
+    label: string
+}
+
+/** Un documento relacionado: lo que el formulario guarda. */
+export interface RelatedDocument {
+    related_document_id: string
+    relation_type: string
+    /** Solo para mostrar. */
+    uuid?: string
+    folio?: string
+    label?: string
+}
+
+export interface RelateDocumentsProps {
+    value: RelatedDocument[]
+    onChange: (value: RelatedDocument[]) => void
+    /** Catálogo de tipos de relación (lo aporta el addon). */
+    relationTypes: RelationTypeOption[]
+    /** Búsqueda de documentos origen. Estable (useCallback). */
+    search: (q: string, signal: AbortSignal) => Promise<RelatableDocument[]>
+    /** Tipo preseleccionado al agregar. Default: el primero del catálogo. */
+    defaultRelationType?: string
+    /** Máximo de documentos relacionados. Sin tope por defecto. */
+    max?: number
+    disabled?: boolean
+    placeholder?: string
+}
+
+function docTitle(d: { folio?: string; label?: string; uuid?: string; id?: string }): string {
+    return d.label || d.folio || d.uuid || d.id || ''
+}
+
+export function RelateDocuments({
+    value,
+    onChange,
+    relationTypes,
+    search,
+    defaultRelationType,
+    max,
+    disabled,
+    placeholder,
+}: RelateDocumentsProps) {
+    const { t } = useTranslation()
+    const [text, setText] = useState('')
+    const [pendingType, setPendingType] = useState<string>(defaultRelationType ?? relationTypes[0]?.value ?? '')
+    const { results, loading, error } = useAsyncSearch(text, search, { minChars: 2 })
+    const full = max != null && value.length >= max
+    const typeLabel = (v: string) => relationTypes.find((r) => r.value === v)?.label ?? v
+
+    const add = (d: RelatableDocument) => {
+        if (full || value.some((x) => x.related_document_id === d.id)) return
+        onChange([
+            ...value,
+            { related_document_id: d.id, relation_type: pendingType, uuid: d.uuid, folio: d.folio, label: d.label },
+        ])
+        setText('')
+    }
+    const remove = (id: string) => onChange(value.filter((x) => x.related_document_id !== id))
+    const setType = (id: string, relation_type: string) =>
+        onChange(value.map((x) => (x.related_document_id === id ? { ...x, relation_type } : x)))
+
+    const selectCls = 'h-9 rounded-md border bg-background px-2 text-sm'
+
+    return (
+        <div data-slot="relate-documents" className="space-y-2">
+            {value.length > 0 && (
+                <ul className="divide-y rounded-md border">
+                    {value.map((d) => (
+                        <li key={d.related_document_id} className="flex flex-wrap items-center gap-2 px-2 py-1.5">
+                            <Link2 className="size-4 text-muted-foreground" aria-hidden />
+                            <div className="min-w-0 flex-1">
+                                <p className="truncate text-sm font-medium">{docTitle({ folio: d.folio, label: d.label, id: d.related_document_id })}</p>
+                                {d.uuid && <p className="break-all font-mono text-xs text-muted-foreground">{d.uuid}</p>}
+                            </div>
+                            <select
+                                className={selectCls}
+                                disabled={disabled}
+                                value={d.relation_type}
+                                aria-label={t('relateDocuments.type', { defaultValue: 'Tipo de relación' })}
+                                onChange={(e) => setType(d.related_document_id, e.target.value)}
+                            >
+                                {!relationTypes.some((r) => r.value === d.relation_type) && (
+                                    <option value={d.relation_type}>{typeLabel(d.relation_type)}</option>
+                                )}
+                                {relationTypes.map((r) => (
+                                    <option key={r.value} value={r.value}>{r.label}</option>
+                                ))}
+                            </select>
+                            {!disabled && (
+                                <Button type="button" size="icon" variant="ghost" onClick={() => remove(d.related_document_id)} aria-label={t('relateDocuments.remove', { defaultValue: 'Quitar relación' })}>
+                                    <X className="size-4" />
+                                </Button>
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            )}
+
+            {!full && !disabled && (
+                <div className="space-y-2">
+                    <div className="flex items-center gap-1.5">
+                        <div className="relative flex-1">
+                            <Search className="pointer-events-none absolute left-2.5 top-2.5 size-4 text-muted-foreground" aria-hidden />
+                            <Input
+                                className="pl-8"
+                                value={text}
+                                placeholder={placeholder ?? t('relateDocuments.placeholder', { defaultValue: 'Buscar por folio o UUID' })}
+                                onChange={(e) => setText(e.target.value)}
+                            />
+                        </div>
+                        <select
+                            className={selectCls}
+                            value={pendingType}
+                            aria-label={t('relateDocuments.newType', { defaultValue: 'Tipo para el documento nuevo' })}
+                            onChange={(e) => setPendingType(e.target.value)}
+                        >
+                            {relationTypes.map((r) => (
+                                <option key={r.value} value={r.value}>{r.label}</option>
+                            ))}
+                        </select>
+                    </div>
+                    {loading && <p className="text-sm text-muted-foreground">{t('common.searching', { defaultValue: 'Buscando…' })}</p>}
+                    {error && !loading && (
+                        <p role="alert" className="text-sm text-destructive">
+                            {t('relateDocuments.error', { defaultValue: 'No se pudo buscar documentos. Inténtalo de nuevo.' })}
+                        </p>
+                    )}
+                    {!loading && !error && text.trim().length >= 2 && results.length === 0 && (
+                        <p className="text-sm text-muted-foreground">{t('relateDocuments.empty', { defaultValue: 'No encontramos ese documento.' })}</p>
+                    )}
+                    {results.length > 0 && (
+                        <ul role="listbox" className="max-h-64 divide-y overflow-auto rounded-md border">
+                            {results.map((d) => {
+                                const already = value.some((x) => x.related_document_id === d.id)
+                                return (
+                                    <li key={d.id} role="option" aria-selected={already}>
+                                        <button type="button" disabled={already} className="flex w-full items-center justify-between gap-2 px-2 py-1.5 text-left hover:bg-accent disabled:opacity-50" onClick={() => add(d)}>
+                                            <span>
+                                                <span className="block text-sm font-medium">{docTitle(d)}</span>
+                                                {d.uuid && <span className="block break-all font-mono text-xs text-muted-foreground">{d.uuid}</span>}
+                                            </span>
+                                            {already && <Badge variant="muted">{t('relateDocuments.added', { defaultValue: 'Agregado' })}</Badge>}
+                                        </button>
+                                    </li>
+                                )
+                            })}
+                        </ul>
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}
+
+/** Valor a enviar al servidor: solo los datos, sin los campos de visualización. */
+export function serializeRelatedDocuments(value: RelatedDocument[]): Array<Pick<RelatedDocument, 'related_document_id' | 'relation_type'>> {
+    return value.map(({ related_document_id, relation_type }) => ({ related_document_id, relation_type }))
+}

package/src/business/vehicle-picker.tsx

@@ -0,0 +1,188 @@
+// VehiclePicker + alta rápida — busca por placa o VIN (y marca/modelo/cliente que
+// el host decida indexar) y reutiliza el <CreateRecordDialog> dinámico del modelo
+// vehículo para el alta rápida. Mismo contrato que <CustomerPicker>: controlado
+// (`value` / `onChange`), `search` inyectado por el host, permisos con useCan
+// (sin <PermissionsProvider> no bloquea nada: el backend autoriza).
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Car, Plus, Search, X } from 'lucide-react'
+import { Button, Input } from '@asteby/metacore-ui'
+import { CreateRecordDialog } from '../dialogs/create-record-dialog'
+import { useApi } from '../api-context'
+import { useCan } from '../permissions-context'
+import { useAsyncSearch } from './use-async-search'
+import { EmptyState } from './feedback'
+
+export interface VehicleResult {
+    id: string
+    /** Placa tal como la capturó el taller (sin formato hardcodeado por país). */
+    plate?: string
+    vin?: string
+    make?: string
+    model?: string
+    year?: number | string
+    color?: string
+    /** Propietario, cuando el host lo expone. */
+    customer_id?: string
+    customer_name?: string
+}
+
+export interface VehiclePickerProps {
+    value: VehicleResult | null
+    /** Evento único de cambio: vehículo elegido/creado, o `null` al limpiar. */
+    onChange: (vehicle: VehicleResult | null) => void
+    /** Búsqueda por placa o VIN. Estable (useCallback). */
+    search: (q: string, signal: AbortSignal) => Promise<VehicleResult[]>
+    /** Modelo del kernel para el alta rápida. Default `Vehicle`. */
+    model?: string
+    /** Endpoint CRUD del alta. Default `/data/<model>/me`. */
+    endpoint?: string
+    /** Convierte el registro guardado a `VehicleResult`. Default: id, placa, VIN, marca, modelo, año. */
+    mapRecord?: (rec: Record<string, unknown>) => VehicleResult
+    /** Override de permiso (default `<model>.create` con useCan). */
+    canCreate?: boolean
+    /** Valores iniciales del alta (p. ej. `customer_id` del cliente ya elegido). */
+    createDefaults?: Record<string, unknown>
+    disabled?: boolean
+    placeholder?: string
+}
+
+function snake(model: string): string {
+    return model.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase()
+}
+
+const str = (v: unknown): string | undefined => (typeof v === 'string' && v ? v : undefined)
+
+/** Línea corta de un vehículo: «Nissan Versa 2019 · ABC-123 · VIN…». */
+export function describeVehicle(v: VehicleResult): string {
+    const unit = [v.make, v.model, v.year].filter((x) => x != null && x !== '').join(' ')
+    return [unit, v.plate, v.vin].filter(Boolean).join(' · ')
+}
+
+export function VehiclePicker({
+    value,
+    onChange,
+    search,
+    model = 'Vehicle',
+    endpoint,
+    mapRecord,
+    canCreate,
+    createDefaults,
+    disabled,
+    placeholder,
+}: VehiclePickerProps) {
+    const { t } = useTranslation()
+    const api = useApi()
+    const can = useCan()
+    const [text, setText] = useState('')
+    const [creating, setCreating] = useState(false)
+    const { results, loading, error } = useAsyncSearch(text, search, { minChars: 2 })
+    const mayCreate = canCreate ?? can(`${snake(model)}.create`)
+    const base = endpoint ?? `/data/${model}/me`
+
+    const pick = (v: VehicleResult) => {
+        onChange(v)
+        setText('')
+    }
+    const toResult = useCallback(
+        (rec: Record<string, unknown>): VehicleResult =>
+            mapRecord
+                ? mapRecord(rec)
+                : {
+                      id: String(rec.id ?? ''),
+                      plate: str(rec.plate),
+                      vin: str(rec.vin),
+                      make: str(rec.make),
+                      model: str(rec.model),
+                      year: typeof rec.year === 'number' || typeof rec.year === 'string' ? rec.year : undefined,
+                      color: str(rec.color),
+                      customer_id: str(rec.customer_id),
+                  },
+        [mapRecord],
+    )
+
+    if (value) {
+        return (
+            <div data-slot="vehicle-picker" className="flex items-start justify-between gap-2 rounded-md border p-2">
+                <div className="flex items-start gap-2">
+                    <Car className="mt-0.5 size-4 text-muted-foreground" aria-hidden />
+                    <div>
+                        <p className="text-sm font-medium">{value.plate || value.vin || t('vehiclePicker.noPlate', { defaultValue: 'Sin placa' })}</p>
+                        <p className="text-xs text-muted-foreground">
+                            {[[value.make, value.model, value.year].filter((x) => x != null && x !== '').join(' '), value.vin && value.plate ? value.vin : '', value.customer_name]
+                                .filter(Boolean)
+                                .join(' · ')}
+                        </p>
+                    </div>
+                </div>
+                {!disabled && (
+                    <Button type="button" size="icon" variant="ghost" onClick={() => onChange(null)} aria-label={t('vehiclePicker.clear', { defaultValue: 'Quitar vehículo' })}>
+                        <X className="size-4" />
+                    </Button>
+                )}
+            </div>
+        )
+    }
+
+    return (
+        <div data-slot="vehicle-picker" className="space-y-2">
+            <div className="flex items-center gap-1.5">
+                <div className="relative flex-1">
+                    <Search className="pointer-events-none absolute left-2.5 top-2.5 size-4 text-muted-foreground" aria-hidden />
+                    <Input
+                        className="pl-8"
+                        disabled={disabled}
+                        value={text}
+                        placeholder={placeholder ?? t('vehiclePicker.placeholder', { defaultValue: 'Placa o VIN' })}
+                        onChange={(e) => setText(e.target.value)}
+                    />
+                </div>
+                {mayCreate && (
+                    <Button type="button" variant="outline" size="icon" disabled={disabled} onClick={() => setCreating(true)} aria-label={t('vehiclePicker.create', { defaultValue: 'Nuevo vehículo' })}>
+                        <Plus className="size-4" />
+                    </Button>
+                )}
+            </div>
+            {loading && <p className="text-sm text-muted-foreground">{t('common.searching', { defaultValue: 'Buscando…' })}</p>}
+            {error && !loading && (
+                <p role="alert" className="text-sm text-destructive">
+                    {t('vehiclePicker.error', { defaultValue: 'No se pudo buscar vehículos. Inténtalo de nuevo.' })}
+                </p>
+            )}
+            {!loading && !error && text.trim().length >= 2 && results.length === 0 && (
+                <EmptyState
+                    title={t('vehiclePicker.empty', { defaultValue: 'No encontramos ese vehículo' })}
+                    action={mayCreate ? { label: t('vehiclePicker.createAction', { defaultValue: 'Crear vehículo' }), onClick: () => setCreating(true) } : undefined}
+                />
+            )}
+            {results.length > 0 && (
+                <ul role="listbox" className="max-h-64 divide-y overflow-auto rounded-md border">
+                    {results.map((v) => (
+                        <li key={v.id} role="option" aria-selected={false}>
+                            <button type="button" className="flex w-full flex-col px-2 py-1.5 text-left hover:bg-accent" onClick={() => pick(v)}>
+                                <span className="text-sm font-medium">{v.plate || v.vin || v.id}</span>
+                                <span className="text-xs text-muted-foreground">{[describeVehicle({ ...v, plate: undefined }), v.customer_name].filter(Boolean).join(' · ')}</span>
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            )}
+
+            {creating && (
+                <CreateRecordDialog
+                    modelKey={model}
+                    open={creating}
+                    onOpenChange={setCreating}
+                    endpoint={base}
+                    defaults={createDefaults ?? (text.trim() ? { plate: text.trim() } : undefined)}
+                    onCreate={async (data) => {
+                        const res = await api.post(base, data)
+                        const rec = (res.data?.data ?? res.data) as Record<string, unknown>
+                        pick(toResult(rec))
+                        return rec.id != null ? { id: String(rec.id) } : undefined
+                    }}
+                />
+            )}
+        </div>
+    )
+}