From f7d329bf0929b1b0be66c904b5feede4c3cd35d0 Mon Sep 17 00:00:00 2001 From: Desktop Date: Fri, 14 Nov 2025 04:43:02 +0500 Subject: [PATCH] thinker and automation dashboards --- frontend/src/pages/Automation/Dashboard.tsx | 484 ++++++++++++++++++++ frontend/src/pages/Thinker/Dashboard.tsx | 394 +++++++++++++++- 2 files changed, 866 insertions(+), 12 deletions(-) create mode 100644 frontend/src/pages/Automation/Dashboard.tsx diff --git a/frontend/src/pages/Automation/Dashboard.tsx b/frontend/src/pages/Automation/Dashboard.tsx new file mode 100644 index 00000000..ad47770e --- /dev/null +++ b/frontend/src/pages/Automation/Dashboard.tsx @@ -0,0 +1,484 @@ +import { useEffect, useState, lazy, Suspense } from "react"; +import { Link, useNavigate } from "react-router"; +import PageMeta from "../../components/common/PageMeta"; +import ComponentCard from "../../components/common/ComponentCard"; +import { ProgressBar } from "../../components/ui/progress"; +import { ApexOptions } from "apexcharts"; +import EnhancedMetricCard from "../../components/dashboard/EnhancedMetricCard"; +import PageHeader from "../../components/common/PageHeader"; + +const Chart = lazy(() => import("react-apexcharts").then((mod) => ({ default: mod.default }))); + +import { + BoltIcon, + ClockIcon, + CheckCircleIcon, + ArrowRightIcon, + CalendarIcon, + ListIcon, + GroupIcon, + FileTextIcon, + ArrowUpIcon, + ArrowDownIcon, + PaperPlaneIcon, + CloseIcon, + FileIcon, +} from "../../icons"; +import { useSiteStore } from "../../store/siteStore"; +import { useSectorStore } from "../../store/sectorStore"; + +interface AutomationStats { + activeWorkflows: number; + scheduledTasks: number; + completedToday: number; + successRate: number; + automationCoverage: { + keywords: boolean; + clustering: boolean; + ideas: boolean; + tasks: boolean; + content: boolean; + images: boolean; + publishing: boolean; + }; + recentActivity: Array<{ + id: number; + type: string; + status: string; + timestamp: Date; + itemsProcessed: number; + }>; +} + +export default function AutomationDashboard() { + const navigate = useNavigate(); + const { activeSite } = useSiteStore(); + const { activeSector } = useSectorStore(); + + const [stats, setStats] = useState(null); + const [loading, setLoading] = useState(true); + const [lastUpdated, setLastUpdated] = useState(new Date()); + + // Mock data for now - will be replaced with real API calls + useEffect(() => { + const fetchData = async () => { + setLoading(true); + // Simulate API call + await new Promise((resolve) => setTimeout(resolve, 500)); + + setStats({ + activeWorkflows: 3, + scheduledTasks: 12, + completedToday: 47, + successRate: 94.5, + automationCoverage: { + keywords: true, + clustering: true, + ideas: true, + tasks: false, + content: true, + images: true, + publishing: false, + }, + recentActivity: [ + { + id: 1, + type: "Content Generation", + status: "completed", + timestamp: new Date(Date.now() - 15 * 60 * 1000), + itemsProcessed: 5, + }, + { + id: 2, + type: "Image Generation", + status: "completed", + timestamp: new Date(Date.now() - 45 * 60 * 1000), + itemsProcessed: 8, + }, + { + id: 3, + type: "Keyword Clustering", + status: "completed", + timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), + itemsProcessed: 12, + }, + ], + }); + + setLastUpdated(new Date()); + setLoading(false); + }; + + fetchData(); + }, [activeSite, activeSector]); + + const automationWorkflows = [ + { + id: 1, + name: "Full Pipeline Automation", + description: "Keywords → Clusters → Ideas → Tasks → Content → Images → Publish", + status: "active", + schedule: "Every 6 hours", + lastRun: "2 hours ago", + nextRun: "4 hours", + coverage: 85, + icon: PaperPlaneIcon, + color: "from-[#5d4ae3] to-[#3a2f94]", + }, + { + id: 2, + name: "Writer Workflow", + description: "Tasks → Content → Images → Publishing", + status: "active", + schedule: "Every 3 hours", + lastRun: "1 hour ago", + nextRun: "2 hours", + coverage: 92, + icon: FileTextIcon, + color: "from-[#0bbf87] to-[#08966b]", + }, + { + id: 3, + name: "Planner Workflow", + description: "Keywords → Clusters → Ideas", + status: "active", + schedule: "Every 6 hours", + lastRun: "3 hours ago", + nextRun: "3 hours", + coverage: 78, + icon: ListIcon, + color: "from-[#0693e3] to-[#0472b8]", + }, + ]; + + const automationSteps = [ + { + step: "Keywords", + enabled: true, + description: "Auto-add keywords from opportunities", + path: "/planner/keyword-opportunities", + icon: ListIcon, + }, + { + step: "Clustering", + enabled: true, + description: "Auto-cluster keywords into groups", + path: "/planner/clusters", + icon: GroupIcon, + }, + { + step: "Ideas", + enabled: true, + description: "Auto-generate content ideas from clusters", + path: "/planner/ideas", + icon: BoltIcon, + }, + { + step: "Tasks", + enabled: false, + description: "Auto-create tasks from ideas", + path: "/writer/tasks", + icon: CheckCircleIcon, + }, + { + step: "Content", + enabled: true, + description: "Auto-generate content from tasks", + path: "/writer/content", + icon: FileTextIcon, + }, + { + step: "Images", + enabled: true, + description: "Auto-generate images for content", + path: "/writer/images", + icon: FileIcon, + }, + { + step: "Publishing", + enabled: false, + description: "Auto-publish content to WordPress", + path: "/writer/published", + icon: PaperPlaneIcon, + }, + ]; + + const chartOptions: ApexOptions = { + chart: { + type: "line", + 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", + }, + }; + + const chartSeries = [ + { + name: "Automated", + data: [12, 19, 15, 25, 22, 18, 24], + }, + { + name: "Manual", + data: [5, 8, 6, 10, 9, 7, 11], + }, + { + name: "Failed", + data: [1, 2, 1, 2, 1, 2, 1], + }, + ]; + + return ( + <> + + + +
+ {/* Key Metrics */} +
+ + + + +
+ + {/* Automation Workflows */} + +
+ {automationWorkflows.map((workflow) => { + const Icon = workflow.icon; + return ( +
+
+
+ +
+ + {workflow.status} + +
+

{workflow.name}

+

{workflow.description}

+
+
+ Schedule: + {workflow.schedule} +
+
+ Last Run: + {workflow.lastRun} +
+
+ Next Run: + {workflow.nextRun} +
+
+
+
+ Coverage + {workflow.coverage}% +
+ +
+
+ + +
+
+ ); + })} +
+ + + {/* Automation Steps Configuration */} + +
+ {automationSteps.map((step, index) => { + const Icon = step.icon; + const isEnabled = stats?.automationCoverage[step.step.toLowerCase() as keyof typeof stats.automationCoverage] || false; + return ( + +
+
+ +
+
+ {isEnabled && } +
+
+

{step.step}

+

{step.description}

+
+ Configure + +
+ + ); + })} +
+ + + {/* Activity Chart */} +
+ + Loading chart...
}> + + + + + {/* Recent Activity */} + +
+ {stats?.recentActivity.map((activity) => ( +
+
+ +
+
+
+

{activity.type}

+ + {activity.status} + +
+
+ {activity.itemsProcessed} items processed + • + {new Date(activity.timestamp).toLocaleTimeString()} +
+
+
+ ))} +
+ +
+ + {/* Quick Actions */} + +
+ + + + + +
+ + + + ); +} + diff --git a/frontend/src/pages/Thinker/Dashboard.tsx b/frontend/src/pages/Thinker/Dashboard.tsx index 9562d502..aaa9c7f3 100644 --- a/frontend/src/pages/Thinker/Dashboard.tsx +++ b/frontend/src/pages/Thinker/Dashboard.tsx @@ -1,22 +1,392 @@ +import { useEffect, useState, lazy, Suspense } from "react"; +import { Link, useNavigate } from "react-router"; import PageMeta from "../../components/common/PageMeta"; import ComponentCard from "../../components/common/ComponentCard"; +import { ProgressBar } from "../../components/ui/progress"; +import { ApexOptions } from "apexcharts"; +import EnhancedMetricCard from "../../components/dashboard/EnhancedMetricCard"; +import PageHeader from "../../components/common/PageHeader"; + +const Chart = lazy(() => import("react-apexcharts").then((mod) => ({ default: mod.default }))); + +import { + BoltIcon, + FileTextIcon, + UserIcon, + ShootingStarIcon, + CheckCircleIcon, + ArrowRightIcon, + PlusIcon, + PencilIcon, + ClockIcon, + PieChartIcon, + DocsIcon, +} from "../../icons"; +import { useSiteStore } from "../../store/siteStore"; +import { useSectorStore } from "../../store/sectorStore"; + +interface ThinkerStats { + totalPrompts: number; + activeProfiles: number; + strategies: number; + usageThisMonth: number; +} export default function ThinkerDashboard() { + const navigate = useNavigate(); + const { activeSite } = useSiteStore(); + const { activeSector } = useSectorStore(); + + const [stats, setStats] = useState(null); + const [loading, setLoading] = useState(true); + const [lastUpdated, setLastUpdated] = useState(new Date()); + + // Mock data for now - will be replaced with real API calls + useEffect(() => { + const fetchData = async () => { + setLoading(true); + // Simulate API call + await new Promise((resolve) => setTimeout(resolve, 500)); + + setStats({ + totalPrompts: 24, + activeProfiles: 8, + strategies: 12, + usageThisMonth: 342, + }); + + setLastUpdated(new Date()); + setLoading(false); + }; + + fetchData(); + }, [activeSite, activeSector]); + + const thinkerModules = [ + { + title: "Prompt Library", + description: "Centralized prompt templates and AI instructions", + icon: FileTextIcon, + color: "from-[#ff7a00] to-[#cc5f00]", + path: "/thinker/prompts", + count: stats?.totalPrompts || 0, + status: "active", + }, + { + title: "Author Profiles", + description: "Voice templates and writing style guides", + icon: UserIcon, + color: "from-[#0693e3] to-[#0472b8]", + path: "/thinker/profiles", + count: stats?.activeProfiles || 0, + status: "active", + }, + { + title: "Content Strategies", + description: "Brand playbooks and content frameworks", + icon: ShootingStarIcon, + color: "from-[#5d4ae3] to-[#3a2f94]", + path: "/thinker/strategies", + count: stats?.strategies || 0, + status: "active", + }, + { + title: "Governance", + description: "Track AI usage, compliance, and version control", + icon: PieChartIcon, + color: "from-[#0bbf87] to-[#08966b]", + path: "/thinker/governance", + count: 0, + status: "coming-soon", + }, + ]; + + const recentPrompts = [ + { + id: 1, + name: "Long-form Article Template", + category: "Content Generation", + usage: 45, + lastUsed: "2 hours ago", + }, + { + id: 2, + name: "SEO-Optimized Brief", + category: "Content Planning", + usage: 32, + lastUsed: "5 hours ago", + }, + { + id: 3, + name: "Brand Voice - Technical", + category: "Author Profile", + usage: 28, + lastUsed: "1 day ago", + }, + ]; + + const chartOptions: ApexOptions = { + chart: { + type: "donut", + height: 300, + }, + labels: ["Content Generation", "Content Planning", "Image Prompts", "Other"], + colors: ["#ff7a00", "#0693e3", "#5d4ae3", "#0bbf87"], + legend: { + position: "bottom", + labels: { colors: "#6b7280" }, + }, + dataLabels: { + enabled: true, + formatter: (val: number) => `${val}%`, + }, + }; + + const chartSeries = [35, 28, 22, 15]; + return ( <> - - - -
-

- Thinker Dashboard - Coming Soon -

-

- Overview of AI tools and strategies will be displayed here -

+ + + +
+ {/* Key Metrics */} +
+ + + +
- + + {/* Thinker Modules */} + +
+ {thinkerModules.map((module) => { + const Icon = module.icon; + return ( + +
+
+ +
+ {module.status === "coming-soon" && ( + + Soon + + )} +
+

{module.title}

+

{module.description}

+ {module.count > 0 && ( +
+ {module.count} + +
+ )} + {module.status === "coming-soon" && ( +
+ Coming soon +
+ )} + + ); + })} +
+ + + {/* Recent Activity & Usage Chart */} +
+ + Loading chart...
}> + + + + + +
+ {recentPrompts.map((prompt) => ( +
+
+ +
+
+
+

{prompt.name}

+ {prompt.usage} uses +
+
+ {prompt.category} + • + {prompt.lastUsed} +
+
+
+ ))} +
+ +
+ + {/* Quick Actions */} + +
+ + + + + +
+ + + {/* Info Cards */} +
+ +
+
+
+ +
+
+

Centralized Control

+

+ Manage all AI prompts, author voices, and brand guidelines in one place. Changes sync automatically to all content generation. +

+
+
+
+
+ +
+
+

Version Control

+

+ Track changes to prompts and strategies with full version history. Roll back to previous versions when needed. +

+
+
+
+
+ +
+
+

Automated Enforcement

+

+ Every piece of content automatically uses your defined prompts, author profiles, and brand guidelines. +

+
+
+
+ + + +
+
+
+ 1 +
+
+

Create Author Profiles

+

+ Define writing voices and styles that match your brand. Each profile can have unique tone, structure, and guidelines. +

+
+
+
+
+ 2 +
+
+

Build Prompt Library

+

+ Create reusable prompt templates for different content types. Use variables to make prompts dynamic and flexible. +

+
+
+
+
+ 3 +
+
+

Define Strategies

+

+ Create content playbooks that combine prompts, profiles, and guidelines. Apply strategies to specific clusters or content types. +

+
+
+
+ +
+
); } -