| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>SEROJA OS - Sistema de Gestión de Setas con IA</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/htmx.org@1.9.6"></script> |
| <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <script src="https://kit.fontawesome.com/a2e0b60d6f.js" crossorigin="anonymous"></script> |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .sidebar-link { |
| @apply flex items-center p-3 rounded-lg text-gray-700 hover:bg-green-100 transition-all duration-200 cursor-pointer; |
| } |
| .sidebar-link.active { |
| @apply bg-emerald-600 text-white font-medium; |
| } |
| .btn-primary { |
| @apply bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg transition font-medium; |
| } |
| .card { |
| @apply bg-white shadow-md border border-gray-100 p-5 rounded-lg; |
| } |
| .input-field { |
| @apply border border-gray-300 rounded-lg px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-emerald-500; |
| } |
| .tab { |
| @apply px-4 py-2 text-sm font-medium text-gray-600 border-b-2 border-transparent cursor-pointer hover:text-emerald-600 transition; |
| } |
| .tab.active { |
| @apply text-emerald-600 border-emerald-600 border-b-2; |
| } |
| .badge { |
| @apply text-xs px-2 py-1 rounded-full font-medium; |
| } |
| .badge.success { |
| @apply bg-green-100 text-green-800; |
| } |
| .badge.warning { |
| @apply bg-yellow-100 text-yellow-800; |
| } |
| .badge.danger { |
| @apply bg-red-100 text-red-800; |
| } |
| .timeline-item { |
| @apply relative pl-8 pb-6 border-l-2 border-gray-200 last:border-l-0 last:pb-0; |
| } |
| .timeline-icon { |
| @apply absolute left-[-10px] top-0 w-5 h-5 rounded-full bg-emerald-500 flex items-center justify-center text-white text-xs; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
|
|
| <div x-data="{ sidebarOpen: true, currentTab: 'dashboard', user: 'Claude - Product Owner' }" class="flex h-screen overflow-hidden"> |
|
|
| |
| <div :class="sidebarOpen ? 'w-64' : 'w-16'" class="bg-white shadow-lg transition-all duration-300 flex-shrink-0 border-r border-gray-200"> |
| <div class="p-4 flex items-center justify-between"> |
| <div x-show="sidebarOpen" class="font-bold text-xl text-emerald-700 flex items-center gap-2"> |
| <i class="fas fa-leaf text-emerald-600"></i> |
| <span>SEROJA OS</span> |
| </div> |
| <button @click="sidebarOpen = !sidebarOpen" class="text-gray-500 hover:text-emerald-600"> |
| <i :class="sidebarOpen ? 'fa-chevron-left' : 'fa-chevron-right'" class="fas text-sm"></i> |
| </button> |
| </div> |
|
|
| <nav class="mt-6 px-2 space-y-1"> |
| <a href="#" @click="currentTab = 'dashboard'" class="sidebar-link" :class="currentTab === 'dashboard' ? 'active' : ''"> |
| <i class="fas fa-tachometer-alt mr-3"></i> |
| <span x-show="sidebarOpen">Dashboard</span> |
| </a> |
| <a href="#" @click="currentTab = 'operaciones'" class="sidebar-link" :class="currentTab === 'operaciones' ? 'active' : ''"> |
| <i class="fas fa-truck-loading mr-3"></i> |
| <span x-show="sidebarOpen">Operaciones</span> |
| </a> |
| <a href="#" @click="currentTab = 'recolectores'" class="sidebar-link" :class="currentTab === 'recolectores' ? 'active' : ''"> |
| <i class="fas fa-user-friends mr-3"></i> |
| <span x-show="sidebarOpen">Recolectores</span> |
| </a> |
| <a href="#" @click="currentTab = 'entradas'" class="sidebar-link" :class="currentTab === 'entradas' ? 'active' : ''"> |
| <i class="fas fa-calendar-day mr-3"></i> |
| <span x-show="sidebarOpen">Entradas Diarias</span> |
| </a> |
| <a href="#" @click="currentTab = 'fabrica'" class="sidebar-link" :class="currentTab === 'fabrica' ? 'active' : ''"> |
| <i class="fas fa-industry mr-3"></i> |
| <span x-show="sidebarOpen">Fábrica</span> |
| </a> |
| <a href="#" @click="currentTab = 'ia'" class="sidebar-link" :class="currentTab === 'ia' ? 'active' : ''"> |
| <i class="fas fa-brain mr-3"></i> |
| <span x-show="sidebarOpen">IA & Memoria</span> |
| </a> |
| <a href="#" @click="currentTab = 'config'" class="sidebar-link" :class="currentTab === 'config' ? 'active' : ''"> |
| <i class="fas fa-cog mr-3"></i> |
| <span x-show="sidebarOpen">Configuración</span> |
| </a> |
| </nav> |
| </div> |
|
|
| |
| <div class="flex-1 flex flex-col overflow-hidden"> |
| |
| <header class="bg-white shadow-sm border-b border-gray-200 px-6 py-4 flex justify-between items-center"> |
| <h1 class="text-xl font-semibold text-gray-800" x-text="currentTab === 'dashboard' ? 'Resumen Ejecutivo' : |
| currentTab === 'operaciones' ? 'Operaciones - Punto de Recogida' : |
| currentTab === 'recolectores' ? 'CRM de Recolectores Particulares' : |
| currentTab === 'entradas' ? 'Entradas Diarias y Trazabilidad' : |
| currentTab === 'fabrica' ? 'Fábrica - Recepción de Materias Primas' : |
| currentTab === 'ia' ? 'IA & Memoria: Milvus + Papr.ai' : |
| 'Configuración del Sistema'"></h1> |
| <div class="flex items-center gap-4"> |
| <div class="relative"> |
| <input type="text" placeholder="Buscar..." class="input-field w-64 text-sm" /> |
| </div> |
| <div class="flex items-center gap-2"> |
| <i class="fas fa-user-circle text-2xl text-gray-600"></i> |
| <span class="text-sm font-medium" x-text="user"></span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
| |
| <div x-show="currentTab === 'dashboard'" x-cloak> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| <div class="card flex flex-col items-center text-center p-6"> |
| <div class="text-4xl text-emerald-600 mb-2"><i class="fas fa-truck-loading"></i></div> |
| <h3 class="font-semibold text-gray-700">Entradas Hoy</h3> |
| <p class="text-3xl font-bold text-emerald-600 mt-2">12</p> |
| <p class="text-sm text-gray-500 mt-1">+3 vs ayer</p> |
| </div> |
| <div class="card flex flex-col items-center text-center p-6"> |
| <div class="text-4xl text-blue-600 mb-2"><i class="fas fa-users"></i></div> |
| <h3 class="font-semibold text-gray-700">Recolectores Activos</h3> |
| <p class="text-3xl font-bold text-blue-600 mt-2">27</p> |
| </div> |
| <div class="card flex flex-col items-center text-center p-6"> |
| <div class="text-4xl text-orange-600 mb-2"><i class="fas fa-boxes"></i></div> |
| <h3 class="font-semibold text-gray-700">Kg Recibidos</h3> |
| <p class="text-3xl font-bold text-orange-600 mt-2">1,240</p> |
| </div> |
| <div class="card flex flex-col items-center text-center p-6"> |
| <div class="text-4xl text-purple-600 mb-2"><i class="fas fa-file-pdf"></i></div> |
| <h3 class="font-semibold text-gray-700">PDFs Generados</h3> |
| <p class="text-3xl font-bold text-purple-600 mt-2">12</p> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| <div class="lg:col-span-2"> |
| <div class="card"> |
| <h2 class="text-lg font-semibold mb-4">Flujo de Datos IA + Memoria</h2> |
| <div class="bg-gray-900 text-green-400 p-4 rounded-lg text-sm font-mono overflow-x-auto"> |
| <pre> |
| ┌──────────────────────┐ |
| │ OCR / Voz / Manual │ |
| └──────────┬───────────┘ |
| ↓ |
| ┌────────────────┐ |
| │ SEROJA AI │ |
| │ (Validación) │ |
| └────────┬───────┘ |
| ↓ |
| ┌────────────────┐ |
| │ PostgreSQL │ ←──────┐ |
| │ (Verdad Transaccional) │ |
| └────────┬───────┘ │ |
| ↓ │ |
| ┌────────────────┐ │ |
| │ Milvus │ ◄──────┘ |
| │ (Embeddings) │ |
| └────────┬───────┘ |
| ↓ |
| ┌────────────────┐ |
| │ Papr.ai │ |
| │ (Knowledge Graph, Chat Memory) |
| └────────────────┘ |
| </pre> |
| </div> |
| </div> |
| </div> |
| <div> |
| <div class="card"> |
| <h2 class="text-lg font-semibold mb-4">IA Status</h2> |
| <ul class="space-y-3"> |
| <li class="flex justify-between"> |
| <span>OCR Pipeline</span> |
| <span class="badge success">Activo</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Voz a Texto</span> |
| <span class="badge success">Activo</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Papr.ai Sync</span> |
| <span class="badge warning">En cola</span> |
| </li> |
| <li class="flex justify-between"> |
| <span>Milvus Index</span> |
| <span class="badge success">OK</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div x-show="currentTab === 'operaciones'" x-cloak> |
| <div class="card mb-6"> |
| <h2 class="text-xl font-semibold mb-4">Nueva Entrada - Formulario</h2> |
| <form hx-post="/api/entradas" hx-target="#result" class="space-y-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Fecha y Hora</label> |
| <input type="datetime-local" class="input-field" required /> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Recolector</label> |
| <select class="input-field"> |
| <option>SP-01 - Juan García</option> |
| <option>SP-02 - Marta López</option> |
| <option>SP-03 - Carlos Ruiz</option> |
| </select> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Especie</label> |
| <select class="input-field"> |
| <option>Boletus edulis</option> |
| <option>Amanita caesarea (Huevo de Rey)</option> |
| <option>Cantharellus cibarius</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Categoría</label> |
| <select class="input-field"> |
| <option>1ª</option> |
| <option>2ª</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Humedad (%)</label> |
| <input type="number" class="input-field" placeholder="75" /> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Peso Neto (kg)</label> |
| <input type="number" class="input-field" step="0.01" required /> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Limpieza</label> |
| <select class="input-field"> |
| <option>Excelente</option> |
| <option>Buena</option> |
| <option>Regular</option> |
| </select> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Observaciones</label> |
| <textarea class="input-field" rows="3"></textarea> |
| </div> |
| <div class="flex gap-2"> |
| <button type="submit" class="btn-primary">Registrar Entrada</button> |
| <button type="button" class="btn-primary bg-gray-600 hover:bg-gray-700">Reset</button> |
| </div> |
| </form> |
| </div> |
|
|
| <div class="card"> |
| <h2 class="text-lg font-semibold mb-4">Últimas Entradas</h2> |
| <div class="overflow-x-auto"> |
| <table class="w-full text-sm"> |
| <thead> |
| <tr class="text-left text-gray-600 border-b"> |
| <th class="pb-2">Nº Entrada</th> |
| <th>Fecha</th> |
| <th>Recolector</th> |
| <th>Especie</th> |
| <th>Kg</th> |
| <th>Lote</th> |
| <th>Acciones</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="py-2">ENT-20240405-001</td> |
| <td>05/04/2024 10:30</td> |
| <td>SP-01</td> |
| <td>Boletus</td> |
| <td>12.5</td> |
| <td>20240405-BOL</td> |
| <td> |
| <button class="text-emerald-600 hover:underline text-xs">PDF</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div x-show="currentTab === 'recolectores'" x-cloak> |
| <div class="card mb-6 flex justify-between items-center"> |
| <h2 class="text-xl font-semibold">CRM de Recolectores Particulares</h2> |
| <button class="btn-primary">+ Nuevo Recolector</button> |
| </div> |
| <div class="card"> |
| <div class="overflow-x-auto"> |
| <table class="w-full text-sm"> |
| <thead> |
| <tr class="text-left text-gray-600 border-b"> |
| <th class="pb-2">ID ERP</th> |
| <th>Nombre</th> |
| <th>Contacto</th> |
| <th>Entregas Totales (kg)</th> |
| <th>Última Entrega</th> |
| <th>Estado</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="py-2">SP-01</td> |
| <td>Juan García</td> |
| <td>600 123 456</td> |
| <td>240.5</td> |
| <td>05/04/2024</td> |
| <td><span class="badge success">Activo</span></td> |
| </tr> |
| <tr class="border-b hover:bg-gray-50"> |
| <td class="py-2">SP-02</td> |
| <td>Marta López</td> |
| <td>611 234 567</td> |
| <td>180.0</td> |
| <td>04/04/2024</td> |
| <td><span class="badge success">Activo</span></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div x-show="currentTab === 'entradas'" x-cloak> |
| <div class="card mb-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-semibold">Entradas Diarias - 05/04/2024</h2> |
| <button class="btn-primary">Generar Albarán PDF</button> |
| </div> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| <div class="lg:col-span-2"> |
| <div class="bg-white border border-gray-200 rounded-lg overflow-hidden"> |
| <div class="border-b px-4 py-3 bg-gray-50 font-medium">Lotes de Entrada</div> |
| <div class="p-4 space-y-6"> |
| <div> |
| <div class="font-medium text-gray-800 mb-2">Lote: 20240405-BOL (Boletus)</div> |
| <div class="ml-4 space-y-3"> |
| <div class="timeline-item"> |
| <div class="timeline-icon">1</div> |
| <div> |
| <div class="font-medium">Sublote: 20240405-JG</div> |
| <div class="text-sm text-gray-600">SP-01 - 12.5 kg (1ª)</div> |
| </div> |
| </div> |
| <div class="timeline-item"> |
| <div class="timeline-icon">2</div> |
| <div> |
| <div class="font-medium">Sublote: 20240405-ML</div> |
| <div class="text-sm text-gray-600">SP-02 - 8.0 kg (1ª)</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <div class="card"> |
| <h3 class="font-semibold mb-3">Totales del Día</h3> |
| <ul class="space-y-2 text-sm"> |
| <li class="flex justify-between"><span>Boletus 1ª:</span> <span class="font-medium">20.5 kg</span></li> |
| <li class="flex justify-between"><span>Boletus 2ª:</span> <span class="font-medium">5.0 kg</span></li> |
| <li class="flex justify-between"><span>Huevo de Rey:</span> <span class="font-medium">12.0 kg</span></li> |
| <li class="border-t pt-2 flex justify-between font-bold"><span>Total:</span> <span>37.5 kg</span></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div x-show="currentTab === 'fabrica'" x-cloak> |
| <div class="card mb-6"> |
| <h2 class="text-xl font-semibold mb-4">Recepción de Materias Primas</h2> |
| <div class="space-y-4"> |
| <div class="p-4 border border-gray-200 rounded-lg"> |
| <div class="font-medium text-gray-800">Proveedor: PUNTO DE RECOGIDA SETAEX</div> |
| <div class="text-sm text-gray-600">Transferido automáticamente del día anterior</div> |
| <div class="mt-2 text-xs text-gray-500">Lotes: 20240405-BOL, 20240405-HR</div> |
| </div> |
| <div class="p-4 border border-gray-200 rounded-lg"> |
| <div class="font-medium text-gray-800">Proveedor: Autónomo REGP - A12345678</div> |
| <div class="text-sm text-gray-600">Entrada manual registrada a las 09:15</div> |
| <div class="mt-2 text-xs text-gray-500">Lote: 20240405-REGP01 - 15.0 kg Boletus</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div x-show="currentTab === 'ia'" x-cloak> |
| <div class="card"> |
| <h2 class="text-xl font-semibold mb-4">Arquitectura de IA y Memoria</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="p-4 bg-gray-900 text-green-400 rounded-lg font-mono text-xs"> |
| <pre> |
| Milvus (Self-Hosted) |
| ├── Embeddings: Facturas OCR |
| ├── Embeddings: Historial Precios |
| ├── Embeddings: Documentos Lotes |
| └── RAG: Búsqueda por similitud |
| </pre> |
| </div> |
| <div class="p-4 bg-gray-900 text-blue-400 rounded-lg font-mono text-xs"> |
| <pre> |
| Papr.ai (Managed) |
| ├── Document Intelligence → PDFs |
| ├── Chat Memory → Sesiones IA |
| ├── Knowledge Graphs → Recolectores↔Precios |
| └── Graph-Aware Retrieval |
| </pre> |
| </div> |
| </div> |
| <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg"> |
| <h3 class="font-medium text-blue-800">Reglas de Extracción OCR</h3> |
| <ul class="text-sm text-blue-700 mt-2 space-y-1"> |
| <li>• <strong>confidence_score:</strong> 0-1</li> |
| <li>• <strong>fields_extracted:</strong> JSON estructurado</li> |
| <li>• <strong>missing_fields:</strong> Lista de campos faltantes</li> |
| <li>• <strong>warnings:</strong> Lista de alertas</li> |
| <li>• <strong>suggested_actions:</strong> Sugerencias</li> |
| <li>• <strong>needs_human_review:</strong> boolean</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div x-show="currentTab === 'config'" x-cloak> |
| <div class="card"> |
| <h2 class="text-xl font-semibold mb-4">Configuración del Sistema</h2> |
| <div class="space-y-4"> |
| <div class="p-4 border border-gray-200 rounded-lg"> |
| <h3 class="font-medium">Reglas de Loteado</h3> |
| <table class="w-full text-sm mt-2"> |
| <tr><td class="py-1 w-40">Nº Entrada:</td><td>ENT-YYYYMMDD-XXX</td></tr> |
| <tr><td>Lote:</td><td>YYYYMMDD-PROD</td></tr> |
| <tr><td>Sublote:</td><td>YYYYMMDD-I</td></tr> |
| </table> |
| </div> |
| <div class="p-4 border border-gray-200 rounded-lg"> |
| <h3 class="font-medium">Permisos por Rol</h3> |
| <div class="grid grid-cols-2 gap-4 text-sm"> |
| <div><strong>Admin:</strong> Todo</div> |
| <div><strong>Operaciones:</strong> Entradas, CRM</div> |
| <div><strong>Fábrica:</strong> Recepciones</div> |
| <div><strong>Auditoría:</strong> Solo lectura</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| console.log("SEROJA OS - Sistema de Gestión con IA y Trazabilidad"); |
| }); |
| </script> |
| </body> |
| </html> |
