289 lines
10 KiB
TypeScript
289 lines
10 KiB
TypeScript
"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 PhotoboxDetailPage({
|
|
params,
|
|
}: {
|
|
params: { id: string };
|
|
}) {
|
|
const router = useRouter();
|
|
const { data: session } = useSession();
|
|
const [photobox, setPhotobox] = useState<any>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [editing, setEditing] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
status: "",
|
|
description: "",
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchPhotobox();
|
|
}, [params.id]);
|
|
|
|
const fetchPhotobox = async () => {
|
|
try {
|
|
const res = await fetch(`/api/photoboxes/${params.id}`);
|
|
const data = await res.json();
|
|
setPhotobox(data.photobox);
|
|
setFormData({
|
|
status: data.photobox.status,
|
|
description: data.photobox.description || "",
|
|
});
|
|
} catch (error) {
|
|
console.error("Fetch error:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleUpdate = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
try {
|
|
const res = await fetch(`/api/photoboxes/${params.id}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
if (res.ok) {
|
|
setEditing(false);
|
|
fetchPhotobox();
|
|
} else {
|
|
alert("Fehler beim Aktualisieren");
|
|
}
|
|
} catch (error) {
|
|
console.error("Update error:", error);
|
|
alert("Fehler beim Aktualisieren");
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!confirm("Möchten Sie diese Fotobox wirklich löschen?")) return;
|
|
|
|
try {
|
|
const res = await fetch(`/api/photoboxes/${params.id}`, {
|
|
method: "DELETE",
|
|
});
|
|
|
|
if (res.ok) {
|
|
router.push("/dashboard/photoboxes");
|
|
} 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-white">Lädt...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!photobox) {
|
|
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-white">Fotobox nicht gefunden</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const getModelLabel = (model: string) => {
|
|
const labels: Record<string, string> = {
|
|
VINTAGE_SMILE: "Vintage Smile",
|
|
VINTAGE_PHOTOS: "Vintage Photos",
|
|
NOSTALGIE: "Nostalgie",
|
|
MAGIC_MIRROR: "Magic Mirror",
|
|
};
|
|
return labels[model] || model;
|
|
};
|
|
|
|
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 transition-colors"
|
|
>
|
|
← Zurück
|
|
</button>
|
|
|
|
<div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-lg p-8 mb-6">
|
|
<div className="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-white">
|
|
{getModelLabel(photobox.model)}
|
|
</h1>
|
|
<p className="text-gray-400 mt-1">
|
|
SN: {photobox.serialNumber}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<button
|
|
onClick={() => setEditing(!editing)}
|
|
className="px-4 py-2 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 transition-all"
|
|
>
|
|
{editing ? "Abbrechen" : "Bearbeiten"}
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
className="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 font-semibold shadow-lg transition-all"
|
|
>
|
|
Löschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{editing ? (
|
|
<form onSubmit={handleUpdate} className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
Status
|
|
</label>
|
|
<select
|
|
value={formData.status}
|
|
onChange={(e) =>
|
|
setFormData({ ...formData, status: 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"
|
|
>
|
|
<option value="AVAILABLE">Verfügbar</option>
|
|
<option value="IN_USE">Im Einsatz</option>
|
|
<option value="MAINTENANCE">Wartung</option>
|
|
<option value="DAMAGED">Defekt</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
Beschreibung
|
|
</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) =>
|
|
setFormData({
|
|
...formData,
|
|
description: 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"
|
|
rows={4}
|
|
/>
|
|
</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 shadow-lg transition-all"
|
|
>
|
|
Speichern
|
|
</button>
|
|
</form>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<p className="text-sm text-gray-400">Standort</p>
|
|
<p className="text-lg font-semibold text-white">
|
|
{photobox.location.name}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-400">Status</p>
|
|
<p className="text-lg font-semibold text-white">
|
|
{photobox.status}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-400">Erstellt</p>
|
|
<p className="text-lg font-semibold text-white">
|
|
{formatDate(photobox.createdAt)}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-400">Letzte Wartung</p>
|
|
<p className="text-lg font-semibold text-white">
|
|
{photobox.lastMaintenance
|
|
? formatDate(photobox.lastMaintenance)
|
|
: "Keine"}
|
|
</p>
|
|
</div>
|
|
{photobox.description && (
|
|
<div className="col-span-2">
|
|
<p className="text-sm text-gray-400">Beschreibung</p>
|
|
<p className="text-lg text-white">
|
|
{photobox.description}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-xl shadow-lg p-8">
|
|
<h2 className="text-2xl font-bold text-white mb-6">
|
|
Buchungen ({photobox.bookings.length})
|
|
</h2>
|
|
{photobox.bookings.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{photobox.bookings.map((booking: any) => (
|
|
<div
|
|
key={booking.id}
|
|
onClick={() =>
|
|
router.push(`/dashboard/bookings/${booking.id}`)
|
|
}
|
|
className="p-4 bg-gray-700/50 border border-gray-600 rounded-lg hover:bg-gray-700 hover:border-gray-500 cursor-pointer transition-all"
|
|
>
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<p className="font-semibold text-white">
|
|
{booking.bookingNumber}
|
|
</p>
|
|
<p className="text-sm text-gray-400">
|
|
{booking.customerName}
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-medium text-white">
|
|
{formatDate(booking.eventDate)}
|
|
</p>
|
|
<p className="text-sm text-gray-400">
|
|
{booking.status}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-400">Keine Buchungen vorhanden</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|