# Bulk Progress

> Source: https://design.nanatec.co.ke/components/bulk-progress/
> Progress for a long run over many items — posting readings, generating invoices, sending reminders — where individual items can fail without stopping the rest.
> Status: stable
> Since: v0.0.28

Month-end in a rental system is a batch: 120 invoices, 90 reminders, a meter
reading posted for every unit. Some of them will fail — a unit with no reading,
a tenant with no email — and the rest should carry on regardless.

A bar that only says "84 of 120" leaves the reader to find out later which three
were skipped. This keeps the failed items and their reasons in view while the
run goes, and offers them back for a retry when it stops.

## Preview

```html
<nana-bulk-progress
  label="Generating invoices"
  unit="invoice"
  status="complete"
  total="120"
  done="117"
  open
  failures='[{"label":"Unit 4B","reason":"No meter reading for August"},{"label":"Unit 9A","reason":"Tenant has no email address"},{"label":"Unit 12","reason":"Rent not set on the tenancy"}]'
  style="max-width:32rem"
></nana-bulk-progress>
```

## Installation

The attribute names, events and CSS hooks below are the Web Components
reference.

## Events

| Event | Type | Description |
|---|---|---|
| `nana-retry` | `CustomEvent` | The reader asked to run the failed items again (`detail.failures`) |
| `nana-cancel` | `CustomEvent` | The reader asked to stop the run |

## Slots

| Slot | Description |
|---|---|
| `(default)` | Extra detail under the summary |
| `failures` | Replaces the generated failure list |
| `actions` | Extra buttons beside the retry control |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The container |
| `header` | The title row |
| `title` | The run's name |
| `status` | The status chip |
| `summary` | The count line under the bar |
| `failures` | The failure region |
| `failure` | One failed item |
| `toggle` | The disclosure button for the failure list |
| `actions` | The actions row |
| `retry` | The retry button |
| `cancel` | The cancel button |

## Related components

<ul class="related not-content">
  <li><a href="/components/meter-input/">Meter Input</a></li>
  <li><a href="/components/progress-bar/">Progress Bar</a></li>
  <li><a href="/components/alert/">Alert</a></li>
  <li><a href="/components/table/">Table</a></li>
  <li><a href="/components/empty-state/">Empty State</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-bulk-progress--docs