page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import { useStore } from '@/contexts/StoreContext';
import { Icon } from '@/contexts/IconContext';
 
interface TestResult {
  name: string;
  url: string;
  status: number | null;
  success: boolean;
  error?: string;
  responseType?: string;
  recordCount?: number;
  duration?: number;
}
 
interface TestCategory {
  name: string;
  tests: Array<{
    name: string;
    path: string;
    type: 'internal' | 'external-buck' | 'external-openapi' | 'external-fd1';
  }>;
}
 
export default function ApiTestPage() {
  const { session } = useStore();
  const [testing, setTesting] = useState(false);
  const [results, setResults] = useState<TestResult[]>([]);
  const [currentTest, setCurrentTest] = useState<string>('');
  const [filter, setFilter] = useState<'all' | 'success' | 'failed'>('all');
 
  const testCategories: TestCategory[] = [
    {
      name: 'ELINK Sales',
      tests: [
        { name: 'Sales List', path: '/api/v1/elink/sales?limit=10', type: 'internal' },
        { name: 'Sales Flat', path: '/api/v1/elink/sales/flat?limit=10', type: 'internal' },
        { name: 'Sales Details (ID: 50000000)', path: '/api/v1/elink/sales/50000000', type: 'internal' },
        { name: 'Sales Report', path: '/api/v1/elink/sales-report', type: 'internal' },
      ],
    },
    {
      name: 'ELINK Products',
      tests: [
        { name: 'Products List', path: '/api/v1/elink/products?limit=10', type: 'internal' },
        { name: 'Product Details (ID: 1)', path: '/api/v1/elink/products/1', type: 'internal' },
        { name: 'Printer Cartridge', path: '/api/v1/elink/printer-cartridge', type: 'internal' },
        { name: 'Printers & Cartridges', path: '/api/v1/printers-cartridges', type: 'internal' },
      ],
    },
    {
      name: 'ELINK Customers',
      tests: [
        { name: 'Customers List', path: '/api/v1/elink/customers?limit=10', type: 'internal' },
        { name: 'Customer Details (ID: 1)', path: '/api/v1/elink/customers/1', type: 'internal' },
      ],
    },
    {
      name: 'ELINK Staff & Org',
      tests: [
        { name: 'Employees', path: '/api/v1/elink/employees', type: 'internal' },
        { name: 'Staff', path: '/api/v1/elink/staff', type: 'internal' },
        { name: 'Staff Used', path: '/api/v1/elink/staff/used', type: 'internal' },
        { name: 'Staff Rights', path: '/api/v1/elink/staff/rights', type: 'internal' },
        { name: 'Staff Used Detail', path: '/api/v1/elink/staff/used/detail', type: 'internal' },
        { name: 'Departments', path: '/api/v1/elink/departments', type: 'internal' },
        { name: 'Locations', path: '/api/v1/elink/locations', type: 'internal' },
        { name: 'Suppliers', path: '/api/v1/elink/suppliers', type: 'internal' },
        { name: 'Topology', path: '/api/v1/elink/topology', type: 'internal' },
      ],
    },
    {
      name: 'ELINK Advisor',
      tests: [
        { name: 'Advisor', path: '/api/v1/elink/advisor', type: 'internal' },
        { name: 'Duplicate Customers', path: '/api/v1/elink/advisor/duplicate-customers', type: 'internal' },
        { name: 'Duplicate PLU', path: '/api/v1/elink/advisor/duplicate-plu', type: 'internal' },
        { name: 'Products Priced Low', path: '/api/v1/elink/advisor/products-priced-low', type: 'internal' },
      ],
    },
    {
      name: 'FD1 Endpoints',
      tests: [
        { name: 'FD1 Products', path: '/api/v1/fd1/products?limit=10', type: 'internal' },
        { name: 'FD1 Product (ID: 1)', path: '/api/v1/fd1/products/1', type: 'internal' },
        { name: 'FD1 Sales', path: '/api/v1/fd1/sales?limit=10', type: 'internal' },
        { name: 'FD1 Sale (ID: 50000000)', path: '/api/v1/fd1/sales/50000000', type: 'internal' },
        { name: 'FD1 Customers', path: '/api/v1/fd1/customers?limit=10', type: 'internal' },
        { name: 'FD1 Customer (ID: 1)', path: '/api/v1/fd1/customers/1', type: 'internal' },
      ],
    },
    {
      name: 'OpenAPI Products',
      tests: [
        { name: 'Products', path: '/api/v1/openapi/products?limit=10', type: 'internal' },
        { name: 'Product (ID: 1)', path: '/api/v1/openapi/products/1', type: 'internal' },
        { name: 'Products Search', path: '/api/v1/openapi/products-search?limit=10', type: 'internal' },
        { name: 'Barcodes', path: '/api/v1/openapi/barcodes', type: 'internal' },
      ],
    },
    {
      name: 'OpenAPI Sales & Customers',
      tests: [
        { name: 'Sales', path: '/api/v1/openapi/sales?limit=10', type: 'internal' },
        { name: 'Customers', path: '/api/v1/openapi/customers?limit=10', type: 'internal' },
        { name: 'Suppliers', path: '/api/v1/openapi/suppliers?limit=10', type: 'internal' },
        { name: 'Supplier (ID: 1)', path: '/api/v1/openapi/suppliers/1', type: 'internal' },
      ],
    },
    {
      name: 'OpenAPI Inventory',
      tests: [
        { name: 'Stocktakes', path: '/api/v1/openapi/stocktakes', type: 'internal' },
        { name: 'Stock Movements', path: '/api/v1/openapi/stock2/movements', type: 'internal' },
        { name: 'Stock Count', path: '/api/v1/openapi/stock2/count', type: 'internal' },
        { name: 'Stock Count Summary', path: '/api/v1/openapi/stock2/count-summary', type: 'internal' },
        { name: 'Reorder Levels', path: '/api/v1/openapi/reorder-levels', type: 'internal' },
        { name: 'Supplier Part Codes', path: '/api/v1/openapi/supplier-part-codes', type: 'internal' },
        { name: 'Stock Levels', path: '/api/v1/inventory/stock-levels', type: 'internal' },
        { name: 'Inventory Movements', path: '/api/v1/inventory/movements', type: 'internal' },
        { name: 'Stock Alerts', path: '/api/v1/products/stock-alerts', type: 'internal' },
      ],
    },
    {
      name: 'OpenAPI Purchase Orders',
      tests: [
        { name: 'Purchase Orders', path: '/api/v1/openapi/purchase-orders', type: 'internal' },
        { name: 'PO Parse', path: '/api/v1/openapi/purchase-order/parse', type: 'internal' },
        { name: 'PO Report', path: '/api/v1/reports/purchase-orders', type: 'internal' },
      ],
    },
    {
      name: 'OpenAPI Config',
      tests: [
        { name: 'Departments', path: '/api/v1/openapi/departments', type: 'internal' },
        { name: 'Department (ID: 1)', path: '/api/v1/openapi/departments/1', type: 'internal' },
        { name: 'Locations', path: '/api/v1/openapi/locations', type: 'internal' },
        { name: 'Webgroups', path: '/api/v1/openapi/webgroups', type: 'internal' },
        { name: 'Pricebook Specials', path: '/api/v1/openapi/pricebook-specials', type: 'internal' },
        { name: 'Shelf Visits', path: '/api/v1/openapi/shelf-visits', type: 'internal' },
        { name: 'Supplier Marketing', path: '/api/v1/openapi/supplier-marketing-messages', type: 'internal' },
      ],
    },
    {
      name: 'Stats',
      tests: [
        { name: 'Stats Summary', path: '/api/v1/stats', type: 'internal' },
        { name: 'Stats Today', path: '/api/v1/stats/today', type: 'internal' },
        { name: 'Hourly Sales', path: '/api/v1/stats/hourly-sales?startDate=2026-01-19&endDate=2026-01-20', type: 'internal' },
        { name: 'Daily Sales', path: '/api/v1/stats/daily-sales?startDate=2026-01-13&endDate=2026-01-20', type: 'internal' },
        { name: 'Top Products', path: '/api/v1/stats/top-products?startDate=2026-01-19&endDate=2026-01-20', type: 'internal' },
        { name: 'Store Performance', path: '/api/v1/stats/store-performance?startDate=2026-01-19&endDate=2026-01-20', type: 'internal' },
        { name: 'Today Payment', path: '/api/v1/stats/today-payment', type: 'internal' },
        { name: 'Teller Performance', path: '/api/v1/stats/teller-performance?startDate=2026-01-19&endDate=2026-01-20', type: 'internal' },
      ],
    },
    {
      name: 'Sales',
      tests: [
        { name: 'Sales List (v1)', path: '/api/v1/sales?limit=10', type: 'internal' },
        { name: 'Sales Recent', path: '/api/v1/sales/recent', type: 'internal' },
        { name: 'Sales Stats', path: '/api/v1/sales/stats', type: 'internal' },
        { name: 'Sales Totals', path: '/api/v1/sales/totals', type: 'internal' },
        { name: 'Sales List (legacy)', path: '/api/v1/sales/list', type: 'internal' },
        { name: 'Sales Search', path: '/api/v1/sales/search', type: 'internal' },
        { name: 'Sales Picking', path: '/api/v1/sales/picking', type: 'internal' },
        { name: 'Invoices', path: '/api/v1/invoices', type: 'internal' },
      ],
    },
    {
      name: 'Reports',
      tests: [
        { name: 'Sales Totals', path: '/api/v1/reports/sales-totals', type: 'internal' },
        { name: 'Sales Detail', path: '/api/v1/reports/sales-detail', type: 'internal' },
        { name: 'Sales Cube', path: '/api/v1/reports/sales-cube', type: 'internal' },
        { name: 'Sales Grouped', path: '/api/v1/reports/sales-grouped', type: 'internal' },
        { name: 'Trading Summary', path: '/api/v1/reports/trading-summary', type: 'internal' },
        { name: 'Product Performance', path: '/api/v1/reports/product-performance', type: 'internal' },
        { name: 'Duplicate Descriptions', path: '/api/v1/reports/advisor/duplicate-descriptions', type: 'internal' },
      ],
    },
    {
      name: 'Analytics',
      tests: [
        { name: 'Pareto', path: '/api/v1/analytics/pareto', type: 'internal' },
        { name: 'Product Performance', path: '/api/v1/analytics/product-performance', type: 'internal' },
      ],
    },
    {
      name: 'Accounts',
      tests: [
        { name: 'Accounts', path: '/api/v1/accounts', type: 'internal' },
        { name: 'Customer Accounts', path: '/api/v1/accounts/customers', type: 'internal' },
        { name: 'Financial Accounts', path: '/api/v1/accounts/financial', type: 'internal' },
        { name: 'Account Sales', path: '/api/v1/accounts/sales', type: 'internal' },
      ],
    },
    {
      name: 'Config & Settings',
      tests: [
        { name: 'Base Settings', path: '/api/v1/config/base-settings', type: 'internal' },
        { name: 'Departments', path: '/api/v1/departments', type: 'internal' },
        { name: 'Department Hierarchy', path: '/api/v1/departments/hierarchy', type: 'internal' },
        { name: 'Locations', path: '/api/v1/locations', type: 'internal' },
        { name: 'Staff', path: '/api/v1/staff', type: 'internal' },
        { name: 'Payment Types', path: '/api/v1/payment-types', type: 'internal' },
        { name: 'Discounts', path: '/api/v1/discounts', type: 'internal' },
        { name: 'Price Changes', path: '/api/v1/price-changes', type: 'internal' },
      ],
    },
    {
      name: 'BUCK',
      tests: [
        { name: 'Stocktakes', path: '/api/v1/buck/stocktakes', type: 'internal' },
        { name: 'Stocktake Status', path: '/api/v1/buck/stocktake/status', type: 'internal' },
        { name: 'Serial Items', path: '/api/v1/buck/serial-items', type: 'internal' },
        { name: 'Loyalty Campaigns', path: '/api/v1/buck/loyalty/campaigns', type: 'internal' },
      ],
    },
    {
      name: 'Messaging',
      tests: [
        { name: 'Config', path: '/api/v1/messaging/config', type: 'internal' },
        { name: 'SMS Send Log', path: '/api/v1/messaging/sms/sendlog', type: 'internal' },
        { name: 'Email Send Log', path: '/api/v1/messaging/email/sendlog', type: 'internal' },
      ],
    },
    {
      name: 'Other',
      tests: [
        { name: 'Stocktake', path: '/api/v1/stocktake', type: 'internal' },
        { name: 'Contact Logs', path: '/api/v1/contact-logs', type: 'internal' },
        { name: 'Loyalty Campaigns', path: '/api/v1/loyalty/campaigns', type: 'internal' },
        { name: 'Printing Pending', path: '/api/v1/printing/pending', type: 'internal' },
        { name: 'Dashboard', path: '/api/dashboard', type: 'internal' },
        { name: 'POS Config', path: '/api/pos/config', type: 'internal' },
        { name: 'CWA Status', path: '/api/cwa/status', type: 'internal' },
        { name: 'CWA Locations', path: '/api/cwa/locations', type: 'internal' },
        { name: 'CWA Stats Today', path: '/api/cwa/stats/today', type: 'internal' },
        { name: 'CWA Sales Totals', path: '/api/cwa/sales/totals', type: 'internal' },
      ],
    },
  ];
 
  const runTests = async () => {
    setTesting(true);
    setResults([]);
    const newResults: TestResult[] = [];
 
    for (const category of testCategories) {
      for (const test of category.tests) {
        setCurrentTest(`${category.name} - ${test.name}`);
        
        try {
          const startTime = Date.now();
          const response = await fetch(test.path);
          const duration = Date.now() - startTime;
          
          let responseData;
          let responseType = 'unknown';
          let recordCount;
          
          const contentType = response.headers.get('content-type');
          if (contentType?.includes('application/json')) {
            responseData = await response.json();
            responseType = 'json';
            
            // Try to detect record count
            if (responseData.data && Array.isArray(responseData.data)) {
              recordCount = responseData.data.length;
            } else if (responseData.DATS && Array.isArray(responseData.DATS)) {
              recordCount = responseData.DATS.length;
            } else if (Array.isArray(responseData)) {
              recordCount = responseData.length;
            }
          } else {
            responseData = await response.text();
            responseType = 'text';
          }
          
          const result: TestResult = {
            name: `${category.name} - ${test.name}`,
            url: test.path,
            status: response.status,
            success: response.status === 200,
            responseType,
            recordCount,
            duration,
          };
          
          if (!result.success) {
            result.error = typeof responseData === 'string' 
              ? responseData.substring(0, 200) 
              : JSON.stringify(responseData).substring(0, 200);
          }
          
          newResults.push(result);
        } catch (error) {
          newResults.push({
            name: `${category.name} - ${test.name}`,
            url: test.path,
            status: null,
            success: false,
            error: error instanceof Error ? error.message : 'Unknown error',
          });
        }
        
        setResults([...newResults]);
      }
    }
    
    setTesting(false);
    setCurrentTest('');
  };
 
  const successCount = results.filter(r => r.success).length;
  const failedCount = results.filter(r => !r.success).length;
  const totalTests = testCategories.reduce((acc, cat) => acc + cat.tests.length, 0);
 
  const filteredResults = results.filter(r => {
    if (filter === 'all') return true;
    if (filter === 'success') return r.success;
    if (filter === 'failed') return !r.success;
    return true;
  });
 
  const exportToCSV = () => {
    const headers = ['Test Name', 'Endpoint', 'Status', 'Success', 'Response Type', 'Record Count', 'Duration (ms)', 'Error'];
    const rows = results.map(r => [
      r.name,
      r.url,
      r.status || 'N/A',
      r.success ? 'Yes' : 'No',
      r.responseType || 'N/A',
      r.recordCount || 'N/A',
      r.duration || 'N/A',
      r.error || ''
    ]);
 
    const csvContent = [
      headers.join(','),
      ...rows.map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(','))
    ].join('\n');
 
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
    const storeName = session?.store?.id || 'unknown';
    
    link.setAttribute('href', url);
    link.setAttribute('download', `api-test-results-${storeName}-${timestamp}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
 
  const exportToJSON = () => {
    const exportData = {
      metadata: {
        exportDate: new Date().toISOString(),
        store: session?.store?.name || 'N/A',
        storeId: session?.store?.id || 'N/A',
        user: session?.user?.name || 'N/A',
        role: session?.user?.role || 'N/A',
        totalTests: results.length,
        successCount,
        failedCount
      },
      results: results
    };
 
    const jsonContent = JSON.stringify(exportData, null, 2);
    const blob = new Blob([jsonContent], { type: 'application/json;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
    const storeName = session?.store?.id || 'unknown';
    
    link.setAttribute('href', url);
    link.setAttribute('download', `api-test-results-${storeName}-${timestamp}.json`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
 
  return (
    <div className="max-w-7xl mx-auto p-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-text mb-2">API Endpoint Tester</h1>
        <p className="text-muted">
          Test all API endpoints with your current session ({session?.store?.id || 'Unknown'})
        </p>
      </div>
 
      {/* Session Info */}
      <div className="bg-surface rounded-lg border border-border p-4 mb-6">
        <h2 className="text-lg font-semibold text-text mb-3 flex items-center gap-2">
          <Icon name="account_circle" size={20} />
          Session Information
        </h2>
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <span className="text-muted">Store:</span>{' '}
            <span className="text-text font-medium">{session?.store?.name || 'N/A'}</span>
          </div>
          <div>
            <span className="text-muted">Store ID:</span>{' '}
            <span className="text-text font-medium">{session?.store?.id || 'N/A'}</span>
          </div>
          <div>
            <span className="text-muted">User:</span>{' '}
            <span className="text-text font-medium">{session?.user?.name || 'N/A'}</span>
          </div>
          <div>
            <span className="text-muted">Role:</span>{' '}
            <span className="text-text font-mono text-xs">
              {session?.user?.role || 'N/A'}
            </span>
          </div>
        </div>
      </div>
 
      {/* Test Controls */}
      <div className="bg-surface rounded-lg border border-border p-4 mb-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-text flex items-center gap-2">
            <Icon name="science" size={20} />
            Test Controls
          </h2>
          <button
            onClick={runTests}
            disabled={testing}
            className="px-4 py-2 bg-brand text-surface rounded hover:bg-brand/80 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
          >
            {testing ? (
              <>
                <Icon name="hourglass_empty" size={16} className="animate-spin" />
                Testing...
              </>
            ) : (
              <>
                <Icon name="play_arrow" size={16} />
                Run All Tests
              </>
            )}
          </button>
        </div>
        
        {currentTest && (
          <div className="text-sm text-muted flex items-center gap-2">
            <Icon name="hourglass_empty" size={14} className="animate-spin" />
            Currently testing: {currentTest}
          </div>
        )}
        
        {results.length > 0 && (
          <div className="mt-4 pt-4 border-t border-border">
            <div className="grid grid-cols-3 gap-4 text-sm mb-4">
              <div className="bg-success/10 rounded p-3 border border-success/20">
                <div className="text-success text-2xl font-bold">{successCount}</div>
                <div className="text-muted">Successful</div>
              </div>
              <div className="bg-danger/10 rounded p-3 border border-danger/20">
                <div className="text-danger text-2xl font-bold">{failedCount}</div>
                <div className="text-muted">Failed</div>
              </div>
              <div className="bg-info/10 rounded p-3 border border-info/20">
                <div className="text-info text-2xl font-bold">{totalTests}</div>
                <div className="text-muted">Total Tests</div>
              </div>
            </div>
            
            <div className="flex items-center justify-between gap-2">
              <div className="flex gap-2">
                <button
                  onClick={() => setFilter('all')}
                  className={`px-3 py-1 rounded text-sm ${
                    filter === 'all' 
                      ? 'bg-brand text-surface' 
                      : 'bg-surface-2 text-muted hover:bg-surface-3'
                  }`}
                >
                  All ({results.length})
                </button>
                <button
                  onClick={() => setFilter('success')}
                  className={`px-3 py-1 rounded text-sm ${
                    filter === 'success' 
                      ? 'bg-success text-surface' 
                      : 'bg-surface-2 text-muted hover:bg-surface-3'
                  }`}
                >
                  Success ({successCount})
                </button>
                <button
                  onClick={() => setFilter('failed')}
                  className={`px-3 py-1 rounded text-sm ${
                    filter === 'failed' 
                      ? 'bg-danger text-surface' 
                      : 'bg-surface-2 text-muted hover:bg-surface-3'
                  }`}
                >
                  Failed ({failedCount})
                </button>
              </div>
              
              <div className="flex gap-2">
                <button
                  onClick={exportToCSV}
                  className="px-3 py-1 rounded text-sm bg-surface-2 text-text hover:bg-surface-3 flex items-center gap-1"
                  title="Export as CSV"
                >
                  <Icon name="download" size={14} />
                  CSV
                </button>
                <button
                  onClick={exportToJSON}
                  className="px-3 py-1 rounded text-sm bg-surface-2 text-text hover:bg-surface-3 flex items-center gap-1"
                  title="Export as JSON"
                >
                  <Icon name="download" size={14} />
                  JSON
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
 
      {/* Results */}
      {filteredResults.length > 0 && (
        <div className="bg-surface rounded-lg border border-border overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-surface-2 border-b border-border">
                <tr>
                  <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase">Status</th>
                  <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase">Test Name</th>
                  <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase">Endpoint</th>
                  <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase">Response</th>
                  <th className="px-4 py-3 text-left text-xs font-semibold text-muted uppercase">Duration</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {filteredResults.map((result, index) => (
                  <tr key={index} className="hover:bg-surface-2/50">
                    <td className="px-4 py-3 whitespace-nowrap">
                      {result.success ? (
                        <span className="inline-flex items-center gap-1 px-2 py-1 bg-success/20 text-success rounded text-xs font-semibold">
                          <Icon name="check_circle" size={14} />
                          {result.status}
                        </span>
                      ) : (
                        <span className="inline-flex items-center gap-1 px-2 py-1 bg-danger/20 text-danger rounded text-xs font-semibold">
                          <Icon name="error" size={14} />
                          {result.status || 'ERR'}
                        </span>
                      )}
                    </td>
                    <td className="px-4 py-3 text-sm text-text">{result.name}</td>
                    <td className="px-4 py-3 text-xs font-mono text-muted">{result.url}</td>
                    <td className="px-4 py-3 text-sm">
                      {result.success ? (
                        <div className="text-success">
                          {result.responseType === 'json' && result.recordCount !== undefined && (
                            <span>{result.recordCount} records</span>
                          )}
                          {result.responseType === 'json' && result.recordCount === undefined && (
                            <span>JSON response</span>
                          )}
                          {result.responseType === 'text' && <span>Text response</span>}
                        </div>
                      ) : (
                        <div className="text-danger text-xs max-w-xs truncate" title={result.error}>
                          {result.error}
                        </div>
                      )}
                    </td>
                    <td className="px-4 py-3 text-sm text-muted">
                      {result.duration ? `${result.duration}ms` : '-'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}