Components Summary filter

Summary filter

A row of clickable summary cards that double as a multi-select filter — each card shows a region heading and coloured-dot stat rows, and toggles its key in a host Alpine array when clicked. Any number can be active at once; an empty array shows everything. Drives the Enquiries tab's With Koala / Waiting on others / Done filter.

<koala-summary-filter>

Canonical

Active filters:

<div x-data="{ enqFilter: [] }">
    <koala-summary-filter model="enqFilter" cards="@cards" />
</div>

Each card toggles its key in the host's enqFilter Alpine array; every active card is highlighted and any number can be selected at once (an empty array shows everything). Cards stack on mobile and sit three-up from the sm breakpoint. A card's last stat renders count / total when the card carries a Total.

Props

Attribute	Values	Notes
cards	IReadOnlyList<SummaryFilterCard>	The cards. `SummaryFilterCard(Key, Heading, Stats, Total?)` where `Stats` is `SummaryFilterStat(Label, Count, Dot)` and `Dot` is a `BadgeColor`. Optional `Total` renders "count / total" on the last stat.
model	string	The host Alpine array variable each card toggles its key in when clicked (initialise as `[]` = no filter). Multiple cards can be active at once. Default `filter`.
class	string	Extra classes on the card grid.

Do & don't

Do Use it as a filter where each card maps to a selectable state — like the Enquiries With Koala / Waiting on others / Done grouping.

Don't Don't use it as a static stat headline, and don't hand-roll the cards inline — compose SummaryFilterCard data and let the helper own the surface + active state.