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.
2025-11-18 04:28:51 +00:00
parent 856b40ed0b
commit 155a73d928
5 changed files with 576 additions and 8 deletions
--- a/frontend/src/components/sites/WordPressIntegrationCard.tsx
+++ b/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>
+  );
+}
+