susana/BeyondCXAnalytics-Demo
2
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases 6 Wiki Activity

fix: pass redFlagConfigs as prop to child components in AgenticReadinessTab

Browse Source 
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
This commit is contained in:
Claude
2026-02-07 18:16:26 +00:00
parent d645eda97c
commit 627504586f
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/components/tabs/AgenticReadinessTab.tsx
View File

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