pipeline-commercial-2026(1)

Fiche Descriptive Complète : Pipeline Commercial 2026

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template pipeline-commercial-2026(1).html

Version 1.0.0

Date de création 27 Mars 2026

Auteur / Designer Refoia Jeremy Tech (Analyse par Gemini)

Type de page Dashboard de Gestion Commerciale (CRM Light)

Objectif principal Suivre le cycle de vente, les litiges et les relances financières.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est une application de gestion de pipeline (Single Page) permettant de visualiser la santé financière commerciale d’une entreprise. Il propose :

Un Dashboard de KPIs (Total actif, Litiges, Devis à relancer).

Un Système de filtrage par statut (En cours, Litige, Payé, etc.).

Une Gestion interactive des deals (Ajout, marquage « Payé », envoi de relances).

Une Vue détaillée via modale pour chaque client.

📌 Public cible (Persona)

👤 Freelances / Indépendants souhaitant suivre leurs factures et devis.

👤 Sales Managers pour une vue macro du pipeline annuel.

👤 Comptables / Admins pour identifier rapidement les impayés.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 sémantique.

Style : CSS Pur (Variables CSS :root pour le mode sombre).

Logique : Vanilla JavaScript (Gestion d’état locale via un tableau d’objets).

Responsive : ✅ Oui (Grille s’adaptant sur mobile, colonnes masquées si nécessaire).

📦 Dépendances / Assets

Google Fonts : DM Sans (Interface) et DM Mono (Données chiffrées).

Icônes : CSS natif (Badges ronds via pseudo-éléments ::before).

📥 ENTRÉES — CONTENU DYNAMIQUE

Le template utilise un tableau d’objets JavaScript clients avec la structure suivante :

# Propriété Type Description

1 client str Nom de l’entreprise cliente.

2 project str Intitulé de la mission ou du produit.

3 amount int Montant en Euros (formaté dynamiquement en €).

4 status str État (En cours, Litige, Impayé, Devis Refusé, Payé).

5 note str Commentaire libre ou étape suivante.

🧱 STRUCTURE DU FICHIER — DOM

pipeline-commercial-2026.html

: Logo « P », Titre et Badge de l’année (2026).

:

.kpi-grid : 3 cartes de synthèse avec barres de couleur distinctives.

.toolbar : Boutons de filtre et bouton d’action principal « + Nouveau deal ».

.table-wrap : Tableau principal des transactions.

#detail-overlay : Modale de consultation/action pour un client spécifique.

#add-overlay : Formulaire de création de nouveau deal.

#toast : Système de notification temporaire en bas à droite.

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs (Dark Mode)

CSS

:root {

–bg: #0f0f11; /* Fond profond */

–surface: #18181c; /* Cartes et Header */

–accent: #6c63ff; /* Violet (Actions primaires) */

–green: #22c55e; /* Succès (Payé) */

–red: #ef4444; /* Alerte (Litige) */

–orange: #f97316; /* Attention (Relance) */

}

🔤 Typographie

Nombres & Montants : DM Mono (alignement parfait des chiffres).

Interface : DM Sans (lisibilité moderne).

🧪 TESTS & VALIDATION (Checklist)

# Cas de test Action Résultat attendu

1 Ajout Créer « Client X » Apparaît en haut de liste + MAJ KPI Total.

2 Paiement Cliquer « Payé ✓ » Statut passe au vert, disparaît du KPI « Actif ».

3 Relance Cliquer « Relancer » Toast orange, date de relance enregistrée.

4 Filtre Sélectionner « Litige » N’affiche que les lignes rouges/orange.

5 Mobile Réduire la largeur Le tableau masque la colonne « Statut » et « Actions » pour rester lisible.

📝 EXEMPLE DE LOGS CONSOLE

Relance envoyée pour Mode & Co

Deal ajouté : Nouveau Client

Total Pipeline mis à jour : 8 000 €