Pre luanch plan phase 1 complete
This commit is contained in:
IGNY8 VPS (Salman)
@@ -121,18 +121,18 @@ export default function ClusterDetail() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<>
|
||||
<PageMeta title="Cluster Details" description="Loading cluster information" />
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-gray-500">Loading cluster...</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!cluster) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<>
|
||||
<PageMeta title="Cluster Not Found" description="The requested cluster could not be found" />
|
||||
<Card className="p-12 text-center">
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-4">Cluster not found</p>
|
||||
@@ -140,12 +140,12 @@ export default function ClusterDetail() {
|
||||
Back to Clusters
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<>
|
||||
<PageMeta
|
||||
title={`${cluster.name} - Cluster Details - IGNY8`}
|
||||
description={cluster.description || `View details for cluster: ${cluster.name}`}
|
||||
@@ -366,6 +366,6 @@ export default function ClusterDetail() {
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,778 +0,0 @@
|
||||
import { useEffect, useState, useMemo, lazy, Suspense } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import PageMeta from "../../components/common/PageMeta";
|
||||
import ComponentCard from "../../components/common/ComponentCard";
|
||||
import { ProgressBar } from "../../components/ui/progress";
|
||||
import { ApexOptions } from "apexcharts";
|
||||
import EnhancedMetricCard from "../../components/dashboard/EnhancedMetricCard";
|
||||
import PageHeader from "../../components/common/PageHeader";
|
||||
|
||||
const Chart = lazy(() => import("react-apexcharts").then((mod) => ({ default: mod.default })));
|
||||
|
||||
import {
|
||||
ListIcon,
|
||||
GroupIcon,
|
||||
BoltIcon,
|
||||
PieChartIcon,
|
||||
ArrowRightIcon,
|
||||
CheckCircleIcon,
|
||||
TimeIcon,
|
||||
ArrowUpIcon,
|
||||
ArrowDownIcon,
|
||||
PlugInIcon,
|
||||
ClockIcon,
|
||||
} from "../../icons";
|
||||
import {
|
||||
fetchKeywords,
|
||||
fetchClusters,
|
||||
fetchContentIdeas,
|
||||
fetchTasks,
|
||||
// fetchSiteBlueprints,
|
||||
// SiteBlueprint,
|
||||
} from "../../services/api";
|
||||
import { useSiteStore } from "../../store/siteStore";
|
||||
import { useSectorStore } from "../../store/sectorStore";
|
||||
|
||||
interface DashboardStats {
|
||||
keywords: {
|
||||
total: number;
|
||||
mapped: number;
|
||||
unmapped: number;
|
||||
byStatus: Record<string, number>;
|
||||
byCountry: Record<string, number>;
|
||||
};
|
||||
clusters: {
|
||||
total: number;
|
||||
withIdeas: number;
|
||||
withoutIdeas: number;
|
||||
totalVolume: number;
|
||||
avgKeywords: number;
|
||||
topClusters: Array<{ id: number; name: string; volume: number; keywords_count: number }>;
|
||||
};
|
||||
ideas: {
|
||||
total: number;
|
||||
queued: number;
|
||||
notQueued: number;
|
||||
byStatus: Record<string, number>;
|
||||
byContentType: Record<string, number>;
|
||||
};
|
||||
workflow: {
|
||||
keywordsReady: boolean;
|
||||
clustersBuilt: boolean;
|
||||
ideasGenerated: boolean;
|
||||
readyForWriter: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export default function PlannerDashboard() {
|
||||
const navigate = useNavigate();
|
||||
const { activeSite } = useSiteStore();
|
||||
const { activeSector } = useSectorStore();
|
||||
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
|
||||
|
||||
// Fetch real data
|
||||
const fetchDashboardData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const [keywordsRes, clustersRes, ideasRes, tasksRes] = await Promise.all([
|
||||
fetchKeywords({ page_size: 1000, sector_id: activeSector?.id }),
|
||||
fetchClusters({ page_size: 1000, sector_id: activeSector?.id }),
|
||||
fetchContentIdeas({ page_size: 1000, sector_id: activeSector?.id }),
|
||||
fetchTasks({ page_size: 1000, sector_id: activeSector?.id })
|
||||
]);
|
||||
|
||||
const keywords = keywordsRes.results || [];
|
||||
const mappedKeywords = keywords.filter(k => k.cluster && k.cluster.length > 0);
|
||||
const unmappedKeywords = keywords.filter(k => !k.cluster || k.cluster.length === 0);
|
||||
|
||||
const keywordsByStatus: Record<string, number> = {};
|
||||
const keywordsByCountry: Record<string, number> = {};
|
||||
keywords.forEach(k => {
|
||||
keywordsByStatus[k.status || 'unknown'] = (keywordsByStatus[k.status || 'unknown'] || 0) + 1;
|
||||
if (k.country) {
|
||||
keywordsByCountry[k.country] = (keywordsByCountry[k.country] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
const clusters = clustersRes.results || [];
|
||||
const clustersWithIdeas = clusters.filter(c => c.keywords_count > 0);
|
||||
const totalVolume = clusters.reduce((sum, c) => sum + (c.volume || 0), 0);
|
||||
const totalKeywordsInClusters = clusters.reduce((sum, c) => sum + (c.keywords_count || 0), 0);
|
||||
const avgKeywords = clusters.length > 0 ? Math.round(totalKeywordsInClusters / clusters.length) : 0;
|
||||
|
||||
const topClusters = [...clusters]
|
||||
.sort((a, b) => (b.volume || 0) - (a.volume || 0))
|
||||
.slice(0, 5)
|
||||
.map(c => ({
|
||||
id: c.id,
|
||||
name: c.name || 'Unnamed Cluster',
|
||||
volume: c.volume || 0,
|
||||
keywords_count: c.keywords_count || 0
|
||||
}));
|
||||
|
||||
const ideas = ideasRes.results || [];
|
||||
const ideaIds = new Set(ideas.map(i => i.id));
|
||||
const tasks = tasksRes.results || [];
|
||||
const queuedIdeas = tasks.filter(t => t.idea && ideaIds.has(t.idea)).length;
|
||||
const notQueuedIdeas = ideas.length - queuedIdeas;
|
||||
|
||||
const ideasByStatus: Record<string, number> = {};
|
||||
const ideasByContentType: Record<string, number> = {};
|
||||
ideas.forEach(i => {
|
||||
ideasByStatus[i.status || 'new'] = (ideasByStatus[i.status || 'new'] || 0) + 1;
|
||||
if (i.content_type) {
|
||||
ideasByContentType[i.content_type] = (ideasByContentType[i.content_type] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
setStats({
|
||||
keywords: {
|
||||
total: keywords.length,
|
||||
mapped: mappedKeywords.length,
|
||||
unmapped: unmappedKeywords.length,
|
||||
byStatus: keywordsByStatus,
|
||||
byCountry: keywordsByCountry
|
||||
},
|
||||
clusters: {
|
||||
total: clusters.length,
|
||||
withIdeas: clustersWithIdeas.length,
|
||||
withoutIdeas: clusters.length - clustersWithIdeas.length,
|
||||
totalVolume,
|
||||
avgKeywords,
|
||||
topClusters
|
||||
},
|
||||
ideas: {
|
||||
total: ideas.length,
|
||||
queued: queuedIdeas,
|
||||
notQueued: notQueuedIdeas,
|
||||
byStatus: ideasByStatus,
|
||||
byContentType: ideasByContentType
|
||||
},
|
||||
workflow: {
|
||||
keywordsReady: keywords.length > 0,
|
||||
clustersBuilt: clusters.length > 0,
|
||||
ideasGenerated: ideas.length > 0,
|
||||
readyForWriter: queuedIdeas > 0
|
||||
}
|
||||
});
|
||||
|
||||
setLastUpdated(new Date());
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDashboardData();
|
||||
const interval = setInterval(fetchDashboardData, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, [activeSector?.id, activeSite?.id]);
|
||||
|
||||
const keywordMappingPct = useMemo(() => {
|
||||
if (!stats || stats.keywords.total === 0) return 0;
|
||||
return Math.round((stats.keywords.mapped / stats.keywords.total) * 100);
|
||||
}, [stats]);
|
||||
|
||||
const clustersIdeasPct = useMemo(() => {
|
||||
if (!stats || stats.clusters.total === 0) return 0;
|
||||
return Math.round((stats.clusters.withIdeas / stats.clusters.total) * 100);
|
||||
}, [stats]);
|
||||
|
||||
const ideasQueuedPct = useMemo(() => {
|
||||
if (!stats || stats.ideas.total === 0) return 0;
|
||||
return Math.round((stats.ideas.queued / stats.ideas.total) * 100);
|
||||
}, [stats]);
|
||||
|
||||
const plannerModules = [
|
||||
{
|
||||
title: "Keywords",
|
||||
description: "Manage and discover keywords",
|
||||
icon: ListIcon,
|
||||
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
|
||||
path: "/planner/keywords",
|
||||
count: stats?.keywords.total || 0,
|
||||
metric: `${stats?.keywords.mapped || 0} mapped`,
|
||||
},
|
||||
{
|
||||
title: "Clusters",
|
||||
description: "Keyword clusters and groups",
|
||||
icon: GroupIcon,
|
||||
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
|
||||
path: "/planner/clusters",
|
||||
count: stats?.clusters.total || 0,
|
||||
metric: `${stats?.clusters.totalVolume.toLocaleString() || 0} volume`,
|
||||
},
|
||||
{
|
||||
title: "Ideas",
|
||||
description: "Content ideas and concepts",
|
||||
icon: BoltIcon,
|
||||
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
|
||||
path: "/planner/ideas",
|
||||
count: stats?.ideas.total || 0,
|
||||
metric: `${stats?.ideas.queued || 0} queued`,
|
||||
},
|
||||
{
|
||||
title: "Keyword Opportunities",
|
||||
description: "Discover new keyword opportunities",
|
||||
icon: PieChartIcon,
|
||||
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
|
||||
path: "/planner/keyword-opportunities",
|
||||
count: 0,
|
||||
metric: "Discover new keywords",
|
||||
},
|
||||
];
|
||||
|
||||
const recentActivity = [
|
||||
{
|
||||
id: 1,
|
||||
type: "Keywords Clustered",
|
||||
description: `${stats?.clusters.total || 0} new clusters created`,
|
||||
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
|
||||
icon: GroupIcon,
|
||||
color: "text-success-600",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "Ideas Generated",
|
||||
description: `${stats?.ideas.total || 0} content ideas created`,
|
||||
timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
|
||||
icon: BoltIcon,
|
||||
color: "text-warning-600",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: "Keywords Added",
|
||||
description: `${stats?.keywords.total || 0} keywords in database`,
|
||||
timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000),
|
||||
icon: ListIcon,
|
||||
color: "text-brand-600",
|
||||
},
|
||||
];
|
||||
|
||||
const chartOptions: ApexOptions = {
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 300,
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 3,
|
||||
},
|
||||
xaxis: {
|
||||
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
labels: { style: { colors: "var(--color-gray-500)" } },
|
||||
},
|
||||
yaxis: {
|
||||
labels: { style: { colors: "var(--color-gray-500)" } },
|
||||
},
|
||||
legend: {
|
||||
position: "top",
|
||||
labels: { colors: "var(--color-gray-500)" },
|
||||
},
|
||||
colors: ["var(--color-primary)", "var(--color-success)", "var(--color-warning)"],
|
||||
grid: {
|
||||
borderColor: "var(--color-gray-200)",
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
opacityFrom: 0.6,
|
||||
opacityTo: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const chartSeries = [
|
||||
{
|
||||
name: "Keywords Added",
|
||||
data: [12, 19, 15, 25, 22, 18, 24],
|
||||
},
|
||||
{
|
||||
name: "Clusters Created",
|
||||
data: [8, 12, 10, 15, 14, 11, 16],
|
||||
},
|
||||
{
|
||||
name: "Ideas Generated",
|
||||
data: [5, 8, 6, 10, 9, 7, 11],
|
||||
},
|
||||
];
|
||||
|
||||
const keywordsStatusChart = useMemo(() => {
|
||||
if (!stats) return null;
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
type: 'donut',
|
||||
fontFamily: 'Outfit, sans-serif',
|
||||
toolbar: { show: false }
|
||||
},
|
||||
labels: Object.keys(stats.keywords.byStatus).filter(key => stats.keywords.byStatus[key] > 0),
|
||||
colors: ['var(--color-primary)', 'var(--color-success)', 'var(--color-warning)', 'var(--color-danger)', 'var(--color-purple)'],
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
fontFamily: 'Outfit',
|
||||
show: true
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '70%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: { show: false },
|
||||
value: {
|
||||
show: true,
|
||||
fontSize: '24px',
|
||||
fontWeight: 700,
|
||||
color: 'var(--color-primary)',
|
||||
fontFamily: 'Outfit',
|
||||
formatter: () => {
|
||||
const total = Object.values(stats.keywords.byStatus).reduce((a, b) => a + b, 0);
|
||||
return total > 0 ? total.toString() : '0';
|
||||
}
|
||||
},
|
||||
total: { show: false }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = Object.keys(stats.keywords.byStatus)
|
||||
.filter(key => stats.keywords.byStatus[key] > 0)
|
||||
.map(key => stats.keywords.byStatus[key]);
|
||||
|
||||
return { options, series };
|
||||
}, [stats]);
|
||||
|
||||
const topClustersChart = useMemo(() => {
|
||||
if (!stats || stats.clusters.topClusters.length === 0) return null;
|
||||
|
||||
const options: ApexOptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
fontFamily: 'Outfit, sans-serif',
|
||||
toolbar: { show: false },
|
||||
height: 300
|
||||
},
|
||||
colors: ['var(--color-success)'],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
borderRadius: 5,
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: (val: number) => val.toLocaleString(),
|
||||
offsetX: 10
|
||||
},
|
||||
xaxis: {
|
||||
categories: stats.clusters.topClusters.map(c => c.name),
|
||||
labels: {
|
||||
style: {
|
||||
fontFamily: 'Outfit',
|
||||
fontSize: '12px'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
fontFamily: 'Outfit'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: (val: number) => `${val.toLocaleString()} volume`
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const series = [{
|
||||
name: 'Search Volume',
|
||||
data: stats.clusters.topClusters.map(c => c.volume)
|
||||
}];
|
||||
|
||||
return { options, series };
|
||||
}, [stats]);
|
||||
|
||||
const formatTimeAgo = (date: Date) => {
|
||||
const minutes = Math.floor((Date.now() - date.getTime()) / 60000);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
};
|
||||
|
||||
if (loading && !stats) {
|
||||
return (
|
||||
<>
|
||||
<PageMeta title="Planner Dashboard - IGNY8" description="Content planning overview" />
|
||||
<div className="flex items-center justify-center h-96">
|
||||
<div className="text-center">
|
||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-brand-500 border-t-transparent"></div>
|
||||
<p className="mt-4 text-gray-600 dark:text-gray-400">Loading dashboard data...</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!stats && !loading) {
|
||||
return (
|
||||
<>
|
||||
<PageMeta title="Planner Dashboard - IGNY8" description="Content planning overview" />
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
{activeSector ? 'No data available for the selected sector.' : 'No data available. Select a sector or wait for data to load.'}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!stats) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageMeta title="Planning Dashboard - IGNY8" description="Track your content planning progress" />
|
||||
<PageHeader
|
||||
title="Planning Dashboard"
|
||||
lastUpdated={lastUpdated}
|
||||
showRefresh={true}
|
||||
onRefresh={fetchDashboardData}
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<EnhancedMetricCard
|
||||
title="Total Keywords"
|
||||
value={stats.keywords.total}
|
||||
subtitle={`${stats.keywords.mapped} mapped • ${stats.keywords.unmapped} unmapped`}
|
||||
icon={<ListIcon className="size-6" />}
|
||||
accentColor="blue"
|
||||
trend={0}
|
||||
href="/planner/keywords"
|
||||
/>
|
||||
<EnhancedMetricCard
|
||||
title="Clusters Built"
|
||||
value={stats.clusters.total}
|
||||
subtitle={`${stats.clusters.totalVolume.toLocaleString()} volume • ${stats.clusters.avgKeywords} avg keywords`}
|
||||
icon={<GroupIcon className="size-6" />}
|
||||
accentColor="green"
|
||||
trend={0}
|
||||
href="/planner/clusters"
|
||||
/>
|
||||
<EnhancedMetricCard
|
||||
title="Ideas Generated"
|
||||
value={stats.ideas.total}
|
||||
subtitle={`${stats.ideas.queued} queued • ${stats.ideas.notQueued} not queued`}
|
||||
icon={<BoltIcon className="size-6" />}
|
||||
accentColor="orange"
|
||||
trend={0}
|
||||
href="/planner/ideas"
|
||||
/>
|
||||
<EnhancedMetricCard
|
||||
title="Mapping Progress"
|
||||
value={`${keywordMappingPct}%`}
|
||||
subtitle={`${stats.keywords.mapped} of ${stats.keywords.total} keywords mapped`}
|
||||
icon={<PieChartIcon className="size-6" />}
|
||||
accentColor="purple"
|
||||
trend={0}
|
||||
href="/planner/keywords"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Planner Modules */}
|
||||
<ComponentCard title="Planner Modules" desc="Access all planning tools and features">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{plannerModules.map((module) => {
|
||||
const Icon = module.icon;
|
||||
return (
|
||||
<Link
|
||||
key={module.title}
|
||||
to={module.path}
|
||||
className="rounded-2xl border-2 border-gray-200 bg-white p-6 hover:shadow-xl hover:-translate-y-1 transition-all group"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${module.color} items-center justify-center text-white shadow-lg`}>
|
||||
<Icon className="h-7 w-7" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-2">{module.title}</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">{module.description}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gray-900">{module.count}</div>
|
||||
<div className="text-xs text-gray-500">{module.metric}</div>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] group-hover:translate-x-1 transition" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
{/* Activity Chart & Recent Activity */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<ComponentCard title="Planning Activity" desc="Keywords, clusters, and ideas over the past week">
|
||||
<Suspense fallback={<div className="h-[300px] flex items-center justify-center">Loading chart...</div>}>
|
||||
<Chart options={chartOptions} series={chartSeries} type="area" height={300} />
|
||||
</Suspense>
|
||||
</ComponentCard>
|
||||
|
||||
<ComponentCard title="Recent Activity" desc="Latest planning actions and updates">
|
||||
<div className="space-y-4">
|
||||
{recentActivity.map((activity) => {
|
||||
const Icon = activity.icon;
|
||||
return (
|
||||
<div
|
||||
key={activity.id}
|
||||
className="flex items-center gap-4 p-4 rounded-lg border border-gray-200 bg-white hover:shadow-md transition"
|
||||
>
|
||||
<div className={`size-10 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center ${activity.color}`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h4 className="font-semibold text-gray-900">{activity.type}</h4>
|
||||
<span className="text-xs text-gray-500">{formatTimeAgo(activity.timestamp)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{activity.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
</div>
|
||||
|
||||
{/* Charts */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{keywordsStatusChart && (
|
||||
<ComponentCard title="Keywords by Status" desc="Distribution of keywords across statuses">
|
||||
<Suspense fallback={<div className="h-[300px] flex items-center justify-center">Loading chart...</div>}>
|
||||
<Chart
|
||||
options={keywordsStatusChart.options}
|
||||
series={keywordsStatusChart.series}
|
||||
type="donut"
|
||||
height={300}
|
||||
/>
|
||||
</Suspense>
|
||||
</ComponentCard>
|
||||
)}
|
||||
|
||||
{topClustersChart && (
|
||||
<ComponentCard title="Top 5 Clusters by Volume" desc="Highest volume keyword clusters">
|
||||
<Suspense fallback={<div className="h-[300px] flex items-center justify-center">Loading chart...</div>}>
|
||||
<Chart
|
||||
options={topClustersChart.options}
|
||||
series={topClustersChart.series}
|
||||
type="bar"
|
||||
height={300}
|
||||
/>
|
||||
</Suspense>
|
||||
</ComponentCard>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Progress Summary */}
|
||||
<ComponentCard title="Planning Progress" desc="Track your planning workflow progress">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Keyword Mapping</span>
|
||||
<span className="text-sm font-semibold text-gray-800 dark:text-white/90">{keywordMappingPct}%</span>
|
||||
</div>
|
||||
<ProgressBar value={keywordMappingPct} color="primary" size="md" />
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{stats.keywords.mapped} of {stats.keywords.total} keywords mapped
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Clusters With Ideas</span>
|
||||
<span className="text-sm font-semibold text-gray-800 dark:text-white/90">{clustersIdeasPct}%</span>
|
||||
</div>
|
||||
<ProgressBar value={clustersIdeasPct} color="success" size="md" />
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{stats.clusters.withIdeas} of {stats.clusters.total} clusters have ideas
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Ideas Queued to Writer</span>
|
||||
<span className="text-sm font-semibold text-gray-800 dark:text-white/90">{ideasQueuedPct}%</span>
|
||||
</div>
|
||||
<ProgressBar value={ideasQueuedPct} color="warning" size="md" />
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{stats.ideas.queued} of {stats.ideas.total} ideas queued
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<ComponentCard title="Quick Actions" desc="Common planning tasks and shortcuts">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link
|
||||
to="/planner/keyword-opportunities"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-[var(--color-primary)] hover:shadow-lg transition-all group"
|
||||
>
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<ListIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Add Keywords</h4>
|
||||
<p className="text-sm text-gray-600">Discover opportunities</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-[var(--color-primary)] transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/planner/clusters"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-success-500 hover:shadow-lg transition-all group"
|
||||
>
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<GroupIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Auto Cluster</h4>
|
||||
<p className="text-sm text-gray-600">Group keywords</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-success-500 transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/planner/ideas"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-warning-500 hover:shadow-lg transition-all group"
|
||||
>
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<BoltIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Generate Ideas</h4>
|
||||
<p className="text-sm text-gray-600">Create content ideas</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-warning-500 transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/automation"
|
||||
className="flex items-center gap-4 p-6 rounded-xl border-2 border-gray-200 bg-white hover:border-purple-500 hover:shadow-lg transition-all group"
|
||||
>
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-purple)] to-[var(--color-purple-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<PlugInIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1 text-left">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Setup Automation</h4>
|
||||
<p className="text-sm text-gray-600">Automate workflows</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-purple-500 transition" />
|
||||
</Link>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
{/* Info Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<ComponentCard title="How Planner Works" desc="Understanding the planning workflow">
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md">
|
||||
<ListIcon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Keyword Discovery</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Discover high-volume keywords from our global database. Add keywords manually or import from keyword opportunities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-md">
|
||||
<GroupIcon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">AI Clustering</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Automatically group related keywords into strategic clusters. Each cluster represents a content topic with shared search intent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--color-warning)] to-[var(--color-warning-dark)] flex items-center justify-center text-white shadow-md">
|
||||
<BoltIcon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Idea Generation</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Generate content ideas from clusters using AI. Each idea includes title, outline, and target keywords for content creation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
<ComponentCard title="Getting Started" desc="Quick guide to using Planner">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 size-8 rounded-full bg-brand-500 text-white flex items-center justify-center font-bold text-sm">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Add Keywords</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Start by adding keywords from the keyword opportunities page. You can search by volume, difficulty, or intent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 size-8 rounded-full bg-success-500 text-white flex items-center justify-center font-bold text-sm">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Cluster Keywords</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Use the auto-cluster feature to group related keywords. Review and refine clusters to match your content strategy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 size-8 rounded-full bg-warning-500 text-white flex items-center justify-center font-bold text-sm">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Generate Ideas</h4>
|
||||
<p className="text-sm text-gray-600">
|
||||
Create content ideas from your clusters. Queue ideas to the Writer module to start content creation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import PageMeta from "../../components/common/PageMeta";
|
||||
import ComponentCard from "../../components/common/ComponentCard";
|
||||
import PageHeader from "../../components/common/PageHeader";
|
||||
import { PieChartIcon } from "../../icons";
|
||||
|
||||
export default function Mapping() {
|
||||
return (
|
||||
<>
|
||||
<PageMeta title="Content Mapping - IGNY8" description="Keyword to content mapping" />
|
||||
<PageHeader
|
||||
title="Content Mapping"
|
||||
badge={{ icon: <PieChartIcon />, color: 'indigo' }}
|
||||
/>
|
||||
<ComponentCard title="Coming Soon" desc="Keyword to content mapping">
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Content Mapping - Coming Soon
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
|
||||
Map keywords and clusters to existing pages and content
|
||||
</p>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user