Charte Admin Cleaning Service

Source de vérité graphique dérivée de admin.main (DM Sans, or CS #F0AF02, canvas #EDF2FA). Les admins consomment le CSS/JS CDN : une modification ici se propage partout sans toucher à la logique métier.

Domaine cible : admin.docs.cs-sa.ch · Live Pages : cleaning-service-docs-admin.pages.dev. Assets : /design/cs-admin.css · /design/cs-admin-tailwind.js · /chat/cs-admin-chat.js

Principe

Un seul design system pour la structure visuelle (couleurs, typo, boutons, cards, forms, sidebar, auth).
Pas de logique métier dans ces fichiers — chaque admin garde son HTML/JS fonctionnel.
Lien CDN versionné (?v=1) pour forcer le cache après une MAJ.
admin.main = référence UX (rail + desk). Les satellites gardent leur sidebar métier mais partagent la charte.

Tokens

Brand#F0AF02

Brand dark#C99202

Brand light#FFD24D

Ink#15202b

Mute#5a6a7a

Line#e3e8ee

Canvas#EDF2FA

Paper#ffffff

Typo & rayons

Police : DM Sans. Radius standard : 12px. Ombres légères uniquement.

Composants

Boutons

Champ

Badges

Brand OK Warn Danger Mute

Adoption (1 admin)

Dans le <head> de l’admin, après les styles locaux métier si besoin, ou en remplacement des tokens orange/Inter :

<link rel="stylesheet" href="https://cleaning-service-docs-admin.pages.dev/design/cs-admin.css?v=1" />
<!-- Après DNS : https://admin.docs.cs-sa.ch/design/cs-admin.css?v=1 -->
<!-- Option Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cleaning-service-docs-admin.pages.dev/design/cs-admin-tailwind.js?v=1"></script>

<!-- Chat partagé (optionnel) -->
<script src="https://cleaning-service-docs-admin.pages.dev/chat/cs-admin-chat.js?v=1"></script>
<script>
  CSAdminChat.mount({
    api: 'https://api.cs-sa.ch',
    getToken: () => localStorage.getItem('cs.time.token'),
    appId: 'time',
  });
</script>

Remplacer progressivement #F97316 / Inter par les variables --cs-* ou classes .cs-btn, .cs-input, .nav-item.active. Ne pas réécrire les écrans métier dans le CSS partagé.

Admins concernés

Package	URL / rôle	Charte v1	Notes
`admin.main`	Hub — référence visuelle	Source	Tokens extraits ici. Peut aussi linker le CDN pour sync.
`admin.time`	Cleany / time.admin	À migrer	Orange Inter → or DM Sans
`admin.documents`	CS Sign / documents.admin	À migrer	Structure sidebar satellite
`admin.workers`	Talents / talents.admin	À migrer	Mix orange + or Sabrina déjà partiel
`admin.sellers`	Sales / sellers.admin	À migrer	+ `admin.sellers.advanced`
`admin.control`	Access / control.admin	À migrer
`admin.qrcodes`	QR / qrcodes.admin	À migrer
`admin.translations`	Traduction / translations.admin	À migrer
`admin.voice`	Voice / admin.voice	À migrer
`admin.tools`	Outils / tools.admin	CDN live	Premier admin branché sur la charte docs
`admin.style.test`	Playground design	Hors prod	Labo — pas de consommation CDN obligatoire
`admin` (React)	manager.cs-sa.ch	Hors scope	Stack séparée ; alignement optionnel plus tard
`docs.admin`	admin.docs.cs-sa.ch	CDN live	Ce site — héberge CSS/JS

Chat partagé — meilleure gestion

Ne pas partager le chat via localStorage : chaque sous-domaine (*.admin.cs-sa.ch) a son origine isolée.

Widget unique — chat/cs-admin-chat.js chargé depuis docs.admin (UI + FAB).
API centrale — https://api.cs-sa.ch/admin/chat/* (messages, rooms, présence). Auth = Bearer déjà utilisé par l’admin hôte.
Temps réel — WebSocket (Durable Object / PartyKit / Cloudflare) ou polling court ; présence « en ligne » côté API, pas côté page.
Scope — rooms globales équipe + option room par app (appId: time|workers|…).
Isolation métier — le widget ne lit/écrit que le chat ; zéro accès aux tables métier des admins.

Aujourd’hui le JS est un stub UI prêt à brancher. Dès que /admin/chat existe, bump ?v= sur le script : tous les admins qui le chargent reçoivent la MAJ.

Workflow quand on change la charte

Modifier design/cs-admin.css (et docs sur cette page si besoin).
Incrémenter ?v= dans les <link> / docs (ex. v=2).
Déployer docs.admin uniquement.
Les admins qui pointent déjà vers le CDN voient le nouveau design au prochain chargement (cache bust).
Ne redéployer un admin satellite que s’il faut changer le numéro de version dans son HTML, ou migrer encore des styles inline hardcodés.

Fichiers

ch.cleaning-service.docs.admin/
├── index.html                 ← cette documentation
├── design/
│   ├── cs-admin.css           ← tokens + composants (CDN)
│   └── cs-admin-tailwind.js   ← extend Tailwind CDN
├── chat/
│   └── cs-admin-chat.js       ← widget chat partagé
├── img/                       ← icônes / logotype
└── wrangler.toml

Référence visuelle : ch.cleaning-service.admin.main · Design system v1.0.0