@burdenoff/microfe-devportal 2026.611.2 → 2026.614.1

package/dist/devportal/pages/RevenueDashboardPage.js

@@ -1,87 +1,97 @@
-import { EmptyState as e } from "../components/EmptyState.js";
-import { PageLayout as t, PageSection as n } from "../components/PageLayout.js";
-import { StatCard as r, StatCardGrid as ee } from "../components/StatCard.js";
-import { StatusBadge as i } from "../components/StatusBadge.js";
-import { DataTable as a } from "../components/DataTable.js";
-import { useCreateBillingAccountMutation as te, useGetMyOrganizationsQuery as ne, useGetRevenueDashboardDataQuery as o, useLinkDevOrgBillingAccountMutation as s } from "../../generated/global-operations.js";
-import { getErrorMessage as c } from "../hooks/useGraphQL.js";
+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 { useCreateBillingAccountMutation as ee, useGetBillingAccountsByOrgQuery as te, useGetMyOrganizationsQuery as ne, useGetRevenueDashboardDataQuery as re, useLinkDevOrgBillingAccountMutation as ie } from "../../generated/global-operations.js";
+import { getErrorMessage as r } from "../hooks/useGraphQL.js";
+import { PageLayout as i, PageSection as a } from "../components/PageLayout.js";
+import { StatCard as o, StatCardGrid as ae } from "../components/StatCard.js";
+import { StatusBadge as s } from "../components/StatusBadge.js";
+import { DataTable as c } from "../components/DataTable.js";
 import "../hooks/index.js";
 import { Tooltip as l } from "../../node_modules/recharts/es6/component/Tooltip.js";
 import { ResponsiveContainer as u } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
-import { Bar as d } 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 g } from "../../node_modules/recharts/es6/chart/LineChart.js";
-import { BarChart as re } from "../../node_modules/recharts/es6/chart/BarChart.js";
-import { useTr as ie } from "../utils/i18n.js";
-import { useEffect as _, useMemo as v, useState as y } from "react";
-import { AlertCircle as b, ArrowDownToLine as ae, Building2 as x, CreditCard as oe, DollarSign as S, Link2 as C, Loader2 as w, Wallet as T } from "lucide-react";
-import { useSearchParams as E } from "react-router-dom";
-import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { Bar as oe } from "../../node_modules/recharts/es6/cartesian/Bar.js";
+import { CartesianGrid as d } from "../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { Line as f } from "../../node_modules/recharts/es6/cartesian/Line.js";
+import { XAxis as p } from "../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as m } from "../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { LineChart as se } from "../../node_modules/recharts/es6/chart/LineChart.js";
+import { BarChart as ce } from "../../node_modules/recharts/es6/chart/BarChart.js";
+import { useTr as le } from "../utils/i18n.js";
+import { useMemo as h, useState as g } from "react";
+import { AlertCircle as _, ArrowDownToLine as ue, Building2 as v, Check as y, CreditCard as b, DollarSign as x, Link2 as S, Loader2 as C, Plus as w, Wallet as de } from "lucide-react";
+import { useSearchParams as fe } from "react-router-dom";
+import { Fragment as pe, jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region src/devportal/pages/RevenueDashboardPage.tsx
-var A = {
+var D = {
 	primary: "var(--color-chart-1)",
 	secondary: "var(--color-chart-2)",
 	tertiary: "var(--color-chart-4)"
-}, se = {
+}, me = {
 	"30d": 30,
 	"90d": 90,
 	"12m": 365
-}, j = () => {
-	let j = ie(), [M, ce] = y("90d"), [N, P] = y(""), [F, I] = y(!1), [L, R] = y(null), [z] = te(), [B] = s(), [V] = E(), H = v(() => /* @__PURE__ */ new Date(), []), U = V.get("org"), W = v(() => {
-		let e = new Date(H);
-		return e.setDate(e.getDate() - se[M]), e.toISOString();
-	}, [H, M]), { data: G, loading: le, error: K } = ne({ fetchPolicy: "cache-and-network" }), { data: q, loading: J, error: Y } = o({
+}, O = () => {
+	let O = le(), { activeOrgId: k, currentUser: he } = e(), [A, ge] = g("90d"), [j, M] = g(!1), [N, P] = g(null), [_e] = ee(), [F] = ie(), [I, L] = g(!1), [R, z] = g(null), [ve] = fe(), B = h(() => /* @__PURE__ */ new Date(), []), { data: ye, loading: V } = te({
+		fetchPolicy: "cache-and-network",
+		skip: !k
+	}), be = h(() => {
+		let e = new Date(B);
+		return e.setDate(e.getDate() - me[A]), e.toISOString();
+	}, [B, A]), { data: H, loading: xe, error: U } = ne({ fetchPolicy: "cache-and-network" }), { data: W, loading: Se, error: G } = re({
 		variables: {
-			organizationId: N,
+			organizationId: k ?? "",
 			period: "monthly",
-			startDate: W,
-			endDate: H.toISOString(),
+			startDate: be,
+			endDate: B.toISOString(),
 			salesLimit: 10,
 			salesOffset: 0,
 			payoutsLimit: 10,
 			payoutsOffset: 0
 		},
-		skip: !N,
+		skip: !k,
 		fetchPolicy: "cache-and-network"
-	}), X = v(() => G?.myDeveloperOrganizations?.map((e) => e) ?? [], [G?.myDeveloperOrganizations]);
-	_(() => {
-		if (!N) {
-			if (U && X.some((e) => e.id === U)) {
-				P(U);
-				return;
-			}
-			X.length === 1 && P(X[0]?.id ?? "");
-		}
-	}, [
-		X,
-		U,
-		N
-	]);
-	let Z = X.find((e) => e.id === N), ue = async () => {
-		if (N) {
-			I(!0), R(null);
+	}), K = h(() => H?.myDeveloperOrganizations?.map((e) => e) ?? [], [H?.myDeveloperOrganizations]).find((e) => e.id === k), q = ye?.getBillingAccountsByOrg ?? [], J = q.find((e) => e.id === K?.billingAccountId) ?? null, Y = () => {
+		!V && q.length > 0 ? (z(K?.billingAccountId ?? q.find((e) => e.isDefault)?.id ?? q[0]?.id ?? null), L(!0)) : X();
+	}, X = async () => {
+		if (k) {
+			M(!0), P(null);
 			try {
-				let e = (await z({ variables: { input: {
-					name: Z?.name ?? N,
-					email: ""
+				let e = (await _e({ variables: { input: {
+					name: K?.name ?? k,
+					email: he?.email ?? ""
 				} } })).data?.createBillingAccount?.id;
-				e && await B({
+				e && await F({
 					variables: {
-						organizationId: N,
+						organizationId: k,
 						billingAccountId: e
 					},
 					refetchQueries: ["GetMyOrganizations"]
 				});
 			} catch (e) {
-				R(e instanceof Error ? e.message : "Failed to link billing account");
+				P(e instanceof Error ? e.message : "Failed to link billing account");
 			} finally {
-				I(!1);
+				M(!1), L(!1);
 			}
 		}
-	}, Q = q?.developerOrgRevenueSummary, de = [...q?.developerOrgRevenueAnalytics ?? []].sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime()), fe = q?.developerOrgSales?.edges?.map((e) => e.node) ?? [], pe = q?.developerOrgPayouts?.edges?.map((e) => e.node) ?? [], $ = de.map((e) => ({
+	}, Z = async () => {
+		if (!(!k || !R)) {
+			M(!0), P(null);
+			try {
+				await F({
+					variables: {
+						organizationId: k,
+						billingAccountId: R
+					},
+					refetchQueries: ["GetMyOrganizations"]
+				}), L(!1);
+			} catch (e) {
+				P(e instanceof Error ? e.message : "Failed to link billing account");
+			} finally {
+				M(!1);
+			}
+		}
+	}, Q = W?.developerOrgRevenueSummary, Ce = [...W?.developerOrgRevenueAnalytics ?? []].sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime()), we = W?.developerOrgSales?.edges?.map((e) => e.node) ?? [], Te = W?.developerOrgPayouts?.edges?.map((e) => e.node) ?? [], $ = Ce.map((e) => ({
 		date: new Date(e.date).toLocaleDateString(void 0, {
 			month: "short",
 			day: "numeric"
@@ -92,370 +102,510 @@ var A = {
 		refunds: e.refunds,
 		salesCount: e.salesCount
 	}));
-	return le && !G ? /* @__PURE__ */ O(t, {
-		title: j("devportal.revenue.title", "Revenue"),
-		description: j("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ O("div", {
+	return xe && !H ? /* @__PURE__ */ T(i, {
+		title: O("devportal.revenue.title", "Revenue"),
+		description: O("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
+		children: /* @__PURE__ */ T("div", {
 			className: "flex items-center justify-center py-16 text-muted-foreground",
-			children: /* @__PURE__ */ O(w, { className: "h-8 w-8 animate-spin" })
+			children: /* @__PURE__ */ T(C, { className: "h-8 w-8 animate-spin" })
 		})
-	}) : K ? /* @__PURE__ */ O(t, {
-		title: j("devportal.revenue.title", "Revenue"),
-		description: j("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ O(e, {
-			icon: /* @__PURE__ */ O(b, {
+	}) : U ? /* @__PURE__ */ T(i, {
+		title: O("devportal.revenue.title", "Revenue"),
+		description: O("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
+		children: /* @__PURE__ */ T(n, {
+			icon: /* @__PURE__ */ T(_, {
 				size: 32,
 				className: "text-status-error-text"
 			}),
-			title: j("devportal.revenue.errorLoadOrgs", "Unable to load organizations"),
-			description: c(K)
+			title: O("devportal.revenue.errorLoadOrgs", "Unable to load organizations"),
+			description: r(U)
 		})
-	}) : N ? Y ? /* @__PURE__ */ O(t, {
-		title: j("devportal.revenue.title", "Revenue"),
-		description: j("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ O(e, {
-			icon: /* @__PURE__ */ O(b, {
+	}) : k ? G ? /* @__PURE__ */ T(i, {
+		title: O("devportal.revenue.title", "Revenue"),
+		description: O("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
+		children: /* @__PURE__ */ T(n, {
+			icon: /* @__PURE__ */ T(_, {
 				size: 32,
 				className: "text-status-error-text"
 			}),
-			title: j("devportal.revenue.errorLoadData", "Unable to load revenue data"),
-			description: c(Y)
+			title: O("devportal.revenue.errorLoadData", "Unable to load revenue data"),
+			description: r(G)
 		})
-	}) : /* @__PURE__ */ k(t, {
-		title: j("devportal.revenue.title", "Revenue"),
-		description: Z ? `${j("devportal.revenue.financialPerformanceFor", "Financial performance for")} ${Z.name}` : j("devportal.revenue.shortDescription", "Track revenue, sales, and payouts"),
-		actions: /* @__PURE__ */ k("div", {
+	}) : /* @__PURE__ */ E(i, {
+		title: O("devportal.revenue.title", "Revenue"),
+		description: K ? `${O("devportal.revenue.financialPerformanceFor", "Financial performance for")} ${K.name}` : O("devportal.revenue.shortDescription", "Track revenue, sales, and payouts"),
+		actions: /* @__PURE__ */ T("div", {
 			className: "flex flex-wrap gap-2",
-			children: [/* @__PURE__ */ O("select", {
-				value: N,
-				onChange: (e) => P(e.target.value),
-				"aria-label": j("devportal.revenue.selectOrgAria", "Select organization"),
-				className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
-				children: X.map((e) => /* @__PURE__ */ O("option", {
-					value: e.id,
-					children: e.name
-				}, e.id))
-			}), /* @__PURE__ */ k("select", {
-				value: M,
-				onChange: (e) => ce(e.target.value),
-				"aria-label": j("devportal.revenue.selectRangeAria", "Select time range"),
+			children: /* @__PURE__ */ E("select", {
+				value: A,
+				onChange: (e) => ge(e.target.value),
+				"aria-label": O("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",
 				children: [
-					/* @__PURE__ */ O("option", {
+					/* @__PURE__ */ T("option", {
 						value: "30d",
-						children: j("devportal.revenue.range.30d", "Last 30 days")
+						children: O("devportal.revenue.range.30d", "Last 30 days")
 					}),
-					/* @__PURE__ */ O("option", {
+					/* @__PURE__ */ T("option", {
 						value: "90d",
-						children: j("devportal.revenue.range.90d", "Last 90 days")
+						children: O("devportal.revenue.range.90d", "Last 90 days")
 					}),
-					/* @__PURE__ */ O("option", {
+					/* @__PURE__ */ T("option", {
 						value: "12m",
-						children: j("devportal.revenue.range.12m", "Last 12 months")
+						children: O("devportal.revenue.range.12m", "Last 12 months")
 					})
 				]
-			})]
+			})
 		}),
-		children: [Z && !Z.billingAccountId && /* @__PURE__ */ k("div", {
-			className: "mb-6 rounded-lg border border-border-subtle bg-status-info-bg-subtle p-4 flex items-start gap-3",
-			children: [
-				/* @__PURE__ */ O(C, {
-					size: 20,
-					className: "text-accent-blue flex-shrink-0 mt-0.5"
-				}),
-				/* @__PURE__ */ k("div", {
-					className: "flex-1 min-w-0",
+		children: [
+			K && !K.billingAccountId && /* @__PURE__ */ E("div", {
+				className: "mb-6 rounded-lg border border-border-subtle bg-status-info-bg-subtle p-4 flex flex-col gap-3",
+				children: [/* @__PURE__ */ E("div", {
+					className: "flex items-start gap-3",
 					children: [
-						/* @__PURE__ */ O("p", {
-							className: "text-sm font-medium text-status-info-text",
-							children: j("devportal.revenue.billingNotLinkedTitle", "Link a billing account to receive store revenue")
+						/* @__PURE__ */ T(S, {
+							size: 20,
+							className: "text-accent-blue flex-shrink-0 mt-0.5"
 						}),
-						/* @__PURE__ */ O("p", {
-							className: "mt-1 text-sm text-status-info-text",
-							children: j("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.")
+						/* @__PURE__ */ E("div", {
+							className: "flex-1 min-w-0",
+							children: [
+								/* @__PURE__ */ T("p", {
+									className: "text-sm font-medium text-status-info-text",
+									children: O("devportal.revenue.billingNotLinkedTitle", "Link a billing account to receive store revenue")
+								}),
+								/* @__PURE__ */ T("p", {
+									className: "mt-1 text-sm text-status-info-text",
+									children: O("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.")
+								}),
+								N && /* @__PURE__ */ T("p", {
+									className: "mt-2 text-sm text-status-error-text",
+									children: N
+								})
+							]
 						}),
-						L && /* @__PURE__ */ O("p", {
-							className: "mt-2 text-sm text-status-error-text",
-							children: L
+						/* @__PURE__ */ E("button", {
+							type: "button",
+							onClick: Y,
+							disabled: j || V,
+							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: [j || V ? /* @__PURE__ */ T(C, {
+								size: 14,
+								className: "animate-spin"
+							}) : /* @__PURE__ */ T(S, { size: 14 }), j ? O("devportal.revenue.linking", "Linking...") : O("devportal.revenue.linkBillingAccount", "Link Billing Account")]
 						})
 					]
-				}),
-				/* @__PURE__ */ k("button", {
-					type: "button",
-					onClick: ue,
-					disabled: F,
-					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: [F ? /* @__PURE__ */ O(w, {
-						size: 14,
-						className: "animate-spin"
-					}) : /* @__PURE__ */ O(C, { size: 14 }), F ? j("devportal.revenue.linking", "Linking...") : j("devportal.revenue.linkBillingAccount", "Link Billing Account")]
-				})
-			]
-		}), J && !Q ? /* @__PURE__ */ O("div", {
-			className: "flex items-center justify-center py-16 text-muted-foreground",
-			children: /* @__PURE__ */ O(w, { className: "h-8 w-8 animate-spin" })
-		}) : Q ? /* @__PURE__ */ k(D, { children: [
-			/* @__PURE__ */ k(ee, {
-				columns: 4,
-				children: [
-					/* @__PURE__ */ O(r, {
-						title: j("devportal.revenue.grossRevenue", "Gross Revenue"),
-						value: `$${Q.totalGrossRevenue.toLocaleString()}`,
-						icon: /* @__PURE__ */ O(S, { size: 20 })
-					}),
-					/* @__PURE__ */ O(r, {
-						title: j("devportal.revenue.netRevenue", "Net Revenue"),
-						value: `$${Q.totalNetRevenue.toLocaleString()}`,
-						icon: /* @__PURE__ */ O(T, { size: 20 })
-					}),
-					/* @__PURE__ */ O(r, {
-						title: j("devportal.revenue.pendingBalance", "Pending Balance"),
-						value: `$${Q.pendingBalance.toLocaleString()}`,
-						icon: /* @__PURE__ */ O(oe, { size: 20 }),
-						description: Q.nextPayoutDate ? `${j("devportal.revenue.nextPayout", "Next payout")} ${new Date(Q.nextPayoutDate).toLocaleDateString()}` : j("devportal.revenue.noPayoutScheduled", "No payout scheduled")
-					}),
-					/* @__PURE__ */ O(r, {
-						title: j("devportal.revenue.platformFees", "Platform Fees"),
-						value: `$${Q.totalPlatformFees.toLocaleString()}`,
-						icon: /* @__PURE__ */ O(ae, { size: 20 }),
-						description: `${Q.totalRefundsCount} ${j("devportal.revenue.refunds", "refunds")}`
-					})
-				]
+				}), I && q.length > 0 && /* @__PURE__ */ E("div", {
+					className: "rounded-lg border border-border bg-card p-4 ml-8 space-y-3",
+					children: [
+						/* @__PURE__ */ T("p", {
+							className: "text-sm font-medium",
+							children: O("devportal.revenue.chooseBillingAccount", "Choose a billing account to link")
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "space-y-2",
+							children: [q.map((e) => /* @__PURE__ */ E("button", {
+								type: "button",
+								onClick: () => z(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", R === e.id ? "border-primary bg-primary/5 text-foreground" : "border-border hover:bg-accent text-foreground"),
+								children: [/* @__PURE__ */ T(y, {
+									size: 14,
+									className: t("flex-shrink-0", R === e.id ? "opacity-100 text-primary" : "opacity-0")
+								}), /* @__PURE__ */ E("div", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ T("p", {
+										className: "font-medium truncate",
+										children: e.name
+									}), e.isDefault && /* @__PURE__ */ T("p", {
+										className: "text-xs text-muted-foreground",
+										children: O("devportal.revenue.defaultAccount", "Default")
+									})]
+								})]
+							}, e.id)), /* @__PURE__ */ E("button", {
+								type: "button",
+								onClick: () => z(null),
+								className: t("flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm text-left transition-colors", R === null ? "border-primary bg-primary/5 text-foreground" : "border-border hover:bg-accent text-foreground"),
+								children: [/* @__PURE__ */ T(y, {
+									size: 14,
+									className: t("flex-shrink-0", R === null ? "opacity-100 text-primary" : "opacity-0")
+								}), /* @__PURE__ */ E("div", {
+									className: "flex-1",
+									children: [/* @__PURE__ */ E("p", {
+										className: "font-medium flex items-center gap-1.5",
+										children: [/* @__PURE__ */ T(w, { size: 13 }), O("devportal.revenue.createNewBillingAccount", "Create a new billing account")]
+									}), /* @__PURE__ */ T("p", {
+										className: "text-xs text-muted-foreground",
+										children: O("devportal.revenue.createNewBillingAccountDesc", "A fresh billing account named after this organization")
+									})]
+								})]
+							})]
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "flex items-center justify-end gap-2 pt-1",
+							children: [/* @__PURE__ */ T("button", {
+								type: "button",
+								onClick: () => {
+									L(!1), P(null);
+								},
+								className: "rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent transition-colors",
+								children: O("devportal.cancel", "Cancel")
+							}), /* @__PURE__ */ E("button", {
+								type: "button",
+								disabled: j,
+								onClick: () => R ? Z() : X(),
+								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: [j ? /* @__PURE__ */ T(C, {
+									size: 13,
+									className: "animate-spin"
+								}) : /* @__PURE__ */ T(S, { size: 13 }), O("devportal.revenue.confirm", "Confirm")]
+							})]
+						})
+					]
+				})]
+			}),
+			K?.billingAccountId && /* @__PURE__ */ E("div", {
+				className: "mb-6 rounded-lg border border-border bg-card p-3 flex flex-col gap-3",
+				children: [/* @__PURE__ */ E("div", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ T(b, {
+							size: 16,
+							className: "text-muted-foreground flex-shrink-0"
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ T("p", {
+								className: "text-sm font-medium truncate",
+								children: J?.name ?? O("devportal.revenue.billingAccount", "Billing account")
+							}), /* @__PURE__ */ T("p", {
+								className: "text-xs text-muted-foreground truncate",
+								children: J ? `${J.currency}${J.email ? ` · ${J.email}` : ""}` : K.billingAccountId
+							})]
+						}),
+						!I && /* @__PURE__ */ T("button", {
+							type: "button",
+							onClick: Y,
+							disabled: V,
+							className: "text-xs text-muted-foreground hover:text-foreground transition-colors flex-shrink-0 disabled:opacity-50",
+							children: O("devportal.revenue.changeBillingAccount", "Change")
+						})
+					]
+				}), I && q.length > 0 && /* @__PURE__ */ E("div", {
+					className: "rounded-lg border border-border bg-background p-4 space-y-3",
+					children: [
+						/* @__PURE__ */ T("p", {
+							className: "text-sm font-medium",
+							children: O("devportal.revenue.chooseBillingAccount", "Choose a billing account to link")
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "space-y-2",
+							children: [q.map((e) => /* @__PURE__ */ E("button", {
+								type: "button",
+								onClick: () => z(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", R === e.id ? "border-primary bg-primary/5 text-foreground" : "border-border hover:bg-accent text-foreground"),
+								children: [/* @__PURE__ */ T(y, {
+									size: 14,
+									className: t("flex-shrink-0", R === e.id ? "opacity-100 text-primary" : "opacity-0")
+								}), /* @__PURE__ */ E("div", {
+									className: "flex-1 min-w-0",
+									children: [/* @__PURE__ */ T("p", {
+										className: "font-medium truncate",
+										children: e.name
+									}), e.isDefault && /* @__PURE__ */ T("p", {
+										className: "text-xs text-muted-foreground",
+										children: O("devportal.revenue.defaultAccount", "Default")
+									})]
+								})]
+							}, e.id)), /* @__PURE__ */ E("button", {
+								type: "button",
+								onClick: () => z(null),
+								className: t("flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm text-left transition-colors", R === null ? "border-primary bg-primary/5 text-foreground" : "border-border hover:bg-accent text-foreground"),
+								children: [/* @__PURE__ */ T(y, {
+									size: 14,
+									className: t("flex-shrink-0", R === null ? "opacity-100 text-primary" : "opacity-0")
+								}), /* @__PURE__ */ E("div", {
+									className: "flex-1",
+									children: [/* @__PURE__ */ E("p", {
+										className: "font-medium flex items-center gap-1.5",
+										children: [/* @__PURE__ */ T(w, { size: 13 }), O("devportal.revenue.createNewBillingAccount", "Create a new billing account")]
+									}), /* @__PURE__ */ T("p", {
+										className: "text-xs text-muted-foreground",
+										children: O("devportal.revenue.createNewBillingAccountDesc", "A fresh billing account named after this organization")
+									})]
+								})]
+							})]
+						}),
+						/* @__PURE__ */ E("div", {
+							className: "flex items-center justify-end gap-2 pt-1",
+							children: [/* @__PURE__ */ T("button", {
+								type: "button",
+								onClick: () => {
+									L(!1), P(null);
+								},
+								className: "rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent transition-colors",
+								children: O("devportal.cancel", "Cancel")
+							}), /* @__PURE__ */ E("button", {
+								type: "button",
+								disabled: j,
+								onClick: () => R ? void Z() : void X(),
+								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: [j ? /* @__PURE__ */ T(C, {
+									size: 13,
+									className: "animate-spin"
+								}) : /* @__PURE__ */ T(S, { size: 13 }), O("devportal.revenue.confirm", "Confirm")]
+							})]
+						}),
+						N && /* @__PURE__ */ T("p", {
+							className: "text-xs text-status-error-text",
+							children: N
+						})
+					]
+				})]
 			}),
-			/* @__PURE__ */ k("div", {
-				className: "grid gap-6 xl:grid-cols-2",
-				children: [/* @__PURE__ */ O(n, {
-					title: j("devportal.revenue.revenueTrend", "Revenue trend"),
-					children: /* @__PURE__ */ O("div", {
+			Se && !Q ? /* @__PURE__ */ T("div", {
+				className: "flex items-center justify-center py-16 text-muted-foreground",
+				children: /* @__PURE__ */ T(C, { className: "h-8 w-8 animate-spin" })
+			}) : Q ? /* @__PURE__ */ E(pe, { children: [
+				/* @__PURE__ */ E(ae, {
+					columns: 4,
+					children: [
+						/* @__PURE__ */ T(o, {
+							title: O("devportal.revenue.grossRevenue", "Gross Revenue"),
+							value: `$${Q.totalGrossRevenue.toLocaleString()}`,
+							icon: /* @__PURE__ */ T(x, { size: 20 })
+						}),
+						/* @__PURE__ */ T(o, {
+							title: O("devportal.revenue.netRevenue", "Net Revenue"),
+							value: `$${Q.totalNetRevenue.toLocaleString()}`,
+							icon: /* @__PURE__ */ T(de, { size: 20 })
+						}),
+						/* @__PURE__ */ T(o, {
+							title: O("devportal.revenue.pendingBalance", "Pending Balance"),
+							value: `$${Q.pendingBalance.toLocaleString()}`,
+							icon: /* @__PURE__ */ T(b, { size: 20 }),
+							description: Q.nextPayoutDate ? `${O("devportal.revenue.nextPayout", "Next payout")} ${new Date(Q.nextPayoutDate).toLocaleDateString()}` : O("devportal.revenue.noPayoutScheduled", "No payout scheduled")
+						}),
+						/* @__PURE__ */ T(o, {
+							title: O("devportal.revenue.platformFees", "Platform Fees"),
+							value: `$${Q.totalPlatformFees.toLocaleString()}`,
+							icon: /* @__PURE__ */ T(ue, { size: 20 }),
+							description: `${Q.totalRefundsCount} ${O("devportal.revenue.refunds", "refunds")}`
+						})
+					]
+				}),
+				/* @__PURE__ */ E("div", {
+					className: "grid gap-6 xl:grid-cols-2",
+					children: [/* @__PURE__ */ T(a, {
+						title: O("devportal.revenue.revenueTrend", "Revenue trend"),
+						children: /* @__PURE__ */ T("div", {
+							className: "rounded-lg border bg-card p-4",
+							children: /* @__PURE__ */ T(u, {
+								width: "100%",
+								height: 300,
+								children: /* @__PURE__ */ E(se, {
+									data: $,
+									children: [
+										/* @__PURE__ */ T(d, {
+											strokeDasharray: "3 3",
+											stroke: "var(--color-chart-grid)"
+										}),
+										/* @__PURE__ */ T(p, {
+											dataKey: "date",
+											stroke: "var(--color-chart-axis)",
+											fontSize: 12
+										}),
+										/* @__PURE__ */ T(m, {
+											stroke: "var(--color-chart-axis)",
+											fontSize: 12
+										}),
+										/* @__PURE__ */ T(l, { contentStyle: {
+											backgroundColor: "var(--color-card)",
+											border: "1px solid var(--color-border-default)",
+											borderRadius: 12
+										} }),
+										/* @__PURE__ */ T(f, {
+											type: "monotone",
+											dataKey: "grossRevenue",
+											stroke: D.primary,
+											strokeWidth: 2,
+											dot: !1
+										}),
+										/* @__PURE__ */ T(f, {
+											type: "monotone",
+											dataKey: "netRevenue",
+											stroke: D.secondary,
+											strokeWidth: 2,
+											dot: !1
+										})
+									]
+								})
+							})
+						})
+					}), /* @__PURE__ */ T(a, {
+						title: O("devportal.revenue.topApps", "Top applications by revenue"),
+						children: Q.topApps.length > 0 ? /* @__PURE__ */ T("div", {
+							className: "space-y-2",
+							children: Q.topApps.map((e) => /* @__PURE__ */ T("div", {
+								className: "rounded-lg border bg-card p-4",
+								children: /* @__PURE__ */ E("div", {
+									className: "flex items-start justify-between gap-3",
+									children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
+										className: "font-medium",
+										children: e.applicationName
+									}), /* @__PURE__ */ E("p", {
+										className: "text-sm text-muted-foreground",
+										children: [
+											e.salesCount,
+											" ",
+											O("devportal.revenue.sales", "sales")
+										]
+									})] }), /* @__PURE__ */ E("div", {
+										className: "text-right",
+										children: [/* @__PURE__ */ E("p", {
+											className: "font-semibold",
+											children: ["$", e.grossRevenue.toLocaleString()]
+										}), /* @__PURE__ */ E("p", {
+											className: "text-sm text-muted-foreground",
+											children: [
+												O("devportal.revenue.net", "Net"),
+												" $",
+												e.netRevenue.toLocaleString()
+											]
+										})]
+									})]
+								})
+							}, e.applicationId))
+						}) : /* @__PURE__ */ T(n, {
+							icon: /* @__PURE__ */ T(v, { size: 24 }),
+							title: O("devportal.revenue.noLeadersTitle", "No revenue leaders yet"),
+							description: O("devportal.revenue.noLeadersDescription", "Top-performing applications will appear here once revenue is recorded.")
+						})
+					})]
+				}),
+				/* @__PURE__ */ T(a, {
+					title: O("devportal.revenue.salesVolume", "Sales volume"),
+					children: /* @__PURE__ */ T("div", {
 						className: "rounded-lg border bg-card p-4",
-						children: /* @__PURE__ */ O(u, {
+						children: /* @__PURE__ */ T(u, {
 							width: "100%",
-							height: 300,
-							children: /* @__PURE__ */ k(g, {
+							height: 280,
+							children: /* @__PURE__ */ E(ce, {
 								data: $,
 								children: [
-									/* @__PURE__ */ O(f, {
+									/* @__PURE__ */ T(d, {
 										strokeDasharray: "3 3",
 										stroke: "var(--color-chart-grid)"
 									}),
-									/* @__PURE__ */ O(m, {
+									/* @__PURE__ */ T(p, {
 										dataKey: "date",
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ O(h, {
+									/* @__PURE__ */ T(m, {
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ O(l, { contentStyle: {
+									/* @__PURE__ */ T(l, { contentStyle: {
 										backgroundColor: "var(--color-card)",
 										border: "1px solid var(--color-border-default)",
 										borderRadius: 12
 									} }),
-									/* @__PURE__ */ O(p, {
-										type: "monotone",
-										dataKey: "grossRevenue",
-										stroke: A.primary,
-										strokeWidth: 2,
-										dot: !1
-									}),
-									/* @__PURE__ */ O(p, {
-										type: "monotone",
-										dataKey: "netRevenue",
-										stroke: A.secondary,
-										strokeWidth: 2,
-										dot: !1
+									/* @__PURE__ */ T(oe, {
+										dataKey: "salesCount",
+										fill: D.tertiary,
+										radius: [
+											6,
+											6,
+											0,
+											0
+										]
 									})
 								]
 							})
 						})
 					})
-				}), /* @__PURE__ */ O(n, {
-					title: j("devportal.revenue.topApps", "Top applications by revenue"),
-					children: Q.topApps.length > 0 ? /* @__PURE__ */ O("div", {
-						className: "space-y-2",
-						children: Q.topApps.map((e) => /* @__PURE__ */ O("div", {
-							className: "rounded-lg border bg-card p-4",
-							children: /* @__PURE__ */ k("div", {
-								className: "flex items-start justify-between gap-3",
-								children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("p", {
-									className: "font-medium",
-									children: e.applicationName
-								}), /* @__PURE__ */ k("p", {
-									className: "text-sm text-muted-foreground",
-									children: [
-										e.salesCount,
-										" ",
-										j("devportal.revenue.sales", "sales")
-									]
-								})] }), /* @__PURE__ */ k("div", {
-									className: "text-right",
-									children: [/* @__PURE__ */ k("p", {
-										className: "font-semibold",
-										children: ["$", e.grossRevenue.toLocaleString()]
-									}), /* @__PURE__ */ k("p", {
-										className: "text-sm text-muted-foreground",
-										children: [
-											j("devportal.revenue.net", "Net"),
-											" $",
-											e.netRevenue.toLocaleString()
-										]
-									})]
-								})]
-							})
-						}, e.applicationId))
-					}) : /* @__PURE__ */ O(e, {
-						icon: /* @__PURE__ */ O(x, { size: 24 }),
-						title: j("devportal.revenue.noLeadersTitle", "No revenue leaders yet"),
-						description: j("devportal.revenue.noLeadersDescription", "Top-performing applications will appear here once revenue is recorded.")
-					})
-				})]
-			}),
-			/* @__PURE__ */ O(n, {
-				title: j("devportal.revenue.salesVolume", "Sales volume"),
-				children: /* @__PURE__ */ O("div", {
-					className: "rounded-lg border bg-card p-4",
-					children: /* @__PURE__ */ O(u, {
-						width: "100%",
-						height: 280,
-						children: /* @__PURE__ */ k(re, {
-							data: $,
-							children: [
-								/* @__PURE__ */ O(f, {
-									strokeDasharray: "3 3",
-									stroke: "var(--color-chart-grid)"
-								}),
-								/* @__PURE__ */ O(m, {
-									dataKey: "date",
-									stroke: "var(--color-chart-axis)",
-									fontSize: 12
-								}),
-								/* @__PURE__ */ O(h, {
-									stroke: "var(--color-chart-axis)",
-									fontSize: 12
-								}),
-								/* @__PURE__ */ O(l, { contentStyle: {
-									backgroundColor: "var(--color-card)",
-									border: "1px solid var(--color-border-default)",
-									borderRadius: 12
-								} }),
-								/* @__PURE__ */ O(d, {
-									dataKey: "salesCount",
-									fill: A.tertiary,
-									radius: [
-										6,
-										6,
-										0,
-										0
-									]
-								})
+				}),
+				/* @__PURE__ */ E("div", {
+					className: "grid gap-6 xl:grid-cols-2",
+					children: [/* @__PURE__ */ T(a, {
+						title: O("devportal.revenue.recentSales", "Recent sales"),
+						children: /* @__PURE__ */ T(c, {
+							data: we,
+							keyField: "id",
+							columns: [
+								{
+									key: "application",
+									header: O("devportal.revenue.application", "Application"),
+									render: (e) => e.application?.name || e.planName || O("devportal.common.unknown", "Unknown")
+								},
+								{
+									key: "grossAmount",
+									header: O("devportal.revenue.gross", "Gross"),
+									render: (e) => `$${e.grossAmount.toLocaleString()}`
+								},
+								{
+									key: "netAmount",
+									header: O("devportal.revenue.net", "Net"),
+									render: (e) => `$${e.netAmount.toLocaleString()}`
+								},
+								{
+									key: "status",
+									header: O("devportal.revenue.status", "Status"),
+									render: (e) => /* @__PURE__ */ T(s, {
+										status: e.status,
+										type: "app"
+									})
+								}
 							]
 						})
-					})
+					}), /* @__PURE__ */ T(a, {
+						title: O("devportal.revenue.payoutHistory", "Payout history"),
+						children: /* @__PURE__ */ T(c, {
+							data: Te,
+							keyField: "id",
+							columns: [
+								{
+									key: "periodLabel",
+									header: O("devportal.revenue.period", "Period"),
+									render: (e) => e.periodLabel
+								},
+								{
+									key: "netAmount",
+									header: O("devportal.revenue.netPayout", "Net payout"),
+									render: (e) => `$${e.netAmount.toLocaleString()}`
+								},
+								{
+									key: "status",
+									header: O("devportal.revenue.status", "Status"),
+									render: (e) => /* @__PURE__ */ T(s, {
+										status: e.status,
+										type: "app"
+									})
+								}
+							]
+						})
+					})]
 				})
-			}),
-			/* @__PURE__ */ k("div", {
-				className: "grid gap-6 xl:grid-cols-2",
-				children: [/* @__PURE__ */ O(n, {
-					title: j("devportal.revenue.recentSales", "Recent sales"),
-					children: /* @__PURE__ */ O(a, {
-						data: fe,
-						keyField: "id",
-						columns: [
-							{
-								key: "application",
-								header: j("devportal.revenue.application", "Application"),
-								render: (e) => e.application?.name || e.planName || j("devportal.common.unknown", "Unknown")
-							},
-							{
-								key: "grossAmount",
-								header: j("devportal.revenue.gross", "Gross"),
-								render: (e) => `$${e.grossAmount.toLocaleString()}`
-							},
-							{
-								key: "netAmount",
-								header: j("devportal.revenue.net", "Net"),
-								render: (e) => `$${e.netAmount.toLocaleString()}`
-							},
-							{
-								key: "status",
-								header: j("devportal.revenue.status", "Status"),
-								render: (e) => /* @__PURE__ */ O(i, {
-									status: e.status,
-									type: "app"
-								})
-							}
-						]
-					})
-				}), /* @__PURE__ */ O(n, {
-					title: j("devportal.revenue.payoutHistory", "Payout history"),
-					children: /* @__PURE__ */ O(a, {
-						data: pe,
-						keyField: "id",
-						columns: [
-							{
-								key: "periodLabel",
-								header: j("devportal.revenue.period", "Period"),
-								render: (e) => e.periodLabel
-							},
-							{
-								key: "netAmount",
-								header: j("devportal.revenue.netPayout", "Net payout"),
-								render: (e) => `$${e.netAmount.toLocaleString()}`
-							},
-							{
-								key: "status",
-								header: j("devportal.revenue.status", "Status"),
-								render: (e) => /* @__PURE__ */ O(i, {
-									status: e.status,
-									type: "app"
-								})
-							}
-						]
-					})
-				})]
+			] }) : /* @__PURE__ */ T(n, {
+				icon: /* @__PURE__ */ T(x, { size: 32 }),
+				title: O("devportal.revenue.noDataTitle", "No revenue data yet"),
+				description: O("devportal.revenue.noDataDescription", "Revenue metrics will appear after this organization starts recording marketplace sales.")
 			})
-		] }) : /* @__PURE__ */ O(e, {
-			icon: /* @__PURE__ */ O(S, { size: 32 }),
-			title: j("devportal.revenue.noDataTitle", "No revenue data yet"),
-			description: j("devportal.revenue.noDataDescription", "Revenue metrics will appear after this organization starts recording marketplace sales.")
-		})]
-	}) : /* @__PURE__ */ O(t, {
-		title: j("devportal.revenue.title", "Revenue"),
-		description: j("devportal.revenue.selectOrgDescription", "Select an organization to review real sales and payout data through the public gateway"),
-		children: X.length > 0 ? /* @__PURE__ */ O("div", {
-			className: "space-y-2",
-			children: X.map((e) => /* @__PURE__ */ O("button", {
-				type: "button",
-				onClick: () => P(e.id),
-				className: "flex w-full items-start justify-between rounded-lg border bg-card p-4 text-left transition-colors hover:bg-accent",
-				children: /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ k("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ O(x, { className: "h-4 w-4 text-primary" }), /* @__PURE__ */ O("span", {
-						className: "font-medium",
-						children: e.name
-					})]
-				}), /* @__PURE__ */ k("p", {
-					className: "mt-1 text-sm text-muted-foreground",
-					children: [
-						e.totalApps ?? 0,
-						" ",
-						j("devportal.revenue.apps", "apps"),
-						" · $",
-						e.totalRevenue?.toLocaleString() ?? 0,
-						" ",
-						j("devportal.revenue.revenue", "revenue")
-					]
-				})] })
-			}, e.id))
-		}) : /* @__PURE__ */ O(e, {
-			icon: /* @__PURE__ */ O(S, { size: 32 }),
-			title: j("devportal.revenue.noOrgsTitle", "No organizations available"),
-			description: j("devportal.revenue.noOrgsDescription", "Create a developer organization before reviewing revenue data.")
+		]
+	}) : /* @__PURE__ */ T(i, {
+		title: O("devportal.revenue.title", "Revenue"),
+		description: O("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
+		children: /* @__PURE__ */ T(n, {
+			icon: /* @__PURE__ */ T(v, {
+				size: 32,
+				className: "text-muted-foreground"
+			}),
+			title: O("devportal.revenue.selectOrgTitle", "Select an organization"),
+			description: O("devportal.revenue.selectOrgHint", "Use the organization switcher in the nav bar above to choose which organization's revenue to view.")
 		})
 	});
 };
 //#endregion
-export { j as RevenueDashboardPage };
+export { O as RevenueDashboardPage };
 
 //# sourceMappingURL=RevenueDashboardPage.js.map