adserver-dashboard 1.0.0

package/e2e/autonomous-flow.spec.ts

@@ -0,0 +1,308 @@
+import { test, expect, takeScreenshot, saveDOMSnapshot, waitForNetworkIdle, waitForAPIResponse } from './fixtures/enhanced-test';
+
+/**
+ * Autonomous End-to-End Flow Test
+ * Complete test with SSO login, screenshots, DOM snapshots, console logs, and network monitoring
+ */
+test.describe('Autonomous Complete Flow Test', () => {
+  test('should complete full Direct Campaigns workflow with full observability', async ({ authenticatedPage: page, testInfo }) => {
+    console.log('\n🚀 Starting Autonomous Complete Flow Test\n');
+    console.log('=' .repeat(80));
+
+    // Step 1: Navigate to Direct Campaigns
+    console.log('\n📍 Step 1: Navigate to Direct Campaigns page');
+    await page.goto('/direct-campaigns');
+    await waitForNetworkIdle(page);
+    await takeScreenshot(page, 'step-01-campaigns-page', testInfo);
+    await saveDOMSnapshot(page, 'step-01-campaigns-page', testInfo);
+
+    // Verify page loaded
+    await expect(page.getByRole('heading', { name: 'Direct Campaigns' })).toBeVisible();
+    console.log('✅ Direct Campaigns page loaded');
+
+    // Step 2: Wait for campaigns API response
+    console.log('\n📍 Step 2: Wait for campaigns data to load');
+    const campaignsResponse = await waitForAPIResponse(page, '/direct-campaigns');
+    const campaignsData = await campaignsResponse.json();
+    console.log('📊 Campaigns loaded:', campaignsData.result?.pagination || campaignsData.pagination);
+    await page.waitForSelector('table tbody tr, .grid.grid-cols-1', { timeout: 10000 });
+    await takeScreenshot(page, 'step-02-campaigns-loaded', testInfo);
+
+    // Step 3: Test Search Functionality
+    console.log('\n📍 Step 3: Test search functionality');
+    const searchInput = page.getByPlaceholder('Search here...');
+    await searchInput.fill('Campaign');
+    console.log('⌨️  Typed search query: "Campaign"');
+
+    await page.waitForTimeout(600); // Wait for debounce
+    await waitForNetworkIdle(page);
+    await takeScreenshot(page, 'step-03-search-results', testInfo);
+    console.log('✅ Search results displayed');
+
+    // Clear search
+    await searchInput.clear();
+    await page.waitForTimeout(600);
+    await waitForNetworkIdle(page);
+    console.log('🧹 Search cleared');
+
+    // Step 4: Test View Toggle - Switch to List View
+    console.log('\n📍 Step 4: Switch to List View');
+    const listViewButton = page.locator('button[title="List View"]');
+    await listViewButton.click();
+    await page.waitForTimeout(300);
+    await page.waitForSelector('table', { timeout: 5000 });
+    await takeScreenshot(page, 'step-04-list-view', testInfo);
+    await saveDOMSnapshot(page, 'step-04-list-view', testInfo);
+    console.log('✅ Switched to List View');
+
+    // Verify table columns
+    const columns = ['Campaign Name', 'Brand', 'Flight Dates', 'Client Type', 'Status', 'Actions'];
+    for (const column of columns) {
+      await expect(page.getByRole('columnheader', { name: column })).toBeVisible();
+    }
+    console.log('✅ All table columns visible');
+
+    // Step 5: Test Row Selection
+    console.log('\n📍 Step 5: Test row selection');
+    const firstRowCheckbox = page.locator('table tbody tr').first().locator('input[type="checkbox"]');
+    await firstRowCheckbox.check();
+    await expect(firstRowCheckbox).toBeChecked();
+    await takeScreenshot(page, 'step-05-row-selected', testInfo);
+    console.log('✅ Row selected');
+
+    await firstRowCheckbox.uncheck();
+    console.log('✅ Row unselected');
+
+    // Step 6: Test Select All
+    console.log('\n📍 Step 6: Test select all functionality');
+    const selectAllCheckbox = page.locator('#table-select-all-checkbox');
+    await selectAllCheckbox.check();
+    await expect(selectAllCheckbox).toBeChecked();
+    await takeScreenshot(page, 'step-06-all-selected', testInfo);
+    console.log('✅ All rows selected');
+
+    await selectAllCheckbox.uncheck();
+    console.log('✅ All rows unselected');
+
+    // Step 7: Test Pagination
+    console.log('\n📍 Step 7: Test pagination controls');
+    const paginationSection = page.locator('.bg-white.dark\\:bg-mw-neutral-900').filter({ hasText: /Page \d+ of \d+/ });
+    await expect(paginationSection).toBeVisible();
+    console.log('✅ Pagination controls visible');
+
+    // Check page info
+    const pageInfo = page.getByText(/Page \d+ of \d+/);
+    const pageText = await pageInfo.textContent();
+    console.log('📄 Current page info:', pageText);
+
+    // Test Next button if available
+    const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+    if (!(await nextButton.isDisabled())) {
+      console.log('⏭️  Clicking Next button');
+      await nextButton.click();
+      await waitForNetworkIdle(page);
+      await takeScreenshot(page, 'step-07-next-page', testInfo);
+
+      const newPageText = await pageInfo.textContent();
+      console.log('📄 New page info:', newPageText);
+      console.log('✅ Pagination navigation successful');
+
+      // Go back to first page
+      const firstButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-first') }).first();
+      await firstButton.click();
+      await waitForNetworkIdle(page);
+      console.log('⏮️  Returned to first page');
+    } else {
+      console.log('ℹ️  Only one page available, skipping pagination test');
+    }
+
+    // Step 8: Test Campaign Actions Menu
+    console.log('\n📍 Step 8: Test campaign actions menu');
+    const firstRow = page.locator('table tbody tr').first();
+    const actionsButton = firstRow.getByRole('button').last();
+    await actionsButton.click();
+    await page.waitForTimeout(300);
+    await takeScreenshot(page, 'step-08-actions-menu', testInfo);
+
+    // Verify menu items
+    await expect(page.getByText('View Details')).toBeVisible();
+    await expect(page.getByText('Edit Campaign')).toBeVisible();
+    await expect(page.getByText('Delete')).toBeVisible();
+    console.log('✅ Actions menu opened with all options');
+
+    // Close menu by clicking outside
+    await page.click('body');
+    await page.waitForTimeout(300);
+    console.log('✅ Actions menu closed');
+
+    // Step 9: Test Campaign Row Click Navigation
+    console.log('\n📍 Step 9: Test campaign row click navigation');
+    const campaignNameCell = firstRow.locator('td').nth(1);
+    const campaignName = await campaignNameCell.textContent();
+    console.log('🎯 Clicking on campaign:', campaignName);
+
+    await campaignNameCell.click();
+    await page.waitForURL(/\/direct-campaigns\/.+/, { timeout: 5000 });
+    await waitForNetworkIdle(page);
+    await takeScreenshot(page, 'step-09-campaign-details', testInfo);
+    await saveDOMSnapshot(page, 'step-09-campaign-details', testInfo);
+
+    const detailsUrl = page.url();
+    console.log('✅ Navigated to campaign details:', detailsUrl);
+
+    // Go back to campaigns list
+    await page.goBack();
+    await waitForNetworkIdle(page);
+    console.log('⬅️  Navigated back to campaigns list');
+
+    // Step 10: Test Grid View
+    console.log('\n📍 Step 10: Switch to Grid View');
+    const gridViewButton = page.locator('button[title="Grid View"]');
+    await gridViewButton.click();
+    await page.waitForTimeout(300);
+    await page.waitForSelector('.grid.grid-cols-1', { timeout: 5000 });
+    await takeScreenshot(page, 'step-10-grid-view', testInfo);
+    await saveDOMSnapshot(page, 'step-10-grid-view', testInfo);
+    console.log('✅ Switched to Grid View');
+
+    // Verify campaign cards are visible
+    const campaignCards = page.locator('[class*="rounded-lg"][class*="border"]');
+    const cardCount = await campaignCards.count();
+    console.log(`✅ ${cardCount} campaign cards visible in grid view`);
+
+    // Step 11: Test Filter Modal
+    console.log('\n📍 Step 11: Test filter modal');
+    const filterButton = page.getByRole('button', { name: /Filter/i });
+    await filterButton.click();
+    await page.waitForTimeout(500);
+    await takeScreenshot(page, 'step-11-filter-modal', testInfo);
+
+    // Check if filter modal opened (if available)
+    const filterModal = page.locator('[role="dialog"]');
+    if (await filterModal.isVisible().catch(() => false)) {
+      console.log('✅ Filter modal opened');
+      await saveDOMSnapshot(page, 'step-11-filter-modal', testInfo);
+
+      // Close modal
+      const closeButton = page.locator('button:has-text("Close"), button[aria-label="Close"]');
+      if (await closeButton.isVisible().catch(() => false)) {
+        await closeButton.click();
+        console.log('✅ Filter modal closed');
+      } else {
+        // Click outside to close
+        await page.keyboard.press('Escape');
+        console.log('✅ Filter modal closed with Escape');
+      }
+    } else {
+      console.log('ℹ️  Filter modal not implemented yet');
+    }
+
+    // Step 12: Test Create Campaign Button
+    console.log('\n📍 Step 12: Test Create Campaign button');
+    const createButton = page.getByRole('button', { name: /Create Campaign/i });
+    await expect(createButton).toBeVisible();
+    await takeScreenshot(page, 'step-12-create-button', testInfo);
+    console.log('✅ Create Campaign button visible');
+
+    // Optional: Click if you want to test the create flow
+    // await createButton.click();
+    // await waitForNetworkIdle(page);
+    // console.log('✅ Navigated to Create Campaign page');
+
+    // Final Step: Summary
+    console.log('\n📍 Final Step: Test Summary');
+    console.log('=' .repeat(80));
+    console.log('✅ Test completed successfully!');
+    console.log(`📸 Screenshots saved to: ${testInfo.screenshotDir}`);
+    console.log(`📝 Logs saved to: ${testInfo.logDir}`);
+    console.log(`🌐 Network requests: ${testInfo.networkLogs.length}`);
+    console.log(`🖥️  Console logs: ${testInfo.consoleLogs.length}`);
+    console.log(`❌ Errors: ${testInfo.errors.length}`);
+
+    // Take final screenshot
+    await takeScreenshot(page, 'step-13-final-state', testInfo);
+    await saveDOMSnapshot(page, 'step-13-final-state', testInfo);
+
+    console.log('\n🎉 All steps completed successfully!');
+    console.log('=' .repeat(80) + '\n');
+  });
+
+  test('should verify pagination maintains state correctly across navigation', async ({ authenticatedPage: page, testInfo }) => {
+    console.log('\n🚀 Testing Pagination State Persistence\n');
+
+    // Navigate to campaigns
+    await page.goto('/direct-campaigns');
+    await waitForNetworkIdle(page);
+    await takeScreenshot(page, 'pagination-test-01-initial', testInfo);
+
+    // Switch to list view
+    const listViewButton = page.locator('button[title="List View"]');
+    await listViewButton.click();
+    await page.waitForTimeout(300);
+
+    // Navigate to page 2 if available
+    const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+    if (!(await nextButton.isDisabled())) {
+      await nextButton.click();
+      await waitForNetworkIdle(page);
+      await takeScreenshot(page, 'pagination-test-02-page-2', testInfo);
+
+      // Verify we're on page 2
+      const pageInfo = page.getByText(/Page \d+ of \d+/);
+      await expect(pageInfo).toContainText('Page 2');
+      console.log('✅ Navigated to page 2');
+
+      // Navigate to a campaign detail page
+      const firstCampaignCell = page.locator('table tbody tr').first().locator('td').nth(1);
+      await firstCampaignCell.click();
+      await page.waitForURL(/\/direct-campaigns\/.+/);
+      await waitForNetworkIdle(page);
+      console.log('✅ Opened campaign details');
+
+      // Go back
+      await page.goBack();
+      await waitForNetworkIdle(page);
+      await takeScreenshot(page, 'pagination-test-03-returned', testInfo);
+
+      // Verify still on page 2
+      await expect(pageInfo).toContainText('Page 2');
+      console.log('✅ Pagination state maintained after navigation');
+    }
+
+    console.log('✅ Pagination state persistence test completed');
+  });
+
+  test('should handle empty search results gracefully', async ({ authenticatedPage: page, testInfo }) => {
+    console.log('\n🚀 Testing Empty Search Results\n');
+
+    await page.goto('/direct-campaigns');
+    await waitForNetworkIdle(page);
+
+    // Search for non-existent campaign
+    const searchInput = page.getByPlaceholder('Search here...');
+    await searchInput.fill('NONEXISTENT_CAMPAIGN_XYZ_999');
+    await page.waitForTimeout(600);
+    await waitForNetworkIdle(page);
+    await takeScreenshot(page, 'empty-search-01-no-results', testInfo);
+
+    // Verify empty state message
+    const emptyMessage = page.getByText(/No campaigns found/i);
+    await expect(emptyMessage).toBeVisible();
+    console.log('✅ Empty state message displayed');
+
+    // Verify pagination is hidden
+    const paginationSection = page.locator('.bg-white.dark\\:bg-mw-neutral-900').filter({ hasText: /Page \d+ of \d+/ });
+    await expect(paginationSection).not.toBeVisible();
+    console.log('✅ Pagination hidden for empty results');
+
+    // Clear search
+    await searchInput.clear();
+    await page.waitForTimeout(600);
+    await waitForNetworkIdle(page);
+    await takeScreenshot(page, 'empty-search-02-results-restored', testInfo);
+
+    // Verify campaigns reappeared
+    await expect(page.locator('table tbody tr, .grid.grid-cols-1')).toBeVisible();
+    console.log('✅ Results restored after clearing search');
+  });
+});

package/e2e/debug-sso.spec.ts

@@ -0,0 +1,163 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Debug SSO Login with Network and Console Monitoring
+ */
+
+test('Debug SSO with Network/Console Logs', async ({ page }) => {
+  // Capture console messages
+  const consoleLogs: string[] = [];
+  page.on('console', (msg) => {
+    const logMsg = `[${msg.type()}] ${msg.text()}`;
+    consoleLogs.push(logMsg);
+    console.log('🖥️  CONSOLE:', logMsg);
+  });
+
+  // Capture network requests
+  const networkLogs: any[] = [];
+  page.on('response', async (response) => {
+    const url = response.url();
+    const status = response.status();
+    const method = response.request().method();
+
+    const log = { method, status, url };
+    networkLogs.push(log);
+
+    console.log(`🌐 ${method} ${status}: ${url}`);
+
+    // Log response body for failed requests
+    if (status >= 400) {
+      try {
+        const body = await response.text();
+        console.log(`   ❌ Response body:`, body.substring(0, 500));
+      } catch (e) {
+        console.log(`   ❌ Could not read response body`);
+      }
+    }
+  });
+
+  // Capture page errors
+  page.on('pageerror', (error) => {
+    console.log('❌ PAGE ERROR:', error.message);
+  });
+
+  console.log('\n=== STEP 1: Navigate to Login ===');
+  await page.goto('/login', { waitUntil: 'networkidle' });
+  await page.screenshot({ path: 'debug-01-login.png', fullPage: true });
+
+  console.log('\n=== STEP 2: Click SSO Button ===');
+  const ssoButton = page.locator('button:has-text("Sign in with MW ID")');
+  await ssoButton.click();
+  await page.waitForLoadState('networkidle');
+  await page.screenshot({ path: 'debug-02-sso-page.png', fullPage: true });
+
+  console.log('\n=== STEP 3: Fill Credentials ===');
+  const emailInput = page.locator('input[type="email"]').first();
+  const passwordInput = page.locator('input[type="password"]').first();
+
+  const testEmail = process.env.SSO_TEST_USER || 'jeki@jeki.com';
+  const testPassword = process.env.SSO_TEST_PASSWORD || 'jeki@123';
+
+  console.log(`   Using: ${testEmail} / ${testPassword}`);
+
+  await emailInput.click();
+  await emailInput.fill(testEmail);
+  await passwordInput.click();
+  await passwordInput.fill(testPassword);
+
+  await page.waitForTimeout(1000);
+  await page.screenshot({ path: 'debug-03-filled.png', fullPage: true });
+
+  const emailValue = await emailInput.inputValue();
+  const passwordValue = await passwordInput.inputValue();
+  console.log(`   Email: "${emailValue}"`);
+  console.log(`   Password: ${passwordValue.length} chars`);
+
+  console.log('\n=== STEP 4: Submit Form (watching network) ===');
+  const submitButton = page.locator('button[type="submit"]').first();
+
+  // Listen for any form submission errors
+  const requestPromise = page.waitForResponse(
+    (response) => response.url().includes('login') || response.url().includes('auth'),
+    { timeout: 10000 }
+  ).catch(() => null);
+
+  await submitButton.click();
+  console.log('   ✅ Submit button clicked');
+
+  // Wait for response
+  const response = await requestPromise;
+  if (response) {
+    console.log(`   📥 Response: ${response.status()} ${response.url()}`);
+    try {
+      const contentType = response.headers()['content-type'];
+      console.log(`   Content-Type: ${contentType}`);
+
+      if (contentType?.includes('json')) {
+        const body = await response.json();
+        console.log(`   Response body:`, JSON.stringify(body, null, 2));
+      } else {
+        const text = await response.text();
+        console.log(`   Response text (first 500 chars):`, text.substring(0, 500));
+      }
+    } catch (e) {
+      console.log(`   Could not read response`);
+    }
+  }
+
+  // Wait for navigation or error
+  await page.waitForTimeout(5000);
+  await page.screenshot({ path: 'debug-04-after-submit.png', fullPage: true });
+
+  console.log('\n=== STEP 5: Check Current State ===');
+  console.log(`   Current URL: ${page.url()}`);
+
+  // Check for error messages
+  const errorSelectors = [
+    '.error',
+    '[role="alert"]',
+    '.text-red-500',
+    '.alert-error',
+    '[class*="error"]',
+    '[class*="Error"]'
+  ];
+
+  for (const selector of errorSelectors) {
+    const errors = await page.locator(selector).all();
+    if (errors.length > 0) {
+      console.log(`\n   ❌ Found errors with selector "${selector}":`);
+      for (const error of errors) {
+        const text = await error.textContent();
+        const isVisible = await error.isVisible();
+        if (isVisible && text) {
+          console.log(`      - ${text.trim()}`);
+        }
+      }
+    }
+  }
+
+  // Check if still on login page
+  const isAuthenticated = !page.url().includes('login');
+  console.log(`\n   Authentication successful: ${isAuthenticated}`);
+
+  console.log('\n=== NETWORK LOG SUMMARY ===');
+  const authRequests = networkLogs.filter(log =>
+    log.url.includes('login') || log.url.includes('auth') || log.url.includes('oauth')
+  );
+  console.log(`Total auth-related requests: ${authRequests.length}`);
+  authRequests.forEach(log => {
+    console.log(`   ${log.method} ${log.status}: ${log.url}`);
+  });
+
+  console.log('\n=== CONSOLE LOG SUMMARY ===');
+  const errorLogs = consoleLogs.filter(log => log.includes('error') || log.includes('Error'));
+  if (errorLogs.length > 0) {
+    console.log('Error logs found:');
+    errorLogs.forEach(log => console.log(`   ${log}`));
+  } else {
+    console.log('No error logs found');
+  }
+
+  console.log('\n=== DEBUG COMPLETE ===');
+  console.log('Check screenshots: debug-*.png');
+});

package/e2e/direct-campaigns.spec.ts

@@ -0,0 +1,219 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Direct Campaigns Page E2E Tests
+ * Tests the complete functionality of the Direct Campaigns listing page
+ */
+test.describe('Direct Campaigns Page', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the Direct Campaigns page
+    await page.goto('/direct-campaigns');
+
+    // Wait for the page to load
+    await page.waitForLoadState('networkidle');
+  });
+
+  test.describe('Page Layout and Elements', () => {
+    test('should display page header with title and description', async ({ page }) => {
+      await expect(page.getByRole('heading', { name: 'Direct Campaigns' })).toBeVisible();
+      await expect(page.getByText('Manage your direct IO campaigns')).toBeVisible();
+    });
+
+    test('should display Create Campaign button', async ({ page }) => {
+      const createButton = page.getByRole('button', { name: /Create Campaign/i });
+      await expect(createButton).toBeVisible();
+      await expect(createButton).toBeEnabled();
+    });
+
+    test('should display search input', async ({ page }) => {
+      const searchInput = page.getByPlaceholder('Search here...');
+      await expect(searchInput).toBeVisible();
+    });
+
+    test('should display view toggle buttons (list/grid)', async ({ page }) => {
+      // Check for list view button
+      const listViewButton = page.locator('button[title="List View"]');
+      await expect(listViewButton).toBeVisible();
+
+      // Check for grid view button
+      const gridViewButton = page.locator('button[title="Grid View"]');
+      await expect(gridViewButton).toBeVisible();
+    });
+
+    test('should display filter button', async ({ page }) => {
+      const filterButton = page.getByRole('button', { name: /Filter/i });
+      await expect(filterButton).toBeVisible();
+    });
+  });
+
+  test.describe('Campaign List Display', () => {
+    test('should display campaigns in the table', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr', { timeout: 10000 });
+
+      // Check if at least one campaign row is visible
+      const rows = page.locator('table tbody tr');
+      await expect(rows.first()).toBeVisible();
+    });
+
+    test('should display correct table columns', async ({ page }) => {
+      // Check for table headers
+      await expect(page.getByRole('columnheader', { name: 'Campaign Name' })).toBeVisible();
+      await expect(page.getByRole('columnheader', { name: 'Brand' })).toBeVisible();
+      await expect(page.getByRole('columnheader', { name: 'Flight Dates' })).toBeVisible();
+      await expect(page.getByRole('columnheader', { name: 'Client Type' })).toBeVisible();
+      await expect(page.getByRole('columnheader', { name: 'Status' })).toBeVisible();
+      await expect(page.getByRole('columnheader', { name: 'Actions' })).toBeVisible();
+    });
+
+    test('should display campaign data in rows', async ({ page }) => {
+      // Wait for first campaign row
+      const firstRow = page.locator('table tbody tr').first();
+      await expect(firstRow).toBeVisible();
+
+      // Verify campaign has required data displayed
+      await expect(firstRow.locator('td').nth(1)).not.toBeEmpty();
+    });
+  });
+
+  test.describe('Search Functionality', () => {
+    test('should filter campaigns based on search input', async ({ page }) => {
+      const searchInput = page.getByPlaceholder('Search here...');
+
+      // Wait for initial campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Get initial count
+      const initialCount = await page.locator('table tbody tr').count();
+
+      // Type search query (minimum 3 characters required based on code)
+      await searchInput.fill('Campaign');
+
+      // Wait for debounce (500ms based on code)
+      await page.waitForTimeout(600);
+
+      // Wait for network request to complete
+      await page.waitForLoadState('networkidle');
+
+      // Verify search was applied (results may change)
+      const searchResults = page.locator('table tbody tr');
+      await expect(searchResults.first()).toBeVisible();
+    });
+
+    test('should not search with less than 3 characters', async ({ page }) => {
+      const searchInput = page.getByPlaceholder('Search here...');
+
+      // Type less than 3 characters
+      await searchInput.fill('Ca');
+
+      // Wait for debounce
+      await page.waitForTimeout(600);
+
+      // Should still show all campaigns (no filtering)
+      const rows = page.locator('table tbody tr');
+      await expect(rows.first()).toBeVisible();
+    });
+
+    test('should clear search results when input is cleared', async ({ page }) => {
+      const searchInput = page.getByPlaceholder('Search here...');
+
+      // Search for something
+      await searchInput.fill('Campaign');
+      await page.waitForTimeout(600);
+      await page.waitForLoadState('networkidle');
+
+      // Clear search
+      await searchInput.clear();
+      await page.waitForTimeout(600);
+      await page.waitForLoadState('networkidle');
+
+      // Should show all campaigns again
+      const rows = page.locator('table tbody tr');
+      await expect(rows.first()).toBeVisible();
+    });
+  });
+
+  test.describe('Row Selection', () => {
+    test('should allow selecting individual campaigns', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Find first checkbox in tbody (skip header checkbox)
+      const firstRowCheckbox = page.locator('table tbody tr').first().locator('input[type="checkbox"]');
+      await expect(firstRowCheckbox).toBeVisible();
+
+      // Select the row
+      await firstRowCheckbox.check();
+      await expect(firstRowCheckbox).toBeChecked();
+
+      // Unselect the row
+      await firstRowCheckbox.uncheck();
+      await expect(firstRowCheckbox).not.toBeChecked();
+    });
+
+    test('should allow selecting all campaigns', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Find select all checkbox in header
+      const selectAllCheckbox = page.locator('#table-select-all-checkbox');
+      await expect(selectAllCheckbox).toBeVisible();
+
+      // Select all
+      await selectAllCheckbox.check();
+      await expect(selectAllCheckbox).toBeChecked();
+
+      // Verify first row is selected
+      const firstRowCheckbox = page.locator('table tbody tr').first().locator('input[type="checkbox"]');
+      await expect(firstRowCheckbox).toBeChecked();
+
+      // Unselect all
+      await selectAllCheckbox.uncheck();
+      await expect(firstRowCheckbox).not.toBeChecked();
+    });
+  });
+
+  test.describe('Campaign Actions', () => {
+    test('should open actions menu for a campaign', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Find first actions button (three dots)
+      const actionsButton = page.locator('table tbody tr').first().getByRole('button').last();
+      await actionsButton.click();
+
+      // Wait for dropdown menu to appear
+      await expect(page.getByText('View Details')).toBeVisible();
+      await expect(page.getByText('Edit Campaign')).toBeVisible();
+      await expect(page.getByText('Delete')).toBeVisible();
+    });
+
+    test('should navigate to campaign details when clicking View Details', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Open actions menu
+      const actionsButton = page.locator('table tbody tr').first().getByRole('button').last();
+      await actionsButton.click();
+
+      // Click View Details
+      await page.getByText('View Details').click();
+
+      // Should navigate to campaign details page
+      await expect(page).toHaveURL(/\/direct-campaigns\/.+/);
+    });
+
+    test('should navigate to campaign details when clicking on row', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Click on first row (not on checkbox or action button)
+      const firstRow = page.locator('table tbody tr').first();
+      const campaignNameCell = firstRow.locator('td').nth(1);
+      await campaignNameCell.click();
+
+      // Should navigate to campaign details page
+      await expect(page).toHaveURL(/\/direct-campaigns\/.+/);
+    });
+  });
+});