Aller au contenu

Vue · CRM

Fiche opportunité

Disponible

Vue 360 d'une opportunité : étape du cycle (Stepper), montant pondéré et probabilité (KpiCard), contacts et activités. Onglets devis / historique via Tabs + OrderedList. 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é.

Fiche opportunité : Airbus (données mock)

Airbus – Refonte portail fournisseurs

Proposition
  1. Nouveau Contact entrant
  2. Qualifié Besoin confirmé
  3. 3 Proposition Devis envoyé
  4. 4 Négociation En cours
  5. 5 Gagné Bon de commande

Montant brut

€320,000.00

Montant pondéré

€192,000.00

Probabilité

60 %

Devis associés à cette opportunité

Devis associés

  1. DEV-2026-031 : Audit architecture — 28 000 €
  2. DEV-2026-032 : Design System (lot 1) — 96 000 €
  3. DEV-2026-033 : Intégration back-office — 128 000 €
  4. DEV-2026-034 : Formation & accompagnement — 68 000 €

Historique des interactions

  1. 2026-06-12 — Réunion de lancement avec le DSI d'Airbus
  2. 2026-05-28 — Envoi du cahier des charges (appel d'offres)
  3. 2026-05-14 — Qualification par Marie Lefebvre
  4. 2026-04-30 — Premier contact via salon Viva Tech
Voir le code (Svelte) 
<div class="od-shell">
  <Breadcrumb items={[{"label":"CRM","href":"#"},{"label":"Opportunités","href":"#"},{"label":"Airbus – Refonte portail fournisseurs","current":true}]} />
  <div class="od-header">
    <div class="od-header-id">
      <h2 class="od-title">Airbus – Refonte portail fournisseurs</h2>
      <Badge tone="warning">Proposition</Badge>
    </div>
    <div class="od-header-actions">
      <Button variant="secondary" size="sm">Modifier</Button>
      <Button variant="primary" size="sm">Marquer gagné</Button>
    </div>
  </div>
  <Stepper
    steps={[{"label":"Nouveau","description":"Contact entrant"},{"label":"Qualifié","description":"Besoin confirmé"},{"label":"Proposition","description":"Devis envoyé"},{"label":"Négociation","description":"En cours"},{"label":"Gagné","description":"Bon de commande"}]}
    current={2}
    orientation="horizontal"
  />
  <div class="od-kpis">
    <KpiCard
      label="Montant brut"
      value={320000}
      format="currency"
      currency="EUR"
      delta={12}
    />
    <KpiCard
      label="Montant pondéré"
      value={192000}
      format="currency"
      currency="EUR"
      delta={8}
    />
    <KpiCard
      label="Probabilité"
      value={60}
      format="number"
      currency="EUR"
      unit="%"
    />
  </div>
  <div class="od-section">
    <Tabs
      items={[{"value":"quotes","label":"Devis","content":"Devis associés à cette opportunité"},{"value":"history","label":"Historique","content":"Chronologie des interactions"}]}
      label="Sections de l'opportunité"
    />
    <div class="od-tab-content">
      <h3 class="od-section-title">Devis associés</h3>
      <OrderedList items={["DEV-2026-031 : Audit architecture — 28 000 €","DEV-2026-032 : Design System (lot 1) — 96 000 €","DEV-2026-033 : Intégration back-office — 128 000 €","DEV-2026-034 : Formation & accompagnement — 68 000 €"]} />
    </div>
    <div class="od-tab-content">
      <h3 class="od-section-title">Historique des interactions</h3>
      <OrderedList items={["2026-06-12 — Réunion de lancement avec le DSI d'Airbus","2026-05-28 — Envoi du cahier des charges (appel d'offres)","2026-05-14 — Qualification par Marie Lefebvre","2026-04-30 — Premier contact via salon Viva Tech"]} />
    </div>
  </div>
</div>

Composants DS utilisés