@burdenoff/microfe-planmagnet 2026.1002.2 → 2026.1008.1

package/dist/planmagnet/pages/ProductsCustomerSatisfactionPagePage.js

@@ -0,0 +1,251 @@
+import { usePlanMagnet as e } from "../providers/PlanMagnetProvider.js";
+import { useTr as t } from "../../shared/hooks/useTr.js";
+import { isForbidden as n } from "../utils/graphqlErrors.js";
+import { ErrorLine as r } from "../controls/ConfirmButton.js";
+import { METRIC_TYPES as i, pageStateFromSearch as a, windowInput as o } from "../satisfaction/satisfaction.js";
+import { SatisfactionFigureCards as s } from "../satisfaction/SatisfactionFigures.js";
+import { CUSTOMER_SATISFACTION_SUMMARY as c, SATISFACTION_QUERIES as l } from "../satisfaction/satisfactionOperations.js";
+import { ProductSelect as ee, ProjectSelect as te } from "../controls/Pickers.js";
+import { writeUrlParam as u } from "../utils/urlParam.js";
+import { SatisfactionReleaseSelect as d, useSatisfactionReleaseOptions as f } from "../satisfaction/SatisfactionReleaseSelect.js";
+import { SatisfactionImportDialog as p } from "../satisfaction/SatisfactionImportDialog.js";
+import { SatisfactionResponseDialog as m } from "../satisfaction/SatisfactionResponseDialog.js";
+import { SatisfactionResponsesTable as h } from "../satisfaction/SatisfactionResponsesTable.js";
+import { SatisfactionWindowPicker as g } from "../satisfaction/SatisfactionWindowPicker.js";
+import { useSatisfactionAccess as _ } from "../satisfaction/useSatisfactionAccess.js";
+import { useEffect as v, useMemo as y, useState as b } from "react";
+import { Info as x, Loader2 as S, MessageSquareHeart as C, X as ne } from "lucide-react";
+import { useLocation as re } from "react-router";
+import { useApolloClient as ie, useQuery as w } from "@apollo/client/react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { Button as O, Card as k, CardContent as A, CardHeader as j, CardTitle as M } from "@burdenoff/fe-libs/ui";
+import { clearGraphqlFetchResponseCache as N } from "@burdenoff/fe-libs/shared/graphql";
+//#region src/planmagnet/pages/ProductsCustomerSatisfactionPagePage.tsx
+function P() {
+	let P = t(), { workspaceId: F } = e(), I = _(), L = ie(), { releases: R } = f(), { search: ae } = re(), [z, B] = b(() => a(ae, /* @__PURE__ */ new Date())), [V, H] = b(() => o(z.window) ?? { preset: "LAST_90_DAYS" }), [U, W] = b(null), G = (e) => {
+		let t = {
+			...z,
+			...e
+		};
+		B(t);
+		let n = o(t.window);
+		n && H(n);
+	};
+	v(() => {
+		let e = V.preset;
+		u("window", e === "LAST_90_DAYS" ? null : e), u("from", e === "CUSTOM" ? V.from ?? null : null), u("to", e === "CUSTOM" ? V.to ?? null : null), u("product", z.productId || null), u("release", z.releaseId || null), u("project", z.projectId || null), u("metric", z.metricType || null);
+	}, [
+		V,
+		z.productId,
+		z.releaseId,
+		z.projectId,
+		z.metricType
+	]);
+	let K = y(() => ({
+		...z.productId ? { productId: z.productId } : {},
+		...z.releaseId ? { releaseId: z.releaseId } : {},
+		...z.projectId ? { projectId: z.projectId } : {}
+	}), [
+		z.productId,
+		z.releaseId,
+		z.projectId
+	]), q = y(() => ({
+		...K,
+		...z.metricType ? { metricType: z.metricType } : {},
+		window: V
+	}), [
+		K,
+		z.metricType,
+		V
+	]), J = {
+		productId: z.productId,
+		releaseId: z.releaseId,
+		projectId: z.projectId
+	}, Y = !!(z.productId || z.releaseId || z.projectId), { data: X, previousData: oe, loading: Z, error: Q } = w(c, {
+		variables: {
+			workspaceId: F ?? "",
+			filter: {
+				...K,
+				window: V
+			}
+		},
+		skip: !F
+	}), $ = (X ?? oe)?.planmagnetCustomerSatisfaction ?? null, se = Z && !X && !!$, ce = () => {
+		N(), L.refetchQueries({ include: l });
+	};
+	return F ? /* @__PURE__ */ D("div", {
+		className: "space-y-6 p-6",
+		"data-testid": "satisfaction-page",
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "flex flex-wrap items-start justify-between gap-4",
+				children: [/* @__PURE__ */ D("div", {
+					className: "max-w-3xl",
+					children: [/* @__PURE__ */ D("h1", {
+						className: "flex items-center gap-2 text-2xl font-semibold",
+						children: [/* @__PURE__ */ E(C, {
+							className: "h-6 w-6",
+							"aria-hidden": !0
+						}), P("planmagnet.satisfaction.title", "Customer satisfaction")]
+					}), /* @__PURE__ */ E("p", {
+						className: "mt-1 text-sm text-muted-foreground",
+						children: P("planmagnet.satisfaction.subtitle", "CSAT and NPS from what customers said about your products, releases and projects. Responses are entered by your team or imported from a CSV file.")
+					})]
+				}), I.canCreate && /* @__PURE__ */ D("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ E(p, {
+						links: J,
+						onImported: (e) => W({
+							tone: "status",
+							message: P("planmagnet.satisfaction.notice.imported", "Import done — new responses: {{created}}; already imported and skipped: {{skipped}}.", {
+								created: e.createdCount,
+								skipped: e.skippedCount
+							})
+						})
+					}), /* @__PURE__ */ E(m, {
+						links: J,
+						onSaved: () => W({
+							tone: "status",
+							message: P("planmagnet.satisfaction.notice.created", "The response was added.")
+						})
+					})]
+				})]
+			}),
+			I.readOnly && /* @__PURE__ */ D("p", {
+				className: "flex items-center gap-1.5 text-xs text-muted-foreground",
+				"data-testid": "satisfaction-read-only",
+				children: [/* @__PURE__ */ E(x, {
+					className: "h-3.5 w-3.5 shrink-0",
+					"aria-hidden": !0
+				}), P("planmagnet.satisfaction.readOnly", "You can read customer satisfaction. Adding, importing, editing and deleting responses is for product managers.")]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "space-y-3 rounded-lg border p-3",
+				"data-testid": "satisfaction-filters",
+				children: [/* @__PURE__ */ E(g, {
+					value: z.window,
+					onChange: (e) => G({ window: e }),
+					current: $?.window ?? null
+				}), /* @__PURE__ */ D("div", {
+					className: "flex flex-col gap-2 sm:flex-row sm:items-center",
+					children: [/* @__PURE__ */ D("div", {
+						className: "grid flex-1 gap-2 sm:grid-cols-3",
+						children: [
+							/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+								htmlFor: "satisfaction-filter-product",
+								className: "sr-only",
+								children: P("planmagnet.satisfaction.filters.product", "Product")
+							}), /* @__PURE__ */ E(ee, {
+								id: "satisfaction-filter-product",
+								value: z.productId,
+								noneLabel: P("planmagnet.satisfaction.filters.allProducts", "All products"),
+								onChange: (e) => {
+									let t = R.find((e) => e.id === z.releaseId);
+									G({
+										productId: e,
+										releaseId: !t || !t.productId || !e || t.productId === e ? z.releaseId : ""
+									});
+								}
+							})] }),
+							/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+								htmlFor: "satisfaction-filter-release",
+								className: "sr-only",
+								children: P("planmagnet.satisfaction.filters.release", "Release")
+							}), /* @__PURE__ */ E(d, {
+								id: "satisfaction-filter-release",
+								value: z.releaseId,
+								productId: z.productId,
+								noneLabel: P("planmagnet.satisfaction.filters.allReleases", "All releases"),
+								onChange: (e) => G({ releaseId: e })
+							})] }),
+							/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("label", {
+								htmlFor: "satisfaction-filter-project",
+								className: "sr-only",
+								children: P("planmagnet.satisfaction.filters.project", "Project")
+							}), /* @__PURE__ */ E(te, {
+								id: "satisfaction-filter-project",
+								value: z.projectId,
+								noneLabel: P("planmagnet.satisfaction.filters.allProjects", "All projects"),
+								onChange: (e) => G({ projectId: e })
+							})] })
+						]
+					}), Y && /* @__PURE__ */ D(O, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => G({
+							productId: "",
+							releaseId: "",
+							projectId: ""
+						}),
+						"data-testid": "satisfaction-filters-clear",
+						children: [/* @__PURE__ */ E(ne, { className: "mr-1 h-4 w-4" }), P("planmagnet.satisfaction.filters.clear", "Clear filters")]
+					})]
+				})]
+			}),
+			z.productId && /* @__PURE__ */ E("p", {
+				className: "-mt-3 text-xs text-muted-foreground",
+				children: P("planmagnet.satisfaction.filters.productNote", "A product counts its own responses and those about its releases that name no product of their own.")
+			}),
+			U && /* @__PURE__ */ D("div", {
+				role: U.tone,
+				className: `flex items-start justify-between gap-3 rounded-md p-3 text-sm ${U.tone === "alert" ? "bg-status-error-bg-subtle text-status-error-text" : "bg-muted"}`,
+				"data-testid": "satisfaction-notice",
+				children: [/* @__PURE__ */ E("span", { children: U.message }), /* @__PURE__ */ E("button", {
+					type: "button",
+					className: "shrink-0 text-xs text-muted-foreground hover:underline",
+					onClick: () => W(null),
+					children: P("planmagnet.satisfaction.dismiss", "Dismiss")
+				})]
+			}),
+			Z && !$ ? /* @__PURE__ */ D("div", {
+				className: "flex items-center gap-2 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ E(S, { className: "h-4 w-4 animate-spin" }), P("planmagnet.satisfaction.loading", "Loading…")]
+			}) : Q && !$ ? /* @__PURE__ */ E(r, { message: n(Q) ? P("planmagnet.satisfaction.errors.readForbidden", "Your role cannot see customer satisfaction in this workspace.") : P("planmagnet.satisfaction.errors.load", "Customer satisfaction could not be loaded: {{message}}", { message: Q.message }) }) : $ ? /* @__PURE__ */ D(T, { children: [
+				Q && /* @__PURE__ */ E(r, { message: P("planmagnet.satisfaction.errors.refresh", "The figures could not be refreshed: {{message}}", { message: Q.message }) }),
+				se && /* @__PURE__ */ D("p", {
+					className: "flex items-center gap-2 text-xs text-muted-foreground",
+					role: "status",
+					children: [/* @__PURE__ */ E(S, {
+						className: "h-3.5 w-3.5 animate-spin",
+						"aria-hidden": !0
+					}), P("planmagnet.satisfaction.updating", "Updating the figures…")]
+				}),
+				/* @__PURE__ */ E(s, { summary: $ })
+			] }) : null,
+			/* @__PURE__ */ D(k, { children: [/* @__PURE__ */ D(j, {
+				className: "flex flex-row flex-wrap items-center justify-between gap-2 space-y-0",
+				children: [/* @__PURE__ */ E(M, { children: P("planmagnet.satisfaction.list.title", "Responses") }), /* @__PURE__ */ E("div", {
+					className: "flex items-center gap-1 rounded-md border p-0.5",
+					role: "group",
+					"aria-label": P("planmagnet.satisfaction.list.metricFilter", "Metric"),
+					children: ["", ...i].map((e) => /* @__PURE__ */ E("button", {
+						type: "button",
+						"aria-pressed": z.metricType === e,
+						onClick: () => G({ metricType: e }),
+						"data-testid": `satisfaction-metric-${e || "ALL"}`,
+						className: `rounded px-2.5 py-1 text-xs ${z.metricType === e ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"}`,
+						children: e || P("planmagnet.satisfaction.list.allMetrics", "All")
+					}, e || "all"))
+				})]
+			}), /* @__PURE__ */ E(A, { children: /* @__PURE__ */ E(h, {
+				workspaceId: F,
+				filter: q,
+				access: I,
+				links: J,
+				filtered: Y || !!z.metricType,
+				onNotice: (e, t) => W({
+					message: e,
+					tone: t
+				}),
+				onStale: ce
+			}, JSON.stringify(q)) })] })
+		]
+	}) : /* @__PURE__ */ E("div", {
+		className: "p-6 text-sm text-muted-foreground",
+		children: P("planmagnet.satisfaction.noWorkspace", "Choose a workspace to see customer satisfaction.")
+	});
+}
+//#endregion
+export { P as ProductsCustomerSatisfactionPagePage };
+
+//# sourceMappingURL=ProductsCustomerSatisfactionPagePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductsCustomerSatisfactionPagePage.js","names":[],"sources":["../../../src/planmagnet/pages/ProductsCustomerSatisfactionPagePage.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { useLocation } from 'react-router';\nimport { useApolloClient, useQuery } from '@apollo/client/react';\nimport { clearGraphqlFetchResponseCache } from '@burdenoff/fe-libs/shared/graphql';\nimport { Button, Card, CardContent, CardHeader, CardTitle } from '@burdenoff/fe-libs/ui';\nimport { Info, Loader2, MessageSquareHeart, X } from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { usePlanMagnet } from '../providers/PlanMagnetProvider';\nimport { ErrorLine } from '../controls/ConfirmButton';\nimport { ProductSelect, ProjectSelect } from '../controls/Pickers';\nimport { isForbidden } from '../utils/graphqlErrors';\nimport { writeUrlParam } from '../utils/urlParam';\nimport { SatisfactionFigureCards } from '../satisfaction/SatisfactionFigures';\nimport { SatisfactionImportDialog } from '../satisfaction/SatisfactionImportDialog';\nimport {\n  SatisfactionReleaseSelect,\n  useSatisfactionReleaseOptions,\n} from '../satisfaction/SatisfactionReleaseSelect';\nimport { SatisfactionResponseDialog } from '../satisfaction/SatisfactionResponseDialog';\nimport {\n  SatisfactionResponsesTable,\n  type ResponsesFilter,\n} from '../satisfaction/SatisfactionResponsesTable';\nimport { SatisfactionWindowPicker } from '../satisfaction/SatisfactionWindowPicker';\nimport {\n  DEFAULT_WINDOW_PRESET,\n  METRIC_TYPES,\n  pageStateFromSearch,\n  windowInput,\n  type SatisfactionPageState,\n  type SatisfactionWindowInput,\n} from '../satisfaction/satisfaction';\nimport {\n  CUSTOMER_SATISFACTION_SUMMARY,\n  SATISFACTION_QUERIES,\n  type CustomerSatisfactionSummaryData,\n} from '../satisfaction/satisfactionOperations';\nimport { useSatisfactionAccess } from '../satisfaction/useSatisfactionAccess';\n\n/**\n * Customer satisfaction (ANR-21): CSAT — the default delivery KPI — and NPS from customers' answers about products,\n * releases and projects, with the responses behind them. Answers are entered one at a time by team members or\n * imported from a CSV file; product managers add, edit, delete and import, everyone else reads.\n *\n * Every figure shows its response count and its window, and a metric with fewer than five responses reads \"Not enough\n * responses\" — never 0. The window (trailing 30 / 90 / 180 / 365 days, 90 by default, or custom UTC days) and the\n * product / release / project filters apply to the figures and the list alike, and live in the URL so a view is\n * linkable and the product, release and delivery-KPI cards can open it filtered.\n */\n\ntype Notice = { message: string; tone: 'status' | 'alert' };\n\nexport function ProductsCustomerSatisfactionPagePage() {\n  const tr = useTr();\n  const { workspaceId } = usePlanMagnet();\n  const access = useSatisfactionAccess();\n  const client = useApolloClient();\n  const { releases } = useSatisfactionReleaseOptions();\n  // The router's location, not window.location: a link from a product, release or delivery card arrives through the\n  // host's navigate(). Later changes are written back with replaceState (utils/urlParam.ts), never as history entries.\n  const { search } = useLocation();\n  const [state, setState] = useState<SatisfactionPageState>(() =>\n    pageStateFromSearch(search, new Date())\n  );\n  // The last window the service can take: a custom pair being typed never reaches a query half-done.\n  const [lastWindow, setLastWindow] = useState<SatisfactionWindowInput>(\n    () => windowInput(state.window) ?? { preset: DEFAULT_WINDOW_PRESET }\n  );\n  // What the last write did — kept above the figures and the list, which a refetch redraws.\n  const [notice, setNotice] = useState<Notice | null>(null);\n\n  const change = (patch: Partial<SatisfactionPageState>) => {\n    const next = { ...state, ...patch };\n    setState(next);\n    const valid = windowInput(next.window);\n    if (valid) setLastWindow(valid);\n  };\n\n  // The URL carries the view (see pageStateFromSearch); the default window is left out.\n  useEffect(() => {\n    const preset = lastWindow.preset;\n    writeUrlParam('window', preset === DEFAULT_WINDOW_PRESET ? null : preset);\n    writeUrlParam('from', preset === 'CUSTOM' ? (lastWindow.from ?? null) : null);\n    writeUrlParam('to', preset === 'CUSTOM' ? (lastWindow.to ?? null) : null);\n    writeUrlParam('product', state.productId || null);\n    writeUrlParam('release', state.releaseId || null);\n    writeUrlParam('project', state.projectId || null);\n    writeUrlParam('metric', state.metricType || null);\n  }, [lastWindow, state.productId, state.releaseId, state.projectId, state.metricType]);\n\n  const scopeFilter = useMemo(\n    () => ({\n      ...(state.productId ? { productId: state.productId } : {}),\n      ...(state.releaseId ? { releaseId: state.releaseId } : {}),\n      ...(state.projectId ? { projectId: state.projectId } : {}),\n    }),\n    [state.productId, state.releaseId, state.projectId]\n  );\n  const responsesFilter: ResponsesFilter = useMemo(\n    () => ({\n      ...scopeFilter,\n      ...(state.metricType ? { metricType: state.metricType } : {}),\n      window: lastWindow,\n    }),\n    [scopeFilter, state.metricType, lastWindow]\n  );\n  const links = {\n    productId: state.productId,\n    releaseId: state.releaseId,\n    projectId: state.projectId,\n  };\n  const scoped = !!(state.productId || state.releaseId || state.projectId);\n\n  const { data, previousData, loading, error } = useQuery<CustomerSatisfactionSummaryData>(\n    CUSTOMER_SATISFACTION_SUMMARY,\n    {\n      variables: { workspaceId: workspaceId ?? '', filter: { ...scopeFilter, window: lastWindow } },\n      skip: !workspaceId,\n    }\n  );\n  // A new window or filter keeps the figures on screen (each states its own window) until the new ones arrive.\n  const summary = (data ?? previousData)?.planmagnetCustomerSatisfaction ?? null;\n  const updating = loading && !data && !!summary;\n\n  // A response deleted elsewhere: drop the 15 s fetch replay, then re-read what is on screen.\n  const refreshAfterStale = () => {\n    clearGraphqlFetchResponseCache();\n    void client.refetchQueries({ include: SATISFACTION_QUERIES });\n  };\n\n  const onProduct = (productId: string) => {\n    const release = releases.find((r) => r.id === state.releaseId);\n    // A release of another product cannot be about this one: the release filter goes with the old product.\n    const keepRelease =\n      !release || !release.productId || !productId || release.productId === productId;\n    change({ productId, releaseId: keepRelease ? state.releaseId : '' });\n  };\n\n  if (!workspaceId) {\n    return (\n      <div className=\"p-6 text-sm text-muted-foreground\">\n        {tr(\n          'planmagnet.satisfaction.noWorkspace',\n          'Choose a workspace to see customer satisfaction.'\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\" data-testid=\"satisfaction-page\">\n      <div className=\"flex flex-wrap items-start justify-between gap-4\">\n        <div className=\"max-w-3xl\">\n          <h1 className=\"flex items-center gap-2 text-2xl font-semibold\">\n            <MessageSquareHeart className=\"h-6 w-6\" aria-hidden={true} />\n            {tr('planmagnet.satisfaction.title', 'Customer satisfaction')}\n          </h1>\n          <p className=\"mt-1 text-sm text-muted-foreground\">\n            {tr(\n              'planmagnet.satisfaction.subtitle',\n              'CSAT and NPS from what customers said about your products, releases and projects. Responses are entered by your team or imported from a CSV file.'\n            )}\n          </p>\n        </div>\n        {access.canCreate && (\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <SatisfactionImportDialog\n              links={links}\n              onImported={(result) =>\n                setNotice({\n                  tone: 'status',\n                  message: tr(\n                    'planmagnet.satisfaction.notice.imported',\n                    'Import done — new responses: {{created}}; already imported and skipped: {{skipped}}.',\n                    { created: result.createdCount, skipped: result.skippedCount }\n                  ),\n                })\n              }\n            />\n            <SatisfactionResponseDialog\n              links={links}\n              onSaved={() =>\n                setNotice({\n                  tone: 'status',\n                  message: tr('planmagnet.satisfaction.notice.created', 'The response was added.'),\n                })\n              }\n            />\n          </div>\n        )}\n      </div>\n\n      {access.readOnly && (\n        <p\n          className=\"flex items-center gap-1.5 text-xs text-muted-foreground\"\n          data-testid=\"satisfaction-read-only\"\n        >\n          <Info className=\"h-3.5 w-3.5 shrink-0\" aria-hidden={true} />\n          {tr(\n            'planmagnet.satisfaction.readOnly',\n            'You can read customer satisfaction. Adding, importing, editing and deleting responses is for product managers.'\n          )}\n        </p>\n      )}\n\n      <div className=\"space-y-3 rounded-lg border p-3\" data-testid=\"satisfaction-filters\">\n        <SatisfactionWindowPicker\n          value={state.window}\n          onChange={(window) => change({ window })}\n          current={summary?.window ?? null}\n        />\n        <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n          <div className=\"grid flex-1 gap-2 sm:grid-cols-3\">\n            <div>\n              <label htmlFor=\"satisfaction-filter-product\" className=\"sr-only\">\n                {tr('planmagnet.satisfaction.filters.product', 'Product')}\n              </label>\n              <ProductSelect\n                id=\"satisfaction-filter-product\"\n                value={state.productId}\n                noneLabel={tr('planmagnet.satisfaction.filters.allProducts', 'All products')}\n                onChange={onProduct}\n              />\n            </div>\n            <div>\n              <label htmlFor=\"satisfaction-filter-release\" className=\"sr-only\">\n                {tr('planmagnet.satisfaction.filters.release', 'Release')}\n              </label>\n              <SatisfactionReleaseSelect\n                id=\"satisfaction-filter-release\"\n                value={state.releaseId}\n                productId={state.productId}\n                noneLabel={tr('planmagnet.satisfaction.filters.allReleases', 'All releases')}\n                onChange={(releaseId) => change({ releaseId })}\n              />\n            </div>\n            <div>\n              <label htmlFor=\"satisfaction-filter-project\" className=\"sr-only\">\n                {tr('planmagnet.satisfaction.filters.project', 'Project')}\n              </label>\n              <ProjectSelect\n                id=\"satisfaction-filter-project\"\n                value={state.projectId}\n                noneLabel={tr('planmagnet.satisfaction.filters.allProjects', 'All projects')}\n                onChange={(projectId) => change({ projectId })}\n              />\n            </div>\n          </div>\n          {scoped && (\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              onClick={() => change({ productId: '', releaseId: '', projectId: '' })}\n              data-testid=\"satisfaction-filters-clear\"\n            >\n              <X className=\"mr-1 h-4 w-4\" />\n              {tr('planmagnet.satisfaction.filters.clear', 'Clear filters')}\n            </Button>\n          )}\n        </div>\n      </div>\n      {state.productId && (\n        <p className=\"-mt-3 text-xs text-muted-foreground\">\n          {tr(\n            'planmagnet.satisfaction.filters.productNote',\n            'A product counts its own responses and those about its releases that name no product of their own.'\n          )}\n        </p>\n      )}\n\n      {notice && (\n        <div\n          role={notice.tone}\n          className={`flex items-start justify-between gap-3 rounded-md p-3 text-sm ${\n            notice.tone === 'alert'\n              ? 'bg-status-error-bg-subtle text-status-error-text'\n              : 'bg-muted'\n          }`}\n          data-testid=\"satisfaction-notice\"\n        >\n          <span>{notice.message}</span>\n          <button\n            type=\"button\"\n            className=\"shrink-0 text-xs text-muted-foreground hover:underline\"\n            onClick={() => setNotice(null)}\n          >\n            {tr('planmagnet.satisfaction.dismiss', 'Dismiss')}\n          </button>\n        </div>\n      )}\n\n      {loading && !summary ? (\n        <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n          <Loader2 className=\"h-4 w-4 animate-spin\" />\n          {tr('planmagnet.satisfaction.loading', 'Loading…')}\n        </div>\n      ) : error && !summary ? (\n        <ErrorLine\n          message={\n            isForbidden(error)\n              ? tr(\n                  'planmagnet.satisfaction.errors.readForbidden',\n                  'Your role cannot see customer satisfaction in this workspace.'\n                )\n              : tr(\n                  'planmagnet.satisfaction.errors.load',\n                  'Customer satisfaction could not be loaded: {{message}}',\n                  { message: error.message }\n                )\n          }\n        />\n      ) : summary ? (\n        <>\n          {error && (\n            <ErrorLine\n              message={tr(\n                'planmagnet.satisfaction.errors.refresh',\n                'The figures could not be refreshed: {{message}}',\n                { message: error.message }\n              )}\n            />\n          )}\n          {updating && (\n            <p className=\"flex items-center gap-2 text-xs text-muted-foreground\" role=\"status\">\n              <Loader2 className=\"h-3.5 w-3.5 animate-spin\" aria-hidden={true} />\n              {tr('planmagnet.satisfaction.updating', 'Updating the figures…')}\n            </p>\n          )}\n          <SatisfactionFigureCards summary={summary} />\n        </>\n      ) : null}\n\n      <Card>\n        <CardHeader className=\"flex flex-row flex-wrap items-center justify-between gap-2 space-y-0\">\n          <CardTitle>{tr('planmagnet.satisfaction.list.title', 'Responses')}</CardTitle>\n          <div\n            className=\"flex items-center gap-1 rounded-md border p-0.5\"\n            role=\"group\"\n            aria-label={tr('planmagnet.satisfaction.list.metricFilter', 'Metric')}\n          >\n            {(['', ...METRIC_TYPES] as const).map((metric) => (\n              <button\n                key={metric || 'all'}\n                type=\"button\"\n                aria-pressed={state.metricType === metric}\n                onClick={() => change({ metricType: metric })}\n                data-testid={`satisfaction-metric-${metric || 'ALL'}`}\n                className={`rounded px-2.5 py-1 text-xs ${\n                  state.metricType === metric\n                    ? 'bg-primary text-primary-foreground'\n                    : 'text-muted-foreground hover:bg-muted'\n                }`}\n              >\n                {metric || tr('planmagnet.satisfaction.list.allMetrics', 'All')}\n              </button>\n            ))}\n          </div>\n        </CardHeader>\n        <CardContent>\n          <SatisfactionResponsesTable\n            key={JSON.stringify(responsesFilter)}\n            workspaceId={workspaceId}\n            filter={responsesFilter}\n            access={access}\n            links={links}\n            filtered={scoped || !!state.metricType}\n            onNotice={(message, tone) => setNotice({ message, tone })}\n            onStale={refreshAfterStale}\n          />\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ProductsProductDetailPagePage.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/pages/ProductsProductDetailPagePage.tsx"],"names":[],"mappings":"AAiIA,wBAAgB,6BAA6B,4CA0N5C"}
+{"version":3,"file":"ProductsProductDetailPagePage.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/pages/ProductsProductDetailPagePage.tsx"],"names":[],"mappings":"AAkIA,wBAAgB,6BAA6B,4CA6N5C"}

package/dist/planmagnet/pages/ProductsProductDetailPagePage.js

@@ -8,13 +8,14 @@ import { ProductAboutPanel as o, ProductCompetitorsPanel as s, ProductFeatureReq
 import { ProductFeaturesPanel as p } from "../product/ProductFeatureControls.js";
 import { ProductLinePicker as m } from "../product/ProductLineControls.js";
 import { ProductTeamsPanel as h } from "../product/ProductTeamsPanel.js";
-import { Calendar as g, ListTree as _, Loader2 as v, Package as y, Pencil as b, Target as x, Users as S } from "lucide-react";
-import { gql as C } from "@apollo/client";
-import { useQuery as w } from "@apollo/client/react";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
-import { Badge as D, Button as O, Card as k, CardContent as A, CardHeader as j, CardTitle as M } from "@burdenoff/fe-libs/ui";
+import { SatisfactionSummaryCard as g } from "../satisfaction/SatisfactionSummaryCard.js";
+import { Calendar as _, ListTree as v, Loader2 as y, Package as b, Pencil as x, Target as S, Users as C } from "lucide-react";
+import { gql as w } from "@apollo/client";
+import { useQuery as T } from "@apollo/client/react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { Badge as O, Button as k, Card as A, CardContent as j, CardHeader as M, CardTitle as N } from "@burdenoff/fe-libs/ui";
 //#region src/planmagnet/pages/ProductsProductDetailPagePage.tsx
-var N = C`
+var P = w`
   query GetProductDetail($id: ID!) {
     planmagnetProduct(id: $id) {
       id
@@ -69,178 +70,179 @@ var N = C`
     }
   }
 `;
-function P() {
-	let C = e(), P = i("productId") ?? "", { data: F, loading: I, error: L } = w(N, {
-		variables: { id: P },
-		skip: !P
+function F() {
+	let w = e(), F = i("productId") ?? "", { data: I, loading: L, error: R } = T(P, {
+		variables: { id: F },
+		skip: !F
 	});
-	if (!P) return /* @__PURE__ */ T("div", {
+	if (!F) return /* @__PURE__ */ E("div", {
 		className: "p-6 text-muted-foreground",
 		children: "No product selected. Open one from the list."
 	});
-	if (I && !F) return /* @__PURE__ */ T("div", {
+	if (L && !I) return /* @__PURE__ */ E("div", {
 		className: "flex items-center justify-center p-12",
-		children: /* @__PURE__ */ T(v, { className: "h-8 w-8 animate-spin text-muted-foreground" })
+		children: /* @__PURE__ */ E(y, { className: "h-8 w-8 animate-spin text-muted-foreground" })
 	});
-	if (L) return /* @__PURE__ */ E("div", {
+	if (R) return /* @__PURE__ */ D("div", {
 		className: "p-6 text-destructive",
-		children: ["Failed to load product: ", L.message]
+		children: ["Failed to load product: ", R.message]
 	});
-	let R = F?.planmagnetProduct;
-	return R ? /* @__PURE__ */ E("div", {
+	let z = I?.planmagnetProduct;
+	return z ? /* @__PURE__ */ D("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex items-start justify-between gap-4",
-				children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("div", {
+				children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ D("div", {
 					className: "flex items-center gap-2",
 					children: [
-						/* @__PURE__ */ T(y, { className: "h-5 w-5 text-primary" }),
-						/* @__PURE__ */ T("h1", {
+						/* @__PURE__ */ E(b, { className: "h-5 w-5 text-primary" }),
+						/* @__PURE__ */ E("h1", {
 							className: "text-2xl font-semibold",
-							children: R.name
+							children: z.name
 						}),
-						R.archivedAt && /* @__PURE__ */ T(D, {
+						z.archivedAt && /* @__PURE__ */ E(O, {
 							variant: "outline",
 							children: "Archived"
 						}),
-						/* @__PURE__ */ T(D, {
+						/* @__PURE__ */ E(O, {
 							variant: "secondary",
 							className: "capitalize",
-							children: n(R.lifecycleStage)
+							children: n(z.lifecycleStage)
 						})
 					]
-				}), /* @__PURE__ */ T("p", {
+				}), /* @__PURE__ */ E("p", {
 					className: "text-sm text-muted-foreground mt-1",
-					children: R.vision || "No vision set"
-				})] }), /* @__PURE__ */ T("div", {
+					children: z.vision || "No vision set"
+				})] }), /* @__PURE__ */ E("div", {
 					className: "flex flex-col items-end gap-2",
-					children: /* @__PURE__ */ E("div", {
+					children: /* @__PURE__ */ D("div", {
 						className: "flex gap-2",
-						children: [/* @__PURE__ */ E(O, {
+						children: [/* @__PURE__ */ D(k, {
 							size: "sm",
 							variant: "outline",
-							onClick: () => C(r("/products/edit-product-page", R.id)),
-							children: [/* @__PURE__ */ T(b, { className: "mr-1 h-4 w-4" }), "Edit"]
-						}), /* @__PURE__ */ T(l, {
-							productId: R.id,
-							name: R.name,
-							archivedAt: R.archivedAt
+							onClick: () => w(r("/products/edit-product-page", z.id)),
+							children: [/* @__PURE__ */ E(x, { className: "mr-1 h-4 w-4" }), "Edit"]
+						}), /* @__PURE__ */ E(l, {
+							productId: z.id,
+							name: z.name,
+							archivedAt: z.archivedAt
 						})]
 					})
 				})]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "grid grid-cols-2 md:grid-cols-4 gap-4",
 				children: [
-					/* @__PURE__ */ T(k, { children: /* @__PURE__ */ E(A, {
+					/* @__PURE__ */ E(A, { children: /* @__PURE__ */ D(j, {
 						className: "pt-4",
-						children: [/* @__PURE__ */ E("div", {
+						children: [/* @__PURE__ */ D("div", {
 							className: "flex items-center gap-2 text-muted-foreground text-xs",
-							children: [/* @__PURE__ */ T(x, { className: "h-4 w-4" }), "North Star"]
-						}), R.northStar ? /* @__PURE__ */ E("p", {
+							children: [/* @__PURE__ */ E(S, { className: "h-4 w-4" }), "North Star"]
+						}), z.northStar ? /* @__PURE__ */ D("p", {
 							className: "text-sm font-bold mt-1 truncate",
 							children: [
-								R.northStar.current,
+								z.northStar.current,
 								" / ",
-								R.northStar.target,
+								z.northStar.target,
 								" ",
-								R.northStar.unit,
-								R.northStar.progressRatio == null ? "" : ` (${Math.round(R.northStar.progressRatio * 100)}%)`
+								z.northStar.unit,
+								z.northStar.progressRatio == null ? "" : ` (${Math.round(z.northStar.progressRatio * 100)}%)`
 							]
-						}) : /* @__PURE__ */ T("p", {
+						}) : /* @__PURE__ */ E("p", {
 							className: "text-sm font-medium mt-1 text-muted-foreground",
 							children: "Not set"
 						})]
 					}) }),
-					/* @__PURE__ */ T(k, { children: /* @__PURE__ */ E(A, {
+					/* @__PURE__ */ E(A, { children: /* @__PURE__ */ D(j, {
 						className: "pt-4",
-						children: [/* @__PURE__ */ E("div", {
+						children: [/* @__PURE__ */ D("div", {
 							className: "flex items-center gap-2 text-muted-foreground text-xs",
-							children: [/* @__PURE__ */ T(S, { className: "h-4 w-4" }), "Owner"]
-						}), /* @__PURE__ */ T("p", {
+							children: [/* @__PURE__ */ E(C, { className: "h-4 w-4" }), "Owner"]
+						}), /* @__PURE__ */ E("p", {
 							className: "text-sm font-bold mt-1 truncate",
-							children: /* @__PURE__ */ T(t, { id: R.ownerId })
+							children: /* @__PURE__ */ E(t, { id: z.ownerId })
 						})]
 					}) }),
-					/* @__PURE__ */ T(k, { children: /* @__PURE__ */ E(A, {
+					/* @__PURE__ */ E(A, { children: /* @__PURE__ */ D(j, {
 						className: "pt-4",
-						children: [/* @__PURE__ */ E("div", {
+						children: [/* @__PURE__ */ D("div", {
 							className: "flex items-center gap-2 text-muted-foreground text-xs",
-							children: [/* @__PURE__ */ T(g, { className: "h-4 w-4" }), "Created"]
-						}), /* @__PURE__ */ T("p", {
+							children: [/* @__PURE__ */ E(_, { className: "h-4 w-4" }), "Created"]
+						}), /* @__PURE__ */ E("p", {
 							className: "text-xl font-bold mt-1",
-							children: new Date(R.createdAt).toLocaleDateString()
+							children: new Date(z.createdAt).toLocaleDateString()
 						})]
 					}) }),
-					/* @__PURE__ */ T(k, { children: /* @__PURE__ */ E(A, {
+					/* @__PURE__ */ E(A, { children: /* @__PURE__ */ D(j, {
 						className: "pt-4",
-						children: [/* @__PURE__ */ E("div", {
+						children: [/* @__PURE__ */ D("div", {
 							className: "flex items-center gap-2 text-muted-foreground text-xs",
-							children: [/* @__PURE__ */ T(g, { className: "h-4 w-4" }), "Updated"]
-						}), /* @__PURE__ */ T("p", {
+							children: [/* @__PURE__ */ E(_, { className: "h-4 w-4" }), "Updated"]
+						}), /* @__PURE__ */ E("p", {
 							className: "text-xl font-bold mt-1",
-							children: new Date(R.updatedAt).toLocaleDateString()
+							children: new Date(z.updatedAt).toLocaleDateString()
 						})]
 					}) })
 				]
 			}),
-			R.description && /* @__PURE__ */ T(k, { children: /* @__PURE__ */ T(A, {
+			z.description && /* @__PURE__ */ E(A, { children: /* @__PURE__ */ E(j, {
 				className: "pt-4 text-sm text-muted-foreground",
-				children: R.description
+				children: z.description
 			}) }),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ E(k, { children: [/* @__PURE__ */ T(j, { children: /* @__PURE__ */ T(M, { children: "Product line" }) }), /* @__PURE__ */ T(A, { children: /* @__PURE__ */ T(m, { productId: R.id }) })] }), /* @__PURE__ */ E(k, {
+				children: [/* @__PURE__ */ D(A, { children: [/* @__PURE__ */ E(M, { children: /* @__PURE__ */ E(N, { children: "Product line" }) }), /* @__PURE__ */ E(j, { children: /* @__PURE__ */ E(m, { productId: z.id }) })] }), /* @__PURE__ */ D(A, {
 					className: "lg:col-span-2",
-					children: [/* @__PURE__ */ T(j, { children: /* @__PURE__ */ T(M, { children: "Teams" }) }), /* @__PURE__ */ T(A, { children: /* @__PURE__ */ T(h, { productId: R.id }) })]
+					children: [/* @__PURE__ */ E(M, { children: /* @__PURE__ */ E(N, { children: "Teams" }) }), /* @__PURE__ */ E(j, { children: /* @__PURE__ */ E(h, { productId: z.id }) })]
 				})]
 			}),
-			/* @__PURE__ */ E(k, { children: [/* @__PURE__ */ E(j, {
+			/* @__PURE__ */ D(A, { children: [/* @__PURE__ */ D(M, {
 				className: "flex flex-row items-center justify-between gap-2",
-				children: [/* @__PURE__ */ T(M, { children: "Features" }), /* @__PURE__ */ E(O, {
+				children: [/* @__PURE__ */ E(N, { children: "Features" }), /* @__PURE__ */ D(k, {
 					size: "sm",
 					variant: "ghost",
-					onClick: () => C("/products/product-hierarchy-page"),
+					onClick: () => w("/products/product-hierarchy-page"),
 					"data-testid": "product-view-hierarchy",
-					children: [/* @__PURE__ */ T(_, { className: "mr-1 h-4 w-4" }), "View hierarchy"]
+					children: [/* @__PURE__ */ E(v, { className: "mr-1 h-4 w-4" }), "View hierarchy"]
 				})]
-			}), /* @__PURE__ */ T(A, { children: /* @__PURE__ */ T(p, {
-				productId: R.id,
-				productArchived: !!R.archivedAt
+			}), /* @__PURE__ */ E(j, { children: /* @__PURE__ */ E(p, {
+				productId: z.id,
+				productArchived: !!z.archivedAt
 			}) })] }),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ E(g, { scope: { productId: z.id } }),
+			/* @__PURE__ */ D("div", {
 				className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
-				children: [/* @__PURE__ */ T(o, { product: R }), /* @__PURE__ */ E(k, { children: [/* @__PURE__ */ T(j, { children: /* @__PURE__ */ T(M, { children: "Competitive landscape" }) }), /* @__PURE__ */ T(A, { children: /* @__PURE__ */ T(s, {
-					productId: R.id,
-					competitors: R.competitors
+				children: [/* @__PURE__ */ E(o, { product: z }), /* @__PURE__ */ D(A, { children: [/* @__PURE__ */ E(M, { children: /* @__PURE__ */ E(N, { children: "Competitive landscape" }) }), /* @__PURE__ */ E(j, { children: /* @__PURE__ */ E(s, {
+					productId: z.id,
+					competitors: z.competitors
 				}) })] })]
 			}),
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ D("div", {
 				className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
 				children: [
-					/* @__PURE__ */ E(k, { children: [/* @__PURE__ */ T(j, { children: /* @__PURE__ */ T(M, { children: "Roadmaps" }) }), /* @__PURE__ */ T(A, { children: /* @__PURE__ */ T(f, {
-						productId: R.id,
-						roadmaps: R.roadmaps
+					/* @__PURE__ */ D(A, { children: [/* @__PURE__ */ E(M, { children: /* @__PURE__ */ E(N, { children: "Roadmaps" }) }), /* @__PURE__ */ E(j, { children: /* @__PURE__ */ E(f, {
+						productId: z.id,
+						roadmaps: z.roadmaps
 					}) })] }),
-					/* @__PURE__ */ E(k, { children: [/* @__PURE__ */ T(j, { children: /* @__PURE__ */ T(M, { children: "Releases" }) }), /* @__PURE__ */ T(A, { children: /* @__PURE__ */ T(d, {
-						productId: R.id,
-						releases: R.releases
+					/* @__PURE__ */ D(A, { children: [/* @__PURE__ */ E(M, { children: /* @__PURE__ */ E(N, { children: "Releases" }) }), /* @__PURE__ */ E(j, { children: /* @__PURE__ */ E(d, {
+						productId: z.id,
+						releases: z.releases
 					}) })] }),
-					/* @__PURE__ */ E(k, { children: [/* @__PURE__ */ T(j, { children: /* @__PURE__ */ T(M, { children: "Feature requests" }) }), /* @__PURE__ */ T(A, { children: /* @__PURE__ */ T(c, {
-						productId: R.id,
-						featureRequests: R.featureRequests
+					/* @__PURE__ */ D(A, { children: [/* @__PURE__ */ E(M, { children: /* @__PURE__ */ E(N, { children: "Feature requests" }) }), /* @__PURE__ */ E(j, { children: /* @__PURE__ */ E(c, {
+						productId: z.id,
+						featureRequests: z.featureRequests
 					}) })] }),
-					/* @__PURE__ */ E(k, { children: [/* @__PURE__ */ T(j, { children: /* @__PURE__ */ T(M, { children: "OKR Objectives" }) }), /* @__PURE__ */ T(A, { children: /* @__PURE__ */ T(u, {
-						productId: R.id,
-						objectives: R.objectives
+					/* @__PURE__ */ D(A, { children: [/* @__PURE__ */ E(M, { children: /* @__PURE__ */ E(N, { children: "OKR Objectives" }) }), /* @__PURE__ */ E(j, { children: /* @__PURE__ */ E(u, {
+						productId: z.id,
+						objectives: z.objectives
 					}) })] })
 				]
 			})
 		]
-	}) : /* @__PURE__ */ T(a, {});
+	}) : /* @__PURE__ */ E(a, {});
 }
 //#endregion
-export { P as ProductsProductDetailPagePage };
+export { F as ProductsProductDetailPagePage };
 
 //# sourceMappingURL=ProductsProductDetailPagePage.js.map