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

Fix AgenticReadinessTab runtime error: add missing useTranslation hook

Browse Source 
Fixed "TypeError: a is not iterable" error by:
- Adding useTranslation() hook at component top
- Initializing redFlagConfigs with getRedFlagConfigs(t)
- Updating all detectRedFlags() calls to pass redFlagConfigs parameter
- Replacing RED_FLAG_CONFIGS references with redFlagConfigs variable

The translation agent had converted RED_FLAG_CONFIGS from a constant to a
function but didn't update all call sites, causing runtime failures.

https://claude.ai/code/session_01GNbnkFoESkRcnPr3bLCYDg
This commit is contained in:
Claude
2026-02-07 18:04:01 +00:00
parent 0b778557d3
commit 00f766913b
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2163,7 +2163,7 @@ function ExpandableSkillRow({
{dataPoint.originalQueues.map((queue, queueIdx) => {
const queueMonthlySavings = queue.annualCost ? Math.round(queue.annualCost * 0.35 / 12) : 0;
const tierStyle = getTierStyle(queue.tier);
const redFlags = detectRedFlags(queue);
const redFlags = detectRedFlags(queue, redFlagConfigs);
return (
<tr
@@ -2555,7 +2555,7 @@ function HumanOnlyByReasonSection({ drilldownData }: { drilldownData: DrilldownD
const queuesByReason: Record<string, typeof allHumanOnlyQueues> = {};
allHumanOnlyQueues.forEach(queue => {
const flags = detectRedFlags(queue);
const flags = detectRedFlags(queue, redFlagConfigs);
// Determinar razón principal (prioridad: cv_high > transfer_high > volume_low > valid_low)
let reason = 'Sin Red Flags específicos';
let reasonId = 'no_flags';
@@ -2579,7 +2579,7 @@ function HumanOnlyByReasonSection({ drilldownData }: { drilldownData: DrilldownD
// Convertir a array y ordenar por volumen
const reasonGroups = Object.entries(queuesByReason)
.map(([reasonId, queues]) => {
const flagConfig = RED_FLAG_CONFIGS.find(c => c.id === reasonId);
const flagConfig = redFlagConfigs.find(c => c.id === reasonId);
return {
reasonId,
reason: flagConfig?.label || 'Sin Red Flags específicos',
@@ -2719,7 +2719,7 @@ function HumanOnlyByReasonSection({ drilldownData }: { drilldownData: DrilldownD
</thead>
<tbody className="divide-y divide-gray-100 bg-white">
{group.queues.slice(0, 20).map((queue) => {
const flags = detectRedFlags(queue);
const flags = detectRedFlags(queue, redFlagConfigs);
return (
<tr key={queue.original_queue_id} className="hover:bg-gray-50">
<td className="px-4 py-2 font-medium text-gray-700 truncate max-w-[180px]" title={queue.original_queue_id}>
@@ -2947,7 +2947,7 @@ function HumanOnlyRedFlagsSection({ drilldownData }: { drilldownData: DrilldownD
// Colas con red flags (la mayoría de HUMAN-ONLY tendrán red flags por definición)
const queuesWithFlags = humanOnlyQueues.map(q => ({
queue: q,
flags: detectRedFlags(q)
flags: detectRedFlags(q, redFlagConfigs)
})).filter(qf => qf.flags.length > 0);
// Ordenar por volumen (mayor primero para priorizar)
@@ -2970,7 +2970,7 @@ function HumanOnlyRedFlagsSection({ drilldownData }: { drilldownData: DrilldownD
const pctCosteRedFlags = costeAnualTotal > 0 ? (costeAnualRedFlags / costeAnualTotal) * 100 : 0;
// Estadísticas detalladas por tipo de red flag
const flagStats = RED_FLAG_CONFIGS.map(config => {
const flagStats = redFlagConfigs.map(config => {
const matchingQueues = queuesWithFlags.filter(qf =>
qf.flags.some(f => f.config.id === config.id)
);
@@ -3625,6 +3625,9 @@ function RoadmapConnectionSection({ drilldownData }: { drilldownData: DrilldownD
}
export function AgenticReadinessTab({ data, onTabChange }: AgenticReadinessTabProps) {
const { t } = useTranslation();
const redFlagConfigs = getRedFlagConfigs(t);
// Debug: Log drilldown data status
console.log('🔍 AgenticReadinessTab - drilldownData:', {
exists: !!data.drilldownData,