@burdenoff/microfe-subscriberbot 2026.1030.5 → 2026.1030.7

package/dist/subscriberbot/pages/enterprise/EnterpriseSpendPage.js

@@ -0,0 +1,703 @@
+import { useSubscriberBot as e } from "../../context/SubscriberBotContext.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import { MetricsCard as r } from "../../components/MetricsCard.js";
+import { formatCurrency as i, formatDate as a } from "../../utils/formatters.js";
+import { EmptyState as o } from "../../components/EmptyState.js";
+import { Modal as s } from "../../components/Modal.js";
+import { useTr as c } from "../../hooks/useTr.js";
+import { ErrorView as l, LoadingView as u, Section as d } from "../../components/StateViews.js";
+import { BarList as f, MiniProgress as p, Sparkline as m } from "../../components/viz.js";
+import "../../components/index.js";
+import { useEnterpriseSpendDashboard as h, useSetSpendBudget as g, useSpendBudgets as _ } from "../../hooks/useSubscriberBotApi.js";
+import { useMemo as v, useState as y } from "react";
+import { AlertTriangle as b, Building2 as x, CalendarClock as S, Copy as C, EyeOff as w, Layers as T, PiggyBank as E, ShieldAlert as D, Target as O, Users as k, Wallet as A } from "lucide-react";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
+import { GlassCard as N, PagePurpose as P } from "@burdenoff/fe-libs/ui";
+//#region src/subscriberbot/pages/enterprise/EnterpriseSpendPage.tsx
+var F = {
+	UNCATALOGUED: {
+		key: "enterprise.shadow.reasons.uncatalogued",
+		fallback: "Not in the catalogue"
+	},
+	UNVERIFIED_PROVIDER: {
+		key: "enterprise.shadow.reasons.unverified",
+		fallback: "Unverified provider"
+	},
+	DEPRECATED_PROVIDER: {
+		key: "enterprise.shadow.reasons.deprecated",
+		fallback: "Deprecated provider"
+	}
+}, I = {
+	EXACT_DUPLICATE: {
+		key: "enterprise.duplicates.types.exact",
+		fallback: "Same vendor"
+	},
+	CAPABILITY: {
+		key: "enterprise.duplicates.types.capability",
+		fallback: "Same capability"
+	},
+	ENTITLEMENT: {
+		key: "enterprise.duplicates.types.entitlement",
+		fallback: "Covered by another plan"
+	}
+}, L = {
+	PAST_DUE: {
+		key: "enterprise.risks.kinds.pastDue",
+		fallback: "Payment failed"
+	},
+	MISSING_INVOICE: {
+		key: "enterprise.risks.kinds.missingInvoice",
+		fallback: "Missing invoice"
+	},
+	UNTRACKED_TRIAL: {
+		key: "enterprise.risks.kinds.untrackedTrial",
+		fallback: "Untracked trial"
+	},
+	HIGH_COST_AI: {
+		key: "enterprise.risks.kinds.highCostAi",
+		fallback: "High-cost AI service"
+	}
+}, R = {
+	HIGH: "bg-status-error-bg-subtle text-status-error-text",
+	MEDIUM: "bg-status-warning-bg-subtle text-status-warning-text",
+	LOW: "bg-bg-sunken text-text-secondary"
+}, z = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", B = "mb-1.5 block text-xs font-medium text-text-secondary", V = "truncate text-left text-sm font-medium text-text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] rounded";
+function H(e, t) {
+	return t ?? e("enterprise.departments.unassigned", "Unassigned");
+}
+var U = ({ status: e, fmt: n, tr: r }) => /* @__PURE__ */ M("div", {
+	className: "space-y-1.5",
+	children: [/* @__PURE__ */ j(p, {
+		value: Math.min(e.utilizationPct, 100),
+		tone: e.overBudget ? "negative" : e.utilizationPct >= 85 ? "warning" : "positive"
+	}), /* @__PURE__ */ j("p", {
+		className: t("text-xs tabular-nums", e.overBudget ? "text-status-error-text" : "text-text-secondary"),
+		children: e.overBudget ? r("enterprise.budget.over", "{{amount}} over a {{budget}} budget", {
+			amount: n(-e.variance),
+			budget: n(e.monthlyBudget)
+		}) : r("enterprise.budget.under", "{{amount}} left of {{budget}} ({{pct}}% used)", {
+			amount: n(e.variance),
+			budget: n(e.monthlyBudget),
+			pct: e.utilizationPct
+		})
+	})]
+}), W = ({ title: e, icon: t, children: n, testId: r }) => /* @__PURE__ */ M(N, {
+	treatment: "plain",
+	className: "p-6",
+	"data-testid": r,
+	children: [/* @__PURE__ */ M("div", {
+		className: "mb-4 flex items-center gap-2",
+		children: [/* @__PURE__ */ j("span", {
+			className: "text-text-secondary",
+			children: t
+		}), /* @__PURE__ */ j("h3", {
+			className: "text-sm font-semibold text-text-primary",
+			children: e
+		})]
+	}), n]
+}), G = ({ currency: e, departments: t, onClose: n }) => {
+	let r = c(), a = _(), o = g(), [l, d] = y(""), [f, p] = y(""), [m, h] = y(null), v = (a.data ?? []).filter((t) => t.currency === e), b = (t, n) => {
+		h(null), o.mutate({
+			department: t,
+			currency: e,
+			monthlyAmount: n
+		}, {
+			onSuccess: () => {
+				p(""), d("");
+			},
+			onError: (e) => h(e instanceof Error ? e.message : r("enterprise.budgets.error", "Could not save the budget."))
+		});
+	};
+	return /* @__PURE__ */ M(s, {
+		title: r("enterprise.budgets.title", "Monthly budgets"),
+		description: r("enterprise.budgets.description", "Budgets apply to spend billed in {{currency}}. Leave the department empty for the company-wide budget.", { currency: e }),
+		onClose: n,
+		maxWidthClassName: "max-w-xl",
+		children: [/* @__PURE__ */ M("form", {
+			onSubmit: (e) => {
+				e.preventDefault();
+				let t = Number(f);
+				if (!f.trim() || !Number.isFinite(t) || t <= 0) {
+					h(r("enterprise.budgets.amountRequired", "Enter a monthly amount above zero."));
+					return;
+				}
+				b(l.trim() || null, t);
+			},
+			className: "space-y-4",
+			children: [m && /* @__PURE__ */ j("div", {
+				className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
+				children: m
+			}), /* @__PURE__ */ M("div", {
+				className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_10rem_auto] sm:items-end",
+				children: [
+					/* @__PURE__ */ M("div", { children: [
+						/* @__PURE__ */ j("label", {
+							htmlFor: "budget-department",
+							className: B,
+							children: r("enterprise.budgets.department", "Department (optional)")
+						}),
+						/* @__PURE__ */ j("input", {
+							id: "budget-department",
+							list: "budget-department-options",
+							value: l,
+							maxLength: 120,
+							onChange: (e) => d(e.target.value),
+							placeholder: r("enterprise.budgets.companyWide", "Company-wide"),
+							className: z
+						}),
+						/* @__PURE__ */ j("datalist", {
+							id: "budget-department-options",
+							children: t.map((e) => /* @__PURE__ */ j("option", { value: e }, e))
+						})
+					] }),
+					/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("label", {
+						htmlFor: "budget-amount",
+						className: B,
+						children: r("enterprise.budgets.amount", "Per month ({{currency}})", { currency: e })
+					}), /* @__PURE__ */ j("input", {
+						id: "budget-amount",
+						type: "number",
+						min: "0",
+						step: "0.01",
+						inputMode: "decimal",
+						value: f,
+						onChange: (e) => p(e.target.value),
+						className: z
+					})] }),
+					/* @__PURE__ */ j("button", {
+						type: "submit",
+						disabled: o.isPending,
+						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-60",
+						children: r("enterprise.budgets.save", "Save budget")
+					})
+				]
+			})]
+		}), /* @__PURE__ */ j("div", {
+			className: "mt-6",
+			children: a.isLoading ? /* @__PURE__ */ j(u, { label: r("enterprise.budgets.loading", "Loading budgets…") }) : v.length === 0 ? /* @__PURE__ */ j("p", {
+				className: "text-sm text-text-secondary",
+				children: r("enterprise.budgets.none", "No budgets set for {{currency}} yet.", { currency: e })
+			}) : /* @__PURE__ */ j("ul", {
+				className: "divide-y divide-border-subtle rounded-lg border border-border-subtle",
+				children: v.map((e) => /* @__PURE__ */ M("li", {
+					className: "flex items-center justify-between gap-3 px-4 py-3",
+					children: [/* @__PURE__ */ j("span", {
+						className: "truncate text-sm text-text-primary",
+						children: e.department ?? r("enterprise.budgets.companyWide", "Company-wide")
+					}), /* @__PURE__ */ M("span", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ j("span", {
+							className: "text-sm font-semibold tabular-nums text-text-primary",
+							children: i(e.monthlyAmount, e.currency)
+						}), /* @__PURE__ */ j("button", {
+							type: "button",
+							onClick: () => b(e.department, null),
+							disabled: o.isPending,
+							className: "text-xs font-medium text-status-error-text hover:underline disabled:opacity-60",
+							children: r("enterprise.budgets.remove", "Remove")
+						})]
+					})]
+				}, e.id))
+			})
+		})]
+	});
+};
+function K() {
+	let s = c(), { navigateTo: g } = e(), [_, z] = y(null), [B, K] = y(!1), q = h(_), J = q.data, Y = v(() => {
+		let e = J?.currency ?? "USD";
+		return (t) => i(t, e);
+	}, [J?.currency]), X = (e) => g(`/relationships/${e}`);
+	if (q.isLoading) return /* @__PURE__ */ j(u, { label: s("enterprise.loading", "Aggregating company-wide spend…") });
+	if (q.isError || !J) return /* @__PURE__ */ j(l, {
+		message: s("enterprise.error", "Could not load the enterprise spend dashboard."),
+		onRetry: () => void q.refetch()
+	});
+	let Z = J.renewalPipeline[0], Q = J.monthlySpendChangePct, $ = [J.currency, ...J.otherCurrencies.map((e) => e.currency)], ee = J.departments.map((e) => e.department).filter((e) => !!e), te = J.activeRelationshipCount === 0 && J.shadowItCount === 0 && J.riskFlagCount === 0 && J.departments.length === 0;
+	return /* @__PURE__ */ M(n, {
+		title: s("enterprise.title", "SaaS spend management"),
+		description: s("enterprise.description", "Company-wide recurring spend by department, with duplicate tools, shadow IT, renewals and risks."),
+		actions: /* @__PURE__ */ M("div", {
+			className: "flex items-center gap-2",
+			children: [$.length > 1 && /* @__PURE__ */ M("label", {
+				className: "flex items-center gap-2 text-xs text-text-secondary",
+				children: [s("enterprise.currency", "Currency"), /* @__PURE__ */ j("select", {
+					"aria-label": s("enterprise.currency", "Currency"),
+					value: J.currency,
+					onChange: (e) => z(e.target.value),
+					className: "rounded-lg border border-border-subtle bg-bg-surface px-2 py-1.5 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+					children: $.map((e) => /* @__PURE__ */ j("option", {
+						value: e,
+						children: e
+					}, e))
+				})]
+			}), /* @__PURE__ */ M("button", {
+				type: "button",
+				onClick: () => K(!0),
+				className: "inline-flex items-center gap-2 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+				children: [
+					/* @__PURE__ */ j(O, {
+						className: "h-4 w-4",
+						"aria-hidden": !0
+					}),
+					" ",
+					s("enterprise.manageBudgets", "Budgets")
+				]
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ j(P, {
+				className: "mb-6",
+				children: s("enterprise.purpose", "For finance, IT and procurement. Spend is the monthly run-rate of every subscription billing right now, computed live from your portfolio in one currency at a time. Allocate subscriptions to a department on the subscription itself.")
+			}),
+			J.truncated && /* @__PURE__ */ j("p", {
+				className: "mb-4 rounded-lg bg-status-warning-bg-subtle px-4 py-2 text-sm text-status-warning-text",
+				children: s("enterprise.truncated", "This workspace has more subscriptions than one dashboard aggregates; figures cover the most recent ones.")
+			}),
+			te ? /* @__PURE__ */ j(o, {
+				icon: /* @__PURE__ */ j(x, { className: "h-8 w-8" }),
+				title: s("enterprise.emptyTitle", "No company spend to analyse yet"),
+				description: s("enterprise.emptyDescription", "Add your SaaS subscriptions and allocate them to departments to see spend, duplicates, shadow IT and renewals here."),
+				action: /* @__PURE__ */ j("button", {
+					type: "button",
+					onClick: () => g("/relationships/new"),
+					className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
+					children: s("enterprise.emptyAction", "Add a subscription")
+				})
+			}) : /* @__PURE__ */ M("div", {
+				className: "space-y-6",
+				children: [
+					/* @__PURE__ */ M("div", {
+						className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4",
+						"data-testid": "enterprise-kpis",
+						children: [
+							/* @__PURE__ */ j(r, {
+								featured: !0,
+								icon: /* @__PURE__ */ j(A, { className: "h-5 w-5" }),
+								value: Y(J.annualSpend),
+								label: s("enterprise.kpis.annualSpend", "Total SaaS spend / year ({{monthly}} / month)", { monthly: Y(J.monthlySpend) }),
+								trend: Q == null ? void 0 : Q > 0 ? "up" : Q < 0 ? "down" : "neutral",
+								trendValue: Q == null ? void 0 : `${Q > 0 ? "+" : ""}${Q}%`
+							}),
+							/* @__PURE__ */ j(r, {
+								icon: /* @__PURE__ */ j(T, { className: "h-5 w-5" }),
+								value: J.activeRelationshipCount,
+								label: s("enterprise.kpis.activeLicenses", "Active licences")
+							}),
+							/* @__PURE__ */ j(r, {
+								icon: /* @__PURE__ */ j(k, { className: "h-5 w-5" }),
+								value: J.seatUtilizationPct == null ? "—" : `${J.seatUtilizationPct}%`,
+								label: J.seatUtilizationPct == null ? s("enterprise.kpis.seatsUntracked", "Seats utilised (no seat data yet)") : s("enterprise.kpis.seats", "Seats utilised ({{used}} of {{assigned}})", {
+									used: J.seatsUsed,
+									assigned: J.seatsAssigned
+								})
+							}),
+							/* @__PURE__ */ j(r, {
+								icon: /* @__PURE__ */ j(S, { className: "h-5 w-5" }),
+								value: Z ? Z.relationshipCount : 0,
+								label: s("enterprise.kpis.renewals", "Renewals this quarter ({{amount}})", { amount: Y(Z?.amount ?? 0) })
+							})
+						]
+					}),
+					/* @__PURE__ */ M("div", {
+						className: "grid grid-cols-1 gap-4 lg:grid-cols-3",
+						children: [
+							/* @__PURE__ */ M(W, {
+								title: s("enterprise.trend.title", "Monthly run-rate, last 150 days"),
+								icon: /* @__PURE__ */ j(A, { className: "h-4 w-4" }),
+								children: [/* @__PURE__ */ j(m, {
+									points: J.trend.map((e) => e.monthlySpend),
+									positive: (Q ?? 0) <= 0,
+									className: "w-full"
+								}), /* @__PURE__ */ j("p", {
+									className: "mt-2 text-xs text-text-secondary",
+									children: s("enterprise.trend.vs", "{{now}} now vs {{before}} 30 days ago", {
+										now: Y(J.monthlySpend),
+										before: Y(J.previousMonthlySpend)
+									})
+								})]
+							}),
+							/* @__PURE__ */ j(W, {
+								title: s("enterprise.budget.title", "Company budget"),
+								icon: /* @__PURE__ */ j(O, { className: "h-4 w-4" }),
+								testId: "enterprise-budget",
+								children: J.budget ? /* @__PURE__ */ j(U, {
+									status: J.budget,
+									fmt: Y,
+									tr: s
+								}) : /* @__PURE__ */ M("div", {
+									className: "space-y-3",
+									children: [/* @__PURE__ */ j("p", {
+										className: "text-sm text-text-secondary",
+										children: s("enterprise.budget.none", "No company-wide budget set for {{currency}}.", { currency: J.currency })
+									}), /* @__PURE__ */ j("button", {
+										type: "button",
+										onClick: () => K(!0),
+										className: "text-sm font-medium text-text-primary underline",
+										children: s("enterprise.budget.set", "Set a budget")
+									})]
+								})
+							}),
+							/* @__PURE__ */ M(W, {
+								title: s("enterprise.savings.title", "Consolidation opportunity"),
+								icon: /* @__PURE__ */ j(E, { className: "h-4 w-4" }),
+								children: [/* @__PURE__ */ M("p", {
+									className: "text-2xl font-bold tabular-nums text-text-primary",
+									children: [Y(J.duplicatePotentialMonthlySavings), /* @__PURE__ */ j("span", {
+										className: "text-sm font-normal text-text-secondary",
+										children: s("enterprise.perMonth", "/mo")
+									})]
+								}), /* @__PURE__ */ j("p", {
+									className: "mt-1 text-xs text-text-secondary",
+									children: s("enterprise.savings.detail", "Upper bound if each duplicated tool is consolidated into one subscription; shadow IT costs {{shadow}} / month.", { shadow: Y(J.shadowItMonthlySpend) })
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ j(d, {
+						title: s("enterprise.departments.title", "Spend by department"),
+						description: s("enterprise.departments.description", "Monthly run-rate per department, with each department budget."),
+						children: /* @__PURE__ */ j(N, {
+							treatment: "plain",
+							className: "p-6",
+							"data-testid": "enterprise-departments",
+							children: J.departments.length ? /* @__PURE__ */ M("div", {
+								className: "grid grid-cols-1 gap-6 lg:grid-cols-2",
+								children: [/* @__PURE__ */ j(f, {
+									data: J.departments.map((e) => ({
+										label: H(s, e.department),
+										value: e.monthlySpend
+									})),
+									valueFormat: Y
+								}), /* @__PURE__ */ j("ul", {
+									className: "divide-y divide-border-subtle",
+									children: J.departments.map((e) => /* @__PURE__ */ M("li", {
+										className: "py-3 first:pt-0",
+										children: [/* @__PURE__ */ M("div", {
+											className: "flex items-center justify-between gap-3 text-sm",
+											children: [/* @__PURE__ */ j("span", {
+												className: "truncate font-medium text-text-primary",
+												children: H(s, e.department)
+											}), /* @__PURE__ */ j("span", {
+												className: "shrink-0 tabular-nums text-text-secondary",
+												children: s("enterprise.departments.row", "{{count}} subs · {{share}}%", {
+													count: e.relationshipCount,
+													share: e.sharePct
+												})
+											})]
+										}), e.budget && /* @__PURE__ */ j("div", {
+											className: "mt-2",
+											children: /* @__PURE__ */ j(U, {
+												status: e.budget,
+												fmt: Y,
+												tr: s
+											})
+										})]
+									}, e.department ?? "__unassigned"))
+								})]
+							}) : /* @__PURE__ */ j("p", {
+								className: "text-sm text-text-secondary",
+								children: s("enterprise.departments.none", "No spend is billing right now.")
+							})
+						})
+					}),
+					/* @__PURE__ */ M("div", {
+						className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
+						children: [/* @__PURE__ */ j(W, {
+							title: s("enterprise.duplicates.title", "Duplicate tools ({{count}})", { count: J.duplicateTools.length }),
+							icon: /* @__PURE__ */ j(C, { className: "h-4 w-4" }),
+							testId: "enterprise-duplicates",
+							children: J.duplicateTools.length ? /* @__PURE__ */ j("ul", {
+								className: "space-y-3",
+								children: J.duplicateTools.map((e) => /* @__PURE__ */ M("li", {
+									className: "rounded-lg border border-status-warning-text/30 bg-status-warning-bg-subtle p-3",
+									children: [
+										/* @__PURE__ */ M("div", {
+											className: "flex items-start justify-between gap-3",
+											children: [/* @__PURE__ */ M("div", {
+												className: "min-w-0",
+												children: [e.providerId ? /* @__PURE__ */ j("button", {
+													type: "button",
+													className: V,
+													onClick: () => g(`/providers/${e.providerId}`),
+													children: e.name
+												}) : /* @__PURE__ */ j("p", {
+													className: "truncate text-sm font-medium text-text-primary",
+													children: e.name
+												}), /* @__PURE__ */ j("p", {
+													className: "text-xs text-text-secondary",
+													children: s("enterprise.duplicates.summary", "{{count}} subscriptions · {{teams}}", {
+														count: e.relationshipCount,
+														teams: e.departments.length ? e.departments.join(", ") : s("enterprise.departments.unassigned", "Unassigned")
+													})
+												})]
+											}), /* @__PURE__ */ j("span", {
+												className: "shrink-0 text-right text-xs text-status-warning-text",
+												children: s("enterprise.duplicates.save", "Save up to {{amount}}/mo", { amount: Y(e.potentialMonthlySavings) })
+											})]
+										}),
+										/* @__PURE__ */ j("ul", {
+											className: "mt-2 flex flex-wrap gap-1.5",
+											children: e.relationships.map((e) => /* @__PURE__ */ j("li", { children: /* @__PURE__ */ M("button", {
+												type: "button",
+												onClick: () => X(e.relationshipId),
+												className: t("rounded-md px-2 py-1 text-xs hover:bg-bg-sunken", e.keep ? "border border-status-success-text/40 bg-status-success-bg-subtle text-status-success-text" : "bg-bg-surface text-text-primary"),
+												children: [
+													e.keep ? `${s("enterprise.duplicates.keep", "Keep")}: ` : "",
+													e.label,
+													" · ",
+													Y(e.monthlySpend)
+												]
+											}) }, e.relationshipId))
+										}),
+										/* @__PURE__ */ M("p", {
+											className: "mt-2 text-xs text-text-secondary",
+											children: [
+												s(I[e.type].key, I[e.type].fallback),
+												" ·",
+												" ",
+												e.rationale
+											]
+										})
+									]
+								}, e.key))
+							}) : /* @__PURE__ */ j("p", {
+								className: "text-sm text-text-secondary",
+								children: s("enterprise.duplicates.none", "No duplicate or overlapping tools found.")
+							})
+						}), /* @__PURE__ */ j(W, {
+							title: s("enterprise.shadow.title", "Shadow IT ({{count}})", { count: J.shadowItCount }),
+							icon: /* @__PURE__ */ j(w, { className: "h-4 w-4" }),
+							testId: "enterprise-shadow-it",
+							children: J.shadowIt.length ? /* @__PURE__ */ j("ul", {
+								className: "divide-y divide-border-subtle",
+								children: J.shadowIt.map((e) => /* @__PURE__ */ M("li", {
+									className: "flex items-center justify-between gap-3 py-2.5",
+									children: [/* @__PURE__ */ M("div", {
+										className: "min-w-0",
+										children: [/* @__PURE__ */ j("button", {
+											type: "button",
+											className: V,
+											onClick: () => X(e.relationshipId),
+											children: e.label
+										}), /* @__PURE__ */ M("p", {
+											className: "text-xs text-text-secondary",
+											children: [
+												s(F[e.reason].key, F[e.reason].fallback),
+												" · ",
+												H(s, e.department),
+												" · ",
+												s("enterprise.shadow.found", "found {{date}}", { date: a(e.detectedAt) })
+											]
+										})]
+									}), /* @__PURE__ */ j("span", {
+										className: "shrink-0 text-sm font-semibold tabular-nums text-text-primary",
+										children: Y(e.monthlySpend)
+									})]
+								}, e.relationshipId))
+							}) : /* @__PURE__ */ j("p", {
+								className: "text-sm text-text-secondary",
+								children: s("enterprise.shadow.none", "Every discovered tool is linked to an approved provider.")
+							})
+						})]
+					}),
+					/* @__PURE__ */ j(d, {
+						title: s("enterprise.renewals.title", "Renewal pipeline"),
+						description: s("enterprise.renewals.description", "Renewal charges due by quarter, for planning renegotiations."),
+						children: /* @__PURE__ */ j("div", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4",
+							"data-testid": "enterprise-renewals",
+							children: J.renewalPipeline.map((e) => /* @__PURE__ */ M(N, {
+								treatment: "plain",
+								className: "p-5",
+								children: [
+									/* @__PURE__ */ j("p", {
+										className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
+										children: e.label
+									}),
+									/* @__PURE__ */ j("p", {
+										className: "mt-1 text-xl font-bold tabular-nums text-text-primary",
+										children: Y(e.amount)
+									}),
+									/* @__PURE__ */ j("p", {
+										className: "text-xs text-text-secondary",
+										children: s("enterprise.renewals.counts", "{{renewals}} renewals · {{subs}} subscriptions", {
+											renewals: e.renewalCount,
+											subs: e.relationshipCount
+										})
+									}),
+									e.topRenewals.length > 0 && /* @__PURE__ */ j("ul", {
+										className: "mt-3 space-y-1.5",
+										children: e.topRenewals.map((e) => /* @__PURE__ */ M("li", {
+											className: "flex items-center justify-between gap-2",
+											children: [/* @__PURE__ */ j("button", {
+												type: "button",
+												className: t(V, "text-xs"),
+												onClick: () => X(e.relationshipId),
+												children: e.label
+											}), /* @__PURE__ */ M("span", {
+												className: "shrink-0 text-xs tabular-nums text-text-secondary",
+												children: [
+													a(e.renewsAt),
+													" · ",
+													Y(e.amount)
+												]
+											})]
+										}, e.relationshipId))
+									})
+								]
+							}, e.label))
+						})
+					}),
+					/* @__PURE__ */ j(d, {
+						title: s("enterprise.risks.title", "Compliance and risk flags ({{count}})", { count: J.riskFlagCount }),
+						children: /* @__PURE__ */ j(N, {
+							treatment: "plain",
+							className: "p-2",
+							"data-testid": "enterprise-risks",
+							children: J.riskFlags.length ? /* @__PURE__ */ j("ul", {
+								className: "divide-y divide-border-subtle",
+								children: J.riskFlags.map((e) => /* @__PURE__ */ M("li", {
+									className: "flex flex-col gap-2 p-4 sm:flex-row sm:items-center sm:justify-between",
+									children: [/* @__PURE__ */ M("div", {
+										className: "flex min-w-0 items-start gap-3",
+										children: [/* @__PURE__ */ j("span", {
+											className: t("shrink-0 rounded-md px-2 py-0.5 text-xs font-medium", R[e.severity]),
+											children: s(L[e.kind].key, L[e.kind].fallback)
+										}), /* @__PURE__ */ M("div", {
+											className: "min-w-0",
+											children: [/* @__PURE__ */ j("button", {
+												type: "button",
+												className: V,
+												onClick: () => X(e.relationshipId),
+												children: e.label
+											}), /* @__PURE__ */ j("p", {
+												className: "text-xs text-text-secondary",
+												children: e.detail
+											})]
+										})]
+									}), /* @__PURE__ */ M("span", {
+										className: "shrink-0 text-xs text-text-secondary",
+										children: [
+											H(s, e.department),
+											" · ",
+											Y(e.monthlySpend),
+											s("enterprise.perMonth", "/mo")
+										]
+									})]
+								}, `${e.kind}-${e.relationshipId}`))
+							}) : /* @__PURE__ */ M("p", {
+								className: "flex items-center gap-2 p-4 text-sm text-text-secondary",
+								children: [/* @__PURE__ */ j(D, {
+									className: "h-4 w-4",
+									"aria-hidden": !0
+								}), s("enterprise.risks.none", "No compliance or risk issues found.")]
+							})
+						})
+					}),
+					/* @__PURE__ */ j(d, {
+						title: s("enterprise.licenses.title", "Licences"),
+						children: /* @__PURE__ */ M(N, {
+							treatment: "plain",
+							className: "overflow-x-auto",
+							"data-testid": "enterprise-licenses",
+							children: [/* @__PURE__ */ M("table", {
+								className: "w-full min-w-[640px] text-sm",
+								children: [/* @__PURE__ */ j("thead", { children: /* @__PURE__ */ M("tr", {
+									className: "border-b border-border-subtle text-left text-xs text-text-secondary",
+									children: [
+										/* @__PURE__ */ j("th", {
+											className: "px-4 py-3 font-medium",
+											children: s("enterprise.licenses.app", "App")
+										}),
+										/* @__PURE__ */ j("th", {
+											className: "px-4 py-3 font-medium",
+											children: s("enterprise.licenses.department", "Department")
+										}),
+										/* @__PURE__ */ j("th", {
+											className: "px-4 py-3 font-medium",
+											children: s("enterprise.licenses.seats", "Seats used / assigned")
+										}),
+										/* @__PURE__ */ j("th", {
+											className: "px-4 py-3 font-medium",
+											children: s("enterprise.licenses.utilization", "Utilisation")
+										}),
+										/* @__PURE__ */ j("th", {
+											className: "px-4 py-3 text-right font-medium",
+											children: s("enterprise.licenses.annualCost", "Annual cost")
+										}),
+										/* @__PURE__ */ j("th", {
+											className: "px-4 py-3 font-medium",
+											children: s("enterprise.licenses.renews", "Renews")
+										})
+									]
+								}) }), /* @__PURE__ */ j("tbody", {
+									className: "divide-y divide-border-subtle",
+									children: J.licenses.map((e) => /* @__PURE__ */ M("tr", { children: [
+										/* @__PURE__ */ M("td", {
+											className: "max-w-[16rem] px-4 py-3",
+											children: [/* @__PURE__ */ j("button", {
+												type: "button",
+												className: V,
+												onClick: () => X(e.relationshipId),
+												children: e.label
+											}), e.providerName && /* @__PURE__ */ j("p", {
+												className: "truncate text-xs text-text-secondary",
+												children: e.providerName
+											})]
+										}),
+										/* @__PURE__ */ j("td", {
+											className: "px-4 py-3 text-text-secondary",
+											children: H(s, e.department)
+										}),
+										/* @__PURE__ */ j("td", {
+											className: "px-4 py-3 tabular-nums text-text-primary",
+											children: e.seatsAssigned == null ? "—" : `${e.seatsUsed ?? 0} / ${e.seatsAssigned}`
+										}),
+										/* @__PURE__ */ j("td", {
+											className: "w-40 px-4 py-3",
+											children: e.utilizationPct == null ? /* @__PURE__ */ j("span", {
+												className: "text-text-secondary",
+												children: "—"
+											}) : /* @__PURE__ */ j(p, {
+												value: e.utilizationPct,
+												tone: e.utilizationPct >= 70 ? "positive" : "warning"
+											})
+										}),
+										/* @__PURE__ */ j("td", {
+											className: "px-4 py-3 text-right font-semibold tabular-nums text-text-primary",
+											children: Y(e.annualCost)
+										}),
+										/* @__PURE__ */ j("td", {
+											className: "px-4 py-3 text-text-secondary",
+											children: e.renewsAt ? a(e.renewsAt) : "—"
+										})
+									] }, e.relationshipId))
+								})]
+							}), J.licenses.length === 0 && /* @__PURE__ */ j("p", {
+								className: "p-4 text-sm text-text-secondary",
+								children: s("enterprise.licenses.none", "No subscription is billing right now.")
+							})]
+						})
+					}),
+					J.otherCurrencies.length > 0 && /* @__PURE__ */ M("p", {
+						className: "flex items-start gap-2 text-xs text-text-secondary",
+						children: [/* @__PURE__ */ j(b, {
+							className: "mt-0.5 h-3.5 w-3.5 shrink-0",
+							"aria-hidden": !0
+						}), s("enterprise.otherCurrencies", "Not included above (amounts are never converted): {{list}}. Switch currency to see them.", { list: J.otherCurrencies.map((e) => `${i(e.monthlySpend, e.currency)}/mo`).join(", ") })]
+					})
+				]
+			}),
+			B && /* @__PURE__ */ j(G, {
+				currency: J.currency,
+				departments: ee,
+				onClose: () => K(!1)
+			})
+		]
+	});
+}
+//#endregion
+export { K as EnterpriseSpendPage };
+
+//# sourceMappingURL=EnterpriseSpendPage.js.map