fixes and more ui

frontend/src/pages/Writer/Tasks.tsx

@@ -31,8 +31,12 @@ import { useSectorStore } from '../../store/sectorStore';
 import { usePageSizeStore } from '../../store/pageSizeStore';
 import ViewToggle, { ViewType } from '../../components/common/ViewToggle';
 import { KanbanBoard, TaskList, Task as KanbanTask } from '../../components/tasks';
+import WorkflowPipeline, { WorkflowStep } from '../../components/dashboard/WorkflowPipeline';
+import ComponentCard from '../../components/common/ComponentCard';
+import { useNavigate } from 'react-router';
 
 export default function Tasks() {
+  const navigate = useNavigate();
   const toast = useToast();
   const { activeSector } = useSectorStore();
   const { pageSize } = usePageSizeStore();
@@ -210,6 +214,9 @@ export default function Tasks() {
       year: 'numeric' 
     }) : undefined;
 
+    // Parse keywords if available (comma-separated string)
+    const keywordNames = task.keywords ? task.keywords.split(',').map(k => k.trim()).filter(k => k) : undefined;
+
     return {
       id: String(task.id),
       title: task.title || 'Untitled Task',
@@ -220,6 +227,13 @@ export default function Tasks() {
       tags: task.cluster_name ? [{ label: task.cluster_name, color: 'brand' as const }] : undefined,
       description: task.description || undefined,
       assignee: undefined, // Add if you have assignee data
+      // Relationship data
+      clusterId: task.cluster_id || null,
+      clusterName: task.cluster_name || null,
+      ideaId: task.idea_id || null,
+      ideaTitle: task.idea_title || null,
+      keywordIds: undefined, // API doesn't return keyword IDs directly, would need to fetch
+      keywordNames: keywordNames,
     };
   };
 
@@ -626,8 +640,62 @@ export default function Tasks() {
     }
   };
 
+  // Calculate workflow steps for Tasks page
+  const todoCount = tasks.filter(t => t.status === 'queued' || t.status === 'draft').length;
+  const inProgressCount = tasks.filter(t => t.status === 'in_progress' || t.status === 'generating' || t.status === 'review').length;
+  const completedCount = tasks.filter(t => t.status === 'completed' || t.status === 'published').length;
+  const contentCount = tasks.filter(t => t.content && t.content.length > 0).length;
+
+  const workflowSteps: WorkflowStep[] = [
+    {
+      number: 1,
+      title: "Queue Tasks",
+      status: todoCount > 0 ? "completed" : "pending",
+      count: todoCount,
+      path: "/writer/tasks",
+      description: "Tasks queued for content generation",
+    },
+    {
+      number: 2,
+      title: "Generate Content",
+      status: inProgressCount > 0 ? "in_progress" : contentCount > 0 ? "completed" : "pending",
+      count: contentCount,
+      path: "/writer/tasks",
+      description: "AI content generation",
+    },
+    {
+      number: 3,
+      title: "Review & Edit",
+      status: tasks.filter(t => t.status === 'review').length > 0 ? "in_progress" : "pending",
+      count: tasks.filter(t => t.status === 'review').length,
+      path: "/writer/content",
+      description: "Content review and editing",
+    },
+    {
+      number: 4,
+      title: "Publish",
+      status: completedCount > 0 ? "completed" : "pending",
+      count: completedCount,
+      path: "/writer/content",
+      description: "Published content",
+    },
+  ];
+
   return (
     <>
+      {/* Workflow Pipeline - Show for all views */}
+      <div className="mb-6">
+        <ComponentCard title="Content Creation Workflow" desc="Track your content creation progress">
+          <WorkflowPipeline
+            steps={workflowSteps}
+            onStepClick={(step) => {
+              navigate(step.path);
+            }}
+            showConnections={true}
+          />
+        </ComponentCard>
+      </div>
+
       {/* View Toggle - Only show for Kanban/List views */}
       {currentView !== 'table' && (
         <div className="mb-4 flex items-center justify-between">
@@ -646,10 +714,11 @@ export default function Tasks() {
 
       {/* Table View */}
       {currentView === 'table' && (
-        <div className="mb-4 flex justify-end">
-          <ViewToggle currentView={currentView} onViewChange={setCurrentView} />
-        </div>
-        <TablePageTemplate
+        <>
+          <div className="mb-4 flex justify-end">
+            <ViewToggle currentView={currentView} onViewChange={setCurrentView} />
+          </div>
+          <TablePageTemplate
           title="Tasks"
           titleIcon={<TaskIcon className="text-brand-500 size-5" />}
           subtitle="Manage content generation queue and tasks"
@@ -752,6 +821,7 @@ export default function Tasks() {
             setCurrentPage(1);
           }}
         />
+        </>
       )}
 
       {/* Kanban View */}