Customer Detail

This is the entire template — edit it live in the editor, or paste it into any .wiremark file.

wiremarkUI
  sidebar SD {
    nav "Dashboard"
    nav "Customers" active
    nav "Orders"
    nav "Invoices"
    nav "Settings"
  }
  header H "Acme CRM"

  page CUSTOMER "Customer Detail" {
    H
    SD

    breadcrumb "Customers", "Alice Martin"

    toolbar {
      button "Edit"
      button "Send invoice"
      button "Archive" disabled
    }

    split {
      card "Customer" {
        field "Name" "Alice Martin"
        field "Email" "alice@example.com"
        field "Plan" "Enterprise"
        field "Status" "Active"
        field "Account manager"
      }
      card "Billing" {
        field "MRR" "€2,400"
        field "Renewal" "2027-01-14"
        field "Payment method" "SEPA"
        field "Outstanding" "€0.00"
        field "PO number"
      }
    }

    spacer "16"

    chart "Monthly spend — last 6 months" "bar"

    split {
      chart "Support tickets" "line" small
      chart "Product usage" "pie" small
    }

    spacer "16"

    section "Recent Orders" {
      table "Orders" {
        columns "Order", "Date", "Items", "Total", "Status"
        row "#4821", "2026-07-14", "3", "€184.50", "Shipped"
        row "#4790", "2026-06-28", "1", "€49.00", "Delivered"
        row "#4712", "2026-06-02", "7", "€612.00", "Delivered"
      }
      pagination "1" "4"
    }

    footer centered {
      text "Acme CRM — internal use only"
    }
  }