@object-ui/app-shell 3.3.0 → 3.3.2

package/dist/console/organizations/manage/AcceptInvitationPage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * AcceptInvitationPage
+ *
+ * Standalone page for accepting or rejecting an organization invitation.
+ * Route: /accept-invitation/:invitationId
+ */
+export declare function AcceptInvitationPage(): import("react/jsx-runtime").JSX.Element | null;

package/dist/console/organizations/manage/AcceptInvitationPage.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AcceptInvitationPage
+ *
+ * Standalone page for accepting or rejecting an organization invitation.
+ * Route: /accept-invitation/:invitationId
+ */
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Button } from '@object-ui/components';
+import { useAuth } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { Loader2, Building2, CheckCircle, XCircle } from 'lucide-react';
+import { toast } from 'sonner';
+export function AcceptInvitationPage() {
+    const { t } = useObjectTranslation();
+    const navigate = useNavigate();
+    const { invitationId } = useParams();
+    const { isAuthenticated, isLoading: isAuthLoading, getInvitation, acceptInvitation, rejectInvitation, switchOrganization } = useAuth();
+    const [invitation, setInvitation] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [isAccepting, setIsAccepting] = useState(false);
+    const [isDeclining, setIsDeclining] = useState(false);
+    // Redirect to login if not authenticated
+    useEffect(() => {
+        if (!isAuthLoading && !isAuthenticated) {
+            navigate('/login?redirect=' + encodeURIComponent(window.location.pathname));
+        }
+    }, [isAuthenticated, isAuthLoading, navigate]);
+    // Fetch invitation details
+    useEffect(() => {
+        if (!invitationId || !isAuthenticated)
+            return;
+        let cancelled = false;
+        setIsLoading(true);
+        setError(null);
+        getInvitation(invitationId)
+            .then((inv) => {
+            if (!cancelled)
+                setInvitation(inv);
+        })
+            .catch((err) => {
+            if (!cancelled)
+                setError(err instanceof Error ? err.message : 'Invitation not found or expired');
+        })
+            .finally(() => {
+            if (!cancelled)
+                setIsLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [invitationId, isAuthenticated, getInvitation]);
+    const handleAccept = async () => {
+        if (!invitation || !invitationId)
+            return;
+        setIsAccepting(true);
+        try {
+            await acceptInvitation(invitationId);
+            await switchOrganization(invitation.organizationId).catch(() => null);
+            toast.success(t('organization.accept.accepted', { defaultValue: 'Invitation accepted' }));
+            navigate('/home');
+        }
+        catch (err) {
+            toast.error(err instanceof Error
+                ? err.message
+                : t('organization.accept.acceptFailed', { defaultValue: 'Failed to accept invitation' }));
+            setIsAccepting(false);
+        }
+    };
+    const handleDecline = async () => {
+        if (!invitationId)
+            return;
+        setIsDeclining(true);
+        try {
+            await rejectInvitation(invitationId);
+            toast.success(t('organization.accept.declined', { defaultValue: 'Invitation declined' }));
+            navigate('/organizations');
+        }
+        catch (err) {
+            toast.error(err instanceof Error
+                ? err.message
+                : t('organization.accept.declineFailed', { defaultValue: 'Failed to decline invitation' }));
+            setIsDeclining(false);
+        }
+    };
+    // Show spinner while auth is loading
+    if (isAuthLoading) {
+        return (_jsx("div", { className: "flex min-h-svh items-center justify-center", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }));
+    }
+    // Will redirect if not authenticated — show nothing in the meantime
+    if (!isAuthenticated)
+        return null;
+    return (_jsx("div", { className: "flex min-h-svh items-center justify-center px-4 py-12 bg-background", children: _jsx("div", { className: "w-full max-w-md rounded-xl border bg-card p-8 shadow-sm", "data-testid": "accept-invitation-page", children: isLoading ? (_jsxs("div", { className: "flex flex-col items-center gap-4 py-8", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('organization.accept.loading', { defaultValue: 'Loading invitation…' }) })] })) : error ? (_jsxs("div", { className: "flex flex-col items-center gap-4 py-8 text-center", children: [_jsx(XCircle, { className: "h-10 w-10 text-destructive" }), _jsx("h1", { className: "text-xl font-semibold", children: t('organization.accept.errorTitle', { defaultValue: 'Invitation unavailable' }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: error }), _jsx(Button, { variant: "outline", onClick: () => navigate('/organizations'), children: t('organization.accept.goToOrgs', { defaultValue: 'Go to organizations' }) })] })) : invitation ? (_jsxs("div", { className: "flex flex-col items-center gap-6 text-center", children: [_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-primary/10", children: _jsx(Building2, { className: "h-7 w-7 text-primary" }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold", children: t('organization.accept.title', { defaultValue: 'You have been invited' }) }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: t('organization.accept.description', {
+                                    defaultValue: 'You have been invited to join {{orgName}} as {{role}}.',
+                                    orgName: invitation.organizationName ?? invitation.organizationId,
+                                    role: invitation.role,
+                                }) })] }), _jsxs("div", { className: "w-full rounded-lg border bg-muted/50 p-4 text-left space-y-2", children: [_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: t('organization.accept.organization', { defaultValue: 'Organization' }) }), _jsx("span", { className: "font-medium", children: invitation.organizationName ?? invitation.organizationId })] }), _jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: t('organization.accept.role', { defaultValue: 'Role' }) }), _jsx("span", { className: "font-medium capitalize", children: invitation.role })] }), invitation.expiresAt && (_jsxs("div", { className: "flex justify-between text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: t('organization.accept.expiresAt', { defaultValue: 'Expires' }) }), _jsx("span", { className: "font-medium", children: new Date(invitation.expiresAt).toLocaleDateString() })] }))] }), _jsxs("div", { className: "flex w-full gap-3", children: [_jsxs(Button, { variant: "outline", className: "flex-1", onClick: handleDecline, disabled: isDeclining || isAccepting, children: [isDeclining && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), t('organization.accept.decline', { defaultValue: 'Decline' })] }), _jsxs(Button, { className: "flex-1", onClick: handleAccept, disabled: isAccepting || isDeclining, children: [isAccepting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), _jsx(CheckCircle, { className: "mr-2 h-4 w-4" }), t('organization.accept.accept', { defaultValue: 'Accept invitation' })] })] })] })) : null }) }));
+}

package/dist/console/organizations/manage/InvitationsPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * InvitationsPage
+ *
+ * Lists organization invitations with filter tabs and per-invitation actions.
+ */
+export declare function InvitationsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/console/organizations/manage/InvitationsPage.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InvitationsPage
+ *
+ * Lists organization invitations with filter tabs and per-invitation actions.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { Avatar, AvatarFallback, Badge, Button, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Separator, } from '@object-ui/components';
+import { useAuth } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { Loader2, Copy, Check, X, Mail } from 'lucide-react';
+import { toast } from 'sonner';
+import { useOrgContext } from './orgContext';
+function buildAcceptUrl(invitationId) {
+    const base = import.meta.env?.BASE_URL ?? '/';
+    const normalized = base.endsWith('/') ? base : `${base}/`;
+    return `${window.location.origin}${normalized}accept-invitation/${invitationId}`;
+}
+function statusBadgeVariant(status) {
+    switch (status) {
+        case 'pending':
+            return 'outline';
+        case 'accepted':
+            return 'default';
+        case 'rejected':
+        case 'canceled':
+            return 'destructive';
+        default:
+            return 'secondary';
+    }
+}
+export function InvitationsPage() {
+    const { t } = useObjectTranslation();
+    const { org } = useOrgContext();
+    const { listInvitations, cancelInvitation } = useAuth();
+    const [invitations, setInvitations] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [filter, setFilter] = useState('all');
+    const [cancelingInvitation, setCancelingInvitation] = useState(null);
+    const [copiedId, setCopiedId] = useState(null);
+    const fetchInvitations = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const data = await listInvitations(org.id);
+            setInvitations(data);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load invitations');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [org.id, listInvitations]);
+    useEffect(() => {
+        fetchInvitations();
+    }, [fetchInvitations]);
+    const handleCopyLink = async (inv) => {
+        const url = buildAcceptUrl(inv.id);
+        try {
+            await navigator.clipboard.writeText(url);
+            setCopiedId(inv.id);
+            toast.success(t('organization.invitations.linkCopied', { defaultValue: 'Invitation link copied' }));
+            setTimeout(() => setCopiedId(null), 2000);
+        }
+        catch {
+            toast.error(t('organization.invitations.copyFailed', { defaultValue: 'Failed to copy link' }));
+        }
+    };
+    const handleCancel = async () => {
+        if (!cancelingInvitation)
+            return;
+        try {
+            await cancelInvitation(cancelingInvitation.id);
+            toast.success(t('organization.invitations.canceled', { defaultValue: 'Invitation canceled' }));
+            setCancelingInvitation(null);
+            fetchInvitations();
+        }
+        catch (err) {
+            toast.error(err instanceof Error
+                ? err.message
+                : t('organization.invitations.cancelFailed', { defaultValue: 'Failed to cancel invitation' }));
+        }
+    };
+    const filtered = filter === 'all' ? invitations : invitations.filter((inv) => inv.status === filter);
+    const statusCounts = {
+        all: invitations.length,
+        pending: invitations.filter((i) => i.status === 'pending').length,
+        accepted: invitations.filter((i) => i.status === 'accepted').length,
+        rejected: invitations.filter((i) => i.status === 'rejected').length,
+        canceled: invitations.filter((i) => i.status === 'canceled').length,
+    };
+    const tabs = ['all', 'pending', 'accepted', 'rejected', 'canceled'];
+    if (isLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center text-sm text-destructive", children: [error, _jsx(Button, { variant: "outline", size: "sm", className: "ml-4", onClick: fetchInvitations, children: t('common.retry', { defaultValue: 'Retry' }) })] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", "data-testid": "invitations-page", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("h2", { className: "text-lg font-semibold", children: t('organization.invitations.title', { defaultValue: 'Invitations' }) }) }), _jsx("div", { className: "flex gap-1 border-b", children: tabs.map((tab) => (_jsxs("button", { onClick: () => setFilter(tab), className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors capitalize ${filter === tab
+                        ? 'border-primary text-foreground'
+                        : 'border-transparent text-muted-foreground hover:text-foreground'}`, children: [t(`organization.invitations.status.${tab}`, { defaultValue: tab }), statusCounts[tab] > 0 && (_jsx("span", { className: "ml-1.5 rounded-full bg-muted px-1.5 py-0.5 text-xs", children: statusCounts[tab] }))] }, tab))) }), _jsx(Separator, {}), filtered.length === 0 ? (_jsx("div", { className: "rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground", children: t('organization.invitations.empty', { defaultValue: 'No invitations found.' }) })) : (_jsx("div", { className: "space-y-2", children: filtered.map((inv) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border bg-card p-3", "data-testid": `invitation-row-${inv.id}`, children: [_jsx(Avatar, { className: "h-9 w-9 shrink-0", children: _jsx(AvatarFallback, { className: "text-xs", children: _jsx(Mail, { className: "h-4 w-4" }) }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-medium text-sm", children: inv.email }), inv.expiresAt && (_jsxs("div", { className: "text-xs text-muted-foreground", children: [t('organization.invitations.expiresAt', { defaultValue: 'Expires' }), ' ', new Date(inv.expiresAt).toLocaleDateString()] }))] }), _jsx(Badge, { variant: "outline", className: "shrink-0 capitalize", children: inv.role }), _jsx(Badge, { variant: statusBadgeVariant(inv.status), className: "shrink-0 capitalize", children: t(`organization.invitations.status.${inv.status}`, { defaultValue: inv.status }) }), inv.status === 'pending' && (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8", onClick: () => handleCopyLink(inv), "aria-label": "Copy invitation link", children: copiedId === inv.id ? (_jsx(Check, { className: "h-4 w-4 text-green-600" })) : (_jsx(Copy, { className: "h-4 w-4" })) }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 text-destructive hover:text-destructive", onClick: () => setCancelingInvitation(inv), "aria-label": "Cancel invitation", children: _jsx(X, { className: "h-4 w-4" }) })] }))] }, inv.id))) })), _jsx(AlertDialog, { open: !!cancelingInvitation, onOpenChange: (open) => !open && setCancelingInvitation(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t('organization.invitations.cancelTitle', { defaultValue: 'Cancel invitation?' }) }), _jsx(AlertDialogDescription, { children: t('organization.invitations.cancelDescription', {
+                                        defaultValue: 'The invitation for {{email}} will be revoked.',
+                                        email: cancelingInvitation?.email ?? '',
+                                    }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('common.cancel', { defaultValue: 'Cancel' }) }), _jsx(AlertDialogAction, { className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", onClick: handleCancel, children: t('organization.invitations.cancelAction', { defaultValue: 'Cancel invitation' }) })] })] }) })] }));
+}

package/dist/console/organizations/manage/InviteMemberDialog.d.ts

@@ -0,0 +1,16 @@
+/**
+ * InviteMemberDialog
+ *
+ * Invites a new member to an organization. After creation, switches to a
+ * "share link" view so operators can copy the accept-invitation URL when no
+ * mailer is configured server-side.
+ */
+import type { AuthInvitation } from '@object-ui/auth';
+interface InviteMemberDialogProps {
+    organizationId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onInvited?: (invitation: AuthInvitation) => void;
+}
+export declare function InviteMemberDialog({ organizationId, open, onOpenChange, onInvited, }: InviteMemberDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/console/organizations/manage/InviteMemberDialog.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * InviteMemberDialog
+ *
+ * Invites a new member to an organization. After creation, switches to a
+ * "share link" view so operators can copy the accept-invitation URL when no
+ * mailer is configured server-side.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
+import { useAuth } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { Loader2, Copy, Check } from 'lucide-react';
+import { toast } from 'sonner';
+function buildAcceptUrl(invitationId) {
+    const base = import.meta.env?.BASE_URL ?? '/';
+    const normalized = base.endsWith('/') ? base : `${base}/`;
+    return `${window.location.origin}${normalized}accept-invitation/${invitationId}`;
+}
+export function InviteMemberDialog({ organizationId, open, onOpenChange, onInvited, }) {
+    const { t } = useObjectTranslation();
+    const { inviteMember } = useAuth();
+    const [email, setEmail] = useState('');
+    const [role, setRole] = useState('member');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const [createdInvitation, setCreatedInvitation] = useState(null);
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (open) {
+            setEmail('');
+            setRole('member');
+            setError(null);
+            setCreatedInvitation(null);
+            setCopied(false);
+        }
+    }, [open]);
+    const handleSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        if (!email.trim())
+            return;
+        setIsSubmitting(true);
+        setError(null);
+        try {
+            const inv = await inviteMember({
+                organizationId,
+                email: email.trim(),
+                role,
+            });
+            setCreatedInvitation(inv);
+            onInvited?.(inv);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to invite member');
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [email, role, organizationId, inviteMember, onInvited]);
+    const handleCopy = useCallback(async () => {
+        if (!createdInvitation)
+            return;
+        const url = buildAcceptUrl(createdInvitation.id);
+        try {
+            await navigator.clipboard.writeText(url);
+            setCopied(true);
+            toast.success(t('organization.invitations.linkCopied', { defaultValue: 'Invitation link copied' }));
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            toast.error(t('organization.invitations.copyFailed', { defaultValue: 'Failed to copy link' }));
+        }
+    }, [createdInvitation, t]);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { className: "sm:max-w-[480px]", "data-testid": "invite-member-dialog", children: createdInvitation ? (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('organization.invitations.sentTitle', { defaultValue: 'Invitation created' }) }), _jsx(DialogDescription, { children: t('organization.invitations.sentDescription', {
+                                    defaultValue: 'Share the link below with the invitee. They will need to sign in to accept.',
+                                }) })] }), _jsxs("div", { className: "grid gap-3 py-4", children: [_jsx(Label, { children: t('organization.invitations.linkLabel', { defaultValue: 'Accept link' }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { readOnly: true, value: buildAcceptUrl(createdInvitation.id), className: "font-mono text-xs", onFocus: (e) => e.currentTarget.select() }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: handleCopy, "aria-label": "Copy", children: copied ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Copy, { className: "h-4 w-4" }) })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('organization.invitations.invitedAs', {
+                                    defaultValue: '{{email}} invited as {{role}}',
+                                    email: createdInvitation.email,
+                                    role: createdInvitation.role,
+                                }) })] }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: () => onOpenChange(false), children: t('common.done', { defaultValue: 'Done' }) }) })] })) : (_jsxs("form", { onSubmit: handleSubmit, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('organization.invitations.inviteTitle', { defaultValue: 'Invite a member' }) }), _jsx(DialogDescription, { children: t('organization.invitations.inviteDescription', {
+                                    defaultValue: 'They will receive an invitation to join this organization.',
+                                }) })] }), _jsxs("div", { className: "grid gap-4 py-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "invite-email", children: t('organization.invitations.emailLabel', { defaultValue: 'Email' }) }), _jsx(Input, { id: "invite-email", type: "email", required: true, placeholder: "user@example.com", value: email, onChange: (e) => setEmail(e.target.value), autoFocus: true, "data-testid": "invite-email-input" })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: "invite-role", children: t('organization.invitations.roleLabel', { defaultValue: 'Role' }) }), _jsxs(Select, { value: role, onValueChange: (v) => setRole(v), children: [_jsx(SelectTrigger, { id: "invite-role", "data-testid": "invite-role-select", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "member", children: t('organization.roles.member', { defaultValue: 'Member' }) }), _jsx(SelectItem, { value: "admin", children: t('organization.roles.admin', { defaultValue: 'Admin' }) }), _jsx(SelectItem, { value: "owner", children: t('organization.roles.owner', { defaultValue: 'Owner' }) })] })] })] }), error && (_jsx("p", { className: "text-sm text-destructive", "data-testid": "invite-error", children: error }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), disabled: isSubmitting, children: t('common.cancel', { defaultValue: 'Cancel' }) }), _jsxs(Button, { type: "submit", disabled: isSubmitting || !email.trim(), "data-testid": "invite-submit", children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), t('organization.invitations.sendInvite', { defaultValue: 'Send invite' })] })] })] })) }) }));
+}

package/dist/console/organizations/manage/MembersPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * MembersPage
+ *
+ * Lists organization members, supports changing roles and removing members.
+ */
+export declare function MembersPage(): import("react/jsx-runtime").JSX.Element;

package/dist/console/organizations/manage/MembersPage.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MembersPage
+ *
+ * Lists organization members, supports changing roles and removing members.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { Avatar, AvatarFallback, AvatarImage, Badge, Button, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Separator, } from '@object-ui/components';
+import { useAuth } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { Loader2, MoreHorizontal, UserMinus, ShieldCheck } from 'lucide-react';
+import { toast } from 'sonner';
+import { useOrgContext } from './orgContext';
+import { InviteMemberDialog } from './InviteMemberDialog';
+function getMemberInitials(name) {
+    if (!name)
+        return '?';
+    return name
+        .split(/[\s_-]+/)
+        .map((w) => w[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+}
+export function MembersPage() {
+    const { t } = useObjectTranslation();
+    const { org } = useOrgContext();
+    const { getMembers, removeMember, updateMemberRole } = useAuth();
+    const [members, setMembers] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [isInviteOpen, setIsInviteOpen] = useState(false);
+    // AlertDialog state
+    const [removingMember, setRemovingMember] = useState(null);
+    const fetchMembers = useCallback(async () => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const data = await getMembers(org.id);
+            setMembers(data);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load members');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [org.id, getMembers]);
+    useEffect(() => {
+        fetchMembers();
+    }, [fetchMembers]);
+    const handleChangeRole = async (member, role) => {
+        try {
+            await updateMemberRole({ organizationId: org.id, memberId: member.id, role });
+            toast.success(t('organization.members.roleUpdated', { defaultValue: 'Role updated' }));
+            fetchMembers();
+        }
+        catch (err) {
+            toast.error(err instanceof Error
+                ? err.message
+                : t('organization.members.roleUpdateFailed', { defaultValue: 'Failed to update role' }));
+        }
+    };
+    const handleRemove = async () => {
+        if (!removingMember)
+            return;
+        try {
+            await removeMember({ organizationId: org.id, memberIdOrUserId: removingMember.id });
+            toast.success(t('organization.members.memberRemoved', { defaultValue: 'Member removed' }));
+            setRemovingMember(null);
+            fetchMembers();
+        }
+        catch (err) {
+            toast.error(err instanceof Error
+                ? err.message
+                : t('organization.members.removeFailed', { defaultValue: 'Failed to remove member' }));
+        }
+    };
+    if (isLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center text-sm text-destructive", children: [error, _jsx(Button, { variant: "outline", size: "sm", className: "ml-4", onClick: fetchMembers, children: t('common.retry', { defaultValue: 'Retry' }) })] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", "data-testid": "members-page", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h2", { className: "text-lg font-semibold", children: [t('organization.members.title', { defaultValue: 'Members' }), " (", members.length, ")"] }), _jsx(Button, { onClick: () => setIsInviteOpen(true), "data-testid": "invite-member-btn", children: t('organization.members.inviteMember', { defaultValue: 'Invite member' }) })] }), _jsx(Separator, {}), _jsx("div", { className: "space-y-2", children: members.map((member) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border bg-card p-3", "data-testid": `member-row-${member.id}`, children: [_jsxs(Avatar, { className: "h-9 w-9 shrink-0", children: [member.user?.image && _jsx(AvatarImage, { src: member.user.image, alt: member.user.name }), _jsx(AvatarFallback, { className: "text-xs font-medium", children: getMemberInitials(member.user?.name) })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-medium text-sm", children: member.user?.name ?? '—' }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: member.user?.email ?? '—' })] }), _jsx(Badge, { variant: "outline", className: "shrink-0 capitalize", children: member.role }), member.createdAt && (_jsx("span", { className: "hidden shrink-0 text-xs text-muted-foreground sm:block", children: new Date(member.createdAt).toLocaleDateString() })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", "aria-label": "Member actions", children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => handleChangeRole(member, 'owner'), disabled: member.role === 'owner', children: [_jsx(ShieldCheck, { className: "mr-2 h-4 w-4" }), t('organization.roles.owner', { defaultValue: 'Owner' })] }), _jsxs(DropdownMenuItem, { onClick: () => handleChangeRole(member, 'admin'), disabled: member.role === 'admin', children: [_jsx(ShieldCheck, { className: "mr-2 h-4 w-4" }), t('organization.roles.admin', { defaultValue: 'Admin' })] }), _jsxs(DropdownMenuItem, { onClick: () => handleChangeRole(member, 'member'), disabled: member.role === 'member', children: [_jsx(ShieldCheck, { className: "mr-2 h-4 w-4" }), t('organization.roles.member', { defaultValue: 'Member' })] }), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => setRemovingMember(member), children: [_jsx(UserMinus, { className: "mr-2 h-4 w-4" }), t('organization.members.removeMember', { defaultValue: 'Remove member' })] })] })] })] }, member.id))) }), _jsx(AlertDialog, { open: !!removingMember, onOpenChange: (open) => !open && setRemovingMember(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: t('organization.members.removeConfirmTitle', { defaultValue: 'Remove member?' }) }), _jsx(AlertDialogDescription, { children: t('organization.members.removeConfirmDescription', {
+                                        defaultValue: 'This will remove {{name}} from the organization. They will lose access immediately.',
+                                        name: removingMember?.user?.name ?? removingMember?.userId ?? '',
+                                    }) })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('common.cancel', { defaultValue: 'Cancel' }) }), _jsx(AlertDialogAction, { className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", onClick: handleRemove, children: t('organization.members.removeConfirmAction', { defaultValue: 'Remove' }) })] })] }) }), _jsx(InviteMemberDialog, { organizationId: org.id, open: isInviteOpen, onOpenChange: setIsInviteOpen, onInvited: () => fetchMembers() })] }));
+}

package/dist/console/organizations/manage/OrganizationLayout.d.ts

@@ -0,0 +1,8 @@
+/**
+ * OrganizationLayout
+ *
+ * Layout for `/organizations/:slug/*` management pages.
+ * Resolves the org by slug, ensures it is the active organization,
+ * renders nav tabs (Members / Invitations / Settings) and an Outlet.
+ */
+export declare function OrganizationLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/console/organizations/manage/OrganizationLayout.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * OrganizationLayout
+ *
+ * Layout for `/organizations/:slug/*` management pages.
+ * Resolves the org by slug, ensures it is the active organization,
+ * renders nav tabs (Members / Invitations / Settings) and an Outlet.
+ */
+import { useEffect, useMemo } from 'react';
+import { Outlet, useParams, NavLink, useNavigate } from 'react-router-dom';
+import { useAuth } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { Loader2, ArrowLeft } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { useNavigationContext } from '../../../context/NavigationContext';
+import { AppHeader } from '../../../layout/AppHeader';
+export function OrganizationLayout() {
+    const { t } = useObjectTranslation();
+    const navigate = useNavigate();
+    const { slug } = useParams();
+    const { organizations, activeOrganization, isOrganizationsLoading, switchOrganization, } = useAuth();
+    const { setContext } = useNavigationContext();
+    useEffect(() => {
+        setContext('home');
+    }, [setContext]);
+    const org = useMemo(() => (organizations ?? []).find((o) => o.slug === slug) ?? null, [organizations, slug]);
+    // Ensure the slug-matched org is the active one
+    useEffect(() => {
+        if (org && activeOrganization?.id !== org.id) {
+            switchOrganization(org.id).catch((err) => {
+                console.error('[OrganizationLayout] switch failed', err);
+            });
+        }
+    }, [org, activeOrganization, switchOrganization]);
+    if (isOrganizationsLoading) {
+        return (_jsx("div", { className: "flex min-h-svh w-full items-center justify-center", children: _jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }) }));
+    }
+    if (!org) {
+        return (_jsxs("div", { className: "mx-auto w-full max-w-3xl px-4 py-12 text-center", children: [_jsx("h1", { className: "text-xl font-semibold", children: t('organization.notFound', { defaultValue: 'Organization not found' }) }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: t('organization.notFoundDescription', {
+                        defaultValue: 'This organization does not exist or you do not have access.',
+                    }) }), _jsx(Button, { className: "mt-6", onClick: () => navigate('/organizations'), children: t('organization.backToList', { defaultValue: 'Back to organizations' }) })] }));
+    }
+    const tabs = [
+        { to: 'members', label: t('organization.tabs.members', { defaultValue: 'Members' }) },
+        { to: 'invitations', label: t('organization.tabs.invitations', { defaultValue: 'Invitations' }) },
+        { to: 'settings', label: t('organization.tabs.settings', { defaultValue: 'Settings' }) },
+    ];
+    return (_jsxs("div", { className: "flex min-h-svh w-full flex-col bg-background", "data-testid": "organization-layout", children: [_jsx("header", { className: "sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: _jsx(AppHeader, { variant: "orgs" }) }), _jsx("div", { className: "border-b", children: _jsxs("div", { className: "mx-auto w-full max-w-5xl px-4 sm:px-6 pt-6", children: [_jsxs("button", { onClick: () => navigate('/organizations'), className: "mb-3 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-3.5 w-3.5" }), t('organization.backToList', { defaultValue: 'Back to organizations' })] }), _jsx("div", { className: "flex items-center justify-between gap-4", children: _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "truncate text-2xl font-bold tracking-tight", children: org.name }), _jsx("p", { className: "text-xs text-muted-foreground", children: org.slug })] }) }), _jsx("nav", { className: "mt-4 flex gap-1 -mb-px", children: tabs.map((tab) => (_jsx(NavLink, { to: tab.to, end: true, className: ({ isActive }) => `border-b-2 px-3 py-2 text-sm font-medium transition-colors ${isActive
+                                    ? 'border-primary text-foreground'
+                                    : 'border-transparent text-muted-foreground hover:text-foreground'}`, children: tab.label }, tab.to))) })] }) }), _jsx("main", { className: "flex-1 min-w-0 overflow-auto", children: _jsx("div", { className: "mx-auto w-full max-w-5xl px-4 sm:px-6 py-6", children: _jsx(Outlet, { context: { org } }) }) })] }));
+}

package/dist/console/organizations/manage/SettingsPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * SettingsPage
+ *
+ * Organization settings: general info form + danger zone.
+ */
+export declare function SettingsPage(): import("react/jsx-runtime").JSX.Element;