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 { ProgressBar } from "../../components/ui/progress"; import { ApexOptions } from "apexcharts"; import { ListIcon, FileIcon, FileTextIcon, BoltIcon, GroupIcon, CheckCircleIcon, ArrowRightIcon, PlugInIcon, PencilIcon, UserIcon, PieChartIcon, ClockIcon, PaperPlaneIcon, } from "../../icons"; import { fetchKeywords, fetchClusters, fetchContentIdeas, fetchTasks, fetchContent, fetchContentImages } from "../../services/api"; 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; totalIdeas: number; totalTasks: number; totalContent: number; totalImages: number; publishedContent: number; workflowCompletionRate: number; contentThisWeek: number; contentThisMonth: number; automationEnabled: boolean; } const workflowSteps = [ { id: 1, title: "Discover Keywords", description: "Find high-volume keywords from our global database", icon: , color: "blue", path: "/planner/keyword-opportunities" }, { id: 2, title: "Cluster Keywords", description: "Group related keywords into strategic clusters", icon: , color: "purple", path: "/planner/clusters" }, { id: 3, title: "Generate Ideas", description: "AI creates content ideas from keyword clusters", icon: , color: "orange", path: "/planner/ideas" }, { id: 4, title: "Create Tasks", description: "Convert ideas into actionable writing tasks", icon: , color: "indigo", path: "/writer/tasks" }, { id: 5, title: "Write Content", description: "AI generates full content pieces automatically", icon: , color: "green", path: "/writer/content" }, { id: 6, title: "Generate Images", description: "Create featured and in-article images", icon: , color: "pink", path: "/writer/images" }, { id: 7, title: "Publish", description: "Content ready for publication", icon: , color: "success", path: "/writer/published" } ]; export default function Home() { const toast = useToast(); const { activeSite } = useSiteStore(); const { activeSector } = useSectorStore(); const [insights, setInsights] = useState(null); const [loading, setLoading] = useState(true); const [lastUpdated, setLastUpdated] = useState(new Date()); const appModules = [ { title: "Planner", description: "Keyword research, clustering, and content planning", icon: PieChartIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", path: "/planner", count: insights?.totalClusters || 0, status: "active", metric: `${insights?.totalKeywords || 0} keywords`, }, { title: "Writer", description: "AI content generation, editing, and publishing", icon: PencilIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", path: "/writer", count: insights?.totalContent || 0, status: "active", metric: `${insights?.publishedContent || 0} published`, }, { title: "Thinker", description: "Prompts, author profiles, and content strategies", icon: BoltIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", path: "/thinker", count: 0, status: "active", metric: "24 prompts", }, { title: "Automation", description: "Workflow automation and scheduled tasks", icon: PlugInIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", 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); const [keywordsRes, clustersRes, ideasRes, tasksRes, contentRes, imagesRes] = await Promise.all([ 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 }), fetchContent({ page_size: 1, site_id: undefined }), fetchContentImages({ page_size: 1, site_id: undefined }) ]); const totalKeywords = keywordsRes.count || 0; const totalClusters = clustersRes.count || 0; const totalIdeas = ideasRes.count || 0; const totalTasks = tasksRes.count || 0; const totalContent = contentRes.count || 0; const totalImages = imagesRes.count || 0; const publishedContent = 0; // Placeholder const workflowCompletionRate = totalKeywords > 0 ? Math.round((publishedContent / totalKeywords) * 100) : 0; setInsights({ totalKeywords, totalClusters, totalIdeas, totalTasks, totalContent, totalImages, publishedContent, 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}`); } finally { setLoading(false); } }; useEffect(() => { fetchAppInsights(); }, [activeSite, activeSector]); 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: ["var(--color-primary)", "var(--color-success)", "var(--color-purple)"], 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 ( <>
{/* Hero Section */}

AI-Powered Content Creation Workflow

Transform keywords into published content with intelligent automation. From discovery to publication, IGNY8 streamlines your entire content creation process.

Get Started Configure Automation
{/* Key Metrics */}
} accentColor="blue" trend={0} href="/planner/keywords" /> } accentColor="green" trend={0} href="/writer/content" /> } accentColor="purple" trend={0} href="/writer/images" /> } accentColor="success" trend={0} />
{/* App Modules */}
{appModules.map((module) => { const Icon = module.icon; return (
{module.status === "coming-soon" && ( Soon )}

{module.title}

{module.description}

{module.count}
{module.metric}
); })}
{/* Activity Chart & Recent Activity */}
Loading chart...
}>
{recentActivity.map((activity) => { const Icon = activity.icon; return (

{activity.type}

{formatTimeAgo(activity.timestamp)}

{activity.description}

); })}
{/* Workflow Pipeline */}
{workflowSteps.map((step, index) => (
{React.cloneElement(step.icon as React.ReactElement, { className: 'w-8 h-8 flex-shrink-0 text-white' })}
Step {step.id}

{step.title}

{step.description}

))}
{/* Quick Actions */}

Add Keywords

Discover new opportunities

Create Content

Generate new content

Setup Automation

Configure workflows

Manage Prompts

Edit AI instructions

{/* Credit Balance & Usage */}
); }