Pular para o conteúdo principal

Branding & White-Label

Module de personnalisation visuelle multi-tenant. Chaque tenant peut adapter son instance Kaltiv ERP à son identité de marque sans affecter les autres clients SaaS. Conçu pour les organisations soucieuses de leur image (plantations agro-industrielles, coopératives, intégrateurs revendeurs).

Surface utilisateur​

L'écran Paramètres > Branding (/settings/branding) propose 2 sections principales :

  • Palette de couleurs — 3 couleurs HSL (primaire, sidebar, accent)
  • Logo de l'entreprise — upload PNG/SVG (max 2 Mo)

Plus une zone d'actions : Sauvegarder | Réinitialiser aux défauts.

Modèle de données​

Configuration stockée dans tenants.settings.brand (JSONB) :

{
  "brand": {
    "primaryColor": "142.8 64.2% 24.1%",
    "sidebarColor": "30 30% 8%",
    "accentColor": "45 80% 50%",
    "logoUrl": "https://[bucket].supabase.co/.../logo.png"
  }
}

Format HSL (Hue Saturation Lightness) plutôt que HEX pour faciliter les variations dark/light mode et l'interpolation de couleurs dérivées (hover, active, muted).

Le hook useBranding lit cette config + applique les CSS variables au runtime via document.documentElement.style.setProperty(...).

Couleurs​

SlotUsageVariable CSS
PrimaireBoutons d'action, accents, badges actifs--primary
SidebarNavigation latérale, fond sidebar mobile--sidebar-background
AccentHighlights, badges secondaires, hover--accent

L'éditeur convertit automatiquement HEX ↔ HSL pour confort utilisateur (input couleur natif HTML5 = HEX), mais persiste en HSL.

Aperçu en temps réel​

Avant sauvegarde, les changements sont appliqués au DOM via document.documentElement.style.setProperty() — l'utilisateur voit l'effet instantanément. La sauvegarde déclenche tenant.settings.brand write + invalidation de cache.

Stocké dans Supabase Storage (brand-logos bucket), partitionné par tenant via RLS sur le storage path ${tenant_id}/logo.{ext}.

Contraintes :

  • Formats : PNG, SVG (préféré pour scalabilité)
  • Taille max : 2 Mo
  • Affiché dans :
    • Sidebar (header, ~32 px de haut)
    • Écran de connexion (centre, ~120 px)
    • Exports PDF (entête bulletins de paie, factures, rapports)
    • Email transactionnels (welcome, reset password, payroll notifications)

Drag-and-drop supporté ; fallback au bouton "Parcourir".

Multi-tenant et isolation​

  • Storage : RLS sur storage.objects filtrant par path LIKE '${tenant_id}/%'
  • DB : tenants.settings.brand accessible uniquement aux admins du tenant
  • Cache : useBranding invalide à chaque modification ; bust automatique du cache CDN sur le logo
  • Aucun fallback global : un tenant sans config explicite hérite des défauts Kaltiv (vert plantation primaire, gris foncé sidebar)

Réinitialisation​

Le bouton "Réinitialiser" :

  1. Restaure les 3 couleurs HSL aux défauts Kaltiv
  2. Supprime le logo du Storage (optionnel)
  3. Vide tenants.settings.brand ou y écrit les défauts explicites
  4. Recharge l'app pour réappliquer les CSS variables

Cas d'usage métier​

PersonaUsage
PDG / AdminAligne l'ERP à la charte graphique de l'entreprise (acceptation interne)
Intégrateur revendeurPersonnalise une instance pour un sous-client (branding white-label)
CoopérativeAffiche son logo sur les bulletins/factures envoyés aux adhérents
Multi-siteChaque filiale sur un tenant distinct = branding distinct

Conformité​

  • Pas de PII dans le logo (responsabilité tenant)
  • Logos stockés en Supabase EU (région eu-west-1) — RGPD compatible
  • Pas de tracking tiers (pas de Google Fonts CDN, fonts auto-hébergées)
  • Le mode clair/sombre dérive automatiquement des couleurs HSL primaires

Liens utiles​