@questpie/admin 3.0.3 → 3.0.5

package/dist/client/components/widgets/value-widget.mjs

@@ -1,9 +1,10 @@
-import { useResolveText } from "../../i18n/hooks.mjs";
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
 import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
 import { resolveIconElement } from "../component-renderer.mjs";
 import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
 import { useServerWidgetData } from "../../hooks/use-server-widget-data.mjs";
+import { WidgetEmptyState } from "./widget-empty-state.mjs";
 import { ValueWidgetSkeleton } from "./widget-skeletons.mjs";
 import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
@@ -44,10 +45,11 @@ function formatValue(value) {
 * ```
 */
 function ValueWidget(t0) {
-	const $ = c(89);
+	const $ = c(137);
 	const { config } = t0;
 	const client = useAdminStore(selectClient);
 	const resolveText = useResolveText();
+	const { t } = useTranslation();
 	const useServerData = !!config.hasLoader;
 	let t1;
 	if ($[0] !== config.refreshInterval || $[1] !== useServerData) {
@@ -95,7 +97,7 @@ function ValueWidget(t0) {
 	const clientQuery = useQuery(t5);
 	const { data, isLoading, error, refetch, isFetching } = useServerData ? serverQuery : clientQuery;
 	const isFeatured = config.cardVariant === "featured";
-	if (isLoading || error || !data) {
+	if (isLoading || error) {
 		let t6$1;
 		if ($[13] !== config.title || $[14] !== resolveText) {
 			t6$1 = config.title ? resolveText(config.title) : void 0;
@@ -104,45 +106,143 @@ function ValueWidget(t0) {
 			$[15] = t6$1;
 		} else t6$1 = $[15];
 		let t7$1;
-		if ($[16] !== isFeatured) {
-			t7$1 = /* @__PURE__ */ jsx(ValueWidgetSkeleton, { featured: isFeatured });
-			$[16] = isFeatured;
-			$[17] = t7$1;
-		} else t7$1 = $[17];
-		let t8$1;
-		if ($[18] !== data || $[19] !== error || $[20] !== isLoading) {
-			t8$1 = error instanceof Error ? error : !data && !isLoading ? /* @__PURE__ */ new Error("No data returned") : null;
-			$[18] = data;
-			$[19] = error;
-			$[20] = isLoading;
-			$[21] = t8$1;
-		} else t8$1 = $[21];
-		let t9$1;
-		if ($[22] !== refetch) {
-			t9$1 = () => refetch();
-			$[22] = refetch;
-			$[23] = t9$1;
-		} else t9$1 = $[23];
-		const t10$1 = data?.classNames?.root;
+		if ($[16] !== config.description || $[17] !== resolveText) {
+			t7$1 = config.description ? resolveText(config.description) : void 0;
+			$[16] = config.description;
+			$[17] = resolveText;
+			$[18] = t7$1;
+		} else t7$1 = $[18];
+		const t8$1 = config.icon;
+		const t9$1 = config.cardVariant;
+		let t10$1;
+		if ($[19] !== isFeatured) {
+			t10$1 = /* @__PURE__ */ jsx(ValueWidgetSkeleton, { featured: isFeatured });
+			$[19] = isFeatured;
+			$[20] = t10$1;
+		} else t10$1 = $[20];
 		let t11$1;
-		if ($[24] !== isLoading || $[25] !== t10$1 || $[26] !== t6$1 || $[27] !== t7$1 || $[28] !== t8$1 || $[29] !== t9$1) {
-			t11$1 = /* @__PURE__ */ jsx(WidgetCard, {
+		if ($[21] !== error) {
+			t11$1 = error instanceof Error ? error : error ? new Error(String(error)) : null;
+			$[21] = error;
+			$[22] = t11$1;
+		} else t11$1 = $[22];
+		let t12$1;
+		if ($[23] !== refetch) {
+			t12$1 = () => refetch();
+			$[23] = refetch;
+			$[24] = t12$1;
+		} else t12$1 = $[24];
+		const t13$1 = config.actions;
+		const t14$1 = data?.classNames?.root;
+		let t15$1;
+		if ($[25] !== config.className || $[26] !== t14$1) {
+			t15$1 = cn(config.className, t14$1);
+			$[25] = config.className;
+			$[26] = t14$1;
+			$[27] = t15$1;
+		} else t15$1 = $[27];
+		let t16$1;
+		if ($[28] !== config.actions || $[29] !== config.cardVariant || $[30] !== config.icon || $[31] !== isLoading || $[32] !== t10$1 || $[33] !== t11$1 || $[34] !== t12$1 || $[35] !== t15$1 || $[36] !== t6$1 || $[37] !== t7$1) {
+			t16$1 = /* @__PURE__ */ jsx(WidgetCard, {
 				title: t6$1,
+				description: t7$1,
+				icon: t8$1,
+				variant: t9$1,
 				isLoading,
-				loadingSkeleton: t7$1,
-				error: t8$1,
-				onRefresh: t9$1,
-				className: t10$1
+				loadingSkeleton: t10$1,
+				error: t11$1,
+				onRefresh: t12$1,
+				actions: t13$1,
+				className: t15$1
 			});
-			$[24] = isLoading;
-			$[25] = t10$1;
-			$[26] = t6$1;
-			$[27] = t7$1;
-			$[28] = t8$1;
-			$[29] = t9$1;
-			$[30] = t11$1;
-		} else t11$1 = $[30];
-		return t11$1;
+			$[28] = config.actions;
+			$[29] = config.cardVariant;
+			$[30] = config.icon;
+			$[31] = isLoading;
+			$[32] = t10$1;
+			$[33] = t11$1;
+			$[34] = t12$1;
+			$[35] = t15$1;
+			$[36] = t6$1;
+			$[37] = t7$1;
+			$[38] = t16$1;
+		} else t16$1 = $[38];
+		return t16$1;
+	}
+	if (!data) {
+		let t6$1;
+		if ($[39] !== config.title || $[40] !== resolveText) {
+			t6$1 = config.title ? resolveText(config.title) : void 0;
+			$[39] = config.title;
+			$[40] = resolveText;
+			$[41] = t6$1;
+		} else t6$1 = $[41];
+		let t7$1;
+		if ($[42] !== config.description || $[43] !== resolveText) {
+			t7$1 = config.description ? resolveText(config.description) : void 0;
+			$[42] = config.description;
+			$[43] = resolveText;
+			$[44] = t7$1;
+		} else t7$1 = $[44];
+		const t8$1 = config.icon;
+		const t9$1 = config.cardVariant;
+		const t10$1 = isFetching && !isLoading;
+		let t11$1;
+		if ($[45] !== refetch) {
+			t11$1 = () => refetch();
+			$[45] = refetch;
+			$[46] = t11$1;
+		} else t11$1 = $[46];
+		const t12$1 = config.actions;
+		const t13$1 = config.className;
+		let t14$1;
+		if ($[47] !== t) {
+			t14$1 = t("widget.value.emptyTitle");
+			$[47] = t;
+			$[48] = t14$1;
+		} else t14$1 = $[48];
+		let t15$1;
+		if ($[49] !== t) {
+			t15$1 = t("widget.value.emptyDescription");
+			$[49] = t;
+			$[50] = t15$1;
+		} else t15$1 = $[50];
+		let t16$1;
+		if ($[51] !== t14$1 || $[52] !== t15$1) {
+			t16$1 = /* @__PURE__ */ jsx(WidgetEmptyState, {
+				iconName: "ph:gauge",
+				title: t14$1,
+				description: t15$1
+			});
+			$[51] = t14$1;
+			$[52] = t15$1;
+			$[53] = t16$1;
+		} else t16$1 = $[53];
+		let t17$1;
+		if ($[54] !== config.actions || $[55] !== config.cardVariant || $[56] !== config.className || $[57] !== config.icon || $[58] !== t10$1 || $[59] !== t11$1 || $[60] !== t16$1 || $[61] !== t6$1 || $[62] !== t7$1) {
+			t17$1 = /* @__PURE__ */ jsx(WidgetCard, {
+				title: t6$1,
+				description: t7$1,
+				icon: t8$1,
+				variant: t9$1,
+				isRefreshing: t10$1,
+				onRefresh: t11$1,
+				actions: t12$1,
+				className: t13$1,
+				children: t16$1
+			});
+			$[54] = config.actions;
+			$[55] = config.cardVariant;
+			$[56] = config.className;
+			$[57] = config.icon;
+			$[58] = t10$1;
+			$[59] = t11$1;
+			$[60] = t16$1;
+			$[61] = t6$1;
+			$[62] = t7$1;
+			$[63] = t17$1;
+		} else t17$1 = $[63];
+		return t17$1;
 	}
 	let T0;
 	let cls;
@@ -152,160 +252,189 @@ function ValueWidget(t0) {
 	let t11;
 	let t12;
 	let t13;
+	let t14;
+	let t15;
+	let t16;
 	let t6;
 	let t7;
 	let t8;
 	let t9;
-	if ($[31] !== data.classNames || $[32] !== data.footer || $[33] !== data.formatted || $[34] !== data.icon || $[35] !== data.label || $[36] !== data.subtitle || $[37] !== data.trend || $[38] !== data.value || $[39] !== isFetching || $[40] !== isLoading || $[41] !== refetch || $[42] !== resolveText) {
+	if ($[64] !== config.actions || $[65] !== config.cardVariant || $[66] !== config.className || $[67] !== config.description || $[68] !== config.title || $[69] !== data.classNames || $[70] !== data.footer || $[71] !== data.formatted || $[72] !== data.icon || $[73] !== data.label || $[74] !== data.subtitle || $[75] !== data.trend || $[76] !== data.value || $[77] !== isFetching || $[78] !== isLoading || $[79] !== refetch || $[80] !== resolveText) {
 		cls = data.classNames ?? {};
 		const Icon = data.icon;
 		const TrendIcon = data.trend?.icon;
-		let t14$1;
-		if ($[55] !== data.label || $[56] !== resolveText) {
-			t14$1 = data.label ? resolveText(data.label) : void 0;
-			$[55] = data.label;
-			$[56] = resolveText;
-			$[57] = t14$1;
-		} else t14$1 = $[57];
-		const label = t14$1;
-		let t15$1;
-		if ($[58] !== data.subtitle || $[59] !== resolveText) {
-			t15$1 = data.subtitle ? resolveText(data.subtitle) : void 0;
-			$[58] = data.subtitle;
-			$[59] = resolveText;
-			$[60] = t15$1;
-		} else t15$1 = $[60];
-		subtitle = t15$1;
-		let t16$1;
-		if ($[61] !== data.footer || $[62] !== resolveText) {
-			t16$1 = data.footer ? resolveText(data.footer) : void 0;
-			$[61] = data.footer;
-			$[62] = resolveText;
-			$[63] = t16$1;
-		} else t16$1 = $[63];
-		footer = t16$1;
+		let t17$1;
+		if ($[96] !== config.title || $[97] !== data.label || $[98] !== resolveText) {
+			t17$1 = data.label ? resolveText(data.label) : config.title ? resolveText(config.title) : void 0;
+			$[96] = config.title;
+			$[97] = data.label;
+			$[98] = resolveText;
+			$[99] = t17$1;
+		} else t17$1 = $[99];
+		const label = t17$1;
+		let t18$1;
+		if ($[100] !== data.subtitle || $[101] !== resolveText) {
+			t18$1 = data.subtitle ? resolveText(data.subtitle) : void 0;
+			$[100] = data.subtitle;
+			$[101] = resolveText;
+			$[102] = t18$1;
+		} else t18$1 = $[102];
+		subtitle = t18$1;
+		let t19$1;
+		if ($[103] !== data.footer || $[104] !== resolveText) {
+			t19$1 = data.footer ? resolveText(data.footer) : void 0;
+			$[103] = data.footer;
+			$[104] = resolveText;
+			$[105] = t19$1;
+		} else t19$1 = $[105];
+		footer = t19$1;
 		T0 = WidgetCard;
 		t9 = label;
 		t10 = Icon;
-		if ($[64] !== refetch) {
-			t11 = () => refetch();
-			$[64] = refetch;
-			$[65] = t11;
-		} else t11 = $[65];
-		t12 = isFetching && !isLoading;
-		t13 = cls.root;
+		if ($[106] !== config.description || $[107] !== resolveText) {
+			t11 = config.description ? resolveText(config.description) : void 0;
+			$[106] = config.description;
+			$[107] = resolveText;
+			$[108] = t11;
+		} else t11 = $[108];
+		t12 = config.cardVariant;
+		if ($[109] !== refetch) {
+			t13 = () => refetch();
+			$[109] = refetch;
+			$[110] = t13;
+		} else t13 = $[110];
+		t14 = isFetching && !isLoading;
+		t15 = config.actions;
+		t16 = cn(config.className, cls.root);
 		t6 = cn("space-y-1", cls.content);
-		let t17$1;
-		if ($[66] !== data.formatted || $[67] !== data.value) {
-			t17$1 = data.formatted ?? formatValue(data.value);
-			$[66] = data.formatted;
-			$[67] = data.value;
-			$[68] = t17$1;
-		} else t17$1 = $[68];
+		let t20$1;
+		if ($[111] !== data.formatted || $[112] !== data.value) {
+			t20$1 = data.formatted ?? formatValue(data.value);
+			$[111] = data.formatted;
+			$[112] = data.value;
+			$[113] = t20$1;
+		} else t20$1 = $[113];
 		t7 = /* @__PURE__ */ jsx("div", {
 			className: cn("text-2xl font-bold", cls.value),
-			children: t17$1
+			children: t20$1
 		});
 		t8 = data.trend && /* @__PURE__ */ jsxs("div", {
 			className: cn("flex items-center gap-1 text-sm", cls.trend),
 			children: [resolveIconElement(TrendIcon, { className: cn("h-3 w-3", cls.trendIcon) }), /* @__PURE__ */ jsx("span", { children: data.trend.value })]
 		});
-		$[31] = data.classNames;
-		$[32] = data.footer;
-		$[33] = data.formatted;
-		$[34] = data.icon;
-		$[35] = data.label;
-		$[36] = data.subtitle;
-		$[37] = data.trend;
-		$[38] = data.value;
-		$[39] = isFetching;
-		$[40] = isLoading;
-		$[41] = refetch;
-		$[42] = resolveText;
-		$[43] = T0;
-		$[44] = cls;
-		$[45] = footer;
-		$[46] = subtitle;
-		$[47] = t10;
-		$[48] = t11;
-		$[49] = t12;
-		$[50] = t13;
-		$[51] = t6;
-		$[52] = t7;
-		$[53] = t8;
-		$[54] = t9;
+		$[64] = config.actions;
+		$[65] = config.cardVariant;
+		$[66] = config.className;
+		$[67] = config.description;
+		$[68] = config.title;
+		$[69] = data.classNames;
+		$[70] = data.footer;
+		$[71] = data.formatted;
+		$[72] = data.icon;
+		$[73] = data.label;
+		$[74] = data.subtitle;
+		$[75] = data.trend;
+		$[76] = data.value;
+		$[77] = isFetching;
+		$[78] = isLoading;
+		$[79] = refetch;
+		$[80] = resolveText;
+		$[81] = T0;
+		$[82] = cls;
+		$[83] = footer;
+		$[84] = subtitle;
+		$[85] = t10;
+		$[86] = t11;
+		$[87] = t12;
+		$[88] = t13;
+		$[89] = t14;
+		$[90] = t15;
+		$[91] = t16;
+		$[92] = t6;
+		$[93] = t7;
+		$[94] = t8;
+		$[95] = t9;
 	} else {
-		T0 = $[43];
-		cls = $[44];
-		footer = $[45];
-		subtitle = $[46];
-		t10 = $[47];
-		t11 = $[48];
-		t12 = $[49];
-		t13 = $[50];
-		t6 = $[51];
-		t7 = $[52];
-		t8 = $[53];
-		t9 = $[54];
+		T0 = $[81];
+		cls = $[82];
+		footer = $[83];
+		subtitle = $[84];
+		t10 = $[85];
+		t11 = $[86];
+		t12 = $[87];
+		t13 = $[88];
+		t14 = $[89];
+		t15 = $[90];
+		t16 = $[91];
+		t6 = $[92];
+		t7 = $[93];
+		t8 = $[94];
+		t9 = $[95];
 	}
-	let t14;
-	if ($[69] !== cls || $[70] !== subtitle) {
-		t14 = subtitle && /* @__PURE__ */ jsx("p", {
+	let t17;
+	if ($[114] !== cls || $[115] !== subtitle) {
+		t17 = subtitle && /* @__PURE__ */ jsx("p", {
 			className: cn("text-muted-foreground text-xs", cls.subtitle),
 			children: subtitle
 		});
-		$[69] = cls;
-		$[70] = subtitle;
-		$[71] = t14;
-	} else t14 = $[71];
-	let t15;
-	if ($[72] !== cls || $[73] !== footer) {
-		t15 = footer && /* @__PURE__ */ jsx("p", {
+		$[114] = cls;
+		$[115] = subtitle;
+		$[116] = t17;
+	} else t17 = $[116];
+	let t18;
+	if ($[117] !== cls || $[118] !== footer) {
+		t18 = footer && /* @__PURE__ */ jsx("p", {
 			className: cn("text-muted-foreground pt-2 text-xs", cls.footer),
 			children: footer
 		});
-		$[72] = cls;
-		$[73] = footer;
-		$[74] = t15;
-	} else t15 = $[74];
-	let t16;
-	if ($[75] !== t14 || $[76] !== t15 || $[77] !== t6 || $[78] !== t7 || $[79] !== t8) {
-		t16 = /* @__PURE__ */ jsxs("div", {
+		$[117] = cls;
+		$[118] = footer;
+		$[119] = t18;
+	} else t18 = $[119];
+	let t19;
+	if ($[120] !== t17 || $[121] !== t18 || $[122] !== t6 || $[123] !== t7 || $[124] !== t8) {
+		t19 = /* @__PURE__ */ jsxs("div", {
 			className: t6,
 			children: [
 				t7,
 				t8,
-				t14,
-				t15
+				t17,
+				t18
 			]
 		});
-		$[75] = t14;
-		$[76] = t15;
-		$[77] = t6;
-		$[78] = t7;
-		$[79] = t8;
-		$[80] = t16;
-	} else t16 = $[80];
-	let t17;
-	if ($[81] !== T0 || $[82] !== t10 || $[83] !== t11 || $[84] !== t12 || $[85] !== t13 || $[86] !== t16 || $[87] !== t9) {
-		t17 = /* @__PURE__ */ jsx(T0, {
+		$[120] = t17;
+		$[121] = t18;
+		$[122] = t6;
+		$[123] = t7;
+		$[124] = t8;
+		$[125] = t19;
+	} else t19 = $[125];
+	let t20;
+	if ($[126] !== T0 || $[127] !== t10 || $[128] !== t11 || $[129] !== t12 || $[130] !== t13 || $[131] !== t14 || $[132] !== t15 || $[133] !== t16 || $[134] !== t19 || $[135] !== t9) {
+		t20 = /* @__PURE__ */ jsx(T0, {
 			title: t9,
 			icon: t10,
-			onRefresh: t11,
-			isRefreshing: t12,
-			className: t13,
-			children: t16
+			description: t11,
+			variant: t12,
+			onRefresh: t13,
+			isRefreshing: t14,
+			actions: t15,
+			className: t16,
+			children: t19
 		});
-		$[81] = T0;
-		$[82] = t10;
-		$[83] = t11;
-		$[84] = t12;
-		$[85] = t13;
-		$[86] = t16;
-		$[87] = t9;
-		$[88] = t17;
-	} else t17 = $[88];
-	return t17;
+		$[126] = T0;
+		$[127] = t10;
+		$[128] = t11;
+		$[129] = t12;
+		$[130] = t13;
+		$[131] = t14;
+		$[132] = t15;
+		$[133] = t16;
+		$[134] = t19;
+		$[135] = t9;
+		$[136] = t20;
+	} else t20 = $[136];
+	return t20;
 }
 
 //#endregion

package/dist/client/components/widgets/widget-empty-state.mjs

@@ -0,0 +1,88 @@
+import { cn } from "../../lib/utils.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/widgets/widget-empty-state.tsx
+function WidgetEmptyState(t0) {
+	const $ = c(18);
+	const { title, description, iconName: t1, action, className } = t0;
+	const iconName = t1 === void 0 ? "ph:tray" : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = cn("qa-widget-empty-state flex min-h-28 flex-col items-center justify-center px-4 py-6 text-center", className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== iconName) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: "border-border-subtle bg-surface-low text-muted-foreground mb-3 flex size-9 items-center justify-center rounded-md border",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: iconName,
+				className: "size-4"
+			})
+		});
+		$[2] = iconName;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== title) {
+		t4 = /* @__PURE__ */ jsx("p", {
+			className: "text-foreground text-sm leading-5 font-medium text-balance",
+			children: title
+		});
+		$[4] = title;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== description) {
+		t5 = description && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground mt-1 max-w-60 text-xs/5 text-pretty",
+			children: description
+		});
+		$[6] = description;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== action) {
+		t6 = action && /* @__PURE__ */ jsx("div", {
+			className: "mt-4",
+			children: action
+		});
+		$[8] = action;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t3 || $[11] !== t4 || $[12] !== t5 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-64 flex-col items-center",
+			children: [
+				t3,
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t2 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			"data-slot": "widget-empty-state",
+			className: t2,
+			children: t7
+		});
+		$[15] = t2;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+
+//#endregion
+export { WidgetEmptyState };