Order History
An account orders card listing past orders with status badges, item thumbnails, totals, and per-order actions.
Preview
resources/views/blocks/order-history.blade.php
@props([
'heading' => 'Orders',
'subheading' => 'Track shipments, review past purchases, and reorder your favourites.',
'orders' => null,
])
@php
// Badge variant per fulfilment status — semantic tokens only.
$statusVariants = [
'Delivered' => 'success',
'Shipped' => 'default',
'Processing' => 'secondary',
'Cancelled' => 'outline',
];
$orders ??= [
[
'number' => '10482',
'placedAt' => '2026-05-28',
'placedAtLabel' => 'May 28, 2026',
'status' => 'Delivered',
'total' => '$214.00',
'items' => [
['name' => 'Cascade Weatherproof Shell', 'initials' => 'CS'],
['name' => 'Coast Wool Beanie', 'initials' => 'WB'],
['name' => 'Trail Insulated Bottle', 'initials' => 'TB'],
],
'itemCount' => 3,
],
[
'number' => '10455',
'placedAt' => '2026-05-14',
'placedAtLabel' => 'May 14, 2026',
'status' => 'Shipped',
'total' => '$96.00',
'items' => [
['name' => 'Merino Travel Crew', 'initials' => 'MC'],
],
'itemCount' => 1,
],
[
'number' => '10398',
'placedAt' => '2026-04-30',
'placedAtLabel' => 'Apr 30, 2026',
'status' => 'Processing',
'total' => '$190.00',
'items' => [
['name' => 'Aero Knit Runner', 'initials' => 'AR'],
['name' => 'Field Canvas Tote', 'initials' => 'FT'],
],
'itemCount' => 2,
],
[
'number' => '10311',
'placedAt' => '2026-04-08',
'placedAtLabel' => 'Apr 8, 2026',
'status' => 'Delivered',
'total' => '$72.00',
'items' => [
['name' => 'Everyday Tech Backpack', 'initials' => 'TB'],
['name' => 'Studio Linen Shirt', 'initials' => 'LS'],
['name' => 'Coast Wool Beanie', 'initials' => 'WB'],
['name' => 'Aero Knit Runner', 'initials' => 'AR'],
],
'itemCount' => 4,
],
];
@endphp
<x-ui.section
aria-label="{{ __('Order history') }}"
data-slot="order-history"
space="lg" {{ $attributes }}
>
<x-ui.container gutter="sm">
<x-ui.card class="overflow-hidden">
<header class="flex flex-col gap-2 border-b border-border px-6 py-6 sm:flex-row sm:items-center sm:justify-between sm:px-6">
<div>
<h2 class="text-xl font-semibold tracking-tight sm:text-2xl">{{ __($heading) }}</h2>
@if ($subheading)
<p class="mt-2 text-sm text-muted-foreground">{{ __($subheading) }}</p>
@endif
</div>
<x-ui.button variant="outline" size="sm" type="button" class="mt-4 shrink-0 sm:mt-0">
{{ __('Download invoices') }}
</x-ui.button>
</header>
<ul role="list" class="px-2 sm:px-4">
@foreach ($orders as $index => $order)
@php
$statusVariant = $statusVariants[$order['status']] ?? 'secondary';
$thumbs = array_slice($order['items'], 0, 3);
$extra = max(0, $order['itemCount'] - count($thumbs));
@endphp
@if ($index > 0)
<x-ui.separator class="my-0" />
@endif
<li class="flex flex-col gap-4 py-6 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
{{-- Order meta --}}
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
<h3 class="text-sm font-semibold text-foreground">
{{ __('Order :number', ['number' => $order['number']]) }}
</h3>
<x-ui.badge :variant="$statusVariant" size="sm">{{ __($order['status']) }}</x-ui.badge>
</div>
<dl class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-0.5 text-sm text-muted-foreground">
<div class="flex items-center gap-2">
<dt class="sr-only">{{ __('Order date') }}</dt>
<dd>
<time datetime="{{ $order['placedAt'] }}">{{ __($order['placedAtLabel']) }}</time>
</dd>
</div>
<div class="flex items-center gap-2">
<dt class="sr-only">{{ __('Items') }}</dt>
<dd>{{ trans_choice(':count item|:count items', $order['itemCount'], ['count' => $order['itemCount']]) }}</dd>
</div>
</dl>
</div>
{{-- Thumbnails --}}
<ul role="list" class="flex shrink-0 items-center -space-x-2 rtl:space-x-reverse">
@foreach ($thumbs as $item)
<li>
<x-ui.avatar
shape="rounded"
size="sm"
:alt="$item['name']"
:fallback="$item['initials']"
class="ring-2 ring-card"
/>
</li>
@endforeach
@if ($extra > 0)
<li>
<span class="relative inline-flex size-8 items-center justify-center rounded-md bg-muted text-xs font-medium text-muted-foreground ring-2 ring-card">
+{{ $extra }}
<span class="sr-only">{{ __(':count more items', ['count' => $extra]) }}</span>
</span>
</li>
@endif
</ul>
{{-- Total --}}
<div class="shrink-0 sm:w-28 sm:text-end">
<p class="text-xs text-muted-foreground">{{ __('Total') }}</p>
<p class="text-sm font-semibold tabular-nums text-foreground">{{ $order['total'] }}</p>
</div>
{{-- Actions --}}
<div class="flex shrink-0 items-center gap-2">
<x-ui.button
variant="outline"
size="sm"
type="button"
aria-label="{{ __('View order :number', ['number' => $order['number']]) }}"
>
{{ __('View order') }}
</x-ui.button>
<x-ui.button
variant="ghost"
size="sm"
type="button"
class="gap-2"
aria-label="{{ __('Reorder order :number', ['number' => $order['number']]) }}"
>
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 2v6h6" />
<path d="M3 13a9 9 0 1 0 3-7.7L3 8" />
</svg>
{{ __('Reorder') }}
</x-ui.button>
</div>
</li>
@endforeach
</ul>
</x-ui.card>
</x-ui.container>
</x-ui.section>Installation
terminal
php artisan ui:add blocks/order-historyRegistry contract
Install confidence
php artisan ui:add blocks/order-history
writes only the generated targets below. The CLI validates each file hash before writing and
prompts before replacing local changes unless --force is used.
- Version
- 1.0.5
- License
- open
- Stability
- stable
- Contract
- v1
- Foundation
- ≥ 1.0.0
| Type | Generated target |
|---|---|
| blade | resources/views/blocks/order-history.blade.php |
Registry dependencies
avatar
badge
button
card
container
section
separator
Package dependencies
composer: jml/brok:^0.2
Use with AI
A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.
order-history.md
# Brok UI block: Order History (`order-history`)
An account orders card listing past orders with status badges, item thumbnails, totals, and per-order actions.
Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.
## Install
```bash
php artisan ui:add blocks/order-history
```
## Render it
```blade
<x-blocks.order-history />
```
## Props
- `heading` (string, default `Orders`) — Card heading text.
- `subheading` (string, default `Track shipments, review past purchases, and reorder your favourites.`) — Supporting copy under the heading.
- `orders` (mixed|null, default `null`) — Array of order records ({number, placedAt, placedAtLabel, status, total, items, itemCount}); null falls back to sample orders.
## Use when
- Listing an account's past orders with status badges, item thumbnails and totals in one card.
- Letting a customer view an order's detail or reorder its items straight from the list.
## Avoid when
- Showing a single order's post-checkout confirmation or shipment tracking; use order-summary-confirmation or order-summary-tracking instead.
## Rules
- Render the installed block with `<x-blocks.order-history />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.
## Links
- Docs: https://brokui.dev/blocks/order-history
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/order-history.json
Ask about Order History in
Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.
Guidance
Use when
- Listing an account's past orders with status badges, item thumbnails and totals in one card.
- Letting a customer view an order's detail or reorder its items straight from the list.
Avoid when
- Showing a single order's post-checkout confirmation or shipment tracking; use order-summary-confirmation or order-summary-tracking instead.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
- Anatomy
Usage
Render the block as a component, passing data where useful:
resources/views/welcome.blade.php
<x-blocks.order-history />Built from primitives
This block composes installed <brok:*> primitives and semantic design
tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by
editing CSS variables; flip the preview to RTL to confirm it mirrors.
Source
The exact, editable file ui:add writes
into your app. The preview above renders this same source — there are no preview-only blocks.
resources/views/blocks/order-history.blade.php
@props([
'heading' => 'Orders',
'subheading' => 'Track shipments, review past purchases, and reorder your favourites.',
'orders' => null,
])
@php
// Badge variant per fulfilment status — semantic tokens only.
$statusVariants = [
'Delivered' => 'success',
'Shipped' => 'default',
'Processing' => 'secondary',
'Cancelled' => 'outline',
];
$orders ??= [
[
'number' => '10482',
'placedAt' => '2026-05-28',
'placedAtLabel' => 'May 28, 2026',
'status' => 'Delivered',
'total' => '$214.00',
'items' => [
['name' => 'Cascade Weatherproof Shell', 'initials' => 'CS'],
['name' => 'Coast Wool Beanie', 'initials' => 'WB'],
['name' => 'Trail Insulated Bottle', 'initials' => 'TB'],
],
'itemCount' => 3,
],
[
'number' => '10455',
'placedAt' => '2026-05-14',
'placedAtLabel' => 'May 14, 2026',
'status' => 'Shipped',
'total' => '$96.00',
'items' => [
['name' => 'Merino Travel Crew', 'initials' => 'MC'],
],
'itemCount' => 1,
],
[
'number' => '10398',
'placedAt' => '2026-04-30',
'placedAtLabel' => 'Apr 30, 2026',
'status' => 'Processing',
'total' => '$190.00',
'items' => [
['name' => 'Aero Knit Runner', 'initials' => 'AR'],
['name' => 'Field Canvas Tote', 'initials' => 'FT'],
],
'itemCount' => 2,
],
[
'number' => '10311',
'placedAt' => '2026-04-08',
'placedAtLabel' => 'Apr 8, 2026',
'status' => 'Delivered',
'total' => '$72.00',
'items' => [
['name' => 'Everyday Tech Backpack', 'initials' => 'TB'],
['name' => 'Studio Linen Shirt', 'initials' => 'LS'],
['name' => 'Coast Wool Beanie', 'initials' => 'WB'],
['name' => 'Aero Knit Runner', 'initials' => 'AR'],
],
'itemCount' => 4,
],
];
@endphp
<x-ui.section
aria-label="{{ __('Order history') }}"
data-slot="order-history"
space="lg" {{ $attributes }}
>
<x-ui.container gutter="sm">
<x-ui.card class="overflow-hidden">
<header class="flex flex-col gap-2 border-b border-border px-6 py-6 sm:flex-row sm:items-center sm:justify-between sm:px-6">
<div>
<h2 class="text-xl font-semibold tracking-tight sm:text-2xl">{{ __($heading) }}</h2>
@if ($subheading)
<p class="mt-2 text-sm text-muted-foreground">{{ __($subheading) }}</p>
@endif
</div>
<x-ui.button variant="outline" size="sm" type="button" class="mt-4 shrink-0 sm:mt-0">
{{ __('Download invoices') }}
</x-ui.button>
</header>
<ul role="list" class="px-2 sm:px-4">
@foreach ($orders as $index => $order)
@php
$statusVariant = $statusVariants[$order['status']] ?? 'secondary';
$thumbs = array_slice($order['items'], 0, 3);
$extra = max(0, $order['itemCount'] - count($thumbs));
@endphp
@if ($index > 0)
<x-ui.separator class="my-0" />
@endif
<li class="flex flex-col gap-4 py-6 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
{{-- Order meta --}}
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
<h3 class="text-sm font-semibold text-foreground">
{{ __('Order :number', ['number' => $order['number']]) }}
</h3>
<x-ui.badge :variant="$statusVariant" size="sm">{{ __($order['status']) }}</x-ui.badge>
</div>
<dl class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-0.5 text-sm text-muted-foreground">
<div class="flex items-center gap-2">
<dt class="sr-only">{{ __('Order date') }}</dt>
<dd>
<time datetime="{{ $order['placedAt'] }}">{{ __($order['placedAtLabel']) }}</time>
</dd>
</div>
<div class="flex items-center gap-2">
<dt class="sr-only">{{ __('Items') }}</dt>
<dd>{{ trans_choice(':count item|:count items', $order['itemCount'], ['count' => $order['itemCount']]) }}</dd>
</div>
</dl>
</div>
{{-- Thumbnails --}}
<ul role="list" class="flex shrink-0 items-center -space-x-2 rtl:space-x-reverse">
@foreach ($thumbs as $item)
<li>
<x-ui.avatar
shape="rounded"
size="sm"
:alt="$item['name']"
:fallback="$item['initials']"
class="ring-2 ring-card"
/>
</li>
@endforeach
@if ($extra > 0)
<li>
<span class="relative inline-flex size-8 items-center justify-center rounded-md bg-muted text-xs font-medium text-muted-foreground ring-2 ring-card">
+{{ $extra }}
<span class="sr-only">{{ __(':count more items', ['count' => $extra]) }}</span>
</span>
</li>
@endif
</ul>
{{-- Total --}}
<div class="shrink-0 sm:w-28 sm:text-end">
<p class="text-xs text-muted-foreground">{{ __('Total') }}</p>
<p class="text-sm font-semibold tabular-nums text-foreground">{{ $order['total'] }}</p>
</div>
{{-- Actions --}}
<div class="flex shrink-0 items-center gap-2">
<x-ui.button
variant="outline"
size="sm"
type="button"
aria-label="{{ __('View order :number', ['number' => $order['number']]) }}"
>
{{ __('View order') }}
</x-ui.button>
<x-ui.button
variant="ghost"
size="sm"
type="button"
class="gap-2"
aria-label="{{ __('Reorder order :number', ['number' => $order['number']]) }}"
>
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 2v6h6" />
<path d="M3 13a9 9 0 1 0 3-7.7L3 8" />
</svg>
{{ __('Reorder') }}
</x-ui.button>
</div>
</li>
@endforeach
</ul>
</x-ui.card>
</x-ui.container>
</x-ui.section>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.0.5 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v1 - Foundation
-
≥ 1.0.0