feat(react. examples): add invitation hook, container, and example app

[rax7389]

Changes

Summary: Adds the central useOrganizationMemberManagement hook for state management, the OrganizationMemberManagement container component connecting the hook to the view layer, and example app integration with sidebar navigation.

Why: The presentational components from PR 3 are purely prop-driven. This PR provides the orchestration layer — a single hook that manages all invitation state (fetching, mutations, pagination, sorting, filtering, modals) and a container component that wires everything together. Separating the hook from the UI components keeps business logic testable and the view layer thin.

What:

*useOrganizationMemberManagement Hook *

Central hook managing all invitation lifecycle state via TanStack Query:

• Data fetching — Queries for invitations (with checkpoint pagination tokens), roles, and identity providers via coreClient.getMyOrganizationApiClient().
• Mutations — Create, revoke, and revoke-and-resend flows with ComponentAction hooks (onBefore/onAfter) and automatic query invalidation.
• Checkpoint pagination — Token stack (previousTokens) for navigating back through cursor-based pages.
• Server-side sorting — Maps table column keys to API sort fields (e.g., created_at → created-at).
• Race condition handling — useRef request ID tracking for details fetch to discard stale responses.
• Toast notifications — Success/error feedback for all mutation outcomes.

const { state, handlers } = useOrganizationMemberManagement({
  defaultTab: 'invitations',
  createInvitationAction: {
    onBefore: (data) => { console.log('Creating:', data); return true; },
    onAfter: (data, result) => console.log('Created:', result),
  },
  revokeInvitationAction: {
    onBefore: (invitation) => confirm(`Revoke ${invitation.invitee.email}?`),
  },
});

Key internal mappings for server-side sort:

const INVITATION_SORT_FIELD_MAP: Record<string, string> = {
  invitee: 'email',
  status: 'status',
  created_at: 'created-at',
  expires_at: 'expires-at',
  inviter: 'invited-by',
};

OrganizationMemberManagement Container Component

Connects the hook to the view layer with tab-based navigation (Members / Invitations), renders the invitation table and all modals (create, details, revoke, revoke-resend). Supports theming via getComponentStyles, readOnly mode, hideHeader, and custom CSS classes.

<OrganizationMemberManagement
  defaultTab="invitations"
  hideHeader={false}
  readOnly={false}
  createInvitationAction={{ onAfter: (data, result) => track('invite_sent') }}
  styling={{ classes: { 'OrganizationMemberManagement-root': 'my-custom-class' } }}
/>

Example App Integration

• Added /member-management page to the next-rwa example app.
• Added "Members & Invitations" sidebar link with Users icon.
• Added sidebar.members i18n key.

// examples/next-rwa/src/app/member-management/page.tsx
export default function MemberManagementPage() {
  return (
    <div className="p-6 pt-8 space-y-6">
      <OrganizationMemberManagement defaultTab="members" />
    </div>
  );
}

Exports

• Added OrganizationMemberManagement to components/index.ts
• Added useOrganizationMemberManagement to hooks/index.ts

References

Part of the member management invitations feature.

Testing

• This change adds unit test coverage

Integration tests are in PR 5.

• This change has been tested on the latest version of the platform/language

Checklist

• I have read the Auth0 general contribution guidelines
• I have read the Auth0 Code of Conduct
• All existing and new tests complete without errors