@burdenoff/microfe-planmagnet 2026.928.4 → 2026.928.5

package/dist/planmagnet/pages/PortfoliosPortfolioDetailPagePage.js

@@ -1,7 +1,7 @@
 import { usePlanMagnetNavigate as e } from "../providers/PlanMagnetProvider.js";
 import { PersonName as t } from "../people/People.js";
-import { detailPath as n } from "../utils/rowNavigation.js";
-import { enumLabel as r } from "../controls/WorkItemControls.js";
+import { enumLabel as n } from "../controls/WorkItemControls.js";
+import { detailPath as r } from "../utils/rowNavigation.js";
 import { PortfolioHeaderActions as i } from "../controls/PortfolioControls.js";
 import { AlertTriangle as a, Briefcase as o, Clock as s, Loader2 as c, Target as l } from "lucide-react";
 import { useParams as u } from "react-router";
@@ -93,12 +93,12 @@ function S() {
 						/* @__PURE__ */ p(h, {
 							variant: "outline",
 							className: "text-xs",
-							children: r(D.status)
+							children: n(D.status)
 						})
 					]
 				}), D.alignment && /* @__PURE__ */ p("p", {
 					className: "text-sm text-muted-foreground mt-1",
-					children: D.alignment === "CUSTOM" ? D.alignmentLabel ?? "Custom alignment" : r(D.alignment)
+					children: D.alignment === "CUSTOM" ? D.alignmentLabel ?? "Custom alignment" : n(D.alignment)
 				})] }), /* @__PURE__ */ p(i, {
 					portfolioId: D.id,
 					name: D.name,
@@ -216,7 +216,7 @@ function S() {
 											children: "Projects by Status"
 										}), /* @__PURE__ */ p("p", {
 											className: "text-sm mt-1",
-											children: Object.keys(O.projectsByStatus).length > 0 ? Object.entries(O.projectsByStatus).map(([e, t]) => `${r(e)}: ${t}`).join(", ") : "No projects yet"
+											children: Object.keys(O.projectsByStatus).length > 0 ? Object.entries(O.projectsByStatus).map(([e, t]) => `${n(e)}: ${t}`).join(", ") : "No projects yet"
 										})]
 									})
 								]
@@ -237,14 +237,14 @@ function S() {
 							}), D.programs.map((e) => /* @__PURE__ */ m("button", {
 								type: "button",
 								className: "flex w-full items-center justify-between rounded-md border p-3 text-left hover:bg-muted",
-								onClick: () => d(n("/products/program-detail-page", e.id)),
+								onClick: () => d(r("/products/program-detail-page", e.id)),
 								children: [/* @__PURE__ */ p("span", {
 									className: "text-sm font-medium",
 									children: e.name
 								}), /* @__PURE__ */ p(h, {
 									variant: "outline",
 									className: "text-xs",
-									children: r(e.status)
+									children: n(e.status)
 								})]
 							}, e.id))]
 						})] }),
@@ -260,14 +260,14 @@ function S() {
 							}), D.projects.map((e) => /* @__PURE__ */ m("button", {
 								type: "button",
 								className: "flex w-full items-center justify-between rounded-md border p-3 text-left hover:bg-muted",
-								onClick: () => d(n("/projects/project-detail-page", e.id)),
+								onClick: () => d(r("/projects/project-detail-page", e.id)),
 								children: [/* @__PURE__ */ p("span", {
 									className: "text-sm font-medium",
 									children: e.name
 								}), /* @__PURE__ */ p(h, {
 									variant: "outline",
 									className: "text-xs",
-									children: r(e.status)
+									children: n(e.status)
 								})]
 							}, e.id))]
 						})] })

package/dist/planmagnet/pages/PortfoliosPortfoliosPagePage.js

@@ -1,7 +1,7 @@
 import { usePlanMagnet as e, usePlanMagnetNavigate as t } from "../providers/PlanMagnetProvider.js";
 import { PersonName as n } from "../people/People.js";
-import { detailPath as r, rowLinkProps as i } from "../utils/rowNavigation.js";
-import { enumLabel as a } from "../controls/WorkItemControls.js";
+import { enumLabel as r } from "../controls/WorkItemControls.js";
+import { detailPath as i, rowLinkProps as a } from "../utils/rowNavigation.js";
 import { PORTFOLIO_STATUSES as o } from "../controls/PortfolioControls.js";
 import { useState as s } from "react";
 import { Briefcase as c, Loader2 as l, Plus as u } from "lucide-react";
@@ -93,14 +93,14 @@ function C() {
 						"aria-pressed": w === e,
 						onClick: () => T(e),
 						className: `px-2 py-1 text-xs rounded-md capitalize ${w === e ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`,
-						children: e === "all" ? "All" : a(e)
+						children: e === "all" ? "All" : r(e)
 					}, e))
 				})]
 			}),
 			/* @__PURE__ */ p("div", {
 				className: "grid grid-cols-1 md:grid-cols-2 gap-4",
 				children: j.map((e) => /* @__PURE__ */ m(_, {
-					...i(() => d(r("/products/portfolio-detail-page", e.id)), e.name),
+					...a(() => d(i("/products/portfolio-detail-page", e.id)), e.name),
 					children: [/* @__PURE__ */ p(y, {
 						className: "pb-2",
 						children: /* @__PURE__ */ m("div", {
@@ -111,7 +111,7 @@ function C() {
 							}), /* @__PURE__ */ p(h, {
 								variant: "outline",
 								className: "text-xs",
-								children: a(e.status)
+								children: r(e.status)
 							})]
 						})
 					}), /* @__PURE__ */ m(v, {
@@ -126,7 +126,7 @@ function C() {
 								children: [e.alignment && /* @__PURE__ */ p(h, {
 									variant: "secondary",
 									className: "text-xs",
-									children: e.alignment === "CUSTOM" ? e.alignmentLabel ?? "Custom" : a(e.alignment)
+									children: e.alignment === "CUSTOM" ? e.alignmentLabel ?? "Custom" : r(e.alignment)
 								}), e.fiscalPeriod && /* @__PURE__ */ p(h, {
 									variant: "outline",
 									className: "text-xs",

package/dist/planmagnet/pages/ProgramsCreateProgramPagePage.js

@@ -1,7 +1,7 @@
 import { usePlanMagnet as e, usePlanMagnetNavigate as t } from "../providers/PlanMagnetProvider.js";
 import { throwOnError as n } from "../utils/mutationResult.js";
-import { endBeforeStart as r } from "../utils/formValidation.js";
-import { enumLabel as i } from "../controls/WorkItemControls.js";
+import { enumLabel as r } from "../controls/WorkItemControls.js";
+import { endBeforeStart as i } from "../utils/formValidation.js";
 import { PROGRAM_STATUSES as a } from "../controls/ProgramControls.js";
 import { useState as o } from "react";
 import { FolderKanban as s, Loader2 as c, Save as l, X as u } from "lucide-react";
@@ -28,7 +28,7 @@ function S() {
 		budgetTotal: "",
 		currency: "",
 		tags: ""
-	}), [T, E] = o(null), [D, { loading: O }] = f(x, { refetchQueries: ["ListPrograms"] }), k = r(C.startDate, C.endDate), A = C.budgetTotal !== "" && Number(C.budgetTotal) < 0;
+	}), [T, E] = o(null), [D, { loading: O }] = f(x, { refetchQueries: ["ListPrograms"] }), k = i(C.startDate, C.endDate), A = C.budgetTotal !== "" && Number(C.budgetTotal) < 0;
 	return /* @__PURE__ */ m("div", {
 		className: "space-y-6 p-6 max-w-4xl",
 		children: [
@@ -123,7 +123,7 @@ function S() {
 						}),
 						children: a.map((e) => /* @__PURE__ */ p("option", {
 							value: e,
-							children: i(e)
+							children: r(e)
 						}, e))
 					})] }),
 					/* @__PURE__ */ m("div", {

package/dist/planmagnet/pages/ProgramsEditProgramPagePage.js

@@ -1,8 +1,8 @@
 import { usePlanMagnetNavigate as e } from "../providers/PlanMagnetProvider.js";
 import { throwOnError as t } from "../utils/mutationResult.js";
-import { detailPath as n } from "../utils/rowNavigation.js";
-import { endBeforeStart as r } from "../utils/formValidation.js";
-import { enumLabel as i } from "../controls/WorkItemControls.js";
+import { enumLabel as n } from "../controls/WorkItemControls.js";
+import { detailPath as r } from "../utils/rowNavigation.js";
+import { endBeforeStart as i } from "../utils/formValidation.js";
 import { PROGRAM_STATUSES as a } from "../controls/ProgramControls.js";
 import { useMemo as o, useState as s } from "react";
 import { ArrowLeft as c, Loader2 as l, Save as u } from "lucide-react";
@@ -65,7 +65,7 @@ function T() {
 	}), [F]), [L, R] = s({}), z = {
 		...I,
 		...L
-	}, B = (e) => R(e), V = a.includes(z.status) ? a : [z.status, ...a], H = r(z.startDate, z.endDate), U = z.budgetTotal !== "" && Number(z.budgetTotal) < 0;
+	}, B = (e) => R(e), V = a.includes(z.status) ? a : [z.status, ...a], H = i(z.startDate, z.endDate), U = z.budgetTotal !== "" && Number(z.budgetTotal) < 0;
 	return D && !E ? /* @__PURE__ */ h("div", {
 		className: "flex items-center justify-center p-12",
 		children: /* @__PURE__ */ h(l, { className: "h-8 w-8 animate-spin text-muted-foreground" })
@@ -83,7 +83,7 @@ function T() {
 						variant: "ghost",
 						size: "sm",
 						"aria-label": "Back to the program",
-						onClick: () => f(n("/products/program-detail-page", T)),
+						onClick: () => f(r("/products/program-detail-page", T)),
 						children: /* @__PURE__ */ h(c, { className: "h-4 w-4" })
 					}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h1", {
 						className: "text-2xl font-semibold",
@@ -181,7 +181,7 @@ function T() {
 						}),
 						children: V.map((e) => /* @__PURE__ */ h("option", {
 							value: e,
-							children: i(e)
+							children: n(e)
 						}, e))
 					})] }),
 					/* @__PURE__ */ g("div", {

package/dist/planmagnet/pages/ProgramsProgramsPagePage.js

@@ -1,7 +1,7 @@
 import { usePlanMagnet as e, usePlanMagnetNavigate as t } from "../providers/PlanMagnetProvider.js";
 import { PersonName as n } from "../people/People.js";
-import { detailPath as r, rowLinkProps as i } from "../utils/rowNavigation.js";
-import { enumLabel as a } from "../controls/WorkItemControls.js";
+import { enumLabel as r } from "../controls/WorkItemControls.js";
+import { detailPath as i, rowLinkProps as a } from "../utils/rowNavigation.js";
 import { PROGRAM_STATUSES as o } from "../controls/ProgramControls.js";
 import { useState as s } from "react";
 import { FolderKanban as c, Loader2 as l, Plus as u } from "lucide-react";
@@ -95,14 +95,14 @@ function C() {
 						"aria-pressed": w === e,
 						onClick: () => T(e),
 						className: `px-2 py-1 text-xs rounded-md capitalize ${w === e ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`,
-						children: e === "all" ? "All" : a(e)
+						children: e === "all" ? "All" : r(e)
 					}, e))
 				})]
 			}),
 			/* @__PURE__ */ p("div", {
 				className: "grid grid-cols-1 md:grid-cols-2 gap-4",
 				children: j.map((e) => /* @__PURE__ */ m(_, {
-					...i(() => d(r("/products/program-detail-page", e.id)), e.name),
+					...a(() => d(i("/products/program-detail-page", e.id)), e.name),
 					children: [/* @__PURE__ */ p(y, {
 						className: "pb-2",
 						children: /* @__PURE__ */ m("div", {
@@ -113,7 +113,7 @@ function C() {
 							}), /* @__PURE__ */ p(h, {
 								variant: "outline",
 								className: "text-xs",
-								children: a(e.status)
+								children: r(e.status)
 							})]
 						})
 					}), /* @__PURE__ */ m(v, {

package/dist/planmagnet/pages/ProjectsBudgetDetailPagePage.d.ts

@@ -0,0 +1,2 @@
+export declare function ProjectsBudgetDetailPagePage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProjectsBudgetDetailPagePage.d.ts.map

package/dist/planmagnet/pages/ProjectsBudgetDetailPagePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectsBudgetDetailPagePage.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/pages/ProjectsBudgetDetailPagePage.tsx"],"names":[],"mappings":"AAsFA,wBAAgB,4BAA4B,4CAqP3C"}

package/dist/planmagnet/pages/ProjectsBudgetDetailPagePage.js

@@ -0,0 +1,315 @@
+import { usePlanMagnetNavigate as e } from "../providers/PlanMagnetProvider.js";
+import { PersonName as t } from "../people/People.js";
+import { BUDGET_STATE_STYLE as n, budgetState as r, budgetUsage as i, money as a } from "../budgets/budgetMath.js";
+import { useEntityId as o } from "../hooks/useEntityId.js";
+import { enumLabel as s } from "../controls/WorkItemControls.js";
+import { BudgetHeaderActions as c } from "../budgets/BudgetControls.js";
+import { DeleteExpenseButton as l, EditExpenseDialog as u, LogExpenseDialog as d } from "../budgets/ExpenseControls.js";
+import { ArrowLeft as f, Receipt as p } from "lucide-react";
+import { gql as m } from "@apollo/client";
+import { useQuery as h } from "@apollo/client/react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Button as v, Card as y, CardContent as b, CardHeader as x, CardTitle as S } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/pages/ProjectsBudgetDetailPagePage.tsx
+var C = m`
+  query GetBudget($id: ID!) {
+    planmagnetBudget(id: $id) {
+      id
+      name
+      description
+      status
+      plannedAmount
+      spentAmount
+      currency
+      periodStart
+      periodEnd
+      approverId
+      approvedAt
+      createdBy
+      createdAt
+      projectId
+      project {
+        id
+        name
+        key
+      }
+      expenses {
+        id
+        description
+        amount
+        category
+        date
+        workItemId
+        referenceUrl
+        createdBy
+        createdAt
+      }
+    }
+  }
+`;
+function w() {
+	let m = o("budgetId"), w = e(), { data: T, loading: E, error: D } = h(C, {
+		variables: { id: m },
+		skip: !m
+	});
+	if (!m) return /* @__PURE__ */ g("div", {
+		className: "p-6 text-sm text-muted-foreground",
+		children: "No budget selected. Open one from the list."
+	});
+	if (E && !T) return /* @__PURE__ */ g("div", {
+		className: "flex items-center justify-center p-12",
+		children: /* @__PURE__ */ g("div", { className: "animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" })
+	});
+	if (D) return /* @__PURE__ */ _("div", {
+		className: "p-6 space-y-3",
+		children: [/* @__PURE__ */ _("p", {
+			role: "alert",
+			className: "text-sm text-destructive",
+			children: ["The budget could not be loaded: ", D.message]
+		}), /* @__PURE__ */ _(v, {
+			size: "sm",
+			variant: "ghost",
+			onClick: () => w("/projects/budgets-page"),
+			children: [/* @__PURE__ */ g(f, { className: "mr-1 h-4 w-4" }), "All budgets"]
+		})]
+	});
+	let O = T?.planmagnetBudget;
+	if (!O) return /* @__PURE__ */ _("div", {
+		className: "p-6 space-y-3",
+		children: [/* @__PURE__ */ g("p", {
+			className: "text-sm text-muted-foreground",
+			children: "This budget does not exist in this workspace, or it was deleted."
+		}), /* @__PURE__ */ _(v, {
+			size: "sm",
+			variant: "ghost",
+			onClick: () => w("/projects/budgets-page"),
+			children: [/* @__PURE__ */ g(f, { className: "mr-1 h-4 w-4" }), "All budgets"]
+		})]
+	});
+	let k = i(O.plannedAmount, O.spentAmount), A = n[r(k)], j = k === null ? null : Math.round(k * 100), M = O.plannedAmount - O.spentAmount, N = [...O.expenses].sort((e, t) => t.date.localeCompare(e.date)), P = [
+		"GetBudget",
+		"BudgetsList",
+		"GetBudgetPerformance"
+	], F = O.project;
+	return /* @__PURE__ */ _("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ _(v, {
+				size: "sm",
+				variant: "ghost",
+				onClick: () => w("/projects/budgets-page"),
+				children: [/* @__PURE__ */ g(f, { className: "mr-1 h-4 w-4" }), "All budgets"]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-wrap items-start justify-between gap-4",
+				children: [/* @__PURE__ */ _("div", { children: [
+					/* @__PURE__ */ g("h1", {
+						className: "text-2xl font-semibold",
+						children: O.name
+					}),
+					/* @__PURE__ */ g("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: O.description ?? "No description"
+					}),
+					/* @__PURE__ */ g("p", {
+						className: "text-xs text-muted-foreground mt-1",
+						children: F ? /* @__PURE__ */ _("button", {
+							type: "button",
+							className: "hover:underline",
+							onClick: () => w(`/projects/project-detail-page/${encodeURIComponent(F.id)}`),
+							children: [
+								F.name,
+								" (",
+								F.key,
+								")"
+							]
+						}) : "No project"
+					})
+				] }), /* @__PURE__ */ g(c, { budget: O })]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ _("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [/* @__PURE__ */ _(y, { children: [/* @__PURE__ */ g(x, { children: /* @__PURE__ */ g(S, { children: "Plan vs actual" }) }), /* @__PURE__ */ _(b, {
+						className: "space-y-3",
+						children: [
+							/* @__PURE__ */ _("div", {
+								className: "grid grid-cols-3 gap-4 text-center",
+								children: [
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-lg font-semibold tabular-nums",
+										children: a(O.plannedAmount, O.currency)
+									}), /* @__PURE__ */ g("p", {
+										className: "text-xs text-muted-foreground",
+										children: "Planned"
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-lg font-semibold tabular-nums",
+										children: a(O.spentAmount, O.currency)
+									}), /* @__PURE__ */ g("p", {
+										className: "text-xs text-muted-foreground",
+										children: "Spent"
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: `text-lg font-semibold tabular-nums ${M < 0 ? "text-status-error-text" : ""}`,
+										children: a(M, O.currency)
+									}), /* @__PURE__ */ g("p", {
+										className: "text-xs text-muted-foreground",
+										children: "Remaining"
+									})] })
+								]
+							}),
+							/* @__PURE__ */ g("div", {
+								role: "meter",
+								"aria-valuemin": 0,
+								"aria-valuemax": Math.max(100, j ?? 0),
+								"aria-valuenow": j ?? 0,
+								"aria-label": `${j === null ? "no plan" : `${j}%`} spent`,
+								className: `h-3 w-full overflow-hidden rounded-full ${A.track}`,
+								children: /* @__PURE__ */ g("div", {
+									className: `h-full rounded-full ${A.fill}`,
+									style: { width: `${Math.min(j ?? 0, 100)}%` }
+								})
+							}),
+							/* @__PURE__ */ _("span", {
+								className: `flex items-center gap-1 text-xs ${A.text}`,
+								children: [/* @__PURE__ */ g(A.icon, {
+									className: "h-3 w-3",
+									"aria-hidden": !0
+								}), j === null ? "No plan set" : `${j}% of plan spent`]
+							})
+						]
+					})] }), /* @__PURE__ */ _(y, { children: [/* @__PURE__ */ _(x, {
+						className: "flex flex-row items-center justify-between space-y-0",
+						children: [/* @__PURE__ */ _(S, {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ g(p, { className: "h-4 w-4" }),
+								"Expenses (",
+								N.length,
+								")"
+							]
+						}), /* @__PURE__ */ g(d, {
+							budgetId: O.id,
+							projectId: O.projectId,
+							refetchQueries: P
+						})]
+					}), /* @__PURE__ */ _(b, {
+						className: "space-y-2",
+						children: [N.length === 0 && /* @__PURE__ */ g("p", {
+							className: "text-sm text-muted-foreground text-center py-4",
+							children: "No expenses logged yet."
+						}), N.map((e) => /* @__PURE__ */ _("div", {
+							className: "flex items-start justify-between gap-3 rounded-md border p-3",
+							children: [/* @__PURE__ */ _("div", {
+								className: "min-w-0 space-y-1",
+								children: [
+									/* @__PURE__ */ g("p", {
+										className: "text-sm font-medium truncate",
+										children: e.description
+									}),
+									/* @__PURE__ */ _("p", {
+										className: "text-xs text-muted-foreground",
+										children: [
+											new Date(e.date).toLocaleDateString(),
+											e.category ? ` · ${e.category}` : "",
+											" ·",
+											" ",
+											/* @__PURE__ */ g(t, { id: e.createdBy })
+										]
+									}),
+									e.referenceUrl && /* @__PURE__ */ g("a", {
+										href: e.referenceUrl,
+										target: "_blank",
+										rel: "noreferrer",
+										className: "text-xs text-primary hover:underline",
+										children: "Receipt / reference"
+									})
+								]
+							}), /* @__PURE__ */ _("div", {
+								className: "flex shrink-0 items-center gap-2",
+								children: [
+									/* @__PURE__ */ g("span", {
+										className: "text-sm font-semibold tabular-nums",
+										children: a(e.amount, O.currency)
+									}),
+									/* @__PURE__ */ g(u, {
+										expense: e,
+										refetchQueries: P
+									}),
+									/* @__PURE__ */ g(l, {
+										id: e.id,
+										description: e.description,
+										refetchQueries: P
+									})
+								]
+							})]
+						}, e.id))]
+					})] })]
+				}), /* @__PURE__ */ g("div", {
+					className: "space-y-6",
+					children: /* @__PURE__ */ _(y, { children: [/* @__PURE__ */ g(x, { children: /* @__PURE__ */ g(S, { children: "Details" }) }), /* @__PURE__ */ _(b, {
+						className: "space-y-2 text-sm",
+						children: [
+							/* @__PURE__ */ _("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ g("span", {
+									className: "text-muted-foreground",
+									children: "Status"
+								}), /* @__PURE__ */ g("span", { children: s(O.status) })]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ g("span", {
+									className: "text-muted-foreground",
+									children: "Currency"
+								}), /* @__PURE__ */ g("span", {
+									className: "font-mono",
+									children: O.currency
+								})]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ g("span", {
+									className: "text-muted-foreground",
+									children: "Period"
+								}), /* @__PURE__ */ _("span", { children: [
+									O.periodStart ? new Date(O.periodStart).toLocaleDateString() : "—",
+									" –",
+									" ",
+									O.periodEnd ? new Date(O.periodEnd).toLocaleDateString() : "—"
+								] })]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ g("span", {
+									className: "text-muted-foreground",
+									children: "Created by"
+								}), /* @__PURE__ */ g(t, { id: O.createdBy })]
+							}),
+							O.approverId && /* @__PURE__ */ _("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ g("span", {
+									className: "text-muted-foreground",
+									children: "Approved by"
+								}), /* @__PURE__ */ g(t, { id: O.approverId })]
+							}),
+							O.approvedAt && /* @__PURE__ */ _("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ g("span", {
+									className: "text-muted-foreground",
+									children: "Approved"
+								}), /* @__PURE__ */ g("span", { children: new Date(O.approvedAt).toLocaleDateString() })]
+							})
+						]
+					})] })
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { w as ProjectsBudgetDetailPagePage };
+
+//# sourceMappingURL=ProjectsBudgetDetailPagePage.js.map

package/dist/planmagnet/pages/ProjectsBudgetDetailPagePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectsBudgetDetailPagePage.js","names":[],"sources":["../../../src/planmagnet/pages/ProjectsBudgetDetailPagePage.tsx"],"sourcesContent":["import { gql } from '@apollo/client';\nimport { useQuery } from '@apollo/client/react';\nimport { Button, Card, CardContent, CardHeader, CardTitle } from '@burdenoff/fe-libs/ui';\nimport { ArrowLeft, Receipt } from 'lucide-react';\nimport { enumLabel } from '../controls/WorkItemControls';\nimport { BudgetHeaderActions } from '../budgets/BudgetControls';\nimport {\n  LogExpenseDialog,\n  EditExpenseDialog,\n  DeleteExpenseButton,\n} from '../budgets/ExpenseControls';\nimport { budgetState, budgetUsage, BUDGET_STATE_STYLE, money } from '../budgets/budgetMath';\nimport { PersonName } from '../people/People';\nimport { useEntityId } from '../hooks/useEntityId';\nimport { usePlanMagnetNavigate } from '../providers/PlanMagnetProvider';\n\n/** One budget (BOFF-8047): its plan vs spend, and every expense logged against it. */\n\nconst GET_BUDGET = gql`\n  query GetBudget($id: ID!) {\n    planmagnetBudget(id: $id) {\n      id\n      name\n      description\n      status\n      plannedAmount\n      spentAmount\n      currency\n      periodStart\n      periodEnd\n      approverId\n      approvedAt\n      createdBy\n      createdAt\n      projectId\n      project {\n        id\n        name\n        key\n      }\n      expenses {\n        id\n        description\n        amount\n        category\n        date\n        workItemId\n        referenceUrl\n        createdBy\n        createdAt\n      }\n    }\n  }\n`;\n\ninterface ExpenseNode {\n  id: string;\n  description: string;\n  amount: number;\n  category: string | null;\n  date: string;\n  workItemId: string | null;\n  referenceUrl: string | null;\n  createdBy: string;\n  createdAt: string;\n}\n\ninterface BudgetNode {\n  id: string;\n  name: string;\n  description: string | null;\n  status: string;\n  plannedAmount: number;\n  spentAmount: number;\n  currency: string;\n  periodStart: string | null;\n  periodEnd: string | null;\n  approverId: string | null;\n  approvedAt: string | null;\n  createdBy: string;\n  createdAt: string;\n  projectId: string;\n  project: { id: string; name: string; key: string } | null;\n  expenses: ExpenseNode[];\n}\n\nexport function ProjectsBudgetDetailPagePage() {\n  const budgetId = useEntityId('budgetId');\n  const navigate = usePlanMagnetNavigate();\n\n  const { data, loading, error } = useQuery<{ planmagnetBudget: BudgetNode | null }>(GET_BUDGET, {\n    variables: { id: budgetId },\n    skip: !budgetId,\n  });\n\n  if (!budgetId) {\n    return (\n      <div className=\"p-6 text-sm text-muted-foreground\">\n        No budget selected. Open one from the list.\n      </div>\n    );\n  }\n  // Only before the first load: a refetch after a write must not blank the page.\n  if (loading && !data) {\n    return (\n      <div className=\"flex items-center justify-center p-12\">\n        <div className=\"animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full\" />\n      </div>\n    );\n  }\n  if (error) {\n    return (\n      <div className=\"p-6 space-y-3\">\n        <p role=\"alert\" className=\"text-sm text-destructive\">\n          The budget could not be loaded: {error.message}\n        </p>\n        <Button size=\"sm\" variant=\"ghost\" onClick={() => navigate('/projects/budgets-page')}>\n          <ArrowLeft className=\"mr-1 h-4 w-4\" />\n          All budgets\n        </Button>\n      </div>\n    );\n  }\n  const budget = data?.planmagnetBudget;\n  if (!budget) {\n    return (\n      <div className=\"p-6 space-y-3\">\n        <p className=\"text-sm text-muted-foreground\">\n          This budget does not exist in this workspace, or it was deleted.\n        </p>\n        <Button size=\"sm\" variant=\"ghost\" onClick={() => navigate('/projects/budgets-page')}>\n          <ArrowLeft className=\"mr-1 h-4 w-4\" />\n          All budgets\n        </Button>\n      </div>\n    );\n  }\n\n  const usage = budgetUsage(budget.plannedAmount, budget.spentAmount);\n  const state = budgetState(usage);\n  const style = BUDGET_STATE_STYLE[state];\n  const percent = usage === null ? null : Math.round(usage * 100);\n  const remaining = budget.plannedAmount - budget.spentAmount;\n  const expenses = [...budget.expenses].sort((a, b) => b.date.localeCompare(a.date));\n  const refetchQueries = ['GetBudget', 'BudgetsList', 'GetBudgetPerformance'];\n  // A local const so the null-check narrows through the closure below (a nested arrow reading\n  // `budget.project` directly would not stay narrowed, forcing a non-null assertion instead).\n  const project = budget.project;\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <Button size=\"sm\" variant=\"ghost\" onClick={() => navigate('/projects/budgets-page')}>\n        <ArrowLeft className=\"mr-1 h-4 w-4\" />\n        All budgets\n      </Button>\n\n      <div className=\"flex flex-wrap items-start justify-between gap-4\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">{budget.name}</h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {budget.description ?? 'No description'}\n          </p>\n          <p className=\"text-xs text-muted-foreground mt-1\">\n            {project ? (\n              <button\n                type=\"button\"\n                className=\"hover:underline\"\n                onClick={() =>\n                  navigate(`/projects/project-detail-page/${encodeURIComponent(project.id)}`)\n                }\n              >\n                {project.name} ({project.key})\n              </button>\n            ) : (\n              'No project'\n            )}\n          </p>\n        </div>\n        <BudgetHeaderActions budget={budget} />\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n        <div className=\"lg:col-span-2 space-y-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Plan vs actual</CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-3\">\n              <div className=\"grid grid-cols-3 gap-4 text-center\">\n                <div>\n                  <p className=\"text-lg font-semibold tabular-nums\">\n                    {money(budget.plannedAmount, budget.currency)}\n                  </p>\n                  <p className=\"text-xs text-muted-foreground\">Planned</p>\n                </div>\n                <div>\n                  <p className=\"text-lg font-semibold tabular-nums\">\n                    {money(budget.spentAmount, budget.currency)}\n                  </p>\n                  <p className=\"text-xs text-muted-foreground\">Spent</p>\n                </div>\n                <div>\n                  <p\n                    className={`text-lg font-semibold tabular-nums ${remaining < 0 ? 'text-status-error-text' : ''}`}\n                  >\n                    {money(remaining, budget.currency)}\n                  </p>\n                  <p className=\"text-xs text-muted-foreground\">Remaining</p>\n                </div>\n              </div>\n              <div\n                role=\"meter\"\n                aria-valuemin={0}\n                aria-valuemax={Math.max(100, percent ?? 0)}\n                aria-valuenow={percent ?? 0}\n                aria-label={`${percent === null ? 'no plan' : `${percent}%`} spent`}\n                className={`h-3 w-full overflow-hidden rounded-full ${style.track}`}\n              >\n                <div\n                  className={`h-full rounded-full ${style.fill}`}\n                  style={{ width: `${Math.min(percent ?? 0, 100)}%` }}\n                />\n              </div>\n              <span className={`flex items-center gap-1 text-xs ${style.text}`}>\n                <style.icon className=\"h-3 w-3\" aria-hidden={true} />\n                {percent === null ? 'No plan set' : `${percent}% of plan spent`}\n              </span>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader className=\"flex flex-row items-center justify-between space-y-0\">\n              <CardTitle className=\"flex items-center gap-2\">\n                <Receipt className=\"h-4 w-4\" />\n                Expenses ({expenses.length})\n              </CardTitle>\n              <LogExpenseDialog\n                budgetId={budget.id}\n                projectId={budget.projectId}\n                refetchQueries={refetchQueries}\n              />\n            </CardHeader>\n            <CardContent className=\"space-y-2\">\n              {expenses.length === 0 && (\n                <p className=\"text-sm text-muted-foreground text-center py-4\">\n                  No expenses logged yet.\n                </p>\n              )}\n              {expenses.map((expense) => (\n                <div\n                  key={expense.id}\n                  className=\"flex items-start justify-between gap-3 rounded-md border p-3\"\n                >\n                  <div className=\"min-w-0 space-y-1\">\n                    <p className=\"text-sm font-medium truncate\">{expense.description}</p>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {new Date(expense.date).toLocaleDateString()}\n                      {expense.category ? ` · ${expense.category}` : ''} ·{' '}\n                      <PersonName id={expense.createdBy} />\n                    </p>\n                    {expense.referenceUrl && (\n                      <a\n                        href={expense.referenceUrl}\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                        className=\"text-xs text-primary hover:underline\"\n                      >\n                        Receipt / reference\n                      </a>\n                    )}\n                  </div>\n                  <div className=\"flex shrink-0 items-center gap-2\">\n                    <span className=\"text-sm font-semibold tabular-nums\">\n                      {money(expense.amount, budget.currency)}\n                    </span>\n                    <EditExpenseDialog expense={expense} refetchQueries={refetchQueries} />\n                    <DeleteExpenseButton\n                      id={expense.id}\n                      description={expense.description}\n                      refetchQueries={refetchQueries}\n                    />\n                  </div>\n                </div>\n              ))}\n            </CardContent>\n          </Card>\n        </div>\n\n        <div className=\"space-y-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Details</CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-2 text-sm\">\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">Status</span>\n                <span>{enumLabel(budget.status)}</span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">Currency</span>\n                <span className=\"font-mono\">{budget.currency}</span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">Period</span>\n                <span>\n                  {budget.periodStart ? new Date(budget.periodStart).toLocaleDateString() : '—'} –{' '}\n                  {budget.periodEnd ? new Date(budget.periodEnd).toLocaleDateString() : '—'}\n                </span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">Created by</span>\n                <PersonName id={budget.createdBy} />\n              </div>\n              {budget.approverId && (\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Approved by</span>\n                  <PersonName id={budget.approverId} />\n                </div>\n              )}\n              {budget.approvedAt && (\n                <div className=\"flex justify-between\">\n                  <span className=\"text-muted-foreground\">Approved</span>\n                  <span>{new Date(budget.approvedAt).toLocaleDateString()}</span>\n                </div>\n              )}\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/planmagnet/pages/ProjectsBudgetsPagePage.d.ts

@@ -0,0 +1,2 @@
+export declare function ProjectsBudgetsPagePage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProjectsBudgetsPagePage.d.ts.map

package/dist/planmagnet/pages/ProjectsBudgetsPagePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectsBudgetsPagePage.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/pages/ProjectsBudgetsPagePage.tsx"],"names":[],"mappings":"AA8DA,wBAAgB,uBAAuB,4CAmKtC"}