@burdenoff/microfe-devportal 2026.611.2 → 2026.616.1

package/dist/devportal/pages/OrganizationDetailPage.js

@@ -1,12 +1,12 @@
 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 { PageLayout as r, PageSection as i } from "../components/PageLayout.js";
-import { StatCard as a, StatCardGrid as o } from "../components/StatCard.js";
-import { ORG_ROLE_LABELS as s } from "../utils/constants.js";
-import { AppListItem as c } from "../components/AppCard.js";
-import { DataTable as l, DetailList as u } from "../components/DataTable.js";
-import { useGetApplicationsQuery as d, useGetOrganizationQuery as f } from "../../generated/global-operations.js";
+import { useGetApplicationsQuery as r, useGetOrganizationQuery as i } from "../../generated/global-operations.js";
+import { PageLayout as a, PageSection as o } from "../components/PageLayout.js";
+import { StatCard as s, StatCardGrid as c } from "../components/StatCard.js";
+import { ORG_ROLE_LABELS as l } from "../utils/constants.js";
+import { AppListItem as u } from "../components/AppCard.js";
+import { DataTable as d, DetailList as f } from "../components/DataTable.js";
 import { DEVPORTAL_PERMISSIONS as p } from "../constants/permissions.js";
 import { useDevportalPermission as m } from "../hooks/usePermission.js";
 import { useEffect as h, useState as g } from "react";
@@ -79,95 +79,95 @@ function L(e) {
 	};
 }
 var R = () => {
-	let { navigate: n, basePath: i } = e(), { orgId: a } = N(), { t: o } = _(), s = (e, t) => {
-		let n = o(e);
+	let { navigate: n, basePath: o } = e(), { orgId: s } = N(), { t: c } = _(), l = (e, t) => {
+		let n = c(e);
 		return n === e ? t : n;
-	}, { allowed: c } = m(p.ORG_UPDATE), [l, u] = g("overview"), b = [
+	}, { allowed: u } = m(p.ORG_UPDATE), [d, f] = g("overview"), b = [
 		{
 			id: "overview",
-			label: s("devportal.overview", "Overview"),
+			label: l("devportal.overview", "Overview"),
 			icon: S
 		},
 		{
 			id: "apps",
-			label: s("devportal.applications", "Applications"),
+			label: l("devportal.applications", "Applications"),
 			icon: y
 		},
 		{
 			id: "members",
-			label: s("devportal.members", "Members"),
+			label: l("devportal.members", "Members"),
 			icon: M
 		},
 		{
 			id: "settings",
-			label: s("devportal.settings", "Settings"),
+			label: l("devportal.settings", "Settings"),
 			icon: k
 		}
-	], { data: x, loading: C, error: E } = f({
-		variables: { id: a },
-		skip: !a
-	}), { data: O } = d({
+	], { data: x, loading: C, error: E } = i({
+		variables: { id: s },
+		skip: !s
+	}), { data: O } = r({
 		variables: { limit: 50 },
 		fetchPolicy: "cache-and-network"
 	}), A = (e) => {
-		n?.(`${i}${e}`);
+		n?.(`${o}${e}`);
 	};
 	if (h(() => {
 		let e = x?.developerOrganization?.name;
-		if (!a || !e) return;
+		if (!s || !e) return;
 		let t = window.__breadcrumbRegistry;
-		return t?.register(a, e), () => t?.unregister(a);
-	}, [a, x?.developerOrganization?.name]), C) return /* @__PURE__ */ P(r, {
-		title: s("devportal.loadingDots", "Loading..."),
-		backLink: `${i}/organizations`,
-		backLabel: s("devportal.backToOrganizations", "Back to Organizations"),
+		return t?.register(s, e), () => t?.unregister(s);
+	}, [s, x?.developerOrganization?.name]), C) return /* @__PURE__ */ P(a, {
+		title: l("devportal.loadingDots", "Loading..."),
+		backLink: `${o}/organizations`,
+		backLabel: l("devportal.backToOrganizations", "Back to Organizations"),
 		children: /* @__PURE__ */ P("div", {
 			className: "flex items-center justify-center py-12",
 			children: /* @__PURE__ */ P(D, { className: "h-8 w-8 animate-spin text-muted-foreground" })
 		})
 	});
-	if (E || !x?.developerOrganization) return /* @__PURE__ */ P(r, {
-		title: s("devportal.organizationNotFound", "Organization Not Found"),
-		backLink: `${i}/organizations`,
-		backLabel: s("devportal.backToOrganizations", "Back to Organizations"),
+	if (E || !x?.developerOrganization) return /* @__PURE__ */ P(a, {
+		title: l("devportal.organizationNotFound", "Organization Not Found"),
+		backLink: `${o}/organizations`,
+		backLabel: l("devportal.backToOrganizations", "Back to Organizations"),
 		children: /* @__PURE__ */ F("div", {
 			className: "flex flex-col items-center justify-center py-12 gap-4",
 			children: [
 				/* @__PURE__ */ P(v, { className: "h-12 w-12 text-destructive" }),
 				/* @__PURE__ */ P("h2", {
 					className: "text-lg font-semibold",
-					children: s("devportal.organizationNotFoundLower", "Organization not found")
+					children: l("devportal.organizationNotFoundLower", "Organization not found")
 				}),
 				/* @__PURE__ */ P("p", {
 					className: "text-muted-foreground",
-					children: E?.message || s("devportal.organizationNotFoundDescription", "The organization you're looking for doesn't exist or you don't have access to it.")
+					children: E?.message || l("devportal.organizationNotFoundDescription", "The organization you're looking for doesn't exist or you don't have access to it.")
 				}),
 				/* @__PURE__ */ P("button", {
 					onClick: () => A("/organizations"),
 					className: "mt-4 inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-					children: s("devportal.backToOrganizations", "Back to Organizations")
+					children: l("devportal.backToOrganizations", "Back to Organizations")
 				})
 			]
 		})
 	});
-	let j = I(x.developerOrganization), R = (x.developerOrganization.members ?? []).map(L), U = O?.applications?.edges?.map((e) => e.node) ?? [], W = a ? U.filter((e) => e.developerOrganizationId === a) : U, G = parseInt(j.apiCallsUsed) / j.apiCallsLimit * 100, K = parseInt(j.storageUsed) / parseInt(j.storageLimit) * 100;
-	return /* @__PURE__ */ F(r, {
+	let j = I(x.developerOrganization), R = (x.developerOrganization.members ?? []).map(L), U = O?.applications?.edges?.map((e) => e.node) ?? [], W = s ? U.filter((e) => e.developerOrganizationId === s) : U, G = parseInt(j.apiCallsUsed) / j.apiCallsLimit * 100, K = parseInt(j.storageUsed) / parseInt(j.storageLimit) * 100;
+	return /* @__PURE__ */ F(a, {
 		title: j.name,
 		description: j.description,
-		backLink: `${i}/organizations`,
-		backLabel: s("devportal.backToOrganizations", "Back to Organizations"),
+		backLink: `${o}/organizations`,
+		backLabel: l("devportal.backToOrganizations", "Back to Organizations"),
 		actions: /* @__PURE__ */ F("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ F("button", {
 				onClick: () => n?.(`/billing/earnings?developerOrgId=${encodeURIComponent(j.id)}&developerOrgName=${encodeURIComponent(j.name)}`),
 				className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors",
-				children: [/* @__PURE__ */ P(w, { size: 16 }), s("devportal.revenue", "Revenue")]
+				children: [/* @__PURE__ */ P(w, { size: 16 }), l("devportal.revenue", "Revenue")]
 			}), /* @__PURE__ */ F("button", {
-				onClick: () => u("settings"),
-				disabled: !c,
-				"aria-disabled": !c,
+				onClick: () => f("settings"),
+				disabled: !u,
+				"aria-disabled": !u,
 				className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
-				children: [/* @__PURE__ */ P(T, { size: 16 }), s("devportal.settings", "Settings")]
+				children: [/* @__PURE__ */ P(T, { size: 16 }), l("devportal.settings", "Settings")]
 			})]
 		}),
 		children: [/* @__PURE__ */ P("div", {
@@ -175,50 +175,50 @@ var R = () => {
 			children: /* @__PURE__ */ P("nav", {
 				className: "-mb-px flex gap-4 overflow-x-auto",
 				role: "tablist",
-				"aria-label": s("devportal.organizationSections", "Organization sections"),
+				"aria-label": l("devportal.organizationSections", "Organization sections"),
 				children: b.map((e) => {
 					let n = e.icon;
 					return /* @__PURE__ */ F("button", {
 						id: `organization-tab-${e.id}`,
 						role: "tab",
-						"aria-selected": l === e.id,
+						"aria-selected": d === e.id,
 						"aria-controls": `organization-panel-${e.id}`,
-						onClick: () => u(e.id),
-						className: t("flex items-center gap-2 border-b-2 px-1 py-3 text-sm font-medium transition-colors", l === e.id ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground"),
+						onClick: () => f(e.id),
+						className: t("flex items-center gap-2 border-b-2 px-1 py-3 text-sm font-medium transition-colors", d === e.id ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground"),
 						children: [/* @__PURE__ */ P(n, { size: 16 }), e.label]
 					}, e.id);
 				})
 			})
 		}), /* @__PURE__ */ F("div", {
 			className: "mt-6",
-			id: `organization-panel-${l}`,
+			id: `organization-panel-${d}`,
 			role: "tabpanel",
-			"aria-labelledby": `organization-tab-${l}`,
+			"aria-labelledby": `organization-tab-${d}`,
 			tabIndex: 0,
 			children: [
-				l === "overview" && /* @__PURE__ */ P(z, {
+				d === "overview" && /* @__PURE__ */ P(z, {
 					org: j,
 					apps: W,
 					members: R,
 					apiCallsPercent: G,
 					storagePercent: K,
 					onNavigate: A,
-					onShowApps: () => u("apps")
+					onShowApps: () => f("apps")
 				}),
-				l === "apps" && /* @__PURE__ */ P(B, {
+				d === "apps" && /* @__PURE__ */ P(B, {
 					apps: W,
 					onNavigate: A
 				}),
-				l === "members" && /* @__PURE__ */ P(V, {
+				d === "members" && /* @__PURE__ */ P(V, {
 					members: R,
 					onNavigate: A,
 					orgId: j.id
 				}),
-				l === "settings" && /* @__PURE__ */ P(H, { org: j })
+				d === "settings" && /* @__PURE__ */ P(H, { org: j })
 			]
 		})]
 	});
-}, z = ({ org: e, apps: t, members: r, apiCallsPercent: l, storagePercent: d, onNavigate: f, onShowApps: p }) => {
+}, z = ({ org: e, apps: t, members: r, apiCallsPercent: i, storagePercent: a, onNavigate: d, onShowApps: p }) => {
 	let { t: m } = _(), h = (e, t) => {
 		let n = m(e);
 		return n === e ? t : n;
@@ -228,15 +228,15 @@ var R = () => {
 		children: [/* @__PURE__ */ F("div", {
 			className: "lg:col-span-2 space-y-6",
 			children: [
-				/* @__PURE__ */ F(o, {
+				/* @__PURE__ */ F(c, {
 					columns: 4,
 					children: [
-						/* @__PURE__ */ P(a, {
+						/* @__PURE__ */ P(s, {
 							title: h("devportal.publishedApps", "Published Apps"),
 							value: `${e.publishedApps}/${e.totalApps}`,
 							icon: /* @__PURE__ */ P(y, { size: 20 })
 						}),
-						/* @__PURE__ */ P(a, {
+						/* @__PURE__ */ P(s, {
 							title: h("devportal.totalInstalls", "Total Installs"),
 							value: e.totalInstalls.toLocaleString(),
 							icon: /* @__PURE__ */ P(j, { size: 20 }),
@@ -245,19 +245,19 @@ var R = () => {
 								label: h("devportal.thisMonth", "this month")
 							}
 						}),
-						/* @__PURE__ */ P(a, {
+						/* @__PURE__ */ P(s, {
 							title: h("devportal.totalRevenue", "Total Revenue"),
 							value: `$${e.totalRevenue.toLocaleString()}`,
 							icon: /* @__PURE__ */ P(w, { size: 20 })
 						}),
-						/* @__PURE__ */ P(a, {
+						/* @__PURE__ */ P(s, {
 							title: h("devportal.avgRating", "Avg Rating"),
 							value: e.averageRating ? `${e.averageRating.toFixed(1)} ★` : h("devportal.notAvailable", "N/A"),
 							icon: /* @__PURE__ */ P(x, { size: 20 })
 						})
 					]
 				}),
-				/* @__PURE__ */ P(i, {
+				/* @__PURE__ */ P(o, {
 					title: h("devportal.recentApplications", "Recent Applications"),
 					actions: /* @__PURE__ */ F("button", {
 						onClick: p,
@@ -270,9 +270,9 @@ var R = () => {
 					}),
 					children: t.length > 0 ? /* @__PURE__ */ P("div", {
 						className: "space-y-2",
-						children: t.slice(0, 3).map((e) => /* @__PURE__ */ P(c, {
+						children: t.slice(0, 3).map((e) => /* @__PURE__ */ P(u, {
 							app: e,
-							onClick: () => f(`/apps/${e.id}`)
+							onClick: () => d(`/apps/${e.id}`)
 						}, e.id))
 					}) : /* @__PURE__ */ P(n, {
 						icon: /* @__PURE__ */ P(y, { size: 24 }),
@@ -280,7 +280,7 @@ var R = () => {
 						description: h("devportal.createYourFirstApplication", "Create your first application")
 					})
 				}),
-				/* @__PURE__ */ F(i, {
+				/* @__PURE__ */ F(o, {
 					title: h("devportal.usageAndQuotas", "Usage & Quotas"),
 					children: [/* @__PURE__ */ F("div", {
 						className: "grid gap-4 sm:grid-cols-2",
@@ -288,13 +288,13 @@ var R = () => {
 							label: h("devportal.apiCalls", "API Calls"),
 							used: parseInt(e.apiCallsUsed),
 							limit: e.apiCallsLimit,
-							percent: l,
+							percent: i,
 							format: "number"
 						}), /* @__PURE__ */ P(U, {
 							label: h("devportal.storage", "Storage"),
 							used: parseInt(e.storageUsed),
 							limit: parseInt(e.storageLimit),
-							percent: d,
+							percent: a,
 							format: "bytes"
 						})]
 					}), e.quotaResetAt && /* @__PURE__ */ F("p", {
@@ -310,9 +310,9 @@ var R = () => {
 		}), /* @__PURE__ */ F("div", {
 			className: "space-y-6",
 			children: [
-				/* @__PURE__ */ P(i, {
+				/* @__PURE__ */ P(o, {
 					title: h("devportal.revenueSummary", "Revenue Summary"),
-					children: /* @__PURE__ */ P(u, { items: [
+					children: /* @__PURE__ */ P(f, { items: [
 						{
 							label: h("devportal.totalRevenue", "Total Revenue"),
 							value: `$${e.totalRevenue.toLocaleString()}`
@@ -335,10 +335,10 @@ var R = () => {
 						}
 					] })
 				}),
-				/* @__PURE__ */ P(i, {
+				/* @__PURE__ */ P(o, {
 					title: h("devportal.teamMembers", "Team Members"),
 					actions: /* @__PURE__ */ P("button", {
-						onClick: () => f(`/organizations/${e.id}/members`),
+						onClick: () => d(`/organizations/${e.id}/members`),
 						className: "text-sm text-primary hover:underline",
 						children: h("devportal.manage", "Manage")
 					}),
@@ -356,7 +356,7 @@ var R = () => {
 									children: e.email
 								}), /* @__PURE__ */ P("p", {
 									className: "text-xs text-muted-foreground",
-									children: s[e.role]
+									children: l[e.role]
 								})] })]
 							})
 						}, e.id)), r.length > 3 && /* @__PURE__ */ F("p", {
@@ -370,7 +370,7 @@ var R = () => {
 						})]
 					})
 				}),
-				/* @__PURE__ */ P(i, {
+				/* @__PURE__ */ P(o, {
 					title: h("devportal.links", "Links"),
 					children: /* @__PURE__ */ F("div", {
 						className: "space-y-2",
@@ -413,7 +413,7 @@ var R = () => {
 			})]
 		}), e.length > 0 ? /* @__PURE__ */ P("div", {
 			className: "space-y-2",
-			children: e.map((e) => /* @__PURE__ */ P(c, {
+			children: e.map((e) => /* @__PURE__ */ P(u, {
 				app: e,
 				onClick: () => t(`/apps/${e.id}`)
 			}, e.id))
@@ -449,7 +449,7 @@ var R = () => {
 				className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
 				children: [/* @__PURE__ */ P(O, { size: 16 }), a("devportal.inviteMember", "Invite Member")]
 			})]
-		}), /* @__PURE__ */ P(l, {
+		}), /* @__PURE__ */ P(d, {
 			data: e,
 			keyField: "id",
 			columns: [
@@ -472,7 +472,7 @@ var R = () => {
 					header: a("devportal.roleColumn", "Role"),
 					render: (e) => /* @__PURE__ */ P("span", {
 						className: t("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", e.role === "OWNER" ? "bg-accent-purple-subtle text-accent-purple" : e.role === "ADMIN" ? "bg-status-info-bg-subtle text-status-info-text" : e.role === "DEVELOPER" ? "bg-status-success-bg-subtle text-status-success-text" : "bg-bg-sunken text-text-primary"),
-						children: s[e.role]
+						children: l[e.role]
 					})
 				},
 				{
@@ -496,9 +496,9 @@ var R = () => {
 	return /* @__PURE__ */ F("div", {
 		className: "space-y-6 max-w-2xl",
 		children: [
-			/* @__PURE__ */ P(i, {
+			/* @__PURE__ */ P(o, {
 				title: n("devportal.organizationDetails", "Organization Details"),
-				children: /* @__PURE__ */ P(u, { items: [
+				children: /* @__PURE__ */ P(f, { items: [
 					{
 						label: n("devportal.organizationId", "Organization ID"),
 						value: /* @__PURE__ */ P("code", {
@@ -528,9 +528,9 @@ var R = () => {
 					}
 				] })
 			}),
-			/* @__PURE__ */ P(i, {
+			/* @__PURE__ */ P(o, {
 				title: n("devportal.legalInformation", "Legal Information"),
-				children: /* @__PURE__ */ P(u, { items: [
+				children: /* @__PURE__ */ P(f, { items: [
 					{
 						label: n("devportal.legalEntityName", "Legal Entity Name"),
 						value: e.legalEntityName || n("devportal.notProvided", "Not provided")
@@ -564,9 +564,9 @@ var R = () => {
 					}
 				] })
 			}),
-			/* @__PURE__ */ P(i, {
+			/* @__PURE__ */ P(o, {
 				title: n("devportal.verificationStatus", "Verification Status"),
-				children: /* @__PURE__ */ P(u, { items: [{
+				children: /* @__PURE__ */ P(f, { items: [{
 					label: n("devportal.verifiedLabel", "Verified"),
 					value: e.isVerified ? /* @__PURE__ */ F("span", {
 						className: "text-status-success-text flex items-center gap-1",