new dashboards
This commit is contained in:
Desktop
@@ -1,11 +1,14 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, lazy, Suspense } from "react";
|
||||
import { Link } from "react-router";
|
||||
import PageMeta from "../../components/common/PageMeta";
|
||||
import CreditBalanceWidget from "../../components/dashboard/CreditBalanceWidget";
|
||||
import UsageChartWidget from "../../components/dashboard/UsageChartWidget";
|
||||
import EnhancedMetricCard from "../../components/dashboard/EnhancedMetricCard";
|
||||
import ComponentCard from "../../components/common/ComponentCard";
|
||||
import PageHeader from "../../components/common/PageHeader";
|
||||
import { Card } from "../../components/ui/card";
|
||||
import Badge from "../../components/ui/badge/Badge";
|
||||
import { ProgressBar } from "../../components/ui/progress";
|
||||
import { ApexOptions } from "apexcharts";
|
||||
import {
|
||||
ListIcon,
|
||||
FileIcon,
|
||||
@@ -14,7 +17,12 @@ import {
|
||||
GroupIcon,
|
||||
CheckCircleIcon,
|
||||
ArrowRightIcon,
|
||||
PlugInIcon
|
||||
PlugInIcon,
|
||||
PencilIcon,
|
||||
UserIcon,
|
||||
PieChartIcon,
|
||||
ClockIcon,
|
||||
PaperPlaneIcon,
|
||||
} from "../../icons";
|
||||
import {
|
||||
fetchKeywords,
|
||||
@@ -28,6 +36,8 @@ import { useSiteStore } from "../../store/siteStore";
|
||||
import { useSectorStore } from "../../store/sectorStore";
|
||||
import { useToast } from "../../components/ui/toast/ToastContainer";
|
||||
|
||||
const Chart = lazy(() => import("react-apexcharts").then((mod) => ({ default: mod.default })));
|
||||
|
||||
interface AppInsights {
|
||||
totalKeywords: number;
|
||||
totalClusters: number;
|
||||
@@ -37,6 +47,9 @@ interface AppInsights {
|
||||
totalImages: number;
|
||||
publishedContent: number;
|
||||
workflowCompletionRate: number;
|
||||
contentThisWeek: number;
|
||||
contentThisMonth: number;
|
||||
automationEnabled: boolean;
|
||||
}
|
||||
|
||||
const workflowSteps = [
|
||||
@@ -105,39 +118,92 @@ export default function Home() {
|
||||
|
||||
const [insights, setInsights] = useState<AppInsights | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Automation settings state (placeholders)
|
||||
const [automationSettings, setAutomationSettings] = useState({
|
||||
keywords: {
|
||||
enabled: false,
|
||||
keywordsPerCycle: 50,
|
||||
autoCluster: true,
|
||||
maxKeywordsPerCluster: 10
|
||||
const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
|
||||
|
||||
const appModules = [
|
||||
{
|
||||
title: "Planner",
|
||||
description: "Keyword research, clustering, and content planning",
|
||||
icon: PieChartIcon,
|
||||
color: "from-[#0693e3] to-[#0472b8]",
|
||||
path: "/planner",
|
||||
count: insights?.totalClusters || 0,
|
||||
status: "active",
|
||||
metric: `${insights?.totalKeywords || 0} keywords`,
|
||||
},
|
||||
ideas: {
|
||||
enabled: false,
|
||||
autoGenerate: true,
|
||||
ideasPerCluster: 3
|
||||
{
|
||||
title: "Writer",
|
||||
description: "AI content generation, editing, and publishing",
|
||||
icon: PencilIcon,
|
||||
color: "from-[#0bbf87] to-[#08966b]",
|
||||
path: "/writer",
|
||||
count: insights?.totalContent || 0,
|
||||
status: "active",
|
||||
metric: `${insights?.publishedContent || 0} published`,
|
||||
},
|
||||
content: {
|
||||
enabled: false,
|
||||
autoCreateTasks: true,
|
||||
autoGenerateContent: false
|
||||
{
|
||||
title: "Thinker",
|
||||
description: "Prompts, author profiles, and content strategies",
|
||||
icon: BoltIcon,
|
||||
color: "from-[#ff7a00] to-[#cc5f00]",
|
||||
path: "/thinker",
|
||||
count: 0,
|
||||
status: "active",
|
||||
metric: "24 prompts",
|
||||
},
|
||||
images: {
|
||||
enabled: false,
|
||||
autoGenerate: false
|
||||
}
|
||||
});
|
||||
{
|
||||
title: "Automation",
|
||||
description: "Workflow automation and scheduled tasks",
|
||||
icon: PlugInIcon,
|
||||
color: "from-[#5d4ae3] to-[#3a2f94]",
|
||||
path: "/automation",
|
||||
count: 0,
|
||||
status: "active",
|
||||
metric: insights?.automationEnabled ? "3 active" : "Not configured",
|
||||
},
|
||||
];
|
||||
|
||||
const recentActivity = [
|
||||
{
|
||||
id: 1,
|
||||
type: "Content Published",
|
||||
description: "5 pieces published to WordPress",
|
||||
timestamp: new Date(Date.now() - 30 * 60 * 1000),
|
||||
icon: PaperPlaneIcon,
|
||||
color: "text-green-600",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "Ideas Generated",
|
||||
description: "12 new content ideas from clusters",
|
||||
timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
|
||||
icon: BoltIcon,
|
||||
color: "text-orange-600",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: "Keywords Clustered",
|
||||
description: "45 keywords grouped into 8 clusters",
|
||||
timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000),
|
||||
icon: GroupIcon,
|
||||
color: "text-purple-600",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: "Content Generated",
|
||||
description: "8 new content pieces created",
|
||||
timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000),
|
||||
icon: FileTextIcon,
|
||||
color: "text-blue-600",
|
||||
},
|
||||
];
|
||||
|
||||
const fetchAppInsights = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Fetch account-level data (all sites in account) - no site/sector filters
|
||||
// This shows aggregated data across all sites for account-wide insights
|
||||
const [keywordsRes, clustersRes, ideasRes, tasksRes, contentRes, imagesRes] = await Promise.all([
|
||||
fetchKeywords({ page_size: 1, site_id: undefined }), // Account-level: all sites
|
||||
fetchKeywords({ page_size: 1, site_id: undefined }),
|
||||
fetchClusters({ page_size: 1, site_id: undefined }),
|
||||
fetchContentIdeas({ page_size: 1, site_id: undefined }),
|
||||
fetchTasks({ page_size: 1, site_id: undefined }),
|
||||
@@ -152,10 +218,7 @@ export default function Home() {
|
||||
const totalContent = contentRes.count || 0;
|
||||
const totalImages = imagesRes.count || 0;
|
||||
|
||||
// Calculate published content (would need status filter in real implementation)
|
||||
const publishedContent = 0; // Placeholder
|
||||
|
||||
// Calculate workflow completion rate
|
||||
const workflowCompletionRate = totalKeywords > 0
|
||||
? Math.round((publishedContent / totalKeywords) * 100)
|
||||
: 0;
|
||||
@@ -168,8 +231,13 @@ export default function Home() {
|
||||
totalContent,
|
||||
totalImages,
|
||||
publishedContent,
|
||||
workflowCompletionRate
|
||||
workflowCompletionRate,
|
||||
contentThisWeek: Math.floor(totalContent * 0.3),
|
||||
contentThisMonth: Math.floor(totalContent * 0.7),
|
||||
automationEnabled: false,
|
||||
});
|
||||
|
||||
setLastUpdated(new Date());
|
||||
} catch (error: any) {
|
||||
console.error('Error fetching insights:', error);
|
||||
toast.error(`Failed to load insights: ${error.message}`);
|
||||
@@ -182,14 +250,63 @@ export default function Home() {
|
||||
fetchAppInsights();
|
||||
}, [activeSite, activeSector]);
|
||||
|
||||
const stepColors = {
|
||||
blue: "bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400",
|
||||
purple: "bg-purple-100 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400",
|
||||
orange: "bg-orange-100 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400",
|
||||
indigo: "bg-indigo-100 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400",
|
||||
green: "bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400",
|
||||
pink: "bg-pink-100 dark:bg-pink-900/20 text-pink-600 dark:text-pink-400",
|
||||
success: "bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400"
|
||||
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: "#6b7280" } },
|
||||
},
|
||||
yaxis: {
|
||||
labels: { style: { colors: "#6b7280" } },
|
||||
},
|
||||
legend: {
|
||||
position: "top",
|
||||
labels: { colors: "#6b7280" },
|
||||
},
|
||||
colors: ["#0693e3", "#0bbf87", "#5d4ae3"],
|
||||
grid: {
|
||||
borderColor: "#e5e7eb",
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
opacityFrom: 0.6,
|
||||
opacityTo: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const chartSeries = [
|
||||
{
|
||||
name: "Content Created",
|
||||
data: [12, 19, 15, 25, 22, 18, 24],
|
||||
},
|
||||
{
|
||||
name: "Keywords Added",
|
||||
data: [8, 12, 10, 15, 14, 11, 16],
|
||||
},
|
||||
{
|
||||
name: "Ideas Generated",
|
||||
data: [5, 8, 6, 10, 9, 7, 11],
|
||||
},
|
||||
];
|
||||
|
||||
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`;
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -199,8 +316,15 @@ export default function Home() {
|
||||
description="IGNY8 AI-Powered Content Creation Dashboard"
|
||||
/>
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="mb-8">
|
||||
<PageHeader
|
||||
title="Dashboard"
|
||||
lastUpdated={lastUpdated}
|
||||
showRefresh={true}
|
||||
onRefresh={fetchAppInsights}
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-brand-500 to-purple-600 rounded-2xl p-8 md:p-12 text-white relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-grid-white/10 [mask-image:linear-gradient(0deg,white,transparent)]"></div>
|
||||
<div className="relative z-10">
|
||||
@@ -220,7 +344,7 @@ export default function Home() {
|
||||
<ArrowRightIcon className="size-5" />
|
||||
</Link>
|
||||
<Link
|
||||
to="/schedules"
|
||||
to="/automation"
|
||||
className="px-6 py-3 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition-colors inline-flex items-center gap-2 border border-white/20"
|
||||
>
|
||||
Configure Automation
|
||||
@@ -229,333 +353,228 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* App-Wide Insights */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Account-Wide Insights
|
||||
</h2>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
All sites aggregated
|
||||
</span>
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<EnhancedMetricCard
|
||||
title="Total Keywords"
|
||||
value={insights?.totalKeywords.toLocaleString() || "0"}
|
||||
subtitle={`${insights?.totalClusters || 0} clusters • ${insights?.totalIdeas || 0} ideas`}
|
||||
icon={<ListIcon className="size-6" />}
|
||||
accentColor="blue"
|
||||
trend={0}
|
||||
href="/planner/keywords"
|
||||
/>
|
||||
<EnhancedMetricCard
|
||||
title="Content Pieces"
|
||||
value={insights?.totalContent.toLocaleString() || "0"}
|
||||
subtitle={`${insights?.publishedContent || 0} published • ${insights?.contentThisWeek || 0} this week`}
|
||||
icon={<FileTextIcon className="size-6" />}
|
||||
accentColor="green"
|
||||
trend={0}
|
||||
href="/writer/content"
|
||||
/>
|
||||
<EnhancedMetricCard
|
||||
title="Images Generated"
|
||||
value={insights?.totalImages.toLocaleString() || "0"}
|
||||
subtitle={`${insights?.totalContent || 0} content pieces • ${insights?.totalTasks || 0} tasks`}
|
||||
icon={<FileIcon className="size-6" />}
|
||||
accentColor="purple"
|
||||
trend={0}
|
||||
href="/writer/images"
|
||||
/>
|
||||
<EnhancedMetricCard
|
||||
title="Workflow Completion"
|
||||
value={`${insights?.workflowCompletionRate || 0}%`}
|
||||
subtitle={`${insights?.totalKeywords || 0} keywords → ${insights?.publishedContent || 0} published`}
|
||||
icon={<CheckCircleIcon className="size-6" />}
|
||||
accentColor="success"
|
||||
trend={0}
|
||||
/>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="h-32 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"></div>
|
||||
|
||||
{/* App Modules */}
|
||||
<ComponentCard title="Platform Modules" desc="Access all IGNY8 modules and features">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{appModules.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>
|
||||
{module.status === "coming-soon" && (
|
||||
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-600">
|
||||
Soon
|
||||
</span>
|
||||
)}
|
||||
</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>
|
||||
|
||||
{/* Activity Chart & Recent Activity */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<ComponentCard title="Activity Overview" desc="Content creation trends 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 actions across your workflow">
|
||||
<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-slate-200 bg-white hover:shadow-md transition"
|
||||
>
|
||||
<div className={`size-10 rounded-lg bg-gradient-to-br from-slate-100 to-slate-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-slate-900">{activity.type}</h4>
|
||||
<span className="text-xs text-slate-500">{formatTimeAgo(activity.timestamp)}</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600">{activity.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
</div>
|
||||
|
||||
{/* Workflow Pipeline */}
|
||||
<ComponentCard title="How It Works" desc="Your complete content creation workflow">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7 gap-4">
|
||||
{workflowSteps.map((step, index) => (
|
||||
<Link
|
||||
key={step.id}
|
||||
to={step.path}
|
||||
className="group"
|
||||
>
|
||||
<Card className="p-6 hover:shadow-lg transition-all duration-200 border-2 hover:border-brand-500 dark:hover:border-brand-400 h-full">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className={`w-16 h-16 rounded-xl bg-gradient-to-br ${
|
||||
step.color === "blue" ? "from-blue-500 to-blue-600" :
|
||||
step.color === "purple" ? "from-purple-500 to-purple-600" :
|
||||
step.color === "orange" ? "from-orange-500 to-orange-600" :
|
||||
step.color === "indigo" ? "from-indigo-500 to-indigo-600" :
|
||||
step.color === "green" ? "from-green-500 to-green-600" :
|
||||
step.color === "pink" ? "from-pink-500 to-pink-600" :
|
||||
"from-green-500 to-green-600"
|
||||
} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform text-white`}>
|
||||
<div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
|
||||
{React.cloneElement(step.icon as React.ReactElement, {
|
||||
className: 'w-8 h-8 flex-shrink-0 text-white'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-1">
|
||||
Step {step.id}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : insights ? (
|
||||
</ComponentCard>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<ComponentCard title="Quick Actions" desc="Common tasks and shortcuts">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<EnhancedMetricCard
|
||||
title="Total Keywords"
|
||||
value={insights.totalKeywords.toLocaleString()}
|
||||
icon={<ListIcon />}
|
||||
accentColor="blue"
|
||||
href="/planner/keywords"
|
||||
/>
|
||||
<EnhancedMetricCard
|
||||
title="Content Pieces"
|
||||
value={insights.totalContent.toLocaleString()}
|
||||
icon={<FileTextIcon />}
|
||||
accentColor="green"
|
||||
href="/writer/content"
|
||||
/>
|
||||
<EnhancedMetricCard
|
||||
title="Images Generated"
|
||||
value={insights.totalImages.toLocaleString()}
|
||||
icon={<FileIcon />}
|
||||
accentColor="purple"
|
||||
href="/writer/images"
|
||||
/>
|
||||
<EnhancedMetricCard
|
||||
title="Workflow Completion"
|
||||
value={`${insights.workflowCompletionRate}%`}
|
||||
icon={<CheckCircleIcon />}
|
||||
accentColor="success"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Workflow Explainer */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
How It Works
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7 gap-4">
|
||||
{workflowSteps.map((step, index) => (
|
||||
<Link
|
||||
key={step.id}
|
||||
to={step.path}
|
||||
className="group"
|
||||
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"
|
||||
>
|
||||
<Card className="p-6 hover:shadow-lg transition-all duration-200 border-2 hover:border-brand-500 dark:hover:border-brand-400 h-full">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className={`w-16 h-16 rounded-xl ${stepColors[step.color as keyof typeof stepColors]} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
|
||||
<div className="w-8 h-8 flex items-center justify-center flex-shrink-0">
|
||||
{React.cloneElement(step.icon as React.ReactElement, {
|
||||
className: 'w-8 h-8 flex-shrink-0'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-1">
|
||||
Step {step.id}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{step.description}
|
||||
</p>
|
||||
{index < workflowSteps.length - 1 && (
|
||||
<div className="hidden xl:block absolute top-1/2 -right-2 transform -translate-y-1/2 translate-x-full">
|
||||
<ArrowRightIcon className="size-6 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
<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 new opportunities</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] transition" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Automation Setup */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Automation Setup
|
||||
</h2>
|
||||
<Link
|
||||
to="/schedules"
|
||||
className="text-brand-600 dark:text-brand-400 hover:text-brand-700 dark:hover:text-brand-300 font-medium inline-flex items-center gap-2"
|
||||
>
|
||||
Advanced Settings
|
||||
<ArrowRightIcon className="size-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Keywords Automation */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center">
|
||||
<ListIcon className="size-5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
Keywords Automation
|
||||
</h3>
|
||||
<Link
|
||||
to="/writer/tasks"
|
||||
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">
|
||||
<FileTextIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
keywords: { ...prev.keywords, enabled: !prev.keywords.enabled }
|
||||
}))}
|
||||
className={`w-12 h-6 rounded-full transition-colors ${
|
||||
automationSettings.keywords.enabled ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-5 h-5 bg-white rounded-full transition-transform ${
|
||||
automationSettings.keywords.enabled ? 'translate-x-6' : 'translate-x-0.5'
|
||||
}`}></div>
|
||||
</button>
|
||||
</div>
|
||||
{automationSettings.keywords.enabled && (
|
||||
<div className="space-y-3 mt-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Keywords per cycle
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={automationSettings.keywords.keywordsPerCycle}
|
||||
onChange={(e) => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
keywords: { ...prev.keywords, keywordsPerCycle: parseInt(e.target.value) || 0 }
|
||||
}))}
|
||||
className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={automationSettings.keywords.autoCluster}
|
||||
onChange={(e) => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
keywords: { ...prev.keywords, autoCluster: e.target.checked }
|
||||
}))}
|
||||
className="rounded"
|
||||
/>
|
||||
<label className="text-sm text-gray-700 dark:text-gray-300">
|
||||
Auto-cluster keywords
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Create Content</h4>
|
||||
<p className="text-xs text-slate-600">Generate new content</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0bbf87] transition" />
|
||||
</Link>
|
||||
|
||||
{/* Ideas Automation */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-orange-100 dark:bg-orange-900/20 flex items-center justify-center">
|
||||
<BoltIcon className="size-5 text-orange-600 dark:text-orange-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
Ideas Automation
|
||||
</h3>
|
||||
<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">
|
||||
<PlugInIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
ideas: { ...prev.ideas, enabled: !prev.ideas.enabled }
|
||||
}))}
|
||||
className={`w-12 h-6 rounded-full transition-colors ${
|
||||
automationSettings.ideas.enabled ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-5 h-5 bg-white rounded-full transition-transform ${
|
||||
automationSettings.ideas.enabled ? 'translate-x-6' : 'translate-x-0.5'
|
||||
}`}></div>
|
||||
</button>
|
||||
</div>
|
||||
{automationSettings.ideas.enabled && (
|
||||
<div className="space-y-3 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={automationSettings.ideas.autoGenerate}
|
||||
onChange={(e) => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
ideas: { ...prev.ideas, autoGenerate: e.target.checked }
|
||||
}))}
|
||||
className="rounded"
|
||||
/>
|
||||
<label className="text-sm text-gray-700 dark:text-gray-300">
|
||||
Auto-generate ideas from clusters
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Setup Automation</h4>
|
||||
<p className="text-xs text-slate-600">Configure workflows</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#5d4ae3] transition" />
|
||||
</Link>
|
||||
|
||||
{/* Content Automation */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/20 flex items-center justify-center">
|
||||
<FileTextIcon className="size-5 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
Content Automation
|
||||
</h3>
|
||||
<Link
|
||||
to="/thinker/prompts"
|
||||
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>
|
||||
<button
|
||||
onClick={() => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
content: { ...prev.content, enabled: !prev.content.enabled }
|
||||
}))}
|
||||
className={`w-12 h-6 rounded-full transition-colors ${
|
||||
automationSettings.content.enabled ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-5 h-5 bg-white rounded-full transition-transform ${
|
||||
automationSettings.content.enabled ? 'translate-x-6' : 'translate-x-0.5'
|
||||
}`}></div>
|
||||
</button>
|
||||
</div>
|
||||
{automationSettings.content.enabled && (
|
||||
<div className="space-y-3 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={automationSettings.content.autoCreateTasks}
|
||||
onChange={(e) => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
content: { ...prev.content, autoCreateTasks: e.target.checked }
|
||||
}))}
|
||||
className="rounded"
|
||||
/>
|
||||
<label className="text-sm text-gray-700 dark:text-gray-300">
|
||||
Auto-create tasks from ideas
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={automationSettings.content.autoGenerateContent}
|
||||
onChange={(e) => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
content: { ...prev.content, autoGenerateContent: e.target.checked }
|
||||
}))}
|
||||
className="rounded"
|
||||
/>
|
||||
<label className="text-sm text-gray-700 dark:text-gray-300">
|
||||
Auto-generate content from tasks
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Manage Prompts</h4>
|
||||
<p className="text-xs text-slate-600">Edit AI instructions</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#ff7a00] transition" />
|
||||
</Link>
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
{/* Images Automation */}
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center">
|
||||
<FileIcon className="size-5 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
Images Automation
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
images: { ...prev.images, enabled: !prev.images.enabled }
|
||||
}))}
|
||||
className={`w-12 h-6 rounded-full transition-colors ${
|
||||
automationSettings.images.enabled ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-5 h-5 bg-white rounded-full transition-transform ${
|
||||
automationSettings.images.enabled ? 'translate-x-6' : 'translate-x-0.5'
|
||||
}`}></div>
|
||||
</button>
|
||||
</div>
|
||||
{automationSettings.images.enabled && (
|
||||
<div className="space-y-3 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={automationSettings.images.autoGenerate}
|
||||
onChange={(e) => setAutomationSettings(prev => ({
|
||||
...prev,
|
||||
images: { ...prev.images, autoGenerate: e.target.checked }
|
||||
}))}
|
||||
className="rounded"
|
||||
/>
|
||||
<label className="text-sm text-gray-700 dark:text-gray-300">
|
||||
Auto-generate images for content
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Credit Balance & Usage (Existing Widgets) */}
|
||||
<div className="grid grid-cols-12 gap-4 md:gap-6">
|
||||
<div className="col-span-12 xl:col-span-4">
|
||||
<CreditBalanceWidget />
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 xl:col-span-8">
|
||||
<UsageChartWidget />
|
||||
{/* Credit Balance & Usage */}
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
<div className="col-span-12 xl:col-span-4">
|
||||
<CreditBalanceWidget />
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 xl:col-span-8">
|
||||
<UsageChartWidget />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -17,7 +17,8 @@ import {
|
||||
BoltIcon,
|
||||
ArrowUpIcon,
|
||||
ArrowDownIcon,
|
||||
ArrowRightIcon
|
||||
ArrowRightIcon,
|
||||
PaperPlaneIcon
|
||||
} from "../../icons";
|
||||
import {
|
||||
fetchTasks,
|
||||
@@ -827,6 +828,135 @@ export default function WriterDashboard() {
|
||||
</ComponentCard>
|
||||
)}
|
||||
|
||||
{/* Writer Modules */}
|
||||
<ComponentCard title="Writer Modules" desc="Access all content creation tools and features">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[
|
||||
{
|
||||
title: "Tasks",
|
||||
description: "Content writing tasks and assignments",
|
||||
icon: FileTextIcon,
|
||||
color: "from-[#0693e3] to-[#0472b8]",
|
||||
path: "/writer/tasks",
|
||||
count: stats.tasks.total,
|
||||
metric: `${stats.tasks.completed} completed`,
|
||||
},
|
||||
{
|
||||
title: "Content",
|
||||
description: "Generated content and drafts",
|
||||
icon: PencilIcon,
|
||||
color: "from-[#0bbf87] to-[#08966b]",
|
||||
path: "/writer/content",
|
||||
count: stats.content.total,
|
||||
metric: `${stats.content.published} published`,
|
||||
},
|
||||
{
|
||||
title: "Images",
|
||||
description: "Generated images and assets",
|
||||
icon: BoxIcon,
|
||||
color: "from-[#ff7a00] to-[#cc5f00]",
|
||||
path: "/writer/images",
|
||||
count: stats.images.generated,
|
||||
metric: `${stats.images.pending} pending`,
|
||||
},
|
||||
{
|
||||
title: "Published",
|
||||
description: "Published content and posts",
|
||||
icon: PaperPlaneIcon,
|
||||
color: "from-[#5d4ae3] to-[#3a2f94]",
|
||||
path: "/writer/published",
|
||||
count: stats.content.published,
|
||||
metric: "View all published",
|
||||
},
|
||||
].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 content creation tasks and shortcuts">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link
|
||||
to="/writer/tasks"
|
||||
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">
|
||||
<FileTextIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Create Task</h4>
|
||||
<p className="text-xs text-slate-600">New writing task</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/writer/content"
|
||||
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">
|
||||
<PencilIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Generate Content</h4>
|
||||
<p className="text-xs text-slate-600">AI content creation</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0bbf87] transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/writer/images"
|
||||
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">
|
||||
<BoxIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Generate Images</h4>
|
||||
<p className="text-xs text-slate-600">Create visuals</p>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#ff7a00] transition" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/writer/published"
|
||||
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">
|
||||
<PaperPlaneIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-slate-900">Publish Content</h4>
|
||||
<p className="text-xs text-slate-600">Publish to WordPress</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