Aller au contenu

Vue · Projet

Backlog de sprint

Disponible

Liste priorisée des stories du sprint avec capacité d'équipe, estimation en points et progression. En-tête avec sélecteur de sprint et barre de capacité, suivie d'un tableau de stories ordonnancées et glissables avec badges de statut et de priorité.

Rendu multi-framework

Backlog de sprint (données mock)

Stories

6

Points totaux

42

Points complétés / capacité
Points complétés / capacité
8 / 40 pts
#
ID
Story
Points
Priorité
Statut
1
US-201
Authentification SSO SAML 2.0
8 pt
Critique
Terminée
2
US-202
Tableau de bord temps réel
13 pt
Haute
En cours
3
US-203
Export CSV des rapports
5 pt
Haute
En cours
4
US-204
Notifications email configurable
3 pt
Moyenne
À faire
5
US-205
Filtres avancés liste tickets
5 pt
Moyenne
À faire
6
US-206
Intégration webhook Slack
8 pt
Basse
Bloquée
Voir le code (Svelte) 
<div class="sb-shell">
  <div class="sb-header">
    <div class="sb-header-left">
      <label class="sb-sprint-label">Sprint</label>
      <Select
        value="s48"
        options={[{"value":"s47","label":"Sprint 47 (2 juin – 13 juin)"},{"value":"s48","label":"Sprint 48 (16 juin – 27 juin)"},{"value":"s49","label":"Sprint 49 (30 juin – 11 juil.)"}]}
      />
    </div>
    <div class="sb-kpis">
      <KpiCard label="Stories" value={6} tone="category2" />
      <KpiCard label="Points totaux" value={42} tone="category3" />
    </div>
  </div>
  <div class="sb-capacity">
    <span class="sb-capacity-label">Points complétés / capacité</span>
    <ProgressBar
      label="Points complétés / capacité"
      value={20}
      size="md"
      showValue
    />
    <span class="sb-capacity-ratio">8 / 40 pts</span>
  </div>
  <div class="sb-table-wrap">
    <div class="sb-table-head">
      <div class="sb-th">#</div>
      <div class="sb-th">ID</div>
      <div class="sb-th">Story</div>
      <div class="sb-th">Points</div>
      <div class="sb-th">Priorité</div>
      <div class="sb-th">Statut</div>
      <div class="sb-th"></div>
    </div>
    <div class="sb-table-body">
      <div class="sb-row">
        <div class="sb-cell sb-cell-order">1</div>
        <div class="sb-cell sb-cell-id">US-201</div>
        <div class="sb-cell sb-cell-title">
          <Avatar name="Marie Lefebvre" size="sm" tone="category1" />
          <span class="sb-title-text">Authentification SSO SAML 2.0</span>
        </div>
        <div class="sb-cell sb-cell-pts">
          <Badge tone="neutral">8 pt</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="error">Critique</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="success">Terminée</Badge>
        </div>
        <div class="sb-cell sb-cell-action">
          <Button variant="ghost" size="sm">Détail</Button>
        </div>
      </div>
      <div class="sb-row">
        <div class="sb-cell sb-cell-order">2</div>
        <div class="sb-cell sb-cell-id">US-202</div>
        <div class="sb-cell sb-cell-title">
          <Avatar name="Karim Benali" size="sm" tone="category2" />
          <span class="sb-title-text">Tableau de bord temps réel</span>
        </div>
        <div class="sb-cell sb-cell-pts">
          <Badge tone="neutral">13 pt</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="warning">Haute</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="info">En cours</Badge>
        </div>
        <div class="sb-cell sb-cell-action">
          <Button variant="ghost" size="sm">Détail</Button>
        </div>
      </div>
      <div class="sb-row">
        <div class="sb-cell sb-cell-order">3</div>
        <div class="sb-cell sb-cell-id">US-203</div>
        <div class="sb-cell sb-cell-title">
          <Avatar name="Sophie Durand" size="sm" tone="category3" />
          <span class="sb-title-text">Export CSV des rapports</span>
        </div>
        <div class="sb-cell sb-cell-pts">
          <Badge tone="neutral">5 pt</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="warning">Haute</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="info">En cours</Badge>
        </div>
        <div class="sb-cell sb-cell-action">
          <Button variant="ghost" size="sm">Détail</Button>
        </div>
      </div>
      <div class="sb-row">
        <div class="sb-cell sb-cell-order">4</div>
        <div class="sb-cell sb-cell-id">US-204</div>
        <div class="sb-cell sb-cell-title">
          <Avatar name="Léa Moreau" size="sm" tone="category4" />
          <span class="sb-title-text">Notifications email configurable</span>
        </div>
        <div class="sb-cell sb-cell-pts">
          <Badge tone="neutral">3 pt</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="neutral">Moyenne</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="neutral">À faire</Badge>
        </div>
        <div class="sb-cell sb-cell-action">
          <Button variant="ghost" size="sm">Détail</Button>
        </div>
      </div>
      <div class="sb-row">
        <div class="sb-cell sb-cell-order">5</div>
        <div class="sb-cell sb-cell-id">US-205</div>
        <div class="sb-cell sb-cell-title">
          <Avatar name="Tom Girard" size="sm" tone="category5" />
          <span class="sb-title-text">Filtres avancés liste tickets</span>
        </div>
        <div class="sb-cell sb-cell-pts">
          <Badge tone="neutral">5 pt</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="neutral">Moyenne</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="neutral">À faire</Badge>
        </div>
        <div class="sb-cell sb-cell-action">
          <Button variant="ghost" size="sm">Détail</Button>
        </div>
      </div>
      <div class="sb-row">
        <div class="sb-cell sb-cell-order">6</div>
        <div class="sb-cell sb-cell-id">US-206</div>
        <div class="sb-cell sb-cell-title">
          <Avatar name="Marie Lefebvre" size="sm" tone="category1" />
          <span class="sb-title-text">Intégration webhook Slack</span>
        </div>
        <div class="sb-cell sb-cell-pts">
          <Badge tone="neutral">8 pt</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="neutral">Basse</Badge>
        </div>
        <div class="sb-cell">
          <Badge tone="error">Bloquée</Badge>
        </div>
        <div class="sb-cell sb-cell-action">
          <Button variant="ghost" size="sm">Détail</Button>
        </div>
      </div>
    </div>
  </div>
</div>

Composants DS utilisés