@burdenoff/microfe-timecampus 2026.624.1 → 2026.625.1

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

@@ -1,32 +1,32 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
 import { getStatusColor as t } from "../../utils/helpers.js";
-import { PageLayout as n } from "../../components/PageLayout.js";
-import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
-import { useListConfigurationsQuery as i } from "../../../generated/wspace-operations.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";
 //#region src/timecampus/pages/applets/InstalledAppletsPage.tsx
 function l() {
-	let { workspaceId: l = "" } = e(), { data: u, loading: d, error: f } = i({ variables: { scope: "WORKSPACE" } }), p = (u?.configurations ?? []).filter((e) => e.key.startsWith("applet.installed."));
-	return d ? /* @__PURE__ */ s(n, {
+	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, {
 		title: "Installed Applets",
 		description: "Manage your installed applets and integrations",
-		children: /* @__PURE__ */ s(r, {
+		children: /* @__PURE__ */ s(n, {
 			variant: "list",
 			count: 5
 		})
-	}) : f ? /* @__PURE__ */ s(n, {
+	}) : f ? /* @__PURE__ */ s(i, {
 		title: "Installed Applets",
 		description: "Manage your installed applets and integrations",
 		children: /* @__PURE__ */ s("div", {
-			className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400",
+			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(n, {
+	}) : /* @__PURE__ */ s(i, {
 		title: "Installed Applets",
 		description: "Manage your installed applets and integrations",
 		children: /* @__PURE__ */ s("div", {
-			className: "rounded-xl border border-border-subtle bg-bg-surface",
+			className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
 			children: /* @__PURE__ */ s("div", {
 				className: "divide-y divide-border",
 				children: p.length === 0 ? /* @__PURE__ */ s("div", {
@@ -47,7 +47,7 @@ function l() {
 									className: "text-sm font-medium text-text-primary",
 									children: r
 								}), f && /* @__PURE__ */ s("span", {
-									className: "inline-flex rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+									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", {

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-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400\">\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-subtle bg-bg-surface\">\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-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400\">\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;aAA+H;GAExI,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;mBAA4H;SAErI,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, 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"}

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

@@ -1,49 +1,49 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
 import { formatHours as t } from "../../utils/helpers.js";
-import { PageLayout as n } from "../../components/PageLayout.js";
-import { StatCard as r } from "../../components/StatCard.js";
-import { LoadingSkeleton as i } from "../../components/LoadingSkeleton.js";
-import { useGetAppUsageSummaryQuery as a, useListApplicationUsagesQuery as o } from "../../../generated/wspace-operations.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 { 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";
 //#region src/timecampus/pages/application-usage/ApplicationUsagePage.tsx
 var d = {
-	productive: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
-	neutral: "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400",
-	communication: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
-	distracting: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
+	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 } = o({
+	let { workspaceId: f = "" } = e(), { data: p, loading: m, error: h } = a({
 		variables: { limit: 50 },
 		skip: !f
-	}), { data: g, loading: _, error: v } = a({ 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(n, {
+	}), { 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, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
-		children: /* @__PURE__ */ l(i, {
+		children: /* @__PURE__ */ l(r, {
 			variant: "card",
 			count: 4
 		})
-	}) : b ? /* @__PURE__ */ l(n, {
+	}) : b ? /* @__PURE__ */ l(o, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
 		children: /* @__PURE__ */ l("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(n, {
+	}) : /* @__PURE__ */ u(o, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
 		children: [/* @__PURE__ */ u("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 			children: [
-				/* @__PURE__ */ l(r, {
+				/* @__PURE__ */ l(n, {
 					title: "Total Screen Time",
 					value: t(C / 3600),
 					icon: /* @__PURE__ */ l(c, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ l(r, {
+				/* @__PURE__ */ l(n, {
 					title: "Productive Time",
 					value: T,
 					trend: S?.productivityRatio == null ? void 0 : {
@@ -51,12 +51,12 @@ function f() {
 						label: "vs last week"
 					}
 				}),
-				/* @__PURE__ */ l(r, {
+				/* @__PURE__ */ l(n, {
 					title: "App Switches",
 					value: String(w),
 					description: `Avg. ${x.length > 0 ? Math.round(w / x.length) : 0}/app`
 				}),
-				/* @__PURE__ */ l(r, {
+				/* @__PURE__ */ l(n, {
 					title: "Focus Sessions",
 					value: String(E),
 					icon: /* @__PURE__ */ l(s, { className: "h-5 w-5" }),
@@ -64,7 +64,7 @@ function f() {
 				})
 			]
 		}), /* @__PURE__ */ l("div", {
-			className: "rounded-xl border border-border-subtle bg-bg-surface",
+			className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
 			children: /* @__PURE__ */ l("div", {
 				className: "divide-y divide-border",
 				children: x.length === 0 ? /* @__PURE__ */ l("div", {

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:\n    \"bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400\",\n  neutral: \"bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400\",\n  communication:\n    \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400\",\n  distracting: \"bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400\",\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-subtle bg-bg-surface\">\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 { 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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"}

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

@@ -1,7 +1,7 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
-import { PageLayout as t } from "../../components/PageLayout.js";
-import { LoadingSkeleton as n } from "../../components/LoadingSkeleton.js";
-import { useListConfigurationsQuery as r, useSetConfigurationMutation as i } from "../../../generated/wspace-operations.js";
+import { LoadingSkeleton as t } from "../../components/LoadingSkeleton.js";
+import { useListConfigurationsQuery as n, useSetConfigurationMutation as r } from "../../../generated/wspace-operations.js";
+import { PageLayout as i } from "../../components/PageLayout.js";
 import { useCallback as a, useEffect as o, useState as s } from "react";
 import { Settings as c } from "lucide-react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
@@ -12,13 +12,13 @@ var d = "timecampus.appusage.settings", f = {
 	distractionAlerts: !1
 };
 function p() {
-	let { workspaceId: p = "" } = e(), { data: m, loading: h, error: g } = r({
+	let { workspaceId: p = "" } = e(), { data: m, loading: h, error: g } = n({
 		variables: {
 			scope: "WORKSPACE",
 			limit: 100
 		},
 		skip: !p
-	}), [_, { loading: v }] = i(), [y, b] = s(f);
+	}), [_, { loading: v }] = r(), [y, b] = s(f);
 	o(() => {
 		if (m?.configurations) {
 			let e = m.configurations.find((e) => e.key === d);
@@ -40,24 +40,24 @@ function p() {
 			scope: "WORKSPACE"
 		} } });
 	}, [_, y]);
-	return h ? /* @__PURE__ */ l(t, {
+	return h ? /* @__PURE__ */ l(i, {
 		title: "App Usage Settings",
 		description: "Configure application tracking",
-		children: /* @__PURE__ */ l(n, { variant: "detail" })
-	}) : g ? /* @__PURE__ */ l(t, {
+		children: /* @__PURE__ */ l(t, { variant: "detail" })
+	}) : g ? /* @__PURE__ */ l(i, {
 		title: "App Usage Settings",
 		description: "Configure application tracking",
 		children: /* @__PURE__ */ l("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 settings. Please try again later."
 		})
-	}) : /* @__PURE__ */ l(t, {
+	}) : /* @__PURE__ */ l(i, {
 		title: "App Usage Settings",
 		description: "Configure application tracking",
 		children: /* @__PURE__ */ u("div", {
 			className: "mx-auto max-w-2xl space-y-6",
 			children: [/* @__PURE__ */ u("div", {
-				className: "rounded-xl border border-border-subtle bg-bg-surface p-6",
+				className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
 				children: [/* @__PURE__ */ u("h3", {
 					className: "mb-4 flex items-center gap-2 text-sm font-semibold text-text-primary",
 					children: [/* @__PURE__ */ l(c, { className: "h-4 w-4" }), "Tracking Configuration"]

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

@@ -1 +1 @@
-{"version":3,"file":"ApplicationUsageSettingsPage.js","names":[],"sources":["../../../../src/timecampus/pages/application-usage/ApplicationUsageSettingsPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\nimport { Settings } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListConfigurationsQuery,\n  useSetConfigurationMutation,\n  type ConfigurationFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nconst APP_USAGE_SETTINGS_KEY = \"timecampus.appusage.settings\";\n\ninterface AppUsageSettings {\n  trackActiveApplications: boolean;\n  trackBrowserTabs: boolean;\n  distractionAlerts: boolean;\n}\n\nconst DEFAULT_SETTINGS: AppUsageSettings = {\n  trackActiveApplications: true,\n  trackBrowserTabs: true,\n  distractionAlerts: false,\n};\n\nexport function ApplicationUsageSettingsPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n  const { data, loading, error } = useListConfigurationsQuery({\n    variables: { scope: \"WORKSPACE\" as never, limit: 100 },\n    skip: !workspaceId,\n  });\n\n  const [setConfiguration, { loading: saving }] = useSetConfigurationMutation();\n  const [settings, setSettings] = useState<AppUsageSettings>(DEFAULT_SETTINGS);\n\n  useEffect(() => {\n    if (data?.configurations) {\n      const config = data.configurations.find(\n        (c: ConfigurationFieldsFragment) => c.key === APP_USAGE_SETTINGS_KEY,\n      );\n      if (config?.value) {\n        const val = config.value as Partial<AppUsageSettings>;\n        setSettings({\n          trackActiveApplications:\n            val.trackActiveApplications ??\n            DEFAULT_SETTINGS.trackActiveApplications,\n          trackBrowserTabs:\n            val.trackBrowserTabs ?? DEFAULT_SETTINGS.trackBrowserTabs,\n          distractionAlerts:\n            val.distractionAlerts ?? DEFAULT_SETTINGS.distractionAlerts,\n        });\n      }\n    }\n  }, [data]);\n\n  const handleSave = useCallback(async () => {\n    await setConfiguration({\n      variables: {\n        input: {\n          key: APP_USAGE_SETTINGS_KEY,\n          value: settings as unknown as Record<string, unknown>,\n          description: \"Application usage tracking settings\",\n          scope: \"WORKSPACE\" as never,\n        },\n      },\n    });\n  }, [setConfiguration, settings]);\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"App Usage Settings\"\n        description=\"Configure application tracking\"\n      >\n        <LoadingSkeleton variant=\"detail\" />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"App Usage Settings\"\n        description=\"Configure application tracking\"\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 settings. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"App Usage Settings\"\n      description=\"Configure application tracking\"\n    >\n      <div className=\"mx-auto max-w-2xl space-y-6\">\n        <div className=\"rounded-xl border border-border-subtle bg-bg-surface p-6\">\n          <h3 className=\"mb-4 flex items-center gap-2 text-sm font-semibold text-text-primary\">\n            <Settings className=\"h-4 w-4\" />\n            Tracking Configuration\n          </h3>\n          <div className=\"space-y-3\">\n            <label className=\"flex items-center justify-between\">\n              <span className=\"text-sm text-text-primary\">\n                Track active applications\n              </span>\n              <input\n                type=\"checkbox\"\n                checked={settings.trackActiveApplications}\n                onChange={(e) =>\n                  setSettings((s) => ({\n                    ...s,\n                    trackActiveApplications: e.target.checked,\n                  }))\n                }\n                className=\"h-4 w-4 rounded border-border-subtle\"\n              />\n            </label>\n            <label className=\"flex items-center justify-between\">\n              <span className=\"text-sm text-text-primary\">\n                Track browser tabs\n              </span>\n              <input\n                type=\"checkbox\"\n                checked={settings.trackBrowserTabs}\n                onChange={(e) =>\n                  setSettings((s) => ({\n                    ...s,\n                    trackBrowserTabs: e.target.checked,\n                  }))\n                }\n                className=\"h-4 w-4 rounded border-border-subtle\"\n              />\n            </label>\n            <label className=\"flex items-center justify-between\">\n              <span className=\"text-sm text-text-primary\">\n                Distraction alerts\n              </span>\n              <input\n                type=\"checkbox\"\n                checked={settings.distractionAlerts}\n                onChange={(e) =>\n                  setSettings((s) => ({\n                    ...s,\n                    distractionAlerts: e.target.checked,\n                  }))\n                }\n                className=\"h-4 w-4 rounded border-border-subtle\"\n              />\n            </label>\n          </div>\n        </div>\n        <div className=\"flex justify-end\">\n          <button\n            onClick={handleSave}\n            disabled={saving}\n            className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50\"\n          >\n            {saving ? \"Saving...\" : \"Save Settings\"}\n          </button>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAyB,gCAQzB,IAAqC;CACzC,yBAAyB;CACzB,kBAAkB;CAClB,mBAAmB;CACpB;AAED,SAAgB,IAA+B;CAC7C,IAAM,EAAE,iBAAc,OAAO,GAAe,EACtC,EAAE,SAAM,YAAS,aAAU,EAA2B;EAC1D,WAAW;GAAE,OAAO;GAAsB,OAAO;GAAK;EACtD,MAAM,CAAC;EACR,CAAC,EAEI,CAAC,GAAkB,EAAE,SAAS,OAAY,GAA6B,EACvE,CAAC,GAAU,KAAe,EAA2B,EAAiB;AAE5E,SAAgB;AACd,MAAI,GAAM,gBAAgB;GACxB,IAAM,IAAS,EAAK,eAAe,MAChC,MAAmC,EAAE,QAAQ,EAC/C;AACD,OAAI,GAAQ,OAAO;IACjB,IAAM,IAAM,EAAO;AACnB,MAAY;KACV,yBACE,EAAI,2BACJ,EAAiB;KACnB,kBACE,EAAI,oBAAoB,EAAiB;KAC3C,mBACE,EAAI,qBAAqB,EAAiB;KAC7C,CAAC;;;IAGL,CAAC,EAAK,CAAC;CAEV,IAAM,IAAa,EAAY,YAAY;AACzC,QAAM,EAAiB,EACrB,WAAW,EACT,OAAO;GACL,KAAK;GACL,OAAO;GACP,aAAa;GACb,OAAO;GACR,EACF,EACF,CAAC;IACD,CAAC,GAAkB,EAAS,CAAC;AA0BhC,QAxBI,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,GAAD,EAAiB,SAAQ,UAAW,CAAA;EACzB,CAAA,GAIb,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAA2G;GAEpH,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAAd,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAAA,yBAE7B;QACL,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA4B;QAErC,CAAA,EACP,kBAAC,SAAD;QACE,MAAK;QACL,SAAS,EAAS;QAClB,WAAW,MACT,GAAa,OAAO;SAClB,GAAG;SACH,yBAAyB,EAAE,OAAO;SACnC,EAAE;QAEL,WAAU;QACV,CAAA,CACI;;MACR,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA4B;QAErC,CAAA,EACP,kBAAC,SAAD;QACE,MAAK;QACL,SAAS,EAAS;QAClB,WAAW,MACT,GAAa,OAAO;SAClB,GAAG;SACH,kBAAkB,EAAE,OAAO;SAC5B,EAAE;QAEL,WAAU;QACV,CAAA,CACI;;MACR,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA4B;QAErC,CAAA,EACP,kBAAC,SAAD;QACE,MAAK;QACL,SAAS,EAAS;QAClB,WAAW,MACT,GAAa,OAAO;SAClB,GAAG;SACH,mBAAmB,EAAE,OAAO;SAC7B,EAAE;QAEL,WAAU;QACV,CAAA,CACI;;MACJ;OACF;OACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,SAAS;KACT,UAAU;KACV,WAAU;eAET,IAAS,cAAc;KACjB,CAAA;IACL,CAAA,CACF;;EACK,CAAA"}
+{"version":3,"file":"ApplicationUsageSettingsPage.js","names":[],"sources":["../../../../src/timecampus/pages/application-usage/ApplicationUsageSettingsPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\nimport { Settings } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListConfigurationsQuery,\n  useSetConfigurationMutation,\n  type ConfigurationFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nconst APP_USAGE_SETTINGS_KEY = \"timecampus.appusage.settings\";\n\ninterface AppUsageSettings {\n  trackActiveApplications: boolean;\n  trackBrowserTabs: boolean;\n  distractionAlerts: boolean;\n}\n\nconst DEFAULT_SETTINGS: AppUsageSettings = {\n  trackActiveApplications: true,\n  trackBrowserTabs: true,\n  distractionAlerts: false,\n};\n\nexport function ApplicationUsageSettingsPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n  const { data, loading, error } = useListConfigurationsQuery({\n    variables: { scope: \"WORKSPACE\" as never, limit: 100 },\n    skip: !workspaceId,\n  });\n\n  const [setConfiguration, { loading: saving }] = useSetConfigurationMutation();\n  const [settings, setSettings] = useState<AppUsageSettings>(DEFAULT_SETTINGS);\n\n  useEffect(() => {\n    if (data?.configurations) {\n      const config = data.configurations.find(\n        (c: ConfigurationFieldsFragment) => c.key === APP_USAGE_SETTINGS_KEY,\n      );\n      if (config?.value) {\n        const val = config.value as Partial<AppUsageSettings>;\n        setSettings({\n          trackActiveApplications:\n            val.trackActiveApplications ??\n            DEFAULT_SETTINGS.trackActiveApplications,\n          trackBrowserTabs:\n            val.trackBrowserTabs ?? DEFAULT_SETTINGS.trackBrowserTabs,\n          distractionAlerts:\n            val.distractionAlerts ?? DEFAULT_SETTINGS.distractionAlerts,\n        });\n      }\n    }\n  }, [data]);\n\n  const handleSave = useCallback(async () => {\n    await setConfiguration({\n      variables: {\n        input: {\n          key: APP_USAGE_SETTINGS_KEY,\n          value: settings as unknown as Record<string, unknown>,\n          description: \"Application usage tracking settings\",\n          scope: \"WORKSPACE\" as never,\n        },\n      },\n    });\n  }, [setConfiguration, settings]);\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"App Usage Settings\"\n        description=\"Configure application tracking\"\n      >\n        <LoadingSkeleton variant=\"detail\" />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout\n        title=\"App Usage Settings\"\n        description=\"Configure application tracking\"\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 settings. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"App Usage Settings\"\n      description=\"Configure application tracking\"\n    >\n      <div className=\"mx-auto max-w-2xl space-y-6\">\n        <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6\">\n          <h3 className=\"mb-4 flex items-center gap-2 text-sm font-semibold text-text-primary\">\n            <Settings className=\"h-4 w-4\" />\n            Tracking Configuration\n          </h3>\n          <div className=\"space-y-3\">\n            <label className=\"flex items-center justify-between\">\n              <span className=\"text-sm text-text-primary\">\n                Track active applications\n              </span>\n              <input\n                type=\"checkbox\"\n                checked={settings.trackActiveApplications}\n                onChange={(e) =>\n                  setSettings((s) => ({\n                    ...s,\n                    trackActiveApplications: e.target.checked,\n                  }))\n                }\n                className=\"h-4 w-4 rounded border-border-subtle\"\n              />\n            </label>\n            <label className=\"flex items-center justify-between\">\n              <span className=\"text-sm text-text-primary\">\n                Track browser tabs\n              </span>\n              <input\n                type=\"checkbox\"\n                checked={settings.trackBrowserTabs}\n                onChange={(e) =>\n                  setSettings((s) => ({\n                    ...s,\n                    trackBrowserTabs: e.target.checked,\n                  }))\n                }\n                className=\"h-4 w-4 rounded border-border-subtle\"\n              />\n            </label>\n            <label className=\"flex items-center justify-between\">\n              <span className=\"text-sm text-text-primary\">\n                Distraction alerts\n              </span>\n              <input\n                type=\"checkbox\"\n                checked={settings.distractionAlerts}\n                onChange={(e) =>\n                  setSettings((s) => ({\n                    ...s,\n                    distractionAlerts: e.target.checked,\n                  }))\n                }\n                className=\"h-4 w-4 rounded border-border-subtle\"\n              />\n            </label>\n          </div>\n        </div>\n        <div className=\"flex justify-end\">\n          <button\n            onClick={handleSave}\n            disabled={saving}\n            className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50\"\n          >\n            {saving ? \"Saving...\" : \"Save Settings\"}\n          </button>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAyB,gCAQzB,IAAqC;CACzC,yBAAyB;CACzB,kBAAkB;CAClB,mBAAmB;CACpB;AAED,SAAgB,IAA+B;CAC7C,IAAM,EAAE,iBAAc,OAAO,GAAe,EACtC,EAAE,SAAM,YAAS,aAAU,EAA2B;EAC1D,WAAW;GAAE,OAAO;GAAsB,OAAO;GAAK;EACtD,MAAM,CAAC;EACR,CAAC,EAEI,CAAC,GAAkB,EAAE,SAAS,OAAY,GAA6B,EACvE,CAAC,GAAU,KAAe,EAA2B,EAAiB;AAE5E,SAAgB;AACd,MAAI,GAAM,gBAAgB;GACxB,IAAM,IAAS,EAAK,eAAe,MAChC,MAAmC,EAAE,QAAQ,EAC/C;AACD,OAAI,GAAQ,OAAO;IACjB,IAAM,IAAM,EAAO;AACnB,MAAY;KACV,yBACE,EAAI,2BACJ,EAAiB;KACnB,kBACE,EAAI,oBAAoB,EAAiB;KAC3C,mBACE,EAAI,qBAAqB,EAAiB;KAC7C,CAAC;;;IAGL,CAAC,EAAK,CAAC;CAEV,IAAM,IAAa,EAAY,YAAY;AACzC,QAAM,EAAiB,EACrB,WAAW,EACT,OAAO;GACL,KAAK;GACL,OAAO;GACP,aAAa;GACb,OAAO;GACR,EACF,EACF,CAAC;IACD,CAAC,GAAkB,EAAS,CAAC;AA0BhC,QAxBI,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,GAAD,EAAiB,SAAQ,UAAW,CAAA;EACzB,CAAA,GAIb,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAA2G;GAEpH,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAAd,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAAA,yBAE7B;QACL,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA4B;QAErC,CAAA,EACP,kBAAC,SAAD;QACE,MAAK;QACL,SAAS,EAAS;QAClB,WAAW,MACT,GAAa,OAAO;SAClB,GAAG;SACH,yBAAyB,EAAE,OAAO;SACnC,EAAE;QAEL,WAAU;QACV,CAAA,CACI;;MACR,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA4B;QAErC,CAAA,EACP,kBAAC,SAAD;QACE,MAAK;QACL,SAAS,EAAS;QAClB,WAAW,MACT,GAAa,OAAO;SAClB,GAAG;SACH,kBAAkB,EAAE,OAAO;SAC5B,EAAE;QAEL,WAAU;QACV,CAAA,CACI;;MACR,kBAAC,SAAD;OAAO,WAAU;iBAAjB,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA4B;QAErC,CAAA,EACP,kBAAC,SAAD;QACE,MAAK;QACL,SAAS,EAAS;QAClB,WAAW,MACT,GAAa,OAAO;SAClB,GAAG;SACH,mBAAmB,EAAE,OAAO;SAC7B,EAAE;QAEL,WAAU;QACV,CAAA,CACI;;MACJ;OACF;OACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,SAAS;KACT,UAAU;KACV,WAAU;eAET,IAAS,cAAc;KACjB,CAAA;IACL,CAAA,CACF;;EACK,CAAA"}

package/dist/timecampus/pages/channels/ChannelsPage.js

@@ -1,28 +1,28 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
 import { getStatusColor as t } from "../../utils/helpers.js";
-import { PageLayout as n } from "../../components/PageLayout.js";
-import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
-import { useListChannelConfigsQuery as i, useListChannelStatusesQuery as a } from "../../../generated/wspace-operations.js";
+import { LoadingSkeleton as n } from "../../components/LoadingSkeleton.js";
+import { useListChannelConfigsQuery as r, useListChannelStatusesQuery as i } from "../../../generated/wspace-operations.js";
+import { PageLayout as a } from "../../components/PageLayout.js";
 import { Wifi as o, WifiOff as s } from "lucide-react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/timecampus/pages/channels/ChannelsPage.tsx
 function u() {
-	let { workspaceId: u = "" } = e(), { data: d, loading: f, error: p } = i(), { data: m } = a(), h = d?.channelConfigs ?? [], g = m?.channelStatuses ?? [], _ = new Map(g.map((e) => [e.channelId, e]));
-	return f ? /* @__PURE__ */ c(n, {
+	let { workspaceId: u = "" } = e(), { data: d, loading: f, error: p } = r(), { data: m } = i(), h = d?.channelConfigs ?? [], g = m?.channelStatuses ?? [], _ = new Map(g.map((e) => [e.channelId, e]));
+	return f ? /* @__PURE__ */ c(a, {
 		title: "Channels",
 		description: "Manage time tracking channels and integrations",
-		children: /* @__PURE__ */ c(r, {
+		children: /* @__PURE__ */ c(n, {
 			variant: "card",
 			count: 6
 		})
-	}) : p ? /* @__PURE__ */ c(n, {
+	}) : p ? /* @__PURE__ */ c(a, {
 		title: "Channels",
 		description: "Manage time tracking channels and integrations",
 		children: /* @__PURE__ */ c("div", {
-			className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400",
+			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 channels data. Please try again later."
 		})
-	}) : /* @__PURE__ */ c(n, {
+	}) : /* @__PURE__ */ c(a, {
 		title: "Channels",
 		description: "Manage time tracking channels and integrations",
 		children: /* @__PURE__ */ c("div", {
@@ -33,12 +33,12 @@ function u() {
 			}) : h.map((e) => {
 				let n = _.get(e.id), r = e.status === "active", i = e.lastSync ? new Date(e.lastSync).toLocaleString() : "Never";
 				return /* @__PURE__ */ l("div", {
-					className: "rounded-xl border border-border-subtle bg-bg-surface p-5 transition-colors hover:bg-bg-sunken/50 cursor-pointer",
+					className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-5 transition-colors hover:bg-bg-sunken/50 cursor-pointer",
 					children: [/* @__PURE__ */ l("div", {
 						className: "flex items-start justify-between",
 						children: [/* @__PURE__ */ l("div", {
 							className: "flex items-center gap-3",
-							children: [r ? /* @__PURE__ */ c(o, { className: "h-5 w-5 text-emerald-500" }) : /* @__PURE__ */ c(s, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+							children: [r ? /* @__PURE__ */ c(o, { className: "h-5 w-5 text-status-success-text" }) : /* @__PURE__ */ c(s, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
 								className: "text-sm font-semibold text-text-primary",
 								children: e.name
 							}), /* @__PURE__ */ c("p", {

package/dist/timecampus/pages/channels/ChannelsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelsPage.js","names":[],"sources":["../../../../src/timecampus/pages/channels/ChannelsPage.tsx"],"sourcesContent":["import { Radio, Settings, Wifi, WifiOff } 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  useListChannelConfigsQuery,\n  useListChannelStatusesQuery,\n  type ChannelConfigFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function ChannelsPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const {\n    data: configsData,\n    loading: configsLoading,\n    error: configsError,\n  } = useListChannelConfigsQuery();\n  const { data: statusesData } = useListChannelStatusesQuery();\n\n  const channels = configsData?.channelConfigs ?? [];\n  const statuses = statusesData?.channelStatuses ?? [];\n\n  type ChannelStatusItem = {\n    channelId: string;\n    name: string;\n    type: string;\n    status: string;\n    isHealthy: boolean;\n    lastSync?: string | null;\n  };\n\n  // Build a lookup map for status info\n  const statusMap = new Map<string, ChannelStatusItem>(\n    statuses.map((s: ChannelStatusItem) => [s.channelId, s]),\n  );\n\n  if (configsLoading) {\n    return (\n      <PageLayout\n        title=\"Channels\"\n        description=\"Manage time tracking channels and integrations\"\n      >\n        <LoadingSkeleton variant=\"card\" count={6} />\n      </PageLayout>\n    );\n  }\n\n  if (configsError) {\n    return (\n      <PageLayout\n        title=\"Channels\"\n        description=\"Manage time tracking channels and integrations\"\n      >\n        <div className=\"rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400\">\n          Failed to load channels data. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Channels\"\n      description=\"Manage time tracking channels and integrations\"\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n        {channels.length === 0 ? (\n          <div className=\"col-span-full p-8 text-center text-sm text-text-secondary\">\n            No channels configured yet. Set up your first tracking channel.\n          </div>\n        ) : (\n          channels.map((channel: ChannelConfigFieldsFragment) => {\n            const statusInfo = statusMap.get(channel.id);\n            const isActive = channel.status === \"active\";\n            const lastSync = channel.lastSync\n              ? new Date(channel.lastSync).toLocaleString()\n              : \"Never\";\n\n            return (\n              <div\n                key={channel.id}\n                className=\"rounded-xl border border-border-subtle bg-bg-surface p-5 transition-colors hover:bg-bg-sunken/50 cursor-pointer\"\n              >\n                <div className=\"flex items-start justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    {isActive ? (\n                      <Wifi className=\"h-5 w-5 text-emerald-500\" />\n                    ) : (\n                      <WifiOff className=\"h-5 w-5 text-text-secondary\" />\n                    )}\n                    <div>\n                      <p className=\"text-sm font-semibold text-text-primary\">\n                        {channel.name}\n                      </p>\n                      <p className=\"text-xs text-text-secondary\">\n                        {channel.type}\n                      </p>\n                    </div>\n                  </div>\n                  <span\n                    className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(channel.status)}`}\n                  >\n                    {channel.status}\n                  </span>\n                </div>\n                <div className=\"mt-3 flex items-center justify-between text-xs text-text-secondary\">\n                  <span>{statusInfo?.isHealthy ? \"Healthy\" : \"Unhealthy\"}</span>\n                  <span>Sync: {lastSync}</span>\n                </div>\n              </div>\n            );\n          })\n        )}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,IAAe;CAC7B,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,GAA4B,EAC1B,EAAE,MAAM,MAAiB,GAA6B,EAEtD,IAAW,GAAa,kBAAkB,EAAE,EAC5C,IAAW,GAAc,mBAAmB,EAAE,EAY9C,IAAY,IAAI,IACpB,EAAS,KAAK,MAAyB,CAAC,EAAE,WAAW,EAAE,CAAC,CACzD;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;aAA+H;GAExI,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAS,WAAW,IACnB,kBAAC,OAAD;IAAK,WAAU;cAA4D;IAErE,CAAA,GAEN,EAAS,KAAK,MAAyC;IACrD,IAAM,IAAa,EAAU,IAAI,EAAQ,GAAG,EACtC,IAAW,EAAQ,WAAW,UAC9B,IAAW,EAAQ,WACrB,IAAI,KAAK,EAAQ,SAAS,CAAC,gBAAgB,GAC3C;AAEJ,WACE,kBAAC,OAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,IACC,kBAAC,GAAD,EAAM,WAAU,4BAA6B,CAAA,GAE7C,kBAAC,GAAD,EAAS,WAAU,+BAAgC,CAAA,EAErD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,CACA,EAAA,CAAA,CACF;UACN,kBAAC,QAAD;OACE,WAAW,4DAA4D,EAAe,EAAQ,OAAO;iBAEpG,EAAQ;OACJ,CAAA,CACH;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD,EAAA,UAAO,GAAY,YAAY,YAAY,aAAmB,CAAA,EAC9D,kBAAC,QAAD,EAAA,UAAA,CAAM,UAAO,EAAgB,EAAA,CAAA,CACzB;QACF;OA7BC,EAAQ,GA6BT;KAER;GAEA,CAAA;EACK,CAAA"}
+{"version":3,"file":"ChannelsPage.js","names":[],"sources":["../../../../src/timecampus/pages/channels/ChannelsPage.tsx"],"sourcesContent":["import { Radio, Settings, Wifi, WifiOff } 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  useListChannelConfigsQuery,\n  useListChannelStatusesQuery,\n  type ChannelConfigFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function ChannelsPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const {\n    data: configsData,\n    loading: configsLoading,\n    error: configsError,\n  } = useListChannelConfigsQuery();\n  const { data: statusesData } = useListChannelStatusesQuery();\n\n  const channels = configsData?.channelConfigs ?? [];\n  const statuses = statusesData?.channelStatuses ?? [];\n\n  type ChannelStatusItem = {\n    channelId: string;\n    name: string;\n    type: string;\n    status: string;\n    isHealthy: boolean;\n    lastSync?: string | null;\n  };\n\n  // Build a lookup map for status info\n  const statusMap = new Map<string, ChannelStatusItem>(\n    statuses.map((s: ChannelStatusItem) => [s.channelId, s]),\n  );\n\n  if (configsLoading) {\n    return (\n      <PageLayout\n        title=\"Channels\"\n        description=\"Manage time tracking channels and integrations\"\n      >\n        <LoadingSkeleton variant=\"card\" count={6} />\n      </PageLayout>\n    );\n  }\n\n  if (configsError) {\n    return (\n      <PageLayout\n        title=\"Channels\"\n        description=\"Manage time tracking channels 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 channels data. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Channels\"\n      description=\"Manage time tracking channels and integrations\"\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n        {channels.length === 0 ? (\n          <div className=\"col-span-full p-8 text-center text-sm text-text-secondary\">\n            No channels configured yet. Set up your first tracking channel.\n          </div>\n        ) : (\n          channels.map((channel: ChannelConfigFieldsFragment) => {\n            const statusInfo = statusMap.get(channel.id);\n            const isActive = channel.status === \"active\";\n            const lastSync = channel.lastSync\n              ? new Date(channel.lastSync).toLocaleString()\n              : \"Never\";\n\n            return (\n              <div\n                key={channel.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 justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    {isActive ? (\n                      <Wifi className=\"h-5 w-5 text-status-success-text\" />\n                    ) : (\n                      <WifiOff className=\"h-5 w-5 text-text-secondary\" />\n                    )}\n                    <div>\n                      <p className=\"text-sm font-semibold text-text-primary\">\n                        {channel.name}\n                      </p>\n                      <p className=\"text-xs text-text-secondary\">\n                        {channel.type}\n                      </p>\n                    </div>\n                  </div>\n                  <span\n                    className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(channel.status)}`}\n                  >\n                    {channel.status}\n                  </span>\n                </div>\n                <div className=\"mt-3 flex items-center justify-between text-xs text-text-secondary\">\n                  <span>{statusInfo?.isHealthy ? \"Healthy\" : \"Unhealthy\"}</span>\n                  <span>Sync: {lastSync}</span>\n                </div>\n              </div>\n            );\n          })\n        )}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,IAAe;CAC7B,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,GAA4B,EAC1B,EAAE,MAAM,MAAiB,GAA6B,EAEtD,IAAW,GAAa,kBAAkB,EAAE,EAC5C,IAAW,GAAc,mBAAmB,EAAE,EAY9C,IAAY,IAAI,IACpB,EAAS,KAAK,MAAyB,CAAC,EAAE,WAAW,EAAE,CAAC,CACzD;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,EAAS,WAAW,IACnB,kBAAC,OAAD;IAAK,WAAU;cAA4D;IAErE,CAAA,GAEN,EAAS,KAAK,MAAyC;IACrD,IAAM,IAAa,EAAU,IAAI,EAAQ,GAAG,EACtC,IAAW,EAAQ,WAAW,UAC9B,IAAW,EAAQ,WACrB,IAAI,KAAK,EAAQ,SAAS,CAAC,gBAAgB,GAC3C;AAEJ,WACE,kBAAC,OAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,IACC,kBAAC,GAAD,EAAM,WAAU,oCAAqC,CAAA,GAErD,kBAAC,GAAD,EAAS,WAAU,+BAAgC,CAAA,EAErD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,CACA,EAAA,CAAA,CACF;UACN,kBAAC,QAAD;OACE,WAAW,4DAA4D,EAAe,EAAQ,OAAO;iBAEpG,EAAQ;OACJ,CAAA,CACH;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD,EAAA,UAAO,GAAY,YAAY,YAAY,aAAmB,CAAA,EAC9D,kBAAC,QAAD,EAAA,UAAA,CAAM,UAAO,EAAgB,EAAA,CAAA,CACzB;QACF;OA7BC,EAAQ,GA6BT;KAER;GAEA,CAAA;EACK,CAAA"}

package/dist/timecampus/pages/client-portal/ClientPortalPage.js

@@ -1,29 +1,29 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
 import { getInitials as t, getStatusColor as n } from "../../utils/helpers.js";
-import { PageLayout as r } from "../../components/PageLayout.js";
-import { StatCard as i } from "../../components/StatCard.js";
-import { LoadingSkeleton as a } from "../../components/LoadingSkeleton.js";
-import { useGetClientPortalStatsQuery as o, useListClientPortalConfigsQuery as s } from "../../../generated/wspace-operations.js";
+import { StatCard as r } from "../../components/StatCard.js";
+import { LoadingSkeleton as i } from "../../components/LoadingSkeleton.js";
+import { useGetClientPortalStatsQuery as a, useListClientPortalConfigsQuery as o } from "../../../generated/wspace-operations.js";
+import { PageLayout as s } from "../../components/PageLayout.js";
 import { Building2 as c, DollarSign as l, FolderOpen as u, Plus as d } from "lucide-react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/timecampus/pages/client-portal/ClientPortalPage.tsx
 function m() {
-	let { workspaceId: m = "" } = e(), { data: h, loading: g, error: _ } = s(), { data: v, loading: y } = o(), b = h?.clientPortalConfigs?.items ?? [], x = v?.clientPortalStats;
-	return g ? /* @__PURE__ */ f(r, {
+	let { workspaceId: m = "" } = e(), { data: h, loading: g, error: _ } = o(), { data: v, loading: y } = a(), b = h?.clientPortalConfigs?.items ?? [], x = v?.clientPortalStats;
+	return g ? /* @__PURE__ */ f(s, {
 		title: "Client Portal",
 		description: "Manage clients and their projects",
-		children: /* @__PURE__ */ f(a, {
+		children: /* @__PURE__ */ f(i, {
 			variant: "list",
 			count: 4
 		})
-	}) : _ ? /* @__PURE__ */ f(r, {
+	}) : _ ? /* @__PURE__ */ f(s, {
 		title: "Client Portal",
 		description: "Manage clients and their projects",
 		children: /* @__PURE__ */ f("div", {
-			className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400",
+			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 client portal data. Please try again later."
 		})
-	}) : /* @__PURE__ */ p(r, {
+	}) : /* @__PURE__ */ p(s, {
 		title: "Client Portal",
 		description: "Manage clients and their projects",
 		actions: /* @__PURE__ */ p("button", {
@@ -33,22 +33,22 @@ function m() {
 		children: [/* @__PURE__ */ p("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 			children: [
-				/* @__PURE__ */ f(i, {
+				/* @__PURE__ */ f(r, {
 					title: "Active Clients",
 					value: String(x?.activeClients ?? 0),
 					icon: /* @__PURE__ */ f(c, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ f(i, {
+				/* @__PURE__ */ f(r, {
 					title: "Total Projects",
 					value: String(x?.totalProjectsShared ?? 0),
 					icon: /* @__PURE__ */ f(u, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ f(i, {
+				/* @__PURE__ */ f(r, {
 					title: "Total Clients",
 					value: String(x?.totalClients ?? 0),
 					icon: /* @__PURE__ */ f(l, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ f(i, {
+				/* @__PURE__ */ f(r, {
 					title: "Active",
 					value: String(x?.activeClients ?? 0),
 					trend: {
@@ -58,7 +58,7 @@ function m() {
 				})
 			]
 		}), /* @__PURE__ */ f("div", {
-			className: "rounded-xl border border-border-subtle bg-bg-surface",
+			className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
 			children: /* @__PURE__ */ f("div", {
 				className: "divide-y divide-border",
 				children: b.length === 0 ? /* @__PURE__ */ f("div", {

package/dist/timecampus/pages/client-portal/ClientPortalPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClientPortalPage.js","names":[],"sources":["../../../../src/timecampus/pages/client-portal/ClientPortalPage.tsx"],"sourcesContent":["import { Building2, Plus, DollarSign, FolderOpen } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport {\n  getStatusColor,\n  formatCurrency,\n  getInitials,\n} from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListClientPortalConfigsQuery,\n  useGetClientPortalStatsQuery,\n  type ClientPortalFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function ClientPortalPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const {\n    data: configsData,\n    loading: configsLoading,\n    error: configsError,\n  } = useListClientPortalConfigsQuery();\n  const { data: statsData, loading: statsLoading } =\n    useGetClientPortalStatsQuery();\n\n  const clients = configsData?.clientPortalConfigs?.items ?? [];\n  const stats = statsData?.clientPortalStats;\n\n  if (configsLoading) {\n    return (\n      <PageLayout\n        title=\"Client Portal\"\n        description=\"Manage clients and their projects\"\n      >\n        <LoadingSkeleton variant=\"list\" count={4} />\n      </PageLayout>\n    );\n  }\n\n  if (configsError) {\n    return (\n      <PageLayout\n        title=\"Client Portal\"\n        description=\"Manage clients and their projects\"\n      >\n        <div className=\"rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400\">\n          Failed to load client portal data. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Client Portal\"\n      description=\"Manage clients and their projects\"\n      actions={\n        <button className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\">\n          <Plus className=\"h-4 w-4\" />\n          Add Client\n        </button>\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          title=\"Active Clients\"\n          value={String(stats?.activeClients ?? 0)}\n          icon={<Building2 className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Total Projects\"\n          value={String(stats?.totalProjectsShared ?? 0)}\n          icon={<FolderOpen className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Total Clients\"\n          value={String(stats?.totalClients ?? 0)}\n          icon={<DollarSign className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Active\"\n          value={String(stats?.activeClients ?? 0)}\n          trend={{ value: 0, label: \"clients\" }}\n        />\n      </div>\n\n      <div className=\"rounded-xl border border-border-subtle bg-bg-surface\">\n        <div className=\"divide-y divide-border\">\n          {clients.length === 0 ? (\n            <div className=\"p-8 text-center text-sm text-text-secondary\">\n              No clients configured yet. Add your first client to get started.\n            </div>\n          ) : (\n            clients.map((client: ClientPortalFieldsFragment) => {\n              const totalTrackedHours = client.projects.reduce(\n                (sum: number, p: { trackedHours: number }) =>\n                  sum + p.trackedHours,\n                0,\n              );\n              return (\n                <div\n                  key={client.id}\n                  className=\"flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors cursor-pointer\"\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 text-sm font-medium text-primary\">\n                      {getInitials(client.clientName)}\n                    </div>\n                    <div>\n                      <p className=\"text-sm font-medium text-text-primary\">\n                        {client.clientName}\n                      </p>\n                      <p className=\"text-xs text-text-secondary\">\n                        {client.projects.length} projects &middot;{\" \"}\n                        {totalTrackedHours}h tracked\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-4\">\n                    {client.contactEmail && (\n                      <span className=\"text-xs text-text-secondary\">\n                        {client.contactEmail}\n                      </span>\n                    )}\n                    <span\n                      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(client.isActive ? \"active\" : \"inactive\")}`}\n                    >\n                      {client.isActive ? \"active\" : \"inactive\"}\n                    </span>\n                  </div>\n                </div>\n              );\n            })\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,IAAmB;CACjC,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,GAAiC,EAC/B,EAAE,MAAM,GAAW,SAAS,MAChC,GAA8B,EAE1B,IAAU,GAAa,qBAAqB,SAAS,EAAE,EACvD,IAAQ,GAAW;AA0BzB,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;aAA+H;GAExI,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,aAErB;;YAPb,CAUE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,GAAO,iBAAiB,EAAE;KACxC,MAAM,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;KACvC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,GAAO,uBAAuB,EAAE;KAC9C,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;KACxC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,GAAO,gBAAgB,EAAE;KACvC,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;KACxC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,GAAO,iBAAiB,EAAE;KACxC,OAAO;MAAE,OAAO;MAAG,OAAO;MAAW;KACrC,CAAA;IACE;MAEN,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAQ,WAAW,IAClB,kBAAC,OAAD;KAAK,WAAU;eAA8C;KAEvD,CAAA,GAEN,EAAQ,KAAK,MAAuC;KAClD,IAAM,IAAoB,EAAO,SAAS,QACvC,GAAa,MACZ,IAAM,EAAE,cACV,EACD;AACD,YACE,kBAAC,OAAD;MAEE,WAAU;gBAFZ,CAIE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAY,EAAO,WAAW;QAC3B,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAO;QACN,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAO,SAAS;SAAO;SAAmB;SAC1C;SAAkB;SACjB;UACA,EAAA,CAAA,CACF;UACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,EAAO,gBACN,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAO;QACH,CAAA,EAET,kBAAC,QAAD;QACE,WAAW,4DAA4D,EAAe,EAAO,WAAW,WAAW,WAAW;kBAE7H,EAAO,WAAW,WAAW;QACzB,CAAA,CACH;SACF;QA7BC,EAAO,GA6BR;MAER;IAEA,CAAA;GACF,CAAA,CACK"}
+{"version":3,"file":"ClientPortalPage.js","names":[],"sources":["../../../../src/timecampus/pages/client-portal/ClientPortalPage.tsx"],"sourcesContent":["import { Building2, Plus, DollarSign, FolderOpen } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport {\n  getStatusColor,\n  formatCurrency,\n  getInitials,\n} from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListClientPortalConfigsQuery,\n  useGetClientPortalStatsQuery,\n  type ClientPortalFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function ClientPortalPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const {\n    data: configsData,\n    loading: configsLoading,\n    error: configsError,\n  } = useListClientPortalConfigsQuery();\n  const { data: statsData, loading: statsLoading } =\n    useGetClientPortalStatsQuery();\n\n  const clients = configsData?.clientPortalConfigs?.items ?? [];\n  const stats = statsData?.clientPortalStats;\n\n  if (configsLoading) {\n    return (\n      <PageLayout\n        title=\"Client Portal\"\n        description=\"Manage clients and their projects\"\n      >\n        <LoadingSkeleton variant=\"list\" count={4} />\n      </PageLayout>\n    );\n  }\n\n  if (configsError) {\n    return (\n      <PageLayout\n        title=\"Client Portal\"\n        description=\"Manage clients and their projects\"\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 client portal data. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Client Portal\"\n      description=\"Manage clients and their projects\"\n      actions={\n        <button className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\">\n          <Plus className=\"h-4 w-4\" />\n          Add Client\n        </button>\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          title=\"Active Clients\"\n          value={String(stats?.activeClients ?? 0)}\n          icon={<Building2 className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Total Projects\"\n          value={String(stats?.totalProjectsShared ?? 0)}\n          icon={<FolderOpen className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Total Clients\"\n          value={String(stats?.totalClients ?? 0)}\n          icon={<DollarSign className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Active\"\n          value={String(stats?.activeClients ?? 0)}\n          trend={{ value: 0, label: \"clients\" }}\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          {clients.length === 0 ? (\n            <div className=\"p-8 text-center text-sm text-text-secondary\">\n              No clients configured yet. Add your first client to get started.\n            </div>\n          ) : (\n            clients.map((client: ClientPortalFieldsFragment) => {\n              const totalTrackedHours = client.projects.reduce(\n                (sum: number, p: { trackedHours: number }) =>\n                  sum + p.trackedHours,\n                0,\n              );\n              return (\n                <div\n                  key={client.id}\n                  className=\"flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors cursor-pointer\"\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 text-sm font-medium text-primary\">\n                      {getInitials(client.clientName)}\n                    </div>\n                    <div>\n                      <p className=\"text-sm font-medium text-text-primary\">\n                        {client.clientName}\n                      </p>\n                      <p className=\"text-xs text-text-secondary\">\n                        {client.projects.length} projects &middot;{\" \"}\n                        {totalTrackedHours}h tracked\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-4\">\n                    {client.contactEmail && (\n                      <span className=\"text-xs text-text-secondary\">\n                        {client.contactEmail}\n                      </span>\n                    )}\n                    <span\n                      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(client.isActive ? \"active\" : \"inactive\")}`}\n                    >\n                      {client.isActive ? \"active\" : \"inactive\"}\n                    </span>\n                  </div>\n                </div>\n              );\n            })\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,IAAmB;CACjC,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,GAAiC,EAC/B,EAAE,MAAM,GAAW,SAAS,MAChC,GAA8B,EAE1B,IAAU,GAAa,qBAAqB,SAAS,EAAE,EACvD,IAAQ,GAAW;AA0BzB,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,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,aAErB;;YAPb,CAUE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,GAAO,iBAAiB,EAAE;KACxC,MAAM,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;KACvC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,GAAO,uBAAuB,EAAE;KAC9C,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;KACxC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,GAAO,gBAAgB,EAAE;KACvC,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;KACxC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,GAAO,iBAAiB,EAAE;KACxC,OAAO;MAAE,OAAO;MAAG,OAAO;MAAW;KACrC,CAAA;IACE;MAEN,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAQ,WAAW,IAClB,kBAAC,OAAD;KAAK,WAAU;eAA8C;KAEvD,CAAA,GAEN,EAAQ,KAAK,MAAuC;KAClD,IAAM,IAAoB,EAAO,SAAS,QACvC,GAAa,MACZ,IAAM,EAAE,cACV,EACD;AACD,YACE,kBAAC,OAAD;MAEE,WAAU;gBAFZ,CAIE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAY,EAAO,WAAW;QAC3B,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAO;QACN,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAO,SAAS;SAAO;SAAmB;SAC1C;SAAkB;SACjB;UACA,EAAA,CAAA,CACF;UACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,EAAO,gBACN,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAO;QACH,CAAA,EAET,kBAAC,QAAD;QACE,WAAW,4DAA4D,EAAe,EAAO,WAAW,WAAW,WAAW;kBAE7H,EAAO,WAAW,WAAW;QACzB,CAAA,CACH;SACF;QA7BC,EAAO,GA6BR;MAER;IAEA,CAAA;GACF,CAAA,CACK"}

package/dist/timecampus/pages/dashboard/AnalyticsPage.js

@@ -1,33 +1,33 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
-import { PageLayout as t } from "../../components/PageLayout.js";
-import { LoadingSkeleton as n } from "../../components/LoadingSkeleton.js";
-import { useGetFocusScoreSummaryQuery as r, useGetTimeEntryStatsQuery as i, useGetWorkPatternSummaryQuery as a } from "../../../generated/wspace-operations.js";
+import { LoadingSkeleton as t } from "../../components/LoadingSkeleton.js";
+import { useGetFocusScoreSummaryQuery as n, useGetTimeEntryStatsQuery as r, useGetWorkPatternSummaryQuery as i } from "../../../generated/wspace-operations.js";
+import { PageLayout as a } from "../../components/PageLayout.js";
 import { BarChart3 as o } from "lucide-react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/timecampus/pages/dashboard/AnalyticsPage.tsx
 function l() {
-	let { workspaceId: l = "" } = e(), { data: u, loading: d, error: f } = i({ skip: !l }), { data: p, loading: m } = r({ skip: !l }), { data: h, loading: g } = a({ skip: !l }), _ = u?.timeEntryStats, v = p?.focusScoreSummary, y = h?.workPatternSummary;
-	return d || m || g ? /* @__PURE__ */ s(t, {
+	let { workspaceId: l = "" } = e(), { data: u, loading: d, error: f } = r({ skip: !l }), { data: p, loading: m } = n({ skip: !l }), { data: h, loading: g } = i({ skip: !l }), _ = u?.timeEntryStats, v = p?.focusScoreSummary, y = h?.workPatternSummary;
+	return d || m || g ? /* @__PURE__ */ s(a, {
 		title: "Analytics",
 		description: "Insights into your time tracking and productivity",
-		children: /* @__PURE__ */ s(n, {
+		children: /* @__PURE__ */ s(t, {
 			variant: "card",
 			count: 4
 		})
-	}) : f ? /* @__PURE__ */ s(t, {
+	}) : f ? /* @__PURE__ */ s(a, {
 		title: "Analytics",
 		description: "Insights into your time tracking and productivity",
 		children: /* @__PURE__ */ s("div", {
-			className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-600 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400",
+			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 analytics. Please try again later."
 		})
-	}) : /* @__PURE__ */ s(t, {
+	}) : /* @__PURE__ */ s(a, {
 		title: "Analytics",
 		description: "Insights into your time tracking and productivity",
 		children: /* @__PURE__ */ c("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
 			children: [/* @__PURE__ */ c("div", {
-				className: "rounded-xl border border-border-subtle bg-bg-surface p-6",
+				className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
 				children: [/* @__PURE__ */ c("div", {
 					className: "mb-4 flex items-center gap-2",
 					children: [/* @__PURE__ */ s(o, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ s("h3", {
@@ -61,7 +61,7 @@ function l() {
 					})
 				})]
 			}), /* @__PURE__ */ c("div", {
-				className: "rounded-xl border border-border-subtle bg-bg-surface p-6",
+				className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
 				children: [/* @__PURE__ */ c("div", {
 					className: "mb-4 flex items-center gap-2",
 					children: [/* @__PURE__ */ s(o, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ s("h3", {