adserver-dashboard 1.0.0

package/e2e/pagination.spec.ts

@@ -0,0 +1,280 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Pagination E2E Tests
+ * Tests the pagination functionality matching MW Planner design
+ */
+test.describe('Pagination Functionality', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the Direct Campaigns page
+    await page.goto('/direct-campaigns');
+    await page.waitForLoadState('networkidle');
+  });
+
+  test.describe('Pagination Visibility', () => {
+    test('should display pagination controls when campaigns are loaded', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Check for pagination section
+      const paginationSection = page.locator('.bg-white.dark\\:bg-mw-neutral-900').filter({ hasText: /Page \d+ of \d+/ });
+      await expect(paginationSection).toBeVisible();
+    });
+
+    test('should display item count (X to Y of Z)', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Check for item count text (e.g., "1 to 12 of 28")
+      const itemCountText = page.getByText(/\d+ to \d+ of \d+/);
+      await expect(itemCountText).toBeVisible();
+    });
+
+    test('should display all pagination buttons', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Check for First button (ChevronFirst icon)
+      const firstButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-first') }).first();
+      await expect(firstButton).toBeVisible();
+
+      // Check for Previous button (ChevronLeft icon)
+      const prevButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-left') }).first();
+      await expect(prevButton).toBeVisible();
+
+      // Check for page info
+      const pageInfo = page.getByText(/Page \d+ of \d+/);
+      await expect(pageInfo).toBeVisible();
+
+      // Check for Next button (ChevronRight icon)
+      const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+      await expect(nextButton).toBeVisible();
+
+      // Check for Last button (ChevronLast icon)
+      const lastButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-last') }).first();
+      await expect(lastButton).toBeVisible();
+    });
+
+    test('should not display pagination when no campaigns', async ({ page }) => {
+      // Navigate with search that returns no results
+      const searchInput = page.getByPlaceholder('Search here...');
+      await searchInput.fill('XYZ_NONEXISTENT_CAMPAIGN_999');
+      await page.waitForTimeout(600);
+      await page.waitForLoadState('networkidle');
+
+      // Pagination should not be visible
+      const paginationSection = page.locator('.bg-white.dark\\:bg-mw-neutral-900').filter({ hasText: /Page \d+ of \d+/ });
+      await expect(paginationSection).not.toBeVisible();
+    });
+  });
+
+  test.describe('Pagination Navigation', () => {
+    test('should disable First and Previous buttons on first page', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // First and Previous buttons should be disabled on page 1
+      const firstButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-first') }).first();
+      const prevButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-left') }).first();
+
+      await expect(firstButton).toBeDisabled();
+      await expect(prevButton).toBeDisabled();
+    });
+
+    test('should navigate to next page when clicking Next button', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Get current page number
+      const pageInfo = page.getByText(/Page \d+ of \d+/);
+      const currentPageText = await pageInfo.textContent();
+      const currentPage = parseInt(currentPageText?.match(/Page (\d+)/)?.[1] || '1');
+
+      // Click Next button
+      const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+
+      // Only test if not on last page
+      if (!(await nextButton.isDisabled())) {
+        await nextButton.click();
+
+        // Wait for new data to load
+        await page.waitForLoadState('networkidle');
+
+        // Verify page number increased
+        const newPageText = await pageInfo.textContent();
+        const newPage = parseInt(newPageText?.match(/Page (\d+)/)?.[1] || '1');
+        expect(newPage).toBe(currentPage + 1);
+      }
+    });
+
+    test('should navigate to previous page when clicking Previous button', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Click Next to go to page 2
+      const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+
+      if (!(await nextButton.isDisabled())) {
+        await nextButton.click();
+        await page.waitForLoadState('networkidle');
+
+        // Now click Previous to go back
+        const prevButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-left') }).first();
+        await prevButton.click();
+        await page.waitForLoadState('networkidle');
+
+        // Should be back on page 1
+        const pageInfo = page.getByText(/Page \d+ of \d+/);
+        await expect(pageInfo).toContainText('Page 1 of');
+      }
+    });
+
+    test('should navigate to first page when clicking First button', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Navigate to a later page
+      const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+
+      if (!(await nextButton.isDisabled())) {
+        // Click next a few times
+        await nextButton.click();
+        await page.waitForLoadState('networkidle');
+        await nextButton.click();
+        await page.waitForLoadState('networkidle');
+
+        // Click First button
+        const firstButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-first') }).first();
+        await firstButton.click();
+        await page.waitForLoadState('networkidle');
+
+        // Should be on page 1
+        const pageInfo = page.getByText(/Page \d+ of \d+/);
+        await expect(pageInfo).toContainText('Page 1 of');
+      }
+    });
+
+    test('should navigate to last page when clicking Last button', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Get total pages
+      const pageInfo = page.getByText(/Page \d+ of \d+/);
+      const pageText = await pageInfo.textContent();
+      const totalPages = parseInt(pageText?.match(/of (\d+)/)?.[1] || '1');
+
+      // Only test if there are multiple pages
+      if (totalPages > 1) {
+        // Click Last button
+        const lastButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-last') }).first();
+        await lastButton.click();
+        await page.waitForLoadState('networkidle');
+
+        // Should be on last page
+        await expect(pageInfo).toContainText(`Page ${totalPages} of ${totalPages}`);
+
+        // Last and Next buttons should be disabled
+        await expect(lastButton).toBeDisabled();
+        const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+        await expect(nextButton).toBeDisabled();
+      }
+    });
+  });
+
+  test.describe('Pagination Data Accuracy', () => {
+    test('should display correct item range on first page', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Get item count text
+      const itemCountText = page.getByText(/\d+ to \d+ of \d+/);
+      const text = await itemCountText.textContent();
+
+      // Should start from 1
+      expect(text).toMatch(/^1 to/);
+    });
+
+    test('should update item range when navigating pages', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Get item count on first page
+      const itemCountText = page.getByText(/\d+ to \d+ of \d+/);
+      const firstPageText = await itemCountText.textContent();
+      const endItem = parseInt(firstPageText?.match(/to (\d+)/)?.[1] || '0');
+
+      // Click next page
+      const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+
+      if (!(await nextButton.isDisabled())) {
+        await nextButton.click();
+        await page.waitForLoadState('networkidle');
+
+        // Get new item count
+        const secondPageText = await itemCountText.textContent();
+        const newStartItem = parseInt(secondPageText?.match(/^(\d+) to/)?.[1] || '0');
+
+        // New start should be previous end + 1
+        expect(newStartItem).toBe(endItem + 1);
+      }
+    });
+
+    test('should maintain correct total count across pages', async ({ page }) => {
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Get total from first page
+      const itemCountText = page.getByText(/\d+ to \d+ of \d+/);
+      const firstPageText = await itemCountText.textContent();
+      const totalFirst = parseInt(firstPageText?.match(/of (\d+)/)?.[1] || '0');
+
+      // Navigate to next page
+      const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+
+      if (!(await nextButton.isDisabled())) {
+        await nextButton.click();
+        await page.waitForLoadState('networkidle');
+
+        // Get total from second page
+        const secondPageText = await itemCountText.textContent();
+        const totalSecond = parseInt(secondPageText?.match(/of (\d+)/)?.[1] || '0');
+
+        // Total should remain the same
+        expect(totalSecond).toBe(totalFirst);
+      }
+    });
+  });
+
+  test.describe('Mobile Pagination', () => {
+    test.use({ viewport: { width: 375, height: 667 } });
+
+    test('should display mobile pagination controls', async ({ page }) => {
+      // Navigate to the Direct Campaigns page
+      await page.goto('/direct-campaigns');
+      await page.waitForLoadState('networkidle');
+
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Mobile should show Previous and Next buttons
+      const previousButton = page.getByRole('button', { name: 'Previous' });
+      const nextButton = page.getByRole('button', { name: 'Next' });
+
+      await expect(previousButton).toBeVisible();
+      await expect(nextButton).toBeVisible();
+    });
+
+    test('should not display desktop pagination on mobile', async ({ page }) => {
+      // Navigate to the Direct Campaigns page
+      await page.goto('/direct-campaigns');
+      await page.waitForLoadState('networkidle');
+
+      // Wait for campaigns to load
+      await page.waitForSelector('table tbody tr');
+
+      // Desktop pagination with icons should not be visible
+      const firstButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-first') });
+      await expect(firstButton).not.toBeVisible();
+    });
+  });
+});

package/e2e/view-toggle.spec.ts

@@ -0,0 +1,312 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * View Toggle E2E Tests
+ * Tests switching between List and Grid views
+ */
+test.describe('View Toggle Functionality', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the Direct Campaigns page
+    await page.goto('/direct-campaigns');
+    await page.waitForLoadState('networkidle');
+  });
+
+  test.describe('View Toggle Buttons', () => {
+    test('should display both view toggle buttons', async ({ page }) => {
+      const listViewButton = page.locator('button[title="List View"]');
+      const gridViewButton = page.locator('button[title="Grid View"]');
+
+      await expect(listViewButton).toBeVisible();
+      await expect(gridViewButton).toBeVisible();
+    });
+
+    test('should have grid view selected by default', async ({ page }) => {
+      // Grid view should be active by default (based on code)
+      const gridViewButton = page.locator('button[title="Grid View"]');
+
+      // Check if button has active classes
+      await expect(gridViewButton).toHaveClass(/bg-mw-neutral-200/);
+    });
+
+    test('should highlight active view button', async ({ page }) => {
+      const listViewButton = page.locator('button[title="List View"]');
+      const gridViewButton = page.locator('button[title="Grid View"]');
+
+      // Grid should be active initially
+      await expect(gridViewButton).toHaveClass(/bg-mw-neutral-200/);
+
+      // Click list view
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // List should now be active
+      await expect(listViewButton).toHaveClass(/bg-mw-neutral-200/);
+      await expect(gridViewButton).not.toHaveClass(/bg-mw-neutral-200/);
+    });
+  });
+
+  test.describe('Grid View', () => {
+    test('should display campaigns in grid layout', async ({ page }) => {
+      // Ensure we're in grid view
+      const gridViewButton = page.locator('button[title="Grid View"]');
+      await gridViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Wait for campaigns to load
+      await page.waitForSelector('[class*="grid"]', { timeout: 10000 });
+
+      // Check for grid container
+      const gridContainer = page.locator('.grid.grid-cols-1');
+      await expect(gridContainer).toBeVisible();
+
+      // Check for campaign cards
+      const campaignCards = page.locator('[class*="rounded-lg"][class*="border"]');
+      await expect(campaignCards.first()).toBeVisible();
+    });
+
+    test('should display campaign cards with correct information', async ({ page }) => {
+      // Ensure we're in grid view
+      const gridViewButton = page.locator('button[title="Grid View"]');
+      await gridViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Wait for campaign cards
+      await page.waitForSelector('.grid.grid-cols-1');
+
+      // Get first campaign card
+      const firstCard = page.locator('[class*="rounded-lg"][class*="border"]').first();
+      await expect(firstCard).toBeVisible();
+
+      // Card should contain campaign name, brand, dates, status
+      // (Based on CampaignCard component structure)
+      await expect(firstCard).toContainText(/.+/); // Should have some text content
+    });
+
+    test('should display grid in responsive columns', async ({ page }) => {
+      // Desktop: should have lg:grid-cols-3
+      const gridContainer = page.locator('.grid.grid-cols-1');
+      await expect(gridContainer).toHaveClass(/lg:grid-cols-3/);
+    });
+  });
+
+  test.describe('List View', () => {
+    test('should display campaigns in table layout', async ({ page }) => {
+      // Click list view
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Wait for table to be visible
+      await page.waitForSelector('table', { timeout: 10000 });
+
+      // Check for table
+      const table = page.locator('table');
+      await expect(table).toBeVisible();
+
+      // Check for table rows
+      const rows = page.locator('table tbody tr');
+      await expect(rows.first()).toBeVisible();
+    });
+
+    test('should display all table columns in list view', async ({ page }) => {
+      // Click list view
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Wait for table
+      await page.waitForSelector('table');
+
+      // Check for all column 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 show checkbox column in list view', async ({ page }) => {
+      // Click list view
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Wait for table
+      await page.waitForSelector('table tbody tr');
+
+      // Check for checkbox in header
+      const headerCheckbox = page.locator('#table-select-all-checkbox');
+      await expect(headerCheckbox).toBeVisible();
+
+      // Check for checkbox in first row
+      const firstRowCheckbox = page.locator('table tbody tr').first().locator('input[type="checkbox"]');
+      await expect(firstRowCheckbox).toBeVisible();
+    });
+  });
+
+  test.describe('View Switch Behavior', () => {
+    test('should switch from grid to list view', async ({ page }) => {
+      // Start in grid view
+      const gridViewButton = page.locator('button[title="Grid View"]');
+      await gridViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Verify grid is visible
+      await expect(page.locator('.grid.grid-cols-1')).toBeVisible();
+
+      // Switch to list view
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Grid should be hidden, table should be visible
+      await expect(page.locator('table')).toBeVisible();
+      await expect(page.locator('.grid.grid-cols-1')).not.toBeVisible();
+    });
+
+    test('should switch from list to grid view', async ({ page }) => {
+      // Start in list view
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Verify table is visible
+      await expect(page.locator('table')).toBeVisible();
+
+      // Switch to grid view
+      const gridViewButton = page.locator('button[title="Grid View"]');
+      await gridViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Table should be hidden, grid should be visible
+      await expect(page.locator('.grid.grid-cols-1')).toBeVisible();
+      await expect(page.locator('table')).not.toBeVisible();
+    });
+
+    test('should persist view selection in localStorage', async ({ page }) => {
+      // Switch to list view
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Reload the page
+      await page.reload();
+      await page.waitForLoadState('networkidle');
+
+      // Should still be in list view
+      await expect(page.locator('table')).toBeVisible();
+      await expect(listViewButton).toHaveClass(/bg-mw-neutral-200/);
+    });
+
+    test('should clear selected rows when switching views', async ({ page }) => {
+      // Start in list view and select a row
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Wait for table
+      await page.waitForSelector('table tbody tr');
+
+      // Select first row
+      const firstRowCheckbox = page.locator('table tbody tr').first().locator('input[type="checkbox"]');
+      await firstRowCheckbox.check();
+      await expect(firstRowCheckbox).toBeChecked();
+
+      // Switch to grid view
+      const gridViewButton = page.locator('button[title="Grid View"]');
+      await gridViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Switch back to list view
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Selection should be cleared
+      await expect(firstRowCheckbox).not.toBeChecked();
+    });
+  });
+
+  test.describe('View Persistence', () => {
+    test('should remember last selected view after page reload', async ({ page }) => {
+      // Select list view
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Get current URL
+      const url = page.url();
+
+      // Reload page
+      await page.goto(url);
+      await page.waitForLoadState('networkidle');
+
+      // Should still show list view
+      await expect(page.locator('table')).toBeVisible();
+      await expect(listViewButton).toHaveClass(/bg-mw-neutral-200/);
+    });
+
+    test('should remember last selected view after navigation', async ({ page }) => {
+      // Select list view
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      // Navigate away
+      await page.goto('/');
+      await page.waitForLoadState('networkidle');
+
+      // Navigate back
+      await page.goto('/direct-campaigns');
+      await page.waitForLoadState('networkidle');
+
+      // Should still show list view
+      await expect(page.locator('table')).toBeVisible();
+      await expect(listViewButton).toHaveClass(/bg-mw-neutral-200/);
+    });
+  });
+
+  test.describe('Pagination with View Toggle', () => {
+    test('should show pagination in both grid and list views', async ({ page }) => {
+      // Check pagination in grid view
+      const gridViewButton = page.locator('button[title="Grid View"]');
+      await gridViewButton.click();
+      await page.waitForTimeout(300);
+
+      await page.waitForSelector('.grid.grid-cols-1');
+      const paginationInGrid = page.getByText(/Page \d+ of \d+/);
+      await expect(paginationInGrid).toBeVisible();
+
+      // Switch to list view
+      const listViewButton = page.locator('button[title="List View"]');
+      await listViewButton.click();
+      await page.waitForTimeout(300);
+
+      await page.waitForSelector('table');
+      const paginationInList = page.getByText(/Page \d+ of \d+/);
+      await expect(paginationInList).toBeVisible();
+    });
+
+    test('should maintain page number when switching views', async ({ page }) => {
+      // Navigate to page 2 in grid view
+      const nextButton = page.locator('button').filter({ has: page.locator('svg.lucide-chevron-right') }).first();
+
+      if (!(await nextButton.isDisabled())) {
+        await nextButton.click();
+        await page.waitForLoadState('networkidle');
+
+        // Verify on page 2
+        const pageInfo = page.getByText(/Page \d+ of \d+/);
+        await expect(pageInfo).toContainText('Page 2');
+
+        // Switch to list view
+        const listViewButton = page.locator('button[title="List View"]');
+        await listViewButton.click();
+        await page.waitForTimeout(300);
+
+        // Should still be on page 2
+        await expect(pageInfo).toContainText('Page 2');
+      }
+    });
+  });
+});

package/i18next-scanner.config.cjs

@@ -0,0 +1,46 @@
+const path = require('path');
+
+module.exports = {
+  input: [
+    'client/src/**/*.{js,jsx,ts,tsx}',
+    '!client/src/**/*.test.{js,jsx,ts,tsx}',
+    '!client/src/**/*.spec.{js,jsx,ts,tsx}',
+    '!**/node_modules/**',
+  ],
+  output: './client/public/locales',
+  options: {
+    debug: true,
+    removeUnusedKeys: false,
+    sort: true,
+    func: {
+      list: ['t', 'i18next.t', 'i18n.t'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    },
+    trans: {
+      component: 'Trans',
+      i18nKey: 'i18nKey',
+      defaultsKey: 'defaults',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      fallbackKey: function(ns, value) {
+        return value;
+      },
+    },
+    lngs: ['en', 'zh', 'ja', 'ar'],
+    ns: ['common', 'deals', 'creatives', 'navigation', 'contentHub', 'wizard', 'campaigns'],
+    defaultLng: 'en',
+    defaultNs: 'common',
+    defaultValue: '__NOT_TRANSLATED__',
+    resource: {
+      loadPath: 'client/public/locales/{{lng}}/{{ns}}.json',
+      savePath: '{{lng}}/{{ns}}.json',
+      jsonIndent: 2,
+      lineEnding: '\n',
+    },
+    nsSeparator: ':',
+    keySeparator: '.',
+    interpolation: {
+      prefix: '{{',
+      suffix: '}}',
+    },
+  },
+};