Modern Agency Dashboard

1import React, { useState } from "react";
2import Image from "next/image";
3import { motion, AnimatePresence } from "framer-motion";
4import {
5  LayoutDashboard,
6  Package,
7  Repeat,
8  BarChart3,
9  MessageSquare,
10  Users2,
11  Megaphone,
12  Users,
13  Layers,
14  ClipboardList,
15  ShieldCheck,
16  CreditCard,
17  Puzzle,
18  Headphones,
19  HelpCircle,
20  Settings,
21  Search,
22  Bell,
23  ChevronDown,
24  Calendar,
25  Download,
26  Sparkles,
27  MoreHorizontal,
28  Plus,
29  ArrowUpRight,
30  Pencil,
31  RotateCcw,
32  Trash2,
33  Mail,
34  Trophy,
35  Target,
36  User,
37  LogOut,
38  Check,
39  Moon,
40  Sun,
41  type LucideIcon,
42} from "lucide-react";
43 
44/* ------------------------------------------------------------------ */
45/*  Types                                                              */
46/* ------------------------------------------------------------------ */
47 
48interface NavItem {
49  label: string;
50  icon: LucideIcon;
51}
52 
53interface Stat {
54  label: string;
55  value: string;
56  sub?: string;
57}
58 
59type TransactionStatus = "Success" | "Pending" | "Refunded";
60 
61interface Transaction {
62  id: string;
63  customer: string;
64  product: string;
65  status: TransactionStatus;
66  qty: number;
67  price: string;
68  total: string;
69}
70 
71type TimeRange = "Weekly" | "Monthly" | "Yearly";
72type CampaignStatus = "Active" | "Paused" | "Ended";
73 
74interface Campaign {
75  name: string;
76  status: CampaignStatus;
77  budget: string;
78  spent: string;
79}
80 
81interface ChatMessage {
82  id: string;
83  name: string;
84  preview: string;
85  full: string;
86  time: string;
87  unread: boolean;
88}
89 
90/* ------------------------------------------------------------------ */
91/*  Static data                                                        */
92/* ------------------------------------------------------------------ */
93 
94const mainMenu: NavItem[] = [
95  { label: "Dashboard", icon: LayoutDashboard },
96  { label: "Products", icon: Package },
97  { label: "Transactions", icon: Repeat },
98  { label: "Reports & Analytics", icon: BarChart3 },
99  { label: "Messages", icon: MessageSquare },
100  { label: "Team Performance", icon: Users2 },
101  { label: "Campaigns", icon: Megaphone },
102];
103 
104const customersMenu: NavItem[] = [
105  { label: "Customer List", icon: Users },
106  { label: "Channels", icon: Layers },
107  { label: "Order Management", icon: ClipboardList },
108];
109 
110const managementMenu: NavItem[] = [
111  { label: "Roles & Permissions", icon: ShieldCheck },
112  { label: "Billing & Subscription", icon: CreditCard },
113  { label: "Integrations", icon: Puzzle },
114];
115 
116const settingsMenu: NavItem[] = [
117// … truncated