[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { SidebarProvider } from "@/components/ui/sidebar" import { AppSidebar } from "@/components/app-sidebar" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Call Analysis Platform", description: "AI-powered call recording analysis platform", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" "use client" import { BarChart3, FileAudio, Home, Upload, Users, Settings, HelpCircle, LogOut } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarSeparator, } from "@/components/ui/sidebar" import { usePathname } from "next/navigation" import Link from "next/link" export function AppSidebar() { const pathname = usePathname() const isActive = (path: string) => { return pathname === path } return (

CallInsight

Navigation Dashboard Recordings Upload Analytics Agents Settings Settings Help & Support

John Doe

Admin

) } [V0_FILE]typescriptreact:file="app/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BarChart, LineChart, PieChart } from "@/components/charts" import { RecentRecordings } from "@/components/recent-recordings" import { PerformanceMetrics } from "@/components/performance-metrics" import { DashboardHeader } from "@/components/dashboard-header" export default function Dashboard() { return (

Total Recordings

1,248

+12% from last month

Avg. Call Duration

5m 42s

-8% from last month

Adherence Rate

87.5%

+5.2% from last month

Customer Satisfaction

4.2/5

+0.3 from last month

Overview Adherence Agent Performance Customer Metrics

Call Volume Daily call volume over the past 30 days Call Categories Distribution of call types

Recent Recordings Latest analyzed call recordings Performance Metrics Key performance indicators

Adherence Trends Script adherence over time Adherence Reasons Common reasons for non-adherence

Agent Performance Performance metrics by agent Agent Improvement Performance improvement over time

Customer Sentiment Sentiment analysis from call recordings Customer Issues Common customer concerns

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" "use client" import { Bell, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { ModeToggle } from "@/components/mode-toggle" export function DashboardHeader() { return (

Notifications New recording analyzed: Customer Support #1234 Agent performance report ready: May 2023 System update scheduled for tomorrow

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/charts.tsx" "use client" import { Line, LineChart as RechartsLineChart, Bar, BarChart as RechartsBarChart, Pie, PieChart as RechartsPieChart, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" // Sample data for charts const lineData = [ { name: "Jan", value: 400 }, { name: "Feb", value: 300 }, { name: "Mar", value: 600 }, { name: "Apr", value: 800 }, { name: "May", value: 500 }, { name: "Jun", value: 900 }, { name: "Jul", value: 700 }, ] const barData = [ { name: "Script deviation", value: 35 }, { name: "Missing info", value: 28 }, { name: "Incorrect info", value: 18 }, { name: "Skipped sections", value: 12 }, { name: "Other", value: 7 }, ] const pieData = [ { name: "Support", value: 40 }, { name: "Sales", value: 30 }, { name: "Technical", value: 20 }, { name: "Billing", value: 10 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"] export function LineChart() { return ( ) } export function BarChart() { return ( {barData.map((entry, index) => ( ))} ) } export function PieChart() { return ( `${name} ${(percent * 100).toFixed(0)}%`} > {pieData.map((entry, index) => ( ))} ) } [V0_FILE]typescriptreact:file="components/recent-recordings.tsx" "use client" import { FileAudio, MoreHorizontal, Play } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" const recordings = [ { id: "rec-001", title: "Customer Support Call #1234", date: "2023-05-15", duration: "4:32", agent: "John Smith", sentiment: "positive", }, { id: "rec-002", title: "Technical Support #5678", date: "2023-05-14", duration: "8:15", agent: "Sarah Johnson", sentiment: "neutral", }, { id: "rec-003", title: "Billing Inquiry #9012", date: "2023-05-13", duration: "3:45", agent: "Michael Brown", sentiment: "negative", }, { id: "rec-004", title: "Sales Call #3456", date: "2023-05-12", duration: "6:20", agent: "Emily Davis", sentiment: "positive", }, ] export function RecentRecordings() { return (

{recordings.map((recording) => (

{recording.title}

{recording.date} • {recording.duration} • {recording.agent}

{recording.sentiment} Actions View Analysis Download Recording Share Delete

))}

) } [V0_FILE]typescriptreact:file="components/performance-metrics.tsx" "use client" import { Progress } from "@/components/ui/progress" const metrics = [ { name: "Script Adherence", value: 87, target: 90, change: "+5%", }, { name: "Customer Satisfaction", value: 84, target: 85, change: "+2%", }, { name: "Call Resolution Rate", value: 92, target: 90, change: "+3%", }, { name: "Average Handle Time", value: 78, target: 80, change: "-4%", }, ] export function PerformanceMetrics() { return (

{metrics.map((metric) => (

{metric.name}

Target: {metric.target}% • Change: {metric.change}

{metric.value}%

))}

) } [V0_FILE]typescriptreact:file="app/recordings/page.tsx" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { ChevronDown, Download, FileAudio, Filter, MoreHorizontal, Play, Search, SlidersHorizontal } from "lucide-react" import { Badge } from "@/components/ui/badge" import { DashboardHeader } from "@/components/dashboard-header" export default function RecordingsPage() { return (

Recordings

Filter by All Recordings Customer Support Technical Support Sales Calls Billing Inquiries Sort by Date (Newest first) Date (Oldest first) Duration (Longest first) Duration (Shortest first)

Recording Date Duration Agent Adherence Sentiment Actions {recordings.map((recording) => (

{recording.title}

{recording.date} {recording.duration} {recording.agent} {recording.adherence}% {recording.sentiment}

Actions View Analysis Download Recording Share Delete

))}

) } function getAdherenceBadgeVariant(adherence: number) { if (adherence >= 90) return "default" if (adherence >= 75) return "secondary" return "destructive" } const recordings = [ { id: "rec-001", title: "Customer Support Call #1234", date: "2023-05-15", duration: "4:32", agent: "John Smith", adherence: 92, sentiment: "Positive", }, { id: "rec-002", title: "Technical Support #5678", date: "2023-05-14", duration: "8:15", agent: "Sarah Johnson", adherence: 85, sentiment: "Neutral", }, { id: "rec-003", title: "Billing Inquiry #9012", date: "2023-05-13", duration: "3:45", agent: "Michael Brown", adherence: 68, sentiment: "Negative", }, { id: "rec-004", title: "Sales Call #3456", date: "2023-05-12", duration: "6:20", agent: "Emily Davis", adherence: 94, sentiment: "Positive", }, { id: "rec-005", title: "Customer Complaint #7890", date: "2023-05-11", duration: "5:45", agent: "David Wilson", adherence: 72, sentiment: "Negative", }, { id: "rec-006", title: "Product Inquiry #2345", date: "2023-05-10", duration: "4:10", agent: "Jennifer Lee", adherence: 88, sentiment: "Neutral", }, { id: "rec-007", title: "Technical Support #6789", date: "2023-05-09", duration: "7:30", agent: "Robert Taylor", adherence: 90, sentiment: "Positive", }, { id: "rec-008", title: "Sales Follow-up #0123", date: "2023-05-08", duration: "3:25", agent: "Amanda Clark", adherence: 95, sentiment: "Positive", }, ] [V0_FILE]typescriptreact:file="app/upload/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { DashboardHeader } from "@/components/dashboard-header" import { FileAudio, Upload, X } from "lucide-react" import { Progress } from "@/components/ui/progress" export default function UploadPage() { const [file, setFile] = useState(null) const [uploading, setUploading] = useState(false) const [progress, setProgress] = useState(0) const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { setFile(e.target.files[0]) } } const handleUpload = () => { if (!file) return setUploading(true) setProgress(0) // Simulate upload progress const interval = setInterval(() => { setProgress((prev) => { if (prev >= 100) { clearInterval(interval) setUploading(false) return 100 } return prev + 10 }) }, 500) } const handleRemoveFile = () => { setFile(null) setProgress(0) setUploading(false) } return (

Upload Recording

Upload Audio Recording Upload a call recording for AI analysis

Audio File

{!file ? ( <>

Drag and drop your audio file here or click to browse

Supports MP3, WAV, M4A up to 100MB

) : (

{file.name}

{(file.size / 1024 / 1024).toFixed(2)} MB

{uploading && (

Uploading... {progress}%

)}

Recording Title

Agent

Call Category

Notes

</div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline">Cancel</Button>
              <Button onClick={handleUpload} disabled={!file || uploading}>
                <Upload className="mr-2 h-4 w-4" />
                {uploading ? "Uploading..." : "Upload Recording"}
              </Button>
            </CardFooter>
          </Card>
          <Card className="col-span-3">
            <CardHeader>
              <CardTitle>Analysis Options</CardTitle>
              <CardDescription>Configure how this recording will be analyzed</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="script">Reference Script</Label>
                <Select defaultValue="default">
                  <SelectTrigger id="script">
                    <SelectValue placeholder="Select script" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="default">Default Customer Support Script</SelectItem>
                    <SelectItem value="technical">Technical Support Script</SelectItem>
                    <SelectItem value="sales">Sales Script</SelectItem>
                    <SelectItem value="billing">Billing Support Script</SelectItem>
                    <SelectItem value="none">No Script (General Analysis)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="analysis-depth">Analysis Depth</Label>
                <Select defaultValue="standard">
                  <SelectTrigger id="analysis-depth">
                    <SelectValue placeholder="Select depth" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="basic">Basic (Quick Analysis)</SelectItem>
                    <SelectItem value="standard">Standard (Recommended)</SelectItem>
                    <SelectItem value="deep">Deep (Detailed Analysis)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="focus-areas">Focus Areas</Label>
                <Select defaultValue="all">
                  <SelectTrigger id="focus-areas">
                    <SelectValue placeholder="Select focus areas" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Areas</SelectItem>
                    <SelectItem value="adherence">Script Adherence Only</SelectItem>
                    <SelectItem value="agent">Agent Performance Only</SelectItem>
                    <SelectItem value="customer">Customer Sentiment Only</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="notification">Notification</Label>
                <Select defaultValue="email">
                  <SelectTrigger id="notification">
                    <SelectValue placeholder="Select notification method" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">No Notification</SelectItem>
                    <SelectItem value="email">Email</SelectItem>
                    <SelectItem value="dashboard">Dashboard Only</SelectItem>
                    <SelectItem value="both">Email & Dashboard</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/analytics/page.tsx"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BarChart, LineChart, PieChart } from "@/components/charts"
import { DashboardHeader } from "@/components/dashboard-header"

export default function AnalyticsPage() {
  return (
    <div className="flex flex-col">
      <DashboardHeader />
      <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
        <div className="flex items-center justify-between">
          <h2 className="text-3xl font-bold tracking-tight">Analytics</h2>
        </div>
        <Tabs defaultValue="adherence" className="space-y-4">
          <TabsList>
            <TabsTrigger value="adherence">Adherence Analysis</TabsTrigger>
            <TabsTrigger value="agent">Agent Performance</TabsTrigger>
            <TabsTrigger value="customer">Customer Analysis</TabsTrigger>
            <TabsTrigger value="trends">Trends</TabsTrigger>
          </TabsList>
          <TabsContent value="adherence" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Average Adherence</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">87.5%</div>
                  <p className="text-xs text-muted-foreground">+5.2% from last month</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Top Adherence Issue</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">Script Deviation</div>
                  <p className="text-xs text-muted-foreground">35% of all issues</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Improvement Rate</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">+12.3%</div>
                  <p className="text-xs text-muted-foreground">Quarter-over-quarter</p>
                </CardContent>
              </Card>
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <Card className="col-span-1">
                <CardHeader>
                  <CardTitle>Adherence by Script Section</CardTitle>
                  <CardDescription>Breakdown of adherence by script section</CardDescription>
                </CardHeader>
                <CardContent className="pl-2">
                  <BarChart />
                </CardContent>
              </Card>
              <Card className="col-span-1">
                <CardHeader>
                  <CardTitle>Adherence Reasons</CardTitle>
                  <CardDescription>Common reasons for non-adherence</CardDescription>
                </CardHeader>
                <CardContent>
                  <PieChart />
                </CardContent>
              </Card>
            </div>
          </TabsContent>
          <TabsContent value="agent" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Top Performer</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">Emily Davis</div>
                  <p className="text-xs text-muted-foreground">94% adherence rate</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Needs Improvement</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">Michael Brown</div>
                  <p className="text-xs text-muted-foreground">68% adherence rate</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Most Improved</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">Sarah Johnson</div>
                  <p className="text-xs text-muted-foreground">+15% improvement</p>
                </CardContent>
              </Card>
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <Card className="col-span-1">
                <CardHeader>
                  <CardTitle>Agent Performance Comparison</CardTitle>
                  <CardDescription>Performance metrics by agent</CardDescription>
                </CardHeader>
                <CardContent className="pl-2">
                  <BarChart />
                </CardContent>
              </Card>
              <Card className="col-span-1">
                <CardHeader>
                  <CardTitle>Agent Improvement Trends</CardTitle>
                  <CardDescription>Performance improvement over time</CardDescription>
                </CardHeader>
                <CardContent>
                  <LineChart />
                </CardContent>
              </Card>
            </div>
          </TabsContent>
          <TabsContent value="customer" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Average Sentiment</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">Positive</div>
                  <p className="text-xs text-muted-foreground">65% of all calls</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Top Customer Issue</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">Billing Questions</div>
                  <p className="text-xs text-muted-foreground">28% of all calls</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Resolution Rate</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">92%</div>
                  <p className="text-xs text-muted-foreground">+3% from last month</p>
                </CardContent>
              </Card>
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <Card className="col-span-1">
                <CardHeader>
                  <CardTitle>Customer Sentiment Trends</CardTitle>
                  <CardDescription>Sentiment analysis over time</CardDescription>
                </CardHeader>
                <CardContent className="pl-2">
                  <LineChart />
                </CardContent>
              </Card>
              <Card className="col-span-1">
                <CardHeader>
                  <CardTitle>Customer Issues</CardTitle>
                  <CardDescription>Distribution of customer issues</CardDescription>
                </CardHeader>
                <CardContent>
                  <PieChart />
                </CardContent>
              </Card>
            </div>
          </TabsContent>
          <TabsContent value="trends" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <Card className="col-span-1">
                <CardHeader>
                  <CardTitle>Call Volume Trends</CardTitle>
                  <CardDescription>Call volume over time</CardDescription>
                </CardHeader>
                <CardContent className="pl-2">
                  <LineChart />
                </CardContent>
              </Card>
              <Card className="col-span-1">
                <CardHeader>
                  <CardTitle>Performance Metrics Over Time</CardTitle>
                  <CardDescription>Key metrics trending</CardDescription>
                </CardHeader>
                <CardContent>
                  <LineChart />
                </CardContent>
              </Card>
            </div>
            <Card>
              <CardHeader>
                <CardTitle>Quarterly Comparison</CardTitle>
                <CardDescription>Performance comparison by quarter</CardDescription>
              </CardHeader>
              <CardContent className="pl-2">
                <BarChart />
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;

/* Sidebar variables */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

/* Chart colors */
    --chart-1: 221.2 83.2% 53.3%;
    --chart-2: 142.1 76.2% 36.3%;
    --chart-3: 47.9 95.8% 53.1%;
    --chart-4: 316.6 73.1% 52.4%;
    --chart-5: 189.5 75.5% 40.8%;
  }

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 224.3 76.3% 48%;

/* Sidebar variables */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 0 0% 98%;
    --sidebar-primary-foreground: 240 5.9% 10%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 224.3 76.3% 48%;

/* Chart colors */
    --chart-1: 217.2 91.2% 59.8%;
    --chart-2: 142.1 70.6% 45.3%;
    --chart-3: 47.9 95.8% 53.1%;
    --chart-4: 316.6 73.1% 52.4%;
    --chart-5: 189.5 75.5% 40.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="app/recordings/[id]/page.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { BarChart, LineChart } from "@/components/charts"
import { DashboardHeader } from "@/components/dashboard-header"
import { ArrowLeft, Download, FileAudio, Play, Share2 } from "lucide-react"
import Link from "next/link"

export default function RecordingDetailPage({ params }: { params: { id: string } }) {
  // In a real app, you would fetch the recording data based on the ID
  const recordingId = params.id

return (
    <div className="flex flex-col">
      <DashboardHeader />
      <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
        <div className="flex items-center gap-2">
          <Button variant="outline" size="icon" asChild>
            <Link href="/recordings">
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <h2 className="text-3xl font-bold tracking-tight">Customer Support Call #1234</h2>
        </div>

<div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
          <div className="flex flex-col md:flex-row gap-2 md:items-center">
            <Badge variant="outline" className="w-fit">
              ID: {recordingId}
            </Badge>
            <Badge variant="outline" className="w-fit">
              May 15, 2023
            </Badge>
            <Badge variant="outline" className="w-fit">
              4:32
            </Badge>
            <Badge variant="outline" className="w-fit">
              John Smith
            </Badge>
            <Badge className="w-fit">Positive</Badge>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" size="sm">
              <Play className="mr-2 h-4 w-4" />
              Play
            </Button>
            <Button variant="outline" size="sm">
              <Download className="mr-2 h-4 w-4" />
              Download
            </Button>
            <Button variant="outline" size="sm">
              <Share2 className="mr-2 h-4 w-4" />
              Share
            </Button>
          </div>
        </div>

<Card>
          <CardHeader>
            <CardTitle>Audio Waveform</CardTitle>
            <CardDescription>Visual representation of the call recording</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-24 bg-muted/50 rounded-md flex items-center justify-center">
              <FileAudio className="h-8 w-8 text-muted-foreground" />
              <span className="ml-2 text-muted-foreground">Audio waveform visualization</span>
            </div>
          </CardContent>
        </Card>

<Tabs defaultValue="summary" className="space-y-4">
          <TabsList>
            <TabsTrigger value="summary">Summary</TabsTrigger>
            <TabsTrigger value="adherence">Adherence Analysis</TabsTrigger>
            <TabsTrigger value="agent">Agent Performance</TabsTrigger>
            <TabsTrigger value="customer">Customer Analysis</TabsTrigger>
            <TabsTrigger value="transcript">Transcript</TabsTrigger>
          </TabsList>

<TabsContent value="summary" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Adherence Score</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">92%</div>
                  <p className="text-xs text-muted-foreground">+5% above average</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Agent Performance</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">4.5/5</div>
                  <p className="text-xs text-muted-foreground">Top 15% of agents</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Customer Sentiment</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">Positive</div>
                  <p className="text-xs text-muted-foreground">85% positive indicators</p>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Resolution Status</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">Resolved</div>
                  <p className="text-xs text-muted-foreground">First call resolution</p>
                </CardContent>
              </Card>
            </div>

<Card>
              <CardHeader>
                <CardTitle>Call Summary</CardTitle>
                <CardDescription>AI-generated summary of the call</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm">
                  Customer called regarding an issue with their recent order #45678. The customer was concerned about a
                  delayed shipment. Agent John verified the customer's information and checked the order status. The
                  agent explained that the delay was due to a temporary warehouse issue and provided an updated delivery
                  estimate. The agent offered a 10% discount on the next order as compensation for the inconvenience.
                  The customer accepted the solution and expressed satisfaction with the resolution.
                </p>
                <div className="mt-4 space-y-2">
                  <h4 className="text-sm font-medium">Key Points:</h4>
                  <ul className="list-disc pl-5 text-sm space-y-1">
                    <li>Order #45678 delayed shipment</li>
                    <li>Warehouse issue identified as cause</li>
                    <li>New delivery estimate provided</li>
                    <li>10% discount offered as compensation</li>
                    <li>Customer satisfied with resolution</li>
                  </ul>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="adherence" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Script Adherence Analysis</CardTitle>
                <CardDescription>Detailed breakdown of script adherence</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <h4 className="text-sm font-medium">Overall Adherence</h4>
                    <span className="text-sm font-medium">92%</span>
                  </div>
                  <Progress value={92} className="h-2" />
                </div>

<div className="space-y-4">
                  <h4 className="text-sm font-medium">Section Breakdown</h4>
                  <div className="space-y-3">
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Introduction</span>
                        <span className="text-sm font-medium">100%</span>
                      </div>
                      <Progress value={100} className="h-2" />
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Verification</span>
                        <span className="text-sm font-medium">95%</span>
                      </div>
                      <Progress value={95} className="h-2" />
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Problem Identification</span>
                        <span className="text-sm font-medium">90%</span>
                      </div>
                      <Progress value={90} className="h-2" />
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Solution Presentation</span>
                        <span className="text-sm font-medium">85%</span>
                      </div>
                      <Progress value={85} className="h-2" />
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between">
                        <span className="text-sm">Closing</span>
                        <span className="text-sm font-medium">90%</span>
                      </div>
                      <Progress value={90} className="h-2" />
                    </div>
                  </div>
                </div>

<div className="space-y-4">
                  <h4 className="text-sm font-medium">Deviation Points</h4>
                  <div className="space-y-3">
                    <div className="rounded-md border p-3">
                      <div className="flex justify-between">
                        <span className="text-sm font-medium">1:45</span>
                        <Badge variant="outline">Minor</Badge>
                      </div>
                      <p className="mt-1 text-sm text-muted-foreground">
                        Agent skipped asking if customer had contacted support previously about this issue.
                      </p>
                    </div>
                    <div className="rounded-md border p-3">
                      <div className="flex justify-between">
                        <span className="text-sm font-medium">3:12</span>
                        <Badge variant="outline">Minor</Badge>
                      </div>
                      <p className="mt-1 text-sm text-muted-foreground">
                        Agent used slightly different wording when explaining company policy.
                      </p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Adherence Trends</CardTitle>
                <CardDescription>Historical adherence performance</CardDescription>
              </CardHeader>
              <CardContent>
                <LineChart />
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="agent" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle>Agent Performance Metrics</CardTitle>
                  <CardDescription>Key performance indicators for this call</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <h4 className="text-sm font-medium">Communication Clarity</h4>
                      <span className="text-sm font-medium">4.5/5</span>
                    </div>
                    <Progress value={90} className="h-2" />
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <h4 className="text-sm font-medium">Problem Solving</h4>
                      <span className="text-sm font-medium">4.8/5</span>
                    </div>
                    <Progress value={96} className="h-2" />
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <h4 className="text-sm font-medium">Empathy</h4>
                      <span className="text-sm font-medium">4.2/5</span>
                    </div>
                    <Progress value={84} className="h-2" />
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <h4 className="text-sm font-medium">Product Knowledge</h4>
                      <span className="text-sm font-medium">4.7/5</span>
                    </div>
                    <Progress value={94} className="h-2" />
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <h4 className="text-sm font-medium">Resolution Efficiency</h4>
                      <span className="text-sm font-medium">4.5/5</span>
                    </div>
                    <Progress value={90} className="h-2" />
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Agent Improvement Areas</CardTitle>
                  <CardDescription>Suggested areas for improvement</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="rounded-md border p-3">
                    <h4 className="text-sm font-medium">Empathy Expression</h4>
                    <p className="mt-1 text-sm text-muted-foreground">
                      Agent could improve on expressing empathy when customer mentioned frustration with the delay.
                      Consider using more empathetic language like "I understand how frustrating this must be for you."
                    </p>
                  </div>
                  <div className="rounded-md border p-3">
                    <h4 className="text-sm font-medium">Proactive Information</h4>
                    <p className="mt-1 text-sm text-muted-foreground">
                      Agent could have proactively offered order tracking information without the customer having to ask
                      for it.
                    </p>
                  </div>
                  <div className="rounded-md border p-3">
                    <h4 className="text-sm font-medium">Call Control</h4>
                    <p className="mt-1 text-sm text-muted-foreground">
                      Agent allowed some tangential conversation that extended call time. Gentle redirection techniques
                      could improve efficiency.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>

<Card>
              <CardHeader>
                <CardTitle>Agent Performance Trend</CardTitle>
                <CardDescription>Performance metrics over time</CardDescription>
              </CardHeader>
              <CardContent>
                <LineChart />
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="customer" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle>Customer Sentiment Analysis</CardTitle>
                  <CardDescription>Emotional analysis throughout the call</CardDescription>
                </CardHeader>
                <CardContent>
                  <LineChart />
                  <div className="mt-4 space-y-4">
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium">Sentiment Breakdown</h4>
                      <div className="grid grid-cols-3 gap-2 text-center">
                        <div className="rounded-md bg-green-100 dark:bg-green-900/20 p-2">
                          <span className="text-sm font-medium text-green-700 dark:text-green-300">Positive</span>
                          <p className="text-2xl font-bold text-green-700 dark:text-green-300">65%</p>
                        </div>
                        <div className="rounded-md bg-gray-100 dark:bg-gray-800 p-2">
                          <span className="text-sm font-medium">Neutral</span>
                          <p className="text-2xl font-bold">25%</p>
                        </div>
                        <div className="rounded-md bg-red-100 dark:bg-red-900/20 p-2">
                          <span className="text-sm font-medium text-red-700 dark:text-red-300">Negative</span>
                          <p className="text-2xl font-bold text-red-700 dark:text-red-300">10%</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Customer Concerns</CardTitle>
                  <CardDescription>Key issues raised by the customer</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="rounded-md border p-3">
                      <h4 className="text-sm font-medium">Delivery Delay</h4>
                      <p className="mt-1 text-sm text-muted-foreground">
                        Primary concern was about the delayed shipment of order #45678. Customer expressed frustration
                        about lack of communication regarding the delay.
                      </p>
                    </div>
                    <div className="rounded-md border p-3">
                      <h4 className="text-sm font-medium">Delivery Timeline</h4>
                      <p className="mt-1 text-sm text-muted-foreground">
                        Customer was concerned about when they would receive their order, as they needed the items for
                        an upcoming event.
                      </p>
                    </div>
                    <div className="rounded-md border p-3">
                      <h4 className="text-sm font-medium">Compensation</h4>
                      <p className="mt-1 text-sm text-muted-foreground">
                        Customer inquired about possible compensation for the inconvenience caused by the delay.
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

<Card>
              <CardHeader>
                <CardTitle>Customer Satisfaction Indicators</CardTitle>
                <CardDescription>Factors affecting customer satisfaction</CardDescription>
              </CardHeader>
              <CardContent>
                <BarChart />
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="transcript" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Call Transcript</CardTitle>
                <CardDescription>Full transcript with timestamps and speaker identification</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-4">
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">0:00</div>
                    <div className="flex-1">
                      <p className="font-medium">Agent (John)</p>
                      <p className="text-sm">
                        Thank you for calling customer support. My name is John. How may I assist you today?
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">0:08</div>
                    <div className="flex-1">
                      <p className="font-medium">Customer</p>
                      <p className="text-sm">
                        Hi, I'm calling about my order. It was supposed to arrive yesterday, but I still haven't
                        received it.
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">0:15</div>
                    <div className="flex-1">
                      <p className="font-medium">Agent (John)</p>
                      <p className="text-sm">
                        I'm sorry to hear that. I'd be happy to look into this for you. May I have your order number,
                        please?
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">0:22</div>
                    <div className="flex-1">
                      <p className="font-medium">Customer</p>
                      <p className="text-sm">Yes, it's 45678.</p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">0:25</div>
                    <div className="flex-1">
                      <p className="font-medium">Agent (John)</p>
                      <p className="text-sm">
                        Thank you. And could you please verify your email address on the account?
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">0:30</div>
                    <div className="flex-1">
                      <p className="font-medium">Customer</p>
                      <p className="text-sm">It's customer@example.com</p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">0:34</div>
                    <div className="flex-1">
                      <p className="font-medium">Agent (John)</p>
                      <p className="text-sm">
                        Perfect, I've located your order. Let me check the status for you... I see that there was a
                        delay at our warehouse. I apologize for the inconvenience.
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">0:50</div>
                    <div className="flex-1">
                      <p className="font-medium">Customer</p>
                      <p className="text-sm">That's frustrating. I needed those items for this weekend.</p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">0:55</div>
                    <div className="flex-1">
                      <p className="font-medium">Agent (John)</p>
                      <p className="text-sm">
                        I understand your frustration. According to our system, your order has been shipped and should
                        arrive by tomorrow. Would you like me to send you the tracking information?
                      </p>
                    </div>
                  </div>
                  <div className="flex gap-4">
                    <div className="w-16 shrink-0 text-sm text-muted-foreground">1:10</div>
                    <div className="flex-1">
                      <p className="font-medium">Customer</p>
                      <p className="text-sm">Yes, please.</p>
                    </div>
                  </div>
                  <div className="text-center text-sm text-muted-foreground py-2">[Transcript continues...]</div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/agents/page.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DashboardHeader } from "@/components/dashboard-header"
import { Download, Search, SlidersHorizontal, UserPlus } from "lucide-react"
import { Input } from "@/components/ui/input"

export default function AgentsPage() {
  return (
    <div className="flex flex-col">
      <DashboardHeader />
      <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
        <div className="flex items-center justify-between">
          <h2 className="text-3xl font-bold tracking-tight">Agents</h2>
          <div className="flex items-center space-x-2">
            <Button>
              <UserPlus className="mr-2 h-4 w-4" />
              Add Agent
            </Button>
          </div>
        </div>
        
        <div className="flex flex-col space-y-4 md:flex-row md:items-center md:justify-between md:space-y-0">
          <div className="flex items-center space-x-2">
            <div className="relative">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                type="search"
                placeholder="Search agents..."
                className="w-[200px] lg:w-[300px] pl-8"
              />
            </div>
            <Button variant="outline" size="sm" className="h-9">
              <SlidersHorizontal className="mr-2 h-4 w-4" />
              Filter
            </Button>
            <Button variant="outline" size="sm" className="h-9">
              <Download className="mr-2 h-4 w-4" />
              Export
            </Button>
          </div>
        </div>
        
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Agents</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">24</div>
              <p className="text-xs text-muted-foreground">
                +2 from last month
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Avg. Adherence</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">87.5%</div>
              <p className="text-xs text-muted-foreground">
                +5.2% from last month
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Top Performer</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">Emily Davis</div>
              <p className="text-xs text-muted-foreground">
                94% adherence rate
              </p>\
</article></body></html>