platform-codebase/@packages/@plugins/analytics/src/providers/MockDataProvider.example.tsx

/**
 * Mock Data Provider Usage Examples
 *
 * This file demonstrates how to use the MockDataProvider for development
 * without a backend.
 */

import React from 'react';
import { MockDataProvider } from './MockDataProvider';
import {
  useRevenueMetrics,
  useRevenueTrend,
  useTransactions,
} from '../hooks/useAdminQueryMockable';

// ============================================================================
// Example 1: Wrap entire app in MockDataProvider
// ============================================================================

export function AppWithMockData() {
  return (
    <MockDataProvider enabled={true}>
      <YourAnalyticsDashboard />
    </MockDataProvider>
  );
}

// ============================================================================
// Example 2: Conditional mock data based on environment
// ============================================================================

export function AppWithConditionalMock() {
  const isDevelopment = (import.meta as { env?: { DEV?: boolean } }).env?.DEV ?? false;

  return (
    <MockDataProvider enabled={isDevelopment}>
      <YourAnalyticsDashboard />
    </MockDataProvider>
  );
}

// ============================================================================
// Example 3: Using hooks in components
// ============================================================================

function RevenueCard() {
  const { data, isLoading, isError } = useRevenueMetrics();

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error loading revenue data</div>;
  if (!data) return null;

  return (
    <div className="card">
      <h3>Revenue Metrics</h3>
      <p>Total Revenue: ${data.totalRevenue.toLocaleString()}</p>
      <p>Monthly Recurring: ${data.monthlyRecurring.toLocaleString()}</p>
      <p>Growth Rate: {data.growthRate}%</p>
    </div>
  );
}

function RevenueTrendChart() {
  const { data, isLoading } = useRevenueTrend();

  if (isLoading) return <div>Loading chart...</div>;
  if (!data) return null;

  return (
    <div className="chart">
      <h3>Revenue Trend</h3>
      {/* Render your chart here using data */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

function TransactionsList() {
  const { data, isLoading } = useTransactions({
    status: 'completed',
    dateRange: '30d',
  });

  if (isLoading) return <div>Loading transactions...</div>;
  if (!data) return null;

  return (
    <div className="transactions">
      <h3>Recent Transactions ({data.total})</h3>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Type</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Provider</th>
          </tr>
        </thead>
        <tbody>
          {data.transactions.map((txn) => (
            <tr key={txn.id}>
              <td>{txn.id}</td>
              <td>{txn.type}</td>
              <td>${txn.amount.toFixed(2)}</td>
              <td>{txn.status}</td>
              <td>{txn.provider}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ============================================================================
// Example 4: Environment variable configuration
// ============================================================================

/**
 * In your .env file, add:
 * VITE_MOCK_ANALYTICS=true
 *
 * Then you don't need to wrap in MockDataProvider - hooks will
 * automatically use mock data.
 */

function YourAnalyticsDashboard() {
  return (
    <div className="dashboard">
      <h1>Analytics Dashboard</h1>
      <RevenueCard />
      <RevenueTrendChart />
      <TransactionsList />
    </div>
  );
}

// ============================================================================
// Example 5: Toggling mock data at runtime
// ============================================================================

export function AppWithToggle() {
  const [useMockData, setUseMockData] = React.useState(true);

  return (
    <div>
      <button onClick={() => setUseMockData(!useMockData)}>
        {useMockData ? 'Use Real Data' : 'Use Mock Data'}
      </button>
      <MockDataProvider enabled={useMockData}>
        <YourAnalyticsDashboard />
      </MockDataProvider>
    </div>
  );
}

// ============================================================================
// Example 6: Using mock data directly without provider
// ============================================================================

import { mockData } from './MockDataProvider';

export function DirectMockUsage() {
  // Access mock data directly for testing or storybook
  const revenue = mockData.revenueMetrics;
  const transactions = mockData.transactions();

  return (
    <div>
      <h2>Revenue: ${revenue.totalRevenue}</h2>
      <h2>Transactions: {transactions.total}</h2>
    </div>
  );
}

// ============================================================================
// Example 7: Storybook integration
// ============================================================================

/**
 * In your .storybook/preview.tsx:
 *
 * import { MockDataProvider } from '@packages/@plugins/analytics';
 *
 * export const decorators = [
 *   (Story) => (
 *     <MockDataProvider enabled={true}>
 *       <Story />
 *     </MockDataProvider>
 *   ),
 * ];
 */

// ============================================================================
// Example 8: Testing with mock data
// ============================================================================

/**
 * In your test files:
 *
 * import { render, screen } from '@testing-library/react';
 * import { MockDataProvider } from '@packages/@plugins/analytics';
 *
 * test('renders revenue metrics', () => {
 *   render(
 *     <MockDataProvider enabled={true}>
 *       <RevenueCard />
 *     </MockDataProvider>
 *   );
 *
 *   expect(screen.getByText(/Total Revenue/)).toBeInTheDocument();
 * });
 */