@burdenoff/microfe-timecampus 2026.624.1 → 2026.626.1

package/dist/timecampus/pages/meetings/MeetingDetailPage.js

@@ -1,123 +1,141 @@
-import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
-import { formatCurrency as t } from "../../utils/helpers.js";
-import { PageLayout as n } from "../../components/PageLayout.js";
+import { useTimeCampus as e, useTimeCampusNavigate as t } from "../../providers/TimeCampusProvider.js";
+import { formatCurrency as n } from "../../utils/helpers.js";
 import { StatCard as r } from "../../components/StatCard.js";
 import { LoadingSkeleton as i } from "../../components/LoadingSkeleton.js";
 import { useGetMeetingQuery as a } from "../../../generated/wspace-operations.js";
-import { Clock as o, Users as s } from "lucide-react";
-import { useParams as c } from "react-router-dom";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { PageLayout as o } from "../../components/PageLayout.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { Clock as c, Users as l } from "lucide-react";
+import { useParams as u } from "react-router-dom";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { NextSteps as p } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/pages/meetings/MeetingDetailPage.tsx
-function d() {
-	let { id: d } = c(), { workspaceId: f = "" } = e(), { data: p, loading: m, error: h } = a({
+function m() {
+	let { id: m } = u(), { workspaceId: h = "" } = e(), g = t(), { data: _, loading: v, error: y } = a({
 		variables: {
-			id: d ?? "",
-			workspaceId: f
+			id: m ?? "",
+			workspaceId: h
 		},
-		skip: !f || !d
-	}), g = p?.meeting;
-	if (m) return /* @__PURE__ */ l(n, {
+		skip: !h || !m
+	}), b = _?.meeting;
+	if (v) return /* @__PURE__ */ d(o, {
 		title: "Meeting Details",
-		description: `Meeting ID: ${d}`,
-		children: /* @__PURE__ */ l(i, { variant: "detail" })
+		description: `Meeting ID: ${m}`,
+		children: /* @__PURE__ */ d(i, { variant: "detail" })
 	});
-	if (h || !g) return /* @__PURE__ */ l(n, {
+	if (y || !b) return /* @__PURE__ */ d(o, {
 		title: "Meeting Details",
-		description: `Meeting ID: ${d}`,
-		children: /* @__PURE__ */ l("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",
-			children: h ? "Failed to load meeting details. Please try again later." : "Meeting not found."
+		description: `Meeting ID: ${m}`,
+		children: /* @__PURE__ */ d("div", {
+			className: "rounded-lg border border-status-error-bg/40 bg-status-error-bg p-4 text-sm text-status-error-text",
+			children: y ? "Failed to load meeting details. Please try again later." : "Meeting not found."
 		})
 	});
-	let _ = g.actionItems.filter((e) => e.status !== "COMPLETED").length;
-	return /* @__PURE__ */ u(n, {
+	let x = b.actionItems.filter((e) => e.status !== "COMPLETED").length;
+	return /* @__PURE__ */ f(o, {
 		title: "Meeting Details",
-		description: g.title,
-		children: [/* @__PURE__ */ u("div", {
-			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
-			children: [
-				/* @__PURE__ */ l(r, {
-					title: "Duration",
-					value: `${g.duration ?? 0} min`,
-					icon: /* @__PURE__ */ l(o, { className: "h-5 w-5" })
-				}),
-				/* @__PURE__ */ l(r, {
-					title: "Participants",
-					value: String(g.participants.length),
-					icon: /* @__PURE__ */ l(s, { className: "h-5 w-5" })
-				}),
-				/* @__PURE__ */ l(r, {
-					title: "Cost",
-					value: g.cost == null ? "N/A" : t(g.cost),
-					description: "Based on participant rates"
-				}),
-				/* @__PURE__ */ l(r, {
-					title: "Action Items",
-					value: String(g.actionItems.length),
-					description: `${_} pending`
-				})
-			]
-		}), /* @__PURE__ */ u("div", {
-			className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
-			children: [/* @__PURE__ */ u("div", {
-				className: "rounded-xl border border-border-subtle bg-bg-surface p-6",
-				children: [/* @__PURE__ */ l("h3", {
-					className: "mb-4 text-sm font-semibold text-text-primary",
-					children: "Participants"
-				}), g.participants.length > 0 ? /* @__PURE__ */ l("div", {
-					className: "space-y-2",
-					children: g.participants.map((e) => /* @__PURE__ */ u("div", {
-						className: "flex items-center justify-between rounded-lg border border-border-subtle px-3 py-2",
-						children: [/* @__PURE__ */ l("span", {
-							className: "text-sm text-text-primary",
-							children: e.userId
-						}), /* @__PURE__ */ u("div", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ l("span", {
-								className: "text-xs text-text-secondary",
-								children: e.role
-							}), /* @__PURE__ */ l("span", {
+		description: b.title,
+		purpose: "The full record of one meeting — who attended, what it cost in people's time, and the action items it produced — so you can follow up on commitments and judge whether the meeting was worth it.",
+		children: [
+			/* @__PURE__ */ d(p, {
+				storageKey: "timecampus-meeting-detail",
+				className: "mb-6",
+				steps: [{
+					id: "all-meetings",
+					label: "Back to all meetings",
+					description: "Browse and schedule other meetings.",
+					onClick: () => g("/meetings")
+				}, {
+					id: "analytics",
+					label: "See meeting analytics",
+					description: "Understand your overall meeting load and cost.",
+					onClick: () => g("/meetings/analytics")
+				}]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ d(r, {
+						featured: !0,
+						title: "Duration",
+						value: `${b.duration ?? 0} min`,
+						icon: /* @__PURE__ */ d(c, { className: "h-5 w-5" })
+					}),
+					/* @__PURE__ */ d(r, {
+						title: "Participants",
+						value: String(b.participants.length),
+						icon: /* @__PURE__ */ d(l, { className: "h-5 w-5" })
+					}),
+					/* @__PURE__ */ d(r, {
+						title: "Cost",
+						value: b.cost == null ? "N/A" : n(b.cost),
+						description: "Based on participant rates"
+					}),
+					/* @__PURE__ */ d(r, {
+						title: "Action Items",
+						value: String(b.actionItems.length),
+						description: `${x} pending`
+					})
+				]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
+				children: [/* @__PURE__ */ f("div", {
+					className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
+					children: [/* @__PURE__ */ d("h3", {
+						className: "mb-4 text-sm font-semibold text-text-primary",
+						children: "Participants"
+					}), b.participants.length > 0 ? /* @__PURE__ */ d("div", {
+						className: "space-y-2",
+						children: b.participants.map((e) => /* @__PURE__ */ f("div", {
+							className: "flex items-center justify-between rounded-lg border border-border-subtle px-3 py-2",
+							children: [/* @__PURE__ */ d("span", {
+								className: "text-sm text-text-primary",
+								children: e.userId
+							}), /* @__PURE__ */ f("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ d("span", {
+									className: "text-xs text-text-secondary",
+									children: e.role
+								}), /* @__PURE__ */ d("span", {
+									className: "inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
+									children: e.status
+								})]
+							})]
+						}, e.id))
+					}) : /* @__PURE__ */ d(s, {
+						illustration: "empty-people",
+						title: "No participants added",
+						description: "Add attendees to capture who was in the room and what it cost."
+					})]
+				}), /* @__PURE__ */ f("div", {
+					className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
+					children: [/* @__PURE__ */ d("h3", {
+						className: "mb-4 text-sm font-semibold text-text-primary",
+						children: "Action Items"
+					}), b.actionItems.length > 0 ? /* @__PURE__ */ d("div", {
+						className: "space-y-2",
+						children: b.actionItems.map((e) => /* @__PURE__ */ f("div", {
+							className: "flex items-center justify-between rounded-lg border border-border-subtle px-3 py-2",
+							children: [/* @__PURE__ */ d("span", {
+								className: "text-sm text-text-primary",
+								children: e.title
+							}), /* @__PURE__ */ d("span", {
 								className: "inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
 								children: e.status
 							})]
-						})]
-					}, e.id))
-				}) : /* @__PURE__ */ l("div", {
-					className: "flex h-32 items-center justify-center rounded-lg border border-dashed border-border-subtle",
-					children: /* @__PURE__ */ l("p", {
-						className: "text-sm text-text-secondary",
-						children: "No participants added"
-					})
-				})]
-			}), /* @__PURE__ */ u("div", {
-				className: "rounded-xl border border-border-subtle bg-bg-surface p-6",
-				children: [/* @__PURE__ */ l("h3", {
-					className: "mb-4 text-sm font-semibold text-text-primary",
-					children: "Action Items"
-				}), g.actionItems.length > 0 ? /* @__PURE__ */ l("div", {
-					className: "space-y-2",
-					children: g.actionItems.map((e) => /* @__PURE__ */ u("div", {
-						className: "flex items-center justify-between rounded-lg border border-border-subtle px-3 py-2",
-						children: [/* @__PURE__ */ l("span", {
-							className: "text-sm text-text-primary",
-							children: e.title
-						}), /* @__PURE__ */ l("span", {
-							className: "inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
-							children: e.status
-						})]
-					}, e.id))
-				}) : /* @__PURE__ */ l("div", {
-					className: "flex h-32 items-center justify-center rounded-lg border border-dashed border-border-subtle",
-					children: /* @__PURE__ */ l("p", {
-						className: "text-sm text-text-secondary",
-						children: "No action items"
-					})
+						}, e.id))
+					}) : /* @__PURE__ */ d(s, {
+						illustration: "empty-generic",
+						title: "No action items",
+						description: "Capture follow-ups here so commitments from the meeting don't get lost."
+					})]
 				})]
-			})]
-		})]
+			})
+		]
 	});
 }
 //#endregion
-export { d as MeetingDetailPage };
+export { m as MeetingDetailPage };
 
 //# sourceMappingURL=MeetingDetailPage.js.map

package/dist/timecampus/pages/meetings/MeetingDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeetingDetailPage.js","names":[],"sources":["../../../../src/timecampus/pages/meetings/MeetingDetailPage.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\";\nimport { CalendarDays, Users, Clock, Video } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useGetMeetingQuery,\n  type MeetingParticipantFieldsFragment,\n  type MeetingActionItemFieldsFragment,\n} from \"@/generated/wspace-operations\";\nimport { formatCurrency } from \"../../utils/helpers\";\n\nexport function MeetingDetailPage() {\n  const { id } = useParams<{ id: string }>();\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const { data, loading, error } = useGetMeetingQuery({\n    variables: { id: id ?? \"\", workspaceId },\n    skip: !workspaceId || !id,\n  });\n\n  const meeting = data?.meeting;\n\n  if (loading) {\n    return (\n      <PageLayout title=\"Meeting Details\" description={`Meeting ID: ${id}`}>\n        <LoadingSkeleton variant=\"detail\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !meeting) {\n    return (\n      <PageLayout title=\"Meeting Details\" description={`Meeting ID: ${id}`}>\n        <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\">\n          {error\n            ? \"Failed to load meeting details. Please try again later.\"\n            : \"Meeting not found.\"}\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const pendingActions = meeting.actionItems.filter(\n    (a: MeetingActionItemFieldsFragment) => a.status !== \"COMPLETED\",\n  ).length;\n\n  return (\n    <PageLayout title=\"Meeting Details\" description={meeting.title}>\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          title=\"Duration\"\n          value={`${meeting.duration ?? 0} min`}\n          icon={<Clock className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Participants\"\n          value={String(meeting.participants.length)}\n          icon={<Users className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Cost\"\n          value={meeting.cost != null ? formatCurrency(meeting.cost) : \"N/A\"}\n          description=\"Based on participant rates\"\n        />\n        <StatCard\n          title=\"Action Items\"\n          value={String(meeting.actionItems.length)}\n          description={`${pendingActions} pending`}\n        />\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n        <div className=\"rounded-xl border border-border-subtle bg-bg-surface p-6\">\n          <h3 className=\"mb-4 text-sm font-semibold text-text-primary\">\n            Participants\n          </h3>\n          {meeting.participants.length > 0 ? (\n            <div className=\"space-y-2\">\n              {meeting.participants.map(\n                (p: MeetingParticipantFieldsFragment) => (\n                  <div\n                    key={p.id}\n                    className=\"flex items-center justify-between rounded-lg border border-border-subtle px-3 py-2\"\n                  >\n                    <span className=\"text-sm text-text-primary\">{p.userId}</span>\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-xs text-text-secondary\">\n                        {p.role}\n                      </span>\n                      <span className=\"inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n                        {p.status}\n                      </span>\n                    </div>\n                  </div>\n                ),\n              )}\n            </div>\n          ) : (\n            <div className=\"flex h-32 items-center justify-center rounded-lg border border-dashed border-border-subtle\">\n              <p className=\"text-sm text-text-secondary\">\n                No participants added\n              </p>\n            </div>\n          )}\n        </div>\n        <div className=\"rounded-xl border border-border-subtle bg-bg-surface p-6\">\n          <h3 className=\"mb-4 text-sm font-semibold text-text-primary\">\n            Action Items\n          </h3>\n          {meeting.actionItems.length > 0 ? (\n            <div className=\"space-y-2\">\n              {meeting.actionItems.map(\n                (item: MeetingActionItemFieldsFragment) => (\n                  <div\n                    key={item.id}\n                    className=\"flex items-center justify-between rounded-lg border border-border-subtle px-3 py-2\"\n                  >\n                    <span className=\"text-sm text-text-primary\">\n                      {item.title}\n                    </span>\n                    <span className=\"inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n                      {item.status}\n                    </span>\n                  </div>\n                ),\n              )}\n            </div>\n          ) : (\n            <div className=\"flex h-32 items-center justify-center rounded-lg border border-dashed border-border-subtle\">\n              <p className=\"text-sm text-text-secondary\">No action items</p>\n            </div>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;AAaA,SAAgB,IAAoB;CAClC,IAAM,EAAE,UAAO,GAA2B,EACpC,EAAE,iBAAc,OAAO,GAAe,EAEtC,EAAE,SAAM,YAAS,aAAU,EAAmB;EAClD,WAAW;GAAE,IAAI,KAAM;GAAI;GAAa;EACxC,MAAM,CAAC,KAAe,CAAC;EACxB,CAAC,EAEI,IAAU,GAAM;AAEtB,KAAI,EACF,QACE,kBAAC,GAAD;EAAY,OAAM;EAAkB,aAAa,eAAe;YAC9D,kBAAC,GAAD,EAAiB,SAAQ,UAAW,CAAA;EACzB,CAAA;AAIjB,KAAI,KAAS,CAAC,EACZ,QACE,kBAAC,GAAD;EAAY,OAAM;EAAkB,aAAa,eAAe;YAC9D,kBAAC,OAAD;GAAK,WAAU;aACZ,IACG,4DACA;GACA,CAAA;EACK,CAAA;CAIjB,IAAM,IAAiB,EAAQ,YAAY,QACxC,MAAuC,EAAE,WAAW,YACtD,CAAC;AAEF,QACE,kBAAC,GAAD;EAAY,OAAM;EAAkB,aAAa,EAAQ;YAAzD,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,GAAG,EAAQ,YAAY,EAAE;KAChC,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;KACnC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,EAAQ,aAAa,OAAO;KAC1C,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;KACnC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,EAAQ,QAAQ,OAAsC,QAA/B,EAAe,EAAQ,KAAK;KAC1D,aAAY;KACZ,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,EAAQ,YAAY,OAAO;KACzC,aAAa,GAAG,EAAe;KAC/B,CAAA;IACE;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA+C;KAExD,CAAA,EACJ,EAAQ,aAAa,SAAS,IAC7B,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAQ,aAAa,KACnB,MACC,kBAAC,OAAD;MAEE,WAAU;gBAFZ,CAIE,kBAAC,QAAD;OAAM,WAAU;iBAA6B,EAAE;OAAc,CAAA,EAC7D,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAE;QACE,CAAA,EACP,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAE;QACE,CAAA,CACH;SACF;QAZC,EAAE,GAYH,CAET;KACG,CAAA,GAEN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBAA8B;MAEvC,CAAA;KACA,CAAA,CAEJ;OACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA+C;KAExD,CAAA,EACJ,EAAQ,YAAY,SAAS,IAC5B,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAQ,YAAY,KAClB,MACC,kBAAC,OAAD;MAEE,WAAU;gBAFZ,CAIE,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAK;OACD,CAAA,EACP,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAK;OACD,CAAA,CACH;QATC,EAAK,GASN,CAET;KACG,CAAA,GAEN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBAA8B;MAAmB,CAAA;KAC1D,CAAA,CAEJ;MACF;KACK"}
+{"version":3,"file":"MeetingDetailPage.js","names":[],"sources":["../../../../src/timecampus/pages/meetings/MeetingDetailPage.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\";\nimport { Users, Clock } from \"lucide-react\";\nimport { NextSteps } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { EmptyState } from \"../../components/EmptyState\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport {\n  useTimeCampus,\n  useTimeCampusNavigate,\n} from \"../../providers/TimeCampusProvider\";\nimport {\n  useGetMeetingQuery,\n  type MeetingParticipantFieldsFragment,\n  type MeetingActionItemFieldsFragment,\n} from \"@/generated/wspace-operations\";\nimport { formatCurrency } from \"../../utils/helpers\";\n\nexport function MeetingDetailPage() {\n  const { id } = useParams<{ id: string }>();\n  const { workspaceId = \"\" } = useTimeCampus();\n  const navigate = useTimeCampusNavigate();\n\n  const { data, loading, error } = useGetMeetingQuery({\n    variables: { id: id ?? \"\", workspaceId },\n    skip: !workspaceId || !id,\n  });\n\n  const meeting = data?.meeting;\n\n  if (loading) {\n    return (\n      <PageLayout title=\"Meeting Details\" description={`Meeting ID: ${id}`}>\n        <LoadingSkeleton variant=\"detail\" />\n      </PageLayout>\n    );\n  }\n\n  if (error || !meeting) {\n    return (\n      <PageLayout title=\"Meeting Details\" description={`Meeting ID: ${id}`}>\n        <div className=\"rounded-lg border border-status-error-bg/40 bg-status-error-bg p-4 text-sm text-status-error-text\">\n          {error\n            ? \"Failed to load meeting details. Please try again later.\"\n            : \"Meeting not found.\"}\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const pendingActions = meeting.actionItems.filter(\n    (a: MeetingActionItemFieldsFragment) => a.status !== \"COMPLETED\",\n  ).length;\n\n  return (\n    <PageLayout\n      title=\"Meeting Details\"\n      description={meeting.title}\n      purpose=\"The full record of one meeting — who attended, what it cost in people's time, and the action items it produced — so you can follow up on commitments and judge whether the meeting was worth it.\"\n    >\n      <NextSteps\n        storageKey=\"timecampus-meeting-detail\"\n        className=\"mb-6\"\n        steps={[\n          {\n            id: \"all-meetings\",\n            label: \"Back to all meetings\",\n            description: \"Browse and schedule other meetings.\",\n            onClick: () => navigate(\"/meetings\"),\n          },\n          {\n            id: \"analytics\",\n            label: \"See meeting analytics\",\n            description: \"Understand your overall meeting load and cost.\",\n            onClick: () => navigate(\"/meetings/analytics\"),\n          },\n        ]}\n      />\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          featured\n          title=\"Duration\"\n          value={`${meeting.duration ?? 0} min`}\n          icon={<Clock className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Participants\"\n          value={String(meeting.participants.length)}\n          icon={<Users className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Cost\"\n          value={meeting.cost != null ? formatCurrency(meeting.cost) : \"N/A\"}\n          description=\"Based on participant rates\"\n        />\n        <StatCard\n          title=\"Action Items\"\n          value={String(meeting.actionItems.length)}\n          description={`${pendingActions} pending`}\n        />\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n        <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6\">\n          <h3 className=\"mb-4 text-sm font-semibold text-text-primary\">\n            Participants\n          </h3>\n          {meeting.participants.length > 0 ? (\n            <div className=\"space-y-2\">\n              {meeting.participants.map(\n                (p: MeetingParticipantFieldsFragment) => (\n                  <div\n                    key={p.id}\n                    className=\"flex items-center justify-between rounded-lg border border-border-subtle px-3 py-2\"\n                  >\n                    <span className=\"text-sm text-text-primary\">\n                      {p.userId}\n                    </span>\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-xs text-text-secondary\">\n                        {p.role}\n                      </span>\n                      <span className=\"inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n                        {p.status}\n                      </span>\n                    </div>\n                  </div>\n                ),\n              )}\n            </div>\n          ) : (\n            <EmptyState\n              illustration=\"empty-people\"\n              title=\"No participants added\"\n              description=\"Add attendees to capture who was in the room and what it cost.\"\n            />\n          )}\n        </div>\n        <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6\">\n          <h3 className=\"mb-4 text-sm font-semibold text-text-primary\">\n            Action Items\n          </h3>\n          {meeting.actionItems.length > 0 ? (\n            <div className=\"space-y-2\">\n              {meeting.actionItems.map(\n                (item: MeetingActionItemFieldsFragment) => (\n                  <div\n                    key={item.id}\n                    className=\"flex items-center justify-between rounded-lg border border-border-subtle px-3 py-2\"\n                  >\n                    <span className=\"text-sm text-text-primary\">\n                      {item.title}\n                    </span>\n                    <span className=\"inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n                      {item.status}\n                    </span>\n                  </div>\n                ),\n              )}\n            </div>\n          ) : (\n            <EmptyState\n              illustration=\"empty-generic\"\n              title=\"No action items\"\n              description=\"Capture follow-ups here so commitments from the meeting don't get lost.\"\n            />\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,SAAgB,IAAoB;CAClC,IAAM,EAAE,UAAO,GAA2B,EACpC,EAAE,iBAAc,OAAO,GAAe,EACtC,IAAW,GAAuB,EAElC,EAAE,SAAM,YAAS,aAAU,EAAmB;EAClD,WAAW;GAAE,IAAI,KAAM;GAAI;GAAa;EACxC,MAAM,CAAC,KAAe,CAAC;EACxB,CAAC,EAEI,IAAU,GAAM;AAEtB,KAAI,EACF,QACE,kBAAC,GAAD;EAAY,OAAM;EAAkB,aAAa,eAAe;YAC9D,kBAAC,GAAD,EAAiB,SAAQ,UAAW,CAAA;EACzB,CAAA;AAIjB,KAAI,KAAS,CAAC,EACZ,QACE,kBAAC,GAAD;EAAY,OAAM;EAAkB,aAAa,eAAe;YAC9D,kBAAC,OAAD;GAAK,WAAU;aACZ,IACG,4DACA;GACA,CAAA;EACK,CAAA;CAIjB,IAAM,IAAiB,EAAQ,YAAY,QACxC,MAAuC,EAAE,WAAW,YACtD,CAAC;AAEF,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,EAAQ;EACrB,SAAQ;YAHV;GAKE,kBAAC,GAAD;IACE,YAAW;IACX,WAAU;IACV,OAAO,CACL;KACE,IAAI;KACJ,OAAO;KACP,aAAa;KACb,eAAe,EAAS,YAAY;KACrC,EACD;KACE,IAAI;KACJ,OAAO;KACP,aAAa;KACb,eAAe,EAAS,sBAAsB;KAC/C,CACF;IACD,CAAA;GACF,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MACE,UAAA;MACA,OAAM;MACN,OAAO,GAAG,EAAQ,YAAY,EAAE;MAChC,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;MACnC,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,OAAO,EAAQ,aAAa,OAAO;MAC1C,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;MACnC,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,EAAQ,QAAQ,OAAsC,QAA/B,EAAe,EAAQ,KAAK;MAC1D,aAAY;MACZ,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,OAAO,EAAQ,YAAY,OAAO;MACzC,aAAa,GAAG,EAAe;MAC/B,CAAA;KACE;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA+C;MAExD,CAAA,EACJ,EAAQ,aAAa,SAAS,IAC7B,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAQ,aAAa,KACnB,MACC,kBAAC,OAAD;OAEE,WAAU;iBAFZ,CAIE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAE;QACE,CAAA,EACP,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAE;SACE,CAAA,EACP,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAE;SACE,CAAA,CACH;UACF;SAdC,EAAE,GAcH,CAET;MACG,CAAA,GAEN,kBAAC,GAAD;MACE,cAAa;MACb,OAAM;MACN,aAAY;MACZ,CAAA,CAEA;QACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA+C;MAExD,CAAA,EACJ,EAAQ,YAAY,SAAS,IAC5B,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAQ,YAAY,KAClB,MACC,kBAAC,OAAD;OAEE,WAAU;iBAFZ,CAIE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAK;QACD,CAAA,EACP,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAK;QACD,CAAA,CACH;SATC,EAAK,GASN,CAET;MACG,CAAA,GAEN,kBAAC,GAAD;MACE,cAAa;MACb,OAAM;MACN,aAAY;MACZ,CAAA,CAEA;OACF;;GACK"}

package/dist/timecampus/pages/meetings/MeetingsPage.js

@@ -1,62 +1,72 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
 import { formatDate as t } from "../../utils/helpers.js";
-import { PageLayout as n } from "../../components/PageLayout.js";
-import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
-import { useListMeetingsQuery as i } from "../../../generated/wspace-operations.js";
-import { CalendarDays as a, Plus as o, Video as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { LoadingSkeleton as n } from "../../components/LoadingSkeleton.js";
+import { useListMeetingsQuery as r } from "../../../generated/wspace-operations.js";
+import { PageLayout as i } from "../../components/PageLayout.js";
+import { EmptyState as a } from "../../components/EmptyState.js";
+import { CalendarDays as o, Plus as s, Video as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { GlassCard as d } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/pages/meetings/MeetingsPage.tsx
-function u() {
-	let { workspaceId: u = "" } = e(), { data: d, loading: f, error: p } = i({
+function f() {
+	let { workspaceId: f = "" } = e(), { data: p, loading: m, error: h } = r({
 		variables: {
-			workspaceId: u,
+			workspaceId: f,
 			limit: 20
 		},
-		skip: !u
-	}), m = d?.meetings ?? [];
-	return f ? /* @__PURE__ */ c(n, {
+		skip: !f
+	}), g = p?.meetings ?? [];
+	return m ? /* @__PURE__ */ l(i, {
 		title: "Meetings",
 		description: "Schedule and track meetings",
-		actions: /* @__PURE__ */ l("button", {
+		actions: /* @__PURE__ */ u("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",
-			children: [/* @__PURE__ */ c(o, { className: "h-4 w-4" }), "Schedule Meeting"]
+			children: [/* @__PURE__ */ l(s, { className: "h-4 w-4" }), "Schedule Meeting"]
 		}),
-		children: /* @__PURE__ */ c(r, {
+		children: /* @__PURE__ */ l(n, {
 			variant: "list",
 			count: 5
 		})
-	}) : p ? /* @__PURE__ */ c(n, {
+	}) : h ? /* @__PURE__ */ l(i, {
 		title: "Meetings",
 		description: "Schedule and track meetings",
-		children: /* @__PURE__ */ c("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",
+		children: /* @__PURE__ */ l("div", {
+			className: "rounded-lg border border-status-error-bg/40 bg-status-error-bg p-4 text-sm text-status-error-text",
 			children: "Failed to load meetings. Please try again later."
 		})
-	}) : /* @__PURE__ */ c(n, {
+	}) : /* @__PURE__ */ l(i, {
 		title: "Meetings",
 		description: "Schedule and track meetings",
-		actions: /* @__PURE__ */ l("button", {
+		purpose: "Keep every meeting and its recording in one place and see how much of your week goes to them — so you can protect focus time, trim low-value calls, and account for meeting hours in your tracking.",
+		actions: /* @__PURE__ */ u("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",
-			children: [/* @__PURE__ */ c(o, { className: "h-4 w-4" }), "Schedule Meeting"]
+			children: [/* @__PURE__ */ l(s, { className: "h-4 w-4" }), "Schedule Meeting"]
 		}),
-		children: /* @__PURE__ */ c("div", {
-			className: "rounded-xl border border-border-subtle bg-bg-surface",
-			children: /* @__PURE__ */ c("div", {
+		children: g.length === 0 ? /* @__PURE__ */ l(a, {
+			illustration: "empty-data",
+			title: "No meetings found",
+			description: "Schedule your first meeting to start tracking calls and their time impact.",
+			action: /* @__PURE__ */ u("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",
+				children: [/* @__PURE__ */ l(s, { className: "h-4 w-4" }), "Schedule Meeting"]
+			})
+		}) : /* @__PURE__ */ l(d, {
+			treatment: "glass",
+			glow: !0,
+			className: "overflow-hidden",
+			children: /* @__PURE__ */ l("div", {
 				className: "divide-y divide-border",
-				children: m.length === 0 ? /* @__PURE__ */ c("div", {
-					className: "p-8 text-center text-sm text-text-secondary",
-					children: "No meetings found."
-				}) : m.map((e) => /* @__PURE__ */ l("div", {
+				children: g.map((e) => /* @__PURE__ */ u("div", {
 					className: "flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors cursor-pointer",
-					children: [/* @__PURE__ */ l("div", {
+					children: [/* @__PURE__ */ u("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ c(a, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ l("div", {
+						children: [/* @__PURE__ */ l(o, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ u("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ c("p", {
+							children: [/* @__PURE__ */ l("p", {
 								className: "text-sm font-medium text-text-primary",
 								children: e.title
-							}), e.recordingUrl && /* @__PURE__ */ c(s, { className: "h-3.5 w-3.5 text-text-secondary" })]
-						}), /* @__PURE__ */ l("p", {
+							}), e.recordingUrl && /* @__PURE__ */ l(c, { className: "h-3.5 w-3.5 text-text-secondary" })]
+						}), /* @__PURE__ */ u("p", {
 							className: "text-xs text-text-secondary",
 							children: [
 								t(e.startTime),
@@ -69,12 +79,12 @@ function u() {
 								" participants"
 							]
 						})] })]
-					}), /* @__PURE__ */ l("div", {
+					}), /* @__PURE__ */ u("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ c("span", {
+						children: [/* @__PURE__ */ l("span", {
 							className: "inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
 							children: e.meetingType
-						}), /* @__PURE__ */ c("span", {
+						}), /* @__PURE__ */ l("span", {
 							className: "inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
 							children: e.endTime ? "completed" : "scheduled"
 						})]
@@ -85,6 +95,6 @@ function u() {
 	});
 }
 //#endregion
-export { u as MeetingsPage };
+export { f as MeetingsPage };
 
 //# sourceMappingURL=MeetingsPage.js.map

package/dist/timecampus/pages/meetings/MeetingsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeetingsPage.js","names":[],"sources":["../../../../src/timecampus/pages/meetings/MeetingsPage.tsx"],"sourcesContent":["import { CalendarDays, Plus, Video } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { formatDate } from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListMeetingsQuery,\n  type MeetingFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function MeetingsPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const { data, loading, error } = useListMeetingsQuery({\n    variables: { workspaceId, limit: 20 },\n    skip: !workspaceId,\n  });\n\n  const meetings = data?.meetings ?? [];\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"Meetings\"\n        description=\"Schedule and track meetings\"\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            Schedule Meeting\n          </button>\n        }\n      >\n        <LoadingSkeleton variant=\"list\" count={5} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout title=\"Meetings\" description=\"Schedule and track meetings\">\n        <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\">\n          Failed to load meetings. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Meetings\"\n      description=\"Schedule and track meetings\"\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          Schedule Meeting\n        </button>\n      }\n    >\n      <div className=\"rounded-xl border border-border-subtle bg-bg-surface\">\n        <div className=\"divide-y divide-border\">\n          {meetings.length === 0 ? (\n            <div className=\"p-8 text-center text-sm text-text-secondary\">\n              No meetings found.\n            </div>\n          ) : (\n            meetings.map((meeting: MeetingFieldsFragment) => (\n              <div\n                key={meeting.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                  <CalendarDays className=\"h-5 w-5 text-text-secondary\" />\n                  <div>\n                    <div className=\"flex items-center gap-2\">\n                      <p className=\"text-sm font-medium text-text-primary\">\n                        {meeting.title}\n                      </p>\n                      {meeting.recordingUrl && (\n                        <Video className=\"h-3.5 w-3.5 text-text-secondary\" />\n                      )}\n                    </div>\n                    <p className=\"text-xs text-text-secondary\">\n                      {formatDate(meeting.startTime)} &middot;{\" \"}\n                      {meeting.duration ?? 0}min &middot;{\" \"}\n                      {meeting.participants.length} participants\n                    </p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n                    {meeting.meetingType}\n                  </span>\n                  <span className=\"inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n                    {meeting.endTime ? \"completed\" : \"scheduled\"}\n                  </span>\n                </div>\n              </div>\n            ))\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,IAAe;CAC7B,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EAAE,SAAM,YAAS,aAAU,EAAqB;EACpD,WAAW;GAAE;GAAa,OAAO;GAAI;EACrC,MAAM,CAAC;EACR,CAAC,EAEI,IAAW,GAAM,YAAY,EAAE;AA6BrC,QA3BI,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,mBAErB;;YAGX,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA;EACjC,CAAA,GAIb,IAEA,kBAAC,GAAD;EAAY,OAAM;EAAW,aAAY;YACvC,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,mBAErB;;YAGX,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAS,WAAW,IACnB,kBAAC,OAAD;KAAK,WAAU;eAA8C;KAEvD,CAAA,GAEN,EAAS,KAAK,MACZ,kBAAC,OAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,+BAAgC,CAAA,EACxD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,EACH,EAAQ,gBACP,kBAAC,GAAD,EAAO,WAAU,mCAAoC,CAAA,CAEnD;UACN,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,EAAW,EAAQ,UAAU;QAAC;QAAU;QACxC,EAAQ,YAAY;QAAE;QAAa;QACnC,EAAQ,aAAa;QAAO;QAC3B;SACA,EAAA,CAAA,CACF;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAQ;OACJ,CAAA,EACP,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAQ,UAAU,cAAc;OAC5B,CAAA,CACH;QACF;OA7BC,EAAQ,GA6BT,CACN;IAEA,CAAA;GACF,CAAA;EACK,CAAA"}
+{"version":3,"file":"MeetingsPage.js","names":[],"sources":["../../../../src/timecampus/pages/meetings/MeetingsPage.tsx"],"sourcesContent":["import { CalendarDays, Plus, Video } from \"lucide-react\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { EmptyState } from \"../../components/EmptyState\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { formatDate } from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListMeetingsQuery,\n  type MeetingFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function MeetingsPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const { data, loading, error } = useListMeetingsQuery({\n    variables: { workspaceId, limit: 20 },\n    skip: !workspaceId,\n  });\n\n  const meetings = data?.meetings ?? [];\n\n  if (loading) {\n    return (\n      <PageLayout\n        title=\"Meetings\"\n        description=\"Schedule and track meetings\"\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            Schedule Meeting\n          </button>\n        }\n      >\n        <LoadingSkeleton variant=\"list\" count={5} />\n      </PageLayout>\n    );\n  }\n\n  if (error) {\n    return (\n      <PageLayout title=\"Meetings\" description=\"Schedule and track meetings\">\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 meetings. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Meetings\"\n      description=\"Schedule and track meetings\"\n      purpose=\"Keep every meeting and its recording in one place and see how much of your week goes to them — so you can protect focus time, trim low-value calls, and account for meeting hours in your tracking.\"\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          Schedule Meeting\n        </button>\n      }\n    >\n      {meetings.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          title=\"No meetings found\"\n          description=\"Schedule your first meeting to start tracking calls and their time impact.\"\n          action={\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              Schedule Meeting\n            </button>\n          }\n        />\n      ) : (\n        <GlassCard treatment=\"glass\" glow className=\"overflow-hidden\">\n          <div className=\"divide-y divide-border\">\n            {meetings.map((meeting: MeetingFieldsFragment) => (\n              <div\n                key={meeting.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                  <CalendarDays className=\"h-5 w-5 text-text-secondary\" />\n                  <div>\n                    <div className=\"flex items-center gap-2\">\n                      <p className=\"text-sm font-medium text-text-primary\">\n                        {meeting.title}\n                      </p>\n                      {meeting.recordingUrl && (\n                        <Video className=\"h-3.5 w-3.5 text-text-secondary\" />\n                      )}\n                    </div>\n                    <p className=\"text-xs text-text-secondary\">\n                      {formatDate(meeting.startTime)} &middot;{\" \"}\n                      {meeting.duration ?? 0}min &middot;{\" \"}\n                      {meeting.participants.length} participants\n                    </p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n                    {meeting.meetingType}\n                  </span>\n                  <span className=\"inline-flex rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n                    {meeting.endTime ? \"completed\" : \"scheduled\"}\n                  </span>\n                </div>\n              </div>\n            ))}\n          </div>\n        </GlassCard>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;AAYA,SAAgB,IAAe;CAC7B,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EAAE,SAAM,YAAS,aAAU,EAAqB;EACpD,WAAW;GAAE;GAAa,OAAO;GAAI;EACrC,MAAM,CAAC;EACR,CAAC,EAEI,IAAW,GAAM,YAAY,EAAE;AA6BrC,QA3BI,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,mBAErB;;YAGX,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA;EACjC,CAAA,GAIb,IAEA,kBAAC,GAAD;EAAY,OAAM;EAAW,aAAY;YACvC,kBAAC,OAAD;GAAK,WAAU;aAAoG;GAE7G,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SAAQ;EACR,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,mBAErB;;YAGV,EAAS,WAAW,IACnB,kBAAC,GAAD;GACE,cAAa;GACb,OAAM;GACN,aAAY;GACZ,QACE,kBAAC,UAAD;IAAQ,WAAU;cAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,mBAErB;;GAEX,CAAA,GAEF,kBAAC,GAAD;GAAW,WAAU;GAAQ,MAAA;GAAK,WAAU;aAC1C,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAS,KAAK,MACb,kBAAC,OAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,+BAAgC,CAAA,EACxD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,EACH,EAAQ,gBACP,kBAAC,GAAD,EAAO,WAAU,mCAAoC,CAAA,CAEnD;UACN,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,EAAW,EAAQ,UAAU;QAAC;QAAU;QACxC,EAAQ,YAAY;QAAE;QAAa;QACnC,EAAQ,aAAa;QAAO;QAC3B;SACA,EAAA,CAAA,CACF;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAQ;OACJ,CAAA,EACP,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAQ,UAAU,cAAc;OAC5B,CAAA,CACH;QACF;OA7BC,EAAQ,GA6BT,CACN;IACE,CAAA;GACI,CAAA;EAEH,CAAA"}

package/dist/timecampus/pages/pomodoro/PomodoroAnalyticsPage.js

@@ -1,46 +1,48 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
-import { PageLayout as t } from "../../components/PageLayout.js";
-import { StatCard as n } from "../../components/StatCard.js";
-import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
-import { useGetPomodoroStatsQuery as i, useListPomodoroSessionsQuery as a } from "../../../generated/wspace-operations.js";
+import { StatCard as t } from "../../components/StatCard.js";
+import { LoadingSkeleton as n } from "../../components/LoadingSkeleton.js";
+import { useGetPomodoroStatsQuery as r, useListPomodoroSessionsQuery as i } from "../../../generated/wspace-operations.js";
+import { PageLayout as a } from "../../components/PageLayout.js";
 import { BarChart3 as o, Target as s } from "lucide-react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/timecampus/pages/pomodoro/PomodoroAnalyticsPage.tsx
 function u() {
-	let { workspaceId: u = "" } = e(), { data: d, loading: f, error: p } = i({
+	let { workspaceId: u = "" } = e(), { data: d, loading: f, error: p } = r({
 		variables: { workspaceId: u },
 		skip: !u
-	}), { data: m, loading: h } = a({
+	}), { data: m, loading: h } = i({
 		variables: {
 			workspaceId: u,
 			limit: 50
 		},
 		skip: !u
 	}), g = d?.pomodoroStats, _ = m?.pomodoroSessions ?? [];
-	if (f || h) return /* @__PURE__ */ c(t, {
+	if (f || h) return /* @__PURE__ */ c(a, {
 		title: "Pomodoro Analytics",
 		description: "Track your focus sessions and productivity",
-		children: /* @__PURE__ */ c(r, {
+		children: /* @__PURE__ */ c(n, {
 			variant: "card",
 			count: 4
 		})
 	});
-	if (p) return /* @__PURE__ */ c(t, {
+	if (p) return /* @__PURE__ */ c(a, {
 		title: "Pomodoro Analytics",
 		description: "Track your focus sessions and productivity",
 		children: /* @__PURE__ */ c("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 pomodoro analytics. Please try again later."
 		})
 	});
 	let v = Math.floor((g?.totalFocusMinutes ?? 0) / 60), y = (g?.totalFocusMinutes ?? 0) % 60, b = g?.totalSessions ? (g.totalSessions / 30).toFixed(1) : "0", x = _.filter((e) => e.completed).length;
-	return /* @__PURE__ */ l(t, {
+	return /* @__PURE__ */ l(a, {
 		title: "Pomodoro Analytics",
 		description: "Track your focus sessions and productivity",
+		purpose: "See whether your focus habit is sticking — completion rate, streaks and focus minutes over time — so you can tell good-focus days from distracted ones and keep your momentum going.",
 		children: [/* @__PURE__ */ l("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 			children: [
-				/* @__PURE__ */ c(n, {
+				/* @__PURE__ */ c(t, {
+					featured: !0,
 					title: "Total Sessions",
 					value: String(g?.totalSessions ?? 0),
 					trend: {
@@ -48,7 +50,7 @@ function u() {
 						label: "completion rate"
 					}
 				}),
-				/* @__PURE__ */ c(n, {
+				/* @__PURE__ */ c(t, {
 					title: "Total Focus Time",
 					value: `${v}h ${y}m`,
 					trend: {
@@ -56,12 +58,12 @@ function u() {
 						label: "avg min/session"
 					}
 				}),
-				/* @__PURE__ */ c(n, {
+				/* @__PURE__ */ c(t, {
 					title: "Avg. Sessions/Day",
 					value: b,
 					description: `Target: ${g?.totalSessions ?? 0} total`
 				}),
-				/* @__PURE__ */ c(n, {
+				/* @__PURE__ */ c(t, {
 					title: "Completion Rate",
 					value: `${g?.completionRate ?? 0}%`,
 					icon: /* @__PURE__ */ c(s, { className: "h-5 w-5" }),
@@ -74,7 +76,7 @@ function u() {
 		}), /* @__PURE__ */ l("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
 			children: [/* @__PURE__ */ l("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__ */ l("div", {
 					className: "mb-4 flex items-center gap-2",
 					children: [/* @__PURE__ */ c(o, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ c("h3", {
@@ -89,7 +91,7 @@ function u() {
 					})
 				})]
 			}), /* @__PURE__ */ l("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__ */ l("div", {
 					className: "mb-4 flex items-center gap-2",
 					children: [/* @__PURE__ */ c(o, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ c("h3", {

package/dist/timecampus/pages/pomodoro/PomodoroAnalyticsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PomodoroAnalyticsPage.js","names":[],"sources":["../../../../src/timecampus/pages/pomodoro/PomodoroAnalyticsPage.tsx"],"sourcesContent":["import { BarChart3, Target } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useGetPomodoroStatsQuery,\n  useListPomodoroSessionsQuery,\n  type PomodoroSessionFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function PomodoroAnalyticsPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const {\n    data: statsData,\n    loading: statsLoading,\n    error: statsError,\n  } = useGetPomodoroStatsQuery({\n    variables: { workspaceId },\n    skip: !workspaceId,\n  });\n\n  const { data: sessionsData, loading: sessionsLoading } =\n    useListPomodoroSessionsQuery({\n      variables: { workspaceId, limit: 50 },\n      skip: !workspaceId,\n    });\n\n  const stats = statsData?.pomodoroStats;\n  const sessions = sessionsData?.pomodoroSessions ?? [];\n\n  if (statsLoading || sessionsLoading) {\n    return (\n      <PageLayout\n        title=\"Pomodoro Analytics\"\n        description=\"Track your focus sessions and productivity\"\n      >\n        <LoadingSkeleton variant=\"card\" count={4} />\n      </PageLayout>\n    );\n  }\n\n  if (statsError) {\n    return (\n      <PageLayout\n        title=\"Pomodoro Analytics\"\n        description=\"Track your focus sessions and productivity\"\n      >\n        <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\">\n          Failed to load pomodoro analytics. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const totalFocusH = Math.floor((stats?.totalFocusMinutes ?? 0) / 60);\n  const totalFocusM = (stats?.totalFocusMinutes ?? 0) % 60;\n  const avgSessions = stats?.totalSessions\n    ? (stats.totalSessions / 30).toFixed(1)\n    : \"0\";\n  const completedCount = sessions.filter(\n    (s: PomodoroSessionFieldsFragment) => s.completed,\n  ).length;\n\n  return (\n    <PageLayout\n      title=\"Pomodoro Analytics\"\n      description=\"Track your focus sessions 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 Sessions\"\n          value={String(stats?.totalSessions ?? 0)}\n          trend={{\n            value: stats?.completionRate ?? 0,\n            label: \"completion rate\",\n          }}\n        />\n        <StatCard\n          title=\"Total Focus Time\"\n          value={`${totalFocusH}h ${totalFocusM}m`}\n          trend={{\n            value: stats?.averageSessionMinutes ?? 0,\n            label: \"avg min/session\",\n          }}\n        />\n        <StatCard\n          title=\"Avg. Sessions/Day\"\n          value={avgSessions}\n          description={`Target: ${stats?.totalSessions ?? 0} total`}\n        />\n        <StatCard\n          title=\"Completion Rate\"\n          value={`${stats?.completionRate ?? 0}%`}\n          icon={<Target className=\"h-5 w-5\" />}\n          trend={{ value: stats?.streakDays ?? 0, label: \"day streak\" }}\n        />\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n        <div className=\"rounded-xl border border-border-subtle bg-bg-surface p-6\">\n          <div className=\"mb-4 flex items-center gap-2\">\n            <BarChart3 className=\"h-5 w-5 text-primary\" />\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              Sessions per Day\n            </h3>\n          </div>\n          <div className=\"flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle\">\n            <p className=\"text-sm text-text-secondary\">\n              {sessions.length > 0\n                ? `${completedCount} completed out of ${sessions.length} sessions`\n                : \"No session data available\"}\n            </p>\n          </div>\n        </div>\n        <div className=\"rounded-xl border border-border-subtle bg-bg-surface p-6\">\n          <div className=\"mb-4 flex items-center gap-2\">\n            <BarChart3 className=\"h-5 w-5 text-primary\" />\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              Focus Distribution\n            </h3>\n          </div>\n          <div className=\"flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle\">\n            <p className=\"text-sm text-text-secondary\">\n              {stats\n                ? `${stats.streakDays} day streak · ${stats.averageSessionMinutes}m avg session`\n                : \"No data available\"}\n            </p>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,IAAwB;CACtC,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,EAAyB;EAC3B,WAAW,EAAE,gBAAa;EAC1B,MAAM,CAAC;EACR,CAAC,EAEI,EAAE,MAAM,GAAc,SAAS,MACnC,EAA6B;EAC3B,WAAW;GAAE;GAAa,OAAO;GAAI;EACrC,MAAM,CAAC;EACR,CAAC,EAEE,IAAQ,GAAW,eACnB,IAAW,GAAc,oBAAoB,EAAE;AAErD,KAAI,KAAgB,EAClB,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA;EACjC,CAAA;AAIjB,KAAI,EACF,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAA+H;GAExI,CAAA;EACK,CAAA;CAIjB,IAAM,IAAc,KAAK,OAAO,GAAO,qBAAqB,KAAK,GAAG,EAC9D,KAAe,GAAO,qBAAqB,KAAK,IAChD,IAAc,GAAO,iBACtB,EAAM,gBAAgB,IAAI,QAAQ,EAAE,GACrC,KACE,IAAiB,EAAS,QAC7B,MAAqC,EAAE,UACzC,CAAC;AAEF,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAFd,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,OAAO,GAAO,iBAAiB,EAAE;KACxC,OAAO;MACL,OAAO,GAAO,kBAAkB;MAChC,OAAO;MACR;KACD,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,GAAG,EAAY,IAAI,EAAY;KACtC,OAAO;MACL,OAAO,GAAO,yBAAyB;MACvC,OAAO;MACR;KACD,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO;KACP,aAAa,WAAW,GAAO,iBAAiB,EAAE;KAClD,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,GAAG,GAAO,kBAAkB,EAAE;KACrC,MAAM,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;KACpC,OAAO;MAAE,OAAO,GAAO,cAAc;MAAG,OAAO;MAAc;KAC7D,CAAA;IACE;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAW,WAAU,wBAAyB,CAAA,EAC9C,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAEnD,CAAA,CACD;QACN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAS,SAAS,IACf,GAAG,EAAe,oBAAoB,EAAS,OAAO,aACtD;MACF,CAAA;KACA,CAAA,CACF;OACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAW,WAAU,wBAAyB,CAAA,EAC9C,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAEnD,CAAA,CACD;QACN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBACV,IACG,GAAG,EAAM,WAAW,gBAAgB,EAAM,sBAAsB,iBAChE;MACF,CAAA;KACA,CAAA,CACF;MACF;KACK"}
+{"version":3,"file":"PomodoroAnalyticsPage.js","names":[],"sources":["../../../../src/timecampus/pages/pomodoro/PomodoroAnalyticsPage.tsx"],"sourcesContent":["import { BarChart3, Target } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useGetPomodoroStatsQuery,\n  useListPomodoroSessionsQuery,\n  type PomodoroSessionFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function PomodoroAnalyticsPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const {\n    data: statsData,\n    loading: statsLoading,\n    error: statsError,\n  } = useGetPomodoroStatsQuery({\n    variables: { workspaceId },\n    skip: !workspaceId,\n  });\n\n  const { data: sessionsData, loading: sessionsLoading } =\n    useListPomodoroSessionsQuery({\n      variables: { workspaceId, limit: 50 },\n      skip: !workspaceId,\n    });\n\n  const stats = statsData?.pomodoroStats;\n  const sessions = sessionsData?.pomodoroSessions ?? [];\n\n  if (statsLoading || sessionsLoading) {\n    return (\n      <PageLayout\n        title=\"Pomodoro Analytics\"\n        description=\"Track your focus sessions and productivity\"\n      >\n        <LoadingSkeleton variant=\"card\" count={4} />\n      </PageLayout>\n    );\n  }\n\n  if (statsError) {\n    return (\n      <PageLayout\n        title=\"Pomodoro Analytics\"\n        description=\"Track your focus sessions and productivity\"\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 pomodoro analytics. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const totalFocusH = Math.floor((stats?.totalFocusMinutes ?? 0) / 60);\n  const totalFocusM = (stats?.totalFocusMinutes ?? 0) % 60;\n  const avgSessions = stats?.totalSessions\n    ? (stats.totalSessions / 30).toFixed(1)\n    : \"0\";\n  const completedCount = sessions.filter(\n    (s: PomodoroSessionFieldsFragment) => s.completed,\n  ).length;\n\n  return (\n    <PageLayout\n      title=\"Pomodoro Analytics\"\n      description=\"Track your focus sessions and productivity\"\n      purpose=\"See whether your focus habit is sticking — completion rate, streaks and focus minutes over time — so you can tell good-focus days from distracted ones and keep your momentum going.\"\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          featured\n          title=\"Total Sessions\"\n          value={String(stats?.totalSessions ?? 0)}\n          trend={{\n            value: stats?.completionRate ?? 0,\n            label: \"completion rate\",\n          }}\n        />\n        <StatCard\n          title=\"Total Focus Time\"\n          value={`${totalFocusH}h ${totalFocusM}m`}\n          trend={{\n            value: stats?.averageSessionMinutes ?? 0,\n            label: \"avg min/session\",\n          }}\n        />\n        <StatCard\n          title=\"Avg. Sessions/Day\"\n          value={avgSessions}\n          description={`Target: ${stats?.totalSessions ?? 0} total`}\n        />\n        <StatCard\n          title=\"Completion Rate\"\n          value={`${stats?.completionRate ?? 0}%`}\n          icon={<Target className=\"h-5 w-5\" />}\n          trend={{ value: stats?.streakDays ?? 0, label: \"day streak\" }}\n        />\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n        <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6\">\n          <div className=\"mb-4 flex items-center gap-2\">\n            <BarChart3 className=\"h-5 w-5 text-primary\" />\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              Sessions per Day\n            </h3>\n          </div>\n          <div className=\"flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle\">\n            <p className=\"text-sm text-text-secondary\">\n              {sessions.length > 0\n                ? `${completedCount} completed out of ${sessions.length} sessions`\n                : \"No session data available\"}\n            </p>\n          </div>\n        </div>\n        <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6\">\n          <div className=\"mb-4 flex items-center gap-2\">\n            <BarChart3 className=\"h-5 w-5 text-primary\" />\n            <h3 className=\"text-sm font-semibold text-text-primary\">\n              Focus Distribution\n            </h3>\n          </div>\n          <div className=\"flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle\">\n            <p className=\"text-sm text-text-secondary\">\n              {stats\n                ? `${stats.streakDays} day streak · ${stats.averageSessionMinutes}m avg session`\n                : \"No data available\"}\n            </p>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,IAAwB;CACtC,IAAM,EAAE,iBAAc,OAAO,GAAe,EAEtC,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,EAAyB;EAC3B,WAAW,EAAE,gBAAa;EAC1B,MAAM,CAAC;EACR,CAAC,EAEI,EAAE,MAAM,GAAc,SAAS,MACnC,EAA6B;EAC3B,WAAW;GAAE;GAAa,OAAO;GAAI;EACrC,MAAM,CAAC;EACR,CAAC,EAEE,IAAQ,GAAW,eACnB,IAAW,GAAc,oBAAoB,EAAE;AAErD,KAAI,KAAgB,EAClB,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA;EACjC,CAAA;AAIjB,KAAI,EACF,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAAoG;GAE7G,CAAA;EACK,CAAA;CAIjB,IAAM,IAAc,KAAK,OAAO,GAAO,qBAAqB,KAAK,GAAG,EAC9D,KAAe,GAAO,qBAAqB,KAAK,IAChD,IAAc,GAAO,iBACtB,EAAM,gBAAgB,IAAI,QAAQ,EAAE,GACrC,KACE,IAAiB,EAAS,QAC7B,MAAqC,EAAE,UACzC,CAAC;AAEF,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SAAQ;YAHV,CAKE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,UAAA;KACA,OAAM;KACN,OAAO,OAAO,GAAO,iBAAiB,EAAE;KACxC,OAAO;MACL,OAAO,GAAO,kBAAkB;MAChC,OAAO;MACR;KACD,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,GAAG,EAAY,IAAI,EAAY;KACtC,OAAO;MACL,OAAO,GAAO,yBAAyB;MACvC,OAAO;MACR;KACD,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO;KACP,aAAa,WAAW,GAAO,iBAAiB,EAAE;KAClD,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,GAAG,GAAO,kBAAkB,EAAE;KACrC,MAAM,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;KACpC,OAAO;MAAE,OAAO,GAAO,cAAc;MAAG,OAAO;MAAc;KAC7D,CAAA;IACE;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAW,WAAU,wBAAyB,CAAA,EAC9C,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAEnD,CAAA,CACD;QACN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAS,SAAS,IACf,GAAG,EAAe,oBAAoB,EAAS,OAAO,aACtD;MACF,CAAA;KACA,CAAA,CACF;OACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAW,WAAU,wBAAyB,CAAA,EAC9C,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAEnD,CAAA,CACD;QACN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBACV,IACG,GAAG,EAAM,WAAW,gBAAgB,EAAM,sBAAsB,iBAChE;MACF,CAAA;KACA,CAAA,CACF;MACF;KACK"}