@burdenoff/microfe-proserviceworld 2026.624.1 → 2026.626.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, NextSteps as A, PagePurpose as j } from "@burdenoff/fe-libs/ui";
 //#region src/proserviceworld/pages/ProjectsPage.tsx
-var E = {
+var M = {
 	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 = {
+}, N = {
 	low: {
 		label: "Low",
 		variant: "outline"
@@ -47,501 +47,581 @@ var E = {
 		label: "Critical",
 		variant: "destructive"
 	}
+}, P = {
+	completed: "bg-status-success-text",
+	in_progress: "bg-accent-blue",
+	pending: "bg-bg-sunken",
+	overdue: "bg-status-error-text"
+}, F = {
+	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 I() {
+	let { projects: I } = e(), [L, R] = n(""), [z, B] = n("all"), [V, H] = n(I[0]?.id ?? ""), [U, W] = n("overview"), G = t(() => {
+		let e = [...I];
+		if (z !== "all" && (e = e.filter((e) => e.status === z)), L.trim()) {
+			let t = L.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);
+		I,
+		z,
+		L
+	]), K = I.find((e) => e.id === V);
 	return /* @__PURE__ */ v("div", {
-		className: "space-y-6 p-6",
-		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-text-secondary",
-				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"]
-			})]
-		}), /* @__PURE__ */ v("div", {
-			className: "grid gap-6 lg:grid-cols-3",
-			children: [/* @__PURE__ */ v("div", {
-				className: "space-y-4",
-				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-text-secondary" }), /* @__PURE__ */ _(T, {
-							placeholder: "Search projects...",
-							value: k,
-							onChange: (e) => A(e.target.value),
-							className: "pl-10"
-						})]
-					}),
-					/* @__PURE__ */ _("div", {
-						className: "flex flex-wrap gap-1",
-						children: [
-							"all",
-							"active",
-							"planning",
-							"completed",
-							"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-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80"}`,
-							children: e === "all" ? "All" : E[e].label
-						}, e))
-					}),
-					/* @__PURE__ */ _("div", {
-						className: "space-y-2",
-						children: L.length === 0 ? /* @__PURE__ */ _("p", {
-							className: "py-8 text-center text-sm text-text-secondary",
-							children: "No projects found."
-						}) : L.map((e) => {
-							let t = E[e.status];
-							return /* @__PURE__ */ v("button", {
-								onClick: () => {
-									P(e.id), I("overview");
-								},
-								className: `w-full rounded-lg border p-3 text-left transition-colors ${N === e.id ? "border-primary bg-action-primary-bg/5" : "hover:bg-bg-sunken/50"}`,
+		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
+		children: [
+			/* @__PURE__ */ v("div", {
+				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__ */ _(j, {
+				icon: /* @__PURE__ */ _(m, { className: "h-4 w-4" }),
+				children: "Run your engagements from kickoff to delivery. Pick a project to see its budget, progress, milestones, timeline, and team in one place — so you always know what is on track, what is at risk, and what is due next."
+			}),
+			/* @__PURE__ */ _(A, {
+				storageKey: "proserviceworld-projects",
+				steps: [
+					{
+						id: "timeline",
+						label: "Walk the timeline",
+						description: "See milestones in chronological order to gauge momentum.",
+						icon: /* @__PURE__ */ _(a, { className: "h-4 w-4" }),
+						onClick: () => W("timeline")
+					},
+					{
+						id: "milestones",
+						label: "Drill into milestones",
+						description: "Review deliverables, dependencies, and due dates.",
+						icon: /* @__PURE__ */ _(u, { className: "h-4 w-4" }),
+						onClick: () => W("milestones")
+					},
+					{
+						id: "team",
+						label: "Check the team",
+						description: "See who is assigned and their roles.",
+						icon: /* @__PURE__ */ _(h, { className: "h-4 w-4" }),
+						onClick: () => W("team")
+					}
+				]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "grid gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ v("div", {
+					className: "space-y-4",
+					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-text-secondary" }), /* @__PURE__ */ _(k, {
+								placeholder: "Search projects...",
+								"aria-label": "Search projects",
+								value: L,
+								onChange: (e) => R(e.target.value),
+								className: "pl-10"
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-wrap gap-1",
+							children: [
+								"all",
+								"active",
+								"planning",
+								"completed",
+								"on_hold",
+								"cancelled"
+							].map((e) => /* @__PURE__ */ _("button", {
+								onClick: () => B(e),
+								"aria-pressed": z === 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 ${z === e ? "bg-accent-blue text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"}`,
+								children: e === "all" ? "All" : M[e].label
+							}, e))
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "space-y-2",
+							children: G.length === 0 ? /* @__PURE__ */ _(O, {
+								illustration: L || z !== "all" ? "empty-search" : "empty-data",
+								title: "No projects found",
+								description: "Try adjusting your search or filters."
+							}) : G.map((e) => {
+								let t = M[e.status];
+								return /* @__PURE__ */ v("button", {
+									onClick: () => {
+										H(e.id), W("overview");
+									},
+									"aria-pressed": V === 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 ${V === 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-text-secondary" })]
+										}),
+										/* @__PURE__ */ v("div", {
+											className: "mt-2 flex items-center gap-2",
+											children: [/* @__PURE__ */ _(b, {
+												variant: N[e.priority].variant,
+												className: "text-xs",
+												children: e.priority
+											}), /* @__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-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-bg-sunken",
+												children: /* @__PURE__ */ _("div", {
+													className: "h-1.5 rounded-full bg-accent-blue transition-all",
+													style: { width: `${e.progress}%` }
+												})
+											})]
+										})
+									]
+								}, e.id);
+							})
+						})
+					]
+				}), /* @__PURE__ */ _("div", {
+					className: "space-y-4 lg:col-span-2",
+					children: K ? /* @__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 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-text-secondary" })]
-									}),
-									/* @__PURE__ */ v("div", {
-										className: "mt-2 flex items-center gap-2",
-										children: [/* @__PURE__ */ _(y, {
-											variant: D[e.priority].variant,
-											className: "text-xs",
-											children: e.priority
-										}), /* @__PURE__ */ _("span", {
-											className: `text-xs ${t.color}`,
-											children: t.label
+										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: N[K.priority].variant,
+														children: [K.priority, " priority"]
+													}), /* @__PURE__ */ _("span", {
+														className: `text-sm font-medium ${M[K.status].color}`,
+														children: M[K.status].label
+													})]
+												}),
+												/* @__PURE__ */ _("h2", {
+													className: "text-xl font-bold tracking-tight",
+													children: K.title
+												}),
+												/* @__PURE__ */ _("p", {
+													className: "text-sm text-text-secondary",
+													children: K.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: ["$", K.budget.toLocaleString()]
+												}),
+												/* @__PURE__ */ v("p", {
+													className: "text-xs text-text-secondary tabular-nums",
+													children: [
+														"Spent: $",
+														K.spent.toLocaleString(),
+														" (",
+														Math.round(K.spent / K.budget * 100),
+														"%)"
+													]
+												})
+											]
 										})]
 									}),
 									/* @__PURE__ */ v("div", {
-										className: "mt-2",
+										className: "mt-4",
 										children: [/* @__PURE__ */ v("div", {
-											className: "flex items-center justify-between text-xs text-text-secondary",
-											children: [/* @__PURE__ */ _("span", { children: "Progress" }), /* @__PURE__ */ v("span", { children: [e.progress, "%"] })]
+											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: [K.progress, "%"]
+											})]
 										}), /* @__PURE__ */ _("div", {
-											className: "mt-1 h-1.5 overflow-hidden rounded-full bg-bg-sunken",
+											className: "mt-1 h-3 overflow-hidden rounded-full bg-bg-sunken",
 											children: /* @__PURE__ */ _("div", {
-												className: "h-1.5 rounded-full bg-action-primary-bg transition-all",
-												style: { width: `${e.progress}%` }
+												className: "h-3 rounded-full bg-accent-blue transition-all",
+												style: { width: `${K.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-text-secondary",
+												children: [
+													/* @__PURE__ */ _(a, { className: "h-4 w-4" }),
+													" ",
+													K.startDate,
+													" -",
+													" ",
+													K.endDate
+												]
+											}),
+											/* @__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: K.teamMembers.length
+													}),
+													" ",
+													"members"
+												]
+											}),
+											/* @__PURE__ */ v("span", {
+												className: "flex items-center gap-1 text-text-secondary",
+												children: [
+													/* @__PURE__ */ _(m, { className: "h-4 w-4" }),
+													/* @__PURE__ */ _("span", {
+														className: "tabular-nums",
+														children: K.milestones.length
+													}),
+													" ",
+													"milestones"
+												]
+											})
+										]
+									}),
+									K.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" }), K.tags.map((e) => /* @__PURE__ */ _(b, {
+											variant: "outline",
+											className: "text-xs",
+											children: e
+										}, e))]
 									})
 								]
-							}, e.id);
-						})
-					})
-				]
-			}), /* @__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",
+							})
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex gap-1 border-b border-border-seam",
+							children: [
+								{
+									key: "overview",
+									label: "Overview"
+								},
+								{
+									key: "timeline",
+									label: "Timeline"
+								},
+								{
+									key: "milestones",
+									label: "Milestones"
+								},
+								{
+									key: "team",
+									label: "Team"
+								}
+							].map(({ key: e, label: t }) => /* @__PURE__ */ _("button", {
+								onClick: () => W(e),
+								"aria-pressed": U === 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 ${U === e ? "border-accent-blue text-accent-blue" : "border-transparent text-text-secondary hover:text-text-primary"}`,
+								children: t
+							}, e))
+						}),
+						U === "overview" && /* @__PURE__ */ v("div", {
+							className: "grid gap-4 sm:grid-cols-2",
+							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: [
 										/* @__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
+											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: ["$", K.budget.toLocaleString()]
 											})]
 										}),
-										/* @__PURE__ */ _("h2", {
-											className: "text-xl font-bold",
-											children: R.title
-										}),
-										/* @__PURE__ */ _("p", {
-											className: "text-sm text-text-secondary",
-											children: R.description
-										})
-									]
-								}), /* @__PURE__ */ v("div", {
-									className: "text-right",
-									children: [
-										/* @__PURE__ */ _("p", {
-											className: "text-sm text-text-secondary",
-											children: "Budget"
+										/* @__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: ["$", K.spent.toLocaleString()]
+											})]
 										}),
-										/* @__PURE__ */ v("p", {
-											className: "text-xl font-bold",
-											children: ["$", R.budget.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: ["$", (K.budget - K.spent).toLocaleString()]
+											})]
 										}),
-										/* @__PURE__ */ v("p", {
-											className: "text-xs text-text-secondary",
-											children: [
-												"Spent: $",
-												R.spent.toLocaleString(),
-												" (",
-												Math.round(R.spent / R.budget * 100),
-												"%)"
-											]
+										/* @__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(K.spent / K.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",
-										children: [R.progress, "%"]
-									})]
-								}), /* @__PURE__ */ _("div", {
-									className: "mt-1 h-3 overflow-hidden rounded-full bg-bg-sunken",
-									children: /* @__PURE__ */ _("div", {
-										className: "h-3 rounded-full bg-action-primary-bg transition-all",
-										style: { width: `${R.progress}%` }
+							}), /* @__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 = K.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 ${P[e]}` }), e.replace("_", " ")]
+											}), /* @__PURE__ */ _("span", {
+												className: "font-medium tabular-nums",
+												children: t
+											})]
+										}, e);
 									})
 								})]
-							}),
-							/* @__PURE__ */ v("div", {
-								className: "mt-4 flex flex-wrap gap-4 text-sm",
-								children: [
-									/* @__PURE__ */ v("span", {
-										className: "flex items-center gap-1 text-text-secondary",
-										children: [
-											/* @__PURE__ */ _(a, { className: "h-4 w-4" }),
-											" ",
-											R.startDate,
-											" -",
-											" ",
-											R.endDate
-										]
-									}),
-									/* @__PURE__ */ v("span", {
-										className: "flex items-center gap-1 text-text-secondary",
-										children: [
-											/* @__PURE__ */ _(h, { className: "h-4 w-4" }),
-											" ",
-											R.teamMembers.length,
-											" members"
-										]
-									}),
-									/* @__PURE__ */ v("span", {
-										className: "flex items-center gap-1 text-text-secondary",
-										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-text-secondary" }), R.tags.map((e) => /* @__PURE__ */ _(y, {
-									variant: "outline",
-									className: "text-xs",
-									children: e
-								}, e))]
-							})
-						]
-					}) }),
-					/* @__PURE__ */ _("div", {
-						className: "flex gap-1 border-b",
-						children: [
-							{
-								key: "overview",
-								label: "Overview"
-							},
-							{
-								key: "timeline",
-								label: "Timeline"
-							},
-							{
-								key: "milestones",
-								label: "Milestones"
-							},
-							{
-								key: "team",
-								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-text-secondary hover:text-text-primary"}`,
-							children: t
-						}, e))
-					}),
-					F === "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-text-secondary",
-										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-text-secondary",
-										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-text-secondary",
-										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-bg-sunken",
-									children: /* @__PURE__ */ _("div", {
-										className: "h-2 rounded-full bg-action-primary-bg",
-										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-text-secondary 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: [
-									t !== R.milestones.length - 1 && /* @__PURE__ */ _("div", { className: "absolute left-[11px] top-6 h-full w-0.5 bg-bg-sunken" }),
-									/* @__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" })]
-									}),
-									/* @__PURE__ */ v("div", {
-										className: "flex-1",
+							})]
+						}),
+						U === "timeline" && /* @__PURE__ */ _(S, {
+							className: "border-border-seam",
+							children: /* @__PURE__ */ _(C, {
+								className: "pt-6",
+								children: /* @__PURE__ */ _("div", {
+									className: "relative space-y-0",
+									children: K.milestones.map((e, t) => /* @__PURE__ */ v("div", {
+										className: "relative flex gap-4 pb-8",
 										children: [
+											t !== K.milestones.length - 1 && /* @__PURE__ */ _("div", { className: "absolute left-[11px] top-6 h-full w-0.5 bg-border-seam" }),
 											/* @__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-text-secondary",
-												children: e.description
+												className: `relative z-10 mt-1 h-6 w-6 shrink-0 rounded-full ${P[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: "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-green-600",
-													children: [
-														/* @__PURE__ */ _(o, { className: "h-3 w-3" }),
-														" Completed:",
-														" ",
-														e.completedAt
-													]
-												})]
+												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: N[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))
-						})
-					}) }),
-					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-text-secondary",
-											children: e.description
-										}),
-										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__ */ _(y, {
-													variant: "outline",
-													className: "text-xs",
-													children: e
-												}, e))
-											})]
-										}),
-										/* @__PURE__ */ v("div", {
-											className: "mt-3 flex flex-wrap gap-4 text-xs text-text-secondary",
+									}, e.id))
+								})
+							})
+						}),
+						U === "milestones" && /* @__PURE__ */ _("div", {
+							className: "space-y-3",
+							children: K.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 ${F[e.status]}` }), /* @__PURE__ */ v("div", {
+											className: "flex-1",
 											children: [
-												/* @__PURE__ */ v("span", {
-													className: "flex items-center gap-1",
-													children: [
-														/* @__PURE__ */ _(a, { className: "h-3 w-3" }),
-														" Due: ",
-														e.dueDate
-													]
+												/* @__PURE__ */ v("div", {
+													className: "flex items-center gap-2",
+													children: [/* @__PURE__ */ _("h4", {
+														className: "font-medium",
+														children: e.title
+													}), /* @__PURE__ */ _(b, {
+														variant: N[e.priority].variant,
+														className: "text-xs",
+														children: e.priority
+													})]
 												}),
-												e.completedAt && /* @__PURE__ */ v("span", {
-													className: "flex items-center gap-1 text-green-600",
-													children: [
-														/* @__PURE__ */ _(o, { className: "h-3 w-3" }),
-														" ",
-														e.completedAt
-													]
+												/* @__PURE__ */ _("p", {
+													className: "mt-1 text-sm text-text-secondary",
+													children: e.description
+												}),
+												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))
+													})]
 												}),
-												e.dependencies.length > 0 && /* @__PURE__ */ v("span", {
-													className: "flex items-center gap-1",
+												/* @__PURE__ */ v("div", {
+													className: "mt-3 flex flex-wrap gap-4 text-xs text-text-secondary",
 													children: [
-														/* @__PURE__ */ _(u, { className: "h-3 w-3" }),
-														" ",
-														e.dependencies.length,
-														" ",
-														"dependencies"
+														/* @__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.notes && /* @__PURE__ */ _("p", {
-											className: "mt-2 rounded bg-bg-sunken/50 p-2 text-xs text-text-secondary italic",
-											children: e.notes
-										})
-									]
-								})]
+										})]
+									})
+								})
+							}, e.id))
+						}),
+						U === "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: K.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."
 							})
-						}) }, 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-action-primary-bg/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-text-secondary",
-								children: e.role
-							})] })]
-						}, t))
-					}) })] })
-				] }) : /* @__PURE__ */ _(x, { children: /* @__PURE__ */ _(S, {
-					className: "py-12 text-center text-text-secondary",
-					children: "Select a project from the sidebar to view details."
-				}) })
-			})]
-		})]
+						})
+					})
+				})]
+			})
+		]
 	});
 }
 //#endregion
-export { O as ProjectsPage };
+export { I as ProjectsPage };
 
 //# sourceMappingURL=ProjectsPage.js.map