Torna ai lavori
2026IndustriaManufacturing operations cockpit, end to end

Industria: una piattaforma per lo stabilimento, otto moduli, un solo team

Una webapp interna per uno stabilimento manifatturiero di Brescia con sei linee di produzione. Otto moduli in un'unica interfaccia: ordini, distinta base, magazzino, qualità, manutenzione, report. Tema chiaro e tema scuro curati su ogni breakpoint. Ogni richiesta è andata in produzione.

ManufacturingSCADAOperations cockpit
Industria: una piattaforma per lo stabilimento, otto moduli, un solo team

Industria gestisce uno stabilimento manifatturiero a Brescia, con sei linee di produzione e un magazzino integrato. Il problema non era la produzione, era la visibilità: ordini, mancanze sui materiali, fermi macchina e stato di linea vivevano in sistemi separati. Per leggere lo stato dello stabilimento serviva mettere insieme a mano dati che cambiavano ogni minuto. La direzione voleva un'unica interfaccia, leggibile dal capoturno e dall'operatore di linea.

Otto moduli, niente fase due

  • 8ModuliLive, Ordini, Linee, Distinta, Magazzino, Qualità, Manutenzione, Report
  • 6Linee30+ stazioni tracciate live, ciclo e andon per ogni cella
  • Per interoRealizzazioneBrand, prodotto, sviluppo, entrambi i temi su ogni 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 schermata principale di chi dirige lo stabilimento. OEE, throughput, fermi macchina, stato delle sei linee, andamento della produzione nelle ultime 24 ore: tutto su una pagina sola.

Ogni richiesta consegnata

Abbiamo costruito una webapp interna in otto moduli, dalla vista live della linea ai report di turno. Non c'era una lista chiusa di moduli all'inizio: si è partiti da una vista Live floor con l'OEE per linea. Alla seconda settimana c'era già anche un flusso degli ordini con kanban e Gantt. Alla quarta una distinta base multilivello con propagazione delle mancanze. Al secondo mese una sezione Magazzino con mappa delle ubicazioni, un modulo Qualità, un registro Manutenzione e un modulo Report a chiudere il quadro.

Ogni richiesta è andata in produzione. Niente è stato rimandato a una fase due. Nessun modulo tagliato per budget. Nessuna funzionalità lasciata fuori. La nostra linea è stata la stessa dal primo giorno all'ultimo: se sta in linea, sta nell'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.
Flusso di produzione in kanban a quattro colonne: in coda, in corso, in pausa, completati. Filtri per cliente, linea, priorità. Gli stessi dati diventano un Gantt con uno switch.
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.
Il dettaglio linea non si ferma alla dashboard. OEE, ciclo corrente, tempo di funzionamento, una fascia con tutte le stazioni e il loro ciclo rispetto all'obiettivo, operatore e ordine attivi già compilati nel pulsante Raise Andon.

Fino al singolo ciclo, stazione per stazione

La pagina di dettaglio linea si legge come la checklist dell'operatore. OEE del turno in corso, throughput rispetto all'obiettivo in tempo reale, ciclo corrente in secondi, tempo di funzionamento da inizio turno. Sotto, la fascia con le stazioni: ogni cella con il proprio ciclo, il proprio obiettivo e l'operatore assegnato.

Abbiamo voluto andare oltre la dashboard, di proposito. Una linea al 41 per cento è un dato. Una linea al 41 per cento con la stazione S4 ferma, senza operatore, e la S2 a 26 secondi contro un obiettivo di 25 è un altro discorso. Il pulsante Raise Andon, in alto sulla linea, apre un ticket di manutenzione con cella, anomalia di ciclo e ordine attivo già compilati: l'operatore non riscrive quello che il sistema sa già.

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.
Otto prodotti, 98 nodi, fornitori e lead time tracciati a ogni livello. Bracket Assembly Stage 2 ha 13 mancanze: il sistema le segnala dove fermano davvero l'ordine, non dove stanno fisicamente sullo scaffale.

La mancanza si vede prima dell'ordine

Il modulo distinta è multilivello. Ogni prodotto ha il suo albero di sotto-assemblati, parti e materie prime, con la revisione e i lead time dei fornitori tracciati a ogni nodo. Le segnalazioni di mancanza non restano ferme sul pezzo dove si apre il buco. Risalgono l'albero fino all'assemblato che li usa, e finiscono nel flusso degli ordini che dipende da quell'assemblato.

Una bobina che si sta esaurendo a monte arriva al pianificatore di produzione prima che l'ordine in linea arrivi a zero. La settimana in cui lo stabilimento aveva rilevato cinque mancanze in fase di assemblaggio con il vecchio sistema è la stessa in cui abbiamo scritto la propagazione. In quella stessa settimana, due di quelle mancanze sarebbero già state visibili dalla distinta in tempo reale, con tre giorni di anticipo.

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.
Magazzino disegnato come lo si percorre davvero: corsie, scaffali, rack, livello di riempimento mostrato come heatmap per zona. Ricezione, sotto-scorta e lotti in un'altra scheda.
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.
Una singola ubicazione aperta al volo: capacità, occupato, libero, lotto, fornitore, anzianità. La mappa resta visibile dietro al pannello, così il pianificatore non perde il contesto.

Entrambi i temi, ogni breakpoint

Chiaro e scuro non sono una scelta legata al dispositivo. Ogni schermata della piattaforma, dal desktop al mobile, è rifinita in entrambi i temi. Le pagine desktop già viste sopra girano anche in scuro: stesse pagine, stessi dati, tema diverso. Le quattro schermate che seguono lo dimostrano.

Abbiamo trattato ogni componente due volte. Due obiettivi di contrasto distinti, due scale di peso del testo, gli stessi componenti React e gli stessi design token a far girare quattro interfacce complete. Andon, stato linea e avvio ordine si raggiungono su mobile in due tocchi dalla schermata principale. Il desktop è l'interfaccia di chi pianifica, il mobile quella di chi sta in linea. Nessuna delle due è una versione ridotta dell'altra, e nessuna delle due è bloccata su 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 scuro. Stesse cifre OEE, stessa fascia delle sei linee, stessa curva di throughput. Contrasto ricalibrato per i turni a luce bassa.
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.
Linee in tema scuro, con L2 Paint Shop A selezionata. Linea diversa, stazioni diverse (Pre-treatment, Spray Booth, Cure Oven, Inspect & Pack), stesso pulsante Raise Andon in alto.
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.
Distinta in scuro, col nodo Hinge Sub-assembly aperto. Nove nodi, quattro mancanze, lead massimo 14 giorni. Regole di propagazione identiche fra i due temi.
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.
Flusso degli ordini in tema scuro. Stesse quattro colonne, stessa fila di filtri, stessi badge di priorità, stesse aree di hover su ogni scheda.

Abbiamo misurato lo stabilimento un mese dopo il lancio. I numeri qui sotto sono il primo confronto con il punto di partenza, fatto di Excel e Telegram, su cui lo stabilimento girava prima della piattaforma. Linee, prodotti e tipologia di clienti sono rimasti gli stessi nel periodo di confronto: l'unica variabile cambiata è la piattaforma.

Un mese in linea

  • +16 ppOEEDal 62 per cento medio al 78 per cento sulle sei linee
  • +22%Throughput per turnoStesse linee, stessi prodotti, stessa durata di turno
  • -35%Fermi macchinaL'andon finisce dritto in coda di manutenzione, niente da riscrivere
  • Giorni → minutiRilevamento mancanzeLa propagazione BOM arriva agli acquisti prima che l'ordine arrivi a zero
  • 30 → 4 minPassaggio di consegneSi legge sulla pagina live, niente screenshot in un gruppo Telegram
  • 14 → 0Fogli ExcelLa cartella SharePoint è in sola lettura, ormai datata

Stack

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

Otto moduli, niente fase due. Abbiamo allargato il lavoro quattro volte durante il progetto e loro hanno consegnato ogni volta con la stessa cadenza. Dopo un mese, la piattaforma ha già rilevato due mancanze prima che se ne accorgesse l'ufficio acquisti, e il passaggio di consegne lo facciamo in quattro minuti sulla pagina live. Il vecchio SharePoint dei fogli Excel è in sola lettura, ormai datato.

Direttore di stabilimento, IndustriaA un mese dal lancio

Gestisci la produzione a fogli Excel?

Costruiamo applicazioni per ottimizzare i processi operativi. Ogni modulo consegnato, niente fase due. Scrivici.

Avvia un progetto