Dashboard

1"use client";
2 
3import type React from "react";
4 
5import { Badge } from "@/components/ui/badge";
6import { Button } from "@/components/ui/button";
7import { motion, type Variants } from "framer-motion";
8import {
9  Activity,
10  BarChart3,
11  ChevronRight,
12  Clock,
13  DollarSign,
14  Download,
15  Menu,
16  Percent,
17  Settings,
18  TrendingDown,
19  TrendingUp,
20  Users,
21  Zap,
22} from "lucide-react";
23import { useState } from "react";
24import {
25  CartesianGrid,
26  Line,
27  LineChart,
28  ResponsiveContainer,
29  Tooltip,
30  XAxis,
31  YAxis,
32} from "recharts";
33 
34// ============================================================================
35// TYPES & INTERFACES
36// ============================================================================
37 
38interface MetricCardProps {
39  label: string;
40  value: string;
41  change: string;
42  trend: "up" | "down";
43  icon: React.ReactNode;
44}
45 
46interface ChartCardProps {
47  title: string;
48  description: string;
49  data: Array<{ name: string; value: number }>;
50  dataKey: string;
51  height?: number;
52}
53 
54interface DetailItem {
55  label: string;
56  value: string;
57  subtitle: string;
58}
59 
60interface DetailedCardProps {
61  title: string;
62  items: DetailItem[];
63}
64 
65// ============================================================================
66// STATIC CHART DATA - EXTENSIVE DUMMY DATA FOR PROPER RENDERING
67// ============================================================================
68 
69const USER_GROWTH_DATA = [
70  { name: "Week 1", value: 2400 },
71  { name: "Week 2", value: 3210 },
72  { name: "Week 3", value: 2290 },
73  { name: "Week 4", value: 2000 },
74  { name: "Week 5", value: 2181 },
75  { name: "Week 6", value: 2500 },
76  { name: "Week 7", value: 2100 },
77  { name: "Week 8", value: 2200 },
78  { name: "Week 9", value: 2290 },
79  { name: "Week 10", value: 2000 },
80  { name: "Week 11", value: 2181 },
81  { name: "Week 12", value: 2500 },
82  { name: "Week 13", value: 2100 },
83];
84 
85const REVENUE_TREND_DATA = [
86  { name: "Week 1", value: 4000 },
87  { name: "Week 2", value: 3000 },
88  { name: "Week 3", value: 2000 },
89  { name: "Week 4", value: 2780 },
90  { name: "Week 5", value: 1890 },
91  { name: "Week 6", value: 2390 },
92  { name: "Week 7", value: 3490 },
93  { name: "Week 8", value: 4000 },
94  { name: "Week 9", value: 3500 },
95  { name: "Week 10", value: 4200 },
96  { name: "Week 11", value: 3800 },
97  { name: "Week 12", value: 4500 },
98  { name: "Week 13", value: 4100 },
99];
100 
101// ============================================================================
102// ANIMATION VARIANTS
103// … truncated