[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # AI Contact Center UI *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/ai-deologyai/v0-h-call-centre) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/nTWticnzrc8) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/ai-deologyai/v0-h-call-centre](https://vercel.com/ai-deologyai/v0-h-call-centre)** ## Build your app Continue building your app on: **[https://v0.app/chat/nTWticnzrc8](https://v0.app/chat/nTWticnzrc8)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/(dashboard)/analytics/page.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" import { Clock, CheckCircle, TrendingUp, TrendingDown, Users, MessageSquare, Phone, Mail, Download, Calendar, Filter, ChevronDown, ArrowUpRight, AlertTriangle, BarChart3, RefreshCw, } from "lucide-react" import { VolumeChart } from "@/components/analytics/volume-chart" import { SentimentChart } from "@/components/analytics/sentiment-chart" import { TopicsChart } from "@/components/analytics/topics-chart" import { EscalationsChart } from "@/components/analytics/escalations-chart" import { Skeleton } from "@/components/ui/skeleton" const kpiData = [ { title: "Avg Handle Time", value: "8m 24s", change: -12, trend: "down", icon: Clock, description: "vs last period", }, { title: "First Contact Resolution", value: "78.4%", change: 5.2, trend: "up", icon: CheckCircle, description: "vs last period", }, { title: "CSAT Proxy", value: "4.6", change: 0.3, trend: "up", icon: TrendingUp, description: "out of 5.0", }, { title: "AI Containment", value: "64.2%", change: 8.7, trend: "up", icon: MessageSquare, description: "handled by AI", }, { title: "Handover Rate", value: "35.8%", change: -8.7, trend: "down", icon: Users, description: "transferred to human", }, { title: "SLA Compliance", value: "94.2%", change: 1.8, trend: "up", icon: Clock, description: "within target", }, { title: "Backlog", value: "127", change: 23, trend: "up", icon: AlertTriangle, description: "pending conversations", negative: true, }, { title: "Active Agents", value: "24", change: 0, trend: "neutral", icon: Users, description: "online now", }, ] export default function AnalyticsPage() { const [dateRange, setDateRange] = useState("7d") const [channel, setChannel] = useState("all") const [isLoading, setIsLoading] = useState(false) const handleRefresh = () => { setIsLoading(true) setTimeout(() => setIsLoading(false), 1500) } return (

{/* Header */}

Analytics Dashboard

Monitor contact center performance and trends

Export as PDF Export as CSV Export as Excel Schedule Report

{/* Filters */}

24h 7 days 30 days 90 days

{/* KPI Cards */}

{kpiData.map((kpi) => ( {isLoading ? (

) : ( <>

{kpi.title}

{kpi.value} {kpi.change !== 0 && ( {kpi.trend === "up" ? ( ) : kpi.trend === "down" ? ( ) : null} {kpi.change > 0 ? "+" : ""} {kpi.change}% )}

{kpi.description}

)} ))}

{/* Charts Row 1 */}

Volume by Channel Conversation distribution over time

Voice Chat Email

{isLoading ? : }

Sentiment Distribution Customer sentiment across conversations

{isLoading ? : }

{/* Charts Row 2 */}

Top Intents & Topics Most common customer inquiries

{isLoading ? : }

Escalations & Reasons Handover and escalation patterns

{isLoading ? : }

{/* Scheduled Reports */}

Scheduled Reports Automated report delivery

{[ { name: "Weekly Performance Summary", schedule: "Every Monday, 9:00 AM", recipients: "team-leads@omnicare.com", lastSent: "Dec 9, 2024", }, { name: "Daily SLA Report", schedule: "Daily, 6:00 PM", recipients: "ops@omnicare.com", lastSent: "Dec 12, 2024", }, { name: "Monthly Executive Dashboard", schedule: "1st of month, 8:00 AM", recipients: "executives@omnicare.com", lastSent: "Dec 1, 2024", }, ].map((report) => (

{report.name}

{report.schedule}

{report.recipients}

Last sent: {report.lastSent}

))}

) } [V0_FILE]typescriptreact:file="app/(dashboard)/inbox/page.tsx" "use client" import { useState } from "react" import { ConversationList } from "@/components/inbox/conversation-list" import { ConversationPanel } from "@/components/inbox/conversation-panel" import { QueueSidebar } from "@/components/inbox/queue-sidebar" import { ConversationDrawer } from "@/components/inbox/conversation-drawer" import { sampleConversations, type Conversation } from "@/lib/sample-data" export default function InboxPage() { const [selectedConversation, setSelectedConversation] = useState(sampleConversations[0]) const [drawerOpen, setDrawerOpen] = useState(false) return (

{/* Queue Sidebar */} {/* Conversation List */} setSelectedConversation(conv)} /> {/* Conversation Panel */} setDrawerOpen(true)} /> {/* Customer Detail Drawer */} setDrawerOpen(false)} />

) } [V0_FILE]typescriptreact:file="app/(dashboard)/knowledge/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/(dashboard)/knowledge/page.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { ScrollArea } from "@/components/ui/scroll-area" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Search, Plus, ExternalLink, TrendingUp, ThumbsUp, Eye, Edit, MoreVertical, FileText, LinkIcon, Video, Upload, } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" const knowledgeArticles = [ { id: "kb-001", title: "How to Reset Customer Passwords", category: "Account Management", views: 1247, helpful: 234, lastUpdated: "2 days ago", author: "Sarah Chen", type: "article", aiSuggested: 89, }, { id: "kb-002", title: "Billing Dispute Resolution Process", category: "Billing", views: 892, helpful: 178, lastUpdated: "1 week ago", author: "David Park", type: "article", aiSuggested: 156, }, { id: "kb-003", title: "Enterprise SLA Compensation Policy", category: "Enterprise", views: 456, helpful: 89, lastUpdated: "3 days ago", author: "Maria Garcia", type: "article", aiSuggested: 67, }, { id: "kb-004", title: "API Integration Troubleshooting", category: "Technical", views: 2134, helpful: 412, lastUpdated: "5 days ago", author: "Alex Thompson", type: "article", aiSuggested: 234, }, { id: "kb-005", title: "Product Demo Walkthrough", category: "Sales", views: 678, helpful: 123, lastUpdated: "1 day ago", author: "Sarah Chen", type: "video", aiSuggested: 45, }, { id: "kb-006", title: "Cancellation and Refund Guidelines", category: "Billing", views: 1523, helpful: 298, lastUpdated: "4 days ago", author: "David Park", type: "article", aiSuggested: 189, }, ] const categories = [ { name: "All", count: knowledgeArticles.length }, { name: "Account Management", count: 12 }, { name: "Billing", count: 8 }, { name: "Technical", count: 15 }, { name: "Enterprise", count: 6 }, { name: "Sales", count: 9 }, ] export default function KnowledgePage() { const [searchQuery, setSearchQuery] = useState("") const [selectedCategory, setSelectedCategory] = useState("All") const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const filteredArticles = knowledgeArticles.filter((article) => { const matchesSearch = article.title.toLowerCase().includes(searchQuery.toLowerCase()) || article.category.toLowerCase().includes(searchQuery.toLowerCase()) const matchesCategory = selectedCategory === "All" || article.category === selectedCategory return matchesSearch && matchesCategory }) return (

{/* Sidebar - Categories */}

Knowledge Base

Manage support articles and AI training content