Activity timeline

What happened, in order

Timeline

An icon and its tone for each kind of event.

Order #5200 placed Online store · 17:24
Packing started Mia Novak · 17:26
Out for delivery DoorDash · 17:41

Show the code

<ol class="timeline">
<li>
<span class="t-ico accent" aria-hidden="true">
<i class="ti ti-shopping-cart">
</i>
</span>
<div>
<b>Order #5200 placed</b>
<small>Online store · 17:24</small>
</div>
</li>
<li>
<span class="t-ico warning" aria-hidden="true">
<i class="ti ti-package">
</i>
</span>
<div>
<b>Packing started</b>
<small>Mia Novak · 17:26</small>
</div>
</li>
<li>
<span class="t-ico success" aria-hidden="true">
<i class="ti ti-truck-delivery">
</i>
</span>
<div>
<b>Out for delivery</b>
<small>DoorDash · 17:41</small>
</div>
</li>
</ol>

A day of activity

From the audit log.

Leo Park signed in 17:26 · Back office
Mia Novak refunded R-041171 16:33 · Back office
Maya Kapoor changed the price of Cappuccino to $4.20 15:40 · Back office
Diego Reyes approved PO-1059 14:47 · Phone
Grace Okafor exported customers.csv 13:54 · Back office

Show the code

<ol class="timeline">
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-login">
</i>
</span>
<div>
<b>Leo Park signed in</b>
<small>17:26 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-receipt-refund">
</i>
</span>
<div>
<b>Mia Novak refunded R-041171</b>
<small>16:33 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-tag">
</i>
</span>
<div>
<b>Maya Kapoor changed the price of Cappuccino to $4.20</b>
<small>15:40 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-file-check">
</i>
</span>
<div>
<b>Diego Reyes approved PO-1059</b>
<small>14:47 · Phone</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-download">
</i>
</span>
<div>
<b>Grace Okafor exported customers.csv</b>
<small>13:54 · Back office</small>
</div>
</li>
</ol>