feat(admin): list pending invites in user details side panel

[Shreyag02]

Summary

The user details side panel now lists the organizations a user has been invited to but hasn't joined yet, sitting below their existing memberships. Data comes from FrontierService/ListUserInvitations.

Changes

• New Invitations section in the user details side panel — one block per invite, showing the org, the role offered, invite status (Pending / Expired), and a relative expiry ("5 days left", flipping to "5 days ago" once lapsed).
• New useOrganizationRoles hook (admin/hooks/) that fetches the platform's default org roles plus the org's custom roles, returning both a roles list and an id → title map.
• membership-dropdown.tsx now uses that hook (−40 lines). It previously had its own copy of the same two queries, so both places resolve role titles identically from here on.

Technical Details

• ListUserInvitations is keyed by the invitee's email, not the user uuid — an invitation can exist before the user does. Worth knowing because passing the uuid returns 200 with an empty list rather than an error, so getting it wrong fails silently. The query uses user?.email and is gated on it.
• The API returns expired invitations too. There's no server-side expires_at filter; rows live until the cleanup cron sweeps them. So Pending / Expired is derived client-side. formatExpiry diffs forwards on either side of "now" and swaps only the suffix, so live and lapsed invites always read consistently.
• An invitation carries only org_id and role_ids, so the org title/avatar comes from the existing useOrganizationLookup and role titles from the new hook. react-query caches both per key, so multiple invite blocks share one fetch.
• Invitations and memberships have independent loading/error branches — a failure in one won't blank out the other section.
• Role fetch errors now log once from a useEffect inside the hook. The dropdown previously logged them from the render body, which repeated on every render.

Test Plan

• Manual testing completed
• Build and type checking passes

Verified so far:

• tsc --noEmit error set is byte-identical before and after the change (21 pre-existing errors, all in untouched files; 0 introduced) — confirmed by stashing the branch and re-running against main.

• eslint clean on all four touched files; pnpm build succeeds in web/sdk.

• Expiry formatting checked against the real payload (expires_at``2026-08-11T10:00:21Z) and across the boundaries:

  Case	Renders
  7-day invite, created today	6 days left
  1 day remaining	1 day left (singular)
  3 hours remaining	3 hours left
  under an hour, either side	Less than an hour left / ago
  lapsed 5 days ago	5 days ago

SQL Safety (if your PR touches *_repository.go or goqu.*)

Not applicable — frontend only, no Go or query-builder changes.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
frontier	Ready	Preview	Aug 4, 2026 11:35am

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Added invitation details to the user details side panel, including organization, role, status, and expiration information.
  • Added loading placeholders and error handling while invitation details are retrieved.
  • Consolidated platform and organization role loading for consistent role names across the admin interface.

Walkthrough

This PR introduces a useOrganizationRoles hook that fetches and merges platform and organization-scoped roles. MembershipDropdown is refactored to use this hook instead of direct queries. A new SidePanelInvitation component displays invitation details, and the user details side panel now queries and renders invitations by email.

Changes

Organization roles hook and invitation panel

Layer / File(s)	Summary
Role-fetching hook web/sdk/admin/hooks/useOrganizationRoles.ts	New hook fetches default and organization-specific roles, merges them, builds a role-title lookup, and exposes loading/error state.
Membership dropdown refactor web/sdk/admin/views/users/details/layout/membership-dropdown.tsx	Replaces direct role queries, error logging, merging, and loading calculation with the useOrganizationRoles hook.
Invitation detail component web/sdk/admin/views/users/details/layout/side-panel-invitation.tsx	New SidePanelInvitation component shows organization identity, resolved role titles, pending/expired status, and relative expiry text, with loading skeleton support.
Side panel invitation querying and rendering web/sdk/admin/views/users/details/layout/side-panel.tsx	Adds an email-keyed invitation query with disabled auto-refetch, normalizes the response, and renders invitations through SidePanelInvitation alongside memberships.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• raystack/frontier#1628: Both PRs modify SDK role-management flows; this PR centralizes role retrieval while the related PR updates member-role assignment.

Suggested reviewers: paansinghcoder

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 49158fa7-268d-4f6e-adf1-52556c80c8a0

📥 Commits

Reviewing files that changed from the base of the PR and between ad5e9a5 and 9b8c987.

📒 Files selected for processing (4)

• web/sdk/admin/hooks/useOrganizationRoles.ts
• web/sdk/admin/views/users/details/layout/membership-dropdown.tsx
• web/sdk/admin/views/users/details/layout/side-panel-invitation.tsx
• web/sdk/admin/views/users/details/layout/side-panel.tsx