@burdenoff/microfe-planmagnet 2026.930.21 → 2026.930.23

package/dist/planmagnet/pages/analytics/StatusFlowCard.js

@@ -0,0 +1,234 @@
+import { Tooltip as e } from "../../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as t } from "../../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { Sankey as n } from "../../../node_modules/recharts/es6/chart/Sankey.js";
+import { WORK_ITEM_STATUSES as r, enumLabel as i } from "../../controls/WorkItemControls.js";
+import { statusVisual as a } from "../../utils/statusColor.js";
+import { isForbidden as o } from "../../utils/graphqlErrors.js";
+import { useMemo as s } from "react";
+import { Workflow as c } from "lucide-react";
+import { gql as l } from "@apollo/client";
+import { useQuery as u } from "@apollo/client/react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Card as m, CardContent as h, CardHeader as g, CardTitle as _ } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/pages/analytics/StatusFlowCard.tsx
+var v = l`
+  query GetAnalyticsStatusFlow(
+    $workspaceId: ID!
+    $projectId: ID!
+    $from: DateTime!
+    $to: DateTime!
+  ) {
+    planmagnetStatusFlow(workspaceId: $workspaceId, projectId: $projectId, from: $from, to: $to) {
+      fromStatus
+      toStatus
+      count
+    }
+  }
+`, y = 366, b = y * 864e5;
+function x(e, t) {
+	let n = Date.parse(e), r = Date.parse(t);
+	return !Number.isFinite(n) || !Number.isFinite(r) || r - n <= b ? {
+		from: e,
+		to: t,
+		clamped: !1
+	} : {
+		from: new Date(r - b).toISOString(),
+		to: t,
+		clamped: !0
+	};
+}
+function S(e) {
+	let t = r.filter((t) => e.some((e) => e.fromStatus === t)), n = r.filter((t) => e.some((e) => e.toStatus === t)), a = new Map(t.map((e, t) => [e, t])), o = new Map(n.map((e, n) => [e, t.length + n]));
+	return {
+		nodes: [...t.map((e) => ({
+			name: i(e),
+			status: e,
+			side: "from"
+		})), ...n.map((e) => ({
+			name: i(e),
+			status: e,
+			side: "to"
+		}))],
+		links: e.flatMap((e) => {
+			let t = a.get(e.fromStatus), n = o.get(e.toStatus);
+			return t === void 0 || n === void 0 ? [] : [{
+				source: t,
+				target: n,
+				value: e.count
+			}];
+		})
+	};
+}
+function C({ x: e, y: t, width: n, height: r, payload: i }) {
+	let o = a(i.status), s = i.side === "from";
+	return /* @__PURE__ */ f("g", { children: [/* @__PURE__ */ d("rect", {
+		x: e,
+		y: t,
+		width: n,
+		height: r,
+		rx: 2,
+		style: {
+			fill: o.color,
+			stroke: o.color
+		},
+		strokeWidth: 1
+	}), /* @__PURE__ */ d("text", {
+		x: s ? e - 6 : e + n + 6,
+		y: t + r / 2,
+		dy: "0.32em",
+		textAnchor: s ? "end" : "start",
+		className: "fill-foreground text-[11px]",
+		children: i.name
+	})] });
+}
+function w({ sourceX: e, sourceY: t, targetX: n, targetY: r, sourceControlX: i, targetControlX: o, linkWidth: s, payload: c }) {
+	let l = a(c.source.status);
+	return /* @__PURE__ */ d("path", {
+		d: `M${e},${t} C${i},${t} ${o},${r} ${n},${r}`,
+		style: { stroke: l.color },
+		strokeWidth: Math.max(s, 1),
+		strokeOpacity: .45,
+		fill: "none"
+	});
+}
+function T({ workspaceId: r, projectId: a, startDate: l, endDate: b }) {
+	let { t: T } = p(), E = s(() => x(l, b), [l, b]), { data: D, loading: O, error: k } = u(v, {
+		variables: {
+			workspaceId: r,
+			projectId: a,
+			from: E.from,
+			to: E.to
+		},
+		skip: !r || !a
+	}), A = D?.planmagnetStatusFlow ?? [], { nodes: j, links: M } = S(A), N = [...A].sort((e, t) => t.count - e.count);
+	return /* @__PURE__ */ f(m, {
+		"data-testid": "status-flow-card",
+		children: [/* @__PURE__ */ f(g, { children: [
+			/* @__PURE__ */ f(_, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ d(c, { className: "h-4 w-4" }), T("planmagnet.analytics.statusFlow.title", "Status flow")]
+			}),
+			/* @__PURE__ */ d("p", {
+				className: "text-xs text-muted-foreground",
+				children: T("planmagnet.analytics.statusFlow.subtitle", "How work items moved between statuses in the selected range.")
+			}),
+			E.clamped && /* @__PURE__ */ d("p", {
+				className: "text-xs text-status-warning-text",
+				children: T("planmagnet.analytics.statusFlow.clamped", "Status flow is capped at a {{days}}-day window — showing the most recent {{days}} days of the selected range (from {{from}}).", {
+					days: y,
+					from: E.from.slice(0, 10)
+				})
+			})
+		] }), /* @__PURE__ */ d(h, { children: a ? O && !D ? /* @__PURE__ */ d("div", {
+			className: "flex justify-center py-12",
+			children: /* @__PURE__ */ d("div", { className: "animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" })
+		}) : k ? /* @__PURE__ */ d("p", {
+			className: "text-sm text-status-error-text",
+			children: o(k) ? T("planmagnet.analytics.statusFlow.forbidden", "You do not have access to status flow for this project.") : `${T("planmagnet.analytics.statusFlow.error", "Status flow could not be loaded")}: ${k.message}`
+		}) : A.length === 0 ? /* @__PURE__ */ d("p", {
+			className: "text-sm text-muted-foreground py-8 text-center",
+			children: T("planmagnet.analytics.statusFlow.empty", "No status changes recorded for this project in the selected range.")
+		}) : /* @__PURE__ */ f("div", {
+			className: "space-y-4",
+			children: [/* @__PURE__ */ d("div", {
+				"data-testid": "viz-status-flow",
+				children: /* @__PURE__ */ d(t, {
+					width: "100%",
+					height: Math.max(260, j.length * 24),
+					children: /* @__PURE__ */ d(n, {
+						data: {
+							nodes: j,
+							links: M
+						},
+						node: C,
+						link: w,
+						nodeWidth: 10,
+						nodePadding: 16,
+						linkCurvature: .5,
+						margin: {
+							top: 8,
+							right: 90,
+							bottom: 8,
+							left: 90
+						},
+						children: /* @__PURE__ */ d(e, { content: ({ active: e, payload: t }) => {
+							if (!e || !t || t.length === 0) return null;
+							let n = t[0]?.payload?.payload;
+							return n ? "source" in n ? /* @__PURE__ */ f("div", {
+								className: "rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs shadow-md",
+								children: [/* @__PURE__ */ f("p", {
+									className: "font-medium text-popover-foreground",
+									children: [
+										n.source.name,
+										" → ",
+										n.target.name
+									]
+								}), /* @__PURE__ */ d("p", {
+									className: "text-muted-foreground",
+									children: T("planmagnet.analytics.statusFlow.tooltipCount", "{{count}} item(s)", { count: n.value })
+								})]
+							}) : /* @__PURE__ */ d("div", {
+								className: "rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs shadow-md",
+								children: /* @__PURE__ */ d("p", {
+									className: "font-medium text-popover-foreground",
+									children: n.name
+								})
+							}) : null;
+						} })
+					})
+				})
+			}), /* @__PURE__ */ f("table", {
+				className: "w-full text-sm",
+				"data-testid": "viz-status-flow-table",
+				children: [
+					/* @__PURE__ */ d("caption", {
+						className: "mb-2 text-left text-xs text-muted-foreground",
+						children: T("planmagnet.analytics.statusFlow.tableCaption", "Status transitions")
+					}),
+					/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ f("tr", {
+						className: "text-left text-xs text-muted-foreground",
+						children: [
+							/* @__PURE__ */ d("th", {
+								className: "py-1 pr-2 font-normal",
+								children: T("planmagnet.analytics.statusFlow.from", "From")
+							}),
+							/* @__PURE__ */ d("th", {
+								className: "py-1 pr-2 font-normal",
+								children: T("planmagnet.analytics.statusFlow.to", "To")
+							}),
+							/* @__PURE__ */ d("th", {
+								className: "py-1 text-right font-normal",
+								children: T("planmagnet.analytics.statusFlow.count", "Count")
+							})
+						]
+					}) }),
+					/* @__PURE__ */ d("tbody", { children: N.map((e) => /* @__PURE__ */ f("tr", {
+						className: "border-t",
+						children: [
+							/* @__PURE__ */ d("td", {
+								className: "py-1.5 pr-2",
+								children: i(e.fromStatus)
+							}),
+							/* @__PURE__ */ d("td", {
+								className: "py-1.5 pr-2",
+								children: i(e.toStatus)
+							}),
+							/* @__PURE__ */ d("td", {
+								className: "py-1.5 text-right tabular-nums",
+								children: e.count
+							})
+						]
+					}, `${e.fromStatus}-${e.toStatus}`)) })
+				]
+			})]
+		}) : /* @__PURE__ */ d("p", {
+			className: "text-sm text-muted-foreground",
+			children: T("planmagnet.analytics.statusFlow.noProject", "Select a project to see its status flow.")
+		}) })]
+	});
+}
+//#endregion
+export { T as StatusFlowCard };
+
+//# sourceMappingURL=StatusFlowCard.js.map

package/dist/planmagnet/pages/analytics/StatusFlowCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusFlowCard.js","names":[],"sources":["../../../../src/planmagnet/pages/analytics/StatusFlowCard.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { gql } from '@apollo/client';\nimport { useQuery } from '@apollo/client/react';\nimport { Card, CardContent, CardHeader, CardTitle } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Workflow } from 'lucide-react';\nimport { ResponsiveContainer, Sankey, Tooltip } from 'recharts';\nimport { WORK_ITEM_STATUSES, enumLabel } from '../../controls/WorkItemControls';\nimport { statusVisual } from '../../utils/statusColor';\nimport { isForbidden } from '../../utils/graphqlErrors';\n\n/**\n * ANR-24: status-flow Sankey (wspace-planmagnet-svc#65 `planmagnetStatusFlow`) — aggregated status-to-status\n * transition counts for one project, over a date window capped server-side at 366 days.\n *\n * recharts' Sankey lays its nodes out by depth, walked outward from every node with no incoming link\n * (`getNodesTree` in recharts' own source), with NO cycle guard — a real transition graph almost always has\n * cycles (e.g. IN_REVIEW -> IN_PROGRESS -> IN_REVIEW, a change request), which would recurse forever. The fix:\n * every status becomes TWO Sankey nodes, a \"from\" one and a \"to\" one, so every link only ever points from the\n * \"from\" column to the \"to\" column — a strict two-level DAG by construction, however tangled the underlying\n * status graph is. This is a display transform only; it does not change what the data means (every link is\n * still exactly one observed fromStatus -> toStatus edge, whichever status is on which side of the column).\n */\n\ntype WorkItemStatusValue = (typeof WORK_ITEM_STATUSES)[number];\n\nconst GET_STATUS_FLOW = gql`\n  query GetAnalyticsStatusFlow(\n    $workspaceId: ID!\n    $projectId: ID!\n    $from: DateTime!\n    $to: DateTime!\n  ) {\n    planmagnetStatusFlow(workspaceId: $workspaceId, projectId: $projectId, from: $from, to: $to) {\n      fromStatus\n      toStatus\n      count\n    }\n  }\n`;\n\ninterface StatusFlowEdge {\n  fromStatus: WorkItemStatusValue;\n  toStatus: WorkItemStatusValue;\n  count: number;\n}\n\ninterface StatusFlowData {\n  planmagnetStatusFlow: StatusFlowEdge[];\n}\n\ninterface FlowNodeDatum {\n  name: string;\n  status: WorkItemStatusValue;\n  side: 'from' | 'to';\n}\n\ninterface FlowLinkDatum {\n  source: number;\n  target: number;\n  value: number;\n}\n\ninterface FlowLinkPayload {\n  source: FlowNodeDatum;\n  target: FlowNodeDatum;\n  value: number;\n}\n\n/** The server's own cap (see the field's doc comment in graphql/wspace.graphql) — the UI never sends a wider\n *  window, and says so when the page's own range would have asked for one. */\nconst MAX_WINDOW_DAYS = 366;\nconst MAX_WINDOW_MS = MAX_WINDOW_DAYS * 86_400_000;\n\nfunction clampWindow(\n  startDate: string,\n  endDate: string\n): { from: string; to: string; clamped: boolean } {\n  const startMs = Date.parse(startDate);\n  const endMs = Date.parse(endDate);\n  if (!Number.isFinite(startMs) || !Number.isFinite(endMs) || endMs - startMs <= MAX_WINDOW_MS) {\n    return { from: startDate, to: endDate, clamped: false };\n  }\n  return { from: new Date(endMs - MAX_WINDOW_MS).toISOString(), to: endDate, clamped: true };\n}\n\n/** Every status that actually appears becomes a \"from\" node (left column) and/or a \"to\" node (right column), in\n *  the app's canonical status order — never in whatever order the API happened to return edges. */\nfunction buildFlow(edges: StatusFlowEdge[]): { nodes: FlowNodeDatum[]; links: FlowLinkDatum[] } {\n  const fromStatuses = WORK_ITEM_STATUSES.filter((s) => edges.some((e) => e.fromStatus === s));\n  const toStatuses = WORK_ITEM_STATUSES.filter((s) => edges.some((e) => e.toStatus === s));\n  const fromIndex = new Map(fromStatuses.map((s, i) => [s, i]));\n  const toIndex = new Map(toStatuses.map((s, i) => [s, fromStatuses.length + i]));\n\n  const nodes: FlowNodeDatum[] = [\n    ...fromStatuses.map((s) => ({ name: enumLabel(s), status: s, side: 'from' as const })),\n    ...toStatuses.map((s) => ({ name: enumLabel(s), status: s, side: 'to' as const })),\n  ];\n\n  const links: FlowLinkDatum[] = edges.flatMap((e) => {\n    const source = fromIndex.get(e.fromStatus);\n    const target = toIndex.get(e.toStatus);\n    // Every edge's statuses come straight from fromStatuses/toStatuses above, so this can never actually miss —\n    // the check just keeps the result type honest without a non-null assertion.\n    return source === undefined || target === undefined ? [] : [{ source, target, value: e.count }];\n  });\n\n  return { nodes, links };\n}\n\ninterface FlowNodeProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  payload: FlowNodeDatum;\n}\n\nfunction FlowNode({ x, y, width, height, payload }: FlowNodeProps) {\n  const visual = statusVisual(payload.status);\n  const isFrom = payload.side === 'from';\n  return (\n    <g>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        rx={2}\n        style={{ fill: visual.color, stroke: visual.color }}\n        strokeWidth={1}\n      />\n      <text\n        x={isFrom ? x - 6 : x + width + 6}\n        y={y + height / 2}\n        dy=\"0.32em\"\n        textAnchor={isFrom ? 'end' : 'start'}\n        className=\"fill-foreground text-[11px]\"\n      >\n        {payload.name}\n      </text>\n    </g>\n  );\n}\n\ninterface FlowLinkProps {\n  sourceX: number;\n  sourceY: number;\n  targetX: number;\n  targetY: number;\n  sourceControlX: number;\n  targetControlX: number;\n  linkWidth: number;\n  payload: FlowLinkPayload;\n}\n\nfunction FlowLink({\n  sourceX,\n  sourceY,\n  targetX,\n  targetY,\n  sourceControlX,\n  targetControlX,\n  linkWidth,\n  payload,\n}: FlowLinkProps) {\n  // Colored by the transition's origin status — the same fixed status->color mapping every other visualization\n  // in this app (Gantt, dependency graph) uses, read via statusVisual rather than a second color table.\n  const visual = statusVisual(payload.source.status);\n  return (\n    <path\n      d={`M${sourceX},${sourceY} C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n      style={{ stroke: visual.color }}\n      strokeWidth={Math.max(linkWidth, 1)}\n      strokeOpacity={0.45}\n      fill=\"none\"\n    />\n  );\n}\n\nexport function StatusFlowCard({\n  workspaceId,\n  projectId,\n  startDate,\n  endDate,\n}: {\n  workspaceId?: string | null;\n  /** Status flow is always one project (`projectId: ID!` on the server) — same convention as CycleTimeCard. */\n  projectId: string;\n  startDate: string;\n  endDate: string;\n}) {\n  const { t } = useI18n();\n  const clamp = useMemo(() => clampWindow(startDate, endDate), [startDate, endDate]);\n  const { data, loading, error } = useQuery<StatusFlowData>(GET_STATUS_FLOW, {\n    variables: { workspaceId, projectId, from: clamp.from, to: clamp.to },\n    skip: !workspaceId || !projectId,\n  });\n  // Recomputed straight from `data` on every render rather than behind its own useMemo: at most a handful of\n  // statuses and edges, and `?? []` below would hand memoization a fresh array identity every render anyway —\n  // same call this page's own project/sprint default-picking makes for a similarly small list.\n  const edges = data?.planmagnetStatusFlow ?? [];\n  const { nodes, links } = buildFlow(edges);\n  const sortedEdges = [...edges].sort((a, b) => b.count - a.count);\n\n  return (\n    <Card data-testid=\"status-flow-card\">\n      <CardHeader>\n        <CardTitle className=\"flex items-center gap-2\">\n          <Workflow className=\"h-4 w-4\" />\n          {t('planmagnet.analytics.statusFlow.title', 'Status flow')}\n        </CardTitle>\n        <p className=\"text-xs text-muted-foreground\">\n          {t(\n            'planmagnet.analytics.statusFlow.subtitle',\n            'How work items moved between statuses in the selected range.'\n          )}\n        </p>\n        {clamp.clamped && (\n          <p className=\"text-xs text-status-warning-text\">\n            {t(\n              'planmagnet.analytics.statusFlow.clamped',\n              'Status flow is capped at a {{days}}-day window — showing the most recent {{days}} days of the selected range (from {{from}}).',\n              { days: MAX_WINDOW_DAYS, from: clamp.from.slice(0, 10) }\n            )}\n          </p>\n        )}\n      </CardHeader>\n      <CardContent>\n        {!projectId ? (\n          <p className=\"text-sm text-muted-foreground\">\n            {t(\n              'planmagnet.analytics.statusFlow.noProject',\n              'Select a project to see its status flow.'\n            )}\n          </p>\n        ) : loading && !data ? (\n          <div className=\"flex justify-center py-12\">\n            <div className=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\" />\n          </div>\n        ) : error ? (\n          <p className=\"text-sm text-status-error-text\">\n            {isForbidden(error)\n              ? t(\n                  'planmagnet.analytics.statusFlow.forbidden',\n                  'You do not have access to status flow for this project.'\n                )\n              : `${t('planmagnet.analytics.statusFlow.error', 'Status flow could not be loaded')}: ${error.message}`}\n          </p>\n        ) : edges.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground py-8 text-center\">\n            {t(\n              'planmagnet.analytics.statusFlow.empty',\n              'No status changes recorded for this project in the selected range.'\n            )}\n          </p>\n        ) : (\n          <div className=\"space-y-4\">\n            <div data-testid=\"viz-status-flow\">\n              <ResponsiveContainer width=\"100%\" height={Math.max(260, nodes.length * 24)}>\n                <Sankey\n                  data={{ nodes, links }}\n                  node={FlowNode}\n                  link={FlowLink}\n                  nodeWidth={10}\n                  nodePadding={16}\n                  linkCurvature={0.5}\n                  margin={{ top: 8, right: 90, bottom: 8, left: 90 }}\n                >\n                  <Tooltip\n                    content={({ active, payload }) => {\n                      if (!active || !payload || payload.length === 0) return null;\n                      // recharts types a Sankey tooltip payload's inner `.payload` as `any` — it nests our own\n                      // node/link datum one level below recharts' own node/link render-props wrapper. Narrowed\n                      // here, once, rather than threading `any` through the render below.\n                      const el = payload[0]?.payload as\n                        | { payload?: FlowNodeDatum | FlowLinkPayload }\n                        | undefined;\n                      const inner = el?.payload;\n                      if (!inner) return null;\n                      if ('source' in inner) {\n                        return (\n                          <div className=\"rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs shadow-md\">\n                            <p className=\"font-medium text-popover-foreground\">\n                              {inner.source.name} → {inner.target.name}\n                            </p>\n                            <p className=\"text-muted-foreground\">\n                              {t(\n                                'planmagnet.analytics.statusFlow.tooltipCount',\n                                '{{count}} item(s)',\n                                {\n                                  count: inner.value,\n                                }\n                              )}\n                            </p>\n                          </div>\n                        );\n                      }\n                      return (\n                        <div className=\"rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs shadow-md\">\n                          <p className=\"font-medium text-popover-foreground\">{inner.name}</p>\n                        </div>\n                      );\n                    }}\n                  />\n                </Sankey>\n              </ResponsiveContainer>\n            </div>\n\n            {/* Accessible table alternative — every edge the Sankey draws, in the same data. */}\n            <table className=\"w-full text-sm\" data-testid=\"viz-status-flow-table\">\n              <caption className=\"mb-2 text-left text-xs text-muted-foreground\">\n                {t('planmagnet.analytics.statusFlow.tableCaption', 'Status transitions')}\n              </caption>\n              <thead>\n                <tr className=\"text-left text-xs text-muted-foreground\">\n                  <th className=\"py-1 pr-2 font-normal\">\n                    {t('planmagnet.analytics.statusFlow.from', 'From')}\n                  </th>\n                  <th className=\"py-1 pr-2 font-normal\">\n                    {t('planmagnet.analytics.statusFlow.to', 'To')}\n                  </th>\n                  <th className=\"py-1 text-right font-normal\">\n                    {t('planmagnet.analytics.statusFlow.count', 'Count')}\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {sortedEdges.map((e) => (\n                  <tr key={`${e.fromStatus}-${e.toStatus}`} className=\"border-t\">\n                    <td className=\"py-1.5 pr-2\">{enumLabel(e.fromStatus)}</td>\n                    <td className=\"py-1.5 pr-2\">{enumLabel(e.toStatus)}</td>\n                    <td className=\"py-1.5 text-right tabular-nums\">{e.count}</td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"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"}

package/dist/planmagnet/pages/analytics/WorkBreakdownCard.d.ts

@@ -0,0 +1,6 @@
+export declare function WorkBreakdownCard({ workspaceId, projectId, }: {
+    workspaceId?: string | null;
+    /** ANR-09 project scope. Omitted/undefined = every project (up to 50 — see truncatedProjects below). */
+    projectId?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WorkBreakdownCard.d.ts.map

package/dist/planmagnet/pages/analytics/WorkBreakdownCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkBreakdownCard.d.ts","sourceRoot":"","sources":["../../../../src/planmagnet/pages/analytics/WorkBreakdownCard.tsx"],"names":[],"mappings":"AAoVA,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,SAAS,GACV,EAAE;IACD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,wGAAwG;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAwNA"}

package/dist/planmagnet/pages/analytics/WorkBreakdownCard.js

@@ -0,0 +1,367 @@
+import { usePlanMagnetNavigate as e } from "../../providers/PlanMagnetProvider.js";
+import { Tooltip as t } from "../../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as n } from "../../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { Treemap as r } from "../../../node_modules/recharts/es6/chart/Treemap.js";
+import { isForbidden as i } from "../../utils/graphqlErrors.js";
+import { rowLinkProps as a } from "../../utils/rowNavigation.js";
+import { truncate as o } from "../../dependency/DependencyGraph.js";
+import { useState as s } from "react";
+import { LayoutGrid as c } from "lucide-react";
+import { gql as l } from "@apollo/client";
+import { useQuery as u } from "@apollo/client/react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Card as m, CardContent as h, CardHeader as g, CardTitle as _ } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/pages/analytics/WorkBreakdownCard.tsx
+var v = l`
+  query GetAnalyticsWorkBreakdown($workspaceId: ID!, $projectIds: [ID!]) {
+    planmagnetWorkBreakdown(workspaceId: $workspaceId, projectIds: $projectIds) {
+      truncatedProjects
+      projects {
+        projectId
+        projectName
+        truncatedEpics
+        epics {
+          epicId
+          epicTitle
+          openCount
+          doneCount
+          openPoints
+          donePoints
+        }
+        noEpic {
+          openCount
+          doneCount
+          openPoints
+          donePoints
+        }
+      }
+    }
+  }
+`;
+function y(e, t) {
+	return t === "items" ? {
+		size: e.openCount + e.doneCount,
+		done: e.doneCount
+	} : {
+		size: e.openPoints + e.donePoints,
+		done: e.donePoints
+	};
+}
+function b(e, t) {
+	let { size: n, done: r } = y(e, t);
+	return n > 0 ? r / n : null;
+}
+var x = .14, S = 1;
+function C(e, t, n) {
+	let r = [];
+	for (let i of e) {
+		let e = i.epics.map((e) => ({
+			name: e.epicTitle,
+			size: y(e, t).size,
+			doneRatio: b(e, t),
+			epicId: e.epicId,
+			isNoEpic: !1,
+			isHeader: !1,
+			projectId: i.projectId,
+			projectName: i.projectName,
+			openCount: e.openCount,
+			doneCount: e.doneCount,
+			openPoints: e.openPoints,
+			donePoints: e.donePoints
+		})).filter((e) => e.size > 0), a = y(i.noEpic, t).size;
+		a > 0 && e.push({
+			name: n,
+			size: a,
+			doneRatio: b(i.noEpic, t),
+			epicId: null,
+			isNoEpic: !0,
+			isHeader: !1,
+			projectId: i.projectId,
+			projectName: i.projectName,
+			openCount: i.noEpic.openCount,
+			doneCount: i.noEpic.doneCount,
+			openPoints: i.noEpic.openPoints,
+			donePoints: i.noEpic.donePoints
+		});
+		let o = e.reduce((e, t) => e + t.size, 0);
+		if (o <= 0) continue;
+		let s = {
+			name: i.projectName,
+			size: Math.max(Math.round(o * x), S),
+			doneRatio: null,
+			epicId: null,
+			isNoEpic: !1,
+			isHeader: !0,
+			projectId: i.projectId,
+			projectName: i.projectName,
+			openCount: 0,
+			doneCount: 0,
+			openPoints: 0,
+			donePoints: 0
+		};
+		r.push({
+			name: i.projectName,
+			projectId: i.projectId,
+			children: [s, ...e]
+		});
+	}
+	return r;
+}
+function w(e) {
+	return e === null ? .12 : .18 + e * .72;
+}
+function T(e) {
+	let { x: t = 0, y: n = 0, width: r = 0, height: i = 0, depth: s = 0, name: c = "", isHeader: l = !1, isNoEpic: u = !1, epicId: p = null, doneRatio: m = null, onOpenEpic: h, noEpicLabel: g } = e;
+	if (r <= 0 || i <= 0 || s === 0) return null;
+	if (s === 1) return /* @__PURE__ */ d("rect", {
+		x: t,
+		y: n,
+		width: r,
+		height: i,
+		rx: 4,
+		className: "fill-none stroke-border",
+		strokeWidth: 1
+	});
+	let _ = u ? g : c, v = r > 28 && i > 14, y = o(_, Math.max(1, Math.floor((r - 8) / 6)));
+	if (l) return /* @__PURE__ */ f("g", { children: [/* @__PURE__ */ d("rect", {
+		x: t,
+		y: n,
+		width: r,
+		height: i,
+		className: "fill-muted"
+	}), v && /* @__PURE__ */ d("text", {
+		x: t + 4,
+		y: n + i / 2,
+		dy: "0.32em",
+		className: "fill-foreground text-[11px] font-medium",
+		children: y
+	})] });
+	let b = /* @__PURE__ */ d("rect", {
+		x: t,
+		y: n,
+		width: r,
+		height: i,
+		className: "stroke-background",
+		style: {
+			fill: "var(--color-chart-2)",
+			fillOpacity: w(m)
+		},
+		strokeWidth: 2
+	}), x = v && /* @__PURE__ */ d("text", {
+		x: t + 4,
+		y: n + i / 2,
+		dy: "0.32em",
+		className: "fill-foreground text-[11px]",
+		children: y
+	});
+	if (!p) return /* @__PURE__ */ f("g", { children: [b, x] });
+	let S = `${c} — ${Math.round((m ?? 0) * 100)}% done`;
+	return /* @__PURE__ */ f("g", {
+		...a(() => h(p), S),
+		className: "cursor-pointer focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2",
+		children: [
+			/* @__PURE__ */ d("title", { children: S }),
+			b,
+			x
+		]
+	});
+}
+function E({ workspaceId: a, projectId: o }) {
+	let { t: l } = p(), y = e(), [b, x] = s("items"), { data: S, loading: w, error: E } = u(v, {
+		variables: {
+			workspaceId: a,
+			projectIds: o ? [o] : void 0
+		},
+		skip: !a
+	}), D = l("planmagnet.analytics.workBreakdown.noEpic", "No epic"), O = S?.planmagnetWorkBreakdown, k = O?.projects ?? [], A = C(k, b, D), j = k.filter((e) => e.truncatedEpics).map((e) => e.projectName);
+	function M(e) {
+		y(`/tasks/task-detail-page?taskId=${encodeURIComponent(e)}`);
+	}
+	return /* @__PURE__ */ f(m, {
+		"data-testid": "work-breakdown-card",
+		children: [/* @__PURE__ */ f(g, { children: [/* @__PURE__ */ f("div", {
+			className: "flex flex-wrap items-center justify-between gap-2",
+			children: [/* @__PURE__ */ f(_, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ d(c, { className: "h-4 w-4" }), l("planmagnet.analytics.workBreakdown.title", "Work breakdown")]
+			}), /* @__PURE__ */ d("div", {
+				className: "flex items-center gap-1 rounded-md border p-0.5",
+				role: "group",
+				"aria-label": l("planmagnet.analytics.workBreakdown.metricLabel", "Size by"),
+				"data-testid": "viz-breakdown-metric",
+				children: ["items", "points"].map((e) => /* @__PURE__ */ d("button", {
+					type: "button",
+					"aria-pressed": b === e,
+					onClick: () => x(e),
+					className: `px-2 py-1 text-xs rounded ${b === e ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"}`,
+					children: e === "items" ? l("planmagnet.analytics.workBreakdown.items", "Items") : l("planmagnet.analytics.workBreakdown.points", "Story points")
+				}, e))
+			})]
+		}), /* @__PURE__ */ d("p", {
+			className: "text-xs text-muted-foreground",
+			children: l("planmagnet.analytics.workBreakdown.subtitle", "Live open/done work, by project and epic — current state, not limited by the date range above.")
+		})] }), /* @__PURE__ */ d(h, { children: w && !S ? /* @__PURE__ */ d("div", {
+			className: "flex justify-center py-12",
+			children: /* @__PURE__ */ d("div", { className: "animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" })
+		}) : E ? /* @__PURE__ */ d("p", {
+			className: "text-sm text-status-error-text",
+			children: i(E) ? l("planmagnet.analytics.workBreakdown.forbidden", "You do not have access to the work breakdown for this scope.") : `${l("planmagnet.analytics.workBreakdown.error", "Work breakdown could not be loaded")}: ${E.message}`
+		}) : A.length === 0 ? /* @__PURE__ */ d("p", {
+			className: "text-sm text-muted-foreground py-8 text-center",
+			children: l("planmagnet.analytics.workBreakdown.empty", "No live work items found for this scope.")
+		}) : /* @__PURE__ */ f("div", {
+			className: "space-y-3",
+			children: [
+				O?.truncatedProjects && /* @__PURE__ */ d("p", {
+					className: "text-xs text-status-warning-text",
+					children: l("planmagnet.analytics.workBreakdown.truncatedProjects", "Showing the first 50 projects with live work. Narrow by project above to see a specific one.")
+				}),
+				j.length > 0 && /* @__PURE__ */ d("p", {
+					className: "text-xs text-status-warning-text",
+					children: l("planmagnet.analytics.workBreakdown.truncatedEpics", "Showing at most 200 epics for: {{projects}}.", { projects: j.join(", ") })
+				}),
+				/* @__PURE__ */ d("div", {
+					"data-testid": "viz-work-breakdown",
+					children: /* @__PURE__ */ d(n, {
+						width: "100%",
+						height: 360,
+						children: /* @__PURE__ */ d(r, {
+							data: A,
+							dataKey: "size",
+							type: "flat",
+							aspectRatio: 4 / 3,
+							content: /* @__PURE__ */ d(T, {
+								onOpenEpic: M,
+								noEpicLabel: D
+							}),
+							children: /* @__PURE__ */ d(t, { content: ({ active: e, payload: t }) => {
+								if (!e || !t || t.length === 0) return null;
+								let n = t[0]?.payload;
+								return !n || n.isHeader ? null : /* @__PURE__ */ f("div", {
+									className: "rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs shadow-md",
+									children: [
+										/* @__PURE__ */ d("p", {
+											className: "font-medium text-popover-foreground",
+											children: n.isNoEpic ? D : n.name
+										}),
+										!n.isNoEpic && /* @__PURE__ */ d("p", {
+											className: "text-muted-foreground",
+											children: n.projectName
+										}),
+										/* @__PURE__ */ f("p", {
+											className: "mt-1",
+											children: [
+												l("planmagnet.analytics.workBreakdown.tooltipOpen", "Open"),
+												":",
+												" ",
+												n.openCount,
+												" (",
+												n.openPoints,
+												" ",
+												l("planmagnet.analytics.workBreakdown.pts", "pts"),
+												") ·",
+												" ",
+												l("planmagnet.analytics.workBreakdown.tooltipDone", "Done"),
+												":",
+												" ",
+												n.doneCount,
+												" (",
+												n.donePoints,
+												" ",
+												l("planmagnet.analytics.workBreakdown.pts", "pts"),
+												")"
+											]
+										}),
+										/* @__PURE__ */ f("p", { children: [
+											l("planmagnet.analytics.workBreakdown.doneRatio", "Done ratio"),
+											":",
+											" ",
+											n.doneRatio === null ? "—" : `${Math.round(n.doneRatio * 100)}%`
+										] })
+									]
+								});
+							} })
+						})
+					})
+				}),
+				/* @__PURE__ */ d("p", {
+					className: "text-xs text-muted-foreground",
+					children: l("planmagnet.analytics.workBreakdown.legend", "Shade = share done (lighter → more open, darker → more done). Click an epic to open it.")
+				}),
+				/* @__PURE__ */ f("table", {
+					className: "w-full text-sm",
+					"data-testid": "viz-work-breakdown-table",
+					children: [
+						/* @__PURE__ */ d("caption", {
+							className: "mb-2 text-left text-xs text-muted-foreground",
+							children: l("planmagnet.analytics.workBreakdown.tableCaption", "Work breakdown by project and epic")
+						}),
+						/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ f("tr", {
+							className: "text-left text-xs text-muted-foreground",
+							children: [
+								/* @__PURE__ */ d("th", {
+									className: "py-1 pr-2 font-normal",
+									children: l("planmagnet.analytics.workBreakdown.project", "Project")
+								}),
+								/* @__PURE__ */ d("th", {
+									className: "py-1 pr-2 font-normal",
+									children: l("planmagnet.analytics.workBreakdown.epic", "Epic")
+								}),
+								/* @__PURE__ */ d("th", {
+									className: "py-1 text-right font-normal",
+									children: l("planmagnet.analytics.workBreakdown.tooltipOpen", "Open")
+								}),
+								/* @__PURE__ */ d("th", {
+									className: "py-1 text-right font-normal",
+									children: l("planmagnet.analytics.workBreakdown.tooltipDone", "Done")
+								}),
+								/* @__PURE__ */ d("th", {
+									className: "py-1 text-right font-normal",
+									children: l("planmagnet.analytics.workBreakdown.doneRatio", "Done ratio")
+								})
+							]
+						}) }),
+						/* @__PURE__ */ d("tbody", { children: A.flatMap((e) => e.children.filter((e) => !e.isHeader).map((t) => {
+							let n = t.epicId, r = b === "items" ? t.openCount : t.openPoints, i = b === "items" ? t.doneCount : t.donePoints;
+							return /* @__PURE__ */ f("tr", {
+								className: "border-t",
+								children: [
+									/* @__PURE__ */ d("td", {
+										className: "py-1.5 pr-2",
+										children: e.name
+									}),
+									/* @__PURE__ */ d("td", {
+										className: "py-1.5 pr-2",
+										children: n ? /* @__PURE__ */ d("button", {
+											type: "button",
+											className: "text-left text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary",
+											onClick: () => M(n),
+											children: t.name
+										}) : D
+									}),
+									/* @__PURE__ */ d("td", {
+										className: "py-1.5 text-right tabular-nums",
+										children: r
+									}),
+									/* @__PURE__ */ d("td", {
+										className: "py-1.5 text-right tabular-nums",
+										children: i
+									}),
+									/* @__PURE__ */ d("td", {
+										className: "py-1.5 text-right tabular-nums",
+										children: t.doneRatio === null ? "—" : `${Math.round(t.doneRatio * 100)}%`
+									})
+								]
+							}, `${e.projectId}-${n ?? "no-epic"}`);
+						})) })
+					]
+				})
+			]
+		}) })]
+	});
+}
+//#endregion
+export { E as WorkBreakdownCard };
+
+//# sourceMappingURL=WorkBreakdownCard.js.map