Description
Des tableaux de bord qui parlent le langage du terrain, en code source dans votre projet React ou Next.js : seuils LL/L/H/HH, qualité de donnée, alarmes ISA-18.2 avec acquittement, TRS, flux d'énergie, carte de parc.
Démo en ligne : https://consigne-studio.github.io/blocs-industrie-demo/ (les 31 blocs et les 3 écrans, clair et sombre, français et anglais, données simulées).
31 blocs, en sept familles :
- Mesures et consignes : carte KPI à seuils avec mini-courbe et plage normale, bandeau de KPI, indicateur analogique, table de mesures (détection des valeurs figées), changement de consigne borné et confirmé.
- Tendances : tendance temps réel avec seuils et pause, multi-courbes sans double axe, comparaison de périodes.
- Alarmes et événements : bandeau, table d'alarmes (tri ISA-18.2, filtres, acquittement unitaire ou groupé, mise en attente), synthèse et taux par 10 minutes, sources les plus bavardes, journal avec export CSV.
- Production et TRS : TRS et ses trois facteurs, cascade des pertes, TRS sur 7 jours, compteur de poste avec projection, production horaire, frise des états, Pareto des arrêts.
- Équipements : carte, liste filtrable, commande (auto / manuel / local, permissifs, confirmation), maintenance avec zones de vibration ISO 10816.
- Énergie : flux PV / réseau / batterie / consommation, batterie, origine de l'énergie, courbe de charge face à la puissance souscrite.
- Parc de sites : carte de France, carte de site, état des communications.
3 écrans complets : vue parc (8 sites), vue site (énergie, équipements, alarmes, journal), vue machine (mesures, tendances, TRS, états, consigne, maintenance), dans un gabarit à barre latérale repliable. Chaque écran lit ses données dans un seul hook : remplacez la simulation par votre API, MQTT ou OPC UA, la mise en page ne bouge pas.
Pensé pour la salle de contrôle. Les blocs suivent l'IHM haute performance (ISA-101) : écran gris au repos, couleur réservée à l'anormal, état porté par la forme, jamais d'information par la couleur seule, animations coupées si l'utilisateur réduit les mouvements.
Installation shadcn native. npx shadcn@latest add ./registry/r/alarm-table.json copie le bloc, ses dépendances et les jetons de couleur clair et sombre. Copie manuelle possible aussi. Testé dans un projet vierge avec la CLI shadcn 4 et Recharts 2.15 comme 3.x.
État à la livraison, mesuré sur l'archive vendue : npm ci && npm run check vert, 51 tests unitaires et de composants, 76 tests de bout en bout (chaque page au bureau et à 390 px de large, thème, langue, acquittement au clavier, confirmation de consigne), typage strict, lint sans erreur, 0 vulnérabilité npm.
English
31 React blocks and 3 full screens for industrial monitoring and energy, built on shadcn/ui, Tailwind 4 and React 19: LL/L/H/HH threshold KPIs, ISA-18.2 alarms with acknowledgement, OEE, state timeline, power flows, site fleet map. Installed with the shadcn CLI as source code in your project. Light and dark themes, French and English labels, docs in both languages. Live demo at the link above.
Périmètre et limites
- Vous recevez le code source complet (archive zip, 178 fichiers) : blocs, écrans, bibliothèque, registre shadcn, application de démonstration, tests, guide d'installation en français et en anglais.
- Prérequis : React 19, Tailwind CSS 4, shadcn/ui initialisé (style new-york, primitives Radix). Next.js 15 ou 16, ou Vite. Pour shadcn en variante Base UI, une adaptation du gabarit à barre latérale est décrite.
- Ce sont des composants d'interface : ils affichent vos données et vous rendent les actions de l'opérateur. Ils ne se connectent pas eux-mêmes à vos automates et ne remplacent pas un système de contrôle-commande ni votre analyse de sécurité.
- Les données de la démonstration sont simulées ; sites, équipements et équipes sont fictifs.
- Libellés en français et en anglais ; une autre langue se fait en traduisant un dictionnaire.
- Mises à jour de la version majeure 1 incluses.
- Produit conçu avec l'aide d'une IA (Claude), relu et testé. shadcn/ui est un projet indépendant ; ce produit n'est ni affilié ni approuvé par ses auteurs.
Licence
- Développeur (79 €) : une personne, projets illimités, personnels, commerciaux ou pour des clients. Les applications créées se distribuent librement.
- Équipe (199 €) : les mêmes droits pour jusqu'à 10 développeurs d'une même organisation, avec le registre hébergé sur un serveur interne.
- Interdit dans les deux cas : revendre ou publier les blocs eux-mêmes, ou les héberger sur un registre public.
- Remboursement sous 14 jours si le produit ne fonctionne pas comme décrit.
FAQ
Faut-il Next.js ? Non. Les blocs sont des composants client sans dépendance à Next.js ; seul le gabarit des écrans accepte le composant Link de votre routeur.
Mes primitives shadcn sont personnalisées. Les blocs utilisent l'API standard (Card, Button, Table…) : répondez « non » quand la CLI propose d'écraser vos fichiers, les blocs prennent votre style.
Comment brancher mes données ? Chaque bloc reçoit des props simples (types fournis) et rend les actions par des fonctions (onAck, onApply, onCommand). Le guide montre un exemple WebSocket.
Thème sombre, couleurs de ma charte ? Clair et sombre fournis ; les couleurs d'alarme sont des variables CSS à ajuster.
Comment obtenir les mises à jour ? Elles arrivent par Gumroad, dans votre bibliothèque d'achats.
Facture au nom de l'entreprise ? Oui : renseignez la raison sociale et le numéro de TVA au paiement.
Contact : support@consignestudio.fr
