many changes for modules widgets and colors and styling

frontend/src/pages/Writer/Approved.tsx

@@ -24,7 +24,7 @@ import { createApprovedPageConfig } from '../../config/pages/approved.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 Approved() {
   const toast = useToast();
@@ -417,7 +417,7 @@ export default function Approved() {
       />
 
       {/* Three Widget Footer - Section 3 Layout */}
-      <ThreeWidgetFooter
+      <StandardThreeWidgetFooter
         submoduleColor="green"
         pageProgress={{
           title: 'Page Progress',
@@ -435,65 +435,13 @@ export default function Approved() {
           hint: content.filter(c => !c.external_id).length > 0
             ? `${content.filter(c => !c.external_id).length} article${content.filter(c => !c.external_id).length !== 1 ? 's' : ''} pending sync to site`
             : 'All articles synced to site!',
+          statusInsight: content.filter(c => !c.external_id).length > 0
+            ? `Select articles and publish to your WordPress site.`
+            : totalCount > 0
+              ? `All content published! Check your site for live articles.`
+              : `No approved content. Approve articles from Review page.`,
         }}
-        moduleStats={{
-          title: 'Writer Module',
-          pipeline: [
-            {
-              fromLabel: 'Tasks',
-              fromValue: 0,
-              fromHref: '/writer/tasks',
-              actionLabel: 'Generate Content',
-              toLabel: 'Drafts',
-              toValue: 0,
-              toHref: '/writer/content',
-              progress: 0,
-              color: 'blue',
-            },
-            {
-              fromLabel: 'Drafts',
-              fromValue: 0,
-              fromHref: '/writer/content',
-              actionLabel: 'Generate Images',
-              toLabel: 'Images',
-              toValue: totalImagesCount,
-              toHref: '/writer/images',
-              progress: 0,
-              color: 'purple',
-            },
-            {
-              fromLabel: 'Ready',
-              fromValue: 0,
-              fromHref: '/writer/review',
-              actionLabel: 'Review & Publish',
-              toLabel: 'Published',
-              toValue: totalCount,
-              toHref: '/writer/published',
-              progress: 100,
-              color: 'green',
-            },
-          ],
-          links: [
-            { label: 'Tasks', href: '/writer/tasks' },
-            { label: 'Content', href: '/writer/content' },
-            { label: 'Images', href: '/writer/images' },
-            { label: 'Published', href: '/writer/published' },
-          ],
-        }}
-        completion={{
-          title: 'Workflow Completion',
-          plannerItems: [
-            { label: 'Keywords Clustered', value: 0, color: 'blue' },
-            { label: 'Clusters Created', value: 0, color: 'green' },
-            { label: 'Ideas Generated', value: 0, color: 'amber' },
-          ],
-          writerItems: [
-            { label: 'Content Generated', value: 0, color: 'blue' },
-            { label: 'Images Created', value: totalImagesCount, color: 'purple' },
-            { label: 'Articles Published', value: totalCount, color: 'green' },
-          ],
-          analyticsHref: '/account/usage',
-        }}
+        module="writer"
       />
     </>
   );