inserito filtro stabilimento per MacchineTree.tsx

src/components/MacchineTree.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import type { MacchinaWithDetails, ArticoliPerMacchina } from "@/src/types/macchina";
 import type { Stabilimento } from "@/src/types/stabilimento";
 import TreeNode from "./TreeNode";
@@ -13,6 +13,8 @@ export default function MacchineTree() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const [selectedStabilimento, setSelectedStabilimento] = useState<Stabilimento | null>(null);
+
   const [copiedNodeId, setCopiedNodeId] = useState<number | null>(null);
   const [isCloning, setIsCloning] = useState(false);
 
@@ -66,7 +68,10 @@ export default function MacchineTree() {
 
   const handleAddMachine = () => {
     setEditingMacchina(null);
-    setParentInfo({ parentId: null, parentStabilimento: null });
+    setParentInfo({ 
+      parentId: null, 
+      parentStabilimento: selectedStabilimento?.id || null 
+    });
     setShowModal(true);
   };
 
@@ -198,7 +203,15 @@ export default function MacchineTree() {
     console.log("Drop article on machine:", macchinaId, article);
   };
 
-  const rootNodes = nodes.filter((n) => n.id_padre === null);
+  const filteredNodes = useMemo(() => {
+    if (!selectedStabilimento) return nodes;
+    return nodes.filter((n) => n.id_stabilimento === selectedStabilimento.id);
+  }, [nodes, selectedStabilimento]);
+
+  const rootNodes = filteredNodes.filter((n) => n.id_padre === null);
+  
+  const filteredCount = filteredNodes.length;
+  const totalCount = nodes.length;
 
   return (
     <div className="flex flex-col h-full">
@@ -207,7 +220,10 @@ export default function MacchineTree() {
         <div>
           <h2 className="text-lg font-semibold text-white">Macchine</h2>
           <p className="text-xs text-zinc-500">
-            {nodes.length} elementi nell'albero
+            {selectedStabilimento 
+              ? `${filteredCount} di ${totalCount} elementi`
+              : `${totalCount} elementi nell'albero`
+            }
           </p>
         </div>
         <button
@@ -222,6 +238,40 @@ export default function MacchineTree() {
         </button>
       </div>
 
+      {/* Filtro Stabilimento */}
+      <div className="mb-4 p-3 rounded-lg bg-zinc-800/50 border border-zinc-800">
+        <label className="block text-xs font-medium text-zinc-400 mb-2">
+          Filtra per stabilimento
+        </label>
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => setSelectedStabilimento(null)}
+            className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all
+              ${!selectedStabilimento 
+                ? "bg-blue-600 text-white" 
+                : "bg-zinc-700 text-zinc-300 hover:bg-zinc-600"
+              }`}
+          >
+            Tutti
+          </button>
+          {stabilimenti.map((stab) => (
+            <button
+              key={stab.id}
+              onClick={() => setSelectedStabilimento(
+                selectedStabilimento?.id === stab.id ? null : stab
+              )}
+              className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all
+                ${selectedStabilimento?.id === stab.id 
+                  ? "bg-blue-600 text-white" 
+                  : "bg-zinc-700 text-zinc-300 hover:bg-zinc-600"
+                }`}
+            >
+              {stab.descrizione}
+            </button>
+          ))}
+        </div>
+      </div>
+
       {/* Indicatore clonazione */}
       {isCloning && (
         <div className="mb-3 px-3 py-2 rounded-lg bg-blue-900/30 border border-blue-700/50 flex items-center gap-2">
@@ -270,9 +320,17 @@ export default function MacchineTree() {
             <svg className="w-12 h-12 text-zinc-700 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
             </svg>
-            <p className="text-zinc-500 text-sm mb-2">Nessuna macchina presente</p>
+            <p className="text-zinc-500 text-sm mb-2">
+              {selectedStabilimento 
+                ? `Nessuna macchina in "${selectedStabilimento.descrizione}"`
+                : "Nessuna macchina presente"
+              }
+            </p>
             <p className="text-zinc-600 text-xs mb-4">
-              Clicca sul pulsante + per aggiungere la prima macchina
+              {selectedStabilimento 
+                ? "Seleziona un altro stabilimento o aggiungi una nuova macchina"
+                : "Clicca sul pulsante + per aggiungere la prima macchina"
+              }
             </p>
             <button
               onClick={handleAddMachine}
@@ -287,7 +345,7 @@ export default function MacchineTree() {
               <TreeNode
                 key={node.id}
                 node={node}
-                allNodes={nodes}
+                allNodes={filteredNodes}
                 level={0}
                 articlesByMacchina={articlesByMacchina}
                 isCloning={isCloning}