@burdenoff/microfe-organization 2026.625.3 → 2026.731.1

package/dist/organization-management/modules/organizations/pages/OrganizationDetailPage.js

@@ -10,12 +10,12 @@ import { useWorkspacesByOrganization as c } from "../../workspaces/hooks/useWork
 import { WorkspaceCard as l } from "../../workspaces/components/WorkspaceCard.js";
 import { useMemo as u, useState as d } from "react";
 import { ArrowLeft as f, Briefcase as p, Building as m, Edit as h, UserPlus as g, Users as _ } from "lucide-react";
-import { CTAOverflowMenu as v, EmphasisPanel as y, GlassCard as b, IllustratedEmptyState as x } from "@burdenoff/fe-libs/ui";
-import { usePermissions as S } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { useParams as T } from "react-router-dom";
+import { CTAOverflowMenu as v, EmphasisPanel as y, GlassCard as b, IllustratedEmptyState as x, NextSteps as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
+import { usePermissions as w } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useParams as D } from "react-router-dom";
 //#region src/organization-management/modules/organizations/pages/OrganizationDetailPage.tsx
-function E(e) {
+function O(e) {
 	return new Date(e).toLocaleDateString("en-US", {
 		year: "numeric",
 		month: "long",
@@ -24,295 +24,347 @@ function E(e) {
 		minute: "2-digit"
 	});
 }
-function D() {
-	let D = r(), { id: O } = T();
-	s("organizations.detail", { organizationId: O });
-	let { navigate: k, basePath: A = "/organizations" } = e(), { hasPermission: j, isLoading: M } = S(), { organization: N, loading: P, error: F } = t(O ?? ""), [I, L] = d("overview"), { workspaces: R, loading: z, error: B, refetch: V } = c(I === "workspaces" && O ? O ?? "" : "", 50, 0), H = u(() => [{
+function k() {
+	let k = r(), { id: A } = D();
+	s("organizations.detail", { organizationId: A });
+	let { navigate: j, basePath: M = "/organizations" } = e(), { hasPermission: N, isLoading: P } = w(), { organization: F, loading: I, error: L } = t(A ?? ""), [R, z] = d("overview"), { workspaces: B, loading: V, error: H, refetch: U } = c(R === "workspaces" && A ? A ?? "" : "", 50, 0), W = u(() => [{
 		id: "overview",
-		label: D("organizations.detail.tab.overview", "Overview")
+		label: k("organizations.detail.tab.overview", "Overview")
 	}, {
 		id: "workspaces",
-		label: `${D("organizations.detail.tab.workspaces", "Workspaces")} (${I === "workspaces" ? R.length : N?.workspaceCount ?? 0})`
+		label: `${k("organizations.detail.tab.workspaces", "Workspaces")} (${R === "workspaces" ? B.length : F?.workspaceCount ?? 0})`
 	}], [
-		I,
-		N?.workspaceCount,
-		D,
-		R.length
+		R,
+		F?.workspaceCount,
+		k,
+		B.length
 	]);
-	return M ? /* @__PURE__ */ C("div", {
+	return P ? /* @__PURE__ */ T("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
-		children: /* @__PURE__ */ C(i, { message: D("common.loadingPermissions", "Loading permissions...") })
-	}) : j(o.ORG_READ) ? P ? /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ T(i, { message: k("common.loadingPermissions", "Loading permissions...") })
+	}) : N(o.ORG_READ) ? I ? /* @__PURE__ */ T("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
-		children: /* @__PURE__ */ C(i, { message: D("organizations.detail.loading", "Loading organization details...") })
-	}) : F || !N ? /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ T(i, { message: k("organizations.detail.loading", "Loading organization details...") })
+	}) : L || !F ? /* @__PURE__ */ T("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
-		children: /* @__PURE__ */ C(a, {
-			message: F?.message || D("organizations.detail.notFound", "Organization not found"),
+		children: /* @__PURE__ */ T(a, {
+			message: L?.message || k("organizations.detail.notFound", "Organization not found"),
 			action: {
-				label: D("organizations.create.back", "Back to Organizations"),
-				onClick: () => k(A)
+				label: k("organizations.create.back", "Back to Organizations"),
+				onClick: () => j(M)
 			}
 		})
-	}) : /* @__PURE__ */ C("div", {
+	}) : /* @__PURE__ */ T("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-200",
-		children: /* @__PURE__ */ w("div", {
+		children: /* @__PURE__ */ E("div", {
 			className: "mx-auto flex w-full max-w-7xl flex-col gap-6",
-			children: [/* @__PURE__ */ w("div", {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ w("button", {
-					type: "button",
-					onClick: () => k(A),
-					className: "inline-flex min-h-10 items-center gap-2 text-[var(--color-text-secondary)] transition-all duration-200 hover:text-[var(--color-text-primary)]",
-					children: [/* @__PURE__ */ C(f, {
-						size: 20,
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ C("span", {
-						className: "text-sm font-medium",
-						children: D("organizations.create.back", "Back to Organizations")
-					})]
-				}), /* @__PURE__ */ w(y, {
-					className: "flex flex-col gap-4 p-5 lg:flex-row lg:items-start lg:justify-between",
-					children: [/* @__PURE__ */ w("div", {
-						className: "flex min-w-0 items-start gap-4",
-						children: [/* @__PURE__ */ C("div", {
-							className: "flex size-16 items-center justify-center rounded-xl bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]",
-							children: /* @__PURE__ */ C(m, {
-								size: 28,
-								"aria-hidden": "true"
-							})
-						}), /* @__PURE__ */ w("div", {
-							className: "min-w-0 space-y-2",
-							children: [
-								/* @__PURE__ */ w("div", {
-									className: "flex flex-wrap items-start gap-3",
-									children: [/* @__PURE__ */ C("h1", {
-										className: "text-3xl font-bold text-[var(--color-text-primary)]",
-										children: N.name
-									}), /* @__PURE__ */ C(n, { status: N.status })]
+			children: [
+				/* @__PURE__ */ E("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ E("button", {
+						type: "button",
+						onClick: () => j(M),
+						className: "inline-flex min-h-10 items-center gap-2 text-[var(--color-text-secondary)] transition-all duration-200 hover:text-[var(--color-text-primary)]",
+						children: [/* @__PURE__ */ T(f, {
+							size: 20,
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ T("span", {
+							className: "text-sm font-medium",
+							children: k("organizations.create.back", "Back to Organizations")
+						})]
+					}), /* @__PURE__ */ E(y, {
+						className: "flex flex-col gap-4 p-5 lg:flex-row lg:items-start lg:justify-between",
+						children: [/* @__PURE__ */ E("div", {
+							className: "flex min-w-0 items-start gap-4",
+							children: [/* @__PURE__ */ T("div", {
+								className: "flex size-16 items-center justify-center rounded-xl bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]",
+								children: /* @__PURE__ */ T(m, {
+									size: 28,
+									"aria-hidden": "true"
+								})
+							}), /* @__PURE__ */ E("div", {
+								className: "min-w-0 space-y-2",
+								children: [
+									/* @__PURE__ */ E("div", {
+										className: "flex flex-wrap items-start gap-3",
+										children: [/* @__PURE__ */ T("h1", {
+											className: "text-3xl font-bold text-[var(--color-text-primary)]",
+											children: F.name
+										}), /* @__PURE__ */ T(n, { status: F.status })]
+									}),
+									/* @__PURE__ */ E("p", {
+										className: "break-all font-mono text-sm text-[var(--color-text-secondary)]",
+										children: ["/", F.slug]
+									}),
+									F.description ? /* @__PURE__ */ T("p", {
+										className: "max-w-2xl text-sm text-[var(--color-text-secondary)]",
+										children: F.description
+									}) : null,
+									/* @__PURE__ */ T(C, {
+										className: "max-w-2xl",
+										children: k("organizations.detail.purpose", "This is the home for one organization — review its profile and metadata here, jump into the Workspaces tab to see where teams collaborate, or manage who belongs. Use this page to keep an organization healthy and growing.")
+									})
+								]
+							})]
+						}), /* @__PURE__ */ T(v, {
+							primary: N(o.ORG_UPDATE) ? {
+								label: k("organizations.edit.title", "Edit Organization"),
+								icon: /* @__PURE__ */ T(h, {
+									size: 16,
+									"aria-hidden": "true"
 								}),
-								/* @__PURE__ */ w("p", {
-									className: "break-all font-mono text-sm text-[var(--color-text-secondary)]",
-									children: ["/", N.slug]
+								onSelect: () => j(`${M}/${A}/edit`)
+							} : void 0,
+							actions: [...N(o.MEMBER_LIST) ? [{
+								label: N(o.MEMBER_INVITE) ? k("organizations.detail.manageMembers", "Manage Members") : k("organizations.detail.viewMembers", "View Members"),
+								icon: /* @__PURE__ */ T(_, {
+									size: 16,
+									"aria-hidden": "true"
+								}),
+								onSelect: () => j(`${M}/${A}/members`)
+							}] : [], ...N(o.MEMBER_INVITE) ? [{
+								label: k("members.invite.button", "Invite Member"),
+								icon: /* @__PURE__ */ T(g, {
+									size: 16,
+									"aria-hidden": "true"
 								}),
-								N.description ? /* @__PURE__ */ C("p", {
-									className: "max-w-2xl text-sm text-[var(--color-text-secondary)]",
-									children: N.description
-								}) : null
-							]
+								onSelect: () => j(`${M}/${A}/members/invite`)
+							}] : []]
 						})]
-					}), /* @__PURE__ */ C(v, {
-						primary: j(o.ORG_UPDATE) ? {
-							label: D("organizations.edit.title", "Edit Organization"),
-							icon: /* @__PURE__ */ C(h, {
+					})]
+				}),
+				/* @__PURE__ */ T(S, {
+					storageKey: "organization-org-detail",
+					steps: [
+						...N(o.MEMBER_INVITE) ? [{
+							id: "invite",
+							label: k("organizations.detail.next.invite", "Invite a member"),
+							description: k("organizations.detail.next.inviteDesc", "Bring people into this organization so they can access its workspaces."),
+							icon: /* @__PURE__ */ T(g, {
 								size: 16,
 								"aria-hidden": "true"
 							}),
-							onSelect: () => k(`${A}/${O}/edit`)
-						} : void 0,
-						actions: [...j(o.MEMBER_LIST) ? [{
-							label: j(o.MEMBER_INVITE) ? D("organizations.detail.manageMembers", "Manage Members") : D("organizations.detail.viewMembers", "View Members"),
-							icon: /* @__PURE__ */ C(_, {
+							onClick: () => j(`${M}/${A}/members/invite`)
+						}] : [],
+						...N(o.WORKSPACE_CREATE) ? [{
+							id: "workspace",
+							label: k("organizations.detail.next.workspace", "Create a workspace"),
+							description: k("organizations.detail.next.workspaceDesc", "Give a team or project its own space to collaborate in."),
+							icon: /* @__PURE__ */ T(p, {
 								size: 16,
 								"aria-hidden": "true"
 							}),
-							onSelect: () => k(`${A}/${O}/members`)
-						}] : [], ...j(o.MEMBER_INVITE) ? [{
-							label: D("members.invite.button", "Invite Member"),
-							icon: /* @__PURE__ */ C(g, {
+							onClick: () => j(`${M}/workspaces/new?organizationId=${A}`)
+						}] : [],
+						...N(o.MEMBER_LIST) ? [{
+							id: "members",
+							label: k("organizations.detail.next.members", "Review members"),
+							description: k("organizations.detail.next.membersDesc", "See who belongs to this organization and manage their roles."),
+							icon: /* @__PURE__ */ T(_, {
 								size: 16,
 								"aria-hidden": "true"
 							}),
-							onSelect: () => k(`${A}/${O}/members/invite`)
-						}] : []]
-					})]
-				})]
-			}), /* @__PURE__ */ w(b, {
-				treatment: "plain",
-				className: "border-border-seam p-0",
-				children: [/* @__PURE__ */ C("div", {
-					className: "overflow-x-auto border-b border-[var(--color-border-seam)]",
-					children: /* @__PURE__ */ C("div", {
-						className: "flex min-w-max gap-2 px-4 pt-4 sm:px-6",
-						children: H.map((e) => {
-							let t = I === e.id;
-							return /* @__PURE__ */ C("button", {
-								type: "button",
-								onClick: () => L(e.id),
-								className: `inline-flex min-h-11 items-center rounded-t-lg border-b-2 px-4 py-3 text-sm font-medium transition-colors ${t ? "border-[var(--color-action-primary-bg)] text-[var(--color-action-primary-bg)]" : "border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"}`,
-								"aria-pressed": t,
-								children: e.label
-							}, e.id);
+							onClick: () => j(`${M}/${A}/members`)
+						}] : [],
+						...N(o.ORG_UPDATE) ? [{
+							id: "edit",
+							label: k("organizations.detail.next.edit", "Edit organization profile"),
+							description: k("organizations.detail.next.editDesc", "Update the name, slug, website, or description."),
+							icon: /* @__PURE__ */ T(h, {
+								size: 16,
+								"aria-hidden": "true"
+							}),
+							onClick: () => j(`${M}/${A}/edit`)
+						}] : []
+					]
+				}),
+				/* @__PURE__ */ E(b, {
+					treatment: "plain",
+					className: "border-border-seam p-0",
+					children: [/* @__PURE__ */ T("div", {
+						className: "overflow-x-auto border-b border-[var(--color-border-seam)]",
+						children: /* @__PURE__ */ T("div", {
+							className: "flex min-w-max gap-2 px-4 pt-4 sm:px-6",
+							children: W.map((e) => {
+								let t = R === e.id;
+								return /* @__PURE__ */ T("button", {
+									type: "button",
+									onClick: () => z(e.id),
+									className: `inline-flex min-h-11 items-center rounded-t-lg border-b-2 px-4 py-3 text-sm font-medium transition-colors ${t ? "border-[var(--color-action-primary-bg)] text-[var(--color-action-primary-bg)]" : "border-transparent text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"}`,
+									"aria-pressed": t,
+									children: e.label
+								}, e.id);
+							})
 						})
-					})
-				}), /* @__PURE__ */ C("div", {
-					className: "p-4 sm:p-6",
-					children: I === "overview" ? /* @__PURE__ */ w("div", {
-						className: "grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_320px]",
-						children: [/* @__PURE__ */ w(b, {
-							treatment: "plain",
-							className: "border-border-seam bg-[var(--color-bg-canvas)] p-5",
-							children: [/* @__PURE__ */ C("h2", {
-								className: "text-lg font-semibold text-[var(--color-text-primary)]",
-								children: D("organizations.detail.detailsSection", "Organization details")
-							}), /* @__PURE__ */ w("dl", {
-								className: "mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2",
-								children: [
-									/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("dt", {
-										className: "text-sm font-medium text-[var(--color-text-secondary)]",
-										children: D("common.name", "Name")
-									}), /* @__PURE__ */ C("dd", {
-										className: "mt-1 text-sm text-[var(--color-text-primary)]",
-										children: N.name
-									})] }),
-									/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("dt", {
-										className: "text-sm font-medium text-[var(--color-text-secondary)]",
-										children: D("common.slug", "Slug")
-									}), /* @__PURE__ */ C("dd", {
-										className: "mt-1 break-all font-mono text-sm text-[var(--color-text-primary)]",
-										children: N.slug
-									})] }),
-									/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("dt", {
-										className: "text-sm font-medium text-[var(--color-text-secondary)]",
-										children: D("common.status", "Status")
-									}), /* @__PURE__ */ C("dd", {
-										className: "mt-1",
-										children: /* @__PURE__ */ C(n, { status: N.status })
-									})] }),
-									/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("dt", {
-										className: "text-sm font-medium text-[var(--color-text-secondary)]",
-										children: D("organizations.detail.workspaceCount", "Workspace count")
-									}), /* @__PURE__ */ C("dd", {
-										className: "mt-1 text-sm text-[var(--color-text-primary)]",
-										children: N.workspaceCount ?? 0
-									})] }),
-									N.website ? /* @__PURE__ */ w("div", {
-										className: "sm:col-span-2",
-										children: [/* @__PURE__ */ C("dt", {
+					}), /* @__PURE__ */ T("div", {
+						className: "p-4 sm:p-6",
+						children: R === "overview" ? /* @__PURE__ */ E("div", {
+							className: "grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_320px]",
+							children: [/* @__PURE__ */ E(b, {
+								treatment: "plain",
+								className: "border-border-seam bg-[var(--color-bg-canvas)] p-5",
+								children: [/* @__PURE__ */ T("h2", {
+									className: "text-lg font-semibold text-[var(--color-text-primary)]",
+									children: k("organizations.detail.detailsSection", "Organization details")
+								}), /* @__PURE__ */ E("dl", {
+									className: "mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2",
+									children: [
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("dt", {
 											className: "text-sm font-medium text-[var(--color-text-secondary)]",
-											children: D("organizations.detail.website", "Website")
-										}), /* @__PURE__ */ C("dd", {
-											className: "mt-1 break-all text-sm",
-											children: /* @__PURE__ */ C("a", {
-												href: N.website,
-												target: "_blank",
-												rel: "noreferrer",
-												className: "text-[var(--color-action-primary-bg)] underline-offset-2 hover:underline",
-												children: N.website
-											})
-										})]
-									}) : null,
-									N.description ? /* @__PURE__ */ w("div", {
-										className: "sm:col-span-2",
-										children: [/* @__PURE__ */ C("dt", {
+											children: k("common.name", "Name")
+										}), /* @__PURE__ */ T("dd", {
+											className: "mt-1 text-sm text-[var(--color-text-primary)]",
+											children: F.name
+										})] }),
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("dt", {
 											className: "text-sm font-medium text-[var(--color-text-secondary)]",
-											children: D("common.description", "Description")
-										}), /* @__PURE__ */ C("dd", {
-											className: "mt-1 text-sm leading-6 text-[var(--color-text-primary)]",
-											children: N.description
-										})]
-									}) : null
-								]
-							})]
-						}), /* @__PURE__ */ w(b, {
-							treatment: "plain",
-							className: "border-border-seam bg-[var(--color-bg-canvas)] p-5 xl:sticky xl:top-6 xl:self-start",
-							children: [/* @__PURE__ */ C("h2", {
-								className: "text-lg font-semibold text-[var(--color-text-primary)]",
-								children: D("common.metadata", "Metadata")
-							}), /* @__PURE__ */ w("dl", {
-								className: "mt-5 space-y-4",
-								children: [
-									/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("dt", {
-										className: "text-sm font-medium text-[var(--color-text-secondary)]",
-										children: D("common.created", "Created")
-									}), /* @__PURE__ */ C("dd", {
-										className: "mt-1 text-sm text-[var(--color-text-primary)]",
-										children: E(N.createdAt)
-									})] }),
-									/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("dt", {
-										className: "text-sm font-medium text-[var(--color-text-secondary)]",
-										children: D("common.lastUpdated", "Last updated")
-									}), /* @__PURE__ */ C("dd", {
-										className: "mt-1 text-sm text-[var(--color-text-primary)]",
-										children: E(N.updatedAt)
-									})] }),
-									/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("dt", {
-										className: "text-sm font-medium text-[var(--color-text-secondary)]",
-										children: D("organizations.detail.tenantId", "Tenant ID")
-									}), /* @__PURE__ */ C("dd", {
-										className: "mt-1 break-all font-mono text-sm text-[var(--color-text-primary)]",
-										children: N.tenantId
-									})] })
-								]
-							})]
-						})]
-					}) : /* @__PURE__ */ w("section", {
-						className: "space-y-4",
-						children: [/* @__PURE__ */ w("div", {
-							className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-							children: [/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("h2", {
-								className: "text-lg font-semibold text-[var(--color-text-primary)]",
-								children: D("organizations.detail.workspacesTitle", "Organization workspaces")
-							}), /* @__PURE__ */ C("p", {
-								className: "text-sm text-[var(--color-text-secondary)]",
-								children: D("organizations.detail.workspacesSubtitle", "Create and manage workspaces for this organization.")
-							})] }), j(o.WORKSPACE_CREATE) && /* @__PURE__ */ w("button", {
-								type: "button",
-								onClick: () => k(`${A}/workspaces/new?organizationId=${O}`),
-								className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2.5 text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90",
-								children: [/* @__PURE__ */ C(p, {
-									size: 16,
-									"aria-hidden": "true"
-								}), /* @__PURE__ */ C("span", { children: D("workspaces.create.button", "Create Workspace") })]
+											children: k("common.slug", "Slug")
+										}), /* @__PURE__ */ T("dd", {
+											className: "mt-1 break-all font-mono text-sm text-[var(--color-text-primary)]",
+											children: F.slug
+										})] }),
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("dt", {
+											className: "text-sm font-medium text-[var(--color-text-secondary)]",
+											children: k("common.status", "Status")
+										}), /* @__PURE__ */ T("dd", {
+											className: "mt-1",
+											children: /* @__PURE__ */ T(n, { status: F.status })
+										})] }),
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("dt", {
+											className: "text-sm font-medium text-[var(--color-text-secondary)]",
+											children: k("organizations.detail.workspaceCount", "Workspace count")
+										}), /* @__PURE__ */ T("dd", {
+											className: "mt-1 text-sm text-[var(--color-text-primary)]",
+											children: F.workspaceCount ?? 0
+										})] }),
+										F.website ? /* @__PURE__ */ E("div", {
+											className: "sm:col-span-2",
+											children: [/* @__PURE__ */ T("dt", {
+												className: "text-sm font-medium text-[var(--color-text-secondary)]",
+												children: k("organizations.detail.website", "Website")
+											}), /* @__PURE__ */ T("dd", {
+												className: "mt-1 break-all text-sm",
+												children: /* @__PURE__ */ T("a", {
+													href: F.website,
+													target: "_blank",
+													rel: "noreferrer",
+													className: "text-[var(--color-action-primary-bg)] underline-offset-2 hover:underline",
+													children: F.website
+												})
+											})]
+										}) : null,
+										F.description ? /* @__PURE__ */ E("div", {
+											className: "sm:col-span-2",
+											children: [/* @__PURE__ */ T("dt", {
+												className: "text-sm font-medium text-[var(--color-text-secondary)]",
+												children: k("common.description", "Description")
+											}), /* @__PURE__ */ T("dd", {
+												className: "mt-1 text-sm leading-6 text-[var(--color-text-primary)]",
+												children: F.description
+											})]
+										}) : null
+									]
+								})]
+							}), /* @__PURE__ */ E(b, {
+								treatment: "plain",
+								className: "border-border-seam bg-[var(--color-bg-canvas)] p-5 xl:sticky xl:top-6 xl:self-start",
+								children: [/* @__PURE__ */ T("h2", {
+									className: "text-lg font-semibold text-[var(--color-text-primary)]",
+									children: k("common.metadata", "Metadata")
+								}), /* @__PURE__ */ E("dl", {
+									className: "mt-5 space-y-4",
+									children: [
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("dt", {
+											className: "text-sm font-medium text-[var(--color-text-secondary)]",
+											children: k("common.created", "Created")
+										}), /* @__PURE__ */ T("dd", {
+											className: "mt-1 text-sm text-[var(--color-text-primary)]",
+											children: O(F.createdAt)
+										})] }),
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("dt", {
+											className: "text-sm font-medium text-[var(--color-text-secondary)]",
+											children: k("common.lastUpdated", "Last updated")
+										}), /* @__PURE__ */ T("dd", {
+											className: "mt-1 text-sm text-[var(--color-text-primary)]",
+											children: O(F.updatedAt)
+										})] }),
+										/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("dt", {
+											className: "text-sm font-medium text-[var(--color-text-secondary)]",
+											children: k("organizations.detail.tenantId", "Tenant ID")
+										}), /* @__PURE__ */ T("dd", {
+											className: "mt-1 break-all font-mono text-sm text-[var(--color-text-primary)]",
+											children: F.tenantId
+										})] })
+									]
+								})]
 							})]
-						}), z ? /* @__PURE__ */ C("div", {
-							className: "py-8",
-							children: /* @__PURE__ */ C(i, { message: D("workspaces.list.loading", "Loading workspaces...") })
-						}) : B ? /* @__PURE__ */ C(a, {
-							message: B.message,
-							action: {
-								label: D("common.retry", "Retry"),
-								onClick: () => {
-									V();
-								}
-							}
-						}) : R.length > 0 ? /* @__PURE__ */ C("div", {
-							className: "grid grid-cols-1 gap-4 xl:grid-cols-2",
-							children: R.map((e) => /* @__PURE__ */ C(l, {
-								workspace: e,
-								showActions: !1,
-								onClick: (e) => {
-									k(`${A}/workspaces/${e.id}`);
-								}
-							}, e.id))
-						}) : /* @__PURE__ */ C("div", {
-							className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-canvas)] p-6",
-							children: /* @__PURE__ */ C(x, {
-								illustration: "empty-data",
-								title: D("workspaces.list.emptyTitle", "No workspaces yet"),
-								description: j(o.WORKSPACE_CREATE) ? D("workspaces.list.emptyDescription", "Create a workspace when this organization is ready to collaborate with teams or projects.") : D("workspaces.list.emptyDescriptionViewer", "No workspaces have been created in this organization yet."),
-								action: j(o.WORKSPACE_CREATE) ? /* @__PURE__ */ C("button", {
+						}) : /* @__PURE__ */ E("section", {
+							className: "space-y-4",
+							children: [/* @__PURE__ */ E("div", {
+								className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+								children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h2", {
+									className: "text-lg font-semibold text-[var(--color-text-primary)]",
+									children: k("organizations.detail.workspacesTitle", "Organization workspaces")
+								}), /* @__PURE__ */ T("p", {
+									className: "text-sm text-[var(--color-text-secondary)]",
+									children: k("organizations.detail.workspacesSubtitle", "Create and manage workspaces for this organization.")
+								})] }), N(o.WORKSPACE_CREATE) && /* @__PURE__ */ E("button", {
 									type: "button",
-									onClick: () => k(`${A}/workspaces/new?organizationId=${O}`),
-									className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:bg-[var(--color-action-primary-bgHover)]",
-									children: D("workspaces.create.button", "Create Workspace")
-								}) : void 0
-							})
-						})]
-					})
-				})]
-			})]
+									onClick: () => j(`${M}/workspaces/new?organizationId=${A}`),
+									className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2.5 text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90",
+									children: [/* @__PURE__ */ T(p, {
+										size: 16,
+										"aria-hidden": "true"
+									}), /* @__PURE__ */ T("span", { children: k("workspaces.create.button", "Create Workspace") })]
+								})]
+							}), V ? /* @__PURE__ */ T("div", {
+								className: "py-8",
+								children: /* @__PURE__ */ T(i, { message: k("workspaces.list.loading", "Loading workspaces...") })
+							}) : H ? /* @__PURE__ */ T(a, {
+								message: H.message,
+								action: {
+									label: k("common.retry", "Retry"),
+									onClick: () => {
+										U();
+									}
+								}
+							}) : B.length > 0 ? /* @__PURE__ */ T("div", {
+								className: "grid grid-cols-1 gap-4 xl:grid-cols-2",
+								children: B.map((e) => /* @__PURE__ */ T(l, {
+									workspace: e,
+									showActions: !1,
+									onClick: (e) => {
+										j(`${M}/workspaces/${e.id}`);
+									}
+								}, e.id))
+							}) : /* @__PURE__ */ T("div", {
+								className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-canvas)] p-6",
+								children: /* @__PURE__ */ T(x, {
+									illustration: "empty-data",
+									title: k("workspaces.list.emptyTitle", "No workspaces yet"),
+									description: N(o.WORKSPACE_CREATE) ? k("workspaces.list.emptyDescription", "Create a workspace when this organization is ready to collaborate with teams or projects.") : k("workspaces.list.emptyDescriptionViewer", "No workspaces have been created in this organization yet."),
+									action: N(o.WORKSPACE_CREATE) ? /* @__PURE__ */ T("button", {
+										type: "button",
+										onClick: () => j(`${M}/workspaces/new?organizationId=${A}`),
+										className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:bg-[var(--color-action-primary-bgHover)]",
+										children: k("workspaces.create.button", "Create Workspace")
+									}) : void 0
+								})
+							})]
+						})
+					})]
+				})
+			]
 		})
-	}) : /* @__PURE__ */ C("div", {
+	}) : /* @__PURE__ */ T("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ T("div", {
 			className: "p-8 text-center text-[var(--color-text-secondary)]",
-			children: D("organizations.detail.noPermission", "You don't have permission to view this organization.")
+			children: k("organizations.detail.noPermission", "You don't have permission to view this organization.")
 		})
 	});
 }
 //#endregion
-export { D as OrganizationDetailPage };
+export { k as OrganizationDetailPage };
 
 //# sourceMappingURL=OrganizationDetailPage.js.map