@burdenoff/microfe-timecampus 2026.703.1 → 2026.703.2

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

@@ -1,107 +1,189 @@
-import { useTimeCampus as e, useTimeCampusNavigate as t } from "../../providers/TimeCampusProvider.js";
-import { LoadingSkeleton as n } from "../../components/LoadingSkeleton.js";
-import { useGetConfigurationQuery as r } from "../../../generated/wspace-operations.js";
-import { PageLayout as i } from "../../components/PageLayout.js";
-import { ArrowLeft as a, Download as o, LayoutGrid as s, Star as c } from "lucide-react";
-import { useParams as l } from "react-router-dom";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { GlassCard as f, NextSteps as p } from "@burdenoff/fe-libs/ui";
+import { useTimeCampusNavigate as e } from "../../providers/TimeCampusProvider.js";
+import { LoadingSkeleton as t } from "../../components/LoadingSkeleton.js";
+import { useDeleteConfigurationMutation as n, useGetConfigurationQuery as r, useUpdateConfigurationMutation as i } from "../../../generated/wspace-operations.js";
+import { PageLayout as a } from "../../components/PageLayout.js";
+import { useEffect as o, useState as s } from "react";
+import { ArrowLeft as c, LayoutGrid as l, Save as u, Trash2 as d } from "lucide-react";
+import { useParams as f } from "react-router-dom";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { GlassCard as h, NextSteps as g } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/pages/widgets/WidgetDetailPage.tsx
-function m() {
-	let { id: m } = l(), { workspaceId: h = "" } = e(), g = t(), { data: _, loading: v, error: y } = r({
-		variables: { id: m ?? "" },
-		skip: !m
-	}), b = _?.configuration, x = b?.value ?? {}, S = x.name ?? b?.key?.replace("widget.", "") ?? "Widget", C = b?.description ?? x.description ?? "A configurable dashboard widget for time tracking.", w = x.rating ?? 0, T = x.downloads ?? 0;
-	return v ? /* @__PURE__ */ u(i, {
+var _ = [
+	{
+		value: "timer",
+		label: "Active timer"
+	},
+	{
+		value: "project-progress",
+		label: "Project progress"
+	},
+	{
+		value: "focus-score",
+		label: "Focus score"
+	},
+	{
+		value: "team-stats",
+		label: "Team stats"
+	},
+	{
+		value: "billable-hours",
+		label: "Billable hours"
+	},
+	{
+		value: "recent-entries",
+		label: "Recent time entries"
+	}
+];
+function v() {
+	let { id: v } = f(), y = e(), { data: b, loading: x, error: S } = r({
+		variables: { id: v ?? "" },
+		skip: !v
+	}), [C, { loading: w, error: T }] = i(), [E, { loading: D }] = n(), O = b?.configuration, [k, A] = s(""), [j, M] = s(_[0].value), [N, P] = s("");
+	o(() => {
+		if (O) {
+			let e = O.value ?? {};
+			A(e.name ?? O.key.replace("widget.", "")), M(e.type ?? _[0].value), P(e.description ?? O.description ?? "");
+		}
+	}, [O]);
+	let F = async () => {
+		if (!O || !k.trim()) return;
+		let e = O.value ?? {}, t = N.trim();
+		await C({ variables: {
+			id: O.id,
+			input: {
+				value: {
+					...e,
+					name: k.trim(),
+					type: j,
+					description: t || void 0
+				},
+				description: t || void 0
+			}
+		} }), y("/widgets");
+	};
+	return x ? /* @__PURE__ */ p(a, {
 		title: "Widget Details",
 		description: "Loading...",
-		children: /* @__PURE__ */ u(n, { variant: "detail" })
-	}) : y || !b ? /* @__PURE__ */ u(i, {
+		children: /* @__PURE__ */ p(t, { variant: "detail" })
+	}) : S || !O ? /* @__PURE__ */ p(a, {
 		title: "Widget Details",
-		description: `Widget ID: ${m}`,
-		actions: /* @__PURE__ */ d("button", {
+		description: `Widget ID: ${v}`,
+		actions: /* @__PURE__ */ m("button", {
+			type: "button",
+			onClick: () => y("/widgets"),
 			className: "inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
-			children: [/* @__PURE__ */ u(a, { className: "h-4 w-4" }), "Back to Widgets"]
+			children: [/* @__PURE__ */ p(c, { className: "h-4 w-4" }), "Back to Widgets"]
 		}),
-		children: /* @__PURE__ */ u("div", {
+		children: /* @__PURE__ */ p("div", {
 			className: "rounded-lg border border-status-error-bg/40 bg-status-error-bg p-4 text-sm text-status-error-text",
-			children: y ? "Failed to load widget details. Please try again later." : "Widget configuration not found."
+			children: S ? "Failed to load widget details. Please try again later." : "Widget configuration not found."
 		})
-	}) : /* @__PURE__ */ u(i, {
+	}) : /* @__PURE__ */ p(a, {
 		title: "Widget Details",
-		description: `Widget ID: ${m}`,
-		purpose: "Preview what a widget shows and how it behaves before adding it to your dashboard, so you only install the panels that genuinely help you keep an eye on your time.",
-		actions: /* @__PURE__ */ d("button", {
+		description: `Widget ID: ${v}`,
+		purpose: "Edit what this widget shows and how it's labelled, then save it back to your workspace — or remove it if you no longer need it on your dashboard.",
+		actions: /* @__PURE__ */ m("button", {
+			type: "button",
+			onClick: () => y("/widgets"),
 			className: "inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
-			children: [/* @__PURE__ */ u(a, { className: "h-4 w-4" }), "Back to Widgets"]
+			children: [/* @__PURE__ */ p(c, { className: "h-4 w-4" }), "Back to Widgets"]
 		}),
-		children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "mx-auto max-w-2xl",
-			children: [/* @__PURE__ */ u(p, {
+			children: [/* @__PURE__ */ p(g, {
 				storageKey: "timecampus-widget-detail",
 				className: "mb-6",
 				steps: [{
-					id: "install",
-					label: "Install this widget",
-					description: "Add it to your dashboard.",
-					onClick: () => {}
+					id: "save",
+					label: "Save your changes",
+					description: "Update this widget's name, metric or description.",
+					onClick: () => void F()
 				}, {
 					id: "browse",
 					label: "Browse other widgets",
-					description: "Find more panels for your dashboard.",
-					onClick: () => g("/widgets")
+					description: "Manage the rest of your dashboard widgets.",
+					onClick: () => y("/widgets")
 				}]
-			}), /* @__PURE__ */ d(f, {
+			}), /* @__PURE__ */ m(h, {
 				treatment: "glass",
 				glow: !0,
 				className: "p-6",
 				children: [
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ m("div", {
 						className: "flex items-start gap-4",
-						children: [/* @__PURE__ */ u("div", {
+						children: [/* @__PURE__ */ p("div", {
 							className: "flex h-16 w-16 items-center justify-center rounded-xl bg-action-primary-bg/10",
-							children: /* @__PURE__ */ u(s, { className: "h-8 w-8 text-primary" })
-						}), /* @__PURE__ */ d("div", {
+							children: /* @__PURE__ */ p(l, { className: "h-8 w-8 text-primary" })
+						}), /* @__PURE__ */ m("div", {
 							className: "flex-1",
-							children: [
-								/* @__PURE__ */ u("h2", {
-									className: "text-lg font-semibold text-text-primary",
-									children: S
-								}),
-								/* @__PURE__ */ u("p", {
-									className: "text-sm text-text-secondary",
-									children: C
-								}),
-								/* @__PURE__ */ d("div", {
-									className: "mt-2 flex items-center gap-3 text-sm text-text-secondary",
-									children: [
-										/* @__PURE__ */ d("div", {
-											className: "flex items-center gap-1",
-											children: [/* @__PURE__ */ u(c, { className: "h-4 w-4 fill-amber-400 text-status-warning-text" }), /* @__PURE__ */ u("span", { children: w })]
-										}),
-										/* @__PURE__ */ u("span", { children: "·" }),
-										/* @__PURE__ */ d("div", {
-											className: "flex items-center gap-1",
-											children: [/* @__PURE__ */ u(o, { className: "h-4 w-4" }), /* @__PURE__ */ d("span", { children: [T.toLocaleString(), " installs"] })]
-										})
-									]
-								})
-							]
+							children: [/* @__PURE__ */ p("h2", {
+								className: "text-lg font-semibold text-text-primary",
+								children: k || "Untitled widget"
+							}), /* @__PURE__ */ p("p", {
+								className: "text-sm text-text-secondary",
+								children: "This widget is saved to your workspace and can be shown on your dashboard."
+							})]
 						})]
 					}),
-					/* @__PURE__ */ u("div", {
-						className: "mt-6 flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle",
-						children: /* @__PURE__ */ u("p", {
-							className: "text-sm text-text-secondary",
-							children: "Widget preview will render here"
-						})
+					T && /* @__PURE__ */ p("div", {
+						className: "mt-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text",
+						children: "Failed to save widget. Please try again."
 					}),
-					/* @__PURE__ */ u("div", {
-						className: "mt-4 flex justify-end",
-						children: /* @__PURE__ */ u("button", {
-							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",
-							children: "Install Widget"
-						})
+					/* @__PURE__ */ m("div", {
+						className: "mt-6 space-y-4",
+						children: [
+							/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Widget Name"
+							}), /* @__PURE__ */ p("input", {
+								type: "text",
+								value: k,
+								onChange: (e) => A(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__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Metric"
+							}), /* @__PURE__ */ p("select", {
+								value: j,
+								onChange: (e) => M(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: _.map((e) => /* @__PURE__ */ p("option", {
+									value: e.value,
+									children: e.label
+								}, e.value))
+							})] }),
+							/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: ["Description", /* @__PURE__ */ p("span", {
+									className: "ml-1 font-normal text-text-secondary",
+									children: "(optional)"
+								})]
+							}), /* @__PURE__ */ p("textarea", {
+								rows: 3,
+								value: N,
+								onChange: (e) => P(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__ */ m("div", {
+						className: "mt-6 flex items-center justify-between",
+						children: [/* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: async () => {
+								O && (await E({ variables: { id: O.id } }), y("/widgets"));
+							},
+							disabled: D,
+							className: "inline-flex items-center gap-1.5 rounded-md border border-status-error-bg/40 px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg disabled:opacity-50",
+							children: [/* @__PURE__ */ p(d, { className: "h-4 w-4" }), D ? "Deleting..." : "Delete"]
+						}), /* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: F,
+							disabled: w || !k.trim(),
+							className: "inline-flex items-center gap-1.5 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: [/* @__PURE__ */ p(u, { className: "h-4 w-4" }), w ? "Saving..." : "Save Changes"]
+						})]
 					})
 				]
 			})]
@@ -109,6 +191,6 @@ function m() {
 	});
 }
 //#endregion
-export { m as WidgetDetailPage };
+export { v as WidgetDetailPage };
 
 //# sourceMappingURL=WidgetDetailPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WidgetDetailPage.js","names":[],"sources":["../../../../src/timecampus/pages/widgets/WidgetDetailPage.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\";\nimport { LayoutGrid, ArrowLeft, Star, Download } from \"lucide-react\";\nimport { GlassCard, NextSteps } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport {\n  useTimeCampus,\n  useTimeCampusNavigate,\n} from \"../../providers/TimeCampusProvider\";\nimport { useGetConfigurationQuery } from \"@/generated/wspace-operations\";\n\nexport function WidgetDetailPage() {\n  const { id } = useParams<{ id: string }>();\n  const { workspaceId = \"\" } = useTimeCampus();\n  const navigate = useTimeCampusNavigate();\n\n  const { data, loading, error } = useGetConfigurationQuery({\n    variables: { id: id ?? \"\" },\n    skip: !id,\n  });\n\n  const config = data?.configuration;\n  const val = (config?.value as Record<string, unknown>) ?? {};\n  const name =\n    (val.name as string) ?? config?.key?.replace(\"widget.\", \"\") ?? \"Widget\";\n  const description =\n    config?.description ??\n    (val.description as string) ??\n    \"A configurable dashboard widget for time tracking.\";\n  const rating = (val.rating as number) ?? 0;\n  const installs = (val.downloads as number) ?? 0;\n\n  if (loading) {\n    return (\n      <PageLayout title=\"Widget Details\" description=\"Loading...\">\n        <LoadingSkeleton variant=\"detail\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !config) {\n    return (\n      <PageLayout\n        title=\"Widget Details\"\n        description={`Widget ID: ${id}`}\n        actions={\n          <button className=\"inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\">\n            <ArrowLeft className=\"h-4 w-4\" />\n            Back to Widgets\n          </button>\n        }\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          {error\n            ? \"Failed to load widget details. Please try again later.\"\n            : \"Widget configuration not found.\"}\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Widget Details\"\n      description={`Widget ID: ${id}`}\n      purpose=\"Preview what a widget shows and how it behaves before adding it to your dashboard, so you only install the panels that genuinely help you keep an eye on your time.\"\n      actions={\n        <button className=\"inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\">\n          <ArrowLeft className=\"h-4 w-4\" />\n          Back to Widgets\n        </button>\n      }\n    >\n      <div className=\"mx-auto max-w-2xl\">\n        <NextSteps\n          storageKey=\"timecampus-widget-detail\"\n          className=\"mb-6\"\n          steps={[\n            {\n              id: \"install\",\n              label: \"Install this widget\",\n              description: \"Add it to your dashboard.\",\n              onClick: () => {},\n            },\n            {\n              id: \"browse\",\n              label: \"Browse other widgets\",\n              description: \"Find more panels for your dashboard.\",\n              onClick: () => navigate(\"/widgets\"),\n            },\n          ]}\n        />\n        <GlassCard treatment=\"glass\" glow className=\"p-6\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"flex h-16 w-16 items-center justify-center rounded-xl bg-action-primary-bg/10\">\n              <LayoutGrid className=\"h-8 w-8 text-primary\" />\n            </div>\n            <div className=\"flex-1\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {name}\n              </h2>\n              <p className=\"text-sm text-text-secondary\">{description}</p>\n              <div className=\"mt-2 flex items-center gap-3 text-sm text-text-secondary\">\n                <div className=\"flex items-center gap-1\">\n                  <Star className=\"h-4 w-4 fill-amber-400 text-status-warning-text\" />\n                  <span>{rating}</span>\n                </div>\n                <span>&middot;</span>\n                <div className=\"flex items-center gap-1\">\n                  <Download className=\"h-4 w-4\" />\n                  <span>{installs.toLocaleString()} installs</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div className=\"mt-6 flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle\">\n            <p className=\"text-sm text-text-secondary\">\n              Widget preview will render here\n            </p>\n          </div>\n          <div className=\"mt-4 flex justify-end\">\n            <button 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\">\n              Install Widget\n            </button>\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;AAWA,SAAgB,IAAmB;CACjC,IAAM,EAAE,UAAO,GAA2B,EACpC,EAAE,iBAAc,OAAO,GAAe,EACtC,IAAW,GAAuB,EAElC,EAAE,SAAM,YAAS,aAAU,EAAyB;EACxD,WAAW,EAAE,IAAI,KAAM,IAAI;EAC3B,MAAM,CAAC;EACR,CAAC,EAEI,IAAS,GAAM,eACf,IAAO,GAAQ,SAAqC,EAAE,EACtD,IACH,EAAI,QAAmB,GAAQ,KAAK,QAAQ,WAAW,GAAG,IAAI,UAC3D,IACJ,GAAQ,eACP,EAAI,eACL,sDACI,IAAU,EAAI,UAAqB,GACnC,IAAY,EAAI,aAAwB;AA+B9C,QA7BI,IAEA,kBAAC,GAAD;EAAY,OAAM;EAAiB,aAAY;YAC7C,kBAAC,GAAD,EAAiB,SAAQ,UAAW,CAAA;EACzB,CAAA,GAIb,KAAS,CAAC,IAEV,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,cAAc;EAC3B,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,kBAE1B;;YAGX,kBAAC,OAAD;GAAK,WAAU;aACZ,IACG,2DACA;GACA,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,cAAc;EAC3B,SAAQ;EACR,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,kBAE1B;;YAGX,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACE,YAAW;IACX,WAAU;IACV,OAAO,CACL;KACE,IAAI;KACJ,OAAO;KACP,aAAa;KACb,eAAe;KAChB,EACD;KACE,IAAI;KACJ,OAAO;KACP,aAAa;KACb,eAAe,EAAS,WAAW;KACpC,CACF;IACD,CAAA,EACF,kBAAC,GAAD;IAAW,WAAU;IAAQ,MAAA;IAAK,WAAU;cAA5C;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAY,WAAU,wBAAyB,CAAA;OAC3C,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,MAAD;SAAI,WAAU;mBACX;SACE,CAAA;QACL,kBAAC,KAAD;SAAG,WAAU;mBAA+B;SAAgB,CAAA;QAC5D,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,mDAAoD,CAAA,EACpE,kBAAC,QAAD,EAAA,UAAO,GAAc,CAAA,CACjB;;UACN,kBAAC,QAAD,EAAA,UAAM,KAAe,CAAA;UACrB,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAChC,kBAAC,QAAD,EAAA,UAAA,CAAO,EAAS,gBAAgB,EAAC,YAAgB,EAAA,CAAA,CAC7C;;UACF;;QACF;SACF;;KACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBAA8B;OAEvC,CAAA;MACA,CAAA;KACN,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,UAAD;OAAQ,WAAU;iBAAuH;OAEhI,CAAA;MACL,CAAA;KACI;MACR;;EACK,CAAA"}
+{"version":3,"file":"WidgetDetailPage.js","names":[],"sources":["../../../../src/timecampus/pages/widgets/WidgetDetailPage.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { LayoutGrid, ArrowLeft, Save, Trash2 } from \"lucide-react\";\nimport { GlassCard, NextSteps } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { useTimeCampusNavigate } from \"../../providers/TimeCampusProvider\";\nimport {\n  useGetConfigurationQuery,\n  useUpdateConfigurationMutation,\n  useDeleteConfigurationMutation,\n} from \"@/generated/wspace-operations\";\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\nexport function WidgetDetailPage() {\n  const { id } = useParams<{ id: string }>();\n  const navigate = useTimeCampusNavigate();\n\n  const { data, loading, error } = useGetConfigurationQuery({\n    variables: { id: id ?? \"\" },\n    skip: !id,\n  });\n\n  const [updateConfiguration, { loading: saving, error: saveError }] =\n    useUpdateConfigurationMutation();\n  const [deleteConfiguration, { loading: deleting }] =\n    useDeleteConfigurationMutation();\n\n  const config = data?.configuration;\n\n  const [name, setName] = useState(\"\");\n  const [type, setType] = useState(WIDGET_TYPES[0].value);\n  const [description, setDescription] = useState(\"\");\n\n  useEffect(() => {\n    if (config) {\n      const val = (config.value as Record<string, unknown>) ?? {};\n      setName((val.name as string) ?? config.key.replace(\"widget.\", \"\"));\n      setType((val.type as string) ?? WIDGET_TYPES[0].value);\n      setDescription((val.description as string) ?? config.description ?? \"\");\n    }\n  }, [config]);\n\n  const handleSave = async () => {\n    if (!config || !name.trim()) return;\n    const val = (config.value as Record<string, unknown>) ?? {};\n    const trimmedDescription = description.trim();\n    await updateConfiguration({\n      variables: {\n        id: config.id,\n        input: {\n          value: {\n            ...val,\n            name: name.trim(),\n            type,\n            description: trimmedDescription || undefined,\n          },\n          description: trimmedDescription || undefined,\n        },\n      },\n    });\n    navigate(\"/widgets\");\n  };\n\n  const handleDelete = async () => {\n    if (!config) return;\n    await deleteConfiguration({ variables: { id: config.id } });\n    navigate(\"/widgets\");\n  };\n\n  if (loading) {\n    return (\n      <PageLayout title=\"Widget Details\" description=\"Loading...\">\n        <LoadingSkeleton variant=\"detail\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !config) {\n    return (\n      <PageLayout\n        title=\"Widget Details\"\n        description={`Widget ID: ${id}`}\n        actions={\n          <button\n            type=\"button\"\n            onClick={() => navigate(\"/widgets\")}\n            className=\"inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\"\n          >\n            <ArrowLeft className=\"h-4 w-4\" />\n            Back to Widgets\n          </button>\n        }\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          {error\n            ? \"Failed to load widget details. Please try again later.\"\n            : \"Widget configuration not found.\"}\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Widget Details\"\n      description={`Widget ID: ${id}`}\n      purpose=\"Edit what this widget shows and how it's labelled, then save it back to your workspace — or remove it if you no longer need it on your dashboard.\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigate(\"/widgets\")}\n          className=\"inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" />\n          Back to Widgets\n        </button>\n      }\n    >\n      <div className=\"mx-auto max-w-2xl\">\n        <NextSteps\n          storageKey=\"timecampus-widget-detail\"\n          className=\"mb-6\"\n          steps={[\n            {\n              id: \"save\",\n              label: \"Save your changes\",\n              description: \"Update this widget's name, metric or description.\",\n              onClick: () => void handleSave(),\n            },\n            {\n              id: \"browse\",\n              label: \"Browse other widgets\",\n              description: \"Manage the rest of your dashboard widgets.\",\n              onClick: () => navigate(\"/widgets\"),\n            },\n          ]}\n        />\n        <GlassCard treatment=\"glass\" glow className=\"p-6\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"flex h-16 w-16 items-center justify-center rounded-xl bg-action-primary-bg/10\">\n              <LayoutGrid className=\"h-8 w-8 text-primary\" />\n            </div>\n            <div className=\"flex-1\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {name || \"Untitled widget\"}\n              </h2>\n              <p className=\"text-sm text-text-secondary\">\n                This widget is saved to your workspace and can be shown on your\n                dashboard.\n              </p>\n            </div>\n          </div>\n\n          {saveError && (\n            <div className=\"mt-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text\">\n              Failed to save widget. Please try again.\n            </div>\n          )}\n\n          <div className=\"mt-6 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                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                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\n          <div className=\"mt-6 flex items-center justify-between\">\n            <button\n              type=\"button\"\n              onClick={handleDelete}\n              disabled={deleting}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-status-error-bg/40 px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg disabled:opacity-50\"\n            >\n              <Trash2 className=\"h-4 w-4\" />\n              {deleting ? \"Deleting...\" : \"Delete\"}\n            </button>\n            <button\n              type=\"button\"\n              onClick={handleSave}\n              disabled={saving || !name.trim()}\n              className=\"inline-flex items-center gap-1.5 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              <Save className=\"h-4 w-4\" />\n              {saving ? \"Saving...\" : \"Save Changes\"}\n            </button>\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,84 +1,213 @@
-import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
+import { useTimeCampusNavigate as e } from "../../providers/TimeCampusProvider.js";
 import { LoadingSkeleton as t } from "../../components/LoadingSkeleton.js";
-import { useListConfigurationsQuery as n } from "../../../generated/wspace-operations.js";
-import { PageLayout as r } from "../../components/PageLayout.js";
-import { EmptyState as i } from "../../components/EmptyState.js";
-import { LayoutGrid as a, Plus as o, Star as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+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";
 //#region src/timecampus/pages/widgets/WidgetsPage.tsx
-function u() {
-	let { workspaceId: u = "" } = e(), { data: d, loading: f, error: p } = n({ variables: { scope: "WORKSPACE" } }), m = (d?.configurations ?? []).filter((e) => e.key.startsWith("widget."));
-	return f ? /* @__PURE__ */ c(r, {
+var g = [
+	{
+		value: "timer",
+		label: "Active timer"
+	},
+	{
+		value: "project-progress",
+		label: "Project progress"
+	},
+	{
+		value: "focus-score",
+		label: "Focus score"
+	},
+	{
+		value: "team-stats",
+		label: "Team stats"
+	},
+	{
+		value: "billable-hours",
+		label: "Billable hours"
+	},
+	{
+		value: "recent-entries",
+		label: "Recent time entries"
+	}
+];
+function _(e) {
+	return g.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: {
+			key: `widget.${e}`,
+			scope: s.Workspace,
+			value: {
+				name: k.trim(),
+				type: j,
+				description: t || void 0,
+				createdAt: (/* @__PURE__ */ new Date()).toISOString()
+			},
+			description: t || void 0
+		} } }), await S(), O(!1), R();
+	}, V = async (e) => {
+		I(e);
+		try {
+			await E({ variables: { id: e } }), await S();
+		} finally {
+			I(null);
+		}
+	};
+	return b ? /* @__PURE__ */ m(a, {
 		title: "Widgets",
 		description: "Customize your dashboard with widgets",
-		children: /* @__PURE__ */ c(t, {
+		children: /* @__PURE__ */ m(t, {
 			variant: "card",
 			count: 6
 		})
-	}) : p ? /* @__PURE__ */ c(r, {
+	}) : x ? /* @__PURE__ */ m(a, {
 		title: "Widgets",
 		description: "Customize your dashboard with widgets",
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ m("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__ */ c(r, {
+	}) : /* @__PURE__ */ h(a, {
 		title: "Widgets",
 		description: "Customize your dashboard with widgets",
-		purpose: "Build a dashboard that shows what you care about — pick and arrange widgets for timers, projects, focus and team stats so your most important numbers are the first thing you see.",
-		actions: /* @__PURE__ */ l("button", {
+		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__ */ c(o, { className: "h-4 w-4" }), "Create Widget"]
+			children: [/* @__PURE__ */ m(d, { className: "h-4 w-4" }), "Create Widget"]
 		}),
-		children: m.length === 0 ? /* @__PURE__ */ c(i, {
+		children: [L.length === 0 ? /* @__PURE__ */ m(o, {
 			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__ */ l("button", {
+			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__ */ c(o, { className: "h-4 w-4" }), "Create Widget"]
+				children: [/* @__PURE__ */ m(d, { className: "h-4 w-4" }), "Create Widget"]
 			})
-		}) : /* @__PURE__ */ c("div", {
+		}) : /* @__PURE__ */ m("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-			children: m.map((e) => {
-				let t = e.value, n = t.name ?? e.key.replace("widget.", ""), r = t.category ?? "General", i = t.size ?? "medium", o = t.isInstalled ?? !1, u = t.rating ?? 0, d = t.downloads ?? 0;
-				return /* @__PURE__ */ l("div", {
-					className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-5 transition-colors hover:bg-bg-sunken/50 cursor-pointer",
-					children: [/* @__PURE__ */ l("div", {
-						className: "flex items-start justify-between",
-						children: [/* @__PURE__ */ l("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ c("div", {
+			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__ */ c(a, { className: "h-5 w-5 text-primary" })
-							}), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
-								className: "text-sm font-semibold text-text-primary",
-								children: n
-							}), /* @__PURE__ */ l("p", {
-								className: "text-xs text-text-secondary",
-								children: [
-									r,
-									" · ",
-									i
-								]
-							})] })]
-						}), o && /* @__PURE__ */ c("span", {
-							className: "inline-flex rounded-full bg-status-success-bg px-2 py-0.5 text-xs font-medium text-status-success-text",
-							children: "Installed"
+								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" })
 						})]
-					}), /* @__PURE__ */ l("div", {
-						className: "mt-3 flex items-center justify-between text-xs text-text-secondary",
-						children: [/* @__PURE__ */ l("div", {
-							className: "flex items-center gap-1",
-							children: [/* @__PURE__ */ c(s, { className: "h-3 w-3 fill-amber-400 text-status-warning-text" }), /* @__PURE__ */ c("span", { children: u })]
-						}), /* @__PURE__ */ l("span", { children: [d, " downloads"] })]
+					}), 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),
+			title: "Create Widget",
+			description: "Define a dashboard widget for your workspace.",
+			footer: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
+				type: "button",
+				onClick: () => O(!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", {
+				type: "button",
+				onClick: B,
+				disabled: w || !k.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: [T && /* @__PURE__ */ m("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", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+						className: "block text-sm font-medium text-text-primary",
+						children: "Widget Name"
+					}), /* @__PURE__ */ m("input", {
+						type: "text",
+						placeholder: "e.g. This week's billable hours",
+						value: k,
+						onChange: (e) => A(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", {
+						className: "block text-sm font-medium text-text-primary",
+						children: "Metric"
+					}), /* @__PURE__ */ m("select", {
+						value: j,
+						onChange: (e) => M(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", {
+							value: e.value,
+							children: e.label
+						}, e.value))
+					})] }),
+					/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("label", {
+						className: "block text-sm font-medium text-text-primary",
+						children: ["Description", /* @__PURE__ */ m("span", {
+							className: "ml-1 font-normal text-text-secondary",
+							children: "(optional)"
+						})]
+					}), /* @__PURE__ */ m("textarea", {
+						placeholder: "What this widget shows",
+						rows: 3,
+						value: N,
+						onChange: (e) => P(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"
+					})] })
+				]
+			})]
+		})]
 	});
 }
 //#endregion
-export { u as WidgetsPage };
+export { v as WidgetsPage };
 
 //# sourceMappingURL=WidgetsPage.js.map