import { useState, useEffect } from 'react'; import { Plus, Bot, Phone, TrendingUp, DollarSign, Search, X } 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 { Badge } from '@/components/ui/badge'; import { Head, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import axios from 'axios'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import type { AiAgent, AiAgentStats } from '@/types/ai-agent'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, { title: 'Conversational AI', href: '/ai-agents', }, { title: 'AI Agents', }, ]; export default function AiAgentsDashboard() { const [agents, setAgents] = useState([]); const [loading, setLoading] = useState(true); const [stats, setStats] = useState({}); const [searchTerm, setSearchTerm] = useState(''); const filteredAgents = agents.filter(agent => { if (!searchTerm) return true; const search = searchTerm.toLowerCase(); return ( agent.name.toLowerCase().includes(search) || agent.description?.toLowerCase().includes(search) || agent.type.toLowerCase().includes(search) || agent.model.toLowerCase().includes(search) || agent.phone_number?.toLowerCase().includes(search) ); }); const handleClearSearch = () => { setSearchTerm(''); }; useEffect(() => { loadAgents(); }, []); const loadAgents = async () => { try { const response = await axios.get('/api/v1/ai-agents'); setAgents(response.data.data || []); } catch (error) { console.error('Failed to load AI agents:', error); } finally { setLoading(false); } }; const loadAgentStats = async (agentId: number) => { try { const response = await axios.get(`/api/v1/ai-agents/${agentId}`); setStats(prev => ({ ...prev, [agentId]: response.data.stats })); } catch (error) { console.error('Failed to load agent stats:', error); } }; useEffect(() => { agents.forEach(agent => { loadAgentStats(agent.id); }); }, [agents]); if (loading) { return (
); } return (
{agents.length > 0 && (
setSearchTerm(e.target.value)} className="pl-9 pr-9" /> {searchTerm && ( )}
)}
{agents.length === 0 ? (

No AI Agents Yet

Create your first AI agent to start automating inbound and outbound calls with intelligent conversations

) : filteredAgents.length === 0 ? (

No agents found

No agents match your search criteria "{searchTerm}". Try adjusting your search.

) : (
{filteredAgents.map((agent) => ( router.visit(`/ai-agents/${agent.id}`)} >
{agent.name}
{agent.active ? 'Active' : 'Inactive'}
{agent.description || 'No description'}
Type {agent.type}
Model {agent.model}
Voice {agent.voice}
{agent.phone_number && (
Phone Number {agent.phone_number}
)} {stats[agent.id] && ( <>

Total Calls

{stats[agent.id].total_calls || 0}

Success Rate

{stats[agent.id].success_rate || 0}%

Total Cost

${stats[agent.id].total_cost?.toFixed(2) || '0.00'}

Avg Duration

{Math.round(stats[agent.id].average_duration || 0)}s

)}
))}
)}
); }