modifica modale con selezione magazzino e stabilimento

src/app/(main)/articoli/page.tsx

@@ -238,7 +238,6 @@ export default function ArticoliPage() {
           <ArticleModal
             article={editingArticle}
             families={families}
-            stabilimentoId={selectedStabilimento?.id || 0}
             onClose={() => { setShowModal(false); setEditingArticle(null); }}
             onSave={handleSave}
           />

src/components/ArticleModal.tsx

@@ -2,11 +2,11 @@
 
 import { useState, useEffect, useRef } from "react";
 import type { Article, ArticleInput, ArticleFamily } from "@/src/types/article";
+import type { Stabilimento, Magazzino } from "@/src/types/stabilimento";
 
 interface ArticleModalProps {
   article: Article | null;
   families: ArticleFamily[];
-  stabilimentoId: number;
   onClose: () => void;
   onSave: (article: Article) => void;
 }
@@ -14,7 +14,6 @@ interface ArticleModalProps {
 export default function ArticleModal({
   article,
   families,
-  stabilimentoId,
   onClose,
   onSave,
 }: ArticleModalProps) {
@@ -32,6 +31,12 @@ export default function ArticleModal({
     quantita: 0,
   });
 
+  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 [quantitaIniziale, setQuantitaIniziale] = useState<number>(0);
+
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -45,11 +50,35 @@ export default function ArticleModal({
         id_magazzino: article.id_magazzino,
         prezzo: article.prezzo,
         quantita_minima: article.quantita_minima,
-        quantita: article.quantita,
+        quantita: 0,
       });
     }
   }, [article]);
 
+  useEffect(() => {
+    if (!isEdit) {
+      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 stabilimenti/magazzini:", error);
+        }
+      }
+
+      fetchData();
+    }
+  }, [isEdit]);
+
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
       if (e.key === "Escape") {
@@ -72,19 +101,35 @@ export default function ArticleModal({
     };
   }, [onClose]);
 
+  const filteredMagazzini = selectedStabilimento
+    ? magazzini.filter((m) => m.id_stabilimento === selectedStabilimento)
+    : [];
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
+
+    if (!isEdit && quantitaIniziale > 0 && !selectedMagazzino) {
+      setError("Seleziona un magazzino per la giacenza iniziale");
+      return;
+    }
+
     setSaving(true);
 
     try {
       const url = isEdit ? `/api/articoli/${article.id}` : "/api/articoli";
       const method = isEdit ? "PUT" : "POST";
 
+      const payload = {
+        ...formData,
+        id_magazzino: selectedMagazzino,
+        quantita: quantitaIniziale,
+      };
+
       const res = await fetch(url, {
         method,
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(formData),
+        body: JSON.stringify(payload),
       });
 
       if (!res.ok) {
@@ -117,14 +162,25 @@ export default function ArticleModal({
     }));
   };
 
+  const handleStabilimentoChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value ? parseInt(e.target.value, 10) : null;
+    setSelectedStabilimento(value);
+    setSelectedMagazzino(null);
+  };
+
+  const handleMagazzinoChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value ? parseInt(e.target.value, 10) : null;
+    setSelectedMagazzino(value);
+  };
+
   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-lg bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-800 overflow-hidden"
+        className="w-full max-w-lg bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-800 overflow-hidden max-h-[90vh] flex flex-col"
       >
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-800">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-800 flex-shrink-0">
           <h2 className="text-xl font-semibold text-white">
             {isEdit ? "Modifica Articolo" : "Nuovo Articolo"}
           </h2>
@@ -139,7 +195,7 @@ export default function ArticleModal({
         </div>
 
         {/* Form */}
-        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+        <form onSubmit={handleSubmit} className="p-6 space-y-4 overflow-y-auto flex-1">
           {error && (
             <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/50 text-red-400 text-sm">
               {error}
@@ -243,20 +299,78 @@ export default function ArticleModal({
             </div>
           </div>
 
-          {/* Quantità iniziale (solo per nuovo articolo) */}
+          {/* Giacenza iniziale (solo per nuovo articolo) */}
           {!isEdit && (
-            <div>
-              <label className="block text-sm font-medium text-zinc-400 mb-1">
-                Quantità iniziale
-              </label>
-              <input
-                type="number"
-                name="quantita"
-                value={formData.quantita}
-                onChange={handleChange}
-                min="0"
-                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 className="p-4 rounded-lg bg-green-500/5 border border-green-500/30">
+              <h3 className="text-sm font-semibold text-green-400 mb-3 flex items-center gap-2">
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                </svg>
+                Giacenza iniziale
+              </h3>
+              
+              <div className="space-y-3">
+                {/* Stabilimento */}
+                <div>
+                  <label className="block text-xs font-medium text-zinc-500 mb-1">
+                    Stabilimento
+                  </label>
+                  <select
+                    value={selectedStabilimento ?? ""}
+                    onChange={handleStabilimentoChange}
+                    className="w-full px-3 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-green-500 transition-colors"
+                  >
+                    <option value="">Seleziona stabilimento...</option>
+                    {stabilimenti.map((stab) => (
+                      <option key={stab.id} value={stab.id}>
+                        {stab.descrizione}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Magazzino (visibile solo se stabilimento selezionato) */}
+                {selectedStabilimento && (
+                  <div>
+                    <label className="block text-xs font-medium text-zinc-500 mb-1">
+                      Magazzino
+                    </label>
+                    <select
+                      value={selectedMagazzino ?? ""}
+                      onChange={handleMagazzinoChange}
+                      className="w-full px-3 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-green-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-xs font-medium text-zinc-500 mb-1">
+                    Quantità
+                  </label>
+                  <input
+                    type="number"
+                    value={quantitaIniziale}
+                    onChange={(e) => setQuantitaIniziale(parseFloat(e.target.value) || 0)}
+                    min="0"
+                    className="w-full px-3 py-2 rounded-lg bg-zinc-800 border border-zinc-700 text-white text-sm focus:outline-none focus:border-green-500 transition-colors"
+                    placeholder="0"
+                  />
+                </div>
+
+                {quantitaIniziale > 0 && !selectedMagazzino && (
+                  <p className="text-xs text-yellow-400">
+                    Seleziona un magazzino per registrare la giacenza iniziale
+                  </p>
+                )}
+              </div>
             </div>
           )}
 

src/components/ArticlesGrid.tsx

@@ -237,7 +237,6 @@ export default function ArticlesGrid({ stabilimento }: ArticlesGridProps) {
         <ArticleModal
           article={editingArticle}
           families={families}
-          stabilimentoId={stabilimento.id}
           onClose={() => {
             setShowModal(false);
             setEditingArticle(null);

src/components/ArticlesList.tsx

@@ -194,7 +194,6 @@ export default function ArticlesList() {
         <ArticleModal
           article={editingArticle}
           families={families}
-          stabilimentoId={selectedStabilimento?.id || 0}
           onClose={() => { setShowModal(false); setEditingArticle(null); }}
           onSave={handleSave}
         />