@burdenoff/microfe-devportal 2026.611.1 → 2026.614.1

package/dist/devportal/pages/RevenueDashboardPage.js

@@ -1,66 +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 i } from "../components/StatCard.js";
-import { StatusBadge as a } from "../components/StatusBadge.js";
-import { DataTable as o } from "../components/DataTable.js";
-import { useGetMyOrganizationsQuery as s, useGetRevenueDashboardDataQuery as c } from "../../generated/global-operations.js";
-import { getErrorMessage as l } 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 u } from "../../node_modules/recharts/es6/component/Tooltip.js";
-import { ResponsiveContainer as d } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
-import { Bar as f } from "../../node_modules/recharts/es6/cartesian/Bar.js";
-import { CartesianGrid as p } from "../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
-import { Line as m } from "../../node_modules/recharts/es6/cartesian/Line.js";
-import { XAxis as h } from "../../node_modules/recharts/es6/cartesian/XAxis.js";
-import { YAxis as g } from "../../node_modules/recharts/es6/cartesian/YAxis.js";
-import { LineChart as _ } from "../../node_modules/recharts/es6/chart/LineChart.js";
-import { BarChart as v } from "../../node_modules/recharts/es6/chart/BarChart.js";
-import { useTr as y } from "../utils/i18n.js";
-import { useEffect as b, useMemo as x, useState as S } from "react";
-import { AlertCircle as C, ArrowDownToLine as w, Building2 as T, CreditCard as E, DollarSign as D, Loader2 as O, Wallet as ee } from "lucide-react";
-import { useSearchParams as k } from "react-router-dom";
-import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+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 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 N = {
+var D = {
 	primary: "var(--color-chart-1)",
 	secondary: "var(--color-chart-2)",
 	tertiary: "var(--color-chart-4)"
-}, P = {
+}, me = {
 	"30d": 30,
 	"90d": 90,
 	"12m": 365
-}, F = () => {
-	let F = y(), [I, L] = S("90d"), [R, z] = S(""), [B] = k(), V = x(() => /* @__PURE__ */ new Date(), []), H = B.get("org"), U = x(() => {
-		let e = new Date(V);
-		return e.setDate(e.getDate() - P[I]), e.toISOString();
-	}, [V, I]), { data: W, loading: G, error: K } = s({ fetchPolicy: "cache-and-network" }), { data: q, loading: J, error: Y } = c({
+}, 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: R,
+			organizationId: k ?? "",
 			period: "monthly",
-			startDate: U,
-			endDate: V.toISOString(),
+			startDate: be,
+			endDate: B.toISOString(),
 			salesLimit: 10,
 			salesOffset: 0,
 			payoutsLimit: 10,
 			payoutsOffset: 0
 		},
-		skip: !R,
+		skip: !k,
 		fetchPolicy: "cache-and-network"
-	}), X = x(() => W?.myDeveloperOrganizations?.map((e) => e) ?? [], [W?.myDeveloperOrganizations]);
-	b(() => {
-		if (!R) {
-			if (H && X.some((e) => e.id === H)) {
-				z(H);
-				return;
+	}), 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 _e({ variables: { input: {
+					name: K?.name ?? k,
+					email: he?.email ?? ""
+				} } })).data?.createBillingAccount?.id;
+				e && await F({
+					variables: {
+						organizationId: k,
+						billingAccountId: e
+					},
+					refetchQueries: ["GetMyOrganizations"]
+				});
+			} catch (e) {
+				P(e instanceof Error ? e.message : "Failed to link billing account");
+			} finally {
+				M(!1), L(!1);
 			}
-			X.length === 1 && z(X[0]?.id ?? "");
 		}
-	}, [
-		X,
-		H,
-		R
-	]);
-	let Z = X.find((e) => e.id === R), Q = q?.developerOrgRevenueSummary, te = [...q?.developerOrgRevenueAnalytics ?? []].sort((e, t) => new Date(e.date).getTime() - new Date(t.date).getTime()), ne = q?.developerOrgSales?.edges?.map((e) => e.node) ?? [], re = q?.developerOrgPayouts?.edges?.map((e) => e.node) ?? [], $ = te.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"
@@ -71,335 +102,510 @@ var N = {
 		refunds: e.refunds,
 		salesCount: e.salesCount
 	}));
-	return G && !W ? /* @__PURE__ */ j(t, {
-		title: F("devportal.revenue.title", "Revenue"),
-		description: F("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ j("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__ */ j(O, { className: "h-8 w-8 animate-spin" })
+			children: /* @__PURE__ */ T(C, { className: "h-8 w-8 animate-spin" })
 		})
-	}) : K ? /* @__PURE__ */ j(t, {
-		title: F("devportal.revenue.title", "Revenue"),
-		description: F("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ j(e, {
-			icon: /* @__PURE__ */ j(C, {
+	}) : 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: F("devportal.revenue.errorLoadOrgs", "Unable to load organizations"),
-			description: l(K)
+			title: O("devportal.revenue.errorLoadOrgs", "Unable to load organizations"),
+			description: r(U)
 		})
-	}) : R ? Y ? /* @__PURE__ */ j(t, {
-		title: F("devportal.revenue.title", "Revenue"),
-		description: F("devportal.revenue.description", "Track real revenue, sales, and payout activity for your developer organizations"),
-		children: /* @__PURE__ */ j(e, {
-			icon: /* @__PURE__ */ j(C, {
+	}) : 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: F("devportal.revenue.errorLoadData", "Unable to load revenue data"),
-			description: l(Y)
+			title: O("devportal.revenue.errorLoadData", "Unable to load revenue data"),
+			description: r(G)
 		})
-	}) : /* @__PURE__ */ j(t, {
-		title: F("devportal.revenue.title", "Revenue"),
-		description: Z ? `${F("devportal.revenue.financialPerformanceFor", "Financial performance for")} ${Z.name}` : F("devportal.revenue.shortDescription", "Track revenue, sales, and payouts"),
-		actions: /* @__PURE__ */ M("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__ */ j("select", {
-				value: R,
-				onChange: (e) => z(e.target.value),
-				"aria-label": F("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__ */ j("option", {
-					value: e.id,
-					children: e.name
-				}, e.id))
-			}), /* @__PURE__ */ M("select", {
-				value: I,
-				onChange: (e) => L(e.target.value),
-				"aria-label": F("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__ */ j("option", {
+					/* @__PURE__ */ T("option", {
 						value: "30d",
-						children: F("devportal.revenue.range.30d", "Last 30 days")
+						children: O("devportal.revenue.range.30d", "Last 30 days")
 					}),
-					/* @__PURE__ */ j("option", {
+					/* @__PURE__ */ T("option", {
 						value: "90d",
-						children: F("devportal.revenue.range.90d", "Last 90 days")
+						children: O("devportal.revenue.range.90d", "Last 90 days")
 					}),
-					/* @__PURE__ */ j("option", {
+					/* @__PURE__ */ T("option", {
 						value: "12m",
-						children: F("devportal.revenue.range.12m", "Last 12 months")
+						children: O("devportal.revenue.range.12m", "Last 12 months")
 					})
 				]
-			})]
+			})
 		}),
-		children: J && !Q ? /* @__PURE__ */ j("div", {
-			className: "flex items-center justify-center py-16 text-muted-foreground",
-			children: /* @__PURE__ */ j(O, { className: "h-8 w-8 animate-spin" })
-		}) : Q ? /* @__PURE__ */ M(A, { children: [
-			/* @__PURE__ */ M(i, {
-				columns: 4,
-				children: [
-					/* @__PURE__ */ j(r, {
-						title: F("devportal.revenue.grossRevenue", "Gross Revenue"),
-						value: `$${Q.totalGrossRevenue.toLocaleString()}`,
-						icon: /* @__PURE__ */ j(D, { size: 20 })
-					}),
-					/* @__PURE__ */ j(r, {
-						title: F("devportal.revenue.netRevenue", "Net Revenue"),
-						value: `$${Q.totalNetRevenue.toLocaleString()}`,
-						icon: /* @__PURE__ */ j(ee, { size: 20 })
-					}),
-					/* @__PURE__ */ j(r, {
-						title: F("devportal.revenue.pendingBalance", "Pending Balance"),
-						value: `$${Q.pendingBalance.toLocaleString()}`,
-						icon: /* @__PURE__ */ j(E, { size: 20 }),
-						description: Q.nextPayoutDate ? `${F("devportal.revenue.nextPayout", "Next payout")} ${new Date(Q.nextPayoutDate).toLocaleDateString()}` : F("devportal.revenue.noPayoutScheduled", "No payout scheduled")
-					}),
-					/* @__PURE__ */ j(r, {
-						title: F("devportal.revenue.platformFees", "Platform Fees"),
-						value: `$${Q.totalPlatformFees.toLocaleString()}`,
-						icon: /* @__PURE__ */ j(w, { size: 20 }),
-						description: `${Q.totalRefundsCount} ${F("devportal.revenue.refunds", "refunds")}`
-					})
-				]
+		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__ */ T(S, {
+							size: 20,
+							className: "text-accent-blue flex-shrink-0 mt-0.5"
+						}),
+						/* @__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
+								})
+							]
+						}),
+						/* @__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")]
+						})
+					]
+				}), 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")]
+							})]
+						})
+					]
+				})]
 			}),
-			/* @__PURE__ */ M("div", {
-				className: "grid gap-6 xl:grid-cols-2",
-				children: [/* @__PURE__ */ j(n, {
-					title: F("devportal.revenue.revenueTrend", "Revenue trend"),
-					children: /* @__PURE__ */ j("div", {
+			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
+						})
+					]
+				})]
+			}),
+			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__ */ j(d, {
+						children: /* @__PURE__ */ T(u, {
 							width: "100%",
-							height: 300,
-							children: /* @__PURE__ */ M(_, {
+							height: 280,
+							children: /* @__PURE__ */ E(ce, {
 								data: $,
 								children: [
-									/* @__PURE__ */ j(p, {
+									/* @__PURE__ */ T(d, {
 										strokeDasharray: "3 3",
 										stroke: "var(--color-chart-grid)"
 									}),
-									/* @__PURE__ */ j(h, {
+									/* @__PURE__ */ T(p, {
 										dataKey: "date",
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ j(g, {
+									/* @__PURE__ */ T(m, {
 										stroke: "var(--color-chart-axis)",
 										fontSize: 12
 									}),
-									/* @__PURE__ */ j(u, { contentStyle: {
+									/* @__PURE__ */ T(l, { contentStyle: {
 										backgroundColor: "var(--color-card)",
 										border: "1px solid var(--color-border-default)",
 										borderRadius: 12
 									} }),
-									/* @__PURE__ */ j(m, {
-										type: "monotone",
-										dataKey: "grossRevenue",
-										stroke: N.primary,
-										strokeWidth: 2,
-										dot: !1
-									}),
-									/* @__PURE__ */ j(m, {
-										type: "monotone",
-										dataKey: "netRevenue",
-										stroke: N.secondary,
-										strokeWidth: 2,
-										dot: !1
+									/* @__PURE__ */ T(oe, {
+										dataKey: "salesCount",
+										fill: D.tertiary,
+										radius: [
+											6,
+											6,
+											0,
+											0
+										]
 									})
 								]
 							})
 						})
 					})
-				}), /* @__PURE__ */ j(n, {
-					title: F("devportal.revenue.topApps", "Top applications by revenue"),
-					children: Q.topApps.length > 0 ? /* @__PURE__ */ j("div", {
-						className: "space-y-2",
-						children: Q.topApps.map((e) => /* @__PURE__ */ j("div", {
-							className: "rounded-lg border bg-card p-4",
-							children: /* @__PURE__ */ M("div", {
-								className: "flex items-start justify-between gap-3",
-								children: [/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
-									className: "font-medium",
-									children: e.applicationName
-								}), /* @__PURE__ */ M("p", {
-									className: "text-sm text-muted-foreground",
-									children: [
-										e.salesCount,
-										" ",
-										F("devportal.revenue.sales", "sales")
-									]
-								})] }), /* @__PURE__ */ M("div", {
-									className: "text-right",
-									children: [/* @__PURE__ */ M("p", {
-										className: "font-semibold",
-										children: ["$", e.grossRevenue.toLocaleString()]
-									}), /* @__PURE__ */ M("p", {
-										className: "text-sm text-muted-foreground",
-										children: [
-											F("devportal.revenue.net", "Net"),
-											" $",
-											e.netRevenue.toLocaleString()
-										]
-									})]
-								})]
-							})
-						}, e.applicationId))
-					}) : /* @__PURE__ */ j(e, {
-						icon: /* @__PURE__ */ j(T, { size: 24 }),
-						title: F("devportal.revenue.noLeadersTitle", "No revenue leaders yet"),
-						description: F("devportal.revenue.noLeadersDescription", "Top-performing applications will appear here once revenue is recorded.")
-					})
-				})]
-			}),
-			/* @__PURE__ */ j(n, {
-				title: F("devportal.revenue.salesVolume", "Sales volume"),
-				children: /* @__PURE__ */ j("div", {
-					className: "rounded-lg border bg-card p-4",
-					children: /* @__PURE__ */ j(d, {
-						width: "100%",
-						height: 280,
-						children: /* @__PURE__ */ M(v, {
-							data: $,
-							children: [
-								/* @__PURE__ */ j(p, {
-									strokeDasharray: "3 3",
-									stroke: "var(--color-chart-grid)"
-								}),
-								/* @__PURE__ */ j(h, {
-									dataKey: "date",
-									stroke: "var(--color-chart-axis)",
-									fontSize: 12
-								}),
-								/* @__PURE__ */ j(g, {
-									stroke: "var(--color-chart-axis)",
-									fontSize: 12
-								}),
-								/* @__PURE__ */ j(u, { contentStyle: {
-									backgroundColor: "var(--color-card)",
-									border: "1px solid var(--color-border-default)",
-									borderRadius: 12
-								} }),
-								/* @__PURE__ */ j(f, {
-									dataKey: "salesCount",
-									fill: N.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__ */ M("div", {
-				className: "grid gap-6 xl:grid-cols-2",
-				children: [/* @__PURE__ */ j(n, {
-					title: F("devportal.revenue.recentSales", "Recent sales"),
-					children: /* @__PURE__ */ j(o, {
-						data: ne,
-						keyField: "id",
-						columns: [
-							{
-								key: "application",
-								header: F("devportal.revenue.application", "Application"),
-								render: (e) => e.application?.name || e.planName || F("devportal.common.unknown", "Unknown")
-							},
-							{
-								key: "grossAmount",
-								header: F("devportal.revenue.gross", "Gross"),
-								render: (e) => `$${e.grossAmount.toLocaleString()}`
-							},
-							{
-								key: "netAmount",
-								header: F("devportal.revenue.net", "Net"),
-								render: (e) => `$${e.netAmount.toLocaleString()}`
-							},
-							{
-								key: "status",
-								header: F("devportal.revenue.status", "Status"),
-								render: (e) => /* @__PURE__ */ j(a, {
-									status: e.status,
-									type: "app"
-								})
-							}
-						]
-					})
-				}), /* @__PURE__ */ j(n, {
-					title: F("devportal.revenue.payoutHistory", "Payout history"),
-					children: /* @__PURE__ */ j(o, {
-						data: re,
-						keyField: "id",
-						columns: [
-							{
-								key: "periodLabel",
-								header: F("devportal.revenue.period", "Period"),
-								render: (e) => e.periodLabel
-							},
-							{
-								key: "netAmount",
-								header: F("devportal.revenue.netPayout", "Net payout"),
-								render: (e) => `$${e.netAmount.toLocaleString()}`
-							},
-							{
-								key: "status",
-								header: F("devportal.revenue.status", "Status"),
-								render: (e) => /* @__PURE__ */ j(a, {
-									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__ */ j(e, {
-			icon: /* @__PURE__ */ j(D, { size: 32 }),
-			title: F("devportal.revenue.noDataTitle", "No revenue data yet"),
-			description: F("devportal.revenue.noDataDescription", "Revenue metrics will appear after this organization starts recording marketplace sales.")
-		})
-	}) : /* @__PURE__ */ j(t, {
-		title: F("devportal.revenue.title", "Revenue"),
-		description: F("devportal.revenue.selectOrgDescription", "Select an organization to review real sales and payout data through the public gateway"),
-		children: X.length > 0 ? /* @__PURE__ */ j("div", {
-			className: "space-y-2",
-			children: X.map((e) => /* @__PURE__ */ j("button", {
-				type: "button",
-				onClick: () => z(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__ */ M("div", { children: [/* @__PURE__ */ M("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ j(T, { className: "h-4 w-4 text-primary" }), /* @__PURE__ */ j("span", {
-						className: "font-medium",
-						children: e.name
-					})]
-				}), /* @__PURE__ */ M("p", {
-					className: "mt-1 text-sm text-muted-foreground",
-					children: [
-						e.totalApps ?? 0,
-						" ",
-						F("devportal.revenue.apps", "apps"),
-						" · $",
-						e.totalRevenue?.toLocaleString() ?? 0,
-						" ",
-						F("devportal.revenue.revenue", "revenue")
-					]
-				})] })
-			}, e.id))
-		}) : /* @__PURE__ */ j(e, {
-			icon: /* @__PURE__ */ j(D, { size: 32 }),
-			title: F("devportal.revenue.noOrgsTitle", "No organizations available"),
-			description: F("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 { F as RevenueDashboardPage };
+export { O as RevenueDashboardPage };
 
 //# sourceMappingURL=RevenueDashboardPage.js.map