import { useState } from 'react'; import { Plus, Phone, MessageSquare, Bot, BarChart3, Settings, CheckCircle, XCircle, AlertCircle, Loader2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Head, router, usePage } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import AssignAIAgentModal from '@/components/sms/assign-ai-agent-modal'; import { toast } from 'sonner'; import axios from 'axios'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Home', href: dashboard().url, }, { title: 'SMS', }, ]; interface PhoneNumber { id: number; number?: string; phone_number?: string; friendly_name?: string | null; status?: string; capabilities?: { sms?: boolean; mms?: boolean; voice?: boolean; }; ai_agent?: { id: number; name: string; } | null; conversations_count?: number; has_agent?: boolean; } interface AIAgent { id: number; name: string; description: string; } interface Props { phoneNumbers: PhoneNumber[]; aiAgents: AIAgent[]; } export default function Sms({ phoneNumbers, aiAgents }: Props) { const [selectedPhone, setSelectedPhone] = useState(null); const [showAssignModal, setShowAssignModal] = useState(false); const handleAssignAgent = (phone: PhoneNumber) => { setSelectedPhone(phone); setShowAssignModal(true); }; const formatPhoneNumber = (phone: string | undefined | null) => { if (!phone) return 'N/A'; const cleaned = phone.replace(/\D/g, ''); if (cleaned.length === 11 && cleaned[0] === '1') { return `+${cleaned[0]} (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`; } return phone; }; return (

SMS Management

Use your assigned phone numbers with SMS capability for messaging

{/* Summary Stats */}
Total Numbers
{phoneNumbers.length}
 With AI Agents
{phoneNumbers.filter(p => p.has_agent === true).length}
Active Conversations
{phoneNumbers.reduce((sum, p) => sum + (p.conversations_count || 0), 0)}
SMS Capable Numbers
{phoneNumbers.filter(p => p.status === 'assigned' || p.status === undefined).length}
{/* Phone Numbers List */}

Your SMS Phone Numbers

{phoneNumbers.length === 0 ? (

No SMS Phone Numbers Assigned

Contact your administrator to get a phone number with SMS capability assigned to your account

) : (
{phoneNumbers.map((phone) => (

{formatPhoneNumber(phone.number)}

{phone.status || 'unknown'} {phone.capabilities?.sms && ( SMS Enabled )} {phone.capabilities?.mms && ( MMS )}
{phone.friendly_name && (

{phone.friendly_name}

)}
{phone.ai_agent ? (
AI: {phone.ai_agent.name}
) : (
No AI Agent Assigned
)}
{phone.conversations_count || 0} conversations
))}
)}
{/* Quick Actions */}
router.visit('/sms/conversations')}> View All Conversations See all SMS conversations across all numbers router.visit('/sms/templates')}> SMS Templates Create and manage reusable message templates router.visit('/sms/analytics')}> SMS Analytics View performance metrics and insights
{/* Assign AI Agent Modal */} {selectedPhone && ( { setShowAssignModal(false); setSelectedPhone(null); }} phoneNumber={selectedPhone} aiAgents={aiAgents} /> )} ); }