deubg master status page

frontend/src/pages/Settings/DebugStatus.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from "react";
 import { AlertTriangle } from "lucide-react";
 import PageMeta from "../../components/common/PageMeta";
 import ComponentCard from "../../components/common/ComponentCard";
-import SiteAndSectorSelector from "../../components/common/SiteAndSectorSelector";
+import DebugSiteSelector from "../../components/common/DebugSiteSelector";
 import WordPressIntegrationDebug from "./WordPressIntegrationDebug";
 import { API_BASE_URL, fetchAPI } from "../../services/api";
 import { useSiteStore } from "../../store/siteStore";
@@ -694,9 +694,24 @@ export default function DebugStatus() {
           </button>
         </div>
 
-        {/* Site Selector */}
+        {/* Site Selector & Debug Toggle Combined */}
         <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-4">
-          <SiteAndSectorSelector hideSectorSelector={true} />
+          <div className="flex items-center justify-between">
+            <DebugSiteSelector />
+            {activeSite && (
+              <label className="flex items-center space-x-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={debugEnabled}
+                  onChange={(e) => setDebugEnabled(e.target.checked)}
+                  className="rounded"
+                />
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {debugEnabled ? 'Debug Enabled' : 'Debug Disabled'}
+                </span>
+              </label>
+            )}
+          </div>
         </div>
 
         {/* No Site Selected Warning */}
@@ -714,31 +729,6 @@ export default function DebugStatus() {
           </div>
         )}
 
-        {/* Debug Toggle */}
-        {activeSite && (
-          <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <h3 className="font-medium text-gray-900 dark:text-white">System Health Debug</h3>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  Enable debug mode to run health checks for {activeSite.name}
-                </p>
-              </div>
-              <label className="flex items-center space-x-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={debugEnabled}
-                  onChange={(e) => setDebugEnabled(e.target.checked)}
-                  className="rounded"
-                />
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  {debugEnabled ? 'Enabled' : 'Disabled'}
-                </span>
-              </label>
-            </div>
-          </div>
-        )}
-
         {/* Tab Content */}
         {debugEnabled && activeSite ? (
           <>

frontend/src/pages/Settings/MasterStatus.tsx

@@ -0,0 +1,548 @@
+import { useState, useEffect, useCallback } from 'react';
+import { 
+  Activity, 
+  Zap, 
+  Database, 
+  Server, 
+  Workflow,
+  Globe,
+  CheckCircle,
+  AlertTriangle,
+  XCircle,
+  RefreshCw,
+  TrendingUp,
+  Clock,
+  Cpu,
+  HardDrive,
+  MemoryStick
+} from 'lucide-react';
+import PageMeta from '../../components/common/PageMeta';
+import DebugSiteSelector from '../../components/common/DebugSiteSelector';
+import { fetchAPI } from '../../services/api';
+import { useSiteStore } from '../../store/siteStore';
+
+// Types
+interface SystemMetrics {
+  cpu: { usage_percent: number; cores: number; status: string };
+  memory: { total_gb: number; used_gb: number; usage_percent: number; status: string };
+  disk: { total_gb: number; used_gb: number; usage_percent: number; status: string };
+}
+
+interface ServiceHealth {
+  database: { status: string; connected: boolean };
+  redis: { status: string; connected: boolean };
+  celery: { status: string; worker_count: number };
+}
+
+interface ApiGroupHealth {
+  name: string;
+  total: number;
+  healthy: number;
+  warning: number;
+  error: number;
+  percentage: number;
+  status: 'healthy' | 'warning' | 'error';
+}
+
+interface WorkflowHealth {
+  name: string;
+  steps: { name: string; status: 'healthy' | 'warning' | 'error'; message?: string }[];
+  overall: 'healthy' | 'warning' | 'error';
+}
+
+interface IntegrationHealth {
+  platform: string;
+  connected: boolean;
+  last_sync: string | null;
+  sync_enabled: boolean;
+  plugin_active: boolean;
+  status: 'healthy' | 'warning' | 'error';
+}
+
+export default function MasterStatus() {
+  const { activeSite } = useSiteStore();
+  const [loading, setLoading] = useState(true);
+  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
+  
+  // System metrics
+  const [systemMetrics, setSystemMetrics] = useState<SystemMetrics | null>(null);
+  const [serviceHealth, setServiceHealth] = useState<ServiceHealth | null>(null);
+  
+  // API health
+  const [apiHealth, setApiHealth] = useState<ApiGroupHealth[]>([]);
+  
+  // Workflow health (keywords → clusters → ideas → tasks → content → publish)
+  const [workflowHealth, setWorkflowHealth] = useState<WorkflowHealth[]>([]);
+  
+  // Integration health
+  const [integrationHealth, setIntegrationHealth] = useState<IntegrationHealth | null>(null);
+
+  // Fetch system metrics
+  const fetchSystemMetrics = useCallback(async () => {
+    try {
+      const data = await fetchAPI('/v1/system/status/');
+      setSystemMetrics(data.system);
+      setServiceHealth({
+        database: data.database,
+        redis: data.redis,
+        celery: data.celery,
+      });
+    } catch (error) {
+      console.error('Failed to fetch system metrics:', error);
+    }
+  }, []);
+
+  // Fetch API health (aggregated from API monitor)
+  const fetchApiHealth = useCallback(async () => {
+    const groups = [
+      { name: 'Auth & User', endpoints: ['/v1/auth/me/', '/v1/auth/sites/', '/v1/auth/accounts/'] },
+      { name: 'Planner', endpoints: ['/v1/planner/keywords/', '/v1/planner/clusters/', '/v1/planner/ideas/'] },
+      { name: 'Writer', endpoints: ['/v1/writer/tasks/', '/v1/writer/content/', '/v1/writer/images/'] },
+      { name: 'Integration', endpoints: ['/v1/integration/integrations/'] },
+    ];
+
+    const healthChecks: ApiGroupHealth[] = [];
+
+    for (const group of groups) {
+      let healthy = 0;
+      let warning = 0;
+      let error = 0;
+
+      for (const endpoint of group.endpoints) {
+        try {
+          const startTime = Date.now();
+          await fetchAPI(endpoint + (activeSite ? `?site=${activeSite.id}` : ''));
+          const responseTime = Date.now() - startTime;
+          
+          if (responseTime < 1000) healthy++;
+          else if (responseTime < 3000) warning++;
+          else error++;
+        } catch (e) {
+          error++;
+        }
+      }
+
+      const total = group.endpoints.length;
+      const percentage = Math.round((healthy / total) * 100);
+      
+      healthChecks.push({
+        name: group.name,
+        total,
+        healthy,
+        warning,
+        error,
+        percentage,
+        status: error > 0 ? 'error' : warning > 0 ? 'warning' : 'healthy',
+      });
+    }
+
+    setApiHealth(healthChecks);
+  }, [activeSite]);
+
+  // Check workflow health (end-to-end pipeline)
+  const checkWorkflowHealth = useCallback(async () => {
+    if (!activeSite) {
+      setWorkflowHealth([]);
+      return;
+    }
+
+    const workflows: WorkflowHealth[] = [];
+
+    // Content Generation Workflow
+    try {
+      const steps = [];
+      
+      // Step 1: Keywords exist
+      const keywords = await fetchAPI(`/v1/planner/keywords/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Keywords Imported',
+        status: keywords.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${keywords.count} keywords`,
+      });
+
+      // Step 2: Clusters exist
+      const clusters = await fetchAPI(`/v1/planner/clusters/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Content Clusters',
+        status: clusters.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${clusters.count} clusters`,
+      });
+
+      // Step 3: Ideas generated
+      const ideas = await fetchAPI(`/v1/planner/ideas/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Content Ideas',
+        status: ideas.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${ideas.count} ideas`,
+      });
+
+      // Step 4: Tasks created
+      const tasks = await fetchAPI(`/v1/writer/tasks/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Writer Tasks',
+        status: tasks.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${tasks.count} tasks`,
+      });
+
+      // Step 5: Content generated
+      const content = await fetchAPI(`/v1/writer/content/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Content Generated',
+        status: content.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${content.count} articles`,
+      });
+
+      const hasErrors = steps.some(s => s.status === 'error');
+      const hasWarnings = steps.some(s => s.status === 'warning');
+
+      workflows.push({
+        name: 'Content Generation Pipeline',
+        steps,
+        overall: hasErrors ? 'error' : hasWarnings ? 'warning' : 'healthy',
+      });
+    } catch (error) {
+      workflows.push({
+        name: 'Content Generation Pipeline',
+        steps: [{ name: 'Pipeline Check', status: 'error', message: 'Failed to check workflow' }],
+        overall: 'error',
+      });
+    }
+
+    setWorkflowHealth(workflows);
+  }, [activeSite]);
+
+  // Check integration health
+  const checkIntegrationHealth = useCallback(async () => {
+    if (!activeSite) {
+      setIntegrationHealth(null);
+      return;
+    }
+
+    try {
+      const integrations = await fetchAPI(`/v1/integration/integrations/?site_id=${activeSite.id}`);
+      
+      if (integrations.results && integrations.results.length > 0) {
+        const wpIntegration = integrations.results.find((i: any) => i.platform === 'wordpress');
+        
+        if (wpIntegration) {
+          const health = await fetchAPI(`/v1/integration/integrations/${wpIntegration.id}/debug-status/`);
+          
+          setIntegrationHealth({
+            platform: 'WordPress',
+            connected: wpIntegration.is_active,
+            last_sync: wpIntegration.last_sync_at,
+            sync_enabled: wpIntegration.sync_enabled,
+            plugin_active: health.health?.plugin_active || false,
+            status: wpIntegration.is_active && health.health?.plugin_active ? 'healthy' : 'warning',
+          });
+        } else {
+          setIntegrationHealth(null);
+        }
+      } else {
+        setIntegrationHealth(null);
+      }
+    } catch (error) {
+      console.error('Failed to check integration:', error);
+      setIntegrationHealth(null);
+    }
+  }, [activeSite]);
+
+  // Refresh all data
+  const refreshAll = useCallback(async () => {
+    setLoading(true);
+    await Promise.all([
+      fetchSystemMetrics(),
+      fetchApiHealth(),
+      checkWorkflowHealth(),
+      checkIntegrationHealth(),
+    ]);
+    setLastUpdate(new Date());
+    setLoading(false);
+  }, [fetchSystemMetrics, fetchApiHealth, checkWorkflowHealth, checkIntegrationHealth]);
+
+  // Initial load and auto-refresh
+  useEffect(() => {
+    refreshAll();
+    const interval = setInterval(refreshAll, 30000); // 30 seconds
+    return () => clearInterval(interval);
+  }, [refreshAll]);
+
+  // Status badge component
+  const StatusBadge = ({ status }: { status: string }) => {
+    const colors = {
+      healthy: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+      warning: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+      error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+    };
+    
+    const icons = {
+      healthy: CheckCircle,
+      warning: AlertTriangle,
+      error: XCircle,
+    };
+
+    const Icon = icons[status as keyof typeof icons] || AlertTriangle;
+
+    return (
+      <div className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${colors[status as keyof typeof colors]}`}>
+        <Icon className="h-3 w-3" />
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </div>
+    );
+  };
+
+  // Progress bar component
+  const ProgressBar = ({ value, status }: { value: number; status: string }) => {
+    const colors = {
+      healthy: 'bg-green-500',
+      warning: 'bg-yellow-500',
+      error: 'bg-red-500',
+    };
+
+    return (
+      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+        <div 
+          className={`h-2 rounded-full transition-all ${colors[status as keyof typeof colors]}`}
+          style={{ width: `${value}%` }}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <PageMeta title="System Status - IGNY8" description="Master status dashboard" />
+      
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-2xl font-semibold text-gray-800 dark:text-white/90">System Status</h1>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Master dashboard showing all system health metrics
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              <Clock className="h-4 w-4 inline mr-1" />
+              Last updated: {lastUpdate.toLocaleTimeString()}
+            </div>
+            <button
+              onClick={refreshAll}
+              disabled={loading}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+            >
+              <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+              Refresh
+            </button>
+          </div>
+        </div>
+
+        {/* System Resources & Services Health */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <Server className="h-5 w-5 text-blue-600" />
+            System Resources
+          </h3>
+          <div className="flex gap-6">
+            {/* Compact System Metrics (70% width) */}
+            <div className="flex-1 grid grid-cols-3 gap-4">
+              {/* CPU */}
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-1">
+                    <Cpu className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">CPU</span>
+                  </div>
+                  <StatusBadge status={systemMetrics?.cpu.status || 'warning'} />
+                </div>
+                <div className="text-lg font-bold text-gray-900 dark:text-white">
+                  {systemMetrics?.cpu.usage_percent.toFixed(1)}%
+                </div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{systemMetrics?.cpu.cores} cores</p>
+                <ProgressBar value={systemMetrics?.cpu.usage_percent || 0} status={systemMetrics?.cpu.status || 'warning'} />
+              </div>
+
+              {/* Memory */}
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-1">
+                    <MemoryStick className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Memory</span>
+                  </div>
+                  <StatusBadge status={systemMetrics?.memory.status || 'warning'} />
+                </div>
+                <div className="text-lg font-bold text-gray-900 dark:text-white">
+                  {systemMetrics?.memory.usage_percent.toFixed(1)}%
+                </div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  {systemMetrics?.memory.used_gb.toFixed(1)}/{systemMetrics?.memory.total_gb.toFixed(1)} GB
+                </p>
+                <ProgressBar value={systemMetrics?.memory.usage_percent || 0} status={systemMetrics?.memory.status || 'warning'} />
+              </div>
+
+              {/* Disk */}
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-1">
+                    <HardDrive className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Disk</span>
+                  </div>
+                  <StatusBadge status={systemMetrics?.disk.status || 'warning'} />
+                </div>
+                <div className="text-lg font-bold text-gray-900 dark:text-white">
+                  {systemMetrics?.disk.usage_percent.toFixed(1)}%
+                </div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  {systemMetrics?.disk.used_gb.toFixed(1)}/{systemMetrics?.disk.total_gb.toFixed(1)} GB
+                </p>
+                <ProgressBar value={systemMetrics?.disk.usage_percent || 0} status={systemMetrics?.disk.status || 'warning'} />
+              </div>
+            </div>
+
+            {/* Services Stack (30% width) */}
+            <div className="w-1/3 space-y-2">
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Database className="h-4 w-4 text-blue-600" />
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">PostgreSQL</span>
+                </div>
+                <StatusBadge status={serviceHealth?.database.status || 'warning'} />
+              </div>
+
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Zap className="h-4 w-4 text-red-600" />
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Redis</span>
+                </div>
+                <StatusBadge status={serviceHealth?.redis.status || 'warning'} />
+              </div>
+
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Activity className="h-4 w-4 text-green-600" />
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Celery</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span className="text-xs text-gray-500">{serviceHealth?.celery.worker_count || 0}w</span>
+                  <StatusBadge status={serviceHealth?.celery.status || 'warning'} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Site Selector */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border border-gray-200 dark:border-gray-700">
+          <DebugSiteSelector />
+        </div>
+
+        {/* API Health by Module */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <Zap className="h-5 w-5 text-yellow-600" />
+            API Module Health
+          </h3>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            {apiHealth.map((group) => (
+              <div key={group.name} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{group.name}</span>
+                  <StatusBadge status={group.status} />
+                </div>
+                <div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+                  {group.percentage}%
+                </div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+                  {group.healthy}/{group.total} healthy
+                </div>
+                <ProgressBar value={group.percentage} status={group.status} />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Content Workflow Health */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <Workflow className="h-5 w-5 text-purple-600" />
+            Content Pipeline Status
+          </h3>
+          {workflowHealth.length === 0 ? (
+            <p className="text-sm text-gray-500 dark:text-gray-400">Select a site to view workflow health</p>
+          ) : (
+            <div className="space-y-4">
+              {workflowHealth.map((workflow) => (
+                <div key={workflow.name} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                  <div className="flex items-center justify-between mb-4">
+                    <h4 className="font-medium text-gray-900 dark:text-white">{workflow.name}</h4>
+                    <StatusBadge status={workflow.overall} />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {workflow.steps.map((step, idx) => (
+                      <div key={idx} className="flex-1">
+                        <div className="flex items-center justify-between mb-1">
+                          <span className="text-xs text-gray-600 dark:text-gray-400">{step.name}</span>
+                          {step.status === 'healthy' ? (
+                            <CheckCircle className="h-3 w-3 text-green-600" />
+                          ) : step.status === 'warning' ? (
+                            <AlertTriangle className="h-3 w-3 text-yellow-600" />
+                          ) : (
+                            <XCircle className="h-3 w-3 text-red-600" />
+                          )}
+                        </div>
+                        {step.message && (
+                          <p className="text-xs text-gray-500 dark:text-gray-400">{step.message}</p>
+                        )}
+                        {idx < workflow.steps.length - 1 && (
+                          <div className="mt-2 h-1 bg-gray-200 dark:bg-gray-700 rounded">
+                            <div className={`h-1 rounded ${
+                              step.status === 'healthy' ? 'bg-green-500' : 
+                              step.status === 'warning' ? 'bg-yellow-500' : 'bg-red-500'
+                            }`} style={{ width: '100%' }} />
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* WordPress Integration */}
+        {integrationHealth && (
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+              <Globe className="h-5 w-5 text-blue-600" />
+              WordPress Integration
+            </h3>
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Connection</span>
+                <StatusBadge status={integrationHealth.connected ? 'healthy' : 'error'} />
+              </div>
+              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Plugin Status</span>
+                <StatusBadge status={integrationHealth.plugin_active ? 'healthy' : 'warning'} />
+              </div>
+              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Sync Enabled</span>
+                <StatusBadge status={integrationHealth.sync_enabled ? 'healthy' : 'warning'} />
+              </div>
+              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Last Sync</span>
+                <span className="text-sm text-gray-900 dark:text-white">
+                  {integrationHealth.last_sync 
+                    ? new Date(integrationHealth.last_sync).toLocaleString() 
+                    : 'Never'}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}