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>
+  );
+}
+