feat: Add Spotify-style backdrop, Cascade OCR, Smart Scan Flow & OCR Dashboard
- BottleGrid: Implement blurred backdrop effect for bottle cards - Cascade OCR: TextDetector → RegEx → Fuzzy Match → window.ai pipeline - Smart Scan: Native OCR for Android, Live Text fallback for iOS - OCR Dashboard: Admin page at /admin/ocr-logs with stats and scan history - Features: Add feature flags in src/config/features.ts - SQL: Add ocr_logs table migration - Services: Update analyze-bottle to use OpenRouter, add save-ocr-log
This commit is contained in:
@@ -16,6 +16,7 @@ import SessionABVCurve from '@/components/SessionABVCurve';
|
||||
import OfflineIndicator from '@/components/OfflineIndicator';
|
||||
import BulkScanSheet from '@/components/BulkScanSheet';
|
||||
import BottleSkeletonCard from '@/components/BottleSkeletonCard';
|
||||
import ScanAndTasteFlow from '@/components/ScanAndTasteFlow';
|
||||
|
||||
interface Buddy {
|
||||
id: string;
|
||||
@@ -34,12 +35,20 @@ interface Session {
|
||||
name: string;
|
||||
scheduled_at: string;
|
||||
ended_at?: string;
|
||||
is_blind: boolean;
|
||||
is_revealed: boolean;
|
||||
user_id: string;
|
||||
}
|
||||
|
||||
interface SessionTasting {
|
||||
id: string;
|
||||
rating: number;
|
||||
tasted_at: string;
|
||||
blind_label?: string;
|
||||
guess_abv?: number;
|
||||
guess_age?: number;
|
||||
guess_region?: string;
|
||||
guess_points?: number;
|
||||
bottles: {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -57,21 +66,36 @@ interface SessionTasting {
|
||||
}
|
||||
|
||||
export default function SessionDetailPage() {
|
||||
const { t } = useI18n();
|
||||
const { t, locale } = useI18n();
|
||||
const { id } = useParams();
|
||||
const router = useRouter();
|
||||
const { activeSession, setActiveSession } = useSession();
|
||||
const supabase = createClient();
|
||||
|
||||
const [session, setSession] = useState<Session | null>(null);
|
||||
const [participants, setParticipants] = useState<Participant[]>([]);
|
||||
const [tastings, setTastings] = useState<SessionTasting[]>([]);
|
||||
const [participants, setParticipants] = useState<Participant[]>([]);
|
||||
const [allBuddies, setAllBuddies] = useState<Buddy[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const { user, isLoading: isAuthLoading } = useAuth();
|
||||
const { activeSession, setActiveSession } = useSession();
|
||||
const [isAddingParticipant, setIsAddingParticipant] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
const [isBulkScanOpen, setIsBulkScanOpen] = useState(false);
|
||||
const [isUpdatingBlind, setIsUpdatingBlind] = useState(false);
|
||||
|
||||
// New: Direct Scan Flow
|
||||
const [isScanFlowOpen, setIsScanFlowOpen] = useState(false);
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setSelectedFile(file);
|
||||
setIsScanFlowOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthLoading && user) {
|
||||
@@ -131,6 +155,11 @@ export default function SessionDetailPage() {
|
||||
id,
|
||||
rating,
|
||||
tasted_at,
|
||||
blind_label,
|
||||
guess_abv,
|
||||
guess_age,
|
||||
guess_region,
|
||||
guess_points,
|
||||
bottles(id, name, distillery, image_url, abv, category, processing_status),
|
||||
tasting_tags(tags(name))
|
||||
`)
|
||||
@@ -183,21 +212,67 @@ export default function SessionDetailPage() {
|
||||
|
||||
const handleCloseSession = async () => {
|
||||
if (!confirm('Möchtest du diese Session wirklich abschließen?')) return;
|
||||
|
||||
setIsClosing(true);
|
||||
const result = await closeSession(id as string);
|
||||
|
||||
if (result.success) {
|
||||
const { success } = await closeSession(id as string);
|
||||
if (success) {
|
||||
if (activeSession?.id === id) {
|
||||
setActiveSession(null);
|
||||
}
|
||||
fetchSessionData();
|
||||
} else {
|
||||
alert(result.error);
|
||||
}
|
||||
setIsClosing(false);
|
||||
};
|
||||
|
||||
const handleToggleBlindMode = async () => {
|
||||
if (!session) return;
|
||||
setIsUpdatingBlind(true);
|
||||
const { error } = await supabase
|
||||
.from('tasting_sessions')
|
||||
.update({ is_blind: !session.is_blind })
|
||||
.eq('id', id);
|
||||
|
||||
if (!error) {
|
||||
fetchSessionData();
|
||||
}
|
||||
setIsUpdatingBlind(false);
|
||||
};
|
||||
|
||||
const handleRevealBlindMode = async () => {
|
||||
if (!session) return;
|
||||
if (!confirm('Möchtest du alle Flaschen aufdecken?')) return;
|
||||
|
||||
setIsUpdatingBlind(true);
|
||||
const { error } = await supabase
|
||||
.from('tasting_sessions')
|
||||
.update({ is_revealed: true })
|
||||
.eq('id', id);
|
||||
|
||||
if (!error) {
|
||||
fetchSessionData();
|
||||
}
|
||||
setIsUpdatingBlind(false);
|
||||
};
|
||||
|
||||
const calculateGuessPoints = (tasting: SessionTasting) => {
|
||||
let points = 0;
|
||||
|
||||
// ABV Scoring (100 base - 10 per 1% dev)
|
||||
if (tasting.guess_abv && tasting.bottles.abv) {
|
||||
const abvDev = Math.abs(tasting.guess_abv - tasting.bottles.abv);
|
||||
points += Math.max(0, 100 - (abvDev * 10));
|
||||
}
|
||||
|
||||
// Age Scoring (100 base - 5 per year dev)
|
||||
// Note: bottles table has 'age' as integer
|
||||
const bottleAge = (tasting.bottles as any).age;
|
||||
if (tasting.guess_age && bottleAge) {
|
||||
const ageDev = Math.abs(tasting.guess_age - bottleAge);
|
||||
points += Math.max(0, 100 - (ageDev * 5));
|
||||
}
|
||||
|
||||
return Math.round(points);
|
||||
};
|
||||
|
||||
const handleDeleteSession = async () => {
|
||||
if (!confirm('Möchtest du diese Session wirklich löschen? Alle Verknüpfungen gehen verloren.')) return;
|
||||
|
||||
@@ -233,95 +308,129 @@ export default function SessionDetailPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-zinc-950 p-4 md:p-12 lg:p-24">
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
{/* Back Button */}
|
||||
<main className="min-h-screen bg-[var(--background)] p-4 md:p-12 lg:p-24 pb-32">
|
||||
<div className="max-w-6xl mx-auto space-y-12">
|
||||
{/* Back Link & Info */}
|
||||
<div className="flex justify-between items-center">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center gap-2 text-zinc-500 hover:text-orange-600 transition-colors font-bold uppercase text-[10px] tracking-[0.2em]"
|
||||
className="group inline-flex items-center gap-3 text-zinc-500 hover:text-orange-600 transition-all font-black uppercase text-[10px] tracking-[0.3em]"
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
<div className="p-2 rounded-full border border-zinc-800 group-hover:border-orange-500/50 transition-colors">
|
||||
<ChevronLeft size={16} />
|
||||
</div>
|
||||
Alle Sessions
|
||||
</Link>
|
||||
<OfflineIndicator />
|
||||
<div className="flex items-center gap-4">
|
||||
<OfflineIndicator />
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
capture="environment"
|
||||
className="hidden"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileSelect}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hero */}
|
||||
<header className="bg-zinc-900 rounded-3xl p-8 border border-zinc-800 shadow-xl relative overflow-hidden group">
|
||||
{/* Visual Eyecatcher: Background Glow */}
|
||||
{/* Immersive Header */}
|
||||
<header className="relative bg-zinc-900 border border-white/5 rounded-[48px] p-8 md:p-12 shadow-[0_20px_80px_rgba(0,0,0,0.5)] overflow-hidden group">
|
||||
{/* Background Visuals */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-zinc-900 via-zinc-900 to-black z-0" />
|
||||
{tastings.length > 0 && tastings[0].bottles.image_url && (
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full opacity-20 dark:opacity-30 pointer-events-none">
|
||||
<div className="absolute top-0 right-0 w-2/3 h-full opacity-30 z-0">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center scale-150 blur-3xl transition-all duration-1000 group-hover:scale-125"
|
||||
className="absolute inset-0 bg-cover bg-center scale-150 blur-[100px]"
|
||||
style={{ backgroundImage: `url(${tastings[0].bottles.image_url})` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute top-0 right-0 p-8 opacity-5 text-zinc-400">
|
||||
<GlassWater size={120} />
|
||||
</div>
|
||||
{/* Decorative Rings */}
|
||||
<div className="absolute -top-24 -right-24 w-96 h-96 border border-orange-500/10 rounded-full z-0" />
|
||||
<div className="absolute -top-12 -right-12 w-96 h-96 border border-orange-500/5 rounded-full z-0" />
|
||||
|
||||
<div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
|
||||
<div className="flex-1 flex flex-col md:flex-row gap-6 items-start md:items-center">
|
||||
{/* Visual Eyecatcher: Bottle Preview */}
|
||||
{tastings.length > 0 && tastings[0].bottles.image_url && (
|
||||
<div className="shrink-0 relative">
|
||||
<div className="w-20 h-20 md:w-24 md:h-24 rounded-2xl bg-zinc-800 border-2 border-orange-500/20 shadow-2xl overflow-hidden relative group-hover:rotate-3 transition-transform duration-500">
|
||||
<img
|
||||
src={tastings[0].bottles.image_url}
|
||||
alt={tastings[0].bottles.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
<div className="absolute -bottom-2 -right-2 bg-orange-600 text-white text-[10px] font-black px-2 py-1 rounded-lg shadow-lg rotate-12">
|
||||
LATEST
|
||||
</div>
|
||||
<div className="relative z-10 flex flex-col lg:flex-row justify-between items-start lg:items-end gap-8">
|
||||
<div className="space-y-6 flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="px-3 py-1 bg-orange-600/10 border border-orange-500/20 rounded-full flex items-center gap-2">
|
||||
<Sparkles size={12} className="text-orange-500 animate-pulse" />
|
||||
<span className="text-[10px] font-black text-orange-500 uppercase tracking-[0.2em]">Tasting Session</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 text-orange-600 font-black uppercase text-[10px] tracking-widest">
|
||||
<Sparkles size={14} />
|
||||
Tasting Session
|
||||
</div>
|
||||
{session.ended_at && (
|
||||
<span className="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 text-[8px] font-black px-2 py-0.5 rounded-md uppercase tracking-widest border border-zinc-200 dark:border-zinc-700">Abgeschlossen</span>
|
||||
)}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-zinc-50 tracking-tighter">
|
||||
{session.name}
|
||||
</h1>
|
||||
<div className="flex flex-wrap items-center gap-3 sm:gap-6 text-zinc-500 font-bold text-sm">
|
||||
<span className="flex items-center gap-1.5 bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-800 shadow-sm">
|
||||
<Calendar size={16} className="text-orange-600" />
|
||||
{new Date(session.scheduled_at).toLocaleDateString('de-DE')}
|
||||
{session.ended_at && (
|
||||
<span className="px-3 py-1 bg-zinc-800/50 border border-zinc-700/50 rounded-full text-[10px] font-black text-zinc-500 uppercase tracking-[0.2em]">Archiviert</span>
|
||||
)}
|
||||
{session.is_blind && (
|
||||
<span className="px-3 py-1 bg-purple-600/10 border border-purple-500/20 rounded-full flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-purple-500 rounded-full animate-pulse" />
|
||||
<span className="text-[10px] font-black text-purple-500 uppercase tracking-[0.2em]">Blind Modus</span>
|
||||
</span>
|
||||
{participants.length > 0 && (
|
||||
<div className="flex items-center gap-2 bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-800 shadow-sm">
|
||||
<Users size={16} className="text-orange-600" />
|
||||
<AvatarStack names={participants.map(p => p.buddies.name)} limit={5} />
|
||||
</div>
|
||||
)}
|
||||
{tastings.length > 0 && (
|
||||
<span className="flex items-center gap-1.5 bg-zinc-800/40 px-3 py-1.5 rounded-2xl border border-zinc-800 shadow-sm transition-all animate-in fade-in slide-in-from-left-2">
|
||||
<GlassWater size={16} className="text-orange-600" />
|
||||
{tastings.length} {tastings.length === 1 ? 'Whisky' : 'Whiskys'}
|
||||
</span>
|
||||
)}
|
||||
)}
|
||||
{session.is_blind && session.is_revealed && (
|
||||
<span className="px-3 py-1 bg-green-600/10 border border-green-500/20 rounded-full flex items-center gap-2">
|
||||
<Sparkles size={10} className="text-green-500" />
|
||||
<span className="text-[10px] font-black text-green-500 uppercase tracking-[0.2em]">Revealed</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-black text-white tracking-tighter leading-[0.9]">
|
||||
{session.name}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 text-zinc-400">
|
||||
<div className="flex items-center gap-2 bg-black/30 backdrop-blur-md px-4 py-2 rounded-2xl border border-white/5 shadow-inner">
|
||||
<Calendar size={16} className="text-orange-600" />
|
||||
<span className="text-xs font-black uppercase tracking-widest">{new Date(session.scheduled_at).toLocaleDateString('de-DE')}</span>
|
||||
</div>
|
||||
{participants.length > 0 && (
|
||||
<div className="flex items-center gap-3 bg-black/30 backdrop-blur-md px-4 py-2 rounded-2xl border border-white/5">
|
||||
<Users size={16} className="text-orange-600" />
|
||||
<AvatarStack names={participants.map(p => p.buddies.name)} limit={5} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 bg-black/30 backdrop-blur-md px-4 py-2 rounded-2xl border border-white/5">
|
||||
<GlassWater size={16} className="text-orange-600" />
|
||||
<span className="text-xs font-black tracking-widest">{tastings.length} {tastings.length === 1 ? 'DRAM' : 'DRAMS'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-wrap gap-3 z-20">
|
||||
{/* Host Controls for Blind Mode */}
|
||||
{user?.id === session.user_id && !session.ended_at && (
|
||||
<>
|
||||
<button
|
||||
onClick={handleToggleBlindMode}
|
||||
disabled={isUpdatingBlind}
|
||||
className={`px-6 py-4 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] flex items-center gap-3 transition-all border ${session.is_blind
|
||||
? 'bg-purple-600/20 border-purple-500/50 text-purple-400'
|
||||
: 'bg-zinc-800/50 border-zinc-700/50 text-zinc-400 hover:border-zinc-500'
|
||||
}`}
|
||||
>
|
||||
{isUpdatingBlind ? <Loader2 size={16} className="animate-spin" /> : <Play size={14} className={session.is_blind ? "fill-purple-400" : ""} />}
|
||||
Blind Mode
|
||||
</button>
|
||||
|
||||
{session.is_blind && !session.is_revealed && (
|
||||
<button
|
||||
onClick={handleRevealBlindMode}
|
||||
disabled={isUpdatingBlind}
|
||||
className="px-6 py-4 bg-green-600 hover:bg-green-500 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] flex items-center gap-3 transition-all shadow-lg shadow-green-950/20"
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
Reveal
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!session.ended_at && (
|
||||
activeSession?.id !== session.id ? (
|
||||
<button
|
||||
onClick={() => setActiveSession({ id: session.id, name: session.name })}
|
||||
className="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-orange-950/20"
|
||||
className="px-8 py-4 bg-orange-600 hover:bg-orange-500 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] flex items-center gap-3 transition-all shadow-[0_10px_40px_rgba(234,88,12,0.3)] hover:-translate-y-1 active:translate-y-0"
|
||||
>
|
||||
<Play size={18} fill="currentColor" />
|
||||
Starten
|
||||
@@ -330,74 +439,87 @@ export default function SessionDetailPage() {
|
||||
<button
|
||||
onClick={handleCloseSession}
|
||||
disabled={isClosing}
|
||||
className="px-6 py-3 bg-zinc-100 text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-800 hover:bg-red-600 hover:text-white transition-all group"
|
||||
className="px-8 py-4 bg-zinc-800/50 backdrop-blur-xl border border-zinc-700/50 text-zinc-100 hover:bg-red-600 hover:border-red-500 rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] flex items-center gap-3 transition-all hover:shadow-[0_10px_40px_rgba(220,38,38,0.2)]"
|
||||
>
|
||||
{isClosing ? <Loader2 size={18} className="animate-spin" /> : <Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />}
|
||||
Beenden
|
||||
{isClosing ? <Loader2 size={18} className="animate-spin" /> : <Square size={16} className="text-red-500 group-hover:text-white" fill="currentColor" />}
|
||||
Session Beenden
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleDeleteSession}
|
||||
disabled={isDeleting}
|
||||
title="Session löschen"
|
||||
className="p-3 bg-red-900/10 text-red-400 rounded-2xl hover:bg-red-600 hover:text-white transition-all border border-red-900/20 disabled:opacity-50"
|
||||
className="p-4 bg-zinc-950 border border-white/5 text-zinc-600 hover:text-red-500 rounded-2xl transition-all"
|
||||
>
|
||||
{isDeleting ? <Loader2 size={20} className="animate-spin" /> : <Trash2 size={20} />}
|
||||
{isDeleting ? <Loader2 size={18} className="animate-spin" /> : <Trash2 size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* Sidebar: Participants */}
|
||||
<aside className="md:col-span-1 space-y-6">
|
||||
<div className="bg-zinc-900 rounded-3xl p-6 border border-zinc-800 shadow-lg">
|
||||
<h3 className="text-sm font-black uppercase tracking-widest text-zinc-500 mb-6 flex items-center gap-2">
|
||||
<Users size={16} className="text-orange-600" />
|
||||
Teilnehmer
|
||||
</h3>
|
||||
{/* Blind Mode Reveal Leaderboard */}
|
||||
{session.is_blind && session.is_revealed && (
|
||||
<section className="bg-purple-900/10 rounded-[40px] p-8 md:p-12 border border-purple-500/30 shadow-2xl relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-12 opacity-5">
|
||||
<Sparkles size={120} className="text-purple-500" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
{participants.length === 0 ? (
|
||||
<p className="text-xs text-zinc-500 italic">Noch keine Teilnehmer...</p>
|
||||
) : (
|
||||
participants.map((p) => (
|
||||
<div key={p.buddy_id} className="flex items-center justify-between group">
|
||||
<span className="text-sm font-bold text-zinc-300">{p.buddies.name}</span>
|
||||
<button
|
||||
onClick={() => handleRemoveParticipant(p.buddy_id)}
|
||||
className="text-zinc-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-12 relative">
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-purple-400">Leaderboard</h3>
|
||||
<p className="text-3xl font-black text-white tracking-tight leading-none italic">Die Goldene Nase</p>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-zinc-800 pt-6">
|
||||
<label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 block mb-3">Buddy hinzufügen</label>
|
||||
<select
|
||||
onChange={(e) => {
|
||||
if (e.target.value) handleAddParticipant(e.target.value);
|
||||
e.target.value = "";
|
||||
}}
|
||||
className="w-full bg-zinc-800 border border-zinc-700 rounded-xl px-3 py-2 text-xs font-bold text-zinc-300 outline-none focus:ring-2 focus:ring-orange-500/50"
|
||||
>
|
||||
<option value="">Auswählen...</option>
|
||||
{allBuddies
|
||||
.filter(b => !participants.some(p => p.buddy_id === b.id))
|
||||
.map(b => (
|
||||
<option key={b.id} value={b.id}>{b.name}</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
<div className="px-4 py-2 bg-purple-600/20 border border-purple-500/30 rounded-2xl text-[10px] font-black text-purple-400 uppercase tracking-widest">
|
||||
Mystery Revealed
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ABV Curve */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 relative">
|
||||
{tastings.map((t, idx) => {
|
||||
const score = calculateGuessPoints(t);
|
||||
return (
|
||||
<div key={t.id} className="bg-black/40 border border-white/5 rounded-[32px] p-6 group hover:border-purple-500/30 transition-all">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<div className="w-10 h-10 bg-purple-600/20 border border-purple-500/20 rounded-full flex items-center justify-center text-xs font-black text-purple-400">
|
||||
{String.fromCharCode(65 + idx)}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-black text-white">{score}</div>
|
||||
<div className="text-[9px] font-black text-purple-400 uppercase tracking-tighter">Punkte</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="text-[11px] font-black text-zinc-300 uppercase truncate group-hover:text-white transition-colors">
|
||||
{t.bottles.name}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 pt-4 border-t border-white/5">
|
||||
<div>
|
||||
<div className="text-[8px] font-black text-zinc-500 uppercase tracking-widest mb-1">Guess</div>
|
||||
<div className="text-[10px] font-bold text-purple-400">
|
||||
{t.guess_abv ? `${t.guess_abv}%` : '-'} / {t.guess_age ? `${t.guess_age}y` : '-'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-[8px] font-black text-zinc-500 uppercase tracking-widest mb-1">Reality</div>
|
||||
<div className="text-[10px] font-bold text-white">
|
||||
{t.bottles.abv}% / {(t.bottles as any).age || '?'}y
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||||
{/* Left Rail: Stats & Team */}
|
||||
<div className="lg:col-span-4 space-y-8 lg:sticky lg:top-12">
|
||||
{/* ABV Analysis */}
|
||||
{tastings.length > 0 && (
|
||||
<SessionABVCurve
|
||||
tastings={tastings.map(t => ({
|
||||
@@ -407,33 +529,87 @@ export default function SessionDetailPage() {
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
</aside>
|
||||
|
||||
{/* Main Content: Bottle List */}
|
||||
<section className="md:col-span-2 space-y-6">
|
||||
<div className="bg-zinc-900 rounded-3xl p-6 border border-zinc-800 shadow-lg">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h3 className="text-sm font-black uppercase tracking-widest text-zinc-500 flex items-center gap-2">
|
||||
<GlassWater size={16} className="text-orange-600" />
|
||||
Verkostete Flaschen
|
||||
</h3>
|
||||
<div className="flex gap-2">
|
||||
{/* Team */}
|
||||
<div className="bg-zinc-900 rounded-[32px] p-8 border border-white/5 shadow-2xl">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-zinc-500 mb-8 flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<Users size={14} className="text-orange-600" />
|
||||
Crew
|
||||
</span>
|
||||
<span className="opacity-50">{participants.length}</span>
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
{participants.length === 0 ? (
|
||||
<p className="text-[10px] text-zinc-600 font-bold uppercase italic tracking-wider">Noch keiner an Bord...</p>
|
||||
) : (
|
||||
participants.map((p) => (
|
||||
<div key={p.buddy_id} className="group flex items-center justify-between p-3 rounded-2xl hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-[10px] font-black text-orange-500 border border-white/5 uppercase">
|
||||
{p.buddies.name[0]}
|
||||
</div>
|
||||
<span className="text-sm font-black text-zinc-200">{p.buddies.name}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleRemoveParticipant(p.buddy_id)}
|
||||
className="p-2 text-zinc-700 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-white/5">
|
||||
<p className="text-[8px] font-black uppercase tracking-widest text-zinc-600 mb-4 ml-1">Buddy hinzufügen</p>
|
||||
<select
|
||||
onChange={(e) => {
|
||||
if (e.target.value) handleAddParticipant(e.target.value);
|
||||
e.target.value = "";
|
||||
}}
|
||||
className="w-full bg-zinc-950 border border-zinc-800 rounded-2xl px-4 py-3 text-[10px] font-black uppercase tracking-wider text-zinc-400 outline-none focus:border-orange-500/50 transition-colors appearance-none"
|
||||
style={{ backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'%23a1a1aa\'%3E%3Cpath stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M19 9l-7 7-7-7\'/%3E%3C/svg%3E")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 1rem center', backgroundSize: '1rem' }}
|
||||
>
|
||||
<option value="">Auswahl...</option>
|
||||
{allBuddies
|
||||
.filter(b => !participants.some(p => p.buddy_id === b.id))
|
||||
.map(b => (
|
||||
<option key={b.id} value={b.id}>{b.name}</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Feed: Timeline */}
|
||||
<div className="lg:col-span-8 space-y-8">
|
||||
<section className="bg-zinc-900 rounded-[40px] p-8 md:p-12 border border-white/5 shadow-2xl min-h-screen">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-12">
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.4em] text-orange-600">Timeline</h3>
|
||||
<p className="text-2xl font-black text-white tracking-tight">Verkostungs-Historie</p>
|
||||
</div>
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
{!session.ended_at && (
|
||||
<button
|
||||
onClick={() => setIsBulkScanOpen(true)}
|
||||
className="bg-zinc-800 hover:bg-zinc-700 text-orange-500 px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest flex items-center gap-2 transition-all border border-zinc-700"
|
||||
className="flex-1 md:flex-none bg-zinc-950 border border-white/5 hover:border-orange-500/30 text-zinc-400 hover:text-orange-500 px-5 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-2 transition-all group"
|
||||
>
|
||||
<Zap size={16} />
|
||||
<Zap size={14} className="group-hover:animate-pulse" />
|
||||
Bulk Scan
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
href={`/?session_id=${id}`}
|
||||
className="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-lg shadow-orange-600/20"
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex-1 md:flex-none bg-orange-600 hover:bg-orange-500 text-white px-6 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-2 transition-all shadow-xl shadow-orange-950/20"
|
||||
>
|
||||
<Plus size={16} />
|
||||
Flasche
|
||||
</Link>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -447,24 +623,38 @@ export default function SessionDetailPage() {
|
||||
tags: t.tasting_tags?.map((tg: any) => tg.tags.name) || [],
|
||||
category: t.bottles.category
|
||||
}))}
|
||||
sessionStart={session.scheduled_at} // Fallback to scheduled time if no started_at
|
||||
sessionStart={session.scheduled_at}
|
||||
isBlind={session.is_blind}
|
||||
isRevealed={session.is_revealed}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bulk Scan Sheet */}
|
||||
<BulkScanSheet
|
||||
isOpen={isBulkScanOpen}
|
||||
onClose={() => setIsBulkScanOpen(false)}
|
||||
sessionId={id as string}
|
||||
sessionName={session.name}
|
||||
onSuccess={(bottleIds) => {
|
||||
onSuccess={() => {
|
||||
setIsBulkScanOpen(false);
|
||||
fetchSessionData();
|
||||
}}
|
||||
/>
|
||||
|
||||
<ScanAndTasteFlow
|
||||
isOpen={isScanFlowOpen}
|
||||
onClose={() => {
|
||||
setIsScanFlowOpen(false);
|
||||
setSelectedFile(null);
|
||||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||||
}}
|
||||
imageFile={selectedFile}
|
||||
onBottleSaved={() => {
|
||||
fetchSessionData();
|
||||
}}
|
||||
/>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user