page adn app header mods
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import TablePageTemplate from '../../templates/TablePageTemplate';
|
||||
import {
|
||||
fetchContentIdeas,
|
||||
@@ -24,12 +25,12 @@ import ProgressModal from '../../components/common/ProgressModal';
|
||||
import { useProgressModal } from '../../hooks/useProgressModal';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { BoltIcon, PlusIcon, DownloadIcon, ListIcon, GroupIcon } from '../../icons';
|
||||
import { LightBulbIcon } from '@heroicons/react/24/outline';
|
||||
import { createIdeasPageConfig } from '../../config/pages/ideas.config';
|
||||
import { useSectorStore } from '../../store/sectorStore';
|
||||
import { usePageSizeStore } from '../../store/pageSizeStore';
|
||||
import PageHeader from '../../components/common/PageHeader';
|
||||
import ModuleMetricsFooter, { MetricItem, ProgressMetric } from '../../components/dashboard/ModuleMetricsFooter';
|
||||
import { WorkflowInsight } from '../../components/common/WorkflowInsights';
|
||||
|
||||
export default function Ideas() {
|
||||
const toast = useToast();
|
||||
@@ -77,57 +78,6 @@ export default function Ideas() {
|
||||
// Progress modal for AI functions
|
||||
const progressModal = useProgressModal();
|
||||
|
||||
// Calculate workflow insights
|
||||
const workflowInsights: WorkflowInsight[] = useMemo(() => {
|
||||
const insights: WorkflowInsight[] = [];
|
||||
const newCount = ideas.filter(i => i.status === 'new').length;
|
||||
const queuedCount = ideas.filter(i => i.status === 'queued').length;
|
||||
const completedCount = ideas.filter(i => i.status === 'completed').length;
|
||||
const queueActivationRate = totalCount > 0 ? Math.round((queuedCount / totalCount) * 100) : 0;
|
||||
const completionRate = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
|
||||
|
||||
if (totalCount === 0) {
|
||||
insights.push({
|
||||
type: 'info',
|
||||
message: 'Generate ideas from your keyword clusters to build your content pipeline',
|
||||
});
|
||||
return insights;
|
||||
}
|
||||
|
||||
// Queue activation insights
|
||||
if (newCount > 0 && queuedCount === 0) {
|
||||
insights.push({
|
||||
type: 'warning',
|
||||
message: `${newCount} new ideas waiting - Queue them to activate the content pipeline`,
|
||||
});
|
||||
} else if (queueActivationRate > 0 && queueActivationRate < 40) {
|
||||
insights.push({
|
||||
type: 'info',
|
||||
message: `${queueActivationRate}% of ideas queued (${queuedCount} ideas) - Queue more ideas to maintain steady content flow`,
|
||||
});
|
||||
} else if (queuedCount > 0) {
|
||||
insights.push({
|
||||
type: 'success',
|
||||
message: `${queuedCount} ideas in queue - Content pipeline is active and ready for task generation`,
|
||||
});
|
||||
}
|
||||
|
||||
// Completion velocity
|
||||
if (completionRate >= 50) {
|
||||
insights.push({
|
||||
type: 'success',
|
||||
message: `Strong completion rate (${completionRate}%) - ${completedCount} ideas converted to content`,
|
||||
});
|
||||
} else if (completionRate > 0) {
|
||||
insights.push({
|
||||
type: 'info',
|
||||
message: `${completedCount} ideas completed (${completionRate}%) - Continue queuing ideas to grow content library`,
|
||||
});
|
||||
}
|
||||
|
||||
return insights;
|
||||
}, [ideas, totalCount]);
|
||||
|
||||
// Load clusters for filter dropdown
|
||||
useEffect(() => {
|
||||
const loadClusters = async () => {
|
||||
@@ -351,10 +301,20 @@ export default function Ideas() {
|
||||
<>
|
||||
<PageHeader
|
||||
title="Ideas"
|
||||
description="AI-generated content ideas with titles, outlines, and target keywords. Queue ideas to start content generation."
|
||||
badge={{ icon: <BoltIcon />, color: 'orange' }}
|
||||
breadcrumb="Planner / Ideas"
|
||||
workflowInsights={workflowInsights}
|
||||
description="Content ideas generated from keywords"
|
||||
badge={{ icon: <LightBulbIcon />, color: 'yellow' }}
|
||||
breadcrumb="Planner"
|
||||
actions={
|
||||
<Link
|
||||
to="/writer/queue"
|
||||
className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-white bg-brand-500 hover:bg-brand-600 rounded-lg transition-colors"
|
||||
>
|
||||
Start Writing
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
<TablePageTemplate
|
||||
columns={pageConfig.columns}
|
||||
|
||||
Reference in New Issue
Block a user