New Dashboard

frontend/src/App.tsx

@@ -49,7 +49,6 @@ const SeedKeywords = lazy(() => import("./pages/Reference/SeedKeywords"));
 const ReferenceIndustries = lazy(() => import("./pages/Reference/Industries"));
 
 // Other Pages - Lazy loaded
-const Analytics = lazy(() => import("./pages/Analytics"));
 const Schedules = lazy(() => import("./pages/Schedules"));
 
 // Settings - Lazy loaded
@@ -253,11 +252,6 @@ export default function App() {
             } />
 
             {/* Other Pages */}
-            <Route path="/analytics" element={
-              <Suspense fallback={null}>
-                  <Analytics />
-                </Suspense>
-            } />
             <Route path="/schedules" element={
               <Suspense fallback={null}>
                   <Schedules />

frontend/src/config/routes.config.ts

@@ -51,11 +51,6 @@ export const routes: RouteConfig[] = [
       { path: '/thinker/profile', label: 'Profile', breadcrumb: 'Profile' },
     ],
   },
-  {
-    path: '/analytics',
-    label: 'Analytics',
-    icon: 'Analytics',
-  },
   {
     path: '/schedules',
     label: 'Schedules',

frontend/src/layout/AppSidebar.tsx

@@ -68,11 +68,6 @@ const AppSidebar: React.FC = () => {
           name: "Dashboard",
           path: "/",
         },
-        {
-          icon: <PieChartIcon />,
-          name: "Analytics",
-          path: "/analytics",
-        },
         {
           icon: <DocsIcon />,
           name: "Industry / Sectors",

frontend/src/pages/Dashboard/Home.tsx

@@ -1,14 +1,546 @@
+import { useEffect, useState } 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 { Card } from "../../components/ui/card";
+import Badge from "../../components/ui/badge/Badge";
+import { 
+  ListIcon, 
+  FileIcon,
+  FileTextIcon,
+  BoltIcon,
+  GroupIcon,
+  CheckCircleIcon,
+  ArrowRightIcon,
+  PlugInIcon
+} 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";
+
+interface AppInsights {
+  totalKeywords: number;
+  totalClusters: number;
+  totalIdeas: number;
+  totalTasks: number;
+  totalContent: number;
+  totalImages: number;
+  publishedContent: number;
+  workflowCompletionRate: number;
+}
+
+const workflowSteps = [
+  {
+    id: 1,
+    title: "Discover Keywords",
+    description: "Find high-volume keywords from our global database",
+    icon: <ListIcon />,
+    color: "blue",
+    path: "/planner/keyword-opportunities"
+  },
+  {
+    id: 2,
+    title: "Cluster Keywords",
+    description: "Group related keywords into strategic clusters",
+    icon: <GroupIcon />,
+    color: "purple",
+    path: "/planner/clusters"
+  },
+  {
+    id: 3,
+    title: "Generate Ideas",
+    description: "AI creates content ideas from keyword clusters",
+    icon: <BoltIcon />,
+    color: "orange",
+    path: "/planner/ideas"
+  },
+  {
+    id: 4,
+    title: "Create Tasks",
+    description: "Convert ideas into actionable writing tasks",
+    icon: <CheckCircleIcon />,
+    color: "indigo",
+    path: "/writer/tasks"
+  },
+  {
+    id: 5,
+    title: "Write Content",
+    description: "AI generates full content pieces automatically",
+    icon: <FileTextIcon />,
+    color: "green",
+    path: "/writer/content"
+  },
+  {
+    id: 6,
+    title: "Generate Images",
+    description: "Create featured and in-article images",
+    icon: <FileIcon />,
+    color: "pink",
+    path: "/writer/images"
+  },
+  {
+    id: 7,
+    title: "Publish",
+    description: "Content ready for publication",
+    icon: <CheckCircleIcon />,
+    color: "success",
+    path: "/writer/published"
+  }
+];
 
 export default function Home() {
+  const toast = useToast();
+  const { activeSite } = useSiteStore();
+  const { activeSector } = useSectorStore();
+  
+  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
+    },
+    ideas: {
+      enabled: false,
+      autoGenerate: true,
+      ideasPerCluster: 3
+    },
+    content: {
+      enabled: false,
+      autoCreateTasks: true,
+      autoGenerateContent: false
+    },
+    images: {
+      enabled: false,
+      autoGenerate: false
+    }
+  });
+
+  const fetchAppInsights = async () => {
+    try {
+      setLoading(true);
+      
+      // Fetch all data in parallel (without site/sector filters for app-wide view)
+      const [keywordsRes, clustersRes, ideasRes, tasksRes, contentRes, imagesRes] = await Promise.all([
+        fetchKeywords({ page_size: 1 }), // Just get count
+        fetchClusters({ page_size: 1 }),
+        fetchContentIdeas({ page_size: 1 }),
+        fetchTasks({ page_size: 1 }),
+        fetchContent({ page_size: 1 }),
+        fetchContentImages({ page_size: 1 })
+      ]);
+
+      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;
+
+      // 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;
+
+      setInsights({
+        totalKeywords,
+        totalClusters,
+        totalIdeas,
+        totalTasks,
+        totalContent,
+        totalImages,
+        publishedContent,
+        workflowCompletionRate
+      });
+    } 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 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"
+  };
+
   return (
     <>
       <PageMeta
         title="Dashboard - IGNY8"
-        description="IGNY8 Dashboard"
+        description="IGNY8 AI-Powered Content Creation Dashboard"
       />
+      
+      {/* Hero Section */}
+      <div className="mb-8">
+        <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">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">
+              AI-Powered Content Creation Workflow
+            </h1>
+            <p className="text-xl text-white/90 mb-6 max-w-2xl">
+              Transform keywords into published content with intelligent automation. 
+              From discovery to publication, IGNY8 streamlines your entire content creation process.
+            </p>
+            <div className="flex flex-wrap gap-4">
+              <Link 
+                to="/planner/keyword-opportunities"
+                className="px-6 py-3 bg-white text-brand-600 rounded-lg font-semibold hover:bg-gray-100 transition-colors inline-flex items-center gap-2"
+              >
+                Get Started
+                <ArrowRightIcon className="size-5" />
+              </Link>
+              <Link 
+                to="/schedules"
+                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
+                <PlugInIcon className="size-5" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* App-Wide Insights */}
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+          App-Wide Insights
+        </h2>
+        {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>
+            ))}
+          </div>
+        ) : insights ? (
+          <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"
+            >
+              <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="size-8">
+                      {step.icon}
+                    </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>
+            </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>
+              </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>
+            )}
+          </Card>
+
+          {/* 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>
+              </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>
+            )}
+          </Card>
+
+          {/* 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>
+              </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>
+            )}
+          </Card>
+
+          {/* 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 />