Modern Ads Dashboard

1"use client";
2 
3import React, { useEffect, useMemo, useRef, useState } from "react";
4import { motion, AnimatePresence } from "motion/react";
5import {
6  Globe,
7  Clock,
8  AlertTriangle,
9  RotateCw,
10  Cpu,
11  Timer,
12  Home,
13  Compass,
14  Megaphone,
15  Layers,
16  Users,
17  BarChart3,
18  Settings,
19  LogOut,
20  Infinity as InfinityIcon,
21  Music2,
22  LayoutDashboard,
23  Calendar,
24  Folder,
25  PieChart,
26  Lightbulb,
27  SlidersHorizontal,
28  ArrowDownUp,
29  Flag,
30  Square,
31  ChevronDown,
32  Bell,
33  Plus,
34  Search,
35  Command,
36  MoreVertical,
37  Info,
38  PanelLeftClose,
39  Check,
40  TrendingUp,
41  TrendingDown,
42} from "lucide-react";
43import { cn } from "@/lib/utils";
44 
45/* ------------------------------------------------------------------ */
46/* Types                                                               */
47/* ------------------------------------------------------------------ */
48 
49type IconType = React.ComponentType<{ className?: string }>;
50 
51type SidebarKey = "overview" | "discover" | "campaigns" | "adsets" | "audience" | "reports" | "google" | "meta" | "tiktok" | "linkedin" | "settings";
52 
53type TopTabKey = "dashboard" | "planner" | "assethub" | "segments" | "insights" | "preferences";
54 
55type CampaignStatus = "ACTIVE" | "PAUSED" | "CANCEL" | "COMPLETED";
56 
57type Campaign = {
58  id: string;
59  name: string;
60  status: CampaignStatus;
61  budget: number;
62  spent: number;
63  conversions: number | null;
64  convRate: number | null;
65  roas: number | null;
66  clicks: number | null;
67  ctr: number | null;
68};
69 
70type SortKey = "name" | "status" | "budget" | "spent" | "conversions" | "convRate" | "roas" | "clicks" | "ctr";
71 
72/* ------------------------------------------------------------------ */
73/* Static data                                                         */
74/* ------------------------------------------------------------------ */
75 
76const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
77 
78const generalNav: { key: SidebarKey; label: string; icon: IconType; badge?: number }[] = [
79  { key: "overview", label: "Overview", icon: Home },
80  { key: "discover", label: "Discover", icon: Compass },
81  { key: "campaigns", label: "Campaigns", icon: Megaphone },
82  { key: "adsets", label: "Ad Sets", icon: Layers, badge: 12 },
83  { key: "audience", label: "Audience", icon: Users },
84  { key: "reports", label: "Reports", icon: BarChart3, badge: 32 },
85];
86 
87const accountNav: { key: SidebarKey; label: string; platform: "google" | "meta" | "tiktok" | "linkedin" }[] = [
88// … truncated