105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useStabilimento } from "@/src/contexts/StabilimentoContext";
|
|
|
|
export default function GlobalStabilimentoSelector() {
|
|
const {
|
|
stabilimenti,
|
|
selectedStabilimento,
|
|
selectedMagazzino,
|
|
filteredMagazzini,
|
|
loading,
|
|
setSelectedStabilimento,
|
|
setSelectedMagazzino,
|
|
resetSelection,
|
|
} = useStabilimento();
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center gap-2 text-zinc-500 text-sm">
|
|
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
{/* Stabilimenti */}
|
|
<div className="flex items-center gap-1.5">
|
|
<button
|
|
onClick={() => resetSelection()}
|
|
className={`
|
|
px-2.5 py-1 text-xs rounded-md font-medium transition-all
|
|
${!selectedStabilimento
|
|
? "bg-blue-600 text-white"
|
|
: "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white"
|
|
}
|
|
`}
|
|
>
|
|
Tutti
|
|
</button>
|
|
{stabilimenti.map((stab) => (
|
|
<button
|
|
key={stab.id}
|
|
onClick={() => setSelectedStabilimento(
|
|
selectedStabilimento?.id === stab.id ? null : stab
|
|
)}
|
|
className={`
|
|
px-2.5 py-1 text-xs rounded-md font-medium transition-all
|
|
${selectedStabilimento?.id === stab.id
|
|
? "bg-blue-600 text-white"
|
|
: "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white"
|
|
}
|
|
`}
|
|
>
|
|
{stab.descrizione}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Separatore */}
|
|
{selectedStabilimento && filteredMagazzini.length > 0 && (
|
|
<div className="w-px h-5 bg-zinc-700" />
|
|
)}
|
|
|
|
{/* Magazzini */}
|
|
{selectedStabilimento && filteredMagazzini.length > 0 && (
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-xs text-zinc-500 mr-1">Mag:</span>
|
|
<button
|
|
onClick={() => setSelectedMagazzino(null)}
|
|
className={`
|
|
px-2.5 py-1 text-xs rounded-md font-medium transition-all
|
|
${!selectedMagazzino
|
|
? "bg-green-600 text-white"
|
|
: "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white"
|
|
}
|
|
`}
|
|
>
|
|
Tutti
|
|
</button>
|
|
{filteredMagazzini.map((mag) => (
|
|
<button
|
|
key={mag.id}
|
|
onClick={() => setSelectedMagazzino(
|
|
selectedMagazzino?.id === mag.id ? null : mag
|
|
)}
|
|
className={`
|
|
px-2.5 py-1 text-xs rounded-md font-medium transition-all
|
|
${selectedMagazzino?.id === mag.id
|
|
? "bg-green-600 text-white"
|
|
: "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white"
|
|
}
|
|
`}
|
|
>
|
|
{mag.descrizione}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|