← Bibliothèque / Socle
Shell Back Office
Coque canonique de tous les back offices PACIFIK'AI : sidebar à sections, topbar, recherche ⌘K, dock Agent IA, palette OKLCH dérivée d'une seule couleur de marque, polices Figtree/Instrument Sans.
Construit à partir de :
tourisme-backoffice (Aqua Safari v12+)Studio Bellezarangiroa-diving-center/backoffice
Dans le back office
Sidebar gauche repliable (sections Pilotage > Commercial > Exploitation > Intelligence, footer Paramètres/Aide/Upgrade ambre) · Topbar sticky h-14 (burger mobile, fil d'Ariane, titre + localité + heure Tahiti, recherche ⌘K, bouton Agent IA, CTA primaire contexte) · Panneau agent en COLONNE SŒUR droite redimensionnable (340–720 px ou plein écran : il POUSSE le contenu, le voisin cède la place) · Toaster bottom-right · Page d'accès /acces séparée.
Pages & écrans
| Page / zone | Rôle |
|---|---|
/acces | Porte de connexion : mot de passe partagé v1 (cookie HMAC 12 h, rate-limit double, anti open-redirect) — cible v2 = comptes nominatifs sur invitation |
Sidebar | Pastilles compteurs servies par requête SQL count-only en Suspense local ; dropdown sélecteur multi-opérateurs si >1 tenant |
TopBar ⌘K | Palette commandes globale dont les entrées suivent les droits d'écriture |
Dock Agent | Toggle topbar + colonne sœur persistée ; entrée Agent IA TOUJOURS en haut à droite |
Patterns UI/UX
- 1 couleur saisie → 10 nuances OKLCH dérivées + texte-sur-marque avec contraste mesuré WCAG ≥ 4.5:1, injectée serveur avant paint (zéro FOUC)
- Un seul rayon global (.625rem), cartes à filet 1 px, densité compacte, chiffres tabular-nums
- Polices : shell = Figtree, pages métier = Instrument Sans (thème Belleza) ou Figtree partout (règle Aqua v12+, décision Jordy)
- Projection DTO minimale par écran (ne voyager que ce qui est montré) ; frontière confidentialité RSC explicite
- Light uniquement — le dark mode mort est RETIRÉ, jamais laissé moitié branché
Composants clés
- OperatorShell
- AppSidebar (collapsible icon)
- TopBar
- GlobalSearch ⌘K
- AgentDock + useAgentDock
- PageHeader (titre + chapô 16 px borné 68 ch)
- StatCard / StatusBadge / FillBar / EmptyState
- Squelettes à forme exacte (8 formes)
- Toaster sonner
Automatisations
- Stats sidebar en promesse serveur SQL count-only résolue en <Suspense> local (jamais de gros compteurs bloquants)
Intelligence artificielle
- Rôle IA
- Le dock agent fait partie du shell par défaut : chaque nouveau back office naît avec l'assistant déjà ancé.
- Modèles
- Centralisé dans UN fichier (lib/ia-modele.ts / modele.ts) — toute l'app partage le même cerveau
- Garde-fous
- —
Données
- settings (agent_config JSONB)
- nav-counts endpoints dédiés
Invariants & pièges
- Tailwind scanne aussi les commentaires : citer une classe dans un commentaire la régénère
- flex en style en ligne écrase shrink-0 : pour occuper l'écran, c'est le VOISIN du panneau qui doit céder
- Copier un back office = copier son ARCHÉTYPE (résa = tableau dense, messagerie = 2 volets), pas son thème
- 112 couleurs brutes → jetons --danger/--alerte/--succes, banc anti-régression prouvé par mutation