firt commit

src/pages/StatusPage.tsx

@@ -0,0 +1,55 @@
+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;