027af0d2f0
- Add stop-loss-decision-learner.js: Core learning engine
- Add enhanced-autonomous-risk-manager.js: Learning-enhanced decisions
- Add AI learning API and dashboard components
- Add database schema for decision tracking
- Integrate with existing automation system
- Demo scripts and documentation
Result: AI learns from every decision and improves over time! 🚀
444 lines
17 KiB
TypeScript
444 lines
17 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState, useEffect } from 'react'
|
||
|
||
/**
|
||
* AI Learning Dashboard
|
||
*
|
||
* Beautiful dashboard to display stop loss decision learning insights
|
||
*/
|
||
|
||
interface LearningInsights {
|
||
success: boolean
|
||
timestamp: string
|
||
learningSystem: {
|
||
status: string
|
||
confidence: string
|
||
totalDecisions: number
|
||
pendingAssessments: number
|
||
currentThresholds: {
|
||
emergency: number
|
||
risk: number
|
||
mediumRisk: number
|
||
}
|
||
lastAnalysis: any
|
||
}
|
||
decisionPatterns: {
|
||
successful: Array<{
|
||
decisionType: string
|
||
successRate: number
|
||
avgScore: number
|
||
sampleSize: number
|
||
}>
|
||
failures: Array<{
|
||
decisionType: string
|
||
successRate: number
|
||
sampleSize: number
|
||
}>
|
||
optimalTiming: any
|
||
distanceOptimization: any
|
||
}
|
||
performanceMetrics: {
|
||
overallSuccessRate: number
|
||
mostSuccessfulDecision: {
|
||
type: string
|
||
rate: string
|
||
samples: number
|
||
}
|
||
improvementTrend: string
|
||
confidenceLevel: number
|
||
}
|
||
recommendations: Array<{
|
||
type: string
|
||
priority: string
|
||
message: string
|
||
actionable: boolean
|
||
}>
|
||
systemHealth: {
|
||
learningActive: boolean
|
||
dataQuality: string
|
||
systemMaturity: string
|
||
readyForAutonomy: boolean
|
||
}
|
||
}
|
||
|
||
export default function AILearningDashboard() {
|
||
const [insights, setInsights] = useState<LearningInsights | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [lastUpdate, setLastUpdate] = useState<Date | null>(null)
|
||
|
||
useEffect(() => {
|
||
fetchLearningInsights()
|
||
const interval = setInterval(fetchLearningInsights, 30000) // Update every 30 seconds
|
||
return () => clearInterval(interval)
|
||
}, [])
|
||
|
||
const fetchLearningInsights = async () => {
|
||
try {
|
||
const response = await fetch('/api/ai/learning')
|
||
const data = await response.json()
|
||
|
||
if (data.success) {
|
||
setInsights(data)
|
||
setError(null)
|
||
setLastUpdate(new Date())
|
||
} else {
|
||
setError(data.error || 'Failed to load learning insights')
|
||
}
|
||
} catch (err: any) {
|
||
setError(err.message || 'Network error')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const triggerAction = async (action: string, parameters?: any) => {
|
||
try {
|
||
const response = await fetch('/api/ai/learning', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ action, parameters })
|
||
})
|
||
|
||
const result = await response.json()
|
||
if (result.success) {
|
||
fetchLearningInsights() // Refresh data
|
||
}
|
||
} catch (err) {
|
||
console.error('Action failed:', err)
|
||
}
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-6">
|
||
<div className="animate-pulse space-y-4">
|
||
<div className="h-4 bg-gray-700 rounded w-1/4"></div>
|
||
<div className="h-8 bg-gray-700 rounded w-1/2"></div>
|
||
<div className="h-32 bg-gray-700 rounded"></div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="bg-red-900/20 border border-red-700 rounded-lg p-6">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-red-400">❌</span>
|
||
<h3 className="text-red-400 font-semibold">Learning System Error</h3>
|
||
</div>
|
||
<p className="text-red-300 mt-2">{error}</p>
|
||
<button
|
||
onClick={fetchLearningInsights}
|
||
className="mt-4 px-4 py-2 bg-red-700 hover:bg-red-600 rounded text-white transition-colors"
|
||
>
|
||
Retry
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!insights) return null
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case 'ACTIVE': return 'text-green-400'
|
||
case 'INACTIVE': return 'text-red-400'
|
||
default: return 'text-yellow-400'
|
||
}
|
||
}
|
||
|
||
const getMaturityColor = (maturity: string) => {
|
||
switch (maturity) {
|
||
case 'EXPERT': return 'text-purple-400'
|
||
case 'INTERMEDIATE': return 'text-blue-400'
|
||
case 'NOVICE': return 'text-green-400'
|
||
case 'BEGINNER': return 'text-yellow-400'
|
||
default: return 'text-gray-400'
|
||
}
|
||
}
|
||
|
||
const getDataQualityColor = (quality: string) => {
|
||
switch (quality) {
|
||
case 'HIGH': return 'text-green-400'
|
||
case 'MEDIUM': return 'text-yellow-400'
|
||
case 'LOW': return 'text-orange-400'
|
||
default: return 'text-red-400'
|
||
}
|
||
}
|
||
|
||
const getTrendIcon = (trend: string) => {
|
||
switch (trend) {
|
||
case 'EXCELLENT': return '🚀'
|
||
case 'IMPROVING': return '📈'
|
||
case 'LEARNING': return '🧠'
|
||
case 'INITIALIZING': return '🌱'
|
||
default: return '❓'
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-white flex items-center space-x-2">
|
||
<span>🧠</span>
|
||
<span>AI Learning Dashboard</span>
|
||
</h2>
|
||
<p className="text-gray-400 mt-1">Stop Loss Decision Learning System</p>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className={`text-lg font-semibold ${getStatusColor(insights.learningSystem.status)}`}>
|
||
{insights.learningSystem.status}
|
||
</div>
|
||
<div className="text-sm text-gray-400">
|
||
Last Update: {lastUpdate?.toLocaleTimeString()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* System Overview */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
||
<div className="text-gray-400 text-sm">System Confidence</div>
|
||
<div className="text-2xl font-bold text-blue-400">{insights.learningSystem.confidence}</div>
|
||
<div className="text-xs text-gray-500 mt-1">
|
||
{getTrendIcon(insights.performanceMetrics.improvementTrend)} {insights.performanceMetrics.improvementTrend}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
||
<div className="text-gray-400 text-sm">Total Decisions</div>
|
||
<div className="text-2xl font-bold text-green-400">{insights.learningSystem.totalDecisions}</div>
|
||
<div className="text-xs text-gray-500 mt-1">
|
||
Pending: {insights.learningSystem.pendingAssessments}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
||
<div className="text-gray-400 text-sm">Success Rate</div>
|
||
<div className="text-2xl font-bold text-purple-400">{insights.performanceMetrics.overallSuccessRate}%</div>
|
||
<div className="text-xs text-gray-500 mt-1">
|
||
Best: {insights.performanceMetrics.mostSuccessfulDecision.type}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
||
<div className="text-gray-400 text-sm">System Maturity</div>
|
||
<div className={`text-2xl font-bold ${getMaturityColor(insights.systemHealth.systemMaturity)}`}>
|
||
{insights.systemHealth.systemMaturity}
|
||
</div>
|
||
<div className="text-xs text-gray-500 mt-1">
|
||
Quality: <span className={getDataQualityColor(insights.systemHealth.dataQuality)}>
|
||
{insights.systemHealth.dataQuality}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Learning Thresholds */}
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-6">
|
||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
|
||
<span>🎯</span>
|
||
<span>Current Learning Thresholds</span>
|
||
</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="bg-red-900/20 border border-red-700 rounded-lg p-4">
|
||
<div className="text-red-400 font-semibold">🚨 Emergency</div>
|
||
<div className="text-2xl font-bold text-white">{insights.learningSystem.currentThresholds.emergency}%</div>
|
||
<div className="text-sm text-red-300">Immediate action required</div>
|
||
</div>
|
||
<div className="bg-yellow-900/20 border border-yellow-700 rounded-lg p-4">
|
||
<div className="text-yellow-400 font-semibold">⚠️ High Risk</div>
|
||
<div className="text-2xl font-bold text-white">{insights.learningSystem.currentThresholds.risk}%</div>
|
||
<div className="text-sm text-yellow-300">Enhanced monitoring</div>
|
||
</div>
|
||
<div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4">
|
||
<div className="text-blue-400 font-semibold">🟡 Medium Risk</div>
|
||
<div className="text-2xl font-bold text-white">{insights.learningSystem.currentThresholds.mediumRisk}%</div>
|
||
<div className="text-sm text-blue-300">Standard monitoring</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Decision Patterns */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{/* Successful Patterns */}
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-6">
|
||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
|
||
<span>✅</span>
|
||
<span>Successful Decision Patterns</span>
|
||
</h3>
|
||
<div className="space-y-3">
|
||
{insights.decisionPatterns.successful.length > 0 ? (
|
||
insights.decisionPatterns.successful.map((pattern, index) => (
|
||
<div key={index} className="bg-green-900/20 border border-green-700 rounded-lg p-3">
|
||
<div className="flex justify-between items-center">
|
||
<div className="text-green-400 font-semibold">{pattern.decisionType}</div>
|
||
<div className="text-green-300">{pattern.successRate.toFixed(1)}%</div>
|
||
</div>
|
||
<div className="text-sm text-gray-400">
|
||
Sample Size: {pattern.sampleSize} | Avg Score: {pattern.avgScore.toFixed(2)}
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="text-gray-400 text-center py-8">
|
||
No successful patterns identified yet
|
||
<br />
|
||
<span className="text-sm">Keep making decisions to build learning data</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Failure Patterns */}
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-6">
|
||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
|
||
<span>❌</span>
|
||
<span>Areas for Improvement</span>
|
||
</h3>
|
||
<div className="space-y-3">
|
||
{insights.decisionPatterns.failures.length > 0 ? (
|
||
insights.decisionPatterns.failures.map((pattern, index) => (
|
||
<div key={index} className="bg-red-900/20 border border-red-700 rounded-lg p-3">
|
||
<div className="flex justify-between items-center">
|
||
<div className="text-red-400 font-semibold">{pattern.decisionType}</div>
|
||
<div className="text-red-300">{pattern.successRate.toFixed(1)}%</div>
|
||
</div>
|
||
<div className="text-sm text-gray-400">
|
||
Sample Size: {pattern.sampleSize} | Needs improvement
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="text-gray-400 text-center py-8">
|
||
No failure patterns identified
|
||
<br />
|
||
<span className="text-sm text-green-400">Great! System is performing well</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Recommendations */}
|
||
{insights.recommendations.length > 0 && (
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-6">
|
||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
|
||
<span>💡</span>
|
||
<span>AI Recommendations</span>
|
||
</h3>
|
||
<div className="space-y-3">
|
||
{insights.recommendations.map((rec, index) => (
|
||
<div key={index} className={`rounded-lg p-3 border ${
|
||
rec.priority === 'HIGH' ? 'bg-red-900/20 border-red-700' :
|
||
rec.priority === 'MEDIUM' ? 'bg-yellow-900/20 border-yellow-700' :
|
||
'bg-blue-900/20 border-blue-700'
|
||
}`}>
|
||
<div className="flex justify-between items-start">
|
||
<div className={`text-sm font-semibold ${
|
||
rec.priority === 'HIGH' ? 'text-red-400' :
|
||
rec.priority === 'MEDIUM' ? 'text-yellow-400' :
|
||
'text-blue-400'
|
||
}`}>
|
||
{rec.type} - {rec.priority} PRIORITY
|
||
</div>
|
||
{rec.actionable && (
|
||
<span className="text-xs bg-green-700 text-green-200 px-2 py-1 rounded">
|
||
Actionable
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="text-gray-300 mt-1">{rec.message}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* System Health */}
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-6">
|
||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
|
||
<span>🏥</span>
|
||
<span>System Health</span>
|
||
</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div className="text-center">
|
||
<div className={`text-2xl ${insights.systemHealth.learningActive ? 'text-green-400' : 'text-red-400'}`}>
|
||
{insights.systemHealth.learningActive ? '🟢' : '🔴'}
|
||
</div>
|
||
<div className="text-sm text-gray-400">Learning Active</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className={`text-2xl ${getDataQualityColor(insights.systemHealth.dataQuality)}`}>
|
||
📊
|
||
</div>
|
||
<div className="text-sm text-gray-400">Data Quality</div>
|
||
<div className={`text-xs ${getDataQualityColor(insights.systemHealth.dataQuality)}`}>
|
||
{insights.systemHealth.dataQuality}
|
||
</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className={`text-2xl ${getMaturityColor(insights.systemHealth.systemMaturity)}`}>
|
||
🎓
|
||
</div>
|
||
<div className="text-sm text-gray-400">Maturity</div>
|
||
<div className={`text-xs ${getMaturityColor(insights.systemHealth.systemMaturity)}`}>
|
||
{insights.systemHealth.systemMaturity}
|
||
</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className={`text-2xl ${insights.systemHealth.readyForAutonomy ? 'text-green-400' : 'text-yellow-400'}`}>
|
||
{insights.systemHealth.readyForAutonomy ? '🚀' : '⚠️'}
|
||
</div>
|
||
<div className="text-sm text-gray-400">Beach Ready</div>
|
||
<div className={`text-xs ${insights.systemHealth.readyForAutonomy ? 'text-green-400' : 'text-yellow-400'}`}>
|
||
{insights.systemHealth.readyForAutonomy ? 'YES' : 'LEARNING'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="bg-gray-900 border border-gray-700 rounded-lg p-6">
|
||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center space-x-2">
|
||
<span>⚡</span>
|
||
<span>Learning System Actions</span>
|
||
</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<button
|
||
onClick={() => triggerAction('updateThresholds')}
|
||
className="px-4 py-2 bg-blue-700 hover:bg-blue-600 rounded text-white transition-colors"
|
||
>
|
||
🔄 Update Thresholds
|
||
</button>
|
||
<button
|
||
onClick={() => triggerAction('generateReport')}
|
||
className="px-4 py-2 bg-green-700 hover:bg-green-600 rounded text-white transition-colors"
|
||
>
|
||
📊 Generate Report
|
||
</button>
|
||
<button
|
||
onClick={() => triggerAction('assessPendingDecisions')}
|
||
className="px-4 py-2 bg-yellow-700 hover:bg-yellow-600 rounded text-white transition-colors"
|
||
>
|
||
⚖️ Assess Pending
|
||
</button>
|
||
<button
|
||
onClick={fetchLearningInsights}
|
||
className="px-4 py-2 bg-purple-700 hover:bg-purple-600 rounded text-white transition-colors"
|
||
>
|
||
🔃 Refresh Data
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|