1483 lines
71 KiB
HTML
1483 lines
71 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Bot WhatsApp · PALMAS360</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--verde: #1a7a2e;
|
|
--verde-cl: #2aa147;
|
|
--verde-xs: #e8f5eb;
|
|
--amarillo: #f4b942;
|
|
--gris: #f5f7fa;
|
|
--gris-b: #e2e8f0;
|
|
--texto: #1e293b;
|
|
--texto-cl: #64748b;
|
|
--blanco: #ffffff;
|
|
--sombra: 0 4px 24px rgba(0,0,0,.08);
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
background: var(--gris);
|
|
color: var(--texto);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* ── HEADER ── */
|
|
header {
|
|
background: linear-gradient(135deg, #0d4f1c 0%, var(--verde-cl) 100%);
|
|
color: var(--blanco);
|
|
padding: 52px 48px 40px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
header::before {
|
|
content: '';
|
|
position: absolute;
|
|
right: -80px; top: -80px;
|
|
width: 360px; height: 360px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,.06);
|
|
}
|
|
header::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 60px; bottom: -100px;
|
|
width: 220px; height: 220px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,.04);
|
|
}
|
|
.header-badge {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: rgba(255,255,255,.15);
|
|
border: 1px solid rgba(255,255,255,.25);
|
|
border-radius: 20px;
|
|
padding: 4px 14px;
|
|
font-size: .8rem;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 18px;
|
|
}
|
|
header h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; }
|
|
header p { font-size: 1.05rem; opacity: .85; max-width: 680px; margin-top: 10px; }
|
|
.header-meta {
|
|
display: flex; gap: 32px; margin-top: 28px; flex-wrap: wrap;
|
|
}
|
|
.header-meta span {
|
|
font-size: .82rem; opacity: .75;
|
|
display: flex; align-items: center; gap: 6px;
|
|
}
|
|
|
|
/* ── LAYOUT ── */
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
|
main { padding: 48px 0 80px; }
|
|
|
|
/* ── SECTION TITLE ── */
|
|
.section-title {
|
|
display: flex; align-items: center; gap: 14px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.section-title .icon {
|
|
width: 44px; height: 44px; border-radius: 12px;
|
|
background: var(--verde);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.25rem; flex-shrink: 0;
|
|
}
|
|
.section-title h2 {
|
|
font-size: 1.45rem; font-weight: 700;
|
|
color: var(--verde);
|
|
}
|
|
.section-title p {
|
|
font-size: .88rem; color: var(--texto-cl); margin-top: 2px;
|
|
}
|
|
|
|
/* ── CARDS ── */
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 48px;
|
|
}
|
|
.card {
|
|
background: var(--blanco);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: var(--sombra);
|
|
border: 1px solid var(--gris-b);
|
|
transition: transform .2s, box-shadow .2s;
|
|
}
|
|
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.12); }
|
|
.card-icon {
|
|
width: 48px; height: 48px; border-radius: 12px;
|
|
background: var(--verde-xs);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.5rem; margin-bottom: 16px;
|
|
}
|
|
.card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
|
|
.card p { font-size: .875rem; color: var(--texto-cl); }
|
|
|
|
/* ── OBJECTIVE CARD (highlight) ── */
|
|
.card-highlight {
|
|
border-left: 4px solid var(--verde);
|
|
background: var(--verde-xs);
|
|
}
|
|
.card-highlight .card-icon { background: var(--verde); }
|
|
|
|
/* ── REQUIREMENT LIST ── */
|
|
.req-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 48px;
|
|
}
|
|
.req-item {
|
|
background: var(--blanco);
|
|
border-radius: 14px;
|
|
padding: 20px 22px;
|
|
box-shadow: var(--sombra);
|
|
border: 1px solid var(--gris-b);
|
|
display: flex; gap: 14px; align-items: flex-start;
|
|
}
|
|
.req-num {
|
|
min-width: 32px; height: 32px;
|
|
border-radius: 8px;
|
|
background: var(--verde);
|
|
color: #fff;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: .8rem; font-weight: 700;
|
|
}
|
|
.req-item h4 { font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
|
|
.req-item p { font-size: .83rem; color: var(--texto-cl); }
|
|
|
|
/* ── DIAGRAM BOX ── */
|
|
.diagram-box {
|
|
background: var(--blanco);
|
|
border-radius: 16px;
|
|
padding: 32px 24px;
|
|
box-shadow: var(--sombra);
|
|
border: 1px solid var(--gris-b);
|
|
margin-bottom: 48px;
|
|
overflow-x: auto;
|
|
}
|
|
.diagram-box .mermaid {
|
|
display: flex; justify-content: center;
|
|
}
|
|
.diagram-label {
|
|
text-align: center;
|
|
font-size: .8rem;
|
|
color: var(--texto-cl);
|
|
margin-top: 16px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── TIMELINE ── */
|
|
.timeline { margin-bottom: 48px; }
|
|
.tl-item {
|
|
display: flex; gap: 20px;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
}
|
|
.tl-left {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
min-width: 56px;
|
|
}
|
|
.tl-dot {
|
|
width: 40px; height: 40px; border-radius: 50%;
|
|
background: var(--verde);
|
|
color: #fff;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: .85rem; font-weight: 800;
|
|
flex-shrink: 0; z-index: 1;
|
|
}
|
|
.tl-line {
|
|
flex: 1; width: 2px;
|
|
background: var(--gris-b);
|
|
margin: 4px 0;
|
|
}
|
|
.tl-item:last-child .tl-line { display: none; }
|
|
.tl-body {
|
|
background: var(--blanco);
|
|
border-radius: 14px;
|
|
padding: 18px 22px;
|
|
box-shadow: var(--sombra);
|
|
border: 1px solid var(--gris-b);
|
|
margin-bottom: 16px;
|
|
flex: 1;
|
|
}
|
|
.tl-body h4 { font-size: .98rem; font-weight: 700; margin-bottom: 6px; }
|
|
.tl-body p { font-size: .855rem; color: var(--texto-cl); }
|
|
.tl-tag {
|
|
display: inline-block;
|
|
background: var(--verde-xs);
|
|
color: var(--verde);
|
|
border-radius: 20px;
|
|
padding: 2px 10px;
|
|
font-size: .75rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* ── TABLE ── */
|
|
.tbl-wrap {
|
|
background: var(--blanco);
|
|
border-radius: 16px;
|
|
box-shadow: var(--sombra);
|
|
border: 1px solid var(--gris-b);
|
|
overflow: hidden;
|
|
margin-bottom: 48px;
|
|
}
|
|
table { width: 100%; border-collapse: collapse; }
|
|
thead { background: var(--verde); color: #fff; }
|
|
thead th { padding: 14px 18px; text-align: left; font-size: .875rem; font-weight: 700; }
|
|
tbody tr { border-bottom: 1px solid var(--gris-b); }
|
|
tbody tr:last-child { border-bottom: none; }
|
|
tbody tr:hover { background: var(--verde-xs); }
|
|
tbody td { padding: 13px 18px; font-size: .875rem; vertical-align: top; }
|
|
.badge {
|
|
display: inline-block;
|
|
border-radius: 20px;
|
|
padding: 2px 10px;
|
|
font-size: .75rem;
|
|
font-weight: 700;
|
|
}
|
|
.badge-alta { background: #fee2e2; color: #b91c1c; }
|
|
.badge-media { background: #fef3c7; color: #92400e; }
|
|
.badge-baja { background: var(--verde-xs); color: var(--verde); }
|
|
|
|
/* ── ARCH BLOCK ── */
|
|
.arch-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 48px;
|
|
}
|
|
.arch-block {
|
|
background: var(--blanco);
|
|
border-radius: 14px;
|
|
padding: 20px;
|
|
box-shadow: var(--sombra);
|
|
border: 1px solid var(--gris-b);
|
|
text-align: center;
|
|
}
|
|
.arch-block .arch-icon { font-size: 2rem; margin-bottom: 10px; }
|
|
.arch-block h4 { font-size: .9rem; font-weight: 700; margin-bottom: 6px; }
|
|
.arch-block p { font-size: .8rem; color: var(--texto-cl); }
|
|
.arch-arrow {
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 1.6rem; color: var(--verde-cl); padding-top: 10px;
|
|
}
|
|
|
|
/* ── SEPARATOR ── */
|
|
.sep { height: 2px; background: var(--gris-b); border-radius: 2px; margin: 40px 0; }
|
|
|
|
/* ── FOOTER ── */
|
|
footer {
|
|
background: #0d4f1c;
|
|
color: rgba(255,255,255,.7);
|
|
text-align: center;
|
|
padding: 28px;
|
|
font-size: .82rem;
|
|
}
|
|
footer strong { color: #fff; }
|
|
|
|
/* ── NAV ── */
|
|
.toc {
|
|
background: var(--blanco);
|
|
border-radius: 16px;
|
|
padding: 24px 28px;
|
|
box-shadow: var(--sombra);
|
|
border: 1px solid var(--gris-b);
|
|
margin-bottom: 40px;
|
|
}
|
|
.toc h3 { font-size: .95rem; font-weight: 700; color: var(--verde); margin-bottom: 14px; }
|
|
.toc ol { padding-left: 18px; }
|
|
.toc li { font-size: .875rem; margin-bottom: 6px; }
|
|
.toc a { color: var(--verde-cl); text-decoration: none; font-weight: 500; }
|
|
.toc a:hover { text-decoration: underline; }
|
|
|
|
/* ── RESPONSIVE ── */
|
|
@media (max-width: 640px) {
|
|
header { padding: 36px 20px 28px; }
|
|
header h1 { font-size: 1.8rem; }
|
|
.container { padding: 0 16px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════════════════════════ HEADER ═══════════════════════════════ -->
|
|
<header>
|
|
<div class="container">
|
|
<div class="header-badge">
|
|
<span>🌴</span> PALMAS360 · ERP Palmicultura
|
|
</div>
|
|
<h1>Bot WhatsApp + IA</h1>
|
|
<p>
|
|
Módulo de captura de datos de campo, validación inteligente, aprobación supervisada
|
|
y notificaciones automatizadas mediante WhatsApp para los clientes de PALMAS360.
|
|
</p>
|
|
<div class="header-meta">
|
|
<span>📅 Mayo 2026</span>
|
|
<span>🏢 Multi-tenant · 30+ empresas</span>
|
|
<span>📲 WhatsApp Business API</span>
|
|
<span>🤖 IA generativa</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ═══════════════════════════════ MAIN ════════════════════════════════ -->
|
|
<main>
|
|
<div class="container">
|
|
|
|
<!-- ÍNDICE -->
|
|
<div class="toc">
|
|
<h3>📋 Contenido</h3>
|
|
<ol>
|
|
<li><a href="#objetivo">Objetivo general</a></li>
|
|
<li><a href="#alcance">Alcance del módulo</a></li>
|
|
<li><a href="#arquitectura">Arquitectura del sistema</a></li>
|
|
<li><a href="#flujo-captura">Flujo: Captura de datos de campo</a></li>
|
|
<li><a href="#flujo-ia">Flujo: Dashboard IA y aprobación</a></li>
|
|
<li><a href="#flujo-notif">Flujo: Notificaciones y tareas programadas</a></li>
|
|
<li><a href="#flujo-informe">Flujo: Solicitud de informes por WhatsApp</a></li>
|
|
<li><a href="#requerimientos">Requerimientos funcionales</a></li>
|
|
<li><a href="#fases">Fases de implementación</a></li>
|
|
<li><a href="#entidades">Tablas nuevas del módulo Bot</a></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- ── 1. OBJETIVO ── -->
|
|
<section id="objetivo">
|
|
<div class="section-title">
|
|
<div class="icon">🎯</div>
|
|
<div>
|
|
<h2>1. Objetivo General</h2>
|
|
<p>Qué se quiere lograr con este módulo</p>
|
|
</div>
|
|
</div>
|
|
<div class="cards">
|
|
<div class="card card-highlight">
|
|
<div class="card-icon">📲</div>
|
|
<h3>Captura de campo sin app</h3>
|
|
<p>Permitir que cualquier trabajador de una finca registre datos operativos (labores, cosecha, báscula) directamente desde WhatsApp, sin necesidad de instalar ninguna aplicación adicional.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🤖</div>
|
|
<h3>Validación inteligente con IA</h3>
|
|
<p>La IA actúa <strong>dentro de PALMAS360</strong>, al momento en que el supervisor abre la solicitud para aprobar. Detecta errores, campos inconsistentes y sugiere correcciones. El bot de WhatsApp solo guía la captura con un menú estructurado.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">✅</div>
|
|
<h3>Cero ingresos sin supervisión</h3>
|
|
<p>Ningún dato llega directamente a la base de datos. Siempre pasa por un dashboard de aprobación. El supervisor edita, valida y autoriza antes de guardar.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🔔</div>
|
|
<h3>Notificaciones automatizadas</h3>
|
|
<p>Los supervisores programan tareas en PALMAS360 y, al activar "Notificar", el sistema envía automáticamente el aviso por WhatsApp a los usuarios asignados.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">📊</div>
|
|
<h3>Informes por WhatsApp</h3>
|
|
<p>Los clientes pueden solicitar informes escribiendo en lenguaje natural. La IA interpreta la solicitud, consulta el ERP y devuelve el informe directamente al chat.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🏢</div>
|
|
<h3>Multi-tenant seguro</h3>
|
|
<p>Un mismo número de WhatsApp Business atiende a todos los clientes (empresas). El sistema identifica a qué empresa pertenece cada número y dirige los datos al tenant correcto.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<!-- ── 2. ALCANCE ── -->
|
|
<section id="alcance">
|
|
<div class="section-title">
|
|
<div class="icon">📐</div>
|
|
<div>
|
|
<h2>2. Alcance del Módulo</h2>
|
|
<p>Qué está dentro y qué está fuera del alcance inicial</p>
|
|
</div>
|
|
</div>
|
|
<div class="tbl-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Funcionalidad</th>
|
|
<th>Dentro del alcance</th>
|
|
<th>Fuera del alcance v1</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Captura de datos de campo</strong></td>
|
|
<td>Labores diarias, ciclos de cosecha, tiquetes de báscula</td>
|
|
<td>Otros módulos del ERP (nómina, fertilización…)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Identificación de usuario</strong></td>
|
|
<td>Por número de teléfono registrado en la empresa</td>
|
|
<td>Autenticación biométrica / 2FA por WhatsApp</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Routing multi-tenant</strong></td>
|
|
<td>Despacho automático al tenant correcto (≈30 empresas)</td>
|
|
<td>Creación de nuevos tenants desde WhatsApp</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Dashboard de aprobación</strong></td>
|
|
<td>Revisión, edición y aprobación por el supervisor</td>
|
|
<td>Aprobación masiva sin revisión</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Validación con IA</strong></td>
|
|
<td>Errores de parametrización, lotes duplicados, campos faltantes</td>
|
|
<td>Lógica de negocio financiera compleja</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Notificaciones salientes</strong></td>
|
|
<td>Tareas programadas desde PALMAS360 → WhatsApp</td>
|
|
<td>Campañas de marketing / mensajes masivos</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Informes por chat</strong></td>
|
|
<td>Informes disponibles en el ERP, vía lenguaje natural</td>
|
|
<td>Generación de informes ad-hoc nuevos</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Log de WhatsApp</strong></td>
|
|
<td>Historial de mensajes por empresa y por número</td>
|
|
<td>Archivado de multimedia (imágenes, audios)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Límite de entrega -->
|
|
<div style="background:linear-gradient(135deg,#1a7a2e,#2aa147);color:#fff;border-radius:14px;padding:20px 26px;margin-top:24px;display:flex;gap:18px;align-items:flex-start;">
|
|
<div style="font-size:2rem;flex-shrink:0;">🛑</div>
|
|
<div>
|
|
<div style="font-weight:800;font-size:1rem;margin-bottom:6px;">Límite de entrega: el click en “Guardar”</div>
|
|
<div style="font-size:.875rem;opacity:.92;line-height:1.7;">
|
|
El requerimiento de este módulo cubre desde que el mensaje llega por WhatsApp hasta que el supervisor hace click en <strong>Guardar</strong> en el dashboard de aprobación.<br>
|
|
A partir de ese click, <strong>el flujo es el de PALMAS360 existente</strong>: la misma lógica de negocio, las mismas tablas y las mismas validaciones que ya funcionan en el ERP.<br>
|
|
<span style="opacity:.75;font-size:.82rem;">Lo nuevo es: WhatsApp API → Webhook → Router → Dashboard de aprobación → <em>click Guardar</em> → tablas existentes del ERP.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<!-- ── 3. ARQUITECTURA ── -->
|
|
<section id="arquitectura">
|
|
<div class="section-title">
|
|
<div class="icon">🏗️</div>
|
|
<div>
|
|
<h2>3. Arquitectura del Sistema</h2>
|
|
<p>Componentes principales y cómo se relacionan</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram-box">
|
|
<div class="mermaid">
|
|
graph LR
|
|
subgraph Campo["📱 Campo / Usuario"]
|
|
WA["WhatsApp\nUsuario de campo"]
|
|
end
|
|
|
|
subgraph Gateway["☁️ Gateway"]
|
|
WABA["WhatsApp\nBusiness API\n(Meta Cloud API)"]
|
|
WH["Webhook\nReceiver"]
|
|
end
|
|
|
|
subgraph Core["⚙️ PALMAS360 Core (Multi-tenant)"]
|
|
ROUTER["Router\nde Tenant\n(por número)"]
|
|
AI["Motor IA\n(LLM + RAG)"]
|
|
DASH["Dashboard\nAprobación"]
|
|
SCHED["Planificador\nde Tareas"]
|
|
LOG["Log\nWhatsApp"]
|
|
end
|
|
|
|
subgraph Tenants["🏢 Tenants (30+ empresas)"]
|
|
T1["app.palmas360.com\n/rosablanca"]
|
|
T2["app.palmas360.com\n/AMG"]
|
|
TN["app.palmas360.com\n/..."]
|
|
end
|
|
|
|
WA -->|"Mensaje"| WABA
|
|
WABA -->|"POST webhook"| WH
|
|
WH --> ROUTER
|
|
ROUTER --> AI
|
|
AI --> DASH
|
|
DASH --> T1 & T2 & TN
|
|
SCHED -->|"Envío automático"| WABA
|
|
LOG -.->|"Auditoría"| T1 & T2 & TN
|
|
|
|
style Campo fill:#e8f5eb,stroke:#2aa147
|
|
style Gateway fill:#fff3e0,stroke:#f4b942
|
|
style Core fill:#e3f2fd,stroke:#1976d2
|
|
style Tenants fill:#f3e5f5,stroke:#7b1fa2
|
|
</div>
|
|
<p class="diagram-label">Figura 1 · Arquitectura general del Bot WhatsApp para PALMAS360</p>
|
|
</div>
|
|
|
|
<div class="arch-grid">
|
|
<div class="arch-block">
|
|
<div class="arch-icon">📱</div>
|
|
<h4>WhatsApp Business API</h4>
|
|
<p>Canal de comunicación bidireccional. Recibe mensajes entrantes y envía respuestas y notificaciones.</p>
|
|
</div>
|
|
<div class="arch-block">
|
|
<div class="arch-icon">🔀</div>
|
|
<h4>Router de Tenant</h4>
|
|
<p>Identifica el número de teléfono en la tabla de usuarios registrados y determina a qué empresa pertenece.</p>
|
|
</div>
|
|
<div class="arch-block">
|
|
<div class="arch-icon">🤖</div>
|
|
<h4>Motor IA (LLM)</h4>
|
|
<p>Actúa dentro del dashboard de PALMAS360: analiza los datos capturados por el bot, detecta inconsistencias y presenta alertas y sugerencias al supervisor antes de aprobar.</p>
|
|
</div>
|
|
<div class="arch-block">
|
|
<div class="arch-icon">🖥️</div>
|
|
<h4>Dashboard de Aprobación</h4>
|
|
<p>Interfaz dentro de PALMAS360 donde el supervisor revisa, corrige y aprueba cada solicitud antes de guardarla.</p>
|
|
</div>
|
|
<div class="arch-block">
|
|
<div class="arch-icon">📅</div>
|
|
<h4>Planificador de Tareas</h4>
|
|
<p>Permite programar tareas en el ERP y disparar automáticamente un mensaje de WhatsApp al activar "Notificar".</p>
|
|
</div>
|
|
<div class="arch-block">
|
|
<div class="arch-icon">📋</div>
|
|
<h4>Log de WhatsApp</h4>
|
|
<p>Sección del ERP que muestra el historial completo de conversaciones, agrupadas por empresa y por número de teléfono.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<!-- ── 4. FLUJO: CAPTURA ── -->
|
|
<section id="flujo-captura">
|
|
<div class="section-title">
|
|
<div class="icon">📥</div>
|
|
<div>
|
|
<h2>4. Flujo · Captura de Datos de Campo</h2>
|
|
<p>Doble vía: <strong>menú guiado</strong> paso a paso, o <strong>texto libre</strong> (un párrafo de corrido) que la IA interpreta y organiza en el dashboard de PALMAS360</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram-box">
|
|
<div class="mermaid">
|
|
flowchart TD
|
|
A([👷 Usuario escribe\ncualquier mensaje]) --> B{¿Número\nregistrado?}
|
|
B -->|No| C[🤖 Bot: Número no registrado.\nContacta al administrador]
|
|
B -->|Sí| D[Identificar empresa\npor número de teléfono]
|
|
D --> TX{¿Es texto\nlibre o saludo?}
|
|
|
|
TX -->|"Párrafo / texto\nde corrido"| TL1["🤖 Bot: ✅ Recibido.\nEnviando a revisión..."]
|
|
TL1 --> TL2[📨 Mensaje raw guardado\nen PALMAS360]
|
|
TL2 --> TL3["🤖 IA en dashboard\ninterpreta y organiza\nlos campos del texto"]
|
|
TL3 --> KK[🔔 Supervisor notificado\npara revisar y aprobar]
|
|
|
|
TX -->|"Saludo / número\nde opción"| E["🤖 Bot envía menú:\n1️⃣ Labor Diaria\n2️⃣ Ciclo de Cosecha\n3️⃣ Tiquete de Báscula\n4️⃣ Solicitar Informe\n5️⃣ Cancelar"]
|
|
E --> F{Usuario\nresponde}
|
|
F -->|"1"| G1["🤖 Bot pregunta paso a paso:\n¿Fecha? → ¿Lote?\n¿Labor? → ¿N° trabajadores?\n¿Palmas atendidas?"]
|
|
F -->|"2"| G2["🤖 Bot pregunta paso a paso:\n¿Fecha? → ¿Lote?\n¿N° ciclo? → ¿Racimos?\n¿Peso estimado?"]
|
|
F -->|"3"| G3["🤖 Bot pregunta paso a paso:\n¿N° tiquete? → ¿Placa?\n¿Peso bruto? → ¿Tara?\n¿Extractora destino?"]
|
|
F -->|"4"| G4[Ver flujo\nSolicitud de Informe]
|
|
F -->|"5"| ZZ([🤖 Cancelado. Escribe\ncuando quieras continuar])
|
|
G1 & G2 & G3 --> H[Usuario completa\ntodas las respuestas]
|
|
H --> I["🤖 Bot muestra resumen:\n¿Confirmas estos datos?\n✅ SI / ❌ NO"]
|
|
I -->|NO| E
|
|
I -->|SI| J[✅ Dato guardado como\nPENDIENTE en PALMAS360]
|
|
J --> K[🔔 Notifica al supervisor\nen PALMAS360 para aprobar]
|
|
KK & K --> L["🤖 Bot confirma al usuario:\nRegistro enviado.\nEsperando aprobación"]
|
|
|
|
style A fill:#e8f5eb,stroke:#2aa147
|
|
style C fill:#fee2e2,stroke:#b91c1c
|
|
style TX fill:#fff3e0,stroke:#f4b942
|
|
style TL2 fill:#e3f2fd,stroke:#1976d2
|
|
style TL3 fill:#fff3e0,stroke:#f4b942
|
|
style E fill:#e3f2fd,stroke:#1976d2
|
|
style J fill:#e8f5eb,stroke:#2aa147
|
|
style K fill:#e3f2fd,stroke:#1976d2
|
|
style KK fill:#e3f2fd,stroke:#1976d2
|
|
style ZZ fill:#f5f5f5,stroke:#999
|
|
</div>
|
|
<p class="diagram-label">Figura 2 · Flujo de captura: menú guiado o texto libre interpretado por IA en dashboard</p>
|
|
</div>
|
|
|
|
<!-- ── CHAT MOCKUP ── -->
|
|
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-bottom:32px;">
|
|
|
|
<!-- Teléfono 1: Menú inicial -->
|
|
<div style="background:#e5ddd5;border-radius:20px;padding:16px;width:300px;box-shadow:0 8px 32px rgba(0,0,0,.15);font-family:'Segoe UI',sans-serif;">
|
|
<div style="background:#075e54;color:#fff;border-radius:12px 12px 0 0;padding:10px 14px;display:flex;align-items:center;gap:10px;margin:-16px -16px 12px;">
|
|
<div style="width:34px;height:34px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;font-size:1rem;">🌴</div>
|
|
<div><div style="font-weight:700;font-size:.85rem;">PALMAS360 Bot</div><div style="font-size:.7rem;opacity:.8;">En línea</div></div>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:8px;font-size:.8rem;">
|
|
<div style="align-self:flex-end;background:#dcf8c6;border-radius:12px 12px 0 12px;padding:7px 11px;">Hola</div>
|
|
<div style="align-self:flex-start;background:#fff;border-radius:12px 12px 12px 0;padding:7px 11px;max-width:88%;box-shadow:0 1px 2px rgba(0,0,0,.1);">
|
|
Hola <b>Carlos</b> 👋<br>
|
|
Empresa: <b>Rosa Blanca</b><br><br>
|
|
¿Qué deseas registrar?<br><br>
|
|
1️⃣ Labor Diaria<br>
|
|
2️⃣ Ciclo de Cosecha<br>
|
|
3️⃣ Tiquete de Báscula<br>
|
|
4️⃣ Solicitar Informe<br>
|
|
<span style="color:#aaa;">5️⃣ Cancelar</span>
|
|
</div>
|
|
</div>
|
|
<div style="text-align:center;font-size:.7rem;color:#888;margin-top:10px;">Paso 1 · Menú de opciones</div>
|
|
</div>
|
|
|
|
<!-- Teléfono 2: Preguntas guiadas -->
|
|
<div style="background:#e5ddd5;border-radius:20px;padding:16px;width:300px;box-shadow:0 8px 32px rgba(0,0,0,.15);font-family:'Segoe UI',sans-serif;">
|
|
<div style="background:#075e54;color:#fff;border-radius:12px 12px 0 0;padding:10px 14px;display:flex;align-items:center;gap:10px;margin:-16px -16px 12px;">
|
|
<div style="width:34px;height:34px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;font-size:1rem;">🌴</div>
|
|
<div><div style="font-weight:700;font-size:.85rem;">PALMAS360 Bot</div><div style="font-size:.7rem;opacity:.8;">En línea</div></div>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:8px;font-size:.8rem;">
|
|
<div style="align-self:flex-end;background:#dcf8c6;border-radius:12px 12px 0 12px;padding:7px 11px;">1</div>
|
|
<div style="align-self:flex-start;background:#fff;border-radius:12px 12px 12px 0;padding:7px 11px;max-width:88%;box-shadow:0 1px 2px rgba(0,0,0,.1);">📋 <b>Labor Diaria</b><br>¿Cuál es la <b>fecha</b>? (dd/mm/aaaa)</div>
|
|
<div style="align-self:flex-end;background:#dcf8c6;border-radius:12px 12px 0 12px;padding:7px 11px;">25/05/2026</div>
|
|
<div style="align-self:flex-start;background:#fff;border-radius:12px 12px 12px 0;padding:7px 11px;max-width:88%;box-shadow:0 1px 2px rgba(0,0,0,.1);">¿Número o nombre del <b>lote</b>?</div>
|
|
<div style="align-self:flex-end;background:#dcf8c6;border-radius:12px 12px 0 12px;padding:7px 11px;">Lote 7</div>
|
|
<div style="align-self:flex-start;background:#fff;border-radius:12px 12px 12px 0;padding:7px 11px;max-width:88%;box-shadow:0 1px 2px rgba(0,0,0,.1);">¿Qué <b>labor</b> se realizó?</div>
|
|
<div style="align-self:flex-end;background:#dcf8c6;border-radius:12px 12px 0 12px;padding:7px 11px;">Poda</div>
|
|
</div>
|
|
<div style="text-align:center;font-size:.7rem;color:#888;margin-top:10px;">Paso 2 · Preguntas guiadas</div>
|
|
</div>
|
|
|
|
<!-- Teléfono 3: Resumen y confirmación -->
|
|
<div style="background:#e5ddd5;border-radius:20px;padding:16px;width:300px;box-shadow:0 8px 32px rgba(0,0,0,.15);font-family:'Segoe UI',sans-serif;">
|
|
<div style="background:#075e54;color:#fff;border-radius:12px 12px 0 0;padding:10px 14px;display:flex;align-items:center;gap:10px;margin:-16px -16px 12px;">
|
|
<div style="width:34px;height:34px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;font-size:1rem;">🌴</div>
|
|
<div><div style="font-weight:700;font-size:.85rem;">PALMAS360 Bot</div><div style="font-size:.7rem;opacity:.8;">En línea</div></div>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:8px;font-size:.8rem;">
|
|
<div style="align-self:flex-start;background:#fff;border-radius:12px 12px 12px 0;padding:7px 11px;max-width:92%;box-shadow:0 1px 2px rgba(0,0,0,.1);">
|
|
✅ <b>Resumen:</b><br>
|
|
📅 25/05/2026 · Lote 7<br>
|
|
Labor: Poda<br>
|
|
Trabajadores: 4 · Palmas: 120<br><br>
|
|
¿Confirmas? Responde <b>SI</b> o <b>NO</b>
|
|
</div>
|
|
<div style="align-self:flex-end;background:#dcf8c6;border-radius:12px 12px 0 12px;padding:7px 11px;">SI</div>
|
|
<div style="align-self:flex-start;background:#fff;border-radius:12px 12px 12px 0;padding:7px 11px;max-width:92%;box-shadow:0 1px 2px rgba(0,0,0,.1);">
|
|
✅ Registro enviado correctamente.<br>
|
|
<span style="color:#888;font-size:.72rem;">Pendiente de aprobación en PALMAS360 por tu supervisor.</span>
|
|
</div>
|
|
</div>
|
|
<div style="text-align:center;font-size:.7rem;color:#888;margin-top:10px;">Paso 3 · Confirmación y envío</div>
|
|
</div>
|
|
|
|
<!-- Teléfono 4: Texto libre -->
|
|
<div style="background:#e5ddd5;border-radius:20px;padding:16px;width:300px;box-shadow:0 8px 32px rgba(0,0,0,.15);font-family:'Segoe UI',sans-serif;">
|
|
<div style="background:#075e54;color:#fff;border-radius:12px 12px 0 0;padding:10px 14px;display:flex;align-items:center;gap:10px;margin:-16px -16px 12px;">
|
|
<div style="width:34px;height:34px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;font-size:1rem;">🌴</div>
|
|
<div><div style="font-weight:700;font-size:.85rem;">PALMAS360 Bot</div><div style="font-size:.7rem;opacity:.8;">En línea</div></div>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:8px;font-size:.8rem;">
|
|
<div style="align-self:flex-end;background:#dcf8c6;border-radius:12px 12px 0 12px;padding:7px 11px;max-width:90%;">Hoy poda lote 7 con 4 trabajadores, hicimos 120 palmas, todo bien sin novedad</div>
|
|
<div style="align-self:flex-start;background:#fff;border-radius:12px 12px 12px 0;padding:7px 11px;max-width:88%;box-shadow:0 1px 2px rgba(0,0,0,.1);">
|
|
✅ <b>Recibido.</b><br>
|
|
Tu mensaje fue enviado al dashboard.<br>
|
|
<span style="color:#888;font-size:.73rem;">La IA interpretará los datos y el supervisor los revisará antes de guardar.</span>
|
|
</div>
|
|
</div>
|
|
<div style="text-align:center;font-size:.7rem;color:#888;margin-top:10px;">Alt · Texto libre → IA interpreta</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Banner explicativo -->
|
|
<div style="background:linear-gradient(135deg,#e3f2fd,#e8f5eb);border:1px solid #90caf9;border-radius:14px;padding:18px 24px;margin-bottom:28px;display:flex;gap:16px;align-items:flex-start;">
|
|
<div style="font-size:1.6rem;flex-shrink:0;">💡</div>
|
|
<div>
|
|
<div style="font-weight:700;font-size:.95rem;margin-bottom:4px;">Dos formas de capturar datos</div>
|
|
<div style="font-size:.85rem;color:#475569;">
|
|
<strong>Menú guiado:</strong> el usuario elige una opción numerada y responde preguntas una a una. Datos llegan organizados al dashboard.<br>
|
|
<strong>Texto libre:</strong> el usuario escribe un párrafo de corrido con toda la información. El bot lo recibe, lo reenvía al dashboard y la <strong>IA lo interpreta, extrae y organiza</strong> los campos automáticamente para que el supervisor los revise.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-icon">📋</div>
|
|
<h3>Labores Diarias</h3>
|
|
<p>El bot solicita paso a paso: fecha, lote, labor realizada, número de trabajadores, palmas atendidas y observaciones. Todo por preguntas guiadas.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🌴</div>
|
|
<h3>Ciclos de Cosecha</h3>
|
|
<p>El bot solicita: fecha, lote, número de ciclo, cantidad de racimos, peso estimado y nombre del cortero responsable.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">⚖️</div>
|
|
<h3>Tiquetes de Báscula</h3>
|
|
<p>El bot solicita: número de tiquete, placa del vehículo, peso bruto, tara, peso neto y extractora destino.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<!-- ── 5. FLUJO: DASHBOARD IA ── -->
|
|
<section id="flujo-ia">
|
|
<div class="section-title">
|
|
<div class="icon">🖥️</div>
|
|
<div>
|
|
<h2>5. Flujo · Dashboard IA y Aprobación</h2>
|
|
<p>Datos estructurados del menú, o texto libre: la IA interpreta, organiza y asiste al supervisor antes de guardar cualquier registro</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram-box">
|
|
<div class="mermaid">
|
|
flowchart TD
|
|
A(["📥 Solicitud llega al\nDashboard de Aprobación"]) --> B{¿Origen\ndel dato?}
|
|
|
|
B -->|"Menú guiado\n(campos estructurados)"| C1[📄 Vista con campos\nya organizados]
|
|
B -->|"Texto libre\n(párrafo de corrido)"| C2["🤖 IA lee el texto raw,\nextrae e interpreta\ncada campo"]
|
|
C2 --> C3["📝 Vista IA: campo extraído\n+ confianza + texto original\npara que supervisor compare"]
|
|
C1 --> D
|
|
C3 --> D
|
|
D["🔍 Panel IA valida:\n• ¿Lote existe?\n• ¿Duplicado?\n• ¿Valores en rango?\n• ¿Campos faltantes?"] --> E{Decisión\ndel supervisor}
|
|
E -->|Aprobar sin cambios| F[✅ Guardar en PALMAS360]
|
|
E -->|Editar y aprobar| G[✏️ Supervisor corrige\ncampos en el editor]
|
|
G --> F
|
|
E -->|Rechazar| H[❌ Marcar como rechazado]
|
|
H --> I[🤖 Notificar al usuario\npor WhatsApp el motivo]
|
|
F --> J[📊 Dato disponible\nen todos los módulos\ndel ERP]
|
|
F --> K[🤖 Confirmación al usuario\npor WhatsApp]
|
|
|
|
style A fill:#e3f2fd,stroke:#1976d2
|
|
style B fill:#fff3e0,stroke:#f4b942
|
|
style C2 fill:#fff3e0,stroke:#f4b942
|
|
style C3 fill:#fff3e0,stroke:#f4b942
|
|
style D fill:#fff3e0,stroke:#f4b942
|
|
style F fill:#e8f5eb,stroke:#2aa147
|
|
style H fill:#fee2e2,stroke:#b91c1c
|
|
style J fill:#e8f5eb,stroke:#2aa147
|
|
</div>
|
|
<p class="diagram-label">Figura 3 · Dashboard de Aprobación: menú estructurado o texto libre interpretado por IA</p>
|
|
</div>
|
|
|
|
<div class="req-grid">
|
|
<div class="req-item">
|
|
<div class="req-num">V1</div>
|
|
<div>
|
|
<h4>Lote ya registrado</h4>
|
|
<p>La IA alerta si el lote ya tiene un ciclo abierto para la misma fecha, evitando duplicados.</p>
|
|
</div>
|
|
</div>
|
|
<div class="req-item">
|
|
<div class="req-num">V2</div>
|
|
<div>
|
|
<h4>Campos obligatorios faltantes</h4>
|
|
<p>Detecta si faltan campos requeridos según la parametrización del tenant (p.ej. lote, fecha, labor).</p>
|
|
</div>
|
|
</div>
|
|
<div class="req-item">
|
|
<div class="req-num">V3</div>
|
|
<div>
|
|
<h4>Valores fuera de rango</h4>
|
|
<p>Identifica pesos, cantidades o fechas que no corresponden a rangos históricos esperados.</p>
|
|
</div>
|
|
</div>
|
|
<div class="req-item">
|
|
<div class="req-num">V4</div>
|
|
<div>
|
|
<h4>Lote o labor no parametrizados</h4>
|
|
<p>Verifica que el lote y la labor existan en el catálogo activo de la empresa.</p>
|
|
</div>
|
|
</div>
|
|
<div class="req-item">
|
|
<div class="req-num">V5</div>
|
|
<div>
|
|
<h4>Usuario sin permisos</h4>
|
|
<p>Confirma que el número de teléfono tiene autorización para registrar el tipo de dato enviado.</p>
|
|
</div>
|
|
</div>
|
|
<div class="req-item">
|
|
<div class="req-num">V6</div>
|
|
<div>
|
|
<h4>Ciclo de cosecha inactivo</h4>
|
|
<p>Advierte si el ciclo al que se intenta cargar producción no está activo en el periodo actual.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<!-- ── 6. FLUJO: NOTIFICACIONES ── -->
|
|
<section id="flujo-notif">
|
|
<div class="section-title">
|
|
<div class="icon">🔔</div>
|
|
<div>
|
|
<h2>6. Flujo · Notificaciones y Tareas Programadas</h2>
|
|
<p>Envíos automáticos de WhatsApp disparados desde PALMAS360</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram-box">
|
|
<div class="mermaid">
|
|
sequenceDiagram
|
|
actor SUP as 👤 Supervisor
|
|
participant P360 as 🖥️ PALMAS360
|
|
participant SCHED as ⏰ Planificador
|
|
participant WABA as 📲 WhatsApp API
|
|
participant USR as 👷 Usuario de campo
|
|
|
|
SUP->>P360: Crea tarea (ej: "Aplicar fertilizante Lote 12 el 28/05")
|
|
SUP->>P360: Asigna usuarios y activa "Notificar por WhatsApp"
|
|
P360->>SCHED: Registra job programado (fecha/hora)
|
|
Note over SCHED: El planificador espera la fecha/hora configurada
|
|
SCHED->>WABA: Dispara mensaje en la fecha indicada
|
|
WABA->>USR: 📩 "Recordatorio: Aplicar fertilizante\nLote 12 mañana 28/05\nEmpresa Rosa Blanca"
|
|
USR->>WABA: ✅ "Confirmado"
|
|
WABA->>P360: Registra confirmación en el log
|
|
P360->>SUP: Actualiza estado de la tarea
|
|
</div>
|
|
<p class="diagram-label">Figura 4 · Diagrama de secuencia para notificaciones programadas</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<!-- ── 7. FLUJO: INFORMES ── -->
|
|
<section id="flujo-informe">
|
|
<div class="section-title">
|
|
<div class="icon">📊</div>
|
|
<div>
|
|
<h2>7. Flujo · Solicitud de Informes por WhatsApp</h2>
|
|
<p>La IA mapea el lenguaje natural a una función de informe ya existente en PALMAS360 y retorna el resultado por chat</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Nota clave -->
|
|
<div style="background:linear-gradient(135deg,#fff3e0,#fef9e7);border:1px solid #f4b942;border-radius:14px;padding:18px 24px;margin-bottom:28px;display:flex;gap:16px;align-items:flex-start;">
|
|
<div style="font-size:1.6rem;flex-shrink:0;">⚙️</div>
|
|
<div>
|
|
<div style="font-weight:700;font-size:.95rem;margin-bottom:6px;">Principio fundamental: los informes deben estar pre-construidos</div>
|
|
<div style="font-size:.85rem;color:#475569;line-height:1.7;">
|
|
El bot <strong>no genera informes nuevos</strong>. Solo puede entregar informes que ya existen como funciones o endpoints en PALMAS360.<br>
|
|
La IA hace dos cosas: <strong>(1)</strong> reconoce a qué función de informe corresponde la solicitud del usuario,
|
|
y <strong>(2)</strong> extrae los parámetros necesarios (fechas, lote, trabajador, etc.) para llamarla.<br>
|
|
Si el informe pedido no está implementado en PALMAS360, el bot responde con el catálogo de informes disponibles.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram-box">
|
|
<div class="mermaid">
|
|
flowchart TD
|
|
A([👷 Usuario escribe:\n'Dame la producción\nde esta semana']) --> B[Identificar empresa\npor número]
|
|
B --> C[🤖 IA clasifica intención:\nSOLICITUD DE INFORME]
|
|
C --> D["🔍 IA mapea a función existente:\ninforme_produccion_diaria()\n+ extrae parámetros:\nfecha_inicio, fecha_fin, lote"]
|
|
D --> E{¿Función de informe\nexiste en PALMAS360?}
|
|
E -->|No existe| F["🤖 Bot lista el catálogo\nde informes disponibles"]
|
|
E -->|Sí| G[🔐 Verificar permisos\ndel número solicitante]
|
|
G --> H{¿Tiene\nacceso?}
|
|
H -->|No| I[🤖 Acceso denegado.\nContactar al administrador]
|
|
H -->|Sí| J["⚙️ Llama función PALMAS360:\ninforme_produccion_diaria(\n empresa, fecha_inicio,\n fecha_fin, lote\n)"]
|
|
J --> K[🤖 IA formatea la respuesta\npara texto de WhatsApp]
|
|
K --> L[📲 Enviar informe\npor WhatsApp]
|
|
L --> M([👷 Usuario recibe\nel informe en su chat])
|
|
|
|
style A fill:#e8f5eb,stroke:#2aa147
|
|
style C fill:#e3f2fd,stroke:#1976d2
|
|
style D fill:#fff3e0,stroke:#f4b942
|
|
style F fill:#fff3e0,stroke:#f4b942
|
|
style I fill:#fee2e2,stroke:#b91c1c
|
|
style J fill:#e3f2fd,stroke:#1976d2
|
|
style M fill:#e8f5eb,stroke:#2aa147
|
|
</div>
|
|
<p class="diagram-label">Figura 5 · La IA mapea la solicitud a una función pre-existente de PALMAS360</p>
|
|
</div>
|
|
|
|
<!-- Catálogo de informes -->
|
|
<div class="section-title" style="margin-top:8px;">
|
|
<div class="icon" style="background:#f4b942;">📋</div>
|
|
<div>
|
|
<h2 style="color:#92400e;">Catálogo de Funciones de Informes</h2>
|
|
<p>Solo estos informes pre-construidos en PALMAS360 están disponibles por WhatsApp</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tbl-wrap" style="margin-bottom:32px;">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Función PALMAS360</th>
|
|
<th>Descripción</th>
|
|
<th>Parámetros requeridos</th>
|
|
<th>Ejemplo de solicitud WhatsApp</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>informe_produccion_diaria()</code></td>
|
|
<td>Producción por lote en un rango de fechas</td>
|
|
<td>fecha_inicio, fecha_fin, lote (opcional)</td>
|
|
<td><em>"Dame la producción de esta semana"</em></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>informe_labores_diarias()</code></td>
|
|
<td>Labores ejecutadas por trabajador o por lote</td>
|
|
<td>fecha_inicio, fecha_fin, trabajador / lote</td>
|
|
<td><em>"¿Cuántas labores hizo Juan Pérez este mes?"</em></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>informe_ciclos_cosecha()</code></td>
|
|
<td>Resumen de ciclos de cosecha activos o cerrados</td>
|
|
<td>fecha, lote (opcional), num_ciclo (opcional)</td>
|
|
<td><em>"Estado del último ciclo del lote 5"</em></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>informe_rendimientos_cosecha()</code></td>
|
|
<td>Rendimiento histórico de cosecha por lote</td>
|
|
<td>lote, fecha_inicio, fecha_fin</td>
|
|
<td><em>"Rendimiento del lote 7 en lo que va del año"</em></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>informe_tiquetes_bascula()</code></td>
|
|
<td>Listado de tiquetes de báscula con pesos y extractoras</td>
|
|
<td>fecha (o rango), extractora (opcional)</td>
|
|
<td><em>"Tiquetes de hoy"</em> / <em>"Tiquetes de esta semana"</em></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>informe_pesos_racimos()</code></td>
|
|
<td>Pesos de racimos registrados en campo</td>
|
|
<td>fecha, lote (opcional)</td>
|
|
<td><em>"Pesos de racimos del lote 3 ayer"</em></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>informe_pluviosidad()</code></td>
|
|
<td>Registros de lluvia por período</td>
|
|
<td>fecha_inicio, fecha_fin</td>
|
|
<td><em>"¿Cuánto llovió este mes?"</em></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>informe_ausentismo()</code></td>
|
|
<td>Ausentismo laboral por trabajador o general</td>
|
|
<td>fecha_inicio, fecha_fin, trabajador (opcional)</td>
|
|
<td><em>"Ausentismo de esta quincena"</em></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>informe_inventario_bodega()</code></td>
|
|
<td>Stock actual de productos en bodega</td>
|
|
<td>bodega (opcional), producto (opcional)</td>
|
|
<td><em>"¿Cuánto fertilizante hay en bodega?"</em></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>informe_produccion_proyectada()</code></td>
|
|
<td>Producción proyectada vs real por período</td>
|
|
<td>fecha_inicio, fecha_fin, lote (opcional)</td>
|
|
<td><em>"¿Cómo vamos contra lo proyectado?"</em></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div style="background:#f8fafc;border:1px dashed #94a3b8;border-radius:12px;padding:16px 20px;margin-bottom:32px;font-size:.85rem;color:#475569;">
|
|
<strong>🔧 Para agregar un informe nuevo al bot:</strong> primero debe existir como función/endpoint en PALMAS360,
|
|
luego se registra en el catálogo del bot con su nombre, parámetros y las frases de ejemplo que la IA debe reconocer.
|
|
Sin ese registro previo, el bot no puede entregarlo.
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<!-- ── 8. REQUERIMIENTOS ── -->
|
|
<section id="requerimientos">
|
|
<div class="section-title">
|
|
<div class="icon">📝</div>
|
|
<div>
|
|
<h2>8. Requerimientos Funcionales</h2>
|
|
<p>Listado priorizado de funcionalidades a implementar</p>
|
|
</div>
|
|
</div>
|
|
<div class="tbl-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Módulo</th>
|
|
<th>Requerimiento</th>
|
|
<th>Prioridad</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>RF-01</td>
|
|
<td>Identificación</td>
|
|
<td>Registrar números de WhatsApp por usuario y por empresa en PALMAS360</td>
|
|
<td><span class="badge badge-alta">Alta</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-02</td>
|
|
<td>Routing</td>
|
|
<td>Enrutar automáticamente cada mensaje al tenant correcto según el número remitente</td>
|
|
<td><span class="badge badge-alta">Alta</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-03</td>
|
|
<td>Captura</td>
|
|
<td>Capturar datos por dos vías: (a) menú interactivo con preguntas paso a paso, o (b) texto libre donde el usuario escribe un párrafo de corrido y el bot lo recibe y reenvía al dashboard</td>
|
|
<td><span class="badge badge-alta">Alta</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-04</td>
|
|
<td>IA</td>
|
|
<td>Aplicar IA (LLM) en el dashboard de PALMAS360 para: interpretar y extraer campos de mensajes de texto libre, validar datos estructurados, detectar errores y asistir al supervisor en la aprobación</td>
|
|
<td><span class="badge badge-alta">Alta</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-05</td>
|
|
<td>Validación IA</td>
|
|
<td>Validar datos contra la parametrización del tenant (lotes, ciclos, usuarios, rangos)</td>
|
|
<td><span class="badge badge-alta">Alta</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-06</td>
|
|
<td>Dashboard</td>
|
|
<td>Interfaz de aprobación en PALMAS360 con editor de campos y panel de alertas de IA</td>
|
|
<td><span class="badge badge-alta">Alta</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-07</td>
|
|
<td>Aprobación</td>
|
|
<td>Nada se guarda en el ERP sin aprobación explícita del supervisor</td>
|
|
<td><span class="badge badge-alta">Alta</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-08</td>
|
|
<td>Log</td>
|
|
<td>Sección en PALMAS360 con historial de conversaciones WhatsApp por empresa y número</td>
|
|
<td><span class="badge badge-alta">Alta</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-09</td>
|
|
<td>Notificaciones</td>
|
|
<td>Programar envíos de WhatsApp desde el módulo de tareas de PALMAS360</td>
|
|
<td><span class="badge badge-media">Media</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-10</td>
|
|
<td>Informes</td>
|
|
<td>Procesar solicitudes de informes en lenguaje natural y entregar respuesta por WhatsApp</td>
|
|
<td><span class="badge badge-media">Media</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-11</td>
|
|
<td>Permisos</td>
|
|
<td>Control de acceso por número: qué puede registrar y qué informes puede solicitar</td>
|
|
<td><span class="badge badge-media">Media</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-12</td>
|
|
<td>Confirmaciones</td>
|
|
<td>Enviar confirmación al usuario por WhatsApp cuando su dato sea aprobado o rechazado</td>
|
|
<td><span class="badge badge-media">Media</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-13</td>
|
|
<td>Multi-idioma</td>
|
|
<td>Soporte para mensajes en español colombiano con variantes regionales</td>
|
|
<td><span class="badge badge-baja">Baja</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RF-14</td>
|
|
<td>Multimedia</td>
|
|
<td>Aceptar fotos de tiquetes y extraer datos con OCR + IA</td>
|
|
<td><span class="badge badge-baja">Baja</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<!-- ── 9. FASES ── -->
|
|
<section id="fases">
|
|
<div class="section-title">
|
|
<div class="icon">🚀</div>
|
|
<div>
|
|
<h2>9. Fases de Implementación</h2>
|
|
<p>Plan de desarrollo en etapas priorizadas</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline">
|
|
|
|
<div class="tl-item">
|
|
<div class="tl-left">
|
|
<div class="tl-dot">1</div>
|
|
<div class="tl-line"></div>
|
|
</div>
|
|
<div class="tl-body">
|
|
<span class="tl-tag">FASE 1 · Fundación</span>
|
|
<h4>Integración WhatsApp + Identificación de usuarios</h4>
|
|
<p>Configurar WhatsApp Business API (Meta Cloud API), crear webhook receptor, implementar tabla de números de teléfono por tenant, desarrollar el router multi-tenant y habilitar el log de conversaciones en PALMAS360.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tl-item">
|
|
<div class="tl-left">
|
|
<div class="tl-dot">2</div>
|
|
<div class="tl-line"></div>
|
|
</div>
|
|
<div class="tl-body">
|
|
<span class="tl-tag">FASE 2 · Captura de datos</span>
|
|
<h4>Motor IA de extracción y validación</h4>
|
|
<p>Implementar el motor de conversación del bot: menú interactivo, preguntas guiadas paso a paso y validación básica de formato de respuesta. Definir esquemas de datos para labores diarias, ciclos de cosecha y tiquetes de báscula. Integrar IA (LLM) en el dashboard de PALMAS360 para asistir al supervisor en la aprobación.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tl-item">
|
|
<div class="tl-left">
|
|
<div class="tl-dot">3</div>
|
|
<div class="tl-line"></div>
|
|
</div>
|
|
<div class="tl-body">
|
|
<span class="tl-tag">FASE 3 · Dashboard</span>
|
|
<h4>Interfaz de aprobación supervisada</h4>
|
|
<p>Construir el dashboard dentro de PALMAS360: listado de solicitudes pendientes, vista de detalle con campos editables, panel de alertas y sugerencias de IA, botones de aprobar / rechazar y envío de confirmaciones al usuario.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tl-item">
|
|
<div class="tl-left">
|
|
<div class="tl-dot">4</div>
|
|
<div class="tl-line"></div>
|
|
</div>
|
|
<div class="tl-body">
|
|
<span class="tl-tag">FASE 4 · Notificaciones</span>
|
|
<h4>Planificador de tareas con envío automático</h4>
|
|
<p>Extender el módulo de tareas de PALMAS360 con opción "Notificar por WhatsApp". Implementar scheduler (cron jobs) que dispara mensajes en la fecha/hora programada y registra el estado de envío y confirmación.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tl-item">
|
|
<div class="tl-left">
|
|
<div class="tl-dot">5</div>
|
|
<div class="tl-line"></div>
|
|
</div>
|
|
<div class="tl-body">
|
|
<span class="tl-tag">FASE 5 · Informes</span>
|
|
<h4>Consultas de informes por lenguaje natural</h4>
|
|
<p>Entrenar / prompt-engineer al LLM para reconocer intenciones de tipo "informe". Conectar con los endpoints de reportes existentes en el ERP. Formatear la respuesta en texto estructurado para WhatsApp y gestionar control de acceso por número.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<!-- ── 10. ENTIDADES ── -->
|
|
<section id="entidades">
|
|
<div class="section-title">
|
|
<div class="icon">🗃️</div>
|
|
<div>
|
|
<h2>10. Tablas Nuevas del Módulo Bot</h2>
|
|
<p>Solo se crean 3 tablas nuevas. Las tablas del ERP ya existen y no se modifican</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Banner aclaratorio -->
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px;">
|
|
<div style="background:#e8f5eb;border:1px solid #2aa147;border-radius:12px;padding:18px 20px;">
|
|
<div style="font-weight:800;color:#1a7a2e;font-size:.92rem;margin-bottom:8px;">✅ NUEVO · Se crea en este proyecto</div>
|
|
<ul style="font-size:.85rem;color:#1e293b;line-height:1.9;padding-left:18px;">
|
|
<li><code>wa_usuarios</code> — Números WhatsApp por empresa</li>
|
|
<li><code>wa_log</code> — Historial de conversaciones</li>
|
|
<li><code>wa_solicitudes</code> — Cola de aprobación del dashboard</li>
|
|
</ul>
|
|
</div>
|
|
<div style="background:#f5f7fa;border:1px solid #e2e8f0;border-radius:12px;padding:18px 20px;">
|
|
<div style="font-weight:800;color:#64748b;font-size:.92rem;margin-bottom:8px;">📚 YA EXISTE · Tablas del ERP (no se tocan)</div>
|
|
<ul style="font-size:.85rem;color:#64748b;line-height:1.9;padding-left:18px;">
|
|
<li><code>labores_diarias</code> — Módulo labores</li>
|
|
<li><code>ciclos_cosecha</code> — Módulo cosecha</li>
|
|
<li><code>tiquetes_bascula</code> — Módulo báscula</li>
|
|
<li><em>...resto de tablas del proyecto</em></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram-box">
|
|
<div class="mermaid">
|
|
graph LR
|
|
subgraph NEW[" NUEVAS - Se crean en este proyecto "]
|
|
WU["wa_usuarios"]
|
|
WL["wa_log"]
|
|
WS["wa_solicitudes"]
|
|
end
|
|
subgraph EXIST[" YA EXISTEN - Tablas PALMAS360 ERP "]
|
|
LD["labores_diarias"]
|
|
CC["ciclos_cosecha"]
|
|
TB["tiquetes_bascula"]
|
|
end
|
|
WU -->|genera| WL
|
|
WL -->|origina| WS
|
|
WS -.->|click Guardar| LD
|
|
WS -.->|click Guardar| CC
|
|
WS -.->|click Guardar| TB
|
|
style NEW fill:#e8f5eb,stroke:#2aa147,color:#1e293b
|
|
style EXIST fill:#f1f5f9,stroke:#94a3b8,color:#64748b
|
|
style WU fill:#ffffff,stroke:#2aa147,color:#1e293b
|
|
style WL fill:#ffffff,stroke:#2aa147,color:#1e293b
|
|
style WS fill:#ffffff,stroke:#2aa147,color:#1e293b
|
|
style LD fill:#e2e8f0,stroke:#94a3b8,color:#64748b
|
|
style CC fill:#e2e8f0,stroke:#94a3b8,color:#64748b
|
|
style TB fill:#e2e8f0,stroke:#94a3b8,color:#64748b
|
|
</div>
|
|
<p class="diagram-label">Figura 6 · Solo 3 tablas nuevas (verde). Las tablas del ERP ya existen (gris) y solo reciben el dato cuando el supervisor hace click en Guardar</p>
|
|
</div>
|
|
|
|
<!-- Detalle de columnas por tabla -->
|
|
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px;">
|
|
<div style="background:#fff;border:1px solid #2aa147;border-radius:12px;padding:16px 18px;">
|
|
<div style="font-weight:800;font-size:.85rem;color:#1a7a2e;margin-bottom:10px;">👤 wa_usuarios</div>
|
|
<ul style="font-size:.78rem;color:#475569;padding-left:14px;line-height:1.9;margin:0;">
|
|
<li>telefono <span style="color:#94a3b8;">(PK)</span></li>
|
|
<li>empresa_slug</li>
|
|
<li>nombre</li>
|
|
<li>rol <span style="color:#94a3b8;">(supervisor / trabajador)</span></li>
|
|
<li>activo</li>
|
|
</ul>
|
|
</div>
|
|
<div style="background:#fff;border:1px solid #2aa147;border-radius:12px;padding:16px 18px;">
|
|
<div style="font-weight:800;font-size:.85rem;color:#1a7a2e;margin-bottom:10px;">📝 wa_log</div>
|
|
<ul style="font-size:.78rem;color:#475569;padding-left:14px;line-height:1.9;margin:0;">
|
|
<li>id <span style="color:#94a3b8;">(PK)</span></li>
|
|
<li>telefono_origen</li>
|
|
<li>empresa_slug</li>
|
|
<li>timestamp</li>
|
|
<li>mensaje_raw</li>
|
|
<li>tipo <span style="color:#94a3b8;">(entrada / salida)</span></li>
|
|
<li>estado</li>
|
|
</ul>
|
|
</div>
|
|
<div style="background:#fff;border:1px solid #2aa147;border-radius:12px;padding:16px 18px;">
|
|
<div style="font-weight:800;font-size:.85rem;color:#1a7a2e;margin-bottom:10px;">⏳ wa_solicitudes</div>
|
|
<ul style="font-size:.78rem;color:#475569;padding-left:14px;line-height:1.9;margin:0;">
|
|
<li>id <span style="color:#94a3b8;">(PK)</span></li>
|
|
<li>wa_log_id <span style="color:#94a3b8;">(FK)</span></li>
|
|
<li>tipo <span style="color:#94a3b8;">(labor / cosecha / bascula)</span></li>
|
|
<li>origen <span style="color:#94a3b8;">(menu / texto_libre)</span></li>
|
|
<li>datos_json</li>
|
|
<li>texto_raw</li>
|
|
<li>alertas_ia</li>
|
|
<li>estado <span style="color:#94a3b8;">(pendiente / aprobado / rechazado)</span></li>
|
|
<li>aprobado_por</li>
|
|
<li>fecha_aprobacion</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flujo de handoff -->
|
|
<div style="background:#1e293b;color:#fff;border-radius:14px;padding:24px 28px;margin-top:8px;">
|
|
<div style="font-weight:800;font-size:.95rem;margin-bottom:14px;color:#4ade80;">Flujo completo de datos: de WhatsApp a la BD existente</div>
|
|
<div style="display:flex;align-items:center;flex-wrap:wrap;gap:0;font-size:.82rem;">
|
|
<div style="background:#134e27;border-radius:8px;padding:8px 14px;text-align:center;">📲 Mensaje<br><span style="color:#86efac;font-size:.75rem;">WhatsApp</span></div>
|
|
<div style="color:#4ade80;padding:0 8px;font-size:1.2rem;">→</div>
|
|
<div style="background:#134e27;border-radius:8px;padding:8px 14px;text-align:center;">📋 <code style="font-size:.75rem;color:#86efac;">wa_log</code><br><span style="color:#86efac;font-size:.75rem;">Historial</span></div>
|
|
<div style="color:#4ade80;padding:0 8px;font-size:1.2rem;">→</div>
|
|
<div style="background:#134e27;border-radius:8px;padding:8px 14px;text-align:center;">⏳ <code style="font-size:.75rem;color:#86efac;">wa_solicitudes</code><br><span style="color:#86efac;font-size:.75rem;">Pendiente</span></div>
|
|
<div style="color:#4ade80;padding:0 8px;font-size:1.2rem;">→</div>
|
|
<div style="background:#1e3a5f;border:1px solid #60a5fa;border-radius:8px;padding:8px 14px;text-align:center;">🖥️ Dashboard<br><span style="color:#93c5fd;font-size:.75rem;">IA + Supervisor</span></div>
|
|
<div style="color:#60a5fa;padding:0 8px;font-size:1.2rem;">→</div>
|
|
<div style="background:#3b1764;border:2px solid #a855f7;border-radius:8px;padding:8px 14px;text-align:center;font-weight:700;">✅ Click Guardar<br><span style="color:#d8b4fe;font-size:.75rem;">Límite del requerimiento</span></div>
|
|
<div style="color:#a855f7;padding:0 8px;font-size:1.2rem;">→</div>
|
|
<div style="background:#374151;border:1px dashed #9ca3af;border-radius:8px;padding:8px 14px;text-align:center;opacity:.8;">📚 BD existente<br><span style="color:#d1d5db;font-size:.75rem;">PALMAS360 ERP</span></div>
|
|
</div>
|
|
<div style="margin-top:14px;font-size:.78rem;color:#94a3b8;">
|
|
🟣 Todo lo que está a la <strong style="color:#fff;">derecha del click Guardar</strong> es responsabilidad del cliente / flujo existente del ERP.
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div><!-- /container -->
|
|
|
|
<!-- ════════════════════════════════ BOTÓN PROPUESTA ════════════════════════════════ -->
|
|
<div style="background:linear-gradient(135deg,#0d4f1c,#1a7a2e);padding:48px 32px;text-align:center;">
|
|
<p style="color:rgba(255,255,255,.8);font-size:.95rem;margin-bottom:16px;">Si está de acuerdo con esta estructura y alcance definidos</p>
|
|
<button id="btn-propuesta"
|
|
onclick="document.getElementById('propuesta').style.display=document.getElementById('propuesta').style.display==='none'?'block':'none';this.textContent=this.textContent.includes('Ver')?'✕ Cerrar propuesta':'\ud83d\udcc4 Ver Propuesta Comercial';"
|
|
style="background:#f4b942;color:#1e293b;border:none;border-radius:12px;padding:16px 36px;font-size:1.05rem;font-weight:800;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.25);letter-spacing:.02em;">
|
|
📄 Ver Propuesta Comercial
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ══════════════════════════════ PROPUESTA COMERCIAL ═════════════════════════════ -->
|
|
<div id="propuesta" style="display:none;background:#f5f7fa;">
|
|
|
|
<div style="max-width:960px;margin:0 auto;padding:56px 32px 80px;">
|
|
|
|
<!-- Encabezado -->
|
|
<div style="text-align:center;margin-bottom:48px;">
|
|
<div style="display:inline-flex;align-items:center;gap:10px;background:#e8f5eb;border:1px solid #2aa147;border-radius:20px;padding:6px 18px;font-size:.8rem;font-weight:700;color:#1a7a2e;margin-bottom:16px;">
|
|
🌴 PALMAS360 · Propuesta Comercial
|
|
</div>
|
|
<h2 style="font-size:2rem;font-weight:800;color:#1e293b;margin-bottom:8px;">Módulo Bot WhatsApp + IA</h2>
|
|
<p style="color:#64748b;font-size:.95rem;">Fecha: 25 de mayo de 2026 · Válida hasta el <strong style="color:#b91c1c;">31 de mayo de 2026</strong></p>
|
|
</div>
|
|
|
|
<!-- Alcances incluidos -->
|
|
<div style="background:#fff;border-radius:16px;padding:28px 32px;box-shadow:0 4px 24px rgba(0,0,0,.07);border:1px solid #e2e8f0;margin-bottom:24px;">
|
|
<h3 style="font-size:1.1rem;font-weight:800;color:#1a7a2e;margin-bottom:18px;">✅ Alcances Incluidos</h3>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:.875rem;">
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span>Integración con <strong>WhatsApp Business API</strong> (Meta Cloud API) para recibir y enviar mensajes</span></div>
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span>Router multi-tenant: identificación automática de la empresa por número de teléfono (~30 empresas)</span></div>
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span>Bot con <strong>menú interactivo</strong> y captura guiada paso a paso (Labor Diaria, Ciclo de Cosecha, Tiquete de Báscula)</span></div>
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span>Recepción de <strong>texto libre</strong>: el usuario escribe un párrafo y la IA lo interpreta en el dashboard</span></div>
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span><strong>Dashboard de aprobación</strong> en PALMAS360: editor de campos, panel IA, aprobar / rechazar</span></div>
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span>Validación IA: lotes duplicados, campos faltantes, valores fuera de rango, ciclos inactivos</span></div>
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span><strong>Notificaciones programadas</strong>: tareas creadas en PALMAS360 se envían automáticamente por WhatsApp</span></div>
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span>Log de conversaciones WhatsApp visible en PALMAS360 por empresa y por número</span></div>
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span>Creación de <strong>3 tablas nuevas</strong> en la BD existente: <code>wa_usuarios</code>, <code>wa_log</code>, <code>wa_solicitudes</code></span></div>
|
|
<div style="display:flex;gap:10px;align-items:flex-start;"><span style="color:#2aa147;font-size:1rem;flex-shrink:0;">✓</span><span>Confirmaciones al usuario por WhatsApp cuando su registro sea aprobado o rechazado</span></div>
|
|
</div>
|
|
<!-- Informes -->
|
|
<div style="margin-top:18px;padding-top:18px;border-top:1px solid #e2e8f0;">
|
|
<div style="font-weight:700;font-size:.88rem;margin-bottom:10px;color:#1e293b;">📊 Consulta de informes por WhatsApp — hasta <strong style="color:#1a7a2e;">5 informes pre-existentes</strong> en PALMAS360:</div>
|
|
<div style="display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem;">
|
|
<span style="background:#e8f5eb;color:#1a7a2e;border-radius:20px;padding:4px 12px;">1. Producción diaria / semanal</span>
|
|
<span style="background:#e8f5eb;color:#1a7a2e;border-radius:20px;padding:4px 12px;">2. Labores por trabajador</span>
|
|
<span style="background:#e8f5eb;color:#1a7a2e;border-radius:20px;padding:4px 12px;">3. Tiquetes de báscula</span>
|
|
<span style="background:#e8f5eb;color:#1a7a2e;border-radius:20px;padding:4px 12px;">4. Rendimientos de cosecha</span>
|
|
<span style="background:#e8f5eb;color:#1a7a2e;border-radius:20px;padding:4px 12px;">5. A definir con el cliente</span>
|
|
</div>
|
|
<p style="font-size:.78rem;color:#94a3b8;margin-top:8px;">El informe debe existir previamente en PALMAS360. Informes adicionales incrementan el valor.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Requisitos del cliente -->
|
|
<div style="background:#fff;border-radius:16px;padding:28px 32px;box-shadow:0 4px 24px rgba(0,0,0,.07);border:1px solid #e2e8f0;margin-bottom:24px;">
|
|
<h3 style="font-size:1.1rem;font-weight:800;color:#92400e;margin-bottom:18px;">⚠️ Requisitos a cargo del Cliente</h3>
|
|
<div style="display:flex;flex-direction:column;gap:12px;font-size:.875rem;">
|
|
<div style="display:flex;gap:12px;align-items:flex-start;background:#fff7ed;border-radius:10px;padding:12px 14px;">
|
|
<span style="font-size:1.2rem;">📲</span>
|
|
<div><strong>WhatsApp Manager activo + App de Facebook funcionando</strong><br><span style="color:#64748b;">El cliente debe tener configurada su cuenta de Meta Business con un número de teléfono aprobado para WhatsApp Business API.</span></div>
|
|
</div>
|
|
<div style="display:flex;gap:12px;align-items:flex-start;background:#fff7ed;border-radius:10px;padding:12px 14px;">
|
|
<span style="font-size:1.2rem;">🔗</span>
|
|
<div><strong>Reapuntar webhook a la URL proporcionada</strong><br><span style="color:#64748b;">El cliente debe configurar en Meta Developer Console el webhook de WhatsApp hacia la URL que le suministremos. Esto requiere acceso de administrador a la app de Meta.</span></div>
|
|
</div>
|
|
<div style="display:flex;gap:12px;align-items:flex-start;background:#fff7ed;border-radius:10px;padding:12px 14px;">
|
|
<span style="font-size:1.2rem;">🤖</span>
|
|
<div><strong>API Key de una IA (OpenAI, Gemini, Anthropic, etc.)</strong><br><span style="color:#64748b;">El cliente elige y contrata su proveedor de IA. La calidad de la interpretación de mensajes y la clasificación de los eventos depende directamente del modelo y plan elegido. Nosotros configuramos la integración.</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Condiciones comerciales -->
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;">
|
|
|
|
<!-- Valor -->
|
|
<div style="background:#fff;border-radius:16px;padding:28px;box-shadow:0 4px 24px rgba(0,0,0,.07);border:1px solid #e2e8f0;">
|
|
<h3 style="font-size:1rem;font-weight:800;color:#1e293b;margin-bottom:16px;">💰 Valor del Proyecto</h3>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f1f5f9;font-size:.875rem;">
|
|
<span style="color:#64748b;">Valor base</span>
|
|
<span style="font-weight:600;text-decoration:line-through;color:#94a3b8;">$13.800.000</span>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f1f5f9;font-size:.875rem;">
|
|
<span style="color:#64748b;">Descuento partner (50%)</span>
|
|
<span style="font-weight:600;color:#b91c1c;">− $6.900.000</span>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:14px 0 0;">
|
|
<span style="font-weight:800;font-size:1rem;">Valor final</span>
|
|
<span style="font-weight:800;font-size:1.4rem;color:#1a7a2e;">$6.900.000</span>
|
|
</div>
|
|
<div style="margin-top:16px;padding-top:16px;border-top:1px solid #f1f5f9;font-size:.825rem;">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
|
<span style="color:#64748b;">50% Anticipo (inicio)</span>
|
|
<span style="font-weight:700;">$3.450.000</span>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;">
|
|
<span style="color:#64748b;">50% Al finalizar (aprobación cliente)</span>
|
|
<span style="font-weight:700;">$3.450.000</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cronograma -->
|
|
<div style="background:#fff;border-radius:16px;padding:28px;box-shadow:0 4px 24px rgba(0,0,0,.07);border:1px solid #e2e8f0;">
|
|
<h3 style="font-size:1rem;font-weight:800;color:#1e293b;margin-bottom:16px;">📅 Ejecución</h3>
|
|
<div style="display:flex;flex-direction:column;gap:10px;font-size:.855rem;">
|
|
<div style="display:flex;gap:10px;"><span style="color:#2aa147;">●</span><span><strong>Duración:</strong> 30 días calendario</span></div>
|
|
<div style="display:flex;gap:10px;"><span style="color:#2aa147;">●</span><span><strong>Inicio:</strong> cualquier lunes, una vez recibida la orden de servicio y el 50% de anticipo</span></div>
|
|
<div style="display:flex;gap:10px;"><span style="color:#2aa147;">●</span><span><strong>Avances:</strong> entrega semanal por fases</span></div>
|
|
<div style="display:flex;gap:10px;"><span style="color:#2aa147;">●</span><span><strong>Cierre:</strong> el proyecto finaliza una vez el cliente revise y apruebe</span></div>
|
|
<div style="display:flex;gap:10px;"><span style="color:#2aa147;">●</span><span><strong>Garantía:</strong> 30 días post-producción</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Advertencias -->
|
|
<div style="background:#fef2f2;border:1px solid #fca5a5;border-radius:12px;padding:16px 20px;font-size:.855rem;color:#7f1d1d;margin-bottom:32px;">
|
|
<strong>⚠️ Condiciones importantes:</strong>
|
|
<ul style="margin-top:8px;padding-left:18px;line-height:2;">
|
|
<li>Si el alcance cambia durante la ejecución, <strong>el precio y el cronograma se ajustan</strong> antes de continuar.</li>
|
|
<li>El proyecto <strong>no inicia</strong> sin la orden de servicio firmada y el 50% de anticipo recibido.</li>
|
|
<li>El saldo del 50% se factura una vez el cliente aprueba el entregable final.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Botón cerrar -->
|
|
<div style="text-align:center;">
|
|
<button onclick="document.getElementById('propuesta').style.display='none';document.getElementById('btn-propuesta').textContent='\ud83d\udcc4 Ver Propuesta Comercial';window.scrollTo({top:document.getElementById('btn-propuesta').offsetTop-40,behavior:'smooth'});"
|
|
style="background:#e2e8f0;color:#1e293b;border:none;border-radius:10px;padding:12px 28px;font-size:.9rem;font-weight:700;cursor:pointer;">
|
|
✕ Cerrar propuesta
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- ═══════════════════════════════ FOOTER ════════════════════════════════ -->
|
|
<footer>
|
|
<strong>PALMAS360</strong> · ERP para Palmicultura · Módulo Bot WhatsApp + IA | Documento generado el 25 de mayo de 2026
|
|
</footer>
|
|
|
|
<script>
|
|
mermaid.initialize({
|
|
startOnLoad: true,
|
|
theme: 'base',
|
|
themeVariables: {
|
|
primaryColor: '#e8f5eb',
|
|
primaryTextColor: '#1e293b',
|
|
primaryBorderColor: '#2aa147',
|
|
lineColor: '#2aa147',
|
|
secondaryColor: '#e3f2fd',
|
|
tertiaryColor: '#fff3e0',
|
|
fontFamily: "'Segoe UI', system-ui, sans-serif",
|
|
fontSize: '14px'
|
|
},
|
|
flowchart: { curve: 'basis', padding: 20 },
|
|
sequence: { actorMargin: 80, messageMargin: 35 },
|
|
er: { useMaxWidth: true }
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|