Editor de Planos de Piso

El editor de planos de piso es la herramienta que te permite dibujar el mapa visual de tu restaurante, cafetería, bar o cualquier espacio donde recibas clientes. A partir del refactor de sucursales, cada sucursal tiene su propio floor plan independiente: el plano que diseñas en una sucursal no afecta a las demás, y el socket que actualiza los estados de mesa en tiempo real filtra los eventos por sucursal_id.

Esta guía te lleva de la mano para que puedas diseñar el plano de cada sucursal, aunque nunca hayas usado una computadora para dibujar.

---

Antes de empezar

Antes de abrir el editor de planos, prepara lo siguiente:

1. Un croquis físico de tu local: Toma una hoja de papel y dibuja la forma de tu restaurante. Marca dónde están las paredes, puertas, ventanas y, sobre todo, dónde están las mesas. Anota el número de cada mesa.

2. Las medidas aproximadas: No necesitas medidas exactas en metros, pero sí una idea de las proporciones. Por ejemplo: “El salón principal es rectangular, aproximadamente el doble de largo que de ancho”.

3. Lista de todas tus mesas por sucursal: Haz una lista de cada mesa de cada sucursal con su:

   • Número (M1, M2, M3…)
   • Forma (redonda, cuadrada, rectangular)
   • Capacidad (cuántas personas caben)
   • Ubicación (en qué zona está: salón, terraza, barra, etc.)

4. Saber cuántas sucursales tienes y cuál vas a diseñar: Cada sucursal necesita su propio plano. Identifica para cuál sucursal vas a diseñar antes de empezar. Si tienes 3 sucursales, deberás repetir el proceso 3 veces, una por cada sucursal.

5. Sucursal activa seleccionada en el encabezado: El selector de sucursal del encabezado (gestionado por useManagerBranch) determina qué floor plan estás editando. Asegúrate de tener la sucursal correcta seleccionada antes de empezar.

6. Tiempo suficiente: Diseñar un plano completo toma entre 30 minutos y 2 horas, dependiendo de qué tan grande sea tu local. No lo hagas con prisa ni en horario de atención al público.

---

Paso a paso detallado

Paso 1: Acceder al editor de planos y seleccionar la sucursal

1. Ingresa a tu panel de administración de Emelit Express.
2. En la barra lateral izquierda, busca y haz clic en Mesas.
3. Verifica la sucursal activa en el selector del encabezado:
   • Si eres dueño y el selector está en “Todas”, el editor de planos te pedirá seleccionar una sucursal específica antes de continuar. No puedes editar un plano con “Todas” seleccionado.
   • Si eres empleado, tu sucursal ya está fijada y siempre verás el floor plan de tu sucursal asignada.
4. La pantalla que aparece es el editor de planos. Al centro verás el lienzo (un área blanca o gris donde dibujarás), a la izquierda o arriba verás la paleta de componentes y a la derecha el panel de propiedades.
5. El lienzo muestra el floor plan guardado de la sucursal activa. Si es la primera vez que diseñas para esa sucursal, el lienzo estará vacío.

Paso 2: Cambiar a modo Editar

1. El editor se abre por defecto en Modo Vista, que solo permite ver el plano sin modificarlo.
2. Busca el interruptor o botón que dice Modo Vista / Modo Editar. Normalmente está en la esquina superior del lienzo.
3. Haz clic para cambiar a Modo Editar. Verás que aparecen nuevos botones y la paleta de componentes se activa.
4. Lo que ves en pantalla en Modo Editar:
   • Una barra de herramientas en la parte superior con botones como Guardar, Deshacer, Rehacer.
   • Una paleta de componentes a la izquierda con iconos de: mesa redonda, mesa cuadrada, mesa rectangular, área, pared, puerta, texto.
   • El lienzo central vacío o con elementos si ya habías diseñado antes para esa sucursal.
   • Un panel derecho que muestra las propiedades del elemento seleccionado.

Paso 3: Dibujar las paredes exteriores

1. En la paleta de componentes, busca y haz clic en el icono de Pared (generalmente es una línea gruesa o un rectángulo alargado).
2. Mueve el cursor del mouse al lienzo. Verás que el cursor cambia de forma.
3. Haz clic en el punto donde quieres que empiece la primera pared.
4. Sin soltar el clic, arrastra el mouse en la dirección que quieres que vaya la pared.
5. Suelta el clic donde termina la pared. Verás una línea gruesa que representa la pared exterior.
6. Repite este proceso para las 4 paredes de tu local (si es rectangular) o las que correspondan a la forma real de tu espacio.
7. Consejo: Las paredes no tienen que ser perfectas. Puedes ajustarlas después. Lo importante es tener la forma general de tu local.

Paso 4: Dibujar paredes interiores y puertas

1. Nuevamente selecciona la herramienta Pared y dibuja las divisiones internas. Por ejemplo, si tienes un muro que separa el salón de la cocina, o una división entre el área de barra y el área de mesas.
2. Dibuja paredes para delimitar baños, bodega, caja o cualquier espacio que quieras representar.
3. En la paleta, haz clic en el icono de Puerta.
4. Acerca el cursor a una pared donde quieras colocar una puerta. La puerta se “pegará” automáticamente a la pared cuando estés cerca. Haz clic para colocarla.
5. Coloca todas las puertas que necesites: entrada principal, puerta a la terraza, puerta a la cocina, puerta de baños, etc.

Paso 5: Crear áreas o zonas

Las áreas son espacios delimitados que te ayudan a organizar visualmente el plano.

1. En la paleta, haz clic en el icono de Area.
2. En el lienzo, haz clic y arrastra para dibujar un rectángulo que cubra una zona. Por ejemplo, dibuja un rectángulo que cubra el salón principal.
3. Con el área seleccionada, en el panel derecho puedes cambiar el color de fondo y la etiqueta de texto. Por ejemplo, ponle color verde claro y etiqueta “Salón Principal”.
4. Crea áreas para cada zona diferenciada de tu local: “Barra”, “Salón VIP”, “Área de Juegos”, “Terraza”, etc.

Paso 6: Colocar las mesas

1. Decide qué forma tiene cada mesa de tu restaurante:

   • Mesa redonda: Para mesas circulares donde los comensales se sientan alrededor.
   • Mesa cuadrada: Para mesas cuadradas de 2 a 4 personas.
   • Mesa rectangular: Para mesas alargadas de 4 a 8 personas o más.

2. Haz clic en el icono de la forma de mesa que necesitas.

3. Haz clic en el lienzo en la posición donde está esa mesa en la vida real.

4. La mesa aparece en el lienzo. El sistema le asigna automáticamente un número (M1, M2, M3…).

5. Ajustar tamaño de la mesa: Con la mesa seleccionada, arrastra las esquinas para hacerla más grande o más chica, según la capacidad real.

6. Rotar la mesa: Con la mesa seleccionada, busca un pequeño círculo o manija arriba de la mesa. Arrástralo para girar la mesa.

7. Mover la mesa: Simplemente haz clic sobre la mesa y arrástrala a su posición exacta.

8. Repite para cada mesa de la sucursal activa. Estas mesas existen únicamente en el floor plan de esta sucursal.

Paso 7: Agregar etiquetas de texto y ajustar propiedades

1. En la paleta, haz clic en el icono de Texto.
2. Haz clic en el lugar del lienzo donde quieres poner texto.
3. Aparece una caja de texto. Escribe lo que necesites. Ejemplos: “Salida de Emergencia”, “Baños”, “Caja”, “Prohibido fumar”.
4. Ajusta el tamaño del texto arrastrando las esquinas.
5. Para ajustar propiedades de cada elemento (mesa, área, pared), selecciónalo y usa el panel derecho para cambiar número de mesa, tamaño exacto, color, grosor, capa, etc.

Paso 8: Guardar el plano (con validación de sucursal)

1. Cuando hayas terminado de diseñar, busca el botón de Guardar en la barra de herramientas.
2. IMPORTANTE: El botón Guardar se deshabilita automáticamente si el selector de sucursal está en “Todas”. No puedes guardar cambios en un floor plan sin tener una sucursal específica seleccionada.
3. Si el botón está deshabilitado, haz clic en el selector del encabezado y elige una sucursal específica. El botón se habilitará.
4. Haz clic en Guardar. Espera unos segundos a que el sistema procese.
5. Verás un mensaje de confirmación: “Plano guardado exitosamente para [nombre de la sucursal]”.
6. El plano que guardaste solo aplica a esa sucursal. Si tienes otra sucursal, su floor plan no se vio afectado.
7. Guarda frecuentemente mientras diseñas. No esperes a terminar todo para guardar.

Paso 9: Verificar en Modo Vista

1. Cambia al Modo Vista usando el interruptor.
2. Revisa que todo se vea como esperas para la sucursal activa.
3. Haz clic en cada mesa para verificar que aparece su código QR.
4. Confirma que los números de mesa sean correctos y coincidan con las mesas físicas de esa sucursal.

---

Ejemplo práctico

Imagina que tienes una pizzería llamada “Pizza & Pasta” con dos sucursales: Centro y Sucursal Norte. Tu sucursal Centro tiene estas características:

• Salón interior rectangular: 3 mesas cuadradas (para 2-4 personas) en la pared izquierda, 2 mesas rectangulares grandes (para 6-8 personas) en el centro, y 1 mesa cuadrada cerca de la ventana.
• Terraza techada: 3 mesas redondas pequeñas.
• Barra: 1 mesa alta rectangular frente a la barra de servicio.
• Total de mesas: 10

Cómo diseñas el plano de la sucursal Centro paso a paso:

1. Abres Mesas y verificas que el selector del encabezado diga “Pizza & Pasta - Centro”. Si estás en “Todas”, el botón Guardar estará deshabilitado, así que seleccionas “Centro”.
2. Cambias a Modo Editar.
3. Paredes exteriores: Dibujas un rectángulo grande para el salón. Dibujas un rectángulo más pequeño pegado al lado sur para la terraza.
4. Pared interior: Dibujas una pared horizontal que separe el salón de la cocina. Dibujas otra pared vertical pequeña para la barra.
5. Puertas: Colocas una puerta en la pared este (entrada principal), una en la pared sur (terratza) y una en la pared de la cocina.
6. Áreas: Creas 3 áreas: “Salón Interior” (gris claro), “Terraza” (verde claro), “Barra” (naranja claro).
7. Mesas del salón: Colocas M1, M2, M3 en fila junto a la pared izquierda (cuadradas). M4 y M5 en el centro (rectangulares). M6 cerca de la ventana (cuadrada).
8. Mesas de terraza: Colocas M7, M8, M9 (redondas) en la terraza.
9. Mesa de barra: Colocas M10 (rectangular) junto a la barra.
10. Ajustas cada mesa: giras M4 y M5, redimensionas las rectangulares.
11. Agregas textos: “Baños ->”, “Cocina”.
12. Haces clic en Guardar. El plano se guarda para la sucursal Centro.

Ahora diseñas el plano de la sucursal Norte:

13. Cambias el selector del encabezado a “Pizza & Pasta - Norte”.
14. El lienzo se actualiza: ahora está vacío (o muestra el floor plan de Norte si ya existía).
15. Diseñas el plano de Norte según la disposición física de esa sucursal, que puede ser completamente distinta a Centro.
16. Guardas. El plano de Norte se guarda de forma independiente al de Centro.

El socket de estados de mesa:

17. Cuando un cliente se sienta en M3 de Centro y se abre su cuenta, el socket emite un evento con sucursal_id = Centro.
18. Tu panel de Mesas en Centro recibe ese evento y marca M3 como ocupada en el floor plan de Centro en tiempo real.
19. Si tienes otra computadora viendo el floor plan de Norte, no verá ese cambio porque el socket filtra por sucursal_id y el evento era de Centro.

---

Flujo de trabajo recomendado

Diseño inicial (la primera vez que usas el editor para una sucursal)

1. Dibujar en papel un croquis del local de esa sucursal.
2. Entrar al editor y seleccionar la sucursal correcta en el encabezado.
3. Cambiar a Modo Editar.
4. Dibujar paredes exteriores. Guardar (primer guardado).
5. Dibujar paredes interiores. Guardar.
6. Colocar puertas. Guardar.
7. Crear áreas de zonas. Guardar.
8. Colocar mesas una por una, ajustando posición y tamaño. Guardar después de cada 2 o 3 mesas.
9. Agregar textos de referencia. Guardar.
10. Cambiar a Modo Vista y revisar todo.
11. Corregir lo necesario en Modo Editar. Guardar final.

Diseño de una segunda sucursal

1. Cambiar el selector del encabezado a la nueva sucursal.
2. El lienzo mostrará el floor plan de esa sucursal (vacío si es la primera vez).
3. Repetir todo el proceso de diseño (paredes, puertas, áreas, mesas).
4. Guardar. El plano se guarda de forma independiente para esa sucursal.

Mantenimiento del plano (cambios futuros)

1. Abrir el editor y seleccionar la sucursal correcta.
2. Cambiar a Modo Editar.
3. Hacer el cambio necesario: una mesa nueva, mover una mesa, agregar una pared, etc.
4. Guardar. Recuerda que el botón Guardar se deshabilita si el selector está en “Todas”.
5. Cambiar a Modo Vista y verificar.
6. Si agregaste una mesa nueva, descargar su QR nuevo.

---

Errores comunes y soluciones

Error 1: “El botón Guardar está deshabilitado”

Causa: El selector de sucursal del encabezado está en “Todas” o en una sucursal sin permisos de edición.

Solución: Haz clic en el selector de sucursal del encabezado y elige una sucursal específica (por ejemplo, “Pizza & Pasta - Centro”). El botón Guardar se habilitará automáticamente. Solo los dueños pueden ver “Todas” y deben seleccionar una sucursal específica para editar.

Error 2: “No puedo mover una mesa, se mueve otra cosa”

Causa: Tienes varios elementos seleccionados sin darte cuenta (por haber usado Shift antes).

Solución: Haz clic en una zona vacía del lienzo para deseleccionar todo. Luego haz clic solo en la mesa que quieres mover y arrastra.

Error 3: “Las mesas no se ven en el orden correcto, una tapa a la otra”

Causa: Los elementos tienen capas (layers) y el orden de apilamiento no es el correcto.

Solución: Selecciona la mesa que está siendo tapada. En el panel derecho busca las opciones de Capa. Haz clic en “Traer al frente”. Ahora la mesa se verá por encima de las demás.

Error 4: “Borré una mesa por accidente”

Solución: Inmediatamente presiona el botón Deshacer (flecha hacia atrás en la barra de herramientas) o presiona Ctrl + Z en tu teclado. El elemento eliminado reaparece.

Error 5: “Diseñé el plano pero veo las mesas incorrectas”

Causa: Diseñaste el plano mientras tenías seleccionada una sucursal en el encabezado, pero estás viendo el floor plan de otra sucursal porque cambiaste el selector.

Solución: Verifica el selector de sucursal del encabezado. Asegúrate de estar viendo la sucursal para la cual diseñaste el plano. Cada sucursal tiene su propio floor plan, así que si diseñaste para Centro, solo verás esas mesas cuando Centro esté seleccionado.

Error 6: “El número de las mesas quedó en desorden”

Causa: Agregaste las mesas en desorden o eliminaste y volviste a crear algunas.

Solución: Selecciona cada mesa y en el panel derecho cambia manualmente el número. Por ejemplo, selecciona la que quieres que sea M1 y escribe “1” en el campo de número.

Error 7: “Los estados de mesa no se actualizan en tiempo real”

Causa: El socket que actualiza estados de mesa filtra por sucursal_id. Si el selector del encabezado no coincide con la sucursal donde está ocurriendo la actividad, no verás los cambios.

Solución: Verifica que la sucursal activa en el encabezado sea la misma donde están ocurriendo los cambios de estado de mesa. El socket solo envía eventos de la sucursal seleccionada.

Error 8: “Los códigos QR no corresponden a la mesa correcta”

Causa: Imprimiste los QR de una sucursal y los pusiste en otra, o confundiste los números de mesa.

Solución: Verifica en Modo Vista que el número de mesa en el plano de la sucursal activa coincida con el número impreso en el QR físico. Si no coincide, puedes cambiar el número de la mesa en Modo Editar o reimprimir el QR correcto.

---

Preguntas frecuentes

¿Cada sucursal tiene su propio floor plan?

Sí. A partir del refactor de sucursales, cada sucursal tiene su propio floor plan independiente. El plano que diseñas para una sucursal no afecta a las demás. Debes diseñar el plano de cada sucursal por separado.

¿Puedo diseñar el plano desde mi celular?

El editor de planos es una herramienta que requiere precisión con el mouse. No se recomienda usarlo desde un celular porque los elementos son difíciles de manipular en una pantalla chica. Usa una computadora de escritorio o laptop.

¿Qué pasa si cambio las mesas de lugar en la vida real?

Simplemente entra al editor en Modo Editar, asegúrate de tener la sucursal correcta seleccionada, mueve las mesas en el lienzo a su nueva posición real y guarda. Los QR de cada mesa siguen siendo los mismos.

¿Cuántas mesas puedo tener en un plano?

No hay un límite fijo. Puedes tener tantas mesas como necesites, desde 1 hasta cientos. Sin embargo, mientras más mesas tengas, más tardará en cargar el editor.

¿Puedo copiar el plano de una sucursal a otra?

No directamente. Cada sucursal tiene su propio floor plan independiente. Si tienes dos sucursales muy parecidas, tendrás que diseñar el plano de cada una por separado.

¿Los clientes ven el plano?

No. Los clientes solo ven el menú digital cuando escanean el QR. El plano es únicamente para tu uso interno como administrador y para tus meseros.

¿Cómo agrego una mesa nueva si ya tengo el plano terminado?

1. Entra a Mesas > Modo Editar.
2. Selecciona la sucursal correcta en el encabezado.
3. Selecciona la forma de mesa que necesitas.
4. Colócala en el lugar deseado en el lienzo.
5. El sistema le asigna el siguiente número disponible.
6. Guarda (el botón debe estar habilitado; no puede estar en “Todas”).
7. Cambia a Modo Vista, haz clic en la mesa nueva y descarga su QR.
8. Imprime y coloca el QR en la mesa física de esa sucursal.

¿Qué pasa con el socket de estados de mesa cuando cambio de sucursal?

El socket de estados de mesa filtra los eventos por sucursal_id. Cuando cambias de sucursal en el selector del encabezado, el socket se reconecta y solo recibe eventos de la nueva sucursal seleccionada. No verás cambios de estado de mesa de otras sucursales.

¿Puedo usar el mismo número de mesa en dos sucursales diferentes?

Sí. Como cada sucursal tiene su propio floor plan, puedes tener una M1 en la sucursal Centro y otra M1 en la sucursal Norte. No hay conflicto porque el sistema identifica cada mesa por su sucursal y su número.

¿El plano se guarda automáticamente?

No. Siempre debes hacer clic en Guardar manualmente. Además, el botón Guardar se deshabilita si el selector de sucursal está en “Todas”. Aciértumbrate a guardar cada pocos minutos mientras trabajas en el editor y asegúrate de tener una sucursal específica seleccionada.