text udpates ux

This commit is contained in:
IGNY8 VPS (Salman)
2025-12-25 11:51:44 +00:00
parent d21b5b1363
commit e736697d6d
23 changed files with 199 additions and 126 deletions

View File

@@ -37,13 +37,13 @@ import {
} from '../../icons';
const STAGE_CONFIG = [
{ icon: ListIcon, color: 'from-blue-500 to-blue-600', textColor: 'text-blue-600', hoverColor: 'hover:border-blue-500', name: 'Keywords → Clusters' },
{ icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' },
{ icon: CheckCircleIcon, color: 'from-indigo-500 to-indigo-600', textColor: 'text-indigo-600', hoverColor: 'hover:border-indigo-500', name: 'Ideas → Tasks' },
{ icon: PencilIcon, color: 'from-green-500 to-green-600', textColor: 'text-green-600', hoverColor: 'hover:border-green-500', name: 'Tasks → Content' },
{ icon: FileIcon, color: 'from-amber-500 to-amber-600', textColor: 'text-amber-600', hoverColor: 'hover:border-amber-500', name: 'Content → Image Prompts' },
{ icon: FileTextIcon, color: 'from-pink-500 to-pink-600', textColor: 'text-pink-600', hoverColor: 'hover:border-pink-500', name: 'Image Prompts → Images' },
{ icon: PaperPlaneIcon, color: 'from-teal-500 to-teal-600', textColor: 'text-teal-600', hoverColor: 'hover:border-teal-500', name: 'Manual Review Gate' },
{ icon: ListIcon, color: 'from-blue-500 to-blue-600', textColor: 'text-blue-600', hoverColor: 'hover:border-blue-500', name: 'Organize Keywords', description: 'Group related search terms into topic clusters' },
{ icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Create Article Ideas', description: 'Generate article titles and outlines for each cluster' },
{ icon: CheckCircleIcon, color: 'from-indigo-500 to-indigo-600', textColor: 'text-indigo-600', hoverColor: 'hover:border-indigo-500', name: 'Prepare Writing Jobs', description: 'Convert ideas into tasks for the AI writer' },
{ icon: PencilIcon, color: 'from-green-500 to-green-600', textColor: 'text-green-600', hoverColor: 'hover:border-green-500', name: 'Write Articles', description: 'AI generates full, complete articles' },
{ icon: FileIcon, color: 'from-amber-500 to-amber-600', textColor: 'text-amber-600', hoverColor: 'hover:border-amber-500', name: 'Create Image Descriptions', description: 'Generate descriptions for AI to create images' },
{ icon: FileTextIcon, color: 'from-pink-500 to-pink-600', textColor: 'text-pink-600', hoverColor: 'hover:border-pink-500', name: 'Generate Images', description: 'AI creates custom images for your articles' },
{ icon: PaperPlaneIcon, color: 'from-teal-500 to-teal-600', textColor: 'text-teal-600', hoverColor: 'hover:border-teal-500', name: 'Review & Publish ⚠️', description: 'Review articles before they go live (manual approval needed)' },
];
const AutomationPage: React.FC = () => {
@@ -389,7 +389,7 @@ const AutomationPage: React.FC = () => {
<BoltIcon className="text-white size-5" />
</div>
<div>
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Content Automation</h2>
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Automate Everything</h2>
{activeSite && (
<p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
Site: <span className="font-medium text-brand-600 dark:text-brand-400">{activeSite.name}</span>
@@ -411,7 +411,7 @@ const AutomationPage: React.FC = () => {
<div className="text-sm font-semibold text-slate-900 dark:text-white truncate">
{currentRun?.status === 'running' && `Running - Stage ${currentRun.current_stage}/7`}
{currentRun?.status === 'paused' && 'Paused'}
{!currentRun && totalPending > 0 && 'Ready to Run'}
{!currentRun && totalPending > 0 && 'Ready to Go!'}
{!currentRun && totalPending === 0 && 'No Items Pending'}
</div>
<div className="text-xs text-slate-600 dark:text-gray-400 truncate">
@@ -740,6 +740,9 @@ const AutomationPage: React.FC = () => {
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
</div>
<div className="text-xs font-medium text-gray-600 dark:text-gray-400">{stageConfig.name}</div>
{stageConfig.description && (
<div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{stageConfig.description}</div>
)}
</div>
<div className={`size-8 rounded-lg bg-gradient-to-br ${stageConfig.color} flex items-center justify-center shadow-md flex-shrink-0`}>
<StageIcon className="size-4 text-white" />
@@ -835,6 +838,9 @@ const AutomationPage: React.FC = () => {
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
</div>
<div className="text-xs font-medium text-gray-600 dark:text-gray-400">{stageConfig.name}</div>
{stageConfig.description && (
<div className="text-xs text-gray-500 dark:text-gray-500 mt-1">{stageConfig.description}</div>
)}
</div>
<div className={`size-8 rounded-lg bg-gradient-to-br ${stageConfig.color} flex items-center justify-center shadow-md flex-shrink-0`}>
<StageIcon className="size-4 text-white" />