Aller au contenu

Vue · CRM

Scoring des leads

Disponible

Qualification des leads par score : carte de score, répartition par source et liste priorisée. Combine ScoreCard, répartition en légende et table des leads chauds avec ProgressBar, Badge et Avatar.

Rendu multi-framework

Scoring des leads (données mock)

Score moyen

74

Leads chauds

23

Convertis ce mois

11

Délai moyen (j)

18

Score cible (≥ 80)

23

Taux de qualification

38%

Répartition par source

38 %Inbound web
27 %Campagne email
19 %Événement
10 %Référencement
6 %Autre

Leads prioritaires

Lead
Score
Source
Statut
Marie LefebvreAirbus Group
92
Inbound web
Chaud
Karim BenaliOrange SA
88
Campagne email
Chaud
Sophie DurandSafran SA
81
Événement
Chaud
Léa MoreauThales Group
74
Référencement
Tiède
Tom GirardCapgemini
67
Campagne email
Tiède
Julie MartinSociété Générale
55
Inbound web
Froid
Voir le code (Svelte) 
<div class="ls-shell">
  <div class="ls-scorecards">
    <KpiCard label="Score moyen" value="74" delta={8} trend="up" />
    <KpiCard label="Leads chauds" value="23" delta={5} trend="up" />
    <KpiCard label="Convertis ce mois" value="11" delta={3} trend="up" />
    <KpiCard label="Délai moyen (j)" value="18" delta={-4} trend="down" />
  </div>
  <div class="ls-mid">
    <div class="ls-kpis">
      <KpiCard
        label="Score cible (≥ 80)"
        value={23}
        delta={5}
        deltaFormat="absolute"
        tone="category1"
        sparkline={[10,13,15,17,20,23]}
      />
      <KpiCard
        label="Taux de qualification"
        value={0.38}
        format="percent"
        delta={0.06}
        deltaFormat="percent"
        tone="category2"
        sparkline={[0.26,0.29,0.31,0.34,0.36,0.38]}
      />
    </div>
    <div class="ls-pie-legend">
      <h3 class="ls-legend-title">Répartition par source</h3>
      <div class="ls-legend-items">
        <div class="ls-legend-row">
          <Badge tone="category1">38 %</Badge>
          <span class="ls-legend-label">Inbound web</span>
        </div>
        <div class="ls-legend-row">
          <Badge tone="category2">27 %</Badge>
          <span class="ls-legend-label">Campagne email</span>
        </div>
        <div class="ls-legend-row">
          <Badge tone="category3">19 %</Badge>
          <span class="ls-legend-label">Événement</span>
        </div>
        <div class="ls-legend-row">
          <Badge tone="category4">10 %</Badge>
          <span class="ls-legend-label">Référencement</span>
        </div>
        <div class="ls-legend-row">
          <Badge tone="category5">6 %</Badge>
          <span class="ls-legend-label">Autre</span>
        </div>
      </div>
    </div>
  </div>
  <div class="ls-table-wrap">
    <h3 class="ls-table-title">Leads prioritaires</h3>
    <div class="ls-table-head">
      <div class="ls-th">Lead</div>
      <div class="ls-th">Score</div>
      <div class="ls-th">Source</div>
      <div class="ls-th">Statut</div>
      <div class="ls-th"></div>
    </div>
    <div class="ls-table-body">
      <div class="ls-row">
        <div class="ls-cell ls-cell-lead">
          <Avatar name="Marie Lefebvre" size="sm" tone="category1" />
          <div class="ls-lead-info">
            <span class="ls-lead-name">Marie Lefebvre</span>
            <span class="ls-lead-company">Airbus Group</span>
          </div>
        </div>
        <div class="ls-cell ls-cell-score">
          <span class="ls-score-value">92</span>
          <ProgressBar label="" value={92} size="sm" showValue={false} />
        </div>
        <div class="ls-cell">Inbound web</div>
        <div class="ls-cell">
          <Badge tone="success">Chaud</Badge>
        </div>
        <div class="ls-cell ls-cell-actions">
          <Button variant="ghost" size="sm">Contacter</Button>
        </div>
      </div>
      <div class="ls-row">
        <div class="ls-cell ls-cell-lead">
          <Avatar name="Karim Benali" size="sm" tone="category2" />
          <div class="ls-lead-info">
            <span class="ls-lead-name">Karim Benali</span>
            <span class="ls-lead-company">Orange SA</span>
          </div>
        </div>
        <div class="ls-cell ls-cell-score">
          <span class="ls-score-value">88</span>
          <ProgressBar label="" value={88} size="sm" showValue={false} />
        </div>
        <div class="ls-cell">Campagne email</div>
        <div class="ls-cell">
          <Badge tone="success">Chaud</Badge>
        </div>
        <div class="ls-cell ls-cell-actions">
          <Button variant="ghost" size="sm">Contacter</Button>
        </div>
      </div>
      <div class="ls-row">
        <div class="ls-cell ls-cell-lead">
          <Avatar name="Sophie Durand" size="sm" tone="category3" />
          <div class="ls-lead-info">
            <span class="ls-lead-name">Sophie Durand</span>
            <span class="ls-lead-company">Safran SA</span>
          </div>
        </div>
        <div class="ls-cell ls-cell-score">
          <span class="ls-score-value">81</span>
          <ProgressBar label="" value={81} size="sm" showValue={false} />
        </div>
        <div class="ls-cell">Événement</div>
        <div class="ls-cell">
          <Badge tone="success">Chaud</Badge>
        </div>
        <div class="ls-cell ls-cell-actions">
          <Button variant="ghost" size="sm">Contacter</Button>
        </div>
      </div>
      <div class="ls-row">
        <div class="ls-cell ls-cell-lead">
          <Avatar name="Léa Moreau" size="sm" tone="category4" />
          <div class="ls-lead-info">
            <span class="ls-lead-name">Léa Moreau</span>
            <span class="ls-lead-company">Thales Group</span>
          </div>
        </div>
        <div class="ls-cell ls-cell-score">
          <span class="ls-score-value">74</span>
          <ProgressBar label="" value={74} size="sm" showValue={false} />
        </div>
        <div class="ls-cell">Référencement</div>
        <div class="ls-cell">
          <Badge tone="warning">Tiède</Badge>
        </div>
        <div class="ls-cell ls-cell-actions">
          <Button variant="ghost" size="sm">Contacter</Button>
        </div>
      </div>
      <div class="ls-row">
        <div class="ls-cell ls-cell-lead">
          <Avatar name="Tom Girard" size="sm" tone="category5" />
          <div class="ls-lead-info">
            <span class="ls-lead-name">Tom Girard</span>
            <span class="ls-lead-company">Capgemini</span>
          </div>
        </div>
        <div class="ls-cell ls-cell-score">
          <span class="ls-score-value">67</span>
          <ProgressBar label="" value={67} size="sm" showValue={false} />
        </div>
        <div class="ls-cell">Campagne email</div>
        <div class="ls-cell">
          <Badge tone="warning">Tiède</Badge>
        </div>
        <div class="ls-cell ls-cell-actions">
          <Button variant="ghost" size="sm">Contacter</Button>
        </div>
      </div>
      <div class="ls-row">
        <div class="ls-cell ls-cell-lead">
          <Avatar name="Julie Martin" size="sm" tone="category1" />
          <div class="ls-lead-info">
            <span class="ls-lead-name">Julie Martin</span>
            <span class="ls-lead-company">Société Générale</span>
          </div>
        </div>
        <div class="ls-cell ls-cell-score">
          <span class="ls-score-value">55</span>
          <ProgressBar label="" value={55} size="sm" showValue={false} />
        </div>
        <div class="ls-cell">Inbound web</div>
        <div class="ls-cell">
          <Badge tone="info">Froid</Badge>
        </div>
        <div class="ls-cell ls-cell-actions">
          <Button variant="ghost" size="sm">Contacter</Button>
        </div>
      </div>
    </div>
  </div>
</div>

Composants DS utilisés