@orthacms/users-admin 0.0.0-reserve.0

package/dist/lib/presentation/pages/InviteMemberPage/index.js

@@ -0,0 +1,346 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Link, Navigate } from 'react-router-dom';
+import { ArrowLeft, ArrowRight, Info, Search, Users } from 'lucide-react';
+import { PageTopBar } from '@orthacms/shell-admin';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { Alert, AlertDescription, Button, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Container, ContainerHeader, FieldGroup, InputField, InputGroup, InputGroupAddon, InputGroupInput, Label, RadioGroup, RadioGroupItem, Spinner, Stepper, WizardFooter, WizardStepCard, cn } from '@orthacms/design-system';
+import { useInviteMemberFlow } from '../../../application/useInviteMemberFlow';
+import { useWorkspaceOptions } from '../../../application/useWorkspaceOptions';
+import { Email } from '../../../domain/value-objects/email';
+import { MemberAvatar } from '../../components/MemberAvatar';
+import { InviteSent } from '../../components/InviteSent';
+import { WorkspaceOptionsSkeleton } from '../../components/MembersSkeleton';
+import { useDocumentTitle } from '@orthacms/utils-admin';
+const messages = defineMessages({
+    title: { id: 'users.invitePage.title', defaultMessage: 'Invite a member' },
+    sentTitle: {
+        id: 'users.invitePage.sentTitle',
+        defaultMessage: 'Invite created'
+    },
+    sentSubtitle: {
+        id: 'users.invitePage.sentSubtitle',
+        defaultMessage: 'One step left, and it’s yours: get the link below to them. Nobody can join without it.'
+    },
+    subtitle: {
+        id: 'users.invitePage.subtitle',
+        defaultMessage: 'Add someone to Ortha in three short steps: who they are, what they can do, and which workspaces they can reach.'
+    },
+    back: { id: 'users.invitePage.back', defaultMessage: 'Back to members' },
+    crumbMembers: {
+        id: 'users.invitePage.crumbMembers',
+        defaultMessage: 'Members'
+    },
+    // Rail
+    stepDetails: {
+        id: 'users.invitePage.stepDetails',
+        defaultMessage: 'Details'
+    },
+    stepDetailsHint: {
+        id: 'users.invitePage.stepDetailsHint',
+        defaultMessage: 'Who you’re inviting'
+    },
+    stepRole: { id: 'users.invitePage.stepRole', defaultMessage: 'Role' },
+    stepRoleHint: {
+        id: 'users.invitePage.stepRoleHint',
+        defaultMessage: 'What they can do'
+    },
+    stepWorkspaces: {
+        id: 'users.invitePage.stepWorkspaces',
+        defaultMessage: 'Workspaces'
+    },
+    stepWorkspacesHint: {
+        id: 'users.invitePage.stepWorkspacesHint',
+        defaultMessage: 'What they can reach'
+    },
+    stepAria: {
+        id: 'users.invitePage.stepAria',
+        defaultMessage: 'Step {number}: {label}'
+    },
+    summaryAccess: {
+        id: 'users.invitePage.summaryAccess',
+        defaultMessage: '{count, plural, =0 {No workspaces} one {# workspace} other {# workspaces}}'
+    },
+    summaryAllWorkspaces: {
+        id: 'users.invitePage.summaryAllWorkspaces',
+        defaultMessage: 'All workspaces'
+    },
+    // Step 1 — Details
+    detailsTitle: {
+        id: 'users.invitePage.detailsTitle',
+        defaultMessage: 'Who are you inviting?'
+    },
+    detailsDescription: {
+        id: 'users.invitePage.detailsDescription',
+        defaultMessage: 'We’ll send a join link to this address. A name is optional — they can set their own when they accept.'
+    },
+    emailLabel: { id: 'users.invitePage.emailLabel', defaultMessage: 'Email' },
+    emailInvalid: {
+        id: 'users.invitePage.emailInvalid',
+        defaultMessage: 'Enter a valid email address'
+    },
+    nameLabel: {
+        id: 'users.invitePage.nameLabel',
+        defaultMessage: 'Name (optional)'
+    },
+    detailsInfo: {
+        id: 'users.invitePage.detailsInfo',
+        defaultMessage: 'Until they accept the invite, they appear in the members list as “Invited” and can’t sign in. You can resend or revoke the invite anytime.'
+    },
+    continueToRole: {
+        id: 'users.invitePage.continueToRole',
+        defaultMessage: 'Continue to role'
+    },
+    // Step 2 — Role
+    roleTitle: {
+        id: 'users.invitePage.roleTitle',
+        defaultMessage: 'What can they do?'
+    },
+    roleDescription: {
+        id: 'users.invitePage.roleDescription',
+        defaultMessage: 'Pick the access level for this member.'
+    },
+    roleAdmin: { id: 'users.role.admin', defaultMessage: 'Admin' },
+    roleAdminHint: {
+        id: 'users.invitePage.roleAdminHint',
+        defaultMessage: 'Full control of Ortha. Manages members, roles, and settings, and can reach every workspace and all of its content.'
+    },
+    roleContributor: {
+        id: 'users.role.contributor',
+        defaultMessage: 'Contributor'
+    },
+    roleContributorHint: {
+        id: 'users.invitePage.roleContributorHint',
+        defaultMessage: 'Works on content — creates, edits, and publishes in the workspaces they’re assigned to. Can’t manage members or settings.'
+    },
+    roleViewer: { id: 'users.role.viewer', defaultMessage: 'Viewer' },
+    roleViewerHint: {
+        id: 'users.invitePage.roleViewerHint',
+        defaultMessage: 'Read-only. Browses content in assigned workspaces but can’t make changes.'
+    },
+    roleInfo: {
+        id: 'users.invitePage.roleInfo',
+        defaultMessage: 'A member has one global role that applies across Ortha — it isn’t set per workspace. You can change it later from the members list.'
+    },
+    continueToWorkspaces: {
+        id: 'users.invitePage.continueToWorkspaces',
+        defaultMessage: 'Continue to workspaces'
+    },
+    // Step 3 — Workspaces
+    workspacesTitle: {
+        id: 'users.invitePage.workspacesTitle',
+        defaultMessage: 'Which workspaces can they reach?'
+    },
+    workspacesDescription: {
+        id: 'users.invitePage.workspacesDescription',
+        defaultMessage: 'Give this member access to all workspaces, or pick specific ones. You can change access later.'
+    },
+    modeAllTitle: {
+        id: 'users.invitePage.modeAllTitle',
+        defaultMessage: 'All workspaces'
+    },
+    modeAllDescription: {
+        id: 'users.invitePage.modeAllDescription',
+        defaultMessage: 'Add them to every workspace ({count}). Newly created workspaces aren’t included automatically.'
+    },
+    modeSpecificTitle: {
+        id: 'users.invitePage.modeSpecificTitle',
+        defaultMessage: 'Specific workspaces'
+    },
+    modeSpecificDescription: {
+        id: 'users.invitePage.modeSpecificDescription',
+        defaultMessage: 'Choose exactly which workspaces they can reach.'
+    },
+    workspacesInfo: {
+        id: 'users.invitePage.workspacesInfo',
+        defaultMessage: 'Membership only controls which workspaces a person can reach — what they can do inside one comes from their role above. You can change access anytime from a workspace.'
+    },
+    workspacesSearch: {
+        id: 'users.invitePage.workspacesSearch',
+        defaultMessage: 'Search workspaces'
+    },
+    workspacesNoMatch: {
+        id: 'users.invitePage.workspacesNoMatch',
+        defaultMessage: 'No workspaces match your search.'
+    },
+    workspacesEmpty: {
+        id: 'users.invitePage.workspacesEmpty',
+        defaultMessage: 'There are no workspaces yet. You can invite this member now and assign access once a workspace exists.'
+    },
+    workspacesError: {
+        id: 'users.invitePage.workspacesError',
+        defaultMessage: 'Couldn’t load workspaces. Try again in a moment.'
+    },
+    selectedCount: {
+        id: 'users.invitePage.selectedCount',
+        defaultMessage: '{count, plural, =0 {None selected} one {# selected} other {# selected}}'
+    },
+    back2: { id: 'users.invitePage.backLabel', defaultMessage: 'Back' },
+    submit: { id: 'users.invitePage.submit', defaultMessage: 'Send invite' },
+    submitting: {
+        id: 'users.invitePage.submitting',
+        defaultMessage: 'Sending invite…'
+    },
+    emailTaken: {
+        id: 'users.invitePage.emailTaken',
+        defaultMessage: 'A member with this email already exists.'
+    },
+    failed: {
+        id: 'users.invitePage.failed',
+        defaultMessage: 'Couldn’t send the invite. Please try again.'
+    }
+});
+/** The two workspace-access modes, mirroring the workspace create wizard. */
+const WORKSPACE_MODE_TILES = [
+    {
+        value: 'all',
+        title: messages.modeAllTitle,
+        description: messages.modeAllDescription
+    },
+    {
+        value: 'specific',
+        title: messages.modeSpecificTitle,
+        description: messages.modeSpecificDescription
+    }
+];
+/** A muted, icon-led note for the extra context shown on each step. */
+function InfoNote({ children }) {
+    return (_jsxs("div", { className: "mt-4 flex gap-2.5 rounded-xl border bg-muted/40 p-3 text-xs text-muted-foreground", children: [_jsx(Info, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }), _jsx("p", { children: children })] }));
+}
+/**
+ * Full-page, three-step invite wizard (Details → Role → Workspaces) at
+ * `/users/invite`, on the design-system wizard chrome. Gated on `users:create`
+ * — the server enforces the same — so a user without it is redirected.
+ */
+export function InviteMemberPage() {
+    const intl = useIntl();
+    // Names this route in the tab strip, the window list, the history
+    // and a screen reader's window announcement. Every private route but
+    // Workspaces was still titled a bare "Admin" (WCAG 2.4.2, `ORT-140`).
+    useDocumentTitle(intl.formatMessage(messages.title));
+    const canInvite = useHasPermission('users:create');
+    const flow = useInviteMemberFlow();
+    const [step, setStep] = useState(1);
+    const [maxReached, setMaxReached] = useState(1);
+    const [email, setEmail] = useState('');
+    const [emailTouched, setEmailTouched] = useState(false);
+    const [name, setName] = useState('');
+    const [role, setRole] = useState('viewer');
+    const [selected, setSelected] = useState(new Set());
+    const [wsMode, setWsMode] = useState('specific');
+    const [wsSearch, setWsSearch] = useState('');
+    // Prefetch the workspace list once the user has moved past the first step.
+    const workspaces = useWorkspaceOptions(canInvite && maxReached >= 2);
+    if (!canInvite) {
+        return _jsx(Navigate, { to: "/users", replace: true });
+    }
+    const emailValid = Email.isValid(email.trim());
+    const emailError = emailTouched && !emailValid
+        ? intl.formatMessage(messages.emailInvalid)
+        : undefined;
+    const roles = [
+        {
+            value: 'admin',
+            label: intl.formatMessage(messages.roleAdmin),
+            hint: intl.formatMessage(messages.roleAdminHint)
+        },
+        {
+            value: 'contributor',
+            label: intl.formatMessage(messages.roleContributor),
+            hint: intl.formatMessage(messages.roleContributorHint)
+        },
+        {
+            value: 'viewer',
+            label: intl.formatMessage(messages.roleViewer),
+            hint: intl.formatMessage(messages.roleViewerHint)
+        }
+    ];
+    const roleLabel = roles.find((r) => r.value === role)?.label;
+    const options = workspaces.data ?? [];
+    const query = wsSearch.trim().toLowerCase();
+    const filteredOptions = query
+        ? options.filter((workspace) => workspace.name.toLowerCase().includes(query))
+        : options;
+    const goStep = (next) => {
+        setStep(next);
+        setMaxReached((m) => Math.max(m, next));
+    };
+    const toggleWorkspace = (id, checked) => {
+        setSelected((prev) => {
+            const next = new Set(prev);
+            if (checked) {
+                next.add(id);
+            }
+            else {
+                next.delete(id);
+            }
+            return next;
+        });
+    };
+    // "All" sends every workspace's id (a snapshot — memberships are explicit
+    // rows); "specific" sends the checked ones.
+    const workspaceIds = wsMode === 'all' ? options.map((w) => w.id) : [...selected];
+    // The use-case hook owns the orchestration (validate → invite → toast →
+    // navigate); this page just hands it the collected fields.
+    const submit = () => flow.submit({ email, role, name, workspaceIds });
+    const errorMessage = flow.errorReason === 'taken'
+        ? intl.formatMessage(messages.emailTaken)
+        : flow.errorReason === 'failed'
+            ? intl.formatMessage(messages.failed)
+            : null;
+    const railSteps = [
+        {
+            label: intl.formatMessage(messages.stepDetails),
+            hint: intl.formatMessage(messages.stepDetailsHint),
+            summary: email.trim() || undefined
+        },
+        {
+            label: intl.formatMessage(messages.stepRole),
+            hint: intl.formatMessage(messages.stepRoleHint),
+            summary: roleLabel
+        },
+        {
+            label: intl.formatMessage(messages.stepWorkspaces),
+            hint: intl.formatMessage(messages.stepWorkspacesHint),
+            optional: true,
+            summary: wsMode === 'all'
+                ? intl.formatMessage(messages.summaryAllWorkspaces)
+                : intl.formatMessage(messages.summaryAccess, {
+                    count: selected.size
+                })
+        }
+    ];
+    /** The page chrome both the wizard and the sent-invite view sit inside. */
+    const chrome = (crumb, heading, subheading, body) => (_jsxs(_Fragment, { children: [_jsx(PageTopBar, { icon: Users, iconClassName: "bg-success-soft text-success-soft-foreground", crumbs: [
+                    {
+                        key: 'members',
+                        label: intl.formatMessage(messages.crumbMembers),
+                        to: '/users'
+                    },
+                    { key: 'invite', label: crumb }
+                ] }), _jsxs(Container, { className: "max-w-[920px]", children: [_jsxs(Link, { to: "/users", className: "mb-4 inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(ArrowLeft, { className: "size-4" }), intl.formatMessage(messages.back)] }), _jsx(ContainerHeader, { title: heading, subtitle: subheading }), body] })] }));
+    // The invite landed. Swap the wizard for the link hand-off rather than
+    // redirecting: the raw token is returned once, so navigating away without
+    // copying it means starting over with a resend.
+    if (flow.sent) {
+        return chrome(intl.formatMessage(messages.sentTitle), intl.formatMessage(messages.sentTitle), intl.formatMessage(messages.sentSubtitle), _jsx(InviteSent, { email: flow.sent.email, link: flow.sent.link, roleLabel: roleLabel ?? role }));
+    }
+    return chrome(intl.formatMessage(messages.title), intl.formatMessage(messages.title), intl.formatMessage(messages.subtitle), _jsx(_Fragment, { children: _jsxs("div", { className: "grid gap-8 lg:grid-cols-[244px_1fr]", children: [_jsx("div", { className: "lg:sticky lg:top-6 lg:self-start", children: _jsx(Stepper, { current: step, maxReached: maxReached, steps: railSteps, onStepClick: goStep, stepAriaLabel: (s, number) => intl.formatMessage(messages.stepAria, {
+                            number,
+                            label: s.label
+                        }) }) }), _jsxs(WizardStepCard, { children: [step === 1 ? (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: intl.formatMessage(messages.detailsTitle) }), _jsx(CardDescription, { children: intl.formatMessage(messages.detailsDescription) })] }), _jsxs(CardContent, { children: [_jsxs(FieldGroup, { children: [_jsx(InputField, { id: "invite-email", type: "email", label: intl.formatMessage(messages.emailLabel), value: email, autoComplete: "off", onBlur: () => setEmailTouched(true), onChange: (event) => setEmail(event.target.value), errors: emailError
+                                                        ? [{ message: emailError }]
+                                                        : undefined }), _jsx(InputField, { id: "invite-name", label: intl.formatMessage(messages.nameLabel), value: name, autoComplete: "off", onChange: (event) => setName(event.target.value) })] }), _jsx(InfoNote, { children: intl.formatMessage(messages.detailsInfo) })] }), _jsx(CardFooter, { children: _jsx(WizardFooter, { primary: _jsxs(Button, { type: "button", onClick: () => goStep(2), disabled: !emailValid, children: [intl.formatMessage(messages.continueToRole), _jsx(ArrowRight, {})] }) }) })] })) : null, step === 2 ? (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: intl.formatMessage(messages.roleTitle) }), _jsx(CardDescription, { children: intl.formatMessage(messages.roleDescription) })] }), _jsxs(CardContent, { children: [_jsx(RadioGroup, { value: role, onValueChange: (value) => setRole(value), className: "gap-3", children: roles.map((option) => (_jsxs(Label, { htmlFor: `invite-role-${option.value}`, className: cn('flex cursor-pointer items-start gap-3 rounded-xl border p-3 transition-colors hover:bg-accent', role === option.value &&
+                                                    'border-primary'), children: [_jsx(RadioGroupItem, { id: `invite-role-${option.value}`, value: option.value, "aria-label": option.label, className: "mt-0.5" }), _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: option.label }), _jsx("span", { className: "text-xs text-muted-foreground", children: option.hint })] })] }, option.value))) }), _jsx(InfoNote, { children: intl.formatMessage(messages.roleInfo) })] }), _jsx(CardFooter, { children: _jsx(WizardFooter, { onBack: () => goStep(1), backLabel: intl.formatMessage(messages.back2), primary: _jsxs(Button, { type: "button", onClick: () => goStep(3), children: [intl.formatMessage(messages.continueToWorkspaces), _jsx(ArrowRight, {})] }) }) })] })) : null, step === 3 ? (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: intl.formatMessage(messages.workspacesTitle) }), _jsx(CardDescription, { children: intl.formatMessage(messages.workspacesDescription) })] }), _jsxs(CardContent, { children: [workspaces.isPending ? (_jsx(WorkspaceOptionsSkeleton, {})) : workspaces.isError ? (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: intl.formatMessage(messages.workspacesError) }) })) : options.length === 0 ? (_jsx("p", { className: "rounded-xl border border-dashed p-4 text-sm text-muted-foreground", children: intl.formatMessage(messages.workspacesEmpty) })) : (_jsxs(_Fragment, { children: [_jsx(RadioGroup, { value: wsMode, onValueChange: (value) => setWsMode(value), className: "grid gap-3 sm:grid-cols-2", children: WORKSPACE_MODE_TILES.map((tile) => (_jsxs(Label, { htmlFor: `invite-ws-mode-${tile.value}`, className: cn('flex cursor-pointer items-start gap-3 rounded-xl border p-4 transition-colors', wsMode ===
+                                                            tile.value
+                                                            ? 'border-primary bg-primary/5'
+                                                            : 'hover:bg-accent'), children: [_jsx(RadioGroupItem, { id: `invite-ws-mode-${tile.value}`, value: tile.value, "aria-label": intl.formatMessage(tile.title), className: "mt-0.5" }), _jsxs("span", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-sm font-medium", children: intl.formatMessage(tile.title) }), _jsx("span", { className: "text-sm text-muted-foreground", children: intl.formatMessage(tile.description, {
+                                                                            count: options.length
+                                                                        }) })] })] }, tile.value))) }), wsMode === 'specific' ? (_jsxs("div", { className: "mt-4 flex flex-col", children: [_jsxs(InputGroup, { className: "mb-3 shadow-none", children: [_jsx(InputGroupAddon, { children: _jsx(Search, {}) }), _jsx(InputGroupInput, { value: wsSearch, onChange: (event) => setWsSearch(event.target
+                                                                        .value), placeholder: intl.formatMessage(messages.workspacesSearch), "aria-label": intl.formatMessage(messages.workspacesSearch), autoComplete: "off" })] }), _jsx("div", { role: "group", className: "flex max-h-[320px] flex-col gap-2 overflow-y-auto", children: filteredOptions.length ===
+                                                                0 ? (_jsx("p", { className: "px-1 py-3 text-sm text-muted-foreground", children: intl.formatMessage(messages.workspacesNoMatch) })) : (filteredOptions.map((workspace) => (_jsxs(Label, { htmlFor: `invite-ws-${workspace.id}`, className: "flex cursor-pointer items-center gap-3 rounded-xl border p-3 transition-colors hover:bg-accent", children: [_jsx(Checkbox, { id: `invite-ws-${workspace.id}`, "aria-label": workspace.name, checked: selected.has(workspace.id), onCheckedChange: (checked) => toggleWorkspace(workspace.id, checked ===
+                                                                            true) }), _jsx(MemberAvatar, { initials: workspace.initials, color: workspace.color, className: "size-7 text-[10px]" }), _jsx("span", { className: "truncate text-sm font-medium", children: workspace.name })] }, workspace.id)))) }), _jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: intl.formatMessage(messages.selectedCount, {
+                                                                count: selected.size
+                                                            }) })] })) : null] })), _jsx(InfoNote, { children: intl.formatMessage(messages.workspacesInfo) }), errorMessage ? (_jsx(Alert, { variant: "destructive", className: "mt-4", children: _jsx(AlertDescription, { children: errorMessage }) })) : null] }), _jsx(CardFooter, { children: _jsx(WizardFooter, { onBack: () => goStep(2), backLabel: intl.formatMessage(messages.back2), primary: _jsxs(Button, { type: "button", onClick: submit, disabled: flow.submitting, children: [flow.submitting ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": true }), _jsx("span", { className: "sr-only", children: intl.formatMessage(messages.submitting) })] })) : null, intl.formatMessage(messages.submit)] }) }) })] })) : null] }, step)] }) }));
+}

package/dist/lib/presentation/pages/MembersPage/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The Members management page: a searchable, filterable, paginated, and
+ * deep-linkable table of everyone who can sign in, with invite / edit / role /
+ * status controls gated on the signed-in user's `users:*` permissions. The URL
+ * query string is the single source of truth for search, the query-builder
+ * filter, and the page (via `useTableUrlState`), so a filtered view can be
+ * shared or bookmarked. Rendered at `/users` inside the authenticated shell.
+ *
+ * Gated on `users:read`: without it the page shows a no-access state and
+ * fetches nothing (the server would refuse the request anyway).
+ */
+export declare function MembersPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/pages/MembersPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/MembersPage/index.tsx"],"names":[],"mappings":"AAkEA;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,gCA2O1B"}

package/dist/lib/presentation/pages/MembersPage/index.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { Filter, UserPlus, Users } from 'lucide-react';
+import { PageTopBar } from '@orthacms/shell-admin';
+import { QueryBuilderDrawer, countRules, jsonFilterToTree, treeToJsonFilter } from '@orthacms/query-builder-admin';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { useTableUrlState, useDocumentTitle } from '@orthacms/utils-admin';
+import { Alert, AlertDescription, Button, Container, ContainerHeader } from '@orthacms/design-system';
+import { useMembers, DEFAULT_PAGE_SIZE } from '../../../application/useMembers';
+import { MembersTableSkeleton } from '../../components/MembersSkeleton';
+import { MembersEmpty } from '../../components/MembersEmpty';
+import { MembersNoAccess } from '../../components/MembersNoAccess';
+import { MembersPagination } from '../../components/MembersPagination';
+import { MEMBERS_RESULTS_ANCHOR_ID } from '../../membersResultsAnchor';
+import { MembersTable } from '../../components/MembersTable';
+import { MembersToolbar } from '../../components/MembersToolbar';
+import { MEMBERS_FILTER_FIELDS } from '../../membersFilterFields';
+/** Intl descriptors for {@link MembersPage}, co-located with the component. */
+const messages = defineMessages({
+    title: {
+        id: 'users.page.title',
+        defaultMessage: 'Members'
+    },
+    subtitle: {
+        id: 'users.page.subtitle',
+        defaultMessage: '{count, plural, one {# person} other {# people}} who can sign in to this workspace.'
+    },
+    invite: {
+        id: 'users.page.invite',
+        defaultMessage: 'Invite member'
+    },
+    error: {
+        id: 'users.page.error',
+        defaultMessage: 'Couldn’t load members. Please try again.'
+    },
+    retry: {
+        id: 'users.page.retry',
+        defaultMessage: 'Retry'
+    },
+    filters: {
+        id: 'users.page.filters',
+        defaultMessage: 'Filters{count, plural, =0 {} other { (#)}}'
+    },
+    results: {
+        id: 'users.page.results',
+        defaultMessage: '{count, plural, one {# member} other {# members}} found.'
+    }
+});
+/**
+ * The Members management page: a searchable, filterable, paginated, and
+ * deep-linkable table of everyone who can sign in, with invite / edit / role /
+ * status controls gated on the signed-in user's `users:*` permissions. The URL
+ * query string is the single source of truth for search, the query-builder
+ * filter, and the page (via `useTableUrlState`), so a filtered view can be
+ * shared or bookmarked. Rendered at `/users` inside the authenticated shell.
+ *
+ * Gated on `users:read`: without it the page shows a no-access state and
+ * fetches nothing (the server would refuse the request anyway).
+ */
+export function MembersPage() {
+    const intl = useIntl();
+    // Names this route in the tab strip, the window list, the history
+    // and a screen reader's window announcement. Every private route but
+    // Workspaces was still titled a bare "Admin" (WCAG 2.4.2, `ORT-140`).
+    useDocumentTitle(intl.formatMessage(messages.title));
+    const navigate = useNavigate();
+    const canRead = useHasPermission('users:read');
+    const canInvite = useHasPermission('users:create');
+    const { searchParam, filterParam, page, pageSize, searchInput, searchPending, setSearchInput, updateParams } = useTableUrlState({
+        searchKey: 'search',
+        defaultPageSize: DEFAULT_PAGE_SIZE
+    });
+    // Rehydrate the applied filter tree from the URL for the drawer. Keyed on
+    // the raw param so a deep-linked or hand-edited filter restores on load.
+    const appliedFilter = useMemo(() => jsonFilterToTree(filterParam), [filterParam]);
+    const ruleCount = countRules(appliedFilter);
+    const params = {
+        search: searchParam || undefined,
+        filter: filterParam || undefined,
+        page,
+        pageSize
+    };
+    const { data, isPending, isFetching, isError, refetch } = useMembers(params, canRead);
+    const total = data?.total ?? 0;
+    // The server echoes the effective page size; fall back to the requested one
+    // until the first response lands.
+    const effectivePageSize = data?.pageSize ?? pageSize;
+    const pageCount = Math.max(1, Math.ceil(total / effectivePageSize));
+    // A mutation (revoke/disable) or a narrowing search/filter can leave fewer
+    // pages than the current one; pull `page` back so we never strand the user
+    // on an empty page past the end. Guarded on `data` so it runs only after a
+    // real response — otherwise a deep-linked `?page=N>1` resets to 1 before the
+    // first fetch lands (when `total` is 0 and `pageCount` is 1).
+    useEffect(() => {
+        if (data && page > pageCount) {
+            updateParams({ page: pageCount > 1 ? String(pageCount) : undefined }, false);
+        }
+    }, [data, page, pageCount, updateParams]);
+    /** Commit (or clear) the query-builder filter to the URL. */
+    const applyFilter = useCallback((next) => {
+        updateParams({ filter: treeToJsonFilter(next) ?? undefined });
+    }, [updateParams]);
+    if (!canRead) {
+        return (_jsxs(_Fragment, { children: [_jsx(PageTopBar, { icon: Users, iconClassName: "bg-success-soft text-success-soft-foreground", crumbs: [
+                        {
+                            key: 'members',
+                            label: intl.formatMessage(messages.title)
+                        }
+                    ] }), _jsxs(Container, { children: [_jsx(ContainerHeader, { title: intl.formatMessage(messages.title) }), _jsx(MembersNoAccess, {})] })] }));
+    }
+    const members = data?.items ?? [];
+    const hasFilters = searchInput.trim().length > 0 || ruleCount > 0;
+    /**
+     * Clear the filters (search + query builder) and reset to the first page,
+     * while preserving the user's page-size choice.
+     */
+    const clearFilters = () => {
+        setSearchInput('');
+        updateParams({ search: undefined, filter: undefined });
+    };
+    const openInvite = () => navigate('/users/invite');
+    return (_jsxs(_Fragment, { children: [_jsx(PageTopBar, { icon: Users, iconClassName: "bg-success-soft text-success-soft-foreground", crumbs: [
+                    {
+                        key: 'members',
+                        label: intl.formatMessage(messages.title)
+                    }
+                ] }), _jsxs(Container, { children: [_jsx(ContainerHeader, { title: intl.formatMessage(messages.title), 
+                        // No count until one is known: the read failed or hasn't
+                        // landed, and "0 people" is a claim about the directory
+                        // rather than a description of what happened.
+                        subtitle: isPending || isError
+                            ? undefined
+                            : intl.formatMessage(messages.subtitle, {
+                                count: total
+                            }), actions: canInvite ? (_jsxs(Button, { onClick: openInvite, children: [_jsx(UserPlus, {}), intl.formatMessage(messages.invite)] })) : undefined }), _jsx(MembersToolbar, { search: searchInput, onSearchChange: setSearchInput, busy: searchPending || isFetching, filterControl: _jsx(QueryBuilderDrawer, { fields: MEMBERS_FILTER_FIELDS, value: appliedFilter, onApply: applyFilter, trigger: _jsxs(Button, { variant: "outline", className: "shadow-none", children: [_jsx(Filter, { "aria-hidden": true, className: "size-4" }), intl.formatMessage(messages.filters, {
+                                        count: ruleCount
+                                    })] }) }) }), !isPending && !isError && (_jsx("p", { role: "status", "aria-live": "polite", className: "sr-only", children: intl.formatMessage(messages.results, { count: total }) })), _jsx("div", { id: MEMBERS_RESULTS_ANCHOR_ID, tabIndex: -1, className: "outline-none", children: isPending ? (_jsx(MembersTableSkeleton, {})) : isError ? (_jsx(Alert, { variant: "destructive", role: "alert", className: "mt-4", children: _jsxs(AlertDescription, { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("span", { children: intl.formatMessage(messages.error) }), _jsx(Button, { variant: "outline", size: "sm", className: "shadow-none", onClick: () => refetch(), children: intl.formatMessage(messages.retry) })] }) })) : members.length === 0 ? (_jsx(MembersEmpty, { filtered: hasFilters, onClear: clearFilters, onInvite: canInvite ? openInvite : undefined })) : (_jsxs(_Fragment, { children: [_jsx(MembersTable, { members: members }), _jsx(MembersPagination, { page: page, pageCount: pageCount, pageSize: effectivePageSize, total: total, onPageChange: (next) => updateParams({ page: String(next) }, false), onPageSizeChange: (next) => updateParams({ pageSize: String(next) }) })] })) })] })] }));
+}

package/dist/lib/presentation/pages/UserAccessPage/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The Access tab: everything that governs whether — and how — this member gets
+ * into the product. Two cards:
+ *
+ * - **sign-in access** — suspend or reactivate. Mirrors the server's lifecycle:
+ *   only `active` can be suspended, only `disabled` reactivated, and `pending`
+ *   (un-accepted invite) is read-only. The last active admin and your own
+ *   account can't be suspended; the button explains why instead of failing on
+ *   submit.
+ * - **password** — generate a single-use reset link for the member
+ *   ({@link PasswordResetCard}).
+ *
+ * The two belong on one tab because they answer the same question from either
+ * side: this is where an admin goes when someone can't get in, whether the
+ * reason is that they were locked out or that they forgot their password.
+ */
+export declare function UserAccessPage(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/presentation/pages/UserAccessPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/presentation/pages/UserAccessPage/index.tsx"],"names":[],"mappings":"AAgGA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,gCAiI7B"}