Refactor useAuth hook, settings components, and docs for formatting and readability improvements

- Consolidated multi-line arguments into single lines where appropriate in `useAuth`.
- Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`).
- Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`).
- Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.

frontend/tests/app/(auth)/password-reset/confirm/PasswordResetConfirmContent.test.tsx

@@ -38,9 +38,7 @@ jest.mock('next/dynamic', () => ({
 
 // Mock Alert component
 jest.mock('@/components/ui/alert', () => ({
-  Alert: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="alert">{children}</div>
-  ),
+  Alert: ({ children }: { children: React.ReactNode }) => <div data-testid="alert">{children}</div>,
 }));
 
 describe('PasswordResetConfirmContent', () => {
@@ -144,7 +142,9 @@ describe('PasswordResetConfirmContent', () => {
     it('shows error message', () => {
       render(<PasswordResetConfirmContent />);
 
-      expect(screen.getByText(/this password reset link is invalid or has expired/i)).toBeInTheDocument();
+      expect(
+        screen.getByText(/this password reset link is invalid or has expired/i)
+      ).toBeInTheDocument();
     });
 
     it('shows link to request new reset', () => {

frontend/tests/app/(auth)/password-reset/page.test.tsx

@@ -10,7 +10,9 @@ import PasswordResetPage from '@/app/(auth)/password-reset/page';
 jest.mock('next/dynamic', () => ({
   __esModule: true,
   default: (_importFn: () => Promise<any>, _options?: any) => {
-    const Component = () => <div data-testid="password-reset-form">Mocked PasswordResetRequestForm</div>;
+    const Component = () => (
+      <div data-testid="password-reset-form">Mocked PasswordResetRequestForm</div>
+    );
     Component.displayName = 'PasswordResetRequestForm';
     return Component;
   },

frontend/tests/app/(authenticated)/settings/password/page.test.tsx

@@ -16,11 +16,7 @@ describe('PasswordSettingsPage', () => {
   });
 
   const renderWithProvider = (component: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>);
   };
 
   it('renders without crashing', () => {

frontend/tests/app/(authenticated)/settings/preferences/page.test.tsx

@@ -16,9 +16,7 @@ describe('PreferencesPage', () => {
   it('renders placeholder message', () => {
     render(<PreferencesPage />);
 
-    expect(
-      screen.getByText(/Configure your preferences/)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/Configure your preferences/)).toBeInTheDocument();
   });
 
   it('mentions Task 3.5', () => {

frontend/tests/app/(authenticated)/settings/profile/page.test.tsx

@@ -84,9 +84,7 @@ describe('ProfileSettingsPage', () => {
   const renderWithProvider = (component: React.ReactElement) => {
     return render(
       <QueryClientProvider client={queryClient}>
-        <AuthProvider store={mockStoreHook}>
-          {component}
-        </AuthProvider>
+        <AuthProvider store={mockStoreHook}>{component}</AuthProvider>
       </QueryClientProvider>
     );
   };

frontend/tests/app/(authenticated)/settings/sessions/page.test.tsx

@@ -29,11 +29,7 @@ describe('SessionsPage', () => {
   });
 
   const renderWithProvider = (component: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>);
   };
 
   it('renders without crashing', () => {

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

@@ -50,9 +50,7 @@ describe('AdminLayout', () => {
   });
 
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
 
   it('renders layout with all components for superuser', () => {

frontend/tests/app/admin/organizations/[id]/members/page.test.tsx

@@ -20,9 +20,7 @@ jest.mock('next/link', () => ({
 // Mock OrganizationMembersContent component
 jest.mock('@/components/admin/organizations/OrganizationMembersContent', () => ({
   OrganizationMembersContent: ({ organizationId }: { organizationId: string }) => (
-    <div data-testid="organization-members-content">
-      Organization ID: {organizationId}
-    </div>
+    <div data-testid="organization-members-content">Organization ID: {organizationId}</div>
   ),
 }));
 

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

@@ -8,7 +8,9 @@ import AdminOrganizationsPage from '@/app/admin/organizations/page';
 
 // Mock the entire OrganizationManagementContent component
 jest.mock('@/components/admin/organizations/OrganizationManagementContent', () => ({
-  OrganizationManagementContent: () => <div data-testid="organization-management">Organization Management</div>,
+  OrganizationManagementContent: () => (
+    <div data-testid="organization-management">Organization Management</div>
+  ),
 }));
 
 describe('AdminOrganizationsPage', () => {

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

@@ -13,8 +13,12 @@ jest.mock('@/lib/api/hooks/useAdmin');
 // Mock chart components
 jest.mock('@/components/charts', () => ({
   UserGrowthChart: () => <div data-testid="user-growth-chart">User Growth Chart</div>,
-  OrganizationDistributionChart: () => <div data-testid="org-distribution-chart">Org Distribution Chart</div>,
-  SessionActivityChart: () => <div data-testid="session-activity-chart">Session Activity Chart</div>,
+  OrganizationDistributionChart: () => (
+    <div data-testid="org-distribution-chart">Org Distribution Chart</div>
+  ),
+  SessionActivityChart: () => (
+    <div data-testid="session-activity-chart">Session Activity Chart</div>
+  ),
   UserStatusChart: () => <div data-testid="user-status-chart">User Status Chart</div>,
 }));
 
@@ -66,27 +70,21 @@ describe('AdminPage', () => {
     renderWithMockedStats();
 
     expect(screen.getByText('User Management')).toBeInTheDocument();
-    expect(
-      screen.getByText('View, create, and manage user accounts')
-    ).toBeInTheDocument();
+    expect(screen.getByText('View, create, and manage user accounts')).toBeInTheDocument();
   });
 
   it('renders organizations card', () => {
     renderWithMockedStats();
 
     // Check for the quick actions card (not the stat card)
-    expect(
-      screen.getByText('Manage organizations and their members')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Manage organizations and their members')).toBeInTheDocument();
   });
 
   it('renders system settings card', () => {
     renderWithMockedStats();
 
     expect(screen.getByText('System Settings')).toBeInTheDocument();
-    expect(
-      screen.getByText('Configure system-wide settings')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Configure system-wide settings')).toBeInTheDocument();
   });
 
   it('renders quick actions in grid layout', () => {

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

@@ -16,9 +16,7 @@ describe('AdminSettingsPage', () => {
   it('renders page description', () => {
     render(<AdminSettingsPage />);
 
-    expect(
-      screen.getByText('Configure system-wide settings and preferences')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Configure system-wide settings and preferences')).toBeInTheDocument();
   });
 
   it('renders back button link', () => {
@@ -31,29 +29,17 @@ describe('AdminSettingsPage', () => {
   it('renders coming soon message', () => {
     render(<AdminSettingsPage />);
 
-    expect(
-      screen.getByText('System Settings Coming Soon')
-    ).toBeInTheDocument();
+    expect(screen.getByText('System Settings Coming Soon')).toBeInTheDocument();
   });
 
   it('renders feature list', () => {
     render(<AdminSettingsPage />);
 
-    expect(
-      screen.getByText(/General system configuration/)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/Email and notification settings/)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/Security and authentication options/)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/API and integration settings/)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/Maintenance and backup tools/)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/General system configuration/)).toBeInTheDocument();
+    expect(screen.getByText(/Email and notification settings/)).toBeInTheDocument();
+    expect(screen.getByText(/Security and authentication options/)).toBeInTheDocument();
+    expect(screen.getByText(/API and integration settings/)).toBeInTheDocument();
+    expect(screen.getByText(/Maintenance and backup tools/)).toBeInTheDocument();
   });
 
   it('renders with proper container structure', () => {

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

@@ -145,11 +145,7 @@ describe('AdminUsersPage', () => {
   });
 
   const renderWithProviders = (ui: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {ui}
-      </QueryClientProvider>
-    );
+    return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
   };
 
   it('renders page title', () => {
@@ -161,9 +157,7 @@ describe('AdminUsersPage', () => {
   it('renders page description', () => {
     renderWithProviders(<AdminUsersPage />);
 
-    expect(
-      screen.getByText('View, create, and manage user accounts')
-    ).toBeInTheDocument();
+    expect(screen.getByText('View, create, and manage user accounts')).toBeInTheDocument();
   });
 
   it('renders back button link', () => {
@@ -184,9 +178,7 @@ describe('AdminUsersPage', () => {
   it('renders "Manage user accounts and permissions" description', () => {
     renderWithProviders(<AdminUsersPage />);
 
-    expect(
-      screen.getByText('Manage user accounts and permissions')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Manage user accounts and permissions')).toBeInTheDocument();
   });
 
   it('renders create user button', () => {

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

@@ -10,9 +10,7 @@ describe('ForbiddenPage', () => {
   it('renders page heading', () => {
     render(<ForbiddenPage />);
 
-    expect(
-      screen.getByRole('heading', { name: /403 - Access Forbidden/i })
-    ).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /403 - Access Forbidden/i })).toBeInTheDocument();
   });
 
   it('renders permission denied message', () => {
@@ -26,9 +24,7 @@ describe('ForbiddenPage', () => {
   it('renders admin privileges message', () => {
     render(<ForbiddenPage />);
 
-    expect(
-      screen.getByText(/This page requires administrator privileges/)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/This page requires administrator privileges/)).toBeInTheDocument();
   });
 
   it('renders link to dashboard', () => {

frontend/tests/app/page.test.tsx

@@ -126,9 +126,18 @@ describe('HomePage', () => {
 
     it('has CTAs for each feature', () => {
       render(<Home />);
-      expect(screen.getByRole('link', { name: /View Auth Flow/i })).toHaveAttribute('href', '/login');
-      expect(screen.getByRole('link', { name: /See Organizations/i })).toHaveAttribute('href', '/admin/organizations');
-      expect(screen.getByRole('link', { name: /Try Admin Panel/i })).toHaveAttribute('href', '/admin');
+      expect(screen.getByRole('link', { name: /View Auth Flow/i })).toHaveAttribute(
+        'href',
+        '/login'
+      );
+      expect(screen.getByRole('link', { name: /See Organizations/i })).toHaveAttribute(
+        'href',
+        '/admin/organizations'
+      );
+      expect(screen.getByRole('link', { name: /Try Admin Panel/i })).toHaveAttribute(
+        'href',
+        '/admin'
+      );
     });
   });
 
@@ -218,19 +227,19 @@ describe('HomePage', () => {
     it('has login link', () => {
       render(<Home />);
       const loginLinks = screen.getAllByRole('link', { name: /Login/i });
-      expect(loginLinks.some(link => link.getAttribute('href') === '/login')).toBe(true);
+      expect(loginLinks.some((link) => link.getAttribute('href') === '/login')).toBe(true);
     });
 
     it('has component showcase link', () => {
       render(<Home />);
       const devLinks = screen.getAllByRole('link', { name: /Component/i });
-      expect(devLinks.some(link => link.getAttribute('href') === '/dev')).toBe(true);
+      expect(devLinks.some((link) => link.getAttribute('href') === '/dev')).toBe(true);
     });
 
     it('has admin demo link', () => {
       render(<Home />);
       const adminLinks = screen.getAllByRole('link', { name: /Admin/i });
-      expect(adminLinks.some(link => link.getAttribute('href') === '/admin')).toBe(true);
+      expect(adminLinks.some((link) => link.getAttribute('href') === '/admin')).toBe(true);
     });
   });
 
@@ -245,7 +254,7 @@ describe('HomePage', () => {
     it('has external links with proper attributes', () => {
       render(<Home />);
       const githubLinks = screen.getAllByRole('link', { name: /GitHub/i });
-      const externalLink = githubLinks.find(link =>
+      const externalLink = githubLinks.find((link) =>
         link.getAttribute('href')?.includes('github.com')
       );
       expect(externalLink).toHaveAttribute('target', '_blank');