@burdenoff/microfe-devportal 2026.625.9 → 2026.626.1

package/dist/devportal/pages/OrganizationDetailPage.js

@@ -14,8 +14,9 @@ import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProv
 import { AlertCircle as y, AppWindow as b, ArrowRight as x, BarChart3 as S, Building2 as C, CheckCircle as w, DollarSign as T, Edit as E, ExternalLink as D, Loader2 as O, Plus as k, Settings as A, Shield as j, TrendingUp as M, Users as N } from "lucide-react";
 import { useParams as P } from "react-router-dom";
 import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
+import { EmphasisPanel as R, NextSteps as z } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/pages/OrganizationDetailPage.tsx
-function R(e) {
+function B(e) {
 	return {
 		id: e.id,
 		name: e.name,
@@ -58,7 +59,7 @@ function R(e) {
 		updatedAt: e.updatedAt
 	};
 }
-function z(e) {
+function V(e) {
 	return {
 		id: e.id,
 		organizationId: e.organizationId,
@@ -78,7 +79,7 @@ function z(e) {
 		updatedAt: e.updatedAt
 	};
 }
-var B = () => {
+var H = () => {
 	let { navigate: n, basePath: a } = e(), { orgId: s } = P(), { t: c } = v(), l = (e, t) => {
 		let n = c(e);
 		return n === e ? t : n;
@@ -123,7 +124,7 @@ var B = () => {
 		backLabel: l("devportal.backToOrganizations", "Back to Organizations"),
 		children: /* @__PURE__ */ I("div", {
 			className: "flex items-center justify-center py-12",
-			children: /* @__PURE__ */ I(O, { className: "h-8 w-8 animate-spin text-muted-foreground" })
+			children: /* @__PURE__ */ I(O, { className: "h-8 w-8 animate-spin text-text-secondary" })
 		})
 	});
 	if (D || !k?.developerOrganization) return /* @__PURE__ */ I(o, {
@@ -133,92 +134,124 @@ var B = () => {
 		children: /* @__PURE__ */ L("div", {
 			className: "flex flex-col items-center justify-center py-12 gap-4",
 			children: [
-				/* @__PURE__ */ I(y, { className: "h-12 w-12 text-destructive" }),
+				/* @__PURE__ */ I(y, { className: "h-12 w-12 text-status-error-text" }),
 				/* @__PURE__ */ I("h2", {
 					className: "text-lg font-semibold",
 					children: l("devportal.organizationNotFoundLower", "Organization not found")
 				}),
 				/* @__PURE__ */ I("p", {
-					className: "text-muted-foreground",
+					className: "text-text-secondary",
 					children: D?.message || l("devportal.organizationNotFoundDescription", "The organization you're looking for doesn't exist or you don't have access to it.")
 				}),
 				/* @__PURE__ */ I("button", {
 					onClick: () => M("/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",
+					className: "mt-4 inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 					children: l("devportal.backToOrganizations", "Back to Organizations")
 				})
 			]
 		})
 	});
-	let F = R(k.developerOrganization), B = (k.developerOrganization.members ?? []).map(z), G = j?.applications?.edges?.map((e) => e.node) ?? [], K = s ? G.filter((e) => e.developerOrganizationId === s) : G, q = parseInt(F.apiCallsUsed) / F.apiCallsLimit * 100, J = parseInt(F.storageUsed) / parseInt(F.storageLimit) * 100;
+	let F = B(k.developerOrganization), R = (k.developerOrganization.members ?? []).map(V), H = j?.applications?.edges?.map((e) => e.node) ?? [], q = s ? H.filter((e) => e.developerOrganizationId === s) : H, J = parseInt(F.apiCallsUsed) / F.apiCallsLimit * 100, Y = parseInt(F.storageUsed) / parseInt(F.storageLimit) * 100;
 	return /* @__PURE__ */ L(o, {
 		title: F.name,
 		description: F.description,
+		purpose: l("devportal.orgDetailPurpose", "This is the home for one organization — the apps it owns, the people who can work on them, and its store and billing settings. Invite teammates, add apps, and verify the org so your published listings look trustworthy."),
 		backLink: `${a}/organizations`,
 		backLabel: l("devportal.backToOrganizations", "Back to Organizations"),
 		actions: /* @__PURE__ */ L("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ L("button", {
 				onClick: () => n?.(`/billing/earnings?developerOrgId=${encodeURIComponent(F.id)}&developerOrgName=${encodeURIComponent(F.name)}`),
-				className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors",
+				className: "inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-bg-sunken transition-colors",
 				children: [/* @__PURE__ */ I(T, { size: 16 }), l("devportal.revenue", "Revenue")]
 			}), /* @__PURE__ */ L("button", {
 				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",
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50",
 				children: [/* @__PURE__ */ I(E, { size: 16 }), l("devportal.settings", "Settings")]
 			})]
 		}),
-		children: [/* @__PURE__ */ I("div", {
-			className: "border-b",
-			children: /* @__PURE__ */ I("nav", {
-				className: "-mb-px flex gap-4 overflow-x-auto",
-				role: "tablist",
-				"aria-label": l("devportal.organizationSections", "Organization sections"),
-				children: p.map((e) => {
-					let n = e.icon;
-					return /* @__PURE__ */ L("button", {
-						id: `organization-tab-${e.id}`,
-						role: "tab",
-						"aria-selected": d === e.id,
-						"aria-controls": `organization-panel-${e.id}`,
-						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__ */ I(n, { size: 16 }), e.label]
-					}, e.id);
+		children: [
+			/* @__PURE__ */ I("div", {
+				className: "border-b",
+				children: /* @__PURE__ */ I("nav", {
+					className: "-mb-px flex gap-4 overflow-x-auto",
+					role: "tablist",
+					"aria-label": l("devportal.organizationSections", "Organization sections"),
+					children: p.map((e) => {
+						let n = e.icon;
+						return /* @__PURE__ */ L("button", {
+							id: `organization-tab-${e.id}`,
+							role: "tab",
+							"aria-selected": d === e.id,
+							"aria-controls": `organization-panel-${e.id}`,
+							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-text-secondary hover:text-text-primary hover:border-muted-foreground"),
+							children: [/* @__PURE__ */ I(n, { size: 16 }), e.label]
+						}, e.id);
+					})
 				})
+			}),
+			/* @__PURE__ */ I(z, {
+				className: "mt-6",
+				storageKey: `devportal-org-${F.id}`,
+				steps: [
+					{
+						id: "invite-members",
+						label: l("devportal.inviteMembers", "Invite members"),
+						description: l("devportal.orgStepInvite", "Add teammates so they can build alongside you"),
+						icon: /* @__PURE__ */ I(N, { size: 16 }),
+						onClick: () => f("members")
+					},
+					{
+						id: "create-app",
+						label: l("devportal.createApp", "Create App"),
+						description: l("devportal.orgStepCreateApp", "Build a new application under this organization"),
+						icon: /* @__PURE__ */ I(b, { size: 16 }),
+						onClick: () => M("/apps/new")
+					},
+					{
+						id: "settings",
+						label: l("devportal.orgStepVerify", "Complete organization profile"),
+						description: l("devportal.orgStepVerifyDesc", "Add a logo and details, then request verification"),
+						icon: /* @__PURE__ */ I(E, { size: 16 }),
+						onClick: () => f("settings"),
+						done: !!F.isVerified
+					}
+				]
+			}),
+			/* @__PURE__ */ L("div", {
+				className: "mt-6",
+				id: `organization-panel-${d}`,
+				role: "tabpanel",
+				"aria-labelledby": `organization-tab-${d}`,
+				tabIndex: 0,
+				children: [
+					d === "overview" && /* @__PURE__ */ I(U, {
+						org: F,
+						apps: q,
+						members: R,
+						apiCallsPercent: J,
+						storagePercent: Y,
+						onNavigate: M,
+						onShowApps: () => f("apps")
+					}),
+					d === "apps" && /* @__PURE__ */ I(W, {
+						apps: q,
+						onNavigate: M
+					}),
+					d === "members" && /* @__PURE__ */ I(G, {
+						members: R,
+						onNavigate: M,
+						orgId: F.id
+					}),
+					d === "settings" && /* @__PURE__ */ I(K, { org: F })
+				]
 			})
-		}), /* @__PURE__ */ L("div", {
-			className: "mt-6",
-			id: `organization-panel-${d}`,
-			role: "tabpanel",
-			"aria-labelledby": `organization-tab-${d}`,
-			tabIndex: 0,
-			children: [
-				d === "overview" && /* @__PURE__ */ I(V, {
-					org: F,
-					apps: K,
-					members: B,
-					apiCallsPercent: q,
-					storagePercent: J,
-					onNavigate: M,
-					onShowApps: () => f("apps")
-				}),
-				d === "apps" && /* @__PURE__ */ I(H, {
-					apps: K,
-					onNavigate: M
-				}),
-				d === "members" && /* @__PURE__ */ I(U, {
-					members: B,
-					onNavigate: M,
-					orgId: F.id
-				}),
-				d === "settings" && /* @__PURE__ */ I(W, { org: F })
-			]
-		})]
+		]
 	});
-}, V = ({ org: e, apps: t, members: r, apiCallsPercent: i, storagePercent: a, onNavigate: o, onShowApps: f }) => {
+}, U = ({ org: e, apps: t, members: r, apiCallsPercent: i, storagePercent: a, onNavigate: o, onShowApps: f }) => {
 	let { t: m } = v(), h = (e, t) => {
 		let n = m(e);
 		return n === e ? t : n;
@@ -228,7 +261,7 @@ var B = () => {
 		children: [/* @__PURE__ */ L("div", {
 			className: "lg:col-span-2 space-y-6",
 			children: [
-				/* @__PURE__ */ L(l, {
+				/* @__PURE__ */ I(R, { children: /* @__PURE__ */ L(l, {
 					columns: 4,
 					children: [
 						/* @__PURE__ */ I(c, {
@@ -256,7 +289,7 @@ var B = () => {
 							icon: /* @__PURE__ */ I(S, { size: 20 })
 						})
 					]
-				}),
+				}) }),
 				/* @__PURE__ */ I(s, {
 					title: h("devportal.recentApplications", "Recent Applications"),
 					actions: /* @__PURE__ */ L("button", {
@@ -275,6 +308,7 @@ var B = () => {
 							onClick: () => o(`/apps/${e.id}`)
 						}, e.id))
 					}) : /* @__PURE__ */ I(n, {
+						illustration: "empty-data",
 						icon: /* @__PURE__ */ I(b, { size: 24 }),
 						title: h("devportal.noApplications", "No applications"),
 						description: h("devportal.createYourFirstApplication", "Create your first application")
@@ -284,13 +318,13 @@ var B = () => {
 					title: h("devportal.usageAndQuotas", "Usage & Quotas"),
 					children: [/* @__PURE__ */ L("div", {
 						className: "grid gap-4 sm:grid-cols-2",
-						children: [/* @__PURE__ */ I(G, {
+						children: [/* @__PURE__ */ I(q, {
 							label: h("devportal.apiCalls", "API Calls"),
 							used: parseInt(e.apiCallsUsed),
 							limit: e.apiCallsLimit,
 							percent: i,
 							format: "number"
-						}), /* @__PURE__ */ I(G, {
+						}), /* @__PURE__ */ I(q, {
 							label: h("devportal.storage", "Storage"),
 							used: parseInt(e.storageUsed),
 							limit: parseInt(e.storageLimit),
@@ -298,7 +332,7 @@ var B = () => {
 							format: "bytes"
 						})]
 					}), e.quotaResetAt && /* @__PURE__ */ L("p", {
-						className: "text-xs text-muted-foreground mt-2",
+						className: "text-xs text-text-secondary mt-2",
 						children: [
 							h("devportal.quotasResetOn", "Quotas reset on"),
 							" ",
@@ -349,18 +383,18 @@ var B = () => {
 							children: /* @__PURE__ */ L("div", {
 								className: "flex items-center gap-3",
 								children: [/* @__PURE__ */ I("div", {
-									className: "h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium text-primary",
+									className: "h-8 w-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center text-sm font-medium text-primary",
 									children: e.email?.charAt(0).toUpperCase() || "U"
 								}), /* @__PURE__ */ L("div", { children: [/* @__PURE__ */ I("p", {
 									className: "text-sm font-medium",
 									children: e.email
 								}), /* @__PURE__ */ I("p", {
-									className: "text-xs text-muted-foreground",
+									className: "text-xs text-text-secondary",
 									children: u[e.role]
 								})] })]
 							})
 						}, e.id)), r.length > 3 && /* @__PURE__ */ L("p", {
-							className: "text-xs text-muted-foreground",
+							className: "text-xs text-text-secondary",
 							children: [
 								"+",
 								r.length - 3,
@@ -390,7 +424,7 @@ var B = () => {
 			]
 		})]
 	});
-}, H = ({ apps: e, onNavigate: t }) => {
+}, W = ({ apps: e, onNavigate: t }) => {
 	let { t: r } = v(), i = (e, t) => {
 		let n = r(e);
 		return n === e ? t : n;
@@ -400,7 +434,7 @@ var B = () => {
 		children: [/* @__PURE__ */ L("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ L("p", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-text-secondary",
 				children: [
 					e.length,
 					" ",
@@ -408,7 +442,7 @@ var B = () => {
 				]
 			}), /* @__PURE__ */ L("button", {
 				onClick: () => t("/apps/new"),
-				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",
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 				children: [/* @__PURE__ */ I(k, { size: 16 }), i("devportal.createApp", "Create App")]
 			})]
 		}), e.length > 0 ? /* @__PURE__ */ I("div", {
@@ -418,17 +452,18 @@ var B = () => {
 				onClick: () => t(`/apps/${e.id}`)
 			}, e.id))
 		}) : /* @__PURE__ */ I(n, {
+			illustration: "empty-data",
 			icon: /* @__PURE__ */ I(b, { size: 32 }),
 			title: i("devportal.noApplications", "No applications"),
 			description: i("devportal.createFirstAppForOrg", "Create your first application for this organization"),
 			action: /* @__PURE__ */ L("button", {
 				onClick: () => t("/apps/new"),
-				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",
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
 				children: [/* @__PURE__ */ I(k, { size: 16 }), i("devportal.createApp", "Create App")]
 			})
 		})]
 	});
-}, U = ({ members: e, onNavigate: n, orgId: r }) => {
+}, G = ({ members: e, onNavigate: n, orgId: r }) => {
 	let { t: i } = v(), a = (e, t) => {
 		let n = i(e);
 		return n === e ? t : n;
@@ -438,7 +473,7 @@ var B = () => {
 		children: [/* @__PURE__ */ L("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ L("p", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-text-secondary",
 				children: [
 					e.length,
 					" ",
@@ -446,7 +481,7 @@ var B = () => {
 				]
 			}), /* @__PURE__ */ L("button", {
 				onClick: () => n(`/organizations/${r}/members`),
-				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",
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
 				children: [/* @__PURE__ */ I(k, { size: 16 }), a("devportal.inviteMember", "Invite Member")]
 			})]
 		}), /* @__PURE__ */ I(f, {
@@ -459,7 +494,7 @@ var B = () => {
 					render: (e) => /* @__PURE__ */ L("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ I("div", {
-							className: "h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-sm font-medium text-primary",
+							className: "h-8 w-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center text-sm font-medium text-primary",
 							children: e.email?.charAt(0).toUpperCase() || "U"
 						}), /* @__PURE__ */ I("span", {
 							className: "font-medium",
@@ -488,7 +523,7 @@ var B = () => {
 			]
 		})]
 	});
-}, W = ({ org: e }) => {
+}, K = ({ org: e }) => {
 	let { t } = v(), n = (e, n) => {
 		let r = t(e);
 		return r === e ? n : r;
@@ -591,13 +626,13 @@ var B = () => {
 						]
 					}) : n("devportal.notCertified", "Not certified")
 				}] }), !e.isVerified && /* @__PURE__ */ I("div", {
-					className: "mt-4 rounded-md border border-border p-4 space-y-3",
+					className: "mt-4 rounded-md border border-border-subtle p-4 space-y-3",
 					children: o ? /* @__PURE__ */ L("p", {
 						className: "text-sm text-status-success-text flex items-center gap-2",
 						children: [/* @__PURE__ */ I(w, { size: 14 }), n("devportal.verificationRequested", "Verification request submitted. Our team will review and contact you.")]
 					}) : /* @__PURE__ */ L(F, { children: [
 						/* @__PURE__ */ I("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: n("devportal.requestVerificationHint", "Get your organization verified to build trust with users. Choose a verification method:")
 						}),
 						/* @__PURE__ */ I("div", {
@@ -609,7 +644,7 @@ var B = () => {
 							].map((e) => /* @__PURE__ */ I("button", {
 								type: "button",
 								onClick: () => i(e),
-								className: `rounded-md border px-3 py-1 text-xs font-medium transition-colors ${r === e ? "bg-primary text-primary-foreground border-primary" : "border-border hover:bg-muted"}`,
+								className: `rounded-md border px-3 py-1 text-xs font-medium transition-colors ${r === e ? "bg-action-primary-bg text-action-primary-text border-primary" : "border-border-subtle hover:bg-bg-sunken"}`,
 								children: e === "domain" ? n("devportal.domainVerification", "Domain") : e === "document" ? n("devportal.documentVerification", "Document") : n("devportal.manualVerification", "Manual review")
 							}, e))
 						}),
@@ -620,7 +655,7 @@ var B = () => {
 								id: e.id,
 								method: 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 disabled:opacity-50",
+							className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
 							children: [u ? /* @__PURE__ */ I(O, {
 								size: 14,
 								className: "animate-spin"
@@ -631,13 +666,13 @@ var B = () => {
 			})
 		]
 	});
-}, G = ({ label: e, used: n, limit: r, percent: i, format: a }) => {
+}, q = ({ label: e, used: n, limit: r, percent: i, format: a }) => {
 	let { t: o } = v(), s = (e, t) => {
 		let n = o(e);
 		return n === e ? t : n;
 	}, c = (e) => a === "bytes" ? `${(e / (1024 * 1024 * 1024)).toFixed(1)} GB` : e >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(1)}K` : e.toLocaleString();
 	return /* @__PURE__ */ L("div", {
-		className: "rounded-lg border p-4",
+		className: "rounded-card border border-border-seam p-4",
 		children: [
 			/* @__PURE__ */ L("div", {
 				className: "flex items-center justify-between mb-2",
@@ -645,7 +680,7 @@ var B = () => {
 					className: "text-sm font-medium",
 					children: e
 				}), /* @__PURE__ */ L("span", {
-					className: "text-xs text-muted-foreground",
+					className: "text-xs text-text-secondary",
 					children: [
 						c(n),
 						" / ",
@@ -654,14 +689,14 @@ var B = () => {
 				})]
 			}),
 			/* @__PURE__ */ I("div", {
-				className: "h-2 rounded-full bg-muted overflow-hidden",
+				className: "h-2 rounded-full bg-bg-sunken overflow-hidden",
 				children: /* @__PURE__ */ I("div", {
-					className: t("h-full rounded-full transition-all", i > 90 ? "bg-status-error-bg-subtle" : i > 70 ? "bg-status-warning-bg-subtle" : "bg-primary"),
+					className: t("h-full rounded-full transition-all", i > 90 ? "bg-status-error-bg-subtle" : i > 70 ? "bg-status-warning-bg-subtle" : "bg-action-primary-bg"),
 					style: { width: `${Math.min(i, 100)}%` }
 				})
 			}),
 			/* @__PURE__ */ L("p", {
-				className: "text-xs text-muted-foreground mt-1",
+				className: "text-xs text-text-secondary mt-1",
 				children: [
 					i.toFixed(1),
 					"% ",
@@ -672,6 +707,6 @@ var B = () => {
 	});
 };
 //#endregion
-export { B as OrganizationDetailPage };
+export { H as OrganizationDetailPage };
 
 //# sourceMappingURL=OrganizationDetailPage.js.map