import { Head, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Edit, Phone, Mail, Building } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { PageHelp } from '@/components/page-help'; import { ContactQualityChecker } from '@/components/contacts/contact-quality-checker'; import { BreadcrumbItem } from '@/types'; interface Contact { id: number; first_name: string; last_name: string; phone_number: string; email?: string; company?: string; notes?: string; status: string; created_at: string; } interface Call { id: number; direction: string; status: string; duration: number; created_at: string; } interface Props { contact: Contact; recentCalls?: Call[]; } export default function ContactShow({ contact, recentCalls = [] }: Props) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'Contacts', href: '/contacts' }, { title: `${contact.first_name} ${contact.last_name}`, href: `/contacts/${contact.id}` }, ]; const helpSections = [ { title: 'Contact Details Overview', content: 'This page displays comprehensive information about a specific contact, including their personal details, contact information, and call history.', }, { title: 'Contact Information', content: 'View the contact\'s phone number, email address, and company name. You can quickly identify the best way to reach out to this contact.', }, { title: 'Recent Calls', content: 'See a list of recent calls with this contact, including the date & time, direction (inbound/outbound), status, and duration of each call.', }, { title: 'Editing Contact', content: 'Click the "Edit" button in the top-right corner to modify the contact\'s information, update their details, or add notes.', }, { title: 'Call History', content: 'Click "View" on any call in the Recent Calls table to see detailed information about that specific call, including recordings and transcripts if available.', }, { title: 'Navigation', content: 'Use the "Back" button to return to the contacts list, or use the breadcrumb navigation at the top of the page to navigate to other sections.', }, ]; return (

{contact.first_name} {contact.last_name}

Contact details

Phone

{contact.phone_number}

Email

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

Company

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

{contact.notes && (

Notes

{contact.notes}

)} {/* AI Data Quality Check */}

AI Data Quality Check

Use AI to analyze and improve the quality of this contact's data. Get suggestions for formatting, missing fields, and potential duplicates.

router.reload({ only: ['contact'] })} />

Recent Calls

Date & Time Direction Status Duration Actions {recentCalls.length > 0 ? ( recentCalls.map((call) => ( {new Date(call.created_at).toLocaleString()} {call.direction} {call.status} {call.duration}s )) ) : ( No calls yet )}
); }