@nubitio/crud 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
-import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { Route, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { createPortal } from "react-dom";
 import { AppDialog, AppDropdown, Button, ConfirmDialog, DatePicker, DateRangePicker, Drawer, EmptyState, IconButton, Skeleton } from "@nubitio/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createCrudEvents, createScopedEventBus, getCoreLocale, getCoreTimezone, useCoreHttpClient, useCoreRuntime, useCoreTranslation, useEvents, useMercureSubscription } from "@nubitio/core";
+import { createCrudEvents, createScopedEventBus, getCoreCurrency, getCoreLocale, getCoreTimezone, useCoreHttpClient, useCoreRuntime, useCoreTranslation, useEvents, useMercureSubscription } from "@nubitio/core";
 import { useDropzone } from "react-dropzone";
 import { useQueryClient } from "@tanstack/react-query";
 //#region packages/crud/crud/defineResource.ts
@@ -1067,12 +1067,16 @@ function formatSummaryValue(value, item) {
 		minimumFractionDigits: precision,
 		maximumFractionDigits: precision
 	} : void 0 };
-	if (item.valueFormat === "currency") return new Intl.NumberFormat(getCoreLocale(), {
-		...baseOptions,
-		style: "currency",
-		currency: item.currency ?? "PEN",
-		currencyDisplay: item.currencyDisplay ?? "narrowSymbol"
-	}).format(value);
+	if (item.valueFormat === "currency") {
+		const currency = item.currency ?? getCoreCurrency();
+		if (currency === void 0) return new Intl.NumberFormat(getCoreLocale(), baseOptions).format(value);
+		return new Intl.NumberFormat(getCoreLocale(), {
+			...baseOptions,
+			style: "currency",
+			currency,
+			currencyDisplay: item.currencyDisplay ?? "narrowSymbol"
+		}).format(value);
+	}
 	if (item.valueFormat === "percent") return new Intl.NumberFormat(getCoreLocale(), {
 		...baseOptions,
 		style: "percent"
@@ -1290,6 +1294,7 @@ function useLookupDropdown() {
 	};
 }
 function LookupDropdown({ activeOptionId, children, className, containerRef, disabled, id, label, menuRef, menuStyle, normalizedValue, onClear, onKeyDown, onQueryChange, onScroll, open, query, readOnly, required, setDraftQuery, setOpen }) {
+	const { t } = useCoreTranslation();
 	const blurTimer = useRef(void 0);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
@@ -1324,7 +1329,7 @@ function LookupDropdown({ activeOptionId, children, className, containerRef, dis
 			!disabled && !readOnly && normalizedValue !== "" && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "nb-form__lookup-clear",
-				"aria-label": `Limpiar ${label}`,
+				"aria-label": t("form.lookupClear", { label }),
 				onMouseDown: (e) => e.preventDefault(),
 				onClick: onClear,
 				children: /* @__PURE__ */ jsx("i", {
@@ -1335,7 +1340,7 @@ function LookupDropdown({ activeOptionId, children, className, containerRef, dis
 			!disabled && !readOnly && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "nb-form__lookup-toggle",
-				"aria-label": `Abrir ${label}`,
+				"aria-label": t("form.lookupOpen", { label }),
 				onMouseDown: (e) => e.preventDefault(),
 				onClick: () => {
 					clearTimeout(blurTimer.current);
@@ -2550,7 +2555,7 @@ const NativeFormView = forwardRef((options, ref) => {
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "nb-form__tabs-nav",
 					role: "tablist",
-					"aria-label": "Secciones del formulario",
+					"aria-label": t("form.tabsAriaLabel"),
 					children: groups.map((group, index) => {
 						const tabIcon = resolveTabIcon(group.icon);
 						const isActive = index === activeTab;
@@ -2736,8 +2741,18 @@ function getCellText(field, row, entityOptions, yesLabel = "Yes", noLabel = "No"
 	if (field.type === "enum" || field.type === "switch") return getEnumDisplayValue(field, value);
 	if (field.type === "date") return getDateDisplay(value);
 	if (field.type === "datetime") return getDateTimeDisplay(value);
+	if (field.type === "currency") return getCurrencyDisplay(value);
 	return getPrimitiveDisplay(value, yesLabel, noLabel);
 }
+function getCurrencyDisplay(value) {
+	if (value === null || value === void 0 || value === "") return "";
+	const num = Number(value);
+	if (!Number.isFinite(num)) return String(value);
+	return num.toLocaleString(getCoreLocale(), {
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	});
+}
 function renderCell(field, row, rowIndex, columnIndex, entityOptions, yesLabel = "Yes", noLabel = "No") {
 	const value = row[field.name];
 	if (field.formatter) return field.formatter({
@@ -2750,6 +2765,7 @@ function renderCell(field, row, rowIndex, columnIndex, entityOptions, yesLabel =
 	if (field.type === "enum" || field.type === "switch") return getEnumDisplayValue(field, value);
 	if (field.type === "date") return getDateDisplay(value);
 	if (field.type === "datetime") return getDateTimeDisplay(value);
+	if (field.type === "currency") return getCurrencyDisplay(value);
 	return getPrimitiveDisplay(value, yesLabel, noLabel);
 }
 function normalizeIcon$1(icon) {
@@ -3587,8 +3603,10 @@ const NativeDataGridView = forwardRef((options, ref) => {
 		options.onSelectionChanged?.({ selectedRowsData: nextRows });
 		emit(DATA_GRID_EVENTS.SELECTION_CHANGED, nextRows);
 	};
+	const rowEditable = (row) => options.canEditRow?.(row) !== false;
+	const rowDeletable = (row) => options.canDeleteRow?.(row) !== false;
 	const buildRowActions = (row) => [
-		...options.allowEdit && (options.onEdit || options.events?.EDIT) ? [{
+		...options.allowEdit && rowEditable(row) && (options.onEdit || options.events?.EDIT) ? [{
 			text: t("grid.buttonEdit"),
 			icon: "ph-pencil-simple",
 			disabled: options.editDisabled,
@@ -3603,7 +3621,7 @@ const NativeDataGridView = forwardRef((options, ref) => {
 			onClick: () => options.onView(row)
 		}] : [],
 		...getResolvedRowActions(row, options.rowActions),
-		...options.allowDelete && (options.onDelete || options.events?.DELETE) ? [{
+		...options.allowDelete && rowDeletable(row) && (options.onDelete || options.events?.DELETE) ? [{
 			text: t("grid.buttonDelete"),
 			icon: "ph-trash",
 			type: "danger",
@@ -3612,7 +3630,7 @@ const NativeDataGridView = forwardRef((options, ref) => {
 		}] : []
 	];
 	const openRow = (row) => {
-		if (options.allowEdit && (options.onEdit || options.events?.EDIT)) {
+		if (options.allowEdit && rowEditable(row) && (options.onEdit || options.events?.EDIT)) {
 			if (options.onEdit) options.onEdit(row);
 			else emit(options.events.EDIT, { row });
 			return;
@@ -4941,218 +4959,519 @@ function resolveCrudResource(resource, overrides = {}) {
 	};
 }
 //#endregion
-//#region packages/crud/crud/useCrudPage.ts
-function useCrudPage(resource, externalFormRef) {
-	const resolvedResource = useMemo(() => resolveCrudResource(resource), [resource]);
-	const events = resolvedResource.events;
-	const _internalFormRef = useRef(null);
-	const formRef = externalFormRef ?? _internalFormRef;
-	const fields = useMemo(() => resolvedResource.fields ?? [], [resolvedResource.fields]);
-	return {
-		events,
-		resource: resolvedResource,
-		fields,
-		formFields: useMemo(() => resolvedResource.formFields ?? fields, [fields, resolvedResource.formFields]),
-		formRef,
-		permissions: usePermissions(resolvedResource, resolvedResource._supportedOperations ?? []),
-		selectionState: useSelectionState(useMemo(() => {
-			return fields.find((f) => f.isIdentity)?.name ?? "id";
-		}, [fields])),
-		presetState: useColumnPreset(resolvedResource)
-	};
-}
-//#endregion
-//#region packages/crud/crud/AuditTrailPanel.tsx
-const ACTION_COLORS = {
-	create: "#2e7d32",
-	update: "#1565c0",
-	delete: "#c62828"
-};
-function DefaultEntryRenderer({ entry }) {
-	const { t } = useCoreTranslation();
-	const date = new Date(entry.timestamp);
-	const formatted = Number.isNaN(date.getTime()) ? entry.timestamp : date.toLocaleString(getCoreLocale(), { timeZone: getCoreTimezone() });
-	const actionLabels = {
-		create: t("auditTrail.action.create"),
-		update: t("auditTrail.action.update"),
-		delete: t("auditTrail.action.delete")
-	};
-	const changeKeys = Object.keys(entry.changes);
-	return /* @__PURE__ */ jsxs("li", {
-		style: {
-			borderBottom: "1px solid #e0e0e0",
-			padding: "10px 0",
-			listStyle: "none"
-		},
-		children: [/* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				gap: 8,
-				marginBottom: 4
-			},
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					style: {
-						fontSize: 12,
-						color: "#757575"
-					},
-					children: formatted
-				}),
-				/* @__PURE__ */ jsx("span", {
-					style: {
-						fontSize: 12,
-						color: "#424242"
-					},
-					children: entry.user
-				}),
-				/* @__PURE__ */ jsx("span", {
-					style: {
-						fontSize: 11,
-						fontWeight: 600,
-						padding: "1px 6px",
-						borderRadius: 4,
-						backgroundColor: ACTION_COLORS[entry.action],
-						color: "#fff"
-					},
-					children: actionLabels[entry.action]
-				})
-			]
-		}), changeKeys.length > 0 && /* @__PURE__ */ jsx("ul", {
-			style: {
-				margin: "4px 0 0 0",
-				padding: "0 0 0 16px"
-			},
-			children: changeKeys.map((field) => {
-				const { before, after } = entry.changes[field];
-				return /* @__PURE__ */ jsxs("li", {
-					style: {
-						fontSize: 12,
-						color: "#616161"
-					},
-					children: [
-						/* @__PURE__ */ jsxs("strong", { children: [field, ":"] }),
-						" ",
-						/* @__PURE__ */ jsx("span", {
-							style: { color: "#c62828" },
-							children: String(before ?? "—")
-						}),
-						" → ",
-						/* @__PURE__ */ jsx("span", {
-							style: { color: "#2e7d32" },
-							children: String(after ?? "—")
-						})
-					]
-				}, field);
-			})
-		})]
-	});
-}
-function AuditTrailPanel({ url, renderEntry, visible, onClose }) {
-	const { t } = useCoreTranslation();
-	const httpClient = useCoreHttpClient();
-	const [fetchState, setFetchState] = useState({ status: "idle" });
-	useEffect(() => {
-		if (!visible || url === null) {
-			setFetchState({ status: "idle" });
-			return;
-		}
-		let cancelled = false;
-		setFetchState({ status: "loading" });
-		httpClient.get(url).then((response) => {
-			if (!cancelled) setFetchState({
-				status: "success",
-				entries: response.data
-			});
-		}).catch(() => {
-			if (!cancelled) setFetchState({ status: "error" });
-		});
-		return () => {
-			cancelled = true;
+//#region packages/crud/field/BaseFieldBuilder.ts
+var BaseFieldBuilder = class {
+	_field;
+	constructor(type) {
+		this._field = {
+			isIdentity: false,
+			type,
+			col: void 0,
+			name: "",
+			label: "",
+			width: void 0,
+			height: null,
+			minWidth: void 0,
+			align: "left",
+			sortable: true,
+			filterable: true,
+			hideable: true,
+			validators: [],
+			url: void 0,
+			loadOptions: [],
+			filters: [],
+			byKeyUrl: null,
+			textField: "",
+			valueField: "",
+			valueType: "string",
+			filterValue: void 0,
+			selectedFilterOperation: void 0,
+			data: [],
+			format: "",
+			formatter: void 0,
+			itemFormatter: void 0,
+			visible: true,
+			defaultValue: void 0,
+			onChange: void 0,
+			onSelect: void 0,
+			onClick: void 0,
+			readonly: false,
+			disabled: false,
+			hidden: false,
+			required: false,
+			precision: 0,
+			accept: null,
+			buttons: [],
+			searchEnabled: true,
+			searchExpr: null,
+			helpText: void 0,
+			contentRender: null,
+			visibleOnForm: true,
+			maxLength: void 0,
+			multiple: false,
+			autoSelectIfSingle: false,
+			sendAsString: false
 		};
-	}, [
-		httpClient,
-		url,
-		visible
-	]);
-	if (!visible) return null;
-	return /* @__PURE__ */ jsxs("aside", {
-		className: "nb-audit-trail-panel",
-		style: {
-			border: "1px solid #e0e0e0",
-			borderRadius: 4,
-			padding: "12px 16px",
-			backgroundColor: "#fafafa",
-			minWidth: 280
-		},
-		children: [/* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "space-between",
-				marginBottom: 12
-			},
-			children: [/* @__PURE__ */ jsx("strong", {
-				style: { fontSize: 14 },
-				children: t("auditTrail.title")
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onClose,
-				"aria-label": t("auditTrail.closeButton"),
-				style: {
-					background: "none",
-					border: "none",
-					cursor: "pointer",
-					fontSize: 18,
-					lineHeight: 1,
-					padding: "0 4px",
-					color: "#616161"
-				},
-				children: "×"
-			})]
-		}), url === null ? /* @__PURE__ */ jsx("p", {
-			style: {
-				fontSize: 13,
-				color: "#757575",
-				margin: 0
-			},
-			children: t("auditTrail.selectRecord")
-		}) : fetchState.status === "loading" ? /* @__PURE__ */ jsx("p", {
-			style: {
-				fontSize: 13,
-				color: "#757575",
-				margin: 0
-			},
-			children: t("auditTrail.loading")
-		}) : fetchState.status === "error" ? /* @__PURE__ */ jsx("p", {
-			style: {
-				fontSize: 13,
-				color: "#c62828",
-				margin: 0
-			},
-			children: t("auditTrail.error")
-		}) : fetchState.status === "success" ? fetchState.entries.length === 0 ? /* @__PURE__ */ jsx("p", {
-			style: {
-				fontSize: 13,
-				color: "#757575",
-				margin: 0
-			},
-			children: t("auditTrail.empty")
-		}) : /* @__PURE__ */ jsx("ul", {
-			style: {
-				margin: 0,
-				padding: 0
-			},
-			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ jsx(React.Fragment, { children: renderEntry(entry) }, String(entry.id)) : /* @__PURE__ */ jsx(DefaultEntryRenderer, { entry }, String(entry.id)))
-		}) : null]
-	});
+	}
+	isIdentity(isIdentity) {
+		this._field.isIdentity = isIdentity;
+		return this;
+	}
+	col(col) {
+		this._field.col = col;
+		return this;
+	}
+	layoutHint(value) {
+		this._field.layoutHint = value;
+		return this;
+	}
+	cardRole(value) {
+		this._field.cardRole = value;
+		return this;
+	}
+	preferredColSpan(value) {
+		this._field.preferredColSpan = value;
+		return this;
+	}
+	minColSpan(value) {
+		this._field.minColSpan = value;
+		return this;
+	}
+	forceFullWidth(value = true) {
+		this._field.forceFullWidth = value;
+		return this;
+	}
+	name(name) {
+		this._field.name = name;
+		return this;
+	}
+	label(label) {
+		this._field.label = label;
+		return this;
+	}
+	width(width) {
+		this._field.width = width;
+		return this;
+	}
+	height(height) {
+		this._field.height = height;
+		return this;
+	}
+	minWidth(minWidth) {
+		this._field.minWidth = minWidth;
+		return this;
+	}
+	align(align) {
+		this._field.align = align;
+		return this;
+	}
+	sortable(sortable) {
+		this._field.sortable = sortable;
+		return this;
+	}
+	filterable(filterable) {
+		this._field.filterable = filterable;
+		return this;
+	}
+	hideable(hideable) {
+		this._field.hideable = hideable;
+		return this;
+	}
+	validators(validators) {
+		this._field.validators = validators;
+		return this;
+	}
+	valueType(valueType) {
+		this._field.valueType = valueType;
+		return this;
+	}
+	filterValue(filterValue) {
+		this._field.filterValue = filterValue;
+		return this;
+	}
+	data(data) {
+		this._field.data = data;
+		return this;
+	}
+	format(format) {
+		this._field.format = format;
+		return this;
+	}
+	formatter(formatter) {
+		this._field.formatter = formatter;
+		return this;
+	}
+	itemFormatter(itemFormatter) {
+		this._field.itemFormatter = itemFormatter;
+		return this;
+	}
+	visible(visible) {
+		this._field.visible = visible;
+		return this;
+	}
+	defaultValue(defaultValue) {
+		this._field.defaultValue = defaultValue;
+		return this;
+	}
+	onChange(onChange) {
+		this._field.onChange = onChange;
+		return this;
+	}
+	onSelect(onSelect) {
+		this._field.onSelect = onSelect;
+		return this;
+	}
+	onClick(onClick) {
+		this._field.onClick = onClick;
+		return this;
+	}
+	readonly(readonly) {
+		this._field.readonly = readonly;
+		return this;
+	}
+	disabled(disabled) {
+		this._field.disabled = disabled;
+		return this;
+	}
+	hidden(hidden) {
+		this._field.hidden = hidden;
+		return this;
+	}
+	required(required) {
+		this._field.required = required;
+		return this;
+	}
+	precision(value) {
+		this._field.precision = value;
+		return this;
+	}
+	accept(value) {
+		this._field.accept = value;
+		return this;
+	}
+	buttons(value) {
+		this._field.buttons = value;
+		return this;
+	}
+	searchEnabled(value) {
+		this._field.searchEnabled = value;
+		return this;
+	}
+	searchExpr(value) {
+		this._field.searchExpr = value;
+		return this;
+	}
+	helpText(value) {
+		this._field.helpText = value;
+		return this;
+	}
+	contentRender(value) {
+		this._field.contentRender = value;
+		return this;
+	}
+	visibleOnForm(value) {
+		this._field.visibleOnForm = value;
+		return this;
+	}
+	autoSelectIfSingle(value) {
+		this._field.autoSelectIfSingle = value;
+		return this;
+	}
+	url(url) {
+		this._field.url = url;
+		return this;
+	}
+	loadOptions(param) {
+		this._field.loadOptions = param;
+		return this;
+	}
+	filters(filters) {
+		this._field.filters = filters;
+		return this;
+	}
+	byKeyUrl(byKeyUrl) {
+		this._field.byKeyUrl = byKeyUrl;
+		return this;
+	}
+	textField(textField) {
+		this._field.textField = textField;
+		return this;
+	}
+	valueField(valueField) {
+		this._field.valueField = valueField;
+		return this;
+	}
+	selectedFilterOperation(operation) {
+		this._field.selectedFilterOperation = operation;
+		return this;
+	}
+	sendAsString(value) {
+		this._field.sendAsString = value;
+		return this;
+	}
+	multiple(value) {
+		this._field.multiple = value;
+		return this;
+	}
+	maxLength(value) {
+		this._field.maxLength = value;
+		return this;
+	}
+	visibleWhen(fn) {
+		this._field.visibleWhen = fn;
+		return this;
+	}
+	disabledWhen(fn) {
+		this._field.disabledWhen = fn;
+		return this;
+	}
+	computed(fn) {
+		this._field.computed = fn;
+		return this;
+	}
+	defaultWhen(fn) {
+		this._field.defaultWhen = fn;
+		return this;
+	}
+	requiredWhen(fn) {
+		this._field.requiredWhen = fn;
+		return this;
+	}
+	clearWhenHidden(value = true) {
+		this._field.clearWhenHidden = value;
+		return this;
+	}
+	dependsOn(fields) {
+		this._field.dependsOn = fields;
+		return this;
+	}
+	permissions(perms) {
+		this._field.permissions = perms;
+		return this;
+	}
+	build() {
+		return { ...this._field };
+	}
+};
+//#endregion
+//#region packages/crud/field/buildFields.ts
+/** Normalizes a mixed array of Fields and builders into plain Fields. */
+function buildFields(items) {
+	return items.map((item) => item instanceof BaseFieldBuilder ? item.build() : item);
 }
 //#endregion
-//#region packages/crud/crud/dialogStore.ts
-function initialDialogState() {
+//#region packages/crud/crud/useCrudPage.ts
+function useCrudPage(resource, externalFormRef) {
+	const resolvedResource = useMemo(() => resolveCrudResource(resource), [resource]);
+	const events = resolvedResource.events;
+	const _internalFormRef = useRef(null);
+	const formRef = externalFormRef ?? _internalFormRef;
+	const fields = useMemo(() => buildFields(resolvedResource.fields ?? []), [resolvedResource.fields]);
 	return {
-		isOpen: false,
-		mode: "add",
+		events,
+		resource: resolvedResource,
+		fields,
+		formFields: useMemo(() => resolvedResource.formFields ? buildFields(resolvedResource.formFields) : fields, [fields, resolvedResource.formFields]),
+		formRef,
+		permissions: usePermissions(resolvedResource, resolvedResource._supportedOperations ?? []),
+		selectionState: useSelectionState(useMemo(() => {
+			return fields.find((f) => f.isIdentity)?.name ?? "id";
+		}, [fields])),
+		presetState: useColumnPreset(resolvedResource)
+	};
+}
+//#endregion
+//#region packages/crud/crud/AuditTrailPanel.tsx
+const ACTION_COLORS = {
+	create: "#2e7d32",
+	update: "#1565c0",
+	delete: "#c62828"
+};
+function DefaultEntryRenderer({ entry }) {
+	const { t } = useCoreTranslation();
+	const date = new Date(entry.timestamp);
+	const formatted = Number.isNaN(date.getTime()) ? entry.timestamp : date.toLocaleString(getCoreLocale(), { timeZone: getCoreTimezone() });
+	const actionLabels = {
+		create: t("auditTrail.action.create"),
+		update: t("auditTrail.action.update"),
+		delete: t("auditTrail.action.delete")
+	};
+	const changeKeys = Object.keys(entry.changes);
+	return /* @__PURE__ */ jsxs("li", {
+		style: {
+			borderBottom: "1px solid #e0e0e0",
+			padding: "10px 0",
+			listStyle: "none"
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				marginBottom: 4
+			},
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 12,
+						color: "#757575"
+					},
+					children: formatted
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 12,
+						color: "#424242"
+					},
+					children: entry.user
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 11,
+						fontWeight: 600,
+						padding: "1px 6px",
+						borderRadius: 4,
+						backgroundColor: ACTION_COLORS[entry.action],
+						color: "#fff"
+					},
+					children: actionLabels[entry.action]
+				})
+			]
+		}), changeKeys.length > 0 && /* @__PURE__ */ jsx("ul", {
+			style: {
+				margin: "4px 0 0 0",
+				padding: "0 0 0 16px"
+			},
+			children: changeKeys.map((field) => {
+				const { before, after } = entry.changes[field];
+				return /* @__PURE__ */ jsxs("li", {
+					style: {
+						fontSize: 12,
+						color: "#616161"
+					},
+					children: [
+						/* @__PURE__ */ jsxs("strong", { children: [field, ":"] }),
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							style: { color: "#c62828" },
+							children: String(before ?? "—")
+						}),
+						" → ",
+						/* @__PURE__ */ jsx("span", {
+							style: { color: "#2e7d32" },
+							children: String(after ?? "—")
+						})
+					]
+				}, field);
+			})
+		})]
+	});
+}
+function AuditTrailPanel({ url, renderEntry, visible, onClose }) {
+	const { t } = useCoreTranslation();
+	const httpClient = useCoreHttpClient();
+	const [fetchState, setFetchState] = useState({ status: "idle" });
+	useEffect(() => {
+		if (!visible || url === null) {
+			setFetchState({ status: "idle" });
+			return;
+		}
+		let cancelled = false;
+		setFetchState({ status: "loading" });
+		httpClient.get(url).then((response) => {
+			if (!cancelled) setFetchState({
+				status: "success",
+				entries: response.data
+			});
+		}).catch(() => {
+			if (!cancelled) setFetchState({ status: "error" });
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		httpClient,
+		url,
+		visible
+	]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "nb-audit-trail-panel",
+		style: {
+			border: "1px solid #e0e0e0",
+			borderRadius: 4,
+			padding: "12px 16px",
+			backgroundColor: "#fafafa",
+			minWidth: 280
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				marginBottom: 12
+			},
+			children: [/* @__PURE__ */ jsx("strong", {
+				style: { fontSize: 14 },
+				children: t("auditTrail.title")
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onClose,
+				"aria-label": t("auditTrail.closeButton"),
+				style: {
+					background: "none",
+					border: "none",
+					cursor: "pointer",
+					fontSize: 18,
+					lineHeight: 1,
+					padding: "0 4px",
+					color: "#616161"
+				},
+				children: "×"
+			})]
+		}), url === null ? /* @__PURE__ */ jsx("p", {
+			style: {
+				fontSize: 13,
+				color: "#757575",
+				margin: 0
+			},
+			children: t("auditTrail.selectRecord")
+		}) : fetchState.status === "loading" ? /* @__PURE__ */ jsx("p", {
+			style: {
+				fontSize: 13,
+				color: "#757575",
+				margin: 0
+			},
+			children: t("auditTrail.loading")
+		}) : fetchState.status === "error" ? /* @__PURE__ */ jsx("p", {
+			style: {
+				fontSize: 13,
+				color: "#c62828",
+				margin: 0
+			},
+			children: t("auditTrail.error")
+		}) : fetchState.status === "success" ? fetchState.entries.length === 0 ? /* @__PURE__ */ jsx("p", {
+			style: {
+				fontSize: 13,
+				color: "#757575",
+				margin: 0
+			},
+			children: t("auditTrail.empty")
+		}) : /* @__PURE__ */ jsx("ul", {
+			style: {
+				margin: 0,
+				padding: 0
+			},
+			children: fetchState.entries.map((entry) => renderEntry ? /* @__PURE__ */ jsx(React.Fragment, { children: renderEntry(entry) }, String(entry.id)) : /* @__PURE__ */ jsx(DefaultEntryRenderer, { entry }, String(entry.id)))
+		}) : null]
+	});
+}
+//#endregion
+//#region packages/crud/crud/dialogStore.ts
+function initialDialogState() {
+	return {
+		isOpen: false,
+		mode: "add",
 		rowData: null
 	};
 }
@@ -5223,9 +5542,16 @@ function useCrudDialogStore(resourceId) {
 //#endregion
 //#region packages/crud/crud/resolveResourceDetails.ts
 function resolveResourceDetails(resource) {
+	const { gridDetail, formDetail } = resource;
 	return {
-		gridDetail: resource.gridDetail,
-		formDetail: resource.formDetail
+		gridDetail: gridDetail && {
+			...gridDetail,
+			fields: typeof gridDetail.fields === "function" ? (parentRow) => buildFields(gridDetail.fields(parentRow)) : buildFields(gridDetail.fields)
+		},
+		formDetail: formDetail && {
+			...formDetail,
+			fields: buildFields(formDetail.fields)
+		}
 	};
 }
 //#endregion
@@ -5317,6 +5643,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 	const { t } = useCoreTranslation();
 	const { events, resource: resolvedResource, fields, formFields, formRef, permissions, selectionState, presetState } = useCrudPage(useMemo(() => resolveCrudResource(resource), [resource]), externalFormRef);
 	const datagridFields = useMemo(() => fields.filter((field) => field.isIdentity || field.visible !== false), [fields]);
+	const rawPermissions = typeof resolvedResource.permissions === "function" ? void 0 : resolvedResource.permissions;
 	const routeAwareGridFields = useMemo(() => datagridFields.map((field) => {
 		const routeFilterValue = initialFilters[field.name];
 		if (routeFilterValue === void 0) {
@@ -5576,6 +5903,9 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 				allowExport: permissions.canExport,
 				editDisabled,
 				deleteDisabled,
+				canEditRow: rawPermissions?.canEditRow,
+				canDeleteRow: rawPermissions?.canDeleteRow,
+				summaryFields: resolvedResource.summaryFields,
 				sort: resolvedResource.sort,
 				filter: routeAwareFilters,
 				paging: resolvedResource.paging,
@@ -5617,6 +5947,7 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 					events,
 					detailFields: formDetail?.fields,
 					detailUrl: formDetail?.url,
+					detailSummary: formDetail?.summary,
 					detailPropertyName: formDetail?.propertyName,
 					allowAdding: dialogMode !== "view" && formDetail?.allowAdding,
 					allowDeleting: dialogMode !== "view" && formDetail?.allowDeleting,
@@ -5679,6 +6010,38 @@ const CrudPageInner = ({ resource, onFormDataChange, initialRecordId = null, ini
 	});
 };
 //#endregion
+//#region packages/crud/crud/crudRoute.tsx
+/**
+* Wires the two React Router v6 routes a page-mode resource needs:
+* the list route and the record route (`/sales` and `/sales/:id`, where
+* `:id` is also matched by the literal `new` for the create form).
+*
+* React Router v6 has no optional params (`:id?`), so page mode
+* (`viewMode: 'page'` + `routing: { routeParam: 'id' }`) requires both
+* routes to render the same element. This helper returns them in one call:
+*
+* ```tsx
+* <Routes>
+*   {crudRoute('/sales', <SalesPage />)}
+*   {crudRoute('/purchases', <PurchasesPage />, 'purchaseId')}
+* </Routes>
+* ```
+*
+* @param path - The list path, e.g. `/sales`.
+* @param element - The page element (typically a `SmartCrudPage` wrapper).
+* @param routeParam - Param name used in `routing.routeParam`. Default `'id'`.
+*/
+function crudRoute(path, element, routeParam = "id") {
+	const base = path.replace(/\/+$/, "");
+	return [/* @__PURE__ */ jsx(Route, {
+		path: base,
+		element
+	}, base), /* @__PURE__ */ jsx(Route, {
+		path: `${base}/:${routeParam}`,
+		element
+	}, `${base}/:${routeParam}`)];
+}
+//#endregion
 //#region packages/crud/crud/routing/useRouting.ts
 const NO_FILTERS = {};
 /**
@@ -6642,7 +7005,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 	const hasManualFields = !resource.fieldContract && Array.isArray(resource.fields) && resource.fields.length > 0;
 	const { fields, isLoading, error, supportedOperations } = useResolvedResourceFields({
 		apiUrl: resolvedBaseResource.apiUrl,
-		manualFields: hasManualFields ? resource.fields : void 0,
+		manualFields: hasManualFields ? buildFields(resource.fields) : void 0,
 		overrides: hasManualFields ? void 0 : fieldOverrides,
 		fieldContract: resource.fieldContract
 	});
@@ -6673,7 +7036,7 @@ function SmartCrudPage({ resource, fieldOverrides, formRef, onSelectionChanged,
 		...resolvedBaseResource,
 		...!hasManualFields ? { fields: gridFields } : {},
 		apiUrl: normalizedApiUrl,
-		fields: hasManualFields ? resource.fields : gridFields,
+		fields: hasManualFields ? buildFields(resource.fields) : gridFields,
 		formFields: processedFields,
 		_supportedOperations: supportedOperations
 	}), [
@@ -6724,301 +7087,6 @@ function defineFields(contract) {
 }
 const defineFieldContract = defineFields;
 //#endregion
-//#region packages/crud/field/BaseFieldBuilder.ts
-var BaseFieldBuilder = class {
-	_field;
-	constructor(type) {
-		this._field = {
-			isIdentity: false,
-			type,
-			col: void 0,
-			name: "",
-			label: "",
-			width: void 0,
-			height: null,
-			minWidth: void 0,
-			align: "left",
-			sortable: true,
-			filterable: true,
-			hideable: true,
-			validators: [],
-			url: void 0,
-			loadOptions: [],
-			filters: [],
-			byKeyUrl: null,
-			textField: "",
-			valueField: "",
-			valueType: "string",
-			filterValue: void 0,
-			selectedFilterOperation: void 0,
-			data: [],
-			format: "",
-			formatter: void 0,
-			itemFormatter: void 0,
-			visible: true,
-			defaultValue: void 0,
-			onChange: void 0,
-			onSelect: void 0,
-			onClick: void 0,
-			readonly: false,
-			disabled: false,
-			hidden: false,
-			required: false,
-			precision: 0,
-			accept: null,
-			buttons: [],
-			searchEnabled: true,
-			searchExpr: null,
-			helpText: void 0,
-			contentRender: null,
-			visibleOnForm: true,
-			maxLength: void 0,
-			multiple: false,
-			autoSelectIfSingle: false,
-			sendAsString: false
-		};
-	}
-	isIdentity(isIdentity) {
-		this._field.isIdentity = isIdentity;
-		return this;
-	}
-	col(col) {
-		this._field.col = col;
-		return this;
-	}
-	layoutHint(value) {
-		this._field.layoutHint = value;
-		return this;
-	}
-	cardRole(value) {
-		this._field.cardRole = value;
-		return this;
-	}
-	preferredColSpan(value) {
-		this._field.preferredColSpan = value;
-		return this;
-	}
-	minColSpan(value) {
-		this._field.minColSpan = value;
-		return this;
-	}
-	forceFullWidth(value = true) {
-		this._field.forceFullWidth = value;
-		return this;
-	}
-	name(name) {
-		this._field.name = name;
-		return this;
-	}
-	label(label) {
-		this._field.label = label;
-		return this;
-	}
-	width(width) {
-		this._field.width = width;
-		return this;
-	}
-	height(height) {
-		this._field.height = height;
-		return this;
-	}
-	minWidth(minWidth) {
-		this._field.minWidth = minWidth;
-		return this;
-	}
-	align(align) {
-		this._field.align = align;
-		return this;
-	}
-	sortable(sortable) {
-		this._field.sortable = sortable;
-		return this;
-	}
-	filterable(filterable) {
-		this._field.filterable = filterable;
-		return this;
-	}
-	hideable(hideable) {
-		this._field.hideable = hideable;
-		return this;
-	}
-	validators(validators) {
-		this._field.validators = validators;
-		return this;
-	}
-	valueType(valueType) {
-		this._field.valueType = valueType;
-		return this;
-	}
-	filterValue(filterValue) {
-		this._field.filterValue = filterValue;
-		return this;
-	}
-	data(data) {
-		this._field.data = data;
-		return this;
-	}
-	format(format) {
-		this._field.format = format;
-		return this;
-	}
-	formatter(formatter) {
-		this._field.formatter = formatter;
-		return this;
-	}
-	itemFormatter(itemFormatter) {
-		this._field.itemFormatter = itemFormatter;
-		return this;
-	}
-	visible(visible) {
-		this._field.visible = visible;
-		return this;
-	}
-	defaultValue(defaultValue) {
-		this._field.defaultValue = defaultValue;
-		return this;
-	}
-	onChange(onChange) {
-		this._field.onChange = onChange;
-		return this;
-	}
-	onSelect(onSelect) {
-		this._field.onSelect = onSelect;
-		return this;
-	}
-	onClick(onClick) {
-		this._field.onClick = onClick;
-		return this;
-	}
-	readonly(readonly) {
-		this._field.readonly = readonly;
-		return this;
-	}
-	disabled(disabled) {
-		this._field.disabled = disabled;
-		return this;
-	}
-	hidden(hidden) {
-		this._field.hidden = hidden;
-		return this;
-	}
-	required(required) {
-		this._field.required = required;
-		return this;
-	}
-	precision(value) {
-		this._field.precision = value;
-		return this;
-	}
-	accept(value) {
-		this._field.accept = value;
-		return this;
-	}
-	buttons(value) {
-		this._field.buttons = value;
-		return this;
-	}
-	searchEnabled(value) {
-		this._field.searchEnabled = value;
-		return this;
-	}
-	searchExpr(value) {
-		this._field.searchExpr = value;
-		return this;
-	}
-	helpText(value) {
-		this._field.helpText = value;
-		return this;
-	}
-	contentRender(value) {
-		this._field.contentRender = value;
-		return this;
-	}
-	visibleOnForm(value) {
-		this._field.visibleOnForm = value;
-		return this;
-	}
-	autoSelectIfSingle(value) {
-		this._field.autoSelectIfSingle = value;
-		return this;
-	}
-	url(url) {
-		this._field.url = url;
-		return this;
-	}
-	loadOptions(param) {
-		this._field.loadOptions = param;
-		return this;
-	}
-	filters(filters) {
-		this._field.filters = filters;
-		return this;
-	}
-	byKeyUrl(byKeyUrl) {
-		this._field.byKeyUrl = byKeyUrl;
-		return this;
-	}
-	textField(textField) {
-		this._field.textField = textField;
-		return this;
-	}
-	valueField(valueField) {
-		this._field.valueField = valueField;
-		return this;
-	}
-	selectedFilterOperation(operation) {
-		this._field.selectedFilterOperation = operation;
-		return this;
-	}
-	sendAsString(value) {
-		this._field.sendAsString = value;
-		return this;
-	}
-	multiple(value) {
-		this._field.multiple = value;
-		return this;
-	}
-	maxLength(value) {
-		this._field.maxLength = value;
-		return this;
-	}
-	visibleWhen(fn) {
-		this._field.visibleWhen = fn;
-		return this;
-	}
-	disabledWhen(fn) {
-		this._field.disabledWhen = fn;
-		return this;
-	}
-	computed(fn) {
-		this._field.computed = fn;
-		return this;
-	}
-	defaultWhen(fn) {
-		this._field.defaultWhen = fn;
-		return this;
-	}
-	requiredWhen(fn) {
-		this._field.requiredWhen = fn;
-		return this;
-	}
-	clearWhenHidden(value = true) {
-		this._field.clearWhenHidden = value;
-		return this;
-	}
-	dependsOn(fields) {
-		this._field.dependsOn = fields;
-		return this;
-	}
-	permissions(perms) {
-		this._field.permissions = perms;
-		return this;
-	}
-	build() {
-		return { ...this._field };
-	}
-};
-//#endregion
 //#region packages/crud/field/FieldBuilders.ts
 /**
 * Factory for the standard hidden identity field (type NONE, name 'id').
@@ -7872,4 +7940,4 @@ const RestAdapter = {
 	synthesizeEntityKey(_field, _entityValue) {}
 };
 //#endregion
-export { AuditTrailPanel, ColumnPresetSelector, CrudDialogShell, CrudDrawerShell, CrudFormShell, CrudPage, CrudPageShell, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, NativeDataGridView as DataGridView, CrudDialogView as DialogView, CrudDrawerView as DrawerView, FORM_EVENTS, FieldBuilder, FieldType, NativeFormView as FormView, HydraAdapter, CrudPageView as PageView, ResourceSchemaProvider, ResourceStoreProvider, RestAdapter, SmartCrudPage, SmartCrudRolesProvider, ToolbarSelect, buildFieldColSpanContext, checkboxField, computeSummaryValue, createCrudEvents, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };
+export { AuditTrailPanel, ColumnPresetSelector, CrudDialogShell, CrudDrawerShell, CrudFormShell, CrudPage, CrudPageShell, DATA_GRID_EVENTS, DEFAULT_DRAWER_SIZE, DEFAULT_DRAWER_WIDTH, DRAWER_WIDTHS, NativeDataGridView as DataGridView, CrudDialogView as DialogView, CrudDrawerView as DrawerView, FORM_EVENTS, FieldBuilder, FieldType, NativeFormView as FormView, HydraAdapter, CrudPageView as PageView, ResourceSchemaProvider, ResourceStoreProvider, RestAdapter, SmartCrudPage, SmartCrudRolesProvider, ToolbarSelect, buildFieldColSpanContext, buildFields, checkboxField, computeSummaryValue, createCrudEvents, crudRoute, currencyField, dateField, datetimeField, defineFieldContract, defineFields, defineResource, entityField, enumField, fileField, formatSummaryValue, identityField, imageField, isLongTextField, isShortField, noneField, numberField, parseDrawerWidthPx, passwordField, resolveDrawerLayoutBucket, resolveDrawerSize, resolveDrawerWidth, resolveFieldColSpan, resolveFieldsColSpans, resolveSummaryText, resolveViewMode, selectField, switchField, textField, textareaField, useColumnPreset, useResourceStoreFactory, useSmartCrudRoles, validateFieldContract };