feat: Equipment-System, Buchungsbearbeitung, Kundenadresse, LexOffice-Fix
- Vintage Modell hinzugefuegt - Equipment Multi-Select (Neue Buchung + Bearbeitung) - Kundenadresse in Formularen - Bearbeiten-Seite fuer Buchungen - Abbau-Zeiten in Formularen und Uebersicht - Vertrag PDF nur bei Privatkunden - LexOffice Kontakt-Erstellung Fix (BUSINESS) - Zurueck-Pfeil auf Touren-Seite
This commit is contained in:
Julia Wehden
311
app/dashboard/bookings/[id]/edit/page.tsx
Normal file
311
app/dashboard/bookings/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter, useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function EditBookingPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const bookingId = params.id as string;
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [equipmentList, setEquipmentList] = useState<any[]>([]);
|
||||
const [selectedEquipment, setSelectedEquipment] = useState<string[]>([]);
|
||||
const [formData, setFormData] = useState({
|
||||
customerName: "",
|
||||
customerEmail: "",
|
||||
customerPhone: "",
|
||||
customerAddress: "",
|
||||
customerCity: "",
|
||||
customerZip: "",
|
||||
companyName: "",
|
||||
invoiceType: "PRIVATE",
|
||||
model: "",
|
||||
eventDate: "",
|
||||
eventAddress: "",
|
||||
eventCity: "",
|
||||
eventZip: "",
|
||||
eventLocation: "",
|
||||
setupTimeStart: "",
|
||||
setupTimeLatest: "",
|
||||
dismantleTimeEarliest: "",
|
||||
dismantleTimeLatest: "",
|
||||
calculatedPrice: 0,
|
||||
notes: "",
|
||||
withPrintFlat: false,
|
||||
});
|
||||
|
||||
const toggleEquipment = (id: string) => {
|
||||
setSelectedEquipment((prev) =>
|
||||
prev.includes(id) ? prev.filter((e) => e !== id) : [...prev, id]
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
fetch(`/api/bookings/${bookingId}`).then((r) => r.json()),
|
||||
fetch("/api/equipment").then((r) => r.json()),
|
||||
])
|
||||
.then(([bookingData, eqData]) => {
|
||||
const b = bookingData.booking || bookingData;
|
||||
setFormData({
|
||||
customerName: b.customerName || "",
|
||||
customerEmail: b.customerEmail || "",
|
||||
customerPhone: b.customerPhone || "",
|
||||
customerAddress: b.customerAddress || "",
|
||||
customerCity: b.customerCity || "",
|
||||
customerZip: b.customerZip || "",
|
||||
companyName: b.companyName || "",
|
||||
invoiceType: b.invoiceType || "PRIVATE",
|
||||
model: b.model || b.photobox?.model || "",
|
||||
eventDate: b.eventDate ? new Date(b.eventDate).toISOString().split("T")[0] : "",
|
||||
eventAddress: b.eventAddress || "",
|
||||
eventCity: b.eventCity || "",
|
||||
eventZip: b.eventZip || "",
|
||||
eventLocation: b.eventLocation || "",
|
||||
setupTimeStart: b.setupTimeStart ? new Date(b.setupTimeStart).toISOString().slice(0, 16) : "",
|
||||
setupTimeLatest: b.setupTimeLatest ? new Date(b.setupTimeLatest).toISOString().slice(0, 16) : "",
|
||||
dismantleTimeEarliest: b.dismantleTimeEarliest ? new Date(b.dismantleTimeEarliest).toISOString().slice(0, 16) : "",
|
||||
dismantleTimeLatest: b.dismantleTimeLatest ? new Date(b.dismantleTimeLatest).toISOString().slice(0, 16) : "",
|
||||
calculatedPrice: b.calculatedPrice || 0,
|
||||
notes: b.notes || "",
|
||||
withPrintFlat: b.withPrintFlat || false,
|
||||
});
|
||||
setEquipmentList(eqData.equipment || []);
|
||||
if (b.bookingEquipment) {
|
||||
setSelectedEquipment(b.bookingEquipment.map((be: any) => be.equipmentId));
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setError("Buchung konnte nicht geladen werden");
|
||||
setLoading(false);
|
||||
});
|
||||
}, [bookingId]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/bookings/${bookingId}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ ...formData, equipmentIds: selectedEquipment }),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || "Fehler beim Speichern");
|
||||
}
|
||||
|
||||
router.push(`/dashboard/bookings/${bookingId}`);
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center">
|
||||
<div className="text-gray-400">Laden...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const inputClass = "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";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<Link
|
||||
href={`/dashboard/bookings/${bookingId}`}
|
||||
className="text-sm text-gray-400 hover:text-gray-300 mb-2 inline-block transition-colors"
|
||||
>
|
||||
← Zurück zur Buchung
|
||||
</Link>
|
||||
<h2 className="text-3xl font-bold text-white">Buchung bearbeiten</h2>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-sm p-6 space-y-6"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Fotobox & Ausstattung</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Modell</label>
|
||||
<select
|
||||
value={formData.model}
|
||||
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
|
||||
className={inputClass}
|
||||
>
|
||||
<option value="">Bitte wählen...</option>
|
||||
<option value="VINTAGE">Vintage</option>
|
||||
<option value="VINTAGE_SMILE">Vintage Smile</option>
|
||||
<option value="VINTAGE_PHOTOS">Vintage Photos</option>
|
||||
<option value="NOSTALGIE">Nostalgie</option>
|
||||
<option value="MAGIC_MIRROR">Magic Mirror</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{equipmentList.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Zusatzausstattung</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{equipmentList.map((eq) => (
|
||||
<label
|
||||
key={eq.id}
|
||||
className={`flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${
|
||||
selectedEquipment.includes(eq.id)
|
||||
? "bg-red-500/10 border-red-500/50 text-white"
|
||||
: "bg-gray-700/50 border-gray-600 text-gray-300 hover:border-gray-500"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedEquipment.includes(eq.id)}
|
||||
onChange={() => toggleEquipment(eq.id)}
|
||||
className="accent-red-500"
|
||||
/>
|
||||
{eq.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Kundendaten</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Rechnungsart</label>
|
||||
<div className="flex gap-4">
|
||||
<label className="flex items-center text-white">
|
||||
<input type="radio" value="PRIVATE" checked={formData.invoiceType === "PRIVATE"} onChange={(e) => setFormData({ ...formData, invoiceType: e.target.value })} className="mr-2" />
|
||||
Privat
|
||||
</label>
|
||||
<label className="flex items-center text-white">
|
||||
<input type="radio" value="BUSINESS" checked={formData.invoiceType === "BUSINESS"} onChange={(e) => setFormData({ ...formData, invoiceType: e.target.value })} className="mr-2" />
|
||||
Geschäftlich
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{formData.invoiceType === "BUSINESS" && (
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Firmenname</label>
|
||||
<input type="text" value={formData.companyName} onChange={(e) => setFormData({ ...formData, companyName: e.target.value })} className={inputClass} />
|
||||
</div>
|
||||
)}
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Name</label>
|
||||
<input type="text" value={formData.customerName} onChange={(e) => setFormData({ ...formData, customerName: e.target.value })} required className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">E-Mail</label>
|
||||
<input type="email" value={formData.customerEmail} onChange={(e) => setFormData({ ...formData, customerEmail: e.target.value })} required className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Telefon</label>
|
||||
<input type="tel" value={formData.customerPhone} onChange={(e) => setFormData({ ...formData, customerPhone: e.target.value })} required className={inputClass} />
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Adresse</label>
|
||||
<input type="text" value={formData.customerAddress} onChange={(e) => setFormData({ ...formData, customerAddress: e.target.value })} placeholder="Straße und Hausnummer" className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">PLZ</label>
|
||||
<input type="text" value={formData.customerZip} onChange={(e) => setFormData({ ...formData, customerZip: e.target.value })} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Stadt</label>
|
||||
<input type="text" value={formData.customerCity} onChange={(e) => setFormData({ ...formData, customerCity: e.target.value })} className={inputClass} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Event-Details</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Event-Datum</label>
|
||||
<input type="date" value={formData.eventDate} onChange={(e) => setFormData({ ...formData, eventDate: e.target.value })} required className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Preis (EUR)</label>
|
||||
<input type="number" step="0.01" value={formData.calculatedPrice} onChange={(e) => setFormData({ ...formData, calculatedPrice: parseFloat(e.target.value) })} required className={inputClass} />
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Event-Adresse</label>
|
||||
<input type="text" value={formData.eventAddress} onChange={(e) => setFormData({ ...formData, eventAddress: e.target.value })} required className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">PLZ</label>
|
||||
<input type="text" value={formData.eventZip} onChange={(e) => setFormData({ ...formData, eventZip: e.target.value })} required className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Stadt</label>
|
||||
<input type="text" value={formData.eventCity} onChange={(e) => setFormData({ ...formData, eventCity: e.target.value })} required className={inputClass} />
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Location-Name (optional)</label>
|
||||
<input type="text" value={formData.eventLocation} onChange={(e) => setFormData({ ...formData, eventLocation: e.target.value })} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Aufbau ab</label>
|
||||
<input type="datetime-local" value={formData.setupTimeStart} onChange={(e) => setFormData({ ...formData, setupTimeStart: e.target.value })} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Aufbau spätestens</label>
|
||||
<input type="datetime-local" value={formData.setupTimeLatest} onChange={(e) => setFormData({ ...formData, setupTimeLatest: e.target.value })} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Abbau ab</label>
|
||||
<input type="datetime-local" value={formData.dismantleTimeEarliest} onChange={(e) => setFormData({ ...formData, dismantleTimeEarliest: e.target.value })} className={inputClass} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Abbau spätestens</label>
|
||||
<input type="datetime-local" value={formData.dismantleTimeLatest} onChange={(e) => setFormData({ ...formData, dismantleTimeLatest: e.target.value })} className={inputClass} />
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="flex items-center text-white gap-2">
|
||||
<input type="checkbox" checked={formData.withPrintFlat} onChange={(e) => setFormData({ ...formData, withPrintFlat: e.target.checked })} />
|
||||
Druckflatrate
|
||||
</label>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Notizen</label>
|
||||
<textarea value={formData.notes} onChange={(e) => setFormData({ ...formData, notes: e.target.value })} rows={4} className={inputClass} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-500/20 border border-red-500/50 text-red-400 px-4 py-3 rounded-lg">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-4 pt-4 border-t border-gray-700">
|
||||
<Link href={`/dashboard/bookings/${bookingId}`} className="flex-1 px-4 py-3 bg-gray-700 text-gray-300 rounded-lg font-semibold text-center hover:bg-gray-600 transition-colors">
|
||||
Abbrechen
|
||||
</Link>
|
||||
<button type="submit" disabled={saving} className="flex-1 px-4 py-3 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-lg font-semibold hover:from-red-700 hover:to-pink-700 transition-all shadow-lg disabled:opacity-50">
|
||||
{saving ? "Wird gespeichert..." : "Änderungen speichern"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,14 +2,16 @@ import { getServerSession } from 'next-auth';
|
||||
import { authOptions } from '@/lib/auth';
|
||||
import { prisma } from '@/lib/prisma';
|
||||
import { redirect } from 'next/navigation';
|
||||
import BookingDetail from '@/components/BookingDetail';
|
||||
import DashboardSidebar from '@/components/DashboardSidebar';
|
||||
import BookingAutomationPanel from '@/components/BookingAutomationPanel';
|
||||
import { formatDate, formatDateTime } from '@/lib/date-utils';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default async function BookingDetailPage({ params }: { params: { id: string } }) {
|
||||
const session = await getServerSession(authOptions);
|
||||
|
||||
if (!session) {
|
||||
redirect('/login');
|
||||
if (!session || session.user.role !== 'ADMIN') {
|
||||
redirect('/auth/signin');
|
||||
}
|
||||
|
||||
const booking = await prisma.booking.findUnique({
|
||||
@@ -17,16 +19,6 @@ export default async function BookingDetailPage({ params }: { params: { id: stri
|
||||
include: {
|
||||
location: true,
|
||||
photobox: true,
|
||||
tour: {
|
||||
include: {
|
||||
driver: true,
|
||||
},
|
||||
},
|
||||
bookingEquipment: {
|
||||
include: {
|
||||
equipment: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -34,17 +26,224 @@ export default async function BookingDetailPage({ params }: { params: { id: stri
|
||||
redirect('/dashboard/bookings');
|
||||
}
|
||||
|
||||
const emails = await prisma.email.findMany({
|
||||
where: { bookingId: booking.id },
|
||||
orderBy: { receivedAt: 'desc' },
|
||||
});
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
|
||||
<div className="flex">
|
||||
<DashboardSidebar user={session?.user} />
|
||||
<DashboardSidebar user={session.user} />
|
||||
<main className="flex-1 p-8">
|
||||
<BookingDetail booking={booking} emails={emails} user={session?.user} />
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white">{booking.bookingNumber}</h1>
|
||||
<p className="text-gray-400 mt-1">{booking.customerName}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href={`/dashboard/bookings/${booking.id}/edit`}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
Bearbeiten
|
||||
</Link>
|
||||
<div className={`px-4 py-2 rounded-lg ${getStatusColor(booking.status)}`}>
|
||||
{getStatusLabel(booking.status)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Automation Panel */}
|
||||
<div className="mb-8">
|
||||
<BookingAutomationPanel booking={booking} invoiceType={booking.invoiceType} />
|
||||
</div>
|
||||
|
||||
{/* Booking Details */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Customer Info */}
|
||||
<div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl p-6 shadow-lg">
|
||||
<h3 className="text-xl font-bold text-white mb-4">Kundendaten</h3>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-400">Name:</span>
|
||||
<span className="text-white ml-2 font-medium">{booking.customerName}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">E-Mail:</span>
|
||||
<span className="text-white ml-2">{booking.customerEmail}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Telefon:</span>
|
||||
<span className="text-white ml-2">{booking.customerPhone}</span>
|
||||
</div>
|
||||
{booking.customerAddress && (
|
||||
<div>
|
||||
<span className="text-gray-400">Adresse:</span>
|
||||
<span className="text-white ml-2">
|
||||
{booking.customerAddress}, {booking.customerZip} {booking.customerCity}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{booking.companyName && (
|
||||
<div>
|
||||
<span className="text-gray-400">Firma:</span>
|
||||
<span className="text-white ml-2">{booking.companyName}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Event Info */}
|
||||
<div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl p-6 shadow-lg">
|
||||
<h3 className="text-xl font-bold text-white mb-4">Event-Details</h3>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-400">Datum:</span>
|
||||
<span className="text-white ml-2 font-medium">{formatDate(booking.eventDate)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Location:</span>
|
||||
<span className="text-white ml-2">{booking.eventLocation || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Adresse:</span>
|
||||
<span className="text-white ml-2">
|
||||
{booking.eventAddress}, {booking.eventZip} {booking.eventCity}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Aufbau Start:</span>
|
||||
<span className="text-white ml-2">{formatDateTime(booking.setupTimeStart)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Aufbau spätestens:</span>
|
||||
<span className="text-white ml-2">{formatDateTime(booking.setupTimeLatest)}</span>
|
||||
</div>
|
||||
{booking.dismantleTimeEarliest && (
|
||||
<div>
|
||||
<span className="text-gray-400">Abbau ab:</span>
|
||||
<span className="text-white ml-2">{formatDateTime(booking.dismantleTimeEarliest)}</span>
|
||||
</div>
|
||||
)}
|
||||
{booking.dismantleTimeLatest && (
|
||||
<div>
|
||||
<span className="text-gray-400">Abbau spätestens:</span>
|
||||
<span className="text-white ml-2">{formatDateTime(booking.dismantleTimeLatest)}</span>
|
||||
</div>
|
||||
)}
|
||||
{booking.notes && (
|
||||
<div className="pt-3 border-t border-gray-700">
|
||||
<span className="text-gray-400">Notizen:</span>
|
||||
<p className="text-white mt-1 whitespace-pre-wrap">{booking.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Photobox & Pricing */}
|
||||
<div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl p-6 shadow-lg">
|
||||
<h3 className="text-xl font-bold text-white mb-4">Fotobox & Preis</h3>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-400">Modell:</span>
|
||||
<span className="text-white ml-2 font-medium">{booking.photobox?.model || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Serial Number:</span>
|
||||
<span className="text-white ml-2">{booking.photobox?.serialNumber || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Druckflatrate:</span>
|
||||
<span className="text-white ml-2">{booking.withPrintFlat ? 'Ja' : 'Nein'}</span>
|
||||
</div>
|
||||
{booking.distance && (
|
||||
<div>
|
||||
<span className="text-gray-400">Entfernung:</span>
|
||||
<span className="text-white ml-2">{booking.distance.toFixed(1)} km</span>
|
||||
</div>
|
||||
)}
|
||||
{booking.calculatedPrice && (
|
||||
<div className="pt-3 border-t border-gray-700">
|
||||
<span className="text-gray-400">Gesamtpreis:</span>
|
||||
<span className="text-2xl text-pink-400 ml-2 font-bold">
|
||||
{booking.calculatedPrice.toFixed(2)} €
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Location Info */}
|
||||
<div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl p-6 shadow-lg">
|
||||
<h3 className="text-xl font-bold text-white mb-4">Standort</h3>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-400">Name:</span>
|
||||
<span className="text-white ml-2 font-medium">{booking.location?.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Stadt:</span>
|
||||
<span className="text-white ml-2">{booking.location?.city}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Website:</span>
|
||||
<span className="text-white ml-2">{booking.location?.websiteUrl}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Kontakt:</span>
|
||||
<span className="text-white ml-2">{booking.location?.contactEmail}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* LexOffice IDs (if present) */}
|
||||
{(booking.lexofficeContactId || booking.lexofficeOfferId || booking.lexofficeConfirmationId) && (
|
||||
<div className="mt-6 bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl p-6 shadow-lg">
|
||||
<h3 className="text-xl font-bold text-white mb-4">LexOffice Integration</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
{booking.lexofficeContactId && (
|
||||
<div>
|
||||
<span className="text-gray-400">Kontakt-ID:</span>
|
||||
<span className="text-white ml-2 font-mono text-xs">{booking.lexofficeContactId}</span>
|
||||
</div>
|
||||
)}
|
||||
{booking.lexofficeOfferId && (
|
||||
<div>
|
||||
<span className="text-gray-400">Angebots-ID:</span>
|
||||
<span className="text-white ml-2 font-mono text-xs">{booking.lexofficeOfferId}</span>
|
||||
</div>
|
||||
)}
|
||||
{booking.lexofficeConfirmationId && (
|
||||
<div>
|
||||
<span className="text-gray-400">Bestätigungs-ID:</span>
|
||||
<span className="text-white ml-2 font-mono text-xs">{booking.lexofficeConfirmationId}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,11 @@ import DashboardSidebar from '@/components/DashboardSidebar';
|
||||
export default async function DashboardPage() {
|
||||
const session = await getServerSession(authOptions);
|
||||
|
||||
const isTestMode = process.env.TEST_MODE === 'true';
|
||||
const testEmailRecipient = process.env.TEST_EMAIL_RECIPIENT;
|
||||
const emailEnabled = process.env.EMAIL_ENABLED !== 'false';
|
||||
const autoWorkflows = process.env.AUTO_WORKFLOWS === 'true';
|
||||
|
||||
const stats = {
|
||||
totalBookings: await prisma.booking.count(),
|
||||
reservedBookings: await prisma.booking.count({
|
||||
@@ -41,6 +46,47 @@ export default async function DashboardPage() {
|
||||
<div className="flex">
|
||||
<DashboardSidebar user={session?.user} />
|
||||
<main className="flex-1 p-8">
|
||||
{/* Development Mode Warning Banner */}
|
||||
{isTestMode && (
|
||||
<div className="mb-6 bg-yellow-500/10 border-2 border-yellow-500 rounded-xl p-4 shadow-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-3xl">🧪</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-yellow-400 mb-1">
|
||||
TEST-MODUS AKTIV
|
||||
</h3>
|
||||
<p className="text-yellow-200 text-sm mb-2">
|
||||
Alle E-Mails werden an <strong>{testEmailRecipient || 'Test-E-Mail'}</strong> umgeleitet.
|
||||
<br />
|
||||
Echte Kunden erhalten KEINE E-Mails!
|
||||
</p>
|
||||
<div className="flex gap-4 text-xs text-yellow-300/80">
|
||||
<span>📧 E-Mails: {emailEnabled ? '✅ Aktiv' : '❌ Deaktiviert'}</span>
|
||||
<span>🤖 Auto-Workflows: {autoWorkflows ? '✅ Aktiv' : '❌ Deaktiviert'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!emailEnabled && !isTestMode && (
|
||||
<div className="mb-6 bg-red-500/10 border-2 border-red-500 rounded-xl p-4 shadow-lg">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-3xl">⚠️</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-red-400 mb-1">
|
||||
E-MAIL-VERSAND DEAKTIVIERT
|
||||
</h3>
|
||||
<p className="text-red-200 text-sm">
|
||||
EMAIL_ENABLED=false - Kunden erhalten keine E-Mails!
|
||||
<br />
|
||||
Setzen Sie EMAIL_ENABLED="true" in der .env Datei.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DashboardContent
|
||||
user={session?.user}
|
||||
stats={stats}
|
||||
|
||||
377
app/dashboard/tours/new/page.tsx
Normal file
377
app/dashboard/tours/new/page.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { FiCalendar, FiTruck, FiCheckSquare, FiSquare, FiMapPin, FiClock, FiSave, FiAlertCircle } from 'react-icons/fi';
|
||||
|
||||
interface Driver {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
vehiclePlate: string | null;
|
||||
vehicleModel: string | null;
|
||||
available: boolean;
|
||||
}
|
||||
|
||||
interface Booking {
|
||||
id: string;
|
||||
bookingNumber: string;
|
||||
customerName: string;
|
||||
eventDate: string;
|
||||
eventAddress: string;
|
||||
eventCity: string;
|
||||
eventZip: string;
|
||||
setupTimeStart: string;
|
||||
setupTimeLatest: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export default function NewTourPage() {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [drivers, setDrivers] = useState<Driver[]>([]);
|
||||
const [bookings, setBookings] = useState<Booking[]>([]);
|
||||
|
||||
const [tourDate, setTourDate] = useState('');
|
||||
const [selectedDriver, setSelectedDriver] = useState('');
|
||||
const [selectedBookings, setSelectedBookings] = useState<Set<string>>(new Set());
|
||||
const [optimizationType, setOptimizationType] = useState<'fastest' | 'schedule'>('fastest');
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const [driversRes, bookingsRes] = await Promise.all([
|
||||
fetch('/api/drivers?available=true'),
|
||||
fetch('/api/bookings?status=READY_FOR_ASSIGNMENT,OPEN_FOR_DRIVERS'),
|
||||
]);
|
||||
|
||||
if (!driversRes.ok || !bookingsRes.ok) {
|
||||
throw new Error('Fehler beim Laden der Daten');
|
||||
}
|
||||
|
||||
const driversData = await driversRes.json();
|
||||
const bookingsData = await bookingsRes.json();
|
||||
|
||||
setDrivers(driversData.drivers || []);
|
||||
setBookings(bookingsData.bookings || []);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Fehler beim Laden der Daten');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleBooking = (bookingId: string) => {
|
||||
const newSelected = new Set(selectedBookings);
|
||||
if (newSelected.has(bookingId)) {
|
||||
newSelected.delete(bookingId);
|
||||
} else {
|
||||
newSelected.add(bookingId);
|
||||
}
|
||||
setSelectedBookings(newSelected);
|
||||
};
|
||||
|
||||
const selectAllOnDate = () => {
|
||||
if (!tourDate) return;
|
||||
|
||||
const targetDate = new Date(tourDate).toISOString().split('T')[0];
|
||||
const newSelected = new Set(selectedBookings);
|
||||
|
||||
bookings.forEach((booking) => {
|
||||
const bookingDate = new Date(booking.eventDate).toISOString().split('T')[0];
|
||||
if (bookingDate === targetDate) {
|
||||
newSelected.add(booking.id);
|
||||
}
|
||||
});
|
||||
|
||||
setSelectedBookings(newSelected);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!tourDate) {
|
||||
setError('Bitte wähle ein Tourdatum');
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedBookings.size === 0) {
|
||||
setError('Bitte wähle mindestens eine Buchung aus');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setCreating(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch('/api/tours', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tourDate,
|
||||
driverId: selectedDriver || null,
|
||||
bookingIds: Array.from(selectedBookings),
|
||||
optimizationType,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || 'Fehler beim Erstellen der Tour');
|
||||
}
|
||||
|
||||
const { tour } = await response.json();
|
||||
router.push(`/dashboard/tours/${tour.id}`);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Fehler beim Erstellen der Tour');
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const groupedBookings = bookings.reduce((acc, booking) => {
|
||||
const date = new Date(booking.eventDate).toLocaleDateString('de-DE', {
|
||||
weekday: 'short',
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
if (!acc[date]) acc[date] = [];
|
||||
acc[date].push(booking);
|
||||
return acc;
|
||||
}, {} as Record<string, Booking[]>);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-8 flex items-center justify-center">
|
||||
<div className="text-gray-400">Lade Daten...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-6xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Neue Tour erstellen</h1>
|
||||
<p className="text-gray-400">Wähle Buchungen aus und weise sie einem Fahrer zu</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 bg-red-500/10 border border-red-500/50 rounded-lg p-4 flex items-start gap-3">
|
||||
<FiAlertCircle className="text-red-400 mt-0.5 flex-shrink-0" size={20} />
|
||||
<div className="text-red-400">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-gray-800/50 border border-gray-700 rounded-lg p-6">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<FiCalendar className="inline mr-2" />
|
||||
Tourdatum *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={tourDate}
|
||||
onChange={(e) => setTourDate(e.target.value)}
|
||||
required
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:border-pink-500 focus:outline-none"
|
||||
/>
|
||||
{tourDate && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={selectAllOnDate}
|
||||
className="mt-2 text-sm text-pink-400 hover:text-pink-300"
|
||||
>
|
||||
Alle Buchungen an diesem Tag auswählen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800/50 border border-gray-700 rounded-lg p-6">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<FiTruck className="inline mr-2" />
|
||||
Fahrer zuweisen (optional)
|
||||
</label>
|
||||
<select
|
||||
value={selectedDriver}
|
||||
onChange={(e) => setSelectedDriver(e.target.value)}
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white focus:border-pink-500 focus:outline-none"
|
||||
>
|
||||
<option value="">-- Später zuweisen --</option>
|
||||
{drivers.map((driver) => (
|
||||
<option key={driver.id} value={driver.id}>
|
||||
{driver.name}
|
||||
{driver.vehiclePlate && ` (${driver.vehiclePlate})`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{drivers.length === 0 && (
|
||||
<p className="mt-2 text-sm text-yellow-400">
|
||||
Keine verfügbaren Fahrer
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800/50 border border-gray-700 rounded-lg p-6">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-4">
|
||||
Route-Optimierung
|
||||
</label>
|
||||
<div className="flex gap-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="fastest"
|
||||
checked={optimizationType === 'fastest'}
|
||||
onChange={(e) => setOptimizationType(e.target.value as 'fastest')}
|
||||
className="text-pink-500 focus:ring-pink-500"
|
||||
/>
|
||||
<span className="text-white">Kürzeste Route</span>
|
||||
<span className="text-gray-400 text-sm">(Entfernung)</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="schedule"
|
||||
checked={optimizationType === 'schedule'}
|
||||
onChange={(e) => setOptimizationType(e.target.value as 'schedule')}
|
||||
className="text-pink-500 focus:ring-pink-500"
|
||||
/>
|
||||
<span className="text-white">Nach Zeitfenster</span>
|
||||
<span className="text-gray-400 text-sm">(Aufbauzeiten)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800/50 border border-gray-700 rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<label className="text-sm font-medium text-gray-300">
|
||||
Buchungen auswählen * ({selectedBookings.size} ausgewählt)
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (selectedBookings.size === bookings.length) {
|
||||
setSelectedBookings(new Set());
|
||||
} else {
|
||||
setSelectedBookings(new Set(bookings.map(b => b.id)));
|
||||
}
|
||||
}}
|
||||
className="text-sm text-pink-400 hover:text-pink-300"
|
||||
>
|
||||
{selectedBookings.size === bookings.length ? 'Alle abwählen' : 'Alle auswählen'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{bookings.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
<FiMapPin className="mx-auto mb-2" size={32} />
|
||||
<p>Keine verfügbaren Buchungen</p>
|
||||
<p className="text-sm mt-1">
|
||||
Buchungen müssen den Status "Bereit zur Zuweisung" oder "Offen für Fahrer" haben
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4 max-h-[500px] overflow-y-auto">
|
||||
{Object.entries(groupedBookings).map(([date, dateBookings]) => (
|
||||
<div key={date}>
|
||||
<div className="text-sm font-medium text-gray-400 mb-2 sticky top-0 bg-gray-800/90 py-2">
|
||||
{date}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{dateBookings.map((booking) => (
|
||||
<div
|
||||
key={booking.id}
|
||||
onClick={() => toggleBooking(booking.id)}
|
||||
className={`
|
||||
p-4 rounded-lg border cursor-pointer transition-all
|
||||
${selectedBookings.has(booking.id)
|
||||
? 'bg-pink-500/10 border-pink-500/50'
|
||||
: 'bg-gray-900/50 border-gray-700 hover:border-gray-600'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-1">
|
||||
{selectedBookings.has(booking.id) ? (
|
||||
<FiCheckSquare className="text-pink-400" size={20} />
|
||||
) : (
|
||||
<FiSquare className="text-gray-500" size={20} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-medium text-white">
|
||||
{booking.bookingNumber}
|
||||
</span>
|
||||
<span className="text-gray-400">•</span>
|
||||
<span className="text-gray-300">
|
||||
{booking.customerName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<div className="flex items-center gap-1">
|
||||
<FiMapPin size={14} />
|
||||
{booking.eventCity}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<FiClock size={14} />
|
||||
{new Date(booking.setupTimeStart).toLocaleTimeString('de-DE', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
{' - '}
|
||||
{new Date(booking.setupTimeLatest).toLocaleTimeString('de-DE', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
{booking.eventAddress}, {booking.eventZip} {booking.eventCity}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
disabled={creating}
|
||||
className="px-6 py-3 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={creating || selectedBookings.size === 0 || !tourDate}
|
||||
className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-pink-600 to-red-600 text-white rounded-lg hover:from-pink-700 hover:to-red-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg"
|
||||
>
|
||||
<FiSave />
|
||||
{creating ? 'Erstelle Tour...' : 'Tour erstellen'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,430 +1,209 @@
|
||||
'use client';
|
||||
import { getServerSession } from 'next-auth';
|
||||
import { authOptions } from '@/lib/auth';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { prisma } from '@/lib/prisma';
|
||||
import Link from 'next/link';
|
||||
import { FiPlus, FiCalendar, FiTruck, FiMapPin, FiClock } from 'react-icons/fi';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { formatDate } from '@/lib/date-utils';
|
||||
import DashboardSidebar from '@/components/DashboardSidebar';
|
||||
import { useSession } from 'next-auth/react';
|
||||
export default async function ToursPage() {
|
||||
const session = await getServerSession(authOptions);
|
||||
|
||||
export default function ToursPage() {
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
const [tours, setTours] = useState<any[]>([]);
|
||||
const [drivers, setDrivers] = useState<any[]>([]);
|
||||
const [bookings, setBookings] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
if (!session || session.user.role !== 'ADMIN') {
|
||||
redirect('/login');
|
||||
}
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
tourDate: '',
|
||||
driverId: '',
|
||||
bookingIds: [] as string[],
|
||||
optimizationType: 'fastest' as 'fastest' | 'schedule',
|
||||
// Hole alle Touren, sortiert nach Datum
|
||||
const tours = await prisma.tour.findMany({
|
||||
include: {
|
||||
driver: {
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
vehiclePlate: true,
|
||||
},
|
||||
},
|
||||
bookings: {
|
||||
select: {
|
||||
id: true,
|
||||
bookingNumber: true,
|
||||
customerName: true,
|
||||
eventCity: true,
|
||||
},
|
||||
},
|
||||
tourStops: {
|
||||
select: {
|
||||
id: true,
|
||||
status: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: {
|
||||
tourDate: 'desc',
|
||||
},
|
||||
take: 50,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchTours();
|
||||
fetchDrivers();
|
||||
fetchUnassignedBookings();
|
||||
}, []);
|
||||
|
||||
const fetchTours = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/tours');
|
||||
const data = await res.json();
|
||||
setTours(data.tours || []);
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'PLANNED': return 'bg-blue-500/20 text-blue-400 border-blue-500/50';
|
||||
case 'IN_PROGRESS': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50';
|
||||
case 'COMPLETED': return 'bg-green-500/20 text-green-400 border-green-500/50';
|
||||
case 'CANCELLED': return 'bg-red-500/20 text-red-400 border-red-500/50';
|
||||
default: return 'bg-gray-500/20 text-gray-400 border-gray-500/50';
|
||||
}
|
||||
};
|
||||
|
||||
const fetchDrivers = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/drivers?available=true');
|
||||
const data = await res.json();
|
||||
setDrivers(data.drivers || []);
|
||||
} catch (error) {
|
||||
console.error('Drivers fetch error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUnassignedBookings = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/bookings');
|
||||
const data = await res.json();
|
||||
const unassigned = (data.bookings || []).filter((b: any) => {
|
||||
// Must be confirmed and not assigned to a tour
|
||||
if (!b.tourId && b.status === 'CONFIRMED') {
|
||||
// If booking has setup windows, check if any are already selected
|
||||
if (b.setupWindows && b.setupWindows.length > 0) {
|
||||
const hasSelectedWindow = b.setupWindows.some((w: any) => w.selected);
|
||||
return !hasSelectedWindow; // Exclude if any window is already selected
|
||||
}
|
||||
return true; // No setup windows, just check tourId
|
||||
}
|
||||
return false;
|
||||
});
|
||||
setBookings(unassigned);
|
||||
} catch (error) {
|
||||
console.error('Bookings fetch error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/tours', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setShowForm(false);
|
||||
setFormData({
|
||||
tourDate: '',
|
||||
driverId: '',
|
||||
bookingIds: [],
|
||||
optimizationType: 'fastest',
|
||||
});
|
||||
fetchTours();
|
||||
fetchUnassignedBookings();
|
||||
} else {
|
||||
alert('Fehler beim Erstellen');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Create error:', error);
|
||||
alert('Fehler beim Erstellen');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleBooking = (bookingId: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
bookingIds: prev.bookingIds.includes(bookingId)
|
||||
? prev.bookingIds.filter(id => id !== bookingId)
|
||||
: [...prev.bookingIds, bookingId],
|
||||
}));
|
||||
};
|
||||
|
||||
// Filter bookings by selected tour date
|
||||
const availableBookings = formData.tourDate
|
||||
? bookings.filter(booking => {
|
||||
const bookingDate = new Date(booking.eventDate).toISOString().split('T')[0];
|
||||
const tourDate = formData.tourDate;
|
||||
|
||||
// Check if event date matches
|
||||
if (bookingDate === tourDate) return true;
|
||||
|
||||
// Check if any setup window date matches
|
||||
if (booking.setupWindows && booking.setupWindows.length > 0) {
|
||||
return booking.setupWindows.some((window: any) => {
|
||||
const windowDate = new Date(window.setupDate).toISOString().split('T')[0];
|
||||
return windowDate === tourDate && !window.selected;
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
})
|
||||
: bookings;
|
||||
|
||||
// Group bookings by date for display
|
||||
const bookingsByDate = bookings.reduce((acc: any, booking: any) => {
|
||||
const date = new Date(booking.eventDate).toISOString().split('T')[0];
|
||||
if (!acc[date]) acc[date] = [];
|
||||
acc[date].push(booking);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
PLANNED: 'bg-blue-500/20 text-blue-400 border-blue-500/50',
|
||||
IN_PROGRESS: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50',
|
||||
COMPLETED: 'bg-green-500/20 text-green-400 border-green-500/50',
|
||||
CANCELLED: 'bg-red-500/20 text-red-400 border-red-500/50',
|
||||
};
|
||||
return styles[status] || 'bg-gray-500/20 text-gray-400 border-gray-500/50';
|
||||
};
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
PLANNED: 'Geplant',
|
||||
IN_PROGRESS: 'In Arbeit',
|
||||
COMPLETED: 'Abgeschlossen',
|
||||
CANCELLED: 'Abgebrochen',
|
||||
};
|
||||
return labels[status] || status;
|
||||
switch (status) {
|
||||
case 'PLANNED': return 'Geplant';
|
||||
case 'IN_PROGRESS': return 'Unterwegs';
|
||||
case 'COMPLETED': return 'Abgeschlossen';
|
||||
case 'CANCELLED': return 'Storniert';
|
||||
default: return status;
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
|
||||
<div className="flex">
|
||||
<DashboardSidebar user={session?.user} />
|
||||
<div className="flex-1 p-8">
|
||||
<p className="text-gray-300">Lädt...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
|
||||
<div className="flex">
|
||||
<DashboardSidebar user={session?.user} />
|
||||
<main className="flex-1 p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-cyan-500 bg-clip-text text-transparent">
|
||||
Touren
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Verwalten Sie Fahrer-Touren</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowForm(true)}
|
||||
className="px-6 py-3 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg hover:from-blue-700 hover:to-cyan-700 font-semibold shadow-lg"
|
||||
>
|
||||
+ Neue Tour
|
||||
</button>
|
||||
<div className="p-8">
|
||||
<div className="mb-8">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="text-sm text-gray-400 hover:text-gray-300 mb-2 inline-block transition-colors"
|
||||
>
|
||||
← Zurück zum Dashboard
|
||||
</Link>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white">Touren</h1>
|
||||
<p className="text-gray-400 mt-1">Verwalte Fahrer-Touren und Route-Optimierung</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/dashboard/tours/new"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-pink-600 to-red-600 text-white rounded-lg hover:from-pink-700 hover:to-red-700 transition-all shadow-lg"
|
||||
>
|
||||
<FiPlus />
|
||||
Neue Tour erstellen
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50 overflow-y-auto">
|
||||
<div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl shadow-2xl max-w-3xl w-full p-8 border border-gray-700 my-8">
|
||||
<h2 className="text-2xl font-bold mb-6 text-white">Neue Tour erstellen</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Tour-Datum *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={formData.tourDate}
|
||||
onChange={(e) => setFormData({ ...formData, tourDate: 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-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{tours.length === 0 ? (
|
||||
<div className="bg-gray-800/50 border border-gray-700 rounded-lg p-12 text-center">
|
||||
<FiTruck className="mx-auto text-gray-500 text-5xl mb-4" />
|
||||
<h3 className="text-xl font-bold text-gray-300 mb-2">Noch keine Touren</h3>
|
||||
<p className="text-gray-400 mb-6">Erstelle deine erste Tour, um Buchungen zu Fahrern zuzuweisen.</p>
|
||||
<Link
|
||||
href="/dashboard/tours/new"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-pink-600 to-red-600 text-white rounded-lg hover:from-pink-700 hover:to-red-700 transition-all"
|
||||
>
|
||||
<FiPlus />
|
||||
Tour erstellen
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{tours.map((tour) => {
|
||||
const completedStops = tour.tourStops.filter(s =>
|
||||
s.status === 'SETUP_COMPLETE' || s.status === 'PICKUP_COMPLETE'
|
||||
).length;
|
||||
const totalStops = tour.tourStops.length;
|
||||
const progress = totalStops > 0 ? (completedStops / totalStops) * 100 : 0;
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Fahrer
|
||||
</label>
|
||||
<select
|
||||
value={formData.driverId}
|
||||
onChange={(e) => setFormData({ ...formData, driverId: 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-blue-500"
|
||||
>
|
||||
<option value="">Noch keinen Fahrer zuweisen</option>
|
||||
{drivers.map((driver) => (
|
||||
<option key={driver.id} value={driver.id}>
|
||||
{driver.name} {driver.vehiclePlate ? `(${driver.vehiclePlate})` : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Routen-Optimierung
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, optimizationType: 'fastest' })}
|
||||
className={`px-4 py-3 rounded-lg border-2 transition-all ${
|
||||
formData.optimizationType === 'fastest'
|
||||
? 'bg-blue-600 border-blue-500 text-white'
|
||||
: 'bg-gray-700 border-gray-600 text-gray-300 hover:border-gray-500'
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold">🚗 Schnellste Route</div>
|
||||
<div className="text-xs mt-1 opacity-80">Nach Distanz/Zeit</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, optimizationType: 'schedule' })}
|
||||
className={`px-4 py-3 rounded-lg border-2 transition-all ${
|
||||
formData.optimizationType === 'schedule'
|
||||
? 'bg-purple-600 border-purple-500 text-white'
|
||||
: 'bg-gray-700 border-gray-600 text-gray-300 hover:border-gray-500'
|
||||
}`}
|
||||
>
|
||||
<div className="font-semibold">⏰ Nach Aufbauzeiten</div>
|
||||
<div className="text-xs mt-1 opacity-80">Zeitfenster beachten</div>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-2">
|
||||
{formData.optimizationType === 'fastest'
|
||||
? 'Optimiert nach kürzester Strecke/Zeit'
|
||||
: 'Berücksichtigt Aufbau-Zeitfenster der Buchungen'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Buchungen zuordnen ({formData.bookingIds.length} ausgewählt)
|
||||
</label>
|
||||
|
||||
{!formData.tourDate && (
|
||||
<div className="bg-yellow-500/20 border border-yellow-500/50 rounded-lg p-4 mb-4">
|
||||
<p className="text-yellow-300 text-sm">
|
||||
⚠️ Bitte wähle zuerst ein Tour-Datum aus, um passende Buchungen zu sehen
|
||||
</p>
|
||||
return (
|
||||
<Link
|
||||
key={tour.id}
|
||||
href={`/dashboard/tours/${tour.id}`}
|
||||
className="block bg-gray-800/50 border border-gray-700 rounded-lg p-6 hover:border-pink-500/50 hover:bg-gray-800/70 transition-all"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-xl font-bold text-white">{tour.tourNumber}</h3>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium border ${getStatusColor(tour.status)}`}>
|
||||
{getStatusLabel(tour.status)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{formData.tourDate && availableBookings.length === 0 && (
|
||||
<div className="bg-blue-500/20 border border-blue-500/50 rounded-lg p-4 mb-4">
|
||||
<p className="text-blue-300 text-sm">
|
||||
ℹ️ Keine bestätigten Buchungen für {new Date(formData.tourDate).toLocaleDateString('de-DE')} gefunden
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-gray-700/50 border border-gray-600 rounded-lg p-4 max-h-64 overflow-y-auto">
|
||||
{availableBookings.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{availableBookings.map((booking) => {
|
||||
const bookingDate = new Date(booking.eventDate).toISOString().split('T')[0];
|
||||
const isEventDate = bookingDate === formData.tourDate;
|
||||
const matchingWindows = booking.setupWindows?.filter((w: any) => {
|
||||
const windowDate = new Date(w.setupDate).toISOString().split('T')[0];
|
||||
return windowDate === formData.tourDate && !w.selected;
|
||||
}) || [];
|
||||
|
||||
return (
|
||||
<label
|
||||
key={booking.id}
|
||||
className="flex items-center gap-3 p-3 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.bookingIds.includes(booking.id)}
|
||||
onChange={() => toggleBooking(booking.id)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-white font-medium">{booking.bookingNumber}</p>
|
||||
{!isEventDate && matchingWindows.length > 0 && (
|
||||
<span className="px-2 py-0.5 bg-purple-600 text-white text-xs rounded-full">
|
||||
📦 Flexibler Aufbau
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">
|
||||
{booking.customerName} - Event: {formatDate(booking.eventDate)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">{booking.eventAddress}, {booking.eventCity}</p>
|
||||
|
||||
{!isEventDate && matchingWindows.length > 0 && (
|
||||
<div className="mt-2 space-y-1">
|
||||
{matchingWindows.map((window: any) => (
|
||||
<p key={window.id} className="text-xs text-purple-400">
|
||||
🕐 Aufbau-Option: {new Date(window.setupTimeStart).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
|
||||
{' - '}
|
||||
{new Date(window.setupTimeEnd).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
|
||||
{window.preferred && ' ⭐'}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isEventDate && booking.setupTimeStart && (
|
||||
<p className="text-xs text-blue-400 mt-1">
|
||||
⏰ Aufbau: {new Date(booking.setupTimeStart).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
|
||||
{booking.setupTimeLatest && ` - ${new Date(booking.setupTimeLatest).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
|
||||
<div className="flex items-center gap-6 text-sm text-gray-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<FiCalendar size={16} />
|
||||
{new Date(tour.tourDate).toLocaleDateString('de-DE', {
|
||||
weekday: 'short',
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-400 text-center py-4">
|
||||
{formData.tourDate ? 'Keine Buchungen für dieses Datum' : 'Bitte Datum auswählen'}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{tour.driver && (
|
||||
<div className="flex items-center gap-2">
|
||||
<FiTruck size={16} />
|
||||
{tour.driver.name}
|
||||
{tour.driver.vehiclePlate && (
|
||||
<span className="text-gray-500">({tour.driver.vehiclePlate})</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<FiMapPin size={16} />
|
||||
{totalStops} {totalStops === 1 ? 'Stopp' : 'Stopps'}
|
||||
</div>
|
||||
|
||||
{tour.estimatedDuration && (
|
||||
<div className="flex items-center gap-2">
|
||||
<FiClock size={16} />
|
||||
{Math.round(tour.estimatedDuration / 60)}h
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowForm(false)}
|
||||
className="flex-1 px-6 py-3 bg-gray-700 text-gray-300 rounded-lg hover:bg-gray-600 font-semibold"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg hover:from-blue-700 hover:to-cyan-700 font-semibold"
|
||||
>
|
||||
Erstellen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Fortschrittsbalken */}
|
||||
{totalStops > 0 && tour.status !== 'CANCELLED' && (
|
||||
<div className="mt-4">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-xs text-gray-400">
|
||||
Fortschritt: {completedStops} von {totalStops} Stopps abgeschlossen
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">{progress.toFixed(0)}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-gradient-to-r from-pink-500 to-red-500 h-2 rounded-full transition-all"
|
||||
style={{ width: `${progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{tours.map((tour) => (
|
||||
<div
|
||||
key={tour.id}
|
||||
onClick={() => router.push(`/dashboard/tours/${tour.id}`)}
|
||||
className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-xl p-6 hover:shadow-2xl transition-all cursor-pointer border border-gray-700 hover:border-blue-500"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white">{tour.tourNumber}</h3>
|
||||
<p className="text-sm text-gray-400">{formatDate(tour.tourDate)}</p>
|
||||
</div>
|
||||
<span className={`px-3 py-1 text-xs font-semibold rounded-full border ${getStatusBadge(tour.status)}`}>
|
||||
{getStatusLabel(tour.status)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-gray-400 space-y-2">
|
||||
<p>
|
||||
<span className="font-medium text-gray-300">Fahrer:</span>{' '}
|
||||
{tour.driver ? tour.driver.name : 'Nicht zugewiesen'}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-medium text-gray-300">Buchungen:</span> {tour.bookings.length}
|
||||
</p>
|
||||
{tour.totalDistance && (
|
||||
<p>
|
||||
<span className="font-medium text-gray-300">Strecke:</span> {tour.totalDistance} km
|
||||
</p>
|
||||
{/* Buchungen-Preview */}
|
||||
{tour.bookings.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-700">
|
||||
<div className="text-xs text-gray-400 mb-2">Buchungen:</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tour.bookings.slice(0, 5).map((booking) => (
|
||||
<span
|
||||
key={booking.id}
|
||||
className="px-2 py-1 bg-gray-700/50 text-gray-300 text-xs rounded"
|
||||
>
|
||||
{booking.bookingNumber}
|
||||
</span>
|
||||
))}
|
||||
{tour.bookings.length > 5 && (
|
||||
<span className="px-2 py-1 text-gray-500 text-xs">
|
||||
+{tour.bookings.length - 5} weitere
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{tour.estimatedDuration && (
|
||||
<p>
|
||||
<span className="font-medium text-gray-300">Dauer:</span> ~{tour.estimatedDuration} Min
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{tours.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-400">Noch keine Touren vorhanden</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user