@burdenoff/microfe-subscriberbot 2026.626.2 → 2026.628.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProvidersListPage.js","names":[],"sources":["../../../../src/subscriberbot/pages/providers/ProvidersListPage.tsx"],"sourcesContent":["/**\n * Providers list (Global Provider Registry)\n * @module subscriberbot/pages/providers\n *\n * Discovery: search and browse the provider registry. Server-side search +\n * category/status filters + pagination via `subListProviders`\n * (a SubProviderConnection).\n */\n\nimport { useState } from 'react';\nimport { Plus, Search, Building2, ShieldCheck } from 'lucide-react';\nimport { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { useSubscriberBot } from '../../context/SubscriberBotContext';\nimport { useProviders } from '../../hooks/useSubscriberBotApi';\nimport { cn } from '../../utils/cn';\nimport { formatEnumLabel } from '../../utils/formatters';\nimport type { SubProviderCategory, SubProviderStatus } from '../../types';\n\nconst PAGE_SIZE = 24;\n\nconst CATEGORY_OPTIONS: Array<{ value: '' | SubProviderCategory; label: string }> = [\n  { value: '', label: 'All categories' },\n  { value: 'SAAS', label: 'SaaS' },\n  { value: 'AI_SERVICE', label: 'AI service' },\n  { value: 'STREAMING', label: 'Streaming' },\n  { value: 'NEWSLETTER', label: 'Newsletter' },\n  { value: 'NEWS_DIGEST', label: 'News digest' },\n  { value: 'MEMBERSHIP', label: 'Membership' },\n  { value: 'COMMUNITY', label: 'Community' },\n  { value: 'EDUCATION', label: 'Education' },\n  { value: 'FINANCIAL', label: 'Financial' },\n  { value: 'INSURANCE', label: 'Insurance' },\n  { value: 'TELECOM', label: 'Telecom' },\n  { value: 'UTILITY', label: 'Utility' },\n  { value: 'ASSOCIATION', label: 'Association' },\n  { value: 'LICENSE', label: 'License' },\n  { value: 'CONTRACT', label: 'Contract' },\n  { value: 'OTHER', label: 'Other' },\n];\n\nconst STATUS_OPTIONS: Array<{ value: '' | SubProviderStatus; label: string }> = [\n  { value: '', label: 'Any status' },\n  { value: 'VERIFIED', label: 'Verified' },\n  { value: 'CLAIMED', label: 'Claimed' },\n  { value: 'UNVERIFIED', label: 'Unverified' },\n  { value: 'DEPRECATED', label: 'Deprecated' },\n];\n\nexport function ProvidersListPage() {\n  const { navigateTo } = useSubscriberBot();\n  const [page, setPage] = useState(0);\n  const [search, setSearch] = useState('');\n  const [searchInput, setSearchInput] = useState('');\n  const [category, setCategory] = useState<'' | SubProviderCategory>('');\n  const [status, setStatus] = useState<'' | SubProviderStatus>('');\n\n  const { data, isLoading, isError, refetch, isFetching } = useProviders({\n    search: search || undefined,\n    category: category || undefined,\n    status: status || undefined,\n    pagination: { limit: PAGE_SIZE, offset: page * PAGE_SIZE },\n  });\n\n  const items = data?.items ?? [];\n  const hasMore = data?.pageInfo.hasMore ?? false;\n\n  const submitSearch = (e: React.FormEvent) => {\n    e.preventDefault();\n    setSearch(searchInput.trim());\n    setPage(0);\n  };\n\n  return (\n    <PageLayout\n      title=\"Providers\"\n      description=\"Discover and browse the global provider registry\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/providers/new')}\n          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\"\n        >\n          <Plus className=\"h-4 w-4\" /> Add provider\n        </button>\n      }\n    >\n      <PagePurpose className=\"mb-4\">\n        The registry is the public face of the Subscription Knowledge Graph — every provider exists\n        here whether or not it integrates. Search and filter to find the ones you have relationships\n        with, or add a new one.\n      </PagePurpose>\n\n      <EmphasisPanel>\n        <form onSubmit={submitSearch} className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n          <input\n            type=\"text\"\n            placeholder=\"Search providers by name…\"\n            value={searchInput}\n            onChange={(e) => setSearchInput(e.target.value)}\n            className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n          />\n        </form>\n      </EmphasisPanel>\n\n      <div className=\"mt-4 flex flex-wrap items-center gap-3\">\n        <select\n          value={category}\n          onChange={(e) => {\n            setCategory(e.target.value as '' | SubProviderCategory);\n            setPage(0);\n          }}\n          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)]\"\n        >\n          {CATEGORY_OPTIONS.map((o) => (\n            <option key={o.value} value={o.value}>\n              {o.label}\n            </option>\n          ))}\n        </select>\n        <select\n          value={status}\n          onChange={(e) => {\n            setStatus(e.target.value as '' | SubProviderStatus);\n            setPage(0);\n          }}\n          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)]\"\n        >\n          {STATUS_OPTIONS.map((o) => (\n            <option key={o.value} value={o.value}>\n              {o.label}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      {isLoading ? (\n        <LoadingView label=\"Loading providers…\" />\n      ) : isError ? (\n        <ErrorView message=\"Could not load the provider registry.\" onRetry={() => void refetch()} />\n      ) : items.length === 0 ? (\n        <div className=\"mt-6\">\n          <EmptyState\n            illustration=\"empty-search\"\n            icon={<Building2 className=\"h-12 w-12\" />}\n            title=\"No providers found\"\n            description={\n              search\n                ? `No providers match \"${search}\".`\n                : 'No providers in the registry with these filters yet.'\n            }\n            action={\n              <button\n                type=\"button\"\n                onClick={() => navigateTo('/providers/new')}\n                className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90\"\n              >\n                Add provider\n              </button>\n            }\n          />\n        </div>\n      ) : (\n        <>\n          <div className=\"mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {items.map((p) => (\n              <button\n                key={p.id}\n                type=\"button\"\n                onClick={() => navigateTo(`/providers/${p.id}`)}\n                className=\"flex flex-col rounded-lg border border-border-subtle bg-bg-surface p-4 text-left transition-shadow hover:shadow-md\"\n              >\n                <div className=\"flex items-start justify-between gap-2\">\n                  <span className=\"flex size-9 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n                    <Building2 className=\"h-4 w-4\" />\n                  </span>\n                  <StatusBadge status={p.status} />\n                </div>\n                <p className=\"mt-3 truncate text-sm font-semibold text-text-primary\">{p.name}</p>\n                <p className=\"text-xs text-text-secondary\">{formatEnumLabel(p.category)}</p>\n                {p.description && (\n                  <p className=\"mt-2 line-clamp-2 text-xs text-text-secondary\">{p.description}</p>\n                )}\n                <div className=\"mt-3 flex flex-wrap items-center gap-2 text-xs text-text-secondary\">\n                  {p.region && <span>{p.region}</span>}\n                  {p.vendorHealthScore != null && (\n                    <span className=\"inline-flex items-center gap-1\">\n                      <ShieldCheck className=\"h-3 w-3\" />\n                      {p.vendorHealthScore}/100\n                    </span>\n                  )}\n                </div>\n              </button>\n            ))}\n          </div>\n\n          <div className=\"mt-4 flex items-center justify-between\">\n            <p className=\"text-xs text-text-secondary\">\n              Page {page + 1}\n              {isFetching ? ' · refreshing…' : ''}\n            </p>\n            <div className=\"flex gap-2\">\n              <button\n                type=\"button\"\n                disabled={page === 0}\n                onClick={() => setPage((p) => Math.max(0, p - 1))}\n                className={cn(\n                  'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                  page === 0\n                    ? 'cursor-not-allowed text-text-secondary opacity-50'\n                    : 'text-text-primary hover:bg-bg-sunken'\n                )}\n              >\n                Previous\n              </button>\n              <button\n                type=\"button\"\n                disabled={!hasMore}\n                onClick={() => setPage((p) => p + 1)}\n                className={cn(\n                  'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                  !hasMore\n                    ? 'cursor-not-allowed text-text-secondary opacity-50'\n                    : 'text-text-primary hover:bg-bg-sunken'\n                )}\n              >\n                Next\n              </button>\n            </div>\n          </div>\n        </>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/subscriberbot/pages/relationships/RelationshipDetailPage.js

@@ -0,0 +1,306 @@
+import { useSubscriberBot as e } from "../../context/SubscriberBotContext.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { formatCurrency as n, formatDate as r, formatEnumLabel as i, formatIntervalSuffix as a } from "../../utils/formatters.js";
+import { StatusBadge as o } from "../../components/StatusBadge.js";
+import { EmptyState as s } from "../../components/EmptyState.js";
+import { ErrorView as c, LoadingView as l, Section as u } from "../../components/StateViews.js";
+import { useCancelRelationship as d, useRelationship as f, useTransitionRelationship as p } from "../../hooks/useSubscriberBotApi.js";
+import { useState as m } from "react";
+import { Activity as h, ArrowLeft as g, Building2 as _, CalendarClock as v, CreditCard as y, Paperclip as b, ShieldCheck as x, Tag as S } from "lucide-react";
+import { useParams as C } from "react-router-dom";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { GlassCard as E } from "@burdenoff/fe-libs/ui";
+//#region src/subscriberbot/pages/relationships/RelationshipDetailPage.tsx
+var D = [
+	{
+		status: "ACTIVE",
+		label: "Activate"
+	},
+	{
+		status: "PAUSED",
+		label: "Pause"
+	},
+	{
+		status: "EXPIRED",
+		label: "Mark expired"
+	}
+];
+function O() {
+	let { id: O } = C(), { navigateTo: k } = e(), { data: A, isLoading: j, isError: M, refetch: N } = f(O), P = p(), F = d(), [I, L] = m(null);
+	if (j) return /* @__PURE__ */ w(t, {
+		title: "Relationship",
+		children: /* @__PURE__ */ w(l, { label: "Loading relationship…" })
+	});
+	if (M) return /* @__PURE__ */ w(t, {
+		title: "Relationship",
+		children: /* @__PURE__ */ w(c, {
+			message: "Could not load this relationship.",
+			onRetry: () => void N()
+		})
+	});
+	if (!A) return /* @__PURE__ */ w(t, {
+		title: "Relationship",
+		children: /* @__PURE__ */ w(s, {
+			illustration: "empty-data",
+			title: "Relationship not found",
+			description: "It may have been removed, or you may not have access to it.",
+			action: /* @__PURE__ */ w("button", {
+				type: "button",
+				onClick: () => k("/relationships"),
+				className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
+				children: "Back to relationships"
+			})
+		})
+	});
+	let R = A, z = P.isPending || F.isPending, B = (e) => {
+		L(null), P.mutate({
+			id: R.id,
+			status: e
+		}, { onError: (e) => L(e instanceof Error ? e.message : "Transition failed") });
+	};
+	return /* @__PURE__ */ T(t, {
+		title: R.label,
+		description: R.provider?.name ?? i(R.kind),
+		actions: /* @__PURE__ */ T("button", {
+			type: "button",
+			onClick: () => k("/relationships"),
+			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__ */ w(g, { className: "h-4 w-4" }), " Back"]
+		}),
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [
+					/* @__PURE__ */ w(o, { status: R.status }),
+					/* @__PURE__ */ w("span", {
+						className: "text-sm text-text-secondary",
+						children: i(R.kind)
+					}),
+					/* @__PURE__ */ w("span", {
+						className: "text-sm text-text-secondary",
+						children: "·"
+					}),
+					/* @__PURE__ */ T("span", {
+						className: "text-sm font-semibold text-text-primary",
+						children: [n(R.amount, R.currency), /* @__PURE__ */ w("span", {
+							className: "text-xs font-normal text-text-secondary",
+							children: a(R.interval)
+						})]
+					}),
+					R.autoRenew && /* @__PURE__ */ w("span", {
+						className: "text-xs text-text-secondary",
+						children: "Auto-renews"
+					})
+				]
+			}),
+			I && /* @__PURE__ */ w("div", {
+				className: "mt-4 rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
+				children: I
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "mt-5 flex flex-wrap gap-2",
+				children: [D.filter((e) => e.status !== R.status).map((e) => /* @__PURE__ */ w("button", {
+					type: "button",
+					disabled: z,
+					onClick: () => B(e.status),
+					className: "rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50",
+					children: e.label
+				}, e.status)), R.status !== "CANCELLED" && /* @__PURE__ */ w("button", {
+					type: "button",
+					disabled: z,
+					onClick: () => {
+						L(null), F.mutate(R.id, { onError: (e) => L(e instanceof Error ? e.message : "Cancel failed") });
+					},
+					className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-3 py-1.5 text-xs font-medium text-status-error-text hover:opacity-90 disabled:opacity-50",
+					children: "Cancel relationship"
+				})]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: [
+					/* @__PURE__ */ T(E, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
+							children: [/* @__PURE__ */ w(_, { className: "h-3.5 w-3.5" }), " Provider"]
+						}), /* @__PURE__ */ w("p", {
+							className: "mt-1.5 text-sm text-text-primary",
+							children: R.provider?.name ?? "—"
+						})]
+					}),
+					/* @__PURE__ */ T(E, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
+							children: [/* @__PURE__ */ w(y, { className: "h-3.5 w-3.5" }), " Plan"]
+						}), /* @__PURE__ */ w("p", {
+							className: "mt-1.5 text-sm text-text-primary",
+							children: R.plan?.name ?? "—"
+						})]
+					}),
+					/* @__PURE__ */ T(E, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
+							children: [/* @__PURE__ */ w(v, { className: "h-3.5 w-3.5" }), " Next renewal"]
+						}), /* @__PURE__ */ w("p", {
+							className: "mt-1.5 text-sm text-text-primary",
+							children: R.renewsAt ? r(R.renewsAt) : "—"
+						})]
+					}),
+					/* @__PURE__ */ T(E, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
+							children: [/* @__PURE__ */ w(h, { className: "h-3.5 w-3.5" }), " Health score"]
+						}), /* @__PURE__ */ w("p", {
+							className: "mt-1.5 text-sm text-text-primary",
+							children: R.healthScore == null ? "—" : `${R.healthScore}/100`
+						})]
+					}),
+					/* @__PURE__ */ T(E, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
+							children: [/* @__PURE__ */ w(x, { className: "h-3.5 w-3.5" }), " Discovery"]
+						}), /* @__PURE__ */ w("p", {
+							className: "mt-1.5 text-sm text-text-primary",
+							children: i(R.discoverySource)
+						})]
+					}),
+					/* @__PURE__ */ T(E, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex items-center gap-2 text-xs font-medium text-text-secondary",
+							children: [/* @__PURE__ */ w(v, { className: "h-3.5 w-3.5" }), " Started"]
+						}), /* @__PURE__ */ w("p", {
+							className: "mt-1.5 text-sm text-text-primary",
+							children: R.startedAt ? r(R.startedAt) : "—"
+						})]
+					})
+				]
+			}),
+			R.tags.length > 0 && /* @__PURE__ */ T("div", {
+				className: "mt-5 flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ w(S, { className: "h-3.5 w-3.5 text-text-secondary" }), R.tags.map((e) => /* @__PURE__ */ w("span", {
+					className: "rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs text-text-secondary",
+					children: e
+				}, e))]
+			}),
+			R.notes && /* @__PURE__ */ T("div", {
+				className: "mt-5 rounded-lg border border-border-subtle bg-bg-surface p-4",
+				children: [/* @__PURE__ */ w("p", {
+					className: "text-xs font-medium text-text-secondary",
+					children: "Notes"
+				}), /* @__PURE__ */ w("p", {
+					className: "mt-1 whitespace-pre-wrap text-sm text-text-primary",
+					children: R.notes
+				})]
+			}),
+			/* @__PURE__ */ w(u, {
+				title: "Entitlements",
+				description: "What this relationship grants you",
+				children: !R.entitlements || R.entitlements.length === 0 ? /* @__PURE__ */ w(s, {
+					illustration: "empty-data",
+					title: "No entitlements",
+					description: "Entitlements (seats, quotas, feature access) will appear here."
+				}) : /* @__PURE__ */ w("div", {
+					className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+					children: R.entitlements.map((e) => /* @__PURE__ */ T("div", {
+						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
+						children: [
+							/* @__PURE__ */ T("div", {
+								className: "flex items-start justify-between gap-2",
+								children: [/* @__PURE__ */ w("p", {
+									className: "text-sm font-medium text-text-primary",
+									children: e.name
+								}), /* @__PURE__ */ w(o, { status: e.isActive ? "ACTIVE" : "DISABLED" })]
+							}),
+							/* @__PURE__ */ w("p", {
+								className: "mt-1 text-xs text-text-secondary",
+								children: i(e.type)
+							}),
+							e.quota != null && /* @__PURE__ */ T("p", {
+								className: "mt-2 text-xs text-text-secondary",
+								children: [
+									"Used ",
+									e.used,
+									" of ",
+									e.quota,
+									e.unit ? ` ${e.unit}` : ""
+								]
+							})
+						]
+					}, e.id))
+				})
+			}),
+			/* @__PURE__ */ w(u, {
+				title: "Assets",
+				description: "Invoices, contracts, licenses and credentials",
+				children: !R.assets || R.assets.length === 0 ? /* @__PURE__ */ w(s, {
+					illustration: "empty-data",
+					title: "No assets attached",
+					description: "Attach invoices, contracts, licenses or receipts to this relationship."
+				}) : /* @__PURE__ */ w("div", {
+					className: "divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface",
+					children: R.assets.map((e) => /* @__PURE__ */ T("div", {
+						className: "flex items-center justify-between gap-3 p-3",
+						children: [/* @__PURE__ */ T("div", {
+							className: "flex min-w-0 items-center gap-2",
+							children: [/* @__PURE__ */ w(b, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ T("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ w("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: e.name
+								}), /* @__PURE__ */ w("p", {
+									className: "text-xs text-text-secondary",
+									children: i(e.type)
+								})]
+							})]
+						}), e.expiresAt && /* @__PURE__ */ T("span", {
+							className: "shrink-0 text-xs text-text-secondary",
+							children: ["Expires ", r(e.expiresAt)]
+						})]
+					}, e.id))
+				})
+			}),
+			/* @__PURE__ */ w(u, {
+				title: "Renewal timeline",
+				description: "Detected renewals and price changes",
+				children: !R.renewalEvents || R.renewalEvents.length === 0 ? /* @__PURE__ */ w(s, {
+					illustration: "empty-calendar",
+					title: "No renewal events",
+					description: "Renewals and price changes detected for this relationship will appear here."
+				}) : /* @__PURE__ */ w("div", {
+					className: "divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface",
+					children: R.renewalEvents.map((e) => /* @__PURE__ */ T("div", {
+						className: "flex items-center justify-between gap-3 p-3",
+						children: [/* @__PURE__ */ T("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ w("p", {
+								className: "truncate text-sm font-medium text-text-primary",
+								children: i(e.eventType)
+							}), /* @__PURE__ */ T("p", {
+								className: "text-xs text-text-secondary",
+								children: [r(e.occursAt), e.detail ? ` · ${e.detail}` : ""]
+							})]
+						}), e.amount != null && /* @__PURE__ */ w("span", {
+							className: "shrink-0 text-sm font-semibold tabular-nums text-text-primary",
+							children: n(e.amount, e.currency ?? R.currency)
+						})]
+					}, e.id))
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { O as RelationshipDetailPage };
+
+//# sourceMappingURL=RelationshipDetailPage.js.map

package/dist/subscriberbot/pages/relationships/RelationshipDetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationshipDetailPage.js","names":[],"sources":["../../../../src/subscriberbot/pages/relationships/RelationshipDetailPage.tsx"],"sourcesContent":["/**\n * Relationship detail\n * @module subscriberbot/pages/relationships\n *\n * Full per-relationship view: plan, price, billing period, next renewal,\n * health score, entitlements, attached assets and renewal events — plus\n * lifecycle transitions (validated server-side) and cancel.\n * Reads `subRelationship(id)`; writes `subTransitionRelationship` /\n * `subCancelRelationship`.\n */\n\nimport { useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  Building2,\n  CreditCard,\n  ShieldCheck,\n  CalendarClock,\n  Paperclip,\n  Activity,\n  Tag,\n} from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { LoadingView, ErrorView, Section } from '../../components/StateViews';\nimport { useSubscriberBot } from '../../context/SubscriberBotContext';\nimport {\n  useRelationship,\n  useTransitionRelationship,\n  useCancelRelationship,\n} from '../../hooks/useSubscriberBotApi';\nimport {\n  formatCurrency,\n  formatDate,\n  formatEnumLabel,\n  formatIntervalSuffix,\n} from '../../utils/formatters';\nimport type { SubRelationshipStatus } from '../../types';\n\n// Lifecycle actions surfaced as buttons; the server validates the transition.\nconst TRANSITIONS: Array<{ status: SubRelationshipStatus; label: string }> = [\n  { status: 'ACTIVE', label: 'Activate' },\n  { status: 'PAUSED', label: 'Pause' },\n  { status: 'EXPIRED', label: 'Mark expired' },\n];\n\nexport function RelationshipDetailPage() {\n  const { id } = useParams<{ id: string }>();\n  const { navigateTo } = useSubscriberBot();\n  const { data: relationship, isLoading, isError, refetch } = useRelationship(id);\n  const transition = useTransitionRelationship();\n  const cancel = useCancelRelationship();\n  const [actionError, setActionError] = useState<string | null>(null);\n\n  if (isLoading) {\n    return (\n      <PageLayout title=\"Relationship\">\n        <LoadingView label=\"Loading relationship…\" />\n      </PageLayout>\n    );\n  }\n\n  if (isError) {\n    return (\n      <PageLayout title=\"Relationship\">\n        <ErrorView message=\"Could not load this relationship.\" onRetry={() => void refetch()} />\n      </PageLayout>\n    );\n  }\n\n  if (!relationship) {\n    return (\n      <PageLayout title=\"Relationship\">\n        <EmptyState\n          illustration=\"empty-data\"\n          title=\"Relationship not found\"\n          description=\"It may have been removed, or you may not have access to it.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/relationships')}\n              className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90\"\n            >\n              Back to relationships\n            </button>\n          }\n        />\n      </PageLayout>\n    );\n  }\n\n  const r = relationship;\n  const isBusy = transition.isPending || cancel.isPending;\n\n  const runTransition = (status: SubRelationshipStatus) => {\n    setActionError(null);\n    transition.mutate(\n      { id: r.id, status },\n      { onError: (e) => setActionError(e instanceof Error ? e.message : 'Transition failed') }\n    );\n  };\n\n  const runCancel = () => {\n    setActionError(null);\n    cancel.mutate(r.id, {\n      onError: (e) => setActionError(e instanceof Error ? e.message : 'Cancel failed'),\n    });\n  };\n\n  return (\n    <PageLayout\n      title={r.label}\n      description={r.provider?.name ?? formatEnumLabel(r.kind)}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/relationships')}\n          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\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" /> Back\n        </button>\n      }\n    >\n      {/* Header summary */}\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <StatusBadge status={r.status} />\n        <span className=\"text-sm text-text-secondary\">{formatEnumLabel(r.kind)}</span>\n        <span className=\"text-sm text-text-secondary\">·</span>\n        <span className=\"text-sm font-semibold text-text-primary\">\n          {formatCurrency(r.amount, r.currency)}\n          <span className=\"text-xs font-normal text-text-secondary\">\n            {formatIntervalSuffix(r.interval)}\n          </span>\n        </span>\n        {r.autoRenew && <span className=\"text-xs text-text-secondary\">Auto-renews</span>}\n      </div>\n\n      {actionError && (\n        <div className=\"mt-4 rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text\">\n          {actionError}\n        </div>\n      )}\n\n      {/* Lifecycle actions */}\n      <div className=\"mt-5 flex flex-wrap gap-2\">\n        {TRANSITIONS.filter((t) => t.status !== r.status).map((t) => (\n          <button\n            key={t.status}\n            type=\"button\"\n            disabled={isBusy}\n            onClick={() => runTransition(t.status)}\n            className=\"rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50\"\n          >\n            {t.label}\n          </button>\n        ))}\n        {r.status !== 'CANCELLED' && (\n          <button\n            type=\"button\"\n            disabled={isBusy}\n            onClick={runCancel}\n            className=\"rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-3 py-1.5 text-xs font-medium text-status-error-text hover:opacity-90 disabled:opacity-50\"\n          >\n            Cancel relationship\n          </button>\n        )}\n      </div>\n\n      {/* Key facts grid */}\n      <div className=\"mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n        <GlassCard treatment=\"metric\" className=\"p-4\">\n          <div className=\"flex items-center gap-2 text-xs font-medium text-text-secondary\">\n            <Building2 className=\"h-3.5 w-3.5\" /> Provider\n          </div>\n          <p className=\"mt-1.5 text-sm text-text-primary\">{r.provider?.name ?? '—'}</p>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"p-4\">\n          <div className=\"flex items-center gap-2 text-xs font-medium text-text-secondary\">\n            <CreditCard className=\"h-3.5 w-3.5\" /> Plan\n          </div>\n          <p className=\"mt-1.5 text-sm text-text-primary\">{r.plan?.name ?? '—'}</p>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"p-4\">\n          <div className=\"flex items-center gap-2 text-xs font-medium text-text-secondary\">\n            <CalendarClock className=\"h-3.5 w-3.5\" /> Next renewal\n          </div>\n          <p className=\"mt-1.5 text-sm text-text-primary\">\n            {r.renewsAt ? formatDate(r.renewsAt) : '—'}\n          </p>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"p-4\">\n          <div className=\"flex items-center gap-2 text-xs font-medium text-text-secondary\">\n            <Activity className=\"h-3.5 w-3.5\" /> Health score\n          </div>\n          <p className=\"mt-1.5 text-sm text-text-primary\">\n            {r.healthScore != null ? `${r.healthScore}/100` : '—'}\n          </p>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"p-4\">\n          <div className=\"flex items-center gap-2 text-xs font-medium text-text-secondary\">\n            <ShieldCheck className=\"h-3.5 w-3.5\" /> Discovery\n          </div>\n          <p className=\"mt-1.5 text-sm text-text-primary\">\n            {formatEnumLabel(r.discoverySource)}\n          </p>\n        </GlassCard>\n        <GlassCard treatment=\"metric\" className=\"p-4\">\n          <div className=\"flex items-center gap-2 text-xs font-medium text-text-secondary\">\n            <CalendarClock className=\"h-3.5 w-3.5\" /> Started\n          </div>\n          <p className=\"mt-1.5 text-sm text-text-primary\">\n            {r.startedAt ? formatDate(r.startedAt) : '—'}\n          </p>\n        </GlassCard>\n      </div>\n\n      {r.tags.length > 0 && (\n        <div className=\"mt-5 flex flex-wrap items-center gap-2\">\n          <Tag className=\"h-3.5 w-3.5 text-text-secondary\" />\n          {r.tags.map((tag) => (\n            <span\n              key={tag}\n              className=\"rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs text-text-secondary\"\n            >\n              {tag}\n            </span>\n          ))}\n        </div>\n      )}\n\n      {r.notes && (\n        <div className=\"mt-5 rounded-lg border border-border-subtle bg-bg-surface p-4\">\n          <p className=\"text-xs font-medium text-text-secondary\">Notes</p>\n          <p className=\"mt-1 whitespace-pre-wrap text-sm text-text-primary\">{r.notes}</p>\n        </div>\n      )}\n\n      {/* Entitlements */}\n      <Section title=\"Entitlements\" description=\"What this relationship grants you\">\n        {!r.entitlements || r.entitlements.length === 0 ? (\n          <EmptyState\n            illustration=\"empty-data\"\n            title=\"No entitlements\"\n            description=\"Entitlements (seats, quotas, feature access) will appear here.\"\n          />\n        ) : (\n          <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {r.entitlements.map((e) => (\n              <div key={e.id} className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n                <div className=\"flex items-start justify-between gap-2\">\n                  <p className=\"text-sm font-medium text-text-primary\">{e.name}</p>\n                  <StatusBadge status={e.isActive ? 'ACTIVE' : 'DISABLED'} />\n                </div>\n                <p className=\"mt-1 text-xs text-text-secondary\">{formatEnumLabel(e.type)}</p>\n                {e.quota != null && (\n                  <p className=\"mt-2 text-xs text-text-secondary\">\n                    Used {e.used} of {e.quota}\n                    {e.unit ? ` ${e.unit}` : ''}\n                  </p>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </Section>\n\n      {/* Assets */}\n      <Section title=\"Assets\" description=\"Invoices, contracts, licenses and credentials\">\n        {!r.assets || r.assets.length === 0 ? (\n          <EmptyState\n            illustration=\"empty-data\"\n            title=\"No assets attached\"\n            description=\"Attach invoices, contracts, licenses or receipts to this relationship.\"\n          />\n        ) : (\n          <div className=\"divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface\">\n            {r.assets.map((a) => (\n              <div key={a.id} className=\"flex items-center justify-between gap-3 p-3\">\n                <div className=\"flex min-w-0 items-center gap-2\">\n                  <Paperclip className=\"h-4 w-4 shrink-0 text-text-secondary\" />\n                  <div className=\"min-w-0\">\n                    <p className=\"truncate text-sm font-medium text-text-primary\">{a.name}</p>\n                    <p className=\"text-xs text-text-secondary\">{formatEnumLabel(a.type)}</p>\n                  </div>\n                </div>\n                {a.expiresAt && (\n                  <span className=\"shrink-0 text-xs text-text-secondary\">\n                    Expires {formatDate(a.expiresAt)}\n                  </span>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </Section>\n\n      {/* Renewal events */}\n      <Section title=\"Renewal timeline\" description=\"Detected renewals and price changes\">\n        {!r.renewalEvents || r.renewalEvents.length === 0 ? (\n          <EmptyState\n            illustration=\"empty-calendar\"\n            title=\"No renewal events\"\n            description=\"Renewals and price changes detected for this relationship will appear here.\"\n          />\n        ) : (\n          <div className=\"divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface\">\n            {r.renewalEvents.map((event) => (\n              <div key={event.id} className=\"flex items-center justify-between gap-3 p-3\">\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-sm font-medium text-text-primary\">\n                    {formatEnumLabel(event.eventType)}\n                  </p>\n                  <p className=\"text-xs text-text-secondary\">\n                    {formatDate(event.occursAt)}\n                    {event.detail ? ` · ${event.detail}` : ''}\n                  </p>\n                </div>\n                {event.amount != null && (\n                  <span className=\"shrink-0 text-sm font-semibold tabular-nums text-text-primary\">\n                    {formatCurrency(event.amount, event.currency ?? r.currency)}\n                  </span>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </Section>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/subscriberbot/pages/relationships/RelationshipNewPage.js

@@ -0,0 +1,253 @@
+import { useSubscriberBot as e } from "../../context/SubscriberBotContext.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { ErrorView as n } from "../../components/StateViews.js";
+import { useCreateRelationship as r, usePlans as i, useProviders as a } from "../../hooks/useSubscriberBotApi.js";
+import { useState as o } from "react";
+import { ArrowLeft as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { PagePurpose as u } from "@burdenoff/fe-libs/ui";
+//#region src/subscriberbot/pages/relationships/RelationshipNewPage.tsx
+var d = [
+	"SUBSCRIPTION",
+	"MEMBERSHIP",
+	"LICENSE",
+	"CONTRACT",
+	"NEWSLETTER",
+	"RECURRING_PAYMENT",
+	"ENROLLMENT",
+	"TRIAL"
+], f = [
+	"MONTHLY",
+	"YEARLY",
+	"QUARTERLY",
+	"WEEKLY",
+	"DAILY",
+	"USAGE_BASED",
+	"LIFETIME",
+	"FREE"
+], p = "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)]", m = "mb-1 block text-xs font-medium text-text-secondary";
+function h() {
+	let { navigateTo: h } = e(), g = r(), _ = a({ pagination: {
+		limit: 100,
+		offset: 0
+	} }), [v, y] = o(""), [b, x] = o("SUBSCRIPTION"), [S, C] = o(""), [w, T] = o(""), [E, D] = o(""), [O, k] = o("USD"), [A, j] = o("MONTHLY"), [M, N] = o(""), [P, F] = o(!0), [I, L] = o(""), [R, z] = o(null), B = i(S || void 0), V = _.data?.items ?? [], H = B.data ?? [];
+	return _.isError ? /* @__PURE__ */ c(t, {
+		title: "Add relationship",
+		children: /* @__PURE__ */ c(n, {
+			message: "Could not load the provider registry.",
+			onRetry: () => void _.refetch()
+		})
+	}) : /* @__PURE__ */ l(t, {
+		title: "Add relationship",
+		description: "Track a new recurring digital relationship",
+		actions: /* @__PURE__ */ l("button", {
+			type: "button",
+			onClick: () => h("/relationships"),
+			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__ */ c(s, { className: "h-4 w-4" }), " Back"]
+		}),
+		children: [/* @__PURE__ */ c(u, {
+			className: "mb-6",
+			children: "Manually add a subscription, membership, license or contract. Link it to a provider and plan from the registry, set the price and renewal date, and Subscriber Bot will track its lifecycle from here."
+		}), /* @__PURE__ */ l("form", {
+			onSubmit: (e) => {
+				if (e.preventDefault(), z(null), !v.trim()) {
+					z("A label is required.");
+					return;
+				}
+				let t = {
+					label: v.trim(),
+					kind: b,
+					interval: A,
+					autoRenew: P,
+					currency: O.trim() || "USD",
+					...S ? { providerId: S } : {},
+					...w ? { planId: w } : {},
+					...E ? { amount: Number(E) } : {},
+					...M ? { renewsAt: new Date(M).toISOString() } : {},
+					...I.trim() ? { notes: I.trim() } : {}
+				};
+				g.mutate(t, {
+					onSuccess: (e) => h(`/relationships/${e.id}`),
+					onError: (e) => z(e instanceof Error ? e.message : "Could not create relationship.")
+				});
+			},
+			className: "max-w-2xl space-y-5",
+			children: [
+				R && /* @__PURE__ */ c("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: R
+				}),
+				/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ l("label", {
+					htmlFor: "rel-label",
+					className: m,
+					children: ["Label ", /* @__PURE__ */ c("span", {
+						className: "text-status-error-text",
+						children: "*"
+					})]
+				}), /* @__PURE__ */ c("input", {
+					id: "rel-label",
+					type: "text",
+					value: v,
+					onChange: (e) => y(e.target.value),
+					placeholder: "e.g. Netflix Premium, AWS Production",
+					className: p,
+					required: !0
+				})] }),
+				/* @__PURE__ */ l("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+						htmlFor: "rel-kind",
+						className: m,
+						children: "Kind"
+					}), /* @__PURE__ */ c("select", {
+						id: "rel-kind",
+						value: b,
+						onChange: (e) => x(e.target.value),
+						className: p,
+						children: d.map((e) => /* @__PURE__ */ c("option", {
+							value: e,
+							children: e.replace(/_/g, " ")
+						}, e))
+					})] }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+						htmlFor: "rel-provider",
+						className: m,
+						children: "Provider"
+					}), /* @__PURE__ */ l("select", {
+						id: "rel-provider",
+						value: S,
+						onChange: (e) => {
+							C(e.target.value), T("");
+						},
+						className: p,
+						children: [/* @__PURE__ */ c("option", {
+							value: "",
+							children: "— None —"
+						}), V.map((e) => /* @__PURE__ */ c("option", {
+							value: e.id,
+							children: e.name
+						}, e.id))]
+					})] })]
+				}),
+				S && H.length > 0 && /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+					htmlFor: "rel-plan",
+					className: m,
+					children: "Plan"
+				}), /* @__PURE__ */ l("select", {
+					id: "rel-plan",
+					value: w,
+					onChange: (e) => T(e.target.value),
+					className: p,
+					children: [/* @__PURE__ */ c("option", {
+						value: "",
+						children: "— None —"
+					}), H.map((e) => /* @__PURE__ */ c("option", {
+						value: e.id,
+						children: e.name
+					}, e.id))]
+				})] }),
+				/* @__PURE__ */ l("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+							htmlFor: "rel-amount",
+							className: m,
+							children: "Amount"
+						}), /* @__PURE__ */ c("input", {
+							id: "rel-amount",
+							type: "number",
+							min: "0",
+							step: "0.01",
+							value: E,
+							onChange: (e) => D(e.target.value),
+							placeholder: "0.00",
+							className: p
+						})] }),
+						/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+							htmlFor: "rel-currency",
+							className: m,
+							children: "Currency"
+						}), /* @__PURE__ */ c("input", {
+							id: "rel-currency",
+							type: "text",
+							value: O,
+							onChange: (e) => k(e.target.value.toUpperCase()),
+							placeholder: "USD",
+							maxLength: 3,
+							className: p
+						})] }),
+						/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+							htmlFor: "rel-interval",
+							className: m,
+							children: "Billing interval"
+						}), /* @__PURE__ */ c("select", {
+							id: "rel-interval",
+							value: A,
+							onChange: (e) => j(e.target.value),
+							className: p,
+							children: f.map((e) => /* @__PURE__ */ c("option", {
+								value: e,
+								children: e.replace(/_/g, " ")
+							}, e))
+						})] })
+					]
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+						htmlFor: "rel-renews",
+						className: m,
+						children: "Renews on"
+					}), /* @__PURE__ */ c("input", {
+						id: "rel-renews",
+						type: "date",
+						value: M,
+						onChange: (e) => N(e.target.value),
+						className: p
+					})] }), /* @__PURE__ */ c("div", {
+						className: "flex items-end",
+						children: /* @__PURE__ */ l("label", {
+							className: "flex items-center gap-2 text-sm text-text-primary",
+							children: [/* @__PURE__ */ c("input", {
+								type: "checkbox",
+								checked: P,
+								onChange: (e) => F(e.target.checked),
+								className: "size-4 rounded border-border-subtle"
+							}), "Auto-renews"]
+						})
+					})]
+				}),
+				/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+					htmlFor: "rel-notes",
+					className: m,
+					children: "Notes"
+				}), /* @__PURE__ */ c("textarea", {
+					id: "rel-notes",
+					value: I,
+					onChange: (e) => L(e.target.value),
+					rows: 3,
+					placeholder: "Anything worth remembering about this relationship…",
+					className: p
+				})] }),
+				/* @__PURE__ */ l("div", {
+					className: "flex gap-3",
+					children: [/* @__PURE__ */ c("button", {
+						type: "submit",
+						disabled: g.isPending,
+						className: "rounded-lg bg-action-primary-bg px-5 py-2.5 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
+						children: g.isPending ? "Creating…" : "Create relationship"
+					}), /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: () => h("/relationships"),
+						className: "rounded-lg border border-border-subtle px-5 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+						children: "Cancel"
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { h as RelationshipNewPage };
+
+//# sourceMappingURL=RelationshipNewPage.js.map