WhatsApp CRM Funcional

Mi WhatsApp CRM

Estado: Esperando conexión…

Cargando el motor…

Nuevos Mensajes (Llegan en vivo)

En Proceso (Armando Pedido)

Despachados / Finalizados

Nosotros

Nosotros – Servicio EV Bajío

Ingeniería con Respaldo Global

Laboratorio especializado en movilidad electrificada. Precisión técnica, seguridad absoluta y transparencia para tu vehículo híbrido o eléctrico.

Nuestra Misión

Ser la opción segura, confiable y especializada para prolongar y mejorar la vida útil de tu vehículo, garantizando que su tecnología opere con la máxima eficiencia.

De pioneros locales a
referentes regionales.

Nuestra historia en el Bajío comenzó en 2024 en Celaya, Guanajuato. En un momento donde pocos entendían la tecnología de Alto Voltaje, nacimos atendiendo y reparando sistemas complejos para un mercado local que demandaba soluciones reales y seguras.

Con el avance de la electromovilidad, hemos evolucionado. Hoy, Servicio EV Bajío abre sus puertas como un centro de ingeniería 100% multimarca, equipado para dar servicio a nivel regional a toda la gama de vehículos Híbridos (HEV/PHEV) y 100% Eléctricos (BEV).

Laboratorio EV Bajío

Capacitación de Nivel Internacional

La tecnología avanzada no se improvisa. Para garantizar diagnósticos precisos, nuestro equipo se forma en la cuna de la electromovilidad.

🇨🇳

Capacitación en China

Nos hemos capacitado directamente en las plantas de manufactura en China. Conocemos la arquitectura de celdas, inversores y motores eléctricos desde su proceso de ensamblaje en el epicentro tecnológico mundial.

📜

Certificaciones Activas

No somos mecánicos tradicionales experimentando. Mantenemos certificaciones internacionales activas, enfocadas al 100% en protocolos de seguridad y diagnóstico de vehículos eléctricos e híbridos.

Dominio de Variantes

Ya sea un Híbrido convencional, un Plug-In o un 100% Eléctrico, comprendemos las diferencias críticas de cada plataforma, asegurando intervenciones precisas sin arriesgar la garantía ni la seguridad del auto.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsApp CRM Funcional</title>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        body { font-family: 'Segoe UI', Tahoma, sans-serif; background-color: #f0f2f5; margin: 0; padding: 20px; color: #333; }
        header { display: flex; justify-content: space-between; align-items: center; background-color: #075e54; color: white; padding: 15px 25px; border-radius: 8px; margin-bottom: 20px; }
        .qr-section { background: white; padding: 15px; border-radius: 8px; text-align: center; color: black; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .qr-placeholder { min-width: 150px; min-height: 150px; background-color: #e0e0e0; border: 2px dashed #999; margin: 10px auto; display: flex; align-items: center; justify-content: center; }
        .board { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px; }
        .column { background-color: #e4e6eb; min-width: 300px; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; gap: 10px; min-height: 400px; }
        .column h3 { margin-top: 0; font-size: 16px; color: #054c44; border-bottom: 2px solid #25d366; padding-bottom: 5px; }
        .card { background-color: white; padding: 15px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: grab; border-left: 4px solid #25d366; }
        .card:active { cursor: grabbing; }
        .card-title { font-weight: bold; margin-bottom: 5px; color: #075e54; }
        .card-msg { font-size: 14px; color: #666; }
    </style>
</head>
<body>

    <header>
        <h2>Mi WhatsApp CRM</h2>
        <div class="qr-section">
            <p style="margin: 0; font-size: 14px;"><strong>Estado:</strong> Esperando conexión...</p>
            <div class="qr-placeholder" id="qr-container">
                Cargando el motor...
            </div>
        </div>
    </header>

    <div class="board">
        <div class="column" id="nuevos" ondrop="drop(event)" ondragover="allowDrop(event)">
            <h3>Nuevos Mensajes (Llegan en vivo)</h3>
        </div>
        <div class="column" id="proceso" ondrop="drop(event)" ondragover="allowDrop(event)">
            <h3>En Proceso (Armando Pedido)</h3>
        </div>
        <div class="column" id="despachados" ondrop="drop(event)" ondragover="allowDrop(event)">
            <h3>Despachados / Finalizados</h3>
        </div>
    </div>

    <script>
        // Conexión con el servidor
        const socket = io();
        const qrContainer = document.getElementById('qr-container');
        const boardNuevos = document.getElementById('nuevos');

        // Mostrar el código QR
        socket.on('qr', (url) => {
            qrContainer.innerHTML = `<img src="${url}" alt="QR de WhatsApp" style="width: 150px; height: 150px;">`;
        });

        // Mensaje de éxito al vincular
        socket.on('ready', (msg) => {
            qrContainer.innerHTML = `<span style="color: #075e54; font-weight: bold; font-size: 18px;">${msg}</span>`;
        });

        // Crear una tarjeta nueva cuando llega un mensaje de WhatsApp
        socket.on('message', (data) => {
            const card = document.createElement('div');
            card.className = 'card';
            card.draggable = true;
            card.id = 'msg-' + Date.now(); // ID único para arrastrar
            card.ondragstart = drag;
            card.innerHTML = `
                <div class="card-title">${data.from}</div>
                <div class="card-msg">${data.body}</div>
            `;
            boardNuevos.appendChild(card);
        });

        // Funciones Drag & Drop (Arrastrar y Soltar)
        function allowDrop(ev) { ev.preventDefault(); }
        function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var draggedElement = document.getElementById(data);
            if (ev.target.classList.contains('column')) {
                ev.target.appendChild(draggedElement);
            } else if (ev.target.closest('.column')) {
                ev.target.closest('.column').appendChild(draggedElement);
            }
        }
    </script>
</body>
</html>