[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/reporting-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Separator } from "@/components/ui/separator" import { Bot, Mail, Phone, Users, Zap, Plus, Trash2 } from "lucide-react" interface ReportingModalProps { open: boolean onOpenChange: (open: boolean) => void } export function ReportingModal({ open, onOpenChange }: ReportingModalProps) { const [emailRecipients, setEmailRecipients] = useState(["john@company.com", "sarah@company.com"]) const [newEmail, setNewEmail] = useState("") const [agentReporting, setAgentReporting] = useState({ lead: true, sales: true, voice: false, qualifier: true, }) const [agentEmailRecipients, setAgentEmailRecipients] = useState({ lead: ["john@company.com"], sales: ["sarah@company.com", "mike@company.com"], voice: [], qualifier: ["john@company.com"], }) const [newAgentEmails, setNewAgentEmails] = useState({ lead: "", sales: "", voice: "", qualifier: "", }) const agents = [ { key: "lead", name: "Lead Agent", icon: Bot, color: "text-blue-500", active: true }, { key: "sales", name: "Sales Agent", icon: Zap, color: "text-orange-500", active: true }, { key: "voice", name: "Voice Agent", icon: Phone, color: "text-purple-500", active: false }, { key: "qualifier", name: "Qualifier Agent", icon: Users, color: "text-green-500", active: true }, ] const addEmailRecipient = () => { if (newEmail && !emailRecipients.includes(newEmail)) { setEmailRecipients([...emailRecipients, newEmail]) setNewEmail("") } } const removeEmailRecipient = (email: string) => { setEmailRecipients(emailRecipients.filter((e) => e !== email)) } const toggleAgentReporting = (agentKey: string) => { setAgentReporting((prev) => ({ ...prev, [agentKey]: !prev[agentKey as keyof typeof prev], })) } const addAgentEmailRecipient = (agentKey: string) => { const email = newAgentEmails[agentKey]?.trim() if (email && !agentEmailRecipients[agentKey as keyof typeof agentEmailRecipients]?.includes(email)) { setAgentEmailRecipients((prev) => ({ ...prev, [agentKey]: [...(prev[agentKey as keyof typeof prev] || []), email], })) setNewAgentEmails((prev) => ({ ...prev, [agentKey]: "", })) } } const removeAgentEmailRecipient = (agentKey: string, email: string) => { setAgentEmailRecipients((prev) => ({ ...prev, [agentKey]: prev[agentKey as keyof typeof prev]?.filter((e) => e !== email) || [], })) } return ( ) } [V0_FILE]typescriptreact:file="components/agent-chat.tsx" isEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Bot, Send, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback } from "@/components/ui/avatar" interface Message { id: string content: string sender: "user" | "agent" timestamp: Date } export function AgentChat() { const [messages, setMessages] = useState([ { id: "1", content: "Hello! I'm your AI assistant. I can help you with lead management, campaign optimization, and answer questions about your dashboard metrics. How can I assist you today?", sender: "agent", timestamp: new Date(Date.now() - 60000), }, ]) const [inputValue, setInputValue] = useState("") const [isTyping, setIsTyping] = useState(false) const [showPresets, setShowPresets] = useState(true) const scrollAreaRef = useRef(null) const presetQuestions = [ "How are my agents performing?", "Show me my lead conversion rates", "Help me optimize my campaigns", "Why is my Voice Agent inactive?", "What should I focus on next?", ] const scrollToBottom = () => { if (scrollAreaRef.current) { const scrollContainer = scrollAreaRef.current.querySelector("[data-radix-scroll-area-viewport]") if (scrollContainer) { scrollContainer.scrollTop = scrollContainer.scrollHeight } } } useEffect(() => { scrollToBottom() }, [messages]) const handleSendMessage = async (messageText?: string) => { const textToSend = messageText || inputValue if (!textToSend.trim()) return const userMessage: Message = { id: Date.now().toString(), content: textToSend, sender: "user", timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInputValue("") setIsTyping(true) setShowPresets(false) // Simulate agent response setTimeout(() => { const agentResponse: Message = { id: (Date.now() + 1).toString(), content: getAgentResponse(textToSend), sender: "agent", timestamp: new Date(), } setMessages((prev) => [...prev, agentResponse]) setIsTyping(false) }, 1500) } const getAgentResponse = (userInput: string): string => { const input = userInput.toLowerCase() if (input.includes("performing") || input.includes("performance")) { return "Your agents are performing well! Here's the breakdown:\n\n• Lead Agent: 3 new replies (+12% vs last week)\n• Sales Agent: 12 positive replies (+25% vs last week)\n• Qualifier Agent: 28 inquiries processed (+8% vs last week)\n• Voice Agent: Currently inactive\n\nYour Sales Agent is showing the strongest growth. Would you like me to help you replicate this success across other agents?" } if (input.includes("conversion") || input.includes("lead")) { return "Your lead conversion metrics look strong:\n\n• 47 new leads captured (last 7 days)\n• 23 qualified leads ready for sales\n• 64% positive reply rate\n• Lead Agent qualified 18 leads (+12% growth)\n\nYour qualification rate is above industry average. Consider activating your Voice Agent to further improve conversion through direct calls." } if (input.includes("campaign") || input.includes("optimize")) { return "Here are optimization opportunities for your 8 active campaigns:\n\n• Current response rate: 18.5% (good performance)\n• Sales Agent generating 25% more positive replies\n• Consider A/B testing subject lines\n• Voice follow-ups could boost conversion\n\nWould you like me to help you create a new campaign or analyze specific campaign performance?" } if (input.includes("voice") || input.includes("inactive")) { return "Your Voice Agent is currently inactive, which means you're missing opportunities for:\n\n• Direct phone conversations with leads\n• Higher conversion rates (voice typically converts 2-3x better)\n• Personal touch that builds trust\n\nActivating Voice Agent could potentially increase your qualified leads by 30-40%. Would you like me to guide you through the setup process?" } if (input.includes("focus") || input.includes("next")) { return "Based on your current performance, here's what I recommend focusing on:\n\n1. **Activate Voice Agent** - Your biggest opportunity for growth\n2. **Scale successful campaigns** - Your Sales Agent is performing exceptionally\n3. **Optimize lead qualification** - You have strong volume, can improve quality\n\nPriority #1 should be Voice Agent activation. This single change could increase your pipeline by 30-40%. Shall I walk you through the setup?" } if (input.includes("help") || input.includes("how")) { return "I can help you with: \n• Lead management and qualification \n• Campaign creation and optimization \n• Agent performance analysis \n• Dashboard navigation \n• Setting up inactive agents \n\nWhat specific area would you like assistance with?" } return ( "I understand you're asking about: \"" + userInput + "\". Based on your current dashboard data, I can provide insights about your leads, campaigns, and agent performance. Could you be more specific about what you'd like to know or accomplish?" ) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } const handlePresetClick = (question: string) => { handleSendMessage(question) } return ( Chat with AI Assistant Get help with your dashboard, leads, and campaigns

{messages.map((message) => (

{message.sender === "agent" ? ( <> ) : ( <> )}

{message.content}

{message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", })}

))} {isTyping && (

)} {/* Preset Questions */} {showPresets && messages.length === 1 && (

Quick questions to get started:

{presetQuestions.map((question, index) => ( ))}

)}

setInputValue(e.target.value)} onKeyPress={handleKeyPress} className="flex-1" />

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { AlertCircle, Bot, ChevronRight, Phone, Settings, TrendingUp, Users, Zap } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ReportingModal } from "../components/reporting-modal" import { AgentChat } from "../components/agent-chat" export default function RevscaleDashboard() { // Mock data - in real app this would come from API const [timeRange, setTimeRange] = useState("7") const [reportingModalOpen, setReportingModalOpen] = useState(false) const [agents] = useState({ lead: { active: true, lastActivity: "2 hours ago", newReplies: 3, kpis: { newReplies: { value: 3, change: 12 }, leadsQualified: { value: 18, change: -5 }, }, }, sales: { active: true, lastActivity: "1 hour ago", newReplies: 7, kpis: { positiveReplies: { value: 12, change: 25 }, meetingsBooked: { value: 4, change: 33 }, }, }, voice: { active: false, lastActivity: null, newReplies: 0, kpis: { callsPlaced: { value: 0, change: 0 }, callsConnected: { value: 0, change: 0 }, }, }, qualifier: { active: true, lastActivity: "30 minutes ago", newReplies: 2, kpis: { inquiriesReceived: { value: 28, change: 8 }, leadsQualified: { value: 15, change: 15 }, }, }, }) const topLevelStats = [ { title: "New Leads", value: "47", subtitle: "Last 7 days", tooltip: "Total leads captured across all channels in the past 7 days", trend: "+12%", link: "/leads", }, { title: "Qualified Leads", value: "23", subtitle: "Ready for sales", tooltip: "Leads that have been qualified by AI agents and are ready for sales outreach", trend: "+8%", link: "/qualified-leads", }, { title: "Active Campaigns", value: "8", subtitle: "Running now", tooltip: "Number of campaigns currently active across all channels", trend: "2 new", link: "/campaigns", }, { title: "Campaign Response Rate", value: "18.5%", subtitle: "Last 30 days", tooltip: "Percentage of campaign recipients who responded positively", trend: "+2.1%", link: "/campaign-analytics", }, { title: "Positive Replies", value: "64%", subtitle: "Of all responses", tooltip: "Percentage of replies classified as positive by AI sentiment analysis", trend: "+5%", link: "/replies", }, ] const quickActions = [ { title: "Activate Voice Agent", description: "Enable AI-powered phone conversations", action: "Enable Voice", show: !agents.voice.active, }, ].filter((action) => action.show) return (

{/* Header */}

Revscale Dashboard

Monitor your automation performance and lead generation

All Systems Active

{/* Top-Level Stats Bar */}

{topLevelStats.map((stat, index) => (

{stat.title}

{stat.value}

{stat.subtitle}

{stat.trend}

{stat.tooltip}

))}

{/* Agent Chat - Fixed height container */}

{/* Agent Sections */}

{/* Lead Agent */}

Lead Agent

{agents.lead.active ? ( Active ) : ( Inactive )} {agents.lead.active ? (

{/* KPIs */}

{agents.lead.kpis.newReplies.value} = 0 ? "text-green-600" : "text-red-600"}`} > {agents.lead.kpis.newReplies.change >= 0 ? "▲" : "▼"} {Math.abs(agents.lead.kpis.newReplies.change)}%

New Replies

{agents.lead.kpis.leadsQualified.value} = 0 ? "text-green-600" : "text-red-600"}`} > {agents.lead.kpis.leadsQualified.change >= 0 ? "▲" : "▼"} {Math.abs(agents.lead.kpis.leadsQualified.change)}%

Leads Qualified

{/* Reply Notification */} {agents.lead.newReplies > 0 && (

{agents.lead.newReplies} New Replies

)} {/* Action Buttons */}

) : (

Agent not configured

)} {/* Sales Agent */}

Sales Agent

{agents.sales.active ? ( Active ) : ( Inactive )} {agents.sales.active ? (

{/* KPIs */}

{agents.sales.kpis.positiveReplies.value} = 0 ? "text-green-600" : "text-red-600"}`} > {agents.sales.kpis.positiveReplies.change >= 0 ? "▲" : "▼"} {Math.abs(agents.sales.kpis.positiveReplies.change)}%

Positive Replies

{agents.sales.kpis.meetingsBooked.value} = 0 ? "text-green-600" : "text-red-600"}`} > {agents.sales.kpis.meetingsBooked.change >= 0 ? "▲" : "▼"} {Math.abs(agents.sales.kpis.meetingsBooked.change)}%

Meetings Booked

{/* Reply Notification */} {agents.sales.newReplies > 0 && (

{agents.sales.newReplies} New Replies

)} {/* Action Buttons */}

) : (

Agent not configured

)} {/* Voice Agent */}

Voice Agent

{agents.voice.active ? ( Active ) : ( Inactive )} {agents.voice.active ? (

{/* KPIs */}

{agents.voice.kpis.callsPlaced.value} = 0 ? "text-green-600" : "text-red-600"}`} > {agents.voice.kpis.callsPlaced.change >= 0 ? "▲" : "▼"} {Math.abs(agents.voice.kpis.callsPlaced.change)}%

Calls Placed

{agents.voice.kpis.callsConnected.value} = 0 ? "text-green-600" : "text-red-600"}`} > {agents.voice.kpis.callsConnected.change >= 0 ? "▲" : "▼"} {Math.abs(agents.voice.kpis.callsConnected.change)}%

Calls Connected

{/* Action Buttons */}

) : (

0 —

Calls Placed

Enable AI phone conversations

)} {/* Qualifier Agent */}

Qualifier Agent

{agents.qualifier.active ? ( Active ) : ( Inactive )} {agents.qualifier.active ? (

{/* KPIs */}

{agents.qualifier.kpis.inquiriesReceived.value} = 0 ? "text-green-600" : "text-red-600"}`} > {agents.qualifier.kpis.inquiriesReceived.change >= 0 ? "▲" : "▼"} {Math.abs(agents.qualifier.kpis.inquiriesReceived.change)}%

Inquiries Received

{agents.qualifier.kpis.leadsQualified.value} = 0 ? "text-green-600" : "text-red-600"}`} > {agents.qualifier.kpis.leadsQualified.change >= 0 ? "▲" : "▼"} {Math.abs(agents.qualifier.kpis.leadsQualified.change)}%

Leads Qualified

{/* Reply Notification */} {agents.qualifier.newReplies > 0 && (

{agents.qualifier.newReplies} New Replies

)} {/* Action Buttons */}

) : (

Agent not configured

)}

{/* Quick Actions */} {quickActions.length > 0 && ( Quick Actions Complete your setup to maximize lead generation

{quickActions.map((action, index) => (

{action.title}

{action.description}

))}

)}

) }