Un CRM completo para barberías en un solo archivo index.html.
Sin servidor, sin internet, sin instalar nada. Lo abres con doble clic y funciona.
HTML + CSS + JavaScript · cero dependencias · cero librerías · 100% offline
Un sistema de punto de mostrador pensado para el día a día real de una barbería: agenda, citas, clientes, cobros, comisiones de barberos y corte de caja. Todo vive en un único archivo que corre en cualquier navegador (Chrome, Safari, Edge, Firefox), incluso sin conexión a internet.
Los datos se guardan en el propio navegador (localStorage), así que nada se sube a la nube y no necesitas cuenta, login ni mensualidad.
🎯 Para quién es: dueños de barbería que hoy llevan todo en una libreta y quieren algo serio sin pagar suscripciones ni depender del wifi. También sirve como plantilla para programadores que quieran un CRM de giro similar (estética, spa, uñas, tatuajes, consultorio).
| Módulo | Qué resuelve |
|---|---|
| 📊 Dashboard | Resumen del día: citas, ingresos, ticket promedio, servicios top y clientes que no han vuelto en +30 días |
| 🗓 Agenda | Vista calendario por barbero y hora. Avisa y bloquea empalmes de citas en la misma silla |
| ✂️ Citas | Tabla con filtros + pipeline arrastrable. Estados separados para Cancelada y No asistió, tasa de inasistencia y recordatorios por WhatsApp (uno por uno o todos los de mañana de golpe) |
| 👥 Clientes | Buscador, ficha con historial, total gastado y notas. Detecta clientes en riesgo |
| 💈 Barberos | Cada quien con su esquema de pago: porcentaje (50/50, 60/40…) o renta de silla |
| 💸 Comisiones | Reporte semanal automático: "Marco generó $4,200 y le tocan $2,520". Se acabó la libreta |
| 💵 Corte de caja | Separa efectivo / tarjeta / transferencia, registra gastos del día y calcula cuánto debe haber en el cajón |
| ⚡ Venta rápida | Para el que entra sin cita: cliente, servicio, barbero y cobro en dos toques |
| 💾 Respaldo | Exporta/importa todo en un JSON para no perder nada |
- Ve a la pestaña Code ▾ → Download ZIP (botón verde arriba a la derecha del repo).
- Descomprime y haz doble clic en
index.html. - ¡Listo! Abre en tu navegador con datos de ejemplo para que veas cómo se siente.
💡 Tip: arrastra
index.htmla la barra de marcadores de Chrome o haz clic derecho → Abrir siempre con Chrome. En el celular, ábrelo y usa "Agregar a pantalla de inicio" para tenerlo como una app.
git clone https://github.com/dantedelao89/crm-barberia.git
cd crm-barberia
open index.html # macOS
# o simplemente abre el archivo en tu navegadorNo hay npm install, no hay build, no hay servidor. Es a propósito.
Hay dos caminos. Elige según qué tan cómodo te sientas tocando código. La mayoría solo necesita el Camino 1.
Todo se configura desde la interfaz, y se guarda solo en tu navegador:
- Pon el nombre de tu barbería → pestaña Respaldo y ajustes → Nombre de la barbería. (Aparece en el menú y en los mensajes de WhatsApp.)
- Borra los datos de ejemplo y carga los tuyos:
- Servicios → elimina los de ejemplo y crea los tuyos con su duración y precio.
- Barberos → da de alta a tu equipo y define el esquema de pago de cada uno (porcentaje o renta de silla).
- Clientes → ve agregándolos conforme lleguen, o usa ⚡ Venta rápida que los da de alta al vuelo.
- Ajusta el fondo de caja (el cambio con el que abres el cajón) en Respaldo y ajustes → Fondo de caja inicial.
- Empieza a operar. Cada cambio se guarda automáticamente.
⚠️ Importante sobre tus datos: viven en este navegador y esta computadora. Si cambias de equipo o limpias el navegador, se borran. Por eso, una vez por semana entra a Respaldo → Descargar respaldo (.json) y guarda ese archivo en tu Drive/WhatsApp. Para restaurarlo: Importar → Reemplazar todo.
Si quieres que el archivo venga "de fábrica" con tu negocio (útil si lo vas a instalar en varias sucursales o repartir ya listo), edita index.html con cualquier editor de texto. Está todo comentado y en español.
Usa Buscar (Ctrl+F / Cmd+F) dentro del archivo para encontrar cada punto:
| Qué cambiar | Busca esto en index.html |
Qué hacer |
|---|---|---|
| Nombre del negocio | negocio:'Barbería El Patrón' |
Cámbialo por el tuyo |
| Título de la pestaña | <title>💈 Barbería El Patrón |
Cambia el texto y, si quieres, el emoji |
| Ícono / emoji | text y='.9em' font-size='90'>💈 |
Cambia 💈 por el emoji que prefieras |
| Datos de ejemplo | function datosSemilla() |
Aquí están clientes, servicios, barberos y citas demo. Edítalos o vacíalos (ver abajo) |
| Fondo de caja inicial | fondo:500 |
Pon tu cambio inicial habitual |
| Horario de la agenda | AG_INI=540, AG_FIN=1260 |
Minutos desde medianoche. 540=9:00am, 1260=9:00pm. Ej: abrir 8am→480, cerrar 10pm→1320 |
| Colores de la marca | --oro:#d9a441 |
Cambia los acentos dorados (ver sección de color) |
| Métodos de pago | const METODOS= |
Agrega/quita formas de pago |
| Categorías de gasto | const CATS_GASTO= |
Ajusta las categorías del corte de caja |
¿Quieres que arranque limpio, sin los clientes/citas de demo? En datosSemilla(), deja los arreglos vacíos así:
clientes: [],
servicios: [], // o deja tus servicios reales aquí
barberos: [], // o deja tu equipo real aquí
citas: [],
gastos: [],
cortes: []💡 Recomendado: deja tus servicios y barberos reales precargados aquí, y vacía solo
clientes,citas,gastosycortes. Así el archivo ya viene con tu catálogo listo.
🔁 Si ya habías abierto la app antes, el navegador recuerda los datos viejos. Para ver los nuevos: entra a Respaldo → Restablecer datos de ejemplo, o borra el
localStoragedel sitio.
En la parte de arriba del <style>, en el bloque :root, están todas las variables de color. Cambia estas para reflejar tu marca:
--bg:#0b0d10; /* fondo carbón */
--oro:#d9a441; /* acento principal (dorado) */
--oro2:#f2c14e; /* acento brillante */¿Tu barbería es más de rojo y negro? Cambia --oro y --oro2 por tonos rojos (#e23b3b, #ff5a5a) y listo, toda la app se reviste sola.
La estructura sirve para cualquier negocio de citas + servicios + personal que cobra. Solo cambia el vocabulario en datosSemilla() y los textos:
| Giro | "Barberos" pasan a ser… | "Servicios" pasan a ser… |
|---|---|---|
| 💅 Salón de uñas / estética | Manicuristas / estilistas | Manicure, pedicure, uñas acrílicas… |
| 💆 Spa / masajes | Terapeutas | Masaje, facial, exfoliación… |
| 🦷 Consultorio / dental | Doctores | Consulta, limpieza, tratamiento… |
| 🐶 Estética canina | Groomers | Baño, corte, desenredado… |
| 🔧 Taller / detailing | Técnicos | Servicio, afinación, encerado… |
El esquema de comisión por porcentaje o renta también aplica igual (renta de sillón, de consultorio, de estación).
- Las citas de ejemplo se calculan a partir de hoy, así que siempre verás citas "de hoy" sin importar el día en que abras la app (no hay fechas quemadas que la dejen vacía mañana).
- La agenda impide empalmes: si intentas encimar dos citas en la misma silla a la misma hora, te avisa con quién choca en vez de guardarlo en silencio.
- Diferencia "canceló" de "no llegó", lleva la tasa de inasistencia y te marca a los que faltan seguido para pedirles anticipo.
- WhatsApp con el mensaje ya escrito (
wa.me), con nombre, servicio, barbero, día y hora. - Responsivo: pensado para usarse en el celular o tablet del mostrador, no solo en compu.
- Todo es local. Los datos se guardan en el
localStoragedel navegador. No hay servidor, no hay analítica, no se envía nada a ningún lado. - Tú eres dueño de tu respaldo. El JSON exportado es tuyo; guárdalo donde quieras.
- Por eso
.gitignoreexcluye los archivosrespaldo-barberia-*.json: para que nunca subas por accidente los datos reales de tus clientes a GitHub.
- HTML + CSS + JavaScript vanilla. Sin React, sin jQuery, sin Tailwind, sin nada.
- Cero dependencias y cero llamadas a internet (los íconos son SVG/emoji embebidos). Funciona en un rancho sin señal.
- Un solo archivo de ~125 KB. Fácil de leer, fácil de respaldar, fácil de mandar por correo.
- Persistencia con
localStoragebajo la clavebarberia_crm_v1.
¿Pierdo los datos si cierro el navegador? No. Se guardan solos. Solo se pierden si limpias el navegador o cambias de computadora — por eso haz respaldos.
¿Puedo usarlo en la compu del mostrador y en mi celular a la vez? Sí, pero son dos "cajones" separados (cada navegador guarda lo suyo). Para pasar datos de uno a otro, exporta el JSON en uno e impórtalo en el otro.
¿Funciona sin internet? Completamente. Esa es la idea. Lo único que necesita internet son los botones de WhatsApp (porque abren WhatsApp).
¿Cómo actualizo a una versión nueva del archivo?
Exporta tu respaldo, reemplaza el index.html por el nuevo, ábrelo e Importa → Reemplazar todo. Tus datos siguen intactos.
¿Lo puedo vender o modificar? Sí. Es MIT. Haz lo que quieras con él.
MIT — úsalo, modifícalo, véndelo, lo que sea. Sin garantía.
Hecho con 💛 para que ninguna barbería tenga que pelearse con una libreta otra vez.