Spaces:
Paused
Paused
| import { useState } from 'react'; | |
| import { Link } from 'react-router-dom'; | |
| import { | |
| LayoutDashboard, | |
| Kanban, | |
| ListTodo, | |
| Clock, | |
| Database, | |
| BarChart3, | |
| PieChart, | |
| LineChart, | |
| Activity, | |
| TrendingUp, | |
| Calendar, | |
| Users, | |
| MessageSquare, | |
| Bell, | |
| Settings, | |
| Search, | |
| Filter, | |
| Grid3X3, | |
| Table, | |
| Map, | |
| Globe, | |
| Wifi, | |
| Battery, | |
| Cpu, | |
| HardDrive, | |
| Cloud, | |
| Sun, | |
| Moon, | |
| Thermometer, | |
| Droplets, | |
| Wind, | |
| Play, | |
| Pause, | |
| SkipForward, | |
| Volume2, | |
| Image, | |
| Video, | |
| FileText, | |
| Folder, | |
| Download, | |
| Upload, | |
| Share2, | |
| Lock, | |
| CreditCard, | |
| Wallet, | |
| ShoppingCart, | |
| Package, | |
| Truck, | |
| Heart, | |
| Star, | |
| Bookmark, | |
| Flag, | |
| Tag, | |
| Hash, | |
| Zap, | |
| Target, | |
| Award, | |
| Trophy, | |
| Medal, | |
| Brain, | |
| Shield, | |
| ArrowLeft, | |
| ChevronDown, | |
| ChevronUp, | |
| MoreHorizontal, | |
| Maximize2, | |
| Archive, | |
| Briefcase, | |
| Biohazard, | |
| Radar, | |
| ShieldAlert, | |
| ShieldCheck, | |
| LockKeyhole, | |
| ScanLine, | |
| UserCheck, | |
| Webhook, | |
| KeyRound, | |
| Box, | |
| Terminal, | |
| Fingerprint, | |
| Mail, | |
| Siren, | |
| Ghost, | |
| AlertTriangle, | |
| Laptop, | |
| BrainCircuit, | |
| FileWarning, | |
| Crosshair, | |
| FileSearch, | |
| BadgeCheck, | |
| Rocket, | |
| TrendingDown, | |
| FlaskConical, | |
| Dice1, | |
| Palette, | |
| CheckCircle, | |
| Key, | |
| Type, | |
| Sparkles, | |
| Layers, | |
| GitCommit, | |
| GitBranch, | |
| DollarSign, | |
| Skull, | |
| Grid, | |
| Bug, | |
| Network, | |
| AlertCircle, | |
| Eye, | |
| FileLock, | |
| Film, | |
| Lightbulb, | |
| Music, | |
| Phone, | |
| Podcast, | |
| Power, | |
| Scan, | |
| Server, | |
| Timer | |
| } from 'lucide-react'; | |
| import MatrixRain from '@/components/MatrixRain'; | |
| import CyberCard from '@/components/CyberCard'; | |
| import GlitchText from '@/components/GlitchText'; | |
| import { Button } from '@/components/ui/button'; | |
| import SourceLink, { DataSource, dataSources } from '@/components/SourceLink'; | |
| import { additionalWidgets } from '@/components/widgets/AdditionalWidgets'; | |
| import { WidgetDetailModal } from '@/components/widgets/WidgetDetailModal'; | |
| import VidensarkivWidget from '@/widgets/VidensarkivWidget'; | |
| import ResearchAgentWidget from '@/widgets/ResearchAgentWidget'; | |
| import TDCSolutionWidget from '@/widgets/TDCSolutionWidget'; | |
| import DataAnalysisWidget from '@/widgets/DataAnalysisWidget'; | |
| import * as Mini from '@/components/widgets/mini'; | |
| // Widget Category Types | |
| type WidgetCategory = | |
| | 'dashboards' | |
| | 'data' | |
| | 'productivity' | |
| | 'media' | |
| | 'system' | |
| | 'commerce' | |
| | 'social' | |
| | 'all'; | |
| interface Widget { | |
| id: string; | |
| name: string; | |
| category: WidgetCategory; | |
| icon: React.ElementType; | |
| component: React.ReactNode; | |
| source: DataSource; | |
| } | |
| // Security widget IDs for interactive modals | |
| const securityWidgetIds = [ | |
| 'threat-level', | |
| 'firewall', | |
| 'access-log', | |
| 'vulnerabilities', | |
| 'encryption', | |
| 'ssl-status', | |
| 'soc-dashboard', | |
| 'threat-map', | |
| 'malware-detection', | |
| 'intrusion-detection', | |
| 'ddos-monitor', | |
| 'phishing-detector', | |
| 'dark-web-monitor', | |
| 'zero-day-alert', | |
| 'patch-status', | |
| 'endpoint-protection', | |
| 'siem-alerts', | |
| 'honeypot-status', | |
| 'ip-reputation', | |
| 'ransomware-shield', | |
| 'network-segments', | |
| 'threat-intel', | |
| 'mitre-matrix', | |
| 'incident-timeline', | |
| 'compliance-score', | |
| 'dlp-status', | |
| 'pentest-results', | |
| 'security-posture', | |
| 'forensic-status', | |
| 'cert-monitor', | |
| 'port-scanner', | |
| 'user-behavior', | |
| 'api-security', | |
| 'secret-scanner', | |
| 'container-security', | |
| 'cloud-security', | |
| 'waf-status', | |
| 'bot-detection', | |
| 'ssh-monitor', | |
| 'audit-log', | |
| 'mfa-status', | |
| 'pam-status', | |
| 'vpn-status', | |
| 'email-security', | |
| 'asset-inventory', | |
| 'backup-status', | |
| 'gdpr-status', | |
| 'security-training', | |
| 'ioc-feed', | |
| 'network-traffic', | |
| 'zero-trust', | |
| 'security-alerts', | |
| 'dns-security', | |
| ]; | |
| // All Widgets Definition | |
| const widgets: Widget[] = [ | |
| { | |
| id: 'kanban', | |
| name: 'Kanban Board', | |
| category: 'productivity', | |
| icon: Kanban, | |
| component: <Mini.MiniKanban />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'timeline', | |
| name: 'Timeline', | |
| category: 'productivity', | |
| icon: Clock, | |
| component: <Mini.MiniTimeline />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'barchart', | |
| name: 'Bar Chart', | |
| category: 'data', | |
| icon: BarChart3, | |
| component: <Mini.MiniBarChart />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'piechart', | |
| name: 'Pie Chart', | |
| category: 'data', | |
| icon: PieChart, | |
| component: <Mini.MiniPieChart />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'linechart', | |
| name: 'Line Chart', | |
| category: 'data', | |
| icon: LineChart, | |
| component: <Mini.MiniLineChart />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'activity', | |
| name: 'Activity Feed', | |
| category: 'data', | |
| icon: Activity, | |
| component: <Mini.MiniActivity />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'calendar', | |
| name: 'Calendar', | |
| category: 'productivity', | |
| icon: Calendar, | |
| component: <Mini.MiniCalendar />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'table', | |
| name: 'Data Table', | |
| category: 'data', | |
| icon: Table, | |
| component: <Mini.MiniTable />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'gauge', | |
| name: 'Gauge Meter', | |
| category: 'data', | |
| icon: Target, | |
| component: <Mini.MiniGauge />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'map', | |
| name: 'Location Map', | |
| category: 'data', | |
| icon: Map, | |
| component: <Mini.MiniMap />, | |
| source: dataSources.networkStatus, | |
| }, | |
| { | |
| id: 'weather', | |
| name: 'Weather', | |
| category: 'system', | |
| icon: Sun, | |
| component: <Mini.MiniWeather />, | |
| source: dataSources.weatherApi, | |
| }, | |
| { | |
| id: 'player', | |
| name: 'Media Player', | |
| category: 'media', | |
| icon: Play, | |
| component: <Mini.MiniPlayer />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'storage', | |
| name: 'Storage Monitor', | |
| category: 'system', | |
| icon: HardDrive, | |
| component: <Mini.MiniStorage />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'notifications', | |
| name: 'Notifications', | |
| category: 'social', | |
| icon: Bell, | |
| component: <Mini.MiniNotifications />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'chat', | |
| name: 'Chat Widget', | |
| category: 'social', | |
| icon: MessageSquare, | |
| component: <Mini.MiniChat />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'tasks', | |
| name: 'Task List', | |
| category: 'productivity', | |
| icon: ListTodo, | |
| component: <Mini.MiniTasks />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'progress', | |
| name: 'Progress Ring', | |
| category: 'data', | |
| icon: TrendingUp, | |
| component: <Mini.MiniProgress />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'network', | |
| name: 'Network Status', | |
| category: 'system', | |
| icon: Wifi, | |
| component: <Mini.MiniNetwork />, | |
| source: dataSources.networkStatus, | |
| }, | |
| { | |
| id: 'stats', | |
| name: 'Stats Grid', | |
| category: 'dashboards', | |
| icon: Grid3X3, | |
| component: <Mini.MiniStats />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'profile', | |
| name: 'User Profile', | |
| category: 'social', | |
| icon: Users, | |
| component: <Mini.MiniProfile />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'quickactions', | |
| name: 'Quick Actions', | |
| category: 'productivity', | |
| icon: Zap, | |
| component: <Mini.MiniQuickActions />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'cart', | |
| name: 'Shopping Cart', | |
| category: 'commerce', | |
| icon: ShoppingCart, | |
| component: <Mini.MiniCart />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'countdown', | |
| name: 'Countdown Timer', | |
| category: 'productivity', | |
| icon: Clock, | |
| component: <Mini.MiniCountdown />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'rating', | |
| name: 'Star Rating', | |
| category: 'social', | |
| icon: Star, | |
| component: <Mini.MiniRating />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'tags', | |
| name: 'Tag Cloud', | |
| category: 'data', | |
| icon: Tag, | |
| component: <Mini.MiniTags />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'leaderboard', | |
| name: 'Leaderboard', | |
| category: 'social', | |
| icon: Trophy, | |
| component: <Mini.MiniLeaderboard />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'filemanager', | |
| name: 'File Manager', | |
| category: 'productivity', | |
| icon: Folder, | |
| component: <Mini.MiniFileManager />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'crypto', | |
| name: 'Crypto Ticker', | |
| category: 'commerce', | |
| icon: TrendingUp, | |
| component: <Mini.MiniCryptoTicker />, | |
| source: dataSources.cryptoMarket, | |
| }, | |
| { | |
| id: 'speedometer', | |
| name: 'Speedometer', | |
| category: 'data', | |
| icon: Activity, | |
| component: <Mini.MiniSpeedometer />, | |
| source: dataSources.networkStatus, | |
| }, | |
| { | |
| id: 'battery', | |
| name: 'Battery Status', | |
| category: 'system', | |
| icon: Battery, | |
| component: <Mini.MiniBattery />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'heatmap', | |
| name: 'Heatmap', | |
| category: 'data', | |
| icon: Grid3X3, | |
| component: <Mini.MiniHeatmap />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'treemap', | |
| name: 'Treemap', | |
| category: 'data', | |
| icon: LayoutDashboard, | |
| component: <Mini.MiniTreemap />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'radar', | |
| name: 'Radar Chart', | |
| category: 'data', | |
| icon: Target, | |
| component: <Mini.MiniRadar />, | |
| source: dataSources.aiEngine, | |
| }, | |
| { | |
| id: 'funnel', | |
| name: 'Funnel Chart', | |
| category: 'data', | |
| icon: Filter, | |
| component: <Mini.MiniFunnel />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'sankey', | |
| name: 'Sankey Flow', | |
| category: 'data', | |
| icon: Activity, | |
| component: <Mini.MiniSankey />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'scatter', | |
| name: 'Scatter Plot', | |
| category: 'data', | |
| icon: Grid3X3, | |
| component: <Mini.MiniScatter />, | |
| source: dataSources.aiEngine, | |
| }, | |
| { | |
| id: 'analogclock', | |
| name: 'Analog Clock', | |
| category: 'productivity', | |
| icon: Clock, | |
| component: <Mini.MiniClock />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'thermometer', | |
| name: 'Thermometer', | |
| category: 'system', | |
| icon: Thermometer, | |
| component: <Mini.MiniThermometer />, | |
| source: dataSources.weatherApi, | |
| }, | |
| { | |
| id: 'socialstats', | |
| name: 'Social Stats', | |
| category: 'social', | |
| icon: Heart, | |
| component: <Mini.MiniSocialStats />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'achievements', | |
| name: 'Achievements', | |
| category: 'social', | |
| icon: Award, | |
| component: <Mini.MiniAchievements />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'flowchart', | |
| name: 'Flowchart', | |
| category: 'data', | |
| icon: Share2, | |
| component: <Mini.MiniFlowchart />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'codesnippet', | |
| name: 'Code Snippet', | |
| category: 'productivity', | |
| icon: FileText, | |
| component: <Mini.MiniCodeSnippet />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'qrcode', | |
| name: 'QR Code', | |
| category: 'data', | |
| icon: Grid3X3, | |
| component: <Mini.MiniQRCode />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'togglepanel', | |
| name: 'Toggle Panel', | |
| category: 'system', | |
| icon: Settings, | |
| component: <Mini.MiniTogglePanel />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'sliders', | |
| name: 'Slider Controls', | |
| category: 'system', | |
| icon: Settings, | |
| component: <Mini.MiniSliders />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'statusboard', | |
| name: 'Status Board', | |
| category: 'system', | |
| icon: Activity, | |
| component: <Mini.MiniStatusBoard />, | |
| source: dataSources.networkStatus, | |
| }, | |
| { | |
| id: 'voicewave', | |
| name: 'Voice Wave', | |
| category: 'media', | |
| icon: Volume2, | |
| component: <Mini.MiniVoiceWave />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'gridlayout', | |
| name: 'Grid Layout', | |
| category: 'dashboards', | |
| icon: LayoutDashboard, | |
| component: <Mini.MiniGridLayout />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'dashboard1', | |
| name: 'Analytics Hub', | |
| category: 'dashboards', | |
| icon: LayoutDashboard, | |
| component: <Mini.MiniStats />, | |
| source: dataSources.userAnalytics, | |
| }, | |
| { | |
| id: 'dashboard2', | |
| name: 'Command Center', | |
| category: 'dashboards', | |
| icon: Cpu, | |
| component: <Mini.MiniStatusBoard />, | |
| source: dataSources.systemMetrics, | |
| }, | |
| { | |
| id: 'shipping', | |
| name: 'Shipping Tracker', | |
| category: 'commerce', | |
| icon: Truck, | |
| component: <Mini.MiniTimeline />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'inventory', | |
| name: 'Inventory', | |
| category: 'commerce', | |
| icon: Package, | |
| component: <Mini.MiniTable />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'payments', | |
| name: 'Payment Stats', | |
| category: 'commerce', | |
| icon: CreditCard, | |
| component: <Mini.MiniStats />, | |
| source: dataSources.internalDb, | |
| }, | |
| { | |
| id: 'wallet', | |
| name: 'Wallet Balance', | |
| category: 'commerce', | |
| icon: Wallet, | |
| component: <Mini.MiniProgress />, | |
| source: dataSources.cryptoMarket, | |
| }, | |
| // AI & ML | |
| { id: 'data-analysis', name: 'AI Data Analyst', category: 'data', icon: BarChart3, component: <DataAnalysisWidget />, source: dataSources.aiEngine }, | |
| { id: 'ai-sentiment', name: 'AI Sentiment', category: 'data', icon: Brain, component: <Mini.MiniAISentiment />, source: dataSources.aiEngine }, | |
| { id: 'model-status', name: 'Model Status', category: 'system', icon: Sparkles, component: <Mini.MiniModelStatus />, source: dataSources.aiEngine }, | |
| { id: 'training-progress', name: 'Training Progress', category: 'data', icon: Activity, component: <Mini.MiniTrainingProgress />, source: dataSources.aiEngine }, | |
| { id: 'neural-network', name: 'Neural Network', category: 'data', icon: Brain, component: <Mini.MiniNeuralNetwork />, source: dataSources.aiEngine }, | |
| { id: 'token-usage', name: 'Token Usage', category: 'data', icon: Hash, component: <Mini.MiniTokenUsage />, source: dataSources.aiEngine }, | |
| { id: 'embedding-viz', name: 'Embedding Viz', category: 'data', icon: Layers, component: <Mini.MiniEmbeddingViz />, source: dataSources.aiEngine }, | |
| { id: 'prompt-queue', name: 'Prompt Queue', category: 'productivity', icon: ListTodo, component: <Mini.MiniPromptQueue />, source: dataSources.aiEngine }, | |
| // DevOps | |
| { id: 'server-rack', name: 'Server Rack', category: 'system', icon: HardDrive, component: <Mini.MiniServerRack />, source: dataSources.systemMetrics }, | |
| { id: 'deployment-pipeline', name: 'Deploy Pipeline', category: 'system', icon: Rocket, component: <Mini.MiniDeploymentPipeline />, source: dataSources.systemMetrics }, | |
| { id: 'kubernetes', name: 'Kubernetes', category: 'system', icon: Box, component: <Mini.MiniKubernetes />, source: dataSources.systemMetrics }, | |
| { id: 'container-stats', name: 'Container Stats', category: 'system', icon: Package, component: <Mini.MiniContainerStats />, source: dataSources.systemMetrics }, | |
| { id: 'git-activity', name: 'Git Activity', category: 'productivity', icon: GitCommit, component: <Mini.MiniGitActivity />, source: dataSources.internalDb }, | |
| { id: 'cicd', name: 'CI/CD Status', category: 'system', icon: GitBranch, component: <Mini.MiniCICD />, source: dataSources.systemMetrics }, | |
| { id: 'log-stream', name: 'Log Stream', category: 'system', icon: Terminal, component: <Mini.MiniLogStream />, source: dataSources.systemMetrics }, | |
| { id: 'api-latency', name: 'API Latency', category: 'data', icon: Activity, component: <Mini.MiniAPILatency />, source: dataSources.networkStatus }, | |
| // Financial | |
| { id: 'stock-chart', name: 'Stock Chart', category: 'commerce', icon: TrendingUp, component: <Mini.MiniStockChart />, source: dataSources.cryptoMarket }, | |
| { id: 'portfolio', name: 'Portfolio', category: 'commerce', icon: Wallet, component: <Mini.MiniPortfolio />, source: dataSources.internalDb }, | |
| { id: 'transactions', name: 'Transactions', category: 'commerce', icon: CreditCard, component: <Mini.MiniTransactions />, source: dataSources.internalDb }, | |
| { id: 'expense-breakdown', name: 'Expenses', category: 'commerce', icon: PieChart, component: <Mini.MiniExpenseBreakdown />, source: dataSources.internalDb }, | |
| { id: 'invoice', name: 'Invoice', category: 'commerce', icon: FileText, component: <Mini.MiniInvoice />, source: dataSources.internalDb }, | |
| { id: 'exchange-rates', name: 'Exchange Rates', category: 'commerce', icon: DollarSign, component: <Mini.MiniExchangeRates />, source: dataSources.cryptoMarket }, | |
| // Security & Cybersecurity | |
| { id: 'threat-level', name: 'Threat Level', category: 'system', icon: Shield, component: <Mini.MiniThreatLevel />, source: dataSources.securityLog }, | |
| { id: 'firewall', name: 'Firewall', category: 'system', icon: Shield, component: <Mini.MiniFirewall />, source: dataSources.securityLog }, | |
| { id: 'access-log', name: 'Access Log', category: 'system', icon: FileText, component: <Mini.MiniAccessLog />, source: dataSources.securityLog }, | |
| { id: 'vulnerabilities', name: 'Vulnerabilities', category: 'system', icon: Bug, component: <Mini.MiniVulnerabilities />, source: dataSources.securityLog }, | |
| { id: 'encryption', name: 'Encryption', category: 'system', icon: Lock, component: <Mini.MiniEncryption />, source: dataSources.securityLog }, | |
| { id: 'ssl-status', name: 'SSL Status', category: 'system', icon: Lock, component: <Mini.MiniSSLStatus />, source: dataSources.securityLog }, | |
| { id: 'soc-dashboard', name: 'SOC Dashboard', category: 'dashboards', icon: ShieldAlert, component: <Mini.MiniSOCDashboard />, source: dataSources.securityLog }, | |
| { id: 'threat-map', name: 'Threat Map', category: 'dashboards', icon: Globe, component: <Mini.MiniThreatMap />, source: dataSources.securityLog }, | |
| { id: 'malware-detection', name: 'Malware Detection', category: 'system', icon: Skull, component: <Mini.MiniMalwareDetection />, source: dataSources.securityLog }, | |
| { id: 'intrusion-detection', name: 'IDS Monitor', category: 'system', icon: Radar, component: <Mini.MiniIntrusionDetection />, source: dataSources.securityLog }, | |
| { id: 'ddos-monitor', name: 'DDoS Monitor', category: 'system', icon: Network, component: <Mini.MiniDDoSMonitor />, source: dataSources.securityLog }, | |
| { id: 'phishing-detector', name: 'Phishing Detector', category: 'system', icon: Mail, component: <Mini.MiniPhishingDetector />, source: dataSources.securityLog }, | |
| { id: 'dark-web-monitor', name: 'Dark Web Monitor', category: 'system', icon: Ghost, component: <Mini.MiniDarkWebMonitor />, source: dataSources.securityLog }, | |
| { id: 'zero-day-alert', name: 'Zero-Day Alert', category: 'system', icon: AlertTriangle, component: <Mini.MiniZeroDayAlert />, source: dataSources.securityLog }, | |
| { id: 'patch-status', name: 'Patch Status', category: 'system', icon: Download, component: <Mini.MiniPatchStatus />, source: dataSources.securityLog }, | |
| { id: 'endpoint-protection', name: 'Endpoint Protection', category: 'system', icon: Laptop, component: <Mini.MiniEndpointProtection />, source: dataSources.securityLog }, | |
| { id: 'siem-alerts', name: 'SIEM Alerts', category: 'system', icon: AlertCircle, component: <Mini.MiniSIEMAlerts />, source: dataSources.securityLog }, | |
| { id: 'honeypot-status', name: 'Honeypot Status', category: 'system', icon: Target, component: <Mini.MiniHoneypotStatus />, source: dataSources.securityLog }, | |
| { id: 'ip-reputation', name: 'IP Reputation', category: 'system', icon: Globe, component: <Mini.MiniIPReputation />, source: dataSources.securityLog }, | |
| { id: 'ransomware-shield', name: 'Ransomware Shield', category: 'system', icon: FileLock, component: <Mini.MiniRansomwareShield />, source: dataSources.securityLog }, | |
| { id: 'network-segments', name: 'Network Segments', category: 'system', icon: Network, component: <Mini.MiniNetworkSegments />, source: dataSources.securityLog }, | |
| { id: 'threat-intel', name: 'Threat Intel', category: 'data', icon: BrainCircuit, component: <Mini.MiniThreatIntel />, source: dataSources.securityLog }, | |
| { id: 'mitre-matrix', name: 'MITRE ATT&CK', category: 'data', icon: Grid, component: <Mini.MiniMITREMatrix />, source: dataSources.securityLog }, | |
| { id: 'incident-timeline', name: 'Incident Timeline', category: 'system', icon: Clock, component: <Mini.MiniIncidentTimeline />, source: dataSources.securityLog }, | |
| { id: 'compliance-score', name: 'Compliance Score', category: 'data', icon: BadgeCheck, component: <Mini.MiniComplianceScore />, source: dataSources.securityLog }, | |
| { id: 'dlp-status', name: 'DLP Status', category: 'system', icon: FileWarning, component: <Mini.MiniDataLeakPrevention />, source: dataSources.securityLog }, | |
| { id: 'pentest-results', name: 'Pen Test Results', category: 'data', icon: Crosshair, component: <Mini.MiniPenTestResults />, source: dataSources.securityLog }, | |
| { id: 'security-posture', name: 'Security Posture', category: 'dashboards', icon: ShieldCheck, component: <Mini.MiniSecurityPosture />, source: dataSources.securityLog }, | |
| { id: 'forensic-status', name: 'Forensic Analysis', category: 'system', icon: FileSearch, component: <Mini.MiniForensicStatus />, source: dataSources.securityLog }, | |
| { id: 'cert-monitor', name: 'Cert Monitor', category: 'system', icon: BadgeCheck, component: <Mini.MiniCertificateMonitor />, source: dataSources.securityLog }, | |
| { id: 'port-scanner', name: 'Port Scanner', category: 'system', icon: ScanLine, component: <Mini.MiniPortScanner />, source: dataSources.securityLog }, | |
| { id: 'user-behavior', name: 'User Behavior', category: 'data', icon: UserCheck, component: <Mini.MiniUserBehavior />, source: dataSources.securityLog }, | |
| { id: 'api-security', name: 'API Security', category: 'system', icon: Webhook, component: <Mini.MiniAPISecurityGateway />, source: dataSources.securityLog }, | |
| { id: 'secret-scanner', name: 'Secret Scanner', category: 'system', icon: KeyRound, component: <Mini.MiniSecretScanner />, source: dataSources.securityLog }, | |
| { id: 'container-security', name: 'Container Security', category: 'system', icon: Box, component: <Mini.MiniContainerSecurity />, source: dataSources.securityLog }, | |
| { id: 'cloud-security', name: 'Cloud Security', category: 'system', icon: Cloud, component: <Mini.MiniCloudSecurityScore />, source: dataSources.securityLog }, | |
| { id: 'waf-status', name: 'WAF Status', category: 'system', icon: Shield, component: <Mini.MiniWAFStatus />, source: dataSources.securityLog }, | |
| { id: 'bot-detection', name: 'Bot Detection', category: 'system', icon: Scan, component: <Mini.MiniBotDetection />, source: dataSources.securityLog }, | |
| { id: 'ssh-monitor', name: 'SSH Monitor', category: 'system', icon: Terminal, component: <Mini.MiniSSHMonitor />, source: dataSources.securityLog }, | |
| { id: 'audit-log', name: 'Audit Log', category: 'system', icon: FileText, component: <Mini.MiniAuditLog />, source: dataSources.securityLog }, | |
| { id: 'mfa-status', name: 'MFA Status', category: 'system', icon: Fingerprint, component: <Mini.MiniMFAStatus />, source: dataSources.securityLog }, | |
| { id: 'pam-status', name: 'Privileged Access', category: 'system', icon: LockKeyhole, component: <Mini.MiniPrivilegedAccess />, source: dataSources.securityLog }, | |
| { id: 'vpn-status', name: 'VPN Status', category: 'system', icon: Network, component: <Mini.MiniVPNStatus />, source: dataSources.securityLog }, | |
| { id: 'email-security', name: 'Email Security', category: 'system', icon: Mail, component: <Mini.MiniEmailSecurity />, source: dataSources.securityLog }, | |
| { id: 'asset-inventory', name: 'Asset Inventory', category: 'system', icon: Server, component: <Mini.MiniAssetInventory />, source: dataSources.securityLog }, | |
| { id: 'backup-status', name: 'Backup Status', category: 'system', icon: Database, component: <Mini.MiniBackupStatus />, source: dataSources.securityLog }, | |
| { id: 'gdpr-status', name: 'GDPR Compliance', category: 'data', icon: Shield, component: <Mini.MiniGDPRStatus />, source: dataSources.securityLog }, | |
| { id: 'security-training', name: 'Security Training', category: 'productivity', icon: Award, component: <Mini.MiniSecurityTraining />, source: dataSources.securityLog }, | |
| { id: 'ioc-feed', name: 'IOC Feed', category: 'data', icon: Biohazard, component: <Mini.MiniIOCFeed />, source: dataSources.threatIntel, }, | |
| { id: 'network-traffic', name: 'Network Traffic', category: 'system', icon: Wifi, component: <Mini.MiniNetworkTraffic />, source: dataSources.securityLog }, | |
| { id: 'zero-trust', name: 'Zero Trust', category: 'system', icon: ShieldCheck, component: <Mini.MiniZeroTrust />, source: dataSources.systemMetrics }, | |
| { id: 'security-alerts', name: 'Security Alerts', category: 'system', icon: Siren, component: <Mini.MiniSecurityAlerts />, source: dataSources.securityLog }, | |
| { id: 'dns-security', name: 'DNS Security', category: 'system', icon: Globe, component: <Mini.MiniDNSSecurity />, source: dataSources.securityLog }, | |
| // IoT & Sensors | |
| { id: 'sensor-grid', name: 'Sensor Grid', category: 'system', icon: Cpu, component: <Mini.MiniSensorGrid />, source: dataSources.systemMetrics }, | |
| { id: 'motion-detector', name: 'Motion Detector', category: 'system', icon: Eye, component: <Mini.MiniMotionDetector />, source: dataSources.systemMetrics }, | |
| { id: 'smart-home', name: 'Smart Home', category: 'system', icon: Lightbulb, component: <Mini.MiniSmartHome />, source: dataSources.systemMetrics }, | |
| { id: 'energy-meter', name: 'Energy Meter', category: 'system', icon: Zap, component: <Mini.MiniEnergyMeter />, source: dataSources.systemMetrics }, | |
| { id: 'water-usage', name: 'Water Usage', category: 'system', icon: Droplets, component: <Mini.MiniWaterUsage />, source: dataSources.systemMetrics }, | |
| // Project Management | |
| { id: 'sprint-progress', name: 'Sprint Progress', category: 'productivity', icon: Target, component: <Mini.MiniSprintProgress />, source: dataSources.internalDb }, | |
| { id: 'burndown', name: 'Burndown', category: 'data', icon: TrendingDown, component: <Mini.MiniBurndown />, source: dataSources.internalDb }, | |
| { id: 'team-capacity', name: 'Team Capacity', category: 'productivity', icon: Users, component: <Mini.MiniTeamCapacity />, source: dataSources.internalDb }, | |
| { id: 'milestones', name: 'Milestones', category: 'productivity', icon: Flag, component: <Mini.MiniMilestones />, source: dataSources.internalDb }, | |
| { id: 'velocity', name: 'Velocity', category: 'data', icon: Rocket, component: <Mini.MiniVelocity />, source: dataSources.internalDb }, | |
| { id: 'issue-tracker', name: 'Issue Tracker', category: 'productivity', icon: Bug, component: <Mini.MiniIssueTracker />, source: dataSources.internalDb }, | |
| // E-commerce | |
| { id: 'order-status', name: 'Order Status', category: 'commerce', icon: Truck, component: <Mini.MiniOrderStatus />, source: dataSources.internalDb }, | |
| { id: 'product-card', name: 'Product Card', category: 'commerce', icon: Package, component: <Mini.MiniProductCard />, source: dataSources.internalDb }, | |
| { id: 'sales-funnel', name: 'Sales Funnel', category: 'commerce', icon: Filter, component: <Mini.MiniSalesFunnel />, source: dataSources.userAnalytics }, | |
| { id: 'review-score', name: 'Review Score', category: 'social', icon: Star, component: <Mini.MiniReviewScore />, source: dataSources.userAnalytics }, | |
| { id: 'inventory-alert', name: 'Inventory Alert', category: 'commerce', icon: AlertTriangle, component: <Mini.MiniInventoryAlert />, source: dataSources.internalDb }, | |
| { id: 'conversion-rate', name: 'Conversion Rate', category: 'commerce', icon: TrendingUp, component: <Mini.MiniConversionRate />, source: dataSources.userAnalytics }, | |
| // Communication | |
| { id: 'email-stats', name: 'Email Stats', category: 'social', icon: Mail, component: <Mini.MiniEmailStats />, source: dataSources.internalDb }, | |
| { id: 'call-log', name: 'Call Log', category: 'social', icon: Phone, component: <Mini.MiniCallLog />, source: dataSources.internalDb }, | |
| { id: 'meeting-schedule', name: 'Meetings', category: 'productivity', icon: Calendar, component: <Mini.MiniMeetingSchedule />, source: dataSources.internalDb }, | |
| { id: 'video-call', name: 'Video Call', category: 'media', icon: Video, component: <Mini.MiniVideoCall />, source: dataSources.internalDb }, | |
| { id: 'unread-messages', name: 'Unread Messages', category: 'social', icon: MessageSquare, component: <Mini.MiniUnreadMessages />, source: dataSources.internalDb }, | |
| // System Monitoring | |
| { id: 'cpu-cores', name: 'CPU Cores', category: 'system', icon: Cpu, component: <Mini.MiniCPUCores />, source: dataSources.systemMetrics }, | |
| { id: 'memory-usage', name: 'Memory Usage', category: 'system', icon: HardDrive, component: <Mini.MiniMemoryUsage />, source: dataSources.systemMetrics }, | |
| { id: 'disk-io', name: 'Disk I/O', category: 'system', icon: HardDrive, component: <Mini.MiniDiskIO />, source: dataSources.systemMetrics }, | |
| { id: 'process-list', name: 'Process List', category: 'system', icon: Terminal, component: <Mini.MiniProcessList />, source: dataSources.systemMetrics }, | |
| { id: 'uptime', name: 'Uptime', category: 'system', icon: Power, component: <Mini.MiniUptime />, source: dataSources.systemMetrics }, | |
| { id: 'temp-monitor', name: 'Temp Monitor', category: 'system', icon: Thermometer, component: <Mini.MiniTemperatureMonitor />, source: dataSources.systemMetrics }, | |
| // Media | |
| { id: 'podcast-player', name: 'Podcast Player', category: 'media', icon: Podcast, component: <Mini.MiniPodcastPlayer />, source: dataSources.internalDb }, | |
| { id: 'image-gallery', name: 'Image Gallery', category: 'media', icon: Image, component: <Mini.MiniImageGallery />, source: dataSources.internalDb }, | |
| { id: 'video-thumbnail', name: 'Video Thumbnail', category: 'media', icon: Film, component: <Mini.MiniVideoThumbnail />, source: dataSources.internalDb }, | |
| { id: 'music-equalizer', name: 'Music Equalizer', category: 'media', icon: Music, component: <Mini.MiniMusicEqualizer />, source: dataSources.internalDb }, | |
| { id: 'storage-quota', name: 'Storage Quota', category: 'system', icon: HardDrive, component: <Mini.MiniStorageQuota />, source: dataSources.systemMetrics }, | |
| // Analytics | |
| { id: 'realtime-visitors', name: 'Realtime Visitors', category: 'dashboards', icon: Users, component: <Mini.MiniRealTimeVisitors />, source: dataSources.userAnalytics }, | |
| { id: 'bounce-rate', name: 'Bounce Rate', category: 'data', icon: TrendingDown, component: <Mini.MiniBounceRate />, source: dataSources.userAnalytics }, | |
| { id: 'session-duration', name: 'Session Duration', category: 'data', icon: Timer, component: <Mini.MiniSessionDuration />, source: dataSources.userAnalytics }, | |
| { id: 'page-views', name: 'Page Views', category: 'data', icon: Eye, component: <Mini.MiniPageViews />, source: dataSources.userAnalytics }, | |
| { id: 'traffic-sources', name: 'Traffic Sources', category: 'data', icon: Globe, component: <Mini.MiniTrafficSources />, source: dataSources.userAnalytics }, | |
| { id: 'goal-completion', name: 'Goal Completion', category: 'data', icon: Target, component: <Mini.MiniGoalCompletion />, source: dataSources.userAnalytics }, | |
| // Miscellaneous | |
| { id: 'country-stats', name: 'Country Stats', category: 'data', icon: Globe, component: <Mini.MiniCountryStats />, source: dataSources.userAnalytics }, | |
| { id: 'ab-test', name: 'A/B Test', category: 'data', icon: FlaskConical, component: <Mini.MiniABTest />, source: dataSources.userAnalytics }, | |
| { id: 'feature-flags', name: 'Feature Flags', category: 'system', icon: Flag, component: <Mini.MiniFeatureFlags />, source: dataSources.internalDb }, | |
| { id: 'quote', name: 'Quote', category: 'social', icon: MessageSquare, component: <Mini.MiniQuote />, source: dataSources.internalDb }, | |
| { id: 'dice-roller', name: 'Dice Roller', category: 'productivity', icon: Dice1, component: <Mini.MiniDiceRoller />, source: dataSources.internalDb }, | |
| { id: 'color-palette', name: 'Color Palette', category: 'productivity', icon: Palette, component: <Mini.MiniColorPalette />, source: dataSources.internalDb }, | |
| { id: 'world-clock', name: 'World Clock', category: 'productivity', icon: Clock, component: <Mini.MiniWorldClock />, source: dataSources.systemMetrics }, | |
| { id: 'pomodoro', name: 'Pomodoro Timer', category: 'productivity', icon: Timer, component: <Mini.MiniPomodoroTimer />, source: dataSources.internalDb }, | |
| { id: 'habit-tracker', name: 'Habit Tracker', category: 'productivity', icon: CheckCircle, component: <Mini.MiniHabitTracker />, source: dataSources.internalDb }, | |
| { id: 'password-strength', name: 'Password Strength', category: 'system', icon: Key, component: <Mini.MiniPasswordStrength />, source: dataSources.securityLog }, | |
| { id: 'language-selector', name: 'Language Selector', category: 'productivity', icon: Globe, component: <Mini.MiniLanguageSelector />, source: dataSources.internalDb }, | |
| { id: 'theme-toggle', name: 'Theme Toggle', category: 'system', icon: Moon, component: <Mini.MiniThemeToggle />, source: dataSources.internalDb }, | |
| { id: 'font-sizer', name: 'Font Sizer', category: 'system', icon: Type, component: <Mini.MiniFontSizer />, source: dataSources.internalDb }, | |
| { id: 'bookmarks', name: 'Bookmarks', category: 'productivity', icon: Bookmark, component: <Mini.MiniBookmark />, source: dataSources.internalDb }, | |
| { id: 'vidensarkiv', name: 'Vidensarkiv', category: 'data', icon: Archive, component: <VidensarkivWidget />, source: dataSources.internalDb }, | |
| { id: 'research-agent', name: 'Research Agent', category: 'productivity', icon: Brain, component: <ResearchAgentWidget />, source: dataSources.aiEngine }, | |
| { id: 'tdc-solution', name: 'TDC Løsningsdesigner', category: 'productivity', icon: Briefcase, component: <TDCSolutionWidget />, source: dataSources.aiEngine }, | |
| ]; | |
| // Combine original widgets with additional widgets | |
| const allWidgets: Widget[] = [...widgets, ...(additionalWidgets as Widget[])]; | |
| const categories = [ | |
| { id: 'all', label: 'Alle', icon: Grid3X3 }, | |
| { id: 'dashboards', label: 'Dashboards', icon: LayoutDashboard }, | |
| { id: 'data', label: 'Data & Charts', icon: BarChart3 }, | |
| { id: 'productivity', label: 'Produktivitet', icon: ListTodo }, | |
| { id: 'system', label: 'System', icon: Cpu }, | |
| { id: 'commerce', label: 'Commerce', icon: ShoppingCart }, | |
| { id: 'social', label: 'Social', icon: Users }, | |
| { id: 'media', label: 'Media', icon: Play }, | |
| ]; | |
| const Widgets = () => { | |
| const [activeCategory, setActiveCategory] = useState<WidgetCategory>('all'); | |
| const [expandedWidget, setExpandedWidget] = useState<string | null>(null); | |
| const [modalWidget, setModalWidget] = useState<Widget | null>(null); | |
| const [isModalOpen, setIsModalOpen] = useState(false); | |
| const filteredWidgets = | |
| activeCategory === 'all' ? allWidgets : allWidgets.filter(w => w.category === activeCategory); | |
| const handleWidgetClick = (widget: Widget, e: React.MouseEvent) => { | |
| // Check if it's a security widget - open modal instead of expanding | |
| if (securityWidgetIds.includes(widget.id)) { | |
| e.stopPropagation(); | |
| setModalWidget(widget); | |
| setIsModalOpen(true); | |
| } else { | |
| setExpandedWidget(expandedWidget === widget.id ? null : widget.id); | |
| } | |
| }; | |
| const isSecurityWidget = (widgetId: string) => securityWidgetIds.includes(widgetId); | |
| return ( | |
| <div className="min-h-screen bg-background relative overflow-hidden"> | |
| <MatrixRain /> | |
| {/* Scanline overlay */} | |
| <div className="fixed inset-0 pointer-events-none scanlines opacity-20 z-10" /> | |
| {/* Header */} | |
| <header className="relative z-20 border-b border-border/50 bg-background/80 backdrop-blur-sm"> | |
| <div className="container mx-auto px-4 py-4"> | |
| <div className="flex items-center justify-between"> | |
| <Link | |
| to="/" | |
| className="flex items-center gap-3 text-primary hover:text-primary/80 transition-colors" | |
| > | |
| <ArrowLeft className="w-5 h-5" /> | |
| <span className="font-mono text-sm">TILBAGE</span> | |
| </Link> | |
| <div className="text-center"> | |
| <GlitchText | |
| text="WIDGET LIBRARY" | |
| className="text-xl sm:text-2xl font-display font-bold tracking-wider" | |
| /> | |
| <p className="text-xs text-muted-foreground font-mono mt-1"> | |
| {filteredWidgets.length} MODULÆRE KOMPONENTER | |
| </p> | |
| </div> | |
| <Link | |
| to="/discover" | |
| className="flex items-center gap-2 text-primary hover:text-primary/80 transition-colors" | |
| > | |
| <Search className="w-4 h-4" /> | |
| <span className="font-mono text-sm hidden sm:inline">DISCOVERY</span> | |
| </Link> | |
| </div> | |
| </div> | |
| </header> | |
| {/* Category Filter */} | |
| <div className="relative z-20 border-b border-border/30 bg-secondary/20 backdrop-blur-sm"> | |
| <div className="container mx-auto px-4 py-3"> | |
| <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide"> | |
| {categories.map(({ id, label, icon: Icon }) => ( | |
| <Button | |
| key={id} | |
| variant={activeCategory === id ? 'default' : 'ghost'} | |
| size="sm" | |
| onClick={() => setActiveCategory(id as WidgetCategory)} | |
| className={`shrink-0 gap-2 font-mono text-xs ${ | |
| activeCategory === id | |
| ? 'bg-primary text-primary-foreground' | |
| : 'text-muted-foreground hover:text-foreground' | |
| }`} | |
| > | |
| <Icon className="w-3.5 h-3.5" /> | |
| {label} | |
| </Button> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| {/* Widget Grid */} | |
| <main className="relative z-20 container mx-auto px-4 py-8"> | |
| <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> | |
| {filteredWidgets.map(widget => ( | |
| <div | |
| key={widget.id} | |
| className={`group cursor-pointer transition-all duration-300 ${ | |
| expandedWidget === widget.id ? 'col-span-2 row-span-2' : '' | |
| }`} | |
| onClick={e => handleWidgetClick(widget, e)} | |
| > | |
| <CyberCard | |
| variant={ | |
| expandedWidget === widget.id | |
| ? 'glowing' | |
| : isSecurityWidget(widget.id) | |
| ? 'bordered' | |
| : 'bordered' | |
| } | |
| className={`h-full transition-all duration-300 ${ | |
| isSecurityWidget(widget.id) | |
| ? 'hover:border-red-500/50 hover:shadow-[0_0_20px_rgba(239,68,68,0.2)]' | |
| : 'hover:border-primary/50' | |
| }`} | |
| > | |
| <div | |
| className={`${expandedWidget === widget.id ? 'h-48' : 'h-24'} transition-all duration-300`} | |
| > | |
| {widget.component} | |
| </div> | |
| <div className="mt-3 flex items-center justify-between"> | |
| <div className="flex items-center gap-2"> | |
| <widget.icon | |
| className={`w-3 h-3 ${isSecurityWidget(widget.id) ? 'text-red-400' : 'text-primary'}`} | |
| /> | |
| <span className="text-[10px] font-mono text-foreground truncate"> | |
| {widget.name} | |
| </span> | |
| </div> | |
| <div className="flex items-center gap-1"> | |
| <SourceLink | |
| source={widget.source} | |
| variant="icon" | |
| className="opacity-50 group-hover:opacity-100" | |
| /> | |
| {isSecurityWidget(widget.id) ? ( | |
| <Maximize2 className="w-3 h-3 text-red-400 opacity-0 group-hover:opacity-100 transition-opacity" /> | |
| ) : expandedWidget === widget.id ? ( | |
| <ChevronUp className="w-3 h-3 text-muted-foreground" /> | |
| ) : ( | |
| <ChevronDown className="w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" /> | |
| )} | |
| </div> | |
| </div> | |
| {/* Security widget indicator */} | |
| {isSecurityWidget(widget.id) && ( | |
| <div className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full animate-pulse" /> | |
| )} | |
| </CyberCard> | |
| </div> | |
| ))} | |
| </div> | |
| {/* Info Section */} | |
| <div className="mt-12 text-center"> | |
| <CyberCard variant="bordered" className="max-w-2xl mx-auto"> | |
| <div className="flex items-center justify-center gap-3 mb-4"> | |
| <Database className="w-5 h-5 text-primary" /> | |
| <h2 className="font-display text-lg text-primary">MODULÆR ARKITEKTUR</h2> | |
| </div> | |
| <p className="text-sm text-muted-foreground font-mono leading-relaxed"> | |
| Alle widgets er designet til at være fuldt modulære og kan kombineres frit på tværs af | |
| platformens dashboards. <span className="text-red-400">Security widgets</span> har | |
| interaktive detaljer - klik for at se mere. Træk og slip funktionalitet kommer snart. | |
| </p> | |
| </CyberCard> | |
| </div> | |
| </main> | |
| {/* Widget Detail Modal */} | |
| <WidgetDetailModal | |
| isOpen={isModalOpen} | |
| onClose={() => setIsModalOpen(false)} | |
| widget={modalWidget} | |
| /> | |
| </div> | |
| ); | |
| }; | |
| export default Widgets; | |