cwa-dual-test.tsx

Go to the documentation of this file.

'use client';
 
import { useState } from 'react';
import { cwaApi } from '@/lib/cwa-gnap-api';
import { cwaPosApi, setCWAPosApiKey } from '@/lib/cwa-pos-api';
 
export default function CWADualTestPage() {
  const [apiKey, setApiKey] = useState('');
  const [results, setResults] = useState<Record<string, any>>({});
  const [loading, setLoading] = useState<Record<string, boolean>>({});
  const [searchTerm, setSearchTerm] = useState('test');
 
  const handleSetApiKey = () => {
    // Set API key for both systems
    cwaApi.setApiKey(apiKey);
    setCWAPosApiKey(apiKey);
    alert('API Key set for both Management and POS APIs');
  };
 
  const testEndpoint = async (name: string, apiCall: () => Promise<any>) => {
    setLoading(prev => ({ ...prev, [name]: true }));
    try {
      const result = await apiCall();
      setResults(prev => ({ ...prev, [name]: result }));
    } catch (error) {
      setResults(prev => ({ 
        ...prev, 
        [name]: { error: error instanceof Error ? error.message : 'Unknown error' }
      }));
    }
    setLoading(prev => ({ ...prev, [name]: false }));
  };
 
  return (
    <div className="min-h-screen bg-bg p-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-4xl font-bold text-text mb-8">
          CWA Dual API Test Dashboard
        </h1>
 
        {/* API Key Section */}
        <div className="bg-surface p-6 rounded-lg shadow-md mb-8">
          <h2 className="text-xl font-semibold mb-4">Authentication</h2>
          <div className="flex gap-4">
            <input
              type="text"
              value={apiKey}
              onChange={(e) => setApiKey(e.target.value)}
              placeholder="Enter FieldpineApiKey (e.g., BjjKmbw23IskPjxVGVMiqRhMcJBqtLYQRVHhYfnvMNp3IK)"
              className="flex-1 p-2 border border-border rounded"
            />
            <button
              onClick={handleSetApiKey}
              className="px-4 py-2 bg-brand text-white rounded hover:bg-brand"
            >
              Set API Key
            </button>
          </div>
          <p className="text-sm text-muted mt-2">
            Use the FieldpineApiKey cookie value from your browser when authenticated to CWA
          </p>
        </div>
 
        {/* API Systems Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          
          {/* Management API Section */}
          <div className="bg-surface p-6 rounded-lg shadow-lg">
            <h2 className="text-2xl font-semibold mb-6 text-brand">
              Management API (GNAP)
            </h2>
            <p className="text-sm text-muted mb-4">
              Base: https://iig.cwanz.online/GNAP/j/BUCK?3=retailmax.elink.*
            </p>
            
            <div className="grid grid-cols-1 gap-4">
              {/* Management API Endpoints */}
              <button
                onClick={() => testEndpoint('mgmt-locations', () => cwaApi.getLocations())}
                disabled={loading['mgmt-locations']}
                className="w-full p-3 bg-brand text-white rounded hover:bg-brand disabled:opacity-50"
              >
                {loading['mgmt-locations'] ? 'Loading...' : 'Get Locations'}
              </button>
 
              <button
                onClick={() => testEndpoint('mgmt-stats', () => cwaApi.getStatsToday())}
                disabled={loading['mgmt-stats']}
                className="w-full p-3 bg-brand text-white rounded hover:bg-brand disabled:opacity-50"
              >
                {loading['mgmt-stats'] ? 'Loading...' : 'Get Stats Today'}
              </button>
 
              <button
                onClick={() => testEndpoint('mgmt-server-status', () => cwaApi.getServerStatus())}
                disabled={loading['mgmt-server-status']}
                className="w-full p-3 bg-brand text-white rounded hover:bg-brand disabled:opacity-50"
              >
                {loading['mgmt-server-status'] ? 'Loading...' : 'Get Server Status'}
              </button>
 
              <button
                onClick={() => testEndpoint('mgmt-config', () => cwaApi.getRetailConfig())}
                disabled={loading['mgmt-config']}
                className="w-full p-3 bg-brand text-white rounded hover:bg-brand disabled:opacity-50"
              >
                {loading['mgmt-config'] ? 'Loading...' : 'Get Retail Config'}
              </button>
            </div>
          </div>
 
          {/* POS API Section */}
          <div className="bg-surface p-6 rounded-lg shadow-lg">
            <h2 className="text-2xl font-semibold mb-6 text-green-600">
              POS API (OpenAPI)
            </h2>
            <p className="text-sm text-muted mb-4">
              Base: https://murwillumbah.cwanz.online/openapi/*
            </p>
            
            <div className="grid grid-cols-1 gap-4">
              {/* Product Search Input */}
              <div className="mb-4">
                <label className="block text-sm font-medium mb-2">Product Search:</label>
                <input
                  type="text"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  placeholder="Enter search term..."
                  className="w-full p-2 border border-border rounded"
                />
              </div>
 
              {/* POS API Endpoints */}
              <button
                onClick={() => testEndpoint('pos-config', () => cwaPosApi.getRetailConfig())}
                disabled={loading['pos-config']}
                className="w-full p-3 bg-success text-white rounded hover:bg-green-600 disabled:opacity-50"
              >
                {loading['pos-config'] ? 'Loading...' : 'Get POS Config'}
              </button>
 
              <button
                onClick={() => testEndpoint('pos-products', () => cwaPosApi.searchProducts(searchTerm))}
                disabled={loading['pos-products']}
                className="w-full p-3 bg-success text-white rounded hover:bg-green-600 disabled:opacity-50"
              >
                {loading['pos-products'] ? 'Loading...' : `Search Products: "${searchTerm}"`}
              </button>
 
              <button
                onClick={() => testEndpoint('pos-payments', () => cwaPosApi.getPaymentTypes())}
                disabled={loading['pos-payments']}
                className="w-full p-3 bg-success text-white rounded hover:bg-green-600 disabled:opacity-50"
              >
                {loading['pos-payments'] ? 'Loading...' : 'Get Payment Types'}
              </button>
 
              <button
                onClick={() => testEndpoint('pos-sale-template', () => cwaPosApi.getSaleListTemplate())}
                disabled={loading['pos-sale-template']}
                className="w-full p-3 bg-success text-white rounded hover:bg-green-600 disabled:opacity-50"
              >
                {loading['pos-sale-template'] ? 'Loading...' : 'Get Sale Template'}
              </button>
            </div>
          </div>
        </div>
 
        {/* Results Section */}
        <div className="bg-surface p-6 rounded-lg shadow-lg">
          <h2 className="text-xl font-semibold mb-4">API Responses</h2>
          
          {Object.keys(results).length === 0 ? (
            <p className="text-muted">No API calls made yet. Click a button above to test an endpoint.</p>
          ) : (
            <div className="space-y-6">
              {Object.entries(results).map(([name, result]) => (
                <div key={name} className="border border-border rounded p-4">
                  <h3 className="font-semibold text-lg mb-2 capitalize flex items-center gap-2">
                    {name.startsWith('mgmt-') && <span className="text-brand">📊</span>}
                    {name.startsWith('pos-') && <span className="text-green-500">🛒</span>}
                    {name.replace(/^(mgmt|pos)-/, '').replace(/-/g, ' ')}
                  </h3>
                  <pre className="bg-surface-2 p-3 rounded text-sm overflow-x-auto max-h-64 overflow-y-auto">
                    {JSON.stringify(result, null, 2)}
                  </pre>
                </div>
              ))}
            </div>
          )}
        </div>
 
        {/* Information Section */}
        <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
          
          {/* Management API Info */}
          <div className="bg-info/10 p-6 rounded-lg">
            <h3 className="text-xl font-semibold mb-4 text-info">Management API</h3>
            <div className="space-y-2 text-sm">
              <p><strong>Purpose:</strong> Store management, reporting, admin functions</p>
              <p><strong>Base URL:</strong> https://iig.cwanz.online/GNAP/j</p>
              <p><strong>Pattern:</strong> /BUCK?3=retailmax.elink.*</p>
              <p><strong>Auth:</strong> FieldpineApiKey cookie</p>
            </div>
            
            <div className="mt-4">
              <h4 className="font-semibold mb-2">Available Endpoints:</h4>
              <ul className="text-sm text-text space-y-1">
                <li>• retailmax.elink.locations</li>
                <li>• retailmax.elink.stats.today</li>
                <li>• retailmax.elink.sale.totals</li>
                <li>• retailmax.elink.userinterface</li>
                <li>• gds.server.status</li>
                <li>• retailmax.elink.config.setting</li>
              </ul>
            </div>
          </div>
 
          {/* POS API Info */}
          <div className="bg-green-50 p-6 rounded-lg">
            <h3 className="text-xl font-semibold mb-4 text-green-700">POS API</h3>
            <div className="space-y-2 text-sm">
              <p><strong>Purpose:</strong> Point of sale operations, product search, transactions</p>
              <p><strong>Base URL:</strong> https://murwillumbah.cwanz.online/openapi</p>
              <p><strong>Pattern:</strong> Direct endpoints + BUCK for products</p>
              <p><strong>Auth:</strong> FieldpineApiKey cookie</p>
            </div>
            
            <div className="mt-4">
              <h4 className="font-semibold mb-2">Available Endpoints:</h4>
              <ul className="text-sm text-text space-y-1">
                <li>• /retailconfig</li>
                <li>• BUCK?3=retailmax.elink.products.list</li>
                <li>• /PaymentTypes</li>
                <li>• /salelist1.htm</li>
                <li>• /saleheader1.htm</li>
                <li>• /paymentsingle.htm</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}