page.tsx

Go to the documentation of this file.

"use client";
import { useEffect, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { SkeletonCard, SkeletonKPI } from "@/components/LoadingSpinner";
 
interface SystemHealth {
  apiStatus: string;
  locationsCount: number;
  customersCount: number;
  productsCount: number;
  salesApiStatus: string;
  lastChecked: string;
}
 
export default function OperationsMonitoringPage() {
  const [health, setHealth] = useState<SystemHealth | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
 
  const checkSystemHealth = async () => {
    try {
      setIsLoading(true);
 
      // Run health checks in parallel with full counts
      const [customersResult, productsResult, locationsResult, salesTotalsResult] = await Promise.allSettled([
        apiClient.getCustomers({ limit: 1000, source: 'openapi' }),
        apiClient.getProducts({ limit: 1000, source: 'openapi' }),
        apiClient.getLocations(),
        apiClient.getSalesTotals()
      ]);
 
      // Check each API endpoint status
      const customersOk = customersResult.status === 'fulfilled' && customersResult.value.success;
      const productsOk = productsResult.status === 'fulfilled' && productsResult.value.success;
      const locationsOk = locationsResult.status === 'fulfilled' && locationsResult.value.success;
      const salesOk = salesTotalsResult.status === 'fulfilled' && salesTotalsResult.value.success;
 
      const connectedApis = [customersOk, productsOk, locationsOk, salesOk].filter(Boolean).length;
      
      let apiStatus = 'Offline';
      if (connectedApis === 4) {
        apiStatus = 'Connected';
      } else if (connectedApis > 0) {
        apiStatus = `Partial (${connectedApis}/4)`;
      }
 
      // Get counts from successful API calls
      let locationsCount = 0;
      let customersCount = 0;
      let productsCount = 0;
 
      if (locationsOk && locationsResult.status === 'fulfilled') {
        const locationData = locationsResult.value.data as any;
        const locations = locationData?.data?.Location || [];
        locationsCount = Array.isArray(locations) ? locations.length : 0;
      }
 
      if (customersOk && customersResult.status === 'fulfilled') {
        const apiData = customersResult.value.data as any;
        const customerData = apiData?.data?.Customer || [];
        customersCount = Array.isArray(customerData) ? customerData.length : 0;
      }
 
      if (productsOk && productsResult.status === 'fulfilled') {
        const apiData = productsResult.value.data as any;
        const productData = apiData?.data?.Product || [];
        productsCount = Array.isArray(productData) ? productData.length : 0;
      }
 
      setHealth({
        apiStatus,
        locationsCount,
        customersCount,
        productsCount,
        salesApiStatus: salesOk ? 'Connected' : 'Error',
        lastChecked: new Date().toLocaleString()
      });
 
      setLastRefresh(new Date());
    } catch (error) {
      console.error('Health check error:', error);
      setHealth({
        apiStatus: 'Error',
        locationsCount: 0,
        customersCount: 0,
        productsCount: 0,
        salesApiStatus: 'Error',
        lastChecked: new Date().toLocaleString()
      });
    } finally {
      setIsLoading(false);
    }
  };
 
  useEffect(() => {
    checkSystemHealth();
    
    // Auto-refresh every 2 minutes
    const interval = setInterval(checkSystemHealth, 2 * 60 * 1000);
    return () => clearInterval(interval);
  }, []);
 
  const getStatusColor = (status: string) => {
    if (status === 'Connected') return 'text-green-600 bg-green-50 border-green-200';
    if (status.startsWith('Partial')) return 'text-orange-600 bg-orange-50 border-orange-200';
    return 'text-red-600 bg-red-50 border-red-200';
  };
 
  const getStatusIcon = (status: string) => {
    if (status === 'Connected') return '✓';
    if (status.startsWith('Partial')) return '⚠';
    return '✗';
  };
 
  return (
    <div className="p-8 h-full overflow-y-auto">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="mb-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-text">Operations Monitoring</h1>
              <p className="text-muted mt-1">Real-time system health and API status</p>
            </div>
            <button
              onClick={checkSystemHealth}
              disabled={isLoading}
              className="px-4 py-2 rounded-lg border border-brand bg-brand text-white hover:bg-brand-dark disabled:opacity-50 transition"
            >
              {isLoading ? 'Checking...' : 'Refresh'}
            </button>
          </div>
        </div>
 
        {isLoading && !health ? (
          <div>
            {/* Skeleton for status cards */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
              {[...Array(4)].map((_, i) => (
                <SkeletonKPI key={i} />
              ))}
            </div>
            
            {/* Skeleton for API status */}
            <SkeletonCard />
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
              <SkeletonCard />
              <SkeletonCard />
            </div>
          </div>
        ) : (
          <>
            {/* System Status Overview */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
              <div className={`card border-2 ${getStatusColor(health?.apiStatus || 'Offline')}`}>
                <div className="text-center">
                  <div className="text-4xl mb-2">{getStatusIcon(health?.apiStatus || 'Offline')}</div>
                  <div className="text-2xl font-bold">{health?.apiStatus || 'Unknown'}</div>
                  <div className="text-sm mt-1">API Status</div>
                </div>
              </div>
 
              <div className="card border border-border">
                <div className="text-center">
                  <div className="text-3xl font-bold text-text">{health?.locationsCount || 0}</div>
                  <div className="text-sm text-muted mt-1">Store Locations</div>
                  <div className="text-xs text-muted mt-2">Active stores</div>
                </div>
              </div>
 
              <div className="card border border-border">
                <div className="text-center">
                  <div className="text-3xl font-bold text-text">{health?.customersCount || 0}</div>
                  <div className="text-sm text-muted mt-1">Customer Records</div>
                  <div className="text-xs text-muted mt-2">In database</div>
                </div>
              </div>
 
              <div className="card border border-border">
                <div className="text-center">
                  <div className="text-3xl font-bold text-text">{health?.productsCount || 0}</div>
                  <div className="text-sm text-muted mt-1">Product Catalog</div>
                  <div className="text-xs text-muted mt-2">Active SKUs</div>
                </div>
              </div>
            </div>
 
            {/* API Endpoint Status */}
            <div className="card mb-6">
              <h2 className="text-xl font-semibold mb-4">API Endpoint Health</h2>
              
              <div className="space-y-3">
                <div className="flex items-center justify-between p-4 bg-surface rounded-lg border border-border">
                  <div className="flex items-center gap-3">
                    <div className={`w-3 h-3 rounded-full ${health?.apiStatus === 'Connected' ? 'bg-success' : 'bg-danger'}`}></div>
                    <div>
                      <div className="font-semibold">Fieldpine OpenAPI2</div>
                      <div className="text-sm text-muted">Products, Customers, Locations</div>
                    </div>
                  </div>
                  <div className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(health?.apiStatus || 'Offline')}`}>
                    {health?.apiStatus || 'Unknown'}
                  </div>
                </div>
 
                <div className="flex items-center justify-between p-4 bg-surface rounded-lg border border-border">
                  <div className="flex items-center gap-3">
                    <div className={`w-3 h-3 rounded-full ${health?.salesApiStatus === 'Connected' ? 'bg-success' : 'bg-danger'}`}></div>
                    <div>
                      <div className="font-semibold">Sales & Trading API</div>
                      <div className="text-sm text-muted">Sales totals, trading summaries</div>
                    </div>
                  </div>
                  <div className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(health?.salesApiStatus || 'Error')}`}>
                    {health?.salesApiStatus || 'Unknown'}
                  </div>
                </div>
 
                <div className="flex items-center justify-between p-4 bg-surface rounded-lg border border-border">
                  <div className="flex items-center gap-3">
                    <div className="w-3 h-3 rounded-full bg-brand"></div>
                    <div>
                      <div className="font-semibold">Next.js Application</div>
                      <div className="text-sm text-muted">Frontend rendering, API routes</div>
                    </div>
                  </div>
                  <div className="px-3 py-1 rounded-full text-sm font-medium text-green-600 bg-green-50 border border-green-200">
                    Running
                  </div>
                </div>
              </div>
            </div>
 
            {/* System Information */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="card">
                <h3 className="text-lg font-semibold mb-3">Connection Details</h3>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-muted">Base URL:</span>
                    <span className="font-mono">https://iig.cwanz.online</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted">Environment:</span>
                    <span className="font-mono">.env.local</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted">Auth Method:</span>
                    <span>Cookie (FieldpineApiKey)</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted">Last Checked:</span>
                    <span>{health?.lastChecked || 'Never'}</span>
                  </div>
                </div>
              </div>
 
              <div className="card">
                <h3 className="text-lg font-semibold mb-3">Quick Actions</h3>
                <div className="space-y-2">
                  <a href="/pages/start-here" className="block p-3 bg-surface rounded-lg border border-border hover:shadow-pine transition">
                    <div className="font-semibold">📚 View Documentation</div>
                    <div className="text-sm text-muted">API reference and development guide</div>
                  </a>
                  <a href="/pages/reports/analytics" className="block p-3 bg-surface rounded-lg border border-border hover:shadow-pine transition">
                    <div className="font-semibold">📊 Analytics Dashboard</div>
                    <div className="text-sm text-muted">Sales charts and business metrics</div>
                  </a>
                  <a href="/pages/home" className="block p-3 bg-surface rounded-lg border border-border hover:shadow-pine transition">
                    <div className="font-semibold">🏠 Return to Home</div>
                    <div className="text-sm text-muted">Main dashboard overview</div>
                  </a>
                </div>
              </div>
            </div>
 
            {/* Footer */}
            <div className="mt-6 text-center text-sm text-muted">
              <p>System monitoring refreshes automatically every 2 minutes</p>
              <p className="mt-1">Last refresh: {lastRefresh.toLocaleTimeString()}</p>
            </div>
          </>
        )}
      </div>
    </div>
  );
}