Mise en page basée sur la mise en page : pages de tableau de bord SaaS B2B adaptatives avec jetons de conception et états des composants

Il existe un SaaS B2B pour la gestion des achats et des entrepôts. La conception a été mise à jour dans Figma, mais l'interface du produit est en partie basée sur l'ancienne mise en page, en partie dans un kit d'interface utilisateur obsolète. Il est nécessaire de disposer un ensemble d'écrans de compte personnel clés en fonction de la disposition afin qu'ils puissent être connectés sans douleur à l'interface actuelle.

Environnement technique et données initiales
- Maquettes et prototypes dans Figma : ordinateur de bureau 1440, tablette 1024, mobile 375, y compris les états de survol-focus-actif-désactivé et de chargement d'erreur vide
- Stack actuelle : React 18, Vite, TypeScript, Modules SCSS, Storybook déjà connectés
- Le projet comporte des composants de base, mais ils ne coïncident pas avec la nouvelle conception - il est permis de créer une nouvelle couche de composants d'interface utilisateur à côté de l'ancienne.

Portée des travaux et étapes
1) Audit des layouts et approbation de la cartographie des écrans composants : mettre en évidence les blocs réutilisés, déterminer la grille, la typographie, les couleurs, les espacements, les états
2) Mise en place des jetons de conception dans le code : variables CSS pour les couleurs, la typographie, les rayons, les ombres, le z-index, l'échelle d'espacement. Prise en charge des thèmes clairs et sombres de la mise en page
3) Aménagement et intégration de 6 écrans d'armoires dans le projet (avec connexion aux pages de tournées existantes sans changer la logique métier) :
- Tableau de bord avec widgets et restructuration adaptative de la grille
- Tableau de commande : en-tête collant, défilement horizontal sur les écrans étroits, états d'erreur de chargement vide
- Page de commande : composition en deux colonnes, blocs avec replis, adaptative au mobile
- Formulaire de création de commande : mise en page multi-étapes, états de validation des champs (visuel), textes désactivés et d'aide
- Centre de notifications : regroupement par dates, ne faites pas de virtualisation, mais assurez une mise en page productive et des transferts corrects
- Paramètres du profil : sections, bascules, confirmation des actions (fenêtre modale)
4) Composants au niveau de l'interface utilisateur : bouton, entrée, sélection (style personnalisé au-dessus du natif), case à cocher, bascule, badge, onglets, modal, info-bulle, squelette, toast. Les composants doivent avoir des états de la mise en page et être stylisés dans Storybook
5) Vérification et polissage multi-navigateurs : Chrome, Firefox, Safari, Edge. Correction des écarts avec Figma

Restrictions
- Ne touchez pas à l'API, à la logique métier et aux types de données - la tâche concerne spécifiquement la mise en page, les styles, la mise en page, les états et la connexion aux pages actuelles.
- N'utilisez pas de bibliothèques d'interface utilisateur lourdes (MUI, AntD et analogues) - uniquement la pile existante et vos propres styles
- La mise en page doit être sans référence au pixel-perfect au niveau de 1-2px, mais en respectant la grille, les retraits et la typographie dans les tolérances
- Accessibilité : états de focus visibles, ordre de tabulation correct, étiquette aria pour les icônes de boutons, contraste du texte au moins WCAG AA pour le corps du texte

Résultat spécifique
- PR dans le référentiel avec une disposition prête à l'emploi de 6 écrans et un ensemble de composants d'interface utilisateur
- Storybook avec tous les composants et leurs états
- Bref README : comment lancer, où consulter les pages, quels jetons ont été ajoutés

Critères d'acceptation mesurables
- Conformité visuelle avec Figma sur les points d'arrêt de contrôle 1440-1024-768-375 avec une tolérance de marge jusqu'à 4px et une tolérance de taille de police jusqu'à 1px
- Pas de défilement horizontal des pages en 375 et 768, sauf pour le tableau des commandes, où il est autorisé à l'intérieur du conteneur
- Tous les éléments interactifs ont des états survol-focus-actif-désactivé comme dans la mise en page
- Phare (Chrome) pour chacune des nouvelles pages : accessibilité pas inférieure à 90, bonnes pratiques pas inférieure à 90 (hors backend)
- Aucune erreur critique dans la console lors de la navigation dans de nouvelles pages

Matériels
- Je donnerai accès à Figma et au référentiel, une liste de pages et des liens vers des mises en page avant le début. Au cours du processus, 2 à 3 appels courts sont attendus pour synchroniser les composants et les tolérances.