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