@asteby/metacore-runtime-react 49.3.1 → 49.5.0

package/src/business/line-product-cell.tsx

@@ -0,0 +1,219 @@
+// LineProductCell — buscador de producto DENTRO de la celda «Descripción» de un
+// renglón (patrón de editor de facturas pro: Odoo/Holded/Linear). Ocupa solo su
+// celda; la lista de resultados va en un portal (Popover de Radix anclado al
+// input): nunca la recorta el overflow de la tabla ni del modal, queda por
+// encima del diálogo y se abre hacia arriba si abajo no hay espacio.
+//
+// Teclado: ↑/↓ recorren, Enter elige (el grid pasa el foco a «Cant.»), Esc
+// cierra, Tab cierra y avanza normal. El texto escrito sin elegir queda como
+// descripción libre (el renglón libre sigue funcionando igual).
+import { forwardRef, useId, useMemo, useRef, useState, type KeyboardEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Loader2, Search } from 'lucide-react'
+import { Badge, Input, Popover, PopoverAnchor, PopoverContent } from '@asteby/metacore-ui/primitives'
+import { useFormatter } from './format'
+import { useAsyncSearch } from './use-async-search'
+import { useDebouncedValue } from '../use-debounced-value'
+import { availableStock, parseProductQuery, type ProductQuery, type ProductResult, type ProductVariant } from './product-search'
+
+export type LineProductSearch = (query: Exclude<ProductQuery, { kind: 'empty' }>, signal: AbortSignal) => Promise<ProductResult[]>
+
+export interface LineProductHit {
+    product: ProductResult
+    variant?: ProductVariant
+}
+
+export interface LineProductCellProps {
+    search: LineProductSearch
+    /** Texto de la celda (la descripción del renglón, o el borrador del renglón vacío). */
+    text: string
+    onTextChange: (text: string) => void
+    onPick: (product: ProductResult, variant?: ProductVariant) => void
+    /**
+     * Teclas que el buscador no consume (lista cerrada): el grid aplica sus
+     * comandos (Enter agrega, Supr en celda vacía borra…).
+     */
+    onKeyDownClosed?: (e: KeyboardEvent<HTMLInputElement>) => void
+    warehouseId?: string
+    currency?: string
+    placeholder?: string
+    ariaLabel: string
+    disabled?: boolean
+    invalid?: boolean
+    className?: string
+    /** Atributos de datos para que el grid ubique la celda (foco por teclado). */
+    dataCell?: string
+}
+
+export const LineProductCell = forwardRef<HTMLInputElement, LineProductCellProps>(function LineProductCell(
+    { search, text, onTextChange, onPick, onKeyDownClosed, warehouseId, currency, placeholder, ariaLabel, disabled, invalid, className, dataCell },
+    ref,
+) {
+    const { t } = useTranslation()
+    const fmt = useFormatter({ currency })
+    const listId = useId()
+    const anchorRef = useRef<HTMLDivElement>(null)
+    // Solo se abre mientras se escribe: enfocar un renglón libre ya capturado no
+    // despliega «sin resultados» encima de la tabla.
+    const [typing, setTyping] = useState(false)
+    const [active, setActive] = useState(0)
+    const parsed = parseProductQuery(text)
+    const run = useMemo(
+        () => (q: string, signal: AbortSignal) => {
+            const p = parseProductQuery(q)
+            return p.kind === 'empty' ? Promise.resolve([]) : search(p, signal)
+        },
+        [search],
+    )
+    const minChars = parsed.kind === 'barcode' ? 8 : 2
+    const delay = parsed.kind === 'barcode' ? 0 : 250
+    const { results, loading: fetching } = useAsyncSearch(typing ? text : '', run, { minChars, delay })
+    // Mientras el debounce no alcanza lo escrito, la lista dice «Buscando…» y no
+    // un «sin coincidencias» prematuro.
+    const settled = useDebouncedValue(text.trim(), delay) === text.trim()
+    const loading = fetching || !settled
+    const flat = useMemo<LineProductHit[]>(
+        () =>
+            results.flatMap((p) =>
+                (p.variants?.length ?? 0) > 0 ? p.variants!.map((v) => ({ product: p, variant: v })) : [{ product: p }],
+            ),
+        [results],
+    )
+    const queryReady = typing && text.trim().length >= minChars
+    const open = queryReady && (loading || flat.length > 0 || text.trim().length >= 2)
+    const hasHits = flat.length > 0
+
+    const close = () => {
+        setTyping(false)
+        setActive(0)
+    }
+    const choose = (idx: number) => {
+        const hit = flat[idx]
+        if (!hit) return
+        close()
+        onPick(hit.product, hit.variant)
+    }
+
+    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (open && hasHits) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault()
+                setActive((n) => Math.min(flat.length - 1, n + 1))
+                return
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault()
+                setActive((n) => Math.max(0, n - 1))
+                return
+            }
+            if (e.key === 'Enter') {
+                e.preventDefault()
+                choose(active)
+                return
+            }
+        }
+        if (open && e.key === 'Escape') {
+            // Cierra la lista sin cerrar el diálogo que la contiene.
+            e.preventDefault()
+            e.stopPropagation()
+            close()
+            return
+        }
+        if (e.key === 'Tab') close()
+        onKeyDownClosed?.(e)
+    }
+
+    return (
+        <Popover open={open} onOpenChange={(o) => !o && close()}>
+            <PopoverAnchor asChild>
+                <div ref={anchorRef} className="relative w-full min-w-0" data-slot="line-product-cell">
+                    <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" aria-hidden />
+                    <Input
+                        ref={ref}
+                        value={text}
+                        disabled={disabled}
+                        role="combobox"
+                        aria-autocomplete="list"
+                        aria-expanded={open}
+                        aria-controls={open ? listId : undefined}
+                        aria-activedescendant={open && hasHits ? `${listId}-${active}` : undefined}
+                        aria-label={ariaLabel}
+                        aria-invalid={invalid || undefined}
+                        autoComplete="off"
+                        data-cell={dataCell}
+                        placeholder={placeholder ?? t('lineItems.searchPlaceholder', { defaultValue: 'Producto, medida (205/55R16), SKU o código de barras' })}
+                        className={'h-8 pl-8 ' + (className ?? '')}
+                        onChange={(e) => {
+                            onTextChange(e.target.value)
+                            setTyping(true)
+                            setActive(0)
+                        }}
+                        onBlur={() => close()}
+                        onKeyDown={onKeyDown}
+                    />
+                </div>
+            </PopoverAnchor>
+            <PopoverContent
+                align="start"
+                sideOffset={4}
+                collisionPadding={8}
+                className="p-1"
+                data-slot="line-product-results"
+                // El foco se queda en la celda: se sigue escribiendo mientras se ve la lista.
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                onCloseAutoFocus={(e) => e.preventDefault()}
+                onInteractOutside={(e) => {
+                    if (anchorRef.current?.contains(e.target as Node)) e.preventDefault()
+                }}
+                style={{ width: 'max(var(--radix-popover-trigger-width), 22rem)', maxWidth: 'calc(100vw - 1rem)' }}
+            >
+                {hasHits ? (
+                    <ul id={listId} role="listbox" aria-label={ariaLabel} className="max-h-72 overflow-auto">
+                        {flat.map((hit, idx) => {
+                            const price = hit.variant?.price ?? hit.product.price
+                            const stock = availableStock(hit.variant ?? hit.product, warehouseId)
+                            const meta = [hit.variant?.sku ?? hit.product.sku, hit.product.tire?.normalized].filter(Boolean).join(' · ')
+                            return (
+                                <li key={`${hit.product.id}:${hit.variant?.id ?? ''}`} id={`${listId}-${idx}`} role="option" aria-selected={idx === active}>
+                                    <button
+                                        type="button"
+                                        tabIndex={-1}
+                                        className={
+                                            'flex w-full items-center justify-between gap-3 rounded-sm px-2 py-1.5 text-left text-sm outline-none hover:bg-accent hover:text-accent-foreground ' +
+                                            (idx === active ? 'bg-accent text-accent-foreground' : '')
+                                        }
+                                        onMouseDown={(e) => e.preventDefault()}
+                                        onMouseEnter={() => setActive(idx)}
+                                        onClick={() => choose(idx)}
+                                    >
+                                        <span className="min-w-0">
+                                            <span className="block truncate font-medium">{hit.variant ? `${hit.product.name} · ${hit.variant.label}` : hit.product.name}</span>
+                                            {meta && <span className="block truncate text-xs text-muted-foreground">{meta}</span>}
+                                        </span>
+                                        <span className="flex shrink-0 items-center gap-2">
+                                            {stock != null && (
+                                                <Badge variant="secondary" className="font-normal tabular-nums">
+                                                    {stock}
+                                                </Badge>
+                                            )}
+                                            {price != null && <span className="tabular-nums">{fmt.money(price)}</span>}
+                                        </span>
+                                    </button>
+                                </li>
+                            )
+                        })}
+                    </ul>
+                ) : loading ? (
+                    <p className="flex items-center justify-center gap-2 py-4 text-sm text-muted-foreground">
+                        <Loader2 className="size-4 animate-spin" aria-hidden />
+                        {t('common.searching', { defaultValue: 'Buscando…' })}
+                    </p>
+                ) : (
+                    <p className="px-2 py-3 text-sm text-muted-foreground">
+                        {t('lineItems.noProduct', { defaultValue: 'Sin coincidencias. Se usará como descripción libre.' })}
+                    </p>
+                )}
+            </PopoverContent>
+        </Popover>
+    )
+})

package/src/dynamic-select-field.tsx

@@ -28,7 +28,6 @@ import {
     Badge,
     Button,
     Command,
-    CommandEmpty,
     CommandGroup,
     CommandInput,
     CommandItem,
@@ -38,9 +37,10 @@ import {
     PopoverTrigger,
     InitialsAvatar,
 } from '@asteby/metacore-ui/primitives'
-import { Check, ChevronsUpDown, Loader2, Plus, ScanLine } from 'lucide-react'
+import { Check, ChevronsUpDown, Loader2, ScanLine } from 'lucide-react'
 import { resolveColorCss } from '@asteby/metacore-ui/lib'
 import { BarcodeScanner } from './barcode-scanner'
+import { JOINED_TRIGGER_CLASS, PickerCreateItem, RecordPickerAction, hasRecordPickerAction } from './record-picker-actions'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
 import { useDebouncedValue } from './use-debounced-value'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
@@ -190,7 +190,8 @@ export interface DynamicSelectFieldProps {
      */
     descriptionAsBadge?: boolean
     /**
-     * Hide the inline "+" create affordance even when `field.ref` is set.
+     * Hide the inline create/edit affordances (joined "+" / pencil and the
+     * "Crear …" list footer) even when `field.ref` is set.
      * Useful for static / filtered lists where creating a new record is not
      * meaningful in context.
      */
@@ -344,8 +345,31 @@ export function DynamicSelectField({
     // via a decoupled window event the host listens for. On success the host
     // hands back the new record and we select it immediately. No host import →
     // no circular dependency; works for ANY dynamic_select with a `ref`.
+    // Inline-edit: with a value selected the joined pencil opens THAT record's
+    // edit modal through the sibling `metacore:edit-record` event (the host's
+    // RecordCreateBridge already listens for it). On save the trigger label
+    // refreshes from the returned record.
+    const openEdit = () => {
+        if (!fieldRef || !value || typeof window === 'undefined') return
+        setOpen(false)
+        window.dispatchEvent(
+            new CustomEvent('metacore:edit-record', {
+                detail: {
+                    model: fieldRef,
+                    recordId: String(value),
+                    onSaved: (rec: any) => {
+                        const id = String(value)
+                        const label = rec ? rec.name ?? rec.label ?? rec.title : undefined
+                        if (label != null) setPicked({ ...(selectedOption ?? { id, value: id }), id, value: id, label: String(label), name: String(label) })
+                    },
+                },
+            }),
+        )
+    }
+
     const openCreate = () => {
         if (!fieldRef || typeof window === 'undefined') return
+        setOpen(false)
         window.dispatchEvent(
             new CustomEvent('metacore:create-record', {
                 detail: {
@@ -398,8 +422,12 @@ export function DynamicSelectField({
     // to the cell. Without min-w-0 the combobox+button row sizes to its content
     // (the long empty-state placeholder) and overflows the column, pushing the
     // "+" off-screen — it only "fit" once a short value was selected.
+    const canMutate = !!fieldRef && !hideCreate && !useStatic
+    const joined = canMutate && !blockedByDependency && hasRecordPickerAction(!!value, openCreate, openEdit)
+    const fieldName = field.label ? t(field.label, { defaultValue: field.label }) : fieldRef ?? ''
     return (
-        <div className="flex w-full min-w-0 items-center gap-1.5">
+        <div className="flex w-full min-w-0 items-center gap-1.5" data-slot="dynamic-select">
+            <div className="flex min-w-0 flex-1 items-center">
             <Popover open={open && !blockedByDependency} onOpenChange={(o: boolean) => { if (!blockedByDependency) setOpen(o) }}>
             <PopoverTrigger asChild>
                 <Button
@@ -412,6 +440,7 @@ export function DynamicSelectField({
                     aria-invalid={invalid || undefined}
                     className={
                         'min-w-0 flex-1 justify-between font-normal' +
+                        (joined ? ` ${JOINED_TRIGGER_CLASS}` : '') +
                         (invalid ? ' border-destructive ring-1 ring-destructive/30' : '')
                     }
                     data-empty={!value}
@@ -438,9 +467,13 @@ export function DynamicSelectField({
             <PopoverContent
                 className="p-0"
                 align="start"
-                // Match the trigger width without an arbitrary Tailwind class
-                // (those don't always survive a consuming app's Tailwind scan).
-                style={{ width: 'var(--radix-popover-trigger-width)' }}
+                // Portaled (never clipped by a table/modal overflow) and
+                // collision-aware: flips above the trigger when there is no
+                // room below. Match the trigger width without an arbitrary
+                // Tailwind class (those don't always survive a consuming app's
+                // Tailwind scan), with a floor so short cells stay readable.
+                collisionPadding={8}
+                style={{ width: 'max(var(--radix-popover-trigger-width), 14rem)', maxWidth: 'calc(100vw - 1rem)' }}
             >
                 <Command shouldFilter={false}>
                     <CommandInput
@@ -456,7 +489,9 @@ export function DynamicSelectField({
                             </div>
                         )}
                         {!loading && options.length === 0 && (
-                            <CommandEmpty>
+                            // Plain block, not <CommandEmpty>: cmdk hides Empty while
+                            // any item is mounted, and the "Crear …" footer is one.
+                            <div className="text-muted-foreground py-6 text-center text-sm" data-slot="picker-empty">
                                 {useStatic
                                     ? debounced
                                         ? 'Sin resultados'
@@ -464,7 +499,7 @@ export function DynamicSelectField({
                                     : debounced
                                       ? 'Sin resultados'
                                       : 'Sin resultados — escribe para filtrar'}
-                            </CommandEmpty>
+                            </div>
                         )}
                         {!loading && options.length > 0 && (
                             <CommandGroup className="max-h-64 overflow-auto">
@@ -502,10 +537,17 @@ export function DynamicSelectField({
                                 })}
                             </CommandGroup>
                         )}
+                        {canMutate && !loading && (
+                            <PickerCreateItem label={fieldName} onSelect={openCreate} />
+                        )}
                     </CommandList>
                 </Command>
             </PopoverContent>
             </Popover>
+            {canMutate && !blockedByDependency && (
+                <RecordPickerAction hasValue={!!value} label={fieldName} onCreate={openCreate} onEdit={openEdit} />
+            )}
+            </div>
             {scanEnabled && (
                 <Button
                     type="button"
@@ -519,19 +561,6 @@ export function DynamicSelectField({
                     <ScanLine className="size-4" />
                 </Button>
             )}
-            {fieldRef && !hideCreate && !useStatic && (
-                <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    className="size-9 shrink-0"
-                    onClick={openCreate}
-                    title={`Crear ${field.label ?? fieldRef}`}
-                    aria-label={`Crear ${field.label ?? fieldRef}`}
-                >
-                    <Plus className="size-4" />
-                </Button>
-            )}
             {scanEnabled && (
                 <BarcodeScanner
                     open={scanOpen}

package/src/dynamic-table.tsx

@@ -10,7 +10,7 @@
 //   * `@/components/dynamic/dynamic-columns` → host-injected via the
 //     `getDynamicColumns` prop (hosts retain ownership because the rendered
 //     column cells are tightly coupled to their design system).
-import { useEffect, useState, useMemo, useCallback, useRef, type MouseEvent } from 'react'
+import { useEffect, useState, useMemo, useCallback, useRef, type MouseEvent, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTimeZone, useCurrency } from './org-runtime-context'
 import { format } from 'date-fns'
@@ -264,6 +264,36 @@ export interface DynamicTableProps {
      * render every row. A positive number overrides the threshold.
      */
     virtualizeRows?: boolean | number
+    /**
+     * Host-provided actions rendered in the floating bar that appears while
+     * rows are selected, next to the built-in "Eliminar". Pass a node, or a
+     * function that receives the current selection:
+     *   - `selectedRows`: the selected row objects (current page only);
+     *   - `selectedIds`: their `id`s;
+     *   - `clearSelection()`: unselect everything (call after a successful action);
+     *   - `refresh()`: reload the list.
+     * The selection is cleared whenever the page, page size, sort, search or
+     * column filters change (classic pagination), so a bulk action can never
+     * hit rows the user no longer sees. The host owns the write call and its
+     * authorization — the table only supplies the selection.
+     */
+    extraBulkActions?: ReactNode | ((ctx: DynamicTableBulkContext) => ReactNode)
+    /** Hide the built-in bulk "Eliminar" (e.g. a model whose rows must not be deleted in batch). */
+    hideBulkDelete?: boolean
+    /**
+     * First-use content shown instead of "No se encontraron resultados" when the
+     * list loaded fine, is empty, and no search/filter is active. Never shown
+     * after a load error (a retry is offered) or a 403.
+     */
+    emptyState?: ReactNode
+}
+
+/** Context handed to `DynamicTableProps.extraBulkActions` when it is a function. */
+export interface DynamicTableBulkContext {
+    selectedRows: any[]
+    selectedIds: Array<string | number>
+    clearSelection: () => void
+    refresh: () => void
 }
 
 /** True when an api-client error is an HTTP 403 (axios-style or fetch-style). */
@@ -292,6 +322,9 @@ export function DynamicTable({
     pagination: paginationMode,
     infiniteScroll: infiniteScrollProp = false,
     virtualizeRows,
+    extraBulkActions,
+    hideBulkDelete,
+    emptyState,
 }: DynamicTableProps) {
     // The org's timezone/currency: an explicit prop wins, else the app-wide
     // OrgRuntimeProvider (without it, money fell back to USD).
@@ -347,6 +380,9 @@ export function DynamicTable({
     // model. Rendered as "no permission" instead of masquerading as an empty
     // list. Purely display state — never a fetch dependency (no refetch loop).
     const [forbidden, setForbidden] = useState(false)
+    // A list request that failed for a reason other than 403 (500, network,
+    // `success: false`). Shown with a retry instead of a misleading "no results".
+    const [loadError, setLoadError] = useState(false)
     const infPageRef = useRef(1)
     const [optionsMap, setOptionsMap] = useState<Map<string, any[]>>(new Map())
 
@@ -897,6 +933,7 @@ export function DynamicTable({
             if (relationInclude) params.include = relationInclude
             const res = await api.get(endpoint || `/data/${model}`, { params }) as { data: ApiResponse<any[]> }
             setForbidden(false)
+            setLoadError(!res.data.success)
             if (res.data.success) {
                 const rows = res.data.data || []
                 setData(rows)
@@ -914,10 +951,12 @@ export function DynamicTable({
         } catch (error) {
             if (isForbiddenError(error)) {
                 setForbidden(true)
+                setLoadError(false)
                 setData([])
                 setRowCount(0)
             } else {
                 console.error('Error al cargar los datos', error)
+                setLoadError(true)
             }
         } finally {
             setLoadingData(false)
@@ -968,6 +1007,7 @@ export function DynamicTable({
                     params,
                 })) as { data: ApiResponse<any[]> }
                 setForbidden(false)
+                setLoadError(!res.data.success)
                 if (res.data.success) {
                     const rows = res.data.data || []
                     setData((prev) => (append ? dedupeById(prev, rows) : rows))
@@ -989,6 +1029,7 @@ export function DynamicTable({
             } catch (error) {
                 if (isForbiddenError(error)) {
                     setForbidden(true)
+                    setLoadError(false)
                     if (!append) {
                         setData([])
                         setRowCount(0)
@@ -996,6 +1037,7 @@ export function DynamicTable({
                     setInfExhausted(true)
                 } else {
                     console.error('Error al cargar los datos', error)
+                    setLoadError(true)
                 }
             } finally {
                 if (append) setLoadingMore(false)
@@ -1372,6 +1414,10 @@ export function DynamicTable({
         manualSorting: true,
         manualFiltering: true,
         enableRowSelection: true,
+        // Key the selection by record id, not by position in the page: a bulk
+        // action must act on the rows the user ticked, never on whatever row
+        // lands at the same index after the data changes.
+        getRowId: (row: any, index: number) => (row?.id != null ? String(row.id) : String(index)),
         onRowSelectionChange: setRowSelection,
         onSortingChange: setSorting,
         onColumnVisibilityChange: setColumnVisibility,
@@ -1387,6 +1433,21 @@ export function DynamicTable({
     })
 
     const tableRows = table.getRowModel().rows
+    const bulkSelectedRows = table.getFilteredSelectedRowModel().rows.map((r) => r.original as any)
+
+    // Classic pagination swaps the visible rows on every page / sort / search /
+    // filter change; drop the selection so it never refers to rows that are no
+    // longer on screen. Infinite mode accumulates rows (selection is id-keyed,
+    // so it stays valid) and is left alone.
+    const selectionScope = infiniteScroll ? '' : JSON.stringify([pagination.pageIndex, pagination.pageSize, sorting, columnFilters, globalFilter])
+    const prevSelectionScope = useRef(selectionScope)
+    useEffect(() => {
+        if (prevSelectionScope.current !== selectionScope) {
+            prevSelectionScope.current = selectionScope
+            setRowSelection({})
+        }
+    }, [selectionScope])
+
     const virtualizeThreshold = resolveVirtualizeThreshold(virtualizeRows)
     const shouldVirtualize =
         virtualizeThreshold !== false && tableRows.length >= virtualizeThreshold
@@ -1624,6 +1685,14 @@ export function DynamicTable({
                                                         <h3 className="text-lg font-semibold text-foreground" role="alert">{t('dynamic.forbidden_title', { defaultValue: 'Sin permiso para ver este módulo' })}</h3>
                                                         <p className="text-sm text-muted-foreground">{t('dynamic.forbidden_hint', { defaultValue: 'Tu rol no tiene acceso de lectura a estos datos. Pide acceso a un administrador.' })}</p>
                                                     </>
+                                                ) : loadError ? (
+                                                    <>
+                                                        <h3 className="text-lg font-semibold text-foreground" role="alert">{t('dynamic.load_error_title', { defaultValue: 'No se pudieron cargar los datos' })}</h3>
+                                                        <p className="text-sm text-muted-foreground">{t('dynamic.load_error_hint', { defaultValue: 'Ocurrió un error al consultar la lista. Inténtalo de nuevo.' })}</p>
+                                                        <Button variant="outline" size="sm" className="mt-2" onClick={handleRefresh}>{t('dynamic.retry', { defaultValue: 'Reintentar' })}</Button>
+                                                    </>
+                                                ) : emptyState && !hasActiveFilters ? (
+                                                    emptyState
                                                 ) : (
                                                     <>
                                                         <h3 className="text-lg font-semibold text-foreground">No se encontraron resultados</h3>
@@ -1823,6 +1892,14 @@ export function DynamicTable({
                                     <h3 className='text-base font-semibold text-foreground' role='alert'>{t('dynamic.forbidden_title', { defaultValue: 'Sin permiso para ver este módulo' })}</h3>
                                     <p className='text-sm text-muted-foreground'>{t('dynamic.forbidden_hint', { defaultValue: 'Tu rol no tiene acceso de lectura a estos datos. Pide acceso a un administrador.' })}</p>
                                 </>
+                            ) : loadError ? (
+                                <>
+                                    <h3 className='text-base font-semibold text-foreground' role='alert'>{t('dynamic.load_error_title', { defaultValue: 'No se pudieron cargar los datos' })}</h3>
+                                    <p className='text-sm text-muted-foreground'>{t('dynamic.load_error_hint', { defaultValue: 'Ocurrió un error al consultar la lista. Inténtalo de nuevo.' })}</p>
+                                    <Button variant='outline' size='sm' onClick={handleRefresh}>{t('dynamic.retry', { defaultValue: 'Reintentar' })}</Button>
+                                </>
+                            ) : emptyState && !hasActiveFilters ? (
+                                emptyState
                             ) : (
                                 <>
                                     <h3 className='text-base font-semibold text-foreground'>No se encontraron resultados</h3>
@@ -1896,9 +1973,19 @@ export function DynamicTable({
                 <ImportDialog open={importOpen} onOpenChange={setImportOpen} model={model} metadata={metadata} onImported={handleRefresh} />
             )}
             <DataTableBulkActions table={table} entityName="registro">
-                <Button variant="destructive" size="sm" className="h-8" onClick={() => setShowBulkDeleteConfirm(true)}>
-                    <Trash2 className="h-4 w-4 mr-1.5" /> Eliminar
-                </Button>
+                {typeof extraBulkActions === 'function'
+                    ? extraBulkActions({
+                        selectedRows: bulkSelectedRows,
+                        selectedIds: bulkSelectedRows.map((r) => r.id).filter((id) => id != null),
+                        clearSelection: () => table.resetRowSelection(),
+                        refresh: handleRefresh,
+                    })
+                    : extraBulkActions}
+                {!hideBulkDelete && (
+                    <Button variant="destructive" size="sm" className="h-8" onClick={() => setShowBulkDeleteConfirm(true)}>
+                        <Trash2 className="h-4 w-4 mr-1.5" /> Eliminar
+                    </Button>
+                )}
             </DataTableBulkActions>
         </OptionsContext.Provider>
         </RowActionsModelContext.Provider>