@burdenoff/microfe-planmagnet 2026.928.3 → 2026.928.5

package/dist/planmagnet/pages/ProgramsProgramDetailPagePage.js

@@ -0,0 +1,178 @@
+import { PersonName as e } from "../people/People.js";
+import { enumLabel as t } from "../controls/WorkItemControls.js";
+import { ProgramHeaderActions as n, ProgramProjectsCard as r } from "../controls/ProgramControls.js";
+import { Calendar as i, FolderKanban as a, Loader2 as o } from "lucide-react";
+import { useParams as s } from "react-router";
+import { gql as c } from "@apollo/client";
+import { useQuery as l } from "@apollo/client/react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Badge as f, Card as p, CardContent as m, CardHeader as h, CardTitle as g } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/pages/ProgramsProgramDetailPagePage.tsx
+var _ = c`
+  query GetProgram($id: ID!) {
+    planmagnetProgram(id: $id) {
+      id
+      workspaceId
+      name
+      description
+      status
+      startDate
+      endDate
+      ownerId
+      budgetTotal
+      currency
+      tags
+      createdAt
+      updatedAt
+      projects {
+        id
+        name
+        status
+      }
+    }
+  }
+`;
+function v() {
+	let c = s().id ?? "", { data: v, loading: y, error: b } = l(_, {
+		variables: { id: c },
+		skip: !c
+	});
+	if (y && !v) return /* @__PURE__ */ u("div", {
+		className: "flex items-center justify-center p-12",
+		children: /* @__PURE__ */ u(o, { className: "h-8 w-8 animate-spin text-muted-foreground" })
+	});
+	if (b) return /* @__PURE__ */ d("div", {
+		className: "p-6 text-destructive",
+		children: ["Failed to load program: ", b.message]
+	});
+	let x = v?.planmagnetProgram;
+	return x ? /* @__PURE__ */ d("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ d("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ u(a, { className: "h-5 w-5 text-primary" }),
+					/* @__PURE__ */ u("h1", {
+						className: "text-2xl font-semibold",
+						children: x.name
+					}),
+					/* @__PURE__ */ u(f, {
+						variant: "outline",
+						className: "text-xs",
+						children: t(x.status)
+					})
+				]
+			}), /* @__PURE__ */ d("p", {
+				className: "text-sm text-muted-foreground mt-1",
+				children: [
+					x.projects.length,
+					" project",
+					x.projects.length === 1 ? "" : "s"
+				]
+			})] }), /* @__PURE__ */ u(n, {
+				programId: x.id,
+				name: x.name,
+				status: x.status
+			})]
+		}), /* @__PURE__ */ d("div", {
+			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+			children: [/* @__PURE__ */ d("div", {
+				className: "lg:col-span-2 space-y-6",
+				children: [/* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, { children: /* @__PURE__ */ u(g, { children: "Overview" }) }), /* @__PURE__ */ u(m, { children: /* @__PURE__ */ u("p", {
+					className: "text-sm",
+					children: x.description ?? "No description provided."
+				}) })] }), /* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, { children: /* @__PURE__ */ u(g, { children: "Projects" }) }), /* @__PURE__ */ u(m, { children: /* @__PURE__ */ u(r, {
+					programId: x.id,
+					projects: x.projects
+				}) })] })]
+			}), /* @__PURE__ */ d("div", {
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, { children: /* @__PURE__ */ u(g, { children: "Timeline" }) }), /* @__PURE__ */ d(m, {
+						className: "space-y-3 text-sm",
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ u(i, { className: "h-4 w-4 text-muted-foreground" }),
+								/* @__PURE__ */ u("span", {
+									className: "text-muted-foreground",
+									children: "Start:"
+								}),
+								/* @__PURE__ */ u("span", {
+									className: "font-medium",
+									children: x.startDate ? new Date(x.startDate).toLocaleDateString() : "Not set"
+								})
+							]
+						}), /* @__PURE__ */ d("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ u(i, { className: "h-4 w-4 text-muted-foreground" }),
+								/* @__PURE__ */ u("span", {
+									className: "text-muted-foreground",
+									children: "End:"
+								}),
+								/* @__PURE__ */ u("span", {
+									className: "font-medium",
+									children: x.endDate ? new Date(x.endDate).toLocaleDateString() : "Not set"
+								})
+							]
+						})]
+					})] }),
+					/* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, { children: /* @__PURE__ */ u(g, { children: "Details" }) }), /* @__PURE__ */ d(m, {
+						className: "space-y-2 text-sm",
+						children: [
+							/* @__PURE__ */ d("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-muted-foreground",
+									children: "Owner"
+								}), /* @__PURE__ */ u(e, { id: x.ownerId })]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-muted-foreground",
+									children: "Budget"
+								}), /* @__PURE__ */ u("span", {
+									className: "font-medium",
+									children: x.budgetTotal == null ? "Not set" : `${x.currency ?? ""} ${x.budgetTotal.toLocaleString()}`.trim()
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-muted-foreground",
+									children: "Created"
+								}), /* @__PURE__ */ u("span", { children: new Date(x.createdAt).toLocaleDateString() })]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-muted-foreground",
+									children: "Updated"
+								}), /* @__PURE__ */ u("span", { children: new Date(x.updatedAt).toLocaleDateString() })]
+							})
+						]
+					})] }),
+					x.tags.length > 0 && /* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, { children: /* @__PURE__ */ u(g, { children: "Tags" }) }), /* @__PURE__ */ u(m, {
+						className: "flex flex-wrap gap-1",
+						children: x.tags.map((e) => /* @__PURE__ */ u(f, {
+							variant: "outline",
+							className: "text-xs",
+							children: e
+						}, e))
+					})] })
+				]
+			})]
+		})]
+	}) : /* @__PURE__ */ u("div", {
+		className: "p-6 text-muted-foreground",
+		children: "Program not found."
+	});
+}
+//#endregion
+export { v as ProgramsProgramDetailPagePage };
+
+//# sourceMappingURL=ProgramsProgramDetailPagePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgramsProgramDetailPagePage.js","names":[],"sources":["../../../src/planmagnet/pages/ProgramsProgramDetailPagePage.tsx"],"sourcesContent":["import { gql } from '@apollo/client';\nimport { useQuery } from '@apollo/client/react';\nimport { Card, CardContent, CardHeader, CardTitle, Badge } from '@burdenoff/fe-libs/ui';\nimport { FolderKanban, Calendar, Loader2 } from 'lucide-react';\nimport { useParams } from 'react-router';\nimport { PersonName } from '../people/People';\nimport { enumLabel } from '../controls/WorkItemControls';\nimport { ProgramHeaderActions, ProgramProjectsCard } from '../controls/ProgramControls';\n\nconst GET_PROGRAM = gql`\n  query GetProgram($id: ID!) {\n    planmagnetProgram(id: $id) {\n      id\n      workspaceId\n      name\n      description\n      status\n      startDate\n      endDate\n      ownerId\n      budgetTotal\n      currency\n      tags\n      createdAt\n      updatedAt\n      projects {\n        id\n        name\n        status\n      }\n    }\n  }\n`;\n\ninterface ProjectNode {\n  id: string;\n  name: string;\n  status: string;\n}\n\nexport function ProgramsProgramDetailPagePage() {\n  const params = useParams<{ id: string }>();\n  const programId = params.id ?? '';\n\n  const { data, loading, error } = useQuery<{\n    planmagnetProgram: {\n      id: string;\n      name: string;\n      description: string | null;\n      status: string;\n      startDate: string | null;\n      endDate: string | null;\n      ownerId: string;\n      budgetTotal: number | null;\n      currency: string | null;\n      tags: string[];\n      createdAt: string;\n      updatedAt: string;\n      projects: ProjectNode[];\n    } | null;\n  }>(GET_PROGRAM, { variables: { id: programId }, skip: !programId });\n\n  // Only before the first load: a refetch must not blank the page (it unmounts every component on it and\n  // loses their state).\n  if (loading && !data) {\n    return (\n      <div className=\"flex items-center justify-center p-12\">\n        <Loader2 className=\"h-8 w-8 animate-spin text-muted-foreground\" />\n      </div>\n    );\n  }\n\n  if (error) {\n    return <div className=\"p-6 text-destructive\">Failed to load program: {error.message}</div>;\n  }\n\n  const program = data?.planmagnetProgram;\n  if (!program) return <div className=\"p-6 text-muted-foreground\">Program not found.</div>;\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <div className=\"flex items-center gap-2\">\n            <FolderKanban className=\"h-5 w-5 text-primary\" />\n            <h1 className=\"text-2xl font-semibold\">{program.name}</h1>\n            <Badge variant=\"outline\" className=\"text-xs\">\n              {enumLabel(program.status)}\n            </Badge>\n          </div>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {program.projects.length} project{program.projects.length === 1 ? '' : 's'}\n          </p>\n        </div>\n        <ProgramHeaderActions programId={program.id} name={program.name} status={program.status} />\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        <div className=\"lg:col-span-2 space-y-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Overview</CardTitle>\n            </CardHeader>\n            <CardContent>\n              <p className=\"text-sm\">{program.description ?? 'No description provided.'}</p>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardHeader>\n              <CardTitle>Projects</CardTitle>\n            </CardHeader>\n            <CardContent>\n              <ProgramProjectsCard programId={program.id} projects={program.projects} />\n            </CardContent>\n          </Card>\n        </div>\n\n        <div className=\"space-y-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Timeline</CardTitle>\n            </CardHeader>\n            <CardContent className=\"space-y-3 text-sm\">\n              <div className=\"flex items-center gap-2\">\n                <Calendar className=\"h-4 w-4 text-muted-foreground\" />\n                <span className=\"text-muted-foreground\">Start:</span>\n                <span className=\"font-medium\">\n                  {program.startDate ? new Date(program.startDate).toLocaleDateString() : 'Not set'}\n                </span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Calendar className=\"h-4 w-4 text-muted-foreground\" />\n                <span className=\"text-muted-foreground\">End:</span>\n                <span className=\"font-medium\">\n                  {program.endDate ? new Date(program.endDate).toLocaleDateString() : 'Not set'}\n                </span>\n              </div>\n            </CardContent>\n          </Card>\n\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\">Owner</span>\n                <PersonName id={program.ownerId} />\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">Budget</span>\n                <span className=\"font-medium\">\n                  {program.budgetTotal != null\n                    ? `${program.currency ?? ''} ${program.budgetTotal.toLocaleString()}`.trim()\n                    : 'Not set'}\n                </span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">Created</span>\n                <span>{new Date(program.createdAt).toLocaleDateString()}</span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">Updated</span>\n                <span>{new Date(program.updatedAt).toLocaleDateString()}</span>\n              </div>\n            </CardContent>\n          </Card>\n\n          {program.tags.length > 0 && (\n            <Card>\n              <CardHeader>\n                <CardTitle>Tags</CardTitle>\n              </CardHeader>\n              <CardContent className=\"flex flex-wrap gap-1\">\n                {program.tags.map((tag) => (\n                  <Badge key={tag} variant=\"outline\" className=\"text-xs\">\n                    {tag}\n                  </Badge>\n                ))}\n              </CardContent>\n            </Card>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgramsProgramsPagePage.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/pages/ProgramsProgramsPagePage.tsx"],"names":[],"mappings":"AA6DA,wBAAgB,wBAAwB,4CAsIvC"}

package/dist/planmagnet/pages/ProgramsProgramsPagePage.js

@@ -0,0 +1,157 @@
+import { usePlanMagnet as e, usePlanMagnetNavigate as t } from "../providers/PlanMagnetProvider.js";
+import { PersonName as n } from "../people/People.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";
+import { gql as d } from "@apollo/client";
+import { useQuery as f } from "@apollo/client/react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Badge as h, Button as g, Card as _, CardContent as v, CardHeader as y, CardTitle as b, Input as x } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/pages/ProgramsProgramsPagePage.tsx
+var S = d`
+  query ListPrograms(
+    $workspaceId: ID!
+    $filter: PlanmagnetProgramFilter
+    $pagination: PlanmagnetPaginationInput
+  ) {
+    planmagnetPrograms(workspaceId: $workspaceId, filter: $filter, pagination: $pagination) {
+      items {
+        id
+        name
+        description
+        status
+        startDate
+        endDate
+        ownerId
+        budgetTotal
+        currency
+        tags
+        updatedAt
+        projects {
+          id
+        }
+      }
+      totalCount
+    }
+  }
+`;
+function C() {
+	let d = t(), { workspaceId: C } = e(), [w, T] = s("all"), [E, D] = s(""), { data: O, loading: k, error: A } = f(S, {
+		variables: {
+			workspaceId: C,
+			pagination: { first: 50 },
+			filter: {
+				...w === "all" ? {} : { status: w },
+				...E.trim() ? { search: E.trim() } : {}
+			}
+		},
+		skip: !C
+	});
+	if (k && !O) return /* @__PURE__ */ p("div", {
+		className: "flex items-center justify-center p-12",
+		children: /* @__PURE__ */ p(l, { className: "h-8 w-8 animate-spin text-muted-foreground" })
+	});
+	if (A) return /* @__PURE__ */ m("div", {
+		className: "p-6 text-destructive",
+		children: ["Failed to load programs: ", A.message]
+	});
+	let j = O?.planmagnetPrograms.items ?? [], M = O?.planmagnetPrograms.totalCount ?? 0, N = ["all", ...o];
+	return /* @__PURE__ */ m("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
+					className: "text-2xl font-semibold",
+					children: "Programs"
+				}), /* @__PURE__ */ m("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						M,
+						" program",
+						M === 1 ? "" : "s",
+						" across the workspace"
+					]
+				})] }), /* @__PURE__ */ m(g, {
+					size: "sm",
+					onClick: () => d("/products/create-program-page"),
+					children: [/* @__PURE__ */ p(u, { className: "mr-1 h-4 w-4" }), "New Program"]
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "flex flex-wrap items-center gap-4",
+				children: [/* @__PURE__ */ p(x, {
+					"aria-label": "Search programs",
+					placeholder: "Search by name…",
+					value: E,
+					onChange: (e) => D(e.target.value),
+					className: "max-w-xs"
+				}), /* @__PURE__ */ p("div", {
+					className: "flex items-center gap-2 flex-wrap",
+					children: N.map((e) => /* @__PURE__ */ p("button", {
+						type: "button",
+						"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" : r(e)
+					}, e))
+				})]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "grid grid-cols-1 md:grid-cols-2 gap-4",
+				children: j.map((e) => /* @__PURE__ */ m(_, {
+					...a(() => d(i("/products/program-detail-page", e.id)), e.name),
+					children: [/* @__PURE__ */ p(y, {
+						className: "pb-2",
+						children: /* @__PURE__ */ m("div", {
+							className: "flex items-center justify-between gap-2",
+							children: [/* @__PURE__ */ m(b, {
+								className: "text-base flex items-center gap-2",
+								children: [/* @__PURE__ */ p(c, { className: "h-4 w-4 text-primary" }), e.name]
+							}), /* @__PURE__ */ p(h, {
+								variant: "outline",
+								className: "text-xs",
+								children: r(e.status)
+							})]
+						})
+					}), /* @__PURE__ */ m(v, {
+						className: "space-y-3",
+						children: [
+							/* @__PURE__ */ p("p", {
+								className: "text-sm text-muted-foreground",
+								children: e.description ?? "No description"
+							}),
+							/* @__PURE__ */ m("div", {
+								className: "flex items-center gap-4 text-xs text-muted-foreground",
+								children: [/* @__PURE__ */ m("span", { children: [
+									e.projects.length,
+									" project",
+									e.projects.length === 1 ? "" : "s"
+								] }), e.startDate && e.endDate && /* @__PURE__ */ m("span", { children: [
+									new Date(e.startDate).toLocaleDateString(),
+									" -",
+									" ",
+									new Date(e.endDate).toLocaleDateString()
+								] })]
+							}),
+							/* @__PURE__ */ m("div", {
+								className: "flex items-center justify-between text-xs text-muted-foreground border-t pt-2",
+								children: [/* @__PURE__ */ m("span", { children: ["Owner: ", /* @__PURE__ */ p(n, { id: e.ownerId })] }), /* @__PURE__ */ p("span", { children: e.budgetTotal == null ? "No budget set" : `${e.currency ?? ""} ${e.budgetTotal.toLocaleString()}`.trim() })]
+							})
+						]
+					})]
+				}, e.id))
+			}),
+			j.length === 0 && /* @__PURE__ */ p("p", {
+				className: "text-center text-muted-foreground py-8",
+				children: w !== "all" || E ? "No programs match the selected filters." : "No programs yet. Create one to group related projects together."
+			})
+		]
+	});
+}
+//#endregion
+export { C as ProgramsProgramsPagePage };
+
+//# sourceMappingURL=ProgramsProgramsPagePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgramsProgramsPagePage.js","names":[],"sources":["../../../src/planmagnet/pages/ProgramsProgramsPagePage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useQuery } from '@apollo/client/react';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  Badge,\n  Button,\n  Input,\n} from '@burdenoff/fe-libs/ui';\nimport { FolderKanban, Plus, Loader2 } from 'lucide-react';\nimport { usePlanMagnet, usePlanMagnetNavigate } from '../providers/PlanMagnetProvider';\nimport { rowLinkProps, detailPath } from '../utils/rowNavigation';\nimport { PersonName } from '../people/People';\nimport { enumLabel } from '../controls/WorkItemControls';\nimport { PROGRAM_STATUSES } from '../controls/ProgramControls';\n\nconst LIST_PROGRAMS = gql`\n  query ListPrograms(\n    $workspaceId: ID!\n    $filter: PlanmagnetProgramFilter\n    $pagination: PlanmagnetPaginationInput\n  ) {\n    planmagnetPrograms(workspaceId: $workspaceId, filter: $filter, pagination: $pagination) {\n      items {\n        id\n        name\n        description\n        status\n        startDate\n        endDate\n        ownerId\n        budgetTotal\n        currency\n        tags\n        updatedAt\n        projects {\n          id\n        }\n      }\n      totalCount\n    }\n  }\n`;\n\ninterface ProgramNode {\n  id: string;\n  name: string;\n  description: string | null;\n  status: string;\n  startDate: string | null;\n  endDate: string | null;\n  ownerId: string;\n  budgetTotal: number | null;\n  currency: string | null;\n  tags: string[];\n  projects: { id: string }[];\n}\n\nexport function ProgramsProgramsPagePage() {\n  const navigate = usePlanMagnetNavigate();\n  const { workspaceId } = usePlanMagnet();\n  const [statusFilter, setStatusFilter] = useState<string>('all');\n  const [search, setSearch] = useState('');\n\n  const { data, loading, error } = useQuery<{\n    planmagnetPrograms: { items: ProgramNode[]; totalCount: number };\n  }>(LIST_PROGRAMS, {\n    variables: {\n      workspaceId,\n      pagination: { first: 50 },\n      filter: {\n        ...(statusFilter !== 'all' ? { status: statusFilter } : {}),\n        ...(search.trim() ? { search: search.trim() } : {}),\n      },\n    },\n    skip: !workspaceId,\n  });\n\n  // Only before the first load: a refetch must not blank the page (it unmounts every component on it and\n  // loses their state).\n  if (loading && !data) {\n    return (\n      <div className=\"flex items-center justify-center p-12\">\n        <Loader2 className=\"h-8 w-8 animate-spin text-muted-foreground\" />\n      </div>\n    );\n  }\n\n  if (error) {\n    return <div className=\"p-6 text-destructive\">Failed to load programs: {error.message}</div>;\n  }\n\n  const programs = data?.planmagnetPrograms.items ?? [];\n  const totalCount = data?.planmagnetPrograms.totalCount ?? 0;\n  const statuses = ['all', ...PROGRAM_STATUSES];\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">Programs</h1>\n          <p className=\"text-sm text-muted-foreground\">\n            {totalCount} program{totalCount === 1 ? '' : 's'} across the workspace\n          </p>\n        </div>\n        <Button size=\"sm\" onClick={() => navigate('/products/create-program-page')}>\n          <Plus className=\"mr-1 h-4 w-4\" />\n          New Program\n        </Button>\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Input\n          aria-label=\"Search programs\"\n          placeholder=\"Search by name…\"\n          value={search}\n          onChange={(e) => setSearch(e.target.value)}\n          className=\"max-w-xs\"\n        />\n        <div className=\"flex items-center gap-2 flex-wrap\">\n          {statuses.map((s) => (\n            <button\n              key={s}\n              type=\"button\"\n              aria-pressed={statusFilter === s}\n              onClick={() => setStatusFilter(s)}\n              className={`px-2 py-1 text-xs rounded-md capitalize ${statusFilter === s ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}\n            >\n              {s === 'all' ? 'All' : enumLabel(s)}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        {programs.map((program) => (\n          <Card\n            key={program.id}\n            {...rowLinkProps(\n              () => navigate(detailPath('/products/program-detail-page', program.id)),\n              program.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                  <FolderKanban className=\"h-4 w-4 text-primary\" />\n                  {program.name}\n                </CardTitle>\n                <Badge variant=\"outline\" className=\"text-xs\">\n                  {enumLabel(program.status)}\n                </Badge>\n              </div>\n            </CardHeader>\n            <CardContent className=\"space-y-3\">\n              <p className=\"text-sm text-muted-foreground\">\n                {program.description ?? 'No description'}\n              </p>\n              <div className=\"flex items-center gap-4 text-xs text-muted-foreground\">\n                <span>\n                  {program.projects.length} project{program.projects.length === 1 ? '' : 's'}\n                </span>\n                {program.startDate && program.endDate && (\n                  <span>\n                    {new Date(program.startDate).toLocaleDateString()} -{' '}\n                    {new Date(program.endDate).toLocaleDateString()}\n                  </span>\n                )}\n              </div>\n              <div className=\"flex items-center justify-between text-xs text-muted-foreground border-t pt-2\">\n                <span>\n                  Owner: <PersonName id={program.ownerId} />\n                </span>\n                <span>\n                  {program.budgetTotal != null\n                    ? `${program.currency ?? ''} ${program.budgetTotal.toLocaleString()}`.trim()\n                    : 'No budget set'}\n                </span>\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n      {programs.length === 0 && (\n        <p className=\"text-center text-muted-foreground py-8\">\n          {statusFilter !== 'all' || search\n            ? 'No programs match the selected filters.'\n            : 'No programs yet. Create one to group related projects together.'}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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