[V0_FILE]typescriptreact:file="app/page.tsx" import type { Metadata } from "next" import Dashboard from "@/components/dashboard" export const metadata: Metadata = { title: "CRM Monitoring Dashboard", description: "Monitor CRM leads and campaign throughput time", } export default function DashboardPage() { return } [V0_FILE]typescriptreact:file="components/dashboard.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { LeadChart } from "@/components/lead-chart" import { ThroughputChart } from "@/components/throughput-chart" export default function Dashboard() { return (

Dashboard

Total Leads

2,350

+15.1% from last month

New Leads (30 days)

342

+2.5% from last month

Avg. Throughput Time

3.2 days

-0.5 days from last month

Conversion Rate

12.5%

+2.1% from last month

Lead Acquisition Campaign Throughput Time

) } [V0_FILE]typescriptreact:file="components/lead-chart.tsx" "use client" import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { name: "Jan", leads: 200 }, { name: "Feb", leads: 250 }, { name: "Mar", leads: 300 }, { name: "Apr", leads: 280 }, { name: "May", leads: 320 }, { name: "Jun", leads: 350 }, { name: "Jul", leads: 380 }, ] export function LeadChart() { return ( `${value}`} /> ) } [V0_FILE]typescriptreact:file="components/throughput-chart.tsx" "use client" import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts" const data = [ { name: "Campaign A", throughput: 4.5 }, { name: "Campaign B", throughput: 3.8 }, { name: "Campaign C", throughput: 5.2 }, { name: "Campaign D", throughput: 2.9 }, { name: "Campaign E", throughput: 3.5 }, ] export function ThroughputChart() { return ( `${value} days`} /> ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import "@/styles/globals.css" import type { Metadata } from "next" import type React from "react" // Added import for React import { SidebarProvider } from "@/components/ui/sidebar" import { AppSidebar } from "@/components/app-sidebar" export const metadata: Metadata = { title: { default: "CRM Monitoring Dashboard", template: "%s | CRM Monitoring", }, description: "Monitor CRM leads and campaign throughput time", themeColor: [ { media: "(prefers-color-scheme: light)", color: "white" }, { media: "(prefers-color-scheme: dark)", color: "black" }, ], icons: { icon: "/favicon.ico", shortcut: "/favicon-16x16.png", apple: "/apple-touch-icon.png", }, } export default function RootLayout({ children }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" import { BarChart, Users, Calendar, Settings } from "lucide-react" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, } from "@/components/ui/sidebar" const menuItems = [ { title: "Dashboard", icon: BarChart, url: "/" }, { title: "Leads", icon: Users, url: "/leads" }, { title: "Campaigns", icon: Calendar, url: "/campaigns" }, { title: "Settings", icon: Settings, url: "/settings" }, ] export function AppSidebar() { return (

CRM Monitor

Menu {menuItems.map((item) => ( {item.title} ))} ) }