const { useState, useEffect, useMemo, useRef } = React; // ------------------------------------------------------------- // Utilidades de formato // ------------------------------------------------------------- const fmtNum = (n) => (n !== undefined && n !== null ? Math.round(n).toLocaleString('es-CL') : '0'); const fmtUF = (n) => { if (n === undefined || n === null || isNaN(n)) return '0 UF'; if (Math.abs(n) >= 1000000) return (n / 1000000).toFixed(2).replace('.', ',') + ' mill.'; return Math.round(n).toLocaleString('es-CL') + ' UF'; }; const fmtPct = (n) => (n !== undefined && !isNaN(n) ? (n * 100).toFixed(1).replace('.', ',') + '%' : '0,0%'); // ------------------------------------------------------------- // Componente de Gráfico Apache ECharts // ------------------------------------------------------------- function EChart({ option, height = '320px', onChartClick }) { const chartRef = useRef(null); const chartInstance = useRef(null); const prevWidth = useRef(null); useEffect(() => { if (!chartRef.current) return; if (!chartInstance.current) { chartInstance.current = echarts.init(chartRef.current); } chartInstance.current.setOption(option, true); if (onChartClick) { chartInstance.current.off('click'); chartInstance.current.on('click', onChartClick); } const resizeObserver = new ResizeObserver((entries) => { for (let entry of entries) { const cr = entry.contentRect; if (prevWidth.current !== null && Math.abs(cr.width - prevWidth.current) > 2) { chartInstance.current?.resize(); } prevWidth.current = cr.width; } }); resizeObserver.observe(chartRef.current); const handleResize = () => chartInstance.current?.resize(); window.addEventListener('resize', handleResize); return () => { resizeObserver.disconnect(); window.removeEventListener('resize', handleResize); }; }, [option, onChartClick]); useEffect(() => { return () => { chartInstance.current?.dispose(); chartInstance.current = null; }; }, []); return
; } // ------------------------------------------------------------- // Aplicación Principal // ------------------------------------------------------------- // ------------------------------------------------------------- // Función generadora de Plantilla HTML Oficial para Correos Gmail // ------------------------------------------------------------- // ------------------------------------------------------------- // Función auxiliar para formatear fechas y reemplazar variables en textos // ------------------------------------------------------------- function replaceDateVariables(text) { if (!text) return ''; const now = new Date(); const dia = String(now.getDate()).padStart(2, '0'); const mesesNombre = [ 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre' ]; const mes = mesesNombre[now.getMonth()]; const ano = String(now.getFullYear()); const fecha = `${dia}-${String(now.getMonth() + 1).padStart(2, '0')}-${ano}`; return text .replace(/\(D[IÍ]A\)/gi, dia) .replace(/\{D[IÍ]A\}/gi, dia) .replace(/\(MES\)/gi, mes) .replace(/\{MES\}/gi, mes) .replace(/\(A[NÑ]O\)/gi, ano) .replace(/\{A[NÑ]O\}/gi, ano) .replace(/\(FECHA\)/gi, fecha) .replace(/\{FECHA\}/gi, fecha); } // ------------------------------------------------------------- // Función generadora de Plantilla HTML Oficial para Correos Gmail con Imágenes Inline (CID) // ------------------------------------------------------------- function buildReportEmailHtml(schedule, metrics, chartImages = {}) { const rawIntro = schedule.emailIntro || 'Estimado equipo,\n\nCompartimos el reporte oficial de avance de escrituración correspondiente al período (DÍA) (MES) (AÑO).'; const intro = replaceDateVariables(rawIntro).replace(/\n/g, '
'); const rawOutro = schedule.emailOutro || 'Saludos cordiales,\nControl de Gestión Fundamenta'; const outro = replaceDateVariables(rawOutro).replace(/\n/g, '
'); const now = new Date(); const dateStr = now.toLocaleDateString('es-CL', { day: '2-digit', month: '2-digit', year: 'numeric' }); let blocks = ''; // 1. Tarjetas KPI if ((schedule.elements || []).includes('kpis') && metrics) { blocks += `
Cumplimiento de Metas Consolidadas YTD 2026
Cumplimiento Unidades YTD ${Math.round(metrics.pctCumplimientoUniMesVigente * 100)}% ${metrics.totalRealUni} de ${metrics.totalPptoUniMesVigente} un. Cumplimiento UF YTD ${Math.round(metrics.pctCumplimientoUFMesVigente * 100)}% ${Math.round(metrics.totalRealUF).toLocaleString('es-CL')} UF
`; } // 2. Gráficos Seleccionados insertados como imágenes reales (CID Inline) const chartConfigs = [ { id: 'uni_parcial', title: 'Escrituras Parciales (Mes a Mes) · Unidades', cid: 'chart_uni_parcial@fundamenta' }, { id: 'uni_acum', title: 'Escrituras Acumuladas YTD · Unidades', cid: 'chart_uni_acum@fundamenta' }, { id: 'uf_parcial', title: 'Escrituras Parciales (Mes a Mes) · Monto UF', cid: 'chart_uf_parcial@fundamenta' }, { id: 'uf_acum', title: 'Escrituras Acumuladas YTD · Monto UF', cid: 'chart_uf_acum@fundamenta' }, { id: 'estados', title: 'Estado de Firmas por Proyecto (100% Apilado)', cid: 'chart_estados@fundamenta' } ]; chartConfigs.forEach(cfg => { if ((schedule.elements || []).includes(cfg.id)) { const hasImage = Boolean(chartImages[cfg.id]); const imgSrc = hasImage ? `cid:${cfg.cid}` : ''; if (hasImage) { blocks += `
Gráfico: ${cfg.title}
${cfg.title}
`; } } }); // 3. Tabla Desglose Unidades if ((schedule.elements || []).includes('uni_tabla') && metrics && metrics.projectBreakdown) { let rows = ''; metrics.projectBreakdown.slice(0, 8).forEach(p => { const pct = p.pptoUni > 0 ? Math.round((p.realUni / p.pptoUni) * 100) : 0; const badgeBg = pct >= 90 ? '#d1fae5' : '#fef3c7'; const badgeColor = pct >= 90 ? '#065f46' : '#92400e'; rows += ` ${p.proyecto} ${p.realUni} ${p.pptoUni} ${pct}% `; }); blocks += `
Tabla: Cumplimiento por Proyecto · Unidades (Mes Vigente: ${metrics.mesVigenteLabel} 2026)
${rows}
Proyecto Real Unidades Ppto Mes % Cumpl.
`; } // 4. Tabla Desglose UF if ((schedule.elements || []).includes('uf_tabla') && metrics && metrics.projectBreakdown) { let rowsUF = ''; metrics.projectBreakdown.slice(0, 8).forEach(p => { const pct = p.pptoUF > 0 ? Math.round((p.realUF / p.pptoUF) * 100) : 0; const badgeBg = pct >= 90 ? '#d1fae5' : '#fef3c7'; const badgeColor = pct >= 90 ? '#065f46' : '#92400e'; rowsUF += ` ${p.proyecto} ${Math.round(p.realUF).toLocaleString('es-CL')} ${Math.round(p.pptoUF).toLocaleString('es-CL')} ${pct}% `; }); blocks += `
Tabla: Cumplimiento por Proyecto · Monto UF (Mes Vigente: ${metrics.mesVigenteLabel} 2026)
${rowsUF}
Proyecto Real UF Ppto UF % Cumpl.
`; } return `
FUNDAMENTA
Reportería Automática · Control de Gestión 		${dateStr}
${intro}
${blocks}
${outro}
Interactúa con los datos consolidados y filtros en el tablero oficial: Abrir Plataforma Fundamenta
Este es un reporte oficial automatizado emitido por Grupo Fundamenta.
`; } function App() { const [tab, setTab] = useState('unidades'); // 'unidades' | 'uf' | 'estados' | 'admin' const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [selectedProyectos, setSelectedProyectos] = useState([]); const [sidebarOpen, setSidebarOpen] = useState(true); const [filterModalOpen, setFilterModalOpen] = useState(false); const [viewModeUni, setViewModeUni] = useState('parcial'); // 'parcial' | 'acumulado' const [viewModeUF, setViewModeUF] = useState('parcial'); // 'parcial' | 'acumulado' const [escrituracionOpen, setEscrituracionOpen] = useState(true); const [drilldownModal, setDrilldownModal] = useState(null); // ------------------------------------------------------------- // Autenticación estilo BSC · Exclusiva con Google Identity (GSI) // ------------------------------------------------------------- const [currentUser, setCurrentUser] = useState(null); const [authChecking, setAuthChecking] = useState(true); const [loginError, setLoginError] = useState(''); const [adminUsersList, setAdminUsersList] = useState([]); const [newAdminInput, setNewAdminInput] = useState(''); const [newAdminRole, setNewAdminRole] = useState('admin'); // Chequear sesión activa al arrancar (/api/auth/me) const checkSession = async () => { try { const res = await fetch('/api/auth/me'); const data = await res.json(); if (data && data.authenticated) { setCurrentUser({ email: data.email, name: data.name, role: data.role, isAdmin: data.isAdmin }); } else { // Fallback a localStorage por persistencia en refresh try { const saved = localStorage.getItem('fundamenta_auth_user'); if (saved) setCurrentUser(JSON.parse(saved)); } catch(e) {} } } catch(err) { console.warn('Error verificando sesión en servidor:', err); } finally { setAuthChecking(false); } }; useEffect(() => { checkSession(); }, []); // Cargar lista de usuarios administradores desde el servidor si es admin const fetchAdminUsers = async () => { try { const res = await fetch('/api/admin/users'); if (res.ok) { const list = await res.json(); setAdminUsersList(list); } } catch(e) {} }; useEffect(() => { if (currentUser && currentUser.role === 'admin') { fetchAdminUsers(); } }, [currentUser]); // Login con credencial de Google o con correo directo validado por el backend const handleGoogleCredential = async (resp) => { setLoginError(''); try { const res = await fetch('/api/auth/google', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ credential: resp.credential }) }); const data = await res.json(); if (!res.ok || !data.ok) { throw new Error(data.message || 'No fue posible validar la cuenta con Google.'); } setCurrentUser(data.user); localStorage.setItem('fundamenta_auth_user', JSON.stringify(data.user)); } catch(err) { setLoginError(err.message || 'Error al autenticar con Google.'); } }; // Inicializar Google Sign-In (GSI) estilo BSC useEffect(() => { if (!currentUser && window.google && window.google.accounts && window.google.accounts.id) { try { window.google.accounts.id.initialize({ client_id: "418027069264-8ntj4skqd10ovgf3f3k3faffos96i4vo.apps.googleusercontent.com", callback: handleGoogleCredential }); const btnContainer = document.getElementById('googleSignInBtn'); if (btnContainer) { window.google.accounts.id.renderButton(btnContainer, { theme: "outline", size: "large", text: "signin_with", shape: "pill", width: 280 }); } } catch(e) { console.warn('GSI init:', e); } } }, [currentUser, authChecking]); const handleLogout = async () => { try { await fetch('/api/auth/logout', { method: 'POST' }); } catch(e) {} setCurrentUser(null); localStorage.removeItem('fundamenta_auth_user'); }; // Filtros y búsqueda para el desglose de presupuestos en el panel admin const [adminReportSelected, setAdminReportSelected] = useState(null); // null muestra el catálogo de reportes (ej: Escrituración) const [adminPptoSearch, setAdminPptoSearch] = useState(''); const [adminPptoYear, setAdminPptoYear] = useState('2026'); const [adminPptoMetric, setAdminPptoMetric] = useState('all'); // 'all', 'UF', 'Unidades' const [editingPptoItem, setEditingPptoItem] = useState(null); const [newPptoModalOpen, setNewPptoModalOpen] = useState(false); // Estados de automatización de correos Gmail con persistencia const defaultSchedules = [ { id: 1, name: 'Reporte Semanal de Escrituración', reportId: 'escrituracion', // 'escrituracion', 'ventas', etc. frequency: 'semanal', // 'diario', 'semanal', 'quincenal', 'mensual' days: ['1', '5'], time: '08:30', recipients: 'gerencia@fundamenta.cl, finanzas@fundamenta.cl', cc: 'tcarvallo@fundamenta.cl', subject: 'Reporte de Avance de Escrituración - Fundamenta', emailIntro: 'Estimado equipo,\n\nCompartimos el reporte oficial de avance de escrituración correspondiente al período, con el desglose de cumplimiento de metas en Unidades y montos UF.', emailOutro: 'Quedamos atentos a sus consultas y comentarios.\n\nSaludos cordiales,\nEquipo de Finanzas y Control de Gestión\nFundamenta', elements: ['kpis', 'uni_parcial', 'uf_parcial', 'uni_tabla', 'estados'], isActive: true }, { id: 2, name: 'Flash Diario de Firmas', reportId: 'escrituracion', frequency: 'diario', days: ['1', '2', '3', '4', '5'], time: '18:00', recipients: 'comercial@fundamenta.cl, operaciones@fundamenta.cl', cc: 'tcarvallo@fundamenta.cl', subject: 'Flash Diario de Firmas y Escrituración - Fundamenta', emailIntro: 'Buenas tardes equipo,\n\nAdjuntamos el estado diario de avance en firmas y cumplimiento de escrituras al cierre de jornada.', emailOutro: 'Reporte generado automáticamente por la plataforma de reportería Fundamenta.\n\nSaludos,\nOperaciones Fundamenta', elements: ['kpis', 'estados', 'uni_acum'], isActive: true } ]; const [schedules, setSchedules] = useState(() => { try { const saved = localStorage.getItem('fundamenta_schedules'); return saved ? JSON.parse(saved) : defaultSchedules; } catch(e) { return defaultSchedules; } }); // Guardar programaciones automáticamente al cambiar useEffect(() => { try { localStorage.setItem('fundamenta_schedules', JSON.stringify(schedules)); } catch(e) {} }, [schedules]); const [editingSchedule, setEditingSchedule] = useState(null); const [gmailAccount, setGmailAccount] = useState(() => localStorage.getItem('fundamenta_gmail_user') || 'reportes@fundamenta.cl'); const [gmailSenderName, setGmailSenderName] = useState(() => localStorage.getItem('fundamenta_gmail_sender_name') || 'Tomás Carvallo'); const [gmailPass, setGmailPass] = useState(() => localStorage.getItem('fundamenta_gmail_pass') || ''); const [gmailConnected, setGmailConnected] = useState(() => Boolean(localStorage.getItem('fundamenta_gmail_pass'))); const [gmailModalOpen, setGmailModalOpen] = useState(false); const [gmailModalUser, setGmailModalUser] = useState(gmailAccount); const [gmailModalSenderName, setGmailModalSenderName] = useState(gmailSenderName); const [gmailModalPass, setGmailModalPass] = useState(gmailPass); const [gmailTesting, setGmailTesting] = useState(false); const [testSending, setTestSending] = useState(false); const [previewEmailModal, setPreviewEmailModal] = useState(null); // Función para capturar un gráfico de ECharts como PNG Base64 en alta definición const captureChartAsImage = (chartOption, width = 640, height = 340) => { return new Promise((resolve) => { try { const offscreenDiv = document.createElement('div'); offscreenDiv.style.width = width + 'px'; offscreenDiv.style.height = height + 'px'; offscreenDiv.style.position = 'fixed'; offscreenDiv.style.top = '-9999px'; offscreenDiv.style.left = '-9999px'; offscreenDiv.style.visibility = 'hidden'; document.body.appendChild(offscreenDiv); // Sin animaciones para captura inmediata const staticOption = { ...chartOption, animation: false }; const chart = echarts.init(offscreenDiv, null, { renderer: 'canvas', devicePixelRatio: 2 }); chart.setOption(staticOption); setTimeout(() => { try { const dataUrl = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#ffffff' }); chart.dispose(); document.body.removeChild(offscreenDiv); resolve(dataUrl); } catch (e) { console.error('Error capturando gráfico:', e); try { chart.dispose(); } catch(_) {} try { document.body.removeChild(offscreenDiv); } catch(_) {} resolve(null); } }, 150); } catch (err) { console.error('Error inicializando captura:', err); resolve(null); } }); }; // Función real de despacho de correo vía API backend con soporte para captura de gráficos y remitente personalizado const sendActualEmail = async (scheduleItem) => { if (!gmailConnected || !gmailPass) { alert('Debes vincular una cuenta de Gmail con su Contraseña de Aplicación antes de realizar envíos.'); setGmailModalOpen(true); return; } if (!scheduleItem.recipients || !scheduleItem.recipients.trim()) { alert('Por favor especifica al menos un destinatario en el campo "Para".'); return; } setTestSending(true); try { // 1. Capturar en vivo los gráficos seleccionados como imágenes PNG const chartImages = {}; const attachments = []; const elems = scheduleItem.elements || []; if (elems.includes('uni_parcial')) { const img = await captureChartAsImage(optUnidadesParcial, 640, 320); if (img) { chartImages['uni_parcial'] = img; attachments.push({ filename: 'grafico_unidades_mensual.png', content: img, cid: 'chart_uni_parcial@fundamenta' }); } } if (elems.includes('uni_acum')) { const img = await captureChartAsImage(optUnidadesAcum, 640, 320); if (img) { chartImages['uni_acum'] = img; attachments.push({ filename: 'grafico_unidades_acumulado.png', content: img, cid: 'chart_uni_acum@fundamenta' }); } } if (elems.includes('uf_parcial')) { const img = await captureChartAsImage(optUFParcial, 640, 320); if (img) { chartImages['uf_parcial'] = img; attachments.push({ filename: 'grafico_uf_mensual.png', content: img, cid: 'chart_uf_parcial@fundamenta' }); } } if (elems.includes('uf_acum')) { const img = await captureChartAsImage(optUFAcum, 640, 320); if (img) { chartImages['uf_acum'] = img; attachments.push({ filename: 'grafico_uf_acumulado.png', content: img, cid: 'chart_uf_acum@fundamenta' }); } } if (elems.includes('estados')) { const img = await captureChartAsImage(optEstadosFirma, 640, 480); if (img) { chartImages['estados'] = img; attachments.push({ filename: 'grafico_estados_firma.png', content: img, cid: 'chart_estados@fundamenta' }); } } // 2. Generar el HTML final con las referencias CID a las imágenes y reemplazo de fechas const emailHtml = buildReportEmailHtml(scheduleItem, metrics, chartImages); const emailSubject = replaceDateVariables(scheduleItem.subject || 'Reporte de Escrituración - Fundamenta'); const res = await fetch('/api/send-email', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user: gmailAccount, pass: gmailPass, senderName: gmailSenderName, to: scheduleItem.recipients, cc: scheduleItem.cc || undefined, subject: emailSubject, html: emailHtml, attachments: attachments }) }); const dataRes = await res.json(); if (dataRes.success) { const graficosCount = Object.keys(chartImages).length; alert('✓ ¡Correo despachado exitosamente a través de Gmail!\n\n' + '• Remitente: ' + gmailSenderName + ' <' + gmailAccount + '>\n' + '• Para: ' + scheduleItem.recipients + '\n' + '• Asunto: ' + emailSubject + '\n' + '• Gráficos incrustados: ' + (graficosCount > 0 ? graficosCount + ' capturas HD' : 'Ninguno seleccionado')); } else { alert('Error al despachar el correo: ' + (dataRes.error || 'Error desconocido')); } } catch (err) { alert('Error conectando con el servidor de correos: ' + err.message); } finally { setTestSending(false); } }; // Función para obtener únicamente los proyectos activos con escrituras reales o presupuesto en 2026 const getProyectos2026 = (d) => { if (!d) return []; const projs = new Set(); // 1. Proyectos con escrituras reales en 2026 (departamentos con fecha de firma cliente en 2026) d.real.forEach(r => { const isDep = (r['Tipo Unidad'] || '').toLowerCase() === 'departamento'; if (isDep && r['Fecha Firma Cliente']) { const parts = r['Fecha Firma Cliente'].split(' ')[0].split('-'); if (parts[2] === '2026' && r['Unidades escrituradas'] === '1') { projs.add(r.Proyecto); } } }); // 2. Proyectos que figuran en las planillas de presupuesto 2026 d.unidadesPpto.forEach(p => { if (p.Proyecto) projs.add(p.Proyecto); }); d.ufPpto.forEach(p => { if (p.Proyecto) projs.add(p.Proyecto); }); return Array.from(projs).filter(Boolean).sort(); }; // Carga de datos iniciales con soporte para presupuestos modificados guardados y actualización automática en vivo useEffect(() => { const loadSnapshot = (isInterval = false) => { fetch('data/snapshot.json?t=' + Date.now()) .then(res => res.json()) .then(d => { let finalData = d; try { const savedPpto = localStorage.getItem('fundamenta_custom_ppto'); if (savedPpto) { const parsed = JSON.parse(savedPpto); finalData = { ...d, unidadesPpto: parsed.unidadesPpto || d.unidadesPpto, ufPpto: parsed.ufPpto || d.ufPpto }; } } catch (e) { console.error('Error recuperando presupuestos modificados:', e); } setData(finalData); if (!isInterval) { const projs2026 = getProyectos2026(finalData); setSelectedProyectos(projs2026); setLoading(false); } }) .catch(err => { console.error('Error cargando snapshot:', err); if (!isInterval) setLoading(false); }); }; loadSnapshot(false); // Sondeo periódico cada 60 segundos para refrescar automáticamente la hora de sincronización y datos nuevos const timer = setInterval(() => loadSnapshot(true), 60000); return () => clearInterval(timer); }, []); // Función para guardar cambios de presupuestos tanto en estado como en localStorage const updateBudgets = (newUnidades, newUF) => { if (!data) return; const updated = { ...data, unidadesPpto: newUnidades, ufPpto: newUF }; setData(updated); try { localStorage.setItem('fundamenta_custom_ppto', JSON.stringify({ unidadesPpto: newUnidades, ufPpto: newUF })); } catch (e) { console.error('Error guardando presupuestos en localStorage:', e); } }; // Función para restablecer presupuestos a los valores originales const resetBudgetsToOriginal = () => { if (confirm('¿Deseas restablecer todos los presupuestos a los valores originales de fábrica? Todos los cambios manuales y planillas importadas se descartarán.')) { localStorage.removeItem('fundamenta_custom_ppto'); fetch('data/snapshot.json?t=' + Date.now()) .then(res => res.json()) .then(d => { setData(d); alert('✓ Presupuestos restablecidos exitosamente a los valores de fábrica.'); }) .catch(err => alert('Error recargando datos originales: ' + err.message)); } }; // Lista de todos los proyectos relevantes de 2026 const allProyectos = useMemo(() => { return getProyectos2026(data); }, [data]); // Manejador de selección de proyectos (slicer) const toggleProyecto = (proj) => { if (selectedProyectos.includes(proj)) { if (selectedProyectos.length === 1) return; // evitar dejar vacío setSelectedProyectos(selectedProyectos.filter(p => p !== proj)); } else { setSelectedProyectos([...selectedProyectos, proj]); } }; const selectAllProyectos = () => { if (selectedProyectos.length === allProyectos.length) { setSelectedProyectos([allProyectos[0]]); } else { setSelectedProyectos([...allProyectos]); } }; // ----------------------------------------------------------- // Cálculos de Métricas y Agregaciones (Equivalente al motor DAX) // ----------------------------------------------------------- const metrics = useMemo(() => { if (!data) return null; const MESES = [ { key: '01', label: 'ene 2026', fullDate: '01-01-2026' }, { key: '02', label: 'feb 2026', fullDate: '01-02-2026' }, { key: '03', label: 'mar 2026', fullDate: '01-03-2026' }, { key: '04', label: 'abr 2026', fullDate: '01-04-2026' }, { key: '05', label: 'may 2026', fullDate: '01-05-2026' }, { key: '06', label: 'jun 2026', fullDate: '01-06-2026' }, { key: '07', label: 'jul 2026', fullDate: '01-07-2026' }, { key: '08', label: 'ago 2026', fullDate: '01-08-2026' }, { key: '09', label: 'sep 2026', fullDate: '01-09-2026' }, { key: '10', label: 'oct 2026', fullDate: '01-10-2026' }, { key: '11', label: 'nov 2026', fullDate: '01-11-2026' }, { key: '12', label: 'dic 2026', fullDate: '01-12-2026' }, ]; // 1. Filtrar datos reales por proyectos seleccionados y Filtro Global de Informe: Tipo Unidad = departamento const filteredReal = data.real.filter(r => { const matchProj = selectedProyectos.includes(r.Proyecto); const isDep = (r['Tipo Unidad'] || '').toLowerCase() === 'departamento'; return matchProj && isDep; }); // 2. Presupuestos filtrados const filteredPptoUni = data.unidadesPpto.filter(p => selectedProyectos.includes(p.Proyecto)); const filteredPptoUF = data.ufPpto.filter(p => selectedProyectos.includes(p.Proyecto)); // Agrupación mensual const monthlyData = MESES.map((m, idx) => { // Real Unidades en el mes const realUni = filteredReal.filter(r => { if (!r['Fecha Firma Cliente']) return false; const [d, mo, y] = r['Fecha Firma Cliente'].split(' ')[0].split('-'); return mo === m.key && y === '2026' && r['Unidades escrituradas'] === '1'; }).length; // Real UF en el mes (solo departamentos con unidad escriturada = 1) const realUF = filteredReal.filter(r => { if (!r['Fecha Firma Cliente']) return false; const [d, mo, y] = r['Fecha Firma Cliente'].split(' ')[0].split('-'); const isDep = (r['Tipo Unidad'] || '').toLowerCase() === 'departamento'; return mo === m.key && y === '2026' && r['Unidades escrituradas'] === '1' && isDep; }).reduce((acc, r) => { const val = parseFloat((r['UF sin Abono Cliente'] || '0').replace(',', '.')); return acc + (isNaN(val) ? 0 : val); }, 0); // Ppto Unidades en el mes const pptoUni = filteredPptoUni.filter(p => p.Fecha.startsWith(m.fullDate)) .reduce((acc, p) => acc + (parseInt(p.Unidades, 10) || 0), 0); // Ppto UF en el mes const pptoUF = filteredPptoUF.filter(p => p.Fecha.startsWith(m.fullDate)) .reduce((acc, p) => { const val = parseFloat((p.UF || '0').replace(',', '.')); return acc + (isNaN(val) ? 0 : val); }, 0); return { mes: m.label, key: m.key, realUni, pptoUni, realUF, pptoUF }; }); // Determinar el último mes con datos reales registrados en 2026 (mes vigente) // Buscamos el mes más alto que tiene registros reales let currentMonthIdx = 0; monthlyData.forEach((m, idx) => { if (m.realUni > 0 || m.realUF > 0) { currentMonthIdx = Math.max(currentMonthIdx, idx); } }); // currentMonthIdx corresponde al mes vigente (0-indexed, ej: 8 para sep 2026) const mesVigenteLabel = MESES[currentMonthIdx].label; // Calcular acumulados YTD let runRealUni = 0, runPptoUni = 0, runRealUF = 0, runPptoUF = 0; const accumulatedData = monthlyData.map(m => { runRealUni += m.realUni; runPptoUni += m.pptoUni; runRealUF += m.realUF; runPptoUF += m.pptoUF; return { mes: m.mes, accRealUni: runRealUni, accPptoUni: runPptoUni, accRealUF: runRealUF, accPptoUF: runPptoUF }; }); // 1. Métricas Totales al Mes Vigente (para Real vs Ppto acumulado a la fecha) const totalRealUni = runRealUni; // Real total ejecutado const totalPptoUniMesVigente = accumulatedData[currentMonthIdx].accPptoUni; const pctCumplimientoUniMesVigente = totalPptoUniMesVigente > 0 ? (totalRealUni / totalPptoUniMesVigente) : 0; const totalRealUF = runRealUF; const totalPptoUFMesVigente = accumulatedData[currentMonthIdx].accPptoUF; const pctCumplimientoUFMesVigente = totalPptoUFMesVigente > 0 ? (totalRealUF / totalPptoUFMesVigente) : 0; // 2. Metas Anuales Totales (los 12 meses presupuestados de 2026) const totalPptoUniAnual = runPptoUni; const pctCumplimientoUniAnual = totalPptoUniAnual > 0 ? (totalRealUni / totalPptoUniAnual) : 0; const totalPptoUFAnual = runPptoUF; const pctCumplimientoUFAnual = totalPptoUFAnual > 0 ? (totalRealUF / totalPptoUFAnual) : 0; // Desglose por Proyecto const projectBreakdown = selectedProyectos.map(proj => { const pReal = filteredReal.filter(r => r.Proyecto === proj); const pRealUni = pReal.filter(r => { if (!r['Fecha Firma Cliente']) return false; const [d, mo, y] = r['Fecha Firma Cliente'].split(' ')[0].split('-'); return y === '2026' && r['Unidades escrituradas'] === '1'; }).length; const pRealUF = pReal.filter(r => { if (!r['Fecha Firma Cliente']) return false; const [d, mo, y] = r['Fecha Firma Cliente'].split(' ')[0].split('-'); const isDep = (r['Tipo Unidad'] || '').toLowerCase() === 'departamento'; return y === '2026' && r['Unidades escrituradas'] === '1' && isDep; }).reduce((acc, r) => acc + (parseFloat((r['UF sin Abono Cliente'] || '0').replace(',', '.')) || 0), 0); // Presupuesto al mes vigente por proyecto const pPptoUniMesVigente = filteredPptoUni.filter(p => { if (p.Proyecto !== proj) return false; const m = parseInt(p.Fecha.split('-')[1], 10); return m <= (currentMonthIdx + 1); }).reduce((acc, p) => acc + (parseInt(p.Unidades, 10) || 0), 0); const pPptoUFMesVigente = filteredPptoUF.filter(p => { if (p.Proyecto !== proj) return false; const m = parseInt(p.Fecha.split('-')[1], 10); return m <= (currentMonthIdx + 1); }).reduce((acc, p) => acc + (parseFloat((p.UF || '0').replace(',', '.')) || 0), 0); // Meta anual por proyecto const pPptoUniAnual = filteredPptoUni.filter(p => p.Proyecto === proj) .reduce((acc, p) => acc + (parseInt(p.Unidades, 10) || 0), 0); const pPptoUFAnual = filteredPptoUF.filter(p => p.Proyecto === proj) .reduce((acc, p) => acc + (parseFloat((p.UF || '0').replace(',', '.')) || 0), 0); return { proyecto: proj, realUni: pRealUni, pptoUni: pPptoUniMesVigente, pptoUniAnual: pPptoUniAnual, realUF: pRealUF, pptoUF: pPptoUFMesVigente, pptoUFAnual: pPptoUFAnual }; }); // Conteo para gráfico de Estados de Firma const estadosPorProyecto = selectedProyectos.map(proj => { const pReal = filteredReal.filter(r => r.Proyecto === proj); const total = pReal.length || 1; const escriturada = pReal.filter(r => r['Estado de Firma'] === 'Escriturada').length; const firmadaCliente = pReal.filter(r => r['Estado de Firma'] === 'Firmada por cliente').length; const preescriturada = pReal.filter(r => r['Estado de Firma'] === 'Pre-escriturada').length; const promesada = pReal.filter(r => r['Estado de Firma'] === 'Promesada').length; const reservada = pReal.filter(r => r['Estado de Firma'] === 'Reservada').length; return { proyecto: proj, total: pReal.length, escriturada, firmadaCliente, preescriturada, promesada, reservada, pctEscriturada: (escriturada / total) * 100, pctFirmadaCliente: (firmadaCliente / total) * 100, pctPreescriturada: (preescriturada / total) * 100, pctPromesada: (promesada / total) * 100, pctReservada: (reservada / total) * 100, }; }); return { monthlyData, accumulatedData, mesVigenteLabel, totalRealUni, totalPptoUni: totalPptoUniMesVigente, // ppto al mes vigente pctCumplimientoUni: pctCumplimientoUniMesVigente, totalPptoUniAnual, pctCumplimientoUniAnual, totalRealUF, totalPptoUF: totalPptoUFMesVigente, // ppto al mes vigente pctCumplimientoUF: pctCumplimientoUFMesVigente, totalPptoUFAnual, pctCumplimientoUFAnual, projectBreakdown, estadosPorProyecto }; }, [data, selectedProyectos]); // Manejador de click en gráfico de Unidades const handleUnidadesClick = (params) => { if (!data || !params) return; const mesLabel = params.name; // Ej: "mar 2026" const seriesName = params.seriesName; // 'Real unidades escrituradas' etc. const monthKey = metrics.monthlyData.find(m => m.mes === mesLabel)?.key; if (!monthKey) return; // Filtrar las ofertas de departamentos que corresponden a ese mes const records = data.real.filter(r => { const matchProj = selectedProyectos.includes(r.Proyecto); const isDep = (r['Tipo Unidad'] || '').toLowerCase() === 'departamento'; if (!matchProj || !isDep || !r['Fecha Firma Cliente']) return false; const [d, mo, y] = r['Fecha Firma Cliente'].split(' ')[0].split('-'); return mo === monthKey && y === '2026' && r['Unidades escrituradas'] === '1'; }); setDrilldownModal({ title: `Detalle de Unidades Escrituradas · ${mesLabel}`, subtitle: `${records.length} unidades encontradas en proyectos seleccionados`, records }); }; // Manejador de click en gráfico de Estados de Firma const handleEstadosClick = (params) => { if (!data || !params || !params.data) return; const proj = params.data.proj; const stage = params.data.stage; const records = data.real.filter(r => { const matchProj = r.Proyecto === proj; const isDep = (r['Tipo Unidad'] || '').toLowerCase() === 'departamento'; return matchProj && isDep && r['Estado de Firma'] === stage; }); setDrilldownModal({ title: `Detalle de Unidades: ${proj} · Estado: ${stage}`, subtitle: `${records.length} unidades encontradas`, records }); }; // Pantalla de Bloqueo y Autenticación Corporativa Exclusiva Google (Estilo BSC) if (!currentUser) { return (
{/* Decoraciones de fondo */}
Fundamenta

Reportería Automática

Control de Gestión

{loginError && (
{loginError}
)} {/* Contenedor oficial Google Sign-In (GSI) estilo BSC */}
); } if (loading) { return (

Cargando reporte de escrituración...

); } // Opciones de Gráficos ECharts const optUnidadesParcial = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['Real unidades escrituradas', 'Ppto unidades escrituradas'], top: 0 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: metrics.monthlyData.slice(0, 9).map(m => m.mes) }, yAxis: { type: 'value' }, series: [ { name: 'Real unidades escrituradas', type: 'bar', data: metrics.monthlyData.slice(0, 9).map(m => m.realUni), itemStyle: { color: '#22c55e', borderRadius: [4, 4, 0, 0] }, label: { show: true, position: 'top', fontSize: 11 } }, { name: 'Ppto unidades escrituradas', type: 'bar', data: metrics.monthlyData.slice(0, 9).map(m => m.pptoUni), itemStyle: { color: '#14532d', borderRadius: [4, 4, 0, 0] }, label: { show: true, position: 'top', fontSize: 11 } } ] }; const optUnidadesAcum = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['Real Unidades Acumuladas', 'Ppto Unidades acumuladas'], top: 0 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: metrics.accumulatedData.slice(0, 9).map(m => m.mes) }, yAxis: { type: 'value' }, series: [ { name: 'Real Unidades Acumuladas', type: 'bar', data: metrics.accumulatedData.slice(0, 9).map(m => m.accRealUni), itemStyle: { color: '#38bdf8', borderRadius: [4, 4, 0, 0] }, label: { show: true, position: 'top', fontSize: 11 } }, { name: 'Ppto Unidades acumuladas', type: 'bar', data: metrics.accumulatedData.slice(0, 9).map(m => m.accPptoUni), itemStyle: { color: '#1e3a8a', borderRadius: [4, 4, 0, 0] }, label: { show: true, position: 'top', fontSize: 11 } } ] }; const optUFParcial = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: (params) => { let tip = params[0].name + '
'; params.forEach(p => { tip += p.marker + ' ' + p.seriesName + ': ' + fmtUF(p.value) + '
'; }); return tip; } }, legend: { data: ['Total UF Escrituradas', 'Total Ppto UF'], top: 0 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: metrics.monthlyData.slice(0, 9).map(m => m.mes) }, yAxis: { type: 'value', axisLabel: { formatter: (v) => (v / 1000000).toFixed(1) + ' mill.' } }, series: [ { name: 'Total UF Escrituradas', type: 'bar', data: metrics.monthlyData.slice(0, 9).map(m => m.realUF), itemStyle: { color: '#22c55e', borderRadius: [4, 4, 0, 0] }, label: { show: true, position: 'top', fontSize: 10, formatter: (p) => (p.value / 1000000).toFixed(2).replace('.', ',') + ' mill.' } }, { name: 'Total Ppto UF', type: 'bar', data: metrics.monthlyData.slice(0, 9).map(m => m.pptoUF), itemStyle: { color: '#14532d', borderRadius: [4, 4, 0, 0] }, label: { show: true, position: 'top', fontSize: 10, formatter: (p) => (p.value / 1000000).toFixed(2).replace('.', ',') + ' mill.' } } ] }; const optUFAcum = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: (params) => { let tip = params[0].name + '
'; params.forEach(p => { tip += p.marker + ' ' + p.seriesName + ': ' + fmtUF(p.value) + '
'; }); return tip; } }, legend: { data: ['Real UF Acumuladas', 'Ppto UF acumuladas'], top: 0 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: metrics.accumulatedData.slice(0, 9).map(m => m.mes) }, yAxis: { type: 'value', axisLabel: { formatter: (v) => (v / 1000000).toFixed(1) + ' mill.' } }, series: [ { name: 'Real UF Acumuladas', type: 'bar', data: metrics.accumulatedData.slice(0, 9).map(m => m.accRealUF), itemStyle: { color: '#22c55e', borderRadius: [4, 4, 0, 0] }, label: { show: true, position: 'top', fontSize: 10, formatter: (p) => (p.value / 1000000).toFixed(1).replace('.', ',') + ' mill.' } }, { name: 'Ppto UF acumuladas', type: 'bar', data: metrics.accumulatedData.slice(0, 9).map(m => m.accPptoUF), itemStyle: { color: '#14532d', borderRadius: [4, 4, 0, 0] }, label: { show: true, position: 'top', fontSize: 10, formatter: (p) => (p.value / 1000000).toFixed(1).replace('.', ',') + ' mill.' } } ] }; const optEstadosFirma = { animation: true, animationDuration: 400, animationEasing: 'cubicOut', animationThreshold: 5000, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: (params) => { let tip = '
' + params[0].name + '
'; params.forEach(p => { const rawUnits = p.data && p.data.raw !== undefined ? Math.round(p.data.raw) : Math.round(p.value); const pct = typeof p.value === 'number' ? p.value.toFixed(1).replace('.', ',') + '%' : ''; tip += '
' + '' + p.marker + ' ' + p.seriesName + '' + '' + rawUnits.toLocaleString('es-CL') + ' un. (' + pct + ')' + '
'; }); return tip; } }, legend: { data: ['Escriturada', 'Firmada por cliente', 'Pre-escriturada', 'Promesada', 'Reservada'], top: 0 }, grid: { left: '15%', right: '4%', top: '35px', bottom: '3%', containLabel: true }, xAxis: { type: 'value', max: 100, axisLabel: { formatter: '{value}%' } }, yAxis: { type: 'category', data: metrics.estadosPorProyecto.map(e => e.proyecto), inverse: true }, series: [ { name: 'Escriturada', type: 'bar', stack: 'total', animationDelay: 0, animationDuration: 350, itemStyle: { color: '#22c55e' }, data: metrics.estadosPorProyecto.map(e => ({ value: e.pctEscriturada, raw: e.escriturada, proj: e.proyecto, stage: 'Escriturada' })), label: { show: true, position: 'inside', formatter: (p) => p.data.raw > 0 ? Math.round(p.data.raw) : '' } }, { name: 'Firmada por cliente', type: 'bar', stack: 'total', animationDelay: 350, animationDuration: 350, itemStyle: { color: '#eab308' }, data: metrics.estadosPorProyecto.map(e => ({ value: e.pctFirmadaCliente, raw: e.firmadaCliente, proj: e.proyecto, stage: 'Firmada por cliente' })), label: { show: true, position: 'inside', formatter: (p) => p.data.raw > 0 ? Math.round(p.data.raw) : '' } }, { name: 'Pre-escriturada', type: 'bar', stack: 'total', animationDelay: 700, animationDuration: 350, itemStyle: { color: '#f97316' }, data: metrics.estadosPorProyecto.map(e => ({ value: e.pctPreescriturada, raw: e.preescriturada, proj: e.proyecto, stage: 'Pre-escriturada' })), label: { show: true, position: 'inside', formatter: (p) => p.data.raw > 0 ? Math.round(p.data.raw) : '' } }, { name: 'Promesada', type: 'bar', stack: 'total', animationDelay: 1050, animationDuration: 350, itemStyle: { color: '#881337' }, data: metrics.estadosPorProyecto.map(e => ({ value: e.pctPromesada, raw: e.promesada, proj: e.proyecto, stage: 'Promesada' })), label: { show: true, position: 'inside', formatter: (p) => p.data.raw > 0 ? Math.round(p.data.raw) : '' } }, { name: 'Reservada', type: 'bar', stack: 'total', animationDelay: 1400, animationDuration: 350, itemStyle: { color: '#0f172a' }, data: metrics.estadosPorProyecto.map(e => ({ value: e.pctReservada, raw: e.reservada, proj: e.proyecto, stage: 'Reservada' })), label: { show: true, position: 'inside', formatter: (p) => p.data.raw > 0 ? Math.round(p.data.raw) : '' } } ] }; return (
{/* Sidebar Lateral */} {/* Sidebar Lateral Izquierda Desplegable */} {/* Contenido Principal */}
{/* Barra Superior */}
{!sidebarOpen && ( )}

{tab === 'unidades' && 'ESCRITURACIÓN REAL / PPTO - Unidades'} {tab === 'uf' && 'ESCRITURACIÓN REAL / PPTO - UF'} {tab === 'estados' && 'Recuento de Estado de Firma por Proyecto'} {tab === 'admin' && 'Panel de Administración de Presupuestos'} {tab === 'email' && 'Automatización de Reportes por Gmail'}

Datos consolidados año 2026 · Actualización independiente

{/* Indicador de Última Verificación de Datos CRM en Taskbar */}
Último chequeo: {data && data.timestamp ? (() => { const d = new Date(data.timestamp); return d.toLocaleTimeString('es-CL', { hour: '2-digit', minute: '2-digit' }) + ' hrs'; })() : '--:--'}
{/* Botón en Taskbar para ir directamente a Gestionar Reportes / Programar Envío */} {/* Perfil del Usuario Autenticado y Salir */}
{currentUser.name || currentUser.email.split('@')[0]} {currentUser.role === 'admin' ? 'Administrador' : 'Visualizador'}
{/* Cuerpo con Scroll y Slicer */}
{/* Área de Visualizaciones */}
{tab === 'unidades' && (
{/* FILA 1: Gráfico Principal a Ancho Completo con Selector Acumulado / Parcial */}

{viewModeUni === 'parcial' ? 'Comparativo Escrituras Parciales (Mes a Mes) · Unidades' : 'Comparativo Escrituras Acumuladas (YTD) · Unidades'}

{viewModeUni === 'parcial' ? 'Evolución mensual comparando Unidades Reales vs Presupuesto' : 'Progresión acumulada anual comparando ritmo de escrituración'}

{/* Botón Selector Toggle: Parcial vs Acumulado */}
{/* Renderizado de gráfico dinámico a todo el ancho */}
{/* FILA 2: Tarjetas KPI + Tablas Debajo en Segunda Fila */}
{/* Tarjeta 1: % Cumplimiento Real vs Ppto al Mes Vigente */}
% Cumplimiento a la Fecha {metrics.mesVigenteLabel}
{fmtPct(metrics.pctCumplimientoUni)}

Real vs Presupuesto acumulado al mes vigente

Total Real {fmtNum(metrics.totalRealUni)} unidades
Ppto a la Fecha {fmtNum(metrics.totalPptoUni)} unidades
{/* Tarjeta 2: Real vs Meta Anual 2026 (Exclusiva) */}
Avance Meta Anual 2026 Meta Total
{fmtPct(metrics.pctCumplimientoUniAnual)}

Total escriturado vs presupuesto anual completo

Real Ejecutado {fmtNum(metrics.totalRealUni)} unidades
Meta Anual 2026 {fmtNum(metrics.totalPptoUniAnual)} unidades
{/* Tabla Desglose por Proyecto (Ocupa 6 columnas para equilibrio perfecto) */}

Desglose Comparativo por Proyecto

Total unidades escrituradas vs presupuesto acumulado a {metrics.mesVigenteLabel}

{metrics.projectBreakdown.length} proyectos
{metrics.projectBreakdown.map((row, idx) => { const pct = row.pptoUni > 0 ? (row.realUni / row.pptoUni) * 100 : 0; return ( ); })}
Proyecto Real Unidades Ppto Unidades % Cumplimiento
{row.proyecto} {fmtNum(row.realUni)} {fmtNum(row.pptoUni)} = 100 ? 'text-emerald-700' : pct >= 70 ? 'text-amber-600' : 'text-gray-600'}`}> {pct.toFixed(1).replace('.', ',')}%
Total {fmtNum(metrics.totalRealUni)} {fmtNum(metrics.totalPptoUni)} {fmtPct(metrics.pctCumplimientoUni)}
)} {tab === 'uf' && (
{/* FILA 1: Gráfico Principal a Ancho Completo con Selector Acumulado / Parcial */}

{viewModeUF === 'parcial' ? 'Comparativo Escrituras Parciales (Mes a Mes) · Montos UF' : 'Comparativo Escrituras Acumuladas (YTD) · Montos UF'}

{viewModeUF === 'parcial' ? 'Montos totales escriturados en UF vs Presupuesto mensual' : 'Progresión acumulada anual en UF vs meta anual'}

{/* Botón Selector Toggle: Parcial vs Acumulado */}
{/* Renderizado de gráfico dinámico a todo el ancho */}
{/* FILA 2: Tarjetas KPI + Tablas Debajo en Segunda Fila */}
{/* Tarjeta 1: % Cumplimiento Real vs Ppto UF al Mes Vigente */}
% Cumplimiento a la Fecha {metrics.mesVigenteLabel}
{fmtPct(metrics.pctCumplimientoUF)}

Real vs Presupuesto acumulado al mes vigente

Total Real {fmtUF(metrics.totalRealUF)}
Ppto a la Fecha {fmtUF(metrics.totalPptoUF)}
{/* Tarjeta 2: Real vs Meta Anual UF 2026 (Exclusiva) */}
Avance Meta Anual 2026 Meta Total
{fmtPct(metrics.pctCumplimientoUFAnual)}

Total escriturado vs presupuesto anual completo

Real Ejecutado {fmtUF(metrics.totalRealUF)}
Meta Anual 2026 {fmtUF(metrics.totalPptoUFAnual)}
{/* Tabla Desglose UF (Ocupa 6 columnas) */}

Desglose Comparativo en UF por Proyecto

Total UF escrituradas vs presupuesto acumulado a {metrics.mesVigenteLabel}

{metrics.projectBreakdown.length} proyectos
{metrics.projectBreakdown.map((row, idx) => { const pct = row.pptoUF > 0 ? (row.realUF / row.pptoUF) * 100 : 0; return ( ); })}
Proyecto Total UF Esc. Total Ppto UF % Cumplimiento
{row.proyecto} {fmtNum(row.realUF)} {fmtNum(row.pptoUF)} = 100 ? 'text-emerald-700' : pct >= 70 ? 'text-amber-600' : 'text-gray-600'}`}> {pct.toFixed(1).replace('.', ',')}%
Total {fmtNum(metrics.totalRealUF)} {fmtNum(metrics.totalPptoUF)} {fmtPct(metrics.pctCumplimientoUF)}
)} {tab === 'estados' && (

Recuento de Estado de Firma por Proyecto (100% Apilado)

Distribución de ofertas según etapa alcanzada

{/* Sección Explicativa de Criterios de Estado según CRM */}

¿Qué determina cada estado de firma en el CRM?

La clasificación se asigna de forma jerárquica de acuerdo a la fecha más avanzada registrada en el CRM:

{/* 1. Escriturada */}
1. Escriturada

Tiene Fecha de Firma Inmobiliaria en el CRM. Ambas partes firmaron ante notario y la escritura cerró formalmente su ciclo.

{/* 2. Firmada por cliente */}
2. Firmada cliente

Tiene Fecha de Firma Cliente en el CRM. El cliente ya firmó en notaría y se encuentra en espera del cierre de la inmobiliaria.

{/* 3. Pre-escriturada */}
3. Pre-escriturada

Tiene Fecha de Pre-Escritura en el CRM. Se emitió y visó la matriz legal con el banco o notaría, previa a la citación del cliente.

{/* 4. Promesada */}
4. Promesada

Tiene Fecha de Promesa / Cesión en el CRM. Contrato de promesa vigente firmado formalmente entre las partes.

{/* 5. Reservada */}
5. Reservada

Tiene Fecha de Reserva en el CRM. Oferta inicial con pago de reserva y en proceso de evaluación de crédito hipotecario.

)} {/* ========================================================================= */} {/* PANEL DE GESTIÓN DE PRESUPUESTOS (SOLO ADMINISTRADOR) */} {/* ========================================================================= */} {tab === 'admin' && (
{/* PÁGINA 1: CATÁLOGO / SELECCIÓN DE REPORTE PARA GESTIÓN DE PRESUPUESTOS */} {!adminReportSelected ? (
Panel de Administración · Centro de Control Multi-Reporte

Gestión de Presupuestos y Metas

Selecciona el módulo o reporte sobre el cual deseas administrar, desglosar o cargar presupuestos en UF y Unidades.

{/* TARJETA 1: ESCRITURACIÓN (ACTIVA) */}
setAdminReportSelected('escrituracion')} className="bg-white p-6 rounded-2xl border-2 border-emerald-500/40 hover:border-emerald-600 card-shadow hover:shadow-lg transition-all duration-200 cursor-pointer flex flex-col justify-between group relative overflow-hidden" >
Disponible

Escrituración

Control y metas de departamentos escriturados. Administra presupuestos de Unidades y UF mes a mes por proyecto y fecha.

{data ? data.unidadesPpto.length + data.ufPpto.length : 0} metas registradas
Gestionar Presupuestos
{/* TARJETA 2: VENTAS Y PROMESAS (PRÓXIMAMENTE) */}

Ventas y Promesas

Próximamente

Presupuestos de colocación comercial, promesas netas y flujo de reservas por sala de ventas.

Módulo en preparación
{/* TARJETA 3: CONTROL DE COSTOS Y FLUJO (PRÓXIMAMENTE) */}

Flujo y Cobranza

Próximamente

Presupuesto financiero de recuperación de abonos, subsidios y liquidación bancaria de alzamientos.

Módulo en preparación
{/* SECCIÓN EXCLUSIVA: GESTIÓN DE USUARIOS ADMINISTRADORES */}

Control de Usuarios Administradores

Gestión de cuentas autorizadas con privilegios totales de edición y configuración

{adminUsersList.length} Administradores Registrados en Servidor
{/* Añadir nuevo administrador conectado al backend */}
setNewAdminInput(e.target.value)} placeholder="Añadir nuevo administrador (ej: nombre.apellido@fundamenta.cl)..." className="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-xl text-xs bg-gray-50/50 focus:bg-white focus:ring-1 focus:ring-emerald-500" />
{/* Lista de administradores consultada desde el servidor */}
{adminUsersList.map((adm) => { const isSelf = currentUser && currentUser.email.toLowerCase() === adm.email.toLowerCase(); return (
{adm.email} {isSelf ? 'Tu usuario actual' : (adm.role === 'admin' ? 'Administrador Oficial' : 'Visualizador')}
{!isSelf && ( )}
); })}
) : (
{/* Botón Volver al Catálogo de Reportes */}
Módulo actual: Escrituración
{/* Cabecera del Panel Admin */}
Rol Administrador Activo · Edición de metas en tiempo real

Presupuestos: Escrituración (UF y Unidades)

Desglose mes a mes por proyecto y fecha. Los cambios modifican automáticamente los acumulados e indicadores en toda la reportería.

{/* Botón Restablecer Presupuestos Originales */} {/* Botón Descargar Formato Excel con Base Actual */} {/* Botón Cargar / Importar Excel */} { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (evt) => { try { const bstr = evt.target.result; const wb = XLSX.read(bstr, { type: 'binary' }); let newUnidades = [...data.unidadesPpto]; let newUF = [...data.ufPpto]; let importedUniCount = 0; let importedUFCount = 0; // Procesar Hoja Unidades const uniSheetName = wb.SheetNames.find(n => n.toLowerCase().includes('unidad')); if (uniSheetName) { const rows = XLSX.utils.sheet_to_json(wb.Sheets[uniSheetName]); rows.forEach(r => { if (r.Proyecto && r.Fecha) { const dateVal = String(r.Fecha).trim(); const formattedDate = dateVal.includes(' ') ? dateVal : dateVal + ' 0:00:00'; const idx = newUnidades.findIndex(x => x.Proyecto === r.Proyecto && x.Fecha.startsWith(dateVal.substring(0, 10))); const item = { Proyecto: String(r.Proyecto).trim(), Fecha: formattedDate, Unidades: String(r.Unidades || '0') }; if (idx >= 0) newUnidades[idx] = item; else newUnidades.push(item); importedUniCount++; } }); } // Procesar Hoja UF const ufSheetName = wb.SheetNames.find(n => n.toLowerCase().includes('uf')); if (ufSheetName) { const rows = XLSX.utils.sheet_to_json(wb.Sheets[ufSheetName]); rows.forEach(r => { if (r.Proyecto && r.Fecha) { const dateVal = String(r.Fecha).trim(); const formattedDate = dateVal.includes(' ') ? dateVal : dateVal + ' 0:00:00'; const idx = newUF.findIndex(x => x.Proyecto === r.Proyecto && x.Fecha.startsWith(dateVal.substring(0, 10))); const item = { Proyecto: String(r.Proyecto).trim(), Fecha: formattedDate, UF: String(r.UF || '0').replace('.', ',') }; if (idx >= 0) newUF[idx] = item; else newUF.push(item); importedUFCount++; } }); } updateBudgets(newUnidades, newUF); alert('✓ Planilla importada con éxito:\n- ' + importedUniCount + ' registros de Unidades procesados.\n- ' + importedUFCount + ' registros de UF procesados.\n\nLos acumulados y gráficos se actualizaron automáticamente.'); } catch (err) { alert('Error al leer el archivo Excel: ' + err.message); } }; reader.readAsBinaryString(file); }} /> {/* Botón Añadir Presupuesto Manual */}
{/* Filtros de Búsqueda y Navegación en la Tabla de Presupuestos */}
setAdminPptoSearch(e.target.value)} className="w-full pl-8 pr-3 py-1.5 border border-gray-300 rounded-lg focus:ring-emerald-500 focus:border-emerald-500" />
Métrica:
Año:
{/* Tabla de Presupuestos Desglosados */}

Registros Presupuestarios Detallados

Puedes editar cualquier valor haciendo clic en el lápiz o eliminarlo

{(() => { const totalUni = data ? data.unidadesPpto.length : 0; const totalUF = data ? data.ufPpto.length : 0; return (totalUni + totalUF) + ' registros totales'; })()}
{(() => { if (!data) return null; let rows = []; if (adminPptoMetric === 'all' || adminPptoMetric === 'Unidades') { data.unidadesPpto.forEach((u, i) => { rows.push({ type: 'Unidades', originalIndex: i, proyecto: u.Proyecto, fecha: u.Fecha, valorRaw: u.Unidades, valorFormatted: (parseInt(u.Unidades, 10) || 0) + ' un.' }); }); } if (adminPptoMetric === 'all' || adminPptoMetric === 'UF') { data.ufPpto.forEach((u, i) => { rows.push({ type: 'UF', originalIndex: i, proyecto: u.Proyecto, fecha: u.Fecha, valorRaw: u.UF, valorFormatted: (parseFloat((u.UF || '0').replace(',', '.')) || 0).toLocaleString('es-CL', { maximumFractionDigits: 1 }) + ' UF' }); }); } if (adminPptoSearch.trim()) { rows = rows.filter(r => r.proyecto.toLowerCase().includes(adminPptoSearch.toLowerCase())); } rows = rows.filter(r => r.fecha.includes(adminPptoYear)); if (rows.length === 0) { return ( ); } return rows.slice(0, 150).map((r, idx) => ( )); })()}
Proyecto Métrica Fecha Asignada Monto / Valor Presupuestado Acciones
No se encontraron presupuestos que coincidan con el filtro.
{r.proyecto} {r.type} {r.fecha.split(' ')[0]} {r.valorFormatted}
{/* Modal para Crear / Editar Presupuesto Específico */} {editingPptoItem && (

{editingPptoItem.isNew ? 'Añadir Nuevo Presupuesto' : 'Editar Presupuesto'}

{editingPptoItem.isNew ? ( ) : ( {editingPptoItem.type} )}
setEditingPptoItem({ ...editingPptoItem, year: e.target.value })} className="w-full border border-gray-300 rounded-lg p-2" />
setEditingPptoItem({ ...editingPptoItem, valor: e.target.value })} className="w-full border border-gray-300 rounded-lg p-2 text-sm font-bold text-emerald-800" />
)}
)}
)} {/* ========================================================================= */} {/* PANEL DE AUTOMATIZACIÓN DE REPORTES Y CONSTRUCTOR DE CORREOS INTERACTIVO */} {/* ========================================================================= */} {tab === 'email' && (
{/* 1. Tarjeta Estado de Conexión Gmail con Autenticación de Aplicación */}

Cuenta de Gmail Remitente Vinculada

{gmailConnected ? ( Lista para Enviar ) : ( Pendiente de Vinculación )}

{gmailConnected ? 'Enviando reportes oficiales como: ' + gmailSenderName + ' <' + gmailAccount + '> (Autenticado vía Gmail)' : 'Vincula una cuenta corporativa de Gmail con su Contraseña de Aplicación para habilitar el despacho de reportes.'}

{gmailConnected ? ( <> ) : ( )}
{/* 2. Cabecera de Reglas Programadas */}

Programaciones y Plantillas de Envío

Configura la frecuencia, destinatarios y personaliza el contenido interactivo del correo.

{/* 3. Listado de Reportes Programados */}
{schedules.map((sc) => (

{sc.name}

{sc.isActive ? 'Activo' : 'Pausado'}

Frecuencia: {sc.frequency || 'Semanal'} · {sc.days.map(d => ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'][parseInt(d)-1]).join(', ')} a las {sc.time} hrs

{/* Destinatarios */}
Para: {sc.recipients}
{sc.cc &&
CC: {sc.cc}
}
Asunto: {sc.subject || 'Reporte de Escrituración'}
{/* Elementos Incluidos en el Correo (Pantallazos y Tablas) */}
Contenido del Correo ({sc.elements.length} elementos gráficos):
{sc.elements.includes('kpis') && Tarjetas KPI} {sc.elements.includes('uni_parcial') && Gráfico Unidades} {sc.elements.includes('uf_parcial') && Gráfico UF} {sc.elements.includes('uni_tabla') && Tabla Proyectos} {sc.elements.includes('estados') && Estados de Firma} {sc.customTextBlocks && sc.customTextBlocks.length > 0 && ( +{sc.customTextBlocks.length} texto personalizado )}
{/* Footer de Tarjeta con botón de Vista Previa y Envío Inmediato */}
))}
{/* 4. MODAL / EDITOR INTERACTIVO DE CORREO Y PROGRAMACIÓN */} {editingSchedule && (
{/* Cabecera Sticky con Selector de Modo (Editor / Vista Previa en Vivo) */}

Configurar y Personalizar Reporte de Correo

Diseña el mensaje con bloques interactivos y visualiza el reporte real en vivo

{/* Selector de Pestañas: Edición vs Vista Previa */}
{/* Cuerpo Central con Scroll */}
{/* ========================================================================= */} {/* VISTA 1: EDITOR DE CORREO */} {/* ========================================================================= */} {(editingSchedule._activeTab || 'edit') === 'edit' && (
{/* 1. SELECCIÓN DEL REPORTE AUTOMÁTICO A ENVIAR */}
Reporte Activo
{/* Opción 1: Escrituración */} {/* Opción 2: Ventas y Promesas (Próximamente) */} {/* Opción 3: Cobranza y Alzamientos (Próximamente) */}
{/* 2. DESTINATARIOS Y FRECUENCIA */}
Nombre del Reporte: setEditingSchedule({ ...editingSchedule, name: e.target.value })} className="w-full border border-gray-300 rounded-lg p-2 font-semibold bg-gray-50/50" />
Asunto de Correo (Gmail): setEditingSchedule({ ...editingSchedule, subject: e.target.value })} placeholder="ej: Reporte de Avance de Escrituración - Fundamenta" className="w-full border border-gray-300 rounded-lg p-2 bg-gray-50/50" />
Frecuencia:
Hora de Envío (Chile): setEditingSchedule({ ...editingSchedule, time: e.target.value })} className="w-full border border-gray-300 rounded-lg p-2 bg-white" />
Días de la semana:
{[ { id: '1', l: 'L' }, { id: '2', l: 'M' }, { id: '3', l: 'X' }, { id: '4', l: 'J' }, { id: '5', l: 'V' } ].map(d => ( ))}
Para (destinatarios separados por coma): setEditingSchedule({ ...editingSchedule, recipients: e.target.value })} placeholder="ej: gerencia@fundamenta.cl, finanzas@fundamenta.cl" className="w-full border border-gray-300 rounded-lg p-2" />
CC (con copia): setEditingSchedule({ ...editingSchedule, cc: e.target.value })} placeholder="ej: mi_correo@fundamenta.cl" className="w-full border border-gray-300 rounded-lg p-2" />
{/* 3. ELEMENTOS DISPONIBLES DEL REPORTE (CATÁLOGO ARRASTRABLE O CLICKEABLE) */}
Arrastra hacia el lienzo o haz clic para agregar/quitar
{[ { id: 'kpis', icon: 'bi-speedometer2', label: 'Tarjetas KPI Cumplimiento', aspect: '3:1 (Horizontal)', aspectClass: 'aspect-[3/1]' }, { id: 'uni_parcial', icon: 'bi-bar-chart-fill', label: 'Gráfico: Unidades Mensuales', aspect: '16:9 (Gráfico)', aspectClass: 'aspect-[16/9]' }, { id: 'uni_acum', icon: 'bi-graph-up', label: 'Gráfico: Unidades YTD', aspect: '16:9 (Gráfico)', aspectClass: 'aspect-[16/9]' }, { id: 'uf_parcial', icon: 'bi-currency-dollar', label: 'Gráfico: UF Mensuales', aspect: '16:9 (Gráfico)', aspectClass: 'aspect-[16/9]' }, { id: 'uf_acum', icon: 'bi-cash-stack', label: 'Gráfico: UF YTD', aspect: '16:9 (Gráfico)', aspectClass: 'aspect-[16/9]' }, { id: 'estados', icon: 'bi-bar-chart-steps', label: 'Gráfico: Estados de Firma', aspect: '16:9 (Barras)', aspectClass: 'aspect-[16/9]' }, { id: 'uni_tabla', icon: 'bi-table', label: 'Tabla: Desglose Unidades', aspect: '4:3 (Tabla)', aspectClass: 'aspect-[4/3]' }, { id: 'uf_tabla', icon: 'bi-grid-3x3', label: 'Tabla: Desglose UF', aspect: '4:3 (Tabla)', aspectClass: 'aspect-[4/3]' } ].map(elem => { const isSelected = (editingSchedule.elements || []).includes(elem.id); return (
{ e.dataTransfer.setData('text/plain', elem.id); }} onClick={() => { const curElems = editingSchedule.elements || []; const updated = isSelected ? curElems.filter(x => x !== elem.id) : [...curElems, elem.id]; setEditingSchedule({ ...editingSchedule, elements: updated }); }} className={'p-2.5 rounded-xl border transition cursor-grab active:cursor-grabbing select-none flex flex-col justify-between ' + (isSelected ? 'border-emerald-600 bg-emerald-50/70 text-emerald-950 font-semibold shadow-sm' : 'border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700')} title="Haz clic para agregar o arrastra a la caja inferior" >
{isSelected ? '✓' : ''}
{elem.label} Dim: {elem.aspect}
); })}
{/* 4. CUERPO DEL CORREO: TEXTO EDITABLE Y PLACEHOLDERS CON DIMENSIÓN REAL */}
Formato Gmail Activo
{/* Barra de Herramientas de Formato Gmail */}
{/* Botones de Variables Automáticas de Fecha */}
Insertar:
{/* Zona de Redacción Principal */}
Texto introductorio del correo:
{/* Zona de Dropzone y Placeholders con Aspect Ratio Proporcional */}
{ e.preventDefault(); e.currentTarget.classList.add('border-emerald-500', 'bg-emerald-50/40'); }} onDragLeave={(e) => { e.preventDefault(); e.currentTarget.classList.remove('border-emerald-500', 'bg-emerald-50/40'); }} onDrop={(e) => { e.preventDefault(); e.currentTarget.classList.remove('border-emerald-500', 'bg-emerald-50/40'); const elemId = e.dataTransfer.getData('text/plain'); if (elemId) { const curElems = editingSchedule.elements || []; if (!curElems.includes(elemId)) { setEditingSchedule({ ...editingSchedule, elements: [...curElems, elemId] }); } } }} className="p-4 border-2 border-dashed border-gray-300 rounded-2xl bg-gray-50/60 transition space-y-4 min-h-[140px]" >
Lienzo de Elementos Insertados ({(editingSchedule.elements || []).length})
Suelta aquí elementos del reporte para agregarlos
{(editingSchedule.elements || []).length === 0 ? (

No has agregado elementos del reporte al correo aún.

Arrastra cualquier tarjeta desde el catálogo superior o haz clic en ella.

) : (
{(editingSchedule.elements || []).map((elemId, index) => { const catalogMap = { kpis: { icon: 'bi-speedometer2', label: 'Tarjetas KPI Cumplimiento', desc: 'Resumen en vivo de Cumplimiento Unidades y UF vs Metas', aspect: '3:1 (Horizontal)', aspectClass: 'aspect-[3/1]' }, uni_parcial: { icon: 'bi-bar-chart-fill', label: 'Gráfico: Unidades Mensuales', desc: 'Barras comparativas Real vs Presupuesto mes a mes', aspect: '16:9 (Panorámica)', aspectClass: 'aspect-[16/9]' }, uni_acum: { icon: 'bi-graph-up', label: 'Gráfico: Unidades YTD', desc: 'Evolución de departamentos escriturados acumulados', aspect: '16:9 (Panorámica)', aspectClass: 'aspect-[16/9]' }, uf_parcial: { icon: 'bi-currency-dollar', label: 'Gráfico: UF Mensuales', desc: 'Monto mensual recaudado vs presupuesto financiero', aspect: '16:9 (Panorámica)', aspectClass: 'aspect-[16/9]' }, uf_acum: { icon: 'bi-cash-stack', label: 'Gráfico: UF YTD', desc: 'Facturación y cobranza en UF acumulada a la fecha', aspect: '16:9 (Panorámica)', aspectClass: 'aspect-[16/9]' }, estados: { icon: 'bi-bar-chart-steps', label: 'Gráfico: Estados de Firma por Proyecto', desc: 'Desglose porcentual 100% apilado por etapa de tramitación', aspect: '16:9 (Panorámica)', aspectClass: 'aspect-[16/9]' }, uni_tabla: { icon: 'bi-table', label: 'Tabla: Desglose Unidades por Proyecto', desc: 'Tabla detallada con Real, Presupuesto y % Cumplimiento', aspect: '4:3 (Tabla Estructurada)', aspectClass: 'aspect-[4/3]' }, uf_tabla: { icon: 'bi-grid-3x3', label: 'Tabla: Desglose UF por Proyecto', desc: 'Tabla detallada de montos UF por cada proyecto activo', aspect: '4:3 (Tabla Estructurada)', aspectClass: 'aspect-[4/3]' } }; const info = catalogMap[elemId] || { icon: 'bi-card-image', label: elemId, desc: 'Elemento del reporte', aspect: '16:9', aspectClass: 'aspect-[16/9]' }; return (
{/* Cabecera del Placeholder */}
{index + 1} {info.label}
Dimensión: {info.aspect} {/* Mover hacia arriba */} {index > 0 && ( )} {/* Mover hacia abajo */} {index < editingSchedule.elements.length - 1 && ( )} {/* Eliminar elemento */}
{/* Área Placeholder que respeta la razón de aspecto real del elemento */}
{info.label}

{info.desc}

Se renderizará con los datos reales vigentes en la pestaña Vista Previa
); })}
)}
{/* Texto de Cierre o Despedida */}
Texto de cierre y firma del correo:
Tip: Puedes alternar en cualquier instante a la pestaña Vista Previa del Correo para ver las tablas y gráficos renderizados en tiempo real.
)} {/* ========================================================================= */} {/* VISTA 2: VISTA PREVIA EN VIVO RENDERIZADA EN TIEMPO REAL CON DATOS REALES */} {/* ========================================================================= */} {editingSchedule._activeTab === 'preview' && (
{/* Simulación Ventana Gmail */}
{/* Barra de correo Gmail */}
De: {gmailSenderName} <{gmailAccount}>
Vista Previa Renderizada
Para: {editingSchedule.recipients || 'destinatarios@fundamenta.cl'}
{editingSchedule.cc &&
CC: {editingSchedule.cc}
}
Asunto: {replaceDateVariables(editingSchedule.subject || 'Reporte de Avance - Fundamenta')}
{/* Contenido HTML Efectivo del Correo */}
{/* Header con Logo Fundamenta */}
Fundamenta
Fundamenta Reportería Automática · {editingSchedule.reportId === 'escrituracion' ? 'Escrituración' : 'Comercial'}
{new Date().toLocaleDateString('es-CL', { day: '2-digit', month: '2-digit', year: 'numeric' })}
{/* Texto redactado por el usuario (Introducción) */}
{replaceDateVariables(editingSchedule.emailIntro || 'Estimado equipo, adjuntamos el reporte consolidado correspondiente al período (DÍA) (MES) (AÑO).')}
{/* Elementos seleccionados incrustados en el correo en el orden configurado */}
{(editingSchedule.elements || []).map((elemId) => { if (elemId === 'kpis' && metrics) { return (
Cumplimiento de Metas Consolidadas YTD 2026
Cumplimiento Unidades YTD {Math.round(metrics.pctCumplimientoUniMesVigente * 100)}% {metrics.totalRealUni} de {metrics.totalPptoUniMesVigente} un.
Cumplimiento UF YTD {Math.round(metrics.pctCumplimientoUFMesVigente * 100)}% {Math.round(metrics.totalRealUF).toLocaleString('es-CL')} UF
); } if (elemId === 'uni_parcial' && metrics) { return (
Gráfico: Escrituras Parciales (Mes a Mes) · Unidades Render en Vivo
); } if (elemId === 'uni_acum' && metrics) { return (
Gráfico: Escrituras Acumuladas YTD · Unidades Render en Vivo
); } if (elemId === 'uf_parcial' && metrics) { return (
Gráfico: Escrituras Parciales (Mes a Mes) · Monto UF Render en Vivo
); } if (elemId === 'uf_acum' && metrics) { return (
Gráfico: Escrituras Acumuladas YTD · Monto UF Render en Vivo
); } if (elemId === 'estados' && metrics) { return (
Gráfico: Estados de Firma por Proyecto (100% Apilado) Render en Vivo
); } if (elemId === 'uni_tabla' && metrics) { return (
Tabla de Cumplimiento por Proyecto · Unidades (Mes Vigente: {metrics.mesVigenteLabel}) YTD 2026
{metrics.projectBreakdown.slice(0, 8).map(p => { const pct = p.pptoUni > 0 ? Math.round((p.realUni / p.pptoUni) * 100) : 0; return ( ); })}
Proyecto Real Unidades Ppto Mes % Cumpl.
{p.proyecto} {p.realUni} {p.pptoUni} = 90 ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800')}> {pct}%
); } if (elemId === 'uf_tabla' && metrics) { return (
Tabla de Cumplimiento por Proyecto · Montos UF (Mes Vigente: {metrics.mesVigenteLabel}) YTD 2026
{metrics.projectBreakdown.slice(0, 8).map(p => { const pct = p.pptoUF > 0 ? Math.round((p.realUF / p.pptoUF) * 100) : 0; return ( ); })}
Proyecto Real UF Ppto UF % Cumpl.
{p.proyecto} {Math.round(p.realUF).toLocaleString('es-CL')} {Math.round(p.pptoUF).toLocaleString('es-CL')} = 90 ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800')}> {pct}%
); } return null; })}
{/* Despedida */}
{replaceDateVariables(editingSchedule.emailOutro || 'Saludos cordiales,\nControl de Gestión Fundamenta')}
{/* Botón de llamada a la acción */}
Puedes interactuar con los datos y filtros en línea: Abrir Tablero Fundamenta
)}
{/* Barra Inferior Sticky con botones Cancelar, Enviar Prueba y Guardar */}
)} {/* 5. MODAL DE VISTA PREVIA DEL CORREO */} {previewEmailModal && (

Vista Previa del Correo Interactivo

Así visualizará el destinatario el reporte en su cliente de Gmail

{/* Simulación del Correo en Gmail */}
{/* Cabecera del correo */}
De: {gmailSenderName} <{gmailAccount}>
Para: {previewEmailModal.recipients}
{previewEmailModal.cc &&
CC: {previewEmailModal.cc}
}
Asunto: {replaceDateVariables(previewEmailModal.subject || 'Reporte de Escrituración')}
{/* Cuerpo del correo con branding Fundamenta */}
Fundamenta
Fundamenta Reportería Automática de Escrituración
{new Date().toLocaleDateString('es-CL')}
{/* Introducción */}

{replaceDateVariables(previewEmailModal.emailIntro || 'Estimado equipo, adjuntamos el reporte consolidado correspondiente al período (DÍA) (MES) (AÑO).')}

{/* Bloques de Texto Personalizado */} {(previewEmailModal.customTextBlocks || []).map(b => (
{b.title}

{b.text}

))} {/* Elementos Gráficos Simulados */}
Visualizaciones y Datos Consolidados: {previewEmailModal.elements.includes('kpis') && metrics && (
Cumplimiento Unidades YTD {Math.round(metrics.pctCumplimientoUniMesVigente * 100)}% {metrics.totalRealUni} / {metrics.totalPptoUniMesVigente} un.
Cumplimiento UF YTD {Math.round(metrics.pctCumplimientoUFMesVigente * 100)}% {Math.round(metrics.totalRealUF).toLocaleString('es-CL')} UF
)} {previewEmailModal.elements.includes('uni_parcial') && (
[Pantallazo HD: Comparativo Escrituras Parciales - Unidades] Capturado automáticamente al momento de emitir el correo
)} {previewEmailModal.elements.includes('uf_parcial') && (
[Pantallazo HD: Comparativo Escrituras Parciales - UF] Capturado automáticamente al momento de emitir el correo
)} {previewEmailModal.elements.includes('uni_tabla') && metrics && (
{metrics.projectBreakdown.slice(0, 5).map(p => ( ))}
Proyecto Real Unidades Ppto Unidades
{p.proyecto} {p.realUni} {p.pptoUni}
)} {previewEmailModal.elements.includes('estados') && (
[Pantallazo HD: Estado de Firmas por Proyecto (100% Apilado)]
)}
{/* Despedida */}

{replaceDateVariables(previewEmailModal.emailOutro || 'Saludos cordiales,\nControl de Gestión Fundamenta')}

{/* Footer de enlace web */}
Accede a la plataforma web para interactuar con los filtros y gráficos: Abrir Tablero Interactivo
)} {/* MODAL PARA VINCULACIÓN Y TEST DE CONEXIÓN GMAIL */} {gmailModalOpen && (

Vincular Cuenta de Gmail

Configuración segura con Contraseña de Aplicación

¿Cómo obtener tu Contraseña de Aplicación de 16 letras?
  1. Ingresa a tu cuenta en myaccount.google.com/apppasswords
  2. Escribe el nombre Reportería Fundamenta y presiona Crear.
  3. Copia el código generado de 16 letras y pégalo abajo.
setGmailModalSenderName(e.target.value)} placeholder="ej: Tomás Carvallo" className="w-full border border-gray-300 rounded-lg p-2.5 bg-gray-50/50 font-medium text-gray-800" /> Este nombre aparecerá como remitente en la bandeja de entrada del destinatario.
setGmailModalUser(e.target.value)} placeholder="ej: tcarvallo@fundamenta.cl" className="w-full border border-gray-300 rounded-lg p-2.5 bg-gray-50/50" />
setGmailModalPass(e.target.value)} placeholder="abcd efgh ijkl mnop" className="w-full border border-gray-300 rounded-lg p-2.5 font-mono text-sm tracking-widest bg-gray-50/50" />
)}
)}
{/* Modal de Detalle / Drilldown al hacer clic en barras */} {drilldownModal && (

{drilldownModal.title}

{drilldownModal.subtitle}

{drilldownModal.records.map((r, idx) => ( ))}
Proyecto Unidad Cliente RUT Firma Cliente Banco UF sin Abono Cliente
{r.Proyecto} {r.Unidad} {r.Nombre} {r.Apellido} {r['RUT Cliente']} {r['Fecha Firma Cliente'] || '-'} {r.Banco || '-'} {r['UF sin Abono Cliente'] ? parseFloat(r['UF sin Abono Cliente'].replace(',', '.')).toLocaleString('es-CL', { minimumFractionDigits: 1, maximumFractionDigits: 2 }) + ' UF' : '-'}
Total registros: {drilldownModal.records.length}
)} {/* Modal / Menú Sobrepuesto para Filtros de Proyectos */} {filterModalOpen && (

Filtrar por Proyecto

{selectedProyectos.length} de {allProyectos.length} seleccionados
{allProyectos.map(p => ( ))}
)}
); } ReactDOM.render(, document.getElementById('root'));