@asteby/metacore-runtime-react 46.4.0 → 47.1.0

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>
+    )
+}

package/src/cfdi-stamp-panel.tsx

@@ -0,0 +1,146 @@
+// CfdiStampPanel — human-readable result of stamping (timbrar) a CFDI.
+//
+// A stamp action answers `{ document_id, fiscal_uuid, pdf_url, xml_url }`. The
+// dialog used to dump that JSON; this panel shows the fiscal UUID as text and
+// the PDF / XML as download links instead (#1024, FAC-3 / PIT-051). The SDK
+// invents nothing: only the keys the server actually returned are rendered.
+import { useTranslation } from 'react-i18next'
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Button,
+} from '@asteby/metacore-ui/primitives'
+import { CheckCircle2, FileCode2, FileText } from 'lucide-react'
+
+export interface CfdiStampResult {
+    fiscalUuid?: string
+    pdfUrl?: string
+    xmlUrl?: string
+    /** Optional human folio (`serie-folio`) when the server sends it. */
+    folio?: string
+    documentId?: string
+}
+
+const str = (v: unknown): string | undefined =>
+    typeof v === 'string' && v.trim() ? v.trim() : undefined
+
+const isSafeUrl = (u: string) => /^(https?:)?\/\//i.test(u) || u.startsWith('/') || u.startsWith('blob:')
+
+/**
+ * Reads a stamp result out of a successful action response body. Looks at
+ * `body.data`, `body.result` and the body itself. Returns `undefined` unless
+ * the payload carries `fiscal_uuid` and/or `pdf_url` / `xml_url` — a response
+ * without those keys is never turned into a fiscal result.
+ */
+export function extractStampResult(body: unknown): CfdiStampResult | undefined {
+    if (!body || typeof body !== 'object') return undefined
+    const b = body as Record<string, unknown>
+    const candidates = [b.data, b.result, b]
+    for (const c of candidates) {
+        if (!c || typeof c !== 'object' || Array.isArray(c)) continue
+        const o = c as Record<string, unknown>
+        const fiscalUuid = str(o.fiscal_uuid) ?? str(o.fiscalUuid) ?? str(o.uuid)
+        const pdf = str(o.pdf_url) ?? str(o.pdfUrl)
+        const xml = str(o.xml_url) ?? str(o.xmlUrl)
+        // A bare `uuid` is too generic to call a fiscal result on its own.
+        const hasFiscal = !!str(o.fiscal_uuid) || !!str(o.fiscalUuid) || !!pdf || !!xml
+        if (!hasFiscal) continue
+        return {
+            fiscalUuid,
+            pdfUrl: pdf && isSafeUrl(pdf) ? pdf : undefined,
+            xmlUrl: xml && isSafeUrl(xml) ? xml : undefined,
+            folio: str(o.folio) ?? str(o.number),
+            documentId: str(o.document_id) ?? str(o.documentId),
+        }
+    }
+    return undefined
+}
+
+export interface CfdiStampPanelProps {
+    result: CfdiStampResult
+    className?: string
+}
+
+export function CfdiStampPanel({ result, className }: CfdiStampPanelProps) {
+    const { t } = useTranslation()
+    return (
+        <div data-slot="cfdi-stamp-panel" className={`space-y-4 ${className ?? ''}`}>
+            <div className="flex items-center gap-2 text-sm font-medium text-emerald-600 dark:text-emerald-400">
+                <CheckCircle2 className="size-5" aria-hidden />
+                {t('cfdi.stamp.success', { defaultValue: 'CFDI timbrado correctamente' })}
+            </div>
+            <dl className="space-y-2 rounded-md border bg-muted/40 p-3 text-sm">
+                {result.folio && (
+                    <div className="flex flex-col gap-0.5">
+                        <dt className="text-xs uppercase tracking-wide text-muted-foreground">
+                            {t('cfdi.stamp.folio', { defaultValue: 'Folio' })}
+                        </dt>
+                        <dd>{result.folio}</dd>
+                    </div>
+                )}
+                {result.fiscalUuid && (
+                    <div className="flex flex-col gap-0.5">
+                        <dt className="text-xs uppercase tracking-wide text-muted-foreground">
+                            {t('cfdi.stamp.uuid', { defaultValue: 'UUID fiscal' })}
+                        </dt>
+                        <dd className="break-all font-mono" data-slot="cfdi-stamp-uuid">
+                            {result.fiscalUuid}
+                        </dd>
+                    </div>
+                )}
+            </dl>
+            {(result.pdfUrl || result.xmlUrl) && (
+                <div className="flex flex-wrap gap-2">
+                    {result.pdfUrl && (
+                        <Button asChild variant="outline" size="sm">
+                            <a href={result.pdfUrl} target="_blank" rel="noopener noreferrer" data-slot="cfdi-stamp-pdf">
+                                <FileText className="mr-2 size-4" aria-hidden />
+                                {t('cfdi.stamp.pdf', { defaultValue: 'Descargar PDF' })}
+                            </a>
+                        </Button>
+                    )}
+                    {result.xmlUrl && (
+                        <Button asChild variant="outline" size="sm">
+                            <a href={result.xmlUrl} target="_blank" rel="noopener noreferrer" data-slot="cfdi-stamp-xml">
+                                <FileCode2 className="mr-2 size-4" aria-hidden />
+                                {t('cfdi.stamp.xml', { defaultValue: 'Descargar XML' })}
+                            </a>
+                        </Button>
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export interface CfdiStampResultDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    result: CfdiStampResult
+    title?: string
+}
+
+/** Dialog shell used by the action modals after a successful stamp. */
+export function CfdiStampResultDialog({ open, onOpenChange, result, title }: CfdiStampResultDialogProps) {
+    const { t } = useTranslation()
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>{title ?? t('cfdi.stamp.title', { defaultValue: 'Resultado del timbrado' })}</DialogTitle>
+                    <DialogDescription className="sr-only">
+                        {t('cfdi.stamp.desc', { defaultValue: 'UUID fiscal y archivos del CFDI timbrado' })}
+                    </DialogDescription>
+                </DialogHeader>
+                <CfdiStampPanel result={result} />
+                <DialogFooter>
+                    <Button onClick={() => onOpenChange(false)}>{t('common.close', { defaultValue: 'Cerrar' })}</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/dialogs/dynamic-record.tsx

@@ -9,6 +9,7 @@
 // flows through <ApiProvider> from runtime-react. Host-specific runtime values —
 // the image-url resolver and the org IANA timezone — are passed as props so the
 // SDK stays transport- and host-agnostic.
+import { emitRecordMutation } from '../record-mutation-events'
 import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { ModelSchema } from './types'
@@ -59,6 +60,8 @@ import { toastServerError, extractFieldErrors, localizeFieldIssue, localizeField
 import { DynamicSelectField, OptionLead, OptionThumb } from '../dynamic-select-field'
 import { DynamicMultiSelectField } from '../dynamic-multi-select-field'
 import { DynamicRelations } from '../dynamic-relations'
+import { AuditInfo, readAuditMeta } from '../audit-info'
+import type { AuditMeta } from '../types'
 import { useOptionsResolver, type ResolvedOption } from '../use-options-resolver'
 import { getFieldRef, getVisibleWhen, evaluateVisibleWhen, ATTRIBUTE_CLASSES_KEY } from '../dynamic-form-schema'
 import { useAttributeClasses, type AttributeClass } from '../attribute-classes'
@@ -642,6 +645,7 @@ export function DynamicRecordDialog({
         schema ? (schema as ModalMetadata) : null,
     )
     const [relations, setRelations] = useState<RelationMeta[]>([])
+    const [audit, setAudit] = useState<AuditMeta | undefined>(undefined)
     const [record, setRecord] = useState<any | null>(null)
     const [formValues, setFormValues] = useState<Record<string, any>>({})
     // Classes of the record's category (plus those its saved data carries), for
@@ -783,6 +787,7 @@ export function DynamicRecordDialog({
     useEffect(() => {
         if (!open || mode === 'create' || !recordId) {
             setRelations([])
+            setAudit(undefined)
             return
         }
         let cancelled = false
@@ -791,6 +796,7 @@ export function DynamicRecordDialog({
                 if (cancelled) return
                 const meta = res.data?.data ?? res.data
                 const rels: RelationMeta[] = Array.isArray(meta?.relations) ? meta.relations : []
+                setAudit(readAuditMeta(meta?.audit))
                 // Localize each panel header: the backend serves `label` as an
                 // i18n key (addon bundle, loaded live) and the SDK renders it verbatim.
                 setRelations(
@@ -945,6 +951,7 @@ export function DynamicRecordDialog({
             if (isCreate && onCreate) {
                 const created = await onCreate(payload)
                 toast.success(modalMeta?.messages?.created || t('dynamic.create_success', { defaultValue: 'Registro creado correctamente' }))
+                emitRecordMutation(model, 'create')
                 onSaved?.(created ?? undefined)
                 onOpenChange(false)
                 return
@@ -953,6 +960,7 @@ export function DynamicRecordDialog({
             if (!isCreate && recordId && onUpdate) {
                 const updated = await onUpdate(String(recordId), payload)
                 toast.success(modalMeta?.messages?.updated || t('dynamic.update_success', { defaultValue: 'Guardado correctamente' }))
+                emitRecordMutation(model, 'update')
                 onSaved?.(updated ?? undefined)
                 onOpenChange(false)
                 return
@@ -980,6 +988,7 @@ export function DynamicRecordDialog({
                             : t('dynamic.update_success', { defaultValue: 'Guardado correctamente' })),
                 )
                 // Hand the persisted record back so callers can auto-select it.
+                emitRecordMutation(model, isCreate ? 'create' : 'update')
                 onSaved?.(res.data?.data ?? res.data ?? undefined)
                 onOpenChange(false)
             } else {
@@ -1000,6 +1009,7 @@ export function DynamicRecordDialog({
         setDeleting(true)
         try {
             await onDelete()
+            emitRecordMutation(model, 'delete')
             onOpenChange(false)
         } catch (err: any) {
             console.error('[DynamicRecordDialog] delete error:', err)
@@ -1184,6 +1194,14 @@ export function DynamicRecordDialog({
                                     />
                                 </div>
                             )}
+                            {!isCreate && record && audit && (
+                                <AuditInfo
+                                    record={record}
+                                    audit={audit}
+                                    timeZone={timeZone}
+                                    className="mt-6 border-t pt-3"
+                                />
+                            )}
                         </CurrencyContext.Provider>
                         </TimeZoneContext.Provider>
                         </ImageUrlContext.Provider>