Upload components/PrivacyDashboard.jsx with huggingface_hub

components/PrivacyDashboard.jsx

@@ -0,0 +1,130 @@
+import { useState, useEffect } from 'react'
+import { Shield, EyeOff, Lock, Activity, AlertTriangle, CheckCircle } from 'lucide-react'
+
+export default function PrivacyDashboard() {
+  const [securityMetrics, setSecurityMetrics] = useState({
+    encryptionLevel: 'AES-256',
+    threatsBlocked: 0,
+    dataProcessed: 0,
+    uptime: '100%'
+  })
+
+  const [recentActivities, setRecentActivities] = useState([])
+
+  useEffect(() => {
+    // Simulate real-time security updates
+    const interval = setInterval(() => {
+      setSecurityMetrics(prev => ({
+        ...prev,
+        threatsBlocked: prev.threatsBlocked + Math.floor(Math.random() * 3),
+        dataProcessed: prev.dataProcessed + Math.floor(Math.random() * 10)
+      }))
+
+      setRecentActivities(prev => {
+        const newActivity = {
+          id: Date.now(),
+          action: ['Threat detected', 'Data encrypted', 'Access logged'][Math.floor(Math.random() * 3)],
+          timestamp: new Date().toLocaleTimeString(),
+          status: 'secured'
+        }
+        return [newActivity, ...prev.slice(0, 4)]
+      })
+    }, 5000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="card">
+      <h2 className="text-2xl font-bold mb-6 flex items-center">
+        <Shield className="mr-2 h-6 w-6 text-primary-500" />
+        Privacy & Security
+      </h2>
+
+      <div className="grid grid-cols-2 gap-4 mb-6">
+        <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+          <div className="flex items-center justify-between mb-1">
+            <Lock className="h-4 w-4 text-green-600 dark:text-green-400" />
+            <span className="text-xs text-green-700 dark:text-green-300">ACTIVE</span>
+          </div>
+          <p className="text-lg font-semibold">{securityMetrics.encryptionLevel}</p>
+          <p className="text-xs text-green-700 dark:text-green-300">Encryption</p>
+        </div>
+
+        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+          <div className="flex items-center justify-between mb-1">
+            <EyeOff className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+            <span className="text-xs text-blue-700 dark:text-blue-300">LIVE</span>
+          </div>
+          <p className="text-lg font-semibold">{securityMetrics.uptime}</p>
+          <p className="text-xs text-blue-700 dark:text-blue-300">Uptime</p>
+        </div>
+
+        <div className="p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg border border-orange-200 dark:border-orange-800">
+          <div className="flex items-center justify-between mb-1">
+            <AlertTriangle className="h-4 w-4 text-orange-600 dark:text-orange-400" />
+            <span className="text-xs text-orange-700 dark:text-orange-300">BLOCKED</span>
+          </div>
+          <p className="text-lg font-semibold">{securityMetrics.threatsBlocked}</p>
+          <p className="text-xs text-orange-700 dark:text-orange-300">Threats</p>
+        </div>
+
+        <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
+          <div className="flex items-center justify-between mb-1">
+            <Activity className="h-4 w-4 text-purple-600 dark:text-purple-400" />
+            <span className="text-xs text-purple-700 dark:text-purple-300">PROCESSED</span>
+          </div>
+          <p className="text-lg font-semibold">{securityMetrics.dataProcessed}</p>
+          <p className="text-xs text-purple-700 dark:text-purple-300">Data Units</p>
+        </div>
+      </div>
+
+      <div className="border-t border-dark-200 dark:border-dark-700 pt-4">
+        <h3 className="font-semibold mb-3 flex items-center">
+          <Activity className="h-4 w-4 mr-2" />
+          Security Activity
+        </h3>
+        <div className="space-y-2">
+          {recentActivities.length === 0 ? (
+            <p className="text-sm text-dark-500 dark:text-dark-400">No recent activity</p>
+          ) : (
+            recentActivities.map((activity) => (
+              <div
+                key={activity.id}
+                className="flex items-center justify-between p-2 bg-dark-50 dark:bg-dark-800 rounded border border-dark-200 dark:border-dark-700"
+              >
+                <div className="flex items-center space-x-2">
+                  <CheckCircle className="h-3 w-3 text-green-500" />
+                  <span className="text-sm">{activity.action}</span>
+                </div>
+                <span className="text-xs text-dark-500 dark:text-dark-400">{activity.timestamp}</span>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      <div className="mt-6 p-4 bg-dark-50 dark:bg-dark-800 rounded-lg border border-dark-200 dark:border-dark-700">
+        <h3 className="font-semibold mb-2 text-sm">Privacy Guarantee</h3>
+        <ul className="space-y-1 text-xs text-dark-600 dark:text-dark-400">
+          <li className="flex items-center space-x-2">
+            <CheckCircle className="h-3 w-3 text-green-500" />
+            <span>End-to-end encryption</span>
+          </li>
+          <li className="flex items-center space-x-2">
+            <CheckCircle className="h-3 w-3 text-green-500" />
+            <span>Zero data retention</span>
+          </li>
+          <li className="flex items-center space-x-2">
+            <CheckCircle className="h-3 w-3 text-green-500" />
+            <span>Local processing priority</span>
+          </li>
+          <li className="flex items-center space-x-2">
+            <CheckCircle className="h-3 w-3 text-green-500" />
+            <span>Anonymous usage tracking</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}