Refactor ESLint configuration and update test rules for clarity and consistency

- Consolidated and modularized `eslint.config.mjs` with defined rules for source, test, E2E, and scripts.
- Improved test and E2E rules with relaxed settings for flexibility and enhanced mocking.
- Standardized variable naming and removed redundant imports in unit and E2E tests.
- Updated error handling and comments to align with modern TypeScript best practices (e.g., `@ts-expect-error`).

frontend/tests/app/(auth)/login/page.test.tsx

@@ -9,7 +9,7 @@ import LoginPage from '@/app/(auth)/login/page';
 // Mock dynamic import
 jest.mock('next/dynamic', () => ({
   __esModule: true,
-  default: (importFn: () => Promise<any>, options?: any) => {
+  default: (_importFn: () => Promise<any>, _options?: any) => {
     const Component = () => <div data-testid="login-form">Mocked LoginForm</div>;
     Component.displayName = 'LoginForm';
     return Component;

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

@@ -25,7 +25,7 @@ jest.mock('next/link', () => ({
 // Mock dynamic import
 jest.mock('next/dynamic', () => ({
   __esModule: true,
-  default: (importFn: () => Promise<any>, options?: any) => {
+  default: (_importFn: () => Promise<any>, _options?: any) => {
     const Component = ({ onSuccess }: { onSuccess?: () => void }) => (
       <div data-testid="password-reset-confirm-form">
         <button onClick={onSuccess}>Submit</button>

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

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

frontend/tests/app/(auth)/register/page.test.tsx

@@ -9,7 +9,7 @@ import RegisterPage from '@/app/(auth)/register/page';
 // Mock dynamic import
 jest.mock('next/dynamic', () => ({
   __esModule: true,
-  default: (importFn: () => Promise<any>, options?: any) => {
+  default: (_importFn: () => Promise<any>, _options?: any) => {
     const Component = () => <div data-testid="register-form">Mocked RegisterForm</div>;
     Component.displayName = 'RegisterForm';
     return Component;

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

@@ -3,7 +3,7 @@
  * Smoke tests for page rendering
  */
 
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import SessionsPage from '@/app/(authenticated)/settings/sessions/page';
 

frontend/tests/components/admin/users/UserActionMenu.test.tsx

@@ -510,8 +510,6 @@ describe('UserActionMenu', () => {
 
   describe('User Name Display', () => {
     it('displays full name when last name is provided', async () => {
-      const user = userEvent.setup();
-
       render(
         <UserActionMenu
           user={mockUser}
@@ -527,7 +525,6 @@ describe('UserActionMenu', () => {
     });
 
     it('displays first name only when last name is null', async () => {
-      const user = userEvent.setup();
       const userWithoutLastName = { ...mockUser, last_name: null };
 
       render(

frontend/tests/components/admin/users/UserFormDialog.test.tsx

@@ -52,9 +52,9 @@ describe('UserFormDialog', () => {
 
   describe('Module Exports', () => {
     it('exports UserFormDialog component', () => {
-      const module = require('@/components/admin/users/UserFormDialog');
-      expect(module.UserFormDialog).toBeDefined();
-      expect(typeof module.UserFormDialog).toBe('function');
+      const moduleExports = require('@/components/admin/users/UserFormDialog');
+      expect(moduleExports.UserFormDialog).toBeDefined();
+      expect(typeof moduleExports.UserFormDialog).toBe('function');
     });
 
     it('component is a valid React component', () => {

frontend/tests/components/layout/Skeletons.test.tsx

@@ -30,7 +30,7 @@ describe('HeaderSkeleton', () => {
   });
 
   it('has proper styling classes', () => {
-    const { container } = render(<HeaderSkeleton />);
+    render(<HeaderSkeleton />);
 
     // Verify backdrop blur and background
     const header = screen.getByRole('banner');
@@ -60,7 +60,7 @@ describe('AuthLoadingSkeleton', () => {
   });
 
   it('renders main content with container', () => {
-    const { container } = render(<AuthLoadingSkeleton />);
+    render(<AuthLoadingSkeleton />);
 
     const main = screen.getByRole('main');
     expect(main).toHaveClass('flex-1');
@@ -71,7 +71,7 @@ describe('AuthLoadingSkeleton', () => {
   });
 
   it('renders skeleton placeholders in main content', () => {
-    const { container } = render(<AuthLoadingSkeleton />);
+    render(<AuthLoadingSkeleton />);
 
     const main = screen.getByRole('main');
 

frontend/tests/components/settings/PasswordChangeForm.test.tsx

@@ -2,7 +2,7 @@
  * Tests for PasswordChangeForm Component
  */
 
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { PasswordChangeForm } from '@/components/settings/PasswordChangeForm';

frontend/tests/components/theme/ThemeToggle.test.tsx

@@ -6,7 +6,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
-import { ThemeProvider, useTheme } from '@/components/theme/ThemeProvider';
+import { useTheme } from '@/components/theme/ThemeProvider';
 
 // Mock theme provider for controlled testing
 jest.mock('@/components/theme/ThemeProvider', () => {

frontend/tests/hooks/usePrefersReducedMotion.test.ts

@@ -164,7 +164,7 @@ describe('usePrefersReducedMotion', () => {
   it('handles SSR environment safely', () => {
     const originalWindow = global.window;
 
-    // @ts-ignore - Simulating SSR
+    // @ts-expect-error - Simulating SSR
     delete global.window;
 
     const { result } = renderHook(() => usePrefersReducedMotion());

frontend/tests/lib/api/errors.test.ts

@@ -630,7 +630,7 @@ describe('API Error Handling', () => {
 
   describe('Error message completeness', () => {
     it('should have non-empty messages for all error codes', () => {
-      Object.entries(ERROR_MESSAGES).forEach(([code, message]) => {
+      Object.entries(ERROR_MESSAGES).forEach(([_code, message]) => {
         expect(message).toBeTruthy();
         expect(message.length).toBeGreaterThan(0);
         expect(message).not.toBe('');
@@ -639,7 +639,7 @@ describe('API Error Handling', () => {
 
     it('should have user-friendly messages', () => {
       // Check that messages don't contain technical jargon or error codes
-      Object.entries(ERROR_MESSAGES).forEach(([code, message]) => {
+      Object.entries(ERROR_MESSAGES).forEach(([_code, message]) => {
         expect(message).not.toContain('null');
         expect(message).not.toContain('undefined');
         expect(message).not.toContain('Error:');

frontend/tests/lib/api/hooks/useAuth.test.tsx

@@ -4,7 +4,7 @@
  * These tests cover hook setup, types, and basic integration
  */
 
-import { renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   useIsAuthenticated,