Koala logo Design
Esc
No matches for “
↑↓ navigate open Esc close
Components Timelines

Timelines

Vertical activity timeline used on quote, transaction, partner, and user detail pages. Entries group by date with sticky day headers and per-person avatars.

<partial _ActivityTimeline>
This page mirrors the emitted markup of a Portal page partial. Live rendering requires the helper to live in Koala.Web.

Canonical

Today
  1. 14:32
    Sarah Johnson accepted quote KQ-20260331-001
  2. 11:15
    Sarah Johnson added a note
  3. 09:45
    James Wilson created the quote

Entries group by day, render newest-first, and pin the day label as the user scrolls.

Variants

3 variants
Default — dots
  1. 14:32
    Sarah accepted quote
  2. 11:15
    Sarah added a note
Compact — tight rows
  1. James · status change
  2. James · status change
  3. James · status change
  4. James · status change
Icons — status events
  1. Quote accepted
  2. Note added

States

2 states
Loaded
  1. 14:32
    Sarah accepted quote
  2. 11:15
    James created quote
Empty
No activity yet

Partial / ViewData

5 entries
Key Type Notes
Model IReadOnlyList<IGrouping<DateOnly, ActivityEntity>> Activities grouped by day. Load with .Include(activity => activity.Changes).
AreaPrefix string Defaults to /conveyancing. Drives entity links.
ShowEntityLink bool Whether to render the entity-name link beneath each entry.
ShowVisibilityIcons bool Renders client/partner audience icons next to the timestamp.
StickyHeader "top-0" | "top-12" Vertical offset for sticky day labels.

Do & don't

  1. Today · 14:32
    Sarah accepted quote
  2. Yesterday · 16:20
    James created quote
Do Group by day. Show actor + verb in plain prose — reserve the diff for the changes modal.
  1. Status   old → new   by Sarah at 14:32 on 12 May 2026
  2. Status   old → new   by Sarah at 14:32 on 12 May 2026
  3. Status   old → new   by Sarah at 14:32 on 12 May 2026
  4. Status   old → new   by Sarah at 14:32 on 12 May 2026
Don't Don't inline before/after diffs and full timestamps in the row. The timeline becomes a wall of text.