page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect } from "react";
import { Icon } from '@/contexts/IconContext';
 
interface ApiRoute {
  path: string;
  methods: string[];
  description: string;
  category?: string;
  accessLevel?: "pos" | "merchant";
  testStatus?: "success" | "failed" | "untested";
  testUrl?: string;
}
 
interface TestResult {
  name: string;
  url: string;
  status: number;
  success: boolean;
}
 
export default function ApiDocumentationPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedType, setSelectedType] = useState<"all" | "elink" | "openapi" | "fd1">("all");
  const [selectedAccess, setSelectedAccess] = useState<"all" | "pos" | "merchant">("all");
  const [testResults, setTestResults] = useState<TestResult[]>([]);
  const [testDataLoaded, setTestDataLoaded] = useState(false);
 
  // Load test results from the JSON files
  useEffect(() => {
    const loadTestResults = async () => {
      try {
        const response = await fetch('/images/api-test-results-murwillumbah-2026-01-20T05-57-05.json');
        const data = await response.json();
        setTestResults(data.results || []);
        setTestDataLoaded(true);
      } catch (error) {
        console.error('Failed to load test results:', error);
        setTestDataLoaded(true);
      }
    };
    loadTestResults();
  }, []);
 
  // Helper function to get test status for a route
  const getTestStatus = (routePath: string): "success" | "failed" | "untested" => {
    if (!testDataLoaded) return "untested";
    
    // Normalize the route path for matching
    const normalizedPath = routePath.replace(/\[id\]/g, '1').replace(/\[.*?\]/g, '1');
    
    // Find matching test result
    const testResult = testResults.find(result => {
      const testPath = result.url.split('?')[0]; // Remove query params
      return testPath === normalizedPath || result.url === normalizedPath;
    });
    
    if (!testResult) return "untested";
    return testResult.success ? "success" : "failed";
  };
 
  // eLink/BUCK API Routes
  const elinkRoutes: ApiRoute[] = [
    // eLink Direct Routes - POS Accessible
    { path: "/api/v1/elink/products", methods: ["GET"], description: "Get products using eLink protocol (f-codes)", accessLevel: "pos" },
    { path: "/api/v1/elink/customers", methods: ["GET"], description: "Get customers using eLink protocol", accessLevel: "pos" },
    { path: "/api/v1/elink/customers/[id]", methods: ["GET", "PUT"], description: "Individual customer via eLink", accessLevel: "merchant" },
    { path: "/api/v1/elink/departments", methods: ["GET"], description: "Get departments using eLink protocol", accessLevel: "pos" },
    { path: "/api/v1/elink/suppliers", methods: ["GET"], description: "Get suppliers using eLink protocol", accessLevel: "pos" },
    
    // eLink Sales - Mixed Access
    { path: "/api/v1/elink/sales", methods: ["GET"], description: "List sales using ELINK protocol (retailmax.elink.sale.list)", accessLevel: "merchant" },
    { path: "/api/v1/elink/sales/[id]", methods: ["GET", "DELETE"], description: "Fetch sale details with line items or void sale", accessLevel: "merchant" },
    { path: "/api/v1/elink/sales/flat", methods: ["GET"], description: "Flattened sales list with embedded line items", accessLevel: "merchant" },
    { path: "/api/v1/elink/sales-report", methods: ["GET"], description: "Sales report data for POS (retailmax.elink.sale.totals)", accessLevel: "pos" },
    
    // eLink Staff & Organization - Merchant Only
    { path: "/api/v1/elink/locations", methods: ["GET"], description: "Get store locations using eLink", accessLevel: "merchant" },
    { path: "/api/v1/elink/staff", methods: ["GET"], description: "Staff list (retailmax.elink.staff.list)", accessLevel: "merchant" },
    { path: "/api/v1/elink/staff/used", methods: ["GET"], description: "Used staff IDs (retailmax.elink.staff.used.list)", accessLevel: "merchant" },
    { path: "/api/v1/elink/staff/rights", methods: ["GET"], description: "Staff access rights", accessLevel: "merchant" },
    { path: "/api/v1/elink/employees", methods: ["GET", "POST"], description: "Employees list/edit (retailmax.elink.employee.list)", accessLevel: "merchant" },
    { path: "/api/v1/elink/topology", methods: ["GET"], description: "System topology information", accessLevel: "merchant" },
    
    // BUCK Protocol Routes - Mixed Access
    { path: "/api/v1/buck/stocktakes", methods: ["GET"], description: "List stocktakes via BUCK (retailmax.elink.stocktake.list)", accessLevel: "pos" },
    { path: "/api/v1/buck/stocktake/status", methods: ["GET"], description: "Get stocktake status by ID (retailmax.elink.stocktake.status)", accessLevel: "merchant" },
    { path: "/api/v1/buck/loyalty/campaigns", methods: ["GET", "POST"], description: "List/create loyalty campaigns (retailmax.elink.loyalty.list/edit)", accessLevel: "pos" },
    { path: "/api/v1/buck/serial-items", methods: ["GET"], description: "List serial items (retailmax.elink.serialitem.list)", accessLevel: "pos" },
    { path: "/api/v1/buck/staff-usage", methods: ["GET"], description: "Staff login activity (retailmax.elink.staff.usage)", accessLevel: "merchant" },
    { path: "/api/v1/buck/staff-usage-detail", methods: ["GET"], description: "Detailed staff activity by ID", accessLevel: "merchant" },
    
    // Convenience/Legacy Routes - Mixed Access
    { path: "/api/v1/locations", methods: ["GET", "POST"], description: "Store locations with CRUD (retailmax.elink.locations + DATI)", accessLevel: "pos" },
    { path: "/api/v1/departments", methods: ["GET"], description: "Department list (retailmax.elink.departments)", accessLevel: "merchant" },
    { path: "/api/v1/departments/hierarchy", methods: ["GET"], description: "Department hierarchy structure", accessLevel: "pos" },
    { path: "/api/v1/staff", methods: ["GET"], description: "Staff list (retailmax.elink.staff)", accessLevel: "merchant" },
    { path: "/api/v1/payment-types", methods: ["GET"], description: "Payment methods (retailmax.elink.paymenttypes)", accessLevel: "merchant" },
    { path: "/api/v1/discounts", methods: ["GET"], description: "Discounts list (retailmax.elink.discounts)", accessLevel: "merchant" },
    { path: "/api/v1/stocktake", methods: ["GET"], description: "Stocktakes (retailmax.elink.stocktake.list)", accessLevel: "merchant" },
    { path: "/api/v1/stats", methods: ["GET"], description: "General statistics endpoint", accessLevel: "merchant" },
    { path: "/api/v1/stats/today", methods: ["GET"], description: "Today's stats snapshot", accessLevel: "merchant" },
    { path: "/api/v1/stats/hourly-sales", methods: ["GET"], description: "⚠️ 404 NOT FOUND - Hourly sales breakdown (not implemented)", accessLevel: "merchant" },
    { path: "/api/v1/stats/daily-sales", methods: ["GET"], description: "⚠️ 404 NOT FOUND - Daily sales trends (not implemented)", accessLevel: "merchant" },
    { path: "/api/v1/stats/top-products", methods: ["GET"], description: "⚠️ 404 NOT FOUND - Top selling products (not implemented)", accessLevel: "merchant" },
    { path: "/api/v1/stats/store-performance", methods: ["GET"], description: "⚠️ 404 NOT FOUND - Store performance metrics (not implemented)", accessLevel: "merchant" },
    { path: "/api/v1/stats/today-payment", methods: ["GET"], description: "Today's payment breakdown", accessLevel: "merchant" },
    { path: "/api/v1/stats/teller-performance", methods: ["GET"], description: "Teller performance metrics", accessLevel: "merchant" },
    
    // Sales Routes - Merchant Only
    { path: "/api/v1/sales", methods: ["GET"], description: "General sales endpoint", accessLevel: "merchant" },
    { path: "/api/v1/sales/stats", methods: ["GET"], description: "Sales statistics by type (retailmax.elink.stats.*)", accessLevel: "merchant" },
    { path: "/api/v1/sales/totals", methods: ["GET"], description: "Today's sales totals (retailmax.elink.stats.today)", accessLevel: "merchant" },
    { path: "/api/v1/sales/list", methods: ["GET"], description: "Sales transactions list (retailmax.elink.salelist)", accessLevel: "merchant" },
    { path: "/api/v1/sales/search", methods: ["GET"], description: "Search sales (retailmax.elink.salesearch)", accessLevel: "merchant" },
    { path: "/api/v1/sales/recent", methods: ["GET"], description: "Recent sales transactions", accessLevel: "merchant" },
    { path: "/api/v1/sales/picking", methods: ["GET"], description: "Sales picking list", accessLevel: "merchant" },
    { path: "/api/v1/invoices", methods: ["GET"], description: "Invoice list", accessLevel: "merchant" },
    
    // Reports Routes - Mixed Access
    { path: "/api/v1/reports/sales-totals", methods: ["GET"], description: "Sales totals report", accessLevel: "pos" },
    { path: "/api/v1/reports/sales-detail", methods: ["GET"], description: "Detailed sales breakdown", accessLevel: "pos" },
    { path: "/api/v1/reports/sales-cube", methods: ["GET"], description: "Sales cube analysis (retailmax.elink.report.salescube)", accessLevel: "pos" },
    { path: "/api/v1/reports/trading-summary", methods: ["GET"], description: "Trading summary by date/location (retailmax.elink.summary.trading)", accessLevel: "merchant" },
    { path: "/api/v1/reports/product-performance", methods: ["GET"], description: "Product performance metrics", accessLevel: "merchant" },
    { path: "/api/v1/reports/sales-grouped", methods: ["GET"], description: "Grouped sales analytics", accessLevel: "merchant" },
    { path: "/api/v1/reports/purchase-orders", methods: ["GET"], description: "Purchase order reports", accessLevel: "merchant" },
    { path: "/api/v1/reports/advisor/duplicate-descriptions", methods: ["GET"], description: "Duplicate product descriptions", accessLevel: "merchant" },
    
    // Accounts Routes - Merchant Only
    { path: "/api/v1/accounts", methods: ["GET"], description: "Customer accounts (retailmax.elink.accounts)", accessLevel: "merchant" },
    { path: "/api/v1/accounts/customers", methods: ["GET"], description: "Customer accounts list", accessLevel: "merchant" },
    { path: "/api/v1/accounts/sales", methods: ["GET"], description: "Account sales history", accessLevel: "merchant" },
    { path: "/api/v1/accounts/financial", methods: ["GET"], description: "Account financial transactions", accessLevel: "merchant" },
    
    // Products & Inventory Routes - Mixed Access
    { path: "/api/v1/products/stock-alerts", methods: ["GET"], description: "Low stock alerts", accessLevel: "pos" },
    { path: "/api/v1/products/stock-adjustment", methods: ["POST"], description: "Adjust product stock levels (DATI goodsin.edit)", accessLevel: "merchant" },
    { path: "/api/v1/inventory/movements", methods: ["GET"], description: "Stock movement history", accessLevel: "pos" },
    { path: "/api/v1/inventory/stock-levels", methods: ["GET"], description: "Current stock levels", accessLevel: "pos" },
    
    // Analytics Routes - Merchant Only
    { path: "/api/v1/analytics/pareto", methods: ["GET"], description: "Pareto analysis (80/20 rule)", accessLevel: "merchant" },
    { path: "/api/v1/analytics/product-performance", methods: ["GET"], description: "Product performance analytics", accessLevel: "merchant" },
    
    // Other Routes - Merchant Only
    { path: "/api/v1/price-changes", methods: ["GET", "POST"], description: "Price change overlays (retailmax.elink.pricechange.list)", accessLevel: "merchant" },
    { path: "/api/v1/printing/pending", methods: ["GET"], description: "Pending print jobs", accessLevel: "merchant" },
    { path: "/api/v1/loyalty/campaigns", methods: ["GET"], description: "Legacy loyalty campaigns endpoint", accessLevel: "merchant" },
    { path: "/api/v1/contact-logs", methods: ["GET", "POST"], description: "Customer contact logs", accessLevel: "merchant" },
    { path: "/api/v1/config/base-settings", methods: ["GET"], description: "System base configuration settings", accessLevel: "merchant" },
    { path: "/api/v1/messaging/config", methods: ["GET"], description: "Messaging configuration", accessLevel: "merchant" },
    { path: "/api/v1/messaging/sms/sendlog", methods: ["GET"], description: "SMS send log", accessLevel: "merchant" },
    { path: "/api/v1/messaging/email/sendlog", methods: ["GET"], description: "Email send log", accessLevel: "merchant" },
    
    // Dashboard & CWA - Mixed Access
    { path: "/api/dashboard", methods: ["GET"], description: "Dashboard summary data", accessLevel: "pos" },
    { path: "/api/pos/config", methods: ["GET"], description: "POS configuration", accessLevel: "merchant" },
    { path: "/api/cwa/status", methods: ["GET"], description: "CWA status", accessLevel: "merchant" },
    { path: "/api/cwa/locations", methods: ["GET"], description: "CWA locations", accessLevel: "merchant" },
    { path: "/api/cwa/stats/today", methods: ["GET"], description: "CWA today's stats", accessLevel: "merchant" },
    { path: "/api/cwa/sales/totals", methods: ["GET"], description: "CWA sales totals", accessLevel: "pos" },
    { path: "/api/printers-cartridges", methods: ["GET"], description: "Printer cartridge compatibility", accessLevel: "pos" },
  ];
 
  // FD1/FD3 Protocol Routes (Modern) - UNAVAILABLE (403 for both POS and Merchant)
  const fd1Routes: ApiRoute[] = [
    // Products
    { path: "/api/v1/fd1/products", methods: ["GET"], description: "⚫ NOT AVAILABLE - List/search products using FD1 protocol with named fields", accessLevel: "merchant" },
    { path: "/api/v1/fd1/products/[id]", methods: ["GET"], description: "⚫ NOT AVAILABLE - Get single product by ID with FD1 (named fields, no f-codes)", accessLevel: "merchant" },
    
    // Sales
    { path: "/api/v1/fd1/sales", methods: ["GET", "POST"], description: "⚫ NOT AVAILABLE - List sales or create new sale using FD1 protocol", accessLevel: "merchant" },
    { path: "/api/v1/fd1/sales/[id]", methods: ["GET"], description: "⚫ NOT AVAILABLE - Get sale details with line items using FD1", accessLevel: "merchant" },
    
    // Customers
    { path: "/api/v1/fd1/customers", methods: ["GET"], description: "⚫ NOT AVAILABLE - List/search customers using FD1 protocol", accessLevel: "merchant" },
    { path: "/api/v1/fd1/customers/[id]", methods: ["GET"], description: "⚫ NOT AVAILABLE - Get single customer by ID with FD1", accessLevel: "merchant" },
  ];
 
  // OpenAPI2 Routes - Mixed Access
  const openapiRoutes: ApiRoute[] = [
    // Products - POS Accessible
    { path: "/api/v1/openapi/products", methods: ["GET", "POST"], description: "Products catalog (OpenAPI /Products)", accessLevel: "pos" },
    { path: "/api/v1/openapi/products/[id]", methods: ["GET", "PUT", "PATCH", "DELETE"], description: "Individual product operations", accessLevel: "pos" },
    { path: "/api/v1/openapi/products/[id]/writeoff", methods: ["POST"], description: "Write off product stock", accessLevel: "merchant" },
    { path: "/api/v1/openapi/products-search", methods: ["GET"], description: "Search products (OpenAPI /Products with filters)", accessLevel: "merchant" },
    { path: "/api/v1/openapi/barcodes", methods: ["GET"], description: "Barcode lookups (OpenAPI /Barcodes)", accessLevel: "merchant" },
    
    // Customers & Sales - POS Accessible
    { path: "/api/v1/openapi/customers", methods: ["GET", "POST"], description: "Customers (OpenAPI /Customers)", accessLevel: "pos" },
    { path: "/api/v1/openapi/sales", methods: ["GET"], description: "Sales transactions (OpenAPI /Sales)", accessLevel: "pos" },
    
    // Suppliers - Merchant Only
    { path: "/api/v1/openapi/suppliers", methods: ["GET", "POST"], description: "Suppliers (OpenAPI /Suppliers)", accessLevel: "merchant" },
    { path: "/api/v1/openapi/suppliers/[id]", methods: ["GET", "PUT", "DELETE"], description: "Individual supplier operations", accessLevel: "merchant" },
    { path: "/api/v1/openapi/supplier-part-codes", methods: ["GET"], description: "Supplier part code mappings", accessLevel: "merchant" },
    { path: "/api/v1/openapi/supplier-marketing-messages", methods: ["GET"], description: "Supplier marketing content", accessLevel: "merchant" },
    
    // Organization - Merchant Only
    { path: "/api/v1/openapi/locations", methods: ["GET"], description: "Store locations (OpenAPI /Location)", accessLevel: "merchant" },
    { path: "/api/v1/openapi/departments", methods: ["GET", "POST"], description: "Departments (OpenAPI /Departments)", accessLevel: "merchant" },
    { path: "/api/v1/openapi/departments/[id]", methods: ["GET", "PUT", "DELETE"], description: "Individual department operations", accessLevel: "merchant" },
    { path: "/api/v1/openapi/webgroups", methods: ["GET"], description: "Web category groups", accessLevel: "merchant" },
    { path: "/api/v1/openapi/pricebook-specials", methods: ["GET"], description: "Special pricing and promotions", accessLevel: "merchant" },
    { path: "/api/v1/openapi/shelf-visits", methods: ["GET"], description: "Shelf visit tracking (OpenAPI /ShelfVisits)", accessLevel: "merchant" },
    
    // Inventory - Mostly Merchant Only
    { path: "/api/v1/openapi/stocktakes", methods: ["GET", "POST"], description: "Stocktakes (OpenAPI /Stocktakes)", accessLevel: "merchant" },
    { path: "/api/v1/openapi/stock2/primitive", methods: ["GET"], description: "Stock primitive data", accessLevel: "merchant" },
    { path: "/api/v1/openapi/stock2/count", methods: ["GET", "POST"], description: "Stock count operations", accessLevel: "merchant" },
    { path: "/api/v1/openapi/stock2/count/[key]", methods: ["GET", "PUT"], description: "Individual stock count", accessLevel: "merchant" },
    { path: "/api/v1/openapi/stock2/count/control/[action]", methods: ["POST"], description: "Stock count control actions", accessLevel: "merchant" },
    { path: "/api/v1/openapi/stock2/count-summary", methods: ["GET"], description: "Stock count summaries", accessLevel: "merchant" },
    { path: "/api/v1/openapi/stock2/movements", methods: ["GET", "POST"], description: "Stock movement tracking", accessLevel: "merchant" },
    { path: "/api/v1/openapi/stock-transfers/[id]", methods: ["GET", "PUT"], description: "Stock transfer operations", accessLevel: "merchant" },
    { path: "/api/v1/openapi/stock-transfers/[id]/receive", methods: ["POST"], description: "Receive stock transfer", accessLevel: "merchant" },
    { path: "/api/v1/openapi/reorder-levels", methods: ["GET", "POST"], description: "Product reorder levels", accessLevel: "merchant" },
    { path: "/api/v1/openapi/reorder-levels/[locid]/[pid]", methods: ["GET", "PUT"], description: "Specific reorder level", accessLevel: "merchant" },
    
    // Purchase Orders - Merchant Only
    { path: "/api/v1/openapi/purchase-orders", methods: ["GET", "POST"], description: "Purchase orders (OpenAPI /PurchaseOrders)", accessLevel: "merchant" },
    { path: "/api/v1/openapi/purchase-order/parse", methods: ["POST"], description: "Parse purchase order documents", accessLevel: "merchant" },
  ];
 
  const allRoutes = [
    ...elinkRoutes.map(r => ({ ...r, type: "elink" as const })),
    ...fd1Routes.map(r => ({ ...r, type: "fd1" as const })),
    ...openapiRoutes.map(r => ({ ...r, type: "openapi" as const }))
  ];
 
  const filteredRoutes = allRoutes.filter(route => {
    const matchesSearch = !searchTerm || 
      route.path.toLowerCase().includes(searchTerm.toLowerCase()) ||
      route.description.toLowerCase().includes(searchTerm.toLowerCase());
    
    const matchesType = selectedType === "all" || route.type === selectedType;
    const matchesAccess = selectedAccess === "all" || route.accessLevel === selectedAccess;
    
    return matchesSearch && matchesType && matchesAccess;
  });
 
  const posCount = allRoutes.filter(r => r.accessLevel === "pos").length;
  const merchantCount = allRoutes.filter(r => r.accessLevel === "merchant").length;
  const workingCount = allRoutes.filter(r => getTestStatus(r.path) === "success").length;
 
  return (
    <div className="min-h-screen bg-bg print:bg-white">
      {/* Header - Hidden in print */}
      <div className="bg-gradient-to-r from-brand to-brand2 text-white py-12 px-6 print:hidden">
        <div className="max-w-7xl mx-auto">
          <h1 className="text-4xl font-bold mb-3 flex items-center gap-3">
            <Icon name="api" size={40} />
            API Documentation
          </h1>
          <p className="text-xl text-white/90">Complete reference for all Everyday POS API routes with access level classifications</p>
          <div className="mt-4 flex gap-4 text-sm flex-wrap items-center">
            <div className="bg-white/20 px-4 py-2 rounded-lg">
              <span className="font-semibold">{allRoutes.length}</span> Total Routes
            </div>
            <div className="bg-green-500/30 px-4 py-2 rounded-lg border border-green-400/30">
              <span className="font-semibold">{posCount}</span> POS Accessible
            </div>
            <div className="bg-red-500/30 px-4 py-2 rounded-lg border border-red-400/30">
              <span className="font-semibold">{merchantCount}</span> Merchant Only
            </div>
            <div className="bg-white/20 px-4 py-2 rounded-lg">
              <span className="font-semibold">{elinkRoutes.length}</span> eLink/BUCK
            </div>
            <div className="bg-white/20 px-4 py-2 rounded-lg">
              <span className="font-semibold">{fd1Routes.length}</span> FD1/FD3
            </div>
            <div className="bg-white/20 px-4 py-2 rounded-lg">
              <span className="font-semibold">{openapiRoutes.length}</span> OpenAPI
            </div>
            <button
              onClick={() => window.print()}
              className="ml-auto bg-white text-brand px-6 py-2 rounded-lg font-semibold hover:bg-white/90 transition-colors flex items-center gap-2 shadow-lg"
            >
              <Icon name="print" size={20} />
              Print to PDF
            </button>
          </div>
        </div>
      </div>
 
      <div className="max-w-7xl mx-auto py-8 px-6 print:py-2 print:px-4">
        {/* Print-only title */}
        <div className="hidden print:block mb-6">
          <h1 className="text-3xl font-bold mb-2">Everyday POS API Documentation</h1>
          <p className="text-sm text-gray-700 mb-1">Complete reference for all API routes with access level classifications</p>
          <p className="text-xs text-gray-600">Total Routes: {allRoutes.length} | Working: {workingCount} | POS Access: {posCount} | Merchant Access: {merchantCount}</p>
          <hr className="my-4 border-black" />
        </div>
 
        {/* Info Boxes - Hidden in print */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8 print:hidden">
          <div className="bg-success/10 border-l-4 border-success p-6 rounded-lg">
            <h3 className="text-lg font-bold text-text mb-2 flex items-center gap-2">
              <Icon name="check_circle" size={24} className="text-success" />
              POS Store Access
            </h3>
            <p className="text-sm text-text mb-3">
              Available to all stores including agency/franchise stores. Basic operations for day-to-day POS use.
            </p>
            <ul className="text-xs text-muted space-y-1">
              <li>• {posCount} endpoints available</li>
              <li>• Product & customer lookups</li>
              <li>• Basic reporting</li>
              <li>• Stock level monitoring</li>
            </ul>
          </div>
 
          <div className="bg-info/10 border-l-4 border-info p-6 rounded-lg">
            <h3 className="text-lg font-bold text-text mb-2 flex items-center gap-2">
              <Icon name="admin_panel_settings" size={24} className="text-info" />
              Merchant Store Only
            </h3>
            <p className="text-sm text-text mb-3">
              Requires merchant/master store permissions. Administrative and advanced features restricted for security.
            </p>
            <ul className="text-xs text-muted space-y-1">
              <li>• {merchantCount} restricted endpoints</li>
              <li>• Detailed sales analytics</li>
              <li>• Staff management</li>
              <li>• Advanced inventory ops</li>
            </ul>
          </div>
 
          <div className="bg-info/10 border-l-4 border-info p-6 rounded-lg">
            <h3 className="text-lg font-bold text-text mb-2 flex items-center gap-2">
              <Icon name="storage" size={24} className="text-info" />
              eLink/BUCK API
            </h3>
            <p className="text-sm text-text mb-3">
              Legacy Fieldpine protocol using numbered parameters (3, 7, 8, 9) and f-code field names (f100, f101).
            </p>
            <ul className="text-xs text-muted space-y-1">
              <li>• Returns: JSON with DATS/APPD arrays</li>
              <li>• Fields: Numeric identifiers (f100 = ID)</li>
              <li>• Endpoint format: buck?3=retailmax.elink.*</li>
              <li>• Fast, optimized for POS operations</li>
            </ul>
          </div>
 
          <div className="bg-brand/10 border-l-4 border-brand p-6 rounded-lg">
            <h3 className="text-lg font-bold text-text mb-2 flex items-center gap-2">
              <Icon name="rocket_launch" size={24} className="text-brand" />
              FD1 & OpenAPI
            </h3>
            <p className="text-sm text-text mb-3">
              Modern protocols with named fields. FD1 is currently unavailable, OpenAPI has mixed access.
            </p>
            <ul className="text-xs text-muted space-y-1">
              <li>• <strong>FD1:</strong> ⚫ Disabled (403 for all stores)</li>
              <li>• <strong>OpenAPI:</strong> Mixed access levels</li>
              <li>• Named fields (no f-codes)</li>
              <li>• Standard REST methods</li>
            </ul>
          </div>
        </div>
 
        {/* Test Results Banner - Hidden in print */}
        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-8 print:hidden">
          <div className="flex items-start gap-3">
            <Icon name="info" size={24} className="text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
            <div>
              <h3 className="font-bold text-blue-900 dark:text-blue-100 mb-2">Access Levels Based on Actual Testing</h3>
              <p className="text-sm text-blue-800 dark:text-blue-200 mb-3">
                Classifications verified with real API tests on 2026-01-20 using both POS store (Murwillumbah) and merchant portal (IIG) credentials.
              </p>
              <div className="grid grid-cols-2 gap-4 text-xs">
                <div>
                  <div className="font-semibold text-blue-900 dark:text-blue-100 mb-1">POS Store (Murwillumbah)</div>
                  <ul className="text-blue-700 dark:text-blue-300 space-y-0.5">
                    <li>✅ 23/110 endpoints working (21%)</li>
                    <li>• Core products & locations</li>
                    <li>• Basic reporting</li>
                    <li>• Stock monitoring</li>
                  </ul>
                </div>
                <div>
                  <div className="font-semibold text-blue-900 dark:text-blue-100 mb-1">Merchant Portal (IIG)</div>
                  <ul className="text-blue-700 dark:text-blue-300 space-y-0.5">
                    <li>✅ 76/110 endpoints working (69%)</li>
                    <li>• +53 additional endpoints</li>
                    <li>• Sales, staff, analytics</li>
                    <li>• Suppliers, departments, config</li>
                  </ul>
                </div>
              </div>
              <div className="mt-3 pt-3 border-t border-blue-200 dark:border-blue-800">
                <p className="text-xs text-blue-700 dark:text-blue-300">
                  <strong>Known Issues:</strong> FD1 protocol disabled (6 endpoints return 403 for all). Stats endpoints partially unavailable (4 return 404). 
                  See <a href="/docs/API_ACCESS_LEVELS.md" className="underline hover:text-blue-900 dark:hover:text-blue-100">API_ACCESS_LEVELS.md</a> for details.
                </p>
              </div>
            </div>
          </div>
          </div>
        </div>
 
        {/* Filters - Hidden in print */}
        <div className="bg-surface rounded-lg shadow-sm p-6 mb-6 print:hidden">
          <div className="flex flex-col gap-4">
            <div className="flex-1 w-full">
              <input
                type="text"
                placeholder="Search routes by path or description..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand bg-surface text-text"
              />
            </div>
            
            {/* Protocol Type Filter */}
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="flex-1">
                <label className="text-xs font-semibold text-muted uppercase tracking-wide mb-2 block">Protocol Type</label>
                <div className="flex gap-2 flex-wrap">
                  <button
                    onClick={() => setSelectedType("all")}
                    className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                      selectedType === "all"
                        ? "bg-brand text-white"
                        : "bg-surface-2 text-text hover:bg-surface-2/80"
                    }`}
                  >
                    All ({allRoutes.length})
                  </button>
                  <button
                    onClick={() => setSelectedType("elink")}
                    className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                      selectedType === "elink"
                        ? "bg-info text-white"
                        : "bg-surface-2 text-text hover:bg-surface-2/80"
                    }`}
                  >
                    eLink ({elinkRoutes.length})
                  </button>
                  <button
                    onClick={() => setSelectedType("fd1")}
                    className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                      selectedType === "fd1"
                        ? "bg-brand text-white"
                        : "bg-surface-2 text-text hover:bg-surface-2/80"
                    }`}
                  >
                    FD1 ({fd1Routes.length})
                  </button>
                  <button
                    onClick={() => setSelectedType("openapi")}
                    className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                      selectedType === "openapi"
                        ? "bg-success text-white"
                        : "bg-surface-2 text-text hover:bg-surface-2/80"
                    }`}
                  >
                    OpenAPI ({openapiRoutes.length})
                  </button>
                </div>
              </div>
 
              {/* Access Level Filter */}
              <div className="flex-1">
                <label className="text-xs font-semibold text-muted uppercase tracking-wide mb-2 block">Access Level</label>
                <div className="flex gap-2 flex-wrap">
                  <button
                    onClick={() => setSelectedAccess("all")}
                    className={`px-4 py-2 rounded-lg font-medium transition-colors ${
                      selectedAccess === "all"
                        ? "bg-brand text-white"
                        : "bg-surface-2 text-text hover:bg-surface-2/80"
                    }`}
                  >
                    All Levels
                  </button>
                  <button
                    onClick={() => setSelectedAccess("pos")}
                    className={`px-4 py-2 rounded-lg font-medium transition-colors border flex items-center gap-2 ${
                      selectedAccess === "pos"
                        ? "bg-success text-white border-success"
                        : "bg-surface-2 text-text hover:bg-surface-2/80 border-success/30"
                    }`}
                  >
                    <Icon name="check_circle" size={18} className={selectedAccess === "pos" ? "text-white" : "text-success"} />
                    POS ({posCount})
                  </button>
                  <button
                    onClick={() => setSelectedAccess("merchant")}
                    className={`px-4 py-2 rounded-lg font-medium transition-colors border flex items-center gap-2 ${
                      selectedAccess === "merchant"
                        ? "bg-info text-white border-info"
                        : "bg-surface-2 text-text hover:bg-surface-2/80 border-info/30"
                    }`}
                  >
                    <Icon name="admin_panel_settings" size={18} className={selectedAccess === "merchant" ? "text-white" : "text-info"} />
                    Merchant ({merchantCount})
                  </button>
                </div>
              </div>
            </div>
          </div>
 
          {searchTerm && (
            <div className="mt-3 text-sm text-muted">
              Found {filteredRoutes.length} route(s) matching "{searchTerm}"
            </div>
          )}
        </div>
 
        {/* Routes List */}
        <div className="space-y-6 print:space-y-4">
          {selectedType === "all" || selectedType === "elink" ? (
            <div className="bg-surface rounded-lg shadow-sm overflow-hidden print:shadow-none print:border print:border-black page-break-avoid">
              <div className="bg-info text-white px-6 py-4 print:bg-white print:text-black print:py-2 print:border-b-2 print:border-black">
                <h2 className="text-xl font-bold flex items-center gap-2 print:text-lg">
                  <Icon name="storage" size={24} className="print:hidden" />
                  eLink/BUCK API Routes ({elinkRoutes.length})
                </h2>
              </div>
              <div className="divide-y divide-border print:divide-black">
                {filteredRoutes
                  .filter(r => r.type === "elink")
                  .map((route, idx) => (
                    <div key={idx} className="p-5 hover:bg-surface-2 transition-colors page-break-avoid print:p-3 print:hover:bg-white">
                      <div className="flex items-start justify-between gap-4 mb-2 print:mb-1">
                        <div className="flex-1 flex items-center gap-2 flex-wrap print:gap-1">
                          <Icon name="route" size={16} className="text-info flex-shrink-0 print:hidden" />
                          <code className="text-sm font-mono bg-info/10 text-info px-3 py-1 rounded print:bg-white print:text-black print:px-1 print:py-0 print:text-xs">
                            {route.path}
                          </code>
                          {route.accessLevel === "pos" && (
                            <span className="px-2 py-1 text-xs font-semibold rounded bg-success/20 text-success border border-success/30 flex items-center gap-1 print:bg-white print:text-black print:border-black print:px-1 print:py-0">
                              <Icon name="check_circle" size={14} className="print:hidden" />
                              POS
                            </span>
                          )}
                          {route.accessLevel === "merchant" && (
                            <span className="px-2 py-1 text-xs font-semibold rounded bg-info/20 text-info border border-info/30 flex items-center gap-1 print:bg-white print:text-black print:border-black print:px-1 print:py-0">
                              <Icon name="admin_panel_settings" size={14} className="print:hidden" />
                              Merchant
                            </span>
                          )}
                          {(() => {
                            const status = getTestStatus(route.path);
                            if (status === "success") {
                              return (
                                <span className="px-2 py-1 text-xs font-semibold rounded bg-success/20 text-success border border-success/30 flex items-center gap-1 print:hidden">
                                  <Icon name="check_circle" size={14} />
                                  Tested ✓
                                </span>
                              );
                            } else if (status === "failed") {
                              return (
                                <span className="px-2 py-1 text-xs font-semibold rounded bg-danger/20 text-danger border border-danger/30 flex items-center gap-1 print:hidden">
                                  <Icon name="error" size={14} />
                                  Failed
                                </span>
                              );
                            }
                            return null;
                          })()}
                        </div>
                        <div className="flex gap-2 print:gap-1">
                          {route.methods.map(method => (
                            <span
                              key={method}
                              className={`px-2 py-1 text-xs font-semibold rounded print:px-1 print:py-0 print:text-black print:bg-white print:border print:border-black ${
                                method === "GET"
                                  ? "bg-success/20 text-success"
                                  : method === "POST"
                                  ? "bg-info/20 text-info"
                                  : method === "PUT" || method === "PATCH"
                                  ? "bg-warn/20 text-warn"
                                  : "bg-danger/20 text-danger"
                              }`}
                            >
                              {method}
                            </span>
                          ))}
                        </div>
                      </div>
                      <p className="text-sm text-muted ml-1 print:text-xs print:text-black print:ml-0">{route.description}</p>
                    </div>
                  ))}
                {filteredRoutes.filter(r => r.type === "elink").length === 0 && (
                  <div className="p-8 text-center text-muted print:hidden">
                    No eLink routes match your search
                  </div>
                )}
              </div>
            </div>
          ) : null}
 
          {selectedType === "all" || selectedType === "fd1" ? (
            <div className="bg-surface rounded-lg shadow-sm overflow-hidden border-2 border-gray-400 print:shadow-none print:border print:border-black page-break-avoid">
              <div className="bg-gray-700 text-white px-6 py-4 print:bg-white print:text-black print:py-2 print:border-b-2 print:border-black">
                <h2 className="text-xl font-bold flex items-center gap-2 print:text-lg">
                  <Icon name="block" size={24} className="print:hidden" />
                  FD1/FD3 Protocol Routes ({fd1Routes.length})
                </h2>
                <p className="text-sm text-white/90 mt-1 flex items-center gap-2 print:text-xs print:text-black print:mt-0">
                  <Icon name="block" size={16} className="print:hidden" />
                  <strong>NOT AVAILABLE:</strong> All FD1 endpoints return 403 Forbidden for both POS and merchant stores (protocol disabled)
                </p>
              </div>
              <div className="divide-y divide-border bg-gray-50 dark:bg-gray-900 print:bg-white print:divide-black">
                {filteredRoutes
                  .filter(r => r.type === "fd1")
                  .map((route, idx) => (
                    <div key={idx} className="p-5 hover:bg-surface-2 transition-colors opacity-60 page-break-avoid print:p-3 print:hover:bg-white print:opacity-100">
                      <div className="flex items-start justify-between gap-4 mb-2 print:mb-1">
                        <div className="flex-1 flex items-center gap-2 print:gap-1">
                          <Icon name="route" size={16} className="text-gray-500 flex-shrink-0 print:hidden" />
                          <code className="text-sm font-mono bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 px-3 py-1 rounded line-through print:bg-white print:text-black print:px-1 print:py-0 print:text-xs">
                            {route.path}
                          </code>
                          <span className="px-2 py-1 text-xs font-semibold rounded bg-gray-200 text-gray-600 border border-gray-400 flex items-center gap-1">
                            <Icon name="block" size={14} />
                            DISABLED
                          </span>
                        </div>
                        <div className="flex gap-2">
                          {route.methods.map(method => (
                            <span
                              key={method}
                              className={`px-2 py-1 text-xs font-semibold rounded ${
                                method === "GET"
                                  ? "bg-success/20 text-success"
                                  : method === "POST"
                                  ? "bg-info/20 text-info"
                                  : method === "PUT" || method === "PATCH"
                                  ? "bg-warn/20 text-warn"
                                  : "bg-danger/20 text-danger"
                              }`}
                            >
                              {method}
                            </span>
                          ))}
                        </div>
                      </div>
                      <p className="text-sm text-muted ml-1">{route.description}</p>
                    </div>
                  ))}
                {filteredRoutes.filter(r => r.type === "fd1").length === 0 && (
                  <div className="p-8 text-center text-muted">
                    No FD1 routes match your search
                  </div>
                )}
              </div>
            </div>
          ) : null}
 
          {selectedType === "all" || selectedType === "openapi" ? (
            <div className="bg-surface rounded-lg shadow-sm overflow-hidden print:shadow-none print:border print:border-black page-break-avoid">
              <div className="bg-success text-white px-6 py-4 print:bg-white print:text-black print:py-2 print:border-b-2 print:border-black">
                <h2 className="text-xl font-bold flex items-center gap-2 print:text-lg">
                  <Icon name="cloud" size={24} className="print:hidden" />
                  OpenAPI2 Routes ({openapiRoutes.length})
                </h2>
                <p className="text-sm text-white/80 mt-1 print:text-xs print:text-black print:mt-0">RESTful API with mixed access levels - check each endpoint</p>
              </div>
              <div className="divide-y divide-border print:divide-black">
                {filteredRoutes
                  .filter(r => r.type === "openapi")
                  .map((route, idx) => (
                    <div key={idx} className="p-5 hover:bg-surface-2 transition-colors page-break-avoid print:p-3 print:hover:bg-white">
                      <div className="flex items-start justify-between gap-4 mb-2 print:mb-1">
                        <div className="flex-1 flex items-center gap-2 flex-wrap print:gap-1">
                          <Icon name="route" size={16} className="text-success flex-shrink-0 print:hidden" />
                          <code className="text-sm font-mono bg-success/10 text-success px-3 py-1 rounded print:bg-white print:text-black print:px-1 print:py-0 print:text-xs">
                            {route.path}
                          </code>
                          {route.accessLevel === "pos" && (
                            <span className="px-2 py-1 text-xs font-semibold rounded bg-success/20 text-success border border-success/30 flex items-center gap-1 print:bg-white print:text-black print:border-black print:px-1 print:py-0">
                              <Icon name="check_circle" size={14} className="print:hidden" />
                              POS
                            </span>
                          )}
                          {route.accessLevel === "merchant" && (
                            <span className="px-2 py-1 text-xs font-semibold rounded bg-info/20 text-info border border-info/30 flex items-center gap-1 print:bg-white print:text-black print:border-black print:px-1 print:py-0">
                              <Icon name="admin_panel_settings" size={14} className="print:hidden" />
                              Merchant
                            </span>
                          )}
                          {(() => {
                            const status = getTestStatus(route.path);
                            if (status === "success") {
                              return (
                                <span className="px-2 py-1 text-xs font-semibold rounded bg-success/20 text-success border border-success/30 flex items-center gap-1 print:hidden">
                                  <Icon name="check_circle" size={14} />
                                  Tested ✓
                                </span>
                              );
                            } else if (status === "failed") {
                              return (
                                <span className="px-2 py-1 text-xs font-semibold rounded bg-danger/20 text-danger border border-danger/30 flex items-center gap-1 print:hidden">
                                  <Icon name="error" size={14} />
                                  Failed
                                </span>
                              );
                            }
                            return null;
                          })()}
                        </div>
                        <div className="flex gap-2 print:gap-1">
                          {route.methods.map(method => (
                            <span
                              key={method}
                              className={`px-2 py-1 text-xs font-semibold rounded print:px-1 print:py-0 print:text-black print:bg-white print:border print:border-black ${
                                method === "GET"
                                  ? "bg-success/20 text-success"
                                  : method === "POST"
                                  ? "bg-info/20 text-info"
                                  : method === "PUT" || method === "PATCH"
                                  ? "bg-warn/20 text-warn"
                                  : "bg-danger/20 text-danger"
                              }`}
                            >
                              {method}
                            </span>
                          ))}
                        </div>
                      </div>
                      <p className="text-sm text-muted ml-1 print:text-xs print:text-black print:ml-0">{route.description}</p>
                    </div>
                  ))}
                {filteredRoutes.filter(r => r.type === "openapi").length === 0 && (
                  <div className="p-8 text-center text-muted print:hidden">
                    No OpenAPI routes match your search
                  </div>
                )}
              </div>
            </div>
          ) : null}
        </div>
 
        {/* Quick Reference - Hidden in print */}
        <div className="mt-8 bg-surface rounded-lg shadow-sm p-6 print:hidden">
          <h3 className="text-lg font-bold text-text mb-4 flex items-center gap-2">
            <Icon name="menu_book" size={24} />
            Quick Reference
          </h3>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-semibold text-text mb-2">Authentication</h4>
              <p className="text-sm text-muted mb-2">
                All routes require authentication via HTTP-only cookie:
              </p>
              <code className="text-xs bg-surface-2 text-text px-2 py-1 rounded block">
                Cookie: FieldpineApiKey=your_api_key
              </code>
            </div>
 
            <div>
              <h4 className="font-semibold text-text mb-2">Base URL</h4>
              <p className="text-sm text-muted mb-2">
                All API routes are relative to:
              </p>
              <code className="text-xs bg-surface-2 text-text px-2 py-1 rounded block">
                http://localhost:3000
              </code>
            </div>
 
            <div>
              <h4 className="font-semibold text-text mb-2">Response Format</h4>
              <pre className="text-xs bg-surface-2 text-text p-3 rounded overflow-x-auto">
{`{
  "success": true,
  "data": { /* result */ }
}`}
              </pre>
            </div>
 
            <div>
              <h4 className="font-semibold text-text mb-2">Error Format</h4>
              <pre className="text-xs bg-surface-2 text-text p-3 rounded overflow-x-auto">
{`{
  "success": false,
  "error": "Error message"
}`}
              </pre>
            </div>
          </div>
 
          <div className="mt-6 p-4 bg-warn/10 border-l-4 border-warn rounded">
            <p className="text-sm text-text flex items-start gap-2">
              <Icon name="tips_and_updates" size={20} className="text-warn flex-shrink-0 mt-0.5" />
              <span>
                <strong>Pro Tip:</strong> Use <code className="bg-warn/20 text-warn px-2 py-1 rounded">apiClient</code> from{" "}
                <code className="bg-warn/20 text-warn px-2 py-1 rounded">{"/lib/client/apiClient.ts"}</code> instead of calling these routes directly.
              </span>
            </p>
          </div>
 
          <div className="mt-4 p-4 bg-info/10 border-l-4 border-info rounded">
            <p className="text-sm text-text flex items-start gap-2">
              <Icon name="info" size={20} className="text-info flex-shrink-0 mt-0.5" />
              <span>
                <strong>Access Levels:</strong> These classifications are based on actual testing with agency/POS store credentials. 
                POS stores receive 403 Forbidden errors when accessing merchant-only endpoints. 
                For detailed test results, see{" "}
                <code className="bg-info/20 text-info px-2 py-1 rounded">{"/docs/API_ACCESS_LEVELS.md"}</code>
              </span>
            </p>
          </div>
          
          {testDataLoaded && (
            <div className="mt-4 p-4 bg-success/10 border-l-4 border-success rounded">
              <p className="text-sm text-text flex items-start gap-2">
                <Icon name="verified" size={20} className="text-success flex-shrink-0 mt-0.5" />
                <span>
                  <strong>Live Test Results:</strong> Endpoints marked with "Tested ✓" have been verified working in production. 
                  Test data loaded from Murwillumbah store ({testResults.length} endpoints tested).
                </span>
              </p>
            </div>
          )}
        </div>
      </div>
  );
}