[V0_FILE]typescriptreact:file="dashboard.tsx" "use client" import * as React from "react" import { Bar, BarChart, Line, LineChart, Pie, PieChart, ResponsiveContainer, XAxis, YAxis, Tooltip, Cell, } from "recharts" import { ArrowUpRight, Bot, Brain, Globe2, LayoutDashboard, Moon, Settings, Sun, Users, Zap } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Progress } from "@/components/ui/progress" const revenueData = [ { name: "Jan", total: 1400, users: 800, ai_usage: 2400 }, { name: "Feb", total: 2300, users: 1200, ai_usage: 3200 }, { name: "Mar", total: 3200, users: 1800, ai_usage: 4100 }, { name: "Apr", total: 4000, users: 2400, ai_usage: 4800 }, { name: "May", total: 4800, users: 3200, ai_usage: 5600 }, { name: "Jun", total: 5600, users: 4000, ai_usage: 6400 }, ] const aiModelData = [ { name: "GPT-4", value: 45 }, { name: "DALL-E", value: 25 }, { name: "Claude", value: 20 }, { name: "Other", value: 10 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"] export default function DashboardPage() { const [isDarkMode, setIsDarkMode] = React.useState(false) const [activeUsers, setActiveUsers] = React.useState(573) React.useEffect(() => { // Simulate real-time active users const interval = setInterval(() => { setActiveUsers((prev) => prev + Math.floor(Math.random() * 10) - 4) }, 5000) return () => clearInterval(interval) }, []) const toggleTheme = () => { setIsDarkMode(!isDarkMode) document.documentElement.classList.toggle("dark") } return (

AI Analytics Dashboard

Overview Analytics AI Reports {/* Overview Tab */}

Total Revenue

$45,231.89

+20.1% from last month

Active Users

+{activeUsers}

+180.1% from last month

AI Accuracy

98.2%

+4.1% from last month

Active Now

+{activeUsers}

+201 since last hour

Revenue Overview `$${value}`} /> User Growth Monthly active users over time

{/* Analytics Tab */}

AI Usage Distribution Distribution across different AI models `${name} ${(percent * 100).toFixed(0)}%`} outerRadius={80} fill="#8884d8" dataKey="value" > {aiModelData.map((entry, index) => ( ))} Performance Metrics Key AI model performance indicators

Response Time

95ms

Accuracy Rate

98.2%

{/* AI Reports Tab */}

AI Usage Trends Monthly AI request volume Model Performance Detailed AI model metrics

{aiModelData.map((model, index) => (

{model.name}

{model.value}%

))}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" const { fontFamily } = require("tailwindcss/defaultTheme") /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: `var(--radius)`, md: `calc(var(--radius) - 2px)`, sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], }, }, }, }

About

About