Pattern transversal

L'agencement du back-office

Quatre back-offices ont convergé vers la même forme, et ce n'est pas une préférence de goût : livrer une cinquième disposition, c'est livrer un quatrième produit là où le client attendait le même. L'outil paraît étranger à la gamme avant même qu'on l'ouvre.

Anatomie

Au quotidien

Dashboard

Conversations7

À vérifier3

Dossiers

Propositions

Réglages

Entreprise

Réglages

☰

La file

Rangiroa Diving Center · Moana · gérant

✦ Assistant?

La file

7 demandes en attente, dont 2 depuis plus de 24 h.

Assistant⤢ ✕

Combien de places libres samedi ?

4 sur la sortie de 8 h. J'ai préparé la réponse à Léa — à valider.

Zone	Ce qu'elle porte	Dimension
Colonne gauche	Barre latérale — sections, pastilles, rail replié	16 rem · 3 rem en rail
Bandeau haut	Repli · titre de l'écran · assistant · aide	56 px, collant
Centre	L'écran : son propre h1 + une phrase chiffrée, puis le contenu	reste
Colonne droite	Panneau assistant — fermé par défaut, poussant, agrandissable	320–∞ px

La barre latérale

5 règles

Le sommaire du métier. Elle range les écrans par MOMENT d'usage, pas par organigramme : ce qu'on ouvre vingt fois par jour en haut, ce qu'on touche trois fois par an tout en bas.

Trois sections nommées, jamais une liste plate

« Au quotidien » · « Dossiers sensibles » · « Réglages ». Une liste de vingt entrées sans section oblige à relire le menu entier à chaque fois. Les sections donnent une adresse mentale.

PACIFIK'AI/solutions/bookflow/factory/sites/rangiroa-diving-center/backoffice/app/src/components/barre-laterale.tsx

Une pastille de comptage — et jamais de pastille à zéro

Le serveur compte, la barre affiche. Compteur non calculable ⇒ PAS de pastille : « une pastille à zéro appelle un clic pour rien, une pastille vide inquiète pour rien ».

PACIFIK'AI/solutions/bookflow/factory/sites/rangiroa-diving-center/backoffice/app/src/components/barre-laterale.tsx

L'infobulle dit le CONTENU, pas le titre

Survoler « À vérifier » répondait « À vérifier » : autant ne rien afficher. Elle dit désormais ce qu'on TROUVE sur l'écran — c'est justement ce qu'on cherche quand on hésite, et c'est la seule aide qui reste quand la barre est repliée en rail d'icônes.

PACIFIK'AI/solutions/bookflow/factory/sites/rangiroa-diving-center/backoffice/app/src/components/barre-laterale.tsx

Le menu n'est PAS une autorisation

Il masque ce qui n'est pas accessible pour ne pas proposer une porte fermée, mais chaque page refait le contrôle côté serveur. Masquer une entrée n'a jamais protégé une route : on garde les deux.

PACIFIK'AI/solutions/bookflow/factory/sites/rangiroa-diving-center/backoffice/app/src/components/barre-laterale.tsx

Repliée ≠ supprimée

Un menu replié devient un RAIL d'icônes. Il ne retire pas les accès — il les réduit. Une bascule de largeur doit être la dernière media query à parler, sinon elle est écrasée.

La barre haute

4 règles

Où l'on est, qui l'on est, et par où appeler de l'aide. Collante, 56 px, fond translucide. Elle porte trois choses et pas une de plus : le repli de la barre latérale, le titre de l'écran, et à droite les deux boutons d'assistance.

Un segment inconnu ne s'affiche jamais tel quel

Sans repli, la fiche d'une conversation titrerait « 8f3c1e70-… ». Un identifiant technique en tête de page est l'aveu que personne n'a ouvert l'écran. Tout segment qui ressemble à un identifiant se replie sur le nom de sa rubrique.

PACIFIK'AI/solutions/bookflow/factory/sites/rangiroa-diving-center/backoffice/app/src/components/barre-haute.tsx

Le repère de situation est un <p>, pas un <h1>

Chaque écran porte son propre titre de niveau 1 dans le contenu, en grand, avec sa phrase chiffrée. Un second h1 dans la barre ferait deux titres de niveau 1 par page.

PACIFIK'AI/solutions/bookflow/factory/sites/rangiroa-diving-center/backoffice/app/src/components/barre-haute.tsx

🔴 La déconnexion a quitté la barre haute

Elle était le premier bouton de soumission de chaque page : un crawler de QA qui clique tout commençait donc par SE DÉCONNECTER, puis rapportait que rien ne marche sur un produit intact — quatre passes de diagnostic perdues. Un geste qu'on fait une fois par jour n'a rien à faire à côté de ceux qu'on fait cent fois. Elle vit dans Réglages.

PACIFIK'AI/solutions/bookflow/factory/sites/rangiroa-diving-center/backoffice/app/src/components/barre-haute.tsx

La déconnexion est un formulaire, jamais un lien

Elle change l'état du serveur. Un lien serait suivi par un préchargeur ou un antivirus, et déconnecterait quelqu'un au milieu d'une conversation.

PACIFIK'AI/solutions/bookflow/factory/sites/rangiroa-diving-center/backoffice/app/src/components/barre-haute.tsx

Le panneau assistant

5 règles

Une colonne SŒUR du contenu, ouverte depuis la barre haute. C'est la pièce que Jordy cite en exemple, et sa mécanique compte autant que son existence.

🔴 Il pousse le contenu, il ne le recouvre jamais

C'est ce qui permet de garder la file sous les yeux pendant qu'on interroge l'assistant à son sujet. Un panneau flottant obligerait à le fermer pour vérifier ce qu'il vient de dire — c'est-à-dire à le croire sur parole.