@asteby/metacore-runtime-react 34.1.0 → 35.1.0

package/src/dynamic-columns.tsx

@@ -44,9 +44,10 @@ import {
 import { Progress } from './dialogs/_primitives'
 import { humanizeToken } from './dynamic-columns-helpers'
 import { objectLabel } from './dynamic-relation-helpers'
-import { ImageStack,
+import {
     OptionBadge,
     RelationThumbnail,
+    ImageStack,
     statusColorFor,
     useIsDarkTheme,
 } from './display-value'
@@ -603,6 +604,10 @@ export const resolveRelationSubtitle = (col: ColumnDefinition, row: any): string
  * carries an `image`. Falls back to the raw id when no sibling was resolved, and
  * to an empty marker when there is no value at all. Domain-agnostic: works for
  * every `belongs_to` column (category, supplier, brand, …) without per-addon code.
+ *
+ * When `stack` is true (column `display: "image_stack"`), the landscape mark
+ * sits ON TOP of the label — wide logos fit without cropping and the cell
+ * stays readable in dense tables.
  */
 const RelationCell: React.FC<{
     col: ColumnDefinition
@@ -944,7 +949,15 @@ export function makeDefaultGetDynamicColumns(
                     }
 
                     // Landscape stack: wide image ON TOP, label UNDERNEATH.
+                    // Declared via `display: "image_stack"` on an image column
+                    // or on a belongs_to FK whose sibling carries a logo/photo
+                    // (brand marks, product cards). Fits logos that are wider
+                    // than tall without cropping into a square thumb.
                     if (renderAs === 'image_stack') {
+                        // FK relation (brand_id → brands) OR any column that
+                        // already resolved a sibling with an image — stack it.
+                        // Don't require `col.ref` alone: enrichment sometimes
+                        // leaves type=text while cellStyle carries image_stack.
                         const looksRelation =
                             !!col.ref ||
                             (typeof col.key === 'string' &&
@@ -1332,30 +1345,33 @@ export function makeDefaultGetDynamicColumns(
                             )
                         }
 
-                        case 'image_stack': {
+                        case 'image': {
                             const imageValue =
                                 value ||
                                 (Array.isArray(row.original.media)
                                     ? row.original.media.find((m: any) => m.type === 'image')?.url
                                     : null)
+                            return <ImageCell value={imageValue} getImageUrl={getImageUrl} />
+                        }
+
+                        case 'image_stack': {
+                            // Defensive: normally handled above before the
+                            // switch; kept so a late `type: image_stack` without
+                            // cellStyle still stacks.
+                            const labelField = styleCfg(col, 'label_field', 'labelField')
+                            const caption = labelField
+                                ? String(getNestedValue(row.original, labelField) ?? '')
+                                : undefined
                             return (
                                 <ImageCell
-                                    value={imageValue}
+                                    value={value}
                                     getImageUrl={getImageUrl}
+                                    label={caption || undefined}
                                     stack
                                 />
                             )
                         }
 
-                        case 'image': {
-                            const imageValue =
-                                value ||
-                                (Array.isArray(row.original.media)
-                                    ? row.original.media.find((m: any) => m.type === 'image')?.url
-                                    : null)
-                            return <ImageCell value={imageValue} getImageUrl={getImageUrl} />
-                        }
-
                         default: {
                             if (typeof value === 'object' && value !== null) {
                                 return (

package/src/dynamic-form.tsx

@@ -35,6 +35,7 @@ import { DynamicSelectField } from './dynamic-select-field'
 import { DynamicDateField } from './dynamic-date-field'
 import { UploadField } from './upload-field'
 import { IconPickerField } from './icon-picker-field'
+import { ColorPickerField } from './color-picker-field'
 
 export { buildZodSchema, resolveWidget }
 export { DynamicLineItems } from './dynamic-line-items'
@@ -42,6 +43,7 @@ export { DynamicSelectField } from './dynamic-select-field'
 export { DynamicDateField } from './dynamic-date-field'
 export { UploadField } from './upload-field'
 export { IconPickerField } from './icon-picker-field'
+export { ColorPickerField, DEFAULT_ROLE_COLOR, normalizeHex } from './color-picker-field'
 
 export interface DynamicFormProps {
     fields: ActionFieldDef[]
@@ -399,7 +401,13 @@ function FieldRenderer({
             // / future MDX editor pick it up without breaking the contract.
             return <Textarea id={field.key} data-widget="richtext" value={value || ''} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
         case 'color':
-            return <Input id={field.key} type="color" value={value || '#000000'} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} />
+            return (
+                <ColorPickerField
+                    aria-label={field.label || field.key}
+                    value={typeof value === 'string' ? value : ''}
+                    onChange={onChange}
+                />
+            )
         case 'select':
             return (
                 <Select value={value || ''} onValueChange={onChange}>

package/src/dynamic-select-field.tsx

@@ -22,6 +22,7 @@
 // value). A dedicated `?ids=` lookup is a follow-up; create flows — the common
 // case — start empty and never hit this.
 import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
     Badge,
     Button,
@@ -205,6 +206,9 @@ export function DynamicSelectField({
     descriptionAsBadge = false,
     hideCreate = false,
 }: DynamicSelectFieldProps) {
+    const { t } = useTranslation()
+    const ph = (fallback: string) =>
+        field.placeholder ? t(field.placeholder, { defaultValue: field.placeholder }) : fallback
     const [open, setOpen] = useState(false)
     const [search, setSearch] = useState('')
     const [scanOpen, setScanOpen] = useState(false)
@@ -353,7 +357,7 @@ export function DynamicSelectField({
                     <span className={'min-w-0 flex-1 truncate ' + (selectedOption ? '' : 'text-muted-foreground')}>
                         {/* Never flash the raw id: until the eager fetch resolves the
                             option, show a loading hint instead of String(value). */}
-                        {selectedOption?.label ?? (loading ? 'Cargando…' : field.placeholder || '—')}
+                        {selectedOption?.label ?? (loading ? 'Cargando…' : ph('—'))}
                     </span>
                 </span>
             </Button>
@@ -386,7 +390,7 @@ export function DynamicSelectField({
                         <span className={'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground')}>
                             {blockedByDependency
                                 ? (dependsHint || DEFAULT_DEPENDS_HINT)
-                                : selectedLabel || field.placeholder || 'Buscar…'}
+                                : selectedLabel || ph('Buscar…')}
                         </span>
                         {descriptionAsBadge && selectedOption?.description ? (
                             <Badge variant="secondary" className="shrink-0 font-normal tabular-nums">
@@ -406,7 +410,7 @@ export function DynamicSelectField({
             >
                 <Command shouldFilter={false}>
                     <CommandInput
-                        placeholder={field.placeholder || 'Buscar…'}
+                        placeholder={ph('Buscar…')}
                         value={search}
                         onValueChange={setSearch}
                     />

package/src/index.ts

@@ -178,6 +178,7 @@ export {
     type UseDynamicRowActionsParams,
     type DynamicRowActions,
 } from './dynamic-row-actions'
+export { ColorPickerField, DEFAULT_ROLE_COLOR, normalizeHex } from './color-picker-field'
 export {
     PermissionsManager,
     moduleActionCapability,
@@ -185,6 +186,7 @@ export {
     grantedCountForModule,
     capabilitySetsEqual,
     defaultActionIcon,
+    suggestRoleIcon,
     normalizeCatalogGroups,
     flattenGroups,
     filterModuleGroups,

package/src/permissions-manager.tsx

@@ -79,6 +79,9 @@ import {
     CollapsibleTrigger,
 } from '@asteby/metacore-ui/primitives'
 import { DynamicIcon } from './dynamic-icon'
+import { IconPickerField } from './icon-picker-field'
+import { ColorPickerField, DEFAULT_ROLE_COLOR } from './color-picker-field'
+import type { ActionFieldDef } from './types'
 
 // ---------------------------------------------------------------------------
 // Types (mirror of `GET /api/permissions/modules` + the host sidebar nav)
@@ -183,12 +186,15 @@ export interface RoleDef {
     label?: string
     /** Accent color (hex) for the role chip. */
     color?: string
+    /** Lucide PascalCase name (or image path) for the role chip. */
+    icon?: string
 }
 
 export interface RoleInput {
     name: string
     label?: string
     color?: string
+    icon?: string
 }
 
 export interface PermissionsManagerProps {
@@ -330,17 +336,28 @@ function slugify(label: string): string {
         .replace(/^_+|_+$/g, '')
 }
 
-const ROLE_COLORS = [
-    '#ef4444',
-    '#f97316',
-    '#eab308',
-    '#22c55e',
-    '#06b6d4',
-    '#3b82f6',
-    '#8b5cf6',
-    '#ec4899',
-    '#6b7280',
-]
+/** Suggest a Lucide icon from the role label (create-dialog default). */
+export function suggestRoleIcon(label: string): string {
+    const s = fold(label)
+    const rules: Array<[RegExp, string]> = [
+        [/cajer|cash|teller|bank/, 'Banknote'],
+        [/vend|seller|sales|shop|mostrador/, 'ShoppingBag'],
+        [/mecanic|technic|wrench|taller/, 'Wrench'],
+        [/jefe|lead|manager|gerente|supervisor/, 'HardHat'],
+        [/almacen|ware|stock|invent/, 'Warehouse'],
+        [/compr|purch|buyer/, 'Truck'],
+        [/contad|account|ledger/, 'Calculator'],
+        [/nomina|payroll|sueldo/, 'Wallet'],
+        [/rh|hr|human|emplead|people/, 'Users'],
+        [/fleet|flota|vehic/, 'Car'],
+        [/admin|dueño|owner/, 'ShieldCheck'],
+        [/view|observa|lectura|read/, 'Eye'],
+    ]
+    for (const [re, icon] of rules) {
+        if (re.test(s)) return icon
+    }
+    return 'Shield'
+}
 
 /**
  * Normalize whatever `loadModules` returned into the canonical grouped shape.
@@ -548,8 +565,16 @@ export function PermissionsManager({
         mode: 'create' | 'edit'
         label: string
         color: string
+        icon: string
         grantAll: boolean
-    }>({ open: false, mode: 'create', label: '', color: ROLE_COLORS[5], grantAll: false })
+    }>({
+        open: false,
+        mode: 'create',
+        label: '',
+        color: DEFAULT_ROLE_COLOR,
+        icon: 'Shield',
+        grantAll: false,
+    })
     const [roleSaving, setRoleSaving] = React.useState(false)
     const [deleteOpen, setDeleteOpen] = React.useState(false)
     const [deleting, setDeleting] = React.useState(false)
@@ -711,6 +736,7 @@ export function PermissionsManager({
                     name: slugify(label),
                     label,
                     color: roleDialog.color,
+                    icon: roleDialog.icon || suggestRoleIcon(label),
                 })
                 const rs = await loadRoles()
                 setRoles(rs)
@@ -732,6 +758,7 @@ export function PermissionsManager({
                     name: activeRole.name,
                     label,
                     color: roleDialog.color,
+                    icon: roleDialog.icon || suggestRoleIcon(label),
                 })
                 await refreshRoles(activeRole.id)
                 toast.success('Rol actualizado')
@@ -769,7 +796,8 @@ export function PermissionsManager({
             open: true,
             mode: 'edit',
             label: activeRole.label || activeRole.name,
-            color: activeRole.color || ROLE_COLORS[5],
+            color: activeRole.color || DEFAULT_ROLE_COLOR,
+            icon: activeRole.icon || suggestRoleIcon(activeRole.label || activeRole.name),
             grantAll: false,
         })
     }
@@ -843,7 +871,8 @@ export function PermissionsManager({
                                     open: true,
                                     mode: 'create',
                                     label: '',
-                                    color: ROLE_COLORS[5],
+                                    color: DEFAULT_ROLE_COLOR,
+                                    icon: 'Shield',
                                     grantAll: false,
                                 })
                             }
@@ -901,12 +930,18 @@ export function PermissionsManager({
                                             <span className="flex min-w-0 items-center gap-2">
                                                 {activeRole && (
                                                     <span
-                                                        className="h-2.5 w-2.5 shrink-0 rounded-full"
+                                                        className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md"
                                                         style={{
-                                                            background: activeRole.color || '#6b7280',
+                                                            background: `${activeRole.color || '#64748b'}22`,
+                                                            color: activeRole.color || '#64748b',
                                                         }}
                                                         aria-hidden="true"
-                                                    />
+                                                    >
+                                                        <DynamicIcon
+                                                            name={activeRole.icon || 'Shield'}
+                                                            className="h-3.5 w-3.5"
+                                                        />
+                                                    </span>
                                                 )}
                                                 <span className="truncate">
                                                     {activeRole
@@ -933,12 +968,18 @@ export function PermissionsManager({
                                                             }}
                                                         >
                                                             <span
-                                                                className="mr-2 h-2 w-2 shrink-0 rounded-full"
+                                                                className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md"
                                                                 style={{
-                                                                    background: role.color || '#6b7280',
+                                                                    background: `${role.color || '#64748b'}22`,
+                                                                    color: role.color || '#64748b',
                                                                 }}
                                                                 aria-hidden="true"
-                                                            />
+                                                            >
+                                                                <DynamicIcon
+                                                                    name={role.icon || 'Shield'}
+                                                                    className="h-3.5 w-3.5"
+                                                                />
+                                                            </span>
                                                             <span className="truncate">
                                                                 {role.label || role.name}
                                                             </span>
@@ -1224,30 +1265,48 @@ export function PermissionsManager({
                                 id="pm-role-name"
                                 value={roleDialog.label}
                                 placeholder="Ej. Cajero"
-                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                                    setRoleDialog((d) => ({ ...d, label: e.target.value }))
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                    const label = e.target.value
+                                    setRoleDialog((d) => ({
+                                        ...d,
+                                        label,
+                                        icon:
+                                            d.icon === suggestRoleIcon(d.label) ||
+                                            d.icon === 'Shield' ||
+                                            !d.icon
+                                                ? suggestRoleIcon(label)
+                                                : d.icon,
+                                    }))
+                                }}
+                            />
+                        </div>
+                        <div className="flex flex-col gap-2">
+                            <Label>Ícono</Label>
+                            <IconPickerField
+                                field={
+                                    {
+                                        key: 'icon',
+                                        label: 'Ícono',
+                                        type: 'text',
+                                        widget: 'icon',
+                                    } as ActionFieldDef
+                                }
+                                value={roleDialog.icon}
+                                onChange={(v) =>
+                                    setRoleDialog((d) => ({
+                                        ...d,
+                                        icon: typeof v === 'string' && v ? v : 'Shield',
+                                    }))
                                 }
                             />
                         </div>
                         <div className="flex flex-col gap-2">
                             <Label>Color</Label>
-                            <div className="flex flex-wrap gap-2">
-                                {ROLE_COLORS.map((c) => (
-                                    <button
-                                        key={c}
-                                        type="button"
-                                        aria-label={`Color ${c}`}
-                                        onClick={() => setRoleDialog((d) => ({ ...d, color: c }))}
-                                        className={cn(
-                                            'h-7 w-7 rounded-full border-2 transition-transform',
-                                            roleDialog.color === c
-                                                ? 'scale-110 border-foreground'
-                                                : 'border-transparent hover:scale-105',
-                                        )}
-                                        style={{ background: c }}
-                                    />
-                                ))}
-                            </div>
+                            <ColorPickerField
+                                aria-label="Color del rol"
+                                value={roleDialog.color}
+                                onChange={(color) => setRoleDialog((d) => ({ ...d, color }))}
+                            />
                         </div>
                         {roleDialog.mode === 'create' && (
                             <label className="flex cursor-pointer items-start gap-3 rounded-lg border p-3 text-sm hover:bg-muted/40">

package/src/use-print-document.ts

@@ -33,10 +33,36 @@ export interface PrintDocumentArgs {
      * open   → open the PDF in a new tab (user prints from the viewer).
      */
     mode?: 'print' | 'download' | 'open'
-    /** Filename for the download mode (defaults to "<key>.pdf"). */
+    /**
+     * Hint filename for download mode. Prefer leaving this unset: the server
+     * expands `{{record.*}}` into Content-Disposition. A raw template string
+     * (e.g. "cfdi-{{record.number}}.pdf") must NOT be used as a.download —
+     * that is how downloads end up literally named with mustache braces.
+     */
     filename?: string
 }
 
+/** Parse filename from Content-Disposition (RFC 5987 / quoted). */
+export function filenameFromContentDisposition(header: string | undefined | null): string | undefined {
+    if (!header) return undefined
+    const star = /filename\*\s*=\s*UTF-8''([^;]+)/i.exec(header)
+    if (star?.[1]) {
+        try {
+            return decodeURIComponent(star[1].trim().replace(/^"|"$/g, ''))
+        } catch {
+            return star[1].trim().replace(/^"|"$/g, '')
+        }
+    }
+    const plain = /filename\s*=\s*"([^"]+)"|filename\s*=\s*([^;]+)/i.exec(header)
+    const raw = (plain?.[1] ?? plain?.[2] ?? '').trim()
+    return raw || undefined
+}
+
+/** True when a caller passed an unexpanded mustache template as filename. */
+export function looksLikeFilenameTemplate(name: string | undefined): boolean {
+    return !!name && /\{\{/.test(name)
+}
+
 /**
  * Returns a `printDocument(args)` callback. Resolves once the PDF has been
  * fetched and the browser action (print/download/open) has been kicked off;
@@ -65,9 +91,19 @@ export function usePrintDocument() {
             const cleanup = () => setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000)
 
             if (mode === 'download') {
+                const headers = (res as { headers?: Record<string, string> }).headers || {}
+                const fromHeader =
+                    filenameFromContentDisposition(
+                        headers['content-disposition'] || headers['Content-Disposition'],
+                    ) || undefined
+                // Prefer server-expanded name; never use a raw {{record.*}} template.
+                const downloadName =
+                    fromHeader ||
+                    (!looksLikeFilenameTemplate(filename) ? filename : undefined) ||
+                    `${key}.pdf`
                 const a = document.createElement('a')
                 a.href = blobUrl
-                a.download = filename || `${key}.pdf`
+                a.download = downloadName
                 document.body.appendChild(a)
                 a.click()
                 a.remove()