platform-codebase/@packages/@plugins/analytics/e2e/test-app/src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { MockDataProvider } from '../../../src/providers/MockDataProvider';

// Import all analytics pages
import {
  RevenuePage,
  TransactionsPage,
  CostsPage,
  PnLPage,
  PerformancePage,
  ErrorTrackingPage,
  RealTimePage,
  BounceRatePage,
  ConversionFunnelsPage,
  ABTestingPage,
} from '../../../src/pages';

const analyticsRoutes = [
  { path: '/analytics/revenue', name: 'Revenue', component: RevenuePage },
  { path: '/analytics/transactions', name: 'Transactions', component: TransactionsPage },
  { path: '/analytics/costs', name: 'Costs', component: CostsPage },
  { path: '/analytics/pnl', name: 'P&L', component: PnLPage },
  { path: '/analytics/performance', name: 'Performance', component: PerformancePage },
  { path: '/analytics/errors', name: 'Errors', component: ErrorTrackingPage },
  { path: '/analytics/real-time', name: 'Real-time', component: RealTimePage },
  { path: '/analytics/bounce-rate', name: 'Bounce Rate', component: BounceRatePage },
  { path: '/analytics/conversions', name: 'Conversions', component: ConversionFunnelsPage },
  { path: '/analytics/ab-tests', name: 'A/B Tests', component: ABTestingPage },
];

function Sidebar() {
  return (
    <nav data-testid="sidebar" style={{ width: 200, padding: 16, borderRight: '1px solid #ccc' }}>
      <h3>Analytics</h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {analyticsRoutes.map(route => (
          <li key={route.path} style={{ marginBottom: 8 }}>
            <Link to={route.path} data-testid={`nav-${route.name.toLowerCase().replace(/[^a-z]/g, '-')}`}>
              {route.name}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}

function App() {
  return (
    <MockDataProvider>
      <BrowserRouter>
        <div style={{ display: 'flex', minHeight: '100vh' }}>
          <Sidebar />
          <main style={{ flex: 1, padding: 24 }}>
            <Routes>
              <Route path="/" element={<div>Welcome to Analytics</div>} />
              {analyticsRoutes.map(route => (
                <Route
                  key={route.path}
                  path={route.path}
                  element={<route.component />}
                />
              ))}
            </Routes>
          </main>
        </div>
      </BrowserRouter>
    </MockDataProvider>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);