"use client"
import { useState } from "react"
import { Bar, BarChart, Line, LineChart, Pie, PieChart, ResponsiveContainer, Sector, XAxis, YAxis } from "recharts"
import { ArrowDown, ArrowUp, BarChart3, Download, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
// Sample data for the dashboard
const visitorsData = [
{ date: "Jan", visitors: 1200, pageViews: 3800 },
{ date: "Feb", visitors: 1900, pageViews: 4600 },
{ date: "Mar", visitors: 1700, pageViews: 4100 },
{ date: "Apr", visitors: 2100, pageViews: 5200 },
{ date: "May", visitors: 2500, pageViews: 6100 },
{ date: "Jun", visitors: 2300, pageViews: 5800 },
{ date: "Jul", visitors: 2800, pageViews: 7200 },
{ date: "Aug", visitors: 3100, pageViews: 7900 },
{ date: "Sep", visitors: 2900, pageViews: 7400 },
{ date: "Oct", visitors: 3300, pageViews: 8200 },
{ date: "Nov", visitors: 3500, pageViews: 8700 },
{ date: "Dec", visitors: 3800, pageViews: 9500 },
]
const deviceData = [
{ name: "Desktop", value: 58 },
{ name: "Mobile", value: 34 },
{ name: "Tablet", value: 8 },
]
const sourceData = [
{ name: "Direct", value: 30 },
{ name: "Organic Search", value: 40 },
{ name: "Referral", value: 15 },
{ name: "Social", value: 15 },
]
const topPagesData = [
{ page: "/home", views: 12500, uniqueVisitors: 8700, bounceRate: "32%" },
{ page: "/products", views: 9800, uniqueVisitors: 6500, bounceRate: "28%" },
{ page: "/blog", views: 7400, uniqueVisitors: 5200, bounceRate: "45%" },
{ page: "/about", views: 5200, uniqueVisitors: 3800, bounceRate: "51%" },
{ page: "/contact", views: 4100, uniqueVisitors: 3200, bounceRate: "38%" },
]
export default function AnalyticsDashboard() {
const [dateRange, setDateRange] = useState("last-30-days")
const [activeIndex, setActiveIndex] = useState(0)
const onPieEnter = (_: any, index: number) => {
setActiveIndex(index)
}
const renderActiveShape = (props: any) => {
const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, payload, percent, value } = props
return (
<g>
<text x={cx} y={cy} dy={-4} textAnchor="middle" fill={fill}>
{payload.name}
</text>
<text x={cx} y={cy} dy={20} textAnchor="middle" fill="#999">
{`${value} (${(percent * 100).toFixed(0)}%)`}
</text>
<Sector
cx={cx}
cy={cy}
innerRadius={innerRadius}
outerRadius={outerRadius}
startAngle={startAngle}
endAngle={endAngle}
fill={fill}
/>
<Sector
cx={cx}
cy={cy}
startAngle={startAngle}
endAngle={endAngle}
innerRadius={outerRadius + 6}
outerRadius={outerRadius + 10}
fill={fill}
/>
</g>
)
}
return (
<div className="flex min-h-screen w-full flex-col bg-muted/40">
<div className="flex flex-col">
<header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
<div className="flex flex-1 items-center gap-2">
<BarChart3 className="h-6 w-6" />
<h1 className="text-lg font-semibold">Analytics Dashboard</h1>
</div>
<div className="flex items-center gap-2">
<Select value={dateRange} onValueChange={setDateRange}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select Date Range" />
</SelectTrigger>
<SelectContent>
<SelectItem value="today">Today</SelectItem>
<SelectItem value="yesterday">Yesterday</SelectItem>
<SelectItem value="last-7-days">Last 7 Days</SelectItem>
<SelectItem value="last-30-days">Last 30 Days</SelectItem>
<SelectItem value="this-month">This Month</SelectItem>
<SelectItem value="last-month">Last Month</SelectItem>
<SelectItem value="this-year">This Year</SelectItem>
</SelectContent>
</Select>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Download className="h-4 w-4" />
<span className="sr-only">Export</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Export Data</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Export as CSV</DropdownMenuItem>
<DropdownMenuItem>Export as Excel</DropdownMenuItem>
<DropdownMenuItem>Export as PDF</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
<main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Visitors</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">45,231</div>
<p className="text-xs text-muted-foreground">
<span className="text-emerald-500 flex items-center gap-1">
<ArrowUp className="h-3 w-3" />
12.5%
</span>{" "}
from last month
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Page Views</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-4 w-4 text-muted-foreground"
>
<rect width="20" height="14" x="2" y="5" rx="2" />
<path d="M2 10h20" />
</svg>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">132,544</div>
<p className="text-xs text-muted-foreground">
<span className="text-emerald-500 flex items-center gap-1">
<ArrowUp className="h-3 w-3" />
18.2%
</span>{" "}
from last month
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Bounce Rate</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-4 w-4 text-muted-foreground"
>
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
</svg>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">38.2%</div>
<p className="text-xs text-muted-foreground">
<span className="text-rose-500 flex items-center gap-1">
<ArrowDown className="h-3 w-3" />
5.1%
</span>{" "}
from last month
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Avg. Session Duration</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-4 w-4 text-muted-foreground"
>
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">3m 42s</div>
<p className="text-xs text-muted-foreground">
<span className="text-emerald-500 flex items-center gap-1">
<ArrowUp className="h-3 w-3" />
7.4%
</span>{" "}
from last month
</p>
</CardContent>
</Card>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
<Card className="lg:col-span-5">
<CardHeader>
<CardTitle>Traffic Overview</CardTitle>
<CardDescription>Website traffic over the past year</CardDescription>
</CardHeader>
<CardContent className="pl-2">
<Tabs defaultValue="visitors">
<TabsList className="mb-4">
<TabsTrigger value="visitors">Visitors</TabsTrigger>
<TabsTrigger value="pageViews">Page Views</TabsTrigger>
</TabsList>
<TabsContent value="visitors">
<ChartContainer
config={{
visitors: {
label: "Visitors",
color: "hsl(var(--chart-1))",
},
}}
className="aspect-[4/3]"
>
<ResponsiveContainer width="100%" height="100%">
<LineChart data={visitorsData}>
<XAxis dataKey="date" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<Line type="monotone" dataKey="visitors" strokeWidth={2} activeDot={{ r: 8 }} />
</LineChart>
</ResponsiveContainer>
</ChartContainer>
</TabsContent>
<TabsContent value="pageViews">
<ChartContainer
config={{
pageViews: {
label: "Page Views",
color: "hsl(var(--chart-2))",
},
}}
className="aspect-[4/3]"
>
<ResponsiveContainer width="100%" height="100%">
<LineChart data={visitorsData}>
<XAxis dataKey="date" />
<YAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<Line type="monotone" dataKey="pageViews" strokeWidth={2} activeDot={{ r: 8 }} />
</LineChart>
</ResponsiveContainer>
</ChartContainer>
</TabsContent>
</Tabs>
</CardContent>
</Card>
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle>Traffic Sources</CardTitle>
<CardDescription>Where your visitors come from</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer
config={{
source: {
label: "Traffic Source",
color: "hsl(var(--chart-3))",
},
}}
className="aspect-[4/3]"
>
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
activeIndex={activeIndex}
activeShape={renderActiveShape}
data={sourceData}
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={80}
fill="var(--color-source)"
dataKey="value"
onMouseEnter={onPieEnter}
/>
</PieChart>
</ResponsiveContainer>
</ChartContainer>
</CardContent>
</Card>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
<Card className="lg:col-span-5">
<CardHeader className="flex flex-row items-center">
<div className="grid gap-2">
<CardTitle>Top Pages</CardTitle>
<CardDescription>Your most visited pages</CardDescription>
</div>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Page</TableHead>
<TableHead className="text-right">Views</TableHead>
<TableHead className="text-right">Unique Visitors</TableHead>
<TableHead className="text-right">Bounce Rate</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{topPagesData.map((page) => (
<TableRow key={page.page}>
<TableCell className="font-medium">{page.page}</TableCell>
<TableCell className="text-right">{page.views.toLocaleString()}</TableCell>
<TableCell className="text-right">{page.uniqueVisitors.toLocaleString()}</TableCell>
<TableCell className="text-right">{page.bounceRate}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
<CardFooter className="flex justify-end">
<Button variant="ghost" size="sm">
View All
</Button>
</CardFooter>
</Card>
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle>Device Breakdown</CardTitle>
<CardDescription>Visitors by device type</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer
config={{
device: {
label: "Device Type",
color: "hsl(var(--chart-4))",
},
}}
className="aspect-[4/3]"
>
<ResponsiveContainer width="100%" height="100%">
<BarChart data={deviceData} layout="vertical">
<XAxis type="number" />
<YAxis dataKey="name" type="category" width={80} />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="value" fill="var(--color-device)" radius={4} />
</BarChart>
</ResponsiveContainer>
</ChartContainer>
</CardContent>
</Card>
</div>
</main>
</div>
</div>
)
}