Volver a los trabajos
2026IndustriaManufacturing operations cockpit, end to end

Industria: un cockpit de fábrica, ocho módulos, un solo equipo

Una planta de seis líneas en Brescia tiraba con hojas de cálculo, capturas en un grupo de Telegram y un kanban de papel en la pared. Lo sustituimos todo por un único cockpit de fábrica. Ocho módulos entregados end to end: vista en vivo de la planta, pipeline de órdenes, detalle de línea con andon, BOM multinivel, mapa del almacén, calidad, mantenimiento, reports. Tema claro y tema oscuro resueltos en cada breakpoint. Cada petición acabó en producción.

ManufacturingSCADAOperations cockpit
Industria: un cockpit de fábrica, ocho módulos, un solo equipo

La planta tiene seis líneas y un almacén en Brescia. Cuando llegamos, lo digital era esto: un SharePoint con catorce hojas de cálculo, un grupo de Telegram para los cambios de turno y un kanban de papel clavado a la pared junto a la prensa. Las faltas que aparecían en línea de ensamblaje una semana sí y otra no eran las mismas que cualquiera en compras podía haber leído en la BOM tres días antes. El brief decía una sola cosa: rehacer el cockpit que llevaban años imaginando.

Scope, ocho módulos

  • 8MódulosLive, Órdenes, Líneas, BOM, Almacén, Calidad, Mantenimiento, Reports
  • 6Líneas30+ estaciones rastreadas en vivo, ciclo y andon por celda
  • End to endBuildMarca, producto, ingeniería, ambos temas en cada breakpoint
Industria desktop Live floor in light mode. Sidebar with Live, Orders, Lines, BOM, Inventory, Quality, Maintenance, Reports. Plant header reading PLT-04, shift A. 78.4 percent OEE in giant numerals over a soft chromatic blob, 6,140 pieces produced in the last hour, 38 minutes downtime. KPI strip with parts per hour, OEE, scrap rate, downtime against shift target. Six-line list with status chips Running, Changeover, Fault, Idle, plus throughput sparklines per line. Throughput chart on the right showing produced vs target over the last 24 hours.
La pantalla principal para el responsable de planta. OEE, throughput, downtime, estado de las seis líneas, evolución del throughput en las últimas 24 horas: todo en una sola pantalla.

Cada petición entregada

El scope no tenía techo. Empezamos con una vista Live floor con el OEE por línea. A la segunda semana ya había también un pipeline de órdenes con kanban y Gantt. A la cuarta una BOM multinivel con propagación de faltas. Al segundo mes una sección Almacén con mapa de bins, un módulo Calidad, un registro Mantenimiento y un módulo Reports encima del resto.

Tomamos cada petición y la pusimos en producción. Nada se aplazó a una fase dos. Ningún módulo se recortó por presupuesto. Ninguna feature volvió etiquetada como fuera de scope. La posición del estudio fue la misma del primer día al último: si vive en la línea, vive en la app.

Industria desktop Orders pipeline in light mode. Header Production, Orders pipeline, with Kanban and Gantt toggles. Filter row with status counts Queued 10, Running 4, Paused 3, Completed 12, plus customer, line, priority dropdowns and a search field. Four kanban columns: Queued, Running, Paused, Completed. Each card carries the work order ID, product name, customer, progress bar, pieces produced over target, and remaining time or due date. Multiple customers visible across cards: Northwind Trailers, Vortex Mobility GmbH, Helix Refrigeration, Meridian Marine, Stellaris Robotics, Falcata Aerospace, Aquila Plumbing Co.
Pipeline de producción como kanban de cuatro columnas: en cola, en marcha, en pausa, completadas. Filtros por cliente, línea, prioridad. Los mismos datos pasan a vista Gantt con un solo toggle.
Industria desktop Line detail in light mode. Six-line list on the left with current OEE per line, Body Weld 1 selected. Right panel for Body Weld 1: status Running, OEE 86.4 percent for shift A, throughput 142 against a 150 pieces per hour target, current cycle 25.4 seconds, uptime 6h 52m. Operator and active work order panel showing Vortex Mobility GmbH WO-58420 ATX-7042 with progress 1,782 of 2,400 pieces. Raise Andon button. Stations strip with five cells S01 Frame Load, S02 Spot Weld 02, S03 Spot Weld 03, S04 Robotic Seam, S05 Visual Check, each with cycle time against target. Cycle time per station chart pinned at the bottom.
El detalle de línea va más allá del nivel dashboard. OEE, ciclo actual, uptime, una barra con todas las estaciones y su ciclo frente al target, operario y orden activos ya cargados en el botón Raise Andon.

Hasta el ciclo, estación por estación

La página de detalle de línea se lee como la checklist del operario. OEE del turno en curso, throughput frente al target en tiempo real, ciclo en segundos, uptime desde el inicio de turno. Debajo, una barra con todas las estaciones: cada celda con su propio ciclo, su target y el operario asignado.

Fuimos más allá del nivel dashboard a propósito. Una línea al 41 por ciento es un dato. Una línea al 41 por ciento con la estación S4 parada, sin operario, y la S2 a 26 segundos frente a un target de 25 es otra historia. El botón Raise Andon en el header de la línea escribe un evento real en la cola de mantenimiento, con celda, anomalía de ciclo y orden activa ya cargados: el operario no reescribe lo que el sistema ya sabe.

Industria desktop Bill of Materials in light mode. Header Engineering, Bill of Materials, summary line products 8, nodes 98. Product list on the left with revision and shortage counts: Bracket Assembly Stage 2 selected with 18 nodes and 13 shortages, Faucet Body Final, Hinge Sub-assembly, Stamped Bracket, Compressor Housing, Aero Bracket Titanium, Robot Joint Type A, Gasket Kit R-series. Right panel for Bracket Assembly Stage 2 rev. C with header KPIs nodes 18, shortages 13, tight 1, suppliers 7, max lead 14d. Component table with part code ASM-A1, description Bracket Stage 2 Assembly, quantity 1 set, lead 0 days, supplier In-house, stock 240, status SHORT.
Ocho productos, 98 nodos, proveedores y lead times rastreados en cada nivel. Bracket Assembly Stage 2 tiene 13 faltas: el sistema las marca donde frenan la orden de verdad, no donde están en la estantería.

La falta se ve antes que la orden

El módulo BOM es multinivel. Cada producto tiene su propio árbol de subensamblajes, piezas y materia prima, con la revisión y los lead times de proveedor rastreados en cada nodo. Los flags de falta no se quedan parados en la pieza donde se abre el hueco. Suben por el árbol hasta el ensamblaje que los necesita, y entran en el pipeline de órdenes que depende de ese ensamblaje.

Una bobina que se está agotando aguas arriba llega al planificador de producción antes de que la orden en línea marque cero. La semana en que la planta cazó cinco faltas en fase de ensamblaje con el sistema antiguo fue la semana en que escribimos la propagación. Esa misma semana, dos de esas faltas ya habrían sido visibles desde la BOM live, con tres días de antelación.

Industria desktop Inventory bin map in light mode. Header Warehouse, PLT-04, summary bins 47, lots 80, suppliers 23. Tab strip Bin map, Lots, Receiving, Low-stock with counts. Four warehouse zones rendered as bin grids with fill-rate heatmaps: Zone A Raw materials 55 percent of 22 bins, Zone B Sub-assemblies 66 percent of 12 bins, Zone C Finished goods 53 percent of 9 bins, Zone H Receiving 70 percent of 4 bins. Each bin labelled by aisle and shelf position.
Almacén dibujado como se recorre de verdad: pasillos, estantes, racks, fill rate como heatmap por zona. Recepción, bajo stock y lotes a un tab.
Industria desktop Inventory bin detail in light mode. Right-side drilldown panel for BIN A-01-01 with breadcrumbs Raw materials, Aisle 1, Shelf 1, rack. Four-stat header: capacity 800, used 226 at 28 percent, free 574, lots 1. Lots stored here list with one entry: LOT-2026-1148, part STL-COIL-3, supplier Brescia Steel SpA, 8,200 kg of 3mm S355 steel coil, received 12 days ago. Behind the panel the bin map continues to render so context is never lost.
Un bin abierto en su sitio: capacidad, ocupado, libre, lote, proveedor, antigüedad. El mapa permanece visible detrás del panel, así el planificador no pierde el contexto.

Los dos temas, cada breakpoint

Claro y oscuro no son una elección que dependa del dispositivo. Cada superficie del cockpit, del desktop al teléfono, está tematizada por completo en los dos. Las páginas desktop ya vistas arriba también funcionan en oscuro: mismas páginas, mismos datos, tema distinto. Las cuatro pantallas que siguen lo demuestran.

Resolvimos cada componente dos veces. Dos targets de contraste distintos, dos escalas de peso del texto, los mismos componentes React y los mismos design tokens haciendo funcionar cuatro superficies completas. Andon, estado de línea y arranque de orden se alcanzan en móvil con dos taps desde la home. El desktop es la superficie de quien planifica, el móvil la de quien está en línea. Ninguna es una versión recortada de la otra, y ninguna está bloqueada en un solo tema.

Industria desktop Live floor in dark mode. Same layout as the light version. Sidebar with Live, Orders, Lines, BOM, Inventory, Quality, Maintenance, Reports. Hero card with 78.4 percent OEE, 6,482 parts produced today, throughput 6,140 pieces in the last hour, downtime 38 minutes. KPI strip with parts per hour 768 plus 5.1 percent, OEE 78.4 percent up 2.1 pp, scrap rate 1.42 percent, downtime 38m. Six-line list with the same status chips and throughput sparklines. Throughput chart on the right showing produced vs target over the last 24 hours.
Live floor, tema oscuro. Mismas cifras OEE, misma franja de las seis líneas, misma curva de throughput. Contraste recalibrado para los turnos con poca luz.
Industria desktop Line detail in dark mode, with L2 Paint Shop A selected (the light version showed L1 Body Weld 1). Six-line list on the left. Right panel for Paint Shop A: status Running, OEE 78.2 percent for shift A, throughput 96 against a 110 pieces per hour target, current cycle 37.6 seconds, uptime 6h 28m. Operator D. Reyes, product ATX-7042-PNT, work order WO-58424 Vortex Mobility GmbH, progress 1,180 of 2,400 pieces. Raise Andon button. Stations strip with four cells S01 Pre-treatment, S02 Spray Booth, S03 Cure Oven, S04 Inspect & Pack, each with cycle time against target. Cycle time per station chart pinned at the bottom.
Líneas en oscuro, con L2 Paint Shop A seleccionada. Línea distinta, estaciones distintas (Pre-treatment, Spray Booth, Cure Oven, Inspect & Pack), mismo botón Raise Andon en la cabecera.
Industria desktop Bill of Materials in dark mode, with HNG-204-B Hinge Sub-assembly selected (the light version showed Bracket Assembly Stage 2). Header summary products 8, nodes 98. Product list on the left with revisions and shortage counts. Right panel for Hinge Sub-assembly rev. B with header KPIs nodes 9, shortages 4, tight 0, suppliers 4, max lead 14d. Component table with part code ASM-HNG, description Hinge Sub-assembly, quantity 1 set, lead 0 days, supplier In-house, stock 1,100, status SHORT.
BOM en oscuro, con el nodo Hinge Sub-assembly abierto. Nueve nodos, cuatro faltas, lead máximo 14 días. Reglas de propagación idénticas en los dos temas.
Industria desktop Orders pipeline in dark mode. Same four-column kanban as the light version: Queued 10, Running 4, Paused 3, Completed 12. Filter row with status counts, customer, line and priority dropdowns and search field. Cards across the four columns with WO IDs, product names, customers (Northwind Trailers, Vortex Mobility GmbH, Helix Refrigeration, Meridian Marine, Stellaris Robotics, Falcata Aerospace, Aquila Plumbing Co.), progress bars, pieces over target and remaining time.
Pipeline de órdenes en oscuro. Mismas cuatro columnas, misma fila de filtros, mismas pills de prioridad, mismas zonas de hover en cada card.

Medimos la planta un mes después del lanzamiento. Los números de abajo son la primera comparación con la baseline de Excel y Telegram que la planta usaba antes del cockpit. Líneas, productos y mix de clientes se mantuvieron iguales en la ventana de comparación: la única variable que cambió fue el cockpit.

Un mes en planta

  • +16 ppOEEDel 62 por ciento medio al 78 por ciento en las seis líneas
  • +22%Throughput por turnoMismas líneas, mismos productos, misma duración de turno
  • -35%DowntimeEl andon va directo a la cola de mantenimiento, sin reescribir nada
  • Días → minutosDetección de faltasLa propagación BOM llega a compras antes de que la orden marque cero
  • 30 → 4 minCambio de turnoSe lee en la página live, sin capturas en un grupo de Telegram
  • 14 → 0Hojas de cálculoLa carpeta SharePoint está en solo lectura, ya desactualizada

Stack

  • Next.js16
  • React19
  • TypeScript5
  • TanStack Query
  • Recharts
  • Postgres16
  • Supabase
  • Cloudflare R2
  • Vercel Edge

Ocho módulos, sin fase dos. Ampliamos scope cuatro veces durante el proyecto y ellos entregaron cada vez con la misma cadencia. Tras un mes, el cockpit ya cazó dos faltas antes de que se diera cuenta el equipo de compras, y el cambio de turno lo hacemos en cuatro minutos en la página live. El SharePoint de hojas de cálculo está en solo lectura, ya desactualizado.

Plant Manager, IndustriaUn mes después del lanzamiento

¿Gestionas operaciones a base de hojas de cálculo?

Construimos cockpits hechos para la línea, no para el organigrama. Cada módulo entregado, sin fase dos. Escríbenos.

Empezar un proyecto