@questpie/admin 1.1.0 → 2.0.0

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

@@ -0,0 +1,150 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn, formatCollectionName } from "../../lib/utils.mjs";
+import { useCollectionCount } from "../../hooks/use-collection.mjs";
+import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
+import { useServerWidgetData } from "../../hooks/use-server-widget-data.mjs";
+import { StatsWidgetSkeleton } from "./widget-skeletons.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/widgets/stats-widget.tsx
+/**
+* Get date range for a preset
+*/
+function getDateRange(preset) {
+	const now = /* @__PURE__ */ new Date();
+	const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+	switch (preset) {
+		case "today": return {
+			gte: today,
+			lte: /* @__PURE__ */ new Date(today.getTime() + 1440 * 60 * 1e3 - 1)
+		};
+		case "yesterday": return {
+			gte: /* @__PURE__ */ new Date(today.getTime() - 1440 * 60 * 1e3),
+			lte: /* @__PURE__ */ new Date(today.getTime() - 1)
+		};
+		case "thisWeek": {
+			const dayOfWeek = today.getDay();
+			return {
+				gte: /* @__PURE__ */ new Date(today.getTime() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1) * 24 * 60 * 60 * 1e3),
+				lte: now
+			};
+		}
+		case "lastWeek": {
+			const dayOfWeek = today.getDay();
+			const thisMonday = /* @__PURE__ */ new Date(today.getTime() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1) * 24 * 60 * 60 * 1e3);
+			return {
+				gte: /* @__PURE__ */ new Date(thisMonday.getTime() - 10080 * 60 * 1e3),
+				lte: /* @__PURE__ */ new Date(thisMonday.getTime() - 1)
+			};
+		}
+		case "thisMonth": return {
+			gte: new Date(now.getFullYear(), now.getMonth(), 1),
+			lte: now
+		};
+		case "lastMonth": {
+			const firstOfThisMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+			return {
+				gte: new Date(now.getFullYear(), now.getMonth() - 1, 1),
+				lte: /* @__PURE__ */ new Date(firstOfThisMonth.getTime() - 1)
+			};
+		}
+		case "last7days": return {
+			gte: /* @__PURE__ */ new Date(now.getTime() - 10080 * 60 * 1e3),
+			lte: now
+		};
+		case "last30days": return {
+			gte: /* @__PURE__ */ new Date(now.getTime() - 720 * 60 * 60 * 1e3),
+			lte: now
+		};
+		case "last90days": return {
+			gte: /* @__PURE__ */ new Date(now.getTime() - 2160 * 60 * 60 * 1e3),
+			lte: now
+		};
+		case "thisYear": return {
+			gte: new Date(now.getFullYear(), 0, 1),
+			lte: now
+		};
+		case "lastYear": return {
+			gte: new Date(now.getFullYear() - 1, 0, 1),
+			lte: new Date(now.getFullYear() - 1, 11, 31, 23, 59, 59)
+		};
+		default: return {
+			gte: today,
+			lte: now
+		};
+	}
+}
+const variantStyles = {
+	default: "",
+	primary: "border-primary/30 bg-primary/5",
+	success: "border-success/30 bg-success/5",
+	warning: "border-warning/30 bg-warning/5",
+	danger: "border-destructive/30 bg-destructive/5"
+};
+const variantValueStyles = {
+	default: "",
+	primary: "text-primary",
+	success: "text-success",
+	warning: "text-warning",
+	danger: "text-destructive"
+};
+/**
+* Stats widget component
+*
+* Shows:
+* - Total count for a collection
+* - Optional icon
+* - Color variant for visual distinction
+*/
+function StatsWidget({ config }) {
+	const resolveText = useResolveText();
+	const { collection, label, filter, filterFn, dateFilter, icon: Icon, variant = "default", realtime, hasFetchFn, refreshInterval } = config;
+	const serverQuery = useServerWidgetData(config.id, {
+		enabled: !!hasFetchFn,
+		refreshInterval
+	});
+	const computedFilter = useMemo(() => {
+		let result = {};
+		if (filter) result = {
+			...result,
+			...filter
+		};
+		if (filterFn) result = {
+			...result,
+			...filterFn()
+		};
+		if (dateFilter) {
+			const { gte, lte } = getDateRange(dateFilter.range);
+			result[dateFilter.field] = {
+				gte: gte.toISOString(),
+				lte: lte.toISOString()
+			};
+		}
+		return Object.keys(result).length > 0 ? result : void 0;
+	}, [
+		filter,
+		filterFn,
+		dateFilter
+	]);
+	const collectionQuery = useCollectionCount(collection, computedFilter ? { where: computedFilter } : void 0, void 0, { realtime });
+	const { data: rawData, isLoading, error, refetch } = hasFetchFn ? serverQuery : collectionQuery;
+	const count = hasFetchFn ? rawData?.count ?? 0 : rawData ?? 0;
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: label ? resolveText(label) : formatCollectionName(collection),
+		icon: Icon,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(StatsWidgetSkeleton, {}),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		className: variantStyles[variant],
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("text-2xl font-bold", variantValueStyles[variant]),
+			children: count.toLocaleString()
+		})
+	});
+}
+
+//#endregion
+export { StatsWidget as default };
+//# sourceMappingURL=stats-widget.mjs.map

package/dist/client/components/widgets/stats-widget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats-widget.mjs","names":["result: Record<string, any>"],"sources":["../../../../src/client/components/widgets/stats-widget.tsx"],"sourcesContent":["/**\n * Stats Widget\n *\n * Displays count and change percentage for a collection.\n * Uses WidgetCard for consistent styling.\n */\n\nimport type * as React from \"react\";\nimport { useMemo } from \"react\";\nimport type { ComponentReference } from \"#questpie/admin/server\";\nimport type {\n\tDateFilterConfig,\n\tDateFilterPreset,\n} from \"../../builder/types/widget-types\";\nimport { useCollectionCount } from \"../../hooks/use-collection\";\nimport { useServerWidgetData } from \"../../hooks/use-server-widget-data\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn, formatCollectionName } from \"../../lib/utils\";\nimport { WidgetCard } from \"../../views/dashboard/widget-card\";\nimport { StatsWidgetSkeleton } from \"./widget-skeletons\";\n\n/**\n * Stats widget config (local type for component props)\n */\nexport type StatsWidgetConfig = {\n\tid: string;\n\tcollection: string;\n\tlabel?: string;\n\trealtime?: boolean;\n\t/** Static filter (evaluated at build time) */\n\tfilter?: Record<string, any>;\n\t/** Dynamic filter function (evaluated at render time) */\n\tfilterFn?: () => Record<string, any>;\n\t/** Date filter preset (evaluated at render time) */\n\tdateFilter?: DateFilterConfig;\n\t/** Icon component or server-defined reference */\n\ticon?:\n\t\t| React.ComponentType<{ className?: string }>\n\t\t| ComponentReference\n\t\t| string;\n\t/** Color variant for the stat card */\n\tvariant?: \"default\" | \"primary\" | \"success\" | \"warning\" | \"danger\";\n\t/** Server has a fetchFn for this widget */\n\thasFetchFn?: boolean;\n\t/** Refresh interval in ms */\n\trefreshInterval?: number;\n};\n\n/**\n * Stats widget props\n */\nexport type StatsWidgetProps = {\n\tconfig: StatsWidgetConfig;\n};\n\n/**\n * Get date range for a preset\n */\nfunction getDateRange(preset: DateFilterPreset): { gte: Date; lte: Date } {\n\tconst now = new Date();\n\tconst today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n\n\tswitch (preset) {\n\t\tcase \"today\":\n\t\t\treturn {\n\t\t\t\tgte: today,\n\t\t\t\tlte: new Date(today.getTime() + 24 * 60 * 60 * 1000 - 1),\n\t\t\t};\n\t\tcase \"yesterday\": {\n\t\t\tconst yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);\n\t\t\treturn {\n\t\t\t\tgte: yesterday,\n\t\t\t\tlte: new Date(today.getTime() - 1),\n\t\t\t};\n\t\t}\n\t\tcase \"thisWeek\": {\n\t\t\tconst dayOfWeek = today.getDay();\n\t\t\tconst monday = new Date(\n\t\t\t\ttoday.getTime() -\n\t\t\t\t\t(dayOfWeek === 0 ? 6 : dayOfWeek - 1) * 24 * 60 * 60 * 1000,\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tgte: monday,\n\t\t\t\tlte: now,\n\t\t\t};\n\t\t}\n\t\tcase \"lastWeek\": {\n\t\t\tconst dayOfWeek = today.getDay();\n\t\t\tconst thisMonday = new Date(\n\t\t\t\ttoday.getTime() -\n\t\t\t\t\t(dayOfWeek === 0 ? 6 : dayOfWeek - 1) * 24 * 60 * 60 * 1000,\n\t\t\t);\n\t\t\tconst lastMonday = new Date(\n\t\t\t\tthisMonday.getTime() - 7 * 24 * 60 * 60 * 1000,\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tgte: lastMonday,\n\t\t\t\tlte: new Date(thisMonday.getTime() - 1),\n\t\t\t};\n\t\t}\n\t\tcase \"thisMonth\":\n\t\t\treturn {\n\t\t\t\tgte: new Date(now.getFullYear(), now.getMonth(), 1),\n\t\t\t\tlte: now,\n\t\t\t};\n\t\tcase \"lastMonth\": {\n\t\t\tconst firstOfThisMonth = new Date(now.getFullYear(), now.getMonth(), 1);\n\t\t\treturn {\n\t\t\t\tgte: new Date(now.getFullYear(), now.getMonth() - 1, 1),\n\t\t\t\tlte: new Date(firstOfThisMonth.getTime() - 1),\n\t\t\t};\n\t\t}\n\t\tcase \"last7days\":\n\t\t\treturn {\n\t\t\t\tgte: new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000),\n\t\t\t\tlte: now,\n\t\t\t};\n\t\tcase \"last30days\":\n\t\t\treturn {\n\t\t\t\tgte: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000),\n\t\t\t\tlte: now,\n\t\t\t};\n\t\tcase \"last90days\":\n\t\t\treturn {\n\t\t\t\tgte: new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000),\n\t\t\t\tlte: now,\n\t\t\t};\n\t\tcase \"thisYear\":\n\t\t\treturn {\n\t\t\t\tgte: new Date(now.getFullYear(), 0, 1),\n\t\t\t\tlte: now,\n\t\t\t};\n\t\tcase \"lastYear\":\n\t\t\treturn {\n\t\t\t\tgte: new Date(now.getFullYear() - 1, 0, 1),\n\t\t\t\tlte: new Date(now.getFullYear() - 1, 11, 31, 23, 59, 59),\n\t\t\t};\n\t\tdefault:\n\t\t\treturn { gte: today, lte: now };\n\t}\n}\n\n// Variant styles for the card border/background\nconst variantStyles = {\n\tdefault: \"\",\n\tprimary: \"border-primary/30 bg-primary/5\",\n\tsuccess: \"border-success/30 bg-success/5\",\n\twarning: \"border-warning/30 bg-warning/5\",\n\tdanger: \"border-destructive/30 bg-destructive/5\",\n};\n\n// Variant styles for the value text\nconst variantValueStyles = {\n\tdefault: \"\",\n\tprimary: \"text-primary\",\n\tsuccess: \"text-success\",\n\twarning: \"text-warning\",\n\tdanger: \"text-destructive\",\n};\n\n/**\n * Stats widget component\n *\n * Shows:\n * - Total count for a collection\n * - Optional icon\n * - Color variant for visual distinction\n */\nexport default function StatsWidget({ config }: StatsWidgetProps) {\n\tconst resolveText = useResolveText();\n\tconst {\n\t\tcollection,\n\t\tlabel,\n\t\tfilter,\n\t\tfilterFn,\n\t\tdateFilter,\n\t\ticon: Icon,\n\t\tvariant = \"default\",\n\t\trealtime,\n\t\thasFetchFn,\n\t\trefreshInterval,\n\t} = config;\n\n\t// Server-side data fetching (when hasFetchFn is true)\n\tconst serverQuery = useServerWidgetData<{ count: number }>(config.id, {\n\t\tenabled: !!hasFetchFn,\n\t\trefreshInterval,\n\t});\n\n\t// Build the final filter - evaluated at render time\n\tconst computedFilter = useMemo(() => {\n\t\tlet result: Record<string, any> = {};\n\n\t\t// 1. Static filter\n\t\tif (filter) {\n\t\t\tresult = { ...result, ...filter };\n\t\t}\n\n\t\t// 2. Dynamic filter function\n\t\tif (filterFn) {\n\t\t\tresult = { ...result, ...filterFn() };\n\t\t}\n\n\t\t// 3. Date filter preset\n\t\tif (dateFilter) {\n\t\t\tconst { gte, lte } = getDateRange(dateFilter.range);\n\t\t\tresult[dateFilter.field] = {\n\t\t\t\tgte: gte.toISOString(),\n\t\t\t\tlte: lte.toISOString(),\n\t\t\t};\n\t\t}\n\n\t\treturn Object.keys(result).length > 0 ? result : undefined;\n\t}, [filter, filterFn, dateFilter]);\n\n\t// Fetch count using dedicated count endpoint (more efficient than fetching all docs)\n\tconst collectionQuery = useCollectionCount(\n\t\tcollection as any,\n\t\tcomputedFilter ? { where: computedFilter } : undefined,\n\t\tundefined,\n\t\t{ realtime },\n\t);\n\n\t// Use server data or client data\n\tconst {\n\t\tdata: rawData,\n\t\tisLoading,\n\t\terror,\n\t\trefetch,\n\t} = hasFetchFn ? serverQuery : collectionQuery;\n\n\tconst count = hasFetchFn\n\t\t? ((rawData as { count: number } | undefined)?.count ?? 0)\n\t\t: ((rawData as number | undefined) ?? 0);\n\n\tconst displayLabel = label\n\t\t? resolveText(label)\n\t\t: formatCollectionName(collection);\n\n\treturn (\n\t\t<WidgetCard\n\t\t\ttitle={displayLabel}\n\t\t\ticon={Icon}\n\t\t\tisLoading={isLoading}\n\t\t\tloadingSkeleton={<StatsWidgetSkeleton />}\n\t\t\terror={\n\t\t\t\terror instanceof Error ? error : error ? new Error(String(error)) : null\n\t\t\t}\n\t\t\tonRefresh={() => refetch()}\n\t\t\tclassName={variantStyles[variant]}\n\t\t>\n\t\t\t<div className={cn(\"text-2xl font-bold\", variantValueStyles[variant])}>\n\t\t\t\t{count.toLocaleString()}\n\t\t\t</div>\n\t\t</WidgetCard>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;AA0DA,SAAS,aAAa,QAAoD;CACzE,MAAM,sBAAM,IAAI,MAAM;CACtB,MAAM,QAAQ,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,IAAI,SAAS,CAAC;AAExE,SAAQ,QAAR;EACC,KAAK,QACJ,QAAO;GACN,KAAK;GACL,qBAAK,IAAI,KAAK,MAAM,SAAS,GAAG,OAAU,KAAK,MAAO,EAAE;GACxD;EACF,KAAK,YAEJ,QAAO;GACN,qBAFiB,IAAI,KAAK,MAAM,SAAS,GAAG,OAAU,KAAK,IAAK;GAGhE,qBAAK,IAAI,KAAK,MAAM,SAAS,GAAG,EAAE;GAClC;EAEF,KAAK,YAAY;GAChB,MAAM,YAAY,MAAM,QAAQ;AAKhC,UAAO;IACN,qBALc,IAAI,KAClB,MAAM,SAAS,IACb,cAAc,IAAI,IAAI,YAAY,KAAK,KAAK,KAAK,KAAK,IACxD;IAGA,KAAK;IACL;;EAEF,KAAK,YAAY;GAChB,MAAM,YAAY,MAAM,QAAQ;GAChC,MAAM,6BAAa,IAAI,KACtB,MAAM,SAAS,IACb,cAAc,IAAI,IAAI,YAAY,KAAK,KAAK,KAAK,KAAK,IACxD;AAID,UAAO;IACN,qBAJkB,IAAI,KACtB,WAAW,SAAS,GAAG,QAAc,KAAK,IAC1C;IAGA,qBAAK,IAAI,KAAK,WAAW,SAAS,GAAG,EAAE;IACvC;;EAEF,KAAK,YACJ,QAAO;GACN,KAAK,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,EAAE;GACnD,KAAK;GACL;EACF,KAAK,aAAa;GACjB,MAAM,mBAAmB,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,EAAE;AACvE,UAAO;IACN,KAAK,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,GAAG,GAAG,EAAE;IACvD,qBAAK,IAAI,KAAK,iBAAiB,SAAS,GAAG,EAAE;IAC7C;;EAEF,KAAK,YACJ,QAAO;GACN,qBAAK,IAAI,KAAK,IAAI,SAAS,GAAG,QAAc,KAAK,IAAK;GACtD,KAAK;GACL;EACF,KAAK,aACJ,QAAO;GACN,qBAAK,IAAI,KAAK,IAAI,SAAS,GAAG,MAAU,KAAK,KAAK,IAAK;GACvD,KAAK;GACL;EACF,KAAK,aACJ,QAAO;GACN,qBAAK,IAAI,KAAK,IAAI,SAAS,GAAG,OAAU,KAAK,KAAK,IAAK;GACvD,KAAK;GACL;EACF,KAAK,WACJ,QAAO;GACN,KAAK,IAAI,KAAK,IAAI,aAAa,EAAE,GAAG,EAAE;GACtC,KAAK;GACL;EACF,KAAK,WACJ,QAAO;GACN,KAAK,IAAI,KAAK,IAAI,aAAa,GAAG,GAAG,GAAG,EAAE;GAC1C,KAAK,IAAI,KAAK,IAAI,aAAa,GAAG,GAAG,IAAI,IAAI,IAAI,IAAI,GAAG;GACxD;EACF,QACC,QAAO;GAAE,KAAK;GAAO,KAAK;GAAK;;;AAKlC,MAAM,gBAAgB;CACrB,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR;AAGD,MAAM,qBAAqB;CAC1B,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACR;;;;;;;;;AAUD,SAAwB,YAAY,EAAE,UAA4B;CACjE,MAAM,cAAc,gBAAgB;CACpC,MAAM,EACL,YACA,OACA,QACA,UACA,YACA,MAAM,MACN,UAAU,WACV,UACA,YACA,oBACG;CAGJ,MAAM,cAAc,oBAAuC,OAAO,IAAI;EACrE,SAAS,CAAC,CAAC;EACX;EACA,CAAC;CAGF,MAAM,iBAAiB,cAAc;EACpC,IAAIA,SAA8B,EAAE;AAGpC,MAAI,OACH,UAAS;GAAE,GAAG;GAAQ,GAAG;GAAQ;AAIlC,MAAI,SACH,UAAS;GAAE,GAAG;GAAQ,GAAG,UAAU;GAAE;AAItC,MAAI,YAAY;GACf,MAAM,EAAE,KAAK,QAAQ,aAAa,WAAW,MAAM;AACnD,UAAO,WAAW,SAAS;IAC1B,KAAK,IAAI,aAAa;IACtB,KAAK,IAAI,aAAa;IACtB;;AAGF,SAAO,OAAO,KAAK,OAAO,CAAC,SAAS,IAAI,SAAS;IAC/C;EAAC;EAAQ;EAAU;EAAW,CAAC;CAGlC,MAAM,kBAAkB,mBACvB,YACA,iBAAiB,EAAE,OAAO,gBAAgB,GAAG,QAC7C,QACA,EAAE,UAAU,CACZ;CAGD,MAAM,EACL,MAAM,SACN,WACA,OACA,YACG,aAAa,cAAc;CAE/B,MAAM,QAAQ,aACT,SAA2C,SAAS,IACpD,WAAkC;AAMvC,QACC,oBAAC;EACA,OANmB,QAClB,YAAY,MAAM,GAClB,qBAAqB,WAAW;EAKjC,MAAM;EACK;EACX,iBAAiB,oBAAC,wBAAsB;EACxC,OACC,iBAAiB,QAAQ,QAAQ,QAAQ,IAAI,MAAM,OAAO,MAAM,CAAC,GAAG;EAErE,iBAAiB,SAAS;EAC1B,WAAW,cAAc;YAEzB,oBAAC;GAAI,WAAW,GAAG,sBAAsB,mBAAmB,SAAS;aACnE,MAAM,gBAAgB;IAClB;GACM"}

package/dist/client/components/widgets/table-widget.d.mts

@@ -0,0 +1,31 @@
+import { TableWidgetConfig } from "../../builder/types/widget-types.mjs";
+import * as react_jsx_runtime32 from "react/jsx-runtime";
+
+//#region src/client/components/widgets/table-widget.d.ts
+declare namespace table_widget_d_exports {
+  export { TableWidgetProps, TableWidget as default };
+}
+/**
+ * Table widget props
+ */
+interface TableWidgetProps {
+  config: TableWidgetConfig;
+  /** Base path for navigation */
+  basePath?: string;
+  /** Navigate function for row clicks */
+  navigate?: (path: string) => void;
+}
+/**
+ * Table Widget Component
+ *
+ * Displays a mini table of collection items.
+ * Uses field definitions from admin config for labels and cell rendering.
+ */
+declare function TableWidget({
+  config,
+  basePath,
+  navigate
+}: TableWidgetProps): react_jsx_runtime32.JSX.Element;
+//#endregion
+export { table_widget_d_exports };
+//# sourceMappingURL=table-widget.d.mts.map

package/dist/client/components/widgets/table-widget.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-widget.d.mts","names":[],"sources":["../../../../src/client/components/widgets/table-widget.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;AA6GG,UAhFc,gBAAA,CAgFd;EAAgB,MAAA,EA/ET,iBA+ES;EAAA;;;;;;;;;;;iBAJK,WAAA;;;;GAIrB,mBAAgB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,139 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn, formatLabel } from "../../lib/utils.mjs";
+import { useCollectionList } from "../../hooks/use-collection.mjs";
+import { DefaultCell } from "../../views/collection/cells/primitive-cells.mjs";
+import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
+import { TableWidgetSkeleton } from "./widget-skeletons.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/widgets/table-widget.tsx
+/**
+* Field types that need fieldDef passed to their cell component
+*/
+const FIELD_TYPES_NEEDING_FIELD_DEF = new Set([
+	"object",
+	"array",
+	"relation",
+	"reverseRelation"
+]);
+/**
+* Normalize column config - converts string to object format
+*/
+function normalizeColumn(column) {
+	if (typeof column === "string") return { key: column };
+	return column;
+}
+/**
+* Get column label from field definition or column config
+*/
+function getColumnLabel(column, fieldDef) {
+	if (column.label) return column.label;
+	const fieldOptions = fieldDef?.["~options"];
+	if (fieldOptions?.label) return fieldOptions.label;
+	return formatLabel(column.key);
+}
+/**
+* Resolve cell component from field definition
+*/
+function resolveCellComponent(fieldDef) {
+	if (fieldDef?.cell?.component) return fieldDef.cell.component;
+	return DefaultCell;
+}
+/**
+* Table Widget Component
+*
+* Displays a mini table of collection items.
+* Uses field definitions from admin config for labels and cell rendering.
+*/
+function TableWidget({ config, basePath = "/admin", navigate }) {
+	const resolveText = useResolveText();
+	const { collection, columns: rawColumns, limit = 5, sortBy, sortOrder = "desc", filter, linkToDetail, emptyMessage, realtime } = config;
+	const columns = rawColumns.map(normalizeColumn);
+	const fields = void 0;
+	const queryOptions = { limit };
+	if (sortBy) queryOptions.orderBy = { [sortBy]: sortOrder };
+	if (filter) queryOptions.where = filter;
+	const { data, isLoading, error, refetch } = useCollectionList(collection, queryOptions, void 0, { realtime });
+	const items = Array.isArray(data?.docs) ? data.docs : [];
+	const title = config.title ? resolveText(config.title) : void 0;
+	const handleRowClick = (item) => {
+		if (linkToDetail && navigate) navigate(`${basePath}/collections/${collection}/${item.id}`);
+	};
+	const renderCell = (item, column) => {
+		const value = item[column.key];
+		if (column.render) return column.render(value, item);
+		const fieldDef = fields?.[column.key];
+		const CellComponent = resolveCellComponent(fieldDef);
+		const fieldType = fieldDef?.name ?? "text";
+		return FIELD_TYPES_NEEDING_FIELD_DEF.has(fieldType) ? /* @__PURE__ */ jsx(CellComponent, {
+			value,
+			row: item,
+			fieldDef
+		}) : /* @__PURE__ */ jsx(CellComponent, {
+			value,
+			row: item
+		});
+	};
+	const emptyContent = /* @__PURE__ */ jsx("div", {
+		className: "flex h-24 items-center justify-center text-muted-foreground",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			children: emptyMessage ? resolveText(emptyMessage) : "No data available"
+		})
+	});
+	const tableContent = items.length === 0 ? emptyContent : /* @__PURE__ */ jsxs("div", {
+		className: "-mx-5 -mb-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2 px-5 py-2 border-b border-border/30 text-[10px] font-medium uppercase tracking-wider text-muted-foreground bg-muted/20 backdrop-blur-sm",
+			children: columns.map((column) => {
+				const fieldDef = fields?.[column.key];
+				const label = getColumnLabel(column, fieldDef);
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex-1 min-w-0", column.align === "center" && "text-center", column.align === "right" && "text-right"),
+					style: column.width ? {
+						width: column.width,
+						flex: "none"
+					} : void 0,
+					children: resolveText(label)
+				}, column.key);
+			})
+		}), items.map((item) => linkToDetail ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "flex w-full items-center gap-2 px-5 py-2.5 border-b border-border/20 last:border-0 transition-all cursor-pointer hover:bg-muted/30 hover:backdrop-blur-sm text-left",
+			onClick: () => handleRowClick(item),
+			children: columns.map((column) => /* @__PURE__ */ jsx("div", {
+				className: cn("flex-1 min-w-0 text-sm truncate", column.align === "center" && "text-center", column.align === "right" && "text-right"),
+				style: column.width ? {
+					width: column.width,
+					flex: "none"
+				} : void 0,
+				children: renderCell(item, column)
+			}, column.key))
+		}, item.id) : /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2 px-5 py-2.5 border-b border-border/20 last:border-0",
+			children: columns.map((column) => /* @__PURE__ */ jsx("div", {
+				className: cn("flex-1 min-w-0 text-sm truncate", column.align === "center" && "text-center", column.align === "right" && "text-right"),
+				style: column.width ? {
+					width: column.width,
+					flex: "none"
+				} : void 0,
+				children: renderCell(item, column)
+			}, column.key))
+		}, item.id))]
+	});
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(TableWidgetSkeleton, {
+			rows: limit,
+			columns: columns.length
+		}),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		children: tableContent
+	});
+}
+
+//#endregion
+export { TableWidget as default };
+//# sourceMappingURL=table-widget.mjs.map

package/dist/client/components/widgets/table-widget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-widget.mjs","names":["queryOptions: any"],"sources":["../../../../src/client/components/widgets/table-widget.tsx"],"sourcesContent":["/**\n * Table Widget\n *\n * Displays a mini table with collection data.\n * Automatically uses field definitions from collection config for:\n * - Column labels (from field.label)\n * - Cell rendering (from field.cell)\n *\n * Columns can be simple field keys or objects with overrides.\n */\n\nimport type * as React from \"react\";\nimport type { FieldDefinition } from \"../../builder/field/field\";\nimport type {\n  TableWidgetColumn,\n  TableWidgetColumnConfig,\n  TableWidgetConfig,\n} from \"../../builder/types/widget-types\";\nimport { useCollectionList } from \"../../hooks/use-collection\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport type { I18nText } from \"../../i18n/types\";\nimport { cn, formatLabel } from \"../../lib/utils\";\nimport { DefaultCell } from \"../../views/collection/cells/primitive-cells\";\nimport { WidgetCard } from \"../../views/dashboard/widget-card\";\nimport { TableWidgetSkeleton } from \"./widget-skeletons\";\n\n/**\n * Table widget props\n */\nexport interface TableWidgetProps {\n  config: TableWidgetConfig;\n  /** Base path for navigation */\n  basePath?: string;\n  /** Navigate function for row clicks */\n  navigate?: (path: string) => void;\n}\n\n/**\n * Field types that need fieldDef passed to their cell component\n */\nconst FIELD_TYPES_NEEDING_FIELD_DEF = new Set([\n  \"object\",\n  \"array\",\n  \"relation\",\n  \"reverseRelation\",\n]);\n\n/**\n * Normalize column config - converts string to object format\n */\nfunction normalizeColumn(column: TableWidgetColumn): TableWidgetColumnConfig {\n  if (typeof column === \"string\") {\n    return { key: column };\n  }\n  return column;\n}\n\n/**\n * Get column label from field definition or column config\n */\nfunction getColumnLabel(\n  column: TableWidgetColumnConfig,\n  fieldDef: FieldDefinition | undefined,\n): I18nText | string {\n  // Use override if provided\n  if (column.label) {\n    return column.label;\n  }\n  // Use field label if available\n  const fieldOptions = fieldDef?.[\"~options\"] as\n    | { label?: I18nText }\n    | undefined;\n  if (fieldOptions?.label) {\n    return fieldOptions.label;\n  }\n  // Fallback to formatted key\n  return formatLabel(column.key);\n}\n\n/**\n * Resolve cell component from field definition\n */\nfunction resolveCellComponent(\n  fieldDef: FieldDefinition | undefined,\n): React.ComponentType<{\n  value: unknown;\n  row?: unknown;\n  fieldDef?: FieldDefinition;\n}> {\n  if (fieldDef?.cell?.component) {\n    return fieldDef.cell.component as React.ComponentType<{\n      value: unknown;\n      row?: unknown;\n      fieldDef?: FieldDefinition;\n    }>;\n  }\n  return DefaultCell;\n}\n\n/**\n * Table Widget Component\n *\n * Displays a mini table of collection items.\n * Uses field definitions from admin config for labels and cell rendering.\n */\nexport default function TableWidget({\n  config,\n  basePath = \"/admin\",\n  navigate,\n}: TableWidgetProps) {\n  const resolveText = useResolveText();\n\n  const {\n    collection,\n    columns: rawColumns,\n    limit = 5,\n    sortBy,\n    sortOrder = \"desc\",\n    filter,\n    linkToDetail,\n    emptyMessage,\n    realtime,\n  } = config;\n\n  // Normalize columns (convert strings to objects)\n  const columns = rawColumns.map(normalizeColumn);\n\n  // Field definitions are not available from server config (schema-driven)\n  const fields = undefined as Record<string, FieldDefinition> | undefined;\n\n  // Build query options\n  const queryOptions: any = { limit };\n  if (sortBy) {\n    queryOptions.orderBy = { [sortBy]: sortOrder };\n  }\n  if (filter) {\n    queryOptions.where = filter;\n  }\n\n  // Fetch collection data\n  const { data, isLoading, error, refetch } = useCollectionList(\n    collection as any,\n    queryOptions,\n    undefined,\n    { realtime },\n  );\n\n  const items = Array.isArray(data?.docs) ? data.docs : [];\n  const title = config.title ? resolveText(config.title) : undefined;\n\n  // Handle row click\n  const handleRowClick = (item: any) => {\n    if (linkToDetail && navigate) {\n      navigate(`${basePath}/collections/${collection}/${item.id}`);\n    }\n  };\n\n  // Render cell value\n  const renderCell = (\n    item: any,\n    column: TableWidgetColumnConfig,\n  ): React.ReactNode => {\n    const value = item[column.key];\n\n    // Use custom renderer if provided in column config\n    if (column.render) {\n      return column.render(value, item);\n    }\n\n    // Get field definition and resolve cell component\n    const fieldDef = fields?.[column.key];\n    const CellComponent = resolveCellComponent(fieldDef);\n    const fieldType = fieldDef?.name ?? \"text\";\n    const needsFieldDef = FIELD_TYPES_NEEDING_FIELD_DEF.has(fieldType);\n\n    return needsFieldDef ? (\n      <CellComponent value={value} row={item} fieldDef={fieldDef} />\n    ) : (\n      <CellComponent value={value} row={item} />\n    );\n  };\n\n  // Empty state\n  const emptyContent = (\n    <div className=\"flex h-24 items-center justify-center text-muted-foreground\">\n      <p className=\"text-sm\">\n        {emptyMessage ? resolveText(emptyMessage) : \"No data available\"}\n      </p>\n    </div>\n  );\n\n  // Table content\n  const tableContent =\n    items.length === 0 ? (\n      emptyContent\n    ) : (\n      <div className=\"-mx-5 -mb-1\">\n        {/* Header */}\n        <div className=\"flex items-center gap-2 px-5 py-2 border-b border-border/30 text-[10px] font-medium uppercase tracking-wider text-muted-foreground bg-muted/20 backdrop-blur-sm\">\n          {columns.map((column) => {\n            const fieldDef = fields?.[column.key];\n            const label = getColumnLabel(column, fieldDef);\n\n            return (\n              <div\n                key={column.key}\n                className={cn(\n                  \"flex-1 min-w-0\",\n                  column.align === \"center\" && \"text-center\",\n                  column.align === \"right\" && \"text-right\",\n                )}\n                style={\n                  column.width\n                    ? { width: column.width, flex: \"none\" }\n                    : undefined\n                }\n              >\n                {resolveText(label)}\n              </div>\n            );\n          })}\n        </div>\n        {/* Rows */}\n        {items.map((item: any) =>\n          linkToDetail ? (\n            <button\n              key={item.id}\n              type=\"button\"\n              className=\"flex w-full items-center gap-2 px-5 py-2.5 border-b border-border/20 last:border-0 transition-all cursor-pointer hover:bg-muted/30 hover:backdrop-blur-sm text-left\"\n              onClick={() => handleRowClick(item)}\n            >\n              {columns.map((column) => (\n                <div\n                  key={column.key}\n                  className={cn(\n                    \"flex-1 min-w-0 text-sm truncate\",\n                    column.align === \"center\" && \"text-center\",\n                    column.align === \"right\" && \"text-right\",\n                  )}\n                  style={\n                    column.width\n                      ? { width: column.width, flex: \"none\" }\n                      : undefined\n                  }\n                >\n                  {renderCell(item, column)}\n                </div>\n              ))}\n            </button>\n          ) : (\n            <div\n              key={item.id}\n              className=\"flex items-center gap-2 px-5 py-2.5 border-b border-border/20 last:border-0\"\n            >\n              {columns.map((column) => (\n                <div\n                  key={column.key}\n                  className={cn(\n                    \"flex-1 min-w-0 text-sm truncate\",\n                    column.align === \"center\" && \"text-center\",\n                    column.align === \"right\" && \"text-right\",\n                  )}\n                  style={\n                    column.width\n                      ? { width: column.width, flex: \"none\" }\n                      : undefined\n                  }\n                >\n                  {renderCell(item, column)}\n                </div>\n              ))}\n            </div>\n          ),\n        )}\n      </div>\n    );\n\n  return (\n    <WidgetCard\n      title={title}\n      isLoading={isLoading}\n      loadingSkeleton={\n        <TableWidgetSkeleton rows={limit} columns={columns.length} />\n      }\n      error={\n        error instanceof Error ? error : error ? new Error(String(error)) : null\n      }\n      onRefresh={() => refetch()}\n    >\n      {tableContent}\n    </WidgetCard>\n  );\n}\n"],"mappings":"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"}

package/dist/client/components/widgets/timeline-widget.d.mts

@@ -0,0 +1,51 @@
+import { TimelineWidgetConfig } from "../../builder/types/widget-types.mjs";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
+
+//#region src/client/components/widgets/timeline-widget.d.ts
+declare namespace timeline_widget_d_exports {
+  export { TimelineWidgetProps, TimelineWidget as default };
+}
+/**
+ * Timeline widget props
+ */
+interface TimelineWidgetProps {
+  config: TimelineWidgetConfig;
+  /** Navigate function for item clicks */
+  navigate?: (path: string) => void;
+}
+/**
+ * Timeline Widget Component
+ *
+ * Displays a vertical timeline of events/activities.
+ *
+ * @example
+ * ```tsx
+ * <TimelineWidget
+ *   config={{
+ *     type: "timeline",
+ *     id: "recent-activity",
+ *     title: "Recent Activity",
+ *     fetchFn: 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"
+ *       }));
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+declare function TimelineWidget({
+  config,
+  navigate
+}: TimelineWidgetProps): react_jsx_runtime39.JSX.Element;
+//#endregion
+export { timeline_widget_d_exports };
+//# sourceMappingURL=timeline-widget.d.mts.map

package/dist/client/components/widgets/timeline-widget.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-widget.d.mts","names":[],"sources":["../../../../src/client/components/widgets/timeline-widget.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAyBA;AA8EwB,UA9EP,mBAAA,CA8EqB;EACrC,MAAA,EA9EQ,oBA8ER;EACA;EACE,QAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAHqB,cAAA;;;GAGrB,sBAAmB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,168 @@
+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 { 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",
+*     fetchFn: 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({ config, navigate }) {
+	const client = useAdminStore(selectClient);
+	const resolveText = useResolveText();
+	const { maxItems = 10, showTimestamps = true, timestampFormat = "relative", emptyMessage } = config;
+	const useServerData = !!config.hasFetchFn;
+	const serverQuery = useServerWidgetData(config.id, {
+		enabled: useServerData,
+		refreshInterval: config.refreshInterval
+	});
+	const clientQuery = useQuery({
+		queryKey: [
+			"widget",
+			"timeline",
+			config.id
+		],
+		queryFn: () => config.fetchFn(client),
+		enabled: !useServerData && !!config.fetchFn,
+		refetchInterval: config.refreshInterval
+	});
+	const { data, isLoading, error, refetch } = useServerData ? serverQuery : clientQuery;
+	const items = data?.slice(0, maxItems) ?? [];
+	const title = config.title ? resolveText(config.title) : void 0;
+	const handleItemClick = (item) => {
+		if (item.href && navigate) navigate(item.href);
+	};
+	const emptyContent = /* @__PURE__ */ jsx("div", {
+		className: "flex h-24 items-center justify-center text-muted-foreground",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			children: emptyMessage ? resolveText(emptyMessage) : "No activity yet"
+		})
+	});
+	const timelineContent = items.length === 0 ? emptyContent : /* @__PURE__ */ jsx("div", {
+		className: "space-y-0",
+		children: items.map((item, index) => {
+			const iconElement = resolveIconElement(item.icon, { className: "h-3 w-3 text-white" });
+			const variant = item.variant || "default";
+			const isLast = index === items.length - 1;
+			const isClickable = !!(item.href && navigate);
+			const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+				!isLast && /* @__PURE__ */ jsx("div", { className: "absolute left-[11px] top-6 bottom-0 w-px bg-border" }),
+				/* @__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: "flex-1 min-w-0 pt-0.5 text-left",
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium truncate",
+							children: item.title
+						}),
+						item.description && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground mt-0.5 line-clamp-2",
+							children: item.description
+						}),
+						showTimestamps && item.timestamp && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground mt-1",
+							children: formatTimestamp(item.timestamp, timestampFormat)
+						})
+					]
+				})
+			] });
+			if (isClickable) return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("relative flex gap-3 pb-4 w-full", "cursor-pointer hover:bg-muted/30 -mx-2 px-2 rounded-md transition-colors", isLast && "pb-0"),
+				onClick: () => handleItemClick(item),
+				children: itemContent
+			}, item.id);
+			return /* @__PURE__ */ jsx("div", {
+				className: cn("relative flex gap-3 pb-4", isLast && "pb-0"),
+				children: itemContent
+			}, item.id);
+		})
+	});
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(TimelineWidgetSkeleton, { count: maxItems }),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		children: timelineContent
+	});
+}
+
+//#endregion
+export { TimelineWidget as default };
+//# sourceMappingURL=timeline-widget.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-widget.mjs","names":["IconifyIcon"],"sources":["../../../../src/client/components/widgets/timeline-widget.tsx"],"sourcesContent":["/**\n * Timeline Widget\n *\n * Displays an activity/event timeline.\n * Uses WidgetCard for consistent styling.\n */\n\nimport { Icon as IconifyIcon } from \"@iconify/react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport type * as React from \"react\";\nimport type {\n\tTimelineItem,\n\tTimelineWidgetConfig,\n} from \"../../builder/types/widget-types\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport { useServerWidgetData } from \"../../hooks/use-server-widget-data\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { selectClient, useAdminStore } from \"../../runtime\";\nimport { WidgetCard } from \"../../views/dashboard/widget-card\";\nimport { TimelineWidgetSkeleton } from \"./widget-skeletons\";\n\n/**\n * Timeline widget props\n */\nexport interface TimelineWidgetProps {\n\tconfig: TimelineWidgetConfig;\n\t/** Navigate function for item clicks */\n\tnavigate?: (path: string) => void;\n}\n\n// Variant styles for timeline items\nconst variantStyles = {\n\tdefault: \"bg-muted-foreground\",\n\tsuccess: \"bg-success\",\n\twarning: \"bg-warning\",\n\terror: \"bg-destructive\",\n\tinfo: \"bg-info\",\n};\n\n/**\n * Format timestamp based on format option\n */\nfunction formatTimestamp(\n\tdate: Date | string,\n\tformat: TimelineWidgetConfig[\"timestampFormat\"] = \"relative\",\n): string {\n\tconst d = typeof date === \"string\" ? new Date(date) : date;\n\n\tswitch (format) {\n\t\tcase \"absolute\":\n\t\t\treturn d.toLocaleDateString();\n\n\t\tcase \"datetime\":\n\t\t\treturn d.toLocaleString();\n\n\t\tcase \"relative\":\n\t\tdefault: {\n\t\t\tconst now = new Date();\n\t\t\tconst diff = now.getTime() - d.getTime();\n\t\t\tconst seconds = Math.floor(diff / 1000);\n\t\t\tconst minutes = Math.floor(seconds / 60);\n\t\t\tconst hours = Math.floor(minutes / 60);\n\t\t\tconst days = Math.floor(hours / 24);\n\n\t\t\tif (days > 7) return d.toLocaleDateString();\n\t\t\tif (days > 0) return `${days}d ago`;\n\t\t\tif (hours > 0) return `${hours}h ago`;\n\t\t\tif (minutes > 0) return `${minutes}m ago`;\n\t\t\treturn \"just now\";\n\t\t}\n\t}\n}\n\n/**\n * Timeline Widget Component\n *\n * Displays a vertical timeline of events/activities.\n *\n * @example\n * ```tsx\n * <TimelineWidget\n *   config={{\n *     type: \"timeline\",\n *     id: \"recent-activity\",\n *     title: \"Recent Activity\",\n *     fetchFn: async (client) => {\n *       const activities = await client.collections.activities.findMany({\n *         limit: 10,\n *         orderBy: { createdAt: \"desc\" }\n *       });\n *       return activities.map(a => ({\n *         id: a.id,\n *         title: a.action,\n *         description: a.description,\n *         timestamp: a.createdAt,\n *         variant: a.type === \"error\" ? \"error\" : \"default\"\n *       }));\n *     }\n *   }}\n * />\n * ```\n */\nexport default function TimelineWidget({\n\tconfig,\n\tnavigate,\n}: TimelineWidgetProps) {\n\tconst client = useAdminStore(selectClient);\n\tconst resolveText = useResolveText();\n\tconst {\n\t\tmaxItems = 10,\n\t\tshowTimestamps = true,\n\t\ttimestampFormat = \"relative\",\n\t\temptyMessage,\n\t} = config;\n\n\tconst useServerData = !!config.hasFetchFn;\n\tconst serverQuery = useServerWidgetData<TimelineItem[]>(config.id, {\n\t\tenabled: useServerData,\n\t\trefreshInterval: config.refreshInterval,\n\t});\n\tconst clientQuery = useQuery<TimelineItem[]>({\n\t\tqueryKey: [\"widget\", \"timeline\", config.id],\n\t\tqueryFn: () => config.fetchFn!(client),\n\t\tenabled: !useServerData && !!config.fetchFn,\n\t\trefetchInterval: config.refreshInterval,\n\t});\n\tconst { data, isLoading, error, refetch } = useServerData\n\t\t? serverQuery\n\t\t: clientQuery;\n\n\tconst items = data?.slice(0, maxItems) ?? [];\n\tconst title = config.title ? resolveText(config.title) : undefined;\n\n\t// Handle item click\n\tconst handleItemClick = (item: TimelineItem) => {\n\t\tif (item.href && navigate) {\n\t\t\tnavigate(item.href);\n\t\t}\n\t};\n\n\t// Empty state\n\tconst emptyContent = (\n\t\t<div className=\"flex h-24 items-center justify-center text-muted-foreground\">\n\t\t\t<p className=\"text-sm\">\n\t\t\t\t{emptyMessage ? resolveText(emptyMessage) : \"No activity yet\"}\n\t\t\t</p>\n\t\t</div>\n\t);\n\n\t// Timeline content\n\tconst timelineContent =\n\t\titems.length === 0 ? (\n\t\t\temptyContent\n\t\t) : (\n\t\t\t<div className=\"space-y-0\">\n\t\t\t\t{items.map((item, index) => {\n\t\t\t\t\tconst iconElement = resolveIconElement(item.icon, {\n\t\t\t\t\t\tclassName: \"h-3 w-3 text-white\",\n\t\t\t\t\t});\n\t\t\t\t\tconst variant = item.variant || \"default\";\n\t\t\t\t\tconst isLast = index === items.length - 1;\n\t\t\t\t\tconst isClickable = !!(item.href && navigate);\n\n\t\t\t\t\tconst itemContent = (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* Timeline line */}\n\t\t\t\t\t\t\t{!isLast && (\n\t\t\t\t\t\t\t\t<div className=\"absolute left-[11px] top-6 bottom-0 w-px bg-border\" />\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{/* Icon dot */}\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"relative z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full\",\n\t\t\t\t\t\t\t\t\tvariantStyles[variant],\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{iconElement ?? (\n\t\t\t\t\t\t\t\t\t<IconifyIcon\n\t\t\t\t\t\t\t\t\t\ticon=\"ph:circle-bold\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"h-3 w-3 text-white\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t{/* Content */}\n\t\t\t\t\t\t\t<div className=\"flex-1 min-w-0 pt-0.5 text-left\">\n\t\t\t\t\t\t\t\t<p className=\"text-sm font-medium truncate\">{item.title}</p>\n\t\t\t\t\t\t\t\t{item.description && (\n\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground mt-0.5 line-clamp-2\">\n\t\t\t\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{showTimestamps && item.timestamp && (\n\t\t\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground mt-1\">\n\t\t\t\t\t\t\t\t\t\t{formatTimestamp(item.timestamp, timestampFormat)}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\n\t\t\t\t\tif (isClickable) {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"relative flex gap-3 pb-4 w-full\",\n\t\t\t\t\t\t\t\t\t\"cursor-pointer hover:bg-muted/30 -mx-2 px-2 rounded-md transition-colors\",\n\t\t\t\t\t\t\t\t\tisLast && \"pb-0\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tonClick={() => handleItemClick(item)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{itemContent}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\tclassName={cn(\"relative flex gap-3 pb-4\", isLast && \"pb-0\")}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{itemContent}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\n\treturn (\n\t\t<WidgetCard\n\t\t\ttitle={title}\n\t\t\tisLoading={isLoading}\n\t\t\tloadingSkeleton={<TimelineWidgetSkeleton count={maxItems} />}\n\t\t\terror={\n\t\t\t\terror instanceof Error ? error : error ? new Error(String(error)) : null\n\t\t\t}\n\t\t\tonRefresh={() => refetch()}\n\t\t>\n\t\t\t{timelineContent}\n\t\t</WidgetCard>\n\t);\n}\n"],"mappings":"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"}

package/dist/client/components/widgets/value-widget.d.mts

@@ -0,0 +1,39 @@
+import { ValueWidgetConfig } from "../../builder/types/widget-types.mjs";
+import * as react_jsx_runtime33 from "react/jsx-runtime";
+
+//#region src/client/components/widgets/value-widget.d.ts
+declare namespace value_widget_d_exports {
+  export { ValueWidgetProps, ValueWidget as default };
+}
+/**
+ * Value widget props
+ */
+interface ValueWidgetProps {
+  config: ValueWidgetConfig;
+}
+/**
+ * Value Widget Component
+ *
+ * Fetches data via async function and renders with full customization.
+ *
+ * @example
+ * ```tsx
+ * <ValueWidget
+ *   config={{
+ *     type: "value",
+ *     id: "total-revenue",
+ *     fetchFn: async (client) => ({
+ *       value: 42,
+ *       label: "Total",
+ *       classNames: { root: "bg-blue-50" },
+ *     }),
+ *   }}
+ * />
+ * ```
+ */
+declare function ValueWidget({
+  config
+}: ValueWidgetProps): react_jsx_runtime33.JSX.Element;
+//#endregion
+export { value_widget_d_exports };
+//# sourceMappingURL=value-widget.d.mts.map