Add automation routes and enhance header metrics management

- Introduced new routes for Automation Rules and Automation Tasks in the frontend.
- Updated the AppSidebar to include sub-items for Automation navigation.
- Enhanced HeaderMetricsContext to manage credit and page metrics more effectively, ensuring proper merging and clearing of metrics.
- Adjusted AppLayout and TablePageTemplate to maintain credit balance while managing page metrics.

frontend/src/App.tsx

@@ -60,6 +60,8 @@ const ReferenceIndustries = lazy(() => import("./pages/Reference/Industries"));
 
 // Other Pages - Lazy loaded
 const AutomationDashboard = lazy(() => import("./pages/Automation/Dashboard"));
+const AutomationRules = lazy(() => import("./pages/Automation/Rules"));
+const AutomationTasks = lazy(() => import("./pages/Automation/Tasks"));
 
 // Settings - Lazy loaded
 const GeneralSettings = lazy(() => import("./pages/Settings/General"));
@@ -341,6 +343,20 @@ export default function App() {
                 </ModuleGuard>
               </Suspense>
             } />
+            <Route path="/automation/rules" element={
+              <Suspense fallback={null}>
+                <ModuleGuard module="automation">
+                  <AutomationRules />
+                </ModuleGuard>
+              </Suspense>
+            } />
+            <Route path="/automation/tasks" element={
+              <Suspense fallback={null}>
+                <ModuleGuard module="automation">
+                  <AutomationTasks />
+                </ModuleGuard>
+              </Suspense>
+            } />
 
             {/* Settings */}
             <Route path="/settings" element={

frontend/src/api/automation.api.ts

@@ -0,0 +1,176 @@
+import { fetchAPI } from '../services/api';
+
+/**
+ * Automation API Client
+ * Functions for automation rules and scheduled tasks
+ */
+
+export interface AutomationRule {
+  id: number;
+  name: string;
+  description?: string;
+  trigger: 'schedule' | 'event' | 'manual';
+  schedule?: string; // Cron-like string
+  conditions: Array<{
+    field: string;
+    operator: string;
+    value: any;
+  }>;
+  actions: Array<{
+    type: string;
+    params: Record<string, any>;
+  }>;
+  is_active: boolean;
+  status: 'active' | 'inactive' | 'paused';
+  execution_count: number;
+  last_executed_at?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ScheduledTask {
+  id: number;
+  rule_id?: number;
+  rule_name?: string;
+  task_type: string;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+  scheduled_at: string;
+  started_at?: string;
+  completed_at?: string;
+  result?: Record<string, any>;
+  error?: string;
+  retry_count: number;
+  created_at: string;
+}
+
+export interface AutomationRuleCreateData {
+  name: string;
+  description?: string;
+  trigger: 'schedule' | 'event' | 'manual';
+  schedule?: string;
+  conditions?: Array<{
+    field: string;
+    operator: string;
+    value: any;
+  }>;
+  actions: Array<{
+    type: string;
+    params: Record<string, any>;
+  }>;
+  is_active?: boolean;
+}
+
+export interface AutomationRuleUpdateData extends Partial<AutomationRuleCreateData> {}
+
+export const automationApi = {
+  /**
+   * List automation rules
+   */
+  listRules: async (filters?: {
+    search?: string;
+    trigger?: string;
+    is_active?: boolean;
+    status?: string;
+    ordering?: string;
+    page?: number;
+    page_size?: number;
+  }) => {
+    const params = new URLSearchParams();
+    if (filters?.search) params.append('search', filters.search);
+    if (filters?.trigger) params.append('trigger', filters.trigger);
+    if (filters?.is_active !== undefined) params.append('is_active', String(filters.is_active));
+    if (filters?.status) params.append('status', filters.status);
+    if (filters?.ordering) params.append('ordering', filters.ordering);
+    if (filters?.page) params.append('page', String(filters.page));
+    if (filters?.page_size) params.append('page_size', String(filters.page_size));
+    
+    const query = params.toString();
+    return await fetchAPI(`/v1/automation/rules/${query ? `?${query}` : ''}`);
+  },
+
+  /**
+   * Get a single automation rule
+   */
+  getRule: async (id: number) => {
+    return await fetchAPI(`/v1/automation/rules/${id}/`) as AutomationRule;
+  },
+
+  /**
+   * Create a new automation rule
+   */
+  createRule: async (data: AutomationRuleCreateData) => {
+    return await fetchAPI('/v1/automation/rules/', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }) as AutomationRule;
+  },
+
+  /**
+   * Update an automation rule
+   */
+  updateRule: async (id: number, data: AutomationRuleUpdateData) => {
+    return await fetchAPI(`/v1/automation/rules/${id}/`, {
+      method: 'PATCH',
+      body: JSON.stringify(data),
+    }) as AutomationRule;
+  },
+
+  /**
+   * Delete an automation rule
+   */
+  deleteRule: async (id: number) => {
+    return await fetchAPI(`/v1/automation/rules/${id}/`, {
+      method: 'DELETE',
+    });
+  },
+
+  /**
+   * Execute an automation rule manually
+   */
+  executeRule: async (id: number, context?: Record<string, any>) => {
+    return await fetchAPI(`/v1/automation/rules/${id}/execute/`, {
+      method: 'POST',
+      body: JSON.stringify({ context: context || {} }),
+    });
+  },
+
+  /**
+   * List scheduled tasks
+   */
+  listTasks: async (filters?: {
+    rule_id?: number;
+    status?: string;
+    task_type?: string;
+    ordering?: string;
+    page?: number;
+    page_size?: number;
+  }) => {
+    const params = new URLSearchParams();
+    if (filters?.rule_id) params.append('rule_id', String(filters.rule_id));
+    if (filters?.status) params.append('status', filters.status);
+    if (filters?.task_type) params.append('task_type', filters.task_type);
+    if (filters?.ordering) params.append('ordering', filters.ordering);
+    if (filters?.page) params.append('page', String(filters.page));
+    if (filters?.page_size) params.append('page_size', String(filters.page_size));
+    
+    const query = params.toString();
+    return await fetchAPI(`/v1/automation/scheduled-tasks/${query ? `?${query}` : ''}`);
+  },
+
+  /**
+   * Get a single scheduled task
+   */
+  getTask: async (id: number) => {
+    return await fetchAPI(`/v1/automation/scheduled-tasks/${id}/`) as ScheduledTask;
+  },
+
+  /**
+   * Retry a failed scheduled task
+   */
+  retryTask: async (id: number) => {
+    return await fetchAPI(`/v1/automation/scheduled-tasks/${id}/retry/`, {
+      method: 'POST',
+    });
+  },
+};
+

frontend/src/components/header/HeaderMetrics.tsx

@@ -7,7 +7,7 @@ export const HeaderMetrics: React.FC = () => {
   if (!metrics || metrics.length === 0) return null;
 
   return (
-    <div className="igny8-header-metrics hidden lg:flex">
+    <div className="igny8-header-metrics flex">
       {metrics.map((metric, index) => (
         <React.Fragment key={index}>
           <div className="igny8-header-metric">

frontend/src/context/HeaderMetricsContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, ReactNode } from 'react';
+import { createContext, useContext, useState, ReactNode, useRef, useCallback } from 'react';
 
 interface HeaderMetric {
   label: string;
@@ -28,13 +28,66 @@ interface HeaderMetricsProviderProps {
 
 export const HeaderMetricsProvider: React.FC<HeaderMetricsProviderProps> = ({ children }) => {
   const [metrics, setMetrics] = useState<HeaderMetric[]>([]);
+  const creditMetricRef = useRef<HeaderMetric | null>(null);
+  const pageMetricsRef = useRef<HeaderMetric[]>([]);
 
-  const clearMetrics = () => {
+  // Update combined metrics (credit + page metrics)
+  const updateCombinedMetrics = useCallback(() => {
+    const combined: HeaderMetric[] = [];
+    
+    // Add credit balance first if it exists
+    if (creditMetricRef.current) {
+      combined.push(creditMetricRef.current);
+    }
+    
+    // Add page metrics (filter out any credit metric to avoid duplicates)
+    const pageMetricsFiltered = pageMetricsRef.current.filter(
+      m => m.label.toLowerCase() !== 'credits'
+    );
+    combined.push(...pageMetricsFiltered);
+    
+    setMetrics(combined);
+  }, []);
+
+  // Track last setter to distinguish between AppLayout and TablePageTemplate
+  const lastSetterRef = useRef<'credit' | 'page' | null>(null);
+
+  // Handle setMetrics - determine if it's credit balance or page metrics
+  const handleSetMetrics = useCallback((newMetrics: HeaderMetric[]) => {
+    // Check if this is a credit metric (single metric with label "Credits")
+    const creditMetric = newMetrics.find(m => m.label.toLowerCase() === 'credits');
+    
+    if (newMetrics.length === 0) {
+      // Empty array - use last setter to determine what to clear
+      if (lastSetterRef.current === 'credit') {
+        // AppLayout is clearing credit balance
+        creditMetricRef.current = null;
+      } else {
+        // TablePageTemplate is clearing page metrics
+        pageMetricsRef.current = [];
+      }
+      updateCombinedMetrics();
+    } else if (creditMetric && newMetrics.length === 1) {
+      // This is just credit balance - update credit ref
+      creditMetricRef.current = creditMetric;
+      lastSetterRef.current = 'credit';
+      updateCombinedMetrics();
+    } else {
+      // This is page metrics - update page metrics ref (filter out credits)
+      pageMetricsRef.current = newMetrics.filter(m => m.label.toLowerCase() !== 'credits');
+      lastSetterRef.current = 'page';
+      updateCombinedMetrics();
+    }
+  }, [updateCombinedMetrics]);
+
+  const clearMetrics = useCallback(() => {
     setMetrics([]);
-  };
+    pageMetricsRef.current = [];
+    creditMetricRef.current = null;
+  }, []);
 
   return (
-    <HeaderMetricsContext.Provider value={{ metrics, setMetrics, clearMetrics }}>
+    <HeaderMetricsContext.Provider value={{ metrics, setMetrics: handleSetMetrics, clearMetrics }}>
       {children}
     </HeaderMetricsContext.Provider>
   );

frontend/src/layout/AppLayout.tsx

@@ -224,8 +224,10 @@ const LayoutContent: React.FC = () => {
   }, [isAuthenticated, balance, loadBalance, setMetrics]);
 
   // Update header metrics when balance changes
+  // This sets credit balance which will be merged with page metrics by HeaderMetricsContext
   useEffect(() => {
     if (!isAuthenticated || !balance) {
+      // Clear credit balance but keep page metrics
       setMetrics([]);
       return;
     }
@@ -242,6 +244,7 @@ const LayoutContent: React.FC = () => {
       accentColor = 'purple';
     }
     
+    // Set credit balance (single metric with label "Credits" - HeaderMetricsContext will merge it)
     setMetrics([{
       label: 'Credits',
       value: balance.credits,

frontend/src/layout/AppSidebar.tsx

@@ -163,7 +163,11 @@ const AppSidebar: React.FC = () => {
       workflowItems.push({
         icon: <BoltIcon />,
         name: "Automation",
-        path: "/automation",
+        subItems: [
+          { name: "Dashboard", path: "/automation" },
+          { name: "Rules", path: "/automation/rules" },
+          { name: "Tasks", path: "/automation/tasks" },
+        ],
       });
     }
     

frontend/src/pages/Automation/Rules.tsx

@@ -0,0 +1,254 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router';
+import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
+import ComponentCard from '../../components/common/ComponentCard';
+import { automationApi, AutomationRule } from '../../api/automation.api';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { BoltIcon, PlusIcon, PlayIcon, PauseIcon, TrashIcon, EditIcon } from '../../icons';
+import { useSiteStore } from '../../store/siteStore';
+import { useSectorStore } from '../../store/sectorStore';
+
+export default function AutomationRules() {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const { activeSite } = useSiteStore();
+  const { activeSector } = useSectorStore();
+
+  const [rules, setRules] = useState<AutomationRule[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedRule, setSelectedRule] = useState<AutomationRule | null>(null);
+  const [isWizardOpen, setIsWizardOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+
+  const loadRules = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await automationApi.listRules({
+        page_size: 100,
+      });
+      setRules(response.results || []);
+    } catch (error: any) {
+      console.error('Error loading rules:', error);
+      toast.error(`Failed to load rules: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [toast]);
+
+  useEffect(() => {
+    loadRules();
+  }, [loadRules]);
+
+  const handleCreate = () => {
+    setSelectedRule(null);
+    setIsEditMode(false);
+    setIsWizardOpen(true);
+  };
+
+  const handleEdit = (rule: AutomationRule) => {
+    setSelectedRule(rule);
+    setIsEditMode(true);
+    setIsWizardOpen(true);
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm('Are you sure you want to delete this rule?')) return;
+    
+    try {
+      await automationApi.deleteRule(id);
+      toast.success('Rule deleted successfully');
+      loadRules();
+    } catch (error: any) {
+      toast.error(`Failed to delete rule: ${error.message}`);
+    }
+  };
+
+  const handleToggleActive = async (rule: AutomationRule) => {
+    try {
+      await automationApi.updateRule(rule.id, {
+        is_active: !rule.is_active,
+      });
+      toast.success(`Rule ${rule.is_active ? 'deactivated' : 'activated'}`);
+      loadRules();
+    } catch (error: any) {
+      toast.error(`Failed to update rule: ${error.message}`);
+    }
+  };
+
+  const handleExecute = async (id: number) => {
+    try {
+      await automationApi.executeRule(id);
+      toast.success('Rule executed successfully');
+      loadRules();
+    } catch (error: any) {
+      toast.error(`Failed to execute rule: ${error.message}`);
+    }
+  };
+
+  const getStatusBadge = (rule: AutomationRule) => {
+    if (!rule.is_active) {
+      return <span className="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">Inactive</span>;
+    }
+    if (rule.status === 'paused') {
+      return <span className="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300">Paused</span>;
+    }
+    return <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">Active</span>;
+  };
+
+  const getTriggerBadge = (trigger: string) => {
+    const colors = {
+      schedule: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+      event: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
+      manual: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
+    };
+    return (
+      <span className={`px-2 py-1 text-xs rounded-full ${colors[trigger as keyof typeof colors] || colors.manual}`}>
+        {trigger.charAt(0).toUpperCase() + trigger.slice(1)}
+      </span>
+    );
+  };
+
+  return (
+    <>
+      <PageMeta title="Automation Rules" />
+      <div className="space-y-6">
+        <PageHeader
+          title="Automation Rules"
+          lastUpdated={new Date()}
+          badge={{
+            icon: <BoltIcon />,
+            color: 'purple',
+          }}
+        />
+
+        <div className="flex items-center justify-between">
+          <p className="text-gray-600 dark:text-gray-400">
+            Create and manage automation rules to automate your workflows
+          </p>
+          <button
+            onClick={handleCreate}
+            className="flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
+          >
+            <PlusIcon />
+            Create Rule
+          </button>
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center h-64">
+            <div className="text-gray-500">Loading rules...</div>
+          </div>
+        ) : rules.length === 0 ? (
+          <ComponentCard title="No Rules" desc="Create your first automation rule to get started">
+            <div className="text-center py-8">
+              <p className="text-gray-500 dark:text-gray-400 mb-4">
+                You haven't created any automation rules yet.
+              </p>
+              <button
+                onClick={handleCreate}
+                className="px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
+              >
+                Create Your First Rule
+              </button>
+            </div>
+          </ComponentCard>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {rules.map((rule) => (
+              <ComponentCard
+                key={rule.id}
+                title={rule.name}
+                desc={rule.description || 'No description'}
+              >
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    {getStatusBadge(rule)}
+                    {getTriggerBadge(rule.trigger)}
+                  </div>
+
+                  {rule.schedule && (
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      <strong>Schedule:</strong> {rule.schedule}
+                    </div>
+                  )}
+
+                  <div className="text-sm text-gray-600 dark:text-gray-400">
+                    <strong>Actions:</strong> {rule.actions.length}
+                  </div>
+
+                  {rule.execution_count > 0 && (
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      <strong>Executions:</strong> {rule.execution_count}
+                      {rule.last_executed_at && (
+                        <span className="ml-2">
+                          (Last: {new Date(rule.last_executed_at).toLocaleDateString()})
+                        </span>
+                      )}
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+                    <button
+                      onClick={() => handleToggleActive(rule)}
+                      className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                      title={rule.is_active ? 'Deactivate' : 'Activate'}
+                    >
+                      {rule.is_active ? <PauseIcon /> : <PlayIcon />}
+                    </button>
+                    {rule.trigger === 'manual' && (
+                      <button
+                        onClick={() => handleExecute(rule.id)}
+                        className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                        title="Execute Now"
+                      >
+                        <PlayIcon />
+                      </button>
+                    )}
+                    <button
+                      onClick={() => handleEdit(rule)}
+                      className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                      title="Edit"
+                    >
+                      <EditIcon />
+                    </button>
+                    <button
+                      onClick={() => handleDelete(rule.id)}
+                      className="px-3 py-1.5 text-sm rounded-lg border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                      title="Delete"
+                    >
+                      <TrashIcon />
+                    </button>
+                  </div>
+                </div>
+              </ComponentCard>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Rule Creation/Edit Wizard Modal - TODO: Implement full wizard */}
+      {isWizardOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4">
+            <h3 className="text-xl font-bold mb-4">
+              {isEditMode ? 'Edit Rule' : 'Create Rule'}
+            </h3>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              Rule wizard coming soon. For now, use the API directly or create rules programmatically.
+            </p>
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setIsWizardOpen(false)}
+                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+

frontend/src/pages/Automation/Tasks.tsx

@@ -0,0 +1,250 @@
+import { useState, useEffect, useCallback } from 'react';
+import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
+import ComponentCard from '../../components/common/ComponentCard';
+import { automationApi, ScheduledTask } from '../../api/automation.api';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { ClockIcon, CheckCircleIcon, XCircleIcon, RefreshCwIcon } from '../../icons';
+import { useSiteStore } from '../../store/siteStore';
+import { useSectorStore } from '../../store/sectorStore';
+
+export default function AutomationTasks() {
+  const toast = useToast();
+  const { activeSite } = useSiteStore();
+  const { activeSector } = useSectorStore();
+
+  const [tasks, setTasks] = useState<ScheduledTask[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [ruleFilter, setRuleFilter] = useState<number | null>(null);
+  const [rules, setRules] = useState<Array<{ id: number; name: string }>>([]);
+
+  const loadTasks = useCallback(async () => {
+    try {
+      setLoading(true);
+      const filters: any = {
+        page_size: 100,
+        ordering: '-scheduled_at',
+      };
+      if (statusFilter !== 'all') {
+        filters.status = statusFilter;
+      }
+      if (ruleFilter) {
+        filters.rule_id = ruleFilter;
+      }
+      const response = await automationApi.listTasks(filters);
+      setTasks(response.results || []);
+    } catch (error: any) {
+      console.error('Error loading tasks:', error);
+      toast.error(`Failed to load tasks: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [statusFilter, ruleFilter, toast]);
+
+  const loadRules = useCallback(async () => {
+    try {
+      const response = await automationApi.listRules({ page_size: 100 });
+      setRules((response.results || []).map(r => ({ id: r.id, name: r.name })));
+    } catch (error: any) {
+      console.error('Error loading rules:', error);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadRules();
+  }, [loadRules]);
+
+  useEffect(() => {
+    loadTasks();
+  }, [loadTasks]);
+
+  const handleRetry = async (id: number) => {
+    try {
+      await automationApi.retryTask(id);
+      toast.success('Task retry initiated');
+      loadTasks();
+    } catch (error: any) {
+      toast.error(`Failed to retry task: ${error.message}`);
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const badges = {
+      pending: { bg: 'bg-yellow-100', text: 'text-yellow-700', darkBg: 'dark:bg-yellow-900', darkText: 'dark:text-yellow-300', label: 'Pending' },
+      running: { bg: 'bg-blue-100', text: 'text-blue-700', darkBg: 'dark:bg-blue-900', darkText: 'dark:text-blue-300', label: 'Running' },
+      completed: { bg: 'bg-green-100', text: 'text-green-700', darkBg: 'dark:bg-green-900', darkText: 'dark:text-green-300', label: 'Completed' },
+      failed: { bg: 'bg-red-100', text: 'text-red-700', darkBg: 'dark:bg-red-900', darkText: 'dark:text-red-300', label: 'Failed' },
+      cancelled: { bg: 'bg-gray-100', text: 'text-gray-700', darkBg: 'dark:bg-gray-700', darkText: 'dark:text-gray-300', label: 'Cancelled' },
+    };
+    const badge = badges[status as keyof typeof badges] || badges.pending;
+    return (
+      <span className={`px-2 py-1 text-xs rounded-full ${badge.bg} ${badge.text} ${badge.darkBg} ${badge.darkText}`}>
+        {badge.label}
+      </span>
+    );
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleString();
+  };
+
+  const filteredTasks = tasks.filter(task => {
+    if (statusFilter !== 'all' && task.status !== statusFilter) return false;
+    if (ruleFilter && task.rule_id !== ruleFilter) return false;
+    return true;
+  });
+
+  return (
+    <>
+      <PageMeta title="Scheduled Tasks" />
+      <div className="space-y-6">
+        <PageHeader
+          title="Scheduled Tasks"
+          lastUpdated={new Date()}
+          badge={{
+            icon: <ClockIcon />,
+            color: 'blue',
+          }}
+        />
+
+        <div className="flex items-center gap-4">
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Filter by Status
+            </label>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"
+            >
+              <option value="all">All Statuses</option>
+              <option value="pending">Pending</option>
+              <option value="running">Running</option>
+              <option value="completed">Completed</option>
+              <option value="failed">Failed</option>
+              <option value="cancelled">Cancelled</option>
+            </select>
+          </div>
+
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Filter by Rule
+            </label>
+            <select
+              value={ruleFilter || ''}
+              onChange={(e) => setRuleFilter(e.target.value ? Number(e.target.value) : null)}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"
+            >
+              <option value="">All Rules</option>
+              {rules.map(rule => (
+                <option key={rule.id} value={rule.id}>{rule.name}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center h-64">
+            <div className="text-gray-500">Loading tasks...</div>
+          </div>
+        ) : filteredTasks.length === 0 ? (
+          <ComponentCard title="No Tasks" desc="No scheduled tasks found">
+            <div className="text-center py-8">
+              <p className="text-gray-500 dark:text-gray-400">
+                {tasks.length === 0
+                  ? 'No scheduled tasks have been created yet.'
+                  : 'No tasks match the current filters.'}
+              </p>
+            </div>
+          </ComponentCard>
+        ) : (
+          <div className="space-y-4">
+            {filteredTasks.map((task) => (
+              <ComponentCard
+                key={task.id}
+                title={`Task #${task.id} - ${task.task_type}`}
+                desc={task.rule_name ? `Rule: ${task.rule_name}` : 'Manual task'}
+              >
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    {getStatusBadge(task.status)}
+                    {task.retry_count > 0 && (
+                      <span className="text-sm text-gray-500 dark:text-gray-400">
+                        Retries: {task.retry_count}
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4 text-sm">
+                    <div>
+                      <strong className="text-gray-700 dark:text-gray-300">Scheduled:</strong>
+                      <div className="text-gray-600 dark:text-gray-400">
+                        {formatDate(task.scheduled_at)}
+                      </div>
+                    </div>
+                    {task.started_at && (
+                      <div>
+                        <strong className="text-gray-700 dark:text-gray-300">Started:</strong>
+                        <div className="text-gray-600 dark:text-gray-400">
+                          {formatDate(task.started_at)}
+                        </div>
+                      </div>
+                    )}
+                    {task.completed_at && (
+                      <div>
+                        <strong className="text-gray-700 dark:text-gray-300">Completed:</strong>
+                        <div className="text-gray-600 dark:text-gray-400">
+                          {formatDate(task.completed_at)}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {task.error && (
+                    <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                      <div className="flex items-start gap-2">
+                        <XCircleIcon className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+                        <div>
+                          <strong className="text-red-800 dark:text-red-300">Error:</strong>
+                          <p className="text-red-700 dark:text-red-400 text-sm mt-1">{task.error}</p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {task.result && task.status === 'completed' && (
+                    <div className="p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+                      <div className="flex items-start gap-2">
+                        <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
+                        <div>
+                          <strong className="text-green-800 dark:text-green-300">Result:</strong>
+                          <pre className="text-green-700 dark:text-green-400 text-xs mt-1 overflow-auto">
+                            {JSON.stringify(task.result, null, 2)}
+                          </pre>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {task.status === 'failed' && (
+                    <div className="flex justify-end pt-2 border-t border-gray-200 dark:border-gray-700">
+                      <button
+                        onClick={() => handleRetry(task.id)}
+                        className="flex items-center gap-2 px-4 py-2 text-sm bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors"
+                      >
+                        <RefreshCwIcon />
+                        Retry Task
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </ComponentCard>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+

frontend/src/templates/TablePageTemplate.tsx

@@ -473,18 +473,19 @@ export default function TablePageTemplate({
     }
     
     // Update metrics if we have new values
+    // HeaderMetricsContext will automatically merge these with credit balance
     if (metricsKey) {
       setMetrics(headerMetrics);
       hasSetMetricsRef.current = true;
       prevMetricsRef.current = metricsKey;
     } else if (hasSetMetricsRef.current) {
-      // Only clear if we previously set metrics
+      // Clear page metrics (credit balance will be preserved by HeaderMetricsContext)
       setMetrics([]);
       hasSetMetricsRef.current = false;
       prevMetricsRef.current = '';
     }
     
-    // Cleanup: clear metrics when component unmounts (only if we set them)
+    // Cleanup: clear page metrics when component unmounts (credit balance preserved)
     return () => {
       if (hasSetMetricsRef.current) {
         setMetrics([]);