import { useState, useEffect } from 'react'; import { History, Phone, Clock, DollarSign, Filter, Download, Eye } from 'lucide-react'; import { Head } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { ScrollArea } from '@/components/ui/scroll-area'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import axios from 'axios'; import type { AiAgentCall, AiAgentConversation } from '@/types/ai-agent'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'Conversational AI', href: '/ai-agents' }, { title: 'Call History', href: '' }, ]; export default function AiAgentCalls() { const [calls, setCalls] = useState([]); const [loading, setLoading] = useState(true); const [selectedCall, setSelectedCall] = useState(null); const [transcript, setTranscript] = useState(''); const [showTranscript, setShowTranscript] = useState(false); const [filters, setFilters] = useState({ status: 'all', direction: 'all', from_date: '', to_date: '', }); useEffect(() => { loadCalls(); }, [filters]); const loadCalls = async () => { try { const params = new URLSearchParams(); Object.entries(filters).forEach(([key, value]) => { if (value && value !== 'all') params.append(key, value); }); const response = await axios.get(`/api/v1/ai-agent-calls?${params.toString()}`); setCalls(response.data.data || []); } catch (error) { console.error('Failed to load calls:', error); } finally { setLoading(false); } }; const viewTranscript = async (call: AiAgentCall) => { try { const response = await axios.get(`/api/v1/ai-agent-calls/${call.id}/transcript`); setSelectedCall(call); setTranscript(response.data.transcript); setShowTranscript(true); } catch (error) { console.error('Failed to load transcript:', error); } }; const formatDuration = (seconds: number | null) => { if (!seconds) return '-'; const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins}:${secs.toString().padStart(2, '0')}`; }; const getStatusColor = (status: string) => { switch (status) { case 'completed': return 'default'; case 'in-progress': return 'secondary'; case 'failed': return 'destructive'; default: return 'outline'; } }; if (loading) { return (

); } return (

{/* Header */}

{/* Filters */} Filters

setFilters({ ...filters, from_date: e.target.value })} placeholder="From Date" /> setFilters({ ...filters, to_date: e.target.value })} placeholder="To Date" />

{/* Calls Table */} Agent Direction Numbers Status Duration Turns Cost Started At Actions {calls.length === 0 ? ( No calls found ) : ( calls.map((call) => ( {call.agent?.name} {call.direction}

{call.from_number}

→ {call.to_number}

{call.status}

{formatDuration(call.duration)}

{call.turn_count} {call.twilio_cost || call.openai_cost ? (

${Number(call.cost_estimate || 0).toFixed(4)}

{call.twilio_cost > 0 && (

Twilio: ${Number(call.twilio_cost).toFixed(4)}

)} {call.openai_cost > 0 && (

OpenAI: ${Number(call.openai_cost).toFixed(4)}

)}

) : ( - )} {new Date(call.started_at).toLocaleString()} )) )}

{/* Transcript Dialog */}

); }