Ferromader: cada pie de madera, contado.
2026 · sistema interno de la barraca
El sistema con el que Comercial Ferromader vende madera y ferretería: calcula los pies tablares de cada corte, lleva el stock de cada madera con sus entradas y salidas, y deja los reportes y los PDF listos para cerrar el mes.
Tecnología
Angular 21- Tailwind CSS
Firestore- Chart.js
- Vitest
TypeScript- Firebase
- Google Sign-In
- jsPDF
- WCAG 2.2 AA
Servicios
El proyecto
Cliente e idea
Comercial Ferromader es una barraca que vende madera por pie tablar (bibosi, ochoo, serebo, cedro, roble) junto con clavos, tornillos, barnices y herramientas, y arma productos en su taller.
Reto y objetivos
En una barraca cada venta es un cálculo: cantidad por espesor por ancho por largo, a un precio distinto por madera, con rebajas, pagos a medias y facturas. El stock se mueve todos los días entre camiones que llegan y cortes que salen, y saber cuánta madera queda o cuánto se vendió en el mes significaba sumar a mano.
Solución y resultado
Construimos un sistema donde el vendedor registra la venta con las medidas y el sistema calcula los pies tablares, el precio sugerido y el total al instante, con atajos de teclado para el mostrador. Cada venta descuenta el stock de su madera y queda con su estado de pago.
El almacén registra cada recepción con su CFO, el fletero, la placa y el costo de la carga. El inventario muestra el stock de cada madera, el consumo diario y los días que alcanza, y avisa cuando una baja de su mínimo. Los reportes y los PDF salen con un clic.
Cada pie, contado
Los pies tablares de cada corte, calculados solos.
Stock al día
Entradas y salidas de cada madera, sin cuadernos.
El mes, cerrado
Reportes y PDF listos para la contabilidad.
Resumen del proyecto
Funciones principales
Tres personas usan Ferromader cada día: el dueño, que mira cómo va el mes; el vendedor, que atiende el mostrador; y quien recibe los camiones de madera. Cada uno entra con su cuenta de Google y ve solo lo que su rol le permite.
El mes de un vistazo
El panel saluda con la fecha y muestra lo cobrado y cómo entró el dinero (efectivo, QR o transferencia), los pies vendidos, el ticket promedio y el saldo por cobrar. Al lado, el stock de cada madera con la marca de su mínimo y lo más vendido.
Vender sin calculadora
El vendedor elige la madera y el corte, escribe la cantidad y las medidas, y el sistema calcula los pies tablares y el precio. Suma productos de ferretería, aplica rebajas y registra el pago completo o parcial, con o sin factura.
Stock que se entiende
Cada madera tiene su tarjeta con el stock, lo vendido en 30 días, el consumo diario y los días que alcanza. Las recepciones guardan el documento CFO, el transporte y el costo por pie de cada carga.
Reportes para cerrar el mes
Ventas por día y por madera, mejores clientes, pies vendidos, métodos de pago y rendimiento por vendedor, con filtros por periodo, cliente, madera o vendedor, y exportación a PDF.
Desarrollo
Metodología
Partimos de la planilla de Excel con la que la barraca trabajaba: sus maderas, sus cortes y su saldo de pies. La convertimos en un sistema en Angular sobre Firebase, con reglas de Firestore que validan cada rol y una bitácora de cambios. Las capturas de este caso usan datos de demostración en emuladores locales: clientes, vendedores y números inventados.
Proceso
Mapa del sistema
Tres áreas, como el menú: la operación del mostrador, el almacén y la gestión. Las fichas punteadas son plantillas que se repiten para cada venta, recepción o madera.
- Operaciónmostrador
- Panel del día
- Ventas y filtros
- Nueva venta
- Ventaplantilla + PDF
- Clientes
- Almacénmadera y ferretería
- Inventario y kárdex
- Recepciónplantilla
- Tipos de madera
- Productos
- Proveedores
- Gestiónsolo administración
- Reportes y PDF
- Usuarios y permisos
- Historial de cambios
Interfaz
La marca, también en el sistema
Llevamos al sistema el naranja y el negro del letrero de la barraca: la barra lateral es la franja negra del logo, el naranja marca las acciones y el castor recibe en el acceso. Los títulos usan una letra de trazo industrial y las cifras se alinean en columnas para leerlas rápido.
Calidad
Accesible de punta a punta
Medimos las 14 pantallas, el acceso y los formularios con axe-core en escritorio y celular, y corregimos cada hallazgo hasta llegar a cero.
Contraste que se lee
Los textos secundarios suben a 6,4:1 y cada color de estado (completada, parcial, anulada) cumple AA sobre su fondo. El naranja de los botones lleva texto blanco a 5,7:1.
Todo con el teclado
Un enlace para saltar al contenido, selectores que anuncian su campo y su valor, botones de ícono con nombre, y formularios que atrapan el foco y lo devuelven al cerrar.
Proceso
Del mostrador al patio
En el patio de la barraca se trabaja con el celular en la mano. El menú baja a una barra inferior, el botón de nueva venta está siempre a mano y las tablas se convierten en tarjetas.
Proceso
Páginas completas
El panel reúne el mes en una sola vista; el inventario muestra cada madera con su ritmo de venta.
Marca
Tipografía
Una sans de trazo industrial para títulos y cifras, con números tabulares que se alinean en columnas. La palabra FERROMADER va en itálica gruesa, como en el letrero. Los textos corridos usan Inter.
Archivo
SemiBoldBoldExtraBoldExtraBold Italic
Marca
Colores
El naranja y el negro vienen del letrero de la barraca. Usamos un naranja más profundo para botones y textos, para que se lean, y dejamos el naranja vivo del logo para los detalles.
Conclusión
Ferromader dejó la planilla: cada venta calcula sus pies sola, el stock se mueve con cada camión y cada corte, y el dueño ve cómo va el mes en una pantalla con la cara de su barraca.
Casos
