From 627504586f890294b3f00d23c63c1e7159a15a96 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 7 Feb 2026 18:16:26 +0000
Subject: [PATCH] fix: pass redFlagConfigs as prop to child components in
 AgenticReadinessTab

Fixed "ReferenceError: redFlagConfigs is not defined" by passing redFlagConfigs
as a prop to components that need it:
- TierQueueSection: Added redFlagConfigs prop and passed from parent
- ExpandableSkillRow: Added redFlagConfigs prop
- HumanOnlyByReasonSection: Added redFlagConfigs prop and passed from parent

These components are defined before the main AgenticReadinessTab component
so they don't have direct access to redFlagConfigs defined in the parent scope.

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

diff --git a/frontend/components/tabs/AgenticReadinessTab.tsx b/frontend/components/tabs/AgenticReadinessTab.tsx
index 85a7ef1..574e447 100644
--- a/frontend/components/tabs/AgenticReadinessTab.tsx
+++ b/frontend/components/tabs/AgenticReadinessTab.tsx
@@ -2007,12 +2007,14 @@ function ExpandableSkillRow({
   dataPoint,
   idx,
   isExpanded,
-  onToggle
+  onToggle,
+  redFlagConfigs
 }: {
   dataPoint: DrilldownDataPoint;
   idx: number;
   isExpanded: boolean;
   onToggle: () => void;
+  redFlagConfigs: RedFlagConfig[];
 }) {
   // v3.4: Contar colas por Tier
   const tierCounts = {
@@ -2326,10 +2328,12 @@ const TIER_SECTION_CONFIG: Record<AgenticTier, {
 // Componente de tabla de colas por Tier (AUTOMATE, ASSIST, AUGMENT)
 function TierQueueSection({
   drilldownData,
-  tier
+  tier,
+  redFlagConfigs
 }: {
   drilldownData: DrilldownDataPoint[];
   tier: 'AUTOMATE' | 'ASSIST' | 'AUGMENT';
+  redFlagConfigs: RedFlagConfig[];
 }) {
   const [expandedSkills, setExpandedSkills] = useState<Set<string>>(new Set());
   const config = TIER_SECTION_CONFIG[tier];
@@ -2536,7 +2540,7 @@ function TierQueueSection({
 }
 
 // Componente para colas HUMAN-ONLY agrupadas por razón/red flag
-function HumanOnlyByReasonSection({ drilldownData }: { drilldownData: DrilldownDataPoint[] }) {
+function HumanOnlyByReasonSection({ drilldownData, redFlagConfigs }: { drilldownData: DrilldownDataPoint[]; redFlagConfigs: RedFlagConfig[] }) {
   const [expandedReasons, setExpandedReasons] = useState<Set<string>>(new Set());
   const config = TIER_SECTION_CONFIG['HUMAN-ONLY'];
 
@@ -3692,16 +3696,16 @@ export function AgenticReadinessTab({ data, onTabChange }: AgenticReadinessTabPr
       {data.drilldownData && data.drilldownData.length > 0 ? (
         <>
           {/* TABLA 1: Colas AUTOMATE - Listas para automatización */}
-          <TierQueueSection drilldownData={data.drilldownData} tier="AUTOMATE" />
+          <TierQueueSection drilldownData={data.drilldownData} tier="AUTOMATE" redFlagConfigs={redFlagConfigs} />
 
           {/* TABLA 2: Colas ASSIST - Candidatas a Copilot */}
-          <TierQueueSection drilldownData={data.drilldownData} tier="ASSIST" />
+          <TierQueueSection drilldownData={data.drilldownData} tier="ASSIST" redFlagConfigs={redFlagConfigs} />
 
           {/* TABLA 3: Colas AUGMENT - Requieren optimización */}
-          <TierQueueSection drilldownData={data.drilldownData} tier="AUGMENT" />
+          <TierQueueSection drilldownData={data.drilldownData} tier="AUGMENT" redFlagConfigs={redFlagConfigs} />
 
           {/* TABLA 4: Colas HUMAN-ONLY - Agrupadas por razón/red flag */}
-          <HumanOnlyByReasonSection drilldownData={data.drilldownData} />
+          <HumanOnlyByReasonSection drilldownData={data.drilldownData} redFlagConfigs={redFlagConfigs} />
         </>
       ) : (
         /* Fallback a tabla por Línea de Negocio si no hay drilldown data */