Aller au contenu

Vue · CRM

Annuaire des contacts

Disponible

Répertoire filtrable des contacts avec recherche, segments et table dense. Avatar, rôle et compte rattaché pour chaque ligne, avec actions rapides d'édition via Button et Dropdown. Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular.

Rendu multi-framework

Annuaire des contacts (données mock)

Contact
Rôle
Compte
Segment
Marie Lefebvre[email protected]
Directrice Commerciale
Airbus Group
Client
Karim Benali[email protected]
Responsable IT
Orange SA
Client
Sophie Durand[email protected]
Chef de Projet
Safran SA
Prospect
Léa Moreau[email protected]
Analyste BI
Thales Group
Partenaire
Tom Girard[email protected]
Architecte Solutions
Capgemini
Prospect
Julie Martin[email protected]
DSI
Société Générale
Client
Romain Petit[email protected]
DG Technique
Dassault Systèmes
Partenaire
Voir le code (Svelte) 
<div class="cd-shell">
  <div class="cd-toolbar">
    <div class="cd-search">
      <Input label="Rechercher" placeholder="Nom, compte, e-mail…" type="search" />
    </div>
    <Select
      label="Segment"
      value="all"
      options={[{"value":"all","label":"Tous"},{"value":"client","label":"Clients"},{"value":"prospect","label":"Prospects"},{"value":"partner","label":"Partenaires"}]}
    />
    <Combobox
      label="Compte"
      placeholder="Filtrer par compte…"
      options={[{"value":"Airbus Group","label":"Airbus Group"},{"value":"Orange SA","label":"Orange SA"},{"value":"Safran SA","label":"Safran SA"},{"value":"Thales Group","label":"Thales Group"},{"value":"Capgemini","label":"Capgemini"},{"value":"Société Générale","label":"Société Générale"},{"value":"Dassault Systèmes","label":"Dassault Systèmes"}]}
    />
    <Button variant="primary" size="sm">Nouveau contact</Button>
  </div>
  <div class="cd-table-head">
    <div class="cd-th">Contact</div>
    <div class="cd-th">Rôle</div>
    <div class="cd-th">Compte</div>
    <div class="cd-th">Segment</div>
    <div class="cd-th"></div>
  </div>
  <div class="cd-table-body">
    <div class="cd-row">
      <div class="cd-cell cd-cell-contact">
        <Avatar name="Marie Lefebvre" size="sm" tone="category1" />
        <div class="cd-info">
          <span class="cd-name">Marie Lefebvre</span>
          <span class="cd-email">[email protected]</span>
        </div>
      </div>
      <div class="cd-cell">Directrice Commerciale</div>
      <div class="cd-cell">Airbus Group</div>
      <div class="cd-cell">
        <Badge tone="success">Client</Badge>
      </div>
      <div class="cd-cell cd-cell-actions">
        <Button variant="ghost" size="sm">Modifier</Button>
        <OverflowMenu
          label="Actions du contact"
          triggerLabel="Plus d'actions"
          placement="bottom-end"
          items={[{"value":"view","label":"Voir le profil"},{"value":"email","label":"Envoyer un e-mail"},{"value":"delete","label":"Supprimer","danger":true}]}
        />
      </div>
    </div>
    <div class="cd-row">
      <div class="cd-cell cd-cell-contact">
        <Avatar name="Karim Benali" size="sm" tone="category2" />
        <div class="cd-info">
          <span class="cd-name">Karim Benali</span>
          <span class="cd-email">[email protected]</span>
        </div>
      </div>
      <div class="cd-cell">Responsable IT</div>
      <div class="cd-cell">Orange SA</div>
      <div class="cd-cell">
        <Badge tone="success">Client</Badge>
      </div>
      <div class="cd-cell cd-cell-actions">
        <Button variant="ghost" size="sm">Modifier</Button>
        <OverflowMenu
          label="Actions du contact"
          triggerLabel="Plus d'actions"
          placement="bottom-end"
          items={[{"value":"view","label":"Voir le profil"},{"value":"email","label":"Envoyer un e-mail"},{"value":"delete","label":"Supprimer","danger":true}]}
        />
      </div>
    </div>
    <div class="cd-row">
      <div class="cd-cell cd-cell-contact">
        <Avatar name="Sophie Durand" size="sm" tone="category3" />
        <div class="cd-info">
          <span class="cd-name">Sophie Durand</span>
          <span class="cd-email">[email protected]</span>
        </div>
      </div>
      <div class="cd-cell">Chef de Projet</div>
      <div class="cd-cell">Safran SA</div>
      <div class="cd-cell">
        <Badge tone="info">Prospect</Badge>
      </div>
      <div class="cd-cell cd-cell-actions">
        <Button variant="ghost" size="sm">Modifier</Button>
        <OverflowMenu
          label="Actions du contact"
          triggerLabel="Plus d'actions"
          placement="bottom-end"
          items={[{"value":"view","label":"Voir le profil"},{"value":"email","label":"Envoyer un e-mail"},{"value":"delete","label":"Supprimer","danger":true}]}
        />
      </div>
    </div>
    <div class="cd-row">
      <div class="cd-cell cd-cell-contact">
        <Avatar name="Léa Moreau" size="sm" tone="category4" />
        <div class="cd-info">
          <span class="cd-name">Léa Moreau</span>
          <span class="cd-email">[email protected]</span>
        </div>
      </div>
      <div class="cd-cell">Analyste BI</div>
      <div class="cd-cell">Thales Group</div>
      <div class="cd-cell">
        <Badge tone="neutral">Partenaire</Badge>
      </div>
      <div class="cd-cell cd-cell-actions">
        <Button variant="ghost" size="sm">Modifier</Button>
        <OverflowMenu
          label="Actions du contact"
          triggerLabel="Plus d'actions"
          placement="bottom-end"
          items={[{"value":"view","label":"Voir le profil"},{"value":"email","label":"Envoyer un e-mail"},{"value":"delete","label":"Supprimer","danger":true}]}
        />
      </div>
    </div>
    <div class="cd-row">
      <div class="cd-cell cd-cell-contact">
        <Avatar name="Tom Girard" size="sm" tone="category5" />
        <div class="cd-info">
          <span class="cd-name">Tom Girard</span>
          <span class="cd-email">[email protected]</span>
        </div>
      </div>
      <div class="cd-cell">Architecte Solutions</div>
      <div class="cd-cell">Capgemini</div>
      <div class="cd-cell">
        <Badge tone="info">Prospect</Badge>
      </div>
      <div class="cd-cell cd-cell-actions">
        <Button variant="ghost" size="sm">Modifier</Button>
        <OverflowMenu
          label="Actions du contact"
          triggerLabel="Plus d'actions"
          placement="bottom-end"
          items={[{"value":"view","label":"Voir le profil"},{"value":"email","label":"Envoyer un e-mail"},{"value":"delete","label":"Supprimer","danger":true}]}
        />
      </div>
    </div>
    <div class="cd-row">
      <div class="cd-cell cd-cell-contact">
        <Avatar name="Julie Martin" size="sm" tone="category1" />
        <div class="cd-info">
          <span class="cd-name">Julie Martin</span>
          <span class="cd-email">[email protected]</span>
        </div>
      </div>
      <div class="cd-cell">DSI</div>
      <div class="cd-cell">Société Générale</div>
      <div class="cd-cell">
        <Badge tone="success">Client</Badge>
      </div>
      <div class="cd-cell cd-cell-actions">
        <Button variant="ghost" size="sm">Modifier</Button>
        <OverflowMenu
          label="Actions du contact"
          triggerLabel="Plus d'actions"
          placement="bottom-end"
          items={[{"value":"view","label":"Voir le profil"},{"value":"email","label":"Envoyer un e-mail"},{"value":"delete","label":"Supprimer","danger":true}]}
        />
      </div>
    </div>
    <div class="cd-row">
      <div class="cd-cell cd-cell-contact">
        <Avatar name="Romain Petit" size="sm" tone="category2" />
        <div class="cd-info">
          <span class="cd-name">Romain Petit</span>
          <span class="cd-email">[email protected]</span>
        </div>
      </div>
      <div class="cd-cell">DG Technique</div>
      <div class="cd-cell">Dassault Systèmes</div>
      <div class="cd-cell">
        <Badge tone="neutral">Partenaire</Badge>
      </div>
      <div class="cd-cell cd-cell-actions">
        <Button variant="ghost" size="sm">Modifier</Button>
        <OverflowMenu
          label="Actions du contact"
          triggerLabel="Plus d'actions"
          placement="bottom-end"
          items={[{"value":"view","label":"Voir le profil"},{"value":"email","label":"Envoyer un e-mail"},{"value":"delete","label":"Supprimer","danger":true}]}
        />
      </div>
    </div>
  </div>
</div>

Composants DS utilisés