donnees_20260325_150255

Fiche Descriptive Complète : Pipeline Commercial NYC Industrial

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template Pipeline Commercial NYC Industrial Edition.html

Version 1.0.0

Date de création 25/03/2026

Auteur / Designer Refoia Jeremy Tech (Inspiré par le style Industriel NYC)

Type de page Dashboard Commercial / Sales Pipeline

Objectif principal Visualiser l’état financier du pipeline et la croissance du CA

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template propose un tableau de bord à l’esthétique « Industrielle Manhattan » (brut, contrasté, typographie forte). Il permet de suivre en un coup d’œil :

Le montant total du pipeline commercial.

La segmentation des revenus par statut (Acompte, En attente, Expiré).

L’évolution graphique du chiffre d’affaires sur 6 mois via un graphique linéaire.

Le détail des transactions récentes via une table de données structurée.

📌 Public cible (Persona)

👤 Directeurs Commerciaux en milieu industriel ou logistique.

👤 Chefs d’atelier / Managers souhaitant suivre la production lancée (acomptes).

👤 Analystes Business pour le reporting mensuel de croissance.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 sémantique.

Framework CSS : Tailwind CSS (via CDN).

Framework JS : Chart.js (pour la visualisation de données).

Responsive : ✅ Oui — Adapté via grille 12 colonnes (système « Manhattan Grid »).

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 total_pipeline float ✅ Oui Montant total affiché dans le header (ex: 500,00€)

2 stats_cards array ✅ Oui Liste des 3 blocs (Acompte, Attente, Expiré)

3 chart_data array ✅ Oui Points de données pour le graphique Chart.js

4 client_rows array ✅ Oui Liste des clients pour remplir le tableau HTML

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

Hover sur Stat Cards : Inversion brutale des couleurs (fond blanc → noir, texte noir → blanc) pour un effet interactif fort.

Graphique Interactif : Tooltips au survol des points du graphique (CA Mensuel).

Responsive Toggle : Adaptation de la grille de 12 colonnes (stacking vertical sur mobile).

🧱 STRUCTURE DU FICHIER — DOM

Pipeline Commercial NYC

📌 : Configuration Meta, Tailwind, Google Fonts, et styles spécifiques (Manhattan Grid).

📌 :

🏗️

: Identité visuelle « Industrial . » et indicateur de performance global.

🏗️

(Grid Layout) :

🧱 Sidebar Gauche (col-4) : Stack de 3 cards d’indicateurs clés.

🧱 Section Graphique (col-8) : Bloc noir contrasté contenant le canvas nycChart.

🧱 Section Table (col-12) : Tableau de bord détaillé des clients.

🏗️