[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Dashboard from "@/components/dashboard" export default function Home() { return } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isEdit="true" isMerged="true" import { Bell, Search, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarTrigger } from "@/components/ui/sidebar" export function DashboardHeader() { return (

My Account Profile Settings Billing Logout

) } [V0_FILE]typescriptreact:file="components/dashboard-content.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { SalesChart } from "@/components/charts/sales-chart" import { VisitorsChart } from "@/components/charts/visitors-chart" import { RevenueChart } from "@/components/charts/revenue-chart" import { DeviceDistributionChart } from "@/components/charts/device-distribution-chart" interface DashboardContentProps { activePage: string } export function DashboardContent({ activePage }: DashboardContentProps) { if (activePage !== "dashboard") { return (

{activePage.charAt(0).toUpperCase() + activePage.slice(1)}

This page is under construction. Please check back later.

) } return (

Dashboard

Overview Analytics Reports

Total Revenue

$45,231.89

+20.1% from last month

Subscriptions

+2350

+180.1% from last month

Sales

+12,234

+19% from last month

Active Users

+573

+201 since last hour

Revenue Overview Monthly revenue for the current year Recent Sales Sales for the last 30 days

Visitors Website visitors over time Device Distribution Visitors by device type

Analytics Detailed analytics data will appear here.

Analytics content is under development.

Reports Generate and view reports here.

Reports content is under development.

) } [V0_FILE]typescriptreact:file="components/charts/revenue-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart" import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts" const data = [ { name: "Jan", revenue: 4000 }, { name: "Feb", revenue: 3000 }, { name: "Mar", revenue: 5000 }, { name: "Apr", revenue: 4000 }, { name: "May", revenue: 7000 }, { name: "Jun", revenue: 6000 }, { name: "Jul", revenue: 8000 }, { name: "Aug", revenue: 9000 }, { name: "Sep", revenue: 8500 }, { name: "Oct", revenue: 7500 }, { name: "Nov", revenue: 10000 }, { name: "Dec", revenue: 12000 }, ] const chartConfig: ChartConfig = { revenue: { label: "Revenue", color: "hsl(var(--primary))", }, } export function RevenueChart() { return ( `$${value}`} /> [`$${value}`, "Revenue"]} /> } cursor={false} /> ) } [V0_FILE]typescriptreact:file="components/charts/sales-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart" import { Line, LineChart, XAxis, YAxis } from "recharts" const data = [ { name: "1", sales: 200 }, { name: "5", sales: 350 }, { name: "10", sales: 320 }, { name: "15", sales: 500 }, { name: "20", sales: 450 }, { name: "25", sales: 650 }, { name: "30", sales: 700 }, ] const chartConfig: ChartConfig = { sales: { label: "Sales", color: "hsl(var(--primary))", }, } export function SalesChart() { return ( [value, "Sales"]} /> } /> ) } [V0_FILE]typescriptreact:file="components/charts/visitors-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart" import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts" const data = [ { name: "Jan", visitors: 1000 }, { name: "Feb", visitors: 1200 }, { name: "Mar", visitors: 1500 }, { name: "Apr", visitors: 1800 }, { name: "May", visitors: 2000 }, { name: "Jun", visitors: 2400 }, { name: "Jul", visitors: 2600 }, { name: "Aug", visitors: 3000 }, { name: "Sep", visitors: 3200 }, { name: "Oct", visitors: 3500 }, { name: "Nov", visitors: 3800 }, { name: "Dec", visitors: 4000 }, ] const chartConfig: ChartConfig = { visitors: { label: "Visitors", color: "hsl(var(--primary))", }, } export function VisitorsChart() { return ( [value, "Visitors"]} /> } /> ) } [V0_FILE]typescriptreact:file="components/charts/device-distribution-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart" import { Cell, Pie, PieChart } from "recharts" const data = [ { name: "Desktop", value: 55 }, { name: "Mobile", value: 35 }, { name: "Tablet", value: 10 }, ] const COLORS = ["hsl(var(--primary))", "hsl(var(--primary) / 0.7)", "hsl(var(--primary) / 0.4)"] const chartConfig: ChartConfig = { Desktop: { label: "Desktop", color: COLORS[0], }, Mobile: { label: "Mobile", color: COLORS[1], }, Tablet: { label: "Tablet", color: COLORS[2], }, } export function DeviceDistributionChart() { return ( `${name} ${(percent * 100).toFixed(0)}%`} labelLine={false} > {data.map((entry, index) => ( ))} [`${value}%`, "Users"]} /> } /> ) } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import type { ChartTooltipProps } from "recharts" import { cn } from "@/lib/utils" import * as RechartsPrimitive from "recharts" // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ({ color?: string; theme?: never } | { color?: never; theme: Record }) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error("useChart must be used within a ") } return context } const Chart = React.forwardRef>(({ className, ...props }, ref) => (

)) Chart.displayName = "Chart" const ChartContainer = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { data: any[] margin?: { top: number; right: number; bottom: number; left: number } config?: ChartConfig children: React.ComponentProps["children"] } >(({ id, className, children, config = {}, data, margin, ...props }, ref) => { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` return (

{children}

) }) ChartContainer.displayName = "ChartContainer" const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { if (!config || Object.keys(config).length === 0) { return null } const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color) if (!colorConfig.length) { return null } return (

About

About