feat: SDK general page design revamp

web/apps/client-demo/package.json

@@ -10,15 +10,15 @@
   "dependencies": {
     "@raystack/apsara": "^0.52.0",
     "@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

@@ -47,6 +47,8 @@ export default function Home() {
           {organizations.map(org => (
             <Flex
               key={org.id}
+              direction="column"
+              gap="small"
               style={{
                 padding: 'var(--rs-space-5)',
                 border: '1px solid var(--rs-color-border-base-secondary)'
@@ -58,6 +60,12 @@ export default function Home() {
               >
                 {org.title}
               </Link>
+              <Link
+                to={`/${org.name}/settings`}
+                data-test-id={`[organization-new-ui-link-${org.name}]`}
+              >
+                {org.title} (NEW UI)
+              </Link>
             </Flex>
           ))}
         </Flex>

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;
+}