@burdenoff/microfe-billing 2026.623.3 → 2026.624.2

package/dist/billing/modules/earnings/pages/EarningsPage.js

@@ -1,435 +1,373 @@
 import { useBilling as e } from "../../../providers/BillingProvider.js";
 import { AccessDenied as t } from "../../../shared/components/AccessDenied.js";
-import { PageHeader as n } from "../../../shared/components/PageHeader.js";
-import { StatCard as r } from "../../../shared/components/StatCard.js";
-import { EmptyState as i } from "../../../shared/components/EmptyState.js";
-import { ServerError as a } from "../../../shared/components/ServerError.js";
+import { PageHeader as ee } from "../../../shared/components/PageHeader.js";
+import { StatCard as n } from "../../../shared/components/StatCard.js";
+import { EmptyState as r } from "../../../shared/components/EmptyState.js";
+import { ServerError as i } from "../../../shared/components/ServerError.js";
 import "../../../shared/components/index.js";
-import { formatCurrency as o, formatDateTime as s } from "../../../shared/utils/format.js";
-import { isServerError as c } from "../../../shared/utils/error.js";
+import { formatCurrency as a, formatDateTime as o } from "../../../shared/utils/format.js";
+import { isServerError as s } from "../../../shared/utils/error.js";
 import "../../../shared/utils/index.js";
-import { useBillingPermissions as l } from "../../../hooks/useBillingPermissions.js";
-import { useGetDefaultBillingAccountSettingsQuery as u } from "../../../../generated/global-operations.js";
-import { fetchDeveloperPortalRevenueDashboard as d, fetchEarningsEntries as f, fetchEarningsSummary as p } from "../api.js";
-import { useEffect as m, useMemo as h, useState as g } from "react";
-import { Coins as _, HandCoins as v, RefreshCw as y, Wallet as b } from "lucide-react";
-import { useSearchParams as x } from "react-router-dom";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useBillingPermissions as c } from "../../../hooks/useBillingPermissions.js";
+import { useGetDefaultBillingAccountSettingsQuery as l } from "../../../../generated/global-operations.js";
+import { fetchDeveloperPortalRevenueDashboard as u, fetchEarningsEntries as d, fetchEarningsSummary as f } from "../api.js";
+import { useEffect as p, useMemo as m, useState as h } from "react";
+import { Coins as g, HandCoins as _, RefreshCw as v, Wallet as y } from "lucide-react";
+import { useSearchParams as b } from "react-router-dom";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { ResponsiveTable as C } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/earnings/pages/EarningsPage.tsx
-var w = () => {
-	let [w] = x(), T = l(), { apiGatewayUrl: E, authToken: D, orgId: O } = e(), k = w.get("developerOrgId"), A = w.get("developerOrgName"), { data: j, loading: M } = u({}), N = j?.getDefaultBillingAccount?.id, [P, F] = g(null), [I, L] = g([]), [R, z] = g(null), [B, V] = g("ALL"), [H, U] = g(!0), [W, G] = g(null), K = h(() => ({
-		apiGatewayUrl: E,
-		authToken: D,
-		orgId: O
+var w = [
+	{
+		key: "application",
+		header: "Application",
+		priority: "primary",
+		cell: (e) => e.application?.name || e.application?.slug || "Unknown app"
+	},
+	{
+		key: "pricing",
+		header: "Pricing",
+		cell: (e) => e.pricingModel
+	},
+	{
+		key: "gross",
+		header: "Gross",
+		cell: (e) => /* @__PURE__ */ x("span", {
+			className: "tabular-nums",
+			children: a(e.grossAmount, e.currency || "USD")
+		})
+	},
+	{
+		key: "net",
+		header: "Net",
+		cell: (e) => /* @__PURE__ */ x("span", {
+			className: "tabular-nums",
+			children: a(e.netAmount, e.currency || "USD")
+		})
+	},
+	{
+		key: "status",
+		header: "Status",
+		cell: (e) => e.status
+	},
+	{
+		key: "purchased",
+		header: "Purchased",
+		cell: (e) => o(e.purchasedAt)
+	}
+], T = [
+	{
+		key: "period",
+		header: "Period",
+		priority: "primary",
+		cell: (e) => e.periodLabel || "-"
+	},
+	{
+		key: "amount",
+		header: "Amount",
+		cell: (e) => /* @__PURE__ */ x("span", {
+			className: "tabular-nums",
+			children: a(e.netAmount, e.currency || "USD")
+		})
+	},
+	{
+		key: "status",
+		header: "Status",
+		cell: (e) => e.status
+	},
+	{
+		key: "scheduled",
+		header: "Scheduled",
+		cell: (e) => e.scheduledAt ? o(e.scheduledAt) : "-"
+	},
+	{
+		key: "completed",
+		header: "Completed",
+		cell: (e) => e.completedAt ? o(e.completedAt) : "-"
+	}
+], E = [
+	{
+		key: "category",
+		header: "Category",
+		priority: "primary",
+		cell: (e) => e.sourceCategory
+	},
+	{
+		key: "description",
+		header: "Description",
+		cell: (e) => e.description || e.sourceSubcategory || "-"
+	},
+	{
+		key: "unit",
+		header: "Unit",
+		cell: (e) => e.unitType
+	},
+	{
+		key: "amount",
+		header: "Amount",
+		cell: (e) => /* @__PURE__ */ x("span", {
+			className: "tabular-nums",
+			children: e.unitType === "CREDITS" ? `${e.amount.toLocaleString()} credits` : a(e.amount, e.currency || "USD")
+		})
+	},
+	{
+		key: "status",
+		header: "Status",
+		cell: (e) => e.status
+	},
+	{
+		key: "created",
+		header: "Created",
+		cell: (e) => o(e.createdAt)
+	}
+], D = () => {
+	let [o] = b(), D = c(), { apiGatewayUrl: O, authToken: k, orgId: A } = e(), j = o.get("developerOrgId"), M = o.get("developerOrgName"), { data: N, loading: P } = l({}), F = N?.getDefaultBillingAccount?.id, [I, L] = h(null), [R, z] = h([]), [B, V] = h(null), [H, U] = h("ALL"), [W, G] = h(!0), [K, q] = h(null), J = m(() => ({
+		apiGatewayUrl: O,
+		authToken: k,
+		orgId: A
 	}), [
-		E,
-		D,
-		O
-	]), q = async () => {
-		U(!0), G(null);
+		O,
+		k,
+		A
+	]), Y = async () => {
+		G(!0), q(null);
 		try {
-			if (k) {
-				z(await d(k, K)), F(null), L([]);
+			if (j) {
+				V(await u(j, J)), L(null), z([]);
 				return;
 			}
-			if (!N) {
-				F(null), L([]), z(null);
+			if (!F) {
+				L(null), z([]), V(null);
 				return;
 			}
-			let [e, t] = await Promise.all([p(N, K), f(N, K)]);
-			F(e), L(t), z(null);
+			let [e, t] = await Promise.all([f(F, J), d(F, J)]);
+			L(e), z(t), V(null);
 		} catch (e) {
-			G(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load earnings"));
+			q(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load earnings"));
 		} finally {
-			U(!1);
+			G(!1);
 		}
 	};
-	if (m(() => {
-		q();
+	if (p(() => {
+		Y();
 	}, [
-		N,
-		k,
-		K
-	]), !T.canViewBillingAccount) return /* @__PURE__ */ S(t, { message: "You don't have permission to view earnings." });
-	if (!k && !N && !M) return /* @__PURE__ */ S(i, {
-		icon: /* @__PURE__ */ S(b, { className: "size-8" }),
+		F,
+		j,
+		J
+	]), !D.canViewBillingAccount) return /* @__PURE__ */ x(t, { message: "You don't have permission to view earnings." });
+	if (!j && !F && !P) return /* @__PURE__ */ x(r, {
+		icon: /* @__PURE__ */ x(y, { className: "size-8" }),
 		title: "No billing account found",
 		description: "Create a billing account first to view earnings."
 	});
-	if (W && c(W)) return /* @__PURE__ */ S(a, {
+	if (K && s(K)) return /* @__PURE__ */ x(i, {
 		title: "Earnings unavailable",
-		message: W.message,
-		onRetry: () => void q(),
+		message: K.message,
+		onRetry: () => void Y(),
 		showRetry: !0
 	});
-	let J = P ? [
+	let X = I ? [
 		{
 			title: "Available",
-			value: o(P.availableAmount, "USD"),
-			icon: /* @__PURE__ */ S(v, { className: "size-5" })
+			value: a(I.availableAmount, "USD"),
+			icon: /* @__PURE__ */ x(_, { className: "size-5" })
 		},
 		{
 			title: "Reserved",
-			value: o(P.reservedAmount, "USD"),
-			icon: /* @__PURE__ */ S(_, { className: "size-5" })
+			value: a(I.reservedAmount, "USD"),
+			icon: /* @__PURE__ */ x(g, { className: "size-5" })
 		},
 		{
 			title: "Paid out",
-			value: o(P.paidAmount, "USD"),
-			icon: /* @__PURE__ */ S(b, { className: "size-5" })
+			value: a(I.paidAmount, "USD"),
+			icon: /* @__PURE__ */ x(y, { className: "size-5" })
 		},
 		{
 			title: "Lifetime",
-			value: o(P.totalLifetimeAmount, "USD"),
-			icon: /* @__PURE__ */ S(y, { className: "size-5" })
+			value: a(I.totalLifetimeAmount, "USD"),
+			icon: /* @__PURE__ */ x(v, { className: "size-5" })
 		}
-	] : [], Y = B === "ALL" ? I : I.filter((e) => e.sourceCategory === B), X = P?.categoryBreakdown?.map((e) => ({
+	] : [], Z = H === "ALL" ? R : R.filter((e) => e.sourceCategory === H), Q = I?.categoryBreakdown?.map((e) => ({
 		title: `${e.category} earnings`,
-		value: o(e.amount, "USD"),
+		value: a(e.amount, "USD"),
 		helperText: `${e.count} entries`
-	})) ?? [], Z = R?.summary ? [
+	})) ?? [], te = B?.summary ? [
 		{
 			title: "Gross revenue",
-			value: o(R.summary.totalGrossRevenue, "USD"),
-			icon: /* @__PURE__ */ S(v, { className: "size-5" })
+			value: a(B.summary.totalGrossRevenue, "USD"),
+			icon: /* @__PURE__ */ x(_, { className: "size-5" })
 		},
 		{
 			title: "Net revenue",
-			value: o(R.summary.totalNetRevenue, "USD"),
-			icon: /* @__PURE__ */ S(b, { className: "size-5" })
+			value: a(B.summary.totalNetRevenue, "USD"),
+			icon: /* @__PURE__ */ x(y, { className: "size-5" })
 		},
 		{
 			title: "Pending balance",
-			value: o(R.summary.pendingBalance, "USD"),
-			icon: /* @__PURE__ */ S(_, { className: "size-5" })
+			value: a(B.summary.pendingBalance, "USD"),
+			icon: /* @__PURE__ */ x(g, { className: "size-5" })
 		},
 		{
 			title: "Platform fees",
-			value: o(R.summary.totalPlatformFees, "USD"),
-			icon: /* @__PURE__ */ S(y, { className: "size-5" })
+			value: a(B.summary.totalPlatformFees, "USD"),
+			icon: /* @__PURE__ */ x(v, { className: "size-5" })
 		}
-	] : [], Q = !!k;
-	return /* @__PURE__ */ C("div", {
+	] : [], $ = !!j;
+	return /* @__PURE__ */ S("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ S(n, {
-				title: Q ? "Marketplace earnings" : "Earnings",
-				description: Q ? `Developer portal revenue, sales, and payouts${A ? ` for ${A}` : ""}.` : "Track affiliate, store, and other earning sources in one ledger."
+			/* @__PURE__ */ x(ee, {
+				title: $ ? "Marketplace earnings" : "Earnings",
+				description: $ ? `Developer portal revenue, sales, and payouts${M ? ` for ${M}` : ""}.` : "Track affiliate, store, and other earning sources in one ledger."
 			}),
-			H ? /* @__PURE__ */ S("div", {
+			W ? /* @__PURE__ */ x("div", {
 				className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4",
 				children: [
 					1,
 					2,
 					3,
 					4
-				].map((e) => /* @__PURE__ */ S("div", { className: "h-28 animate-pulse rounded-lg border border-border bg-card" }, e))
-			}) : Q ? R?.summary ? /* @__PURE__ */ C("div", {
+				].map((e) => /* @__PURE__ */ x("div", { className: "h-28 animate-pulse rounded-lg border border-border-subtle bg-bg-surface" }, e))
+			}) : $ ? B?.summary ? /* @__PURE__ */ S("div", {
 				className: "space-y-6",
 				children: [
-					/* @__PURE__ */ S("div", {
+					/* @__PURE__ */ x("div", {
 						className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4",
-						children: Z.map((e) => /* @__PURE__ */ S(r, {
+						children: te.map((e) => /* @__PURE__ */ x(n, {
 							label: e.title,
 							value: e.value,
 							icon: e.icon
 						}, e.title))
 					}),
-					/* @__PURE__ */ C("section", {
-						className: "rounded-lg border border-border bg-card p-4",
-						children: [/* @__PURE__ */ C("div", {
+					/* @__PURE__ */ S("section", {
+						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
+						children: [/* @__PURE__ */ S("div", {
 							className: "mb-4 flex items-center justify-between",
-							children: [/* @__PURE__ */ S("h2", {
-								className: "text-lg font-semibold text-foreground",
+							children: [/* @__PURE__ */ x("h2", {
+								className: "text-lg font-semibold text-text-primary",
 								children: "Recent sales"
-							}), /* @__PURE__ */ C("button", {
+							}), /* @__PURE__ */ S("button", {
 								type: "button",
-								onClick: () => void q(),
-								className: "inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground",
-								children: [/* @__PURE__ */ S(y, { className: "size-4" }), "Refresh"]
+								onClick: () => void Y(),
+								className: "inline-flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary",
+								children: [/* @__PURE__ */ x(v, { className: "size-4" }), "Refresh"]
 							})]
-						}), R.sales.length === 0 ? /* @__PURE__ */ S(i, {
-							icon: /* @__PURE__ */ S(_, { className: "size-8" }),
+						}), B.sales.length === 0 ? /* @__PURE__ */ x(r, {
+							icon: /* @__PURE__ */ x(g, { className: "size-8" }),
 							title: "No sales yet",
 							description: "Sales will appear here when customers start purchasing your apps."
-						}) : /* @__PURE__ */ S("div", {
-							className: "overflow-x-auto",
-							children: /* @__PURE__ */ C("table", {
-								className: "min-w-full text-sm",
-								children: [/* @__PURE__ */ S("thead", { children: /* @__PURE__ */ C("tr", {
-									className: "border-b border-border text-left text-muted-foreground",
-									children: [
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Application"
-										}),
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Pricing"
-										}),
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Gross"
-										}),
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Net"
-										}),
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Status"
-										}),
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Purchased"
-										})
-									]
-								}) }), /* @__PURE__ */ S("tbody", { children: R.sales.map((e) => /* @__PURE__ */ C("tr", {
-									className: "border-b border-border/70 text-foreground",
-									children: [
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2 font-medium",
-											children: e.application?.name || e.application?.slug || "Unknown app"
-										}),
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2",
-											children: e.pricingModel
-										}),
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2",
-											children: o(e.grossAmount, e.currency || "USD")
-										}),
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2",
-											children: o(e.netAmount, e.currency || "USD")
-										}),
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2",
-											children: e.status
-										}),
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2",
-											children: s(e.purchasedAt)
-										})
-									]
-								}, e.id)) })]
-							})
+						}) : /* @__PURE__ */ x(C, {
+							data: B.sales,
+							rowKey: (e) => e.id,
+							columns: w
 						})]
 					}),
-					/* @__PURE__ */ C("section", {
-						className: "rounded-lg border border-border bg-card p-4",
-						children: [/* @__PURE__ */ S("h2", {
-							className: "mb-4 text-lg font-semibold text-foreground",
+					/* @__PURE__ */ S("section", {
+						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
+						children: [/* @__PURE__ */ x("h2", {
+							className: "mb-4 text-lg font-semibold text-text-primary",
 							children: "Payouts"
-						}), R.payouts.length === 0 ? /* @__PURE__ */ S(i, {
-							icon: /* @__PURE__ */ S(b, { className: "size-8" }),
+						}), B.payouts.length === 0 ? /* @__PURE__ */ x(r, {
+							icon: /* @__PURE__ */ x(y, { className: "size-8" }),
 							title: "No payouts yet",
 							description: "Scheduled and completed payouts will appear here."
-						}) : /* @__PURE__ */ S("div", {
-							className: "overflow-x-auto",
-							children: /* @__PURE__ */ C("table", {
-								className: "min-w-full text-sm",
-								children: [/* @__PURE__ */ S("thead", { children: /* @__PURE__ */ C("tr", {
-									className: "border-b border-border text-left text-muted-foreground",
-									children: [
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Period"
-										}),
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Amount"
-										}),
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Status"
-										}),
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Scheduled"
-										}),
-										/* @__PURE__ */ S("th", {
-											className: "px-3 py-2",
-											children: "Completed"
-										})
-									]
-								}) }), /* @__PURE__ */ S("tbody", { children: R.payouts.map((e) => /* @__PURE__ */ C("tr", {
-									className: "border-b border-border/70 text-foreground",
-									children: [
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2 font-medium",
-											children: e.periodLabel || "-"
-										}),
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2",
-											children: o(e.netAmount, e.currency || "USD")
-										}),
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2",
-											children: e.status
-										}),
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2",
-											children: e.scheduledAt ? s(e.scheduledAt) : "-"
-										}),
-										/* @__PURE__ */ S("td", {
-											className: "px-3 py-2",
-											children: e.completedAt ? s(e.completedAt) : "-"
-										})
-									]
-								}, e.id)) })]
-							})
+						}) : /* @__PURE__ */ x(C, {
+							data: B.payouts,
+							rowKey: (e) => e.id,
+							columns: T
 						})]
 					})
 				]
-			}) : /* @__PURE__ */ S(i, {
-				icon: /* @__PURE__ */ S(_, { className: "size-8" }),
+			}) : /* @__PURE__ */ x(r, {
+				icon: /* @__PURE__ */ x(g, { className: "size-8" }),
 				title: "No developer portal revenue yet",
 				description: "Marketplace revenue will appear here once your developer organization records sales."
-			}) : P ? /* @__PURE__ */ C("div", {
+			}) : I ? /* @__PURE__ */ S("div", {
 				className: "space-y-4",
-				children: [/* @__PURE__ */ S("div", {
+				children: [/* @__PURE__ */ x("div", {
 					className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4",
-					children: J.map((e) => /* @__PURE__ */ S(r, {
+					children: X.map((e) => /* @__PURE__ */ x(n, {
 						label: e.title,
 						value: e.value,
 						icon: e.icon
 					}, e.title))
-				}), X.length > 0 ? /* @__PURE__ */ S("div", {
+				}), Q.length > 0 ? /* @__PURE__ */ x("div", {
 					className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
-					children: X.map((e) => /* @__PURE__ */ C("div", {
-						className: "rounded-lg border border-border bg-card p-4",
+					children: Q.map((e) => /* @__PURE__ */ S("div", {
+						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
 						children: [
-							/* @__PURE__ */ S("p", {
-								className: "text-sm text-muted-foreground",
+							/* @__PURE__ */ x("p", {
+								className: "text-sm text-text-secondary",
 								children: e.title
 							}),
-							/* @__PURE__ */ S("p", {
-								className: "mt-2 text-xl font-semibold text-foreground",
+							/* @__PURE__ */ x("p", {
+								className: "mt-2 text-xl font-semibold text-text-primary",
 								children: e.value
 							}),
-							/* @__PURE__ */ S("p", {
-								className: "mt-1 text-xs text-muted-foreground",
+							/* @__PURE__ */ x("p", {
+								className: "mt-1 text-xs text-text-secondary",
 								children: e.helperText
 							})
 						]
 					}, e.title))
 				}) : null]
 			}) : null,
-			W && !c(W) ? /* @__PURE__ */ S("div", {
-				className: "rounded-lg border border-border bg-card p-4 text-sm text-destructive",
-				children: W.message
+			K && !s(K) ? /* @__PURE__ */ x("div", {
+				className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-status-error-text",
+				children: K.message
 			}) : null,
-			/* @__PURE__ */ C("section", {
-				className: "rounded-lg border border-border bg-card p-4",
-				children: [/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ S("section", {
+				className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
+				children: [/* @__PURE__ */ S("div", {
 					className: "mb-4 flex items-center justify-between",
-					children: [/* @__PURE__ */ S("h2", {
-						className: "text-lg font-semibold text-foreground",
+					children: [/* @__PURE__ */ x("h2", {
+						className: "text-lg font-semibold text-text-primary",
 						children: "Ledger"
-					}), /* @__PURE__ */ C("div", {
+					}), /* @__PURE__ */ S("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ C("select", {
-							value: B,
-							onChange: (e) => V(e.target.value),
-							className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground",
+						children: [/* @__PURE__ */ S("select", {
+							value: H,
+							onChange: (e) => U(e.target.value),
+							className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
 							children: [
-								/* @__PURE__ */ S("option", {
+								/* @__PURE__ */ x("option", {
 									value: "ALL",
 									children: "All sources"
 								}),
-								/* @__PURE__ */ S("option", {
+								/* @__PURE__ */ x("option", {
 									value: "AFFILIATE",
 									children: "Affiliate"
 								}),
-								/* @__PURE__ */ S("option", {
+								/* @__PURE__ */ x("option", {
 									value: "STORE",
 									children: "Store"
 								}),
-								/* @__PURE__ */ S("option", {
+								/* @__PURE__ */ x("option", {
 									value: "OTHER",
 									children: "Other"
 								})
 							]
-						}), /* @__PURE__ */ C("button", {
+						}), /* @__PURE__ */ S("button", {
 							type: "button",
-							onClick: () => void q(),
-							className: "inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground",
-							children: [/* @__PURE__ */ S(y, { className: "size-4" }), "Refresh"]
+							onClick: () => void Y(),
+							className: "inline-flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary",
+							children: [/* @__PURE__ */ x(v, { className: "size-4" }), "Refresh"]
 						})]
 					})]
-				}), Y.length === 0 && !H ? /* @__PURE__ */ S(i, {
-					icon: /* @__PURE__ */ S(_, { className: "size-8" }),
+				}), Z.length === 0 && !W ? /* @__PURE__ */ x(r, {
+					icon: /* @__PURE__ */ x(g, { className: "size-8" }),
 					title: "No earnings yet",
 					description: "Eligible affiliate rewards and other earnings will appear here."
-				}) : /* @__PURE__ */ S("div", {
-					className: "overflow-x-auto",
-					children: /* @__PURE__ */ C("table", {
-						className: "min-w-full text-sm",
-						children: [/* @__PURE__ */ S("thead", { children: /* @__PURE__ */ C("tr", {
-							className: "border-b border-border text-left text-muted-foreground",
-							children: [
-								/* @__PURE__ */ S("th", {
-									className: "px-3 py-2",
-									children: "Category"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "px-3 py-2",
-									children: "Description"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "px-3 py-2",
-									children: "Unit"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "px-3 py-2",
-									children: "Amount"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "px-3 py-2",
-									children: "Status"
-								}),
-								/* @__PURE__ */ S("th", {
-									className: "px-3 py-2",
-									children: "Created"
-								})
-							]
-						}) }), /* @__PURE__ */ S("tbody", { children: Y.map((e) => /* @__PURE__ */ C("tr", {
-							className: "border-b border-border/70 text-foreground",
-							children: [
-								/* @__PURE__ */ S("td", {
-									className: "px-3 py-2 font-medium",
-									children: e.sourceCategory
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "px-3 py-2",
-									children: e.description || e.sourceSubcategory || "-"
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "px-3 py-2",
-									children: e.unitType
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "px-3 py-2",
-									children: e.unitType === "CREDITS" ? `${e.amount.toLocaleString()} credits` : o(e.amount, e.currency || "USD")
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "px-3 py-2",
-									children: e.status
-								}),
-								/* @__PURE__ */ S("td", {
-									className: "px-3 py-2",
-									children: s(e.createdAt)
-								})
-							]
-						}, e.id)) })]
-					})
+				}) : /* @__PURE__ */ x(C, {
+					data: Z,
+					rowKey: (e) => e.id,
+					columns: E
 				})]
 			})
 		]
 	});
 };
 //#endregion
-export { w as EarningsPage };
+export { D as EarningsPage };
 
 //# sourceMappingURL=EarningsPage.js.map