1004 lines
50 KiB
TypeScript
1004 lines
50 KiB
TypeScript
/**
|
|
* Automation Dashboard Page
|
|
* Main page for managing AI automation pipeline
|
|
*/
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import { useSiteStore } from '../../store/siteStore';
|
|
import { automationService, AutomationRun, AutomationConfig, PipelineStage } from '../../services/automationService';
|
|
import {
|
|
fetchKeywords,
|
|
fetchClusters,
|
|
fetchContentIdeas,
|
|
fetchTasks,
|
|
fetchContent,
|
|
fetchContentImages,
|
|
} from '../../services/api';
|
|
import ActivityLog from '../../components/Automation/ActivityLog';
|
|
import ConfigModal from '../../components/Automation/ConfigModal';
|
|
import RunHistory from '../../components/Automation/RunHistory';
|
|
import CurrentProcessingCard from '../../components/Automation/CurrentProcessingCard';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import ComponentCard from '../../components/common/ComponentCard';
|
|
import EnhancedMetricCard from '../../components/dashboard/EnhancedMetricCard';
|
|
import DebugSiteSelector from '../../components/common/DebugSiteSelector';
|
|
import Button from '../../components/ui/button/Button';
|
|
import {
|
|
BoltIcon,
|
|
ListIcon,
|
|
GroupIcon,
|
|
FileTextIcon,
|
|
PencilIcon,
|
|
FileIcon,
|
|
CheckCircleIcon,
|
|
ClockIcon,
|
|
PaperPlaneIcon,
|
|
ArrowRightIcon
|
|
} from '../../icons';
|
|
|
|
const STAGE_CONFIG = [
|
|
{ icon: ListIcon, color: 'from-blue-500 to-blue-600', textColor: 'text-blue-600', hoverColor: 'hover:border-blue-500', name: 'Keywords → Clusters' },
|
|
{ icon: GroupIcon, color: 'from-purple-500 to-purple-600', textColor: 'text-purple-600', hoverColor: 'hover:border-purple-500', name: 'Clusters → Ideas' },
|
|
{ icon: CheckCircleIcon, color: 'from-indigo-500 to-indigo-600', textColor: 'text-indigo-600', hoverColor: 'hover:border-indigo-500', name: 'Ideas → Tasks' },
|
|
{ icon: PencilIcon, color: 'from-green-500 to-green-600', textColor: 'text-green-600', hoverColor: 'hover:border-green-500', name: 'Tasks → Content' },
|
|
{ icon: FileIcon, color: 'from-amber-500 to-amber-600', textColor: 'text-amber-600', hoverColor: 'hover:border-amber-500', name: 'Content → Image Prompts' },
|
|
{ icon: FileTextIcon, color: 'from-pink-500 to-pink-600', textColor: 'text-pink-600', hoverColor: 'hover:border-pink-500', name: 'Image Prompts → Images' },
|
|
{ icon: PaperPlaneIcon, color: 'from-teal-500 to-teal-600', textColor: 'text-teal-600', hoverColor: 'hover:border-teal-500', name: 'Manual Review Gate' },
|
|
];
|
|
|
|
const AutomationPage: React.FC = () => {
|
|
const { activeSite } = useSiteStore();
|
|
const toast = useToast();
|
|
const [config, setConfig] = useState<AutomationConfig | null>(null);
|
|
const [currentRun, setCurrentRun] = useState<AutomationRun | null>(null);
|
|
const [pipelineOverview, setPipelineOverview] = useState<PipelineStage[]>([]);
|
|
const [metrics, setMetrics] = useState<any>(null);
|
|
const [showConfigModal, setShowConfigModal] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
const [estimate, setEstimate] = useState<{ estimated_credits: number; current_balance: number; sufficient: boolean } | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!activeSite) return;
|
|
loadData();
|
|
|
|
const interval = setInterval(() => {
|
|
if (currentRun && (currentRun.status === 'running' || currentRun.status === 'paused')) {
|
|
loadCurrentRun();
|
|
} else {
|
|
loadPipelineOverview();
|
|
}
|
|
}, 5000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [activeSite, currentRun?.status]);
|
|
|
|
const loadData = async () => {
|
|
if (!activeSite) return;
|
|
try {
|
|
setLoading(true);
|
|
const [configData, runData, estimateData, pipelineData] = await Promise.all([
|
|
automationService.getConfig(activeSite.id),
|
|
automationService.getCurrentRun(activeSite.id),
|
|
automationService.estimate(activeSite.id),
|
|
automationService.getPipelineOverview(activeSite.id),
|
|
]);
|
|
// Also fetch the same low-level metrics used by Home page so we can show authoritative totals
|
|
try {
|
|
const siteId = activeSite.id;
|
|
const [
|
|
keywordsTotalRes,
|
|
keywordsNewRes,
|
|
keywordsMappedRes,
|
|
clustersTotalRes,
|
|
clustersNewRes,
|
|
clustersMappedRes,
|
|
ideasTotalRes,
|
|
ideasNewRes,
|
|
ideasQueuedRes,
|
|
ideasCompletedRes,
|
|
tasksTotalRes,
|
|
contentTotalRes,
|
|
contentDraftRes,
|
|
contentReviewRes,
|
|
contentPublishedRes,
|
|
imagesTotalRes,
|
|
imagesPendingRes,
|
|
] = await Promise.all([
|
|
fetchKeywords({ page_size: 1, site_id: siteId }),
|
|
fetchKeywords({ page_size: 1, site_id: siteId, status: 'new' }),
|
|
fetchKeywords({ page_size: 1, site_id: siteId, status: 'mapped' }),
|
|
fetchClusters({ page_size: 1, site_id: siteId }),
|
|
fetchClusters({ page_size: 1, site_id: siteId, status: 'new' }),
|
|
fetchClusters({ page_size: 1, site_id: siteId, status: 'mapped' }),
|
|
fetchContentIdeas({ page_size: 1, site_id: siteId }),
|
|
fetchContentIdeas({ page_size: 1, site_id: siteId, status: 'new' }),
|
|
fetchContentIdeas({ page_size: 1, site_id: siteId, status: 'queued' }),
|
|
fetchContentIdeas({ page_size: 1, site_id: siteId, status: 'completed' }),
|
|
fetchTasks({ page_size: 1, site_id: siteId }),
|
|
fetchContent({ page_size: 1, site_id: siteId }),
|
|
fetchContent({ page_size: 1, site_id: siteId, status: 'draft' }),
|
|
fetchContent({ page_size: 1, site_id: siteId, status: 'review' }),
|
|
fetchContent({ page_size: 1, site_id: siteId, status: 'published' }),
|
|
fetchContentImages({ page_size: 1, site_id: siteId }),
|
|
fetchContentImages({ page_size: 1, site_id: siteId, status: 'pending' }),
|
|
]);
|
|
|
|
setMetrics({
|
|
keywords: { total: keywordsTotalRes.count || 0, new: keywordsNewRes.count || 0, mapped: keywordsMappedRes.count || 0 },
|
|
clusters: { total: clustersTotalRes.count || 0, new: clustersNewRes.count || 0, mapped: clustersMappedRes.count || 0 },
|
|
ideas: { total: ideasTotalRes.count || 0, new: ideasNewRes.count || 0, queued: ideasQueuedRes.count || 0, completed: ideasCompletedRes.count || 0 },
|
|
tasks: { total: tasksTotalRes.count || 0 },
|
|
content: {
|
|
total: contentTotalRes.count || 0,
|
|
draft: contentDraftRes.count || 0,
|
|
review: contentReviewRes.count || 0,
|
|
published: contentPublishedRes.count || 0,
|
|
},
|
|
images: { total: imagesTotalRes.count || 0, pending: imagesPendingRes.count || 0 },
|
|
});
|
|
} catch (e) {
|
|
// Non-fatal: keep metrics null if any of the low-level calls fail
|
|
console.warn('Failed to fetch low-level metrics for automation page', e);
|
|
}
|
|
setConfig(configData);
|
|
setCurrentRun(runData.run);
|
|
setEstimate(estimateData);
|
|
setPipelineOverview(pipelineData.stages);
|
|
} catch (error: any) {
|
|
toast.error('Failed to load automation data');
|
|
console.error(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadCurrentRun = async () => {
|
|
if (!activeSite) return;
|
|
try {
|
|
const data = await automationService.getCurrentRun(activeSite.id);
|
|
setCurrentRun(data.run);
|
|
} catch (error) {
|
|
console.error('Failed to poll current run', error);
|
|
}
|
|
};
|
|
|
|
const loadPipelineOverview = async () => {
|
|
if (!activeSite) return;
|
|
try {
|
|
const data = await automationService.getPipelineOverview(activeSite.id);
|
|
setPipelineOverview(data.stages);
|
|
} catch (error) {
|
|
console.error('Failed to poll pipeline overview', error);
|
|
}
|
|
};
|
|
|
|
const handleRunNow = async () => {
|
|
if (!activeSite) return;
|
|
if (estimate && !estimate.sufficient) {
|
|
toast.error(`Insufficient credits. Need ~${estimate.estimated_credits}, you have ${estimate.current_balance}`);
|
|
return;
|
|
}
|
|
try {
|
|
const result = await automationService.runNow(activeSite.id);
|
|
toast.success('Automation started successfully');
|
|
loadCurrentRun();
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.error || 'Failed to start automation');
|
|
}
|
|
};
|
|
|
|
const handlePause = async () => {
|
|
if (!currentRun) return;
|
|
try {
|
|
await automationService.pause(currentRun.run_id);
|
|
toast.success('Automation paused');
|
|
loadCurrentRun();
|
|
} catch (error) {
|
|
toast.error('Failed to pause automation');
|
|
}
|
|
};
|
|
|
|
const handleResume = async () => {
|
|
if (!currentRun) return;
|
|
try {
|
|
await automationService.resume(currentRun.run_id);
|
|
toast.success('Automation resumed');
|
|
loadCurrentRun();
|
|
} catch (error) {
|
|
toast.error('Failed to resume automation');
|
|
}
|
|
};
|
|
|
|
const handleSaveConfig = async (newConfig: Partial<AutomationConfig>) => {
|
|
if (!activeSite) return;
|
|
try {
|
|
await automationService.updateConfig(activeSite.id, newConfig);
|
|
toast.success('Configuration saved');
|
|
setShowConfigModal(false);
|
|
loadData();
|
|
} catch (error) {
|
|
toast.error('Failed to save configuration');
|
|
}
|
|
};
|
|
|
|
const handlePublishAllWithoutReview = async () => {
|
|
if (!activeSite) return;
|
|
if (!confirm('Publish all content without review? This cannot be undone.')) return;
|
|
try {
|
|
await automationService.publishWithoutReview(activeSite.id);
|
|
toast.success('Publish job started (without review)');
|
|
// refresh metrics and pipeline
|
|
loadData();
|
|
loadPipelineOverview();
|
|
} catch (error: any) {
|
|
console.error('Failed to publish without review', error);
|
|
toast.error(error?.response?.data?.error || 'Failed to publish without review');
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<div className="text-lg text-gray-600 dark:text-gray-400">Loading automation...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!activeSite) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<div className="text-lg text-gray-600 dark:text-gray-400">Please select a site to view automation</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const totalPending = pipelineOverview.reduce((sum, stage) => sum + stage.pending, 0);
|
|
|
|
const getStageResult = (stageNumber: number) => {
|
|
if (!currentRun) return null;
|
|
return (currentRun as any)[`stage_${stageNumber}_result`];
|
|
};
|
|
|
|
const renderMetricRow = (items: Array<{ label: string; value: any; colorCls?: string }>) => {
|
|
const visible = items.filter(i => i && (i.value !== undefined && i.value !== null));
|
|
if (visible.length === 0) {
|
|
return (
|
|
<div className="flex text-xs mt-1">
|
|
<div className="flex-1 text-center"></div>
|
|
<div className="flex-1 text-center"></div>
|
|
<div className="flex-1 text-center"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (visible.length === 2) {
|
|
return (
|
|
<div className="flex text-xs mt-1 justify-center gap-6">
|
|
{visible.map((it, idx) => (
|
|
<div key={idx} className="w-1/3 text-center">
|
|
<span className={`${it.colorCls ?? ''} block`}>{it.label}</span>
|
|
<div className="font-bold text-slate-900 dark:text-white">{Number(it.value) || 0}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// default to 3 columns (equally spaced)
|
|
return (
|
|
<div className="flex text-xs mt-1">
|
|
{items.concat(Array(Math.max(0, 3 - items.length)).fill({ label: '', value: '' })).slice(0,3).map((it, idx) => (
|
|
<div key={idx} className="flex-1 text-center">
|
|
<span className={`${it.colorCls ?? ''} block`}>{it.label}</span>
|
|
<div className="font-bold text-slate-900 dark:text-white">{it.value !== undefined && it.value !== null ? Number(it.value) : ''}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
return (
|
|
<>
|
|
<PageMeta title="AI Automation Pipeline | IGNY8" description="Automated content creation from keywords to published articles" />
|
|
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="relative flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center justify-center size-10 rounded-xl bg-gradient-to-br from-teal-500 to-teal-600">
|
|
<BoltIcon className="text-white size-5" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">AI Automation Pipeline</h2>
|
|
{activeSite && (
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
|
Site: <span className="font-medium text-brand-600 dark:text-brand-400">{activeSite.name}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Compact Ready-to-Run card (header) - absolutely centered in header */}
|
|
<div className="hidden sm:flex absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
|
|
<div className={`w-full max-w-sm rounded-lg border-2 p-2 transition-all flex items-center gap-3 shadow-sm
|
|
${currentRun?.status === 'running' ? 'border-blue-500 bg-blue-50' : currentRun?.status === 'paused' ? 'border-amber-500 bg-amber-50' : totalPending > 0 ? 'border-success-500 bg-success-50' : 'border-slate-300 bg-slate-50'}`}>
|
|
<div className={`size-9 rounded-lg flex items-center justify-center flex-shrink-0
|
|
${currentRun?.status === 'running' ? 'bg-gradient-to-br from-blue-500 to-blue-600' : currentRun?.status === 'paused' ? 'bg-gradient-to-br from-amber-500 to-amber-600' : totalPending > 0 ? 'bg-gradient-to-br from-success-500 to-success-600' : 'bg-gradient-to-br from-slate-400 to-slate-500'}`}>
|
|
{!currentRun && totalPending > 0 ? <CheckCircleIcon className="size-4 text-white" /> : currentRun?.status === 'running' ? <BoltIcon className="size-4 text-white" /> : currentRun?.status === 'paused' ? <ClockIcon className="size-4 text-white" /> : <BoltIcon className="size-4 text-white" />}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-semibold text-slate-900 dark:text-white truncate">
|
|
{currentRun?.status === 'running' && `Running - Stage ${currentRun.current_stage}/7`}
|
|
{currentRun?.status === 'paused' && 'Paused'}
|
|
{!currentRun && totalPending > 0 && 'Ready to Run'}
|
|
{!currentRun && totalPending === 0 && 'No Items Pending'}
|
|
</div>
|
|
<div className="text-xs text-slate-600 dark:text-gray-400 truncate">
|
|
{currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items in pipeline` : 'All stages clear')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DebugSiteSelector />
|
|
</div>
|
|
|
|
{/* Compact Schedule & Controls Panel */}
|
|
{config && (
|
|
<ComponentCard className="border-0 overflow-hidden rounded-2xl bg-gradient-to-br from-brand-600 to-brand-700">
|
|
<div className="flex flex-col lg:flex-row items-center lg:items-center justify-between gap-3 py-3 px-4">
|
|
<div className="flex items-center gap-4 flex-wrap">
|
|
<div className="flex items-center gap-2">
|
|
{config.is_enabled ? (
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-success-500">
|
|
<div className="size-2 bg-white rounded-full"></div>
|
|
<span className="text-sm font-semibold text-white">Enabled</span>
|
|
</div>
|
|
) : (
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20">
|
|
<div className="size-2 bg-white/60 rounded-full"></div>
|
|
<span className="text-sm font-semibold text-white/90">Disabled</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="h-4 w-px bg-white/25"></div>
|
|
<div className="text-sm text-white/90">
|
|
<span className="font-medium capitalize">{config.frequency}</span> at <span className="font-medium">{config.scheduled_time}</span>
|
|
</div>
|
|
<div className="h-4 w-px bg-white/25"></div>
|
|
<div className="text-sm text-white/80">
|
|
Last: <span className="font-medium">{config.last_run_at ? new Date(config.last_run_at).toLocaleDateString() : 'Never'}</span>
|
|
</div>
|
|
<div className="h-4 w-px bg-white/25"></div>
|
|
<div className="text-sm text-white/90">
|
|
<span className="font-medium">Est:</span>{' '}
|
|
<span className="font-semibold text-white">{estimate?.estimated_credits || 0} credits</span>
|
|
{estimate && !estimate.sufficient && (
|
|
<span className="ml-1 text-white/90 font-semibold">(Low)</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
onClick={() => setShowConfigModal(true)}
|
|
variant="outline"
|
|
tone="brand"
|
|
size="sm"
|
|
className="!border-white !text-white hover:!bg-white hover:!text-brand-700"
|
|
>
|
|
Configure
|
|
</Button>
|
|
{currentRun?.status === 'running' && (
|
|
<Button
|
|
onClick={handlePause}
|
|
variant="primary"
|
|
tone="warning"
|
|
size="sm"
|
|
className="!bg-white/10 !text-white hover:!bg-white/20"
|
|
>
|
|
Pause
|
|
</Button>
|
|
)}
|
|
{currentRun?.status === 'paused' && (
|
|
<Button
|
|
onClick={handleResume}
|
|
variant="primary"
|
|
tone="brand"
|
|
size="sm"
|
|
className="!bg-white/10 !text-white hover:!bg-white/20"
|
|
>
|
|
Resume
|
|
</Button>
|
|
)}
|
|
{!currentRun && (
|
|
<Button
|
|
onClick={handleRunNow}
|
|
variant="primary"
|
|
tone="success"
|
|
size="sm"
|
|
disabled={!config?.is_enabled}
|
|
className="!bg-white !text-brand-700 hover:!bg-success-600 hover:!text-white"
|
|
>
|
|
Run Now
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ComponentCard>
|
|
)}
|
|
|
|
{/* Metrics Summary Cards */}
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
{/* Keywords */}
|
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-4 border-2 border-blue-200 dark:border-blue-800">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-10 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
|
|
<ListIcon className="size-5 text-white" />
|
|
</div>
|
|
<div className="text-sm font-bold text-blue-900 dark:text-blue-100">Keywords</div>
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(1);
|
|
const total = res?.total ?? pipelineOverview[0]?.counts?.total ?? metrics?.keywords?.total ?? pipelineOverview[0]?.pending ?? 0;
|
|
return (
|
|
<div className="text-right">
|
|
<div className="text-3xl font-bold text-blue-900">{total}</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(1);
|
|
const newCount = res?.new ?? res?.new_items ?? pipelineOverview[0]?.counts?.new ?? metrics?.keywords?.new ?? 0;
|
|
const mapped = res?.mapped ?? pipelineOverview[0]?.counts?.mapped ?? metrics?.keywords?.mapped ?? 0;
|
|
return (
|
|
renderMetricRow([
|
|
{ label: 'New:', value: newCount, colorCls: 'text-blue-700' },
|
|
{ label: 'Mapped:', value: mapped, colorCls: 'text-blue-700' },
|
|
])
|
|
);
|
|
})()}
|
|
</div>
|
|
|
|
{/* Clusters */}
|
|
<div className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-10 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
|
|
<GroupIcon className="size-5 text-white" />
|
|
</div>
|
|
<div className="text-sm font-bold text-purple-900 dark:text-purple-100">Clusters</div>
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(2);
|
|
const total = res?.total ?? pipelineOverview[1]?.counts?.total ?? metrics?.clusters?.total ?? pipelineOverview[1]?.pending ?? 0;
|
|
return (
|
|
<div className="text-right">
|
|
<div className="text-3xl font-bold text-purple-900">{total}</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(2);
|
|
const newCount = res?.new ?? res?.new_items ?? pipelineOverview[1]?.counts?.new ?? metrics?.clusters?.new ?? 0;
|
|
const mapped = res?.mapped ?? pipelineOverview[1]?.counts?.mapped ?? metrics?.clusters?.mapped ?? 0;
|
|
return (
|
|
renderMetricRow([
|
|
{ label: 'New:', value: newCount, colorCls: 'text-purple-700' },
|
|
{ label: 'Mapped:', value: mapped, colorCls: 'text-purple-700' },
|
|
])
|
|
);
|
|
})()}
|
|
</div>
|
|
|
|
{/* Ideas */}
|
|
<div className="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 rounded-xl p-4 border-2 border-indigo-200 dark:border-indigo-800">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-10 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center">
|
|
<CheckCircleIcon className="size-5 text-white" />
|
|
</div>
|
|
<div className="text-sm font-bold text-indigo-900 dark:text-indigo-100">Ideas</div>
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(3);
|
|
const total = res?.total ?? pipelineOverview[2]?.counts?.total ?? metrics?.ideas?.total ?? pipelineOverview[2]?.pending ?? 0;
|
|
return (
|
|
<div className="text-right">
|
|
<div className="text-3xl font-bold text-indigo-900">{total}</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(3);
|
|
const newCount = res?.new ?? res?.new_items ?? pipelineOverview[2]?.counts?.new ?? metrics?.ideas?.new ?? 0;
|
|
const queued = res?.queued ?? pipelineOverview[2]?.counts?.queued ?? metrics?.ideas?.queued ?? 0;
|
|
const completed = res?.completed ?? pipelineOverview[2]?.counts?.completed ?? metrics?.ideas?.completed ?? 0;
|
|
return (
|
|
renderMetricRow([
|
|
{ label: 'New:', value: newCount, colorCls: 'text-indigo-700' },
|
|
{ label: 'Queued:', value: queued, colorCls: 'text-indigo-700' },
|
|
{ label: 'Completed:', value: completed, colorCls: 'text-indigo-700' },
|
|
])
|
|
);
|
|
})()}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-xl p-4 border-2 border-green-200 dark:border-green-800">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-10 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
|
|
<FileTextIcon className="size-5 text-white" />
|
|
</div>
|
|
<div className="text-sm font-bold text-green-900 dark:text-green-100">Content</div>
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(4);
|
|
const total = res?.total ?? pipelineOverview[3]?.counts?.total ?? metrics?.content?.total ?? pipelineOverview[3]?.pending ?? 0;
|
|
return (
|
|
<div className="text-right">
|
|
<div className="text-3xl font-bold text-green-900">{total}</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(4);
|
|
const draft = res?.draft ?? res?.drafts ?? pipelineOverview[3]?.counts?.draft ?? metrics?.content?.draft ?? 0;
|
|
const review = res?.review ?? res?.in_review ?? pipelineOverview[3]?.counts?.review ?? metrics?.content?.review ?? 0;
|
|
const publish = res?.published ?? res?.publish ?? pipelineOverview[3]?.counts?.published ?? metrics?.content?.published ?? 0;
|
|
return (
|
|
renderMetricRow([
|
|
{ label: 'Draft:', value: draft, colorCls: 'text-green-700' },
|
|
{ label: 'Review:', value: review, colorCls: 'text-green-700' },
|
|
{ label: 'Publish:', value: publish, colorCls: 'text-green-700' },
|
|
])
|
|
);
|
|
})()}
|
|
</div>
|
|
|
|
{/* Images */}
|
|
<div className="bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 rounded-xl p-4 border-2 border-pink-200 dark:border-pink-800">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-10 rounded-lg bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center">
|
|
<FileIcon className="size-5 text-white" />
|
|
</div>
|
|
<div className="text-sm font-bold text-pink-900 dark:text-pink-100">Images</div>
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(6);
|
|
const total = res?.total ?? pipelineOverview[5]?.counts?.total ?? metrics?.images?.total ?? pipelineOverview[5]?.pending ?? 0;
|
|
return (
|
|
<div className="text-right">
|
|
<div className="text-3xl font-bold text-pink-900">{total}</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
{(() => {
|
|
const res = getStageResult(6); // stage 6 is Image Prompts -> Images
|
|
if (res && typeof res === 'object') {
|
|
const entries = Object.entries(res);
|
|
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-pink-700' }));
|
|
return renderMetricRow(items);
|
|
}
|
|
const counts = pipelineOverview[5]?.counts ?? metrics?.images ?? null;
|
|
if (counts && typeof counts === 'object') {
|
|
const entries = Object.entries(counts);
|
|
const items = entries.slice(0,3).map(([k, v]) => ({ label: `${k.replace(/_/g, ' ')}:`, value: Number(v) || 0, colorCls: 'text-pink-700' }));
|
|
return renderMetricRow(items);
|
|
}
|
|
return renderMetricRow([
|
|
{ label: 'Pending:', value: pipelineOverview[5]?.pending ?? metrics?.images?.pending ?? 0, colorCls: 'text-pink-700' },
|
|
]);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Current Processing Card - Shows real-time automation progress */}
|
|
{currentRun && (currentRun.status === 'running' || currentRun.status === 'paused') && activeSite && (
|
|
<CurrentProcessingCard
|
|
runId={currentRun.run_id}
|
|
siteId={activeSite.id}
|
|
currentRun={currentRun}
|
|
onUpdate={() => {
|
|
// Refresh current run status
|
|
loadCurrentRun();
|
|
}}
|
|
onClose={() => {
|
|
// Card will remain in DOM but user acknowledged it
|
|
// Can add state here to minimize it if needed
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Pipeline Stages */}
|
|
<ComponentCard>
|
|
{/* Row 1: Stages 1-4 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
{pipelineOverview.slice(0, 4).map((stage, index) => {
|
|
const stageConfig = STAGE_CONFIG[index];
|
|
const StageIcon = stageConfig.icon;
|
|
const isActive = currentRun?.current_stage === stage.number;
|
|
const isComplete = currentRun && currentRun.current_stage > stage.number;
|
|
const result = currentRun ? (currentRun[`stage_${stage.number}_result` as keyof AutomationRun] as any) : null;
|
|
const processed = result ? Object.values(result).reduce((sum: number, val) => typeof val === 'number' ? sum + val : sum, 0) : 0;
|
|
const progressPercent = stage.pending > 0 ? Math.round((processed / (processed + stage.pending)) * 100) : 0;
|
|
|
|
return (
|
|
<div
|
|
key={stage.number}
|
|
className={`
|
|
relative rounded-xl border-2 p-5 transition-all
|
|
${isActive
|
|
? 'border-blue-500 bg-blue-50 dark:bg-blue-500/10 shadow-lg'
|
|
: isComplete
|
|
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
|
|
: stage.pending > 0
|
|
? `border-slate-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
|
|
: 'border-slate-200 bg-slate-50 dark:bg-white/[0.02] dark:border-gray-800'
|
|
}
|
|
`}
|
|
>
|
|
{/* Compact Header */}
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="text-sm font-bold text-gray-900 dark:text-white">Stage {stage.number}</div>
|
|
{isActive && <span className="text-xs px-2 py-0.5 bg-blue-500 text-white rounded-full">● Active</span>}
|
|
{isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full">✓</span>}
|
|
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
|
|
</div>
|
|
<div className="text-xs font-medium text-gray-600 dark:text-gray-400">{stageConfig.name}</div>
|
|
</div>
|
|
<div className={`size-8 rounded-lg bg-gradient-to-br ${stageConfig.color} flex items-center justify-center shadow-md flex-shrink-0`}>
|
|
<StageIcon className="size-4 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Queue Metrics */}
|
|
<div className="space-y-1.5 text-xs mb-3">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Total Queue:</span>
|
|
<span className="font-bold text-slate-900 dark:text-white">{stage.pending}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Processed:</span>
|
|
<span className="font-bold text-slate-900 dark:text-white">{processed}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Remaining:</span>
|
|
<span className={`font-bold ${stageConfig.textColor} dark:${stageConfig.textColor}`}>
|
|
{stage.pending}
|
|
</span>
|
|
</div>
|
|
{/* Credits and Time - Section 6 Enhancement */}
|
|
{result && result.credits_used !== undefined && (
|
|
<div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700">
|
|
<span className="text-gray-600 dark:text-gray-400">Credits Used:</span>
|
|
<span className="font-bold text-amber-600 dark:text-amber-400">{result.credits_used}</span>
|
|
</div>
|
|
)}
|
|
{result && result.time_elapsed && (
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Duration:</span>
|
|
<span className="font-semibold text-gray-700 dark:text-gray-300">{result.time_elapsed}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Progress Bar */}
|
|
{(isActive || isComplete || processed > 0) && (
|
|
<div className="mt-3 pt-3 border-t border-slate-200 dark:border-gray-700">
|
|
<div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1.5">
|
|
<span>Progress</span>
|
|
<span>{isComplete ? '100' : progressPercent}%</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
|
|
<div
|
|
className={`bg-gradient-to-r ${stageConfig.color} h-2 rounded-full transition-all duration-500 ${isActive ? 'animate-pulse' : ''}`}
|
|
style={{ width: `${isComplete ? 100 : progressPercent}%` }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Row 2: Stages 5-7 + Status Summary */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{/* Stages 5-6 */}
|
|
{pipelineOverview.slice(4, 6).map((stage, index) => {
|
|
const actualIndex = index + 4;
|
|
const stageConfig = STAGE_CONFIG[actualIndex];
|
|
const StageIcon = stageConfig.icon;
|
|
const isActive = currentRun?.current_stage === stage.number;
|
|
const isComplete = currentRun && currentRun.current_stage > stage.number;
|
|
const result = currentRun ? (currentRun[`stage_${stage.number}_result` as keyof AutomationRun] as any) : null;
|
|
const processed = result ? Object.values(result).reduce((sum: number, val) => typeof val === 'number' ? sum + val : sum, 0) : 0;
|
|
const progressPercent = stage.pending > 0 ? Math.round((processed / (processed + stage.pending)) * 100) : 0;
|
|
|
|
return (
|
|
<div
|
|
key={stage.number}
|
|
className={`
|
|
relative rounded-xl border-2 p-5 transition-all
|
|
${isActive
|
|
? 'border-blue-500 bg-blue-50 dark:bg-blue-500/10 shadow-lg'
|
|
: isComplete
|
|
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
|
|
: stage.pending > 0
|
|
? `border-slate-200 bg-white dark:bg-white/[0.03] dark:border-gray-800 ${stageConfig.hoverColor} hover:shadow-lg`
|
|
: 'border-slate-200 bg-slate-50 dark:bg-white/[0.02] dark:border-gray-800'
|
|
}
|
|
`}
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="text-sm font-bold text-gray-900 dark:text-white">Stage {stage.number}</div>
|
|
{isActive && <span className="text-xs px-2 py-0.5 bg-blue-500 text-white rounded-full">● Active</span>}
|
|
{isComplete && <span className="text-xs px-2 py-0.5 bg-success-500 text-white rounded-full">✓</span>}
|
|
{!isActive && !isComplete && stage.pending > 0 && <span className="text-xs px-2 py-0.5 bg-gray-400 text-white rounded-full">Ready</span>}
|
|
</div>
|
|
<div className="text-xs font-medium text-gray-600 dark:text-gray-400">{stageConfig.name}</div>
|
|
</div>
|
|
<div className={`size-8 rounded-lg bg-gradient-to-br ${stageConfig.color} flex items-center justify-center shadow-md flex-shrink-0`}>
|
|
<StageIcon className="size-4 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5 text-xs mb-3">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Total Queue:</span>
|
|
<span className="font-bold text-slate-900 dark:text-white">{stage.pending}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Processed:</span>
|
|
<span className="font-bold text-slate-900 dark:text-white">{processed}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Remaining:</span>
|
|
<span className={`font-bold ${stageConfig.textColor}`}>
|
|
{stage.pending}
|
|
</span>
|
|
</div>
|
|
{/* Credits and Time - Section 6 Enhancement */}
|
|
{result && result.credits_used !== undefined && (
|
|
<div className="flex justify-between pt-1.5 border-t border-slate-200 dark:border-gray-700">
|
|
<span className="text-gray-600 dark:text-gray-400">Credits Used:</span>
|
|
<span className="font-bold text-amber-600 dark:text-amber-400">{result.credits_used}</span>
|
|
</div>
|
|
)}
|
|
{result && result.time_elapsed && (
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Duration:</span>
|
|
<span className="font-semibold text-gray-700 dark:text-gray-300">{result.time_elapsed}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{(isActive || isComplete || processed > 0) && (
|
|
<div className="mt-3 pt-3 border-t border-slate-200 dark:border-gray-700">
|
|
<div className="flex justify-between text-xs text-gray-600 dark:text-gray-400 mb-1.5">
|
|
<span>Progress</span>
|
|
<span>{isComplete ? '100' : progressPercent}%</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
|
|
<div
|
|
className={`bg-gradient-to-r ${stageConfig.color} h-2 rounded-full transition-all duration-500 ${isActive ? 'animate-pulse' : ''}`}
|
|
style={{ width: `${isComplete ? 100 : progressPercent}%` }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* Stage 7 - Manual Review Gate */}
|
|
{pipelineOverview[6] && (() => {
|
|
const stage7 = pipelineOverview[6];
|
|
const isActive = currentRun?.current_stage === 7;
|
|
const isComplete = currentRun && currentRun.current_stage > 7;
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
relative rounded-xl border-3 p-5 transition-all
|
|
${isActive
|
|
? 'border-amber-500 bg-amber-50 dark:bg-amber-500/10 shadow-lg'
|
|
: isComplete
|
|
? 'border-success-500 bg-success-50 dark:bg-success-500/10'
|
|
: stage7.pending > 0
|
|
? 'border-amber-300 bg-amber-50 dark:bg-amber-900/20 dark:border-amber-700'
|
|
: 'border-slate-200 bg-slate-50 dark:bg-white/[0.02] dark:border-gray-800'
|
|
}
|
|
`}
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="text-sm font-bold text-gray-900 dark:text-white">Stage 7</div>
|
|
<span className="text-xs px-2 py-0.5 bg-amber-500 text-white rounded-full">🚫 Stop</span>
|
|
</div>
|
|
<div className="text-xs font-medium text-amber-700 dark:text-amber-300">Manual Review Gate</div>
|
|
</div>
|
|
<div className="size-8 rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center shadow-md">
|
|
<PaperPlaneIcon className="size-4 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
{stage7.pending > 0 && (
|
|
<div className="text-center py-4">
|
|
<div className="text-3xl font-bold text-amber-600 dark:text-amber-400">{stage7.pending}</div>
|
|
<div className="text-xs text-amber-700 dark:text-amber-300 mt-1">ready for review</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-3 pt-3 border-t border-amber-200 dark:border-amber-700">
|
|
<Button
|
|
variant="primary"
|
|
tone="brand"
|
|
size="sm"
|
|
className="w-full text-xs"
|
|
disabled={stage7.pending === 0}
|
|
>
|
|
Go to Review →
|
|
</Button>
|
|
<div className="mt-2">
|
|
<Button
|
|
variant="outline"
|
|
tone="success"
|
|
size="sm"
|
|
className="w-full text-xs"
|
|
disabled={stage7.pending === 0}
|
|
onClick={handlePublishAllWithoutReview}
|
|
>
|
|
Publish all Without Review
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
|
|
{/* Published summary card (placed after Stage 7 in the same row) */}
|
|
<div className="rounded-xl p-5 border-2 border-green-200 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/10 dark:to-green-800/10 flex flex-col h-full">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-10 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
|
|
<FileTextIcon className="size-5 text-white" />
|
|
</div>
|
|
<div className="text-sm font-bold text-green-900 dark:text-green-100">Published</div>
|
|
</div>
|
|
<div className="text-right"> </div>
|
|
</div>
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="text-4xl md:text-5xl font-extrabold text-green-800 dark:text-green-300">{metrics?.content?.published ?? pipelineOverview[3]?.counts?.published ?? getStageResult(4)?.published ?? 0}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status Summary Card */}
|
|
{currentRun && (
|
|
<div className="relative rounded-xl border-2 border-slate-300 dark:border-gray-700 p-5 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-gray-800/50 dark:to-gray-700/50">
|
|
<div className="mb-3">
|
|
<div className="text-sm font-bold text-gray-900 dark:text-white mb-1">Current Status</div>
|
|
<div className="text-xs font-medium text-gray-600 dark:text-gray-400">Run Summary</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 text-xs">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Run ID:</span>
|
|
<span className="font-mono text-xs text-slate-900 dark:text-white">{currentRun.run_id.split('_').pop()}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Started:</span>
|
|
<span className="font-semibold text-slate-900 dark:text-white">
|
|
{new Date(currentRun.started_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Current Stage:</span>
|
|
<span className="font-bold text-blue-600 dark:text-blue-400">{currentRun.current_stage}/7</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Credits Used:</span>
|
|
<span className="font-bold text-brand-600 dark:text-brand-400">{currentRun.total_credits_used}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600 dark:text-gray-400">Completion:</span>
|
|
<span className="font-bold text-slate-900 dark:text-white">{Math.round((currentRun.current_stage / 7) * 100)}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 pt-3 border-t border-slate-300 dark:border-gray-600">
|
|
<div className={`
|
|
size-12 mx-auto rounded-full flex items-center justify-center
|
|
${currentRun.status === 'running'
|
|
? 'bg-gradient-to-br from-blue-500 to-blue-600 animate-pulse'
|
|
: currentRun.status === 'paused'
|
|
? 'bg-gradient-to-br from-amber-500 to-amber-600'
|
|
: 'bg-gradient-to-br from-success-500 to-success-600'
|
|
}
|
|
`}>
|
|
{currentRun.status === 'running' && <div className="size-3 bg-white rounded-full"></div>}
|
|
{currentRun.status === 'paused' && <ClockIcon className="size-6 text-white" />}
|
|
{currentRun.status === 'completed' && <CheckCircleIcon className="size-6 text-white" />}
|
|
</div>
|
|
<div className="text-center mt-2 text-xs font-semibold text-gray-700 dark:text-gray-300 capitalize">
|
|
{currentRun.status}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ComponentCard>
|
|
|
|
{/* Current Run Details */}
|
|
{currentRun && (
|
|
<ComponentCard title={`Current Run: ${currentRun.run_id}`} desc="Live automation progress and detailed results">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<EnhancedMetricCard
|
|
title="Status"
|
|
value={currentRun.status}
|
|
icon={
|
|
currentRun.status === 'running' ? <BoltIcon className="size-6" /> :
|
|
currentRun.status === 'paused' ? <ClockIcon className="size-6" /> :
|
|
currentRun.status === 'completed' ? <CheckCircleIcon className="size-6" /> :
|
|
<FileTextIcon className="size-6" />
|
|
}
|
|
accentColor={
|
|
currentRun.status === 'running' ? 'blue' :
|
|
currentRun.status === 'paused' ? 'orange' :
|
|
currentRun.status === 'completed' ? 'success' : 'red'
|
|
}
|
|
/>
|
|
<EnhancedMetricCard
|
|
title="Started"
|
|
value={new Date(currentRun.started_at).toLocaleTimeString()}
|
|
icon={<ClockIcon className="size-6" />}
|
|
accentColor="blue"
|
|
/>
|
|
<EnhancedMetricCard
|
|
title="Credits Used"
|
|
value={currentRun.total_credits_used}
|
|
icon={<BoltIcon className="size-6" />}
|
|
accentColor="blue"
|
|
/>
|
|
<EnhancedMetricCard
|
|
title="Trigger"
|
|
value={currentRun.trigger_type}
|
|
icon={<PaperPlaneIcon className="size-6" />}
|
|
accentColor="green"
|
|
/>
|
|
</div>
|
|
</ComponentCard>
|
|
)}
|
|
|
|
{/* Activity Log */}
|
|
{currentRun && <ActivityLog runId={currentRun.run_id} />}
|
|
|
|
{/* Run History */}
|
|
<RunHistory siteId={activeSite.id} />
|
|
|
|
{/* Config Modal */}
|
|
{showConfigModal && config && (
|
|
<ConfigModal config={config} onSave={handleSaveConfig} onCancel={() => setShowConfigModal(false)} />
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AutomationPage;
|
|
|