dashboard-1

1"use client"
2 
3import * as React from "react"
4import {
5  RiArrowRightLine,
6  RiArrowRightUpLine,
7  RiArrowRightDownLine,
8} from "@remixicon/react"
9import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
10 
11import { Badge } from "@/components/ui/badge"
12import {
13  Card,
14  CardAction,
15  CardContent,
16  CardDescription,
17  CardHeader,
18  CardTitle,
19} from "@/components/ui/card"
20import {
21  ChartConfig,
22  ChartContainer,
23  ChartTooltip,
24  ChartTooltipContent,
25} from "@/components/ui/chart"
26import {
27  Select,
28  SelectContent,
29  SelectItem,
30  SelectTrigger,
31  SelectValue,
32} from "@/components/ui/select"
33 
34type Range = "7d" | "30d" | "90d" | "12m"
35 
36const RANGES: { value: Range; label: string }[] = [
37  { value: "7d", label: "Last 7 Days" },
38  { value: "30d", label: "Last 30 Days" },
39  { value: "90d", label: "Last 90 Days" },
40  { value: "12m", label: "Last 12 Months" },
41]
42 
43const STATS_BY_RANGE: Record<
44  Range,
45  { label: string; value: string; delta: string; up: boolean }[]
46> = {
47  "7d": [
48    { label: "Revenue", value: "$11.4k", delta: "+3.1%", up: true },
49    { label: "Active Users", value: "2,140", delta: "+1.2%", up: true },
50    { label: "Conversion", value: "3.31%", delta: "+0.2%", up: true },
51    { label: "Avg. Session", value: "4m 02s", delta: "-0.4%", up: false },
52  ],
53  "30d": [
54    { label: "Revenue", value: "$48.2k", delta: "+12.5%", up: true },
55    { label: "Active Users", value: "8,941", delta: "+4.3%", up: true },
56    { label: "Conversion", value: "3.24%", delta: "-0.8%", up: false },
57    { label: "Avg. Session", value: "4m 12s", delta: "+1.1%", up: true },
58  ],
59  "90d": [
60    { label: "Revenue", value: "$142.7k", delta: "+9.8%", up: true },
61    { label: "Active Users", value: "26,304", delta: "+7.6%", up: true },
62    { label: "Conversion", value: "3.18%", delta: "-1.4%", up: false },
63    { label: "Avg. Session", value: "4m 26s", delta: "+2.3%", up: true },
64  ],
65  "12m": [
66    { label: "Revenue", value: "$571.0k", delta: "+22.1%", up: true },
67    { label: "Active Users", value: "98,612", delta: "+18.4%", up: true },
68    { label: "Conversion", value: "3.02%", delta: "-2.9%", up: false },
69    { label: "Avg. Session", value: "4m 41s", delta: "+5.0%", up: true },
70  ],
71}
72 
73const chartData = [
74  { month: "Jan", sessions: 1840 },
75  { month: "Feb", sessions: 2120 },
76  { month: "Mar", sessions: 1760 },
77  { month: "Apr", sessions: 2580 },
78  { month: "May", sessions: 2340 },
79  { month: "Jun", sessions: 3120 },
80  { month: "Jul", sessions: 2210 },
81// … truncated