import AdminLayout from '@/Layouts/AdminLayout'; import { Head, Link, router } from '@inertiajs/react'; import { Search, Trash2, CheckCircle, XCircle, Clock, Eye, X, Calendar, MapPin, Building2, TrendingUp, MessageSquare } from 'lucide-react'; import { useState, useEffect } from 'react'; import Modal from '@/Components/Modal'; interface Booking { id: number; name: string; email: string; company: string | null; location: string | null; revenue_band: string | null; challenge: string | null; scheduled_at: string; meeting_link: string | null; admin_notes: string | null; status: string; } interface PaginatedBookings { data: Booking[]; current_page: number; last_page: number; total: number; per_page: number; } interface Props { bookings: PaginatedBookings; activeStatus: string; } const statusStyle = (s: string) => { if (s === 'Confirmed') return 'bg-emerald-50 text-emerald-700'; if (s === 'Pending') return 'bg-amber-50 text-amber-700'; if (s === 'Completed') return 'bg-[#F0EDE8] text-[#8C92AC]'; return 'bg-red-50 text-red-600'; }; export default function Index({ bookings, activeStatus }: Props) { const tabs = ['All', 'Confirmed', 'Pending', 'Completed', 'Cancelled']; const [search, setSearch] = useState(''); const [selectedBooking, setSelectedBooking] = useState(null); const [meetingLink, setMeetingLink] = useState(''); const [adminNotes, setAdminNotes] = useState(''); useEffect(() => { if (selectedBooking) { setMeetingLink(selectedBooking.meeting_link || ''); setAdminNotes(selectedBooking.admin_notes || ''); } }, [selectedBooking]); function switchTab(tab: string) { router.get('/admin/bookings', { status: tab === 'All' ? undefined : tab }, { preserveScroll: true, replace: true, }); } function updateStatus(id: number, status: string) { router.patch(route('admin.bookings.update-status', id), { status, meeting_link: meetingLink, admin_notes: adminNotes }, { preserveScroll: true, onSuccess: () => { if (selectedBooking && selectedBooking.id === id) { setSelectedBooking(null); } } }); } function deleteBooking(id: number) { if (confirm('Delete this booking? This cannot be undone.')) { router.delete(route('admin.bookings.destroy', id), { preserveScroll: true, onSuccess: () => setSelectedBooking(null) }); } } const displayed = search.trim() ? bookings.data.filter((b) => b.name.toLowerCase().includes(search.toLowerCase()) || b.email.toLowerCase().includes(search.toLowerCase()) || (b.company ?? '').toLowerCase().includes(search.toLowerCase()) ) : bookings.data; return ( {/* Header */}

Bookings

{bookings.total} growth audit {bookings.total === 1 ? 'call' : 'calls'} scheduled.

{/* Toolbar */}
{/* Tabs */}
{tabs.map((tab) => ( ))}
{/* Search */}
setSearch(e.target.value)} placeholder="Search name, company…" className="pl-10 pr-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[13px] text-ink placeholder:text-[#8C92AC] focus:outline-none focus:ring-2 focus:ring-primary/15 w-full" />
{/* Table (Desktop) */}
{['ID', 'Client', 'Company', 'Location', 'Slot', 'Status', ''].map((h) => ( ))} {displayed.length > 0 ? displayed.map((b) => ( setSelectedBooking(b)} className="border-b border-[#F0EDE8] last:border-0 hover:bg-[#FAFAF8] transition-colors group cursor-pointer" > )) : ( )}
{h}
BK-{b.id}

{b.name}

{b.email}

 {b.company ?? '—'} {b.location ?? '—'}

{new Date(b.scheduled_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}

{new Date(b.scheduled_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} WAT

{b.status}
{b.status === 'Pending' && ( )} {b.status !== 'Cancelled' && b.status !== 'Completed' && ( )} {b.status === 'Confirmed' && ( )}
{search ? 'No bookings match your search.' : 'No bookings yet.'}
{/* Mobile List */}
{displayed.length > 0 ? displayed.map((b) => (
setSelectedBooking(b)} className="bg-white rounded-xl border border-[#E8E6DF] p-4 active:bg-[#FAFAF8] transition-colors" >

{b.name}

{b.status}
BK-{b.id} · {b.company || 'Private Client'}
{new Date(b.scheduled_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} {new Date(b.scheduled_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
{b.status === 'Pending' && ( )}
)) : (
{search ? 'No matches found.' : 'No bookings yet.'}
)}
{/* Pagination */} {bookings.last_page > 1 && (
Page {bookings.current_page} of {bookings.last_page} · {bookings.total} total
{bookings.current_page > 1 && ( )} {bookings.current_page < bookings.last_page && ( )}
)} {/* Details Modal */} setSelectedBooking(null)} maxWidth="lg"> {selectedBooking && (
{/* Modal Header */}

Booking Details {selectedBooking.status}

Reference: BK-{selectedBooking.id}

{/* Modal Body */}
{/* Section: Client Info */}

{selectedBooking.name}

{selectedBooking.email}

{new Date(selectedBooking.scheduled_at).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}

{new Date(selectedBooking.scheduled_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} WAT

{/* Section: Business Info */}

{selectedBooking.company || 'Not provided'}

{selectedBooking.location || '—'}

{selectedBooking.revenue_band || '—'}

{/* Section: Fulfillment */} {(selectedBooking.status === 'Pending' || selectedBooking.status === 'Confirmed') && (

Meeting & Fulfillment

setMeetingLink(e.target.value)} placeholder="https://meet.google.com/..." className="w-full px-4 py-2.5 bg-white border border-emerald-200 rounded-lg text-[13px] outline-none focus:ring-2 focus:ring-emerald-500/20 placeholder:text-emerald-300" />

This link will be emailed to the client when you confirm.