Aller au contenu

Vue · CRM

Pipeline CRM

Disponible

Déclinaison du patron Kanban pour le pipeline commercial : une colonne par étape (Nouveau / Qualifié / Proposition / Gagné) de cartes d'opportunités. Chaque carte combine Card + montant + ProgressBar de probabilité + Avatar du responsable. Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular. Le rendu et le code copié reflètent le framework sélectionné.

Pipeline CRM : opportunités (données mock)

Nouveau2

Airbus : Refonte ERP

120 000 €
Probabilité
Marie Lefebvre

Orange : Portail self-care

65 000 €
Probabilité
Karim Benali
Qualifié2

Safran : Migration cloud

210 000 €
Probabilité
Sophie Durand

Thales : Dashboard BI

48 000 €
Probabilité
Léa Moreau
Proposition2

Société Générale : App mobile

175 000 €
Probabilité
Marie Lefebvre

Capgemini : Audit DS

32 000 €
Probabilité
Tom Girard
Gagné1

Dassault : Design tokens

54 000 €
Probabilité
Sophie Durand
Voir le code (Svelte) 
<div class="pc-board">
  <div class="pc-column">
    <div class="pc-column-head">
      <span class="pc-column-title">Nouveau</span>
      <Badge tone="neutral">2</Badge>
    </div>
    <div class="pc-column-cards">
      <Card interactive class="pc-card">
        <h4 class="pc-card-title">Airbus : Refonte ERP</h4>
        <div class="pc-card-meta">
          <span class="pc-card-amount">120 000 €</span>
        </div>
        <ProgressBar label="Probabilité" value={10} size="sm" showValue />
        <div class="pc-card-owner">
          <Avatar name="Marie Lefebvre" size="sm" tone="category1" />
          <span class="pc-card-owner-name">Marie Lefebvre</span>
        </div>
      </Card>
      <Card interactive class="pc-card">
        <h4 class="pc-card-title">Orange : Portail self-care</h4>
        <div class="pc-card-meta">
          <span class="pc-card-amount">65 000 €</span>
        </div>
        <ProgressBar label="Probabilité" value={15} size="sm" showValue />
        <div class="pc-card-owner">
          <Avatar name="Karim Benali" size="sm" tone="category2" />
          <span class="pc-card-owner-name">Karim Benali</span>
        </div>
      </Card>
    </div>
  </div>
  <div class="pc-column">
    <div class="pc-column-head">
      <span class="pc-column-title">Qualifié</span>
      <Badge tone="info">2</Badge>
    </div>
    <div class="pc-column-cards">
      <Card interactive class="pc-card">
        <h4 class="pc-card-title">Safran : Migration cloud</h4>
        <div class="pc-card-meta">
          <span class="pc-card-amount">210 000 €</span>
        </div>
        <ProgressBar label="Probabilité" value={35} size="sm" showValue />
        <div class="pc-card-owner">
          <Avatar name="Sophie Durand" size="sm" tone="category3" />
          <span class="pc-card-owner-name">Sophie Durand</span>
        </div>
      </Card>
      <Card interactive class="pc-card">
        <h4 class="pc-card-title">Thales : Dashboard BI</h4>
        <div class="pc-card-meta">
          <span class="pc-card-amount">48 000 €</span>
        </div>
        <ProgressBar label="Probabilité" value={40} size="sm" showValue />
        <div class="pc-card-owner">
          <Avatar name="Léa Moreau" size="sm" tone="category4" />
          <span class="pc-card-owner-name">Léa Moreau</span>
        </div>
      </Card>
    </div>
  </div>
  <div class="pc-column">
    <div class="pc-column-head">
      <span class="pc-column-title">Proposition</span>
      <Badge tone="warning">2</Badge>
    </div>
    <div class="pc-column-cards">
      <Card interactive class="pc-card">
        <h4 class="pc-card-title">Société Générale : App mobile</h4>
        <div class="pc-card-meta">
          <span class="pc-card-amount">175 000 €</span>
        </div>
        <ProgressBar label="Probabilité" value={65} size="sm" showValue />
        <div class="pc-card-owner">
          <Avatar name="Marie Lefebvre" size="sm" tone="category1" />
          <span class="pc-card-owner-name">Marie Lefebvre</span>
        </div>
      </Card>
      <Card interactive class="pc-card">
        <h4 class="pc-card-title">Capgemini : Audit DS</h4>
        <div class="pc-card-meta">
          <span class="pc-card-amount">32 000 €</span>
        </div>
        <ProgressBar label="Probabilité" value={60} size="sm" showValue />
        <div class="pc-card-owner">
          <Avatar name="Tom Girard" size="sm" tone="category5" />
          <span class="pc-card-owner-name">Tom Girard</span>
        </div>
      </Card>
    </div>
  </div>
  <div class="pc-column">
    <div class="pc-column-head">
      <span class="pc-column-title">Gagné</span>
      <Badge tone="success">1</Badge>
    </div>
    <div class="pc-column-cards">
      <Card interactive class="pc-card">
        <h4 class="pc-card-title">Dassault : Design tokens</h4>
        <div class="pc-card-meta">
          <span class="pc-card-amount">54 000 €</span>
        </div>
        <ProgressBar label="Probabilité" value={100} size="sm" showValue />
        <div class="pc-card-owner">
          <Avatar name="Sophie Durand" size="sm" tone="category3" />
          <span class="pc-card-owner-name">Sophie Durand</span>
        </div>
      </Card>
    </div>
  </div>
</div>

Composants DS utilisés