diff --git a/frontend/src/components/Automation/CurrentProcessingCard.tsx b/frontend/src/components/Automation/CurrentProcessingCard.tsx index baf2b4a6..70f26a97 100644 --- a/frontend/src/components/Automation/CurrentProcessingCard.tsx +++ b/frontend/src/components/Automation/CurrentProcessingCard.tsx @@ -322,15 +322,16 @@ const CurrentProcessingCard: React.FC = ({ const percentage = computedTotal > 0 ? Math.round((computedProcessed / computedTotal) * 100) : 0; const isPaused = currentRun.status === 'paused'; - // Choose stage accent color (simple map matching AutomationPage STAGE_CONFIG) + // Choose stage accent color (matching new module color scheme) + // PLANNER: Blue → Pink → Amber | WRITER: Navy → Blue → Pink → Green const stageColors = [ - 'from-brand-500 to-brand-600', - 'from-purple-500 to-purple-600', - 'from-purple-500 to-purple-600', - 'from-success-500 to-success-600', - 'from-warning-500 to-warning-600', - 'from-purple-500 to-purple-600', - 'from-success-500 to-success-600', + 'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (blue) + 'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas (pink) + 'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber) + 'from-gray-700 to-gray-800', // Stage 4: Tasks → Content (navy) + 'from-brand-500 to-brand-600', // Stage 5: Content → Image Prompts (blue) + 'from-purple-500 to-purple-600', // Stage 6: Image Prompts → Images (pink) + 'from-success-500 to-success-600', // Stage 7: Review → Published (green) ]; const stageColorClass = stageColors[(currentRun.current_stage || 1) - 1] || 'from-brand-500 to-brand-600'; diff --git a/frontend/src/components/Automation/GlobalProgressBar.tsx b/frontend/src/components/Automation/GlobalProgressBar.tsx index c69aaa2d..c3c5f627 100644 --- a/frontend/src/components/Automation/GlobalProgressBar.tsx +++ b/frontend/src/components/Automation/GlobalProgressBar.tsx @@ -7,14 +7,23 @@ import React from 'react'; import { AutomationRun, InitialSnapshot, StageProgress, GlobalProgress } from '../../services/automationService'; import { BoltIcon, CheckCircleIcon, PauseIcon } from '../../icons'; -// Stage colors matching AutomationPage STAGE_CONFIG exactly +// Stage colors for visual distinction matching new module color scheme: +// PLANNER PIPELINE (Blue → Pink → Amber): +// - Keywords→Clusters: brand/blue +// - Clusters→Ideas: purple/pink +// - Ideas→Tasks: warning/amber +// WRITER PIPELINE (Navy → Blue → Pink → Green): +// - Tasks→Content: gray-dark (navy) - entry point to Writer +// - Content→Prompts: brand/blue +// - Prompts→Images: purple/pink +// - Images→Publish: success/green const STAGE_COLORS = [ - 'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (brand/teal) - 'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas (purple) + 'from-brand-500 to-brand-600', // Stage 1: Keywords → Clusters (brand/blue) + 'from-purple-500 to-purple-600', // Stage 2: Clusters → Ideas (purple/pink) 'from-warning-500 to-warning-600', // Stage 3: Ideas → Tasks (amber) - 'from-brand-500 to-brand-600', // Stage 4: Tasks → Content (brand/teal) - 'from-success-500 to-success-600', // Stage 5: Content → Image Prompts (green) - 'from-purple-500 to-purple-600', // Stage 6: Image Prompts → Images (purple) + 'from-gray-700 to-gray-800', // Stage 4: Tasks → Content (navy) + 'from-brand-500 to-brand-600', // Stage 5: Content → Image Prompts (brand/blue) + 'from-purple-500 to-purple-600', // Stage 6: Image Prompts → Images (purple/pink) 'from-success-500 to-success-600', // Stage 7: Review Gate (green) ]; diff --git a/frontend/src/components/dashboard/AIOperationsWidget.tsx b/frontend/src/components/dashboard/AIOperationsWidget.tsx index c4a1611c..4ce16b20 100644 --- a/frontend/src/components/dashboard/AIOperationsWidget.tsx +++ b/frontend/src/components/dashboard/AIOperationsWidget.tsx @@ -37,16 +37,16 @@ interface AIOperationsWidgetProps { } /** - * Operation config with solid colored backgrounds matching Automation/Usage pages: - * - Clustering: purple - * - Ideas: warning/amber - * - Content: success/green - * - Images: purple + * Operation config with solid colored backgrounds for visual distinction: + * - Clustering: purple/pink (matches Clusters module) + * - Ideas: warning/amber (matches Ideas module) + * - Content: brand/primary (blue) - matches Writer content module + * - Images: purple/pink (matches Images module) */ const operationConfig: Record = { clustering: { label: 'Clustering', icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' }, ideas: { label: 'Ideas', icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' }, - content: { label: 'Content', icon: FileTextIcon, gradient: 'from-success-500 to-success-600' }, + content: { label: 'Content', icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' }, images: { label: 'Images', icon: FileIcon, gradient: 'from-purple-500 to-purple-600' }, }; diff --git a/frontend/src/components/dashboard/QuickActionsWidget.tsx b/frontend/src/components/dashboard/QuickActionsWidget.tsx index 0a476d97..ecfc0f50 100644 --- a/frontend/src/components/dashboard/QuickActionsWidget.tsx +++ b/frontend/src/components/dashboard/QuickActionsWidget.tsx @@ -14,13 +14,15 @@ interface QuickActionsWidgetProps { } /** - * Workflow steps with solid colored backgrounds matching Automation/Usage pages: + * Workflow steps with solid colored backgrounds for visual distinction: + * PLANNER PIPELINE (Blue → Pink → Amber): * - Keywords: brand/primary (blue) - * - Clusters: purple + * - Clusters: purple/pink * - Ideas: warning/amber - * - Tasks: brand/primary (blue) - * - Content: success/green - * - Images: purple + * WRITER PIPELINE (Navy → Blue → Pink → Amber → Green): + * - Tasks: gray-dark (navy) - entry point to Writer + * - Content: brand/primary (blue) + * - Images: purple/pink * - Review: warning/amber * - Publish: success/green */ @@ -58,8 +60,8 @@ const workflowSteps = [ description: 'Convert approved ideas into content tasks', href: '/writer/tasks', actionLabel: 'Tasks', - gradient: 'from-brand-500 to-brand-600', - buttonTone: 'brand' as const, + gradient: 'from-gray-700 to-gray-800', + buttonTone: 'neutral' as const, }, { num: 5, @@ -67,8 +69,8 @@ const workflowSteps = [ description: 'AI writes SEO-optimized articles from tasks', href: '/writer/content', actionLabel: 'Write', - gradient: 'from-success-500 to-success-600', - buttonTone: 'success' as const, + gradient: 'from-brand-500 to-brand-600', + buttonTone: 'brand' as const, }, { num: 6, diff --git a/frontend/src/components/dashboard/RecentActivityWidget.tsx b/frontend/src/components/dashboard/RecentActivityWidget.tsx index cf9535ad..6acdf000 100644 --- a/frontend/src/components/dashboard/RecentActivityWidget.tsx +++ b/frontend/src/components/dashboard/RecentActivityWidget.tsx @@ -30,10 +30,21 @@ interface RecentActivityWidgetProps { loading?: boolean; } +/** + * Activity config with solid colored backgrounds for visual distinction: + * - clustering: purple/pink (matches Clusters module) + * - ideas: warning/amber (matches Ideas module) + * - content: brand/primary (blue) - matches Writer content module + * - images: purple/pink (matches Images module) + * - published: success/green (matches Published module) + * - keywords: brand/primary (blue) - matches Keywords module + * - error: error/red + * - sync: success/green + */ const activityConfig: Record = { clustering: { icon: GroupIcon, gradient: 'from-purple-500 to-purple-600' }, ideas: { icon: BoltIcon, gradient: 'from-warning-500 to-warning-600' }, - content: { icon: FileTextIcon, gradient: 'from-success-500 to-success-600' }, + content: { icon: FileTextIcon, gradient: 'from-brand-500 to-brand-600' }, images: { icon: FileIcon, gradient: 'from-purple-500 to-purple-600' }, published: { icon: PaperPlaneIcon, gradient: 'from-success-500 to-success-600' }, keywords: { icon: ListIcon, gradient: 'from-brand-500 to-brand-600' }, diff --git a/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx b/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx index 91aabd8e..f251a31a 100644 --- a/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx +++ b/frontend/src/components/dashboard/WorkflowPipelineWidget.tsx @@ -34,22 +34,24 @@ interface WorkflowPipelineWidgetProps { } /** - * Pipeline stages with solid colored backgrounds matching Automation/Usage pages: - * - Sites: brand/primary (blue) + * Pipeline stages with solid colored backgrounds for visual distinction: + * PLANNER PIPELINE (Blue → Pink → Amber): + * - Sites: transparent bg with colored icon (starting point) * - Keywords: brand/primary (blue) - * - Clusters: purple + * - Clusters: purple/pink * - Ideas: warning/amber - * - Tasks: brand/primary (blue) - * - Drafts/Content: success/green + * WRITER PIPELINE (Navy → Blue → Green): + * - Tasks: gray-dark (navy) - entry point to Writer + * - Drafts/Content: brand/primary (blue) * - Published: success/green */ const stages = [ - { key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', gradient: 'from-brand-500 to-brand-600' }, + { key: 'sites', label: 'Sites', icon: GridIcon, href: '/sites', gradient: '', transparent: true }, { key: 'keywords', label: 'Keywords', icon: ListIcon, href: '/planner/keywords', gradient: 'from-brand-500 to-brand-600' }, { key: 'clusters', label: 'Clusters', icon: GroupIcon, href: '/planner/clusters', gradient: 'from-purple-500 to-purple-600' }, { key: 'ideas', label: 'Ideas', icon: BoltIcon, href: '/planner/ideas', gradient: 'from-warning-500 to-warning-600' }, - { key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', gradient: 'from-brand-500 to-brand-600' }, - { key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', gradient: 'from-success-500 to-success-600' }, + { key: 'tasks', label: 'Tasks', icon: CheckCircleIcon, href: '/writer/tasks', gradient: 'from-gray-700 to-gray-800' }, + { key: 'drafts', label: 'Drafts', icon: FileTextIcon, href: '/writer/content', gradient: 'from-brand-500 to-brand-600' }, { key: 'published', label: 'Published', icon: PaperPlaneIcon, href: '/writer/published', gradient: 'from-success-500 to-success-600' }, ] as const; @@ -82,6 +84,7 @@ export default function WorkflowPipelineWidget({ data, loading }: WorkflowPipeli {stages.map((stage, index) => { const Icon = stage.icon; const count = data[stage.key as keyof PipelineData]; + const isTransparent = 'transparent' in stage && stage.transparent; return (
@@ -89,8 +92,12 @@ export default function WorkflowPipelineWidget({ data, loading }: WorkflowPipeli to={stage.href} className="flex flex-col items-center group min-w-[60px]" > -
- +
+
{stage.label} diff --git a/frontend/src/pages/Automation/AutomationPage.tsx b/frontend/src/pages/Automation/AutomationPage.tsx index af048152..ba662cf6 100644 --- a/frontend/src/pages/Automation/AutomationPage.tsx +++ b/frontend/src/pages/Automation/AutomationPage.tsx @@ -39,21 +39,23 @@ import { } from '../../icons'; /** - * Pipeline stage configuration with consistent design system colors: - * - Keywords → Clusters: brand/primary (keywords side) to purple (clusters side) - * - Clusters → Ideas: purple to warning/amber - * - Ideas → Tasks: warning/amber to brand/primary - * - Tasks → Content: brand/primary to success/green - * - Content → Image Prompts: success to purple - * - Image Prompts → Images: purple - * - Review Gate: warning/amber + * Stage config with colors for visual distinction matching module color scheme: + * PLANNER PIPELINE (Blue → Pink → Amber): + * - Keywords→Clusters: brand/blue + * - Clusters→Ideas: purple/pink + * - Ideas→Tasks: warning/amber + * WRITER PIPELINE (Navy → Blue → Pink → Green): + * - Tasks→Content: gray-dark (navy) - entry point to Writer + * - Content→Prompts: brand/blue + * - Prompts→Images: purple/pink + * - Images→Publish: success/green */ const STAGE_CONFIG = [ { icon: ListIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Keywords → Clusters' }, { icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' }, { icon: BoltIcon, color: 'from-warning-500 to-warning-600', textColor: 'text-warning-600 dark:text-warning-400', bgColor: 'bg-warning-100 dark:bg-warning-900/30', hoverColor: 'hover:border-warning-500', name: 'Ideas → Tasks' }, - { icon: CheckCircleIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Tasks → Content' }, - { icon: PencilIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'Content → Image Prompts' }, + { icon: CheckCircleIcon, color: 'from-gray-700 to-gray-800', textColor: 'text-gray-700 dark:text-gray-300', bgColor: 'bg-gray-100 dark:bg-gray-800/30', hoverColor: 'hover:border-gray-500', name: 'Tasks → Content' }, + { icon: PencilIcon, color: 'from-brand-500 to-brand-600', textColor: 'text-brand-600 dark:text-brand-400', bgColor: 'bg-brand-100 dark:bg-brand-900/30', hoverColor: 'hover:border-brand-500', name: 'Content → Image Prompts' }, { icon: FileIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30', hoverColor: 'hover:border-purple-500', name: 'Image Prompts → Images' }, { icon: PaperPlaneIcon, color: 'from-success-500 to-success-600', textColor: 'text-success-600 dark:text-success-400', bgColor: 'bg-success-100 dark:bg-success-900/30', hoverColor: 'hover:border-success-500', name: 'Review → Published' }, ];