feat(examples): Member Detail Pages

examples/next-rwa/src/app/member-management/[user_id]/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { OrganizationMemberDetail } from '@auth0/universal-components-react/rwa';
+import { useRouter, useParams } from 'next/navigation';
+
+export default function MemberDetailPage() {
+  const router = useRouter();
+  const params = useParams();
+  const user_id = params.user_id as string;
+
+  return (
+    <div className="p-6 pt-8">
+      <OrganizationMemberDetail userId={user_id} onBack={() => router.push('/member-management')} />
+    </div>
+  );
+}

examples/next-rwa/src/app/member-management/page.tsx

@@ -1,21 +1,50 @@
 'use client';
 
-import { OrganizationMemberManagement } from '@auth0/universal-components-react/rwa';
+import { useRouter } from 'next/navigation';
+
+const mockMembers = [
+  { user_id: 'auth0|123234235', name: 'Test User', email: 'testuser@example.com' },
+  { user_id: 'auth0|987654321', name: 'Jane Smith', email: 'janesmith@example.com' },
+  { user_id: 'auth0|567891234', name: 'Alice Johnson', email: 'alicejohnson@example.com' },
+];
 
 export default function MemberManagementPage() {
+  const router = useRouter();
+
   return (
     <div className="p-6 pt-8 space-y-6">
-      <p className="text-primary">
-        Follow{' '}
-        <a
-          href="https://github.com/auth0/auth0-ui-components/tree/main/examples/next-rwa#adding-a-universal-component-to-your-app"
-          target="_blank"
-        >
-          <u>Quickstart guidance</u>
-        </a>{' '}
-        on how to add Member Management component.
-      </p>
-      <OrganizationMemberManagement />
+      <h2 className="text-xl font-semibold text-primary">Members</h2>
+      <div className="rounded-md border border-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-muted text-muted-foreground">
+            <tr>
+              <th className="px-4 py-3 text-left font-medium">Name</th>
+              <th className="px-4 py-3 text-left font-medium">Email</th>
+              <th className="px-4 py-3 text-left font-medium">User ID</th>
+              <th className="px-4 py-3" />
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {mockMembers.map((member) => (
+              <tr key={member.user_id} className="bg-background hover:bg-muted/50">
+                <td className="px-4 py-3 font-medium text-primary">{member.name}</td>
+                <td className="px-4 py-3 text-muted-foreground">{member.email}</td>
+                <td className="px-4 py-3 font-mono text-xs text-muted-foreground">
+                  {member.user_id}
+                </td>
+                <td className="px-4 py-3 text-right">
+                  <button
+                    onClick={() => router.push(`/member-management/${member.user_id}`)}
+                    className="text-xs font-medium text-primary hover:underline"
+                  >
+                    View Details
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }

examples/react-spa-npm/src/App.tsx

@@ -8,6 +8,7 @@ import { Navbar } from './components/nav-bar';
 import { Sidebar } from './components/side-bar';
 import DomainManagementPage from './views/domain-management-page';
 import HomePage from './views/home-page';
+import MemberDetailPage from './views/member-detail-page';
 import MemberManagementPage from './views/member-management-page';
 import MFAPage from './views/mfa-page';
 import OrganizationManagementPage from './views/organization-management-page';
@@ -102,6 +103,14 @@ function AppContent() {
               </ProtectedRoute>
             }
           />
+          <Route
+            path="/member-management/:user_id"
+            element={
+              <ProtectedRoute>
+                <MemberDetailPage />
+              </ProtectedRoute>
+            }
+          />
           <Route
             path="/member-management"
             element={

examples/react-spa-npm/src/views/member-detail-page.tsx

@@ -0,0 +1,15 @@
+import { OrganizationMemberDetail } from '@auth0/universal-components-react/spa';
+import { useNavigate, useParams } from 'react-router-dom';
+
+const MemberDetailPage = () => {
+  const navigate = useNavigate();
+  const { user_id } = useParams<{ user_id: string }>();
+
+  return (
+    <div className="p-6 pt-8">
+      <OrganizationMemberDetail userId={user_id!} onBack={() => navigate('/member-management')} />
+    </div>
+  );
+};
+
+export default MemberDetailPage;

examples/react-spa-npm/src/views/member-management-page.tsx

@@ -1,19 +1,48 @@
-// import { OrganizationMemberManagement } from '@auth0/universal-components-react/spa';
+import { useNavigate } from 'react-router-dom';
+
+const mockMembers = [
+  { user_id: 'auth0|123234235', name: 'Test User', email: 'testuser@example.com' },
+  { user_id: 'auth0|987654321', name: 'Jane Smith', email: 'janesmith@example.com' },
+  { user_id: 'auth0|567891234', name: 'Alice Johnson', email: 'alicejohnson@example.com' },
+];
 
 const MemberManagementPage = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="p-6 pt-8 space-y-6">
-      <p className="text-primary">
-        Follow{' '}
-        <a
-          href="https://github.com/auth0/auth0-ui-components/tree/main/examples/react-spa-npm#adding-a-universal-component-to-your-app"
-          target="_blank"
-        >
-          <u>Quickstart guidance</u>
-        </a>{' '}
-        on how to add Member Management component.
-      </p>
-      {/* <OrganizationMemberManagement /> */}
+      <h2 className="text-xl font-semibold text-primary">Members</h2>
+      <div className="rounded-md border border-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-muted text-muted-foreground">
+            <tr>
+              <th className="px-4 py-3 text-left font-medium">Name</th>
+              <th className="px-4 py-3 text-left font-medium">Email</th>
+              <th className="px-4 py-3 text-left font-medium">User ID</th>
+              <th className="px-4 py-3" />
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {mockMembers.map((member) => (
+              <tr key={member.user_id} className="bg-background hover:bg-muted/50">
+                <td className="px-4 py-3 font-medium text-primary">{member.name}</td>
+                <td className="px-4 py-3 text-muted-foreground">{member.email}</td>
+                <td className="px-4 py-3 font-mono text-xs text-muted-foreground">
+                  {member.user_id}
+                </td>
+                <td className="px-4 py-3 text-right">
+                  <button
+                    onClick={() => navigate(`/member-management/${member.user_id}`)}
+                    className="text-xs font-medium text-primary hover:underline"
+                  >
+                    View Details
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };