/* ============================================================ INside One — Dashboard Comercial (admin) Métricas derivadas de quotes + pipeline sin Firestore extra. ============================================================ */ function fmtDashMoney(n) { if (n >= 1000000) return "$" + (n/1000000).toFixed(1) + "M"; if (n >= 1000) return "$" + (n/1000).toFixed(1) + "k"; return window.fmtMoney(n); } function DashKpi({ label, value, sub, color, onClick, active }) { return (
onClick && (e.currentTarget.style.transform="translateY(-1px)")} onMouseLeave={e => onClick && !active && (e.currentTarget.style.transform="")}>
{label}
{value}
{sub &&
{sub}
}
); } // Mini SVG bar chart (last 6 months revenue) function MonthlyChart({ quotes }) { const months = React.useMemo(() => { const map = {}; const now = new Date(); for (let i = 5; i >= 0; i--) { const d = new Date(now.getFullYear(), now.getMonth()-i, 1); const key = d.toISOString().slice(0,7); const label = d.toLocaleDateString("es-PA",{month:"short"}).replace(".",""); map[key] = { label, total:0, won:0 }; } quotes.forEach(q => { const m = (q.date||"").slice(0,7); if (map[m]) { map[m].total += q.total||0; if (q.status==="accepted") map[m].won += q.total||0; } }); return Object.values(map); }, [quotes]); const maxVal = Math.max(...months.map(m => m.total), 1); const W = 540, H = 140, PAD = 12, barW = Math.floor((W - PAD*2) / months.length * 0.55); const gap = (W - PAD*2) / months.length; return (
{months.map((m, i) => { const x = PAD + i*gap + gap/2 - barW/2; const totalH = Math.max(2, (m.total/maxVal)*(H-20)); const wonH = Math.max(0, (m.won/maxVal)*(H-20)); return ( {wonH > 0 && ( )} {m.label} {m.total > 0 && ( {fmtDashMoney(m.total)} )} ); })}
); } // Pipeline funnel by stage function PipelineFunnel({ opps }) { const STAGES = [ { key:"prospecto", label:"Prospecto", color:"#6366f1" }, { key:"cotizando", label:"Cotizando", color:"#0ea5e9" }, { key:"negociacion", label:"En negociación", color:"#f59e0b" }, { key:"adjudicado", label:"Adjudicado", color:"#22c55e" }, { key:"no_adjudicado", label:"No adjudicado", color:"#ef4444" }, ]; const rows = STAGES.map(s => ({ ...s, count: opps.filter(o => o.stage===s.key).length, value: opps.filter(o => o.stage===s.key).reduce((sum,o)=>sum+(o.value||0),0), })); const maxCount = Math.max(...rows.map(r=>r.count), 1); return (
{rows.map(r => (
{r.label}
0 ? `${(r.count/maxCount)*100}%` : "0%", background:r.color+"88", borderRadius:4, transition:"width .5s", minWidth: r.count>0?4:0 }} />
{r.count}
{r.value>0?fmtDashMoney(r.value):""}
))}
); } // Top clients function TopClients({ quotes }) { const clients = React.useMemo(() => { const map = {}; quotes.forEach(q => { const key = q.client_company || q.client_name || "Desconocido"; if (!map[key]) map[key] = { name:key, count:0, total:0, won:0 }; map[key].count++; map[key].total += q.total||0; if (q.status==="accepted") map[key].won += q.total||0; }); return Object.values(map).sort((a,b)=>b.total-a.total).slice(0,6); }, [quotes]); if (clients.length===0) return
Sin datos aún.
; return (
{clients.map((c, i) => (
{i+1}
{c.name}
{c.count} cotizaciones
{fmtDashMoney(c.total)}
{c.won>0 &&
{fmtDashMoney(c.won)} adjudicado
}
))}
); } // ── DashboardView ───────────────────────────────────────────── function DashboardView() { const { quotes, opps = [] } = React.useContext(window.AppCtx); const stats = React.useMemo(() => { const sent = quotes.filter(q=>q.status==="sent"); const accepted = quotes.filter(q=>q.status==="accepted"); const rejected = quotes.filter(q=>q.status==="rejected"); const closed = accepted.length + rejected.length; const winRate = closed>0 ? Math.round(accepted.length/closed*100) : 0; const totalQuoted = quotes.reduce((s,q)=>s+(q.total||0),0); const totalWon = accepted.reduce((s,q)=>s+(q.total||0),0); const totalPending= sent.reduce((s,q)=>s+(q.total||0),0); const avgMargin = quotes.length>0 ? quotes.reduce((s,q)=>s+(q.margin_pct||0),0)/quotes.length : 0; const pipelineVal = opps.filter(o=>o.stage!=="adjudicado"&&o.stage!=="no_adjudicado") .reduce((s,o)=>s+(o.value||0),0); return { sent, accepted, rejected, closed, winRate, totalQuoted, totalWon, totalPending, avgMargin, pipelineVal }; }, [quotes, opps]); return (

Dashboard Comercial

Resumen de métricas del área comercial
{/* KPI row */}
=40?"#22c55e":stats.winRate>=20?"#f59e0b":"#ef4444"} /> =28?"#22c55e":stats.avgMargin>=18?"#f59e0b":"#ef4444"} /> o.stage!=="adjudicado"&&o.stage!=="no_adjudicado").length} oportunidades`} />
{/* Charts row */}
Cotizaciones por mes (últimos 6 meses)
Adjudicado
Total cotizado
Funnel de pipeline
{opps.length > 0 ? : (
Sin oportunidades en pipeline.
)}
{/* Status breakdown + Top clients */}
Estado de cotizaciones
{[ { label:"Borrador", key:"draft", color:"#6b7280" }, { label:"En negociación", key:"sent", color:"#f59e0b" }, { label:"Adjudicado", key:"accepted", color:"#22c55e" }, { label:"No adjudicado", key:"rejected", color:"#ef4444" }, { label:"Pendiente", key:"pending", color:"#0ea5e9" }, ].map(s => { const count = quotes.filter(q=>q.status===s.key).length; const pct = quotes.length>0 ? (count/quotes.length)*100 : 0; return (
{s.label}
{count}
); })}
Top clientes
Por volumen total cotizado
); } window.DashboardView = DashboardView;