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

stlyes fixes

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-29 19:52:51 +00:00
parent c91175fdcb
commit 4f7ab9c606
155 changed files with 1576 additions and 2489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
frontend/src/pages/Automation/AutomationPage.tsx
View File

@@ -39,13 +39,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: ListIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600', hoverColor: 'hover:border-brand-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: 'Review Gate' },
{ icon: CheckCircleIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Ideas → Tasks' },
{ icon: PencilIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600', hoverColor: 'hover:border-success-500', name: 'Tasks → Content' },
{ icon: FileIcon, color: 'from-warning-500 to-warning-600', textColor: 'text-warning-600', hoverColor: 'hover:border-warning-500', name: 'Content → Image Prompts' },
{ icon: FileTextIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' },
{ icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Review Gate' },
];
const AutomationPage: React.FC = () => {
@@ -386,7 +386,7 @@ const AutomationPage: React.FC = () => {
{visible.map((it, idx) => (
<div key={idx} className="w-1/3 text-center">
<span className={`${it.colorCls ?? ''} block`}>{it.label}</span>
<div className="font-bold text-slate-900 dark:text-white">{Number(it.value) || 0}</div>
<div className="font-bold text-gray-900 dark:text-white">{Number(it.value) || 0}</div>
</div>
))}
</div>
@@ -399,7 +399,7 @@ const AutomationPage: React.FC = () => {
{items.concat(Array(Math.max(0, 3 - items.length)).fill({ label: '', value: '' })).slice(0,3).map((it, idx) => (
<div key={idx} className="flex-1 text-center">
<span className={`${it.colorCls ?? ''} block`}>{it.label}</span>
<div className="font-bold text-slate-900 dark:text-white">{it.value !== undefined && it.value !== null ? Number(it.value) : ''}</div>
<div className="font-bold text-gray-900 dark:text-white">{it.value !== undefined && it.value !== null ? Number(it.value) : ''}</div>
</div>
))}
</div>
@@ -419,19 +419,19 @@ const AutomationPage: React.FC = () => {
{/* Compact Ready-to-Run card (header) - absolutely centered in header */}
<div className="flex justify-center">
<div className={`w-full max-w-sm rounded-lg border-2 p-2 transition-all flex items-center gap-3 shadow-sm
${currentRun?.status === 'running' ? 'border-blue-500 bg-blue-50' : currentRun?.status === 'paused' ? 'border-amber-500 bg-amber-50' : totalPending > 0 ? 'border-success-500 bg-success-50' : 'border-slate-300 bg-slate-50'}`}>
${currentRun?.status === 'running' ? 'border-brand-500 bg-brand-50' : currentRun?.status === 'paused' ? 'border-warning-500 bg-warning-50' : totalPending > 0 ? 'border-success-500 bg-success-50' : 'border-gray-300 bg-gray-50'}`}>
<div className={`size-9 rounded-lg flex items-center justify-center flex-shrink-0
${currentRun?.status === 'running' ? 'bg-gradient-to-br from-blue-500 to-blue-600' : currentRun?.status === 'paused' ? 'bg-gradient-to-br from-amber-500 to-amber-600' : totalPending > 0 ? 'bg-gradient-to-br from-success-500 to-success-600' : 'bg-gradient-to-br from-slate-400 to-slate-500'}`}>
${currentRun?.status === 'running' ? 'bg-gradient-to-br from-brand-500 to-brand-600' : currentRun?.status === 'paused' ? 'bg-gradient-to-br from-warning-500 to-warning-600' : totalPending > 0 ? 'bg-gradient-to-br from-success-500 to-success-600' : 'bg-gradient-to-br from-gray-400 to-gray-500'}`}>
{!currentRun && totalPending > 0 ? <CheckCircleIcon className="size-4 text-white" /> : currentRun?.status === 'running' ? <BoltIcon className="size-4 text-white" /> : currentRun?.status === 'paused' ? <ClockIcon className="size-4 text-white" /> : <BoltIcon className="size-4 text-white" />}
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-semibold text-slate-900 dark:text-white truncate">
<div className="text-sm font-semibold text-gray-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 && 'No Items Pending'}
</div>
<div className="text-xs text-slate-600 dark:text-gray-400 truncate">
<div className="text-xs text-gray-600 dark:text-gray-400 truncate">
{currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items in pipeline` : 'All stages clear')}
</div>
</div>
@@ -525,20 +525,20 @@ const AutomationPage: React.FC = () => {
{/* Metrics Summary Cards */}
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
{/* Keywords */}
<div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-4 border-2 border-blue-200 dark:border-blue-800">
<div className="bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/20 rounded-xl p-4 border-2 border-brand-200 dark:border-brand-800">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
<div className="size-10 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center">
<ListIcon className="size-5 text-white" />
</div>
<div className="text-sm font-bold text-blue-900 dark:text-blue-100">Keywords</div>
<div className="text-sm font-bold text-brand-900 dark:text-brand-100">Keywords</div>
</div>
{(() => {
const res = getStageResult(1);
const total = res?.total ?? pipelineOverview[0]?.counts?.total ?? metrics?.keywords?.total ?? pipelineOverview[0]?.pending ?? 0;
return (
<div className="text-right">
<div className="text-3xl font-bold text-blue-900">{total}</div>
<div className="text-3xl font-bold text-brand-900">{total}</div>
</div>
);
})()}
@@ -549,8 +549,8 @@ const AutomationPage: React.FC = () => {
const mapped = res?.mapped ?? pipelineOverview[0]?.counts?.mapped ?? metrics?.keywords?.mapped ?? 0;
return (
renderMetricRow([
{ label: 'New:', value: newCount, colorCls: 'text-blue-700' },
{ label: 'Mapped:', value: mapped, colorCls: 'text-blue-700' },
{ label: 'New:', value: newCount, colorCls: 'text-brand-700' },
{ label: 'Mapped:', value: mapped, colorCls: 'text-brand-700' },
])
);
})()}
@@ -589,20 +589,20 @@ const AutomationPage: React.FC = () => {
</div>
{/* Ideas */}
<div className="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 rounded-xl p-4 border-2 border-indigo-200 dark:border-indigo-800">
<div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center">
<div className="size-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
<CheckCircleIcon className="size-5 text-white" />
</div>
<div className="text-sm font-bold text-indigo-900 dark:text-indigo-100">Ideas</div>
<div className="text-sm font-bold text-purple-900 dark:text-purple-100">Ideas</div>
</div>
{(() => {
const res = getStageResult(3);
const total = res?.total ?? pipelineOverview[2]?.counts?.total ?? metrics?.ideas?.total ?? pipelineOverview[2]?.pending ?? 0;
return (
<div className="text-right">
<div className="text-3xl font-bold text-indigo-900">{total}</div>
<div className="text-3xl font-bold text-purple-900">{total}</div>
</div>
);
})()}
@@ -614,29 +614,29 @@ const AutomationPage: React.FC = () => {
const completed = res?.completed ?? pipelineOverview[2]?.counts?.completed ?? metrics?.ideas?.completed ?? 0;
return (
renderMetricRow([
{ label: 'New:', value: newCount, colorCls: 'text-indigo-700' },
{ label: 'Queued:', value: queued, colorCls: 'text-indigo-700' },
{ label: 'Completed:', value: completed, colorCls: 'text-indigo-700' },
{ label: 'New:', value: newCount, colorCls: 'text-purple-700' },
{ label: 'Queued:', value: queued, colorCls: 'text-purple-700' },
{ label: 'Completed:', value: completed, colorCls: 'text-purple-700' },
])
);
})()}
</div>
{/* Content */}
<div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-xl p-4 border-2 border-green-200 dark:border-green-800">
<div className="bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/20 dark:to-success-800/20 rounded-xl p-4 border-2 border-success-200 dark:border-success-800">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
<div className="size-10 rounded-lg bg-gradient-to-br from-success-500 to-success-600 flex items-center justify-center">
<FileTextIcon className="size-5 text-white" />
</div>
<div className="text-sm font-bold text-green-900 dark:text-green-100">Content</div>
<div className="text-sm font-bold text-success-900 dark:text-success-100">Content</div>
</div>
{(() => {
const res = getStageResult(4);
const total = res?.total ?? pipelineOverview[3]?.counts?.total ?? metrics?.content?.total ?? pipelineOverview[3]?.pending ?? 0;
return (
<div className="text-right">
<div className="text-3xl font-bold text-green-900">{total}</div>
<div className="text-3xl font-bold text-success-900">{total}</div>
</div>
);
})()}
@@ -648,29 +648,29 @@ const AutomationPage: React.FC = () => {
const publish = res?.published ?? res?.publish ?? pipelineOverview[3]?.counts?.published ?? metrics?.content?.published ?? 0;
return (
renderMetricRow([
{ label: 'Draft:', value: draft, colorCls: 'text-green-700' },
{ label: 'Review:', value: review, colorCls: 'text-green-700' },
{ label: 'Publish:', value: publish, colorCls: 'text-green-700' },
{ label: 'Draft:', value: draft, colorCls: 'text-success-700' },
{ label: 'Review:', value: review, colorCls: 'text-success-700' },
{ label: 'Publish:', value: publish, colorCls: 'text-success-700' },
])
);
})()}
</div>
{/* Images */}
<div className="bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 rounded-xl p-4 border-2 border-pink-200 dark:border-pink-800">
<div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center">
<div className="size-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
<FileIcon className="size-5 text-white" />
</div>
<div className="text-sm font-bold text-pink-900 dark:text-pink-100">Images</div>
<div className="text-sm font-bold text-purple-900 dark:text-purple-100">Images</div>
</div>
{(() => {
const res = getStageResult(6);
const total = res?.total ?? pipelineOverview[5]?.counts?.total ?? metrics?.images?.total ?? pipelineOverview[5]?.pending ?? 0;
return (
<div className="text-right">
<div className="text-3xl font-bold text-pink-900">{total}</div>
<div className="text-3xl font-bold text-purple-900">{total}</div>
</div>
);
})()}
@@ -679,17 +679,17 @@ const AutomationPage: React.FC = () => {
const res = getStageResult(6); // stage 6 is Image Prompts -> Images
if (res && typeof res === 'object') {
const entries = Object.entries(res);
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-pink-700' }));
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-purple-700' }));
return renderMetricRow(items);
}
const counts = pipelineOverview[5]?.counts ?? metrics?.images ?? null;
if (counts && typeof counts === 'object') {
const entries = Object.entries(counts);
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-pink-700' }));
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-purple-700' }));
return renderMetricRow(items);
}
return renderMetricRow([
{ label: 'Pending:', value: pipelineOverview[5]?.pending ?? metrics?.images?.pending ?? 0, colorCls: 'text-pink-700' },
{ label: 'Pending:', value: pipelineOverview[5]?.pending ?? metrics?.images?.pending ?? 0, colorCls: 'text-purple-700' },
]);
})()}
</div>
@@ -772,12 +772,12 @@ const AutomationPage: React.FC = () => {
className={`
relative rounded-xl border-2 p-5 transition-all
${isActive
? 'border-blue-500 bg-blue-50 dark:bg-blue-500/10 shadow-lg'
? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10 shadow-lg'
: isComplete
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
: stage.pending > 0
? `border-slate-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
: 'border-slate-200 bg-slate-50 dark:bg-white/[0.02] dark:border-gray-800'
? `border-gray-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
: 'border-gray-200 bg-gray-50 dark:bg-white/[0.02] dark:border-gray-800'
}
`}
>
@@ -786,7 +786,7 @@ const AutomationPage: React.FC = () => {
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<div className="text-sm font-bold text-gray-900 dark:text-white">Stage {stage.number}</div>
{isActive && <span className="text-xs px-2 py-0.5 bg-blue-500 text-white rounded-full">● Active</span>}
{isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full">● Active</span>}
{isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full">✓</span>}
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
</div>
@@ -804,21 +804,21 @@ const AutomationPage: React.FC = () => {
<div className="space-y-1.5 text-xs mb-3">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Pending:</span>
<span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-slate-400 dark:text-gray-500'}`}>
<span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-gray-400 dark:text-gray-500'}`}>
{pending}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Processed:</span>
<span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-slate-400 dark:text-gray-500'}`}>
<span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
{processed}
</span>
</div>
{/* Credits and Duration - only show during/after run */}
{result && (result.credits_used > 0 || result.time_elapsed) && (
<div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700 text-[10px]">
<div className="flex justify-between pt-1.5 border-t border-gray-200 dark:border-gray-700 text-[10px]">
{result.credits_used > 0 && (
<span className="text-amber-600 dark:text-amber-400">{result.credits_used} credits</span>
<span className="text-warning-600 dark:text-warning-400">{result.credits_used} credits</span>
)}
{result.time_elapsed && (
<span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
@@ -829,7 +829,7 @@ const AutomationPage: React.FC = () => {
{/* Progress Bar */}
{(isActive || isComplete || processed > 0) && (
<div className="mt-3 pt-3 border-t border-slate-200 dark:border-gray-700">
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
<div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1.5">
<span>Progress</span>
<span>{isComplete ? '100' : progressPercent}%</span>
@@ -885,12 +885,12 @@ const AutomationPage: React.FC = () => {
className={`
relative rounded-xl border-2 p-5 transition-all
${isActive
? 'border-blue-500 bg-blue-50 dark:bg-blue-500/10 shadow-lg'
? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10 shadow-lg'
: isComplete
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
: stage.pending > 0
? `border-slate-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
: 'border-slate-200 bg-slate-50 dark:bg-white/[0.02] dark:border-gray-800'
? `border-gray-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
: 'border-gray-200 bg-gray-50 dark:bg-white/[0.02] dark:border-gray-800'
}
`}
>
@@ -898,7 +898,7 @@ const AutomationPage: React.FC = () => {
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<div className="text-sm font-bold text-gray-900 dark:text-white">Stage {stage.number}</div>
{isActive && <span className="text-xs px-2 py-0.5 bg-blue-500 text-white rounded-full">● Active</span>}
{isActive && <span className="text-xs px-2 py-0.5 bg-brand-500 text-white rounded-full">● Active</span>}
{isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full">✓</span>}
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
</div>
@@ -916,21 +916,21 @@ const AutomationPage: React.FC = () => {
<div className="space-y-1.5 text-xs mb-3">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Pending:</span>
<span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-slate-400 dark:text-gray-500'}`}>
<span className={`font-bold ${pending > 0 ? stageConfig.textColor : 'text-gray-400 dark:text-gray-500'}`}>
{pending}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Processed:</span>
<span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-slate-400 dark:text-gray-500'}`}>
<span className={`font-bold ${processed > 0 ? 'text-success-600 dark:text-success-400' : 'text-gray-400 dark:text-gray-500'}`}>
{processed}
</span>
</div>
{/* Credits and Duration - only show during/after run */}
{result && (result.credits_used > 0 || result.time_elapsed) && (
<div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700 text-[10px]">
<div className="flex justify-between pt-1.5 border-t border-gray-200 dark:border-gray-700 text-[10px]">
{result.credits_used > 0 && (
<span className="text-amber-600 dark:text-amber-400">{result.credits_used} credits</span>
<span className="text-warning-600 dark:text-warning-400">{result.credits_used} credits</span>
)}
{result.time_elapsed && (
<span className="text-gray-500 dark:text-gray-400">{result.time_elapsed}</span>
@@ -940,7 +940,7 @@ const AutomationPage: React.FC = () => {
</div>
{(isActive || isComplete || processed > 0) && (
<div className="mt-3 pt-3 border-t border-slate-200 dark:border-gray-700">
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
<div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1.5">
<span>Progress</span>
<span>{isComplete ? '100' : progressPercent}%</span>
@@ -968,12 +968,12 @@ const AutomationPage: React.FC = () => {
className={`
relative rounded-xl border-3 p-5 transition-all
${isActive
? 'border-amber-500 bg-amber-50 dark:bg-amber-500/10 shadow-lg'
? 'border-warning-500 bg-warning-50 dark:bg-warning-500/10 shadow-lg'
: isComplete
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
: stage7.pending > 0
? 'border-amber-300 bg-amber-50 dark:bg-amber-900/20 dark:border-amber-700'
: 'border-slate-200 bg-slate-50 dark:bg-white/[0.02] dark:border-gray-800'
? 'border-warning-300 bg-warning-50 dark:bg-warning-900/20 dark:border-warning-700'
: 'border-gray-200 bg-gray-50 dark:bg-white/[0.02] dark:border-gray-800'
}
`}
>
@@ -981,37 +981,37 @@ const AutomationPage: React.FC = () => {
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<div className="text-sm font-bold text-gray-900 dark:text-white">Stage 7</div>
<span className="text-xs px-2 py-0.5 bg-amber-500 text-white rounded-full">🚫 Stop</span>
<span className="text-xs px-2 py-0.5 bg-warning-500 text-white rounded-full">🚫 Stop</span>
</div>
<div className="text-xs font-medium text-amber-700 dark:text-amber-300">Manual Review Gate</div>
<div className="text-xs font-medium text-warning-700 dark:text-warning-300">Manual Review Gate</div>
</div>
<div className="size-8 rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center shadow-md">
<div className="size-8 rounded-lg bg-gradient-to-br from-warning-500 to-warning-600 flex items-center justify-center shadow-md">
<PaperPlaneIcon className="size-4 text-white" />
</div>
</div>
{/* Simplified: Just show the count, no buttons */}
<div className="text-center py-4">
<div className="text-3xl font-bold text-amber-600 dark:text-amber-400">{stage7.pending}</div>
<div className="text-xs text-amber-700 dark:text-amber-300 mt-1">ready for review</div>
<div className="text-3xl font-bold text-warning-600 dark:text-warning-400">{stage7.pending}</div>
<div className="text-xs text-warning-700 dark:text-warning-300 mt-1">ready for review</div>
</div>
</div>
);
})()}
{/* Approved summary card (placed after Stage 7 in the same row) */}
<div className="rounded-xl p-5 border-2 border-green-200 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/10 dark:to-green-800/10 flex flex-col h-full">
<div className="rounded-xl p-5 border-2 border-success-200 bg-gradient-to-br from-success-50 to-success-100 dark:from-success-900/10 dark:to-success-800/10 flex flex-col h-full">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
<div className="size-10 rounded-lg bg-gradient-to-br from-success-500 to-success-600 flex items-center justify-center">
<FileTextIcon className="size-5 text-white" />
</div>
<div className="text-sm font-bold text-green-900 dark:text-green-100">Approved</div>
<div className="text-sm font-bold text-success-900 dark:text-success-100">Approved</div>
</div>
<div className="text-right">&nbsp;</div>
</div>
<div className="flex-1 flex items-center justify-center">
<div className="text-4xl md:text-5xl font-extrabold text-green-800 dark:text-green-300">{metrics?.content?.published ?? pipelineOverview[3]?.counts?.published ?? getStageResult(4)?.published ?? 0}</div>
<div className="text-4xl md:text-5xl font-extrabold text-success-800 dark:text-success-300">{metrics?.content?.published ?? pipelineOverview[3]?.counts?.published ?? getStageResult(4)?.published ?? 0}</div>
</div>
</div>

14
frontend/src/pages/Automation/AutomationPage_old.tsx
View File

@@ -221,7 +221,7 @@ const AutomationPage: React.FC = () => {
<div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
<div className="font-semibold mt-1">
{config.is_enabled ? (
<span className="text-green-600 dark:text-green-400">● Enabled</span>
<span className="text-success-600 dark:text-success-400">● Enabled</span>
) : (
<span className="text-gray-600 dark:text-gray-400">○ Disabled</span>
)}
@@ -246,7 +246,7 @@ const AutomationPage: React.FC = () => {
<div className="font-semibold mt-1">
{estimate?.estimated_credits || 0} credits
{estimate && !estimate.sufficient && (
<span className="text-red-600 dark:text-red-400 ml-2">(Insufficient)</span>
<span className="text-error-600 dark:text-error-400 ml-2">(Insufficient)</span>
)}
</div>
</div>
@@ -301,7 +301,7 @@ const AutomationPage: React.FC = () => {
<div className="text-sm text-gray-600 dark:text-gray-400">
{currentRun ? (
<>
<span className="font-semibold text-blue-600 dark:text-blue-400">● Live Run Active</span> - Stage {currentRun.current_stage} of 7
<span className="font-semibold text-brand-600 dark:text-brand-400">● Live Run Active</span> - Stage {currentRun.current_stage} of 7
</>
) : (
<>
@@ -339,10 +339,10 @@ const AutomationPage: React.FC = () => {
<div>
<div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
<div className="font-semibold mt-1 capitalize">
{currentRun.status === 'running' && <span className="text-blue-600 dark:text-blue-400">● {currentRun.status}</span>}
{currentRun.status === 'paused' && <span className="text-yellow-600 dark:text-yellow-400">⏸ {currentRun.status}</span>}
{currentRun.status === 'completed' && <span className="text-green-600 dark:text-green-400">✓ {currentRun.status}</span>}
{currentRun.status === 'failed' && <span className="text-red-600 dark:text-red-400">✗ {currentRun.status}</span>}
{currentRun.status === 'running' && <span className="text-brand-600 dark:text-brand-400">● {currentRun.status}</span>}
{currentRun.status === 'paused' && <span className="text-warning-600 dark:text-warning-400">⏸ {currentRun.status}</span>}
{currentRun.status === 'completed' && <span className="text-success-600 dark:text-success-400">✓ {currentRun.status}</span>}
{currentRun.status === 'failed' && <span className="text-error-600 dark:text-error-400">✗ {currentRun.status}</span>}
</div>
</div>
<div>