@burdenoff/microfe-proserviceworld 2026.525.1 → 2026.625.1

package/dist/proserviceworld/pages/ProjectsPage.js

@@ -2,35 +2,35 @@ import { useProServiceWorldStore as e } from "../store/proserviceworldStore.js";
 import { useMemo as t, useState as n } from "react";
 import { AlertTriangle as r, BarChart3 as i, Calendar as a, CheckCircle2 as o, ChevronRight as s, Clock as c, DollarSign as l, Flag as u, Plus as d, Search as f, Tag as p, Target as m, Users as h } from "lucide-react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
-import { Badge as y, Button as b, Card as x, CardContent as S, CardHeader as C, CardTitle as w, Input as T } from "@burdenoff/fe-libs/ui";
+import { AuroraBackground as y, Badge as b, Button as x, Card as S, CardContent as C, CardHeader as w, CardTitle as T, GlassCard as E, GradientText as D, IllustratedEmptyState as O, Input as k } from "@burdenoff/fe-libs/ui";
 //#region src/proserviceworld/pages/ProjectsPage.tsx
-var E = {
+var A = {
 	planning: {
 		label: "Planning",
-		color: "text-yellow-600",
-		bgColor: "bg-yellow-100 dark:bg-yellow-950"
+		color: "text-status-warning-text",
+		dot: "bg-status-warning-text"
 	},
 	active: {
 		label: "Active",
-		color: "text-blue-600",
-		bgColor: "bg-blue-100 dark:bg-blue-950"
+		color: "text-accent-blue",
+		dot: "bg-accent-blue"
 	},
 	on_hold: {
 		label: "On Hold",
-		color: "text-orange-600",
-		bgColor: "bg-orange-100 dark:bg-orange-950"
+		color: "text-status-warning-text",
+		dot: "bg-status-warning-text"
 	},
 	completed: {
 		label: "Completed",
-		color: "text-green-600",
-		bgColor: "bg-green-100 dark:bg-green-950"
+		color: "text-status-success-text",
+		dot: "bg-status-success-text"
 	},
 	cancelled: {
 		label: "Cancelled",
-		color: "text-red-600",
-		bgColor: "bg-red-100 dark:bg-red-950"
+		color: "text-status-error-text",
+		dot: "bg-status-error-text"
 	}
-}, D = {
+}, j = {
 	low: {
 		label: "Low",
 		variant: "outline"
@@ -47,33 +47,46 @@ var E = {
 		label: "Critical",
 		variant: "destructive"
 	}
+}, M = {
+	completed: "bg-status-success-text",
+	in_progress: "bg-accent-blue",
+	pending: "bg-bg-sunken",
+	overdue: "bg-status-error-text"
+}, N = {
+	completed: "text-status-success-text",
+	in_progress: "text-accent-blue",
+	pending: "text-text-secondary",
+	overdue: "text-status-error-text"
 };
-function O() {
-	let { projects: O } = e(), [k, A] = n(""), [j, M] = n("all"), [N, P] = n(O[0]?.id ?? ""), [F, I] = n("overview"), L = t(() => {
-		let e = [...O];
-		if (j !== "all" && (e = e.filter((e) => e.status === j)), k.trim()) {
-			let t = k.toLowerCase();
+function P() {
+	let { projects: P } = e(), [F, I] = n(""), [L, R] = n("all"), [z, B] = n(P[0]?.id ?? ""), [V, H] = n("overview"), U = t(() => {
+		let e = [...P];
+		if (L !== "all" && (e = e.filter((e) => e.status === L)), F.trim()) {
+			let t = F.toLowerCase();
 			e = e.filter((e) => e.title.toLowerCase().includes(t) || e.category.toLowerCase().includes(t));
 		}
 		return e;
 	}, [
-		O,
-		j,
-		k
-	]), R = O.find((e) => e.id === N);
+		P,
+		L,
+		F
+	]), W = P.find((e) => e.id === z);
 	return /* @__PURE__ */ v("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
 		children: [/* @__PURE__ */ v("div", {
-			className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-			children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h1", {
-				className: "text-2xl font-semibold",
-				children: "Projects"
-			}), /* @__PURE__ */ _("p", {
-				className: "text-sm text-muted-foreground",
-				children: "Track progress and manage your professional service projects."
-			})] }), /* @__PURE__ */ v(b, {
-				size: "sm",
-				children: [/* @__PURE__ */ _(d, { className: "mr-2 h-4 w-4" }), " New Project"]
+			className: "relative overflow-hidden rounded-card -mx-2 px-2 pt-1",
+			children: [/* @__PURE__ */ _(y, { intensity: "subtle" }), /* @__PURE__ */ v("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h1", {
+					className: "text-2xl font-semibold tracking-tight",
+					children: /* @__PURE__ */ _(D, { children: "Projects" })
+				}), /* @__PURE__ */ _("p", {
+					className: "text-sm text-text-secondary",
+					children: "Track progress and manage your professional service projects."
+				})] }), /* @__PURE__ */ v(x, {
+					size: "sm",
+					children: [/* @__PURE__ */ _(d, { className: "mr-2 h-4 w-4" }), " New Project"]
+				})]
 			})]
 		}), /* @__PURE__ */ v("div", {
 			className: "grid gap-6 lg:grid-cols-3",
@@ -82,10 +95,11 @@ function O() {
 				children: [
 					/* @__PURE__ */ v("div", {
 						className: "relative",
-						children: [/* @__PURE__ */ _(f, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ _(T, {
+						children: [/* @__PURE__ */ _(f, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ _(k, {
 							placeholder: "Search projects...",
-							value: k,
-							onChange: (e) => A(e.target.value),
+							"aria-label": "Search projects",
+							value: F,
+							onChange: (e) => I(e.target.value),
 							className: "pl-10"
 						})]
 					}),
@@ -99,51 +113,57 @@ function O() {
 							"on_hold",
 							"cancelled"
 						].map((e) => /* @__PURE__ */ _("button", {
-							onClick: () => M(e),
-							className: `rounded px-2 py-1 text-xs font-medium transition-colors ${j === e ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"}`,
-							children: e === "all" ? "All" : E[e].label
+							onClick: () => R(e),
+							"aria-pressed": L === e,
+							className: `rounded px-2 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${L === e ? "bg-accent-blue text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"}`,
+							children: e === "all" ? "All" : A[e].label
 						}, e))
 					}),
 					/* @__PURE__ */ _("div", {
 						className: "space-y-2",
-						children: L.length === 0 ? /* @__PURE__ */ _("p", {
-							className: "py-8 text-center text-sm text-muted-foreground",
-							children: "No projects found."
-						}) : L.map((e) => {
-							let t = E[e.status];
+						children: U.length === 0 ? /* @__PURE__ */ _(O, {
+							illustration: F || L !== "all" ? "empty-search" : "empty-data",
+							title: "No projects found",
+							description: "Try adjusting your search or filters."
+						}) : U.map((e) => {
+							let t = A[e.status];
 							return /* @__PURE__ */ v("button", {
 								onClick: () => {
-									P(e.id), I("overview");
+									B(e.id), H("overview");
 								},
-								className: `w-full rounded-lg border p-3 text-left transition-colors ${N === e.id ? "border-primary bg-primary/5" : "hover:bg-muted/50"}`,
+								"aria-pressed": z === e.id,
+								className: `w-full rounded-lg border p-3 text-left transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${z === e.id ? "border-accent-blue bg-accent-blue-subtle" : "border-border-seam hover:shadow-pop"}`,
 								children: [
 									/* @__PURE__ */ v("div", {
 										className: "flex items-center justify-between",
 										children: [/* @__PURE__ */ _("h3", {
 											className: "font-medium text-sm truncate pr-2",
 											children: e.title
-										}), /* @__PURE__ */ _(s, { className: "h-4 w-4 shrink-0 text-muted-foreground" })]
+										}), /* @__PURE__ */ _(s, { className: "h-4 w-4 shrink-0 text-text-secondary" })]
 									}),
 									/* @__PURE__ */ v("div", {
 										className: "mt-2 flex items-center gap-2",
-										children: [/* @__PURE__ */ _(y, {
-											variant: D[e.priority].variant,
+										children: [/* @__PURE__ */ _(b, {
+											variant: j[e.priority].variant,
 											className: "text-xs",
 											children: e.priority
-										}), /* @__PURE__ */ _("span", {
-											className: `text-xs ${t.color}`,
-											children: t.label
+										}), /* @__PURE__ */ v("span", {
+											className: `flex items-center gap-1 text-xs ${t.color}`,
+											children: [/* @__PURE__ */ _("span", { className: `h-1.5 w-1.5 rounded-full ${t.dot} ${e.status === "active" ? "motion-safe:animate-vc-glow-pulse" : ""}` }), t.label]
 										})]
 									}),
 									/* @__PURE__ */ v("div", {
 										className: "mt-2",
 										children: [/* @__PURE__ */ v("div", {
-											className: "flex items-center justify-between text-xs text-muted-foreground",
-											children: [/* @__PURE__ */ _("span", { children: "Progress" }), /* @__PURE__ */ v("span", { children: [e.progress, "%"] })]
+											className: "flex items-center justify-between text-xs text-text-secondary",
+											children: [/* @__PURE__ */ _("span", { children: "Progress" }), /* @__PURE__ */ v("span", {
+												className: "tabular-nums",
+												children: [e.progress, "%"]
+											})]
 										}), /* @__PURE__ */ _("div", {
-											className: "mt-1 h-1.5 overflow-hidden rounded-full bg-muted",
+											className: "mt-1 h-1.5 overflow-hidden rounded-full bg-bg-sunken",
 											children: /* @__PURE__ */ _("div", {
-												className: "h-1.5 rounded-full bg-primary transition-all",
+												className: "h-1.5 rounded-full bg-accent-blue transition-all",
 												style: { width: `${e.progress}%` }
 											})
 										})]
@@ -155,123 +175,133 @@ function O() {
 				]
 			}), /* @__PURE__ */ _("div", {
 				className: "space-y-4 lg:col-span-2",
-				children: R ? /* @__PURE__ */ v(g, { children: [
-					/* @__PURE__ */ _(x, { children: /* @__PURE__ */ v(S, {
-						className: "pt-6",
-						children: [
-							/* @__PURE__ */ v("div", {
-								className: "flex flex-wrap items-start justify-between gap-4",
-								children: [/* @__PURE__ */ v("div", {
-									className: "space-y-2",
-									children: [
-										/* @__PURE__ */ v("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ v(y, {
-												variant: D[R.priority].variant,
-												children: [R.priority, " priority"]
-											}), /* @__PURE__ */ _("span", {
-												className: `text-sm font-medium ${E[R.status].color}`,
-												children: E[R.status].label
-											})]
-										}),
-										/* @__PURE__ */ _("h2", {
-											className: "text-xl font-bold",
-											children: R.title
-										}),
-										/* @__PURE__ */ _("p", {
-											className: "text-sm text-muted-foreground",
-											children: R.description
+				children: W ? /* @__PURE__ */ v(g, { children: [
+					/* @__PURE__ */ _(E, {
+						treatment: "insight",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ v(C, {
+							className: "pt-6",
+							children: [
+								/* @__PURE__ */ v("div", {
+									className: "flex flex-wrap items-start justify-between gap-4",
+									children: [/* @__PURE__ */ v("div", {
+										className: "space-y-2",
+										children: [
+											/* @__PURE__ */ v("div", {
+												className: "flex items-center gap-2",
+												children: [/* @__PURE__ */ v(b, {
+													variant: j[W.priority].variant,
+													children: [W.priority, " priority"]
+												}), /* @__PURE__ */ _("span", {
+													className: `text-sm font-medium ${A[W.status].color}`,
+													children: A[W.status].label
+												})]
+											}),
+											/* @__PURE__ */ _("h2", {
+												className: "text-xl font-bold tracking-tight",
+												children: W.title
+											}),
+											/* @__PURE__ */ _("p", {
+												className: "text-sm text-text-secondary",
+												children: W.description
+											})
+										]
+									}), /* @__PURE__ */ v("div", {
+										className: "text-right",
+										children: [
+											/* @__PURE__ */ _("p", {
+												className: "text-sm text-text-secondary",
+												children: "Budget"
+											}),
+											/* @__PURE__ */ v("p", {
+												className: "text-xl font-bold tabular-nums",
+												children: ["$", W.budget.toLocaleString()]
+											}),
+											/* @__PURE__ */ v("p", {
+												className: "text-xs text-text-secondary tabular-nums",
+												children: [
+													"Spent: $",
+													W.spent.toLocaleString(),
+													" (",
+													Math.round(W.spent / W.budget * 100),
+													"%)"
+												]
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "mt-4",
+									children: [/* @__PURE__ */ v("div", {
+										className: "flex items-center justify-between text-sm",
+										children: [/* @__PURE__ */ _("span", {
+											className: "text-text-secondary",
+											children: "Overall Progress"
+										}), /* @__PURE__ */ v("span", {
+											className: "font-medium tabular-nums",
+											children: [W.progress, "%"]
+										})]
+									}), /* @__PURE__ */ _("div", {
+										className: "mt-1 h-3 overflow-hidden rounded-full bg-bg-sunken",
+										children: /* @__PURE__ */ _("div", {
+											className: "h-3 rounded-full bg-accent-blue transition-all",
+											style: { width: `${W.progress}%` }
 										})
-									]
-								}), /* @__PURE__ */ v("div", {
-									className: "text-right",
+									})]
+								}),
+								/* @__PURE__ */ v("div", {
+									className: "mt-4 flex flex-wrap gap-4 text-sm",
 									children: [
-										/* @__PURE__ */ _("p", {
-											className: "text-sm text-muted-foreground",
-											children: "Budget"
+										/* @__PURE__ */ v("span", {
+											className: "flex items-center gap-1 text-text-secondary",
+											children: [
+												/* @__PURE__ */ _(a, { className: "h-4 w-4" }),
+												" ",
+												W.startDate,
+												" -",
+												" ",
+												W.endDate
+											]
 										}),
-										/* @__PURE__ */ v("p", {
-											className: "text-xl font-bold",
-											children: ["$", R.budget.toLocaleString()]
+										/* @__PURE__ */ v("span", {
+											className: "flex items-center gap-1 text-text-secondary",
+											children: [
+												/* @__PURE__ */ _(h, { className: "h-4 w-4" }),
+												/* @__PURE__ */ _("span", {
+													className: "tabular-nums",
+													children: W.teamMembers.length
+												}),
+												" ",
+												"members"
+											]
 										}),
-										/* @__PURE__ */ v("p", {
-											className: "text-xs text-muted-foreground",
+										/* @__PURE__ */ v("span", {
+											className: "flex items-center gap-1 text-text-secondary",
 											children: [
-												"Spent: $",
-												R.spent.toLocaleString(),
-												" (",
-												Math.round(R.spent / R.budget * 100),
-												"%)"
+												/* @__PURE__ */ _(m, { className: "h-4 w-4" }),
+												/* @__PURE__ */ _("span", {
+													className: "tabular-nums",
+													children: W.milestones.length
+												}),
+												" ",
+												"milestones"
 											]
 										})
 									]
-								})]
-							}),
-							/* @__PURE__ */ v("div", {
-								className: "mt-4",
-								children: [/* @__PURE__ */ v("div", {
-									className: "flex items-center justify-between text-sm",
-									children: [/* @__PURE__ */ _("span", {
-										className: "text-muted-foreground",
-										children: "Overall Progress"
-									}), /* @__PURE__ */ v("span", {
-										className: "font-medium",
-										children: [R.progress, "%"]
-									})]
-								}), /* @__PURE__ */ _("div", {
-									className: "mt-1 h-3 overflow-hidden rounded-full bg-muted",
-									children: /* @__PURE__ */ _("div", {
-										className: "h-3 rounded-full bg-primary transition-all",
-										style: { width: `${R.progress}%` }
-									})
-								})]
-							}),
-							/* @__PURE__ */ v("div", {
-								className: "mt-4 flex flex-wrap gap-4 text-sm",
-								children: [
-									/* @__PURE__ */ v("span", {
-										className: "flex items-center gap-1 text-muted-foreground",
-										children: [
-											/* @__PURE__ */ _(a, { className: "h-4 w-4" }),
-											" ",
-											R.startDate,
-											" -",
-											" ",
-											R.endDate
-										]
-									}),
-									/* @__PURE__ */ v("span", {
-										className: "flex items-center gap-1 text-muted-foreground",
-										children: [
-											/* @__PURE__ */ _(h, { className: "h-4 w-4" }),
-											" ",
-											R.teamMembers.length,
-											" members"
-										]
-									}),
-									/* @__PURE__ */ v("span", {
-										className: "flex items-center gap-1 text-muted-foreground",
-										children: [
-											/* @__PURE__ */ _(m, { className: "h-4 w-4" }),
-											" ",
-											R.milestones.length,
-											" milestones"
-										]
-									})
-								]
-							}),
-							R.tags.length > 0 && /* @__PURE__ */ v("div", {
-								className: "mt-3 flex items-center gap-2",
-								children: [/* @__PURE__ */ _(p, { className: "h-4 w-4 text-muted-foreground" }), R.tags.map((e) => /* @__PURE__ */ _(y, {
-									variant: "outline",
-									className: "text-xs",
-									children: e
-								}, e))]
-							})
-						]
-					}) }),
+								}),
+								W.tags.length > 0 && /* @__PURE__ */ v("div", {
+									className: "mt-3 flex flex-wrap items-center gap-2",
+									children: [/* @__PURE__ */ _(p, { className: "h-4 w-4 text-text-secondary" }), W.tags.map((e) => /* @__PURE__ */ _(b, {
+										variant: "outline",
+										className: "text-xs",
+										children: e
+									}, e))]
+								})
+							]
+						})
+					}),
 					/* @__PURE__ */ _("div", {
-						className: "flex gap-1 border-b",
+						className: "flex gap-1 border-b border-border-seam",
 						children: [
 							{
 								key: "overview",
@@ -290,100 +320,163 @@ function O() {
 								label: "Team"
 							}
 						].map(({ key: e, label: t }) => /* @__PURE__ */ _("button", {
-							onClick: () => I(e),
-							className: `border-b-2 px-4 py-2 text-sm font-medium transition-colors ${F === e ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+							onClick: () => H(e),
+							"aria-pressed": V === e,
+							className: `border-b-2 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${V === e ? "border-accent-blue text-accent-blue" : "border-transparent text-text-secondary hover:text-text-primary"}`,
 							children: t
 						}, e))
 					}),
-					F === "overview" && /* @__PURE__ */ v("div", {
+					V === "overview" && /* @__PURE__ */ v("div", {
 						className: "grid gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(C, { children: /* @__PURE__ */ v(w, {
-							className: "text-base flex items-center gap-2",
-							children: [/* @__PURE__ */ _(l, { className: "h-4 w-4" }), " Budget Overview"]
-						}) }), /* @__PURE__ */ v(S, {
-							className: "space-y-3",
-							children: [
-								/* @__PURE__ */ v("div", {
-									className: "flex justify-between text-sm",
-									children: [/* @__PURE__ */ _("span", {
-										className: "text-muted-foreground",
-										children: "Total Budget"
-									}), /* @__PURE__ */ v("span", {
-										className: "font-medium",
-										children: ["$", R.budget.toLocaleString()]
-									})]
-								}),
-								/* @__PURE__ */ v("div", {
-									className: "flex justify-between text-sm",
-									children: [/* @__PURE__ */ _("span", {
-										className: "text-muted-foreground",
-										children: "Spent"
-									}), /* @__PURE__ */ v("span", {
-										className: "font-medium",
-										children: ["$", R.spent.toLocaleString()]
-									})]
-								}),
-								/* @__PURE__ */ v("div", {
-									className: "flex justify-between text-sm",
-									children: [/* @__PURE__ */ _("span", {
-										className: "text-muted-foreground",
-										children: "Remaining"
-									}), /* @__PURE__ */ v("span", {
-										className: "font-medium text-green-600",
-										children: ["$", (R.budget - R.spent).toLocaleString()]
-									})]
-								}),
-								/* @__PURE__ */ _("div", {
-									className: "h-2 overflow-hidden rounded-full bg-muted",
-									children: /* @__PURE__ */ _("div", {
-										className: "h-2 rounded-full bg-primary",
-										style: { width: `${Math.round(R.spent / R.budget * 100)}%` }
-									})
-								})
-							]
-						})] }), /* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(C, { children: /* @__PURE__ */ v(w, {
-							className: "text-base flex items-center gap-2",
-							children: [/* @__PURE__ */ _(i, { className: "h-4 w-4" }), " Milestone Summary"]
-						}) }), /* @__PURE__ */ _(S, {
-							className: "space-y-3",
-							children: [
-								"completed",
-								"in_progress",
-								"pending",
-								"overdue"
-							].map((e) => {
-								let t = R.milestones.filter((t) => t.status === e).length;
-								return /* @__PURE__ */ v("div", {
-									className: "flex items-center justify-between text-sm",
-									children: [/* @__PURE__ */ _("span", {
-										className: "text-muted-foreground capitalize",
-										children: e.replace("_", " ")
-									}), /* @__PURE__ */ _("span", {
-										className: "font-medium",
-										children: t
-									})]
-								}, e);
-							})
-						})] })]
-					}),
-					F === "timeline" && /* @__PURE__ */ _(x, { children: /* @__PURE__ */ _(S, {
-						className: "pt-6",
-						children: /* @__PURE__ */ _("div", {
-							className: "relative space-y-0",
-							children: R.milestones.map((e, t) => /* @__PURE__ */ v("div", {
-								className: "relative flex gap-4 pb-8",
+						children: [/* @__PURE__ */ v(E, {
+							treatment: "metric",
+							className: "border-border-seam",
+							children: [/* @__PURE__ */ _(w, { children: /* @__PURE__ */ v(T, {
+								className: "text-base flex items-center gap-2",
+								children: [/* @__PURE__ */ _(l, { className: "h-4 w-4" }), " Budget Overview"]
+							}) }), /* @__PURE__ */ v(C, {
+								className: "space-y-3",
 								children: [
-									t !== R.milestones.length - 1 && /* @__PURE__ */ _("div", { className: "absolute left-[11px] top-6 h-full w-0.5 bg-muted" }),
 									/* @__PURE__ */ v("div", {
-										className: `relative z-10 mt-1 h-6 w-6 shrink-0 rounded-full ${{
-											completed: "bg-green-500",
-											in_progress: "bg-blue-500",
-											pending: "bg-gray-300",
-											overdue: "bg-red-500"
-										}[e.status]} flex items-center justify-center`,
-										children: [e.status === "completed" && /* @__PURE__ */ _(o, { className: "h-4 w-4 text-white" }), e.status === "in_progress" && /* @__PURE__ */ _(c, { className: "h-4 w-4 text-white" })]
+										className: "flex justify-between text-sm",
+										children: [/* @__PURE__ */ _("span", {
+											className: "text-text-secondary",
+											children: "Total Budget"
+										}), /* @__PURE__ */ v("span", {
+											className: "font-medium tabular-nums",
+											children: ["$", W.budget.toLocaleString()]
+										})]
+									}),
+									/* @__PURE__ */ v("div", {
+										className: "flex justify-between text-sm",
+										children: [/* @__PURE__ */ _("span", {
+											className: "text-text-secondary",
+											children: "Spent"
+										}), /* @__PURE__ */ v("span", {
+											className: "font-medium tabular-nums",
+											children: ["$", W.spent.toLocaleString()]
+										})]
 									}),
 									/* @__PURE__ */ v("div", {
+										className: "flex justify-between text-sm",
+										children: [/* @__PURE__ */ _("span", {
+											className: "text-text-secondary",
+											children: "Remaining"
+										}), /* @__PURE__ */ v("span", {
+											className: "font-medium text-status-success-text tabular-nums",
+											children: ["$", (W.budget - W.spent).toLocaleString()]
+										})]
+									}),
+									/* @__PURE__ */ _("div", {
+										className: "h-2 overflow-hidden rounded-full bg-bg-sunken",
+										children: /* @__PURE__ */ _("div", {
+											className: "h-2 rounded-full bg-accent-blue",
+											style: { width: `${Math.round(W.spent / W.budget * 100)}%` }
+										})
+									})
+								]
+							})]
+						}), /* @__PURE__ */ v(E, {
+							treatment: "metric",
+							className: "border-border-seam",
+							children: [/* @__PURE__ */ _(w, { children: /* @__PURE__ */ v(T, {
+								className: "text-base flex items-center gap-2",
+								children: [/* @__PURE__ */ _(i, { className: "h-4 w-4" }), " Milestone Summary"]
+							}) }), /* @__PURE__ */ _(C, {
+								className: "space-y-3",
+								children: [
+									"completed",
+									"in_progress",
+									"pending",
+									"overdue"
+								].map((e) => {
+									let t = W.milestones.filter((t) => t.status === e).length;
+									return /* @__PURE__ */ v("div", {
+										className: "flex items-center justify-between text-sm",
+										children: [/* @__PURE__ */ v("span", {
+											className: "flex items-center gap-2 text-text-secondary capitalize",
+											children: [/* @__PURE__ */ _("span", { className: `h-1.5 w-1.5 rounded-full ${M[e]}` }), e.replace("_", " ")]
+										}), /* @__PURE__ */ _("span", {
+											className: "font-medium tabular-nums",
+											children: t
+										})]
+									}, e);
+								})
+							})]
+						})]
+					}),
+					V === "timeline" && /* @__PURE__ */ _(S, {
+						className: "border-border-seam",
+						children: /* @__PURE__ */ _(C, {
+							className: "pt-6",
+							children: /* @__PURE__ */ _("div", {
+								className: "relative space-y-0",
+								children: W.milestones.map((e, t) => /* @__PURE__ */ v("div", {
+									className: "relative flex gap-4 pb-8",
+									children: [
+										t !== W.milestones.length - 1 && /* @__PURE__ */ _("div", { className: "absolute left-[11px] top-6 h-full w-0.5 bg-border-seam" }),
+										/* @__PURE__ */ v("div", {
+											className: `relative z-10 mt-1 h-6 w-6 shrink-0 rounded-full ${M[e.status]} flex items-center justify-center`,
+											children: [e.status === "completed" && /* @__PURE__ */ _(o, { className: "h-4 w-4 text-white" }), e.status === "in_progress" && /* @__PURE__ */ _(c, { className: "h-4 w-4 text-white" })]
+										}),
+										/* @__PURE__ */ v("div", {
+											className: "flex-1",
+											children: [
+												/* @__PURE__ */ v("div", {
+													className: "flex items-center gap-2",
+													children: [/* @__PURE__ */ _("h4", {
+														className: "font-medium",
+														children: e.title
+													}), /* @__PURE__ */ _(b, {
+														variant: j[e.priority].variant,
+														className: "text-xs",
+														children: e.priority
+													})]
+												}),
+												/* @__PURE__ */ _("p", {
+													className: "mt-1 text-sm text-text-secondary",
+													children: e.description
+												}),
+												/* @__PURE__ */ v("div", {
+													className: "mt-2 flex flex-wrap gap-3 text-xs text-text-secondary",
+													children: [/* @__PURE__ */ v("span", {
+														className: "flex items-center gap-1",
+														children: [
+															/* @__PURE__ */ _(a, { className: "h-3 w-3" }),
+															" Due: ",
+															e.dueDate
+														]
+													}), e.completedAt && /* @__PURE__ */ v("span", {
+														className: "flex items-center gap-1 text-status-success-text",
+														children: [
+															/* @__PURE__ */ _(o, { className: "h-3 w-3" }),
+															" Completed:",
+															" ",
+															e.completedAt
+														]
+													})]
+												})
+											]
+										})
+									]
+								}, e.id))
+							})
+						})
+					}),
+					V === "milestones" && /* @__PURE__ */ _("div", {
+						className: "space-y-3",
+						children: W.milestones.map((e) => /* @__PURE__ */ _(S, {
+							className: "border-border-seam",
+							children: /* @__PURE__ */ _(C, {
+								className: "pt-4",
+								children: /* @__PURE__ */ v("div", {
+									className: "flex items-start gap-3",
+									children: [/* @__PURE__ */ _({
+										completed: o,
+										in_progress: c,
+										pending: m,
+										overdue: r
+									}[e.status] ?? m, { className: `mt-0.5 h-5 w-5 ${N[e.status]}` }), /* @__PURE__ */ v("div", {
 										className: "flex-1",
 										children: [
 											/* @__PURE__ */ v("div", {
@@ -391,157 +484,111 @@ function O() {
 												children: [/* @__PURE__ */ _("h4", {
 													className: "font-medium",
 													children: e.title
-												}), /* @__PURE__ */ _(y, {
-													variant: D[e.priority].variant,
+												}), /* @__PURE__ */ _(b, {
+													variant: j[e.priority].variant,
 													className: "text-xs",
 													children: e.priority
 												})]
 											}),
 											/* @__PURE__ */ _("p", {
-												className: "mt-1 text-sm text-muted-foreground",
+												className: "mt-1 text-sm text-text-secondary",
 												children: e.description
 											}),
-											/* @__PURE__ */ v("div", {
-												className: "mt-2 flex flex-wrap gap-3 text-xs text-muted-foreground",
-												children: [/* @__PURE__ */ v("span", {
-													className: "flex items-center gap-1",
-													children: [
-														/* @__PURE__ */ _(a, { className: "h-3 w-3" }),
-														" Due: ",
-														e.dueDate
-													]
-												}), e.completedAt && /* @__PURE__ */ v("span", {
-													className: "flex items-center gap-1 text-green-600",
-													children: [
-														/* @__PURE__ */ _(o, { className: "h-3 w-3" }),
-														" Completed:",
-														" ",
-														e.completedAt
-													]
+											e.deliverables.length > 0 && /* @__PURE__ */ v("div", {
+												className: "mt-3",
+												children: [/* @__PURE__ */ _("p", {
+													className: "text-xs font-medium text-text-secondary",
+													children: "Deliverables"
+												}), /* @__PURE__ */ _("div", {
+													className: "mt-1 flex flex-wrap gap-1",
+													children: e.deliverables.map((e) => /* @__PURE__ */ _(b, {
+														variant: "outline",
+														className: "text-xs",
+														children: e
+													}, e))
 												})]
+											}),
+											/* @__PURE__ */ v("div", {
+												className: "mt-3 flex flex-wrap gap-4 text-xs text-text-secondary",
+												children: [
+													/* @__PURE__ */ v("span", {
+														className: "flex items-center gap-1",
+														children: [
+															/* @__PURE__ */ _(a, { className: "h-3 w-3" }),
+															" Due: ",
+															e.dueDate
+														]
+													}),
+													e.completedAt && /* @__PURE__ */ v("span", {
+														className: "flex items-center gap-1 text-status-success-text",
+														children: [
+															/* @__PURE__ */ _(o, { className: "h-3 w-3" }),
+															" ",
+															e.completedAt
+														]
+													}),
+													e.dependencies.length > 0 && /* @__PURE__ */ v("span", {
+														className: "flex items-center gap-1",
+														children: [
+															/* @__PURE__ */ _(u, { className: "h-3 w-3" }),
+															/* @__PURE__ */ _("span", {
+																className: "tabular-nums",
+																children: e.dependencies.length
+															}),
+															" ",
+															"dependencies"
+														]
+													})
+												]
+											}),
+											e.notes && /* @__PURE__ */ _("p", {
+												className: "mt-2 rounded bg-bg-sunken p-2 text-xs text-text-secondary italic",
+												children: e.notes
 											})
 										]
-									})
-								]
-							}, e.id))
-						})
-					}) }),
-					F === "milestones" && /* @__PURE__ */ _("div", {
-						className: "space-y-3",
-						children: R.milestones.map((e) => /* @__PURE__ */ _(x, { children: /* @__PURE__ */ _(S, {
-							className: "pt-4",
-							children: /* @__PURE__ */ v("div", {
-								className: "flex items-start gap-3",
-								children: [/* @__PURE__ */ _({
-									completed: o,
-									in_progress: c,
-									pending: m,
-									overdue: r
-								}[e.status] ?? m, { className: `mt-0.5 h-5 w-5 ${{
-									completed: "text-green-600",
-									in_progress: "text-blue-600",
-									pending: "text-gray-400",
-									overdue: "text-red-600"
-								}[e.status]}` }), /* @__PURE__ */ v("div", {
-									className: "flex-1",
-									children: [
-										/* @__PURE__ */ v("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ _("h4", {
-												className: "font-medium",
-												children: e.title
-											}), /* @__PURE__ */ _(y, {
-												variant: D[e.priority].variant,
-												className: "text-xs",
-												children: e.priority
-											})]
-										}),
-										/* @__PURE__ */ _("p", {
-											className: "mt-1 text-sm text-muted-foreground",
-											children: e.description
-										}),
-										e.deliverables.length > 0 && /* @__PURE__ */ v("div", {
-											className: "mt-3",
-											children: [/* @__PURE__ */ _("p", {
-												className: "text-xs font-medium text-muted-foreground",
-												children: "Deliverables"
-											}), /* @__PURE__ */ _("div", {
-												className: "mt-1 flex flex-wrap gap-1",
-												children: e.deliverables.map((e) => /* @__PURE__ */ _(y, {
-													variant: "outline",
-													className: "text-xs",
-													children: e
-												}, e))
-											})]
-										}),
-										/* @__PURE__ */ v("div", {
-											className: "mt-3 flex flex-wrap gap-4 text-xs text-muted-foreground",
-											children: [
-												/* @__PURE__ */ v("span", {
-													className: "flex items-center gap-1",
-													children: [
-														/* @__PURE__ */ _(a, { className: "h-3 w-3" }),
-														" Due: ",
-														e.dueDate
-													]
-												}),
-												e.completedAt && /* @__PURE__ */ v("span", {
-													className: "flex items-center gap-1 text-green-600",
-													children: [
-														/* @__PURE__ */ _(o, { className: "h-3 w-3" }),
-														" ",
-														e.completedAt
-													]
-												}),
-												e.dependencies.length > 0 && /* @__PURE__ */ v("span", {
-													className: "flex items-center gap-1",
-													children: [
-														/* @__PURE__ */ _(u, { className: "h-3 w-3" }),
-														" ",
-														e.dependencies.length,
-														" ",
-														"dependencies"
-													]
-												})
-											]
-										}),
-										e.notes && /* @__PURE__ */ _("p", {
-											className: "mt-2 rounded bg-muted/50 p-2 text-xs text-muted-foreground italic",
-											children: e.notes
-										})
-									]
-								})]
+									})]
+								})
 							})
-						}) }, e.id))
+						}, e.id))
 					}),
-					F === "team" && /* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(C, { children: /* @__PURE__ */ _(w, {
-						className: "text-base",
-						children: "Team Members"
-					}) }), /* @__PURE__ */ _(S, { children: /* @__PURE__ */ _("div", {
-						className: "space-y-3",
-						children: R.teamMembers.map((e, t) => /* @__PURE__ */ v("div", {
-							className: "flex items-center gap-3 rounded-lg border p-3",
-							children: [/* @__PURE__ */ _("div", {
-								className: "flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 font-semibold text-primary",
-								children: e.name.charAt(0)
-							}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-								className: "font-medium",
-								children: e.name
-							}), /* @__PURE__ */ _("p", {
-								className: "text-sm text-muted-foreground",
-								children: e.role
-							})] })]
-						}, t))
-					}) })] })
-				] }) : /* @__PURE__ */ _(x, { children: /* @__PURE__ */ _(S, {
-					className: "py-12 text-center text-muted-foreground",
-					children: "Select a project from the sidebar to view details."
-				}) })
+					V === "team" && /* @__PURE__ */ v(S, {
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ _(w, { children: /* @__PURE__ */ _(T, {
+							className: "text-base",
+							children: "Team Members"
+						}) }), /* @__PURE__ */ _(C, { children: /* @__PURE__ */ _("div", {
+							className: "space-y-3",
+							children: W.teamMembers.map((e, t) => /* @__PURE__ */ v("div", {
+								className: "flex items-center gap-3 rounded-lg border border-border-seam p-3",
+								children: [/* @__PURE__ */ _("div", {
+									className: "flex h-10 w-10 items-center justify-center rounded-full bg-accent-soft font-semibold text-text-primary",
+									children: e.name.charAt(0)
+								}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
+									className: "font-medium",
+									children: e.name
+								}), /* @__PURE__ */ _("p", {
+									className: "text-sm text-text-secondary",
+									children: e.role
+								})] })]
+							}, t))
+						}) })]
+					})
+				] }) : /* @__PURE__ */ _(S, {
+					className: "border-border-seam",
+					children: /* @__PURE__ */ _(C, {
+						className: "py-6",
+						children: /* @__PURE__ */ _(O, {
+							illustration: "onboarding",
+							title: "Select a project",
+							description: "Pick a project from the sidebar to view its details."
+						})
+					})
+				})
 			})]
 		})]
 	});
 }
 //#endregion
-export { O as ProjectsPage };
+export { P as ProjectsPage };
 
 //# sourceMappingURL=ProjectsPage.js.map