@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,265 @@
+import { useTranslation } from "../../i18n/hooks.mjs";
+import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
+import { WidgetErrorBoundary } from "../../components/error-boundary.mjs";
+import { WidgetCard } from "./widget-card.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/views/dashboard/dashboard-widget.tsx
+/**
+* DashboardWidget Component
+*
+* Renders individual dashboard widgets based on their type configuration.
+* Resolves widgets from the registry (built-in + custom).
+*/
+function UnknownWidget(t0) {
+	const $ = c(10);
+	const { type } = t0;
+	const { t } = useTranslation();
+	let t1;
+	if ($[0] !== t) {
+		t1 = t("error.unknownWidget");
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t || $[3] !== type) {
+		t2 = t("error.widgetTypeNotRecognized", { type });
+		$[2] = t;
+		$[3] = type;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs",
+			children: t2
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t1 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(WidgetCard, {
+			title: t1,
+			className: "border-warning/20 bg-warning/5",
+			children: t3
+		});
+		$[7] = t1;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+function RegistryWidgetRenderer({ loader, widgetConfig, basePath, navigate }) {
+	"use no memo";
+	const { t } = useTranslation();
+	const [state, setState] = React.useState({
+		Component: null,
+		loading: true,
+		error: null
+	});
+	React.useEffect(() => {
+		if (!loader) {
+			setState({
+				Component: null,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		if (!(typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0)) {
+			setState({
+				Component: loader,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		let mounted = true;
+		(async () => {
+			try {
+				const result = await loader();
+				if (mounted) setState({
+					Component: result.default || result,
+					loading: false,
+					error: null
+				});
+			} catch (err) {
+				if (mounted) setState({
+					Component: null,
+					loading: false,
+					error: err instanceof Error ? err : new Error(t("error.failedToLoadComponent"))
+				});
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, [loader, t]);
+	if (state.loading) return /* @__PURE__ */ jsx(WidgetCard, { isLoading: true });
+	if (state.error) return /* @__PURE__ */ jsx(WidgetCard, { error: state.error });
+	if (!state.Component) return /* @__PURE__ */ jsx(WidgetCard, { error: new Error(t("error.componentNotFound")) });
+	const Component_0 = state.Component;
+	return /* @__PURE__ */ jsx(Component_0, {
+		config: widgetConfig,
+		basePath,
+		navigate,
+		span: widgetConfig.span
+	});
+}
+function CustomWidgetRenderer({ loader, widgetConfig, span }) {
+	"use no memo";
+	const { t } = useTranslation();
+	const [state, setState] = React.useState({
+		Component: null,
+		loading: true,
+		error: null
+	});
+	React.useEffect(() => {
+		if (!loader) {
+			setState({
+				Component: null,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		if (!(typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0)) {
+			setState({
+				Component: loader,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		let mounted = true;
+		(async () => {
+			try {
+				const result = await loader();
+				if (mounted) setState({
+					Component: result.default || result,
+					loading: false,
+					error: null
+				});
+			} catch (err) {
+				if (mounted) setState({
+					Component: null,
+					loading: false,
+					error: err instanceof Error ? err : new Error(t("error.failedToLoadComponent"))
+				});
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, [loader, t]);
+	if (state.loading) return /* @__PURE__ */ jsx(WidgetCard, { isLoading: true });
+	if (state.error) return /* @__PURE__ */ jsx(WidgetCard, { error: state.error });
+	if (!state.Component) return /* @__PURE__ */ jsx(WidgetCard, { error: new Error(t("error.componentNotFound")) });
+	const Component_0 = state.Component;
+	return /* @__PURE__ */ jsx(Component_0, {
+		config: widgetConfig,
+		span
+	});
+}
+/**
+* DashboardWidget - Renders a single widget based on its configuration.
+*
+* Resolves widgets from the admin store's widget registry (populated by
+* coreAdminModule and user extensions). Falls back to widgetRegistry prop
+* for overrides.
+*/
+function DashboardWidget(t0) {
+	const $ = c(22);
+	const { config, basePath: t1, navigate, widgetRegistry } = t0;
+	const basePath = t1 === void 0 ? "/admin" : t1;
+	const admin = useAdminStore(selectAdmin);
+	let t2;
+	if ($[0] !== admin) {
+		t2 = admin.getWidgets();
+		$[0] = admin;
+		$[1] = t2;
+	} else t2 = $[1];
+	const registeredWidgets = t2;
+	let widgetElement;
+	if (config.type === "custom") {
+		let t3$1;
+		if ($[2] !== config.config) {
+			t3$1 = config.config || {};
+			$[2] = config.config;
+			$[3] = t3$1;
+		} else t3$1 = $[3];
+		let t4;
+		if ($[4] !== config.component || $[5] !== config.span || $[6] !== t3$1) {
+			t4 = /* @__PURE__ */ jsx(CustomWidgetRenderer, {
+				loader: config.component,
+				widgetConfig: t3$1,
+				span: config.span
+			});
+			$[4] = config.component;
+			$[5] = config.span;
+			$[6] = t3$1;
+			$[7] = t4;
+		} else t4 = $[7];
+		widgetElement = t4;
+	} else if (widgetRegistry?.[config.type]) {
+		const CustomWidget = widgetRegistry[config.type];
+		const t3$1 = config;
+		let t4;
+		if ($[8] !== CustomWidget || $[9] !== config.span || $[10] !== t3$1) {
+			t4 = /* @__PURE__ */ jsx(CustomWidget, {
+				config: t3$1,
+				span: config.span
+			});
+			$[8] = CustomWidget;
+			$[9] = config.span;
+			$[10] = t3$1;
+			$[11] = t4;
+		} else t4 = $[11];
+		widgetElement = t4;
+	} else {
+		const widgetDef = registeredWidgets[config.type];
+		const component = widgetDef?.component ?? widgetDef?.state?.component;
+		if (component) {
+			let t3$1;
+			if ($[12] !== basePath || $[13] !== component || $[14] !== config || $[15] !== navigate) {
+				t3$1 = /* @__PURE__ */ jsx(RegistryWidgetRenderer, {
+					loader: component,
+					widgetConfig: config,
+					basePath,
+					navigate
+				});
+				$[12] = basePath;
+				$[13] = component;
+				$[14] = config;
+				$[15] = navigate;
+				$[16] = t3$1;
+			} else t3$1 = $[16];
+			widgetElement = t3$1;
+		} else {
+			let t3$1;
+			if ($[17] !== config.type) {
+				t3$1 = /* @__PURE__ */ jsx(UnknownWidget, { type: config.type });
+				$[17] = config.type;
+				$[18] = t3$1;
+			} else t3$1 = $[18];
+			widgetElement = t3$1;
+		}
+	}
+	let t3;
+	if ($[19] !== config.type || $[20] !== widgetElement) {
+		t3 = /* @__PURE__ */ jsx(WidgetErrorBoundary, {
+			widgetType: config.type,
+			children: widgetElement
+		});
+		$[19] = config.type;
+		$[20] = widgetElement;
+		$[21] = t3;
+	} else t3 = $[21];
+	return t3;
+}
+
+//#endregion
+export { DashboardWidget };

package/dist/client/views/dashboard/widget-card.mjs

@@ -0,0 +1,372 @@
+import { 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, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/ui/card.mjs";
+import { Skeleton } from "../../components/ui/skeleton.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/dashboard/widget-card.tsx
+/**
+* WidgetCard Component
+*
+* Standardized card wrapper for dashboard widgets with multiple variants.
+* Provides consistent styling, header actions, and loading/error states.
+*/
+const variantStyles = {
+	default: "",
+	compact: "py-3 gap-3",
+	featured: "border-primary/30 bg-gradient-to-br from-primary/5 to-transparent"
+};
+const variantContentStyles = {
+	default: "",
+	compact: "pt-0",
+	featured: ""
+};
+function WidgetCardLoading(t0) {
+	const $ = c(11);
+	const { variant: t1 } = t0;
+	const variant = t1 === void 0 ? "default" : t1;
+	const t2 = variantStyles[variant];
+	let t3;
+	if ($[0] !== t2) {
+		t3 = cn("flex flex-col", t2);
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) });
+		$[2] = t4;
+	} else t4 = $[2];
+	const t5 = variantContentStyles[variant];
+	let t6;
+	if ($[3] !== t5) {
+		t6 = cn("flex-1", t5);
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
+	let t7;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" });
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] !== t6) {
+		t8 = /* @__PURE__ */ jsx(CardContent, {
+			className: t6,
+			children: t7
+		});
+		$[6] = t6;
+		$[7] = t8;
+	} else t8 = $[7];
+	let t9;
+	if ($[8] !== t3 || $[9] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Card, {
+			className: t3,
+			children: [t4, t8]
+		});
+		$[8] = t3;
+		$[9] = t8;
+		$[10] = t9;
+	} else t9 = $[10];
+	return t9;
+}
+function WidgetCardError(t0) {
+	const $ = c(22);
+	const { error, variant: t1, onRetry } = t0;
+	const variant = t1 === void 0 ? "default" : t1;
+	const { t } = useTranslation();
+	const t2 = variantStyles[variant];
+	let t3;
+	if ($[0] !== t2) {
+		t3 = cn("border-destructive/20 bg-destructive/5 flex flex-col", t2);
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== t) {
+		t4 = t("toast.error");
+		$[2] = t;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== t4) {
+		t5 = /* @__PURE__ */ jsx(CardTitle, {
+			className: "text-destructive text-sm font-medium",
+			children: t4
+		});
+		$[4] = t4;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== onRetry) {
+		t6 = onRetry && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-xs",
+			onClick: onRetry,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:arrow-clockwise",
+				className: "h-3.5 w-3.5"
+			})
+		}) });
+		$[6] = onRetry;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== t5 || $[9] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(CardHeader, { children: [t5, t6] });
+		$[8] = t5;
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	const t8 = variantContentStyles[variant];
+	let t9;
+	if ($[11] !== t8) {
+		t9 = cn("flex-1", t8);
+		$[11] = t8;
+		$[12] = t9;
+	} else t9 = $[12];
+	let t10;
+	if ($[13] !== error.message) {
+		t10 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs",
+			children: error.message
+		});
+		$[13] = error.message;
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] !== t10 || $[16] !== t9) {
+		t11 = /* @__PURE__ */ jsx(CardContent, {
+			className: t9,
+			children: t10
+		});
+		$[15] = t10;
+		$[16] = t9;
+		$[17] = t11;
+	} else t11 = $[17];
+	let t12;
+	if ($[18] !== t11 || $[19] !== t3 || $[20] !== t7) {
+		t12 = /* @__PURE__ */ jsxs(Card, {
+			className: t3,
+			children: [t7, t11]
+		});
+		$[18] = t11;
+		$[19] = t3;
+		$[20] = t7;
+		$[21] = t12;
+	} else t12 = $[21];
+	return t12;
+}
+/**
+* WidgetCard - Standardized card wrapper for dashboard widgets
+*
+* @example
+* ```tsx
+* <WidgetCard
+*   title="Revenue"
+*   description="Monthly sales total"
+*   variant="featured"
+*   onRefresh={() => refetch()}
+* >
+*   <div className="text-2xl font-bold">$12,345</div>
+* </WidgetCard>
+* ```
+*/
+function WidgetCard(t0) {
+	const $ = c(41);
+	const { title, description, icon, variant: t1, isLoading, isRefreshing, error, onRefresh, onExpand, actions, className, loadingSkeleton, children } = t0;
+	const variant = t1 === void 0 ? "default" : t1;
+	const { t } = useTranslation();
+	if (isLoading) {
+		if (loadingSkeleton) {
+			const t2$2 = variantStyles[variant];
+			let t3$1;
+			if ($[0] !== className || $[1] !== t2$2) {
+				t3$1 = cn("flex flex-col", t2$2, className);
+				$[0] = className;
+				$[1] = t2$2;
+				$[2] = t3$1;
+			} else t3$1 = $[2];
+			let t4$1;
+			if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+				t4$1 = /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) });
+				$[3] = t4$1;
+			} else t4$1 = $[3];
+			const t5$1 = variantContentStyles[variant];
+			let t6$1;
+			if ($[4] !== t5$1) {
+				t6$1 = cn("flex-1", t5$1);
+				$[4] = t5$1;
+				$[5] = t6$1;
+			} else t6$1 = $[5];
+			let t7$1;
+			if ($[6] !== loadingSkeleton || $[7] !== t6$1) {
+				t7$1 = /* @__PURE__ */ jsx(CardContent, {
+					className: t6$1,
+					children: loadingSkeleton
+				});
+				$[6] = loadingSkeleton;
+				$[7] = t6$1;
+				$[8] = t7$1;
+			} else t7$1 = $[8];
+			let t8$1;
+			if ($[9] !== t3$1 || $[10] !== t7$1) {
+				t8$1 = /* @__PURE__ */ jsxs(Card, {
+					className: t3$1,
+					children: [t4$1, t7$1]
+				});
+				$[9] = t3$1;
+				$[10] = t7$1;
+				$[11] = t8$1;
+			} else t8$1 = $[11];
+			return t8$1;
+		}
+		let t2$1;
+		if ($[12] !== variant) {
+			t2$1 = /* @__PURE__ */ jsx(WidgetCardLoading, { variant });
+			$[12] = variant;
+			$[13] = t2$1;
+		} else t2$1 = $[13];
+		return t2$1;
+	}
+	if (error) {
+		let t2$1;
+		if ($[14] !== error || $[15] !== onRefresh || $[16] !== variant) {
+			t2$1 = /* @__PURE__ */ jsx(WidgetCardError, {
+				error,
+				variant,
+				onRetry: onRefresh
+			});
+			$[14] = error;
+			$[15] = onRefresh;
+			$[16] = variant;
+			$[17] = t2$1;
+		} else t2$1 = $[17];
+		return t2$1;
+	}
+	const hasHeader = title || description || icon || onRefresh || onExpand || actions?.length;
+	const t2 = variantStyles[variant];
+	let t3;
+	if ($[18] !== className || $[19] !== t2) {
+		t3 = cn("qa-widget-card flex flex-col", t2, className);
+		$[18] = className;
+		$[19] = t2;
+		$[20] = t3;
+	} else t3 = $[20];
+	let t4;
+	if ($[21] !== actions || $[22] !== description || $[23] !== hasHeader || $[24] !== icon || $[25] !== isRefreshing || $[26] !== onExpand || $[27] !== onRefresh || $[28] !== t || $[29] !== title) {
+		t4 = hasHeader && /* @__PURE__ */ jsxs(CardHeader, {
+			className: "qa-widget-card__header",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [resolveIconElement(icon, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [title && /* @__PURE__ */ jsx(CardTitle, {
+						className: "truncate text-sm font-medium",
+						children: title
+					}), description && /* @__PURE__ */ jsx(CardDescription, {
+						className: "truncate",
+						children: description
+					})]
+				})]
+			}), (onRefresh || onExpand || actions?.length) && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					actions && actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-xs",
+						onClick: actions[0].onClick,
+						title: actions[0].label,
+						children: resolveIconElement(actions[0].icon, { className: "h-3.5 w-3.5" })
+					}, actions[0].id), actions.length > 1 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-xs",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:dots-three-vertical",
+							className: "h-3.5 w-3.5"
+						})
+					}) }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+						align: "end",
+						children: actions.slice(1).map(_temp)
+					})] })] }),
+					onRefresh && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-xs",
+						onClick: onRefresh,
+						title: t("common.refresh"),
+						disabled: isRefreshing,
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:arrow-clockwise",
+							className: cn("h-3.5 w-3.5", isRefreshing && "animate-spin")
+						})
+					}),
+					onExpand && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-xs",
+						onClick: onExpand,
+						title: t("ui.expand"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:arrows-out-simple",
+							className: "h-3.5 w-3.5"
+						})
+					})
+				]
+			}) })]
+		});
+		$[21] = actions;
+		$[22] = description;
+		$[23] = hasHeader;
+		$[24] = icon;
+		$[25] = isRefreshing;
+		$[26] = onExpand;
+		$[27] = onRefresh;
+		$[28] = t;
+		$[29] = title;
+		$[30] = t4;
+	} else t4 = $[30];
+	const t5 = variantContentStyles[variant];
+	const t6 = !hasHeader && "pt-0";
+	let t7;
+	if ($[31] !== t5 || $[32] !== t6) {
+		t7 = cn("qa-widget-card__content flex-1", t5, t6);
+		$[31] = t5;
+		$[32] = t6;
+		$[33] = t7;
+	} else t7 = $[33];
+	let t8;
+	if ($[34] !== children || $[35] !== t7) {
+		t8 = /* @__PURE__ */ jsx(CardContent, {
+			className: t7,
+			children
+		});
+		$[34] = children;
+		$[35] = t7;
+		$[36] = t8;
+	} else t8 = $[36];
+	let t9;
+	if ($[37] !== t3 || $[38] !== t4 || $[39] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Card, {
+			className: t3,
+			children: [t4, t8]
+		});
+		$[37] = t3;
+		$[38] = t4;
+		$[39] = t8;
+		$[40] = t9;
+	} else t9 = $[40];
+	return t9;
+}
+function _temp(action) {
+	return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		onClick: action.onClick,
+		children: [resolveIconElement(action.icon, { className: "h-3.5 w-3.5 mr-2" }), action.label]
+	}, action.id);
+}
+
+//#endregion
+export { WidgetCard };