Add admin hooks, components, and tests for statistics, navigation, and access control

- Introduced `useAdminStats`, `useAdminUsers`, and `useAdminOrganizations` hooks for admin data fetching with React Query.
- Added `AdminSidebar`, `Breadcrumbs`, and related navigation components for the admin section.
- Implemented comprehensive unit and integration tests for admin components.
- Created E2E tests for admin access control, navigation, and dashboard functionality.
- Updated exports to include new admin components.

frontend/tests/app/admin/page.test.tsx

@@ -1,73 +1,93 @@
 /**
  * Tests for Admin Dashboard Page
- * Verifies rendering of admin page placeholder content
+ * Verifies rendering of admin dashboard with stats and quick actions
  */
 
 import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import AdminPage from '@/app/admin/page';
 
+// Helper function to render with QueryClientProvider
+function renderWithQueryClient(component: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {component}
+    </QueryClientProvider>
+  );
+}
+
 describe('AdminPage', () => {
   it('renders admin dashboard title', () => {
-    render(<AdminPage />);
+    renderWithQueryClient(<AdminPage />);
 
     expect(screen.getByText('Admin Dashboard')).toBeInTheDocument();
   });
 
   it('renders description text', () => {
-    render(<AdminPage />);
+    renderWithQueryClient(<AdminPage />);
 
     expect(
       screen.getByText('Manage users, organizations, and system settings')
     ).toBeInTheDocument();
   });
 
-  it('renders users management card', () => {
-    render(<AdminPage />);
+  it('renders quick actions section', () => {
+    renderWithQueryClient(<AdminPage />);
 
-    expect(screen.getByText('Users')).toBeInTheDocument();
+    expect(screen.getByText('Quick Actions')).toBeInTheDocument();
+  });
+
+  it('renders user management card', () => {
+    renderWithQueryClient(<AdminPage />);
+
+    expect(screen.getByText('User Management')).toBeInTheDocument();
     expect(
-      screen.getByText('Manage user accounts and permissions')
+      screen.getByText('View, create, and manage user accounts')
     ).toBeInTheDocument();
   });
 
-  it('renders organizations management card', () => {
-    render(<AdminPage />);
+  it('renders organizations card', () => {
+    renderWithQueryClient(<AdminPage />);
 
-    expect(screen.getByText('Organizations')).toBeInTheDocument();
+    // Check for the quick actions card (not the stat card)
     expect(
-      screen.getByText('View and manage organizations')
+      screen.getByText('Manage organizations and their members')
     ).toBeInTheDocument();
   });
 
   it('renders system settings card', () => {
-    render(<AdminPage />);
+    renderWithQueryClient(<AdminPage />);
 
-    expect(screen.getByText('System')).toBeInTheDocument();
+    expect(screen.getByText('System Settings')).toBeInTheDocument();
     expect(
-      screen.getByText('System settings and configuration')
+      screen.getByText('Configure system-wide settings')
     ).toBeInTheDocument();
   });
 
-  it('displays coming soon messages', () => {
-    render(<AdminPage />);
+  it('renders quick actions in grid layout', () => {
+    renderWithQueryClient(<AdminPage />);
 
-    const comingSoonMessages = screen.getAllByText('Coming soon...');
-    expect(comingSoonMessages).toHaveLength(3);
-  });
+    // Check for Quick Actions heading which is above the grid
+    expect(screen.getByText('Quick Actions')).toBeInTheDocument();
 
-  it('renders cards in grid layout', () => {
-    const { container } = render(<AdminPage />);
-
-    const grid = container.querySelector('.grid');
-    expect(grid).toBeInTheDocument();
-    expect(grid).toHaveClass('gap-4', 'md:grid-cols-2', 'lg:grid-cols-3');
+    // Verify all three quick action cards are present
+    expect(screen.getByText('User Management')).toBeInTheDocument();
+    expect(screen.getByText('System Settings')).toBeInTheDocument();
   });
 
   it('renders with proper container structure', () => {
-    const { container } = render(<AdminPage />);
+    const { container } = renderWithQueryClient(<AdminPage />);
 
     const containerDiv = container.querySelector('.container');
     expect(containerDiv).toBeInTheDocument();
-    expect(containerDiv).toHaveClass('mx-auto', 'px-4', 'py-8');
+    expect(containerDiv).toHaveClass('mx-auto', 'px-6', 'py-8');
   });
 });