SINESIPreview interne+17 nouveauxMockups CRM SINESI
Aperçus visuels complets du futur CRM SINESI. 26 écrans groupés par persona/usage. Bascule entre dark / light via le bouton en bas à droite. Pour les stagiaires, commence par la bibliothèque de composants.
Authentification & écrans publics
3 mockupsAdmin / Équipe SINESI
11 mockupsPages CRM coeur de métier — Abdou et l'équipe interne
Dashboard Admin
Vue équipe SINESI — KPIs, projets actifs, tâches du jour, sidebar dense
OuvrirListe Clients
Vue table contacts/comptes — filtres, segments, pipeline value
OuvrirFiche Client (détail)
Détail Karam Industrie — onglets Aperçu/Projets/Devis/Factures/Notes/Documents/Activité
OuvrirListe Projets
Vue grille des projets actifs — statuts, équipe, budget, deadlines
OuvrirDétail projet (5 onglets)
Vue / Tâches / CDC / Updates / Fichiers / Facturation + sidebar équipe & client
OuvrirTâches — Kanban
5 colonnes drag-drop · filtres · indicateur visible client · sous-tâches
OuvrirCDC Builder
Templates par secteur, éditeur visuel, preview live, lien personnalisé par client
OuvrirCDC reçu (vue admin)
Lecture d'un CDC client soumis avec score IA et conversion en projet/devis en 1 clic
OuvrirInbox unifié
Email + WhatsApp + CDC + appels dans une seule vue, avec réponse IA suggérée
OuvrirCalendrier équipe
Vue mois/semaine/liste, événements typés, agenda du jour, intégration Calendly
OuvrirDocuments & Fichiers
File manager projet — dossiers, types, partage, drag-drop upload, versions
OuvrirArgent : devis, factures, analytics
4 mockupsDevis (workflow CDC→Devis)
Liste, pipeline statuts (brouillon/envoyé/vu/accepté/refusé), templates, suggestions IA
OuvrirFactures
Émission, suivi paiement, relances auto, statuts (payée/en retard/partielle)
OuvrirAnalytics & Reports
CA mensuel, funnel conversion, top clients, projets actifs — charts SVG
OuvrirTime tracking
Timer actif, entrées par jour, répartition projets, équipe semaine
OuvrirOnboarding, configuration & équipe
4 mockupsNouveau client (wizard)
Création d'un client en 5 étapes — société, contact, catégorisation, accès, récap
OuvrirParamètres
Profil, société, équipe, intégrations (Stripe, n8n, WhatsApp, Claude), 2FA, branding
OuvrirÉquipe & rôles
Membres, RBAC (owner/admin/dev/stagiaire/support), matrice permissions, invitations
OuvrirKnowledge base interne
Base de connaissances pour stagiaires : 6 catégories, recherche, articles populaires
OuvrirPortails externes & IA
3 mockupsPortail Apporteur
KPIs commission, leads, paiements, conseil IA, grille de commission graduée
OuvrirPortail Client
Vue client — projets en cours, factures, messages, ressources
OuvrirAssistant IA
Chatbot CRM avec tool use — créer/lire tâches, projets, devis en langage naturel. Claude.
OuvrirNote stagiaires : ces mockups sont des pages statiques (pas de données réelles, pas de logique métier). Elles servent à calibrer le design system et démontrer les patterns UI. Code source : app/mockups/*. Thème dark/light via data-mockup-theme (CSS variables, voir app/mockups/_theme.css). Pour ajouter un écran : créer app/mockups/<nom>/page.tsx, l'ajouter dans cet index, push sur main.