GLobal Styling part 1

This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 14:54:27 +00:00
parent 0e57c50e56
commit e96069775c
60 changed files with 812 additions and 1712 deletions

View File

@@ -1,16 +1,16 @@
import React, { useState, useEffect, useCallback } from 'react';
import {
CheckCircle,
XCircle,
AlertTriangle,
Loader2,
Activity,
Clock,
Globe,
RefreshCw,
TestTube,
Wrench
} from 'lucide-react';
import {
CheckCircleIcon,
XCircleIcon,
AlertTriangleIcon,
Loader2Icon,
ActivityIcon,
ClockIcon,
GlobeIcon,
RefreshCwIcon,
TestTubeIcon,
SettingsIcon as WrenchIcon
} from '../../icons';
import { useSiteStore } from '../../store/siteStore';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { API_BASE_URL, fetchAPI } from '../../services/api';
@@ -343,7 +343,7 @@ export default function WordPressIntegrationDebug() {
if (initializing) {
return (
<div className="p-8 text-center">
<Loader2 className="h-8 w-8 animate-spin mx-auto text-brand-600 dark:text-brand-400" />
<Loader2Icon className="h-8 w-8 animate-spin mx-auto text-brand-600 dark:text-brand-400" />
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Loading WordPress integration...</p>
</div>
);
@@ -354,7 +354,7 @@ export default function WordPressIntegrationDebug() {
return (
<div className="p-8">
<div className="bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-900/50 rounded-lg p-6 text-center">
<AlertTriangle className="h-12 w-12 text-warning-600 dark:text-warning-400 mx-auto mb-4" />
<AlertTriangleIcon className="h-12 w-12 text-warning-600 dark:text-warning-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
No WordPress Integration Found
</h3>
@@ -423,13 +423,13 @@ export default function WordPressIntegrationDebug() {
{/* No WordPress Integration Found */}
{initializing ? (
<div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 text-center">
<Loader2 className="h-8 w-8 animate-spin mx-auto text-gray-400 mb-2" />
<Loader2Icon className="h-8 w-8 animate-spin mx-auto text-gray-400 mb-2" />
<p className="text-gray-600 dark:text-gray-400">Checking for WordPress integration...</p>
</div>
) : !integrationId && activeSite ? (
<div className="bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-900/50 rounded-lg p-6">
<div className="flex items-start space-x-3">
<AlertTriangle className="h-8 w-8 text-warning-500 mt-0.5" />
<AlertTriangleIcon className="h-8 w-8 text-warning-500 mt-0.5" />
<div>
<p className="text-lg font-semibold text-warning-800 dark:text-warning-200">No WordPress Integration Found</p>
<p className="text-sm text-warning-600 dark:text-warning-300 mt-2">
@@ -444,7 +444,7 @@ export default function WordPressIntegrationDebug() {
) : !activeSite ? (
<div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
<div className="text-center py-12">
<Globe className="h-12 w-12 mx-auto text-gray-400 mb-4" />
<GlobeIcon className="h-12 w-12 mx-auto text-gray-400 mb-4" />
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No Site Selected</h3>
<p className="text-gray-500 dark:text-gray-400">
Please select a site to view WordPress integration debug data.
@@ -463,7 +463,7 @@ export default function WordPressIntegrationDebug() {
disabled={loading}
className="inline-flex items-center px-3 py-1 text-xs bg-brand-100 hover:bg-brand-200 text-brand-700 rounded-md disabled:opacity-50"
>
<TestTube className="h-3 w-3 mr-1" />
<TestTubeIcon className="h-3 w-3 mr-1" />
Test Connection
</button>
<button
@@ -471,7 +471,7 @@ export default function WordPressIntegrationDebug() {
disabled={loading}
className="inline-flex items-center px-3 py-1 text-xs bg-warning-100 hover:bg-warning-200 text-warning-700 rounded-md disabled:opacity-50"
>
<RefreshCw className="h-3 w-3 mr-1" />
<RefreshCwIcon className="h-3 w-3 mr-1" />
Re-sync Metadata
</button>
<button
@@ -479,7 +479,7 @@ export default function WordPressIntegrationDebug() {
disabled={loading}
className="inline-flex items-center px-3 py-1 text-xs bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-md disabled:opacity-50"
>
<Wrench className="h-3 w-3 mr-1" />
<SettingsIcon className="h-3 w-3 mr-1" />
Validate Content
</button>
</div>
@@ -491,9 +491,9 @@ export default function WordPressIntegrationDebug() {
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">API Connection</span>
{integrationHealth.api_status === 'healthy' ? (
<CheckCircle className="h-4 w-4 text-success-500" />
<CheckCircleIcon className="h-4 w-4 text-success-500" />
) : (
<XCircle className="h-4 w-4 text-error-500" />
<XCircleIcon className="h-4 w-4 text-error-500" />
)}
</div>
<p className="text-xs text-gray-600 dark:text-gray-400">{integrationHealth.api_message}</p>
@@ -506,9 +506,9 @@ export default function WordPressIntegrationDebug() {
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">Plugin Status</span>
{integrationHealth.plugin_active ? (
<CheckCircle className="h-4 w-4 text-success-500" />
<CheckCircleIcon className="h-4 w-4 text-success-500" />
) : (
<XCircle className="h-4 w-4 text-error-500" />
<XCircleIcon className="h-4 w-4 text-error-500" />
)}
</div>
<p className="text-xs text-gray-600 dark:text-gray-400">
@@ -523,9 +523,9 @@ export default function WordPressIntegrationDebug() {
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium">Sync Status</span>
{integrationHealth.sync_healthy ? (
<CheckCircle className="h-4 w-4 text-success-500" />
<CheckCircleIcon className="h-4 w-4 text-success-500" />
) : (
<AlertTriangle className="h-4 w-4 text-warning-500" />
<AlertTriangleIcon className="h-4 w-4 text-warning-500" />
)}
</div>
<p className="text-xs text-gray-600 dark:text-gray-400">
@@ -539,7 +539,7 @@ export default function WordPressIntegrationDebug() {
</div>
) : (
<div className="text-center py-4 text-gray-500">
<Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />
<Loader2Icon className="h-5 w-5 animate-spin mx-auto mb-2" />
Loading WordPress integration health...
</div>
)}
@@ -587,7 +587,7 @@ export default function WordPressIntegrationDebug() {
</div>
) : (
<div className="text-center py-8 text-gray-500">
<Clock className="h-8 w-8 mx-auto mb-2 opacity-50" />
<ClockIcon className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p>No WordPress sync events yet. Actions will appear here in real-time.</p>
<p className="text-xs mt-2">Content publishing, metadata sync, and webhook calls will be logged here.</p>
</div>
@@ -631,10 +631,10 @@ export default function WordPressIntegrationDebug() {
</td>
<td className="px-6 py-4 whitespace-nowrap">
{validation.matches ? (
<CheckCircle className="h-4 w-4 text-success-500" />
<CheckCircleIcon className="h-4 w-4 text-success-500" />
) : (
<div className="flex items-center space-x-1">
<XCircle className="h-4 w-4 text-error-500" />
<XCircleIcon className="h-4 w-4 text-error-500" />
{validation.error && (
<span className="text-xs text-error-600">{validation.error}</span>
)}