Upload components/CommandCenter.jsx with huggingface_hub

components/CommandCenter.jsx

@@ -0,0 +1,175 @@
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { motion } from 'framer-motion';
+import { Activity, Shield, Zap, Globe, RefreshCw, Gavel, Search, MessageSquareQuote, TrendingUp, Clock } from 'lucide-react';
+
+export default function CommandCenter() {
+  const router = useRouter();
+  const [metrics, setMetrics] = useState([
+    { id: '1', label: 'Active Sessions', value: '0', change: 0, icon: Activity, color: 'text-primary-600', bgColor: 'bg-primary-100 dark:bg-primary-900/30' },
+    { id: '2', label: 'Threat Level', value: 'Low', change: -5, icon: Shield, color: 'text-truth-600', bgColor: 'bg-truth-100 dark:bg-truth-900/30' },
+    { id: '3', label: 'API Status', value: 'Online', change: 0, icon: Zap, color: 'text-warning-600', bgColor: 'bg-warning-100 dark:bg-warning-900/30' },
+    { id: '4', label: 'Data Sources', value: '12', change: 2, icon: Globe, color: 'text-helios-600', bgColor: 'bg-helios-100 dark:bg-helios-900/30' },
+  ]);
+  const [lastUpdate, setLastUpdate] = useState(new Date());
+  const [loading, setLoading] = useState(false);
+
+  const fetchMetrics = async () => {
+    setLoading(true);
+    setTimeout(() => {
+      setMetrics(prev => prev.map(m => ({
+        ...m,
+        value: m.id === '1' ? Math.floor(Math.random() * 100).toString() : m.value
+      })));
+      setLastUpdate(new Date());
+      setLoading(false);
+    }, 500);
+  };
+
+  useEffect(() => {
+    fetchMetrics();
+  }, []);
+
+  const quickActions = [
+    { label: 'Strategic Advisor', section: 'advisor', color: 'bg-helios-600 hover:bg-helios-700', icon: Gavel },
+    { label: 'Analyze Data', section: 'analyze', color: 'bg-primary-600 hover:bg-primary-700', icon: MessageSquareQuote },
+    { label: 'Verify Claims', section: 'verify', color: 'bg-truth-600 hover:bg-truth-700', icon: Search },
+  ];
+
+  const systemStatus = [
+    { name: 'AI Inference APIs', status: 'Operational', color: 'bg-truth-500' },
+    { name: 'Strategic Engine', status: 'Operational', color: 'bg-truth-500' },
+    { name: 'Data Pipeline', status: 'Operational', color: 'bg-truth-500' },
+    { name: 'External Feeds', status: 'Degraded', color: 'bg-warning-500' },
+  ];
+
+  return (
+    <div className="max-w-7xl mx-auto space-y-6 pb-12">
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"
+      >
+        <div>
+          <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Command Center</h1>
+          <p className="text-slate-600 dark:text-slate-400">Truth Anchor v11.2 Dashboard</p>
+        </div>
+        <div className="flex items-center space-x-3">
+          <Clock className="w-4 h-4 text-slate-400" />
+          <span className="text-sm text-slate-500">Updated: {lastUpdate.toLocaleTimeString()}</span>
+          <button
+            onClick={fetchMetrics}
+            disabled={loading}
+            className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors"
+          >
+            <RefreshCw className={`w-5 h-5 text-slate-600 dark:text-slate-400 ${loading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+      </motion.div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {metrics.map((metric, index) => {
+          const Icon = metric.icon;
+          return (
+            <motion.div
+              key={metric.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+              className="card group cursor-pointer"
+            >
+              <div className="flex items-center justify-between mb-4">
+                <div className={`p-3 rounded-lg ${metric.bgColor} ${metric.color}`}>
+                  <Icon className="w-6 h-6" />
+                </div>
+                <span className={`text-sm font-medium ${
+                  metric.change > 0 ? 'text-truth-600' : metric.change < 0 ? 'text-danger-600' : 'text-slate-500'
+                }`}>
+                  {metric.change > 0 ? '+' : ''}{metric.change}%
+                </span>
+              </div>
+              <h3 className="text-2xl font-bold text-slate-900 dark:text-white">{metric.value}</h3>
+              <p className="text-sm text-slate-600 dark:text-slate-400">{metric.label}</p>
+            </motion.div>
+          );
+        })}
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.4 }}
+        className="grid grid-cols-1 md:grid-cols-3 gap-4"
+      >
+        {quickActions.map((action, index) => {
+          const Icon = action.icon;
+          return (
+            <button
+              key={action.label}
+              onClick={() => router.push(`/?section=${action.section}`)}
+              className={`${action.color} text-white p-6 rounded-xl font-medium transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl text-center flex flex-col items-center gap-3`}
+            >
+              <Icon className="w-8 h-8" />
+              <span className="text-lg">{action.label}</span>
+            </button>
+          );
+        })}
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.5 }}
+        className="card"
+      >
+        <div className="flex items-center space-x-2 mb-4">
+          <Activity className="w-5 h-5 text-primary-600" />
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-white">System Status</h2>
+        </div>
+        <div className="space-y-3">
+          {systemStatus.map((service) => (
+            <div
+              key={service.name}
+              className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-700/50 rounded-lg"
+            >
+              <span className="text-slate-700 dark:text-slate-300">{service.name}</span>
+              <div className="flex items-center space-x-2">
+                <div className={`w-2 h-2 rounded-full ${service.color} animate-pulse`} />
+                <span className="text-sm text-slate-600 dark:text-slate-400">{service.status}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.6 }}
+        className="card"
+      >
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Quick Start Guide</h2>
+        <div className="grid md:grid-cols-2 gap-4">
+          <div className="p-4 bg-helios-50 dark:bg-helios-900/20 rounded-lg border border-helios-200 dark:border-helios-800">
+            <h3 className="font-medium text-helios-700 dark:text-helios-300 mb-2 flex items-center gap-2">
+              <Gavel className="w-4 h-4" />
+              Strategic Advisor
+            </h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Get uncensored, strategic AI counsel for complex situations. Analyze scenarios from multiple angles with actionable strategies.
+            </p>
+          </div>
+          <div className="p-4 bg-primary-50 dark:bg-primary-900/20 rounded-lg border border-primary-200 dark:border-primary-800">
+            <h3 className="font-medium text-primary-700 dark:text-primary-300 mb-2 flex items-center gap-2">
+              <Search className="w-4 h-4" />
+              Verification
+            </h3>
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              Verify claims, fact-check information, and analyze content with AI-powered multi-model consensus.
+            </p>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}