67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
/**
|
|
* 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;
|