// ── Informe de Gestión Comercial ── Admin only ── const { useState, useEffect, useContext } = React; const fmtUSD = v => "$" + Number(v||0).toLocaleString("en-US",{minimumFractionDigits:0,maximumFractionDigits:0}); const fmtPct = v => Number(v||0).toFixed(1)+"%"; const esc = s => String(s||"").replace(/&/g,"&").replace(//g,">").replace(/"/g,"""); const fmtHistDate = iso => { try { return new Date(iso).toLocaleDateString("es-PA",{day:"2-digit",month:"short",year:"numeric",hour:"2-digit",minute:"2-digit"}); } catch { return iso; } }; const LOGO = "data:image/png;base64,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"; const DRAFT_KEY = "inside_informe_draft_v2"; const HISTORY_KEY = "inside_informe_history_v2"; function computeFirestore(quotes) { const byStatus = k => quotes.filter(q => q.status === k); const sum = qs => qs.reduce((s,q) => s+(q.total||0), 0); const grand = sum(quotes); const wMargin = grand > 0 ? quotes.reduce((s,q) => s+(q.margin_pct||0)*(q.total||0), 0)/grand : 0; const sent = byStatus("sent"); const accepted = byStatus("accepted"); const rejected = byStatus("rejected"); const pending = byStatus("pending"); const draft = byStatus("draft"); const totalCerradas = accepted.length + rejected.length; const tasaCierre = totalCerradas > 0 ? (accepted.length / totalCerradas * 100) : 0; return { grand, wMargin, cotizado: grand, proyectados: sum(sent), generados: sum(accepted), perdidos: sum(rejected), pendientesSum: sum(pending), enNeg: sent.length, pendientes: pending.length, ganados: accepted.length, perdidos_n: rejected.length, tasaCierre, totalCerradas, byStatus: { draft: {label:"Cotizando", count:draft.length, total:sum(draft)}, sent: {label:"En negociación", count:sent.length, total:sum(sent)}, pending: {label:"Pendiente", count:pending.length, total:sum(pending)}, accepted: {label:"Adjudicado", count:accepted.length, total:sum(accepted)}, rejected: {label:"No adjudicado", count:rejected.length, total:sum(rejected)}, }, top5active: [...sent,...pending].sort((a,b)=>(b.total||0)-(a.total||0)).slice(0,5), top5adj: [...accepted].sort((a,b)=>(b.total||0)-(a.total||0)).slice(0,5), totalCount: quotes.length, }; } // ══════════════════════════════════════════════════════ // HTML BUILDER // ══════════════════════════════════════════════════════ function buildHTML({periodo, fecha, presentadoPor, avances, riesgos, plan, proyectosCalientes, visitas, feedback, fs, nd}) { const fDate = new Date(fecha+"T00:00").toLocaleDateString("es-PA",{day:"2-digit",month:"long",year:"numeric"}); const nContacts = nd?.contacts?.total ?? "—"; const nActCont = nd?.contacts?.active ?? "—"; const nClients = nd?.clients?.active ?? "—"; const nProspects = nd?.clients?.prospects ?? "—"; const nProjects = nd?.projects?.total ?? "—"; const cByStatus = nd?.clients?.byStatus ?? {}; const pByType = nd?.projects?.byType ?? {}; const BAR_COLORS = ["#141414","#4a4a4e","#7a7a80","#a8a8ae","#d0d0d4"]; const makeBars = (entries) => { const max = entries.length ? entries[0][1] : 1; return entries.map(([name,count],i) => `
${esc(name)}
${count}
`).join("") || `
Sin datos disponibles
`; }; const typeRows = makeBars(Object.entries(pByType).sort((a,b)=>b[1]-a[1])); const clientRows = makeBars(Object.entries(cByStatus).sort((a,b)=>b[1]-a[1])); const bar = key => fs.grand > 0 ? ((fs.byStatus[key]?.total||0)/fs.grand*100).toFixed(1)+"%" : "0%"; const winPct = fs.totalCerradas > 0 ? fs.tasaCierre.toFixed(0) : "0"; const lossPct = fs.totalCerradas > 0 ? (100-fs.tasaCierre).toFixed(0) : "0"; const topRows = fs.top5active.map(q => ` ${esc(q.project_name||"—")} ${q.status==="sent"?"En negociación":q.status==="pending"?"Pendiente":"—"} ${fmtUSD(q.total)} `).join("") || `Sin proyectos activos`; const adjRows = fs.top5adj.map(q => `
${esc(q.project_name||"—")} ${fmtUSD(q.total)}
`).join("") || `
Sin adjudicados aún
`; const avancesCards = avances.map((a,i) => `
Avance ${i+1}
${esc(a.titulo||"—")}

${esc(a.desc||"")}

`).join(""); const riskCards = riesgos.map(r => `
RIESGO
${esc(r.riesgo||"—")}

${esc(r.aprendizaje||"")}

`).join(""); const hotTags = proyectosCalientes.map(p => `
${esc(p)}
`).join(""); const visitaTags = visitas.map(v => `${esc(v)}`).join(""); const STAGES = [ "Portada","Resumen ejecutivo","Resultados comerciales", "Tasa de adjudicación","Estado financiero","Cartera de clientes", "Avances estratégicos","Proyectos calientes","Riesgos y aprendizajes", "Plan siguiente período","Sugerencias y feedback" ]; const N = STAGES.length; const Npad = String(N).padStart(2,"0"); return ` INside — Informe ${esc(periodo)}
INside Portada
Informe de Gestión · ${esc(periodo)}
Modo edición activo — clic en cualquier texto para modificarlo directamente.

Informe de Gestión

${esc(periodo)}
${esc(fDate)}
${presentadoPor ? `
Preparado por ${esc(presentadoPor)}
` : ""}
01 · Resumen ejecutivo

El período en números

Cotizado total
${fmtUSD(fs.cotizado)}
${fs.totalCount} cotizaciones · todo el período
Ingresos proyectados
${fmtUSD(fs.proyectados)}
${fs.enNeg} proyectos en negociación
Ingresos generados
${fmtUSD(fs.generados)}
${fs.ganados} proyectos adjudicados
Ingresos perdidos
${fmtUSD(fs.perdidos)}
${fs.perdidos_n} no adjudicados
Ingresos pendientes
${fmtUSD(fs.pendientesSum)}
${fs.pendientes} proyectos pendientes
Margen promedio
${fmtPct(fs.wMargin)}
ponderado · todas las cotizaciones
En negociación
${fs.enNeg}
propuesta enviada al cliente
Adjudicados
${fs.ganados}
confirmados y cerrados
No adjudicados
${fs.perdidos_n}
cliente no aceptó la propuesta
02 · Resultados comerciales

De dónde sale el negocio

${esc(String(nContacts))}
Contactos en base
→
${esc(String(nActCont))}
Contactos activos
→
${esc(String(nProjects))}
Proyectos en cartera
→
${fs.totalCount}
Cotizaciones emitidas
${topRows}
Top proyectos activos · En negociación y PendientesEstadoValor

Proyectos por tipo · Notion

${typeRows}
03 · Tasa de adjudicación

Conversión de propuestas en proyectos cerrados

${fs.totalCerradas > 0 ? fs.tasaCierre.toFixed(0) : "—"}%
tasa de adjudicación
${fs.ganados} adjudicados de ${fs.totalCerradas} propuestas cerradas
Adjudicado ${winPct}% No adjudicado ${lossPct}%
Propuestas cerradas
${fs.totalCerradas}
Adjudicadas + No adjudicadas
Adjudicadas
${fs.ganados}
proyecto confirmado y cerrado
No adjudicadas
${fs.perdidos_n}
cliente no aceptó la propuesta
Aún en proceso
${fs.enNeg + fs.pendientes}
En negociación + Pendientes
04 · Estado financiero

Composición de la cartera

Cartera total — ${fmtUSD(fs.grand)}

Cotizando — ${fmtUSD(fs.byStatus.draft.total)} En negociación — ${fmtUSD(fs.byStatus.sent.total)} Pendiente — ${fmtUSD(fs.byStatus.pending.total)} Adjudicado — ${fmtUSD(fs.byStatus.accepted.total)} No adjudicado — ${fmtUSD(fs.byStatus.rejected.total)}

Top proyectos adjudicados

${adjRows}
05 · Cartera de clientes · Notion

Estado de nuestra base comercial

Contactos totales
${esc(String(nContacts))}
registrados en Notion
Contactos activos
${esc(String(nActCont))}
en proceso de seguimiento
Clientes activos
${esc(String(nClients))}
activos o recurrentes
Prospectos
${esc(String(nProspects))}
clientes potenciales

Clientes por estado

${clientRows}
06 · Avances estratégicos

Lo que se logró este período

${avancesCards}
07 · Proyectos calientes

Prioridades para cerrar este período

${hotTags || '
Por definir
'}
08 · Riesgos y aprendizajes

Lo que hay que atender

${riskCards}
09 · Plan siguiente período

Qué viene

Próximas visitas

${visitaTags || 'Por definir'}

Objetivos y acciones

${esc(plan||"Por definir")}

Sugerencias y feedback

Espacio abierto para la directiva
${feedback ? `
${esc(feedback)}
` : ""}
← → para navegar · Editar para ajustar texto
`; } // ══════════════════════════════════════════════════════ // FORM HELPERS — outside component so React doesn't // remount on every keystroke (typing bug fix) // ══════════════════════════════════════════════════════ const Sect = ({ title, desc, children }) => (
{title}
{desc &&
{desc}
} {children}
); const Inp = ({ label, value, onChange, placeholder, type="text" }) => (
onChange(e.target.value)} placeholder={placeholder} style={{ width:"100%" }} />
); const TA = ({ label, value, onChange, rows=3, placeholder }) => (