55 lines
No EOL
1.8 KiB
TypeScript
Executable file
55 lines
No EOL
1.8 KiB
TypeScript
Executable file
import { useState, useEffect } from 'react';
|
|
import type { Ticket } from '../types';
|
|
|
|
function StatusPage() {
|
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
|
|
|
useEffect(() => {
|
|
const loadTickets = async () => {
|
|
// TODO: Replace with API call to fetch tickets by match
|
|
setTickets([]);
|
|
};
|
|
loadTickets();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<h1 className="text-3xl font-bold mb-8">Booking Status</h1>
|
|
|
|
<div className="bg-gray-800 rounded-lg overflow-hidden">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="bg-gray-700">
|
|
<th className="px-6 py-3 text-left">Name</th>
|
|
<th className="px-6 py-3 text-left">Email</th>
|
|
<th className="px-6 py-3 text-left">Phone</th>
|
|
<th className="px-6 py-3 text-left">Seat</th>
|
|
<th className="px-6 py-3 text-left">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700">
|
|
{tickets.map((ticket) => (
|
|
<tr key={ticket.id}>
|
|
<td className="px-6 py-4">{ticket.customerName}</td>
|
|
<td className="px-6 py-4">{ticket.customerEmail}</td>
|
|
<td className="px-6 py-4">{ticket.customerPhone}</td>
|
|
<td className="px-6 py-4">{ticket.seatNumber}</td>
|
|
<td className="px-6 py-4">
|
|
<span className={`px-2 py-1 rounded ${
|
|
ticket.status === 'confirmed' ? 'bg-green-600' :
|
|
ticket.status === 'pending' ? 'bg-yellow-600' :
|
|
'bg-red-600'
|
|
}`}>
|
|
{ticket.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default StatusPage; |