@plumile/backoffice-react 0.1.153 → 0.1.156

package/lib/esm/pages/BackofficeEntityDetailPage.js

@@ -10,185 +10,170 @@ import { BackofficeDetailFlagTag as l } from "../components/backoffice/detail/Ba
 import { BackofficeDetailTaggedValue as u } from "../components/backoffice/detail/BackofficeDetailTaggedValue.js";
 import { BackofficeLifecycleTimelineSection as d } from "../components/backoffice/detail/BackofficeLifecycleTimelineSection.js";
 import { BackofficeRelationsSummaryGrid as f } 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 { layout as ee, primary as te, secondary as ne, stacked as re } from "../components/backoffice/detail/backofficeDetailLayout.css.js";
 import { BackofficeEntityDetailScaffold as p } from "../components/backoffice/scaffolds/BackofficeEntityDetailScaffold.js";
 import { useBackofficeFormats as m } from "../i18n/useBackofficeFormats.js";
-import { useRelayEnvironment as ne } from "../relay/useRelayEnvironment.js";
-import { resolveVisibleDetailPages as h } from "./detail/pageResolution.js";
-import { useBackofficeEntityDetailLayoutContext as g } from "./detail/BackofficeEntityDetailLayoutContext.js";
-import { BackofficeRedirect as _ } from "./BackofficeRedirect.js";
-import { extractMutationPayload as re, isFormMutationAction as v, isMutationAction as ie, isRouteAction as ae, resolveLabel as y } from "./BackofficeEntityDetailPage.helpers.js";
-import { headerActions as oe, headerBlock as se, headerMeta as ce, headerMetaList as le } from "./backofficeEntityDetailPage.css.js";
-import { buildTabsItems as ue } from "./detail/buildTabsItems.js";
-import { buildFieldItems as de, renderBlocks as fe, resolveHeaderItems as pe } from "./BackofficeEntityDetailPage.view-helpers.js";
-import { Suspense as b, useContext as x, useMemo as S, useState as C } from "react";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
-import { useTranslation as D } from "react-i18next";
-import { Button as O } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { commitMutation as me, useFragment as k, useLazyLoadQuery as A, usePreloadedQuery as j } from "react-relay";
-import { useToast as M } from "@plumile/ui/atomic/molecules/toast/ToastProvider.js";
-import N from "@plumile/router/routing/RoutingContext.js";
-import { FormattedDate as P } from "@plumile/ui/atomic/atoms/formatted-date/FormattedDate.js";
-import { BACKOFFICE_DATE_TIME_OPTIONS as F } from "@plumile/backoffice-core/constants.js";
-import I from "@plumile/router/routing/Link.js";
-import { Tag as L } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
+import { useRelayEnvironment as h } from "../relay/useRelayEnvironment.js";
+import { resolveVisibleDetailPages as g } from "./detail/pageResolution.js";
+import { headerActions as ie } from "./backofficeEntityDetailPage.css.js";
+import { extractMutationPayload as ae, isFormMutationAction as _, isMutationAction as oe, isRouteAction as se, resolveLabel as v } from "./BackofficeEntityDetailPage.helpers.js";
+import { buildFieldItems as ce, renderBlocks as le } from "./BackofficeEntityDetailPage.view-helpers.js";
+import { useBackofficeEntityDetailLayoutContext as y } from "./detail/BackofficeEntityDetailLayoutContext.js";
+import { BackofficeRedirect as b } from "./BackofficeRedirect.js";
+import { Suspense as x, useContext as S, useMemo as C, useState as w } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { useTranslation as O } from "react-i18next";
+import { Button as k } from "@plumile/ui/atomic/atoms/button/Button.js";
+import { commitMutation as ue, useFragment as de, useLazyLoadQuery as A, usePreloadedQuery as fe } from "react-relay";
+import { useToast as pe } from "@plumile/ui/atomic/molecules/toast/ToastProvider.js";
+import me 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 he, buildBackofficeListHref as ge, buildBackofficeListLink as _e } from "@plumile/backoffice-core/state/buildListHref.js";
-import { BackofficeDetailSection as R } from "@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js";
+import { BackofficeDetailSection as F } from "@plumile/ui/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.js";
 import { BackofficePayloadViewer as ve } from "@plumile/ui/backoffice/molecules/backoffice_payload_viewer/BackofficePayloadViewer.js";
 import { setWhereValue as ye } from "@plumile/backoffice-core/filters/where.js";
-import { BackofficePageHeader as be } from "@plumile/ui/backoffice/molecules/backoffice_page_header/BackofficePageHeader.js";
-import { AuditTimeline as xe } from "@plumile/ui/backoffice/organisms/audit_timeline/AuditTimeline.js";
-import { MetricCard as Se } from "@plumile/ui/components/dashboard/metric_card/MetricCard.js";
-import { MetricTileGroup as Ce } from "@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js";
-import { Tabs as we } from "@plumile/ui/atomic/molecules/tabs/Tabs.js";
-import { DetailPageTemplate as Te } from "@plumile/ui/backoffice/templates/detail_page_template/DetailPageTemplate.js";
-import { DataTable as Ee } from "@plumile/ui/components/data-table/DataTable.js";
-import { LinkButton as De } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
-import { BackofficeKeyValueList as z } from "@plumile/ui/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.js";
-import { BackofficeRelationsMenu as Oe } from "@plumile/ui/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.js";
-import { BackofficeScopeStack as ke } from "@plumile/ui/backoffice/molecules/backoffice_scope_stack/BackofficeScopeStack.js";
-import { ChatCheckSvg as B } from "@plumile/ui/icons/ChatCheckSvg.js";
-import { KeyOffSvg as Ae } from "@plumile/ui/icons/KeyOffSvg.js";
-import { KeySvg as je } from "@plumile/ui/icons/KeySvg.js";
-import { LockOpenSvg as Me } from "@plumile/ui/icons/LockOpenSvg.js";
-import { LockSvg as Ne } from "@plumile/ui/icons/LockSvg.js";
+import { AuditTimeline as be } from "@plumile/ui/backoffice/organisms/audit_timeline/AuditTimeline.js";
+import { MetricCard as xe } from "@plumile/ui/components/dashboard/metric_card/MetricCard.js";
+import { MetricTileGroup as Se } from "@plumile/ui/components/dashboard/metric_tile_group/MetricTileGroup.js";
+import { DataTable as Ce } from "@plumile/ui/components/data-table/DataTable.js";
+import { BackofficeKeyValueList as we } from "@plumile/ui/backoffice/molecules/backoffice_key_value_list/BackofficeKeyValueList.js";
+import { LinkButton as Te } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
+import { BackofficeRelationsMenu as Ee } from "@plumile/ui/backoffice/molecules/backoffice_relations_menu/BackofficeRelationsMenu.js";
+import { BackofficeScopeStack as De } from "@plumile/ui/backoffice/molecules/backoffice_scope_stack/BackofficeScopeStack.js";
+import { ChatCheckSvg as I } from "@plumile/ui/icons/ChatCheckSvg.js";
+import { KeyOffSvg as L } from "@plumile/ui/icons/KeyOffSvg.js";
+import { KeySvg as R } from "@plumile/ui/icons/KeySvg.js";
+import { LockOpenSvg as z } from "@plumile/ui/icons/LockOpenSvg.js";
+import { LockSvg as B } from "@plumile/ui/icons/LockSvg.js";
 import { RobotCheckSvg as V } from "@plumile/ui/icons/RobotCheckSvg.js";
 import { RobotXSvg as H } from "@plumile/ui/icons/RobotXSvg.js";
 import { RocketOffSvg as U } from "@plumile/ui/icons/RocketOffSvg.js";
 import { RocketSvg as W } from "@plumile/ui/icons/RocketSvg.js";
-import { SettingsCheckSvg as Pe } from "@plumile/ui/icons/SettingsCheckSvg.js";
-import { SettingsXSvg as G } from "@plumile/ui/icons/SettingsXSvg.js";
-import { ShieldLockSvg as Fe } from "@plumile/ui/icons/ShieldLockSvg.js";
-import { ShieldOffSvg as K } from "@plumile/ui/icons/ShieldOffSvg.js";
-import { XBadgeSvg as Ie } from "@plumile/ui/icons/XBadgeSvg.js";
+import { SettingsCheckSvg as G } from "@plumile/ui/icons/SettingsCheckSvg.js";
+import { SettingsXSvg as K } from "@plumile/ui/icons/SettingsXSvg.js";
+import { ShieldLockSvg as q } from "@plumile/ui/icons/ShieldLockSvg.js";
+import { ShieldOffSvg as J } from "@plumile/ui/icons/ShieldOffSvg.js";
+import { XBadgeSvg as Y } from "@plumile/ui/icons/XBadgeSvg.js";
 //#region src/pages/BackofficeEntityDetailPage.tsx
-var q = "store-or-network", J = ({ count: e, node: t, relationValue: n }) => {
-	let r = A(e.query, e.getVariables(t, n), { fetchPolicy: q }), i = e.getCount(r);
-	return i == null ? null : /* @__PURE__ */ T(w, { children: i });
-}, Le = ({ count: e, node: t, relationValue: n }) => e == null ? null : /* @__PURE__ */ T(r, {
+var X = "store-or-network", Z = ({ count: e, node: t, relationValue: n }) => {
+	let r = A(e.query, e.getVariables(t, n), { fetchPolicy: X }), i = e.getCount(r);
+	return i == null ? null : /* @__PURE__ */ E(T, { children: i });
+}, Oe = ({ count: e, node: t, relationValue: n }) => e == null ? null : /* @__PURE__ */ E(r, {
 	fallback: () => null,
-	children: /* @__PURE__ */ T(b, {
+	children: /* @__PURE__ */ E(x, {
 		fallback: null,
-		children: /* @__PURE__ */ T(J, {
+		children: /* @__PURE__ */ E(Z, {
 			count: e,
 			node: t,
 			relationValue: n
 		})
 	})
-}), Re = (e) => {
+}), ke = (e) => {
 	switch (e) {
-		case "shield-lock": return /* @__PURE__ */ T(Fe, {
+		case "shield-lock": return /* @__PURE__ */ E(q, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "shield-off": return /* @__PURE__ */ T(K, {
+		case "shield-off": return /* @__PURE__ */ E(J, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "settings-check": return /* @__PURE__ */ T(Pe, {
+		case "settings-check": return /* @__PURE__ */ E(G, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "settings-x": return /* @__PURE__ */ T(G, {
+		case "settings-x": return /* @__PURE__ */ E(K, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "x-badge": return /* @__PURE__ */ T(Ie, {
+		case "x-badge": return /* @__PURE__ */ E(Y, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "chat-check": return /* @__PURE__ */ T(B, {
+		case "chat-check": return /* @__PURE__ */ E(I, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "key": return /* @__PURE__ */ T(je, {
+		case "key": return /* @__PURE__ */ E(R, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "key-off": return /* @__PURE__ */ T(Ae, {
+		case "key-off": return /* @__PURE__ */ E(L, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "lock": return /* @__PURE__ */ T(Ne, {
+		case "lock": return /* @__PURE__ */ E(B, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "lock-open": return /* @__PURE__ */ T(Me, {
+		case "lock-open": return /* @__PURE__ */ E(z, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "robot-check": return /* @__PURE__ */ T(V, {
+		case "robot-check": return /* @__PURE__ */ E(V, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "robot-x": return /* @__PURE__ */ T(H, {
+		case "robot-x": return /* @__PURE__ */ E(H, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "rocket": return /* @__PURE__ */ T(W, {
+		case "rocket": return /* @__PURE__ */ E(W, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
-		case "rocket-off": return /* @__PURE__ */ T(U, {
+		case "rocket-off": return /* @__PURE__ */ E(U, {
 			width: 14,
 			height: 14,
 			"aria-hidden": "true"
 		});
 		default: throw Error(`Unsupported flag icon: ${String(e)}`);
 	}
-}, ze = (e) => {
+}, Ae = (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";
-}, Y = ({ config: r, prepared: b }) => {
-	let { t: A } = D(), { t: B } = e(), { formatNumber: Ae, formatCurrency: je, formatCurrencyTitle: Me, formatPercent: Ne } = m(), { entities: V, entityRegistry: H } = n(), { layoutView: U } = g(), W = x(N), Pe = ne(), G = M(), [Fe, K] = C({}), [Ie, q] = C(null), J = h({
-		mainPage: r.pages.mainPage,
-		subPages: r.pages.subPages,
-		activePagePath: b.pagePath,
-		node: U
-	}), Y = J.activePage ?? r.pages.mainPage, X = J.pages.length > 0 ? J.pages : [r.pages.mainPage], Z = (e, t) => {
-		K((n) => n[e] === t ? n : {
+}, Q = ({ config: r, prepared: g }) => {
+	let { t: y } = O(), { t: x } = e(), { formatNumber: A, formatCurrency: I, formatCurrencyTitle: L, formatPercent: R } = m(), { entities: z, entityRegistry: B } = n(), V = S(me), H = h(), U = pe(), [W, G] = w({}), [K, q] = w(null), J = (e, t) => {
+		G((n) => n[e] === t ? n : {
 			...n,
 			[e]: t
 		});
-	}, { page: Q } = r, Be = j(Q.query, b.pageQuery), $ = Q.resolveNode(Be, {
-		id: b.id,
-		detailId: b.detailId
-	}), Ve = $ != null, He = k(Q.fragment, $), Ue = S(() => 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: Y } = r, X = fe(Y.query, g.pageQuery), Z = Y.resolveNode(X, {
+		id: g.id,
+		detailId: g.detailId
+	}), Q = Z != null, $ = de(Y.fragment, Z), je = C(() => Object.fromEntries(Y.content.flatMap((e) => e.kind === "fieldSet" ? e.fields.flatMap((e) => e.type === "relation" ? [e.relation.target] : []) : []).flatMap((e) => {
+		let t = z[e];
 		return t?.hasList === !0 ? [[e, t.routes.list]] : [];
-	})), [V, Q.content]);
-	return Ve ? /* @__PURE__ */ T(p, {
-		node: He,
+	})), [z, Y.content]);
+	return Q ? /* @__PURE__ */ E(p, {
+		node: $,
 		render: (e) => {
-			let n = Q.toView(e), p = ue({
-				pages: X,
-				id: b.id,
-				tApp: A,
-				detailPageHref: r.routes.detailPage
-			}), m = (e, t) => {
-				let n = V[e];
+			let n = Y.toView(e), r = (e, t) => {
+				let n = z[e];
 				return n == null ? null : n.routes.detail(t);
-			}, ne = ({ id: e, label: t, count: r, relation: i, listRoute: a, value: o, where: s }) => {
-				let { target: c, filterId: l, whereKey: u, path: d } = i, f = H.getLoadedListEntity(c);
+			}, p = ({ id: e, label: t, count: r, relation: i, listRoute: a, value: o, where: s }) => {
+				let { target: c, filterId: l, whereKey: u, path: d } = i, f = B.getLoadedListEntity(c);
 				return {
 					id: e,
 					label: t,
-					count: Le({
+					count: Oe({
 						count: r,
 						node: n,
 						relationValue: o
@@ -198,54 +183,30 @@ var q = "store-or-network", J = ({ count: e, node: t, relationValue: n }) => {
 						value: o
 					}]) : ge(f.config, { where: s }),
 					onClick: async (e) => {
-						if (W == null || e.defaultPrevented || e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+						if (V == null || e.defaultPrevented || e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
 						e.preventDefault();
-						let t = _e((await H.loadListEntity(c)).config, { where: s });
-						W.history.push({
+						let t = _e((await B.loadListEntity(c)).config, { where: s });
+						V.history.push({
 							pathname: t.pathname,
 							search: t.search === "" ? "" : `?${t.search}`,
 							hash: ""
 						});
 					}
 				};
-			}, h = pe(r.header, U, {
-				tApp: A,
-				t: B,
-				resolveEntityHref: m,
-				renderLink: (e, t) => /* @__PURE__ */ T(I, {
-					to: e,
-					children: t
-				}),
-				renderDate: (e, t) => /* @__PURE__ */ T(P, {
-					value: e,
-					options: F,
-					fallback: t
-				}),
-				renderTag: (e, t) => /* @__PURE__ */ T(L, {
-					tone: e,
-					children: t
-				}),
-				renderBadgeRow: (e) => /* @__PURE__ */ T(c, { items: e })
-			}), g = te({
-				config: r,
-				tApp: A,
-				entityId: b.id,
-				layoutView: U,
-				pageLabel: Y.label(A),
-				pageId: Y.id
-			}), _ = Q.actions ?? [], x = [];
-			if (_.length > 0) {
-				let e = _.filter((e) => e.isVisible == null ? !0 : e.isVisible(n));
-				e.length > 0 && (x = e.map((e) => {
-					let r = y(e.label, A), o = e.ariaLabel == null ? r : y(e.ariaLabel, A), s = e.variant ?? "secondary", c = e.size ?? "small", l = Fe[e.id] ?? !1, u = l || e.isDisabled?.(n) === !0;
-					return ae(e) ? /* @__PURE__ */ T(De, {
+			}, m = Y.actions ?? [], h = [];
+			if (m.length > 0) {
+				let e = m.filter((e) => e.isVisible == null ? !0 : e.isVisible(n));
+				e.length > 0 && (h = e.map((e) => {
+					let r = v(e.label, y), o = e.ariaLabel == null ? r : v(e.ariaLabel, y), s = e.variant ?? "secondary", c = e.size ?? "small", l = W[e.id] ?? !1, u = l || e.isDisabled?.(n) === !0;
+					return se(e) ? /* @__PURE__ */ E(Te, {
 						to: e.to(n),
 						variant: s,
 						size: c,
 						isDisabled: u,
 						"aria-label": o,
+						preloadOnMouseEnter: !0,
 						children: r
-					}, e.id) : v(e) ? /* @__PURE__ */ T(O, {
+					}, e.id) : _(e) ? /* @__PURE__ */ E(k, {
 						type: "button",
 						variant: s,
 						size: c,
@@ -256,7 +217,7 @@ var q = "store-or-network", J = ({ count: e, node: t, relationValue: n }) => {
 						},
 						"aria-label": o,
 						children: r
-					}, e.id) : ie(e) ? /* @__PURE__ */ T(O, {
+					}, e.id) : oe(e) ? /* @__PURE__ */ E(k, {
 						type: "button",
 						variant: s,
 						size: c,
@@ -265,47 +226,47 @@ var q = "store-or-network", J = ({ count: e, node: t, relationValue: n }) => {
 						onClick: () => {
 							if (l) return;
 							let r = e.getVariables(n);
-							Z(e.id, !0), me(Pe, {
+							J(e.id, !0), ue(H, {
 								mutation: e.mutation,
 								variables: r,
 								updater: (t) => {
 									e.updater?.(t, n);
 								},
 								onCompleted: (r) => {
-									Z(e.id, !1);
-									let o = re(r);
+									J(e.id, !1);
+									let o = ae(r);
 									if (o != null) {
-										let r = B("actions.form.errors.invalidPayload");
-										e.toasts?.error?.message == null ? e.toasts?.error?.title != null && (r = y(e.toasts.error.title, A)) : r = y(e.toasts.error.message, A);
+										let r = x("actions.form.errors.invalidPayload");
+										e.toasts?.error?.message == null ? e.toasts?.error?.title != null && (r = v(e.toasts.error.title, y)) : r = v(e.toasts.error.message, y);
 										let a = t(o, {
 											defaultErrorMessage: r,
 											mapReason: (t) => {
 												let r = e.mapErrorReason?.(t, n);
-												return r == null ? null : typeof r == "function" ? y(r, A) : String(r);
+												return r == null ? null : typeof r == "function" ? v(r, y) : String(r);
 											}
 										});
 										if (!a.ok) {
 											let t = Error(a.message);
 											if (e.onError?.(t, n), e.toasts?.error != null) {
-												let t = i(e.toasts.error, A);
-												G.error(t.title, t.message);
+												let t = i(e.toasts.error, y);
+												U.error(t.title, t.message);
 											}
 											return;
 										}
 									}
 									if (e.onCompleted?.(r, n), e.toasts?.success != null) {
-										let t = i(e.toasts.success, A), o = a({
+										let t = i(e.toasts.success, y), o = a({
 											toast: e.toasts.success,
 											response: r,
 											node: n,
-											tApp: A,
-											entities: V,
-											defaultLabel: B("actions.view"),
+											tApp: y,
+											entities: z,
+											defaultLabel: x("actions.view"),
 											navigateTo: (e) => {
-												W?.history.push({ pathname: e });
+												V?.history.push({ pathname: e });
 											}
 										});
-										G.push({
+										U.push({
 											kind: "info",
 											title: t.title,
 											message: t.message,
@@ -314,9 +275,9 @@ var q = "store-or-network", J = ({ count: e, node: t, relationValue: n }) => {
 									}
 								},
 								onError: (t) => {
-									if (Z(e.id, !1), e.onError?.(t, n), e.toasts?.error != null) {
-										let t = i(e.toasts.error, A);
-										G.error(t.title, t.message);
+									if (J(e.id, !1), e.onError?.(t, n), e.toasts?.error != null) {
+										let t = i(e.toasts.error, y);
+										U.error(t.title, t.message);
 									}
 								}
 							});
@@ -326,124 +287,126 @@ var q = "store-or-network", J = ({ count: e, node: t, relationValue: n }) => {
 					}, e.id) : null;
 				}));
 			}
-			let S = _.find((e) => e.id === Ie), { content: C } = Q, D = [], k = [], j = [];
-			C.forEach((e, t) => {
-				let r = ze(e) === "secondary" ? k : D;
+			let g = m.find((e) => e.id === K), { content: b } = Y, S = [], C = [], w = [];
+			b.forEach((e, t) => {
+				let i = Ae(e) === "secondary" ? C : S;
 				if (e.kind === "fieldSet") {
-					let i = y(e.title, A), a = e.description == null ? void 0 : y(e.description, A), { items: o, relationItems: s, customNodes: d } = de(e.fields, n, {
-						tApp: A,
-						t: B,
-						resolveEntityHref: m,
-						formatNumber: Ae,
-						formatCurrency: je,
-						formatCurrencyTitle: Me,
-						formatPercent: Ne,
-						relationEntityListRoutes: Ue,
-						resolveRelationItem: ne,
+					let a = v(e.title, y), o = e.description == null ? void 0 : v(e.description, y), { items: s, relationItems: d, customNodes: f } = ce(e.fields, n, {
+						tApp: y,
+						t: x,
+						resolveEntityHref: r,
+						formatNumber: A,
+						formatCurrency: I,
+						formatCurrencyTitle: L,
+						formatPercent: R,
+						relationEntityListRoutes: je,
+						resolveRelationItem: p,
 						setWhereValue: ye,
-						renderTag: (e, t) => /* @__PURE__ */ T(L, {
+						renderTag: (e, t) => /* @__PURE__ */ E(P, {
 							tone: e,
 							children: t
 						}),
-						renderBadgeRow: (e) => /* @__PURE__ */ T(c, { items: e }),
-						renderDate: (e, t) => /* @__PURE__ */ T(P, {
+						renderBadgeRow: (e) => /* @__PURE__ */ E(c, { items: e }),
+						renderDate: (e, t) => /* @__PURE__ */ E(j, {
 							value: e,
-							options: F,
+							options: M,
 							fallback: t
 						}),
-						renderFlagTag: (e) => /* @__PURE__ */ T(l, {
+						renderFlagTag: (e) => /* @__PURE__ */ E(l, {
 							tone: e.tone,
-							icon: e.iconName == null ? void 0 : Re(e.iconName),
+							icon: e.iconName == null ? void 0 : ke(e.iconName),
 							label: e.label
 						}),
-						renderLink: (e, t) => /* @__PURE__ */ T(I, {
+						renderLink: (e, t) => /* @__PURE__ */ E(N, {
 							to: e,
+							preloadOnMouseEnter: !0,
 							children: t
 						}),
-						renderTaggedValue: (e, t) => /* @__PURE__ */ T(u, {
+						renderTaggedValue: (e, t) => /* @__PURE__ */ E(u, {
 							tag: e,
 							value: t
 						}),
-						wrapCustomNode: (e, t) => /* @__PURE__ */ T("div", { children: t }, e)
+						wrapCustomNode: (e, t) => /* @__PURE__ */ E("div", { children: t }, e)
 					});
-					if (s.forEach((e) => {
-						j.some((t) => t.id === e.id) || j.push(e);
-					}), !(o.length > 0 || d.length > 0)) return;
-					r.push(/* @__PURE__ */ T(R, {
-						title: i,
-						description: a,
-						items: o.length > 0 ? o : void 0,
-						children: d
-					}, `${i}-${t}`));
+					if (d.forEach((e) => {
+						w.some((t) => t.id === e.id) || w.push(e);
+					}), !(s.length > 0 || f.length > 0)) return;
+					i.push(/* @__PURE__ */ E(F, {
+						title: a,
+						description: o,
+						items: s.length > 0 ? s : void 0,
+						children: f
+					}, `${a}-${t}`));
 					return;
 				}
-				let i = fe([e], n, {
-					tApp: A,
-					t: B,
-					resolveEntityHref: m,
+				let a = le([e], n, {
+					tApp: y,
+					t: x,
+					resolveEntityHref: r,
 					keyPrefix: String(t),
-					renderLink: (e, t) => /* @__PURE__ */ T(I, {
+					renderLink: (e, t) => /* @__PURE__ */ E(N, {
 						to: e,
+						preloadOnMouseEnter: !0,
 						children: t
 					}),
-					renderDate: (e, t) => /* @__PURE__ */ T(P, {
+					renderDate: (e, t) => /* @__PURE__ */ E(j, {
 						value: e,
-						options: F,
+						options: M,
 						fallback: t
 					}),
-					renderTag: (e, t) => /* @__PURE__ */ T(L, {
+					renderTag: (e, t) => /* @__PURE__ */ E(P, {
 						tone: e,
 						children: t
 					}),
-					renderMetricGroup: ({ key: e, title: t, description: n, density: r, items: i }) => /* @__PURE__ */ T(R, {
+					renderMetricGroup: ({ key: e, title: t, description: n, density: r, items: i }) => /* @__PURE__ */ E(F, {
 						title: t,
 						description: n,
-						children: i.length > 0 && /* @__PURE__ */ T(Ce, {
+						children: i.length > 0 && /* @__PURE__ */ E(Se, {
 							density: r ?? "comfortable",
 							minColumn: "180",
-							children: i.map((e) => /* @__PURE__ */ T(Se, {
+							children: i.map((e) => /* @__PURE__ */ E(xe, {
 								label: e.label,
 								value: e.value,
 								hint: e.hint,
 								tone: e.tone ?? "neutral",
 								density: r ?? "comfortable",
 								copyValue: e.copyValue,
-								copyLabel: B("common.actions.copy"),
-								copiedLabel: B("common.actions.copied")
+								copyLabel: x("common.actions.copy"),
+								copiedLabel: x("common.actions.copied")
 							}, e.id))
 						})
 					}, e),
-					renderTimeline: ({ key: e, title: t, description: n, events: r }) => /* @__PURE__ */ T(d, {
+					renderTimeline: ({ key: e, title: t, description: n, events: r }) => /* @__PURE__ */ E(d, {
 						title: t,
 						description: n,
 						events: r
 					}, e),
-					renderAuditTimeline: ({ key: e, title: t, description: n, events: r }) => /* @__PURE__ */ T(R, {
+					renderAuditTimeline: ({ key: e, title: t, description: n, events: r }) => /* @__PURE__ */ E(F, {
 						title: t,
 						description: n,
-						children: /* @__PURE__ */ T(xe, { events: r })
+						children: /* @__PURE__ */ E(be, { events: r })
 					}, e),
-					renderRelations: ({ key: e, title: t, items: n }) => /* @__PURE__ */ T(f, {
+					renderRelations: ({ key: e, title: t, items: n }) => /* @__PURE__ */ E(f, {
 						title: t,
 						items: n
 					}, e),
-					renderContextStack: ({ key: e, title: t, items: n }) => /* @__PURE__ */ T(ke, {
+					renderContextStack: ({ key: e, title: t, items: n }) => /* @__PURE__ */ E(De, {
 						title: t,
 						items: n
 					}, e),
-					renderCustomSection: (e, t, n) => /* @__PURE__ */ T(R, {
+					renderCustomSection: (e, t, n) => /* @__PURE__ */ E(F, {
 						title: t,
 						children: n
 					}, e),
-					wrapCustomNode: (e, t) => /* @__PURE__ */ T("div", { children: t }, e),
+					wrapCustomNode: (e, t) => /* @__PURE__ */ E("div", { children: t }, e),
 					resolveTableColumns: (e) => s(e, {
-						tApp: A,
-						t: B
+						tApp: y,
+						t: x
 					}),
-					renderTable: ({ key: e, title: t, description: n, columns: r, rows: i }) => /* @__PURE__ */ T(R, {
+					renderTable: ({ key: e, title: t, description: n, columns: r, rows: i }) => /* @__PURE__ */ E(F, {
 						title: t,
 						description: n,
-						children: /* @__PURE__ */ T(Ee, {
+						children: /* @__PURE__ */ E(Ce, {
 							columns: r,
 							rows: i,
 							getRowId: (e, t) => {
@@ -455,87 +418,75 @@ var q = "store-or-network", J = ({ count: e, node: t, relationValue: n }) => {
 							}
 						})
 					}, e),
-					renderPayload: ({ key: e, title: t, description: n, content: r, format: i }) => /* @__PURE__ */ T(R, {
+					renderPayload: ({ key: e, title: t, description: n, content: r, format: i }) => /* @__PURE__ */ E(F, {
 						title: t,
 						description: n,
-						children: /* @__PURE__ */ T(ve, {
+						children: /* @__PURE__ */ E(ve, {
 							content: r,
 							format: i,
-							emptyState: B("common.notAvailable")
+							emptyState: x("common.notAvailable")
 						})
 					}, e),
-					renderKeyValueListSection: ({ key: e, title: t, description: n, items: r }) => /* @__PURE__ */ T(R, {
+					renderKeyValueListSection: ({ key: e, title: t, description: n, items: r }) => /* @__PURE__ */ E(F, {
 						title: t,
 						description: n,
-						children: /* @__PURE__ */ T(z, { items: r })
+						children: /* @__PURE__ */ E(we, { items: r })
 					}, e)
 				})[0];
-				i != null && r.push(i);
+				a != null && i.push(a);
 			});
-			let M = j.length > 0 ? /* @__PURE__ */ T(Oe, {
-				label: B("relations.menu.label"),
-				items: j
-			}) : null, N = x.length > 0 || M != null ? /* @__PURE__ */ E("div", {
-				className: oe,
-				children: [x.length > 0 && /* @__PURE__ */ T("div", {
-					className: "txvbqbfpn txvbqbey txvbqblsh txvbqbhdl txvbqbh7g",
-					children: x
-				}), M != null && /* @__PURE__ */ T("div", {
-					className: "txvbqbfpn txvbqbey txvbqb10mr txvbqbb49 txvbqbbkc txvbqb2sj txvbqb7tt",
-					children: M
-				})]
-			}) : void 0, K = h.status != null || h.badges != null ? /* @__PURE__ */ E("div", {
-				className: ce,
-				children: [h.status, h.badges]
-			}) : void 0, J = h.items != null && h.items.length > 0 ? /* @__PURE__ */ T("div", {
-				className: le,
-				children: /* @__PURE__ */ T(z, { items: h.items })
-			}) : null, Be = k.length > 0, $ = null;
-			return X.length > 1 && ($ = /* @__PURE__ */ T(we, {
-				items: p,
-				activeId: Y.id,
-				variant: "underline"
-			})), /* @__PURE__ */ E(ee, {
-				breadcrumb: g,
-				children: [/* @__PURE__ */ T(Te, {
-					headerNode: /* @__PURE__ */ E("div", {
-						className: se,
-						children: [/* @__PURE__ */ T(be, {
-							title: h.title,
-							subtitle: h.subtitle,
-							actions: N,
-							meta: K
-						}), J]
-					}),
-					tabsNode: $,
-					sidePanel: Be ? /* @__PURE__ */ T(w, { children: k }) : void 0,
-					sidePanelVariant: "plain",
-					headerDensity: "compact",
-					children: /* @__PURE__ */ T(w, { children: D })
-				}), S != null && v(S) && /* @__PURE__ */ T(o, {
+			let O = w.length > 0 ? /* @__PURE__ */ E(Ee, {
+				label: x("relations.menu.label"),
+				items: w
+			}) : null;
+			return /* @__PURE__ */ D(T, { children: [
+				h.length > 0 || O != null ? /* @__PURE__ */ D("div", {
+					className: ie,
+					children: [h.length > 0 && /* @__PURE__ */ E("div", {
+						className: "txvbqbfpn txvbqbey txvbqblsh txvbqbhdl txvbqbh7g",
+						children: h
+					}), O != null && /* @__PURE__ */ E("div", {
+						className: "txvbqbfpn txvbqbey txvbqb10mr txvbqbb49 txvbqbbkc txvbqb2sj txvbqb7tt",
+						children: O
+					})]
+				}) : null,
+				C.length > 0 ? /* @__PURE__ */ D("div", {
+					className: ee,
+					children: [/* @__PURE__ */ E("div", {
+						className: te,
+						children: S
+					}), /* @__PURE__ */ E("aside", {
+						className: ne,
+						children: C
+					})]
+				}) : /* @__PURE__ */ E("div", {
+					className: re,
+					children: S
+				}),
+				g != null && _(g) && /* @__PURE__ */ E(o, {
 					isOpen: !0,
-					action: S,
+					action: g,
 					node: n,
 					onClose: () => {
 						q(null);
 					}
-				})]
-			});
+				})
+			] });
 		}
-	}) : /* @__PURE__ */ T(_, { to: r.routes.list });
-}, X = ({ config: e, prepared: t }) => {
-	let { layoutView: n } = g(), r = h({
+	}) : /* @__PURE__ */ E(b, { to: r.routes.list });
+}, $ = ({ config: e, prepared: t }) => {
+	let { layoutView: n } = y(), r = g({
 		mainPage: e.pages.mainPage,
 		subPages: e.pages.subPages,
 		activePagePath: t.pagePath,
 		node: n
 	});
-	return !r.hasVisiblePages || r.activePage == null ? /* @__PURE__ */ T(_, { to: e.routes.list }) : r.activePage.id === t.pageId ? /* @__PURE__ */ T(Y, {
+	return !r.hasVisiblePages || r.activePage == null ? /* @__PURE__ */ E(b, { to: e.routes.list }) : r.activePage.id === t.pageId ? /* @__PURE__ */ E(Q, {
 		config: t.pageConfig,
 		prepared: t
-	}) : /* @__PURE__ */ T(_, { to: e.routes.detailPage(t.id, r.activePage.id) });
+	}) : /* @__PURE__ */ E(b, { to: e.routes.detailPage(t.id, r.activePage.id) });
 };
 //#endregion
-export { X as BackofficeEntityDetailPage, X as default };
+export { $ as BackofficeEntityDetailPage, $ as default };
 
 //# sourceMappingURL=BackofficeEntityDetailPage.js.map