Référence interne

Bibliothèque de composants SINESI

Tous les blocs UI utilisés dans le CRM. Copiez-collez depuis cette page pour garantir la cohérence visuelle. Toujours partir d'un composant existant avant d'en créer un nouveau.

01 · Fondations

Couleurs, typographie, espacement

Les tokens fondateurs du design system. Tous les composants en dépendent — ne jamais utiliser de couleur hard-codée hors de cette liste.

Palette de couleurs

Utiliser les tokens via Tailwind config (à venir dans le repo CRM)

Couleurs de marque

Violet SINESI

#45277D

Couleur principale, CTA, headings

Rose accent

#C8196D

Accents, badges, gradients

Bleu CTA

#5A4FCF

Variantes hover, liens

Violet clair

#7C5CFC

Highlights, focus rings, sub-titles

Couleurs sémantiques

Vert succès

#10B981

États positifs (payé, livré, validé)

Orange warning

#F59E0B

Alertes douces, deadlines proches

Rouge erreur

#EF4444

Erreurs, urgences, suppressions

Bleu info

#3B82F6

Notifications neutres, infos

Neutres / Surfaces

Background

#0A0A12

Fond principal dark

Surface 1

rgba(255,255,255,0.03)

Cards, panels

Surface 2

rgba(255,255,255,0.06)

Cards hover, dialogs

Bordure

rgba(255,255,255,0.10)

Séparateurs, bordures cards

Typographie

Police : Space Grotesk · Weights : 400, 500, 600, 700

Heading 1 — 48/40px Bold

h1Titres de pages principales

Heading 2 — 30/24px Bold

h2Titres de sections

Heading 3 — 20px Semibold

h3Sous-sections, cartes

Heading 4 — 16px Semibold

h4Titres de cards, modals

Body — 14px Regular · La taille par défaut pour le texte courant.

bodyParagraphes, descriptions

Body Small — 12px Regular · Pour aides, labels secondaires.

body-smCaptions, hints, métadonnées

Caption — 10px Bold UPPERCASE

captionEyebrows, tags système

code-snippet.tsx

monoCode inline, IDs techniques

Espacement & rayons

Échelle multiple de 4px · rayons standards rounded-md/lg/xl/2xl

Padding scale (Tailwind p-N)

p-1

4px

p-2

8px

p-3

12px

p-4

16px

p-5

20px

p-6

24px

p-8

32px

Border radius

rounded-md

6px

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-3xl

24px

rounded-full

9999px

02 · Atomes

Boutons

5 variants, 3 tailles, 4 états (idle/hover/disabled/loading). Le LED button est réservé aux CTAs principaux (1-2 max par écran).

Variantes × tailles

primary

outline

led

ghost

destructive

Usages typiques

Action principale (1 par écran)

Action secondaire

Action contextuelle

Action destructive

03 · Atomes

Formulaires

Inputs, selects, choices, toggles. Toujours utiliser React Hook Form + Zod pour la validation. Labels obligatoires, placeholders descriptifs.

Inputs texte

Variantes : default, with icon, disabled, error

Nom complet

Tel qu'il apparaîtra sur les factures

Email professionnel

Téléphone

Recherche

Champ désactivé

Champ en erreur

L'adresse email n'est pas valide.

Textarea & mot de passe

Description du projet

Maximum 500 caractères

Mot de passe

Radio & Checkbox

Espacement vertical 8px entre options

Toggle & Select

Toggles

Recevoir les notifications email

Mode sombre par défaut

Mode anonyme analytics

Secteur d'activité

Multi-sélection autorisée

Hôtellerie+ Immobilier+ Ajouter

04 · Atomes

Badges, statuts & tags

Utilisés pour : statut de projet, priorité de tâche, type de secteur, état de facture, niveau d'alerte. Toujours utiliser le bon tone sémantique.

Tons sémantiques

Idle / actif / dot

Sans dot

NeutreEn coursPayéeÀ payerEn retardInfoPromo

Avec dot

BrouillonEn coursLivréReviewBloquéNouveau

Cas d'usage CRM

Statut projet :BrouillonDevis envoyéEn coursEn revueLivréEn pause

Statut facture :BrouillonEnvoyéePayéeÀ payerEn retard

Priorité tâche :FaibleMoyenneHauteUrgente

Type projet :E-commerceERPTransportHôtellerie

05 · Atomes

Avatars

Toujours afficher les initiales si pas de photo. Gradients variés pour éviter monotonie sur les listes d'utilisateurs.

Tailles & gradients

Stack (équipe assignée)

06 · Molécules

Cards

Tous les composants composites principaux : KPI, projet, message, facture, lead, alerte. Toujours dans des conteneurs bordés bg-white/[0.03].

KPI Cards (grille 4 colonnes)

Projets actifs

+2 cette sem.

Tâches du jour

3 urgentes

Factures impayées

42 000 DH dûs

185k DH

CA du mois

+12% vs M-1

Cards composites

TRANS MOUHOUT — Tracking colis

Société de transport · SARL

En cours

12 juin 2026·Budget 65 000 DH

35%

3 factures en retard

Montant total dû : 42 000 DH

SINESI-2026-038 · Riad Arabella+12 j
SINESI-2026-041 · Karam Distribution+3 j
SINESI-2026-042 · Audibene+1 j

07 · Organismes

Tables & listes

Pour afficher des collections (clients, projets, factures, tâches). Toujours avec filtres + pagination + état vide.

Table standard

En-têtes en SCREAMING_CAPS · lignes hoverables · pagination en bas

Client	Type	Statut	Échéance	Progression
TM TRANS MOUHOUT	Transport	En cours	12 juin	35%
KD Karam Distribution	ERP	En revue	28 mai	78%
RM Rayonnage Maroc	BTP	Livré	Livré	100%

3 sur 12 résultats

08 · Indicateurs

Progression & étapes

Barres de progression, anneaux circulaires, indicateurs d'étape (CDC wizard, projet pipeline).

Linear & step indicators

Avancement projet35%

Étape 3 sur 933%

78%

Anneau circulaire — utilisé sur la fiche détail projet pour la progression globale.

Steps wizard

Type de projet

Vos objectifs

Public cible

Fonctionnalités

Inspirations

Pages désirées

Récap + IA

09 · États

États : vide, chargement, erreur

Tous les écrans CRM doivent gérer ces 3 états. Jamais d'écran vide sans illustration ou message.

Empty / Loading / Error

Aucun projet

Vos projets apparaîtront ici une fois que vos clients auront soumis leur cahier de charges.

Chargement…

Impossible de charger

Le serveur ne répond pas. Vérifiez votre connexion ou réessayez dans un instant.

Toasts (notifications transitoires)

Facture envoyée

SINESI-2026-042 envoyée à FIDAE.

Échéance proche

La facture #038 expire dans 3 jours.

Échec de la sauvegarde

Vérifiez votre connexion réseau.

Nouveau lead reçu

TRANS MOUHOUT a rempli son CDC.

Modal / Dialog

Supprimer ce projet ?

Cette action est irréversible

Tous les fichiers, tâches et factures liés à TRANS MOUHOUT — Tracking colis seront définitivement supprimés. Tapez TRANS MOUHOUT pour confirmer.

10 · Layouts

Sidebars, top bars, page headers

Les conteneurs structurels. Réutilisés sur dashboard admin (sidebar+topbar) et portails client/apporteur (header simple).

Page header (titre + actions)

ClientsTRANS MOUHOUT

TRANS MOUHOUT

Transport · SARL·Tétouan, Maroc

Snippets à réutiliser

Sidebar admin

240px fixe, dark, navigation par icône + label

Header portail

Header simple, nav horizontale, plus aérée

Détail avec onglets

Header + tabs row + sidebar droite contextuelle

Kanban drag-drop

5 colonnes, cards tâches, indicateurs sous-tâches

Builder visuel

Sidebar templates + éditeur + preview live

Portail apporteur

KPIs commission, leads, paiements, conseils IA

11 · Avancés

Composants avancés (critiques V1)

Composants couramment utilisés à travers le CRM : tabs, dropdowns, tooltips, breadcrumbs, date pickers, command palette, filter pills, upload zones.

Tabs / Onglets

Border-bottom violet sur l'actif · 4px gap · icon optionnelle

Variante : border-bottom

Variante : pills

Dropdown menu / Menu contextuel

Déclenché par bouton '...' ou chevron · max 220px wide

Actions ligne (table)

Select avancé

Tooltip

Délai 600ms avant apparition · pointer arrow · max 240px wide

Top

Envoyer par WhatsApp

Bottom + raccourci

Ouvrir la recherche⌘K

Right

Aller à la fiche

Left + helper

ARR : revenu annualisé (mensuels × 12).

Breadcrumb

Séparateur chevron 12px · texte muted sauf dernier · cliquables

Filter pills

Filtres rapides au-dessus des listes · pill actif + violet

Filtres clients

Filtres actifs (avec retrait)

Filtres actifs :IndustrieFèsBudget > 50kVIP uniquement

Date picker / Range

Calendrier mini-mois + raccourcis · range = 2 dates

Trigger (date unique)

Mai 2026

Command palette (⌘K)

Recherche globale + actions rapides · raccourcis claviers visibles

esc

Clients

Projets

Actions

4 résultats↑↓ naviguer↵ ouvrir

File upload / Dropzone

Drag-drop + parcourir · preview + barre de progression

État vide (idle)

Glisser-déposer ou parcourir

PDF · DOCX · XLSX · PNG · JPG · jusqu'à 25 MB

État avec fichiers (preview + progress)

Devis Karam ERP V2 — final.pdf

342 KB · Importé à 14:32

Maquette dashboard.png

2.4 MB / 3.2 MB · 28% restant

72%

Backup-2026-05.zip

Trop volumineux (38 MB > 25 MB)

Tag input

Tags multiples + input inline · supprimer au clic

Tags du client

Grand compteRécurrentERPIndustrie

Appuyer sur Entrée pour valider · max 8 tags

Avec suggestions (typeahead)

VIP

Note : dans l'app réelle ce panneau est en position: absolute. Affiché ici en flow pour la démo.

Drawer / Side panel

Quick-view sans changer de page · slide depuis la droite · overlay scrim

Combobox / Autocomplete

Sélection assistée avec filtre + section · idéal pour clients/projets

Lier à un projet

↓

Projets actifs

Récemment livrés

3 résultats sur 12↑↓ naviguer · ↵ sélectionner

Note : dans l'app réelle ce panneau est en position: absolute. Affiché ici en flow pour la démo.

Banner / Alert

Bandeau pleine largeur en haut de page · 4 tons (info/warning/error/success)

Maintenance prévue dimanche 17 mai à 02h00

Indisponibilité estimée 30 minutes. Les abonnements et factures continuent en arrière-plan.

Abonnement Abtal.ma expire dans 27 jours

Auto-renouvellement désactivé. Confirme avant le 10 juin 2026.

1 facture en retard — Riad Mounia · 7 000 MAD

Échue il y a 4 jours. 2 relances envoyées sans réponse.

Devis DEV-2026-031 accepté par TRANS MOUHOUT

Le projet a été créé automatiquement et apparaît dans /projets.

Confirmation dialog

Plus léger que le modal · destructif / informatif · centré, max 400px

Supprimer cette tâche ?

L'action est irréversible. La tâche et ses sous-tâches seront supprimées.

Envoyer le devis maintenant ?

Le devis sera envoyé par email à M. Karam Slaoui avec lien de validation Stripe.

Pagination avancée

Pages numérotées + jump-to · go-to-first/last · texte de résultats

Simple (sans pages numérotées)

Affichage de 1 à 8 sur 24 résultats

Avec pages numérotées

Affichagesur 184 résultats

…

Jump-to-page

Aller à la pagesur 19

Skeleton (chargement)

animate-pulse · bg-white/[0.06] · structures qui correspondent au contenu réel

Card

Lignes de table

KPI card

Liste verticale

Bloc de texte

Pour les stagiaires : ouvrez le fichier app/mockups/components/page.tsx du repo CRM pour copier-coller les composants. Toute nouvelle UI doit dériver de ce kit — pas de couleurs hard-codées hors palette, pas de tailles arbitraires, pas de variants non documentés. En cas de doute : poser la question avant de coder.