Dashboard 02

1"use client";
2 
3import {
4  LayoutDashboard,
5  FolderKanban,
6  CheckSquare,
7  Map,
8  Users,
9  Bell,
10  Database,
11  Cable,
12  FileText,
13  ShieldCheck,
14  UserCog,
15  Lock,
16  CreditCard,
17  Download,
18  Upload,
19  BarChart3,
20  FileBarChart,
21  MessageSquare,
22} from "lucide-react";
23import {
24  Sidebar,
25  KpiCard,
26  VisitorTrendChart,
27  EngagementHeatmap,
28  PaymentHistoryTable,
29  type Team,
30  type User,
31  type NavSection,
32} from "./components";
33import { DEFAULT_KPI_METRICS } from "./data";
34 
35import { SidebarProvider } from "@/components/ui/sidebar";
36import { LogoIcon } from "../social-icons/icons";
37 
38// =============================================================================
39// DATA
40// =============================================================================
41 
42const teams: Team[] = [
43  {
44    name: "ShadcnShip",
45    plan: "Pro",
46    logo: <LogoIcon className="size-5 invert dark:invert-0" />,
47  },
48];
49 
50const user: User = {
51  name: "Shadcn",
52  email: "shadcn@ship.com",
53  avatar: "https://www.shadcnship.com/images/avatars/avatar-1.webp",
54};
55 
56const navigation: NavSection[] = [
57  {
58    title: "Workspace",
59    items: [
60      {
61        icon: <LayoutDashboard className="size-4" />,
62        label: "Overview",
63        active: true,
64      },
65      { icon: <FolderKanban className="size-4" />, label: "Projects" },
66      { icon: <CheckSquare className="size-4" />, label: "Tasks" },
67      { icon: <Map className="size-4" />, label: "Roadmap" },
68      { icon: <Users className="size-4" />, label: "Audience" },
69      { icon: <Bell className="size-4" />, label: "Notifications" },
70      { icon: <Database className="size-4" />, label: "Database" },
71      { icon: <Cable className="size-4" />, label: "Connections" },
72      { icon: <FileText className="size-4" />, label: "Documentation" },
73    ],
74  },
75  {
76    title: "Ventures",
77    items: [
78      { icon: <ShieldCheck className="size-4" />, label: "Authentication" },
79      { icon: <UserCog className="size-4" />, label: "User Management" },
80      { icon: <Lock className="size-4" />, label: "Security" },
81      { icon: <CreditCard className="size-4" />, label: "Payments" },
82      { icon: <Download className="size-4" />, label: "Import Data" },
83      { icon: <Upload className="size-4" />, label: "Export Data" },
84    ],
85  },
86  {
87    title: "Insights",
88    items: [
89      { icon: <BarChart3 className="size-4" />, label: "Analytics" },
90      { icon: <FileBarChart className="size-4" />, label: "Reports" },
91// … truncated