@questpie/admin 0.0.1 → 1.0.0

package/dist/dashboard-page-B4PGEdc2.mjs

@@ -0,0 +1,2500 @@
+import { _ as formatCollectionName, a as selectBasePath, f as useAdminStore, g as cn, h as Button, l as selectNavigate, r as selectAdmin, s as selectClient, v as useResolveText } from "./content-locales-provider-BXvuIgfg.mjs";
+import { r as useScopedLocale } from "./runtime-6VZM878K.mjs";
+import { i as CardDescription, n as CardAction, o as CardHeader, r as CardContent, s as CardTitle, t as Card } from "./card-BKHjBQfw.mjs";
+import { ArrowClockwise, ArrowRight, ArrowsOutSimple, CaretDownIcon, Circle } from "@phosphor-icons/react";
+import * as React$1 from "react";
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createQuestpieQueryOptions } from "@questpie/tanstack-query";
+import { Accordion } from "@base-ui/react/accordion";
+import { Tabs } from "@base-ui/react/tabs";
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+//#region src/client/components/ui/badge.tsx
+const badgeVariants = cva("h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge", {
+	variants: { variant: {
+		default: "bg-primary/10 text-primary border-primary border backdrop-blur-sm [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 ",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant = "default", render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({ className: cn(badgeVariants({
+			className,
+			variant
+		})) }, props),
+		render,
+		state: {
+			slot: "badge",
+			variant
+		}
+	});
+}
+
+//#endregion
+//#region src/client/views/collection/cells/primitive-cells.tsx
+/**
+* Ultra-simple default cell renderer
+* Used as fallback when field has no .cell defined
+*/
+function DefaultCell({ value }) {
+	if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	return /* @__PURE__ */ jsx("span", { children: String(value) });
+}
+/**
+* Text cell - simple text display with truncation
+*/
+function TextCell({ value }) {
+	if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	const text = String(value);
+	return /* @__PURE__ */ jsx("span", {
+		className: "truncate max-w-[300px] block",
+		title: text,
+		children: text
+	});
+}
+function stripHtmlTags(value) {
+	return value.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+}
+function extractTextFromNode(node) {
+	if (!node) return "";
+	if (Array.isArray(node)) return node.map(extractTextFromNode).filter(Boolean).join(" ");
+	if (typeof node.text === "string") return node.text;
+	if (Array.isArray(node.content)) return node.content.map(extractTextFromNode).filter(Boolean).join(" ");
+	return "";
+}
+function getRichTextPreview(value) {
+	if (value === null || value === void 0) return "";
+	if (typeof value === "string") return /<\/?[a-z][\s\S]*>/i.test(value) ? stripHtmlTags(value) : value.trim();
+	if (typeof value === "object") return extractTextFromNode(value).replace(/\s+/g, " ").trim();
+	return String(value);
+}
+function RichTextCell({ value }) {
+	const text = getRichTextPreview(value);
+	if (!text) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "truncate max-w-[300px] block",
+		title: text,
+		children: text
+	});
+}
+/**
+* Number cell - right-aligned number display
+*/
+function NumberCell({ value }) {
+	if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	const num = Number(value);
+	return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums",
+		children: Number.isNaN(num) ? String(value) : num.toLocaleString()
+	});
+}
+/**
+* Boolean cell - badge display
+*/
+function BooleanCell({ value }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: value ? "default" : "secondary",
+		children: value ? "Yes" : "No"
+	});
+}
+/**
+* Date cell - formatted date display
+*/
+function DateCell({ value }) {
+	if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	const date = value instanceof Date ? value : new Date(String(value));
+	if (Number.isNaN(date.getTime())) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: String(value)
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums",
+		children: date.toLocaleDateString()
+	});
+}
+/**
+* DateTime cell - formatted date and time display
+*/
+function DateTimeCell({ value }) {
+	if (value === null || value === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	const date = value instanceof Date ? value : new Date(String(value));
+	if (Number.isNaN(date.getTime())) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: String(value)
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: "tabular-nums",
+		children: [
+			date.toLocaleDateString(),
+			" ",
+			date.toLocaleTimeString()
+		]
+	});
+}
+/**
+* Time cell - formatted time display (for time-only values stored as string)
+*/
+function TimeCell({ value }) {
+	if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums",
+		children: String(value)
+	});
+}
+/**
+* Email cell - displays email with mailto link styling
+*/
+function EmailCell({ value }) {
+	if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-primary",
+		children: String(value)
+	});
+}
+/**
+* Select/Status cell - badge display
+*/
+function SelectCell({ value }) {
+	if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		children: String(value)
+	});
+}
+
+//#endregion
+//#region src/client/components/ui/accordion.tsx
+function Accordion$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		"data-slot": "accordion",
+		className: cn("overflow-hidden border border-border/60 bg-card/30 backdrop-blur-md flex w-full flex-col", className),
+		...props
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		"data-slot": "accordion-item",
+		className: cn("data-open:bg-muted/30 data-open:backdrop-blur-sm not-last:border-b border-border/40 transition-colors", className),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn("**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-4 px-4 py-3 text-left text-sm font-medium hover:bg-muted/20 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-center justify-between transition-all outline-none disabled:pointer-events-none disabled:opacity-50", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(CaretDownIcon, {
+				"data-slot": "accordion-trigger-icon",
+				className: "pointer-events-none shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-180"
+			})]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		"data-slot": "accordion-content",
+		className: "data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("px-4 pt-0 pb-4 text-sm [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4", className),
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/client/components/ui/tabs.tsx
+function Tabs$1({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "tabs",
+		"data-orientation": orientation,
+		className: cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className),
+		...props
+	});
+}
+const tabsListVariants = cva("p-[3px] group-data-horizontal/tabs:h-8 group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", {
+	variants: { variant: {
+		default: "bg-muted",
+		line: "gap-1 bg-transparent"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function TabsList({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		"data-variant": variant,
+		className: cn(tabsListVariants({ variant }), className),
+		...props
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-trigger",
+		className: cn("gap-1.5 border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-3.5 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground", "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
+		...props
+	});
+}
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("text-xs/relaxed flex-1 outline-none", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/client/hooks/use-collection.ts
+/**
+* Hook to fetch collection list with filters, sorting, pagination
+*
+* Uses RegisteredCMS from module augmentation for automatic type inference.
+*
+* @example
+* ```tsx
+* // Types inferred from module augmentation!
+* const { data } = useCollectionList("barbers");
+* ```
+*/
+function useCollectionList(collection, options, queryOptions) {
+	const client = useAdminStore(selectClient);
+	const { locale: contentLocale } = useScopedLocale();
+	return useQuery({
+		...createQuestpieQueryOptions(client, {
+			keyPrefix: ["questpie", "collections"],
+			locale: contentLocale
+		}).collections[collection].find({
+			...options,
+			locale: contentLocale
+		}),
+		...queryOptions
+	});
+}
+/**
+* Hook to count collection items with optional filters
+*
+* More efficient than useCollectionList when you only need the count.
+* Uses dedicated count endpoint that doesn't fetch actual documents.
+*
+* @example
+* ```tsx
+* // Count all items
+* const { data: count } = useCollectionCount("barbers");
+*
+* // Count with filter
+* const { data: count } = useCollectionCount("appointments", {
+*   where: { status: "pending" }
+* });
+* ```
+*/
+function useCollectionCount(collection, options, queryOptions) {
+	const client = useAdminStore(selectClient);
+	const { locale: contentLocale } = useScopedLocale();
+	return useQuery({
+		...createQuestpieQueryOptions(client, {
+			keyPrefix: ["questpie", "collections"],
+			locale: contentLocale
+		}).collections[collection].count({
+			...options,
+			locale: contentLocale
+		}),
+		...queryOptions
+	});
+}
+/**
+* Hook to fetch single collection item
+*
+* Uses RegisteredCMS from module augmentation for automatic type inference.
+*
+* @example
+* ```tsx
+* // Types inferred from module augmentation!
+* const { data } = useCollectionItem("barbers", "123");
+* ```
+*/
+function useCollectionItem(collection, id, options, queryOptions) {
+	const client = useAdminStore(selectClient);
+	const { locale: contentLocale } = useScopedLocale();
+	return useQuery({
+		...createQuestpieQueryOptions(client, {
+			keyPrefix: ["questpie", "collections"],
+			locale: contentLocale
+		}).collections[collection].findOne({
+			where: { id },
+			locale: contentLocale,
+			...options
+		}),
+		...queryOptions
+	});
+}
+/**
+* Hook to create collection item
+*
+* Uses RegisteredCMS from module augmentation for automatic type inference.
+*
+* @example
+* ```tsx
+* // Types inferred from module augmentation!
+* const { mutate } = useCollectionCreate("barbers");
+* mutate({ name: "John", ... });
+* ```
+*/
+function useCollectionCreate(collection, mutationOptions) {
+	const client = useAdminStore(selectClient);
+	const { locale: contentLocale } = useScopedLocale();
+	const queryClient = useQueryClient();
+	const queryOpts = createQuestpieQueryOptions(client, {
+		keyPrefix: ["questpie", "collections"],
+		locale: contentLocale
+	});
+	const baseOptions = queryOpts.collections[collection].create();
+	const listQueryKey = queryOpts.key([
+		"collections",
+		collection,
+		"find",
+		contentLocale
+	]);
+	const countQueryKey = queryOpts.key([
+		"collections",
+		collection,
+		"count",
+		contentLocale
+	]);
+	return useMutation({
+		...baseOptions,
+		onSuccess: (data, variables, context) => {
+			queryClient.invalidateQueries({ queryKey: listQueryKey });
+			queryClient.invalidateQueries({ queryKey: countQueryKey });
+			(mutationOptions?.onSuccess)?.(data, variables, context);
+		},
+		onSettled: (data, error, variables, context) => {
+			queryClient.invalidateQueries({ queryKey: listQueryKey });
+			queryClient.invalidateQueries({ queryKey: countQueryKey });
+			(mutationOptions?.onSettled)?.(data, error, variables, context);
+		},
+		...mutationOptions
+	});
+}
+/**
+* Hook to update collection item
+*
+* Uses RegisteredCMS from module augmentation for automatic type inference.
+*
+* @example
+* ```tsx
+* // Types inferred from module augmentation!
+* const { mutate } = useCollectionUpdate("barbers");
+* mutate({ id: "123", data: { name: "John" } });
+* ```
+*/
+function useCollectionUpdate(collection, mutationOptions) {
+	const client = useAdminStore(selectClient);
+	const { locale: contentLocale } = useScopedLocale();
+	const queryClient = useQueryClient();
+	const queryOpts = createQuestpieQueryOptions(client, {
+		keyPrefix: ["questpie", "collections"],
+		locale: contentLocale
+	});
+	const baseOptions = queryOpts.collections[collection].update();
+	const listQueryKey = queryOpts.key([
+		"collections",
+		collection,
+		"find",
+		contentLocale
+	]);
+	const countQueryKey = queryOpts.key([
+		"collections",
+		collection,
+		"count",
+		contentLocale
+	]);
+	const itemQueryKey = queryOpts.key([
+		"collections",
+		collection,
+		"findOne",
+		contentLocale
+	]);
+	return useMutation({
+		...baseOptions,
+		onSuccess: (data, variables, context) => {
+			queryClient.invalidateQueries({ queryKey: listQueryKey });
+			queryClient.invalidateQueries({ queryKey: countQueryKey });
+			queryClient.invalidateQueries({ queryKey: itemQueryKey });
+			(mutationOptions?.onSuccess)?.(data, variables, context);
+		},
+		onSettled: (data, error, variables, context) => {
+			queryClient.invalidateQueries({ queryKey: listQueryKey });
+			queryClient.invalidateQueries({ queryKey: countQueryKey });
+			queryClient.invalidateQueries({ queryKey: itemQueryKey });
+			(mutationOptions?.onSettled)?.(data, error, variables, context);
+		},
+		...mutationOptions
+	});
+}
+/**
+* Hook to delete collection item
+*
+* Uses RegisteredCMS from module augmentation for automatic type inference.
+*
+* @example
+* ```tsx
+* // Types inferred from module augmentation!
+* const { mutate } = useCollectionDelete("barbers");
+* mutate("123");
+* ```
+*/
+function useCollectionDelete(collection, mutationOptions) {
+	const client = useAdminStore(selectClient);
+	const { locale: contentLocale } = useScopedLocale();
+	const queryClient = useQueryClient();
+	const queryOpts = createQuestpieQueryOptions(client, {
+		keyPrefix: ["questpie", "collections"],
+		locale: contentLocale
+	});
+	const baseOptions = queryOpts.collections[collection].delete();
+	const listQueryKey = queryOpts.key([
+		"collections",
+		collection,
+		"find",
+		contentLocale
+	]);
+	const countQueryKey = queryOpts.key([
+		"collections",
+		collection,
+		"count",
+		contentLocale
+	]);
+	const itemQueryKey = queryOpts.key([
+		"collections",
+		collection,
+		"findOne",
+		contentLocale
+	]);
+	return useMutation({
+		...baseOptions,
+		onSuccess: (data, variables, context) => {
+			queryClient.invalidateQueries({ queryKey: listQueryKey });
+			queryClient.invalidateQueries({ queryKey: countQueryKey });
+			queryClient.invalidateQueries({ queryKey: itemQueryKey });
+			(mutationOptions?.onSuccess)?.(data, variables, context);
+		},
+		onSettled: (data, error, variables, context) => {
+			queryClient.invalidateQueries({ queryKey: listQueryKey });
+			queryClient.invalidateQueries({ queryKey: countQueryKey });
+			queryClient.invalidateQueries({ queryKey: itemQueryKey });
+			(mutationOptions?.onSettled)?.(data, error, variables, context);
+		},
+		...mutationOptions
+	});
+}
+
+//#endregion
+//#region src/client/components/ui/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("bg-muted animate-pulse", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/client/components/error-boundary.tsx
+/**
+* ErrorBoundary - Catches JavaScript errors in child component tree
+*
+* Prevents entire UI from crashing when a component throws an error.
+* Use around widgets, sections, or any component that might fail.
+*
+* @example
+* ```tsx
+* <ErrorBoundary fallback={<WidgetError />}>
+*   <ChartWidget config={config} />
+* </ErrorBoundary>
+*
+* // With error callback
+* <ErrorBoundary
+*   fallback={(error) => <p>Error: {error.message}</p>}
+*   onError={(error) => logToService(error)}
+* >
+*   <DashboardWidget config={config} />
+* </ErrorBoundary>
+* ```
+*/
+var ErrorBoundary = class extends React$1.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			hasError: false,
+			error: null
+		};
+	}
+	static getDerivedStateFromError(error) {
+		return {
+			hasError: true,
+			error
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		this.props.onError?.(error, errorInfo);
+	}
+	render() {
+		if (this.state.hasError && this.state.error) {
+			const { fallback } = this.props;
+			if (typeof fallback === "function") return fallback(this.state.error);
+			if (fallback) return fallback;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "rounded-lg border border-destructive/20 bg-destructive/5 p-4",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium text-destructive",
+					children: "Something went wrong"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-xs text-muted-foreground",
+					children: this.state.error.message
+				})]
+			});
+		}
+		return this.props.children;
+	}
+};
+/**
+* WidgetErrorBoundary - Specialized error boundary for dashboard widgets
+*/
+function WidgetErrorBoundary({ children, widgetType }) {
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
+		fallback: (error) => /* @__PURE__ */ jsxs("div", {
+			className: "rounded-lg border border-destructive/20 bg-destructive/5 p-4",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium text-destructive",
+					children: "Widget Error"
+				}),
+				widgetType && /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: ["Type: ", widgetType]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-xs text-muted-foreground",
+					children: error.message
+				})
+			]
+		}),
+		children
+	});
+}
+
+//#endregion
+//#region src/client/views/dashboard/widget-card.tsx
+/**
+* WidgetCard Component
+*
+* Standardized card wrapper for dashboard widgets with multiple variants.
+* Provides consistent styling, header actions, and loading/error states.
+*/
+const variantStyles$2 = {
+	default: "",
+	compact: "py-3 gap-3",
+	featured: "border-primary/30 bg-gradient-to-br from-primary/5 to-transparent shadow-sm"
+};
+const variantContentStyles = {
+	default: "",
+	compact: "pt-0",
+	featured: ""
+};
+function WidgetCardLoading({ variant = "default" }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("h-full flex flex-col", variantStyles$2[variant]),
+		children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) }), /* @__PURE__ */ jsx(CardContent, {
+			className: cn("flex-1", variantContentStyles[variant]),
+			children: /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" })
+		})]
+	});
+}
+function WidgetCardError({ error, variant = "default", onRetry }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("h-full flex flex-col border-destructive/20 bg-destructive/5", variantStyles$2[variant]),
+		children: [/* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx(CardTitle, {
+			className: "text-sm font-medium text-destructive",
+			children: "Error"
+		}), onRetry && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-xs",
+			onClick: onRetry,
+			children: /* @__PURE__ */ jsx(ArrowClockwise, { className: "h-3.5 w-3.5" })
+		}) })] }), /* @__PURE__ */ jsx(CardContent, {
+			className: cn("flex-1", variantContentStyles[variant]),
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: error.message
+			})
+		})]
+	});
+}
+/**
+* WidgetCard - Standardized card wrapper for dashboard widgets
+*
+* @example
+* ```tsx
+* <WidgetCard
+*   title="Revenue"
+*   description="Monthly sales total"
+*   variant="featured"
+*   onRefresh={() => refetch()}
+* >
+*   <div className="text-2xl font-bold">$12,345</div>
+* </WidgetCard>
+* ```
+*/
+function WidgetCard({ title, description, icon: Icon, variant = "default", isLoading, isRefreshing, error, onRefresh, onExpand, actions, className, loadingSkeleton, children }) {
+	if (isLoading) {
+		if (loadingSkeleton) return /* @__PURE__ */ jsxs(Card, {
+			className: cn("h-full flex flex-col", variantStyles$2[variant], className),
+			children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }) }), /* @__PURE__ */ jsx(CardContent, {
+				className: cn("flex-1", variantContentStyles[variant]),
+				children: loadingSkeleton
+			})]
+		});
+		return /* @__PURE__ */ jsx(WidgetCardLoading, { variant });
+	}
+	if (error) return /* @__PURE__ */ jsx(WidgetCardError, {
+		error,
+		variant,
+		onRetry: onRefresh
+	});
+	const hasHeader = title || description || Icon || onRefresh || onExpand || actions?.length;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("h-full flex flex-col", variantStyles$2[variant], className),
+		children: [hasHeader && /* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [title && /* @__PURE__ */ jsx(CardTitle, {
+					className: "text-sm font-medium truncate",
+					children: title
+				}), description && /* @__PURE__ */ jsx(CardDescription, {
+					className: "truncate",
+					children: description
+				})]
+			})]
+		}), (onRefresh || onExpand || actions?.length) && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [
+				actions?.map((action) => /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: action.onClick,
+					title: action.label,
+					children: action.icon && typeof action.icon !== "string" && /* @__PURE__ */ jsx(action.icon, { className: "h-3.5 w-3.5" })
+				}, action.id)),
+				onRefresh && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: onRefresh,
+					title: "Refresh",
+					disabled: isRefreshing,
+					children: /* @__PURE__ */ jsx(ArrowClockwise, { className: cn("h-3.5 w-3.5", isRefreshing && "animate-spin") })
+				}),
+				onExpand && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-xs",
+					onClick: onExpand,
+					title: "Expand",
+					children: /* @__PURE__ */ jsx(ArrowsOutSimple, { className: "h-3.5 w-3.5" })
+				})
+			]
+		}) })] }), /* @__PURE__ */ jsx(CardContent, {
+			className: cn("flex-1", variantContentStyles[variant], !hasHeader && "pt-0"),
+			children
+		})]
+	});
+}
+
+//#endregion
+//#region src/client/components/widgets/widget-skeletons.tsx
+/**
+* Widget Skeletons
+*
+* Loading skeleton components for different widget types.
+* Provides visual feedback while data is being fetched.
+*/
+function StatsWidgetSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })]
+	});
+}
+function ChartWidgetSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "h-48 w-full flex items-end gap-2 pt-4",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[40%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[65%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[45%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[80%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[55%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[70%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[50%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[75%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[60%]" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-t h-[85%]" })
+		]
+	});
+}
+function RecentItemsWidgetSkeleton({ count = 5 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1",
+		children: [
+			/* @__PURE__ */ jsx(SkeletonRow, {}),
+			count > 1 && /* @__PURE__ */ jsx(SkeletonRow, {}),
+			count > 2 && /* @__PURE__ */ jsx(SkeletonRow, {}),
+			count > 3 && /* @__PURE__ */ jsx(SkeletonRow, {}),
+			count > 4 && /* @__PURE__ */ jsx(SkeletonRow, {})
+		]
+	});
+}
+function SkeletonRow() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-3 p-2",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 space-y-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })]
+		})
+	});
+}
+function TableWidgetSkeleton({ rows = 5, columns = 3 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "-mx-5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-4 px-5 py-2 border-b border-border/50",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+					columns > 1 && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" }),
+					columns > 2 && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })
+				]
+			}),
+			/* @__PURE__ */ jsx(TableSkeletonRow, { columns }),
+			rows > 1 && /* @__PURE__ */ jsx(TableSkeletonRow, { columns }),
+			rows > 2 && /* @__PURE__ */ jsx(TableSkeletonRow, { columns }),
+			rows > 3 && /* @__PURE__ */ jsx(TableSkeletonRow, { columns }),
+			rows > 4 && /* @__PURE__ */ jsx(TableSkeletonRow, {
+				columns,
+				last: true
+			})
+		]
+	});
+}
+function TableSkeletonRow({ columns = 3, last = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex gap-4 px-5 py-3 border-b border-border/30", last && "border-0"),
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+			columns > 1 && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" }),
+			columns > 2 && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })
+		]
+	});
+}
+function TimelineWidgetSkeleton({ count = 5 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsx(TimelineSkeletonItem, {}),
+			count > 1 && /* @__PURE__ */ jsx(TimelineSkeletonItem, {}),
+			count > 2 && /* @__PURE__ */ jsx(TimelineSkeletonItem, {}),
+			count > 3 && /* @__PURE__ */ jsx(TimelineSkeletonItem, {}),
+			count > 4 && /* @__PURE__ */ jsx(TimelineSkeletonItem, { last: true })
+		]
+	});
+}
+function TimelineSkeletonItem({ last = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3 rounded-full" }), !last && /* @__PURE__ */ jsx(Skeleton, { className: "w-0.5 flex-1 mt-1" })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 space-y-1 pb-4",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+			]
+		})]
+	});
+}
+function ProgressWidgetSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between items-center",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-12" })]
+			}),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-full rounded-full" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
+		]
+	});
+}
+function ValueWidgetSkeleton({ featured = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 rounded-md shrink-0" }), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 space-y-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: cn("h-8", featured ? "w-40" : "w-24") })]
+			})]
+		}), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" })]
+	});
+}
+
+//#endregion
+//#region src/client/components/widgets/chart-widget.tsx
+/**
+* Chart Widget
+*
+* Displays data visualization over time.
+* Uses WidgetCard for consistent styling.
+*/
+const CHART_COLORS = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+];
+/**
+* Custom tooltip component matching shadcn style
+*/
+function ChartTooltip({ active, payload, label }) {
+	if (!active || !payload?.length) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-md border border-border bg-background px-3 py-2 text-xs shadow-md",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "font-medium text-foreground",
+			children: label
+		}), payload.map((entry) => /* @__PURE__ */ jsxs("p", {
+			className: "text-muted-foreground",
+			children: [
+				entry.name,
+				":",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: entry.value
+				})
+			]
+		}, String(entry.name)))]
+	});
+}
+/**
+* Chart widget component
+*
+* Displays:
+* - Time series data visualization
+* - Multiple chart types (line, bar, area, pie)
+* - Configurable time ranges
+*/
+function ChartWidget({ config }) {
+	const resolveText = useResolveText();
+	const { collection, field, chartType = "area", timeRange = "30d", label, color = "var(--color-chart-1)", showGrid = true } = config;
+	const { data, isLoading, error, refetch } = useCollectionList(collection, { limit: 1e3 });
+	const items = Array.isArray(data?.docs) ? data.docs : [];
+	const displayLabel = label ? resolveText(label) : `${formatCollectionName(collection)} by ${field}`;
+	const chartData = React$1.useMemo(() => {
+		if (!items.length) return [];
+		const grouped = items.reduce((acc, item) => {
+			const value = item[field];
+			if (value === void 0 || value === null) return acc;
+			let key;
+			if (value instanceof Date || !isNaN(Date.parse(value))) key = formatDateForRange(new Date(value), timeRange);
+			else key = String(value);
+			acc[key] = (acc[key] || 0) + 1;
+			return acc;
+		}, {});
+		return Object.entries(grouped).map(([name, value]) => ({
+			name,
+			value
+		})).sort((a, b) => a.name.localeCompare(b.name));
+	}, [
+		items,
+		field,
+		timeRange
+	]);
+	const emptyContent = /* @__PURE__ */ jsx("div", {
+		className: "flex h-48 items-center justify-center text-muted-foreground",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			children: "No data available"
+		})
+	});
+	const chartContent = chartData.length === 0 ? emptyContent : /* @__PURE__ */ jsx("div", {
+		className: "h-48 w-full",
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: renderChart(chartType, chartData, color, showGrid)
+		})
+	});
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: displayLabel,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(ChartWidgetSkeleton, {}),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		children: chartContent
+	});
+}
+/**
+* Render the appropriate chart type
+*/
+function renderChart(type, data, color, showGrid) {
+	const commonProps = {
+		data,
+		margin: {
+			top: 5,
+			right: 5,
+			left: -20,
+			bottom: 5
+		}
+	};
+	const axisStyle = {
+		fontSize: 10,
+		fill: "var(--color-muted-foreground)"
+	};
+	switch (type) {
+		case "line": return /* @__PURE__ */ jsxs(LineChart, {
+			...commonProps,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border)",
+					opacity: .5
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: "name",
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) }),
+				/* @__PURE__ */ jsx(Line, {
+					type: "monotone",
+					dataKey: "value",
+					stroke: color,
+					strokeWidth: 2,
+					dot: false
+				})
+			]
+		});
+		case "bar": return /* @__PURE__ */ jsxs(BarChart, {
+			...commonProps,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border)",
+					opacity: .5
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: "name",
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					content: /* @__PURE__ */ jsx(ChartTooltip, {}),
+					cursor: {
+						fill: "var(--color-muted)",
+						opacity: .3
+					}
+				}),
+				/* @__PURE__ */ jsx(Bar, {
+					dataKey: "value",
+					fill: color,
+					radius: [
+						2,
+						2,
+						0,
+						0
+					]
+				})
+			]
+		});
+		case "pie": return /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
+			data,
+			dataKey: "value",
+			nameKey: "name",
+			cx: "50%",
+			cy: "50%",
+			outerRadius: 60,
+			label: ({ name }) => name,
+			labelLine: false,
+			stroke: "var(--color-background)",
+			strokeWidth: 2,
+			children: data.map((entry) => /* @__PURE__ */ jsx(Cell, { fill: CHART_COLORS[data.indexOf(entry) % CHART_COLORS.length] }, `cell-${entry.name}`))
+		}), /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) })] });
+		case "area":
+		default: return /* @__PURE__ */ jsxs(AreaChart, {
+			...commonProps,
+			children: [
+				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border)",
+					opacity: .5
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: "name",
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				}),
+				/* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) }),
+				/* @__PURE__ */ jsx(Area, {
+					type: "monotone",
+					dataKey: "value",
+					stroke: color,
+					fill: color,
+					fillOpacity: .15
+				})
+			]
+		});
+	}
+}
+/**
+* Format date based on time range for grouping
+*/
+function formatDateForRange(date, timeRange) {
+	const months = [
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec"
+	];
+	switch (timeRange) {
+		case "7d": return `${[
+			"Sun",
+			"Mon",
+			"Tue",
+			"Wed",
+			"Thu",
+			"Fri",
+			"Sat"
+		][date.getDay()]} ${date.getDate()}`;
+		case "30d": return `${months[date.getMonth()]} ${date.getDate()}`;
+		case "90d": return `W${Math.ceil(date.getDate() / 7)} ${months[date.getMonth()]}`;
+		case "1y": return `${months[date.getMonth()]} ${date.getFullYear()}`;
+		default: return `${months[date.getMonth()]} ${date.getDate()}`;
+	}
+}
+
+//#endregion
+//#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 { data, isLoading, error, refetch } = useQuery({
+		queryKey: [
+			"widget",
+			"progress",
+			config.id
+		],
+		queryFn: () => config.fetchFn(client),
+		refetchInterval: config.refreshInterval
+	});
+	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-green-500";
+		if (percentage >= 75) return "bg-primary";
+		if (percentage >= 50) return "bg-yellow-500";
+		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
+//#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$3 = {
+		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 Icon = action.icon && typeof action.icon !== "string" ? action.icon : null;
+				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$3[action.variant]),
+					children: [Icon && /* @__PURE__ */ jsx("div", {
+						className: cn("flex h-9 w-9 items-center justify-center rounded-md", iconVariantStyles[action.variant]),
+						children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+					}), /* @__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 Icon = action.icon && typeof action.icon !== "string" ? action.icon : null;
+				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$3[action.variant]),
+					children: [
+						Icon && /* @__PURE__ */ jsx("div", {
+							className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-md", iconVariantStyles[action.variant]),
+							children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 text-sm font-medium truncate",
+							children: action.label
+						}),
+						/* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" })
+					]
+				}, action.id);
+			})
+		})
+	});
+}
+
+//#endregion
+//#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 } = config;
+	const { data, isLoading, error, refetch } = useCollectionList(collection, {
+		orderBy: { [dateField]: "desc" },
+		limit
+	});
+	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
+//#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$1 = {
+	default: "",
+	primary: "border-primary/30 bg-primary/5",
+	success: "border-green-500/30 bg-green-500/5",
+	warning: "border-yellow-500/30 bg-yellow-500/5",
+	danger: "border-red-500/30 bg-red-500/5"
+};
+const variantValueStyles = {
+	default: "",
+	primary: "text-primary",
+	success: "text-green-600 dark:text-green-400",
+	warning: "text-yellow-600 dark:text-yellow-400",
+	danger: "text-red-600 dark:text-red-400"
+};
+/**
+* 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" } = config;
+	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 { data: count = 0, isLoading, error, refetch } = useCollectionCount(collection, computedFilter ? { where: computedFilter } : void 0);
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: label ? resolveText(label) : formatCollectionName(collection),
+		icon: Icon && typeof Icon !== "string" ? Icon : void 0,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(StatsWidgetSkeleton, {}),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		className: variantStyles$1[variant],
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("text-2xl font-bold", variantValueStyles[variant]),
+			children: count.toLocaleString()
+		})
+	});
+}
+
+//#endregion
+//#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 column.key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
+}
+/**
+* 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 admin = useAdminStore(selectAdmin);
+	const { collection, columns: rawColumns, limit = 5, sortBy, sortOrder = "desc", filter, linkToDetail, emptyMessage } = config;
+	const columns = rawColumns.map(normalizeColumn);
+	const fields = (admin?.getCollections() ?? {})[collection]?.fields;
+	const queryOptions = { limit };
+	if (sortBy) queryOptions.orderBy = { [sortBy]: sortOrder };
+	if (filter) queryOptions.where = filter;
+	const { data, isLoading, error, refetch } = useCollectionList(collection, queryOptions);
+	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
+//#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-green-500",
+	warning: "bg-yellow-500",
+	error: "bg-red-500",
+	info: "bg-blue-500"
+};
+/**
+* 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 { data, isLoading, error, refetch } = useQuery({
+		queryKey: [
+			"widget",
+			"timeline",
+			config.id
+		],
+		queryFn: () => config.fetchFn(client),
+		refetchInterval: config.refreshInterval
+	});
+	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 Icon = item.icon || Circle;
+			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: /* @__PURE__ */ jsx(Icon, {
+						className: "h-3 w-3 text-white",
+						weight: "bold"
+					})
+				}),
+				/* @__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
+//#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",
+*     fetchFn: async (client) => ({
+*       value: 42,
+*       label: "Total",
+*       classNames: { root: "bg-blue-50" },
+*     }),
+*   }}
+* />
+* ```
+*/
+function ValueWidget({ config }) {
+	const client = useAdminStore(selectClient);
+	const resolveText = useResolveText();
+	const { data, isLoading, error, refetch, isFetching } = useQuery({
+		queryKey: [
+			"widget",
+			"value",
+			config.id
+		],
+		queryFn: () => config.fetchFn(client),
+		refetchInterval: config.refreshInterval
+	});
+	const isFeatured = config.cardVariant === "featured";
+	if (isLoading || error || !data) return /* @__PURE__ */ jsx(WidgetCard, {
+		title: config.title ? resolveText(config.title) : void 0,
+		isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(ValueWidgetSkeleton, { featured: isFeatured }),
+		error: error instanceof Error ? error : !data && !isLoading ? /* @__PURE__ */ new Error("No data returned") : null,
+		onRefresh: () => refetch(),
+		className: data?.classNames?.root
+	});
+	const cls = data.classNames ?? {};
+	const Icon = data.icon;
+	const TrendIcon = data.trend?.icon;
+	const label = data.label ? resolveText(data.label) : void 0;
+	const subtitle = data.subtitle ? resolveText(data.subtitle) : void 0;
+	const footer = data.footer ? resolveText(data.footer) : void 0;
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: label,
+		icon: Icon,
+		onRefresh: () => refetch(),
+		isRefreshing: isFetching && !isLoading,
+		className: cls.root,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("space-y-1", cls.content),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("text-2xl font-bold", cls.value),
+					children: data.formatted ?? formatValue(data.value)
+				}),
+				data.trend && /* @__PURE__ */ jsxs("div", {
+					className: cn("flex items-center gap-1 text-sm", cls.trend),
+					children: [TrendIcon && /* @__PURE__ */ jsx(TrendIcon, { className: cn("h-3 w-3", cls.trendIcon) }), /* @__PURE__ */ jsx("span", { children: data.trend.value })]
+				}),
+				subtitle && /* @__PURE__ */ jsx("p", {
+					className: cn("text-xs text-muted-foreground", cls.subtitle),
+					children: subtitle
+				}),
+				footer && /* @__PURE__ */ jsx("p", {
+					className: cn("text-xs text-muted-foreground pt-2", cls.footer),
+					children: footer
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/client/views/dashboard/dashboard-widget.tsx
+/**
+* DashboardWidget Component
+*
+* Renders individual dashboard widgets based on their type configuration.
+* Supports built-in widget types and custom components.
+*/
+function UnknownWidget({ type }) {
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: "Unknown Widget",
+		className: "border-yellow-500/20 bg-yellow-500/5",
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "text-xs text-muted-foreground",
+			children: [
+				"Widget type \"",
+				type,
+				"\" is not recognized."
+			]
+		})
+	});
+}
+function CustomWidgetRenderer({ loader, widgetConfig, span }) {
+	const [state, setState] = React$1.useState({
+		Component: null,
+		loading: true,
+		error: null
+	});
+	React$1.useEffect(() => {
+		if (!loader) {
+			setState({
+				Component: null,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		if (!(typeof loader === "function" && !loader.prototype?.render && !loader.prototype?.isReactComponent && loader.length === 0)) {
+			setState({
+				Component: loader,
+				loading: false,
+				error: null
+			});
+			return;
+		}
+		let mounted = true;
+		(async () => {
+			try {
+				const result = await loader();
+				if (mounted) setState({
+					Component: result.default || result,
+					loading: false,
+					error: null
+				});
+			} catch (err) {
+				if (mounted) setState({
+					Component: null,
+					loading: false,
+					error: err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to load component")
+				});
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, [loader]);
+	if (state.loading) return /* @__PURE__ */ jsx(WidgetCard, { isLoading: true });
+	if (state.error) return /* @__PURE__ */ jsx(WidgetCard, { error: state.error });
+	if (!state.Component) return /* @__PURE__ */ jsx(WidgetCard, { error: /* @__PURE__ */ new Error("Component not found") });
+	const Component = state.Component;
+	return /* @__PURE__ */ jsx(Component, {
+		config: widgetConfig,
+		span
+	});
+}
+function StatsWidgetRenderer({ config }) {
+	const resolveText = useResolveText();
+	return /* @__PURE__ */ jsx(StatsWidget, { config: {
+		collection: config.collection,
+		label: config.label ? resolveText(config.label) : void 0,
+		filter: config.filter,
+		filterFn: config.filterFn,
+		dateFilter: config.dateFilter,
+		icon: config.icon,
+		variant: config.variant
+	} });
+}
+function ChartWidgetRenderer({ config }) {
+	const resolveText = useResolveText();
+	return /* @__PURE__ */ jsx(ChartWidget, { config: {
+		collection: config.collection,
+		field: config.field,
+		chartType: config.chartType,
+		timeRange: config.timeRange,
+		label: config.label ? resolveText(config.label) : void 0,
+		color: config.color,
+		showGrid: config.showGrid,
+		aggregation: config.aggregation,
+		valueField: config.valueField
+	} });
+}
+function RecentItemsWidgetRenderer({ config, basePath, navigate }) {
+	const resolveText = useResolveText();
+	return /* @__PURE__ */ jsx(RecentItemsWidget, { config: {
+		collection: config.collection,
+		limit: config.limit,
+		label: config.label ? resolveText(config.label) : void 0,
+		titleField: config.titleField,
+		dateField: config.dateField,
+		subtitleFields: config.subtitleFields,
+		basePath,
+		onItemClick: navigate ? (item) => navigate(`${basePath}/collections/${config.collection}/${item.id}`) : void 0
+	} });
+}
+function QuickActionsWidgetRenderer({ config, basePath, navigate }) {
+	return /* @__PURE__ */ jsx(QuickActionsWidget, {
+		config,
+		basePath,
+		navigate
+	});
+}
+function TableWidgetRenderer({ config, basePath, navigate }) {
+	return /* @__PURE__ */ jsx(TableWidget, {
+		config,
+		basePath,
+		navigate
+	});
+}
+function TimelineWidgetRenderer({ config, navigate }) {
+	return /* @__PURE__ */ jsx(TimelineWidget, {
+		config,
+		navigate
+	});
+}
+function ProgressWidgetRenderer({ config }) {
+	return /* @__PURE__ */ jsx(ProgressWidget, { config });
+}
+/**
+* DashboardWidget - Renders a single widget based on its configuration
+*
+* @example
+* ```tsx
+* <DashboardWidget
+*   config={{ type: "stats", collection: "posts", label: "Total Posts" }}
+*   basePath="/admin"
+*   navigate={navigate}
+* />
+* ```
+*/
+function DashboardWidget({ config, basePath = "/admin", navigate, widgetRegistry }) {
+	const renderWidget = () => {
+		if (config.type === "custom") return /* @__PURE__ */ jsx(CustomWidgetRenderer, {
+			loader: config.component,
+			widgetConfig: config.config || {},
+			span: config.span
+		});
+		if (widgetRegistry?.[config.type]) {
+			const CustomWidget = widgetRegistry[config.type];
+			return /* @__PURE__ */ jsx(CustomWidget, {
+				config,
+				span: config.span
+			});
+		}
+		switch (config.type) {
+			case "stats": return /* @__PURE__ */ jsx(StatsWidgetRenderer, { config });
+			case "chart": return /* @__PURE__ */ jsx(ChartWidgetRenderer, { config });
+			case "recentItems": return /* @__PURE__ */ jsx(RecentItemsWidgetRenderer, {
+				config,
+				basePath,
+				navigate
+			});
+			case "quickActions": return /* @__PURE__ */ jsx(QuickActionsWidgetRenderer, {
+				config,
+				basePath,
+				navigate
+			});
+			case "value": return /* @__PURE__ */ jsx(ValueWidget, { config });
+			case "table": return /* @__PURE__ */ jsx(TableWidgetRenderer, {
+				config,
+				basePath,
+				navigate
+			});
+			case "timeline": return /* @__PURE__ */ jsx(TimelineWidgetRenderer, {
+				config,
+				navigate
+			});
+			case "progress": return /* @__PURE__ */ jsx(ProgressWidgetRenderer, { config });
+			default: return /* @__PURE__ */ jsx(UnknownWidget, { type: config.type });
+		}
+	};
+	return /* @__PURE__ */ jsx(WidgetErrorBoundary, {
+		widgetType: config.type,
+		children: renderWidget()
+	});
+}
+
+//#endregion
+//#region src/client/views/dashboard/dashboard-grid.tsx
+/**
+* Grid column classes for different column counts
+* Uses container queries (@container) for responsive behavior
+*/
+const gridClasses = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 @xs:grid-cols-2",
+	3: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3",
+	4: "grid-cols-1 @xs:grid-cols-2 @md:grid-cols-3 @lg:grid-cols-4",
+	5: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5",
+	6: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5 @xl:grid-cols-6",
+	12: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-4 @md:grid-cols-6 @lg:grid-cols-12"
+};
+/**
+* Span classes for widget column spanning
+*/
+const spanClasses = {
+	1: "col-span-1",
+	2: "col-span-1 @xs:col-span-2",
+	3: "col-span-1 @xs:col-span-2 @md:col-span-3",
+	4: "col-span-1 @xs:col-span-2 @md:col-span-3 @lg:col-span-4",
+	5: "col-span-1 @xs:col-span-2 @md:col-span-3 @lg:col-span-5",
+	6: "col-span-1 @xs:col-span-2 @md:col-span-3 @lg:col-span-6",
+	12: "col-span-full"
+};
+/**
+* Get grid columns class based on column count
+*/
+function getGridClass(columns) {
+	return gridClasses[columns] || gridClasses[4];
+}
+/**
+* Get column span class for a widget
+*/
+function getSpanClass(span) {
+	if (!span || span <= 1) return "";
+	return spanClasses[span] || "";
+}
+/**
+* Check if item is a widget config
+*/
+function isWidgetConfig(item) {
+	return typeof item === "object" && "type" in item && item.type !== "section" && item.type !== "tabs";
+}
+/**
+* Check if item is a section config
+*/
+function isSectionConfig(item) {
+	return typeof item === "object" && "type" in item && item.type === "section";
+}
+/**
+* Check if item is a tabs config
+*/
+function isTabsConfig(item) {
+	return typeof item === "object" && "type" in item && item.type === "tabs";
+}
+/**
+* Generate a unique key for a layout item
+*/
+function getLayoutItemKey(item, index) {
+	if (isWidgetConfig(item)) return `widget-${item.id || item.type}-${index}`;
+	if (isSectionConfig(item)) return `section-${index}`;
+	if (isTabsConfig(item)) return `tabs-${item.tabs.map((t) => t.id).join("-") || index}`;
+	return `item-${index}`;
+}
+function DashboardHeader({ title, description, actions, navigate, resolveText }) {
+	if (!title && !description && !actions?.length) return null;
+	const handleActionClick = (action) => {
+		if (action.onClick) action.onClick();
+		else if (action.href && navigate) navigate(action.href);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [title && /* @__PURE__ */ jsx("h1", {
+				className: "text-2xl md:text-3xl font-extrabold tracking-tight",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-muted-foreground",
+				children: description
+			})]
+		}), actions && actions.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2 shrink-0",
+			children: actions.map((action) => {
+				const Icon = action.icon && typeof action.icon !== "string" ? action.icon : null;
+				const variant = action.variant || "default";
+				return /* @__PURE__ */ jsxs(Button, {
+					variant: variant === "primary" ? "default" : variant,
+					size: "sm",
+					onClick: () => handleActionClick(action),
+					children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 mr-2" }), resolveText(action.label)]
+				}, action.id);
+			})
+		})]
+	});
+}
+function LayoutItemRenderer({ item, index, columns, basePath, navigate, widgetRegistry, resolveText }) {
+	if (isWidgetConfig(item)) return /* @__PURE__ */ jsx("div", {
+		className: cn("min-h-0 h-full", getSpanClass(item.span)),
+		children: /* @__PURE__ */ jsx(DashboardWidget, {
+			config: item,
+			basePath,
+			navigate,
+			widgetRegistry
+		})
+	});
+	if (isSectionConfig(item)) return /* @__PURE__ */ jsx(SectionRenderer, {
+		section: item,
+		basePath,
+		navigate,
+		widgetRegistry,
+		resolveText
+	}, `section-${index}`);
+	if (isTabsConfig(item)) return /* @__PURE__ */ jsx(TabsRenderer, {
+		tabs: item,
+		basePath,
+		navigate,
+		widgetRegistry,
+		resolveText
+	}, `tabs-${index}`);
+	return null;
+}
+function SectionRenderer({ section, basePath, navigate, widgetRegistry, resolveText }) {
+	const { label, description, wrapper = "flat", defaultCollapsed = false, layout = "grid", columns = 4, gap, items, className } = section;
+	const sectionLabel = label ? resolveText(label) : void 0;
+	const sectionDescription = description ? resolveText(description) : void 0;
+	const itemsContent = /* @__PURE__ */ jsx("div", {
+		className: cn("@container", layout === "grid" && "grid gap-4 items-stretch", layout === "grid" && getGridClass(columns), layout === "stack" && "flex flex-col gap-4"),
+		style: gap ? { gap: `${gap * .25}rem` } : void 0,
+		children: items.map((item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+			item,
+			index,
+			columns,
+			basePath,
+			navigate,
+			widgetRegistry,
+			resolveText
+		}, getLayoutItemKey(item, index)))
+	});
+	if (wrapper === "flat") return /* @__PURE__ */ jsxs("div", {
+		className: cn("col-span-full", className),
+		children: [(sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs("div", {
+			className: "mb-4",
+			children: [sectionLabel && /* @__PURE__ */ jsx("h2", {
+				className: "text-lg font-semibold",
+				children: sectionLabel
+			}), sectionDescription && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground mt-1",
+				children: sectionDescription
+			})]
+		}), itemsContent]
+	});
+	if (wrapper === "card") return /* @__PURE__ */ jsxs(Card, {
+		className: cn("col-span-full", className),
+		children: [(sectionLabel || sectionDescription) && /* @__PURE__ */ jsxs(CardHeader, { children: [sectionLabel && /* @__PURE__ */ jsx(CardTitle, { children: sectionLabel }), sectionDescription && /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: sectionDescription
+		})] }), /* @__PURE__ */ jsx(CardContent, { children: itemsContent })]
+	});
+	if (wrapper === "collapsible") return /* @__PURE__ */ jsx(Accordion$1, {
+		defaultValue: defaultCollapsed ? [] : [0],
+		className: cn("col-span-full", className),
+		children: /* @__PURE__ */ jsxs(AccordionItem, {
+			className: "border-none",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "hover:no-underline py-2",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-left",
+					children: [sectionLabel && /* @__PURE__ */ jsx("span", {
+						className: "text-lg font-semibold",
+						children: sectionLabel
+					}), sectionDescription && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground font-normal",
+						children: sectionDescription
+					})]
+				})
+			}), /* @__PURE__ */ jsx(AccordionContent, {
+				className: "pt-4",
+				children: itemsContent
+			})]
+		})
+	});
+	return itemsContent;
+}
+function TabsRenderer({ tabs, basePath, navigate, widgetRegistry, resolveText }) {
+	const { tabs: tabConfigs, defaultTab, variant = "default" } = tabs;
+	return /* @__PURE__ */ jsxs(Tabs$1, {
+		defaultValue: defaultTab || tabConfigs[0]?.id,
+		className: "col-span-full",
+		children: [/* @__PURE__ */ jsx(TabsList, {
+			variant: variant === "line" ? "line" : "default",
+			className: "mb-4",
+			children: tabConfigs.map((tab) => /* @__PURE__ */ jsxs(TabsTrigger, {
+				value: tab.id,
+				children: [
+					tab.icon && /* @__PURE__ */ jsx(tab.icon, { className: "h-4 w-4 mr-2" }),
+					resolveText(tab.label),
+					tab.badge !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "ml-2 rounded-full bg-muted px-2 py-0.5 text-xs",
+						children: tab.badge
+					})
+				]
+			}, tab.id))
+		}), tabConfigs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+			value: tab.id,
+			children: /* @__PURE__ */ jsx(TabContentRenderer, {
+				tab,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText
+			})
+		}, tab.id))]
+	});
+}
+function TabContentRenderer({ tab, basePath, navigate, widgetRegistry, resolveText }) {
+	const columns = 4;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("@container grid gap-4 items-stretch", getGridClass(columns)),
+		children: tab.items.map((item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+			item,
+			index,
+			columns,
+			basePath,
+			navigate,
+			widgetRegistry,
+			resolveText
+		}, getLayoutItemKey(item, index)))
+	});
+}
+/**
+* DashboardGrid - Renders a configurable grid of dashboard widgets
+*
+* @example
+* ```tsx
+* const dashboardConfig: DashboardConfig = {
+*   title: "Dashboard",
+*   description: "Welcome to your admin dashboard",
+*   columns: 4,
+*   items: [
+*     { type: "stats", collection: "posts", label: "Total Posts", span: 1 },
+*     { type: "stats", collection: "users", label: "Total Users", span: 1 },
+*     {
+*       type: "section",
+*       label: "Analytics",
+*       wrapper: "card",
+*       items: [
+*         { type: "chart", collection: "posts", field: "createdAt", span: 2 },
+*       ]
+*     },
+*     {
+*       type: "tabs",
+*       tabs: [
+*         { id: "recent", label: "Recent", items: [...] },
+*         { id: "popular", label: "Popular", items: [...] },
+*       ]
+*     }
+*   ],
+* };
+*
+* <DashboardGrid config={dashboardConfig} basePath="/admin" navigate={navigate} />
+* ```
+*/
+function DashboardGrid({ config, basePath = "/admin", navigate, widgetRegistry, className }) {
+	const resolveText = useResolveText();
+	const { title, description, columns = 4 } = config;
+	const layoutItems = config.items || config.widgets || [];
+	const resolvedTitle = title ? resolveText(title) : void 0;
+	const resolvedDescription = description ? resolveText(description) : void 0;
+	if (layoutItems.length === 0) return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container", className),
+		children: [/* @__PURE__ */ jsx(DashboardHeader, {
+			title: resolvedTitle,
+			description: resolvedDescription,
+			actions: config.actions,
+			navigate,
+			resolveText
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex h-64 items-center justify-center border border-dashed border-border bg-card/50 rounded-lg",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground font-medium",
+					children: "No widgets configured"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: "Add widgets to your dashboard configuration to display data here."
+				})]
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container", className),
+		children: [/* @__PURE__ */ jsx(DashboardHeader, {
+			title: resolvedTitle,
+			description: resolvedDescription,
+			actions: config.actions,
+			navigate,
+			resolveText
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("grid gap-4 items-stretch", getGridClass(columns)),
+			children: layoutItems.map((item, index) => /* @__PURE__ */ jsx(LayoutItemRenderer, {
+				item,
+				index,
+				columns,
+				basePath,
+				navigate,
+				widgetRegistry,
+				resolveText
+			}, getLayoutItemKey(item, index)))
+		})]
+	});
+}
+
+//#endregion
+//#region src/client/views/pages/dashboard-page.tsx
+/**
+* Default dashboard page component.
+*
+* Reads dashboard configuration from AdminProvider and renders DashboardGrid.
+*
+* @example
+* ```tsx
+* // In your admin config
+* const admin = qa<AppCMS>()
+*   .use(coreAdminModule)
+*   .dashboard({
+*     title: "Welcome",
+*     widgets: [
+*       { type: "stats", collection: "posts" },
+*     ],
+*   })
+* ```
+*/
+function DashboardPage({ title, description, className }) {
+	const admin = useAdminStore(selectAdmin);
+	const basePath = useAdminStore(selectBasePath);
+	const navigate = useAdminStore(selectNavigate);
+	return /* @__PURE__ */ jsx(DashboardGrid, {
+		config: {
+			...admin.getDashboard(),
+			...title && { title },
+			...description && { description }
+		},
+		basePath,
+		navigate,
+		className
+	});
+}
+var dashboard_page_default = DashboardPage;
+
+//#endregion
+export { EmailCell as C, TextCell as D, SelectCell as E, TimeCell as O, DefaultCell as S, RichTextCell as T, AccordionItem as _, Skeleton as a, DateCell as b, useCollectionItem as c, Tabs$1 as d, TabsContent as f, AccordionContent as g, Accordion$1 as h, DashboardWidget as i, Badge as k, useCollectionList as l, TabsTrigger as m, dashboard_page_default as n, useCollectionCreate as o, TabsList as p, DashboardGrid as r, useCollectionDelete as s, DashboardPage as t, useCollectionUpdate as u, AccordionTrigger as v, NumberCell as w, DateTimeCell as x, BooleanCell as y };
+//# sourceMappingURL=dashboard-page-B4PGEdc2.mjs.map