@burdenoff/microfe-timecampus 2026.608.1 → 2026.625.1

package/dist/timecampus/pages/projects/ProjectDetailPage.js

@@ -1,54 +1,54 @@
 import { formatCurrency as e, formatHours as t } from "../../utils/helpers.js";
-import { PageLayout as n } from "../../components/PageLayout.js";
-import { StatCard as r } from "../../components/StatCard.js";
-import { LoadingSkeleton as i } from "../../components/LoadingSkeleton.js";
-import { useGetProjectQuery as a, useGetProjectStatsQuery as o } from "../../../generated/wspace-operations.js";
+import { StatCard as n } from "../../components/StatCard.js";
+import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
+import { useGetProjectQuery as i, useGetProjectStatsQuery as a } from "../../../generated/wspace-operations.js";
+import { PageLayout as o } from "../../components/PageLayout.js";
 import { Clock as s, FolderOpen as c, TrendingUp as l, Users as u } from "lucide-react";
 import { useParams as d } from "react-router-dom";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/timecampus/pages/projects/ProjectDetailPage.tsx
 function m() {
-	let { projectId: m } = d(), { data: h, loading: g, error: _ } = a({
+	let { projectId: m } = d(), { data: h, loading: g, error: _ } = i({
 		variables: { id: m },
 		skip: !m
-	}), { data: v, loading: y } = o({
+	}), { data: v, loading: y } = a({
 		variables: { id: m },
 		skip: !m
 	}), b = h?.project, x = v?.projectStats;
-	return _ ? /* @__PURE__ */ f(n, {
+	return _ ? /* @__PURE__ */ f(o, {
 		title: "Project Details",
 		description: `Project ID: ${m}`,
 		children: /* @__PURE__ */ f("div", {
-			className: "rounded-xl border border-red-200 bg-red-50 p-6 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400",
+			className: "rounded-xl border border-status-error-bg/40 bg-status-error-bg p-6 text-sm text-status-error-text",
 			children: "Failed to load project details. Please try again later."
 		})
-	}) : g || y ? /* @__PURE__ */ f(n, {
+	}) : g || y ? /* @__PURE__ */ f(o, {
 		title: "Project Details",
 		description: `Project ID: ${m}`,
-		children: /* @__PURE__ */ f(i, { variant: "detail" })
-	}) : /* @__PURE__ */ p(n, {
+		children: /* @__PURE__ */ f(r, { variant: "detail" })
+	}) : /* @__PURE__ */ p(o, {
 		title: b?.name ?? "Project Details",
 		description: b?.description ?? `Project ID: ${m}`,
 		children: [/* @__PURE__ */ p("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 			children: [
-				/* @__PURE__ */ f(r, {
+				/* @__PURE__ */ f(n, {
 					title: "Tracked Hours",
 					value: t(x?.totalHours ?? b?.trackedHours ?? 0),
 					icon: /* @__PURE__ */ f(s, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ f(r, {
+				/* @__PURE__ */ f(n, {
 					title: "Tasks",
 					value: `${x?.completedTasks ?? 0} / ${x?.totalTasks ?? 0}`,
 					icon: /* @__PURE__ */ f(u, { className: "h-5 w-5" }),
 					description: "completed / total"
 				}),
-				/* @__PURE__ */ f(r, {
+				/* @__PURE__ */ f(n, {
 					title: "Progress",
 					value: x?.totalTasks ? `${Math.round((x?.completedTasks ?? 0) / x.totalTasks * 100)}%` : "0%",
 					icon: /* @__PURE__ */ f(l, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ f(r, {
+				/* @__PURE__ */ f(n, {
 					title: "Budget Used",
 					value: e(x?.budgetUsed ?? 0, b?.currency ?? "USD"),
 					icon: /* @__PURE__ */ f(c, { className: "h-5 w-5" }),
@@ -58,26 +58,26 @@ function m() {
 		}), /* @__PURE__ */ p("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
 			children: [/* @__PURE__ */ p("div", {
-				className: "rounded-xl border border-border bg-card p-6",
+				className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
 				children: [/* @__PURE__ */ f("h3", {
-					className: "mb-4 text-sm font-semibold text-foreground",
+					className: "mb-4 text-sm font-semibold text-text-primary",
 					children: "Recent Activity"
 				}), /* @__PURE__ */ f("div", {
-					className: "flex h-48 items-center justify-center rounded-lg border border-dashed border-border",
+					className: "flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle",
 					children: /* @__PURE__ */ f("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: "Activity timeline will render here"
 					})
 				})]
 			}), /* @__PURE__ */ p("div", {
-				className: "rounded-xl border border-border bg-card p-6",
+				className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
 				children: [/* @__PURE__ */ f("h3", {
-					className: "mb-4 text-sm font-semibold text-foreground",
+					className: "mb-4 text-sm font-semibold text-text-primary",
 					children: "Time Distribution"
 				}), /* @__PURE__ */ f("div", {
-					className: "flex h-48 items-center justify-center rounded-lg border border-dashed border-border",
+					className: "flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle",
 					children: /* @__PURE__ */ f("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: "Chart will render here"
 					})
 				})]

package/dist/timecampus/pages/projects/ProjectDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectDetailPage.js","names":[],"sources":["../../../../src/timecampus/pages/projects/ProjectDetailPage.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\";\nimport { FolderOpen, Clock, Users, TrendingUp } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { formatHours, formatCurrency } from \"../../utils/helpers\";\nimport {\n  useGetProjectQuery,\n  useGetProjectStatsQuery,\n} from \"@/generated/wspace-operations\";\n\nexport function ProjectDetailPage() {\n  const { projectId } = useParams<{ projectId: string }>();\n\n  const {\n    data: projectData,\n    loading: projectLoading,\n    error: projectError,\n  } = useGetProjectQuery({\n    variables: { id: projectId! },\n    skip: !projectId,\n  });\n\n  const { data: statsData, loading: statsLoading } = useGetProjectStatsQuery({\n    variables: { id: projectId! },\n    skip: !projectId,\n  });\n\n  const project = projectData?.project;\n  const stats = statsData?.projectStats;\n\n  if (projectError) {\n    return (\n      <PageLayout\n        title=\"Project Details\"\n        description={`Project ID: ${projectId}`}\n      >\n        <div className=\"rounded-xl border border-red-200 bg-red-50 p-6 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400\">\n          Failed to load project details. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (projectLoading || statsLoading) {\n    return (\n      <PageLayout\n        title=\"Project Details\"\n        description={`Project ID: ${projectId}`}\n      >\n        <LoadingSkeleton variant=\"detail\" />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={project?.name ?? \"Project Details\"}\n      description={project?.description ?? `Project ID: ${projectId}`}\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          title=\"Tracked Hours\"\n          value={formatHours(stats?.totalHours ?? project?.trackedHours ?? 0)}\n          icon={<Clock className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Tasks\"\n          value={`${stats?.completedTasks ?? 0} / ${stats?.totalTasks ?? 0}`}\n          icon={<Users className=\"h-5 w-5\" />}\n          description=\"completed / total\"\n        />\n        <StatCard\n          title=\"Progress\"\n          value={\n            stats?.totalTasks\n              ? `${Math.round(((stats?.completedTasks ?? 0) / stats.totalTasks) * 100)}%`\n              : \"0%\"\n          }\n          icon={<TrendingUp className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Budget Used\"\n          value={formatCurrency(\n            stats?.budgetUsed ?? 0,\n            project?.currency ?? \"USD\",\n          )}\n          icon={<FolderOpen className=\"h-5 w-5\" />}\n          description={\n            stats?.budgetRemaining != null\n              ? `${formatCurrency(stats.budgetRemaining, project?.currency ?? \"USD\")} remaining`\n              : undefined\n          }\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 bg-card p-6\">\n          <h3 className=\"mb-4 text-sm font-semibold text-foreground\">\n            Recent Activity\n          </h3>\n          <div className=\"flex h-48 items-center justify-center rounded-lg border border-dashed border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              Activity timeline will render here\n            </p>\n          </div>\n        </div>\n        <div className=\"rounded-xl border border-border bg-card p-6\">\n          <h3 className=\"mb-4 text-sm font-semibold text-foreground\">\n            Time Distribution\n          </h3>\n          <div className=\"flex h-48 items-center justify-center rounded-lg border border-dashed border-border\">\n            <p className=\"text-sm text-muted-foreground\">\n              Chart will render here\n            </p>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;AAWA,SAAgB,IAAoB;CAClC,IAAM,EAAE,iBAAc,GAAkC,EAElD,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,EAAmB;EACrB,WAAW,EAAE,IAAI,GAAY;EAC7B,MAAM,CAAC;EACR,CAAC,EAEI,EAAE,MAAM,GAAW,SAAS,MAAiB,EAAwB;EACzE,WAAW,EAAE,IAAI,GAAY;EAC7B,MAAM,CAAC;EACR,CAAC,EAEI,IAAU,GAAa,SACvB,IAAQ,GAAW;AA0BzB,QAxBI,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,eAAe;YAE5B,kBAAC,OAAD;GAAK,WAAU;aAA+H;GAExI,CAAA;EACK,CAAA,GAIb,KAAkB,IAElB,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,eAAe;YAE5B,kBAAC,GAAD,EAAiB,SAAQ,UAAW,CAAA;EACzB,CAAA,GAKf,kBAAC,GAAD;EACE,OAAO,GAAS,QAAQ;EACxB,aAAa,GAAS,eAAe,eAAe;YAFtD,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,EAAY,GAAO,cAAc,GAAS,gBAAgB,EAAE;KACnE,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;KACnC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,GAAG,GAAO,kBAAkB,EAAE,KAAK,GAAO,cAAc;KAC/D,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;KACnC,aAAY;KACZ,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OACE,GAAO,aACH,GAAG,KAAK,OAAQ,GAAO,kBAAkB,KAAK,EAAM,aAAc,IAAI,CAAC,KACvE;KAEN,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;KACxC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,EACL,GAAO,cAAc,GACrB,GAAS,YAAY,MACtB;KACD,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;KACxC,aACE,GAAO,mBAAmB,OAEtB,KAAA,IADA,GAAG,EAAe,EAAM,iBAAiB,GAAS,YAAY,MAAM,CAAC;KAG3E,CAAA;IACE;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA6C;KAEtD,CAAA,EACL,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBAAgC;MAEzC,CAAA;KACA,CAAA,CACF;OACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA6C;KAEtD,CAAA,EACL,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBAAgC;MAEzC,CAAA;KACA,CAAA,CACF;MACF;KACK"}
+{"version":3,"file":"ProjectDetailPage.js","names":[],"sources":["../../../../src/timecampus/pages/projects/ProjectDetailPage.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\";\nimport { FolderOpen, Clock, Users, TrendingUp } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { formatHours, formatCurrency } from \"../../utils/helpers\";\nimport {\n  useGetProjectQuery,\n  useGetProjectStatsQuery,\n} from \"@/generated/wspace-operations\";\n\nexport function ProjectDetailPage() {\n  const { projectId } = useParams<{ projectId: string }>();\n\n  const {\n    data: projectData,\n    loading: projectLoading,\n    error: projectError,\n  } = useGetProjectQuery({\n    variables: { id: projectId! },\n    skip: !projectId,\n  });\n\n  const { data: statsData, loading: statsLoading } = useGetProjectStatsQuery({\n    variables: { id: projectId! },\n    skip: !projectId,\n  });\n\n  const project = projectData?.project;\n  const stats = statsData?.projectStats;\n\n  if (projectError) {\n    return (\n      <PageLayout\n        title=\"Project Details\"\n        description={`Project ID: ${projectId}`}\n      >\n        <div className=\"rounded-xl border border-status-error-bg/40 bg-status-error-bg p-6 text-sm text-status-error-text\">\n          Failed to load project details. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (projectLoading || statsLoading) {\n    return (\n      <PageLayout\n        title=\"Project Details\"\n        description={`Project ID: ${projectId}`}\n      >\n        <LoadingSkeleton variant=\"detail\" />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={project?.name ?? \"Project Details\"}\n      description={project?.description ?? `Project ID: ${projectId}`}\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          title=\"Tracked Hours\"\n          value={formatHours(stats?.totalHours ?? project?.trackedHours ?? 0)}\n          icon={<Clock className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Tasks\"\n          value={`${stats?.completedTasks ?? 0} / ${stats?.totalTasks ?? 0}`}\n          icon={<Users className=\"h-5 w-5\" />}\n          description=\"completed / total\"\n        />\n        <StatCard\n          title=\"Progress\"\n          value={\n            stats?.totalTasks\n              ? `${Math.round(((stats?.completedTasks ?? 0) / stats.totalTasks) * 100)}%`\n              : \"0%\"\n          }\n          icon={<TrendingUp className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Budget Used\"\n          value={formatCurrency(\n            stats?.budgetUsed ?? 0,\n            project?.currency ?? \"USD\",\n          )}\n          icon={<FolderOpen className=\"h-5 w-5\" />}\n          description={\n            stats?.budgetRemaining != null\n              ? `${formatCurrency(stats.budgetRemaining, project?.currency ?? \"USD\")} remaining`\n              : undefined\n          }\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            Recent Activity\n          </h3>\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              Activity timeline will render here\n            </p>\n          </div>\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            Time Distribution\n          </h3>\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              Chart will render here\n            </p>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;AAWA,SAAgB,IAAoB;CAClC,IAAM,EAAE,iBAAc,GAAkC,EAElD,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,EAAmB;EACrB,WAAW,EAAE,IAAI,GAAY;EAC7B,MAAM,CAAC;EACR,CAAC,EAEI,EAAE,MAAM,GAAW,SAAS,MAAiB,EAAwB;EACzE,WAAW,EAAE,IAAI,GAAY;EAC7B,MAAM,CAAC;EACR,CAAC,EAEI,IAAU,GAAa,SACvB,IAAQ,GAAW;AA0BzB,QAxBI,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,eAAe;YAE5B,kBAAC,OAAD;GAAK,WAAU;aAAoG;GAE7G,CAAA;EACK,CAAA,GAIb,KAAkB,IAElB,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,eAAe;YAE5B,kBAAC,GAAD,EAAiB,SAAQ,UAAW,CAAA;EACzB,CAAA,GAKf,kBAAC,GAAD;EACE,OAAO,GAAS,QAAQ;EACxB,aAAa,GAAS,eAAe,eAAe;YAFtD,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,EAAY,GAAO,cAAc,GAAS,gBAAgB,EAAE;KACnE,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;KACnC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,GAAG,GAAO,kBAAkB,EAAE,KAAK,GAAO,cAAc;KAC/D,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;KACnC,aAAY;KACZ,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OACE,GAAO,aACH,GAAG,KAAK,OAAQ,GAAO,kBAAkB,KAAK,EAAM,aAAc,IAAI,CAAC,KACvE;KAEN,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;KACxC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,EACL,GAAO,cAAc,GACrB,GAAS,YAAY,MACtB;KACD,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;KACxC,aACE,GAAO,mBAAmB,OAEtB,KAAA,IADA,GAAG,EAAe,EAAM,iBAAiB,GAAS,YAAY,MAAM,CAAC;KAG3E,CAAA;IACE;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA+C;KAExD,CAAA,EACL,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBAA8B;MAEvC,CAAA;KACA,CAAA,CACF;OACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAA+C;KAExD,CAAA,EACL,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,KAAD;MAAG,WAAU;gBAA8B;MAEvC,CAAA;KACA,CAAA,CACF;MACF;KACK"}

package/dist/timecampus/pages/projects/ProjectsPage.js

@@ -1,7 +1,7 @@
 import { formatHours as e, getStatusColor as t } from "../../utils/helpers.js";
-import { PageLayout as n } from "../../components/PageLayout.js";
-import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
-import { useListProjectsQuery as i } from "../../../generated/wspace-operations.js";
+import { LoadingSkeleton as n } from "../../components/LoadingSkeleton.js";
+import { useListProjectsQuery as r } from "../../../generated/wspace-operations.js";
+import { PageLayout as i } from "../../components/PageLayout.js";
 import { FolderOpen as a, Plus as o } from "lucide-react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
@@ -10,34 +10,34 @@ function u() {
 	let { t: u } = l(), d = (e, t) => {
 		let n = u(e);
 		return n === e ? t : n;
-	}, { data: f, loading: p, error: m } = i({ variables: { limit: 50 } }), h = f?.projects?.items ?? [];
-	return m ? /* @__PURE__ */ s(n, {
+	}, { data: f, loading: p, error: m } = r({ variables: { limit: 50 } }), h = f?.projects?.items ?? [];
+	return m ? /* @__PURE__ */ s(i, {
 		title: d("timecampus.projects.title", "Projects"),
 		description: d("timecampus.projects.description", "Manage and track project time"),
 		children: /* @__PURE__ */ s("div", {
-			className: "rounded-xl border border-red-200 bg-red-50 p-6 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400",
+			className: "rounded-xl border border-status-error-bg/40 bg-status-error-bg p-6 text-sm text-status-error-text",
 			children: d("timecampus.projects.error.loadFailed", "Failed to load projects. Please try again later.")
 		})
-	}) : /* @__PURE__ */ s(n, {
+	}) : /* @__PURE__ */ s(i, {
 		title: d("timecampus.projects.title", "Projects"),
 		description: d("timecampus.projects.description", "Manage and track project time"),
 		actions: /* @__PURE__ */ c("button", {
-			className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+			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__ */ s(o, { className: "h-4 w-4" }), d("timecampus.projects.actions.newProject", "New Project")]
 		}),
-		children: p ? /* @__PURE__ */ s(r, {
+		children: p ? /* @__PURE__ */ s(n, {
 			variant: "card",
 			count: 4
 		}) : h.length === 0 ? /* @__PURE__ */ c("div", {
-			className: "rounded-xl border border-dashed border-border bg-card p-12 text-center",
-			children: [/* @__PURE__ */ s(a, { className: "mx-auto h-10 w-10 text-muted-foreground" }), /* @__PURE__ */ s("p", {
-				className: "mt-4 text-sm text-muted-foreground",
+			className: "rounded-xl border border-dashed border-border-subtle bg-bg-surface p-12 text-center",
+			children: [/* @__PURE__ */ s(a, { className: "mx-auto h-10 w-10 text-text-secondary" }), /* @__PURE__ */ s("p", {
+				className: "mt-4 text-sm text-text-secondary",
 				children: d("timecampus.projects.empty", "No projects yet. Create your first project to get started.")
 			})]
 		}) : /* @__PURE__ */ s("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
 			children: h.map((n) => /* @__PURE__ */ c("div", {
-				className: "rounded-xl border border-border bg-card p-5 transition-colors hover:bg-muted/50 cursor-pointer",
+				className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-5 transition-colors hover:bg-bg-sunken/50 cursor-pointer",
 				children: [
 					/* @__PURE__ */ c("div", {
 						className: "flex items-start justify-between",
@@ -45,12 +45,12 @@ function u() {
 							className: "flex items-center gap-3",
 							children: [/* @__PURE__ */ s("div", {
 								className: "h-3 w-3 rounded-full",
-								style: { backgroundColor: n.color ?? "#3b82f6" }
+								style: { backgroundColor: n.color ?? "var(--color-accent-blue)" }
 							}), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
-								className: "text-sm font-semibold text-foreground",
+								className: "text-sm font-semibold text-text-primary",
 								children: n.name
 							}), /* @__PURE__ */ s("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: n.clientId ?? d("timecampus.projects.card.noClient", "No client")
 							})] })]
 						}), /* @__PURE__ */ s("span", {
@@ -61,18 +61,18 @@ function u() {
 					/* @__PURE__ */ c("div", {
 						className: "mt-4",
 						children: [/* @__PURE__ */ c("div", {
-							className: "flex items-center justify-between text-xs text-muted-foreground",
+							className: "flex items-center justify-between text-xs text-text-secondary",
 							children: [/* @__PURE__ */ s("span", { children: d("timecampus.projects.card.progress", "Progress") }), /* @__PURE__ */ c("span", { children: [n.estimatedHours ? Math.round(n.trackedHours / n.estimatedHours * 100) : 0, "%"] })]
 						}), /* @__PURE__ */ s("div", {
-							className: "mt-1 h-2 rounded-full bg-muted",
+							className: "mt-1 h-2 rounded-full bg-bg-sunken",
 							children: /* @__PURE__ */ s("div", {
-								className: "h-2 rounded-full bg-primary",
+								className: "h-2 rounded-full bg-action-primary-bg",
 								style: { width: `${n.estimatedHours ? Math.min(Math.round(n.trackedHours / n.estimatedHours * 100), 100) : 0}%` }
 							})
 						})]
 					}),
 					/* @__PURE__ */ c("div", {
-						className: "mt-3 flex items-center justify-between text-xs text-muted-foreground",
+						className: "mt-3 flex items-center justify-between text-xs text-text-secondary",
 						children: [/* @__PURE__ */ c("span", { children: [
 							e(n.trackedHours),
 							" /",

package/dist/timecampus/pages/projects/ProjectsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectsPage.js","names":[],"sources":["../../../../src/timecampus/pages/projects/ProjectsPage.tsx"],"sourcesContent":["import { FolderOpen, Plus } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { getStatusColor, formatHours } from \"../../utils/helpers\";\nimport {\n  useListProjectsQuery,\n  type ListProjectsQuery,\n} from \"@/generated/wspace-operations\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\n\ntype ProjectItem = NonNullable<ListProjectsQuery[\"projects\"]>[\"items\"][number];\n\nexport function ProjectsPage() {\n  const { t: translate } = useI18n();\n  const t = (key: string, fallback: string): string => {\n    const value = translate(key);\n    return value === key ? fallback : value;\n  };\n  const { data, loading, error } = useListProjectsQuery({\n    variables: { limit: 50 },\n  });\n\n  const projects = data?.projects?.items ?? [];\n\n  if (error) {\n    return (\n      <PageLayout\n        title={t(\"timecampus.projects.title\", \"Projects\")}\n        description={t(\n          \"timecampus.projects.description\",\n          \"Manage and track project time\",\n        )}\n      >\n        <div className=\"rounded-xl border border-red-200 bg-red-50 p-6 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400\">\n          {t(\n            \"timecampus.projects.error.loadFailed\",\n            \"Failed to load projects. Please try again later.\",\n          )}\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={t(\"timecampus.projects.title\", \"Projects\")}\n      description={t(\n        \"timecampus.projects.description\",\n        \"Manage and track project time\",\n      )}\n      actions={\n        <button className=\"inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\">\n          <Plus className=\"h-4 w-4\" />\n          {t(\"timecampus.projects.actions.newProject\", \"New Project\")}\n        </button>\n      }\n    >\n      {loading ? (\n        <LoadingSkeleton variant=\"card\" count={4} />\n      ) : projects.length === 0 ? (\n        <div className=\"rounded-xl border border-dashed border-border bg-card p-12 text-center\">\n          <FolderOpen className=\"mx-auto h-10 w-10 text-muted-foreground\" />\n          <p className=\"mt-4 text-sm text-muted-foreground\">\n            {t(\n              \"timecampus.projects.empty\",\n              \"No projects yet. Create your first project to get started.\",\n            )}\n          </p>\n        </div>\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {projects.map((project: ProjectItem) => (\n            <div\n              key={project.id}\n              className=\"rounded-xl border border-border bg-card p-5 transition-colors hover:bg-muted/50 cursor-pointer\"\n            >\n              <div className=\"flex items-start justify-between\">\n                <div className=\"flex items-center gap-3\">\n                  <div\n                    className=\"h-3 w-3 rounded-full\"\n                    style={{ backgroundColor: project.color ?? \"#3b82f6\" }}\n                  />\n                  <div>\n                    <p className=\"text-sm font-semibold text-foreground\">\n                      {project.name}\n                    </p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {project.clientId ??\n                        t(\"timecampus.projects.card.noClient\", \"No client\")}\n                    </p>\n                  </div>\n                </div>\n                <span\n                  className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(project.status)}`}\n                >\n                  {project.status}\n                </span>\n              </div>\n              <div className=\"mt-4\">\n                <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n                  <span>\n                    {t(\"timecampus.projects.card.progress\", \"Progress\")}\n                  </span>\n                  <span>\n                    {project.estimatedHours\n                      ? Math.round(\n                          (project.trackedHours / project.estimatedHours) * 100,\n                        )\n                      : 0}\n                    %\n                  </span>\n                </div>\n                <div className=\"mt-1 h-2 rounded-full bg-muted\">\n                  <div\n                    className=\"h-2 rounded-full bg-primary\"\n                    style={{\n                      width: `${project.estimatedHours ? Math.min(Math.round((project.trackedHours / project.estimatedHours) * 100), 100) : 0}%`,\n                    }}\n                  />\n                </div>\n              </div>\n              <div className=\"mt-3 flex items-center justify-between text-xs text-muted-foreground\">\n                <span>\n                  {formatHours(project.trackedHours)} /{\" \"}\n                  {formatHours(project.estimatedHours ?? 0)}\n                </span>\n                <span>\n                  {project.tasks?.length ?? 0}{\" \"}\n                  {t(\"timecampus.projects.card.tasks\", \"tasks\")}\n                </span>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,IAAe;CAC7B,IAAM,EAAE,GAAG,MAAc,GAAS,EAC5B,KAAK,GAAa,MAA6B;EACnD,IAAM,IAAQ,EAAU,EAAI;AAC5B,SAAO,MAAU,IAAM,IAAW;IAE9B,EAAE,SAAM,YAAS,aAAU,EAAqB,EACpD,WAAW,EAAE,OAAO,IAAI,EACzB,CAAC,EAEI,IAAW,GAAM,UAAU,SAAS,EAAE;AAqB5C,QAnBI,IAEA,kBAAC,GAAD;EACE,OAAO,EAAE,6BAA6B,WAAW;EACjD,aAAa,EACX,mCACA,gCACD;YAED,kBAAC,OAAD;GAAK,WAAU;aACZ,EACC,wCACA,mDACD;GACG,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAO,EAAE,6BAA6B,WAAW;EACjD,aAAa,EACX,mCACA,gCACD;EACD,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC3B,EAAE,0CAA0C,cAAc,CACpD;;YAGV,IACC,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA,GAC1C,EAAS,WAAW,IACtB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAY,WAAU,2CAA4C,CAAA,EAClE,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,6BACA,6DACD;IACC,CAAA,CACA;OAEN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAS,KAAK,MACb,kBAAC,OAAD;IAEE,WAAU;cAFZ;KAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QACE,WAAU;QACV,OAAO,EAAE,iBAAiB,EAAQ,SAAS,WAAW;QACtD,CAAA,EACF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ,YACP,EAAE,qCAAqC,YAAY;QACnD,CAAA,CACA,EAAA,CAAA,CACF;UACN,kBAAC,QAAD;OACE,WAAW,4DAA4D,EAAe,EAAQ,OAAO;iBAEpG,EAAQ;OACJ,CAAA,CACH;;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD,EAAA,UACG,EAAE,qCAAqC,WAAW,EAC9C,CAAA,EACP,kBAAC,QAAD,EAAA,UAAA,CACG,EAAQ,iBACL,KAAK,MACF,EAAQ,eAAe,EAAQ,iBAAkB,IACnD,GACD,GAAE,IAED,EAAA,CAAA,CACH;UACN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QACE,WAAU;QACV,OAAO,EACL,OAAO,GAAG,EAAQ,iBAAiB,KAAK,IAAI,KAAK,MAAO,EAAQ,eAAe,EAAQ,iBAAkB,IAAI,EAAE,IAAI,GAAG,EAAE,IACzH;QACD,CAAA;OACE,CAAA,CACF;;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD,EAAA,UAAA;OACG,EAAY,EAAQ,aAAa;OAAC;OAAG;OACrC,EAAY,EAAQ,kBAAkB,EAAE;OACpC,EAAA,CAAA,EACP,kBAAC,QAAD,EAAA,UAAA;OACG,EAAQ,OAAO,UAAU;OAAG;OAC5B,EAAE,kCAAkC,QAAQ;OACxC,EAAA,CAAA,CACH;;KACF;MA1DC,EAAQ,GA0DT,CACN;GACE,CAAA;EAEG,CAAA"}
+{"version":3,"file":"ProjectsPage.js","names":[],"sources":["../../../../src/timecampus/pages/projects/ProjectsPage.tsx"],"sourcesContent":["import { FolderOpen, Plus } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { getStatusColor, formatHours } from \"../../utils/helpers\";\nimport {\n  useListProjectsQuery,\n  type ListProjectsQuery,\n} from \"@/generated/wspace-operations\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\n\ntype ProjectItem = NonNullable<ListProjectsQuery[\"projects\"]>[\"items\"][number];\n\nexport function ProjectsPage() {\n  const { t: translate } = useI18n();\n  const t = (key: string, fallback: string): string => {\n    const value = translate(key);\n    return value === key ? fallback : value;\n  };\n  const { data, loading, error } = useListProjectsQuery({\n    variables: { limit: 50 },\n  });\n\n  const projects = data?.projects?.items ?? [];\n\n  if (error) {\n    return (\n      <PageLayout\n        title={t(\"timecampus.projects.title\", \"Projects\")}\n        description={t(\n          \"timecampus.projects.description\",\n          \"Manage and track project time\",\n        )}\n      >\n        <div className=\"rounded-xl border border-status-error-bg/40 bg-status-error-bg p-6 text-sm text-status-error-text\">\n          {t(\n            \"timecampus.projects.error.loadFailed\",\n            \"Failed to load projects. Please try again later.\",\n          )}\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={t(\"timecampus.projects.title\", \"Projects\")}\n      description={t(\n        \"timecampus.projects.description\",\n        \"Manage and track project time\",\n      )}\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          {t(\"timecampus.projects.actions.newProject\", \"New Project\")}\n        </button>\n      }\n    >\n      {loading ? (\n        <LoadingSkeleton variant=\"card\" count={4} />\n      ) : projects.length === 0 ? (\n        <div className=\"rounded-xl border border-dashed border-border-subtle bg-bg-surface p-12 text-center\">\n          <FolderOpen className=\"mx-auto h-10 w-10 text-text-secondary\" />\n          <p className=\"mt-4 text-sm text-text-secondary\">\n            {t(\n              \"timecampus.projects.empty\",\n              \"No projects yet. Create your first project to get started.\",\n            )}\n          </p>\n        </div>\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {projects.map((project: ProjectItem) => (\n            <div\n              key={project.id}\n              className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop p-5 transition-colors hover:bg-bg-sunken/50 cursor-pointer\"\n            >\n              <div className=\"flex items-start justify-between\">\n                <div className=\"flex items-center gap-3\">\n                  <div\n                    className=\"h-3 w-3 rounded-full\"\n                    style={{\n                      backgroundColor:\n                        project.color ?? \"var(--color-accent-blue)\",\n                    }}\n                  />\n                  <div>\n                    <p className=\"text-sm font-semibold text-text-primary\">\n                      {project.name}\n                    </p>\n                    <p className=\"text-xs text-text-secondary\">\n                      {project.clientId ??\n                        t(\"timecampus.projects.card.noClient\", \"No client\")}\n                    </p>\n                  </div>\n                </div>\n                <span\n                  className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(project.status)}`}\n                >\n                  {project.status}\n                </span>\n              </div>\n              <div className=\"mt-4\">\n                <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n                  <span>\n                    {t(\"timecampus.projects.card.progress\", \"Progress\")}\n                  </span>\n                  <span>\n                    {project.estimatedHours\n                      ? Math.round(\n                          (project.trackedHours / project.estimatedHours) * 100,\n                        )\n                      : 0}\n                    %\n                  </span>\n                </div>\n                <div className=\"mt-1 h-2 rounded-full bg-bg-sunken\">\n                  <div\n                    className=\"h-2 rounded-full bg-action-primary-bg\"\n                    style={{\n                      width: `${project.estimatedHours ? Math.min(Math.round((project.trackedHours / project.estimatedHours) * 100), 100) : 0}%`,\n                    }}\n                  />\n                </div>\n              </div>\n              <div className=\"mt-3 flex items-center justify-between text-xs text-text-secondary\">\n                <span>\n                  {formatHours(project.trackedHours)} /{\" \"}\n                  {formatHours(project.estimatedHours ?? 0)}\n                </span>\n                <span>\n                  {project.tasks?.length ?? 0}{\" \"}\n                  {t(\"timecampus.projects.card.tasks\", \"tasks\")}\n                </span>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,IAAe;CAC7B,IAAM,EAAE,GAAG,MAAc,GAAS,EAC5B,KAAK,GAAa,MAA6B;EACnD,IAAM,IAAQ,EAAU,EAAI;AAC5B,SAAO,MAAU,IAAM,IAAW;IAE9B,EAAE,SAAM,YAAS,aAAU,EAAqB,EACpD,WAAW,EAAE,OAAO,IAAI,EACzB,CAAC,EAEI,IAAW,GAAM,UAAU,SAAS,EAAE;AAqB5C,QAnBI,IAEA,kBAAC,GAAD;EACE,OAAO,EAAE,6BAA6B,WAAW;EACjD,aAAa,EACX,mCACA,gCACD;YAED,kBAAC,OAAD;GAAK,WAAU;aACZ,EACC,wCACA,mDACD;GACG,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAO,EAAE,6BAA6B,WAAW;EACjD,aAAa,EACX,mCACA,gCACD;EACD,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC3B,EAAE,0CAA0C,cAAc,CACpD;;YAGV,IACC,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA,GAC1C,EAAS,WAAW,IACtB,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAY,WAAU,yCAA0C,CAAA,EAChE,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,6BACA,6DACD;IACC,CAAA,CACA;OAEN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAS,KAAK,MACb,kBAAC,OAAD;IAEE,WAAU;cAFZ;KAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QACE,WAAU;QACV,OAAO,EACL,iBACE,EAAQ,SAAS,4BACpB;QACD,CAAA,EACF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ;QACP,CAAA,EACJ,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAQ,YACP,EAAE,qCAAqC,YAAY;QACnD,CAAA,CACA,EAAA,CAAA,CACF;UACN,kBAAC,QAAD;OACE,WAAW,4DAA4D,EAAe,EAAQ,OAAO;iBAEpG,EAAQ;OACJ,CAAA,CACH;;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD,EAAA,UACG,EAAE,qCAAqC,WAAW,EAC9C,CAAA,EACP,kBAAC,QAAD,EAAA,UAAA,CACG,EAAQ,iBACL,KAAK,MACF,EAAQ,eAAe,EAAQ,iBAAkB,IACnD,GACD,GAAE,IAED,EAAA,CAAA,CACH;UACN,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QACE,WAAU;QACV,OAAO,EACL,OAAO,GAAG,EAAQ,iBAAiB,KAAK,IAAI,KAAK,MAAO,EAAQ,eAAe,EAAQ,iBAAkB,IAAI,EAAE,IAAI,GAAG,EAAE,IACzH;QACD,CAAA;OACE,CAAA,CACF;;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD,EAAA,UAAA;OACG,EAAY,EAAQ,aAAa;OAAC;OAAG;OACrC,EAAY,EAAQ,kBAAkB,EAAE;OACpC,EAAA,CAAA,EACP,kBAAC,QAAD,EAAA,UAAA;OACG,EAAQ,OAAO,UAAU;OAAG;OAC5B,EAAE,kCAAkC,QAAQ;OACxC,EAAA,CAAA,CACH;;KACF;MA7DC,EAAQ,GA6DT,CACN;GACE,CAAA;EAEG,CAAA"}

package/dist/timecampus/pages/projects/TasksPage.js

@@ -1,46 +1,46 @@
 import { getPriorityColor as e, getStatusColor as t } from "../../utils/helpers.js";
-import { PageLayout as n } from "../../components/PageLayout.js";
-import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
-import { useListTasksQuery as i } from "../../../generated/wspace-operations.js";
+import { LoadingSkeleton as n } from "../../components/LoadingSkeleton.js";
+import { useListTasksQuery as r } from "../../../generated/wspace-operations.js";
+import { PageLayout as i } from "../../components/PageLayout.js";
 import { CheckSquare as a, Plus as o } from "lucide-react";
 import { useParams as s } from "react-router-dom";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/timecampus/pages/projects/TasksPage.tsx
 function u() {
-	let { projectId: u } = s(), { data: d, loading: f, error: p } = i({
+	let { projectId: u } = s(), { data: d, loading: f, error: p } = r({
 		variables: { projectId: u },
 		skip: !u
 	}), m = d?.tasks?.items ?? [];
-	return p ? /* @__PURE__ */ c(n, {
+	return p ? /* @__PURE__ */ c(i, {
 		title: "Tasks",
 		description: `Tasks for project ${u}`,
 		children: /* @__PURE__ */ c("div", {
-			className: "rounded-xl border border-red-200 bg-red-50 p-6 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400",
+			className: "rounded-xl border border-status-error-bg/40 bg-status-error-bg p-6 text-sm text-status-error-text",
 			children: "Failed to load tasks. Please try again later."
 		})
-	}) : /* @__PURE__ */ c(n, {
+	}) : /* @__PURE__ */ c(i, {
 		title: "Tasks",
 		description: `Tasks for project ${u}`,
 		actions: /* @__PURE__ */ l("button", {
-			className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+			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" }), "Add Task"]
 		}),
-		children: f ? /* @__PURE__ */ c(r, {
+		children: f ? /* @__PURE__ */ c(n, {
 			variant: "list",
 			count: 5
 		}) : /* @__PURE__ */ c("div", {
-			className: "rounded-xl border border-border bg-card",
+			className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
 			children: /* @__PURE__ */ l("div", {
 				className: "divide-y divide-border",
 				children: [m.map((n) => /* @__PURE__ */ l("div", {
-					className: "flex items-center justify-between p-4 hover:bg-muted/50 transition-colors",
+					className: "flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors",
 					children: [/* @__PURE__ */ l("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ c(a, { className: `h-5 w-5 ${n.status === "done" ? "text-emerald-500" : "text-muted-foreground"}` }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
-							className: `text-sm font-medium ${n.status === "done" ? "text-muted-foreground line-through" : "text-foreground"}`,
+						children: [/* @__PURE__ */ c(a, { className: `h-5 w-5 ${n.status === "done" ? "text-status-success-text" : "text-text-secondary"}` }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+							className: `text-sm font-medium ${n.status === "done" ? "text-text-secondary line-through" : "text-text-primary"}`,
 							children: n.title
 						}), /* @__PURE__ */ l("p", {
-							className: "text-xs text-muted-foreground",
+							className: "text-xs text-text-secondary",
 							children: [
 								n.assigneeId ?? "Unassigned",
 								" ·",
@@ -60,7 +60,7 @@ function u() {
 						})]
 					})]
 				}, n.id)), m.length === 0 && /* @__PURE__ */ c("div", {
-					className: "p-8 text-center text-sm text-muted-foreground",
+					className: "p-8 text-center text-sm text-text-secondary",
 					children: "No tasks yet. Add a task to get started."
 				})]
 			})

package/dist/timecampus/pages/projects/TasksPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TasksPage.js","names":[],"sources":["../../../../src/timecampus/pages/projects/TasksPage.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\";\nimport { Plus, CheckSquare } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { getStatusColor, getPriorityColor } from \"../../utils/helpers\";\nimport {\n  useListTasksQuery,\n  type TaskFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function TasksPage() {\n  const { projectId } = useParams<{ projectId: string }>();\n\n  const { data, loading, error } = useListTasksQuery({\n    variables: { projectId: projectId! },\n    skip: !projectId,\n  });\n\n  const tasks = data?.tasks?.items ?? [];\n\n  if (error) {\n    return (\n      <PageLayout title=\"Tasks\" description={`Tasks for project ${projectId}`}>\n        <div className=\"rounded-xl border border-red-200 bg-red-50 p-6 text-sm text-red-700 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400\">\n          Failed to load tasks. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Tasks\"\n      description={`Tasks for project ${projectId}`}\n      actions={\n        <button className=\"inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90\">\n          <Plus className=\"h-4 w-4\" />\n          Add Task\n        </button>\n      }\n    >\n      {loading ? (\n        <LoadingSkeleton variant=\"list\" count={5} />\n      ) : (\n        <div className=\"rounded-xl border border-border bg-card\">\n          <div className=\"divide-y divide-border\">\n            {tasks.map((task: TaskFieldsFragment) => (\n              <div\n                key={task.id}\n                className=\"flex items-center justify-between p-4 hover:bg-muted/50 transition-colors\"\n              >\n                <div className=\"flex items-center gap-3\">\n                  <CheckSquare\n                    className={`h-5 w-5 ${task.status === \"done\" ? \"text-emerald-500\" : \"text-muted-foreground\"}`}\n                  />\n                  <div>\n                    <p\n                      className={`text-sm font-medium ${task.status === \"done\" ? \"text-muted-foreground line-through\" : \"text-foreground\"}`}\n                    >\n                      {task.title}\n                    </p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {task.assigneeId ?? \"Unassigned\"} &middot;{\" \"}\n                      {task.trackedHours}h tracked\n                    </p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span\n                    className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getPriorityColor(task.priority)}`}\n                  >\n                    {task.priority}\n                  </span>\n                  <span\n                    className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(task.status)}`}\n                  >\n                    {task.status}\n                  </span>\n                </div>\n              </div>\n            ))}\n            {tasks.length === 0 && (\n              <div className=\"p-8 text-center text-sm text-muted-foreground\">\n                No tasks yet. Add a task to get started.\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,IAAY;CAC1B,IAAM,EAAE,iBAAc,GAAkC,EAElD,EAAE,SAAM,YAAS,aAAU,EAAkB;EACjD,WAAW,EAAa,cAAY;EACpC,MAAM,CAAC;EACR,CAAC,EAEI,IAAQ,GAAM,OAAO,SAAS,EAAE;AAYtC,QAVI,IAEA,kBAAC,GAAD;EAAY,OAAM;EAAQ,aAAa,qBAAqB;YAC1D,kBAAC,OAAD;GAAK,WAAU;aAA+H;GAExI,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,qBAAqB;EAClC,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,WAErB;;YAGV,IACC,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA,GAE5C,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAM,KAAK,MACV,kBAAC,OAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EACE,WAAW,WAAW,EAAK,WAAW,SAAS,qBAAqB,2BACpE,CAAA,EACF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;OACE,WAAW,uBAAuB,EAAK,WAAW,SAAS,uCAAuC;iBAEjG,EAAK;OACJ,CAAA,EACJ,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,EAAK,cAAc;QAAa;QAAU;QAC1C,EAAK;QAAa;QACjB;SACA,EAAA,CAAA,CACF;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OACE,WAAW,4DAA4D,EAAiB,EAAK,SAAS;iBAErG,EAAK;OACD,CAAA,EACP,kBAAC,QAAD;OACE,WAAW,4DAA4D,EAAe,EAAK,OAAO;iBAEjG,EAAK;OACD,CAAA,CACH;QACF;OA/BC,EAAK,GA+BN,CACN,EACD,EAAM,WAAW,KAChB,kBAAC,OAAD;KAAK,WAAU;eAAgD;KAEzD,CAAA,CAEJ;;GACF,CAAA;EAEG,CAAA"}
+{"version":3,"file":"TasksPage.js","names":[],"sources":["../../../../src/timecampus/pages/projects/TasksPage.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\";\nimport { Plus, CheckSquare } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { getStatusColor, getPriorityColor } from \"../../utils/helpers\";\nimport {\n  useListTasksQuery,\n  type TaskFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function TasksPage() {\n  const { projectId } = useParams<{ projectId: string }>();\n\n  const { data, loading, error } = useListTasksQuery({\n    variables: { projectId: projectId! },\n    skip: !projectId,\n  });\n\n  const tasks = data?.tasks?.items ?? [];\n\n  if (error) {\n    return (\n      <PageLayout title=\"Tasks\" description={`Tasks for project ${projectId}`}>\n        <div className=\"rounded-xl border border-status-error-bg/40 bg-status-error-bg p-6 text-sm text-status-error-text\">\n          Failed to load tasks. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"Tasks\"\n      description={`Tasks for project ${projectId}`}\n      actions={\n        <button className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90\">\n          <Plus className=\"h-4 w-4\" />\n          Add Task\n        </button>\n      }\n    >\n      {loading ? (\n        <LoadingSkeleton variant=\"list\" count={5} />\n      ) : (\n        <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop\">\n          <div className=\"divide-y divide-border\">\n            {tasks.map((task: TaskFieldsFragment) => (\n              <div\n                key={task.id}\n                className=\"flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors\"\n              >\n                <div className=\"flex items-center gap-3\">\n                  <CheckSquare\n                    className={`h-5 w-5 ${task.status === \"done\" ? \"text-status-success-text\" : \"text-text-secondary\"}`}\n                  />\n                  <div>\n                    <p\n                      className={`text-sm font-medium ${task.status === \"done\" ? \"text-text-secondary line-through\" : \"text-text-primary\"}`}\n                    >\n                      {task.title}\n                    </p>\n                    <p className=\"text-xs text-text-secondary\">\n                      {task.assigneeId ?? \"Unassigned\"} &middot;{\" \"}\n                      {task.trackedHours}h tracked\n                    </p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span\n                    className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getPriorityColor(task.priority)}`}\n                  >\n                    {task.priority}\n                  </span>\n                  <span\n                    className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${getStatusColor(task.status)}`}\n                  >\n                    {task.status}\n                  </span>\n                </div>\n              </div>\n            ))}\n            {tasks.length === 0 && (\n              <div className=\"p-8 text-center text-sm text-text-secondary\">\n                No tasks yet. Add a task to get started.\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,IAAY;CAC1B,IAAM,EAAE,iBAAc,GAAkC,EAElD,EAAE,SAAM,YAAS,aAAU,EAAkB;EACjD,WAAW,EAAa,cAAY;EACpC,MAAM,CAAC;EACR,CAAC,EAEI,IAAQ,GAAM,OAAO,SAAS,EAAE;AAYtC,QAVI,IAEA,kBAAC,GAAD;EAAY,OAAM;EAAQ,aAAa,qBAAqB;YAC1D,kBAAC,OAAD;GAAK,WAAU;aAAoG;GAE7G,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,qBAAqB;EAClC,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,WAErB;;YAGV,IACC,kBAAC,GAAD;GAAiB,SAAQ;GAAO,OAAO;GAAK,CAAA,GAE5C,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAM,KAAK,MACV,kBAAC,OAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EACE,WAAW,WAAW,EAAK,WAAW,SAAS,6BAA6B,yBAC5E,CAAA,EACF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;OACE,WAAW,uBAAuB,EAAK,WAAW,SAAS,qCAAqC;iBAE/F,EAAK;OACJ,CAAA,EACJ,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,EAAK,cAAc;QAAa;QAAU;QAC1C,EAAK;QAAa;QACjB;SACA,EAAA,CAAA,CACF;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OACE,WAAW,4DAA4D,EAAiB,EAAK,SAAS;iBAErG,EAAK;OACD,CAAA,EACP,kBAAC,QAAD;OACE,WAAW,4DAA4D,EAAe,EAAK,OAAO;iBAEjG,EAAK;OACD,CAAA,CACH;QACF;OA/BC,EAAK,GA+BN,CACN,EACD,EAAM,WAAW,KAChB,kBAAC,OAAD;KAAK,WAAU;eAA8C;KAEvD,CAAA,CAEJ;;GACF,CAAA;EAEG,CAAA"}

package/dist/timecampus/pages/resource-planning/ResourcePlanningPage.js

@@ -1,60 +1,60 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
 import { getInitials as t } from "../../utils/helpers.js";
-import { PageLayout as n } from "../../components/PageLayout.js";
-import { StatCard as r } from "../../components/StatCard.js";
-import { LoadingSkeleton as i } from "../../components/LoadingSkeleton.js";
-import { useGetCapacityOverviewQuery as a, useListResourcePlansQuery as o } from "../../../generated/wspace-operations.js";
+import { StatCard as n } from "../../components/StatCard.js";
+import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
+import { useGetCapacityOverviewQuery as i, useListResourcePlansQuery as a } from "../../../generated/wspace-operations.js";
+import { PageLayout as o } from "../../components/PageLayout.js";
 import { CalendarRange as s, TrendingUp as c, Users as l } from "lucide-react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/timecampus/pages/resource-planning/ResourcePlanningPage.tsx
 function f() {
-	let { workspaceId: f = "" } = e(), p = /* @__PURE__ */ new Date(), m = new Date(p.getFullYear(), p.getMonth(), p.getDate()).toISOString(), h = new Date(p.getFullYear(), p.getMonth(), p.getDate() + 7).toISOString(), { data: g, loading: _, error: v } = o(), { data: y } = a({ variables: {
+	let { workspaceId: f = "" } = e(), p = /* @__PURE__ */ new Date(), m = new Date(p.getFullYear(), p.getMonth(), p.getDate()).toISOString(), h = new Date(p.getFullYear(), p.getMonth(), p.getDate() + 7).toISOString(), { data: g, loading: _, error: v } = a(), { data: y } = i({ variables: {
 		startDate: m,
 		endDate: h
 	} }), b = g?.resourcePlans?.items ?? [], x = y?.capacityOverview, S = b.flatMap((e) => e.allocations.map((t) => ({
 		...t,
 		planName: e.name
 	})));
-	if (_) return /* @__PURE__ */ u(n, {
+	if (_) return /* @__PURE__ */ u(o, {
 		title: "Resource Planning",
 		description: "Plan and optimize team resource allocation",
-		children: /* @__PURE__ */ u(i, {
+		children: /* @__PURE__ */ u(r, {
 			variant: "list",
 			count: 5
 		})
 	});
-	if (v) return /* @__PURE__ */ u(n, {
+	if (v) return /* @__PURE__ */ u(o, {
 		title: "Resource Planning",
 		description: "Plan and optimize team resource allocation",
 		children: /* @__PURE__ */ u("div", {
-			className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400",
+			className: "rounded-lg border border-status-error-bg/40 bg-status-error-bg p-4 text-sm text-status-error-text",
 			children: "Failed to load resource planning data. Please try again later."
 		})
 	});
 	let C = x?.utilizationRate ?? 0, w = x?.overallocatedUsers?.length ?? 0, T = x?.availableCapacity ?? 0;
-	return /* @__PURE__ */ d(n, {
+	return /* @__PURE__ */ d(o, {
 		title: "Resource Planning",
 		description: "Plan and optimize team resource allocation",
 		children: [/* @__PURE__ */ d("div", {
 			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 			children: [
-				/* @__PURE__ */ u(r, {
+				/* @__PURE__ */ u(n, {
 					title: "Team Utilization",
 					value: `${Math.round(C)}%`,
 					icon: /* @__PURE__ */ u(c, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ u(r, {
+				/* @__PURE__ */ u(n, {
 					title: "Over-allocated",
 					value: String(w),
 					icon: /* @__PURE__ */ u(l, { className: "h-5 w-5" }),
-					iconBgColor: "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
+					iconBgColor: "bg-status-error-bg text-status-error-text"
 				}),
-				/* @__PURE__ */ u(r, {
+				/* @__PURE__ */ u(n, {
 					title: "Active Plans",
 					value: String(b.length),
 					icon: /* @__PURE__ */ u(l, { className: "h-5 w-5" })
 				}),
-				/* @__PURE__ */ u(r, {
+				/* @__PURE__ */ u(n, {
 					title: "Available Capacity",
 					value: `${Math.round(T)}h`,
 					icon: /* @__PURE__ */ u(s, { className: "h-5 w-5" }),
@@ -62,26 +62,26 @@ function f() {
 				})
 			]
 		}), /* @__PURE__ */ u("div", {
-			className: "rounded-xl border border-border bg-card",
+			className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
 			children: /* @__PURE__ */ u("div", {
 				className: "divide-y divide-border",
 				children: S.length === 0 ? /* @__PURE__ */ u("div", {
-					className: "p-8 text-center text-sm text-muted-foreground",
+					className: "p-8 text-center text-sm text-text-secondary",
 					children: "No resource allocations found. Create a resource plan to start allocating team members."
 				}) : S.map((e) => {
 					let n = e.utilizationRate ?? (e.allocatedHours > 0 ? Math.round(e.actualHours / e.allocatedHours * 100) : 0);
 					return /* @__PURE__ */ d("div", {
-						className: "flex items-center justify-between p-4 hover:bg-muted/50 transition-colors",
+						className: "flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors",
 						children: [/* @__PURE__ */ d("div", {
 							className: "flex items-center gap-3",
 							children: [/* @__PURE__ */ u("div", {
-								className: "flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary",
+								className: "flex h-9 w-9 items-center justify-center rounded-full bg-action-primary-bg/10 text-sm font-medium text-primary",
 								children: t(e.userId)
 							}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
-								className: "text-sm font-medium text-foreground",
+								className: "text-sm font-medium text-text-primary",
 								children: e.userId
 							}), /* @__PURE__ */ d("p", {
-								className: "text-xs text-muted-foreground",
+								className: "text-xs text-text-secondary",
 								children: [
 									e.planName,
 									" ·",
@@ -97,7 +97,7 @@ function f() {
 							children: [/* @__PURE__ */ u("div", {
 								className: "text-right",
 								children: /* @__PURE__ */ d("p", {
-									className: "text-sm font-medium text-foreground",
+									className: "text-sm font-medium text-text-primary",
 									children: [e.allocatedHours, "h allocated"]
 								})
 							}), /* @__PURE__ */ d("div", {
@@ -105,13 +105,13 @@ function f() {
 								children: [/* @__PURE__ */ u("div", {
 									className: "flex items-center justify-between text-xs mb-0.5",
 									children: /* @__PURE__ */ d("span", {
-										className: `font-medium ${n > 100 ? "text-red-500" : n < 70 ? "text-amber-500" : "text-emerald-500"}`,
+										className: `font-medium ${n > 100 ? "text-status-error-text" : n < 70 ? "text-status-warning-text" : "text-status-success-text"}`,
 										children: [n, "%"]
 									})
 								}), /* @__PURE__ */ u("div", {
-									className: "h-2 rounded-full bg-muted",
+									className: "h-2 rounded-full bg-bg-sunken",
 									children: /* @__PURE__ */ u("div", {
-										className: `h-2 rounded-full ${n > 100 ? "bg-red-500" : n < 70 ? "bg-amber-500" : "bg-emerald-500"}`,
+										className: `h-2 rounded-full ${n > 100 ? "bg-status-error-text" : n < 70 ? "bg-status-warning-text" : "bg-status-success-text"}`,
 										style: { width: `${Math.min(n, 100)}%` }
 									})
 								})]

package/dist/timecampus/pages/resource-planning/ResourcePlanningPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourcePlanningPage.js","names":[],"sources":["../../../../src/timecampus/pages/resource-planning/ResourcePlanningPage.tsx"],"sourcesContent":["import { CalendarRange, Users, TrendingUp } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { getStatusColor, getInitials } from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListResourcePlansQuery,\n  useGetCapacityOverviewQuery,\n  type ResourcePlanFieldsFragment,\n  type ResourceAllocationFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function ResourcePlanningPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const now = new Date();\n  const startDate = new Date(\n    now.getFullYear(),\n    now.getMonth(),\n    now.getDate(),\n  ).toISOString();\n  const endDate = new Date(\n    now.getFullYear(),\n    now.getMonth(),\n    now.getDate() + 7,\n  ).toISOString();\n\n  const {\n    data: plansData,\n    loading: plansLoading,\n    error: plansError,\n  } = useListResourcePlansQuery();\n  const { data: capacityData } = useGetCapacityOverviewQuery({\n    variables: { startDate, endDate },\n  });\n\n  const plans = plansData?.resourcePlans?.items ?? [];\n  const capacity = capacityData?.capacityOverview;\n\n  // Flatten all allocations across plans for display\n  const allocations = plans.flatMap((plan: ResourcePlanFieldsFragment) =>\n    plan.allocations.map((alloc: ResourceAllocationFieldsFragment) => ({\n      ...alloc,\n      planName: plan.name,\n    })),\n  );\n\n  if (plansLoading) {\n    return (\n      <PageLayout\n        title=\"Resource Planning\"\n        description=\"Plan and optimize team resource allocation\"\n      >\n        <LoadingSkeleton variant=\"list\" count={5} />\n      </PageLayout>\n    );\n  }\n\n  if (plansError) {\n    return (\n      <PageLayout\n        title=\"Resource Planning\"\n        description=\"Plan and optimize team resource allocation\"\n      >\n        <div className=\"rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400\">\n          Failed to load resource planning data. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const utilizationRate = capacity?.utilizationRate ?? 0;\n  const overallocatedCount = capacity?.overallocatedUsers?.length ?? 0;\n  const availableHours = capacity?.availableCapacity ?? 0;\n\n  return (\n    <PageLayout\n      title=\"Resource Planning\"\n      description=\"Plan and optimize team resource allocation\"\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          title=\"Team Utilization\"\n          value={`${Math.round(utilizationRate)}%`}\n          icon={<TrendingUp className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Over-allocated\"\n          value={String(overallocatedCount)}\n          icon={<Users className=\"h-5 w-5\" />}\n          iconBgColor=\"bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400\"\n        />\n        <StatCard\n          title=\"Active Plans\"\n          value={String(plans.length)}\n          icon={<Users className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Available Capacity\"\n          value={`${Math.round(availableHours)}h`}\n          icon={<CalendarRange className=\"h-5 w-5\" />}\n          description=\"This week\"\n        />\n      </div>\n\n      <div className=\"rounded-xl border border-border bg-card\">\n        <div className=\"divide-y divide-border\">\n          {allocations.length === 0 ? (\n            <div className=\"p-8 text-center text-sm text-muted-foreground\">\n              No resource allocations found. Create a resource plan to start\n              allocating team members.\n            </div>\n          ) : (\n            allocations.map(\n              (\n                alloc: ResourceAllocationFieldsFragment & { planName: string },\n              ) => {\n                const utilization =\n                  alloc.utilizationRate ??\n                  (alloc.allocatedHours > 0\n                    ? Math.round(\n                        (alloc.actualHours / alloc.allocatedHours) * 100,\n                      )\n                    : 0);\n                return (\n                  <div\n                    key={alloc.id}\n                    className=\"flex items-center justify-between p-4 hover:bg-muted/50 transition-colors\"\n                  >\n                    <div className=\"flex items-center gap-3\">\n                      <div className=\"flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary\">\n                        {getInitials(alloc.userId)}\n                      </div>\n                      <div>\n                        <p className=\"text-sm font-medium text-foreground\">\n                          {alloc.userId}\n                        </p>\n                        <p className=\"text-xs text-muted-foreground\">\n                          {alloc.planName} &middot;{\" \"}\n                          {alloc.startDate.slice(0, 10)} to{\" \"}\n                          {alloc.endDate.slice(0, 10)}\n                        </p>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-4\">\n                      <div className=\"text-right\">\n                        <p className=\"text-sm font-medium text-foreground\">\n                          {alloc.allocatedHours}h allocated\n                        </p>\n                      </div>\n                      <div className=\"w-24\">\n                        <div className=\"flex items-center justify-between text-xs mb-0.5\">\n                          <span\n                            className={`font-medium ${utilization > 100 ? \"text-red-500\" : utilization < 70 ? \"text-amber-500\" : \"text-emerald-500\"}`}\n                          >\n                            {utilization}%\n                          </span>\n                        </div>\n                        <div className=\"h-2 rounded-full bg-muted\">\n                          <div\n                            className={`h-2 rounded-full ${utilization > 100 ? \"bg-red-500\" : utilization < 70 ? \"bg-amber-500\" : \"bg-emerald-500\"}`}\n                            style={{ width: `${Math.min(utilization, 100)}%` }}\n                          />\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                );\n              },\n            )\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ResourcePlanningPage.js","names":[],"sources":["../../../../src/timecampus/pages/resource-planning/ResourcePlanningPage.tsx"],"sourcesContent":["import { CalendarRange, Users, TrendingUp } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { getStatusColor, getInitials } from \"../../utils/helpers\";\nimport { useTimeCampus } from \"../../providers/TimeCampusProvider\";\nimport {\n  useListResourcePlansQuery,\n  useGetCapacityOverviewQuery,\n  type ResourcePlanFieldsFragment,\n  type ResourceAllocationFieldsFragment,\n} from \"@/generated/wspace-operations\";\n\nexport function ResourcePlanningPage() {\n  const { workspaceId = \"\" } = useTimeCampus();\n\n  const now = new Date();\n  const startDate = new Date(\n    now.getFullYear(),\n    now.getMonth(),\n    now.getDate(),\n  ).toISOString();\n  const endDate = new Date(\n    now.getFullYear(),\n    now.getMonth(),\n    now.getDate() + 7,\n  ).toISOString();\n\n  const {\n    data: plansData,\n    loading: plansLoading,\n    error: plansError,\n  } = useListResourcePlansQuery();\n  const { data: capacityData } = useGetCapacityOverviewQuery({\n    variables: { startDate, endDate },\n  });\n\n  const plans = plansData?.resourcePlans?.items ?? [];\n  const capacity = capacityData?.capacityOverview;\n\n  // Flatten all allocations across plans for display\n  const allocations = plans.flatMap((plan: ResourcePlanFieldsFragment) =>\n    plan.allocations.map((alloc: ResourceAllocationFieldsFragment) => ({\n      ...alloc,\n      planName: plan.name,\n    })),\n  );\n\n  if (plansLoading) {\n    return (\n      <PageLayout\n        title=\"Resource Planning\"\n        description=\"Plan and optimize team resource allocation\"\n      >\n        <LoadingSkeleton variant=\"list\" count={5} />\n      </PageLayout>\n    );\n  }\n\n  if (plansError) {\n    return (\n      <PageLayout\n        title=\"Resource Planning\"\n        description=\"Plan and optimize team resource allocation\"\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 resource planning data. Please try again later.\n        </div>\n      </PageLayout>\n    );\n  }\n\n  const utilizationRate = capacity?.utilizationRate ?? 0;\n  const overallocatedCount = capacity?.overallocatedUsers?.length ?? 0;\n  const availableHours = capacity?.availableCapacity ?? 0;\n\n  return (\n    <PageLayout\n      title=\"Resource Planning\"\n      description=\"Plan and optimize team resource allocation\"\n    >\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <StatCard\n          title=\"Team Utilization\"\n          value={`${Math.round(utilizationRate)}%`}\n          icon={<TrendingUp className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Over-allocated\"\n          value={String(overallocatedCount)}\n          icon={<Users className=\"h-5 w-5\" />}\n          iconBgColor=\"bg-status-error-bg text-status-error-text\"\n        />\n        <StatCard\n          title=\"Active Plans\"\n          value={String(plans.length)}\n          icon={<Users className=\"h-5 w-5\" />}\n        />\n        <StatCard\n          title=\"Available Capacity\"\n          value={`${Math.round(availableHours)}h`}\n          icon={<CalendarRange className=\"h-5 w-5\" />}\n          description=\"This week\"\n        />\n      </div>\n\n      <div className=\"rounded-xl border border-border-seam bg-gloss-card shadow-pop\">\n        <div className=\"divide-y divide-border\">\n          {allocations.length === 0 ? (\n            <div className=\"p-8 text-center text-sm text-text-secondary\">\n              No resource allocations found. Create a resource plan to start\n              allocating team members.\n            </div>\n          ) : (\n            allocations.map(\n              (\n                alloc: ResourceAllocationFieldsFragment & { planName: string },\n              ) => {\n                const utilization =\n                  alloc.utilizationRate ??\n                  (alloc.allocatedHours > 0\n                    ? Math.round(\n                        (alloc.actualHours / alloc.allocatedHours) * 100,\n                      )\n                    : 0);\n                return (\n                  <div\n                    key={alloc.id}\n                    className=\"flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors\"\n                  >\n                    <div className=\"flex items-center gap-3\">\n                      <div className=\"flex h-9 w-9 items-center justify-center rounded-full bg-action-primary-bg/10 text-sm font-medium text-primary\">\n                        {getInitials(alloc.userId)}\n                      </div>\n                      <div>\n                        <p className=\"text-sm font-medium text-text-primary\">\n                          {alloc.userId}\n                        </p>\n                        <p className=\"text-xs text-text-secondary\">\n                          {alloc.planName} &middot;{\" \"}\n                          {alloc.startDate.slice(0, 10)} to{\" \"}\n                          {alloc.endDate.slice(0, 10)}\n                        </p>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-4\">\n                      <div className=\"text-right\">\n                        <p className=\"text-sm font-medium text-text-primary\">\n                          {alloc.allocatedHours}h allocated\n                        </p>\n                      </div>\n                      <div className=\"w-24\">\n                        <div className=\"flex items-center justify-between text-xs mb-0.5\">\n                          <span\n                            className={`font-medium ${utilization > 100 ? \"text-status-error-text\" : utilization < 70 ? \"text-status-warning-text\" : \"text-status-success-text\"}`}\n                          >\n                            {utilization}%\n                          </span>\n                        </div>\n                        <div className=\"h-2 rounded-full bg-bg-sunken\">\n                          <div\n                            className={`h-2 rounded-full ${utilization > 100 ? \"bg-status-error-text\" : utilization < 70 ? \"bg-status-warning-text\" : \"bg-status-success-text\"}`}\n                            style={{ width: `${Math.min(utilization, 100)}%` }}\n                          />\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                );\n              },\n            )\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}