fixees

frontend/src/pages/Automation/AutomationPage.tsx

@@ -10,6 +10,11 @@ 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',
@@ -23,11 +28,12 @@ const STAGE_NAMES = [
 
 const AutomationPage: React.FC = () => {
   const { activeSite } = useSiteStore();
-  const { showToast } = useToast();
+  const toast = useToast();
   const [config, setConfig] = useState<AutomationConfig | null>(null);
   const [currentRun, setCurrentRun] = useState<AutomationRun | null>(null);
   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
@@ -59,8 +65,9 @@ const AutomationPage: React.FC = () => {
       setConfig(configData);
       setCurrentRun(runData.run);
       setEstimate(estimateData);
+      setLastUpdated(new Date());
     } catch (error: any) {
-      showToast('Failed to load automation data', 'error');
+      toast.error('Failed to load automation data');
       console.error(error);
     } finally {
       setLoading(false);
@@ -83,16 +90,16 @@ const AutomationPage: React.FC = () => {
 
     // Check credit balance
     if (estimate && !estimate.sufficient) {
-      showToast(`Insufficient credits. Need ~${estimate.estimated_credits}, you have ${estimate.current_balance}`, 'error');
+      toast.error(`Insufficient credits. Need ~${estimate.estimated_credits}, you have ${estimate.current_balance}`);
       return;
     }
 
     try {
       const result = await automationService.runNow(activeSite.id);
-      showToast('Automation started', 'success');
+      toast.success('Automation started');
       loadCurrentRun();
     } catch (error: any) {
-      showToast(error.response?.data?.error || 'Failed to start automation', 'error');
+      toast.error(error.response?.data?.error || 'Failed to start automation');
     }
   };
 
@@ -101,10 +108,10 @@ const AutomationPage: React.FC = () => {
 
     try {
       await automationService.pause(currentRun.run_id);
-      showToast('Automation paused', 'success');
+      toast.success('Automation paused');
       loadCurrentRun();
     } catch (error) {
-      showToast('Failed to pause automation', 'error');
+      toast.error('Failed to pause automation');
     }
   };
 
@@ -113,10 +120,10 @@ const AutomationPage: React.FC = () => {
 
     try {
       await automationService.resume(currentRun.run_id);
-      showToast('Automation resumed', 'success');
+      toast.success('Automation resumed');
       loadCurrentRun();
     } catch (error) {
-      showToast('Failed to resume automation', 'error');
+      toast.error('Failed to resume automation');
     }
   };
 
@@ -125,150 +132,180 @@ const AutomationPage: React.FC = () => {
 
     try {
       await automationService.updateConfig(activeSite.id, newConfig);
-      showToast('Configuration saved', 'success');
+      toast.success('Configuration saved');
       setShowConfigModal(false);
       loadData();
     } catch (error) {
-      showToast('Failed to save configuration', 'error');
+      toast.error('Failed to save configuration');
     }
   };
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="text-xl">Loading automation...</div>
+      <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 h-screen">
-        <div className="text-xl">Please select a site</div>
+      <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 (
-    <div className="container mx-auto px-4 py-6">
-      {/* Header */}
-      <div className="mb-6">
-        <div className="flex items-center justify-between mb-4">
-          <div>
-            <h1 className="text-3xl font-bold">AI Automation Pipeline</h1>
-            <p className="text-gray-600 mt-1">
-              Automated content creation from keywords to published articles
-            </p>
+    <>
+      <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 gap-2">
-            <button
-              onClick={() => setShowConfigModal(true)}
-              className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
-            >
-              Configure
-            </button>
-            {currentRun?.status === 'running' && (
-              <button
-                onClick={handlePause}
-                className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
-              >
-                Pause
-              </button>
-            )}
-            {currentRun?.status === 'paused' && (
-              <button
-                onClick={handleResume}
-                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-              >
-                Resume
-              </button>
-            )}
-            {!currentRun && (
-              <button
-                onClick={handleRunNow}
-                className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
-                disabled={!config?.is_enabled}
-              >
-                Run Now
-              </button>
-            )}
+          
+          <div className="flex items-center gap-3">
+            <DebugSiteSelector />
           </div>
         </div>
 
-        {/* Status Bar */}
+        {/* Schedule Status Card */}
         {config && (
-          <div className="bg-white p-4 rounded-lg shadow">
-            <div className="grid grid-cols-4 gap-4">
+          <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">Status</div>
-                <div className="font-semibold">
+                <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-green-600">Enabled</span>
+                    <span className="text-green-600 dark:text-green-400">● Enabled</span>
                   ) : (
-                    <span className="text-gray-600">Disabled</span>
+                    <span className="text-gray-600 dark:text-gray-400">○ Disabled</span>
                   )}
                 </div>
               </div>
               <div>
-                <div className="text-sm text-gray-600">Schedule</div>
-                <div className="font-semibold capitalize">
+                <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">Last Run</div>
-                <div className="font-semibold">
+                <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">Estimated Credits</div>
-                <div className="font-semibold">
+                <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-red-600 ml-2">(Insufficient)</span>
+                    <span className="text-red-600 dark:text-red-400 ml-2">(Insufficient)</span>
                   )}
                 </div>
               </div>
             </div>
-          </div>
-        )}
-      </div>
 
-      {/* Current Run Status */}
-      {currentRun && (
-        <div className="mb-6">
-          <div className="bg-white p-4 rounded-lg shadow">
-            <h2 className="text-xl font-bold mb-4">
-              Current Run: {currentRun.run_id}
-            </h2>
-            <div className="grid grid-cols-4 gap-4 mb-4">
+            <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>
+        )}
+
+        {/* Current Run Status */}
+        {currentRun && (
+          <ComponentCard
+            title={`Current Run: ${currentRun.run_id}`}
+            desc="Live automation progress and stage details"
+          >
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
               <div>
-                <div className="text-sm text-gray-600">Status</div>
-                <div className="font-semibold capitalize">{currentRun.status}</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">Status</div>
+                <div className="font-semibold mt-1 capitalize">{currentRun.status}</div>
               </div>
               <div>
-                <div className="text-sm text-gray-600">Current Stage</div>
-                <div className="font-semibold">
+                <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">Started</div>
-                <div className="font-semibold">
+                <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">Credits Used</div>
-                <div className="font-semibold">{currentRun.total_credits_used}</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">Credits Used</div>
+                <div className="font-semibold mt-1">{currentRun.total_credits_used}</div>
               </div>
             </div>
 
             {/* Stage Progress */}
-            <div className="grid grid-cols-7 gap-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-7 gap-3 mt-6">
               {STAGE_NAMES.map((name, index) => (
                 <StageCard
                   key={index}
@@ -279,29 +316,27 @@ const AutomationPage: React.FC = () => {
                 />
               ))}
             </div>
-          </div>
-        </div>
-      )}
+          </ComponentCard>
+        )}
 
-      {/* Activity Log */}
-      {currentRun && (
-        <div className="mb-6">
+        {/* Activity Log */}
+        {currentRun && (
           <ActivityLog runId={currentRun.run_id} />
-        </div>
-      )}
+        )}
 
-      {/* Run History */}
-      <RunHistory siteId={activeSite.id} />
+        {/* Run History */}
+        <RunHistory siteId={activeSite.id} />
 
-      {/* Config Modal */}
-      {showConfigModal && config && (
-        <ConfigModal
-          config={config}
-          onSave={handleSaveConfig}
-          onCancel={() => setShowConfigModal(false)}
-        />
-      )}
-    </div>
+        {/* Config Modal */}
+        {showConfigModal && config && (
+          <ConfigModal
+            config={config}
+            onSave={handleSaveConfig}
+            onCancel={() => setShowConfigModal(false)}
+          />
+        )}
+      </div>
+    </>
   );
 };