Aller au contenu

Vue · Transversal

Centre de notifications

Disponible

Inbox unifiée : onglets par catégorie, liste de notifications avec avatar et badge de statut, filtres et actions groupées (tout marquer comme lu). Pour centraliser alertes, mentions et événements système.

Rendu multi-framework

Centre de notifications (données mock)

3 notifications non lues
Marie LefebvreMention09:42

Vous a mentionné dans « Refonte ERP Airbus »

SystèmeAlerte09:15

Échec du job d'import de données (lot #2847)

Karim BenaliApprobation08:57

En attente de votre validation pour le devis #4412

Sophie DurandCommentaire08:30

A répondu à votre commentaire sur la migration Safran

SystèmeSuccès07:55

Export CSV terminé — 1 248 lignes générées

Voir le code (Svelte) 
<div class="nc-shell">
  <div class="nc-toolbar">
    <Tabs
      activeValue="all"
      label="Filtres de notifications"
      items={[{"value":"all","label":"Tout","content":""},{"value":"mentions","label":"Mentions","content":""},{"value":"alerts","label":"Alertes","content":""},{"value":"system","label":"Système","content":""}]}
    />
    <div class="nc-actions">
      <Button variant="ghost" size="sm">Tout marquer comme lu</Button>
      <OverflowMenu
        label="Filtrer"
        triggerLabel="Filtrer"
        placement="bottom-end"
        items={[{"value":"unread","label":"Non lus seulement"},{"value":"mentions","label":"Mentions"},{"value":"alerts","label":"Alertes"}]}
      />
    </div>
  </div>
  <Alert tone="info">3 notifications non lues</Alert>
  <div class="nc-list">
    <div class="nc-row">
      <Avatar name="Marie Lefebvre" size="sm" tone="category1" />
      <div class="nc-body">
        <div class="nc-top">
          <span class="nc-sender">Marie Lefebvre</span>
          <Badge tone="info">Mention</Badge>
          <span class="nc-time">09:42</span>
        </div>
        <p class="nc-msg">Vous a mentionné dans « Refonte ERP Airbus »</p>
      </div>
      <div class="nc-dot-wrap">
        <span class="nc-dot" />
      </div>
    </div>
    <div class="nc-row">
      <Avatar name="Système" size="sm" tone="category3" />
      <div class="nc-body">
        <div class="nc-top">
          <span class="nc-sender">Système</span>
          <Badge tone="error">Alerte</Badge>
          <span class="nc-time">09:15</span>
        </div>
        <p class="nc-msg">Échec du job d'import de données (lot #2847)</p>
      </div>
      <div class="nc-dot-wrap">
        <span class="nc-dot" />
      </div>
    </div>
    <div class="nc-row">
      <Avatar name="Karim Benali" size="sm" tone="category2" />
      <div class="nc-body">
        <div class="nc-top">
          <span class="nc-sender">Karim Benali</span>
          <Badge tone="warning">Approbation</Badge>
          <span class="nc-time">08:57</span>
        </div>
        <p class="nc-msg">En attente de votre validation pour le devis #4412</p>
      </div>
      <div class="nc-dot-wrap">
        <span class="nc-dot" />
      </div>
    </div>
    <div class="nc-row nc-row--read">
      <Avatar name="Sophie Durand" size="sm" tone="category4" />
      <div class="nc-body">
        <div class="nc-top">
          <span class="nc-sender">Sophie Durand</span>
          <Badge tone="neutral">Commentaire</Badge>
          <span class="nc-time">08:30</span>
        </div>
        <p class="nc-msg">A répondu à votre commentaire sur la migration Safran</p>
      </div>
      <div class="nc-dot-wrap" />
    </div>
    <div class="nc-row nc-row--read">
      <Avatar name="Système" size="sm" tone="category5" />
      <div class="nc-body">
        <div class="nc-top">
          <span class="nc-sender">Système</span>
          <Badge tone="success">Succès</Badge>
          <span class="nc-time">07:55</span>
        </div>
        <p class="nc-msg">Export CSV terminé — 1 248 lignes générées</p>
      </div>
      <div class="nc-dot-wrap" />
    </div>
  </div>
</div>

Composants DS utilisés