stage 4-2

frontend/src/components/sites/WordPressIntegrationCard.tsx

@@ -1,9 +1,11 @@
 /**
  * WordPress Integration Card Component
+ * Stage 4: Enhanced with sync health status and troubleshooting
  * Displays WordPress integration status and quick actions
  */
 import React from 'react';
-import { Globe, CheckCircle, XCircle, Settings, RefreshCw } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Globe, CheckCircle, XCircle, Settings, RefreshCw, AlertCircle, ExternalLink } from 'lucide-react';
 import { Card } from '../ui/card';
 import Button from '../ui/button/Button';
 import Badge from '../ui/badge/Badge';
@@ -14,8 +16,10 @@ interface WordPressIntegration {
   platform: string;
   is_active: boolean;
   sync_enabled: boolean;
-  sync_status: 'success' | 'failed' | 'pending';
+  sync_status: 'success' | 'failed' | 'pending' | 'healthy' | 'warning' | 'error';
   last_sync_at?: string;
+  sync_error?: string | null;
+  mismatch_count?: number;
   config_json?: {
     site_url?: string;
   };
@@ -27,6 +31,7 @@ interface WordPressIntegrationCardProps {
   onManage: () => void;
   onSync?: () => void;
   loading?: boolean;
+  siteId?: string | number;
 }
 
 export default function WordPressIntegrationCard({
@@ -35,7 +40,9 @@ export default function WordPressIntegrationCard({
   onManage,
   onSync,
   loading = false,
+  siteId,
 }: WordPressIntegrationCardProps) {
+  const navigate = useNavigate();
   if (!integration) {
     return (
       <Card className="p-6">
@@ -93,15 +100,20 @@ export default function WordPressIntegrationCard({
           <div>
             <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Sync Status</p>
             <div className="flex items-center gap-2">
-              {integration.sync_status === 'success' ? (
+              {integration.sync_status === 'success' || integration.sync_status === 'healthy' ? (
                 <CheckCircle className="w-4 h-4 text-green-500" />
-              ) : integration.sync_status === 'failed' ? (
+              ) : integration.sync_status === 'failed' || integration.sync_status === 'error' ? (
                 <XCircle className="w-4 h-4 text-red-500" />
+              ) : integration.sync_status === 'warning' ? (
+                <AlertCircle className="w-4 h-4 text-yellow-500" />
               ) : (
                 <RefreshCw className="w-4 h-4 text-yellow-500 animate-spin" />
               )}
               <span className="text-sm font-medium text-gray-900 dark:text-white capitalize">
-                {integration.sync_status}
+                {integration.sync_status === 'healthy' ? 'Healthy' : 
+                 integration.sync_status === 'warning' ? 'Warning' :
+                 integration.sync_status === 'error' ? 'Error' :
+                 integration.sync_status}
               </span>
             </div>
           </div>
@@ -115,6 +127,48 @@ export default function WordPressIntegrationCard({
           </div>
         </div>
 
+        {/* Sync Health Indicators */}
+        {(integration.mismatch_count !== undefined && integration.mismatch_count > 0) && (
+          <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <AlertCircle className="w-4 h-4 text-yellow-500" />
+                <span className="text-sm text-gray-600 dark:text-gray-400">
+                  {integration.mismatch_count} sync mismatch{integration.mismatch_count !== 1 ? 'es' : ''} detected
+                </span>
+              </div>
+              {siteId && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => navigate(`/sites/${siteId}/sync`)}
+                >
+                  View Details
+                  <ExternalLink className="w-3 h-3 ml-1" />
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+
+        {integration.sync_error && (
+          <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+            <div className="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+              <div className="flex items-start gap-2">
+                <XCircle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
+                <div className="flex-1">
+                  <p className="text-xs font-medium text-red-800 dark:text-red-300 mb-1">
+                    Sync Error
+                  </p>
+                  <p className="text-xs text-red-700 dark:text-red-400">
+                    {integration.sync_error}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
         <div className="flex items-center gap-2 pt-2">
           <Button
             onClick={onManage}
@@ -125,6 +179,16 @@ export default function WordPressIntegrationCard({
             <Settings className="w-4 h-4 mr-2" />
             Manage
           </Button>
+          {siteId && (
+            <Button
+              onClick={() => navigate(`/sites/${siteId}/sync`)}
+              variant="outline"
+              size="sm"
+              title="View Sync Dashboard"
+            >
+              <ExternalLink className="w-4 h-4" />
+            </Button>
+          )}
           {onSync && (
             <Button
               onClick={onSync}