From 7659abd405382cc60a63ca292dd26bf4702fb26d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 7 Feb 2026 18:50:30 +0000
Subject: [PATCH] fix: add click-outside functionality to
 AgenticMethodologyIntro modal

Added useEffect hook with event listener to close the methodology panel
when user clicks outside of it. This provides better UX by allowing users
to close the panel by clicking anywhere outside, not just the header.

Changes:
- Added componentRef using useRef to track the component DOM element
- Added useEffect with mousedown event listener
- Wrapped Card component in div with ref
- Event listener automatically cleans up when panel closes or component unmounts

https://claude.ai/code/session_01GNbnkFoESkRcnPr3bLCYDg
---
 .../components/tabs/AgenticReadinessTab.tsx   | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/frontend/components/tabs/AgenticReadinessTab.tsx b/frontend/components/tabs/AgenticReadinessTab.tsx
index ec81854..d5f3d22 100644
--- a/frontend/components/tabs/AgenticReadinessTab.tsx
+++ b/frontend/components/tabs/AgenticReadinessTab.tsx
@@ -228,6 +228,21 @@ function AgenticMethodologyIntro({
   totalQueues: number;
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const componentRef = React.useRef<HTMLDivElement>(null);
+
+  // Close when clicking outside
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isExpanded && componentRef.current && !componentRef.current.contains(event.target as Node)) {
+        setIsExpanded(false);
+      }
+    };
+
+    if (isExpanded) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isExpanded]);
 
   // Calcular estadísticas para el roadmap
   const automatizableQueues = tierData.AUTOMATE.count + tierData.ASSIST.count;
@@ -239,12 +254,13 @@ function AgenticMethodologyIntro({
     : 0;
 
   return (
-    <Card padding="none">
-      {/* Header con toggle */}
-      <div
-        className="px-5 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 cursor-pointer"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
+    <div ref={componentRef}>
+      <Card padding="none">
+        {/* Header con toggle */}
+        <div
+          className="px-5 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 cursor-pointer"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <div className="p-2 rounded-lg bg-blue-100">
@@ -453,7 +469,8 @@ function AgenticMethodologyIntro({
           <span className="ml-auto text-blue-600 font-medium">Click para expandir metodología</span>
         </div>
       )}
-    </Card>
+      </Card>
+    </div>
   );
 }