enhanced ui
This commit is contained in:
Desktop
@@ -4,6 +4,8 @@ import PageMeta from "../../components/common/PageMeta";
|
||||
import ComponentCard from "../../components/common/ComponentCard";
|
||||
import { ProgressBar } from "../../components/ui/progress";
|
||||
import { ApexOptions } from "apexcharts";
|
||||
import WorkflowPipeline, { WorkflowStep } from "../../components/dashboard/WorkflowPipeline";
|
||||
import EnhancedMetricCard from "../../components/dashboard/EnhancedMetricCard";
|
||||
|
||||
const Chart = lazy(() => import("react-apexcharts").then((mod) => ({ default: mod.default })));
|
||||
import {
|
||||
@@ -444,174 +446,141 @@ export default function PlannerDashboard() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Top Status Cards */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 md:gap-6">
|
||||
<Link
|
||||
to="/planner/keywords"
|
||||
className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6 hover:shadow-lg transition-all cursor-pointer group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-brand-500"></div>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Keywords Ready</p>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<h4 className="font-bold text-gray-800 text-title-sm dark:text-white/90">
|
||||
{stats.keywords.total.toLocaleString()}
|
||||
</h4>
|
||||
{trends.keywords !== 0 && (
|
||||
<div className={`flex items-center gap-1 text-xs ${trends.keywords > 0 ? 'text-success-500' : 'text-error-500'}`}>
|
||||
{trends.keywords > 0 ? <ArrowUpIcon className="size-3" /> : <ArrowDownIcon className="size-3" />}
|
||||
<span>{Math.abs(trends.keywords)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{stats.keywords.mapped} mapped • {stats.keywords.unmapped} unmapped
|
||||
{/* Hero Section - Key Metric */}
|
||||
<div className="rounded-2xl border border-gray-200 bg-gradient-to-br from-brand-50 to-white dark:from-brand-500/10 dark:to-gray-800/50 dark:border-gray-800 p-6 md:p-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">Planning Progress</p>
|
||||
<h3 className="mt-2 text-3xl font-bold text-gray-800 dark:text-white/90">
|
||||
{stats.ideas.queued > 0 ? (
|
||||
<>
|
||||
{stats.ideas.queued} Ideas Ready for Content Generation
|
||||
</>
|
||||
) : stats.ideas.total > 0 ? (
|
||||
<>
|
||||
{stats.ideas.total} Ideas Generated
|
||||
</>
|
||||
) : stats.clusters.total > 0 ? (
|
||||
<>
|
||||
{stats.clusters.total} Clusters Built
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{stats.keywords.total} Keywords Ready
|
||||
</>
|
||||
)}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
{stats.keywords.total} keywords • {stats.clusters.total} clusters • {stats.ideas.total} ideas
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-12 h-12 bg-blue-50 rounded-xl dark:bg-blue-500/10 group-hover:bg-blue-100 dark:group-hover:bg-blue-500/20 transition-colors">
|
||||
<ListIcon className="text-brand-500 size-6" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/planner/clusters"
|
||||
className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6 hover:shadow-lg transition-all cursor-pointer group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-success-500"></div>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Clusters Built</p>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<h4 className="font-bold text-gray-800 text-title-sm dark:text-white/90">
|
||||
{stats.clusters.total.toLocaleString()}
|
||||
</h4>
|
||||
{trends.clusters !== 0 && (
|
||||
<div className={`flex items-center gap-1 text-xs ${trends.clusters > 0 ? 'text-success-500' : 'text-error-500'}`}>
|
||||
{trends.clusters > 0 ? <ArrowUpIcon className="size-3" /> : <ArrowDownIcon className="size-3" />}
|
||||
<span>{Math.abs(trends.clusters)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{stats.clusters.totalVolume.toLocaleString()} total volume • {stats.clusters.avgKeywords} avg keywords
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-12 h-12 bg-green-50 rounded-xl dark:bg-green-500/10 group-hover:bg-green-100 dark:group-hover:bg-green-500/20 transition-colors">
|
||||
<GroupIcon className="text-success-500 size-6" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/planner/ideas"
|
||||
className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6 hover:shadow-lg transition-all cursor-pointer group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-warning-500"></div>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Ideas Generated</p>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<h4 className="font-bold text-gray-800 text-title-sm dark:text-white/90">
|
||||
{stats.ideas.total.toLocaleString()}
|
||||
</h4>
|
||||
{trends.ideas !== 0 && (
|
||||
<div className={`flex items-center gap-1 text-xs ${trends.ideas > 0 ? 'text-success-500' : 'text-error-500'}`}>
|
||||
{trends.ideas > 0 ? <ArrowUpIcon className="size-3" /> : <ArrowDownIcon className="size-3" />}
|
||||
<span>{Math.abs(trends.ideas)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{stats.ideas.queued} queued • {stats.ideas.notQueued} pending
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-12 h-12 bg-amber-50 rounded-xl dark:bg-amber-500/10 group-hover:bg-amber-100 dark:group-hover:bg-amber-500/20 transition-colors">
|
||||
<BoltIcon className="text-warning-500 size-6" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/planner/keywords"
|
||||
className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6 hover:shadow-lg transition-all cursor-pointer group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute left-0 top-0 bottom-0 w-1 bg-purple-500"></div>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Mapping Progress</p>
|
||||
<h4 className="mt-2 font-bold text-gray-800 text-title-sm dark:text-white/90">
|
||||
{keywordMappingPct}%
|
||||
</h4>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{stats.keywords.mapped} of {stats.keywords.total} keywords mapped
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-12 h-12 bg-purple-50 rounded-xl dark:bg-purple-500/10 group-hover:bg-purple-100 dark:group-hover:bg-purple-500/20 transition-colors">
|
||||
<PieChartIcon className="text-purple-500 size-6" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Planner Workflow Steps */}
|
||||
<ComponentCard title="Planner Workflow Steps" desc="Track your planning progress">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{workflowSteps.map((step) => (
|
||||
<Link
|
||||
key={step.number}
|
||||
to={step.path}
|
||||
className="rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-white p-4 dark:from-gray-900/50 dark:to-gray-800/50 dark:border-gray-800 hover:border-brand-300 hover:bg-gradient-to-br hover:from-brand-50 hover:to-white dark:hover:from-brand-500/10 dark:hover:to-gray-800/50 transition-all group"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className={`flex items-center justify-center w-10 h-10 rounded-full text-sm font-bold ${
|
||||
step.status === "completed"
|
||||
? "bg-success-500 text-white"
|
||||
: step.status === "in_progress"
|
||||
? "bg-warning-500 text-white"
|
||||
: "bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
|
||||
}`}>
|
||||
{step.status === "completed" ? <CheckCircleIcon className="size-5" /> : step.number}
|
||||
</div>
|
||||
<h4 className="font-medium text-gray-800 dark:text-white/90">{step.title}</h4>
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-brand-500">{keywordMappingPct}%</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Mapped</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm mb-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{step.status === "completed" ? (
|
||||
<>
|
||||
<CheckCircleIcon className="size-4 text-success-500" />
|
||||
<span className="text-gray-600 dark:text-gray-300 font-medium">Completed</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TimeIcon className="size-4 text-amber-500" />
|
||||
<span className="text-gray-600 dark:text-gray-300 font-medium">Pending</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-success-500">{clustersIdeasPct}%</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">With Ideas</div>
|
||||
</div>
|
||||
{step.count !== null && (
|
||||
<p className="text-xs text-gray-600 dark:text-gray-400 mb-2">
|
||||
{step.count} {step.title.includes("Keywords") ? "keywords" : step.title.includes("Clusters") ? "clusters" : step.title.includes("Ideas") ? "ideas" : "items"}
|
||||
</p>
|
||||
)}
|
||||
{step.status === "pending" && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
navigate(step.path);
|
||||
}}
|
||||
className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-brand-500 hover:text-brand-600 cursor-pointer group-hover:translate-x-1 transition-transform"
|
||||
>
|
||||
Start Now <ArrowRightIcon className="size-3" />
|
||||
</button>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-warning-500">{ideasQueuedPct}%</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">Queued</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Metric Cards */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 md:gap-6">
|
||||
<EnhancedMetricCard
|
||||
title="Keywords Ready"
|
||||
value={stats.keywords.total}
|
||||
subtitle={`${stats.keywords.mapped} mapped • ${stats.keywords.unmapped} unmapped`}
|
||||
trend={trends.keywords}
|
||||
icon={<ListIcon className="size-6" />}
|
||||
accentColor="blue"
|
||||
href="/planner/keywords"
|
||||
details={[
|
||||
{ label: "Total Keywords", value: stats.keywords.total },
|
||||
{ label: "Mapped", value: stats.keywords.mapped },
|
||||
{ label: "Unmapped", value: stats.keywords.unmapped },
|
||||
{ label: "Active", value: stats.keywords.byStatus.active || 0 },
|
||||
{ label: "Pending", value: stats.keywords.byStatus.pending || 0 },
|
||||
]}
|
||||
/>
|
||||
|
||||
<EnhancedMetricCard
|
||||
title="Clusters Built"
|
||||
value={stats.clusters.total}
|
||||
subtitle={`${stats.clusters.totalVolume.toLocaleString()} total volume • ${stats.clusters.avgKeywords} avg keywords`}
|
||||
trend={trends.clusters}
|
||||
icon={<GroupIcon className="size-6" />}
|
||||
accentColor="green"
|
||||
href="/planner/clusters"
|
||||
details={[
|
||||
{ label: "Total Clusters", value: stats.clusters.total },
|
||||
{ label: "With Ideas", value: stats.clusters.withIdeas },
|
||||
{ label: "Without Ideas", value: stats.clusters.withoutIdeas },
|
||||
{ label: "Total Volume", value: stats.clusters.totalVolume.toLocaleString() },
|
||||
{ label: "Avg Keywords", value: stats.clusters.avgKeywords },
|
||||
]}
|
||||
/>
|
||||
|
||||
<EnhancedMetricCard
|
||||
title="Ideas Generated"
|
||||
value={stats.ideas.total}
|
||||
subtitle={`${stats.ideas.queued} queued • ${stats.ideas.notQueued} pending`}
|
||||
trend={trends.ideas}
|
||||
icon={<BoltIcon className="size-6" />}
|
||||
accentColor="orange"
|
||||
href="/planner/ideas"
|
||||
details={[
|
||||
{ label: "Total Ideas", value: stats.ideas.total },
|
||||
{ label: "Queued", value: stats.ideas.queued },
|
||||
{ label: "Not Queued", value: stats.ideas.notQueued },
|
||||
{ label: "New", value: stats.ideas.byStatus.new || 0 },
|
||||
{ label: "Scheduled", value: stats.ideas.byStatus.scheduled || 0 },
|
||||
]}
|
||||
/>
|
||||
|
||||
<EnhancedMetricCard
|
||||
title="Mapping Progress"
|
||||
value={`${keywordMappingPct}%`}
|
||||
subtitle={`${stats.keywords.mapped} of ${stats.keywords.total} keywords mapped`}
|
||||
icon={<PieChartIcon className="size-6" />}
|
||||
accentColor="purple"
|
||||
href="/planner/keywords"
|
||||
details={[
|
||||
{ label: "Mapping Progress", value: `${keywordMappingPct}%` },
|
||||
{ label: "Mapped Keywords", value: stats.keywords.mapped },
|
||||
{ label: "Total Keywords", value: stats.keywords.total },
|
||||
{ label: "Unmapped", value: stats.keywords.unmapped },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Interactive Workflow Pipeline */}
|
||||
<ComponentCard title="Planner Workflow Pipeline" desc="Track your planning progress through each stage">
|
||||
<WorkflowPipeline
|
||||
steps={workflowSteps.map(step => ({
|
||||
number: step.number,
|
||||
title: step.title,
|
||||
status: step.status === "completed" ? "completed" : step.status === "in_progress" ? "in_progress" : "pending",
|
||||
count: step.count || 0,
|
||||
path: step.path,
|
||||
description: step.title,
|
||||
details: step.status === "completed"
|
||||
? `✓ ${step.title} completed with ${step.count} items`
|
||||
: step.status === "pending"
|
||||
? `→ ${step.title} pending - ${step.count} items ready`
|
||||
: `⟳ ${step.title} in progress`,
|
||||
}))}
|
||||
onStepClick={(step) => {
|
||||
navigate(step.path);
|
||||
}}
|
||||
showConnections={true}
|
||||
/>
|
||||
</ComponentCard>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
|
||||
Reference in New Issue
Block a user