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

Call log

The softphone call history — a calm list of calls, each with a status-tinted phone glyph, the other party (contact name or number), the local date & time, who handled it, the connected duration, and an outcome badge. Rows optionally carry a reference chip linking to the transaction or quote the call belongs to. Used by the per-transaction Calls tab and the global own-calls page.

<koala-call-log>
  • Jane Carter
    Marcus Webb
    4m 12s
  • 07700 900123
    Marcus Webb
  • Priya Shah
    Jane Carter
    48s
  • 07700 900456
    Marcus Webb
<koala-call-log model="@callLog" />

The default shape — the per-transaction Calls tab. The transaction is already the context, so rows carry no reference chip.

2 variants

With reference chips

On the global own-calls page a call can belong to any transaction or quote, so each row links to it via a ContextLabel / ContextUrl chip.

  • Jane Carter
    Marcus WebbP-VRMUDC
    4m 12s
  • 07700 900123
    Marcus WebbQ-OQKBLK

With a recording

When a call has a recording, its row shows a play button; pressing it morphs the row in place into playback controls — play/pause, skip ±10s, a draggable scrubber, and elapsed / total time (the koalaAudioPlayer Alpine component; preload="none", streamed from RecordingUrl). Closing (or the track ending) flips back to the row; only one plays at a time. Rows without a recording are unchanged.

  • Jane Carter
    Marcus Webb
    4m 12s
  • 07700 900123
    Marcus Webb
4 outcomes

The status badge and the glyph tint come from the call outcome: Completed → Success, No answer / Busy → Warning, Failed → Danger, and dialling / ringing / cancelled → Neutral.

  • Completed call
    4m 12s
  • Unanswered call
  • Failed call
  • Cancelled call
1 attribute
Attribute Values Notes
model CallLogModel Holds Calls — a list of CallLogItem (party, outbound, status label + colour, duration, the local date & time, who handled it, an optional reference chip, and an optional RecordingUrl that morphs the row into an in-row playback player). Shape a CallEntity with CallLogFactory.From.

No calls yet

Calls to this transaction's contacts will show up here.

Do Compose a koala-empty-state when the list is empty — the copy differs per surface, so the caller owns it.
Bespoke ul/li call markup
Don't Don't hand-roll call rows in the page. Shape the data with CallLogFactory and let koala-call-log render it, so both surfaces stay identical.