frontend-refactor-1

frontend/src/pages/Writer/Content.tsx

@@ -14,13 +14,14 @@ import {
 import { optimizerApi } from '../../api/optimizer.api';
 import { useNavigate } from 'react-router';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon } from '../../icons';
+import { FileIcon, TaskIcon, ImageIcon, 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';
 
 export default function Content() {
   const toast = useToast();
@@ -197,12 +198,21 @@ export default function Content() {
     }
   }, [toast, progressModal, loadContent, navigate]);
 
+  // Writer navigation tabs
+  const writerTabs = [
+    { label: 'Tasks', path: '/writer/tasks', icon: <TaskIcon /> },
+    { label: 'Content', path: '/writer/content', icon: <FileIcon /> },
+    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
+    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
+  ];
+
   return (
     <>
       <PageHeader 
         title="Content" 
         badge={{ icon: <FileIcon />, color: 'purple' }}
       />
+      <ModuleNavigationTabs tabs={writerTabs} />
       <TablePageTemplate
         columns={pageConfig.columns}
         data={content}

frontend/src/pages/Writer/Images.tsx

@@ -15,12 +15,13 @@ import {
   ContentImage,
 } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { FileIcon, DownloadIcon, BoltIcon } from '../../icons';
+import { FileIcon, DownloadIcon, BoltIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
 import { createImagesPageConfig } from '../../config/pages/images.config';
 import ImageQueueModal, { ImageQueueItem } from '../../components/common/ImageQueueModal';
 import SingleRecordStatusUpdateModal from '../../components/common/SingleRecordStatusUpdateModal';
 import { useResourceDebug } from '../../hooks/useResourceDebug';
 import PageHeader from '../../components/common/PageHeader';
+import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import { Modal } from '../../components/ui/modal';
 
 export default function Images() {
@@ -460,12 +461,21 @@ export default function Images() {
     }));
   }, [pageConfig?.headerMetrics, images, totalCount]);
 
+  // Writer navigation tabs
+  const writerTabs = [
+    { label: 'Tasks', path: '/writer/tasks', icon: <TaskIcon /> },
+    { label: 'Content', path: '/writer/content', icon: <FileIcon /> },
+    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
+    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
+  ];
+
   return (
     <>
       <PageHeader 
         title="Content Images" 
         badge={{ icon: <FileIcon />, color: 'orange' }}
       />
+      <ModuleNavigationTabs tabs={writerTabs} />
       <TablePageTemplate
       columns={pageConfig.columns}
       data={images}

frontend/src/pages/Writer/Tasks.tsx

@@ -25,11 +25,12 @@ import ProgressModal from '../../components/common/ProgressModal';
 import { useProgressModal } from '../../hooks/useProgressModal';
 import { useResourceDebug } from '../../hooks/useResourceDebug';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { TaskIcon, PlusIcon, DownloadIcon } from '../../icons';
+import { TaskIcon, PlusIcon, DownloadIcon, FileIcon, ImageIcon, 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';
 
 export default function Tasks() {
   const toast = useToast();
@@ -559,12 +560,21 @@ export default function Tasks() {
     }
   };
 
+  // Writer navigation tabs
+  const writerTabs = [
+    { label: 'Tasks', path: '/writer/tasks', icon: <TaskIcon /> },
+    { label: 'Content', path: '/writer/content', icon: <FileIcon /> },
+    { label: 'Images', path: '/writer/images', icon: <ImageIcon /> },
+    { label: 'Published', path: '/writer/published', icon: <CheckCircleIcon /> },
+  ];
+
   return (
     <>
       <PageHeader 
         title="Tasks" 
         badge={{ icon: <TaskIcon />, color: 'indigo' }}
       />
+      <ModuleNavigationTabs tabs={writerTabs} />
       <TablePageTemplate
           columns={pageConfig.columns}
           data={tasks}