import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Head, Link } from '@inertiajs/react'; import { ArrowLeft, Phone, Clock, User, MessageSquare } from 'lucide-react'; import { type BreadcrumbItem } from '@/types'; interface Call { id: number; campaign_id: number; campaign_name: string; contact_id: number; contact_name: string; contact_phone: string; status: string; duration: number; direction: string; recording_url?: string; notes?: string; started_at: string; ended_at: string; } interface Contact { id: number | null; name: string | null; phone_number: string; } interface Props { call: Call; contact: Contact | null; breadcrumbs?: BreadcrumbItem[]; } export default function Show({ call, contact, breadcrumbs }: Props) { const callData = call || { id: 0, campaign_id: 0, campaign_name: '', contact_id: 0, contact_name: '', contact_phone: '', status: '', duration: 0, direction: '', recording_url: '', notes: '', started_at: '', ended_at: '' }; const formatDuration = (seconds: number) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins}m ${secs}s`; }; const getStatusColor = (status: string) => { const colors: Record = { 'completed': 'default', 'failed': 'destructive', 'no-answer': 'secondary', 'busy': 'secondary', }; return colors[status] || 'secondary'; }; return (
Status {callData.status} Duration
{formatDuration(callData.duration)}
Direction
{callData.direction}
Campaign {callData.campaign_name}
Contact Information {contact ? ( <>
Contact Name

{contact.name || 'N/A'}

Phone Number

{contact.phone_number}

{contact.id && ( )} ) : (

No contact information available

)} Call Timeline

Started At

{new Date(callData.started_at).toLocaleString()}

Ended At

{new Date(callData.ended_at).toLocaleString()}

{callData.recording_url && ( Call Recording )} {callData.notes && ( Notes

{callData.notes}

 )}
); }