Initial commit - SaveTheMoment Atlas Basis-Setup

components/BookingsTable.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import { useState } from 'react';
+import { FiPlus, FiEye, FiEdit } from 'react-icons/fi';
+import Link from 'next/link';
+import { formatDate } from '@/lib/date-utils';
+
+interface BookingsTableProps {
+  bookings: any[];
+  locations: any[];
+  user: any;
+}
+
+export default function BookingsTable({ bookings, locations, user }: BookingsTableProps) {
+  const [statusFilter, setStatusFilter] = useState('ALL');
+  const [locationFilter, setLocationFilter] = useState('ALL');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredBookings = bookings.filter(booking => {
+    if (statusFilter !== 'ALL' && booking.status !== statusFilter) return false;
+    if (locationFilter !== 'ALL' && booking.location.slug !== locationFilter) return false;
+    if (searchTerm) {
+      const search = searchTerm.toLowerCase();
+      return (
+        booking.customerName.toLowerCase().includes(search) ||
+        booking.customerEmail.toLowerCase().includes(search) ||
+        booking.bookingNumber.toLowerCase().includes(search) ||
+        booking.eventCity.toLowerCase().includes(search)
+      );
+    }
+    return true;
+  });
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'RESERVED': return 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/50';
+      case 'CONFIRMED': return 'bg-green-500/20 text-green-400 border border-green-500/50';
+      case 'COMPLETED': return 'bg-blue-500/20 text-blue-400 border border-blue-500/50';
+      case 'CANCELLED': return 'bg-red-500/20 text-red-400 border border-red-500/50';
+      default: return 'bg-gray-500/20 text-gray-400 border border-gray-500/50';
+    }
+  };
+
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case 'RESERVED': return 'Reserviert';
+      case 'CONFIRMED': return 'Bestätigt';
+      case 'COMPLETED': return 'Abgeschlossen';
+      case 'CANCELLED': return 'Storniert';
+      default: return status;
+    }
+  };
+
+  const stats = {
+    total: bookings.length,
+    reserved: bookings.filter(b => b.status === 'RESERVED').length,
+    confirmed: bookings.filter(b => b.status === 'CONFIRMED').length,
+    completed: bookings.filter(b => b.status === 'COMPLETED').length,
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h2 className="text-3xl font-bold text-white">Buchungen</h2>
+          <p className="text-gray-400 mt-1">Alle Buchungsanfragen im Überblick</p>
+        </div>
+        <Link
+          href="/dashboard/bookings/new"
+          className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-lg hover:from-red-700 hover:to-pink-700 shadow-lg transition-all"
+        >
+          <FiPlus /> Neue Buchung
+        </Link>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
+          <p className="text-sm text-gray-400">Gesamt</p>
+          <p className="text-3xl font-bold text-white mt-2">{stats.total}</p>
+        </div>
+        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
+          <p className="text-sm text-gray-400">Reserviert</p>
+          <p className="text-3xl font-bold text-yellow-400 mt-2">{stats.reserved}</p>
+        </div>
+        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
+          <p className="text-sm text-gray-400">Bestätigt</p>
+          <p className="text-3xl font-bold text-green-400 mt-2">{stats.confirmed}</p>
+        </div>
+        <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-6 rounded-xl shadow-sm">
+          <p className="text-sm text-gray-400">Abgeschlossen</p>
+          <p className="text-3xl font-bold text-blue-400 mt-2">{stats.completed}</p>
+        </div>
+      </div>
+
+      <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6">
+        <div className="flex flex-col md:flex-row gap-4 mb-6">
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Suche nach Name, E-Mail, Buchungsnummer..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent placeholder-gray-400"
+            />
+          </div>
+          <div className="flex gap-4">
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
+            >
+              <option value="ALL">Alle Status</option>
+              <option value="RESERVED">Reserviert</option>
+              <option value="CONFIRMED">Bestätigt</option>
+              <option value="COMPLETED">Abgeschlossen</option>
+              <option value="CANCELLED">Storniert</option>
+            </select>
+            <select
+              value={locationFilter}
+              onChange={(e) => setLocationFilter(e.target.value)}
+              className="px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent"
+            >
+              <option value="ALL">Alle Standorte</option>
+              {locations.map(loc => (
+                <option key={loc.id} value={loc.slug}>{loc.name}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        {filteredBookings.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-gray-400">Keine Buchungen gefunden</p>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-gray-700">
+                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Buchungsnr.</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Kunde</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Event</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Standort</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Datum</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Status</th>
+                  <th className="text-left py-3 px-4 font-semibold text-gray-300">Aktionen</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredBookings.map(booking => (
+                  <tr 
+                    key={booking.id} 
+                    onClick={() => window.location.href = `/dashboard/bookings/${booking.id}`}
+                    className="border-b border-gray-700 hover:bg-gray-700/50 transition-colors cursor-pointer"
+                  >
+                    <td className="py-4 px-4">
+                      <span className="font-mono text-sm text-white">{booking.bookingNumber}</span>
+                    </td>
+                    <td className="py-4 px-4">
+                      <div>
+                        <p className="font-semibold text-white">{booking.customerName}</p>
+                        <p className="text-sm text-gray-400">{booking.customerEmail}</p>
+                      </div>
+                    </td>
+                    <td className="py-4 px-4">
+                      <div>
+                        <p className="text-white">{booking.eventCity}</p>
+                        {booking.eventLocation && (
+                          <p className="text-sm text-gray-400">{booking.eventLocation}</p>
+                        )}
+                      </div>
+                    </td>
+                    <td className="py-4 px-4">
+                      <span className="text-white">{booking.location.name}</span>
+                    </td>
+                    <td className="py-4 px-4">
+                      <span className="text-white">
+                        {formatDate(booking.eventDate)}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4">
+                      <span className={`inline-block px-3 py-1 text-xs font-semibold rounded-full ${getStatusColor(booking.status)}`}>
+                        {getStatusLabel(booking.status)}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4" onClick={(e) => e.stopPropagation()}>
+                      <div className="flex gap-2">
+                        <Link
+                          href={`/dashboard/bookings/${booking.id}`}
+                          className="p-2 text-blue-400 hover:bg-blue-500/20 rounded-lg transition-colors"
+                          title="Details anzeigen"
+                        >
+                          <FiEye />
+                        </Link>
+                        <Link
+                          href={`/dashboard/bookings/${booking.id}`}
+                          className="p-2 text-gray-400 hover:bg-gray-700 rounded-lg transition-colors"
+                          title="Bearbeiten"
+                        >
+                          <FiEdit />
+                        </Link>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}