init

src/components/StatusSwitcher.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React, { useState } from 'react';
+import { updateBottleStatus } from '@/services/update-bottle-status';
+import { Loader2, Package, Play, CheckCircle, FlaskConical } from 'lucide-react';
+
+interface StatusSwitcherProps {
+    bottleId: string;
+    currentStatus: 'sealed' | 'open' | 'sampled' | 'empty';
+}
+
+export default function StatusSwitcher({ bottleId, currentStatus }: StatusSwitcherProps) {
+    const [status, setStatus] = useState(currentStatus);
+    const [loading, setLoading] = useState(false);
+
+    const handleStatusChange = async (newStatus: 'sealed' | 'open' | 'sampled' | 'empty') => {
+        if (newStatus === status || loading) return;
+
+        setLoading(true);
+        try {
+            const result = await updateBottleStatus(bottleId, newStatus);
+            if (result.success) {
+                setStatus(newStatus);
+            } else {
+                alert(result.error || 'Fehler beim Aktualisieren des Status');
+            }
+        } catch (err) {
+            alert('Ein unerwarteter Fehler ist aufgetreten');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const options = [
+        { id: 'sealed', label: 'Versiegelt', icon: Package, color: 'hover:bg-blue-500' },
+        { id: 'open', label: 'Offen', icon: Play, color: 'hover:bg-amber-500' },
+        { id: 'sampled', label: 'Sampled', icon: FlaskConical, color: 'hover:bg-purple-500' },
+        { id: 'empty', label: 'Leer', icon: CheckCircle, color: 'hover:bg-zinc-500' },
+    ] as const;
+
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center justify-between">
+                <label className="text-xs font-bold text-zinc-400 uppercase tracking-tighter">Status</label>
+                {loading && <Loader2 className="animate-spin text-amber-600" size={14} />}
+            </div>
+            <div className="grid grid-cols-3 gap-2 p-1 bg-zinc-100 dark:bg-zinc-800 rounded-xl relative">
+                {options.map((opt) => {
+                    const Icon = opt.icon;
+                    const isActive = status === opt.id;
+                    return (
+                        <button
+                            key={opt.id}
+                            type="button"
+                            disabled={loading}
+                            onClick={() => handleStatusChange(opt.id)}
+                            className={`flex flex-col items-center gap-1.5 py-3 px-2 rounded-lg text-[10px] font-black uppercase transition-all border-2 ${isActive
+                                ? 'bg-white dark:bg-zinc-700 border-amber-500 text-amber-600 shadow-sm'
+                                : 'border-transparent text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200'
+                                }`}
+                        >
+                            <Icon size={18} className={isActive ? 'text-amber-500' : 'text-zinc-400'} />
+                            {opt.label}
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}