@asteby/metacore-runtime-react 39.2.7 → 39.2.9

package/src/__tests__/permissions-manager.test.tsx

@@ -400,6 +400,79 @@ describe('PermissionsManager (módulo como combobox agrupado)', () => {
     })
 })
 
+describe('PermissionsManager (entradas que comparten modelo)', () => {
+    // Two sidebar entries over the same model (QA PIT-001: "Ventas POS" and
+    // "Por cobrar" both over sales_orders): picking the second must show the
+    // second, not the first entry with that key.
+    const shared: GroupedPermissionsCatalog = {
+        groups: [
+            {
+                title: 'Caja',
+                modules: [
+                    {
+                        key: 'sales_orders',
+                        label: 'Por cobrar',
+                        kind: 'model',
+                        actions: [{ key: 'index', label: 'Listar', kind: 'crud' }],
+                    },
+                ],
+            },
+            {
+                title: 'Ventas',
+                modules: [
+                    {
+                        key: 'sales_orders',
+                        label: 'Ventas POS',
+                        kind: 'model',
+                        actions: [{ key: 'index', label: 'Listar', kind: 'crud' }],
+                    },
+                ],
+            },
+        ],
+    }
+    const moduleTrigger = () => {
+        const triggers = screen.getAllByRole('combobox')
+        return triggers[triggers.length - 1]
+    }
+
+    it('seleccionar la segunda entrada muestra la segunda', async () => {
+        render(<PermissionsManager {...makeProps(shared)} />)
+        await waitFor(() => expect(moduleTrigger().textContent).toMatch(/Por cobrar/))
+        fireEvent.click(moduleTrigger())
+        fireEvent.click(await screen.findByRole('option', { name: /Ventas POS/ }))
+        await waitFor(() => expect(moduleTrigger().textContent).toMatch(/Ventas POS/))
+    })
+})
+
+describe('PermissionsManager (error al crear rol)', () => {
+    it('muestra dentro del diálogo el motivo del servidor y lo deja abierto', async () => {
+        const dup = Object.assign(new Error('Request failed with status code 422'), {
+            response: {
+                data: {
+                    success: false,
+                    code: 'duplicate',
+                    message: 'Ya existe un registro con esos datos',
+                    error: { code: 'duplicate', message: 'Ya existe un registro con esos datos' },
+                },
+            },
+        })
+        const props = makeProps(grouped, {
+            createRole: vi.fn(async () => {
+                throw dup
+            }),
+        })
+        render(<PermissionsManager {...props} />)
+        fireEvent.click(await screen.findByRole('button', { name: /Nuevo rol/ }))
+        fireEvent.change(await screen.findByLabelText('Nombre del rol'), {
+            target: { value: 'Admin' },
+        })
+        fireEvent.click(screen.getByRole('button', { name: 'Crear rol' }))
+        const alert = await screen.findByRole('alert')
+        expect(alert.textContent).toBe('Ya existe un registro con esos datos')
+        expect(screen.getByRole('dialog')).toBeTruthy()
+    })
+})
+
 describe('PermissionsManager (retrocompat shape viejo {modules})', () => {
     it('renderiza el shape flat legacy sin romper, agrupado por addon', async () => {
         const props = makeProps(legacy)

package/src/api-context.tsx

@@ -2,7 +2,9 @@
 // runtime-react components (DynamicTable, dialogs, action dispatcher) can
 // talk to the backend without a bundler alias to `@/lib/api`. Hosts wrap
 // their app in <ApiProvider value={axiosInstance}> once at the root.
-import React, { createContext, useContext } from 'react'
+import React, { createContext, useContext, useEffect, useMemo } from 'react'
+import { batchGet, invalidateQueryBatchData } from './query-batch'
+import { invalidateOptionsCache } from './use-options-resolver'
 
 /** Minimal axios-compatible client shape consumed by runtime-react. */
 export interface ApiClient {
@@ -20,16 +22,76 @@ export interface ApiProviderProps {
 }
 
 export function ApiProvider({ client, children }: ApiProviderProps) {
+    // Hosts also write through their own client (native dialogs, settings
+    // screens) without going through useApi(). When the client is axios,
+    // every non-GET response drops what the runtime remembered as well.
+    useEffect(() => {
+        const interceptors = (client as AxiosLike).interceptors?.response
+        if (!interceptors?.use) return
+        const onSettled = (config: { method?: string; url?: string } | undefined) => {
+            if (isWrite(config?.method, config?.url)) forgetRemembered()
+        }
+        const id = interceptors.use(
+            (res: any) => {
+                onSettled(res?.config)
+                return res
+            },
+            (err: any) => {
+                onSettled(err?.config)
+                return Promise.reject(err)
+            },
+        )
+        return () => interceptors.eject?.(id)
+    }, [client])
     return <ApiContext.Provider value={client}>{children}</ApiContext.Provider>
 }
 
+interface AxiosLike {
+    interceptors?: {
+        response?: {
+            use?: (onFulfilled: (res: any) => any, onRejected: (err: any) => any) => number
+            eject?: (id: number) => void
+        }
+    }
+}
+
+// The read batch is a POST to /q; it reads, so it must not count as a write.
+const BATCH_READ_URL = /(^|\/)q\/?(\?|$)/
+
+function isWrite(method: string | undefined, url: string | undefined): boolean {
+    const m = (method ?? '').toLowerCase()
+    if (m === '' || m === 'get' || m === 'head' || m === 'options') return false
+    return !BATCH_READ_URL.test(url ?? '')
+}
+
+/** Drops the batch rows and the picker options the runtime remembered. */
+function forgetRemembered(): void {
+    invalidateQueryBatchData()
+    invalidateOptionsCache()
+}
+
+function mutating<T>(request: Promise<T>): Promise<T> {
+    forgetRemembered()
+    return request.finally(forgetRemembered)
+}
+
 /** Returns the host-injected api client. Throws if no <ApiProvider> is mounted. */
 export function useApi(): ApiClient {
     const ctx = useContext(ApiContext)
     if (!ctx) {
         throw new Error('useApi() requires an <ApiProvider> ancestor. Hosts must inject an axios-like client via runtime-react ApiProvider.')
     }
-    return ctx
+    // List, metadata and options GETs share one POST /api/q. Mutations stay
+    // on the host client and, settled either way, drop the rows the batch
+    // remembered, so the refresh after a save reads the saved row. The
+    // wrapper is stable while the host client is.
+    return useMemo<ApiClient>(() => ({
+        get: (url, config) => batchGet(ctx, url, config),
+        post: (url, body, config) =>
+            isWrite('post', url) ? mutating(ctx.post(url, body, config)) : ctx.post(url, body, config),
+        put: (url, body, config) => mutating(ctx.put(url, body, config)),
+        delete: (url, config) => mutating(ctx.delete(url, config)),
+    }), [ctx])
 }
 
 /** Optional branch context — hosts that support tenant branches can supply

package/src/calendar-date.ts

@@ -0,0 +1,16 @@
+// A `date` column is a calendar day, not an instant. The backend often serves
+// it as UTC midnight ("2026-09-27T00:00:00Z"), which a plain Date parse turns
+// into the previous evening west of UTC (QA Pitsline PIT-025: picked the 27th,
+// the form showed the 26th). Read the YYYY-MM-DD prefix as a LOCAL day instead.
+
+/** Parse a calendar day ("YYYY-MM-DD…" or any Date-parseable value) into a
+ *  local Date at noon, or undefined when empty/invalid. */
+export function parseCalendarDate(v: unknown): Date | undefined {
+    if (v === null || v === undefined || v === '') return undefined
+    if (v instanceof Date) return isNaN(v.getTime()) ? undefined : v
+    const s = String(v)
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s)
+    if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), 12)
+    const d = new Date(s)
+    return isNaN(d.getTime()) ? undefined : d
+}

package/src/dialogs/dynamic-record.tsx

@@ -49,6 +49,7 @@ import {
 import { cn } from '@asteby/metacore-ui/lib'
 import { toast } from 'sonner'
 import { format, parseISO } from 'date-fns'
+import { parseCalendarDate } from '../calendar-date'
 import { es } from 'date-fns/locale'
 import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon, ScanLine } from 'lucide-react'
 import { BarcodeScanner } from '../barcode-scanner'
@@ -2125,7 +2126,11 @@ export function EditField({ field, value, onChange, record, invalid }: {
     }
 
     if (field.type === 'date' || field.type === 'datetime' || field.type === 'timestamp' || field.type === 'timestamptz') {
-        const dateValue = value ? (typeof value === 'string' ? parseISO(value) : new Date(value)) : undefined
+        // A pure `date` is a calendar day: read its YYYY-MM-DD as a local day so
+        // UTC midnight does not render as the day before (PIT-025).
+        const dateValue = field.type === 'date'
+            ? parseCalendarDate(value)
+            : value ? (typeof value === 'string' ? parseISO(value) : new Date(value)) : undefined
         // Treat the Go zero-time (0001-01-01) as empty so an unset date shows the
         // placeholder instead of "31 de diciembre de 1".
         const validDate =

package/src/dynamic-columns.tsx

@@ -15,6 +15,7 @@
 import * as React from 'react'
 import { ColumnDef } from '@tanstack/react-table'
 import { format, type Locale } from 'date-fns'
+import { parseCalendarDate } from './calendar-date'
 import { es, enUS } from 'date-fns/locale'
 import { Calendar, Check, Copy, Mail, Minus, MoreHorizontal } from 'lucide-react'
 import {
@@ -507,7 +508,8 @@ export function formatDateCell(
             title: format(date, 'PPpp', { locale }),
         }
     }
-    return { display: format(date, 'PPP', { locale }) }
+    // Calendar day without an org zone: read YYYY-MM-DD as a local day.
+    return { display: format(parseCalendarDate(value) ?? date, 'PPP', { locale }) }
 }
 
 /**

package/src/dynamic-date-field.tsx

@@ -21,6 +21,7 @@ import {
 } from '@asteby/metacore-ui/primitives'
 import { CalendarIcon } from 'lucide-react'
 import type { ActionFieldDef } from './types'
+import { parseCalendarDate } from './calendar-date'
 
 export interface DynamicDateFieldProps {
     field: ActionFieldDef
@@ -28,16 +29,7 @@ export interface DynamicDateFieldProps {
     onChange: (v: any) => void
 }
 
-// Parse "YYYY-MM-DD" (or any Date-parseable string) into a local Date, or
-// undefined when empty/invalid. Uses noon to dodge timezone day-shift.
-function toDate(v: any): Date | undefined {
-    if (!v) return undefined
-    const s = String(v)
-    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s)
-    if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), 12)
-    const d = new Date(s)
-    return isNaN(d.getTime()) ? undefined : d
-}
+const toDate = parseCalendarDate
 
 // Format a Date back to "YYYY-MM-DD" (local, no timezone shift).
 function toISO(d: Date): string {

package/src/dynamic-table.tsx

@@ -78,6 +78,7 @@ import {
 import { OptionsContext } from './options-context'
 import type { TableMetadata, ApiResponse, ColumnDefinition } from './types'
 import { getSearchableColumnKeys } from './column-visibility'
+import { visibleRelationInclude } from './list-include'
 import { useDebouncedValue } from './use-debounced-value'
 import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-context'
 import { useDynamicRowActions } from './dynamic-row-actions'
@@ -808,6 +809,11 @@ export function DynamicTable({
         return Array.from(set)
     }, [hiddenColumns, scopeHiddenColumns])
 
+    const relationInclude = useMemo(
+        () => visibleRelationInclude(metadata?.columns, effectiveHiddenColumns),
+        [metadata, effectiveHiddenColumns],
+    )
+
     const buildFilterParams = useCallback(() => {
         const params: Record<string, any> = {}
         if (sorting.length > 0) {
@@ -868,6 +874,7 @@ export function DynamicTable({
                 per_page: pagination.pageSize,
                 ...buildFilterParams(),
             }
+            if (relationInclude) params.include = relationInclude
             const res = await api.get(endpoint || `/data/${model}`, { params }) as { data: ApiResponse<any[]> }
             setForbidden(false)
             if (res.data.success) {
@@ -895,7 +902,7 @@ export function DynamicTable({
         } finally {
             setLoadingData(false)
         }
-    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api, enableUrlSync])
+    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api, enableUrlSync, relationInclude])
 
     // Columns whose metadata opts into a footer total (display_config.aggregate
     // → styleConfig.aggregate). When empty, no footer row is rendered and no
@@ -936,6 +943,7 @@ export function DynamicTable({
                     per_page: infPageSize,
                     ...buildFilterParams(),
                 }
+                if (relationInclude) params.include = relationInclude
                 const res = (await api.get(endpoint || `/data/${model}`, {
                     params,
                 })) as { data: ApiResponse<any[]> }
@@ -974,7 +982,7 @@ export function DynamicTable({
                 else setLoadingData(false)
             }
         },
-        [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id, enableUrlSync],
+        [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id, enableUrlSync, relationInclude],
     )
 
     // Signature of everything that must reset the incremental list to page 1:

package/src/index.ts

@@ -393,14 +393,24 @@ export {
     getSearchableColumnKeys,
 } from './column-visibility'
 export {
+    batchGet,
     loadQueryPart,
     nameBatchTokens,
+    narrowInToken,
     optionsBatchToken,
     optionsModelFromUrl,
+    rememberInRows,
+    invalidateQueryBatchData,
+    resetQueryBatchCache,
+    splitInToken,
+    tokenForGet,
+    type InListToken,
+    type NarrowedIn,
     type QueryPart,
 } from './query-batch'
 export {
     useOptionsResolver,
+    invalidateOptionsCache,
     projectOption,
     type ResolvedOption,
     type OptionsMeta,

package/src/list-include.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { visibleRelationInclude } from './list-include'
+import type { ColumnDefinition } from './types'
+
+function col(partial: Partial<ColumnDefinition> & { key: string }): ColumnDefinition {
+    return { label: partial.key, type: 'text', sortable: false, filterable: false, ...partial }
+}
+
+describe('visibleRelationInclude', () => {
+    it('omits the parameter when the table has no relations', () => {
+        expect(visibleRelationInclude([col({ key: 'name' })])).toBeUndefined()
+        expect(visibleRelationInclude(undefined)).toBeUndefined()
+    })
+
+    it('lists only the visible relation columns', () => {
+        const include = visibleRelationInclude([
+            col({ key: 'name' }),
+            col({ key: 'customer_id', type: 'relation' }),
+            col({ key: 'warehouse_id', ref: 'inventory.Warehouse', hidden: true }),
+            col({ key: 'created_by', type: 'creator' }),
+            col({ key: 'items', item_fields: [{ key: 'product_id', label: 'Producto' }] }),
+        ])
+        expect(include).toBe('customer_id,created_by,items')
+    })
+
+    it('drops a column the view hid', () => {
+        const include = visibleRelationInclude(
+            [col({ key: 'customer_id', type: 'relation' }), col({ key: 'user_id', type: 'user' })],
+            ['user_id'],
+        )
+        expect(include).toBe('customer_id')
+    })
+})

package/src/list-include.ts

@@ -0,0 +1,34 @@
+import type { ColumnDefinition } from './types'
+
+/**
+ * Columns whose labels come from a relation lookup. The list asks the server
+ * to resolve only these, so hidden foreign keys do not each become a query.
+ * Returns undefined when nothing relational is visible: the server then keeps
+ * resolving everything, which is what hosts do before they send `include=`.
+ */
+export function visibleRelationInclude(
+    columns: ColumnDefinition[] | undefined,
+    hidden: string[] = [],
+): string | undefined {
+    if (!columns?.length) return undefined
+    const hide = new Set(hidden)
+    const keys: string[] = []
+    for (const col of columns) {
+        if (!col?.key || col.hidden || hide.has(col.key)) continue
+        if (col.visibility === 'modal' || col.visibility === 'list') continue
+        if (!columnNeedsRelation(col)) continue
+        keys.push(col.key)
+    }
+    if (keys.length === 0) return undefined
+    return keys.join(',')
+}
+
+function columnNeedsRelation(col: ColumnDefinition): boolean {
+    if (col.type === 'relation' || col.type === 'relation-badge-list' || col.type === 'creator' || col.type === 'user') {
+        return true
+    }
+    if (col.cellStyle === 'relation' || col.cellStyle === 'reference') return true
+    if (col.ref) return true
+    if (col.itemFields?.length || col.item_fields?.length) return true
+    return false
+}

package/src/permissions-manager.tsx

@@ -38,6 +38,7 @@ import {
     Trash2,
 } from 'lucide-react'
 import { toast } from 'sonner'
+import { extractServerError } from './server-error'
 import { cn } from '@asteby/metacore-ui/lib'
 import {
     AlertDialog,
@@ -397,6 +398,29 @@ export function normalizeCatalogGroups(catalog: PermissionsCatalog): ModuleGroup
 }
 
 /** Flat list of every module across groups, in render order. */
+/** Identity of one picker entry: its group index and its index in the group. */
+export function moduleEntryId(groupIndex: number, moduleIndex: number): string {
+    return `${groupIndex}:${moduleIndex}`
+}
+
+/** The first entry of the catalog, or null when it has no modules. */
+export function firstModuleEntryId(groups: ModuleGroup[]): string | null {
+    const gi = groups.findIndex((g) => g.modules.length > 0)
+    return gi < 0 ? null : moduleEntryId(gi, 0)
+}
+
+/** Resolve an entry id back to its module and group. */
+export function moduleAtEntry(
+    groups: ModuleGroup[] | null | undefined,
+    id: string | null,
+): { module: PermissionModuleDef; group: ModuleGroup } | null {
+    if (!groups || !id) return null
+    const [gi, mi] = id.split(':').map(Number)
+    const group = groups[gi!]
+    const module = group?.modules[mi!]
+    return group && module ? { module, group } : null
+}
+
 export function flattenGroups(groups: ModuleGroup[]): PermissionModuleDef[] {
     return groups.flatMap((g) => g.modules)
 }
@@ -546,6 +570,10 @@ export function PermissionsManager({
     const [loadError, setLoadError] = React.useState(false)
 
     const [activeRoleId, setActiveRoleId] = React.useState<string | null>(null)
+    // The picker selection is the ENTRY (group index : module index), not the
+    // module key: two sidebar entries may govern the same model (e.g. "Ventas
+    // POS" and "Por cobrar" both over sales_orders) and a key-based lookup
+    // always landed on the first of them.
     const [activeModuleKey, setActiveModuleKey] = React.useState<string | null>(null)
 
     // baseline = capabilities as persisted; draft = baseline + local edits.
@@ -567,6 +595,8 @@ export function PermissionsManager({
         color: string
         icon: string
         grantAll: boolean
+        /** Server rejection shown inside the dialog (e.g. duplicate name). */
+        error?: string
     }>({
         open: false,
         mode: 'create',
@@ -594,9 +624,7 @@ export function PermissionsManager({
                 setGeneral(cat.general ?? [])
                 setRoles(rs)
                 setActiveRoleId((prev) => prev ?? rs[0]?.id ?? null)
-                setActiveModuleKey(
-                    (prev) => prev ?? flattenGroups(grouped)[0]?.key ?? null,
-                )
+                setActiveModuleKey((prev) => prev ?? firstModuleEntryId(grouped))
             })
             .catch(() => {
                 if (!cancelled) setLoadError(true)
@@ -642,8 +670,8 @@ export function PermissionsManager({
         [roles, activeRoleId],
     )
     const activeModule = React.useMemo(
-        () => allModules.find((m) => m.key === activeModuleKey) ?? null,
-        [allModules, activeModuleKey],
+        () => moduleAtEntry(groups, activeModuleKey)?.module ?? null,
+        [groups, activeModuleKey],
     )
 
     const dirty = baseline !== null && draft !== null && !capabilitySetsEqual(baseline, draft)
@@ -730,6 +758,7 @@ export function PermissionsManager({
         const label = roleDialog.label.trim()
         if (!label) return
         setRoleSaving(true)
+        setRoleDialog((d) => ({ ...d, error: undefined }))
         try {
             if (roleDialog.mode === 'create' && createRole) {
                 const created = await createRole({
@@ -764,10 +793,15 @@ export function PermissionsManager({
                 toast.success('Rol actualizado')
             }
             setRoleDialog((d) => ({ ...d, open: false }))
-        } catch {
-            toast.error(
-                roleDialog.mode === 'create' ? 'No se pudo crear el rol' : 'No se pudo actualizar el rol',
-            )
+        } catch (err) {
+            // Keep the dialog open WITH the server's reason (422 duplicate name,
+            // 403 …): a toast alone can sit behind the modal overlay.
+            const fallback =
+                roleDialog.mode === 'create' ? 'No se pudo crear el rol' : 'No se pudo actualizar el rol'
+            const { title, description } = extractServerError(err, fallback)
+            const error = description ? `${title}: ${description}` : title
+            setRoleDialog((d) => ({ ...d, error }))
+            toast.error(fallback, { description: error })
         } finally {
             setRoleSaving(false)
         }
@@ -806,11 +840,10 @@ export function PermissionsManager({
     const moduleGranted = activeModule && draft ? grantedCountForModule(draft, activeModule) : 0
     const moduleTotal = activeModule?.actions.length ?? 0
     const checksDisabled = !activeRole || !draft || loadingPerms || saving
-    const activeModuleGroupTitle = React.useMemo(() => {
-        if (!activeModule || !groups) return ''
-        const g = groups.find((grp) => grp.modules.some((m) => m.key === activeModule.key))
-        return g?.title ?? ''
-    }, [activeModule, groups])
+    const activeModuleGroupTitle = React.useMemo(
+        () => moduleAtEntry(groups, activeModuleKey)?.group.title ?? '',
+        [groups, activeModuleKey],
+    )
 
     // ---- render --------------------------------------------------------------
     if (loadError) {
@@ -1094,12 +1127,12 @@ export function PermissionsManager({
                                                     key={group.title || `__untitled_${gi}`}
                                                     heading={group.title || undefined}
                                                 >
-                                                    {group.modules.map((mod) => (
+                                                    {group.modules.map((mod, mi) => (
                                                         <CommandItem
-                                                            key={mod.key}
-                                                            value={`${group.title} ${mod.label} ${mod.key}`}
+                                                            key={moduleEntryId(gi, mi)}
+                                                            value={`${group.title} ${mod.label} ${mod.key} ${moduleEntryId(gi, mi)}`}
                                                             onSelect={() => {
-                                                                setActiveModuleKey(mod.key)
+                                                                setActiveModuleKey(moduleEntryId(gi, mi))
                                                                 setModuleOpen(false)
                                                             }}
                                                         >
@@ -1129,7 +1162,7 @@ export function PermissionsManager({
                                                                         /{mod.actions.length}
                                                                     </Badge>
                                                                 )}
-                                                            {mod.key === activeModuleKey && (
+                                                            {moduleEntryId(gi, mi) === activeModuleKey && (
                                                                 <Check className="ml-2 h-4 w-4 shrink-0" />
                                                             )}
                                                         </CommandItem>
@@ -1270,6 +1303,7 @@ export function PermissionsManager({
                                     setRoleDialog((d) => ({
                                         ...d,
                                         label,
+                                        error: undefined,
                                         icon:
                                             d.icon === suggestRoleIcon(d.label) ||
                                             d.icon === 'Shield' ||
@@ -1330,6 +1364,11 @@ export function PermissionsManager({
                                 </span>
                             </label>
                         )}
+                        {roleDialog.error && (
+                            <p role="alert" className="text-sm text-destructive">
+                                {roleDialog.error}
+                            </p>
+                        )}
                     </div>
                     <DialogFooter>
                         <Button