Alice Martin a validé le devis DV-104 · il y a 2 j
bpm.activityFeed
Fil d'activité : flux chronologique d'activités métier avec avatars initiaux, horodatages relatifs en français (« il y a 2 h », « hier ») et état vide. Idéal pour un historique CRM, un journal d'audit léger ou la timeline d'événements d'une fiche.
Karim Benali a assigné le ticket SUP-2231 à Léa · il y a 2 j
Léa Dupont a commenté la commande CMD-5512 · il y a 2 j
Marc Rivière a signalé un retard sur la livraison LIV-887 · il y a 2 j
Python
activities = [
{"actor": "Alice Martin", "action": "a validé", "target": "le devis DV-104", "timestamp": "2026-06-12T09:40:00+02:00", "color": "success"},
{"actor": "Karim Benali", "action": "a assigné", "target": "le ticket SUP-2231 à Léa", "timestamp": "2026-06-12T08:55:00+02:00", "color": "info"},
{"actor": "Léa Dupont", "action": "a commenté", "target": "la commande CMD-5512", "timestamp": "2026-06-12T07:30:00+02:00"},
{"actor": "Marc Rivière", "action": "a signalé un retard sur", "target": "la livraison LIV-887", "timestamp": "2026-06-11T17:05:00+02:00", "color": "warning"},
{"actor": "Sophie Nguyen", "action": "a créé", "target": "la fiche client Transports Brunet", "timestamp": "2026-06-11T09:20:00+02:00", "color": "success"},
{"actor": "Hugo Faure", "action": "a archivé", "target": "le projet Refonte intranet", "timestamp": "2026-06-09T14:45:00+02:00"},
]
bpm.activity_feed(activities, max_items=4)| Prop | Type | Défaut | Requis | Description |
|---|---|---|---|---|
activities | { id, actor, action, target, timestamp, icon?, color? }[] | — | Oui | Liste ordonnée des activités (ordre = ordre d'affichage). timestamp au format ISO ; color ∈ default | info | success | warning | error. |
maxItems | number | — | Non | Nombre max d'entrées visibles ; au-delà, le bouton « Charger plus » apparaît si onLoadMore est défini. |
onLoadMore | () => void | — | Non | Callback du bouton « Charger plus » (affiché quand activities.length > maxItems). |
emptyMessage | string | "Aucune activité récente." | Non | Message centré affiché quand activities est vide. |
compact | boolean | false | Non | Densité réduite : typo et padding plus petits, avatars 24 px. |
className | string | "" | Non | Classes CSS additionnelles sur le conteneur .bpm-activity-feed. |
Exemples
activities = [
{"actor": "Alice Martin", "action": "a validé", "target": "le devis DV-104", "timestamp": "2026-06-12T09:40:00+02:00", "color": "success"},
{"actor": "Karim Benali", "action": "a assigné", "target": "le ticket SUP-2231 à Léa", "timestamp": "2026-06-12T08:55:00+02:00", "color": "info"},
]
bpm.activity_feed(activities)# Forme tuple (actor, action, target, color?) : timestamp = maintenant
bpm.activity_feed([
("Sophie Nguyen", "a créé", "la fiche client Transports Brunet", "success"),
("Marc Rivière", "a signalé un retard sur", "la livraison LIV-887", "warning"),
], compact=True)# Liste longue : limite + bouton « Charger plus » côté front
bpm.activity_feed(activities, max_items=5)