@burdenoff/microfe-subscriberbot 2026.801.1 → 2026.829.1

package/dist/subscriberbot/pages/providers/ProvidersListPage.js

@@ -8,120 +8,53 @@ import { ErrorView as o, LoadingView as s } from "../../components/StateViews.js
 import { MiniProgress as c } from "../../components/viz.js";
 import "../../components/index.js";
 import { useProviders as l } from "../../hooks/useSubscriberBotApi.js";
-import { useState as u } from "react";
-import { Activity as d, BadgeCheck as f, Building2 as p, ChevronRight as m, Plus as h, Search as g, ShieldCheck as _, Store as v } from "lucide-react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { EmphasisPanel as S, GlassCard as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
+import { useTr as u } from "../../hooks/useTr.js";
+import { useState as d } from "react";
+import { Activity as f, BadgeCheck as p, Building2 as m, ChevronRight as h, Plus as g, Search as _, ShieldCheck as v, Store as y } from "lucide-react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { EmphasisPanel as C, GlassCard as w, PagePurpose as T } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/providers/ProvidersListPage.tsx
-var T = 24, E = [
-	{
-		value: "",
-		label: "All"
-	},
-	{
-		value: "SAAS",
-		label: "SaaS"
-	},
-	{
-		value: "AI_SERVICE",
-		label: "AI service"
-	},
-	{
-		value: "STREAMING",
-		label: "Streaming"
-	},
-	{
-		value: "NEWSLETTER",
-		label: "Newsletter"
-	},
-	{
-		value: "NEWS_DIGEST",
-		label: "News digest"
-	},
-	{
-		value: "MEMBERSHIP",
-		label: "Membership"
-	},
-	{
-		value: "COMMUNITY",
-		label: "Community"
-	},
-	{
-		value: "EDUCATION",
-		label: "Education"
-	},
-	{
-		value: "FINANCIAL",
-		label: "Financial"
-	},
-	{
-		value: "INSURANCE",
-		label: "Insurance"
-	},
-	{
-		value: "TELECOM",
-		label: "Telecom"
-	},
-	{
-		value: "UTILITY",
-		label: "Utility"
-	},
-	{
-		value: "ASSOCIATION",
-		label: "Association"
-	},
-	{
-		value: "LICENSE",
-		label: "License"
-	},
-	{
-		value: "CONTRACT",
-		label: "Contract"
-	},
-	{
-		value: "OTHER",
-		label: "Other"
-	}
-], D = [
-	{
-		value: "",
-		label: "Any status"
-	},
-	{
-		value: "VERIFIED",
-		label: "Verified"
-	},
-	{
-		value: "CLAIMED",
-		label: "Claimed"
-	},
-	{
-		value: "UNVERIFIED",
-		label: "Unverified"
-	},
-	{
-		value: "DEPRECATED",
-		label: "Deprecated"
-	}
-];
-function O(e) {
+var E = 24, D = {
+	SAAS: "providers.categories.saas",
+	AI_SERVICE: "providers.categories.aiService",
+	STREAMING: "providers.categories.streaming",
+	NEWSLETTER: "providers.categories.newsletter",
+	NEWS_DIGEST: "providers.categories.newsDigest",
+	MEMBERSHIP: "providers.categories.membership",
+	COMMUNITY: "providers.categories.community",
+	EDUCATION: "providers.categories.education",
+	FINANCIAL: "providers.categories.financial",
+	INSURANCE: "providers.categories.insurance",
+	TELECOM: "providers.categories.telecom",
+	UTILITY: "providers.categories.utility",
+	ASSOCIATION: "providers.categories.association",
+	LICENSE: "providers.categories.license",
+	CONTRACT: "providers.categories.contract",
+	OTHER: "providers.categories.other"
+}, O = {
+	VERIFIED: "providers.filters.verified",
+	CLAIMED: "providers.filters.claimed",
+	UNVERIFIED: "providers.filters.unverified",
+	DEPRECATED: "providers.filters.deprecated"
+};
+function k(e) {
 	return e >= 70 ? "positive" : e >= 45 ? "accent" : e >= 25 ? "warning" : "negative";
 }
-function k(e) {
+function A(e, t) {
 	return e >= 67 ? {
-		label: "High churn risk",
+		label: t("providers.card.highChurn", "High churn risk"),
 		cls: "bg-status-error-bg-subtle text-status-error-text"
 	} : e >= 34 ? {
-		label: "Moderate churn risk",
+		label: t("providers.card.moderateChurn", "Moderate churn risk"),
 		cls: "bg-status-warning-bg-subtle text-status-warning-text"
 	} : {
-		label: "Low churn risk",
+		label: t("providers.card.lowChurn", "Low churn risk"),
 		cls: "bg-status-success-bg-subtle text-status-success-text"
 	};
 }
-function A({ provider: e, onOpen: n }) {
-	let a = e.vendorHealthScore, o = e.churnRiskScore, s = o == null ? null : k(o);
-	return /* @__PURE__ */ x(C, {
+function j({ provider: e, onOpen: n }) {
+	let a = u(), o = e.vendorHealthScore, s = e.churnRiskScore, l = s == null ? null : A(s, a);
+	return /* @__PURE__ */ S(w, {
 		treatment: "glass",
 		role: "button",
 		tabIndex: 0,
@@ -129,224 +62,244 @@ function A({ provider: e, onOpen: n }) {
 		onKeyDown: (e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n());
 		},
-		"aria-label": `Open ${e.name}`,
+		"aria-label": a("providers.card.openAria", "Open {{name}}", { name: e.name }),
 		className: "group flex cursor-pointer flex-col p-5 outline-none transition-all hover:-translate-y-0.5 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
 		children: [
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", {
 				className: "flex items-start justify-between gap-2",
-				children: [/* @__PURE__ */ b("span", {
+				children: [/* @__PURE__ */ x("span", {
 					className: "flex size-10 items-center justify-center rounded-xl bg-[var(--color-accent-soft)] text-text-primary",
-					children: /* @__PURE__ */ b(p, { className: "h-5 w-5" })
-				}), /* @__PURE__ */ b(i, { status: e.status })]
+					children: /* @__PURE__ */ x(m, { className: "h-5 w-5" })
+				}), /* @__PURE__ */ x(i, { status: e.status })]
 			}),
-			/* @__PURE__ */ b("p", {
+			/* @__PURE__ */ x("p", {
 				className: "mt-3 truncate text-base font-semibold text-text-primary",
 				children: e.name
 			}),
-			/* @__PURE__ */ b("span", {
+			/* @__PURE__ */ x("span", {
 				className: "mt-1 inline-flex w-fit rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs font-medium text-text-secondary",
-				children: r(e.category)
+				children: a(D[e.category], r(e.category))
 			}),
-			e.description ? /* @__PURE__ */ b("p", {
+			e.description ? /* @__PURE__ */ x("p", {
 				className: "mt-3 line-clamp-2 min-h-[2.5rem] text-xs leading-relaxed text-text-secondary",
 				children: e.description
-			}) : /* @__PURE__ */ b("p", {
+			}) : /* @__PURE__ */ x("p", {
 				className: "mt-3 min-h-[2.5rem] text-xs italic text-text-secondary/70",
-				children: "No description yet."
+				children: a("providers.card.noDescription", "No description yet.")
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", {
 				className: "mt-4 border-t border-border-subtle pt-3",
-				children: [/* @__PURE__ */ x("div", {
+				children: [/* @__PURE__ */ S("div", {
 					className: "flex items-center justify-between text-xs",
-					children: [/* @__PURE__ */ x("span", {
+					children: [/* @__PURE__ */ S("span", {
 						className: "inline-flex items-center gap-1 text-text-secondary",
-						children: [/* @__PURE__ */ b(_, { className: "h-3.5 w-3.5" }), " Vendor health"]
-					}), /* @__PURE__ */ b("span", {
+						children: [
+							/* @__PURE__ */ x(v, { className: "h-3.5 w-3.5" }),
+							" ",
+							a("providers.card.vendorHealth", "Vendor health")
+						]
+					}), /* @__PURE__ */ x("span", {
 						className: "font-semibold tabular-nums text-text-primary",
-						children: a == null ? "—" : `${a}/100`
+						children: o == null ? "—" : `${o}/100`
 					})]
-				}), /* @__PURE__ */ b(c, {
-					value: a ?? 0,
-					tone: a == null ? "accent" : O(a),
+				}), /* @__PURE__ */ x(c, {
+					value: o ?? 0,
+					tone: o == null ? "accent" : k(o),
 					className: "mt-1.5"
 				})]
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", {
 				className: "mt-3 flex flex-wrap items-center justify-between gap-2",
-				children: [/* @__PURE__ */ x("div", {
+				children: [/* @__PURE__ */ S("div", {
 					className: "flex flex-wrap items-center gap-2",
-					children: [s && /* @__PURE__ */ b("span", {
-						className: t("inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium", s.cls),
-						children: s.label
-					}), e.region && /* @__PURE__ */ b("span", {
+					children: [l && /* @__PURE__ */ x("span", {
+						className: t("inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium", l.cls),
+						children: l.label
+					}), e.region && /* @__PURE__ */ x("span", {
 						className: "text-[11px] text-text-secondary",
 						children: e.region
 					})]
-				}), /* @__PURE__ */ x("span", {
+				}), /* @__PURE__ */ S("span", {
 					className: "inline-flex items-center gap-0.5 text-xs font-medium text-text-link opacity-0 transition-opacity group-hover:opacity-100",
-					children: ["View ", /* @__PURE__ */ b(m, { className: "h-3.5 w-3.5" })]
+					children: [
+						a("providers.card.view", "View"),
+						" ",
+						/* @__PURE__ */ x(h, { className: "h-3.5 w-3.5" })
+					]
 				})]
 			})
 		]
 	});
 }
-function j() {
-	let { navigateTo: r } = e(), [i, c] = u(0), [m, _] = u(""), [O, k] = u(""), [j, M] = u(""), [N, P] = u(""), { data: F, isLoading: I, isError: L, refetch: R, isFetching: z } = l({
-		search: m || void 0,
-		category: j || void 0,
-		status: N || void 0,
+function M() {
+	let i = u(), { navigateTo: c } = e(), [h, v] = d(0), [k, A] = d(""), [M, N] = d(""), [P, F] = d(""), [I, L] = d(""), R = [{
+		value: "",
+		label: i("providers.categories.all", "All")
+	}, ...Object.entries(D).map(([e, t]) => ({
+		value: e,
+		label: i(t, r(e))
+	}))], z = [{
+		value: "",
+		label: i("providers.filters.anyStatus", "Any status")
+	}, ...Object.entries(O).map(([e, t]) => ({
+		value: e,
+		label: i(t, r(e))
+	}))], { data: B, isLoading: V, isError: H, refetch: U, isFetching: W } = l({
+		search: k || void 0,
+		category: P || void 0,
+		status: I || void 0,
 		pagination: {
-			limit: T,
-			offset: i * T
+			limit: E,
+			offset: h * E
 		}
-	}), B = F?.items ?? [], V = F?.pageInfo.hasMore ?? !1, H = B.filter((e) => e.status === "VERIFIED").length, U = B.map((e) => e.vendorHealthScore).filter((e) => e != null), W = U.length ? Math.round(U.reduce((e, t) => e + t, 0) / U.length) : null, G = (e) => {
-		e.preventDefault(), _(O.trim()), c(0);
-	}, K = [
+	}), G = B?.items ?? [], K = B?.pageInfo.hasMore ?? !1, q = G.filter((e) => e.status === "VERIFIED").length, J = G.map((e) => e.vendorHealthScore).filter((e) => e != null), Y = J.length ? Math.round(J.reduce((e, t) => e + t, 0) / J.length) : null, X = (e) => {
+		e.preventDefault(), A(M.trim()), v(0);
+	}, Z = [
 		{
-			icon: v,
-			label: "On this page",
-			value: String(B.length)
+			icon: y,
+			label: i("providers.summary.onThisPage", "On this page"),
+			value: String(G.length)
 		},
 		{
-			icon: f,
-			label: "Verified",
-			value: String(H)
+			icon: p,
+			label: i("providers.filters.verified", "Verified"),
+			value: String(q)
 		},
 		{
-			icon: d,
-			label: "Avg. vendor health",
-			value: W == null ? "—" : `${W}/100`
+			icon: f,
+			label: i("providers.summary.avgVendorHealth", "Avg. vendor health"),
+			value: Y == null ? "—" : `${Y}/100`
 		}
 	];
-	return /* @__PURE__ */ x(n, {
-		title: "Discover providers",
-		description: "Browse the global provider registry — the public face of the Subscription Knowledge Graph",
-		actions: /* @__PURE__ */ x("button", {
+	return /* @__PURE__ */ S(n, {
+		title: i("providers.title", "Discover providers"),
+		description: i("providers.description", "Browse the global provider registry — the public face of the Subscription Knowledge Graph"),
+		actions: /* @__PURE__ */ S("button", {
 			type: "button",
-			onClick: () => r("/providers/new"),
+			onClick: () => c("/providers/new"),
 			className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
-			children: [/* @__PURE__ */ b(h, { className: "h-4 w-4" }), " Add provider"]
+			children: [
+				/* @__PURE__ */ x(g, { className: "h-4 w-4" }),
+				" ",
+				i("providers.addProvider", "Add provider")
+			]
 		}),
 		children: [
-			/* @__PURE__ */ b(w, {
+			/* @__PURE__ */ x(T, {
 				className: "mb-4",
-				children: "Every provider exists here whether or not it integrates. Search and filter to find the ones you have relationships with, compare their vendor health, or add a new one."
+				children: i("providers.purpose", "Every provider exists here whether or not it integrates. Search and filter to find the ones you have relationships with, compare their vendor health, or add a new one.")
 			}),
-			/* @__PURE__ */ b(S, { children: /* @__PURE__ */ x("form", {
-				onSubmit: G,
+			/* @__PURE__ */ x(C, { children: /* @__PURE__ */ S("form", {
+				onSubmit: X,
 				className: "relative",
 				children: [
-					/* @__PURE__ */ b(g, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }),
-					/* @__PURE__ */ b("input", {
+					/* @__PURE__ */ x(_, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }),
+					/* @__PURE__ */ x("input", {
 						type: "text",
-						placeholder: "Search providers by name…",
-						value: O,
-						onChange: (e) => k(e.target.value),
+						placeholder: i("providers.searchPlaceholder", "Search providers by name…"),
+						value: M,
+						onChange: (e) => N(e.target.value),
 						className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-24 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 					}),
-					/* @__PURE__ */ b("button", {
+					/* @__PURE__ */ x("button", {
 						type: "submit",
 						className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90",
-						children: "Search"
+						children: i("providers.search", "Search")
 					})
 				]
 			}) }),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ x("div", {
 				className: "mt-4 flex items-center gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-				children: E.map((e) => {
-					let n = j === e.value;
-					return /* @__PURE__ */ b("button", {
+				children: R.map((e) => {
+					let n = P === e.value;
+					return /* @__PURE__ */ x("button", {
 						type: "button",
 						"aria-pressed": n,
 						onClick: () => {
-							M(e.value), c(0);
+							F(e.value), v(0);
 						},
 						className: t("shrink-0 rounded-full border px-3.5 py-1.5 text-xs font-medium transition-colors", n ? "border-transparent bg-action-primary-bg text-action-primary-text" : "border-border-subtle bg-bg-surface text-text-secondary hover:bg-bg-sunken hover:text-text-primary"),
 						children: e.label
 					}, e.value || "all");
 				})
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ x("div", {
 				className: "mt-3 flex flex-wrap items-center gap-2",
-				children: /* @__PURE__ */ b("select", {
-					"aria-label": "Filter by status",
-					value: N,
+				children: /* @__PURE__ */ x("select", {
+					"aria-label": i("providers.filters.statusLabel", "Filter by status"),
+					value: I,
 					onChange: (e) => {
-						P(e.target.value), c(0);
+						L(e.target.value), v(0);
 					},
 					className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-					children: D.map((e) => /* @__PURE__ */ b("option", {
+					children: z.map((e) => /* @__PURE__ */ x("option", {
 						value: e.value,
 						children: e.label
 					}, e.value))
 				})
 			}),
-			!I && !L && B.length > 0 && /* @__PURE__ */ b("div", {
+			!V && !H && G.length > 0 && /* @__PURE__ */ x("div", {
 				className: "mt-4 grid grid-cols-1 gap-3 sm:grid-cols-3",
-				children: K.map((e) => /* @__PURE__ */ x(C, {
+				children: Z.map((e) => /* @__PURE__ */ S(w, {
 					treatment: "metric",
 					className: "flex items-center gap-3 p-4",
-					children: [/* @__PURE__ */ b("span", {
+					children: [/* @__PURE__ */ x("span", {
 						className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-						children: /* @__PURE__ */ b(e.icon, { className: "h-4 w-4" })
-					}), /* @__PURE__ */ x("div", {
+						children: /* @__PURE__ */ x(e.icon, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ S("div", {
 						className: "min-w-0",
-						children: [/* @__PURE__ */ b("p", {
+						children: [/* @__PURE__ */ x("p", {
 							className: "truncate text-xs text-text-secondary",
 							children: e.label
-						}), /* @__PURE__ */ b("p", {
+						}), /* @__PURE__ */ x("p", {
 							className: "text-lg font-semibold tabular-nums text-text-primary",
 							children: e.value
 						})]
 					})]
 				}, e.label))
 			}),
-			I ? /* @__PURE__ */ b(s, { label: "Loading providers…" }) : L ? /* @__PURE__ */ b(o, {
-				message: "Could not load the provider registry.",
-				onRetry: () => void R()
-			}) : B.length === 0 ? /* @__PURE__ */ b("div", {
+			V ? /* @__PURE__ */ x(s, { label: i("providers.loading", "Loading providers…") }) : H ? /* @__PURE__ */ x(o, {
+				message: i("providers.error", "Could not load the provider registry."),
+				onRetry: () => void U()
+			}) : G.length === 0 ? /* @__PURE__ */ x("div", {
 				className: "mt-6",
-				children: /* @__PURE__ */ b(a, {
+				children: /* @__PURE__ */ x(a, {
 					illustration: "empty-search",
-					icon: /* @__PURE__ */ b(p, { className: "h-12 w-12" }),
-					title: "No providers found",
-					description: m ? `No providers match "${m}".` : "No providers in the registry with these filters yet.",
-					action: /* @__PURE__ */ b("button", {
+					icon: /* @__PURE__ */ x(m, { className: "h-12 w-12" }),
+					title: i("providers.emptyTitle", "No providers found"),
+					description: k ? i("providers.emptyDescriptionSearch", "No providers match \"{{search}}\".", { search: k }) : i("providers.emptyDescription", "No providers in the registry with these filters yet."),
+					action: /* @__PURE__ */ x("button", {
 						type: "button",
-						onClick: () => r("/providers/new"),
+						onClick: () => c("/providers/new"),
 						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
-						children: "Add provider"
+						children: i("providers.addProvider", "Add provider")
 					})
 				})
-			}) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("div", {
+			}) : /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
 				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: B.map((e) => /* @__PURE__ */ b(A, {
+				children: G.map((e) => /* @__PURE__ */ x(j, {
 					provider: e,
-					onOpen: () => r(`/providers/${e.id}`)
+					onOpen: () => c(`/providers/${e.id}`)
 				}, e.id))
-			}), /* @__PURE__ */ x("div", {
+			}), /* @__PURE__ */ S("div", {
 				className: "mt-6 flex items-center justify-between",
-				children: [/* @__PURE__ */ x("p", {
+				children: [/* @__PURE__ */ S("p", {
 					className: "text-xs text-text-secondary",
-					children: [
-						"Page ",
-						i + 1,
-						z ? " · refreshing…" : ""
-					]
-				}), /* @__PURE__ */ x("div", {
+					children: [i("providers.pagination.page", "Page {{page}}", { page: h + 1 }), W ? ` · ${i("providers.pagination.refreshing", "refreshing…")}` : ""]
+				}), /* @__PURE__ */ S("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ b("button", {
+					children: [/* @__PURE__ */ x("button", {
 						type: "button",
-						disabled: i === 0,
-						onClick: () => c((e) => Math.max(0, e - 1)),
-						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", i === 0 ? "cursor-not-allowed text-text-secondary opacity-50" : "text-text-primary hover:bg-bg-sunken"),
-						children: "Previous"
-					}), /* @__PURE__ */ b("button", {
+						disabled: h === 0,
+						onClick: () => v((e) => Math.max(0, e - 1)),
+						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", h === 0 ? "cursor-not-allowed text-text-secondary opacity-50" : "text-text-primary hover:bg-bg-sunken"),
+						children: i("providers.pagination.previous", "Previous")
+					}), /* @__PURE__ */ x("button", {
 						type: "button",
-						disabled: !V,
-						onClick: () => c((e) => e + 1),
-						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", V ? "text-text-primary hover:bg-bg-sunken" : "cursor-not-allowed text-text-secondary opacity-50"),
-						children: "Next"
+						disabled: !K,
+						onClick: () => v((e) => e + 1),
+						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", K ? "text-text-primary hover:bg-bg-sunken" : "cursor-not-allowed text-text-secondary opacity-50"),
+						children: i("providers.pagination.next", "Next")
 					})]
 				})]
 			})] })
@@ -354,6 +307,6 @@ function j() {
 	});
 }
 //#endregion
-export { j as ProvidersListPage };
+export { M as ProvidersListPage };
 
 //# sourceMappingURL=ProvidersListPage.js.map