@burdenoff/microfe-devportal 2026.625.9 → 2026.626.1

package/dist/devportal/pages/RevenueDashboardPage.js

@@ -1,48 +1,49 @@
 import { useDevportal as e } from "../providers/DevportalProvider.js";
 import { cn as t } from "../utils/cn.js";
 import { EmptyState as n } from "../components/EmptyState.js";
-import { useGetBillingAccountsByOrgQuery as ee, useGetMyOrganizationsQuery as te, useGetRevenueDashboardDataQuery as ne, useLinkDevOrgBillingAccountMutation as r } from "../../generated/global-operations.js";
+import { useGetBillingAccountsByOrgQuery as ee, useGetMyOrganizationsQuery as r, useGetRevenueDashboardDataQuery as te, useLinkDevOrgBillingAccountMutation as ne } from "../../generated/global-operations.js";
 import { getErrorMessage as i } from "../hooks/useGraphQL.js";
 import { PageLayout as a, PageSection as o } from "../components/PageLayout.js";
 import { StatCard as s, StatCardGrid as re } from "../components/StatCard.js";
 import { StatusBadge as c } from "../components/StatusBadge.js";
 import { DataTable as l } from "../components/DataTable.js";
 import "../hooks/index.js";
-import { Tooltip as u } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/component/Tooltip.js";
-import { ResponsiveContainer as d } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/component/ResponsiveContainer.js";
-import { Bar as ie } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/Bar.js";
-import { CartesianGrid as f } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/CartesianGrid.js";
-import { Line as p } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/Line.js";
-import { XAxis as m } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/XAxis.js";
-import { YAxis as h } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/cartesian/YAxis.js";
-import { LineChart as g } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/chart/LineChart.js";
-import { BarChart as _ } from "../../node_modules/.bun/recharts@2.15.4_21ccd8898788a04d/node_modules/recharts/es6/chart/BarChart.js";
-import { useTr as ae } from "../utils/i18n.js";
-import { useMemo as v, useState as y } from "react";
-import { AlertCircle as b, ArrowDownToLine as oe, Building2 as x, Check as S, CreditCard as C, DollarSign as w, Link2 as T, Loader2 as E, Wallet as se } from "lucide-react";
-import { useSearchParams as ce } from "react-router-dom";
-import { Fragment as le, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { Tooltip as u } from "../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as d } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { Bar as ie } from "../../node_modules/recharts/es6/cartesian/Bar.js";
+import { CartesianGrid as f } from "../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { Line as p } from "../../node_modules/recharts/es6/cartesian/Line.js";
+import { XAxis as m } from "../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as h } from "../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { LineChart as ae } from "../../node_modules/recharts/es6/chart/LineChart.js";
+import { BarChart as oe } from "../../node_modules/recharts/es6/chart/BarChart.js";
+import { useTr as se } from "../utils/i18n.js";
+import { useMemo as g, useState as _ } from "react";
+import { AlertCircle as v, ArrowDownToLine as ce, Building2 as y, Check as b, CreditCard as x, DollarSign as S, Link2 as C, Loader2 as w, Wallet as T } from "lucide-react";
+import { useSearchParams as le } from "react-router-dom";
+import { Fragment as ue, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { EmphasisPanel as de, GlassCard as O } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/pages/RevenueDashboardPage.tsx
 var k = {
 	primary: "var(--color-chart-1)",
 	secondary: "var(--color-chart-2)",
 	tertiary: "var(--color-chart-4)"
-}, ue = {
+}, fe = {
 	"30d": 30,
 	"90d": 90,
 	"12m": 365
 }, A = () => {
-	let A = ae(), { activeOrgId: j, tenantId: de } = e(), [M, fe] = y("90d"), [N, P] = y(!1), [F, I] = y(null), [pe] = r(), [L, R] = y(!1), [z, B] = y(null), [me] = ce(), V = v(() => /* @__PURE__ */ new Date(), []), { data: he, loading: H } = ee({
+	let A = se(), { activeOrgId: j, tenantId: pe } = e(), [M, me] = _("90d"), [N, P] = _(!1), [F, I] = _(null), [he] = ne(), [L, R] = _(!1), [z, B] = _(null), [ge] = le(), V = g(() => /* @__PURE__ */ new Date(), []), { data: _e, loading: H } = ee({
 		fetchPolicy: "cache-and-network",
-		context: { headers: { "x-org-id": de ?? "" } }
-	}), ge = v(() => {
+		context: { headers: { "x-org-id": pe ?? "" } }
+	}), ve = g(() => {
 		let e = new Date(V);
-		return e.setDate(e.getDate() - ue[M]), e.toISOString();
-	}, [V, M]), { data: U, loading: _e, error: W } = te({ fetchPolicy: "cache-and-network" }), { data: G, loading: ve, error: K } = ne({
+		return e.setDate(e.getDate() - fe[M]), e.toISOString();
+	}, [V, M]), { data: U, loading: ye, error: W } = r({ fetchPolicy: "cache-and-network" }), { data: G, loading: be, error: K } = te({
 		variables: {
 			organizationId: j ?? "",
 			period: "monthly",
-			startDate: ge,
+			startDate: ve,
 			endDate: V.toISOString(),
 			salesLimit: 10,
 			salesOffset: 0,
@@ -51,13 +52,13 @@ var k = {
 		},
 		skip: !j,
 		fetchPolicy: "cache-and-network"
-	}), q = v(() => U?.myDeveloperOrganizations?.map((e) => e) ?? [], [U?.myDeveloperOrganizations]).find((e) => e.id === j), J = he?.getBillingAccountsByOrg ?? [], Y = J.find((e) => e.id === q?.billingAccountId) ?? null, X = () => {
+	}), q = g(() => U?.myDeveloperOrganizations?.map((e) => e) ?? [], [U?.myDeveloperOrganizations]).find((e) => e.id === j), J = _e?.getBillingAccountsByOrg ?? [], Y = J.find((e) => e.id === q?.billingAccountId) ?? null, X = () => {
 		B(q?.billingAccountId ?? J.find((e) => e.isDefault)?.id ?? J[0]?.id ?? null), R(!0);
 	}, Z = async () => {
 		if (!(!j || !z)) {
 			P(!0), I(null);
 			try {
-				await pe({
+				await he({
 					variables: {
 						organizationId: j,
 						billingAccountId: z
@@ -70,7 +71,7 @@ var k = {
 				P(!1);
 			}
 		}
-	}, Q = G?.developerOrgRevenueSummary, ye = [...G?.developerOrgRevenueAnalytics ?? []].sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime()), be = G?.developerOrgSales?.edges?.map((e) => e.node) ?? [], xe = G?.developerOrgPayouts?.edges?.map((e) => e.node) ?? [], $ = ye.map((e) => ({
+	}, Q = G?.developerOrgRevenueSummary, xe = [...G?.developerOrgRevenueAnalytics ?? []].sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime()), Se = G?.developerOrgSales?.edges?.map((e) => e.node) ?? [], Ce = G?.developerOrgPayouts?.edges?.map((e) => e.node) ?? [], $ = xe.map((e) => ({
 		date: new Date(e.date).toLocaleDateString(void 0, {
 			month: "short",
 			day: "numeric"
@@ -81,55 +82,56 @@ var k = {
 		refunds: e.refunds,
 		salesCount: e.salesCount
 	}));
-	return _e && !U ? /* @__PURE__ */ D(a, {
+	return ye && !U ? /* @__PURE__ */ E(a, {
 		title: A("devportal.revenue.title", "Revenue"),
 		description: A("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ D("div", {
-			className: "flex items-center justify-center py-16 text-muted-foreground",
-			children: /* @__PURE__ */ D(E, { className: "h-8 w-8 animate-spin" })
+		children: /* @__PURE__ */ E("div", {
+			className: "flex items-center justify-center py-16 text-text-secondary",
+			children: /* @__PURE__ */ E(w, { className: "h-8 w-8 animate-spin" })
 		})
-	}) : W ? /* @__PURE__ */ D(a, {
+	}) : W ? /* @__PURE__ */ E(a, {
 		title: A("devportal.revenue.title", "Revenue"),
 		description: A("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ D(n, {
-			icon: /* @__PURE__ */ D(b, {
+		children: /* @__PURE__ */ E(n, {
+			icon: /* @__PURE__ */ E(v, {
 				size: 32,
 				className: "text-status-error-text"
 			}),
 			title: A("devportal.revenue.errorLoadOrgs", "Unable to load organizations"),
 			description: i(W)
 		})
-	}) : j ? K ? /* @__PURE__ */ D(a, {
+	}) : j ? K ? /* @__PURE__ */ E(a, {
 		title: A("devportal.revenue.title", "Revenue"),
 		description: A("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ D(n, {
-			icon: /* @__PURE__ */ D(b, {
+		children: /* @__PURE__ */ E(n, {
+			icon: /* @__PURE__ */ E(v, {
 				size: 32,
 				className: "text-status-error-text"
 			}),
 			title: A("devportal.revenue.errorLoadData", "Unable to load revenue data"),
 			description: i(K)
 		})
-	}) : /* @__PURE__ */ O(a, {
+	}) : /* @__PURE__ */ D(a, {
 		title: A("devportal.revenue.title", "Revenue"),
 		description: q ? `${A("devportal.revenue.financialPerformanceFor", "Financial performance for")} ${q.name}` : A("devportal.revenue.shortDescription", "Track revenue, sales, and payouts"),
-		actions: /* @__PURE__ */ D("div", {
+		purpose: A("devportal.revenue.purpose", "Revenue tracks the money your paid apps earn — gross sales, platform fees, and what gets paid out to your organization. Link a billing account, then use this to reconcile payouts and watch growth across time ranges."),
+		actions: /* @__PURE__ */ E("div", {
 			className: "flex flex-wrap gap-2",
-			children: /* @__PURE__ */ O("select", {
+			children: /* @__PURE__ */ D("select", {
 				value: M,
-				onChange: (e) => fe(e.target.value),
+				onChange: (e) => me(e.target.value),
 				"aria-label": A("devportal.revenue.selectRangeAria", "Select time range"),
-				className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
+				className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
 				children: [
-					/* @__PURE__ */ D("option", {
+					/* @__PURE__ */ E("option", {
 						value: "30d",
 						children: A("devportal.revenue.range.30d", "Last 30 days")
 					}),
-					/* @__PURE__ */ D("option", {
+					/* @__PURE__ */ E("option", {
 						value: "90d",
 						children: A("devportal.revenue.range.90d", "Last 90 days")
 					}),
-					/* @__PURE__ */ D("option", {
+					/* @__PURE__ */ E("option", {
 						value: "12m",
 						children: A("devportal.revenue.range.12m", "Last 12 months")
 					})
@@ -137,252 +139,256 @@ var k = {
 			})
 		}),
 		children: [
-			q && !q.billingAccountId && /* @__PURE__ */ O("div", {
-				className: "mb-6 rounded-lg border border-border-subtle bg-status-info-bg-subtle p-4 flex flex-col gap-3",
+			q && !q.billingAccountId && /* @__PURE__ */ D("div", {
+				className: "mb-6 rounded-card border border-border-seam bg-status-info-bg-subtle p-4 flex flex-col gap-3",
 				children: [
-					/* @__PURE__ */ O("div", {
+					/* @__PURE__ */ D("div", {
 						className: "flex items-start gap-3",
 						children: [
-							/* @__PURE__ */ D(T, {
+							/* @__PURE__ */ E(C, {
 								size: 20,
 								className: "text-accent-blue flex-shrink-0 mt-0.5"
 							}),
-							/* @__PURE__ */ O("div", {
+							/* @__PURE__ */ D("div", {
 								className: "flex-1 min-w-0",
 								children: [
-									/* @__PURE__ */ D("p", {
+									/* @__PURE__ */ E("p", {
 										className: "text-sm font-medium text-status-info-text",
 										children: A("devportal.revenue.billingNotLinkedTitle", "Link a billing account to receive store revenue")
 									}),
-									/* @__PURE__ */ D("p", {
+									/* @__PURE__ */ E("p", {
 										className: "mt-1 text-sm text-status-info-text",
 										children: A("devportal.revenue.billingNotLinkedDesc", "Once linked, net earnings from app sales will appear in your billing credits — you can spend them on platform services or withdraw to your bank.")
 									}),
-									F && /* @__PURE__ */ D("p", {
+									F && /* @__PURE__ */ E("p", {
 										className: "mt-2 text-sm text-status-error-text",
 										children: F
 									})
 								]
 							}),
-							/* @__PURE__ */ O("button", {
+							/* @__PURE__ */ D("button", {
 								type: "button",
 								onClick: X,
 								disabled: N || H,
-								className: "inline-flex items-center gap-2 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 flex-shrink-0",
-								children: [N || H ? /* @__PURE__ */ D(E, {
+								className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50 flex-shrink-0",
+								children: [N || H ? /* @__PURE__ */ E(w, {
 									size: 14,
 									className: "animate-spin"
-								}) : /* @__PURE__ */ D(T, { size: 14 }), N ? A("devportal.revenue.linking", "Linking...") : A("devportal.revenue.linkBillingAccount", "Link Billing Account")]
+								}) : /* @__PURE__ */ E(C, { size: 14 }), N ? A("devportal.revenue.linking", "Linking...") : A("devportal.revenue.linkBillingAccount", "Link Billing Account")]
 							})
 						]
 					}),
-					L && J.length === 0 && /* @__PURE__ */ D("div", {
-						className: "rounded-lg border border-border bg-card p-4 ml-8 text-sm text-muted-foreground",
+					L && J.length === 0 && /* @__PURE__ */ E("div", {
+						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 ml-8 text-sm text-text-secondary",
 						children: A("devportal.revenue.noBillingAccounts", "You don't have any billing accounts yet. Create one from your account billing settings first.")
 					}),
-					L && J.length > 0 && /* @__PURE__ */ O("div", {
-						className: "rounded-lg border border-border bg-card p-4 ml-8 space-y-3",
+					L && J.length > 0 && /* @__PURE__ */ D("div", {
+						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 ml-8 space-y-3",
 						children: [
-							/* @__PURE__ */ D("p", {
+							/* @__PURE__ */ E("p", {
 								className: "text-sm font-medium",
 								children: A("devportal.revenue.chooseBillingAccount", "Choose a billing account to link")
 							}),
-							/* @__PURE__ */ D("div", {
+							/* @__PURE__ */ E("div", {
 								className: "space-y-2",
-								children: J.map((e) => /* @__PURE__ */ O("button", {
+								children: J.map((e) => /* @__PURE__ */ D("button", {
 									type: "button",
 									onClick: () => B(e.id ?? null),
-									className: t("flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm text-left transition-colors", z === e.id ? "border-primary bg-primary/5 text-foreground" : "border-border hover:bg-accent text-foreground"),
-									children: [/* @__PURE__ */ D(S, {
+									className: t("flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm text-left transition-colors", z === e.id ? "border-primary bg-action-primary-bg/5 text-text-primary" : "border-border-subtle hover:bg-accent text-text-primary"),
+									children: [/* @__PURE__ */ E(b, {
 										size: 14,
 										className: t("flex-shrink-0", z === e.id ? "opacity-100 text-primary" : "opacity-0")
-									}), /* @__PURE__ */ O("div", {
+									}), /* @__PURE__ */ D("div", {
 										className: "flex-1 min-w-0",
-										children: [/* @__PURE__ */ D("p", {
+										children: [/* @__PURE__ */ E("p", {
 											className: "font-medium truncate",
 											children: e.name
-										}), e.isDefault && /* @__PURE__ */ D("p", {
-											className: "text-xs text-muted-foreground",
+										}), e.isDefault && /* @__PURE__ */ E("p", {
+											className: "text-xs text-text-secondary",
 											children: A("devportal.revenue.defaultAccount", "Default")
 										})]
 									})]
 								}, e.id))
 							}),
-							/* @__PURE__ */ O("div", {
+							/* @__PURE__ */ D("div", {
 								className: "flex items-center justify-end gap-2 pt-1",
-								children: [/* @__PURE__ */ D("button", {
+								children: [/* @__PURE__ */ E("button", {
 									type: "button",
 									onClick: () => {
 										R(!1), I(null);
 									},
-									className: "rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent transition-colors",
+									className: "rounded-md px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-accent transition-colors",
 									children: A("devportal.cancel", "Cancel")
-								}), /* @__PURE__ */ O("button", {
+								}), /* @__PURE__ */ D("button", {
 									type: "button",
 									disabled: N || !z,
 									onClick: () => void Z(),
-									className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
-									children: [N ? /* @__PURE__ */ D(E, {
+									className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50",
+									children: [N ? /* @__PURE__ */ E(w, {
 										size: 13,
 										className: "animate-spin"
-									}) : /* @__PURE__ */ D(T, { size: 13 }), A("devportal.revenue.confirm", "Confirm")]
+									}) : /* @__PURE__ */ E(C, { size: 13 }), A("devportal.revenue.confirm", "Confirm")]
 								})]
 							})
 						]
 					})
 				]
 			}),
-			q?.billingAccountId && /* @__PURE__ */ O("div", {
-				className: "mb-6 rounded-lg border border-border bg-card p-3 flex flex-col gap-3",
-				children: [/* @__PURE__ */ O("div", {
+			q?.billingAccountId && /* @__PURE__ */ D("div", {
+				className: "mb-6 rounded-lg border border-border-subtle bg-bg-surface p-3 flex flex-col gap-3",
+				children: [/* @__PURE__ */ D("div", {
 					className: "flex items-center gap-3",
 					children: [
-						/* @__PURE__ */ D(C, {
+						/* @__PURE__ */ E(x, {
 							size: 16,
-							className: "text-muted-foreground flex-shrink-0"
+							className: "text-text-secondary flex-shrink-0"
 						}),
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ D("div", {
 							className: "flex-1 min-w-0",
-							children: [/* @__PURE__ */ D("p", {
+							children: [/* @__PURE__ */ E("p", {
 								className: "text-sm font-medium truncate",
 								children: Y?.name ?? A("devportal.revenue.billingAccount", "Billing account")
-							}), /* @__PURE__ */ D("p", {
-								className: "text-xs text-muted-foreground truncate",
+							}), /* @__PURE__ */ E("p", {
+								className: "text-xs text-text-secondary truncate",
 								children: Y ? `${Y.currency}${Y.email ? ` · ${Y.email}` : ""}` : q.billingAccountId
 							})]
 						}),
-						!L && /* @__PURE__ */ D("button", {
+						!L && /* @__PURE__ */ E("button", {
 							type: "button",
 							onClick: X,
 							disabled: H,
-							className: "text-xs text-muted-foreground hover:text-foreground transition-colors flex-shrink-0 disabled:opacity-50",
+							className: "text-xs text-text-secondary hover:text-text-primary transition-colors flex-shrink-0 disabled:opacity-50",
 							children: A("devportal.revenue.changeBillingAccount", "Change")
 						})
 					]
-				}), L && J.length > 0 && /* @__PURE__ */ O("div", {
-					className: "rounded-lg border border-border bg-background p-4 space-y-3",
+				}), L && J.length > 0 && /* @__PURE__ */ D("div", {
+					className: "rounded-lg border border-border-subtle bg-bg-surface p-4 space-y-3",
 					children: [
-						/* @__PURE__ */ D("p", {
+						/* @__PURE__ */ E("p", {
 							className: "text-sm font-medium",
 							children: A("devportal.revenue.chooseBillingAccount", "Choose a billing account to link")
 						}),
-						/* @__PURE__ */ D("div", {
+						/* @__PURE__ */ E("div", {
 							className: "space-y-2",
-							children: J.map((e) => /* @__PURE__ */ O("button", {
+							children: J.map((e) => /* @__PURE__ */ D("button", {
 								type: "button",
 								onClick: () => B(e.id ?? null),
-								className: t("flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm text-left transition-colors", z === e.id ? "border-primary bg-primary/5 text-foreground" : "border-border hover:bg-accent text-foreground"),
-								children: [/* @__PURE__ */ D(S, {
+								className: t("flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm text-left transition-colors", z === e.id ? "border-primary bg-action-primary-bg/5 text-text-primary" : "border-border-subtle hover:bg-accent text-text-primary"),
+								children: [/* @__PURE__ */ E(b, {
 									size: 14,
 									className: t("flex-shrink-0", z === e.id ? "opacity-100 text-primary" : "opacity-0")
-								}), /* @__PURE__ */ O("div", {
+								}), /* @__PURE__ */ D("div", {
 									className: "flex-1 min-w-0",
-									children: [/* @__PURE__ */ D("p", {
+									children: [/* @__PURE__ */ E("p", {
 										className: "font-medium truncate",
 										children: e.name
-									}), e.isDefault && /* @__PURE__ */ D("p", {
-										className: "text-xs text-muted-foreground",
+									}), e.isDefault && /* @__PURE__ */ E("p", {
+										className: "text-xs text-text-secondary",
 										children: A("devportal.revenue.defaultAccount", "Default")
 									})]
 								})]
 							}, e.id))
 						}),
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ D("div", {
 							className: "flex items-center justify-end gap-2 pt-1",
-							children: [/* @__PURE__ */ D("button", {
+							children: [/* @__PURE__ */ E("button", {
 								type: "button",
 								onClick: () => {
 									R(!1), I(null);
 								},
-								className: "rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent transition-colors",
+								className: "rounded-md px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-accent transition-colors",
 								children: A("devportal.cancel", "Cancel")
-							}), /* @__PURE__ */ O("button", {
+							}), /* @__PURE__ */ D("button", {
 								type: "button",
 								disabled: N || !z,
 								onClick: () => void Z(),
-								className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
-								children: [N ? /* @__PURE__ */ D(E, {
+								className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50",
+								children: [N ? /* @__PURE__ */ E(w, {
 									size: 13,
 									className: "animate-spin"
-								}) : /* @__PURE__ */ D(T, { size: 13 }), A("devportal.revenue.confirm", "Confirm")]
+								}) : /* @__PURE__ */ E(C, { size: 13 }), A("devportal.revenue.confirm", "Confirm")]
 							})]
 						}),
-						F && /* @__PURE__ */ D("p", {
+						F && /* @__PURE__ */ E("p", {
 							className: "text-xs text-status-error-text",
 							children: F
 						})
 					]
 				})]
 			}),
-			ve && !Q ? /* @__PURE__ */ D("div", {
-				className: "flex items-center justify-center py-16 text-muted-foreground",
-				children: /* @__PURE__ */ D(E, { className: "h-8 w-8 animate-spin" })
-			}) : Q ? /* @__PURE__ */ O(le, { children: [
-				/* @__PURE__ */ O(re, {
-					columns: 4,
-					children: [
-						/* @__PURE__ */ D(s, {
-							title: A("devportal.revenue.grossRevenue", "Gross Revenue"),
-							value: `$${Q.totalGrossRevenue.toLocaleString()}`,
-							icon: /* @__PURE__ */ D(w, { size: 20 })
-						}),
-						/* @__PURE__ */ D(s, {
-							title: A("devportal.revenue.netRevenue", "Net Revenue"),
-							value: `$${Q.totalNetRevenue.toLocaleString()}`,
-							icon: /* @__PURE__ */ D(se, { size: 20 })
-						}),
-						/* @__PURE__ */ D(s, {
-							title: A("devportal.revenue.pendingBalance", "Pending Balance"),
-							value: `$${Q.pendingBalance.toLocaleString()}`,
-							icon: /* @__PURE__ */ D(C, { size: 20 }),
-							description: Q.nextPayoutDate ? `${A("devportal.revenue.nextPayout", "Next payout")} ${new Date(Q.nextPayoutDate).toLocaleDateString()}` : A("devportal.revenue.noPayoutScheduled", "No payout scheduled")
-						}),
-						/* @__PURE__ */ D(s, {
-							title: A("devportal.revenue.platformFees", "Platform Fees"),
-							value: `$${Q.totalPlatformFees.toLocaleString()}`,
-							icon: /* @__PURE__ */ D(oe, { size: 20 }),
-							description: `${Q.totalRefundsCount} ${A("devportal.revenue.refunds", "refunds")}`
-						})
-					]
+			be && !Q ? /* @__PURE__ */ E("div", {
+				className: "flex items-center justify-center py-16 text-text-secondary",
+				children: /* @__PURE__ */ E(w, { className: "h-8 w-8 animate-spin" })
+			}) : Q ? /* @__PURE__ */ D(ue, { children: [
+				/* @__PURE__ */ E(de, {
+					className: "mb-6",
+					children: /* @__PURE__ */ D(re, {
+						columns: 4,
+						children: [
+							/* @__PURE__ */ E(s, {
+								title: A("devportal.revenue.grossRevenue", "Gross Revenue"),
+								value: `$${Q.totalGrossRevenue.toLocaleString()}`,
+								icon: /* @__PURE__ */ E(S, { size: 20 })
+							}),
+							/* @__PURE__ */ E(s, {
+								title: A("devportal.revenue.netRevenue", "Net Revenue"),
+								value: `$${Q.totalNetRevenue.toLocaleString()}`,
+								icon: /* @__PURE__ */ E(T, { size: 20 })
+							}),
+							/* @__PURE__ */ E(s, {
+								title: A("devportal.revenue.pendingBalance", "Pending Balance"),
+								value: `$${Q.pendingBalance.toLocaleString()}`,
+								icon: /* @__PURE__ */ E(x, { size: 20 }),
+								description: Q.nextPayoutDate ? `${A("devportal.revenue.nextPayout", "Next payout")} ${new Date(Q.nextPayoutDate).toLocaleDateString()}` : A("devportal.revenue.noPayoutScheduled", "No payout scheduled")
+							}),
+							/* @__PURE__ */ E(s, {
+								title: A("devportal.revenue.platformFees", "Platform Fees"),
+								value: `$${Q.totalPlatformFees.toLocaleString()}`,
+								icon: /* @__PURE__ */ E(ce, { size: 20 }),
+								description: `${Q.totalRefundsCount} ${A("devportal.revenue.refunds", "refunds")}`
+							})
+						]
+					})
 				}),
-				/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ D("div", {
 					className: "grid gap-6 xl:grid-cols-2",
-					children: [/* @__PURE__ */ D(o, {
+					children: [/* @__PURE__ */ E(o, {
 						title: A("devportal.revenue.revenueTrend", "Revenue trend"),
-						children: /* @__PURE__ */ D("div", {
-							className: "rounded-lg border bg-card p-4",
-							children: /* @__PURE__ */ D(d, {
+						children: /* @__PURE__ */ E(O, {
+							treatment: "insight",
+							className: "p-4",
+							children: /* @__PURE__ */ E(d, {
 								width: "100%",
 								height: 300,
-								children: /* @__PURE__ */ O(g, {
+								children: /* @__PURE__ */ D(ae, {
 									data: $,
 									children: [
-										/* @__PURE__ */ D(f, {
+										/* @__PURE__ */ E(f, {
 											strokeDasharray: "3 3",
 											stroke: "var(--color-chart-grid)"
 										}),
-										/* @__PURE__ */ D(m, {
+										/* @__PURE__ */ E(m, {
 											dataKey: "date",
 											stroke: "var(--color-chart-axis)",
 											fontSize: 12
 										}),
-										/* @__PURE__ */ D(h, {
+										/* @__PURE__ */ E(h, {
 											stroke: "var(--color-chart-axis)",
 											fontSize: 12
 										}),
-										/* @__PURE__ */ D(u, { contentStyle: {
+										/* @__PURE__ */ E(u, { contentStyle: {
 											backgroundColor: "var(--color-card)",
 											border: "1px solid var(--color-border-default)",
 											borderRadius: 12
 										} }),
-										/* @__PURE__ */ D(p, {
+										/* @__PURE__ */ E(p, {
 											type: "monotone",
 											dataKey: "grossRevenue",
 											stroke: k.primary,
 											strokeWidth: 2,
 											dot: !1
 										}),
-										/* @__PURE__ */ D(p, {
+										/* @__PURE__ */ E(p, {
 											type: "monotone",
 											dataKey: "netRevenue",
 											stroke: k.secondary,
@@ -393,31 +399,32 @@ var k = {
 								})
 							})
 						})
-					}), /* @__PURE__ */ D(o, {
+					}), /* @__PURE__ */ E(o, {
 						title: A("devportal.revenue.topApps", "Top applications by revenue"),
-						children: Q.topApps.length > 0 ? /* @__PURE__ */ D("div", {
+						children: Q.topApps.length > 0 ? /* @__PURE__ */ E("div", {
 							className: "space-y-2",
-							children: Q.topApps.map((e) => /* @__PURE__ */ D("div", {
-								className: "rounded-lg border bg-card p-4",
-								children: /* @__PURE__ */ O("div", {
+							children: Q.topApps.map((e) => /* @__PURE__ */ E(O, {
+								treatment: "insight",
+								className: "border-border-seam p-4",
+								children: /* @__PURE__ */ D("div", {
 									className: "flex items-start justify-between gap-3",
-									children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+									children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
 										className: "font-medium",
 										children: e.applicationName
-									}), /* @__PURE__ */ O("p", {
-										className: "text-sm text-muted-foreground",
+									}), /* @__PURE__ */ D("p", {
+										className: "text-sm text-text-secondary",
 										children: [
 											e.salesCount,
 											" ",
 											A("devportal.revenue.sales", "sales")
 										]
-									})] }), /* @__PURE__ */ O("div", {
+									})] }), /* @__PURE__ */ D("div", {
 										className: "text-right",
-										children: [/* @__PURE__ */ O("p", {
+										children: [/* @__PURE__ */ D("p", {
 											className: "font-semibold",
 											children: ["$", e.grossRevenue.toLocaleString()]
-										}), /* @__PURE__ */ O("p", {
-											className: "text-sm text-muted-foreground",
+										}), /* @__PURE__ */ D("p", {
+											className: "text-sm text-text-secondary",
 											children: [
 												A("devportal.revenue.net", "Net"),
 												" $",
@@ -427,42 +434,44 @@ var k = {
 									})]
 								})
 							}, e.applicationId))
-						}) : /* @__PURE__ */ D(n, {
-							icon: /* @__PURE__ */ D(x, { size: 24 }),
+						}) : /* @__PURE__ */ E(n, {
+							illustration: "empty-data",
+							icon: /* @__PURE__ */ E(y, { size: 24 }),
 							title: A("devportal.revenue.noLeadersTitle", "No revenue leaders yet"),
 							description: A("devportal.revenue.noLeadersDescription", "Top-performing applications will appear here once revenue is recorded.")
 						})
 					})]
 				}),
-				/* @__PURE__ */ D(o, {
+				/* @__PURE__ */ E(o, {
 					title: A("devportal.revenue.salesVolume", "Sales volume"),
-					children: /* @__PURE__ */ D("div", {
-						className: "rounded-lg border bg-card p-4",
-						children: /* @__PURE__ */ D(d, {
+					children: /* @__PURE__ */ E(O, {
+						treatment: "insight",
+						className: "p-4",
+						children: /* @__PURE__ */ E(d, {
 							width: "100%",
 							height: 280,
-							children: /* @__PURE__ */ O(_, {
+							children: /* @__PURE__ */ D(oe, {
 								data: $,
 								children: [
-									/* @__PURE__ */ D(f, {
+									/* @__PURE__ */ E(f, {
 										strokeDasharray: "3 3",
 										stroke: "var(--color-chart-grid)"
 									}),
-									/* @__PURE__ */ D(m, {
+									/* @__PURE__ */ E(m, {
 										dataKey: "date",
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ D(h, {
+									/* @__PURE__ */ E(h, {
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ D(u, { contentStyle: {
+									/* @__PURE__ */ E(u, { contentStyle: {
 										backgroundColor: "var(--color-card)",
 										border: "1px solid var(--color-border-default)",
 										borderRadius: 12
 									} }),
-									/* @__PURE__ */ D(ie, {
+									/* @__PURE__ */ E(ie, {
 										dataKey: "salesCount",
 										fill: k.tertiary,
 										radius: [
@@ -477,12 +486,12 @@ var k = {
 						})
 					})
 				}),
-				/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ D("div", {
 					className: "grid gap-6 xl:grid-cols-2",
-					children: [/* @__PURE__ */ D(o, {
+					children: [/* @__PURE__ */ E(o, {
 						title: A("devportal.revenue.recentSales", "Recent sales"),
-						children: /* @__PURE__ */ D(l, {
-							data: be,
+						children: /* @__PURE__ */ E(l, {
+							data: Se,
 							keyField: "id",
 							columns: [
 								{
@@ -503,17 +512,17 @@ var k = {
 								{
 									key: "status",
 									header: A("devportal.revenue.status", "Status"),
-									render: (e) => /* @__PURE__ */ D(c, {
+									render: (e) => /* @__PURE__ */ E(c, {
 										status: e.status,
 										type: "app"
 									})
 								}
 							]
 						})
-					}), /* @__PURE__ */ D(o, {
+					}), /* @__PURE__ */ E(o, {
 						title: A("devportal.revenue.payoutHistory", "Payout history"),
-						children: /* @__PURE__ */ D(l, {
-							data: xe,
+						children: /* @__PURE__ */ E(l, {
+							data: Ce,
 							keyField: "id",
 							columns: [
 								{
@@ -529,7 +538,7 @@ var k = {
 								{
 									key: "status",
 									header: A("devportal.revenue.status", "Status"),
-									render: (e) => /* @__PURE__ */ D(c, {
+									render: (e) => /* @__PURE__ */ E(c, {
 										status: e.status,
 										type: "app"
 									})
@@ -538,19 +547,21 @@ var k = {
 						})
 					})]
 				})
-			] }) : /* @__PURE__ */ D(n, {
-				icon: /* @__PURE__ */ D(w, { size: 32 }),
+			] }) : /* @__PURE__ */ E(n, {
+				illustration: "empty-data",
+				icon: /* @__PURE__ */ E(S, { size: 32 }),
 				title: A("devportal.revenue.noDataTitle", "No revenue data yet"),
 				description: A("devportal.revenue.noDataDescription", "Revenue metrics will appear after this organization starts recording marketplace sales.")
 			})
 		]
-	}) : /* @__PURE__ */ D(a, {
+	}) : /* @__PURE__ */ E(a, {
 		title: A("devportal.revenue.title", "Revenue"),
 		description: A("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ D(n, {
-			icon: /* @__PURE__ */ D(x, {
+		children: /* @__PURE__ */ E(n, {
+			illustration: "empty-people",
+			icon: /* @__PURE__ */ E(y, {
 				size: 32,
-				className: "text-muted-foreground"
+				className: "text-text-secondary"
 			}),
 			title: A("devportal.revenue.selectOrgTitle", "Select an organization"),
 			description: A("devportal.revenue.selectOrgHint", "Use the organization switcher in the nav bar above to choose which organization's revenue to view.")