feat: Enhance Factory Dashboard UI with React/Shadcn and API polling
This commit is contained in:
cawcenter
@@ -0,0 +1,219 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
|
||||
export default function ContentFactoryDashboard() {
|
||||
const [stats, setStats] = useState({ total: 0, ghost: 0, indexed: 0 });
|
||||
const [queues, setQueues] = useState([]);
|
||||
const [campaigns, setCampaigns] = useState([]);
|
||||
const [logs, setLogs] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const DIRECTUS_ADMIN_URL = "https://spark.jumpstartscaling.com/admin";
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
const interval = setInterval(loadData, 10000); // Poll every 10s
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
// Fetch Stats
|
||||
const statsRes = await fetch('/api/seo/stats');
|
||||
const statsData = await statsRes.json();
|
||||
if (statsData.success) {
|
||||
setStats({
|
||||
total: statsData.total,
|
||||
ghost: statsData.breakdown?.sitemap?.ghost || 0,
|
||||
indexed: statsData.breakdown?.sitemap?.indexed || 0
|
||||
});
|
||||
} else {
|
||||
// Fallback if error (e.g. 500)
|
||||
setStats({ total: 0, ghost: 0, indexed: 0 });
|
||||
}
|
||||
|
||||
// Fetch Campaigns
|
||||
const campaignsRes = await fetch('/api/admin/campaigns').then(r => r.json()).catch(() => ({ campaigns: [] }));
|
||||
setCampaigns(campaignsRes.campaigns || []);
|
||||
|
||||
// Fetch Jobs / Queues
|
||||
const queuesRes = await fetch('/api/admin/queues').then(r => r.json()).catch(() => ({ queues: [] }));
|
||||
setQueues(queuesRes.queues || []);
|
||||
|
||||
// Fetch Activity Log
|
||||
const logsRes = await fetch('/api/admin/worklog').then(r => r.json()).catch(() => ({ logs: [] }));
|
||||
// API might return { logs: [...] } or just array? Assuming { logs: ... } based on others
|
||||
// Converting logs to match UI expected format if necessary
|
||||
// logsRes structure depends on worklog.ts implementation.
|
||||
// Let's assume it returns { logs: [] }
|
||||
setLogs(logsRes.logs || []);
|
||||
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error("Dashboard Load Error:", error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const StatusBadge = ({ status }) => {
|
||||
const colors = {
|
||||
active: 'bg-green-600',
|
||||
paused: 'bg-yellow-600',
|
||||
completed: 'bg-blue-600',
|
||||
draft: 'bg-slate-600',
|
||||
Pending: 'bg-slate-600',
|
||||
Processing: 'bg-blue-600',
|
||||
Complete: 'bg-green-600',
|
||||
Failed: 'bg-red-600'
|
||||
};
|
||||
return <Badge className={`${colors[status] || 'bg-slate-600'} text-white`}>{status}</Badge>;
|
||||
};
|
||||
|
||||
if (loading) return <div className="text-white p-8">Initializing Factory Command Center...</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header Actions */}
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white">Production Overview</h2>
|
||||
<p className="text-slate-400">Monitoring Content Velocity & Integrity</p>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<Button variant="outline" className="text-slate-200 border-slate-700 hover:bg-slate-800" onClick={() => window.open(`${DIRECTUS_ADMIN_URL}/content/posts`, '_blank')}>
|
||||
Manage Articles (Backend)
|
||||
</Button>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700" onClick={() => window.open(`${DIRECTUS_ADMIN_URL}`, '_blank')}>
|
||||
Open Directus Admin ↗
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-slate-400">Total Articles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-white">{stats.total}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800 border-l-4 border-l-purple-500">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-slate-400">Ghost (Staged)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-white">{stats.ghost}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800 border-l-4 border-l-green-500">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-slate-400">Indexed (Live)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-white">{stats.indexed}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800 border-l-4 border-l-blue-500">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-slate-400">Active Jobs</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-white">{queues.filter(q => q.status === 'Processing').length}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Active Campaigns */}
|
||||
<Card className="bg-slate-900 border-slate-800 lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex justify-between">
|
||||
<span>Active Campaigns</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => window.open(`${DIRECTUS_ADMIN_URL}/content/campaign_masters`, '_blank')}>View All</Button>
|
||||
</CardTitle>
|
||||
<CardDescription>Recent campaign activity and status</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-slate-800 hover:bg-slate-900/50">
|
||||
<TableHead className="text-slate-400">Campaign Name</TableHead>
|
||||
<TableHead className="text-slate-400">Mode</TableHead>
|
||||
<TableHead className="text-slate-400">Status</TableHead>
|
||||
<TableHead className="text-right text-slate-400">Target</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{campaigns.length > 0 ? campaigns.map((campaign) => (
|
||||
<TableRow key={campaign.id} className="border-slate-800 hover:bg-slate-800/50">
|
||||
<TableCell className="font-medium text-white">{campaign.name}</TableCell>
|
||||
<TableCell className="text-slate-400">{campaign.location_mode || 'Standard'}</TableCell>
|
||||
<TableCell><StatusBadge status={campaign.status} /></TableCell>
|
||||
<TableCell className="text-right text-slate-400">{campaign.batch_count || 0}</TableCell>
|
||||
</TableRow>
|
||||
)) : (
|
||||
<TableRow>
|
||||
<TableCell colspan={4} className="text-center text-slate-500 py-8">No active campaigns</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Production Queue */}
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Production Jobs</CardTitle>
|
||||
<CardDescription>Recent generation tasks</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{queues.length > 0 ? queues.map((job) => (
|
||||
<div key={job.id} className="bg-slate-950 p-4 rounded border border-slate-800 flex justify-between items-center">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-white mb-1">Job #{job.id.substring(0, 8)}</div>
|
||||
<div className="text-xs text-slate-500">Target: {job.target_quantity} articles</div>
|
||||
</div>
|
||||
<StatusBadge status={job.status} />
|
||||
</div>
|
||||
)) : (
|
||||
<div className="text-center text-slate-500 py-8">Queue is empty</div>
|
||||
)}
|
||||
<Button className="w-full bg-slate-800 hover:bg-slate-700 text-white border border-slate-700">
|
||||
+ Start New Generation
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Work Log / Activity */}
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">System Activity Log</CardTitle>
|
||||
<CardDescription>Real-time backend operations</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="bg-black rounded-lg p-4 font-mono text-sm h-64 overflow-y-auto border border-slate-800">
|
||||
{logs.length > 0 ? logs.map((log, i) => (
|
||||
<div key={i} className="mb-2 border-b border-slate-900 pb-2 last:border-0">
|
||||
<span className="text-slate-500">[{new Date(log.timestamp).toLocaleTimeString()}]</span>{' '}
|
||||
<span className={log.action === 'create' ? 'text-green-400' : 'text-blue-400'}>{log.action.toUpperCase()}</span>{' '}
|
||||
<span className="text-slate-300">{log.collection}</span>{' '}
|
||||
<span className="text-slate-600">by {log.user?.email || 'System'}</span>
|
||||
</div>
|
||||
)) : (
|
||||
<div className="text-slate-600 text-center mt-8">No recent activity</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,794 +1,9 @@
|
||||
---
|
||||
/**
|
||||
* Factory Command Center Dashboard
|
||||
*
|
||||
* The main control panel for the SEO Content Factory.
|
||||
* Uses React islands for interactive components.
|
||||
*/
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Layout from '@/layouts/AdminLayout.astro';
|
||||
import ContentFactoryDashboard from '@/components/admin/content/ContentFactoryDashboard';
|
||||
---
|
||||
|
||||
<BaseLayout title="Factory Command Center">
|
||||
<div class="factory-dashboard">
|
||||
<!-- Header -->
|
||||
<header class="dashboard-header">
|
||||
<div class="header-content">
|
||||
<h1>🏭 Factory Command Center</h1>
|
||||
<div class="status-badge" id="factoryStatus">
|
||||
<span class="pulse"></span>
|
||||
<span>IDLE</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<section class="kpi-grid" id="kpiCards">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon">📝</div>
|
||||
<div class="kpi-content">
|
||||
<span class="kpi-value" id="totalArticles">0</span>
|
||||
<span class="kpi-label">Total Articles</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card ghost">
|
||||
<div class="kpi-icon">👻</div>
|
||||
<div class="kpi-content">
|
||||
<span class="kpi-value" id="ghostCount">0</span>
|
||||
<span class="kpi-label">Ghost (Hidden)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card indexed">
|
||||
<div class="kpi-icon">🔍</div>
|
||||
<div class="kpi-content">
|
||||
<span class="kpi-value" id="indexedCount">0</span>
|
||||
<span class="kpi-label">Indexed (Live)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kpi-card queue">
|
||||
<div class="kpi-icon">⏳</div>
|
||||
<div class="kpi-content">
|
||||
<span class="kpi-value" id="queueCount">0</span>
|
||||
<span class="kpi-label">In Queue</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Grid -->
|
||||
<div class="main-grid">
|
||||
<!-- Velocity Chart -->
|
||||
<section class="panel velocity-panel">
|
||||
<h2>📈 Velocity Distribution</h2>
|
||||
<div class="chart-container">
|
||||
<canvas id="velocityChart"></canvas>
|
||||
</div>
|
||||
<div class="chart-legend">
|
||||
<span class="legend-item"><span class="dot ramp"></span> Ramp Up</span>
|
||||
<span class="legend-item"><span class="dot weekend"></span> Weekend Throttle</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Active Campaigns -->
|
||||
<section class="panel campaigns-panel">
|
||||
<h2>🎯 Active Campaigns</h2>
|
||||
<div class="campaign-list" id="campaignList">
|
||||
<div class="loading-skeleton">Loading campaigns...</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Production Queue -->
|
||||
<section class="panel queue-panel full-width">
|
||||
<div class="panel-header">
|
||||
<h2>⚙️ Production Queue</h2>
|
||||
<button class="btn-primary" id="newJobBtn">+ New Job</button>
|
||||
</div>
|
||||
<div class="queue-table-container">
|
||||
<table class="queue-table" id="queueTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Campaign</th>
|
||||
<th>Progress</th>
|
||||
<th>Velocity</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="queueTableBody">
|
||||
<tr><td colspan="6" class="loading">Loading queue...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Work Log Terminal -->
|
||||
<section class="panel terminal-panel full-width">
|
||||
<div class="panel-header">
|
||||
<h2>💻 Work Log</h2>
|
||||
<button class="btn-ghost" id="clearLog">Clear</button>
|
||||
</div>
|
||||
<div class="terminal" id="terminal">
|
||||
<div class="terminal-line system">[SYSTEM] Factory initialized. Ready for commands.</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Spintax Preview Modal -->
|
||||
<div class="modal" id="spintaxModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>✏️ Spintax Preview</h3>
|
||||
<button class="close-btn" id="closeSpintax">×</button>
|
||||
</div>
|
||||
<div class="spintax-split">
|
||||
<div class="spintax-input">
|
||||
<label>Raw Spintax</label>
|
||||
<textarea id="spintaxInput" placeholder="{Hello|Hi} {World|Friend}...">{`{The best {solar|renewable energy} {service|solution} in {City}, {State}.|{City} homeowners trust us for {premium|top-quality} {solar|clean energy} {installation|systems}.}`}</textarea>
|
||||
</div>
|
||||
<div class="spintax-output">
|
||||
<label>Live Preview</label>
|
||||
<div id="spintaxOutput" class="preview-box">Click "Spin" to preview...</div>
|
||||
<button class="btn-primary" id="spinBtn">🎲 Spin</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Deploy Confirmation -->
|
||||
<div class="modal" id="deployModal">
|
||||
<div class="modal-content deploy-modal">
|
||||
<h3>🚀 Deploy Campaign</h3>
|
||||
<p>You are about to generate <strong id="deployCount">0</strong> articles.</p>
|
||||
<div class="deploy-slider">
|
||||
<div class="slider-track">
|
||||
<div class="slider-thumb" id="deployThumb">
|
||||
<span>→</span>
|
||||
</div>
|
||||
<span class="slider-label">Slide to Deploy</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-ghost" id="cancelDeploy">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
<Layout title="Factory Command Center">
|
||||
<div class="p-8">
|
||||
<ContentFactoryDashboard client:load />
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.factory-dashboard {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
|
||||
color: #e0e0e0;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(90deg, #fff, #888);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #00ff88;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
/* KPI Cards */
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.kpi-card:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.kpi-card.ghost { border-left: 3px solid #8b5cf6; }
|
||||
.kpi-card.indexed { border-left: 3px solid #10b981; }
|
||||
.kpi-card.queue { border-left: 3px solid #f59e0b; }
|
||||
|
||||
.kpi-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.kpi-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Main Grid */
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.panel-header h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart-container {
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dot.ramp { background: #3b82f6; }
|
||||
.dot.weekend { background: #ef4444; }
|
||||
|
||||
/* Campaign List */
|
||||
.campaign-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.campaign-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 10px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.campaign-item:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.campaign-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.campaign-count {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Queue Table */
|
||||
.queue-table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.queue-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.queue-table th,
|
||||
.queue-table td {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.queue-table th {
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.queue-table tr:hover td {
|
||||
background: rgba(255,255,255,0.02);
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-pill.pending { background: #374151; color: #9ca3af; }
|
||||
.status-pill.running { background: #1e3a5f; color: #60a5fa; }
|
||||
.status-pill.done { background: #064e3b; color: #34d399; }
|
||||
.status-pill.failed { background: #7f1d1d; color: #fca5a5; }
|
||||
|
||||
.progress-bar {
|
||||
width: 100px;
|
||||
height: 6px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Terminal */
|
||||
.terminal {
|
||||
background: #0d0d0d;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 0.85rem;
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
padding: 4px 0;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.terminal-line.system { color: #10b981; }
|
||||
.terminal-line.error { color: #ef4444; }
|
||||
.terminal-line.warning { color: #f59e0b; }
|
||||
.terminal-line.info { color: #3b82f6; }
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: #888;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.8);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #1a1a2e;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Spintax Preview */
|
||||
.spintax-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spintax-input textarea,
|
||||
.preview-box {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
color: #e0e0e0;
|
||||
font-family: monospace;
|
||||
font-size: 0.9rem;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.spintax-input label,
|
||||
.spintax-output label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #888;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.spintax-output {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.spintax-output .btn-primary {
|
||||
margin-top: 12px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
/* Deploy Slider */
|
||||
.deploy-modal {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.deploy-slider {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
background: linear-gradient(90deg, #1e3a5f, #3b82f6);
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider-thumb {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
cursor: grab;
|
||||
transition: left 0.1s;
|
||||
}
|
||||
|
||||
.slider-label {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
padding: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Initialize Dashboard
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
await loadDashboardData();
|
||||
initializeChart();
|
||||
initializeSpintax();
|
||||
initializeDeploySlider();
|
||||
startPolling();
|
||||
});
|
||||
|
||||
let chartInstance = null;
|
||||
|
||||
async function loadDashboardData() {
|
||||
try {
|
||||
// Load KPIs
|
||||
const [articles, queues, campaigns] = await Promise.all([
|
||||
fetch('/api/seo/stats').then(r => r.json()).catch(() => ({ total: 0, ghost: 0, indexed: 0 })),
|
||||
fetch('/api/admin/queues').then(r => r.json()).catch(() => ({ queues: [] })),
|
||||
fetch('/api/admin/campaigns').then(r => r.json()).catch(() => ({ campaigns: [] }))
|
||||
]);
|
||||
|
||||
// Update KPIs
|
||||
document.getElementById('totalArticles').textContent = articles.total || '0';
|
||||
document.getElementById('ghostCount').textContent = articles.ghost || '0';
|
||||
document.getElementById('indexedCount').textContent = articles.indexed || '0';
|
||||
document.getElementById('queueCount').textContent = queues.queues?.filter(q => q.status === 'running').length || '0';
|
||||
|
||||
// Update campaigns list
|
||||
const campaignList = document.getElementById('campaignList');
|
||||
if (campaigns.campaigns?.length > 0) {
|
||||
campaignList.innerHTML = campaigns.campaigns.map(c => `
|
||||
<div class="campaign-item">
|
||||
<span class="campaign-name">${c.name}</span>
|
||||
<span class="campaign-count">${c.article_count || 0} articles</span>
|
||||
</div>
|
||||
`).join('');
|
||||
} else {
|
||||
campaignList.innerHTML = '<div class="loading">No active campaigns</div>';
|
||||
}
|
||||
|
||||
// Update queue table
|
||||
const queueBody = document.getElementById('queueTableBody');
|
||||
if (queues.queues?.length > 0) {
|
||||
queueBody.innerHTML = queues.queues.map(q => {
|
||||
const progress = q.total_requested > 0 ? (q.completed_count / q.total_requested * 100).toFixed(0) : 0;
|
||||
return `
|
||||
<tr>
|
||||
<td><span class="status-pill ${q.status}">${q.status}</span></td>
|
||||
<td>${q.campaign_name || 'Unknown'}</td>
|
||||
<td>
|
||||
<div class="progress-bar"><div class="progress-fill" style="width: ${progress}%"></div></div>
|
||||
<span style="font-size: 0.8rem; color: #888; margin-left: 8px;">${progress}%</span>
|
||||
</td>
|
||||
<td>${q.velocity_mode || 'STEADY'}</td>
|
||||
<td>${new Date(q.date_created).toLocaleDateString()}</td>
|
||||
<td>
|
||||
<button class="btn-ghost" onclick="viewQueue('${q.id}')">View</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
} else {
|
||||
queueBody.innerHTML = '<tr><td colspan="6" class="loading">No jobs in queue</td></tr>';
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('Failed to load dashboard:', err);
|
||||
addTerminalLine('[ERROR] Failed to load dashboard data', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function initializeChart() {
|
||||
// Simple canvas chart (no external library needed)
|
||||
const canvas = document.getElementById('velocityChart');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = canvas.parentElement.offsetWidth;
|
||||
canvas.height = 200;
|
||||
|
||||
// Draw Gaussian curve
|
||||
ctx.strokeStyle = '#3b82f6';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
|
||||
for (let x = 0; x < canvas.width; x++) {
|
||||
const progress = x / canvas.width;
|
||||
// Ramp up curve: 0.2 to 1.0
|
||||
const weight = 0.2 + (0.8 * progress);
|
||||
// Add some noise
|
||||
const noise = Math.random() * 0.1;
|
||||
const y = canvas.height - ((weight + noise) * canvas.height * 0.8);
|
||||
|
||||
if (x === 0) ctx.moveTo(x, y);
|
||||
else ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
// Weekend dips
|
||||
ctx.strokeStyle = '#ef4444';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([5, 5]);
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const x = (canvas.width / 7) * i;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, canvas.height);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
function initializeSpintax() {
|
||||
const spinBtn = document.getElementById('spinBtn');
|
||||
const input = document.getElementById('spintaxInput');
|
||||
const output = document.getElementById('spintaxOutput');
|
||||
|
||||
spinBtn.addEventListener('click', () => {
|
||||
const text = input.value;
|
||||
const spun = processSpintax(text, {
|
||||
City: 'Orlando',
|
||||
State: 'Florida',
|
||||
Current_Year: '2024'
|
||||
});
|
||||
output.textContent = spun;
|
||||
});
|
||||
}
|
||||
|
||||
function processSpintax(text, context) {
|
||||
let result = text
|
||||
.replace(/\{City\}/gi, context.City)
|
||||
.replace(/\{State\}/gi, context.State)
|
||||
.replace(/\{Current_Year\}/gi, context.Current_Year);
|
||||
|
||||
let iterations = 50;
|
||||
while (result.includes('{') && iterations > 0) {
|
||||
result = result.replace(/\{([^{}]+)\}/g, (_, opts) => {
|
||||
const choices = opts.split('|');
|
||||
return choices[Math.floor(Math.random() * choices.length)];
|
||||
});
|
||||
iterations--;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function initializeDeploySlider() {
|
||||
const thumb = document.getElementById('deployThumb');
|
||||
const track = thumb.parentElement;
|
||||
let isDragging = false;
|
||||
|
||||
thumb.addEventListener('mousedown', () => isDragging = true);
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (isDragging) {
|
||||
const rect = track.getBoundingClientRect();
|
||||
const thumbPos = parseInt(thumb.style.left || '5');
|
||||
if (thumbPos > rect.width * 0.8) {
|
||||
// Deploy!
|
||||
addTerminalLine('[SYSTEM] DEPLOYMENT INITIATED! 🚀', 'system');
|
||||
document.getElementById('deployModal').classList.remove('active');
|
||||
}
|
||||
thumb.style.left = '5px';
|
||||
}
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
const rect = track.getBoundingClientRect();
|
||||
let x = e.clientX - rect.left - 25;
|
||||
x = Math.max(5, Math.min(x, rect.width - 55));
|
||||
thumb.style.left = x + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
function addTerminalLine(text, type = 'info') {
|
||||
const terminal = document.getElementById('terminal');
|
||||
const line = document.createElement('div');
|
||||
line.className = `terminal-line ${type}`;
|
||||
line.textContent = `[${new Date().toLocaleTimeString()}] ${text}`;
|
||||
terminal.appendChild(line);
|
||||
terminal.scrollTop = terminal.scrollHeight;
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
setInterval(() => {
|
||||
loadDashboardData();
|
||||
}, 10000); // Refresh every 10 seconds
|
||||
}
|
||||
|
||||
// Modal handlers
|
||||
document.getElementById('newJobBtn')?.addEventListener('click', () => {
|
||||
document.getElementById('deployModal').classList.add('active');
|
||||
});
|
||||
|
||||
document.getElementById('cancelDeploy')?.addEventListener('click', () => {
|
||||
document.getElementById('deployModal').classList.remove('active');
|
||||
});
|
||||
|
||||
document.getElementById('clearLog')?.addEventListener('click', () => {
|
||||
document.getElementById('terminal').innerHTML = '<div class="terminal-line system">[SYSTEM] Log cleared.</div>';
|
||||
});
|
||||
|
||||
window.viewQueue = function(id) {
|
||||
addTerminalLine(`Viewing queue: ${id}`, 'info');
|
||||
};
|
||||
</script>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user