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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Link, Head, router } from '@inertiajs/react'; import { useState } from 'react'; import { Phone, PhoneCall, MessageSquare, Search, Clock, CheckCircle, XCircle, Ban, AlertCircle } from 'lucide-react'; interface NumberRequest { id: number; phone_number: { number: string; formatted_number: string; friendly_name: string; country_code: string; area_code: string; capabilities: { voice: boolean; sms: boolean; mms: boolean; }; monthly_cost: number; }; status: 'pending' | 'approved' | 'rejected' | 'cancelled'; customer_notes: string | null; admin_notes: string | null; requested_at: string; processed_at: string | null; } interface PaginatedRequests { data: NumberRequest[]; current_page: number; last_page: number; per_page: number; total: number; } interface Props { requests: PaginatedRequests; } export default function MyRequests({ requests }: Props) { const [selectedRequest, setSelectedRequest] = useState(null); const [isCancelModalOpen, setIsCancelModalOpen] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const handleCancelRequest = (request: NumberRequest) => { setSelectedRequest(request); setIsCancelModalOpen(true); }; const confirmCancel = () => { if (!selectedRequest) return; setIsProcessing(true); router.post( `/numbers/requests/${selectedRequest.id}/cancel`, {}, { onSuccess: () => { setIsCancelModalOpen(false); setSelectedRequest(null); }, onFinish: () => setIsProcessing(false), } ); }; const getStatusIcon = (status: string) => { switch (status) { case 'pending': return ; case 'approved': return ; case 'rejected': return ; case 'cancelled': return ; default: return ; } }; const getStatusVariant = (status: string): "default" | "secondary" | "destructive" | "outline" => { switch (status) { case 'pending': return 'secondary'; case 'approved': return 'default'; case 'rejected': return 'destructive'; case 'cancelled': return 'outline'; default: return 'outline'; } }; 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', hour: '2-digit', minute: '2-digit', }); }; const pendingCount = requests.data.filter(r => r.status === 'pending').length; const approvedCount = requests.data.filter(r => r.status === 'approved').length; const rejectedCount = requests.data.filter(r => r.status === 'rejected').length; return (

{/* Header */}

My Number Requests

Track the status of your phone number requests

{/* Stats Cards */} {requests.data.length > 0 && (

Total Requests

{requests.total}

All time requests

Pending

{pendingCount}

Awaiting review

Approved

{approvedCount}

Numbers assigned

Rejected

{rejectedCount}

Not approved

)} {/* Requests List */} Request History View all your phone number requests and their current status {requests.data.length === 0 ? (

No Requests Yet

You haven't submitted any phone number requests. Browse available numbers to get started.

) : ( <> Phone Number Capabilities Monthly Cost Requested Status Notes Action {requests.data.map((request) => (

{request.phone_number.formatted_number} {request.phone_number.country_code} • {request.phone_number.area_code}

{request.phone_number.capabilities.voice && ( Voice )} {request.phone_number.capabilities.sms && ( SMS )}

{formatCurrency(request.phone_number.monthly_cost)} {formatDate(request.requested_at)} {getStatusIcon(request.status)} {request.status.charAt(0).toUpperCase() + request.status.slice(1)} {request.status === 'rejected' && request.admin_notes ? (

Rejection Reason:

{request.admin_notes}

) : request.status === 'approved' && request.admin_notes ? (

{request.admin_notes}

) : request.customer_notes ? (

{request.customer_notes}

) : ( — )} {request.status === 'pending' ? ( ) : request.status === 'approved' ? ( ) : ( — )} ))}

{/* Pagination */} {requests.last_page > 1 && (

Showing {requests.data.length} of {requests.total} requests

)} {/* Help Alert */} {pendingCount > 0 && ( You have {pendingCount} pending {pendingCount === 1 ? 'request' : 'requests'}. An admin will review and respond soon. You'll receive an email notification when your request is processed. )} )}

{/* Cancel Confirmation Modal */} ); }