robin
75461d7c30
- Add Buddy linking via QR code/handshake (buddy_invites table) - Add Bulk Scanner for rapid-fire bottle scanning in sessions - Add processing_status to bottles for background AI analysis - Fix offline OCR with proper tessdata caching in Service Worker - Fix Supabase GoTrueClient singleton warning - Add collection refresh after offline sync completes New components: - BuddyHandshake.tsx - QR code display and code entry - BulkScanSheet.tsx - Camera UI with capture queue - BottleSkeletonCard.tsx - Pending bottle display - useBulkScanner.ts - Queue management hook - buddy-link.ts - Server actions for buddy linking - bulk-scan.ts - Server actions for batch processing
468 lines
22 KiB
TypeScript
468 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { createClient } from '@/lib/supabase/client';
|
|
import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkles, ChevronRight, Play, Square, Zap } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import AvatarStack from '@/components/AvatarStack';
|
|
import { deleteSession } from '@/services/delete-session';
|
|
import { closeSession } from '@/services/close-session';
|
|
import { useSession } from '@/context/SessionContext';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { useI18n } from '@/i18n/I18nContext';
|
|
import SessionTimeline from '@/components/SessionTimeline';
|
|
import SessionABVCurve from '@/components/SessionABVCurve';
|
|
import OfflineIndicator from '@/components/OfflineIndicator';
|
|
import BulkScanSheet from '@/components/BulkScanSheet';
|
|
import BottleSkeletonCard from '@/components/BottleSkeletonCard';
|
|
|
|
interface Buddy {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
interface Participant {
|
|
buddy_id: string;
|
|
buddies: {
|
|
name: string;
|
|
};
|
|
}
|
|
|
|
interface Session {
|
|
id: string;
|
|
name: string;
|
|
scheduled_at: string;
|
|
ended_at?: string;
|
|
}
|
|
|
|
interface SessionTasting {
|
|
id: string;
|
|
rating: number;
|
|
tasted_at: string;
|
|
bottles: {
|
|
id: string;
|
|
name: string;
|
|
distillery: string;
|
|
image_url?: string | null;
|
|
abv: number;
|
|
category?: string;
|
|
processing_status?: string;
|
|
};
|
|
tasting_tags: {
|
|
tags: {
|
|
name: string;
|
|
};
|
|
}[];
|
|
}
|
|
|
|
export default function SessionDetailPage() {
|
|
const { t } = useI18n();
|
|
const { id } = useParams();
|
|
const router = useRouter();
|
|
const supabase = createClient();
|
|
const [session, setSession] = useState<Session | null>(null);
|
|
const [participants, setParticipants] = useState<Participant[]>([]);
|
|
const [tastings, setTastings] = useState<SessionTasting[]>([]);
|
|
const [allBuddies, setAllBuddies] = useState<Buddy[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const { activeSession, setActiveSession } = useSession();
|
|
const [isAddingParticipant, setIsAddingParticipant] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
const [isClosing, setIsClosing] = useState(false);
|
|
const [isBulkScanOpen, setIsBulkScanOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchSessionData();
|
|
|
|
// Subscribe to bottle updates for realtime processing status
|
|
const channel = supabase
|
|
.channel('bottle-updates')
|
|
.on(
|
|
'postgres_changes',
|
|
{ event: 'UPDATE', schema: 'public', table: 'bottles' },
|
|
(payload) => {
|
|
// Refresh if a bottle's processing_status changed
|
|
if (payload.new && payload.old) {
|
|
if (payload.new.processing_status !== payload.old.processing_status) {
|
|
fetchSessionData();
|
|
}
|
|
}
|
|
}
|
|
)
|
|
.subscribe();
|
|
|
|
return () => {
|
|
supabase.removeChannel(channel);
|
|
};
|
|
}, [id]);
|
|
|
|
const fetchSessionData = async () => {
|
|
setIsLoading(true);
|
|
|
|
// Fetch Session
|
|
const { data: sessionData } = await supabase
|
|
.from('tasting_sessions')
|
|
.select('*')
|
|
.eq('id', id)
|
|
.single();
|
|
|
|
if (sessionData) {
|
|
setSession(sessionData);
|
|
|
|
// Fetch Participants
|
|
const { data: partData } = await supabase
|
|
.from('session_participants')
|
|
.select('buddy_id, buddies(name)')
|
|
.eq('session_id', id);
|
|
|
|
setParticipants((partData as any)?.map((p: any) => ({
|
|
buddy_id: p.buddy_id,
|
|
buddies: p.buddies
|
|
})) || []);
|
|
|
|
// Fetch Tastings in this session
|
|
const { data: tastingData } = await supabase
|
|
.from('tastings')
|
|
.select(`
|
|
id,
|
|
rating,
|
|
tasted_at,
|
|
bottles(id, name, distillery, image_url, abv, category, processing_status),
|
|
tasting_tags(tags(name))
|
|
`)
|
|
.eq('session_id', id)
|
|
.order('tasted_at', { ascending: true });
|
|
|
|
setTastings((tastingData as any) || []);
|
|
|
|
// Fetch all buddies for the picker
|
|
const { data: buddies } = await supabase
|
|
.from('buddies')
|
|
.select('id, name')
|
|
.order('name');
|
|
setAllBuddies(buddies || []);
|
|
}
|
|
|
|
setIsLoading(false);
|
|
};
|
|
|
|
const handleAddParticipant = async (buddyId: string) => {
|
|
if (participants.some(p => p.buddy_id === buddyId)) return;
|
|
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
if (!user) return;
|
|
|
|
const { error } = await supabase
|
|
.from('session_participants')
|
|
.insert([{
|
|
session_id: id,
|
|
buddy_id: buddyId,
|
|
user_id: user.id
|
|
}]);
|
|
|
|
if (!error) {
|
|
fetchSessionData();
|
|
}
|
|
};
|
|
|
|
const handleRemoveParticipant = async (buddyId: string) => {
|
|
const { error } = await supabase
|
|
.from('session_participants')
|
|
.delete()
|
|
.eq('session_id', id)
|
|
.eq('buddy_id', buddyId);
|
|
|
|
if (!error) {
|
|
fetchSessionData();
|
|
}
|
|
};
|
|
|
|
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) {
|
|
if (activeSession?.id === id) {
|
|
setActiveSession(null);
|
|
}
|
|
fetchSessionData();
|
|
} else {
|
|
alert(result.error);
|
|
}
|
|
setIsClosing(false);
|
|
};
|
|
|
|
const handleDeleteSession = async () => {
|
|
if (!confirm('Möchtest du diese Session wirklich löschen? Alle Verknüpfungen gehen verloren.')) return;
|
|
|
|
setIsDeleting(true);
|
|
const result = await deleteSession(id as string);
|
|
|
|
if (result.success) {
|
|
if (activeSession?.id === id) {
|
|
setActiveSession(null);
|
|
}
|
|
router.push('/');
|
|
} else {
|
|
alert(result.error);
|
|
setIsDeleting(false);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-zinc-950">
|
|
<Loader2 size={48} className="animate-spin text-orange-600" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!session) {
|
|
return (
|
|
<div className="min-h-screen flex flex-col items-center justify-center gap-4 bg-zinc-950 p-6">
|
|
<h1 className="text-2xl font-bold text-zinc-50">Session nicht gefunden</h1>
|
|
<Link href="/" className="text-orange-600 font-bold">Zurück zum Start</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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 */}
|
|
<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]"
|
|
>
|
|
<ChevronLeft size={16} />
|
|
Alle Sessions
|
|
</Link>
|
|
<OfflineIndicator />
|
|
</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 */}
|
|
{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 inset-0 bg-cover bg-center scale-150 blur-3xl transition-all duration-1000 group-hover:scale-125"
|
|
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>
|
|
|
|
<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>
|
|
)}
|
|
|
|
<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')}
|
|
</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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
{!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"
|
|
>
|
|
<Play size={18} fill="currentColor" />
|
|
Starten
|
|
</button>
|
|
) : (
|
|
<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"
|
|
>
|
|
{isClosing ? <Loader2 size={18} className="animate-spin" /> : <Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />}
|
|
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"
|
|
>
|
|
{isDeleting ? <Loader2 size={20} className="animate-spin" /> : <Trash2 size={20} />}
|
|
</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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
{/* ABV Curve */}
|
|
{tastings.length > 0 && (
|
|
<SessionABVCurve
|
|
tastings={tastings.map(t => ({
|
|
id: t.id,
|
|
abv: t.bottles.abv || 40,
|
|
tasted_at: t.tasted_at
|
|
}))}
|
|
/>
|
|
)}
|
|
</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">
|
|
{!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"
|
|
>
|
|
<Zap size={16} />
|
|
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"
|
|
>
|
|
<Plus size={16} />
|
|
Flasche
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<SessionTimeline
|
|
tastings={tastings.map(t => ({
|
|
id: t.id,
|
|
bottle_id: t.bottles.id,
|
|
bottle_name: t.bottles.name,
|
|
tasted_at: t.tasted_at,
|
|
rating: t.rating,
|
|
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
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bulk Scan Sheet */}
|
|
<BulkScanSheet
|
|
isOpen={isBulkScanOpen}
|
|
onClose={() => setIsBulkScanOpen(false)}
|
|
sessionId={id as string}
|
|
sessionName={session.name}
|
|
onSuccess={(bottleIds) => {
|
|
setIsBulkScanOpen(false);
|
|
fetchSessionData();
|
|
}}
|
|
/>
|
|
</main>
|
|
);
|
|
}
|
|
|