Enhance Site Settings with WordPress Integration

- Updated SiteSettings component to include a new 'Integrations' tab for managing WordPress integration.
- Added functionality to load, save, and sync WordPress integration settings.
- Integrated WordPressIntegrationCard and WordPressIntegrationModal for user interaction.
- Implemented URL parameter handling for tab navigation.

frontend/src/components/sites/WordPressIntegrationCard.tsx

@@ -0,0 +1,144 @@
+/**
+ * WordPress Integration Card Component
+ * Displays WordPress integration status and quick actions
+ */
+import React from 'react';
+import { Globe, CheckCircle, XCircle, Settings, RefreshCw } from 'lucide-react';
+import { Card } from '../ui/card';
+import Button from '../ui/button/Button';
+import Badge from '../ui/badge/Badge';
+
+interface WordPressIntegration {
+  id: number;
+  site: number;
+  platform: string;
+  is_active: boolean;
+  sync_enabled: boolean;
+  sync_status: 'success' | 'failed' | 'pending';
+  last_sync_at?: string;
+  config_json?: {
+    url?: string;
+    username?: string;
+  };
+}
+
+interface WordPressIntegrationCardProps {
+  integration: WordPressIntegration | null;
+  onConnect: () => void;
+  onManage: () => void;
+  onSync?: () => void;
+  loading?: boolean;
+}
+
+export default function WordPressIntegrationCard({
+  integration,
+  onConnect,
+  onManage,
+  onSync,
+  loading = false,
+}: WordPressIntegrationCardProps) {
+  if (!integration) {
+    return (
+      <Card className="p-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
+              <Globe className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                WordPress Integration
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Connect your WordPress site to sync content
+              </p>
+            </div>
+          </div>
+          <Button onClick={onConnect} variant="primary" disabled={loading}>
+            Connect WordPress
+          </Button>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
+              <Globe className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                WordPress Integration
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {integration.config_json?.url || 'WordPress Site'}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge
+              variant="soft"
+              color={integration.is_active ? 'success' : 'neutral'}
+              size="sm"
+            >
+              {integration.is_active ? 'Active' : 'Inactive'}
+            </Badge>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+          <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' ? (
+                <CheckCircle className="w-4 h-4 text-green-500" />
+              ) : integration.sync_status === 'failed' ? (
+                <XCircle className="w-4 h-4 text-red-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}
+              </span>
+            </div>
+          </div>
+          <div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Last Sync</p>
+            <p className="text-sm text-gray-900 dark:text-white">
+              {integration.last_sync_at
+                ? new Date(integration.last_sync_at).toLocaleDateString()
+                : 'Never'}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 pt-2">
+          <Button
+            onClick={onManage}
+            variant="outline"
+            size="sm"
+            className="flex-1"
+          >
+            <Settings className="w-4 h-4 mr-2" />
+            Manage
+          </Button>
+          {onSync && (
+            <Button
+              onClick={onSync}
+              variant="outline"
+              size="sm"
+              disabled={loading}
+            >
+              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+            </Button>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}
+

frontend/src/components/sites/WordPressIntegrationModal.tsx

@@ -0,0 +1,177 @@
+/**
+ * WordPress Integration Modal Component
+ * Form for connecting/managing WordPress integration
+ */
+import React, { useState } from 'react';
+import { X, Globe, AlertCircle } from 'lucide-react';
+import Modal from '../ui/modal/Modal';
+import Button from '../ui/button/Button';
+import Label from '../form/Label';
+import Input from '../form/input/Input';
+import Checkbox from '../form/input/Checkbox';
+import { useToast } from '../ui/toast/ToastContainer';
+
+interface WordPressIntegrationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: WordPressIntegrationFormData) => Promise<void>;
+  initialData?: WordPressIntegrationFormData;
+  siteId: number;
+}
+
+export interface WordPressIntegrationFormData {
+  url: string;
+  username: string;
+  app_password: string;
+  is_active: boolean;
+  sync_enabled: boolean;
+}
+
+export default function WordPressIntegrationModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  initialData,
+  siteId,
+}: WordPressIntegrationModalProps) {
+  const toast = useToast();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState<WordPressIntegrationFormData>({
+    url: initialData?.url || '',
+    username: initialData?.username || '',
+    app_password: initialData?.app_password || '',
+    is_active: initialData?.is_active ?? true,
+    sync_enabled: initialData?.sync_enabled ?? true,
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!formData.url || !formData.username || !formData.app_password) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      await onSubmit(formData);
+      toast.success('WordPress integration saved successfully');
+      onClose();
+    } catch (error: any) {
+      toast.error(`Failed to save integration: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="lg">
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
+              <Globe className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+            </div>
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+              {initialData ? 'Edit WordPress Integration' : 'Connect WordPress Site'}
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
+            <div className="flex items-start gap-3">
+              <AlertCircle className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
+              <div className="text-sm text-blue-800 dark:text-blue-300">
+                <p className="font-medium mb-1">WordPress Application Password Required</p>
+                <p>
+                  You need to create an Application Password in WordPress. Go to Users → Profile → 
+                  Application Passwords to generate one.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <Label htmlFor="url" required>
+              WordPress Site URL
+            </Label>
+            <Input
+              id="url"
+              type="url"
+              value={formData.url}
+              onChange={(e) => setFormData({ ...formData, url: e.target.value })}
+              placeholder="https://example.com"
+              required
+            />
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              Enter your WordPress site URL (without trailing slash)
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="username" required>
+              WordPress Username
+            </Label>
+            <Input
+              id="username"
+              type="text"
+              value={formData.username}
+              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+              placeholder="admin"
+              required
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="app_password" required>
+              Application Password
+            </Label>
+            <Input
+              id="app_password"
+              type="password"
+              value={formData.app_password}
+              onChange={(e) => setFormData({ ...formData, app_password: e.target.value })}
+              placeholder="xxxx xxxx xxxx xxxx xxxx xxxx"
+              required
+            />
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              Enter the application password (with spaces or without)
+            </p>
+          </div>
+
+          <div className="space-y-3 pt-2">
+            <Checkbox
+              id="is_active"
+              checked={formData.is_active}
+              onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+              label="Enable Integration"
+            />
+            <Checkbox
+              id="sync_enabled"
+              checked={formData.sync_enabled}
+              onChange={(e) => setFormData({ ...formData, sync_enabled: e.target.checked })}
+              label="Enable Two-Way Sync"
+            />
+          </div>
+
+          <div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="primary" disabled={loading}>
+              {loading ? 'Saving...' : initialData ? 'Update Integration' : 'Connect'}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </Modal>
+  );
+}
+

frontend/src/pages/Sites/Settings.tsx

@@ -4,8 +4,8 @@
  * Features: SEO (meta tags, Open Graph, schema.org)
  */
 import React, { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
-import { SettingsIcon, SearchIcon, Share2Icon, CodeIcon } from 'lucide-react';
+import { SettingsIcon, SearchIcon, Share2Icon, CodeIcon, PlugIcon } from 'lucide-react';
 import PageMeta from '../../components/common/PageMeta';
 import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
@@ -15,16 +15,25 @@ import Checkbox from '../../components/form/input/Checkbox';
 import TextArea from '../../components/form/input/TextArea';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { fetchAPI } from '../../services/api';
+import WordPressIntegrationCard from '../../components/sites/WordPressIntegrationCard';
+import WordPressIntegrationModal, { WordPressIntegrationFormData } from '../../components/sites/WordPressIntegrationModal';
+import { integrationApi, SiteIntegration } from '../../services/integration.api';
 
 export default function SiteSettings() {
   const { siteId } = useParams<{ siteId: string }>();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const toast = useToast();
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [site, setSite] = useState<any>(null);
+  const [wordPressIntegration, setWordPressIntegration] = useState<SiteIntegration | null>(null);
+  const [integrationLoading, setIntegrationLoading] = useState(false);
+  const [isIntegrationModalOpen, setIsIntegrationModalOpen] = useState(false);
 
-  const [activeTab, setActiveTab] = useState<'general' | 'seo' | 'og' | 'schema'>('general');
+  // Check for tab parameter in URL
+  const initialTab = (searchParams.get('tab') as 'general' | 'seo' | 'og' | 'schema' | 'integrations') || 'general';
+  const [activeTab, setActiveTab] = useState<'general' | 'seo' | 'og' | 'schema' | 'integrations'>(initialTab);
   const [formData, setFormData] = useState({
     name: '',
     slug: '',
@@ -51,9 +60,18 @@ export default function SiteSettings() {
   useEffect(() => {
     if (siteId) {
       loadSite();
+      loadIntegrations();
     }
   }, [siteId]);
 
+  useEffect(() => {
+    // Update tab if URL parameter changes
+    const tab = searchParams.get('tab');
+    if (tab && ['general', 'seo', 'og', 'schema', 'integrations'].includes(tab)) {
+      setActiveTab(tab as typeof activeTab);
+    }
+  }, [searchParams]);
+
   const loadSite = async () => {
     try {
       setLoading(true);
@@ -91,6 +109,40 @@ export default function SiteSettings() {
     }
   };
 
+  const loadIntegrations = async () => {
+    if (!siteId) return;
+    try {
+      setIntegrationLoading(true);
+      const integration = await integrationApi.getWordPressIntegration(Number(siteId));
+      setWordPressIntegration(integration);
+    } catch (error: any) {
+      // Integration might not exist, that's okay
+      setWordPressIntegration(null);
+    } finally {
+      setIntegrationLoading(false);
+    }
+  };
+
+  const handleSaveIntegration = async (data: WordPressIntegrationFormData) => {
+    if (!siteId) return;
+    await integrationApi.saveWordPressIntegration(Number(siteId), data);
+    await loadIntegrations();
+  };
+
+  const handleSyncIntegration = async () => {
+    if (!wordPressIntegration || !siteId) return;
+    try {
+      setIntegrationLoading(true);
+      await integrationApi.syncIntegration(wordPressIntegration.id);
+      toast.success('Content synced successfully');
+      await loadIntegrations();
+    } catch (error: any) {
+      toast.error(`Failed to sync: ${error.message}`);
+    } finally {
+      setIntegrationLoading(false);
+    }
+  };
+
   const handleSave = async () => {
     try {
       setSaving(true);
@@ -219,6 +271,18 @@ export default function SiteSettings() {
             <CodeIcon className="w-4 h-4 inline mr-2" />
             Schema.org
           </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab('integrations')}
+            className={`px-4 py-2 font-medium border-b-2 transition-colors ${
+              activeTab === 'integrations'
+                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+            }`}
+          >
+            <PlugIcon className="w-4 h-4 inline mr-2" />
+            Integrations
+          </button>
         </div>
       </div>
 
@@ -475,12 +539,49 @@ export default function SiteSettings() {
           </Card>
         )}
 
-        <div className="flex justify-end">
+        {/* Integrations Tab */}
-          <Button onClick={handleSave} variant="primary" disabled={saving}>
+        {activeTab === 'integrations' && (
-            {saving ? 'Saving...' : 'Save Settings'}
+          <div className="space-y-6">
-          </Button>
+            <WordPressIntegrationCard
-        </div>
+              integration={wordPressIntegration}
+              onConnect={() => setIsIntegrationModalOpen(true)}
+              onManage={() => setIsIntegrationModalOpen(true)}
+              onSync={handleSyncIntegration}
+              loading={integrationLoading}
+            />
+          </div>
+        )}
+
+        {/* Save Button */}
+        {activeTab !== 'integrations' && (
+          <div className="flex justify-end">
+            <Button onClick={handleSave} variant="primary" disabled={saving}>
+              {saving ? 'Saving...' : 'Save Settings'}
+            </Button>
+          </div>
+        )}
       </div>
+
+      {/* WordPress Integration Modal */}
+      {siteId && (
+        <WordPressIntegrationModal
+          isOpen={isIntegrationModalOpen}
+          onClose={() => setIsIntegrationModalOpen(false)}
+          onSubmit={handleSaveIntegration}
+          siteId={Number(siteId)}
+          initialData={
+            wordPressIntegration
+              ? {
+                  url: wordPressIntegration.config_json?.url || '',
+                  username: wordPressIntegration.config_json?.username || '',
+                  app_password: '', // Never show password
+                  is_active: wordPressIntegration.is_active,
+                  sync_enabled: wordPressIntegration.sync_enabled,
+                }
+              : undefined
+          }
+        />
+      )}
     </div>
   );
 }

frontend/src/services/integration.api.ts

@@ -0,0 +1,146 @@
+/**
+ * Integration API Service
+ * Handles all integration-related API calls
+ */
+import { fetchAPI } from './api';
+
+export interface SiteIntegration {
+  id: number;
+  site: number;
+  platform: 'wordpress' | 'shopify' | 'custom';
+  platform_type: 'cms' | 'ecommerce' | 'custom_api';
+  config_json: Record<string, any>;
+  is_active: boolean;
+  sync_enabled: boolean;
+  last_sync_at?: string;
+  sync_status: 'success' | 'failed' | 'pending';
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateIntegrationData {
+  site: number;
+  platform: 'wordpress' | 'shopify' | 'custom';
+  platform_type?: 'cms' | 'ecommerce' | 'custom_api';
+  config_json: Record<string, any>;
+  credentials?: Record<string, string>;
+  is_active?: boolean;
+  sync_enabled?: boolean;
+}
+
+export const integrationApi = {
+  /**
+   * Get all integrations for a site
+   */
+  async getSiteIntegrations(siteId: number): Promise<SiteIntegration[]> {
+    const response = await fetchAPI(`/v1/integration/integrations/?site=${siteId}`);
+    return response?.results || response || [];
+  },
+
+  /**
+   * Get integration by ID
+   */
+  async getIntegration(integrationId: number): Promise<SiteIntegration> {
+    return await fetchAPI(`/v1/integration/integrations/${integrationId}/`);
+  },
+
+  /**
+   * Create new integration
+   */
+  async createIntegration(data: CreateIntegrationData): Promise<SiteIntegration> {
+    return await fetchAPI('/v1/integration/integrations/', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+
+  /**
+   * Update integration
+   */
+  async updateIntegration(
+    integrationId: number,
+    data: Partial<CreateIntegrationData>
+  ): Promise<SiteIntegration> {
+    return await fetchAPI(`/v1/integration/integrations/${integrationId}/`, {
+      method: 'PATCH',
+      body: JSON.stringify(data),
+    });
+  },
+
+  /**
+   * Delete integration
+   */
+  async deleteIntegration(integrationId: number): Promise<void> {
+    await fetchAPI(`/v1/integration/integrations/${integrationId}/`, {
+      method: 'DELETE',
+    });
+  },
+
+  /**
+   * Test integration connection
+   */
+  async testIntegration(integrationId: number): Promise<{ success: boolean; message: string }> {
+    return await fetchAPI(`/v1/integration/integrations/${integrationId}/test/`, {
+      method: 'POST',
+    });
+  },
+
+  /**
+   * Sync content from integration
+   */
+  async syncIntegration(
+    integrationId: number,
+    syncType: 'full' | 'incremental' = 'incremental'
+  ): Promise<{ success: boolean; message: string; synced_count?: number }> {
+    return await fetchAPI(`/v1/integration/integrations/${integrationId}/sync/`, {
+      method: 'POST',
+      body: JSON.stringify({ sync_type: syncType }),
+    });
+  },
+
+  /**
+   * Get WordPress integration for a site
+   */
+  async getWordPressIntegration(siteId: number): Promise<SiteIntegration | null> {
+    const integrations = await this.getSiteIntegrations(siteId);
+    return integrations.find((i) => i.platform === 'wordpress') || null;
+  },
+
+  /**
+   * Create or update WordPress integration
+   */
+  async saveWordPressIntegration(
+    siteId: number,
+    data: {
+      url: string;
+      username: string;
+      app_password: string;
+      is_active?: boolean;
+      sync_enabled?: boolean;
+    }
+  ): Promise<SiteIntegration> {
+    const existing = await this.getWordPressIntegration(siteId);
+
+    const integrationData: CreateIntegrationData = {
+      site: siteId,
+      platform: 'wordpress',
+      platform_type: 'cms',
+      config_json: {
+        url: data.url,
+        username: data.username,
+      },
+      credentials: {
+        app_password: data.app_password,
+      },
+      is_active: data.is_active ?? true,
+      sync_enabled: data.sync_enabled ?? true,
+    };
+
+    if (existing) {
+      return await this.updateIntegration(existing.id, integrationData);
+    } else {
+      return await this.createIntegration(integrationData);
+    }
+  },
+};
+