Seed: dashboard template (24 files)

src/pages/Analytics.tsx

@@ -0,0 +1,281 @@
+import { useState } from "react";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Eye, TrendingDown, Clock, UserPlus, ArrowUpRight, ArrowDownRight,
+  Globe, BarChart3
+} from "lucide-react";
+import Sidebar from "@/components/Sidebar";
+import Header from "@/components/Header";
+
+const metricCards = [
+  {
+    title: "Page Views",
+    value: "284,392",
+    change: "+14.2%",
+    trend: "up" as const,
+    icon: Eye,
+    color: "text-sky-600 bg-sky-100",
+  },
+  {
+    title: "Bounce Rate",
+    value: "42.3%",
+    change: "-2.4%",
+    trend: "down" as const,
+    icon: TrendingDown,
+    color: "text-orange-600 bg-orange-100",
+  },
+  {
+    title: "Session Duration",
+    value: "4m 32s",
+    change: "+18.7%",
+    trend: "up" as const,
+    icon: Clock,
+    color: "text-emerald-600 bg-emerald-100",
+  },
+  {
+    title: "New Users",
+    value: "1,847",
+    change: "+6.3%",
+    trend: "up" as const,
+    icon: UserPlus,
+    color: "text-violet-600 bg-violet-100",
+  },
+];
+
+const trafficSources = [
+  { name: "Organic Search", value: 42, color: "bg-sky-500" },
+  { name: "Social Media", value: 28, color: "bg-orange-500" },
+  { name: "Direct", value: 18, color: "bg-emerald-500" },
+  { name: "Referral", value: 12, color: "bg-violet-500" },
+];
+
+const userGrowthData = [
+  { month: "Jan", users: 120 }, { month: "Feb", users: 145 }, { month: "Mar", users: 162 },
+  { month: "Apr", users: 158 }, { month: "May", users: 190 }, { month: "Jun", users: 210 },
+  { month: "Jul", users: 235 }, { month: "Aug", users: 248 }, { month: "Sep", users: 275 },
+  { month: "Oct", users: 298 }, { month: "Nov", users: 310 }, { month: "Dec", users: 342 },
+];
+
+const trafficPieData = [
+  { name: "Direct", value: 42 },
+  { name: "Social", value: 28 },
+  { name: "Organic", value: 18 },
+  { name: "Referral", value: 12 },
+];
+const PIE_COLORS = ["#0ea5e9", "#f97316", "#10b981", "#8b5cf6"];
+
+const topPages = [
+  { url: "/", views: "45,231", bounce: "32.1%", duration: "3m 45s" },
+  { url: "/products", views: "28,492", bounce: "41.8%", duration: "2m 12s" },
+  { url: "/pricing", views: "19,847", bounce: "38.5%", duration: "4m 08s" },
+  { url: "/blog/getting-started", views: "15,623", bounce: "25.3%", duration: "6m 32s" },
+  { url: "/about", views: "12,891", bounce: "45.2%", duration: "1m 55s" },
+  { url: "/contact", views: "9,472", bounce: "52.7%", duration: "1m 20s" },
+  { url: "/docs/api", views: "8,234", bounce: "28.9%", duration: "5m 48s" },
+  { url: "/careers", views: "6,128", bounce: "39.1%", duration: "3m 15s" },
+];
+
+const geoBreakdown = [
+  { country: "United States", flag: "🇺🇸", pct: 38, visitors: "108,069" },
+  { country: "United Kingdom", flag: "🇬🇧", pct: 22, visitors: "62,566" },
+  { country: "Germany", flag: "🇩🇪", pct: 15, visitors: "42,659" },
+  { country: "Canada", flag: "🇨🇦", pct: 11, visitors: "31,283" },
+];
+
+export default function AnalyticsPage() {
+  const [dateRange, setDateRange] = useState("30d");
+
+  return (
+    <div className="flex min-h-screen bg-slate-50">
+      <Sidebar activePath="/analytics" />
+      <div className="flex-1 lg:ml-64">
+        <Header />
+        <main className="p-6 space-y-8">
+          {/* ── Date Range ── */}
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div>
+              <h1 className="text-2xl font-bold text-slate-900 animate-fade-up">Analytics</h1>
+              <p className="text-sm text-slate-500 mt-1">Track your site performance and user behavior</p>
+            </div>
+            <div className="flex items-center gap-3">
+              <Select value={dateRange} onValueChange={setDateRange}>
+                <SelectTrigger className="w-[150px] bg-white">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="7d">Last 7 days</SelectItem>
+                  <SelectItem value="30d">Last 30 days</SelectItem>
+                  <SelectItem value="90d">Last 90 days</SelectItem>
+                  <SelectItem value="1y">Last year</SelectItem>
+                </SelectContent>
+              </Select>
+              <Button variant="outline" size="sm" className="active:scale-[0.98]">Export</Button>
+            </div>
+          </div>
+
+          {/* ── Quick Stats Pills ── */}
+          <div className="flex flex-wrap gap-3">
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-muted text-sm">
+              <Eye className="h-3.5 w-3.5 text-sky-600" /> <span className="font-medium">Page Views:</span> 12.4K
+            </div>
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-muted text-sm">
+              <TrendingDown className="h-3.5 w-3.5 text-orange-600" /> <span className="font-medium">Bounce:</span> 34%
+            </div>
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-muted text-sm">
+              <Clock className="h-3.5 w-3.5 text-emerald-600" /> <span className="font-medium">Avg Duration:</span> 4m 32s
+            </div>
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-muted text-sm">
+              <UserPlus className="h-3.5 w-3.5 text-violet-600" /> <span className="font-medium">New Users:</span> 1.2K
+            </div>
+          </div>
+
+          {/* ── Metric Cards ── */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 stagger">
+            {metricCards.map((metric) => (
+              <Card key={metric.title} className="border-0 shadow-sm hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
+                <CardContent className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div className={`flex items-center justify-center h-12 w-12 rounded-xl \${metric.color}`}>
+                      <metric.icon className="h-6 w-6" />
+                    </div>
+                    <div className={`flex items-center gap-1 text-sm font-medium \${metric.trend === "up" ? "text-emerald-600" : "text-red-600"}`}>
+                      {metric.trend === "up" ? <ArrowUpRight className="h-4 w-4" /> : <ArrowDownRight className="h-4 w-4" />}
+                      {metric.change}
+                    </div>
+                  </div>
+                  <div className="mt-4">
+                    <p className="text-2xl font-bold text-slate-900">{metric.value}</p>
+                    <p className="text-sm text-slate-500 mt-1">{metric.title}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* ── Charts Section ── */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Traffic Sources */}
+            <Card className="border-0 shadow-sm animate-scale-in">
+              <CardHeader>
+                <CardTitle className="text-lg font-semibold text-slate-900">Traffic Sources</CardTitle>
+                <CardDescription>Where your visitors are coming from</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center justify-center py-4">
+                  <ResponsiveContainer width="100%" height={200}>
+                    <PieChart>
+                      <Pie data={trafficPieData} cx="50%" cy="50%" innerRadius={60} outerRadius={85} paddingAngle={3} dataKey="value">
+                        {trafficPieData.map((entry, index) => (
+                          <Cell key={entry.name} fill={PIE_COLORS[index % PIE_COLORS.length]} />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="grid grid-cols-2 gap-3 mt-4">
+                  {trafficSources.map((source) => (
+                    <div key={source.name} className="flex items-center gap-2">
+                      <div className={`h-3 w-3 rounded-full \${source.color}`} />
+                      <span className="text-sm text-slate-600">{source.name}</span>
+                      <span className="text-sm font-medium text-slate-900 ml-auto">{source.value}%</span>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* User Growth */}
+            <Card className="border-0 shadow-sm animate-scale-in">
+              <CardHeader>
+                <CardTitle className="text-lg font-semibold text-slate-900">User Growth</CardTitle>
+                <CardDescription>New user registrations over time</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ResponsiveContainer width="100%" height={250}>
+                  <AreaChart data={userGrowthData}>
+                    <defs>
+                      <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity={0.3} />
+                        <stop offset="100%" stopColor="hsl(var(--primary))" stopOpacity={0.02} />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.3} />
+                    <XAxis dataKey="month" stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                    <YAxis stroke="hsl(var(--muted-foreground))" fontSize={12} />
+                    <Tooltip />
+                    <Area type="monotone" dataKey="users" stroke="hsl(var(--primary))" fill="url(#areaGrad)" />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* ── Top Pages ── */}
+          <Card className="border-0 shadow-sm">
+            <CardHeader>
+              <CardTitle className="text-lg font-semibold text-slate-900">Top Pages</CardTitle>
+              <CardDescription>Most visited pages on your site</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow className="border-slate-100">
+                    <TableHead className="text-slate-500 font-medium">Page URL</TableHead>
+                    <TableHead className="text-slate-500 font-medium">Views</TableHead>
+                    <TableHead className="text-slate-500 font-medium">Bounce Rate</TableHead>
+                    <TableHead className="text-slate-500 font-medium">Avg. Duration</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {topPages.map((page) => (
+                    <TableRow key={page.url} className="border-slate-100 hover:bg-muted/50 transition-colors">
+                      <TableCell className="font-medium text-sky-600">{page.url}</TableCell>
+                      <TableCell className="text-slate-900 font-medium">{page.views}</TableCell>
+                      <TableCell className="text-slate-600">{page.bounce}</TableCell>
+                      <TableCell className="text-slate-600">{page.duration}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+
+          {/* ── Geographic Breakdown ── */}
+          <Card className="border-0 shadow-sm">
+            <CardHeader>
+              <CardTitle className="text-lg font-semibold text-slate-900">Geographic Breakdown</CardTitle>
+              <CardDescription>Visitor distribution by country</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {geoBreakdown.map((geo) => (
+                <div key={geo.country} className="flex items-center gap-4">
+                  <span className="text-2xl">{geo.flag}</span>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between mb-1.5">
+                      <span className="text-sm font-medium text-slate-900">{geo.country}</span>
+                      <span className="text-sm text-slate-500">{geo.visitors} visitors</span>
+                    </div>
+                    <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-gradient-to-r from-sky-500 to-sky-400 rounded-full transition-all"
+                        style={{ width: `\${geo.pct}%` }}
+                      />
+                    </div>
+                  </div>
+                  <span className="text-sm font-semibold text-slate-900 w-12 text-right">{geo.pct}%</span>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </main>
+      </div>
+    </div>
+  );
+}