282 lines
10 KiB
TypeScript
282 lines
10 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState, useEffect, useRef } from "react";
|
||
|
|
import type { Article } from "@/src/types/article";
|
||
|
|
import type { Stabilimento, Magazzino } from "@/src/types/stabilimento";
|
||
|
|
import type { TipoMovimento } from "@/src/types/movimento";
|
||
|
|
|
||
|
|
interface MovimentoModalProps {
|
||
|
|
article: Article;
|
||
|
|
tipo: TipoMovimento;
|
||
|
|
onClose: () => void;
|
||
|
|
onSuccess: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function MovimentoModal({
|
||
|
|
article,
|
||
|
|
tipo,
|
||
|
|
onClose,
|
||
|
|
onSuccess,
|
||
|
|
}: MovimentoModalProps) {
|
||
|
|
const modalRef = useRef<HTMLDivElement>(null);
|
||
|
|
const isCarico = tipo === "carico";
|
||
|
|
|
||
|
|
const [stabilimenti, setStabilimenti] = useState<Stabilimento[]>([]);
|
||
|
|
const [magazzini, setMagazzini] = useState<Magazzino[]>([]);
|
||
|
|
const [selectedStabilimento, setSelectedStabilimento] = useState<number | null>(null);
|
||
|
|
const [selectedMagazzino, setSelectedMagazzino] = useState<number | null>(null);
|
||
|
|
const [quantita, setQuantita] = useState<number>(1);
|
||
|
|
const [causale, setCausale] = useState<string>("");
|
||
|
|
|
||
|
|
const [saving, setSaving] = useState(false);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
async function fetchData() {
|
||
|
|
try {
|
||
|
|
const [stabRes, magRes] = await Promise.all([
|
||
|
|
fetch("/api/stabilimenti"),
|
||
|
|
fetch("/api/magazzini"),
|
||
|
|
]);
|
||
|
|
|
||
|
|
if (stabRes.ok && magRes.ok) {
|
||
|
|
const stabData = await stabRes.json();
|
||
|
|
const magData = await magRes.json();
|
||
|
|
setStabilimenti(stabData.stabilimenti);
|
||
|
|
setMagazzini(magData.magazzini);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Errore caricamento dati:", error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchData();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
function handleKeyDown(e: KeyboardEvent) {
|
||
|
|
if (e.key === "Escape") onClose();
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleClickOutside(e: MouseEvent) {
|
||
|
|
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
|
||
|
|
onClose();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener("keydown", handleKeyDown);
|
||
|
|
document.addEventListener("mousedown", handleClickOutside);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener("keydown", handleKeyDown);
|
||
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
||
|
|
};
|
||
|
|
}, [onClose]);
|
||
|
|
|
||
|
|
const filteredMagazzini = selectedStabilimento
|
||
|
|
? magazzini.filter((m) => m.id_stabilimento === selectedStabilimento)
|
||
|
|
: [];
|
||
|
|
|
||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setError(null);
|
||
|
|
|
||
|
|
if (!selectedMagazzino) {
|
||
|
|
setError("Seleziona un magazzino");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (quantita <= 0) {
|
||
|
|
setError("La quantità deve essere maggiore di zero");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setSaving(true);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await fetch("/api/movimenti", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({
|
||
|
|
id_articolo: article.id,
|
||
|
|
quantita,
|
||
|
|
tipo,
|
||
|
|
id_magazzino: selectedMagazzino,
|
||
|
|
causale: causale || undefined,
|
||
|
|
}),
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!res.ok) {
|
||
|
|
const data = await res.json();
|
||
|
|
throw new Error(data.error || "Errore durante la registrazione");
|
||
|
|
}
|
||
|
|
|
||
|
|
onSuccess();
|
||
|
|
} catch (err) {
|
||
|
|
setError(err instanceof Error ? err.message : "Errore sconosciuto");
|
||
|
|
} finally {
|
||
|
|
setSaving(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
|
||
|
|
<div
|
||
|
|
ref={modalRef}
|
||
|
|
className="w-full max-w-md bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-800 overflow-hidden"
|
||
|
|
>
|
||
|
|
{/* Header */}
|
||
|
|
<div className={`flex items-center justify-between px-6 py-4 border-b ${
|
||
|
|
isCarico ? "border-green-500/30 bg-green-500/5" : "border-red-500/30 bg-red-500/5"
|
||
|
|
}`}>
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className={`p-2 rounded-lg ${isCarico ? "bg-green-500/20 text-green-400" : "bg-red-500/20 text-red-400"}`}>
|
||
|
|
{isCarico ? (
|
||
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
|
|
</svg>
|
||
|
|
) : (
|
||
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
|
||
|
|
</svg>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2 className={`text-lg font-semibold ${isCarico ? "text-green-400" : "text-red-400"}`}>
|
||
|
|
{isCarico ? "Carico" : "Scarico"}
|
||
|
|
</h2>
|
||
|
|
<p className="text-xs text-zinc-500">Registra movimento</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800 transition-colors"
|
||
|
|
>
|
||
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Articolo info */}
|
||
|
|
<div className="px-6 py-3 bg-zinc-800/50 border-b border-zinc-800">
|
||
|
|
<p className="text-sm text-zinc-400">Articolo</p>
|
||
|
|
<p className="font-medium text-white">{article.descrizione}</p>
|
||
|
|
<p className="text-xs text-zinc-500 font-mono">{article.codice}</p>
|
||
|
|
<p className="text-xs text-zinc-500 mt-1">
|
||
|
|
Giacenza attuale: <span className="text-white">{article.quantita}</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Form */}
|
||
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
||
|
|
{error && (
|
||
|
|
<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/50 text-red-400 text-sm">
|
||
|
|
{error}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Stabilimento */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-zinc-400 mb-1">
|
||
|
|
Stabilimento
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={selectedStabilimento ?? ""}
|
||
|
|
onChange={(e) => {
|
||
|
|
setSelectedStabilimento(e.target.value ? parseInt(e.target.value, 10) : null);
|
||
|
|
setSelectedMagazzino(null);
|
||
|
|
}}
|
||
|
|
className="w-full px-4 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-white focus:outline-none focus:border-blue-500 transition-colors"
|
||
|
|
>
|
||
|
|
<option value="">Seleziona stabilimento...</option>
|
||
|
|
{stabilimenti.map((stab) => (
|
||
|
|
<option key={stab.id} value={stab.id}>
|
||
|
|
{stab.descrizione}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Magazzino */}
|
||
|
|
{selectedStabilimento && (
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-zinc-400 mb-1">
|
||
|
|
Magazzino {isCarico ? "(destinazione)" : "(origine)"}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={selectedMagazzino ?? ""}
|
||
|
|
onChange={(e) => setSelectedMagazzino(e.target.value ? parseInt(e.target.value, 10) : null)}
|
||
|
|
className="w-full px-4 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-white focus:outline-none focus:border-blue-500 transition-colors"
|
||
|
|
>
|
||
|
|
<option value="">Seleziona magazzino...</option>
|
||
|
|
{filteredMagazzini.map((mag) => (
|
||
|
|
<option key={mag.id} value={mag.id}>
|
||
|
|
{mag.descrizione}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Quantità */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-zinc-400 mb-1">
|
||
|
|
Quantità
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
value={quantita}
|
||
|
|
onChange={(e) => setQuantita(parseFloat(e.target.value) || 0)}
|
||
|
|
min="1"
|
||
|
|
className="w-full px-4 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-white focus:outline-none focus:border-blue-500 transition-colors text-lg font-semibold"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Causale */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-zinc-400 mb-1">
|
||
|
|
Causale (opzionale)
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={causale}
|
||
|
|
onChange={(e) => setCausale(e.target.value)}
|
||
|
|
placeholder={isCarico ? "Es: Acquisto fornitore" : "Es: Utilizzo manutenzione"}
|
||
|
|
className="w-full px-4 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-blue-500 transition-colors"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-zinc-800">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onClose}
|
||
|
|
className="px-4 py-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800 transition-colors"
|
||
|
|
>
|
||
|
|
Annulla
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
disabled={saving || !selectedMagazzino}
|
||
|
|
className={`px-6 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 ${
|
||
|
|
isCarico
|
||
|
|
? "bg-green-600 text-white hover:bg-green-500"
|
||
|
|
: "bg-red-600 text-white hover:bg-red-500"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{saving && (
|
||
|
|
<svg className="w-4 h-4 animate-spin" 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>
|
||
|
|
)}
|
||
|
|
{isCarico ? "Registra Carico" : "Registra Scarico"}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|