@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,200 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+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 { ProgressWidgetSkeleton } from "./widget-skeletons.mjs";
+import { c } from "react/compiler-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/widgets/progress-widget.tsx
+/**
+* Progress Widget
+*
+* Displays progress towards a goal.
+* Uses WidgetCard for consistent styling.
+*/
+/**
+* Progress Widget Component
+*
+* Displays a progress bar with current/target values.
+*
+* @example
+* ```tsx
+* <ProgressWidget
+*   config={{
+*     type: "progress",
+*     id: "monthly-sales",
+*     title: "Monthly Sales Goal",
+*     loader: async (client) => ({
+*       current: 75000,
+*       target: 100000,
+*       label: "$75,000 / $100,000"
+*     }),
+*     showPercentage: true,
+*   }}
+* />
+* ```
+*/
+function ProgressWidget(t0) {
+	const $ = c(38);
+	const { config } = t0;
+	const client = useAdminStore(selectClient);
+	const resolveText = useResolveText();
+	const { color, showPercentage: t1 } = config;
+	const showPercentage = t1 === void 0 ? true : t1;
+	const useServerData = !!config.hasLoader;
+	let t2;
+	if ($[0] !== config.refreshInterval || $[1] !== useServerData) {
+		t2 = {
+			enabled: useServerData,
+			refreshInterval: config.refreshInterval
+		};
+		$[0] = config.refreshInterval;
+		$[1] = useServerData;
+		$[2] = t2;
+	} else t2 = $[2];
+	const serverQuery = useServerWidgetData(config.id, t2);
+	let t3;
+	if ($[3] !== config.id) {
+		t3 = [
+			"widget",
+			"progress",
+			config.id
+		];
+		$[3] = config.id;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== client || $[6] !== config.loader) {
+		t4 = () => config.loader(client);
+		$[5] = client;
+		$[6] = config.loader;
+		$[7] = t4;
+	} else t4 = $[7];
+	const t5 = !useServerData && !!config.loader;
+	let t6;
+	if ($[8] !== config.refreshInterval || $[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
+		t6 = {
+			queryKey: t3,
+			queryFn: t4,
+			enabled: t5,
+			refetchInterval: config.refreshInterval
+		};
+		$[8] = config.refreshInterval;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	const clientQuery = useQuery(t6);
+	const { data, isLoading, error, refetch } = useServerData ? serverQuery : clientQuery;
+	let t7;
+	if ($[13] !== config.title || $[14] !== resolveText) {
+		t7 = config.title ? resolveText(config.title) : void 0;
+		$[13] = config.title;
+		$[14] = resolveText;
+		$[15] = t7;
+	} else t7 = $[15];
+	const title = t7;
+	const percentage = data ? Math.min(data.current / data.target * 100, 100) : 0;
+	let t8;
+	if ($[16] !== percentage) {
+		t8 = percentage.toFixed(0);
+		$[16] = percentage;
+		$[17] = t8;
+	} else t8 = $[17];
+	const percentageFormatted = t8;
+	let t9;
+	if ($[18] !== color || $[19] !== percentage) {
+		t9 = () => {
+			if (color) return color;
+			if (percentage >= 100) return "bg-success";
+			if (percentage >= 75) return "bg-primary";
+			if (percentage >= 50) return "bg-warning";
+			return "bg-muted-foreground";
+		};
+		$[18] = color;
+		$[19] = percentage;
+		$[20] = t9;
+	} else t9 = $[20];
+	const getProgressColor = t9;
+	let t10;
+	if ($[21] !== data || $[22] !== getProgressColor || $[23] !== percentage || $[24] !== percentageFormatted || $[25] !== showPercentage) {
+		t10 = data ? /* @__PURE__ */ jsxs("div", {
+			className: "space-y-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "relative",
+					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()),
+							style: { width: `${percentage}%` }
+						})
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: data.label || `${data.current.toLocaleString()} / ${data.target.toLocaleString()}`
+					}), showPercentage && /* @__PURE__ */ jsxs("span", {
+						className: "font-medium",
+						children: [percentageFormatted, "%"]
+					})]
+				}),
+				data.subtitle && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: data.subtitle
+				})
+			]
+		}) : null;
+		$[21] = data;
+		$[22] = getProgressColor;
+		$[23] = percentage;
+		$[24] = percentageFormatted;
+		$[25] = showPercentage;
+		$[26] = t10;
+	} 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];
+	let t13;
+	if ($[30] !== refetch) {
+		t13 = () => refetch();
+		$[30] = refetch;
+		$[31] = t13;
+	} else t13 = $[31];
+	let t14;
+	if ($[32] !== isLoading || $[33] !== progressContent || $[34] !== t12 || $[35] !== t13 || $[36] !== title) {
+		t14 = /* @__PURE__ */ jsx(WidgetCard, {
+			title,
+			isLoading,
+			loadingSkeleton: t11,
+			error: t12,
+			onRefresh: t13,
+			children: progressContent
+		});
+		$[32] = isLoading;
+		$[33] = progressContent;
+		$[34] = t12;
+		$[35] = t13;
+		$[36] = title;
+		$[37] = t14;
+	} else t14 = $[37];
+	return t14;
+}
+
+//#endregion
+export { ProgressWidget as default };

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

@@ -0,0 +1,209 @@
+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 { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/widgets/quick-actions-widget.tsx
+/**
+* Quick Actions Widget
+*
+* Displays shortcuts to common actions with icons and proper styling.
+* Uses WidgetCard for consistent styling.
+*/
+/**
+* Quick actions widget component
+*
+* Displays a list of action items with icons, matching the style
+* of other dashboard widgets like recent-items.
+*/
+function QuickActionsWidget(t0) {
+	const $ = c(29);
+	const { config, basePath: t1, navigate } = t0;
+	const basePath = t1 === void 0 ? "/admin" : t1;
+	const resolveText = useResolveText();
+	const { quickActions, 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 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");
+		bb0: {
+			let t8$1;
+			if ($[14] !== basePath || $[15] !== resolveText) {
+				t8$1 = (action, index) => {
+					if (typeof action === "string") {
+						const [collection, actionType] = action.split(".");
+						return {
+							id: `${action}-${index}`,
+							label: `${actionType === "create" ? "New" : actionType} ${formatLabel(collection)}`,
+							href: `${basePath}/collections/${collection}/${actionType === "create" ? "create" : ""}`,
+							icon: void 0,
+							variant: "default"
+						};
+					}
+					return {
+						id: `action-${index}`,
+						label: resolveText(action.label),
+						href: action.href,
+						onClick: action.onClick,
+						icon: action.icon,
+						variant: action.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);
+				};
+				$[17] = navigate;
+				$[18] = t9$1;
+			} else t9$1 = $[18];
+			const handleClick = t9$1;
+			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"
+			};
+			const iconVariantStyles = {
+				default: "bg-muted text-muted-foreground",
+				primary: "bg-primary/10 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"
+					});
+					$[19] = t10;
+				} else t10 = $[19];
+				let t11;
+				if ($[20] !== title) {
+					t11 = /* @__PURE__ */ jsx(WidgetCard, {
+						title,
+						children: t10
+					});
+					$[20] = title;
+					$[21] = t11;
+				} else t11 = $[21];
+				t7 = t11;
+				break bb0;
+			}
+			if (layout === "grid") {
+				t7 = /* @__PURE__ */ jsx(WidgetCard, {
+					title,
+					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" });
+							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]),
+								children: [iconElement && /* @__PURE__ */ jsx("div", {
+									className: cn("flex h-9 w-9 items-center justify-center", iconVariantStyles[action_1.variant]),
+									children: iconElement
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-xs font-medium",
+									children: action_1.label
+								})]
+							}, action_1.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" });
+				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]),
+					children: [
+						iconElement_0 && /* @__PURE__ */ jsx("div", {
+							className: cn("flex h-8 w-8 shrink-0 items-center justify-center", iconVariantStyles[action_2.variant]),
+							children: iconElement_0
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 truncate text-sm font-medium",
+							children: action_2.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);
+			});
+		}
+		$[3] = basePath;
+		$[4] = layout;
+		$[5] = navigate;
+		$[6] = quickActions;
+		$[7] = resolveText;
+		$[8] = title;
+		$[9] = T0;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+	} else {
+		T0 = $[9];
+		t4 = $[10];
+		t5 = $[11];
+		t6 = $[12];
+		t7 = $[13];
+	}
+	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
+		});
+		$[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
+		});
+		$[25] = T0;
+		$[26] = t6;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
+	return t9;
+}
+
+//#endregion
+export { QuickActionsWidget as default };

package/dist/client/components/widgets/recent-items-widget.mjs

@@ -0,0 +1,196 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { formatLabel } from "../../lib/utils.mjs";
+import { useCollectionList } from "../../hooks/use-collection.mjs";
+import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
+import { RecentItemsWidgetSkeleton } from "./widget-skeletons.mjs";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/widgets/recent-items-widget.tsx
+/**
+* Recent Items Widget
+*
+* Displays latest items from a collection.
+* Uses WidgetCard for consistent styling.
+*/
+/**
+* Recent items widget component
+*
+* Displays:
+* - List of most recently created/updated items
+* - Configurable number of items
+* - Links to edit each item
+*/
+function RecentItemsWidget(t0) {
+	const $ = c(38);
+	const { config } = t0;
+	const resolveText = useResolveText();
+	const { collection, limit: t1, label, titleField: t2, dateField: t3, subtitleFields, onItemClick, realtime } = config;
+	const limit = t1 === void 0 ? 5 : t1;
+	const titleField = t2 === void 0 ? "_title" : t2;
+	const dateField = t3 === void 0 ? "createdAt" : t3;
+	let t4;
+	if ($[0] !== dateField) {
+		t4 = { [dateField]: "desc" };
+		$[0] = dateField;
+		$[1] = t4;
+	} else t4 = $[1];
+	let t5;
+	if ($[2] !== limit || $[3] !== t4) {
+		t5 = {
+			orderBy: t4,
+			limit
+		};
+		$[2] = limit;
+		$[3] = t4;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== realtime) {
+		t6 = { realtime };
+		$[5] = realtime;
+		$[6] = t6;
+	} else t6 = $[6];
+	const { data, isLoading, error, refetch } = useCollectionList(collection, t5, void 0, t6);
+	let t7;
+	if ($[7] !== data) {
+		t7 = Array.isArray(data?.docs) ? data.docs : [];
+		$[7] = data;
+		$[8] = t7;
+	} else t7 = $[8];
+	const items = t7;
+	let t8;
+	if ($[9] !== collection || $[10] !== label || $[11] !== resolveText) {
+		t8 = label ? resolveText(label) : `Recent ${formatLabel(collection)}`;
+		$[9] = collection;
+		$[10] = label;
+		$[11] = resolveText;
+		$[12] = t8;
+	} else t8 = $[12];
+	const displayLabel = t8;
+	let t9;
+	if ($[13] !== titleField) {
+		t9 = (item) => {
+			if (titleField && item[titleField]) return String(item[titleField]);
+			if (item._title) return String(item._title);
+			if (item.name) return String(item.name);
+			if (item.title) return String(item.title);
+			if (item.label) return String(item.label);
+			return `Item #${item.id}`;
+		};
+		$[13] = titleField;
+		$[14] = t9;
+	} else t9 = $[14];
+	const getTitleValue = t9;
+	let t10;
+	if ($[15] !== subtitleFields) {
+		t10 = (item_0) => {
+			if (!subtitleFields?.length) return null;
+			return subtitleFields.map((field) => item_0[field]).filter(Boolean).join(" - ");
+		};
+		$[15] = subtitleFields;
+		$[16] = t10;
+	} else t10 = $[16];
+	const getSubtitle = t10;
+	let t11;
+	if ($[17] !== onItemClick) {
+		t11 = (item_1) => {
+			if (onItemClick) onItemClick(item_1);
+		};
+		$[17] = onItemClick;
+		$[18] = t11;
+	} else t11 = $[18];
+	const handleItemClick = t11;
+	let t12;
+	if ($[19] !== dateField || $[20] !== getSubtitle || $[21] !== getTitleValue || $[22] !== handleItemClick || $[23] !== items) {
+		t12 = items.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: "No items yet"
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "space-y-1",
+			children: items.map((item_2) => {
+				const dateValue = item_2[dateField];
+				const subtitle = getSubtitle(item_2);
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => handleItemClick(item_2),
+					className: "hover:bg-muted flex w-full cursor-pointer items-center gap-3 p-2 text-left transition-colors",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "truncate text-sm font-medium",
+							children: getTitleValue(item_2)
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "text-muted-foreground flex items-center gap-2 text-xs",
+							children: [dateValue && /* @__PURE__ */ jsx("span", { children: formatRelativeTime(new Date(dateValue)) }), subtitle && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: "-" }), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: subtitle
+							})] })]
+						})]
+					})
+				}, item_2.id);
+			})
+		});
+		$[19] = dateField;
+		$[20] = getSubtitle;
+		$[21] = getTitleValue;
+		$[22] = handleItemClick;
+		$[23] = items;
+		$[24] = t12;
+	} else t12 = $[24];
+	const listContent = t12;
+	let t13;
+	if ($[25] !== limit) {
+		t13 = /* @__PURE__ */ jsx(RecentItemsWidgetSkeleton, { count: limit });
+		$[25] = limit;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== error) {
+		t14 = error instanceof Error ? error : error ? new Error(String(error)) : null;
+		$[27] = error;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== refetch) {
+		t15 = () => refetch();
+		$[29] = refetch;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== displayLabel || $[32] !== isLoading || $[33] !== listContent || $[34] !== t13 || $[35] !== t14 || $[36] !== t15) {
+		t16 = /* @__PURE__ */ jsx(WidgetCard, {
+			title: displayLabel,
+			isLoading,
+			loadingSkeleton: t13,
+			error: t14,
+			onRefresh: t15,
+			children: listContent
+		});
+		$[31] = displayLabel;
+		$[32] = isLoading;
+		$[33] = listContent;
+		$[34] = t13;
+		$[35] = t14;
+		$[36] = t15;
+		$[37] = t16;
+	} else t16 = $[37];
+	return t16;
+}
+/**
+* Format relative time
+*/
+function formatRelativeTime(date) {
+	const diff = (/* @__PURE__ */ new Date()).getTime() - date.getTime();
+	const seconds = Math.floor(diff / 1e3);
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+	if (days > 0) return `${days}d ago`;
+	if (hours > 0) return `${hours}h ago`;
+	if (minutes > 0) return `${minutes}m ago`;
+	return "just now";
+}
+
+//#endregion
+export { RecentItemsWidget as default };