@questpie/admin 1.1.1 → 3.0.0

package/dist/client/views/dashboard/dashboard-grid.mjs

@@ -0,0 +1,881 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card.mjs";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../components/ui/accordion.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs.mjs";
+import { DashboardWidget } from "./dashboard-widget.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/dashboard/dashboard-grid.tsx
+/**
+* DashboardGrid Component
+*
+* Renders a grid of dashboard widgets based on configuration.
+* Supports:
+* - Responsive layouts with container queries
+* - Widget spanning
+* - Dashboard sections (grouped widgets)
+* - Dashboard tabs (tabbed widget groups)
+* - Recursive nesting of sections/tabs
+*/
+/**
+* Grid column classes for different column counts.
+* Uses CSS grid with auto rows — each widget takes its natural height.
+*/
+const gridClasses = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 @xs:grid-cols-2",
+	3: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3",
+	4: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4",
+	5: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5",
+	6: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5 @xl:grid-cols-6",
+	12: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-12"
+};
+/**
+* Span classes for widget column spanning.
+*/
+const spanClasses = {
+	1: "col-span-1",
+	2: "col-span-full @sm:col-span-2",
+	3: "col-span-full @sm:col-span-2 @md:col-span-3",
+	4: "col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-4",
+	5: "col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-5",
+	6: "col-span-full @sm:col-span-2 @md:col-span-3 @lg:col-span-6",
+	12: "col-span-full"
+};
+/**
+* Get grid columns class based on column count
+*/
+function getGridClass(columns) {
+	return gridClasses[columns] || gridClasses[4];
+}
+/**
+* Get column span class for a widget.
+* Returns responsive span classes that gracefully collapse on smaller screens.
+* For custom responsive behavior, use className prop directly.
+*/
+function getSpanClass(span) {
+	if (!span || span <= 1) return "col-span-1";
+	if (spanClasses[span]) return spanClasses[span];
+	if (span >= 7 && span <= 11) return `col-span-1 @xs:col-span-2 @md:col-span-3 @lg:col-span-${span}`;
+	return `col-span-${Math.min(span, 12)}`;
+}
+/**
+* Check if item is a widget config
+*/
+function isWidgetConfig(item) {
+	return typeof item === "object" && "type" in item && item.type !== "section" && item.type !== "tabs";
+}
+/**
+* Check if item is a section config
+*/
+function isSectionConfig(item) {
+	return typeof item === "object" && "type" in item && item.type === "section";
+}
+/**
+* Check if item is a tabs config
+*/
+function isTabsConfig(item) {
+	return typeof item === "object" && "type" in item && item.type === "tabs";
+}
+/**
+* Generate a unique key for a layout item
+*/
+function getLayoutItemKey(item, index) {
+	if (isWidgetConfig(item)) return `widget-${item.id || item.type}-${index}`;
+	if (isSectionConfig(item)) return `section-${index}`;
+	if (isTabsConfig(item)) return `tabs-${item.tabs.map((t) => t.id).join("-") || index}`;
+	return `item-${index}`;
+}
+function DashboardHeader(t0) {
+	const $ = c(15);
+	const { title, description, actions, navigate, resolveText } = t0;
+	if (!title && !description && !actions?.length) return null;
+	let t1;
+	if ($[0] !== navigate) {
+		t1 = (action) => {
+			if (action.onClick) action.onClick();
+			else if (action.href && navigate) navigate(action.href);
+		};
+		$[0] = navigate;
+		$[1] = t1;
+	} else t1 = $[1];
+	const handleActionClick = t1;
+	let t2;
+	if ($[2] !== actions || $[3] !== description || $[4] !== handleActionClick || $[5] !== resolveText || $[6] !== title) {
+		const primaryAction = actions?.find(_temp) || actions?.[0];
+		const secondaryActions = actions?.filter((a_0) => a_0 !== primaryAction) || [];
+		let t3;
+		if ($[8] !== title) {
+			t3 = title && /* @__PURE__ */ jsx("h1", {
+				className: "qa-dashboard__title text-2xl font-extrabold tracking-tight md:text-3xl",
+				children: title
+			});
+			$[8] = title;
+			$[9] = t3;
+		} else t3 = $[9];
+		let t4;
+		if ($[10] !== description) {
+			t4 = description && /* @__PURE__ */ jsx("p", {
+				className: "qa-dashboard__description text-muted-foreground mt-1",
+				children: description
+			});
+			$[10] = description;
+			$[11] = t4;
+		} else t4 = $[11];
+		let t5;
+		if ($[12] !== t3 || $[13] !== t4) {
+			t5 = /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [t3, t4]
+			});
+			$[12] = t3;
+			$[13] = t4;
+			$[14] = t5;
+		} else t5 = $[14];
+		t2 = /* @__PURE__ */ jsxs("div", {
+			className: "qa-dashboard__header mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+			children: [t5, actions && actions.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: [
+					primaryAction && /* @__PURE__ */ jsxs(Button, {
+						variant: primaryAction.variant === "primary" ? "default" : primaryAction.variant || "default",
+						onClick: () => handleActionClick(primaryAction),
+						children: [resolveIconElement(primaryAction.icon, { "data-icon": "inline-start" }), resolveText(primaryAction.label)]
+					}, primaryAction.id),
+					secondaryActions.map((action_0) => {
+						const iconElement = resolveIconElement(action_0.icon, { "data-icon": "inline-start" });
+						const variant = action_0.variant || "default";
+						return /* @__PURE__ */ jsxs(Button, {
+							variant: variant === "primary" ? "default" : variant,
+							onClick: () => handleActionClick(action_0),
+							className: "hidden md:inline-flex",
+							children: [iconElement, resolveText(action_0.label)]
+						}, action_0.id);
+					}),
+					secondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "icon",
+						className: "md:hidden",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:dots-three-vertical",
+							className: "size-4"
+						})
+					}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+						align: "end",
+						children: secondaryActions.map((action_1) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							onClick: () => handleActionClick(action_1),
+							children: [resolveIconElement(action_1.icon, { className: "size-4 mr-2" }), resolveText(action_1.label)]
+						}, action_1.id))
+					})] })
+				]
+			})]
+		});
+		$[2] = actions;
+		$[3] = description;
+		$[4] = handleActionClick;
+		$[5] = resolveText;
+		$[6] = title;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function _temp(a) {
+	return a.variant === "primary";
+}
+function LayoutItemRenderer(t0) {
+	const $ = c(26);
+	const { item, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
+	if (isWidgetConfig(item)) {
+		let t1;
+		let widgetConfig;
+		if ($[0] !== dashboardRealtime || $[1] !== item) {
+			const spanClass = getSpanClass(item.span);
+			widgetConfig = dashboardRealtime !== void 0 && item.realtime === void 0 ? {
+				...item,
+				realtime: dashboardRealtime
+			} : item;
+			t1 = cn(spanClass, item.className);
+			$[0] = dashboardRealtime;
+			$[1] = item;
+			$[2] = t1;
+			$[3] = widgetConfig;
+		} else {
+			t1 = $[2];
+			widgetConfig = $[3];
+		}
+		let t2;
+		if ($[4] !== basePath || $[5] !== navigate || $[6] !== widgetConfig || $[7] !== widgetRegistry) {
+			t2 = /* @__PURE__ */ jsx(DashboardWidget, {
+				config: widgetConfig,
+				basePath,
+				navigate,
+				widgetRegistry
+			});
+			$[4] = basePath;
+			$[5] = navigate;
+			$[6] = widgetConfig;
+			$[7] = widgetRegistry;
+			$[8] = t2;
+		} else t2 = $[8];
+		let t3;
+		if ($[9] !== t1 || $[10] !== t2) {
+			t3 = /* @__PURE__ */ jsx("div", {
+				className: t1,
+				children: t2
+			});
+			$[9] = t1;
+			$[10] = t2;
+			$[11] = t3;
+		} else t3 = $[11];
+		return t3;
+	}
+	if (isSectionConfig(item)) {
+		let t1;
+		if ($[12] !== basePath || $[13] !== dashboardRealtime || $[14] !== item || $[15] !== navigate || $[16] !== resolveText || $[17] !== widgetRegistry) {
+			t1 = /* @__PURE__ */ jsx(SectionRenderer, {
+				section: item,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime
+			});
+			$[12] = basePath;
+			$[13] = dashboardRealtime;
+			$[14] = item;
+			$[15] = navigate;
+			$[16] = resolveText;
+			$[17] = widgetRegistry;
+			$[18] = t1;
+		} else t1 = $[18];
+		return t1;
+	}
+	if (isTabsConfig(item)) {
+		let t1;
+		if ($[19] !== basePath || $[20] !== dashboardRealtime || $[21] !== item || $[22] !== navigate || $[23] !== resolveText || $[24] !== widgetRegistry) {
+			t1 = /* @__PURE__ */ jsx(TabsRenderer, {
+				tabs: item,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime
+			});
+			$[19] = basePath;
+			$[20] = dashboardRealtime;
+			$[21] = item;
+			$[22] = navigate;
+			$[23] = resolveText;
+			$[24] = widgetRegistry;
+			$[25] = t1;
+		} else t1 = $[25];
+		return t1;
+	}
+	return null;
+}
+function SectionRenderer(t0) {
+	const $ = c(71);
+	const { section, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
+	const { label, description, wrapper: t1, defaultCollapsed: t2, layout: t3, columns: t4, gap, items, className } = section;
+	const wrapper = t1 === void 0 ? "flat" : t1;
+	const defaultCollapsed = t2 === void 0 ? false : t2;
+	const layout = t3 === void 0 ? "grid" : t3;
+	const columns = t4 === void 0 ? 4 : t4;
+	let t5;
+	if ($[0] !== label || $[1] !== resolveText) {
+		t5 = label ? resolveText(label) : void 0;
+		$[0] = label;
+		$[1] = resolveText;
+		$[2] = t5;
+	} else t5 = $[2];
+	const sectionLabel = t5;
+	let t6;
+	if ($[3] !== description || $[4] !== resolveText) {
+		t6 = description ? resolveText(description) : void 0;
+		$[3] = description;
+		$[4] = resolveText;
+		$[5] = t6;
+	} else t6 = $[5];
+	const sectionDescription = t6;
+	const t7 = layout === "grid" && "grid items-start gap-4";
+	let t8;
+	if ($[6] !== columns || $[7] !== layout || $[8] !== t7) {
+		t8 = cn("@container", t7, layout === "grid" && getGridClass(columns), layout === "stack" && "flex flex-col gap-4");
+		$[6] = columns;
+		$[7] = layout;
+		$[8] = t7;
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] !== gap) {
+		t9 = gap ? { gap: `${gap * .25}rem` } : void 0;
+		$[10] = gap;
+		$[11] = t9;
+	} else t9 = $[11];
+	let t10;
+	if ($[12] !== basePath || $[13] !== columns || $[14] !== dashboardRealtime || $[15] !== items || $[16] !== navigate || $[17] !== resolveText || $[18] !== widgetRegistry) {
+		let t11$1;
+		if ($[20] !== basePath || $[21] !== columns || $[22] !== dashboardRealtime || $[23] !== navigate || $[24] !== resolveText || $[25] !== widgetRegistry) {
+			t11$1 = (item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+				item,
+				index,
+				columns,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime
+			}, getLayoutItemKey(item, index));
+			$[20] = basePath;
+			$[21] = columns;
+			$[22] = dashboardRealtime;
+			$[23] = navigate;
+			$[24] = resolveText;
+			$[25] = widgetRegistry;
+			$[26] = t11$1;
+		} else t11$1 = $[26];
+		t10 = items.map(t11$1);
+		$[12] = basePath;
+		$[13] = columns;
+		$[14] = dashboardRealtime;
+		$[15] = items;
+		$[16] = navigate;
+		$[17] = resolveText;
+		$[18] = widgetRegistry;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[27] !== t10 || $[28] !== t8 || $[29] !== t9) {
+		t11 = /* @__PURE__ */ jsx("div", {
+			className: t8,
+			style: t9,
+			children: t10
+		});
+		$[27] = t10;
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = t11;
+	} else t11 = $[30];
+	const itemsContent = t11;
+	if (wrapper === "flat") {
+		let t12;
+		if ($[31] !== className) {
+			t12 = cn("col-span-full", className);
+			$[31] = className;
+			$[32] = t12;
+		} else t12 = $[32];
+		let t13;
+		if ($[33] !== sectionDescription || $[34] !== sectionLabel) {
+			t13 = (sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs("div", {
+				className: "mb-4",
+				children: [sectionLabel && /* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold",
+					children: sectionLabel
+				}), sectionDescription && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mt-1 text-sm",
+					children: sectionDescription
+				})]
+			});
+			$[33] = sectionDescription;
+			$[34] = sectionLabel;
+			$[35] = t13;
+		} else t13 = $[35];
+		let t14;
+		if ($[36] !== itemsContent || $[37] !== t12 || $[38] !== t13) {
+			t14 = /* @__PURE__ */ jsxs("div", {
+				className: t12,
+				children: [t13, itemsContent]
+			});
+			$[36] = itemsContent;
+			$[37] = t12;
+			$[38] = t13;
+			$[39] = t14;
+		} else t14 = $[39];
+		return t14;
+	}
+	if (wrapper === "card") {
+		let t12;
+		if ($[40] !== className) {
+			t12 = cn("col-span-full", className);
+			$[40] = className;
+			$[41] = t12;
+		} else t12 = $[41];
+		let t13;
+		if ($[42] !== sectionDescription || $[43] !== sectionLabel) {
+			t13 = (sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs(CardHeader, { children: [sectionLabel && /* @__PURE__ */ jsx(CardTitle, { children: sectionLabel }), sectionDescription && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: sectionDescription
+			})] });
+			$[42] = sectionDescription;
+			$[43] = sectionLabel;
+			$[44] = t13;
+		} else t13 = $[44];
+		let t14;
+		if ($[45] !== itemsContent) {
+			t14 = /* @__PURE__ */ jsx(CardContent, { children: itemsContent });
+			$[45] = itemsContent;
+			$[46] = t14;
+		} else t14 = $[46];
+		let t15;
+		if ($[47] !== t12 || $[48] !== t13 || $[49] !== t14) {
+			t15 = /* @__PURE__ */ jsxs(Card, {
+				className: t12,
+				children: [t13, t14]
+			});
+			$[47] = t12;
+			$[48] = t13;
+			$[49] = t14;
+			$[50] = t15;
+		} else t15 = $[50];
+		return t15;
+	}
+	if (wrapper === "collapsible") {
+		let t12;
+		if ($[51] !== defaultCollapsed) {
+			t12 = defaultCollapsed ? [] : [0];
+			$[51] = defaultCollapsed;
+			$[52] = t12;
+		} else t12 = $[52];
+		let t13;
+		if ($[53] !== className) {
+			t13 = cn("col-span-full", className);
+			$[53] = className;
+			$[54] = t13;
+		} else t13 = $[54];
+		let t14;
+		if ($[55] !== sectionLabel) {
+			t14 = sectionLabel && /* @__PURE__ */ jsx("span", {
+				className: "text-lg font-semibold",
+				children: sectionLabel
+			});
+			$[55] = sectionLabel;
+			$[56] = t14;
+		} else t14 = $[56];
+		let t15;
+		if ($[57] !== sectionDescription) {
+			t15 = sectionDescription && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm font-normal",
+				children: sectionDescription
+			});
+			$[57] = sectionDescription;
+			$[58] = t15;
+		} else t15 = $[58];
+		let t16;
+		if ($[59] !== t14 || $[60] !== t15) {
+			t16 = /* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-2 hover:no-underline",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-left",
+					children: [t14, t15]
+				})
+			});
+			$[59] = t14;
+			$[60] = t15;
+			$[61] = t16;
+		} else t16 = $[61];
+		let t17;
+		if ($[62] !== itemsContent) {
+			t17 = /* @__PURE__ */ jsx(AccordionContent, {
+				className: "pt-4",
+				children: itemsContent
+			});
+			$[62] = itemsContent;
+			$[63] = t17;
+		} else t17 = $[63];
+		let t18;
+		if ($[64] !== t16 || $[65] !== t17) {
+			t18 = /* @__PURE__ */ jsxs(AccordionItem, {
+				className: "border-none",
+				children: [t16, t17]
+			});
+			$[64] = t16;
+			$[65] = t17;
+			$[66] = t18;
+		} else t18 = $[66];
+		let t19;
+		if ($[67] !== t12 || $[68] !== t13 || $[69] !== t18) {
+			t19 = /* @__PURE__ */ jsx(Accordion, {
+				defaultValue: t12,
+				className: t13,
+				children: t18
+			});
+			$[67] = t12;
+			$[68] = t13;
+			$[69] = t18;
+			$[70] = t19;
+		} else t19 = $[70];
+		return t19;
+	}
+	return itemsContent;
+}
+function TabsRenderer(t0) {
+	const $ = c(25);
+	const { tabs, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
+	const { tabs: tabConfigs, defaultTab, variant: t1 } = tabs;
+	const variant = t1 === void 0 ? "default" : t1;
+	const defaultValue = defaultTab || tabConfigs[0]?.id;
+	const t2 = variant === "line" ? "line" : "default";
+	let t3;
+	if ($[0] !== resolveText || $[1] !== tabConfigs) {
+		let t4$1;
+		if ($[3] !== resolveText) {
+			t4$1 = (tab) => /* @__PURE__ */ jsxs(TabsTrigger, {
+				value: tab.id,
+				children: [
+					resolveIconElement(tab.icon, { className: "h-4 w-4 mr-2" }),
+					resolveText(tab.label),
+					tab.badge !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "bg-muted ml-2 rounded-full px-2 py-0.5 text-xs",
+						children: tab.badge
+					})
+				]
+			}, tab.id);
+			$[3] = resolveText;
+			$[4] = t4$1;
+		} else t4$1 = $[4];
+		t3 = tabConfigs.map(t4$1);
+		$[0] = resolveText;
+		$[1] = tabConfigs;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[5] !== t2 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(TabsList, {
+			variant: t2,
+			className: "mb-4",
+			children: t3
+		});
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== basePath || $[9] !== dashboardRealtime || $[10] !== navigate || $[11] !== resolveText || $[12] !== tabConfigs || $[13] !== widgetRegistry) {
+		let t6$1;
+		if ($[15] !== basePath || $[16] !== dashboardRealtime || $[17] !== navigate || $[18] !== resolveText || $[19] !== widgetRegistry) {
+			t6$1 = (tab_0) => /* @__PURE__ */ jsx(TabsContent, {
+				value: tab_0.id,
+				children: /* @__PURE__ */ jsx(TabContentRenderer, {
+					tab: tab_0,
+					basePath,
+					navigate,
+					widgetRegistry,
+					resolveText,
+					dashboardRealtime
+				})
+			}, tab_0.id);
+			$[15] = basePath;
+			$[16] = dashboardRealtime;
+			$[17] = navigate;
+			$[18] = resolveText;
+			$[19] = widgetRegistry;
+			$[20] = t6$1;
+		} else t6$1 = $[20];
+		t5 = tabConfigs.map(t6$1);
+		$[8] = basePath;
+		$[9] = dashboardRealtime;
+		$[10] = navigate;
+		$[11] = resolveText;
+		$[12] = tabConfigs;
+		$[13] = widgetRegistry;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[21] !== defaultValue || $[22] !== t4 || $[23] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue,
+			className: "col-span-full",
+			children: [t4, t5]
+		});
+		$[21] = defaultValue;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
+	return t6;
+}
+function TabContentRenderer(t0) {
+	const $ = c(16);
+	const { tab, basePath, navigate, widgetRegistry, resolveText, dashboardRealtime } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = cn("@container grid items-start gap-4", getGridClass(4));
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== basePath || $[2] !== dashboardRealtime || $[3] !== navigate || $[4] !== resolveText || $[5] !== tab.items || $[6] !== widgetRegistry) {
+		let t3$1;
+		if ($[8] !== basePath || $[9] !== dashboardRealtime || $[10] !== navigate || $[11] !== resolveText || $[12] !== widgetRegistry) {
+			t3$1 = (item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+				item,
+				index,
+				columns: 4,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime
+			}, getLayoutItemKey(item, index));
+			$[8] = basePath;
+			$[9] = dashboardRealtime;
+			$[10] = navigate;
+			$[11] = resolveText;
+			$[12] = widgetRegistry;
+			$[13] = t3$1;
+		} else t3$1 = $[13];
+		t2 = tab.items.map(t3$1);
+		$[1] = basePath;
+		$[2] = dashboardRealtime;
+		$[3] = navigate;
+		$[4] = resolveText;
+		$[5] = tab.items;
+		$[6] = widgetRegistry;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t2
+		});
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+}
+/**
+* DashboardGrid - Renders a configurable grid of dashboard widgets
+*
+* @example
+* ```tsx
+* const dashboardConfig: DashboardConfig = {
+*   title: "Dashboard",
+*   description: "Welcome to your admin dashboard",
+*   columns: 4,
+*   items: [
+*     { type: "stats", collection: "posts", label: "Total Posts", span: 1 },
+*     { type: "stats", collection: "users", label: "Total Users", span: 1 },
+*     {
+*       type: "section",
+*       label: "Analytics",
+*       wrapper: "card",
+*       items: [
+*         { type: "chart", collection: "posts", field: "createdAt", span: 2 },
+*       ]
+*     },
+*     {
+*       type: "tabs",
+*       tabs: [
+*         { id: "recent", label: "Recent", items: [...] },
+*         { id: "popular", label: "Popular", items: [...] },
+*       ]
+*     }
+*   ],
+* };
+*
+* <DashboardGrid config={dashboardConfig} basePath="/admin" navigate={navigate} />
+* ```
+*/
+function DashboardGrid(t0) {
+	const $ = c(64);
+	const { config, basePath: t1, navigate, widgetRegistry, className } = t0;
+	const basePath = t1 === void 0 ? "/admin" : t1;
+	const resolveText = useResolveText();
+	const { t } = useTranslation();
+	const { title, description, columns: t2, realtime: dashboardRealtime } = config;
+	const columns = t2 === void 0 ? 4 : t2;
+	let t3;
+	if ($[0] !== config.items || $[1] !== config.widgets) {
+		t3 = config.items || config.widgets || [];
+		$[0] = config.items;
+		$[1] = config.widgets;
+		$[2] = t3;
+	} else t3 = $[2];
+	const layoutItems = t3;
+	let t4;
+	if ($[3] !== resolveText || $[4] !== title) {
+		t4 = title ? resolveText(title) : void 0;
+		$[3] = resolveText;
+		$[4] = title;
+		$[5] = t4;
+	} else t4 = $[5];
+	const resolvedTitle = t4;
+	let t5;
+	if ($[6] !== description || $[7] !== resolveText) {
+		t5 = description ? resolveText(description) : void 0;
+		$[6] = description;
+		$[7] = resolveText;
+		$[8] = t5;
+	} else t5 = $[8];
+	const resolvedDescription = t5;
+	if (layoutItems.length === 0) {
+		let t6$1;
+		if ($[9] !== className) {
+			t6$1 = cn("qa-dashboard @container", className);
+			$[9] = className;
+			$[10] = t6$1;
+		} else t6$1 = $[10];
+		let t7$1;
+		if ($[11] !== config.actions || $[12] !== navigate || $[13] !== resolveText || $[14] !== resolvedDescription || $[15] !== resolvedTitle) {
+			t7$1 = /* @__PURE__ */ jsx(DashboardHeader, {
+				title: resolvedTitle,
+				description: resolvedDescription,
+				actions: config.actions,
+				navigate,
+				resolveText
+			});
+			$[11] = config.actions;
+			$[12] = navigate;
+			$[13] = resolveText;
+			$[14] = resolvedDescription;
+			$[15] = resolvedTitle;
+			$[16] = t7$1;
+		} else t7$1 = $[16];
+		let t8$1;
+		if ($[17] !== t) {
+			t8$1 = t("dashboard.noWidgets");
+			$[17] = t;
+			$[18] = t8$1;
+		} else t8$1 = $[18];
+		let t9$1;
+		if ($[19] !== t8$1) {
+			t9$1 = /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground font-medium",
+				children: t8$1
+			});
+			$[19] = t8$1;
+			$[20] = t9$1;
+		} else t9$1 = $[20];
+		let t10$1;
+		if ($[21] !== t) {
+			t10$1 = t("dashboard.noWidgetsDescription");
+			$[21] = t;
+			$[22] = t10$1;
+		} else t10$1 = $[22];
+		let t11$1;
+		if ($[23] !== t10$1) {
+			t11$1 = /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground mt-1 text-sm",
+				children: t10$1
+			});
+			$[23] = t10$1;
+			$[24] = t11$1;
+		} else t11$1 = $[24];
+		let t12;
+		if ($[25] !== t11$1 || $[26] !== t9$1) {
+			t12 = /* @__PURE__ */ jsx("div", {
+				className: "border-border bg-card flex h-64 items-center justify-center rounded-lg border border-dashed",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-center",
+					children: [t9$1, t11$1]
+				})
+			});
+			$[25] = t11$1;
+			$[26] = t9$1;
+			$[27] = t12;
+		} else t12 = $[27];
+		let t13;
+		if ($[28] !== t12 || $[29] !== t6$1 || $[30] !== t7$1) {
+			t13 = /* @__PURE__ */ jsxs("div", {
+				className: t6$1,
+				children: [t7$1, t12]
+			});
+			$[28] = t12;
+			$[29] = t6$1;
+			$[30] = t7$1;
+			$[31] = t13;
+		} else t13 = $[31];
+		return t13;
+	}
+	let t6;
+	if ($[32] !== className) {
+		t6 = cn("qa-dashboard @container", className);
+		$[32] = className;
+		$[33] = t6;
+	} else t6 = $[33];
+	let t7;
+	if ($[34] !== config.actions || $[35] !== navigate || $[36] !== resolveText || $[37] !== resolvedDescription || $[38] !== resolvedTitle) {
+		t7 = /* @__PURE__ */ jsx(DashboardHeader, {
+			title: resolvedTitle,
+			description: resolvedDescription,
+			actions: config.actions,
+			navigate,
+			resolveText
+		});
+		$[34] = config.actions;
+		$[35] = navigate;
+		$[36] = resolveText;
+		$[37] = resolvedDescription;
+		$[38] = resolvedTitle;
+		$[39] = t7;
+	} else t7 = $[39];
+	let t8;
+	if ($[40] !== columns) {
+		t8 = cn("qa-dashboard__grid grid items-start gap-4", getGridClass(columns));
+		$[40] = columns;
+		$[41] = t8;
+	} else t8 = $[41];
+	let t9;
+	if ($[42] !== basePath || $[43] !== columns || $[44] !== dashboardRealtime || $[45] !== layoutItems || $[46] !== navigate || $[47] !== resolveText || $[48] !== widgetRegistry) {
+		let t10$1;
+		if ($[50] !== basePath || $[51] !== columns || $[52] !== dashboardRealtime || $[53] !== navigate || $[54] !== resolveText || $[55] !== widgetRegistry) {
+			t10$1 = (item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+				item,
+				index,
+				columns,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText,
+				dashboardRealtime
+			}, getLayoutItemKey(item, index));
+			$[50] = basePath;
+			$[51] = columns;
+			$[52] = dashboardRealtime;
+			$[53] = navigate;
+			$[54] = resolveText;
+			$[55] = widgetRegistry;
+			$[56] = t10$1;
+		} else t10$1 = $[56];
+		t9 = layoutItems.map(t10$1);
+		$[42] = basePath;
+		$[43] = columns;
+		$[44] = dashboardRealtime;
+		$[45] = layoutItems;
+		$[46] = navigate;
+		$[47] = resolveText;
+		$[48] = widgetRegistry;
+		$[49] = t9;
+	} else t9 = $[49];
+	let t10;
+	if ($[57] !== t8 || $[58] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: t8,
+			children: t9
+		});
+		$[57] = t8;
+		$[58] = t9;
+		$[59] = t10;
+	} else t10 = $[59];
+	let t11;
+	if ($[60] !== t10 || $[61] !== t6 || $[62] !== t7) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: t6,
+			children: [t7, t10]
+		});
+		$[60] = t10;
+		$[61] = t6;
+		$[62] = t7;
+		$[63] = t11;
+	} else t11 = $[63];
+	return t11;
+}
+
+//#endregion
+export { DashboardGrid };