@plumile/backoffice-react 0.1.134 → 0.1.140

package/lib/esm/pages/BackofficeEntityDetailPage.js

@@ -4,240 +4,242 @@ import { useBackofficeConfig as n } from "../provider/BackofficeConfigContext.js
 import { resolveToastSpec as r, resolveToastViewActions as i } from "../components/backoffice/actions/toastViewAction.js";
 import { LazyBackofficeEntityActionFormDialog as a } from "../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js";
 import { buildDataTableColumns as o } from "../components/backoffice/columns/buildDataTableColumns.js";
-import { BackofficeDetailSection as s } from "../components/backoffice/detail/BackofficeDetailSection.js";
-import { BackofficeDetailBadgeRow as c } from "../components/backoffice/detail/BackofficeDetailBadgeRow.js";
-import { BackofficeDetailFlagTag as l } from "../components/backoffice/detail/BackofficeDetailFlagTag.js";
-import { BackofficeDetailHeader as u } from "../components/backoffice/detail/BackofficeDetailHeader.js";
-import { BackofficeDetailPage as d } from "../components/backoffice/detail/BackofficeDetailPage.js";
-import { BackofficeDetailPayload as ee } from "../components/backoffice/detail/BackofficeDetailPayload.js";
-import { BackofficeDetailTable as te } from "../components/backoffice/detail/BackofficeDetailTable.js";
-import { BackofficeDetailTaggedValue as ne } from "../components/backoffice/detail/BackofficeDetailTaggedValue.js";
-import { BackofficeKpiStrip as re } from "../components/backoffice/detail/BackofficeKpiStrip.js";
-import { BackofficeLifecycleTimelineSection as ie } from "../components/backoffice/detail/BackofficeLifecycleTimelineSection.js";
-import { BackofficeRelationsSummaryGrid as ae } from "../components/backoffice/detail/BackofficeRelationsSummaryGrid.js";
-import { BackofficeScopeStack as oe } from "../components/backoffice/detail/BackofficeScopeStack.js";
-import { BackofficeRightPageLayout as se } from "../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js";
-import { buildEntityDetailBreadcrumb as ce } from "../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js";
+import { BackofficeDetailBadgeRow as s } from "../components/backoffice/detail/BackofficeDetailBadgeRow.js";
+import { BackofficeDetailFlagTag as c } from "../components/backoffice/detail/BackofficeDetailFlagTag.js";
+import { BackofficeDetailTaggedValue as l } from "../components/backoffice/detail/BackofficeDetailTaggedValue.js";
+import { BackofficeLifecycleTimelineSection as u } from "../components/backoffice/detail/BackofficeLifecycleTimelineSection.js";
+import { BackofficeRelationsSummaryGrid as d } from "../components/backoffice/detail/BackofficeRelationsSummaryGrid.js";
+import { BackofficeRightPageLayout as ee } from "../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js";
+import { buildEntityDetailBreadcrumb as te } from "../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js";
 import { BackofficeEntityDetailScaffold as f } from "../components/backoffice/scaffolds/BackofficeEntityDetailScaffold.js";
 import { useBackofficeFormats as p } from "../i18n/useBackofficeFormats.js";
 import { useRelayEnvironment as m } from "../relay/useRelayEnvironment.js";
 import { resolveVisibleDetailPages as h } from "./detail/pageResolution.js";
 import { useBackofficeEntityDetailLayoutContext as g } from "./detail/BackofficeEntityDetailLayoutContext.js";
-import { extractMutationPayload as le, isFormMutationAction as _, isMutationAction as ue, isRouteAction as de, resolveLabel as v } from "./BackofficeEntityDetailPage.helpers.js";
-import { headerActions as fe, headerBlock as pe, headerMeta as me, headerMetaList as he } from "./backofficeEntityDetailPage.css.js";
-import { buildTabsItems as ge } from "./detail/buildTabsItems.js";
-import { buildFieldItems as _e, renderBlocks as ve, resolveHeaderItems as ye } from "./BackofficeEntityDetailPage.view-helpers.js";
+import { extractMutationPayload as ne, isFormMutationAction as _, isMutationAction as re, isRouteAction as ie, resolveLabel as v } from "./BackofficeEntityDetailPage.helpers.js";
+import { headerActions as ae, headerBlock as oe, headerMeta as se, headerMetaList as ce } from "./backofficeEntityDetailPage.css.js";
+import { buildTabsItems as le } from "./detail/buildTabsItems.js";
+import { buildFieldItems as ue, renderBlocks as de, resolveHeaderItems as fe } from "./BackofficeEntityDetailPage.view-helpers.js";
 import { useContext as y, useMemo as b, useState as x } from "react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { useTranslation as T } from "react-i18next";
-import { Button as E } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { commitMutation as be, useFragment as D, usePreloadedQuery as O } from "react-relay";
-import { useToast as k } from "@plumile/ui/atomic/molecules/toast/ToastProvider.js";
-import A from "@plumile/router/routing/RoutingContext.js";
-import { FormattedDate as j } from "@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js";
-import { BACKOFFICE_DATE_TIME_OPTIONS as M } from "@plumile/backoffice-core/constants.js";
-import N from "@plumile/router/routing/Link.js";
-import { Tag as P } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
-import { buildBackofficeFallbackListHref as xe, buildBackofficeListHref as Se, buildBackofficeListLink as Ce } from "@plumile/backoffice-core/state/buildListHref.js";
-import { setWhereValue as we } from "@plumile/backoffice-core/filters/where.js";
-import { BackofficeTabs as Te } from "@plumile/ui/backoffice/molecules/backoffice_tabs/BackofficeTabs.js";
-import F from "@plumile/router/errors/HttpRedirect.js";
-import { LinkButton as Ee } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
-import { BackofficeKeyValueList as I } from "@plumile/ui/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.js";
-import { BackofficeRelationsMenu as De } from "@plumile/ui/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.js";
-import { ChatCheckSvg as L } from "@plumile/ui/icons/ChatCheckSvg.js";
-import { KeyOffSvg as R } from "@plumile/ui/icons/KeyOffSvg.js";
-import { KeySvg as z } from "@plumile/ui/icons/KeySvg.js";
-import { LockOpenSvg as B } from "@plumile/ui/icons/LockOpenSvg.js";
-import { LockSvg as Oe } from "@plumile/ui/icons/LockSvg.js";
-import { RobotCheckSvg as ke } from "@plumile/ui/icons/RobotCheckSvg.js";
-import { RobotXSvg as Ae } from "@plumile/ui/icons/RobotXSvg.js";
-import { RocketOffSvg as je } from "@plumile/ui/icons/RocketOffSvg.js";
-import { RocketSvg as V } from "@plumile/ui/icons/RocketSvg.js";
-import { SettingsCheckSvg as H } from "@plumile/ui/icons/SettingsCheckSvg.js";
-import { SettingsXSvg as U } from "@plumile/ui/icons/SettingsXSvg.js";
-import { ShieldLockSvg as W } from "@plumile/ui/icons/ShieldLockSvg.js";
-import { ShieldOffSvg as G } from "@plumile/ui/icons/ShieldOffSvg.js";
-import { XBadgeSvg as K } from "@plumile/ui/icons/XBadgeSvg.js";
+import { Fragment as pe, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useTranslation as me } from "react-i18next";
+import { Button as he } from "@plumile/ui/atomic/atoms/button/Button.js";
+import { commitMutation as ge, useFragment as w, usePreloadedQuery as T } from "react-relay";
+import { useToast as E } from "@plumile/ui/atomic/molecules/toast/ToastProvider.js";
+import D from "@plumile/router/routing/RoutingContext.js";
+import { FormattedDate as O } from "@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js";
+import { BACKOFFICE_DATE_TIME_OPTIONS as k } from "@plumile/backoffice-core/constants.js";
+import A from "@plumile/router/routing/Link.js";
+import { Tag as j } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
+import { buildBackofficeFallbackListHref as _e, buildBackofficeListHref as ve, buildBackofficeListLink as ye } from "@plumile/backoffice-core/state/buildListHref.js";
+import { BackofficeDetailSection as M } from "@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js";
+import { BackofficePayloadViewer as be } from "@plumile/ui/backoffice/molecules/backoffice_payload_viewer/BackofficePayloadViewer.js";
+import { setWhereValue as xe } from "@plumile/backoffice-core/filters/where.js";
+import { BackofficePageHeader as Se } from "@plumile/ui/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js";
+import { AuditTimeline as Ce } from "@plumile/ui/backoffice/organisms/audit_timeline/AuditTimeline.js";
+import { MetricCard as we } from "@plumile/ui/components/dashboard/metric_card/MetricCard.js";
+import { MetricTileGroup as Te } from "@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js";
+import { Tabs as Ee } from "@plumile/ui/atomic/molecules/tabs/Tabs.js";
+import { DetailPageTemplate as De } from "@plumile/ui/backoffice/templates/detail_page_template/DetailPageTemplate.js";
+import N from "@plumile/router/errors/HttpRedirect.js";
+import { DataTable as Oe } from "@plumile/ui/components/data-table/DataTable.js";
+import { LinkButton as ke } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
+import { BackofficeKeyValueList as P } from "@plumile/ui/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.js";
+import { BackofficeRelationsMenu as Ae } from "@plumile/ui/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.js";
+import { BackofficeScopeStack as je } from "@plumile/ui/backoffice/molecules/backoffice_scope_stack/BackofficeScopeStack.js";
+import { ChatCheckSvg as F } from "@plumile/ui/icons/ChatCheckSvg.js";
+import { KeyOffSvg as I } from "@plumile/ui/icons/KeyOffSvg.js";
+import { KeySvg as L } from "@plumile/ui/icons/KeySvg.js";
+import { LockOpenSvg as R } from "@plumile/ui/icons/LockOpenSvg.js";
+import { LockSvg as z } from "@plumile/ui/icons/LockSvg.js";
+import { RobotCheckSvg as B } from "@plumile/ui/icons/RobotCheckSvg.js";
+import { RobotXSvg as V } from "@plumile/ui/icons/RobotXSvg.js";
+import { RocketOffSvg as H } from "@plumile/ui/icons/RocketOffSvg.js";
+import { RocketSvg as U } from "@plumile/ui/icons/RocketSvg.js";
+import { SettingsCheckSvg as W } from "@plumile/ui/icons/SettingsCheckSvg.js";
+import { SettingsXSvg as G } from "@plumile/ui/icons/SettingsXSvg.js";
+import { ShieldLockSvg as K } from "@plumile/ui/icons/ShieldLockSvg.js";
+import { ShieldOffSvg as Me } from "@plumile/ui/icons/ShieldOffSvg.js";
+import { XBadgeSvg as q } from "@plumile/ui/icons/XBadgeSvg.js";
 //#region src/pages/BackofficeEntityDetailPage.tsx
-var Me = (e) => {
+var Ne = (e) => {
 	switch (e) {
-		case "shield-lock": return /* @__PURE__ */ C(W, {
+		case "shield-lock": return /* @__PURE__ */ S(K, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "shield-off": return /* @__PURE__ */ C(G, {
+		case "shield-off": return /* @__PURE__ */ S(Me, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "settings-check": return /* @__PURE__ */ C(H, {
+		case "settings-check": return /* @__PURE__ */ S(W, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "settings-x": return /* @__PURE__ */ C(U, {
+		case "settings-x": return /* @__PURE__ */ S(G, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "x-badge": return /* @__PURE__ */ C(K, {
+		case "x-badge": return /* @__PURE__ */ S(q, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "chat-check": return /* @__PURE__ */ C(L, {
+		case "chat-check": return /* @__PURE__ */ S(F, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "key": return /* @__PURE__ */ C(z, {
+		case "key": return /* @__PURE__ */ S(L, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "key-off": return /* @__PURE__ */ C(R, {
+		case "key-off": return /* @__PURE__ */ S(I, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "lock": return /* @__PURE__ */ C(Oe, {
+		case "lock": return /* @__PURE__ */ S(z, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "lock-open": return /* @__PURE__ */ C(B, {
+		case "lock-open": return /* @__PURE__ */ S(R, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "robot-check": return /* @__PURE__ */ C(ke, {
+		case "robot-check": return /* @__PURE__ */ S(B, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "robot-x": return /* @__PURE__ */ C(Ae, {
+		case "robot-x": return /* @__PURE__ */ S(V, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "rocket": return /* @__PURE__ */ C(V, {
+		case "rocket": return /* @__PURE__ */ S(U, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "rocket-off": return /* @__PURE__ */ C(je, {
+		case "rocket-off": return /* @__PURE__ */ S(H, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
 		default: throw Error(`Unsupported flag icon: ${String(e)}`);
 	}
-}, Ne = (e) => {
+}, Pe = (e) => {
 	if (e.presentation?.desktop === "secondary" || e.presentation?.group === "scope" || e.presentation?.group === "status") return "secondary";
 	let t = e.fields?.map((e) => e.presentation?.group) ?? [];
 	return t.length > 0 && t.every((e) => e === "scope" || e === "status") || e.placement === "side" || e.placement === "secondary" ? "secondary" : "primary";
-}, q = ({ config: L, prepared: R }) => {
-	let { t: z } = T(), { t: B } = e(), { formatNumber: Oe, formatCurrency: ke, formatCurrencyTitle: Ae, formatPercent: je } = p(), { entities: V, entityRegistry: H } = n(), { layoutView: U } = g(), W = y(A), G = m(), K = k(), [q, J] = x({}), [Pe, Fe] = x(null), Y = h({
-		mainPage: L.pages.mainPage,
-		subPages: L.pages.subPages,
-		activePagePath: R.pagePath,
-		node: U
-	}), X = Y.activePage ?? L.pages.mainPage, Ie = Y.pages.length > 0 ? Y.pages : [L.pages.mainPage], Z = (e, t) => {
+}, Fe = ({ config: F, prepared: I }) => {
+	let { t: L } = me(), { t: R } = e(), { formatNumber: z, formatCurrency: B, formatCurrencyTitle: V, formatPercent: H } = p(), { entities: U, entityRegistry: W } = n(), { layoutView: G } = g(), K = y(D), Me = m(), q = E(), [Fe, J] = x({}), [Ie, Le] = x(null), Y = h({
+		mainPage: F.pages.mainPage,
+		subPages: F.pages.subPages,
+		activePagePath: I.pagePath,
+		node: G
+	}), X = Y.activePage ?? F.pages.mainPage, Re = Y.pages.length > 0 ? Y.pages : [F.pages.mainPage], Z = (e, t) => {
 		J((n) => n[e] === t ? n : {
 			...n,
 			[e]: t
 		});
-	}, { page: Q } = L, Le = O(Q.query, R.pageQuery), $ = Q.resolveNode(Le, {
-		id: R.id,
-		detailId: R.detailId
-	}), Re = $ != null, ze = D(Q.fragment, $), Be = b(() => Object.fromEntries(Q.content.flatMap((e) => e.kind === "fieldSet" ? e.fields.flatMap((e) => e.type === "relation" ? [e.relation.target] : []) : []).flatMap((e) => {
-		let t = V[e];
+	}, { page: Q } = F, ze = T(Q.query, I.pageQuery), $ = Q.resolveNode(ze, {
+		id: I.id,
+		detailId: I.detailId
+	}), Be = $ != null, Ve = w(Q.fragment, $), He = b(() => Object.fromEntries(Q.content.flatMap((e) => e.kind === "fieldSet" ? e.fields.flatMap((e) => e.type === "relation" ? [e.relation.target] : []) : []).flatMap((e) => {
+		let t = U[e];
 		return t?.hasList === !0 ? [[e, t.routes.list]] : [];
-	})), [V, Q.content]);
-	if (!Re) throw new F(L.routes.list);
-	return /* @__PURE__ */ C(f, {
-		node: ze,
+	})), [U, Q.content]);
+	if (!Be) throw new N(F.routes.list);
+	return /* @__PURE__ */ S(f, {
+		node: Ve,
 		render: (e) => {
-			let n = Q.toView(e), f = ge({
-				pages: Ie,
-				id: R.id,
-				tApp: z,
-				detailPageHref: L.routes.detailPage
+			let n = Q.toView(e), f = le({
+				pages: Re,
+				id: I.id,
+				tApp: L,
+				detailPageHref: F.routes.detailPage
 			}), p = (e, t) => {
-				let n = V[e];
+				let n = U[e];
 				return n == null ? null : n.routes.detail(t);
 			}, m = ({ id: e, label: t, count: n, relation: r, listRoute: i, value: a, where: o }) => {
-				let { target: s, filterId: c, whereKey: l, path: u } = r, d = H.getLoadedListEntity(s);
+				let { target: s, filterId: c, whereKey: l, path: u } = r, d = W.getLoadedListEntity(s);
 				return {
 					id: e,
 					label: t,
 					count: n,
-					href: d == null ? xe(i, o, [{
+					href: d == null ? _e(i, o, [{
 						id: c ?? (u == null ? l : `${l}.${u.join(".")}`),
 						value: a
-					}]) : Se(d.config, { where: o }),
+					}]) : ve(d.config, { where: o }),
 					onClick: async (e) => {
-						if (W == null || e.defaultPrevented || e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+						if (K == null || e.defaultPrevented || e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
 						e.preventDefault();
-						let t = Ce((await H.loadListEntity(s)).config, { where: o });
-						W.history.push({
+						let t = ye((await W.loadListEntity(s)).config, { where: o });
+						K.history.push({
 							pathname: t.pathname,
 							search: t.search === "" ? "" : `?${t.search}`,
 							hash: ""
 						});
 					}
 				};
-			}, h = ye(L.header, U, {
-				tApp: z,
-				t: B,
+			}, h = fe(F.header, G, {
+				tApp: L,
+				t: R,
 				resolveEntityHref: p,
-				renderLink: (e, t) => /* @__PURE__ */ C(N, {
+				renderLink: (e, t) => /* @__PURE__ */ S(A, {
 					to: e,
 					children: t
 				}),
-				renderDate: (e, t) => /* @__PURE__ */ C(j, {
+				renderDate: (e, t) => /* @__PURE__ */ S(O, {
 					value: e,
-					options: M,
+					options: k,
 					fallback: t
 				}),
-				renderTag: (e, t) => /* @__PURE__ */ C(P, {
+				renderTag: (e, t) => /* @__PURE__ */ S(j, {
 					tone: e,
 					children: t
 				}),
-				renderBadgeRow: (e) => /* @__PURE__ */ C(c, { items: e })
-			}), g = ce({
-				config: L,
-				tApp: z,
-				entityId: R.id,
-				layoutView: U,
-				pageLabel: X.label(z),
+				renderBadgeRow: (e) => /* @__PURE__ */ S(s, { items: e })
+			}), g = te({
+				config: F,
+				tApp: L,
+				entityId: I.id,
+				layoutView: G,
+				pageLabel: X.label(L),
 				pageId: X.id
 			}), y = Q.actions ?? [], b = [];
 			if (y.length > 0) {
 				let e = y.filter((e) => e.isVisible == null ? !0 : e.isVisible(n));
 				e.length > 0 && (b = e.map((e) => {
-					let a = v(e.label, z), o = e.ariaLabel == null ? a : v(e.ariaLabel, z), s = e.variant ?? "secondary", c = e.size ?? "small", l = q[e.id] ?? !1, u = l || e.isDisabled?.(n) === !0;
-					return de(e) ? /* @__PURE__ */ C(Ee, {
+					let a = v(e.label, L), o = e.ariaLabel == null ? a : v(e.ariaLabel, L), s = e.variant ?? "secondary", c = e.size ?? "small", l = Fe[e.id] ?? !1, u = l || e.isDisabled?.(n) === !0;
+					return ie(e) ? /* @__PURE__ */ S(ke, {
 						to: e.to(n),
 						variant: s,
 						size: c,
 						isDisabled: u,
 						"aria-label": o,
 						children: a
-					}, e.id) : _(e) ? /* @__PURE__ */ C(E, {
+					}, e.id) : _(e) ? /* @__PURE__ */ S(he, {
 						type: "button",
 						variant: s,
 						size: c,
 						isLoading: !1,
 						disabled: u,
 						onClick: () => {
-							Fe(e.id);
+							Le(e.id);
 						},
 						"aria-label": o,
 						children: a
-					}, e.id) : ue(e) ? /* @__PURE__ */ C(E, {
+					}, e.id) : re(e) ? /* @__PURE__ */ S(he, {
 						type: "button",
 						variant: s,
 						size: c,
@@ -246,7 +248,7 @@ var Me = (e) => {
 						onClick: () => {
 							if (l) return;
 							let a = e.getVariables(n);
-							Z(e.id, !0), be(G, {
+							Z(e.id, !0), ge(Me, {
 								mutation: e.mutation,
 								variables: a,
 								updater: (t) => {
@@ -254,39 +256,39 @@ var Me = (e) => {
 								},
 								onCompleted: (a) => {
 									Z(e.id, !1);
-									let o = le(a);
+									let o = ne(a);
 									if (o != null) {
-										let i = B("actions.form.errors.invalidPayload");
-										e.toasts?.error?.message == null ? e.toasts?.error?.title != null && (i = v(e.toasts.error.title, z)) : i = v(e.toasts.error.message, z);
+										let i = R("actions.form.errors.invalidPayload");
+										e.toasts?.error?.message == null ? e.toasts?.error?.title != null && (i = v(e.toasts.error.title, L)) : i = v(e.toasts.error.message, L);
 										let a = t(o, {
 											defaultErrorMessage: i,
 											mapReason: (t) => {
 												let r = e.mapErrorReason?.(t, n);
-												return r == null ? null : typeof r == "function" ? v(r, z) : String(r);
+												return r == null ? null : typeof r == "function" ? v(r, L) : String(r);
 											}
 										});
 										if (!a.ok) {
 											let t = Error(a.message);
 											if (e.onError?.(t, n), e.toasts?.error != null) {
-												let t = r(e.toasts.error, z);
-												K.error(t.title, t.message);
+												let t = r(e.toasts.error, L);
+												q.error(t.title, t.message);
 											}
 											return;
 										}
 									}
 									if (e.onCompleted?.(a, n), e.toasts?.success != null) {
-										let t = r(e.toasts.success, z), o = i({
+										let t = r(e.toasts.success, L), o = i({
 											toast: e.toasts.success,
 											response: a,
 											node: n,
-											tApp: z,
-											entities: V,
-											defaultLabel: B("actions.view"),
+											tApp: L,
+											entities: U,
+											defaultLabel: R("actions.view"),
 											navigateTo: (e) => {
-												W?.history.push({ pathname: e });
+												K?.history.push({ pathname: e });
 											}
 										});
-										K.push({
+										q.push({
 											kind: "info",
 											title: t.title,
 											message: t.message,
@@ -296,8 +298,8 @@ var Me = (e) => {
 								},
 								onError: (t) => {
 									if (Z(e.id, !1), e.onError?.(t, n), e.toasts?.error != null) {
-										let t = r(e.toasts.error, z);
-										K.error(t.title, t.message);
+										let t = r(e.toasts.error, L);
+										q.error(t.title, t.message);
 									}
 								}
 							});
@@ -307,50 +309,50 @@ var Me = (e) => {
 					}, e.id) : null;
 				}));
 			}
-			let x = y.find((e) => e.id === Pe), { content: T } = Q, D = [], O = [], k = [];
-			T.forEach((e, t) => {
-				let r = Ne(e) === "secondary" ? O : D;
+			let x = y.find((e) => e.id === Ie), { content: me } = Q, w = [], T = [], E = [];
+			me.forEach((e, t) => {
+				let r = Pe(e) === "secondary" ? T : w;
 				if (e.kind === "fieldSet") {
-					let i = v(e.title, z), a = e.description == null ? void 0 : v(e.description, z), { items: o, relationItems: u, customNodes: d } = _e(e.fields, n, {
-						tApp: z,
-						t: B,
+					let i = v(e.title, L), a = e.description == null ? void 0 : v(e.description, L), { items: o, relationItems: u, customNodes: d } = ue(e.fields, n, {
+						tApp: L,
+						t: R,
 						resolveEntityHref: p,
-						formatNumber: Oe,
-						formatCurrency: ke,
-						formatCurrencyTitle: Ae,
-						formatPercent: je,
-						relationEntityListRoutes: Be,
+						formatNumber: z,
+						formatCurrency: B,
+						formatCurrencyTitle: V,
+						formatPercent: H,
+						relationEntityListRoutes: He,
 						resolveRelationItem: m,
-						setWhereValue: we,
-						renderTag: (e, t) => /* @__PURE__ */ C(P, {
+						setWhereValue: xe,
+						renderTag: (e, t) => /* @__PURE__ */ S(j, {
 							tone: e,
 							children: t
 						}),
-						renderBadgeRow: (e) => /* @__PURE__ */ C(c, { items: e }),
-						renderDate: (e, t) => /* @__PURE__ */ C(j, {
+						renderBadgeRow: (e) => /* @__PURE__ */ S(s, { items: e }),
+						renderDate: (e, t) => /* @__PURE__ */ S(O, {
 							value: e,
-							options: M,
+							options: k,
 							fallback: t
 						}),
-						renderFlagTag: (e) => /* @__PURE__ */ C(l, {
+						renderFlagTag: (e) => /* @__PURE__ */ S(c, {
 							tone: e.tone,
-							icon: e.iconName == null ? void 0 : Me(e.iconName),
+							icon: e.iconName == null ? void 0 : Ne(e.iconName),
 							label: e.label
 						}),
-						renderLink: (e, t) => /* @__PURE__ */ C(N, {
+						renderLink: (e, t) => /* @__PURE__ */ S(A, {
 							to: e,
 							children: t
 						}),
-						renderTaggedValue: (e, t) => /* @__PURE__ */ C(ne, {
+						renderTaggedValue: (e, t) => /* @__PURE__ */ S(l, {
 							tag: e,
 							value: t
 						}),
-						wrapCustomNode: (e, t) => /* @__PURE__ */ C("div", { children: t }, e)
+						wrapCustomNode: (e, t) => /* @__PURE__ */ S("div", { children: t }, e)
 					});
 					if (u.forEach((e) => {
-						k.some((t) => t.id === e.id) || k.push(e);
+						E.some((t) => t.id === e.id) || E.push(e);
 					}), !(o.length > 0 || d.length > 0)) return;
-					r.push(/* @__PURE__ */ C(s, {
+					r.push(/* @__PURE__ */ S(M, {
 						title: i,
 						description: a,
 						items: o.length > 0 ? o : void 0,
@@ -358,58 +360,73 @@ var Me = (e) => {
 					}, `${i}-${t}`));
 					return;
 				}
-				let i = ve([e], n, {
-					tApp: z,
-					t: B,
+				let i = de([e], n, {
+					tApp: L,
+					t: R,
 					resolveEntityHref: p,
 					keyPrefix: String(t),
-					renderLink: (e, t) => /* @__PURE__ */ C(N, {
+					renderLink: (e, t) => /* @__PURE__ */ S(A, {
 						to: e,
 						children: t
 					}),
-					renderDate: (e, t) => /* @__PURE__ */ C(j, {
+					renderDate: (e, t) => /* @__PURE__ */ S(O, {
 						value: e,
-						options: M,
+						options: k,
 						fallback: t
 					}),
-					renderTag: (e, t) => /* @__PURE__ */ C(P, {
+					renderTag: (e, t) => /* @__PURE__ */ S(j, {
 						tone: e,
 						children: t
 					}),
-					renderMetricGroup: ({ key: e, title: t, description: n, density: r, items: i }) => /* @__PURE__ */ C(s, {
+					renderMetricGroup: ({ key: e, title: t, description: n, density: r, items: i }) => /* @__PURE__ */ S(M, {
 						title: t,
 						description: n,
-						children: /* @__PURE__ */ C(re, {
-							items: i,
-							density: r ?? "comfortable"
+						children: i.length > 0 && /* @__PURE__ */ S(Te, {
+							density: r ?? "comfortable",
+							minColumn: "180",
+							children: i.map((e) => /* @__PURE__ */ S(we, {
+								label: e.label,
+								value: e.value,
+								hint: e.hint,
+								tone: e.tone ?? "neutral",
+								density: r ?? "comfortable",
+								copyValue: e.copyValue,
+								copyLabel: R("common.actions.copy"),
+								copiedLabel: R("common.actions.copied")
+							}, e.id))
 						})
 					}, e),
-					renderTimeline: ({ key: e, title: t, description: n, events: r }) => /* @__PURE__ */ C(ie, {
+					renderTimeline: ({ key: e, title: t, description: n, events: r }) => /* @__PURE__ */ S(u, {
 						title: t,
 						description: n,
 						events: r
 					}, e),
-					renderRelations: ({ key: e, title: t, items: n }) => /* @__PURE__ */ C(ae, {
+					renderAuditTimeline: ({ key: e, title: t, description: n, events: r }) => /* @__PURE__ */ S(M, {
+						title: t,
+						description: n,
+						children: /* @__PURE__ */ S(Ce, { events: r })
+					}, e),
+					renderRelations: ({ key: e, title: t, items: n }) => /* @__PURE__ */ S(d, {
 						title: t,
 						items: n
 					}, e),
-					renderContextStack: ({ key: e, title: t, items: n }) => /* @__PURE__ */ C(oe, {
+					renderContextStack: ({ key: e, title: t, items: n }) => /* @__PURE__ */ S(je, {
 						title: t,
 						items: n
 					}, e),
-					renderCustomSection: (e, t, n) => /* @__PURE__ */ C(s, {
+					renderCustomSection: (e, t, n) => /* @__PURE__ */ S(M, {
 						title: t,
 						children: n
 					}, e),
-					wrapCustomNode: (e, t) => /* @__PURE__ */ C("div", { children: t }, e),
+					wrapCustomNode: (e, t) => /* @__PURE__ */ S("div", { children: t }, e),
 					resolveTableColumns: (e) => o(e, {
-						tApp: z,
-						t: B
+						tApp: L,
+						t: R
 					}),
-					renderTable: ({ key: e, title: t, description: n, columns: r, rows: i }) => /* @__PURE__ */ C(s, {
+					renderTable: ({ key: e, title: t, description: n, columns: r, rows: i }) => /* @__PURE__ */ S(M, {
 						title: t,
 						description: n,
-						children: /* @__PURE__ */ C(te, {
+						children: /* @__PURE__ */ S(Oe, {
 							columns: r,
 							rows: i,
 							getRowId: (e, t) => {
@@ -421,67 +438,69 @@ var Me = (e) => {
 							}
 						})
 					}, e),
-					renderPayload: ({ key: e, title: t, description: n, content: r, format: i }) => /* @__PURE__ */ C(ee, {
+					renderPayload: ({ key: e, title: t, description: n, content: r, format: i }) => /* @__PURE__ */ S(M, {
 						title: t,
 						description: n,
-						content: r,
-						format: i
+						children: /* @__PURE__ */ S(be, {
+							content: r,
+							format: i,
+							emptyState: R("common.notAvailable")
+						})
 					}, e),
-					renderKeyValueListSection: ({ key: e, title: t, description: n, items: r }) => /* @__PURE__ */ C(s, {
+					renderKeyValueListSection: ({ key: e, title: t, description: n, items: r }) => /* @__PURE__ */ S(M, {
 						title: t,
 						description: n,
-						children: /* @__PURE__ */ C(I, { items: r })
+						children: /* @__PURE__ */ S(P, { items: r })
 					}, e)
 				})[0];
 				i != null && r.push(i);
 			});
-			let A = k.length > 0 ? /* @__PURE__ */ C(De, {
-				label: B("relations.menu.label"),
-				items: k
-			}) : null, F = b.length > 0 || A != null ? /* @__PURE__ */ w("div", {
-				className: fe,
-				children: [b.length > 0 && /* @__PURE__ */ C("div", {
+			let D = E.length > 0 ? /* @__PURE__ */ S(Ae, {
+				label: R("relations.menu.label"),
+				items: E
+			}) : null, N = b.length > 0 || D != null ? /* @__PURE__ */ C("div", {
+				className: ae,
+				children: [b.length > 0 && /* @__PURE__ */ S("div", {
 					className: "txvbqbdr8 txvbqbey txvbqbju2 txvbqbff6 txvbqbf91",
 					children: b
-				}), A != null && /* @__PURE__ */ C("div", {
+				}), D != null && /* @__PURE__ */ S("div", {
 					className: "txvbqbdr8 txvbqbey txvbqbyoc txvbqb97n txvbqb9nq txvbqb2et txvbqb65i",
-					children: A
+					children: D
 				})]
-			}) : void 0, J = h.status != null || h.badges != null ? /* @__PURE__ */ w("div", {
-				className: me,
+			}) : void 0, J = h.status != null || h.badges != null ? /* @__PURE__ */ C("div", {
+				className: se,
 				children: [h.status, h.badges]
-			}) : void 0, Y = h.items != null && h.items.length > 0 ? /* @__PURE__ */ C("div", {
-				className: he,
-				children: /* @__PURE__ */ C(I, { items: h.items })
-			}) : null, Le = O.length > 0, $ = null;
-			return Ie.length > 1 && ($ = /* @__PURE__ */ C(Te, {
+			}) : void 0, Y = h.items != null && h.items.length > 0 ? /* @__PURE__ */ S("div", {
+				className: ce,
+				children: /* @__PURE__ */ S(P, { items: h.items })
+			}) : null, ze = T.length > 0, $ = null;
+			return Re.length > 1 && ($ = /* @__PURE__ */ S(Ee, {
 				items: f,
 				activeId: X.id,
-				onChange: () => {},
 				variant: "underline"
-			})), /* @__PURE__ */ w(se, {
+			})), /* @__PURE__ */ C(ee, {
 				breadcrumb: g,
-				children: [/* @__PURE__ */ C(d, {
-					headerNode: /* @__PURE__ */ w("div", {
-						className: pe,
-						children: [/* @__PURE__ */ C(u, {
+				children: [/* @__PURE__ */ S(De, {
+					headerNode: /* @__PURE__ */ C("div", {
+						className: oe,
+						children: [/* @__PURE__ */ S(Se, {
 							title: h.title,
 							subtitle: h.subtitle,
-							actions: F,
+							actions: N,
 							meta: J
 						}), Y]
 					}),
 					tabsNode: $,
-					sidePanel: Le ? /* @__PURE__ */ C(S, { children: O }) : void 0,
+					sidePanel: ze ? /* @__PURE__ */ S(pe, { children: T }) : void 0,
 					sidePanelVariant: "plain",
 					headerDensity: "compact",
-					children: /* @__PURE__ */ C(S, { children: D })
-				}), x != null && _(x) && /* @__PURE__ */ C(a, {
+					children: /* @__PURE__ */ S(pe, { children: w })
+				}), x != null && _(x) && /* @__PURE__ */ S(a, {
 					isOpen: !0,
 					action: x,
 					node: n,
 					onClose: () => {
-						Fe(null);
+						Le(null);
 					}
 				})]
 			});
@@ -494,9 +513,9 @@ var Me = (e) => {
 		activePagePath: t.pagePath,
 		node: n
 	});
-	if (!r.hasVisiblePages || r.activePage == null) throw new F(e.routes.list);
-	if (r.activePage.id !== t.pageId) throw new F(e.routes.detailPage(t.id, r.activePage.id));
-	return /* @__PURE__ */ C(q, {
+	if (!r.hasVisiblePages || r.activePage == null) throw new N(e.routes.list);
+	if (r.activePage.id !== t.pageId) throw new N(e.routes.detailPage(t.id, r.activePage.id));
+	return /* @__PURE__ */ S(Fe, {
 		config: t.pageConfig,
 		prepared: t
 	});