many changes for modules widgets and colors and styling

frontend/src/pages/Planner/Clusters.tsx

@@ -29,7 +29,7 @@ import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import PageHeader from '../../components/common/PageHeader';
-import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
+import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
 
 export default function Clusters() {
   const toast = useToast();
@@ -560,8 +560,8 @@ export default function Clusters() {
         }}
       />
 
-      {/* Three Widget Footer - Section 3 Layout */}
-      <ThreeWidgetFooter
+      {/* Three Widget Footer - Section 3 Layout with Standardized Workflow Widget */}
+      <StandardThreeWidgetFooter
         submoduleColor="green"
         pageProgress={{
           title: 'Page Progress',
@@ -580,62 +580,15 @@ export default function Clusters() {
           hint: totalReady > 0
             ? `${totalReady} clusters ready for idea generation`
             : 'All clusters have ideas!',
+          statusInsight: totalReady > 0
+            ? `Select clusters and generate ideas to create content topics.`
+            : totalWithIdeas > 0
+              ? `Ideas generated. Go to Ideas page to queue them for writing.`
+              : `No clusters yet. Run clustering on Keywords page first.`,
         }}
-        moduleStats={{
-          title: 'Planner Module',
-          pipeline: [
-            {
-              fromLabel: 'Keywords',
-              fromValue: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0),
-              fromHref: '/planner/keywords',
-              actionLabel: 'Auto Cluster',
-              toLabel: 'Clusters',
-              toValue: totalCount,
-              progress: 100,
-              color: 'blue',
-            },
-            {
-              fromLabel: 'Clusters',
-              fromValue: totalCount,
-              actionLabel: 'Generate Ideas',
-              toLabel: 'Ideas',
-              toValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
-              toHref: '/planner/ideas',
-              progress: totalCount > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / totalCount) * 100) : 0,
-              color: 'green',
-            },
-            {
-              fromLabel: 'Ideas',
-              fromValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
-              fromHref: '/planner/ideas',
-              actionLabel: 'Create Tasks',
-              toLabel: 'Tasks',
-              toValue: 0,
-              toHref: '/writer/tasks',
-              progress: 0,
-              color: 'amber',
-            },
-          ],
-          links: [
-            { label: 'Keywords', href: '/planner/keywords' },
-            { label: 'Clusters', href: '/planner/clusters' },
-            { label: 'Ideas', href: '/planner/ideas' },
-          ],
-        }}
-        completion={{
-          title: 'Workflow Completion',
-          plannerItems: [
-            { label: 'Keywords Clustered', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
-            { label: 'Clusters Created', value: totalCount, color: 'green' },
-            { label: 'Ideas Generated', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
-          ],
-          writerItems: [
-            { label: 'Content Generated', value: 0, color: 'blue' },
-            { label: 'Images Created', value: totalImagesCount, color: 'purple' },
-            { label: 'Published', value: 0, color: 'green' },
-          ],
-          analyticsHref: '/account/usage',
-        }}
+        module="planner"
+        showCredits={true}
+        analyticsHref="/account/usage"
       />
 
       {/* Progress Modal for AI Functions */}

frontend/src/pages/Planner/Ideas.tsx

@@ -30,7 +30,7 @@ import { createIdeasPageConfig } from '../../config/pages/ideas.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
-import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
+import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
 
 export default function Ideas() {
   const toast = useToast();
@@ -483,8 +483,8 @@ export default function Ideas() {
         }}
       />
 
-      {/* Three Widget Footer - Section 3 Layout */}
-      <ThreeWidgetFooter
+      {/* Three Widget Footer - Section 3 Layout with Standardized Workflow Widget */}
+      <StandardThreeWidgetFooter
         submoduleColor="amber"
         pageProgress={{
           title: 'Page Progress',
@@ -503,62 +503,15 @@ export default function Ideas() {
           hint: totalPending > 0
             ? `${totalPending} ideas ready to become tasks`
             : 'All ideas converted!',
+          statusInsight: totalPending > 0
+            ? `Select ideas and queue them to Writer to start content generation.`
+            : totalInTasks > 0
+              ? `Ideas queued. Go to Writer Tasks to generate content.`
+              : `No ideas yet. Generate ideas from Clusters page.`,
         }}
-        moduleStats={{
-          title: 'Planner Module',
-          pipeline: [
-            {
-              fromLabel: 'Keywords',
-              fromValue: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0),
-              fromHref: '/planner/keywords',
-              actionLabel: 'Auto Cluster',
-              toLabel: 'Clusters',
-              toValue: clusters.length,
-              toHref: '/planner/clusters',
-              progress: 100,
-              color: 'blue',
-            },
-            {
-              fromLabel: 'Clusters',
-              fromValue: clusters.length,
-              fromHref: '/planner/clusters',
-              actionLabel: 'Generate Ideas',
-              toLabel: 'Ideas',
-              toValue: totalCount,
-              progress: 100,
-              color: 'green',
-            },
-            {
-              fromLabel: 'Ideas',
-              fromValue: totalCount,
-              actionLabel: 'Create Tasks',
-              toLabel: 'Tasks',
-              toValue: ideas.filter(i => i.status === 'queued' || i.status === 'completed').length,
-              toHref: '/writer/tasks',
-              progress: totalCount > 0 ? Math.round((ideas.filter(i => i.status === 'queued' || i.status === 'completed').length / totalCount) * 100) : 0,
-              color: 'amber',
-            },
-          ],
-          links: [
-            { label: 'Keywords', href: '/planner/keywords' },
-            { label: 'Clusters', href: '/planner/clusters' },
-            { label: 'Ideas', href: '/planner/ideas' },
-          ],
-        }}
-        completion={{
-          title: 'Workflow Completion',
-          plannerItems: [
-            { label: 'Keywords Clustered', value: clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0), color: 'blue' },
-            { label: 'Clusters Created', value: clusters.length, color: 'green' },
-            { label: 'Ideas Generated', value: totalCount, color: 'amber' },
-          ],
-          writerItems: [
-            { label: 'Content Generated', value: ideas.filter(i => i.status === 'completed').length, color: 'blue' },
-            { label: 'Images Created', value: totalImagesCount, color: 'purple' },
-            { label: 'Published', value: 0, color: 'green' },
-          ],
-          analyticsHref: '/account/usage',
-        }}
+        module="planner"
+        showCredits={true}
+        analyticsHref="/account/usage"
       />
 
       {/* Progress Modal for AI Functions */}

frontend/src/pages/Planner/Keywords.tsx

@@ -26,7 +26,7 @@ import { useSiteStore } from '../../store/siteStore';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
-import ThreeWidgetFooter from '../../components/dashboard/ThreeWidgetFooter';
+import StandardThreeWidgetFooter from '../../components/dashboard/StandardThreeWidgetFooter';
 import { getDifficultyLabelFromNumber, getDifficultyRange } from '../../utils/difficulty';
 import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
@@ -780,8 +780,8 @@ export default function Keywords() {
         }}
       />
 
-      {/* Three Widget Footer - Section 3 Layout */}
-      <ThreeWidgetFooter
+      {/* Three Widget Footer - Section 3 Layout with Standardized Workflow Widget */}
+      <StandardThreeWidgetFooter
         submoduleColor="blue"
         pageProgress={{
           title: 'Page Progress',
@@ -800,65 +800,15 @@ export default function Keywords() {
           hint: totalUnmapped > 0
             ? `${totalUnmapped} keywords ready to cluster`
             : 'All keywords clustered!',
+          statusInsight: totalUnmapped > 0
+            ? `Select unmapped keywords and run clustering to group them into topics.`
+            : totalClustered > 0
+              ? `Keywords are clustered. Go to Clusters to generate content ideas.`
+              : `Add keywords to begin. Import from CSV or add manually.`,
         }}
-        moduleStats={{
-          title: 'Planner Module',
-          pipeline: [
-            {
-              fromLabel: 'Keywords',
-              fromValue: totalCount,
-              actionLabel: 'Auto Cluster',
-              toLabel: 'Clusters',
-              toValue: clusters.length,
-              toHref: '/planner/clusters',
-              progress: totalCount > 0 ? Math.round((keywords.filter(k => k.cluster_id).length / totalCount) * 100) : 0,
-              color: 'blue',
-            },
-            {
-              fromLabel: 'Clusters',
-              fromValue: clusters.length,
-              fromHref: '/planner/clusters',
-              actionLabel: 'Generate Ideas',
-              toLabel: 'Ideas',
-              toValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
-              toHref: '/planner/ideas',
-              progress: clusters.length > 0 ? Math.round((clusters.filter(c => (c.ideas_count || 0) > 0).length / clusters.length) * 100) : 0,
-              color: 'green',
-            },
-            {
-              fromLabel: 'Ideas',
-              fromValue: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0),
-              fromHref: '/planner/ideas',
-              actionLabel: 'Create Tasks',
-              toLabel: 'Tasks',
-              toValue: 0,
-              toHref: '/writer/tasks',
-              progress: 0,
-              color: 'amber',
-            },
-          ],
-          links: [
-            { label: 'Keywords', href: '/planner/keywords' },
-            { label: 'Clusters', href: '/planner/clusters' },
-            { label: 'Ideas', href: '/planner/ideas' },
-          ],
-        }}
-        completion={{
-          title: 'Workflow Completion',
-          plannerItems: [
-            { label: 'Keywords Clustered', value: keywords.filter(k => k.cluster_id).length, color: 'blue' },
-            { label: 'Clusters Created', value: clusters.length, color: 'green' },
-            { label: 'Ideas Generated', value: clusters.reduce((sum, c) => sum + (c.ideas_count || 0), 0), color: 'amber' },
-          ],
-          writerItems: [
-            { label: 'Content Generated', value: 0, color: 'blue' },
-            { label: 'Images Created', value: totalImagesCount, color: 'purple' },
-            { label: 'Published', value: 0, color: 'green' },
-          ],
-          creditsUsed: 0,
-          operationsCount: 0,
-          analyticsHref: '/account/usage',
-        }}
+        module="planner"
+        showCredits={true}
+        analyticsHref="/account/usage"
       />
 
       {/* Create/Edit Modal */}