@burdenoff/microfe-timecampus 2026.703.4 → 2026.703.6

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

@@ -2,340 +2,442 @@ import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
 import { formatHours as t } from "../../utils/helpers.js";
 import { StatCard as n } from "../../components/StatCard.js";
 import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
-import { useCategorizeApplicationMutation as ee, useDeleteApplicationUsageMutation as te, useGetAppUsageSummaryQuery as i, useListApplicationUsagesQuery as a, useRecordApplicationUsageMutation as ne } from "../../../generated/wspace-operations.js";
-import { PageLayout as o } from "../../components/PageLayout.js";
-import { EmptyState as re } from "../../components/EmptyState.js";
-import { Modal as s } from "../../components/Modal.js";
-import { useState as c } from "react";
-import { Clock as ie, Monitor as l, Plus as u, Tag as d, Trash2 as f } from "lucide-react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useCategorizeApplicationMutation as ee, useDeleteApplicationUsageMutation as i, useGetAppUsageSummaryQuery as te, useListApplicationUsagesQuery as ne, useRecordApplicationUsageMutation as re } from "../../../generated/wspace-operations.js";
+import { PageLayout as a } from "../../components/PageLayout.js";
+import { StatusBadge as ie } from "../../components/StatusBadge.js";
+import { EmptyState as o } from "../../components/EmptyState.js";
+import { ChartCard as s } from "../../components/ChartCard.js";
+import { Modal as c } from "../../components/Modal.js";
+import { chartTokens as l } from "../../components/charts/chartTheme.js";
+import { TrendChart as ae } from "../../components/charts/TrendChart.js";
+import { DonutChart as oe } from "../../components/charts/DonutChart.js";
+import "../../components/index.js";
+import { useState as u } from "react";
+import { Clock as se, Monitor as d, Plus as f, Tag as p, Trash2 as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { GlassCard as ce } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/pages/application-usage/ApplicationUsagePage.tsx
-var g = 50, _ = [
+var v = 50, y = [
 	"productive",
 	"neutral",
 	"communication",
 	"distracting"
-], ae = {
-	productive: "bg-status-success-bg text-status-success-text",
-	neutral: "bg-bg-sunken text-text-secondary",
-	communication: "bg-status-info-bg text-status-info-text",
-	distracting: "bg-status-error-bg text-status-error-text"
-}, v = "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary", y = "block text-sm font-medium text-text-primary";
-function oe() {
+], le = {
+	productive: "success",
+	neutral: "muted",
+	communication: "info",
+	distracting: "error"
+}, b = {
+	productive: l.positive,
+	neutral: l.series[3],
+	distracting: l.negative
+}, ue = (e) => `${e.toFixed(e >= 10 ? 0 : 1)}h`, de = (e) => t(e / 3600), fe = (e) => {
+	let t = new Date(String(e));
+	return Number.isNaN(t.getTime()) ? String(e) : t.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric"
+	});
+}, x = "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary", S = "block text-sm font-medium text-text-primary";
+function pe() {
 	return (/* @__PURE__ */ new Date()).toISOString();
 }
-function b() {
-	let { workspaceId: b = "" } = e(), { data: x, loading: S, error: C, fetchMore: w, refetch: T } = a({
+function C() {
+	let { workspaceId: l = "" } = e(), { data: C, loading: me, error: he, fetchMore: ge, refetch: _e } = ne({
 		variables: {
-			limit: g,
+			limit: v,
 			offset: 0
 		},
-		skip: !b,
+		skip: !l,
 		notifyOnNetworkStatusChange: !0
-	}), { data: E, loading: se, error: ce, refetch: le } = i({ skip: !b }), ue = S || se, de = C || ce, D = x?.applicationUsages ?? [], O = E?.appUsageSummary, fe = D.length > 0 && D.length % g === 0, [k, A] = c(!1), [j, M] = c(!1), [N, P] = c(""), [F, I] = c("productive"), [L, R] = c(""), [z, B] = c(""), [V, H] = c(null), [U, W] = c("productive"), [G, K] = c(null), [pe, { loading: q, error: me }] = ne(), [he, { loading: J, error: ge }] = ee(), [_e, { loading: Y, error: ve }] = te(), X = async () => {
-		await Promise.all([T(), le()]);
-	}, Z = () => {
-		P(""), I("productive"), R(""), B(""), M(!0);
-	}, ye = async () => {
-		!N.trim() || !L || (await pe({ variables: { input: {
-			applicationName: N.trim(),
-			category: F,
-			timeSpent: Math.round(Number(L) * 60),
-			sessions: z ? Number(z) : void 0,
-			date: oe()
-		} } }), M(!1), await X());
-	}, be = (e) => {
-		H(e), W(e.category);
-	}, xe = async () => {
-		V && (await he({ variables: {
-			applicationName: V.applicationName,
-			category: U
-		} }), H(null), await X());
-	}, Se = async () => {
-		G && (await _e({ variables: { id: G.id } }), K(null), await X());
-	}, Ce = async () => {
-		A(!0);
+	}), { data: ve, loading: ye, error: be, refetch: xe } = te({ skip: !l }), Se = me || ye, Ce = he || be, w = C?.applicationUsages ?? [], T = ve?.appUsageSummary, E = w.length > 0 && w.length % v === 0, [D, O] = u(!1), [k, A] = u(!1), [j, M] = u(""), [N, P] = u("productive"), [F, I] = u(""), [L, R] = u(""), [z, B] = u(null), [V, H] = u("productive"), [U, W] = u(null), [we, { loading: G, error: Te }] = re(), [Ee, { loading: K, error: De }] = ee(), [Oe, { loading: q, error: ke }] = i(), J = async () => {
+		await Promise.all([_e(), xe()]);
+	}, Y = () => {
+		M(""), P("productive"), I(""), R(""), A(!0);
+	}, Ae = async () => {
+		!j.trim() || !F || (await we({ variables: { input: {
+			applicationName: j.trim(),
+			category: N,
+			timeSpent: Math.round(Number(F) * 60),
+			sessions: L ? Number(L) : void 0,
+			date: pe()
+		} } }), A(!1), await J());
+	}, X = (e) => {
+		B(e), H(e.category);
+	}, je = async () => {
+		z && (await Ee({ variables: {
+			applicationName: z.applicationName,
+			category: V
+		} }), B(null), await J());
+	}, Me = async () => {
+		U && (await Oe({ variables: { id: U.id } }), W(null), await J());
+	}, Ne = async () => {
+		O(!0);
 		try {
-			await w({
-				variables: { offset: D.length },
+			await ge({
+				variables: { offset: w.length },
 				updateQuery: (e, { fetchMoreResult: t }) => t ? {
 					...e,
 					applicationUsages: [...e.applicationUsages, ...t.applicationUsages]
 				} : e
 			});
 		} finally {
-			A(!1);
+			O(!1);
+		}
+	}, Z = w.reduce((e, t) => e + t.timeSpent, 0), Q = w.reduce((e, t) => e + t.switches, 0), Pe = T?.productivityRatio == null ? "--" : `${Math.round(T.productivityRatio * 100)}%`, Fe = w.filter((e) => e.timeSpent >= 5400).length, Ie = [...w].sort((e, t) => t.timeSpent - e.timeSpent), Le = T ? [
+		{
+			name: "Productive",
+			value: T.productiveTime,
+			color: b.productive
+		},
+		{
+			name: "Neutral",
+			value: T.neutralTime,
+			color: b.neutral
+		},
+		{
+			name: "Distracting",
+			value: T.distractingTime,
+			color: b.distracting
 		}
-	}, Q = D.reduce((e, t) => e + t.timeSpent, 0), $ = D.reduce((e, t) => e + t.switches, 0), we = O?.productivityRatio == null ? "--" : `${Math.round(O.productivityRatio * 100)}%`, Te = D.filter((e) => e.timeSpent >= 5400).length;
-	return ue ? /* @__PURE__ */ m(o, {
+	] : [], Re = (T?.productiveTime ?? 0) + (T?.neutralTime ?? 0) + (T?.distractingTime ?? 0), $ = /* @__PURE__ */ new Map();
+	for (let e of w) {
+		let t = (e.date ?? "").slice(0, 10);
+		t && $.set(t, ($.get(t) ?? 0) + e.timeSpent);
+	}
+	let ze = Array.from($.entries()).sort(([e], [t]) => e.localeCompare(t)).map(([e, t]) => ({
+		day: e,
+		hours: Math.round(t / 3600 * 100) / 100
+	}));
+	return Se ? /* @__PURE__ */ g(a, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
-		children: /* @__PURE__ */ m(r, {
+		children: /* @__PURE__ */ g(r, {
 			variant: "card",
 			count: 4
 		})
-	}) : de ? /* @__PURE__ */ m(o, {
+	}) : Ce ? /* @__PURE__ */ g(a, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
-		children: /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ g("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__ */ h(o, {
+	}) : /* @__PURE__ */ _(a, {
 		title: "App Usage",
 		description: "Track application usage and productivity",
 		purpose: "See where your screen time actually goes — which apps are productive, how often you context-switch, and how many real focus sessions you get — so you can cut the digital distractions eating your day.",
-		actions: /* @__PURE__ */ h("button", {
-			onClick: Z,
+		actions: /* @__PURE__ */ _("button", {
+			onClick: Y,
 			className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
-			children: [/* @__PURE__ */ m(u, { className: "h-4 w-4" }), "Add Usage"]
+			children: [/* @__PURE__ */ g(f, { className: "h-4 w-4" }), "Add Usage"]
 		}),
 		children: [
-			/* @__PURE__ */ h("div", {
-				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
-				children: [
-					/* @__PURE__ */ m(n, {
-						featured: !0,
-						title: "Total Screen Time",
-						value: t(Q / 3600),
-						icon: /* @__PURE__ */ m(l, { className: "h-5 w-5" })
-					}),
-					/* @__PURE__ */ m(n, {
-						title: "Productive Time",
-						value: we,
-						trend: O?.productivityRatio == null ? void 0 : {
-							value: 5,
-							label: "vs last week"
-						}
-					}),
-					/* @__PURE__ */ m(n, {
-						title: "App Switches",
-						value: String($),
-						description: `Avg. ${D.length > 0 ? Math.round($ / D.length) : 0}/app`
-					}),
-					/* @__PURE__ */ m(n, {
-						title: "Focus Sessions",
-						value: String(Te),
-						icon: /* @__PURE__ */ m(ie, { className: "h-5 w-5" }),
-						description: "90+ min each"
+			/* @__PURE__ */ _("div", {
+				className: "space-y-6",
+				children: [/* @__PURE__ */ _("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+					children: [
+						/* @__PURE__ */ g(n, {
+							featured: !0,
+							title: "Total Screen Time",
+							value: t(Z / 3600),
+							icon: /* @__PURE__ */ g(d, { className: "h-5 w-5" })
+						}),
+						/* @__PURE__ */ g(n, {
+							title: "Productive Time",
+							value: Pe,
+							description: "Share of tracked time"
+						}),
+						/* @__PURE__ */ g(n, {
+							title: "App Switches",
+							value: String(Q),
+							description: `Avg. ${w.length > 0 ? Math.round(Q / w.length) : 0}/app`
+						}),
+						/* @__PURE__ */ g(n, {
+							title: "Focus Sessions",
+							value: String(Fe),
+							icon: /* @__PURE__ */ g(se, { className: "h-5 w-5" }),
+							description: "90+ min each"
+						})
+					]
+				}), w.length === 0 ? /* @__PURE__ */ g(o, {
+					illustration: "empty-data",
+					title: "No application usage data found",
+					description: "Record app usage manually or connect the desktop tracker, and your apps will appear here ranked by time spent.",
+					action: /* @__PURE__ */ _("button", {
+						onClick: Y,
+						className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
+						children: [/* @__PURE__ */ g(f, { className: "h-4 w-4" }), "Add Usage"]
 					})
-				]
-			}),
-			D.length === 0 ? /* @__PURE__ */ m(re, {
-				illustration: "empty-data",
-				title: "No application usage data found",
-				description: "Record app usage manually or connect the desktop tracker, and your apps will appear here ranked by time spent.",
-				action: /* @__PURE__ */ h("button", {
-					onClick: Z,
-					className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
-					children: [/* @__PURE__ */ m(u, { className: "h-4 w-4" }), "Add Usage"]
-				})
-			}) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
-				className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
-				children: /* @__PURE__ */ m("div", {
-					className: "divide-y divide-border",
-					children: D.map((e) => /* @__PURE__ */ h("div", {
-						className: "flex items-center justify-between gap-3 p-4 transition-colors hover:bg-bg-sunken/50",
-						children: [/* @__PURE__ */ h("div", {
-							className: "flex min-w-0 items-center gap-3",
-							children: [/* @__PURE__ */ m(l, { className: "h-5 w-5 shrink-0 text-text-secondary" }), /* @__PURE__ */ h("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ m("p", {
-									className: "truncate text-sm font-medium text-text-primary",
-									children: e.applicationName
-								}), /* @__PURE__ */ h("p", {
-									className: "text-xs text-text-secondary",
-									children: [e.sessions, " sessions"]
-								})]
+				}) : /* @__PURE__ */ _(h, { children: [
+					/* @__PURE__ */ _(ce, {
+						treatment: "glass",
+						className: "overflow-hidden",
+						children: [/* @__PURE__ */ _("div", {
+							className: "flex items-center justify-between gap-3 border-b border-border-seam px-4 py-3 sm:px-6",
+							children: [/* @__PURE__ */ g("h3", {
+								className: "text-sm font-semibold text-text-primary",
+								children: "Ranked Applications"
+							}), /* @__PURE__ */ _("span", {
+								className: "text-xs text-text-secondary",
+								children: [w.length, " tracked"]
 							})]
-						}), /* @__PURE__ */ h("div", {
-							className: "flex shrink-0 items-center gap-3 sm:gap-4",
-							children: [
-								/* @__PURE__ */ m("p", {
-									className: "text-sm font-mono font-medium text-text-primary",
-									children: t(e.timeSpent / 3600)
-								}),
-								/* @__PURE__ */ m("span", {
-									className: `hidden rounded-full px-2 py-0.5 text-xs font-medium sm:inline-flex ${ae[e.category] || "bg-bg-sunken text-text-secondary"}`,
-									children: e.category
-								}),
-								/* @__PURE__ */ m("div", {
-									className: "hidden w-16 lg:block",
-									children: /* @__PURE__ */ m("div", {
-										className: "h-2 rounded-full bg-bg-sunken",
-										children: /* @__PURE__ */ m("div", {
-											className: "h-2 rounded-full bg-action-primary-bg",
-											style: { width: `${Math.min(100, Math.round(e.timeSpent / (Q || 1) * 100))}%` }
+						}), /* @__PURE__ */ g("div", {
+							className: "divide-y divide-border",
+							children: Ie.map((e, n) => {
+								let r = Math.min(100, Math.round(e.timeSpent / (Z || 1) * 100));
+								return /* @__PURE__ */ _("div", {
+									className: "flex items-center gap-3 p-4 transition-colors hover:bg-bg-sunken/50 sm:gap-4",
+									children: [
+										/* @__PURE__ */ g("span", {
+											className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-semibold tabular-nums text-text-secondary",
+											children: n + 1
+										}),
+										/* @__PURE__ */ g("div", {
+											className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-action-primary-bg/10 text-primary",
+											children: /* @__PURE__ */ g(d, { className: "h-4 w-4" })
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "min-w-0 flex-1",
+											children: [/* @__PURE__ */ g("p", {
+												className: "truncate text-sm font-medium text-text-primary",
+												children: e.applicationName
+											}), /* @__PURE__ */ _("p", {
+												className: "text-xs text-text-secondary",
+												children: [
+													e.sessions,
+													" sessions · ",
+													e.switches,
+													" ",
+													"switches"
+												]
+											})]
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "hidden w-28 shrink-0 lg:block",
+											children: [/* @__PURE__ */ g("div", {
+												className: "h-2 rounded-full bg-bg-sunken",
+												children: /* @__PURE__ */ g("div", {
+													className: "h-2 rounded-full bg-action-primary-bg",
+													style: { width: `${r}%` }
+												})
+											}), /* @__PURE__ */ _("p", {
+												className: "mt-1 text-right text-xs tabular-nums text-text-secondary",
+												children: [r, "%"]
+											})]
+										}),
+										/* @__PURE__ */ g(ie, {
+											label: e.category,
+											variant: le[e.category] ?? "muted",
+											className: "hidden capitalize sm:inline-flex"
+										}),
+										/* @__PURE__ */ g("p", {
+											className: "shrink-0 font-mono text-sm font-medium tabular-nums text-text-primary",
+											children: t(e.timeSpent / 3600)
+										}),
+										/* @__PURE__ */ _("div", {
+											className: "flex shrink-0 items-center gap-1",
+											children: [/* @__PURE__ */ g("button", {
+												onClick: () => X(e),
+												className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-text-primary",
+												"aria-label": "Recategorize application",
+												children: /* @__PURE__ */ g(p, { className: "h-4 w-4" })
+											}), /* @__PURE__ */ g("button", {
+												onClick: () => W(e),
+												className: "rounded-md p-1.5 text-text-secondary hover:bg-status-error-bg hover:text-status-error-text",
+												"aria-label": "Delete usage entry",
+												children: /* @__PURE__ */ g(m, { className: "h-4 w-4" })
+											})]
 										})
-									})
-								}),
-								/* @__PURE__ */ m("button", {
-									onClick: () => be(e),
-									className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-text-primary",
-									"aria-label": "Recategorize application",
-									children: /* @__PURE__ */ m(d, { className: "h-4 w-4" })
-								}),
-								/* @__PURE__ */ m("button", {
-									onClick: () => K(e),
-									className: "rounded-md p-1.5 text-text-secondary hover:bg-status-error-bg hover:text-status-error-text",
-									"aria-label": "Delete usage entry",
-									children: /* @__PURE__ */ m(f, { className: "h-4 w-4" })
-								})
-							]
+									]
+								}, e.id);
+							})
 						})]
-					}, e.id))
-				})
-			}), fe && /* @__PURE__ */ m("div", {
-				className: "mt-4 flex justify-center",
-				children: /* @__PURE__ */ m("button", {
-					onClick: Ce,
-					disabled: k,
-					className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50 disabled:opacity-50",
-					children: k ? "Loading..." : "Load more"
-				})
-			})] }),
-			/* @__PURE__ */ h(s, {
-				open: j,
-				onClose: () => M(!1),
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
+						children: [/* @__PURE__ */ g(s, {
+							title: "Productivity Split",
+							description: "Where your tracked screen time goes",
+							children: /* @__PURE__ */ g(oe, {
+								data: Le,
+								centerLabel: "Total tracked",
+								centerValue: Re,
+								valueFormat: de,
+								height: 260,
+								emptyLabel: "No categorized usage yet"
+							})
+						}), /* @__PURE__ */ g(s, {
+							title: "Daily Usage Trend",
+							description: "Tracked time per day",
+							children: /* @__PURE__ */ g(ae, {
+								data: ze,
+								xKey: "day",
+								series: [{
+									key: "hours",
+									label: "Screen time"
+								}],
+								type: "area",
+								valueFormat: ue,
+								xTickFormat: fe,
+								height: 260,
+								emptyLabel: "No usage recorded yet"
+							})
+						})]
+					}),
+					E && /* @__PURE__ */ g("div", {
+						className: "mt-4 flex justify-center",
+						children: /* @__PURE__ */ g("button", {
+							onClick: Ne,
+							disabled: D,
+							className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50 disabled:opacity-50",
+							children: D ? "Loading..." : "Load more"
+						})
+					})
+				] })]
+			}),
+			/* @__PURE__ */ _(c, {
+				open: k,
+				onClose: () => A(!1),
 				title: "Record App Usage",
 				description: "Manually log time spent in an application",
-				footer: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
-					onClick: () => M(!1),
+				footer: /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("button", {
+					onClick: () => A(!1),
 					className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
 					children: "Cancel"
-				}), /* @__PURE__ */ m("button", {
-					onClick: ye,
-					disabled: q || !N.trim() || !L,
+				}), /* @__PURE__ */ g("button", {
+					onClick: Ae,
+					disabled: G || !j.trim() || !F,
 					className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
-					children: q ? "Saving..." : "Record"
+					children: G ? "Saving..." : "Record"
 				})] }),
-				children: [me && /* @__PURE__ */ m("div", {
+				children: [Te && /* @__PURE__ */ g("div", {
 					className: "mb-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text",
 					children: "Failed to record usage. Please try again."
-				}), /* @__PURE__ */ h("div", {
+				}), /* @__PURE__ */ _("div", {
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
-							className: y,
+						/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							className: S,
 							children: "Application Name"
-						}), /* @__PURE__ */ m("input", {
+						}), /* @__PURE__ */ g("input", {
 							type: "text",
 							placeholder: "e.g. Visual Studio Code",
-							value: N,
-							onChange: (e) => P(e.target.value),
-							className: v
+							value: j,
+							onChange: (e) => M(e.target.value),
+							className: x
 						})] }),
-						/* @__PURE__ */ h("div", {
+						/* @__PURE__ */ _("div", {
 							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-							children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
-								className: y,
+							children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+								className: S,
 								children: "Category"
-							}), /* @__PURE__ */ m("select", {
-								value: F,
-								onChange: (e) => I(e.target.value),
-								className: v,
-								children: _.map((e) => /* @__PURE__ */ m("option", {
+							}), /* @__PURE__ */ g("select", {
+								value: N,
+								onChange: (e) => P(e.target.value),
+								className: x,
+								children: y.map((e) => /* @__PURE__ */ g("option", {
 									value: e,
 									className: "capitalize",
 									children: e
 								}, e))
-							})] }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
-								className: y,
+							})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+								className: S,
 								children: "Time Spent (minutes)"
-							}), /* @__PURE__ */ m("input", {
+							}), /* @__PURE__ */ g("input", {
 								type: "number",
 								min: "0",
 								placeholder: "0",
-								value: L,
-								onChange: (e) => R(e.target.value),
-								className: v
+								value: F,
+								onChange: (e) => I(e.target.value),
+								className: x
 							})] })]
 						}),
-						/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
-							className: y,
+						/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							className: S,
 							children: "Sessions"
-						}), /* @__PURE__ */ m("input", {
+						}), /* @__PURE__ */ g("input", {
 							type: "number",
 							min: "0",
 							placeholder: "0",
-							value: z,
-							onChange: (e) => B(e.target.value),
-							className: v
+							value: L,
+							onChange: (e) => R(e.target.value),
+							className: x
 						})] })
 					]
 				})]
 			}),
-			/* @__PURE__ */ h(s, {
-				open: V !== null,
-				onClose: () => H(null),
+			/* @__PURE__ */ _(c, {
+				open: z !== null,
+				onClose: () => B(null),
 				title: "Recategorize Application",
-				description: V?.applicationName,
+				description: z?.applicationName,
 				size: "sm",
-				footer: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
-					onClick: () => H(null),
+				footer: /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("button", {
+					onClick: () => B(null),
 					className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
 					children: "Cancel"
-				}), /* @__PURE__ */ m("button", {
-					onClick: xe,
-					disabled: J,
+				}), /* @__PURE__ */ g("button", {
+					onClick: je,
+					disabled: K,
 					className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
-					children: J ? "Saving..." : "Save"
+					children: K ? "Saving..." : "Save"
 				})] }),
 				children: [
-					ge && /* @__PURE__ */ m("div", {
+					De && /* @__PURE__ */ g("div", {
 						className: "mb-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text",
 						children: "Failed to recategorize. Please try again."
 					}),
-					/* @__PURE__ */ m("label", {
-						className: y,
+					/* @__PURE__ */ g("label", {
+						className: S,
 						children: "Category"
 					}),
-					/* @__PURE__ */ m("select", {
-						value: U,
-						onChange: (e) => W(e.target.value),
-						className: v,
-						children: _.map((e) => /* @__PURE__ */ m("option", {
+					/* @__PURE__ */ g("select", {
+						value: V,
+						onChange: (e) => H(e.target.value),
+						className: x,
+						children: y.map((e) => /* @__PURE__ */ g("option", {
 							value: e,
 							className: "capitalize",
 							children: e
 						}, e))
 					}),
-					/* @__PURE__ */ h("p", {
+					/* @__PURE__ */ _("p", {
 						className: "mt-3 text-xs text-text-secondary",
 						children: [
 							"This updates the category for all usage of “",
-							V?.applicationName,
+							z?.applicationName,
 							"”."
 						]
 					})
 				]
 			}),
-			/* @__PURE__ */ h(s, {
-				open: G !== null,
-				onClose: () => K(null),
+			/* @__PURE__ */ _(c, {
+				open: U !== null,
+				onClose: () => W(null),
 				title: "Delete Usage Entry",
 				size: "sm",
-				footer: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("button", {
-					onClick: () => K(null),
+				footer: /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("button", {
+					onClick: () => W(null),
 					className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
 					children: "Cancel"
-				}), /* @__PURE__ */ m("button", {
-					onClick: Se,
-					disabled: Y,
+				}), /* @__PURE__ */ g("button", {
+					onClick: Me,
+					disabled: q,
 					className: "rounded-md bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg/90 disabled:opacity-50",
-					children: Y ? "Deleting..." : "Delete"
+					children: q ? "Deleting..." : "Delete"
 				})] }),
-				children: [ve && /* @__PURE__ */ m("div", {
+				children: [ke && /* @__PURE__ */ g("div", {
 					className: "mb-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text",
 					children: "Failed to delete entry. Please try again."
-				}), /* @__PURE__ */ h("p", {
+				}), /* @__PURE__ */ _("p", {
 					className: "text-sm text-text-secondary",
 					children: [
 						"Are you sure you want to delete the usage entry for",
 						" ",
-						/* @__PURE__ */ m("span", {
+						/* @__PURE__ */ g("span", {
 							className: "font-medium text-text-primary",
-							children: G?.applicationName
+							children: U?.applicationName
 						}),
 						"? This action cannot be undone."
 					]
@@ -345,6 +447,6 @@ function b() {
 	});
 }
 //#endregion
-export { b as ApplicationUsagePage };
+export { C as ApplicationUsagePage };
 
 //# sourceMappingURL=ApplicationUsagePage.js.map