import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Input } from '@/components/ui/input'; import { Link, Head, router } from '@inertiajs/react'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import { useState } from 'react'; import { Phone, PhoneCall, MessageSquare, Search, Calendar, AlertCircle, CheckCircle, Bot, X, Network, Zap } from 'lucide-react'; interface AiAgent { id: number; name: string; type: 'inbound' | 'outbound'; active: boolean; } interface PhoneNumber { id: number; number: string; formatted_number: string; friendly_name: string; country_code: string; area_code: string; status: 'assigned'; source?: 'twilio_direct' | 'sip_trunk'; capabilities: { voice: boolean; sms: boolean; mms: boolean; }; monthly_cost: number; original_monthly_cost?: number; discount_percentage?: number; assigned_at: string; created_at: string; ai_agent: AiAgent | null; } interface PaginatedNumbers { data: PhoneNumber[]; current_page: number; last_page: number; per_page: number; total: number; } interface Props { numbers: PaginatedNumbers; } export default function MyNumbers({ numbers }: Props) { const [searchTerm, setSearchTerm] = useState(''); const formatCurrency = (amount: number) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format(amount); }; const formatDate = (date: string) => { return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', }); }; const totalMonthlyCost = numbers.data.reduce((sum, num) => sum + num.monthly_cost, 0); // Filter numbers based on search term const filteredNumbers = numbers.data.filter(number => { if (!searchTerm) return true; const search = searchTerm.toLowerCase(); return ( number.number.toLowerCase().includes(search) || number.formatted_number.toLowerCase().includes(search) || number.friendly_name.toLowerCase().includes(search) || (number.ai_agent?.name.toLowerCase().includes(search)) ); }); const handleClearSearch = () => { setSearchTerm(''); }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, { title: 'My Phone Numbers', href: '/numbers/my-numbers', }, ]; return (
{/* Header */}

My Phone Numbers

Manage your assigned phone numbers

{/* Summary Card */} {numbers.data.length > 0 && (
Total Numbers
{numbers.total}

Active phone numbers

Voice Numbers
{numbers.data.filter(n => n.capabilities.voice).length}

Can make/receive calls

SMS Numbers
{numbers.data.filter(n => n.capabilities.sms).length}

Can send/receive SMS

AI Agents
{numbers.data.filter(n => n.ai_agent).length}

Numbers with AI agents

Monthly Cost
{formatCurrency(totalMonthlyCost)}

{numbers.data.filter(n => n.source === 'sip_trunk').length > 0 && ( Saving with SIP Trunk numbers! )} {numbers.data.filter(n => n.source === 'sip_trunk').length === 0 && 'Total across all numbers'}

)} {/* Numbers List */}
Assigned Numbers Phone numbers that have been assigned to your account
{numbers.data.length > 0 && (
setSearchTerm(e.target.value)} className="pl-9 pr-9" /> {searchTerm && ( )}
)}
{numbers.data.length === 0 ? (

No Phone Numbers Yet

You don't have any assigned phone numbers. Browse available numbers and submit a request.

) : ( <> Phone Number Country Area Code Capabilities AI Agent Monthly Cost Assigned Date Status {filteredNumbers.length === 0 ? ( {searchTerm ? `No numbers found matching "${searchTerm}"` : 'No numbers available'} ) : ( filteredNumbers.map((number) => (
{number.formatted_number} {number.source === 'sip_trunk' && ( SIP Trunk )}
{number.friendly_name}
{number.country_code} {number.area_code}
{number.capabilities.voice && ( Voice )} {number.capabilities.sms && ( SMS )}
{number.ai_agent ? (
{number.ai_agent.name} {number.ai_agent.type}
) : ( Not Assigned )} {number.source === 'sip_trunk' ? (
FREE {number.original_monthly_cost && ( {formatCurrency(number.original_monthly_cost)} )}
) : ( formatCurrency(number.monthly_cost) )} {formatDate(number.assigned_at)} Active )) )}
{/* Pagination */} {numbers.last_page > 1 && (
Showing {numbers.data.length} of {numbers.total} numbers
)} {/* Usage Instructions */} How to use: Select these numbers when creating campaigns to make calls or send messages. Each number's capabilities determine what it can be used for. )}
); }