71 lines
3.1 KiB
TypeScript
71 lines
3.1 KiB
TypeScript
'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-[11px] font-black text-zinc-400 uppercase tracking-widest">Flaschenstatus</label>
|
|
{loading && <Loader2 className="animate-spin text-amber-600" size={14} />}
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-2 p-1 bg-zinc-100 dark:bg-zinc-900/50 rounded-2xl border border-zinc-200/50 dark:border-zinc-800/50">
|
|
{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-1 rounded-xl text-[9px] font-black uppercase tracking-tight transition-all border-2 ${isActive
|
|
? 'bg-white dark:bg-zinc-700 border-amber-500 text-amber-600 shadow-sm ring-1 ring-black/5'
|
|
: '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>
|
|
);
|
|
}
|