@burdenoff/microfe-timecampus 2026.625.1 → 2026.626.2

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

@@ -3,19 +3,23 @@ import { PageLayout as t } from "../../components/PageLayout.js";
 import { useState as n } from "react";
 import { ArrowLeft as r } from "lucide-react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { GlassCard as o } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/pages/projects/ProjectCreatePage.tsx
-function o() {
-	let [o, s] = n(""), [c, l] = n(""), [u, d] = n(""), [f, p] = n(""), [m, h] = n(""), [g, { loading: _, error: v }] = e();
+function s() {
+	let [s, c] = n(""), [l, u] = n(""), [d, f] = n(""), [p, m] = n(""), [h, g] = n(""), [_, { loading: v, error: y }] = e();
 	return /* @__PURE__ */ i(t, {
 		title: "Create Project",
 		description: "Set up a new project for time tracking",
+		purpose: "Define a new project — its client, estimate and rate — so the time your team logs against it rolls up into accurate progress and billing from day one.",
 		actions: /* @__PURE__ */ a("button", {
 			className: "inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
 			children: [/* @__PURE__ */ i(r, { className: "h-4 w-4" }), "Back to Projects"]
 		}),
-		children: /* @__PURE__ */ a("div", {
-			className: "mx-auto max-w-2xl rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
-			children: [v && /* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ a(o, {
+			treatment: "glass",
+			glow: !0,
+			className: "mx-auto max-w-2xl p-6",
+			children: [y && /* @__PURE__ */ i("div", {
 				className: "mb-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text",
 				children: "Failed to create project. Please try again."
 			}), /* @__PURE__ */ a("div", {
@@ -27,8 +31,8 @@ function o() {
 					}), /* @__PURE__ */ i("input", {
 						type: "text",
 						placeholder: "Enter project name",
-						value: o,
-						onChange: (e) => s(e.target.value),
+						value: s,
+						onChange: (e) => c(e.target.value),
 						className: "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary"
 					})] }),
 					/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
@@ -37,8 +41,8 @@ function o() {
 					}), /* @__PURE__ */ i("input", {
 						type: "text",
 						placeholder: "Client name",
-						value: c,
-						onChange: (e) => l(e.target.value),
+						value: l,
+						onChange: (e) => u(e.target.value),
 						className: "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary"
 					})] }),
 					/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
@@ -47,8 +51,8 @@ function o() {
 					}), /* @__PURE__ */ i("textarea", {
 						placeholder: "Project description",
 						rows: 3,
-						value: u,
-						onChange: (e) => d(e.target.value),
+						value: d,
+						onChange: (e) => f(e.target.value),
 						className: "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary"
 					})] }),
 					/* @__PURE__ */ a("div", {
@@ -59,8 +63,8 @@ function o() {
 						}), /* @__PURE__ */ i("input", {
 							type: "number",
 							placeholder: "0",
-							value: f,
-							onChange: (e) => p(e.target.value),
+							value: p,
+							onChange: (e) => m(e.target.value),
 							className: "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 						})] }), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
 							className: "block text-sm font-medium text-text-primary",
@@ -68,8 +72,8 @@ function o() {
 						}), /* @__PURE__ */ i("input", {
 							type: "number",
 							placeholder: "0.00",
-							value: m,
-							onChange: (e) => h(e.target.value),
+							value: h,
+							onChange: (e) => g(e.target.value),
 							className: "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 						})] })]
 					}),
@@ -80,17 +84,17 @@ function o() {
 							children: "Cancel"
 						}), /* @__PURE__ */ i("button", {
 							onClick: async () => {
-								o.trim() && await g({ variables: { input: {
-									name: o.trim(),
-									description: u.trim() || void 0,
-									clientId: c.trim() || void 0,
-									estimatedHours: f ? Number(f) : void 0,
-									hourlyRate: m ? Number(m) : void 0
+								s.trim() && await _({ variables: { input: {
+									name: s.trim(),
+									description: d.trim() || void 0,
+									clientId: l.trim() || void 0,
+									estimatedHours: p ? Number(p) : void 0,
+									hourlyRate: h ? Number(h) : void 0
 								} } });
 							},
-							disabled: _ || !o.trim(),
+							disabled: v || !s.trim(),
 							className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
-							children: _ ? "Creating..." : "Create Project"
+							children: v ? "Creating..." : "Create Project"
 						})]
 					})
 				]
@@ -99,6 +103,6 @@ function o() {
 	});
 }
 //#endregion
-export { o as ProjectCreatePage };
+export { s as ProjectCreatePage };
 
 //# sourceMappingURL=ProjectCreatePage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProjectCreatePage.js","names":[],"sources":["../../../../src/timecampus/pages/projects/ProjectCreatePage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { useCreateProjectMutation } from \"@/generated/wspace-operations\";\n\nexport function ProjectCreatePage() {\n  const [name, setName] = useState(\"\");\n  const [clientId, setClientId] = useState(\"\");\n  const [description, setDescription] = useState(\"\");\n  const [estimatedHours, setEstimatedHours] = useState(\"\");\n  const [hourlyRate, setHourlyRate] = useState(\"\");\n\n  const [createProject, { loading: creating, error }] =\n    useCreateProjectMutation();\n\n  const handleSubmit = async () => {\n    if (!name.trim()) return;\n    await createProject({\n      variables: {\n        input: {\n          name: name.trim(),\n          description: description.trim() || undefined,\n          clientId: clientId.trim() || undefined,\n          estimatedHours: estimatedHours ? Number(estimatedHours) : undefined,\n          hourlyRate: hourlyRate ? Number(hourlyRate) : undefined,\n        },\n      },\n    });\n  };\n\n  return (\n    <PageLayout\n      title=\"Create Project\"\n      description=\"Set up a new project for time tracking\"\n      actions={\n        <button className=\"inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\">\n          <ArrowLeft className=\"h-4 w-4\" />\n          Back to Projects\n        </button>\n      }\n    >\n      <div className=\"mx-auto max-w-2xl rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6\">\n        {error && (\n          <div className=\"mb-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text\">\n            Failed to create project. Please try again.\n          </div>\n        )}\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Project Name\n            </label>\n            <input\n              type=\"text\"\n              placeholder=\"Enter project name\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Client\n            </label>\n            <input\n              type=\"text\"\n              placeholder=\"Client name\"\n              value={clientId}\n              onChange={(e) => setClientId(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Description\n            </label>\n            <textarea\n              placeholder=\"Project description\"\n              rows={3}\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary\">\n                Estimated Hours\n              </label>\n              <input\n                type=\"number\"\n                placeholder=\"0\"\n                value={estimatedHours}\n                onChange={(e) => setEstimatedHours(e.target.value)}\n                className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n              />\n            </div>\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary\">\n                Hourly Rate\n              </label>\n              <input\n                type=\"number\"\n                placeholder=\"0.00\"\n                value={hourlyRate}\n                onChange={(e) => setHourlyRate(e.target.value)}\n                className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n              />\n            </div>\n          </div>\n          <div className=\"flex justify-end gap-2 pt-4\">\n            <button className=\"rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\">\n              Cancel\n            </button>\n            <button\n              onClick={handleSubmit}\n              disabled={creating || !name.trim()}\n              className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {creating ? \"Creating...\" : \"Create Project\"}\n            </button>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;AAKA,SAAgB,IAAoB;CAClC,IAAM,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAU,KAAe,EAAS,GAAG,EACtC,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAgB,KAAqB,EAAS,GAAG,EAClD,CAAC,GAAY,KAAiB,EAAS,GAAG,EAE1C,CAAC,GAAe,EAAE,SAAS,GAAU,cACzC,GAA0B;AAiB5B,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,mBAE1B;;YAGX,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,KACC,kBAAC,OAAD;IAAK,WAAU;cAAyG;IAElH,CAAA,EAER,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBAA8C;MAEvD,CAAA,EACR,kBAAC,SAAD;MACE,MAAK;MACL,aAAY;MACZ,OAAO;MACP,WAAW,MAAM,EAAQ,EAAE,OAAO,MAAM;MACxC,WAAU;MACV,CAAA,CACE,EAAA,CAAA;KACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBAA8C;MAEvD,CAAA,EACR,kBAAC,SAAD;MACE,MAAK;MACL,aAAY;MACZ,OAAO;MACP,WAAW,MAAM,EAAY,EAAE,OAAO,MAAM;MAC5C,WAAU;MACV,CAAA,CACE,EAAA,CAAA;KACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBAA8C;MAEvD,CAAA,EACR,kBAAC,YAAD;MACE,aAAY;MACZ,MAAM;MACN,OAAO;MACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;MAC/C,WAAU;MACV,CAAA,CACE,EAAA,CAAA;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;OAAO,WAAU;iBAA8C;OAEvD,CAAA,EACR,kBAAC,SAAD;OACE,MAAK;OACL,aAAY;OACZ,OAAO;OACP,WAAW,MAAM,EAAkB,EAAE,OAAO,MAAM;OAClD,WAAU;OACV,CAAA,CACE,EAAA,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;OAAO,WAAU;iBAA8C;OAEvD,CAAA,EACR,kBAAC,SAAD;OACE,MAAK;OACL,aAAY;OACZ,OAAO;OACP,WAAW,MAAM,EAAc,EAAE,OAAO,MAAM;OAC9C,WAAU;OACV,CAAA,CACE,EAAA,CAAA,CACF;;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OAAQ,WAAU;iBAA+G;OAExH,CAAA,EACT,kBAAC,UAAD;OACE,SApGS,YAAY;AAC1B,UAAK,MAAM,IAChB,MAAM,EAAc,EAClB,WAAW,EACT,OAAO;SACL,MAAM,EAAK,MAAM;SACjB,aAAa,EAAY,MAAM,IAAI,KAAA;SACnC,UAAU,EAAS,MAAM,IAAI,KAAA;SAC7B,gBAAgB,IAAiB,OAAO,EAAe,GAAG,KAAA;SAC1D,YAAY,IAAa,OAAO,EAAW,GAAG,KAAA;SAC/C,EACF,EACF,CAAC;;OAyFQ,UAAU,KAAY,CAAC,EAAK,MAAM;OAClC,WAAU;iBAET,IAAW,gBAAgB;OACrB,CAAA,CACL;;KACF;MACF;;EACK,CAAA"}
+{"version":3,"file":"ProjectCreatePage.js","names":[],"sources":["../../../../src/timecampus/pages/projects/ProjectCreatePage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ArrowLeft } from \"lucide-react\";\nimport { GlassCard } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { useCreateProjectMutation } from \"@/generated/wspace-operations\";\n\nexport function ProjectCreatePage() {\n  const [name, setName] = useState(\"\");\n  const [clientId, setClientId] = useState(\"\");\n  const [description, setDescription] = useState(\"\");\n  const [estimatedHours, setEstimatedHours] = useState(\"\");\n  const [hourlyRate, setHourlyRate] = useState(\"\");\n\n  const [createProject, { loading: creating, error }] =\n    useCreateProjectMutation();\n\n  const handleSubmit = async () => {\n    if (!name.trim()) return;\n    await createProject({\n      variables: {\n        input: {\n          name: name.trim(),\n          description: description.trim() || undefined,\n          clientId: clientId.trim() || undefined,\n          estimatedHours: estimatedHours ? Number(estimatedHours) : undefined,\n          hourlyRate: hourlyRate ? Number(hourlyRate) : undefined,\n        },\n      },\n    });\n  };\n\n  return (\n    <PageLayout\n      title=\"Create Project\"\n      description=\"Set up a new project for time tracking\"\n      purpose=\"Define a new project — its client, estimate and rate — so the time your team logs against it rolls up into accurate progress and billing from day one.\"\n      actions={\n        <button className=\"inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\">\n          <ArrowLeft className=\"h-4 w-4\" />\n          Back to Projects\n        </button>\n      }\n    >\n      <GlassCard treatment=\"glass\" glow className=\"mx-auto max-w-2xl p-6\">\n        {error && (\n          <div className=\"mb-4 rounded-lg border border-status-error-bg/40 bg-status-error-bg p-3 text-sm text-status-error-text\">\n            Failed to create project. Please try again.\n          </div>\n        )}\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Project Name\n            </label>\n            <input\n              type=\"text\"\n              placeholder=\"Enter project name\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Client\n            </label>\n            <input\n              type=\"text\"\n              placeholder=\"Client name\"\n              value={clientId}\n              onChange={(e) => setClientId(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-text-primary\">\n              Description\n            </label>\n            <textarea\n              placeholder=\"Project description\"\n              rows={3}\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary\"\n            />\n          </div>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary\">\n                Estimated Hours\n              </label>\n              <input\n                type=\"number\"\n                placeholder=\"0\"\n                value={estimatedHours}\n                onChange={(e) => setEstimatedHours(e.target.value)}\n                className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n              />\n            </div>\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary\">\n                Hourly Rate\n              </label>\n              <input\n                type=\"number\"\n                placeholder=\"0.00\"\n                value={hourlyRate}\n                onChange={(e) => setHourlyRate(e.target.value)}\n                className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n              />\n            </div>\n          </div>\n          <div className=\"flex justify-end gap-2 pt-4\">\n            <button className=\"rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50\">\n              Cancel\n            </button>\n            <button\n              onClick={handleSubmit}\n              disabled={creating || !name.trim()}\n              className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50\"\n            >\n              {creating ? \"Creating...\" : \"Create Project\"}\n            </button>\n          </div>\n        </div>\n      </GlassCard>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,IAAoB;CAClC,IAAM,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAU,KAAe,EAAS,GAAG,EACtC,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAgB,KAAqB,EAAS,GAAG,EAClD,CAAC,GAAY,KAAiB,EAAS,GAAG,EAE1C,CAAC,GAAe,EAAE,SAAS,GAAU,cACzC,GAA0B;AAiB5B,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SAAQ;EACR,SACE,kBAAC,UAAD;GAAQ,WAAU;aAAlB,CACE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,mBAE1B;;YAGX,kBAAC,GAAD;GAAW,WAAU;GAAQ,MAAA;GAAK,WAAU;aAA5C,CACG,KACC,kBAAC,OAAD;IAAK,WAAU;cAAyG;IAElH,CAAA,EAER,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBAA8C;MAEvD,CAAA,EACR,kBAAC,SAAD;MACE,MAAK;MACL,aAAY;MACZ,OAAO;MACP,WAAW,MAAM,EAAQ,EAAE,OAAO,MAAM;MACxC,WAAU;MACV,CAAA,CACE,EAAA,CAAA;KACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBAA8C;MAEvD,CAAA,EACR,kBAAC,SAAD;MACE,MAAK;MACL,aAAY;MACZ,OAAO;MACP,WAAW,MAAM,EAAY,EAAE,OAAO,MAAM;MAC5C,WAAU;MACV,CAAA,CACE,EAAA,CAAA;KACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBAA8C;MAEvD,CAAA,EACR,kBAAC,YAAD;MACE,aAAY;MACZ,MAAM;MACN,OAAO;MACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;MAC/C,WAAU;MACV,CAAA,CACE,EAAA,CAAA;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;OAAO,WAAU;iBAA8C;OAEvD,CAAA,EACR,kBAAC,SAAD;OACE,MAAK;OACL,aAAY;OACZ,OAAO;OACP,WAAW,MAAM,EAAkB,EAAE,OAAO,MAAM;OAClD,WAAU;OACV,CAAA,CACE,EAAA,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;OAAO,WAAU;iBAA8C;OAEvD,CAAA,EACR,kBAAC,SAAD;OACE,MAAK;OACL,aAAY;OACZ,OAAO;OACP,WAAW,MAAM,EAAc,EAAE,OAAO,MAAM;OAC9C,WAAU;OACV,CAAA,CACE,EAAA,CAAA,CACF;;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OAAQ,WAAU;iBAA+G;OAExH,CAAA,EACT,kBAAC,UAAD;OACE,SArGS,YAAY;AAC1B,UAAK,MAAM,IAChB,MAAM,EAAc,EAClB,WAAW,EACT,OAAO;SACL,MAAM,EAAK,MAAM;SACjB,aAAa,EAAY,MAAM,IAAI,KAAA;SACnC,UAAU,EAAS,MAAM,IAAI,KAAA;SAC7B,gBAAgB,IAAiB,OAAO,EAAe,GAAG,KAAA;SAC1D,YAAY,IAAa,OAAO,EAAW,GAAG,KAAA;SAC/C,EACF,EACF,CAAC;;OA0FQ,UAAU,KAAY,CAAC,EAAK,MAAM;OAClC,WAAU;iBAET,IAAW,gBAAgB;OACrB,CAAA,CACL;;KACF;MACI;;EACD,CAAA"}

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

@@ -1,91 +1,122 @@
-import { formatCurrency as e, formatHours as t } from "../../utils/helpers.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";
+import { useTimeCampusNavigate as e } from "../../providers/TimeCampusProvider.js";
+import { formatCurrency as t, formatHours as n } from "../../utils/helpers.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 { PageLayout as s } from "../../components/PageLayout.js";
+import { Clock as c, FolderOpen as l, TrendingUp as u, Users as d } from "lucide-react";
+import { useParams as f } from "react-router-dom";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { NextSteps as h } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/pages/projects/ProjectDetailPage.tsx
-function m() {
-	let { projectId: m } = d(), { data: h, loading: g, error: _ } = i({
-		variables: { id: m },
-		skip: !m
-	}), { data: v, loading: y } = a({
-		variables: { id: m },
-		skip: !m
-	}), b = h?.project, x = v?.projectStats;
-	return _ ? /* @__PURE__ */ f(o, {
+function g() {
+	let { projectId: g } = f(), _ = e(), { data: v, loading: y, error: b } = a({
+		variables: { id: g },
+		skip: !g
+	}), { data: x, loading: S } = o({
+		variables: { id: g },
+		skip: !g
+	}), C = v?.project, w = x?.projectStats;
+	return b ? /* @__PURE__ */ p(s, {
 		title: "Project Details",
-		description: `Project ID: ${m}`,
-		children: /* @__PURE__ */ f("div", {
+		description: `Project ID: ${g}`,
+		children: /* @__PURE__ */ p("div", {
 			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(o, {
+	}) : y || S ? /* @__PURE__ */ p(s, {
 		title: "Project Details",
-		description: `Project ID: ${m}`,
-		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(n, {
-					title: "Tracked Hours",
-					value: t(x?.totalHours ?? b?.trackedHours ?? 0),
-					icon: /* @__PURE__ */ f(s, { className: "h-5 w-5" })
-				}),
-				/* @__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(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(n, {
-					title: "Budget Used",
-					value: e(x?.budgetUsed ?? 0, b?.currency ?? "USD"),
-					icon: /* @__PURE__ */ f(c, { className: "h-5 w-5" }),
-					description: x?.budgetRemaining == null ? void 0 : `${e(x.budgetRemaining, b?.currency ?? "USD")} remaining`
-				})
-			]
-		}), /* @__PURE__ */ p("div", {
-			className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
-			children: [/* @__PURE__ */ p("div", {
-				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-text-primary",
-					children: "Recent Activity"
-				}), /* @__PURE__ */ f("div", {
-					className: "flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle",
-					children: /* @__PURE__ */ f("p", {
-						className: "text-sm text-text-secondary",
-						children: "Activity timeline will render here"
+		description: `Project ID: ${g}`,
+		children: /* @__PURE__ */ p(i, { variant: "detail" })
+	}) : /* @__PURE__ */ m(s, {
+		title: C?.name ?? "Project Details",
+		description: C?.description ?? `Project ID: ${g}`,
+		purpose: "See everything happening on this project in one place — logged hours, task progress and budget burn — so you know whether it's on track and where the time is going before it overruns.",
+		children: [
+			/* @__PURE__ */ p(h, {
+				storageKey: "timecampus-project-detail",
+				className: "mb-6",
+				steps: [
+					{
+						id: "log-time",
+						label: "Log time to this project",
+						description: "Start the timer or add a manual entry for this work.",
+						onClick: () => _("/time/timer")
+					},
+					{
+						id: "view-tasks",
+						label: "Review tasks",
+						description: "Break the project into trackable tasks.",
+						onClick: () => _(`/projects/${g ?? ""}/tasks`)
+					},
+					{
+						id: "open-reports",
+						label: "Open reports",
+						description: "Analyse this project's time and budget over time.",
+						onClick: () => _("/reports")
+					}
+				]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ p(r, {
+						featured: !0,
+						title: "Tracked Hours",
+						value: n(w?.totalHours ?? C?.trackedHours ?? 0),
+						icon: /* @__PURE__ */ p(c, { className: "h-5 w-5" })
+					}),
+					/* @__PURE__ */ p(r, {
+						title: "Tasks",
+						value: `${w?.completedTasks ?? 0} / ${w?.totalTasks ?? 0}`,
+						icon: /* @__PURE__ */ p(d, { className: "h-5 w-5" }),
+						description: "completed / total"
+					}),
+					/* @__PURE__ */ p(r, {
+						title: "Progress",
+						value: w?.totalTasks ? `${Math.round((w?.completedTasks ?? 0) / w.totalTasks * 100)}%` : "0%",
+						icon: /* @__PURE__ */ p(u, { className: "h-5 w-5" })
+					}),
+					/* @__PURE__ */ p(r, {
+						title: "Budget Used",
+						value: t(w?.budgetUsed ?? 0, C?.currency ?? "USD"),
+						icon: /* @__PURE__ */ p(l, { className: "h-5 w-5" }),
+						description: w?.budgetRemaining == null ? void 0 : `${t(w.budgetRemaining, C?.currency ?? "USD")} remaining`
 					})
+				]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
+				children: [/* @__PURE__ */ m("div", {
+					className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
+					children: [/* @__PURE__ */ p("h3", {
+						className: "mb-4 text-sm font-semibold text-text-primary",
+						children: "Recent Activity"
+					}), /* @__PURE__ */ p("div", {
+						className: "flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle",
+						children: /* @__PURE__ */ p("p", {
+							className: "text-sm text-text-secondary",
+							children: "Activity timeline will render here"
+						})
+					})]
+				}), /* @__PURE__ */ m("div", {
+					className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop p-6",
+					children: [/* @__PURE__ */ p("h3", {
+						className: "mb-4 text-sm font-semibold text-text-primary",
+						children: "Time Distribution"
+					}), /* @__PURE__ */ p("div", {
+						className: "flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle",
+						children: /* @__PURE__ */ p("p", {
+							className: "text-sm text-text-secondary",
+							children: "Chart will render here"
+						})
+					})]
 				})]
-			}), /* @__PURE__ */ p("div", {
-				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-text-primary",
-					children: "Time Distribution"
-				}), /* @__PURE__ */ f("div", {
-					className: "flex h-48 items-center justify-center rounded-lg border border-dashed border-border-subtle",
-					children: /* @__PURE__ */ f("p", {
-						className: "text-sm text-text-secondary",
-						children: "Chart will render here"
-					})
-				})]
-			})]
-		})]
+			})
+		]
 	});
 }
 //#endregion
-export { m as ProjectDetailPage };
+export { g as ProjectDetailPage };
 
 //# sourceMappingURL=ProjectDetailPage.js.map

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-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"}
+{"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 { NextSteps } from \"@burdenoff/fe-libs/ui\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { StatCard } from \"../../components/StatCard\";\nimport { LoadingSkeleton } from \"../../components/LoadingSkeleton\";\nimport { useTimeCampusNavigate } from \"../../providers/TimeCampusProvider\";\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  const navigate = useTimeCampusNavigate();\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      purpose=\"See everything happening on this project in one place — logged hours, task progress and budget burn — so you know whether it's on track and where the time is going before it overruns.\"\n    >\n      <NextSteps\n        storageKey=\"timecampus-project-detail\"\n        className=\"mb-6\"\n        steps={[\n          {\n            id: \"log-time\",\n            label: \"Log time to this project\",\n            description: \"Start the timer or add a manual entry for this work.\",\n            onClick: () => navigate(\"/time/timer\"),\n          },\n          {\n            id: \"view-tasks\",\n            label: \"Review tasks\",\n            description: \"Break the project into trackable tasks.\",\n            onClick: () => navigate(`/projects/${projectId ?? \"\"}/tasks`),\n          },\n          {\n            id: \"open-reports\",\n            label: \"Open reports\",\n            description: \"Analyse this project's time and budget over time.\",\n            onClick: () => navigate(\"/reports\"),\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=\"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":";;;;;;;;;;;AAaA,SAAgB,IAAoB;CAClC,IAAM,EAAE,iBAAc,GAAkC,EAClD,IAAW,GAAuB,EAElC,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;EACpD,SAAQ;YAHV;GAKE,kBAAC,GAAD;IACE,YAAW;IACX,WAAU;IACV,OAAO;KACL;MACE,IAAI;MACJ,OAAO;MACP,aAAa;MACb,eAAe,EAAS,cAAc;MACvC;KACD;MACE,IAAI;MACJ,OAAO;MACP,aAAa;MACb,eAAe,EAAS,aAAa,KAAa,GAAG,QAAQ;MAC9D;KACD;MACE,IAAI;MACJ,OAAO;MACP,aAAa;MACb,eAAe,EAAS,WAAW;MACpC;KACF;IACD,CAAA;GACF,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MACE,UAAA;MACA,OAAM;MACN,OAAO,EAAY,GAAO,cAAc,GAAS,gBAAgB,EAAE;MACnE,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;MACnC,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,GAAG,GAAO,kBAAkB,EAAE,KAAK,GAAO,cAAc;MAC/D,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;MACnC,aAAY;MACZ,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OACE,GAAO,aACH,GAAG,KAAK,OAAQ,GAAO,kBAAkB,KAAK,EAAM,aAAc,IAAI,CAAC,KACvE;MAEN,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;MACxC,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,EACL,GAAO,cAAc,GACrB,GAAS,YAAY,MACtB;MACD,MAAM,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;MACxC,aACE,GAAO,mBAAmB,OAEtB,KAAA,IADA,GAAG,EAAe,EAAM,iBAAiB,GAAS,YAAY,MAAM,CAAC;MAG3E,CAAA;KACE;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA+C;MAExD,CAAA,EACL,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBAA8B;OAEvC,CAAA;MACA,CAAA,CACF;QACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA+C;MAExD,CAAA,EACL,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,KAAD;OAAG,WAAU;iBAA8B;OAEvC,CAAA;MACA,CAAA,CACF;OACF;;GACK"}

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

@@ -2,7 +2,8 @@ import { formatHours as e, getStatusColor as t } from "../../utils/helpers.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 { EmptyState as a } from "../../components/EmptyState.js";
+import { 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";
 //#region src/timecampus/pages/projects/ProjectsPage.tsx
@@ -21,6 +22,7 @@ function u() {
 	}) : /* @__PURE__ */ s(i, {
 		title: d("timecampus.projects.title", "Projects"),
 		description: d("timecampus.projects.description", "Manage and track project time"),
+		purpose: d("timecampus.projects.purpose", "Group your work into projects so every hour you track rolls up to the right client and budget — use it to estimate effort, watch progress against the plan, and bill accurately."),
 		actions: /* @__PURE__ */ c("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__ */ s(o, { className: "h-4 w-4" }), d("timecampus.projects.actions.newProject", "New Project")]
@@ -28,12 +30,14 @@ function u() {
 		children: p ? /* @__PURE__ */ s(n, {
 			variant: "card",
 			count: 4
-		}) : h.length === 0 ? /* @__PURE__ */ c("div", {
-			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.")
-			})]
+		}) : h.length === 0 ? /* @__PURE__ */ s(a, {
+			illustration: "empty-generic",
+			title: d("timecampus.projects.empty.title", "No projects yet"),
+			description: d("timecampus.projects.empty", "No projects yet. Create your first project to get started."),
+			action: /* @__PURE__ */ c("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__ */ s(o, { className: "h-4 w-4" }), d("timecampus.projects.actions.newProject", "New Project")]
+			})
 		}) : /* @__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", {

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-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"}
+{"version":3,"file":"ProjectsPage.js","names":[],"sources":["../../../../src/timecampus/pages/projects/ProjectsPage.tsx"],"sourcesContent":["import { Plus } from \"lucide-react\";\nimport { PageLayout } from \"../../components/PageLayout\";\nimport { EmptyState } from \"../../components/EmptyState\";\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      purpose={t(\n        \"timecampus.projects.purpose\",\n        \"Group your work into projects so every hour you track rolls up to the right client and budget — use it to estimate effort, watch progress against the plan, and bill accurately.\",\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        <EmptyState\n          illustration=\"empty-generic\"\n          title={t(\"timecampus.projects.empty.title\", \"No projects yet\")}\n          description={t(\n            \"timecampus.projects.empty\",\n            \"No projects yet. Create your first project to get started.\",\n          )}\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              {t(\"timecampus.projects.actions.newProject\", \"New Project\")}\n            </button>\n          }\n        />\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":";;;;;;;;;AAaA,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,SAAS,EACP,+BACA,mLACD;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,GAAD;GACE,cAAa;GACb,OAAO,EAAE,mCAAmC,kBAAkB;GAC9D,aAAa,EACX,6BACA,6DACD;GACD,QACE,kBAAC,UAAD;IAAQ,WAAU;cAAlB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC3B,EAAE,0CAA0C,cAAc,CACpD;;GAEX,CAAA,GAEF,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

@@ -2,44 +2,57 @@ import { getPriorityColor as e, getStatusColor as t } from "../../utils/helpers.
 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";
+import { EmptyState as a } from "../../components/EmptyState.js";
+import { CheckSquare as o, Plus 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 { GlassCard as d } from "@burdenoff/fe-libs/ui";
 //#region src/timecampus/pages/projects/TasksPage.tsx
-function u() {
-	let { projectId: u } = s(), { data: d, loading: f, error: p } = r({
-		variables: { projectId: u },
-		skip: !u
-	}), m = d?.tasks?.items ?? [];
-	return p ? /* @__PURE__ */ c(i, {
+function f() {
+	let { projectId: f } = c(), { data: p, loading: m, error: h } = r({
+		variables: { projectId: f },
+		skip: !f
+	}), g = p?.tasks?.items ?? [];
+	return h ? /* @__PURE__ */ l(i, {
 		title: "Tasks",
-		description: `Tasks for project ${u}`,
-		children: /* @__PURE__ */ c("div", {
+		description: `Tasks for project ${f}`,
+		children: /* @__PURE__ */ l("div", {
 			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(i, {
+	}) : /* @__PURE__ */ l(i, {
 		title: "Tasks",
-		description: `Tasks for project ${u}`,
-		actions: /* @__PURE__ */ l("button", {
+		description: `Tasks for project ${f}`,
+		purpose: "Break a project down into the concrete pieces of work that need doing, then track hours against each one — so you can see what's done, what's blocking, and where effort is actually being spent.",
+		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" }), "Add Task"]
+			children: [/* @__PURE__ */ l(s, { className: "h-4 w-4" }), "Add Task"]
 		}),
-		children: f ? /* @__PURE__ */ c(n, {
+		children: m ? /* @__PURE__ */ l(n, {
 			variant: "list",
 			count: 5
-		}) : /* @__PURE__ */ c("div", {
-			className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
+		}) : g.length === 0 ? /* @__PURE__ */ l(a, {
+			illustration: "empty-generic",
+			title: "No tasks yet",
+			description: "Add a task to break this project into trackable work.",
+			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" }), "Add Task"]
+			})
+		}) : /* @__PURE__ */ l(d, {
+			treatment: "glass",
+			glow: !0,
+			className: "overflow-hidden",
 			children: /* @__PURE__ */ l("div", {
 				className: "divide-y divide-border",
-				children: [m.map((n) => /* @__PURE__ */ l("div", {
+				children: g.map((n) => /* @__PURE__ */ u("div", {
 					className: "flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors",
-					children: [/* @__PURE__ */ l("div", {
+					children: [/* @__PURE__ */ u("div", {
 						className: "flex items-center gap-3",
-						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", {
+						children: [/* @__PURE__ */ l(o, { className: `h-5 w-5 ${n.status === "done" ? "text-status-success-text" : "text-text-secondary"}` }), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
 							className: `text-sm font-medium ${n.status === "done" ? "text-text-secondary line-through" : "text-text-primary"}`,
 							children: n.title
-						}), /* @__PURE__ */ l("p", {
+						}), /* @__PURE__ */ u("p", {
 							className: "text-xs text-text-secondary",
 							children: [
 								n.assigneeId ?? "Unassigned",
@@ -49,25 +62,22 @@ function u() {
 								"h tracked"
 							]
 						})] })]
-					}), /* @__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 px-2 py-0.5 text-xs font-medium ${e(n.priority)}`,
 							children: n.priority
-						}), /* @__PURE__ */ c("span", {
+						}), /* @__PURE__ */ l("span", {
 							className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${t(n.status)}`,
 							children: n.status
 						})]
 					})]
-				}, n.id)), m.length === 0 && /* @__PURE__ */ c("div", {
-					className: "p-8 text-center text-sm text-text-secondary",
-					children: "No tasks yet. Add a task to get started."
-				})]
+				}, n.id))
 			})
 		})
 	});
 }
 //#endregion
-export { u as TasksPage };
+export { f as TasksPage };
 
 //# sourceMappingURL=TasksPage.js.map