Pre luanch plan phase 1 complete
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,389 +0,0 @@
|
||||
/**
|
||||
* 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 StageCard from '../../components/Automation/StageCard';
|
||||
import ActivityLog from '../../components/Automation/ActivityLog';
|
||||
import ConfigModal from '../../components/Automation/ConfigModal';
|
||||
import RunHistory from '../../components/Automation/RunHistory';
|
||||
import PageMeta from '../../components/common/PageMeta';
|
||||
import ComponentCard from '../../components/common/ComponentCard';
|
||||
import DebugSiteSelector from '../../components/common/DebugSiteSelector';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import { BoltIcon } from '../../icons';
|
||||
|
||||
const STAGE_NAMES = [
|
||||
'Keywords → Clusters',
|
||||
'Clusters → Ideas',
|
||||
'Ideas → Tasks',
|
||||
'Tasks → Content',
|
||||
'Content → Image Prompts',
|
||||
'Image Prompts → Images',
|
||||
'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 [showConfigModal, setShowConfigModal] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
|
||||
const [estimate, setEstimate] = useState<{ estimated_credits: number; current_balance: number; sufficient: boolean } | null>(null);
|
||||
|
||||
// Poll for current run updates
|
||||
useEffect(() => {
|
||||
if (!activeSite) return;
|
||||
|
||||
loadData();
|
||||
|
||||
// Poll every 5 seconds when run is active
|
||||
const interval = setInterval(() => {
|
||||
if (currentRun && (currentRun.status === 'running' || currentRun.status === 'paused')) {
|
||||
loadCurrentRun();
|
||||
} else {
|
||||
// Refresh pipeline overview when not running
|
||||
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),
|
||||
]);
|
||||
setConfig(configData);
|
||||
setCurrentRun(runData.run);
|
||||
setEstimate(estimateData);
|
||||
setPipelineOverview(pipelineData.stages);
|
||||
setLastUpdated(new Date());
|
||||
} 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;
|
||||
|
||||
// Check credit balance
|
||||
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');
|
||||
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');
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageMeta
|
||||
title="AI Automation Pipeline | IGNY8"
|
||||
description="Automated content creation from keywords to published articles"
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Page Header with Site Selector (no sector) */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-xl bg-purple-600 dark:bg-purple-500 flex-shrink-0">
|
||||
<BoltIcon className="text-white size-5" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">AI Automation Pipeline</h2>
|
||||
</div>
|
||||
{activeSite && (
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
{lastUpdated && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Last updated: {lastUpdated.toLocaleTimeString()}
|
||||
</p>
|
||||
)}
|
||||
<span className="text-sm text-gray-400 dark:text-gray-600">•</span>
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Site: <span className="text-brand-600 dark:text-brand-400">{activeSite.name}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<DebugSiteSelector />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Schedule Status Card */}
|
||||
{config && (
|
||||
<ComponentCard
|
||||
title="Schedule & Status"
|
||||
desc="Configure and monitor your automation schedule"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
|
||||
<div className="font-semibold mt-1">
|
||||
{config.is_enabled ? (
|
||||
<span className="text-success-600 dark:text-success-400">● Enabled</span>
|
||||
) : (
|
||||
<span className="text-gray-600 dark:text-gray-400">○ Disabled</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Schedule</div>
|
||||
<div className="font-semibold mt-1 capitalize">
|
||||
{config.frequency} at {config.scheduled_time}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Last Run</div>
|
||||
<div className="font-semibold mt-1">
|
||||
{config.last_run_at
|
||||
? new Date(config.last_run_at).toLocaleString()
|
||||
: 'Never'}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Estimated Credits</div>
|
||||
<div className="font-semibold mt-1">
|
||||
{estimate?.estimated_credits || 0} credits
|
||||
{estimate && !estimate.sufficient && (
|
||||
<span className="text-error-600 dark:text-error-400 ml-2">(Insufficient)</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mt-6">
|
||||
<Button
|
||||
onClick={() => setShowConfigModal(true)}
|
||||
variant="outline"
|
||||
tone="brand"
|
||||
>
|
||||
Configure
|
||||
</Button>
|
||||
{currentRun?.status === 'running' && (
|
||||
<Button
|
||||
onClick={handlePause}
|
||||
variant="primary"
|
||||
tone="warning"
|
||||
>
|
||||
Pause
|
||||
</Button>
|
||||
)}
|
||||
{currentRun?.status === 'paused' && (
|
||||
<Button
|
||||
onClick={handleResume}
|
||||
variant="primary"
|
||||
tone="brand"
|
||||
>
|
||||
Resume
|
||||
</Button>
|
||||
)}
|
||||
{!currentRun && (
|
||||
<Button
|
||||
onClick={handleRunNow}
|
||||
variant="primary"
|
||||
tone="success"
|
||||
disabled={!config?.is_enabled}
|
||||
>
|
||||
Run Now
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
)}
|
||||
|
||||
{/* Pipeline Overview - Always Visible */}
|
||||
<ComponentCard
|
||||
title="📊 Pipeline Overview"
|
||||
desc="Complete view of automation pipeline status and pending items"
|
||||
>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{currentRun ? (
|
||||
<>
|
||||
<span className="font-semibold text-brand-600 dark:text-brand-400">● Live Run Active</span> - Stage {currentRun.current_stage} of 7
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="font-semibold text-gray-700 dark:text-gray-300">Pipeline Status</span> - Ready to run
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{pipelineOverview.reduce((sum, stage) => sum + stage.pending, 0)} total items pending
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stage Cards Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-7 gap-3">
|
||||
{STAGE_NAMES.map((name, index) => (
|
||||
<StageCard
|
||||
key={index}
|
||||
stageNumber={index + 1}
|
||||
stageName={name}
|
||||
currentStage={currentRun?.current_stage || 0}
|
||||
result={currentRun ? (currentRun[`stage_${index + 1}_result` as keyof AutomationRun] as any) : null}
|
||||
pipelineData={pipelineOverview[index]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</ComponentCard>
|
||||
|
||||
{/* Current Run Status */}
|
||||
{currentRun && (
|
||||
<ComponentCard
|
||||
title={`🔄 Current Run: ${currentRun.run_id}`}
|
||||
desc="Live automation progress and detailed results"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
|
||||
<div className="font-semibold mt-1 capitalize">
|
||||
{currentRun.status === 'running' && <span className="text-brand-600 dark:text-brand-400">● {currentRun.status}</span>}
|
||||
{currentRun.status === 'paused' && <span className="text-warning-600 dark:text-warning-400">⏸ {currentRun.status}</span>}
|
||||
{currentRun.status === 'completed' && <span className="text-success-600 dark:text-success-400">✓ {currentRun.status}</span>}
|
||||
{currentRun.status === 'failed' && <span className="text-error-600 dark:text-error-400">✗ {currentRun.status}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Current Stage</div>
|
||||
<div className="font-semibold mt-1">
|
||||
Stage {currentRun.current_stage}: {STAGE_NAMES[currentRun.current_stage - 1]}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Started</div>
|
||||
<div className="font-semibold mt-1">
|
||||
{new Date(currentRun.started_at).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Credits Used</div>
|
||||
<div className="font-semibold mt-1 text-purple-600 dark:text-purple-400">{currentRun.total_credits_used}</div>
|
||||
</div>
|
||||
</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;
|
||||
Reference in New Issue
Block a user