/* Flow-OS — Vista por departamento (full heatmap drilldown) */ const { useState: useSV, useEffect: useEV } = React; function DepartmentsVistaPage() { const route = useRoute(); const [metric, setMetric] = useSV('flow'); const [sortBy, setSortBy] = useSV('flow_desc'); const [period, setPeriod] = useSV('month'); const [hoverTeam, setHoverTeam] = useSV(null); const [isMob, setIsMob] = useSV(typeof window !== 'undefined' && window.innerWidth <= 640); useEV(() => { const onR = () => setIsMob(window.innerWidth <= 640); window.addEventListener('resize', onR); return () => window.removeEventListener('resize', onR); }, []); const metricLabels = { flow: isMob ? 'Flow' : 'Flow Score', recovery: 'Recovery', sleep: 'Sueño', hrv: 'HRV' }; // Short label used only in the table header column. const metricHeaderLabels = { flow: 'Score', recovery: 'Recovery', sleep: 'Sueño', hrv: 'HRV' }; const periodLabels = { month: 'Último mes', q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4', h1: 'H1', h2: 'H2' }; const periodTopLabels = { month: 'ÚLTIMO MES', q1: 'Q1 · ENE–MAR', q2: 'Q2 · ABR–JUN', q3: 'Q3 · JUL–SEP', q4: 'Q4 · OCT–DIC', h1: 'H1 · ENE–JUN', h2: 'H2 · JUL–DIC' }; const isFlow = metric === 'flow'; // Period configuration. Today = 4 May 2026 (Mon, week 19, month idx 4). // Each period renders one or more 20-cell rows (4 weeks × 5 weekdays per month). // Mes = 1 row. Q = 3 rows (one per month). H = 6 rows. // futureFrom: index within that row's 20 cells from which future starts. // currentMonthIdx = 4 (May). Days passed in May = 1 (Fri 1 May was last weekday before today Mon 4). // We approximate "future cells in May" = ~1 cell out of 20 already past, rest grey. const periodConfig = (() => { const monthShort = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']; const todayMonth = 4; // May const todayCellInMonth = 1; // ~1 weekday of May has passed (Fri 1 May) const buildRows = (startMonth, count) => Array.from({ length: count }, (_, i) => { const m = startMonth + i; let futureFrom = 20; if (m > todayMonth) futureFrom = 0; // entire month future else if (m === todayMonth) futureFrom = todayCellInMonth; return { label: monthShort[m], futureFrom }; }); if (period === 'month') { // Only the current 4 weeks (S15-S18) – all past. return { topLabel: 'ÚLTIMAS 4 SEMANAS', rows: [ { label: 'S15-S18', futureFrom: 20, weekHeaders: true } ] }; } if (period.startsWith('q')) { const qIdx = +period[1] - 1; return { topLabel: `Q${qIdx + 1}`, rows: buildRows(qIdx * 3, 3) }; } if (period === 'h1') return { topLabel: 'H1', rows: buildRows(0, 6) }; if (period === 'h2') return { topLabel: 'H2', rows: buildRows(6, 6) }; return { topLabel: '', rows: [] }; })(); // Get the value to display per team based on selected metric const getMetric = (t) => { if (metric === 'flow') return t.flow; if (metric === 'recovery') return t.recovery; if (metric === 'hrv') return 35 + t.hrv * 2 + (t.flow - 60) * 0.4; if (metric === 'sleep') { // parse "7h 32m" → 0–100 score const m = (t.sleep || '').match(/(\d+)h\s*(\d+)?/); const mins = m ? (+m[1]) * 60 + (+(m[2] || 0)) : 420; return Math.max(20, Math.min(95, (mins - 360) / 1.6 + 60)); } return t.flow; }; // Sort teams const sorted = TEAMS.slice().sort((a, b) => { if (sortBy === 'flow_desc') return getMetric(b) - getMetric(a); if (sortBy === 'flow_asc') return getMetric(a) - getMetric(b); if (sortBy === 'risk') return (a.status === 'red' ? -2 : a.status === 'amber' ? -1 : 0) - (b.status === 'red' ? -2 : b.status === 'amber' ? -1 : 0); if (sortBy === 'size') return b.size - a.size; return 0; }); const totalPeople = TEAMS.reduce((s, t) => s + t.size, 0); const avgValue = Math.round(TEAMS.reduce((s, t) => s + getMetric(t), 0) / TEAMS.length); const redCount = TEAMS.filter(t => t.status === 'red').length; const amberCount = TEAMS.filter(t => t.status === 'amber').length; const greenCount = TEAMS.filter(t => t.status === 'green').length; // Aggregate cell stats across all teams for the selected period (drives Verde% and Flow%) const periodStats = (() => { let total = 0, green = 0, deepFlow = 0; TEAMS.forEach((d, i) => { const v = getMetric(d); const seed = i * 7 + 13; periodConfig.rows.forEach((row, ri) => { for (let j = 0; j < 20; j++) { if (j >= row.futureFrom) continue; const noise = ((seed + (ri * 100) + j * 17) % 100) / 100; const spread = isFlow ? 36 : metric === 'sleep' ? 60 : 45; const offset = metric === 'sleep' ? -10 : 0; const base = v + offset + (noise - 0.5) * spread; const cv = Math.max(15, Math.min(98, base)); total++; if (cv >= 70) green++; if (cv >= 88) deepFlow++; } }); }); if (total === 0) return { greenPct: 0, flowPct: 0 }; return { greenPct: Math.round((green / total) * 100), flowPct: Math.round((deepFlow / total) * 100) }; })(); return (
{/* Breadcrumb */}
/ VISTA POR DEPARTAMENTO
{/* Title row */}
Vista por departamento
{TEAMS.length} EQUIPOS · {totalPeople} PERSONAS · {periodTopLabels[period] || ''}
{!route.aiOpen && ( )}
{/* Summary KPIs strip */}
{/* Filter / sort bar */}
MÉTRICA
{Object.entries(metricLabels).map(([k, l]) => ( ))}
ORDENAR PERIODO
{/* MAIN HEATMAP TABLE */}
{/* Column headers */}
EQUIPO {period === 'month' ? (
S15 S16 S17 S18
) : (
{periodConfig.topLabel}
)} SCORE Δ 7D ESTADO
{sorted.map((d, i) => { const v = getMetric(d); const seed = i * 7 + 13; // generate cells per row (20 per row) const rowCells = periodConfig.rows.map((row, ri) => Array.from({ length: 20 }, (_, j) => { const noise = ((seed + (ri * 100) + j * 17) % 100) / 100; const spread = isFlow ? 36 : metric === 'sleep' ? 60 : 45; const offset = metric === 'sleep' ? -10 : 0; const base = v + offset + (noise - 0.5) * spread; return Math.max(15, Math.min(98, base)); }) ); // Highlight: Engineering Backend on Mes view → last 2 days S18 = deep flow (purple), // day before = high green. if (d.id === 'eng-be' && period === 'month' && isFlow) { rowCells[0][17] = 78; // green rowCells[0][18] = 92; // purple (deep flow) rowCells[0][19] = 95; // purple (deep flow) } const c = statusColor(v, isFlow); const isHover = hoverTeam === d.id; return (
route.goDept(d.id)} onMouseEnter={() => setHoverTeam(d.id)} onMouseLeave={() => setHoverTeam(null)} style={{ display: 'grid', gridTemplateColumns: '220px 1fr 70px 70px 100px', gap: 18, alignItems: 'center', padding: '14px 8px', borderBottom: i < sorted.length - 1 ? '1px solid var(--line)' : 'none', cursor: 'pointer', background: isHover ? 'rgba(0,0,0,0.025)' : 'transparent', transition: 'background 0.15s', borderRadius: 6 }} > {/* Team */}
{d.name} {d.sub && · {d.sub}}
{d.size} PERSONAS · K-MIN {d.size >= 5 ? '✓' : '✗'}
{/* Heat strip — multi-row */}
{rowCells.map((cells, ri) => (
{cells.map((cv, j) => { const isFuture = j >= periodConfig.rows[ri].futureFrom; return (
); })} {period !== 'month' && ( {periodConfig.rows[ri].label} )}
))}
{/* Score */}
{Math.round(v)}
{/* Delta */}
{d.delta > 0 ? '▲' : '▼'} {Math.abs(d.delta)}
{/* Status pill + arrow — based on TODAY's value (last cell of last row) */}
{(() => { const lastRow = rowCells[rowCells.length - 1]; // Find last non-future cell in last row const lastFutureFrom = periodConfig.rows[periodConfig.rows.length - 1].futureFrom; const lastIdx = Math.max(0, lastFutureFrom - 1); const todayVal = lastRow[lastIdx]; const tc = statusColor(todayVal, isFlow); const label = (isFlow && todayVal >= 85) ? 'FLOW' : todayVal >= 70 ? 'VERDE' : todayVal >= 55 ? 'AVISO' : 'RIESGO'; return ( {label} ); })()}
); })}
{/* Footer caption */}
DATOS AGREGADOS · MÍNIMO 5 PERSONAS POR EQUIPO · NUNCA INDIVIDUALES
); } // Compact KPI card for the summary strip function SummaryStat({ label, value, sub, status, accent, valueColor }) { const c = statusColor(status); return (
{label}
{value}
{sub}
); } Object.assign(window, { DepartmentsVistaPage }); function MobilePeriodoButton() { const [val, setVal] = useSV(() => (typeof window !== 'undefined' && window.__sharedTimeRange) || 'today'); const [open, setOpen] = useSV(false); useEV(() => { const onChange = (e) => setVal(e.detail); window.addEventListener('shared-time-range-change', onChange); return () => window.removeEventListener('shared-time-range-change', onChange); }, []); const items = [ { id: 'today', l: 'Lun 4 may 2026', d: 'Hoy' }, { id: 'week', l: 'Esta semana', d: '28 abr – 4 may' }, { id: 'month', l: 'Este mes', d: 'Mayo 2026' }, { id: 'quarter', l: 'Este trimestre', d: 'Q2 · abr – jun' } ]; const current = items.find(i => i.id === val) || items[0]; const set = (id) => { setVal(id); setOpen(false); window.__sharedTimeRange = id; window.dispatchEvent(new CustomEvent('shared-time-range-change', { detail: id })); }; return (
{open && (
{items.map(it => { const active = val === it.id; return ( ); })}
)}
); } Object.assign(window, { MobilePeriodoButton });