fixees

frontend/src/components/Automation/ActivityLog.tsx

@@ -4,6 +4,7 @@
  */
 import React, { useState, useEffect } from 'react';
 import { automationService } from '../../services/automationService';
+import ComponentCard from '../common/ComponentCard';
 
 interface ActivityLogProps {
   runId: string;
@@ -31,15 +32,17 @@ const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
   };
 
   return (
-    <div className="bg-white p-4 rounded-lg shadow">
+    <ComponentCard
+      title="Activity Log"
+      desc="Real-time automation progress and events"
+    >
       <div className="flex items-center justify-between mb-3">
-        <h2 className="text-xl font-bold">Activity Log</h2>
         <div className="flex items-center gap-2">
-          <label className="text-sm">Lines:</label>
+          <label className="text-sm text-gray-600 dark:text-gray-400">Lines:</label>
           <select
             value={lines}
             onChange={(e) => setLines(parseInt(e.target.value))}
-            className="border rounded px-2 py-1 text-sm"
+            className="border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
           >
             <option value={50}>50</option>
             <option value={100}>100</option>
@@ -48,11 +51,14 @@ const ActivityLog: React.FC<ActivityLogProps> = ({ runId }) => {
           </select>
         </div>
       </div>
-      <div className="bg-gray-900 text-green-400 p-4 rounded font-mono text-xs overflow-auto max-h-96">
+      <div className="bg-gray-900 dark:bg-gray-950 text-green-400 p-4 rounded-lg font-mono text-xs overflow-auto max-h-96 border border-gray-700">
         <pre className="whitespace-pre-wrap">{logs || 'No logs available'}</pre>
       </div>
-    </div>
+    </ComponentCard>
   );
 };
 
 export default ActivityLog;
+};
+
+export default ActivityLog;

frontend/src/components/Automation/RunHistory.tsx

@@ -4,6 +4,7 @@
  */
 import React, { useState, useEffect } from 'react';
 import { automationService, RunHistoryItem } from '../../services/automationService';
+import ComponentCard from '../common/ComponentCard';
 
 interface RunHistoryProps {
   siteId: number;
@@ -31,56 +32,61 @@ const RunHistory: React.FC<RunHistoryProps> = ({ siteId }) => {
 
   const getStatusBadge = (status: string) => {
     const colors: Record<string, string> = {
-      completed: 'bg-green-100 text-green-800',
-      running: 'bg-blue-100 text-blue-800',
-      paused: 'bg-yellow-100 text-yellow-800',
-      failed: 'bg-red-100 text-red-800',
+      completed: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+      running: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+      paused: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
+      failed: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
     };
-    return colors[status] || 'bg-gray-100 text-gray-800';
+    return colors[status] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
   };
 
   if (loading) {
-    return <div className="text-center py-4">Loading history...</div>;
+    return (
+      <ComponentCard title="Run History" desc="Past automation executions">
+        <div className="text-center py-4 text-gray-600 dark:text-gray-400">Loading history...</div>
+      </ComponentCard>
+    );
   }
 
   return (
-    <div className="bg-white p-4 rounded-lg shadow">
-      <h2 className="text-xl font-bold mb-4">Run History</h2>
-
+    <ComponentCard
+      title="Run History"
+      desc="Past automation executions and their results"
+    >
       {history.length === 0 ? (
-        <div className="text-center text-gray-600 py-8">No automation runs yet</div>
+        <div className="text-center text-gray-600 dark:text-gray-400 py-8">No automation runs yet</div>
       ) : (
-        <div className="overflow-x-auto">
+        <div className="overflow-x-auto -mx-6">
           <table className="min-w-full">
-            <thead className="bg-gray-50">
+            <thead className="bg-gray-50 dark:bg-gray-800/50">
               <tr>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                   Run ID
                 </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                   Status
                 </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                   Trigger
                 </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                   Started
                 </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                   Completed
                 </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                   Credits Used
                 </th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                   Stage
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-200">
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
               {history.map((run) => (
-                <tr key={run.run_id} className="hover:bg-gray-50">
-                  <td className="px-4 py-3 text-sm font-mono">{run.run_id.slice(0, 8)}...</td>
+                <tr key={run.run_id} className="hover:bg-gray-50 dark:hover:bg-gray-800/30">
+                  <td className="px-4 py-3 text-sm font-mono text-gray-900 dark:text-gray-100">{run.run_id.slice(0, 8)}...</td>
                   <td className="px-4 py-3">
                     <span
                       className={`px-2 py-1 rounded-full text-xs font-semibold ${getStatusBadge(
@@ -90,25 +96,28 @@ const RunHistory: React.FC<RunHistoryProps> = ({ siteId }) => {
                       {run.status}
                     </span>
                   </td>
-                  <td className="px-4 py-3 text-sm capitalize">{run.trigger_type}</td>
-                  <td className="px-4 py-3 text-sm">
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 capitalize">{run.trigger_type}</td>
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
                     {new Date(run.started_at).toLocaleString()}
                   </td>
-                  <td className="px-4 py-3 text-sm">
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
                     {run.completed_at
                       ? new Date(run.completed_at).toLocaleString()
                       : '-'}
                   </td>
-                  <td className="px-4 py-3 text-sm">{run.total_credits_used}</td>
-                  <td className="px-4 py-3 text-sm">{run.current_stage}/7</td>
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">{run.total_credits_used}</td>
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">{run.current_stage}/7</td>
                 </tr>
               ))}
             </tbody>
           </table>
         </div>
       )}
-    </div>
+    </ComponentCard>
   );
 };
 
 export default RunHistory;
+};
+
+export default RunHistory;

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>
+    </>
   );
 };