Initial commit - SaveTheMoment Atlas Basis-Setup
This commit is contained in:
Dennis Forte
260
app/dashboard/photoboxes/page.tsx
Normal file
260
app/dashboard/photoboxes/page.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
'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 PhotoboxesPage() {
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
const [photoboxes, setPhotoboxes] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [locations, setLocations] = useState<any[]>([]);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
locationId: '',
|
||||
model: 'VINTAGE_SMILE',
|
||||
serialNumber: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchPhotoboxes();
|
||||
fetchLocations();
|
||||
}, []);
|
||||
|
||||
const fetchPhotoboxes = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/photoboxes');
|
||||
const data = await res.json();
|
||||
setPhotoboxes(data.photoboxes || []);
|
||||
} catch (error) {
|
||||
console.error('Fetch error:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchLocations = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/locations');
|
||||
const data = await res.json();
|
||||
setLocations(data.locations || []);
|
||||
} catch (error) {
|
||||
console.error('Locations fetch error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/photoboxes', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setShowForm(false);
|
||||
setFormData({
|
||||
locationId: '',
|
||||
model: 'VINTAGE_SMILE',
|
||||
serialNumber: '',
|
||||
description: '',
|
||||
});
|
||||
fetchPhotoboxes();
|
||||
} else {
|
||||
alert('Fehler beim Erstellen');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Create error:', error);
|
||||
alert('Fehler beim Erstellen');
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const styles: Record<string, string> = {
|
||||
AVAILABLE: 'bg-green-500/20 text-green-400 border border-green-500/50',
|
||||
IN_USE: 'bg-blue-500/20 text-blue-400 border border-blue-500/50',
|
||||
MAINTENANCE: 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/50',
|
||||
DAMAGED: 'bg-red-500/20 text-red-400 border border-red-500/50',
|
||||
};
|
||||
return styles[status] || 'bg-gray-500/20 text-gray-400 border border-gray-500/50';
|
||||
};
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
AVAILABLE: 'Verfügbar',
|
||||
IN_USE: 'Im Einsatz',
|
||||
MAINTENANCE: 'Wartung',
|
||||
DAMAGED: 'Defekt',
|
||||
};
|
||||
return labels[status] || status;
|
||||
};
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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 text-white">Fotoboxen</h1>
|
||||
<p className="text-gray-400 mt-1">Verwalten Sie alle Fotoboxen</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 transition-all"
|
||||
>
|
||||
+ Neue Fotobox
|
||||
</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 border border-gray-700 rounded-xl shadow-2xl max-w-2xl w-full p-8">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Neue Fotobox erstellen</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Standort
|
||||
</label>
|
||||
<select
|
||||
value={formData.locationId}
|
||||
onChange={(e) => setFormData({ ...formData, locationId: 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"
|
||||
required
|
||||
>
|
||||
<option value="">Standort wählen</option>
|
||||
{locations.map((loc) => (
|
||||
<option key={loc.id} value={loc.id}>
|
||||
{loc.name} ({loc.city})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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="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="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>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Seriennummer
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.serialNumber}
|
||||
onChange={(e) => setFormData({ ...formData, serialNumber: 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"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Beschreibung (optional)
|
||||
</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={3}
|
||||
/>
|
||||
</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 transition-colors"
|
||||
>
|
||||
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 transition-all"
|
||||
>
|
||||
Erstellen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{photoboxes.map((box) => (
|
||||
<div
|
||||
key={box.id}
|
||||
onClick={() => router.push(`/dashboard/photoboxes/${box.id}`)}
|
||||
className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-lg shadow-md p-6 hover:shadow-xl hover:border-gray-600 transition-all cursor-pointer"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white">{getModelLabel(box.model)}</h3>
|
||||
<p className="text-sm text-gray-400">{box.serialNumber}</p>
|
||||
</div>
|
||||
<span className={`px-3 py-1 text-xs font-semibold rounded-full ${getStatusBadge(box.status)}`}>
|
||||
{getStatusLabel(box.status)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-gray-400 space-y-1">
|
||||
<p><span className="font-medium text-gray-300">Standort:</span> {box.location.name}</p>
|
||||
<p><span className="font-medium text-gray-300">Buchungen:</span> {box._count.bookings}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{photoboxes.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-400">Noch keine Fotoboxen vorhanden</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user