new dashboards
This commit is contained in:
Desktop
@@ -701,6 +701,135 @@ export default function PlannerDashboard() {
|
||||
)}
|
||||
</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">
|
||||
{[
|
||||
{
|
||||
title: "Keywords",
|
||||
description: "Manage and discover keywords",
|
||||
icon: ListIcon,
|
||||
color: "from-[#0693e3] to-[#0472b8]",
|
||||
path: "/planner/keywords",
|
||||
count: stats.keywords.total,
|
||||
metric: `${stats.keywords.mapped} mapped`,
|
||||
},
|
||||
{
|
||||
title: "Clusters",
|
||||
description: "Keyword clusters and groups",
|
||||
icon: GroupIcon,
|
||||
color: "from-[#0bbf87] to-[#08966b]",
|
||||
path: "/planner/clusters",
|
||||
count: stats.clusters.total,
|
||||
metric: `${stats.clusters.totalVolume.toLocaleString()} volume`,
|
||||
},
|
||||
{
|
||||
title: "Ideas",
|
||||
description: "Content ideas and concepts",
|
||||
icon: BoltIcon,
|
||||
color: "from-[#ff7a00] to-[#cc5f00]",
|
||||
path: "/planner/ideas",
|
||||
count: stats.ideas.total,
|
||||
metric: `${stats.ideas.queued} queued`,
|
||||
},
|
||||
{
|
||||
title: "Keyword Opportunities",
|
||||
description: "Discover new keyword opportunities",
|
||||
icon: PieChartIcon,
|
||||
color: "from-[#5d4ae3] to-[#3a2f94]",
|
||||
path: "/planner/keyword-opportunities",
|
||||
count: 0,
|
||||
metric: "Discover new keywords",
|
||||
},
|
||||
].map((module) => {
|
||||
const Icon = module.icon;
|
||||
return (
|
||||
<Link
|
||||
key={module.title}
|
||||
to={module.path}
|
||||
className="rounded-2xl border-2 border-slate-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-slate-900 mb-2">{module.title}</h3>
|
||||
<p className="text-sm text-slate-600 mb-4">{module.description}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-slate-900">{module.count}</div>
|
||||
<div className="text-xs text-slate-500">{module.metric}</div>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] group-hover:translate-x-1 transition" />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</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-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-md transition group"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white">
|
||||
<ListIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Add Keywords</h4>
|
||||
<p className="text-xs text-slate-600">Discover opportunities</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/planner/clusters"
|
||||
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-md transition group"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white">
|
||||
<GroupIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Auto Cluster</h4>
|
||||
<p className="text-xs text-slate-600">Group keywords</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0bbf87] transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/planner/ideas"
|
||||
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-md transition group"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white">
|
||||
<BoltIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Generate Ideas</h4>
|
||||
<p className="text-xs text-slate-600">Create content ideas</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#ff7a00] transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/automation"
|
||||
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-md transition group"
|
||||
>
|
||||
<div className="size-12 rounded-lg bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white">
|
||||
<PieChartIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Setup Automation</h4>
|
||||
<p className="text-xs text-slate-600">Automate workflows</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#5d4ae3] transition" />
|
||||
</Link>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
{/* Next Actions */}
|
||||
{nextActions.length > 0 && (
|
||||
<ComponentCard title="Next Actions" desc="Actionable items requiring attention">
|
||||
|
||||
Reference in New Issue
Block a user