@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,279 @@
+import { useResolveText } 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 { TimelineWidgetSkeleton } from "./widget-skeletons.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { useQuery } from "@tanstack/react-query";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/widgets/timeline-widget.tsx
+/**
+* Timeline Widget
+*
+* Displays an activity/event timeline.
+* Uses WidgetCard for consistent styling.
+*/
+const variantStyles = {
+	default: "bg-muted-foreground",
+	success: "bg-success",
+	warning: "bg-warning",
+	error: "bg-destructive",
+	info: "bg-info"
+};
+/**
+* Format timestamp based on format option
+*/
+function formatTimestamp(date, format = "relative") {
+	const d = typeof date === "string" ? new Date(date) : date;
+	switch (format) {
+		case "absolute": return d.toLocaleDateString();
+		case "datetime": return d.toLocaleString();
+		case "relative":
+		default: {
+			const diff = (/* @__PURE__ */ new Date()).getTime() - d.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 > 7) return d.toLocaleDateString();
+			if (days > 0) return `${days}d ago`;
+			if (hours > 0) return `${hours}h ago`;
+			if (minutes > 0) return `${minutes}m ago`;
+			return "just now";
+		}
+	}
+}
+/**
+* Timeline Widget Component
+*
+* Displays a vertical timeline of events/activities.
+*
+* @example
+* ```tsx
+* <TimelineWidget
+*   config={{
+*     type: "timeline",
+*     id: "recent-activity",
+*     title: "Recent Activity",
+*     loader: async (client) => {
+*       const activities = await client.collections.activities.findMany({
+*         limit: 10,
+*         orderBy: { createdAt: "desc" }
+*       });
+*       return activities.map(a => ({
+*         id: a.id,
+*         title: a.action,
+*         description: a.description,
+*         timestamp: a.createdAt,
+*         variant: a.type === "error" ? "error" : "default"
+*       }));
+*     }
+*   }}
+* />
+* ```
+*/
+function TimelineWidget(t0) {
+	const $ = c(46);
+	const { config, navigate } = t0;
+	const client = useAdminStore(selectClient);
+	const resolveText = useResolveText();
+	const { maxItems: t1, showTimestamps: t2, timestampFormat: t3, emptyMessage } = config;
+	const maxItems = t1 === void 0 ? 10 : t1;
+	const showTimestamps = t2 === void 0 ? true : t2;
+	const timestampFormat = t3 === void 0 ? "relative" : t3;
+	const useServerData = !!config.hasLoader;
+	let t4;
+	if ($[0] !== config.refreshInterval || $[1] !== useServerData) {
+		t4 = {
+			enabled: useServerData,
+			refreshInterval: config.refreshInterval
+		};
+		$[0] = config.refreshInterval;
+		$[1] = useServerData;
+		$[2] = t4;
+	} else t4 = $[2];
+	const serverQuery = useServerWidgetData(config.id, t4);
+	let t5;
+	if ($[3] !== config.id) {
+		t5 = [
+			"widget",
+			"timeline",
+			config.id
+		];
+		$[3] = config.id;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== client || $[6] !== config.loader) {
+		t6 = () => config.loader(client);
+		$[5] = client;
+		$[6] = config.loader;
+		$[7] = t6;
+	} else t6 = $[7];
+	const t7 = !useServerData && !!config.loader;
+	let t8;
+	if ($[8] !== config.refreshInterval || $[9] !== t5 || $[10] !== t6 || $[11] !== t7) {
+		t8 = {
+			queryKey: t5,
+			queryFn: t6,
+			enabled: t7,
+			refetchInterval: config.refreshInterval
+		};
+		$[8] = config.refreshInterval;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	const clientQuery = useQuery(t8);
+	const { data, isLoading, error, refetch } = useServerData ? serverQuery : clientQuery;
+	let t9;
+	let title;
+	if ($[13] !== config.title || $[14] !== data || $[15] !== emptyMessage || $[16] !== maxItems || $[17] !== navigate || $[18] !== resolveText || $[19] !== showTimestamps || $[20] !== timestampFormat) {
+		const items = data?.slice(0, maxItems) ?? [];
+		let t10$1;
+		if ($[23] !== config.title || $[24] !== resolveText) {
+			t10$1 = config.title ? resolveText(config.title) : void 0;
+			$[23] = config.title;
+			$[24] = resolveText;
+			$[25] = t10$1;
+		} else t10$1 = $[25];
+		title = t10$1;
+		let t11$1;
+		if ($[26] !== navigate) {
+			t11$1 = (item) => {
+				if (item.href && navigate) navigate(item.href);
+			};
+			$[26] = navigate;
+			$[27] = t11$1;
+		} else t11$1 = $[27];
+		const handleItemClick = t11$1;
+		let t12$1;
+		if ($[28] !== emptyMessage || $[29] !== resolveText) {
+			t12$1 = emptyMessage ? resolveText(emptyMessage) : "No activity yet";
+			$[28] = emptyMessage;
+			$[29] = resolveText;
+			$[30] = t12$1;
+		} else t12$1 = $[30];
+		let t13$1;
+		if ($[31] !== t12$1) {
+			t13$1 = /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground flex h-24 items-center justify-center",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-sm",
+					children: t12$1
+				})
+			});
+			$[31] = t12$1;
+			$[32] = t13$1;
+		} else t13$1 = $[32];
+		const emptyContent = t13$1;
+		t9 = items.length === 0 ? emptyContent : /* @__PURE__ */ jsx("div", {
+			className: "space-y-0",
+			children: items.map((item_0, index) => {
+				const iconElement = resolveIconElement(item_0.icon, { className: "h-3 w-3 text-white" });
+				const variant = item_0.variant || "default";
+				const isLast = index === items.length - 1;
+				const isClickable = !!(item_0.href && navigate);
+				const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+					!isLast && /* @__PURE__ */ jsx("div", { className: "bg-border absolute top-6 bottom-0 left-[11px] w-px" }),
+					/* @__PURE__ */ jsx("div", {
+						className: cn("relative z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full", variantStyles[variant]),
+						children: iconElement ?? /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:circle-bold",
+							className: "h-3 w-3 text-white"
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1 pt-0.5 text-left",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "truncate text-sm font-medium",
+								children: item_0.title
+							}),
+							item_0.description && /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground mt-0.5 line-clamp-2 text-xs",
+								children: item_0.description
+							}),
+							showTimestamps && item_0.timestamp && /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground mt-1 text-xs",
+								children: formatTimestamp(item_0.timestamp, timestampFormat)
+							})
+						]
+					})
+				] });
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("relative flex gap-3 pb-4", isLast && "pb-0"),
+					...isClickable ? {
+						role: "button",
+						tabIndex: 0,
+						onClick: () => handleItemClick(item_0),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" || e.key === " ") handleItemClick(item_0);
+						},
+						style: { cursor: "pointer" }
+					} : {},
+					children: itemContent
+				}, item_0.id);
+			})
+		});
+		$[13] = config.title;
+		$[14] = data;
+		$[15] = emptyMessage;
+		$[16] = maxItems;
+		$[17] = navigate;
+		$[18] = resolveText;
+		$[19] = showTimestamps;
+		$[20] = timestampFormat;
+		$[21] = t9;
+		$[22] = title;
+	} else {
+		t9 = $[21];
+		title = $[22];
+	}
+	const timelineContent = t9;
+	let t10;
+	if ($[33] !== maxItems) {
+		t10 = /* @__PURE__ */ jsx(TimelineWidgetSkeleton, { count: maxItems });
+		$[33] = maxItems;
+		$[34] = t10;
+	} else t10 = $[34];
+	let t11;
+	if ($[35] !== error) {
+		t11 = error instanceof Error ? error : error ? new Error(String(error)) : null;
+		$[35] = error;
+		$[36] = t11;
+	} else t11 = $[36];
+	let t12;
+	if ($[37] !== refetch) {
+		t12 = () => refetch();
+		$[37] = refetch;
+		$[38] = t12;
+	} else t12 = $[38];
+	let t13;
+	if ($[39] !== isLoading || $[40] !== t10 || $[41] !== t11 || $[42] !== t12 || $[43] !== timelineContent || $[44] !== title) {
+		t13 = /* @__PURE__ */ jsx(WidgetCard, {
+			title,
+			isLoading,
+			loadingSkeleton: t10,
+			error: t11,
+			onRefresh: t12,
+			children: timelineContent
+		});
+		$[39] = isLoading;
+		$[40] = t10;
+		$[41] = t11;
+		$[42] = t12;
+		$[43] = timelineContent;
+		$[44] = title;
+		$[45] = t13;
+	} else t13 = $[45];
+	return t13;
+}
+
+//#endregion
+export { TimelineWidget as default };

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

@@ -0,0 +1,312 @@
+import { useResolveText } 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 { ValueWidgetSkeleton } 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/value-widget.tsx
+/**
+* Value Widget
+*
+* Flexible widget with async data fetching and full Tailwind customization.
+* Uses WidgetCard for consistent styling while allowing custom classNames.
+*/
+/**
+* Format value for display
+*/
+function formatValue(value) {
+	if (typeof value === "number") return value.toLocaleString();
+	return value;
+}
+/**
+* Value Widget Component
+*
+* Fetches data via async function and renders with full customization.
+*
+* @example
+* ```tsx
+* <ValueWidget
+*   config={{
+*     type: "value",
+*     id: "total-revenue",
+*     loader: async (client) => ({
+*       value: 42,
+*       label: "Total",
+*       classNames: { root: "bg-blue-50" },
+*     }),
+*   }}
+* />
+* ```
+*/
+function ValueWidget(t0) {
+	const $ = c(89);
+	const { config } = t0;
+	const client = useAdminStore(selectClient);
+	const resolveText = useResolveText();
+	const useServerData = !!config.hasLoader;
+	let t1;
+	if ($[0] !== config.refreshInterval || $[1] !== useServerData) {
+		t1 = {
+			enabled: useServerData,
+			refreshInterval: config.refreshInterval
+		};
+		$[0] = config.refreshInterval;
+		$[1] = useServerData;
+		$[2] = t1;
+	} else t1 = $[2];
+	const serverQuery = useServerWidgetData(config.id, t1);
+	let t2;
+	if ($[3] !== config.id) {
+		t2 = [
+			"widget",
+			"value",
+			config.id
+		];
+		$[3] = config.id;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== client || $[6] !== config.loader) {
+		t3 = () => config.loader(client);
+		$[5] = client;
+		$[6] = config.loader;
+		$[7] = t3;
+	} else t3 = $[7];
+	const t4 = !useServerData && !!config.loader;
+	let t5;
+	if ($[8] !== config.refreshInterval || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+		t5 = {
+			queryKey: t2,
+			queryFn: t3,
+			enabled: t4,
+			refetchInterval: config.refreshInterval
+		};
+		$[8] = config.refreshInterval;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	const clientQuery = useQuery(t5);
+	const { data, isLoading, error, refetch, isFetching } = useServerData ? serverQuery : clientQuery;
+	const isFeatured = config.cardVariant === "featured";
+	if (isLoading || error || !data) {
+		let t6$1;
+		if ($[13] !== config.title || $[14] !== resolveText) {
+			t6$1 = config.title ? resolveText(config.title) : void 0;
+			$[13] = config.title;
+			$[14] = resolveText;
+			$[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;
+		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, {
+				title: t6$1,
+				isLoading,
+				loadingSkeleton: t7$1,
+				error: t8$1,
+				onRefresh: t9$1,
+				className: t10$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;
+	}
+	let T0;
+	let cls;
+	let footer;
+	let subtitle;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	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) {
+		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;
+		T0 = WidgetCard;
+		t9 = label;
+		t10 = Icon;
+		if ($[64] !== refetch) {
+			t11 = () => refetch();
+			$[64] = refetch;
+			$[65] = t11;
+		} else t11 = $[65];
+		t12 = isFetching && !isLoading;
+		t13 = 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];
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: cn("text-2xl font-bold", cls.value),
+			children: t17$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;
+	} 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];
+	}
+	let t14;
+	if ($[69] !== cls || $[70] !== subtitle) {
+		t14 = 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", {
+			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", {
+			className: t6,
+			children: [
+				t7,
+				t8,
+				t14,
+				t15
+			]
+		});
+		$[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, {
+			title: t9,
+			icon: t10,
+			onRefresh: t11,
+			isRefreshing: t12,
+			className: t13,
+			children: t16
+		});
+		$[81] = T0;
+		$[82] = t10;
+		$[83] = t11;
+		$[84] = t12;
+		$[85] = t13;
+		$[86] = t16;
+		$[87] = t9;
+		$[88] = t17;
+	} else t17 = $[88];
+	return t17;
+}
+
+//#endregion
+export { ValueWidget as default };