Koala UI

CRM

A customer's record, ready to drop in. The person and the next actions, the account facts beside them, and tabs for everything that happened: spending KPIs behind a period switch, charts, orders, invoices, activity and notes.

Variant 1

Pro

Built from#

The shell is the docked Layout the dashboards use, with the Customers group of the Sidebar open as a SidebarCollapsible and a Breadcrumb in the sticky top bar. The record opens on an Avatar with a Flag in its AvatarBadge, and the facts are three DescriptionLists. The overview is a segmented ToggleGroup driving a StatGroup, two Charts in Cards and a Table of orders; the other tabs hold the invoices, an ActivityFeed and an EmptyState for the notes.

Responsive#

Each preview renders inside an iframe, so the screen's breakpoints respond to the frame width. The facts sit beside the person from xl; below it they drop under the actions, three to a row from md and two on a phone. The charts stack below lg, where the rail also moves into the drawer behind the mobile bar, and the KPI band goes to one column on a phone.

FAQ#

The KPI tiles read one entry per period from a plain object keyed by the ToggleGroup's value (month, quarter, year). Fill each entry from your own query; the group never lets the selection go empty.