Aller au contenu

Vue · CRM / Ventes

Tableau Kanban

Disponible

Patron emblématique : board en colonnes de cartes (pipeline CRM, tâches projet…). Chaque carte combine Card + Badge de priorité + ProgressBar d'avancement + Avatar du responsable. Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular. Débloque les boards tâches, recrutement, OF… par échange de colonnes/cartes.

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é.

Tableau Kanban : pipeline CRM (données mock)

Qualification2

Airbus : Refonte ERP

120 000 €Haute
Avancement
Marie Lefebvre

Orange : Portail self-care

65 000 €Moyenne
Avancement
Karim Benali
Proposition3

Safran : Migration cloud

210 000 €Haute
Avancement
Sophie Durand

Thales : Dashboard BI

48 000 €Basse
Avancement
Léa Moreau

Capgemini : Audit DS

32 000 €Moyenne
Avancement
Tom Girard
Négociation2

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

175 000 €Haute
Avancement
Marie Lefebvre

Dassault : Design tokens

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

Composants DS utilisés