Customer

The standard detail page — header, facts, related records
Email
ana@example.com
Phone
+40 722 000 000
City
Bucharest
Company
Genus SRL
VAT number
RO12345678
Member since
14.03.2024
Notes
Prefers email contact. Key account for the enterprise plan renewal in Q4.
  • Placed order #3102 — €1,250.00
    17.07.2026 14:20
  • Invoice #2041 sent by email
    03.07.2026 09:12
  • Profile updated (billing address)
    28.06.2026 16:45

Account

PlanBusiness
StatusActive
Total orders27
Lifetime value€18,420.00

Recent orders

All orders
Order Status Total
#3102 Paid €1,250.00
#3067 Paid €980.00
#3011 Refunded €415.00

The rules — the detail page

  • The detail page is READ-first: it shows one entity; editing happens through the header's Edit action (a former modal or an edit page), not inline.
  • The page header carries the identity (avatar + name + status line) and the actions: ONE primary (Edit), secondaries as .btn-secondary; destructive actions go behind a More dropdown, through g.confirm.
  • The facts grid: .row.g-3 of label-over-value pairs (.text-body-secondary.small label) — the same mobile-first columns as forms; long text fields take col-12.
  • The aside holds the summary numbers (a plain table in card-body — the small-table exception) and RELATED records — 3–5 rows each with a link to the full list; a related list that grows beyond that becomes a lister block or its own tab.
  • Tabs only when the entity has real facets (Overview / Activity here); one facet = no tabs.