214 lines
9.6 KiB
TypeScript
214 lines
9.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|