Initial commit - SaveTheMoment Atlas Basis-Setup
This commit is contained in:
Dennis Forte
336
app/dashboard/drivers/[id]/page.tsx
Normal file
336
app/dashboard/drivers/[id]/page.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
"use client";
|
||||
|
||||
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 function DriverDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: { id: string };
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
const [driver, setDriver] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phoneNumber: "",
|
||||
vehiclePlate: "",
|
||||
vehicleModel: "",
|
||||
available: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchDriver();
|
||||
}, [params.id]);
|
||||
|
||||
const fetchDriver = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/drivers/${params.id}`);
|
||||
const data = await res.json();
|
||||
setDriver(data.driver);
|
||||
setFormData({
|
||||
name: data.driver.name,
|
||||
email: data.driver.email,
|
||||
phoneNumber: data.driver.phoneNumber || "",
|
||||
vehiclePlate: data.driver.vehiclePlate || "",
|
||||
vehicleModel: data.driver.vehicleModel || "",
|
||||
available: data.driver.available,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Fetch error:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/drivers/${params.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setEditing(false);
|
||||
fetchDriver();
|
||||
} else {
|
||||
alert("Fehler beim Aktualisieren");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Update error:", error);
|
||||
alert("Fehler beim Aktualisieren");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm("Möchten Sie diesen Fahrer wirklich löschen?")) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/drivers/${params.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
router.push("/dashboard/drivers");
|
||||
} else {
|
||||
alert("Fehler beim Löschen");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Delete error:", error);
|
||||
alert("Fehler beim Löschen");
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
if (!driver) {
|
||||
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">Fahrer nicht gefunden</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-5xl mx-auto">
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="mb-6 text-red-400 hover:text-red-300 font-medium"
|
||||
>
|
||||
← Zurück
|
||||
</button>
|
||||
|
||||
<div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl shadow-2xl p-8 mb-6 border border-gray-700">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white">
|
||||
{driver.name}
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">{driver.email}</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setEditing(!editing)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-semibold"
|
||||
>
|
||||
{editing ? "Abbrechen" : "Bearbeiten"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-semibold"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editing ? (
|
||||
<form onSubmit={handleUpdate} 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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Kennzeichen
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Fahrzeug
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Verfügbarkeit
|
||||
</label>
|
||||
<select
|
||||
value={formData.available ? "true" : "false"}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
available: e.target.value === "true",
|
||||
})
|
||||
}
|
||||
className="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded-lg"
|
||||
>
|
||||
<option value="true">Verfügbar</option>
|
||||
<option value="false">Nicht verfügbar</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg hover:from-green-700 hover:to-emerald-700 font-semibold"
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Telefon</p>
|
||||
<p className="text-lg font-semibold text-white">
|
||||
{driver.phoneNumber || "Nicht angegeben"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Kennzeichen</p>
|
||||
<p className="text-lg font-semibold text-white">
|
||||
{driver.vehiclePlate || "Nicht angegeben"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Fahrzeug</p>
|
||||
<p className="text-lg font-semibold text-white">
|
||||
{driver.vehicleModel || "Nicht angegeben"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Verfügbarkeit</p>
|
||||
<p className="text-lg font-semibold text-white">
|
||||
{driver.available ? "✓ Verfügbar" : "✗ Nicht verfügbar"}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">Erstellt</p>
|
||||
<p className="text-lg font-semibold text-white">
|
||||
{formatDate(driver.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl shadow-2xl p-8 border border-gray-700">
|
||||
<h2 className="text-2xl font-bold mb-6 text-white">
|
||||
Letzte Touren ({driver.driverTours?.length || 0})
|
||||
</h2>
|
||||
{driver.driverTours && driver.driverTours.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{driver.driverTours.map((tour: any) => (
|
||||
<div
|
||||
key={tour.id}
|
||||
onClick={() => router.push(`/dashboard/tours/${tour.id}`)}
|
||||
className="p-4 bg-gray-700/50 border border-gray-600 rounded-lg hover:bg-gray-700 cursor-pointer transition-colors"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<p className="font-semibold text-white">
|
||||
{tour.tourNumber}
|
||||
</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
{tour.bookings.length} Buchungen
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-medium text-white">
|
||||
{formatDate(tour.tourDate)}
|
||||
</p>
|
||||
<p className="text-sm text-gray-400">{tour.status}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-400">Keine Touren vorhanden</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user