@burdenoff/microfe-timecampus 2026.703.1 → 2026.703.3

package/dist/timecampus/pages/applets/InstalledAppletsPage.js

@@ -1,89 +1,101 @@
-import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
-import { getStatusColor as t } from "../../utils/helpers.js";
-import { LoadingSkeleton as n } from "../../components/LoadingSkeleton.js";
-import { useListConfigurationsQuery as r } from "../../../generated/wspace-operations.js";
+import { getStatusColor as e } from "../../utils/helpers.js";
+import { LoadingSkeleton as t } from "../../components/LoadingSkeleton.js";
+import { useDeleteConfigurationMutation as n, useListConfigurationsQuery as r } from "../../../generated/wspace-operations.js";
 import { PageLayout as i } from "../../components/PageLayout.js";
 import { EmptyState as a } from "../../components/EmptyState.js";
-import { Puzzle as o, Settings as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { GlassCard as u } from "@burdenoff/fe-libs/ui";
+import { TimeCampusConfigScope as o } from "../../../generated/wspace-types.js";
+import { useState as s } from "react";
+import { Puzzle as c, Trash2 as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { GlassCard as f } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/pages/applets/InstalledAppletsPage.tsx
-function d() {
-	let { workspaceId: d = "" } = e(), { data: f, loading: p, error: m } = r({ variables: { scope: "WORKSPACE" } }), h = (f?.configurations ?? []).filter((e) => e.key.startsWith("applet.installed."));
-	return p ? /* @__PURE__ */ c(i, {
+function p() {
+	let { data: p, loading: m, error: h, refetch: g } = r({ variables: { scope: o.Workspace } }), [_] = n(), [v, y] = s(null), b = async (e) => {
+		y(e);
+		try {
+			await _({ variables: { id: e } }), await g();
+		} finally {
+			y(null);
+		}
+	}, x = (p?.configurations ?? []).filter((e) => e.key.startsWith("applet.installed."));
+	return m ? /* @__PURE__ */ u(i, {
 		title: "Installed Applets",
 		description: "Manage your installed applets and integrations",
-		children: /* @__PURE__ */ c(n, {
+		children: /* @__PURE__ */ u(t, {
 			variant: "list",
 			count: 5
 		})
-	}) : m ? /* @__PURE__ */ c(i, {
+	}) : h ? /* @__PURE__ */ u(i, {
 		title: "Installed Applets",
 		description: "Manage your installed applets and integrations",
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ u("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 installed applets. Please try again later."
 		})
-	}) : /* @__PURE__ */ c(i, {
+	}) : /* @__PURE__ */ u(i, {
 		title: "Installed Applets",
 		description: "Manage your installed applets and integrations",
 		purpose: "See and manage every add-on running in your workspace — enable, configure or update them in one place so you stay in control of how TimeCampus is extended.",
-		children: h.length === 0 ? /* @__PURE__ */ c(a, {
+		children: x.length === 0 ? /* @__PURE__ */ u(a, {
 			illustration: "empty-generic",
 			title: "No applets installed yet",
 			description: "Browse the applet store to add integrations and trackers — installed applets are stored as workspace configurations and appear here."
-		}) : /* @__PURE__ */ c(u, {
+		}) : /* @__PURE__ */ u(f, {
 			treatment: "glass",
 			glow: !0,
 			className: "overflow-hidden",
-			children: /* @__PURE__ */ c("div", {
+			children: /* @__PURE__ */ u("div", {
 				className: "divide-y divide-border",
-				children: h.map((e) => {
-					let n = e.value, r = n.name ?? e.key.replace("applet.installed.", ""), i = n.category ?? "general", a = n.version ?? "1.0.0", u = n.author ?? "Unknown", d = n.isActive ?? !0, f = n.updateAvailable ?? !1;
-					return /* @__PURE__ */ l("div", {
+				children: x.map((t) => {
+					let n = t.value, r = n.name ?? t.key.replace("applet.installed.", ""), i = n.category ?? "general", a = n.version ?? "1.0.0", o = n.author ?? "Unknown", s = n.isActive ?? !0, f = n.updateAvailable ?? !1;
+					return /* @__PURE__ */ d("div", {
 						className: "flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors",
-						children: [/* @__PURE__ */ l("div", {
+						children: [/* @__PURE__ */ d("div", {
 							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ c("div", {
+							children: [/* @__PURE__ */ u("div", {
 								className: "flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10",
-								children: /* @__PURE__ */ c(o, { className: "h-5 w-5 text-primary" })
-							}), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ l("div", {
+								children: /* @__PURE__ */ u(c, { className: "h-5 w-5 text-primary" })
+							}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ c("p", {
+								children: [/* @__PURE__ */ u("p", {
 									className: "text-sm font-medium text-text-primary",
 									children: r
-								}), f && /* @__PURE__ */ c("span", {
+								}), f && /* @__PURE__ */ u("span", {
 									className: "inline-flex rounded-full bg-status-info-bg px-2 py-0.5 text-xs font-medium text-status-info-text",
 									children: "Update"
 								})]
-							}), /* @__PURE__ */ l("p", {
+							}), /* @__PURE__ */ d("p", {
 								className: "text-xs text-text-secondary",
 								children: [
 									"v",
 									a,
 									" · by ",
-									u,
+									o,
 									" · ",
 									i
 								]
 							})] })]
-						}), /* @__PURE__ */ l("div", {
+						}), /* @__PURE__ */ d("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ c("span", {
-								className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${t(d ? "active" : "inactive")}`,
-								children: d ? "Active" : "Disabled"
-							}), /* @__PURE__ */ c("button", {
-								className: "rounded-md p-1.5 hover:bg-bg-sunken",
-								children: /* @__PURE__ */ c(s, { className: "h-4 w-4 text-text-secondary" })
+							children: [/* @__PURE__ */ u("span", {
+								className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${e(s ? "active" : "inactive")}`,
+								children: s ? "Active" : "Disabled"
+							}), /* @__PURE__ */ u("button", {
+								type: "button",
+								"aria-label": `Uninstall ${r}`,
+								disabled: v === t.id,
+								onClick: () => void b(t.id),
+								className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-status-error-text disabled:opacity-50",
+								children: /* @__PURE__ */ u(l, { className: "h-4 w-4" })
 							})]
 						})]
-					}, e.id);
+					}, t.id);
 				})
 			})
 		})
 	});
 }
 //#endregion
-export { d as InstalledAppletsPage };
+export { p as InstalledAppletsPage };
 
 //# sourceMappingURL=InstalledAppletsPage.js.map

package/dist/timecampus/pages/applets/InstalledAppletsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InstalledAppletsPage.js","names":[],"sources":["../../../../src/timecampus/pages/applets/InstalledAppletsPage.tsx"],"sourcesContent":["import { Puzzle, Settings } from \"lucide-react\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { EmptyState } from \"../../components/EmptyState\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { getStatusColor } from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListConfigurationsQuery,\n  type ConfigurationFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function InstalledAppletsPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const { data, loading, error } = useListConfigurationsQuery({\n    variables: { scope: \"WORKSPACE\" as any },\n  });\n\n  const configurations = data?.configurations ?? [];\n\n  // Filter configurations that represent installed applets (key starts with 'applet.installed.')\n  const applets = configurations.filter((c: ConfigurationFieldsFragment) =>\n    c.key.startsWith(\"applet.installed.\"),\n  );\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"Installed Applets\"\n        description=\"Manage your installed applets and integrations\"\n      >\n        <LoadingSkeleton variant=\"list\" count={5} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"Installed Applets\"\n        description=\"Manage your installed applets and integrations\"\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 installed applets. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Installed Applets\"\n      description=\"Manage your installed applets and integrations\"\n      purpose=\"See and manage every add-on running in your workspace — enable, configure or update them in one place so you stay in control of how TimeCampus is extended.\"\n    >\n      {applets.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-generic\"\n          title=\"No applets installed yet\"\n          description=\"Browse the applet store to add integrations and trackers — installed applets are stored as workspace configurations and appear here.\"\n        />\n      ) : (\n        <GlassCard treatment=\"glass\" glow className=\"overflow-hidden\">\n          <div className=\"divide-y divide-border\">\n            {applets.map((applet: ConfigurationFieldsFragment) => {\n              const val = applet.value as Record<string, unknown>;\n              const name =\n                (val.name as string) ??\n                applet.key.replace(\"applet.installed.\", \"\");\n              const category = (val.category as string) ?? \"general\";\n              const version = (val.version as string) ?? \"1.0.0\";\n              const author = (val.author as string) ?? \"Unknown\";\n              const isActive = (val.isActive as boolean) ?? true;\n              const hasUpdate = (val.updateAvailable as boolean) ?? false;\n\n              return (\n                <div\n                  key={applet.id}\n                  className=\"flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors\"\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10\">\n                      <Puzzle className=\"h-5 w-5 text-primary\" />\n                    </div>\n                    <div>\n                      <div className=\"flex items-center gap-2\">\n                        <p className=\"text-sm font-medium text-text-primary\">\n                          {name}\n                        </p>\n                        {hasUpdate && (\n                          <span className=\"inline-flex rounded-full bg-status-info-bg px-2 py-0.5 text-xs font-medium text-status-info-text\">\n                            Update\n                          </span>\n                        )}\n                      </div>\n                      <p className=\"text-xs text-text-secondary\">\n                        v{version} &middot; by {author} &middot; {category}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2\">\n                    <span\n                      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(isActive ? \"active\" : \"inactive\")}`}\n                    >\n                      {isActive ? \"Active\" : \"Disabled\"}\n                    </span>\n                    <button className=\"rounded-md p-1.5 hover:bg-bg-sunken\">\n                      <Settings className=\"h-4 w-4 text-text-secondary\" />\n                    </button>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </GlassCard>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;AAYA,SAAgB,IAAuB;CACrC,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EAAE,SAAM,YAAS,aAAU,EAA2B,EAC1D,WAAW,EAAE,OAAO,aAAoB,EACzC,CAAC,EAKI,KAHiB,GAAM,kBAAkB,EAAE,EAGlB,QAAQ,MACrC,EAAE,IAAI,WAAW,oBAAoB,CACtC;AA0BD,QAxBI,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA;EACjC,CAAA,GAIb,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAAoG;GAE7G,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SAAQ;YAEP,EAAQ,WAAW,IAClB,kBAAC,GAAD;GACE,cAAa;GACb,OAAM;GACN,aAAY;GACZ,CAAA,GAEF,kBAAC,GAAD;GAAW,WAAU;GAAQ,MAAA;GAAK,WAAU;aAC1C,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAQ,KAAK,MAAwC;KACpD,IAAM,IAAM,EAAO,OACb,IACH,EAAI,QACL,EAAO,IAAI,QAAQ,qBAAqB,GAAG,EACvC,IAAY,EAAI,YAAuB,WACvC,IAAW,EAAI,WAAsB,SACrC,IAAU,EAAI,UAAqB,WACnC,IAAY,EAAI,YAAwB,IACxC,IAAa,EAAI,mBAA+B;AAEtD,YACE,kBAAC,OAAD;MAEE,WAAU;gBAFZ,CAIE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAQ,WAAU,wBAAyB,CAAA;QACvC,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,KAAD;SAAG,WAAU;mBACV;SACC,CAAA,EACH,KACC,kBAAC,QAAD;SAAM,WAAU;mBAAmG;SAE5G,CAAA,CAEL;WACN,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAA2C;SACvC;SAAQ;SAAc;SAAO;SAAW;SACxC;UACA,EAAA,CAAA,CACF;UACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QACE,WAAW,4DAA4D,EAAe,IAAW,WAAW,WAAW;kBAEtH,IAAW,WAAW;QAClB,CAAA,EACP,kBAAC,UAAD;QAAQ,WAAU;kBAChB,kBAAC,GAAD,EAAU,WAAU,+BAAgC,CAAA;QAC7C,CAAA,CACL;SACF;QAjCC,EAAO,GAiCR;MAER;IACE,CAAA;GACI,CAAA;EAEH,CAAA"}
+{"version":3,"file":"InstalledAppletsPage.js","names":[],"sources":["../../../../src/timecampus/pages/applets/InstalledAppletsPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Puzzle, Trash2 } from \"lucide-react\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { EmptyState } from \"../../components/EmptyState\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { getStatusColor } from \"../../utils/helpers\";\nimport {\n  useListConfigurationsQuery,\n  useDeleteConfigurationMutation,\n  type ConfigurationFieldsFragment,\n} from \"@/generated/wspace-operations\";\nimport { TimeCampusConfigScope } from \"@/generated/wspace-types\";\n\nexport function InstalledAppletsPage() {\n  const { data, loading, error, refetch } = useListConfigurationsQuery({\n    variables: { scope: TimeCampusConfigScope.Workspace },\n  });\n  const [deleteConfiguration] = useDeleteConfigurationMutation();\n  const [uninstallingId, setUninstallingId] = useState<string | null>(null);\n\n  const handleUninstall = async (id: string) => {\n    setUninstallingId(id);\n    try {\n      await deleteConfiguration({ variables: { id } });\n      await refetch();\n    } finally {\n      setUninstallingId(null);\n    }\n  };\n\n  const configurations = data?.configurations ?? [];\n\n  // Filter configurations that represent installed applets (key starts with 'applet.installed.')\n  const applets = configurations.filter((c: ConfigurationFieldsFragment) =>\n    c.key.startsWith(\"applet.installed.\"),\n  );\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"Installed Applets\"\n        description=\"Manage your installed applets and integrations\"\n      >\n        <LoadingSkeleton variant=\"list\" count={5} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"Installed Applets\"\n        description=\"Manage your installed applets and integrations\"\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 installed applets. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Installed Applets\"\n      description=\"Manage your installed applets and integrations\"\n      purpose=\"See and manage every add-on running in your workspace — enable, configure or update them in one place so you stay in control of how TimeCampus is extended.\"\n    >\n      {applets.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-generic\"\n          title=\"No applets installed yet\"\n          description=\"Browse the applet store to add integrations and trackers — installed applets are stored as workspace configurations and appear here.\"\n        />\n      ) : (\n        <GlassCard treatment=\"glass\" glow className=\"overflow-hidden\">\n          <div className=\"divide-y divide-border\">\n            {applets.map((applet: ConfigurationFieldsFragment) => {\n              const val = applet.value as Record<string, unknown>;\n              const name =\n                (val.name as string) ??\n                applet.key.replace(\"applet.installed.\", \"\");\n              const category = (val.category as string) ?? \"general\";\n              const version = (val.version as string) ?? \"1.0.0\";\n              const author = (val.author as string) ?? \"Unknown\";\n              const isActive = (val.isActive as boolean) ?? true;\n              const hasUpdate = (val.updateAvailable as boolean) ?? false;\n\n              return (\n                <div\n                  key={applet.id}\n                  className=\"flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors\"\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10\">\n                      <Puzzle className=\"h-5 w-5 text-primary\" />\n                    </div>\n                    <div>\n                      <div className=\"flex items-center gap-2\">\n                        <p className=\"text-sm font-medium text-text-primary\">\n                          {name}\n                        </p>\n                        {hasUpdate && (\n                          <span className=\"inline-flex rounded-full bg-status-info-bg px-2 py-0.5 text-xs font-medium text-status-info-text\">\n                            Update\n                          </span>\n                        )}\n                      </div>\n                      <p className=\"text-xs text-text-secondary\">\n                        v{version} &middot; by {author} &middot; {category}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2\">\n                    <span\n                      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(isActive ? \"active\" : \"inactive\")}`}\n                    >\n                      {isActive ? \"Active\" : \"Disabled\"}\n                    </span>\n                    <button\n                      type=\"button\"\n                      aria-label={`Uninstall ${name}`}\n                      disabled={uninstallingId === applet.id}\n                      onClick={() => void handleUninstall(applet.id)}\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                </div>\n              );\n            })}\n          </div>\n        </GlassCard>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAcA,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,YAAS,UAAO,eAAY,EAA2B,EACnE,WAAW,EAAE,OAAO,EAAsB,WAAW,EACtD,CAAC,EACI,CAAC,KAAuB,GAAgC,EACxD,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EAEnE,IAAkB,OAAO,MAAe;AAC5C,IAAkB,EAAG;AACrB,MAAI;AAEF,GADA,MAAM,EAAoB,EAAE,WAAW,EAAE,OAAI,EAAE,CAAC,EAChD,MAAM,GAAS;YACP;AACR,KAAkB,KAAK;;IAOrB,KAHiB,GAAM,kBAAkB,EAAE,EAGlB,QAAQ,MACrC,EAAE,IAAI,WAAW,oBAAoB,CACtC;AA0BD,QAxBI,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA;EACjC,CAAA,GAIb,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAAoG;GAE7G,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SAAQ;YAEP,EAAQ,WAAW,IAClB,kBAAC,GAAD;GACE,cAAa;GACb,OAAM;GACN,aAAY;GACZ,CAAA,GAEF,kBAAC,GAAD;GAAW,WAAU;GAAQ,MAAA;GAAK,WAAU;aAC1C,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAQ,KAAK,MAAwC;KACpD,IAAM,IAAM,EAAO,OACb,IACH,EAAI,QACL,EAAO,IAAI,QAAQ,qBAAqB,GAAG,EACvC,IAAY,EAAI,YAAuB,WACvC,IAAW,EAAI,WAAsB,SACrC,IAAU,EAAI,UAAqB,WACnC,IAAY,EAAI,YAAwB,IACxC,IAAa,EAAI,mBAA+B;AAEtD,YACE,kBAAC,OAAD;MAEE,WAAU;gBAFZ,CAIE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAQ,WAAU,wBAAyB,CAAA;QACvC,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,KAAD;SAAG,WAAU;mBACV;SACC,CAAA,EACH,KACC,kBAAC,QAAD;SAAM,WAAU;mBAAmG;SAE5G,CAAA,CAEL;WACN,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAA2C;SACvC;SAAQ;SAAc;SAAO;SAAW;SACxC;UACA,EAAA,CAAA,CACF;UACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QACE,WAAW,4DAA4D,EAAe,IAAW,WAAW,WAAW;kBAEtH,IAAW,WAAW;QAClB,CAAA,EACP,kBAAC,UAAD;QACE,MAAK;QACL,cAAY,aAAa;QACzB,UAAU,MAAmB,EAAO;QACpC,eAAe,KAAK,EAAgB,EAAO,GAAG;QAC9C,WAAU;kBAEV,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;QACvB,CAAA,CACL;SACF;QAvCC,EAAO,GAuCR;MAER;IACE,CAAA;GACI,CAAA;EAEH,CAAA"}

package/dist/timecampus/pages/application-usage/ApplicationUsagePage.js

@@ -2,121 +2,349 @@ import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
 import { formatHours as t } from "../../utils/helpers.js";
 import { StatCard as n } from "../../components/StatCard.js";
 import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
-import { useGetAppUsageSummaryQuery as i, useListApplicationUsagesQuery as a } from "../../../generated/wspace-operations.js";
+import { useCategorizeApplicationMutation as ee, useDeleteApplicationUsageMutation as te, useGetAppUsageSummaryQuery as i, useListApplicationUsagesQuery as a, useRecordApplicationUsageMutation as ne } from "../../../generated/wspace-operations.js";
 import { PageLayout as o } from "../../components/PageLayout.js";
-import { EmptyState as s } from "../../components/EmptyState.js";
-import { Clock as c, Monitor as l } from "lucide-react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { EmptyState as re } from "../../components/EmptyState.js";
+import { Modal as s } from "../../components/Modal.js";
+import { useState as c } from "react";
+import { Clock as ie, Monitor as l, Plus as u, Tag 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/application-usage/ApplicationUsagePage.tsx
-var f = {
+var g = 50, _ = [
+	"productive",
+	"neutral",
+	"communication",
+	"distracting"
+], ae = {
 	productive: "bg-status-success-bg text-status-success-text",
 	neutral: "bg-bg-sunken text-text-secondary",
 	communication: "bg-status-info-bg text-status-info-text",
 	distracting: "bg-status-error-bg text-status-error-text"
-};
-function p() {
-	let { workspaceId: p = "" } = e(), { data: m, loading: h, error: g } = a({
-		variables: { limit: 50 },
-		skip: !p
-	}), { data: _, loading: v, error: y } = i({ skip: !p }), b = h || v, x = g || y, S = m?.applicationUsages ?? [], C = _?.appUsageSummary, w = S.reduce((e, t) => e + t.timeSpent, 0), T = S.reduce((e, t) => e + t.switches, 0), E = C?.productivityRatio == null ? "--" : `${Math.round(C.productivityRatio * 100)}%`, D = S.filter((e) => e.timeSpent >= 5400).length;
-	return b ? /* @__PURE__ */ u(o, {
+}, v = "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", y = "block text-sm font-medium text-text-primary";
+function oe() {
+	return (/* @__PURE__ */ new Date()).toISOString();
+}
+function b() {
+	let { workspaceId: b = "" } = e(), { data: x, loading: S, error: C, fetchMore: w, refetch: T } = a({
+		variables: {
+			limit: g,
+			offset: 0
+		},
+		skip: !b,
+		notifyOnNetworkStatusChange: !0
+	}), { data: E, loading: se, error: ce, refetch: le } = i({ skip: !b }), ue = S || se, de = C || ce, D = x?.applicationUsages ?? [], O = E?.appUsageSummary, fe = D.length > 0 && D.length % g === 0, [k, A] = c(!1), [j, M] = c(!1), [N, P] = c(""), [F, I] = c("productive"), [L, R] = c(""), [z, B] = c(""), [V, H] = c(null), [U, W] = c("productive"), [G, K] = c(null), [pe, { loading: q, error: me }] = ne(), [he, { loading: J, error: ge }] = ee(), [_e, { loading: Y, error: ve }] = te(), X = async () => {
+		await Promise.all([T(), le()]);
+	}, Z = () => {
+		P(""), I("productive"), R(""), B(""), M(!0);
+	}, ye = async () => {
+		!N.trim() || !L || (await pe({ variables: { input: {
+			applicationName: N.trim(),
+			category: F,
+			timeSpent: Math.round(Number(L) * 60),
+			sessions: z ? Number(z) : void 0,
+			date: oe()
+		} } }), M(!1), await X());
+	}, be = (e) => {
+		H(e), W(e.category);
+	}, xe = async () => {
+		V && (await he({ variables: {
+			applicationName: V.applicationName,
+			category: U
+		} }), H(null), await X());
+	}, Se = async () => {
+		G && (await _e({ variables: { id: G.id } }), K(null), await X());
+	}, Ce = async () => {
+		A(!0);
+		try {
+			await w({
+				variables: { offset: D.length },
+				updateQuery: (e, { fetchMoreResult: t }) => t ? {
+					...e,
+					applicationUsages: [...e.applicationUsages, ...t.applicationUsages]
+				} : e
+			});
+		} finally {
+			A(!1);
+		}
+	}, Q = D.reduce((e, t) => e + t.timeSpent, 0), $ = D.reduce((e, t) => e + t.switches, 0), we = O?.productivityRatio == null ? "--" : `${Math.round(O.productivityRatio * 100)}%`, Te = D.filter((e) => e.timeSpent >= 5400).length;
+	return ue ? /* @__PURE__ */ m(o, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
-		children: /* @__PURE__ */ u(r, {
+		children: /* @__PURE__ */ m(r, {
 			variant: "card",
 			count: 4
 		})
-	}) : x ? /* @__PURE__ */ u(o, {
+	}) : de ? /* @__PURE__ */ m(o, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
-		children: /* @__PURE__ */ u("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "rounded-xl border border-status-error-border/50 bg-status-error-bg/10 p-4 text-sm text-status-error-text",
 			children: "Failed to load application usage. Please try again later."
 		})
-	}) : /* @__PURE__ */ d(o, {
+	}) : /* @__PURE__ */ h(o, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
 		purpose: "See where your screen time actually goes — which apps are productive, how often you context-switch, and how many real focus sessions you get — so you can cut the digital distractions eating your day.",
-		children: [/* @__PURE__ */ d("div", {
-			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
-			children: [
-				/* @__PURE__ */ u(n, {
-					featured: !0,
-					title: "Total Screen Time",
-					value: t(w / 3600),
-					icon: /* @__PURE__ */ u(l, { className: "h-5 w-5" })
-				}),
-				/* @__PURE__ */ u(n, {
-					title: "Productive Time",
-					value: E,
-					trend: C?.productivityRatio == null ? void 0 : {
-						value: 5,
-						label: "vs last week"
-					}
-				}),
-				/* @__PURE__ */ u(n, {
-					title: "App Switches",
-					value: String(T),
-					description: `Avg. ${S.length > 0 ? Math.round(T / S.length) : 0}/app`
-				}),
-				/* @__PURE__ */ u(n, {
-					title: "Focus Sessions",
-					value: String(D),
-					icon: /* @__PURE__ */ u(c, { className: "h-5 w-5" }),
-					description: "90+ min each"
+		actions: /* @__PURE__ */ h("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(u, { className: "h-4 w-4" }), "Add Usage"]
+		}),
+		children: [
+			/* @__PURE__ */ h("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ m(n, {
+						featured: !0,
+						title: "Total Screen Time",
+						value: t(Q / 3600),
+						icon: /* @__PURE__ */ m(l, { className: "h-5 w-5" })
+					}),
+					/* @__PURE__ */ m(n, {
+						title: "Productive Time",
+						value: we,
+						trend: O?.productivityRatio == null ? void 0 : {
+							value: 5,
+							label: "vs last week"
+						}
+					}),
+					/* @__PURE__ */ m(n, {
+						title: "App Switches",
+						value: String($),
+						description: `Avg. ${D.length > 0 ? Math.round($ / D.length) : 0}/app`
+					}),
+					/* @__PURE__ */ m(n, {
+						title: "Focus Sessions",
+						value: String(Te),
+						icon: /* @__PURE__ */ m(ie, { className: "h-5 w-5" }),
+						description: "90+ min each"
+					})
+				]
+			}),
+			D.length === 0 ? /* @__PURE__ */ m(re, {
+				illustration: "empty-data",
+				title: "No application usage data found",
+				description: "Record app usage manually or connect the desktop tracker, and your apps will appear here ranked by time spent.",
+				action: /* @__PURE__ */ h("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(u, { className: "h-4 w-4" }), "Add Usage"]
 				})
-			]
-		}), S.length === 0 ? /* @__PURE__ */ u(s, {
-			illustration: "empty-data",
-			title: "No application usage data found",
-			description: "Once the desktop tracker is active, the apps you use will appear here ranked by time spent."
-		}) : /* @__PURE__ */ u("div", {
-			className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
-			children: /* @__PURE__ */ u("div", {
-				className: "divide-y divide-border",
-				children: S.map((e) => /* @__PURE__ */ d("div", {
-					className: "flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors",
-					children: [/* @__PURE__ */ d("div", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ u(l, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-							className: "text-sm font-medium text-text-primary",
-							children: e.applicationName
-						}), /* @__PURE__ */ d("p", {
-							className: "text-xs text-text-secondary",
-							children: [e.sessions, " sessions"]
-						})] })]
-					}), /* @__PURE__ */ d("div", {
-						className: "flex items-center gap-4",
-						children: [
-							/* @__PURE__ */ u("div", {
-								className: "text-right",
-								children: /* @__PURE__ */ u("p", {
+			}) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
+				className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
+				children: /* @__PURE__ */ m("div", {
+					className: "divide-y divide-border",
+					children: D.map((e) => /* @__PURE__ */ h("div", {
+						className: "flex items-center justify-between gap-3 p-4 transition-colors hover:bg-bg-sunken/50",
+						children: [/* @__PURE__ */ h("div", {
+							className: "flex min-w-0 items-center gap-3",
+							children: [/* @__PURE__ */ m(l, { className: "h-5 w-5 shrink-0 text-text-secondary" }), /* @__PURE__ */ h("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ m("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: e.applicationName
+								}), /* @__PURE__ */ h("p", {
+									className: "text-xs text-text-secondary",
+									children: [e.sessions, " sessions"]
+								})]
+							})]
+						}), /* @__PURE__ */ h("div", {
+							className: "flex shrink-0 items-center gap-3 sm:gap-4",
+							children: [
+								/* @__PURE__ */ m("p", {
 									className: "text-sm font-mono font-medium text-text-primary",
 									children: t(e.timeSpent / 3600)
-								})
-							}),
-							/* @__PURE__ */ u("span", {
-								className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${f[e.category] || ""}`,
-								children: e.category
-							}),
-							/* @__PURE__ */ u("div", {
-								className: "w-16",
-								children: /* @__PURE__ */ u("div", {
-									className: "h-2 rounded-full bg-bg-sunken",
-									children: /* @__PURE__ */ u("div", {
-										className: "h-2 rounded-full bg-action-primary-bg",
-										style: { width: `${Math.min(100, Math.round(e.timeSpent / (w || 1) * 100))}%` }
+								}),
+								/* @__PURE__ */ m("span", {
+									className: `hidden rounded-full px-2 py-0.5 text-xs font-medium sm:inline-flex ${ae[e.category] || "bg-bg-sunken text-text-secondary"}`,
+									children: e.category
+								}),
+								/* @__PURE__ */ m("div", {
+									className: "hidden w-16 lg:block",
+									children: /* @__PURE__ */ m("div", {
+										className: "h-2 rounded-full bg-bg-sunken",
+										children: /* @__PURE__ */ m("div", {
+											className: "h-2 rounded-full bg-action-primary-bg",
+											style: { width: `${Math.min(100, Math.round(e.timeSpent / (Q || 1) * 100))}%` }
+										})
 									})
+								}),
+								/* @__PURE__ */ m("button", {
+									onClick: () => be(e),
+									className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-text-primary",
+									"aria-label": "Recategorize application",
+									children: /* @__PURE__ */ m(d, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ m("button", {
+									onClick: () => K(e),
+									className: "rounded-md p-1.5 text-text-secondary hover:bg-status-error-bg hover:text-status-error-text",
+									"aria-label": "Delete usage entry",
+									children: /* @__PURE__ */ m(f, { className: "h-4 w-4" })
 								})
-							})
+							]
+						})]
+					}, e.id))
+				})
+			}), fe && /* @__PURE__ */ m("div", {
+				className: "mt-4 flex justify-center",
+				children: /* @__PURE__ */ m("button", {
+					onClick: Ce,
+					disabled: k,
+					className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50 disabled:opacity-50",
+					children: k ? "Loading..." : "Load more"
+				})
+			})] }),
+			/* @__PURE__ */ h(s, {
+				open: j,
+				onClose: () => M(!1),
+				title: "Record App Usage",
+				description: "Manually log time spent in an application",
+				footer: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
+					onClick: () => M(!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", {
+					onClick: ye,
+					disabled: q || !N.trim() || !L,
+					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: q ? "Saving..." : "Record"
+				})] }),
+				children: [me && /* @__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 record usage. Please try again."
+				}), /* @__PURE__ */ h("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+							className: y,
+							children: "Application Name"
+						}), /* @__PURE__ */ m("input", {
+							type: "text",
+							placeholder: "e.g. Visual Studio Code",
+							value: N,
+							onChange: (e) => P(e.target.value),
+							className: v
+						})] }),
+						/* @__PURE__ */ h("div", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+							children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+								className: y,
+								children: "Category"
+							}), /* @__PURE__ */ m("select", {
+								value: F,
+								onChange: (e) => I(e.target.value),
+								className: v,
+								children: _.map((e) => /* @__PURE__ */ m("option", {
+									value: e,
+									className: "capitalize",
+									children: e
+								}, e))
+							})] }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+								className: y,
+								children: "Time Spent (minutes)"
+							}), /* @__PURE__ */ m("input", {
+								type: "number",
+								min: "0",
+								placeholder: "0",
+								value: L,
+								onChange: (e) => R(e.target.value),
+								className: v
+							})] })]
+						}),
+						/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
+							className: y,
+							children: "Sessions"
+						}), /* @__PURE__ */ m("input", {
+							type: "number",
+							min: "0",
+							placeholder: "0",
+							value: z,
+							onChange: (e) => B(e.target.value),
+							className: v
+						})] })
+					]
+				})]
+			}),
+			/* @__PURE__ */ h(s, {
+				open: V !== null,
+				onClose: () => H(null),
+				title: "Recategorize Application",
+				description: V?.applicationName,
+				size: "sm",
+				footer: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
+					onClick: () => H(null),
+					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", {
+					onClick: xe,
+					disabled: J,
+					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: J ? "Saving..." : "Save"
+				})] }),
+				children: [
+					ge && /* @__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 recategorize. Please try again."
+					}),
+					/* @__PURE__ */ m("label", {
+						className: y,
+						children: "Category"
+					}),
+					/* @__PURE__ */ m("select", {
+						value: U,
+						onChange: (e) => W(e.target.value),
+						className: v,
+						children: _.map((e) => /* @__PURE__ */ m("option", {
+							value: e,
+							className: "capitalize",
+							children: e
+						}, e))
+					}),
+					/* @__PURE__ */ h("p", {
+						className: "mt-3 text-xs text-text-secondary",
+						children: [
+							"This updates the category for all usage of “",
+							V?.applicationName,
+							"”."
 						]
-					})]
-				}, e.id))
+					})
+				]
+			}),
+			/* @__PURE__ */ h(s, {
+				open: G !== null,
+				onClose: () => K(null),
+				title: "Delete Usage Entry",
+				size: "sm",
+				footer: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
+					onClick: () => K(null),
+					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", {
+					onClick: Se,
+					disabled: Y,
+					className: "rounded-md bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg/90 disabled:opacity-50",
+					children: Y ? "Deleting..." : "Delete"
+				})] }),
+				children: [ve && /* @__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 delete entry. Please try again."
+				}), /* @__PURE__ */ h("p", {
+					className: "text-sm text-text-secondary",
+					children: [
+						"Are you sure you want to delete the usage entry for",
+						" ",
+						/* @__PURE__ */ m("span", {
+							className: "font-medium text-text-primary",
+							children: G?.applicationName
+						}),
+						"? This action cannot be undone."
+					]
+				})]
 			})
-		})]
+		]
 	});
 }
 //#endregion
-export { p as ApplicationUsagePage };
+export { b as ApplicationUsagePage };
 
 //# sourceMappingURL=ApplicationUsagePage.js.map