@burdenoff/microfe-organization 2026.601.8 → 2026.616.1

package/dist/organization-management/modules/members/pages/OrganizationInviteAcceptancePage.js

@@ -0,0 +1,287 @@
+import { useOrgConsole as e } from "../../../providers/OrgConsoleProvider.js";
+import { useAcceptInvite as t, useOrganizationInvite as n, useRejectInvite as r } from "../hooks/useInvites.js";
+import { InviteStatus as i } from "../../../../generated/global-types.js";
+import { useTr as a } from "../../../shared/hooks/useTr.js";
+import { useOrganizationPageView as o } from "../../../hooks/useOrganizationPageView.js";
+import { useState as s } from "react";
+import { AlertTriangle as c, Ban as l, Building2 as u, CheckCircle as d, Clock as f, Home as p, Loader2 as m, Mail as h, XCircle as g } from "lucide-react";
+import { Badge as _ } from "@burdenoff/fe-libs/ui";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useParams as b } from "react-router-dom";
+//#region src/organization-management/modules/members/pages/OrganizationInviteAcceptancePage.tsx
+function x(e) {
+	if (!e) return null;
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? null : t.toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function S({ children: e }) {
+	return /* @__PURE__ */ v("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-10 sm:px-6",
+		children: /* @__PURE__ */ v("div", {
+			className: "mx-auto max-w-2xl",
+			children: e
+		})
+	});
+}
+function C({ icon: e, iconClass: t, title: n, description: r, email: i, primaryLabel: a, onPrimary: o }) {
+	return /* @__PURE__ */ v(S, { children: /* @__PURE__ */ y("div", {
+		className: "rounded-2xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-8 text-center",
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: `mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl ${t}`,
+				children: /* @__PURE__ */ v(e, { size: 28 })
+			}),
+			/* @__PURE__ */ v("h1", {
+				className: "text-2xl font-bold text-[var(--color-text-primary)]",
+				children: n
+			}),
+			/* @__PURE__ */ v("p", {
+				className: "mt-2 text-[var(--color-text-secondary)]",
+				children: r
+			}),
+			i ? /* @__PURE__ */ v("p", {
+				className: "mt-1 break-all text-sm text-[var(--color-text-muted)]",
+				children: i
+			}) : null,
+			/* @__PURE__ */ y("button", {
+				type: "button",
+				onClick: o,
+				className: "mt-6 inline-flex items-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 active:scale-[0.98]",
+				children: [/* @__PURE__ */ v(p, { size: 16 }), a]
+			})
+		]
+	}) });
+}
+function w() {
+	o("organizations.invite-acceptance");
+	let w = a(), { inviteId: T = "" } = b(), { basePath: E = "/organizations", navigate: D, currentUser: O, authToken: k } = e(), A = !!(k || O?.email), { invite: j, loading: M, error: N, refetch: P } = n(T, A), { acceptInvite: F } = t(), { rejectInvite: I } = r(), [L, R] = s(null), [z, B] = s(null), V = () => D(`${E}/invites/organizations`), H = async () => {
+		if (T) try {
+			R("accept"), B(null), await F(T), D(j?.organizationId ? `${E}/${j.organizationId}` : E);
+		} catch (e) {
+			B(e instanceof Error ? e.message : w("members.inviteAcceptance.acceptFailed", "Failed to accept invitation"));
+		} finally {
+			R(null);
+		}
+	}, U = async () => {
+		if (T) try {
+			R("reject"), B(null), await I(T), V();
+		} catch (e) {
+			B(e instanceof Error ? e.message : w("members.inviteAcceptance.rejectFailed", "Failed to reject invitation"));
+		} finally {
+			R(null);
+		}
+	};
+	if (!A) {
+		let e = encodeURIComponent(`${E}/invite/${T}`);
+		return /* @__PURE__ */ v(S, { children: /* @__PURE__ */ y("div", {
+			className: "rounded-2xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-8",
+			children: [
+				/* @__PURE__ */ y("div", {
+					className: "mb-4 flex items-center gap-3",
+					children: [/* @__PURE__ */ v("div", {
+						className: "rounded-xl bg-[var(--color-bg-subtle)] p-3",
+						children: /* @__PURE__ */ v(h, {
+							size: 24,
+							className: "text-[var(--color-text-primary)]"
+						})
+					}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
+						className: "text-2xl font-bold text-[var(--color-text-primary)]",
+						children: w("members.inviteAcceptance.signInRequired", "Sign in to view your invitation")
+					}), /* @__PURE__ */ v("p", {
+						className: "text-[var(--color-text-secondary)]",
+						children: w("members.inviteAcceptance.signInDescription", "Organization invitations require an authenticated account before you can review or accept them.")
+					})] })]
+				}),
+				/* @__PURE__ */ v("p", {
+					className: "mb-6 text-sm text-[var(--color-text-muted)]",
+					children: w("members.inviteAcceptance.signInHint", "Use the same email address that received the invitation, then come back here to accept or decline it.")
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "flex flex-col gap-3 sm:flex-row",
+					children: [/* @__PURE__ */ v("a", {
+						href: `/auth/login?returnTo=${e}`,
+						className: "inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 active:scale-[0.98]",
+						children: w("members.inviteAcceptance.signInButton", "Sign In")
+					}), /* @__PURE__ */ y("button", {
+						type: "button",
+						onClick: () => D(E),
+						className: "inline-flex items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-2.5 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)] active:scale-[0.98]",
+						children: [/* @__PURE__ */ v(p, { size: 16 }), w("members.inviteAcceptance.backToOrganizations", "Back to Organizations")]
+					})]
+				})
+			]
+		}) });
+	}
+	if (M) return /* @__PURE__ */ v(S, { children: /* @__PURE__ */ v("div", {
+		className: "flex min-h-[300px] items-center justify-center rounded-2xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)]",
+		children: /* @__PURE__ */ v(m, {
+			size: 28,
+			className: "animate-spin text-[var(--color-text-muted)]"
+		})
+	}) });
+	if (N) return /* @__PURE__ */ v(C, {
+		icon: c,
+		iconClass: "bg-[var(--color-status-error-bgSubtle)] text-[var(--color-status-error-text)]",
+		title: w("members.inviteAcceptance.errorTitle", "Error Loading Invitation"),
+		description: N.message,
+		primaryLabel: w("members.inviteAcceptance.tryAgain", "Try Again"),
+		onPrimary: () => {
+			P();
+		}
+	});
+	if (!j) return /* @__PURE__ */ v(C, {
+		icon: c,
+		iconClass: "bg-[var(--color-bg-subtle)] text-[var(--color-text-muted)]",
+		title: w("members.inviteAcceptance.notFoundTitle", "Invitation Not Found"),
+		description: w("members.inviteAcceptance.notFoundDescription", "This invitation link is invalid, has been removed, or was addressed to a different account."),
+		primaryLabel: w("members.inviteAcceptance.goToOrganizations", "Go to Organizations"),
+		onPrimary: () => D(E)
+	});
+	let W = j.expiresAt && new Date(j.expiresAt) < /* @__PURE__ */ new Date(), G = j.status === i.Pending && W ? i.Expired : j.status;
+	if (G === i.Accepted) return /* @__PURE__ */ v(C, {
+		icon: d,
+		iconClass: "bg-[var(--color-status-success-bgSubtle)] text-[var(--color-status-success-text)]",
+		title: w("members.inviteAcceptance.alreadyAcceptedTitle", "Invitation Already Accepted"),
+		description: w("members.inviteAcceptance.alreadyAcceptedDescription", "You have already accepted this invitation."),
+		email: j.email,
+		primaryLabel: w("members.inviteAcceptance.goToOrganization", "Go to Organization"),
+		onPrimary: () => D(`${E}/${j.organizationId}`)
+	});
+	if (G === i.Rejected) return /* @__PURE__ */ v(C, {
+		icon: g,
+		iconClass: "bg-[var(--color-bg-subtle)] text-[var(--color-text-muted)]",
+		title: w("members.inviteAcceptance.rejectedTitle", "Invitation Declined"),
+		description: w("members.inviteAcceptance.rejectedDescription", "This invitation was previously declined."),
+		email: j.email,
+		primaryLabel: w("members.inviteAcceptance.goToOrganizations", "Go to Organizations"),
+		onPrimary: () => D(E)
+	});
+	if (G === i.Expired) return /* @__PURE__ */ v(C, {
+		icon: f,
+		iconClass: "bg-[var(--color-status-warning-bgSubtle)] text-[var(--color-status-warning-text)]",
+		title: w("members.inviteAcceptance.expiredTitle", "Invitation Expired"),
+		description: w("members.inviteAcceptance.expiredDescription", "This invitation has expired. Please contact an organization admin for a new one."),
+		email: j.email,
+		primaryLabel: w("members.inviteAcceptance.goToOrganizations", "Go to Organizations"),
+		onPrimary: () => D(E)
+	});
+	if (G === i.Cancelled) return /* @__PURE__ */ v(C, {
+		icon: l,
+		iconClass: "bg-[var(--color-status-error-bgSubtle)] text-[var(--color-status-error-text)]",
+		title: w("members.inviteAcceptance.cancelledTitle", "Invitation Cancelled"),
+		description: w("members.inviteAcceptance.cancelledDescription", "This invitation was cancelled by the sender and is no longer valid."),
+		email: j.email,
+		primaryLabel: w("members.inviteAcceptance.goToOrganizations", "Go to Organizations"),
+		onPrimary: () => D(E)
+	});
+	let K = j.organization?.name ?? j.organizationId, q = x(j.expiresAt), J = L !== null;
+	return /* @__PURE__ */ v(S, { children: /* @__PURE__ */ y("div", {
+		className: "rounded-2xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-8",
+		children: [
+			/* @__PURE__ */ y("div", {
+				className: "mb-6 flex items-center gap-3",
+				children: [/* @__PURE__ */ v("div", {
+					className: "rounded-xl bg-[var(--color-bg-subtle)] p-3",
+					children: /* @__PURE__ */ v(u, {
+						size: 24,
+						className: "text-[var(--color-text-primary)]"
+					})
+				}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
+					className: "text-2xl font-bold text-[var(--color-text-primary)]",
+					children: w("members.inviteAcceptance.pageTitle", "Organization Invitation")
+				}), /* @__PURE__ */ y("p", {
+					className: "text-[var(--color-text-secondary)]",
+					children: [
+						w("members.inviteAcceptance.pageSubtitle", "You've been invited to join"),
+						" ",
+						/* @__PURE__ */ v("span", {
+							className: "font-medium text-[var(--color-text-primary)]",
+							children: K
+						})
+					]
+				})] })]
+			}),
+			/* @__PURE__ */ y("dl", {
+				className: "space-y-4 rounded-xl bg-[var(--color-bg-subtle)] p-5",
+				children: [
+					/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("dt", {
+						className: "text-sm font-medium text-[var(--color-text-muted)]",
+						children: w("members.inviteAcceptance.emailLabel", "Email Address")
+					}), /* @__PURE__ */ v("dd", {
+						className: "mt-1 break-all text-[var(--color-text-primary)]",
+						children: j.email
+					})] }),
+					/* @__PURE__ */ y("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ v("dt", {
+							className: "text-sm font-medium text-[var(--color-text-muted)]",
+							children: w("members.inviteAcceptance.roleLabel", "Role")
+						}), /* @__PURE__ */ v("dd", { children: /* @__PURE__ */ v(_, {
+							variant: "secondary",
+							children: j.role
+						}) })]
+					}),
+					q ? /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("dt", {
+						className: "text-sm font-medium text-[var(--color-text-muted)]",
+						children: w("members.inviteAcceptance.expiresLabel", "Expires")
+					}), /* @__PURE__ */ y("dd", {
+						className: "mt-1 flex items-center gap-2 text-[var(--color-text-primary)]",
+						children: [/* @__PURE__ */ v(f, {
+							size: 16,
+							className: "text-[var(--color-text-muted)]"
+						}), q]
+					})] }) : null,
+					j.message ? /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("dt", {
+						className: "text-sm font-medium text-[var(--color-text-muted)]",
+						children: w("members.inviteAcceptance.messageLabel", "Message")
+					}), /* @__PURE__ */ v("dd", {
+						className: "mt-1 text-[var(--color-text-secondary)]",
+						children: j.message
+					})] }) : null
+				]
+			}),
+			z ? /* @__PURE__ */ y("div", {
+				className: "mt-4 flex items-center gap-2 rounded-lg border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] p-3",
+				children: [/* @__PURE__ */ v(c, {
+					size: 16,
+					className: "shrink-0 text-[var(--color-status-error-text)]"
+				}), /* @__PURE__ */ v("p", {
+					className: "text-sm text-[var(--color-status-error-text)]",
+					children: z
+				})]
+			}) : null,
+			/* @__PURE__ */ y("div", {
+				className: "mt-6 flex flex-col gap-3 border-t border-[var(--color-border-default)] pt-6 sm:flex-row",
+				children: [/* @__PURE__ */ y("button", {
+					type: "button",
+					onClick: () => void H(),
+					disabled: J,
+					className: "inline-flex flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--color-status-success-bg)] px-6 py-3 font-medium text-[var(--color-text-inverse)] transition-all duration-200 hover:opacity-90 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50",
+					children: [L === "accept" ? /* @__PURE__ */ v(m, {
+						size: 16,
+						className: "animate-spin"
+					}) : /* @__PURE__ */ v(d, { size: 16 }), w("members.inviteAcceptance.acceptButton", "Accept Invitation")]
+				}), /* @__PURE__ */ y("button", {
+					type: "button",
+					onClick: () => void U(),
+					disabled: J,
+					className: "inline-flex flex-1 items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-3 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:border-[var(--color-status-error-border)] hover:bg-[var(--color-status-error-bgSubtle)] hover:text-[var(--color-status-error-text)] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50",
+					children: [L === "reject" ? /* @__PURE__ */ v(m, {
+						size: 16,
+						className: "animate-spin"
+					}) : /* @__PURE__ */ v(g, { size: 16 }), w("members.inviteAcceptance.declineButton", "Decline")]
+				})]
+			})
+		]
+	}) });
+}
+//#endregion
+export { w as OrganizationInviteAcceptancePage };
+
+//# sourceMappingURL=OrganizationInviteAcceptancePage.js.map

package/dist/organization-management/modules/members/pages/OrganizationInviteAcceptancePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationInviteAcceptancePage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/OrganizationInviteAcceptancePage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  Mail,\n  Loader2,\n  CheckCircle,\n  XCircle,\n  Clock,\n  AlertTriangle,\n  Ban,\n  Home,\n  Building2,\n} from 'lucide-react';\nimport { Badge } from '@burdenoff/fe-libs/ui';\nimport { useOrganizationInvite, useAcceptInvite, useRejectInvite } from '../hooks/useInvites';\nimport { InviteStatus } from '../../../../generated/global-types';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport { useOrganizationPageView } from '../../../hooks/useOrganizationPageView';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\n\n/**\n * OrganizationInviteAcceptancePage\n *\n * Per-invite acceptance page reached from the organization invite email link\n * (`/organizations/invite/:inviteId`). Mirrors the workspace invite-acceptance\n * flow: loads the single invite by id, renders the appropriate state machine\n * (PENDING → accept/reject, ACCEPTED/REJECTED/EXPIRED/CANCELLED), and gates the\n * unauthenticated case behind a sign-in CTA that returns the user here.\n *\n * The previous behaviour dropped the recipient on `/organizations/invites`\n * (the workspace-invites list tab) with no invite context, which rendered as\n * an empty page. The email now deep-links here with the invite id.\n */\nfunction formatDate(value?: string | null): string | null {\n  if (!value) return null;\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return null;\n  return date.toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n}\n\nfunction PageShell({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-10 sm:px-6\">\n      <div className=\"mx-auto max-w-2xl\">{children}</div>\n    </div>\n  );\n}\n\ninterface StatusViewProps {\n  icon: typeof CheckCircle;\n  iconClass: string;\n  title: string;\n  description: string;\n  email?: string;\n  primaryLabel: string;\n  onPrimary: () => void;\n}\n\nfunction StatusView({\n  icon: Icon,\n  iconClass,\n  title,\n  description,\n  email,\n  primaryLabel,\n  onPrimary,\n}: StatusViewProps) {\n  return (\n    <PageShell>\n      <div className=\"rounded-2xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-8 text-center\">\n        <div\n          className={`mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl ${iconClass}`}\n        >\n          <Icon size={28} />\n        </div>\n        <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">{title}</h1>\n        <p className=\"mt-2 text-[var(--color-text-secondary)]\">{description}</p>\n        {email ? (\n          <p className=\"mt-1 break-all text-sm text-[var(--color-text-muted)]\">{email}</p>\n        ) : null}\n        <button\n          type=\"button\"\n          onClick={onPrimary}\n          className=\"mt-6 inline-flex items-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 active:scale-[0.98]\"\n        >\n          <Home size={16} />\n          {primaryLabel}\n        </button>\n      </div>\n    </PageShell>\n  );\n}\n\nexport function OrganizationInviteAcceptancePage() {\n  useOrganizationPageView('organizations.invite-acceptance');\n  const tr = useTr();\n  const { inviteId = '' } = useParams<{ inviteId: string }>();\n  const { basePath = '/organizations', navigate, currentUser, authToken } = useOrgConsole();\n\n  const isAuthenticated = Boolean(authToken || currentUser?.email);\n  const { invite, loading, error, refetch } = useOrganizationInvite(inviteId, isAuthenticated);\n  const { acceptInvite } = useAcceptInvite();\n  const { rejectInvite } = useRejectInvite();\n\n  const [processing, setProcessing] = useState<'accept' | 'reject' | null>(null);\n  const [actionError, setActionError] = useState<string | null>(null);\n\n  const goToInvitesList = () => navigate(`${basePath}/invites/organizations`);\n\n  const handleAccept = async () => {\n    if (!inviteId) return;\n    try {\n      setProcessing('accept');\n      setActionError(null);\n      await acceptInvite(inviteId);\n      navigate(invite?.organizationId ? `${basePath}/${invite.organizationId}` : basePath);\n    } catch (err) {\n      setActionError(\n        err instanceof Error\n          ? err.message\n          : tr('members.inviteAcceptance.acceptFailed', 'Failed to accept invitation')\n      );\n    } finally {\n      setProcessing(null);\n    }\n  };\n\n  const handleReject = async () => {\n    if (!inviteId) return;\n    try {\n      setProcessing('reject');\n      setActionError(null);\n      await rejectInvite(inviteId);\n      goToInvitesList();\n    } catch (err) {\n      setActionError(\n        err instanceof Error\n          ? err.message\n          : tr('members.inviteAcceptance.rejectFailed', 'Failed to reject invitation')\n      );\n    } finally {\n      setProcessing(null);\n    }\n  };\n\n  // Unauthenticated — invitees must sign in with the invited email first.\n  if (!isAuthenticated) {\n    const returnTo = encodeURIComponent(`${basePath}/invite/${inviteId}`);\n    return (\n      <PageShell>\n        <div className=\"rounded-2xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-8\">\n          <div className=\"mb-4 flex items-center gap-3\">\n            <div className=\"rounded-xl bg-[var(--color-bg-subtle)] p-3\">\n              <Mail size={24} className=\"text-[var(--color-text-primary)]\" />\n            </div>\n            <div>\n              <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n                {tr('members.inviteAcceptance.signInRequired', 'Sign in to view your invitation')}\n              </h1>\n              <p className=\"text-[var(--color-text-secondary)]\">\n                {tr(\n                  'members.inviteAcceptance.signInDescription',\n                  'Organization invitations require an authenticated account before you can review or accept them.'\n                )}\n              </p>\n            </div>\n          </div>\n          <p className=\"mb-6 text-sm text-[var(--color-text-muted)]\">\n            {tr(\n              'members.inviteAcceptance.signInHint',\n              'Use the same email address that received the invitation, then come back here to accept or decline it.'\n            )}\n          </p>\n          <div className=\"flex flex-col gap-3 sm:flex-row\">\n            <a\n              href={`/auth/login?returnTo=${returnTo}`}\n              className=\"inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 active:scale-[0.98]\"\n            >\n              {tr('members.inviteAcceptance.signInButton', 'Sign In')}\n            </a>\n            <button\n              type=\"button\"\n              onClick={() => navigate(basePath)}\n              className=\"inline-flex items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-2.5 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)] active:scale-[0.98]\"\n            >\n              <Home size={16} />\n              {tr('members.inviteAcceptance.backToOrganizations', 'Back to Organizations')}\n            </button>\n          </div>\n        </div>\n      </PageShell>\n    );\n  }\n\n  if (loading) {\n    return (\n      <PageShell>\n        <div className=\"flex min-h-[300px] items-center justify-center rounded-2xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)]\">\n          <Loader2 size={28} className=\"animate-spin text-[var(--color-text-muted)]\" />\n        </div>\n      </PageShell>\n    );\n  }\n\n  if (error) {\n    return (\n      <StatusView\n        icon={AlertTriangle}\n        iconClass=\"bg-[var(--color-status-error-bgSubtle)] text-[var(--color-status-error-text)]\"\n        title={tr('members.inviteAcceptance.errorTitle', 'Error Loading Invitation')}\n        description={error.message}\n        primaryLabel={tr('members.inviteAcceptance.tryAgain', 'Try Again')}\n        onPrimary={() => {\n          void refetch();\n        }}\n      />\n    );\n  }\n\n  if (!invite) {\n    return (\n      <StatusView\n        icon={AlertTriangle}\n        iconClass=\"bg-[var(--color-bg-subtle)] text-[var(--color-text-muted)]\"\n        title={tr('members.inviteAcceptance.notFoundTitle', 'Invitation Not Found')}\n        description={tr(\n          'members.inviteAcceptance.notFoundDescription',\n          'This invitation link is invalid, has been removed, or was addressed to a different account.'\n        )}\n        primaryLabel={tr('members.inviteAcceptance.goToOrganizations', 'Go to Organizations')}\n        onPrimary={() => navigate(basePath)}\n      />\n    );\n  }\n\n  const isExpiredByDate = invite.expiresAt && new Date(invite.expiresAt) < new Date();\n  const effectiveStatus =\n    invite.status === InviteStatus.Pending && isExpiredByDate\n      ? InviteStatus.Expired\n      : invite.status;\n\n  if (effectiveStatus === InviteStatus.Accepted) {\n    return (\n      <StatusView\n        icon={CheckCircle}\n        iconClass=\"bg-[var(--color-status-success-bgSubtle)] text-[var(--color-status-success-text)]\"\n        title={tr('members.inviteAcceptance.alreadyAcceptedTitle', 'Invitation Already Accepted')}\n        description={tr(\n          'members.inviteAcceptance.alreadyAcceptedDescription',\n          'You have already accepted this invitation.'\n        )}\n        email={invite.email}\n        primaryLabel={tr('members.inviteAcceptance.goToOrganization', 'Go to Organization')}\n        onPrimary={() => navigate(`${basePath}/${invite.organizationId}`)}\n      />\n    );\n  }\n\n  if (effectiveStatus === InviteStatus.Rejected) {\n    return (\n      <StatusView\n        icon={XCircle}\n        iconClass=\"bg-[var(--color-bg-subtle)] text-[var(--color-text-muted)]\"\n        title={tr('members.inviteAcceptance.rejectedTitle', 'Invitation Declined')}\n        description={tr(\n          'members.inviteAcceptance.rejectedDescription',\n          'This invitation was previously declined.'\n        )}\n        email={invite.email}\n        primaryLabel={tr('members.inviteAcceptance.goToOrganizations', 'Go to Organizations')}\n        onPrimary={() => navigate(basePath)}\n      />\n    );\n  }\n\n  if (effectiveStatus === InviteStatus.Expired) {\n    return (\n      <StatusView\n        icon={Clock}\n        iconClass=\"bg-[var(--color-status-warning-bgSubtle)] text-[var(--color-status-warning-text)]\"\n        title={tr('members.inviteAcceptance.expiredTitle', 'Invitation Expired')}\n        description={tr(\n          'members.inviteAcceptance.expiredDescription',\n          'This invitation has expired. Please contact an organization admin for a new one.'\n        )}\n        email={invite.email}\n        primaryLabel={tr('members.inviteAcceptance.goToOrganizations', 'Go to Organizations')}\n        onPrimary={() => navigate(basePath)}\n      />\n    );\n  }\n\n  if (effectiveStatus === InviteStatus.Cancelled) {\n    return (\n      <StatusView\n        icon={Ban}\n        iconClass=\"bg-[var(--color-status-error-bgSubtle)] text-[var(--color-status-error-text)]\"\n        title={tr('members.inviteAcceptance.cancelledTitle', 'Invitation Cancelled')}\n        description={tr(\n          'members.inviteAcceptance.cancelledDescription',\n          'This invitation was cancelled by the sender and is no longer valid.'\n        )}\n        email={invite.email}\n        primaryLabel={tr('members.inviteAcceptance.goToOrganizations', 'Go to Organizations')}\n        onPrimary={() => navigate(basePath)}\n      />\n    );\n  }\n\n  // PENDING — show the acceptance UI.\n  const organizationName = invite.organization?.name ?? invite.organizationId;\n  const expiresLabel = formatDate(invite.expiresAt);\n  const busy = processing !== null;\n\n  return (\n    <PageShell>\n      <div className=\"rounded-2xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-8\">\n        <div className=\"mb-6 flex items-center gap-3\">\n          <div className=\"rounded-xl bg-[var(--color-bg-subtle)] p-3\">\n            <Building2 size={24} className=\"text-[var(--color-text-primary)]\" />\n          </div>\n          <div>\n            <h1 className=\"text-2xl font-bold text-[var(--color-text-primary)]\">\n              {tr('members.inviteAcceptance.pageTitle', 'Organization Invitation')}\n            </h1>\n            <p className=\"text-[var(--color-text-secondary)]\">\n              {tr('members.inviteAcceptance.pageSubtitle', \"You've been invited to join\")}{' '}\n              <span className=\"font-medium text-[var(--color-text-primary)]\">\n                {organizationName}\n              </span>\n            </p>\n          </div>\n        </div>\n\n        <dl className=\"space-y-4 rounded-xl bg-[var(--color-bg-subtle)] p-5\">\n          <div>\n            <dt className=\"text-sm font-medium text-[var(--color-text-muted)]\">\n              {tr('members.inviteAcceptance.emailLabel', 'Email Address')}\n            </dt>\n            <dd className=\"mt-1 break-all text-[var(--color-text-primary)]\">{invite.email}</dd>\n          </div>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <dt className=\"text-sm font-medium text-[var(--color-text-muted)]\">\n              {tr('members.inviteAcceptance.roleLabel', 'Role')}\n            </dt>\n            <dd>\n              <Badge variant=\"secondary\">{invite.role}</Badge>\n            </dd>\n          </div>\n          {expiresLabel ? (\n            <div>\n              <dt className=\"text-sm font-medium text-[var(--color-text-muted)]\">\n                {tr('members.inviteAcceptance.expiresLabel', 'Expires')}\n              </dt>\n              <dd className=\"mt-1 flex items-center gap-2 text-[var(--color-text-primary)]\">\n                <Clock size={16} className=\"text-[var(--color-text-muted)]\" />\n                {expiresLabel}\n              </dd>\n            </div>\n          ) : null}\n          {invite.message ? (\n            <div>\n              <dt className=\"text-sm font-medium text-[var(--color-text-muted)]\">\n                {tr('members.inviteAcceptance.messageLabel', 'Message')}\n              </dt>\n              <dd className=\"mt-1 text-[var(--color-text-secondary)]\">{invite.message}</dd>\n            </div>\n          ) : null}\n        </dl>\n\n        {actionError ? (\n          <div className=\"mt-4 flex items-center gap-2 rounded-lg border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] p-3\">\n            <AlertTriangle size={16} className=\"shrink-0 text-[var(--color-status-error-text)]\" />\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">{actionError}</p>\n          </div>\n        ) : null}\n\n        <div className=\"mt-6 flex flex-col gap-3 border-t border-[var(--color-border-default)] pt-6 sm:flex-row\">\n          <button\n            type=\"button\"\n            onClick={() => void handleAccept()}\n            disabled={busy}\n            className=\"inline-flex flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--color-status-success-bg)] px-6 py-3 font-medium text-[var(--color-text-inverse)] transition-all duration-200 hover:opacity-90 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50\"\n          >\n            {processing === 'accept' ? (\n              <Loader2 size={16} className=\"animate-spin\" />\n            ) : (\n              <CheckCircle size={16} />\n            )}\n            {tr('members.inviteAcceptance.acceptButton', 'Accept Invitation')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => void handleReject()}\n            disabled={busy}\n            className=\"inline-flex flex-1 items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-3 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:border-[var(--color-status-error-border)] hover:bg-[var(--color-status-error-bgSubtle)] hover:text-[var(--color-status-error-text)] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50\"\n          >\n            {processing === 'reject' ? (\n              <Loader2 size={16} className=\"animate-spin\" />\n            ) : (\n              <XCircle size={16} />\n            )}\n            {tr('members.inviteAcceptance.declineButton', 'Decline')}\n          </button>\n        </div>\n      </div>\n    </PageShell>\n  );\n}\n"],"mappings":"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"}