feat: service accounts page revamp

[rohanchkrabrty]

Summary

• Migrate all SDK settings pages (general, preferences, profile, sessions, members, security, projects, teams, service accounts) from views/ to views-new/ using @raystack/apsara-v1 components
• Add shared layout components (ViewContainer, ViewHeader, ImageUpload) for consistent page structure across all revamped views
• Introduce imperative dialog/menu handle pattern (Dialog.createHandle, AlertDialog.createHandle, Menu.createHandle) replacing useState-based open/close control
• Wire all new views into client-demo app with sidebar navigation, nested routes, and settings page wrapper
• Fix pre-existing build issue with ReactNode import in onboarding updates component

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
frontier	Ready	Preview, Comment	Apr 8, 2026 4:33am

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 248f0264-1bc5-4522-a11e-b3959d659a34

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR implements a comprehensive settings infrastructure overhaul across the client-demo app and SDK, including a React 18→19 upgrade, new nested settings routes with dedicated subpages, multiple new view components (General, Preferences, Profile, Members, Projects, Teams, Security, Sessions, ServiceAccounts), supporting dialog systems, new foundational components (ImageUpload, ViewContainer, ViewHeader), and updated SDK package dependencies and exports.

Changes

Cohort / File(s)	Summary
React Version & SDK Dependencies web/apps/client-demo/package.json, web/sdk/package.json, web/sdk/tsup.config.ts	Upgraded React/React-DOM from ^18.3.1 to ^19.2.1 with corresponding type definitions. SDK peer dependencies updated to React ^19, @raystack/proton updated, @raystack/apsara-v1 alias added, Stitches removed from dev deps.
Client Demo App & Styling web/apps/client-demo/src/App.tsx, web/apps/client-demo/src/styles.css	Added CSS imports for local styles and @raystack/apsara normalize.css. Body margin/padding reset in new styles module.
Client Demo Routing & Navigation web/apps/client-demo/src/Router.tsx, web/apps/client-demo/src/Home.tsx	Added nested /:orgId/settings route structure with 11 child routes (general, preferences, profile, sessions, members, security, projects, teams, service-accounts, plus detail routes). Home page adds second link to new settings UI per organization.
Settings Page Layout & Navigation web/apps/client-demo/src/pages/Settings.tsx	New Settings layout component managing orgId selection, organization switching, sidebar navigation with active state highlighting, and nested Outlet rendering for settings subpages. Redirects root settings path to /general.
General Settings Subpage web/apps/client-demo/src/pages/settings/General.tsx	New page component wiring GeneralView with onDeleteSuccess callback for redirect-to-home navigation.
Preferences, Profile, Sessions Subpages web/apps/client-demo/src/pages/settings/Preferences.tsx, web/apps/client-demo/src/pages/settings/Profile.tsx, web/apps/client-demo/src/pages/settings/Sessions.tsx	Simple page wrapper components rendering respective SDK views (PreferencesView, ProfileView, SessionsView).
Members, Security, Service-Accounts Subpages web/apps/client-demo/src/pages/settings/Members.tsx, web/apps/client-demo/src/pages/settings/Security.tsx, web/apps/client-demo/src/pages/settings/ServiceAccounts.tsx	Simple page wrapper components rendering respective SDK views (MembersView, SecurityView, ServiceAccountsView).
Projects & Teams Detail Subpages web/apps/client-demo/src/pages/settings/Projects.tsx, web/apps/client-demo/src/pages/settings/Teams.tsx, web/apps/client-demo/src/pages/settings/ProjectDetails.tsx, web/apps/client-demo/src/pages/settings/TeamDetails.tsx	Page components reading route params (orgId, projectId, teamId), using navigation hooks, and wiring view components with navigation callbacks.
SDK Foundational Components web/sdk/react/components/image-upload/*, web/sdk/react/components/view-container/*, web/sdk/react/components/view-header/*	New ImageUpload component with crop dialog using react-image-crop and canvas rendering. ViewContainer and ViewHeader layout/composition components with CSS modules. All three exported from index.ts barrels.
SDK General Settings View web/sdk/react/views-new/general/*	GeneralView with organization avatar/title/name form, update mutation via FrontierServiceQueries, DeleteOrganizationDialog with title verification, Yup validation schema, permission gating for updates/deletes.
SDK Preferences View web/sdk/react/views-new/preferences/*	PreferencesView integrating useTheme() for theme switching and usePreferences() for newsletter subscription via Select dropdowns. PreferenceRow component for consistent preference list layout.
SDK Profile View web/sdk/react/views-new/profile/*	ProfileView for avatar/title/email updates using ImageUpload, form validation, updateCurrentUser mutation, read-only email display.
SDK Members Management View web/sdk/react/views-new/members/*	MembersView with DataTable of organization members, role filtering, permission-gated invite/remove/role-update actions. InviteMemberDialog, RemoveMemberDialog, UpdateRoleDialog, MemberColumns with avatar/role/actions cells.
SDK Projects Management Views web/sdk/react/views-new/projects/*	ProjectsView with project listing, search, create/edit/delete dialogs. ProjectDetailsView with project members table, role filtering, add-member menu, update-role workflow, member-action dialogs.
SDK Teams Management Views web/sdk/react/views-new/teams/*	TeamsView with teams listing, filtering, create/edit/delete dialogs. TeamDetailsView mirroring ProjectDetailsView structure with team-member role/permission management.
SDK Security/Domain Management web/sdk/react/views-new/security/*	SecurityView listing organization domains with verify/delete actions. AddDomainDialog, VerifyDomainDialog, DeleteDomainDialog with validation, Yup schemas, and mutation workflows.
SDK Service Accounts View web/sdk/react/views-new/service-accounts/*	ServiceAccountsView listing service accounts, AddServiceAccountDialog for multi-project setup with owner policy creation, DeleteServiceAccountDialog with query invalidation. ProjectsCell displaying comma-separated projects for each service account.
SDK Sessions View web/sdk/react/views-new/sessions/*	SessionsView listing active sessions with device/location/last-active info. RevokeSessionDialog with session detail display and dual-mutation flow (logout current vs revoke others). RevokeSessionConfirmDialog for action confirmation.
SDK Exports & Hook Updates web/sdk/react/index.ts, web/sdk/react/hooks/useSessions.ts	Added CSS imports for @raystack/apsara-v1 styles. Exported new components (ImageUpload, ViewContainer, ViewHeader) and all views-new components. Updated useSessions hook to accept optional mutation options parameter.
SDK Admin Component web/sdk/admin/components/SheetFooter.tsx, web/sdk/admin/views/organizations/details/index.tsx	SheetFooter removed css prop override, changed border color from token to CSS variable. Removed orgId from getBillingAccount request input.

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

• feat: projects pages revamp #1503 — Implements nearly identical settings infrastructure with same client-demo routes, settings subpages, and entire views-new component suite with dependency/export updates.
• feat: members page revamp #1488 — Overlapping changes to client-demo settings pages, SDK React exports, and new view components (GeneralView, MembersView, Sessions, etc.) alongside React version bumps.
• feat: profile page revamp #1484 — Modifies same client-demo routes, Profile/General page components, ImageUpload/ViewContainer/ViewHeader foundational components, and SDK export surfaces.

Suggested reviewers

• rohilsurana
• rsbh
• paanSinghCoder

[coveralls]

Coverage Report for CI Build 24117839128

Coverage remained the same at 41.147%

Details

• Coverage remained the same as the base build.
• Patch coverage: No coverable lines changed in this PR.
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	36289
Covered Lines:	14932
Line Coverage:	41.15%
Coverage Strength:	11.89 hits per line

---

💛 - Coveralls