@burdenoff/microfe-planmagnet 2026.928.9 → 2026.928.11

package/dist/planmagnet/pages/ProductsEditProductPagePage.js

@@ -1,278 +1,380 @@
-import { usePlanMagnet as e, usePlanMagnetNavigate as t } from "../providers/PlanMagnetProvider.js";
-import { PersonName as n } from "../people/People.js";
-import { LEAVES_PAGE_CONTEXT as r, throwOnError as i } from "../utils/mutationResult.js";
-import { ConfirmButton as a } from "../controls/ConfirmButton.js";
-import { PlanningFocusBadge as o, PlanningFocusSelect as s } from "../roadmaps/planningFocus.js";
-import { useMemo as c, useState as l } from "react";
-import { ArrowLeft as u, Loader2 as d, Package as f, Save as p, Trash2 as m } from "lucide-react";
-import { useParams as h } from "react-router";
-import { gql as g } from "@apollo/client";
-import { useMutation as _, useQuery as v } from "@apollo/client/react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { Button as x, Card as S, CardContent as C, CardHeader as w, CardTitle as T, Input as E } from "@burdenoff/fe-libs/ui";
+import { usePlanMagnetNavigate as e } from "../providers/PlanMagnetProvider.js";
+import { PersonName as t } from "../people/People.js";
+import { throwOnError as n } from "../utils/mutationResult.js";
+import { useEntityId as r } from "../hooks/useEntityId.js";
+import { enumLabel as i } from "../controls/WorkItemControls.js";
+import { detailPath as a } from "../utils/rowNavigation.js";
+import { ProductHeaderActions as o } from "../product/ProductControls.js";
+import { useMemo as s, useState as c } from "react";
+import { ArrowLeft as l, Loader2 as u, Package as d, Save as f } from "lucide-react";
+import { gql as p } from "@apollo/client";
+import { useMutation as m, 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, Input as C } from "@burdenoff/fe-libs/ui";
 //#region src/planmagnet/pages/ProductsEditProductPagePage.tsx
-var D = g`
-  query GetRoadmapForEdit($id: ID!) {
-    planmagnetRoadmap(id: $id) {
+var w = [
+	"CONCEPT",
+	"DEVELOPMENT",
+	"BETA",
+	"LAUNCHED",
+	"MATURE",
+	"DEPRECATED"
+], T = p`
+  query GetProductForEdit($id: ID!) {
+    planmagnetProduct(id: $id) {
       id
       workspaceId
       name
       description
-      type
-      planningFocus
-      isPublic
+      vision
+      lifecycleStage
       ownerId
+      archivedAt
+      northStar {
+        name
+        unit
+        target
+        current
+        window
+      }
       createdAt
       updatedAt
-      items {
-        id
-        status
-      }
     }
   }
-`, O = g`
-  mutation UpdateRoadmap($id: ID!, $input: PlanmagnetUpdateRoadmapInput!) {
-    planmagnetUpdateRoadmap(id: $id, input: $input) {
+`, E = p`
+  mutation UpdateProduct($id: ID!, $input: PlanmagnetUpdateProductInput!) {
+    planmagnetUpdateProduct(id: $id, input: $input) {
       id
       name
       description
-      type
-      planningFocus
-      isPublic
+      vision
+      lifecycleStage
       ownerId
+      northStar {
+        name
+        unit
+        target
+        current
+        window
+      }
       updatedAt
     }
   }
-`, k = g`
-  mutation DeleteRoadmap($id: ID!) {
-    planmagnetDeleteRoadmap(id: $id)
-  }
-`;
-function A() {
-	let { workspaceId: g } = e(), A = t(), j = h().id ?? "", { data: M, loading: N, error: P } = v(D, {
-		variables: { id: j },
-		skip: !j
-	}), [F, { loading: I }] = _(O, {
+`, D = {
+	name: "",
+	unit: "",
+	target: "",
+	current: "",
+	window: ""
+};
+function O() {
+	let p = e(), O = r("productId") ?? "", { data: k, loading: A, error: j } = h(T, {
+		variables: { id: O },
+		skip: !O
+	}), [M, { loading: N }] = m(E, {
 		refetchQueries: [
-			"ListRoadmaps",
-			"ListRoadmapsPage",
-			"GetRoadmapForEdit",
-			"GetRoadmapDetail",
-			"GetRoadmapDetailPage"
+			"GetProducts",
+			"GetProductForEdit",
+			"GetProductDetail"
 		],
 		awaitRefetchQueries: !0
-	}), [L, { loading: R }] = _(k, {
-		refetchQueries: ["ListRoadmaps", "ListRoadmapsPage"],
-		context: r
-	}), [z, B] = l(null), [V, H] = l(!1), U = M?.planmagnetRoadmap, W = c(() => ({
-		name: U?.name ?? "",
-		description: U?.description ?? "",
-		planningFocus: U?.planningFocus ?? null,
-		isPublic: U?.isPublic ?? !1
-	}), [U]), [G, K] = l({}), q = {
-		...W,
+	}), [P, F] = c(null), [I, L] = c(!1), R = k?.planmagnetProduct, z = s(() => ({
+		name: R?.name ?? "",
+		description: R?.description ?? "",
+		vision: R?.vision ?? "",
+		lifecycleStage: R?.lifecycleStage ?? "CONCEPT"
+	}), [R]), B = s(() => R?.northStar ? {
+		name: R.northStar.name,
+		unit: R.northStar.unit,
+		target: String(R.northStar.target),
+		current: String(R.northStar.current),
+		window: R.northStar.window
+	} : D, [R]), [V, H] = c({}), U = {
+		...z,
+		...V
+	}, W = (e) => H(e), [G, K] = c({}), q = {
+		...B,
 		...G
-	}, J = (e) => K(e), Y = async () => {
-		B(null), H(!1);
+	}, J = (e) => K(e), Y = Object.values(q).some((e) => e.trim() !== ""), X = q.name.trim() && q.unit.trim() && q.window.trim() && q.target.trim() !== "" && !Number.isNaN(Number(q.target)) && q.current.trim() !== "" && !Number.isNaN(Number(q.current)), Z = U.vision.trim() === "", Q = U.name.trim() !== "" && !Z && (!Y || X), $ = async () => {
+		F(null), L(!1);
 		try {
-			await i(F({ variables: {
-				id: j,
+			await n(M({ variables: {
+				id: O,
 				input: {
-					name: q.name,
-					description: q.description.trim() || null,
-					planningFocus: q.planningFocus,
-					isPublic: q.isPublic
+					name: U.name,
+					description: U.description.trim() || null,
+					vision: U.vision,
+					lifecycleStage: U.lifecycleStage,
+					...X ? { northStar: {
+						name: q.name,
+						unit: q.unit,
+						target: Number(q.target),
+						current: Number(q.current),
+						window: q.window
+					} } : {}
 				}
-			} })), H(!0);
+			} })), L(!0);
 		} catch (e) {
-			B(e instanceof Error ? e.message : "The product could not be saved.");
-		}
-	}, X = async () => {
-		B(null);
-		try {
-			await i(L({ variables: { id: j } })), A("/products/products-page");
-		} catch (e) {
-			B(e instanceof Error ? e.message : "The product could not be deleted.");
+			F(e instanceof Error ? e.message : "The product could not be saved.");
 		}
 	};
-	return N && !M ? /* @__PURE__ */ y("div", {
+	return A && !k ? /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center p-12",
-		children: /* @__PURE__ */ y(d, { className: "h-8 w-8 animate-spin text-muted-foreground" })
-	}) : P ? /* @__PURE__ */ b("div", {
+		children: /* @__PURE__ */ g(u, { className: "h-8 w-8 animate-spin text-muted-foreground" })
+	}) : j ? /* @__PURE__ */ _("div", {
 		className: "p-6 text-destructive",
-		children: ["Failed to load product: ", P.message]
-	}) : U ? /* @__PURE__ */ b("div", {
+		children: ["Failed to load product: ", j.message]
+	}) : R ? /* @__PURE__ */ _("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ _("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ b("div", {
+				children: [/* @__PURE__ */ _("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ y(x, {
+					children: [/* @__PURE__ */ g(v, {
 						variant: "ghost",
 						size: "sm",
-						onClick: () => A("/products/products-page"),
-						children: /* @__PURE__ */ y(u, { className: "h-4 w-4" })
-					}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h1", {
+						onClick: () => p(a("/products/product-detail-page", R.id)),
+						children: /* @__PURE__ */ g(l, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
 						className: "text-2xl font-semibold",
 						children: "Edit Product"
-					}), /* @__PURE__ */ b("p", {
+					}), /* @__PURE__ */ _("p", {
 						className: "text-sm text-muted-foreground",
-						children: ["Editing ", U.name]
+						children: ["Editing ", R.name]
 					})] })]
-				}), /* @__PURE__ */ b(x, {
-					size: "sm",
-					onClick: Y,
-					disabled: I,
-					children: [I ? /* @__PURE__ */ y(d, { className: "mr-1 h-4 w-4 animate-spin" }) : /* @__PURE__ */ y(p, { className: "mr-1 h-4 w-4" }), "Save Changes"]
+				}), /* @__PURE__ */ _("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ _(v, {
+						size: "sm",
+						onClick: () => void $(),
+						disabled: N || !Q,
+						children: [N ? /* @__PURE__ */ g(u, { className: "mr-1 h-4 w-4 animate-spin" }) : /* @__PURE__ */ g(f, { className: "mr-1 h-4 w-4" }), "Save Changes"]
+					}), /* @__PURE__ */ g(o, {
+						productId: R.id,
+						name: R.name,
+						archivedAt: R.archivedAt
+					})]
 				})]
 			}),
-			V && /* @__PURE__ */ y("div", {
+			I && /* @__PURE__ */ g("div", {
 				role: "status",
 				className: "p-3 bg-muted text-status-success-text rounded-md text-sm",
 				children: "Changes saved."
 			}),
-			z && /* @__PURE__ */ y("div", {
+			P && /* @__PURE__ */ g("div", {
 				role: "alert",
 				className: "p-3 rounded-md bg-destructive/10 text-destructive text-sm",
-				children: z
+				children: P
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ _("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ y("div", {
+				children: [/* @__PURE__ */ _("div", {
 					className: "lg:col-span-2 space-y-6",
-					children: /* @__PURE__ */ b(S, { children: [/* @__PURE__ */ y(w, { children: /* @__PURE__ */ y(T, { children: "Basic Information" }) }), /* @__PURE__ */ b(C, {
+					children: [/* @__PURE__ */ _(y, { children: [/* @__PURE__ */ g(x, { children: /* @__PURE__ */ g(S, { children: "Basic Information" }) }), /* @__PURE__ */ _(b, {
 						className: "space-y-4",
 						children: [
-							/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 								className: "text-sm font-medium",
 								children: "Product Name"
-							}), /* @__PURE__ */ y(E, {
-								value: q.name,
-								onChange: (e) => J({
-									...q,
+							}), /* @__PURE__ */ g(C, {
+								value: U.name,
+								onChange: (e) => W({
+									...U,
 									name: e.target.value
 								}),
 								className: "mt-1"
 							})] }),
-							/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 								className: "text-sm font-medium",
 								children: "Description"
-							}), /* @__PURE__ */ y("textarea", {
-								className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[80px]",
-								value: q.description,
-								onChange: (e) => J({
-									...q,
+							}), /* @__PURE__ */ g("textarea", {
+								className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[60px]",
+								value: U.description,
+								onChange: (e) => W({
+									...U,
 									description: e.target.value
 								})
 							})] }),
-							/* @__PURE__ */ y(s, {
-								value: q.planningFocus,
-								onChange: (e) => J({
-									...q,
-									planningFocus: e
+							/* @__PURE__ */ _("div", { children: [
+								/* @__PURE__ */ g("label", {
+									htmlFor: "product-edit-vision",
+									className: "text-sm font-medium",
+									children: "Vision *"
+								}),
+								/* @__PURE__ */ g("textarea", {
+									id: "product-edit-vision",
+									className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[80px]",
+									value: U.vision,
+									"aria-invalid": Z,
+									"aria-describedby": Z ? "product-edit-vision-hint" : void 0,
+									onChange: (e) => W({
+										...U,
+										vision: e.target.value
+									})
+								}),
+								Z && /* @__PURE__ */ g("p", {
+									id: "product-edit-vision-hint",
+									className: "mt-1 text-xs text-muted-foreground",
+									children: "Add a vision to save changes."
 								})
-							}),
-							/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+							] }),
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 								className: "text-sm font-medium",
-								children: "Visibility"
-							}), /* @__PURE__ */ y("div", {
-								className: "mt-1 flex gap-2",
-								children: [!1, !0].map((e) => /* @__PURE__ */ y("button", {
-									onClick: () => J({
-										...q,
-										isPublic: e
-									}),
-									className: `rounded-md px-3 py-1.5 text-sm ${q.isPublic === e ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`,
-									children: e ? "Public" : "Private"
-								}, String(e)))
+								children: "Lifecycle Stage"
+							}), /* @__PURE__ */ g("select", {
+								"aria-label": "Lifecycle stage",
+								"data-testid": "product-lifecycle-stage",
+								className: "mt-1 w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm",
+								value: U.lifecycleStage,
+								onChange: (e) => W({
+									...U,
+									lifecycleStage: e.target.value
+								}),
+								children: w.map((e) => /* @__PURE__ */ g("option", {
+									value: e,
+									children: i(e)
+								}, e))
 							})] })
 						]
-					})] })
-				}), /* @__PURE__ */ b("div", {
+					})] }), /* @__PURE__ */ _(y, { children: [/* @__PURE__ */ g(x, { children: /* @__PURE__ */ g(S, { children: "North Star metric" }) }), /* @__PURE__ */ _(b, {
+						className: "space-y-4",
+						children: [/* @__PURE__ */ _("div", {
+							className: "grid grid-cols-2 gap-4",
+							children: [
+								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+									className: "text-sm font-medium",
+									children: "Metric name"
+								}), /* @__PURE__ */ g(C, {
+									value: q.name,
+									onChange: (e) => J({
+										...q,
+										name: e.target.value
+									}),
+									className: "mt-1"
+								})] }),
+								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+									className: "text-sm font-medium",
+									children: "Unit"
+								}), /* @__PURE__ */ g(C, {
+									value: q.unit,
+									onChange: (e) => J({
+										...q,
+										unit: e.target.value
+									}),
+									className: "mt-1"
+								})] }),
+								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+									className: "text-sm font-medium",
+									children: "Target"
+								}), /* @__PURE__ */ g(C, {
+									type: "number",
+									value: q.target,
+									onChange: (e) => J({
+										...q,
+										target: e.target.value
+									}),
+									className: "mt-1"
+								})] }),
+								/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+									className: "text-sm font-medium",
+									children: "Current"
+								}), /* @__PURE__ */ g(C, {
+									type: "number",
+									value: q.current,
+									onChange: (e) => J({
+										...q,
+										current: e.target.value
+									}),
+									className: "mt-1"
+								})] }),
+								/* @__PURE__ */ _("div", {
+									className: "col-span-2",
+									children: [/* @__PURE__ */ g("label", {
+										className: "text-sm font-medium",
+										children: "Window"
+									}), /* @__PURE__ */ g(C, {
+										value: q.window,
+										onChange: (e) => J({
+											...q,
+											window: e.target.value
+										}),
+										className: "mt-1"
+									})]
+								})
+							]
+						}), Y && !X && /* @__PURE__ */ g("p", {
+							className: "text-xs text-destructive",
+							children: "Fill in every North Star field (or clear them all) — name, unit, target, current and window are all required together."
+						})]
+					})] })]
+				}), /* @__PURE__ */ g("div", {
 					className: "space-y-6",
-					children: [/* @__PURE__ */ b(S, { children: [/* @__PURE__ */ y(w, { children: /* @__PURE__ */ y(T, { children: "Product Info" }) }), /* @__PURE__ */ b(C, {
+					children: /* @__PURE__ */ _(y, { children: [/* @__PURE__ */ g(x, { children: /* @__PURE__ */ g(S, { children: "Product Info" }) }), /* @__PURE__ */ _(b, {
 						className: "space-y-3 text-sm",
 						children: [
-							/* @__PURE__ */ b("div", {
+							/* @__PURE__ */ _("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ y(f, { className: "h-4 w-4 text-primary" }), /* @__PURE__ */ y("span", {
+								children: [/* @__PURE__ */ g(d, { className: "h-4 w-4 text-primary" }), /* @__PURE__ */ g("span", {
 									className: "font-medium",
-									children: U.name
+									children: R.name
 								})]
 							}),
-							/* @__PURE__ */ b("div", {
+							/* @__PURE__ */ _("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ y("span", {
+								children: [/* @__PURE__ */ g("span", {
 									className: "text-muted-foreground",
-									children: "Items"
-								}), /* @__PURE__ */ y("span", {
-									className: "font-medium",
-									children: U.items?.length ?? 0
+									children: "Lifecycle stage"
+								}), /* @__PURE__ */ g("span", {
+									className: "font-medium capitalize",
+									children: i(R.lifecycleStage)
 								})]
 							}),
-							/* @__PURE__ */ b("div", {
+							/* @__PURE__ */ _("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ y("span", {
+								children: [/* @__PURE__ */ g("span", {
 									className: "text-muted-foreground",
-									children: "Planning focus"
-								}), /* @__PURE__ */ y(o, { focus: U.planningFocus })]
-							}),
-							/* @__PURE__ */ b("div", {
-								className: "flex justify-between",
-								children: [/* @__PURE__ */ y("span", {
-									className: "text-muted-foreground",
-									children: "Visibility"
-								}), /* @__PURE__ */ y("span", {
+									children: "Status"
+								}), /* @__PURE__ */ g("span", {
 									className: "font-medium",
-									children: U.isPublic ? "Public" : "Private"
+									children: R.archivedAt ? "Archived" : "Active"
 								})]
 							}),
-							/* @__PURE__ */ b("div", {
+							/* @__PURE__ */ _("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ y("span", {
+								children: [/* @__PURE__ */ g("span", {
 									className: "text-muted-foreground",
 									children: "Owner"
-								}), /* @__PURE__ */ y("span", {
+								}), /* @__PURE__ */ g("span", {
 									className: "font-medium",
-									children: /* @__PURE__ */ y(n, { id: U.ownerId })
+									children: /* @__PURE__ */ g(t, { id: R.ownerId })
 								})]
 							}),
-							/* @__PURE__ */ b("div", {
+							/* @__PURE__ */ _("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ y("span", {
+								children: [/* @__PURE__ */ g("span", {
 									className: "text-muted-foreground",
 									children: "Created"
-								}), /* @__PURE__ */ y("span", { children: new Date(U.createdAt).toLocaleDateString() })]
+								}), /* @__PURE__ */ g("span", { children: new Date(R.createdAt).toLocaleDateString() })]
 							}),
-							/* @__PURE__ */ b("div", {
+							/* @__PURE__ */ _("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ y("span", {
+								children: [/* @__PURE__ */ g("span", {
 									className: "text-muted-foreground",
 									children: "Updated"
-								}), /* @__PURE__ */ y("span", { children: new Date(U.updatedAt).toLocaleDateString() })]
+								}), /* @__PURE__ */ g("span", { children: new Date(R.updatedAt).toLocaleDateString() })]
 							})
 						]
-					})] }), /* @__PURE__ */ b(S, { children: [/* @__PURE__ */ y(w, { children: /* @__PURE__ */ y(T, { children: "Danger Zone" }) }), /* @__PURE__ */ y(C, { children: /* @__PURE__ */ y(a, {
-						label: R ? "Deleting…" : "Delete product",
-						variant: "outline",
-						icon: /* @__PURE__ */ y(m, { className: "mr-1 h-4 w-4" }),
-						title: `Delete ${U.name}?`,
-						description: "The product's roadmap and its items are deleted. This cannot be undone here.",
-						confirmLabel: "Delete product",
-						destructive: !0,
-						disabled: R,
-						onConfirm: () => void X()
-					}) })] })]
+					})] })
 				})]
 			})
 		]
-	}) : /* @__PURE__ */ y("div", {
+	}) : /* @__PURE__ */ g("div", {
 		className: "p-6 text-muted-foreground",
 		children: "No product found."
 	});
 }
 //#endregion
-export { A as ProductsEditProductPagePage };
+export { O as ProductsEditProductPagePage };
 
 //# sourceMappingURL=ProductsEditProductPagePage.js.map