salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GLobal Styling part 1

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/pages/Settings/ImportExport.tsx
View File

@@ -1,7 +1,7 @@
import PageMeta from "../../components/common/PageMeta";
import ComponentCard from "../../components/common/ComponentCard";
import { Card } from "../../components/ui/card";
import { Download, Upload, Database, FileArchive, CheckCircle } from 'lucide-react';
import { DownloadIcon, UploadIcon, DatabaseIcon, FileArchiveIcon, CheckCircleIcon } from '../../icons';
export default function ImportExport() {
return (
@@ -12,7 +12,7 @@ export default function ImportExport() {
<div className="text-center py-8 max-w-3xl mx-auto">
<div className="mb-6 flex justify-center">
<div className="p-4 bg-brand-100 dark:bg-brand-900/30 rounded-full">
<Database className="w-12 h-12 text-brand-600 dark:text-brand-400" />
<DatabaseIcon className="w-12 h-12 text-brand-600 dark:text-brand-400" />
</div>
</div>
@@ -30,31 +30,31 @@ export default function ImportExport() {
</h2>
<div className="space-y-3 text-left">
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Export your keywords as a file</strong> (backup or share)
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Export all your articles</strong> in different formats
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Import keywords from other sources</strong>
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Backup and restore</strong> your entire account
</div>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<CheckCircleIcon className="w-5 h-5 text-success-600 dark:text-success-400 flex-shrink-0 mt-0.5" />
<div className="text-gray-700 dark:text-gray-300">
<strong>Download your settings</strong> and configurations
</div>

8
frontend/src/pages/Settings/Sites.tsx
View File

@@ -22,10 +22,10 @@ import Badge from '../../components/ui/badge/Badge';
// Site Icon SVG - Globe
const SiteIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M2 12h20" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" className="text-brand-500">
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M2 12h20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);

60
frontend/src/pages/Settings/WordPressIntegrationDebug.tsx
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>
)}