| import Head from 'next/head'; | |
| import Link from 'next/link'; | |
| export default function PatternFlows() { | |
| return ( | |
| <> | |
| <Head> | |
| <title>Pattern Flows - MoStar GRID</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" /> | |
| </Head> | |
| <div className="p-6"> | |
| <div className="mb-6"> | |
| <Link href="/" className="text-purple-400 hover:text-purple-300 flex items-center"> | |
| <i className="fas fa-arrow-left mr-2"></i> Back to Dashboard | |
| </Link> | |
| <h1 className="text-3xl font-bold text-white mt-2">Pattern Flows</h1> | |
| <p className="text-gray-400">Analyze and visualize neural pattern dynamics</p> | |
| </div> | |
| <div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div className="lg:col-span-2"> | |
| <div className="grid-card rounded-lg shadow p-6"> | |
| <h2 className="text-xl font-bold text-white mb-4">Pattern Flow Visualization</h2> | |
| <div className="bg-gray-800 rounded-lg p-4 h-96 flex items-center justify-center"> | |
| <div className="text-center"> | |
| <i className="fas fa-project-diagram text-4xl text-purple-500 mb-4"></i> | |
| <p className="text-gray-400">Pattern flow visualization would appear here</p> | |
| <p className="text-gray-500 text-sm mt-2">Real-time neural pattern analysis</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div className="grid-card rounded-lg shadow p-6 mb-6"> | |
| <h2 className="text-xl font-bold text-white mb-4">Active Patterns</h2> | |
| <div className="space-y-4"> | |
| <div className="flex items-center p-3 bg-gray-800 rounded-lg"> | |
| <div className="p-2 rounded-full bg-purple-900 text-purple-400 mr-3"> | |
| <i className="fas fa-wave-square"></i> | |
| </div> | |
| <div> | |
| <h3 className="font-bold text-white">Conscious Flow</h3> | |
| <p className="text-gray-400 text-sm">Primary consciousness pattern</p> | |
| </div> | |
| <span className="ml-auto px-2 py-1 bg-green-900 text-green-300 text-xs rounded-full">Active</span> | |
| </div> | |
| <div className="flex items-center p-3 bg-gray-800 rounded-lg"> | |
| <div className="p-2 rounded-full bg-blue-900 text-blue-400 mr-3"> | |
| <i className="fas fa-brain"></i> | |
| </div> | |
| <div> | |
| <h3 className="font-bold text-white">Reasoning Loop</h3> | |
| <p className="text-gray-400 text-sm">Logical deduction pattern</p> | |
| </div> | |
| <span className="ml-auto px-2 py-1 bg-green-900 text-green-300 text-xs rounded-full">Active</span> | |
| </div> | |
| <div className="flex items-center p-3 bg-gray-800 rounded-lg"> | |
| <div className="p-2 rounded-full bg-green-900 text-green-400 mr-3"> | |
| <i className="fas fa-sync"></i> | |
| </div> | |
| <div> | |
| <h3 className="font-bold text-white">Memory Sync</h3> | |
| <p className="text-gray-400 text-sm">Data synchronization pattern</p> | |
| </div> | |
| <span className="ml-auto px-2 py-1 bg-yellow-900 text-yellow-300 text-xs rounded-full">Processing</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="grid-card rounded-lg shadow p-6"> | |
| <h2 className="text-xl font-bold text-white mb-4">Pattern Metrics</h2> | |
| <div className="space-y-4"> | |
| <div className="flex justify-between"> | |
| <span className="text-gray-400">Pattern Recognition Rate</span> | |
| <span className="text-white font-bold">98.7%</span> | |
| </div> | |
| <div className="flex justify-between"> | |
| <span className="text-gray-400">Flow Stability</span> | |
| <span className="text-white font-bold">99.2%</span> | |
| </div> | |
| <div className="flex justify-between"> | |
| <span className="text-gray-400">Processing Speed</span> | |
| <span className="text-white font-bold">24.7 ms</span> | |
| </div> | |
| <div className="flex justify-between"> | |
| <span className="text-gray-400">Pattern Diversity</span> | |
| <span className="text-white font-bold">High</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="mt-8"> | |
| <h2 className="text-2xl font-bold text-white mb-4">Pattern Analysis</h2> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div className="grid-card rounded-lg shadow p-4"> | |
| <div className="flex items-center"> | |
| <div className="p-2 rounded-full bg-purple-900 text-purple-400 mr-3"> | |
| <i className="fas fa-chart-line"></i> | |
| </div> | |
| <div> | |
| <p className="text-gray-400 text-sm">Trend Analysis</p> | |
| <h3 className="text-xl font-bold text-white">+12.4%</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="grid-card rounded-lg shadow p-4"> | |
| <div className="flex items-center"> | |
| <div className="p-2 rounded-full bg-blue-900 text-blue-400 mr-3"> | |
| <i className="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <p className="text-gray-400 text-sm">Anomalies Detected</p> | |
| <h3 className="text-xl font-bold text-white">3</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="grid-card rounded-lg shadow p-4"> | |
| <div className="flex items-center"> | |
| <div className="p-2 rounded-full bg-green-900 text-green-400 mr-3"> | |
| <i className="fas fa-lightbulb"></i> | |
| </div> | |
| <div> | |
| <p className="text-gray-400 text-sm">New Patterns</p> | |
| <h3 className="text-xl font-bold text-white">7</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </> | |
| ); | |
| } |