@burdenoff/microfe-timecampus 2026.703.4 → 2026.703.6

package/dist/timecampus/pages/widgets/WidgetsPage.js

@@ -1,15 +1,22 @@
 import { useTimeCampusNavigate as e } from "../../providers/TimeCampusProvider.js";
-import { LoadingSkeleton as t } from "../../components/LoadingSkeleton.js";
-import { useDeleteConfigurationMutation as n, useListConfigurationsQuery as r, useSetConfigurationMutation as i } from "../../../generated/wspace-operations.js";
-import { PageLayout as a } from "../../components/PageLayout.js";
-import { EmptyState as o } from "../../components/EmptyState.js";
-import { TimeCampusConfigScope as s } from "../../../generated/wspace-types.js";
-import { Modal as c } from "../../components/Modal.js";
-import { useState as l } from "react";
-import { LayoutGrid as u, Plus as d, Trash2 as f } from "lucide-react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { formatDate as t } from "../../utils/helpers.js";
+import { StatCard as n } from "../../components/StatCard.js";
+import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
+import { useDeleteConfigurationMutation as i, useListConfigurationsQuery as a, useSetConfigurationMutation as o } from "../../../generated/wspace-operations.js";
+import { PageLayout as s } from "../../components/PageLayout.js";
+import { StatusBadge as c } from "../../components/StatusBadge.js";
+import { EmptyState as l } from "../../components/EmptyState.js";
+import { ChartCard as u } from "../../components/ChartCard.js";
+import { Modal as d } from "../../components/Modal.js";
+import { DonutChart as f } from "../../components/charts/DonutChart.js";
+import "../../components/index.js";
+import { TimeCampusConfigScope as p } from "../../../generated/wspace-types.js";
+import { useState as m } from "react";
+import { ArrowRight as h, Brain as g, CircleDollarSign as _, Clock as v, FileText as y, FolderKanban as b, Layers as x, LayoutGrid as S, Plus as C, Timer as w, Trash2 as T, Users as E } from "lucide-react";
+import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { GlassCard as A } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/pages/widgets/WidgetsPage.tsx
-var g = [
+var j = [
 	{
 		value: "timer",
 		label: "Active timer"
@@ -34,172 +41,249 @@ var g = [
 		value: "recent-entries",
 		label: "Recent time entries"
 	}
-];
-function _(e) {
-	return g.find((t) => t.value === e)?.label ?? e;
+], M = {
+	timer: w,
+	"project-progress": b,
+	"focus-score": g,
+	"team-stats": E,
+	"billable-hours": _,
+	"recent-entries": v
+};
+function N(e) {
+	return j.find((t) => t.value === e)?.label ?? e;
 }
-function v() {
-	let v = e(), { data: y, loading: b, error: x, refetch: S } = r({ variables: { scope: s.Workspace } }), [C, { loading: w, error: T }] = i(), [E] = n(), [D, O] = l(!1), [k, A] = l(""), [j, M] = l(g[0].value), [N, P] = l(""), [F, I] = l(null), L = (y?.configurations ?? []).filter((e) => e.key.startsWith("widget.")), R = () => {
-		A(""), M(g[0].value), P("");
-	}, z = () => {
-		R(), O(!0);
-	}, B = async () => {
-		if (!k.trim()) return;
-		let e = typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}`, t = N.trim();
-		await C({ variables: { input: {
+function ee(e) {
+	return M[e] ?? S;
+}
+function P() {
+	let g = e(), { data: _, loading: v, error: b, refetch: w } = a({ variables: { scope: p.Workspace } }), [E, { loading: M, error: P }] = o(), [F] = i(), [I, L] = m(!1), [R, z] = m(""), [B, V] = m(j[0].value), [H, U] = m(""), [W, G] = m(null), K = (_?.timeCampusConfigurations ?? []).filter((e) => e.key.startsWith("widget.")), q = K.reduce((e, t) => {
+		let n = (t.value ?? {}).type ?? "timer";
+		return e[n] = (e[n] ?? 0) + 1, e;
+	}, {}), J = Object.keys(q).length, Y = K.filter((e) => !!((e.value ?? {}).description ?? e.description)).length, X = Object.entries(q).sort((e, t) => t[1] - e[1]).map(([e, t]) => ({
+		name: N(e),
+		value: t
+	})), Z = () => {
+		z(""), V(j[0].value), U("");
+	}, Q = () => {
+		Z(), L(!0);
+	}, te = async () => {
+		if (!R.trim()) return;
+		let e = typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}`, t = H.trim();
+		await E({ variables: { input: {
 			key: `widget.${e}`,
-			scope: s.Workspace,
+			scope: p.Workspace,
 			value: {
-				name: k.trim(),
-				type: j,
+				name: R.trim(),
+				type: B,
 				description: t || void 0,
 				createdAt: (/* @__PURE__ */ new Date()).toISOString()
 			},
 			description: t || void 0
-		} } }), await S(), O(!1), R();
-	}, V = async (e) => {
-		I(e);
+		} } }), await w(), L(!1), Z();
+	}, ne = async (e) => {
+		G(e);
 		try {
-			await E({ variables: { id: e } }), await S();
+			await F({ variables: { id: e } }), await w();
 		} finally {
-			I(null);
+			G(null);
 		}
 	};
-	return b ? /* @__PURE__ */ m(a, {
+	if (v) return /* @__PURE__ */ O(s, {
 		title: "Widgets",
 		description: "Customize your dashboard with widgets",
-		children: /* @__PURE__ */ m(t, {
+		children: /* @__PURE__ */ O(r, {
 			variant: "card",
 			count: 6
 		})
-	}) : x ? /* @__PURE__ */ m(a, {
+	});
+	if (b) return /* @__PURE__ */ O(s, {
 		title: "Widgets",
 		description: "Customize your dashboard with widgets",
-		children: /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ O("div", {
 			className: "rounded-lg border border-status-error-bg/40 bg-status-error-bg p-4 text-sm text-status-error-text",
 			children: "Failed to load widget configurations. Please try again later."
 		})
-	}) : /* @__PURE__ */ h(a, {
+	});
+	let $ = /* @__PURE__ */ k("button", {
+		type: "button",
+		onClick: Q,
+		className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
+		children: [/* @__PURE__ */ O(C, { className: "h-4 w-4" }), "Create Widget"]
+	});
+	return /* @__PURE__ */ k(s, {
 		title: "Widgets",
 		description: "Customize your dashboard with widgets",
 		purpose: "Build a dashboard that shows what you care about — define widgets for timers, projects, focus and team stats so your most important numbers are the first thing you see. Each widget you create is saved to your workspace configuration.",
-		actions: /* @__PURE__ */ h("button", {
-			type: "button",
-			onClick: z,
-			className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
-			children: [/* @__PURE__ */ m(d, { className: "h-4 w-4" }), "Create Widget"]
-		}),
-		children: [L.length === 0 ? /* @__PURE__ */ m(o, {
+		actions: $,
+		children: [K.length === 0 ? /* @__PURE__ */ O(l, {
 			illustration: "empty-generic",
 			title: "No widgets configured yet",
 			description: "Add your first widget to start customising your dashboard — widgets are stored as workspace configurations and appear here.",
-			action: /* @__PURE__ */ h("button", {
-				type: "button",
-				onClick: z,
-				className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
-				children: [/* @__PURE__ */ m(d, { className: "h-4 w-4" }), "Create Widget"]
-			})
-		}) : /* @__PURE__ */ m("div", {
-			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-			children: L.map((e) => {
-				let t = e.value, n = t.name ?? e.key.replace("widget.", ""), r = t.type ?? "timer", i = t.description ?? e.description ?? "";
-				return /* @__PURE__ */ h("div", {
-					role: "button",
-					tabIndex: 0,
-					onClick: () => v(`/widgets/${e.id}`),
-					onKeyDown: (t) => {
-						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), v(`/widgets/${e.id}`));
-					},
-					className: "cursor-pointer rounded-xl border border-border-seam bg-gloss-card p-5 shadow-pop transition-colors hover:bg-bg-sunken/50",
-					children: [/* @__PURE__ */ h("div", {
-						className: "flex items-start justify-between gap-3",
-						children: [/* @__PURE__ */ h("div", {
-							className: "flex min-w-0 items-center gap-3",
-							children: [/* @__PURE__ */ m("div", {
-								className: "flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10",
-								children: /* @__PURE__ */ m(u, { className: "h-5 w-5 text-primary" })
-							}), /* @__PURE__ */ h("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ m("p", {
-									className: "truncate text-sm font-semibold text-text-primary",
-									children: n
-								}), /* @__PURE__ */ m("p", {
-									className: "text-xs text-text-secondary",
-									children: _(r)
-								})]
-							})]
-						}), /* @__PURE__ */ m("button", {
-							type: "button",
-							"aria-label": `Delete ${n}`,
-							disabled: F === e.id,
-							onClick: (t) => {
-								t.stopPropagation(), V(e.id);
-							},
-							className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-status-error-text disabled:opacity-50",
-							children: /* @__PURE__ */ m(f, { className: "h-4 w-4" })
-						})]
-					}), i && /* @__PURE__ */ m("p", {
-						className: "mt-3 line-clamp-2 text-xs text-text-secondary",
-						children: i
-					})]
-				}, e.id);
-			})
-		}), /* @__PURE__ */ h(c, {
-			open: D,
-			onClose: () => O(!1),
+			action: $
+		}) : /* @__PURE__ */ k("div", {
+			className: "space-y-6",
+			children: [/* @__PURE__ */ k("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ O(n, {
+						featured: !0,
+						title: "Widgets",
+						value: K.length,
+						icon: /* @__PURE__ */ O(S, { className: "h-5 w-5" }),
+						description: "On your dashboard"
+					}),
+					/* @__PURE__ */ O(n, {
+						title: "Metric Types",
+						value: J,
+						icon: /* @__PURE__ */ O(x, { className: "h-5 w-5" }),
+						description: "Distinct metrics",
+						iconBgColor: "bg-status-info-bg text-status-info-text"
+					}),
+					/* @__PURE__ */ O(n, {
+						title: "Documented",
+						value: Y,
+						icon: /* @__PURE__ */ O(y, { className: "h-5 w-5" }),
+						description: "Have a description",
+						iconBgColor: "bg-status-success-bg text-status-success-text"
+					})
+				]
+			}), /* @__PURE__ */ k("div", {
+				className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ O(u, {
+					title: "Dashboard composition",
+					description: "Widgets by metric",
+					className: "lg:col-span-1",
+					children: /* @__PURE__ */ O(f, {
+						data: X,
+						centerLabel: "Widgets",
+						centerValue: K.length,
+						height: 240,
+						ariaLabel: "Widgets grouped by metric type",
+						emptyLabel: "No widgets to summarise yet."
+					})
+				}), /* @__PURE__ */ O("div", {
+					className: "lg:col-span-2",
+					children: /* @__PURE__ */ O("div", {
+						className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+						children: K.map((e) => {
+							let n = e.value ?? {}, r = n.name ?? e.key.replace("widget.", ""), i = n.type ?? "timer", a = n.description ?? e.description ?? "", o = n.createdAt;
+							return /* @__PURE__ */ k(A, {
+								treatment: "glass",
+								role: "button",
+								tabIndex: 0,
+								onClick: () => g(`/widgets/${e.id}`),
+								onKeyDown: (t) => {
+									(t.key === "Enter" || t.key === " ") && (t.preventDefault(), g(`/widgets/${e.id}`));
+								},
+								className: "flex cursor-pointer flex-col p-5",
+								children: [
+									/* @__PURE__ */ k("div", {
+										className: "flex items-start justify-between gap-3",
+										children: [/* @__PURE__ */ k("div", {
+											className: "flex min-w-0 items-center gap-3",
+											children: [/* @__PURE__ */ O("div", {
+												className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-action-primary-bg/10 text-primary",
+												children: /* @__PURE__ */ O(ee(i), { className: "h-5 w-5" })
+											}), /* @__PURE__ */ k("div", {
+												className: "min-w-0",
+												children: [/* @__PURE__ */ O("p", {
+													className: "truncate text-sm font-semibold text-text-primary",
+													children: r
+												}), /* @__PURE__ */ O("div", {
+													className: "mt-1",
+													children: /* @__PURE__ */ O(c, {
+														variant: "default",
+														label: N(i)
+													})
+												})]
+											})]
+										}), /* @__PURE__ */ O("button", {
+											type: "button",
+											"aria-label": `Delete ${r}`,
+											disabled: W === e.id,
+											onClick: (t) => {
+												t.stopPropagation(), ne(e.id);
+											},
+											className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-status-error-text disabled:opacity-50",
+											children: /* @__PURE__ */ O(T, { className: "h-4 w-4" })
+										})]
+									}),
+									a && /* @__PURE__ */ O("p", {
+										className: "mt-3 line-clamp-2 text-xs text-text-secondary",
+										children: a
+									}),
+									/* @__PURE__ */ k("div", {
+										className: "mt-4 flex items-center justify-between border-t border-border-seam pt-3",
+										children: [/* @__PURE__ */ O("span", {
+											className: "text-xs text-text-secondary",
+											children: o ? `Added ${t(o)}` : "Widget"
+										}), /* @__PURE__ */ k("span", {
+											className: "inline-flex items-center gap-1 text-xs font-medium text-primary",
+											children: ["Configure", /* @__PURE__ */ O(h, { className: "h-3 w-3" })]
+										})]
+									})
+								]
+							}, e.id);
+						})
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ k(d, {
+			open: I,
+			onClose: () => L(!1),
 			title: "Create Widget",
 			description: "Define a dashboard widget for your workspace.",
-			footer: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
+			footer: /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O("button", {
 				type: "button",
-				onClick: () => O(!1),
+				onClick: () => L(!1),
 				className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
 				children: "Cancel"
-			}), /* @__PURE__ */ m("button", {
+			}), /* @__PURE__ */ O("button", {
 				type: "button",
-				onClick: B,
-				disabled: w || !k.trim(),
+				onClick: te,
+				disabled: M || !R.trim(),
 				className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
-				children: w ? "Creating..." : "Create Widget"
+				children: M ? "Creating..." : "Create Widget"
 			})] }),
-			children: [T && /* @__PURE__ */ m("div", {
+			children: [P && /* @__PURE__ */ O("div", {
 				className: "mb-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text",
 				children: "Failed to create widget. Please try again."
-			}), /* @__PURE__ */ h("div", {
+			}), /* @__PURE__ */ k("div", {
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+					/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
 						className: "block text-sm font-medium text-text-primary",
 						children: "Widget Name"
-					}), /* @__PURE__ */ m("input", {
+					}), /* @__PURE__ */ O("input", {
 						type: "text",
 						placeholder: "e.g. This week's billable hours",
-						value: k,
-						onChange: (e) => A(e.target.value),
+						value: R,
+						onChange: (e) => z(e.target.value),
 						className: "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary"
 					})] }),
-					/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+					/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
 						className: "block text-sm font-medium text-text-primary",
 						children: "Metric"
-					}), /* @__PURE__ */ m("select", {
-						value: j,
-						onChange: (e) => M(e.target.value),
+					}), /* @__PURE__ */ O("select", {
+						value: B,
+						onChange: (e) => V(e.target.value),
 						className: "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
-						children: g.map((e) => /* @__PURE__ */ m("option", {
+						children: j.map((e) => /* @__PURE__ */ O("option", {
 							value: e.value,
 							children: e.label
 						}, e.value))
 					})] }),
-					/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("label", {
+					/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ k("label", {
 						className: "block text-sm font-medium text-text-primary",
-						children: ["Description", /* @__PURE__ */ m("span", {
+						children: ["Description", /* @__PURE__ */ O("span", {
 							className: "ml-1 font-normal text-text-secondary",
 							children: "(optional)"
 						})]
-					}), /* @__PURE__ */ m("textarea", {
+					}), /* @__PURE__ */ O("textarea", {
 						placeholder: "What this widget shows",
 						rows: 3,
-						value: N,
-						onChange: (e) => P(e.target.value),
+						value: H,
+						onChange: (e) => U(e.target.value),
 						className: "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary"
 					})] })
 				]
@@ -208,6 +292,6 @@ function v() {
 	});
 }
 //#endregion
-export { v as WidgetsPage };
+export { P as WidgetsPage };
 
 //# sourceMappingURL=WidgetsPage.js.map

package/dist/timecampus/pages/widgets/WidgetsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetsPage.js","names":[],"sources":["../../../../src/timecampus/pages/widgets/WidgetsPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { LayoutGrid, Plus, Trash2 } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { EmptyState } from \"../../components/EmptyState\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { Modal } from \"../../components/Modal\";\nimport { useTimeCampusNavigate } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListConfigurationsQuery,\n  useSetConfigurationMutation,\n  useDeleteConfigurationMutation,\n  type ConfigurationFieldsFragment,\n} from \"@/generated/wspace-operations\";\nimport { TimeCampusConfigScope } from \"@/generated/wspace-types\";\n\nconst WIDGET_TYPES = [\n  { value: \"timer\", label: \"Active timer\" },\n  { value: \"project-progress\", label: \"Project progress\" },\n  { value: \"focus-score\", label: \"Focus score\" },\n  { value: \"team-stats\", label: \"Team stats\" },\n  { value: \"billable-hours\", label: \"Billable hours\" },\n  { value: \"recent-entries\", label: \"Recent time entries\" },\n];\n\nfunction widgetTypeLabel(value: string): string {\n  return WIDGET_TYPES.find((t) => t.value === value)?.label ?? value;\n}\n\nexport function WidgetsPage() {\n  const navigate = useTimeCampusNavigate();\n\n  const { data, loading, error, refetch } = useListConfigurationsQuery({\n    variables: { scope: TimeCampusConfigScope.Workspace },\n  });\n\n  const [setConfiguration, { loading: creating, error: createError }] =\n    useSetConfigurationMutation();\n  const [deleteConfiguration] = useDeleteConfigurationMutation();\n\n  const [modalOpen, setModalOpen] = useState(false);\n  const [name, setName] = useState(\"\");\n  const [type, setType] = useState(WIDGET_TYPES[0].value);\n  const [description, setDescription] = useState(\"\");\n  const [deletingId, setDeletingId] = useState<string | null>(null);\n\n  const configurations = data?.configurations ?? [];\n  const widgets = configurations.filter((c: ConfigurationFieldsFragment) =>\n    c.key.startsWith(\"widget.\"),\n  );\n\n  const resetForm = () => {\n    setName(\"\");\n    setType(WIDGET_TYPES[0].value);\n    setDescription(\"\");\n  };\n\n  const openModal = () => {\n    resetForm();\n    setModalOpen(true);\n  };\n\n  const handleCreate = async () => {\n    if (!name.trim()) return;\n    const id =\n      typeof crypto !== \"undefined\" && \"randomUUID\" in crypto\n        ? crypto.randomUUID()\n        : `${Date.now()}`;\n    const trimmedDescription = description.trim();\n    await setConfiguration({\n      variables: {\n        input: {\n          key: `widget.${id}`,\n          scope: TimeCampusConfigScope.Workspace,\n          value: {\n            name: name.trim(),\n            type,\n            description: trimmedDescription || undefined,\n            createdAt: new Date().toISOString(),\n          },\n          description: trimmedDescription || undefined,\n        },\n      },\n    });\n    await refetch();\n    setModalOpen(false);\n    resetForm();\n  };\n\n  const handleDelete = async (id: string) => {\n    setDeletingId(id);\n    try {\n      await deleteConfiguration({ variables: { id } });\n      await refetch();\n    } finally {\n      setDeletingId(null);\n    }\n  };\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"Widgets\"\n        description=\"Customize your dashboard with widgets\"\n      >\n        <LoadingSkeleton variant=\"card\" count={6} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"Widgets\"\n        description=\"Customize your dashboard with widgets\"\n      >\n        <div className=\"rounded-lg border border-status-error-bg/40 bg-status-error-bg p-4 text-sm text-status-error-text\">\n          Failed to load widget configurations. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Widgets\"\n      description=\"Customize your dashboard with widgets\"\n      purpose=\"Build a dashboard that shows what you care about — define widgets for timers, projects, focus and team stats so your most important numbers are the first thing you see. Each widget you create is saved to your workspace configuration.\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={openModal}\n          className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n        >\n          <Plus className=\"h-4 w-4\" />\n          Create Widget\n        </button>\n      }\n    >\n      {widgets.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-generic\"\n          title=\"No widgets configured yet\"\n          description=\"Add your first widget to start customising your dashboard — widgets are stored as workspace configurations and appear here.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={openModal}\n              className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n            >\n              <Plus className=\"h-4 w-4\" />\n              Create Widget\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {widgets.map((widget: ConfigurationFieldsFragment) => {\n            const val = widget.value as Record<string, unknown>;\n            const widgetName =\n              (val.name as string) ?? widget.key.replace(\"widget.\", \"\");\n            const widgetType = (val.type as string) ?? \"timer\";\n            const widgetDescription =\n              (val.description as string) ?? widget.description ?? \"\";\n\n            return (\n              <div\n                key={widget.id}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => navigate(`/widgets/${widget.id}`)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    navigate(`/widgets/${widget.id}`);\n                  }\n                }}\n                className=\"cursor-pointer rounded-xl border border-border-seam bg-gloss-card p-5 shadow-pop transition-colors hover:bg-bg-sunken/50\"\n              >\n                <div className=\"flex items-start justify-between gap-3\">\n                  <div className=\"flex min-w-0 items-center gap-3\">\n                    <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10\">\n                      <LayoutGrid className=\"h-5 w-5 text-primary\" />\n                    </div>\n                    <div className=\"min-w-0\">\n                      <p className=\"truncate text-sm font-semibold text-text-primary\">\n                        {widgetName}\n                      </p>\n                      <p className=\"text-xs text-text-secondary\">\n                        {widgetTypeLabel(widgetType)}\n                      </p>\n                    </div>\n                  </div>\n                  <button\n                    type=\"button\"\n                    aria-label={`Delete ${widgetName}`}\n                    disabled={deletingId === widget.id}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      void handleDelete(widget.id);\n                    }}\n                    className=\"rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-status-error-text disabled:opacity-50\"\n                  >\n                    <Trash2 className=\"h-4 w-4\" />\n                  </button>\n                </div>\n                {widgetDescription && (\n                  <p className=\"mt-3 line-clamp-2 text-xs text-text-secondary\">\n                    {widgetDescription}\n                  </p>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      <Modal\n        open={modalOpen}\n        onClose={() => setModalOpen(false)}\n        title=\"Create Widget\"\n        description=\"Define a dashboard widget for your workspace.\"\n        footer={\n          <>\n            <button\n              type=\"button\"\n              onClick={() => setModalOpen(false)}\n              className=\"rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\"\n            >\n              Cancel\n            </button>\n            <button\n              type=\"button\"\n              onClick={handleCreate}\n              disabled={creating || !name.trim()}\n              className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {creating ? \"Creating...\" : \"Create Widget\"}\n            </button>\n          </>\n        }\n      >\n        {createError && (\n          <div className=\"mb-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text\">\n            Failed to create widget. Please try again.\n          </div>\n        )}\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Widget Name\n            </label>\n            <input\n              type=\"text\"\n              placeholder=\"e.g. This week's billable hours\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Metric\n            </label>\n            <select\n              value={type}\n              onChange={(e) => setType(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n            >\n              {WIDGET_TYPES.map((t) => (\n                <option key={t.value} value={t.value}>\n                  {t.label}\n                </option>\n              ))}\n            </select>\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Description\n              <span className=\"ml-1 font-normal text-text-secondary\">\n                (optional)\n              </span>\n            </label>\n            <textarea\n              placeholder=\"What this widget shows\"\n              rows={3}\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n        </div>\n      </Modal>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"WidgetsPage.js","names":[],"sources":["../../../../src/timecampus/pages/widgets/WidgetsPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  LayoutGrid,\n  Plus,\n  Trash2,\n  ArrowRight,\n  Timer,\n  FolderKanban,\n  Brain,\n  Users,\n  CircleDollarSign,\n  Clock,\n  Layers,\n  FileText,\n  type LucideIcon,\n} from \"lucide-react\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport {\n  PageLayout,\n  EmptyState,\n  LoadingSkeleton,\n  Modal,\n  StatCard,\n  StatusBadge,\n  ChartCard,\n  DonutChart,\n} from \"../../components\";\nimport { formatDate } from \"../../utils/helpers\";\nimport { useTimeCampusNavigate } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListConfigurationsQuery,\n  useSetConfigurationMutation,\n  useDeleteConfigurationMutation,\n  type ConfigurationFieldsFragment,\n} from \"@/generated/wspace-operations\";\nimport { TimeCampusConfigScope } from \"@/generated/wspace-types\";\n\nconst WIDGET_TYPES = [\n  { value: \"timer\", label: \"Active timer\" },\n  { value: \"project-progress\", label: \"Project progress\" },\n  { value: \"focus-score\", label: \"Focus score\" },\n  { value: \"team-stats\", label: \"Team stats\" },\n  { value: \"billable-hours\", label: \"Billable hours\" },\n  { value: \"recent-entries\", label: \"Recent time entries\" },\n];\n\nconst WIDGET_TYPE_ICONS: Record<string, LucideIcon> = {\n  timer: Timer,\n  \"project-progress\": FolderKanban,\n  \"focus-score\": Brain,\n  \"team-stats\": Users,\n  \"billable-hours\": CircleDollarSign,\n  \"recent-entries\": Clock,\n};\n\nfunction widgetTypeLabel(value: string): string {\n  return WIDGET_TYPES.find((t) => t.value === value)?.label ?? value;\n}\n\nfunction widgetTypeIcon(value: string): LucideIcon {\n  return WIDGET_TYPE_ICONS[value] ?? LayoutGrid;\n}\n\nexport function WidgetsPage() {\n  const navigate = useTimeCampusNavigate();\n\n  const { data, loading, error, refetch } = useListConfigurationsQuery({\n    variables: { scope: TimeCampusConfigScope.Workspace },\n  });\n\n  const [setConfiguration, { loading: creating, error: createError }] =\n    useSetConfigurationMutation();\n  const [deleteConfiguration] = useDeleteConfigurationMutation();\n\n  const [modalOpen, setModalOpen] = useState(false);\n  const [name, setName] = useState(\"\");\n  const [type, setType] = useState(WIDGET_TYPES[0].value);\n  const [description, setDescription] = useState(\"\");\n  const [deletingId, setDeletingId] = useState<string | null>(null);\n\n  const configurations: ConfigurationFieldsFragment[] =\n    data?.timeCampusConfigurations ?? [];\n  const widgets = configurations.filter((c: ConfigurationFieldsFragment) =>\n    c.key.startsWith(\"widget.\"),\n  );\n\n  // Real, derived aggregates over the widget definitions the page already loads.\n  const typeCounts = widgets.reduce<Record<string, number>>((acc, widget) => {\n    const val = (widget.value as Record<string, unknown>) ?? {};\n    const t = (val.type as string) ?? \"timer\";\n    acc[t] = (acc[t] ?? 0) + 1;\n    return acc;\n  }, {});\n  const distinctTypes = Object.keys(typeCounts).length;\n  const documentedCount = widgets.filter((widget) => {\n    const val = (widget.value as Record<string, unknown>) ?? {};\n    return Boolean((val.description as string) ?? widget.description);\n  }).length;\n  const mixData = Object.entries(typeCounts)\n    .sort((a, b) => b[1] - a[1])\n    .map(([t, count]) => ({ name: widgetTypeLabel(t), value: count }));\n\n  const resetForm = () => {\n    setName(\"\");\n    setType(WIDGET_TYPES[0].value);\n    setDescription(\"\");\n  };\n\n  const openModal = () => {\n    resetForm();\n    setModalOpen(true);\n  };\n\n  const handleCreate = async () => {\n    if (!name.trim()) return;\n    const id =\n      typeof crypto !== \"undefined\" && \"randomUUID\" in crypto\n        ? crypto.randomUUID()\n        : `${Date.now()}`;\n    const trimmedDescription = description.trim();\n    await setConfiguration({\n      variables: {\n        input: {\n          key: `widget.${id}`,\n          scope: TimeCampusConfigScope.Workspace,\n          value: {\n            name: name.trim(),\n            type,\n            description: trimmedDescription || undefined,\n            createdAt: new Date().toISOString(),\n          },\n          description: trimmedDescription || undefined,\n        },\n      },\n    });\n    await refetch();\n    setModalOpen(false);\n    resetForm();\n  };\n\n  const handleDelete = async (id: string) => {\n    setDeletingId(id);\n    try {\n      await deleteConfiguration({ variables: { id } });\n      await refetch();\n    } finally {\n      setDeletingId(null);\n    }\n  };\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"Widgets\"\n        description=\"Customize your dashboard with widgets\"\n      >\n        <LoadingSkeleton variant=\"card\" count={6} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"Widgets\"\n        description=\"Customize your dashboard with widgets\"\n      >\n        <div className=\"rounded-lg border border-status-error-bg/40 bg-status-error-bg p-4 text-sm text-status-error-text\">\n          Failed to load widget configurations. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const createButton = (\n    <button\n      type=\"button\"\n      onClick={openModal}\n      className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\"\n    >\n      <Plus className=\"h-4 w-4\" />\n      Create Widget\n    </button>\n  );\n\n  return (\n    <PageLayout\n      title=\"Widgets\"\n      description=\"Customize your dashboard with widgets\"\n      purpose=\"Build a dashboard that shows what you care about — define widgets for timers, projects, focus and team stats so your most important numbers are the first thing you see. Each widget you create is saved to your workspace configuration.\"\n      actions={createButton}\n    >\n      {widgets.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-generic\"\n          title=\"No widgets configured yet\"\n          description=\"Add your first widget to start customising your dashboard — widgets are stored as workspace configurations and appear here.\"\n          action={createButton}\n        />\n      ) : (\n        <div className=\"space-y-6\">\n          {/* KPI summary — derived from the widget definitions above */}\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n            <StatCard\n              featured\n              title=\"Widgets\"\n              value={widgets.length}\n              icon={<LayoutGrid className=\"h-5 w-5\" />}\n              description=\"On your dashboard\"\n            />\n            <StatCard\n              title=\"Metric Types\"\n              value={distinctTypes}\n              icon={<Layers className=\"h-5 w-5\" />}\n              description=\"Distinct metrics\"\n              iconBgColor=\"bg-status-info-bg text-status-info-text\"\n            />\n            <StatCard\n              title=\"Documented\"\n              value={documentedCount}\n              icon={<FileText className=\"h-5 w-5\" />}\n              description=\"Have a description\"\n              iconBgColor=\"bg-status-success-bg text-status-success-text\"\n            />\n          </div>\n\n          {/* Composition ring + widget gallery */}\n          <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n            <ChartCard\n              title=\"Dashboard composition\"\n              description=\"Widgets by metric\"\n              className=\"lg:col-span-1\"\n            >\n              <DonutChart\n                data={mixData}\n                centerLabel=\"Widgets\"\n                centerValue={widgets.length}\n                height={240}\n                ariaLabel=\"Widgets grouped by metric type\"\n                emptyLabel=\"No widgets to summarise yet.\"\n              />\n            </ChartCard>\n\n            <div className=\"lg:col-span-2\">\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                {widgets.map((widget: ConfigurationFieldsFragment) => {\n                  const val = (widget.value as Record<string, unknown>) ?? {};\n                  const widgetName =\n                    (val.name as string) ?? widget.key.replace(\"widget.\", \"\");\n                  const widgetType = (val.type as string) ?? \"timer\";\n                  const widgetDescription =\n                    (val.description as string) ?? widget.description ?? \"\";\n                  const createdAt = val.createdAt as string | undefined;\n                  const Icon = widgetTypeIcon(widgetType);\n\n                  return (\n                    <GlassCard\n                      key={widget.id}\n                      treatment=\"glass\"\n                      role=\"button\"\n                      tabIndex={0}\n                      onClick={() => navigate(`/widgets/${widget.id}`)}\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                          e.preventDefault();\n                          navigate(`/widgets/${widget.id}`);\n                        }\n                      }}\n                      className=\"flex cursor-pointer flex-col p-5\"\n                    >\n                      <div className=\"flex items-start justify-between gap-3\">\n                        <div className=\"flex min-w-0 items-center gap-3\">\n                          <div className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-action-primary-bg/10 text-primary\">\n                            <Icon className=\"h-5 w-5\" />\n                          </div>\n                          <div className=\"min-w-0\">\n                            <p className=\"truncate text-sm font-semibold text-text-primary\">\n                              {widgetName}\n                            </p>\n                            <div className=\"mt-1\">\n                              <StatusBadge\n                                variant=\"default\"\n                                label={widgetTypeLabel(widgetType)}\n                              />\n                            </div>\n                          </div>\n                        </div>\n                        <button\n                          type=\"button\"\n                          aria-label={`Delete ${widgetName}`}\n                          disabled={deletingId === widget.id}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            void handleDelete(widget.id);\n                          }}\n                          className=\"rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-status-error-text disabled:opacity-50\"\n                        >\n                          <Trash2 className=\"h-4 w-4\" />\n                        </button>\n                      </div>\n                      {widgetDescription && (\n                        <p className=\"mt-3 line-clamp-2 text-xs text-text-secondary\">\n                          {widgetDescription}\n                        </p>\n                      )}\n                      <div className=\"mt-4 flex items-center justify-between border-t border-border-seam pt-3\">\n                        <span className=\"text-xs text-text-secondary\">\n                          {createdAt\n                            ? `Added ${formatDate(createdAt)}`\n                            : \"Widget\"}\n                        </span>\n                        <span className=\"inline-flex items-center gap-1 text-xs font-medium text-primary\">\n                          Configure\n                          <ArrowRight className=\"h-3 w-3\" />\n                        </span>\n                      </div>\n                    </GlassCard>\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n\n      <Modal\n        open={modalOpen}\n        onClose={() => setModalOpen(false)}\n        title=\"Create Widget\"\n        description=\"Define a dashboard widget for your workspace.\"\n        footer={\n          <>\n            <button\n              type=\"button\"\n              onClick={() => setModalOpen(false)}\n              className=\"rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\"\n            >\n              Cancel\n            </button>\n            <button\n              type=\"button\"\n              onClick={handleCreate}\n              disabled={creating || !name.trim()}\n              className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {creating ? \"Creating...\" : \"Create Widget\"}\n            </button>\n          </>\n        }\n      >\n        {createError && (\n          <div className=\"mb-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text\">\n            Failed to create widget. Please try again.\n          </div>\n        )}\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Widget Name\n            </label>\n            <input\n              type=\"text\"\n              placeholder=\"e.g. This week's billable hours\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Metric\n            </label>\n            <select\n              value={type}\n              onChange={(e) => setType(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n            >\n              {WIDGET_TYPES.map((t) => (\n                <option key={t.value} value={t.value}>\n                  {t.label}\n                </option>\n              ))}\n            </select>\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Description\n              <span className=\"ml-1 font-normal text-text-secondary\">\n                (optional)\n              </span>\n            </label>\n            <textarea\n              placeholder=\"What this widget shows\"\n              rows={3}\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n        </div>\n      </Modal>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}