import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Head, Link, router } from '@inertiajs/react'; import { ArrowLeft, Phone, User, Calendar, CheckCircle, XCircle } from 'lucide-react'; interface NumberRequest { id: number; user_id: number; user_name: string; user_email: string; phone_number: string; area_code: string; status: 'pending' | 'approved' | 'rejected'; reason: string; requested_at: string; processed_at: string | null; } interface Props { request: NumberRequest; } export default function Show({ request }: Props) { const requestData = request || { id: 0, user_id: 0, user_name: '', user_email: '', phone_number: '', area_code: '', status: 'pending' as const, reason: '', requested_at: '', processed_at: null }; const handleApprove = () => { if (confirm('Are you sure you want to approve this number request?')) { router.post(`/admin/number-requests/${requestData.id}/approve`); } }; const handleReject = () => { const reason = prompt('Please provide a reason for rejection:'); if (reason) { router.post(`/admin/number-requests/${requestData.id}/reject`, { reason }); } }; return (
Request Status {requestData.status}
Phone Number

{requestData.phone_number}

Area Code

{requestData.area_code}

Requested At

{new Date(requestData.requested_at).toLocaleString()}

{requestData.processed_at && (

Processed At

{new Date(requestData.processed_at).toLocaleString()}

)}
Requested By

{requestData.user_name}

{requestData.user_email}

{requestData.reason && (

Reason

{requestData.reason}

)}
{requestData.status === 'pending' && (
)}
); }