automation overview page implemeantion initital complete

2026-01-17 08:24:44 +00:00
parent 79398c908d
commit 6b1fa0c1ee
22 changed files with 3789 additions and 178 deletions
--- a/frontend/src/components/Automation/DetailView/InsightsPanel.tsx
+++ b/frontend/src/components/Automation/DetailView/InsightsPanel.tsx
@@ -0,0 +1,66 @@
+/**
+ * Insights Panel Component
+ * Displays auto-generated insights and alerts
+ */
+import React from 'react';
+import { RunInsight } from '../../../types/automation';
+import { CheckCircleIcon, ExclamationTriangleIcon, InfoIcon, XCircleIcon } from '../../../icons';
+
+interface InsightsPanelProps {
+  insights: RunInsight[];
+}
+
+const InsightsPanel: React.FC<InsightsPanelProps> = ({ insights }) => {
+  if (!insights || insights.length === 0) {
+    return null;
+  }
+
+  const getInsightStyle = (severity: string) => {
+    switch (severity) {
+      case 'error':
+        return 'bg-error-50 dark:bg-error-900/20 border-error-200 dark:border-error-800';
+      case 'warning':
+        return 'bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800';
+      case 'info':
+      default:
+        return 'bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800';
+    }
+  };
+
+  const getInsightIcon = (type: string) => {
+    switch (type) {
+      case 'success':
+        return <CheckCircleIcon className="size-5 text-success-600 dark:text-success-400" />;
+      case 'error':
+        return <XCircleIcon className="size-5 text-error-600 dark:text-error-400" />;
+      case 'warning':
+      case 'variance':
+        return <ExclamationTriangleIcon className="size-5 text-warning-600 dark:text-warning-400" />;
+      default:
+        return <InfoIcon className="size-5 text-brand-600 dark:text-brand-400" />;
+    }
+  };
+
+  return (
+    <div className="bg-white dark:bg-gray-900 rounded-xl p-6">
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Insights</h3>
+      <div className="space-y-3">
+        {insights.map((insight, idx) => (
+          <div
+            key={idx}
+            className={`flex items-start gap-3 p-4 rounded-lg border ${getInsightStyle(insight.severity)}`}
+          >
+            <div className="flex-shrink-0 mt-0.5">
+              {getInsightIcon(insight.type)}
+            </div>
+            <div className="flex-1 text-sm text-gray-800 dark:text-gray-200">
+              {insight.message}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default InsightsPanel;