Gestion des stocks et des révisions
Un seul outil pour savoir quand commander chaque pièce, révisions comprises.
Voir le projetBibliothèque de composants · version 0.3
Une bibliothèque, deux marques en production.
Coltam UI réunit les composants d'interface de coltam.fr et de mwanga.partners. Le même code, deux identités : changez de thème en haut de la page. Accessible, sans dépendance, compatible avec une politique de sécurité stricte.
- Composants
- 15
- Dépendances
- 0
- Accessibilité
- AA
- WCAG 2.2, testé par axe-core
- Sécurité
- CSP
- sans style ni script en ligne
Démarrer
Trois fichiers, aucune étape de compilation. Chargez la feuille de styles, un thème, puis le script (uniquement pour les onglets, les étapes, les modales et les notifications). Les polices restent hébergées par votre site.
npm install @coltam/ui
<link rel="stylesheet" href="/node_modules/@coltam/ui/src/coltam-ui.css">
<link rel="stylesheet" href="/node_modules/@coltam/ui/src/themes/coltam.css">
<script src="/node_modules/@coltam/ui/src/coltam-ui.js" defer></script>
<body class="cui" data-theme="coltam"> … </body>Boutons
Zone cliquable d'au moins 44 px. Un lien qui ressemble à un bouton reste un lien.
Badges et sur-titre
Le texte porte le sens, la couleur ne fait que le souligner.
Réalisations & prestations
Brouillon
Projet phare
Payée
En attente
En retard
Nouveau
Cartes
Conteneur neutre ; la variante interactive souligne la carte au survol et au focus clavier.
Mesure et vérification
Économies d'énergie vérifiées selon un protocole reconnu.
Formulaires
Champs natifs avec libellé associé, aide et message d'erreur reliés par aria-describedby.
Alertes
Messages persistants dans la page. Pour un message éphémère, utilisez la notification.
InformationLa synchronisation Stripe a lieu toutes les heures.
Paiement reçuLa facture FAC-2026-031 est soldée.
Révision non couverteCommander 4 filtres avant le 12 octobre.
RuptureStock de joints à zéro sur l'atelier 2.
Chiffres clés
Liste de définitions : chaque valeur reste associée à son libellé pour les lecteurs d'écran.
- Ruptures cachées
- 61
- révélées dès l'import
- Énergie produite
- 1 284 MWh
- sur le mois
- Disponibilité
- 98,7 %
- objectif 97 %
Variante à deux colonnes fixes, avec en-tête :
En bref · mesuré en conditions réelles
- Recalcul complet
- < 0,1 s
- sur 1 200 références
- Actions tracées
- 100 %
- sur 8 rôles
Tableau
Défile horizontalement sur mobile ; les nombres sont alignés à droite en chiffres tabulaires.
| N° | Client | Statut | Montant |
|---|---|---|---|
| FAC-2026-031 | Atelier Nord | Payée | 4 800,00 € |
| FAC-2026-032 | Énergie Sahel | Envoyée | 12 350,00 $ |
Dépliant
Éléments natifs details / summary : clavier, lecteurs d'écran et recherche dans la page fonctionnent sans script.
Le besoin
Six fichiers Excel, aucun ne disait quand commander.
La solution apportée
Un outil unique qui projette le stock jour après jour.
Fenêtre modale
Élément natif dialog : le focus reste dans la fenêtre, Échap la ferme et le focus revient au bouton d'ouverture.
Onglets
Motif ARIA « Tabs » : flèches gauche/droite, Début et Fin pour naviguer au clavier.
12 clients actifs, 3 invitations en attente.
4 devis envoyés ce mois-ci.
2 factures à relancer.
Étapes
Chaque étape vérifie ses champs (validation native) avant de passer à la suivante ; l'étape courante est annoncée.
Parlez-nous de vous
Votre projet
Derniers détails
Notification
Message éphémère annoncé poliment aux lecteurs d'écran (role="status"). Un appel suffit : ColtamUI.toast('…').