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/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', () => {