[V0_FILE]typescriptreact:file="dashboard.tsx" "use client" import { useEffect, useState, useRef } from "react" import { Activity, AlertCircle, BarChart3, Bell, CircleOff, Command, Cpu, Database, Download, Globe, HardDrive, Hexagon, LineChart, Lock, type LucideIcon, MessageSquare, Mic, Moon, Radio, RefreshCw, Search, Settings, Shield, Sun, Terminal, Wifi, Zap, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" export default function Dashboard() { const [theme, setTheme] = useState<"dark" | "light">("dark") const [systemStatus, setSystemStatus] = useState(85) const [cpuUsage, setCpuUsage] = useState(42) const [memoryUsage, setMemoryUsage] = useState(68) const [networkStatus, setNetworkStatus] = useState(92) const [securityLevel, setSecurityLevel] = useState(75) const [currentTime, setCurrentTime] = useState(new Date()) const [isLoading, setIsLoading] = useState(true) const canvasRef = useRef(null) // Simulate data loading useEffect(() => { const timer = setTimeout(() => { setIsLoading(false) }, 2000) return () => clearTimeout(timer) }, []) // Update time useEffect(() => { const interval = setInterval(() => { setCurrentTime(new Date()) }, 1000) return () => clearInterval(interval) }, []) // Simulate changing data useEffect(() => { const interval = setInterval(() => { setCpuUsage(Math.floor(Math.random() * 30) + 30) setMemoryUsage(Math.floor(Math.random() * 20) + 60) setNetworkStatus(Math.floor(Math.random() * 15) + 80) setSystemStatus(Math.floor(Math.random() * 10) + 80) }, 3000) return () => clearInterval(interval) }, []) // Particle effect useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight const particles: Particle[] = [] const particleCount = 100 class Particle { x: number y: number size: number speedX: number speedY: number color: string constructor() { this.x = Math.random() * canvas.width this.y = Math.random() * canvas.height this.size = Math.random() * 3 + 1 this.speedX = (Math.random() - 0.5) * 0.5 this.speedY = (Math.random() - 0.5) * 0.5 this.color = `rgba(${Math.floor(Math.random() * 100) + 100}, ${Math.floor(Math.random() * 100) + 150}, ${Math.floor(Math.random() * 55) + 200}, ${Math.random() * 0.5 + 0.2})` } update() { this.x += this.speedX this.y += this.speedY if (this.x > canvas.width) this.x = 0 if (this.x < 0) this.x = canvas.width if (this.y > canvas.height) this.y = 0 if (this.y < 0) this.y = canvas.height } draw() { if (!ctx) return ctx.fillStyle = this.color ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.fill() } } for (let i = 0; i < particleCount; i++) { particles.push(new Particle()) } function animate() { if (!ctx || !canvas) return ctx.clearRect(0, 0, canvas.width, canvas.height) for (const particle of particles) { particle.update() particle.draw() } requestAnimationFrame(animate) } animate() const handleResize = () => { if (!canvas) return canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeight } window.addEventListener("resize", handleResize) return () => { window.removeEventListener("resize", handleResize) } }, []) // Toggle theme const toggleTheme = () => { setTheme(theme === "dark" ? "light" : "dark") } // Format time const formatTime = (date: Date) => { return date.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit", }) } // Format date const formatDate = (date: Date) => { return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) } return (

{/* Background particle effect */}

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This