@burdenoff/microfe-planmagnet 2026.928.4 → 2026.928.6

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"}

package/dist/planmagnet/pages/ProjectsBudgetsPagePage.js

@@ -0,0 +1,186 @@
+import { usePlanMagnet as e, usePlanMagnetNavigate as t } from "../providers/PlanMagnetProvider.js";
+import { BUDGET_STATE_STYLE as n, budgetState as r, budgetUsage as i, money as a } from "../budgets/budgetMath.js";
+import { ProjectSelect as o } from "../controls/Pickers.js";
+import { enumLabel as s } from "../controls/WorkItemControls.js";
+import { detailPath as c, rowLinkProps as l } from "../utils/rowNavigation.js";
+import { BUDGET_STATUSES as u, CreateBudgetDialog as d } from "../budgets/BudgetControls.js";
+import { useDeferredValue as f, useState as p } from "react";
+import { Wallet as m } from "lucide-react";
+import { useSearchParams as h } from "react-router";
+import { gql as g } from "@apollo/client";
+import { useQuery as _ } from "@apollo/client/react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useI18n as b } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Card as x, CardContent as S, CardHeader as C, CardTitle as w, Input as T } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/pages/ProjectsBudgetsPagePage.tsx
+var E = g`
+  query BudgetsList(
+    $workspaceId: ID!
+    $filter: PlanmagnetBudgetFilter
+    $pagination: PlanmagnetPaginationInput
+  ) {
+    planmagnetBudgets(workspaceId: $workspaceId, filter: $filter, pagination: $pagination) {
+      items {
+        id
+        name
+        status
+        plannedAmount
+        spentAmount
+        currency
+        projectId
+        project {
+          id
+          name
+        }
+      }
+      totalCount
+    }
+  }
+`, D = ["ALL", ...u];
+function O() {
+	let { workspaceId: u } = e(), g = t(), { t: O } = b(), [k] = h(), [A, j] = p(k.get("projectId") ?? ""), [M, N] = p("ALL"), [P, F] = p(""), I = f(P.trim()), L = {
+		...A ? { projectId: A } : {},
+		...M === "ALL" ? {} : { status: M },
+		...I ? { search: I } : {}
+	}, { data: R, loading: z, error: B } = _(E, {
+		variables: {
+			workspaceId: u ?? "",
+			filter: L,
+			pagination: { first: 100 }
+		},
+		skip: !u
+	}), V = R?.planmagnetBudgets.items ?? [], H = R?.planmagnetBudgets.totalCount ?? 0;
+	return /* @__PURE__ */ y("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
+					className: "text-2xl font-semibold",
+					children: O("planmagnet.budgets.title", "Budgets")
+				}), /* @__PURE__ */ v("p", {
+					className: "text-sm text-muted-foreground",
+					children: R ? O("planmagnet.budgets.subtitle", "{{count}} budget(s) across projects", { count: H }) : O("planmagnet.budgets.subtitleFallback", "Financial plans, tracked against actuals")
+				})] }), /* @__PURE__ */ v(d, {
+					presetProjectId: A || void 0,
+					onCreated: (e) => g(c("/projects/budget-detail-page", e))
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [/* @__PURE__ */ v("div", {
+					className: "w-full max-w-xs",
+					children: /* @__PURE__ */ v(o, {
+						id: "budgets-project-filter",
+						value: A,
+						onChange: j,
+						noneLabel: O("planmagnet.budgets.allProjects", "All projects")
+					})
+				}), /* @__PURE__ */ v(T, {
+					"aria-label": O("planmagnet.budgets.search", "Search budgets"),
+					placeholder: O("planmagnet.budgets.searchPlaceholder", "Search by name or description"),
+					className: "w-full max-w-xs",
+					value: P,
+					onChange: (e) => F(e.target.value)
+				})]
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "flex flex-wrap gap-1",
+				role: "group",
+				"aria-label": O("planmagnet.budgets.statusFilter", "Filter by status"),
+				children: D.map((e) => /* @__PURE__ */ v("button", {
+					type: "button",
+					"aria-pressed": M === e,
+					onClick: () => N(e),
+					className: `px-3 py-1.5 text-sm rounded-md ${M === e ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"}`,
+					children: e === "ALL" ? O("planmagnet.budgets.allStatuses", "All") : s(e)
+				}, e))
+			}),
+			B && /* @__PURE__ */ y("p", {
+				role: "alert",
+				className: "text-sm text-destructive",
+				children: [
+					O("planmagnet.budgets.errorLoading", "Budgets could not be loaded"),
+					": ",
+					B.message
+				]
+			}),
+			z && !R && /* @__PURE__ */ v("div", {
+				className: "flex items-center justify-center p-12",
+				children: /* @__PURE__ */ v("div", { className: "animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" })
+			}),
+			R && V.length === 0 && !B && /* @__PURE__ */ v("p", {
+				className: "text-center text-sm text-muted-foreground py-8",
+				children: A || M !== "ALL" || I ? O("planmagnet.budgets.emptyFiltered", "No budgets match these filters.") : O("planmagnet.budgets.empty", "No budgets yet. Create the first one.")
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+				children: V.map((e) => {
+					let t = i(e.plannedAmount, e.spentAmount), o = n[r(t)], u = t === null ? null : Math.round(t * 100);
+					return /* @__PURE__ */ y(x, {
+						...l(() => g(c("/projects/budget-detail-page", e.id)), e.name),
+						children: [/* @__PURE__ */ v(C, {
+							className: "pb-2",
+							children: /* @__PURE__ */ y("div", {
+								className: "flex items-center justify-between gap-2",
+								children: [/* @__PURE__ */ y(w, {
+									className: "text-base flex items-center gap-2",
+									children: [/* @__PURE__ */ v(m, { className: "h-4 w-4 text-primary" }), e.name]
+								}), /* @__PURE__ */ v("span", {
+									className: "text-xs px-2 py-0.5 rounded-full bg-muted capitalize",
+									children: s(e.status)
+								})]
+							})
+						}), /* @__PURE__ */ y(S, {
+							className: "space-y-3",
+							children: [
+								/* @__PURE__ */ v("p", {
+									className: "text-xs text-muted-foreground",
+									children: e.project?.name ?? O("planmagnet.budgets.noProject", "No project")
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex justify-between text-sm",
+									children: [/* @__PURE__ */ v("span", {
+										className: "text-muted-foreground",
+										children: O("planmagnet.budgets.spent", "Spent")
+									}), /* @__PURE__ */ y("span", {
+										className: "tabular-nums",
+										children: [
+											a(e.spentAmount, e.currency),
+											" /",
+											" ",
+											a(e.plannedAmount, e.currency)
+										]
+									})]
+								}),
+								/* @__PURE__ */ v("div", {
+									role: "meter",
+									"aria-valuemin": 0,
+									"aria-valuemax": Math.max(100, u ?? 0),
+									"aria-valuenow": u ?? 0,
+									"aria-label": `${e.name}: ${u === null ? "no plan" : `${u}%`} spent`,
+									className: `h-2 w-full overflow-hidden rounded-full ${o.track}`,
+									children: /* @__PURE__ */ v("div", {
+										className: `h-full rounded-full ${o.fill}`,
+										style: { width: `${Math.min(u ?? 0, 100)}%` }
+									})
+								}),
+								/* @__PURE__ */ y("span", {
+									className: `flex items-center gap-1 text-xs ${o.text}`,
+									children: [/* @__PURE__ */ v(o.icon, {
+										className: "h-3 w-3",
+										"aria-hidden": !0
+									}), u === null ? O("planmagnet.budgets.noPlan", "No plan set") : `${u}%`]
+								})
+							]
+						})]
+					}, e.id);
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { O as ProjectsBudgetsPagePage };
+
+//# sourceMappingURL=ProjectsBudgetsPagePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectsBudgetsPagePage.js","names":[],"sources":["../../../src/planmagnet/pages/ProjectsBudgetsPagePage.tsx"],"sourcesContent":["import { useDeferredValue, useState } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { gql } from '@apollo/client';\nimport { useQuery } from '@apollo/client/react';\nimport { Card, CardContent, CardHeader, CardTitle, Input } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Wallet } from 'lucide-react';\nimport { enumLabel } from '../controls/WorkItemControls';\nimport { ProjectSelect } from '../controls/Pickers';\nimport { CreateBudgetDialog, BUDGET_STATUSES } from '../budgets/BudgetControls';\nimport { budgetState, budgetUsage, BUDGET_STATE_STYLE, money } from '../budgets/budgetMath';\nimport { usePlanMagnet, usePlanMagnetNavigate } from '../providers/PlanMagnetProvider';\nimport { rowLinkProps, detailPath } from '../utils/rowNavigation';\n\n/**\n * Budgets (BOFF-8047). The service and the read side (spent-vs-planned meter on Analytics,\n * `analytics/DeliveryHealthCards.tsx`) have existed since 2026-09-24; this page is the first place a budget\n * can be created or edited, closing the `api-only` gap in `planmagnet-specs/CAPABILITY_REGISTER.md`.\n */\n\nconst BUDGETS = gql`\n  query BudgetsList(\n    $workspaceId: ID!\n    $filter: PlanmagnetBudgetFilter\n    $pagination: PlanmagnetPaginationInput\n  ) {\n    planmagnetBudgets(workspaceId: $workspaceId, filter: $filter, pagination: $pagination) {\n      items {\n        id\n        name\n        status\n        plannedAmount\n        spentAmount\n        currency\n        projectId\n        project {\n          id\n          name\n        }\n      }\n      totalCount\n    }\n  }\n`;\n\ninterface BudgetRow {\n  id: string;\n  name: string;\n  status: string;\n  plannedAmount: number;\n  spentAmount: number;\n  currency: string;\n  projectId: string;\n  project: { id: string; name: string } | null;\n}\n\ninterface BudgetsData {\n  planmagnetBudgets: { items: BudgetRow[]; totalCount: number };\n}\n\nconst STATUS_TABS = ['ALL', ...BUDGET_STATUSES] as const;\n\nexport function ProjectsBudgetsPagePage() {\n  const { workspaceId } = usePlanMagnet();\n  const navigate = usePlanMagnetNavigate();\n  const { t } = useI18n();\n  const [params] = useSearchParams();\n  // Entry point from a project's own page (\"View budgets\"): preset, but still changeable here.\n  const [projectId, setProjectId] = useState(params.get('projectId') ?? '');\n  const [status, setStatus] = useState<(typeof STATUS_TABS)[number]>('ALL');\n  const [search, setSearch] = useState('');\n  const term = useDeferredValue(search.trim());\n\n  const filter = {\n    ...(projectId ? { projectId } : {}),\n    ...(status !== 'ALL' ? { status } : {}),\n    ...(term ? { search: term } : {}),\n  };\n  const { data, loading, error } = useQuery<BudgetsData>(BUDGETS, {\n    variables: { workspaceId: workspaceId ?? '', filter, pagination: { first: 100 } },\n    skip: !workspaceId,\n  });\n\n  const budgets = data?.planmagnetBudgets.items ?? [];\n  const totalCount = data?.planmagnetBudgets.totalCount ?? 0;\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">{t('planmagnet.budgets.title', 'Budgets')}</h1>\n          <p className=\"text-sm text-muted-foreground\">\n            {data\n              ? t('planmagnet.budgets.subtitle', '{{count}} budget(s) across projects', {\n                  count: totalCount,\n                })\n              : t(\n                  'planmagnet.budgets.subtitleFallback',\n                  'Financial plans, tracked against actuals'\n                )}\n          </p>\n        </div>\n        <CreateBudgetDialog\n          presetProjectId={projectId || undefined}\n          onCreated={(id) => navigate(detailPath('/projects/budget-detail-page', id))}\n        />\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <div className=\"w-full max-w-xs\">\n          <ProjectSelect\n            id=\"budgets-project-filter\"\n            value={projectId}\n            onChange={setProjectId}\n            noneLabel={t('planmagnet.budgets.allProjects', 'All projects')}\n          />\n        </div>\n        <Input\n          aria-label={t('planmagnet.budgets.search', 'Search budgets')}\n          placeholder={t('planmagnet.budgets.searchPlaceholder', 'Search by name or description')}\n          className=\"w-full max-w-xs\"\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n        />\n      </div>\n      <div\n        className=\"flex flex-wrap gap-1\"\n        role=\"group\"\n        aria-label={t('planmagnet.budgets.statusFilter', 'Filter by status')}\n      >\n        {STATUS_TABS.map((s) => (\n          <button\n            key={s}\n            type=\"button\"\n            aria-pressed={status === s}\n            onClick={() => setStatus(s)}\n            className={`px-3 py-1.5 text-sm rounded-md ${status === s ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted'}`}\n          >\n            {s === 'ALL' ? t('planmagnet.budgets.allStatuses', 'All') : enumLabel(s)}\n          </button>\n        ))}\n      </div>\n\n      {error && (\n        <p role=\"alert\" className=\"text-sm text-destructive\">\n          {t('planmagnet.budgets.errorLoading', 'Budgets could not be loaded')}: {error.message}\n        </p>\n      )}\n      {/* Only before the first load: a refetch (after create/edit/delete) must not blank the page. */}\n      {loading && !data && (\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      {data && budgets.length === 0 && !error && (\n        <p className=\"text-center text-sm text-muted-foreground py-8\">\n          {projectId || status !== 'ALL' || term\n            ? t('planmagnet.budgets.emptyFiltered', 'No budgets match these filters.')\n            : t('planmagnet.budgets.empty', 'No budgets yet. Create the first one.')}\n        </p>\n      )}\n\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        {budgets.map((budget) => {\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          return (\n            <Card\n              key={budget.id}\n              {...rowLinkProps(\n                () => navigate(detailPath('/projects/budget-detail-page', budget.id)),\n                budget.name\n              )}\n            >\n              <CardHeader className=\"pb-2\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <CardTitle className=\"text-base flex items-center gap-2\">\n                    <Wallet className=\"h-4 w-4 text-primary\" />\n                    {budget.name}\n                  </CardTitle>\n                  <span className=\"text-xs px-2 py-0.5 rounded-full bg-muted capitalize\">\n                    {enumLabel(budget.status)}\n                  </span>\n                </div>\n              </CardHeader>\n              <CardContent className=\"space-y-3\">\n                <p className=\"text-xs text-muted-foreground\">\n                  {budget.project?.name ?? t('planmagnet.budgets.noProject', 'No project')}\n                </p>\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-muted-foreground\">\n                    {t('planmagnet.budgets.spent', 'Spent')}\n                  </span>\n                  <span className=\"tabular-nums\">\n                    {money(budget.spentAmount, budget.currency)} /{' '}\n                    {money(budget.plannedAmount, budget.currency)}\n                  </span>\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={`${budget.name}: ${percent === null ? 'no plan' : `${percent}%`} spent`}\n                  className={`h-2 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 ? t('planmagnet.budgets.noPlan', 'No plan set') : `${percent}%`}\n                </span>\n              </CardContent>\n            </Card>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

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

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

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