261 lines
10 KiB
TypeScript
261 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import DashboardSidebar from '@/components/DashboardSidebar';
|
|
import { useSession } from 'next-auth/react';
|
|
|
|
export default function DriversPage() {
|
|
const router = useRouter();
|
|
const { data: session } = useSession();
|
|
const [drivers, setDrivers] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showForm, setShowForm] = useState(false);
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
phoneNumber: '',
|
|
vehiclePlate: '',
|
|
vehicleModel: '',
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchDrivers();
|
|
}, []);
|
|
|
|
const fetchDrivers = async () => {
|
|
try {
|
|
const res = await fetch('/api/drivers');
|
|
const data = await res.json();
|
|
setDrivers(data.drivers || []);
|
|
} catch (error) {
|
|
console.error('Fetch error:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
try {
|
|
const res = await fetch('/api/drivers', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
if (res.ok) {
|
|
setShowForm(false);
|
|
setFormData({
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
phoneNumber: '',
|
|
vehiclePlate: '',
|
|
vehicleModel: '',
|
|
});
|
|
fetchDrivers();
|
|
} else {
|
|
const data = await res.json();
|
|
alert(data.error || 'Fehler beim Erstellen');
|
|
}
|
|
} catch (error) {
|
|
console.error('Create error:', error);
|
|
alert('Fehler beim Erstellen');
|
|
}
|
|
};
|
|
|
|
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-red-400 to-pink-500 bg-clip-text text-transparent">
|
|
Fahrer
|
|
</h1>
|
|
<p className="text-gray-400 mt-1">Verwalten Sie alle Fahrer</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowForm(true)}
|
|
className="px-6 py-3 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-lg hover:from-red-700 hover:to-pink-700 font-semibold shadow-lg"
|
|
>
|
|
+ Neuer Fahrer
|
|
</button>
|
|
</div>
|
|
|
|
{showForm && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center p-4 z-50">
|
|
<div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl shadow-2xl max-w-2xl w-full p-8 border border-gray-700">
|
|
<h2 className="text-2xl font-bold mb-6 text-white">Neuen Fahrer anlegen</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">
|
|
Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: 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"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
E-Mail *
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: 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"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
Passwort *
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={formData.password}
|
|
onChange={(e) => setFormData({ ...formData, password: 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"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
Telefon
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={formData.phoneNumber}
|
|
onChange={(e) => setFormData({ ...formData, phoneNumber: 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"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
Fahrzeugkennzeichen
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.vehiclePlate}
|
|
onChange={(e) => setFormData({ ...formData, vehiclePlate: 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"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
Fahrzeugmodell
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.vehicleModel}
|
|
onChange={(e) => setFormData({ ...formData, vehicleModel: 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"
|
|
/>
|
|
</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-red-600 to-pink-600 text-white rounded-lg hover:from-red-700 hover:to-pink-700 font-semibold"
|
|
>
|
|
Erstellen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{drivers.map((driver) => (
|
|
<div
|
|
key={driver.id}
|
|
onClick={() => router.push(`/dashboard/drivers/${driver.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-red-500"
|
|
>
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white">{driver.name}</h3>
|
|
<p className="text-sm text-gray-400">{driver.email}</p>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
{driver.available ? (
|
|
<span className="px-3 py-1 text-xs font-semibold rounded-full bg-green-500/20 text-green-400 border border-green-500/50">
|
|
Verfügbar
|
|
</span>
|
|
) : (
|
|
<span className="px-3 py-1 text-xs font-semibold rounded-full bg-red-500/20 text-red-400 border border-red-500/50">
|
|
Beschäftigt
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-gray-400 space-y-2">
|
|
{driver.phoneNumber && (
|
|
<p><span className="font-medium text-gray-300">Telefon:</span> {driver.phoneNumber}</p>
|
|
)}
|
|
{driver.vehiclePlate && (
|
|
<p><span className="font-medium text-gray-300">Kennzeichen:</span> {driver.vehiclePlate}</p>
|
|
)}
|
|
{driver.vehicleModel && (
|
|
<p><span className="font-medium text-gray-300">Fahrzeug:</span> {driver.vehicleModel}</p>
|
|
)}
|
|
<p className="pt-2 border-t border-gray-700">
|
|
<span className="font-medium text-gray-300">Touren:</span> {driver._count.driverTours}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{drivers.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<p className="text-gray-400">Noch keine Fahrer vorhanden</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|