From 17592d1f3598c14ebda2b61cfa85625e30d5db26 Mon Sep 17 00:00:00 2001
From: AV77web <villari.andrea@libero.it>
Date: Fri, 29 May 2026 16:59:26 +0200
Subject: [PATCH] correzione a modale di scarico e a drag & drop

---
 src/app/(main)/page.tsx           |  8 ++++----
 src/components/MovimentoModal.tsx | 22 +++++++++++++---------
 src/components/TreeNode.tsx       | 17 ++++++++++++++++-
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index f8b2475..cecb2b7 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -10,18 +10,18 @@ export default function Home() {
         {/* Header */}
         <div className="mb-6 flex-shrink-0">
           <h1 className="text-2xl font-bold text-white">MagRicambi</h1>
-          <p className="text-sm text-zinc-500">Gestione magazzino ricambi</p>
+          <p className="text-sm text-zinc-500">Gestione magazzino ricambi - Trascina articoli sulle macchine per assegnarli</p>
         </div>
 
         {/* Contenuto principale: split 50/50 */}
         <div className="flex-1 grid grid-cols-2 gap-6 min-h-0">
           {/* Colonna sinistra: Articoli */}
-          <div className="flex flex-col min-h-0 p-4 rounded-xl bg-zinc-900/50 border border-zinc-800">
+          <div className="flex flex-col min-h-0 p-4 rounded-xl bg-zinc-900/50 border border-zinc-800 overflow-visible">
             <ArticlesList />
           </div>
 
-          {/* Colonna destra: Macchine (placeholder) */}
-          <div className="flex flex-col min-h-0 p-4 rounded-xl bg-zinc-900/50 border border-zinc-800">
+          {/* Colonna destra: Macchine */}
+          <div className="flex flex-col min-h-0 p-4 rounded-xl bg-zinc-900/50 border border-zinc-800 overflow-visible">
             <MacchineTree />
           </div>
         </div>
diff --git a/src/components/MovimentoModal.tsx b/src/components/MovimentoModal.tsx
index 6560988..ee4ec4e 100644
--- a/src/components/MovimentoModal.tsx
+++ b/src/components/MovimentoModal.tsx
@@ -62,23 +62,17 @@ export default function MovimentoModal({
 
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-
-    function handleClickOutside(e: MouseEvent) {
-      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+      if (e.key === "Escape" && !showDestinazioneModal) {
         onClose();
       }
     }
 
     document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("mousedown", handleClickOutside);
 
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [onClose]);
+  }, [onClose, showDestinazioneModal]);
 
   const filteredMagazzini = selectedStabilimento
     ? magazzini.filter((m) => m.id_stabilimento === selectedStabilimento)
@@ -156,11 +150,21 @@ export default function MovimentoModal({
     }
   };
 
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget && !showDestinazioneModal) {
+      onClose();
+    }
+  };
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
+    <div 
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
+      onClick={handleBackdropClick}
+    >
       <div
         ref={modalRef}
         className="w-full max-w-md bg-zinc-900 rounded-2xl shadow-2xl border border-zinc-800 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
         <div className={`flex items-center justify-between px-6 py-4 border-b ${
diff --git a/src/components/TreeNode.tsx b/src/components/TreeNode.tsx
index 1a40285..a7ecece 100644
--- a/src/components/TreeNode.tsx
+++ b/src/components/TreeNode.tsx
@@ -118,15 +118,29 @@ export default function TreeNode({
   const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    e.dataTransfer.dropEffect = "move";
     setIsDragOver(true);
   };
 
   const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
+    const relatedTarget = e.relatedTarget as Node | null;
+    const currentTarget = e.currentTarget as Node;
+    
+    if (relatedTarget && currentTarget.contains(relatedTarget)) {
+      return;
+    }
+    
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
   };
 
+  const handleDragEnter = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
   const safeTextColor = getReadableTextColor(node.colore_testo);
 
   const getNodeTypeIcon = () => {
@@ -155,8 +169,9 @@ export default function TreeNode({
       <div
         className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all group
           ${getNodeTypeBg()}
-          ${isDragOver ? "ring-2 ring-blue-500 bg-blue-900/50" : ""}
+          ${isDragOver ? "ring-2 ring-blue-500 bg-blue-900/50 scale-[1.02]" : ""}
           hover:bg-zinc-800/70`}
+        onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}