@burdenoff/microfe-admin 2026.624.1 → 2026.626.1

package/dist/admin/pages/BillingPage.js

@@ -1,4 +1,4 @@
-import { Badge as e, Button as t } from "../components/ui.js";
+import { Badge as e, EmptyState as t } from "../components/ui.js";
 import { PageLayout as n } from "../components/PageLayout.js";
 import { formatCurrency as r, formatDateTime as i } from "../utils/formatters.js";
 import { MetricCard as a, MetricsGrid as o } from "../components/MetricCard.js";
@@ -7,28 +7,60 @@ import "../components/index.js";
 import { useListAllPlansQuery as c, useListAllQuotasQuery as l, useListRefundRecordsQuery as u } from "../../generated/global-operations.js";
 import { ArrowUpRight as d, CreditCard as f, Download as p, Plus as m, Receipt as h, Shield as g } from "lucide-react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { CTAOverflowMenu as y, NextSteps as b, PagePurpose as x } from "@burdenoff/fe-libs/ui";
 //#region src/admin/pages/BillingPage.tsx
-function y() {
-	let { data: y, loading: b } = c(), { data: x, loading: S } = l(), { data: C, loading: w } = u({ variables: {
+function S() {
+	let { data: S, loading: C } = c(), { data: w, loading: T } = l(), { data: E, loading: D } = u({ variables: {
 		page: 1,
 		pageSize: 10
-	} }), T = y?.getAllPlans || [], E = x?.getAllQuotas || [], D = C?.getRefundRecords?.records || [];
+	} }), O = S?.getAllPlans || [], k = w?.getAllQuotas || [], A = E?.getRefundRecords?.records || [];
 	return /* @__PURE__ */ _(n, {
 		title: "Billing & Subscriptions",
+		gradientWord: "Subscriptions",
 		description: "Manage platform-wide plans, quotas, and refunds",
-		actions: /* @__PURE__ */ v("div", {
-			className: "flex gap-2",
-			children: [/* @__PURE__ */ v(t, {
-				variant: "outline",
-				children: [/* @__PURE__ */ _(p, { className: "mr-2 h-4 w-4" }), "Export Audit"]
-			}), /* @__PURE__ */ v(t, { children: [/* @__PURE__ */ _(m, { className: "mr-2 h-4 w-4" }), "Create Plan"] })]
+		actions: /* @__PURE__ */ _(y, {
+			primary: {
+				label: "Create Plan",
+				icon: /* @__PURE__ */ _(m, { className: "mr-2 h-4 w-4" }),
+				onSelect: () => {}
+			},
+			actions: [{
+				label: "Export Audit",
+				icon: /* @__PURE__ */ _(p, { className: "h-4 w-4" }),
+				onSelect: () => {}
+			}]
 		}),
 		children: /* @__PURE__ */ v("div", {
 			className: "space-y-8",
 			children: [
+				/* @__PURE__ */ _(x, { children: "The money side of the platform in one place. Define the plans customers can buy, set the resource quotas each plan grants, and review refunds — so you can launch a new pricing tier or resolve a billing dispute without leaving the console." }),
+				/* @__PURE__ */ _(b, {
+					storageKey: "admin-billing",
+					steps: [
+						{
+							id: "create-plan",
+							label: "Create a plan",
+							description: "Define a new pricing tier customers can subscribe to.",
+							onClick: () => {}
+						},
+						{
+							id: "review-refunds",
+							label: "Review pending refunds",
+							description: "Approve or investigate refunds awaiting a decision.",
+							href: "#refunds"
+						},
+						{
+							id: "check-quotas",
+							label: "Check resource quotas",
+							description: "Make sure each plan grants the limits you intend.",
+							href: "#quotas"
+						}
+					]
+				}),
 				/* @__PURE__ */ v(o, { children: [
 					/* @__PURE__ */ _(a, {
 						title: "Total Revenue (30d)",
+						hero: !0,
 						value: "$124,500",
 						icon: /* @__PURE__ */ _(f, { className: "h-4 w-4" }),
 						trend: "up"
@@ -40,7 +72,7 @@ function y() {
 					}),
 					/* @__PURE__ */ _(a, {
 						title: "Pending Refunds",
-						value: C?.getRefundRecords?.totalCount ?? 0,
+						value: E?.getRefundRecords?.totalCount ?? 0,
 						icon: /* @__PURE__ */ _(d, { className: "h-4 w-4" }),
 						priority: "high"
 					}),
@@ -85,11 +117,18 @@ function y() {
 									})
 								}
 							],
-							data: T,
+							data: O,
 							keyExtractor: (e) => e.id,
-							loading: b
+							loading: C,
+							emptyState: /* @__PURE__ */ _(t, {
+								illustration: "empty-data",
+								icon: /* @__PURE__ */ _(f, { className: "h-8 w-8" }),
+								title: "No plans yet",
+								description: "Create your first pricing plan to let customers subscribe."
+							})
 						})]
 					}), /* @__PURE__ */ v("div", {
+						id: "quotas",
 						className: "space-y-4",
 						children: [/* @__PURE__ */ _("h2", {
 							className: "text-lg font-semibold",
@@ -113,13 +152,20 @@ function y() {
 									})
 								}
 							],
-							data: E,
+							data: k,
 							keyExtractor: (e) => e.id,
-							loading: S
+							loading: T,
+							emptyState: /* @__PURE__ */ _(t, {
+								illustration: "empty-data",
+								icon: /* @__PURE__ */ _(g, { className: "h-8 w-8" }),
+								title: "No quotas defined",
+								description: "Resource quotas you create will appear here."
+							})
 						})]
 					})]
 				}),
 				/* @__PURE__ */ v("div", {
+					id: "refunds",
 					className: "space-y-4",
 					children: [/* @__PURE__ */ _("h2", {
 						className: "text-lg font-semibold",
@@ -149,9 +195,15 @@ function y() {
 								render: (e) => i(e.createdAt)
 							}
 						],
-						data: D,
+						data: A,
 						keyExtractor: (e) => e.id,
-						loading: w
+						loading: D,
+						emptyState: /* @__PURE__ */ _(t, {
+							illustration: "empty-generic",
+							icon: /* @__PURE__ */ _(h, { className: "h-8 w-8" }),
+							title: "No refunds recorded",
+							description: "Refund activity will show up here as it happens."
+						})
 					})]
 				})
 			]
@@ -159,6 +211,6 @@ function y() {
 	});
 }
 //#endregion
-export { y as BillingPage };
+export { S as BillingPage };
 
 //# sourceMappingURL=BillingPage.js.map

package/dist/admin/pages/BillingPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BillingPage.js","names":[],"sources":["../../../src/admin/pages/BillingPage.tsx"],"sourcesContent":["import { CreditCard, Plus, ArrowUpRight, Shield, Receipt, Download } from 'lucide-react';\nimport { PageLayout, Button, DataTable, Badge, MetricCard, MetricsGrid } from '../components';\nimport {\n  useListAllPlansQuery,\n  useListAllQuotasQuery,\n  useListRefundRecordsQuery,\n} from '../../generated/global-operations';\nimport { formatCurrency, formatDateTime } from '../utils/formatters';\n\nexport function BillingPage() {\n  const { data: plansData, loading: plansLoading } = useListAllPlansQuery();\n  const { data: quotasData, loading: quotasLoading } = useListAllQuotasQuery();\n  const { data: refundsData, loading: refundsLoading } = useListRefundRecordsQuery({\n    variables: { page: 1, pageSize: 10 },\n  });\n\n  const plans = plansData?.getAllPlans || [];\n  const quotas = quotasData?.getAllQuotas || [];\n  const refunds = refundsData?.getRefundRecords?.records || [];\n\n  const planColumns = [\n    {\n      key: 'name',\n      header: 'Plan Name',\n      render: (plan: any) => <span className=\"font-medium\">{plan.name}</span>,\n    },\n    {\n      key: 'price',\n      header: 'Price',\n      render: (plan: any) => formatCurrency(plan.price, plan.currency),\n    },\n    {\n      key: 'duration',\n      header: 'Interval',\n    },\n    {\n      key: 'isActive',\n      header: 'Status',\n      render: (plan: any) => (\n        <Badge variant={plan.isActive ? 'success' : 'secondary'}>\n          {plan.isActive ? 'Active' : 'Inactive'}\n        </Badge>\n      ),\n    },\n  ];\n\n  const quotaColumns = [\n    {\n      key: 'name',\n      header: 'Quota Name',\n    },\n    {\n      key: 'quotaType',\n      header: 'Metric Type',\n    },\n    {\n      key: 'isActive',\n      header: 'Status',\n      render: (quota: any) => (\n        <Badge variant={quota.isActive ? 'success' : 'secondary'}>\n          {quota.isActive ? 'Active' : 'Inactive'}\n        </Badge>\n      ),\n    },\n  ];\n\n  const refundColumns = [\n    {\n      key: 'amount',\n      header: 'Amount',\n      render: (refund: any) => formatCurrency(refund.amount, refund.currency),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      render: (refund: any) => (\n        <Badge variant={refund.status === 'COMPLETED' ? 'success' : 'warning'}>\n          {refund.status}\n        </Badge>\n      ),\n    },\n    {\n      key: 'reason',\n      header: 'Reason',\n    },\n    {\n      key: 'createdAt',\n      header: 'Date',\n      render: (refund: any) => formatDateTime(refund.createdAt),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Billing & Subscriptions\"\n      description=\"Manage platform-wide plans, quotas, and refunds\"\n      actions={\n        <div className=\"flex gap-2\">\n          <Button variant=\"outline\">\n            <Download className=\"mr-2 h-4 w-4\" />\n            Export Audit\n          </Button>\n          <Button>\n            <Plus className=\"mr-2 h-4 w-4\" />\n            Create Plan\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"space-y-8\">\n        <MetricsGrid>\n          <MetricCard\n            title=\"Total Revenue (30d)\"\n            value=\"$124,500\"\n            icon={<CreditCard className=\"h-4 w-4\" />}\n            trend=\"up\"\n          />\n          <MetricCard\n            title=\"Active Subscriptions\"\n            value=\"1,248\"\n            icon={<Shield className=\"h-4 w-4\" />}\n          />\n          <MetricCard\n            title=\"Pending Refunds\"\n            value={refundsData?.getRefundRecords?.totalCount ?? 0}\n            icon={<ArrowUpRight className=\"h-4 w-4\" />}\n            priority=\"high\"\n          />\n          <MetricCard title=\"Upcoming Invoices\" value=\"42\" icon={<Receipt className=\"h-4 w-4\" />} />\n        </MetricsGrid>\n\n        <div className=\"grid gap-8 lg:grid-cols-2\">\n          <div className=\"space-y-4\">\n            <h2 className=\"text-lg font-semibold\">Platform Plans</h2>\n            <DataTable\n              columns={planColumns}\n              data={plans}\n              keyExtractor={(p) => p.id}\n              loading={plansLoading}\n            />\n          </div>\n          <div className=\"space-y-4\">\n            <h2 className=\"text-lg font-semibold\">Resource Quotas</h2>\n            <DataTable\n              columns={quotaColumns}\n              data={quotas}\n              keyExtractor={(q) => q.id}\n              loading={quotasLoading}\n            />\n          </div>\n        </div>\n\n        <div className=\"space-y-4\">\n          <h2 className=\"text-lg font-semibold\">Recent Refund Records</h2>\n          <DataTable\n            columns={refundColumns}\n            data={refunds}\n            keyExtractor={(r) => r.id}\n            loading={refundsLoading}\n          />\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"BillingPage.js","names":[],"sources":["../../../src/admin/pages/BillingPage.tsx"],"sourcesContent":["import { CreditCard, Plus, ArrowUpRight, Shield, Receipt, Download } from 'lucide-react';\nimport { CTAOverflowMenu, PagePurpose, NextSteps } from '@burdenoff/fe-libs/ui';\nimport { PageLayout, DataTable, Badge, MetricCard, MetricsGrid, EmptyState } from '../components';\nimport {\n  useListAllPlansQuery,\n  useListAllQuotasQuery,\n  useListRefundRecordsQuery,\n} from '../../generated/global-operations';\nimport { formatCurrency, formatDateTime } from '../utils/formatters';\n\nexport function BillingPage() {\n  const { data: plansData, loading: plansLoading } = useListAllPlansQuery();\n  const { data: quotasData, loading: quotasLoading } = useListAllQuotasQuery();\n  const { data: refundsData, loading: refundsLoading } = useListRefundRecordsQuery({\n    variables: { page: 1, pageSize: 10 },\n  });\n\n  const plans = plansData?.getAllPlans || [];\n  const quotas = quotasData?.getAllQuotas || [];\n  const refunds = refundsData?.getRefundRecords?.records || [];\n\n  const planColumns = [\n    {\n      key: 'name',\n      header: 'Plan Name',\n      render: (plan: any) => <span className=\"font-medium\">{plan.name}</span>,\n    },\n    {\n      key: 'price',\n      header: 'Price',\n      render: (plan: any) => formatCurrency(plan.price, plan.currency),\n    },\n    {\n      key: 'duration',\n      header: 'Interval',\n    },\n    {\n      key: 'isActive',\n      header: 'Status',\n      render: (plan: any) => (\n        <Badge variant={plan.isActive ? 'success' : 'secondary'}>\n          {plan.isActive ? 'Active' : 'Inactive'}\n        </Badge>\n      ),\n    },\n  ];\n\n  const quotaColumns = [\n    {\n      key: 'name',\n      header: 'Quota Name',\n    },\n    {\n      key: 'quotaType',\n      header: 'Metric Type',\n    },\n    {\n      key: 'isActive',\n      header: 'Status',\n      render: (quota: any) => (\n        <Badge variant={quota.isActive ? 'success' : 'secondary'}>\n          {quota.isActive ? 'Active' : 'Inactive'}\n        </Badge>\n      ),\n    },\n  ];\n\n  const refundColumns = [\n    {\n      key: 'amount',\n      header: 'Amount',\n      render: (refund: any) => formatCurrency(refund.amount, refund.currency),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      render: (refund: any) => (\n        <Badge variant={refund.status === 'COMPLETED' ? 'success' : 'warning'}>\n          {refund.status}\n        </Badge>\n      ),\n    },\n    {\n      key: 'reason',\n      header: 'Reason',\n    },\n    {\n      key: 'createdAt',\n      header: 'Date',\n      render: (refund: any) => formatDateTime(refund.createdAt),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Billing & Subscriptions\"\n      gradientWord=\"Subscriptions\"\n      description=\"Manage platform-wide plans, quotas, and refunds\"\n      actions={\n        <CTAOverflowMenu\n          primary={{\n            label: 'Create Plan',\n            icon: <Plus className=\"mr-2 h-4 w-4\" />,\n            onSelect: () => {},\n          }}\n          actions={[\n            {\n              label: 'Export Audit',\n              icon: <Download className=\"h-4 w-4\" />,\n              onSelect: () => {},\n            },\n          ]}\n        />\n      }\n    >\n      <div className=\"space-y-8\">\n        <PagePurpose>\n          The money side of the platform in one place. Define the plans customers can buy, set the\n          resource quotas each plan grants, and review refunds — so you can launch a new pricing\n          tier or resolve a billing dispute without leaving the console.\n        </PagePurpose>\n\n        <NextSteps\n          storageKey=\"admin-billing\"\n          steps={[\n            {\n              id: 'create-plan',\n              label: 'Create a plan',\n              description: 'Define a new pricing tier customers can subscribe to.',\n              onClick: () => {},\n            },\n            {\n              id: 'review-refunds',\n              label: 'Review pending refunds',\n              description: 'Approve or investigate refunds awaiting a decision.',\n              href: '#refunds',\n            },\n            {\n              id: 'check-quotas',\n              label: 'Check resource quotas',\n              description: 'Make sure each plan grants the limits you intend.',\n              href: '#quotas',\n            },\n          ]}\n        />\n\n        <MetricsGrid>\n          <MetricCard\n            title=\"Total Revenue (30d)\"\n            hero\n            value=\"$124,500\"\n            icon={<CreditCard className=\"h-4 w-4\" />}\n            trend=\"up\"\n          />\n          <MetricCard\n            title=\"Active Subscriptions\"\n            value=\"1,248\"\n            icon={<Shield className=\"h-4 w-4\" />}\n          />\n          <MetricCard\n            title=\"Pending Refunds\"\n            value={refundsData?.getRefundRecords?.totalCount ?? 0}\n            icon={<ArrowUpRight className=\"h-4 w-4\" />}\n            priority=\"high\"\n          />\n          <MetricCard title=\"Upcoming Invoices\" value=\"42\" icon={<Receipt className=\"h-4 w-4\" />} />\n        </MetricsGrid>\n\n        <div className=\"grid gap-8 lg:grid-cols-2\">\n          <div className=\"space-y-4\">\n            <h2 className=\"text-lg font-semibold\">Platform Plans</h2>\n            <DataTable\n              columns={planColumns}\n              data={plans}\n              keyExtractor={(p) => p.id}\n              loading={plansLoading}\n              emptyState={\n                <EmptyState\n                  illustration=\"empty-data\"\n                  icon={<CreditCard className=\"h-8 w-8\" />}\n                  title=\"No plans yet\"\n                  description=\"Create your first pricing plan to let customers subscribe.\"\n                />\n              }\n            />\n          </div>\n          <div id=\"quotas\" className=\"space-y-4\">\n            <h2 className=\"text-lg font-semibold\">Resource Quotas</h2>\n            <DataTable\n              columns={quotaColumns}\n              data={quotas}\n              keyExtractor={(q) => q.id}\n              loading={quotasLoading}\n              emptyState={\n                <EmptyState\n                  illustration=\"empty-data\"\n                  icon={<Shield className=\"h-8 w-8\" />}\n                  title=\"No quotas defined\"\n                  description=\"Resource quotas you create will appear here.\"\n                />\n              }\n            />\n          </div>\n        </div>\n\n        <div id=\"refunds\" className=\"space-y-4\">\n          <h2 className=\"text-lg font-semibold\">Recent Refund Records</h2>\n          <DataTable\n            columns={refundColumns}\n            data={refunds}\n            keyExtractor={(r) => r.id}\n            loading={refundsLoading}\n            emptyState={\n              <EmptyState\n                illustration=\"empty-generic\"\n                icon={<Receipt className=\"h-8 w-8\" />}\n                title=\"No refunds recorded\"\n                description=\"Refund activity will show up here as it happens.\"\n              />\n            }\n          />\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/admin/pages/CommunicationsPage.js

@@ -7,112 +7,120 @@ import "../components/index.js";
 import { useGetNewsletterStatsQuery as l, useListNewslettersQuery as u, useSendNewsletterMutation as d } from "../../generated/global-operations.js";
 import { Eye as f, Mail as p, MousePointer2 as m, Plus as h, Send as g, Users as _ } from "lucide-react";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { PagePurpose as b } from "@burdenoff/fe-libs/ui";
 //#region src/admin/pages/CommunicationsPage.tsx
-function b() {
-	let { data: b, loading: x } = l(), { data: S, loading: C, refetch: w } = u({ variables: { limit: 50 } }), [T] = d(), E = b?.newsletterStats, D = S?.newsletters || [], O = async (e) => {
+function x() {
+	let { data: x, loading: S } = l(), { data: C, loading: w, refetch: T } = u({ variables: { limit: 50 } }), [E] = d(), D = x?.newsletterStats, O = C?.newsletters || [], k = async (e) => {
 		if (confirm("Are you sure you want to send this newsletter to all subscribers?")) try {
-			await T({ variables: { id: e } }), w();
+			await E({ variables: { id: e } }), T();
 		} catch (e) {
 			console.error("Failed to send newsletter:", e);
 		}
 	};
 	return /* @__PURE__ */ v(r, {
 		title: "Communications",
+		gradientWord: "Communications",
 		description: "Manage platform newsletters and system notifications",
 		actions: /* @__PURE__ */ y(t, { children: [/* @__PURE__ */ v(h, { className: "mr-2 h-4 w-4" }), "Create Newsletter"] }),
 		children: /* @__PURE__ */ y("div", {
 			className: "space-y-8",
-			children: [/* @__PURE__ */ y(s, { children: [
-				/* @__PURE__ */ v(o, {
-					title: "Total Subscribers",
-					value: E?.totalSubscribers ?? 0,
-					loading: x,
-					icon: /* @__PURE__ */ v(_, { className: "h-4 w-4" })
-				}),
-				/* @__PURE__ */ v(o, {
-					title: "Newsletters Sent",
-					value: E?.totalSent ?? 0,
-					loading: x,
-					icon: /* @__PURE__ */ v(g, { className: "h-4 w-4" })
-				}),
-				/* @__PURE__ */ v(o, {
-					title: "Avg. Open Rate",
-					value: a(E?.averageOpenRate ?? 0),
-					loading: x,
-					icon: /* @__PURE__ */ v(f, { className: "h-4 w-4" })
-				}),
-				/* @__PURE__ */ v(o, {
-					title: "Avg. Click Rate",
-					value: a(E?.averageClickRate ?? 0),
-					loading: x,
-					icon: /* @__PURE__ */ v(m, { className: "h-4 w-4" })
-				})
-			] }), /* @__PURE__ */ y("div", {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ v("h2", {
-					className: "text-lg font-semibold",
-					children: "Newsletters"
-				}), /* @__PURE__ */ v(c, {
-					columns: [
-						{
-							key: "title",
-							header: "Title",
-							render: (e) => /* @__PURE__ */ y("div", {
-								className: "flex flex-col",
-								children: [/* @__PURE__ */ v("span", {
-									className: "font-medium text-text-primary",
-									children: e.title
-								}), /* @__PURE__ */ v("span", {
-									className: "text-xs text-text-secondary",
-									children: e.subject
-								})]
-							})
-						},
-						{
-							key: "status",
-							header: "Status",
-							render: (t) => /* @__PURE__ */ v(e, {
-								variant: {
-									SENT: "success",
-									SCHEDULED: "warning",
-									DRAFT: "secondary"
-								}[t.status] || "outline",
-								children: t.status
-							})
-						},
-						{
-							key: "sentAt",
-							header: "Sent Date",
-							render: (e) => e.sentAt ? i(e.sentAt) : "-"
-						},
-						{
-							key: "actions",
-							header: "",
-							align: "right",
-							render: (e) => /* @__PURE__ */ v("div", {
-								className: "flex justify-end gap-2",
-								children: e.status === "DRAFT" && /* @__PURE__ */ y(t, {
-									size: "sm",
-									onClick: () => O(e.id),
-									children: [/* @__PURE__ */ v(g, { className: "mr-2 h-3 w-3" }), "Send Now"]
-								})
-							})
-						}
-					],
-					data: D,
-					keyExtractor: (e) => e.id,
-					loading: C,
-					emptyState: /* @__PURE__ */ v(n, {
-						icon: /* @__PURE__ */ v(p, { className: "h-8 w-8" }),
-						title: "No newsletters found",
-						description: "Create your first newsletter to communicate with users"
+			children: [
+				/* @__PURE__ */ v(b, { children: "Reach your users directly. Draft newsletters, send them to your subscriber base, and track how many people opened and clicked — use it to announce launches, share product updates, or run a re-engagement campaign." }),
+				/* @__PURE__ */ y(s, { children: [
+					/* @__PURE__ */ v(o, {
+						title: "Total Subscribers",
+						hero: !0,
+						value: D?.totalSubscribers ?? 0,
+						loading: S,
+						icon: /* @__PURE__ */ v(_, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ v(o, {
+						title: "Newsletters Sent",
+						value: D?.totalSent ?? 0,
+						loading: S,
+						icon: /* @__PURE__ */ v(g, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ v(o, {
+						title: "Avg. Open Rate",
+						value: a(D?.averageOpenRate ?? 0),
+						loading: S,
+						icon: /* @__PURE__ */ v(f, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ v(o, {
+						title: "Avg. Click Rate",
+						value: a(D?.averageClickRate ?? 0),
+						loading: S,
+						icon: /* @__PURE__ */ v(m, { className: "h-4 w-4" })
 					})
-				})]
-			})]
+				] }),
+				/* @__PURE__ */ y("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ v("h2", {
+						className: "text-lg font-semibold",
+						children: "Newsletters"
+					}), /* @__PURE__ */ v(c, {
+						columns: [
+							{
+								key: "title",
+								header: "Title",
+								render: (e) => /* @__PURE__ */ y("div", {
+									className: "flex flex-col",
+									children: [/* @__PURE__ */ v("span", {
+										className: "font-medium text-text-primary",
+										children: e.title
+									}), /* @__PURE__ */ v("span", {
+										className: "text-xs text-text-secondary",
+										children: e.subject
+									})]
+								})
+							},
+							{
+								key: "status",
+								header: "Status",
+								render: (t) => /* @__PURE__ */ v(e, {
+									variant: {
+										SENT: "success",
+										SCHEDULED: "warning",
+										DRAFT: "secondary"
+									}[t.status] || "outline",
+									children: t.status
+								})
+							},
+							{
+								key: "sentAt",
+								header: "Sent Date",
+								render: (e) => e.sentAt ? i(e.sentAt) : "-"
+							},
+							{
+								key: "actions",
+								header: "",
+								align: "right",
+								render: (e) => /* @__PURE__ */ v("div", {
+									className: "flex justify-end gap-2",
+									children: e.status === "DRAFT" && /* @__PURE__ */ y(t, {
+										size: "sm",
+										onClick: () => k(e.id),
+										children: [/* @__PURE__ */ v(g, { className: "mr-2 h-3 w-3" }), "Send Now"]
+									})
+								})
+							}
+						],
+						data: O,
+						keyExtractor: (e) => e.id,
+						loading: w,
+						emptyState: /* @__PURE__ */ v(n, {
+							illustration: "empty-notifications",
+							icon: /* @__PURE__ */ v(p, { className: "h-8 w-8" }),
+							title: "No newsletters found",
+							description: "Create your first newsletter to communicate with users"
+						})
+					})]
+				})
+			]
 		})
 	});
 }
 //#endregion
-export { b as CommunicationsPage };
+export { x as CommunicationsPage };
 
 //# sourceMappingURL=CommunicationsPage.js.map

package/dist/admin/pages/CommunicationsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommunicationsPage.js","names":[],"sources":["../../../src/admin/pages/CommunicationsPage.tsx"],"sourcesContent":["import { Mail, Plus, Send, Users, Eye, MousePointer2 } from 'lucide-react';\nimport {\n  PageLayout,\n  Button,\n  DataTable,\n  Badge,\n  MetricCard,\n  MetricsGrid,\n  EmptyState,\n} from '../components';\nimport {\n  useListNewslettersQuery,\n  useGetNewsletterStatsQuery,\n  useSendNewsletterMutation,\n} from '../../generated/global-operations';\nimport { formatDateTime, formatPercentage } from '../utils/formatters';\n\nexport function CommunicationsPage() {\n  const { data: statsData, loading: statsLoading } = useGetNewsletterStatsQuery();\n  const {\n    data: listData,\n    loading: listLoading,\n    refetch,\n  } = useListNewslettersQuery({\n    variables: { limit: 50 },\n  });\n\n  const [sendNewsletter] = useSendNewsletterMutation();\n\n  const stats = statsData?.newsletterStats;\n  const newsletters = listData?.newsletters || [];\n\n  const handleSend = async (id: string) => {\n    if (confirm('Are you sure you want to send this newsletter to all subscribers?')) {\n      try {\n        await sendNewsletter({ variables: { id } });\n        refetch();\n      } catch (err) {\n        console.error('Failed to send newsletter:', err);\n      }\n    }\n  };\n\n  const columns = [\n    {\n      key: 'title',\n      header: 'Title',\n      render: (news: any) => (\n        <div className=\"flex flex-col\">\n          <span className=\"font-medium text-text-primary\">{news.title}</span>\n          <span className=\"text-xs text-text-secondary\">{news.subject}</span>\n        </div>\n      ),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      render: (news: any) => {\n        const variants: Record<\n          string,\n          'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'\n        > = {\n          SENT: 'success',\n          SCHEDULED: 'warning',\n          DRAFT: 'secondary',\n        };\n        return <Badge variant={variants[news.status] || 'outline'}>{news.status}</Badge>;\n      },\n    },\n    {\n      key: 'sentAt',\n      header: 'Sent Date',\n      render: (news: any) => (news.sentAt ? formatDateTime(news.sentAt) : '-'),\n    },\n    {\n      key: 'actions',\n      header: '',\n      align: 'right' as const,\n      render: (news: any) => (\n        <div className=\"flex justify-end gap-2\">\n          {news.status === 'DRAFT' && (\n            <Button size=\"sm\" onClick={() => handleSend(news.id)}>\n              <Send className=\"mr-2 h-3 w-3\" />\n              Send Now\n            </Button>\n          )}\n        </div>\n      ),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Communications\"\n      description=\"Manage platform newsletters and system notifications\"\n      actions={\n        <Button>\n          <Plus className=\"mr-2 h-4 w-4\" />\n          Create Newsletter\n        </Button>\n      }\n    >\n      <div className=\"space-y-8\">\n        <MetricsGrid>\n          <MetricCard\n            title=\"Total Subscribers\"\n            value={stats?.totalSubscribers ?? 0}\n            loading={statsLoading}\n            icon={<Users className=\"h-4 w-4\" />}\n          />\n          <MetricCard\n            title=\"Newsletters Sent\"\n            value={stats?.totalSent ?? 0}\n            loading={statsLoading}\n            icon={<Send className=\"h-4 w-4\" />}\n          />\n          <MetricCard\n            title=\"Avg. Open Rate\"\n            value={formatPercentage(stats?.averageOpenRate ?? 0)}\n            loading={statsLoading}\n            icon={<Eye className=\"h-4 w-4\" />}\n          />\n          <MetricCard\n            title=\"Avg. Click Rate\"\n            value={formatPercentage(stats?.averageClickRate ?? 0)}\n            loading={statsLoading}\n            icon={<MousePointer2 className=\"h-4 w-4\" />}\n          />\n        </MetricsGrid>\n\n        <div className=\"space-y-4\">\n          <h2 className=\"text-lg font-semibold\">Newsletters</h2>\n          <DataTable\n            columns={columns}\n            data={newsletters}\n            keyExtractor={(n) => n.id}\n            loading={listLoading}\n            emptyState={\n              <EmptyState\n                icon={<Mail className=\"h-8 w-8\" />}\n                title=\"No newsletters found\"\n                description=\"Create your first newsletter to communicate with users\"\n              />\n            }\n          />\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,IAAqB;CACnC,IAAM,EAAE,MAAM,GAAW,SAAS,MAAiB,GAA4B,EACzE,EACJ,MAAM,GACN,SAAS,GACT,eACE,EAAwB,EAC1B,WAAW,EAAE,OAAO,IAAI,EACzB,CAAC,EAEI,CAAC,KAAkB,GAA2B,EAE9C,IAAQ,GAAW,iBACnB,IAAc,GAAU,eAAe,EAAE,EAEzC,IAAa,OAAO,MAAe;AACvC,MAAI,QAAQ,oEAAoE,CAC9E,KAAI;AAEF,GADA,MAAM,EAAe,EAAE,WAAW,EAAE,OAAI,EAAE,CAAC,EAC3C,GAAS;WACF,GAAK;AACZ,WAAQ,MAAM,8BAA8B,EAAI;;;AAqDtD,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,SACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,oBAE1B,EAAA,CAAA;YAGX,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAA,UAAA;IACE,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,GAAO,oBAAoB;KAClC,SAAS;KACT,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;KACnC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,GAAO,aAAa;KAC3B,SAAS;KACT,MAAM,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;KAClC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,EAAiB,GAAO,mBAAmB,EAAE;KACpD,SAAS;KACT,MAAM,kBAAC,GAAD,EAAK,WAAU,WAAY,CAAA;KACjC,CAAA;IACF,kBAAC,GAAD;KACE,OAAM;KACN,OAAO,EAAiB,GAAO,oBAAoB,EAAE;KACrD,SAAS;KACT,MAAM,kBAAC,GAAD,EAAe,WAAU,WAAY,CAAA;KAC3C,CAAA;IACU,EAAA,CAAA,EAEd,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAAwB;KAAgB,CAAA,EACtD,kBAAC,GAAD;KACW,SA1FH;MACd;OACE,KAAK;OACL,QAAQ;OACR,SAAS,MACP,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAK;SAAa,CAAA,EACnE,kBAAC,QAAD;SAAM,WAAU;mBAA+B,EAAK;SAAe,CAAA,CAC/D;;OAET;MACD;OACE,KAAK;OACL,QAAQ;OACR,SAAS,MASA,kBAAC,GAAD;QAAO,SALV;SACF,MAAM;SACN,WAAW;SACX,OAAO;SACR,CAC+B,EAAK,WAAW;kBAAY,EAAK;QAAe,CAAA;OAEnF;MACD;OACE,KAAK;OACL,QAAQ;OACR,SAAS,MAAe,EAAK,SAAS,EAAe,EAAK,OAAO,GAAG;OACrE;MACD;OACE,KAAK;OACL,QAAQ;OACR,OAAO;OACP,SAAS,MACP,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAK,WAAW,WACf,kBAAC,GAAD;SAAQ,MAAK;SAAK,eAAe,EAAW,EAAK,GAAG;mBAApD,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,WAE1B;;QAEP,CAAA;OAET;MACF;KA6CS,MAAM;KACN,eAAe,MAAM,EAAE;KACvB,SAAS;KACT,YACE,kBAAC,GAAD;MACE,MAAM,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;MAClC,OAAM;MACN,aAAY;MACZ,CAAA;KAEJ,CAAA,CACE;MACF;;EACK,CAAA"}
+{"version":3,"file":"CommunicationsPage.js","names":[],"sources":["../../../src/admin/pages/CommunicationsPage.tsx"],"sourcesContent":["import { Mail, Plus, Send, Users, Eye, MousePointer2 } from 'lucide-react';\nimport {\n  PageLayout,\n  Button,\n  DataTable,\n  Badge,\n  MetricCard,\n  MetricsGrid,\n  EmptyState,\n} from '../components';\nimport {\n  useListNewslettersQuery,\n  useGetNewsletterStatsQuery,\n  useSendNewsletterMutation,\n} from '../../generated/global-operations';\nimport { formatDateTime, formatPercentage } from '../utils/formatters';\nimport { PagePurpose } from '@burdenoff/fe-libs/ui';\n\nexport function CommunicationsPage() {\n  const { data: statsData, loading: statsLoading } = useGetNewsletterStatsQuery();\n  const {\n    data: listData,\n    loading: listLoading,\n    refetch,\n  } = useListNewslettersQuery({\n    variables: { limit: 50 },\n  });\n\n  const [sendNewsletter] = useSendNewsletterMutation();\n\n  const stats = statsData?.newsletterStats;\n  const newsletters = listData?.newsletters || [];\n\n  const handleSend = async (id: string) => {\n    if (confirm('Are you sure you want to send this newsletter to all subscribers?')) {\n      try {\n        await sendNewsletter({ variables: { id } });\n        refetch();\n      } catch (err) {\n        console.error('Failed to send newsletter:', err);\n      }\n    }\n  };\n\n  const columns = [\n    {\n      key: 'title',\n      header: 'Title',\n      render: (news: any) => (\n        <div className=\"flex flex-col\">\n          <span className=\"font-medium text-text-primary\">{news.title}</span>\n          <span className=\"text-xs text-text-secondary\">{news.subject}</span>\n        </div>\n      ),\n    },\n    {\n      key: 'status',\n      header: 'Status',\n      render: (news: any) => {\n        const variants: Record<\n          string,\n          'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'\n        > = {\n          SENT: 'success',\n          SCHEDULED: 'warning',\n          DRAFT: 'secondary',\n        };\n        return <Badge variant={variants[news.status] || 'outline'}>{news.status}</Badge>;\n      },\n    },\n    {\n      key: 'sentAt',\n      header: 'Sent Date',\n      render: (news: any) => (news.sentAt ? formatDateTime(news.sentAt) : '-'),\n    },\n    {\n      key: 'actions',\n      header: '',\n      align: 'right' as const,\n      render: (news: any) => (\n        <div className=\"flex justify-end gap-2\">\n          {news.status === 'DRAFT' && (\n            <Button size=\"sm\" onClick={() => handleSend(news.id)}>\n              <Send className=\"mr-2 h-3 w-3\" />\n              Send Now\n            </Button>\n          )}\n        </div>\n      ),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title=\"Communications\"\n      gradientWord=\"Communications\"\n      description=\"Manage platform newsletters and system notifications\"\n      actions={\n        <Button>\n          <Plus className=\"mr-2 h-4 w-4\" />\n          Create Newsletter\n        </Button>\n      }\n    >\n      <div className=\"space-y-8\">\n        <PagePurpose>\n          Reach your users directly. Draft newsletters, send them to your subscriber base, and\n          track how many people opened and clicked — use it to announce launches, share product\n          updates, or run a re-engagement campaign.\n        </PagePurpose>\n\n        <MetricsGrid>\n          <MetricCard\n            title=\"Total Subscribers\"\n            hero\n            value={stats?.totalSubscribers ?? 0}\n            loading={statsLoading}\n            icon={<Users className=\"h-4 w-4\" />}\n          />\n          <MetricCard\n            title=\"Newsletters Sent\"\n            value={stats?.totalSent ?? 0}\n            loading={statsLoading}\n            icon={<Send className=\"h-4 w-4\" />}\n          />\n          <MetricCard\n            title=\"Avg. Open Rate\"\n            value={formatPercentage(stats?.averageOpenRate ?? 0)}\n            loading={statsLoading}\n            icon={<Eye className=\"h-4 w-4\" />}\n          />\n          <MetricCard\n            title=\"Avg. Click Rate\"\n            value={formatPercentage(stats?.averageClickRate ?? 0)}\n            loading={statsLoading}\n            icon={<MousePointer2 className=\"h-4 w-4\" />}\n          />\n        </MetricsGrid>\n\n        <div className=\"space-y-4\">\n          <h2 className=\"text-lg font-semibold\">Newsletters</h2>\n          <DataTable\n            columns={columns}\n            data={newsletters}\n            keyExtractor={(n) => n.id}\n            loading={listLoading}\n            emptyState={\n              <EmptyState\n                illustration=\"empty-notifications\"\n                icon={<Mail className=\"h-8 w-8\" />}\n                title=\"No newsletters found\"\n                description=\"Create your first newsletter to communicate with users\"\n              />\n            }\n          />\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,IAAqB;CACnC,IAAM,EAAE,MAAM,GAAW,SAAS,MAAiB,GAA4B,EACzE,EACJ,MAAM,GACN,SAAS,GACT,eACE,EAAwB,EAC1B,WAAW,EAAE,OAAO,IAAI,EACzB,CAAC,EAEI,CAAC,KAAkB,GAA2B,EAE9C,IAAQ,GAAW,iBACnB,IAAc,GAAU,eAAe,EAAE,EAEzC,IAAa,OAAO,MAAe;AACvC,MAAI,QAAQ,oEAAoE,CAC9E,KAAI;AAEF,GADA,MAAM,EAAe,EAAE,WAAW,EAAE,OAAI,EAAE,CAAC,EAC3C,GAAS;WACF,GAAK;AACZ,WAAQ,MAAM,8BAA8B,EAAI;;;AAqDtD,QACE,kBAAC,GAAD;EACE,OAAM;EACN,cAAa;EACb,aAAY;EACZ,SACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,oBAE1B,EAAA,CAAA;YAGX,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAA,UAAa,wNAIC,CAAA;IAEd,kBAAC,GAAD,EAAA,UAAA;KACE,kBAAC,GAAD;MACE,OAAM;MACN,MAAA;MACA,OAAO,GAAO,oBAAoB;MAClC,SAAS;MACT,MAAM,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;MACnC,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,GAAO,aAAa;MAC3B,SAAS;MACT,MAAM,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;MAClC,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,EAAiB,GAAO,mBAAmB,EAAE;MACpD,SAAS;MACT,MAAM,kBAAC,GAAD,EAAK,WAAU,WAAY,CAAA;MACjC,CAAA;KACF,kBAAC,GAAD;MACE,OAAM;MACN,OAAO,EAAiB,GAAO,oBAAoB,EAAE;MACrD,SAAS;MACT,MAAM,kBAAC,GAAD,EAAe,WAAU,WAAY,CAAA;MAC3C,CAAA;KACU,EAAA,CAAA;IAEd,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAwB;MAAgB,CAAA,EACtD,kBAAC,GAAD;MACW,SAlGH;OACd;QACE,KAAK;QACL,QAAQ;QACR,SAAS,MACP,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,QAAD;UAAM,WAAU;oBAAiC,EAAK;UAAa,CAAA,EACnE,kBAAC,QAAD;UAAM,WAAU;oBAA+B,EAAK;UAAe,CAAA,CAC/D;;QAET;OACD;QACE,KAAK;QACL,QAAQ;QACR,SAAS,MASA,kBAAC,GAAD;SAAO,SALV;UACF,MAAM;UACN,WAAW;UACX,OAAO;UACR,CAC+B,EAAK,WAAW;mBAAY,EAAK;SAAe,CAAA;QAEnF;OACD;QACE,KAAK;QACL,QAAQ;QACR,SAAS,MAAe,EAAK,SAAS,EAAe,EAAK,OAAO,GAAG;QACrE;OACD;QACE,KAAK;QACL,QAAQ;QACR,OAAO;QACP,SAAS,MACP,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAK,WAAW,WACf,kBAAC,GAAD;UAAQ,MAAK;UAAK,eAAe,EAAW,EAAK,GAAG;oBAApD,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,WAE1B;;SAEP,CAAA;QAET;OACF;MAqDS,MAAM;MACN,eAAe,MAAM,EAAE;MACvB,SAAS;MACT,YACE,kBAAC,GAAD;OACE,cAAa;OACb,MAAM,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;OAClC,OAAM;OACN,aAAY;OACZ,CAAA;MAEJ,CAAA,CACE;;IACF;;EACK,CAAA"}