@questpie/admin 1.1.0 → 2.0.0

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

@@ -0,0 +1,110 @@
+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 { 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",
+*     fetchFn: async (client) => ({
+*       current: 75000,
+*       target: 100000,
+*       label: "$75,000 / $100,000"
+*     }),
+*     showPercentage: true,
+*   }}
+* />
+* ```
+*/
+function ProgressWidget({ config }) {
+	const client = useAdminStore(selectClient);
+	const resolveText = useResolveText();
+	const { color, showPercentage = true } = config;
+	const useServerData = !!config.hasFetchFn;
+	const serverQuery = useServerWidgetData(config.id, {
+		enabled: useServerData,
+		refreshInterval: config.refreshInterval
+	});
+	const clientQuery = useQuery({
+		queryKey: [
+			"widget",
+			"progress",
+			config.id
+		],
+		queryFn: () => config.fetchFn(client),
+		enabled: !useServerData && !!config.fetchFn,
+		refetchInterval: config.refreshInterval
+	});
+	const { data, isLoading, error, refetch } = useServerData ? serverQuery : clientQuery;
+	const title = config.title ? resolveText(config.title) : void 0;
+	const percentage = data ? Math.min(data.current / data.target * 100, 100) : 0;
+	const percentageFormatted = percentage.toFixed(0);
+	const getProgressColor = () => {
+		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";
+	};
+	const progressContent = data ? /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "relative",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "h-2 w-full overflow-hidden rounded-full bg-muted",
+					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-xs text-muted-foreground",
+				children: data.subtitle
+			})
+		]
+	}) : null;
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(ProgressWidgetSkeleton, {}),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		children: progressContent
+	});
+}
+
+//#endregion
+export { ProgressWidget as default };
+//# sourceMappingURL=progress-widget.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-widget.mjs","names":[],"sources":["../../../../src/client/components/widgets/progress-widget.tsx"],"sourcesContent":["/**\n * Progress Widget\n *\n * Displays progress towards a goal.\n * Uses WidgetCard for consistent styling.\n */\n\nimport { useQuery } from \"@tanstack/react-query\";\nimport type { ProgressWidgetConfig } from \"../../builder/types/widget-types\";\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 { ProgressWidgetSkeleton } from \"./widget-skeletons\";\n\n/**\n * Progress widget props\n */\nexport interface ProgressWidgetProps {\n\tconfig: ProgressWidgetConfig;\n}\n\n/**\n * Progress Widget Component\n *\n * Displays a progress bar with current/target values.\n *\n * @example\n * ```tsx\n * <ProgressWidget\n *   config={{\n *     type: \"progress\",\n *     id: \"monthly-sales\",\n *     title: \"Monthly Sales Goal\",\n *     fetchFn: async (client) => ({\n *       current: 75000,\n *       target: 100000,\n *       label: \"$75,000 / $100,000\"\n *     }),\n *     showPercentage: true,\n *   }}\n * />\n * ```\n */\nexport default function ProgressWidget({ config }: ProgressWidgetProps) {\n\tconst client = useAdminStore(selectClient);\n\tconst resolveText = useResolveText();\n\tconst { color, showPercentage = true } = config;\n\n\ttype ProgressData = {\n\t\tcurrent: number;\n\t\ttarget: number;\n\t\tlabel?: string;\n\t\tsubtitle?: string;\n\t};\n\tconst useServerData = !!config.hasFetchFn;\n\tconst serverQuery = useServerWidgetData<ProgressData>(config.id, {\n\t\tenabled: useServerData,\n\t\trefreshInterval: config.refreshInterval,\n\t});\n\tconst clientQuery = useQuery<ProgressData>({\n\t\tqueryKey: [\"widget\", \"progress\", 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 title = config.title ? resolveText(config.title) : undefined;\n\n\t// Calculate percentage\n\tconst percentage = data\n\t\t? Math.min((data.current / data.target) * 100, 100)\n\t\t: 0;\n\tconst percentageFormatted = percentage.toFixed(0);\n\n\t// Determine color based on progress\n\tconst getProgressColor = () => {\n\t\tif (color) return color;\n\t\tif (percentage >= 100) return \"bg-success\";\n\t\tif (percentage >= 75) return \"bg-primary\";\n\t\tif (percentage >= 50) return \"bg-warning\";\n\t\treturn \"bg-muted-foreground\";\n\t};\n\n\t// Progress content\n\tconst progressContent = data ? (\n\t\t<div className=\"space-y-3\">\n\t\t\t{/* Progress bar */}\n\t\t\t<div className=\"relative\">\n\t\t\t\t<div className=\"h-2 w-full overflow-hidden rounded-full bg-muted\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"h-full rounded-full transition-all duration-500\",\n\t\t\t\t\t\t\tgetProgressColor(),\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{ width: `${percentage}%` }}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Labels */}\n\t\t\t<div className=\"flex items-center justify-between text-sm\">\n\t\t\t\t<span className=\"text-muted-foreground\">\n\t\t\t\t\t{data.label ||\n\t\t\t\t\t\t`${data.current.toLocaleString()} / ${data.target.toLocaleString()}`}\n\t\t\t\t</span>\n\t\t\t\t{showPercentage && (\n\t\t\t\t\t<span className=\"font-medium\">{percentageFormatted}%</span>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* Subtitle */}\n\t\t\t{data.subtitle && (\n\t\t\t\t<p className=\"text-xs text-muted-foreground\">{data.subtitle}</p>\n\t\t\t)}\n\t\t</div>\n\t) : null;\n\n\treturn (\n\t\t<WidgetCard\n\t\t\ttitle={title}\n\t\t\tisLoading={isLoading}\n\t\t\tloadingSkeleton={<ProgressWidgetSkeleton />}\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{progressContent}\n\t\t</WidgetCard>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAwB,eAAe,EAAE,UAA+B;CACvE,MAAM,SAAS,cAAc,aAAa;CAC1C,MAAM,cAAc,gBAAgB;CACpC,MAAM,EAAE,OAAO,iBAAiB,SAAS;CAQzC,MAAM,gBAAgB,CAAC,CAAC,OAAO;CAC/B,MAAM,cAAc,oBAAkC,OAAO,IAAI;EAChE,SAAS;EACT,iBAAiB,OAAO;EACxB,CAAC;CACF,MAAM,cAAc,SAAuB;EAC1C,UAAU;GAAC;GAAU;GAAY,OAAO;GAAG;EAC3C,eAAe,OAAO,QAAS,OAAO;EACtC,SAAS,CAAC,iBAAiB,CAAC,CAAC,OAAO;EACpC,iBAAiB,OAAO;EACxB,CAAC;CACF,MAAM,EAAE,MAAM,WAAW,OAAO,YAAY,gBACzC,cACA;CAEH,MAAM,QAAQ,OAAO,QAAQ,YAAY,OAAO,MAAM,GAAG;CAGzD,MAAM,aAAa,OAChB,KAAK,IAAK,KAAK,UAAU,KAAK,SAAU,KAAK,IAAI,GACjD;CACH,MAAM,sBAAsB,WAAW,QAAQ,EAAE;CAGjD,MAAM,yBAAyB;AAC9B,MAAI,MAAO,QAAO;AAClB,MAAI,cAAc,IAAK,QAAO;AAC9B,MAAI,cAAc,GAAI,QAAO;AAC7B,MAAI,cAAc,GAAI,QAAO;AAC7B,SAAO;;CAIR,MAAM,kBAAkB,OACvB,qBAAC;EAAI,WAAU;;GAEd,oBAAC;IAAI,WAAU;cACd,oBAAC;KAAI,WAAU;eACd,oBAAC;MACA,WAAW,GACV,mDACA,kBAAkB,CAClB;MACD,OAAO,EAAE,OAAO,GAAG,WAAW,IAAI;OACjC;MACG;KACD;GAGN,qBAAC;IAAI,WAAU;eACd,oBAAC;KAAK,WAAU;eACd,KAAK,SACL,GAAG,KAAK,QAAQ,gBAAgB,CAAC,KAAK,KAAK,OAAO,gBAAgB;MAC7D,EACN,kBACA,qBAAC;KAAK,WAAU;gBAAe,qBAAoB;MAAQ;KAEvD;GAGL,KAAK,YACL,oBAAC;IAAE,WAAU;cAAiC,KAAK;KAAa;;GAE5D,GACH;AAEJ,QACC,oBAAC;EACO;EACI;EACX,iBAAiB,oBAAC,2BAAyB;EAC3C,OACC,iBAAiB,QAAQ,QAAQ,QAAQ,IAAI,MAAM,OAAO,MAAM,CAAC,GAAG;EAErE,iBAAiB,SAAS;YAEzB;GACW"}

package/dist/client/components/widgets/quick-actions-widget.d.mts

@@ -0,0 +1,29 @@
+import { QuickActionsWidgetConfig } from "../../builder/types/widget-types.mjs";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
+
+//#region src/client/components/widgets/quick-actions-widget.d.ts
+declare namespace quick_actions_widget_d_exports {
+  export { QuickActionsWidgetProps, QuickActionsWidget as default };
+}
+/**
+ * Quick actions widget props
+ */
+interface QuickActionsWidgetProps {
+  config: QuickActionsWidgetConfig;
+  basePath?: string;
+  navigate?: (path: string) => void;
+}
+/**
+ * Quick actions widget component
+ *
+ * Displays a list of action items with icons, matching the style
+ * of other dashboard widgets like recent-items.
+ */
+declare function QuickActionsWidget({
+  config,
+  basePath,
+  navigate
+}: QuickActionsWidgetProps): react_jsx_runtime35.JSX.Element;
+//#endregion
+export { quick_actions_widget_d_exports };
+//# sourceMappingURL=quick-actions-widget.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quick-actions-widget.d.mts","names":[],"sources":["../../../../src/client/components/widgets/quick-actions-widget.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAkBA;AAYwB,UAZP,uBAAA,CAYyB;EACxC,MAAA,EAZQ,wBAYR;EACA,QAAA,CAAA,EAAA,MAAA;EACA,QAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;;;;;;;;iBAHsB,kBAAA;;;;GAIrB,0BAAuB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,121 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn, formatCollectionName } from "../../lib/utils.mjs";
+import { resolveIconElement } from "../component-renderer.mjs";
+import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
+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({ config, basePath = "/admin", navigate }) {
+	const resolveText = useResolveText();
+	const { quickActions, layout = "list" } = config;
+	const title = config.title ? resolveText(config.title) : "Quick Actions";
+	const parsedActions = quickActions.map((action, index) => {
+		if (typeof action === "string") {
+			const [collection, actionType] = action.split(".");
+			return {
+				id: `${action}-${index}`,
+				label: `${actionType === "create" ? "New" : actionType} ${formatCollectionName(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"
+		};
+	});
+	const handleClick = (action) => {
+		if (action.onClick) action.onClick();
+		else if (action.href && navigate) navigate(action.href);
+	};
+	const variantStyles = {
+		default: "hover:bg-muted/50 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/50 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) return /* @__PURE__ */ jsx(WidgetCard, {
+		title,
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: "No actions configured"
+		})
+	});
+	if (layout === "grid") return /* @__PURE__ */ jsx(WidgetCard, {
+		title,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-2 gap-2",
+			children: parsedActions.map((action) => {
+				const iconElement = resolveIconElement(action.icon, { className: "h-4 w-4" });
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => handleClick(action),
+					className: cn("flex flex-col items-center justify-center gap-2 rounded-md p-3 text-center transition-colors", variantStyles[action.variant]),
+					children: [iconElement && /* @__PURE__ */ jsx("div", {
+						className: cn("flex h-9 w-9 items-center justify-center rounded-md", iconVariantStyles[action.variant]),
+						children: iconElement
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-xs font-medium",
+						children: action.label
+					})]
+				}, action.id);
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "space-y-1 -mx-1",
+			children: parsedActions.map((action) => {
+				const iconElement = resolveIconElement(action.icon, { className: "h-4 w-4" });
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => handleClick(action),
+					className: cn("flex w-full items-center gap-3 rounded-md px-2 py-2 text-left transition-colors", variantStyles[action.variant]),
+					children: [
+						iconElement && /* @__PURE__ */ jsx("div", {
+							className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-md", iconVariantStyles[action.variant]),
+							children: iconElement
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 text-sm font-medium truncate",
+							children: action.label
+						}),
+						/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:arrow-right",
+							className: "h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+						})
+					]
+				}, action.id);
+			})
+		})
+	});
+}
+
+//#endregion
+export { QuickActionsWidget as default };
+//# sourceMappingURL=quick-actions-widget.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quick-actions-widget.mjs","names":[],"sources":["../../../../src/client/components/widgets/quick-actions-widget.tsx"],"sourcesContent":["/**\n * Quick Actions Widget\n *\n * Displays shortcuts to common actions with icons and proper styling.\n * Uses WidgetCard for consistent styling.\n */\n\nimport { Icon } from \"@iconify/react\";\nimport type * as React from \"react\";\nimport type { QuickActionsWidgetConfig } from \"../../builder/types/widget-types\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn, formatCollectionName } from \"../../lib/utils\";\nimport { WidgetCard } from \"../../views/dashboard/widget-card\";\n\n/**\n * Quick actions widget props\n */\nexport interface QuickActionsWidgetProps {\n  config: QuickActionsWidgetConfig;\n  basePath?: string;\n  navigate?: (path: string) => void;\n}\n\n/**\n * Quick actions widget component\n *\n * Displays a list of action items with icons, matching the style\n * of other dashboard widgets like recent-items.\n */\nexport default function QuickActionsWidget({\n  config,\n  basePath = \"/admin\",\n  navigate,\n}: QuickActionsWidgetProps) {\n  const resolveText = useResolveText();\n  const { quickActions, layout = \"list\" } = config;\n  const title = config.title ? resolveText(config.title) : \"Quick Actions\";\n\n  // Parse actions - handle both string shortcuts and full config objects\n  const parsedActions = quickActions.map((action, index) => {\n    if (typeof action === \"string\") {\n      // Format: \"collection.action\" e.g., \"posts.create\"\n      const [collection, actionType] = action.split(\".\");\n      return {\n        id: `${action}-${index}`,\n        label: `${actionType === \"create\" ? \"New\" : actionType} ${formatCollectionName(collection)}`,\n        href: `${basePath}/collections/${collection}/${actionType === \"create\" ? \"create\" : \"\"}`,\n        icon: undefined,\n        variant: \"default\" as const,\n      };\n    }\n    return {\n      id: `action-${index}`,\n      label: resolveText(action.label),\n      href: action.href,\n      onClick: action.onClick,\n      icon: action.icon,\n      variant: action.variant || (\"default\" as const),\n    };\n  });\n\n  // Handle action click\n  const handleClick = (action: (typeof parsedActions)[0]) => {\n    if (action.onClick) {\n      action.onClick();\n    } else if (action.href && navigate) {\n      navigate(action.href);\n    }\n  };\n\n  // Variant styles for the action items\n  const variantStyles = {\n    default: \"hover:bg-muted/50 cursor-pointer\",\n    primary:\n      \"bg-primary/5 hover:bg-primary/10 border-primary/20 text-primary [&_svg]:text-primary cursor-pointer\",\n    secondary: \"hover:bg-secondary cursor-pointer\",\n    outline: \"border border-border hover:bg-muted/50 cursor-pointer\",\n  };\n\n  const iconVariantStyles = {\n    default: \"bg-muted text-muted-foreground\",\n    primary: \"bg-primary/10 text-primary\",\n    secondary: \"bg-secondary text-secondary-foreground\",\n    outline: \"bg-background text-muted-foreground\",\n  };\n\n  // Empty state\n  if (parsedActions.length === 0) {\n    return (\n      <WidgetCard title={title}>\n        <p className=\"text-sm text-muted-foreground\">No actions configured</p>\n      </WidgetCard>\n    );\n  }\n\n  // Grid layout\n  if (layout === \"grid\") {\n    return (\n      <WidgetCard title={title}>\n        <div className=\"grid grid-cols-2 gap-2\">\n          {parsedActions.map((action) => {\n            const iconElement = resolveIconElement(action.icon, {\n              className: \"h-4 w-4\",\n            });\n\n            return (\n              <button\n                key={action.id}\n                type=\"button\"\n                onClick={() => handleClick(action)}\n                className={cn(\n                  \"flex flex-col items-center justify-center gap-2 rounded-md p-3 text-center transition-colors\",\n                  variantStyles[action.variant],\n                )}\n              >\n                {iconElement && (\n                  <div\n                    className={cn(\n                      \"flex h-9 w-9 items-center justify-center rounded-md\",\n                      iconVariantStyles[action.variant],\n                    )}\n                  >\n                    {iconElement}\n                  </div>\n                )}\n                <span className=\"text-xs font-medium\">{action.label}</span>\n              </button>\n            );\n          })}\n        </div>\n      </WidgetCard>\n    );\n  }\n\n  // List layout (default) - matches recent-items style\n  return (\n    <WidgetCard title={title}>\n      <div className=\"space-y-1 -mx-1\">\n        {parsedActions.map((action) => {\n          const iconElement = resolveIconElement(action.icon, {\n            className: \"h-4 w-4\",\n          });\n\n          return (\n            <button\n              key={action.id}\n              type=\"button\"\n              onClick={() => handleClick(action)}\n              className={cn(\n                \"flex w-full items-center gap-3 rounded-md px-2 py-2 text-left transition-colors\",\n                variantStyles[action.variant],\n              )}\n            >\n              {iconElement && (\n                <div\n                  className={cn(\n                    \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md\",\n                    iconVariantStyles[action.variant],\n                  )}\n                >\n                  {iconElement}\n                </div>\n              )}\n              <span className=\"flex-1 text-sm font-medium truncate\">\n                {action.label}\n              </span>\n              <Icon\n                icon=\"ph:arrow-right\"\n                className=\"h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\"\n              />\n            </button>\n          );\n        })}\n      </div>\n    </WidgetCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA,SAAwB,mBAAmB,EACzC,QACA,WAAW,UACX,YAC0B;CAC1B,MAAM,cAAc,gBAAgB;CACpC,MAAM,EAAE,cAAc,SAAS,WAAW;CAC1C,MAAM,QAAQ,OAAO,QAAQ,YAAY,OAAO,MAAM,GAAG;CAGzD,MAAM,gBAAgB,aAAa,KAAK,QAAQ,UAAU;AACxD,MAAI,OAAO,WAAW,UAAU;GAE9B,MAAM,CAAC,YAAY,cAAc,OAAO,MAAM,IAAI;AAClD,UAAO;IACL,IAAI,GAAG,OAAO,GAAG;IACjB,OAAO,GAAG,eAAe,WAAW,QAAQ,WAAW,GAAG,qBAAqB,WAAW;IAC1F,MAAM,GAAG,SAAS,eAAe,WAAW,GAAG,eAAe,WAAW,WAAW;IACpF,MAAM;IACN,SAAS;IACV;;AAEH,SAAO;GACL,IAAI,UAAU;GACd,OAAO,YAAY,OAAO,MAAM;GAChC,MAAM,OAAO;GACb,SAAS,OAAO;GAChB,MAAM,OAAO;GACb,SAAS,OAAO,WAAY;GAC7B;GACD;CAGF,MAAM,eAAe,WAAsC;AACzD,MAAI,OAAO,QACT,QAAO,SAAS;WACP,OAAO,QAAQ,SACxB,UAAS,OAAO,KAAK;;CAKzB,MAAM,gBAAgB;EACpB,SAAS;EACT,SACE;EACF,WAAW;EACX,SAAS;EACV;CAED,MAAM,oBAAoB;EACxB,SAAS;EACT,SAAS;EACT,WAAW;EACX,SAAS;EACV;AAGD,KAAI,cAAc,WAAW,EAC3B,QACE,oBAAC;EAAkB;YACjB,oBAAC;GAAE,WAAU;aAAgC;IAAyB;GAC3D;AAKjB,KAAI,WAAW,OACb,QACE,oBAAC;EAAkB;YACjB,oBAAC;GAAI,WAAU;aACZ,cAAc,KAAK,WAAW;IAC7B,MAAM,cAAc,mBAAmB,OAAO,MAAM,EAClD,WAAW,WACZ,CAAC;AAEF,WACE,qBAAC;KAEC,MAAK;KACL,eAAe,YAAY,OAAO;KAClC,WAAW,GACT,gGACA,cAAc,OAAO,SACtB;gBAEA,eACC,oBAAC;MACC,WAAW,GACT,uDACA,kBAAkB,OAAO,SAC1B;gBAEA;OACG,EAER,oBAAC;MAAK,WAAU;gBAAuB,OAAO;OAAa;OAlBtD,OAAO,GAmBL;KAEX;IACE;GACK;AAKjB,QACE,oBAAC;EAAkB;YACjB,oBAAC;GAAI,WAAU;aACZ,cAAc,KAAK,WAAW;IAC7B,MAAM,cAAc,mBAAmB,OAAO,MAAM,EAClD,WAAW,WACZ,CAAC;AAEF,WACE,qBAAC;KAEC,MAAK;KACL,eAAe,YAAY,OAAO;KAClC,WAAW,GACT,mFACA,cAAc,OAAO,SACtB;;MAEA,eACC,oBAAC;OACC,WAAW,GACT,gEACA,kBAAkB,OAAO,SAC1B;iBAEA;QACG;MAER,oBAAC;OAAK,WAAU;iBACb,OAAO;QACH;MACP,oBAAC;OACC,MAAK;OACL,WAAU;QACV;;OAxBG,OAAO,GAyBL;KAEX;IACE;GACK"}

package/dist/client/components/widgets/recent-items-widget.d.mts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime40 from "react/jsx-runtime";
+
+//#region src/client/components/widgets/recent-items-widget.d.ts
+declare namespace recent_items_widget_d_exports {
+  export { RecentItemsWidgetConfig, RecentItemsWidgetProps, RecentItemsWidget as default };
+}
+/**
+ * Recent Items Widget
+ *
+ * Displays latest items from a collection.
+ * Uses WidgetCard for consistent styling.
+ */
+/**
+ * Recent items widget config (local type for component props)
+ */
+type RecentItemsWidgetConfig = {
+  collection: string;
+  limit?: number;
+  /** Field to use as title (default: "_title") */
+  titleField?: string;
+  /** Field to use for date (default: "createdAt") */
+  dateField?: string;
+  /** Fields to display as subtitle */
+  subtitleFields?: string[];
+  label?: string;
+  realtime?: boolean;
+  /** Base path for item links */
+  basePath?: string;
+  /** Click handler for items */
+  onItemClick?: (item: any) => void;
+};
+/**
+ * Recent items widget props
+ */
+type RecentItemsWidgetProps = {
+  config: RecentItemsWidgetConfig;
+};
+/**
+ * Recent items widget component
+ *
+ * Displays:
+ * - List of most recently created/updated items
+ * - Configurable number of items
+ * - Links to edit each item
+ */
+declare function RecentItemsWidget({
+  config
+}: RecentItemsWidgetProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+export { recent_items_widget_d_exports };
+//# sourceMappingURL=recent-items-widget.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"recent-items-widget.d.mts","names":[],"sources":["../../../../src/client/components/widgets/recent-items-widget.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;AAgBY,KAAA,uBAAA,GAAuB;EAoBvB,UAAA,EAAA,MAAA;EAYY,KAAA,CAAA,EAAA,MAAA;EAAoB;EAAU,UAAA,CAAA,EAAA,MAAA;EAAsB;EAAA,SAAA,CAAA,EAAA,MAAA;;;;;;;;;;;;;KAZhE,sBAAA;UACF;;;;;;;;;;iBAWc,iBAAA;;GAA8B,yBAAsB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,101 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { formatCollectionName } 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 { 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({ config }) {
+	const resolveText = useResolveText();
+	const { collection, limit = 5, label, titleField = "_title", dateField = "createdAt", subtitleFields, onItemClick, realtime } = config;
+	const { data, isLoading, error, refetch } = useCollectionList(collection, {
+		orderBy: { [dateField]: "desc" },
+		limit
+	}, void 0, { realtime });
+	const items = Array.isArray(data?.docs) ? data.docs : [];
+	const displayLabel = label ? resolveText(label) : `Recent ${formatCollectionName(collection)}`;
+	const getTitleValue = (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}`;
+	};
+	const getSubtitle = (item) => {
+		if (!subtitleFields?.length) return null;
+		return subtitleFields.map((field) => item[field]).filter(Boolean).join(" - ");
+	};
+	const handleItemClick = (item) => {
+		if (onItemClick) onItemClick(item);
+	};
+	const listContent = items.length === 0 ? /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-muted-foreground",
+		children: "No items yet"
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "space-y-1",
+		children: items.map((item) => {
+			const dateValue = item[dateField];
+			const subtitle = getSubtitle(item);
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => handleItemClick(item),
+				className: "flex w-full items-center gap-3 rounded-md p-2 hover:bg-muted/50 cursor-pointer transition-colors text-left",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex-1 min-w-0",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium truncate",
+						children: getTitleValue(item)
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 text-xs text-muted-foreground",
+						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.id);
+		})
+	});
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: displayLabel,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(RecentItemsWidgetSkeleton, { count: limit }),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		children: listContent
+	});
+}
+/**
+* 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 };
+//# sourceMappingURL=recent-items-widget.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"recent-items-widget.mjs","names":[],"sources":["../../../../src/client/components/widgets/recent-items-widget.tsx"],"sourcesContent":["/**\n * Recent Items Widget\n *\n * Displays latest items from a collection.\n * Uses WidgetCard for consistent styling.\n */\n\nimport { useCollectionList } from \"../../hooks/use-collection\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { formatCollectionName } from \"../../lib/utils\";\nimport { WidgetCard } from \"../../views/dashboard/widget-card\";\nimport { RecentItemsWidgetSkeleton } from \"./widget-skeletons\";\n\n/**\n * Recent items widget config (local type for component props)\n */\nexport type RecentItemsWidgetConfig = {\n  collection: string;\n  limit?: number;\n  /** Field to use as title (default: \"_title\") */\n  titleField?: string;\n  /** Field to use for date (default: \"createdAt\") */\n  dateField?: string;\n  /** Fields to display as subtitle */\n  subtitleFields?: string[];\n  label?: string;\n  realtime?: boolean;\n  /** Base path for item links */\n  basePath?: string;\n  /** Click handler for items */\n  onItemClick?: (item: any) => void;\n};\n\n/**\n * Recent items widget props\n */\nexport type RecentItemsWidgetProps = {\n  config: RecentItemsWidgetConfig;\n};\n\n/**\n * Recent items widget component\n *\n * Displays:\n * - List of most recently created/updated items\n * - Configurable number of items\n * - Links to edit each item\n */\nexport default function RecentItemsWidget({ config }: RecentItemsWidgetProps) {\n  const resolveText = useResolveText();\n  const {\n    collection,\n    limit = 5,\n    label,\n    titleField = \"_title\",\n    dateField = \"createdAt\",\n    subtitleFields,\n    onItemClick,\n    realtime,\n  } = config;\n\n  // Fetch recent items sorted by date\n  const { data, isLoading, error, refetch } = useCollectionList(\n    collection as any,\n    {\n      orderBy: { [dateField]: \"desc\" },\n      limit,\n    } as any,\n    undefined,\n    { realtime },\n  );\n\n  // API returns PaginatedResult with { docs, totalDocs, ... }\n  const items = Array.isArray(data?.docs) ? data.docs : [];\n  const displayLabel = label\n    ? resolveText(label)\n    : `Recent ${formatCollectionName(collection)}`;\n\n  // Determine title field - prefer _title computed field from backend\n  const getTitleValue = (item: any): string => {\n    if (titleField && item[titleField]) return String(item[titleField]);\n    if (item._title) return String(item._title);\n    if (item.name) return String(item.name);\n    if (item.title) return String(item.title);\n    if (item.label) return String(item.label);\n    return `Item #${item.id}`;\n  };\n\n  // Get subtitle from fields\n  const getSubtitle = (item: any): string | null => {\n    if (!subtitleFields?.length) return null;\n    return subtitleFields\n      .map((field) => item[field])\n      .filter(Boolean)\n      .join(\" - \");\n  };\n\n  // Handle item click\n  const handleItemClick = (item: any) => {\n    if (onItemClick) {\n      onItemClick(item);\n    }\n  };\n\n  // List content\n  const listContent =\n    items.length === 0 ? (\n      <p className=\"text-sm text-muted-foreground\">No items yet</p>\n    ) : (\n      <div className=\"space-y-1\">\n        {items.map((item: any) => {\n          const dateValue = item[dateField];\n          const subtitle = getSubtitle(item);\n\n          return (\n            <button\n              type=\"button\"\n              key={item.id}\n              onClick={() => handleItemClick(item)}\n              className=\"flex w-full items-center gap-3 rounded-md p-2 hover:bg-muted/50 cursor-pointer transition-colors text-left\"\n            >\n              <div className=\"flex-1 min-w-0\">\n                <p className=\"text-sm font-medium truncate\">\n                  {getTitleValue(item)}\n                </p>\n                <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                  {dateValue && (\n                    <span>{formatRelativeTime(new Date(dateValue))}</span>\n                  )}\n                  {subtitle && (\n                    <>\n                      <span>-</span>\n                      <span className=\"truncate\">{subtitle}</span>\n                    </>\n                  )}\n                </div>\n              </div>\n            </button>\n          );\n        })}\n      </div>\n    );\n\n  return (\n    <WidgetCard\n      title={displayLabel}\n      isLoading={isLoading}\n      loadingSkeleton={<RecentItemsWidgetSkeleton count={limit} />}\n      error={\n        error instanceof Error ? error : error ? new Error(String(error)) : null\n      }\n      onRefresh={() => refetch()}\n    >\n      {listContent}\n    </WidgetCard>\n  );\n}\n\n/**\n * Format relative time\n */\nfunction formatRelativeTime(date: Date): string {\n  const now = new Date();\n  const diff = now.getTime() - date.getTime();\n  const seconds = Math.floor(diff / 1000);\n  const minutes = Math.floor(seconds / 60);\n  const hours = Math.floor(minutes / 60);\n  const days = Math.floor(hours / 24);\n\n  if (days > 0) return `${days}d ago`;\n  if (hours > 0) return `${hours}h ago`;\n  if (minutes > 0) return `${minutes}m ago`;\n  return \"just now\";\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgDA,SAAwB,kBAAkB,EAAE,UAAkC;CAC5E,MAAM,cAAc,gBAAgB;CACpC,MAAM,EACJ,YACA,QAAQ,GACR,OACA,aAAa,UACb,YAAY,aACZ,gBACA,aACA,aACE;CAGJ,MAAM,EAAE,MAAM,WAAW,OAAO,YAAY,kBAC1C,YACA;EACE,SAAS,GAAG,YAAY,QAAQ;EAChC;EACD,EACD,QACA,EAAE,UAAU,CACb;CAGD,MAAM,QAAQ,MAAM,QAAQ,MAAM,KAAK,GAAG,KAAK,OAAO,EAAE;CACxD,MAAM,eAAe,QACjB,YAAY,MAAM,GAClB,UAAU,qBAAqB,WAAW;CAG9C,MAAM,iBAAiB,SAAsB;AAC3C,MAAI,cAAc,KAAK,YAAa,QAAO,OAAO,KAAK,YAAY;AACnE,MAAI,KAAK,OAAQ,QAAO,OAAO,KAAK,OAAO;AAC3C,MAAI,KAAK,KAAM,QAAO,OAAO,KAAK,KAAK;AACvC,MAAI,KAAK,MAAO,QAAO,OAAO,KAAK,MAAM;AACzC,MAAI,KAAK,MAAO,QAAO,OAAO,KAAK,MAAM;AACzC,SAAO,SAAS,KAAK;;CAIvB,MAAM,eAAe,SAA6B;AAChD,MAAI,CAAC,gBAAgB,OAAQ,QAAO;AACpC,SAAO,eACJ,KAAK,UAAU,KAAK,OAAO,CAC3B,OAAO,QAAQ,CACf,KAAK,MAAM;;CAIhB,MAAM,mBAAmB,SAAc;AACrC,MAAI,YACF,aAAY,KAAK;;CAKrB,MAAM,cACJ,MAAM,WAAW,IACf,oBAAC;EAAE,WAAU;YAAgC;GAAgB,GAE7D,oBAAC;EAAI,WAAU;YACZ,MAAM,KAAK,SAAc;GACxB,MAAM,YAAY,KAAK;GACvB,MAAM,WAAW,YAAY,KAAK;AAElC,UACE,oBAAC;IACC,MAAK;IAEL,eAAe,gBAAgB,KAAK;IACpC,WAAU;cAEV,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAE,WAAU;gBACV,cAAc,KAAK;OAClB,EACJ,qBAAC;MAAI,WAAU;iBACZ,aACC,oBAAC,oBAAM,mBAAmB,IAAI,KAAK,UAAU,CAAC,GAAQ,EAEvD,YACC,4CACE,oBAAC,oBAAK,MAAQ,EACd,oBAAC;OAAK,WAAU;iBAAY;QAAgB,IAC3C;OAED;MACF;MAnBD,KAAK,GAoBH;IAEX;GACE;AAGV,QACE,oBAAC;EACC,OAAO;EACI;EACX,iBAAiB,oBAAC,6BAA0B,OAAO,QAAS;EAC5D,OACE,iBAAiB,QAAQ,QAAQ,QAAQ,IAAI,MAAM,OAAO,MAAM,CAAC,GAAG;EAEtE,iBAAiB,SAAS;YAEzB;GACU;;;;;AAOjB,SAAS,mBAAmB,MAAoB;CAE9C,MAAM,wBADM,IAAI,MAAM,EACL,SAAS,GAAG,KAAK,SAAS;CAC3C,MAAM,UAAU,KAAK,MAAM,OAAO,IAAK;CACvC,MAAM,UAAU,KAAK,MAAM,UAAU,GAAG;CACxC,MAAM,QAAQ,KAAK,MAAM,UAAU,GAAG;CACtC,MAAM,OAAO,KAAK,MAAM,QAAQ,GAAG;AAEnC,KAAI,OAAO,EAAG,QAAO,GAAG,KAAK;AAC7B,KAAI,QAAQ,EAAG,QAAO,GAAG,MAAM;AAC/B,KAAI,UAAU,EAAG,QAAO,GAAG,QAAQ;AACnC,QAAO"}

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

@@ -0,0 +1,55 @@
+import { ComponentReference } from "../../../server/augmentation.mjs";
+import "../../../server/index.mjs";
+import { DateFilterConfig } from "../../builder/types/widget-types.mjs";
+import * as React$1 from "react";
+import * as react_jsx_runtime36 from "react/jsx-runtime";
+
+//#region src/client/components/widgets/stats-widget.d.ts
+declare namespace stats_widget_d_exports {
+  export { StatsWidgetConfig, StatsWidgetProps, StatsWidget as default };
+}
+/**
+ * Stats widget config (local type for component props)
+ */
+type StatsWidgetConfig = {
+  id: string;
+  collection: string;
+  label?: string;
+  realtime?: boolean;
+  /** Static filter (evaluated at build time) */
+  filter?: Record<string, any>;
+  /** Dynamic filter function (evaluated at render time) */
+  filterFn?: () => Record<string, any>;
+  /** Date filter preset (evaluated at render time) */
+  dateFilter?: DateFilterConfig;
+  /** Icon component or server-defined reference */
+  icon?: React$1.ComponentType<{
+    className?: string;
+  }> | ComponentReference | string;
+  /** Color variant for the stat card */
+  variant?: "default" | "primary" | "success" | "warning" | "danger";
+  /** Server has a fetchFn for this widget */
+  hasFetchFn?: boolean;
+  /** Refresh interval in ms */
+  refreshInterval?: number;
+};
+/**
+ * Stats widget props
+ */
+type StatsWidgetProps = {
+  config: StatsWidgetConfig;
+};
+/**
+ * Stats widget component
+ *
+ * Shows:
+ * - Total count for a collection
+ * - Optional icon
+ * - Color variant for visual distinction
+ */
+declare function StatsWidget({
+  config
+}: StatsWidgetProps): react_jsx_runtime36.JSX.Element;
+//#endregion
+export { stats_widget_d_exports };
+//# sourceMappingURL=stats-widget.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stats-widget.d.mts","names":[],"sources":["../../../../src/client/components/widgets/stats-widget.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;KAwBY,iBAAA;EAAA,EAAA,EAAA,MAAA;EAMF,UAAA,EAAA,MAAA;EAEQ,KAAA,CAAA,EAAA,MAAA;EAEJ,QAAA,CAAA,EAAA,OAAA;EAGV;EACA,MAAA,CAAA,EARM,MAQN,CAAA,MAAA,EAAA,GAAA,CAAA;EAAkB;EAaV,QAAA,CAAA,EAAA,GAAA,GAnBM,MAmBU,CAAA,MAAA,EACnB,GAAA,CAAA;EAoHe;EAAc,UAAA,CAAA,EAtIxB,gBAsIwB;EAAU;EAAgB,IAAA,CAAA,EAnI5D,OAAA,CAAM,aAmIsD,CAAA;IAAA,SAAA,CAAA,EAAA,MAAA;OAlI5D;;;;;;;;;;;KAaQ,gBAAA;UACH;;;;;;;;;;iBAoHe,WAAA;;GAAwB,mBAAgB,mBAAA,CAAA,GAAA,CAAA"}