@burdenoff/microfe-subscriberbot 2026.626.1 → 2026.628.1

package/dist/subscriberbot/pages/InboxPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxPage.js","names":[],"sources":["../../../src/subscriberbot/pages/InboxPage.tsx"],"sourcesContent":["/**\n * Universal Inbox\n * @module subscriberbot/pages\n *\n * Every merged subscription communication in one timeline, AI-categorized.\n * Filter by category / unread, mark messages read. Reads\n * `subListInboxMessages` (a SubInboxMessageConnection); writes\n * `subMarkMessageRead`.\n */\n\nimport { useState } from 'react';\nimport { Mail, MailOpen, AlertTriangle, Inbox as InboxIcon } from 'lucide-react';\nimport { 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 { useInboxMessages, useMarkMessageRead } from '../hooks/useSubscriberBotApi';\nimport { cn } from '../utils/cn';\nimport { formatRelativeTime } from '../utils/formatters';\nimport type { SubMessageCategory } from '../types';\n\nconst PAGE_SIZE = 25;\n\nconst CATEGORY_OPTIONS: Array<{ value: '' | SubMessageCategory; label: string }> = [\n  { value: '', label: 'All categories' },\n  { value: 'BILLING', label: 'Billing' },\n  { value: 'RENEWAL', label: 'Renewals' },\n  { value: 'REQUIRED_ACTION', label: 'Required actions' },\n  { value: 'SECURITY_ALERT', label: 'Security alerts' },\n  { value: 'PRODUCT_UPDATE', label: 'Product updates' },\n  { value: 'MARKETING', label: 'Marketing' },\n  { value: 'OTHER', label: 'Other' },\n];\n\nexport function InboxPage() {\n  const { navigateTo } = useSubscriberBot();\n  const [page, setPage] = useState(0);\n  const [category, setCategory] = useState<'' | SubMessageCategory>('');\n  const [unreadOnly, setUnreadOnly] = useState(false);\n\n  const { data, isLoading, isError, refetch, isFetching } = useInboxMessages({\n    category: category || undefined,\n    unreadOnly: unreadOnly || undefined,\n    pagination: { limit: PAGE_SIZE, offset: page * PAGE_SIZE },\n  });\n  const markRead = useMarkMessageRead();\n\n  const items = data?.items ?? [];\n  const hasMore = data?.pageInfo.hasMore ?? false;\n\n  return (\n    <PageLayout\n      title=\"Universal Inbox\"\n      description=\"Every subscription communication, merged and categorized\"\n    >\n      <PagePurpose className=\"mb-4\">\n        Subscription communication is noisy and scattered. The Universal Inbox merges every channel\n        a provider uses and uses AI to categorize each message so you never miss a renewal,\n        required action or security notice.\n      </PagePurpose>\n\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <select\n          value={category}\n          onChange={(e) => {\n            setCategory(e.target.value as '' | SubMessageCategory);\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        <label className=\"flex items-center gap-2 text-sm text-text-primary\">\n          <input\n            type=\"checkbox\"\n            checked={unreadOnly}\n            onChange={(e) => {\n              setUnreadOnly(e.target.checked);\n              setPage(0);\n            }}\n            className=\"size-4 rounded border-border-subtle\"\n          />\n          Unread only\n        </label>\n      </div>\n\n      {isLoading ? (\n        <LoadingView label=\"Loading inbox…\" />\n      ) : isError ? (\n        <ErrorView message=\"Could not load the inbox.\" onRetry={() => void refetch()} />\n      ) : items.length === 0 ? (\n        <div className=\"mt-6\">\n          <EmptyState\n            illustration=\"empty-inbox\"\n            icon={<InboxIcon className=\"h-12 w-12\" />}\n            title=\"Inbox is empty\"\n            description={\n              unreadOnly || category\n                ? 'No messages match these filters.'\n                : 'Merged subscription communications will appear here once channels start ingesting.'\n            }\n          />\n        </div>\n      ) : (\n        <>\n          <div className=\"mt-6 divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface\">\n            {items.map((m) => (\n              <div\n                key={m.id}\n                className={cn(\n                  'flex items-start gap-3 p-4',\n                  !m.isRead && 'bg-accent-wash'\n                )}\n              >\n                <span className=\"mt-0.5 shrink-0 text-text-secondary\">\n                  {m.isRead ? (\n                    <MailOpen className=\"h-4 w-4\" />\n                  ) : (\n                    <Mail className=\"h-4 w-4 text-text-link\" />\n                  )}\n                </span>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <p\n                      className={cn(\n                        'truncate text-sm',\n                        m.isRead ? 'font-normal text-text-primary' : 'font-semibold text-text-primary'\n                      )}\n                    >\n                      {m.subject || '(no subject)'}\n                    </p>\n                    {m.actionRequired && (\n                      <span\n                        title=\"Action required\"\n                        className=\"inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-[10px] font-medium text-status-warning-text\"\n                      >\n                        <AlertTriangle className=\"h-3 w-3\" /> Action\n                      </span>\n                    )}\n                  </div>\n                  {m.preview && (\n                    <p className=\"mt-0.5 line-clamp-2 text-xs text-text-secondary\">{m.preview}</p>\n                  )}\n                  <div className=\"mt-1.5 flex flex-wrap items-center gap-2\">\n                    <StatusBadge status={m.category} />\n                    <span className=\"text-xs text-text-secondary\">\n                      {formatRelativeTime(m.receivedAt)}\n                    </span>\n                    {m.relationshipId && (\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/relationships/${m.relationshipId}`)}\n                        className=\"text-xs font-medium text-text-link hover:underline\"\n                      >\n                        View relationship\n                      </button>\n                    )}\n                  </div>\n                </div>\n                {!m.isRead && (\n                  <button\n                    type=\"button\"\n                    disabled={markRead.isPending}\n                    onClick={() => markRead.mutate(m.id)}\n                    className=\"shrink-0 rounded-lg border border-border-subtle px-2.5 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50\"\n                  >\n                    Mark read\n                  </button>\n                )}\n              </div>\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/InvoicesPage.js

@@ -0,0 +1,211 @@
+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 { StatusBadge as o } from "../components/StatusBadge.js";
+import { EmptyState as s } from "../components/EmptyState.js";
+import { ErrorView as c, LoadingView as l } from "../components/StateViews.js";
+import { useInvoices as u, useMarkInvoicePaid as d } from "../hooks/useSubscriberBotApi.js";
+import { useMemo as f, useState as p } from "react";
+import { FileText as m, Receipt as h } from "lucide-react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { PagePurpose as y } from "@burdenoff/fe-libs/ui";
+//#region src/subscriberbot/pages/InvoicesPage.tsx
+var b = 25, x = [
+	{
+		value: "",
+		label: "All statuses"
+	},
+	{
+		value: "ISSUED",
+		label: "Issued"
+	},
+	{
+		value: "OVERDUE",
+		label: "Overdue"
+	},
+	{
+		value: "PAID",
+		label: "Paid"
+	},
+	{
+		value: "FAILED",
+		label: "Failed"
+	},
+	{
+		value: "DRAFT",
+		label: "Draft"
+	},
+	{
+		value: "CANCELLED",
+		label: "Cancelled"
+	},
+	{
+		value: "REFUNDED",
+		label: "Refunded"
+	}
+], S = new Set([
+	"ISSUED",
+	"OVERDUE",
+	"FAILED"
+]);
+function C() {
+	let { navigateTo: C } = e(), [w, T] = p(0), [E, D] = p(""), { data: O, isLoading: k, isError: A, refetch: j, isFetching: M } = u({
+		status: E || void 0,
+		pagination: {
+			limit: b,
+			offset: w * b
+		}
+	}), N = d(), P = f(() => O?.items ?? [], [O]), F = O?.pageInfo.hasMore ?? !1, I = f(() => {
+		let e = P.filter((e) => S.has(e.status)), t = P[0]?.currency ?? "USD";
+		return {
+			outstandingCount: e.length,
+			outstandingTotal: e.reduce((e, t) => e + t.total, 0),
+			currency: t
+		};
+	}, [P]);
+	return /* @__PURE__ */ v(n, {
+		title: "Invoices",
+		description: "Your billing ledger across every relationship",
+		children: [
+			/* @__PURE__ */ _(y, {
+				className: "mb-4",
+				children: "Every invoice from your recurring relationships in one ledger. Filter by status and settle issued or overdue invoices directly."
+			}),
+			!k && !A && P.length > 0 && /* @__PURE__ */ v("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: [/* @__PURE__ */ _(r, {
+					featured: !0,
+					icon: /* @__PURE__ */ _(h, {}),
+					value: i(I.outstandingTotal, I.currency, { maximumFractionDigits: 0 }),
+					label: "Outstanding (this page)"
+				}), /* @__PURE__ */ _(r, {
+					icon: /* @__PURE__ */ _(m, {}),
+					value: I.outstandingCount,
+					label: "Open invoices (this page)"
+				})]
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "mt-6 flex flex-wrap items-center gap-3",
+				children: /* @__PURE__ */ _("select", {
+					value: E,
+					onChange: (e) => {
+						D(e.target.value), T(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: x.map((e) => /* @__PURE__ */ _("option", {
+						value: e.value,
+						children: e.label
+					}, e.value))
+				})
+			}),
+			k ? /* @__PURE__ */ _(l, { label: "Loading invoices…" }) : A ? /* @__PURE__ */ _(c, {
+				message: "Could not load invoices.",
+				onRetry: () => void j()
+			}) : P.length === 0 ? /* @__PURE__ */ _("div", {
+				className: "mt-6",
+				children: /* @__PURE__ */ _(s, {
+					illustration: "empty-data",
+					icon: /* @__PURE__ */ _(h, { className: "h-12 w-12" }),
+					title: "No invoices",
+					description: E ? "No invoices match this status filter." : "Invoices from your relationships will appear here."
+				})
+			}) : /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ v("div", {
+				className: "mt-6 overflow-hidden rounded-lg border border-border-subtle bg-bg-surface",
+				children: [/* @__PURE__ */ v("div", {
+					className: "hidden grid-cols-[1.5fr_1fr_1fr_1fr_auto] gap-4 border-b border-border-subtle bg-bg-sunken px-4 py-2.5 text-xs font-medium text-text-secondary sm:grid",
+					children: [
+						/* @__PURE__ */ _("span", { children: "Invoice" }),
+						/* @__PURE__ */ _("span", { children: "Status" }),
+						/* @__PURE__ */ _("span", {
+							className: "text-right",
+							children: "Total"
+						}),
+						/* @__PURE__ */ _("span", {
+							className: "text-right",
+							children: "Due"
+						}),
+						/* @__PURE__ */ _("span", {
+							className: "text-right",
+							children: "Action"
+						})
+					]
+				}), /* @__PURE__ */ _("div", {
+					className: "divide-y divide-border-subtle",
+					children: P.map((e) => /* @__PURE__ */ v("div", {
+						className: "grid grid-cols-1 gap-2 px-4 py-3 sm:grid-cols-[1.5fr_1fr_1fr_1fr_auto] sm:items-center sm:gap-4",
+						children: [
+							/* @__PURE__ */ v("button", {
+								type: "button",
+								onClick: () => C(`/relationships/${e.relationshipId}`),
+								className: "min-w-0 text-left",
+								children: [/* @__PURE__ */ _("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: e.number || `Invoice ${e.id.slice(0, 8)}`
+								}), /* @__PURE__ */ _("p", {
+									className: "text-xs text-text-secondary",
+									children: e.issueDate ? `Issued ${a(e.issueDate)}` : "—"
+								})]
+							}),
+							/* @__PURE__ */ _("span", { children: /* @__PURE__ */ _(o, { status: e.status }) }),
+							/* @__PURE__ */ _("span", {
+								className: "text-sm font-semibold tabular-nums text-text-primary sm:text-right",
+								children: i(e.total, e.currency)
+							}),
+							/* @__PURE__ */ _("span", {
+								className: "text-xs text-text-secondary sm:text-right",
+								children: e.dueDate ? a(e.dueDate) : "—"
+							}),
+							/* @__PURE__ */ _("span", {
+								className: "sm:text-right",
+								children: S.has(e.status) ? /* @__PURE__ */ _("button", {
+									type: "button",
+									disabled: N.isPending,
+									onClick: () => N.mutate(e.id),
+									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: "Mark paid"
+								}) : e.paidAt ? /* @__PURE__ */ v("span", {
+									className: "text-xs text-text-secondary",
+									children: ["Paid ", a(e.paidAt)]
+								}) : /* @__PURE__ */ _("span", {
+									className: "text-xs text-text-secondary",
+									children: "—"
+								})
+							})
+						]
+					}, e.id))
+				})]
+			}), /* @__PURE__ */ v("div", {
+				className: "mt-4 flex items-center justify-between",
+				children: [/* @__PURE__ */ v("p", {
+					className: "text-xs text-text-secondary",
+					children: [
+						"Page ",
+						w + 1,
+						M ? " · refreshing…" : ""
+					]
+				}), /* @__PURE__ */ v("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ _("button", {
+						type: "button",
+						disabled: w === 0,
+						onClick: () => T((e) => Math.max(0, e - 1)),
+						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", w === 0 ? "cursor-not-allowed text-text-secondary opacity-50" : "text-text-primary hover:bg-bg-sunken"),
+						children: "Previous"
+					}), /* @__PURE__ */ _("button", {
+						type: "button",
+						disabled: !F,
+						onClick: () => T((e) => e + 1),
+						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", F ? "text-text-primary hover:bg-bg-sunken" : "cursor-not-allowed text-text-secondary opacity-50"),
+						children: "Next"
+					})]
+				})]
+			})] })
+		]
+	});
+}
+//#endregion
+export { C as InvoicesPage };
+
+//# sourceMappingURL=InvoicesPage.js.map

package/dist/subscriberbot/pages/InvoicesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoicesPage.js","names":[],"sources":["../../../src/subscriberbot/pages/InvoicesPage.tsx"],"sourcesContent":["/**\n * Invoices\n * @module subscriberbot/pages\n *\n * The Universal Billing Layer's invoice ledger across every relationship.\n * Filter by status, mark issued/overdue invoices paid. Reads\n * `subListInvoices` (a SubInvoiceConnection); writes `subMarkInvoicePaid`.\n */\n\nimport { useMemo, useState } from 'react';\nimport { Receipt, FileText } from 'lucide-react';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { MetricsCard } from '../components/MetricsCard';\nimport { StatusBadge } from '../components/StatusBadge';\nimport { EmptyState } from '../components/EmptyState';\nimport { LoadingView, ErrorView } from '../components/StateViews';\nimport { useSubscriberBot } from '../context/SubscriberBotContext';\nimport { useInvoices, useMarkInvoicePaid } from '../hooks/useSubscriberBotApi';\nimport { cn } from '../utils/cn';\nimport { formatCurrency, formatDate } from '../utils/formatters';\nimport type { SubInvoiceStatus } from '../types';\n\nconst PAGE_SIZE = 25;\n\nconst STATUS_OPTIONS: Array<{ value: '' | SubInvoiceStatus; label: string }> = [\n  { value: '', label: 'All statuses' },\n  { value: 'ISSUED', label: 'Issued' },\n  { value: 'OVERDUE', label: 'Overdue' },\n  { value: 'PAID', label: 'Paid' },\n  { value: 'FAILED', label: 'Failed' },\n  { value: 'DRAFT', label: 'Draft' },\n  { value: 'CANCELLED', label: 'Cancelled' },\n  { value: 'REFUNDED', label: 'Refunded' },\n];\n\nconst PAYABLE = new Set<SubInvoiceStatus>(['ISSUED', 'OVERDUE', 'FAILED']);\n\nexport function InvoicesPage() {\n  const { navigateTo } = useSubscriberBot();\n  const [page, setPage] = useState(0);\n  const [status, setStatus] = useState<'' | SubInvoiceStatus>('');\n\n  const { data, isLoading, isError, refetch, isFetching } = useInvoices({\n    status: status || undefined,\n    pagination: { limit: PAGE_SIZE, offset: page * PAGE_SIZE },\n  });\n  const markPaid = useMarkInvoicePaid();\n\n  const items = useMemo(() => data?.items ?? [], [data]);\n  const hasMore = data?.pageInfo.hasMore ?? false;\n\n  const totals = useMemo(() => {\n    const outstanding = items.filter((i) => PAYABLE.has(i.status));\n    const currency = items[0]?.currency ?? 'USD';\n    return {\n      outstandingCount: outstanding.length,\n      outstandingTotal: outstanding.reduce((sum, i) => sum + i.total, 0),\n      currency,\n    };\n  }, [items]);\n\n  return (\n    <PageLayout title=\"Invoices\" description=\"Your billing ledger across every relationship\">\n      <PagePurpose className=\"mb-4\">\n        Every invoice from your recurring relationships in one ledger. Filter by status and settle\n        issued or overdue invoices directly.\n      </PagePurpose>\n\n      {!isLoading && !isError && items.length > 0 && (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          <MetricsCard\n            featured\n            icon={<Receipt />}\n            value={formatCurrency(totals.outstandingTotal, totals.currency, {\n              maximumFractionDigits: 0,\n            })}\n            label=\"Outstanding (this page)\"\n          />\n          <MetricsCard\n            icon={<FileText />}\n            value={totals.outstandingCount}\n            label=\"Open invoices (this page)\"\n          />\n        </div>\n      )}\n\n      <div className=\"mt-6 flex flex-wrap items-center gap-3\">\n        <select\n          value={status}\n          onChange={(e) => {\n            setStatus(e.target.value as '' | SubInvoiceStatus);\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 invoices…\" />\n      ) : isError ? (\n        <ErrorView message=\"Could not load invoices.\" onRetry={() => void refetch()} />\n      ) : items.length === 0 ? (\n        <div className=\"mt-6\">\n          <EmptyState\n            illustration=\"empty-data\"\n            icon={<Receipt className=\"h-12 w-12\" />}\n            title=\"No invoices\"\n            description={\n              status\n                ? 'No invoices match this status filter.'\n                : 'Invoices from your relationships will appear here.'\n            }\n          />\n        </div>\n      ) : (\n        <>\n          <div className=\"mt-6 overflow-hidden rounded-lg border border-border-subtle bg-bg-surface\">\n            <div className=\"hidden grid-cols-[1.5fr_1fr_1fr_1fr_auto] gap-4 border-b border-border-subtle bg-bg-sunken px-4 py-2.5 text-xs font-medium text-text-secondary sm:grid\">\n              <span>Invoice</span>\n              <span>Status</span>\n              <span className=\"text-right\">Total</span>\n              <span className=\"text-right\">Due</span>\n              <span className=\"text-right\">Action</span>\n            </div>\n            <div className=\"divide-y divide-border-subtle\">\n              {items.map((inv) => (\n                <div\n                  key={inv.id}\n                  className=\"grid grid-cols-1 gap-2 px-4 py-3 sm:grid-cols-[1.5fr_1fr_1fr_1fr_auto] sm:items-center sm:gap-4\"\n                >\n                  <button\n                    type=\"button\"\n                    onClick={() => navigateTo(`/relationships/${inv.relationshipId}`)}\n                    className=\"min-w-0 text-left\"\n                  >\n                    <p className=\"truncate text-sm font-medium text-text-primary\">\n                      {inv.number || `Invoice ${inv.id.slice(0, 8)}`}\n                    </p>\n                    <p className=\"text-xs text-text-secondary\">\n                      {inv.issueDate ? `Issued ${formatDate(inv.issueDate)}` : '—'}\n                    </p>\n                  </button>\n                  <span>\n                    <StatusBadge status={inv.status} />\n                  </span>\n                  <span className=\"text-sm font-semibold tabular-nums text-text-primary sm:text-right\">\n                    {formatCurrency(inv.total, inv.currency)}\n                  </span>\n                  <span className=\"text-xs text-text-secondary sm:text-right\">\n                    {inv.dueDate ? formatDate(inv.dueDate) : '—'}\n                  </span>\n                  <span className=\"sm:text-right\">\n                    {PAYABLE.has(inv.status) ? (\n                      <button\n                        type=\"button\"\n                        disabled={markPaid.isPending}\n                        onClick={() => markPaid.mutate(inv.id)}\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                        Mark paid\n                      </button>\n                    ) : inv.paidAt ? (\n                      <span className=\"text-xs text-text-secondary\">\n                        Paid {formatDate(inv.paidAt)}\n                      </span>\n                    ) : (\n                      <span className=\"text-xs text-text-secondary\">—</span>\n                    )}\n                  </span>\n                </div>\n              ))}\n            </div>\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/WorkflowsPage.js

@@ -0,0 +1,236 @@
+import { useSubscriberBot as e } from "../context/SubscriberBotContext.js";
+import { PageLayout as t } from "../components/PageLayout.js";
+import { formatRelativeTime as n } from "../utils/formatters.js";
+import { StatusBadge as r } from "../components/StatusBadge.js";
+import { EmptyState as i } from "../components/EmptyState.js";
+import { ErrorView as a, LoadingView as o } from "../components/StateViews.js";
+import { useActivateWorkflow as s, useCreateWorkflow as c, useWorkflows as l } from "../hooks/useSubscriberBotApi.js";
+import { useState as u } from "react";
+import { Play as d, Plus as f, Workflow as p, X as m } from "lucide-react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { PagePurpose as _ } from "@burdenoff/fe-libs/ui";
+//#region src/subscriberbot/pages/WorkflowsPage.tsx
+var v = [
+	{
+		value: "",
+		label: "All statuses"
+	},
+	{
+		value: "ACTIVE",
+		label: "Active"
+	},
+	{
+		value: "DRAFT",
+		label: "Draft"
+	},
+	{
+		value: "PAUSED",
+		label: "Paused"
+	},
+	{
+		value: "ARCHIVED",
+		label: "Archived"
+	}
+], y = "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 block text-xs font-medium text-text-secondary";
+function x() {
+	let { navigate: x } = e(), [S, C] = u(""), [w, T] = u(!1), { data: E, isLoading: D, isError: O, refetch: k } = l(S || void 0), A = c(), j = s(), [M, N] = u(""), [P, F] = u(""), [I, L] = u(""), [R, z] = u(null), B = E ?? [], V = () => {
+		N(""), F(""), L(""), z(null);
+	};
+	return /* @__PURE__ */ g(t, {
+		title: "Workflows",
+		description: "Event-driven automation across your portfolio",
+		actions: /* @__PURE__ */ g("button", {
+			type: "button",
+			onClick: () => T(!0),
+			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__ */ h(f, { className: "h-4 w-4" }), " New workflow"]
+		}),
+		children: [
+			/* @__PURE__ */ h(_, {
+				className: "mb-4",
+				children: "Workflows react to domain events — a new invoice, a detected renewal, a cancelled relationship — and run multi-step automations. Draft a workflow, then activate it when you're ready."
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: /* @__PURE__ */ h("select", {
+					value: S,
+					onChange: (e) => C(e.target.value),
+					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: v.map((e) => /* @__PURE__ */ h("option", {
+						value: e.value,
+						children: e.label
+					}, e.value))
+				})
+			}),
+			D ? /* @__PURE__ */ h(o, { label: "Loading workflows…" }) : O ? /* @__PURE__ */ h(a, {
+				message: "Could not load workflows.",
+				onRetry: () => void k()
+			}) : B.length === 0 ? /* @__PURE__ */ h("div", {
+				className: "mt-6",
+				children: /* @__PURE__ */ h(i, {
+					illustration: "empty-data",
+					icon: /* @__PURE__ */ h(p, { className: "h-12 w-12" }),
+					title: "No workflows yet",
+					description: "Create your first event-driven workflow to automate your recurring portfolio.",
+					action: /* @__PURE__ */ h("button", {
+						type: "button",
+						onClick: () => T(!0),
+						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
+						children: "New workflow"
+					})
+				})
+			}) : /* @__PURE__ */ h("div", {
+				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+				children: B.map((e) => /* @__PURE__ */ g("div", {
+					className: "flex flex-col rounded-lg border border-border-subtle bg-bg-surface p-4",
+					children: [
+						/* @__PURE__ */ g("div", {
+							className: "flex items-start justify-between gap-2",
+							children: [/* @__PURE__ */ h("span", {
+								className: "flex size-9 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+								children: /* @__PURE__ */ h(p, { className: "h-4 w-4" })
+							}), /* @__PURE__ */ h(r, { status: e.status })]
+						}),
+						/* @__PURE__ */ h("p", {
+							className: "mt-3 truncate text-sm font-semibold text-text-primary",
+							children: e.name
+						}),
+						/* @__PURE__ */ g("p", {
+							className: "truncate text-xs text-text-secondary",
+							children: ["on ", e.triggerEvent]
+						}),
+						e.description && /* @__PURE__ */ h("p", {
+							className: "mt-2 line-clamp-2 text-xs text-text-secondary",
+							children: e.description
+						}),
+						/* @__PURE__ */ g("p", {
+							className: "mt-2 text-xs text-text-secondary",
+							children: [
+								"Ran ",
+								e.runCount,
+								"×",
+								e.lastRunAt ? ` · last ${n(e.lastRunAt)}` : ""
+							]
+						}),
+						e.status !== "ACTIVE" && /* @__PURE__ */ g("button", {
+							type: "button",
+							disabled: j.isPending,
+							onClick: () => j.mutate(e.id),
+							className: "mt-3 inline-flex items-center justify-center gap-1.5 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: [/* @__PURE__ */ h(d, { className: "h-3.5 w-3.5" }), " Activate"]
+						})
+					]
+				}, e.id))
+			}),
+			w && /* @__PURE__ */ h("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+				children: /* @__PURE__ */ g("div", {
+					className: "w-full max-w-lg rounded-lg border border-border-subtle bg-bg-surface p-5",
+					children: [/* @__PURE__ */ g("div", {
+						className: "mb-4 flex items-center justify-between",
+						children: [/* @__PURE__ */ h("h3", {
+							className: "text-lg font-semibold text-text-primary",
+							children: "New workflow"
+						}), /* @__PURE__ */ h("button", {
+							type: "button",
+							onClick: () => {
+								T(!1), V();
+							},
+							className: "rounded-md p-1 text-text-secondary hover:text-text-primary",
+							children: /* @__PURE__ */ h(m, { className: "h-5 w-5" })
+						})]
+					}), /* @__PURE__ */ g("form", {
+						onSubmit: (e) => {
+							if (e.preventDefault(), z(null), !M.trim() || !P.trim()) {
+								z("Name and trigger event are required.");
+								return;
+							}
+							let t = {
+								name: M.trim(),
+								triggerEvent: P.trim(),
+								...I.trim() ? { description: I.trim() } : {}
+							};
+							A.mutate(t, {
+								onSuccess: () => {
+									V(), T(!1);
+								},
+								onError: (e) => z(e instanceof Error ? e.message : "Could not create workflow.")
+							});
+						},
+						className: "space-y-4",
+						children: [
+							R && /* @__PURE__ */ h("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__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+								htmlFor: "wf-name",
+								className: b,
+								children: ["Name ", /* @__PURE__ */ h("span", {
+									className: "text-status-error-text",
+									children: "*"
+								})]
+							}), /* @__PURE__ */ h("input", {
+								id: "wf-name",
+								type: "text",
+								value: M,
+								onChange: (e) => N(e.target.value),
+								placeholder: "e.g. Invoice → notify finance",
+								className: y,
+								required: !0
+							})] }),
+							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
+								htmlFor: "wf-trigger",
+								className: b,
+								children: ["Trigger event ", /* @__PURE__ */ h("span", {
+									className: "text-status-error-text",
+									children: "*"
+								})]
+							}), /* @__PURE__ */ h("input", {
+								id: "wf-trigger",
+								type: "text",
+								value: P,
+								onChange: (e) => F(e.target.value),
+								placeholder: "e.g. InvoiceReceived, RenewalDetected",
+								className: y,
+								required: !0
+							})] }),
+							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
+								htmlFor: "wf-desc",
+								className: b,
+								children: "Description"
+							}), /* @__PURE__ */ h("textarea", {
+								id: "wf-desc",
+								value: I,
+								onChange: (e) => L(e.target.value),
+								rows: 3,
+								placeholder: "What should this workflow do when the event fires?",
+								className: y
+							})] }),
+							/* @__PURE__ */ g("div", {
+								className: "flex justify-end gap-3",
+								children: [/* @__PURE__ */ h("button", {
+									type: "button",
+									onClick: () => {
+										T(!1), V();
+									},
+									className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+									children: "Cancel"
+								}), /* @__PURE__ */ h("button", {
+									type: "submit",
+									disabled: A.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-50",
+									children: A.isPending ? "Creating…" : "Create workflow"
+								})]
+							})
+						]
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { x as WorkflowsPage };
+
+//# sourceMappingURL=WorkflowsPage.js.map

package/dist/subscriberbot/pages/WorkflowsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowsPage.js","names":[],"sources":["../../../src/subscriberbot/pages/WorkflowsPage.tsx"],"sourcesContent":["/**\n * Workflows (Automation)\n * @module subscriberbot/pages\n *\n * The Workflow Engine — event-driven automation (\"when invoice arrives →\n * classify → update relationship → notify finance\"). List + create + activate.\n * Reads `subListWorkflows`; writes `subCreateWorkflow` / `subActivateWorkflow`.\n */\n\nimport { useState } from 'react';\nimport { Plus, Workflow as WorkflowIcon, Play, X } from 'lucide-react';\nimport { 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 {\n  useWorkflows,\n  useCreateWorkflow,\n  useActivateWorkflow,\n} from '../hooks/useSubscriberBotApi';\nimport { formatRelativeTime } from '../utils/formatters';\nimport type { SubCreateWorkflowInput, SubWorkflowStatus } from '../types';\n\nconst STATUS_OPTIONS: Array<{ value: '' | SubWorkflowStatus; label: string }> = [\n  { value: '', label: 'All statuses' },\n  { value: 'ACTIVE', label: 'Active' },\n  { value: 'DRAFT', label: 'Draft' },\n  { value: 'PAUSED', label: 'Paused' },\n  { value: 'ARCHIVED', label: 'Archived' },\n];\n\nconst inputCls =\n  '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)]';\nconst labelCls = 'mb-1 block text-xs font-medium text-text-secondary';\n\nexport function WorkflowsPage() {\n  const { navigate } = useSubscriberBot();\n  const [statusFilter, setStatusFilter] = useState<'' | SubWorkflowStatus>('');\n  const [showCreate, setShowCreate] = useState(false);\n\n  const { data, isLoading, isError, refetch } = useWorkflows(statusFilter || undefined);\n  const create = useCreateWorkflow();\n  const activate = useActivateWorkflow();\n\n  const [name, setName] = useState('');\n  const [triggerEvent, setTriggerEvent] = useState('');\n  const [description, setDescription] = useState('');\n  const [formError, setFormError] = useState<string | null>(null);\n\n  const workflows = data ?? [];\n  // `navigate` is only consumed via the back-compat context; reference it so\n  // its presence keeps integrated routing wired (no-op otherwise).\n  void navigate;\n\n  const resetForm = () => {\n    setName('');\n    setTriggerEvent('');\n    setDescription('');\n    setFormError(null);\n  };\n\n  const handleCreate = (e: React.FormEvent) => {\n    e.preventDefault();\n    setFormError(null);\n    if (!name.trim() || !triggerEvent.trim()) {\n      setFormError('Name and trigger event are required.');\n      return;\n    }\n    const input: SubCreateWorkflowInput = {\n      name: name.trim(),\n      triggerEvent: triggerEvent.trim(),\n      ...(description.trim() ? { description: description.trim() } : {}),\n    };\n    create.mutate(input, {\n      onSuccess: () => {\n        resetForm();\n        setShowCreate(false);\n      },\n      onError: (err) =>\n        setFormError(err instanceof Error ? err.message : 'Could not create workflow.'),\n    });\n  };\n\n  return (\n    <PageLayout\n      title=\"Workflows\"\n      description=\"Event-driven automation across your portfolio\"\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => setShowCreate(true)}\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\" /> New workflow\n        </button>\n      }\n    >\n      <PagePurpose className=\"mb-4\">\n        Workflows react to domain events — a new invoice, a detected renewal, a cancelled\n        relationship — and run multi-step automations. Draft a workflow, then activate it when\n        you're ready.\n      </PagePurpose>\n\n      <div className=\"flex flex-wrap items-center gap-3\">\n        <select\n          value={statusFilter}\n          onChange={(e) => setStatusFilter(e.target.value as '' | SubWorkflowStatus)}\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 workflows…\" />\n      ) : isError ? (\n        <ErrorView message=\"Could not load workflows.\" onRetry={() => void refetch()} />\n      ) : workflows.length === 0 ? (\n        <div className=\"mt-6\">\n          <EmptyState\n            illustration=\"empty-data\"\n            icon={<WorkflowIcon className=\"h-12 w-12\" />}\n            title=\"No workflows yet\"\n            description=\"Create your first event-driven workflow to automate your recurring portfolio.\"\n            action={\n              <button\n                type=\"button\"\n                onClick={() => setShowCreate(true)}\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                New workflow\n              </button>\n            }\n          />\n        </div>\n      ) : (\n        <div className=\"mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {workflows.map((wf) => (\n            <div key={wf.id} className=\"flex flex-col rounded-lg border border-border-subtle bg-bg-surface p-4\">\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                  <WorkflowIcon className=\"h-4 w-4\" />\n                </span>\n                <StatusBadge status={wf.status} />\n              </div>\n              <p className=\"mt-3 truncate text-sm font-semibold text-text-primary\">{wf.name}</p>\n              <p className=\"truncate text-xs text-text-secondary\">on {wf.triggerEvent}</p>\n              {wf.description && (\n                <p className=\"mt-2 line-clamp-2 text-xs text-text-secondary\">{wf.description}</p>\n              )}\n              <p className=\"mt-2 text-xs text-text-secondary\">\n                Ran {wf.runCount}×\n                {wf.lastRunAt ? ` · last ${formatRelativeTime(wf.lastRunAt)}` : ''}\n              </p>\n              {wf.status !== 'ACTIVE' && (\n                <button\n                  type=\"button\"\n                  disabled={activate.isPending}\n                  onClick={() => activate.mutate(wf.id)}\n                  className=\"mt-3 inline-flex items-center justify-center gap-1.5 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                  <Play className=\"h-3.5 w-3.5\" /> Activate\n                </button>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Create modal */}\n      {showCreate && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n          <div className=\"w-full max-w-lg rounded-lg border border-border-subtle bg-bg-surface p-5\">\n            <div className=\"mb-4 flex items-center justify-between\">\n              <h3 className=\"text-lg font-semibold text-text-primary\">New workflow</h3>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setShowCreate(false);\n                  resetForm();\n                }}\n                className=\"rounded-md p-1 text-text-secondary hover:text-text-primary\"\n              >\n                <X className=\"h-5 w-5\" />\n              </button>\n            </div>\n            <form onSubmit={handleCreate} className=\"space-y-4\">\n              {formError && (\n                <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\">\n                  {formError}\n                </div>\n              )}\n              <div>\n                <label htmlFor=\"wf-name\" className={labelCls}>\n                  Name <span className=\"text-status-error-text\">*</span>\n                </label>\n                <input\n                  id=\"wf-name\"\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(e.target.value)}\n                  placeholder=\"e.g. Invoice → notify finance\"\n                  className={inputCls}\n                  required\n                />\n              </div>\n              <div>\n                <label htmlFor=\"wf-trigger\" className={labelCls}>\n                  Trigger event <span className=\"text-status-error-text\">*</span>\n                </label>\n                <input\n                  id=\"wf-trigger\"\n                  type=\"text\"\n                  value={triggerEvent}\n                  onChange={(e) => setTriggerEvent(e.target.value)}\n                  placeholder=\"e.g. InvoiceReceived, RenewalDetected\"\n                  className={inputCls}\n                  required\n                />\n              </div>\n              <div>\n                <label htmlFor=\"wf-desc\" className={labelCls}>\n                  Description\n                </label>\n                <textarea\n                  id=\"wf-desc\"\n                  value={description}\n                  onChange={(e) => setDescription(e.target.value)}\n                  rows={3}\n                  placeholder=\"What should this workflow do when the event fires?\"\n                  className={inputCls}\n                />\n              </div>\n              <div className=\"flex justify-end gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowCreate(false);\n                    resetForm();\n                  }}\n                  className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n                >\n                  Cancel\n                </button>\n                <button\n                  type=\"submit\"\n                  disabled={create.isPending}\n                  className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n                >\n                  {create.isPending ? 'Creating…' : 'Create workflow'}\n                </button>\n              </div>\n            </form>\n          </div>\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}