@questpie/admin 3.0.3 → 3.0.4

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

@@ -3,6 +3,7 @@ import { cn } from "../../lib/utils.mjs";
 import { selectClient, useAdminStore } from "../../runtime/provider.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 { ProgressWidgetSkeleton } from "./widget-skeletons.mjs";
 import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
@@ -38,7 +39,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * ```
 */
 function ProgressWidget(t0) {
-	const $ = c(38);
+	const $ = c(47);
 	const { config } = t0;
 	const client = useAdminStore(selectClient);
 	const resolveText = useResolveText();
@@ -89,7 +90,7 @@ function ProgressWidget(t0) {
 		$[12] = t6;
 	} else t6 = $[12];
 	const clientQuery = useQuery(t6);
-	const { data, isLoading, error, refetch } = useServerData ? serverQuery : clientQuery;
+	const { data, isLoading, error, refetch, isFetching } = useServerData ? serverQuery : clientQuery;
 	let t7;
 	if ($[13] !== config.title || $[14] !== resolveText) {
 		t7 = config.title ? resolveText(config.title) : void 0;
@@ -130,7 +131,7 @@ function ProgressWidget(t0) {
 					children: /* @__PURE__ */ jsx("div", {
 						className: "bg-muted h-2 w-full overflow-hidden rounded-full",
 						children: /* @__PURE__ */ jsx("div", {
-							className: cn("h-full rounded-full transition-all duration-500", getProgressColor()),
+							className: cn("h-full rounded-full transition-[width] duration-500", getProgressColor()),
 							style: { width: `${percentage}%` }
 						})
 					})
@@ -138,10 +139,10 @@ function ProgressWidget(t0) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between text-sm",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground",
+						className: "text-muted-foreground tabular-nums",
 						children: data.label || `${data.current.toLocaleString()} / ${data.target.toLocaleString()}`
 					}), showPercentage && /* @__PURE__ */ jsxs("span", {
-						className: "font-medium",
+						className: "font-medium tabular-nums",
 						children: [percentageFormatted, "%"]
 					})]
 				}),
@@ -150,7 +151,11 @@ function ProgressWidget(t0) {
 					children: data.subtitle
 				})
 			]
-		}) : null;
+		}) : /* @__PURE__ */ jsx(WidgetEmptyState, {
+			iconName: "ph:target",
+			title: "No progress data",
+			description: "There is no target value to display."
+		});
 		$[21] = data;
 		$[22] = getProgressColor;
 		$[23] = percentage;
@@ -160,40 +165,60 @@ function ProgressWidget(t0) {
 	} else t10 = $[26];
 	const progressContent = t10;
 	let t11;
-	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsx(ProgressWidgetSkeleton, {});
-		$[27] = t11;
-	} else t11 = $[27];
-	let t12;
-	if ($[28] !== error) {
-		t12 = error instanceof Error ? error : error ? new Error(String(error)) : null;
-		$[28] = error;
-		$[29] = t12;
-	} else t12 = $[29];
+	if ($[27] !== config.description || $[28] !== resolveText) {
+		t11 = config.description ? resolveText(config.description) : void 0;
+		$[27] = config.description;
+		$[28] = resolveText;
+		$[29] = t11;
+	} else t11 = $[29];
+	const t12 = isFetching && !isLoading;
 	let t13;
-	if ($[30] !== refetch) {
-		t13 = () => refetch();
-		$[30] = refetch;
-		$[31] = t13;
-	} else t13 = $[31];
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(ProgressWidgetSkeleton, {});
+		$[30] = t13;
+	} else t13 = $[30];
 	let t14;
-	if ($[32] !== isLoading || $[33] !== progressContent || $[34] !== t12 || $[35] !== t13 || $[36] !== title) {
-		t14 = /* @__PURE__ */ jsx(WidgetCard, {
+	if ($[31] !== error) {
+		t14 = error instanceof Error ? error : error ? new Error(String(error)) : null;
+		$[31] = error;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] !== refetch) {
+		t15 = () => refetch();
+		$[33] = refetch;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== config.actions || $[36] !== config.cardVariant || $[37] !== config.className || $[38] !== config.icon || $[39] !== isLoading || $[40] !== progressContent || $[41] !== t11 || $[42] !== t12 || $[43] !== t14 || $[44] !== t15 || $[45] !== title) {
+		t16 = /* @__PURE__ */ jsx(WidgetCard, {
 			title,
+			description: t11,
+			icon: config.icon,
+			variant: config.cardVariant,
 			isLoading,
-			loadingSkeleton: t11,
-			error: t12,
-			onRefresh: t13,
+			isRefreshing: t12,
+			loadingSkeleton: t13,
+			error: t14,
+			onRefresh: t15,
+			actions: config.actions,
+			className: config.className,
 			children: progressContent
 		});
-		$[32] = isLoading;
-		$[33] = progressContent;
-		$[34] = t12;
-		$[35] = t13;
-		$[36] = title;
-		$[37] = t14;
-	} else t14 = $[37];
-	return t14;
+		$[35] = config.actions;
+		$[36] = config.cardVariant;
+		$[37] = config.className;
+		$[38] = config.icon;
+		$[39] = isLoading;
+		$[40] = progressContent;
+		$[41] = t11;
+		$[42] = t12;
+		$[43] = t14;
+		$[44] = t15;
+		$[45] = title;
+		$[46] = t16;
+	} else t16 = $[46];
+	return t16;
 }
 
 //#endregion

package/dist/client/components/widgets/quick-actions-widget.mjs

@@ -2,6 +2,7 @@ import { useResolveText } from "../../i18n/hooks.mjs";
 import { cn, formatLabel } from "../../lib/utils.mjs";
 import { resolveIconElement } from "../component-renderer.mjs";
 import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
+import { WidgetEmptyState } from "./widget-empty-state.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -20,189 +21,259 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * of other dashboard widgets like recent-items.
 */
 function QuickActionsWidget(t0) {
-	const $ = c(29);
+	const $ = c(56);
 	const { config, basePath: t1, navigate } = t0;
 	const basePath = t1 === void 0 ? "/admin" : t1;
 	const resolveText = useResolveText();
-	const { quickActions, layout: t2 } = config;
+	const { layout: t2 } = config;
 	const layout = t2 === void 0 ? "list" : t2;
-	let t3;
-	if ($[0] !== config.title || $[1] !== resolveText) {
-		t3 = config.title ? resolveText(config.title) : "Quick Actions";
-		$[0] = config.title;
-		$[1] = resolveText;
-		$[2] = t3;
-	} else t3 = $[2];
-	const title = t3;
 	let T0;
+	let t3;
 	let t4;
 	let t5;
 	let t6;
 	let t7;
-	if ($[3] !== basePath || $[4] !== layout || $[5] !== navigate || $[6] !== quickActions || $[7] !== resolveText || $[8] !== title) {
-		t7 = Symbol.for("react.early_return_sentinel");
+	let t8;
+	let t9;
+	if ($[0] !== basePath || $[1] !== config.actions || $[2] !== config.cardVariant || $[3] !== config.className || $[4] !== config.description || $[5] !== config.label || $[6] !== config.quickActions || $[7] !== config.title || $[8] !== layout || $[9] !== navigate || $[10] !== resolveText) {
+		t9 = Symbol.for("react.early_return_sentinel");
 		bb0: {
-			let t8$1;
-			if ($[14] !== basePath || $[15] !== resolveText) {
-				t8$1 = (action, index) => {
-					if (typeof action === "string") {
-						const [collection, actionType] = action.split(".");
+			const quickActions = config.quickActions ?? config.actions ?? [];
+			let t10$1;
+			if ($[19] !== config.label || $[20] !== config.title || $[21] !== resolveText) {
+				t10$1 = config.title ? resolveText(config.title) : config.label ? resolveText(config.label) : "Quick Actions";
+				$[19] = config.label;
+				$[20] = config.title;
+				$[21] = resolveText;
+				$[22] = t10$1;
+			} else t10$1 = $[22];
+			const title = t10$1;
+			let t11$1;
+			if ($[23] !== basePath) {
+				t11$1 = (action, fallback) => {
+					if (!action) return fallback;
+					if (action.type === "create") return `${basePath}/collections/${action.collection}/create`;
+					if (action.type === "page") return `${basePath}/${action.pageId}`;
+					return action.href;
+				};
+				$[23] = basePath;
+				$[24] = t11$1;
+			} else t11$1 = $[24];
+			const resolveActionHref = t11$1;
+			let t12;
+			if ($[25] !== basePath || $[26] !== resolveActionHref || $[27] !== resolveText) {
+				t12 = (action_0, index) => {
+					if (typeof action_0 === "string") {
+						const [collection, actionType] = action_0.split(".");
 						return {
-							id: `${action}-${index}`,
+							id: `${action_0}-${index}`,
 							label: `${actionType === "create" ? "New" : actionType} ${formatLabel(collection)}`,
 							href: `${basePath}/collections/${collection}/${actionType === "create" ? "create" : ""}`,
 							icon: void 0,
 							variant: "default"
 						};
 					}
+					const serverAction = "action" in action_0 ? action_0.action : void 0;
 					return {
 						id: `action-${index}`,
-						label: resolveText(action.label),
-						href: action.href,
-						onClick: action.onClick,
-						icon: action.icon,
-						variant: action.variant || "default"
+						label: resolveText(action_0.label),
+						href: resolveActionHref(serverAction, action_0.href),
+						external: serverAction?.type === "link" ? serverAction.external : false,
+						onClick: action_0.onClick,
+						icon: action_0.icon,
+						variant: action_0.variant || "default"
 					};
 				};
-				$[14] = basePath;
-				$[15] = resolveText;
-				$[16] = t8$1;
-			} else t8$1 = $[16];
-			const parsedActions = quickActions.map(t8$1);
-			let t9$1;
-			if ($[17] !== navigate) {
-				t9$1 = (action_0) => {
-					if (action_0.onClick) action_0.onClick();
-					else if (action_0.href && navigate) navigate(action_0.href);
+				$[25] = basePath;
+				$[26] = resolveActionHref;
+				$[27] = resolveText;
+				$[28] = t12;
+			} else t12 = $[28];
+			const parsedActions = quickActions.map(t12);
+			let t13;
+			if ($[29] !== navigate) {
+				t13 = (action_1) => {
+					if (action_1.onClick) action_1.onClick();
+					else if (action_1.href && action_1.external) window.open(action_1.href, "_blank", "noopener,noreferrer");
+					else if (action_1.href && navigate) navigate(action_1.href);
 				};
-				$[17] = navigate;
-				$[18] = t9$1;
-			} else t9$1 = $[18];
-			const handleClick = t9$1;
+				$[29] = navigate;
+				$[30] = t13;
+			} else t13 = $[30];
+			const handleClick = t13;
 			const variantStyles = {
-				default: "hover:bg-muted cursor-pointer",
-				primary: "bg-primary/5 hover:bg-primary/10 border-primary/20 text-primary [&_svg]:text-primary cursor-pointer",
-				secondary: "hover:bg-secondary cursor-pointer",
-				outline: "border border-border hover:bg-muted cursor-pointer"
+				default: "border-border-subtle bg-surface-low/60 hover:border-border hover:bg-surface-high cursor-pointer",
+				primary: "border-primary/30 bg-primary/10 text-foreground hover:border-primary/45 hover:bg-primary/15 [&_svg]:text-primary cursor-pointer",
+				secondary: "border-border-subtle bg-secondary/60 hover:bg-secondary cursor-pointer",
+				outline: "border-border bg-background hover:bg-muted cursor-pointer"
 			};
 			const iconVariantStyles = {
 				default: "bg-muted text-muted-foreground",
-				primary: "bg-primary/10 text-primary",
+				primary: "bg-primary/15 text-primary",
 				secondary: "bg-secondary text-secondary-foreground",
 				outline: "bg-background text-muted-foreground"
 			};
 			if (parsedActions.length === 0) {
-				let t10;
-				if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-					t10 = /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground text-sm",
-						children: "No actions configured"
+				let t14;
+				if ($[31] !== config.description || $[32] !== resolveText) {
+					t14 = config.description ? resolveText(config.description) : void 0;
+					$[31] = config.description;
+					$[32] = resolveText;
+					$[33] = t14;
+				} else t14 = $[33];
+				let t15;
+				if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+					t15 = /* @__PURE__ */ jsx(WidgetEmptyState, {
+						iconName: "ph:lightning",
+						title: "No actions configured",
+						description: "There are no shortcuts to display."
 					});
-					$[19] = t10;
-				} else t10 = $[19];
-				let t11;
-				if ($[20] !== title) {
-					t11 = /* @__PURE__ */ jsx(WidgetCard, {
+					$[34] = t15;
+				} else t15 = $[34];
+				let t16;
+				if ($[35] !== config.cardVariant || $[36] !== config.className || $[37] !== t14 || $[38] !== title) {
+					t16 = /* @__PURE__ */ jsx(WidgetCard, {
 						title,
-						children: t10
+						description: t14,
+						variant: config.cardVariant,
+						className: config.className,
+						children: t15
 					});
-					$[20] = title;
-					$[21] = t11;
-				} else t11 = $[21];
-				t7 = t11;
+					$[35] = config.cardVariant;
+					$[36] = config.className;
+					$[37] = t14;
+					$[38] = title;
+					$[39] = t16;
+				} else t16 = $[39];
+				t9 = t16;
 				break bb0;
 			}
 			if (layout === "grid") {
-				t7 = /* @__PURE__ */ jsx(WidgetCard, {
+				let t14;
+				if ($[40] !== config.description || $[41] !== resolveText) {
+					t14 = config.description ? resolveText(config.description) : void 0;
+					$[40] = config.description;
+					$[41] = resolveText;
+					$[42] = t14;
+				} else t14 = $[42];
+				t9 = /* @__PURE__ */ jsx(WidgetCard, {
 					title,
+					description: t14,
+					variant: config.cardVariant,
+					className: config.className,
 					children: /* @__PURE__ */ jsx("div", {
-						className: "grid grid-cols-2 gap-2",
-						children: parsedActions.map((action_1) => {
-							const iconElement = resolveIconElement(action_1.icon, { className: "h-4 w-4" });
+						className: "grid h-full grid-cols-2 gap-3",
+						children: parsedActions.map((action_2) => {
+							const iconElement = resolveIconElement(action_2.icon, { className: "h-4 w-4" });
 							return /* @__PURE__ */ jsxs("button", {
 								type: "button",
-								onClick: () => handleClick(action_1),
-								className: cn("flex flex-col items-center justify-center gap-2 p-3 text-center transition-colors", variantStyles[action_1.variant]),
+								onClick: () => handleClick(action_2),
+								className: cn("flex min-h-24 flex-col items-center justify-center gap-2 rounded-md border p-3 text-center", "transition-[background-color,border-color,transform] active:scale-[0.96]", variantStyles[action_2.variant]),
 								children: [iconElement && /* @__PURE__ */ jsx("div", {
-									className: cn("flex h-9 w-9 items-center justify-center", iconVariantStyles[action_1.variant]),
+									className: cn("flex h-9 w-9 items-center justify-center rounded-md", iconVariantStyles[action_2.variant]),
 									children: iconElement
 								}), /* @__PURE__ */ jsx("span", {
-									className: "text-xs font-medium",
-									children: action_1.label
+									className: "text-xs leading-tight font-medium text-balance",
+									children: action_2.label
 								})]
-							}, action_1.id);
+							}, action_2.id);
 						})
 					})
 				});
 				break bb0;
 			}
 			T0 = WidgetCard;
-			t6 = title;
-			t4 = "-mx-1 space-y-1";
-			t5 = parsedActions.map((action_2) => {
-				const iconElement_0 = resolveIconElement(action_2.icon, { className: "h-4 w-4" });
+			t5 = title;
+			if ($[43] !== config.description || $[44] !== resolveText) {
+				t6 = config.description ? resolveText(config.description) : void 0;
+				$[43] = config.description;
+				$[44] = resolveText;
+				$[45] = t6;
+			} else t6 = $[45];
+			t7 = config.cardVariant;
+			t8 = config.className;
+			t3 = "-mx-1 space-y-1";
+			t4 = parsedActions.map((action_3) => {
+				const iconElement_0 = resolveIconElement(action_3.icon, { className: "h-4 w-4" });
 				return /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					onClick: () => handleClick(action_2),
-					className: cn("flex w-full items-center gap-3 px-2 py-2 text-left transition-colors", variantStyles[action_2.variant]),
+					onClick: () => handleClick(action_3),
+					className: cn("group flex min-h-10 w-full items-center gap-3 rounded-md px-2 py-2 text-left transition-[background-color,transform] active:scale-[0.96]", variantStyles[action_3.variant]),
 					children: [
 						iconElement_0 && /* @__PURE__ */ jsx("div", {
-							className: cn("flex h-8 w-8 shrink-0 items-center justify-center", iconVariantStyles[action_2.variant]),
+							className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-md", iconVariantStyles[action_3.variant]),
 							children: iconElement_0
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "flex-1 truncate text-sm font-medium",
-							children: action_2.label
+							children: action_3.label
 						}),
 						/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:arrow-right",
 							className: "text-muted-foreground h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
 						})
 					]
-				}, action_2.id);
+				}, action_3.id);
 			});
 		}
-		$[3] = basePath;
-		$[4] = layout;
-		$[5] = navigate;
-		$[6] = quickActions;
-		$[7] = resolveText;
-		$[8] = title;
-		$[9] = T0;
-		$[10] = t4;
-		$[11] = t5;
-		$[12] = t6;
-		$[13] = t7;
+		$[0] = basePath;
+		$[1] = config.actions;
+		$[2] = config.cardVariant;
+		$[3] = config.className;
+		$[4] = config.description;
+		$[5] = config.label;
+		$[6] = config.quickActions;
+		$[7] = config.title;
+		$[8] = layout;
+		$[9] = navigate;
+		$[10] = resolveText;
+		$[11] = T0;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
 	} else {
-		T0 = $[9];
-		t4 = $[10];
-		t5 = $[11];
-		t6 = $[12];
-		t7 = $[13];
+		T0 = $[11];
+		t3 = $[12];
+		t4 = $[13];
+		t5 = $[14];
+		t6 = $[15];
+		t7 = $[16];
+		t8 = $[17];
+		t9 = $[18];
 	}
-	if (t7 !== Symbol.for("react.early_return_sentinel")) return t7;
-	let t8;
-	if ($[22] !== t4 || $[23] !== t5) {
-		t8 = /* @__PURE__ */ jsx("div", {
-			className: t4,
-			children: t5
+	if (t9 !== Symbol.for("react.early_return_sentinel")) return t9;
+	let t10;
+	if ($[46] !== t3 || $[47] !== t4) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: t3,
+			children: t4
 		});
-		$[22] = t4;
-		$[23] = t5;
-		$[24] = t8;
-	} else t8 = $[24];
-	let t9;
-	if ($[25] !== T0 || $[26] !== t6 || $[27] !== t8) {
-		t9 = /* @__PURE__ */ jsx(T0, {
-			title: t6,
-			children: t8
+		$[46] = t3;
+		$[47] = t4;
+		$[48] = t10;
+	} else t10 = $[48];
+	let t11;
+	if ($[49] !== T0 || $[50] !== t10 || $[51] !== t5 || $[52] !== t6 || $[53] !== t7 || $[54] !== t8) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			title: t5,
+			description: t6,
+			variant: t7,
+			className: t8,
+			children: t10
 		});
-		$[25] = T0;
-		$[26] = t6;
-		$[27] = t8;
-		$[28] = t9;
-	} else t9 = $[28];
-	return t9;
+		$[49] = T0;
+		$[50] = t10;
+		$[51] = t5;
+		$[52] = t6;
+		$[53] = t7;
+		$[54] = t8;
+		$[55] = t11;
+	} else t11 = $[55];
+	return t11;
 }
 
 //#endregion