Aller au contenu

Vue · CRM

Suivi des devis

Disponible

Suivi des devis par statut (envoyé, accepté, expiré) avec totaux et taux d'acceptation. Filtres par période via Select et DatePicker, alertes d'échéance via Alert, indicateurs clés via KpiCard et table des montants via DataTable + Badge. 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é.

Suivi des devis : T2 2026 (données mock)

Total devis

24

Montant total

1 248 500 €

Taux d'acceptation

62 %

Devis expirés

4

Liste des devis
DEV-2026-041Airbus Group SE210 000 €[object Object]2026-06-30
DEV-2026-038Orange Business87 500 €[object Object]2026-07-15
DEV-2026-035Société Générale320 000 €[object Object]2026-07-02
DEV-2026-031Capgemini France54 000 €[object Object]2026-05-31
DEV-2026-028Thales Group175 000 €[object Object]2026-06-20
DEV-2026-024Safran SA98 000 €[object Object]2026-05-15
Voir le code (Svelte) 
<div class="qt-shell">
  <Alert tone="warning" title="2 devis expirent dans moins de 7 jours">DEV-2026-038 (Orange) et DEV-2026-035 (Société Générale) arrivent à échéance prochainement.</Alert>
  <div class="qt-filters">
    <Select
      label="Période"
      value="q2-2026"
      options={[{"value":"q1-2026","label":"T1 2026"},{"value":"q2-2026","label":"T2 2026"},{"value":"q3-2026","label":"T3 2026"}]}
    />
    <Select
      label="Statut"
      value="all"
      options={[{"value":"all","label":"Tous"},{"value":"sent","label":"Envoyé"},{"value":"accepted","label":"Accepté"},{"value":"expired","label":"Expiré"}]}
    />
    <DatePicker label="Du" value="2026-04-01" />
    <DatePicker label="Au" value="2026-06-30" />
  </div>
  <div class="qt-kpis">
    <KpiCard label="Total devis" value="24" trend="+3" tone="neutral" />
    <KpiCard
      label="Montant total"
      value="1 248 500 €"
      trend="+12 %"
      tone="success"
    />
    <KpiCard label="Taux d'acceptation" value="62 %" trend="+5 pt" tone="success" />
    <KpiCard label="Devis expirés" value="4" trend="-1" tone="danger" />
  </div>
  <DataTable
    caption="Liste des devis"
    columns={[{"key":"id","label":"N° devis","sortable":true},{"key":"client","label":"Client","sortable":true},{"key":"amount","label":"Montant HT","sortable":true,"align":"end"},{"key":"status","label":"Statut","sortable":true},{"key":"expires","label":"Échéance","sortable":true}]}
    rows={[{"id":"DEV-2026-041","client":"Airbus Group SE","amount":"210 000 €","status":{"comp":"Badge","props":{"tone":"success"},"children":["Accepté"]},"statusTone":"success","expires":"2026-06-30"},{"id":"DEV-2026-038","client":"Orange Business","amount":"87 500 €","status":{"comp":"Badge","props":{"tone":"info"},"children":["Envoyé"]},"statusTone":"info","expires":"2026-07-15"},{"id":"DEV-2026-035","client":"Société Générale","amount":"320 000 €","status":{"comp":"Badge","props":{"tone":"info"},"children":["Envoyé"]},"statusTone":"info","expires":"2026-07-02"},{"id":"DEV-2026-031","client":"Capgemini France","amount":"54 000 €","status":{"comp":"Badge","props":{"tone":"danger"},"children":["Expiré"]},"statusTone":"danger","expires":"2026-05-31"},{"id":"DEV-2026-028","client":"Thales Group","amount":"175 000 €","status":{"comp":"Badge","props":{"tone":"success"},"children":["Accepté"]},"statusTone":"success","expires":"2026-06-20"},{"id":"DEV-2026-024","client":"Safran SA","amount":"98 000 €","status":{"comp":"Badge","props":{"tone":"danger"},"children":["Expiré"]},"statusTone":"danger","expires":"2026-05-15"}]}
    size="sm"
  />
  <div class="qt-actions">
    <Button variant="secondary" size="sm">Exporter CSV</Button>
    <Button variant="primary" size="sm">Nouveau devis</Button>
  </div>
</div>

Composants DS utilisés