@burdenoff/microfe-timecampus 2026.625.1 → 2026.626.2

package/dist/timecampus/components/EmptyState.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IllustratedEmptyState as t } from "@burdenoff/fe-libs/ui";
+//#region src/timecampus/components/EmptyState.tsx
+var n = ({ title: n, description: r, action: i, className: a, illustration: o = "empty-data" }) => /* @__PURE__ */ e(t, {
+	illustration: o,
+	title: n,
+	description: r,
+	action: i,
+	className: a
+});
+//#endregion
+export { n as EmptyState };
+
+//# sourceMappingURL=EmptyState.js.map

package/dist/timecampus/components/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../src/timecampus/components/EmptyState.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { IllustratedEmptyState } from \"@burdenoff/fe-libs/ui\";\n\ninterface EmptyStateProps {\n  /** Retained for backward compatibility; superseded by the illustration. */\n  icon?: ReactNode;\n  title: string;\n  description?: string;\n  action?: ReactNode;\n  className?: string;\n  /**\n   * Illustration name served from the host shell's /illustrations/<name>.webp.\n   * Defaults to the neutral \"empty-data\" asset.\n   */\n  illustration?: string;\n}\n\nexport const EmptyState: FC<EmptyStateProps> = ({\n  title,\n  description,\n  action,\n  className,\n  illustration = \"empty-data\",\n}) => {\n  return (\n    <IllustratedEmptyState\n      illustration={illustration}\n      title={title}\n      description={description}\n      action={action}\n      className={className}\n    />\n  );\n};\n"],"mappings":";;;AAiBA,IAAa,KAAmC,EAC9C,UACA,gBACA,WACA,cACA,kBAAe,mBAGb,kBAAC,GAAD;CACgB;CACP;CACM;CACL;CACG;CACX,CAAA"}

package/dist/timecampus/components/PageLayout.js

@@ -1,27 +1,35 @@
 import { cn as e } from "../utils/helpers.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { GradientText as r } from "@burdenoff/fe-libs/ui";
+import { GradientText as r, PagePurpose as i } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/components/PageLayout.tsx
-var i = ({ title: i, description: a, actions: o, children: s, className: c }) => /* @__PURE__ */ n("div", {
-	className: e("min-h-full p-4 sm:p-6", c),
+var a = ({ title: a, description: o, purpose: s, purposeLearnMoreHref: c, actions: l, children: u, className: d }) => /* @__PURE__ */ n("div", {
+	className: e("min-h-full p-4 sm:p-6", d),
 	children: [/* @__PURE__ */ n("div", {
-		className: "mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+		className: "mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
 		children: [/* @__PURE__ */ n("div", {
 			className: "min-w-0",
-			children: [/* @__PURE__ */ t("h1", {
-				className: "text-2xl font-bold text-text-primary",
-				children: /* @__PURE__ */ t(r, { children: i })
-			}), a && /* @__PURE__ */ t("p", {
-				className: "mt-1 text-sm text-text-secondary",
-				children: a
-			})]
-		}), o && /* @__PURE__ */ t("div", {
+			children: [
+				/* @__PURE__ */ t("h1", {
+					className: "text-2xl font-bold text-text-primary",
+					children: /* @__PURE__ */ t(r, { children: a })
+				}),
+				o && /* @__PURE__ */ t("p", {
+					className: "mt-1 text-sm text-text-secondary",
+					children: o
+				}),
+				s && /* @__PURE__ */ t(i, {
+					className: "mt-2 max-w-3xl",
+					learnMoreHref: c,
+					children: s
+				})
+			]
+		}), l && /* @__PURE__ */ t("div", {
 			className: "flex flex-wrap items-center gap-2",
-			children: o
+			children: l
 		})]
-	}), s]
+	}), u]
 });
 //#endregion
-export { i as PageLayout };
+export { a as PageLayout };
 
 //# sourceMappingURL=PageLayout.js.map

package/dist/timecampus/components/PageLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/timecampus/components/PageLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { GradientText } from \"@burdenoff/fe-libs/ui\";\nimport { cn } from \"../utils/helpers\";\n\ninterface PageLayoutProps {\n  title: string;\n  description?: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const PageLayout: FC<PageLayoutProps> = ({\n  title,\n  description,\n  actions,\n  children,\n  className,\n}) => {\n  return (\n    <div className={cn(\"min-h-full p-4 sm:p-6\", className)}>\n      <div className=\"mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"min-w-0\">\n          <h1 className=\"text-2xl font-bold text-text-primary\">\n            <GradientText>{title}</GradientText>\n          </h1>\n          {description && (\n            <p className=\"mt-1 text-sm text-text-secondary\">{description}</p>\n          )}\n        </div>\n        {actions && (\n          <div className=\"flex flex-wrap items-center gap-2\">{actions}</div>\n        )}\n      </div>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAYA,IAAa,KAAmC,EAC9C,UACA,gBACA,YACA,aACA,mBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,yBAAyB,EAAU;WAAtD,CACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,MAAD;IAAI,WAAU;cACZ,kBAAC,GAAD,EAAA,UAAe,GAAqB,CAAA;IACjC,CAAA,EACJ,KACC,kBAAC,KAAD;IAAG,WAAU;cAAoC;IAAgB,CAAA,CAE/D;MACL,KACC,kBAAC,OAAD;GAAK,WAAU;aAAqC;GAAc,CAAA,CAEhE;KACL,EACG"}
+{"version":3,"file":"PageLayout.js","names":[],"sources":["../../../src/timecampus/components/PageLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from \"react\";\nimport { GradientText, PagePurpose } from \"@burdenoff/fe-libs/ui\";\nimport { cn } from \"../utils/helpers\";\n\ninterface PageLayoutProps {\n  title: string;\n  description?: string;\n  /**\n   * The page's \"story\": a concise, plain-language explanation of what this\n   * page/feature is for and the real-world use-case. Rendered just under the\n   * header so every page is self-explanatory to a new user. Prefer this over a\n   * terse `description` for primary pages.\n   */\n  purpose?: ReactNode;\n  /** Optional \"Learn more\" link rendered inline with the purpose copy. */\n  purposeLearnMoreHref?: string;\n  actions?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const PageLayout: FC<PageLayoutProps> = ({\n  title,\n  description,\n  purpose,\n  purposeLearnMoreHref,\n  actions,\n  children,\n  className,\n}) => {\n  return (\n    <div className={cn(\"min-h-full p-4 sm:p-6\", className)}>\n      <div className=\"mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"min-w-0\">\n          <h1 className=\"text-2xl font-bold text-text-primary\">\n            <GradientText>{title}</GradientText>\n          </h1>\n          {description && (\n            <p className=\"mt-1 text-sm text-text-secondary\">{description}</p>\n          )}\n          {purpose && (\n            <PagePurpose\n              className=\"mt-2 max-w-3xl\"\n              learnMoreHref={purposeLearnMoreHref}\n            >\n              {purpose}\n            </PagePurpose>\n          )}\n        </div>\n        {actions && (\n          <div className=\"flex flex-wrap items-center gap-2\">{actions}</div>\n        )}\n      </div>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAqBA,IAAa,KAAmC,EAC9C,UACA,gBACA,YACA,yBACA,YACA,aACA,mBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,yBAAyB,EAAU;WAAtD,CACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,MAAD;KAAI,WAAU;eACZ,kBAAC,GAAD,EAAA,UAAe,GAAqB,CAAA;KACjC,CAAA;IACJ,KACC,kBAAC,KAAD;KAAG,WAAU;eAAoC;KAAgB,CAAA;IAElE,KACC,kBAAC,GAAD;KACE,WAAU;KACV,eAAe;eAEd;KACW,CAAA;IAEZ;MACL,KACC,kBAAC,OAAD;GAAK,WAAU;aAAqC;GAAc,CAAA,CAEhE;KACL,EACG"}

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

@@ -2,66 +2,69 @@ import { useTimeCampus 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 { Download as i, Puzzle as a, Star as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { EmptyState as i } from "../../components/EmptyState.js";
+import { Download as a, Puzzle as o, Star as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/timecampus/pages/applets/AppletStorePage.tsx
-function l() {
-	let { workspaceId: l = "" } = e(), { data: u, loading: d, error: f } = n({ variables: { scope: "WORKSPACE" } }), p = (u?.configurations ?? []).filter((e) => e.key.startsWith("applet.store."));
-	return d ? /* @__PURE__ */ s(r, {
+function u() {
+	let { workspaceId: u = "" } = e(), { data: d, loading: f, error: p } = n({ variables: { scope: "WORKSPACE" } }), m = (d?.configurations ?? []).filter((e) => e.key.startsWith("applet.store."));
+	return f ? /* @__PURE__ */ c(r, {
 		title: "Applet Store",
 		description: "Browse and install applets to extend TimeCampus",
-		children: /* @__PURE__ */ s(t, {
+		children: /* @__PURE__ */ c(t, {
 			variant: "card",
 			count: 6
 		})
-	}) : f ? /* @__PURE__ */ s(r, {
+	}) : p ? /* @__PURE__ */ c(r, {
 		title: "Applet Store",
 		description: "Browse and install applets to extend TimeCampus",
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ c("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 applet store data. Please try again later."
 		})
-	}) : /* @__PURE__ */ s(r, {
+	}) : /* @__PURE__ */ c(r, {
 		title: "Applet Store",
 		description: "Browse and install applets to extend TimeCampus",
-		children: /* @__PURE__ */ s("div", {
+		purpose: "Discover optional add-ons that extend TimeCampus — integrations, extra trackers and views — and install the ones your workflow needs instead of living with a one-size-fits-all setup.",
+		children: m.length === 0 ? /* @__PURE__ */ c(i, {
+			illustration: "empty-generic",
+			title: "No applets available yet",
+			description: "Store applets are managed as workspace configurations with the 'applet.store.' key prefix — once published, they'll appear here to browse and install."
+		}) : /* @__PURE__ */ c("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-			children: p.length === 0 ? /* @__PURE__ */ s("div", {
-				className: "col-span-full p-8 text-center text-sm text-text-secondary",
-				children: "No applets available in the store yet. Store applets are managed as workspace configurations with the \"applet.store.\" key prefix."
-			}) : p.map((e) => {
+			children: m.map((e) => {
 				let t = e.value, n = t.name ?? e.key.replace("applet.store.", ""), r = e.description ?? t.description ?? "";
 				t.category;
-				let l = t.rating ?? 0, u = t.downloads ?? 0;
-				return /* @__PURE__ */ c("div", {
+				let i = t.rating ?? 0, u = 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__ */ c("div", {
+					children: [/* @__PURE__ */ l("div", {
 						className: "flex items-start gap-3",
-						children: [/* @__PURE__ */ s("div", {
+						children: [/* @__PURE__ */ c("div", {
 							className: "flex h-12 w-12 items-center justify-center rounded-xl bg-action-primary-bg/10",
-							children: /* @__PURE__ */ s(a, { className: "h-6 w-6 text-primary" })
-						}), /* @__PURE__ */ c("div", {
+							children: /* @__PURE__ */ c(o, { className: "h-6 w-6 text-primary" })
+						}), /* @__PURE__ */ l("div", {
 							className: "flex-1",
-							children: [/* @__PURE__ */ s("p", {
+							children: [/* @__PURE__ */ c("p", {
 								className: "text-sm font-semibold text-text-primary",
 								children: n
-							}), /* @__PURE__ */ s("p", {
+							}), /* @__PURE__ */ c("p", {
 								className: "text-xs text-text-secondary",
 								children: r
 							})]
 						})]
-					}), /* @__PURE__ */ c("div", {
+					}), /* @__PURE__ */ l("div", {
 						className: "mt-3 flex items-center justify-between",
-						children: [/* @__PURE__ */ c("div", {
+						children: [/* @__PURE__ */ l("div", {
 							className: "flex items-center gap-3 text-xs text-text-secondary",
-							children: [/* @__PURE__ */ c("div", {
+							children: [/* @__PURE__ */ l("div", {
 								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ s(o, { className: "h-3 w-3 fill-amber-400 text-status-warning-text" }), /* @__PURE__ */ s("span", { children: l })]
-							}), /* @__PURE__ */ c("div", {
+								children: [/* @__PURE__ */ c(s, { className: "h-3 w-3 fill-amber-400 text-status-warning-text" }), /* @__PURE__ */ c("span", { children: i })]
+							}), /* @__PURE__ */ l("div", {
 								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ s(i, { className: "h-3 w-3" }), /* @__PURE__ */ s("span", { children: u })]
+								children: [/* @__PURE__ */ c(a, { className: "h-3 w-3" }), /* @__PURE__ */ c("span", { children: u })]
 							})]
-						}), /* @__PURE__ */ s("button", {
+						}), /* @__PURE__ */ c("button", {
 							className: "rounded-md bg-action-primary-bg px-3 py-1 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 							children: "Install"
 						})]
@@ -72,6 +75,6 @@ function l() {
 	});
 }
 //#endregion
-export { l as AppletStorePage };
+export { u as AppletStorePage };
 
 //# sourceMappingURL=AppletStorePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppletStorePage.js","names":[],"sources":["../../../../src/timecampus/pages/applets/AppletStorePage.tsx"],"sourcesContent":["import { Puzzle, Star, Download } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListConfigurationsQuery,\n  type ConfigurationFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function AppletStorePage() {\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 store/available applets (key starts with 'applet.store.')\n  const storeApplets = configurations.filter((c: ConfigurationFieldsFragment) =>\n    c.key.startsWith(\"applet.store.\"),\n  );\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"Applet Store\"\n        description=\"Browse and install applets to extend TimeCampus\"\n      >\n        <LoadingSkeleton variant=\"card\" count={6} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"Applet Store\"\n        description=\"Browse and install applets to extend TimeCampus\"\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 applet store data. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Applet Store\"\n      description=\"Browse and install applets to extend TimeCampus\"\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n        {storeApplets.length === 0 ? (\n          <div className=\"col-span-full p-8 text-center text-sm text-text-secondary\">\n            No applets available in the store yet. Store applets are managed as\n            workspace configurations with the \"applet.store.\" key prefix.\n          </div>\n        ) : (\n          storeApplets.map((applet: ConfigurationFieldsFragment) => {\n            const val = applet.value as Record<string, unknown>;\n            const name =\n              (val.name as string) ?? applet.key.replace(\"applet.store.\", \"\");\n            const description =\n              applet.description ?? (val.description as string) ?? \"\";\n            const category = (val.category as string) ?? \"general\";\n            const rating = (val.rating as number) ?? 0;\n            const downloads = (val.downloads as number) ?? 0;\n\n            return (\n              <div\n                key={applet.id}\n                className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop p-5 transition-colors hover:bg-bg-sunken/50 cursor-pointer\"\n              >\n                <div className=\"flex items-start gap-3\">\n                  <div className=\"flex h-12 w-12 items-center justify-center rounded-xl bg-action-primary-bg/10\">\n                    <Puzzle className=\"h-6 w-6 text-primary\" />\n                  </div>\n                  <div className=\"flex-1\">\n                    <p className=\"text-sm font-semibold text-text-primary\">\n                      {name}\n                    </p>\n                    <p className=\"text-xs text-text-secondary\">{description}</p>\n                  </div>\n                </div>\n                <div className=\"mt-3 flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3 text-xs text-text-secondary\">\n                    <div className=\"flex items-center gap-1\">\n                      <Star className=\"h-3 w-3 fill-amber-400 text-status-warning-text\" />\n                      <span>{rating}</span>\n                    </div>\n                    <div className=\"flex items-center gap-1\">\n                      <Download className=\"h-3 w-3\" />\n                      <span>{downloads}</span>\n                    </div>\n                  </div>\n                  <button className=\"rounded-md bg-action-primary-bg px-3 py-1 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90\">\n                    Install\n                  </button>\n                </div>\n              </div>\n            );\n          })\n        )}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,IAAkB;CAChC,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EAAE,SAAM,YAAS,aAAU,EAA2B,EAC1D,WAAW,EAAE,OAAO,aAAoB,EACzC,CAAC,EAKI,KAHiB,GAAM,kBAAkB,EAAE,EAGb,QAAQ,MAC1C,EAAE,IAAI,WAAW,gBAAgB,CAClC;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;YAEZ,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAa,WAAW,IACvB,kBAAC,OAAD;IAAK,WAAU;cAA4D;IAGrE,CAAA,GAEN,EAAa,KAAK,MAAwC;IACxD,IAAM,IAAM,EAAO,OACb,IACH,EAAI,QAAmB,EAAO,IAAI,QAAQ,iBAAiB,GAAG,EAC3D,IACJ,EAAO,eAAgB,EAAI,eAA0B;AACrC,MAAI;IACtB,IAAM,IAAU,EAAI,UAAqB,GACnC,IAAa,EAAI,aAAwB;AAE/C,WACE,kBAAC,OAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAQ,WAAU,wBAAyB,CAAA;OACvC,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV;QACC,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAA+B;QAAgB,CAAA,CACxD;SACF;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,mDAAoD,CAAA,EACpE,kBAAC,QAAD,EAAA,UAAO,GAAc,CAAA,CACjB;WACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAChC,kBAAC,QAAD,EAAA,UAAO,GAAiB,CAAA,CACpB;UACF;UACN,kBAAC,UAAD;OAAQ,WAAU;iBAAuH;OAEhI,CAAA,CACL;QACF;OA7BC,EAAO,GA6BR;KAER;GAEA,CAAA;EACK,CAAA"}
+{"version":3,"file":"AppletStorePage.js","names":[],"sources":["../../../../src/timecampus/pages/applets/AppletStorePage.tsx"],"sourcesContent":["import { Puzzle, Star, Download } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { EmptyState } from \"../../components/EmptyState\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListConfigurationsQuery,\n  type ConfigurationFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function AppletStorePage() {\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 store/available applets (key starts with 'applet.store.')\n  const storeApplets = configurations.filter((c: ConfigurationFieldsFragment) =>\n    c.key.startsWith(\"applet.store.\"),\n  );\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"Applet Store\"\n        description=\"Browse and install applets to extend TimeCampus\"\n      >\n        <LoadingSkeleton variant=\"card\" count={6} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"Applet Store\"\n        description=\"Browse and install applets to extend TimeCampus\"\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 applet store data. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Applet Store\"\n      description=\"Browse and install applets to extend TimeCampus\"\n      purpose=\"Discover optional add-ons that extend TimeCampus — integrations, extra trackers and views — and install the ones your workflow needs instead of living with a one-size-fits-all setup.\"\n    >\n      {storeApplets.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-generic\"\n          title=\"No applets available yet\"\n          description=\"Store applets are managed as workspace configurations with the 'applet.store.' key prefix — once published, they'll appear here to browse and install.\"\n        />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {storeApplets.map((applet: ConfigurationFieldsFragment) => {\n            const val = applet.value as Record<string, unknown>;\n            const name =\n              (val.name as string) ?? applet.key.replace(\"applet.store.\", \"\");\n            const description =\n              applet.description ?? (val.description as string) ?? \"\";\n            const category = (val.category as string) ?? \"general\";\n            const rating = (val.rating as number) ?? 0;\n            const downloads = (val.downloads as number) ?? 0;\n\n            return (\n              <div\n                key={applet.id}\n                className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop p-5 transition-colors hover:bg-bg-sunken/50 cursor-pointer\"\n              >\n                <div className=\"flex items-start gap-3\">\n                  <div className=\"flex h-12 w-12 items-center justify-center rounded-xl bg-action-primary-bg/10\">\n                    <Puzzle className=\"h-6 w-6 text-primary\" />\n                  </div>\n                  <div className=\"flex-1\">\n                    <p className=\"text-sm font-semibold text-text-primary\">\n                      {name}\n                    </p>\n                    <p className=\"text-xs text-text-secondary\">{description}</p>\n                  </div>\n                </div>\n                <div className=\"mt-3 flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3 text-xs text-text-secondary\">\n                    <div className=\"flex items-center gap-1\">\n                      <Star className=\"h-3 w-3 fill-amber-400 text-status-warning-text\" />\n                      <span>{rating}</span>\n                    </div>\n                    <div className=\"flex items-center gap-1\">\n                      <Download className=\"h-3 w-3\" />\n                      <span>{downloads}</span>\n                    </div>\n                  </div>\n                  <button className=\"rounded-md bg-action-primary-bg px-3 py-1 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90\">\n                    Install\n                  </button>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,IAAkB;CAChC,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EAAE,SAAM,YAAS,aAAU,EAA2B,EAC1D,WAAW,EAAE,OAAO,aAAoB,EACzC,CAAC,EAKI,KAHiB,GAAM,kBAAkB,EAAE,EAGb,QAAQ,MAC1C,EAAE,IAAI,WAAW,gBAAgB,CAClC;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,EAAa,WAAW,IACvB,kBAAC,GAAD;GACE,cAAa;GACb,OAAM;GACN,aAAY;GACZ,CAAA,GAEF,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAa,KAAK,MAAwC;IACzD,IAAM,IAAM,EAAO,OACb,IACH,EAAI,QAAmB,EAAO,IAAI,QAAQ,iBAAiB,GAAG,EAC3D,IACJ,EAAO,eAAgB,EAAI,eAA0B;AACrC,MAAI;IACtB,IAAM,IAAU,EAAI,UAAqB,GACnC,IAAa,EAAI,aAAwB;AAE/C,WACE,kBAAC,OAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAQ,WAAU,wBAAyB,CAAA;OACvC,CAAA,EACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV;QACC,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAA+B;QAAgB,CAAA,CACxD;SACF;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,mDAAoD,CAAA,EACpE,kBAAC,QAAD,EAAA,UAAO,GAAc,CAAA,CACjB;WACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAChC,kBAAC,QAAD,EAAA,UAAO,GAAiB,CAAA,CACpB;UACF;UACN,kBAAC,UAAD;OAAQ,WAAU;iBAAuH;OAEhI,CAAA,CACL;QACF;OA7BC,EAAO,GA6BR;KAER;GACE,CAAA;EAEG,CAAA"}

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

@@ -3,72 +3,78 @@ 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 { PageLayout as i } from "../../components/PageLayout.js";
-import { Puzzle as a, Settings as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+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";
 //#region src/timecampus/pages/applets/InstalledAppletsPage.tsx
-function l() {
-	let { workspaceId: l = "" } = e(), { data: u, loading: d, error: f } = r({ variables: { scope: "WORKSPACE" } }), p = (u?.configurations ?? []).filter((e) => e.key.startsWith("applet.installed."));
-	return d ? /* @__PURE__ */ s(i, {
+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, {
 		title: "Installed Applets",
 		description: "Manage your installed applets and integrations",
-		children: /* @__PURE__ */ s(n, {
+		children: /* @__PURE__ */ c(n, {
 			variant: "list",
 			count: 5
 		})
-	}) : f ? /* @__PURE__ */ s(i, {
+	}) : m ? /* @__PURE__ */ c(i, {
 		title: "Installed Applets",
 		description: "Manage your installed applets and integrations",
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ c("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__ */ s(i, {
+	}) : /* @__PURE__ */ c(i, {
 		title: "Installed Applets",
 		description: "Manage your installed applets and integrations",
-		children: /* @__PURE__ */ s("div", {
-			className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
-			children: /* @__PURE__ */ s("div", {
+		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, {
+			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, {
+			treatment: "glass",
+			glow: !0,
+			className: "overflow-hidden",
+			children: /* @__PURE__ */ c("div", {
 				className: "divide-y divide-border",
-				children: p.length === 0 ? /* @__PURE__ */ s("div", {
-					className: "p-8 text-center text-sm text-text-secondary",
-					children: "No applets installed yet. Installed applets are stored as workspace configurations with the \"applet.installed.\" key prefix."
-				}) : p.map((e) => {
-					let n = e.value, r = n.name ?? e.key.replace("applet.installed.", ""), i = n.category ?? "general", l = n.version ?? "1.0.0", u = n.author ?? "Unknown", d = n.isActive ?? !0, f = n.updateAvailable ?? !1;
-					return /* @__PURE__ */ c("div", {
+				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", {
 						className: "flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors",
-						children: [/* @__PURE__ */ c("div", {
+						children: [/* @__PURE__ */ l("div", {
 							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ s("div", {
+							children: [/* @__PURE__ */ c("div", {
 								className: "flex h-10 w-10 items-center justify-center rounded-lg bg-action-primary-bg/10",
-								children: /* @__PURE__ */ s(a, { className: "h-5 w-5 text-primary" })
-							}), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
+								children: /* @__PURE__ */ c(o, { className: "h-5 w-5 text-primary" })
+							}), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ l("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ s("p", {
+								children: [/* @__PURE__ */ c("p", {
 									className: "text-sm font-medium text-text-primary",
 									children: r
-								}), f && /* @__PURE__ */ s("span", {
+								}), f && /* @__PURE__ */ c("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__ */ c("p", {
+							}), /* @__PURE__ */ l("p", {
 								className: "text-xs text-text-secondary",
 								children: [
 									"v",
-									l,
+									a,
 									" · by ",
 									u,
 									" · ",
 									i
 								]
 							})] })]
-						}), /* @__PURE__ */ c("div", {
+						}), /* @__PURE__ */ l("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ s("span", {
+							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__ */ s("button", {
+							}), /* @__PURE__ */ c("button", {
 								className: "rounded-md p-1.5 hover:bg-bg-sunken",
-								children: /* @__PURE__ */ s(o, { className: "h-4 w-4 text-text-secondary" })
+								children: /* @__PURE__ */ c(s, { className: "h-4 w-4 text-text-secondary" })
 							})]
 						})]
 					}, e.id);
@@ -78,6 +84,6 @@ function l() {
 	});
 }
 //#endregion
-export { l as InstalledAppletsPage };
+export { d 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, ExternalLink } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\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    >\n      <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop\">\n        <div className=\"divide-y divide-border\">\n          {applets.length === 0 ? (\n            <div className=\"p-8 text-center text-sm text-text-secondary\">\n              No applets installed yet. Installed applets are stored as\n              workspace configurations with the \"applet.installed.\" key prefix.\n            </div>\n          ) : (\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          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,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;YAEZ,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAQ,WAAW,IAClB,kBAAC,OAAD;KAAK,WAAU;eAA8C;KAGvD,CAAA,GAEN,EAAQ,KAAK,MAAwC;KACnD,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;IAEA,CAAA;GACF,CAAA;EACK,CAAA"}
+{"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"}

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

@@ -4,104 +4,108 @@ 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 { PageLayout as o } from "../../components/PageLayout.js";
-import { Clock as s, Monitor as c } from "lucide-react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+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";
 //#region src/timecampus/pages/application-usage/ApplicationUsagePage.tsx
-var d = {
+var f = {
 	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 f() {
-	let { workspaceId: f = "" } = e(), { data: p, loading: m, error: h } = a({
+function p() {
+	let { workspaceId: p = "" } = e(), { data: m, loading: h, error: g } = a({
 		variables: { limit: 50 },
-		skip: !f
-	}), { data: g, loading: _, error: v } = i({ skip: !f }), y = m || _, b = h || v, x = p?.applicationUsages ?? [], S = g?.appUsageSummary, C = x.reduce((e, t) => e + t.timeSpent, 0), w = x.reduce((e, t) => e + t.switches, 0), T = S?.productivityRatio == null ? "--" : `${Math.round(S.productivityRatio * 100)}%`, E = x.filter((e) => e.timeSpent >= 5400).length;
-	return y ? /* @__PURE__ */ l(o, {
+		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, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
-		children: /* @__PURE__ */ l(r, {
+		children: /* @__PURE__ */ u(r, {
 			variant: "card",
 			count: 4
 		})
-	}) : b ? /* @__PURE__ */ l(o, {
+	}) : x ? /* @__PURE__ */ u(o, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ u("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__ */ u(o, {
+	}) : /* @__PURE__ */ d(o, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
-		children: [/* @__PURE__ */ u("div", {
+		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__ */ l(n, {
+				/* @__PURE__ */ u(n, {
+					featured: !0,
 					title: "Total Screen Time",
-					value: t(C / 3600),
-					icon: /* @__PURE__ */ l(c, { className: "h-5 w-5" })
+					value: t(w / 3600),
+					icon: /* @__PURE__ */ u(l, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ l(n, {
+				/* @__PURE__ */ u(n, {
 					title: "Productive Time",
-					value: T,
-					trend: S?.productivityRatio == null ? void 0 : {
+					value: E,
+					trend: C?.productivityRatio == null ? void 0 : {
 						value: 5,
 						label: "vs last week"
 					}
 				}),
-				/* @__PURE__ */ l(n, {
+				/* @__PURE__ */ u(n, {
 					title: "App Switches",
-					value: String(w),
-					description: `Avg. ${x.length > 0 ? Math.round(w / x.length) : 0}/app`
+					value: String(T),
+					description: `Avg. ${S.length > 0 ? Math.round(T / S.length) : 0}/app`
 				}),
-				/* @__PURE__ */ l(n, {
+				/* @__PURE__ */ u(n, {
 					title: "Focus Sessions",
-					value: String(E),
-					icon: /* @__PURE__ */ l(s, { className: "h-5 w-5" }),
+					value: String(D),
+					icon: /* @__PURE__ */ u(c, { className: "h-5 w-5" }),
 					description: "90+ min each"
 				})
 			]
-		}), /* @__PURE__ */ l("div", {
+		}), 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__ */ l("div", {
+			children: /* @__PURE__ */ u("div", {
 				className: "divide-y divide-border",
-				children: x.length === 0 ? /* @__PURE__ */ l("div", {
-					className: "p-8 text-center text-sm text-text-secondary",
-					children: "No application usage data found."
-				}) : x.map((e) => /* @__PURE__ */ u("div", {
+				children: S.map((e) => /* @__PURE__ */ d("div", {
 					className: "flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors",
-					children: [/* @__PURE__ */ u("div", {
+					children: [/* @__PURE__ */ d("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ l(c, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
+						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__ */ u("p", {
+						}), /* @__PURE__ */ d("p", {
 							className: "text-xs text-text-secondary",
 							children: [e.sessions, " sessions"]
 						})] })]
-					}), /* @__PURE__ */ u("div", {
+					}), /* @__PURE__ */ d("div", {
 						className: "flex items-center gap-4",
 						children: [
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ u("div", {
 								className: "text-right",
-								children: /* @__PURE__ */ l("p", {
+								children: /* @__PURE__ */ u("p", {
 									className: "text-sm font-mono font-medium text-text-primary",
 									children: t(e.timeSpent / 3600)
 								})
 							}),
-							/* @__PURE__ */ l("span", {
-								className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${d[e.category] || ""}`,
+							/* @__PURE__ */ u("span", {
+								className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${f[e.category] || ""}`,
 								children: e.category
 							}),
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ u("div", {
 								className: "w-16",
-								children: /* @__PURE__ */ l("div", {
+								children: /* @__PURE__ */ u("div", {
 									className: "h-2 rounded-full bg-bg-sunken",
-									children: /* @__PURE__ */ l("div", {
+									children: /* @__PURE__ */ u("div", {
 										className: "h-2 rounded-full bg-action-primary-bg",
-										style: { width: `${Math.min(100, Math.round(e.timeSpent / (C || 1) * 100))}%` }
+										style: { width: `${Math.min(100, Math.round(e.timeSpent / (w || 1) * 100))}%` }
 									})
 								})
 							})
@@ -113,6 +117,6 @@ function f() {
 	});
 }
 //#endregion
-export { f as ApplicationUsagePage };
+export { p as ApplicationUsagePage };
 
 //# sourceMappingURL=ApplicationUsagePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ApplicationUsagePage.js","names":[],"sources":["../../../../src/timecampus/pages/application-usage/ApplicationUsagePage.tsx"],"sourcesContent":["import { Monitor, Clock } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { formatHours, getStatusColor } from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListApplicationUsagesQuery,\n  useGetAppUsageSummaryQuery,\n  type ApplicationUsageFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nconst categoryColors: Record<string, string> = {\n  productive: \"bg-status-success-bg text-status-success-text\",\n  neutral: \"bg-bg-sunken text-text-secondary\",\n  communication: \"bg-status-info-bg text-status-info-text\",\n  distracting: \"bg-status-error-bg text-status-error-text\",\n};\n\nexport function ApplicationUsagePage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const {\n    data: usagesData,\n    loading: usagesLoading,\n    error: usagesError,\n  } = useListApplicationUsagesQuery({\n    variables: { limit: 50 },\n    skip: !workspaceId,\n  });\n\n  const {\n    data: summaryData,\n    loading: summaryLoading,\n    error: summaryError,\n  } = useGetAppUsageSummaryQuery({\n    skip: !workspaceId,\n  });\n\n  const loading = usagesLoading || summaryLoading;\n  const error = usagesError || summaryError;\n  const apps = usagesData?.applicationUsages ?? [];\n  const summary = summaryData?.appUsageSummary;\n\n  const totalScreenTimeSeconds = apps.reduce(\n    (sum: number, app: ApplicationUsageFieldsFragment) => sum + app.timeSpent,\n    0,\n  );\n  const totalSwitches = apps.reduce(\n    (sum: number, app: ApplicationUsageFieldsFragment) => sum + app.switches,\n    0,\n  );\n  const productiveRatio =\n    summary?.productivityRatio != null\n      ? `${Math.round(summary.productivityRatio * 100)}%`\n      : \"--\";\n\n  // Count focus sessions (apps with > 90 min continuous usage)\n  const focusSessions = apps.filter(\n    (app: ApplicationUsageFieldsFragment) => app.timeSpent >= 5400,\n  ).length;\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"App Usage\"\n        description=\"Track application usage and productivity\"\n      >\n        <LoadingSkeleton variant=\"card\" count={4} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"App Usage\"\n        description=\"Track application usage and productivity\"\n      >\n        <div className=\"rounded-xl border border-status-error-border/50 bg-status-error-bg/10 p-4 text-sm text-status-error-text\">\n          Failed to load application usage. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"App Usage\"\n      description=\"Track application usage and productivity\"\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          title=\"Total Screen Time\"\n          value={formatHours(totalScreenTimeSeconds / 3600)}\n          icon={<Monitor className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Productive Time\"\n          value={productiveRatio}\n          trend={\n            summary?.productivityRatio != null\n              ? { value: 5, label: \"vs last week\" }\n              : undefined\n          }\n        />\n        <StatCard\n          title=\"App Switches\"\n          value={String(totalSwitches)}\n          description={`Avg. ${apps.length > 0 ? Math.round(totalSwitches / apps.length) : 0}/app`}\n        />\n        <StatCard\n          title=\"Focus Sessions\"\n          value={String(focusSessions)}\n          icon={<Clock className=\"h-5 w-5\" />}\n          description=\"90+ min each\"\n        />\n      </div>\n\n      <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop\">\n        <div className=\"divide-y divide-border\">\n          {apps.length === 0 ? (\n            <div className=\"p-8 text-center text-sm text-text-secondary\">\n              No application usage data found.\n            </div>\n          ) : (\n            apps.map((app: ApplicationUsageFieldsFragment) => (\n              <div\n                key={app.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                  <Monitor className=\"h-5 w-5 text-text-secondary\" />\n                  <div>\n                    <p className=\"text-sm font-medium text-text-primary\">\n                      {app.applicationName}\n                    </p>\n                    <p className=\"text-xs text-text-secondary\">\n                      {app.sessions} sessions\n                    </p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-4\">\n                  <div className=\"text-right\">\n                    <p className=\"text-sm font-mono font-medium text-text-primary\">\n                      {formatHours(app.timeSpent / 3600)}\n                    </p>\n                  </div>\n                  <span\n                    className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${categoryColors[app.category] || \"\"}`}\n                  >\n                    {app.category}\n                  </span>\n                  <div className=\"w-16\">\n                    <div className=\"h-2 rounded-full bg-bg-sunken\">\n                      <div\n                        className=\"h-2 rounded-full bg-action-primary-bg\"\n                        style={{\n                          width: `${Math.min(100, Math.round((app.timeSpent / (totalScreenTimeSeconds || 1)) * 100))}%`,\n                        }}\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n            ))\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ApplicationUsagePage.js","names":[],"sources":["../../../../src/timecampus/pages/application-usage/ApplicationUsagePage.tsx"],"sourcesContent":["import { Monitor, Clock } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { EmptyState } from \"../../components/EmptyState\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { formatHours, getStatusColor } from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListApplicationUsagesQuery,\n  useGetAppUsageSummaryQuery,\n  type ApplicationUsageFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nconst categoryColors: Record<string, string> = {\n  productive: \"bg-status-success-bg text-status-success-text\",\n  neutral: \"bg-bg-sunken text-text-secondary\",\n  communication: \"bg-status-info-bg text-status-info-text\",\n  distracting: \"bg-status-error-bg text-status-error-text\",\n};\n\nexport function ApplicationUsagePage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const {\n    data: usagesData,\n    loading: usagesLoading,\n    error: usagesError,\n  } = useListApplicationUsagesQuery({\n    variables: { limit: 50 },\n    skip: !workspaceId,\n  });\n\n  const {\n    data: summaryData,\n    loading: summaryLoading,\n    error: summaryError,\n  } = useGetAppUsageSummaryQuery({\n    skip: !workspaceId,\n  });\n\n  const loading = usagesLoading || summaryLoading;\n  const error = usagesError || summaryError;\n  const apps = usagesData?.applicationUsages ?? [];\n  const summary = summaryData?.appUsageSummary;\n\n  const totalScreenTimeSeconds = apps.reduce(\n    (sum: number, app: ApplicationUsageFieldsFragment) => sum + app.timeSpent,\n    0,\n  );\n  const totalSwitches = apps.reduce(\n    (sum: number, app: ApplicationUsageFieldsFragment) => sum + app.switches,\n    0,\n  );\n  const productiveRatio =\n    summary?.productivityRatio != null\n      ? `${Math.round(summary.productivityRatio * 100)}%`\n      : \"--\";\n\n  // Count focus sessions (apps with > 90 min continuous usage)\n  const focusSessions = apps.filter(\n    (app: ApplicationUsageFieldsFragment) => app.timeSpent >= 5400,\n  ).length;\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"App Usage\"\n        description=\"Track application usage and productivity\"\n      >\n        <LoadingSkeleton variant=\"card\" count={4} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"App Usage\"\n        description=\"Track application usage and productivity\"\n      >\n        <div className=\"rounded-xl border border-status-error-border/50 bg-status-error-bg/10 p-4 text-sm text-status-error-text\">\n          Failed to load application usage. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"App Usage\"\n      description=\"Track application usage and productivity\"\n      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.\"\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          featured\n          title=\"Total Screen Time\"\n          value={formatHours(totalScreenTimeSeconds / 3600)}\n          icon={<Monitor className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Productive Time\"\n          value={productiveRatio}\n          trend={\n            summary?.productivityRatio != null\n              ? { value: 5, label: \"vs last week\" }\n              : undefined\n          }\n        />\n        <StatCard\n          title=\"App Switches\"\n          value={String(totalSwitches)}\n          description={`Avg. ${apps.length > 0 ? Math.round(totalSwitches / apps.length) : 0}/app`}\n        />\n        <StatCard\n          title=\"Focus Sessions\"\n          value={String(focusSessions)}\n          icon={<Clock className=\"h-5 w-5\" />}\n          description=\"90+ min each\"\n        />\n      </div>\n\n      {apps.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          title=\"No application usage data found\"\n          description=\"Once the desktop tracker is active, the apps you use will appear here ranked by time spent.\"\n        />\n      ) : (\n        <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop\">\n          <div className=\"divide-y divide-border\">\n            {apps.map((app: ApplicationUsageFieldsFragment) => (\n              <div\n                key={app.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                  <Monitor className=\"h-5 w-5 text-text-secondary\" />\n                  <div>\n                    <p className=\"text-sm font-medium text-text-primary\">\n                      {app.applicationName}\n                    </p>\n                    <p className=\"text-xs text-text-secondary\">\n                      {app.sessions} sessions\n                    </p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-4\">\n                  <div className=\"text-right\">\n                    <p className=\"text-sm font-mono font-medium text-text-primary\">\n                      {formatHours(app.timeSpent / 3600)}\n                    </p>\n                  </div>\n                  <span\n                    className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${categoryColors[app.category] || \"\"}`}\n                  >\n                    {app.category}\n                  </span>\n                  <div className=\"w-16\">\n                    <div className=\"h-2 rounded-full bg-bg-sunken\">\n                      <div\n                        className=\"h-2 rounded-full bg-action-primary-bg\"\n                        style={{\n                          width: `${Math.min(100, Math.round((app.timeSpent / (totalScreenTimeSeconds || 1)) * 100))}%`,\n                        }}\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}