robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify tasting form refactor & align db schema status levels

Browse Source
This commit is contained in:
robin
2025-12-23 22:13:05 +01:00
parent 6a41667f9c
commit 11275dd875
11 changed files with 570 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/BottleDetails.tsx
View File

@@ -2,7 +2,9 @@
import React from 'react';
import Link from 'next/link';
import { ChevronLeft, Calendar, Award, Droplets, MapPin, Tag, ExternalLink, Package, Info, Loader2, WifiOff } from 'lucide-react';
import { ChevronLeft, Calendar, Award, Droplets, MapPin, Tag, ExternalLink, Package, Info, Loader2, WifiOff, CircleDollarSign, Wine, CheckCircle2, Circle, ChevronDown, Plus } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { updateBottle } from '@/services/update-bottle';
import { getStorageUrl } from '@/lib/supabase';
import TastingNoteForm from '@/components/TastingNoteForm';
import TastingList from '@/components/TastingList';
@@ -18,9 +20,37 @@ interface BottleDetailsProps {
}
export default function BottleDetails({ bottleId, sessionId, userId }: BottleDetailsProps) {
const { t } = useI18n();
const { t, locale } = useI18n();
const { bottle, tastings, loading, error, isOffline } = useBottleData(bottleId);
// Quick Collection States
const [price, setPrice] = React.useState<string>('');
const [status, setStatus] = React.useState<string>('sealed');
const [isUpdating, setIsUpdating] = React.useState(false);
const [isFormVisible, setIsFormVisible] = React.useState(false);
React.useEffect(() => {
if (bottle) {
setPrice(bottle.purchase_price?.toString() || '');
setStatus((bottle as any).status || 'sealed');
}
}, [bottle]);
const handleQuickUpdate = async (newPrice?: string, newStatus?: string) => {
if (isOffline) return;
setIsUpdating(true);
try {
await updateBottle(bottleId, {
purchase_price: newPrice !== undefined ? (newPrice ? parseFloat(newPrice) : null) : (price ? parseFloat(price) : null),
status: newStatus !== undefined ? newStatus : status
} as any);
} catch (err) {
console.error('Quick update failed:', err);
} finally {
setIsUpdating(false);
}
};
if (loading) {
return (
<div className="min-h-[60vh] flex flex-col items-center justify-center gap-4">
@@ -141,6 +171,53 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
</div>
)}
{/* Quick Collection Card */}
<div className="md:col-span-2 p-5 bg-orange-600/5 rounded-3xl border border-orange-600/20 shadow-xl space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-orange-600 flex items-center gap-2">
<Package size={14} /> Sammlungs-Status
</h3>
{isUpdating && <Loader2 size={12} className="animate-spin text-orange-600" />}
</div>
<div className="grid grid-cols-2 gap-4">
{/* Price */}
<div className="space-y-1.5">
<label className="text-[9px] font-bold uppercase text-zinc-500 ml-1">Einkaufspreis</label>
<div className="relative">
<input
type="number"
step="0.01"
value={price}
onChange={(e) => setPrice(e.target.value)}
onBlur={() => handleQuickUpdate(price)}
placeholder="0.00"
className="w-full bg-zinc-950 border border-zinc-800 rounded-xl pl-3 pr-8 py-2 text-sm font-bold text-orange-500 focus:outline-none focus:border-orange-600 transition-all"
/>
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-bold text-zinc-700">€</div>
</div>
</div>
{/* Status */}
<div className="space-y-1.5">
<label className="text-[9px] font-bold uppercase text-zinc-500 ml-1">Flaschenstatus</label>
<select
value={status}
onChange={(e) => {
setStatus(e.target.value);
handleQuickUpdate(undefined, e.target.value);
}}
className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-3 py-2 text-sm font-bold text-zinc-200 focus:outline-none focus:border-orange-600 appearance-none transition-all"
>
<option value="sealed">Versiegelt</option>
<option value="open">Offen</option>
<option value="sampled">Sample</option>
<option value="empty">Leer</option>
</select>
</div>
</div>
</div>
{bottle.batch_info && (
<div className="p-4 bg-zinc-800/30 rounded-2xl border border-dashed border-zinc-700/50 md:col-span-1">
<div className="flex items-center gap-2 text-zinc-500 text-[10px] font-bold uppercase mb-1">
@@ -191,11 +268,39 @@ export default function BottleDetails({ bottleId, sessionId, userId }: BottleDet
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 items-start">
{/* Form */}
<div className="lg:col-span-1 border border-zinc-800 rounded-3xl p-6 bg-zinc-900/50 md:sticky md:top-24">
<h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-orange-600 uppercase tracking-widest">
<Droplets size={20} /> Dram bewerten
</h3>
<TastingNoteForm bottleId={bottle.id} sessionId={sessionId} />
<div className="lg:col-span-1 space-y-4 md:sticky md:top-24">
<button
onClick={() => setIsFormVisible(!isFormVisible)}
className={`w-full p-6 rounded-3xl border flex items-center justify-between transition-all group ${isFormVisible ? 'bg-orange-600 border-orange-600 text-white shadow-xl shadow-orange-950/40' : 'bg-zinc-900/50 border-zinc-800 text-zinc-400 hover:border-orange-500/30'}`}
>
<div className="flex items-center gap-3">
{isFormVisible ? <Plus size={20} className="rotate-45 transition-transform" /> : <Plus size={20} className="text-orange-600 transition-transform" />}
<span className={`text-sm font-black uppercase tracking-widest ${isFormVisible ? 'text-white' : 'text-zinc-100'}`}>Neue Tasting Note</span>
</div>
<ChevronDown size={20} className={`transition-transform duration-300 ${isFormVisible ? 'rotate-180' : 'opacity-0'}`} />
</button>
<AnimatePresence>
{isFormVisible && (
<motion.div
initial={{ opacity: 0, y: -20, height: 0 }}
animate={{ opacity: 1, y: 0, height: 'auto' }}
exit={{ opacity: 0, y: -20, height: 0 }}
className="overflow-hidden"
>
<div className="border border-zinc-800 rounded-3xl p-6 bg-zinc-900/50">
<h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-orange-600 uppercase tracking-widest">
<Droplets size={20} /> Dram bewerten
</h3>
<TastingNoteForm
bottleId={bottle.id}
sessionId={sessionId}
onSuccess={() => setIsFormVisible(false)}
/>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
{/* List */}