feat: SDK general page design revamp

web/apps/client-demo/package.json

@@ -11,15 +11,15 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@raystack/apsara": "0.56.6",
     "@raystack/frontier": "workspace:^",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "react-router-dom": "^7.7.1",
     "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.7.0",

web/apps/client-demo/src/App.tsx

@@ -4,6 +4,8 @@ import { customFetch } from '@/utils/custom-fetch';
 import { FrontierProvider } from '@raystack/frontier/react';
 import Router from './Router';
 import { v4 as uuid } from 'uuid';
+import './styles.css';
+import '@raystack/apsara/normalize.css';
 
 const customHeaders = {
   'X-Request-ID': () => `client-demo:${uuid()}`

web/apps/client-demo/src/Router.tsx

@@ -7,6 +7,8 @@ import MagiclinkVerify from './pages/MagiclinkVerify';
 import Subscribe from './pages/Subscribe';
 import Updates from './pages/Updates';
 import Organization from './pages/Organization';
+import Settings from './pages/Settings';
+import General from './pages/settings/General';
 
 function Router() {
   return (
@@ -20,6 +22,9 @@ function Router() {
         <Route path="/subscribe" element={<Subscribe />} />
         <Route path="/updates" element={<Updates />} />
         <Route path="/organizations/:orgId" element={<Organization />} />
+        <Route path="/:orgId/settings" element={<Settings />}>
+          <Route path="general" element={<General />} />
+        </Route>
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </BrowserRouter>

web/apps/client-demo/src/pages/Home.tsx

@@ -27,6 +27,7 @@ type OrgRow = {
   orgId: string;
   name: string;
   status: 'joined' | 'invited' | 'expired';
+  slug: string;
   timestamp: number;
   invitationId?: string;
 };
@@ -61,7 +62,8 @@ function tsToMs(ts?: { seconds?: bigint; nanos?: number }): number {
 function getColumns(
   onAccept: (row: OrgRow) => void,
   onOpen: (row: OrgRow, e: MouseEvent) => void,
-  acceptingId: string | null
+  acceptingId: string | null,
+  navigate: (path: string) => void
 ): DataTableColumnDef<OrgRow, unknown>[] {
   return [
     {
@@ -132,18 +134,31 @@ function getColumns(
         }
         if (status === 'joined') {
           return (
-            <Button
-              variant="outline"
-              size="small"
-              style={{ minWidth: 64 }}
-              data-test-id={`open-org-${row.original.orgId}`}
-              onClick={(e: MouseEvent) => {
-                e.stopPropagation();
-                onOpen(row.original, e);
-              }}
-            >
-              Open
-            </Button>
+            <Flex gap={4}>
+              <Button
+                variant="outline"
+                size="small"
+                data-test-id={`open-org-${row.original.orgId}`}
+                onClick={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  onOpen(row.original, e);
+                }}
+              >
+                Open
+              </Button>
+              <Button
+                variant="outline"
+                size="small"
+                style={{ minWidth: 64 }}
+                data-test-id={`open-org-${row.original.orgId}`}
+                onClick={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  navigate(`/${row.original.slug}/settings`);
+                }}
+              >
+                Open (NEW UI)
+              </Button>
+            </Flex>
           );
         }
         return null;
@@ -201,6 +216,7 @@ export default function Home() {
       id: org.id,
       orgId: org.id,
       name: org.title || org.name || org.id,
+      slug: org.name,
       status: 'joined' as const,
       timestamp: 0,
     }));
@@ -222,6 +238,7 @@ export default function Home() {
           orgId: inv.orgId,
           invitationId: inv.id,
           name: org?.title || org?.name || inv.orgId,
+          slug: org?.name,
           status,
           timestamp: tsToMs(inv.createdAt),
         };
@@ -259,7 +276,7 @@ export default function Home() {
     [navigate],
   );
 
-  const columns = useMemo(() => getColumns(handleAccept, handleOpen, acceptingId), [handleAccept, handleOpen, acceptingId]);
+  const columns = useMemo(() => getColumns(handleAccept, handleOpen, acceptingId, navigate), [handleAccept, handleOpen, acceptingId, navigate]);
 
   async function logout() {
     try {

web/apps/client-demo/src/pages/Settings.tsx

@@ -0,0 +1,65 @@
+import { useEffect } from 'react';
+import { Flex, Sidebar, Text } from '@raystack/apsara';
+import { Outlet, useParams, useLocation, Navigate } from 'react-router-dom';
+import { useFrontier } from '@raystack/frontier/react';
+
+const NAV_ITEMS = [
+  { label: 'General', path: 'general' }
+];
+
+export default function Settings() {
+  const { orgId } = useParams<{ orgId: string }>();
+  const location = useLocation();
+  const { organizations, setActiveOrganization, activeOrganization } =
+    useFrontier();
+
+  useEffect(() => {
+    if (!orgId || organizations.length === 0) return;
+    const org = organizations.find(_org => _org.id === orgId || _org.name === orgId);
+    if (org && activeOrganization?.id !== org.id) {
+      setActiveOrganization(org);
+    }
+  }, [orgId, organizations, activeOrganization?.id, setActiveOrganization]);
+
+  if (!orgId) return null;
+
+  const isSettingsRoot = location.pathname === `/${orgId}/settings`;
+  if (isSettingsRoot) {
+    return <Navigate to={`/${orgId}/settings/general`} replace />;
+  }
+
+  return (
+    <Flex style={{ height: '100vh', width: '100vw' }}>
+      <Sidebar defaultOpen>
+        <Sidebar.Header>
+          <Flex align="center" gap={3}>
+            <Text size={4} weight="medium" data-collapse-hidden>
+              Settings
+            </Text>
+          </Flex>
+        </Sidebar.Header>
+        <Sidebar.Main>
+          <Sidebar.Group label="Organization">
+            {NAV_ITEMS.map(item => {
+              const fullPath = `/${orgId}/settings/${item.path}`;
+              const isActive = location.pathname === fullPath;
+              return (
+                <Sidebar.Item
+                  key={item.path}
+                  href={fullPath}
+                  active={isActive}
+                  data-test-id={`[settings-nav-${item.path}]`}
+                >
+                  {item.label}
+                </Sidebar.Item>
+              );
+            })}
+          </Sidebar.Group>
+        </Sidebar.Main>
+      </Sidebar>
+      <Flex style={{ flex: 1, overflow: 'auto' }}>
+        <Outlet />
+      </Flex>
+    </Flex>
+  );
+}

web/apps/client-demo/src/pages/settings/General.tsx

@@ -0,0 +1,14 @@
+import { GeneralView } from '@raystack/frontier/react';
+import { useNavigate } from 'react-router-dom';
+
+export default function General() {
+  const navigate = useNavigate();
+
+  return (
+    <GeneralView
+      onDeleteSuccess={() => {
+        navigate('/');
+      }}
+    />
+  );
+}

web/apps/client-demo/src/styles.css

@@ -0,0 +1,4 @@
+body {
+  padding: 0;
+  margin: 0;
+}