Section 6 COmpleted

frontend/src/pages/Writer/Content.tsx

@@ -16,14 +16,13 @@ import {
 import { optimizerApi } from '../../api/optimizer.api';
 import { useNavigate } from 'react-router-dom';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
+import { FileIcon, TaskIcon, CheckCircleIcon } from '../../icons';
 import { createContentPageConfig } from '../../config/pages/content.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import ModuleMetricsFooter, { MetricItem, ProgressMetric } from '../../components/dashboard/ModuleMetricsFooter';
 import { WorkflowInsight } from '../../components/common/WorkflowInsights';
 
@@ -278,22 +277,13 @@ export default function Content() {
     return result;
   }, [loadContent]);
 
-  // Writer navigation tabs
-  const writerTabs = [
-    { label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
-    { label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
-    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
-    { label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
-    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
-  ];
-
   return (
     <>
       <PageHeader 
         title="Drafts" 
         description="AI-generated content ready for review. Add images, edit, and publish when ready."
         badge={{ icon: <FileIcon />, color: 'purple' }}
-        navigation={<ModuleNavigationTabs tabs={writerTabs} />}
+        breadcrumb="Writer / Drafts"
         workflowInsights={workflowInsights}
       />
       <TablePageTemplate

frontend/src/pages/Writer/Images.tsx

@@ -18,12 +18,11 @@ import {
   bulkDeleteContent,
 } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon, DownloadIcon, BoltIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
+import { FileIcon, DownloadIcon } from '../../icons';
 import { createImagesPageConfig } from '../../config/pages/images.config';
 import ImageQueueModal, { ImageQueueItem } from '../../components/common/ImageQueueModal';
 import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordStatusUpdateModal';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import { Modal } from '../../components/ui/modal';
 
 export default function Images() {
@@ -447,21 +446,12 @@ export default function Images() {
     }));
   }, [pageConfig?.headerMetrics, images, totalCount]);
 
-  // Writer navigation tabs
-  const writerTabs = [
-    { label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
-    { label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
-    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
-    { label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
-    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
-  ];
-
   return (
     <>
       <PageHeader 
         title="Images" 
         badge={{ icon: <FileIcon />, color: 'orange' }}
-        navigation={<ModuleNavigationTabs tabs={writerTabs} />}
+        breadcrumb="Writer / Images"
       />
       <TablePageTemplate
       columns={pageConfig.columns}

frontend/src/pages/Writer/Published.tsx

@@ -17,12 +17,11 @@ import {
 } from '../../services/api';
 import { useNavigate } from 'react-router-dom';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
+import { FileIcon, CheckCircleIcon } from '../../icons';
 import { createPublishedPageConfig } from '../../config/pages/published.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import ModuleMetricsFooter from '../../components/dashboard/ModuleMetricsFooter';
 
 export default function Published() {
@@ -305,21 +304,12 @@ export default function Published() {
     }));
   }, [pageConfig?.headerMetrics, content, totalCount]);
 
-  // Writer navigation tabs
-  const writerTabs = [
-    { label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
-    { label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
-    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
-    { label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
-    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
-  ];
-
   return (
     <>
       <PageHeader 
         title="Published" 
         badge={{ icon: <CheckCircleIcon />, color: 'green' }}
-        navigation={<ModuleNavigationTabs tabs={writerTabs} />}
+        breadcrumb="Writer / Published"
       />
       <TablePageTemplate
         columns={pageConfig.columns}

frontend/src/pages/Writer/Review.tsx

@@ -14,12 +14,11 @@ import {
 } from '../../services/api';
 import { useNavigate } from 'react-router-dom';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
+import { CheckCircleIcon } from '../../icons';
 import { createReviewPageConfig } from '../../config/pages/review.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import ModuleMetricsFooter from '../../components/dashboard/ModuleMetricsFooter';
 
 export default function Review() {
@@ -344,21 +343,12 @@ export default function Review() {
     }
   }, [loadContent, toast]);
 
-  // Writer navigation tabs
-  const writerTabs = [
-    { label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
-    { label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
-    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
-    { label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
-    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
-  ];
-
   return (
     <>
       <PageHeader 
         title="Review Queue" 
         badge={{ icon: <CheckCircleIcon />, color: 'blue' }}
-        navigation={<ModuleNavigationTabs tabs={writerTabs} />}
+        breadcrumb="Writer / Review"
       />
       <TablePageTemplate
         columns={pageConfig.columns}

frontend/src/pages/Writer/Tasks.tsx

@@ -24,12 +24,11 @@ import FormModal from '../../components/common/FormModal';
 import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { TaskIcon, PlusIcon, DownloadIcon, FileIcon, ImageIcon, CheckCircleIcon } from '../../icons';
+import { TaskIcon, PlusIcon, DownloadIcon, CheckCircleIcon } from '../../icons';
 import { createTasksPageConfig } from '../../config/pages/tasks.config';
 import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import PageHeader from '../../components/common/PageHeader';
-import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import ModuleMetricsFooter, { MetricItem, ProgressMetric } from '../../components/dashboard/ModuleMetricsFooter';
 import { WorkflowInsight } from '../../components/common/WorkflowInsights';
 
@@ -422,22 +421,13 @@ export default function Tasks() {
     }
   };
 
-  // Writer navigation tabs
-  const writerTabs = [
-    { label: 'Queue', path: '/writer/tasks', icon: <TaskIcon /> },
-    { label: 'Drafts', path: '/writer/content', icon: <FileIcon /> },
-    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
-    { label: 'Review', path: '/writer/review', icon: <CheckCircleIcon /> },
-    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
-  ];
-
   return (
     <>
       <PageHeader 
         title="Content Queue" 
         description="Manage content tasks waiting for AI generation. Queue ideas here to create articles automatically."
         badge={{ icon: <TaskIcon />, color: 'indigo' }}
-        navigation={<ModuleNavigationTabs tabs={writerTabs} />}
+        breadcrumb="Writer / Queue"
         workflowInsights={workflowInsights}
       />
       <TablePageTemplate