raystack · rohanchkrabrty · Apr 12, 2026 · Mar 24, 2026 · Mar 26, 2026 · Mar 27, 2026
diff --git a/web/apps/client-demo/src/Router.tsx b/web/apps/client-demo/src/Router.tsx
@@ -18,6 +18,8 @@ import Projects from './pages/settings/Projects';
 import ProjectDetails from './pages/settings/ProjectDetails';
 import Teams from './pages/settings/Teams';
 import TeamDetails from './pages/settings/TeamDetails';
+import ServiceAccounts from './pages/settings/ServiceAccounts';
+import ServiceAccountDetails from './pages/settings/ServiceAccountDetails';
 
 function Router() {
   return (
@@ -42,6 +44,8 @@ function Router() {
           <Route path="projects/:projectId" element={<ProjectDetails />} />
           <Route path="teams" element={<Teams />} />
           <Route path="teams/:teamId" element={<TeamDetails />} />
+          <Route path="service-accounts" element={<ServiceAccounts />} />
+          <Route path="service-accounts/:serviceAccountId" element={<ServiceAccountDetails />} />
         </Route>
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

diff --git a/web/apps/client-demo/src/pages/Settings.tsx b/web/apps/client-demo/src/pages/Settings.tsx
@@ -11,7 +11,8 @@ const NAV_ITEMS = [
   { label: 'Members', path: 'members' },
   { label: 'Security', path: 'security' },
   { label: 'Projects', path: 'projects' },
-  { label: 'Teams', path: 'teams' }
+  { label: 'Teams', path: 'teams' },
+  { label: 'Service Accounts', path: 'service-accounts' }
 ];
 
 export default function Settings() {

diff --git a/web/apps/client-demo/src/pages/settings/ServiceAccountDetails.tsx b/web/apps/client-demo/src/pages/settings/ServiceAccountDetails.tsx
@@ -0,0 +1,24 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { ServiceAccountDetailsView } from '@raystack/frontier/react';
+
+export default function ServiceAccountDetails() {
+  const { orgId, serviceAccountId } = useParams<{
+    orgId: string;
+    serviceAccountId: string;
+  }>();
+  const navigate = useNavigate();
+
+  if (!serviceAccountId) return null;
+
+  return (
+    <ServiceAccountDetailsView
+      serviceAccountId={serviceAccountId}
+      onNavigateToServiceAccounts={() =>
+        navigate(`/${orgId}/settings/service-accounts`)
+      }
+      onDeleteSuccess={() =>
+        navigate(`/${orgId}/settings/service-accounts`)
+      }
+    />
+  );
+}
diff --git a/web/apps/client-demo/src/pages/settings/ServiceAccounts.tsx b/web/apps/client-demo/src/pages/settings/ServiceAccounts.tsx
@@ -0,0 +1,15 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { ServiceAccountsView } from '@raystack/frontier/react';
+
+export default function ServiceAccounts() {
+  const { orgId } = useParams<{ orgId: string }>();
+  const navigate = useNavigate();
+
+  return (
+    <ServiceAccountsView
+      onServiceAccountClick={id =>
+        navigate(`/${orgId}/settings/service-accounts/${id}`)
+      }
+    />
+  );
+}
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/sdk/react/components/onboarding/updates.tsx b/web/sdk/react/components/onboarding/updates.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { yupResolver } from '@hookform/resolvers/yup';
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { Button, Flex, Text, Switch, Skeleton } from '@raystack/apsara';
 import { Controller, useForm } from 'react-hook-form';
 import * as yup from 'yup';

diff --git a/web/sdk/react/index.ts b/web/sdk/react/index.ts
@@ -38,6 +38,10 @@ export { MembersView } from './views-new/members';
 export { SecurityView } from './views-new/security';
 export { ProjectsView, ProjectDetailsView } from './views-new/projects';
 export { TeamsView, TeamDetailsView } from './views-new/teams';
+export {
+  ServiceAccountsView,
+  ServiceAccountDetailsView
+} from './views-new/service-accounts';
 
 export type {
   FrontierClientOptions,