feat: Add admin page for tasting sessions

- Create /admin/sessions page showing all sessions from all users
- Stats: total sessions, active, hosts, participants, tastings
- Filter by host, status (active/ended)
- Show session duration, participant count, tasting count
- Add 'All Sessions' link to admin dashboard

src/app/admin/page.tsx

@@ -141,6 +141,12 @@ export default async function AdminPage() {
                         >
                             All Tastings
                         </Link>
+                        <Link
+                            href="/admin/sessions"
+                            className="px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white rounded-xl font-bold transition-colors"
+                        >
+                            All Sessions
+                        </Link>
                         <Link
                             href="/"
                             className="px-4 py-2 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-xl font-bold hover:bg-zinc-800 transition-colors"

src/app/admin/sessions/AdminSessionsList.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { Search, User, Calendar, GlassWater, Users, Check, X, Clock, ExternalLink } from 'lucide-react';
+import Link from 'next/link';
+
+interface Session {
+    id: string;
+    name: string;
+    user_id: string;
+    scheduled_at: string;
+    ended_at: string | null;
+    created_at: string;
+    user: { username: string; display_name: string | null };
+    participantCount: number;
+    tastingCount: number;
+}
+
+interface AdminSessionsListProps {
+    sessions: Session[];
+}
+
+export default function AdminSessionsList({ sessions }: AdminSessionsListProps) {
+    const [search, setSearch] = useState('');
+    const [filterHost, setFilterHost] = useState<string | null>(null);
+    const [filterStatus, setFilterStatus] = useState<'all' | 'active' | 'ended'>('all');
+
+    // Get unique hosts for filter
+    const hosts = useMemo(() => {
+        const hostMap = new Map<string, string>();
+        sessions.forEach(s => {
+            hostMap.set(s.user_id, s.user.display_name || s.user.username);
+        });
+        return Array.from(hostMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+    }, [sessions]);
+
+    // Filter sessions
+    const filteredSessions = useMemo(() => {
+        let result = sessions;
+
+        if (search) {
+            const searchLower = search.toLowerCase();
+            result = result.filter(s =>
+                s.name?.toLowerCase().includes(searchLower) ||
+                s.user.username.toLowerCase().includes(searchLower) ||
+                s.user.display_name?.toLowerCase().includes(searchLower)
+            );
+        }
+
+        if (filterHost) {
+            result = result.filter(s => s.user_id === filterHost);
+        }
+
+        if (filterStatus === 'active') {
+            result = result.filter(s => !s.ended_at);
+        } else if (filterStatus === 'ended') {
+            result = result.filter(s => s.ended_at);
+        }
+
+        return result;
+    }, [sessions, search, filterHost, filterStatus]);
+
+    const formatDate = (date: string) => {
+        return new Date(date).toLocaleDateString('de-DE', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+
+    const getSessionDuration = (start: string, end: string | null) => {
+        const startDate = new Date(start);
+        const endDate = end ? new Date(end) : new Date();
+        const diffMs = endDate.getTime() - startDate.getTime();
+        const hours = Math.floor(diffMs / (1000 * 60 * 60));
+        const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+        if (hours > 0) {
+            return `${hours}h ${minutes}m`;
+        }
+        return `${minutes}m`;
+    };
+
+    return (
+        <div className="space-y-4">
+            {/* Filters */}
+            <div className="flex flex-col lg:flex-row gap-4">
+                <div className="flex-1 relative">
+                    <Search size={18} className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500" />
+                    <input
+                        type="text"
+                        value={search}
+                        onChange={e => setSearch(e.target.value)}
+                        placeholder="Search sessions or hosts..."
+                        className="w-full pl-12 pr-4 py-3 bg-zinc-900 border border-zinc-800 rounded-xl text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600"
+                    />
+                </div>
+
+                <div className="flex gap-2">
+                    <select
+                        value={filterHost || ''}
+                        onChange={e => setFilterHost(e.target.value || null)}
+                        className="px-4 py-3 bg-zinc-900 border border-zinc-800 rounded-xl text-zinc-300 focus:outline-none"
+                    >
+                        <option value="">All Hosts</option>
+                        {hosts.map(([id, name]) => (
+                            <option key={id} value={id}>{name}</option>
+                        ))}
+                    </select>
+
+                    <select
+                        value={filterStatus}
+                        onChange={e => setFilterStatus(e.target.value as any)}
+                        className="px-4 py-3 bg-zinc-900 border border-zinc-800 rounded-xl text-zinc-300 focus:outline-none"
+                    >
+                        <option value="all">All Status</option>
+                        <option value="active">Active</option>
+                        <option value="ended">Ended</option>
+                    </select>
+                </div>
+            </div>
+
+            {/* Results */}
+            <div className="text-sm text-zinc-500">
+                Showing {filteredSessions.length} of {sessions.length} sessions
+            </div>
+
+            {/* Sessions List */}
+            <div className="space-y-3">
+                {filteredSessions.map(session => (
+                    <div
+                        key={session.id}
+                        className={`bg-zinc-900 rounded-2xl border p-4 transition-colors ${!session.ended_at
+                                ? 'border-orange-600/30 hover:border-orange-600/50'
+                                : 'border-zinc-800 hover:border-zinc-700'
+                            }`}
+                    >
+                        <div className="flex items-center gap-4">
+                            {/* Icon */}
+                            <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${!session.ended_at
+                                    ? 'bg-orange-600/20'
+                                    : 'bg-zinc-800'
+                                }`}>
+                                <GlassWater size={24} className={
+                                    !session.ended_at ? 'text-orange-500' : 'text-zinc-500'
+                                } />
+                            </div>
+
+                            {/* Info */}
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 mb-1">
+                                    <h3 className="font-bold text-white truncate">{session.name}</h3>
+                                    {!session.ended_at ? (
+                                        <span className="px-2 py-0.5 bg-orange-600/20 text-orange-500 text-[10px] font-bold uppercase rounded-full flex items-center gap-1">
+                                            <span className="w-1.5 h-1.5 bg-orange-500 rounded-full animate-pulse" />
+                                            Live
+                                        </span>
+                                    ) : (
+                                        <span className="px-2 py-0.5 bg-zinc-800 text-zinc-500 text-[10px] font-bold uppercase rounded-full flex items-center gap-1">
+                                            <Check size={10} />
+                                            Ended
+                                        </span>
+                                    )}
+                                </div>
+
+                                <div className="flex items-center gap-4 text-xs text-zinc-500">
+                                    <span className="flex items-center gap-1">
+                                        <User size={12} />
+                                        {session.user.display_name || session.user.username}
+                                    </span>
+                                    <span className="flex items-center gap-1">
+                                        <Calendar size={12} />
+                                        {formatDate(session.scheduled_at)}
+                                    </span>
+                                    <span className="flex items-center gap-1">
+                                        <Clock size={12} />
+                                        {getSessionDuration(session.scheduled_at, session.ended_at)}
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Stats */}
+                            <div className="flex items-center gap-4">
+                                <div className="text-center">
+                                    <div className="text-lg font-bold text-white">{session.participantCount}</div>
+                                    <div className="text-[10px] text-zinc-600 uppercase">Buddies</div>
+                                </div>
+                                <div className="text-center">
+                                    <div className="text-lg font-bold text-orange-500">{session.tastingCount}</div>
+                                    <div className="text-[10px] text-zinc-600 uppercase">Tastings</div>
+                                </div>
+                            </div>
+
+                            {/* Link */}
+                            <Link
+                                href={`/sessions/${session.id}`}
+                                target="_blank"
+                                className="p-2 text-zinc-500 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors"
+                            >
+                                <ExternalLink size={18} />
+                            </Link>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {/* Empty State */}
+            {filteredSessions.length === 0 && (
+                <div className="text-center py-12">
+                    <div className="w-16 h-16 mx-auto rounded-2xl bg-zinc-900 flex items-center justify-center mb-4">
+                        <Calendar size={32} className="text-zinc-600" />
+                    </div>
+                    <p className="text-lg font-bold text-white mb-2">No Sessions Found</p>
+                    <p className="text-sm text-zinc-500">No tasting sessions match your filters.</p>
+                </div>
+            )}
+        </div>
+    );
+}

src/app/admin/sessions/page.tsx

@@ -0,0 +1,133 @@
+export const dynamic = 'force-dynamic';
+
+import { createClient } from '@/lib/supabase/server';
+import { redirect } from 'next/navigation';
+import { checkIsAdmin } from '@/services/track-api-usage';
+import Link from 'next/link';
+import { ArrowLeft, Calendar, User, Users, GlassWater, Clock, CheckCircle } from 'lucide-react';
+import AdminSessionsList from './AdminSessionsList';
+
+export default async function AdminSessionsPage() {
+    const supabase = await createClient();
+    const { data: { user } } = await supabase.auth.getUser();
+
+    if (!user) {
+        redirect('/');
+    }
+
+    const isAdmin = await checkIsAdmin(user.id);
+    if (!isAdmin) {
+        redirect('/');
+    }
+
+    // Fetch all sessions from all users
+    const { data: sessionsRaw, error } = await supabase
+        .from('tasting_sessions')
+        .select(`
+            id,
+            name,
+            user_id,
+            scheduled_at,
+            ended_at,
+            created_at,
+            session_participants (id),
+            tastings (id)
+        `)
+        .order('created_at', { ascending: false })
+        .limit(500);
+
+    // Get unique user IDs
+    const userIds = Array.from(new Set(sessionsRaw?.map(s => s.user_id) || []));
+
+    // Fetch profiles for users
+    const { data: profiles } = userIds.length > 0
+        ? await supabase.from('profiles').select('id, username, display_name').in('id', userIds)
+        : { data: [] };
+
+    // Combine sessions with user info
+    const sessions = sessionsRaw?.map(session => ({
+        ...session,
+        user: profiles?.find(p => p.id === session.user_id) || { username: 'Unknown', display_name: null },
+        participantCount: (session.session_participants as any[])?.length || 0,
+        tastingCount: (session.tastings as any[])?.length || 0,
+    })) || [];
+
+    // Calculate stats
+    const stats = {
+        totalSessions: sessions.length,
+        activeSessions: sessions.filter(s => !s.ended_at).length,
+        totalHosts: userIds.length,
+        totalParticipants: sessions.reduce((sum, s) => sum + s.participantCount, 0),
+        totalTastings: sessions.reduce((sum, s) => sum + s.tastingCount, 0),
+    };
+
+    return (
+        <main className="min-h-screen bg-zinc-950 p-6 pb-24">
+            <div className="max-w-7xl mx-auto">
+                {/* Header */}
+                <div className="flex items-center gap-4 mb-8">
+                    <Link
+                        href="/admin"
+                        className="p-2 rounded-xl bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-white hover:border-zinc-700 transition-colors"
+                    >
+                        <ArrowLeft size={20} />
+                    </Link>
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold text-white">All Tasting Sessions</h1>
+                        <p className="text-sm text-zinc-500">
+                            View all tasting sessions from all users
+                        </p>
+                    </div>
+                </div>
+
+                {error && (
+                    <div className="mb-6 p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-sm">
+                        Error loading sessions: {error.message}
+                    </div>
+                )}
+
+                {/* Stats Cards */}
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
+                    <div className="bg-zinc-900 rounded-2xl p-4 border border-zinc-800">
+                        <div className="flex items-center gap-2 mb-2">
+                            <Calendar size={18} className="text-purple-500" />
+                            <span className="text-xs font-bold text-zinc-500 uppercase">Total Sessions</span>
+                        </div>
+                        <div className="text-2xl font-black text-white">{stats.totalSessions}</div>
+                    </div>
+                    <div className="bg-zinc-900 rounded-2xl p-4 border border-zinc-800">
+                        <div className="flex items-center gap-2 mb-2">
+                            <Clock size={18} className="text-green-500" />
+                            <span className="text-xs font-bold text-zinc-500 uppercase">Active</span>
+                        </div>
+                        <div className="text-2xl font-black text-white">{stats.activeSessions}</div>
+                    </div>
+                    <div className="bg-zinc-900 rounded-2xl p-4 border border-zinc-800">
+                        <div className="flex items-center gap-2 mb-2">
+                            <User size={18} className="text-blue-500" />
+                            <span className="text-xs font-bold text-zinc-500 uppercase">Hosts</span>
+                        </div>
+                        <div className="text-2xl font-black text-white">{stats.totalHosts}</div>
+                    </div>
+                    <div className="bg-zinc-900 rounded-2xl p-4 border border-zinc-800">
+                        <div className="flex items-center gap-2 mb-2">
+                            <Users size={18} className="text-orange-500" />
+                            <span className="text-xs font-bold text-zinc-500 uppercase">Participants</span>
+                        </div>
+                        <div className="text-2xl font-black text-white">{stats.totalParticipants}</div>
+                    </div>
+                    <div className="bg-zinc-900 rounded-2xl p-4 border border-zinc-800">
+                        <div className="flex items-center gap-2 mb-2">
+                            <GlassWater size={18} className="text-yellow-500" />
+                            <span className="text-xs font-bold text-zinc-500 uppercase">Tastings</span>
+                        </div>
+                        <div className="text-2xl font-black text-white">{stats.totalTastings}</div>
+                    </div>
+                </div>
+
+                {/* Sessions List */}
+                <AdminSessionsList sessions={sessions} />
+            </div>
+        </main>
+    );
+}